/* ================================================================
   DESIGN TOKENS
   ================================================================ */

:root {
  /* Colors - Brand Palette */
  --color-primary: #8B5E3C;              /* Warm brown (Hund, Natur) */
  --color-accent: #4A7C3A;               /* Vital green (Natur) */
  --color-accent-text: #3A6230;          /* Green for text (5.9:1 on bg) */
  --color-accent-warm: #E07A2B;          /* Warm orange (Kids areas/backgrounds) */
  --color-accent-warm-text: #B25A1A;     /* Orange for text (5.2:1 on bg) */

  /* Neutral Scale */
  --color-bg: #FAF8F4;             /* Warm off-white */
  --color-surface: #FFFFFF;        /* Cards, sections */
  --color-text: #2C2A28;           /* Primary text (dark anthracite) */
  --color-text-muted: #6B6660;     /* Secondary text */
  --color-border: #E5DFD6;         /* Borders, dividers */

  /* Semantic Colors */
  --color-link: var(--color-primary);
  --color-link-hover: #6B4630;
  --color-link-visited: #704830;

  /* Typography */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-base: 1rem;          /* 16px */
  --font-size-large: 1.125rem;     /* 18px (kids mode) */
  --line-height-body: 1.6;
  --line-height-heading: 1.2;

  /* Heading Scale (rem-based) */
  --font-size-h1: 2rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1.125rem;
  --font-size-h5: 1rem;
  --font-size-h6: 0.875rem;

  /* Spacing Scale (8px base) */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-xxl: 3rem;      /* 48px */

  /* Layout */
  --container-max-width: 720px;
  --container-padding: var(--space-md);

  --header-padding: var(--space-lg) var(--container-padding);
  --footer-padding: var(--space-xxl) var(--container-padding);
  --main-padding: var(--space-xl) var(--container-padding);

  /* Motion */
  --transition-quick: 200ms ease-in-out;
}

/* Kids Mode Override */
body.is-kids {
  --font-size-base: var(--font-size-large);
  --color-accent: var(--color-accent-warm);
  --container-padding: var(--space-lg);
  --main-padding: var(--space-xxl) var(--container-padding);
}

/* ================================================================
   RESET + NORMALIZE
   ================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */

h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-heading);
  font-weight: 600;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

h1 {
  font-size: var(--font-size-h1);
  margin-top: 0;
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

p {
  margin-bottom: var(--space-md);
}

p + p {
  margin-top: var(--space-md);
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

/* ================================================================
   LINKS
   ================================================================ */

a {
  color: var(--color-link);
  text-decoration: underline;
  transition: color var(--transition-quick);
}

a:hover {
  color: var(--color-link-hover);
}

a:visited {
  color: var(--color-link-visited);
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ================================================================
   LISTS
   ================================================================ */

ul, ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

ul ul, ul ol, ol ul, ol ol {
  margin-bottom: 0;
  margin-top: var(--space-sm);
}

li {
  margin-bottom: var(--space-sm);
}

li:last-child {
  margin-bottom: 0;
}

/* ================================================================
   BLOCKQUOTE
   ================================================================ */

blockquote {
  border-left: 4px solid var(--color-accent);
  padding-left: var(--space-md);
  margin-left: 0;
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ================================================================
   CODE + PREFORMATTED
   ================================================================ */

code {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: "Monaco", "Menlo", "Courier New", monospace;
  font-size: 0.9em;
  color: var(--color-text);
}

pre {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-md);
  overflow-x: auto;
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9em;
}

/* ================================================================
   HORIZONTAL RULE
   ================================================================ */

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

/* ================================================================
   TABLES (minimal styling for now)
   ================================================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
}

th, td {
  border: 1px solid var(--color-border);
  padding: var(--space-sm);
  text-align: left;
}

th {
  background-color: var(--color-surface);
  font-weight: 600;
}

/* ================================================================
   UTILITY CLASSES
   ================================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ================================================================
   LAYOUT: CONTAINER
   ================================================================ */

.container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ================================================================
   LAYOUT: HEADER
   ================================================================ */

.site-header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) var(--container-padding);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.site-title {
  font-size: var(--font-size-h3);
  font-weight: 700;
  margin: 0;
}

.site-title a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-quick);
}

.site-title a:hover {
  color: var(--color-link-hover);
}

.site-nav ul {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-nav a {
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-h5);
  transition: color var(--transition-quick);
}

.site-nav a:hover {
  color: var(--color-primary);
}

.site-nav a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ================================================================
   LAYOUT: MAIN
   ================================================================ */

.site-main {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: var(--main-padding);
  min-height: calc(100vh - 200px);
}

/* ================================================================
   LAYOUT: FOOTER
   ================================================================ */

