/* 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; --row-alt: #f3f4f5;
  --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: #8a5a00; --p-low-bg: #fcefc7; --p-normal: #157a5c; --p-normal-bg: #ddf5ec; --p-high: #b3261e; --p-high-bg: #fbe4e2;
  --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;
  /* One type scale for the whole site: every size and weight comes from here */
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 28px;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", ui-monospace, monospace;
  font-family: var(--font);
  font-size: var(--fs-base);
  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; --row-alt: #1e2639;
    --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: #f0c04a; --p-low-bg: #3a2e0e; --p-normal: #3fd3a6; --p-normal-bg: #0f3329; --p-high: #f07b72; --p-high-bg: #3b1a18;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1422; --surface: #161d2e; --surface-2: #1a2235; --surface-3: #20293e; --row-alt: #1e2639;
  --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: #f0c04a; --p-low-bg: #3a2e0e; --p-normal: #3fd3a6; --p-normal-bg: #0f3329; --p-high: #f07b72; --p-high-bg: #3b1a18;
}

*, *::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: var(--fs-xl); line-height: 1.2; letter-spacing: -0.015em; margin: 0; font-weight: 600; color: var(--text); }
h2 { font-family: var(--font-heading); font-size: var(--fs-base); 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 var(--fs-sm)/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: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-xs); }
.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: 600; font-size: var(--fs-xs); flex: none; }
.avatar.small { width: 26px; height: 26px; font-size: var(--fs-2xs); }
.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: var(--fs-xs); color: var(--text-2); margin: 0 0 4px; letter-spacing: 0.01em; }
.back { display: inline-block; font-size: var(--fs-xs); 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: var(--fs-base); 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: var(--fs-xs); font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
label small { display: block; font-size: var(--fs-xs); 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: var(--fs-sm); color: var(--text); font-weight: 500; margin: 0; }
.input-narrow { width: 90px; text-align: right; }
.link-quiet { color: var(--text-2); font-size: var(--fs-xs); }
.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: var(--fs-sm); margin: 12px 0; }
/* What an action did: a balloon at the top middle of the screen, with a close button */
.toast { position: fixed; z-index: 100; top: 14px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(520px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 36px 10px 12px; border-radius: var(--radius-card); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); font-weight: 500; line-height: 1.4;
  animation: toast-in 0.18s ease-out; }
.toast.is-leaving { opacity: 0; transform: translate(-50%, -8px); transition: opacity 0.2s, transform 0.2s; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.is-leaving { transition: none; } }
.toast-text { margin: 0; overflow-wrap: anywhere; }
.toast-icon { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: var(--fs-xs); font-weight: 700; }
.toast-success { border-color: var(--success); }
.toast-success .toast-icon { background: var(--success-soft); color: var(--success); }
.toast-error { border-color: var(--danger); }
.toast-error .toast-icon { background: var(--danger-soft); color: var(--danger); }
.toast-close { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: var(--fs-md); line-height: 1; cursor: pointer; }
.toast-close:hover { background: var(--surface-3); color: var(--text); }

/* ---- 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: 600; margin-bottom: 10px; font-size: var(--fs-sm); }
.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; flex-wrap: wrap; 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: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); font-weight: 600; 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: var(--fs-xs); 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: var(--fs-md); }

/* ---- Badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: 3px; font-size: var(--fs-2xs); font-weight: 600; 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-low { color: var(--p-low); background: var(--p-low-bg); }
.priority-normal { color: var(--p-normal); background: var(--p-normal-bg); }
.priority-high, .priority-urgent { color: var(--p-high); background: var(--p-high-bg); }

/* ---- 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; }
.ticket-head > :first-child { flex: 1; min-width: 0; }
/* The subject and its pencil; open, the form takes the subject's place (without JavaScript it opens below it) */
.subject-line { display: flex; align-items: flex-end; gap: 4px 6px; }
.subject-line:has(.subject-edit[open]) { flex-wrap: wrap; }
.subject-line h1 { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.subject-edit { flex: none; }
.subject-edit > summary { list-style: none; width: 30px; height: 30px; }
.subject-edit > summary::-webkit-details-marker { display: none; }
.subject-edit > summary .icon { width: 17px; height: 17px; }
.subject-edit[open] { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
.subject-line.is-editing h1, .subject-line.is-editing .subject-edit > summary { display: none; }
.subject-form { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.subject-form input { flex: 1 1 320px; min-width: 0; font-size: var(--fs-lg); font-weight: 600; }
.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: var(--fs-xs); 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: var(--fs-sm); }
.notice-item summary { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; flex-wrap: wrap; }
.notice-item summary time { font-size: var(--fs-xs); color: var(--text-2); }
.notice-item .icon { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.notice-status { font-size: var(--fs-2xs); 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: var(--fs-sm); }
.message-head time { font-size: var(--fs-xs); color: var(--text-2); }
.message-kind { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); font-weight: 600; }
.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: var(--fs-xs); }
.event { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-xs); 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: 600; margin-bottom: 2px; }
.mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-xs); }
.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: var(--fs-sm); 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: var(--fs-xs); }
.section-title { font-size: var(--fs-md); 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: var(--fs-base); 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: var(--fs-xs); }
.category-count { margin-top: auto; padding-top: 6px; color: var(--text-2); font-size: var(--fs-xs); }
.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: 400; 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: var(--fs-xs); 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: var(--fs-sm); }
.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: var(--fs-base); 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: var(--fs-lg); margin: 26px 0 10px; }
.kb-content h3 { font-family: var(--font-heading); font-size: var(--fs-md); margin: 22px 0 8px; }
.kb-content h4 { font-family: var(--font-heading); font-size: var(--fs-base); 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: var(--mono); font-size: 0.88em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; }
.kb-content pre { font-family: var(--mono); font-size: var(--fs-xs); 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: 600; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); 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: var(--fs-xl); 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: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-xs); 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: 400; font-size: var(--fs-sm); color: var(--text); }
.kb-picker-meta { color: var(--text-2); font-size: var(--fs-xs); }
.kb-picker-empty { color: var(--text-2); padding: 8px; font-size: var(--fs-sm); }
.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: var(--fs-xs); 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: var(--fs-xs); font-weight: 600; margin: 0 0 4px; }
.stat-value { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.15; margin: 0; color: var(--text); }
.stat-delta, .stat-sub { font-size: var(--fs-xs); 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: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.chart-end { fill: var(--text); font-size: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-sm); 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: 600; 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: var(--fs-2xs); 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: var(--fs-xs); color: var(--text-2); }
.heat-key { display: inline-block; width: 16px; height: 12px; border-radius: 2px; }
.table-view { margin-top: 10px; font-size: var(--fs-xs); }
.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: var(--fs-xs); line-height: 1.45; white-space: pre-line; max-width: 280px; }
.chart-tooltip strong { display: block; font-size: var(--fs-xs); }
[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: var(--fs-xs); }
.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: var(--fs-xs); 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: var(--fs-2xs); 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: var(--fs-xs); color: var(--text-2); }
.merge-go { font-size: var(--fs-xs); 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: var(--fs-xl); 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: var(--fs-xs); 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: var(--fs-sm); 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: var(--fs-xs); 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 var(--fs-lg)/1.2 var(--font-heading); margin: 0; letter-spacing: -.01em; }
.login-title p { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.login-card .notice { font-size: var(--fs-sm); }
.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: minmax(0, 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; }
  .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: var(--fs-xs); }
