/* ── the help panel ─────────────────────────────────────────────────────
 * The round button in the corner of every screen, and the sheet it opens
 * (layout/partials/help-panel, screens/tickets, modules/tickets.js).
 *
 * Its own file, with its own prefix (.xc-tk), for the reason every sheet
 * after shell.css has one: a new class name in a four-thousand-line file is
 * a collision waiting to happen (scripts/cssclash.php).
 *
 * ── The support screens' own rules ─────────────────────────────────────
 *
 *   Nothing under 15px. A person reading this has a problem; small grey
 *   type is the wrong thing to hand them.
 *   No gradient. Buttons are flat, in the colour of the reader's own
 *   bubble (--mine / --onmine), as the usage page's are.
 *   Never WhatsApp's green: "resolved" is the console's own (--green).
 *   Logical properties throughout, so Arabic mirrors without a second rule.
 */

/* ── the support palette ────────────────────────────────────────────────
 * Seven colours, shared by the client's panel and our own desk (desk.css),
 * so a ticket is recognised by its colour before a word of it is read: one
 * per category, per status and per priority (TicketCategory::hue,
 * TicketStatus::hue, TicketPriority::hue).
 *
 * An element says which with data-tk-hue and reads it back as --hue, an
 * "r, g, b" triple like --brand and --ink, for use inside rgb() and rgba():
 *
 *     background: rgba(var(--hue), .12);  color: rgb(var(--hue));
 *
 * Each has a deep value for words on a light surface and a bright one for a
 * dark surface: chosen to be read at 15px on its own 12% tint, which the
 * theme's --amber on white is not. --tk-on is what is written on a solid
 * one. WhatsApp's own category is sky: never its green.
 */
:root {
    --tk-brand: var(--brand);
    --tk-teal: 0, 128, 106;
    --tk-amber: 150, 94, 14;
    --tk-rose: 190, 40, 70;
    --tk-sky: 3, 105, 161;
    --tk-violet: 118, 60, 220;
    --tk-slate: 88, 92, 112;
    --tk-on: 255, 255, 255;
}

:root[data-theme="dark"],
[data-theme="dark"],
[data-tk-night] {
    --tk-brand: 143, 143, 247;
    --tk-teal: 45, 212, 170;
    --tk-amber: 240, 180, 80;
    --tk-rose: 251, 133, 155;
    --tk-sky: 96, 200, 250;
    --tk-violet: 196, 150, 255;
    --tk-slate: 176, 180, 200;
    --tk-on: 20, 20, 43;
}

[data-tk-hue],
[data-tk-hue="brand"] { --hue: var(--tk-brand); }
[data-tk-hue="teal"] { --hue: var(--tk-teal); }
[data-tk-hue="amber"] { --hue: var(--tk-amber); }
[data-tk-hue="rose"] { --hue: var(--tk-rose); }
[data-tk-hue="sky"] { --hue: var(--tk-sky); }
[data-tk-hue="violet"] { --hue: var(--tk-violet); }
[data-tk-hue="slate"] { --hue: var(--tk-slate); }

/* ── the button ─────────────────────────────────────────────────────────
 * Above the phone's tab bar (z 44), under the drawer's scrim (69) and the
 * toasts (900). The corner is shared: toasts stack above it rather than on
 * it, and a screen with a control of its own there lifts it clear.
 */
.xc-tk-fab {
    /* How far up from the foot of the window it rests, and how far a screen
     * with a control of its own in that corner lifts it (--xc-tk-lift, set
     * by modules/tickets.js from that control's place: the reply box changes
     * height with what the thread allows, and a number guessed here would be
     * right for one of its states). */
    --xc-tk-rest: 22px;
    --xc-tk-up: max(var(--xc-tk-rest), var(--xc-tk-lift, 0px));
    position: fixed;
    z-index: 55;
    inset-block-end: var(--xc-tk-up);
    inset-inline-end: 22px;
    inline-size: 58px;
    block-size: 58px;
    border: 0;
    border-radius: 50%;
    background: var(--mine);
    color: var(--onmine);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
    transition: transform 160ms, box-shadow 160ms;
}

