/* Quiet, native-feeling surfaces. Shared across the dashboard, sign-in and chat. */
:root {
  --bg-primary: #f5f5f7;
  --bg-secondary: #f5f5f7;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --border-color: #dedee3;
  --border-strong: #adadb5;
  --text-main: #303035;
  --text-white: #1d1d1f;
  --text-muted: #636369;
  --color-primary: #0066cc;
  --color-success: #226d38;
  --color-warning: #805500;
  --color-danger: #b32835;
  --font-family-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  --font-family-title: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  --sidebar-width: 238px;
  --sidebar-surface: #ececef;
  --toolbar-surface: #fafafc;
  --hover-surface: #eeeef2;
  --selected-surface: #dfeaf9;
  --selected-text: #0058b0;
  --accent-fill: #0066cc;
  --accent-hover: #0055aa;
  --success-surface: #e8f3eb;
  --warning-surface: #fff1d6;
  --danger-surface: #fcebed;
  --card-shadow: 0 2px 8px #00000003, 0 12px 30px #00000003;
  --dialog-shadow: 0 28px 90px #00000025;
  --focus-ring: #0071e3;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg-primary: #151517;
  --bg-secondary: #242427;
  --bg-card: #1e1e21;
  --bg-input: #29292d;
  --border-color: #3c3c42;
  --border-strong: #797981;
  --text-main: #e4e4e9;
  --text-white: #f5f5f7;
  --text-muted: #a7a7b0;
  --color-primary: #78b9ff;
  --color-success: #8bd59c;
  --color-warning: #efc975;
  --color-danger: #ff9ba7;
  --sidebar-surface: #1b1b1e;
  --toolbar-surface: #1a1a1d;
  --hover-surface: #303035;
  --selected-surface: #203753;
  --selected-text: #98caff;
  --accent-fill: #0867c8;
  --accent-hover: #075cb3;
  --success-surface: #20392b;
  --warning-surface: #3c321e;
  --danger-surface: #42282e;
  --card-shadow: 0 2px 8px #00000008, 0 12px 30px #00000008;
  --dialog-shadow: 0 28px 90px #00000070;
  --focus-ring: #83bdff;
  color-scheme: dark;
}
body { background: var(--bg-primary); -webkit-font-smoothing: antialiased; }
h1,h2,h3 { font-family: var(--font-family-title); }
h1 { font-weight: 650; letter-spacing: -.055em; font-size: 2.55rem; }
h2 { font-weight: 600; }
:focus-visible { outline-color: var(--focus-ring); }
.sidebar { background: var(--sidebar-surface); color: var(--text-main); border-right: 1px solid var(--border-color); padding-top: 32px; }
.sidebar-header { padding-bottom: 34px; }
.brand { font-size: 1.15rem; font-weight: 650; }
.brand>svg { width: 36px; height: 36px; border-radius: 10px; background: var(--text-white); color: var(--bg-card); padding: 8px; }
.brand-caption { color: var(--text-muted); font-size: .625rem; letter-spacing: .08em; font-weight: 500; }
.nav-label { color: var(--text-muted); font-size: .75rem; text-transform: none; letter-spacing: 0; padding-bottom: 7px; }
.menu-item { color: var(--text-main); font-size: .875rem; font-weight: 450; min-height: 44px; border-radius: 9px; padding: 11px 13px; }
.menu-item svg { color: var(--color-primary); stroke-width: 1.6; width: 18px; height: 18px; }
.menu-item:hover { background: var(--hover-surface); color: var(--text-white); }
.menu-item.active,.sidebar-menu .menu-item.active { background: var(--selected-surface); color: var(--selected-text); box-shadow: none; font-weight: 600; }
.sidebar-note { color: var(--text-muted); }
.sidebar-note small,.role-badge,.sidebar-note-dot { color: var(--text-muted); }
.sidebar-note-dot { background: var(--color-success); }
.sidebar-footer { border-color: var(--border-color); }
.sidebar .btn-icon:hover { background: var(--hover-surface); }
.top-bar { min-height: 78px; padding-top: 12px; padding-bottom: 12px; background: var(--toolbar-surface); gap: 20px; }
.workspace-breadcrumb { font-size: .8125rem; }
.workspace-breadcrumb span,.footer-separator { color: var(--text-muted); }
.custom-select-wrapper select { background: var(--bg-card); border-color: var(--border-color); border-radius: 10px; font-size: .8125rem; min-width: 170px; }
.status-indicator { font-size: .75rem; }
.view-container { padding-top: 42px; }
.page-heading { margin-bottom: 32px; align-items: flex-end; }
.page-heading>.eyebrow,.page-heading .eyebrow { display: none; }
.page-heading p { margin-top: 10px; font-size: .9375rem; max-width: 570px; }
.workspace-date { font-size: .8125rem; padding-bottom: 3px; }
.guild-banner { margin-bottom: 26px; }
.guild-logo-img { width: 38px; height: 38px; border-radius: 11px; }
.guild-name { font-size: .9375rem; }
.glass-card { border-color: var(--border-color); border-radius: 18px; box-shadow: var(--card-shadow); }
.metrics-grid { gap: 16px; margin-bottom: 26px; }
.metric-card { min-height: 151px; padding: 22px; }
.metric-card:first-child { background: var(--bg-card); border-color: var(--border-color); }
.metric-card:first-child h3 { color: var(--text-muted); }
.metric-card:first-child .metric-value { color: var(--color-primary); }
.metric-label { font-size: .8125rem; line-height: 1.5; font-weight: 500; }
.feature-card .metric-value { font-size: 2.25rem; font-weight: 600; letter-spacing: -.045em; margin-top: 20px; }
.feature-card .metric-value-sm { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.card-heading { padding: 26px; }
.card-heading h2 { font-size: 1.15rem; }
.workspace-shortcuts { padding: 27px; }
.workspace-shortcuts .eyebrow { font-size: .75rem; letter-spacing: 0; font-weight: 500; }
.workspace-shortcuts>h2 { font-size: 1.375rem; letter-spacing: -.035em; }
.workspace-shortcuts>button { border-color: var(--border-color); }
.workspace-shortcuts>button>span { font-size: .875rem; font-weight: 500; }
.workspace-shortcuts>button>svg:last-child { color: var(--text-muted); }
.btn { border-radius: 10px; font-weight: 500; }
.btn-primary { background: var(--accent-fill); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--bg-card); border-color: var(--border-color); color: var(--text-main); }
.btn-secondary:hover { background: var(--hover-surface); border-color: var(--border-strong); }
.btn-danger { background: var(--danger-surface); border-color: var(--border-color); color: var(--color-danger); }
.btn-danger:hover { background: var(--danger-surface); border-color: var(--color-danger); }
.btn-close:hover,.btn-close-chat:hover { background: var(--hover-surface); }
input,select,textarea { border-color: var(--border-strong); border-radius: 9px; }
input::placeholder,textarea::placeholder { color: var(--text-muted); }
.form-group label { font-weight: 500; }
.settings-section summary { font-weight: 550; }
.settings-form-container,.categories-form-container,.tags-form,.tags-list,.tickets-container,.tickets-list-side { padding: 28px; }
.question-form-row,.stat-box { border-radius: 12px; }
th { background: var(--bg-secondary); color: var(--text-muted); font-weight: 500; border-color: var(--border-color); }
td { border-color: var(--border-color); padding-top: 16px; padding-bottom: 16px; }
tbody tr:hover { background: var(--bg-secondary); }
.badge { border-radius: 6px; font-weight: 500; }
.badge-claimed,.badge-low { background: var(--success-surface); color: var(--color-success); }
.badge-unclaimed,.badge-medium { background: var(--warning-surface); color: var(--color-warning); }
.badge-high { background: var(--danger-surface); color: var(--color-danger); }
.queue-link { font-weight: 500; }
.load-notice,.welcome-symbol { color: var(--selected-text); background: var(--selected-surface); }
.skip-link,.toast { background: var(--bg-card); }
.toast { border-radius: 12px; box-shadow: var(--dialog-shadow); }
.modal-card { box-shadow: var(--dialog-shadow); border-radius: 22px; }
.modal-overlay { background: #00000066; }
.chat-header,.live-chat-footer { background: var(--bg-card); }
.chat-messages { background: var(--bg-secondary); }
.chat-msg-bot { background: var(--selected-surface); color: var(--selected-text); }
.chat-resize-handle { background: var(--border-color); }
.chat-resize-handle:hover,.chat-resize-handle.resizing { background: var(--color-primary); }
.live-chat-wrapper .template-item:hover { background: var(--selected-surface); }
.live-chat-wrapper>.workspace-footer { border: 0; padding: 4px 0 12px; flex-direction: row; align-items: center; flex-wrap: wrap; }
.live-chat-wrapper>.workspace-footer .back-btn { margin-right: auto; min-height: 44px; display: inline-flex; align-items: center; font-size: .875rem; text-decoration: none; }
.workspace-footer { font-size: .75rem; }
/* The Discord message preview keeps Discord's own appearance in both themes. */
.discord-message .discord-btn { border-radius: 4px; }
.auth-screen { position: relative; background: var(--bg-primary); }
.auth-shell { background: var(--bg-card); border-color: var(--border-color); border-radius: 28px; box-shadow: var(--dialog-shadow); }
.auth-intro { background: var(--bg-secondary); color: var(--text-main); }
.auth-story h1 { color: var(--text-white); font-weight: 650; font-size: 3.75rem; letter-spacing: -.065em; }
.auth-story .eyebrow { color: var(--color-primary); letter-spacing: 0; font-weight: 500; }
.auth-story p,.auth-note { color: var(--text-muted); }
.auth-capabilities { color: var(--text-main); }
.auth-capabilities svg { color: var(--color-primary); }
.auth-card h2 { font-size: 1.875rem; font-weight: 600; }
.auth-card .eyebrow { color: var(--text-muted); font-weight: 500; letter-spacing: .02em; }
.auth-card .btn-discord { background: var(--accent-fill); border-radius: 12px; }
.auth-card .btn-discord:hover { background: var(--accent-hover); }
.auth-access-note { border-color: var(--border-color); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 10px 13px; flex-shrink: 0; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 12px; font-size: .8125rem; font-weight: 500; }
.theme-toggle:hover { background: var(--hover-surface); border-color: var(--border-strong); }
.theme-toggle svg { width: 18px; height: 18px; stroke-width: 1.6; }
.theme-toggle .theme-sun { display: none; }
[data-theme='dark'] .theme-toggle .theme-sun { display: block; }
[data-theme='dark'] .theme-toggle .theme-moon { display: none; }
.auth-theme-toggle { position: absolute; top: 24px; right: 28px; }
@supports (backdrop-filter: blur(18px)) {
  .top-bar { background: color-mix(in srgb, var(--toolbar-surface) 90%, transparent); backdrop-filter: blur(18px); }
}
@media (max-width: 1250px) {
  .top-bar { gap: 14px; }
  .workspace-shortcuts>button { border-top: 0; }
  .metrics-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 800px) {
  .sidebar { border-right: 0; border-bottom: 1px solid var(--border-color); padding-top: 20px; }
  .sidebar-header { padding-bottom: 18px; }
  .view-container { padding-top: 28px; }
  h1 { font-size: 2.15rem; }
  .top-bar { padding: 12px 20px; flex-wrap: wrap; }
  .top-bar .guild-selector-container { flex: 1; max-width: none; }
  .top-bar .status-indicator { margin-left: auto; }
  .theme-toggle [data-theme-label] { display: none; }
  .theme-toggle { padding: 10px; }
  .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .metric-card { min-height: 138px; }
  .metric-card:last-child { grid-column: span 2; min-height: 108px; }
  .workspace-shortcuts>button { border-top: 1px solid var(--border-color); }
  .card-heading,.workspace-shortcuts { padding: 22px; }
  .settings-form-container,.categories-form-container,.tags-form,.tags-list,.tickets-container,.tickets-list-side { padding: 22px; }
  .auth-screen { padding-top: 82px; }
  .auth-theme-toggle { top: 18px; right: 20px; }
  .auth-theme-toggle [data-theme-label] { display: inline; }
  .auth-story h1 { font-size: 2.8rem; }
}
@media (max-width: 480px) {
  .top-bar { gap: 10px; }
  .custom-select-wrapper select { min-width: 0; max-width: 160px; }
  .top-bar .status-indicator { font-size: .6875rem; }
  .metric-card { padding: 18px; }
  .feature-card .metric-value { font-size: 2rem; }
  .feature-card .metric-value-sm { font-size: 1rem; }
  .glass-card { border-radius: 16px; }
  .queue-preview table { min-width: 460px; }
  .auth-shell { border-radius: 22px; }
  .live-chat-wrapper>.workspace-footer { gap: 8px; }
  .live-chat-wrapper>.workspace-footer .back-btn { font-size: .8125rem; }
}
@media (prefers-reduced-transparency: reduce) { .top-bar { background: var(--toolbar-surface); backdrop-filter: none; } }