/* ══════════════════════════════════════════════════════════════
   HUDDIES — brand design system v3
   Teal + cream + ink. Rounded, warm, confident.
   Rules: Fredoka = brand display only. Poppins = UI. Inter = data.
   One elevation for floating things; hairlines everywhere else.
   No emoji in chrome — stroke icons only.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --teal: #15B5B0;
  --teal-deep: #0E918C;
  --teal-ink: #0A6E6A;
  --teal-wash: #E4F4F3;
  --cream: #FBE698;
  --cream-wash: #FCF4D9;
  --cream-ink: #8A6D0E;
  --ink: #1C2426;
  --ink-soft: #3A4548;

  /* Neutrals (warm) */
  --bg: #F6F5EF;
  --surface: #FFFFFF;
  --text: #22292C;
  --muted: #6A7472;
  --faint: #9AA29E;
  --hairline: rgba(28, 36, 38, 0.09);
  --hairline-strong: rgba(28, 36, 38, 0.16);
  --coral: #E4573D;
  --coral-wash: #FBEAE5;

  /* Type */
  --f-brand: 'Fredoka', sans-serif;         /* wordmark ONLY */
  --f-display: 'Plus Jakarta Sans', sans-serif;
  --f-body: 'Inter', sans-serif;
  --f-data: 'Inter', sans-serif;

  /* Shape & depth */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 99px;
  --lift: 0 8px 28px rgba(28, 36, 38, 0.13);
  --lift-soft: 0 2px 10px rgba(28, 36, 38, 0.06);

  --t-fast: 150ms cubic-bezier(.4,0,.2,1);
  --t-base: 240ms cubic-bezier(.4,0,.2,1);

  --sidebar-w: 300px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-height: 100dvh;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal-deep); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input, textarea, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--cream); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Boot ── */
.boot-spinner { display: flex; align-items: center; justify-content: center; min-height: 100dvh; background: var(--teal); }
.spinner {
  width: 32px; height: 32px;
  border: 3.5px solid rgba(255,255,255,0.35);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.fade-in { animation: fadeIn 0.3s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════════════════════════════════════
   LANDING / AUTH — brand-teal stage
   ══════════════════════════════════════════════════════════════ */
.auth-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 44px 24px;
  background: radial-gradient(130% 90% at 50% -10%, #1DC4BE 0%, var(--teal) 48%, var(--teal-deep) 100%);
}
.landing-pitch { width: 100%; max-width: 400px; text-align: center; }
.landing-mark {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
}
.auth-logo {
  font-family: var(--f-brand);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--cream);
  text-shadow: 0 3px 0 rgba(0,0,0,0.14);
}
.landing-tagline {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.3px;
  font-size: 1.25rem;
  color: #FFFFFF;
  margin-top: 2px;
}
.landing-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.65;
  margin-top: 12px;
}

/* Offer card */
.offer-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  box-shadow: var(--lift);
}
.offer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.offer-price { font-family: var(--f-display); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.offer-price s {
  font-size: 0.95rem;
  color: var(--faint);
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
}
.offer-price strong { font-size: 1.45rem; font-weight: 700; color: var(--teal-deep); }
.offer-hook {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 8px;
}
.offer-hook svg { width: 17px; height: 17px; color: var(--teal); flex-shrink: 0; }
.offer-fine {
  font-family: var(--f-data);
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--hairline);
}
.price-tag {
  font-family: var(--f-data);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cream-ink);
  background: var(--cream-wash);
  border: 1px solid var(--cream);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  box-shadow: var(--lift);
}
.auth-card .auth-logo { color: var(--teal); text-shadow: none; font-size: 1.6rem; text-align: center; }
.auth-card .auth-tagline { color: var(--muted); text-align: center; font-size: 0.82rem; margin-bottom: 18px; }
.auth-title { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); margin-bottom: 3px; }
.auth-sub { font-size: 0.8rem; color: var(--muted); margin-bottom: 16px; }
.code-input {
  text-align: center;
  font-family: var(--f-data);
  font-size: 1.5rem !important;
  font-weight: 700;
  letter-spacing: 10px;
  padding: 13px 8px 13px 18px;
}
.auth-alt { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ── Forms ── */
.form-group { margin-bottom: 15px; }
.form-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.form-label .opt { color: var(--faint); font-weight: 400; font-size: 0.7rem; }
.form-input, .form-textarea, .form-select {
  width: 100%;
  font-family: var(--f-body);
  font-size: 1rem;
  background: var(--surface);
  border: 1.5px solid var(--hairline-strong);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 12px 15px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-wash);
  outline: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--faint); }