.xc-tk-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}

.xc-tk-fab:focus-visible {
    outline: 3px solid rgba(var(--brand), .55);
    outline-offset: 3px;
}

/* The small star: the first to answer is the assistant. */
.xc-tk-fab__spark {
    box-sizing: border-box;
    position: absolute;
    inset-block-start: -2px;
    inset-inline-end: -2px;
    inline-size: 23px;
    block-size: 23px;
    border-radius: 50%;
    background: var(--surface);
    color: rgb(var(--brand));
    border: 2px solid var(--mine);
    display: grid;
    place-items: center;
}

/* The toasts, above the button and not over it: the same sum, a button
 * higher. */
.xc-tk-fab ~ .xc-toasts {
    inset-block-end: calc(max(22px, var(--xc-tk-lift, 0px)) + 72px);
}

/* Lifted above a reply box, the button is over the end of the conversation
 * that box belongs to: its last line stops short of it, so nothing said is
 * ever under the button. (The inbox's list is styled inline, hence the
 * !important.) */
body:has(.xc-tk-fab) [data-live="messages"] { padding-block-end: 82px !important; }

body:has(.xc-tk-fab) .xc-preview__log { padding-block-end: 82px; }

/* ── the sheet ──────────────────────────────────────────────────────────
 * A panel down the end side, the height of the window, sliding in from it
 * (as the bell's is). [data-modal] in the selector to outrank
 * `dialog[data-modal] { margin: auto }`, which centres every other dialog.
 */
dialog[data-modal].xc-tk-host {
    margin-block: 0;
    margin-inline: auto 0;
    block-size: 100dvh;
    max-block-size: 100dvh;
    inline-size: min(440px, 100vw);
    max-inline-size: 100vw;
}

dialog.xc-tk-host .xc-sheet {
    /* Its border inside its height: the stylesheets have no global reset, and
     * two pixels over is a scrollbar down the whole panel. */
    box-sizing: border-box;
    block-size: 100%;
    max-block-size: none;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end: 0;
    animation: xc-tk-in 260ms cubic-bezier(.2, .8, .25, 1);
}

@keyframes xc-tk-in {
    from { transform: translateX(calc(100% * var(--xc-flip))); }
    to { transform: none; }
}

/* The conversation pads itself: its bar and its reply box run edge to edge. */
dialog.xc-tk-host .xc-tk__body {
    padding: 0;
    gap: 0;
}

.xc-tk__icon {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 15px;
    background: var(--mine);
    color: var(--onmine);
    display: grid;
    place-items: center;
    flex: none;
}

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

.xc-tk__titles h2 {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -0.01em;
}

.xc-tk__titles p {
    margin: 0;
    font-size: 15px;
    color: rgba(var(--ink), .62);
}

/* ── what is in it ──────────────────────────────────────────────────── */

/* Everything in the panel measures itself with its padding and border in:
 * there is no global reset for that here, and a row at 100% with padding is
 * a row wider than its box. */
.xc-tk,
.xc-tk * { box-sizing: border-box; }

.xc-tk {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px 20px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
}

.xc-tk p { margin: 0; }

.xc-tk__wait {
    margin: 0;
    padding: 20px;
    font-size: 15px;
    color: rgba(var(--ink), .6);
}

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

.xc-tk__hint { color: rgba(var(--ink), .66); }

.xc-tk__fine { color: rgba(var(--ink), .55); }