.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: var(--fs-sm); color: var(--text); background: transparent; }
.notify-matrix th[scope="row"] small { display: block; font-weight: 400; color: var(--text-2); font-size: var(--fs-xs); 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: 600; }
.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: var(--fs-sm); text-align: left; cursor: pointer; }
.snooze-preset:hover, .snooze-preset:focus-visible { background: var(--surface-2); }
.snooze-preset .muted { font-size: var(--fs-xs); white-space: nowrap; }
.snooze-custom, .snooze-note-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); 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: var(--fs-sm); }
.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: 600; margin-bottom: 2px; }
.role-help dd { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.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: var(--fs-xs); 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: var(--fs-xs); }
.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: var(--fs-sm); }
.remote-item > .icon { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 2px; }
.remote-item time { margin-left: auto; font-size: var(--fs-xs); 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: var(--fs-2xs); 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: var(--fs-sm); }
.md-slash li code { font-size: var(--fs-2xs); 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: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.md-preview { font-size: var(--fs-sm); }
/* Formatted messages: headings, lists, quotes and code from Markdown */
.message-body.is-rich h2 { font-size: var(--fs-md); margin: 10px 0 6px; }
.message-body.is-rich h3 { font-size: var(--fs-base); margin: 10px 0 6px; }
.message-body.is-rich h4 { font-size: var(--fs-sm); 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: var(--fs-xs); }
.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, .draft-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: var(--fs-xs); }
  .chart-size-wide .chart-end { font-size: var(--fs-sm); }
  /* 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" "notify notify" "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-notify { grid-area: notify; }
  .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: var(--fs-xs); 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: var(--fs-sm); margin: 0 0 10px; }
.kb-article-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: var(--fs-sm); }
.kb-toc .toc-3 { padding-left: 14px; font-size: var(--fs-xs); }
.kb-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: var(--fs-sm); }
.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: var(--fs-xs); }
  .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: var(--fs-xs); padding: 3px 4px; }
.ticket-editor .editor-body { min-height: calc(10 * 1.55em + 20px); padding: 10px 14px; font-size: var(--fs-sm); 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: calc(10 * 1.55em + 20px); field-sizing: content; font-family: var(--mono); font-size: var(--fs-xs); }
.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: var(--fs-2xs); 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: var(--fs-xs); 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: var(--fs-sm); font-weight: 600; }
.export-panel a .muted { font-weight: 400; font-size: var(--fs-xs); }
.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: var(--fs-2xs); 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: var(--fs-xs); 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: var(--fs-xs); }
.inline-form { display: inline; margin: 0; }
.via-email { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-2xs); 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: var(--fs-xs); }
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: 600; 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: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-xs); }
.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: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.fake-subject { font-weight: 600; 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; }
}

/* ---- Customer portal (milestone 3): top bar instead of the side menu */
.portal { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.portal-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 0 28px; height: 64px; background: var(--sidebar); border-bottom: 1px solid var(--sidebar-border); }
.portal-brand { display: flex; align-items: center; gap: 12px; color: var(--text); }
.portal-brand:hover { text-decoration: none; }
.portal-brand-name { font: 700 var(--fs-sm)/1 var(--font-heading); letter-spacing: 0.24em; text-transform: uppercase; color: var(--sidebar-indicator); padding-top: 4px; }
.portal-nav { display: flex; align-items: stretch; gap: 4px; height: 100%; flex: 1; }
.portal-link { display: flex; align-items: center; padding: 0 12px; color: var(--sidebar-text); font-weight: 600; border-bottom: 3px solid transparent; }
.portal-link:hover { text-decoration: none; color: var(--sidebar-hover-text); background: var(--sidebar-hover); }
.portal-link.is-active { color: var(--sidebar-active-text); border-bottom-color: var(--sidebar-indicator); }
.portal-user { display: flex; align-items: center; gap: 14px; }
.portal-user form { margin: 0; }
.portal-who { display: flex; flex-direction: column; line-height: 1.2; max-width: 220px; }
.portal-who strong, .portal-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-who small { color: var(--text-3); font-size: var(--fs-2xs); }
.portal-new .icon { width: 16px; height: 16px; }
.portal-theme button { display: flex; align-items: center; padding: 6px 8px; border: 0; background: none; border-radius: var(--radius); color: var(--sidebar-text); font: inherit; cursor: pointer; }
.portal-theme button:hover { background: var(--sidebar-hover); }
.portal-theme button span span { display: none; }
main#content.portal-main { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 28px; }
main#content.portal-main.is-narrow { max-width: 520px; padding-top: 8vh; }
.portal-foot { text-align: center; padding: 18px; font-size: var(--fs-xs); color: var(--text-3); }
.portal-login h1 { margin-top: 0; font-size: var(--fs-lg); }
.portal-login .form-grid { margin: 16px 0; }
.portal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.portal-head h1 { margin-bottom: 2px; }
.portal-head p { margin: 0; }
.portal-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0 14px; }
.portal-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.portal-tab { padding: 6px 12px; border-radius: var(--radius); color: var(--text-2); font-weight: 600; border: 1px solid transparent; }
.portal-tab:hover { text-decoration: none; background: var(--surface-3); }
.portal-tab.is-active { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
.portal-tab .nav-count { margin-left: 4px; }
.portal-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.portal-filter input[type="search"] { min-width: 240px; }
.portal-tickets { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.portal-ticket + .portal-ticket { border-top: 1px solid var(--border); }
.portal-ticket a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; color: var(--text); }
.portal-ticket a:hover { text-decoration: none; background: var(--surface-2); }
.portal-ticket-main { display: flex; flex-direction: column; min-width: 0; }
.portal-ticket-subject { font-weight: 600; overflow-wrap: anywhere; }
.portal-ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.portal-ticket-head .ticket-head-side { flex-direction: row; align-items: center; }
.portal-ticket-head form { margin: 0; }
.portal-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: var(--fs-sm); }
.portal-facts dt { color: var(--text-2); }
.portal-facts dd { margin: 0; }
.portal-side-note { margin: 0 4px; }
.portal-kb-search { max-width: none; margin-bottom: 18px; background: var(--surface); }
.portal-kb-search input[type="search"] { width: 100%; }
.ticket-side .portal-kb-search { margin: 8px 0 0; }
.portal-kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 20px; }
.portal-kb-cat { display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.portal-kb-cat:hover { text-decoration: none; border-color: var(--accent); }
.portal-kb-cat > .small:last-child { color: var(--accent); margin-top: auto; }
.portal-articles { list-style: none; margin: 0; padding: 0; }
.portal-articles li + li { border-top: 1px solid var(--border); }
.portal-articles a { display: flex; flex-direction: column; gap: 3px; padding: 12px 4px; color: var(--text); }
.portal-articles a:hover { text-decoration: none; background: var(--surface-2); }
.portal-articles a strong { color: var(--accent); }
.portal-article { max-width: 900px; }
.contact-portal form { margin: 0; }
@media (max-width: 900px) {
  .portal-ticket-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .portal-top { height: auto; flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px 0; }
  .portal-brand { flex: 1; }
  .portal-nav { order: 3; flex-basis: 100%; height: 42px; margin: 0 -8px; }
  .portal-who, .portal-new span { display: none; }
  .portal-new { padding: 7px 9px; }
  main#content.portal-main { padding: 18px 16px; }
  .portal-head { flex-direction: column; align-items: flex-start; }
  .portal-ticket a { flex-direction: column; align-items: flex-start; gap: 6px; }
  .portal-filter, .portal-filter input[type="search"] { width: 100%; min-width: 0; }
  .portal-ticket-head { flex-direction: column; }
  .portal-ticket-head .ticket-head-side { align-items: center; }
}
.contact-portal { max-width: 760px; }
.plain-list + p { margin-top: 12px; }

/* ---- Search: suggestions as you type, results options, the portal's home */
.has-suggest { position: relative; }
.suggest-box { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; max-height: min(70vh, 520px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); padding: 6px 0; text-align: left; font-size: var(--fs-sm); color: var(--text); }
.suggest-box .suggest-group, .suggest-box .suggest-heading { margin: 6px 14px 2px; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.suggest-box .suggest-heading { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); color: var(--text-2); }
.suggest-box .suggest-note, .suggest-box .suggest-empty { margin: 6px 14px; font-size: var(--fs-xs); color: var(--text-2); }
.suggest-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 14px; color: var(--text); }
.suggest-item:hover, .suggest-item.is-active { background: var(--accent-soft); text-decoration: none; }
.suggest-title { font-weight: 400; overflow-wrap: anywhere; }
.suggest-title mark { background: none; color: var(--accent-text); font-weight: 700; padding: 0; }
.suggest-meta { font-size: var(--fs-xs); color: var(--text-3); }
.suggest-all { display: block; margin-top: 4px; padding: 8px 14px; border-top: 1px solid var(--border); font-weight: 600; font-size: var(--fs-xs); }
.suggest-all:hover { background: var(--surface-2); text-decoration: none; }
.search-note { margin: 8px 0; color: var(--text-2); }
.search-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 10px 0 14px; }
.search-options .inline-select select { padding: 5px 8px; }

