/* The floating agent pill sits over .msgs: the transcript fades out under it (a mask of the surface itself, so
   nothing readable is ever covered) and the resting top padding keeps the first line below the fade. */
/* page rhythm, shared with Uso, Membros and Plano: the chat keeps the same breathing room as those pages. The side
   gutter grows with the window (20px on a laptop edge, up to 56px on a wide screen) and, with the agent panel closed,
   the column is the screens' content width (960 - 2 x 24). Phones keep their tight gutters. */
.pa {
  --navy-900:#001D3D;
  --navy-700:#003566;
  --navy-600:#004080;
  --navy-500:#0059B3;
  --navy-300:#66A3D9;
  --navy-100:#CCE0F2;
  --navy-50:#E6F0F9;
  --gold-700:#8F6E13;
  --gold-400:#F5CC00;
  --gold-300:#FFD633;
  --gold-100:#FFF0A3;
  --gold-50:#FFFBE6;
  --slate-950:#0C1222;
  --slate-900:#0F172A;
  --slate-800:#1E293B;
  --slate-700:#334155;
  --slate-600:#475569;
  --slate-500:#64748B;
  --slate-400:#94A3B8;
  --slate-300:#CBD5E1;
  --slate-200:#E2E8F0;
  --slate-100:#F1F5F9;
  --slate-50:#F8FAFC;
  --tone-info-bg:#E0F2FE;
  --tone-info-fg:#0369A1;
  --tone-gold-bg:var(--gold-100);
  --tone-gold-fg:#7D6200;
  --tone-ok-bg:#D1FAE5;
  --tone-ok-fg:#047857;
  --tone-warn-bg:#FEF3C7;
  --tone-warn-fg:#B45309;
  --tone-err-bg:#FEE2E2;
  --tone-err-fg:#B91C1C;
  --callout-gold-bg:var(--gold-50);
  --callout-gold-border:#FFE066;
  --callout-gold-fg:#7D6200;
  --danger-bg:#DC2626;
  --danger-fg:#FFFFFF;
  --field-err:var(--danger-bg);
  --knob-off:var(--surface);
  --knob-shadow:0 1px 2px rgba(15,23,42,0.25);
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'Fira Code','SF Mono',Consolas,Menlo,monospace;
  color-scheme:light;
  --chat-w:760px;
  --pill-clear:88px;
  --pill-fade:linear-gradient(to bottom, transparent 40px, #000 84px);
  --n-0:#FFFFFF;
  --n-50:#F7F7F8;
  --n-100:#F1F1F3;
  --n-150:#EDEDEF;
  --n-200:#E6E6E9;
  --n-250:#DEDEE2;
  --n-500:#62636A;
  --n-600:#55565B;
  --n-900:#1A1A1C;
  --bg:var(--n-50);
  --surface:var(--n-0);
  --surface-2:var(--n-100);
  --border:var(--n-200);
  --border-strong:#8E8E96;
  --text:var(--n-900);
  --text-2:var(--n-600);
  --muted:var(--n-500);
  --label:var(--n-500);
  --btn-bg:var(--navy-700);
  --btn-fg:#FFFFFF;
  --link:var(--navy-600);
  --focus:var(--navy-600);
  --hover:#EFEFF1;
  --nav-active-bg:#E8E8EB;
  --nav-active-fg:var(--text);
  --avatar-bg:var(--n-250);
  --avatar-fg:var(--text);
  --me-bg:var(--n-250);
  --me-fg:var(--text);
  --ag-bg:var(--n-150);
  --ag-fg:var(--text);
  --toggle-off:#A0A0A8;
  --toggle-on:var(--navy-700);
  --knob-on:#FFFFFF;
  --meter-track:var(--n-200);
  --meter-fill:var(--navy-700);
  --meter-soft:var(--navy-300);
  --tone-neutral-bg:#ECECEF;
  --tone-neutral-fg:#45464B;
  --toast-bg:var(--n-900);
  --toast-fg:#FFFFFF;
  --scrim:rgba(0,0,0,0.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,0.18);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,0.3);
  --r-bubble:20px;
  --r-pill:999px;
  --page-gutter:clamp(20px, 3.2vw, 56px);
}
/* dark: the selected agent row is a quiet slate surface; gold stays on the status dot only */
.pa.dark {
  --tone-info-bg:rgba(14,165,233,0.16);
  --tone-info-fg:#7DD3FC;
  --tone-gold-bg:rgba(245,204,0,0.15);
  --tone-gold-fg:var(--gold-400);
  --tone-ok-bg:rgba(16,185,129,0.16);
  --tone-ok-fg:#34D399;
  --tone-warn-bg:rgba(245,158,11,0.16);
  --tone-warn-fg:#FBBF24;
  --tone-err-bg:rgba(239,68,68,0.16);
  --tone-err-fg:#FCA5A5;
  --callout-gold-bg:rgba(245,204,0,0.06);
  --callout-gold-border:rgba(245,204,0,0.25);
  --callout-gold-fg:var(--gold-300);
  --danger-bg:#EF4444;
  --danger-fg:#0C1222;
  --field-err:var(--tone-err-fg);
  --knob-off:#FFFFFF;
  --knob-shadow:0 1px 2px rgba(0,0,0,0.35);
  color-scheme:dark;
  --contact-on-bg:var(--slate-800);
  --bg:#0F1011;
  --surface:#151617;
  --surface-2:#1B1C1E;
  --border:#26272A;
  --border-strong:#6A6B71;
  --text:#ECECED;
  --text-2:#A3A4A9;
  --muted:#8F9095;
  --label:#8F9095;
  --btn-bg:var(--navy-500);
  --btn-fg:#FFFFFF;
  --link:var(--navy-300);
  --focus:var(--navy-300);
  --hover:#1F2022;
  --nav-active-bg:#242528;
  --nav-active-fg:var(--text);
  --avatar-bg:#2D2E31;
  --avatar-fg:var(--text);
  --me-bg:#2D2E31;
  --me-fg:#F2F2F3;
  --ag-bg:#1F2022;
  --ag-fg:var(--text);
  --toggle-off:#4A4B50;
  --toggle-on:var(--navy-500);
  --knob-on:#FFFFFF;
  --meter-track:#2D2E31;
  --meter-fill:var(--navy-300);
  --meter-soft:var(--navy-500);
  --tone-neutral-bg:#26272A;
  --tone-neutral-fg:#C9CACE;
  --toast-bg:#ECECED;
  --toast-fg:#1A1A1C;
  --scrim:rgba(0,0,0,0.65);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,0.7);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,0.8);
}
.pa:not(.show-panel) { --chat-w:912px; }
@container (max-width: 1099px) {
  .pa { --chat-w:760px; --pill-clear:80px; --pill-fade:linear-gradient(to bottom, transparent 36px, #000 76px); }
}
@container (max-width: 719px) {
  .pa { --page-gutter:12px; }
}