/* Cedgetec Support desk: hand-written stylesheet implementing the Claude
   Design handoff (support-ui.css of the "Cedgetec Support" canvas). Warm
   paper, white cards with hairline borders, small uppercase mono labels, one
   blue accent, internal content on a notepad yellow.

   Theming: every token picks its value with light-dark(), so with the
   default `color-scheme: light dark` the palette follows the browser
   preference on its own. The theme switch in the sidebar sets
   `data-theme="light|dark"` on <html> (persisted in localStorage), which
   pins color-scheme and thereby overrides the preference. System removes
   the attribute again.

   The first part is the design's stylesheet as handed off. App parts that
   the static artboards do not need (focus, disabled, loading, forms, the
   theme switch) follow under "Desk app". */

/* --- Fonts (self-hosted variable fonts, latin and latin-ext) ------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Explicit choice from the theme switch: pinning color-scheme flips every
   light-dark() token at once. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* --- Design system (support-ui.css) -------------------------------------- */

:root {
  color-scheme: light dark;

  --bg: light-dark(#f3f1eb, #0f0f11);
  --surface: light-dark(#ffffff, #16161a);
  --surface-2: light-dark(#faf9f5, #1b1b1f);
  --fg: light-dark(#17171a, #f4f2ed);
  --fg-2: light-dark(#56544e, #a5a29b);
  --fg-3: light-dark(#716e68, #8a8780);
  --line: light-dark(#e0dcd2, #26262c);
  --line-strong: light-dark(#cfc9bc, #3a3a42);

  --accent: light-dark(hsl(227 100% 62%), hsl(227 100% 75%));
  --accent-text: light-dark(hsl(227 75% 46%), hsl(227 100% 80%));
  --accent-tint: light-dark(hsl(227 100% 62% / 0.12), hsl(227 100% 75% / 0.14));
  --btn-bg: light-dark(hsl(227 75% 46%), hsl(227 100% 78%));
  --btn-fg: light-dark(#ffffff, #0f0f11);

  --amber-ink: light-dark(#8a5a00, #f2c46b);
  --amber-tint: light-dark(#fdf1d6, rgb(242 196 107 / 0.14));
  --red: light-dark(#d34a33, #e8705a);
  --red-ink: light-dark(#a4302a, #ff8b80);
  --red-tint: light-dark(#fdecea, rgb(255 139 128 / 0.13));
  --green-ink: light-dark(#2e7a4d, #8fe3b0);
  --green-tint: light-dark(#e8f5ec, rgb(143 227 176 / 0.12));

  --internal: light-dark(#fff6d8, #221d10);
  --internal-line: light-dark(#e6d38a, #574a20);
  --internal-ink: light-dark(#5f4a00, #f0d98a);
  --internal-tag: light-dark(#ecd98f, #4a3f1b);

  --log-bg: light-dark(#1d1f22, #0b0b0d);
  --shadow: 0 18px 44px light-dark(rgb(30 26 16 / 16%), rgb(0 0 0 / 55%));
  --project: hsl(227 80% 60%);

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 12px;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

.sx-app {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  position: relative;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
}
.sx-app a { color: var(--accent-text); text-underline-offset: 3px; }
.sx-i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.eyebrow {
  margin: 0;
  font: 500 11.5px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.eyebrow.accent { color: var(--accent-text); }
.mono { font-family: var(--mono); font-size: 0.88em; }
.muted { color: var(--fg-2); }
.faint { color: var(--fg-3); }
.small { font-size: 13.5px; }
.xs { font-size: 12.5px; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; }
.code {
  font-family: var(--mono);
  font-size: 0.86em;
  background-color: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
}

/* Brand mark */
.mark-bg { fill: var(--fg); }
.mark-fg { fill: none; stroke: var(--bg); stroke-width: 2.6; stroke-linecap: round; }
.mark-dot { fill: var(--accent); }

/* Desk sidebar */
.sx-side {
  box-sizing: border-box;
  flex: 1 1 248px;
  max-width: 248px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 14px 18px;
  background-color: var(--surface);
  border-right: 1px solid var(--line);
}
.sx-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  & .sub { display: block; margin-top: 3px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
}
.sx-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background-color: var(--bg);
  color: var(--fg-3);
  font: inherit;
  font-size: 13.5px;
  & kbd { margin-left: auto; font: 500 11px var(--mono); padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--fg-2); }
}
.sx-nav { display: flex; flex-direction: column; gap: 2px; }
.sx-nav-label { padding: 0 10px 8px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.sx-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--r-s);
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  .sx-app &:hover { background-color: var(--surface-2); color: var(--fg); }
  &.on { background-color: var(--accent-tint); color: var(--accent-text); }
  .sx-app &.on { color: var(--accent-text); }
  .sx-app & { color: var(--fg-2); text-decoration: none; }
  & .count { margin-left: auto; font: 500 12px var(--mono); color: var(--fg-3); }
  & .count.hot { color: var(--amber-ink); background-color: var(--amber-tint); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
  & .dot { width: 9px; height: 9px; border-radius: 3px; background-color: var(--project); flex-shrink: 0; }
}
.sx-me {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  & .xs { display: block; font-weight: 400; color: var(--fg-3); }
}

/* Main column */
.sx-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; }
.sx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
  padding: 34px 36px 22px;
}
.sx-head-text { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 18rem; }
.sx-title { margin: 0; font-size: 34px; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.sx-lede { margin: 0; max-width: 62ch; color: var(--fg-2); font-size: 15.5px; }
.sx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sx-body { padding: 0 36px 44px; display: flex; flex-direction: column; gap: 18px; }
.sx-h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }

/* Controls */
.sx-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background-color: var(--surface);
  color: var(--fg);
  font: 500 14px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  .sx-app &, .px-app & { color: var(--fg); text-decoration: none; }
  &:hover { background-color: var(--surface-2); }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  &.primary { background-color: var(--btn-bg); border-color: var(--btn-bg); }
  .sx-app &.primary, .px-app &.primary { color: var(--btn-fg); }
  &.primary:hover { filter: brightness(1.07); }
  &.quiet { background-color: transparent; border-color: transparent; }
  .sx-app &.quiet, .px-app &.quiet { color: var(--fg-2); }
  &.quiet:hover { background-color: var(--surface-2); }
  &.big { min-height: 44px; padding: 0 18px; font-size: 15px; }
  &.sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
}
.sx-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--surface);
  font: 400 12.5px/1 var(--mono);
  color: var(--fg-3);
  white-space: nowrap;
  & b { color: var(--fg); font-weight: 500; }
}
.sx-pill {
  display: inline-flex;
  align-items: center;
  font: 500 12px/1.7 var(--mono);
  color: var(--accent-text);
  background-color: var(--accent-tint);
  border-radius: 999px;
  padding: 0 9px;
  white-space: nowrap;
}
.sx-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sx-label { font: 500 11.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-2); }
.sx-input, .sx-textarea, .sx-select {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
}
.sx-input, .sx-select { min-height: 40px; padding: 0 12px; }
.sx-textarea { padding: 10px 12px; line-height: 1.55; resize: vertical; }
.sx-textarea.md { font-family: var(--mono); font-size: 13px; }
.sx-select { display: flex; align-items: center; gap: 10px; }
.sx-hint { font-size: 13px; color: var(--fg-2); line-height: 1.5; }
.sx-switch {
  appearance: none;
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: var(--line-strong);
  cursor: pointer;
  &::before { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background-color: var(--surface); transition: transform 0.15s; }
  &:checked { background-color: var(--btn-bg); &::before { transform: translateX(16px); background-color: var(--btn-fg); } }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  &:disabled { opacity: 0.45; cursor: not-allowed; }
}
.sx-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--surface-2);
  & button { all: unset; padding: 5px 12px; border-radius: 5px; font: 500 13px/1.3 var(--font); color: var(--fg-2); cursor: pointer; }
  & button.on { background-color: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong); }
}

/* Status: a pill with a shape, so it reads without color too */
.sx-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font: 500 12.5px/1 var(--font);
  white-space: nowrap;
  width: max-content;
  &::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: currentColor; }
  &.needs { background-color: var(--amber-tint); color: var(--amber-ink); }
  &.assistant { background-color: var(--accent-tint); color: var(--accent-text); &::before { border-radius: 2px; transform: rotate(45deg); } }
  &.waiting { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg-2); &::before { background-color: transparent; box-shadow: inset 0 0 0 2px currentColor; } }
  &.resolved { background-color: var(--green-tint); color: var(--green-ink); }
  &.closed { background-color: var(--surface-2); color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line); }
  &.late { background-color: var(--red-tint); color: var(--red-ink); }
  &.tiny { height: 20px; padding: 0 8px; font-size: 11.5px; }
}
.sx-class {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  white-space: nowrap;
  width: max-content;
  &.bug { color: var(--red-ink); background-color: var(--red-tint); border-color: color-mix(in srgb, var(--red-ink) 30%, transparent); }
}
.sx-project {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-3);
  & i { width: 8px; height: 8px; border-radius: 3px; background-color: var(--project); display: inline-block; }
}

/* Card, table, stat */
.sx-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background-color: var(--surface);
  min-width: 0;
}
.sx-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.sx-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background-color: var(--surface);
  font-size: 13.5px;
  color: var(--fg-2);
  & b { font: 600 18px/1 var(--font); color: var(--fg); font-variant-numeric: tabular-nums; }
  &.alert b { color: var(--red-ink); }
}
/* Positioned, so an absolute label in a cell (.sx-visually-hidden) scrolls
   with the table and does not widen the page. */
.sx-table-box { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background-color: var(--surface); }
.sx-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 14.5px;
  & th { text-align: left; padding: 11px 16px; font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-2); background-color: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
  & td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
  & tr:last-child td { border-bottom: none; }
  & tbody tr:hover td { background-color: var(--surface-2); }
  & .subject { display: inline-block; margin-top: 3px; font-weight: 550; text-decoration: none; }
  .sx-app & .subject { color: var(--fg); text-decoration: none; }
  & .snippet { display: block; margin-top: 2px; color: var(--fg-3); font-size: 13.5px; max-width: 34rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.sx-id { font: 500 12px var(--mono); color: var(--fg-3); }

/* Time against the response target */
.sx-sla { display: flex; flex-direction: column; gap: 6px; min-width: 140px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sx-sla .bar { height: 4px; border-radius: 2px; background-color: var(--line); overflow: hidden; }
.sx-sla .bar span { display: block; height: 100%; background-color: var(--accent); border-radius: 2px; }
.sx-sla.warn .bar span { background-color: var(--amber-ink); }
.sx-sla.over .bar span { background-color: var(--red); }
.sx-sla.over { color: var(--red-ink); font-weight: 600; }

/* People */
.sx-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  &.lg { width: 34px; height: 34px; font-size: 12px; }
  &.agent { background-color: var(--accent-tint); color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
}

/* Conversation */
.sx-msg { display: flex; gap: 12px; align-items: flex-start; }
.sx-msg .bubble {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background-color: var(--surface);
  & p { margin: 0; line-height: 1.6; }
  & .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-3); & b { color: var(--fg); font-weight: 600; } }
}
.sx-msg.assistant .bubble { background-color: color-mix(in srgb, var(--accent) 5%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.sx-msg.internal .bubble { background-color: var(--internal); border-color: var(--internal-line); }
.sx-msg.system .bubble { background-color: var(--surface-2); }
.sx-msg.pending .bubble { border-style: dashed; }
.sx-msg.pending .sx-avatar { animation: sx-pulse 1.6s ease-in-out infinite; }
@keyframes sx-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .sx-msg.pending .sx-avatar { animation: none; } }

/* Split proposal and split dialog */
.sx-proposal { gap: 12px; border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.sx-parts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
  & li::marker { font: 500 12px var(--mono); color: var(--fg-3); }
  & b { display: block; font-weight: 600; }
  & .small { margin-top: 2px; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Investigator: report states, related tickets, tool calls */
.sx-working { animation: sx-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sx-working { animation: none; } }
.sx-calls {
  margin: 0;
  padding-left: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  & li::marker { font: 500 12px var(--mono); color: var(--fg-3); }
  & summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
  & .sx-log { margin-top: 8px; max-height: 320px; overflow: auto; white-space: pre-wrap; }
}
.sx-call-input { font-size: 12px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
button.sx-attach { font: inherit; cursor: pointer; text-align: left; }

/* GitLab issue popup */
.sx-repos { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; & legend { padding: 0; margin-bottom: 8px; } }
.sx-repo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.sx-label-input { min-height: 26px; width: 12rem; padding: 0 10px; font: 500 12px var(--mono); border-radius: 999px; }
.sx-markdown {
  box-sizing: border-box;
  min-height: 18rem;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background-color: var(--surface);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  & h4 { margin: 14px 0 6px; font-size: 15px; font-weight: 600; }
  & h4:first-child { margin-top: 0; }
  & p, & ul, & ol { margin: 0 0 8px; }
  & ul, & ol { padding-left: 22px; }
  & .sx-log { margin: 0 0 8px; }
}

/* Suspected bugs */
.sx-bug { flex-direction: row; flex-wrap: wrap; gap: 16px 24px; }
.sx-bug-main { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sx-bug-actions { flex: 1 1 180px; display: flex; flex-direction: column; gap: 8px; max-width: 220px; }
.sx-part { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sx-event { display: flex; align-items: center; gap: 10px; font: 400 12px var(--mono); color: var(--fg-3); }
.sx-event::before, .sx-event::after { content: ""; flex: 1; height: 1px; background-color: var(--line); }
.sx-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background-color: var(--surface-2);
  font-size: 13px;
  white-space: nowrap;
  .sx-app &, .px-app & { color: var(--fg); text-decoration: none; }
  &.internal { background-color: var(--internal); border-color: var(--internal-line); }
}

.sx-log {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-s);
  background-color: var(--log-bg);
  color: #e6e3dc;
  font: 400 12px/1.65 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  & .w { color: #f2c46b; }
  & .k { color: #a7bdff; }
}
.sx-kv {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0;
  font-size: 13.5px;
  & dt { color: var(--fg-3); }
  & dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
}

/* Modal, as the popups on the architecture page */
.sx-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 56px 16px;
  background-color: light-dark(rgb(23 23 26 / 38%), rgb(0 0 0 / 60%));
  backdrop-filter: blur(6px);
}
.sx-modal {
  box-sizing: border-box;
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background-color: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sx-modal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); & strong { font-size: 17px; font-weight: 600; } }
.sx-modal-body { display: flex; flex-direction: column; gap: 18px; padding: 20px; }
.sx-modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); background-color: var(--surface-2); }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1.75 var(--mono);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0 4px 0 10px;
  & button { all: unset; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--fg-3); cursor: pointer; }
}
.sx-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background-color: var(--surface);
  cursor: pointer;
  & input { margin: 3px 0 0; accent-color: var(--btn-bg); }
  &.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background-color: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
  & .name { font: 500 13px var(--mono); }
  & .scope { font-size: 12.5px; color: var(--fg-3); }
}

/* Portal */
.px-app {
  min-height: 100%;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  & a { color: var(--accent-text); text-underline-offset: 3px; }
}
.px-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 14px 32px;
  background-color: var(--surface);
  border-bottom: 1px solid var(--line);
}
.px-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15.5px; letter-spacing: -0.01em; .px-app & { color: var(--fg); text-decoration: none; } }
.px-install {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--surface-2);
  font: 400 12.5px var(--mono);
  color: var(--fg-2);
  & i { width: 8px; height: 8px; border-radius: 3px; background-color: var(--project); }
  & b { color: var(--fg); font-weight: 500; }
}
.px-nav { display: flex; gap: 20px; }
.px-nav a { padding: 6px 0; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; .px-app & { color: var(--fg-2); text-decoration: none; } }
.px-app .px-nav a.on { color: var(--fg); border-bottom-color: var(--accent); }
.px-wrap { box-sizing: border-box; width: min(980px, 100%); margin: 0 auto; padding: 52px 24px 72px; display: flex; flex-direction: column; gap: 26px; }
.px-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; }
.px-head-text { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 18rem; }
.px-h1 { margin: 0; font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.px-lede { margin: 0; font-size: 18px; line-height: 1.55; color: var(--fg-2); max-width: 58ch; }
.px-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-m); background-color: var(--surface); overflow: hidden; }
.px-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  .px-app & { color: inherit; text-decoration: none; }
  &:last-child { border-bottom: none; }
  &:hover { background-color: var(--surface-2); }
  &.hot { background-color: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
  & .title { font-weight: 600; font-size: 16.5px; letter-spacing: -0.005em; }
  & .meta { grid-column: 1; font-size: 13.5px; color: var(--fg-3); }
  & .side { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
}
.px-decision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  padding: 20px 22px;
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  border-radius: var(--r-m);
  background-color: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.px-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-m);
  background-color: var(--bg);
  text-align: center;
}

/* --- Desk app ------------------------------------------------------------
   What the static artboards do not need: the page frame, focus, disabled
   and loading states, form controls, the theme switch, and the layout
   classes that the artboards wrote as inline styles. */

html, body { margin: 0; min-height: 100%; background-color: var(--bg); }
body { -webkit-font-smoothing: antialiased; }
#main { min-height: 100vh; }
.sx-app { min-height: 100vh; }
.sx-app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sx-app button, .sx-app input, .sx-app select, .sx-app textarea { font-family: inherit; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 3px; }
.internal-ink { color: var(--internal-ink); }
.eyebrow.internal-ink { color: var(--internal-ink); }
.sx-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sx-loading {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--fg-3);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Sidebar: stays in view while the page scrolls, once there is room. */
@media (min-width: 900px) {
  .sx-side { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
}
.sx-brand { text-decoration: none; .sx-app & { color: var(--fg); } }
.sx-search { cursor: pointer; text-align: left; &:hover { border-color: var(--line-strong); color: var(--fg-2); } }
.sx-nav-item.off { opacity: 0.5; cursor: not-allowed; .sx-app &:hover { background-color: transparent; color: var(--fg-2); } }
.sx-nav-sep { height: 1px; margin: 8px 10px; background-color: var(--line); }
.sx-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.sx-foot-row { display: flex; align-items: center; gap: 4px; & .sx-nav-item { flex: 1; min-width: 0; } & .sx-btn.icon { width: 34px; min-height: 34px; } }
.sx-me { margin-top: 0; & .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; } & .xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .xs.dev { color: var(--amber-ink); } }

