/* Talk page (#today): Zeo, its title and footnote, and the chat buttons. */

/* The page's one scrolling area; the card stays centered while it fits. */
main[data-page='today'] .talk {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  min-height: 0;
  padding: var(--page-padding-top) var(--page-padding-x);
  overflow-y: auto;
}
main[data-page='today'] .voice-card {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 680px;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  padding: var(--s32);
  border: 1px solid #f1e0b2;
  border-radius: var(--radius-24);
  background: #fdf1d3;
}
/* On short windows Zeo shrinks before the text and buttons do. */
main[data-page='today'] .mascot {
  flex: 0 1 260px;
  width: 100%;
  max-width: 400px;
  height: auto;
  min-height: 96px;
  margin: 0;
}
main[data-page='today'] .voice-copy {
  text-align: center;
}
main[data-page='today'] .voice-copy h2 {
  font-size: var(--text-30);
  line-height: var(--leading-36);
  letter-spacing: var(--tracking-30);
}
/* What Zeo just changed at home, lit in Zeo's signal yellow. */
main[data-page='today'] .home-change {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  margin-top: var(--s16);
  padding: var(--s8) var(--s16);
  border: 1px solid #f0cf72;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-16);
  line-height: var(--leading-24);
  font-weight: 600;
  animation: home-change-in var(--speed) var(--curve);
}
main[data-page='today'] .home-change[hidden] {
  display: none;
}
main[data-page='today'] .home-change svg {
  flex: none;
  width: var(--s24);
  height: var(--s24);
  color: #c98a00;
}
@keyframes home-change-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
}
@media (prefers-reduced-motion: reduce) {
  main[data-page='today'] .home-change {
    animation: none;
  }
}
main[data-page='today'] .voice-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s12);
  margin-top: var(--s24);
}
/* Both buttons are hidden while Zeo sleeps and listens, so the row takes no space. */
main[data-page='today'] .voice-buttons:not(:has(button:not([hidden]))) {
  display: none;
}
main[data-page='today'] .voice-footnote {
  margin-top: var(--s16);
  color: #5c6e99;
  font-size: var(--text-12);
  line-height: var(--leading-16);
  text-align: center;
}
main[data-page='today'] .voice-footnote:empty {
  display: none;
}

@media (max-width: 850px) {
  main[data-page='today'] .voice-copy h2 {
    font-size: var(--text-24);
    line-height: var(--leading-32);
  }
  main[data-page='today'] .voice-buttons .large {
    padding: var(--s12) var(--s16);
    font-size: var(--text-14);
    line-height: var(--leading-24);
  }
}
@media (max-width: 620px) {
  main[data-page='today'] .voice-card {
    padding: var(--s24) var(--s16);
  }
  main[data-page='today'] .voice-copy h2 {
    font-size: var(--text-30);
    line-height: var(--leading-36);
  }
}