.form-input:disabled { background: var(--bg); color: var(--muted); }
.form-textarea { min-height: 108px; resize: vertical; line-height: 1.5; }
.form-hint { font-family: var(--f-data); font-size: 0.7rem; color: var(--muted); margin-top: 5px; }
.form-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230E918C' stroke-width='2.4'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover:not(:disabled) { box-shadow: var(--lift); }
.btn--primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--secondary { background: var(--surface); color: var(--teal-ink); border: 1.5px solid var(--teal); }
.btn--secondary:hover { background: var(--teal-wash); }
.btn--ghost { color: var(--muted); padding: 8px 14px; font-size: 0.82rem; font-weight: 500; }
.btn--ghost:hover { color: var(--ink); }
.btn--full { width: 100%; }
.btn--sm { padding: 9px 18px; font-size: 0.82rem; }

/* ── Notices ── */
.notice {
  display: block;
  padding: 11px 15px;
  border-radius: var(--r-md);
  font-size: 0.8rem;
  line-height: 1.55;
  margin-bottom: 14px;
}
.notice--success { background: var(--teal-wash); color: var(--teal-ink); }
.notice--error { background: var(--coral-wash); color: var(--coral); }
.notice--info { background: var(--cream-wash); color: var(--cream-ink); }

/* ══════════════════════════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════════════════════════ */
.shell { display: flex; min-height: 100dvh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  position: sticky;
  top: 0;
}
.sidebar-header { padding: 20px 18px 12px; }
.sidebar-logo {
  font-family: var(--f-brand);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  gap: 9px;
}
.logo-mark { width: 26px; height: 26px; }
.sidebar-newtask { padding: 4px 18px 14px; }
.sidebar-tasks { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.sidebar-section-label {
  font-family: var(--f-data);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--faint);
  padding: 8px 10px 6px;
}
.task-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--r-md);
  transition: background var(--t-fast);
  display: block;
  margin-bottom: 2px;
}
.task-item:hover { background: var(--bg); }
.task-item.active { background: var(--cream-wash); }
.task-item-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
}
.task-item-meta { display: flex; align-items: center; gap: 8px; }
.task-item-date { font-family: var(--f-data); font-size: 0.65rem; color: var(--faint); margin-left: auto; }
.sidebar-empty { padding: 16px 12px; font-size: 0.78rem; color: var(--muted); line-height: 1.6; }
.sidebar-footer { border-top: 1px solid var(--hairline); padding: 12px 14px; }
.profile-chip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  transition: background var(--t-fast);
  text-align: left;
}
.profile-chip:hover { background: var(--bg); }
.profile-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--teal);
  color: #FFFFFF;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-name { font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--text); }
.profile-loc {
  font-family: var(--f-data);
  font-size: 0.67rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.profile-loc svg { width: 11px; height: 11px; }

/* ── Status badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-data);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3.5px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge--reviewing     { background: var(--cream-wash); color: var(--cream-ink); }
.badge--needs_info    { background: var(--coral-wash); color: var(--coral); }
.badge--estimate_sent { background: var(--teal-wash); color: var(--teal-ink); }
.badge--in_progress   { background: var(--teal); color: #FFFFFF; }
.badge--in_progress::before { background: var(--cream); }
.badge--done          { background: var(--ink); color: var(--cream); }
.badge--cancelled     { background: rgba(28,36,38,0.07); color: var(--faint); }

/* ── Main column ── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100dvh; }
.main-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--teal);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-logo {
  font-family: var(--f-brand);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--cream);
}
.hamburger { padding: 14px 12px; margin: -6px 0; display: flex; flex-direction: column; gap: 4.5px; justify-content: center; min-height: 44px; }
.hamburger span { width: 20px; height: 2.2px; background: rgba(255,255,255,0.95); border-radius: 2px; }
.topbar-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar-avatar:active { transform: scale(0.94); }

.main-scroll { flex: 1; overflow-y: auto; padding: 28px 24px 20px; }
.main-inner { max-width: 640px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.main-inner > :only-child { flex: 1; }

/* ── Home ── */
.home-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
}
.home-eyebrow {
  font-family: var(--f-data);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}
.home-question {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.4px;
  margin-bottom: 28px;
  max-width: 400px;
}
.greeting { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; color: var(--ink); letter-spacing: -0.4px; }
.greeting-sub { font-size: 0.85rem; color: var(--muted); }

.chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 200px));
  gap: 10px;
  justify-content: center;
}
.chip-card {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 13px 14px;
  text-align: left;
  box-shadow: var(--lift-soft);
  transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
  min-height: 62px;
}
.chip-card:hover { border-color: var(--teal); }
.chip-card:active { transform: scale(0.97); }
.chip-card.selected { background: var(--ink); border-color: var(--ink); }
.chip-card-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--teal-wash);
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chip-card-icon svg { width: 19px; height: 19px; }
.chip-card.selected .chip-card-icon { background: rgba(251,230,152,0.16); color: var(--cream); }
.chip-card-label { font-size: 0.8rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.chip-card.selected .chip-card-label { color: var(--cream); }

/* ── Docked composer ── */
.dock-zone {
  flex-shrink: 0;
  padding: 6px 16px calc(10px + env(safe-area-inset-bottom));
}
.dock-zone > * { max-width: 640px; margin-left: auto; margin-right: auto; }
.dock-zone .needs-hint { margin-bottom: 8px; }
.dock-zone .notice { margin-bottom: 8px; padding: 9px 14px; }
.dock-composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  padding: 7px;
  box-shadow: var(--lift);
  transition: border-color var(--t-fast);
}
.dock-composer:focus-within { border-color: var(--teal); }
.dock-composer textarea {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text);
  padding: 9px 4px;
  max-height: 140px;
  min-height: 24px;
}
.dock-composer textarea:focus-visible { outline: none; }
.dock-composer textarea::placeholder { color: var(--faint); }
.dock-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.dock-icon svg { width: 20px; height: 20px; }
.dock-icon:hover { background: var(--bg); color: var(--teal-deep); }
.dock-icon:active { transform: scale(0.92); }
.dock-send {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(28,36,38,0.1);
  color: var(--faint);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base), color var(--t-base), transform var(--t-fast);
}
.dock-send svg { width: 18px; height: 18px; }
.dock-send.ready { background: var(--teal); color: #FFFFFF; }
.dock-send.ready:hover { background: var(--teal-deep); }
.dock-send:active { transform: scale(0.92); }
.dock-send:disabled { opacity: 0.6; cursor: wait; }
.dock-footrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 14px 0;
  min-height: 17px;
}
.dock-footnote { font-family: var(--f-data); font-size: 0.65rem; color: var(--faint); margin-left: auto; }
.dock-attach-name { font-family: var(--f-data); font-size: 0.65rem; color: var(--teal-deep); cursor: pointer; }

.needs-hint {
  font-family: var(--f-data);
  font-size: 0.72rem;
  color: var(--cream-ink);
  line-height: 1.55;
  background: var(--cream-wash);
  border: 1px solid var(--cream);
  border-radius: var(--r-md);
  padding: 8px 13px;
}
.needs-hint strong { color: var(--ink); font-weight: 600; }

/* ── Chat thread (task detail) ── */
.chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--muted);
  width: 36px; height: 36px;
  border-radius: 50%;
  transition: background var(--t-fast), color var(--t-fast);
}
.back-link:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.chat-head-mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-head-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
}
.chat-head-cat { color: var(--teal-deep); display: inline-flex; }
.chat-head-cat svg { width: 16px; height: 16px; }

.chat { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.msg {
  max-width: 85%;
  border-radius: var(--r-lg);
  padding: 11px 14px 7px;
  font-size: 0.85rem;
  line-height: 1.55;
}
.msg--user { align-self: flex-end; background: var(--cream-wash); border: 1px solid var(--cream); border-bottom-right-radius: 6px; }
.msg--huddies { align-self: flex-start; background: var(--surface); border: 1px solid var(--hairline); border-bottom-left-radius: 6px; }
.msg-text { color: var(--text); white-space: pre-wrap; overflow-wrap: break-word; }
.msg-time { font-family: var(--f-data); font-size: 0.61rem; color: var(--faint); margin-top: 5px; }
.msg-photo { margin-top: 8px; border-radius: var(--r-md); max-height: 280px; object-fit: cover; }
.msg-status { align-self: center; padding: 3px 0; }

/* ── Account: vertical accordion ── */
.account-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.acc-list { display: grid; gap: 8px; }
.acc-item {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.acc-item.open { box-shadow: var(--lift-soft); border-color: var(--hairline-strong); }
.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-align: left;
  min-height: 54px;
  transition: background var(--t-fast);
}
.acc-head:hover { background: var(--bg); }
.acc-head:active { background: var(--teal-wash); }
.acc-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--teal-wash);
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.acc-icon svg { width: 18px; height: 18px; }
.acc-label { flex: 1; font-weight: 600; font-size: 0.88rem; color: var(--ink); }
.acc-chevron { font-size: 1.25rem; color: var(--faint); line-height: 1; transition: transform var(--t-fast), color var(--t-fast); }
.acc-item.open .acc-chevron { transform: rotate(90deg); color: var(--teal); }
.acc-body { padding: 14px 18px 18px; border-top: 1px solid var(--hairline); }