.site-footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--footer-padding) var(--container-padding);
  margin-top: var(--space-xxl);
  color: var(--color-text-muted);
  font-size: 0.95em;
  line-height: var(--line-height-body);
}

.site-footer p {
  margin-bottom: var(--space-md);
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.footer-meta {
  font-size: 0.9em;
  color: var(--color-text-muted);
}

.site-footer a {
  color: var(--color-link);
  text-decoration: underline;
}

.site-footer a:hover {
  color: var(--color-link-hover);
}

/* ================================================================
   COMPONENTS: HERO (Homepage)
   ================================================================ */

.hero {
  text-align: center;
  padding: var(--space-xxl) 0;
  margin-bottom: var(--space-xxl);
}

.hero h1 {
  margin-top: 0;
  margin-bottom: var(--space-md);
  font-size: 2.5rem;
  line-height: 1.1;
}

.hero-subtitle {
  font-size: var(--font-size-h4);
  color: var(--color-text-muted);
  margin-bottom: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ================================================================
   COMPONENTS: RECENT LIST
   ================================================================ */

.recent {
  margin: var(--space-xxl) 0;
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.recent h2 {
  margin-top: 0;
  margin-bottom: var(--space-lg);
}

.recent ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent li {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.recent li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.recent a {
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary);
  transition: color var(--transition-quick);
}

.recent a:hover {
  color: var(--color-link-hover);
}

.recent-description {
  display: block;
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.95em;
}

/* ================================================================
   COMPONENTS: ARTICLE / POST
   ================================================================ */

.post {
  margin: var(--space-xl) 0;
}

.post-header {
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-lg);
}

.post-header h1 {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

.post-description {
  font-size: var(--font-size-h4);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  font-style: italic;
}

.post-date {
  display: block;
  font-size: 0.95em;
  color: var(--color-text-muted);
  font-style: italic;
}

.post-content {
  margin-bottom: var(--space-xl);
  line-height: var(--line-height-body);
}

.post-content h2,
.post-content h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.post-content p + h2,
.post-content p + h3 {
  margin-top: var(--space-xl);
}

.post-footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
  margin-top: var(--space-xl);
}

.post-attribution {
  font-size: 0.9em;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

/* POST VARIANT: Kids */
.post--kids .post-footer {
  background-color: var(--color-bg);
  padding: var(--space-md);
  border-radius: 4px;
  border-top: none;
  margin-top: var(--space-xl);
}

.post--kids .post-attribution {
  color: var(--color-text);
  font-weight: 500;
}

/* ================================================================
   LAYOUT VARIANT: KIDS
   ================================================================ */

.layout--kids {
  --font-size-base: var(--font-size-large);
  --color-accent: var(--color-accent-warm);
  --container-padding: var(--space-lg);
  --main-padding: var(--space-xxl) var(--container-padding);
}

.layout--kids h1,
.layout--kids h2,
.layout--kids h3 {
  color: var(--color-accent-warm-text);
}

.layout--kids .site-nav a:hover {
  color: var(--color-accent-warm-text);
}

.layout--kids .recent a {
  color: var(--color-accent-warm-text);
}

.layout--kids .recent a:hover {
  color: var(--color-accent-warm);
}

.layout--kids .hero {
  background-color: #FFF4E6;
  border-radius: 8px;
  padding: var(--space-xl);
  margin-bottom: var(--space-xxl);
}

.layout--kids .hero h1 {
  color: var(--color-accent-warm-text);
}

/* ================================================================
   RESPONSIVE: TABLET (min-width: 768px)
   ================================================================ */

@media (min-width: 768px) {
  :root {
    --container-max-width: 720px;
  }

  .site-nav ul {
    gap: var(--space-lg);
  }

  .hero h1 {
    font-size: 3rem;
  }

  .hero-subtitle {
    font-size: var(--font-size-h3);
  }
}

/* ================================================================
   RESPONSIVE: DESKTOP (min-width: 1024px)
   ================================================================ */

@media (min-width: 1024px) {
  :root {
    --container-max-width: 800px;
  }

  .hero h1 {
    font-size: 3.5rem;
  }

  .site-footer {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-xl);
  }

  .site-footer p {
    margin-bottom: 0;
  }

  .site-footer p:first-child {
    grid-column: 1;
    border-right: 1px solid var(--color-border);
    padding-right: var(--space-xl);
  }

  .footer-meta {
    grid-column: 2 / 4;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-lg);
  }
}

/* ================================================================
   COMPONENT: CHAT WIDGET
   ================================================================ */

#chat-widget {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 1000;
  font-family: var(--font-family);
}

.chat-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-primary);
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.chat-button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.chat-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.layout--kids .chat-button {
  background-color: var(--color-accent-warm);
}

