/* ═══════════════════════════════════════════════════════
   Linear Dark SaaS — Chat Application
   Design tokens from dark-saas skill spec
   ═══════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  --canvas:           #010102;
  --surface-1:        #0f1011;
  --surface-2:        #141516;
  --surface-3:        #18191a;
  --surface-4:        #191a1b;
  --hairline:         #23252a;
  --hairline-strong:  #34343a;

  --ink:              #f7f8f8;
  --ink-muted:        #d0d6e0;
  --ink-subtle:       #8a8f98;
  --ink-tertiary:     #62666d;

  --primary:          #5e6ad2;
  --primary-hover:    #828fff;
  --primary-subtle:   rgba(94,106,210,0.12);
  --on-primary:       #ffffff;

  --success:          #27a644;
  --success-subtle:   rgba(39,166,68,0.10);
  --danger:           #e5484d;
  --danger-subtle:    rgba(229,72,77,0.10);
  --warning:          #f5a623;
  --warning-subtle:   rgba(245,166,35,0.10);

  --radius-sm:        6px;
  --radius:           8px;
  --radius-lg:        12px;
  --radius-full:      9999px;

  --font:             "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:        "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;

  --sidebar-w:        280px;
  --header-h:         56px;
  --input-h:          64px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--font);
  font-size:13px;
  font-weight:400;
  line-height:1.5;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.01em;
}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-hover)}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-tertiary)}

/* ══════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════ */
.app-layout {
  display:flex;
  height:100vh;
  width:100vw;
  overflow:hidden;
}

/* ── Sidebar ── */
.sidebar {
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  height:100vh;
  background:var(--surface-1);
  border-right:1px solid var(--hairline);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  z-index:10;
}

.sidebar-header {
  height:var(--header-h);
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--hairline);
  flex-shrink:0;
}

