/* ==========================================================================
   Wesal V2 — Inbox (NG2 Conversation Core)
   Production styles for the native WhatsApp/Instagram inbox, on the approved
   «خيط وصال» direction (tokens.css). Channel colors are BADGE-level accents
   only — Instagram is contextual components, never a pink repaint.
   ========================================================================== */

/* The inbox fills the full-bleed page and never grows the document: each of
   the three panes scrolls inside itself (.ibx-rows / .ibx-msgs / .ibx-c360).
   `min-height/min-width: 0` on the grid and on every grid item is what allows
   them to shrink below their content — without it the default `auto` minimum
   pushes the height back out and the inner scrollbars go dead. */
.ibx { flex: 1; display: grid; grid-template-columns: 340px 1fr 320px; min-height: 0; min-width: 0; overflow: hidden; }
.ibx.pane-closed { grid-template-columns: 340px 1fr 0; }

/* ── Conversation list pane ── */
.ibx-list { border-inline-end: 1px solid var(--w-line); background: var(--w-surface); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.ibx-list-head { padding: 12px 14px 0; }
.ibx-list-head h1 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
.ibx-search { position: relative; margin: 10px 0 8px; }
.ibx-search .input { padding-inline-start: 32px; background: var(--w-surface-2); border-color: transparent; }
.ibx-search .s-ico { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); color: var(--w-ink-3); display: flex; }
.ibx-search .s-clear { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; min-height: 28px; min-width: 28px; }
.ibx-queues { display: flex; gap: 4px; padding: 0 0 8px; overflow-x: auto; scrollbar-width: none; }
.ibx-queues button { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--w-ink-2); background: var(--w-surface-2); white-space: nowrap; flex-shrink: 0; min-height: 28px; }
.ibx-queues button.active { background: var(--w-brand-navy); color: #fff; }
[data-theme="dark"] .ibx-queues button.active { background: var(--w-teal); color: #04252B; }
.ibx-rows { flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.ibx-row { display: flex; gap: 10px; padding: 11px 14px; width: 100%; text-align: start; border-bottom: 1px solid var(--w-line); position: relative; align-items: flex-start; }
.ibx-row:hover { background: var(--w-surface-2); }
.ibx-row.active { background: var(--w-teal-soft); }
.ibx-row.active::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: var(--w-thread-v); }
.ibx-row .r-body { flex: 1; min-width: 0; }
.ibx-row .r-top { display: flex; align-items: baseline; gap: 6px; }
.ibx-row .r-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibx-row .r-2nd { font-size: 11.5px; color: var(--w-ink-3); font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.ibx-row .r-time { margin-inline-start: auto; font-size: 11px; color: var(--w-ink-3); flex-shrink: 0; }
.ibx-row.unread .r-time { color: var(--w-teal-strong); font-weight: 700; }
[data-theme="dark"] .ibx-row.unread .r-time { color: var(--w-teal); }
.ibx-row .r-prev { font-size: 13px; color: var(--w-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; display: flex; align-items: center; gap: 4px; }
.ibx-row.unread .r-prev { color: var(--w-ink); font-weight: 600; }
.ibx-row .r-meta { display: flex; align-items: center; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.ibx-row .r-meta .chip { font-size: 11px; padding: 1.5px 8px; }
.ibx-unread-pill { margin-inline-start: auto; min-width: 19px; height: 19px; border-radius: 999px; background: var(--w-teal); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
[data-theme="dark"] .ibx-unread-pill { color: #04252B; }
.ibx-list-foot { padding: 8px 14px; text-align: center; font-size: 12px; color: var(--w-ink-3); }

/* ── Thread pane ── */
.ibx-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; background: var(--w-canvas); }
/* head and composer are flex siblings OUTSIDE the scroller, so they stay put
   while the transcript scrolls — no position:fixed, nothing overlapping the
   messages, and they never scroll away. */
.ibx-thread-head, .ibx-composer, .ibx-closed { flex-shrink: 0; }
.ibx-thread-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--w-surface); border-bottom: 1px solid var(--w-line); }
.ibx-thread-head .t-id { min-width: 0; flex: 1; }
.ibx-thread-head .t-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibx-thread-head .t-sub { font-size: 11.5px; color: var(--w-ink-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ibx-thread-head .t-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.ibx-window-sub { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.ibx-window-sub.open { color: var(--w-success); }
.ibx-window-sub.closed { color: var(--w-danger); }
.ibx-window-sub.unknown { color: var(--w-ink-3); }

.ibx-msgs { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 20px; display: flex; flex-direction: column; min-height: 0; scroll-behavior: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.ibx-day { align-self: center; font-size: 11px; font-weight: 600; color: var(--w-ink-3); background: var(--w-surface); border-radius: 999px; padding: 3px 12px; margin: 10px 0 6px; box-shadow: var(--e-raised); }
.ibx-msg { max-width: 66%; display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.ibx-msg .bubble { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.55; background: var(--w-surface); box-shadow: var(--e-raised); color: var(--w-ink); overflow-wrap: break-word; user-select: text; }
.ibx-msg.in { align-self: flex-start; }
.ibx-msg.in .bubble { border-start-start-radius: 4px; }
.ibx-msg.out { align-self: flex-end; align-items: flex-end; }
.ibx-msg.out .bubble { background: var(--w-teal-soft); border-start-end-radius: 4px; }
.ibx-msg.note { align-self: flex-end; align-items: flex-end; max-width: 72%; }
.ibx-msg.note .bubble { background: var(--w-warn-soft); color: var(--w-warn); border: 1px dashed var(--w-warn); }
.ibx-msg .m-meta { font-size: 10.5px; color: var(--w-ink-3); display: flex; gap: 5px; align-items: center; padding: 0 4px; }
.ibx-msg .m-meta .imp { font-style: italic; }
.ibx-older { align-self: center; margin-bottom: 10px; }
.ibx-cap-note { align-self: center; font-size: 11px; color: var(--w-ink-3); text-align: center; max-width: 420px; margin-bottom: 8px; }
.ibx-jump { position: absolute; bottom: 96px; inset-inline-end: 24px; z-index: 5; box-shadow: var(--e-float); }
.ibx-thread-wrap { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; overflow: hidden; }

/* media bubbles reuse the legacy renderer's classes — style them here */
.ibx-msg .media-bubble { display: block; max-width: 260px; }
.ibx-msg .media-bubble img { max-width: 100%; border-radius: 12px; display: block; }
.ibx-msg .media-bubble audio { width: 230px; display: block; }
.ibx-msg .media-caption { font-size: 12.5px; margin-top: 4px; }
.ibx-msg .media-doc-row, .ibx-msg .media-bubble a { color: var(--w-teal-strong); font-size: 13px; word-break: break-all; }

/* ── Composer ── */
.ibx-composer { background: var(--w-surface); border-top: 1px solid var(--w-line); padding: 10px 16px 12px; }
.ibx-composer .c-tabs { display: flex; gap: 4px; margin-bottom: 8px; align-items: center; }
.ibx-composer .c-tabs button { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--w-ink-2); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; min-height: 28px; }
.ibx-composer .c-tabs button.active { background: var(--w-teal-soft); color: var(--w-teal-strong); }
[data-theme="dark"] .ibx-composer .c-tabs button.active { color: var(--w-teal); }
.ibx-composer .c-tabs button.note-tab.active { background: var(--w-warn-soft); color: var(--w-warn); }
.ibx-composer.note-mode .c-input-row { background: var(--w-warn-soft); }
.ibx-composer .c-cap { margin-inline-start: auto; font-size: 11px; color: var(--w-ink-3); }
.c-input-row { display: flex; align-items: flex-end; gap: 8px; background: var(--w-surface-2); border-radius: 14px; padding: 8px 10px; }
.c-input-row textarea { flex: 1; border: none; background: transparent; resize: none; min-height: 22px; max-height: 120px; font-size: 14px; outline: none; padding: 2px 4px; color: var(--w-ink); font-family: inherit; }
.ibx-send { width: 38px; height: 38px; min-height: 38px; min-width: 38px; border-radius: 50%; background: var(--w-teal); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.ibx-send:disabled { background: var(--w-surface-3); color: var(--w-ink-3); cursor: not-allowed; }
.ibx-composer .c-hint { font-size: 11px; color: var(--w-ink-3); margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ibx-closed { background: var(--w-surface); border-top: 1px solid var(--w-line); padding: 14px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ibx-closed .cc-text { font-size: 13px; color: var(--w-ink-2); flex: 1; min-width: 220px; }

/* ── Customer 360 quick panel ── */
.ibx-c360 { border-inline-start: 1px solid var(--w-line); background: var(--w-surface); overflow-y: auto; min-height: 0; min-width: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.ibx-c360-head { padding: 18px 16px 14px; text-align: center; border-bottom: 1px solid var(--w-line); position: relative; }
.ibx-c360-head .c-name { font-weight: 700; font-size: 15px; margin-top: 8px; }
.ibx-c360-head .c-id { font-size: 12px; color: var(--w-ink-3); }
.ibx-c360-head .dup { margin-top: 8px; font-size: 11.5px; background: var(--w-warn-soft); color: var(--w-warn); border-radius: 8px; padding: 5px 10px; display: inline-flex; gap: 6px; align-items: center; text-align: start; }
.ibx-c360-close { position: absolute; top: 10px; inset-inline-end: 10px; }
.ibx-sec { border-bottom: 1px solid var(--w-line); }
.ibx-sec > button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-size: 13px; font-weight: 700; color: var(--w-ink-2); text-align: start; }
.ibx-sec > button .tw { margin-inline-start: auto; transition: transform var(--motion-fast); display: flex; }
.ibx-sec.open > button .tw { transform: rotate(-90deg); }
.ibx-sec .sec-body { display: none; padding: 0 16px 14px; }
.ibx-sec.open .sec-body { display: block; }
.ibx-kv { display: flex; gap: 8px; font-size: 13px; padding: 4px 0; align-items: baseline; }
.ibx-kv .k { color: var(--w-ink-3); min-width: 84px; flex-shrink: 0; }
.ibx-kv .v { color: var(--w-ink); font-weight: 500; overflow-wrap: anywhere; }
.ibx-sec .sec-cta { font-size: 12px; color: var(--w-teal); font-weight: 600; cursor: pointer; padding: 2px 0; text-decoration: none; display: inline-block; }

/* skeletons/empty reuse shell classes (.skel/.empty/.banner) */

/* ── Tablet: two panes + customer drawer ── */
@media (max-width: 1180px) {
  .ibx { grid-template-columns: 300px 1fr 0; }
  .ibx.c360-open-tablet { grid-template-columns: 300px 1fr 300px; }
}

/* ── Mobile: real push navigation list → thread → customer ── */
@media (max-width: 767px) {
  /* Push navigation: the three panes are absolutely stacked inside the same
     constrained box, so each keeps its OWN inner scroller and the page itself
     still never grows. `flex: 1` (not just height:100%) keeps it correct as a
     flex child of .page.full-bleed. */
  .ibx { display: block; position: relative; flex: 1; height: auto; min-height: 0; overflow: hidden; }
  .ibx-list, .ibx-thread, .ibx-c360 { position: absolute; inset: 0; width: 100%; border: none; }
  .ibx-thread, .ibx-c360 { transform: translateX(calc(var(--push-dir, -1) * 100%)); transition: transform var(--motion-panel); z-index: 5; }
  [dir="rtl"] .ibx { --push-dir: -1; }
  [dir="ltr"] .ibx { --push-dir: 1; }
  .ibx.m-thread .ibx-thread { transform: translateX(0); }
  .ibx.m-c360 .ibx-c360 { transform: translateX(0); z-index: 6; }
  .ibx-c360 { background: var(--w-surface); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .ibx-c360-head { position: sticky; top: 0; z-index: 3; background: var(--w-surface); padding-top: 12px; }
  .ibx-msg { max-width: 84%; }
  .ibx-msgs { padding: 14px 12px; }
  .ibx-thread-head { padding: 8px 10px; }
  .ibx-thread-head .t-actions .desktop-only { display: none !important; }
  .ibx-composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ibx-closed { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .ibx-row { padding: 13px 14px; }
  .ibx-queues button { min-height: 32px; }
  .ibx-jump { bottom: 120px; }
}

/* Convergence Slice 4 — scheduled messages, clear, note delete */
.ibx-note-del { background: none; border: 0; padding: 0; color: var(--w-ink-2); font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; }
.ibx-note-del:hover, .ibx-note-del:focus-visible { color: var(--w-danger, #b42318); }
.ibx-sched-form { display: grid; gap: 8px; margin-top: 10px; }
.ibx-sched-row { align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.ibx-sched-row .v { flex: 1 1 100%; }
.ibx-danger { color: var(--w-danger, #b42318); }