.portal-hero { text-align: center; padding: 40px 20px 36px; margin: -28px -28px 28px; background: linear-gradient(180deg, var(--accent-soft), transparent); }
.portal-hero h1 { font-size: var(--fs-2xl); margin: 0 0 6px; }
.portal-hero p { margin: 0 0 18px; color: var(--text-2); }
.portal-hero-search { position: relative; display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-card); padding: 6px 6px 6px 14px; box-shadow: var(--shadow-pop); color: var(--text-2); }
.portal-hero-search input { flex: 1; border: 0; background: transparent; font-size: var(--fs-md); padding: 8px 0; outline: none; min-width: 0; color: var(--text); }
.portal-hero-search .suggest-box { top: calc(100% + 6px); }
.portal-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 8px; }
.portal-tile { display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.portal-tile:hover { text-decoration: none; border-color: var(--accent); }
.portal-tile .icon { width: 26px; height: 26px; color: var(--accent); }
.portal-tile strong { font-size: var(--fs-md); }
.suggest-field .suggest-box { top: 100%; }
@media (max-width: 720px) {
  .portal-hero { margin: -18px -16px 20px; padding: 28px 16px; }
  .portal-hero h1 { font-size: var(--fs-lg); }
  .portal-hero-search .button { display: none; }
}
.portal-articles mark { background: var(--accent-soft); color: var(--accent-text); padding: 0 1px; border-radius: 2px; }

/* ---- Zoho Desk migration */
.badge-failed { color: var(--danger); background: var(--danger-soft); }
.migration-counts { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 8px; }
details.migration-log { margin-top: 14px; font-size: var(--fs-xs); }
details.migration-log summary, details.migration-help summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.log-lines { list-style: none; margin: 8px 0 0; padding: 10px 12px; max-height: 360px; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: 3px; overflow-wrap: anywhere; }
.log-lines time { color: var(--text-3, var(--text-2)); margin-right: 6px; font-variant-numeric: tabular-nums; }
.log-lines .log-warn { color: var(--s-hold); }
.log-lines .log-error { color: var(--danger); }
details.migration-help .plain-list { margin-top: 10px; }
.migration-page .settings-cols { margin: 0; }
.migration-page .card h2 { margin-top: 0; }
.migration-note { margin: -8px 0 0; }

/* ---- Portal: whose tickets, and who may sign in */
.portal-scope { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); flex-wrap: wrap; }
.portal-scope a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; color: var(--text-2); font-weight: 600; }
.portal-scope a + a { border-left: 1px solid var(--border-strong); }
.portal-scope a:hover { text-decoration: none; background: var(--surface-3); }
.portal-scope a.is-active { background: var(--accent-soft); color: var(--accent-text); }
.portal-scope .icon { width: 16px; height: 16px; }
.portal-access { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.portal-access .icon { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: 1px; }
.portal-access p { margin: 0; white-space: pre-line; }
@media (max-width: 640px) { .portal-scope { width: 100%; } .portal-scope a { flex: 1; justify-content: center; } }

/* ---- Ticket list: several at once */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.bulk-bar.is-active { border-color: var(--accent); background: var(--accent-soft); }
.bulk-bar select { padding: 6px 8px; font-size: var(--fs-xs); }
.bulk-count { font-weight: 600; color: var(--text-2); margin-right: auto; }
.bulk-bar.is-active .bulk-count { color: var(--accent-text); }
.col-check { width: 34px; padding-right: 0 !important; }
.col-check input { width: 16px; height: 16px; cursor: pointer; }
tr.is-selected td { background: var(--accent-soft); }

/* ---- Response target */
.due-tag { display: block; margin-top: 4px; font-size: var(--fs-2xs); color: var(--text-2); white-space: nowrap; }
.due-tag.is-overdue { color: var(--danger); font-weight: 600; }
.ticket-badges .due-tag { display: inline; margin: 0; }

/* ---- Settings forms */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.input-unit { display: flex; align-items: center; gap: 8px; }
.input-unit input { max-width: 110px; }
.input-unit span { color: var(--text-2); font-size: var(--fs-sm); }
.day-picks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.day-picks legend { font-size: var(--fs-xs); font-weight: 600; margin-bottom: 6px; padding: 0; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; }
.danger-zone { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.button-danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.button-danger:hover { background: var(--danger-soft); }
.form-grid .day-picks { display: flex; flex-direction: row; }
.form-grid .day-picks label.check-inline { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 500; }

/* ---- Time spent */
.time-input input { width: 90px; }
.time-tag { font-size: var(--fs-2xs); color: var(--text-2); background: var(--surface-2); border-radius: 3px; padding: 1px 6px; }
.time-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; font-size: var(--fs-xs); }
.time-list li { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.time-list li .muted { display: block; }
.time-log summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: var(--fs-xs); }
.time-log form { margin-top: 10px; }
.stat-list { display: grid; gap: 2px; font-size: var(--fs-sm); font-weight: 600; }
tr.is-selected td { background: var(--accent-soft); }
.small-heading { font-size: var(--fs-xs); margin: 14px 0 6px; }

/* ---- Who else is on the ticket */
.presence-banner { margin: 0 0 12px; padding: 9px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); }
.presence-banner.is-busy { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.presence-banner[hidden] { display: none; }
.blocked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.blocked-list li { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.blocked-list small { display: block; }
.block-sender { margin-top: 10px; font-size: var(--fs-xs); }
.block-sender summary { cursor: pointer; color: var(--text-2); }
.block-sender form { display: grid; gap: 6px; margin-top: 8px; }
.rating-item { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; border-radius: var(--radius); background: var(--surface-2); border-left: 3px solid var(--s-resolved); list-style: none; margin: 8px 0; font-size: var(--fs-sm); }
.rating-item.is-bad { border-left-color: var(--danger); background: var(--danger-soft); }
.rating-choice { display: flex; gap: 10px; flex-wrap: wrap; }
.rating-choice label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; font-weight: 600; }
.rating-choice input:checked + span { color: var(--accent-text); }
.rating-choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
tr.is-muted td { color: var(--text-2); }
.domain-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: -6px; }
.chip { border: 1px dashed var(--border-strong); background: var(--surface); color: var(--accent-text); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.chip:hover { border-style: solid; background: var(--accent-soft); }
.portal-cc { margin-top: 12px; font-size: var(--fs-sm); }
.portal-cc summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.portal-cc form { margin-top: 8px; }
a.portal-who { color: inherit; text-decoration: none; }
a.portal-who:hover strong { text-decoration: underline; }

/* ---- Phone layout: sections and side menu behind a Menu button */
.menu-button { display: none; }
@media (max-width: 760px) {
  .menu-button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--sidebar-border); background: transparent; color: inherit; border-radius: var(--radius); padding: 6px 10px; font: inherit; font-weight: 600; cursor: pointer; }
  .menu-button .icon { width: 18px; height: 18px; }
  .shell { grid-template-rows: auto 1fr; }
  .sidebar { grid-template-columns: minmax(0, 1fr) auto auto; }
  html.js .sidebar nav, html.js .area-tabs { display: none; }
  html.js.menu-open .area-tabs { display: flex; flex-wrap: wrap; overflow: visible; }
  html.js.menu-open .sidebar nav { display: flex; flex-direction: column; overflow: visible; gap: 2px; }
  html.js.menu-open .nav-heading { display: flex; margin-top: 8px; }
  html.js.menu-open .nav-link { padding: 9px 10px; }
  html.js.menu-open .nav-link.is-active { box-shadow: none; background: var(--accent-soft); }
  .topbar .search { flex: 1 1 200px; }
}

