/* DogzApp Design System - Calm, Supportive, Professional */

/* ========================================
   A) Foundations (Raw Scales)
   ======================================== */

:root {
  /* Color — Neutrals */
  --neutral-0: #FFFFFF;
  --neutral-25: #FCFCFB;
  --neutral-50: #FAFAF8;  /* paper */
  --neutral-100: #F3F4F5;
  --neutral-200: #E7EAEC;
  --neutral-300: #DADFE3;
  --neutral-400: #C7CDD2;
  --neutral-500: #A5AEB5;
  --neutral-600: #6A6F73;  /* muted text */
  --neutral-700: #3E474F;
  --neutral-800: #22303A;  /* ink alt */
  --neutral-900: #1A2B3B;  /* ink */

  /* Brand — Greens (nature, calm authority) */
  --green-50: #F3F7F4;
  --green-100: #E3EEE7;
  --green-200: #CADEAA;
  --green-300: #A3C9A0;
  --green-400: #7FB489;
  --green-500: #5A9D75;
  --green-600: #2F6F4E;  /* primary */
  --green-700: #255A40;
  --green-800: #1D4733;

  /* Supporting — Amber (gentle caution) */
  --amber-50: #FFF8E6;
  --amber-100: #FCEBCD;
  --amber-200: #F7D89F;
  --amber-400: #D6A756;
  --amber-600: #B9832D;

  /* Status — Red (emergency) */
  --red-50: #FFF3F2;
  --red-100: #F8D6D4;
  --red-200: #EFA9A6;
  --red-600: #B2332E;
  --red-700: #922825;

  /* Status — Blue (serious stop / system) */
  --blue-50: #EEF3F6;
  --blue-100: #DCE6EE;
  --blue-200: #BFD0DE;
  --blue-800: #22303A;

  /* Typography */
  --font-main: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;

  /* Line-height (tight for headings, relaxed for body) */
  --lh-tight: 1.2;
  --lh-body: 1.55;

  /* Spacing (8pt scale) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Elevation / shadow */
  --shadow-1: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 4px 16px rgba(0,0,0,.06);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-100: 100ms;
  --dur-150: 150ms;
  --dur-250: 250ms;

  /* Layout */
  --container: 1120px;
}

/* ========================================
   B) Semantic Tokens (Use These in Components)
   ======================================== */

:root {
  /* Backgrounds & text */
  --bg-app: var(--neutral-50);      /* paper */
  --bg-surface: var(--neutral-0);   /* cards */
  --text: var(--neutral-900);       /* ink */
  --text-muted: var(--neutral-600);

  /* Brand */
  --brand: var(--green-600);
  --brand-weak: var(--green-200);

  /* Interactive */
  --border: var(--neutral-300);
  --focus: var(--blue-200);

  /* Status */
  --ok-bg: var(--green-200);
  --ok-ink: var(--green-700);
  --caution-bg: var(--amber-50);
  --caution-ink: var(--amber-600);
  --stop-bg: var(--blue-50);
  --stop-ink: var(--blue-800);
  --emerg-bg: var(--red-50);
  --emerg-ink: var(--red-700);

  /* Legacy aliases (for backward compatibility) */
  --bg-warm-white: var(--neutral-50);
  --bg-paper: var(--neutral-50);
  --primary-forest: var(--green-600);
  --secondary-moss: var(--green-400);
  --ink-blue: var(--neutral-900);
  --graphite: var(--neutral-800);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --ink: var(--neutral-900);
  --muted: var(--neutral-600);
  --success-sage: var(--green-200);
  --warning-amber: var(--amber-400);
  --error-subtle: var(--red-600);
  --green-600: var(--green-600);
  --green-200: var(--green-200);
  --amber-600: var(--amber-400);
  --amber-050: var(--amber-50);
  --red-700: var(--red-700);
  --red-050: var(--red-50);
  --blue-800: var(--blue-800);
  --blue-050: var(--blue-50);
  --surface: var(--bg-surface);
  --shadow: var(--shadow-2);
  --shadow-subtle: var(--shadow-1);
  --shadow-soft: var(--shadow-2);
  --border-light: var(--neutral-200);
  --border-medium: var(--neutral-300);
}

/* ========================================
   C) Global Base Styles
   ======================================== */

