/* ==========================================================================
   Corenexis Helpdesk - design system
   Brand: --primary #fe5940, --secondary #000b36, typeface Jost
   ========================================================================== */

/* --- Font (self-hosted variable, 300-700) -------------------------------- */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/jost-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/jost-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
    --primary: #fe5940;
    --primary-hover: #ef4429;
    --primary-soft: rgba(254, 89, 64, .12);
    --primary-ring: rgba(254, 89, 64, .28);
    --secondary: #000b36;

    --bg: #f5f6f9;
    --surface: #ffffff;
    --surface-2: #f1f3f7;
    --surface-3: #e9edf4;
    --border: #e2e7f0;
    --border-strong: #cdd5e3;

    --text: #0d1526;
    --text-2: #45526b;
    --text-3: #7a869e;

    --shadow-sm: 0 1px 2px rgba(0, 11, 54, .06);
    --shadow: 0 2px 8px rgba(0, 11, 54, .07);
    --shadow-lg: 0 12px 34px rgba(0, 11, 54, .14);

    --radius-sm: 7px;
    --radius: 10px;
    --radius-lg: 14px;

    --status-new: #fe5940;
    --status-open: #2563eb;
    --status-pending: #d97706;
    --status-on_hold: #64748b;
    --ok: #15a34a;
    --status-closed: #8a95ab;
    --status-spam: #dc2626;

    --prio-low: #64748b;
    --prio-normal: #2563eb;
    --prio-high: #d97706;
    --prio-urgent: #dc2626;

    --success: #15a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #2563eb;

    --sidebar-w: 214px;
    --list-w: 336px;
    --detail-w: 274px;
    --topbar-h: 56px;

    --ease: cubic-bezier(.4, 0, .2, 1);
    color-scheme: light;
}

:root[data-theme='dark'] {
    --primary: #ff6b55;
    --primary-hover: #ff8271;
    --primary-soft: rgba(255, 107, 85, .16);
    --primary-ring: rgba(255, 107, 85, .32);
    --secondary: #000b36;

    --bg: #060a18;
    --surface: #0c1326;
    --surface-2: #131c33;
    --surface-3: #1a2440;
    --border: #1e2942;
    --border-strong: #2c3a58;

    --text: #e9edf6;
    --text-2: #a7b2c8;
    --text-3: #78859e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 10px rgba(0, 0, 0, .45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);

    --status-new: #ff6b55;
    --status-open: #4d86f7;
    --status-pending: #f0a52b;
    --status-on_hold: #8593ad;
    --ok: #35c46e;
    --status-closed: #6f7d96;
    --status-spam: #f2564c;

    --prio-low: #8593ad;
    --prio-normal: #4d86f7;
    --prio-high: #f0a52b;
    --prio-urgent: #f2564c;

    --success: #35c46e;
    --warning: #f0a52b;
    --danger: #f2564c;
    --info: #4d86f7;

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --primary: #ff6b55;
        --primary-hover: #ff8271;
        --primary-soft: rgba(255, 107, 85, .16);
        --primary-ring: rgba(255, 107, 85, .32);
        --bg: #060a18;
        --surface: #0c1326;
        --surface-2: #131c33;
        --surface-3: #1a2440;
        --border: #1e2942;
        --border-strong: #2c3a58;
        --text: #e9edf6;
        --text-2: #a7b2c8;
        --text-3: #78859e;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow: 0 2px 10px rgba(0, 0, 0, .45);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
        --status-open: #4d86f7;
        --status-pending: #f0a52b;
        --status-on_hold: #8593ad;
        --ok: #35c46e;
        --status-closed: #6f7d96;
        --status-spam: #f2564c;
        --prio-low: #8593ad;
        --prio-normal: #4d86f7;
        --prio-high: #f0a52b;
        --prio-urgent: #f2564c;
        --success: #35c46e;
        --warning: #f0a52b;
        --danger: #f2564c;
        --info: #4d86f7;
        color-scheme: dark;
    }
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* [hidden] must win over a display set by a class or an inline style,
   otherwise flex containers stay visible when toggled off from JS. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; vertical-align: middle; }

button, input, select, textarea { font: inherit; color: inherit; }

hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }

::selection { background: var(--primary-soft); }

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

/* --- Utility ------------------------------------------------------------- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.small { font-size: 12.5px; }
.strong { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mono { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; font-size: .92em; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 38px; padding: 0 15px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 14px; font-weight: 500; white-space: nowrap;
    cursor: pointer;
    transition: background .14s var(--ease), border-color .14s var(--ease),
                color .14s var(--ease), transform .08s var(--ease), box-shadow .14s var(--ease);
    user-select: none;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-loading { opacity: .58; pointer-events: none; }

.btn-primary {
    background: var(--primary); border-color: var(--primary); color: #fff;
    box-shadow: 0 1px 2px var(--primary-ring);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

.btn-secondary { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.btn-secondary:hover { background: #001452; border-color: #001452; color: #fff; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.btn-sm { height: 31px; padding: 0 11px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-lg { height: 44px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }

.btn .spinner { display: none; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .btn-label { opacity: .6; }

.spinner {
    width: 14px; height: 14px; flex: none;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Form controls ------------------------------------------------------- */
.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 0; }

.label {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 500; color: var(--text-2);
}
.label .req { color: var(--primary); }