/* With JavaScript the bar only appears once tickets are ticked, floating above the list */
.bulk-bar[hidden] { display: none; }
.bulk-bar.is-floating { position: fixed; z-index: 40; left: 50%; bottom: 20px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 10px 12px; box-shadow: 0 8px 28px rgb(0 0 0 / 0.18); background: var(--surface); }
.bulk-bar.is-floating .bulk-count { margin-right: 6px; }
@media (min-width: 761px) { .bulk-bar.is-floating { left: calc(50% + 124px); max-width: calc(100vw - 248px - 32px); } }
form[data-bulk]:has(.bulk-bar.is-floating:not([hidden])) { padding-bottom: 80px; }

/* ---- Search snippets and saved views */
.search-snippet { display: block; font-size: var(--fs-xs); color: var(--text-2); margin-top: 3px; max-width: 70ch; }
.search-snippet mark { background: var(--accent-soft); color: var(--accent-text); padding: 0 2px; border-radius: 2px; }
.save-view { position: relative; }
.save-view > summary { list-style: none; cursor: pointer; }
.save-view > summary::-webkit-details-marker { display: none; }
.save-view-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 300px; display: grid; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.save-view-form label { display: grid; gap: 4px; font-size: var(--fs-xs); font-weight: 600; }
.related-articles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.related-articles li { display: grid; gap: 1px; font-size: var(--fs-sm); }
.related-articles li .link-button { justify-self: start; }
.system-problem { display: flex; gap: 10px; margin: 12px 28px 0; padding: 10px 14px; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); font-size: var(--fs-sm); }
.system-problem p { margin: 0 0 4px; }
.system-problem .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.system-problem a { color: inherit; font-weight: 600; text-decoration: underline; }
@media (max-width: 760px) { .system-problem { margin: 12px 16px 0; } }
.contact-tools summary { cursor: pointer; }
.contact-tools form { margin-top: 12px; }
.contact-tools.is-danger summary strong { color: var(--danger); }
.article-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; }
.article-feedback span { font-weight: 600; margin-right: auto; }
.article-feedback .button.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }

/* ---- Keyboard shortcuts */
.keys kbd, .shortcut-help kbd, .lead kbd, .shortcuts-form kbd {
  font: inherit; font-size: .85em; font-weight: 700; border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; background: var(--surface); color: var(--text); white-space: nowrap;
}
.shortcut-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.shortcut-table thead th:nth-child(2) { width: 13rem; }
.shortcut-table thead th.sc-default { width: 11rem; }
.shortcut-table th, .shortcut-table td { text-align: left; padding: 8px 10px 8px 0; border-top: 1px solid var(--border); vertical-align: middle; }
.shortcut-table thead th { border-top: 0; font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.shortcut-table tbody th { font-weight: 400; font-size: var(--fs-sm); color: var(--text); text-transform: none; letter-spacing: normal; background: none; }
.shortcut-table tbody th small { display: block; font-size: var(--fs-xs); text-transform: none; letter-spacing: normal; }
.shortcut-table tbody tr:hover { background: none; }
.shortcut-input { width: 11rem; max-width: 100%; font-family: var(--mono); }
.shortcut-input.is-changed { border-color: var(--accent); }
.shortcut-input:focus { background: var(--accent-soft); }
table.tickets tbody tr.is-current { box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-soft); }
.shortcut-help {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; padding: 20px 24px;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop);
}
.shortcut-help::backdrop { background: rgba(11, 16, 32, .45); }
.shortcut-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shortcut-help h2 { margin: 0; font-size: var(--fs-md); }
.shortcut-help h3 { margin: 18px 0 6px; font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.shortcut-help dl { display: grid; grid-template-columns: 8.5rem 1fr; gap: 6px 16px; margin: 0; }
.shortcut-help dt { margin: 0; }
.shortcut-help dd { margin: 0; color: var(--text-2); }
@media (max-width: 720px) { .shortcut-table .sc-default { display: none; } }

/* ---- Settings → Help: the manual */
.manual-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.manual-toc ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 4px; }
.manual-toc a { text-decoration: none; }
.manual-toc a:hover { text-decoration: underline; }
.manual { display: grid; gap: 16px; min-width: 0; max-width: 920px; }
.manual-intro { color: var(--text-2); }
.manual-section { scroll-margin-top: 16px; }
.manual-section h2 { margin-top: 0; }
.manual-section table { width: 100%; }
@media (min-width: 1100px) {
  .manual-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .manual-toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
}
@media (max-width: 720px) {
  .manual-section table { display: block; overflow-x: auto; }
  .manual-section th, .manual-section td { min-width: 7.5rem; word-break: normal; overflow-wrap: normal; }
}

/* Ticket lists: "something new" when the list couldn't reload by itself */
.live-notice { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-text); }
.live-notice a { font-weight: 700; }

/* "Send reply" with a menu on hover: send, send and resolve (with or without the email) */
.send-menu { position: relative; display: inline-flex; }
.send-menu-list {
  display: none; position: absolute; z-index: 30; top: 100%; right: 0; min-width: 290px; padding: 6px 0; margin: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
}
/* a gap the pointer can cross from the button to the menu without it closing */
.send-menu-list::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.send-menu:hover .send-menu-list:not([hidden]), .send-menu:focus-within .send-menu-list:not([hidden]) { display: block; }
.send-menu-list { top: calc(100% + 6px); }
.send-menu-list button {
  display: block; width: 100%; padding: 8px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.send-menu-list button:hover, .send-menu-list button:focus-visible { background: var(--accent-soft); color: var(--accent-text); outline: none; }
.send-menu-list button + button { border-top: 1px solid var(--border); }

/* Drafts: under the reply box, and in ticket lists */
.draft-status { margin: 6px 0 0; }
.draft-status .link-button { font-size: inherit; }
.draft-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--s-pending-bg); color: var(--s-pending); font-size: var(--fs-2xs); font-weight: 700; vertical-align: 2px; white-space: nowrap; }
.draft-tag svg { width: 12px; height: 12px; }

/* Ticket lists: the Agent column (far right), with a dropdown on unassigned tickets */
table.tickets .col-agent { text-align: left; white-space: nowrap; }
.pick-up { padding: 3px 12px; font-size: var(--fs-xs); font-weight: 600; }

/* Settings → Customer portal: who can use it */
.portal-whitelist .access-filter { width: 100%; margin: 4px 0 8px; }
.access-list { list-style: none; margin: 8px 0 12px; padding: 0; max-height: 440px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.access-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-top: 1px solid var(--border); }
.access-list li:first-child { border-top: 0; }
.access-list li[hidden] { display: none; }
.access-list li > span small, .access-list .check small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.access-list .check { margin: 0; }
.access-matches { max-height: 260px; background: var(--surface-2); }
.access-search { display: flex; gap: 8px; margin: 8px 0; }
.access-search input { flex: 1; min-width: 0; }

/* Ticket lists: one line per name and subject; too long is cut with "…", the full text shows on
   mouse over (title). The subject column takes the room that's left, so more columns fit. */
table.tickets td.ticket-cell { width: 100%; max-width: 0; min-width: 260px; }
table.tickets .ticket-line { min-width: 0; }
table.tickets .ticket-link, table.tickets .meta-who, table.tickets .search-snippet, table.tickets .cell-text {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.tickets .search-snippet { max-width: none; }
table.tickets .meta { display: flex; align-items: center; gap: 0; min-width: 0; }
table.tickets .meta > .snooze-tag, table.tickets .meta > .draft-tag { flex: none; }
table.tickets .cell-text { max-width: 16rem; }
table.tickets .col-agent .cell-text { max-width: 12rem; }
@media (min-width: 1600px) {
  /* subject and tags side by side on one line */
  table.tickets .ticket-line { display: flex; align-items: baseline; gap: 10px; }
  table.tickets .ticket-link { display: block; flex: 0 1 auto; }
  table.tickets .meta { display: flex; flex: none; margin: 0; }
  table.tickets .meta:not(:has(.snooze-tag, .draft-tag)) { display: none; }
  table.tickets td.ticket-cell { min-width: 320px; }
}

/* Ticket lists: tickets waiting for our answer (new, or the customer wrote last) have their ID
   and subject in bold; once an agent replies they are in normal weight. */
table.tickets .ticket-link { font-weight: 400; }
table.tickets tr.is-unanswered .ticket-link, table.tickets tr.is-unanswered .ticket-number { font-weight: 700; }
table.tickets tr.is-unanswered .ticket-number { color: var(--text); }

/* Ticket lists: rows light up under the mouse
table.tickets tbody tr:where(:hover) { background: var(--surface-3); }

/* A customer's name on a message goes to their contact page */
.message-author { color: inherit; }
.message-author:hover { color: var(--accent); }

/* Ticket lists: the customer's name goes to their contact page */
table.tickets .cell-link { color: inherit; }
table.tickets .cell-link:hover { color: var(--accent); text-decoration: underline; }

/* Reply box: the Notify customer switch (used by Send and resolve) */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-2); cursor: pointer; user-select: none; }
.switch[hidden] { display: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--border-strong); transition: background .15s; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.resolve-actions[hidden] { display: none; }
.preline { white-space: pre-line; }

