/*
 * A support conversation, on either panel.
 *
 * Plain CSS for the same reason as contact.css and service-page.css: neither panel
 * has a Vite build and both serve Filament's pre-compiled app.css, so
 * `class="flex gap-4"` written in a Blade view is inert markup. Anything bespoke
 * brings its own rules.
 *
 * The first stylesheet registered on *both* panels, because one partial renders on
 * both — resources/views/filament/components/ticket-thread.blade.php. In
 * ClientPanelProvider and in AdminPanelProvider:
 *
 *     Css::make('tickets', resource_path('css/tickets.css'))
 *
 * which `php artisan filament:assets` copies to public/css/app/tickets.css. Editing
 * this file therefore needs that command re-run — composer's post-autoload-dump does
 * it too, by way of `filament:upgrade`.
 *
 * Every colour is a variable FilamentColor writes into :root at runtime (--gray-*,
 * --primary-*, --warning-*) and every size comes from the theme block in app.css
 * (--radius-xl, --text-sm), so a thread tracks whichever palette the operator chose
 * and its dark mode rather than defining a second one. That matters more here than
 * elsewhere: the two panels can be branded to different primaries, and this file is
 * the one thing they share.
 *
 * The namespace is `tk-`, kept apart from `ct-`, `wl-`, `oc-` and `sv-` because all
 * of them load on every client page and a shared prefix would let a rule written for
 * a ticket silently restyle a server.
 *
 * Three kinds of message, told apart by tint and nothing else — no avatars, no
 * alternating sides. A thread is read top to bottom and the question "who said this"
 * is answered by the name printed above the words.
 */

.tk-thread {
    display: grid;
    gap: 0.75rem;
}

/* ------------------------------------------------------------------ *
 * The messages
 * ------------------------------------------------------------------ */

.tk-messages {
    display: grid;
    gap: 0.75rem;
    /* An <ol> for the reason the markup uses one — this is an ordered sequence —
       so the browser's own list styling has to be undone. */
    margin: 0;
    padding: 0;
    list-style: none;
}

.tk-message {
    display: grid;
    gap: 0.5rem;
    padding: 0.875rem 1.125rem 1rem;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--color-white, #fff);
    box-shadow:
        0 0 0 1px var(--gray-200),
        0 1px 2px 0 rgb(0 0 0 / 4%);
}

.dark .tk-message {
    background-color: var(--gray-900);
    box-shadow: 0 0 0 1px var(--gray-700);
}

/* Ours. Tinted rather than boxed differently, so a long thread still reads as one
   column of cards and the eye picks out the answers by colour. */
.tk-message--staff {
    background-color: color-mix(in oklab, var(--primary-500) 6%, var(--color-white, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-500) 22%, transparent);
}

.dark .tk-message--staff {
    background-color: color-mix(in oklab, var(--primary-500) 12%, var(--gray-900));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-400) 25%, transparent);
}

/* A note nobody outside the building will read, and the strongest tint on the page
   because that is the mistake worth preventing. Only ever rendered on the admin
   panel: the client page filters notes out in the query. */
.tk-message--internal {
    background-color: color-mix(in oklab, var(--warning-500) 10%, var(--color-white, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-500) 30%, transparent);
}

.dark .tk-message--internal {
    background-color: color-mix(in oklab, var(--warning-500) 14%, var(--gray-900));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-400) 32%, transparent);
}

/* ------------------------------------------------------------------ *
 * Who said it, and when
 * ------------------------------------------------------------------ */

.tk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.625rem;
}

.tk-author {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--gray-950);
}

.dark .tk-author {
    color: var(--gray-50);
}

.tk-tag {
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--radius-lg, 0.5rem);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--primary-700);
    background-color: color-mix(in oklab, var(--primary-500) 14%, transparent);
}

.dark .tk-tag {
    color: var(--primary-300);
    background-color: color-mix(in oklab, var(--primary-400) 18%, transparent);
}

