/* ────────────────────────────────────────────────────────────────────────────
   ODIV Inbox v2 — POLISH OVERRIDE LAYER
   ────────────────────────────────────────────────────────────────────────────

   ARCHITECTURE (#193, post-mortem of the 2026-04-17 cascade-leak bugs):

     Two stylesheets ship with the v2 PWA:
       1. /inbox/css/inbox.css         ← BASE / LAYOUT LAYER (loaded first)
       2. /inbox/v2/css/inbox-v2.css   ← POLISH OVERRIDE LAYER (this file)

     v1 (inbox.css) provides the load-bearing structural rules:
       - .inbox-screen { position: fixed; inset: 0; overflow: hidden }
       - .inbox-chat-list { flex: 1; overflow-y: auto }
       - .inbox-thread-contact { display: flex; flex-direction: column }
       - … and ~100 other component selectors.

     v2 (this file) overlays brand colors, spacing tweaks, animations, and
     new components added after the v1 baseline froze.

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ⚠️  THE GOTCHA THAT BIT US MULTIPLE TIMES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   CSS cascade resolves PROPERTY-BY-PROPERTY at equal specificity. If v1
   declares `.inbox-thread-contact { display:flex; flex-direction:column }`
   and v2 redeclares the SAME selector with `{ display:flex; align-items:center }`
   without re-stating flex-direction — then `flex-direction:column` from v1
   STILL WINS for that property. Result: avatar stacks ABOVE the name
   instead of beside it (the 2026-04-17 header bug).

   Same trap for: position, overflow, flex, grid-template-*, height/width,
   any property where a missing v2 re-declaration silently inherits an
   unintended v1 value.

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📜 RULES FOR EDITING v2
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   1. Before you ADD a v2 rule for an existing class, GREP inbox.css to
      see what v1 already declares for it.

   2. If v1 declares ANY of these structural properties, RE-STATE them in
      your v2 rule (even if the values match) so a future edit can't
      accidentally drop them:
         display · position · flex · flex-direction · overflow{,-x,-y}
         grid-template-* · height · width · min/max-{height,width}

   3. Do NOT add `position: relative` or `position: absolute` to a class
      that v1 declares as `position: fixed` unless you've audited every
      child that depends on the fixed positioning context (we got bit
      with .inbox-screen on 2026-04-17).

   4. New components added in v2 (no v1 counterpart) are safe — declare
      whatever you need. The cascade trap only applies to overlapping
      selectors.

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📋 CURRENT KNOWN OVERLAP — 105 selectors are declared in BOTH files
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   The future #194 (Vite migration) will collapse v1 + v2 into one source
   tree where this trap can't exist. Until then: respect the rules above.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Phase D token system (v72) ─────────────────────────────────────────
     Three-tier surface model + brand accent + motion + z-index. Existing
     v2-* names preserved so older selectors don't break; new names layered
     on top. Brand color stays #25D366 (ODIV canonical green). */

  /* Surfaces — three elevation tiers */
  --v2-bg-base:        #0a0c12;   /* tier 0 — deepest, page background */
  --v2-bg-elevated:    #131722;   /* tier 1 — composer, sheets, cards on bg */
  --v2-bg-card:        #1a1f2e;   /* tier 2 — bubbles, chips, raised content */
  --v2-bg-hover:       #232a3d;   /* tier 3 — hover state for tier-2 surfaces */
  --v2-bg-overlay:     rgba(0, 0, 0, 0.55); /* modal backdrop */

  /* Borders */
  --v2-border:         rgba(255, 255, 255, 0.06);
  --v2-border-strong:  rgba(255, 255, 255, 0.10);
  --v2-border-accent:  rgba(37, 211, 102, 0.45); /* brand-tinted ring */

  /* Text — three contrast tiers */
  --v2-text:           #f1f4f9;   /* primary — names, message body */
  --v2-text-secondary: #a4adc1;   /* secondary — labels, previews */
  --v2-text-muted:     #6c7689;   /* tertiary — timestamps, metadata */

  /* Brand accent */
  --v2-accent:         #25D366;
  --v2-accent-hover:   #2ee574;
  --v2-accent-soft:    rgba(37, 211, 102, 0.12);
  --v2-accent-glow:    0 0 0 4px rgba(37, 211, 102, 0.18);

  /* Status colors */
  --v2-blue:           #60a5fa;
  --v2-amber:          #f59e0b;
  --v2-red:            #ef4444;

  /* Radius scale */
  --v2-radius-xs:      4px;       /* tiny chips */
  --v2-radius-sm:      6px;       /* small inputs */
  --v2-radius-md:      10px;      /* buttons, cards inline */
  --v2-radius-lg:      14px;      /* cards, sheets */
  --v2-radius-xl:      20px;      /* sheet tops */
  --v2-radius-pill:    999px;     /* pill inputs, badges */

  /* Shadows — softened, less inky */
  --v2-shadow-sm:      0 1px 2px rgba(0,0,0,0.18);
  --v2-shadow-md:      0 4px 12px rgba(0,0,0,0.22);
  --v2-shadow-lg:      0 8px 24px rgba(0,0,0,0.32);
  --v2-shadow-glow:    0 0 0 1px var(--v2-border-strong), 0 8px 24px rgba(0,0,0,0.4);

  /* Spacing scale (8pt grid with 4pt half-step) */
  --v2-space-1:        4px;
  --v2-space-2:        8px;
  --v2-space-3:        12px;
  --v2-space-4:        16px;
  --v2-space-5:        20px;
  --v2-space-6:        24px;
  --v2-space-7:        32px;
  --v2-space-8:        40px;

  /* Motion durations + easings — single source of truth */
  --v2-motion-fast:    120ms;
  --v2-motion-base:    180ms;
  --v2-motion-slow:    260ms;
  --v2-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --v2-ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --v2-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index scale — keeps overlay stacking sane */
  --v2-z-base:         1;
  --v2-z-sticky:       10;     /* header, composer */
  --v2-z-overlay:      100;    /* sheet backdrop */
  --v2-z-sheet:        101;    /* sheet content */
  --v2-z-panel:        102;    /* contact panel slide-over */
  --v2-z-popup:        200;    /* reaction shelf, dropdowns */
}

body.dark-theme {
  background: var(--v2-bg-base);
  color: var(--v2-text);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-tap-highlight-color: transparent;
}

/* ── Screen transitions ─────────────────────────────────────────────────── */

.inbox-screen {
  background: var(--v2-bg-base);
  animation: v2-screen-fade 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  /* DO NOT add position:relative here. The base /inbox/css/inbox.css
     defines `.inbox-screen { position: fixed; inset: 0; overflow:hidden }`
     so flex:1+overflow:auto children (chat-list, contact panel content,
     thread messages, notes timeline) can scroll inside the viewport.
     Overriding it to `relative` collapses the height and iOS Safari
     scrolls the body instead — which is how scroll silently broke on
     2026-04-17 inside Notes / Profile / Thread.
     `position: fixed` is itself a positioning context, so the pull-to-
     refresh indicator's `position: absolute` already anchors correctly
     without any override. */
}

@keyframes v2-screen-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.inbox-header {
  background: rgba(10, 12, 18, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--v2-border);
  /* Tight against the Dynamic Island / notch. 2px above the safe-top
     puts the avatar + name as close to the status bar as we can go
     without colliding into the Dynamic Island bezel — matches the
     WhatsApp/Telegram header on iPhone. The bottom 10px is comfortable
     hit-target padding for the action icon row. */
  padding: calc(2px + var(--safe-top)) 6px 10px;
  gap: 2px;
}

