/* ── the support desk ───────────────────────────────────────────────────
 * Where our team works the tickets (layout/desk, screens/desk,
 * modules/desk.js): the channels down one side, a list's tickets, and the
 * one that is open.
 *
 * Its own file and its own prefix (.xc-dk), as every sheet after shell.css
 * has (scripts/cssclash.php).
 *
 * ── The product's own look ─────────────────────────────────────────────
 *
 * A dark rail beside one rounded panel that begins with the band every
 * screen of the product wears (home.css, components/desk-band): the desk is
 * the inbox's cousin, and reads as one. Inside the panel, two cards: the
 * list, and the ticket.
 *
 * ── Colour says what a thing is ────────────────────────────────────────
 *
 * Every channel has a colour, every status and the two priorities that ask
 * for attention (the support palette, tickets.css): an element names its own
 * with data-tk-hue and paints with --hue. So a list of every channel is read
 * by colour, "waiting on the client" is amber wherever it is said, and
 * resolved is the console's own green — never WhatsApp's.
 *
 * ── The support screens' own rules ─────────────────────────────────────
 *
 * As the help panel's (tickets.css): nothing under 15px, flat buttons with
 * no gradient, the theme's tokens for every surface, logical properties
 * throughout.
 *
 * ── A note never looks like an answer ──────────────────────────────────
 *
 * What the team writes for itself is amber: its tab, its box, its button,
 * its place on the timeline, and a lock. An answer to a client is the
 * brand's. Somebody typing in the wrong one sees it before they send it.
 */

.xc-dk,
.xc-dk * { box-sizing: border-box; }

.xc-dk {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    gap: 14px;
    block-size: 100vh;
    block-size: 100dvh;
    padding: 14px;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.45;
    overflow: hidden;
}

.xc-dk p { margin: 0; }

.xc-dk :focus-visible {
    outline: 2px solid rgba(var(--brand), .6);
    outline-offset: 2px;
}

/* ── what is drawn everywhere ───────────────────────────────────────── */

/* A channel's mark, a list's, a figure's: its icon on a tint of its colour. */
.xc-dk__glyph {
    position: relative;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex: none;
    background: rgba(var(--hue), .13);
    color: rgb(var(--hue));
}

/* Somebody, as a disc with their initials (components/desk-face). */
.xc-dk__face {
    inline-size: var(--face, 32px);
    block-size: var(--face, 32px);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    flex: none;
    overflow: hidden;
    background: rgba(var(--hue), .16);
    color: rgb(var(--hue));
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* The assistant's: its mark where a person's initials would be. */
.xc-dk__face--ai {
    background: rgba(var(--brand), .12);
    color: rgb(var(--brand));
}

.xc-dk__face--ai .xc-spark { color: inherit; }

/* Where something stands, or how soon: its colour, and a dot. */
.xc-dk__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(var(--hue), .12);
    color: rgb(var(--hue));
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.xc-dk__pill i,
.xc-dk__dot {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.xc-dk__tag {
    color: rgb(var(--hue));
    font-weight: 500;
    white-space: nowrap;
}

.xc-dk__label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: rgba(var(--ink), .7);
}

.xc-dk__hint { color: rgba(var(--ink), .62); }

/* Said to a screen reader, drawn for nobody: a name behind a face. */
.xc-dk__sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.xc-dk__error {
    color: rgb(var(--tk-rose));
    font-weight: 500;
}

/* The quiet button: a border, the surface, the reader's ink. */
.xc-dk__btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-block-size: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 140ms, color 140ms;
}

.xc-dk__btn:hover {
    border-color: rgba(var(--brand), .55);
    color: rgb(var(--brand));
}

/* The one that does the thing: flat, in the colour of the reader's bubble. */
.xc-dk__go {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    background: var(--mine);
    color: var(--onmine);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 140ms;
}

.xc-dk__go:hover { opacity: .88; }

/* A note's button is a note's colour: never mistaken for "send". */
.xc-dk__go--note {
    background: rgb(var(--tk-amber));
    color: rgb(var(--tk-on));
}

/* "Resolve" is the colour of resolved. */
.xc-dk__go--done {
    background: rgb(var(--tk-teal));
    color: rgb(var(--tk-on));
}

/* A button that is only its icon: rename, the panel about the ticket. */
.xc-dk__iconbtn {
    appearance: none;
    inline-size: 38px;
    block-size: 38px;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: rgba(var(--ink), .72);
    list-style: none;
    cursor: pointer;
    transition: border-color 140ms, color 140ms;
}

.xc-dk__iconbtn::-webkit-details-marker { display: none; }

.xc-dk__iconbtn:hover {
    border-color: rgba(var(--brand), .55);
    color: rgb(var(--brand));
}

.xc-dk__caret {
    flex: none;
    opacity: .7;
    pointer-events: none;
}

/* ── the side ───────────────────────────────────────────────────────────
 * A rail of its own, as the product's is: rounded, off the edge of the
 * window, dark in both themes. Wide, because a channel is found by its name.
 */

.xc-dk__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-block-size: 0;
    padding: 18px 12px 12px;
    border: 1px solid rgba(var(--rail-ink), .07);
    border-radius: 22px;
    background: var(--rail);
    color: var(--rail-text);
}

.xc-dk__side :focus-visible { outline-color: #8F8FF7; }

.xc-dk__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 8px;
    color: var(--rail-text);
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.xc-dk__brand svg { color: #8F8FF7; flex: none; }

.xc-dk__brand:hover { color: var(--rail-text); }

.xc-dk__nav {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--rail-ink), .2) transparent;
}

.xc-dk__group {
    padding: 16px 10px 6px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(var(--rail-ink), .46);
}

.xc-dk__chan {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 12px;
    color: rgba(var(--rail-ink), .74);
    font-size: 15px;
    text-decoration: none;
    transition: background 140ms, color 140ms;
}

.xc-dk__chan .xc-dk__glyph { background: rgba(var(--hue), .18); }

