/* ============================================
   STAKE BOT CONSOLE — Premium Dashboard UI
   ============================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-0: #0B0F12;
  --bg-1: #11181D;
  --bg-2: #161F26;
  --bg-3: #1E2932;
  --bg-hover: #28333D;
  --border: #28333D;
  --border-soft: rgba(255,255,255,0.06);
  --text: #FFFFFF;
  --text-2: #BFCBD7;
  --text-3: #7E8A95;
  --text-4: #4D5560;
  --accent: #00E701;
  --accent-2: #00B801;
  --accent-soft: rgba(0, 231, 1, 0.12);
  --danger: #FF4757;
  --warning: #FFA502;
  --whale: #4FC3F7;
  --info: #6C8AFF;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --t-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-0);
  color: var(--text);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button, input, textarea {
  font: inherit;
  outline: none;
  border: none;
  color: inherit;
  background: none;
}
button { cursor: pointer; }

code, .mono {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 0.85em;
  font-weight: 500;
}

/* ============================================
   ICONS — SVG inline via .ic .ic-{name}
   ============================================ */
.ic {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
}
.ic svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ic-sm { width: 14px; height: 14px; }
.ic-md { width: 18px; height: 18px; }
.ic-lg { width: 22px; height: 22px; }
.ic-xl { width: 64px; height: 64px; }
.ic-input {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-body {
  background: radial-gradient(ellipse at top, #1A2C38 0%, #0B0F12 100%);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--accent);
  font-size: 14px;
}

.logo-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(0, 231, 1, 0.6);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.login-card h1 {
  font-size: 20px;
  margin-bottom: 28px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-card label span {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.login-card input {
  background: var(--bg-0);
  border: 1px solid var(--border);
  padding: 13px 16px;
  border-radius: var(--r-sm);
  color: var(--text);
  transition: all var(--t-fast);
  font-size: 14px;
}

.login-card input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 231, 1, 0.12);
}

.login-card button {
  margin-top: 12px;
  background: var(--accent);
  color: #000;
  font-weight: 600;
  padding: 13px;
  border-radius: var(--r-sm);
  transition: transform var(--t-fast), background var(--t-fast);
  font-size: 14px;
}

.login-card button:hover { background: var(--accent-2); transform: translateY(-1px); }
.login-card button:active { transform: translateY(0); }

.login-hint {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-4);
}
.login-hint code { font-size: 11px; }

.flash {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
  font-size: 13px;
}
.flash-error {
  background: rgba(255, 71, 87, 0.12);
  border: 1px solid rgba(255, 71, 87, 0.3);
  color: var(--danger);
}

/* ============================================
   APP LAYOUT
   ============================================ */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.topbar {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 30;
  flex-shrink: 0;
  gap: 12px;
}

.back-btn {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--text-2);
  transition: all var(--t-fast);
}
.back-btn .ic { width: 20px; height: 20px; }
.back-btn:hover { background: var(--bg-3); color: var(--text); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.brand-name {
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--accent);
  font-size: 13px;
}

.brand-sub {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}

.topbar-actions {
  display: flex;
  gap: 8px;
}

.btn-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #000;
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--t-fast);
}
.btn-pill .ic { width: 14px; height: 14px; }
.btn-pill:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn-pill.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-pill.btn-ghost:hover {
  background: var(--bg-3);
  color: var(--text);
  border-color: var(--text-3);
}

.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
  width: 360px;
  min-width: 320px;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-search {
  position: relative;
  padding: 12px 14px 8px;
  display: flex;
  align-items: center;
}

#search {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--border);
  padding: 10px 14px 10px 38px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13.5px;
  transition: all var(--t-fast);
}
#search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 231, 1, 0.10);
}
#search::placeholder { color: var(--text-4); }

.campaign-row {
  padding: 8px 14px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.campaign-row:empty { display: none; }
.campaign-row .chip { font-size: 11px; }
.chip-count {
  background: rgba(255,255,255,0.10);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  margin-left: 4px;
}
.chip.active .chip-count {
  background: rgba(0,0,0,0.20);
}

.cmp-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(108, 138, 255, 0.15);
  color: var(--info);
  margin-left: 6px;
  font-weight: 500;
  vertical-align: middle;
}

.filter-row {
  padding: 6px 14px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}

.chip {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 500;
  transition: all var(--t-fast);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
.chip .ic { width: 12px; height: 12px; }
.chip:hover { background: var(--bg-3); color: var(--text-2); }
.chip.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  font-weight: 600;
}

