:root {
  color-scheme: light dark;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #17202a;
  --muted: #5f6b76;
  --line: #d9e0e6;
  --brand: #006d5b;
  --brand-strong: #005547;
  --brand-soft: #dff3ee;
  --danger: #a12d32;
  --error-bg: #fee9e8;
  --focus: #0b7ac7;
}

.support-panel,.support-auth{max-width:1180px;margin:0 auto}.support-head,.support-toolbar,.queue-item header{display:flex;justify-content:space-between;gap:16px;align-items:center}.support-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.support-counts>div,.queue-item{border:1px solid var(--line);padding:16px;border-radius:8px}.support-counts strong{font-size:2rem;display:block}.support-counts span{display:block}.queue-list{display:grid;gap:12px;margin-bottom:28px}.queue-item dl,.case-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.queue-item dt,.case-details dt{font-size:.8rem;color:var(--muted)}.queue-item dd,.case-details dd{margin:2px 0;overflow-wrap:anywhere}.inline-form{display:flex;align-items:center;gap:8px}.inline-form select,.action-box select{min-height:42px}.shift-form{margin:24px 0}@media(max-width:600px){.support-head,.support-toolbar{align-items:stretch;flex-direction:column}.support-toolbar form,.actions{display:grid}.support-counts{grid-template-columns:1fr 1fr}.queue-item dl,.case-details{grid-template-columns:1fr}.inline-form{display:grid}}
.conversation{margin-top:32px;border-top:1px solid var(--border);padding-top:20px}.message-list{display:grid;gap:10px}.message{max-width:78%;padding:10px 12px;border:1px solid var(--border);border-radius:8px}.message-support{margin-left:auto;background:color-mix(in srgb,#2563eb 12%,transparent)}.message p{white-space:pre-wrap;overflow-wrap:anywhere}.message time,.message span{font-size:.75rem;color:var(--muted);margin-right:8px}.message-form{display:grid;gap:8px;margin-top:18px}.message-form textarea{min-height:90px;resize:vertical}.timeline{margin-top:28px}.case-details{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:600px){.case-details{grid-template-columns:1fr}.message{max-width:92%}}
.validation-warning{border-left:4px solid #b7791f;padding:10px 12px;background:color-mix(in srgb,#f6ad55 16%,transparent);overflow-wrap:anywhere}.capacity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.capacity-grid>div{display:grid;gap:3px;border:1px solid var(--border);padding:12px;border-radius:6px}.operational-panel{margin:22px 0}.continue-warning{margin-top:10px}
.case-workspace{max-width:1400px}.case-workspace-grid{display:grid;grid-template-columns:minmax(240px,1fr) minmax(360px,1.5fr) minmax(240px,1fr);gap:20px;align-items:start}.case-info,.case-actions{min-width:0}.case-conversation .conversation{margin-top:0;padding-top:0;border-top:0}.participant-list article{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}.participant-list small,.participant-list span{display:block;color:var(--muted)}.action-box{margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:6px}.action-box form,.internal-notes form,.supervisor-panel form{display:grid;gap:8px;margin-top:10px}.internal-notes{margin-top:22px}.internal-notes article{padding:10px;border-left:4px solid #7c5c00;background:color-mix(in srgb,#d4a72c 12%,transparent)}.internal-notes p{white-space:pre-wrap;overflow-wrap:anywhere}.internal-notes time{font-size:.75rem;color:var(--muted)}.mobile-case-nav{display:none}.audit-list{display:grid;gap:6px}.audit-list article{display:grid;grid-template-columns:150px 1fr 110px;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.85rem}.status{font-size:.75rem;color:var(--muted)}.capacity-grid article{border:1px solid var(--line);padding:12px;border-radius:6px}.capacity-grid article header{display:flex;justify-content:space-between;gap:8px}.supervisor-counts{grid-template-columns:repeat(4,1fr)}
.active-case-switcher{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.active-case-switcher .queue-item{display:grid;gap:8px}.active-case-switcher .case-awaiting{border-left:4px solid #b7791f}.active-case-switcher .button-link{justify-self:start}.unread-badge{display:inline-block;padding:2px 6px;border-radius:4px;background:#b7791f;color:#fff;font-size:.75rem}.supervisor-counts{grid-template-columns:repeat(5,1fr)}
.shell:has(.support-panel){width:min(1400px,calc(100% - 32px))}.quick-replies{display:flex;flex-wrap:wrap;gap:6px}.quick-replies button{padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--text);cursor:pointer}.send-state{min-height:1.2em;color:var(--muted);font-size:.8rem}
@media(max-width:900px){.case-workspace-grid{grid-template-columns:1fr}.case-conversation{order:-1}.mobile-case-nav{display:flex;position:sticky;top:0;z-index:2;gap:8px;padding:8px 0;background:var(--bg)}.mobile-case-nav a{flex:1;text-align:center;padding:10px;border:1px solid var(--line);border-radius:4px}.supervisor-counts{grid-template-columns:1fr 1fr}.audit-list article{grid-template-columns:1fr}.case-actions .primary,.case-actions .secondary,.case-actions .danger-ghost{width:100%;margin-top:8px}}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

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

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand { color: var(--text); font-size: 1.05rem; font-weight: 750; text-decoration: none; }
.environment { color: var(--muted); font-size: .82rem; }
.shell { width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 64px; }
.notice { margin: 0 0 20px; color: var(--muted); font-size: .82rem; text-align: center; }

.start, .case-panel {
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgb(28 39 49 / 7%);
}

.start { display: grid; gap: 28px; }
h1 { max-width: 620px; margin: 4px 0 12px; font-size: clamp(1.65rem, 5vw, 2.45rem); line-height: 1.15; letter-spacing: 0; }
.eyebrow { margin: 0; color: var(--brand); font-size: .78rem; font-weight: 750; text-transform: uppercase; }
.lead { margin: 0; color: var(--muted); font-size: 1.04rem; }
.privacy { margin: 0; color: var(--muted); font-size: .82rem; }
.case-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.case-id { flex: none; padding: 5px 8px; border-radius: 4px; background: var(--brand-soft); color: var(--brand-strong); font: 700 .72rem ui-monospace, monospace; }
.progress { height: 6px; margin: 28px 0 36px; overflow: hidden; border-radius: 3px; background: var(--line); }
.progress span { display: block; height: 100%; background: var(--brand); transition: width 180ms ease; }
.question { display: grid; gap: 18px; }
.question > label { font-size: 1.15rem; font-weight: 700; }

input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #aeb9c2;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

input:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus), transparent 60%);
  outline-offset: 2px;
}

.choice-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice input { position: absolute; opacity: 0; }
.choice span {
  display: grid;
  min-height: 52px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}
.choice input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.quick-options { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-options button, .edit, .text-button { border: 0; background: transparent; color: var(--brand); cursor: pointer; }
.quick-options button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: .8rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.actions form { margin: 0; }

.primary, .secondary, .danger-ghost {
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 750;
}
.primary { border: 1px solid var(--brand); background: var(--brand); color: #fff; }
.primary:hover { background: var(--brand-strong); }
.secondary { border: 1px solid var(--line); background: transparent; color: var(--text); }
.danger-ghost { border: 1px solid transparent; background: transparent; color: var(--danger); }
.closure-dialog {
  width: min(560px, calc(100% - 24px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.closure-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.closure-dialog form { display: grid; gap: 14px; padding: 22px; }
.closure-dialog select, .closure-dialog textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialog-heading h2 { margin: 0; }
.dialog-close { border: 0; background: transparent; color: var(--text); font-size: 1.5rem; cursor: pointer; }
.primary:disabled, .secondary:disabled, .danger-ghost:disabled {
  cursor: not-allowed;
  opacity: .62;
  box-shadow: inset 0 0 0 2px currentColor;
}
.is-loading { cursor: wait !important; text-decoration: none !important; }
.action-feedback { min-height: 1.2em; color: var(--muted); font-size: .8rem; }
.action-notice { margin: 16px 0; padding: 12px 14px; border-left: 4px solid var(--brand); background: var(--brand-soft); }
.status-explanation { display: block; max-width: 620px; margin-top: 4px; color: var(--muted); }
.availability-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.availability-actions form { margin: 0; }
.button-link { display: inline-grid; place-items: center; text-decoration: none; }
.cancel-inline { margin-top: 24px; }
.text-button { padding: 0; color: var(--muted); font-size: .85rem; }
.error { margin: 20px 0; padding: 12px 14px; border-left: 4px solid var(--danger); background: var(--error-bg); color: #791e22; }
.summary { margin: 24px 0; border-top: 1px solid var(--line); }
.summary-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.summary-row div { min-width: 0; }
.summary-row span { display: block; color: var(--muted); font-size: .78rem; }
.summary-row strong { overflow-wrap: anywhere; }
.edit { padding: 6px; font-size: .8rem; }
.success-mark { display: grid; width: 54px; height: 54px; margin: 28px 0 18px; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 1.8rem; font-weight: 800; }
.queue-details { display: grid; gap: 12px; margin: 28px 0 0; }
.queue-details div { padding: 12px 0; border-top: 1px solid var(--line); }
.queue-details dt { color: var(--muted); font-size: .78rem; }
.queue-details dd { margin: 3px 0 0; overflow-wrap: anywhere; font-weight: 700; }

@media (max-width: 560px) {
  .topbar { padding: 0 16px; }
  .shell { width: min(100% - 20px, 720px); padding-top: 18px; }
  .start, .case-panel { padding: 22px 18px; }
  .case-heading { display: block; }
  .case-id { display: inline-block; margin-top: 8px; }
  .choice-group { grid-template-columns: 1fr; }
  .primary, .secondary, .danger-ghost { width: 100%; }
  .actions, .actions form { width: 100%; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111518;
    --surface: #1a2024;
    --text: #eef3f5;
    --muted: #aab4ba;
    --line: #394248;
    --brand: #49b9a3;
    --brand-strong: #71d2bf;
    --brand-soft: #163b34;
    --error-bg: #442326;
  }
  .error { color: #ffb9b9; }
  input[type="text"] { border-color: #566269; }
}