/* Conversation inbox: list + thread on desktop, one pane at a time on mobile. Tokens come from nilo-ui.css. */
.inbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
.inbox-list-pane, .inbox-thread-pane { min-width: 0; background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl, .875rem); }
.inbox-list-pane { display: flex; flex-direction: column; overflow: hidden; }
.inbox-thread-pane { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem; }
.inbox[data-thread="true"] .inbox-list-pane { display: none; }
.inbox[data-thread="false"] .inbox-thread-pane { display: none; }
@media (min-width: 1024px) {
  .inbox { grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr); height: calc(100dvh - 15rem); min-height: 34rem; }
  .inbox[data-thread] .inbox-list-pane, .inbox[data-thread] .inbox-thread-pane { display: flex; }
  .inbox-thread-pane { overflow-y: auto; padding: 1.5rem; }
  .inbox-back { display: none !important; }
}

/* Filters */
.inbox-filters { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--border); }
.inbox-segments { display: flex; gap: .25rem; padding: .25rem; border-radius: 9999px; background: var(--muted); }
.inbox-segment { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2.25rem; padding: 0 .5rem; border-radius: 9999px; color: var(--muted-foreground); font-size: .75rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.inbox-segment[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.inbox-segment:focus-visible, .inbox-row-link:focus-visible, .inbox-chip:focus-visible, .inbox-link:focus-visible, .inbox-back:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.inbox-count { min-width: 1.25rem; padding: 0 .3rem; border-radius: 9999px; background: var(--border); font-size: .6875rem; line-height: 1.25rem; text-align: center; }
.inbox-segment[aria-pressed="true"] .inbox-count { background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary); }
.inbox-filter-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.inbox-input { width: 100%; min-width: 0; height: 2.5rem; padding: 0 1rem; border: 1px solid var(--input); border-radius: 9999px; background: var(--card); color: var(--foreground); font-size: .875rem; }
.inbox-input:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }

/* List */
.inbox-list-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.inbox-list { margin: 0; padding: 0; list-style: none; }
.inbox-row { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: .875rem 1rem; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.inbox-row:hover { background: color-mix(in oklab, var(--muted) 70%, transparent); }
.inbox-row[data-selected="true"] { background: color-mix(in oklab, var(--primary) 8%, var(--card)); border-left-color: var(--primary); }
.inbox-row-link { display: flex; flex-direction: column; gap: .125rem; min-width: 0; color: inherit; text-decoration: none; }
.inbox-row-link::after { content: ""; position: absolute; inset: 0; }
.inbox-row-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.inbox-dot { flex: none; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--primary); }
.inbox-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 500; }
.inbox-row[data-review="true"] .inbox-row-name, .inbox-row[data-review="true"] .inbox-row-subject { font-weight: 700; }
.inbox-row-date { flex: none; color: var(--muted-foreground); font-size: .75rem; }
.inbox-row-company { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); font-size: .75rem; }
.inbox-row-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; }
.inbox-row-snippet { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.35; overflow-wrap: anywhere; }
.inbox-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; min-width: 0; }
/* The campaign chip stays clickable above the row's stretched link. */
.inbox-row-meta .inbox-chip { position: relative; z-index: 1; }
.inbox-chip { display: inline-flex; align-items: center; max-width: 100%; min-height: 1.5rem; padding: 0 .625rem; overflow: hidden; border-radius: 9999px; background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); font-size: .75rem; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.inbox-chip:hover { background: color-mix(in oklab, var(--primary) 18%, transparent); }
.inbox-flag { display: inline-flex; align-items: center; gap: .25rem; color: var(--muted-foreground); font-size: .75rem; }
.inbox-icon { flex: none; width: .875rem; height: .875rem; }
.inbox-status { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; white-space: nowrap; color: var(--status-neutral); background: color-mix(in oklab, var(--status-neutral) 12%, transparent); }
.inbox-status[data-variant="positive"] { color: var(--status-positive); background: color-mix(in oklab, var(--status-positive) 12%, transparent); }
.inbox-status[data-variant="attention"] { color: var(--status-attention); background: color-mix(in oklab, var(--status-attention) 14%, transparent); }
.inbox-status[data-variant="critical"] { color: var(--status-critical); background: color-mix(in oklab, var(--status-critical) 12%, transparent); }
.inbox-more { display: flex; justify-content: center; padding: .75rem; }
.inbox-note { padding: 1rem; color: var(--muted-foreground); font-size: .75rem; }
.inbox-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1.5rem; text-align: center; }
.inbox-thread-empty { margin: auto; }
.inbox-link { color: var(--primary); font-size: .875rem; font-weight: 600; text-decoration: none; }
.inbox-link:hover { text-decoration: underline; }

/* Thread */
.inbox-thread-head { display: flex; flex-direction: column; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
/* Pinned conversation bar: stays visible while scrolling long threads (pane scroll on desktop; page scroll on mobile, below the fixed app header). */
.inbox-thread-bar { position: sticky; top: 4.0625rem; z-index: 5; display: flex; flex-direction: column; gap: .625rem; margin: -1.25rem -1.25rem 0; padding: 1rem 1.25rem .875rem; background: var(--card); border-bottom: 1px solid var(--border); border-radius: var(--radius-xl, .875rem) var(--radius-xl, .875rem) 0 0; box-shadow: 0 6px 12px -10px rgb(0 0 0 / 25%); }
.inbox-back { display: inline-flex; align-items: center; gap: .25rem; align-self: flex-start; min-height: 2.75rem; color: var(--primary); font-size: .875rem; font-weight: 600; text-decoration: none; }
.inbox-thread-title { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.inbox-thread-who { min-width: 0; overflow-wrap: anywhere; }
.inbox-thread-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.inbox-thread-facts { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 0; font-size: .875rem; }
.inbox-thread-facts > div { display: flex; flex-direction: column; gap: .25rem; min-width: 0; overflow-wrap: anywhere; }
.inbox-thread-facts dt { color: var(--muted-foreground); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.inbox-thread-facts dd { margin: 0; }
.inbox-timeline { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.inbox-message { display: flex; flex-direction: column; gap: .5rem; max-width: 46rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-xl, .875rem); background: var(--card); overflow-wrap: anywhere; }
/* Who wrote what at a glance: Nilo on the right in a light primary tint, the contact on the left in neutral gray, each with a side accent. */
.inbox-message[data-direction="outbound"] { align-self: flex-end; width: min(88%, 46rem); background: color-mix(in oklab, var(--primary) 10%, var(--card)); border-color: color-mix(in oklab, var(--primary) 26%, var(--border)); border-right: 3px solid var(--primary); }
.inbox-message[data-direction="outbound"] .inbox-message-who { color: var(--primary); }
.inbox-message[data-direction="inbound"] { align-self: flex-start; width: min(88%, 46rem); background: color-mix(in oklab, var(--muted) 75%, var(--card)); border-color: color-mix(in oklab, var(--muted-foreground) 18%, var(--border)); border-left: 3px solid color-mix(in oklab, var(--muted-foreground) 45%, transparent); }
.inbox-message[data-direction="inbound"] .inbox-message-who { color: var(--foreground); }
.inbox-message[data-status="cancelled"], .inbox-message[data-status="blocked"] { background: var(--card); border-style: dashed; }
.inbox-message-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.inbox-message-who { color: var(--muted-foreground); font-size: .75rem; font-weight: 600; }
.inbox-message-subject { font-size: .875rem; font-weight: 600; }
.inbox-message-body { font-size: .875rem; line-height: 1.5; white-space: pre-wrap; }
.inbox-message-collapsed summary { color: var(--muted-foreground); font-size: .8125rem; cursor: pointer; }
.inbox-message-collapsed .inbox-message-body { margin-top: .5rem; color: var(--muted-foreground); }
.inbox-message-foot { color: var(--muted-foreground); font-size: .75rem; }
.inbox-message-foot:empty { display: none; }
.inbox-attachments { display: flex; flex-direction: column; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.inbox-attachments ul { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.inbox-attachments li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; font-size: .875rem; }
.inbox-attachment-name { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.inbox-composer { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; padding: 1rem; border: 1px dashed var(--input); border-radius: var(--radius-xl, .875rem); background: var(--muted); }
.inbox-composer[data-mode="reply"] { border-style: solid; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / 4%); }
.inbox-composer-head { display: flex; flex-direction: column; gap: .125rem; }
.inbox-composer-note { margin: 0; padding: .5rem .75rem; border-radius: .625rem; font-size: .8125rem; color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.inbox-composer-note[data-tone="critical"] { color: var(--status-critical); background: color-mix(in oklab, var(--status-critical) 10%, transparent); }
.inbox-reply-input { width: 100%; min-height: 7.5rem; padding: .75rem 1rem; border: 1px solid var(--input); border-radius: .75rem; background: var(--card); color: var(--foreground); font: inherit; font-size: .875rem; line-height: 1.5; resize: vertical; }
.inbox-reply-input:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.inbox-reply-input:disabled { opacity: .6; cursor: not-allowed; }
.inbox-signature { padding: .5rem .75rem; border-left: 3px solid var(--border); color: var(--muted-foreground); }
.inbox-signature-text { margin: .125rem 0 0; font-size: .8125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-composer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.inbox-composer-foot [data-reply-counter] { margin: 0; font-variant-numeric: tabular-nums; }
.inbox-composer-error { flex: 1 1 100%; order: -1; margin: 0; color: var(--status-critical); }
.inbox-message[data-pending="true"] { opacity: .7; }
.inbox-outcome { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.inbox-outcome-label { margin-right: .25rem; font-size: .75rem; font-weight: 600; color: var(--muted-foreground); }
.inbox-outcome-option { min-height: 2rem; padding: 0 .75rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--card); color: var(--foreground); font-size: .75rem; font-weight: 600; cursor: pointer; }
.inbox-outcome-option:hover:not(:disabled) { background: var(--muted); }
.inbox-outcome-option:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.inbox-outcome-option:disabled { opacity: .5; cursor: not-allowed; }
.inbox-outcome-option[aria-pressed="true"] { border-color: transparent; color: var(--status-neutral); background: color-mix(in oklab, var(--status-neutral) 14%, transparent); }
.inbox-outcome-option[aria-pressed="true"][data-tone="positive"] { color: var(--status-positive); background: color-mix(in oklab, var(--status-positive) 14%, transparent); }
.inbox-outcome-option[aria-pressed="true"][data-tone="attention"] { color: var(--status-attention); background: color-mix(in oklab, var(--status-attention) 16%, transparent); }
.inbox-outcome-option[aria-pressed="true"][data-tone="critical"] { color: var(--status-critical); background: color-mix(in oklab, var(--status-critical) 14%, transparent); }
.inbox-email { overflow-wrap: anywhere; }

/* Nav badge: conversations waiting for review. */
[data-nav="inboxMessages"] { position: relative; }
.inbox-nav-badge { position: absolute; top: .25rem; right: calc(50% - 1.5rem); min-width: 1.125rem; height: 1.125rem; padding: 0 .3rem; border-radius: 9999px; background: var(--destructive); color: #fff; font-size: .625rem; font-weight: 700; line-height: 1.125rem; text-align: center; }

/* Phones: segments wrap their label instead of overflowing; panes drop the inner card chrome width. */
@media (max-width: 480px) {
  .inbox-segment { flex-direction: column; gap: .125rem; min-height: 3rem; padding: .25rem; white-space: normal; text-align: center; line-height: 1.15; border-radius: 1rem; }
  .inbox-segments { border-radius: 1.25rem; }
  .inbox-filters { padding: .75rem; }
  .inbox-row { padding: .875rem .75rem; }
  .inbox-thread-pane { padding: 1rem; }
  .inbox-message { padding: .875rem; }
  .inbox-message[data-direction="outbound"], .inbox-message[data-direction="inbound"] { width: 94%; }
}
.inbox-attachments { display: flex; flex-direction: column; gap: .375rem; padding: .625rem .75rem; border: 1px solid var(--border); border-radius: .75rem; }
.inbox-attachments label { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.inbox-suggestion { display: flex; flex-direction: column; gap: .5rem; padding: .875rem 1rem; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: .75rem; background: color-mix(in oklab, var(--primary) 4%, var(--card)); }
.inbox-suggestion[data-status="failed"], .inbox-suggestion[data-status="dismissed"] { border-left-color: var(--border); background: var(--card); }
.inbox-suggestion-draft summary { cursor: pointer; color: var(--primary); }
.inbox-suggestion-draft .inbox-message-body { margin-top: .5rem; }
@media (min-width: 1024px) {
  /* Desktop: the thread pane scrolls, so the bar pins to the pane top (covering its padding). */
  .inbox-thread-bar { top: -1.5rem; margin: -1.5rem -1.5rem 0; padding: 1rem 1.5rem .875rem; }
}