/* Inside the thread screen, give the action-icon group a touch more
   breathing room so they don't jam against the contact name on narrow
   viewports. The selector is scoped via the thread-contact sibling so
   non-thread headers (chat list, settings) keep the existing tighter
   spacing. */
.inbox-header .inbox-thread-contact ~ .inbox-header-icon-btn {
  margin-left: 0;
}

.inbox-header-title {
  font-family: var(--font-display, Outfit, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--v2-text);
}

.inbox-header-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--v2-radius-md);
  color: var(--v2-text-secondary);
  /* Subtle idle background (#194 polish) — gives the icons enough visual
     weight to read as separate touch targets without dominating the
     header. The hover state is one shade brighter, and active stays
     scale-only. */
  background: rgba(255, 255, 255, 0.025);
  transition: all var(--v2-motion-fast) var(--v2-ease-out);
}

.inbox-header-icon-btn:hover {
  background: var(--v2-bg-hover);
  color: var(--v2-text);
}

.inbox-header-icon-btn:active {
  transform: scale(0.94);
}

/* Back button is the lone left-side icon — keep it ungrouped (transparent
   idle) so it doesn't compete visually with the contact identity. The
   action group on the right side of the thread header keeps the subtle
   chip background. */
.inbox-header > .inbox-header-icon-btn:first-child {
  background: transparent;
}

.inbox-header-logo {
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.2);
}

/* ── Thread contact identity (#194) ────────────────────────────────────────
   Tappable cluster: avatar + stacked (name, sub-line). Replaces the legacy
   inline-spans-only layout where name + phone collapsed onto one line and
   long names overflowed into the action buttons. */

.inbox-thread-contact {
  display: flex;
  /* CRITICAL: the base /inbox/css/inbox.css declares this same class with
     `flex-direction: column`. Without an explicit row override here, that
     property persists per-cascade-property and the avatar stacks ABOVE
     the name instead of sitting beside it (regression observed
     2026-04-17 — the screenshot showed the avatar floating top-center).
     Same specificity, so the load-order alone isn't enough. */
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;          /* required for child ellipsis to work inside flex */
  padding: 4px 6px;
  background: transparent;
  border: none;
  border-radius: var(--v2-radius-md);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--v2-motion-fast) var(--v2-ease-out);
}
.inbox-thread-contact:hover  { background: rgba(255, 255, 255, 0.04); }
.inbox-thread-contact:active { transform: scale(0.99); }

.inbox-thread-avatar {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--v2-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Channel-color tint applied inline via JS (background + color override) */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.inbox-thread-avatar-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--v2-accent, #25D366);
  border: 2.5px solid var(--v2-bg-base, #0a0c12);
  box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.35);
}