.member-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pricing-headline { font-family: var(--f-display); display: flex; align-items: baseline; gap: 8px; }
.price-struck { font-size: 0.95rem; color: var(--faint); text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.price-free { font-weight: 700; color: var(--teal-deep); }
.member-sub { font-size: 0.78rem; color: var(--muted); line-height: 1.6; }
.member-divider { height: 1px; background: var(--hairline); margin: 15px 0; }
.free-tracker { margin-top: 13px; }
.free-tracker-label {
  font-family: var(--f-data);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--faint);
  margin-bottom: 8px;
}
.free-tracker-dots { display: flex; align-items: center; gap: 8px; }
.free-dot {
  width: 27px; height: 27px;
  border-radius: 50%;
  border: 2px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #FFFFFF;
}
.free-dot.used { background: var(--teal); border-color: var(--teal); }
.free-tracker-count { font-family: var(--f-data); font-size: 0.7rem; color: var(--muted); margin-left: 4px; }

/* About content */
.about-text { font-size: 0.8rem; color: var(--muted); line-height: 1.7; }
.about-text strong { color: var(--text); }
.about-text s { text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.about-steps { list-style: none; counter-reset: step; display: grid; gap: 12px; }
.about-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 36px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
}
.about-steps li strong { color: var(--text); }
.about-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 1px;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: var(--teal);
  color: #FFFFFF;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-cats { display: grid; gap: 13px; }
.about-cat { display: flex; gap: 11px; align-items: flex-start; }
.about-cat-icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--teal-wash);
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-cat-icon svg { width: 16px; height: 16px; }
.about-cat-name { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.about-cat-desc { font-family: var(--f-data); font-size: 0.7rem; color: var(--muted); line-height: 1.5; }

/* Support */
.support-block {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}
.support-title { font-weight: 600; font-size: 0.9rem; color: var(--ink); margin-bottom: 2px; }
.support-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.6; margin-bottom: 11px; }
.support-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.support-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--hairline-strong);
  color: var(--text);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.support-btn svg { width: 15px; height: 15px; color: var(--teal-deep); }
.support-btn:hover { border-color: var(--teal); color: var(--teal-ink); background: var(--teal-wash); text-decoration: none; }

/* Menu footer (sign out) */
.menu-footer { display: flex; justify-content: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); }

/* ══════════════════════════════════════════════════════════════
   RIGHT-TO-LEFT (Arabic, Urdu)
   Logical properties handle most of it; these are the exceptions
   where the layout is directional by design.
   ══════════════════════════════════════════════════════════════ */
[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid var(--hairline); }
[dir="rtl"] .task-item, [dir="rtl"] .rail-item,
[dir="rtl"] .profile-chip, [dir="rtl"] .acc-head,
[dir="rtl"] .await-banner, [dir="rtl"] .task-card { text-align: right; }
[dir="rtl"] .back-link, [dir="rtl"] .acc-chevron, [dir="rtl"] .await-go { transform: scaleX(-1); }
[dir="rtl"] .acc-item.open .acc-chevron { transform: scaleX(-1) rotate(-90deg); }
[dir="rtl"] .timeline { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .msg--user { align-self: flex-start; border-bottom-right-radius: var(--r-lg); border-bottom-left-radius: 6px; }
[dir="rtl"] .msg--huddies { align-self: flex-end; border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: 6px; }
[dir="rtl"] .dock-footnote { margin-left: 0; margin-right: auto; }
[dir="rtl"] .task-item-date, [dir="rtl"] .task-card-date { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ops-topbar-actions { margin-left: 0; margin-right: auto; }
[dir="rtl"] .side-facts > div { grid-template-columns: 88px 1fr; }
[dir="rtl"] .toggle-row input:checked ~ .toggle-track .toggle-knob { transform: translateX(-18px); }
[dir="rtl"] .about-steps li { padding-left: 0; padding-right: 36px; }
[dir="rtl"] .about-steps li::before { left: auto; right: 0; }
[dir="rtl"] .pricing-lines li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .pricing-lines li::before { left: auto; right: 0; }
[dir="rtl"] .rail-search svg { left: auto; right: 12px; }
[dir="rtl"] .rail-search input { padding: 9px 34px 9px 12px; }
[dir="rtl"] .form-select { background-position: left 14px center; }

/* ── Language pickers ── */
.lang-switch {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.16);
  border-radius: var(--r-pill);
  padding: 4px;
}
.lang-switch button {
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  transition: all var(--t-fast);
  min-height: 36px;
}
.lang-switch button.on { background: var(--surface); color: var(--teal-ink); }

.lang-list { display: grid; gap: 6px; }
.lang-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--hairline);
  text-align: start;
  transition: all var(--t-fast);
  min-height: 50px;
}
.lang-row:hover { border-color: var(--teal); }
.lang-row.on { border-color: var(--teal); background: var(--teal-wash); }
.lang-native { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.lang-label { font-family: var(--f-data); font-size: 0.73rem; color: var(--muted); }
.lang-check { margin-inline-start: auto; color: var(--teal-deep); font-weight: 700; }

/* ── Awaiting-reply signals ── */
.await-banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--cream-wash);
  border: 1.5px solid var(--cream);
  border-radius: var(--r-lg);
  padding: 13px 16px;
  margin-bottom: 18px;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.await-banner:hover { box-shadow: var(--lift-soft); }