.input, .select, .textarea {
    width: 100%; height: 38px; padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
    appearance: none;
}
.textarea { height: auto; min-height: 92px; padding: 10px 12px; line-height: 1.6; resize: vertical; }

.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
    outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }

.select {
    padding-right: 34px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a869e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}

.hint { margin-top: 6px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.error-text { margin-top: 6px; font-size: 12.5px; color: var(--danger); }
.has-error .input, .has-error .select, .has-error .textarea { border-color: var(--danger); }

.checkbox, .radio { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 14px; }
.checkbox input, .radio input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--primary); cursor: pointer; flex: none; }

.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
    width: 38px; height: 21px; flex: none; border-radius: 11px;
    background: var(--border-strong); transition: background .18s var(--ease); position: relative;
}
.switch-track::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 17px; height: 17px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .18s var(--ease);
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(17px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--primary-ring); }

.input-group { display: flex; }
.input-group .input { border-radius: var(--radius) 0 0 var(--radius); }
.input-group .btn { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }

/* --- Cards, panels ------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.card-head h3 { font-size: 15px; }
.card-body { padding: 18px; }
.card-foot { padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* --- Badges, pills ------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    height: 21px; padding: 0 8px;
    border-radius: 6px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .015em;
    text-transform: capitalize; white-space: nowrap;
    background: var(--surface-3); color: var(--text-2);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Green "this is on / this worked", for the things that are not ticket statuses
   - an active key, a delivered webhook, a verified sender. It used to borrow
   data-status='resolved', which is why removing that status could not simply
   delete the colour. */
.badge.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }

.badge[data-status='new']       { background: color-mix(in srgb, var(--status-new) 14%, transparent);       color: var(--status-new); }
.badge[data-status='open']      { background: color-mix(in srgb, var(--status-open) 14%, transparent);      color: var(--status-open); }
.badge[data-status='pending']   { background: color-mix(in srgb, var(--status-pending) 16%, transparent);   color: var(--status-pending); }
.badge[data-status='on_hold']   { background: color-mix(in srgb, var(--status-on_hold) 16%, transparent);   color: var(--status-on_hold); }
.badge[data-status='closed']    { background: color-mix(in srgb, var(--status-closed) 16%, transparent);    color: var(--status-closed); }
.badge[data-status='spam']      { background: color-mix(in srgb, var(--status-spam) 14%, transparent);      color: var(--status-spam); }

/* "Nobody has answered this yet." Not a status - a ticket can be Open and
   answered, or Open and still waiting on us - so it gets a colour of its own
   rather than borrowing one of the status colours. */
.badge.needs-reply {
    background: color-mix(in srgb, var(--prio-high) 15%, transparent);
    color: var(--prio-high);
}

.badge[data-priority='low']     { background: color-mix(in srgb, var(--prio-low) 16%, transparent);    color: var(--prio-low); }
.badge[data-priority='normal']  { background: color-mix(in srgb, var(--prio-normal) 14%, transparent); color: var(--prio-normal); }
.badge[data-priority='high']    { background: color-mix(in srgb, var(--prio-high) 16%, transparent);   color: var(--prio-high); }
.badge[data-priority='urgent']  { background: color-mix(in srgb, var(--prio-urgent) 14%, transparent); color: var(--prio-urgent); }

.tag {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 8px; border-radius: 6px;
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 12px; color: var(--text-2);
}
.tag button { border: 0; background: none; padding: 0; color: var(--text-3); cursor: pointer; line-height: 1; }
.tag button:hover { color: var(--danger); }

/* --- Avatar -------------------------------------------------------------- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    background: var(--surface-3); color: #fff;
    font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
    text-transform: uppercase; overflow: hidden;
    user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar-lg { width: 46px; height: 46px; font-size: 16px; }

/* --- Tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
    padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 600;
    color: var(--text-3); text-transform: uppercase; letter-spacing: .045em;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }

/* --- App shell ----------------------------------------------------------- */
.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

.sidebar {
    width: var(--sidebar-w); flex: none;
    display: flex; flex-direction: column;
    background: var(--secondary);
    color: #cfd6e6;
    border-right: 1px solid rgba(255, 255, 255, .06);
    z-index: 40;
}
.sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    height: var(--topbar-h); padding: 0 16px; flex: none;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.sidebar-brand img { width: 27px; height: 27px; border-radius: 7px; }
.sidebar-brand .name { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -.01em; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.nav-group + .nav-group { margin-top: 18px; }
.nav-label {
    padding: 0 10px 7px; font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .38);
}
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: #b9c2d6; font-size: 14px; font-weight: 500;
    transition: background .13s var(--ease), color .13s var(--ease);
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--primary); color: #fff; }
.nav-item.active .nav-count { background: rgba(255, 255, 255, .24); color: #fff; }
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .9; }
.nav-item .nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count {
    min-width: 20px; height: 19px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; background: rgba(255, 255, 255, .1);
    font-size: 11px; font-weight: 600; color: #cfd6e6;
}

.sidebar-foot { flex: none; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .07); }
.user-chip {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 7px 8px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: #cfd6e6; cursor: pointer; text-align: left;
    transition: background .13s var(--ease);
}
.user-chip:hover { background: rgba(255, 255, 255, .07); }
.user-chip .meta { flex: 1; min-width: 0; }
.user-chip .n { font-size: 13.5px; font-weight: 500; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .r { font-size: 11.5px; color: rgba(255, 255, 255, .5); text-transform: capitalize; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
    height: var(--topbar-h); flex: none;
    display: flex; align-items: center; gap: 12px;
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    z-index: 30;
}
.topbar h1 { font-size: 17px; font-weight: 600; }
.topbar-search { position: relative; flex: 1; max-width: 440px; }
.topbar-search .input { height: 34px; padding-left: 34px; background: var(--surface-2); border-color: transparent; }
.topbar-search .input:focus { background: var(--surface); border-color: var(--primary); }
.topbar-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-3); pointer-events: none; }

.workspace { flex: 1; display: flex; min-height: 0; overflow: hidden; }

.page { flex: 1; overflow-y: auto; padding: 22px; }
.page-narrow { max-width: 940px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .sub { margin-top: 3px; font-size: 13.5px; color: var(--text-2); }

/* --- Ticket list pane ---------------------------------------------------- */
.list-pane {
    width: var(--list-w); flex: none;
    display: flex; flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    min-height: 0;
}
.list-head {
    flex: none; padding: 9px 12px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 7px;
}
/* Selects share the row instead of each claiming 100% and wrapping. */
.list-head .select {
    height: 31px; width: auto; flex: 1 1 0; min-width: 0;
    font-size: 13px; padding: 0 26px 0 9px; border-radius: var(--radius-sm);
    background-position: right 8px center;
}
.list-head .btn { flex: none; }
.list-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.ticket-row {
    display: block; padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer; color: inherit;
    border-left: 3px solid transparent;
    transition: background .12s var(--ease);
}
.ticket-row:hover { background: var(--surface-2); text-decoration: none; }
.ticket-row.active { background: var(--primary-soft); border-left-color: var(--primary); }
.ticket-row.unread .tr-subject { font-weight: 600; color: var(--text); }
.ticket-row.unread .tr-from { font-weight: 600; }

/* Awaiting a reply. Unread means "not looked at" and is cleared by opening the
   ticket; this means "not answered" and is only cleared by an agent writing
   back, so it has to be the stronger of the two and survive the click. The left
   edge carries it because the bold alone is indistinguishable from unread once
   an agent has opened half the list. */
.ticket-row.awaiting { border-left-color: var(--prio-high); }
.ticket-row.awaiting .tr-subject { font-weight: 600; color: var(--text); }
.ticket-row.awaiting .tr-from { font-weight: 600; color: var(--text); }
.ticket-row.awaiting.active { border-left-color: var(--primary); }

.tr-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.tr-from { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-time { font-size: 11.5px; color: var(--text-3); flex: none; }
.tr-subject { font-size: 13.5px; color: var(--text-2); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-snippet { font-size: 12.5px; color: var(--text-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.tr-ref { font-size: 11px; color: var(--text-3); font-family: ui-monospace, Menlo, monospace; }

/* --- Conversation pane --------------------------------------------------- */
.thread-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }

.thread-head {
    flex: none; padding: 9px 18px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.thread-head .subject { font-size: 15.5px; font-weight: 600; line-height: 1.3; margin-bottom: 3px; }
.thread-head .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }

.thread-toolbar {
    flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 18px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.thread-toolbar .select { height: 31px; font-size: 13px; padding: 0 28px 0 9px; border-radius: var(--radius-sm); width: auto; min-width: 118px; }

.thread-scroll { flex: 1; overflow-y: auto; padding: 14px 18px 18px; overscroll-behavior: contain; }
.thread-inner { max-width: 1000px; margin: 0 auto; }

.msg { margin-bottom: 13px; }
.msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.msg-who { flex: 1; min-width: 0; }
.msg-name { font-size: 13.5px; font-weight: 600; }
.msg-addr { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-time { font-size: 12px; color: var(--text-3); flex: none; }

/* Translate: a quiet button in the message header, and the English version
   shown in the body once it exists (saved, so everyone sees it). */
.msg-translate {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.msg-translate:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.msg-translate:disabled { cursor: progress; opacity: .8; }
.msg-translate.is-working svg { animation: ai-spin 1.4s linear infinite; }
.msg-tr-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: -2px 0 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--border);
    font-size: 12px; color: var(--text-3);
}
.msg-tr-bar svg { color: var(--primary); flex: none; }
.msg-tr-bar.is-en { border-bottom: 0; padding-bottom: 0; margin-bottom: 6px; }
.msg-tr-toggle {
    margin-left: auto; padding: 0; border: 0; background: none;
    color: var(--primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.msg-tr-toggle:hover { text-decoration: underline; }
.msg-tr-text p { margin: 0 0 .7em; }
.msg-tr-text p:last-child { margin-bottom: 0; }

.msg-body {
    padding: 13px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 14.5px; line-height: 1.65;
    overflow-wrap: anywhere;
}
.msg-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.msg-body blockquote {
    margin: 10px 0; padding: 2px 0 2px 13px;
    border-left: 3px solid var(--border-strong); color: var(--text-2);
}
.msg-body pre { background: var(--surface-2); padding: 11px 13px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 13px; }
.msg-body table { max-width: 100%; border-collapse: collapse; }
.msg-body td, .msg-body th { border: 1px solid var(--border); padding: 6px 9px; }

.msg.outbound .msg-body { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 26%, transparent); }

/* An automatic send is still ours, so it keeps the outbound side of the thread;
   it is drained of the accent colour so a page of acknowledgements does not
   read as a page of replies. */
.msg.outbound.automated .msg-body {
    background: var(--surface-2);
    border-color: var(--border);
}
.msg.note .msg-body {
    background: color-mix(in srgb, var(--warning) 11%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 34%, transparent);
}
.msg.note .msg-head::after {
    content: 'Private note'; font-size: 11px; font-weight: 600;
    color: var(--warning); text-transform: uppercase; letter-spacing: .05em;
}

.quoted-toggle {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
    padding: 2px 8px; border: 1px solid var(--border); border-radius: 20px;
    background: var(--surface-2); color: var(--text-3);
    font-size: 11px; cursor: pointer;
}
.quoted-toggle:hover { color: var(--text); }
.quoted-block { display: none; margin-top: 8px; color: var(--text-3); font-size: 13.5px; }
.quoted-block.show { display: block; }

.msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.attach-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); font-size: 12.5px; color: var(--text-2);
    max-width: 260px;
}
.attach-chip:hover { border-color: var(--primary); color: var(--text); text-decoration: none; }
.attach-chip svg { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.attach-chip .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .s { color: var(--text-3); flex: none; font-size: 11.5px; }

.event-line {
    display: flex; align-items: center; gap: 8px;
    margin: 9px 0; font-size: 12.5px; color: var(--text-3);
}
.event-line::before, .event-line::after { content: ''; height: 1px; background: var(--border); flex: 1; }
.event-line span { flex: none; }

/* --- Composer ------------------------------------------------------------ */

/* Collapsed bar. Default state, so the thread owns the vertical space. */
.composer-collapsed {
    flex: none; display: flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    background: var(--surface); border-top: 1px solid var(--border);
}
.composer-open {
    display: flex; align-items: center; gap: 9px; flex: 1;
    height: 38px; padding: 0 14px;
    border: 1px solid var(--border-strong); border-radius: 20px;
    background: var(--surface-2); color: var(--text-3);
    font-size: 14px; text-align: left; cursor: pointer;
    transition: border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
.composer-open:hover { border-color: var(--primary); background: var(--surface); color: var(--text); }
.composer-open svg { flex: none; }
.composer-open span { flex: 1; }
.composer-open kbd {
    flex: none; padding: 1px 6px; border: 1px solid var(--border-strong);
    border-radius: 5px; background: var(--surface);
    font-family: inherit; font-size: 11px; color: var(--text-3);
}

.composer {
    flex: none; background: var(--surface); border-top: 1px solid var(--border);
    padding: 10px 18px 12px;
    animation: composer-in .16s var(--ease);
}
@keyframes composer-in { from { opacity: 0; transform: translateY(6px); } }
.composer-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.composer-tab {
    padding: 5px 13px; border: 0; border-radius: 20px;
    background: transparent; color: var(--text-2);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .13s var(--ease), color .13s var(--ease);
}
.composer-tab:hover { background: var(--surface-2); }
.composer-tab.active { background: var(--primary); color: #fff; }
.composer-tab.active[data-mode='note'] { background: var(--warning); }

.editor {
    min-height: 104px; max-height: 300px; overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); font-size: 14.5px; line-height: 1.65;
    outline: 0;
}
.editor:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.editor[data-empty='true']::before { content: attr(data-placeholder); color: var(--text-3); pointer-events: none; }
.editor.note-mode { background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
/* Drafts arrive as real HTML; show paragraphs and lists the way mail clients will. */
.editor p { margin: 0 0 .75em; }
.editor ul, .editor ol { margin: 0 0 .75em; padding-left: 1.5em; }
.editor li { margin: .15em 0; }
.editor > :last-child { margin-bottom: 0; }

.composer-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.composer-bar .grow { flex: 1; }

/* Sender authentication. The From name and address in a message header are
   attacker-controlled; these show what the mail server actually verified, so a
   spoofed internal-looking sender is visibly not internal. */
.auth-chip {
    flex: none; padding: 1px 7px; border-radius: 5px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    border: 1px solid transparent;
}
.auth-chip.pass    { background: var(--success-soft, #dcfce7); color: var(--success, #166534); }
.auth-chip.suspect { background: var(--danger-soft, #fee2e2);  color: var(--danger, #b91c1c); }
.auth-chip.unknown { background: var(--surface-2); color: var(--text-3); border-color: var(--border); }

/* Automatic or manual, on every outbound message. Same shape as the sender
   auth chip next to it; the automatic one is the one that carries colour,
   because that is the one that means the conversation is still unanswered. */
.origin-chip {
    flex: none; padding: 1px 7px; border-radius: 5px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    border: 1px solid transparent;
}
.origin-chip.auto {
    background: color-mix(in srgb, var(--prio-high) 15%, transparent);
    color: var(--prio-high);
}
.origin-chip.manual { background: var(--surface-2); color: var(--text-3); border-color: var(--border); }

.auth-warning {
    margin: 8px 0 4px; padding: 10px 12px; border-radius: var(--radius);
    border: 1px solid var(--danger, #b91c1c);
    background: var(--danger-soft, #fee2e2);
    color: var(--text); font-size: 13px; line-height: 1.55;
}
.auth-warning ul { margin: 6px 0 0; padding-left: 18px; }
.auth-warning li { margin: 2px 0; }
.auth-origin { margin-top: 6px; font-size: 12.5px; color: var(--text-2); }

/* Undo window. Replaces the send bar rather than sitting under it, so the
   composer does not jump in height at the moment attention is on it. */
.composer-undo {
    display: flex; align-items: center; gap: 12px; margin-top: 10px;
    padding: 10px 12px; border-radius: var(--radius);
    border: 1px solid var(--primary); background: var(--primary-soft);
}
.composer-undo[hidden] { display: none; }
.composer-undo .grow { flex: 1; }
.undo-text { font-size: 13.5px; color: var(--text); }

.undo-ring { position: relative; width: 34px; height: 34px; flex: none; }
.undo-ring svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.undo-ring circle { fill: none; stroke-width: 3; }
.undo-track { stroke: var(--border-strong); }
.undo-progress {
    stroke: var(--primary); stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}
.undo-count {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--primary);
}

/* The countdown is decoration; the number and the Cancel button carry the
   meaning, so drop the animation rather than the information. */
@media (prefers-reduced-motion: reduce) {
    .undo-progress { transition: none; }
}

.editor-toolbar { display: flex; gap: 2px; margin-bottom: 8px; flex-wrap: wrap; }
.editor-toolbar button {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 6px; background: transparent; color: var(--text-2); cursor: pointer;
}
.editor-toolbar button:hover { background: var(--surface-2); color: var(--text); }
.editor-toolbar .sep { width: 1px; height: 18px; background: var(--border); margin: 6px 5px; }

.attach-preview { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }

/* --- Detail sidebar ------------------------------------------------------ */
.detail-pane {
    width: var(--detail-w); flex: none; overflow-y: auto;
    background: var(--surface); border-left: 1px solid var(--border); padding: 16px;
}
.detail-block + .detail-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

/* The address the ticket lives on - it arrived there and every reply goes
   out from it. Theme surface like the rest of the pane; only the product
   chip carries the product's colour (--route-accent, set per ticket). */
.route-card {
    --route-accent: var(--primary);
    margin-bottom: 16px; padding: 12px 13px;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.route-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.route-title {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3);
}
.route-product {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    color: var(--text); background: var(--surface); border: 1px solid var(--border);
}
.route-product::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--route-accent);
}
.route-v { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.route-name { margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.route-name:empty { display: none; }

/* "From <address>" beside the composer tabs. */
.composer-from {
    min-width: 0; margin-left: 8px; padding: 3px 9px; align-self: center;
    font-size: 12.5px; color: var(--text); border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Labelled property control. The selects that used to sit above the
   conversation live here, one per row, each with its own label - which also
   removes the old ambiguity between "enquiry type" and the receiving mailbox. */
.prop + .prop { margin-top: 9px; }
.prop-label {
    display: block; margin-bottom: 4px;
    font-size: 12px; font-weight: 500; color: var(--text-2);
}
.prop .select { height: 33px; font-size: 13.5px; padding: 0 28px 0 10px; border-radius: var(--radius-sm); }
.prop .select:disabled { background: var(--surface-2); color: var(--text-3); }
.detail-block h4 {
    margin-bottom: 9px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em; color: var(--text-3);
}
.detail-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13.5px; }
.detail-row .k { color: var(--text-3); flex: none; }
.detail-row .v { color: var(--text); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* --- Dropdown ------------------------------------------------------------ */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; z-index: 60; min-width: 200px; padding: 5px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .13s var(--ease), transform .13s var(--ease), visibility .13s;
}
.dropdown-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu.right { right: 0; }
.dropdown-menu.up { bottom: calc(100% + 6px); }
.dropdown-menu:not(.up) { top: calc(100% + 6px); }

.dropdown-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text); font-size: 13.5px;
    text-align: left; cursor: pointer;
}
.dropdown-item:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item svg { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.dropdown-sep { height: 1px; margin: 5px 0; background: var(--border); }

/* --- Modal --------------------------------------------------------------- */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(4, 8, 22, .55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 18px;
    opacity: 0; visibility: hidden; transition: opacity .16s var(--ease), visibility .16s;
}
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal {
    width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
    background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    transform: translateY(10px) scale(.99); transition: transform .16s var(--ease);
}
.modal-backdrop.open .modal { transform: none; }
.modal-lg { max-width: 720px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-body { padding: 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--border); }

/* --- Toasts -------------------------------------------------------------- */
.toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 120; display: flex; flex-direction: column; gap: 9px; max-width: 340px; }
.toast {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-lg); font-size: 13.5px;
    animation: toast-in .22s var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
.toast .bar { width: 3px; align-self: stretch; border-radius: 3px; flex: none; background: var(--info); }
.toast.success .bar { background: var(--success); }
.toast.error .bar { background: var(--danger); }
.toast.warning .bar { background: var(--warning); }
.toast .msg { flex: 1; min-width: 0; }

/* --- Empty / loading states ---------------------------------------------- */
.empty { padding: 46px 22px; text-align: center; color: var(--text-3); }
.empty svg { width: 42px; height: 42px; margin-bottom: 12px; opacity: .45; }
.empty h3 { font-size: 15px; color: var(--text-2); margin-bottom: 5px; }
.empty p { font-size: 13.5px; max-width: 340px; margin: 0 auto; }

.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%; border-radius: 6px;
    animation: shimmer 1.3s infinite linear;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.sk-row { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.sk-line { height: 10px; margin-bottom: 7px; }

.page-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: var(--primary); z-index: 200;
    transition: width .2s var(--ease), opacity .3s;
}

/* --- Brand mark ---------------------------------------------------------- */
.brand-mark-swap { display: inline-block; position: relative; flex: none; line-height: 0; }
.brand-mark-swap img { width: 100%; height: 100%; display: block; }
.brand-mark-swap .on-dark { display: none; }

:root[data-theme='dark'] .brand-mark-swap .on-light { display: none; }
:root[data-theme='dark'] .brand-mark-swap .on-dark { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .brand-mark-swap .on-light { display: none; }
    :root:not([data-theme='light']) .brand-mark-swap .on-dark { display: block; }
}

/* --- Auth screens -------------------------------------------------------- */
.auth-wrap {
    min-height: 100vh; min-height: 100dvh;
    display: grid; grid-template-columns: 1fr;
    background: var(--bg);
}

/* Left column: brand story. Hidden below 940px so the form owns the screen. */
.auth-aside {
    display: none;
    position: relative;
    flex-direction: column; justify-content: space-between;
    padding: 44px 48px;
    background:
        radial-gradient(660px 380px at 84% 6%, rgba(254, 89, 64, .30), transparent 66%),
        radial-gradient(520px 420px at 6% 96%, rgba(254, 89, 64, .14), transparent 62%),
        var(--secondary);
    color: #fff;
    overflow: hidden;
}
.auth-aside::after {
    /* Faint grid, keeps the large flat panel from reading as empty. */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
}
.auth-aside > * { position: relative; z-index: 1; }

.auth-aside .lock { display: flex; align-items: center; gap: 12px; }
.auth-aside .lock img { width: 36px; height: 36px; border-radius: 9px; }
.auth-aside .lock span { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

.auth-aside h2 {
    font-size: 30px; font-weight: 600; line-height: 1.25;
    letter-spacing: -.02em; margin-bottom: 14px; max-width: 15ch;
}
.auth-aside p { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .72); max-width: 42ch; }

.auth-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.auth-points li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: rgba(255, 255, 255, .84); }
.auth-points svg { flex: none; margin-top: 2px; color: var(--primary); }

.auth-aside .foot { font-size: 12.5px; color: rgba(255, 255, 255, .42); }

/* Right column: the form. */
.auth-main {
    display: flex; align-items: center; justify-content: center;
    padding: 28px 22px;
    background:
        radial-gradient(760px 420px at 106% -12%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 64%),
        var(--bg);
}

.auth-card {
    width: 100%; max-width: 400px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 18px; box-shadow: var(--shadow);
    padding: 32px 32px 24px;
}

.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.auth-brand .brand-mark-swap, .auth-brand img { width: 34px; height: 34px; border-radius: 9px; }
.auth-brand .t { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }

.auth-card h1 { font-size: 22px; margin-bottom: 6px; letter-spacing: -.02em; }
.auth-card .lead { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin-bottom: 22px; }

.sso-btn {
    display: flex; align-items: center; justify-content: center; gap: 11px;
    width: 100%; height: 46px; padding: 0 18px;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    font-size: 14.5px; font-weight: 500; cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease),
                box-shadow .15s var(--ease), transform .08s var(--ease);
}
.sso-btn:hover {
    background: var(--surface-2); border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring); text-decoration: none;
}
.sso-btn:active { transform: translateY(1px); }
.sso-btn .brand-mark-swap { width: 21px; height: 21px; }

.auth-sep {
    display: flex; align-items: center; gap: 12px; margin: 20px 0;
    color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
}
.auth-sep::before, .auth-sep::after { content: ''; height: 1px; background: var(--border); flex: 1; }

.auth-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border);
    font-size: 13px; color: var(--text-3);
}

.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.label-row a { font-size: 12.5px; }

/* Segmented theme switcher */
.theme-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--surface-2); }
.theme-seg button {
    width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 7px; background: transparent; color: var(--text-3); cursor: pointer;
    transition: background .13s var(--ease), color .13s var(--ease);
}
.theme-seg button:hover { color: var(--text); }
.theme-seg button.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

/* Steps */
.steps { display: flex; align-items: center; gap: 7px; margin-bottom: 22px; }
.step { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.step .n {
    width: 21px; height: 21px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1.5px solid var(--border-strong);
    font-size: 11px; font-weight: 600;
}
.step.active { color: var(--text); }
.step.active .n { border-color: var(--primary); background: var(--primary); color: #fff; }
.step.done .n { border-color: var(--success); background: var(--success); color: #fff; }
.step-line { flex: 1; height: 1px; background: var(--border); }

/* One-time code input */
.otp-row { display: flex; gap: 8px; justify-content: space-between; }
.otp-row input {
    width: 100%; height: 54px; padding: 0;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 22px; font-weight: 600; text-align: center;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
    -moz-appearance: textfield;
}
.otp-row input::-webkit-outer-spin-button,
.otp-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otp-row input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.otp-row input.filled { border-color: var(--primary); }

.resend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 13px; }

/* Standalone pages (errors, invite) keep the single centred column. */
.auth-wrap--center { grid-template-columns: 1fr !important; }
.auth-wrap--center .auth-aside { display: none !important; }

@media (min-width: 940px) {
    .auth-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .auth-aside { display: flex; }
}

.alert {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 13px; border-radius: var(--radius);
    font-size: 13.5px; line-height: 1.55; margin-bottom: 16px;
}
.alert svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.alert-error   { background: color-mix(in srgb, var(--danger) 11%, transparent);  color: var(--danger);  border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent); }
.alert-success { background: color-mix(in srgb, var(--success) 11%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 26%, transparent); }
.alert-info    { background: color-mix(in srgb, var(--info) 11%, transparent);    color: var(--info);    border: 1px solid color-mix(in srgb, var(--info) 26%, transparent); }
.alert-warning { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent); }

/* --- Stats --------------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; }
.stat {
    padding: 16px 18px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.stat .k { font-size: 12px; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.stat .v { font-size: 27px; font-weight: 600; line-height: 1.2; margin-top: 5px; letter-spacing: -.02em; }
.stat .d { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

/* --- Tabs ---------------------------------------------------------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tab {
    padding: 9px 14px; border: 0; border-bottom: 2px solid transparent;
    background: none; color: var(--text-2); font-size: 14px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* --- Mobile -------------------------------------------------------------- */
.mobile-only { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 1080px) {
    .detail-pane { display: none; }
    .detail-pane.open {
        display: block; position: absolute; right: 0; top: 0; bottom: 0;
        width: 300px; z-index: 45; box-shadow: var(--shadow-lg);
    }
    .workspace { position: relative; }
}

@media (max-width: 900px) {
    :root { --list-w: 320px; }
    .sidebar {
        position: fixed; inset: 0 auto 0 0;
        transform: translateX(-100%);
        transition: transform .22s var(--ease);
    }
    .sidebar.open { transform: none; }
    .sidebar-backdrop {
        display: block; position: fixed; inset: 0; z-index: 39;
        background: rgba(4, 8, 22, .5);
        opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
    }
    .sidebar-backdrop.open { opacity: 1; visibility: visible; }
    .mobile-only { display: inline-flex; }
}

@media (max-width: 720px) {
    body { font-size: 15px; }
    .list-pane { width: 100%; border-right: 0; }
    .workspace.has-thread .list-pane { display: none; }
    .workspace:not(.has-thread) .thread-pane { display: none; }
    .page { padding: 16px; }
    .thread-head, .thread-toolbar, .composer { padding-left: 14px; padding-right: 14px; }
    .thread-scroll { padding: 14px; }
    .modal { max-height: 94vh; }
    .toast-stack { left: 12px; right: 12px; max-width: none; }
}

@media print {
    .sidebar, .topbar, .composer, .thread-toolbar, .detail-pane, .list-pane { display: none !important; }
    .thread-scroll { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    /* Loading indicators are exempt, only slowed down. Stopped after one
       turn, a spinner reads as a frozen page while a request is still
       running - that is what "the form is stuck" turned out to be. */
    .spinner,
    .msg-translate.is-working svg,
    #ai-convert-btn.is-working svg,
    #ai-generate.is-working svg {
        animation-duration: 1.2s !important;
        animation-iteration-count: infinite !important;
    }
    .skeleton,
    .ai-status.working::after {
        animation-duration: 2s !important;
        animation-iteration-count: infinite !important;
    }
}

/* --------------------------------------------------------------------------
   AI draft panel
   Sits above the editor so the draft appears where the agent is already
   looking. Stays open after generating: a second attempt with a different
   instruction should be one click, not four.
   -------------------------------------------------------------------------- */
.ai-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 10px 12px;
    margin-bottom: 9px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.ai-panel-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ai-panel-label { font-size: 12px; color: var(--text-3); }
.ai-instructions { resize: vertical; min-height: 46px; font-size: 13px; }

.ai-panel-head { display: flex; align-items: center; gap: 8px; }
.ai-panel-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.ai-panel-title svg { color: var(--primary); }
.ai-product {
    padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    background: var(--primary-soft); color: var(--primary);
}
.ai-options { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ai-option { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-option .ai-panel-label { min-width: 52px; }
.ai-seg {
    display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border);
}
.ai-seg label { position: relative; cursor: pointer; }
.ai-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ai-seg span {
    display: block; padding: 4px 12px; border-radius: 999px;
    font-size: 12.5px; color: var(--text-2); white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.ai-seg label:hover span { color: var(--text); }
.ai-seg input:checked + span { background: var(--primary); color: #fff; }
.ai-seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--primary-ring); }

/* Under the panel once a draft exists: convert it for the customer. */
.ai-convert {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 9px; padding: 8px 10px 8px 12px;
    border: 1px solid var(--primary-ring); border-radius: var(--radius);
    background: var(--primary-soft);
}
.ai-convert[hidden] { display: none; }
.ai-convert-text { font-size: 12.5px; color: var(--text-2); }
#ai-convert-btn { display: inline-flex; align-items: center; gap: 6px; }
#ai-convert-btn.is-working svg { animation: ai-spin 1.4s linear infinite; }

/* The wait is measured in seconds, so the button has to look busy rather than
   merely disabled - a still, greyed-out button reads as broken. */
#ai-generate.is-working svg { animation: ai-spin 1.4s linear infinite; transform-origin: 50% 50%; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

.ai-status { font-size: 12px; color: var(--text-3); }
.ai-status.working { color: var(--text-2); }
.ai-status.working::after {
    content: '';
    display: inline-block;
    width: 3px; height: 3px;
    margin-left: 5px; vertical-align: middle;
    border-radius: 50%;
    background: currentColor;
    animation: ai-pulse 1s ease-in-out infinite;
}
@keyframes ai-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.ai-status.done { color: var(--success, #16a34a); }
.ai-status.error { color: var(--danger, #dc2626); }

@media (prefers-reduced-motion: reduce) {
    #ai-generate.is-working svg,
    .msg-translate.is-working svg,
    #ai-convert-btn.is-working svg,
    .ai-status.working::after { animation: none; }
}

/* ---------------------------------------------------------------------------
   Mailbox
   ---------------------------------------------------------------------------
   The list still reuses .ticket-row, so a message and a ticket read the same
   way. What is added here is the mail-client shape on top of it: a sender
   circle on every row, and a reading pane that leads with who wrote and what
   they said rather than with a table of headers.
   --------------------------------------------------------------------------- */

/* List --------------------------------------------------------------------- */
.mb-search { gap: 8px; }
.mb-search .input-group { position: relative; }
.mb-search .input-group svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--text-3); pointer-events: none;
}
.mb-search .input { padding-left: 32px; border-radius: 999px; }

/* Three selects share the row, so none of them truncates to "Any reas...". */
.mb-filters { gap: 6px; flex-wrap: wrap; }
.mb-filters .select {
    flex: 1 1 0; min-width: 0; font-size: 12.5px; padding-left: 9px; padding-right: 24px;
}

.mb-row { display: flex; gap: 11px; align-items: flex-start; }
.mb-row-text { min-width: 0; flex: 1 1 auto; }
.mb-avatar { flex: 0 0 auto; margin-top: 2px; }
.ticket-row.moved { opacity: .68; }

/* The unread marker: a bar down the left, as a mail client does it, rather
   than only bolder text - it survives at a glance across a long list. */
.mb-row.unread { position: relative; }
.mb-row.unread::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--primary);
}

/* The code, inline in the subject line. Tabular figures so a column of them
   lines up, which is how you scan for the one you just asked for. */
.tr-code {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px; font-weight: 600; letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
}

.tag-to { font-variant: none; }

/* Reading pane ------------------------------------------------------------- */
.mb-head { padding-top: 12px; padding-bottom: 12px; }

.mb-subject {
    font-size: 19px; font-weight: 600; line-height: 1.3;
    margin: 0 0 6px; color: var(--text);
    overflow-wrap: anywhere;
}
.mb-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* A comfortable measure. A full-width column of body text in a wide pane is
   the thing that makes an email tiring to read. */
.mb-reader { max-width: 820px; }

.mb-sender {
    display: flex; align-items: flex-start; gap: 12px;
    padding-bottom: 14px; margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.mb-sender-text { flex: 1 1 auto; min-width: 0; }
.mb-sender-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mb-sender-name { font-weight: 600; font-size: 14px; }
.mb-sender-mail { font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }

.mb-details-toggle {
    display: inline-flex; align-items: center; gap: 3px;
    background: none; border: 0; padding: 1px 0; margin-top: 1px;
    font: inherit; font-size: 12.5px; color: var(--text-3); cursor: pointer;
}
.mb-details-toggle:hover { color: var(--text); }
.mb-details-toggle svg { transition: transform .15s var(--ease); }
.mb-details-toggle.open svg { transform: rotate(180deg); }

.mb-time { flex: 0 0 auto; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }

.mb-code-card {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 16px; margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.mb-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 26px; font-weight: 700; letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    background: none; border: 0; padding: 2px 0; cursor: pointer;
    transition: color .15s var(--ease);
}
.mb-code:hover { color: var(--primary); }
.mb-code.copied { color: var(--ok); }

.mb-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--ok) 10%, var(--surface));
    font-size: 13px;
}
.mb-banner .btn { margin-left: auto; }

.mb-headers {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 12.5px;
}
.mb-header-row { display: flex; gap: 10px; padding: 3px 0; }
.mb-header-row + .mb-header-row { border-top: 1px solid var(--border); }
.mb-header-key { flex: 0 0 116px; color: var(--text-3); }
.mb-header-row span:last-child { min-width: 0; word-break: break-word; }

.mb-body { font-size: 14px; line-height: 1.65; }
.mb-body img { max-width: 100%; height: auto; }
.mb-body pre { white-space: pre-wrap; word-break: break-word; margin: 0; font: inherit; }
/* Marketing mail is full of wide tables. Let one scroll rather than let it
   stretch the pane and put the whole page on a horizontal scrollbar. */
.mb-body table { max-width: 100%; display: block; overflow-x: auto; }

@media (max-width: 640px) {
    .mb-subject { font-size: 17px; }
    .mb-time { display: none; }
}

/* Mail filters ------------------------------------------------------------- */
.filter-value {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
}
.filter-row.off { opacity: .55; }

/* Mailbox replies ---------------------------------------------------------- */
.mb-replies { margin-top: 20px; }
.mb-reply {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 14px;
}
.mb-reply-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mb-reply-who { font-size: 13px; font-weight: 600; }
.mb-reply-body { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.mb-reply-body img { max-width: 100%; height: auto; }

/* The composer names the address that will answer. Amber when it is not the
   one the mail arrived at - see MailboxController::show. */
.composer-tab.warn { color: var(--warning); }