/**
 * Desk — the small amount of styling that is Desk's own on a customer page.
 *
 * Everything else — the heading, the list, the empty state, the buttons —
 * comes from the shared portal shell, so these pages match every other
 * portal page and follow any change made there.
 *
 * WHAT IS LEFT HERE, AND WHY IT CANNOT BE SHARED
 * ---------------------------------------------------------------------
 * A ticket's status colour is not one of the theme's labels. It is chosen
 * by the workspace, per status, and stored with it — so it is a colour this
 * platform cannot know in advance and Theme Studio cannot own.
 *
 * The theme studies settled the rule for exactly this case: something that
 * only exists in relation to its surroundings — a chip taking a colour of
 * its own — is TINTED, and its label is printed in the theme's own readable
 * text colour. It is never given a fixed pairing. That is what happens
 * below: the workspace's hue arrives on the element as a custom property,
 * is used at low strength for the fill and the edge, and the writing stays
 * the theme's own quiet colour, which is readable by construction.
 *
 * Before this, the status was printed IN its own colour on the page's own
 * background — a workspace choosing a pale yellow got writing nobody could
 * read, on every theme.
 *
 * Namespace: dkx-* — grep-verified unused. No !important, no colour of our
 * own decided here.
 */

.dkx-status {
    border: 1px solid transparent;
}

/* The workspace's hue, used only as a tint. Guarded, so a browser without
   colour mixing simply gets the shell's plain quiet chip rather than
   nothing — which is exactly what the chip looked like before. */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
    .dkx-status[style*="--dkx-hue"] {
        background: color-mix(in srgb, var(--dkx-hue) 16%, transparent);
        border-color: color-mix(in srgb, var(--dkx-hue) 42%, transparent);
    }
}

/* ── One question, and everything said about it ──────────────────────── */
/* The conversation. Each message is its own block with a line between, in
   the order it happened. No colour is decided here: who said it is carried
   by the words and by the platform's own label beside a staff name, not by
   a coloured bubble that would have to read on every theme. */
.dkx-thread { padding-top: 6px; padding-bottom: 6px; }

.dkx-msg {
    padding: 16px 0;
    border-top: 1px solid var(--pd-cd-card-border, var(--at-color-border, #c1c7cf));
}
.dkx-msg:first-child { border-top: 0; padding-top: 4px; }

.dkx-msg-who {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}
.dkx-msg-when { font-size: 12px; margin-left: auto; }

/* Ours is set a little in from the edge on anything wider than a phone, so
   a long thread can be read at a glance as a back-and-forth rather than one
   undifferentiated column. Indentation, not colour — it costs nothing on a
   dark theme and nothing to somebody who cannot tell two hues apart. */
.dkx-file { margin: 10px 0 0; font-size: 13px; }
.dkx-file i { margin-right: 6px; }

.dkx-kb { display: block; margin-top: 4px; }

.dkx-btn {
    min-height: 44px;
    padding-left: 16px;
    padding-right: 16px;
    border: 1px solid var(--pd-cd-card-border, var(--at-color-border, #c1c7cf));
    border-radius: 10px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
}
.dkx-btn:hover,
.dkx-btn:focus { border-color: var(--at-color-ring, var(--at-color-primary, #2563eb)); }

.dkx-stars { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); }
.dkx-say { margin-top: 14px; }
.dkx-reply { min-height: 150px; }

@media (min-width: 768px) {
    .dkx-msg-ours { padding-inline-start: 22px; }
}

/* Suggestions that appear as somebody types, and the file picker under the
   message. Both are spacing only — the shell paints them. */
.dkx-live:not(:empty) { margin-top: 14px; }
.dkx-files { margin-top: 16px; }