.inbox-thread-contact-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.inbox-thread-contact-name {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--v2-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-thread-contact-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--v2-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.inbox-thread-contact-phone {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.inbox-thread-sub-sep {
  flex-shrink: 0;
  opacity: 0.5;
  font-weight: 700;
  user-select: none;
}

/* ── Inline session countdown (#194 — sub-line variant of #162) ──────────── */

.inbox-session-countdown {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--v2-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
  line-height: 1;
}
.inbox-session-countdown svg { opacity: 0.85; }

.inbox-session-countdown-urgent {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
}

.inbox-session-countdown-closed {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
}

.inbox-countdown-digits { display: inline-flex; align-items: baseline; }

/* ── Login screen ───────────────────────────────────────────────────────── */

.inbox-login-wrap {
  padding: 2rem 1.5rem;
  gap: 2rem;
}

.inbox-login-brand img {
  border-radius: 18px;
  box-shadow: 0 0 40px rgba(37, 211, 102, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.25rem;
}

.inbox-login-title {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.inbox-login-sub {
  font-size: 0.92rem;
  color: var(--v2-text-secondary);
}

.inbox-auth-card {
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--v2-shadow-md);
  gap: 1rem;
}

.inbox-input {
  background: var(--v2-bg-elevated);
  border: 1.5px solid var(--v2-border);
  border-radius: var(--v2-radius-md);
  padding: 0.78rem 1rem;
  font-size: 0.95rem;
  transition: all var(--v2-motion-fast) var(--v2-ease-out);
}

.inbox-input:focus {
  border-color: var(--v2-accent);
  box-shadow: var(--v2-accent-glow);
  background: var(--v2-bg-card);
}

.inbox-otp-box {
  width: 46px;
  height: 56px;
  border: 1.5px solid var(--v2-border);
  background: var(--v2-bg-elevated);
  border-radius: var(--v2-radius-md);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  transition: all 0.15s ease;
}

.inbox-otp-box:focus {
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.15);
  background: var(--v2-bg-card);
  transform: translateY(-1px);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.inbox-btn {
  border-radius: var(--v2-radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  padding: 0.85rem 1.25rem;
  transition: all 0.15s ease;
}

.inbox-btn-primary {
  background: linear-gradient(135deg, #25D366 0%, #1eb858 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}

.inbox-btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
  transform: translateY(-1px);
}

.inbox-btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.inbox-btn-primary:disabled {
  opacity: 0.5;
  box-shadow: none;
}

.inbox-btn-link {
  color: var(--v2-accent);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  transition: opacity 0.15s ease;
}

.inbox-btn-link:hover { opacity: 0.7; }

/* ── Filter pills ───────────────────────────────────────────────────────── */

.inbox-filter-pills {
  padding: 10px 14px;
  gap: 6px;
  background: var(--v2-bg-base);
  border-bottom: 1px solid var(--v2-border);
}

.inbox-pill {
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  color: var(--v2-text-secondary);
  padding: 5px 12px;
  border-radius: var(--v2-radius-pill);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--v2-motion-base) var(--v2-ease-out);
}

.inbox-pill:hover {
  background: var(--v2-bg-hover);
  color: var(--v2-text);
  border-color: var(--v2-border-strong);
}

/* Phase D: active state uses the soft accent variant (not solid green)
   so the rail doesn't over-shout. Brand color reserved for the actual
   send action. */
.inbox-pill-active {
  background: var(--v2-accent-soft);
  border-color: var(--v2-border-accent);
  color: var(--v2-accent);
}

.inbox-pill-active:hover {
  background: var(--v2-accent-soft);
  color: var(--v2-accent);
}

/* ── Chat list ──────────────────────────────────────────────────────────── */

.inbox-chat-list {
  background: var(--v2-bg-base);
}

.inbox-chat-row {
  padding: 12px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--v2-border);
  cursor: pointer;
  position: relative;
  transition: background var(--v2-motion-fast) var(--v2-ease-out);
}

/* Phase D: subtle inset accent line on the left edge as a hover affordance.
   Width animates from 0 → 3px so it feels like a focus state, not a static
   stripe. Brand-color tinted. */
.inbox-chat-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--v2-accent);
  transition: width var(--v2-motion-base) var(--v2-ease-out);
  pointer-events: none;
}

.inbox-chat-row:hover {
  background: var(--v2-bg-hover);
}

.inbox-chat-row:hover::before {
  width: 3px;
}

.inbox-chat-row:active {
  background: var(--v2-bg-card);
}

.inbox-chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* Phase D: flat brand color, no gradient. Subtle inner ring for depth. */
  background: var(--v2-accent);
  color: #0a0c12;
  font-weight: 700;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.inbox-chat-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.inbox-chat-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inbox-chat-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inbox-chat-name {
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--v2-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}

.inbox-chat-time {
  font-size: 0.73rem;
  color: var(--v2-text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.inbox-chat-preview {
  font-size: 0.85rem;
  color: var(--v2-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.inbox-chat-badges {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.inbox-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inbox-badge-unread {
  background: var(--v2-accent);
  color: #0a0c12;
  min-width: 20px;
  text-align: center;
  border-radius: var(--v2-radius-pill);
  /* Phase D: tabular nums so 9 vs 99 don't shift width and break alignment */
  font-variant-numeric: tabular-nums;
  /* Soft glow for unread state — draws the eye without screaming */
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.14);
}

.inbox-badge-unassigned {
  background: rgba(245, 158, 11, 0.15);
  color: var(--v2-amber);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.inbox-badge-bot {
  background: rgba(96, 165, 250, 0.12);
  color: var(--v2-blue);
  border: 1px solid rgba(96, 165, 250, 0.2);
}

/* ── Empty / loading / error states ─────────────────────────────────────── */

.inbox-loading-state,
.inbox-empty-state {
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  color: var(--v2-text-muted);
  font-size: 0.88rem;
}

.inbox-empty-state svg {
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.inbox-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid rgba(37, 211, 102, 0.15);
  border-top-color: var(--v2-accent);
  border-radius: 50%;
  animation: v2-spin 0.7s cubic-bezier(0.5, 0.1, 0.5, 1) infinite;
}

@keyframes v2-spin { to { transform: rotate(360deg); } }

/* ── Messages container + bubbles ───────────────────────────────────────── */

.inbox-messages-container {
  background:
    linear-gradient(180deg, rgba(10,12,18,0.4) 0%, transparent 60px),
    var(--v2-bg-base);
  padding: 12px 12px calc(12px + var(--inbox-composer-h));
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inbox-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  margin-bottom: 1px;
  animation: v2-bubble-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes v2-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.inbox-bubble-wrap-out {
  align-self: flex-end;
  align-items: flex-end;
  margin-left: 20%;
}

.inbox-bubble-wrap-in {
  align-self: flex-start;
  align-items: flex-start;
  margin-right: 20%;
}

.inbox-bubble {
  /* Phase D: tighter padding, smaller radius, no shadow (cleaner against
     the messages background) — relies on color + border for separation */
  padding: 8px 12px 7px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.42;
  word-wrap: break-word;
  position: relative;
  letter-spacing: -0.003em;
  transition: transform var(--v2-motion-fast) var(--v2-ease-out);
}

.inbox-bubble-out {
  /* Phase D: flat brand color — no gradient. Subtle inner highlight via
     inset shadow for depth without looking 2018. */
  background: var(--v2-accent);
  color: #0a1f0e;
  font-weight: 500;
  border-radius: 14px 14px 4px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.inbox-bubble-in {
  background: var(--v2-bg-card);
  color: var(--v2-text);
  border: 1px solid var(--v2-border);
  border-radius: 14px 14px 14px 4px;
}

/* ── Template bubble — distinct "letterhead card" treatment ─────────────
   Template-type bubbles carry brand-coherent visual weight so they read
   as marketing-grade content, not regular chatter. Subtle diagonal
   gradient + brand-green left rail + slightly stronger border. The
   inner template chrome (eyebrow chip, params, button strip) carries
   its own typography hierarchy from the inline styles. */

.inbox-bubble-template {
  position: relative;
  background-image: linear-gradient(135deg, rgba(37, 211, 102, 0.07), transparent 60%);
  border-left: 3px solid var(--v2-accent, #25D366);
  padding-left: 11px;
}

/* Outbound template — already on a green bubble, so the rail is white
   and the gradient is white-to-transparent to keep it readable. */
.inbox-bubble-out.inbox-bubble-template {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 60%), var(--v2-accent);
  border-left-color: rgba(255, 255, 255, 0.8);
}

/* ── Bubble grouping (consecutive same-sender messages) ─────────────────── */

.inbox-bubble-out.inbox-bubble-grouped-top    { border-top-right-radius: 5px; }
.inbox-bubble-out.inbox-bubble-grouped-bottom { border-bottom-right-radius: 5px; }
.inbox-bubble-in.inbox-bubble-grouped-top     { border-top-left-radius: 5px; }
.inbox-bubble-in.inbox-bubble-grouped-bottom  { border-bottom-left-radius: 5px; }

/* Tighten spacing within a group */
.inbox-bubble-wrap-out:has(+ .inbox-bubble-wrap-out) { margin-bottom: 1px; }
.inbox-bubble-wrap-in:has(+ .inbox-bubble-wrap-in)   { margin-bottom: 1px; }
.inbox-bubble-wrap-out + .inbox-bubble-wrap-in,
.inbox-bubble-wrap-in + .inbox-bubble-wrap-out { margin-top: 8px; }

.inbox-bubble-meta {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--v2-text-muted);
  margin-top: 2px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.inbox-bubble-wrap-out .inbox-bubble-meta {
  justify-content: flex-end;
}

.inbox-tick {
  font-size: 0.78rem;
  display: inline-block;
}

.inbox-tick-sent      { color: var(--v2-text-muted); }
.inbox-tick-delivered { color: var(--v2-text-muted); }
.inbox-tick-read      { color: var(--v2-accent); }
.inbox-tick-failed    { color: var(--v2-red); }

/* ── Reply quote inside a bubble ──────────────────────────────────────────
   Phase D: rebuilt for proper text contrast in BOTH bubble directions.
   The MessageBubble JSX sets only the dynamic accent color inline; all
   structural + text-color styles live here so the per-direction overrides
   below can win without !important.

   Inbound parent  → quote bg = light-on-dark overlay, text = secondary text
   Outbound parent → quote bg = dark-on-bright overlay, text = white-ish */

.inbox-bubble-quote {
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--v2-accent);
  padding: 6px 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Hard-cap width so long quoted bodies don't blow out the bubble. */
  max-width: 100%;
}

.inbox-bubble-quote-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* color is set inline (driven by quoteAccent in JSX) so we don't override */
}

.inbox-bubble-quote-text {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--v2-text);
  /* Two-line clamp with ellipsis. white-space pre-wrap so long quoted
     body text wraps naturally instead of overflowing horizontally. */
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Outbound bubble — bright brand-green parent. Quote needs a DARK overlay
   so it stands apart, with WHITE-ish text for readability against both
   the overlay and the green underneath. */
.inbox-bubble-out .inbox-bubble-quote {
  background: rgba(0, 0, 0, 0.18);
}

.inbox-bubble-out .inbox-bubble-quote-text {
  color: rgba(255, 255, 255, 0.94);
}

/* Inbound bubble — dark surface parent. Quote uses a slightly-lighter
   overlay + secondary text color so it reads as "context, not body". */
.inbox-bubble-in .inbox-bubble-quote {
  background: rgba(255, 255, 255, 0.05);
}

.inbox-bubble-in .inbox-bubble-quote-text {
  color: var(--v2-text-secondary);
}

/* #161 — jumpable reply quote. Only set when replyToPreview.found is
   true (target bubble exists in the loaded thread window). Gives the
   quote a hover affordance so the agent knows it's clickable. */
.inbox-bubble-quote-jumpable {
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
.inbox-bubble-quote-jumpable:hover {
  background: rgba(255, 255, 255, 0.09);
}
.inbox-bubble-out .inbox-bubble-quote-jumpable:hover {
  background: rgba(0, 0, 0, 0.26);
}
.inbox-bubble-quote-jumpable:active {
  transform: scale(0.985);
}

/* #161 — smooth-scroll target highlight pulse. Played as a one-shot
   CSS animation when the agent taps a reply quote; Thread.js adds the
   class, waits ~1.6s, then strips it. The animation ramps up a soft
   brand-green glow + subtle background brighten, then fades out. Not
   a harsh flash — readable at a glance but never distracting. Honors
   prefers-reduced-motion by collapsing to a static background nudge. */
@keyframes inbox-bubble-jump-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
  18%  { box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.28); }
  55%  { box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.inbox-bubble-jump-flash .inbox-bubble {
  animation: inbox-bubble-jump-pulse 1.4s ease-in-out 1;
  border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .inbox-bubble-jump-flash .inbox-bubble {
    animation: none;
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.35);
    transition: box-shadow 400ms ease-out;
  }
}

/* #162 — Session countdown blinking colon. Hard-toggle at 1s cadence
   with steps(2) so it feels like a digital clock rather than a soft
   pulse. Honors prefers-reduced-motion by holding at full opacity.
   The span wraps just the ":" character inside the HH:MM:SS display. */
@keyframes inbox-countdown-colon-blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0.35; }
}
.inbox-countdown-colon {
  display: inline-block;
  padding: 0 1px;
  animation: inbox-countdown-colon-blink 1s steps(2) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .inbox-countdown-colon { animation: none; }
}

/* ── System divider (assignment, mark done, close) ──────────────────────── */

.inbox-system-divider {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--v2-text-muted);
  margin: 12px 0;
  padding: 0 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.inbox-system-divider::before,
.inbox-system-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--v2-border-strong);
  min-width: 30px;
}

.inbox-divider-assign { color: var(--v2-blue); }
.inbox-divider-assign::before, .inbox-divider-assign::after { background: rgba(96,165,250,0.25); }

.inbox-divider-done { color: var(--v2-accent); }
.inbox-divider-done::before, .inbox-divider-done::after { background: rgba(37,211,102,0.25); }

.inbox-divider-close { color: var(--v2-text-muted); }
.inbox-divider-close::before, .inbox-divider-close::after { background: var(--v2-border-strong); }

/* ── Composer ───────────────────────────────────────────────────────────── */

.inbox-composer-bar {
  background: rgba(10, 12, 18, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--v2-border);
  /* Compact vertical stack: no extra padding above the iOS home-indicator
     safe-area when the keyboard is closed (the input already has finger-
     comfort padding internally). 6px is the floor for devices without a
     home indicator. */
  padding: 6px 12px max(6px, var(--safe-bottom));
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

/* When the on-screen keyboard is up, iOS sometimes still reports the
   closed-state safe-area-inset-bottom (~34px), leaving a stale gap
   above the iOS form accessory bar (^ v Done). With .kbd-open set
   by services/keyboard-aware.js whenever visualViewport detects a
   keyboard, collapse the composer's bottom padding to the bare
   minimum — the keyboard itself provides physical separation, no
   home-indicator clearance needed. */
.kbd-open .inbox-composer-bar {
  padding-bottom: 4px;
}

.inbox-composer-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--v2-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.inbox-composer-icon-btn:hover:not(:disabled) {
  background: var(--v2-bg-hover);
  color: var(--v2-text);
}

.inbox-composer-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.inbox-composer-input {
  flex: 1;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  /* Brand-radius capped at 20px (--v2-radius-xl). With single-line
     height ≈ 44px the corners are ~90% of half-height so the field
     reads as a pill when empty. As the textarea grows on multi-line
     input the radius stays at 20px instead of tracking half the
     height — that's what was producing the stretched-oval shape on
     long messages (previously border-radius: 999px). */
  border-radius: var(--v2-radius-xl);
  color: var(--v2-text);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 11px 18px;
  outline: none;
  resize: none;
  max-height: 120px;
  line-height: 1.4;
  transition:
    border-color var(--v2-motion-fast) var(--v2-ease-out),
    box-shadow   var(--v2-motion-fast) var(--v2-ease-out),
    background   var(--v2-motion-fast) var(--v2-ease-out);
}

.inbox-composer-input:focus {
  border-color: var(--v2-accent);
  background: var(--v2-bg-elevated);
  box-shadow: var(--v2-accent-glow);
}

.inbox-composer-input::placeholder {
  color: var(--v2-text-muted);
}

.inbox-composer-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  /* Phase D: flat brand color, no gradient. Inner highlight + glow */
  background: var(--v2-accent);
  color: #0a1f0e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 14px rgba(37, 211, 102, 0.32);
  transition: all var(--v2-motion-fast) var(--v2-ease-out);
}

.inbox-composer-send-btn:hover:not(:disabled) {
  background: var(--v2-accent-hover);
  transform: scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 20px rgba(37, 211, 102, 0.45);
}

.inbox-composer-send-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.inbox-composer-send-btn:disabled {
  opacity: 0.4;
  background: var(--v2-bg-hover);
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Reply context bar ──────────────────────────────────────────────────── */

.inbox-reply-bar {
  background: var(--v2-bg-elevated);
  border-top: 1px solid var(--v2-border);
  border-left: 3px solid var(--v2-accent);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inbox-reply-preview {
  flex: 1;
  font-size: 0.82rem;
  color: var(--v2-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-reply-cancel {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--v2-text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.inbox-reply-cancel:hover {
  background: var(--v2-bg-hover);
  color: var(--v2-text);
}

/* ── Emoji shelf ────────────────────────────────────────────────────────── */

.inbox-emoji-shelf {
  background: var(--v2-bg-elevated);
  border-top: 1px solid var(--v2-border);
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.inbox-emoji-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.12s ease;
}

.inbox-emoji-btn:hover {
  background: var(--v2-bg-hover);
  transform: scale(1.15);
}

/* ── Bottom sheets ──────────────────────────────────────────────────────── */

.inbox-sheet-overlay {
  position: fixed;
  inset: 0;
  background: var(--v2-bg-overlay);
  /* Phase D: backdrop blur so the underlying content fades into the modal
     rather than getting blacked out — feels more native */
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  z-index: var(--v2-z-overlay);
  animation: v2-fade-in var(--v2-motion-base) var(--v2-ease-out);
}

@keyframes v2-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.inbox-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--v2-bg-elevated);
  border-top-left-radius: var(--v2-radius-xl);
  border-top-right-radius: var(--v2-radius-xl);
  padding-bottom: var(--safe-bottom);
  z-index: var(--v2-z-sheet);
  max-height: 80vh;
  overflow-y: auto;
  /* Phase D: thinner top border for visual edge, softer shadow */
  border-top: 1px solid var(--v2-border-strong);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.36);
  animation: v2-sheet-up var(--v2-motion-slow) var(--v2-ease-spring);
}

@keyframes v2-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.inbox-sheet-handle {
  /* Phase D: thinner + slightly wider drag handle */
  width: 32px;
  height: 3px;
  background: var(--v2-border-strong);
  border-radius: 2px;
  margin: 12px auto 0;
}

.inbox-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 8px;
}

.inbox-sheet-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.inbox-sheet-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--v2-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.inbox-sheet-close:hover {
  background: var(--v2-bg-hover);
  color: var(--v2-text);
}

/* ── Attach sheet ───────────────────────────────────────────────────────── */

.inbox-attach-options {
  padding: 8px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inbox-attach-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  background: transparent;
  border: none;
  border-radius: var(--v2-radius-md);
  color: var(--v2-text);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  transition: background 0.12s ease;
}

.inbox-attach-opt:hover {
  background: var(--v2-bg-hover);
}

.inbox-attach-icon {
  font-size: 1.4rem;
  width: 36px;
  text-align: center;
}

/* ── Reaction shelf popup ───────────────────────────────────────────────── */

.inbox-reaction-shelf-popup {
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border-strong);
  border-radius: var(--v2-radius-pill);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 2px;
  /* Phase D: stronger shadow + brand-tinted ring for "lifted modal" feel */
  box-shadow: var(--v2-shadow-glow);
  z-index: var(--v2-z-popup);
  animation: v2-pop-in var(--v2-motion-base) var(--v2-ease-spring);
}

@keyframes v2-pop-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.inbox-react-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 1.35rem;
  cursor: pointer;
  transition: all var(--v2-motion-fast) var(--v2-ease-out);
}

.inbox-react-btn:hover {
  background: var(--v2-bg-hover);
  /* Phase D: brand-tinted glow on hover so each emoji feels selectable */
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.18);
  transform: scale(1.18);
}