/* Controls */
.sx-btn {
  &:disabled { opacity: 0.45; cursor: not-allowed; }
  &:disabled:hover { background-color: var(--surface); filter: none; }
  &.primary:disabled:hover { background-color: var(--btn-bg); }
  &.quiet:disabled:hover { background-color: transparent; }
  &.icon { padding: 0; width: 30px; }
}
label.sx-btn { position: relative; }
.sx-seg button:disabled { opacity: 0.45; cursor: not-allowed; }
.sx-filter {
  position: relative;
  /* The design draws filters as pills without an arrow; the border
     answers the hover instead. */
  & select {
    appearance: none;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    field-sizing: content;
    color: var(--fg);
    font: 500 12.5px/1 var(--mono);
    cursor: pointer;
  }
  & select option { color: initial; background-color: initial; font-family: var(--font); }
  &:hover { border-color: var(--line-strong); }
  &:focus-within { border-color: var(--accent); }
}
.sx-searchbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--fg-3);
  & input { border: none; background: transparent; color: var(--fg); font: 400 13px/1 var(--font); width: 16rem; outline: none; }
  &:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
}
.sx-input:focus, .sx-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sx-input.mono { font-family: var(--mono); font-size: 13.5px; }
.sx-field.note .sx-textarea { background-color: var(--internal); border-color: var(--internal-line); }
.sx-chips span button { display: grid; place-items: center; }

/* States */
.sx-top { padding-top: 34px; }
.sx-empty { color: var(--fg-2); font-size: 14px; align-items: flex-start; & > p { margin: 0; } }
.sx-error { color: var(--red-ink); }
.sx-notice {
  margin: 0 36px 14px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--red-ink) 30%, transparent);
  border-radius: var(--r-s);
  background-color: var(--red-tint);
  font-size: 13.5px;
  .sx-body & { margin: 0; }
  &.info { border-color: var(--line); background-color: var(--surface-2); color: var(--fg-2); }
}