.await-banner:active { transform: scale(0.99); }
.await-banner > svg { width: 20px; height: 20px; color: var(--cream-ink); flex-shrink: 0; }
.await-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.await-copy strong { font-size: 0.84rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.await-copy em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--cream-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.await-go { font-size: 1.15rem; color: var(--cream-ink); flex-shrink: 0; margin-left: 4px; }

.await-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--cream-wash);
  border: 1.5px solid var(--cream);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--cream-ink);
  line-height: 1.5;
  margin-bottom: 14px;
}
.await-strip svg { width: 17px; height: 17px; flex-shrink: 0; }
.await-strip--ops { background: var(--coral-wash); border-color: rgba(228,87,61,0.3); color: var(--coral); }

.reply-pip, .wait-pip {
  font-family: var(--f-data);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  background: var(--cream);
  color: var(--ink);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.wait-pip { background: var(--coral-wash); color: var(--coral); }
.label-alert { color: var(--cream-ink); }
.rail-pip--wait { background: var(--coral); letter-spacing: 1px; }

/* ── Checkboxes & toggles ── */
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.check-row input { width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; }

.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--hairline);
}
.toggle-row:last-of-type { border-bottom: none; }
.toggle-row > span:first-child { flex: 1; min-width: 0; display: grid; gap: 2px; }
.toggle-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.toggle-sub {
  font-family: var(--f-data);
  font-size: 0.71rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track {
  width: 44px; height: 26px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--hairline-strong);
  padding: 3px;
  transition: background var(--t-base);
}
.toggle-knob {
  display: block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--lift-soft);
  transition: transform var(--t-base);
}
.toggle-row input:checked ~ .toggle-track { background: var(--teal); }
.toggle-row input:checked ~ .toggle-track .toggle-knob { transform: translateX(18px); }
.toggle-row input:focus-visible ~ .toggle-track { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════
   OPS — view switcher, table view, note tools
   ══════════════════════════════════════════════════════════════ */
.view-switch { display: flex; gap: 3px; background: var(--bg); border-radius: var(--r-pill); padding: 3px; }
.view-switch button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 15px;
  border-radius: var(--r-pill);
  transition: all var(--t-fast);
}
.view-switch button svg { width: 16px; height: 16px; }
.view-switch button.on { background: var(--surface); color: var(--ink); box-shadow: var(--lift-soft); }

.ops-table-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 14px 18px 18px; }
.table-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.table-controls .rail-search { flex: 1; min-width: 200px; max-width: 340px; }
.table-filter { width: auto; min-width: 150px; padding: 9px 34px 9px 13px; font-size: 0.82rem; }
.table-count { font-family: var(--f-data); font-size: 0.76rem; color: var(--muted); margin-inline-start: auto; }
.table-scroll {
  flex: 1;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  min-height: 0;
}
.ops-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ops-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  text-align: start;
  font-family: var(--f-data);
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--faint);
  padding: 11px 12px;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.ops-table td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--text); }