.inbox-reaction-shelf-sep {
  width: 1px;
  height: 22px;
  background: var(--v2-border-strong);
  margin: 0 4px;
}

.inbox-react-reply {
  color: var(--v2-text-secondary);
  font-size: 1.15rem;
}

.inbox-react-reply:hover {
  color: var(--v2-accent);
}

.inbox-react-copy {
  color: var(--v2-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inbox-react-copy:hover {
  color: var(--v2-accent);
}

@keyframes inbox-spin {
  to { transform: rotate(360deg); }
}

.inbox-profile-update-btn:hover {
  background: rgba(37, 211, 102, 0.12) !important;
  border-color: rgba(37, 211, 102, 0.35) !important;
  color: var(--v2-accent, #25D366);
}

.inbox-profile-update-btn:disabled {
  cursor: progress;
  opacity: 0.7;
}

/* ── Profile screen ─────────────────────────────────────────────────────── */

.inbox-profile-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.inbox-profile-card {
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.inbox-profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366 0%, #1aaa55 100%);
  color: #0a1f0e;
  font-weight: 700;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow:
    0 0 0 3px var(--v2-bg-card),
    0 0 0 5px rgba(37, 211, 102, 0.3),
    0 8px 24px rgba(37, 211, 102, 0.25);
  letter-spacing: -0.02em;
}

.inbox-profile-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.15rem;
  letter-spacing: -0.01em;
}

.inbox-profile-email {
  color: var(--v2-text-secondary);
  font-size: 0.85rem;
  margin: 0 0 0.65rem;
}

.inbox-role-chip {
  display: inline-block;
  background: var(--v2-accent-soft);
  color: var(--v2-accent);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inbox-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.85rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--v2-red);
  border-radius: var(--v2-radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.inbox-logout-btn:hover {
  background: rgba(239, 68, 68, 0.15);
}

/* ── Contact panel ──────────────────────────────────────────────────────── */

.inbox-contact-panel {
  position: fixed;
  inset: 0;
  background: var(--v2-bg-base);
  z-index: var(--v2-z-panel);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--v2-motion-slow) var(--v2-ease-out);
}

.inbox-panel-open {
  transform: translateX(0);
}

.inbox-contact-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.inbox-contact-card {
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  padding: 1.25rem;
}

.inbox-contact-card:first-child { text-align: center; }

.inbox-contact-avatar-lg {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  /* Phase D: flat brand color, inner highlight ring */
  background: var(--v2-accent);
  color: #0a1f0e;
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 28px rgba(37, 211, 102, 0.32);
  letter-spacing: -0.02em;
}

.inbox-contact-name-lg {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}

.inbox-contact-phone-lg {
  color: var(--v2-text-secondary);
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
  font-variant-numeric: tabular-nums;
}

.inbox-contact-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v2-text-muted);
  margin: 0 0 0.85rem;
}

