/* ── the inbox ──────────────────────────────────────────────────────────
 * fix/inbox-design (29 October 2026, the owner's brief): every word at
 * 15px at least, secondary text at .64 of the ink (WCAG AA: 5.4:1 on
 * white, 7.9:1 on the night surface), the person first and the channel
 * second, Meta's own logos at Instagram's least (29px) with the room each
 * asks for.
 *
 * Scoped to .xc-inbox (screens/inbox/index, the list, the thread, the
 * customer beside it and the sheets they open), so nothing outside the
 * inbox changes size: the shared classes are raised here, not where they
 * are defined. Logical properties throughout: the same rules read in
 * Arabic, mirrored.
 */

.xc-inbox {
    /* Secondary text, at AA on every surface the inbox uses. */
    --ib-2: rgba(var(--ink), .64);
}

/* ── the list ────────────────────────────────────────────────────────── */

.xc-ib-lane {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 8px 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.xc-ib-lane__dot { flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; }

.xc-ib-lane__mark { flex: none; display: inline-flex; }

.xc-ib-lane__label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.xc-ib-lane__n { flex: none; font-weight: 500; color: var(--ib-2); font-variant-numeric: tabular-nums; }

/* A thread: the customer's face first, the channel's logo at the end in its
   own column (the owner's choice, A). The logo is drawn tight: the row's
   gap and padding are its room, half its size (15px). */
.xc-ib-row {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 12px;
    padding-inline-end: 15px;
    margin-block-end: 4px;
    border-radius: 14px;
    border-inline-start: 3px solid transparent;
    transition: background 160ms;
}

.xc-ib-row:hover { background: rgba(var(--ink), .04); }

.xc-ib-row[aria-current="true"] { background: rgba(var(--ink), .065); border-inline-start-color: rgb(var(--lane, var(--brand))); }

/* News for this person: a thread never opened, or written in since. */
.xc-ib-row[data-news] { background: rgba(232, 163, 61, .09); border-inline-start-color: rgb(232, 163, 61); }

.xc-ib-row__in { display: flex; align-items: center; gap: 12px; }

.xc-ib-row__face { flex: none; display: flex; }

.xc-ib-row__who { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 3px; }

.xc-ib-row__l1 { display: flex; align-items: baseline; gap: 8px; min-inline-size: 0; }

.xc-ib-row__name {
    flex: 1;
    min-inline-size: 0;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xc-ib-row[data-news] .xc-ib-row__name { font-weight: 700; }

.xc-ib-row__time { flex: none; font-size: 15px; color: var(--ib-2); font-variant-numeric: tabular-nums; }

.xc-ib-row[data-news] .xc-ib-row__time { color: var(--amber); font-weight: 600; }

.xc-ib-row__pre {
    font-size: 15px;
    line-height: 1.4;
    color: var(--ib-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xc-ib-row[data-news] .xc-ib-row__pre { color: var(--text); }

.xc-ib-row__team { align-self: flex-start; }

/* The logo's own column, 15px from the words: half its 29px kept clear. */
.xc-ib-row__logo { margin-inline-start: 3px; }

.xc-ib-new {
    flex: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    background: #A96C14;
    border-radius: 999px;
    padding: 0 9px;
}

[data-theme="dark"] .xc-ib-new { color: #2a1c05; background: #E8A33D; }

.xc-ib-unread { flex: none; inline-size: 10px; block-size: 10px; border-radius: 50%; background: rgb(232, 163, 61); align-self: center; }

.xc-ib-note {
    margin: 6px 4px 2px;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ib-2);
    background: rgba(var(--ink), .035);
    border-radius: 12px;
    text-wrap: pretty;
}

/* A desk's name, on a row or in the header. */
.xc-ib-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--ib-2);
    background: rgba(var(--ink), .055);
    border-radius: 999px;
    padding: 2px 10px;
}

/* ── the thread's head ───────────────────────────────────────────────── */

.xc-ib-who { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; flex: 1; }

.xc-ib-who__name { font-size: 18px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.xc-ib-who__them { font-size: 15px; color: var(--ib-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Our side, on its own labelled line: "To @xconversions_test". */
.xc-ib-who__to { display: flex; align-items: baseline; gap: 6px; font-size: 15px; min-inline-size: 0; }

.xc-ib-who__to-k { flex: none; color: var(--ib-2); }

.xc-ib-who__to-v { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.xc-ib-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Who has it, in words: "AI agent · Mar", "Unassigned", a person. */
.xc-ib-owner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 40px;
    box-sizing: border-box;
    padding-inline: 13px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text);
    background: rgba(var(--tint, var(--ink)), .13);
}

.xc-ib-owner__dot { flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: rgb(var(--tint, var(--ink))); }

.xc-ib-owner svg { flex: none; color: rgb(var(--tint, var(--ink))); }

/* The header's own dropdowns (assign, team): x-listbox, sized to the row. */
.xc-ib-tools .xc-lb { inline-size: auto; }

.xc-ib-tools .xc-lb__button { min-block-size: 40px; inline-size: auto; max-inline-size: 220px; }

.xc-ib-tools .xc-lb__list { inline-size: max-content; min-inline-size: 100%; max-inline-size: 280px; inset-inline: auto 0; }

.xc-ib-closed {
    font-size: 15px;
    font-weight: 600;
    color: #8A5A0B;
    background: rgba(232, 163, 61, .16);
    border-radius: 999px;
    padding: 1px 10px;
    white-space: nowrap;
}

[data-theme="dark"] .xc-ib-closed { color: #F2BE6E; }

/* ── the messages ────────────────────────────────────────────────────── */

/* Under each bubble, grouped: who, as what, when, what became of it, and
   where a person typed it. */
.xc-ib-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ib-2);
}

.xc-ib-meta__who { font-weight: 600; color: var(--text); }

.xc-ib-meta__sep { opacity: .8; }

.xc-ib-meta__read { color: var(--peri); font-weight: 600; }

.xc-ib-meta__failed { color: var(--x-error, #b83636); font-weight: 600; }

[data-theme="dark"] .xc-ib-meta__failed { color: #F08A8A; }

.xc-ib-fail {
    font-size: 15px;
    line-height: 1.45;
    color: var(--x-error, #b83636);
    max-inline-size: 42ch;
    text-wrap: pretty;
}

[data-theme="dark"] .xc-ib-fail { color: #F08A8A; }

/* Something that happened rather than something said, between two rules. */
.xc-ib-rail { font-size: 15px; line-height: 1.45; color: var(--ib-2); text-align: center; text-wrap: balance; }

/* ── the shared classes, raised inside the inbox ─────────────────────── */

.xc-inbox .xc-find input { font-size: 15px; }

.xc-inbox .xc-act,
.xc-inbox .xc-primary,
.xc-inbox .xc-quiet { font-size: 15px; }

.xc-inbox .xc-tool {
    font-size: 15px;
    font-family: inherit;
    color: var(--ib-2);
    border-radius: 8px;
    padding: 2px 9px;
}

.xc-inbox .xc-chip-state { font-size: 15px; font-family: inherit; letter-spacing: 0; }

.xc-inbox .xc-facts dt { font-size: 15px; color: var(--ib-2); }

.xc-inbox .xc-facts__mono { font-size: 15px !important; }

.xc-inbox .xc-inbox-shut strong { font-size: 15px; }

.xc-inbox .xc-inbox-shut span span { font-size: 15px; color: var(--ib-2); }

/* The customer beside the thread (sections/crm): its smaller words at 15px. */
.xc-inbox :is(.xc-crm__sub, .xc-crm__back, .xc-crm__said, .xc-crm__label, .xc-crm__hint, .xc-crm__err, .xc-crm__yesno, .xc-crm__facts, .xc-crm__mono, .xc-crm__chip, .xc-crm__badge, .xc-crm__tl-say, .xc-crm__tl-meta, .xc-crm__tl-end, .xc-crm__note, .xc-crm__dim, .xc-crm__empty, .xc-crm__warn, .xc-crm__time) { font-size: 15px; }

.xc-inbox .xc-crm__note-acts summary,
.xc-inbox .xc-crm__cell strong { font-size: 15px; }

.xc-inbox :is(.xc-crm__hint, .xc-crm__dim, .xc-crm__tl-meta, .xc-crm__tl-end, .xc-crm__time) { color: var(--ib-2); }

/* Its labels were 10px capitals in mono: at 15px, in words. */
.xc-inbox .xc-crm__label { font-family: inherit; letter-spacing: 0; text-transform: none; }

/* ── the help button, in the top bar on the inbox ────────────────────
 * The round assistant button floats in the corner everywhere else; on the
 * inbox it sat over the reply box, Take over or the last message. Here it
 * is a button in the top bar beside the bell instead (layout.partials.header,
 * help-panel): the same panel, the same count, never over a word. Read from
 * the page, so in-app navigation (swap.js) swaps it with the screen.
 */
.xc-help-top { display: none; }

body:has(.xc-inbox) .xc-help-top { display: flex; }

body:has(.xc-inbox) .xc-tk-fab { display: none; }

/* With no button in its corner, the conversation needs no room for one. */
body:has(.xc-inbox) [data-live="messages"] { padding-block-end: 22px !important; }

.xc-help-top__n {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    min-inline-size: 16px;
    block-size: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--amber);
    color: #2a1c05;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    font-weight: 700;
}

/* ── a banner, one line ──────────────────────────────────────────────── */

.xc-alert--line { padding-block: 8px; padding-inline: 14px 8px; gap: 12px; }

/* Hidden by its × while the request goes (modules/banners.js). */
.xc-alert[hidden] { display: none; }

.xc-alert--line .xc-alert__mark { inline-size: 28px; block-size: 28px; border-radius: 9px; }

.xc-alert__line { flex: 1; min-inline-size: 0; font-size: 15px; line-height: 1.45; color: var(--text); text-wrap: pretty; }

.xc-alert__x {
    appearance: none;
    flex: none;
    inline-size: 36px;
    block-size: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(var(--ink), .72);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.xc-alert__x:hover { background: rgba(var(--ink), .07); }

.xc-alert__x:focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: 1px; }

/* On a phone the head's controls are a row of their own under the person. */
@media (max-width: 820px) {
    [data-r="threadhead"] > .xc-ib-tools { order: 2; flex: 1 1 100%; margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .xc-ib-row { transition: none; }
}