:root {
    color-scheme: light;
    --background: #f2f2f7;
    --surface: #ffffff;
    --surface-raised: #f7f7fa;
    --field: #ffffff;
    --hover: #f5f5f8;
    --border: #d9d9df;
    --text: #1c1c1e;
    --muted: #6e6e73;
    --accent: #e78b18;
    --accent-contrast: #201307;
    --danger-bg: #fff0f1;
    --danger-border: #d26772;
    --code: #45454a;
    --note-bg: #fff9ed;
    --success-bg: #ecf8f0;
    --success-border: #2f7d4f;
    --success-text: #267044;
    --pending-border: #997426;
    --pending-text: #795710;
    --error-text: #a33c48;
    --closed-text: #6e6e73;
    --danger-action-border: #b65a65;
    --danger-action-text: #a33c48;
    --radius-small: 9px;
    --radius-medium: 14px;
    --radius-large: 20px;
    --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 28px rgb(0 0 0 / .045);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #111214;
    --surface: #1c1d20;
    --surface-raised: #25272b;
    --field: #151619;
    --hover: #24262a;
    --border: #34373d;
    --text: #f2f2f4;
    --muted: #a1a5ad;
    --accent: #f0a33a;
    --accent-contrast: #17120b;
    --danger-bg: #392126;
    --danger-border: #7e3540;
    --code: #d5d8dc;
    --note-bg: #262118;
    --success-bg: #17281e;
    --success-border: #387b57;
    --success-text: #82d8a5;
    --pending-border: #876b2f;
    --pending-text: #e4bd61;
    --error-text: #e98e99;
    --closed-text: #9da2aa;
    --danger-action-border: #704048;
    --danger-action-text: #f0b1b8;
    --shadow: 0 1px 2px rgb(0 0 0 / .18), 0 10px 30px rgb(0 0 0 / .14);
}

* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; color: var(--text); background: var(--background); font-size: 14px; line-height: 1.5; }
a { color: inherit; }