/* Ticket lists */
.sx-table .link-row { cursor: pointer; }
.sx-table td.customer, .sx-table .customer { font-weight: 550; }
.sx-cell-status { display: flex; flex-direction: column; gap: 6px; }

/* Ticket page (the chat itself is under "Ticket chat" at the end) */
.sx-back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; width: max-content; }
.sx-msg .bubble p { white-space: pre-line; overflow-wrap: anywhere; }
.sx-event a { font: inherit; }
.sx-attach {
  &.evidence { white-space: normal; min-height: 28px; padding: 4px 10px; align-items: flex-start; text-align: left; & .sx-i { margin-top: 2px; } & .mono { overflow-wrap: anywhere; } }
  &.purged { opacity: 0.55; text-decoration: line-through; }
  a&:hover { border-color: var(--line-strong); }
}

/* Projects */
/* Settings: the list of projects, and the sections of one project, each
   with its title and hint beside its content. */
.sx-table .sx-project-name { display: inline-flex; align-items: center; gap: 10px; & .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; background-color: var(--project); } }
.sx-project-slug { display: block; margin-left: 20px; }
.sx-table td.sx-chevron { width: 32px; text-align: right; color: var(--fg-3); }
.sx-body.sx-sections { gap: 0; }
.sx-section {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  &:first-child { border-top: none; padding-top: 4px; }
}
.sx-section-text { flex: 1 1 200px; max-width: 240px; display: flex; flex-direction: column; gap: 6px; & .sx-hint { margin: 0; } }
.sx-section-body { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sx-section.wide {
  align-items: flex-end;
  & .sx-section-text { flex: 1 1 320px; max-width: 62ch; }
  & .sx-section-body { flex-basis: 100%; }
}
@media (max-width: 899px) { .sx-section-text { max-width: none; } }
.sx-project-title { display: flex; align-items: center; gap: 12px; & .swatch { width: 14px; height: 14px; border-radius: 4px; background-color: var(--project); } }
.sx-kv dt.repo { color: var(--fg); }
/* The settings of a project: wide labels, and on a phone each label above
   its value. */
.sx-settings-kv { grid-template-columns: 11rem minmax(0, 1fr); }
@media (max-width: 640px) { .sx-settings-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; & dd + dt { margin-top: 10px; } } }

