/* =============================================================
   Frog-AI Tutor — the chat interface

   Builds on site.css, which is the main site's stylesheet copied
   over unchanged. Every colour, radius, border and shadow below
   comes from those tokens: 2px ink outlines, flat colour, offset
   sticker shadows, Darumadrop One headings. Nothing new is
   invented here, it is the same visual language applied to a
   layout the marketing site does not have.
   ============================================================= */

:root {
  --header-h: 74px;
  --sidebar-w: 300px;
}

/* The app toggles panels with the `hidden` attribute, and several
   rules below set `display`, which would otherwise win over the
   browser default. site.css does not carry this rule. */
[hidden] { display: none !important; }

/* site.css has .skip-link but no visually-hidden helper */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The tutor is an app, not a page: it fills the window and never
   scrolls as a whole. */
body.tutor-body {
  min-height: 100vh;
  background:
    radial-gradient(760px 460px at 90% -10%, rgba(95, 191, 114, .18), transparent 62%),
    radial-gradient(620px 420px at -10% 100%, rgba(48, 134, 255, .12), transparent 60%),
    var(--cream);
  overflow: hidden;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* =============================================================
   Sidebar
   ============================================================= */
.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper);
}

.sidebar__head {
  flex: none;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 18px;
}

.sidebar__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 12px 18px;
}

.sidebar__foot {
  flex: none;
  padding: 12px;
}

.new-chat {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 12px 12px;
  width: calc(100% - 24px);
  padding: 10px 18px 10px 10px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--on-accent);
  background: var(--green);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.new-chat:hover { background: var(--green-deep); transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--shadow-ink); }
.new-chat:active { transform: translate(2px, 3px); box-shadow: none; }
.new-chat__plus {
  width: 38px; height: 38px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  color: var(--ink);
  transition: transform .35s var(--bounce);
}
.new-chat:hover .new-chat__plus { transform: rotate(90deg); }


.thread-group__label {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 16px 8px 6px;
}