.topbar {
    position: relative;
    z-index: 30;
    min-height: 58px;
    padding: 0 28px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
}
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; text-decoration: none; letter-spacing: .01em; }
.brand-logo { display: block; width: 40px; height: auto; flex: 0 0 40px; object-fit: contain; }
.brand-name { display: inline-flex; align-items: center; gap: .28em; }
.brand-accent { color: var(--accent); }
:root[data-theme="dark"] .brand-logo { filter: invert(1); }
.topbar-search { position: relative; width: min(310px, 26vw); margin: 0 18px; }
.topbar-search svg, .mobile-menu-search svg, .search-page-form svg { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transform: translateY(-50%); pointer-events: none; }
.topbar-search input { height: 38px; padding: 7px 50px 7px 37px; border-radius: 999px; background: var(--surface-raised); }
.topbar-search input::-webkit-search-cancel-button { margin-right: -28px; }
.topbar-search kbd { position: absolute; right: 9px; top: 50%; padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); background: var(--surface); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; transform: translateY(-50%); pointer-events: none; }
.account { display: flex; align-items: center; gap: 16px; color: var(--muted); }
.account form { margin: 0; }
.account-identity { display: flex; align-items: center; gap: 9px; padding-left: 16px; border-left: 1px solid var(--border); }
.account-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, var(--surface-raised)); color: var(--text); font-size: 12px; font-weight: 800; }
.account-name { display: grid; line-height: 1.15; }
.account-name small { color: var(--muted); font-size: 10px; }
.account-name strong { max-width: 150px; overflow: hidden; color: var(--text); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.logout-button { padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.logout-button:hover { border-color: var(--danger-action-border); background: var(--danger-bg); color: var(--danger-action-text); }
.logout-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.topnav { display: flex; gap: 14px; }
.topnav a { color: var(--muted); text-decoration: none; font-size: 13px; }
.topnav a:hover { color: var(--text); }
.mobile-menu { display: none; position: relative; }
.mobile-menu > summary { list-style: none; }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu-toggle { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-raised); color: var(--text); cursor: pointer; }
.mobile-menu-icon { display: grid; gap: 4px; width: 18px; }
.mobile-menu-icon span { display: block; width: 100%; height: 2px; border-radius: 999px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.mobile-menu[open] .mobile-menu-icon span:first-child { transform: translateY(6px) rotate(45deg); }
.mobile-menu[open] .mobile-menu-icon span:nth-child(2) { opacity: 0; }
.mobile-menu[open] .mobile-menu-icon span:last-child { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu[open] .mobile-menu-toggle { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); }
.mobile-menu-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.mobile-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(300px, calc(100vw - 24px)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface); box-shadow: 0 18px 48px rgb(0 0 0 / .2); }
.mobile-menu-account { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); background: var(--surface-raised); }
.mobile-menu-account .account-name strong { max-width: 210px; }
.mobile-menu-search { position: relative; display: none; margin: 0; padding: 12px; border-bottom: 1px solid var(--border); }
.mobile-menu-search svg { left: 23px; }
.mobile-menu-search input { width: 100%; height: 42px; padding: 7px 12px 7px 38px; border-radius: 999px; background: var(--surface-raised); }
.mobile-nav { display: grid; padding: 6px; }
.mobile-nav a { min-height: 44px; display: flex; align-items: center; padding: 10px 12px; border-radius: 9px; color: var(--text); font-size: 15px; font-weight: 650; text-decoration: none; }
.mobile-nav a:hover, .mobile-nav a:focus-visible { background: var(--hover); color: var(--accent); }
.mobile-menu-logout { margin: 0; padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.mobile-menu-panel .logout-button { width: 100%; min-height: 42px; font-size: 14px; }
.link-button, .back-link { color: var(--accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

.theme-toggle { appearance: none; flex: 0 0 auto; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.theme-toggle-track { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 54px; height: 30px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-raised); box-shadow: inset 0 1px 2px rgb(0 0 0 / .08); }
.theme-toggle-icon { position: relative; z-index: 1; display: grid; place-items: center; color: var(--muted); font-size: 13px; line-height: 1; transition: color .22s ease; }
.theme-toggle-sun { color: var(--text); }
.theme-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 6px rgb(0 0 0 / .22); transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
:root[data-theme="dark"] .theme-toggle-thumb { transform: translateX(24px); }
:root[data-theme="dark"] .theme-toggle-sun { color: var(--muted); }
:root[data-theme="dark"] .theme-toggle-moon { color: var(--text); }
.theme-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 3px; }

.page-shell { width: min(1180px, calc(100% - 40px)); margin: 42px auto; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 20px; color: var(--muted); }
.pagination > :last-child { justify-self: end; }
h1 { margin: 0; font-size: clamp(25px, 3vw, 34px); line-height: 1.2; letter-spacing: -.025em; }
h2 { margin: 0 0 12px; font-size: 16px; }
.eyebrow { color: var(--muted); margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.count { color: var(--muted); font-size: 13px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 14px; text-align: left; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--surface-raised); }
td { padding: 12px 14px; border-top: 1px solid var(--border); vertical-align: top; }
td a { display: block; text-decoration: none; }
tbody tr:hover { background: var(--hover); }
.empty-state { border: 1px solid var(--border); border-radius: var(--radius-large); padding: 30px; color: var(--muted); background: var(--surface); box-shadow: var(--shadow); }

.search-page { max-width: 960px; }
.search-heading { margin-bottom: 20px; }
.search-heading > p:last-child { max-width: 760px; margin: 10px 0 0; color: var(--muted); }
.search-page-form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 28px; }
.search-page-form input { height: 48px; padding-left: 40px; font-size: 16px; }
.search-page-form .primary-button { min-width: 96px; margin: 0; }
.search-results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 0 0 12px; }
.search-results-heading h2 { margin: 0; font-size: 19px; }
.search-results-controls, .search-sort { display: flex; align-items: baseline; gap: 9px; }
.search-sort label { color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1; }
.search-sort select { width: auto; height: 34px; padding: 0 30px 0 10px; font-size: 13px; line-height: 1.2; }
.search-results { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); }
.search-result { display: block; padding: 17px 19px; border-top: 1px solid var(--border); text-decoration: none; }
.search-result:first-child { border-top: 0; }
.search-result:hover, .search-result:focus-visible { background: var(--hover); }
.search-result:focus-visible { position: relative; z-index: 1; outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: -3px; }
.search-result-topline { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.search-result-topline time { margin-left: auto; }
.search-result-type { color: var(--accent); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.search-result h2 { margin: 7px 0 2px; font-size: 17px; }
.search-result-subtitle { margin: 0; color: var(--muted); font-size: 12px; }
.search-result-excerpt { display: -webkit-box; margin: 10px 0 0; overflow: hidden; color: var(--text); font-size: 13px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.search-result-attachment { display: flex; align-items: center; gap: 6px; margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.search-result-attachment svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.search-empty-state { text-align: center; }

.log-actions { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.log-actions select { width: auto; }
.log-actions .small-button { padding: 8px 11px; }
.log-actions a { color: var(--accent); }
.log-list { display: grid; gap: 12px; }
.log-entry { padding: 18px; border: 1px solid var(--border); border-left: 4px solid var(--danger-border); border-radius: var(--radius-medium); background: var(--surface); box-shadow: var(--shadow); }
.log-entry-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--muted); font-size: 12px; }
.log-level { padding: 2px 7px; border-radius: 999px; color: var(--error-text); background: var(--danger-bg); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.log-error-id { margin-left: auto; color: var(--error-text); }
.log-message { margin: 12px 0 5px; font-weight: 700; }
.log-request, .log-exception, .log-location { margin: 5px 0; overflow-wrap: anywhere; }
.log-request { color: var(--muted); }
.log-entry details { margin-top: 12px; }
.log-entry summary { color: var(--accent); cursor: pointer; font-weight: 700; }
.log-entry pre { max-height: 360px; margin: 10px 0 0; padding: 14px; overflow: auto; border-radius: var(--radius-small); color: var(--code); background: var(--surface-raised); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.error-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.error-panel { width: min(580px, 100%); padding: 30px; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); }
.error-panel h1 { margin-bottom: 14px; }
.error-panel a { color: var(--accent); }

.operations-page { max-width: 1180px; }
.operations-heading { margin-bottom: 30px; }
.operations-heading > div > p:last-child { max-width: 720px; margin: 9px 0 0; color: var(--muted); }
.operations-section + .operations-section { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--border); }
.operations-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.operations-section-heading .eyebrow { margin-bottom: 3px; }
.operations-section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.015em; }
.backup-page { max-width: 840px; }
.backup-panel { display: grid; gap: 20px; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); }
.backup-panel h2, .backup-panel h3 { margin: 0; font-size: 20px; }
.backup-panel p { margin: 8px 0 0; color: var(--muted); line-height: 1.6; }
.backup-warning { padding: 16px; border: 1px solid var(--danger-border); border-radius: var(--radius-medium); background: var(--danger-bg); color: var(--error-text); }
.backup-warning p { color: inherit; }
.backup-panel form { margin: 0; }
.backup-panel .primary-button { margin: 0; }
.export-password-field { display: grid; gap: 7px; max-width: 420px; margin-bottom: 14px; color: var(--muted); font-weight: 700; }
.export-password-field small { font-weight: 400; line-height: 1.45; }

.login-shell { min-height: calc(100vh - 58px); display: grid; place-items: start center; padding: 10vh 20px 40px; }
.login-panel { width: min(390px, 100%); padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); }
.login-panel h1 { margin-bottom: 24px; }
.stacked-form { display: grid; gap: 8px; }
.stacked-form label { margin-top: 8px; color: var(--muted); font-weight: 600; }
.stacked-form .checkbox-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--surface-raised);
    cursor: pointer;
}
.stacked-form .checkbox-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.stacked-form .checkbox-row input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--accent); cursor: pointer; }
.checkbox-copy { min-width: 0; display: grid; gap: 2px; }
.checkbox-copy strong { color: var(--text); font-size: 13px; line-height: 1.35; }
.checkbox-copy small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.45; }
input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--field); color: var(--text); padding: 10px 11px; font: inherit; }
textarea, select { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--field); color: var(--text); padding: 10px 11px; font: inherit; }
textarea { resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); outline-offset: 1px; }
.primary-button { margin-top: 14px; border: 1px solid color-mix(in srgb, var(--accent) 80%, #7a4b14); border-radius: var(--radius-small); padding: 10px 14px; background: var(--accent); color: var(--accent-contrast); font: inherit; font-weight: 700; cursor: pointer; }
.alert { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--danger-border); border-radius: var(--radius-medium); background: var(--danger-bg); }

.message-page { max-width: 900px; }
.back-link { display: inline-block; margin-bottom: 24px; text-decoration: none; }
.message-header { padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.message-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 24px 0 0; }
.message-meta div { min-width: 0; }
.message-meta dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.message-meta dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.message-section { margin-top: 28px; }
.email-body, .raw-payload pre { margin: 0; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; box-shadow: var(--shadow); }
.raw-payload { margin-top: 28px; color: var(--muted); }
.raw-payload summary { cursor: pointer; }
.raw-payload pre { margin-top: 10px; max-height: 480px; overflow: auto; color: var(--code); }
code { color: var(--code); }

.inbox-shell { min-height: calc(100vh - 58px); display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.inbox-sidebar { padding: 32px 20px; border-right: 1px solid var(--border); background: var(--surface); }
.sidebar-section { margin-top: 30px; }
.filter-nav { display: grid; gap: 3px; }
.filter-nav a { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: var(--radius-small); color: var(--muted); text-decoration: none; }
.filter-nav a:hover, .filter-nav a.active { color: var(--text); background: var(--surface-raised); }
.ticket-list { padding: 34px; min-width: 0; }
.compact-heading { max-width: 1380px; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "title actions" "title controls"; align-items: start; gap: 10px 20px; margin: 0 auto 18px; }
.ticket-heading-title { grid-area: title; }
.ticket-heading-controls { grid-area: controls; justify-self: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 18px; }
.chatgpt-draft-actions { grid-area: actions; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.chatgpt-draft-actions .secondary-button { min-height: 36px; padding: 7px 10px; font-size: 12px; }
.inbox-auto-refresh-status { color: var(--muted); font-size: 11px; line-height: 1.35; }
.ticket-heading-controls .count { line-height: 1; white-space: nowrap; }
.ticket-sort { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.ticket-sort label { color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1; }
.ticket-sort select { width: auto; max-width: min(180px, 60vw); height: 36px; padding: 0 30px 0 10px; font-size: 13px; line-height: 1.2; }
.inbox-notice { max-width: 1380px; margin: 0 auto 14px; }
.inbox-empty-state { max-width: 1380px; margin: 0 auto; }
.bulk-ticket-form { max-width: 1380px; margin: 0 auto; }
.bulk-toolbar { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); }
.bulk-select-all, .ticket-select { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.bulk-select-all input, .ticket-select input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0; accent-color: var(--accent); cursor: pointer; }
.bulk-actions { min-width: 0; display: flex; align-items: center; justify-content: end; gap: 8px; }
.bulk-actions[hidden] { display: none; }
.bulk-actions strong { margin-right: 3px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.bulk-actions select { width: auto; min-width: 150px; height: 34px; padding: 0 30px 0 9px; font-size: 12px; }
.bulk-actions .small-button { min-height: 34px; justify-self: auto; padding: 6px 10px; }
.ticket-rows { max-width: 1380px; margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); }
.ticket-row-shell { display: flex; align-items: stretch; border-top: 1px solid var(--border); }
.ticket-row-shell:first-child { border-top: 0; }
.ticket-row-shell:hover, .ticket-row-shell.is-selected { background: var(--hover); }
.ticket-select { flex: 0 0 46px; justify-content: center; align-self: stretch; border-right: 1px solid var(--border); }
.ticket-row { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 16px; text-decoration: none; }
.ticket-row-replied { background: color-mix(in srgb, var(--success-bg) 82%, var(--surface)); }
.ticket-row-needs-reply { background: color-mix(in srgb, var(--danger-bg) 78%, var(--surface)); }
.ticket-row-pending { background: color-mix(in srgb, var(--note-bg) 82%, var(--surface)); }
.ticket-row-replied:hover, .ticket-row-replied.is-selected { background: color-mix(in srgb, var(--success-bg) 94%, var(--surface)); }
.ticket-row-needs-reply:hover, .ticket-row-needs-reply.is-selected { background: var(--danger-bg); }
.ticket-row-pending:hover, .ticket-row-pending.is-selected { background: color-mix(in srgb, var(--note-bg) 94%, var(--surface)); }
.ticket-row-main { min-width: 0; flex: 1 1 auto; display: grid; grid-template-columns: 42px minmax(320px, 1fr); align-items: baseline; gap: 12px; }
.ticket-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-number { color: var(--accent); font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ticket-subject { min-width: 0; display: flex; align-items: center; gap: 6px; }
.ticket-subject strong { min-width: 0; }
.ticket-paperclip { flex: 0 0 14px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ticket-row-meta { flex: 0 0 auto; display: grid; grid-template-columns: 190px 120px 190px; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.ticket-status-group { min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ticket-draft-indicator { display: inline-flex; flex: 0 0 16px; width: 16px; height: 16px; color: var(--muted); }
.ticket-draft-indicator[hidden] { display: none; }
.ticket-draft-indicator svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ticket-draft-indicator.has-draft { color: var(--accent); }
.ticket-created { min-width: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; white-space: nowrap; }
.ticket-age-relative { color: var(--accent); font-size: 12px; font-weight: 800; }
.ticket-age-date { color: var(--muted); }
.ticket-age-date::before { content: '·'; margin-right: 7px; color: var(--border); }
.status { display: inline-block; width: fit-content; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ticket-origin { display: inline-block; width: fit-content; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.status-open, .status-processed { border-color: var(--success-border); color: var(--success-text); }
.status-reply { border-color: var(--accent); color: var(--accent); }
.status-pending { border-color: var(--pending-border); color: var(--pending-text); }
.status-closed { color: var(--closed-text); }
.status-spam, .status-unmatched, .status-error { border-color: var(--danger-border); color: var(--error-text); }

.chatgpt-dialog { width: min(940px, calc(100vw - 40px)); max-height: calc(100vh - 40px); padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgb(0 0 0 / .35); }
.chatgpt-dialog::backdrop { background: rgb(0 0 0 / .7); }
.chatgpt-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.chatgpt-dialog > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.chatgpt-dialog > header .eyebrow { margin: 0 0 3px; }
.chatgpt-dialog > header h2 { margin: 0; font-size: 21px; }
.chatgpt-dialog-close { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-raised); color: var(--text); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.chatgpt-dialog-close:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
.chatgpt-dialog-body { min-height: 0; display: grid; align-content: start; gap: 10px; padding: 18px 20px 20px; overflow-y: auto; }
.chatgpt-dialog-body > p { margin: 0; color: var(--muted); line-height: 1.5; }
.chatgpt-dialog-body > label { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.chatgpt-dialog textarea { min-height: 240px; max-height: 46vh; resize: vertical; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.chatgpt-dialog textarea[readonly] { background: var(--surface-raised); color: var(--code); }
.chatgpt-privacy-warning { padding: 11px 13px; border: 1px solid var(--pending-border); border-radius: var(--radius-small); background: var(--note-bg); color: var(--pending-text) !important; }
.chatgpt-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 3px; }
.chatgpt-dialog-actions .primary-button, .chatgpt-dialog-actions .secondary-button { margin-top: 0; }
.chatgpt-import-status { min-height: 18px; font-size: 12px; }
.chatgpt-dialog .error { color: var(--error-text); }
.chatgpt-import-preview { display: grid; gap: 10px; max-height: 44vh; overflow-y: auto; padding: 1px; }
.chatgpt-import-preview[hidden] { display: none; }
.chatgpt-preview-ticket { padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface-raised); }
.chatgpt-preview-ticket h3 { margin: 0 0 10px; font-size: 14px; }
.chatgpt-preview-ticket h3 a { color: var(--text); text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
.chatgpt-preview-ticket strong { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.chatgpt-preview-ticket pre { max-height: 220px; margin: 5px 0 0; padding: 10px 11px; overflow: auto; border: 1px solid var(--border); border-radius: 7px; background: var(--field); color: var(--code); white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.chatgpt-preview-flags, .chatgpt-preview-conflict, .chatgpt-preview-skipped { margin: 9px 0 0; font-size: 12px; line-height: 1.45; }
.chatgpt-preview-flags { color: var(--pending-text); }
.chatgpt-preview-conflict, .chatgpt-preview-skipped { color: var(--error-text); }
.chatgpt-preview-skipped { padding: 9px 11px; border: 1px solid var(--danger-border); border-radius: var(--radius-small); background: var(--danger-bg); }

.ticket-page { width: min(1380px, calc(100% - 40px)); margin: 22px auto 34px; }
.ticket-context-nav { position: sticky; z-index: 25; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -8px -10px 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface); box-shadow: var(--shadow); }
.ticket-context-nav .back-link { margin: 0; text-decoration: none; }
.ticket-step-actions { display: flex; align-items: center; gap: 7px; }
.ticket-step-actions > a, .ticket-step-actions > span { display: flex; min-height: 34px; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; text-decoration: none; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.ticket-step-actions > a:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
.ticket-step-actions > a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.ticket-step-actions > span[aria-disabled="true"] { opacity: .42; }
.ticket-shell { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 30px; }
.conversation-column { min-width: 0; }
.ticket-header { margin-bottom: 26px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); }
.ticket-header-top { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.ticket-header-top > div { min-width: 0; }
.ticket-header-actions { flex: 0 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.ticket-header-actions form { margin: 0; }
.ticket-header p { margin: 10px 0 0; color: var(--muted); }
.ticket-customer-contact { font-size: 15px; }
.ticket-customer-account { margin-top: 8px; }
.ticket-title-line { display: flex; align-items: center; gap: 12px; margin-bottom: 7px; }
.ticket-close-button { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--danger-action-border) 70%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--danger-bg) 62%, var(--surface)); color: var(--danger-action-text); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.ticket-close-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.small-button.ticket-spam-button { border-color: color-mix(in srgb, var(--danger-action-border) 70%, var(--border)); background: color-mix(in srgb, var(--danger-bg) 62%, var(--surface)); color: var(--danger-action-text); }
.ticket-close-button:hover, .ticket-spam-button:hover { border-color: var(--danger-action-border); background: var(--danger-bg); }
.ticket-close-button:focus-visible, .ticket-spam-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--danger-action-border) 35%, transparent); outline-offset: 2px; }
.ticket-copy-chatgpt-button { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-raised); color: var(--text); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.ticket-copy-chatgpt-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.ticket-copy-chatgpt-button:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); background: var(--hover); }
.ticket-copy-chatgpt-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.ticket-copy-chatgpt-button:disabled { cursor: wait; opacity: .72; }
.ticket-copy-chatgpt-button.copied { border-color: var(--success-border); color: var(--success-text); background: var(--success-bg); }
.conversation-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 2px 9px; color: var(--muted); font-size: 12px; }
.conversation-collapse-button { padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.conversation-collapse-button:hover { border-color: color-mix(in srgb, var(--muted) 55%, var(--border)); color: var(--text); }
.conversation-collapse-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.conversation { display: grid; gap: 14px; }
.conversation-collapsed-placeholder { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1px dashed color-mix(in srgb, var(--muted) 55%, var(--border)); border-radius: var(--radius-medium); background: var(--surface-raised); color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
.conversation-collapsed-placeholder[hidden] { display: none; }
.conversation-collapsed-placeholder:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); background: var(--hover); color: var(--text); }
.conversation-collapsed-placeholder:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.conversation-collapsed-icon { display: grid; place-items: center; width: 42px; height: 26px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 2px; line-height: 1; }
.conversation-collapsed-label { min-width: 0; display: grid; }
.conversation-collapsed-label strong { color: var(--text); font-size: 13px; }
.conversation-collapsed-label small { font-size: 11px; }
.conversation-collapsed-action { margin-left: auto; color: var(--accent); font-size: 12px; font-weight: 750; white-space: nowrap; }
.conversation-message { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface); box-shadow: var(--shadow); }
.conversation-message > header { display: flex; justify-content: space-between; gap: 20px; padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.conversation-message > header div { display: flex; gap: 10px; }
.conversation-message > header strong { color: var(--text); }
.conversation-message .message-created { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; min-width: 0; text-align: right; white-space: nowrap; }
.conversation-message .message-created > strong { color: var(--accent); font-weight: 750; }
.conversation-message .message-created > span { color: var(--muted); font-size: 11px; font-style: italic; }
.conversation-message .message-body > pre { margin: 0; padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.message-attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 0 18px 18px; }
.attachment-preview { min-width: 0; overflow: hidden; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-raised); color: var(--text); text-align: left; cursor: pointer; }
.attachment-preview.attachment-file { display: block; text-decoration: none; }
.attachment-preview:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.attachment-preview:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.attachment-preview img, .pdf-preview-icon { display: grid; place-items: center; width: 100%; height: 130px; object-fit: cover; border-bottom: 1px solid var(--border); background: var(--field); }
.pdf-preview-icon { color: var(--error-text); font-size: 25px; font-weight: 900; letter-spacing: .08em; }
.attachment-preview > span:last-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; }
.attachment-preview strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.attachment-preview small { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.attachment-viewer { width: min(1100px, calc(100vw - 40px)); height: min(850px, calc(100vh - 40px)); padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgb(0 0 0 / .35); }
.attachment-viewer::backdrop { background: rgb(0 0 0 / .72); }
.attachment-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.attachment-viewer > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.attachment-viewer > header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-viewer > header div { display: flex; align-items: center; gap: 8px; }
.attachment-viewer > header .secondary-button { margin: 0; padding: 8px 11px; text-decoration: none; }
.attachment-viewer-close { display: grid; place-items: center; width: 35px; height: 35px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-raised); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; }
.attachment-viewer-content { display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; background: #26282c; }
.attachment-viewer-content img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.attachment-viewer-content iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.message-quoted-reply { padding: 0 18px 16px; }
.message-quoted-reply > summary, .reply-quote > summary { width: fit-content; list-style: none; cursor: pointer; }
.message-quoted-reply > summary::-webkit-details-marker, .reply-quote > summary::-webkit-details-marker { display: none; }
.message-quoted-reply > summary span, .reply-quote > summary span { display: grid; place-items: center; width: 44px; height: 24px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-raised); color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 2px; line-height: 1; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.message-quoted-reply > summary:hover span, .reply-quote > summary:hover span { border-color: color-mix(in srgb, var(--muted) 55%, var(--border)); color: var(--text); }
.message-quoted-reply > summary:focus-visible, .reply-quote > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; border-radius: 999px; }
.message-quoted-reply[open] > summary span, .reply-quote[open] > summary span { color: var(--accent); }
.conversation-message .message-quoted-reply pre { max-height: 260px; margin-top: 10px; padding: 12px 14px; overflow: auto; border-left: 2px solid var(--border); color: var(--muted); background: var(--surface-raised); font-size: 12px; }
.message-outbound { border-left: 3px solid #487ab7; }
.message-inbound { border-left: 3px solid #4a9467; }
.message-note { border-left: 3px solid #ba8739; background: var(--note-bg); }
.message-kind { text-transform: uppercase; letter-spacing: .05em; }
.composer { margin-top: 24px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); }
.composer h2 { margin-bottom: 10px; }
.composer > p { color: var(--muted); }
.reply-draft-controls { display: flex; height: 34px; align-items: center; gap: 8px; }
.reply-draft-status { color: var(--muted); font-size: 11px; white-space: nowrap; }
.reply-draft-status.stale { color: var(--error-text); }
.reply-draft-delete { display: grid; place-items: center; width: 34px; height: 34px; padding: 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.reply-draft-delete[hidden] { display: none; }
.reply-draft-delete svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.reply-draft-delete:hover { border-color: var(--danger-action-border); color: var(--danger-action-text); background: var(--danger-bg); }
.reply-draft-delete:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; }
.reply-editor { position: relative; }
.reply-drop-overlay { position: absolute; z-index: 20; inset: 0; display: none; place-content: center; gap: 5px; border: 3px dashed var(--accent); border-radius: var(--radius-small); color: var(--text); text-align: center; background: color-mix(in srgb, var(--surface) 88%, transparent); pointer-events: none; }
.reply-drop-overlay strong { font-size: 17px; }
.reply-drop-overlay span { color: var(--muted); font-size: 11px; }
.reply-editor.is-file-dragging .reply-drop-overlay { display: grid; }
.reply-editor textarea { display: block; min-height: 180px; max-height: 70vh; resize: vertical; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.reply-editor.has-reply-quote { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--field); }
.reply-editor.has-reply-quote:focus-within { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); outline-offset: 1px; }
.reply-editor.has-reply-quote textarea { border: 0; border-radius: 0; resize: vertical; }
.reply-editor.has-reply-quote textarea:focus { outline: 0; }
.textarea-caret-mirror { position: absolute; top: 0; left: 0; box-sizing: border-box; height: auto; overflow: hidden; border: 0; visibility: hidden; pointer-events: none; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.canned-command-menu { position: absolute; z-index: 20; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); box-shadow: 0 12px 30px rgb(0 0 0 / .16); }
.canned-command-menu[hidden], .canned-command-menu button[hidden], .canned-command-menu p[hidden] { display: none; }
.canned-command-search-wrap { padding: 7px; border-bottom: 1px solid var(--border); background: var(--surface-raised); }
.canned-command-search-wrap input { padding: 9px 10px; border-radius: 7px; background: var(--field); }
.canned-command-search-wrap input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.canned-command-options { max-height: calc(var(--canned-command-max-height, 220px) - 58px); overflow-y: auto; padding: 5px; }
.canned-command-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.canned-command-menu button[aria-selected="true"] { background: var(--hover); color: var(--accent); }
.canned-command-menu p { margin: 0; padding: 9px 10px; color: var(--muted); }
.reply-quote { margin: 0; padding: 1px 10px 8px; border: 0; background: transparent; }
.reply-quote > summary { margin-left: 1px; }
.reply-quote > summary span { width: 36px; height: 20px; font-size: 9px; letter-spacing: 1.5px; }
.reply-quote > div { display: flex; justify-content: space-between; gap: 16px; margin-top: 6px; padding: 6px 2px 2px; color: var(--muted); font-size: 12px; }
.reply-quote > div strong { color: var(--text); }
.reply-quote > pre { max-height: 260px; margin: 4px 2px 2px; padding: 5px 10px; overflow: auto; border: 0; border-left: 2px solid var(--border); border-radius: 0; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; background: transparent; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.composer-actions { display: flex; gap: 9px; margin-top: 12px; }
.composer-actions .primary-button { margin-top: 0; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.composer-footer .composer-actions { margin-top: 0; }
.secondary-button, .small-button { border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-raised); color: var(--text); padding: 9px 13px; font: inherit; font-weight: 700; cursor: pointer; }
.danger-button { border-color: var(--danger-action-border); color: var(--danger-action-text); }
.reply-composer, .note-composer { padding: 0; }
.reply-composer:not([open]), .note-composer:not([open]) { overflow: hidden; }
.reply-composer > summary, .note-composer > summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: inherit; color: var(--muted); font-weight: 700; cursor: pointer; list-style: none; }
.reply-composer > summary::-webkit-details-marker, .note-composer > summary::-webkit-details-marker { display: none; }
.reply-composer > summary::before, .note-composer > summary::before { content: ""; display: block; box-sizing: border-box; width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat; transition: transform .2s ease; }
.reply-composer > summary:hover, .note-composer > summary:hover { color: var(--text); background: var(--hover); }
.reply-composer > summary:focus-visible, .note-composer > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.reply-composer:not([open]) > summary:focus-visible, .note-composer:not([open]) > summary:focus-visible { outline-offset: -3px; }
.reply-composer[open] > summary, .note-composer[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius-large) var(--radius-large) 0 0; color: var(--text); }
.reply-composer[open] > summary::before, .note-composer[open] > summary::before { transform: rotate(45deg); }
.reply-composer-content, .note-composer-content { padding: 18px 20px 20px; }
.reply-attachment-list { display: grid; gap: 6px; margin-top: 10px; }
.reply-attachment-list[hidden] { display: none; }
.reply-attachment-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-raised); }
.reply-attachment-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.reply-attachment-item small { margin-left: auto; flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.reply-attachment-remove { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 18px; cursor: pointer; }
.reply-attachment-remove:hover { color: var(--error-text); background: var(--hover); }
.reply-attachment-error { margin: 2px 0 0; color: var(--error-text); font-size: 11px; }
.note-composer-content > p { margin: 0 0 12px; color: var(--muted); }
.note-composer textarea { display: block; max-height: 70vh; resize: none; overflow-y: hidden; }
.note-button { margin-top: 10px; }
.customer-context { margin-top: 24px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); }
.customer-context-header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.customer-context-header h2 { margin: 0; }
.customer-context-header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.customer-account-details { display: flex; align-items: center; gap: 20px; margin-top: 18px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-raised); }
.customer-account-details dl { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.customer-account-details dl div { min-width: 150px; }
.customer-account-details dt { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.customer-account-details dd { margin: 2px 0 0; font-size: 12px; }
.customer-context-message { margin: 18px 0 0; padding: 13px 14px; border-radius: var(--radius-small); color: var(--muted); background: var(--surface-raised); }
.customer-context-error { border: 1px solid var(--danger-border); color: var(--error-text); background: var(--danger-bg); }
.customer-purchases { margin-top: 18px; }
.customer-purchases-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.customer-purchases-heading h3 { margin: 0; font-size: 13px; }
.customer-purchases-heading span { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: var(--muted); background: var(--surface-raised); font-size: 10px; font-weight: 800; }
.customer-purchase-search { margin-bottom: 8px; }
.customer-purchase-search label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.customer-purchase-search input { max-width: 360px; }
.customer-purchase-search-status { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.customer-purchase-search-status:empty, .customer-purchase-search[hidden], .customer-purchase[hidden] { display: none; }
.customer-purchase-list { display: grid; gap: 7px; max-height: 360px; overflow-y: auto; }
.customer-purchase { padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-raised); }
.customer-purchase > strong { display: block; font-size: 13px; }
.customer-purchase dl { display: flex; flex-wrap: wrap; gap: 5px 22px; margin: 5px 0 0; }
.customer-purchase dl div { display: flex; gap: 5px; min-width: 0; }
.customer-purchase dt { color: var(--muted); font-size: 11px; }
.customer-purchase dd { margin: 0; overflow-wrap: anywhere; font-size: 11px; }
.ticket-sidebar { display: grid; align-content: start; gap: 16px; }
.ticket-sidebar > section { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface); box-shadow: var(--shadow); }
.sidebar-details { margin: 0; }
.sidebar-details div { margin-top: 12px; }
.sidebar-details dt, .compact-form label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sidebar-details dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.copy-icon { position: relative; display: inline-grid; width: 24px; height: 24px; margin-left: 5px; padding: 3px; vertical-align: -6px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.copy-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.copy-icon:hover { color: var(--accent); background: var(--hover); }
.copy-icon.copied { color: var(--success-text); background: var(--success-bg); animation: copy-confirmation-pulse .35s ease-out; }
.copy-icon.copied::after { content: "Copied"; position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 7px); padding: 4px 8px; border: 1px solid var(--success-border); border-radius: 7px; color: var(--success-text); background: var(--success-bg); box-shadow: var(--shadow); font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; pointer-events: none; transform: translateX(-50%); animation: copy-confirmation-label .2s ease-out; }
.copy-icon:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; }
@keyframes copy-confirmation-pulse { 0% { transform: scale(.72); } 65% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes copy-confirmation-label { from { opacity: 0; transform: translate(-50%, 5px); } to { opacity: 1; transform: translate(-50%, 0); } }
.customer-email-row { display: flex; align-items: center; gap: 7px; }
.customer-email-row input { min-width: 0; }
.customer-summary { margin-top: 17px; padding-top: 4px; border-top: 1px solid var(--border); }
.form-status { min-height: 18px; margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.form-status.success { color: var(--success-text); }
.form-status.error { color: var(--error-text); }
.responses-page { max-width: 1120px; }
.responses-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.settings-panel { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); }
.settings-panel > p { margin: -4px 0 14px; color: var(--muted); }
.fit-button { justify-self: start; }
.canned-library { margin-top: 30px; }
.canned-library > header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; }
.canned-library > header h2 { margin: 0; font-size: 22px; }
.canned-response-list { display: grid; gap: 10px; }
.canned-response-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface); box-shadow: var(--shadow); }
.canned-response-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; cursor: pointer; }
.canned-response-card > summary:hover { background: var(--hover); }
.canned-response-card > summary span { color: var(--muted); font-size: 12px; }
.canned-edit-form { padding: 16px 18px 18px; border-top: 1px solid var(--border); }
.response-card-actions { display: flex; align-items: center; gap: 15px; margin-top: 8px; }
.delete-response-button { color: var(--danger-action-text); }
button:disabled { cursor: wait; opacity: .58; }
.compact-form { display: grid; gap: 7px; margin-top: 18px; }
.merge-ticket-panel > p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.small-button { justify-self: start; padding: 7px 10px; }
.previous-tickets { display: grid; }
.previous-tickets a { padding: 10px 0; border-top: 1px solid var(--border); text-decoration: none; }
.previous-tickets a:first-child { border-top: 0; }
.previous-tickets strong, .previous-tickets span { display: block; }
.previous-tickets span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.notice { margin-bottom: 16px; padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-medium); }
.notice.success { border-color: var(--success-border); background: var(--success-bg); }
.notice.error { border-color: var(--danger-border); background: var(--danger-bg); }
.message-routing-warning { display: grid; gap: 4px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid var(--danger-border); border-radius: var(--radius-medium); background: var(--danger-bg); color: var(--error-text); }
.message-routing-warning span { line-height: 1.45; }
.geo-blocklist-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface); }
.geo-blocklist-panel h2, .geo-blocklist-panel h3 { margin: 0; font-size: 16px; }
.geo-blocklist-panel p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.geo-blocklist-panel form { flex: 0 0 auto; }
.inline-filters { display: flex; flex-wrap: wrap; gap: 12px; }
.inline-filters a { color: var(--accent); }
.inline-filters a.active { color: var(--text); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.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; }

@media (prefers-reduced-motion: reduce) {
    .theme-toggle-thumb, .theme-toggle-icon, .mobile-menu-icon span, .reply-composer > summary::before, .note-composer > summary::before { transition: none; }
    .copy-icon.copied, .copy-icon.copied::after { animation: none; }
    .copy-icon.copied::after { transform: translateX(-50%); }
}

@media (max-width: 1220px) {
    .topbar { padding: 0 18px; }
    .brand { gap: 8px; font-size: 16px; }
    .brand-logo { width: 34px; flex-basis: 34px; }
    .account { display: none; }
    .mobile-menu { display: block; }
    .topbar-actions { gap: 10px; }
    .topbar-search { display: none; }
    .mobile-menu-search { display: block; }
}

@media (max-width: 1180px) and (min-width: 701px) {
    .ticket-row-main { grid-template-columns: 40px minmax(190px, 1fr); }
    .ticket-row-meta { grid-template-columns: 190px 110px; }
    .ticket-row-meta .ticket-created { display: none; }
}

@media (max-width: 900px) and (min-width: 701px) {
    .ticket-row-main { grid-template-columns: 40px minmax(160px, 1fr); }
    .ticket-row-meta { display: flex; }
    .ticket-row-meta > :not(.ticket-status-group) { display: none; }
}

@media (max-width: 700px) {
    body { overflow-x: clip; }
    .topbar { min-height: 54px; padding: 0 12px; }
    .brand { gap: 6px; font-size: 12px; letter-spacing: 0; white-space: nowrap; }
    .brand-logo { width: 28px; flex-basis: 28px; }
    .brand-name { display: inline-flex; gap: .2em; }
    .mobile-menu-search input { font-size: 16px; }
    .topbar-actions { gap: 8px; }
    .theme-toggle { padding: 6px 0; }
    .theme-toggle-track { width: 50px; height: 28px; }
    .theme-toggle-thumb { width: 20px; height: 20px; }
    :root[data-theme="dark"] .theme-toggle-thumb { transform: translateX(22px); }
    .mobile-menu-toggle { width: 40px; height: 40px; }
    .page-shell { width: min(100% - 24px, 1180px); margin: 24px auto; }
    .page-heading { align-items: start; flex-direction: column; gap: 12px; }
    h1 { overflow-wrap: anywhere; font-size: clamp(24px, 8vw, 30px); }
    input, textarea, select { font-size: 16px; }
    .message-meta { grid-template-columns: 1fr; }
    .message-header { padding-bottom: 18px; }
    .message-section, .raw-payload { margin-top: 22px; }
    .email-body, .raw-payload pre { padding: 14px; font-size: 12px; }
    .table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .table-wrap table, .table-wrap tbody { display: block; }
    .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .table-wrap tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(74px, auto); gap: 10px 16px; margin-bottom: 12px; padding: 15px; border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface); box-shadow: var(--shadow); }
    .table-wrap td { min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
    .table-wrap td:nth-child(-n+4) { grid-column: 1 / -1; }
    .table-wrap td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .table-wrap td a { overflow-wrap: anywhere; }
    .inbox-shell { display: block; }
    .inbox-sidebar { border-right: 0; border-bottom: 1px solid var(--border); padding: 14px 12px; }
    .inbox-sidebar .eyebrow { margin-left: 4px; }
    .sidebar-section { margin-top: 16px; }
    .filter-nav { display: flex; flex-wrap: wrap; }
    .filter-nav a { min-height: 40px; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid transparent; background: var(--background); }
    .filter-nav a.active { border-color: var(--border); }
    .ticket-list { padding: 20px 12px 28px; }
    .compact-heading { display: flex; align-items: start; flex-direction: column; }
    .ticket-heading-controls { width: 100%; justify-content: space-between; }
    .chatgpt-draft-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .chatgpt-draft-actions .secondary-button { min-width: 0; white-space: normal; }
    .chatgpt-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: var(--radius-medium); }
    .chatgpt-dialog > header { padding: 14px; }
    .chatgpt-dialog > header h2 { font-size: 18px; }
    .chatgpt-dialog-body { padding: 14px; }
    .chatgpt-dialog textarea { min-height: 200px; max-height: 38vh; }
    .chatgpt-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .chatgpt-dialog-actions > :only-child, .chatgpt-dialog-actions > :nth-last-child(3):first-child { grid-column: 1 / -1; }
    .inbox-auto-refresh-status { flex-basis: 100%; }
    .ticket-sort { justify-content: end; }
    .ticket-sort select { max-width: 52vw; }
    .bulk-toolbar { align-items: stretch; flex-direction: column; padding: 9px 10px; border-radius: var(--radius-medium); }
    .bulk-select-all { min-height: 34px; }
    .bulk-actions { display: grid; grid-template-columns: 1fr auto; justify-content: stretch; }
    .bulk-actions[hidden] { display: none; }
    .bulk-actions strong { grid-column: 1 / -1; }
    .bulk-actions select { width: 100%; min-width: 0; }
    .bulk-actions [data-bulk-assignee]:not([hidden]) { grid-column: 1 / -1; }
    .ticket-rows { border-radius: var(--radius-medium); }
    .ticket-row-shell { align-items: stretch; }
    .ticket-select { flex-basis: 42px; }
    .ticket-row { display: grid; align-items: start; gap: 10px; padding: 14px; }
    .ticket-row-main { width: 100%; grid-template-columns: 38px minmax(0, 1fr); gap: 5px 10px; }
    .ticket-row-meta { min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding-left: 48px; }
    .ticket-row-meta > span:not(.ticket-status-group) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ticket-row-meta .ticket-created { display: none; }
    .ticket-page { width: min(100% - 24px, 1380px); margin: 16px auto 28px; }
    .ticket-context-nav { margin: -8px -6px 10px; padding: 7px 6px; border-radius: var(--radius-small); }
    .ticket-step-actions > a, .ticket-step-actions > span { min-width: 42px; min-height: 42px; justify-content: center; padding: 7px; font-size: 17px; }
    .ticket-step-actions span span, .ticket-step-actions a span { display: none; }
    .ticket-shell { width: 100%; grid-template-columns: 1fr; }
    .ticket-sidebar { grid-row: 2; margin-top: 8px; }
    .ticket-header { margin-bottom: 20px; padding: 16px; border-radius: var(--radius-medium); }
    .ticket-header p { overflow-wrap: anywhere; }
    .ticket-close-button span { display: none; }
    .ticket-close-button { min-width: 40px; min-height: 40px; justify-content: center; padding: 7px; }
    .ticket-copy-chatgpt-button span { display: none; }
    .ticket-copy-chatgpt-button { min-width: 40px; min-height: 40px; justify-content: center; padding: 7px; }
    .conversation-toolbar { align-items: start; }
    .conversation-collapse-button { max-width: 72%; white-space: normal; text-align: right; }
    .conversation-collapsed-placeholder { padding: 11px 12px; }
    .conversation-collapsed-label small, .conversation-collapsed-action { display: none; }
    .conversation-message > header { flex-direction: column; gap: 4px; }
    .conversation-message > header div { flex-wrap: wrap; gap: 4px 10px; }
    .conversation-message .message-body > pre { padding: 14px; font-size: 12px; }
    .message-attachments { padding: 0 14px 14px; }
    .message-quoted-reply { padding: 0 14px 14px; }
    .composer, .customer-context { margin-top: 18px; padding: 16px; border-radius: var(--radius-medium); }
    .composer-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .composer-actions button { min-width: 0; min-height: 44px; padding-inline: 8px; }
    .composer-footer { align-items: stretch; flex-direction: column; }
    .reply-draft-controls { align-self: flex-end; }
    .reply-composer, .note-composer { padding: 0; }
    .reply-composer-content, .note-composer-content { padding: 16px; }
    .customer-context-header { align-items: start; flex-direction: column; gap: 10px; }
    .customer-account-details { align-items: start; flex-direction: column; gap: 12px; }
    .customer-account-details dl { display: grid; gap: 8px; }
    .customer-purchase dl { display: grid; gap: 3px; }
    .ticket-sidebar > section, .settings-panel { padding: 16px; }
    .primary-button, .secondary-button, .small-button { min-height: 42px; }
    .fit-button { width: 100%; }
    .login-shell { min-height: calc(100vh - 54px); padding: 7vh 12px 28px; }
    .login-panel { padding: 22px 18px; border-radius: var(--radius-medium); }
    .empty-state { padding: 22px; border-radius: var(--radius-medium); }
    .search-page-form { grid-template-columns: 1fr; }
    .search-page-form .primary-button { width: 100%; }
    .search-results-heading { align-items: start; flex-direction: column; gap: 4px; }
    .search-results-controls { width: 100%; align-items: center; justify-content: space-between; }
    .search-sort select { max-width: 48vw; }
    .search-results { border-radius: var(--radius-medium); }
    .search-result { padding: 15px; }
    .search-result-topline time { width: 100%; margin-left: 0; }
    .log-actions { width: 100%; flex-wrap: wrap; }
    .log-actions select { flex: 1 1 130px; }
    .log-entry { padding: 15px; }
    .log-error-id { width: 100%; margin-left: 0; overflow-wrap: anywhere; }
    .operations-heading { margin-bottom: 24px; }
    .operations-section + .operations-section { margin-top: 26px; padding-top: 26px; }
    .operations-section-heading { align-items: start; flex-direction: column; }
    .operations-section-heading h2 { font-size: 20px; }
    .inline-filters { gap: 8px 14px; }
    .pagination { gap: 10px; }
    .message-attachments { grid-template-columns: 1fr; }
    .attachment-viewer { width: calc(100vw - 16px); height: calc(100vh - 16px); }
    .attachment-viewer > header { align-items: stretch; flex-direction: column; }
    .attachment-viewer > header div { justify-content: space-between; }
    .geo-blocklist-panel { align-items: stretch; flex-direction: column; }
    .geo-blocklist-panel .small-button { width: 100%; }
    .canned-response-card > summary { align-items: start; flex-direction: column; gap: 3px; }
    .canned-edit-form { padding: 14px; }
    .response-card-actions { justify-content: space-between; }
}