.inbox-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inbox-tag-chip {
  background: var(--v2-accent-soft);
  color: var(--v2-accent);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

.inbox-cf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--v2-border);
  font-size: 0.85rem;
}

.inbox-cf-row:last-child { border-bottom: none; }

.inbox-cf-label {
  color: var(--v2-text-muted);
  font-weight: 500;
}

.inbox-cf-value {
  color: var(--v2-text);
  font-weight: 500;
  text-align: right;
}

/* ── Toggle switch (iOS-style) ──────────────────────────────────────────── */

.inbox-toggle {
  position: relative;
  width: 46px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}

.inbox-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.inbox-toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  transition: background 0.2s ease;
}

.inbox-toggle input:checked + .inbox-toggle-track {
  background: var(--v2-accent);
}

.inbox-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.inbox-toggle input:checked ~ .inbox-toggle-thumb {
  transform: translateX(18px);
}

/* ── Copy chip (truncated ID + tap to copy) ────────────────────────────── */

.inbox-copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--v2-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.inbox-copy-chip:active {
  background: rgba(37, 211, 102, 0.12);
}

.inbox-copy-chip svg {
  flex-shrink: 0;
  color: var(--v2-text-muted);
}

/* ── Schedule popover ───────────────────────────────────────────────────── */

.inbox-schedule-popover {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  width: min(92vw, 320px);
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  padding: 14px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
  z-index: var(--v2-z-popover, 200);
  animation: schedPopIn 0.15s ease-out;
}

@keyframes schedPopIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* T2 — pulsing dot for the ghost bubble's "Sending…" state. The dot
   lives inside the green Queued ghost once send_at <= now, so the user
   sees the row is actively being handed to Meta (not stuck). Amplitude
   and timing copy WhatsApp's "typing…" dot for visual familiarity. */
@keyframes inbox-sched-dot-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
.inbox-sched-sending-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: middle;
  animation: inbox-sched-dot-pulse 1.1s ease-in-out infinite;
}

.inbox-schedule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inbox-schedule-chip {
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--v2-text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.inbox-schedule-chip:active {
  background: rgba(37, 211, 102, 0.2);
  border-color: rgba(37, 211, 102, 0.5);
}

/* ── Scheduled ghost bubbles ───────────────────────────────────────────── */

.inbox-scheduled-ghost {
  margin-left: auto;
  max-width: 82%;
  padding: 10px 14px;
  border: 1px dashed rgba(37, 211, 102, 0.35);
  border-radius: var(--v2-radius-md);
  background: rgba(37, 211, 102, 0.04);
  opacity: 0.75;
  margin-bottom: 8px;
}

.inbox-scheduled-ghost-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--v2-accent);
  margin-bottom: 6px;
}

.inbox-scheduled-ghost-body {
  font-size: 0.84rem;
  color: var(--v2-text-secondary);
  word-break: break-word;
  line-height: 1.4;
}

.inbox-scheduled-ghost-cancel {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--v2-red, #f87171);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.inbox-scheduled-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.76rem;
  color: var(--v2-text-muted);
  border-top: 1px solid var(--v2-border);
}

.inbox-scheduled-banner button {
  background: none;
  border: none;
  color: var(--v2-red, #f87171);
  font-weight: 600;
  font-size: 0.76rem;
  cursor: pointer;
  padding: 0;
}

/* ── Error message inline ───────────────────────────────────────────────── */

.inbox-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--v2-radius-md);
  color: var(--v2-red);
  font-size: 0.82rem;
  padding: 0.7rem 0.9rem;
  margin-top: 0.5rem;
}

/* ── Form helpers ───────────────────────────────────────────────────────── */

.inbox-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.inbox-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--v2-text-secondary);
  letter-spacing: 0.005em;
}

.inbox-form-hint {
  font-size: 0.75rem;
  color: var(--v2-text-muted);
}

.inbox-otp-sent-msg {
  text-align: center;
  color: var(--v2-text-secondary);
  font-size: 0.88rem;
  margin: 0 0 0.5rem;
}

.inbox-otp-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  margin-top: 0.5rem;
}

.inbox-otp-timer {
  color: var(--v2-text-muted);
  font-variant-numeric: tabular-nums;
}

.inbox-otp-boxes {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.25rem 0;
}

/* ── Search bar ─────────────────────────────────────────────────────────── */