.thread {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  background: transparent;
  border: var(--stroke) solid transparent;
  padding: 10px 38px 10px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.thread:hover {
  background: var(--pond);
  border-color: var(--ink);
  box-shadow: var(--shadow-hard-sm);
  transform: translate(-1px, -2px);
}
.thread.is-active {
  background: var(--paper);
  border-color: var(--ink);
  box-shadow: 3px 4px 0 var(--pebble, var(--green));
}
.thread__pebble {
  width: 14px; height: 14px;
  flex: none;
  border-radius: 50%;
  background: var(--pebble, var(--green));
  border: 1.5px solid var(--ink);
  transition: transform .3s var(--bounce);
}
.thread:hover .thread__pebble, .thread.is-active .thread__pebble { transform: scale(1.25); }
.thread__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread__menu {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s var(--ease), background .2s var(--ease);
}
.thread:hover .thread__menu,
.thread__menu:focus-visible { opacity: 1; }
.thread__menu:hover { background: var(--coral); color: var(--on-accent); }
.thread__menu svg { width: 15px; height: 15px; }

.sidebar__empty {
  padding: 26px 14px;
  text-align: center;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
}

/* ---------- Account block ---------- */
.account-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  cursor: pointer;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.account-btn:hover {
  background: var(--pond);
  transform: translate(-1px, -2px);
  box-shadow: var(--shadow-hard);
}

.avatar {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sun);
  border: var(--stroke) solid var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1;
}
.account-btn__text { min-width: 0; flex: 1; }
.account-btn__name {
  display: block;
  font-weight: 900;
  font-size: .88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-btn__mail {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Popover menu ---------- */
.menu {
  position: absolute;
  z-index: 150;   /* above the phone sidebar (140), which it opens from */
  min-width: 224px;
  padding: 8px;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
}
.menu { transform-origin: 50% 100%; animation: menuRise .22s var(--ease); }
@keyframes menuRise {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;   /* one of the items is a link */
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu__item:hover { background: var(--pond); }
.menu__item--danger:hover { background: var(--coral); color: var(--on-accent); }
.menu__sep { height: 2px; background: var(--hair); margin: 6px 4px; border-radius: 2px; }

/* =============================================================
   Main column
   ============================================================= */
.tutor-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.topbar {
  flex: none;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.topbar__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.icon-btn {
  width: 42px; height: 42px;
  flex: none;
  display: grid; place-items: center;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-hard-sm);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.icon-btn:hover { background: var(--pond); transform: translate(-1px, -2px); box-shadow: var(--shadow-hard); }
.icon-btn:active { transform: translate(2px, 3px); box-shadow: none; }
.icon-btn svg { width: 20px; height: 20px; }

/* Present at every width. Narrow, it opens the overlay; wide, it
   collapses the column. Same button, same idea — show me the
   lessons, or give me the room back. */
.sidebar-toggle { display: grid; }

/* =============================================================
   Collapsing the sidebar

   The lesson list is genuinely useful and also the widest thing
   on screen. Shutting it animates the grid column to zero so the
   chat grows into the space rather than jumping into it.

   Only above the breakpoint: below it the sidebar is already a
   fixed overlay with its own open and close, and a zero-width
   column there would fight it.
   ============================================================= */
@media (min-width: 901px) {
  .app { transition: grid-template-columns .28s var(--ease); }
  .app.sidebar-collapsed { grid-template-columns: 0 1fr; }

  /* Hidden, not merely narrow. A zero-width column still holds
     buttons the tab key can reach and a screen reader will read
     out, which is a worse kind of broken than a visible one. */
  .app.sidebar-collapsed .sidebar {
    visibility: hidden;
    border-right-width: 0;
  }

  /* Keeps the contents from spilling over the chat while the
     column is on its way down to nothing. */
  .sidebar { overflow: hidden; }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .app { transition: none; }
}

/* ---------- Pace picker: same shape as the site's auth tabs ---------- */
.pace {
  position: relative;
  display: inline-flex;
  gap: 5px;
  padding: 5px;
  background: var(--pond);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
}
.pace__opt {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .82rem;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.pace__opt.is-active { color: var(--ink); }
.pace__opt { position: relative; z-index: 1; }
.pace__opt:active { transform: scale(.94); }

/* One white pill slides under whichever pace is chosen. chat.js
   measures the active button and hands over its place and width. */
.pace::before {
  content: '';
  position: absolute;
  top: 5px; bottom: 5px; left: 0;
  width: var(--thumb-w, 0);
  transform: translateX(var(--thumb-x, 0));
  background: var(--paper);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
  transition: transform .45s var(--bounce), width .45s var(--bounce);
}
.pace.is-still::before { transition: none; }

/* =============================================================
   The lesson thread
   ============================================================= */
.thread-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.thread-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 24px calc(var(--dock-h, 140px) + 20px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.msg {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  animation: msgIn .3s var(--bounce) both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.msg__avatar {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  border: var(--stroke) solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1;
  box-shadow: var(--shadow-hard-sm);
}
.msg--tutor .msg__avatar {
  background: #71C177;
  overflow: hidden;    /* the mascot is square, the avatar is not */
}
/* The mascot fills the circle rather than floating in the middle
   of it — the same frog the logo uses, at the size this needs. */
.msg--tutor .msg__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.msg--me .msg__avatar { background: var(--sun); }

.msg__body { min-width: 0; flex: 1; }
.msg__who {
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.bubble {
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 1.0625rem;   /* young readers: a touch bigger than page body */
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-card);
}
.msg--tutor .bubble {
  background: var(--paper);
  color: var(--ink);
  border-top-left-radius: 8px;
}
.msg--me { flex-direction: row-reverse; }
.msg--me .msg__who { text-align: right; }
.msg--me .bubble {
  background: var(--blue-deep);   /* white on --blue is 3.6:1; this clears AA */
  color: #fff;
  border-top-right-radius: 8px;
  /* the child's own words sit in a bubble; the tutor's explanation
     gets the full width because it is usually much longer */
  max-width: 82%;
  margin-left: auto;
}

.bubble p { margin: 0 0 12px; color: inherit; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 0 0 12px; padding-left: 24px; }
.bubble li { margin-bottom: 6px; }
.bubble strong { font-weight: 900; }
.bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  font-weight: 700;
  background: var(--pond);
  border: 1.5px solid rgba(18, 35, 46, .18);
  padding: 1px 7px;
  border-radius: 7px;
}
.bubble .math { font-family: 'Cambria Math', 'STIX Two Math', Georgia, serif; font-style: italic; }

/* Tutor diagrams: SVG drawn by chat.js from a ```diagram fence.
   Colours are theme variables, so one drawing works in light and
   dark. Capped in width — full-bleed SVG in a tutor bubble reads
   as shouting. */
.bubble .diagram { max-width: 340px; margin: 4px 0 12px; }
.bubble .diagram svg { display: block; height: auto; }

/* A failed send keeps any partial reply and pins a retry under it.
   Same sticker-button language as .btn-primary, shrunk to sit in a
   bubble rather than on a page. */
.bubble .retry-btn { margin-top: 10px; }
.bubble .retry-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.bubble .retry-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.msg--me .bubble code {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

/* Typing dots */
.typing { display: inline-flex; gap: 6px; padding: 5px 2px; }
.typing span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  border: 1.5px solid var(--ink);
  animation: blink 1.3s infinite ease-in-out both;
}
.typing span:nth-child(2) { animation-delay: .18s; background: var(--sun); }
.typing span:nth-child(3) { animation-delay: .36s; background: var(--blue); }
@keyframes blink {
  0%, 80%, 100% { opacity: .3; transform: scale(.75); }
  40% { opacity: 1; transform: scale(1); }
}

/* =============================================================
   Welcome screen

   Kept quiet on purpose: the frog, a hello, one question and four
   ways to start. Everything else waits until a lesson begins.
   ============================================================= */
.welcome {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(28px, 8vh, 80px) 24px calc(var(--dock-h, 140px) + 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.welcome__stage {
  position: relative;
  width: 150px;
  aspect-ratio: 1;
  margin-bottom: 18px;
}
.welcome__sun {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: var(--sun);
  border: var(--stroke) solid var(--ink);
}
.welcome__frog {
  position: absolute;
  left: 50%; bottom: 2%;
  width: 66%;
  margin-left: -33%;
  filter: drop-shadow(0 10px 10px rgba(18, 35, 46, .2));
  animation: hop 3.6s var(--ease) infinite;
  transform-origin: 50% 92%;
}

.welcome h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4.4vw, 3rem);
  line-height: 1.05;
}
.welcome__lede {
  margin: 8px 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* Four ways to start, as small pills */
.starters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.starter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  animation: msgIn .45s var(--bounce) both;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.starter:nth-child(2) { animation-delay: .05s; }
.starter:nth-child(3) { animation-delay: .1s; }
.starter:nth-child(4) { animation-delay: .15s; }
.starter:hover { background: var(--pond); transform: translate(-1px, -2px); box-shadow: var(--shadow-hard); }
.starter:active { transform: translate(2px, 3px); box-shadow: none; }
.starter__icon {
  width: 32px; height: 32px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  color: var(--on-accent);
  background: var(--green);
}
.starter:nth-child(2) .starter__icon { background: var(--sun); }
.starter:nth-child(3) .starter__icon { background: var(--coral); }
.starter:nth-child(4) .starter__icon { background: var(--blue); }
.starter__icon svg { width: 16px; height: 16px; }

/* Back into the last lesson: a quiet line, not a card */
.resume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-top: 22px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.resume:hover { color: var(--ink); background: var(--hair); }
.resume__label { flex: none; }
.resume__title {
  min-width: 0;
  font-weight: 900;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resume__arrow { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.resume:hover .resume__arrow { transform: translateX(3px); }

/* =============================================================
   Hops: tries on the current question
   ============================================================= */
.hops {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px max(24px, calc((100% - 820px) / 2));
  background: var(--pond);
}
.hops__text { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.hops__label { font-weight: 900; font-size: .92rem; color: var(--ink); }
.hops__cheer {
  padding: 4px 12px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--on-accent);
  background: var(--sun);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
}
.hops__cheer:empty { display: none; }
.hops.is-cheering .hops__cheer { animation: cheerPop .45s var(--bounce); }
@keyframes cheerPop {
  from { transform: scale(.6) rotate(-6deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.hops__pads {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
}
.hops__pad {
  position: relative;
  width: 38px; height: 20px;
  border-radius: 50%;
  background: var(--hair);
  border: var(--stroke) dashed var(--hair-3);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.hops__pad.is-done { background: var(--green); border: var(--stroke) solid var(--ink); }
.hops__pad img {
  position: absolute;
  left: 50%; bottom: 6px;
  width: 30px; height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  animation: padLand .55s var(--bounce) both;
}
@keyframes padLand {
  0%   { transform: translate(-44px, -18px) rotate(-20deg); opacity: 0; }
  60%  { transform: translate(0, -10px); opacity: 1; }
  100% { transform: none; }
}
.hops[data-more]:not([data-more=""])::after {
  content: attr(data-more);
  font-weight: 900;
  font-size: .85rem;
  color: var(--ink-soft);
  margin-left: -8px;
}

/* A little shower of brand-coloured pebbles when a try lands */
.burst { position: absolute; left: 50%; top: 0; pointer-events: none; }
.burst span {
  position: absolute;
  width: 9px; height: 9px;
  margin: -4.5px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  animation: burstOut .8s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes burstOut {
  from { transform: none; opacity: 1; }
  to   { transform: translate(var(--x), var(--y)) scale(.4); opacity: 0; }
}

@media (max-width: 560px) {
  .hops { padding: 8px 14px; gap: 10px; }
  .hops__label { font-size: .82rem; }
  .hops__pads { gap: 6px; padding-top: 20px; }
  .hops__pad { width: 28px; height: 16px; }
  .hops__pad img { width: 26px; height: 26px; margin-left: -13px; }
}

/* =============================================================
   Composer

   One dock: quick replies on top, room to write in the middle,
   tools and a big labelled Send along the bottom.
   ============================================================= */
.tutor-main { position: relative; }

/* The chat box floats: no bar behind it, the lesson scrolls on
   underneath and only the box itself covers it. */
.composer-wrap {
  position: absolute;
  z-index: 5;
  left: 0; right: 0; bottom: 0;
  padding: 0 24px 16px;
  pointer-events: none;
}
.composer-wrap > * { pointer-events: auto; }
.composer {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: 30px;
  box-shadow: var(--shadow-card-hi), 0 18px 40px -18px rgba(18, 35, 46, .35);
  transition: box-shadow .2s var(--ease);
}
.composer:focus-within { box-shadow: 5px 6px 0 var(--green), 0 18px 40px -18px rgba(18, 35, 46, .35); }

.composer textarea {
  width: 100%;
  border: 0;
  background: transparent;
  resize: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.55;
  min-height: 34px;
  max-height: 190px;
  padding: 6px 2px;
}
.composer textarea::placeholder { color: var(--ink-soft); font-weight: 700; }

/* Paperclip, words, Send: one line */
.composer__row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.composer__row textarea {
  flex: 1;
  min-width: 0;
  /* One line of text is exactly as tall as the buttons beside it, so
     paperclip, words and Send sit on one line. */
  min-height: 3rem;
  padding-top: calc((3rem - 1.55em) / 2);
  padding-bottom: calc((3rem - 1.55em) / 2);
  line-height: 1.55;
}

.send-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 3rem;
  padding: 0 18px 0 24px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--on-accent);
  background: var(--green);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
}
.send-btn svg { width: 1.25rem; height: 1.25rem; transition: transform .3s var(--bounce); }
.send-btn:hover:not(:disabled) { background: var(--green-deep); transform: translate(-1px, -2px); box-shadow: var(--shadow-hard); }
.send-btn:hover:not(:disabled) svg { transform: translateX(3px); }
.send-btn:active:not(:disabled) { transform: translate(2px, 3px); box-shadow: none; }
.send-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.send-btn.is-stop { background: var(--coral); }
.send-btn.is-stop:hover { background: var(--coral-deep); }

.composer-hint {
  max-width: 820px;
  margin: 28px auto 0;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* =============================================================
   Memory drawer
   ============================================================= */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(18, 35, 46, .38);
  animation: fadeIn .2s var(--ease);
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.drawer {
  position: fixed;
  z-index: 131;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--cream);
  box-shadow: -18px 0 40px -20px rgba(18, 35, 46, .45);
  display: flex;
  flex-direction: column;
  animation: drawerIn .3s var(--ease);
}
@keyframes drawerIn { from { transform: translateX(100%) } to { transform: none } }

.drawer__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 24px;
  background: var(--paper);
}
.drawer__head h2 { flex: 1; margin: 0; font-size: 1.5rem; }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px 28px; }
.drawer__lede { font-size: .9rem; }

.memory {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 15px;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.55;
}
.memory__text { flex: 1; min-width: 0; }
.memory__kind {
  display: inline-block;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  background: var(--sun);
  border: 1.5px solid var(--ink);
  padding: 1px 9px;
  border-radius: 999px;
  margin-bottom: 7px;
}
.memory__del {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
}
.memory__del:hover { color: var(--on-accent); background: var(--coral); }
.memory__del svg { width: 16px; height: 16px; }

.drawer__empty {
  text-align: center;
  padding: 34px 12px;
  font-size: .92rem;
}

/* =============================================================
   Boot splash + toast
   ============================================================= */
.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--cream);
}
.boot__frog { width: 120px; animation: hop 2.4s var(--ease) infinite; transform-origin: 50% 92%; }

.toast {
  position: fixed;
  z-index: 190;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  max-width: min(520px, 90vw);
  text-align: center;
  background: var(--ink);
  color: #fff;
  font-size: .86rem;
  font-weight: 800;
  padding: 13px 22px;
  border-radius: 999px;
  border: var(--stroke) solid var(--ink);
  box-shadow: 4px 5px 0 rgba(18, 35, 46, .28);
  animation: msgIn .25s var(--bounce);
}

/* =============================================================
   Small screens
   ============================================================= */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    z-index: 140;
    top: 0; bottom: 0; left: 0;
    width: 86vw;
    max-width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform .3s var(--ease);
    box-shadow: 6px 0 0 rgba(18, 35, 46, .16);
  }
  .app.sidebar-open .sidebar { transform: none; }

  /* A soft cover over the lesson while the list is open; a tap on it
     closes the list (chat.js). */
  .tutor-main::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(18, 35, 46, .32);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease);
  }
  .app.sidebar-open .tutor-main::after { opacity: 1; pointer-events: auto; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar__title { font-size: 1.1rem; }
  .pace__opt { padding: 7px 11px; font-size: .74rem; }
  .thread-inner, .composer-wrap { padding-left: 14px; padding-right: 14px; }
  .msg--me .bubble { max-width: 100%; }
  .toast { font-size: .78rem; padding: 11px 16px; bottom: 90px; }
}

@media (max-width: 560px) {
  .topbar__title { display: none; }
}

/* =============================================================
   Attachments

   A photo of the actual question, or a worksheet. Pro only — the
   button is present for everyone, because a feature nobody can
   see is a feature nobody upgrades for, but locked it carries a
   PRO tag and opens the plans instead of a file picker.
   ============================================================= */
.attach-btn {
  position: relative;
  width: 3rem; height: 3rem;   /* rem: grows with the text-size setting, same as Send */
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  background: var(--pond);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.attach-btn:hover { background: var(--sky); transform: translate(-1px, -2px); box-shadow: var(--shadow-hard-sm); }
.attach-btn:active { transform: translate(1px, 2px); box-shadow: none; }
.attach-btn svg { width: 1.4rem; height: 1.4rem; }
.attach-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Locked. Greyed rather than disabled: `disabled` would take it
   out of the tab order and swallow the click, and the click is
   the whole point — it is how someone finds out Pro exists. */
.attach-btn.is-locked {
  background: var(--hair-2);
  color: var(--ink-soft);
  opacity: .72;
}
.attach-btn.is-locked:hover {
  background: var(--hair-2);
  transform: none;
  box-shadow: none;
}


/* ---------- Tiles for files sent with a message ----------
   Phase 1 keeps the original File only for this session: the tile
   previews and downloads from a blob URL, and after a reload only
   the file name text remains. Persistence is phase 2's job. */
.msg__files { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.msg--me .msg__files { justify-content: flex-end; }
.filetile {
  display: flex; flex-direction: column; gap: 4px;
  width: 190px; padding: 8px;
  background: var(--paper); color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard-sm);
}
.filetile__open, .filetile__badge {
  display: grid; place-items: center;
  height: 64px; border-radius: 10px; overflow: hidden;
  background: var(--pond); color: var(--ink);
  font-size: .8rem; font-weight: 900; text-decoration: none;
}
.filetile--image .filetile__open { height: 130px; }
.filetile__open img { width: 100%; height: 100%; object-fit: cover; }
.filetile__name { font-size: .8rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filetile__size { font-size: .7rem; font-weight: 700; color: var(--ink-soft); }
.filetile__dl { font-size: .78rem; font-weight: 900; color: var(--blue); }

/* ---------- The tray of what is attached ---------- */
.attachments {
  max-width: 820px;
  margin: 0 auto 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.attachments[hidden] { display: none; }

.attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 6px 8px 6px 6px;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
}
.attachment__thumb {
  width: 30px; height: 30px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pond);
  color: var(--ink);
  font-size: .58rem;
  font-weight: 900;
}
.attachment__thumb img { width: 100%; height: 100%; object-fit: cover; }

.attachment__name {
  min-width: 0;
  font-size: .78rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attachment__note {
  font-size: .7rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}
.attachment__drop {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.attachment__drop:hover { background: var(--pond); color: var(--ink); }
.attachment__drop:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.attachment__drop svg { width: 13px; height: 13px; }

/* ---------- Dragging a file over the composer ---------- */
.composer.is-dropping {
  box-shadow: 4px 5px 0 var(--green);
  background: var(--pond);
}

@media (max-width: 560px) {
  .attach-btn { width: 2.75rem; height: 2.75rem; }
  .attachment { max-width: 100%; }
}

/* =============================================================
   Play layer

   Small, purposeful motion and feedback for young learners. All
   of it uses the same tokens; site.css's reduced-motion rule
   already stills every animation here.
   ============================================================= */

/* The tutor's avatar hops while it is thinking, so a child can see
   their question landed even before any words arrive. */
.msg--tutor:has(.typing) .msg__avatar {
  animation: thinkHop 1.1s var(--ease) infinite;
  transform-origin: 50% 100%;
}
@keyframes thinkHop {
  0%, 60%, 100% { transform: none; }
  25% { transform: translateY(-6px) rotate(-4deg); }
  45% { transform: translateY(0) scaleY(.94); }
}

/* Quick replies: sticker pills above the composer */
.nudges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  animation: msgIn .4s var(--bounce) both;
}
.nudge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 15px 7px 11px;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 800;
  color: var(--ink);
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.nudge::before {
  content: '';
  width: 12px; height: 12px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--sun);
}
.nudge:nth-child(2)::before { background: var(--blue); }
.nudge:nth-child(3)::before { background: var(--green); }
.nudge:hover { background: var(--pond); transform: translate(-1px, -2px); box-shadow: var(--shadow-hard); }
.nudge:active { transform: translate(2px, 3px); box-shadow: none; }

/* An empty lesson list gets a lily pad rather than a bare line */
.sidebar__empty::before {
  content: '';
  display: block;
  width: 84px; height: 64px;
  margin: 0 auto 12px;
  background: url(../../images/lilypad-sm.png) center / contain no-repeat;
}

/* Scrollbars that belong to the pond, not the operating system */
.thread-scroll, .sidebar__body, .drawer__body {
  scrollbar-width: thin;
  scrollbar-color: var(--hair-3) transparent;
}

@media (max-width: 560px) {
  .nudges { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .nudge { flex: none; }
}

/* site.css stacks .nav-actions into its mobile menu below 980px;
   in the tutor's topbar it is just one button and must stay put. */
.topbar .nav-actions { flex-direction: row; margin: 0; padding: 0; border-top: 0; }
.topbar .theme-toggle { margin: 0; }   /* site.css adds a right margin meant for its own nav */

/* White on --blue is 3.5:1; the deeper blue clears AA for the
   bold labels on primary buttons. */
.btn-primary { background: var(--blue-deep); }
.btn-primary:hover { background: color-mix(in srgb, var(--blue-deep) 82%, #12232E); }

/* Letters on sun stay dark in both themes */
.avatar, .msg--me .msg__avatar { color: var(--on-accent); }

/* Short windows (a laptop with the keyboard up, a phone on its
   side): the dock and the pads shrink so the lesson keeps room. */
@media (max-height: 640px) {
  .composer-wrap { padding-top: 8px; padding-bottom: 8px; }
  .composer { gap: 6px; padding: 6px; }
  .nudges { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nudge { flex: none; min-height: 34px; padding: 4px 12px 4px 9px; }
  .attach-btn { width: 2.75rem; height: 2.75rem; }
  .send-btn { height: 2.75rem; font-size: 1.1rem; }
  .composer-hint { margin-top: 6px; font-size: .74rem; }
  .hops { padding-top: 4px; padding-bottom: 4px; }
  .hops__pads { padding-top: 18px; }
}

/* =============================================================
   Text size (account menu)

   Everything in the app is in rem, so the root size scales text
   and the spacing around it together. Phones start a notch
   smaller, because a 375px screen held at arm's length does not
   need desktop-sized type.
   ============================================================= */
html { font-size: calc(100% * var(--text-scale, 1) * var(--device-scale, 1)); }
html[data-text-size="small"]  { --text-scale: .9; }
html[data-text-size="medium"] { --text-scale: 1; }
html[data-text-size="large"]  { --text-scale: 1.12; }
html[data-text-size="xl"]     { --text-scale: 1.25; }
/* Phones default to the fourth (largest) size, on a scale that sits
   lower than a computer's so the four steps suit a small screen. */
@media (max-width: 560px) {
  html { --device-scale: .8; }
  html:not([data-text-size]) { --text-scale: 1.25; }
}

.menu__size { padding: 6px 8px 8px; }
.menu__size-label { display: block; margin: 0 4px 8px; font-size: .82rem; font-weight: 900; color: var(--ink-soft); }
.menu__size-opts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--pond);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
}
.menu__size-opt {
  height: 34px;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.menu__size-opt:hover { color: var(--ink); }
.menu__size-opt[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-hard-sm); }

/* =============================================================
   Phones

   Tighter, calmer and smaller: the same pieces, sized for a
   hand rather than a desk.
   ============================================================= */
@media (max-width: 560px) {
  :root { --header-h: 58px; }
  .topbar { gap: 8px; padding: 0 10px; }
  .icon-btn, .topbar .theme-toggle { width: 38px; height: 38px; border-radius: 11px; }
  .icon-btn svg { width: 18px; height: 18px; }
  /* The switch fills the space between the buttons, so the bar has
     the same 10px margin on both sides and everything is 38px tall. */
  .pace { flex: 1; min-width: 0; height: 38px; padding: 3px; gap: 2px; }
  .pace::before { top: 3px; bottom: 3px; }
  .pace__opt { flex: 1; padding: 0 4px; }
  .pace__opt { padding: 6px 10px; font-size: .74rem; }

  .thread-inner { padding: 18px 12px calc(var(--dock-h, 120px) + 14px); gap: 18px; }
  .msg { gap: 8px; }
  .msg__avatar { width: 32px; height: 32px; font-size: .9rem; }
  .msg__who { font-size: .68rem; margin-bottom: 4px; }
  .bubble { padding: 12px 14px; font-size: 1rem; line-height: 1.6; border-radius: 18px; }
  .msg--tutor .bubble { border-top-left-radius: 6px; }
  .msg--me .bubble { border-top-right-radius: 6px; }

  .welcome { padding: 36px 16px calc(var(--dock-h, 120px) + 16px); }
  .welcome__stage { width: 120px; margin-bottom: 14px; }
  .welcome h1 { font-size: 2rem; }
  .welcome__lede { font-size: 1rem; }
  .starters { gap: 8px; margin-top: 22px; }
  .starter { font-size: .86rem; padding: 5px 13px 5px 5px; gap: 8px; }
  .starter__icon { width: 28px; height: 28px; }

  .composer-wrap { padding: 0 10px 10px; }
  .composer { padding: 6px; gap: 6px; border-radius: 26px; }
  .composer__row { gap: 6px; }
  .send-btn__text { display: none; }
  .send-btn { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; }
  .composer textarea { font-size: 1rem; }
  .composer__row textarea {
    min-height: 2.75rem;
    padding-top: calc((2.75rem - 1.55em) / 2);
    padding-bottom: calc((2.75rem - 1.55em) / 2);
  }
  .nudge { min-height: 34px; padding: 4px 12px 4px 9px; font-size: .8rem; }
  .send-btn svg { width: 1.1rem; height: 1.1rem; }

  /* On a phone the menu lines up with the account button under it,
     edge to edge across the lesson list, so it reads as part of the
     list rather than a box floating over it. */
  .menu { padding: 6px; border-radius: 18px; }
  .menu__item { padding: 11px 12px; font-size: .95rem; border-radius: 12px; }
  .menu__size-opt { height: 32px; }

  .new-chat { font-size: 1.15rem; margin: 12px 10px 10px; width: calc(100% - 20px); }
  .new-chat__plus { width: 32px; height: 32px; }
}

/* Phones paint a blue box over whatever is tapped. Our buttons
   already press in when touched, so that box is just noise.
   Keyboard focus rings (:focus-visible) are untouched. */
* { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }