/* ══════════════════════════════════════════════════════════════
   HUDDIES — tokens and shared primitives
   Loaded by BOTH the customer app and the ops console.
   Teal + cream + ink. Rounded, warm, confident.

   What belongs here: the design tokens, element/reset styles, and the
   44 classes both surfaces genuinely use — auth, forms, buttons,
   notices, badges, the message/thread primitives, the spinner.
   Nothing that styles only one surface. If a rule here is edited,
   assume it changes both.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   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;

  /* iOS safe areas, read once. Variables rather than scattered env()
     calls so every edge agrees and a notch can be simulated in a test —
     no desktop browser reports one otherwise. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

*, *::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: calc(44px + var(--sat)) calc(24px + var(--sar)) calc(44px + var(--sab)) calc(24px + var(--sal));
  background: radial-gradient(130% 90% at 50% -10%, #1DC4BE 0%, var(--teal) 48%, var(--teal-deep) 100%);
}

.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);
}

.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; }

.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; }

.auth-card .form-textarea { min-height: 76px; }

/* ── 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); }

/* ── 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; }

.chip-card.selected { background: var(--ink); border-color: var(--ink); }

.chip-card.selected .chip-card-icon { background: rgba(251,230,152,0.16); color: var(--cream); }

.chip-card.selected .chip-card-label { color: var(--cream); }

.dock-zone .notice { margin-bottom: 8px; padding: 9px 14px; }

.dock-send.ready { background: var(--teal); color: #FFFFFF; }

.dock-send.ready:hover { background: var(--teal-deep); }

.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 { 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; }

.acc-item.open { box-shadow: var(--lift-soft); border-color: var(--hairline-strong); }

.acc-item.open .acc-chevron { transform: rotate(90deg); color: var(--teal); }

.free-dot.used { background: var(--teal); border-color: var(--teal); }

/* 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; }

[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"] .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"] .task-item-date, [dir="rtl"] .task-card-date { margin-left: 0; margin-right: auto; }

.lang-switch button.on { background: var(--surface); color: var(--teal-ink); }

.lang-switch--mini button.on {
  background: var(--surface);
  color: var(--teal-ink);
  box-shadow: var(--lift-soft);
}

.lang-row.on { border-color: var(--teal); background: var(--teal-wash); }

.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; }

.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;
}

.view-switch button.on { background: var(--surface); color: var(--ink); box-shadow: var(--lift-soft); }

/* ── Avatars (photo variant) ── */
.has-photo { object-fit: cover; background: var(--bg); }

#ops-toast:empty { display: none; }

.rail-toggle button.on { background: var(--surface); color: var(--ink); box-shadow: var(--lift-soft); }

.rail-item.on { background: var(--teal-wash); border-color: rgba(21,181,176,0.35); }

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

.reply-routing .form-select, .reply-routing .form-input { width: 100%; min-width: 0; font-size: 0.8rem; padding-top: 8px; padding-bottom: 8px; }

.reply-box .notice { margin-bottom: 0; }

.side-facts dd.wrap { overflow-wrap: anywhere; }

.note { background: var(--bg); border-radius: var(--r-md); padding: 10px 12px; }

.note-compose .form-textarea { font-size: 0.82rem; }

@media (max-width: 900px) {
  .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; }
}

@media (max-width: 720px) {
  .reply-routing .form-input, .reply-routing .form-select { font-size: 16px; }
}

.wl-invite .form-input { flex: 1; font-size: 0.8rem; padding: 8px 10px; }

.folder-head.open .folder-count { background: var(--teal-wash); color: var(--teal-ink); }

.app-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }