/* --------------------------------------------------------------------------
   SaloCart V5.2.20 — Secure internal messaging
   Conversation UI intentionally uses light native CSS only: no framework or
   websocket runtime required. It is optimized for responsive PHP/cPanel apps.
   -------------------------------------------------------------------------- */

.chat-button { color: var(--sc-blue, #1976d2); }
.chat-button:hover,
.chat-button:focus-visible { color: var(--sc-blue, #1976d2); background: rgba(25,118,210,.10); }
.chat-dot,
.desktop-nav-messages > b,
[data-chat-unread]:not(.d-none) {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .28rem;
  border-radius: 999px;
  background: #e9584f;
  color: #fff;
  font-size: .61rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}

.chat-dot { position:absolute; top:4px; right:4px; }
.desktop-nav-messages { position:relative; }
.desktop-nav-messages > b { margin-left: .25rem; box-shadow:none; }
.seller-action-strip [data-chat-unread],
.partner-tool-card [data-chat-unread],
.account-menu-action [data-chat-unread],
.mobile-menu-item [data-chat-unread] { margin-left:.28rem; vertical-align:middle; box-shadow:none; }

.shopper-message-button { color: var(--sc-blue, #1976d2); }
.shopper-message-button i { color: inherit; }

.chat-page { padding-bottom: clamp(2rem, 6vw, 4.5rem); }
.chat-page-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.chat-page-head h1 {
  margin:.18rem 0 0;
  font-family:var(--font-display, Sora, sans-serif);
  font-size:clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing:-.05em;
  line-height:1.06;
}
.chat-page-head p { margin:.45rem 0 0; max-width:68ch; color:var(--sc-muted, #637469); line-height:1.58; }
.chat-page-head .section-kicker { color:var(--sc-blue, #1976d2); }

.chat-safety-strip {
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  padding:.82rem 1rem;
  margin-bottom:1rem;
  border:1px solid rgba(25,118,210,.16);
  background:linear-gradient(90deg, rgba(25,118,210,.08), rgba(15,131,24,.06));
  border-radius:18px;
  color:#35606a;
  font-size:.83rem;
  line-height:1.48;
}
.chat-safety-strip > i { color:var(--sc-green, #0f8318); font-size:1.15rem; }

.chat-layout {
  min-height:min(69dvh, 710px);
  display:grid;
  grid-template-columns:minmax(260px, 340px) minmax(0, 1fr);
  overflow:hidden;
  border:1px solid rgba(20,50,32,.11);
  border-radius:24px;
  background:#fff;
  box-shadow:0 16px 42px rgba(14,52,34,.08);
}
.chat-inbox-panel {
  display:flex;
  min-width:0;
  flex-direction:column;
  border-right:1px solid rgba(20,50,32,.09);
  background:linear-gradient(180deg, #fbfdfc, #f5faf7);
}
.chat-inbox-panel > header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:1rem 1rem .85rem;
  border-bottom:1px solid rgba(20,50,32,.08);
}
.chat-inbox-panel > header span { display:block; color:var(--sc-muted,#637469); font-size:.69rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.chat-inbox-panel > header strong { display:block; margin-top:.2rem; font-size:.93rem; }
.chat-inbox-panel > header > b { box-shadow:none; }
.chat-inbox-list { overflow:auto; padding:.5rem; scrollbar-width:thin; }
.chat-inbox-empty { min-height:190px; display:grid; place-items:center; text-align:center; color:var(--sc-muted,#637469); padding:1.25rem; }
.chat-inbox-empty i { display:grid; place-items:center; width:46px; height:46px; margin:0 auto .65rem; border-radius:15px; color:var(--sc-blue,#1976d2); background:rgba(25,118,210,.1); font-size:1.3rem; }
.chat-inbox-empty p { margin:0; max-width:25ch; font-size:.79rem; line-height:1.5; }

.chat-conversation-row,
.chat-conversation-item {
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.68rem;
  align-items:center;
  padding:.75rem;
  margin:0;
  border:0;
  border-radius:16px;
  color:var(--sc-ink,#183124);
  text-align:left;
  background:transparent;
}
.chat-conversation-row:hover,
.chat-conversation-row:focus-visible,
.chat-conversation-item:hover,
.chat-conversation-item:focus-visible { background:rgba(15,131,24,.075); outline:none; }
.chat-conversation-row.is-active,
.chat-conversation-item.is-active { background:#eaf7ee; box-shadow:inset 3px 0 0 var(--sc-green,#0f8318); }
.chat-conversation-row__copy,
.chat-conversation-copy { min-width:0; }
.chat-conversation-row__top,
.chat-conversation-top { display:flex; gap:.5rem; justify-content:space-between; align-items:center; }
.chat-conversation-row__top strong,
.chat-conversation-top strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; }
.chat-conversation-row__top time,
.chat-conversation-top time { color:var(--sc-muted,#637469); white-space:nowrap; font-size:.63rem; }
.chat-conversation-row__context,
.chat-conversation-copy small { display:flex; align-items:center; gap:.34rem; margin-top:.16rem; color:var(--sc-blue,#1976d2); font-size:.63rem; font-weight:800; }
.chat-conversation-row__preview,
.chat-conversation-copy em { display:block; overflow:hidden; margin-top:.26rem; color:var(--sc-muted,#637469); font-size:.72rem; white-space:nowrap; text-overflow:ellipsis; }
.chat-conversation-row__unread,
.chat-unread-badge { align-self:start; display:grid; place-items:center; min-width:1.15rem; height:1.15rem; padding:0 .28rem; border-radius:999px; background:var(--sc-green,#0f8318); color:#fff; font-size:.59rem; font-weight:900; }

.chat-avatar { display:grid; flex:0 0 auto; place-items:center; overflow:hidden; border-radius:50%; background:linear-gradient(135deg, var(--sc-green,#0f8318), var(--sc-blue,#1976d2)); color:#fff; font-weight:900; }
.chat-avatar img { width:100%; height:100%; object-fit:cover; }
.chat-avatar--inbox,
.chat-avatar--list { width:38px; height:38px; font-size:.8rem; }
.chat-avatar--thread { width:40px; height:40px; font-size:.84rem; }
.chat-avatar--message { width:31px; height:31px; font-size:.72rem; }

.chat-thread-wrap { min-width:0; min-height:0; }
.chat-thread-panel { min-height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.chat-thread-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:1rem 1.05rem;
  border-bottom:1px solid rgba(20,50,32,.09);
  background:#fff;
}
.chat-thread-header > div { min-width:0; display:flex; align-items:center; gap:.7rem; }
.chat-thread-header h2 { overflow:hidden; margin:.12rem 0 0; font-size:1rem; font-weight:900; white-space:nowrap; text-overflow:ellipsis; }
.chat-thread-header > div > div > span:first-child { color:var(--sc-muted,#637469); font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.chat-thread-refresh { width:38px; height:38px; flex:0 0 auto; border-radius:12px; background:#f1f6f3; color:var(--sc-green,#0f8318); }
.chat-thread-refresh:hover { background:#e6f4eb; }
.chat-context-tag { display:inline-flex; max-width:100%; align-items:center; gap:.34rem; overflow:hidden; margin-top:.3rem; padding:.25rem .48rem; border-radius:999px; color:#3c6252; background:#eef6f0; font-size:.62rem; font-weight:800; white-space:nowrap; text-overflow:ellipsis; }
.chat-message-list {
  min-height:0;
  overflow:auto;
  padding:1rem clamp(.75rem, 2vw, 1.35rem);
  background:radial-gradient(circle at 100% 0, rgba(25,118,210,.06), transparent 27%), #f8fbf9;
  scrollbar-width:thin;
}
.chat-thread-empty { display:grid; min-height:100%; place-items:center; text-align:center; color:var(--sc-muted,#637469); padding:2rem; }
.chat-thread-empty i { display:grid; place-items:center; width:54px; height:54px; margin:0 auto .8rem; border-radius:18px; color:var(--sc-green,#0f8318); background:#e7f5eb; font-size:1.4rem; }
.chat-thread-empty p { max-width:32ch; margin:0; font-size:.83rem; line-height:1.55; }
.chat-message { display:flex; max-width:min(84%, 680px); gap:.55rem; margin:.1rem 0 .78rem; }
.chat-message--own,
.chat-message.is-own { flex-direction:row-reverse; margin-left:auto; }
.chat-message-content { min-width:0; }
.chat-message-meta { display:flex; align-items:baseline; gap:.45rem; margin:0 .18rem .25rem; color:var(--sc-muted,#637469); font-size:.63rem; }
.chat-message-meta strong { color:var(--sc-ink,#183124); font-size:.7rem; }
.chat-message--own .chat-message-meta,
.chat-message.is-own .chat-message-meta { justify-content:flex-end; }
.chat-bubble { overflow-wrap:anywhere; padding:.7rem .82rem; border:1px solid rgba(20,50,32,.09); border-radius:4px 16px 16px 16px; background:#fff; box-shadow:0 4px 12px rgba(15,46,31,.035); }
.chat-message--own .chat-bubble,
.chat-message.is-own .chat-bubble { border-color:transparent; border-radius:16px 4px 16px 16px; background:linear-gradient(135deg, var(--sc-green,#0f8318), #148a5d); color:#fff; }
.chat-bubble p { margin:0; font-size:.84rem; line-height:1.52; white-space:normal; }
.chat-message-attachment,
.chat-attachment { display:block; overflow:hidden; margin-top:.55rem; border-radius:12px; background:#edf3ef; }
.chat-message-attachment img,
.chat-attachment img { display:block; width:100%; max-width:320px; max-height:360px; object-fit:cover; cursor:zoom-in; }
.chat-message--own .chat-message-attachment,
.chat-message.is-own .chat-attachment { background:rgba(255,255,255,.17); }

.chat-composer { padding:.85rem 1rem max(.85rem, env(safe-area-inset-bottom)); border-top:1px solid rgba(20,50,32,.1); background:#fff; }
.chat-composer-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.55rem; align-items:end; }
.chat-attach-button { display:grid; place-items:center; width:42px; height:42px; margin:0; border-radius:13px; color:var(--sc-blue,#1976d2); background:#edf5ff; cursor:pointer; }
.chat-attach-button:hover { background:#dcecff; }
.chat-composer textarea { min-height:42px; max-height:120px; resize:vertical; border-radius:14px; font-size:.85rem; line-height:1.42; }
.chat-send-button { min-height:42px; padding-inline:.9rem; white-space:nowrap; }
.chat-composer-note { display:flex; gap:.4rem; margin:.48rem 0 0; color:var(--sc-muted,#637469); font-size:.65rem; line-height:1.4; }
.chat-composer-note i { color:var(--sc-green,#0f8318); }
.chat-attachment-preview { display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; padding:.48rem; border:1px dashed rgba(25,118,210,.35); border-radius:14px; background:#f2f8ff; }
.chat-attachment-preview[hidden] { display:none; }
.chat-attachment-preview img { width:44px; height:44px; border-radius:10px; object-fit:cover; }
.chat-attachment-preview div { min-width:0; flex:1; }
.chat-attachment-preview strong,.chat-attachment-preview small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-attachment-preview strong { font-size:.72rem; }
.chat-attachment-preview small { color:var(--sc-muted,#637469); font-size:.63rem; }
.chat-attachment-preview .btn-sc-light { min-height:34px; width:34px; padding:0; }

.chat-empty-panel { display:grid; min-height:100%; place-items:center; align-content:center; padding:2rem; text-align:center; background:radial-gradient(circle at 50% 0, rgba(15,131,24,.08), transparent 36%), #fff; }
.chat-empty-panel > span { display:grid; place-items:center; width:74px; height:74px; margin-bottom:1rem; border-radius:25px; color:var(--sc-green,#0f8318); background:linear-gradient(135deg, #e5f5ea, #e6f1ff); font-size:2rem; }
.chat-empty-panel h2 { margin:0; font-size:1.22rem; font-weight:900; letter-spacing:-.035em; }
.chat-empty-panel > p { max-width:42ch; margin:.55rem 0 1rem; color:var(--sc-muted,#637469); font-size:.86rem; line-height:1.56; }
.chat-empty-steps { display:grid; gap:.5rem; max-width:35rem; }
.chat-empty-steps span { display:flex; align-items:flex-start; gap:.48rem; padding:.62rem .72rem; border:1px solid rgba(20,50,32,.08); border-radius:12px; background:#f7fbf8; color:#496558; font-size:.73rem; text-align:left; }
.chat-empty-steps i { color:var(--sc-green,#0f8318); }
.chat-image-preview-modal { display:grid; place-items:center; min-height:200px; background:#111; border-radius:16px; overflow:hidden; }
.chat-image-preview-modal img { display:block; max-width:100%; max-height:min(70dvh, 680px); object-fit:contain; }

.order-chat-callout {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin:1rem 0;
  padding:.8rem;
  border:1px solid rgba(25,118,210,.15);
  border-radius:16px;
  background:linear-gradient(110deg, rgba(25,118,210,.08), rgba(15,131,24,.055));
}
.order-chat-callout > div { display:flex; min-width:0; gap:.62rem; align-items:center; }
.order-chat-callout > div > i { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:11px; color:var(--sc-blue,#1976d2); background:#e8f2ff; }
.order-chat-callout strong,.order-chat-callout small { display:block; }
.order-chat-callout strong { font-size:.8rem; }
.order-chat-callout small { margin-top:.12rem; color:var(--sc-muted,#637469); font-size:.69rem; line-height:1.36; }
.order-chat-callout .btn-sc-light { flex:0 0 auto; min-height:38px; font-size:.73rem; }

html[data-theme="dark"] .chat-layout,
html[data-theme="dark"] .chat-thread-header,
html[data-theme="dark"] .chat-composer,
html[data-theme="dark"] .chat-empty-panel { background:#151c19; border-color:rgba(255,255,255,.09); }
html[data-theme="dark"] .chat-inbox-panel { background:#111814; border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .chat-message-list { background:radial-gradient(circle at 100% 0, rgba(25,118,210,.12), transparent 27%), #101714; }
html[data-theme="dark"] .chat-bubble { border-color:rgba(255,255,255,.08); color:#e9f0eb; background:#1d2922; }
html[data-theme="dark"] .chat-thread-header h2,
html[data-theme="dark"] .chat-message-meta strong,
html[data-theme="dark"] .chat-empty-panel h2 { color:#f5f8f6; }
html[data-theme="dark"] .chat-conversation-row,
html[data-theme="dark"] .chat-conversation-item { color:#edf4ef; }
html[data-theme="dark"] .chat-conversation-row.is-active,
html[data-theme="dark"] .chat-conversation-item.is-active { background:rgba(15,131,24,.22); }
html[data-theme="dark"] .chat-context-tag { color:#bddec7; background:rgba(15,131,24,.18); }
html[data-theme="dark"] .chat-attachment-preview { background:rgba(25,118,210,.14); border-color:rgba(95,171,255,.35); }
html[data-theme="dark"] .chat-safety-strip { color:#b4d5d7; background:linear-gradient(90deg, rgba(25,118,210,.14), rgba(15,131,24,.12)); border-color:rgba(98,169,255,.22); }
html[data-theme="dark"] .order-chat-callout { background:linear-gradient(110deg, rgba(25,118,210,.14), rgba(15,131,24,.12)); border-color:rgba(98,169,255,.2); }
html[data-theme="dark"] .order-chat-callout strong { color:#eef6f0; }

@media (max-width: 991.98px) {
  .chat-layout { grid-template-columns:1fr; min-height:auto; }
  .chat-inbox-panel { border-right:0; border-bottom:1px solid rgba(20,50,32,.09); }
  .chat-inbox-list { display:flex; gap:.45rem; overflow:auto; padding:.55rem; }
  .chat-conversation-row,
.chat-conversation-item { flex:0 0 min(315px, 86vw); border:1px solid rgba(20,50,32,.08); background:#fff; }
  .chat-thread-wrap { min-height:clamp(520px, 64dvh, 700px); }
  .chat-inbox-empty { min-height:98px; min-width:100%; }
}

@media (max-width: 767.98px) {
  .chat-page { padding-top:1rem; }
  .chat-page-head { align-items:flex-start; }
  .chat-page-head .btn-sc-light { min-height:39px; padding-inline:.7rem; font-size:.72rem; }
  .chat-page-head .btn-sc-light .me-1 { margin-right:0!important; }
  .chat-page-head .btn-sc-light { font-size:0; }
  .chat-page-head .btn-sc-light i { margin:0!important; font-size:.95rem; }
  .chat-safety-strip { margin-bottom:.75rem; padding:.72rem .8rem; border-radius:15px; font-size:.72rem; }
  .chat-layout { border-radius:19px; }
  .chat-inbox-panel > header { padding:.75rem .8rem; }
  .chat-inbox-list { max-height:145px; }
  .chat-conversation-row,
.chat-conversation-item { flex-basis:min(275px, 81vw); padding:.65rem; }
  .chat-thread-wrap { min-height:calc(100dvh - 295px); }
  .chat-thread-header { padding:.78rem .8rem; }
  .chat-thread-header h2 { font-size:.9rem; }
  .chat-context-tag { max-width:29ch; }
  .chat-message-list { padding:.8rem; }
  .chat-message { max-width:92%; margin-bottom:.65rem; }
  .chat-message--own,
.chat-message.is-own { margin-left:auto; }
  .chat-bubble { padding:.62rem .72rem; }
  .chat-bubble p { font-size:.79rem; }
  .chat-message-attachment img,
.chat-attachment img { max-width:240px; max-height:285px; }
  .chat-composer { padding:.7rem .75rem calc(.7rem + env(safe-area-inset-bottom)); }
  .chat-composer-row { gap:.4rem; }
  .chat-attach-button { width:40px; height:40px; border-radius:12px; }
  .chat-send-button { width:42px; min-width:42px; padding:0; }
  .chat-send-button span { display:none; }
  .chat-composer-note { font-size:.59rem; }
  .order-chat-callout { align-items:stretch; flex-direction:column; }
  .order-chat-callout .btn-sc-light { width:100%; }
}

@media (max-width: 390px) {
  .chat-thread-wrap { min-height:calc(100dvh - 288px); }
  .chat-conversation-row,
.chat-conversation-item { flex-basis:88vw; }
  .chat-avatar--inbox,
.chat-avatar--list { width:34px; height:34px; }
  .chat-composer-note { display:none; }
}

/* Markup aliases used by the app chat renderer. */
.chat-conversation-item { border:0; text-align:left; }
.chat-conversation-copy > small { display:flex; align-items:center; gap:.34rem; margin-top:.16rem; }
.chat-conversation-copy > em { display:block; font-style:normal; }
.chat-attachment { border:0; padding:0; cursor:zoom-in; }
.chat-message-avatar { flex:0 0 auto; }

/* On very small phones the full message centre remains one tap away in the Menu;
   preserve Cart and Account space in the compact top bar. */
@media (max-width: 479.98px) {
  .topbar-professional .chat-button { display: none !important; }
}

/* Chat notifications lead directly into the secured conversation. */
.notification-card.is-linked {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.notification-card.is-linked:hover,
.notification-card.is-linked:focus-visible {
  border-color: rgba(15,131,24,.32);
  box-shadow: 0 10px 22px rgba(11, 74, 45, .09);
  transform: translateY(-1px);
}
.notification-card.is-unread { border-left: 4px solid var(--sc-green, #0f8318); }
.notification-card-arrow { align-self: center; color: var(--sc-green, #0f8318); }