/* Panel */
.chat-panel {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 500px;
  max-height: 60vh;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  animation: slideUp 200ms ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-panel {
    animation: none;
  }
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.chat-header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.chat-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.chat-avatar {
  font-size: 1.5rem;
}

.chat-header-title h2 {
  font-size: var(--font-size-h4);
  margin: 0;
  color: var(--color-text);
}

.chat-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px 8px;
  transition: color 200ms ease;
}

.chat-close:hover {
  color: var(--color-text);
}

.chat-close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.chat-message {
  display: flex;
  gap: var(--space-sm);
  animation: fadeIn 200ms ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.chat-message.user {
  justify-content: flex-end;
}

.chat-message.milo {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 80%;
  padding: var(--space-sm) var(--space-md);
  border-radius: 12px;
  font-size: 0.95em;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-message.user .chat-bubble {
  background-color: var(--color-primary);
  color: white;
  border-radius: 12px 2px 12px 12px;
}

.chat-message.milo .chat-bubble {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-radius: 2px 12px 12px 12px;
  border: 1px solid var(--color-border);
}

.chat-bubble.loading {
  opacity: 0.6;
  font-style: italic;
}

.chat-bubble.crisis {
  border: 2px solid var(--color-accent-warm);
  background-color: #FFF4E6;
  color: var(--color-text);
}

/* Form */
.chat-form {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.chat-input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.95em;
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: border-color 200ms ease;
}

.chat-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(139, 94, 60, 0.1);
}

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

.chat-send {
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 200ms ease;
}

.chat-send:hover {
  background-color: var(--color-link-hover);
}

.chat-send:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.layout--kids .chat-send {
  background-color: var(--color-accent-warm);
}

.layout--kids .chat-send:hover {
  background-color: #CC6B23;
}

/* Scrollbar styling (optional) */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background-color: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
}

/* ================================================================
   MASCOT PICKER
   ================================================================ */

.mascot-picker {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mascot-picker__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}

.mascot-picker__content {
  position: relative;
  z-index: 1001;
  background-color: var(--color-surface);
  border-radius: 12px;
  padding: var(--space-xl) var(--space-lg);
  max-width: 90vw;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

@media (min-width: 640px) {
  .mascot-picker__content {
    max-width: 600px;
  }
}

.mascot-picker__title {
  font-size: var(--font-size-h1);
  margin-bottom: var(--space-sm);
  text-align: center;
  color: var(--color-text);
}

.mascot-picker__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.mascot-picker__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

@media (max-width: 480px) {
  .mascot-picker__cards {
    grid-template-columns: 1fr;
  }
}

.mascot-picker__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-lg);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-bg);
  cursor: pointer;
  transition: all var(--transition-quick);
  text-align: center;
}

.mascot-picker__card:hover {
  border-color: var(--color-accent-warm);
  background-color: var(--color-surface);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(224, 122, 43, 0.2);
}

.mascot-picker__listen {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: none;
  border: none;
  font-size: 1.25rem;
  padding: var(--space-xs);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-quick);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mascot-picker__listen:hover {
  opacity: 1;
}

.mascot-picker__listen:focus-visible {
  outline: 2px solid var(--color-accent-warm);
  opacity: 1;
}

.mascot-picker__emoji {
  font-size: 80px;
  margin-bottom: var(--space-md);
  line-height: 1;
}

.mascot-picker__name {
  font-size: var(--font-size-h2);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.mascot-picker__character {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  line-height: var(--line-height-body);
}

.mascot-picker__pick-hint {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-accent-warm);
  font-weight: 600;
  margin-top: auto;
  padding-top: var(--space-md);
}

.mascot-picker__button {
  background-color: var(--color-accent-warm);
  color: white;
  border: none;
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-quick);
  margin-top: auto;
}

.mascot-picker__button:hover {
  background-color: #CC6B23;
}

.mascot-picker__button:focus-visible {
  outline: 2px solid var(--color-accent-warm);
  outline-offset: 2px;
}

.mascot-picker__footer {
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

.mascot-picker__skip {
  background-color: transparent;
  color: var(--color-text-muted);
  border: none;
  font-size: var(--font-size-base);
  cursor: pointer;
  padding: var(--space-sm) 0;
  transition: color var(--transition-quick);
  text-decoration: none;
}

.mascot-picker__skip:hover {
  color: var(--color-text);
}

.mascot-picker__skip:focus-visible {
  outline: 2px solid var(--color-accent-warm);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Fade out animation */
.mascot-picker--fade-out {
  animation: mascot-picker-fade-out 300ms ease-out forwards;
}

@keyframes mascot-picker-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ================================================================
   CHAT VOICE TOGGLE
   ================================================================ */

.chat-voice-toggle {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: 4px;
  transition: background-color var(--transition-quick);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

.chat-voice-toggle:hover {
  background-color: var(--color-bg);
}

.chat-voice-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.chat-voice-icon {
  display: inline-block;
  line-height: 1;
}