/*
 * ══════════════════════════════════════════════════════════════════════════════
 * TOKEN REFERENCE — agents-ui design system
 * ══════════════════════════════════════════════════════════════════════════════
 *
 * All colors in this stylesheet flow through CSS custom properties.
 * Literal color values (hex, rgba, hsl) are ONLY allowed inside :root and
 * theme override blocks ([data-theme="light/dark"], @media prefers-color-scheme).
 *
 * TOKEN GROUPS (defined in :root below)
 * ──────────────────────────────────────
 * Base palette
 *   --bg, --bg2..4            Dark surface backgrounds (opacity tiers)
 *   --text, --text-dim        Primary and muted text
 *   --border                  Default 1px border
 *   --glass-bg, --glass-blur  Frosted glass effect
 *
 * Accent (Eclipse #D9A85F dark / #906422 Eclipse oscurecido light)
 *   --accent, --accent2       Primary and secondary accent
 *   --accent-hover            Hover state
 *   --accent-3 to --accent-85 Opacity tints (3%-85%)
 *
 * Semantic states
 *   --success  Green: ok, connected, done
 *   --warning  Amber: caution, review
 *   --danger   Red:   error, delete, alert
 *   Each has opacity tints: --success-4..50, --warning-4..50, --danger-0..50
 *
 * Extended palette
 *   --violet (#a78bfa)   Evaluating / override states  → --violet-6..45
 *   --indigo (#818cf8)   Task-type badges              → --indigo-10..15
 *   --emerald (#10b981)  Plan start / progress         → --emerald-7..40
 *   --amber (#fbbf24)    System events                 → --amber-7..30
 *   --orange (#ffb74d)   Owner badges                  → --orange-15
 *   --green (#22c55e)    Approve / confirm             → --green-12..35
 *   --blue (#3b82f6)     In-progress plans             → --blue-6..18
 *   --red (#ef4444)      Alt danger tone               → --red-8..90
 *
 * Surfaces   --surface-topbar/panel/input/heavy/mobile-sidebar/nav/dropdown/popup
 * Overlays   --white-2/12/20  |  --black-12..75
 * Shadows    --shadow-float/card/popup/side/bottom
 * Text vars  --text-em/white/black/code/ok/err
 *
 * Theme overrides (at bottom of file)
 *   [data-theme="light"]               Explicit light palette
 *   [data-theme="dark"]                Explicit dark palette
 *   @media (prefers-color-scheme:light) Auto light (html without data-theme)
 * ══════════════════════════════════════════════════════════════════════════════
 */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  /* ── Layout & sizing ──────────────────────────────────────────────────────── */
  --topbar-h:    48px;
  --sidebar-w:   240px;
  --panel-w:     300px;
  --nav-h:       64px;
  --radius:      16px;
  --radius-sm:   12px;
  --radius-xs:   6px;
  --radius-pill: 24px;
  --glass-blur:  20px;
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Base backgrounds ─────────────────────────────────────────────────────── */
  --bg:         #0B0B0B;
  --bg2:        rgba(255,255,255,0.03);
  --bg3:        rgba(255,255,255,0.06);
  --bg4:        rgba(255,255,255,0.10);
  --surface2:   var(--bg3);
  --sidebar-bg: #0B0B0B;
  --chat-bg:    rgba(255,255,255,0.05);
  --btn-bg:     rgba(255,255,255,0.06);
  --btn-hover:  rgba(255,255,255,0.10);
  --code-bg:    rgba(0,0,0,0.35);
  --glass-bg:   rgba(255,255,255,0.04);

  /* ── Text ─────────────────────────────────────────────────────────────────── */
  --text:       #F8F3EA;
  --text-dim:   rgba(248,243,234,0.55);
  --text-muted: rgba(248,243,234,0.5);
  --text-em:    #FFFFFF;
  --text-white: #fff;
  --text-black: #000;
  --text-code:  #a8e6cf;
  --text-ok:    #56d364;
  --text-err:   #f85149;

  /* ── On-color text (text when bg is a semantic color) ────────────────────── */
  --on-accent:  #fff;
  --on-danger:  #fff;
  --on-success: #fff;

  /* ── Border ───────────────────────────────────────────────────────────────── */
  --border:     rgba(255,255,255,0.07);

  /* ── Semantic base colors ─────────────────────────────────────────────────── */
  --accent:       #D9A85F;
  --accent2:      #A37127;
  --accent-hover: #F1D7A6;
  --success:      #66bb6a;
  --warning:      #ffa726;
  --danger:       #ef5350;

  /* ── Shadows ──────────────────────────────────────────────────────────────── */
  --shadow-float:  0 4px 24px rgba(0,0,0,0.5);
  --shadow-card:   0 1px 8px rgba(0,0,0,0.3);
  --shadow-popup:  0 8px 32px rgba(0,0,0,0.60);
  --shadow-side:  -4px 0 24px rgba(0,0,0,0.25);
  --shadow-bottom: 0 -4px 24px rgba(0,0,0,0.60);

  /* ── Surfaces (semi-transparent panels; overridden in light theme) ────────── */
  --surface-topbar:         rgba(32,32,32,0.8);
  --surface-panel:          rgba(32,32,32,0.9);
  --surface-input:          rgba(32,32,32,0.6);
  --surface-heavy:          rgba(32,32,32,0.97);
  --surface-mobile-sidebar: rgba(32,32,32,0.95);
  --surface-nav:            rgba(32,32,32,0.85);
  --surface-dropdown:       #202020;
  --surface-popup:          #202020;
  --bg-blur:                rgba(32,32,32,0.80);
  --bg-sheet-60:            rgba(32,32,32,0.60);
  --bg-sheet-85:            rgba(32,32,32,0.85);
  --bg-sheet-90:            rgba(32,32,32,0.90);
  --bg-sheet-95:            rgba(32,32,32,0.95);
  --bg-sheet-97:            rgba(32,32,32,0.97);

  /* ── White tints ──────────────────────────────────────────────────────────── */
  --white-2:   rgba(255,255,255,0.02);
  --white-12:  rgba(255,255,255,0.12);
  --white-20:  rgba(255,255,255,0.20);

  /* ── Black overlays ───────────────────────────────────────────────────────── */
  --black-12:  rgba(0,0,0,0.12);
  --black-15:  rgba(0,0,0,0.15);
  --black-20:  rgba(0,0,0,0.20);
  --black-25:  rgba(0,0,0,0.25);
  --black-35:  rgba(0,0,0,0.35);
  --black-40:  rgba(0,0,0,0.40);
  --black-45:  rgba(0,0,0,0.45);
  --black-50:  rgba(0,0,0,0.50);
  --black-55:  rgba(0,0,0,0.55);
  --black-60:  rgba(0,0,0,0.60);
  --black-75:  rgba(0,0,0,0.75);

  /* ── Accent tints ─────────────────────────────────────────────────────────── */
  --accent-3:   rgba(217,168,95,0.03);
  --accent-4:   rgba(217,168,95,0.04);
  --accent-5:   rgba(217,168,95,0.05);
  --accent-6:   rgba(217,168,95,0.06);
  --accent-7:   rgba(217,168,95,0.07);
  --accent-8:   rgba(217,168,95,0.08);
  --accent-9:   rgba(217,168,95,0.09);
  --accent-10:  rgba(217,168,95,0.10);
  --accent-12:  rgba(217,168,95,0.12);
  --accent-13:  rgba(217,168,95,0.13);
  --accent-14:  rgba(217,168,95,0.14);
  --accent-15:  rgba(217,168,95,0.15);
  --accent-18:  rgba(217,168,95,0.18);
  --accent-20:  rgba(217,168,95,0.20);
  --accent-22:  rgba(217,168,95,0.22);
  --accent-25:  rgba(217,168,95,0.25);
  --accent-30:  rgba(217,168,95,0.30);
  --accent-35:  rgba(217,168,95,0.35);
  --accent-40:  rgba(217,168,95,0.40);
  --accent-45:  rgba(217,168,95,0.45);
  --accent-50:  rgba(217,168,95,0.50);
  --accent-85:  rgba(217,168,95,0.85);
  --accent2-7:  rgba(163,113,39,0.07);
  --accent2-13: rgba(163,113,39,0.13);
  /* ── Success tints ────────────────────────────────────────────────────────── */
  --success-4:   rgba(102,187,106,0.04);
  --success-6:   rgba(102,187,106,0.06);
  --success-8:   rgba(102,187,106,0.08);
  --success-10:  rgba(102,187,106,0.10);
  --success-12:  rgba(102,187,106,0.12);
  --success-15:  rgba(102,187,106,0.15);
  --success-18:  rgba(102,187,106,0.18);
  --success-25:  rgba(102,187,106,0.25);
  --success-30:  rgba(102,187,106,0.30);
  --success-35:  rgba(102,187,106,0.35);
  --success-50:  rgba(102,187,106,0.50);
  --success-55:  rgba(102,187,106,0.55);
  --success-40:  rgba(102,187,106,0.40);

  /* ── Warning tints ────────────────────────────────────────────────────────── */
  --warning-4:   rgba(255,167,38,0.04);
  --warning-8:   rgba(255,167,38,0.08);
  --warning-15:  rgba(255,167,38,0.15);
  --warning-20:  rgba(255,167,38,0.20);
  --warning-25:  rgba(255,167,38,0.25);
  --warning-40:  rgba(255,167,38,0.40);
  --warning-50:  rgba(255,167,38,0.50);
  /* ── danger tints ─────────────────────────────────────────────── */
  --danger-0:    rgba(239,83,80,0);
  --danger-8:    rgba(239,83,80,0.08);
  --danger-10:   rgba(239,83,80,0.10);
  --danger-15:   rgba(239,83,80,0.15);
  --danger-40:   rgba(239,83,80,0.40);
  --danger-12:   rgba(239,83,80,0.12);
  --danger-20:   rgba(239,83,80,0.20);
  --danger-50:   rgba(239,83,80,0.50);

  /* ── Violet (evaluating / override states) ────────────────────────────────── */
  --violet:      #a78bfa;
  --violet-6:    rgba(167,139,250,0.06);
  --violet-8:    rgba(167,139,250,0.08);
  --violet-10:   rgba(167,139,250,0.10);
  --violet-12:   rgba(167,139,250,0.12);
  --violet-15:   rgba(167,139,250,0.15);
  --violet-18:   rgba(167,139,250,0.18);
  --violet-20:   rgba(167,139,250,0.20);
  --violet-22:   rgba(167,139,250,0.22);
  --violet-30:   rgba(167,139,250,0.30);
  --violet-35:   rgba(167,139,250,0.35);
  --violet-7:    rgba(167,139,250,0.07);
  --violet-40:   rgba(167,139,250,0.40);
  --violet-45:   rgba(167,139,250,0.45);

  /* ── Indigo (task-type badges) ────────────────────────────────────────────── */
  --indigo:      #818cf8;
  --indigo-10:   rgba(99,102,241,0.10);
  --indigo-15:   rgba(99,102,241,0.15);

  /* ── Emerald (plan start / progress) ─────────────────────────────────────── */
  --emerald:       #10b981;
  --emerald-green: #34d399;
  --emerald-7:   rgba(16,185,129,0.07);
  --emerald-14:  rgba(16,185,129,0.14);
  --emerald-15:  rgba(16,185,129,0.15);
  --emerald-22:  rgba(16,185,129,0.22);
  --emerald-28:  rgba(16,185,129,0.28);
  --emerald-40:  rgba(16,185,129,0.40);

  /* ── Amber (system events) ────────────────────────────────────────────────── */
  --amber:        #fbbf24;
  --amber-alt:    #f59e0b;
  --amber-7:     rgba(251,191,36,0.07);
  --amber-12:    rgba(251,191,36,0.12);
  --amber-20:    rgba(251,191,36,0.20);
  --amber-22:    rgba(251,191,36,0.22);
  --amber-30:    rgba(251,191,36,0.30);
  --amber-alt-12: rgba(245,158,11,0.12);
  --amber-alt-30: rgba(245,158,11,0.30);
  /* ── orange (owner badge) ─────────────────────────────────────── */
  --orange:      #ffb74d;
  --orange-15:   rgba(255,183,77,0.15);

  /* ── Green (approve / confirm) ────────────────────────────────────────────── */
  --green:       #22c55e;
  --green-12:    rgba(34,197,94,0.12);
  --green-15:    rgba(34,197,94,0.15);
  --green-30:    rgba(34,197,94,0.30);
  --green-35:    rgba(34,197,94,0.35);

  /* ── Blue (in-progress plans) ─────────────────────────────────────────────── */
  --blue:        #3b82f6;
  --blue-6:      rgba(59,130,246,0.06);
  --blue-10:     rgba(59,130,246,0.10);
  --blue-18:     rgba(59,130,246,0.18);

  /* ── Red (alt danger tone) ────────────────────────────────────────────────── */
  --red:         #ef4444;
  --red-8:       rgba(239,68,68,0.08);
  --red-25:      rgba(239,68,68,0.25);
  --red-40:      rgba(239,68,68,0.40);
  --red-50:      rgba(239,68,68,0.50);
  --red-60:      rgba(239,68,68,0.60);
  --red-85:      rgba(239,68,68,0.85);
  --red-90:      rgba(239,68,68,0.90);

  /* ── Gray tints ───────────────────────────────────────────────────────────── */
  --gray-10:     rgba(122,138,154,0.10);
  --gray-20:     rgba(122,138,154,0.20);

  /* ── Toast ────────────────────────────────────────────────────────────────── */
  --toast-bg:    rgba(30,40,55,0.95);
  --toast-text:  #fff;

  /* ── Glow / magic layer ───────────────────────────────────────────────────── */
  --glow:         0 0 18px rgba(217,168,95,0.22);
  --glow-sm:      0 0 10px rgba(217,168,95,0.14);
  --glow-violet:  0 0 14px rgba(167,139,250,0.18);
  --accent-soft:  rgba(217,168,95,0.07);
  --ambient:      radial-gradient(ellipse 90% 40% at 50% 0%, rgba(217,168,95,0.04) 0%, transparent 70%);

  /* ── Light-mode element tokens (used only under [data-theme="light"]) ─────── */
  --light-bubble-bg:    rgba(255,255,255,0.72);
  --light-border-soft:  rgba(0,0,0,0.07);
  --light-code-bg:      rgba(0,0,0,0.07);
  --light-pre-bg:       rgba(0,0,0,0.06);
  --light-tool-bg:      rgba(0,0,0,0.04);
  --light-form-bg:      rgba(0,0,0,0.04);
  --light-modal-shadow: rgba(0,0,0,0.12);
  --light-scroll-thumb: rgba(0,0,0,0.15);
  --light-scroll-hover: rgba(0,0,0,0.25);
  --light-slate-900:    #0f172a;
  --light-slate-800:    #1e293b;
  --light-slate-700:    #334155;
  --light-slate-500:    #475569;
  --light-border-tool:  rgba(0,0,0,0.08);
}
/*
 * ══════════════════════════════════════════════════════════════════════════════
 * WCAG AA CONTRAST AUDIT — ratios verified against solid effective backgrounds.
 * Min: 4.5:1 normal text · 3:1 large/UI. All values rounded to 2 decimals.
 * Recalculated for the Kurogo palette swap (pln_36d4cd8aebb8) — see
 * KUROGO-PALETTE.md §3 for the full Ink/Graphite/Paper/White/Eclipse/Halo matrix.
 *
 * ── DARK MODE  (bg/sidebar Ink #0B0B0B L=0.001 · raised surfaces Graphite #202020 L=0.014) ──
 * Area                  Token (resolved hex)              Background       Ratio   Pass
 * Login label/input     --text     #F8F3EA (Paper)        #0B0B0B         17.81:1  AAA
 * Login hint            --text-dim rgba(248,243,234,.55)   #0B0B0B          5.78:1  AA ✓
 * Login accent title    --accent   #D9A85F (Eclipse)       #0B0B0B          9.11:1  AAA
 * Chat bubble text      --text     #F8F3EA                 raised #202020  14.74:1  AAA
 * Chat links            --accent   #D9A85F (Eclipse)       raised #202020   7.54:1  AAA
 * Chat code text        --text-code #a8e6cf (unchanged)    #0B0B0B         13.95:1  AAA
 * Chat timestamps       --text-dim rgba(248,243,234,.55)   #0B0B0B          5.78:1  AA ✓
 * Sidebar names         --text     #F8F3EA                 #0B0B0B         17.81:1  AAA
 * Sidebar dim text      --text-dim rgba(248,243,234,.55)   #0B0B0B          5.78:1  AA ✓
 * Settings body text    --text     #F8F3EA                 panel #202020   14.74:1  AAA
 * Settings ok badge     --text-ok  #56d364 (unchanged)     #0B0B0B         10.21:1  AAA
 * Settings err badge    --text-err #f85149 (unchanged)     #0B0B0B          5.87:1  AA ✓
 * Crons success label   --success  #66bb6a (unchanged)     #0B0B0B          8.32:1  AAA
 * Crons danger label    --danger   #ef5350 (unchanged)     #0B0B0B          5.65:1  AA ✓
 * Usage dim labels      --text-dim rgba(248,243,234,.55)   panel #202020    5.39:1  AA ✓
 * Team panel meta       --text-muted rgba(248,243,234,.5)  panel #202020    4.72:1  AA ✓
 * Modal header/body     --text     #F8F3EA                 #0B0B0B         17.81:1  AAA
 * Modal error text      --danger   #ef5350 (unchanged)     #0B0B0B          5.65:1  AA ✓
 * Modal success text    --success  #66bb6a (unchanged)     #0B0B0B          8.32:1  AAA
 * Btn text on accent    --bg       #0B0B0B                 #D9A85F          9.11:1  AAA
 * NOTA: --text-dim y --text-muted oscuros eran hue 210 (slate frío, era del
 * accent cyan). Swap a Paper cálido (fix pln_36d4cd8aebb8 / tsk_66788bda9435,
 * 2026-09-07): --text-dim #7a8a9a->rgba(248,243,234,.55) (mejora ambos ratios).
 * --text-muted rgba(122,138,154,.5)->rgba(248,243,234,.5): compuesto pasaba de
 * (66,74,82)=2.19:1 sobre Ink (FALLA AA) a (130,127,123)=4.94:1 sobre Ink /
 * 4.72:1 sobre Graphite (PASA AA). Alpha sin cambios en los dos tokens; solo hue.
 * --text-muted claro queda FUERA de este fix (ver tsk_66788bda9435): con la
 * misma construcción simétrica necesitaría alpha >=0.63, y --text-dim claro ya
 * está en 0.65 — a 0.02 de distancia dejan de ser dos escalones distinguibles.
 *
 * ── LIGHT MODE  (bg/sidebar Paper #F8F3EA L=0.901 · raised surfaces White #FFFFFF L=1.0) ──
 * Area                  Token (resolved hex)              Background       Ratio   Pass
 * Login label/input     --text     #0B0B0B (Ink)           #F8F3EA         17.81:1  AAA
 * Login hint            --text-dim rgba(32,32,32,.65)      #F8F3EA          4.88:1  AA ✓
 * Login accent title    --accent   #906422 (Eclipse osc.)  #F8F3EA          4.71:1  AA ✓
 * Chat bubble text      --text     #0B0B0B                 raised #FFFFFF  19.68:1  AAA
 * Chat links            --accent   #906422                 raised #FFFFFF   5.21:1  AA ✓
 * Chat code text        --text-code #1a5e32 (unchanged)    #F8F3EA          7.06:1  AAA
 * Chat timestamps       --text-dim rgba(32,32,32,.65)      #F8F3EA          4.88:1  AA ✓
 * Sidebar names         --text     #0B0B0B                 #F8F3EA         17.81:1  AAA
 * Sidebar dim text      --text-dim rgba(32,32,32,.65)      #F8F3EA          4.88:1  AA ✓
 * Settings body text    --text     #0B0B0B                 panel #FFFFFF   19.68:1  AAA
 * Settings ok badge     --text-ok  #2e7d32 (=success)      #F8F3EA          4.64:1  AA ✓
 * Settings err badge    --text-err #c62828 (=danger)       #F8F3EA          5.09:1  AA ✓
 * Crons success label   --success  #2e7d32 (unchanged)     #F8F3EA          4.64:1  AA ✓
 * Crons danger label    --danger   #c62828 (unchanged)     #F8F3EA          5.09:1  AA ✓
 * Usage dim labels      --text-dim rgba(32,32,32,.65)      panel #FFFFFF    5.10:1  AA ✓
 * Modal header/body     --text     #0B0B0B                 #FFFFFF         19.68:1  AAA
 * Modal error text      --danger   #c62828 (unchanged)     #FFFFFF          5.62:1  AA ✓
 * Modal success text    --success  #2e7d32 (unchanged)     #FFFFFF          5.13:1  AA ✓
 * Btn text on accent    --bg       #F8F3EA                 #906422          4.71:1  AA ✓
 * ══════════════════════════════════════════════════════════════════════════════
 */
/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

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

/* ── Presence orb — unified "agent is alive" motion language ─────────────────
   One component, one easing curve, reused in login / topbar / anywhere the
   system needs to say "idle" / "thinking" / "error" instead of a bespoke
   spinner or keyframe. See wiki/systems/agents-ui.md § Dirección de diseño. */
/* A self-luminous point, not a lit sphere: the hot spot sits dead-center (a
   sphere shaded from one corner reads as a billiard ball / rendered 3D
   object, which is the opposite of "light"). Few stops, soft falloff, a
   whisper of blur so it never resolves into a crisp mathematical circle. */
.presence-orb {
  --orb-size: 8px;
  position: relative;
  width: var(--orb-size); height: var(--orb-size);
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, var(--accent) 28%, transparent 82%);
  filter: blur(0.5px);
  animation: orb-idle 4s var(--ease) infinite;
}
/* Bloom halo — the ambient glow the light throws on its surroundings.
   Kept quiet: it should read at a glance, not compete for attention. */
.presence-orb::before {
  content: '';
  position: absolute;
  inset: calc(var(--orb-size) * -1.4);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-25) 0%, transparent 70%);
  filter: blur(1px);
  animation: orb-halo 4s var(--ease) infinite;
  pointer-events: none;
}
/* Sonar ping — a ring that emits and dissolves outward on every cycle. This
   is what makes it read as "emitting/alive" instead of "breathing in place";
   the outward travel is the flow the static glow alone couldn't deliver.
   Small and faint on purpose — a whisper, not a shockwave. */
.presence-orb::after {
  content: '';
  position: absolute;
  inset: calc(var(--orb-size) * -0.5);
  border-radius: 50%;
  border: 1px solid var(--accent-25);
  opacity: 0;
  animation: orb-ping 4s var(--ease) infinite;
  pointer-events: none;
}
.presence-orb.lg { --orb-size: 34px; }
.presence-orb.thinking { animation: orb-thinking 1.1s var(--ease) infinite; }
.presence-orb.thinking::before { animation: orb-halo-thinking 1.1s var(--ease) infinite; }
.presence-orb.thinking::after { animation: orb-ping-thinking 1.1s var(--ease) infinite; }
.presence-orb.error {
  animation: orb-error 0.8s var(--ease) 1 both;
  background: radial-gradient(circle at 50% 50%, #fff 0%, var(--danger) 32%, transparent 85%);
}
.presence-orb.error::before {
  background: radial-gradient(circle, var(--danger-20) 0%, transparent 70%);
  animation: orb-halo-error 0.8s var(--ease) 1 both;
}
.presence-orb.error::after {
  border-color: var(--danger-40);
  animation: orb-ping-error 0.8s var(--ease) 1 both;
}

@keyframes orb-idle {
  0%, 100% { transform: translateY(0)    scale(1); }
  50%      { transform: translateY(-18%) scale(1.08); }
}
@keyframes orb-halo {
  0%, 100% { opacity: 0.2;  transform: scale(0.85); }
  50%      { opacity: 0.5;  transform: scale(1.15); }
}
@keyframes orb-ping {
  0%   { transform: scale(0.8); opacity: 0; }
  20%  { opacity: 0.3; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes orb-thinking {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}
@keyframes orb-halo-thinking {
  0%, 100% { opacity: 0.3;  transform: scale(0.92); }
  50%      { opacity: 0.65; transform: scale(1.35); }
}
@keyframes orb-ping-thinking {
  0%   { transform: scale(0.8); opacity: 0; }
  25%  { opacity: 0.4; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes orb-error {
  0%   { transform: scale(1.6); }
  100% { transform: scale(1); }
}
@keyframes orb-halo-error {
  0%   { opacity: 0.7; transform: scale(2.2); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes orb-ping-error {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Login ─────────────────────────────────────────────────────────────────── */
/* The login screen is the first impression — it always renders in the dark,
   glowy "space" palette regardless of the user's light/dark/auto preference,
   the same way Linear/Vercel/Notion keep their marketing/auth surface on a
   fixed brand palette even though the product itself is theme-aware. */
#login-screen {
  --bg:         #0B0B0B;
  --accent:     #D9A85F;
  --accent-hover: #F1D7A6;
  --accent2:    #A37127;
  --accent-13:  rgba(217,168,95,0.13);
  --accent-25:  rgba(217,168,95,0.25);
  --accent2-7:  rgba(163,113,39,0.07);
  --glass-bg:   rgba(255,255,255,0.04);
  --border:     rgba(255,255,255,0.10);
  --text:       #F8F3EA;
  --text-dim:   rgba(248,243,234,0.55);
  --bg3:        rgba(255,255,255,0.06);
  --glow-sm:    0 0 10px rgba(217,168,95,0.14);
  color-scheme: dark;

  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  overflow: hidden;
}
/* Ambient drift — slow, quiet nebula behind the login card. Never competes
   with the form; it's peripheral, like a room that's breathing. */
#login-screen::before {
  content: '';
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 28% 32%, var(--accent-13) 0%, transparent 45%),
    radial-gradient(circle at 72% 68%, var(--accent2-7) 0%, transparent 50%);
  animation: login-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes login-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-4%, 3%) scale(1.08); }
}
/* A quiet scatter of stars — reinforces "space" without saying it out loud. */
#login-screen::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 22%, var(--white-20), transparent),
    radial-gradient(1px 1px at 65% 15%, var(--white-20), transparent),
    radial-gradient(1.5px 1.5px at 82% 38%, var(--white-20), transparent),
    radial-gradient(1px 1px at 33% 68%, var(--white-20), transparent),
    radial-gradient(1.5px 1.5px at 58% 78%, var(--white-20), transparent),
    radial-gradient(1px 1px at 90% 66%, var(--white-20), transparent),
    radial-gradient(1.5px 1.5px at 12% 82%, var(--white-20), transparent),
    radial-gradient(1px 1px at 46% 30%, var(--white-20), transparent);
  animation: star-twinkle 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

.login-box {
  position: relative;
  width: min(360px, 90vw);
  padding: 40px 32px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-float), 0 0 70px -12px var(--accent-25), inset 0 1px 0 var(--white-12);
}

.login-logo { position: relative; margin-bottom: 16px; display: flex; justify-content: center; }
/* The isotipo's own halo (baked into eclipse-isotipo.svg) already supplies
   the "glow" this spot used to need from a separate CSS ring — no extra
   decoration required here. */
.login-logo-mark { width: 72px; height: 72px; display: block; }
.login-title { font-size: 22px; font-weight: 600; color: var(--accent); }
.login-sub { color: var(--text-dim); font-size: 13px; margin: 4px 0 24px; }

#login-form input {
  width: 100%; padding: 12px 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  margin-bottom: 12px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
#login-form input:focus { border-color: var(--accent-50); box-shadow: var(--glow-sm); }

#login-form button {
  width: 100%; padding: 13px;
  background: var(--accent); color: var(--bg);
  border-radius: var(--radius-sm); font-size: 15px; font-weight: 600;
  transition: background 0.2s var(--ease);
}
#login-form button:hover { background: var(--accent-hover); }
#login-form button:active { background: var(--accent2); transform: scale(0.98); }
#login-form button:disabled { background: var(--bg3); color: var(--text-dim); cursor: default; }

.login-error { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 20px; }

/* ── App shell ─────────────────────────────────────────────────────────────── */
#app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  padding-top: var(--topbar-h);
  padding-bottom: 0;
  background: var(--bg);
}