.xc-dk__chan:hover {
    background: rgba(var(--rail-ink), .07);
    color: var(--rail-text);
}

/* Where you are: lit, and its mark filled with its colour. */
.xc-dk__chan[aria-current="page"] {
    background: var(--rail-active);
    color: var(--rail-text);
    font-weight: 600;
}

.xc-dk__chan[aria-current="page"] .xc-dk__glyph {
    background: rgb(var(--hue));
    color: #14142B;
}

/* A channel somebody does not follow: there, and quieter. */
.xc-dk__chan[data-follows="no"]:not([aria-current="page"]) { opacity: .56; }

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

/* What is new for this person: counted, in the channel's own colour. */
.xc-dk__n {
    min-inline-size: 24px;
    padding: 1px 7px;
    border-radius: 12px;
    background: rgb(var(--hue));
    color: #14142B;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    flex: none;
}

.xc-dk__quiet {
    min-inline-size: 24px;
    text-align: center;
    color: rgba(var(--rail-ink), .46);
    flex: none;
}

.xc-dk__me {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-block-start: 12px;
    border-block-start: 1px solid rgba(var(--rail-ink), .12);
}

.xc-dk__who {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    color: var(--rail-text);
    text-decoration: none;
    transition: background 140ms;
}

.xc-dk__who:hover,
.xc-dk__who[aria-current="page"] {
    background: rgba(var(--rail-ink), .08);
    color: var(--rail-text);
}