/* Typography Imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Charter:ital,wght@0,400;0,700;1,400&display=swap');

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-main);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

h1, h2, h3 {
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
  color: var(--text);
}

h1 {
  font-size: var(--fs-32);
  font-family: 'Charter', 'Georgia', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fs-24);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--fs-20);
  font-weight: 600;
}

p {
  margin: 0 0 var(--sp-4);
  color: var(--text);
}

small, .muted {
  color: var(--text-muted);
  font-size: var(--fs-14);
}

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--sp-6) 0;
}

/* Layout - Lots of white space */
.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 24px;
  min-height: 100vh;
}

@media (max-width: 640px) {
  .wrap {
    padding: 32px 16px;
  }
}

/* Typography Hierarchy - Additional styles */
.brand {
  color: var(--brand);
  font-weight: 500;
}

.sub {
  color: var(--text-muted);
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-16);
  font-weight: 400;
}

/* ========================================
   D) Core Components (Shared)
   ======================================== */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-150) var(--ease);
  box-shadow: none;
  text-decoration: none;
  font-family: var(--font-main);
  font-size: var(--fs-16);
  min-height: 48px;
}

.btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--neutral-900);
  color: #fff;
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-secondary {
  background: var(--brand);
  color: #fff;
}

.btn-secondary:hover {
  filter: brightness(1.05);
}

.btn-ghost {
  background: transparent;
  color: var(--neutral-900);
  border-color: var(--border);
}

.btn-ghost:hover {
  background: rgba(0,0,0,.04);
}

.btn-danger {
  background: var(--red-600);
  color: #fff;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Inputs */
.input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text);
  transition: border-color var(--dur-150) var(--ease), box-shadow var(--dur-150) var(--ease);
  font-family: var(--font-main);
  font-size: var(--fs-16);
  min-height: 48px;
}

.input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(156, 190, 214, .35);
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}

.helper {
  color: var(--text-muted);
  font-size: var(--fs-14);
}

/* Cards & Surfaces */
.card {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--sp-8);
  margin-bottom: var(--sp-6);
  transition: box-shadow var(--dur-150) var(--ease);
}

.card:hover {
  box-shadow: var(--shadow-2);
}

.card--pad {
  padding: var(--sp-6);
}

.divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-6) 0;
}

/* Badges (for topics / personas / severity) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-14);
  border: 1px solid transparent;
  font-weight: 500;
}

.badge.ok {
  background: var(--ok-bg);
  color: var(--ok-ink);
  border-color: rgba(47,111,78,.15);
}

.badge.caution {
  background: var(--caution-bg);
  color: var(--caution-ink);
  border-color: rgba(214,167,86,.25);
}

.badge.stop {
  background: var(--stop-bg);
  color: var(--stop-ink);
  border-color: rgba(34,48,58,.15);
}

.badge.emergency {
  background: var(--emerg-bg);
  color: var(--emerg-ink);
  border-color: rgba(178,51,46,.2);
}

@media (max-width: 640px) {
  .card {
    padding: var(--sp-6);
  }
}

/* Forms - Clean, spacious, calm */
form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: start;
}

input::placeholder {
  color: var(--text-muted);
}

/* Legacy button styles (for backward compatibility) */
button {
  padding: 14px 24px;
  border-radius: var(--r-md);
  border: none;
  font-family: var(--font-main);
  font-size: var(--fs-16);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-150) var(--ease);
  min-height: 48px;
  white-space: nowrap;
}

button[type="submit"] {
  background: var(--neutral-900);
  color: white;
}

button[type="submit"]:hover {
  background: var(--neutral-800);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

button[type="submit"]:active {
  transform: translateY(0);
}

/* Link-style button */
.link {
  background: transparent;
  color: var(--brand);
  padding: 0;
  text-decoration: none;
  border: none;
  font-size: var(--fs-14);
  min-height: auto;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link:hover {
  color: var(--green-700);
  text-decoration: underline;
  transform: none;
}

a {
  color: var(--brand);
  text-underline-offset: 2px;
}

/* Messages & Feedback */
.hint {
  grid-column: 1 / -1;
  color: var(--text-muted);
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}

.error {
  grid-column: 1 / -1;
  color: var(--red-700);
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-14);
  padding: var(--sp-3);
  background: var(--red-50);
  border-radius: var(--r-md);
  border-left: 3px solid var(--red-600);
}

.ok {
  grid-column: 1 / -1;
  color: var(--green-700);
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-14);
  padding: var(--sp-3);
  background: var(--ok-bg);
  border-radius: var(--r-md);
  border-left: 3px solid var(--green-600);
}

/* Footer */
.foot {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-14);
  text-align: center;
}

/* ========================================
   E) Persona Accents
   ======================================== */

/* Positive Only */
.px-positive {
  --p-bg: #E8F3EA;
  --p-ink: #2F6F4E;
  --p-br: #BFD9C7;
}

/* Balanced & Structured */
.px-balanced {
  --p-bg: #EEF3F6;
  --p-ink: #22303A;
  --p-br: #C8D6E0;
}

/* Family-Friendly */
.px-family {
  --p-bg: #FFF5EB;
  --p-ink: #8C5A28;
  --p-br: #F1D6B1;
}

/* Sports/Drive */
.px-sport {
  --p-bg: #F0F2FA;
  --p-ink: #2B2F6B;
  --p-br: #CBD1F0;
}

.persona-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--p-bg);
  color: var(--p-ink);
  border: 1px solid var(--p-br);
  font-weight: 600;
  font-size: var(--fs-14);
}

.persona-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* ========================================
   F) Layout Utilities
   ======================================== */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
}

.stack-sm > * + * {
  margin-top: var(--sp-2);
}

.stack-md > * + * {
  margin-top: var(--sp-4);
}

.stack-lg > * + * {
  margin-top: var(--sp-6);
}

.center {
  display: grid;
  place-items: center;
}

/* ========================================
   G) Focus, States, and Accessibility
   ======================================== */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

[aria-busy="true"] {
  cursor: progress;
  opacity: .7;
  pointer-events: none;
}

/* Full-width inputs for mobile */
@media (max-width: 640px) {
  form {
    grid-template-columns: 1fr;
  }
  
  button {
    width: 100%;
  }
}

/* Animations - Subtle, calming */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message {
  animation: fadeIn 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.escalation-banner {
  animation: slideDown 0.4s ease-out;
}

/* Smooth scrolling */
#chatMessages {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}


/* Touch-friendly sizes */
@media (max-width: 640px) {
  button, input {
    min-height: 48px;
    font-size: 16px; /* Prevents iOS zoom */
  }
}

/* ========================================
   Safety System Components
   ======================================== */

/* Safety Banner */
.safety-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  margin-bottom: var(--sp-4);
  font-family: var(--font-main);
}

.safety-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
}

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

.safety-title {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px 0;
}

.safety-text {
  color: var(--muted);
  font-size: var(--fs-14);
  margin: 0;
}

.safety-actions {
  margin-left: auto;
  display: flex;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* Safety Banner Levels */
.safety--info {
  background: var(--ok-bg);
}
.safety--info .safety-icon {
  background: var(--green-100);
  color: var(--green-600);
}

.safety--caution {
  background: var(--caution-bg);
}
.safety--caution .safety-icon {
  background: var(--amber-100);
  color: var(--amber-600);
}

.safety--stop {
  background: var(--stop-bg);
}
.safety--stop .safety-icon {
  background: var(--blue-100);
  color: var(--stop-ink);
}

.safety--emergency {
  background: var(--emerg-bg);
}
.safety--emergency .safety-icon {
  background: var(--red-100);
  color: var(--emerg-ink);
}

/* Locked Composer */
.composer {
  border-top: 1px solid var(--border);
  padding: var(--sp-4);
  background: var(--bg-surface);
}

.composer textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  padding: var(--sp-4);
  font-family: var(--font-main);
  font-size: var(--fs-16);
  background: var(--bg-surface);
  color: var(--text);
}

.composer--locked textarea {
  opacity: 0.6;
  background: var(--neutral-100);
  cursor: not-allowed;
}

.composer-help {
  margin-top: var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-14);
}

.composer-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

/* Safety Panel (Modal/Drawer) */
.safety-panel {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 28, .4);
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  z-index: 100;
}

.safety-panel[hidden] {
  display: none;
}

.safety-panel__card {
  background: var(--surface);
  border-radius: var(--r-lg);
  width: min(720px, 100%);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  overflow: auto;
}

.safety-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.safety-panel__header h2 {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 600;
}

.safety-panel__body {
  padding: var(--sp-6);
}

.safety-panel__footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
}

.lead {
  color: var(--text);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-16);
}

.safety-list {
  margin-left: 1.2rem;
  display: grid;
  gap: 10px;
  margin-bottom: var(--sp-4);
}

.safety-list li {
  color: var(--text);
}

.referrals {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr 1fr;
  margin-top: var(--sp-4);
}

.ref-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--neutral-25);
}

.ref-card h3 {
  margin: 0 0 var(--sp-2) 0;
  font-size: var(--fs-16);
}

.ref-card p {
  margin: 0 0 var(--sp-3) 0;
  color: var(--muted);
  font-size: var(--fs-14);
}

.icon-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
}

.icon-btn:hover {
  background: rgba(0,0,0,.04);
}

.icon-btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .referrals {
    grid-template-columns: 1fr;
  }
  
  .safety-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .safety-actions .btn {
    width: 100%;
  }
  
  .safety-banner {
    flex-wrap: wrap;
  }
  
  .safety-actions {
    width: 100%;
    margin-left: 0;
    margin-top: var(--sp-2);
  }
}

/* System message chip */
.system-message {
  background: var(--ok-bg);
  border-left: 3px solid var(--brand);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  margin: var(--sp-2) 0;
  color: var(--text-muted);
  font-size: var(--fs-14);
  font-style: italic;
}

.system-message--safety {
  border-left-color: var(--red-700);
  background: var(--emerg-bg);
  color: var(--emerg-ink);
}

/* ========================================
   Intake Wizard
   ======================================== */

.wiz {
  max-width: 800px;
  margin: 0 auto;
  font-family: var(--font-main);
}

.wiz-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.wiz-card .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.wiz-card .checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

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

.wiz-card input[type="text"],
.wiz-card input[type="number"],
.wiz-card input[type="date"],
.wiz-card select {
  border: 1px solid #D5D9DD;
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-family: var(--font-main);
  font-size: var(--fs-16);
}

.wiz-card fieldset {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin: 0;
}

.wiz-card legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: var(--fs-14);
  font-weight: 500;
}

.wiz-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.helper-text {
  font-size: var(--fs-14);
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .wiz-card .grid,
  .wiz-card .checkbox-grid {
    grid-template-columns: 1fr;
  }
  
  .wiz-nav {
    flex-direction: column;
  }
  
  .wiz-nav .btn {
    width: 100%;
  }
}

/* ========================================
   H) Optional Dark Mode (manual toggle)
   ======================================== */

/* Dark mode activated via .dark-mode class on html */
html.dark-mode {
  --bg-app: #101415;
  --bg-surface: #121819;
  --text: #E9EEF0;
  --text-muted: #A8B3BA;
  --border: #2A353A;
  --focus: #3E6B88;

  --ok-bg: #193323;
  --ok-ink: #A6D1B8;
  --caution-bg: #3B2E15;
  --caution-ink: #E3C287;
  --stop-bg: #182127;
  --stop-ink: #BFD0DE;
  --emerg-bg: #2D1918;
  --emerg-ink: #F0B3B1;
}

html.dark-mode .btn-ghost:hover {
  background: rgba(255,255,255,.06);
}

html.dark-mode .card {
  box-shadow: none;
  border: 1px solid var(--border);
}

/* Persona accents in dark mode (slightly adjusted) */
html.dark-mode .px-positive {
  --p-bg: #1A2F20;
  --p-ink: #A6D1B8;
  --p-br: #2A4A35;
}

html.dark-mode .px-balanced {
  --p-bg: #1A2027;
  --p-ink: #BFD0DE;
  --p-br: #2A353A;
}

html.dark-mode .px-family {
  --p-bg: #2D2415;
  --p-ink: #E3C287;
  --p-br: #3B2E15;
}

html.dark-mode .px-sport {
  --p-bg: #1A1B2B;
  --p-ink: #CBD1F0;
  --p-br: #2A2F4B;
}

/* Fix dog info window text in dark mode */
html.dark-mode .dog-expanded {
  color: var(--text);
}

html.dark-mode .dog-expanded strong {
  color: var(--text);
}

html.dark-mode .dog-expanded div {
  color: var(--text-muted);
}

/* ========================================
   I) Example: Chat Layout Components
   ======================================== */

.chat-shell {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--sp-6);
}

.chat-pane {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.sidebar {
  position: sticky;
  top: var(--sp-6);
  height: fit-content;
}

@media (max-width: 980px) {
  .chat-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
}

/* Message bubbles */
.msg {
  padding: 14px 16px;
  max-width: 68ch;
  border-radius: var(--r-lg);
  margin: 10px 0;
}

.msg.user {
  background: var(--brand-weak);
  color: var(--neutral-800);
}

.msg.ai {
  background: var(--neutral-0);
  border: 1px solid var(--border);
}

.msg.system {
  background: var(--stop-bg);
  color: var(--stop-ink);
  font-size: var(--fs-14);
}