.user-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.loading {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 40px 20px;
}
.loading-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: bounce 1.4s ease-in-out infinite;
}
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

.empty-list {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-4);
  font-size: 13px;
}

/* ============================================
   USER ITEMS
   ============================================ */
.user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background var(--t-fast);
  position: relative;
  border-left: 3px solid transparent;
}
.user-item:hover { background: var(--bg-2); }
.user-item.active {
  background: var(--bg-2);
  border-left-color: var(--accent);
}

/* Unread highlight: bold name, brighter preview, green hairline */
.user-item.unread {
  background: rgba(0, 231, 1, 0.04);
  border-left-color: var(--accent);
}
.user-item.unread .user-name { color: var(--text); font-weight: 700; }
.user-item.unread .user-preview { color: var(--text-2); font-weight: 600; }
.user-item.unread .user-time { color: var(--accent); font-weight: 600; }

.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(0, 231, 1, 0.15);
}

/* Active-now pulse dot on the avatar */
.avatar-wrap { position: relative; flex-shrink: 0; }
.active-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2.5px solid var(--bg-1);
  box-shadow: 0 0 0 0 rgba(0, 231, 1, 0.6);
  animation: active-pulse 1.6s ease-out infinite;
}
@keyframes active-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(0, 231, 1, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 231, 1, 0); }
  100% { box-shadow: 0 0 0 0   rgba(0, 231, 1, 0); }
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2C3E50, #4CA1AF);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
  position: relative;
  text-transform: uppercase;
}
.avatar.whale { background: linear-gradient(135deg, #4FC3F7, #1976D2); }
.avatar.active-c { background: linear-gradient(135deg, #00E701, #00897B); color: #000; }
.avatar.new-c { background: linear-gradient(135deg, #FFA502, #E67E22); }
.avatar.hunter-c { background: linear-gradient(135deg, #FF4757, #C0392B); }
.avatar.interested-c { background: linear-gradient(135deg, #FFEB3B, #F57F17); color: #000; }
.avatar.pending-c { background: linear-gradient(135deg, #607D8B, #455A64); }

.avatar-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-4);
  border: 2.5px solid var(--bg-1);
}
.avatar-status.online { background: var(--accent); }

.user-body {
  flex: 1;
  min-width: 0;
}

.user-row-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.user-time {
  font-size: 11px;
  color: var(--text-4);
  flex-shrink: 0;
  font-weight: 500;
}

.user-row-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-preview {
  font-size: 12.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.user-preview.outgoing { color: var(--text-4); }
.user-preview.outgoing::before { content: "↗ "; opacity: 0.6; }

.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.cat-badge .ic { width: 11px; height: 11px; }
.cat-whale { background: rgba(79, 195, 247, 0.18); color: var(--whale); }
.cat-active { background: rgba(0, 231, 1, 0.15); color: var(--accent); }
.cat-new { background: rgba(255, 165, 2, 0.18); color: var(--warning); }
.cat-bonus_hunter { background: rgba(255, 71, 87, 0.18); color: var(--danger); }
.cat-interested_no_money { background: rgba(255, 235, 59, 0.18); color: #FFD600; }
.cat-not_interested { background: rgba(126, 138, 149, 0.18); color: var(--text-3); }
.cat-unqualified { background: rgba(126, 138, 149, 0.12); color: var(--text-4); }

/* ============================================
   STATS BAR
   ============================================ */
.stats-bar {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-0);
}
.stat {
  background: var(--bg-2);
  padding: 10px 8px;
  border-radius: var(--r-sm);
  text-align: center;
  border: 1px solid var(--border);
}
.stat-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}
.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.stat-whale { color: var(--whale); }
.stat-active { color: var(--accent); }

/* ============================================
   CHAT AREA
   ============================================ */
.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  background-image:
    radial-gradient(circle at 25% 15%, rgba(0, 231, 1, 0.025) 0%, transparent 50%),
    radial-gradient(circle at 75% 85%, rgba(79, 195, 247, 0.02) 0%, transparent 50%);
  min-width: 0;
}

.empty-state {
  margin: auto;
  text-align: center;
  color: var(--text-3);
  padding: 40px;
}

.empty-icon {
  margin-bottom: 16px;
  opacity: 0.3;
  display: flex;
  justify-content: center;
}
.empty-icon .ic { width: 64px; height: 64px; }

.empty-state h2 {
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.empty-state p {
  font-size: 14px;
  color: var(--text-3);
}

.chat-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-header .avatar { width: 40px; height: 40px; font-size: 15px; }

.chat-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-header-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
}

.chat-header-meta {
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chat-header-meta .dot { color: var(--text-4); }

.chat-header-actions { display: flex; gap: 8px; }

.toggle-whale {
  background: var(--bg-3);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  border: 1px solid var(--border);
  transition: all var(--t-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.toggle-whale .ic { width: 13px; height: 13px; }
.toggle-whale:hover { background: var(--bg-hover); color: var(--text); }
.toggle-whale.is-whale {
  background: rgba(79, 195, 247, 0.15);
  border-color: var(--whale);
  color: var(--whale);
}

.qual-info {
  padding: 12px 20px;
  background: linear-gradient(180deg, var(--bg-1) 0%, transparent 100%);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stuck-banner {
  padding: 10px 20px;
  background: rgba(255, 165, 2, 0.10);
  border-bottom: 1px solid rgba(255, 165, 2, 0.25);
  color: var(--warning);
  font-size: 12.5px;
  font-weight: 500;
}
.stuck-banner b { color: var(--text); }
.stuck-banner.stuck-blocked {
  background: rgba(255, 71, 87, 0.10);
  border-bottom-color: rgba(255, 71, 87, 0.30);
  color: var(--danger);
}

.qual-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-2);
}
.qual-pill .ic { width: 13px; height: 13px; color: var(--accent); }
.qual-pill .qval { color: var(--text); font-weight: 500; }

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}

.msg {
  max-width: 75%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  position: relative;
  /* Animation removed — was triggering for every message on every 4-second
     poll re-render, causing visible flicker and wasted CPU on mobile. */
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg-in {
  align-self: flex-start;
  background: var(--bg-2);
  border-bottom-left-radius: 4px;
  color: var(--text);
}

.msg-out {
  align-self: flex-end;
  background: var(--accent);
  color: #000;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}

.msg-time {
  display: block;
  font-size: 10px;
  margin-top: 3px;
  opacity: 0.6;
  font-weight: 500;
}

.msg-with-media {
  padding: 4px;
  background: var(--bg-3);
  max-width: 320px;
}

.msg-with-media .msg-time {
  padding: 0 8px 4px;
}

.msg-media {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 10px;
  cursor: pointer;
  transition: transform var(--t-fast);
}
.msg-media:hover { transform: scale(1.02); }

.media-cap {
  padding: 6px 10px 2px;
  font-size: 13.5px;
  color: var(--text);
}

.media-ttl {
  padding: 4px 10px;
  font-size: 10.5px;
  color: var(--warning);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.media-expired {
  font-style: italic;
  color: var(--text-3);
  font-size: 13px;
}

.msg + .msg.same-dir { margin-top: -2px; }

.composer {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-1);
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.composer textarea {
  flex: 1;
  background: var(--bg-0);
  border: 1px solid var(--border);
  padding: 11px 14px;
  border-radius: var(--r-md);
  color: var(--text);
  resize: none;
  min-height: 42px;
  max-height: 140px;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color var(--t-fast);
  font-family: inherit;
}

.composer-attach {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  font-size: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  cursor: pointer;
}
.composer-attach:hover {
  background: var(--bg-3);
  border-color: var(--accent);
  color: var(--accent);
}
.composer-attach:disabled { opacity: 0.5; cursor: not-allowed; }
.composer textarea::placeholder { color: var(--text-4); }
.composer textarea:focus { border-color: var(--accent); }

.composer button {
  background: var(--accent);
  color: #000;
  font-weight: 600;
  padding: 0 18px;
  border-radius: var(--r-md);
  height: 42px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t-fast);
  font-size: 14px;
  /* Eliminate iOS/Android 300ms tap delay so send feels instant. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.composer button .ic { width: 16px; height: 16px; }
.composer button:hover { background: var(--accent-2); }
.composer button:disabled { opacity: 0.5; cursor: not-allowed; }
.composer-attach {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================
   MODAL
   ============================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.hidden { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  width: 100%;
  max-width: 500px;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.2s var(--t-fast);
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.modal-card h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.modal-sub {
  color: var(--text-3);
  font-size: 13px;
  margin-bottom: 14px;
}

.icon-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--text-3);
  transition: all var(--t-fast);
}
.icon-btn:hover { background: var(--bg-3); color: var(--text); }

.modal-card textarea {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: var(--r-sm);
  color: var(--text);
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  min-height: 100px;
}
.modal-card textarea:focus { border-color: var(--accent); }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.btn {
  padding: 9px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--t-fast);
}
.btn-primary { background: var(--accent); color: #000; }
.btn-primary:hover { background: var(--accent-2); }
.btn.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.btn.btn-ghost:hover { background: var(--bg-3); color: var(--text); }

/* ============================================
   TOAST
   ============================================ */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-3);
  color: var(--text);
  padding: 12px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 500;
  z-index: 1000;
  opacity: 0;
  transition: all var(--t-base);
  pointer-events: none;
  box-shadow: var(--shadow-md);
  max-width: 90vw;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast-success { border-color: var(--accent); color: var(--accent); }
.toast-error { border-color: var(--danger); color: var(--danger); }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-hover); }

/* ============================================
   MOBILE — slide-in views
   ============================================ */
.hide-mobile { display: inline; }

@media (max-width: 768px) {
  .hide-mobile { display: none; }

  .topbar { padding: 0 12px; }
  .brand-name { font-size: 12px; }
  .brand-sub { font-size: 10px; }

  .layout {
    position: relative;
    overflow: hidden;
  }

  /* Mobile: sidebar and chat are stacked panels in the same area.
     Default state: sidebar visible, chat hidden.
     show-chat state: chat visible, sidebar hidden.
     Use `display` toggle (no transitions) — slide animations were getting
     stuck mid-transition in some browsers. */
  .sidebar {
    width: 100%;
    min-width: 0;
    position: absolute;
    inset: 0;
    z-index: 5;
  }

  .chat {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: var(--bg-0);
    display: none;
  }

  .app.show-chat .sidebar { display: none; }
  .app.show-chat .chat { display: flex; }
  .app.show-chat .back-btn { display: flex; }
  .app.show-chat .brand,
  .app.show-chat .topbar-actions { display: none; }
  /* NOTE: a `.topbar::after` overlay used to be here. It was absolute-positioned
     with inset:0 on a static parent, so it expanded to cover the WHOLE viewport
     (z-index 30 from .topbar), blocking every tap on mobile — composer, send,
     user list, AI Manager, everything. Removed. */

  .filter-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-row::-webkit-scrollbar { display: none; }

  .stats-bar { padding: 10px; gap: 6px; }
  .stat { padding: 8px 4px; }
  .stat-value { font-size: 18px; }

  .chat-header { padding: 10px 14px; gap: 10px; }
  .chat-header .avatar { width: 36px; height: 36px; font-size: 14px; }
  .chat-header-name { font-size: 14px; }
  .chat-header-meta { font-size: 11px; }
  .chat-header-actions .toggle-whale { padding: 6px 10px; font-size: 11px; }

  .qual-info { padding: 10px 14px; gap: 6px; }
  .qual-pill { font-size: 10.5px; padding: 3px 8px; }

  .messages { padding: 14px; }
  .msg { max-width: 88%; font-size: 14px; }

  .composer { padding: 10px 12px; gap: 8px; }
  /* 16px+ font on inputs prevents iOS Safari from auto-zooming on focus. */
  .composer textarea {
    font-size: 16px;
    min-height: 44px;
  }
  .composer button {
    padding: 0 16px;
    height: 44px;
    min-width: 56px;
  }
  .composer-attach {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 20px;
  }

  .back-btn {
    width: 40px;
    height: 40px;
  }

  /* Sidebar: switch from flex column (which was shrinking pinned cards
     to fit) to plain block flow with natural overflow scroll. The
     pinned cards keep their full height and the entire sidebar scrolls
     as one. */
  .sidebar {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .user-list {
    overflow-y: visible;
  }

  /* Pinned cards on mobile — same comfortable size as desktop */
  .ai-pinned {
    padding: 14px 16px;
    margin: 8px 12px;
    gap: 12px;
  }
  .ai-pinned-mark {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .ai-pinned-name { font-size: 14px; }
  .ai-pinned-sub  { font-size: 12px; }

  /* AI input send button — bump to a comfortable 40px tap target */
  #ai-send {
    width: 40px !important;
    height: 40px !important;
  }

  /* Filter chip row gets a soft right-edge fade hint that more chips
     are scrollable to the right */
  .filter-row {
    position: relative;
    padding-right: 24px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }

  .modal-card { padding: 18px; }
}