/* A ticket with your draft: only the "Your draft" tag under the subject, not the customer */
table.tickets .meta > .draft-tag:first-child { margin-left: 0; }

/* Directory → Contacts and Organisations: tick boxes, the Portal sign-in column, pages */
table.directory .col-check { width: 1%; }
table.directory .col-portal { white-space: nowrap; }
.portal-box { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.portal-box input:disabled { cursor: default; }
table.directory tbody tr.is-selected { background: var(--accent-soft); }
.directory-pager { align-items: center; }
.directory-pager .spacer { flex: 1; }
.button.is-disabled { opacity: .45; pointer-events: none; }
.select-list li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.select-list li:last-child { border-bottom: 0; }
.form-grid.is-danger { border-color: var(--danger); }
.select-list { list-style: none; padding-left: 0; }

/* Ticket lists: the customer first; the ticket number after the subject (always shown, the
   subject is cut with "…" before it) */
table.tickets .col-customer { white-space: nowrap; }
table.tickets .ticket-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
table.tickets .ticket-title .ticket-link { flex: 0 1 auto; }
table.tickets .ticket-title .ticket-number { flex: none; margin: 0; font-size: var(--fs-xs); }
@media (min-width: 1600px) {
  table.tickets .ticket-line .ticket-title { flex: 0 1 auto; }
}
table.tickets .col-customer .cell-text { max-width: 12rem; }
@media (min-width: 1600px) { table.tickets .col-customer .cell-text { max-width: 16rem; } }
/* phones: the customer goes back under the subject, so the subject keeps the room */
@media (max-width: 760px) { table.tickets .col-customer { display: none; } }
/* the customer's name and organisation under the subject only on phones (elsewhere: the
   Customer column, with the email address and organisation on mouse over) */
@media (min-width: 761px) {
  table.tickets .meta-who { display: none; }
  table.tickets .meta:not(:has(.snooze-tag, .draft-tag)) { display: none; }
}
/* some room between the customer and the subject */
table.tickets th.col-subject, table.tickets td.ticket-cell { padding-left: 40px; }

/* Settings → Export */
.export-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px 12px; margin: 0; display: grid; gap: 8px; }
.export-group legend { font-weight: 600; padding: 0 4px; }
.export-range { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.export-range label { flex: 1 1 140px; }

/* Settings → Backups */
.code-block { margin: 8px 0; padding: 10px 12px; background: var(--code-bg); color: #e7ecf5; border: 1px solid var(--code-border); border-radius: var(--radius); font: var(--fs-xs)/1.5 var(--mono); white-space: pre; overflow-x: auto; }
.input-with-unit { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.input-with-unit input { width: 90px; }
.compact-table { width: 100%; }
.compact-table td, .compact-table th { padding: 6px 8px; }
.success-text { color: var(--success); }
.settings-cols > *, .settings-cols .stack > * { min-width: 0; }
.code-block { max-width: 100%; }
.plain-list > li { min-width: 0; }

/* Article lists: tick articles to move them or change who can read them */
.article-list.selectable li { position: relative; padding-left: 30px; }
.card.flush .article-list.selectable li { padding-left: 46px; }
.article-list.selectable li > input[data-bulk-item] { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); margin: 0; }
.article-list li.is-selected { background: var(--accent-soft); }
.select-all { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-2); cursor: pointer; }
.select-all:has(input[hidden]) { display: none; }
.bulk-bar select { width: auto; max-width: 260px; }

/* Settings pages that share one menu item: tabs along the top */
.page-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--border); }
.page-tab { padding: 8px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 500; text-decoration: none; }
.page-tab:hover { color: var(--text); }
.page-tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; }

/* Ticket list: everything clickable changes colour on hover, like the customer names */
table.tickets .ticket-link:hover, table.tickets .ticket-link:focus-visible { color: var(--accent); text-decoration: underline; }
table.tickets .sort-link, .kb-category-table .sort-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; white-space: nowrap; }
table.tickets .sort-link:hover, table.tickets .sort-link:focus-visible, .kb-category-table .sort-link:hover, .kb-category-table .sort-link:focus-visible { color: var(--accent); text-decoration: underline; }
table.tickets th.is-sorted .sort-link, .kb-category-table th.is-sorted .sort-link { color: var(--text); }
table.tickets .sort-arrow, .kb-category-table .sort-arrow { font-size: 0.9em; }

/* Ticket list: the Filter button and its panel */
.filter-menu { position: relative; }
.filter-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.filter-menu > summary::-webkit-details-marker { display: none; }
.filter-menu > summary .icon { width: 16px; height: 16px; }
.filter-menu > summary.is-filtered, .filter-menu[open] > summary { border-color: var(--accent); color: var(--accent-text); }
.filter-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: var(--fs-xs); font-weight: 600; display: inline-grid; place-items: center; }
.filter-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 45; width: min(640px, calc(100vw - 32px)); max-height: min(78vh, 720px); overflow-y: auto; display: grid; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-card, var(--radius)); box-shadow: var(--shadow-pop); text-align: left; }
.filter-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
@media (max-width: 600px) { .filter-groups { grid-template-columns: minmax(0, 1fr); } }
.filter-panel fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 2px; align-content: start; }
.filter-panel legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); font-weight: 600; }
.filter-option { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: var(--fs-sm); cursor: pointer; min-width: 0; }
.filter-option span:not(.muted) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-option:hover { background: var(--surface-3); }
.filter-option input { margin: 0; flex: none; }
.filter-scroll { max-height: 190px; overflow-y: auto; display: grid; gap: 2px; align-content: start; }
.filter-search { width: 100%; margin-bottom: 6px; padding: 6px 8px; font-size: var(--fs-xs); }
.filter-sort { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 600; }
.filter-sort select { width: auto; padding: 6px 8px; }
.filter-save { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.filter-save .filter-option { padding-left: 0; font-weight: 600; }
.filter-save .filter-name, .filter-save small { display: none; }
.filter-save:has([data-save-toggle]:checked) .filter-name, .filter-save:has([data-save-toggle]:checked) small { display: block; }
.filter-name input { width: 100%; }
.filter-actions { display: flex; justify-content: flex-end; gap: 8px; }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: var(--fs-xs); }
.filter-chip a { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--text-2); text-decoration: none; font-size: var(--fs-base); line-height: 1; }
.filter-chip a:hover { background: var(--surface-3); color: var(--accent); }