.ops-table tbody tr:hover { background: var(--bg); }
.ops-table tr.row-late { background: var(--coral-wash); }
.ops-table tr.row-late:hover { background: #F8DFD8; }
.ops-table .mono { font-family: var(--f-data); font-size: 0.73rem; color: var(--muted); white-space: nowrap; }
.ops-table .age-old { color: var(--coral); font-weight: 700; }
.ops-table td strong { font-weight: 600; }
.cell-desc {
  max-width: 340px;
  min-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.table-empty { text-align: center; padding: 36px 12px; color: var(--muted); }
.need-by-input {
  font-family: var(--f-data);
  font-size: 0.74rem;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  width: 132px;
}
.need-by-input:focus { border-color: var(--teal); }
.ops-btn--icon { padding: 6px 11px; }
.ops-btn--on { background: var(--teal); border-color: var(--teal); color: #fff; }
.ops-btn--on:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }

.note-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.note-tools { margin-inline-start: auto; display: flex; gap: 2px; }
.note-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  transition: all var(--t-fast);
}
.note-icon svg { width: 14px; height: 14px; }
.note-icon:hover { background: var(--surface); color: var(--teal-deep); }
.note-icon--danger:hover { color: var(--coral); }
.note--editing { background: var(--surface); border: 1.5px solid var(--teal); }
.note-actions { display: flex; gap: 7px; margin-top: 8px; }

.lang-flag { font-size: 1.15rem; line-height: 1; }

/* ── Avatars (photo variant) ── */
.has-photo { object-fit: cover; background: var(--bg); }
img.profile-avatar { width: 36px; height: 36px; border-radius: 50%; }
img.rail-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
img.side-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }
.topbar-avatar-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.95rem;
}
img.topbar-avatar-inner { object-fit: cover; }
.avatar-editor {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.avatar-lg {
  width: 62px; height: 62px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--teal);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
img.avatar-lg { object-fit: cover; }

/* Live-activity pill in the ops console */
.live-pill { display: flex !important; align-items: center; gap: 12px; }
.live-pill .ops-btn { margin-left: auto; }

/* ── Empty state / misc ── */
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 0.85rem; line-height: 1.7; }
.empty-state-emoji { font-size: 1.8rem; margin-bottom: 8px; }
.config-warning {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  z-index: 200;
  background: #FFF6F3;
  border: 1.5px solid var(--coral);
  color: var(--coral);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-family: var(--f-data);
  font-size: 0.74rem;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: var(--lift);
}

/* ══════════════════════════════════════════════════════════════
   OPS CONSOLE — three panes: rail · thread · user + notes
   ══════════════════════════════════════════════════════════════ */
.ops-shell { display: flex; flex-direction: column; height: 100dvh; background: var(--bg); }

.ops-topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.ops-brand {
  font-family: var(--f-brand);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.ops-brand span { color: var(--faint); }
.ops-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ops-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  padding: 8px 13px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--hairline-strong);
  background: var(--surface);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  cursor: pointer;
}
.ops-btn svg { width: 15px; height: 15px; }
.ops-btn:hover { border-color: var(--teal); color: var(--teal-ink); background: var(--teal-wash); text-decoration: none; }

#ops-toast:empty { display: none; }
.ops-toast-msg { margin: 8px 18px 0; }

.ops-body { flex: 1; display: grid; grid-template-columns: 290px minmax(0, 1fr) 320px; min-height: 0; }

/* Left rail */
.ops-rail { border-right: 1px solid var(--hairline); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.rail-controls { padding: 12px; display: grid; gap: 9px; border-bottom: 1px solid var(--hairline); }
.rail-toggle { display: flex; background: var(--bg); border-radius: var(--r-pill); padding: 3px; }
.rail-toggle button {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: var(--r-pill);
  color: var(--muted);
  transition: all var(--t-fast);
}
.rail-toggle button.on { background: var(--surface); color: var(--ink); box-shadow: var(--lift-soft); }
.rail-search { position: relative; display: flex; align-items: center; }
.rail-search svg { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--faint); pointer-events: none; }
.rail-search input {
  width: 100%;
  font-family: var(--f-body);
  font-size: 0.85rem;
  padding: 9px 12px 9px 34px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.rail-search input:focus { border-color: var(--teal); }
.rail-filter { padding: 8px 34px 8px 12px; font-size: 0.8rem; }
.rail-list { flex: 1; overflow-y: auto; padding: 8px; }
.rail-empty { padding: 20px 12px; font-size: 0.8rem; color: var(--muted); text-align: center; }
.rail-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 11px;
  border-radius: var(--r-md);
  text-align: left;
  transition: background var(--t-fast);
  margin-bottom: 2px;
  border: 1.5px solid transparent;
}
.rail-item:hover { background: var(--bg); }
.rail-item.on { background: var(--teal-wash); border-color: rgba(21,181,176,0.35); }
.rail-avatar {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-item-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.rail-item-top { display: flex; align-items: center; gap: 8px; }
.rail-item-name {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.rail-item-sub { font-family: var(--f-data); font-size: 0.7rem; color: var(--muted); }
.rail-item-badge { margin-top: 2px; }
.rail-pip {
  font-family: var(--f-data);
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--teal);
  color: #fff;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Middle */
.ops-main { overflow-y: auto; padding: 18px 20px 24px; display: flex; flex-direction: column; min-height: 0; }
.ops-placeholder {
  margin: auto;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.7;
  padding: 30px 20px;
}
.ops-placeholder-title { font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: 4px; }
.main-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.main-title { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); letter-spacing: -0.2px; }
.main-sub { font-family: var(--f-data); font-size: 0.73rem; color: var(--muted); margin-top: 3px; }

.task-card {
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 13px 15px;
  margin-bottom: 9px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.task-card:hover { border-color: var(--teal); }
.task-card:active { transform: scale(0.995); }
.task-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.task-card-date { font-family: var(--f-data); font-size: 0.7rem; color: var(--faint); margin-left: auto; }
.task-card-desc { font-size: 0.83rem; color: var(--text); line-height: 1.55; }

.thread { flex: 1; display: flex; flex-direction: column; gap: 9px; padding-bottom: 14px; }

/* Reply box */
.reply-box {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: var(--lift);
  display: grid;
  gap: 9px;
}
.reply-row { display: flex; gap: 9px; align-items: flex-start; flex-wrap: wrap; }
.reply-row .form-select { width: auto; min-width: 140px; padding: 8px 34px 8px 12px; font-size: 0.8rem; }
.reply-quick { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.quick-chip {
  font-family: var(--f-data);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  transition: all var(--t-fast);
}
.quick-chip:hover { border-color: var(--teal); color: var(--teal-ink); background: var(--teal-wash); }
.reply-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reply-send-group { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.reply-box .notice { margin-bottom: 0; }

/* Right side */
.ops-side {
  border-left: 1px solid var(--hairline);
  background: var(--surface);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.side-empty { font-size: 0.82rem; }
.side-top { padding: 16px; border-bottom: 1px solid var(--hairline); }
.side-user { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.side-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.side-name { font-family: var(--f-display); font-weight: 700; font-size: 0.98rem; color: var(--ink); }
.side-loc { display: flex; align-items: center; gap: 4px; font-family: var(--f-data); font-size: 0.73rem; color: var(--muted); }
.side-loc svg { width: 12px; height: 12px; }
.side-arrow { color: var(--faint); }
.side-actions { display: flex; gap: 7px; margin-bottom: 14px; }
.side-facts { display: grid; gap: 9px; }
.side-facts > div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; align-items: baseline; }
.side-facts dt {
  font-family: var(--f-data);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--faint);
}
.side-facts dd { font-size: 0.78rem; color: var(--text); }
.side-facts dd.wrap { overflow-wrap: anywhere; }

.side-notes { padding: 16px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.side-notes-head {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.side-notes-head span {
  font-family: var(--f-data);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--cream-ink);
  background: var(--cream-wash);
  border: 1px solid var(--cream);
  padding: 3px 8px;
  border-radius: var(--r-pill);
}
.note-list { display: grid; gap: 8px; margin-bottom: 12px; }
.note { background: var(--bg); border-radius: var(--r-md); padding: 10px 12px; }
.note-text { font-size: 0.79rem; color: var(--text); line-height: 1.55; white-space: pre-wrap; }
.note-meta { font-family: var(--f-data); font-size: 0.65rem; color: var(--faint); margin-top: 5px; }
.note-empty { font-size: 0.76rem; color: var(--muted); line-height: 1.6; }
.note-compose { display: grid; gap: 8px; margin-top: auto; }
.note-compose .form-textarea { font-size: 0.82rem; }

/* ══════════════════════════════════════════════════════════════
   MOBILE (≤ 900px)
   ══════════════════════════════════════════════════════════════ */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 36, 38, 0.45);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--t-base);
}
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--t-base);
    box-shadow: var(--lift);
    width: min(var(--sidebar-w), 84vw);
  }
  .shell.drawer-open .sidebar { transform: translateX(0); }
  .shell.drawer-open .drawer-overlay { display: block; opacity: 1; }
  .main-topbar { display: flex; }
  .main-scroll { padding: 20px 16px 12px; }
  .home-question { font-size: 1.45rem; }
  .chip-grid { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .auth-logo { font-size: 2.1rem; }
}

/* iOS zoom guard: inputs must be ≥16px */
@media (max-width: 480px) {
  .form-input, .form-textarea, .dock-composer textarea { font-size: 16px; }
}

/* Ops console responsive */
@media (max-width: 1180px) {
  .ops-body { grid-template-columns: 250px minmax(0, 1fr) 280px; }
}
@media (max-width: 980px) {
  .ops-body { grid-template-columns: 240px minmax(0, 1fr); }
  .ops-side { display: none; }
  .ops-side.show-mobile { display: flex; }
}
@media (max-width: 720px) {
  .ops-body { grid-template-columns: 1fr; }
  .ops-rail { max-height: 38dvh; border-right: none; border-bottom: 1px solid var(--hairline); }
  .dash { padding: 14px; }
  .dash-cols { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════════ */
.dash {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.dash-section {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}
.dash-head {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-head span { font-family: var(--f-body); font-weight: 500; font-size: 0.72rem; color: var(--faint); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dash-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--hairline);
  background: var(--bg);
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dash-stat:hover { border-color: var(--teal); background: var(--teal-wash); }
.dash-stat-value { font-family: var(--f-data); font-weight: 700; font-size: 1.5rem; color: var(--ink); line-height: 1.2; }
.dash-stat-label { font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.dash-stat-sub { font-size: 0.68rem; color: var(--faint); }
.dash-stat--reviewing .dash-stat-value { color: var(--cream-ink); }
.dash-stat--needs_info .dash-stat-value { color: var(--coral); }
.dash-stat--estimate_sent .dash-stat-value { color: var(--teal-ink); }
.dash-stat--in_progress .dash-stat-value { color: var(--teal-deep); }
.dash-stat--alert { border-color: var(--coral); background: var(--coral-wash); }
.dash-stat--alert .dash-stat-value { color: var(--coral); }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dash-bars { display: flex; flex-direction: column; gap: 8px; }
.dash-bar-row { display: grid; grid-template-columns: 120px 1fr 26px; gap: 10px; align-items: center; }
.dash-bar-label { font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.dash-bar-track { height: 8px; border-radius: var(--r-pill); background: var(--bg); overflow: hidden; }
.dash-bar-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--teal); }
.dash-bar-n { font-family: var(--f-data); font-size: 0.74rem; font-weight: 700; color: var(--ink); text-align: right; }
.dash-dest { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; font-size: 0.72rem; color: var(--muted); align-items: center; }
.dash-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
}
.dash-toggle-name { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.dash-toggle-hint { font-size: 0.7rem; color: var(--faint); }
.dash-ai-stats { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 12px; font-size: 0.74rem; color: var(--muted); }
.dash-ai-stats b { color: var(--ink); font-family: var(--f-data); }

/* ── Tags + per-user AI (Support right pane) ── */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--teal-wash);
  color: var(--teal-ink);
  font-size: 0.7rem;
  font-weight: 600;
}
.tag-chip--xs { padding: 1px 7px; font-size: 0.62rem; }
.tag-x { font-size: 0.85rem; line-height: 1; color: var(--teal-ink); opacity: 0.6; padding: 0 1px; }
.tag-x:hover { opacity: 1; color: var(--coral); }
.rail-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.side-admin { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.side-admin-head {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.side-admin-head span { font-family: var(--f-body); font-weight: 500; font-size: 0.64rem; color: var(--faint); margin-left: 6px; }
.tag-editor { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.tag-input {
  border: 1.5px dashed var(--hairline-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 9px;
  width: 76px;
  color: var(--text);
}
.tag-input:focus { outline: none; border-color: var(--teal); border-style: solid; }
.ai-override { display: grid; grid-template-columns: 88px 1fr; gap: 8px; align-items: center; margin-bottom: 7px; }
.ai-override label { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.ai-override .form-select { font-size: 0.74rem; padding: 6px 10px; }
.cell-uid { font-size: 0.68rem; color: var(--faint); }
.mono { font-family: var(--f-data); }

/* ── Dashboard charts ── */
.dash-filter-row { display: flex; align-items: center; gap: 10px; }
.dash-filter-label {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink);
}
.dash-range { width: auto; font-size: 0.78rem; padding: 7px 32px 7px 12px; }
.dash-chart { margin: 2px 0 10px; }
.dash-chart svg { width: 100%; height: auto; display: block; }
.chart-base { stroke: var(--hairline-strong); stroke-width: 1; }
.chart-bar { transition: opacity var(--t-fast); }
.chart-bar:hover { opacity: 0.75; }
.chart-dot:hover { opacity: 0.75; }
.chart-x { font-family: var(--f-data); font-size: 10px; fill: var(--faint); }
.chart-val { font-family: var(--f-data); font-size: 10px; font-weight: 600; fill: var(--ink-soft); }
.chart-legend { display: inline-flex; gap: 12px; font-family: var(--f-body); font-weight: 500; font-size: 0.7rem; color: var(--muted); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend-dot { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.dash-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.dash-mini { display: flex; flex-direction: column; gap: 1px; }
.dash-mini-value { font-family: var(--f-data); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.dash-mini-label { font-size: 0.68rem; font-weight: 600; color: var(--muted); }
.dash-bar-row--wide { grid-template-columns: minmax(150px, 200px) 1fr 64px; }
.fee-input {
  width: 64px;
  font-family: var(--f-data);
  font-size: 0.74rem;
  padding: 5px 6px;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
}
.fee-input:focus { outline: none; border-color: var(--teal); }