.inbox-search-bar {
  padding: 10px 14px;
  background: var(--v2-bg-base);
  border-bottom: 1px solid var(--v2-border);
  display: flex;
  gap: 8px;
  align-items: center;
}

.inbox-search-input {
  flex: 1;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  color: var(--v2-text);
  font-size: 0.9rem;
  padding: 9px 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

.inbox-search-input:focus {
  border-color: var(--v2-accent);
}

/* ── Init screen ────────────────────────────────────────────────────────── */

.inbox-screen-init {
  background: var(--v2-bg-base);
}

.inbox-init-logo {
  border-radius: 22px;
  box-shadow: 0 0 60px rgba(37, 211, 102, 0.35), 0 8px 24px rgba(0,0,0,0.4);
  animation: v2-init-pulse 2s ease-in-out infinite;
}

@keyframes v2-init-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 60px rgba(37,211,102,0.35), 0 8px 24px rgba(0,0,0,0.4); }
  50%      { transform: scale(1.03); box-shadow: 0 0 80px rgba(37,211,102,0.5), 0 8px 24px rgba(0,0,0,0.4); }
}

/* ── Permission error screen (#165) ─────────────────────────────────────── */
/* Boot-time screen shown when /permissions-check reports that the current
   session's CRM role is missing required Live Chat permissions. Instead of
   a silent 403, agents see a friendly checklist with CRM breadcrumbs so
   they know exactly what to ask their admin to grant. */

.inbox-perm-error-screen {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--v2-bg-base);
  padding: 40px 20px 80px;
  overflow-y: auto;
  min-height: 100%;
}

.inbox-perm-error-card {
  width: 100%;
  max-width: 560px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--v2-border-strong);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.inbox-perm-error-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.inbox-perm-error-title {
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--v2-text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.inbox-perm-error-sub {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--v2-text-secondary);
  margin: 0 0 24px;
}

.inbox-perm-error-sub strong {
  color: var(--v2-text);
  font-weight: 600;
}

.inbox-perm-error-section {
  border-top: 1px solid var(--v2-border);
  padding-top: 18px;
  margin-top: 18px;
}

.inbox-perm-error-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--v2-text);
  margin: 0 0 10px;
}

.inbox-perm-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.inbox-perm-dot--required    { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
.inbox-perm-dot--hint        { background: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18); }
.inbox-perm-dot--recommended { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }

.inbox-perm-error-section-blurb {
  font-size: 0.82rem;
  color: var(--v2-text-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}

.inbox-perm-error-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inbox-perm-error-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  padding: 10px 12px;
}

.inbox-perm-error-list--compact .inbox-perm-error-item {
  padding: 8px 12px;
}

.inbox-perm-error-item-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--v2-text);
}

.inbox-perm-error-item-path {
  font-size: 0.75rem;
  color: var(--v2-accent);
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.inbox-perm-error-item-breaks {
  font-size: 0.78rem;
  color: var(--v2-text-muted);
  margin-top: 6px;
  line-height: 1.45;
}

.inbox-perm-error-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.inbox-perm-error-retry,
.inbox-perm-error-logout {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.inbox-perm-error-retry {
  background: var(--v2-accent);
  color: #0a1f0e;
}

.inbox-perm-error-retry:hover  { background: var(--v2-accent-hover); }
.inbox-perm-error-retry:active { transform: scale(0.98); }

.inbox-perm-error-logout {
  background: transparent;
  color: var(--v2-text-secondary);
  border-color: var(--v2-border-strong);
}

.inbox-perm-error-logout:hover {
  color: var(--v2-text);
  border-color: var(--v2-text-muted);
}

/* ── Quick replies (#170) — tiered Settings UI ──────────────────────────── */
/* Two sections: shared (account, lock-icon, blue-tinted) vs personal
   (agent, brand-green). Owner sees full edit on both + an account toggle. */

.inbox-qr-section { margin-bottom: 18px; }

.inbox-qr-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 8px;
  padding: 0 2px;
}

.inbox-qr-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #a4adc1);
}

.inbox-qr-section-count {
  font-size: 0.66rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #a4adc1);
  padding: 1px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.inbox-qr-explainer {
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #bfdbfe;
  margin-bottom: 14px;
}
.inbox-qr-explainer code {
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}

.inbox-qr-empty {
  text-align: center;
  padding: 18px 14px;
  color: var(--text-muted, #7d8799);
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  line-height: 1.45;
}

.inbox-qr-row {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: opacity 0.2s ease;
}
.inbox-qr-row.is-pending  { opacity: 0.65; }

/* Differentiation: shared rows carry a thin blue left edge, personal carry green. */
.inbox-qr-row.is-shared    { border-left: 3px solid rgba(96, 165, 250, 0.55); }
.inbox-qr-row.is-personal  { border-left: 3px solid rgba(37, 211, 102, 0.55); }

.inbox-qr-shortcut {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.inbox-qr-shortcut.is-shared {
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.45);
  color: #93c5fd;
}
.inbox-qr-shortcut.is-personal {
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25D366;
}

.inbox-qr-shared-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #93c5fd;
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 999px;
  padding: 1px 7px 1px 6px;
}

.inbox-qr-form {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}
.inbox-qr-form.is-shared    { border: 1px solid rgba(96, 165, 250, 0.45); }
.inbox-qr-form.is-personal  { border: 1px solid rgba(37, 211, 102, 0.35); }

.inbox-qr-form-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #7d8799);
  font-weight: 600;
  margin-bottom: 10px;
}

.inbox-qr-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 12px;
  background: rgba(37, 211, 102, 0.1);
  border: 1px dashed rgba(37, 211, 102, 0.4);
  border-radius: 8px;
  color: #25D366;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.inbox-qr-add-btn:hover {
  background: rgba(37, 211, 102, 0.18);
  border-color: rgba(37, 211, 102, 0.6);
  border-style: solid;
}

/* Owner settings block at the bottom of QuickReplies. */
.inbox-qr-owner-settings {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--v2-border, rgba(255, 255, 255, 0.06));
}

.inbox-qr-toggle-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
}

.inbox-qr-toggle {
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(108, 118, 137, 0.45);
  position: relative;
  transition: background 0.18s ease;
}
.inbox-qr-toggle.is-on {
  background: rgba(37, 211, 102, 0.85);
}

.inbox-qr-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s ease;
}
.inbox-qr-toggle.is-on .inbox-qr-toggle-knob {
  transform: translateX(16px);
}

/* ── Permission-degraded banner (#168) ──────────────────────────────────── */
/* Renders above the chat list when a background CRM call has 403'd.
   Amber-tinted, dismissible per session. Points the agent's primary admin
   at the dashboard's Team tab where the full permission checklist lives. */

.inbox-perm-degraded-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  margin: 8px 12px 4px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-left: 3px solid #f59e0b;
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--v2-text);
  line-height: 1.4;
}

.inbox-perm-degraded-icon {
  flex-shrink: 0;
  color: #f59e0b;
  margin-top: 1px;
}

.inbox-perm-degraded-body { flex: 1; min-width: 0; }

.inbox-perm-degraded-title {
  font-weight: 600;
  color: #fde68a;
  font-size: 0.82rem;
  margin-bottom: 2px;
}

.inbox-perm-degraded-sub {
  color: rgba(254, 243, 199, 0.78);
  font-size: 0.76rem;
}

.inbox-perm-degraded-cta {
  flex-shrink: 0;
  align-self: center;
  padding: 6px 11px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 7px;
  color: #fde68a;
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.inbox-perm-degraded-cta:hover {
  background: rgba(245, 158, 11, 0.28);
}

.inbox-perm-degraded-dismiss {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: rgba(254, 243, 199, 0.6);
  font-size: 1rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  align-self: center;
}
.inbox-perm-degraded-dismiss:hover {
  background: rgba(245, 158, 11, 0.15);
  color: #fde68a;
}

/* ── Internal lead notes (#167) ─────────────────────────────────────────── */
/* Bottom sheet matching .inbox-bottom-sheet conventions plus a scrollable
   timeline + a sticky compose box. Stays usable when the 24h window is
   closed — notes are internal, not customer-facing. */

.inbox-notes-sheet {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  min-height: 60vh;
  background: var(--v2-bg-elevated, #131722);
}

.inbox-notes-header { flex-shrink: 0; }

.inbox-notes-compose {
  flex-shrink: 0;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--v2-border);
  background: rgba(255, 255, 255, 0.015);
}

.inbox-notes-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--v2-border-strong);
  border-radius: 10px;
  color: var(--v2-text);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 10px 12px;
  resize: none;
  outline: none;
  transition: border-color 0.15s ease;
}
.inbox-notes-textarea:focus { border-color: var(--v2-accent); }

.inbox-notes-compose-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 8px;
}

.inbox-notes-counter {
  font-size: 0.72rem;
  color: var(--v2-text-muted);
  font-variant-numeric: tabular-nums;
}
.inbox-notes-counter.is-over { color: #f87171; font-weight: 600; }

.inbox-notes-save {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}

.inbox-notes-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inbox-notes-empty,
.inbox-notes-error {
  text-align: center;
  color: var(--v2-text-muted);
  font-size: 0.85rem;
  padding: 24px 16px;
  line-height: 1.5;
}
.inbox-notes-error {
  color: #f87171;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 8px;
}

.inbox-notes-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inbox-notes-day {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v2-text-muted);
  padding: 4px 0 2px;
}

.inbox-notes-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  transition: opacity 0.2s ease;
}
.inbox-notes-row.is-pending { opacity: 0.55; }

/* Subtle left-edge color per kind so the eye picks out system rows quickly. */
.inbox-notes-row-kind-transfer  { border-left: 3px solid #60a5fa; }
.inbox-notes-row-kind-assigned  { border-left: 3px solid #34d399; }
.inbox-notes-row-kind-done      { border-left: 3px solid #a3a3a3; }
.inbox-notes-row-kind-manual    { border-left: 3px solid var(--v2-accent); }

.inbox-notes-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.18);
  color: var(--v2-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.inbox-notes-body-col { flex: 1; min-width: 0; }

.inbox-notes-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--v2-text-muted);
}
.inbox-notes-author { color: var(--v2-text); font-weight: 600; font-size: 0.78rem; }
.inbox-notes-time   { font-variant-numeric: tabular-nums; }

.inbox-notes-del {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--v2-text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.inbox-notes-del:hover { background: rgba(239, 68, 68, 0.12); color: #f87171; }

.inbox-notes-kind {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--v2-text-secondary);
}
.inbox-notes-kind-transfer { background: rgba(96, 165, 250, 0.15);  color: #93c5fd; }
.inbox-notes-kind-assigned { background: rgba(52, 211, 153, 0.15);  color: #6ee7b7; }
.inbox-notes-kind-done     { background: rgba(163, 163, 163, 0.18); color: #d4d4d4; }

.inbox-notes-text {
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--v2-text);
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ── Transfer confirm modal (#167) ──────────────────────────────────────── */
/* Centered modal over the full screen. Used to be a one-tap action via the
   TeamMemberPicker; now picker → modal → confirm so the agent can attach
   an optional hand-off note. */

.inbox-transfer-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 13, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.inbox-transfer-modal-card {
  width: 100%;
  max-width: 440px;
  background: var(--v2-bg-elevated, #131722);
  border: 1px solid var(--v2-border-strong);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.inbox-transfer-modal-title {
  margin: 0 0 6px;
  font-size: 1.08rem;
  color: var(--v2-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.inbox-transfer-modal-sub {
  margin: 0 0 14px;
  font-size: 0.84rem;
  color: var(--v2-text-secondary);
  line-height: 1.4;
}
.inbox-transfer-modal-sub strong { color: var(--v2-text); font-weight: 600; }

.inbox-transfer-modal-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--v2-text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.inbox-transfer-modal-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--v2-border-strong);
  border-radius: 10px;
  color: var(--v2-text);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 10px 12px;
  resize: none;
  outline: none;
  transition: border-color 0.15s ease;
}
.inbox-transfer-modal-textarea:focus { border-color: var(--v2-accent); }

.inbox-transfer-modal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--v2-text-muted);
  margin-top: 6px;
}
.inbox-transfer-modal-counter { font-variant-numeric: tabular-nums; }
.inbox-transfer-modal-counter.is-over { color: #f87171; font-weight: 600; }
.inbox-transfer-modal-hint { font-style: italic; opacity: 0.85; }

.inbox-transfer-modal-error {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 0.8rem;
}

.inbox-transfer-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.inbox-transfer-modal-actions .inbox-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.inbox-transfer-modal-actions .inbox-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* .inbox-btn-primary is the project-wide green primary already defined at
   line ~248. We reuse it here as-is. The .inbox-btn-ghost below is new
   and only used by the transfer + notes flows. */
.inbox-btn-ghost {
  background: transparent;
  color: var(--v2-text-secondary);
  border-color: var(--v2-border-strong);
}
.inbox-btn-ghost:hover:not(:disabled) {
  color: var(--v2-text);
  border-color: var(--v2-text-muted);
}

/* ── Ephemeral handoff divider in Thread (#167) ─────────────────────────── */
/* Rendered inside the messages container, below the latest bubble. Fades in
   on transfer-with-note success; in-memory only so a refresh dismisses it.
   The persistent copy lives in the lead-notes timeline. */

.inbox-handoff-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 8px 6px;
  animation: handoff-fade-in 0.35s ease;
}

@keyframes handoff-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.inbox-handoff-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(96, 165, 250, 0.35), transparent);
}

.inbox-handoff-divider-card {
  position: relative;
  flex-shrink: 1;
  max-width: 80%;
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 10px;
  padding: 8px 28px 10px 12px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--v2-text);
}

.inbox-handoff-divider-meta {
  font-size: 0.7rem;
  color: #93c5fd;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.inbox-handoff-divider-meta strong { color: #dbeafe; }

.inbox-handoff-divider-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--v2-text-secondary);
  font-style: italic;
}

.inbox-handoff-divider-dismiss {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: none;
  color: var(--v2-text-muted);
  font-size: 0.95rem;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
}
.inbox-handoff-divider-dismiss:hover { background: rgba(255, 255, 255, 0.06); color: var(--v2-text); }

/* ── Campaign Echo Card ─────────────────────────────────────────────────
   Synthetic in-timeline card that surfaces the outbound marketing template
   that fired in response to a keyword broadcast reply. The template
   itself never lands in inbox_messages (Partner Panel campaign sends
   don't echo via event_type='outgoing'), so we render this placeholder
   directly after the customer's trigger bubble.

   Design notes — committed to a "transmission receipt" aesthetic:
   compact, brand-green accented, mono eyebrow + sentence-case name,
   diagonal soft gradient for atmosphere, brand-green ring around the
   send-arrow glyph, subtle shadow for elevation off the timeline.
   Should feel intentional — not a banner, not a bubble. */

.inbox-campaign-echo {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 320px;
  margin: 14px auto 8px;
  padding: 10px 14px 10px 11px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.085), rgba(37, 211, 102, 0.015) 75%);
  border: 1px solid rgba(37, 211, 102, 0.22);
  border-left: 3px solid var(--v2-accent, #25D366);
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  animation: campaign-echo-fade-in 0.4s var(--v2-ease-out, ease) both;
}

@keyframes campaign-echo-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.inbox-campaign-echo-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 211, 102, 0.18);
  color: var(--v2-accent, #25D366);
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.32);
}