.xc-tk__error { color: var(--x-error, #b83636); font-weight: 500; }

/* The assistant's mark, and our team's: a small disc, the assistant's in the
 * brand's tint and a person's in the colour it names (data-tk-hue). */
.xc-tk__mark {
    inline-size: 24px;
    block-size: 24px;
    border-radius: 50%;
    background: rgba(var(--brand), .12);
    color: rgb(var(--brand));
    display: inline-grid;
    place-items: center;
    flex: none;
}

.xc-tk__mark[data-tk-hue] {
    background: rgba(var(--hue), .14);
    color: rgb(var(--hue));
}

/* A topic's mark and a ticket's: its icon on a tint of its colour. */
.xc-tk__glyph {
    inline-size: 38px;
    block-size: 38px;
    border-radius: 12px;
    background: rgba(var(--hue), .13);
    color: rgb(var(--hue));
    display: grid;
    place-items: center;
    flex: none;
}

/* A category said in words, in its colour. */
.xc-tk__tag {
    color: rgb(var(--hue));
    font-weight: 600;
}

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

/* The greeting: the assistant's, on a tint of its own. */
.xc-tk__hello {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid rgba(var(--brand), .16);
    border-radius: 16px;
    background: rgba(var(--brand), .05);
}

.xc-tk__hello .xc-tk__mark {
    inline-size: 36px;
    block-size: 36px;
}

.xc-tk__hello-says {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

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

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

/* What it is about, to tap. */
.xc-tk__topics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.xc-tk__topic {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    transition: border-color 160ms, background 160ms;
}

/* Each in the colour of where it leads. */
.xc-tk__topic:hover {
    border-color: rgba(var(--hue), .55);
    background: rgba(var(--hue), .06);
}

/* The box to write in: a pill, with the send button inside its end. */
.xc-tk__box {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-block: 6px;
    padding-inline: 14px 6px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    transition: border-color 160ms;
}

.xc-tk__box:focus-within { border-color: rgba(var(--brand), .6); }

.xc-tk__box textarea {
    flex: 1;
    min-inline-size: 0;
    max-block-size: 150px;
    padding-block: 8px;
    padding-inline: 0;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    line-height: 1.45;
}

.xc-tk__send {
    appearance: none;
    inline-size: 38px;
    block-size: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--mine);
    color: var(--onmine);
    display: grid;
    place-items: center;
    flex: none;
    cursor: pointer;
    transition: opacity 160ms;
}

/* The arrow points the way the writing runs. */
[dir="rtl"] .xc-tk__send svg,
[dir="rtl"] .xc-tk__back svg { transform: scaleX(-1); }

.xc-tk__link {
    appearance: none;
    padding: 4px 0;
    border: 0;
    background: none;
    color: rgb(var(--brand));
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
}

.xc-tk__link:hover { text-decoration: underline; }

/* Somebody's tickets. */
.xc-tk__mine {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--line);
}

.xc-tk__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xc-tk__row {
    appearance: none;
    inline-size: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    text-align: start;
    cursor: pointer;
    transition: border-color 160ms;
}

.xc-tk__row:hover {
    border-color: rgba(var(--hue), .55);
    background: rgba(var(--hue), .04);
}

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

.xc-tk__row-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.xc-tk__row-sub { color: rgba(var(--ink), .6); }

/* Where a ticket stands: its status's colour (TicketStatus::hue) and a dot,
 * from the palette, so each reads on a dark surface as on a light one. */
.xc-tk__pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(var(--hue), .12);
    color: rgb(var(--hue));
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

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

.xc-tk__pages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(var(--ink), .6);
}