/* Portal */
.px-app { min-height: 100vh; }
.px-brand .sx-i { flex-shrink: 0; }
.px-split { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.px-conversation { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.px-aside { flex: 1 1 300px; max-width: 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; &.narrow { flex-basis: 280px; max-width: 340px; } }
.px-bullets { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.px-form { flex: 999 1 560px; gap: 20px; padding: 24px 26px; }
.px-form-foot { gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.px-swatch { width: 8px; height: 8px; border-radius: 3px; background-color: var(--project); }
.px-decision-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.px-split-box { flex-direction: column; align-items: stretch; & .sx-parts { font-size: 15px; } }
.px-drop { cursor: pointer; &:hover { border-color: var(--accent); } }
.accent-ink { color: var(--accent-text); }
.px-head .sx-btn { align-self: flex-end; }
@media (max-width: 899px) { .px-top { padding: 12px 16px; } .px-wrap { padding: 28px 16px 48px; } .px-aside { max-width: none; } }

/* Narrow screens: the sidebar becomes a full-width block on top. */
@media (max-width: 899px) {
  .sx-side { max-width: none; flex-basis: 100%; border-right: none; border-bottom: 1px solid var(--line); }
  .sx-head { padding: 26px 16px 18px; }
  .sx-body { padding: 0 16px 32px; }
  .sx-notice { margin: 0 16px 14px; }
  .sx-searchbox input { width: 100%; }
}

/* Dialogs cover the viewport, not only the app box of an artboard. */
.sx-layer { position: fixed; overflow-y: auto; }
.sx-modal-head .sx-btn { margin-right: -6px; }

/* --- Desk redesign: the split inbox ---------------------------------------
   Direction B of the "Cedgetec Support" canvas: Instrument Sans, a white
   ground, the ticket list beside the open ticket, a teal accent, black
   primary buttons and internal content in violet. The tokens apply to the
   desk only (.sx-app), so the portal keeps the design above. The sidebar is
   light in the light theme and dark in the dark theme. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.sx-app {
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: light-dark(#ffffff, #121315);
  --surface: light-dark(#ffffff, #17181b);
  --surface-2: light-dark(#f7f7f5, #1b1c20);
  --fg: light-dark(#16171a, #ececee);
  --fg-2: light-dark(#4f5159, #a9acb4);
  --fg-3: light-dark(#6f727a, #80838c);
  --line: light-dark(#e8e7e3, #26282d);
  --line-strong: light-dark(#d6d5d0, #383b42);
  --accent: light-dark(#0b7a75, #5fd0c6);
  --accent-text: light-dark(#08696a, #72dacf);
  --accent-tint: light-dark(#e5f2f1, #12302e);
  --btn-bg: light-dark(#16171a, #ececee);
  --btn-fg: light-dark(#ffffff, #121315);
  --internal: light-dark(#f6f2fd, #1d1729);
  --internal-line: light-dark(#e2d7f6, #392c52);
  --internal-ink: light-dark(#5b3aa8, #c6b0ff);
  --internal-tag: light-dark(#e8ddfa, #34284c);
  --project: light-dark(#0b7a75, #5fd0c6);
  --side-bg: light-dark(#f3f3f0, #141518);
  --side-fg: light-dark(#53555c, #b9bcc4);
  --side-fg-3: light-dark(#8a8c93, #80848d);
  --side-hover: light-dark(rgb(0 0 0 / 0.045), rgb(255 255 255 / 0.06));
  --side-on: light-dark(rgb(0 0 0 / 0.07), rgb(255 255 255 / 0.1));
  --side-on-fg: light-dark(#16171a, #ffffff);
  --side-line: light-dark(#e4e3de, rgb(255 255 255 / 0.08));
  --row-hover: light-dark(#f1f1ee, #24262b);
  /* The chat of a ticket: the customer in gray, the team in teal, the
     assistant in violet. */
  --soft: light-dark(#f2f2ef, #1d1e22);
  --ours: light-dark(#e4f2f0, #173431);
  --agent-solid: light-dark(#6d43c9, #9d7bf0);
  /* Notes of the GitLab webhook. */
  --gitlab: light-dark(#fdf1e8, #2a1d14);
  --gitlab-line: light-dark(#f2cfb3, #5a3a22);
  --gitlab-ink: light-dark(#a3470f, #ffb27a);
  --gitlab-tag: light-dark(#fbe0cc, #45301f);
  --gitlab-solid: light-dark(#e2432a, #fc6d26);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  --r-s: 8px;
  --r-m: 10px;
  --r-l: 12px;
  --topbar-h: 52px;
  font-size: 14px;
  line-height: 1.5;
}

/* Type: sentence case in the text face, no uppercase mono labels. */
.sx-app .eyebrow { font: 600 12.5px/1.3 var(--font); text-transform: none; letter-spacing: 0; color: var(--fg-3); }
.sx-app .eyebrow.accent { color: var(--accent-text); }
.sx-app .sx-label { font: 600 12.5px/1.3 var(--font); text-transform: none; letter-spacing: 0; color: var(--fg-2); }
.sx-app .sx-table { font-size: 14px; }
.sx-app .sx-table th { font: 500 12.5px/1.3 var(--font); text-transform: none; letter-spacing: 0; color: var(--fg-3); }
.sx-app .sx-class { height: 20px; padding: 0 8px; border: none; border-radius: 999px; background-color: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 12px/1 var(--font); text-transform: none; letter-spacing: 0; &.bug { box-shadow: none; } }
.sx-app .sx-pill { font: 500 12px/1.7 var(--font); }
.sx-app .sx-event { font: 400 12.5px/1.4 var(--font); }
.sx-app .sx-title { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; }
.sx-app .sx-lede { font-size: 14px; }
.sx-app .sx-h2 { font-size: 17px; font-weight: 600; }
.sx-app .sx-head { padding: 26px 28px 18px; }
.sx-app .sx-body { padding: 0 28px 36px; }
.sx-app .sx-notice { margin-inline: 28px; }
.sx-app .sx-body .sx-notice { margin: 0; }
.sx-app .sx-card { border-radius: var(--r-l); }
.sx-app .sx-input, .sx-app .sx-textarea, .sx-app .sx-select { font-size: 14px; background-color: var(--surface); }
.sx-app .sx-input, .sx-app .sx-select { min-height: 36px; }

/* Controls */
.sx-app .sx-btn { min-height: 34px; padding: 0 12px; font: 500 13.5px/1 var(--font); }
.sx-app .sx-btn.sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
.sx-app .sx-btn.icon { width: 34px; padding: 0; }
.sx-app .sx-btn.sm.icon { width: 30px; }
.sx-app .sx-searchbox { min-height: 34px; border-radius: var(--r-s); background-color: var(--surface); font: 400 13.5px/1 var(--font); & input { font: 400 13.5px/1 var(--font); } & input:focus-visible { outline: none; } }

/* Sidebar */
.sx-app .sx-side { flex: 1 1 228px; max-width: 228px; gap: 16px; padding: 16px 10px 14px; background-color: var(--side-bg); border-right: 1px solid var(--side-line); color: var(--side-fg); }
.sx-app .sx-brand { padding: 2px 8px; font-size: 14.5px; font-weight: 600; color: var(--side-on-fg); & .sub { display: none; } }
.sx-app .sx-search { height: 34px; border-color: var(--side-line); border-radius: var(--r-s); background-color: light-dark(#ffffff, rgb(255 255 255 / 0.04)); color: var(--side-fg-3); font-size: 13px; & kbd { border-color: var(--side-line); color: var(--side-fg-3); } &:hover { color: var(--side-fg); border-color: var(--line-strong); } }
/* The scope under the search. A picked customer keeps the accent, so a
   narrowed desk does not pass for the whole one. */
.sx-app .sx-scope .select-trigger { min-height: 34px; padding: 0 10px; border-color: var(--side-line); background-color: light-dark(#ffffff, rgb(255 255 255 / 0.04)); color: var(--side-fg); font-size: 13px; font-weight: 500; & > .sx-i { color: var(--side-fg-3); } &:hover { color: var(--side-on-fg); border-color: var(--line-strong); } }
.sx-app .sx-scope.on .select-trigger { border-color: var(--accent); color: var(--side-on-fg); }
.sx-app .sx-side .sx-nav-item { min-height: 34px; gap: 10px; padding: 0 10px; border-radius: var(--r-s); color: var(--side-fg); font-size: 13.5px; font-weight: 500; }
.sx-app .sx-side .sx-nav-item:hover { background-color: var(--side-hover); color: var(--side-on-fg); }
.sx-app .sx-side .sx-nav-item.on { background-color: var(--side-on); color: var(--side-on-fg); }
.sx-app .sx-side .sx-nav-item .count { font: 500 12px/1.6 var(--font); color: var(--side-fg-3); font-variant-numeric: tabular-nums; }
.sx-app .sx-side .sx-nav-item .count.hot { padding: 0 7px; border-radius: 999px; background-color: light-dark(#c2362f, #d4453d); color: #ffffff; font-weight: 600; }
.sx-app .sx-side .sx-nav-item .count.warm { padding: 0 7px; border-radius: 999px; background-color: light-dark(#f0b429, #e9b949); color: #3d2c00; font-weight: 600; }
.sx-app .sx-nav-sep { background-color: var(--side-line); }
.sx-app .sx-side .sx-btn.quiet { color: var(--side-fg); &:hover { background-color: var(--side-hover); color: var(--side-on-fg); } }
.sx-app .sx-me { border-top-color: var(--side-line); color: var(--side-on-fg); font-size: 13px; & .xs { color: var(--side-fg-3); } & .xs.dev { color: var(--amber-ink); } }
.sx-app .sx-version { margin: 16px 0 0; font-variant-numeric: tabular-nums; }
.sx-side-top { display: flex; align-items: center; gap: 8px; & .sx-brand { flex: 1; min-width: 0; } }
/* The top bar, the scrim and the close button belong to the drawer of a
   narrow screen. A wide screen shows the sidebar beside the page. */
.sx-app .sx-topbar, .sx-app .sx-scrim, .sx-app .sx-side-close { display: none; }

/* The inbox: the list of a view beside the open ticket. */
.sx-inbox { display: flex; min-height: 100vh; }
.sx-inbox-list { flex: 0 0 380px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; background-color: var(--surface-2); border-right: 1px solid var(--line); }
.sx-inbox-head { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 0; background-color: var(--surface-2); }
.sx-inbox-title { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; & .count { font-size: 14px; font-weight: 500; color: var(--fg-3); font-variant-numeric: tabular-nums; } }
.sx-inbox-find { position: relative; display: flex; gap: 6px; & .sx-searchbox { flex: 1; min-width: 0; } & .sx-searchbox input { width: 100%; } }
.sx-inbox-tabs { display: flex; flex-wrap: wrap; gap: 0 2px; margin: 0 -18px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.sx-inbox-tabs button {
  all: unset;
  display: inline-flex;
  gap: 6px;
  margin-bottom: -1px;
  padding: 8px 8px 10px;
  border-bottom: 2px solid transparent;
  color: var(--fg-2);
  font: 500 13px/1.2 var(--font);
  white-space: nowrap;
  cursor: pointer;
  & span { color: var(--fg-3); font-variant-numeric: tabular-nums; }
  &:hover { color: var(--fg); }
  &.on { color: var(--fg); border-bottom-color: var(--fg); }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
}
.sx-inbox-items { display: flex; flex-direction: column; }
.sx-inbox-note { margin: 0; padding: 18px; color: var(--fg-3); font-size: 13.5px; }
.sx-inbox-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  .sx-app & { color: var(--fg); text-decoration: none; }
  &:hover { background-color: light-dark(#f0f0ec, #202125); }
  &.on { background-color: var(--accent-tint); }
  & .l1 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--fg-2); }
  & .l1 b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--fg); }
  & .l1 .sx-id { flex-shrink: 0; }
  & .l1 .t { flex-shrink: 0; margin-left: auto; color: var(--fg-3); font-variant-numeric: tabular-nums; }
  & .l1 .t.over { color: var(--red-ink); font-weight: 600; }
  & .l1 .t.warn { color: var(--amber-ink); font-weight: 600; }
  & .l1 .t.accent { color: var(--accent-text); font-weight: 600; }
  & .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
  & .l3 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--fg-3); }
  & .l3 .sn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .sx-avatar { width: 22px; height: 22px; font-size: 9.5px; }
  & .sx-avatar.none { box-sizing: border-box; border: 1.5px dashed var(--line-strong); }
}
.sx-inbox-pane { flex: 1 1 0; min-width: 0; container: pane / inline-size; background-color: var(--bg); }
.sx-inbox-list, .sx-inbox-pane { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.sx-pane-empty { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--fg-3); font-size: 14px; & p { margin: 0; } }

@media (min-width: 900px) {
  .sx-inbox { height: 100vh; }
  .sx-inbox-list, .sx-inbox-pane { overflow-y: auto; }
  .sx-inbox-pane .sx-back { display: none; }
}
@media (max-width: 899px) {
  /* The top bar and the page sit at the top, also when a short page
     leaves room below. */
  .sx-app { align-content: flex-start; }
  .sx-app .sx-topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    box-sizing: border-box;
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--topbar-h);
    padding: 0 8px;
    background-color: var(--side-bg);
    border-bottom: 1px solid var(--side-line);
    color: var(--side-on-fg);
    & .sx-brand { flex: 1; min-width: 0; padding: 0 4px; }
    & .sx-btn.icon { width: 40px; min-height: 40px; color: var(--side-fg); }
  }
  /* The sidebar slides in from the left, over a scrim. Closed, it is
     hidden, so the keyboard skips its links. */
  .sx-app .sx-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 17;
    width: min(300px, 86vw);
    max-width: none;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: none;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .sx-app.menu-open .sx-side { transform: none; visibility: visible; box-shadow: 0 0 48px rgb(0 0 0 / 0.2); transition: transform 0.22s ease; }
  .sx-app .sx-scrim { display: block; position: fixed; inset: 0; z-index: 16; background-color: rgb(0 0 0 / 0.35); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
  .sx-app.menu-open .sx-scrim { opacity: 1; pointer-events: auto; }
  .sx-app .sx-side-close { display: inline-flex; }
  .sx-app .sx-search kbd { display: none; }
  :root:has(.sx-app.menu-open) { overflow: hidden; }
  .sx-inbox { min-height: calc(100dvh - var(--topbar-h)); }
  .sx-inbox-head { top: var(--topbar-h); }
  .sx-app .sx-head { padding: 22px 16px 16px; }
  .sx-app .sx-body { padding: 0 16px 32px; }
  .sx-app .sx-notice { margin-inline: 16px; }
  .sx-inbox { flex-direction: column; }
  .sx-inbox-list { flex-basis: auto; border-right: none; }
  .sx-inbox.has-ticket .sx-inbox-list, .sx-inbox:not(.has-ticket) .sx-inbox-pane { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sx-app .sx-side, .sx-app .sx-scrim { transition: none; } }

/* The custom select (components/select.rs, from meridian-cms): a trigger and
   a panel on the Popover API, anchored to its trigger. A form field fills its
   width; `.inline` is a toolbar control with its name inside ("Owner"). */
.select-trigger {
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background-color: var(--surface);
  color: var(--fg);
  font: 400 14px/1.2 var(--font);
  text-align: left;
  cursor: pointer;
  outline: none;
  &:hover { border-color: var(--fg-3); }
  &:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); }
  & .select-prefix { color: var(--fg-3); font-weight: 500; }
  & .select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .select-value.placeholder { color: var(--fg-3); }
  & > .sx-i { color: var(--fg-3); }
  &.inline { width: auto; max-width: 260px; min-height: 34px; padding: 0 10px; font-size: 13.5px; }
  &.inline .select-value { font-weight: 500; }
}
.select-pop {
  /* Anchor positioning in place of the centered popover inset. */
  position: fixed;
  inset: auto;
  position-area: block-end span-inline-end;
  position-try-fallbacks: flip-block, flip-inline;
  margin: 6px 0;
  min-width: anchor-size(width);
  max-width: min(420px, 92vw);
  max-height: min(340px, 50vh);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background-color: var(--surface);
  color: var(--fg);
  font: 400 14px/1.4 var(--font);
  box-shadow: var(--shadow);
  overflow: hidden;
  outline: none;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  flex-direction: column;
  &:popover-open {
    display: flex;
    opacity: 1;
    transform: none;
    transition: opacity 0.13s ease, transform 0.13s ease, overlay 0.13s allow-discrete, display 0.13s allow-discrete;
    @starting-style { opacity: 0; transform: translateY(-4px) scale(0.98); }
  }
  & .select-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--fg-3);
    & input { all: unset; flex: 1; min-width: 0; color: var(--fg); font: 400 13.5px/1.3 var(--font); }
  }
  & .select-list { overflow: auto; padding: 5px; }
  & .select-opt {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border-radius: 7px;
    color: var(--fg);
    font-size: 13.5px;
    cursor: pointer;
    & .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & > .sx-i { color: var(--accent-text); }
    /* The lit row is the only filled row, and the row Enter takes. */
    &.hi { background-color: var(--row-hover); }
  }
  & .select-empty { padding: 12px; color: var(--fg-3); font-size: 13px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .select-pop:popover-open { transition: none; } }

/* Search (search.rs, as the meridian-cms palette): a scrim over the desk and
   a panel near the top, opened by the sidebar button, ⌘K or Ctrl+K, and "/". */
.cmdk {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: rgb(9 9 12 / 0.34);
  backdrop-filter: blur(2px);
  opacity: 0;
  align-items: flex-start;
  justify-content: center;
  font: 400 14px/1.4 var(--font);
  transition: opacity 0.14s ease, overlay 0.14s allow-discrete, display 0.14s allow-discrete;
  &:popover-open {
    display: flex;
    opacity: 1;
    @starting-style { opacity: 0; }
    & .cmdk-panel { transform: none; @starting-style { transform: translateY(-10px) scale(0.98); } }
  }
  & kbd { padding: 1px 5px; border: 1px solid var(--line); border-radius: 5px; background-color: var(--surface-2); color: var(--fg-3); font: 500 11px/1.4 var(--font); }
}
.cmdk-panel {
  margin-top: 11vh;
  width: min(620px, 92vw);
  max-height: min(500px, 74vh);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background-color: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.14s ease;
}
.cmdk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-3);
  & input { all: unset; flex: 1; min-width: 0; color: var(--fg); font: 400 15px/1.4 var(--font); }
  & input:focus-visible { outline: none; }
  & input::placeholder { color: var(--fg-3); }
}
.cmdk-list { flex: 1; overflow: auto; padding: 7px; }
.cmdk-section { padding: 9px 9px 4px; color: var(--fg-3); font-size: 12px; font-weight: 600; }
.cmdk-row {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border-radius: 9px;
  color: var(--fg);
  font-size: 14px;
  cursor: pointer;
  & .row-ic { display: flex; color: var(--fg-3); }
  & .sx-id { flex-shrink: 0; }
  & .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .sub { flex-shrink: 0; max-width: 45%; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3); font-size: 12.5px; }
  &.hi { background-color: var(--row-hover); }
}
.cmdk-empty, .cmdk-note { padding: 22px; color: var(--fg-3); font-size: 13.5px; text-align: center; }
.cmdk-note { padding: 10px; font-size: 12.5px; }
.cmdk-foot {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 12px;
  & span { display: flex; align-items: center; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .cmdk, .cmdk-panel { transition: none; } }

/* --- Ticket chat ------------------------------------------------------------
   The ticket in the pane, as on the "Cedgetec Support ticket view" canvas: a
   header with the actions and a tool strip, the chat, and the reply box. On
   a wide screen it fills the window height and only the chat scrolls,
   reversed, so it opens at the newest message. Below 900px the page scrolls.
   The tool strip opens one popup at a time under the header. */
.sx-tk { display: flex; flex-direction: column; min-height: 100%; }
@media (min-width: 900px) { .sx-tk { height: 100%; } }
.sx-tk-head { position: relative; z-index: 5; flex: none; display: flex; flex-direction: column; gap: 12px; padding: 18px 28px 12px; background-color: var(--bg); border-bottom: 1px solid var(--line); }
.sx-tk-top { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; }
.sx-tk-text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sx-tk-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12.5px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  & .sx-id { font: 500 12.5px/1 var(--font); }
  /* The response clock on one line with the status. */
  & .sx-sla { flex-direction: row-reverse; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; }
  & .sx-sla .bar { width: 64px; flex-shrink: 0; }
}
.sx-tk-title { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; overflow-wrap: anywhere; }
.sx-tk-lede { margin: 0; font-size: 13px; color: var(--fg-2); & b { color: var(--fg); font-weight: 600; } }
.sx-tk-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sx-tk-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sx-tool {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background-color: var(--bg);
  color: var(--fg-2);
  font: 500 13px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  & .sub { color: var(--fg-3); font-weight: 400; }
  &:hover { color: var(--fg); background-color: var(--soft); }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  &.on { background-color: var(--soft); color: var(--fg); border-color: var(--line-strong); }
  &.agent { color: var(--internal-ink); border-color: var(--internal-line); & .sub { color: var(--internal-ink); opacity: 0.8; } }
  &.agent.on { background-color: var(--internal); border-color: var(--agent-solid); }
}
.sx-app .sx-tk > .sx-notice { flex: none; margin: 12px 28px 0; }

/* The More menu: the panel of the custom select with menu rows. */
.select-pop.sx-menu {
  min-width: 220px;
  & .select-opt > .sx-i { color: var(--fg-3); }
  & .select-opt:hover:not(:disabled) { background-color: var(--row-hover); }
  & .select-opt:disabled { opacity: 0.45; cursor: not-allowed; }
}

/* Popups under the header. They sit one step above the page in the dark
   theme, so the tokens inside shift with them. */
.sx-pop {
  --bg: light-dark(#ffffff, #1b1c20);
  --soft: light-dark(#f2f2ef, #25272c);
  --line: light-dark(#e8e7e3, #32353c);
  position: absolute;
  top: calc(100% + 8px);
  right: 24px;
  z-index: 6;
  box-sizing: border-box;
  width: 420px;
  max-width: calc(100% - 48px);
  max-height: calc(100vh - 240px);
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: 0 16px 40px light-dark(rgb(10 12 20 / 0.16), rgb(0 0 0 / 0.5)), 0 2px 6px rgb(10 12 20 / 0.06);
  & p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--fg-2); overflow-wrap: anywhere; }
  & h3 { margin: 0; flex: 1; font-size: 13.5px; font-weight: 600; }
  & h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
  & dl { margin: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px 12px; font-size: 13px; }
  & dt { color: var(--fg-3); }
  & dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  & dd small { display: block; color: var(--fg-3); font-size: 12px; }
  & code { font: 400 12px/1.4 var(--mono); }
  &.agent { --bg: light-dark(#fcfaff, #1e1b25); --internal: light-dark(#f6f0fe, #2a2238); border-color: var(--internal-line); }
}
.sx-pop-h { display: flex; align-items: center; gap: 8px; margin: -4px -6px 0 0; & .k { font-size: 12px; color: var(--fg-3); } }
.sx-apill, .sx-spill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background-color: var(--internal-tag); color: var(--internal-ink); font: 600 12px/1 var(--font); white-space: nowrap; }
.sx-spill { background-color: var(--soft); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); }
.sx-facts { display: flex; flex-wrap: wrap; gap: 6px; &:empty { display: none; } }
.sx-chip { padding: 1px 8px; border-radius: 999px; background-color: light-dark(#ecebe7, #2a2c31); color: var(--fg-2); font-size: 11.5px; font-weight: 500; &.bug { background-color: var(--red-tint); color: var(--red-ink); } }
.sx-same { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--fg-2); & .sx-i { margin-top: 2px; } & a { color: var(--internal-ink); font-weight: 600; } }
.sx-next { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--internal-line); border-radius: var(--r-m); background-color: var(--internal); & .lbl { font-size: 12px; font-weight: 600; color: var(--internal-ink); } & p { color: var(--fg); } }
.sx-pop details {
  padding-top: 10px;
  border-top: 1px solid var(--internal-line);
  & summary { display: flex; align-items: center; gap: 6px; list-style: none; font-size: 13px; font-weight: 600; color: var(--fg); cursor: pointer; }
  & summary::-webkit-details-marker { display: none; }
  & summary .sx-i { transition: transform 0.15s; }
  &[open] summary .sx-i { transform: rotate(90deg); }
  & .in { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
}
.sx-ev { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; & .sx-log { align-self: stretch; } }
.sx-logs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; & .lbl { font-size: 12px; font-weight: 600; color: var(--fg-2); } }
.sx-rfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -2px -8px -6px; }

/* Files of the customer and GitLab issues: one row each. */
.sx-pfiles { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); & h3 { display: flex; align-items: baseline; gap: 8px; } & h3 span { color: var(--fg-3); font-weight: 500; } }
.sx-pfiles ul, .sx-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sx-prow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.35;
  .sx-app & { color: var(--fg); text-decoration: none; }
  a&:hover { background-color: var(--soft); }
  &.purged { opacity: 0.55; & .fn { text-decoration: line-through; } }
  & .fi { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px; background-color: var(--soft); color: var(--fg-2); }
  & .fn { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
  & .fn small { color: var(--fg-3); font-size: 12px; }
  & .go { display: flex; color: var(--fg-3); }
}

/* Copy prompt: checkboxes, the preview and the copy button. */
.sx-opts { display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; }
.sx-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--r-s);
  cursor: pointer;
  &:hover { background-color: var(--soft); }
  &.off { opacity: 0.5; cursor: default; &:hover { background-color: transparent; } }
  & input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  & .cb { display: grid; place-items: center; flex-shrink: 0; box-sizing: border-box; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--line-strong); border-radius: 5px; background-color: var(--bg); color: transparent; transition: background-color 0.12s, border-color 0.12s; }
  & .cb .sx-i { stroke-width: 3; }
  &:hover .cb { border-color: var(--fg-3); }
  & input:checked + .cb { background-color: var(--fg); border-color: var(--fg); color: var(--bg); }
  & input:focus-visible + .cb { outline: 2px solid var(--accent); outline-offset: 2px; }
  & .ol { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
  & .ol small { color: var(--fg-3); font-size: 12px; font-weight: 400; }
}
.sx-preview { margin: 0; max-height: 220px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background-color: var(--soft); color: var(--fg-2); font: 400 11.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.sx-pfoot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-3); }

/* The chat. */
.sx-tk-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column-reverse; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.sx-tk-chat { box-sizing: border-box; width: 100%; max-width: 860px; margin: 0 auto; padding: 20px 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.sx-day { align-self: center; padding: 2px 10px; border-radius: 999px; background-color: var(--soft); color: var(--fg-3); font-size: 12px; font-weight: 500; }
.sx-tk-event { align-self: center; max-width: 90%; text-align: center; font-size: 12.5px; color: var(--fg-3); & a { font-weight: 600; } }
.sx-m {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 76%;
  &.them { align-self: flex-start; }
  &.us { align-self: flex-end; flex-direction: row-reverse; }
  & .bd { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  &.us .bd { align-items: flex-end; }
  & .who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0 4px; font-size: 12px; color: var(--fg-3); & b { color: var(--fg-2); font-weight: 600; } }
  & .bub { box-sizing: border-box; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-radius: 16px; background-color: var(--soft); overflow-wrap: anywhere; & p { margin: 0; line-height: 1.55; white-space: pre-line; } }
  &.them .bub { border-bottom-left-radius: 6px; }
  &.us .bub { border-bottom-right-radius: 6px; background-color: var(--ours); }
  &.agent .bub { padding: 14px 18px; border: 1px solid var(--internal-line); background-color: var(--internal); & p { font-size: 13.5px; } }
  &.system .bub { background-color: var(--soft); }
  &.note .bub { border: 1px dashed var(--internal-line); background-color: var(--internal); }
  &.gitlab .bub { border-color: var(--gitlab-line); background-color: var(--gitlab); }
  &.gitlab .sx-ntag { background-color: var(--gitlab-tag); color: var(--gitlab-ink); }
  &.pending .bub { border-style: dashed; }
  &.pending .sx-avatar { animation: sx-pulse 1.6s ease-in-out infinite; }
}
.sx-avatar.bot { background-color: var(--agent-solid); color: #ffffff; }
.sx-avatar.gitlab { background-color: var(--gitlab-solid); color: #ffffff; }
.sx-avatar.sys { background-color: var(--soft); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); }
.sx-ntag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; background-color: var(--internal-tag); color: var(--internal-ink); font-size: 11.5px; font-weight: 600; }
.sx-files { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-file {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background-color: var(--bg);
  font-size: 12.5px;
  .sx-app & { color: var(--fg-2); text-decoration: none; }
  a&:hover { color: var(--fg); border-color: var(--line-strong); }
  &.purged { opacity: 0.55; text-decoration: line-through; }
}

/* The reply box, docked under the chat. */
.sx-tk-dock { flex: none; background-color: var(--bg); border-top: 1px solid var(--line); }
.sx-compose { box-sizing: border-box; max-width: 860px; margin: 0 auto; padding: 12px 28px 18px; }
.sx-cbox {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background-color: var(--surface);
  &:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
  &.note { border-color: var(--internal-line); background-color: var(--internal); }
  & textarea { all: unset; box-sizing: border-box; display: block; width: 100%; min-height: 72px; max-height: min(30vh, 220px); overflow-y: auto; field-sizing: content; padding: 10px 16px; color: var(--fg); font: 400 14px/1.5 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
  & textarea::placeholder { color: var(--fg-3); }
  & textarea:focus-visible { outline: none; }
}
.sx-ctabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 6px 0;
  & button { all: unset; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 7px; color: var(--fg-3); font: 500 13px/1 var(--font); cursor: pointer; }
  & button:hover { color: var(--fg); }
  & button.on { background-color: var(--soft); color: var(--fg); }
  & button:disabled { opacity: 0.45; cursor: not-allowed; }
  & button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  & .sx-cdraft { margin-left: auto; padding: 0 8px; color: var(--internal-ink); font-size: 12px; }
}
.sx-cbox.note .sx-ctabs button.on { background-color: var(--internal-tag); color: var(--internal-ink); }
.sx-cchips { padding: 0 12px 8px; }
.sx-cerror { margin: 0; padding: 0 16px 8px; }
.sx-cf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-top: 1px solid var(--line); color: var(--fg-3); font-size: 12.5px; & .sx-after b { color: var(--fg); font-weight: 500; } }
.sx-cbox.note .sx-cf { border-top-color: var(--internal-line); }

/* On a wide screen the desk around the inbox never wraps and never
   scrolls: the list and the chat scroll on their own. */
@media (min-width: 900px) {
  .sx-app:has(> .sx-main > .sx-inbox) { flex-wrap: nowrap; height: 100vh; overflow: hidden; }
}
@container pane (max-width: 640px) {
  .sx-tk-head { padding: 16px; }
  .sx-tool .sub, .sx-tk-tools > .grow { display: none; }
  .sx-tk-chat, .sx-compose { padding-left: 16px; padding-right: 16px; }
  .sx-app .sx-tk > .sx-notice { margin-inline: 16px; }
  .sx-m { max-width: 92%; }
  .sx-pop { right: 16px; max-width: calc(100% - 32px); }
}
@media (max-width: 899px) {
  .sx-tk-scroll { overflow: visible; }
  .sx-pop { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) { .sx-m.pending .sx-avatar, .sx-pop details summary .sx-i { animation: none; transition: none; } }