.inbox-campaign-echo-body {
  flex: 1;
  min-width: 0;
  line-height: 1.32;
}

.inbox-campaign-echo-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v2-accent, #25D366);
  margin-bottom: 2px;
}

.inbox-campaign-echo-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--v2-text, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-campaign-echo-route {
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--v2-text-secondary, #a4adc1);
  font-weight: 500;
}

@media (max-width: 480px) {
  .inbox-campaign-echo { max-width: 86%; margin-left: 8%; margin-right: 8%; }
}

/* ── Mobile-specific tweaks ─────────────────────────────────────────────── */

@media (max-width: 480px) {
  .inbox-bubble-wrap { max-width: 84%; }
  .inbox-bubble-wrap-out { margin-left: 16%; }
  .inbox-bubble-wrap-in  { margin-right: 16%; }
  .inbox-chat-avatar { width: 42px; height: 42px; }
}

/* ── Scrollbar (desktop only) ───────────────────────────────────────────── */
/* Phase D: extended to ALL scrollable surfaces (was just chat list +
   messages). Bottom sheets, contact panel, profile, settings, quick-replies
   all benefit from a thin themed scrollbar instead of the OS default. */

@media (min-width: 768px) {
  .inbox-chat-list::-webkit-scrollbar,
  .inbox-messages-container::-webkit-scrollbar,
  .inbox-bottom-sheet::-webkit-scrollbar,
  .inbox-contact-panel-content::-webkit-scrollbar,
  .inbox-profile-content::-webkit-scrollbar,
  .inbox-emoji-shelf::-webkit-scrollbar {
    width: 6px;
  }
  .inbox-chat-list::-webkit-scrollbar-thumb,
  .inbox-messages-container::-webkit-scrollbar-thumb,
  .inbox-bottom-sheet::-webkit-scrollbar-thumb,
  .inbox-contact-panel-content::-webkit-scrollbar-thumb,
  .inbox-profile-content::-webkit-scrollbar-thumb,
  .inbox-emoji-shelf::-webkit-scrollbar-thumb {
    background: var(--v2-border-strong);
    border-radius: 3px;
  }
  .inbox-chat-list::-webkit-scrollbar-thumb:hover,
  .inbox-messages-container::-webkit-scrollbar-thumb:hover,
  .inbox-bottom-sheet::-webkit-scrollbar-thumb:hover,
  .inbox-contact-panel-content::-webkit-scrollbar-thumb:hover,
  .inbox-profile-content::-webkit-scrollbar-thumb:hover,
  .inbox-emoji-shelf::-webkit-scrollbar-thumb:hover {
    background: var(--v2-text-muted);
  }
}

/* ── Reduced motion (Phase D) ───────────────────────────────────────────── */
/* Honor user's OS-level reduced-motion preference. Removes all animations
   and transforms so dizziness-prone users get a static interface. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Focus-visible rings (Phase D) ──────────────────────────────────────── */
/* Single source of truth for keyboard focus rings. Only fires when the
   user is navigating via keyboard (focus-visible), not on click. Uses the
   brand glow token. */

.inbox-pill:focus-visible,
.inbox-header-icon-btn:focus-visible,
.inbox-composer-icon-btn:focus-visible,
.inbox-composer-send-btn:focus-visible,
.inbox-react-btn:focus-visible,
.inbox-attach-opt:focus-visible,
.inbox-btn:focus-visible,
.inbox-chat-row:focus-visible,
.inbox-sheet-close:focus-visible,
.inbox-reply-cancel:focus-visible {
  outline: none;
  box-shadow: var(--v2-accent-glow);
}

/* ── Pull-to-refresh indicator (#190 revised) ────────────────────────────── */
/* Pinned at the very top of the chat-list area; the list itself slides
   down underneath. Visible only while the user is actively pulling or a
   refresh is in flight. */

.inbox-ptr-indicator {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20, 22, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--v2-text-secondary, #a4adc1);
  font-size: 0.74rem;
  font-weight: 600;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@keyframes inbox-ptr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .inbox-ptr-indicator svg { animation: none !important; transition: none !important; }
}

/* ── Web Share Target picker banner (#193) ──────────────────────────────── */
/* Sticky at top of chat list when the agent landed via the OS share sheet.
   Brand-green tinted to differentiate from the amber permission/offline
   banners. Cancel button on the right discards the pending share. */

.inbox-share-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  margin: 8px 12px 4px;
  background: rgba(37, 211, 102, 0.10);
  border: 1px solid rgba(37, 211, 102, 0.32);
  border-left: 3px solid #25D366;
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--v2-text);
  line-height: 1.4;
}

.inbox-share-banner-icon {
  flex-shrink: 0;
  color: #25D366;
  margin-top: 1px;
}

.inbox-share-banner-body { flex: 1; min-width: 0; }

.inbox-share-banner-title {
  font-weight: 600;
  color: #86efac;
  font-size: 0.82rem;
  margin-bottom: 2px;
}

.inbox-share-banner-preview {
  color: rgba(220, 252, 231, 0.78);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-share-banner-cancel {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: rgba(220, 252, 231, 0.6);
  font-size: 1rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  align-self: center;
}
.inbox-share-banner-cancel:hover {
  background: rgba(37, 211, 102, 0.15);
  color: #86efac;
}

/* ── Offline banner (#189) ──────────────────────────────────────────────── */
/* Pinned at the top of the viewport above whatever screen is rendered.
   Slim, amber-tinted so it reads as "warning" without screaming. */

.inbox-offline-banner {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px max(6px, env(safe-area-inset-top, 0px));
  background: rgba(245, 158, 11, 0.16);
  border: none;
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
  color: #fde68a;
  font-size: 0.74rem;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  animation: inbox-offline-in 160ms ease-out;
  transition: background 0.15s ease;
}
.inbox-offline-banner:hover  { background: rgba(245, 158, 11, 0.22); }
.inbox-offline-banner:active { background: rgba(245, 158, 11, 0.28); }

@keyframes inbox-offline-in {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .inbox-offline-banner { animation: none; }
}

/* ── Toaster (#173) ──────────────────────────────────────────────────────── */
/* Bottom-center stack. Stays out of the way of the composer on the thread
   (composer is also bottom-pinned, but the toaster sits above it via z-index
   + safe-area padding). Tappable variant gets a brand-tinted left border so
   assignment alerts read "do something" vs. transient confirms. */

.inbox-toaster {
  position: fixed;
  left: 50%;
  bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
  width: min(92vw, 420px);
}

.inbox-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px 11px 14px;
  background: rgba(20, 22, 26, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid #6b7280;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  color: var(--v2-text);
  font-size: 0.82rem;
  line-height: 1.35;
  pointer-events: auto;
  animation: inbox-toast-in 180ms ease-out;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.inbox-toast-msg { flex: 1; min-width: 0; }

.inbox-toast-dismiss {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.05rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.inbox-toast-dismiss:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.inbox-toast-clickable {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.inbox-toast-clickable:hover {
  border-color: rgba(37, 211, 102, 0.45);
  transform: translateY(-1px);
}

.inbox-toast-assign {
  border-left-color: var(--brand-green, #25d366);
}
.inbox-toast-assign .inbox-toast-msg strong {
  color: var(--brand-green, #25d366);
  font-weight: 600;
}

.inbox-toast-error {
  border-left-color: #ef4444;
}

@keyframes inbox-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .inbox-toast { animation: none; }
  .inbox-toast-clickable:hover { transform: none; }
}