.xc-tk__step {
    appearance: none;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.xc-tk__step:disabled {
    opacity: .45;
    cursor: default;
}

/* ── a conversation ─────────────────────────────────────────────────── */

.xc-tk--thread { padding-block-start: 0; }

/* Back, what it is, where it stands: held at the top while the lines run
 * under it. */
.xc-tk__bar {
    position: sticky;
    /* Under the sheet's own head where that sticks too — on a phone, where
     * the sheet itself scrolls. Its height is measured (modules/tickets.js):
     * it wraps differently in each language. */
    inset-block-start: var(--xc-tk-top, 0px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline: -20px;
    padding: 12px 20px;
    background: var(--surface);
    border-block-end: 1px solid var(--line);
    /* Over the seam under the sheet's head: at a fraction of a pixel the
     * line scrolling beneath showed through as a sliver of colour. */
    box-shadow: 0 -3px 0 var(--surface);
}

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

.xc-tk__back:hover { background: rgba(var(--ink), .1); }

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

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

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

.xc-tk__about .xc-tk__tag { color: rgb(var(--hue)); }

.xc-tk__log {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Empty and out of the way until a conversation is being opened; then the
 * rest of the first view makes way for its first line (modules/tickets.js). */
.xc-tk__log[hidden] { display: none; }

.xc-tk[data-tk-starting] > :not([data-tk-log]) { display: none; }

/* What the team was sent, under its category's colour. */
.xc-tk__sent {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-block-start: 3px solid rgb(var(--hue));
    border-radius: 14px;
    background: var(--surface-2);
}

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

.xc-tk__line {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-inline-size: 88%;
}

.xc-tk__line--me {
    align-self: flex-end;
    align-items: flex-end;
}

.xc-tk__line--them {
    align-self: flex-start;
    align-items: flex-start;
}

.xc-tk__who {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(var(--ink), .66);
    font-weight: 500;
}

.xc-tk__bubble {
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(var(--ink), .06);
    color: var(--text);
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

.xc-tk__line--them .xc-tk__bubble { border-end-start-radius: 6px; }

.xc-tk__line--me .xc-tk__bubble {
    border-end-end-radius: 6px;
    background: var(--mine);
    color: var(--onmine);
}

/* A person of ours answering: told from the assistant by its colour too. */
.xc-tk__line[data-tk-team] .xc-tk__bubble { background: rgba(var(--tk-teal), .11); }

.xc-tk__line[data-tk-team] .xc-tk__who {
    color: rgb(var(--tk-teal));
    font-weight: 600;
}

/* Waiting to be answered: the line just sent, and the dots after it. */
.xc-tk__line[data-tk-pending] { opacity: .85; }

.xc-tk__when { color: rgba(var(--ink), .5); }

/* Answers to tap, under the assistant's question. */
.xc-tk__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-block-start: 2px;
}

.xc-tk__option {
    appearance: none;
    padding: 7px 14px;
    border: 1px solid rgba(var(--brand), .45);
    border-radius: 20px;
    background: transparent;
    color: rgb(var(--brand));
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    transition: background 160ms;
}

.xc-tk__option:hover { background: rgba(var(--brand), .09); }

/* Something that happened, said in the middle: not anybody's words. */
.xc-tk__event {
    align-self: center;
    max-inline-size: 92%;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(var(--ink), .05);
    color: rgba(var(--ink), .7);
    text-align: center;
}

/* The summary to check, or the request written by hand. */
.xc-tk__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(var(--brand), .35);
    border-radius: 16px;
    background: rgba(var(--brand), .04);
}

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

.xc-tk__card textarea,
.xc-tk__card select {
    inline-size: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
}

.xc-tk__card textarea { resize: vertical; min-block-size: 110px; }

.xc-tk__card textarea:focus-visible,
.xc-tk__card select:focus-visible {
    outline: 2px solid rgba(var(--brand), .55);
    outline-offset: 1px;
}

/* The one button that sends: flat, as every button here is. */
.xc-tk__go {
    appearance: none;
    align-self: flex-start;
    padding: 11px 20px;
    border: 0;
    border-radius: 12px;
    background: var(--mine);
    color: var(--onmine);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 160ms;
}

.xc-tk__go:hover,
.xc-tk__send:hover { opacity: .88; }

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

/* The reply box of a conversation: held at the foot, on its own ground, so
 * the lines run under it and not behind it. */
.xc-tk--thread .xc-tk__compose {
    position: sticky;
    inset-block-end: 0;
    z-index: 2;
    margin-inline: -20px;
    margin-block-end: -20px;
    padding: 12px 20px 16px;
    background: var(--surface);
    border-block-start: 1px solid var(--line);
}

/* While a request is on its way: nothing can be sent twice. */
.xc-tk[data-tk-busy] button,
.xc-tk[data-tk-busy] textarea,
.xc-tk[data-tk-busy] select {
    pointer-events: none;
}

.xc-tk[data-tk-busy] .xc-tk__go,
.xc-tk[data-tk-busy] .xc-tk__send,
.xc-tk[data-tk-busy] .xc-tk__topic,
.xc-tk[data-tk-busy] .xc-tk__option { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
    dialog.xc-tk-host .xc-sheet { animation: none; }
    .xc-tk-fab { transition: none; }
}

/* ── a phone ────────────────────────────────────────────────────────────
 * The button above the tab bar; the sheet the whole height of the screen,
 * over the tab bar, with a sliver of the page left showing so it still
 * reads as a sheet (as the bell's does). The sheet itself scrolls here
 * (responsive.css), so the bar and the reply box hold to its edges.
 */
@media (max-width: 820px) {
    .xc-tk-fab {
        --xc-tk-rest: calc(78px + env(safe-area-inset-bottom));
        inset-inline-end: 14px;
        inline-size: 52px;
        block-size: 52px;
    }

    .xc-tk-fab ~ .xc-toasts {
        inset-block-end: calc(max(78px + env(safe-area-inset-bottom), var(--xc-tk-lift, 0px)) + 62px);
    }

    body:has(.xc-tk-fab) [data-live="messages"] { padding-block-end: 76px !important; }

    dialog.xc-tk-host.xc-sheet-host {
        block-size: calc(100dvh - 12px - env(safe-area-inset-top)) !important;
        max-block-size: none !important;
    }

    dialog.xc-tk-host .xc-sheet {
        block-size: 100% !important;
        max-block-size: none !important;
        border-radius: 22px 22px 0 0 !important;
        border-inline-end: 1px solid var(--line);
    }

    dialog.xc-tk-host .xc-tk__body {
        padding: 0 !important;
        gap: 0 !important;
        flex: 1 !important;
        display: flex;
        flex-direction: column;
    }

    .xc-tk { padding-inline: 16px; }

    .xc-tk__bar { margin-inline: -16px; padding-inline: 16px; }

    .xc-tk--thread .xc-tk__compose {
        margin-inline: -16px;
        padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    }

    .xc-tk__go { align-self: stretch; min-block-size: 48px; }
}

/* ── when our team has written ──────────────────────────────────────────
 * The number on the button: this person's tickets our team has written on
 * since they last opened them. In the colour the "new" dots are, ringed in
 * the page so it reads on any screen, and in the corner the star is not.
 */
.xc-tk-fab__n {
    box-sizing: border-box;
    position: absolute;
    inset-block-start: -4px;
    inset-inline-start: -4px;
    min-inline-size: 24px;
    block-size: 24px;
    padding: 0 6px;
    border: 2px solid var(--bg);
    border-radius: 12px;
    background: rgb(var(--tk-rose));
    color: rgb(var(--tk-on));
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

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

/* A ticket our team has written on since it was last opened: heavier, and a
 * dot on its mark. */
.xc-tk__row[data-tk-fresh] .xc-tk__row-top strong { font-weight: 700; }

.xc-tk__row[data-tk-fresh] .xc-tk__glyph { position: relative; }

.xc-tk__row[data-tk-fresh] .xc-tk__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(--tk-rose));
}

/* ── "was this solved?" ─────────────────────────────────────────────────
 * Asked when our team calls a ticket resolved: in the colour of resolved,
 * with yes as the button that does the thing and no beside it.
 */
.xc-tk__ask {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid rgba(var(--tk-teal), .35);
    border-radius: 16px;
    background: rgba(var(--tk-teal), .07);
}

.xc-tk__ask-mark {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: rgba(var(--tk-teal), .16);
    color: rgb(var(--tk-teal));
    display: grid;
    place-items: center;
}

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

.xc-tk__ask-says strong {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.xc-tk__ask > .xc-tk__error,
.xc-tk__ask-acts { grid-column: 1 / -1; }

.xc-tk__ask-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Yes is the colour of resolved; no stays quiet beside it. */
.xc-tk__go--yes {
    align-self: auto;
    background: rgb(var(--tk-teal));
    color: rgb(var(--tk-on));
}

.xc-tk__ask .xc-tk__step {
    padding: 11px 18px;
    border-radius: 12px;
    font-weight: 500;
}

/* ── a ticket's own page ────────────────────────────────────────────────
 * Opened from an email without signing in (screens/tickets/status): one
 * card on the page's ground, under our name. The conversation in it is
 * drawn as the panel draws it.
 */
.xc-ts-body {
    margin: 0;
    min-block-size: 100vh;
    background: var(--bg);
    color: var(--text);
}

.xc-ts {
    inline-size: min(680px, 100%);
    margin-inline: auto;
    padding: 28px 16px 40px;
    gap: 16px;
}

.xc-ts__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 17px;
}

.xc-ts__brand svg { color: rgb(var(--brand)); }

.xc-ts__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    border-block-start: 4px solid rgb(var(--hue));
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 18px 44px rgba(var(--scrim), .08);
}

