/* Visual direction: a quiet ENIX operator terminal with one lavender active marker.
   Unslop method by Damir Sokolovsky (@heydamir), CC BY 4.0. */
.sd-root,
.sd-login {
  --sd-bg: #121116;
  --sd-sidebar: #151419;
  --sd-panel: #1b1a20;
  --sd-raised: #25232a;
  --sd-line: rgba(242, 237, 246, .09);
  --sd-text: #f0edf2;
  --sd-muted: #aaa5af;
  --sd-subtle: #89838f;
  --sd-accent: #bda4d2;
  --sd-accent-ink: #1d1424;
  --sd-success: #80bf98;
  --sd-danger: #e0a0a3;
  min-height: 100dvh;
  background: var(--sd-bg);
  color: var(--sd-text);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}
.sd-root :is(button, input, select, textarea),
.sd-login :is(button, input) { font: inherit; letter-spacing: 0; }
.sd-root :is(button, a), .sd-login button { transition: color .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease; }
.sd-root :is(button, input, select, textarea):focus-visible,
.sd-login :is(button, input):focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }
.sd-root :is(input, textarea):focus,
.sd-login input:focus { border-color: var(--sd-accent) !important; box-shadow: 0 0 0 2px rgba(189, 164, 210, .13); }
.sd-root button:disabled, .sd-login button:disabled { opacity: .48; }
.sd-root :is(strong, b), .sd-login :is(strong, b) { font-weight: 600; }
.sd-root :is(time, code, .sd-ticket-meta, .sd-state, .sd-live, .sd-queue-head h1 span) { font-variant-numeric: tabular-nums; }

/* Spacing and shell */
.sd-top { height: 64px; padding: 0 24px; background: var(--sd-sidebar); border-bottom: 1px solid var(--sd-line); }
.sd-brand { gap: 12px; }
.sd-mark { width: 40px; height: 40px; border: 1px solid var(--sd-line); border-radius: 10px; background: var(--sd-raised); color: var(--sd-accent); }
.sd-brand b { font-size: 15px; letter-spacing: 0; font-weight: 600; }
.sd-brand em { font-style: normal; color: var(--sd-muted); }
.sd-brand small { margin-top: 2px; font-size: 12px; letter-spacing: 0; color: var(--sd-subtle); }
.sd-top-actions { gap: 8px; }
.sd-top-actions > button { width: 36px; height: 36px; border: 1px solid var(--sd-line); border-radius: 8px; background: transparent; color: var(--sd-muted); }
.sd-top-actions > button:hover { background: var(--sd-raised); color: var(--sd-text); }
.sd-live { margin-right: 12px; font-size: 12px; color: var(--sd-muted); }
.sd-live i { width: 6px; height: 6px; margin-right: 8px; background: var(--sd-success); box-shadow: none; }
.sd-live.offline i { background: var(--sd-danger); box-shadow: none; }
.sd-layout { grid-template-columns: minmax(280px, 328px) minmax(400px, 1fr) minmax(280px, 304px); height: calc(100dvh - 64px); max-width: 1600px; }
.sd-queue { background: var(--sd-sidebar); border-right: 1px solid var(--sd-line); }
.sd-conversation { background: var(--sd-bg); border-right: 1px solid var(--sd-line); }
.sd-profile { background: var(--sd-sidebar); }

/* Queue: aligned names, times and compact controls */
.sd-queue-head { padding: 28px 20px 20px; }
.sd-eyebrow { color: var(--sd-subtle); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sd-queue-head h1 { margin: 8px 0 4px; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
.sd-queue-head h1 span { min-width: 0; height: auto; padding: 0 4px; border: 0; border-radius: 0; background: transparent; color: var(--sd-muted); font-size: 15px; font-weight: 500; vertical-align: baseline; }
.sd-queue-head p { margin: 0; color: var(--sd-muted); font-size: 13px; line-height: 20px; }
.sd-search { height: 40px; margin: 0 16px 16px; padding: 0 12px; border: 1px solid var(--sd-line); border-radius: 8px; background: var(--sd-panel); color: var(--sd-subtle); }
.sd-search input { font-size: 13px; color: var(--sd-text); }
.sd-search input::placeholder { color: var(--sd-subtle); }
.sd-tabs { gap: 4px; padding: 0 12px 12px; border-bottom: 1px solid var(--sd-line); }
.sd-tabs button { min-height: 36px; padding: 8px; border-radius: 7px; color: var(--sd-muted); font-size: 12px; font-weight: 500; }
.sd-tabs button:hover { color: var(--sd-text); background: var(--sd-panel); }
.sd-tabs button.active { background: var(--sd-raised); color: var(--sd-text); box-shadow: inset 0 -2px var(--sd-accent); }
.sd-tabs span { margin-left: 4px; font-size: 11px; opacity: .7; }
.sd-ticket { min-height: 112px; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--sd-line); background: transparent; }
.sd-ticket:hover { background: rgba(242, 237, 246, .035); }
.sd-ticket.selected { background: var(--sd-raised); box-shadow: inset 2px 0 var(--sd-accent); }
.sd-avatar { width: 36px; height: 36px; border: 1px solid var(--sd-line); border-radius: 9px; background: #302a35; color: var(--sd-text); font-size: 14px; font-weight: 500; }
.sd-ticket-main { gap: 4px; }
.sd-ticket-line { gap: 8px; }
.sd-ticket-line strong { color: var(--sd-text); font-size: 13px; font-weight: 600; }
.sd-ticket-line time { color: var(--sd-subtle); font-size: 11px; }
.sd-ticket-topic { color: var(--sd-muted); font-size: 12px; }
.sd-ticket-preview { color: var(--sd-muted); font-size: 12px; }
.sd-ticket-meta { gap: 8px; color: var(--sd-subtle); font-size: 11px; }
.sd-ticket-meta span { gap: 4px; }
.sd-dot { top: 56px; width: 6px; height: 6px; background: var(--sd-accent); }
.sd-empty-small { padding: 32px 20px; color: var(--sd-muted); font-size: 13px; }

/* Conversation is the main visual moment: content carries the emphasis. */
.sd-placeholder { color: var(--sd-muted); padding: 32px; }
.sd-placeholder > div { width: 64px; height: 64px; border: 1px solid var(--sd-line); border-radius: 14px; background: var(--sd-panel); color: var(--sd-muted); }
.sd-placeholder h2 { margin: 20px 0 4px; color: var(--sd-text); font-size: 20px; font-weight: 500; }
.sd-placeholder p { max-width: 280px; margin: 0; font-size: 13px; line-height: 20px; }
.sd-thread-head { height: 64px; gap: 12px; padding: 0 24px; background: var(--sd-sidebar); border-bottom: 1px solid var(--sd-line); }
.sd-thread-head strong { font-size: 14px; font-weight: 600; }
.sd-thread-head div > span { color: var(--sd-muted); font-size: 12px; }
.sd-state, .sd-state.answered, .sd-state.closed { padding: 6px 8px; border: 1px solid var(--sd-line); border-radius: 6px; background: var(--sd-raised); color: var(--sd-muted); font-size: 11px !important; }
.sd-state.new { color: var(--sd-accent); }
.sd-messages { gap: 16px; padding: 24px min(4vw, 40px); }
.sd-message { max-width: min(78%, 660px); padding: 12px 16px; border: 1px solid var(--sd-line); border-radius: 14px 14px 14px 5px; background: var(--sd-panel); box-shadow: none; }
.sd-message-row.operator .sd-message { border-color: rgba(189, 164, 210, .22); border-radius: 14px 14px 5px 14px; background: #2b2532; }
.sd-message small { margin-bottom: 8px; color: var(--sd-subtle); font-size: 11px; }
.sd-message p { color: var(--sd-text); font-size: 13px; line-height: 20px; }
.sd-attachment { color: var(--sd-accent); font-size: 12px; }
.sd-compose { padding: 16px 24px; border-top: 1px solid var(--sd-line); background: var(--sd-sidebar); }
.sd-compose > p { color: var(--sd-muted); font-size: 13px; }
.sd-compose textarea { min-height: 76px; padding: 12px; border: 1px solid var(--sd-line); border-radius: 8px; background: var(--sd-panel); color: var(--sd-text); font-size: 13px; }
.sd-compose textarea::placeholder { color: var(--sd-subtle); }
.sd-compose-actions { gap: 12px; margin-top: 12px; }
.sd-compose-actions > span { color: var(--sd-subtle); font-size: 12px; }
.sd-compose button, .sd-credit-form button { min-height: 36px; padding: 8px 16px; border: 1px solid transparent; border-radius: 8px; background: var(--sd-accent); color: var(--sd-accent-ink); font-size: 12px; font-weight: 600; }
.sd-compose button:hover:not(:disabled), .sd-credit-form button:hover:not(:disabled) { background: #cbb5dc; }
.sd-compose .sd-attach-button { border: 1px solid var(--sd-line); background: var(--sd-panel); color: var(--sd-muted); }
.sd-compose .sd-attach-button:hover:not(:disabled) { background: var(--sd-raised); color: var(--sd-text); }
.sd-file-list { gap: 8px; margin-top: 12px; }
.sd-file-list li { padding: 4px 8px; border: 1px solid var(--sd-line); border-radius: 6px; background: var(--sd-raised); color: var(--sd-muted); }
.sd-file-list li span, .sd-file-list li button { color: inherit; font-size: 11px; }
.sd-file-list li button:hover { background: var(--sd-panel); }
.sd-inline-error, .sd-inline-ok { padding: 10px 24px; color: var(--sd-danger); background: #2a1e23; font-size: 12px; }
.sd-inline-ok { color: var(--sd-success); background: #1d2923; }

/* Client context and financial actions */
.sd-profile-head { padding: 28px 20px 12px; }
.sd-profile-head h2 { margin: 8px 0 0; color: var(--sd-text); font-size: 20px; font-weight: 500; letter-spacing: 0; }
.sd-profile-block { gap: 8px; margin: 12px 16px; padding: 16px; border: 1px solid var(--sd-line); border-radius: 12px; background: var(--sd-panel); }
.sd-profile-block > label, .sd-recent > label, .sd-verification > label, .sd-recovery > label { color: var(--sd-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sd-profile-block > strong { color: var(--sd-text); font-size: 14px; font-weight: 600; }
.sd-profile-block > span { color: var(--sd-muted); font-size: 12px; }
.sd-profile-hint { padding: 12px 20px; color: var(--sd-muted); font-size: 13px; line-height: 20px; }
.sd-close, .sd-credit-button, .sd-verification > button, .sd-recovery > button, .sd-recovery-result > button { min-height: 36px; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--sd-line); border-radius: 8px; background: var(--sd-raised); color: var(--sd-text); font-size: 12px; font-weight: 500; }
.sd-close:hover, .sd-credit-button:hover, .sd-verification > button:hover, .sd-recovery > button:hover { background: #302d36; }
.sd-credit-button { border-color: rgba(189, 164, 210, .28); color: var(--sd-accent); }
.sd-client-search { height: 40px; gap: 4px; }
.sd-client-search input, .sd-credit-form input, .sd-credit-form textarea, .sd-payments-body input, .sd-payments-body select { border: 1px solid var(--sd-line); border-radius: 8px; background: var(--sd-sidebar); color: var(--sd-text); font-size: 12px; }
.sd-client-search input { padding: 0 12px; }
.sd-client-search button { width: 40px; border: 1px solid var(--sd-line); border-radius: 8px; background: var(--sd-raised); color: var(--sd-muted); }
.sd-match { padding: 8px; border: 1px solid var(--sd-line); border-radius: 8px; background: var(--sd-raised); color: var(--sd-text); }
.sd-match small { color: var(--sd-subtle); font-size: 11px; }
.sd-balance > strong { color: var(--sd-accent); font-size: 28px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sd-credit-form { gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--sd-line); }
.sd-credit-form label { color: var(--sd-muted); font-size: 12px; }
.sd-credit-form input, .sd-credit-form textarea { padding: 10px 12px; }
.sd-credit-form button { margin-top: 4px; }
.sd-recent, .sd-verification, .sd-recovery { gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sd-line); }
.sd-recent span { gap: 4px; color: var(--sd-muted); font-size: 11px; }
.sd-recent small { color: var(--sd-subtle); }
.sd-verified { color: var(--sd-success); }
.sd-unverified { color: var(--sd-danger); }
.sd-recovery-result { gap: 8px; padding: 12px; border: 1px solid var(--sd-line); border-radius: 8px; background: var(--sd-raised); }
.sd-recovery-result span { color: var(--sd-muted); font-size: 12px; }
.sd-recovery-result code { color: var(--sd-text); font-size: 12px; }
.sd-error { color: var(--sd-danger) !important; }
.sd-success { color: var(--sd-success); }

/* Settings keep the same pattern as the client card. */
.sd-payments-toggle { gap: 8px; padding: 0; color: var(--sd-text); font-size: 13px; font-weight: 500; }
.sd-payments-toggle:hover { color: var(--sd-accent); }
.sd-payments-toggle svg { color: var(--sd-muted); }
.sd-payments-body { gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sd-line); }
.sd-payments-body > label { gap: 6px; color: var(--sd-muted); font-size: 12px; }
.sd-payments-body input, .sd-payments-body select { min-height: 40px; padding: 10px 12px; }
.sd-payments-body > button { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--sd-accent); color: var(--sd-accent-ink); font-size: 12px; font-weight: 600; }
.sd-payments-body > button:hover:not(:disabled) { background: #cbb5dc; }
.sd-payments-body > button.sd-hide-payment { border: 1px solid var(--sd-line); background: var(--sd-raised); color: var(--sd-muted); }
.sd-payment-live { color: var(--sd-success); font-size: 12px; }
.sd-payment-off, .sd-limits-hint { color: var(--sd-muted); font-size: 12px; line-height: 20px; }

/* Login uses the same material and type scale as the desk. */
.sd-login { padding: 24px; background: var(--sd-bg); }
.sd-login-card { width: min(100%, 420px); padding: 32px; border: 1px solid var(--sd-line); border-radius: 16px; background: var(--sd-panel); box-shadow: 0 16px 48px rgba(0, 0, 0, .16); }
.sd-login-card .sd-mark { width: 44px; height: 44px; margin-bottom: 24px; }
.sd-login-card h1 { margin: 12px 0 12px; color: var(--sd-text); font-size: 30px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
.sd-login-card p { margin: 0; color: var(--sd-muted); font-size: 13px; line-height: 20px; }
.sd-login-card form { gap: 8px; margin: 28px 0 0; }
.sd-login-card form label { color: var(--sd-muted); font-size: 12px; font-weight: 500; }
.sd-login-card form input:not([type='checkbox']) { height: 44px; padding: 0 12px; border: 1px solid var(--sd-line); border-radius: 8px; background: var(--sd-raised); color: var(--sd-text); font-size: 14px; letter-spacing: 0; }
.sd-login-card form input:not([type='checkbox'])::placeholder { color: var(--sd-subtle); }
.sd-login-card .sd-remember { gap: 8px; margin: 8px 0 4px; color: var(--sd-muted); font-size: 12px; font-weight: 400; }
.sd-login-card .sd-remember input { width: 16px; height: 16px; min-width: 16px; accent-color: var(--sd-accent); }
.sd-login-card form button { height: 44px; margin-top: 8px; border-radius: 8px; background: var(--sd-accent); color: var(--sd-accent-ink); font-size: 13px; font-weight: 600; }
.sd-login-card form button:hover:not(:disabled) { background: #cbb5dc; }
.sd-login-card .sd-error { margin-top: 12px; }

/* Keep the three-column workflow usable as panels narrow. */
@media (max-width: 1150px) {
  .sd-layout { grid-template-columns: 300px minmax(0, 1fr); }
  .sd-profile.sd-profile-show { top: 64px; width: min(100%, 360px); background: var(--sd-sidebar); box-shadow: -16px 0 40px rgba(0, 0, 0, .3); }
  .sd-client-toggle { min-height: 36px; padding: 8px; border: 1px solid var(--sd-line); border-radius: 8px; background: var(--sd-raised); color: var(--sd-text); font-size: 12px; }
  .sd-profile-back { color: var(--sd-accent); font-size: 12px; }
}
@media (max-width: 700px) {
  .sd-top { height: 60px; padding: 0 16px; }
  .sd-layout { height: calc(100dvh - 60px); }
  .sd-brand small, .sd-live { display: none; }
  .sd-queue-head { padding: 24px 16px 16px; }
  .sd-search { margin: 0 16px 16px; }
  .sd-ticket { padding: 16px; }
  .sd-thread-head { height: 60px; padding: 0 12px; }
  .sd-messages { padding: 20px 16px; }
  .sd-message { max-width: 88%; }
  .sd-compose { padding: 12px 16px; }
  .sd-profile.sd-profile-show { top: 60px; width: 100%; }
  .sd-login { padding: 16px; }
  .sd-login-card { padding: 24px; }
  .sd-login-card h1 { font-size: 28px; }
}