.xc-dk__who-says {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.xc-dk__who-says strong {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-dk__who-says span { color: rgba(var(--rail-ink), .55); }

.xc-dk__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xc-dk__links form { display: contents; }

.xc-dk__link {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: rgba(var(--rail-ink), .66);
    font: inherit;
    font-size: 15px;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms, color 140ms;
}

.xc-dk__link:hover {
    background: rgba(var(--rail-ink), .07);
    color: var(--rail-text);
}

/* An arrow points the way the writing runs. */
[dir="rtl"] .xc-dk__link svg,
[dir="rtl"] .xc-dk__back svg,
[dir="rtl"] .xc-dk__mode[data-mode="reply"] svg,
[dir="rtl"] .xc-dk__form--reply .xc-dk__go svg { transform: scaleX(-1); }

/* ── the panel beside it ────────────────────────────────────────────── */

.xc-dk__main {
    min-inline-size: 0;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    outline: none;
}

.xc-dk__box {
    flex: 1;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
}

/* The band: the product's own (home.css), with the list's mark before its
 * name and the one figure that matters after it. */
.xc-dk__band {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
}

.xc-dk__band-glyph {
    inline-size: 46px;
    block-size: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    flex: none;
    background: rgba(var(--hue), .2);
    color: rgb(var(--hue));
    box-shadow: inset 0 0 0 1px rgba(var(--hue), .3);
}

.xc-dk__band-title {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.xc-dk__band-title h1 {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 25px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.xc-dk__band-title p {
    margin: 0;
    font-size: 15px;
}

.xc-dk__band-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.xc-dk__band-btn {
    appearance: none;
    display: flex;
    padding: 9px 11px;
    border: 1px solid var(--band-line, var(--line));
    border-radius: 12px;
    background: var(--band-btn, var(--surface));
    cursor: pointer;
}

/* The language menu is the product's (menus.css), at this screen's size. */
.xc-dk .xc-langs__on,
.xc-dk .xc-langs__title,
.xc-dk .xc-langs__words strong,
.xc-dk .xc-langs__words em,
.xc-dk .xc-langs__mark { font-size: 15px; }

.xc-dk .xc-langs__title { letter-spacing: .06em; }

.xc-dk__figure {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding-inline-end: 6px;
    color: #FFFFFF;
    white-space: nowrap;
}

.xc-dk__figure strong {
    font-family: Poppins, sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.xc-dk__figure span { color: rgba(255, 255, 255, .6); }

/* Following a channel: asked for on the night, said in white once it is so. */
.xc-dk__follow {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-block-size: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: #FFFFFF;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 140ms;
}

.xc-dk__follow:hover { background: rgba(255, 255, 255, .14); }

.xc-dk__follow[data-on] {
    border-color: #FFFFFF;
    background: #FFFFFF;
    color: #14142B;
}

.xc-dk__band :focus-visible { outline-color: #8F8FF7; }

.xc-dk__panes {
    flex: 1;
    min-block-size: 0;
    display: grid;
    grid-template-columns: minmax(300px, 352px) minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
}

.xc-dk__list,
.xc-dk__thread {
    min-inline-size: 0;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
}

/* ── a list's tickets ───────────────────────────────────────────────── */

.xc-dk__list-head {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 14px 12px;
    border-block-end: 1px solid var(--line);
}

.xc-dk__find {
    position: relative;
    display: flex;
    align-items: center;
}

.xc-dk__find svg {
    position: absolute;
    inset-inline-start: 13px;
    color: rgba(var(--ink), .45);
    pointer-events: none;
}

.xc-dk__find input {
    inline-size: 100%;
    padding-block: 10px;
    padding-inline: 40px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    transition: border-color 140ms;
}

.xc-dk__find input:focus-visible {
    outline: none;
    border-color: rgba(var(--brand), .6);
    box-shadow: 0 0 0 3px rgba(var(--brand), .14);
}

/* Which of them: each filter in its status's colour, with how many. */
.xc-dk__shows {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.xc-dk__shows a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: rgba(var(--ink), .72);
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 140ms, color 140ms, background 140ms;
}

.xc-dk__shows b {
    font-weight: 600;
    color: rgba(var(--ink), .45);
}

.xc-dk__shows a:hover {
    border-color: rgba(var(--hue), .55);
    color: rgb(var(--hue));
}

.xc-dk__shows a[aria-current="true"] {
    border-color: transparent;
    background: rgba(var(--hue), .13);
    color: rgb(var(--hue));
    font-weight: 600;
}

.xc-dk__shows a[aria-current="true"] b { color: inherit; }

.xc-dk__rows {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
}

.xc-dk__rows .xc-pager {
    padding: 10px 6px 4px;
    font-size: 15px;
}

.xc-dk__rows .xc-pager * { font-size: 15px; }

.xc-dk__row {
    display: flex;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--text);
    text-decoration: none;
    transition: background 140ms, border-color 140ms;
}

.xc-dk__row:hover {
    background: rgba(var(--ink), .04);
    color: var(--text);
}

.xc-dk__row[aria-current="true"] {
    border-color: rgba(var(--brand), .38);
    background: rgba(var(--brand), .07);
}

.xc-dk__row > .xc-dk__glyph {
    inline-size: 38px;
    block-size: 38px;
    border-radius: 12px;
    margin-block-start: 2px;
}

.xc-dk__row-main {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.xc-dk__row-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.xc-dk__row-top strong {
    flex: 1;
    min-inline-size: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-dk__row-top time,
.xc-dk__row-mid { color: rgba(var(--ink), .58); }

.xc-dk__row-top time { flex: none; }

/* A workspace whose plan includes priority support: answered first. */
.xc-dk__plan {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11.4px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--amber);
    background: rgba(232, 163, 61, .16);
}

/* Whose workspace and who wrote it; and, at the end of the line, whose it is now. */
.xc-dk__row-mid {
    display: flex;
    align-items: center;
    gap: 8px;
}

.xc-dk__row-mid > span:first-child {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Something happened since this person last read it: heavier, and a dot on
 * its mark, ringed in the surface so it reads on any tint. */
.xc-dk__row[data-unread] .xc-dk__row-top strong { font-weight: 700; }

.xc-dk__row[data-unread] .xc-dk__row-top time {
    color: rgb(var(--brand));
    font-weight: 600;
}

.xc-dk__row[data-unread] > .xc-dk__glyph::after {
    content: '';
    position: absolute;
    inset-block-start: -3px;
    inset-inline-end: -3px;
    inline-size: 12px;
    block-size: 12px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: rgb(var(--brand));
}

.xc-dk__row-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-block-start: 2px;
}

/* Whose it is: a face. */
.xc-dk__holder {
    display: inline-flex;
    flex: none;
}

/* Nobody's yet: an empty place, drawn as one. */
.xc-dk__holder--none {
    inline-size: 26px;
    block-size: 26px;
    border: 1px dashed rgba(var(--ink), .38);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: rgba(var(--ink), .5);
}

.xc-dk__none {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 16px;
    color: rgba(var(--ink), .6);
    text-align: center;
}

.xc-dk__none-art {
    inline-size: 60px;
    block-size: 60px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(var(--tk-teal), .12);
    color: rgb(var(--tk-teal));
}

/* ── the open ticket ────────────────────────────────────────────────── */

.xc-dk__thread {
    position: relative;
    /* So the panel about a ticket can ask how wide the ticket is drawn. */
    container: xc-dk-thread / inline-size;
}

.xc-dk__head {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px 10px;
}

.xc-dk__back {
    display: none;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 11px;
    background: rgba(var(--ink), .06);
    color: var(--text);
    place-items: center;
    flex: none;
}

.xc-dk__head-main {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.xc-dk__head-main h2 {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.01em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.xc-dk__head-main p {
    color: rgba(var(--ink), .62);
    overflow-wrap: anywhere;
}

/* A reference is copied and searched for: set as one. */
.xc-dk__ref {
    display: inline-block;
    margin-inline-end: 6px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(var(--ink), .06);
    color: rgba(var(--ink), .78);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 15px;
}

.xc-dk__acts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.xc-dk__acts form { display: flex; }

.xc-dk__more { position: relative; }

.xc-dk__more[open] > summary {
    border-color: rgba(var(--brand), .55);
    color: rgb(var(--brand));
}

.xc-dk__more-sheet {
    position: absolute;
    z-index: 6;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    inline-size: min(360px, 78vw);
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 44px rgba(var(--scrim), .22);
}

.xc-dk__more-sheet label { font-weight: 600; }

.xc-dk__more-sheet .xc-dk__go { align-self: flex-end; }

.xc-dk__more-sheet input,
.xc-dk__field input,
.xc-dk__field select {
    inline-size: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
}

/* Where it stands, how soon, which channel, whose: four pickers in a row,
 * each a pill in the colour of what it says. */
.xc-dk__tools {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 20px 12px;
    border-block-end: 1px solid var(--line);
}

.xc-dk__pick {
    display: flex;
    min-inline-size: 0;
}

.xc-dk__pick-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    block-size: 36px;
    padding-inline: 12px 10px;
    border: 1px solid rgba(var(--hue), .24);
    border-radius: 999px;
    background: rgba(var(--hue), .1);
    color: rgb(var(--hue));
    transition: border-color 140ms, box-shadow 140ms;
}

.xc-dk__pick-box:hover { border-color: rgba(var(--hue), .55); }

.xc-dk__pick-box:focus-within { box-shadow: 0 0 0 3px rgba(var(--hue), .2); }

.xc-dk__pick-box .xc-spark { color: rgb(var(--brand)); }

.xc-dk__pick select {
    appearance: none;
    max-inline-size: 200px;
    padding: 0;
    padding-inline-end: 20px;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    cursor: pointer;
    /* As wide as what is chosen, not as the longest thing that could be. */
    field-sizing: content;
}

/* The list a picker opens is the reader's own, not the pill's colour. */
.xc-dk__pick option {
    background: var(--surface);
    color: var(--text);
    font-weight: 400;
}

.xc-dk__pick .xc-dk__caret {
    position: absolute;
    inset-inline-end: 11px;
}

.xc-dk__pick .xc-dk__dot {
    inline-size: 8px;
    block-size: 8px;
}

/* Still the assistant's choice: its mark, and a dashed edge, until one of
 * us sets it. Nobody's yet: an empty place, as in the list. */
.xc-dk__pick[data-ai] .xc-dk__pick-box {
    border-style: dashed;
    border-color: rgba(var(--brand), .6);
}

.xc-dk__pick[data-empty] .xc-dk__pick-box {
    border-style: dashed;
    border-color: rgba(var(--hue), .5);
    background: transparent;
}

/* "Assign to me", beside the pickers and shaped like them. */
.xc-dk__tools .xc-dk__btn {
    min-block-size: 36px;
    border-radius: 999px;
}

/* What the mark means, said once beside the pickers. */
.xc-dk__ai-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 36px;
    margin-inline-start: auto;
    color: rgb(var(--brand));
    font-weight: 600;
    white-space: nowrap;
}

.xc-dk__ai-tag .xc-spark { color: inherit; }

.xc-dk__body {
    position: relative;
    flex: 1;
    min-block-size: 0;
    display: flex;
}

.xc-dk__talk {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
}

.xc-dk__scroll {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface-2);
}

.xc-dk__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.xc-dk__card p { overflow-wrap: anywhere; }

/* What the team was sent: first, and under its channel's colour. */
.xc-dk__request { border-block-start: 3px solid rgb(var(--hue)); }

.xc-dk__request-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.xc-dk__request-head > div {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.xc-dk__request-head span { color: rgba(var(--ink), .6); }

.xc-dk__facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px 18px;
    margin: 0;
    padding-block-start: 10px;
    border-block-start: 1px dashed var(--line);
}

.xc-dk__facts dt { color: rgba(var(--ink), .58); }

.xc-dk__facts dd {
    margin: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* One under the other, where the column is narrow. */
.xc-dk__facts--stack {
    grid-template-columns: minmax(0, 1fr);
    padding-block-start: 0;
    border-block-start: 0;
}

.xc-dk__intake {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.xc-dk__intake summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-weight: 600;
    color: rgba(var(--ink), .72);
    list-style: none;
    cursor: pointer;
}

.xc-dk__intake summary::-webkit-details-marker { display: none; }

.xc-dk__intake summary .xc-spark { color: rgb(var(--brand)); }

.xc-dk__intake summary .xc-dk__caret {
    margin-inline-start: auto;
    transition: transform 160ms;
}

.xc-dk__intake[open] summary .xc-dk__caret { transform: rotate(180deg); }

.xc-dk__intake .xc-dk__entries {
    padding: 14px 16px 16px;
    border-block-start: 1px solid var(--line);
    background: var(--surface-2);
    border-end-start-radius: 14px;
    border-end-end-radius: 14px;
}

.xc-dk__entries {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* A line: somebody's face, their name, what they said. The client's and the
 * assistant's from the start side, ours from the end. */
.xc-dk__entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-inline-size: 86%;
}

.xc-dk__entry--theirs { align-self: flex-start; }

.xc-dk__entry--ours {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.xc-dk__said {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-inline-size: 0;
}

.xc-dk__entry--ours .xc-dk__said { align-items: flex-end; }

.xc-dk__by {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    color: rgba(var(--ink), .62);
}

.xc-dk__by strong {
    color: var(--text);
    font-weight: 600;
}

.xc-dk__by time,
.xc-dk__event time {
    margin-inline-start: 3px;
    color: rgba(var(--ink), .5);
    font-weight: 400;
}

.xc-dk__bubble {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    border-start-start-radius: 6px;
    background: var(--surface);
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

.xc-dk__entry--ours .xc-dk__bubble {
    border-color: transparent;
    border-start-start-radius: 16px;
    border-start-end-radius: 6px;
    background: var(--mine);
    color: var(--onmine);
}

/* Something that happened, said in the middle: not anybody's words. */
.xc-dk__event {
    align-self: center;
    max-inline-size: 92%;
    padding: 4px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: rgba(var(--ink), .72);
    text-align: center;
}

/* The desk's own events: said, and quieter than what was said to the client. */
.xc-dk__event--desk {
    padding-block: 0;
    border: 0;
    background: none;
    color: rgba(var(--ink), .6);
}

/* Ours alone: amber, edge to edge, a lock, and it says so. */
.xc-dk__note {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--tk-amber), .32);
    border-inline-start: 4px solid rgb(var(--tk-amber));
    border-radius: 14px;
    background: rgba(var(--tk-amber), .09);
}

.xc-dk__note .xc-dk__by,
.xc-dk__note .xc-dk__by strong { color: rgb(var(--tk-amber)); }

.xc-dk__note-mark {
    inline-size: 24px;
    block-size: 24px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    background: rgba(var(--tk-amber), .18);
}

.xc-dk__note-body { overflow-wrap: anywhere; }

/* Somebody named. */
.xc-dk__at {
    padding: 0 5px;
    border-radius: 6px;
    background: rgba(var(--tk-amber), .22);
    font-weight: 600;
}

/* ── the two things to write ────────────────────────────────────────────
 * Two tabs over one box: the tab that is chosen and the box under it are
 * one shape in one colour, so which of the two is being written is seen
 * without reading.
 */

.xc-dk__compose {
    flex: none;
    display: flex;
    flex-direction: column;
    padding: 8px 20px 14px;
    background: var(--surface);
    border-block-start: 1px solid var(--line);
}

.xc-dk__modes {
    display: flex;
    gap: 4px;
}

.xc-dk__mode {
    position: relative;
    inset-block-start: 1px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-block-end: 0;
    border-start-start-radius: 12px;
    border-start-end-radius: 12px;
    color: rgba(var(--ink), .62);
    cursor: pointer;
    transition: color 140ms;
}

.xc-dk__mode:hover { color: var(--text); }

.xc-dk__mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.xc-dk__mode:has(input:checked) { font-weight: 600; }

.xc-dk__mode:has(input:focus-visible) {
    outline: 2px solid rgba(var(--brand), .6);
    outline-offset: 2px;
}

.xc-dk__mode[data-mode="reply"]:has(input:checked) {
    border-color: rgba(var(--brand), .4);
    background: color-mix(in srgb, rgb(var(--brand)) 6%, var(--surface));
    color: rgb(var(--brand));
}

.xc-dk__mode[data-mode="note"]:has(input:checked) {
    border-color: rgba(var(--tk-amber), .5);
    background: color-mix(in srgb, rgb(var(--tk-amber)) 11%, var(--surface));
    color: rgb(var(--tk-amber));
}

.xc-dk__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(var(--brand), .4);
    border-radius: 14px;
    border-start-start-radius: 0;
    background: color-mix(in srgb, rgb(var(--brand)) 6%, var(--surface));
}

.xc-dk__form--note {
    border-color: rgba(var(--tk-amber), .5);
    border-start-start-radius: 14px;
    background: color-mix(in srgb, rgb(var(--tk-amber)) 11%, var(--surface));
}

/* One box at a time, by the tab above it. */
.xc-dk__compose:has(input[value="reply"]:checked) .xc-dk__form--note,
.xc-dk__compose:has(input[value="note"]:checked) .xc-dk__form--reply { display: none; }

.xc-dk__form textarea {
    inline-size: 100%;
    min-block-size: 46px;
    max-block-size: 36vh;
    /* It grows with what is written, where the browser can; the corner drags it where it cannot. */
    field-sizing: content;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
}

.xc-dk__form textarea:focus-visible {
    outline: 2px solid rgba(var(--brand), .55);
    outline-offset: 0;
    border-color: transparent;
}

.xc-dk__form--note textarea:focus-visible { outline-color: rgba(var(--tk-amber), .75); }

.xc-dk__form-foot {
    display: flex;
    align-items: center;
    gap: 12px;
}

.xc-dk__form-foot .xc-dk__hint { flex: 1; }

.xc-dk__form-closed { padding: 6px 2px; }

/* The people a note can name, offered as an @ is typed. */
.xc-dk__people {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.xc-dk__people[hidden] { display: none; }

.xc-dk__people button {
    appearance: none;
    padding: 4px 12px;
    border: 1px solid rgba(var(--tk-amber), .5);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.xc-dk__people button:hover { background: rgba(var(--tk-amber), .12); }

/* ── about the ticket ───────────────────────────────────────────────────
 * Who sent it, what the assistant proposed, what travelled with it. Beside
 * the conversation where the ticket is drawn wide enough to give up a
 * column; over it, asked for, where it is not (modules/desk.js).
 */

.xc-dk__info {
    flex: none;
    inline-size: 296px;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    border-inline-start: 1px solid var(--line);
    background: var(--surface);
}

.xc-dk__thread[data-dk-info="closed"] .xc-dk__info { display: none; }

.xc-dk__info-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-block-size: 54px;
    padding: 8px 16px;
    border-block-end: 1px solid var(--line);
}

.xc-dk__info-head strong { font-weight: 600; }

/* Closing it is the button in the ticket's head, while it has a column. */
.xc-dk__info-head .xc-dk__iconbtn { display: none; }

.xc-dk__info-body {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

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

.xc-dk__client > div {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.xc-dk__client strong {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.xc-dk__client span {
    color: rgba(var(--ink), .62);
    overflow-wrap: anywhere;
}

/* What the assistant proposed, as a proposal: its mark, a dashed edge. */
.xc-dk__ai {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px dashed rgba(var(--brand), .5);
    border-radius: 14px;
    background: rgba(var(--brand), .05);
}

.xc-dk__ai > strong {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgb(var(--brand));
    font-weight: 600;
}

.xc-dk__ai .xc-spark { color: inherit; }

.xc-dk__ai > p { color: rgba(var(--ink), .66); }

.xc-dk__ai dl {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 0;
}

.xc-dk__ai dt { color: rgba(var(--ink), .58); }

.xc-dk__ai dd {
    margin: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.xc-dk__context {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@container xc-dk-thread (max-width: 879px) {
    .xc-dk__info {
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: 5;
        display: none;
        inline-size: min(330px, 100%);
        box-shadow: 0 0 46px rgba(var(--scrim), .24);
    }

    .xc-dk__thread[data-dk-info="open"] .xc-dk__info { display: flex; }

    .xc-dk__info-head .xc-dk__iconbtn { display: grid; }
}

/* The four figures, two by two, where four across would crowd them. */
@container xc-dk-thread (max-width: 539px) {
    .xc-dk__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── how the whole desk stands ──────────────────────────────────────────
 * Beside the list until a ticket is open (sections/overview).
 */

.xc-dk__over {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.xc-dk__over-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.xc-dk__over-head h2 {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.xc-dk__over-head p { color: rgba(var(--ink), .62); }

.xc-dk__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

/* A figure, and the way into the list it counts. */
.xc-dk__stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
    border: 1px solid rgba(var(--hue), .24);
    border-radius: 16px;
    background: rgba(var(--hue), .07);
    color: var(--text);
    text-decoration: none;
    transition: transform 160ms, box-shadow 160ms, border-color 160ms;
}

.xc-dk__stat:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--hue), .5);
    box-shadow: 0 12px 26px rgba(var(--hue), .16);
    color: var(--text);
}

.xc-dk__stat .xc-dk__glyph {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 11px;
    background: rgba(var(--hue), .16);
}

.xc-dk__stat strong {
    color: rgb(var(--hue));
    font-family: Poppins, sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.xc-dk__stat > span:last-child { color: rgba(var(--ink), .72); }

.xc-dk__over-chans {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.xc-dk__over-chans .xc-dk__label { padding-block-end: 4px; }

.xc-dk__chanrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    text-decoration: none;
    transition: border-color 140ms, background 140ms;
}

.xc-dk__chanrow:hover {
    border-color: rgba(var(--hue), .5);
    background: rgba(var(--hue), .05);
    color: var(--text);
}

.xc-dk__chanrow .xc-dk__glyph {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 11px;
}

.xc-dk__chanrow-name {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
}

.xc-dk__chanrow-name strong { font-weight: 600; }

.xc-dk__chanrow-name span {
    color: rgba(var(--ink), .6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-dk__chanrow-n {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: none;
}

.xc-dk__chanrow-n .xc-dk__tag {
    color: rgba(var(--ink), .5);
    font-weight: 400;
}

.xc-dk__over-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-block-start: auto;
    padding-block-start: 6px;
    color: rgba(var(--ink), .5);
}

/* ── a page of its own: the account ─────────────────────────────────── */

.xc-dk__page {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 16px 28px;
}

.xc-dk__page > * {
    inline-size: 100%;
    max-inline-size: 640px;
}

.xc-dk__idcard {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.xc-dk__idcard .xc-dk__face { font-size: 19px; }

.xc-dk__idcard > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-inline-size: 0;
}

.xc-dk__idcard strong {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 18px;
}

.xc-dk__idcard > div > span:not(.xc-dk__pill) {
    color: rgba(var(--ink), .62);
    overflow-wrap: anywhere;
}

.xc-dk__idcard .xc-dk__pill { margin-block-start: 4px; }

.xc-dk__fields { gap: 14px; }

.xc-dk__fields h2 {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 17px;
}

.xc-dk__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.xc-dk__field span { font-weight: 500; }

.xc-dk__field em {
    color: rgb(var(--tk-rose));
    font-style: normal;
}

.xc-dk__field input:focus-visible,
.xc-dk__field select:focus-visible,
.xc-dk__more-sheet input:focus-visible {
    outline: none;
    border-color: rgba(var(--brand), .6);
    box-shadow: 0 0 0 3px rgba(var(--brand), .14);
}

/* Said saved where it was saved, in the colour of done. */
.xc-dk__saved:not(:empty) {
    color: rgb(var(--tk-teal));
    font-weight: 600;
}

.xc-dk__shielded {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.xc-dk__shielded svg {
    flex: none;
    margin-block-start: 3px;
    color: rgb(var(--tk-teal));
}

@media (prefers-reduced-motion: reduce) {
    .xc-dk__stat,
    .xc-dk__intake summary .xc-dk__caret { transition: none; }

    .xc-dk__stat:hover { transform: none; }
}

/* ── a narrower window ──────────────────────────────────────────────────
 * The rail gives up its width before the work does.
 */
@media (max-width: 1180px) {
    .xc-dk { grid-template-columns: 224px minmax(0, 1fr); }

    .xc-dk__panes { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); }
}

/* ── a phone ────────────────────────────────────────────────────────────
 * The rail becomes a strip across the top — its lists and channels a row to
 * swipe — and under it one column: the list, or the ticket once one is
 * open. An open ticket takes the whole screen: the band and the channels
 * make way for it.
 */
@media (max-width: 820px) {
    .xc-dk {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    /* The product's phone pages scroll with the window (responsive.css, which
     * names this element by its data-r and says so with !important). The desk
     * keeps to the window instead, as a conversation does: what was said
     * scrolls, and the box to answer in stays under the thumb. */
    .xc-dk[data-r="app"] {
        block-size: 100dvh !important;
        min-block-size: 0 !important;
        overflow: hidden !important;
    }

    .xc-dk__side {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border: 0;
        border-radius: 0;
    }

    .xc-dk__brand {
        flex: 1;
        min-inline-size: 0;
        padding-inline: 2px;
    }

    .xc-dk__me {
        flex-direction: row;
        align-items: center;
        gap: 2px;
        padding: 0;
        border: 0;
    }

    .xc-dk__who { padding: 4px; }

    .xc-dk__who-says { display: none; }

    .xc-dk__links { flex-direction: row; }

    .xc-dk__link {
        inline-size: 44px;
        block-size: 44px;
        justify-content: center;
        padding: 0;
    }

    .xc-dk__link span { display: none; }

    .xc-dk__nav {
        order: 3;
        flex: 1 0 100%;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .xc-dk__group { display: none; }

    .xc-dk__chan {
        flex: none;
        padding-inline-end: 12px;
        background: rgba(var(--rail-ink), .06);
    }

    .xc-dk__chan-name { overflow: visible; }

    .xc-dk:has([data-dk-open]) .xc-dk__nav,
    .xc-dk:has([data-dk-open]) .xc-dk__band { display: none; }

    .xc-dk__main {
        flex: 1;
        min-block-size: 0;
    }

    .xc-dk__box {
        border: 0;
        border-radius: 0;
    }

    .xc-dk__band { padding: 14px; }

    .xc-dk__band-glyph { display: none; }

    .xc-dk__band-title h1 { font-size: 21px; }

    .xc-dk__panes {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px;
    }

    .xc-dk__panes .xc-dk__thread,
    .xc-dk__panes[data-dk-open] .xc-dk__list { display: none; }

    .xc-dk__panes[data-dk-open] .xc-dk__thread { display: flex; }

    .xc-dk__back { display: grid; }

    /* Back and what is done to the ticket on one line; its name under them,
     * the whole width. */
    .xc-dk__head {
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 12px 14px 10px;
    }

    .xc-dk__acts { margin-inline-start: auto; }

    .xc-dk__head-main {
        order: 3;
        flex: 1 0 100%;
    }

    /* The tab, the colour and the button say where an answer goes; the
     * sentence under it gives its line to the conversation. A note keeps
     * its own: who reads it is the thing to be sure of. */
    .xc-dk__form--reply .xc-dk__form-foot .xc-dk__hint { display: none; }

    .xc-dk__tools,
    .xc-dk__scroll,
    .xc-dk__compose { padding-inline: 14px; }

    .xc-dk__pick select { max-inline-size: 150px; }

    .xc-dk__ai-tag { margin-inline-start: 0; }

    .xc-dk__entry { max-inline-size: 96%; }

    .xc-dk__form-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .xc-dk__page { padding: 14px 12px 24px; }

    .xc-dk__btn,
    .xc-dk__go,
    .xc-dk__iconbtn,
    .xc-dk__follow { min-block-size: 44px; }

    .xc-dk__iconbtn { inline-size: 44px; }

    .xc-dk__go { justify-content: center; }
}

/* ── what came with a line ──────────────────────────────────────────────
 * A picture that opens whole, a voice note that plays here, a file to
 * download (sections/files) — and, under the first two, what the assistant
 * heard or read in them, marked as its reading.
 */
.xc-dk__files {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    max-inline-size: 100%;
}

.xc-dk__entry--ours .xc-dk__files { justify-content: flex-end; }

.xc-dk__shot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    inline-size: 190px;
    margin: 0;
}

.xc-dk__shot a {
    display: block;
    block-size: 132px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.xc-dk__shot img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.xc-dk__voice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    inline-size: min(340px, 100%);
}

.xc-dk__voice audio {
    inline-size: 100%;
    block-size: 40px;
}

.xc-dk__heard {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px dashed rgba(var(--brand), .35);
    border-radius: 10px;
    background: rgba(var(--brand), .05);
    overflow-wrap: anywhere;
}

/* A picture's reading is folded under it: opened by whoever wants it. */
details.xc-dk__heard { display: block; }

details.xc-dk__heard > summary {
    list-style: none;
    cursor: pointer;
}

details.xc-dk__heard > summary::-webkit-details-marker { display: none; }

details.xc-dk__heard[open] > summary { margin-block-end: 4px; }

.xc-dk__heard-by {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgb(var(--brand));
    font-weight: 600;
}

.xc-dk__heard-by .xc-spark { color: inherit; }

.xc-dk__heard--wait {
    border-color: var(--line);
    background: none;
    color: rgba(var(--ink), .6);
}

.xc-dk__doc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-inline-size: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color 140ms;
}

.xc-dk__doc:hover {
    border-color: rgba(var(--brand), .55);
    color: var(--text);
}

.xc-dk__doc svg {
    color: rgb(var(--brand));
    flex: none;
}

.xc-dk__doc-name {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.xc-dk__doc-size {
    color: rgba(var(--ink), .58);
    flex: none;
}

/* With the request: what was sent while talking to the assistant. */
.xc-dk__attached {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block-start: 10px;
    border-block-start: 1px dashed var(--line);
}

/* Files to send with an answer: the button beside "send", and — where the
 * hint was — what was chosen. */
.xc-dk__attach {
    position: relative;
    flex: none;
}

.xc-dk__attach:focus-within {
    outline: 2px solid rgba(var(--brand), .6);
    outline-offset: 2px;
}

.xc-dk__form-foot [data-dk-files-names][data-on] {
    color: var(--text);
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* ── the help articles ──────────────────────────────────────────────────
 * What the assistant may answer a client from (screens/desk/articles): the
 * shelf as a list of cards, and one article being written.
 *
 * A published article wears its channel's colour down its edge, as its
 * tickets do; a draft is quiet, because it reaches nobody. What clients
 * said of the answers drawn from one is a bar: solved in the colour of
 * solved, the rest in the colour of something that needs a look.
 */

/* A page with a list on it: wider than the account's one column, and able
 * to say how wide it is drawn. */
.xc-dk__page { container: xc-dk-page / inline-size; }

.xc-dk__page--wide > * { max-inline-size: 1040px; }

.xc-dk__page--wide .xc-pager { font-size: 15px; }

.xc-dk__page--wide .xc-pager * { font-size: 15px; }

/* A figure that leads nowhere does not lift like one that does. */
div.xc-dk__stat:hover {
    transform: none;
    border-color: rgba(var(--hue), .24);
    box-shadow: none;
}

.xc-dk__art-how {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--hue), .08);
    color: rgba(var(--ink), .78);
}

.xc-dk__art-how .xc-spark {
    flex: none;
    margin-block-start: 3px;
    color: rgb(var(--hue));
}

.xc-dk__art-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.xc-dk__art {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-inline-start: 4px solid rgb(var(--hue));
    border-radius: 16px;
    background: var(--surface);
    transition: box-shadow 160ms;
}

.xc-dk__art:hover { box-shadow: 0 10px 26px rgba(var(--hue), .12); }

.xc-dk__art > .xc-dk__glyph {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 12px;
}

/* A draft: there, and quiet. */
.xc-dk__art[data-state="off"] { border-inline-start-color: rgba(var(--ink), .2); }

.xc-dk__art[data-state="off"] > .xc-dk__glyph {
    background: rgba(var(--ink), .07);
    color: rgba(var(--ink), .55);
}

.xc-dk__art-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-inline-size: 0;
}

.xc-dk__art h2 {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.xc-dk__art h2 a {
    color: var(--text);
    text-decoration: none;
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
}

.xc-dk__art h2 a:hover { color: rgb(var(--brand)); }

.xc-dk__art-says {
    color: rgba(var(--ink), .7);
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

.xc-dk__art-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding-block-start: 2px;
}

.xc-dk__art-acts {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* What clients said: solved, of everybody who said. */
.xc-dk__rate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(var(--ink), .72);
}

.xc-dk__rate-bar {
    display: inline-flex;
    inline-size: 64px;
    block-size: 8px;
    flex: none;
    border-radius: 999px;
    background: rgba(var(--tk-rose), .32);
    overflow: hidden;
}

.xc-dk__rate-bar i {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: rgb(var(--tk-teal));
}

.xc-dk__rate-bar--wide {
    display: flex;
    inline-size: 100%;
    block-size: 10px;
}

/* Throwing something away is the colour of that, once the hand is on it. */
.xc-dk__iconbtn--danger:hover {
    border-color: rgba(var(--tk-rose), .55);
    color: rgb(var(--tk-rose));
}

.xc-dk__btn--danger {
    border-color: rgba(var(--tk-rose), .38);
    color: rgb(var(--tk-rose));
}

.xc-dk__btn--danger:hover {
    border-color: rgb(var(--tk-rose));
    background: rgba(var(--tk-rose), .07);
    color: rgb(var(--tk-rose));
}

.xc-dk__art-none {
    align-items: center;
    gap: 10px;
    padding: 36px 18px;
    text-align: center;
}

.xc-dk__art-none strong {
    font-family: Poppins, sans-serif;
    font-size: 17px;
    font-weight: 600;
}

.xc-dk__art-none .xc-dk__hint { max-inline-size: 520px; }

.xc-dk__art-none .xc-dk__none-art {
    background: rgba(var(--tk-violet), .12);
    color: rgb(var(--tk-violet));
}

.xc-dk__art-none .xc-dk__go {
    margin-block-start: 4px;
    text-decoration: none;
}

/* The starter articles: an offer, drawn as one. */
.xc-dk__art-starter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px dashed rgba(var(--hue), .45);
    border-radius: 16px;
    background: rgba(var(--hue), .05);
}

.xc-dk__art-starter > .xc-dk__glyph {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 12px;
}

.xc-dk__art-starter strong { font-weight: 600; }

/* One article being written: the form, and beside it what the assistant
 * does with it. */
.xc-dk__art-edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: flex-start;
    gap: 14px;
}

.xc-dk__art-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xc-dk__field textarea {
    inline-size: 100%;
    min-block-size: 220px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    line-height: 1.55;
    resize: vertical;
}

.xc-dk__field textarea:focus-visible {
    outline: none;
    border-color: rgba(var(--brand), .6);
    box-shadow: 0 0 0 3px rgba(var(--brand), .14);
}

.xc-dk__field small { font-size: 15px; }

/* Where it stands on the start side; the two saves on the end side. */
.xc-dk__art-foot {
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-block-start: 4px;
}

.xc-dk__art-foot .xc-dk__pill { margin-inline-end: auto; }

.xc-dk__art-rules {
    border-color: rgba(var(--hue), .28);
    background: rgba(var(--hue), .05);
}

.xc-dk__art-rules > strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.xc-dk__art-rules > strong .xc-spark { color: rgb(var(--hue)); }

.xc-dk__art-rules ul {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xc-dk__art-rules li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(var(--ink), .8);
}

.xc-dk__art-said > strong {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.xc-dk__art-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: rgba(var(--ink), .72);
}

.xc-dk__art-counts b {
    color: rgb(var(--hue));
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.xc-dk__art-remove .xc-dk__btn {
    inline-size: 100%;
    justify-content: center;
}

/* Where the assistant's answer came from, under its line on a ticket. */
.xc-dk__source {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    max-inline-size: 100%;
    padding: 6px 11px;
    border-radius: 10px;
    background: rgba(var(--hue), .1);
    color: rgba(var(--ink), .72);
    overflow-wrap: anywhere;
}

.xc-dk__source svg {
    flex: none;
    margin-block-start: 3px;
    color: rgb(var(--hue));
}

.xc-dk__source strong {
    color: rgb(var(--hue));
    font-weight: 600;
    unicode-bidi: plaintext;
}

/* ── the team ──────────────────────────────────────────────────────────
 *
 * Who is on the desk, as what, and what each reads (screens/desk/team): the
 * articles' own rows, in the colour of the role — a lead's the brand's, an
 * agent's teal — with a face where an article has its channel's glyph. The
 * sheets that add and change somebody are the product's own (x-modal), with
 * the console's role cards and ticks (admins.css).
 */

/* The mark beside a screen's one rule, when it is not the assistant's spark. */
.xc-dk__art-how > svg {
    flex: none;
    margin-block-start: 3px;
    color: rgb(var(--hue));
}

.xc-dk__team-row { align-items: center; }

.xc-dk__team-row h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    overflow-wrap: anywhere;
}

.xc-dk__team-row h2 .xc-dk__hint {
    font-size: 15px;
    font-weight: 500;
}

.xc-dk__team-row .xc-dk__art-main p { margin: 0; overflow-wrap: anywhere; }

/* Why this one has no buttons, said where they would be. */
.xc-dk__team-row .xc-dk__art-acts > .xc-dk__hint {
    max-inline-size: 30ch;
    text-align: end;
    text-wrap: balance;
}

@container xc-dk-page (max-width: 700px) {
    .xc-dk__team-row .xc-dk__art-acts > .xc-dk__hint {
        max-inline-size: none;
        text-align: start;
    }
}

/* ── the channels a lead adds ──────────────────────────────────────────
 *
 * Every channel as one of the articles' rows, in its own colour
 * (screens/desk/channels), and the colour a lead chooses for one they add:
 * the support palette's, as dots, the chosen one ringed in itself.
 */

.xc-dk__chan-row { align-items: center; }

.xc-dk__chan-row .xc-dk__art-acts > .xc-dk__hint {
    max-inline-size: 26ch;
    text-align: end;
    text-wrap: balance;
}

.xc-dk__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 2px;
}

.xc-dk__swatch {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.xc-dk__swatch input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.xc-dk__swatch-dot {
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    background: rgb(var(--hue));
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px transparent;
    transition: box-shadow 150ms;
}

.xc-dk__swatch input:checked + .xc-dk__swatch-dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px rgb(var(--hue)); }

.xc-dk__swatch input:focus-visible + .xc-dk__swatch-dot {
    outline: 2px solid rgb(var(--hue));
    outline-offset: 7px;
}

@container xc-dk-page (max-width: 700px) {
    .xc-dk__chan-row .xc-dk__art-acts > .xc-dk__hint {
        max-inline-size: none;
        text-align: start;
    }
}

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

/* Where the page is drawn narrow: one column, and an article's buttons
 * under what it says. */
@container xc-dk-page (max-width: 880px) {
    .xc-dk__art-edit { grid-template-columns: minmax(0, 1fr); }
}

@container xc-dk-page (max-width: 700px) {
    .xc-dk__page--wide .xc-dk__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .xc-dk__art-head { grid-template-columns: minmax(0, 1fr); }

    .xc-dk__art { grid-template-columns: auto minmax(0, 1fr); }

    .xc-dk__art-acts {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }

    .xc-dk__art-starter { grid-template-columns: auto minmax(0, 1fr); }

    .xc-dk__art-starter .xc-dk__btn {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

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