.xc-ts__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

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

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

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

.xc-ts__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-ts__log {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xc-ts__ask .xc-ts__yes,
.xc-ts__ask .xc-ts__no { grid-column: 1 / -1; }

.xc-ts__no {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-block-start: 12px;
    border-block-start: 1px dashed rgba(var(--tk-teal), .4);
}

.xc-ts__no .xc-tk__field { inline-size: 100%; }

.xc-ts__no textarea {
    inline-size: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
}

.xc-ts__foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--line);
}

.xc-ts__open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 12px;
    background: var(--mine);
    color: var(--onmine);
    font-weight: 600;
    text-decoration: none;
    transition: opacity 160ms;
}

.xc-ts__open:hover {
    opacity: .88;
    color: var(--onmine);
}

[dir="rtl"] .xc-ts__open svg { transform: scaleX(-1); }

.xc-ts__private {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: rgba(var(--ink), .55);
}

.xc-ts__private svg {
    flex: none;
    margin-block-start: 3px;
}

@media (max-width: 820px) {
    .xc-ts { padding: 18px 12px 32px; }

    .xc-ts__card { padding: 16px; }

    .xc-ts__head { flex-wrap: wrap; }

    .xc-ts__open {
        align-self: stretch;
        justify-content: center;
        min-block-size: 48px;
    }
}