/* AI assistant: the draft panel in the reply box */
.ai-button .icon, .ai-draft-head .icon, .portal-chat h2 .icon, .ai-off-note .icon { width: 15px; height: 15px; color: var(--accent); }
.ai-button { display: inline-flex; align-items: center; gap: 5px; }
.ai-off-note { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.ai-draft { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); display: grid; gap: 8px; }
.ai-draft[hidden], .ai-draft [hidden] { display: none; }
.ai-draft.is-busy { opacity: 0.85; }
.ai-draft-head { display: flex; align-items: center; gap: 10px; }
.ai-draft-head strong { display: inline-flex; align-items: center; gap: 6px; }
.ai-confidence.badge { font-size: var(--fs-2xs); }
.ai-confidence.is-high { color: var(--s-open); background: var(--s-open-bg); }
.ai-confidence.is-medium { color: var(--s-pending); background: var(--s-pending-bg); }
.ai-confidence.is-low { color: var(--danger); background: var(--danger-soft); }
.ai-draft-body { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; max-height: 320px; overflow-y: auto; }
.ai-draft-body:empty { display: none; }
.ai-status { margin: 0; }
.ai-note { margin: 0; color: var(--text-2); }
.ai-sources { margin: 0; color: var(--text-2); }
.ai-draft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-instruction { flex: 1 1 220px; }
.ai-instruction input { padding: 6px 10px; }