.tk-tag--internal {
    color: var(--warning-700);
    background-color: color-mix(in oklab, var(--warning-500) 20%, transparent);
}

.dark .tk-tag--internal {
    color: var(--warning-300);
    background-color: color-mix(in oklab, var(--warning-400) 22%, transparent);
}

/* Pushed to the end of the row: the name is what is scanned for, the time is what
   is glanced at. */
.tk-when {
    margin-inline-start: auto;
    font-size: var(--text-xs, 0.75rem);
    color: var(--gray-500);
    /* There is a full timestamp in the title attribute. */
    cursor: help;
}

.dark .tk-when {
    color: var(--gray-400);
}

/* ------------------------------------------------------------------ *
 * The words themselves
 * ------------------------------------------------------------------ */

/* pre-wrap is doing the work nl2br() would otherwise do, and doing it without
   putting markup anywhere near a customer's own text. `anywhere` because support
   threads carry pasted URLs and 60-character error strings that would otherwise
   push the card wider than the page. */
.tk-body {
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5rem;
    color: var(--gray-700);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dark .tk-body {
    color: var(--gray-200);
}

/* ------------------------------------------------------------------ *
 * Attachments
 * ------------------------------------------------------------------ */

.tk-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.125rem;
}

/* A <button> that has to look like a chip, so the browser's own button styling has
   to be undone first. It is a button because there is no URL: the bytes come back
   from a Livewire call that checks the ticket first. */
.tk-file {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4375rem;
    max-width: 100%;
    padding: 0.3125rem 0.625rem;
    border: 0;
    border-radius: var(--radius-lg, 0.5rem);
    font-family: inherit;
    font-size: var(--text-xs, 0.75rem);
    color: var(--gray-700);
    text-align: start;
    background-color: var(--gray-50);
    box-shadow: inset 0 0 0 1px var(--gray-200);
    cursor: pointer;
}

.tk-file:hover,
.tk-file:focus-visible {
    color: var(--primary-700);
    background-color: color-mix(in oklab, var(--primary-500) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-500) 28%, transparent);
}

.dark .tk-file {
    color: var(--gray-300);
    background-color: color-mix(in oklab, var(--gray-800) 60%, transparent);
    box-shadow: inset 0 0 0 1px var(--gray-700);
}

.dark .tk-file:hover,
.dark .tk-file:focus-visible {
    color: var(--primary-300);
    background-color: color-mix(in oklab, var(--primary-400) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-400) 30%, transparent);
}

/* While the download is being assembled. Livewire sets `disabled` on the one button
   that was pressed, and a disabled chip must not still look pressable. */
.tk-file:disabled {
    opacity: 0.6;
    cursor: progress;
}

.tk-file-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-file-size {
    flex: none;
    font-variant-numeric: tabular-nums;
    color: var(--gray-500);
}

.dark .tk-file-size {
    color: var(--gray-400);
}

/* A row whose file has gone. Still named, still not pressable — a <span>, so there
   is no hover state to remove. */
.tk-file--missing {
    color: var(--gray-500);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--gray-200);
    cursor: default;
}

.tk-file--missing .tk-file-name {
    font-weight: 400;
    text-decoration: line-through;
}

.dark .tk-file--missing {
    color: var(--gray-400);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--gray-700);
}

/* ------------------------------------------------------------------ *
 * The two footnotes
 * ------------------------------------------------------------------ */

.tk-empty {
    font-size: var(--text-sm, 0.875rem);
    color: var(--gray-500);
}

.dark .tk-empty {
    color: var(--gray-400);
}

.tk-closed {
    margin: 0;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-xl, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    color: var(--gray-600);
    background-color: var(--gray-50);
    box-shadow: inset 0 0 0 1px var(--gray-200);
}

.dark .tk-closed {
    color: var(--gray-400);
    background-color: color-mix(in oklab, var(--gray-800) 55%, transparent);
    box-shadow: inset 0 0 0 1px var(--gray-800);
}