.sidebar-logo {
  width:32px;height:32px;
  border-radius:var(--radius);
  background:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:var(--on-primary);
  flex-shrink:0;
  font-weight:700;
}
.sidebar-title {
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar-subtitle {
  font-size:11px;
  color:var(--ink-subtle);
  font-weight:400;
}

/* Online users list */
.sidebar-section {
  padding: 12px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.sidebar-users {
  flex:1;
  overflow-y:auto;
  padding:4px 8px;
}
.sidebar-user {
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background 0.12s;
  min-height:40px;
}
.sidebar-user:hover {
  background:var(--surface-3);
}
.sidebar-user-avatar {
  width:28px;height:28px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:#fff;
  flex-shrink:0;
  position:relative;
}
.sidebar-user-avatar::after {
  content:'';
  position:absolute;
  bottom:-1px;right:-1px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--success);
  border:2px solid var(--surface-1);
}
.sidebar-user-avatar.offline::after {
  background:var(--ink-tertiary);
}
.sidebar-user-info {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.sidebar-user-name {
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:-0.01em;
}
.sidebar-user-status {
  font-size:11px;
  color:var(--ink-subtle);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar-user-typing {
  color:var(--primary);
  font-size:11px;
  font-style:italic;
}

/* Profile at bottom */
.sidebar-profile {
  border-top:1px solid var(--hairline);
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  cursor:pointer;
  transition:background 0.12s;
}
.sidebar-profile:hover {
  background:var(--surface-3);
}
.sidebar-profile-avatar {
  width:32px;height:32px;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  color:#fff;
  flex-shrink:0;
}
.sidebar-profile-info {
  flex:1;
  min-width:0;
}
.sidebar-profile-name {
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar-profile-id {
  font-size:11px;
  color:var(--ink-tertiary);
  font-family:var(--font-mono);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar-profile-edit {
  font-size:11px;
  color:var(--ink-subtle);
  padding:3px 8px;
  border-radius:var(--radius-sm);
  border:1px solid var(--hairline);
  background:transparent;
  transition:all 0.12s;
  flex-shrink:0;
}
.sidebar-profile-edit:hover {
  background:var(--surface-3);
  color:var(--ink);
}

/* ── Main Chat Area ── */
.chat-main {
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--canvas);
}

/* Chat header */
.chat-header {
  height:var(--header-h);
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--hairline);
  flex-shrink:0;
  background:var(--canvas);
}
.chat-header-info {
  display:flex;
  flex-direction:column;
}
.chat-header-title {
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.02em;
}
.chat-header-meta {
  font-size:11px;
  color:var(--ink-subtle);
  display:flex;
  align-items:center;
  gap:6px;
}
.chat-header-dot {
  width:6px;height:6px;
  border-radius:50%;
  background:var(--success);
  flex-shrink:0;
}
.chat-header-actions {
  display:flex;
  gap:4px;
}
.chat-header-btn {
  width:32px;height:32px;
  border-radius:var(--radius-sm);
  border:none;
  background:transparent;
  color:var(--ink-subtle);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  transition:all 0.12s;
}
.chat-header-btn:hover {
  background:var(--surface-3);
  color:var(--ink);
}

/* Messages area */
.chat-messages {
  flex:1;
  overflow-y:auto;
  padding:16px 20px;
}
.chat-messages-inner {
  display:flex;
  flex-direction:column;
  gap:1px;
  min-height:100%;
  justify-content:flex-end;
}

/* ── Date divider ── */
.date-sep {
  display:flex;
  align-items:center;
  justify-content:center;
  margin:16px 0;
}
.date-sep span {
  font-size:11px;
  color:var(--ink-subtle);
  background:var(--surface-2);
  padding:3px 12px;
  border-radius:var(--radius-full);
  font-weight:500;
  border:1px solid var(--hairline);
}

/* ── Message ── */
.msg {
  display:flex;
  align-items:flex-end;
  gap:8px;
  max-width:72%;
  animation:msgIn 0.2s ease-out;
  position:relative;
}
.msg.self {
  align-self:flex-end;
  flex-direction:row-reverse;
}
.msg.other {
  align-self:flex-start;
}
.msg.grouped {
  margin-top:0;
}
.msg.grouped .msg-avatar {
  visibility:hidden;
}
.msg.grouped .msg-sender {
  display:none;
}
@keyframes msgIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

.msg-avatar {
  width:30px;height:30px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:#fff;
  flex-shrink:0;
  align-self:flex-end;
}
.msg.self .msg-avatar { display:none; }

.msg-body {
  display:flex;
  flex-direction:column;
  min-width:0;
}
.msg-sender {
  font-size:11px;
  font-weight:600;
  color:var(--primary);
  margin-bottom:2px;
  padding-left:4px;
  letter-spacing:-0.01em;
}
.msg.self .msg-sender { display:none; }

.msg-bubble {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  border: 1px solid var(--hairline);
}
.msg.self .msg-bubble {
  background: var(--primary-subtle);
  border-color: rgba(94,106,210,0.18);
  border-radius: var(--radius) 0 var(--radius) var(--radius);
}
.msg.grouped .msg-bubble {
  border-radius: var(--radius-sm);
}
.msg.self.grouped .msg-bubble {
  border-radius: var(--radius-sm);
}

.msg-time {
  font-size:10px;
  color:var(--ink-tertiary);
  margin-top:2px;
  padding:0 4px;
  font-family:var(--font-mono);
  letter-spacing:0;
}
.msg.self .msg-time {
  text-align:right;
}

/* Media in messages */
.msg-media {
  margin-top:4px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  max-width:320px;
  border:1px solid var(--hairline);
}
.msg-media img {
  display:block;
  width:100%;
  height:auto;
  cursor:pointer;
  transition:transform 0.15s;
}
.msg-media img:hover { transform:scale(1.02); }
.msg-media video {
  display:block;
  width:100%;
  max-height:280px;
}
.msg-media audio {
  display:block;
  width:260px;
  margin-top:4px;
}
.msg-file {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:var(--surface-3);
  border-radius:var(--radius-sm);
  margin-top:4px;
  font-size:12px;
  border:1px solid var(--hairline);
}
.msg-file-icon {
  font-size:20px;
  flex-shrink:0;
}
.msg-file-name {
  font-size:12px;
  color:var(--ink-muted);
  word-break:break-all;
}
.msg-file-size {
  font-size:10px;
  color:var(--ink-tertiary);
  font-family:var(--font-mono);
}

/* System message */
.msg.system {
  align-self:center;
  max-width:80%;
}
.msg.system .msg-bubble {
  background:transparent;
  border:none;
  color:var(--ink-tertiary);
  font-size:11px;
  text-align:center;
  padding:4px 12px;
}

/* Inline emoji */
.msg-emoji {
  display:inline-block;
  vertical-align:middle;
  width:22px;height:22px;
  margin:0 1px;
}

/* ── Typing indicator ── */
.typing-indicator {
  padding:6px 20px;
  font-size:11px;
  color:var(--ink-subtle);
  font-style:italic;
  display:none;
  flex-shrink:0;
}
.typing-indicator.show { display:block; }
.typing-dots {
  display:inline-flex;
  gap:3px;
  margin-left:4px;
  vertical-align:middle;
}
.typing-dots span {
  width:4px;height:4px;
  border-radius:50%;
  background:var(--ink-subtle);
  animation:dotBounce 1.4s infinite ease-in-out;
}
.typing-dots span:nth-child(1){animation-delay:0s}
.typing-dots span:nth-child(2){animation-delay:0.16s}
.typing-dots span:nth-child(3){animation-delay:0.32s}
@keyframes dotBounce {
  0%,80%,100%{transform:scale(0.6);opacity:0.4}
  40%{transform:scale(1);opacity:1}
}

/* ── Input area ── */
.chat-input {
  padding:8px 16px 12px;
  border-top:1px solid var(--hairline);
  background:var(--canvas);
  flex-shrink:0;
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.chat-input-actions {
  display:flex;
  align-items:center;
  gap:2px;
  margin-bottom:2px;
}
.chat-input-btn {
  width:36px;height:36px;
  border-radius:var(--radius);
  border:none;
  background:transparent;
  color:var(--ink-subtle);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  transition:all 0.12s;
  flex-shrink:0;
}
.chat-input-btn:hover {
  background:var(--surface-3);
  color:var(--ink);
}
.chat-input-btn.active {
  color:var(--primary);
}
.chat-input-wrapper {
  flex:1;
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  display:flex;
  align-items:flex-end;
  transition:border-color 0.15s;
  min-height:38px;
  max-height:120px;
}
.chat-input-wrapper:focus-within {
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(94,106,210,0.25);
}
#msgInput {
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--ink);
  font-size:13px;
  resize:none;
  padding:8px 10px;
  line-height:1.45;
  max-height:104px;
  overflow-y:auto;
  font-family:var(--font);
}
#msgInput::placeholder {
  color:var(--ink-tertiary);
}
.chat-send-btn {
  width:38px;height:38px;
  border-radius:var(--radius);
  border:none;
  background:var(--primary);
  color:var(--on-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
  transition:all 0.12s;
  font-weight:500;
}
.chat-send-btn:hover {
  background:var(--primary-hover);
}
.chat-send-btn:active {
  transform:scale(0.95);
}
.chat-send-btn:disabled {
  background:var(--surface-3);
  color:var(--ink-tertiary);
  cursor:default;
  transform:none;
}

/* ── Emoji Picker ── */
.emoji-overlay {
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
}
.emoji-overlay.show { display:block; }
.emoji-panel {
  position:absolute;
  bottom:80px;
  left:50%;
  transform:translateX(-50%);
  width:380px;
  max-height:420px;
  background:var(--surface-1);
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius-lg);
  box-shadow:0 16px 48px rgba(0,0,0,0.5);
  z-index:201;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:panelUp 0.15s ease-out;
}
@keyframes panelUp {
  from { opacity:0; transform:translateX(-50%) translateY(8px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
.emoji-panel-search {
  padding:8px;
  border-bottom:1px solid var(--hairline);
  flex-shrink:0;
}
.emoji-panel-search input {
  width:100%;
  padding:7px 12px;
  border-radius:var(--radius);
  border:1px solid var(--hairline);
  background:var(--surface-2);
  color:var(--ink);
  font-size:12px;
  outline:none;
  transition:border-color 0.15s;
}
.emoji-panel-search input:focus {
  border-color:var(--primary);
}
.emoji-panel-tabs {
  display:flex;
  border-bottom:1px solid var(--hairline);
  overflow-x:auto;
  flex-shrink:0;
  padding:2px 4px;
}
.emoji-panel-tab {
  padding:6px 10px;
  background:transparent;
  border:none;
  color:var(--ink-subtle);
  font-size:11px;
  font-weight:500;
  cursor:pointer;
  border-radius:var(--radius-sm);
  white-space:nowrap;
  transition:all 0.12s;
  flex-shrink:0;
}
.emoji-panel-tab:hover { color:var(--ink); background:var(--surface-3); }
.emoji-panel-tab.active { color:var(--primary); background:var(--primary-subtle); }
.emoji-panel-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:2px;
  padding:8px;
  overflow-y:auto;
  flex:1;
}
.emoji-panel-item {
  width:52px;height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background 0.12s;
  padding:4px;
}
.emoji-panel-item:hover {
  background:var(--surface-3);
}
.emoji-panel-item img {
  width:36px;height:36px;
  object-fit:contain;
}

/* ── Toast ── */
.toast-container {
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:500;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  pointer-events:none;
}
.toast {
  background:var(--surface-1);
  color:var(--ink);
  padding:10px 16px;
  border-radius:var(--radius);
  font-size:12px;
  font-weight:500;
  border:1px solid var(--hairline);
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
  pointer-events:auto;
  animation:toastIn 0.25s ease-out;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:380px;
}
.toast.error { border-left:2px solid var(--danger); }
.toast.success { border-left:2px solid var(--success); }
.toast.out { animation:toastOut 0.2s ease-out forwards; }
@keyframes toastIn  { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-12px)} }

/* ── Lightbox ── */
.lightbox {
  position:fixed;
  inset:0;
  background:rgba(1,1,2,0.92);
  z-index:400;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  animation:fadeIn 0.15s;
}
.lightbox img {
  max-width:90vw;
  max-height:90vh;
  border-radius:var(--radius);
  box-shadow:0 8px 40px rgba(0,0,0,0.6);
}
.lightbox-close {
  position:absolute;
  top:16px;right:16px;
  width:36px;height:36px;
  border-radius:var(--radius);
  border:1px solid var(--hairline);
  background:var(--surface-1);
  color:var(--ink);
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.12s;
}
.lightbox-close:hover { background:var(--surface-3); }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ── Profile Editor Modal ── */
.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(1,1,2,0.6);
  z-index:300;
  display:none;
  align-items:center;
  justify-content:center;
}
.modal-overlay.show { display:flex; }
.modal {
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:24px;
  width:360px;
  max-width:90vw;
  box-shadow:0 16px 48px rgba(0,0,0,0.5);
  animation:panelUp 0.15s ease-out;
}
.modal h3 {
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:16px;
  letter-spacing:-0.02em;
}
.modal-field {
  margin-bottom:14px;
}
.modal-field label {
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--ink-subtle);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.modal-field input {
  width:100%;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--hairline);
  background:var(--surface-2);
  color:var(--ink);
  font-size:13px;
  outline:none;
  transition:border-color 0.15s;
}
.modal-field input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(94,106,210,0.25);
}
.modal-field input[type="color"] {
  width:48px;height:32px;
  padding:2px;
  cursor:pointer;
}
.modal-actions {
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:20px;
}
.modal-btn {
  padding:7px 16px;
  border-radius:var(--radius-sm);
  border:none;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:all 0.12s;
}
.modal-btn.primary {
  background:var(--primary);
  color:var(--on-primary);
}
.modal-btn.primary:hover { background:var(--primary-hover); }
.modal-btn.ghost {
  background:transparent;
  color:var(--ink-muted);
  border:1px solid var(--hairline);
}
.modal-btn.ghost:hover { background:var(--surface-3); color:var(--ink); }