/* ── what goes with a message ───────────────────────────────────────────
 * Screenshots, files, a voice note (Helpdesk\Files, modules/tickets.js).
 * The paperclip and the microphone sit in the box beside "send"; what is
 * waiting to go sits in a tray above it, each thing with the way to take it
 * back.
 */
.xc-tk__tool {
    appearance: none;
    inline-size: 38px;
    block-size: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(var(--ink), .62);
    display: grid;
    place-items: center;
    flex: none;
    cursor: pointer;
    transition: background 160ms, color 160ms;
}

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

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

/* The microphone, while it is on. */
form[data-tk-recording] [data-tk-record] {
    background: rgba(var(--tk-rose), .14);
    color: rgb(var(--tk-rose));
}

/* A request written by hand has no box to put them in: a row of their own. */
.xc-tk__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.xc-tk__tools .xc-tk__tool {
    border: 1px solid var(--line);
    background: var(--surface);
}

.xc-tk__tray {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-block-end: 8px;
}

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

.xc-tk__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-inline-size: 100%;
    padding-block: 5px;
    padding-inline: 5px 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

/* A picture as itself; anything else under its icon. */
.xc-tk__chip-pic {
    inline-size: 34px;
    block-size: 34px;
    border-radius: 9px;
    background: rgba(var(--brand), .1) center / cover no-repeat;
    color: rgb(var(--brand));
    display: grid;
    place-items: center;
    flex: none;
}

.xc-tk__chip-pic svg { display: none; }

.xc-tk__chip[data-kind="file"] .xc-tk__chip-pic svg[data-kind="file"],
.xc-tk__chip[data-kind="voice"] .xc-tk__chip-pic svg[data-kind="voice"] { display: block; }

.xc-tk__chip[data-kind="voice"] .xc-tk__chip-pic {
    background-color: rgba(var(--tk-teal), .14);
    color: rgb(var(--tk-teal));
}

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

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

.xc-tk__chip-x {
    appearance: none;
    inline-size: 28px;
    block-size: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--ink), .06);
    color: rgba(var(--ink), .7);
    display: grid;
    place-items: center;
    flex: none;
    cursor: pointer;
}

.xc-tk__chip-x:hover {
    background: rgba(var(--tk-rose), .14);
    color: rgb(var(--tk-rose));
}

/* While the microphone is on: how long, keep it, or throw it away. */
.xc-tk__rec {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-block-end: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(var(--tk-rose), .35);
    border-radius: 14px;
    background: rgba(var(--tk-rose), .07);
}

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

.xc-tk__rec-dot {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: rgb(var(--tk-rose));
    flex: none;
    animation: xc-tk-rec 1.1s ease-in-out infinite;
}

@keyframes xc-tk-rec {
    50% { opacity: .25; }
}

.xc-tk__rec-says {
    flex: 1;
    min-inline-size: 0;
    font-weight: 500;
}

.xc-tk__rec-says b {
    margin-inline-start: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 500;
}

.xc-tk__rec .xc-tk__go,
.xc-tk__rec .xc-tk__step {
    align-self: auto;
    padding: 7px 14px;
    border-radius: 10px;
}

/* Something held over the panel: it will be taken wherever it is dropped. */
dialog.xc-tk-host[data-tk-drop] .xc-sheet {
    outline: 3px dashed rgba(var(--brand), .55);
    outline-offset: -8px;
}

/* ── what came with a line ──────────────────────────────────────────────
 * Under the words, or in their place: a picture that opens whole, a voice
 * note that plays here with what was heard in it, a file to download
 * (screens/tickets/files).
 */
.xc-tk__files {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    max-inline-size: 100%;
}

.xc-tk__line--me .xc-tk__files { justify-content: flex-end; }

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

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

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

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

/* What the assistant heard, said as that: a transcript, not their typing. */
.xc-tk__heard {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px dashed rgba(var(--brand), .32);
    border-radius: 10px;
    background: rgba(var(--brand), .05);
    overflow-wrap: anywhere;
}

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

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

.xc-tk__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 160ms;
}

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

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

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

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

/* On the ticket's own page: counted, never shown. */
.xc-ts__files {
    display: flex;
    align-items: center;
    gap: 6px;
}

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

/* ── an answer from a help article ──────────────────────────────────────
 * The assistant may answer from one of our own help articles (Knowledge\
 * Shelf). Under such an answer: where it came from, in the colour the desk
 * keeps its articles in, and — under the newest one — whether it solved it.
 * Yes is the colour of solved; "I still need help" stays quiet beside it,
 * and is never the harder one to find.
 */
.xc-tk__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-tk__source svg {
    flex: none;
    margin-block-start: 3px;
    color: rgb(var(--hue));
}

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

.xc-tk__verdict {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block-start: 4px;
}

.xc-tk__verdict-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.xc-tk__verdict .xc-tk__go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.xc-tk__verdict .xc-tk__step {
    padding: 11px 18px;
    border-radius: 12px;
    font-weight: 500;
}

/* On its way: the two buttons make room for the line being said. */
.xc-tk[data-tk-busy] .xc-tk__verdict { display: none; }

/* The answer a help article settled, said in the middle in its colour. */
.xc-tk__event[data-tk-hue] {
    background: rgba(var(--hue), .11);
    color: rgb(var(--hue));
    font-weight: 500;
}