/* ── Topbar ────────────────────────────────────────────────────────────────── */
#topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--surface-topbar);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  z-index: 100;
}

.thread-title {
  flex: 1; font-weight: 500; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Workspace + agente, siempre en texto plano en el topbar -- no un title de
   hover. Antes la única forma de confirmar con qué agente/workspace estabas
   era pasar el mouse por agent-face-btn (o leer el HTML a mano).
   flex-shrink:0 es deliberado: en mobile el topbar ya no entra completo (el
   selector de modelo + los íconos de acciones solos superan el ancho de un
   viewport de 390px, algo previo a este cambio -- .thread-title ya se
   achicaba a 0 antes de que existiera este label). Si el label pudiera
   encogerse iba a terminar en el mismo 0px invisible que .thread-title, que
   es exactamente el síntoma que esto tiene que evitar -- por eso cede el
   espacio de sobra, no el propio. */
.identity-label {
  flex-shrink: 0; max-width: 220px;
  font-size: 12px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.identity-label:empty { display: none; }
@media (max-width: 480px) {
  /* A este ancho no entran workspace Y agente juntos (ver comentario de
     arriba sobre .thread-title colapsando a 0). Mostrar solo el agente
     -- "quién es mi agente" es la pregunta que este label existe para
     responder; el workspace tiene su propio ícono en el topbar. Se le
     da flex real (en vez del max-width:64px fijo de antes) para que
     ocupe el lugar que .thread-title ya cedía, así el nombre entra
     completo en vez de quedar cortado a un emoji y unas letras.
     .thread-title se oculta del todo en vez de dejarlo competir por flex:
     con flex-basis:auto en los dos, el shrink se reparte según tamaño de
     CONTENIDO (más contenido = más recorte en px, pero ambos igual de
     recortados en proporción), así que con espacio insuficiente para los
     dos el agente terminaba tan cortado como el título -- exactamente el
     bug que esto corrige. Total, .thread-title ya rendía ilegible acá
     desde antes de que este label existiera (ver comentario de arriba). */
  .identity-label {
    flex: 1 1 auto; max-width: none; min-width: 0;
  }
  .identity-ws, .identity-sep { display: none; }
  .thread-title { display: none; }
  /* El picker de modelo ("Balanceado") es el otro elemento fijo grande del
     topbar -- a este ancho, entre eso y las acciones de la derecha ya no
     entraba ni el propio thread-title (0px, antes de que este label
     existiera). Reclamar el texto acá es lo que le hace lugar real al
     identity-label en vez de forzar el desborde encima de settings/kill. */
  .model-picker-trigger .model-picker-label { display: none; }
  .model-picker-trigger { padding: 4px 8px; }
}

.topbar-actions { display: flex; gap: 4px; align-items: center; }

.model-picker { position: relative; flex-shrink: 0; }

.model-picker-trigger {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500;
  color: var(--text-dim); cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.model-picker-trigger:hover { border-color: var(--accent-40); color: var(--text); }
.model-picker-trigger .lucide { width: 13px; height: 13px; }

.model-picker-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 190px;
  background: var(--surface-dropdown); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-popup);
  padding: 4px; z-index: 200;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.model-picker.open .model-picker-dropdown {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

.model-picker-option {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s var(--ease);
}
.model-picker-option:hover { background: var(--border); }
.model-picker-option.active { background: var(--accent-12); }
.model-picker-option .lucide { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

.model-picker-option-text { display: flex; flex-direction: column; gap: 1px; }
.model-picker-option-label { font-size: 13px; font-weight: 500; color: var(--text); }
.model-picker-option-sub { font-size: 11px; color: var(--text-dim); }

/* Topbar "más" menu — Archivos / Crons / Usage (navegación, no preferencia) */
.topbar-more { position: relative; flex-shrink: 0; }
.topbar-more-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 160px;
  background: var(--surface-dropdown); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-popup);
  padding: 4px; z-index: 200;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.topbar-more.open .topbar-more-dropdown {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.topbar-more-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: 8px;
  background: none; border: none; color: var(--text);
  font-size: 13px; text-align: left; cursor: pointer;
  transition: background 0.12s var(--ease);
}
.topbar-more-item:hover { background: var(--border); }
.topbar-more-item .lucide { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; }

/* Lucide SVG global sizing */
.lucide {
  width: 1em; height: 1em;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: background 0.2s var(--ease);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg3); }
.icon-btn:active { background: var(--bg4); }

/* Same soft-edge "orb" language as .presence-orb, scaled down — status dots
   fade at the rim instead of ending in a hard disc, and animated states get
   their own blurred halo instead of a plain box-shadow ring. */
.ws-dot {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.ws-dot::before {
  content: '';
  position: absolute; inset: -5px; border-radius: 50%;
  pointer-events: none; filter: blur(1px); opacity: 0;
}
.ws-dot.connected {
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--success) 55%, transparent 100%);
}
.ws-dot.connected::before { background: radial-gradient(circle, var(--success-40) 0%, transparent 72%); opacity: 0.75; }
.ws-dot.connecting {
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--warning) 55%, transparent 100%);
  animation: pulse 1s infinite;
}
.ws-dot.connecting::before { background: radial-gradient(circle, var(--warning-40) 0%, transparent 72%); opacity: 0.6; animation: pulse 1s infinite; }
.ws-dot.disconnected {
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--danger) 55%, transparent 100%);
}
.ws-dot.disconnected::before { background: radial-gradient(circle, var(--danger-40) 0%, transparent 72%); opacity: 0.6; }
.icon-btn.active { background: var(--bg3); color: var(--accent); }
.icon-btn.danger:hover { background: var(--danger-15); color: var(--danger); }

/* ── Main layout ───────────────────────────────────────────────────────────── */
#main {
  flex: 1; display: flex; overflow: hidden;
  /* iOS: 100vh es el viewport GRANDE, no se achica con la barra de Safari ni
     con el teclado. 100dvh (dynamic viewport height) sí sigue la barra del
     navegador — se declara ahora, sobrescribiendo el fallback de arriba en
     navegadores que la soportan (si no la soportan, cae al 100vh previo).
     dvh NO reacciona al teclado en iOS (Apple no reajusta el layout
     viewport ahí) — por eso --vvh (seteada desde visualViewport en app.js)
     tiene la última palabra cuando está disponible. */
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  height: calc(var(--vvh, 100dvh) - var(--topbar-h));
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  background: var(--bg2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  flex-shrink: 0; overflow: hidden;
  transition: width 0.2s var(--ease);
}
#sidebar.collapsed { width: 0; }

#sidebar-header {
  display: none;
  align-items: center; gap: 4px;
  padding: 12px 12px 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#sidebar-header .sidebar-title { flex: 1; }
.sidebar-title { font-size: 12px; font-weight: 600; color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; }

#thread-search-bar {
  display: flex; align-items: center; gap: 6px;
  margin: 10px 10px 6px;
  padding: 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  transition: border-color 0.2s var(--ease);
}
#thread-search-bar:focus-within {
  border-color: var(--accent-40);
}
#thread-search-icon {
  width: 13px; height: 13px;
  color: var(--text-dim); flex-shrink: 0;
  pointer-events: none;
}
#thread-search-input {
  flex: 1; font-size: 13px;
  background: none; border: none; outline: none;
  color: var(--text);
  min-width: 0;
}
#thread-search-input::placeholder { color: var(--text-dim); }
#thread-search-clear {
  display: none;
  width: 16px; height: 16px;
  align-items: center; justify-content: center;
  color: var(--text-dim); border-radius: 50%;
  flex-shrink: 0; padding: 0;
}
#thread-search-clear:hover { color: var(--text); }
#thread-search-clear.visible { display: flex; }
#thread-search-clear svg { width: 12px; height: 12px; }

.thread-highlight {
  background: var(--accent-20);
  border-radius: 3px;
  color: var(--text);
}

/* ── Sidebar filter button ───────────────────────────────────────────────── */
.sidebar-filter-btn {
  width: 20px; height: 20px; border-radius: 4px;
  color: var(--text-dim); background: transparent;
  border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color 150ms var(--ease); flex-shrink: 0; padding: 0;
}
.sidebar-filter-btn:hover { color: var(--text); }
.sidebar-filter-btn.filter-active { color: var(--accent); }
.sidebar-filter-btn svg, .sidebar-filter-btn i { width: 13px; height: 13px; }

/* ── Sidebar filter panel ────────────────────────────────────────────────── */
#sidebar-filter-panel {
  display: none; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
#sidebar-filter-panel.open { display: flex; }
.sfilter-row { display: flex; gap: 4px; }
.sfilter-sep { height: 1px; background: var(--border); margin: 2px 0; }
.sfilter-type, .sfilter-status, .sfilter-scope {
  flex: 1; font-size: 11px; font-weight: 500; padding: 4px 0;
  border-radius: 5px; border: 1px solid transparent;
  color: var(--text-dim); background: transparent;
  cursor: pointer; transition: color 150ms var(--ease), background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.sfilter-type:hover, .sfilter-status:hover, .sfilter-scope:hover { color: var(--text); background: var(--bg3); }
.sfilter-type.active, .sfilter-status.active, .sfilter-scope.active {
  color: var(--text); background: var(--bg3); border-color: var(--border);
}

/* Type pill shown when searching */
.thread-type-pill {
  display: inline-block; font-size: 9px; font-weight: 600;
  padding: 1px 5px; border-radius: 8px; margin-left: 5px;
  text-transform: uppercase; letter-spacing: 0.04em;
  vertical-align: middle;
}
.thread-type-pill.task { background: var(--indigo-15); color: var(--indigo); }
.thread-type-pill.plan { background: var(--emerald-15); color: var(--emerald-green); }

/* ── Unread badges ───────────────────────────────────────────────────────── */
.sidebar-unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--accent); color: var(--text-black);
  border-radius: 9px; font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.thread-unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--accent); color: var(--text-black);
  border-radius: 9px; font-size: 10px; font-weight: 700;
  flex-shrink: 0; margin-left: 4px; margin-right: 4px;
}
.thread-item.has-unread .thread-name { font-weight: 600; }

#thread-list {
  flex: 1; overflow-y: auto; padding: 6px 8px;
}

.thread-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s var(--ease);
  margin-bottom: 2px; position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.thread-item:hover { background: var(--bg3); }
.thread-item:active { background: var(--bg4); }
.thread-item.active { background: var(--bg4); }

.thread-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.thread-dot.idle    { background: radial-gradient(circle at 35% 30%, #fff 0%, var(--success) 55%, transparent 100%); opacity: 0.6; }
.thread-dot.running { background: radial-gradient(circle at 35% 30%, #fff 0%, var(--warning) 55%, transparent 100%); animation: pulse 1s infinite; }
.thread-dot.error   { background: radial-gradient(circle at 35% 30%, #fff 0%, var(--danger) 55%, transparent 100%); }

@keyframes pulse {
  0%, 100% { opacity: 1; } 50% { opacity: .3; }
}

.thread-info { flex: 1; min-width: 0; }
.thread-name {
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thread-draft-icon {
  color: var(--text-dim); margin-right: 4px; flex-shrink: 0;
  vertical-align: -1px;
}
.thread-meta {
  font-size: 11px; color: var(--text-dim); margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
}
.thread-snippet {
  font-size: 11px; color: var(--text-dim); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.thread-archive {
  opacity: 0; color: var(--text-dim);
  padding: 0 4px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center;
  transition: opacity 0.15s;
}
.thread-item:hover .thread-archive { opacity: 1; }
.thread-archive:hover { color: var(--accent, var(--accent)); }

.thread-mute {
  opacity: 0; color: var(--text-dim);
  padding: 0 4px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center;
  transition: opacity 0.15s;
}
.thread-item:hover .thread-mute { opacity: 1; }
.thread-mute:hover { color: var(--accent); }

/* Fijar chat: oculto hasta hover, salvo que esté fijado (ahí queda siempre visible
   y en color accent — es el indicador de "esto no se archiva de noche"). */
.thread-pin {
  opacity: 0; color: var(--text-dim);
  padding: 0 4px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center;
  transition: opacity 0.15s;
}
.thread-item:hover .thread-pin { opacity: 1; }
.thread-pin:hover { color: var(--accent); }
.thread-pin.pinned { opacity: 1; color: var(--accent); }

.thread-delete {
  opacity: 0; font-size: 16px; color: var(--text-dim);
  padding: 0 4px; border-radius: 6px; flex-shrink: 0;
  transition: opacity 0.15s;
}
.thread-item:hover .thread-delete { opacity: 1; }
.thread-item.confirm-delete .thread-delete { opacity: 0.4; }
.thread-delete:hover { color: var(--danger); }

.thread-delete-confirm {
  display: none; font-size: 11px; font-weight: 600;
  color: var(--on-danger); background: var(--danger);
  padding: 3px 8px; border-radius: 6px; flex-shrink: 0;
  white-space: nowrap;
}
.thread-item.confirm-delete .thread-delete-confirm { display: block; }

.new-thread-btn {
  margin: 8px 10px 12px;
  padding: 11px 16px;
  background: var(--bg3);
  border: 1px dashed var(--accent-20);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  color: var(--accent);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.new-thread-btn:hover { background: var(--bg4); border-color: var(--accent-40); }
.new-thread-btn:active { opacity: 0.8; }
.new-thread-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Workspace picker ──────────────────────────────────────────────────────── */
/* Dropdown + search instead of one pill per workspace — a pill row works for
   5 workspaces but not the ~50 this is meant to scale to (see agents-ui.md,
   "Modelo real workspace↔agente"). Same visual language as .model-picker. */
#workspace-selector-bar {
  padding: 8px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
#workspace-selector-bar:empty { display: none; padding: 0; border-bottom: none; }

.ws-picker { position: relative; }

.ws-picker-trigger {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 6px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  color: var(--text); cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.ws-picker-trigger:hover { background: var(--bg3); border-color: var(--accent-40); }
.ws-picker-trigger-emoji { font-size: 14px; }
.ws-picker-trigger-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-picker-trigger .lucide { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; transition: transform 0.15s var(--ease); }
.ws-picker.open .ws-picker-trigger .lucide { transform: rotate(180deg); }

.ws-picker-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  min-width: 220px;
  background: var(--surface-dropdown); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-popup);
  padding: 6px; z-index: 200;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.ws-picker.open .ws-picker-dropdown {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

.ws-picker-search {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; margin-bottom: 4px;
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ws-picker-search .lucide { width: 13px; height: 13px; color: var(--text-dim); flex-shrink: 0; }
.ws-picker-search input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  font-size: 12px; color: var(--text);
}
.ws-picker-search input::placeholder { color: var(--text-dim); }

.ws-picker-list { max-height: 320px; overflow-y: auto; }
.ws-picker-empty { padding: 10px 8px; font-size: 12px; color: var(--text-dim); text-align: center; }

.workspace-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--text-dim); cursor: pointer;
  transition: background 0.12s var(--ease);
}
.workspace-pill:hover { background: var(--border); }
.workspace-pill.active {
  background: var(--accent-12);
  color: var(--accent);
}

#agent-selector-bar {
  display: flex; gap: 6px; padding: 8px 10px 4px;
  flex-wrap: wrap; flex-shrink: 0;
}
.agent-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500;
  color: var(--text-dim); cursor: pointer;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.agent-pill:hover { background: var(--bg4); color: var(--text); }
.agent-pill.active {
  background: var(--accent-10);
  border-color: var(--accent-40);
  color: var(--accent);
}

/* ── Admin Panel ────────────────────────────────────────────────────────────── */
#admin-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 580px; max-width: 100vw;
  background: var(--surface-heavy);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 200;
  box-shadow: var(--shadow-float);
  transition: transform 0.25s var(--ease);
}
#admin-panel.collapsed { transform: translateX(100%); }

.admin-tabs {
  display: flex; gap: 2px; padding: 8px 12px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.admin-tab {
  padding: 7px 14px; font-size: 12px; font-weight: 600;
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); border-radius: 6px 6px 0 0;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.admin-tab:hover { color: var(--text); background: var(--bg3); }
.admin-tab.active { color: var(--accent); background: var(--accent-6); border-bottom: 2px solid var(--accent); }

#admin-body { flex: 1; overflow-y: auto; padding: 12px; }

.admin-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-hint    { font-size: 12px; color: var(--text-dim); }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-dim); padding: 6px 8px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .05em; }
.admin-table td { padding: 9px 8px; border-bottom: 1px solid var(--glass-bg); vertical-align: top; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--bg3); }

.admin-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--bg3); color: var(--text); transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease); white-space: nowrap; }
.admin-btn:hover { background: var(--bg4); }
.admin-btn.primary { background: var(--accent-12); border-color: var(--accent-40); color: var(--accent); }
.admin-btn.primary:hover { background: var(--accent-20); }
.admin-btn.danger { border-color: var(--danger-40); color: var(--danger); }
.admin-btn.danger:hover { background: var(--danger-10); }
.admin-btn.small { padding: 3px 8px; }
.admin-btn i { width: 13px; height: 13px; }

.admin-badge { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--bg3); color: var(--text-dim); }
.admin-badge.admin { background: var(--accent-10); color: var(--accent); }
.admin-badge.on    { background: var(--success-12); color: var(--success); }
.admin-badge.off   { background: var(--bg3); color: var(--text-dim); }

.admin-key { font-size: 11px; color: var(--text-dim); }
.admin-loading { padding: 24px; text-align: center; color: var(--text-dim); }
.admin-error   { padding: 16px; color: var(--danger); font-size: 13px; }
/* Advertencia dentro de una celda de tabla (ej. "en modo cuenta propia sin
   cuenta conectada") — misma señal que .admin-error pero sin el padding de
   bloque, para que no rompa la fila. */
.admin-error-inline { color: var(--danger); font-size: 11px; }

/* ── Platform page (platform.html) — standalone back office, full page (not a
   slide-in drawer like #admin-panel), so it needs its own height/scroll setup. */
#platform-app {
  display: flex; flex-direction: column;
  height: 100vh;   /* fallback para navegadores sin soporte de dvh */
  height: 100dvh;  /* iOS: sigue la barra de Safari al aparecer/ocultarse */
}
#platform-tabs { overflow-x: auto; flex-wrap: nowrap; }
#platform-body { flex: 1; overflow-y: auto; padding: 14px; }
.pf-section-title { font-size: 13px; font-weight: 600; color: var(--text-dim); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.pf-section-title:first-child { margin-top: 0; }

/* Filas de "Por origen" (Uso) -- flex en vez de tabla a propósito: el
   acordeón Automatización → Planes/Sin plan → Tareas necesita anidar niveles
   con texto de largo variable (títulos), y una tabla ahí fuerza scroll
   horizontal en mobile. Filas apiladas (label arriba, meta abajo) son táctiles
   y no lo necesitan -- pedido explícito de Nacho, uso 90% mobile. */
.pf-list { display: flex; flex-direction: column; }
.pf-list-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 8px; border-bottom: 1px solid var(--glass-bg);
}
.pf-list-row:last-child { border-bottom: none; }
.pf-list-main { font-size: 13px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 4px; }
.pf-list-main i { width: 14px; height: 14px; flex-shrink: 0; }
.pf-list-meta { font-size: 12px; color: var(--text-dim); }
.pf-clickable { cursor: pointer; }
.pf-clickable:hover { background: var(--bg3); }
.pf-clickable:active { background: var(--bg4); }
.pf-list-detail--l2 { padding-left: 14px; border-bottom: 1px solid var(--glass-bg); }
.pf-list-detail--l3 { padding-left: 14px; }
.pf-list-row--plan { padding-left: 14px; }
.pf-list-row--task { padding-left: 28px; }
.pf-log-box {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow-y: auto; color: var(--text-dim);
}
.pf-key-reveal {
  display: flex; align-items: center; gap: 8px; background: var(--success-12);
  border: 1px solid var(--success-40); border-radius: 8px;
  padding: 10px 12px; font-size: 12px; color: var(--text);
}
.pf-key-reveal code { font-size: 12px; color: var(--success); word-break: break-all; }

/* ── Gráfico de evolución (panel Uso) ────────────────────────────────────────
   Paleta categórica del gráfico. NO reutiliza --success/--warning/--danger: esos
   son colores de estado (bien/ojo/error) y significan algo; acá el color es solo
   identidad de una serie (un workspace, un usuario, un plan). Los cinco pasos
   están validados con el validador de contraste/daltonismo contra la superficie
   de cada tema (banda de luminosidad, piso de croma, separación CVD de pares
   adyacentes ≥8 ΔE, contraste ≥3:1). El tema claro tiene sus PROPIOS pasos, más
   oscuros -- no es el mismo hex sobre otro fondo. Si agregás una serie, no
   inventes un 6º color: --chart-other es el gris de "Otros" y ahí se pliega la
   cola (ver pfChartSeries en platform-app.js). */
:root {
  --chart-1: #0aa2c9;
  --chart-2: #7c5cff;
  --chart-3: #00a37a;
  --chart-4: #c2760a;
  --chart-5: #d6428f;
  --chart-other: #7a8a9a;
  /* Superficie OPACA del gráfico. Tiene que ser opaca (no --bg3, que es un
     rgba sobre el fondo): es el color con el que se dibuja el corte de 2px
     entre bandas apiladas, y un semitransparente ahí deja ver la banda de
     abajo en vez de separarlas. Es también la superficie contra la que se
     validó la paleta de arriba. */
  --chart-surface: #141a20;
}
[data-theme="light"] {
  --chart-1: #0a7f9e;
  --chart-2: #6d4de0;
  --chart-3: #0f7d5e;
  --chart-4: #9a5a00;
  --chart-5: #c02d6e;
  --chart-other: #5a6e85;
  --chart-surface: #e4e8eb;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]),
  [data-theme="auto"] {
    --chart-1: #0a7f9e;
    --chart-2: #6d4de0;
    --chart-3: #0f7d5e;
    --chart-4: #9a5a00;
    --chart-5: #c02d6e;
    --chart-other: #5a6e85;
    --chart-surface: #e4e8eb;
  }
}

