/*
 * Support pages.
 *
 * Every value here is lifted from the app rather than invented: the surface,
 * hairline, text and action colours come from dark.css, the 10px/6px radii and
 * Montserrat from style.css.
 *
 * Those dark values were once the only ones, which made the whole section
 * unreadable for anyone on the light theme — near-white text on a near-white
 * page. The palette is now declared light-first on .support with a dark
 * override below, so every rule reads a token and neither theme is a special
 * case. Nothing outside those two blocks should name a colour.
 *
 * The one borrowed idea is the result page's stem edge — .track-card::before
 * runs a 3px colour down each card so four stems are scannable at a glance.
 * The same device carries ticket state here, which is what makes support look
 * like part of MVSEP instead of a helpdesk bolted onto it. Rows stay flat
 * rather than becoming rounded cards, so the edge reads as that vocabulary and
 * not as decoration.
 */

.support {
    /* A raised panel, not the page. #161a26 lifts off #111827 in dark; pure
       white would vanish into a white page, so light gets the same small step. */
    --s-surface: #f6f7fb;
    --s-line: rgba(0, 6, 55, .12);
    --s-text: #0b1020;
    --s-muted: rgba(11, 16, 32, .6);
    --s-link: #1d4ed8;
    --s-link-hover: #1e40af;
    --s-action: #2563eb;
    --s-wash: rgba(0, 6, 55, .03);
    --s-wash-strong: rgba(0, 6, 55, .05);
    --s-focus: #2563eb;
    --s-strong: #0b1020;

    --s-waiting: #b26a00;
    --s-answered: #2e8b57;
    --s-closed: rgba(0, 6, 55, .18);
    --s-unread: #1d4ed8;

    /* The app sets body{display:flex;flex-direction:column}, so this box resolves
       its width from its own content unless pinned — a long subject would then
       push the whole column past the viewport. */
    width: 100%;
    min-width: 0;
    max-width: 44rem;
    margin: 0 auto;
    color: var(--s-text);
}

/* The layout wraps content in .banner, which is text-align:center for the
   landing page. Reading text is not centred. */
.support,
.support * {
    text-align: left;
}

.support__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}

.support__title {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.support__lede {
    margin: 0 0 1.75rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--s-muted);
    max-width: 34rem;
}

.support__lede--tight { margin-bottom: .4rem; }

/* The reported job. The hash is an identifier people copy and compare
   character by character, so it is set in the app's monospace stack and
   breaks anywhere rather than pushing the line wide. */
.support__job {
    margin: 0 0 1.75rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--s-muted);
}

.support__hash {
    display: block;
    margin-top: .25rem;
    font-size: .8125rem;
    /* Bootstrap paints code pink; this is data, not a highlight. */
    color: var(--s-muted);
    word-break: break-all;
}

/* ---------- list ---------- */

.support__list {
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    border-radius: 10px;
    overflow: hidden;
}

.ticket {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: .9rem 1.1rem .9rem 1.35rem;
    border-bottom: 1px solid var(--s-line);
    text-decoration: none;
    color: inherit;
    transition: background-color .12s ease;
}

.support__list .ticket:last-child { border-bottom: 0; }

.ticket:hover,
.ticket:focus-visible {
    background: var(--s-wash-strong);
    color: inherit;
    text-decoration: none;
}

.ticket:focus-visible {
    outline: 2px solid var(--s-focus);
    outline-offset: -2px;
}

/* The state edge — the result page's device, carrying who the ticket waits on. */
.ticket::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ticket-edge, transparent);
}

.ticket--open { --ticket-edge: var(--s-waiting); }
.ticket--answered { --ticket-edge: var(--s-answered); }
.ticket--closed { --ticket-edge: var(--s-closed); }
/* An unread reply outranks the ticket's own state: the edge says what the row wants from you. */
.ticket--unread { --ticket-edge: var(--s-unread); }

.ticket__main { flex: 1; min-width: 0; }

.ticket__subject {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket--unread .ticket__subject { color: var(--s-strong); }

.ticket__meta {
    display: block;
    margin-top: .2rem;
    font-size: .8125rem;
    color: var(--s-muted);
}

.ticket__state {
    flex: none;
    font-size: .8125rem;
    color: var(--s-muted);
    white-space: nowrap;
}

.ticket--unread .ticket__state { color: var(--s-unread); }

.support__empty {
    padding: 2.25rem 1.35rem;
    color: var(--s-muted);
    font-size: .9375rem;
}

/* ---------- thread ---------- */

.thread {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1.5rem 0;
}

.msg {
    max-width: 32rem;
    padding: .65rem .9rem;
    border-radius: 10px;
    font-size: .90625rem;
    line-height: 1.55;
}

.msg__who {
    display: block;
    margin-bottom: .25rem;
    font-size: .75rem;
    color: var(--s-muted);
}

.msg__body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* The squared corner points back at its author — the cue chat interfaces use,
   which saves repeating a name on every message. */
.msg--staff {
    align-self: flex-start;
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    border-bottom-left-radius: 3px;
}

.msg--you {
    align-self: flex-end;
    background: rgba(37, 99, 235, .16);
    border: 1px solid rgba(96, 165, 250, .28);
    border-bottom-right-radius: 3px;
}

.support__note {
    margin: 1.25rem 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--s-muted);
}

/* ---------- forms ---------- */

.support .form-control {
    background: var(--s-wash);
    border: 1px solid var(--s-line);
    border-radius: 6px;
    color: var(--s-text);
    font-size: .9375rem;
}

.support .form-control:focus {
    background: var(--s-wash-strong);
    border-color: var(--s-focus);
    box-shadow: none;
    color: var(--s-text);
}

.support__label {
    display: block;
    margin-bottom: .35rem;
    font-size: .875rem;
    font-weight: 600;
}

.support__field { margin-bottom: 1.25rem; }

.support__confirm {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    border-radius: 10px;
    font-size: .875rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

.support__confirm input { margin-top: .2rem; flex: none; }

.support__actions { display: flex; gap: .75rem; align-items: center; }

.btn-support {
    background: var(--s-action);
    border: 1px solid var(--s-action);
    color: #fff;
    border-radius: 6px;
    padding: .45rem 1.1rem;
    font-size: .875rem;
    font-weight: 600;
}

.btn-support:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

.support__back {
    display: inline-block;
    margin-bottom: .75rem;
    font-size: .8125rem;
    color: var(--s-link);
    text-decoration: none;
}

.support__back:hover { color: var(--s-link-hover); text-decoration: none; }

@media (max-width: 576px) {
    .msg { max-width: 88%; }
    .ticket { padding-left: 1.1rem; align-items: flex-start; }
    /* Too little width to ellipsize usefully — let the subject wrap instead. */
    .ticket__subject { white-space: normal; overflow: visible; }
}

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

/* ---------- message attachments ---------- */

.msg__files {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

/* Thumbnails, not full-bleed: a screenshot should not push the reply off
   screen, and clicking opens the original. */
.msg__file-img img {
    max-width: 14rem;
    max-height: 10rem;
    border-radius: 6px;
    border: 1px solid var(--s-line);
    display: block;
}

.msg__file-audio {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 15rem;
}
.msg__file-audio audio { width: 100%; height: 34px; }
.msg__file-name { font-size: .75rem; opacity: .7; }

.msg__file-link {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .3rem .6rem;
    border: 1px solid var(--s-line);
    border-radius: 6px;
    font-size: .8125rem;
    color: var(--s-link);
    text-decoration: none;
}
.msg__file-link:hover { border-color: var(--s-link); text-decoration: none; }
.msg__file-size { font-size: .6875rem; opacity: .55; }

.support__attach input[type="file"] { font-size: .8125rem; padding: .35rem; }
.support__note--tight { margin: .35rem 0 0; font-size: .75rem; }

/* ---------- stem name overrides ----------
   The profile's stem-names page reuses this shell, so these rows read the
   same tokens and inherit both themes without a second palette. */

.stem-alias {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .6rem 0;
    border-top: 1px solid var(--s-line);
}

.stem-alias__canonical { min-width: 9rem; font-size: .875rem; font-weight: 600; }
.stem-alias__arrow { opacity: .45; }
.stem-alias__input { flex: 1 1 12rem; max-width: 18rem; }

.stem-alias__reset {
    border: 0;
    background: transparent;
    color: var(--s-muted);
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
    padding: .2rem .3rem;
}
.stem-alias__reset:hover { color: var(--s-text); }

/* Search results sit under the box; only ever a handful, so no scrolling. */
.stem-name-results { display: flex; flex-direction: column; margin-top: .35rem; }

.stem-name-result {
    text-align: left;
    border: 1px solid var(--s-line);
    border-bottom: 0;
    background: var(--s-surface);
    color: inherit;
    font: inherit;
    font-size: .875rem;
    padding: .45rem .7rem;
    cursor: pointer;
}
.stem-name-result:last-child { border-bottom: 1px solid var(--s-line); }
.stem-name-result:hover { background: var(--s-wash-strong); }

/* Dark theme: the palette these pages were originally built against. Only the
   tokens change — every rule above is already written in terms of them. */
[data-theme="dark"] .support {
    --s-surface: #161a26;
    --s-line: rgba(255, 255, 255, .08);
    --s-text: #e5e7eb;
    --s-muted: rgba(229, 231, 235, .55);
    --s-link: #93c5fd;
    --s-link-hover: #bfdbfe;
    --s-action: #2563eb;
    --s-wash: rgba(255, 255, 255, .03);
    --s-wash-strong: rgba(255, 255, 255, .05);
    --s-focus: #60a5fa;
    --s-strong: #ffffff;

    --s-waiting: #e0a33f;
    --s-answered: #3fae74;
    --s-closed: rgba(255, 255, 255, .18);
    --s-unread: #60a5fa;
}