/* ── Admin Panel (hidden, no entry point) ── */
.admin-overlay {
  position:fixed;
  inset:0;
  background:var(--canvas);
  z-index:350;
  display:none;
  flex-direction:column;
}
.admin-overlay.show { display:flex; }
.admin-header {
  height:var(--header-h);
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--hairline);
  flex-shrink:0;
}
.admin-header h2 {
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.02em;
}
.admin-tabs {
  display:flex;
  gap:2px;
  padding:8px 16px;
  border-bottom:1px solid var(--hairline);
  flex-shrink:0;
}
.admin-tab {
  padding:6px 14px;
  border-radius:var(--radius-sm);
  border:none;
  background:transparent;
  color:var(--ink-subtle);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:all 0.12s;
}
.admin-tab:hover { color:var(--ink); background:var(--surface-3); }
.admin-tab.active { color:var(--primary); background:var(--primary-subtle); }
.admin-body {
  flex:1;
  overflow-y:auto;
  padding:20px;
}
.admin-panel { display:none; }
.admin-panel.active { display:block; }
.admin-field {
  margin-bottom:16px;
}
.admin-field label {
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--ink-subtle);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.admin-field input,
.admin-field select {
  width:100%;
  max-width:300px;
  padding:7px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--hairline);
  background:var(--surface-2);
  color:var(--ink);
  font-size:12px;
  outline:none;
}
.admin-field input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(94,106,210,0.25);
}
.admin-btn {
  padding:7px 16px;
  border-radius:var(--radius-sm);
  border:none;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:all 0.12s;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.admin-btn.primary { background:var(--primary); color:var(--on-primary); }
.admin-btn.primary:hover { background:var(--primary-hover); }
.admin-btn.danger { background:var(--danger); color:#fff; }
.admin-btn.danger:hover { background:#f06166; }
.admin-btn.success { background:var(--success); color:#fff; }
.admin-btn.ghost { background:transparent; color:var(--ink-muted); border:1px solid var(--hairline); }
.admin-btn.ghost:hover { background:var(--surface-3); }
.admin-btn.sm { padding:4px 10px; font-size:11px; }
.admin-table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.admin-table th {
  padding:8px 10px;
  text-align:left;
  font-size:10px;
  font-weight:600;
  color:var(--ink-subtle);
  text-transform:uppercase;
  letter-spacing:0.04em;
  border-bottom:1px solid var(--hairline);
}
.admin-table td {
  padding:8px 10px;
  border-bottom:1px solid var(--hairline);
  color:var(--ink-muted);
  vertical-align:middle;
}
.admin-table tr:hover td {
  background:var(--surface-2);
}
.admin-badge {
  display:inline-block;
  padding:2px 8px;
  border-radius:var(--radius-full);
  font-size:10px;
  font-weight:600;
}
.admin-badge.ok { background:var(--success-subtle); color:var(--success); }
.admin-badge.bad { background:var(--danger-subtle); color:var(--danger); }
.admin-color-dot {
  display:inline-block;
  width:12px;height:12px;
  border-radius:50%;
  vertical-align:middle;
  margin-right:4px;
  border:1px solid var(--hairline);
}
.admin-toggle {
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:12px;
  color:var(--ink-muted);
}
.admin-toggle input { display:none; }
.admin-toggle-track {
  width:36px;height:20px;
  border-radius:10px;
  background:var(--hairline-strong);
  position:relative;
  transition:background 0.15s;
}
.admin-toggle-track::after {
  content:'';
  position:absolute;
  width:16px;height:16px;
  border-radius:50%;
  background:#fff;
  top:2px;left:2px;
  transition:transform 0.15s;
}
.admin-toggle input:checked + .admin-toggle-track {
  background:var(--primary);
}
.admin-toggle input:checked + .admin-toggle-track::after {
  transform:translateX(16px);
}

/* ── Empty State ── */
.empty-state {
  text-align:center;
  padding:40px 20px;
  color:var(--ink-subtle);
}
.empty-state-icon {
  font-size:40px;
  margin-bottom:12px;
  opacity:0.4;
}
.empty-state-text {
  font-size:13px;
  font-weight:500;
  color:var(--ink-muted);
}
.empty-state-sub {
  font-size:11px;
  color:var(--ink-tertiary);
  margin-top:2px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .sidebar {
    position:fixed;
    left:0;top:0;
    z-index:50;
    transform:translateX(-100%);
    transition:transform 0.2s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
  }
  .sidebar.open {
    transform:translateX(0);
  }
  .sidebar-backdrop {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(1,1,2,0.5);
    z-index:49;
  }
  .sidebar-backdrop.show { display:block; }
  .chat-header { padding:0 12px; }
  .chat-messages { padding:10px 12px; }
  .msg { max-width:88%; }
  .chat-input { padding:6px 10px 10px; }
  .emoji-panel {
    width:calc(100vw - 16px);
    left:8px; transform:none;
    bottom:70px;
  }
  @keyframes panelUpM {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .emoji-panel {
    animation: panelUpM 0.15s ease-out;
  }
}

/* Desktop: hide hamburger */
@media (min-width: 769px) {
  .mobile-only { display:none !important; }
}