/* EMAX Helpdesk: agent console styles. Light and dark themes share one set of tokens.
   Visual identity shared with Aperio (EMAX's asset and compliance app): EMAX sky #4AD1F6,
   charcoal #4F5759, navy #171E31, green #20C997; Trebuchet MS; light navigation in the light
   theme and navy in the dark one. The theme follows the computer unless chosen in the sidebar. */

:root {
  color-scheme: light;
  --emax-sky: #4ad1f6; --emax-charcoal: #4f5759; --emax-navy: #171e31; --emax-green: #20c997;
  --brand-cyan: #4ad1f6;
  --brand-slate: #4f5759;
  --bg: #f6f6f6; --surface: #ffffff; --surface-2: #f9fafa; --surface-3: #eaeced;
  --border: #dcdfe1; --border-strong: #c4c9cc;
  --text: #212529; --text-2: #4f5759; --text-3: #7a8285;
  /* Sky blue is too light for text on white, so links and buttons use a deeper shade of it */
  --accent: #086e93; --accent-hover: #065a79; --accent-soft: #e1f6fd; --accent-text: #075f80;
  --primary: #086e93; --primary-hover: #065a79; --on-primary: #ffffff;
  --focus: #1aa9d4;
  /* Side navigation: light in the light theme, EMAX navy in the dark one */
  --sidebar: #ffffff; --sidebar-border: #dcdfe1; --sidebar-text: #3b4245; --sidebar-muted: #737b7e;
  --sidebar-hover: #eff1f2; --sidebar-hover-text: #171e31; --sidebar-active: #e1f6fd; --sidebar-active-text: #075f80;
  --sidebar-indicator: #086e93; --sidebar-count: #eceeef;
  --internal: #fbf0d9; --internal-border: #ecd29a;
  --customer: #ffffff; --agent-msg: #f0fafe;
  --danger: #b3261e; --danger-soft: #fbe4e2;
  --success: #157a5c; --success-soft: #ddf5ec;
  --warning: #9a6209;
  --shadow: none;
  --shadow-pop: 0 10px 30px rgba(23, 30, 49, .16), 0 2px 6px rgba(23, 30, 49, .08);
  --code-bg: #171e31; --code-border: #171e31;
  --s-new: #086e93;      --s-new-bg: #e1f6fd;
  --s-open: #157a5c;     --s-open-bg: #ddf5ec;
  --s-pending: #9a6209;  --s-pending-bg: #fbf0d9;
  --s-hold: #6a4fb0;     --s-hold-bg: #eeeaf8;
  --s-resolved: #2f62a0; --s-resolved-bg: #e3ecf7;
  --s-closed: #4f5759;   --s-closed-bg: #eceeef;
  --p-low: #7a8285; --p-normal: #086e93; --p-high: #b4471f; --p-urgent: #b3261e;
  --radius: 4px;
  --radius-card: 8px;
  --font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-heading: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Helvetica, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", ui-monospace, monospace;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1422; --surface: #161d2e; --surface-2: #1a2235; --surface-3: #20293e;
    --border: #29334a; --border-strong: #3a4560;
    --text: #e3e7ee; --text-2: #a6aec0; --text-3: #737d93;
    --accent: #4ad1f6; --accent-hover: #74dcf8; --accent-soft: #10303d; --accent-text: #6fdaf8;
    --primary: #4ad1f6; --primary-hover: #74dcf8; --on-primary: #0b1a24;
    --focus: #74dcf8;
    --sidebar: #0b1020; --sidebar-border: #1a2236; --sidebar-text: #c3c9d6; --sidebar-muted: #8790a6;
    --sidebar-hover: #151c2e; --sidebar-hover-text: #ffffff; --sidebar-active: #1b2640; --sidebar-active-text: #ffffff;
    --sidebar-indicator: #4ad1f6; --sidebar-count: #1f283b;
    --internal: #2e2412; --internal-border: #5e4a1f;
    --customer: #161d2e; --agent-msg: #12263a;
    --danger: #f07b72; --danger-soft: #3b1a18;
    --success: #3fd3a6; --success-soft: #0f3329;
    --warning: #e0a43a;
    --shadow: none;
    --shadow-pop: 0 12px 34px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
    --code-bg: #0b1020; --code-border: #3a4560;
    --s-new: #4ad1f6; --s-new-bg: #10303d; --s-open: #3fd3a6; --s-open-bg: #0f3329; --s-pending: #e0a43a; --s-pending-bg: #352812;
    --s-hold: #b39cf0; --s-hold-bg: #251d40; --s-resolved: #79a6dc; --s-resolved-bg: #172a40; --s-closed: #a6aec0; --s-closed-bg: #1f283b;
    --p-low: #8790a6; --p-normal: #4ad1f6; --p-high: #ec8a5f; --p-urgent: #f07b72;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1422; --surface: #161d2e; --surface-2: #1a2235; --surface-3: #20293e;
  --border: #29334a; --border-strong: #3a4560;
  --text: #e3e7ee; --text-2: #a6aec0; --text-3: #737d93;
  --accent: #4ad1f6; --accent-hover: #74dcf8; --accent-soft: #10303d; --accent-text: #6fdaf8;
  --primary: #4ad1f6; --primary-hover: #74dcf8; --on-primary: #0b1a24;
  --focus: #74dcf8;
  --sidebar: #0b1020; --sidebar-border: #1a2236; --sidebar-text: #c3c9d6; --sidebar-muted: #8790a6;
  --sidebar-hover: #151c2e; --sidebar-hover-text: #ffffff; --sidebar-active: #1b2640; --sidebar-active-text: #ffffff;
  --sidebar-indicator: #4ad1f6; --sidebar-count: #1f283b;
  --internal: #2e2412; --internal-border: #5e4a1f;
  --customer: #161d2e; --agent-msg: #12263a;
  --danger: #f07b72; --danger-soft: #3b1a18;
  --success: #3fd3a6; --success-soft: #0f3329;
  --warning: #e0a43a;
  --shadow: none;
  --shadow-pop: 0 12px 34px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  --code-bg: #0b1020; --code-border: #3a4560;
  --s-new: #4ad1f6; --s-new-bg: #10303d; --s-open: #3fd3a6; --s-open-bg: #0f3329; --s-pending: #e0a43a; --s-pending-bg: #352812;
  --s-hold: #b39cf0; --s-hold-bg: #251d40; --s-resolved: #79a6dc; --s-resolved-bg: #172a40; --s-closed: #a6aec0; --s-closed-bg: #1f283b;
  --p-low: #8790a6; --p-normal: #4ad1f6; --p-high: #ec8a5f; --p-urgent: #f07b72;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-family: var(--font-heading); font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; margin: 0; font-weight: 600; color: var(--text); }
h2 { font-family: var(--font-heading); font-size: 14.5px; line-height: 1.3; margin: 0 0 12px; font-weight: 600; }
p { margin: 0 0 8px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--text-2); }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }
.warning-text { color: var(--warning); }
.icon { width: 18px; height: 18px; flex: none; }

/* ---- Layout */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--sidebar); color: var(--sidebar-text); border-right: 1px solid var(--sidebar-border); padding: 0 10px 12px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; height: 76px; margin: 0 -10px; padding: 0 20px; border-bottom: 1px solid var(--sidebar-border); flex: none; }
.brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 30px; width: auto; }
.brand-name { font: 700 13.5px/1 var(--font-heading); letter-spacing: 0.24em; text-transform: uppercase; color: var(--sidebar-indicator); padding-left: 2px; white-space: nowrap; }
.brand.big { align-items: center; margin: 0 auto 22px; padding: 0; }
.brand.big .brand-logo { height: 52px; }
.brand.big .brand-name { color: var(--text-2); }
.logo-on-light { display: block; }
.logo-on-dark { display: none; }
.new-ticket { justify-content: center; }

.sidebar nav { display: flex; flex-direction: column; gap: 1px; }
.nav-heading { display: flex; align-items: center; gap: 8px; margin: 18px 10px 6px; font-size: 12px; color: var(--sidebar-muted); font-weight: 400; white-space: nowrap; }
.nav-heading .icon { width: 14px; height: 14px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 10px; margin: 1px 0; border-radius: var(--radius); color: var(--sidebar-text); white-space: nowrap; }
.nav-link:hover { background: var(--sidebar-hover); text-decoration: none; color: var(--sidebar-hover-text); }
.nav-link.is-active { background: var(--sidebar-active); color: var(--sidebar-active-text); }
.nav-link.is-active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sidebar-indicator); }
.nav-count { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--sidebar-muted); }
.nav-foot { margin: auto -10px -12px; padding: 10px; border-top: 1px solid var(--sidebar-border); display: flex; flex-direction: column; gap: 2px; }
.nav-foot button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: var(--radius); color: var(--sidebar-text); font: inherit; cursor: pointer; text-align: left; white-space: nowrap; }
.nav-foot button:hover { background: var(--sidebar-hover); color: var(--sidebar-hover-text); }
.nav-foot .icon { width: 16px; height: 16px; }
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 28px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.search { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 10px; color: var(--text-2); }
.search:focus-within { border-color: var(--accent); }
.search input { border: 0; background: transparent; padding: 8px 0; flex: 1; outline: none; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-actions form { margin: 0; }
.who { display: flex; flex-direction: column; line-height: 1.2; font-size: 0.88rem; }
.who small { color: var(--text-2); }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--s-new); font-weight: 650; font-size: 0.8rem; flex: none; }
.avatar.small { width: 26px; height: 26px; font-size: 0.72rem; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; }
.icon-button:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
main#content { padding: 24px 28px 48px; max-width: 1360px; width: 100%; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.lead { color: var(--text-2); margin: -6px 0 18px; max-width: 70ch; }
.eyebrow { font-size: 0.8rem; color: var(--text-2); margin: 0 0 4px; letter-spacing: 0.01em; }
.back { display: inline-block; font-size: 0.88rem; margin-bottom: 12px; color: var(--text-2); }

/* ---- Controls */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 13px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-weight: 500; font-size: 14px; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.button:hover { text-decoration: none; background: var(--surface-2); }
.button:disabled { opacity: 0.6; cursor: progress; }
.button-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.button-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.button-quiet { border-color: transparent; background: transparent; color: var(--text-2); }
.button-quiet:hover { color: var(--text); }
.button-wide { width: 100%; justify-content: center; padding: 11px 14px; }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 7px 10px; width: 100%; }
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { width: auto; }
label > span { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
label small { display: block; font-size: 0.8rem; color: var(--text-2); margin-top: 4px; font-weight: 400; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { margin-top: 3px; }
.check > span { font-size: 0.92rem; color: var(--text); font-weight: 500; margin: 0; }
.input-narrow { width: 90px; text-align: right; }
.link-quiet { color: var(--text-2); font-size: 0.88rem; }
.form-error { background: var(--danger-soft); color: var(--danger); border-radius: var(--radius); padding: 8px 12px; font-weight: 500; }
.notice { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 10px 14px; color: var(--text-2); font-size: 0.9rem; margin: 12px 0; }
.flash { margin: 16px 28px 0; padding: 10px 14px; border-radius: var(--radius); font-weight: 500; }
.flash-success { background: var(--success-soft); color: var(--success); }
.flash-error { background: var(--danger-soft); color: var(--danger); }

/* ---- Cards and forms */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.card-head h2 { margin: 0; }
.form-grid { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.form-grid fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.form-grid legend { font-weight: 650; margin-bottom: 10px; font-size: 0.95rem; }
.grid-2 { display: grid !important; grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr); }
.grid-2 legend, .grid-3 legend { grid-column: 1 / -1; }
.span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: 10px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.inline-form { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; max-width: 640px; }
.grow { flex: 1; }

/* ---- Filters and tables */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.filters label { min-width: 150px; }
.filters select { padding: 6px 8px; }
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow-x: auto; box-shadow: var(--shadow); }
table:where(:not(.is-rich table)) { width: 100%; border-collapse: collapse; }
th:where(:not(.is-rich th)) { text-align: left; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); font-weight: 650; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
td:where(:not(.is-rich td)) { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td:where(:not(.is-rich td)) { border-bottom: 0; }
tbody tr:where(:not(.is-rich tr)):hover { background: var(--surface-2); }
tr.is-inactive td { color: var(--text-2); }
.ticket-cell { min-width: 320px; }
.ticket-link { color: var(--text); font-weight: 600; display: block; }
.ticket-number { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; margin-right: 8px; }
.meta { display: block; font-size: 0.84rem; color: var(--text-2); margin-top: 2px; }
.tickets.compact td { padding: 9px 12px; }
.tickets.compact .ticket-cell { min-width: 0; }
.pager { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.empty { text-align: center; padding: 56px 20px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-card); color: var(--text-2); }
.empty-title { font-family: var(--font-heading); font-weight: 700; color: var(--text); font-size: 1.05rem; }

/* ---- Badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: 3px; font-size: 0.78rem; font-weight: 650; white-space: nowrap; }
.status-new { color: var(--s-new); background: var(--s-new-bg); }
.status-open { color: var(--s-open); background: var(--s-open-bg); }
.status-pending { color: var(--s-pending); background: var(--s-pending-bg); }
.status-on_hold { color: var(--s-hold); background: var(--s-hold-bg); }
.status-resolved { color: var(--s-resolved); background: var(--s-resolved-bg); }
.status-closed { color: var(--s-closed); background: var(--s-closed-bg); }
.priority { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; white-space: nowrap; }
.priority .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p-normal); }
.priority-low .dot { background: var(--p-low); }
.priority-high .dot { background: var(--p-high); }
.priority-urgent .dot { background: var(--p-urgent); }
.priority-urgent { color: var(--p-urgent); font-weight: 650; }

/* ---- Ticket page */
.ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.ticket-badges { display: flex; gap: 12px; align-items: center; padding-top: 22px; justify-content: flex-end; }
.ticket-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.resolve-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 0; }
.resolve-choice { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px 10px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.resolve-choice[hidden] { display: none; }
.resolve-choice legend { font-size: 0.82rem; font-weight: 600; color: var(--text-2); padding: 0 4px; }
.notice-item { list-style: none; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: 0.9rem; }
.notice-item summary { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; flex-wrap: wrap; }
.notice-item summary time { font-size: 0.82rem; color: var(--text-2); }
.notice-item .icon { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.notice-status { font-size: 0.78rem; font-weight: 600; border-radius: 3px; padding: 1px 8px; }
.notice-status.is-waiting { color: var(--warning); background: var(--surface-2); }
.notice-status.is-sent { color: var(--success); background: var(--success-soft); }
.notice-status.is-failed { color: var(--danger); background: var(--danger-soft); }
.notice-body { padding: 0 16px 14px 44px; }
.notice-subject { margin: 0 0 8px; }
.ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.timeline { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.message { background: var(--customer); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; box-shadow: var(--shadow); }
.message.is-agent { background: var(--agent-msg); }
.message.is-internal { background: var(--internal); border-color: var(--internal-border); }
.message-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.9rem; }
.message-head time { font-size: 0.82rem; color: var(--text-2); }
.message-kind { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); font-weight: 650; }
.is-internal .message-kind { color: var(--warning); }
.message-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.attachments { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.88rem; }
.event { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--text-2); padding: 0 16px; }
.event time { margin-left: auto; white-space: nowrap; }
.event-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: none; }
.composer { display: flex; flex-direction: column; gap: 12px; border-width: 2px; border-color: var(--border); }
.composer.is-internal { background: var(--internal); border-color: var(--internal-border); }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 2px; margin: 0; align-self: flex-start; background: var(--surface-2); }
.segmented label { margin: 0; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: block; padding: 5px 14px; border-radius: 3px; font-size: 0.86rem; font-weight: 600; color: var(--text-2); cursor: pointer; margin: 0; }
.segmented input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.segmented input:focus-visible + span { outline: 2px solid var(--focus); }
.composer-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inline-select { display: flex; align-items: center; gap: 8px; margin: 0; }
.inline-select span { margin: 0; white-space: nowrap; }
.inline-select select { width: auto; }
.file-input { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.file-input input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-input span { margin: 0; font-size: 0.88rem; color: var(--accent); font-weight: 600; padding: 6px 0; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-input:focus-within span { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.ticket-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
.properties { display: flex; flex-direction: column; gap: 10px; }
.properties .button { align-self: flex-start; margin-top: 4px; }
.contact-name { font-weight: 650; margin-bottom: 2px; }
.mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.88rem; }
.mini-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mini-subject { flex-basis: 100%; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Top-level area tabs */
.area-tabs { display: flex; gap: 2px; align-self: stretch; margin: -10px 0; }
.area-tab { display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--text-2); font-weight: 600; font-size: 13.5px; border-bottom: 3px solid transparent; white-space: nowrap; }
.area-tab:hover { color: var(--text); text-decoration: none; background: var(--surface-2); }
.area-tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); }
.area-tab .icon { width: 17px; height: 17px; }

/* ---- Knowledge base pages */
.small { font-size: 0.85rem; }
.section-title { font-size: 1.05rem; margin: 26px 0 12px; }
.kb-hero { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--brand-cyan); border-radius: var(--radius-card); padding: 26px 28px; box-shadow: var(--shadow); }
.kb-hero h1 { margin-bottom: 6px; }
.kb-hero .lead { margin: 0 0 16px; }
.kb-search { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 5px 5px 5px 12px; max-width: 720px; color: var(--text-2); }
.kb-search:focus-within { border-color: var(--accent); }
.kb-search input { border: 0; background: transparent; padding: 6px 0; font-size: 1rem; outline: none; flex: 1; }
.kb-search.compact { margin-bottom: 16px; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.category-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; color: var(--text); box-shadow: var(--shadow); }
.category-card:hover { text-decoration: none; border-color: var(--brand-cyan); }
.category-icon { color: var(--accent); margin-bottom: 4px; }
.category-icon .icon { width: 22px; height: 22px; }
.category-name { font-family: var(--font-heading); font-weight: 700; }
.category-desc { color: var(--text-2); font-size: 0.88rem; }
.category-count { margin-top: auto; padding-top: 6px; color: var(--text-2); font-size: 0.82rem; }
.kb-lists { margin-top: 24px; }
.card.flush { padding: 4px 18px; }
.article-list { list-style: none; margin: 0; padding: 0; }
.article-list li { padding: 11px 0; border-bottom: 1px solid var(--border); }
.article-list li:last-child { border-bottom: 0; }
.article-link { font-weight: 600; color: var(--text); display: block; }
.article-link:hover { color: var(--accent); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-2); font-size: 0.84rem; margin-top: 3px; }
.search-results { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.snippet { margin: 8px 0 0; color: var(--text-2); font-size: 0.92rem; }
.snippet mark { background: var(--accent-soft); color: var(--text); padding: 0 2px; border-radius: 2px; }
.kb-status-draft { color: var(--s-pending); background: var(--s-pending-bg); }
.kb-status-published { color: var(--s-open); background: var(--s-open-bg); }
.kb-status-archived { color: var(--s-closed); background: var(--s-closed-bg); }
.kb-vis-internal { color: var(--s-closed); background: var(--s-closed-bg); }
.kb-vis-customers { color: var(--s-new); background: var(--s-new-bg); }
.kb-article { max-width: 920px; }
.kb-article-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.kb-article-head h1 { margin-bottom: 8px; }
.kb-article-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.kb-article-actions form { margin: 0; }
.kb-article .kb-content { padding: 26px 30px; margin-bottom: 10px; }
.row-actions { display: flex; gap: 4px; white-space: nowrap; }
.row-actions form { margin: 0; }
.button.danger { color: var(--danger); }

/* Article text (shared by the reader and the editor) */
.kb-content { font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.kb-content > :first-child { margin-top: 0; }
.kb-content > :last-child { margin-bottom: 0; }
.kb-content p { margin: 0 0 12px; }
.kb-content h2 { font-size: 1.3rem; margin: 26px 0 10px; }
.kb-content h3 { font-family: var(--font-heading); font-size: 1.1rem; margin: 22px 0 8px; }
.kb-content h4 { font-family: var(--font-heading); font-size: 1rem; margin: 18px 0 6px; color: var(--text-2); }
.kb-content ul, .kb-content ol { margin: 0 0 12px; padding-left: 26px; }
.kb-content li { margin: 3px 0; }
.kb-content li > ul, .kb-content li > ol { margin-bottom: 0; }
.kb-content blockquote { margin: 0 0 12px; padding: 10px 16px; border-left: 4px solid var(--brand-cyan); background: var(--surface-2); color: var(--text-2); border-radius: 0 var(--radius) var(--radius) 0; }
.kb-content code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; }
.kb-content pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88rem; line-height: 1.5; background: var(--code-bg); color: #e8edf1; border: 1px solid var(--code-border); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 14px; overflow-x: auto; white-space: pre; }
.kb-content pre code { background: none; border: 0; padding: 0; color: inherit; }
.kb-content img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 6px 0; display: block; }
.kb-content hr { border: 0; border-top: 1px solid var(--border-strong); margin: 22px 0; }
.kb-content table { border-collapse: collapse; margin: 0 0 14px; width: auto; min-width: 50%; }
.kb-content th, .kb-content td { border: 1px solid var(--border-strong); padding: 7px 10px; text-align: left; vertical-align: top; }
.kb-content th { background: var(--surface-2); font-weight: 650; text-transform: none; letter-spacing: 0; font-size: 0.92rem; color: var(--text); }
.kb-content tbody tr:hover { background: transparent; }
.kb-content a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Article editor */
.kb-editor-form { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.title-input { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; padding: 10px 14px; }
.kb-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.editor { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.editor:focus-within { border-color: var(--accent); }
.editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-card) var(--radius-card) 0 0; position: sticky; top: 61px; z-index: 3; }
.block-style { width: auto; padding: 4px 6px; font-size: 0.88rem; margin-right: 4px; }
.tool { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-2); cursor: pointer; }
.tool:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
.tool.is-on { background: var(--accent-soft); color: var(--s-new); border-color: transparent; }
.tool .icon { width: 17px; height: 17px; }
.toolbar-sep { width: 1px; height: 22px; background: var(--border-strong); margin: 0 5px; }
.link-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.link-bar[hidden] { display: none; }
.link-bar input { flex: 1; min-width: 220px; }
.editor-body { min-height: 380px; padding: 22px 26px; outline: none; position: relative; }
.editor-body.is-empty::before { content: attr(data-placeholder); color: var(--text-2); pointer-events: none; position: absolute; }
.editor-body.is-dropping { background: var(--accent-soft); }
.editor-status { margin: 0; padding: 0 26px 10px; min-height: 1.4em; font-size: 0.85rem; color: var(--text-2); }
.editor-status.is-error { color: var(--danger); }
.sticky-actions { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; align-items: center; border-top: 1px solid var(--border); z-index: 2; }

/* ---- Knowledge base picker in the reply box */
.link-button { border: 0; background: none; padding: 6px 0; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--accent); cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.kb-picker { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); padding: 10px; }
.kb-picker[hidden] { display: none; }
.kb-picker-head { display: flex; gap: 8px; }
.kb-picker-results { list-style: none; margin: 8px 0 0; padding: 0; max-height: 280px; overflow-y: auto; }
.kb-picker-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: 0; border-radius: var(--radius); background: transparent; padding: 7px 8px; cursor: pointer; color: var(--text); font: inherit; }
.kb-picker-item:hover, .kb-picker-item:focus-visible { background: var(--accent-soft); }
.kb-picker-item:disabled { cursor: not-allowed; opacity: 0.5; }
.kb-picker-item:disabled:hover { background: transparent; }
.kb-picker-title { font-weight: 600; font-size: 0.92rem; }
.kb-picker-meta { color: var(--text-2); font-size: 0.8rem; }
.kb-picker-empty { color: var(--text-2); padding: 8px; font-size: 0.9rem; }
.kb-picker-note { margin: 6px 0 0; }
.kb-content video { display: block; max-width: 100%; border-radius: var(--radius); margin: 6px 0 12px; background: #000; }

/* ---- Analytics
   Series colours from the validated data-viz palette (blue, orange); checked for colour-blind
   separation and 3:1 contrast on the card surface in both themes. EMAX cyan stays for UI chrome. */
:root { --series-1: #086e93; --series-2: #20a87f; --chart-grid: #eaeced; --chart-axis: #c4c9cc; --chart-ink: #7a8285;
  --heat-0: #f2f4f5; --heat-1: #d3f1fb; --heat-2: #a6e3f6; --heat-3: #6ccbea; --heat-4: #2ea9d2; --heat-5: #0d84ad; --heat-6: #075f80;
  --good-text: #0e7553; --bad-text: #b0293f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --series-1: #4ad1f6; --series-2: #3fd3a6; --chart-grid: #232c41; --chart-axis: #3a4560; --chart-ink: #a6aec0;
    --heat-0: #1a2235; --heat-1: #0f3040; --heat-2: #0f4458; --heat-3: #0f5d78; --heat-4: #1b7fa0; --heat-5: #33a8cc; --heat-6: #74dcf8;
    --good-text: #4fd8a8; --bad-text: #ff8a9b; }
}
:root[data-theme="dark"] { --series-1: #4ad1f6; --series-2: #3fd3a6; --chart-grid: #232c41; --chart-axis: #3a4560; --chart-ink: #a6aec0;
  --heat-0: #1a2235; --heat-1: #0f3040; --heat-2: #0f4458; --heat-3: #0f5d78; --heat-4: #1b7fa0; --heat-5: #33a8cc; --heat-6: #74dcf8;
  --good-text: #4fd8a8; --bad-text: #ff8a9b; }

.analytics-head { align-items: flex-start; }
.analytics-head .lead { margin: 4px 0 0; }
.period-picker { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 2px; background: var(--surface-2); flex: none; }
.period-picker a { padding: 5px 12px; border-radius: 3px; font-size: 0.86rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.period-picker a:hover { color: var(--text); text-decoration: none; }
.period-picker a.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 6px 0 18px; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; box-shadow: var(--shadow); }
.stat-label { color: var(--text-2); font-size: 0.85rem; font-weight: 600; margin: 0 0 4px; }
.stat-value { font-size: 1.9rem; font-weight: 650; line-height: 1.15; margin: 0; color: var(--text); }
.stat-delta, .stat-sub { font-size: 0.8rem; margin: 6px 0 0; color: var(--text-2); }
.stat-delta.tone-good { color: var(--good-text); }
.stat-delta.tone-bad { color: var(--bad-text); }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chart-card { min-width: 0; }
.chart-card.span-all { grid-column: 1 / -1; }
.chart-figure { margin: 0; position: relative; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-gridline { stroke: var(--chart-grid); stroke-width: 1; }
.chart-axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart-tick { fill: var(--chart-ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-end { fill: var(--text); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.series-1 { stroke: var(--series-1); }
.chart-line.series-2 { stroke: var(--series-2); }
.chart-dot { stroke: var(--surface); stroke-width: 2; }
.chart-dot.series-1 { fill: var(--series-1); }
.chart-dot.series-2 { fill: var(--series-2); }
.chart-hit { fill: transparent; cursor: crosshair; }
.chart-crosshair { stroke: var(--chart-ink); stroke-width: 1; opacity: 0; pointer-events: none; }
.chart-crosshair.is-on { opacity: 0.6; }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px; padding: 0; font-size: 0.85rem; color: var(--text-2); }
.chart-legend li { display: flex; align-items: center; gap: 7px; }
.legend-line { display: inline-block; width: 16px; height: 2px; border-radius: 1px; }
.legend-line.series-1 { background: var(--series-1); }
.legend-line.series-2 { background: var(--series-2); }
.bar-list { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 10px; font-size: 0.9rem; border-radius: var(--radius); }
.bar-row:hover .bar-fill { filter: brightness(1.12); }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.bar-track { height: 14px; display: block; }
.bar-fill { display: block; height: 100%; background: var(--series-1); border-radius: 0 4px 4px 0; min-width: 0; }
.bar-fill.w-0 { background: transparent; }
.bar-value { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; min-width: 3ch; text-align: right; }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rank-list li:last-child { border-bottom: 0; }
.rank-list li > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-value { font-weight: 650; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.heatmap-wrap { overflow-x: auto; }
.heatmap { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 560px; }
.heatmap { table-layout: fixed; }
.heatmap thead th:first-child { width: 38px; }
.heatmap .heat-hour { overflow: visible; white-space: nowrap; }
.heatmap th { background: none; border: 0; padding: 0 4px 0 0; font-size: 0.75rem; font-weight: 600; color: var(--chart-ink); text-transform: none; letter-spacing: 0; text-align: left; }
.heatmap .heat-hour { text-align: left; padding: 0 0 2px; font-weight: 400; font-variant-numeric: tabular-nums; }
.heatmap td { height: 22px; padding: 0; border: 0; border-radius: 3px; }
.heatmap tbody tr:hover { background: none; }
.heat-0 { background: var(--heat-0); } .heat-1 { background: var(--heat-1); } .heat-2 { background: var(--heat-2); }
.heat-3 { background: var(--heat-3); } .heat-4 { background: var(--heat-4); } .heat-5 { background: var(--heat-5); } .heat-6 { background: var(--heat-6); }
.heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 10px 0 0; font-size: 0.8rem; color: var(--text-2); }
.heat-key { display: inline-block; width: 16px; height: 12px; border-radius: 2px; }
.table-view { margin-top: 10px; font-size: 0.88rem; }
.table-view summary { cursor: pointer; color: var(--accent); font-weight: 600; width: max-content; }
.table-view .table-wrap { margin-top: 8px; box-shadow: none; max-height: 320px; overflow-y: auto; }
.table-wrap.flat { box-shadow: none; }
.chart-tooltip { position: fixed; z-index: 50; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14); padding: 7px 10px; font-size: 0.82rem; line-height: 1.45; white-space: pre-line; max-width: 280px; }
.chart-tooltip strong { display: block; font-size: 0.86rem; }
[data-tip] { cursor: default; }
@media (max-width: 1100px) { .chart-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .analytics-head { flex-direction: column; } .period-picker { overflow-x: auto; max-width: 100%; } .bar-row { grid-template-columns: minmax(80px, 42%) 1fr auto; } }
.w-0 { width: 0%; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }

/* ---- Signatures */
.signature-box { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; margin: 0; }
.signature-box[hidden] { display: none; }
.signature-box .check > span { font-size: 0.88rem; }
.signature-preview { flex-basis: 100%; order: 3; margin: 0; padding: 8px 12px; border-left: 3px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 0.88rem; white-space: pre-wrap; border-radius: 0 var(--radius) var(--radius) 0; }
.signature-preview[hidden] { display: none; }
.preview-message { box-shadow: none; }
.settings-cols code, .lead code { font-size: 0.85em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; }

/* ---- Merging tickets */
.status-merged { color: var(--text-2); background: transparent; border: 1px dashed var(--border-strong); padding: 1px 8px; }
.merged-from { font-size: 0.75rem; font-weight: 600; color: var(--text-2); border: 1px solid var(--border); border-radius: 3px; padding: 0 6px; white-space: nowrap; }
.event-merge .event-dot { background: var(--accent); }
.side-action .button { width: 100%; justify-content: center; }
.side-action p { margin: 0 0 10px; }
.merge-search { display: flex; gap: 8px; max-width: 640px; margin: 4px 0 8px; }
.merge-search input { flex: 1; min-width: 0; }
.merge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.merge-choice { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.merge-choice:hover, .merge-choice:focus-visible { border-color: var(--accent); }
.merge-choice:hover .merge-go { color: var(--accent); }
.merge-ticket { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.merge-ticket .meta { font-size: 0.85rem; color: var(--text-2); }
.merge-go { font-size: 0.88rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.merge-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px; max-width: 980px; }
.merge-side { margin: 0; }
.merge-side .eyebrow { margin: 0 0 6px; }
.merge-side.is-target { border-color: var(--accent); }
.merge-arrow { align-self: center; font-size: 1.6rem; color: var(--text-2); }
.merge-effects { max-width: 980px; margin-top: 14px; }
.merge-effects ul { margin: 0 0 12px; padding-left: 20px; }
.merge-effects li { margin: 5px 0; }
.warning-box { background: var(--surface-2); border-left: 3px solid var(--warning); border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 14px; margin: 0 0 10px; }
.merge-actions { margin-top: 16px; align-items: center; flex-wrap: wrap; }
@media (max-width: 720px) {
  .merge-pair { grid-template-columns: 1fr; }
  .merge-arrow { transform: rotate(90deg); justify-self: center; }
  .merge-choice { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---- Formatted content (signatures and formatted replies) */
.is-rich { white-space: normal; overflow-wrap: anywhere; }
.is-rich p { margin: 0 0 8px; }
.is-rich div > p:last-child, .is-rich td p { margin-bottom: 0; }
.is-rich img { max-width: 100%; height: auto; vertical-align: middle; }
.is-rich table { border-collapse: collapse; }
.is-rich td, .is-rich th { padding: 1px; vertical-align: top; }
.is-rich a { color: var(--accent); }
.field-label { font-size: 0.82rem; font-weight: 600; color: var(--text-2); margin: 0 0 4px; }
.signature-editor .editor-toolbar { position: static; }
.signature-body { min-height: 150px; padding: 14px 16px; font-size: 0.95rem; line-height: 1.45; }
.signature-preview.is-rich { white-space: normal; }
/* Signatures are designed for white email backgrounds: in dark mode show them on a light
   "paper" panel (as mail apps do) so dark text and logos stay readable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.signature-body, .signature-preview.is-rich, .is-rich .email-signature) { background: #ffffff; color: #1f2328; }
  :root:not([data-theme="light"]) :is(.signature-body, .signature-preview.is-rich, .is-rich .email-signature) a { color: #0a7ea4; }
  :root:not([data-theme="light"]) .is-rich .email-signature { display: inline-block; max-width: 100%; padding: 10px 12px; border-radius: var(--radius); }
}
:root[data-theme="dark"] :is(.signature-body, .signature-preview.is-rich, .is-rich .email-signature) { background: #ffffff; color: #1f2328; }
:root[data-theme="dark"] :is(.signature-body, .signature-preview.is-rich, .is-rich .email-signature) a { color: #0a7ea4; }
:root[data-theme="dark"] .is-rich .email-signature { display: inline-block; max-width: 100%; padding: 10px 12px; border-radius: var(--radius); }
details.help { font-size: 0.88rem; color: var(--text-2); }
details.help summary { cursor: pointer; color: var(--accent); font-weight: 600; }
details.help ul { margin: 8px 0 0; padding-left: 20px; }
details.help li { margin: 4px 0; }

/* ---- Sign-in and error pages */
body.plain { background: var(--bg); }
.centered { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.narrow { width: 100%; max-width: 420px; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--emax-sky) 22%, transparent), transparent 60%), var(--bg); }
.login-card { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--emax-sky); border-radius: 14px; padding: 28px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.login-brand { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.login-logo { height: 40px; width: auto; align-self: flex-start; }
.login-title { border-top: 1px solid var(--border); padding-top: 16px; }
.login-title h1 { font: 700 20px/1.2 var(--font-heading); margin: 0; letter-spacing: -.01em; }
.login-title p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; }
.login-card .notice { font-size: 13px; }
.login-card .button-wide { margin-top: 4px; }
.ms-logo { width: 18px; height: 18px; }
.dev-login { margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--border-strong); text-align: left; display: flex; flex-direction: column; gap: 10px; }

/* ---- Small screens */
@media (max-width: 1100px) {
  .ticket-layout, .two-col { grid-template-columns: 1fr; }
  .ticket-side { position: static; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .shell > * { min-width: 0; }
  .sidebar { position: static; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border-right: 0; border-bottom: 1px solid var(--sidebar-border); }
  .brand { height: auto; margin: 0; padding: 0; border: 0; }
  .new-ticket { padding: 7px 12px; }
  .brand-logo { height: 26px; }
  .brand-name { display: none; }
  .nav-foot { display: none; }
  .theme-mobile { display: grid; }
  .sidebar nav { grid-column: 1 / -1; min-width: 0; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 2px; scrollbar-width: none; }
  .nav-heading { display: none; }
  .nav-link { white-space: nowrap; flex: none; padding: 6px 10px; }
  .nav-link.is-active { box-shadow: inset 0 -2px 0 var(--accent); }
  .nav-link.is-active::before { display: none; }
  .topbar { padding: 10px 16px; flex-wrap: wrap; }
  .who { display: none; }
  main#content { padding: 16px; }
  .flash { margin: 12px 16px 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .ticket-head { flex-direction: column; }
  .ticket-badges { padding-top: 0; justify-content: flex-start; }
  .ticket-head-side { align-items: flex-start; }
  .resolve-actions { justify-content: flex-start; }
  .notice-body { padding-left: 16px; }
  .area-tabs { order: -1; width: 100%; min-width: 0; margin: 0 0 4px; overflow-x: auto; scrollbar-width: none; }
  .area-tab { padding: 8px 10px; }
  .kb-settings { grid-template-columns: 1fr; }
  .kb-article-head { flex-direction: column; }
  .kb-article-actions { justify-content: flex-start; }
  .kb-article .kb-content, .editor-body { padding: 16px; }
  .editor-toolbar { top: 0; }
  .kb-hero { padding: 18px; }
}

/* ---- Logo for the page theme: dark logo on light backgrounds, light logo on dark ones */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-on-light { display: none; }
  :root:not([data-theme="light"]) .logo-on-dark { display: block; }
}
:root[data-theme="dark"] .logo-on-light { display: none; }
:root[data-theme="dark"] .logo-on-dark { display: block; }
.theme-label-dark, .theme-label-light { display: inline-flex; align-items: center; gap: 11px; }
.theme-label-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-label-dark { display: none; }
  :root:not([data-theme="light"]) .theme-label-light { display: inline-flex; }
}
:root[data-theme="dark"] .theme-label-dark { display: none; }
:root[data-theme="dark"] .theme-label-light { display: inline-flex; }

/* ---- Resolution email preview */
.email-preview { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: 12px 14px; margin: 8px 0 12px; }
.email-preview-subject { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* ---- Notification settings */
.button[hidden] { display: none; }
.scope-list small { display: block; color: var(--text-2); font-size: 0.8rem; }
.notify-form { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.notify-form .card h2, .notify-recent h2 { margin-top: 0; }
.channel { padding: 10px 0; border-top: 1px solid var(--border); }
.channel:first-of-type { border-top: 0; padding-top: 0; }
.channel-browser { margin: 8px 0 0 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.channel-browser p { margin: 0; flex-basis: 100%; color: var(--text-2); }
.notify-matrix th[scope="row"] { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.92rem; color: var(--text); background: transparent; }
.notify-matrix th[scope="row"] small { display: block; font-weight: 400; color: var(--text-2); font-size: 0.82rem; margin-top: 2px; }
.notify-matrix td, .notify-matrix thead th:not(:first-child) { text-align: center; width: 90px; vertical-align: middle; }
.notify-matrix input { width: 18px; height: 18px; }
.scope-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.notify-recent { max-width: 860px; margin-top: 16px; }
.notify-recent .mini-list li { gap: 4px 10px; }
@media (max-width: 760px) { .channel-browser { margin-left: 0; } .notify-matrix td, .notify-matrix thead th:not(:first-child) { width: 64px; } }

/* ---- Snooze */
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: flex-start; }
.snooze-menu { position: relative; }
.snooze-menu > summary { list-style: none; }
.snooze-menu > summary::-webkit-details-marker { display: none; }
.snooze-menu > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.snooze-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 320px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 10px 30px rgb(0 0 0 / 0.18); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.snooze-title { margin: 0; font-weight: 650; }
.snooze-presets { display: flex; flex-direction: column; }
.snooze-preset { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 0.92rem; text-align: left; cursor: pointer; }
.snooze-preset:hover, .snooze-preset:focus-visible { background: var(--surface-2); }
.snooze-preset .muted { font-size: 0.85rem; white-space: nowrap; }
.snooze-custom, .snooze-note-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.snooze-custom-row { display: flex; gap: 6px; }
.snooze-custom-row input { flex: 1; min-width: 0; }
.snooze-panel .muted.small { margin: 0; }
.snooze-banner { display: flex; align-items: center; gap: 12px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: 0.92rem; }
.snooze-banner .icon { width: 22px; height: 22px; color: var(--accent); flex: none; }
.snooze-banner > div { flex: 1; }
.snooze-banner form { margin: 0; }
.snooze-note { display: block; margin-top: 4px; color: var(--text-2); }
.snooze-tag { color: var(--accent); font-weight: 600; }
.event-snooze .event-dot { background: var(--accent); }
@media (max-width: 760px) {
  .head-actions { justify-content: flex-start; }
  .snooze-panel { left: 0; right: auto; width: min(320px, calc(100vw - 32px)); }
  .snooze-banner { flex-wrap: wrap; }
}

/* ---- Agents and roles */
.role-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 20px; margin: 0 0 16px; max-width: 980px; }
.role-help div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
.role-help dt { font-weight: 650; margin-bottom: 2px; }
.role-help dd { margin: 0; color: var(--text-2); font-size: 0.9rem; }
.add-agent { max-width: 980px; margin-bottom: 16px; }
.add-agent h2 { margin-top: 0; }
.add-agent-fields { display: grid; grid-template-columns: 1.3fr 1.3fr 0.7fr auto; gap: 12px; align-items: end; }
.add-agent-fields label { display: flex; flex-direction: column; gap: 4px; }
.add-agent-fields label > span { font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.add-agent-fields small { font-weight: 400; }
.role-form { margin: 0; }
.role-form select { min-width: 110px; }
.agent-access { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.agent-access form { margin: 0; }
@media (max-width: 900px) { .add-agent-fields { grid-template-columns: 1fr; } }
.agents-table td { vertical-align: middle; }
.agents-note { margin-top: 10px; }

/* ---- Zoho Assist */
.remote-form { margin: 0; position: relative; }
.remote-form .button .icon, a.button .icon { width: 16px; height: 16px; }
.remote-error { position: absolute; right: 0; top: calc(100% + 6px); width: 300px; z-index: 5; font-size: 0.85rem; }
.remote-item { list-style: none; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); font-size: 0.9rem; }
.remote-item > .icon { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 2px; }
.remote-item time { margin-left: auto; font-size: 0.82rem; color: var(--text-2); white-space: nowrap; }
.remote-text { display: flex; flex-direction: column; gap: 8px; }
.remote-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.setup-steps { padding-left: 20px; }
.setup-steps li { margin: 6px 0; }
@media (max-width: 760px) { .remote-error { left: 0; right: auto; } }

/* ---- Markdown editor (replies, notes, new tickets) */
.md-editor { position: relative; display: flex; flex-direction: column; }
.md-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid var(--border-strong); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-2); }
.md-toolbar .tool { width: 30px; height: 30px; }
.md-toolbar .tool .icon { width: 17px; height: 17px; }
.md-hint { margin-left: auto; padding: 0 6px; font-size: 0.78rem; color: var(--text-2); white-space: nowrap; }
.md-hint kbd { font: inherit; font-weight: 700; border: 1px solid var(--border-strong); border-radius: 3px; padding: 0 4px; background: var(--surface); }
.md-editor textarea { border-radius: 0 0 var(--radius) var(--radius); }
.md-slash { position: absolute; z-index: 30; width: 260px; max-height: min(460px, 70vh); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 10px 30px rgb(0 0 0 / 0.18); }
.md-slash li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 10px; scroll-margin: 4px; border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
.md-slash li code { font-size: 0.78rem; color: var(--text-2); background: none; }
.md-slash li:hover { background: var(--surface-2); }
.md-slash li.is-active { background: var(--accent-soft); }
.md-preview-wrap { margin-top: 8px; border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 8px 12px 10px; }
.md-preview-wrap[hidden] { display: none; }
.md-preview-label { margin: 0 0 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.md-preview { font-size: 0.95rem; }
/* Formatted messages: headings, lists, quotes and code from Markdown */
.message-body.is-rich h2 { font-size: 1.15rem; margin: 10px 0 6px; }
.message-body.is-rich h3 { font-size: 1.03rem; margin: 10px 0 6px; }
.message-body.is-rich h4 { font-size: 0.95rem; margin: 8px 0 4px; }
.message-body.is-rich ul, .message-body.is-rich ol { margin: 0 0 8px; padding-left: 22px; }
.message-body.is-rich li { margin: 2px 0; }
.message-body.is-rich blockquote { margin: 0 0 8px; padding: 2px 12px; border-left: 3px solid var(--border-strong); color: var(--text-2); }
.message-body.is-rich pre { margin: 0 0 8px; padding: 8px 10px; background: var(--surface-2); border-radius: 4px; overflow-x: auto; font-size: 0.85rem; }
.message-body.is-rich code { font-size: 0.88em; background: var(--surface-2); padding: 1px 4px; border-radius: 3px; }
.message-body.is-rich pre code { background: none; padding: 0; }
.message-body.is-rich hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
.message-body.is-rich > :last-child { margin-bottom: 0; }

/* Charts never push the page wider than the screen; the heatmap scrolls inside its card */
.chart-grid > * { min-width: 0; }
.heatmap-wrap { max-width: 100%; overflow-x: auto; position: relative; }

/* ---- Wide screens (1920×1080 and similar): use the full width, denser lists */
.col-wide { display: none; }
.chart-size-wide { display: none; }
.meta-who + .snooze-tag::before { content: " · "; color: var(--text-2); font-weight: 400; }
@media (min-width: 1600px) {
  main#content { max-width: none; padding: 24px 32px 48px; }
  .ticket-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; }
  /* the ticket queue: customer, organisation and category get their own columns; one line per ticket */
  table.tickets .col-wide { display: table-cell; }
  table.tickets .meta-who { display: none; }
  table.tickets .meta:not(:has(.snooze-tag)) { display: none; }
  table.tickets .meta { display: inline; margin: 0 0 0 10px; }
  table.tickets .ticket-link { display: inline; }
  table.tickets td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
  table.tickets .ticket-cell { min-width: 380px; }
  table.tickets .meta-who + .snooze-tag::before { content: none; }
  .chart-size-normal { display: none; }
  .chart-size-wide .chart-tick { font-size: 12.5px; }
  .chart-size-wide .chart-end { font-size: 13.5px; }
  /* new ticket: customer and handling on the left, the issue on the right, all on one screen */
  .new-ticket-form { max-width: 1500px; display: grid; grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); grid-template-areas: "error error" "customer issue" "handling issue" "actions actions"; gap: 20px 32px; align-items: start; }
  .new-ticket-form > .form-error { grid-area: error; }
  .new-ticket-form > .nt-customer { grid-area: customer; }
  .new-ticket-form > .nt-handling { grid-area: handling; grid-template-columns: 1fr; }
  .new-ticket-form > .nt-issue { grid-area: issue; }
  .new-ticket-form > .form-actions { grid-area: actions; }
  .new-ticket-form .nt-issue textarea { min-height: 300px; }
  /* KB categories fill the row instead of leaving an empty column */
  .category-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  /* list searches don't need the whole width */
  .filters .grow { flex: 0 1 640px; }
  .chart-size-wide { display: block; }
  /* cards share each row evenly, however many there are; full-width ones take a row */
  .chart-grid { display: flex; flex-wrap: wrap; align-items: stretch; }
  .chart-grid > * { flex: 1 1 360px; min-width: 0; }
  .chart-grid > .span-all { flex-basis: 100%; }
}

/* ---- Editors: preview switch, dropping files, status */
.md-toolbar .md-preview-toggle { width: auto; height: 30px; gap: 5px; padding: 0 8px; display: inline-flex; align-items: center; font-size: 0.8rem; font-weight: 600; }
.md-toolbar .md-preview-toggle:not(.is-on) { opacity: 0.65; }
.md-toolbar .md-preview-toggle.is-on { color: var(--accent); }
.md-hint.is-error { color: var(--danger); }
.md-editor.is-dropping textarea { background: var(--accent-soft); border-color: var(--accent); }
.md-preview img, .message-body.is-rich img { display: block; max-width: min(100%, 900px); height: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 4px 0; }
.editor-slash { width: 270px; }
.kb-editor-tips { display: none; }
.kb-editor-tips ul { margin: 4px 0 0; padding-left: 18px; }
.kb-editor-tips li { margin: 4px 0; }
.kb-editor-tips kbd { font: inherit; font-weight: 700; border: 1px solid var(--border-strong); border-radius: 3px; padding: 0 4px; }

/* ---- Knowledge base article: content with a side panel (contents, details, related) */
.kb-article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.kb-article-side { display: flex; flex-direction: column; gap: 14px; }
.kb-article-side h2 { font-size: 0.95rem; margin: 0 0 10px; }
.kb-article-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 0.9rem; }
.kb-toc .toc-3 { padding-left: 14px; font-size: 0.86rem; }
.kb-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 0.9rem; }
.kb-facts dt { color: var(--text-2); }
.kb-facts dd { margin: 0; }
.kb-content h2[id], .kb-content h3[id] { scroll-margin-top: 80px; }
@media (min-width: 1100px) {
  .kb-article { max-width: 1240px; }
  .kb-article-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .kb-article-side { position: sticky; top: 80px; }
}

@media (min-width: 1600px) {
  /* article: wider reading column and side panel */
  .kb-article { max-width: 1480px; }
  .kb-article-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
  /* editor: writing area plus a settings panel on the right */
  .kb-editor-form { max-width: 1480px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "error error" "title side" "editor side" "actions actions"; gap: 14px 28px; align-items: start; }
  .kb-editor-form > .form-error { grid-area: error; }
  .kb-editor-form > .title-input { grid-area: title; }
  .kb-editor-form > .editor { grid-area: editor; }
  .kb-editor-form > .sticky-actions { grid-area: actions; }
  .kb-editor-form > .kb-editor-side { grid-area: side; grid-template-columns: 1fr; position: sticky; top: 80px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; box-shadow: var(--shadow); }
  .kb-editor-tips { display: block; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
  .kb-editor-tips p { margin: 0; }
  .kb-editor-form .editor-body { min-height: 560px; }
  /* article lists: one line per article, with columns */
  .article-list li { display: grid; grid-template-columns: minmax(0, 1fr) 190px 220px 300px; align-items: center; gap: 16px; padding: 10px 0; }
  .article-list.no-category li { grid-template-columns: minmax(0, 1fr) 190px 300px; }
  .article-list .article-meta { display: contents; }
  .article-list .am-sep { display: none; }
  .article-list .am-badges { display: flex; gap: 6px; }
  .article-list .am-category, .article-list .am-updated { color: var(--text-2); font-size: 0.86rem; }
  .card.flush .article-list li { padding-left: 18px; padding-right: 18px; }
  /* the home page's two short lists keep the compact layout */
  .kb-lists .article-list li { display: block; }
  .kb-lists .article-list .article-meta { display: flex; }
  .kb-lists .article-list .am-sep { display: inline; }
  /* search results: two columns of result cards */
  .search-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Formatted editor in tickets and organisation notes (0.16) */
.ticket-editor { box-shadow: none; border-radius: var(--radius); position: relative; }
.ticket-editor:not(.is-enhanced) { border: 0; background: none; }
.ticket-editor .editor-toolbar { position: static; padding: 4px; border-radius: var(--radius) var(--radius) 0 0; }
.ticket-editor .editor-toolbar[hidden], .ticket-editor .editor-body[hidden], .ticket-editor textarea[hidden] { display: none; }
.ticket-editor .tool { width: 30px; height: 30px; }
.ticket-editor .block-style { font-size: 0.82rem; padding: 3px 4px; }
.ticket-editor .editor-body { min-height: 160px; max-height: 65vh; overflow-y: auto; padding: 10px 14px; font-size: 0.95rem; line-height: 1.55; }
.ticket-editor .editor-body.is-empty::before { left: 14px; top: 10px; }
.ticket-editor .editor-body > :first-child { margin-top: 0; }
.ticket-editor.is-enhanced textarea { border: 0; border-radius: 0 0 var(--radius) var(--radius); min-height: 160px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88rem; }
.ticket-editor.is-enhanced textarea:focus { outline: none; }
.composer.is-internal .ticket-editor .editor-body, .composer.is-internal .ticket-editor.is-enhanced textarea { background: transparent; }
.editor-hint { flex: 1 1 0; min-width: 0; text-align: right; padding: 0 6px; font-size: 0.78rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor-hint kbd { font: inherit; font-weight: 700; border: 1px solid var(--border-strong); border-radius: 3px; padding: 0 4px; background: var(--surface); }
.editor-hint.is-error { color: var(--danger); white-space: normal; }
.tool.tool-text { width: auto; display: inline-flex; gap: 5px; padding: 0 8px; font-size: 0.8rem; font-weight: 600; }
.ticket-editor .editor-body table { border-collapse: collapse; margin: 6px 0; }
.ticket-editor .editor-body th, .ticket-editor .editor-body td { border: 1px solid var(--border-strong); padding: 4px 8px; min-width: 60px; }
.message-body.is-rich table { border-collapse: collapse; margin: 6px 0; }
.message-body.is-rich th, .message-body.is-rich td { border: 1px solid var(--border-strong); padding: 4px 8px; text-align: left; }
.nt-issue .composer-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
@media (min-width: 1600px) {
  .new-ticket-form .nt-issue .editor-body { min-height: 300px; }
}
.export-menu > summary { display: inline-flex; align-items: center; gap: 6px; }
.export-menu > summary .icon { width: 16px; height: 16px; }
.export-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 290px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 10px 30px rgb(0 0 0 / 0.18); padding: 6px; display: flex; flex-direction: column; }
.export-panel a { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: 0.92rem; font-weight: 600; }
.export-panel a .muted { font-weight: 400; font-size: 0.8rem; }
.export-panel a:hover, .export-panel a:focus-visible { background: var(--surface-2); }
.kb-article-actions .export-menu { display: inline-block; }
/* narrow reply boxes: keep the toolbar on one line where possible */
.ticket-editor { container-type: inline-size; }
@container (max-width: 860px) {
  .ticket-editor .editor-hint { display: none; }
  .ticket-editor .tool-text span { display: none; }
  .ticket-editor .tool.tool-text { width: 30px; padding: 0; justify-content: center; margin-left: auto; }
}
/* newest first: the reply box sits at the top of the conversation (0.17) */
.thread > .composer { margin-bottom: 18px; }
.timeline-order { margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 700; }

@media (min-width: 761px) { .theme-mobile { display: none; } }

/* ---- Email (milestone 2): on tickets, Settings → Email and the fake mailbox */
.email-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 0.82rem; color: var(--text-3); }
.email-line .icon { width: 15px; height: 15px; flex: none; }
.email-line.is-sent { color: var(--success); }
.email-line.is-waiting { color: var(--warning); }
.email-line.is-failed { color: var(--danger); }
.email-line .link-button, .mail-log .link-button { padding: 0; font-size: 0.82rem; }
.inline-form { display: inline; margin: 0; }
.via-email { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; font-weight: 600; color: var(--text-2); border: 1px solid var(--border); border-radius: 3px; padding: 0 6px; white-space: nowrap; }
.via-email .icon { width: 13px; height: 13px; }
details.full-email { margin-top: 10px; font-size: 0.85rem; }
details.full-email summary { cursor: pointer; color: var(--accent); font-weight: 600; }
details.full-email .message-body { margin-top: 8px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.mail-note { margin: 0; }
.mail-note.is-off { color: var(--warning); }
.mail-note.is-fake { color: var(--s-hold); font-weight: 600; }

.mail-status { margin-bottom: 20px; }
.mail-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 24px; }
.mail-status-grid .field-label { margin: 0 0 2px; }
.mail-status-value { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.mail-status > p:last-child { margin-bottom: 0; }
.mail-cols { margin-bottom: 20px; }
.mode-options { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.mode-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.mode-option:hover { background: var(--surface-2); }
.mode-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.mode-option input { margin-top: 3px; }
.mode-option small { display: block; color: var(--text-2); font-size: 0.84rem; margin-top: 2px; }
.mail-graph { border-top: 1px solid var(--border); padding-top: 14px; }
.mail-help pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; color: var(--text); }
.mail-help pre code { border: 0; padding: 0; background: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.button-row form { margin: 0; }
.plain-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-2); }
.plain-list strong { color: var(--text); }
.mail-log td { font-size: 0.86rem; }
.mail-log td.break { max-width: 360px; }

.fake-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fake-mail { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.fake-mail.is-in { border-left-color: var(--success); }
.fake-mail summary { cursor: pointer; padding: 8px 12px; display: grid; gap: 2px; list-style: none; }
.fake-mail summary::-webkit-details-marker { display: none; }
.fake-dir { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.fake-subject { font-weight: 650; overflow-wrap: anywhere; }
.fake-meta { overflow-wrap: anywhere; }
.fake-body { padding: 4px 12px 10px; border-top: 1px solid var(--border); }
.fake-body .message-body { max-height: 420px; overflow: auto; }
@media (min-width: 1500px) {
  .fake-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.mail-cols .grid-2, .fake-cols .grid-2 { gap: 12px 16px; }
.mail-log-card { margin-top: 20px; }
@media (max-width: 720px) {
  .mail-log thead { display: none; }
  .mail-log tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .mail-log tr:last-child { border-bottom: 0; }
  .mail-log td:where(:not(.is-rich td)) { display: block; border: 0; padding: 2px 12px; }
  .mail-log td.break { max-width: none; }
}