/* AI assistant: the help chat in the customer portal */
.portal-chat { display: grid; gap: 10px; margin: 0 0 20px; }
.portal-chat[hidden] { display: none; }
.portal-chat h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.portal-chat p { margin: 0; }
.portal-chat-log { display: grid; gap: 8px; }
.portal-chat-log:empty { display: none; }
.chat-bubble { max-width: 85%; padding: 9px 12px; border-radius: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-me { justify-self: end; background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.chat-bot { justify-self: start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-bot.is-waiting { color: var(--text-2); font-style: italic; }
.chat-bot.is-error { color: var(--danger); }
.chat-bot .is-rich > :last-child { margin-bottom: 0; }
.chat-links, .chat-ticket { margin: 8px 0 0; font-size: var(--fs-sm); }
.portal-chat-form { display: flex; gap: 8px; align-items: flex-end; }
.portal-chat-form textarea { flex: 1; resize: vertical; min-height: 44px; }
.portal-hero-search .button .icon { width: 15px; height: 15px; }
.remote-done { color: var(--text-2); font-size: var(--fs-sm); }
.narrow-form { max-width: 620px; margin-top: 16px; }

/* An organisation's contacts: one line per person */
.org-contacts { margin-top: 16px; }
.org-contacts-table { table-layout: fixed; }
.org-contacts-table th:nth-child(1) { width: 30%; }
.org-contacts-table th:nth-child(2) { width: 36%; }
.org-contacts-table th:nth-child(3) { width: 22%; }
.org-contacts-table th:nth-child(4) { width: 12%; }
.org-contacts-table td { white-space: nowrap; }
.org-contacts-table .cell-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .org-contacts-table th:nth-child(3), .org-contacts-table td:nth-child(3) { display: none; }
  .org-contacts-table th:nth-child(1) { width: 38%; }
  .org-contacts-table th:nth-child(2) { width: 38%; }
  .org-contacts-table th:nth-child(4) { width: 24%; }
}

/* Ticket lists on phones: each ticket is a little card of two or three lines
   1. the subject and number (wrapping onto a second line when long)
   2. the customer and organisation
   3. status, priority, last update, and the agent or Pick up */
.mobile-only { display: none; }
@media (max-width: 760px) {
  .mobile-only { display: inline; }
  table.tickets, table.tickets tbody { display: block; width: 100%; }
  table.tickets thead { display: none; }
  table.tickets tbody tr {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    padding: 12px 14px 12px 44px; border-bottom: 1px solid var(--border);
  }
  table.tickets tbody tr:last-child { border-bottom: 0; }
  table.tickets tbody td { display: block; padding: 0; border: 0; min-width: 0; }
  table.tickets td.col-check { position: absolute; left: 14px; top: 14px; }
  table.tickets td.col-customer { display: none; }
  /* line 1 and 2: the subject (and the customer under it) take the whole width */
  table.tickets td.ticket-cell { flex: 1 0 100%; width: auto; max-width: 100%; min-width: 0; padding: 0; }
  /* line 3: status, priority, when, and the agent on the right; wraps when it doesn't fit */
  table.tickets td.col-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  table.tickets td.col-status .due-tag { margin: 0; }
  table.tickets td.col-updated { color: var(--text-2); font-size: var(--fs-xs); }
  table.tickets td.col-agent { margin-left: auto; text-align: right; font-size: var(--fs-xs); color: var(--text-2); }
  table.tickets td.col-agent .cell-text { max-width: 8rem; }
  table.tickets .pick-up { min-height: 28px; padding: 0 10px; font-size: var(--fs-xs); }
  /* the subject may take two lines; the number follows it */
  table.tickets .ticket-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; }
  table.tickets .ticket-title .ticket-link { display: inline; white-space: normal; font-size: var(--fs-base); }
  table.tickets .ticket-title .ticket-number { display: inline; margin-left: 6px; }
  table.tickets .meta { margin-top: 3px; font-size: var(--fs-xs); color: var(--text-2); }
  table.tickets .search-snippet { margin-top: 3px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
/* "Install app": in the side menu on computers, an icon in the top bar on phones */
.install-mobile { display: none; }
@media (max-width: 760px) { .install-mobile:not([hidden]) { display: grid; } }
.col-fill { min-width: 220px; }
.backup-now { margin-bottom: 16px; }
.backup-now .card-head form { margin: 0; }

/* KB categories: place in the list with arrows to move it */
.kb-category-table .col-order { width: 1%; white-space: nowrap; }
.kb-category-table .col-move { width: 1%; white-space: nowrap; }
.order-number { display: inline-block; min-width: 1.5em; text-align: right; font-variant-numeric: tabular-nums; }
.order-arrows { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.order-arrows form { margin: 0; display: block; }
.order-arrow { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.order-arrow .icon { width: 16px; height: 16px; }
.order-arrow:hover, .order-arrow:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--surface-2); }
.order-arrow.is-off { opacity: .35; cursor: default; pointer-events: none; }
.category-articles { list-style: none; margin: 0; padding: 0; }
.category-articles li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.category-articles li:last-child { border-bottom: 0; }
.category-articles .article-meta { display: inline-flex; align-items: center; gap: 6px; }

.article-group { margin: 0; padding: 10px 16px 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); background: var(--surface-2); border-top: 1px solid var(--border); }
.article-group:first-of-type { border-top: 0; }

.user-menu > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; border-radius: var(--radius); padding: 3px 6px; }
.user-menu > summary:hover, .user-menu[open] > summary { background: var(--surface-2); }
.user-panel { width: 220px; }
.export-panel.user-panel a { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; }
.user-panel a .icon { width: 16px; height: 16px; flex: none; color: var(--text-2); }
.user-panel a[aria-current="page"] { background: var(--surface-2); }

/* Saved reply page: fits the window, so only the editor and the preview scroll (wide screens) */
@media (min-width: 901px) {
  .main:has(.fit-page) { height: 100vh; }
  main#content:has(.fit-page) { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 20px; }
  .fit-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .fit-page .page-head { flex: none; }
  .fit-page .back { flex: none; }
  .fit-cols { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .fit-form, .fit-preview { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .fit-form > * { flex: none; }
  .fit-form > .fit-grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .fit-form .editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .fit-form .editor-body { flex: 1; min-height: 0; overflow-y: auto; }
  .fit-form .editor textarea { flex: 1; min-height: 0; resize: none; }
  .fit-preview .fit-scroll { flex: 1; min-height: 0; overflow-y: auto; }
}

/* The address a link goes to, as a balloon when the mouse rests on a link */
.link-balloon { position: fixed; z-index: 60; max-width: min(520px, 90vw); padding: 5px 9px; border-radius: 6px; background: #1f2a33; color: #f2f6f8; font-size: var(--fs-xs); line-height: 1.35; box-shadow: 0 4px 14px rgb(0 0 0 / 0.28); overflow-wrap: anywhere; pointer-events: none; }
.link-balloon[hidden] { display: none; }

/* ---- Ticket page in three panes: conversation | reply | information */
.ticket-notices:empty { display: none; }
.ticket-panes { display: flex; flex-direction: column; gap: 16px; }
.pane { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pane-reply { order: -1; }
.pane-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.pane-tools .small { font-size: var(--fs-xs); }
.pane-thread .timeline { margin: 0; gap: 8px; }
.pane-thread .message { padding: 10px 12px; }
.message-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text-2); cursor: pointer; flex: none; }
.message-toggle:hover { background: var(--surface-2); color: var(--text); }
.message-toggle .icon { width: 16px; height: 16px; transition: transform 0.12s; }
.message-toggle[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.message-head { cursor: default; }
.pane-thread .message-head { flex-wrap: wrap; row-gap: 2px; }
.pane-thread .message-head strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pane-thread .message-head time { white-space: nowrap; }
.pane-tools button { white-space: nowrap; }
.message-snippet { display: none; min-width: 0; flex: 1 0 100%; padding-left: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: var(--fs-xs); }
.message.is-collapsed .message-head { margin-bottom: 0; cursor: pointer; }
.message.is-collapsed .message-snippet { display: block; }
.message.is-collapsed > :not(.message-head) { display: none; }
.reply-people { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; }
.reply-to { font-size: var(--fs-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-menu { position: relative; }
.people-menu > summary { list-style: none; cursor: pointer; }
.people-menu > summary::-webkit-details-marker { display: none; }
.people-panel { width: 300px; right: 0; left: auto; padding: 12px; }
.pane-side .card { margin: 0; }
.pane-side .kb-picker { border: 0; padding: 0; }
.pane-side .kb-picker-results { max-height: 240px; }

@media (min-width: 1180px) {
  .main:has(.ticket-fit) { height: 100vh; }
  main#content:has(.ticket-fit) { flex: 1; min-height: 0; display: flex; flex-direction: column; max-width: none; padding: 16px 24px 20px; }
  .ticket-fit { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  .ticket-fit > .back, .ticket-fit > .ticket-head, .ticket-fit > .ticket-notices { flex: none; }
  .ticket-fit > .ticket-head { margin-bottom: 0; }
  .ticket-fit > .back { margin-bottom: 0; }
  .ticket-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(230px, 0.5fr); grid-template-rows: minmax(0, 1fr); gap: 20px; }
  .pane { overflow-y: auto; padding-right: 4px; }
  .pane-reply { order: 0; }
}

.related-articles input[type="search"] { width: 100%; margin: 0 0 10px; }
.related-articles p { margin: 8px 0 0; }

/* Reply box: links on the first line; second line, at the right: Notify customer, Send and resolve, Send reply */
.pane-reply .composer-foot > .spacer { flex: 1 0 100%; height: 0; }
.pane-reply .composer-foot > .switch { order: 5; margin-left: auto; }
.pane-reply .composer-foot > .send-resolve { order: 6; }
.pane-reply .composer-foot > .send-reply { order: 7; }
.pane-reply .composer-foot > .button[hidden] { display: none; }
.pane-reply .composer.is-internal .composer-foot > .send-reply { margin-left: auto; }

.article-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.button-small { padding: 2px 10px; font-size: var(--fs-xs); min-height: 0; line-height: 1.5; }
.related-articles li .article-meta .button { justify-self: auto; }
.pane-reply .composer-foot { gap: 8px 6px; }
.pane-reply .composer-foot > .switch { white-space: nowrap; }
@media (min-width: 1180px) { .ticket-panes { gap: 16px; } }
.pane-reply .composer-foot .button { padding-left: 10px; padding-right: 10px; }

.reply-signature { padding: 6px 0 0; font-size: var(--fs-sm); user-select: none; cursor: default; overflow-x: auto; }
.composer.is-internal .reply-signature { display: none; }
.ticket-editor.has-footer .editor-flow { min-height: calc(10 * 1.55em + 20px); cursor: text; padding-bottom: 10px; }
.ticket-editor.has-footer .editor-flow > .editor-body { min-height: 2.5em; padding-bottom: 0; }
.ticket-editor.has-footer .editor-flow > .reply-signature { padding: 6px 14px 0; }
.pane-reply .composer-foot > .foot-export { order: 4; }
.export-menu.is-compact > summary { padding-left: 9px; padding-right: 9px; }
.export-menu.is-compact > summary::after { display: none; }
.pane-reply .foot-export .export-panel { right: auto; left: 0; top: auto; bottom: calc(100% + 6px); }

.kind-row { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kind-row .segmented { align-self: stretch; }
.kind-row .remote-inline { font-size: var(--fs-xs); font-weight: 600; padding-top: 0; padding-bottom: 0; }
.related-articles li { min-width: 0; }
.related-articles li > a { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Emails are laid out with tables (signatures, banners): no lines around the cells unless the sender drew them */
.message-body.is-email td, .message-body.is-email th, .email-signature td, .email-signature th { border: 0; padding: 1px; }

/* Pencil next to a category heading (admins) */
.heading-edit { display: flex; align-items: center; gap: 6px; min-width: 0; }
.heading-edit h1 { min-width: 0; overflow-wrap: anywhere; }