.pf-chart-card {
  background: var(--chart-surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px; margin-bottom: 16px;
}
.pf-chart-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pf-chart-title { font-size: 13px; font-weight: 600; color: var(--text); }
.pf-chart-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
/* flex-shrink:0 -- sin esto los botones (white-space:nowrap) no achican, la caja
   sí, y en mobile el control queda cortado por el borde en vez de bajar de línea. */
.pf-seg { display: flex; gap: 2px; background: var(--bg2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; flex-shrink: 0; }
.pf-seg button {
  border: none; background: none; color: var(--text-dim); cursor: pointer;
  font-size: 11px; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.pf-seg button:hover { color: var(--text); }
.pf-seg button.active { background: var(--accent-14); color: var(--accent); font-weight: 600; }
/* El alto lo fija el contenido (plot + banda del eje X), no un height fijo: un
   contenedor recortado deja el eje afuera y aparece un scroll interno de 12px. */
.pf-chart-plot { position: relative; width: 100%; }
.pf-chart-plot svg { display: block; width: 100%; }
/* Refetch sin salto de layout: se mantiene el render anterior atenuado. */
.pf-chart-plot.loading { opacity: .45; transition: opacity .15s; }
.pf-chart-empty { padding: 28px 8px; text-align: center; color: var(--text-dim); font-size: 12px; }
.pf-chart-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--surface-popup, var(--bg)); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; box-shadow: var(--shadow-popup);
  font-size: 11px; color: var(--text-dim); min-width: 150px;
}
.pf-chart-tip-head { font-size: 11px; color: var(--text-dim); margin-bottom: 5px; }
.pf-chart-tip-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.pf-chart-tip-key { width: 10px; height: 2px; border-radius: 1px; flex-shrink: 0; }
/* El valor manda y el nombre acompaña: acá el lector ya sabe qué serie mira. */
.pf-chart-tip-val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; }
.pf-chart-tip-total { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 5px; }
.pf-chart-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pf-chart-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); }
.pf-chart-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pf-chart-tablebtn {
  margin-top: 10px; background: none; border: none; padding: 0;
  color: var(--text-dim); font-size: 11px; cursor: pointer; text-decoration: underline;
}
.pf-chart-tablebtn:hover { color: var(--accent); }
.pf-chart-tablewrap { max-height: 260px; overflow: auto; margin-top: 8px; }

@media (max-width: 768px) {
  .admin-table { display: block; overflow-x: auto; white-space: nowrap; }
  .admin-form, .admin-toolbar { max-width: 100%; }
  #platform-tabs { padding: 6px 8px 0; }
  .admin-tab { padding: 7px 10px; font-size: 11px; }
}

.admin-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.admin-input { padding: 8px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; outline: none; }
.admin-input:focus { border-color: var(--accent-50); }

.admin-features-list { display: flex; flex-direction: column; gap: 2px; }
.admin-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--glass-bg); }
.admin-toggle-row input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }

/* ── Workspace wizard overlay ───────────────────────────────────────────────── */
#workspace-wizard-overlay {
  position: fixed; inset: 0;
  background: var(--black-60);
  display: none; align-items: center; justify-content: center;
  z-index: 300;
}
.workspace-wizard {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px;
  width: 420px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 16px;
}
.wizard-header { display: flex; align-items: center; justify-content: space-between; }
.wizard-header span { font-size: 15px; font-weight: 600; }
.wizard-step-label { font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.wizard-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.wizard-step { display: flex; flex-direction: column; gap: 10px; }
.wizard-input { padding: 9px 13px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; outline: none; }
.wizard-input:focus { border-color: var(--accent-50); }
.wizard-footer { display: flex; gap: 8px; justify-content: flex-end; }
.wizard-btn { padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--bg3); color: var(--text); }
.wizard-btn.primary { background: var(--accent-12); border-color: var(--accent-40); color: var(--accent); }
.wizard-btn.primary:hover { background: var(--accent-20); }
.wizard-btn.secondary { color: var(--text-dim); }
.wizard-error { font-size: 12px; color: var(--danger); padding: 8px 12px; background: var(--danger-8); border-radius: 6px; }
.wizard-result { font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.wizard-result-row { padding: 6px 0; border-bottom: 1px solid var(--bg3); }
.wizard-result code { font-size: 11px; background: var(--bg3); padding: 2px 6px; border-radius: 4px; }

/* ── Chat area ─────────────────────────────────────────────────────────────── */
#chat-area {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  min-width: 0;
}

#messages {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 10px;
}

/* Chat cross-fade — whatever lands in #messages (skeleton, real history,
   empty state) eases in instead of popping, on every thread switch. */
.chat-fade-in { animation: chat-fade-in 0.22s var(--ease); }
@keyframes chat-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Skeleton — shaped like the message bubbles it's about to become, so it
   previews layout instead of just signaling "please wait". */
.chat-skeleton {
  flex: 1; display: flex; flex-direction: column;
  gap: 14px; padding: 20px 16px;
}
.skel-row { display: flex; }
.skel-row.user { justify-content: flex-end; }
.skel-bubble {
  height: 38px;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.chat-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-dim); text-align: center; gap: 10px;
}
.chat-empty .empty-icon { font-size: 36px; color: var(--text-dim); opacity: 0.5; }
.chat-empty p { font-size: 13px; opacity: 0.7; }

/* Message bubbles */
.msg {
  display: flex; flex-direction: column;
  max-width: min(680px, 92%);
  min-width: 0;
}
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.assistant {
  align-self: stretch;
  align-items: flex-start;
  max-width: min(680px, 100%);
}
.msg.system {
  align-self: center;
  align-items: center;
  max-width: min(560px, 92%);
}
.msg.system .msg-bubble {
  background: var(--violet-6);
  border: 1px solid var(--violet-18);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-dim);
  padding: 5px 12px;
  text-align: center;
}
/* Aviso del sistema largo (resumen de tarea): plegado por defecto. */
.msg.system-notice details.msg-bubble { text-align: left; cursor: pointer; }
.msg.system-notice summary { list-style: none; text-align: center; }
.msg.system-notice summary::-webkit-details-marker { display: none; }
.msg.system-notice details[open] summary { display: none; }
.msg.system-notice .notice-body { white-space: pre-wrap; word-break: break-word; }

.msg-bubble {
  padding: 10px 14px;
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}

.msg.user .msg-bubble {
  background: var(--accent-12);
  border: 1px solid var(--accent-18);
  border-radius: 18px 4px 18px 18px;
  max-width: 82%;
  box-shadow: 0 2px 16px -8px var(--accent-25);
}
.msg.assistant .msg-bubble {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px 18px 18px 18px;
}

.msg-bubble.streaming {
  opacity: .88;
  border-left: 2px solid var(--accent-25);
  padding-left: 10px;
  animation: streaming-glow 2.5s ease-in-out infinite;
}
.msg-bubble.streaming::after {
  content: '▋';
  animation: blink .7s step-start infinite;
  color: var(--accent);
  opacity: 0.7;
}
@keyframes blink { 0%, 100% { opacity: 0.8; } 50% { opacity: 0; } }
@keyframes streaming-glow {
  0%, 100% { border-left-color: var(--accent-15); }
  50%       { border-left-color: var(--accent-45); }
}

.msg-footer {
  display: flex; align-items: center; gap: 8px;
  margin-top: 5px; padding: 0 4px;
}
.msg-time { font-size: 11px; color: var(--text-dim); }
.msg-cost { font-size: 11px; color: var(--text-dim); }
.date-divider {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 8px 6px;
}
.date-divider::before, .date-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.date-divider span {
  font-size: 11px; color: var(--text-dim); font-weight: 500;
  white-space: nowrap; letter-spacing: 0.4px; text-transform: uppercase;
}
.msg-play {
  font-size: 14px; color: var(--text-dim);
  padding: 2px 6px; border-radius: 6px;
  transition: background 0.15s var(--ease);
  display: flex; align-items: center;
}
.msg-play:hover { background: var(--bg3); color: var(--accent); }
.msg-play.playing { color: var(--accent); }
.msg-copy {
  font-size: 14px; color: var(--text-dim);
  padding: 2px 6px; border-radius: 6px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
  display: flex; align-items: center;
  opacity: 0;
}
.msg:hover .msg-copy { opacity: 1; }
.msg-copy:hover { background: var(--bg3); color: var(--accent); }
@media (hover: none) {
  .msg-copy { opacity: 1; }
}
.msg-regen {
  font-size: 14px; color: var(--text-dim);
  padding: 2px 6px; border-radius: 6px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.2s var(--ease);
  display: flex; align-items: center;
  opacity: 0;
}
.msg:hover .msg-regen { opacity: 1; }
.msg-regen:hover { background: var(--bg3); color: var(--accent); }
.msg-regen:active { transform: rotate(180deg); }
@media (hover: none) { .msg-regen { opacity: 1; } }
.msg-feedback {
  display: flex; align-items: center; gap: 1px;
  opacity: 0; transition: opacity .15s; margin-left: 2px;
}
.msg:hover .msg-feedback { opacity: 1; }
.msg-react {
  font-size: 13px; color: var(--text-dim);
  padding: 2px 5px; border-radius: 6px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
  display: flex; align-items: center;
}
.msg-react:hover { background: var(--bg3); color: var(--accent); }
.msg-react.active { color: var(--accent); opacity: 1 !important; }
@media (hover: none) { .msg-feedback { opacity: 1; } }

/* Inline markdown */
.msg-bubble code {
  background: var(--code-bg); padding: 2px 6px; border-radius: 5px;
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px;
  word-break: break-all;
  overflow-wrap: break-word;
}
.msg-bubble pre {
  background: var(--code-bg); padding: 12px 14px; border-radius: 10px;
  overflow-x: auto; max-width: 100%; word-break: normal; white-space: pre; margin: 8px 0;
  border: 1px solid var(--border);
}
.msg-bubble pre code { background: none; padding: 0; }
.msg-bubble strong { font-weight: 600; color: var(--text-white); }
.msg-bubble em { color: var(--text-em); }
.msg-bubble a { color: var(--accent); }

/* Block markdown — headings, lists, tables */
.msg-bubble .md-h1, .msg-bubble .md-h2, .msg-bubble .md-h3,
.msg-bubble .md-h4, .msg-bubble .md-h5, .msg-bubble .md-h6 {
  font-weight: 600; color: var(--text-white); line-height: 1.3; margin: 10px 0 4px;
}
.msg-bubble .md-h1 { font-size: 1.25em; }
.msg-bubble .md-h2 { font-size: 1.1em; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.msg-bubble .md-h3 { font-size: 1em; }
.msg-bubble .md-h4, .msg-bubble .md-h5, .msg-bubble .md-h6 { font-size: .95em; color: var(--text-dim); }

.msg-bubble .md-hr {
  border: none; border-top: 1px solid var(--border); margin: 10px 0;
}

.msg-bubble .md-ul, .msg-bubble .md-ol {
  padding-left: 20px; margin: 4px 0 8px;
}
.msg-bubble .md-ul li, .msg-bubble .md-ol li {
  margin-bottom: 3px; line-height: 1.55;
}
.msg-bubble .md-ul { list-style-type: disc; }
.msg-bubble .md-ol { list-style-type: decimal; }

.msg-bubble .md-bq {
  border-left: 3px solid var(--accent2); padding: 4px 10px;
  margin: 6px 0; color: var(--text-dim); font-style: italic;
}

.msg-bubble .md-table-wrap {
  overflow-x: auto; margin: 8px 0; border-radius: var(--radius-sm);
}
.msg-bubble .md-table {
  border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap;
}
.msg-bubble .md-table th,
.msg-bubble .md-table td {
  padding: 7px 12px; border: 1px solid var(--border); text-align: left;
}
.msg-bubble .md-table th {
  background: var(--bg3); font-weight: 600; color: var(--accent);
}
.msg-bubble .md-table tr:nth-child(even) td { background: var(--black-12); }
.msg-bubble .md-table tr:hover td { background: var(--accent-5); }

/* Thinking bubble — reuses live-activity-pill animation */
.thinking-bubble { } /* pill renders inside, no extra styles needed */

/* System event chip — shown only to admins for server restart messages */
.system-event-chip { margin: 4px 12px; border-radius: 6px; font-size: 11px; overflow: hidden; border: 1px solid var(--amber-30); background: var(--amber-7); }
.system-event-chip summary { display: flex; align-items: center; gap: 6px; padding: 4px 10px; cursor: pointer; list-style: none; color: var(--amber-alt); user-select: none; }
.system-event-chip summary::-webkit-details-marker { display: none; }
.system-event-chip summary svg { width:12px; height:12px; flex-shrink:0; }
.system-event-chip .chip-title { opacity: 0.85; }
.system-event-chip[open] summary { border-bottom: 1px solid var(--amber-20); }
.system-event-chip .chip-body { padding: 8px 12px; font-family: monospace; font-size: 11px; color: var(--text-dim); white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; }

/* Activity group — groups all tool calls from a response into one collapsible block */
.activity-group {
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 12px;
}
.activity-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  background: var(--white-2);
  user-select: none;
  transition: background 0.15s var(--ease);
}
.activity-header:hover { background: var(--bg3); }
.activity-icon { font-size: 13px; display: flex; align-items: center; color: var(--accent); opacity: 0.7; }
.activity-label { font-weight: 500; color: var(--text-dim); font-size: 12px; }
.activity-tools-preview {
  flex: 1; font-size: 11px; color: var(--text-dim); opacity: 0.5;
  white-space: normal; word-break: break-word;
}
.activity-group.open .activity-tools-preview { display: none; }
.activity-chevron { margin-left: auto; color: var(--text-dim); transition: transform 0.2s var(--ease); font-size: 13px; flex-shrink: 0; }
.activity-group.open .activity-chevron { transform: rotate(90deg); }
.activity-body { display: none; padding: 4px 8px 8px; background: var(--black-12); }
.activity-group.open .activity-body { display: block; }
.activity-body .tool-card { margin-top: 4px; }
.activity-body .tool-card:first-child { margin-top: 0; }

/* Hide <resumen> tag during streaming — server strips it before persisting */
resumen { display: none; }

/* Live activity pill — shown while agent is working (non-dev mode) */
.live-activity-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-85);
  background: linear-gradient(90deg,
    var(--accent2-7) 0%,
    var(--accent-13) 50%,
    var(--accent2-7) 100%);
  background-size: 200% 100%;
  border: 1px solid var(--accent-14);
  animation: lap-breathe 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.live-activity-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-7) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: lap-sweep 2.2s linear infinite;
  pointer-events: none;
}
.lap-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--accent) 55%, transparent 100%);
  flex-shrink: 0;
  animation: lap-pulse 1.4s ease-in-out infinite;
  position: relative; z-index: 1;
}
.lap-dot::before {
  content: '';
  position: absolute; inset: -4px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-40) 0%, transparent 72%);
  filter: blur(1px);
  animation: orb-halo-thinking 1.4s ease-in-out infinite;
  pointer-events: none;
}
.lap-text { position: relative; z-index: 1; letter-spacing: 0.01em; }

@keyframes lap-breathe {
  0%, 100% { background-position: 0% 0%; }
  50%       { background-position: 100% 0%; }
}
@keyframes lap-sweep {
  from { background-position: -100% 0; }
  to   { background-position: 300% 0; }
}
@keyframes lap-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.75); }
  50%       { opacity: 1;    transform: scale(1); }
}

/* Tool summary pill (shown when agent finishes, non-dev mode) */
.tool-summary-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg2);
  opacity: 0.75;
}
.tool-summary-line .tool-summary-icon { display: flex; align-items: center; color: var(--accent); opacity: 0.6; }
.tool-summary-line .tool-summary-icon svg { width: 11px; height: 11px; }

.tool-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-dim);
  background: var(--white-2);
}
.tool-summary-icon { display: flex; align-items: center; color: var(--accent); opacity: 0.7; }
.tool-summary-icon svg { width: 12px; height: 12px; }

/* Tool cards */
.tool-card {
  margin-top: 6px;
  background: var(--white-2);
  border: 1px solid var(--accent-14);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 12px;
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--white-12);
}
.tool-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  user-select: none;
  transition: background 0.15s var(--ease);
}
.tool-header:hover { background: var(--bg3); }
.tool-icon { font-size: 14px; display: flex; align-items: center; color: var(--text-dim); }
.tool-name { font-weight: 500; color: var(--text-dim); font-size: 12px; }
.tool-preview {
  flex: 1; font-size: 11px; color: var(--text-dim);
  white-space: normal; word-break: break-word;
  opacity: 0.6;
}
.tool-card.open .tool-preview { display: none; }
.tool-chevron { margin-left: auto; color: var(--text-dim); transition: transform 0.2s var(--ease); font-size: 13px; }
.tool-card.open .tool-chevron { transform: rotate(90deg); }
/* Materialize instead of a flat height toggle — the panel deploys like a HUD
   panel, not a plain accordion. grid-rows trick handles auto-height cleanly. */
.tool-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
  background: var(--black-15);
}
.tool-card.open .tool-body { grid-template-rows: 1fr; }
.tool-body-inner {
  overflow: hidden;
  opacity: 0;
  padding: 0 12px;
  transform: translateY(-4px) scale(0.98);
  filter: blur(3px);
  transition: opacity 0.22s var(--ease), transform 0.24s var(--ease),
              filter 0.22s var(--ease), padding 0.24s var(--ease);
}
.tool-card.open .tool-body-inner {
  opacity: 1; transform: translateY(0) scale(1); filter: blur(0);
  padding: 8px 12px 10px;
}
.tool-section { margin-bottom: 8px; }
.tool-label { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; font-weight: 600; }
.tool-content {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px; white-space: pre-wrap; word-break: break-all;
  background: var(--black-25); padding: 8px 10px; border-radius: 8px;
  max-height: 320px; overflow-y: auto; color: var(--text-code);
  border: 1px solid var(--border);
}
.tool-content.output { color: var(--text); }

/* Fase 3 Kurogo — "backstage": al revelarse, TODA la tool-card (header + body)
   fuerza paleta Ink/Graphite con acento Eclipse, sin importar [data-theme]/
   localStorage. Las vars se redeclaran en .tool-card.open (no solo .tool-body)
   porque .tool-header es hermano de .tool-body, no descendiente — si el
   override vive solo en .tool-body, el header se queda con el --white-2
   ambiente y en tema claro queda una tira crema pegada a un panel negro.
   El glow usa filter: drop-shadow, no box-shadow — .tool-card tiene
   overflow:hidden (para el radius) y recorta cualquier box-shadow externo
   declarado en sí mismo o en un hijo; drop-shadow no se ve afectado por eso. */
.tool-card.open {
  --bg:        #0B0B0B;
  --text:      #F8F3EA;
  --text-dim:  rgba(248, 243, 234, 0.55);
  --text-code: #a8e6cf;
  --border:    rgba(248, 243, 234, 0.14);
  --black-25:  rgba(255, 255, 255, 0.06);
  --accent:    #D9A85F;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(217, 168, 95, 0.16);
  filter: drop-shadow(0 0 10px rgba(217, 168, 95, 0.35));
}
.tool-card.open .tool-body .tool-content {
  background: var(--black-25);
  color: var(--text-code);
  border-color: var(--border);
}
.tool-card.open .tool-body .tool-content.output {
  color: var(--text);
}

/* ── Input bar ─────────────────────────────────────────────────────────────── */
#input-area {
  border-top: 1px solid var(--border);
  background: var(--surface-input);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#input-area.drag-over { outline: 2px dashed var(--accent); outline-offset: -4px; }

#input-bar {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 14px 14px;
  background: transparent;
}

.mic-btn { flex-shrink: 0; }
.mic-btn.listening { color: var(--danger); background: var(--danger-12); animation: pulse 1s infinite; }
.mic-btn.cleaning  { color: var(--accent); animation: pulse 0.6s infinite; }

.topbar-autoplay-pill {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  border: none; background: transparent;
  color: var(--text-muted); opacity: 0.35;
  cursor: pointer; flex-shrink: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.topbar-autoplay-pill:hover { opacity: 0.7; }
.topbar-autoplay-pill.active {
  background: var(--accent-15);
  color: var(--accent2);
  opacity: 1;
}
.topbar-autoplay-pill svg { width: 16px; height: 16px; }

/* Processing status bar */
#stt-status {
  display: none;
  align-items: center; gap: 8px;
  padding: 6px 16px 0;
  font-size: 12px; color: var(--text-dim);
}
#stt-status.visible { display: flex; }
.stt-status-dots span {
  display: inline-block; width: 4px; height: 4px;
  border-radius: 50%; background: var(--accent);
  animation: stt-dot 1.2s infinite;
}
.stt-status-dots span:nth-child(2) { animation-delay: .2s; }
.stt-status-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes stt-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

#msg-input {
  flex: 1; resize: none; line-height: 1.55;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  max-height: 160px; overflow-y: auto;
  font-size: 14px;
  transition: border-color 0.2s var(--ease);
}
#msg-input:focus { border-color: var(--accent-35); }
#msg-input::placeholder { color: var(--text-dim); }

.send-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--accent); color: var(--bg);
  border-radius: var(--radius-sm); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease);
}
.send-btn:hover { background: var(--accent-hover); }
.send-btn:active { background: var(--accent2); transform: scale(0.94); }
.send-btn:disabled { background: var(--bg3); color: var(--text-dim); cursor: default; }

/* ── Attach button + chips ─────────────────────────────────────────────────── */
#attached-files {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 14px 0;
}

.attach-btn {
  cursor: pointer; flex-shrink: 0;
  font-size: 18px; opacity: 0.5;
  padding: 0 4px;
  transition: opacity 0.15s;
}
.attach-btn:hover { opacity: 1; }

.attach-chip {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px 4px 6px;
  font-size: 12px; max-width: 160px;
}
.attach-thumb {
  width: 28px; height: 28px; object-fit: cover;
  border-radius: 6px; flex-shrink: 0;
}
.attach-icon { font-size: 16px; flex-shrink: 0; display: flex; align-items: center; color: var(--text-dim); }
.attach-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-dim);
}
.attach-remove {
  color: var(--text-dim); font-size: 14px;
  padding: 0 2px; flex-shrink: 0;
}
.attach-remove:hover { color: var(--danger); }

/* ── Mobile bottom nav ─────────────────────────────────────────────────────── */
#mobile-nav {
  display: none;
  height: var(--nav-h);
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface-nav);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--border);
  z-index: 90;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-btn {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  font-size: 11px; font-weight: 500;
  color: var(--text-dim);
  transition: color 0.2s var(--ease);
  min-height: 44px;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
}
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn.active { color: var(--accent); }
.nav-btn:active { opacity: 0.7; }

/* External link nav item */
a.nav-btn { text-decoration: none; }

/* ── Panel overlay (mobile backdrop) ──────────────────────────────────────── */
#panel-overlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--black-50);
  z-index: 49;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#panel-overlay.visible { display: block; }

/* ── Shared panel styles ───────────────────────────────────────────────────── */
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 10px;
  font-weight: 600; font-size: 13px; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.close-panel-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--text-dim);
  background: var(--bg3);
}
.close-panel-btn:hover { background: var(--bg4); color: var(--text); }
.close-panel-btn:active { background: var(--bg4); }

/* ── Files panel ───────────────────────────────────────────────────────────── */
#files-panel {
  width: var(--panel-w);
  background: var(--surface-panel);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  flex-shrink: 0; transition: width 0.2s var(--ease); overflow: hidden;
  box-shadow: var(--shadow-float);
}
#files-panel.collapsed { width: 0; }

#files-body {
  flex: 1; overflow-y: auto; padding: 10px;
}

.file-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  background: var(--bg3);
  transition: background 0.15s var(--ease);
}
.file-item:hover { background: var(--bg4); }

.file-thumb {
  width: 40px; height: 40px;
  object-fit: cover; border-radius: 8px;
  flex-shrink: 0; cursor: pointer;
}

.file-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--text-dim);
}

.file-info {
  flex: 1; min-width: 0;
}

.file-name {
  font-size: 12px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.file-meta {
  font-size: 11px; color: var(--text-dim); margin-top: 2px;
}

.file-actions {
  display: flex; gap: 4px; flex-shrink: 0;
}

.file-actions a.cron-btn {
  text-decoration: none;
  display: flex; align-items: center; justify-content: center;
}

/* ── Load-more sentinel ─────────────────────────────────────────────────────── */
.load-more-sentinel {
  display: flex; justify-content: center;
  padding: 8px 0 4px;
}
.load-more-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 4px 12px;
  pointer-events: none;
}

/* ── File card (inline in chat) ─────────────────────────────────────────────── */
a.file-card {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text); margin: 6px 0;
  max-width: 340px; width: fit-content;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
a.file-card:hover { background: var(--bg4); border-color: var(--accent-30); }
.file-card-icon { color: var(--accent); flex-shrink: 0; display: flex; }
.file-card-name { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.file-card-cta { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--accent); flex-shrink: 0; font-weight: 600; }
.file-card-cta svg { width: 12px; height: 12px; }

/* Image preview variant */
/* block, NO inline-block: como inline compartía línea con el párrafo siguiente
   y el texto se acomodaba al costado de la foto (Nacho, 2026-08-05). */
.file-card-image-wrap {
  display: block; width: fit-content; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; max-width: min(380px, 100%);
  background: var(--black-20);
}

/* Galería: todas las fotos del mensaje juntas arriba, con una línea que las
   separa del texto. Varias fotos se acomodan en fila y bajan solas si no entran. */
.md-gallery { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.md-gallery:last-child { margin-bottom: 2px; }
.md-gallery-sep {
  height: 1px; margin: 0 0 10px;
  background: var(--border); opacity: 0.6;
}
.file-card-preview {
  display: block; width: 100%; max-height: 280px;
  object-fit: cover; cursor: zoom-in;
  transition: opacity .15s;
}
.file-card-preview:hover { opacity: .9; }
a.file-card.file-card-under {
  border-radius: 0; border-top: 1px solid var(--border); border-left: none; border-right: none; border-bottom: none;
  margin: 0; max-width: none; width: 100%;
  background: var(--black-20); padding: 8px 12px;
}

.file-card-wrap { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.file-card-wrap a.file-card { margin: 0; flex: 1; min-width: 0; max-width: none; }
.file-card-open-btn {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.file-card-open-btn:hover { background: var(--bg4); color: var(--text); }

/* ── Settings panel ────────────────────────────────────────────────────────── */
#settings-panel {
  width: var(--panel-w);
  background: var(--surface-panel);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  flex-shrink: 0; transition: width 0.2s var(--ease); overflow: hidden;
  box-shadow: var(--shadow-float);
}
#settings-panel.collapsed { width: 0; }

#settings-body {
  flex: 1; overflow-y: auto; padding: 14px 12px;
}

/* Settings toggle row (for switch-style toggles) */
.settings-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
}
.settings-toggle-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text);
}
.settings-toggle-label svg { width: 14px; height: 14px; color: var(--text-dim); }

.settings-switch {
  position: relative; width: 40px; height: 24px; flex-shrink: 0;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
  cursor: pointer;
}
.settings-switch::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-dim); top: 2px; left: 2px;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.settings-switch.active,
.settings-switch.on { background: var(--accent2); border-color: var(--accent-50); }
.settings-switch.active::after,
.settings-switch.on::after { transform: translateX(16px); background: var(--on-accent); }

/* Icon action buttons inside settings */
.settings-btn-icon {
  display: inline-flex; align-items: center; gap: 6px;
}
.settings-btn-icon svg { width: 13px; height: 13px; }
.settings-btn-danger { color: var(--danger) !important; }
.settings-btn-danger:hover { border-color: var(--danger) !important; background: var(--danger-8) !important; }

.settings-section {
  margin-bottom: 24px;
}
.settings-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-dim);
  padding: 0 0 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.settings-section-desc {
  font-size: 12px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5;
}
.settings-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}

/* Cuenta — identidad */
.settings-account-identity {
  display: flex; flex-direction: column; gap: 4px;
}
.settings-account-name { font-size: 14px; font-weight: 600; color: var(--text); }
.settings-account-role { font-size: 11px; color: var(--text-dim); }

/* Fila plegada (Bark/email/dictado): nivel 2-3 de disclosure — nunca credenciales
   en texto plano ni un textarea siempre abierta ocupando espacio permanente. */
.settings-fold { margin-top: 8px; }
.settings-fold-summary {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 0; margin: 0;
  font-size: 12px; color: var(--text-dim);
  cursor: pointer; list-style: none; user-select: none;
}
.settings-fold-summary::-webkit-details-marker { display: none; }
.settings-fold-summary::after { content: '▸'; margin-left: auto; color: var(--text-dim); font-size: 10px; }
.settings-fold[open] .settings-fold-summary::after { content: '▾'; }
.settings-fold > *:not(summary) { margin-top: 4px; }

/* Avanzado — sección entera plegada (nivel 3): dev mode, admin panel, integraciones */
.settings-section-fold { margin-bottom: 24px; }
.settings-section-title-fold {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; list-style: none; user-select: none;
}
.settings-section-title-fold::-webkit-details-marker { display: none; }
.settings-section-title-fold::after { content: '▸'; margin-left: auto; font-size: 10px; }
.settings-section-fold[open] .settings-section-title-fold::after { content: '▾'; }
.settings-section-fold > *:not(summary) { margin-top: 8px; }

/* Logout — separado del resto (Fitts al revés: destructivo, lejos de lo frecuente) */
.settings-section-danger { margin-top: 24px; margin-bottom: 12px; }
.settings-btn-block { display: block; width: 100%; text-align: center; }
.notify-prefs-table {
  display: flex; flex-direction: column; gap: 6px;
}
.notify-prefs-row {
  display: grid; grid-template-columns: 1fr repeat(3, 44px);
  align-items: center; gap: 4px;
}
.notify-prefs-header {
  font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px;
}
.notify-prefs-channel-label {
  text-align: center;
}
.notify-prefs-category-label {
  font-size: 12px; color: var(--text);
}
.notify-prefs-check {
  display: flex; justify-content: center; align-items: center;
}
.notify-prefs-check input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--accent2, var(--accent)); cursor: pointer;
}
.settings-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 12px; font-weight: 500;
  cursor: pointer;
  white-space: nowrap; text-decoration: none; display: inline-block;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.settings-btn:hover { background: var(--bg4); border-color: var(--white-12); }
.settings-btn:active { opacity: .7; }
.settings-textarea {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px; color: var(--text); font-size: 12px;
  resize: vertical; min-height: 60px; line-height: 1.5;
  transition: border-color 0.2s var(--ease);
}
.settings-textarea:focus { border-color: var(--accent-35); }
.settings-hint {
  font-size: 11px; color: var(--text-dim); line-height: 1.4;
}
.settings-status {
  font-size: 12px; margin-top: 6px; min-height: 18px;
}
.settings-status.ok { color: var(--text-ok); }
.settings-status.err { color: var(--text-err); }

/* ── Usage panel ───────────────────────────────────────────────────────────── */
#usage-panel {
  position: absolute; top: var(--topbar-h); right: 0; bottom: 0;
  width: var(--panel-w);
  background: var(--surface-heavy);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: width 0.25s var(--ease), opacity 0.2s;
  overflow: hidden; z-index: 30;
  backdrop-filter: blur(var(--glass-blur));
}
#usage-panel.collapsed { width: 0; opacity: 0; }
#usage-body {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 16px;
}
.usage-notice {
  display: flex; align-items: flex-start; gap: 7px;
  background: var(--accent-7); border: 1px solid var(--accent-18);
  border-radius: var(--radius-sm); padding: 9px 11px;
  font-size: 11px; color: var(--text-dim); line-height: 1.5;
}
.usage-notice strong { color: var(--accent); }
.usage-stats-full {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.usage-stat-box-lg {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 10px; text-align: center;
}
.usage-stat-label { font-size: 10px; color: var(--text-dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.usage-stat-value-lg { font-size: 18px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.usage-chart-section { display: flex; flex-direction: column; gap: 6px; }
.usage-chart-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim); }
.usage-chart-full {
  display: flex; align-items: flex-end; gap: 3px; height: 72px;
  padding: 4px 0;
}
.usage-bar {
  flex: 1; background: var(--accent2); border-radius: 3px 3px 0 0;
  min-height: 2px; transition: background 0.15s; cursor: default;
}
.usage-bar:hover { background: var(--accent); }
.usage-bar.today { background: var(--accent); box-shadow: 0 0 6px var(--accent-40); }
.usage-chart-labels {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--text-dim);
}
.usage-meta-row {
  font-size: 11px; color: var(--text-dim); text-align: center; line-height: 1.5;
}
.usage-external-link {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  font-size: 11px; color: var(--text-dim); text-decoration: none;
  padding: 10px; border-top: 1px solid var(--border); margin-top: 4px;
  transition: color 0.15s;
}
.usage-external-link:hover { color: var(--accent); }
@media (max-width: 768px) {
  #usage-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); top: auto; bottom: 0; height: 75vh; }
  #usage-panel.collapsed { width: 100%; height: 0; opacity: 0; }
}

/* ── Crons panel ───────────────────────────────────────────────────────────── */
#crons-panel {
  width: var(--panel-w);
  background: var(--surface-panel);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  flex-shrink: 0; transition: width 0.2s var(--ease); overflow: hidden;
  box-shadow: var(--shadow-float);
}
#crons-panel.collapsed { width: 0; }

/* Shared "glass panel" specular treatment — docked side panels (settings/
   crons/usage) get the same edge-lit-glass language instead of three
   near-identical plain bordered boxes. Full-screen sheets (tickets/tareas/
   questions) are a different form factor and keep their own treatment. */
#settings-panel, #crons-panel {
  border-left-color: var(--accent-14);
  position: relative;
}
/* usage-panel is already position:absolute (docked overlay, see above) —
   adding it to the shared "position: relative" rule silently overrides that
   and re-introduces the 2026-07-06 desktop-panel-squeeze bug (an in-flow
   flex item stealing #main's height). Border color applied separately. */
#usage-panel {
  border-left-color: var(--accent-14);
}
#settings-panel::before, #crons-panel::before, #usage-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 140px;
  background: linear-gradient(180deg, var(--accent-7) 0%, transparent 100%);
  pointer-events: none;
}

/* (legacy class kept for backward compat with JS) */
.crons-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 10px;
  font-weight: 600; font-size: 13px; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.close-crons-btn { display: none; }
@media (max-width: 768px) {
  .close-crons-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--text-dim); }
  .close-crons-btn:active { background: var(--bg4); }
}

#crons-body {
  flex: 1; overflow-y: auto; padding: 10px;
}

.crons-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-dim);
  padding: 6px 4px 5px;
}

.crons-empty {
  font-size: 11px; color: var(--text-dim);
  padding: 6px 4px 10px; font-style: italic;
}

.cron-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  margin-bottom: 8px;
  transition: background 0.15s var(--ease);
}
.cron-item:hover { background: var(--bg4); }

.cron-item-header {
  display: flex; align-items: center; gap: 7px; margin-bottom: 5px;
}

.cron-status-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.cron-status-dot.ok      { background: var(--success); }
.cron-status-dot.running { background: var(--warning); animation: pulse 1s infinite; }
.cron-status-dot.error   { background: var(--danger); }
.cron-status-dot.skipped,
.cron-status-dot.idle    { background: var(--text-dim); opacity: 0.5; }

.cron-name {
  font-size: 12px; font-weight: 600; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cron-badge {
  font-size: 9px; font-weight: 700; padding: 2px 6px;
  border-radius: var(--radius-pill); flex-shrink: 0; letter-spacing: .3px;
}
.cron-badge.openclaw { background: var(--accent-12); color: var(--accent); }
.cron-badge.claude   { background: var(--success-12); color: var(--success); }

.cron-schedule {
  font-size: 11px; color: var(--text-dim);
  font-family: 'SF Mono', 'Fira Code', monospace;
  margin-bottom: 3px;
}

.cron-meta {
  font-size: 11px; color: var(--text-dim); margin-bottom: 9px;
}

.cron-actions { display: flex; gap: 4px; flex-wrap: wrap; }

.cron-btn {
  font-size: 11px; padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg3); color: var(--text-dim);
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500;
}
.cron-btn:hover { background: var(--bg4); border-color: var(--accent-30); color: var(--accent); }
.cron-btn:active { opacity: 0.7; }

.cron-toggle.enabled  { border-color: var(--success-40); color: var(--success); background: var(--success-8); }
.cron-toggle.disabled { border-color: var(--border); color: var(--text-dim); }
.cron-toggle:hover    { opacity: .8; }

.cron-del:hover { border-color: var(--danger-40) !important; color: var(--danger) !important; background: var(--danger-8) !important; }

/* Cron add form */
#cron-form {
  border-top: 1px solid var(--border);
  padding: 12px;
  flex-shrink: 0;
  background: var(--black-20);
}

.cron-form-inner { display: flex; flex-direction: column; gap: 8px; }

.cron-form-inner input,
.cron-form-inner select,
.cron-form-inner textarea {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 12px; color: var(--text); width: 100%;
  transition: border-color 0.2s var(--ease);
}
.cron-form-inner input:focus,
.cron-form-inner textarea:focus { border-color: var(--accent-40); outline: none; }
.cron-form-inner select { cursor: pointer; }
.cron-form-inner textarea { resize: vertical; min-height: 70px; }

.cron-form-actions { display: flex; gap: 6px; }
.cron-form-actions button { flex: 1; padding: 9px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; }
.cron-form-actions button:first-child { background: var(--accent); color: var(--bg); border: none; }
.cron-form-actions button:first-child:hover { background: var(--accent-hover); }
.cron-form-actions button:last-child { background: var(--bg3); border: 1px solid var(--border); color: var(--text-dim); }
.cron-form-actions button:last-child:hover { background: var(--bg4); }

/* ── Scrollbars ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--white-20); }

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #mobile-nav { display: flex; }
  #app { padding-bottom: var(--nav-h); }
  /* Tareas already has an entry point in the bottom nav on mobile — the
     topbar button is the desktop-only entry point (see min-width:769px below). */
  #btn-tareas-toggle { display: none; }

  #sidebar {
    position: fixed;
    left: 0; top: var(--topbar-h);
    bottom: var(--nav-h);
    z-index: 50;
    display: none;
    width: min(320px, 88vw);
    background: var(--surface-mobile-sidebar);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-float);
  }
  #sidebar.mobile-visible { display: flex; }
  #sidebar.mobile-visible #sidebar-header { display: flex; }

  #sidebar-toggle { display: none; }

  .close-sidebar-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    font-size: 16px; color: var(--text-dim);
    background: var(--bg3);
    touch-action: manipulation; flex-shrink: 0;
  }
  .close-sidebar-btn:active { background: var(--bg4); color: var(--text); }

  #files-panel {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--nav-h);
    top: auto;
    height: 75vh;
    width: 100% !important;
    z-index: 50;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow-bottom);
  }
  #files-panel.collapsed { display: none; }

  #crons-panel {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--nav-h);
    top: auto;
    height: 75vh;
    width: 100% !important;
    z-index: 50;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow-bottom);
  }
  #crons-panel.collapsed { display: none; }

  #settings-panel {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--nav-h);
    top: auto;
    height: 80vh;
    width: 100% !important;
    z-index: 50;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow-bottom);
  }
  #settings-panel.collapsed { display: none; }

  #main { flex-direction: column; }
  #chat-area { display: flex; }

  /* Message bubbles — slightly tighter on mobile */
  .msg.user .msg-bubble { max-width: 88%; }
  .msg { max-width: 95%; }

  /* Input area bottom safe area */
  #input-area {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

@media (min-width: 769px) {
  #mobile-nav { display: none; }
  #sidebar { display: flex !important; }
  .close-sidebar-btn { display: none; }
  #panel-overlay { display: none !important; }
}

/* ── PM Feedback Banner ──────────────────────────────────────────────────────── */

#pm-feedback-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--accent-8);
  border-bottom: 1px solid var(--accent-15);
  font-size: 13px;
  color: var(--text);
  animation: slideDown 0.3s ease-out;
  flex-shrink: 0;
}
#pm-feedback-banner span {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-feedback-banner button {
  background: var(--accent-15);
  border: 1px solid var(--accent-25);
  color: var(--accent);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
#pm-feedback-banner #pm-feedback-dismiss {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  padding: 4px 6px;
  flex-shrink: 0;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Inbox / Questions Panel ─────────────────────────────────────────────────── */

#questions-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 0.35s var(--ease);
}
#questions-panel.collapsed {
  transform: translateY(100%);
  pointer-events: none;
}

.questions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.questions-title {
  font-size: 16px;
  font-weight: 600;
}

.questions-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}

/* Question card */
.q-card {
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.q-card-memo {
  border-color: var(--accent-25);
  background: var(--accent-5);
}
.q-card-done {
  opacity: 0;
  transform: translateX(50px);
}

.q-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.q-label-pm { color: var(--warning); }

.q-card-text {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
}

.q-card-input-wrap {
  position: relative;
}
.q-card-input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 48px 13px 15px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  resize: vertical;
  min-height: 80px;
  -webkit-appearance: none;
}
.q-card-input:focus { border-color: var(--accent); outline: none; }

/* Mic button inside the textarea wrapper */
.q-card-mic {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg4);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.q-card-mic svg { width: 16px; height: 16px; }
.q-card-mic:active { background: var(--bg4); opacity: 0.7; }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--danger-50); }
  50%       { box-shadow: 0 0 0 6px var(--danger-0); }
}
.q-card-mic.card-mic-listening {
  background: var(--danger);
  color: var(--on-danger);
  animation: mic-pulse 1.2s ease-in-out infinite;
}

.q-card-actions {
  display: flex;
  gap: 10px;
}
.q-btn-primary {
  flex: 1;
  background: var(--accent2);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
  transition: opacity 0.2s;
}
.q-btn-primary:active { opacity: 0.75; }
.q-btn-primary:disabled { opacity: 0.45; }
.q-btn-ghost {
  padding: 14px 18px;
  color: var(--text-dim);
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 48px;
  white-space: nowrap;
}
.q-btn-ghost:active { background: var(--bg3); }

/* ── Pendientes: chip de origen + card cross-workspace (decision/task/recado) ─
   Reusa el shell de .q-card y el lenguaje de botones de .decision-btn — no es
   un componente nuevo, es la vista que junta ambas familias con el dato nuevo
   (de qué workspace/agente viene). Ver docs/proyecto-pendientes-unificado.md */
.pend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.pend-origin {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.pend-origin-link {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.pend-origin-link:hover { color: var(--text); }
.pend-origin-icon { width: 10px; height: 10px; opacity: 0.7; }
.pend-age {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.7;
}
.pend-vence {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg3);
  border-radius: var(--radius-xs);
  padding: 3px 8px;
}
.pend-vence-icon { width: 11px; height: 11px; }
.pend-vence-overdue {
  color: var(--danger);
  background: var(--danger-10);
}

.pend-card {
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.2s var(--ease);
}
.pend-question {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.pend-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pend-btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  background: var(--accent-15);
  border: 1px solid var(--accent-35);
  color: var(--accent);
  transition: background 0.15s;
}
.pend-btn:hover:not(:disabled) { background: var(--accent-25); }
.pend-btn:active:not(:disabled) { opacity: 0.7; }
.pend-btn-default {
  background: var(--accent-25);
  border-color: var(--accent);
}
.pend-open-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
}
.pend-open-btn:active:not(:disabled) { opacity: 0.7; }
.pend-answered { opacity: 0.6; }
.pend-answered .pend-btn,
.pend-answered .pend-open-btn { cursor: default; }

/* Ghost de "se ejecutó el default" — visible una sola vez, silencioso a
   propósito (no compite con lo que sigue esperando respuesta real). */
.pend-done-ghost {
  background: var(--bg3);
  border: 1px dashed var(--border);
  opacity: 0.75;
}
.pend-done-ghost .pend-question { font-weight: 500; opacity: 0.85; }
.pend-done-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.pend-done-icon { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }

/* Resumen colapsado de ghosts (tsk_4bb59d6f7e6a): una línea + detalle
   plegado, no una card por decisión. */
.pend-ghost-toggle { color: var(--accent); font-weight: 600; }
.pend-ghost-detail {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}
.pend-ghost-summary.pend-ghost-open .pend-ghost-detail { display: flex; }
.pend-done-ghost-item { display: flex; flex-direction: column; gap: 4px; }
.pend-done-ghost-item .pend-question { font-weight: 500; opacity: 0.85; font-size: 14px; }

/* Empty state */
.q-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-dim);
  font-size: 16px;
  opacity: 0.7;
}
.q-empty svg { width: 52px; height: 52px; opacity: 0.4; }

/* ── Nav badge ─────────────────────────────────────────────────────────────── */

.nav-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.nav-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  background: var(--danger);
  color: var(--on-danger);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--danger-50); }
  50%       { transform: scale(1.2); box-shadow: 0 0 0 5px var(--danger-0); }
}
.nav-btn.has-pending .nav-badge {
  animation: badge-pulse 2s ease-in-out infinite;
}
/* Actividad sin exigir acción (Threads, Grupos) — dot neutro, sin número ni pulso. */
.nav-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  pointer-events: none;
}

/* ── Tickets panel ─────────────────────────────────────────────────────────── */

#tickets-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 0.35s var(--ease);
}
#tickets-panel.collapsed {
  transform: translateY(100%);
  pointer-events: none;
}

.tickets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tickets-title { font-size: 16px; font-weight: 600; }
.tickets-header-right { display: flex; align-items: center; gap: 4px; }

.tickets-filter-bar {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.tickets-filter-bar::-webkit-scrollbar { display: none; }

.tkt-filter-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  background: var(--bg3);
  color: var(--text-dim);
  transition: background 0.15s, color 0.15s;
}
.tkt-filter-btn.active,
.tkt-filter-btn:hover { background: var(--accent); color: var(--bg); }

.tickets-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}

/* ── Ticket cards ──────────────────────────────────────────────────────────── */

.tkt-card {
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.15s var(--ease);
}
.tkt-card:hover { background: var(--bg3); }
.tkt-card:active { background: var(--bg4); transform: scale(0.99); }

.tkt-card-header { display: flex; align-items: center; gap: 6px; }

.tkt-priority, .tkt-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}

.tkt-pri-low    { background: var(--success-15); color: var(--success); }
.tkt-pri-med    { background: var(--warning-15);  color: var(--warning); }
.tkt-pri-high   { background: var(--danger-20);    color: var(--danger);  }

.tkt-status-open     { background: var(--gray-20);  color: var(--text-dim); }
.tkt-status-assigned { background: var(--accent-12);  color: var(--accent);   }
.tkt-status-progress { background: var(--accent-22);  color: var(--accent);   }
.tkt-status-review   { background: var(--warning-20);   color: var(--warning);  }
.tkt-status-done     { background: var(--success-15); color: var(--success);  }
.tkt-status-archived  { background: var(--gray-10);  color: var(--text-dim); }
.tkt-status-cancelled  { background: var(--red-8);  color: var(--red-60); }
.tkt-status-evaluating { background: var(--violet-18); color: var(--violet); }
.tkt-status-paused    { background: var(--gray-20);  color: var(--text-dim); }
.tkt-status-queued    { background: var(--blue-10);  color: var(--blue); display: inline-flex; align-items: center; gap: 3px; }

.tkt-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.tkt-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-dim);
}
.tkt-meta-icon { width: 11px; height: 11px; vertical-align: middle; margin-right: 2px; }
.tkt-meta-link { cursor: pointer; display: inline-flex; align-items: center; }
.tkt-meta-link:hover { color: var(--accent); }

.tkt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-dim);
  font-size: 14px;
  padding: 56px 0;
  opacity: 0.7;
}
.tkt-empty svg { width: 48px; height: 48px; opacity: 0.35; }

/* ── Ticket create modal (bottom sheet) ────────────────────────────────────── */

.tkt-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--black-55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity 0.25s var(--ease);
}
.tkt-modal.collapsed { opacity: 0; pointer-events: none; }

.tkt-modal-inner {
  width: 100%;
  max-width: 560px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  transform: translateY(0);
  transition: transform 0.3s var(--ease);
}
.tkt-modal.collapsed .tkt-modal-inner { transform: translateY(100%); }

.tkt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.tkt-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tkt-input, .tkt-textarea, .tkt-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s;
}
.tkt-input:focus, .tkt-textarea:focus, .tkt-select:focus {
  border-color: var(--accent-50);
  outline: none;
}
.tkt-textarea { resize: vertical; min-height: 60px; }
.tkt-select { cursor: pointer; }
.tkt-select option { background: var(--bg); }

.tkt-form-row { display: flex; align-items: center; gap: 8px; }
.tkt-form-row .tkt-select { flex: 1; }
.tkt-attach-row { flex-wrap: wrap; }

.tkt-form-section-label {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 10px 0 -2px;
}
.tkt-form-field { display: flex; flex-direction: column; gap: 3px; }
.tkt-field-label { font-size: 12px; font-weight: 500; color: var(--text); padding: 0 2px; }
.tkt-field-hint { font-size: 11px; color: var(--text-dim); padding: 0 2px; }

/* Contrapartes del plan — chip colapsado + panel de presets */
.plan-cp-block { display: flex; flex-direction: column; gap: 8px; }
.plan-cp-chip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--surface2, rgba(127,127,127,.08));
  border: 1px solid var(--border, rgba(127,127,127,.25));
  color: var(--text-dim); font-size: 12px; font-weight: 500; cursor: pointer;
}
.plan-cp-chip:hover { color: var(--text); border-color: var(--accent-50); }
.plan-cp-chip svg { width: 13px; height: 13px; }
.plan-cp-chip .plan-cp-caret { transition: transform .15s ease; margin-left: 2px; }
.plan-cp-chip.open .plan-cp-caret { transform: rotate(180deg); }
.plan-cp-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--accent2); color: var(--on-accent); font-size: 10px; font-weight: 600;
}
.plan-cp-panel { display: flex; flex-direction: column; gap: 10px; }
.plan-cp-panel.collapsed { display: none; }
.plan-cp-hint { font-size: 11px; color: var(--text-dim); padding: 0 2px; }
.plan-cp-rows { display: flex; flex-direction: column; gap: 10px; }
.plan-cp-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border-radius: 10px;
  background: var(--surface2, rgba(127,127,127,.06));
  border: 1px solid var(--border, rgba(127,127,127,.2));
}
.plan-cp-row-head { display: flex; align-items: center; gap: 6px; }
.plan-cp-row-head .plan-cp-agent { flex: 1; }
.plan-cp-del { flex: 0 0 auto; color: var(--text-dim); }
.plan-cp-del:hover { color: var(--danger, #e5484d); }
.plan-cp-del svg { width: 15px; height: 15px; }
.plan-cp-gate-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-cp-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-cp-preset {
  padding: 5px 10px; border-radius: 8px;
  background: transparent; border: 1px dashed var(--border, rgba(127,127,127,.35));
  color: var(--text-dim); font-size: 12px; cursor: pointer;
}
.plan-cp-preset:hover { color: var(--text); border-color: var(--accent-50); background: var(--surface2, rgba(127,127,127,.06)); }

.tkt-attach-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  flex-shrink: 0;
}
.tkt-attach-label:hover { background: var(--bg4); color: var(--text); }

.tkt-attach-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.tkt-attach-chip {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-dim);
}

.tkt-auto-row { padding: 6px 0; align-items: center; min-height: 44px; cursor: pointer; user-select: none; }
.tkt-switch-label { font-size: 13px; color: var(--text-dim); flex: 1; }

/* Gate de cierre por contraparte (Fase 2) — checkboxes opt-in en el modal de tarea */
#task-required-approvals-row { padding: 6px 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.task-approvals-list { display: flex; flex-wrap: wrap; gap: 6px; }
.task-approval-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: var(--radius-pill, 999px);
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; cursor: pointer; user-select: none;
}
.task-approval-chip:hover { color: var(--text); border-color: var(--accent-50); }
.task-approval-chip input { accent-color: var(--accent, var(--violet-40)); cursor: pointer; margin: 0; }
.task-approval-chip:has(input:checked) { color: var(--text); border-color: var(--accent-50); background: var(--surface2, rgba(127,127,127,.06)); }

.tkt-modal-footer {
  display: flex;
  gap: 8px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}
.tkt-btn-cancel {
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg3);
  color: var(--text-dim);
  border: 1px solid var(--border);
  transition: background 0.15s;
}
.tkt-btn-cancel:hover { background: var(--bg4); }
.tkt-btn-submit {
  flex: 1;
  padding: 11px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  background: var(--accent);
  color: var(--bg);
  transition: background 0.15s;
}
.tkt-btn-submit:hover { background: var(--accent-hover); }
.tkt-btn-submit:disabled { background: var(--bg3); color: var(--text-dim); cursor: default; }

/* Recording active state */
#tkt-mic-btn.active { color: var(--danger); animation: mic-pulse 1s ease-in-out infinite; }
#btn-dispatch-tickets.spinning { animation: spin 1s linear infinite; color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Ticket detail (slide from right) ──────────────────────────────────────── */

.tkt-detail {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.3s var(--ease);
}
.tkt-detail.collapsed { transform: translateX(100%); pointer-events: none; }

.tkt-detail-inner { display: flex; flex-direction: column; height: 100%; }

.tkt-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
.tkt-detail-id-label {
  font-size: 11px;
  color: var(--text-dim);
  font-family: monospace;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkt-detail-header-right { display: flex; gap: 4px; }

.tkt-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}
.tkt-detail-title { font-size: 18px; font-weight: 600; line-height: 1.3; }

.tkt-detail-fields { display: flex; flex-direction: column; gap: 8px; }
.tkt-detail-field { display: flex; align-items: center; gap: 12px; }
.tkt-detail-field label { font-size: 12px; color: var(--text-dim); width: 68px; flex-shrink: 0; }
.tkt-detail-field select {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.tkt-detail-field select option { background: var(--bg); }

.tkt-detail-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
  white-space: pre-wrap;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.tkt-attachments-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tkt-attach-item { border-radius: var(--radius-sm); overflow: hidden; }
.tkt-attach-image img {
  width: 80px; height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: block;
}
.tkt-attach-file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-dim);
}

.tkt-thread-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--accent);
  align-self: flex-start;
  transition: background 0.15s;
}
.tkt-thread-btn:hover { background: var(--bg4); }

.tkt-detail-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }

.tkt-btn-approve {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  background: var(--success-18);
  color: var(--success);
  border: 1px solid var(--success-30);
  transition: background 0.15s;
}
.tkt-btn-approve:hover { background: var(--success-30); }

.tkt-btn-start {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  background: var(--accent-15);
  color: var(--accent);
  border: 1px solid var(--accent-30);
  transition: background 0.15s;
}
.tkt-btn-start:hover { background: var(--accent-25); }

.tkt-btn-archive {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg3);
  color: var(--text-dim);
  border: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
}
.tkt-btn-archive:hover { background: var(--danger-10); color: var(--danger); }

.tkt-comments-section { display: flex; flex-direction: column; gap: 10px; }
.tkt-comments-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tkt-comment {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tkt-comment-user  { border-left: 2px solid var(--accent); }
.tkt-comment-agent { border-left: 2px solid var(--success); }
.tkt-comment-author { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.tkt-comment-text  { font-size: 13px; line-height: 1.45; color: var(--text); white-space: pre-wrap; }
.tkt-comment-time  { font-size: 10px; color: var(--text-dim); opacity: 0.6; }
.tkt-comment-empty { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 4px 0; }

.tkt-comment-form { display: flex; gap: 8px; align-items: flex-end; }
.tkt-comment-form textarea {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  resize: none;
  min-height: 40px;
  max-height: 100px;
}
.tkt-comment-form textarea:focus { border-color: var(--accent-50); outline: none; }
.tkt-comment-form button {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tkt-comment-form button:hover { background: var(--accent-hover); }

/* ── Claude Reauth Modal ──────────────────────────────────────────────────── */
#reauth-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--black-75);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
#reauth-modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  max-width: 420px; width: 90%;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-float);
}
.reauth-icon { color: var(--warning); display: flex; }
.reauth-icon svg { width: 28px; height: 28px; }
.reauth-title { font-size: 18px; font-weight: 600; color: var(--text); }
.reauth-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.reauth-url {
  font-size: 12px; word-break: break-all; color: var(--accent);
  background: var(--bg3); border-radius: var(--radius-sm);
  padding: 8px 12px; text-decoration: none;
  border: 1px solid var(--border);
}
.reauth-url:empty { display: none; }
.reauth-url:hover { text-decoration: underline; }
.reauth-input-row { display: flex; gap: 8px; }
#reauth-token-input {
  flex: 1; padding: 9px 12px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text);
  font-family: monospace;
}
#reauth-token-input:focus { border-color: var(--accent-50); outline: none; }
#reauth-submit-btn {
  padding: 9px 16px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--bg);
  font-size: 13px; font-weight: 600; flex-shrink: 0;
  transition: background 0.15s;
}
#reauth-submit-btn:hover { background: var(--accent-hover); }
#reauth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.reauth-status { font-size: 12px; color: var(--text-dim); min-height: 16px; }
.reauth-status.ok { color: var(--success); }
.reauth-status.err { color: var(--danger); }

/* ── Thread share button & badges ──────────────────────────────────────────── */
.thread-share-btn {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  color: var(--text-dim); opacity: 0; transition: opacity 0.15s, color 0.15s;
  background: transparent;
}
.thread-item:hover .thread-share-btn { opacity: 1; }
.thread-share-btn:hover { color: var(--accent); }
.thread-shared-badge {
  display: inline-block; font-size: 9px; font-weight: 600; padding: 1px 5px;
  border-radius: 8px; background: var(--accent-15); color: var(--accent);
  vertical-align: middle; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.04em;
}
.thread-owner-badge {
  display: inline-block; font-size: 9px; font-weight: 600; padding: 1px 5px;
  border-radius: 8px; background: var(--violet-15); color: var(--violet);
  vertical-align: middle; margin-left: 4px; letter-spacing: 0.02em;
}
.thread-share-count {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--text-dim); margin-left: 4px;
}
.thread-task-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 600; padding: 1px 6px;
  border-radius: 8px; background: var(--amber-12); color: var(--amber);
  cursor: pointer; white-space: nowrap; overflow: hidden; max-width: 120px;
  text-overflow: ellipsis; vertical-align: middle; margin-top: 2px;
}
.thread-task-badge:hover { background: var(--amber-22); }
.thread-context-bar {
  font-size: 11px; color: var(--text-dim); display: flex; align-items: center;
  gap: 6px; padding: 0 12px; height: 22px; border-bottom: 1px solid var(--border);
  background: var(--bg2); overflow: hidden;
}
.thread-context-bar:empty { display: none; }
.thread-context-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent); cursor: pointer; font-weight: 500; white-space: nowrap;
}
.thread-context-link:hover { text-decoration: underline; }
.thread-context-sep { opacity: 0.4; }

/* Link a tsk_xxx dentro de un mensaje (ver renderMarkdown) — chip clickeable con el
   título real de la tarea en vez del id crudo. */
.task-ref-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.92em; font-weight: 500; padding: 1px 7px 1px 5px;
  border-radius: 10px; background: var(--amber-12); color: var(--amber);
  cursor: pointer; white-space: nowrap;
}
.task-ref-link:hover { background: var(--amber-22); text-decoration: underline; }
.task-ref-icon { width: 11px; height: 11px; }

/* ── Modals (change-password, share, team) ──────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--black-60); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
  background: var(--sidebar-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0; width: 100%; max-width: 380px;
  box-shadow: 0 8px 32px var(--black-40); display: flex; flex-direction: column;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 600; color: var(--text);
}
.modal-body {
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.modal-input {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--chat-bg);
  color: var(--text); font-size: 13px; outline: none; box-sizing: border-box;
}
.modal-input:focus { border-color: var(--accent-40); }
.modal-error   { font-size: 12px; color: var(--danger); }
.modal-success { font-size: 12px; color: var(--success); }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.modal-btn {
  padding: 7px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.modal-btn.primary { background: var(--accent); color: var(--bg); }
.modal-btn.primary:hover { background: var(--accent-hover); }
.modal-btn.secondary { background: var(--btn-bg); color: var(--text); }
.modal-btn.secondary:hover { background: var(--btn-hover); }
.modal-btn.small { padding: 6px 10px; font-size: 12px; }

/* ── Foto de perfil del asistente ───────────────────────────────────────────
   .agent-face es la "cara" de un asistente en cualquier tamaño: adentro va su
   foto (<img>) o su emoji (texto). El tamaño entra por --face-size para que un
   solo par de reglas sirva para el pill de 18px y el hero de 84px.            */
.agent-face {
  width: var(--face-size, 28px); height: var(--face-size, 28px);
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(var(--face-size, 28px) * 0.62); line-height: 1;
  background: var(--bg3);
}
.agent-face-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Los avatares que ya existían pasan a poder contener un <img>: sin overflow
   hidden la foto se sale del círculo y queda un cuadrado. */
.group-avatar, .grp-msg-avatar, .mention-item-avatar { overflow: hidden; }

.agent-face-btn {
  width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 50%; overflow: hidden;
  background: var(--bg3); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s var(--ease);
}
.agent-face-btn:hover { border-color: var(--accent-40); transform: scale(1.08); }
.agent-face-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

.avatar-modal-box { max-width: 420px; }
.avatar-hero { display: flex; align-items: center; gap: 14px; }
.avatar-hero .agent-face { border: 1px solid var(--border); }
.avatar-hero-info { min-width: 0; }
.avatar-hero-name { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 3px; }

.avatar-tabs {
  display: flex; gap: 4px; padding: 3px;
  background: var(--bg3); border-radius: var(--radius-sm);
}
.avatar-tab {
  flex: 1; padding: 6px 8px; border: none; background: transparent;
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.avatar-tab:hover { color: var(--text); }
.avatar-tab.active { background: var(--bg); color: var(--accent); }

.avatar-pane { display: flex; flex-direction: column; gap: 10px; }
.avatar-wide-btn { width: 100%; }

.avatar-emoji-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 4px; max-height: 174px; overflow-y: auto;
}
.avatar-emoji-opt {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--bg3); font-size: 19px; line-height: 1; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.avatar-emoji-opt:hover { background: var(--bg4); border-color: var(--accent-40); }

.avatar-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 26px 16px; text-align: center; cursor: pointer;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: var(--bg3); color: var(--text-dim);
  transition: border-color 0.15s, background 0.15s;
}
.avatar-drop:hover, .avatar-drop.dragging { border-color: var(--accent-40); background: var(--bg4); }
.avatar-drop i { width: 22px; height: 22px; }
.avatar-drop-main { font-size: 13px; font-weight: 600; color: var(--text); }
.avatar-drop-sub  { font-size: 11px; }

.admin-agent-cell { display: flex; align-items: center; gap: 8px; }

/* Mobile: el modal ocupa el ancho útil y su cuerpo scrollea solo -- si no, en
   un teléfono el pane "Generar" empuja los botones fuera de la pantalla. */
@media (max-width: 480px) {
  .avatar-modal-box { max-width: 100%; }
  .avatar-modal-box .modal-body { max-height: 66vh; overflow-y: auto; }
  .avatar-hero .agent-face { --face-size: 64px; }
  .avatar-emoji-grid { max-height: 130px; }
}

/* ── Status legend modal ──────────────────────────────────────────────────── */
.tareas-help-btn { color: var(--text-dim); }
.status-legend-modal-box { max-width: 420px; }
.status-legend-body { gap: 0; max-height: 60vh; overflow-y: auto; }
.status-legend-intro {
  font-size: 12px; color: var(--text-dim); line-height: 1.5;
  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.status-legend-row {
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.status-legend-row:last-child { border-bottom: none; }
.status-legend-label { font-size: 13px; font-weight: 600; color: var(--text); }
.status-legend-desc  { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ── Close Plan intent modal ───────────────────────────────────────────────── */
.close-plan-modal-box { max-width: 320px; }
.close-plan-modal-body { gap: 8px; }
.close-plan-choice {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px; border-radius: 8px; cursor: pointer;
  background: var(--btn-bg); border: 1px solid var(--border);
  text-align: left; transition: border-color .15s, background .15s;
}
.close-plan-choice svg { width: 18px; height: 18px; flex-shrink: 0; }
.close-plan-choice-title { font-size: 13px; font-weight: 600; color: var(--text); }
.close-plan-choice-desc  { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.close-plan-choice-complete:hover { border-color: var(--green); background: var(--green-12); }
.close-plan-choice-complete:hover svg { color: var(--green); }
.close-plan-choice-cancel:hover { border-color: var(--danger); background: var(--danger-8); }
.close-plan-choice-cancel:hover svg { color: var(--danger); }

/* ── Share list & team members ──────────────────────────────────────────────── */
.share-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 160px; overflow-y: auto;
}
.share-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  background: var(--chat-bg); font-size: 13px; color: var(--text);
}
.share-item span:first-child { flex: 1; }
.share-remove-btn {
  width: 20px; height: 20px; border-radius: 50%; background: transparent;
  color: var(--text-dim); font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.share-remove-btn:hover { background: var(--danger); color: var(--on-danger); }
.share-add-row { display: flex; gap: 8px; align-items: center; }
.share-add-row .modal-input { flex: 1; margin: 0; }
.team-role-badge {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.team-role-badge.owner  { background: var(--orange-15); color: var(--orange); }
.team-role-badge.member { background: var(--accent-12); color: var(--accent); }
.team-role-badge.admin  { background: var(--danger-12);  color: var(--danger); }

/* ── Integraciones (catálogo Composio) ────────────────────────────────────────
   Card por toolkit con 4 estados (no-conectada/conectando/conectada/error) y
   2 niveles de disclosure adentro (toggles por agente, tools plegado). Ver
   CRITIQUE-LOG.md 2026-09-01. */
.integrations-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }
.skeleton-block {
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
}
.integration-row { border-radius: var(--radius-sm); background: var(--chat-bg); overflow: hidden; }
.integration-row-main { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.integration-icon {
  width: 32px; height: 32px; border-radius: var(--radius-xs, 6px); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--bg);
}
.integration-icon svg { width: 16px; height: 16px; color: var(--text-dim); }
.integration-icon.error { background: var(--danger-12); }
.integration-icon.error svg { color: var(--danger); }
.integration-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.integration-name { font-size: 13px; font-weight: 500; color: var(--text); }
.integration-sub { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.integration-sub.error { color: var(--danger); display: flex; align-items: center; gap: 4px; }
.integration-sub.error svg { width: 11px; height: 11px; flex-shrink: 0; }
.integration-connecting { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.integration-expand-btn {
  width: 26px; height: 26px; border-radius: 50%; color: var(--text-dim); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s var(--ease), background 0.12s;
}
.integration-expand-btn svg { width: 15px; height: 15px; }
.integration-expand-btn:hover { background: var(--btn-hover); }
.integration-expand-btn.open { transform: rotate(180deg); }
.integration-detail { display: none; padding: 2px 10px 10px 52px; border-top: 1px solid var(--border); }
.integration-detail.open { display: block; }
.integration-agents-label { font-size: 11px; color: var(--text-dim); margin: 8px 0 2px; }
.integration-agent-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; gap: 8px; }
.integration-agent-row span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.integration-tools-fold { margin-top: 8px; }
.integration-tools-fold summary { font-size: 11px; color: var(--text-dim); cursor: pointer; list-style: none; }
.integration-tools-fold summary::-webkit-details-marker { display: none; }
.integration-tools-fold summary::before { content: '▸ '; }
.integration-tools-fold[open] summary::before { content: '▾ '; }
.integration-tools-list { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; }
.integration-tool-item { font-size: 11px; color: var(--text-dim); padding: 2px 0; }
.integration-tool-item b { color: var(--text); font-weight: 500; }

/* Desconectar: destructiva → separada de lo frecuente (borde + margen propio,
   nunca pegada a los toggles) y en tono danger visible por default — no al
   :hover, esta app es 90% táctil y el hover no existe en mobile. */
.integration-disconnect-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin-top: 12px; padding: 10px 0 2px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--danger);
}
.integration-disconnect-btn svg { width: 13px; height: 13px; }
.integration-disconnect-btn:active { opacity: 0.7; }

/* ── Tareas panel ──────────────────────────────────────────────────────────── */
#tareas-panel {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 300; display: flex; flex-direction: column;
  transform: translateY(0); transition: transform 0.35s var(--ease);
}
#tareas-panel.collapsed { transform: translateY(100%); pointer-events: none; }
.tareas-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.tareas-title { font-size: 15px; font-weight: 600; }
.tareas-header-right { display: flex; gap: 4px; align-items: center; }
.tareas-filter-bar {
  display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto;
  border-bottom: 1px solid var(--border); flex-shrink: 0; scrollbar-width: none;
}
.tareas-filter-bar::-webkit-scrollbar { display: none; }
.task-filter-btn {
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.task-filter-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ── Grupos panel ──────────────────────────────────────────────────────────── */
/* Mismo patrón de panel full-screen slide-up que #tareas-panel, namespaced
   aparte a propósito (no comparte clases con .tareas-*) para no acoplar dos
   features que solo se parecen por convención visual. */
#groups-panel {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 300; display: flex; flex-direction: column;
  transform: translateY(0); transition: transform 0.35s var(--ease);
}
#groups-panel.collapsed { transform: translateY(100%); pointer-events: none; }
.groups-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.groups-title { font-size: 15px; font-weight: 600; flex: 1; }
.groups-header-right { display: flex; gap: 4px; align-items: center; }

#groups-list-view { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.groups-list { display: flex; flex-direction: column; }
.groups-list-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 60px 20px; color: var(--text-dim); text-align: center;
}
.groups-list-empty .empty-icon { font-size: 30px; opacity: 0.5; }

/* Toggle de alcance de la lista de grupos (admin): un renglón al pie, sin peso
   visual -- no compite con las tarjetas de grupo. Ver renderGroupsList(). */
.groups-scope-toggle {
  display: block; width: 100%; padding: 10px 16px;
  font-size: 11px; font-weight: 500; text-align: center;
  color: var(--text-dim); background: transparent; border: none;
  cursor: pointer; transition: color 0.12s;
}
.groups-scope-toggle:hover { color: var(--text); }

.group-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.group-card:hover, .group-card:active { background: var(--bg2); }
.group-card-avatars { display: flex; flex-shrink: 0; }
.group-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--bg3); border: 2px solid var(--sidebar-bg);
  margin-left: -8px; flex-shrink: 0;
}
.group-avatar:first-child { margin-left: 0; }
.group-avatar.agent { background: var(--accent-15); color: var(--accent); }
.group-avatar.human { background: var(--orange-15); color: var(--orange); }
.group-avatar.overflow { background: var(--bg4); color: var(--text-dim); font-size: 10px; }
.group-card-info { flex: 1; min-width: 0; }
.group-card-name { font-size: 14px; font-weight: 600; color: var(--text); }
.group-card-purpose {
  font-size: 12px; color: var(--text-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.group-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.group-card-time { font-size: 10px; color: var(--text-dim); opacity: 0.7; }
.group-unread-badge {
  background: var(--accent); color: var(--on-accent);
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  min-width: 16px; text-align: center;
}

/* Vista de un grupo (chat) */
.group-detail-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.group-detail-sub {
  padding: 8px 16px; font-size: 12px; color: var(--text-dim);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.group-messages {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 14px; padding: 16px;
}

/* Seed de sistema: no es una burbuja de chat, es un banner informativo
   centrado (mismo tratamiento visual que .msg.system en threads normales). */
.grp-seed {
  align-self: center; max-width: min(560px, 92%);
  background: var(--violet-6); border: 1px solid var(--violet-18);
  border-radius: 8px; font-size: 12px; color: var(--text-dim);
  padding: 10px 14px; text-align: center; white-space: pre-wrap;
}

.grp-msg { display: flex; gap: 10px; align-items: flex-start; max-width: min(680px, 92%); }
.grp-msg-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; margin-top: 2px;
}
.grp-msg-avatar.agent { background: var(--accent-15); color: var(--accent); }
.grp-msg-avatar.human { background: var(--orange-15); color: var(--orange); }
.grp-msg-body { flex: 1; min-width: 0; }
.grp-msg-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.grp-msg-name { font-size: 12px; font-weight: 600; color: var(--text); }
.grp-msg-time { font-size: 10px; color: var(--text-dim); }
.grp-msg-bubble {
  padding: 9px 12px; border-radius: 4px 14px 14px 14px;
  background: var(--bg2); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.55; word-break: break-word; overflow-wrap: break-word;
}
.grp-msg.agent .grp-msg-bubble { border-left: 3px solid var(--accent); }
.grp-msg.human .grp-msg-bubble { border-left: 3px solid var(--orange); }
.grp-msg-actions { display: flex; align-items: center; gap: 2px; margin-top: 3px; margin-left: -6px; }
/* Sólo ícono, sin label -- pedido explícito de Nacho 2026-08-05 (el link de
   texto no se notaba/no daba ganas de tocar en mobile). padding generoso para
   que el área de toque sea cómoda aunque el ícono en sí sea chico. */
.grp-msg-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 6px;
  color: var(--text-dim); opacity: 0.7; cursor: pointer;
  background: none; border: none;
}
.grp-msg-icon-btn:hover, .grp-msg-icon-btn:active { opacity: 1; color: var(--accent); background: var(--bg2); }
.grp-msg-icon-btn svg { width: 14px; height: 14px; }

/* Indicador "X está escribiendo..." -- reusa la píldora de showThinkingBubble()
   (live-activity-pill, ver arriba) pero vive fuera del feed de mensajes porque
   la togglean eventos WS 'status' de threads privados, no un re-render del feed. */
.group-typing-indicator { padding: 0 16px 8px; flex-shrink: 0; }
.grp-typing-pill { font-size: 11px; padding: 5px 12px; }

/* Chip "Respondiendo a: ..." arriba del compose -- puramente visual, no hay
   campo replyTo en el backend (ver replyToGroupMessage en app.js). */
.group-reply-context {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 16px 8px; padding: 6px 10px;
  background: var(--accent-10); border: 1px solid var(--accent-18);
  border-radius: var(--radius-sm); flex-shrink: 0;
}
.grp-reply-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.grp-reply-label svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--accent); }
.grp-reply-label b { color: var(--text); font-weight: 600; }
.grp-reply-cancel { width: 22px; height: 22px; flex-shrink: 0; }
.grp-reply-cancel svg { width: 13px; height: 13px; }

/* Compose bar + @mención */
.group-compose {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--border);
  position: relative; flex-shrink: 0;
}
.group-msg-input {
  flex: 1; resize: none; max-height: 120px;
  padding: 9px 12px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--chat-bg);
  color: var(--text); font-size: 13px; font-family: inherit; outline: none;
}
.group-msg-input:focus { border-color: var(--accent-40); }
.group-send-btn {
  flex-shrink: 0; background: var(--accent); color: var(--on-accent);
  border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.group-send-btn:disabled { opacity: 0.4; cursor: default; }
.group-compose-hint {
  display: flex; align-items: center; gap: 5px;
  padding: 0 16px 10px; font-size: 11px; color: var(--text-dim); opacity: 0.7;
}
.group-compose-hint svg { width: 11px; height: 11px; flex-shrink: 0; }

.group-mention-dropdown {
  position: absolute; bottom: 100%; left: 16px; right: 16px; margin-bottom: 6px;
  background: var(--sidebar-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px var(--black-40);
  max-height: 180px; overflow-y: auto; z-index: 5;
}
.mention-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.mention-item:hover, .mention-item.active { background: var(--bg2); }
.mention-item-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.mention-item-avatar.agent { background: var(--accent-15); color: var(--accent); }
.mention-item-avatar.human { background: var(--orange-15); color: var(--orange); }

/* Modales: crear grupo / gestionar miembros */
.group-modal-box { max-width: 440px; }
.group-member-picker {
  display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px;
}
.group-member-option {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px;
}
.group-member-option:hover { background: var(--bg2); }
.group-member-option input[type=checkbox] { accent-color: var(--accent); }
.group-member-option-label { flex: 1; }
.group-member-picker-empty { font-size: 12px; color: var(--text-dim); padding: 8px; text-align: center; }
.group-member-picker-note { font-size: 11px; color: var(--text-dim); opacity: 0.75; padding: 4px 8px; }

.group-member-list { display: flex; flex-direction: column; gap: 6px; }
.group-member-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px;
}
.group-member-row-label { flex: 1; }
.group-member-remove { color: var(--text-dim); }
.group-member-remove:hover { color: var(--danger); }

/* ── Tareas hub tabs (home/rutinas/planes) ──────────────────────────────── */
.tareas-tab-bar { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; padding: 0 8px; }
.tab-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 8px; background: none; border: none; color: var(--text-dim);
  font-size: 13px; font-weight: 600; position: relative; cursor: pointer;
}
.tab-btn.active { color: var(--accent); }
.tab-btn.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px 2px 0 0;
}
.tab-home-icon { width: 18px; height: 18px; }
.tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); position: absolute; top: 8px; right: calc(50% - 22px); }
.tab-count { background: var(--bg4); color: var(--text-dim); border-radius: 999px; padding: 0 6px; font-size: 11px; }
.tab-btn.active .tab-count { background: var(--accent-15); color: var(--accent); }

/* Compact filter selector — replaces the old fixed pill bar inside the Planes tab */
.tab-content-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 10px; }
.tab-content-count { font-size: 12px; color: var(--text-dim); }
.filter-select-wrap { position: relative; }
.filter-select-trigger {
  display: flex; align-items: center; gap: 5px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px;
  font-size: 12px; color: var(--text); cursor: pointer;
}
.filter-select-trigger svg { width: 13px; height: 13px; color: var(--text-dim); }
.filter-select-trigger.filtered { color: var(--accent); border-color: var(--accent-30); background: var(--accent-15); }
.filter-select-dropdown {
  position: absolute; top: 32px; right: 0; background: var(--surface-dropdown);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-popup, 0 8px 24px var(--black-45));
  z-index: 50; min-width: 150px; padding: 4px;
}
.filter-select-item { padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.filter-select-item:hover { background: var(--bg4); }
.filter-select-item.active { color: var(--accent); font-weight: 600; }

/* Presence — small reuse of the .presence-orb language at plan/task scope */
.presence-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.presence-badge.live { color: var(--accent); }
.presence-badge.queued { color: var(--warning); }
.presence-badge.idle { color: var(--text-dim); font-weight: 500; }
.presence-badge .presence-orb { --orb-size: 7px; }
.presence-badge .presence-dot-static { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); flex-shrink: 0; }
.plan-detail-presence { margin-bottom: 6px; }
.plan-detail-presence:empty { display: none; }

/* Home tab: unnamed "resumen" — attention items + compact previews */
.home-all-clear { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13px; padding: 14px 4px 18px; }
.home-all-clear svg { width: 16px; height: 16px; color: var(--success); }
.ready-row {
  display: flex; align-items: center; gap: 8px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  margin-bottom: 6px; cursor: pointer;
}
.ready-row:hover { border-color: var(--accent-30); }
.ready-row .rr-icon { color: var(--accent); flex-shrink: 0; }
.ready-row .rr-body { flex: 1; min-width: 0; }
.ready-row .rr-title { font-size: 13px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ready-row .rr-plan { font-size: 11px; color: var(--text-dim); }
.ready-row .rr-btn {
  background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px;
  padding: 6px 10px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.preview-widget { margin: 18px 0 6px; }
.preview-widget-head { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 8px; }
.preview-widget-title { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-dim); }
.preview-more { font-size: 12px; color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; }
.preview-more svg { width: 13px; height: 13px; }
.rtn-mini-row { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.rtn-mini-row:last-child { border-bottom: none; }
.rtn-mini-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rtn-mini-dot.ok { background: var(--success); }
.rtn-mini-dot.error { background: var(--danger); }
.rtn-mini-dot.running { background: var(--warning); }
.rtn-mini-title { flex: 1; min-width: 0; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtn-mini-time { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
.plan-mini-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.plan-mini-row:last-child { border-bottom: none; }
.plan-mini-name { font-size: 13px; font-weight: 600; color: var(--text); flex-shrink: 0; width: 108px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-mini-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.plan-mini-fill { height: 100%; background: var(--accent); border-radius: 2px; }
.plan-mini-pct { font-size: 11px; color: var(--text-dim); width: 30px; text-align: right; flex-shrink: 0; }
.plan-mini-presence { flex-shrink: 0; min-width: 14px; }

/* Rutinas tab — full grid of taskRecurBlockHTML-based cards, with/without plan */
.rtn-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rtn-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.rtn-card .task-recur-block { margin: 4px 0 0; padding: 0; background: none; border: none; }
.rtn-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.rtn-card-title { font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; flex: 1; min-width: 0; }
.rtn-card-scope {
  font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--bg4);
  color: var(--text-dim); flex-shrink: 0; max-width: 45%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rtn-card-scope.has-plan { background: var(--accent-15); color: var(--accent); }
@media (min-width: 620px) {
  .rtn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Encabezado de grupo dentro de la pestaña Rutinas (🔁 Rutinas / 📅 Agenda) —
   mismo lenguaje visual, distinto job. */
.rtn-section-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 18px 4px 8px; flex-wrap: wrap;
}
.rtn-section-head:first-child { margin-top: 4px; }
.rtn-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text); display: inline-flex; align-items: center; gap: 5px;
}
.rtn-section-icon { width: 13px; height: 13px; }
.rtn-section-count {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  background: var(--bg4); border-radius: 999px; padding: 1px 7px;
}
.rtn-section-sub { font-size: 11px; color: var(--text-dim); margin-left: auto; }

/* Output emergente de la última corrida de una rutina — sólo aparece cuando el
   dato existe; una rutina que sólo escaneó en silencio no lo muestra. */
.rtn-output {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
  font-size: 12px; color: var(--text-dim); line-height: 1.4;
}
.rtn-output-icon { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.rtn-output-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rtn-output-link {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px;
  color: var(--accent); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.rtn-output-link:hover { text-decoration: underline; }
.rtn-output-link i { width: 12px; height: 12px; }
.rtn-output-error { color: var(--danger); }
.rtn-output-error .rtn-output-icon { color: var(--danger); }
.rtn-output-error .rtn-output-link { color: var(--danger); }

/* Agenda — one-time con fecha. Fecha prominente a la izquierda + quién actúa. */
.agenda-list { display: flex; flex-direction: column; gap: 8px; }
.agenda-card {
  display: flex; gap: 12px; align-items: stretch;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; cursor: pointer;
  transition: border-color .15s var(--ease);
}
.agenda-card:hover { border-color: var(--accent-30); }
.agenda-card.overdue { border-color: var(--danger-40); }
.agenda-date {
  flex-shrink: 0; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; min-width: 62px;
  padding-right: 12px; border-right: 1px solid var(--border);
}
.agenda-date-day { font-size: 15px; font-weight: 700; color: var(--text); text-transform: capitalize; line-height: 1.15; }
.agenda-date-sub { font-size: 11px; color: var(--text-dim); text-transform: capitalize; margin-top: 2px; }
.agenda-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.agenda-body-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agenda-actor {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.agenda-actor-icon { width: 11px; height: 11px; }
.agenda-actor.actor-run    { background: var(--accent-15); color: var(--accent); }
.agenda-actor.actor-notify { background: var(--amber-alt-12); color: var(--amber-alt); }
.agenda-actor.actor-review { background: var(--success-12); color: var(--success); }
.agenda-rel { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
.agenda-rel.overdue { color: var(--danger); font-weight: 600; }
.agenda-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; }
.agenda-plan { font-size: 11px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 4px; }
.agenda-plan-icon { width: 11px; height: 11px; }
.agenda-reagendar {
  align-self: flex-start; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--danger-10); color: var(--danger);
  border: 1px solid var(--danger-40); border-radius: 999px;
  padding: 4px 12px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.agenda-reagendar:hover { background: var(--danger-20); }
.agenda-reagendar-icon { width: 12px; height: 12px; }
.agenda-mini-actor { display: inline-flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; }
.agenda-mini-actor.actor-run { color: var(--accent); }
.agenda-mini-actor.actor-notify { color: var(--amber-alt); }
.agenda-mini-actor.actor-review { color: var(--success); }
.rtn-mini-dot-icon { width: 14px; height: 14px; }

/* ── Empty states que enseñan (usuario nuevo) ──────────────────────────────── */
.tkt-empty-teach { opacity: 1; padding: 44px 24px; max-width: 420px; margin: 0 auto; }
.tkt-empty-teach svg { opacity: 0.4; color: var(--accent); }
.tkt-empty-title { font-size: 16px; font-weight: 700; color: var(--text); }
.tkt-empty-sub { font-size: 13px; color: var(--text-dim); line-height: 1.5; text-align: center; }
.tkt-empty-cta {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: var(--on-accent); border: none;
  border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tkt-empty-cta:hover { background: var(--accent-hover); }
.tkt-empty-cta svg { width: 15px; height: 15px; opacity: 1; color: var(--on-accent); }

/* Entrada persistente al formulario JTBD dentro de una lista con items — el CTA
   ya no vive sólo en el empty state (que desaparece con el primer item), así que
   "agregar otra" sigue disponible siempre desde el cuerpo de la pestaña. */
.list-add-cta {
  width: 100%; margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--text-dim);
  border: 1px dashed var(--border); border-radius: 12px;
  padding: 11px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.list-add-cta:hover { border-color: var(--accent-30); color: var(--accent); background: var(--accent-10); }
.list-add-cta svg { width: 14px; height: 14px; }

/* ── Formularios contextuales (Agenda / Rutina) ────────────────────────────── */
.form-step { padding: 12px 0; border-bottom: 1px solid var(--border); }
.form-step:first-child { padding-top: 4px; }
.form-step-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px;
}
.form-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--accent-15); color: var(--accent);
  font-size: 11px; font-weight: 700;
}
.form-readout { font-size: 12px; color: var(--accent); margin-top: 8px; min-height: 16px; font-weight: 500; }
.form-hint { font-size: 11px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
.form-inline-label { font-size: 13px; color: var(--text-dim); }

.preset-chips, .dow-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-chip, .dow-chip {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.dow-chip { border-radius: 10px; padding: 7px 0; width: 38px; text-align: center; font-weight: 600; }
.preset-chip:hover, .dow-chip:hover { border-color: var(--accent-40); }
.preset-chip.active, .dow-chip.active {
  background: var(--accent-15); border-color: var(--accent); color: var(--accent); font-weight: 600;
}

.choice-cards { display: flex; gap: 8px; }
.choice-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 8px; cursor: pointer; transition: background-color 150ms var(--ease), border-color 150ms var(--ease); text-align: center;
}
.choice-card:hover { border-color: var(--accent-40); }
.choice-card.active { background: var(--accent-12); border-color: var(--accent); }
.choice-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--bg4); color: var(--text-dim);
}
.choice-card.active .choice-ic { background: var(--accent); color: var(--on-accent); }
.choice-ic svg { width: 17px; height: 17px; }
.choice-label { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.25; }

.form-advanced { padding: 12px 0 4px; }
.form-advanced-head {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0;
}
.form-advanced-chevron { width: 15px; height: 15px; transition: transform .15s var(--ease); }
.form-advanced-head.open .form-advanced-chevron { transform: rotate(90deg); }
.form-advanced-body { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.form-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-field .tkt-select, .form-field .tkt-textarea, .form-field .tkt-input { width: 100%; }
.form-field-label {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  letter-spacing: .02em; text-transform: uppercase;
}

/* ── Hoja de creación (home +) ─────────────────────────────────────────────── */
.create-sheet {
  position: fixed; inset: 0; z-index: 320;
  display: flex; align-items: flex-end; justify-content: center;
  transition: opacity .25s var(--ease);
}
.create-sheet.collapsed { opacity: 0; pointer-events: none; }
.create-sheet-overlay { position: absolute; inset: 0; background: var(--black-55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.create-sheet-panel {
  position: relative; width: 100%; max-width: 480px;
  background: var(--bg); border-top: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0; padding: 10px 16px 24px;
  transform: translateY(0); transition: transform .3s var(--ease);
}
.create-sheet.collapsed .create-sheet-panel { transform: translateY(100%); }
.create-sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--bg4); margin: 4px auto 14px; }
.create-sheet-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 4px 12px; }
.create-sheet-choice {
  width: 100%; display: flex; align-items: center; gap: 14px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; margin-bottom: 10px; cursor: pointer; text-align: left;
  transition: border-color .12s var(--ease);
}
.create-sheet-choice:hover { border-color: var(--accent-40); }
.create-sheet-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
}
.create-sheet-ic svg { width: 20px; height: 20px; }
.create-sheet-ic.ic-agenda { background: var(--amber-alt-12); color: var(--amber-alt); }
.create-sheet-ic.ic-routine { background: var(--accent-15); color: var(--accent); }
.create-sheet-ic.ic-plan { background: var(--success-12); color: var(--success); }
.create-sheet-body { display: flex; flex-direction: column; gap: 2px; }
.create-sheet-h { font-size: 14px; font-weight: 600; color: var(--text); }
.create-sheet-d { font-size: 12px; color: var(--text-dim); line-height: 1.35; }

.plan-detail-bar {
  padding: 8px 16px; background: var(--bg2);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.plan-detail-goal {
  font-size: 12px; color: var(--text-dim); margin-bottom: 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  flex: 1; min-width: 0;
}
.plan-detail-progress-row { display: flex; align-items: center; gap: 8px; }
.plan-progress-bar-wrap {
  flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden;
}
.plan-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; min-width: 0; }
.plan-progress-pct { font-size: 11px; color: var(--text-dim); width: 30px; text-align: right; flex-shrink: 0; }
.tareas-body { flex: 1; overflow-y: auto; padding: 8px 16px 80px; }
/* Minimum-viable desktop layout: #tareas-panel is still a full-viewport sheet
   (see above) — this just keeps cards/buttons from stretching edge-to-edge on
   wide screens. A real two-column desktop layout is future work, not this fix. */
@media (min-width: 769px) {
  .tareas-body, .plan-detail-bar { max-width: 800px; margin: 0 auto; width: 100%; }
}
/* Mismo motivo que arriba: #questions-panel (Pendientes) es el mismo full-
   viewport sheet, y sin este límite las cards estiran el ancho de línea del
   texto y de los botones edge-to-edge en desktop. */
@media (min-width: 769px) {
  .questions-body { max-width: 800px; margin: 0 auto; width: 100%; }
}
.task-plan-badge {
  font-size: 10px; padding: 2px 6px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim);
}
/* Recurring-task block inside a task card — reuses the Crons panel's own
   item/dot/actions classes so "at a glance" status reads identically there. */
.task-recur-block {
  margin: 8px 0; padding: 8px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.task-recur-block .cron-item-header,
.task-recur-block .cron-schedule { margin-bottom: 4px; }
.task-recur-block .cron-meta { margin-bottom: 8px; }
.task-dep-badge {
  font-size: 10px; padding: 2px 6px; background: var(--amber-alt-12);
  border: 1px solid var(--amber-alt-30); border-radius: 4px; color: var(--amber-alt);
  display: inline-flex; align-items: center; gap: 3px;
}
/* ── Thread list empty states ─────────────────────────────────────────────── */
.thread-list-empty { padding: 24px 16px; color: var(--text-dim); font-size: 12px; text-align: center; }
.thread-list-load-more {
  display: block; width: 100%; padding: 10px 16px; margin-top: 4px;
  background: none; border: none; border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; text-align: center; cursor: pointer;
}
.thread-list-load-more:hover { color: var(--text); background: var(--bg3); }
.thread-list-clean { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; }
.thread-list-clean .clean-icon { font-size: 28px; opacity: 0.6; }
.thread-list-clean .clean-sub { font-size: 11px; opacity: 0.5; margin-top: 2px; }
.settings-bark-row { display: flex; gap: 8px; align-items: center; padding: 8px 12px; }

.task-card-review {
  border-color: var(--warning-25);
  background: var(--warning-4);
}
.task-card-review:hover { background: var(--warning-8); }

.task-card-ready {
  border-color: var(--success-30);
  background: var(--success-4);
}
.task-card-ready:hover { background: var(--success-8); }

.task-ready-badge {
  font-size: 10px; padding: 2px 6px;
  background: var(--success-15);
  border: 1px solid var(--success-35);
  border-radius: 4px; color: var(--success);
  display: inline-flex; align-items: center; gap: 3px;
}
/* ── 🙋 Preguntas al humano (waiting_input) ───────────────────────────────── */
.tkt-status-waiting { background: var(--accent-22); color: var(--accent); }

.task-card-waiting {
  border-color: var(--accent-30);
  background: var(--accent-4);
}
.task-card-waiting:hover { background: var(--accent-8); }

/* ── Reintento tras rechazo (autónomo, no requiere acción del humano) ────────
   Tono informacional/"en progreso" (azul, mismo usado en plan-inprogress-strip)
   — deliberadamente distinto del warning (needs_review) y accent (waiting_input)
   para no leerse como "necesita tu acción". */
.task-card-retrying {
  border-color: var(--blue-18);
  background: var(--blue-6);
}
.task-card-retrying:hover { background: var(--blue-10); }

.task-retry-badge {
  font-size: 10px; padding: 2px 6px;
  background: var(--blue-10);
  border: 1px solid var(--blue-18);
  border-radius: 4px; color: var(--blue);
  display: inline-flex; align-items: center; gap: 3px;
}

.task-card-retry-banner {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 8px; padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--blue-6);
  border-left: 2px solid var(--blue-18);
}
.task-retry-banner-label { font-size: 11px; font-weight: 600; color: var(--blue); margin-bottom: 3px; }
.task-retry-banner-note { font-size: 12px; color: var(--text-dim); }

/* ── Tarea sin mecanismo de disparo (tsk_eb3829ff66c1) ────────────────────
   trigger.kind === 'ninguno': chip informativo en cualquier tarea pending.
   .stalled (>24h así) sube a badge + tinte de card, mismo lenguaje visual
   que needs_review (--warning): amerita la misma atención humana. */
.task-trigger-chip {
  font-size: 10px; padding: 2px 6px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 3px;
}
.task-trigger-chip.stalled {
  background: var(--warning-15); border-color: var(--warning-40); color: var(--warning);
}
.task-card-stalled {
  border-color: var(--warning-25);
  background: var(--warning-4);
}
.task-card-stalled:hover { background: var(--warning-8); }

.task-drawer-retry-section .task-drawer-section-label { color: var(--blue); }
.task-drawer-retry-note {
  font-size: 13px; color: var(--text); white-space: pre-wrap;
  background: var(--blue-6); border-left: 2px solid var(--blue-18);
  border-radius: var(--radius-sm); padding: 10px 12px;
}

.waiting-input-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-12);
  border: 1px solid var(--accent-30);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.task-question-block {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-8);
  border-left: 2px solid var(--accent-40);
  cursor: default;
}
.task-question-label {
  font-size: 11px; color: var(--text-dim);
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 4px;
}
.task-question-text {
  font-size: 14px; font-weight: 500; color: var(--text);
  line-height: 1.45;
}
.task-question-context {
  margin-top: 6px; font-size: 12px; color: var(--text-dim);
  line-height: 1.4;
}
.task-question-options {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.task-answer-btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  background: var(--accent-15);
  border: 1px solid var(--accent-35);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
}
.task-answer-btn:hover { background: var(--accent-25); }
.task-answer-btn:active { opacity: 0.7; }
.task-question-free {
  display: flex; gap: 6px; margin-top: 10px;
}
.task-question-free .task-answer-input { flex: 1; }
.task-answer-send {
  min-width: 44px; min-height: 38px;
  border-radius: var(--radius-sm);
  background: var(--accent-15);
  border: 1px solid var(--accent-35);
  color: var(--accent);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.task-answer-send:hover { background: var(--accent-25); }

.task-qa-item {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
}
.task-qa-q {
  font-size: 12px; font-weight: 600; color: var(--text);
  display: flex; align-items: flex-start; gap: 4px;
  line-height: 1.4;
}
.task-qa-a {
  margin-top: 5px; font-size: 12px; color: var(--accent);
  display: flex; align-items: flex-start; gap: 4px;
  line-height: 1.4;
}
.task-qa-unanswered { color: var(--text-dim); font-style: italic; }
.task-qa-meta { color: var(--text-dim); font-style: normal; font-size: 11px; }

.task-verdict-badge {
  font-size: 10px; padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex; align-items: center; gap: 3px;
}
.task-verdict-verified {
  background: var(--success-15);
  border: 1px solid var(--success-35);
  color: var(--success);
}
.task-verdict-unverified {
  background: var(--warning-8);
  border: 1px solid var(--warning-25);
  color: var(--warning);
}

/* ── Plan next step banner ────────────────────────────────────────────────── */
.plan-next-step-banner {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--success-6);
  border: 1px solid var(--success-25);
  border-radius: var(--radius); cursor: pointer;
  transition: background 0.15s;
}
.plan-next-step-banner:hover { background: var(--success-10); }
.plan-next-step-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--success);
  display: flex; align-items: center; gap: 4px;
}
.plan-next-step-title {
  font-size: 13px; font-weight: 500; color: var(--text);
}
.plan-next-step-btn {
  align-self: flex-start; margin-top: 4px;
  padding: 5px 12px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
  background: var(--success-15);
  border: 1px solid var(--success-35);
  color: var(--success); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: background 0.15s;
}
.plan-next-step-btn:hover { background: var(--success-25); }

/* Retry-in-flight / queued-behind-the-gate variant — same blue
   "informational/autonomous" tone as .task-card-retrying, deliberately not the
   success/green "ready to run" look (no manual "Ejecutar" CTA — this fires on
   its own, see Item 7/8/9). */
.plan-next-step-banner-auto {
  background: var(--blue-6);
  border-color: var(--blue-18);
}
.plan-next-step-banner-auto:hover { background: var(--blue-10); }
.plan-next-step-banner-auto .plan-next-step-label { color: var(--blue); }
.plan-next-step-retry-note { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ── Plan in-progress strip ──────────────────────────────────────────────── */
.plan-inprogress-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 6px;
  background: var(--blue-6);
  border: 1px solid var(--blue-18);
  border-radius: var(--radius); cursor: pointer;
  transition: background 0.15s;
}
.plan-inprogress-strip:hover { background: var(--blue-10); }
.plan-inprogress-spin {
  width: 14px; height: 14px; color: var(--accent); flex-shrink: 0;
  animation: spin 1.2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.plan-inprogress-title {
  flex: 1; font-size: 13px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-inprogress-label {
  font-size: 10px; color: var(--accent); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0;
}
.plan-inprogress-chevron { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; }
.plan-inprogress-strip--pipeline { opacity: 0.6; margin-bottom: 4px; }

/* ── Plan pipeline separator & cards ────────────────────────────────────── */
.plan-pipeline-sep {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 8px; color: var(--text-dim);
}
.plan-pipeline-sep::before, .plan-pipeline-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.plan-pipeline-sep span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; }

.pipeline-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 4px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg2); cursor: pointer; transition: background 0.15s;
}
.pipeline-card:hover { background: var(--bg3); }
.pipeline-card-done { opacity: 0.5; }
.pipeline-card-blocked { opacity: 0.65; }
.pipeline-card-icon { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; }
.pipeline-card-done .pipeline-card-icon { color: var(--success); }
.pipeline-card-title {
  flex: 1; font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pipeline-card-done .pipeline-card-title { text-decoration: line-through; color: var(--text-dim); }
.pipeline-card-chevron { width: 13px; height: 13px; color: var(--text-dim); flex-shrink: 0; }
.pipeline-dep { margin-left: auto; flex-shrink: 0; }
.pipeline-card-next {
  border-color: var(--success-30);
  background: var(--success-6);
  opacity: 0.75;
}
.pipeline-card-next .pipeline-card-icon { color: var(--success); }
.pipeline-card-next .pipeline-card-title { color: var(--text); }
.pipeline-card-cancelled {
  opacity: 0.35; border-style: dashed;
}
.pipeline-card-cancelled .pipeline-card-icon { color: var(--red-50); }
.pipeline-card-cancelled .pipeline-card-title { text-decoration: line-through; color: var(--text-dim); }

/* ── Cancel button in drawer ─────────────────────────────────────────────── */
.task-btn-cancel {
  width: 100%; margin-top: 12px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  font-size: 11px; background: transparent;
  border: 1px solid var(--red-25);
  color: var(--red-50); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.task-btn-cancel:hover { background: var(--red-8); border-color: var(--red-50); color: var(--red-90); }

/* ── "Ver canceladas" toggle ─────────────────────────────────────────────── */
.task-cancelled-toggle {
  display: flex; align-items: center; gap: 5px;
  width: 100%; margin-top: 12px; padding: 6px 0;
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: var(--text-dim); opacity: 0.5;
  transition: opacity 0.15s;
}
.task-cancelled-toggle:hover { opacity: 1; }

.task-card-summary {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 4px 0 2px;
  padding: 6px 8px;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--warning-40);
}

.task-card-eval {
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 2px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.task-card-eval-passed {
  background: var(--success-10);
  border-left: 2px solid var(--success-50);
  color: var(--success);
}
.task-card-eval-failed {
  background: var(--red-8);
  border-left: 2px solid var(--red-40);
  color: var(--red-85);
}
.task-card-evaluating {
  background: var(--violet-6);
  border: 1px solid var(--violet-20);
}
.task-card-evaluating:hover { background: var(--violet-10); }

.task-eval-spin {
  display: inline-block;
  animation: spin 1.2s linear infinite;
  vertical-align: -2px;
  margin-right: 4px;
}

.task-drawer-criteria {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--violet-8);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--violet-45);
}

.task-drawer-eval-result {
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.task-drawer-eval-passed {
  background: var(--success-10);
  border-left: 2px solid var(--success-50);
  color: var(--success);
}
.task-drawer-eval-failed {
  background: var(--red-8);
  border-left: 2px solid var(--red-40);
  color: var(--red-85);
}
.task-drawer-eval-unverified {
  background: var(--warning-8);
  border-left: 2px solid var(--warning-40);
  color: var(--warning);
}
.task-drawer-eval-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}
.task-btn-override {
  flex: 1;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  background: var(--violet-12);
  border: 1px solid var(--violet-30);
  color: var(--violet);
  cursor: pointer;
  transition: background 0.15s;
  display: flex; align-items: center; gap: 5px; justify-content: center;
}
.task-btn-override:hover { background: var(--violet-22); }

.plan-success-criteria {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
  padding: 5px 8px;
  background: var(--violet-6);
  border-left: 2px solid var(--violet-30);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.4;
}

.task-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.task-btn-approve {
  flex: 1;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  background: var(--success-15);
  border: 1px solid var(--success-35);
  color: var(--success);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.15s;
}
.task-btn-approve:hover { background: var(--success-25); }
.task-btn-approve:active { opacity: 0.7; }
.task-btn-reject {
  flex: 1;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.15s;
}
.task-btn-reject:hover { background: var(--bg4); color: var(--text); }
.task-btn-secondary {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s;
}
.task-btn-secondary:hover { background: var(--bg4); color: var(--text); }
.task-btn-small { font-size: 12px; padding: 5px 10px; }

/* ── Task drawer ──────────────────────────────────────────────────────────── */

.task-drawer {
  position: fixed;
  inset: 0;
  z-index: 350;
  pointer-events: none;
}
.task-drawer:not(.collapsed) { pointer-events: all; }

.task-drawer-overlay {
  position: absolute;
  inset: 0;
  background: var(--black-45);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.task-drawer:not(.collapsed) .task-drawer-overlay { opacity: 1; }

.task-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 100vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
  box-shadow: var(--shadow-side);
}
.task-drawer:not(.collapsed) .task-drawer-panel { transform: translateX(0); }

.task-drawer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}

.task-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}

.task-drawer-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

.task-drawer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.task-drawer-meta > span { display: flex; align-items: center; gap: 3px; }
.task-drawer-time { font-style: italic; }

.task-drawer-section { display: flex; flex-direction: column; gap: 6px; }
.task-drawer-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.task-drawer-summary-box {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg3);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--warning-50);
  padding: 10px 12px;
  white-space: pre-wrap;
}
.task-drawer-desc-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  white-space: pre-wrap;
}

.task-dep-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 0;
}
.task-dep-item.met { color: var(--success); }
.task-dep-item.unmet { color: var(--text-dim); }
.task-dep-icon { width: 13px; height: 13px; flex-shrink: 0; }

.task-drawer-notes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.task-drawer-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  padding: 6px 8px;
  background: var(--bg3);
  border-radius: var(--radius-sm);
}
.task-drawer-note-author {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
}
.task-drawer-note-text { color: var(--text); line-height: 1.4; }
.task-drawer-empty-notes { font-size: 12px; color: var(--text-dim); opacity: 0.6; }
.task-drawer-note-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.task-drawer-note-input-row .tkt-input { flex: 1; padding: 8px 12px; }

.task-drawer-footer {
  border-top: 1px solid var(--border);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.task-drawer-reject-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-drawer-reject-section.collapsed { display: none; }
.task-drawer-reject-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.task-drawer-reject-actions .tkt-btn-cancel { padding: 8px 14px; }
.task-drawer-main-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.task-drawer-main-actions .task-btn-approve { flex: 1; padding: 11px; font-size: 14px; }
.task-drawer-main-actions .task-btn-reject { flex: 1; padding: 11px; font-size: 14px; }

@media (max-width: 600px) {
  .task-drawer-panel { width: 100vw; border-left: none; }
}

/* ── Plan detail bar enhancements ──────────────────────────────────────────── */
.plan-detail-header-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.plan-start-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 7px; padding: 9px 12px;
  background: var(--emerald-7); border: 1px solid var(--emerald-22);
  border-radius: 8px; cursor: pointer; transition: background 0.15s;
}
.plan-start-banner:hover { background: var(--emerald-14); }
.plan-start-banner-icon { color: var(--emerald); flex-shrink: 0; display: flex; }
.plan-start-banner-icon svg { width: 18px; height: 18px; }
.plan-start-banner-text { flex: 1; min-width: 0; }
.plan-start-banner-title { font-size: 12px; font-weight: 600; color: var(--emerald); }
.plan-start-banner-sub { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.plan-start-banner-arrow { color: var(--emerald); opacity: 0.5; flex-shrink: 0; display: flex; }
.plan-start-banner-arrow svg { width: 14px; height: 14px; }
/* Fase 3 — preflight review banner (veto consultivo, no bloquea) */
.plan-preflight-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 7px; padding: 9px 12px; border-radius: 8px;
  background: var(--amber-alt-12); border: 1px solid var(--amber-alt-30);
}
.plan-preflight-banner.preflight-approved { background: var(--emerald-7); border-color: var(--emerald-22); }
.plan-preflight-icon { flex-shrink: 0; display: flex; color: var(--amber-alt); margin-top: 1px; }
.plan-preflight-banner.preflight-approved .plan-preflight-icon { color: var(--emerald); }
.plan-preflight-icon svg { width: 18px; height: 18px; }
.plan-preflight-banner.preflight-reviewing .plan-preflight-icon svg { animation: spin 1.2s linear infinite; }
.plan-preflight-text { flex: 1; min-width: 0; }
.plan-preflight-title { font-size: 12px; font-weight: 600; color: var(--amber-alt); }
.plan-preflight-banner.preflight-approved .plan-preflight-title { color: var(--emerald); }
.plan-preflight-sub { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.plan-preflight-reviews { margin-top: 5px; display: flex; flex-direction: column; gap: 3px; }
.plan-preflight-review { font-size: 11px; color: var(--text-dim); line-height: 1.35; }
.plan-preflight-review.preflight-reject { color: var(--amber-alt); }
.plan-status-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 999px; flex-shrink: 0;
  background: var(--green-12); border: 1px solid var(--green-30);
  color: var(--green); font-weight: 600; white-space: nowrap; align-self: center;
}
.plan-close-btn {
  font-size: 11px; padding: 2px 9px; border-radius: 5px; cursor: pointer; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  white-space: nowrap; align-self: center;
}
.plan-close-btn:hover { border-color: var(--accent); color: var(--accent); }

.plan-pm-btn {
  font-size: 11px; padding: 2px 9px; border-radius: 5px; cursor: pointer; flex-shrink: 0;
  background: var(--violet-12); border: 1px solid var(--violet-35);
  color: var(--violet); white-space: nowrap; align-self: center;
  display: flex; align-items: center; gap: 4px;
}
.plan-pm-btn:hover { background: var(--violet-22); }
.plan-techlead-chip {
  font-size: 11px; padding: 2px 9px; border-radius: 5px; flex-shrink: 0;
  background: var(--amber-12); border: 1px solid var(--amber-30);
  color: var(--amber-alt); white-space: nowrap; align-self: center;
  display: flex; align-items: center; gap: 4px;
}
.plan-techlead-chip svg { width: 12px; height: 12px; }
.plan-start-btn {
  font-size: 11px; padding: 2px 10px; border-radius: 5px; cursor: pointer; flex-shrink: 0;
  background: var(--emerald-15); border: 1px solid var(--emerald-40);
  color: var(--emerald); white-space: nowrap; align-self: center;
  display: flex; align-items: center; gap: 4px; font-weight: 600;
}
.plan-start-btn:hover { background: var(--emerald-28); }
.plan-card-pending-start { font-size: 11px; color: var(--emerald); display: flex; align-items: center; gap: 3px; }
.plan-card-pending-start svg { width: 12px; height: 12px; }
.plan-card-cancelled-label { font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 3px; opacity: 0.7; }
.plan-card-cancelled-label svg { width: 12px; height: 12px; }
.plan-status-badge-cancelled {
  font-size: 10px; padding: 2px 7px; border-radius: 999px; flex-shrink: 0;
  background: var(--btn-bg); border: 1px solid var(--border);
  color: var(--text-dim); font-weight: 600; white-space: nowrap; align-self: center;
}
.plan-hub-footer-link-cancelled { color: var(--text-dim); opacity: 0.7; }
.plan-hub-section-label-cancelled { color: var(--text-dim); opacity: 0.7; }

/* ── Plans Hub ──────────────────────────────────────────────────────────────── */
.plan-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 12px 16px 4px;
}
.plan-hub-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.plan-hub-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px var(--black-15); }
.plan-hub-card-done { opacity: 0.5; }
.plan-hub-card-done:hover { opacity: 0.8; }
.plan-hub-card-cancelled { opacity: 0.35; filter: grayscale(0.6); }
.plan-hub-card-cancelled:hover { opacity: 0.65; }
.plan-hub-card-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.plan-hub-card-goal { font-size: 11px; color: var(--text-dim); line-height: 1.4; margin-bottom: 10px; }
.plan-hub-progress-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.plan-hub-progress-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.plan-hub-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s ease; }
.plan-hub-pct { font-size: 11px; color: var(--text-dim); width: 28px; text-align: right; flex-shrink: 0; }
.plan-hub-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.plan-card-alert { font-size: 11px; color: var(--amber-alt); display: flex; align-items: center; gap: 3px; }
.plan-card-alert svg { width: 12px; height: 12px; }
.plan-card-running { font-size: 11px; color: var(--accent); display: flex; align-items: center; gap: 3px; }
.plan-card-running svg { width: 12px; height: 12px; }
.plan-hub-task-count { font-size: 11px; color: var(--text-dim); margin-left: auto; }
.plan-hub-footer {
  display: flex; gap: 12px; padding: 10px 16px; flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: 4px;
}
.plan-hub-footer-link {
  font-size: 12px; color: var(--text-dim); background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 5px; padding: 2px 0;
}
.plan-hub-footer-link:hover { color: var(--text); }
.plan-hub-footer-link svg { width: 13px; height: 13px; }
.plan-hub-section-label {
  font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: .06em; padding: 12px 16px 4px;
}
@media (max-width: 480px) {
  .plan-hub-grid { grid-template-columns: 1fr; }
}

/* ── Light palette (Kurogo) ───────────────────────────────────────────────── */
/* Paper/Ink/White base con accent Eclipse oscurecido. Contraste WCAG AA en texto. */
/* --accent #906422 (Eclipse oscurecido) ≈ 4.71:1 vs #F8F3EA — pasa AA para texto normal */
[data-theme="light"] {
  color-scheme: light;
  /* Backgrounds */
  --bg:        #F8F3EA;
  --bg2:       rgba(0,0,0,0.02);
  --bg3:       rgba(0,0,0,0.05);
  --bg4:       rgba(0,0,0,0.09);
  --surface2:  var(--bg3);
  /* Text — #0B0B0B vs #F8F3EA ≈ 17.81:1 (AAA); text-dim rgba(32,32,32,.65) ≈ 4.88:1 (AA) */
  --text:      #0B0B0B;
  --text-dim:  rgba(32,32,32,0.65);
  /* Accent — #906422 (Eclipse oscurecido) ≈ 4.71:1 vs #F8F3EA — AA para texto normal + UI */
  --accent:    #906422;
  --accent2:   #714F1B;
  --accent-hover: #7A551D;
  /* Semantic — variantes oscuras para contraste sobre fondo claro */
  --success:   #2e7d32;
  --warning:   #e65100;
  --danger:    #c62828;
  /* Borders + glass */
  --border:    rgba(0,0,0,0.09);
  --glass-bg:  rgba(255,255,255,0.7);
  --shadow-float:  0 4px 24px rgba(0,0,0,0.12);
  --shadow-card:   0 1px 8px rgba(0,0,0,0.07);
  --shadow-popup:  0 8px 32px rgba(0,0,0,0.18);
  /* Surfaces */
  --sidebar-bg: #F8F3EA;
  --chat-bg:   rgba(255,255,255,0.6);
  --btn-bg:    rgba(0,0,0,0.04);
  --btn-hover: rgba(0,0,0,0.08);
  /* Code + text tokens */
  --code-bg:    rgba(0,0,0,0.07);
  --text-white: var(--text);
  --text-em:    var(--text-dim);
  --text-code:  #1a5e32;
  /* Panel surfaces — canvas tint (Paper) para topbar/input/nav, raised (White) para panel/dropdown/popup/heavy/mobile-sidebar */
  --surface-topbar:         rgba(248,243,234,0.88);
  --surface-panel:          rgba(255,255,255,0.97);
  --surface-input:          rgba(248,243,234,0.8);
  --surface-heavy:          rgba(255,255,255,0.99);
  --surface-mobile-sidebar: rgba(255,255,255,0.98);
  --surface-nav:            rgba(248,243,234,0.9);
  --surface-dropdown:       #FFFFFF;
  --surface-popup:          #FFFFFF;
  /* Black overlays — más suaves en light */
  --black-12:  rgba(0,0,0,0.05);
  --black-15:  rgba(0,0,0,0.07);
  --black-20:  rgba(0,0,0,0.08);
  --black-25:  rgba(0,0,0,0.07);
  --black-35:  rgba(0,0,0,0.08);
  --black-45:  rgba(0,0,0,0.10);
  --black-50:  rgba(0,0,0,0.12);
  /* Glow */
  --text-ok:      var(--success);    /* #2e7d32 ≈ 4.64:1 vs #F8F3EA (AA) */
  --text-err:     var(--danger);     /* #c62828 ≈ 5.09:1 vs #F8F3EA (AA) */
  --glow:         0 0 14px rgba(144,100,34,0.14);
  --glow-sm:      0 0 8px rgba(144,100,34,0.09);
  --glow-violet:  0 0 10px rgba(99,102,241,0.10);
  --accent-soft:  rgba(144,100,34,0.05);
  --ambient:      radial-gradient(ellipse 90% 40% at 50% 0%, rgba(144,100,34,0.025) 0%, transparent 70%);
  /* ── accent tints — #906422 = rgba(144,100,34) */
  --accent-3:   rgba(144,100,34,0.03);
  --accent-4:   rgba(144,100,34,0.04);
  --accent-5:   rgba(144,100,34,0.05);
  --accent-6:   rgba(144,100,34,0.06);
  --accent-7:   rgba(144,100,34,0.07);
  --accent-8:   rgba(144,100,34,0.08);
  --accent-9:   rgba(144,100,34,0.09);
  --accent-10:  rgba(144,100,34,0.10);
  --accent-12:  rgba(144,100,34,0.12);
  --accent-13:  rgba(144,100,34,0.13);
  --accent-14:  rgba(144,100,34,0.14);
  --accent-15:  rgba(144,100,34,0.15);
  --accent-18:  rgba(144,100,34,0.18);
  --accent-20:  rgba(144,100,34,0.20);
  --accent-22:  rgba(144,100,34,0.22);
  --accent-25:  rgba(144,100,34,0.25);
  --accent-30:  rgba(144,100,34,0.30);
  --accent-35:  rgba(144,100,34,0.35);
  --accent-40:  rgba(144,100,34,0.40);
  --accent-45:  rgba(144,100,34,0.45);
  --accent-50:  rgba(144,100,34,0.50);
  --accent-85:  rgba(144,100,34,0.85);
  --accent2-7:  rgba(113,79,27,0.07);
  --accent2-13: rgba(113,79,27,0.13);
  /* ── background sheets (canvas tint = Paper) */
  --bg-blur:      rgba(248,243,234,0.88);
  --bg-sheet-60:  rgba(248,243,234,0.60);
  --bg-sheet-85:  rgba(248,243,234,0.85);
  --bg-sheet-90:  rgba(248,243,234,0.90);
  --bg-sheet-95:  rgba(248,243,234,0.95);
  --bg-sheet-97:  rgba(248,243,234,0.97);
  /* ── white/black overlays — remapeados para fondo claro */
  --white-2:   rgba(255,255,255,0.50);
  --white-12:  rgba(255,255,255,0.70);
  --white-20:  rgba(0,0,0,0.12);
  --black-40:  rgba(0,0,0,0.08);
  --black-55:  rgba(0,0,0,0.12);
  --black-60:  rgba(0,0,0,0.12);
  --black-75:  rgba(0,0,0,0.18);
  /* ── shadows laterales */
  --shadow-side:   -4px 0 16px rgba(0,0,0,0.08);
  --shadow-bottom: 0 -4px 16px rgba(0,0,0,0.08);
  /* ── success tints — #2e7d32 = rgba(46,125,50) */
  --success-4:   rgba(46,125,50,0.04);
  --success-6:   rgba(46,125,50,0.06);
  --success-8:   rgba(46,125,50,0.08);
  --success-10:  rgba(46,125,50,0.10);
  --success-12:  rgba(46,125,50,0.12);
  --success-15:  rgba(46,125,50,0.15);
  --success-18:  rgba(46,125,50,0.18);
  --success-25:  rgba(46,125,50,0.25);
  --success-30:  rgba(46,125,50,0.30);
  --success-35:  rgba(46,125,50,0.35);
  --success-40:  rgba(46,125,50,0.40);
  --success-50:  rgba(46,125,50,0.50);
  --success-55:  rgba(46,125,50,0.55);
  /* ── warning tints — #e65100 = rgba(230,81,0) */
  --warning-4:   rgba(230,81,0,0.04);
  --warning-8:   rgba(230,81,0,0.08);
  --warning-15:  rgba(230,81,0,0.15);
  --warning-20:  rgba(230,81,0,0.20);
  --warning-25:  rgba(230,81,0,0.25);
  --warning-40:  rgba(230,81,0,0.40);
  --warning-50:  rgba(230,81,0,0.50);
  /* ── danger tints — #c62828 = rgba(198,40,40) */
  --danger-0:    rgba(198,40,40,0);
  --danger-8:    rgba(198,40,40,0.08);
  --danger-10:   rgba(198,40,40,0.10);
  --danger-12:   rgba(198,40,40,0.12);
  --danger-15:   rgba(198,40,40,0.15);
  --danger-20:   rgba(198,40,40,0.20);
  --danger-40:   rgba(198,40,40,0.40);
  --danger-50:   rgba(198,40,40,0.50);
  /* ── extended palette tints (colores decorativos, rgba iguales) */
  --violet-6:    rgba(167,139,250,0.06);
  --violet-7:    rgba(167,139,250,0.07);
  --violet-8:    rgba(167,139,250,0.08);
  --violet-10:   rgba(167,139,250,0.10);
  --violet-12:   rgba(167,139,250,0.12);
  --violet-15:   rgba(167,139,250,0.15);
  --violet-18:   rgba(167,139,250,0.18);
  --violet-20:   rgba(167,139,250,0.20);
  --violet-22:   rgba(167,139,250,0.22);
  --violet-30:   rgba(167,139,250,0.30);
  --violet-35:   rgba(167,139,250,0.35);
  --violet-40:   rgba(167,139,250,0.40);
  --violet-45:   rgba(167,139,250,0.45);
  --indigo-10:   rgba(99,102,241,0.10);
  --indigo-15:   rgba(99,102,241,0.15);
  --emerald-7:   rgba(16,185,129,0.07);
  --emerald-14:  rgba(16,185,129,0.14);
  --emerald-15:  rgba(16,185,129,0.15);
  --emerald-22:  rgba(16,185,129,0.22);
  --emerald-28:  rgba(16,185,129,0.28);
  --emerald-40:  rgba(16,185,129,0.40);
  --amber-7:     rgba(251,191,36,0.07);
  --amber-12:    rgba(251,191,36,0.12);
  --amber-20:    rgba(251,191,36,0.20);
  --amber-22:    rgba(251,191,36,0.22);
  --amber-30:    rgba(251,191,36,0.30);
  --amber-alt-12: rgba(245,158,11,0.12);
  --amber-alt-30: rgba(245,158,11,0.30);
  --orange-15:   rgba(255,183,77,0.15);
  --green-12:    rgba(34,197,94,0.12);
  --green-15:    rgba(34,197,94,0.15);
  --green-30:    rgba(34,197,94,0.30);
  --green-35:    rgba(34,197,94,0.35);
  --blue-6:      rgba(59,130,246,0.06);
  --blue-10:     rgba(59,130,246,0.10);
  --blue-18:     rgba(59,130,246,0.18);
  --red-8:       rgba(239,68,68,0.08);
  --red-25:      rgba(239,68,68,0.25);
  --red-40:      rgba(239,68,68,0.40);
  --red-50:      rgba(239,68,68,0.50);
  --red-60:      rgba(239,68,68,0.60);
  --red-85:      rgba(239,68,68,0.85);
  --red-90:      rgba(239,68,68,0.90);
  /* ── on-color tokens */
  --on-accent:   #fff;
  --on-danger:   #fff;
  --on-success:  #fff;
  /* ── misc */
  --emerald-green: #34d399;
  --gray-10:     rgba(90,110,133,0.10);
  --gray-20:     rgba(90,110,133,0.20);
  --toast-bg:    rgba(232,238,245,0.97);
  --toast-text:  var(--text);
  --text-muted:  rgba(90,110,133,0.50);
}

/* ── Auto theme: sigue prefers-color-scheme ─────────────────────────────────── */
@media (prefers-color-scheme: light) {
  /* Activa si data-theme="auto" (elegido por usuario) o sin atributo (default) */
  html:not([data-theme]),
  [data-theme="auto"] {
    color-scheme: light;
    --bg:        #F8F3EA;
    --bg2:       rgba(0,0,0,0.02);
    --bg3:       rgba(0,0,0,0.05);
    --bg4:       rgba(0,0,0,0.09);
    --surface2:  var(--bg3);
    --text:      #0B0B0B;
    --text-dim:  rgba(32,32,32,0.65);
    --accent:    #906422;
    --accent2:   #714F1B;
    --accent-hover: #7A551D;
    --success:   #2e7d32;
    --warning:   #e65100;
    --danger:    #c62828;
    --border:    rgba(0,0,0,0.09);
    --glass-bg:  rgba(255,255,255,0.7);
    --shadow-float:  0 4px 24px rgba(0,0,0,0.12);
    --shadow-card:   0 1px 8px rgba(0,0,0,0.07);
    --shadow-popup:  0 8px 32px rgba(0,0,0,0.18);
    --shadow-side:  -4px 0 16px rgba(0,0,0,0.08);
    --shadow-bottom: 0 -4px 16px rgba(0,0,0,0.08);
    --sidebar-bg: #F8F3EA;
    --chat-bg:   rgba(255,255,255,0.6);
    --btn-bg:    rgba(0,0,0,0.04);
    --btn-hover: rgba(0,0,0,0.08);
    --code-bg:    rgba(0,0,0,0.07);
    --text-white: var(--text);
    --text-em:    var(--text-dim);
    --text-code:  #1a5e32;
    --surface-topbar:         rgba(248,243,234,0.88);
    --surface-panel:          rgba(255,255,255,0.97);
    --surface-input:          rgba(248,243,234,0.8);
    --surface-heavy:          rgba(255,255,255,0.99);
    --surface-mobile-sidebar: rgba(255,255,255,0.98);
    --surface-nav:            rgba(248,243,234,0.9);
    --surface-dropdown:       #FFFFFF;
    --surface-popup:          #FFFFFF;
    --black-12:  rgba(0,0,0,0.05);
    --black-15:  rgba(0,0,0,0.07);
    --black-20:  rgba(0,0,0,0.08);
    --black-25:  rgba(0,0,0,0.07);
    --black-35:  rgba(0,0,0,0.08);
    --black-45:  rgba(0,0,0,0.10);
    --black-50:  rgba(0,0,0,0.12);
    --text-ok:   var(--success);
    --text-err:  var(--danger);
    --glow:         0 0 14px rgba(144,100,34,0.14);
    --glow-sm:      0 0 8px rgba(144,100,34,0.09);
    --glow-violet:  0 0 10px rgba(99,102,241,0.10);
    --accent-soft:  rgba(144,100,34,0.05);
    --ambient:      radial-gradient(ellipse 90% 40% at 50% 0%, rgba(144,100,34,0.025) 0%, transparent 70%);
    /* ── accent tints — #906422 = rgba(144,100,34) */
    --accent-3:   rgba(144,100,34,0.03);
    --accent-4:   rgba(144,100,34,0.04);
    --accent-5:   rgba(144,100,34,0.05);
    --accent-6:   rgba(144,100,34,0.06);
    --accent-7:   rgba(144,100,34,0.07);
    --accent-8:   rgba(144,100,34,0.08);
    --accent-9:   rgba(144,100,34,0.09);
    --accent-10:  rgba(144,100,34,0.10);
    --accent-12:  rgba(144,100,34,0.12);
    --accent-13:  rgba(144,100,34,0.13);
    --accent-14:  rgba(144,100,34,0.14);
    --accent-15:  rgba(144,100,34,0.15);
    --accent-18:  rgba(144,100,34,0.18);
    --accent-20:  rgba(144,100,34,0.20);
    --accent-22:  rgba(144,100,34,0.22);
    --accent-25:  rgba(144,100,34,0.25);
    --accent-30:  rgba(144,100,34,0.30);
    --accent-35:  rgba(144,100,34,0.35);
    --accent-40:  rgba(144,100,34,0.40);
    --accent-45:  rgba(144,100,34,0.45);
    --accent-50:  rgba(144,100,34,0.50);
    --accent-85:  rgba(144,100,34,0.85);
    --accent2-7:  rgba(113,79,27,0.07);
    --accent2-13: rgba(113,79,27,0.13);
    /* ── background sheets (canvas tint = Paper) */
    --bg-blur:      rgba(248,243,234,0.88);
    --bg-sheet-60:  rgba(248,243,234,0.60);
    --bg-sheet-85:  rgba(248,243,234,0.85);
    --bg-sheet-90:  rgba(248,243,234,0.90);
    --bg-sheet-95:  rgba(248,243,234,0.95);
    --bg-sheet-97:  rgba(248,243,234,0.97);
    /* ── white/black overlays — remapeados para fondo claro */
    --white-2:   rgba(255,255,255,0.50);
    --white-12:  rgba(255,255,255,0.70);
    --white-20:  rgba(0,0,0,0.12);
    --black-40:  rgba(0,0,0,0.08);
    --black-55:  rgba(0,0,0,0.12);
    --black-60:  rgba(0,0,0,0.12);
    --black-75:  rgba(0,0,0,0.18);
    /* ── success tints — #2e7d32 = rgba(46,125,50) */
    --success-4:   rgba(46,125,50,0.04);
    --success-6:   rgba(46,125,50,0.06);
    --success-8:   rgba(46,125,50,0.08);
    --success-10:  rgba(46,125,50,0.10);
    --success-12:  rgba(46,125,50,0.12);
    --success-15:  rgba(46,125,50,0.15);
    --success-18:  rgba(46,125,50,0.18);
    --success-25:  rgba(46,125,50,0.25);
    --success-30:  rgba(46,125,50,0.30);
    --success-35:  rgba(46,125,50,0.35);
    --success-40:  rgba(46,125,50,0.40);
    --success-50:  rgba(46,125,50,0.50);
    --success-55:  rgba(46,125,50,0.55);
    /* ── warning tints — #e65100 = rgba(230,81,0) */
    --warning-4:   rgba(230,81,0,0.04);
    --warning-8:   rgba(230,81,0,0.08);
    --warning-15:  rgba(230,81,0,0.15);
    --warning-20:  rgba(230,81,0,0.20);
    --warning-25:  rgba(230,81,0,0.25);
    --warning-40:  rgba(230,81,0,0.40);
    --warning-50:  rgba(230,81,0,0.50);
    /* ── danger tints — #c62828 = rgba(198,40,40) */
    --danger-0:    rgba(198,40,40,0);
    --danger-8:    rgba(198,40,40,0.08);
    --danger-10:   rgba(198,40,40,0.10);
    --danger-12:   rgba(198,40,40,0.12);
    --danger-15:   rgba(198,40,40,0.15);
    --danger-20:   rgba(198,40,40,0.20);
    --danger-40:   rgba(198,40,40,0.40);
    --danger-50:   rgba(198,40,40,0.50);
    /* ── extended palette tints (colores decorativos, rgba iguales) */
    --violet-6:    rgba(167,139,250,0.06);
    --violet-7:    rgba(167,139,250,0.07);
    --violet-8:    rgba(167,139,250,0.08);
    --violet-10:   rgba(167,139,250,0.10);
    --violet-12:   rgba(167,139,250,0.12);
    --violet-15:   rgba(167,139,250,0.15);
    --violet-18:   rgba(167,139,250,0.18);
    --violet-20:   rgba(167,139,250,0.20);
    --violet-22:   rgba(167,139,250,0.22);
    --violet-30:   rgba(167,139,250,0.30);
    --violet-35:   rgba(167,139,250,0.35);
    --violet-40:   rgba(167,139,250,0.40);
    --violet-45:   rgba(167,139,250,0.45);
    --indigo-10:   rgba(99,102,241,0.10);
    --indigo-15:   rgba(99,102,241,0.15);
    --emerald-7:   rgba(16,185,129,0.07);
    --emerald-14:  rgba(16,185,129,0.14);
    --emerald-15:  rgba(16,185,129,0.15);
    --emerald-22:  rgba(16,185,129,0.22);
    --emerald-28:  rgba(16,185,129,0.28);
    --emerald-40:  rgba(16,185,129,0.40);
    --amber-7:     rgba(251,191,36,0.07);
    --amber-12:    rgba(251,191,36,0.12);
    --amber-20:    rgba(251,191,36,0.20);
    --amber-22:    rgba(251,191,36,0.22);
    --amber-30:    rgba(251,191,36,0.30);
    --amber-alt-12: rgba(245,158,11,0.12);
    --amber-alt-30: rgba(245,158,11,0.30);
    --orange-15:   rgba(255,183,77,0.15);
    --green-12:    rgba(34,197,94,0.12);
    --green-15:    rgba(34,197,94,0.15);
    --green-30:    rgba(34,197,94,0.30);
    --green-35:    rgba(34,197,94,0.35);
    --blue-6:      rgba(59,130,246,0.06);
    --blue-10:     rgba(59,130,246,0.10);
    --blue-18:     rgba(59,130,246,0.18);
    --red-8:       rgba(239,68,68,0.08);
    --red-25:      rgba(239,68,68,0.25);
    --red-40:      rgba(239,68,68,0.40);
    --red-50:      rgba(239,68,68,0.50);
    --red-60:      rgba(239,68,68,0.60);
    --red-85:      rgba(239,68,68,0.85);
    --red-90:      rgba(239,68,68,0.90);
    /* ── on-color tokens */
    --on-accent:   #fff;
    --on-danger:   #fff;
    --on-success:  #fff;
    /* ── misc */
    --emerald-green: #34d399;
    --gray-10:     rgba(90,110,133,0.10);
    --gray-20:     rgba(90,110,133,0.20);
    --toast-bg:    rgba(232,238,245,0.97);
    --toast-text:  var(--text);
    --text-muted:  rgba(90,110,133,0.50);
  }
}

/* ── Dark theme (explicit data-theme="dark") ─────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0B0B0B;
  --bg2:       rgba(255,255,255,0.03);
  --bg3:       rgba(255,255,255,0.06);
  --bg4:       rgba(255,255,255,0.10);
  --surface2:  var(--bg3);
  --accent:    #D9A85F;
  --accent2:   #A37127;
  --accent-hover: #F1D7A6;
  --success:   #66bb6a;
  --warning:   #ffa726;
  --danger:    #ef5350;
  --text:      #F8F3EA;
  --text-dim:  rgba(248,243,234,0.55);
  --border:    rgba(255,255,255,0.07);
  --glass-bg:  rgba(255,255,255,0.04);
  --shadow-float: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-card:  0 1px 8px rgba(0,0,0,0.3);
  --shadow-popup: 0 8px 32px rgba(0,0,0,0.60);
  --sidebar-bg: #0B0B0B;
  --chat-bg:   rgba(255,255,255,0.05);
  --btn-bg:    rgba(255,255,255,0.06);
  --btn-hover: rgba(255,255,255,0.10);
  --code-bg:   rgba(0,0,0,0.35);
  --text-white: #ffffff;
  --text-em:   #FFFFFF;
  --text-code: #a8e6cf;
  --surface-topbar:         rgba(32,32,32,0.8);
  --surface-panel:          rgba(32,32,32,0.9);
  --surface-input:          rgba(32,32,32,0.6);
  --surface-heavy:          rgba(32,32,32,0.97);
  --surface-mobile-sidebar: rgba(32,32,32,0.95);
  --surface-nav:            rgba(32,32,32,0.85);
  --surface-dropdown:       #202020;
  --surface-popup:          #202020;
  --black-12:  rgba(0,0,0,0.12);
  --black-15:  rgba(0,0,0,0.15);
  --black-20:  rgba(0,0,0,0.20);
  --black-25:  rgba(0,0,0,0.25);
  --black-35:  rgba(0,0,0,0.35);
  --black-45:  rgba(0,0,0,0.45);
  --black-50:  rgba(0,0,0,0.50);
  --text-ok:   #56d364;
  --text-err:  #f85149;
  --glow:         0 0 18px rgba(217,168,95,0.22);
  --glow-sm:      0 0 10px rgba(217,168,95,0.14);
  --glow-violet:  0 0 14px rgba(167,139,250,0.18);
  --accent-soft:  rgba(217,168,95,0.07);
  --ambient:      radial-gradient(ellipse 90% 40% at 50% 0%, rgba(217,168,95,0.04) 0%, transparent 70%);
}

/* Ambient gradient en paneles laterales — luz sutil desde el borde superior */
#sidebar,
#files-panel,
#settings-panel,
#crons-panel {
  background-image: var(--ambient);
}

/* Topbar — halo muy tenue en el borde inferior */
#topbar {
  box-shadow: 0 1px 0 var(--border), 0 4px 24px var(--accent-3);
}

/* Send button — glow suave cuando está disponible */
.send-btn:not(:disabled) {
  box-shadow: var(--glow-sm);
  transition: background 0.2s var(--ease), transform 0.15s var(--ease), box-shadow 0.25s var(--ease);
}
.send-btn:hover:not(:disabled) {
  box-shadow: var(--glow);
}

/* Pills activas — workspace, agente */
.workspace-pill.active {
  box-shadow: var(--glow-sm);
}
.agent-pill.active {
  box-shadow: var(--glow-sm);
}

/* Input focus — glow cian en el borde */
#msg-input:focus {
  box-shadow: var(--glow-sm);
}
.q-card-input:focus {
  box-shadow: var(--glow-sm);
}
#login-form input:focus {
  box-shadow: var(--glow-sm);
}

/* Thread items — sombra violeta cromática en hover */
.thread-item:hover {
  box-shadow: 0 2px 12px var(--violet-7);
}
.thread-item.active {
  box-shadow: 0 0 0 1px var(--accent-8);
}

/* Ticket y plan cards — sombra cian en hover */
.tkt-card:hover {
  box-shadow: 0 2px 14px var(--accent-9);
}
.plan-hub-card:hover {
  box-shadow: 0 2px 16px var(--accent-10);
  border-color: var(--accent-35);
}

/* Primary buttons — glow en hover */
.admin-btn.primary:hover {
  box-shadow: var(--glow-sm);
}
.wizard-btn.primary:hover,
.tkt-btn-submit:not(:disabled):hover {
  box-shadow: var(--glow-sm);
}
.modal-btn.primary:hover {
  box-shadow: var(--glow-sm);
}

/* New thread button */
.new-thread-btn:hover {
  box-shadow: var(--glow-sm);
}

/* Filter pills activas */
.task-filter-btn.active {
  box-shadow: var(--glow-sm);
}
.tkt-filter-btn.active {
  box-shadow: var(--glow-sm);
}

/* Streaming bubble — micro-aura cian lateral */
.msg-bubble.streaming {
  box-shadow: -2px 0 12px var(--accent-6);
}

/* Admin tab activo */
.admin-tab.active {
  box-shadow: 0 2px 0 var(--accent);
}

/* Login button */
#login-form button:not(:disabled):hover {
  box-shadow: var(--glow);
}

/* ── Theme transition ──────────────────────────────────────────────────────── */
html { color-scheme: dark light; }

/* ── Theme segmented control ────────────────────────────────────────────────── */
.theme-segmented {
  display: flex;
  gap: 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.theme-seg-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 8px;
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: 12px; font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
  white-space: nowrap;
}
.theme-seg-btn:hover { color: var(--text); background: var(--bg4); }
.theme-seg-btn.active {
  background: var(--surface-dropdown);
  color: var(--accent);
  box-shadow: var(--shadow-card);
}
.theme-seg-btn svg, .theme-seg-btn i { width: 13px; height: 13px; flex-shrink: 0; }


/* ── Light mode element overrides ────────────────────────────────────────── */
[data-theme="light"] .msg.assistant .msg-bubble {
  background: var(--light-bubble-bg);
  border-color: var(--light-border-soft);
}
[data-theme="light"] .msg-bubble code {
  background: var(--light-border-soft);
  color: var(--light-slate-700);
}
[data-theme="light"] .msg-bubble pre {
  background: var(--light-pre-bg);
  color: var(--light-slate-800);
}
[data-theme="light"] .msg-bubble strong { color: var(--light-slate-900); }
[data-theme="light"] .msg-bubble em     { color: var(--light-slate-500); }
[data-theme="light"] .activity-body,
[data-theme="light"] .tool-body { background: var(--light-tool-bg); }
[data-theme="light"] .tool-content {
  background: var(--light-pre-bg); color: var(--light-slate-700); border-color: var(--light-border-tool);
}
[data-theme="light"] .tool-content.output { color: var(--text); }
[data-theme="light"] #cron-form { background: var(--light-tool-bg); }
[data-theme="light"] .modal-box { box-shadow: 0 8px 32px var(--light-modal-shadow); }
[data-theme="light"] ::-webkit-scrollbar-thumb       { background: var(--light-scroll-thumb); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--light-scroll-hover); }
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .msg.assistant .msg-bubble {
    background: var(--light-bubble-bg); border-color: var(--light-border-soft);
  }
  html:not([data-theme]) .msg-bubble code { background: var(--light-border-soft); color: var(--light-slate-700); }
  html:not([data-theme]) .msg-bubble pre  { background: var(--light-pre-bg); color: var(--light-slate-800); }
  html:not([data-theme]) .msg-bubble strong { color: var(--light-slate-900); }
  html:not([data-theme]) .msg-bubble em     { color: var(--light-slate-500); }
  html:not([data-theme]) .activity-body,
  html:not([data-theme]) .tool-body { background: var(--light-tool-bg); }
  html:not([data-theme]) .tool-content { background: var(--light-pre-bg); color: var(--light-slate-700); border-color: var(--light-border-tool); }
  html:not([data-theme]) .tool-content.output { color: var(--text); }
  html:not([data-theme]) #cron-form { background: var(--light-tool-bg); }
  html:not([data-theme]) .modal-box { box-shadow: 0 8px 32px var(--light-modal-shadow); }
  html:not([data-theme]) ::-webkit-scrollbar-thumb       { background: var(--light-scroll-thumb); }
  html:not([data-theme]) ::-webkit-scrollbar-thumb:hover { background: var(--light-scroll-hover); }
}

/* ── prefers-reduced-motion: silencia todos los glows nuevos ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .send-btn,
  .send-btn:not(:disabled),
  .send-btn:hover:not(:disabled),
  .workspace-pill.active,
  .agent-pill.active,
  #msg-input:focus,
  .q-card-input:focus,
  #login-form input:focus,
  .thread-item:hover,
  .thread-item.active,
  .tkt-card:hover,
  .plan-hub-card:hover,
  .admin-btn.primary:hover,
  .wizard-btn.primary:hover,
  .tkt-btn-submit:not(:disabled):hover,
  .modal-btn.primary:hover,
  .new-thread-btn:hover,
  .task-filter-btn.active,
  .tkt-filter-btn.active,
  .ws-dot.connected,
  .msg-bubble.streaming,
  .admin-tab.active,
  #login-form button:not(:disabled):hover {
    box-shadow: none;
  }
  #topbar { box-shadow: 0 1px 0 var(--border); }
  .live-activity-pill { animation: none; background: var(--accent-10); }
  .live-activity-pill::after { animation: none; }
  .lap-dot { animation: none; opacity: 0.7; }
  .msg-bubble.streaming { animation: none; }
  .msg-bubble.streaming::after { animation: none; }
  .presence-orb, .presence-orb.thinking, .presence-orb.error { animation: none; transform: none; }
  .presence-orb::before { animation: none; opacity: 0.6; }
  #login-screen::before { animation: none; }
  #login-screen::after { animation: none; opacity: 0.7; }
  .tool-body-inner { transition: opacity 0.15s var(--ease); transform: none; filter: none; }
  .lap-dot::before { animation: none; opacity: 0.6; }
  .ws-dot.connecting, .ws-dot.connecting::before, .thread-dot.running { animation: none; }
  .presence-orb::after { animation: none; opacity: 0; }
  .chat-fade-in { animation: none; }
  .skel-bubble { animation: none; background-position: 0 0; }
}

/* ── Identidad y permisos (miembros del workspace) ─────────────────────────── */
/* Badge de remitente verificado en mensajes de chat — la identidad viene de la
   sesión autenticada (server), nunca del texto del mensaje. */
.msg-sender {
  display: flex; align-items: center; gap: 4px;
  justify-content: flex-end;
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  margin: 0 4px 3px 0;
}
.msg-sender svg { width: 13px; height: 13px; color: var(--accent); }

.team-perms-hint {
  font-size: 12px; color: var(--text-dim); line-height: 1.5;
  padding: 8px 10px; margin-bottom: 10px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}

/* Cuenta de Claude Code del workspace — autoservicio del dueño de la cuenta */
.cc-box {
  padding: 10px 12px; margin-bottom: 4px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.cc-status { font-size: 13px; font-weight: 600; color: var(--text); }
.cc-status.cc-good { color: var(--success); }
.cc-status.cc-warn { color: var(--warning, #b7791f); }
.cc-status.cc-bad  { color: var(--danger); }
.cc-meta      { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.cc-warn-line { font-size: 12px; color: var(--danger); margin-top: 6px; line-height: 1.45; }
/* Historial de la cuenta de Claude Code (fallbacks, rechazos, recuperaciones) */
.cc-events { margin-top: 10px; font-size: 11px; color: var(--text-dim); }
.cc-events summary { cursor: pointer; user-select: none; }
.cc-event { display: flex; gap: 8px; padding: 3px 0; border-top: 1px solid var(--border, rgba(0,0,0,0.06)); line-height: 1.4; }
.cc-event-when { flex: 0 0 auto; white-space: nowrap; opacity: 0.8; }
.cc-event-tag  { flex: 0 0 auto; font-weight: 600; }
.cc-event-det  { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cc-actions   { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cc-steps     { margin: 12px 0 4px; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--text); }
.cc-steps li  { margin-bottom: 12px; }
.cc-hint      { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-top: 4px; }
.cc-hint code, .cc-cmd code {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px;
  background: var(--bg3); padding: 1px 5px; border-radius: 4px;
}
.cc-cmd {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 8px;
}
.cc-cmd code { flex: 1; background: none; padding: 0; font-size: 13px; }
.cc-copy { padding: 3px 10px; font-size: 11px; }
.team-member {
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.team-member:last-child { border-bottom: none; }
.team-member-head { display: flex; align-items: center; gap: 8px; }
.team-member-name { font-weight: 600; font-size: 14px; color: var(--text); flex: 1; }
.team-edit-btn { opacity: 0.6; }
.team-edit-btn:hover { opacity: 1; }
.team-member-reports { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.team-grants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.perm-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-em);
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 3px 10px;
}
.perm-chip.editable { padding-right: 6px; }
.perm-chip-x {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 14px; line-height: 1; padding: 0 2px;
}
.perm-chip-x:hover { color: var(--danger); }
.team-grants-empty { font-size: 12px; color: var(--text-muted); font-style: italic; }
.team-grant-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.team-grant-editor { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.team-editor-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.team-editor-actions { display: flex; gap: 8px; justify-content: flex-end; }
.team-grant-input { font-size: 12px; }
.team-log-details summary { list-style: none; }
.team-log-details summary::-webkit-details-marker { display: none; }
.team-log-details summary::after { content: ' ▸'; color: var(--text-dim); }
.team-log-details[open] summary::after { content: ' ▾'; }
.team-perms-log { max-height: 160px; overflow-y: auto; margin-top: 6px; }
.team-log-entry { font-size: 12px; color: var(--text-dim); padding: 3px 0; line-height: 1.5; }
.team-log-entry strong { color: var(--text-em); font-weight: 600; }
.team-log-date { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.team-log-note { color: var(--text-muted); font-style: italic; }
/* La lista de miembros del modal Equipo necesita más aire que el share-list
   genérico (160px): cada miembro trae chips de permisos + meta + editor. */
#team-members-list.share-list { max-height: 46vh; }
#team-panel-overlay .modal-box { max-height: 90vh; }
#team-panel-overlay .modal-body { overflow-y: auto; }

/* ── Mobile: evitar auto-zoom de iOS Safari en campos enfocables ─────────────
   iOS Safari zoomea al enfocar cualquier input/textarea/select con
   font-size < 16px y no revierte el zoom al desenfocar. Placed last on
   purpose: varios selectores de abajo (.tkt-input, .modal-input,
   .team-grant-input, .group-msg-input, etc.) se declaran más abajo en este
   mismo archivo que el bloque @media mobile de la L2395, así que un override
   puesto ahí perdería el cascade por orden de aparición. Desktop (>768px)
   no se toca — la densidad 12-13px ahí es decisión de diseño. */
@media (max-width: 768px) {
  #msg-input,
  #group-msg-input,
  .group-msg-input,
  .tkt-input,
  .tkt-textarea,
  .tkt-select,
  .tkt-detail-field select,
  .tkt-comment-form textarea,
  .settings-textarea,
  #cron-form-prompt,
  .cron-form-inner input,
  .cron-form-inner select,
  .cron-form-inner textarea,
  #thread-search-input,
  .ws-picker-search input,
  .admin-input,
  .wizard-input,
  .q-card-input,
  .modal-input,
  .team-grant-input,
  #reauth-token-input,
  #login-form input,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* ── Widget de decisión (bloque ```decision en un mensaje del agente) ─────────
   Hereda el lenguaje de .task-question-block (el bloque de pregunta de tareas)
   pero con más presencia: esto interrumpe la lectura a propósito, es lo único
   del mensaje que pide una acción. */
.decision-block {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent-8);
  border: 1px solid var(--accent-35);
  border-left: 3px solid var(--accent);
}
.decision-label {
  font-size: 11px; color: var(--text-dim);
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.decision-question {
  font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4;
}
.decision-context {
  margin-top: 6px; font-size: 13px; color: var(--text-dim); line-height: 1.45;
}
.decision-options {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.decision-btn {
  flex: 1 1 auto;
  min-height: 44px;              /* touch target */
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  background: var(--accent-15);
  border: 1px solid var(--accent-35);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
}
.decision-btn:hover:not(:disabled) { background: var(--accent-25); }
.decision-btn:active:not(:disabled) { opacity: 0.7; }
/* La opción por defecto se marca, no se esconde: es la que corre si no contestás. */
.decision-btn-default {
  background: var(--accent-25);
  border-color: var(--accent);
}
.decision-def-tag {
  font-size: 10px; font-weight: 500; opacity: 0.75;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.decision-free { display: flex; gap: 6px; margin-top: 10px; }
.decision-free .decision-input { flex: 1; }
.decision-send {
  min-width: 44px; min-height: 38px;
  border-radius: var(--radius-sm);
  background: var(--accent-15);
  border: 1px solid var(--accent-35);
  color: var(--accent);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.decision-send:hover:not(:disabled) { background: var(--accent-25); }
/* Deliberar es la salida secundaria: presente, pero sin competir con decidir ya. */
.decision-split {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 4px 0;
  font-size: 12px; color: var(--text-dim); cursor: pointer;
}
.decision-split:hover:not(:disabled) { color: var(--accent); text-decoration: underline; }
.decision-done {
  margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--accent);
}
.decision-answered { opacity: 0.6; }
.decision-answered .decision-btn,
.decision-answered .decision-send,
.decision-answered .decision-split,
.decision-answered .decision-input { cursor: default; }

/* oauth-connect: mismo shell que decision-block (misma familia visual, "el
   sistema necesita algo tuyo, acá mismo"), contenido angosto a propósito —
   sin pregunta/contexto/opciones, es un solo botón. Ver CRITIQUE-LOG.md. */
.oauth-connect-block .decision-label { margin-bottom: 10px; }
.oauth-connect-row { display: flex; align-items: center; gap: 10px; }
.oauth-connect-row .integration-info { flex: 1; min-width: 0; }
.oauth-connect-row .decision-btn { flex: 0 0 auto; min-height: 38px; }
.oauth-connect-row .decision-done { margin-top: 0; }

/* Chips de parentesco entre threads en la barra de contexto */
.thread-context-parent, .thread-context-child { opacity: 0.85; }

.cc-fallback { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.cc-fallback > summary { font-size: 12px; color: var(--text-dim); cursor: pointer; }
.cc-fallback > summary code { font-size: 11px; }

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: calc(var(--nav-h, 64px) + 12px); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  max-width: 90vw; padding: 10px 18px; border-radius: 12px;
  z-index: var(--z-toast, 300); font-size: 13px; font-family: inherit;
  white-space: normal; text-align: left;
  background: var(--toast-bg); color: var(--toast-text);
  box-shadow: 0 4px 20px var(--black-50);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--white-12);
}
.toast-icon { flex-shrink: 0; display: inline-flex; }
.toast.is-clickable { cursor: pointer; }
.toast-success .toast-icon { color: var(--success); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info    .toast-icon { color: var(--blue); }
.toast-error {
  background: var(--danger); color: var(--on-danger);
  border-color: var(--danger);
}
.toast-error .toast-icon { color: var(--on-danger); }

/* Fila nombre+emoji: la comparten el panel Equipo (nombre del workspace) y el
   modal de perfil del asistente. El input de emoji es fijo y angosto porque son
   1-2 glifos; el de nombre se come el resto. */
.ws-identity-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
}
.ws-identity-row .modal-input { margin: 0; flex: 1; min-width: 0; }
.ws-identity-row .modal-btn { margin: 0; flex: 0 0 auto; white-space: nowrap; }
.ws-identity-emoji { flex: 0 0 56px !important; text-align: center; }

/* Modelo editable desde el detalle de una tarea (task-drawer). */
.task-drawer-model-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.task-drawer-model-row .task-drawer-section-label { margin: 0; }
.tkt-select-inline { width: auto; min-width: 180px; }