/* talk2.tech/shakespeare — the portrait hangs on the white wall; the conversation sits beside it. */
.bard{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,4.5rem);align-items:start;padding-block:3rem 4rem}
.bard>*{min-width:0}

.bard-portrait{display:flex;flex-direction:column;align-items:center}
@media (min-width:48rem) and (min-height:501px){.bard-portrait{position:sticky;top:6.5rem}}
.bard-frame{position:relative;width:min(100%,24rem,calc((100dvh - 23rem) * .5625));min-width:12rem;aspect-ratio:9/16;background:var(--color-night)}
.bard-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#vidTalk{opacity:0}
.bard-frame.is-speaking #vidTalk{opacity:1}
@media (prefers-reduced-motion:no-preference){#vidTalk{transition:opacity .3s ease}}

.bard-plate{text-align:center;margin-top:1.5rem}
.bard-plate h1{font-size:clamp(1.875rem,1.5rem + 1.2vw,2.5rem);line-height:1.1;letter-spacing:-.02em;max-width:none}
.bard-plate .spec{margin:.5rem 0 0}
.bard-state{display:inline-flex;align-items:center;gap:.5rem;margin:1rem 0 0;font-size:var(--type-caption);color:var(--color-muted);max-width:none}
.bard-pulse{width:.5rem;height:.5rem;border-radius:50%;background:var(--color-hairline);border:1px solid var(--color-rule)}
.bard-state.is-thinking .bard-pulse{background:var(--color-lilac);border-color:var(--color-ink)}
.bard-state.is-speaking .bard-pulse{background:var(--color-ink);border-color:var(--color-ink)}
@media (prefers-reduced-motion:no-preference){.bard-state.is-thinking .bard-pulse{animation:bard-blink 1s steps(2,jump-none) infinite}}
@keyframes bard-blink{50%{opacity:.3}}
.bard-ctrls{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem}

.bard-btn{font:600 var(--type-caption)/1 var(--font-body);color:var(--color-ink);background:var(--color-page);border:1px solid var(--color-ink);border-radius:999px;min-height:var(--target-min);padding:0 1.125rem;cursor:pointer}
.bard-btn:hover{background:var(--color-lilac)}
.bard-btn[aria-pressed="false"]{color:var(--color-muted);border-color:var(--color-rule)}
.bard-btn--stop{background:var(--color-ink);color:var(--color-reverse)}
.bard-btn--stop:hover{background:var(--color-night)}
.bard-btn[hidden]{display:none}

.bard-chat h2{margin-bottom:.75rem}
.bard-chat .lead{margin-bottom:2rem}

.bard-log{display:flex;flex-direction:column;gap:1.25rem;border-top:1px solid var(--color-ink);padding-top:1.5rem}
.bard-log:empty{display:none}
.bard-msg{margin:0;max-width:62ch}
.bard-msg--you{align-self:flex-end;background:var(--color-lilac);padding:.75rem 1.125rem;border-radius:1rem 1rem .25rem 1rem;max-width:85%;overflow-wrap:anywhere}
.bard-msg--bard{align-self:flex-start;font-family:var(--font-display);font-size:clamp(1.25rem,1.15rem + .35vw,1.5rem);line-height:1.45;letter-spacing:-.005em;padding-left:1.125rem;border-left:2px solid var(--color-ink)}
.bard-msg--note{color:var(--color-muted);font-size:var(--type-caption)}
.bard-cursor{display:inline-block;width:2px;height:1em;background:var(--color-ink);vertical-align:-.12em;margin-left:2px}
@media (prefers-reduced-motion:no-preference){.bard-cursor{animation:bard-blink .9s steps(1) infinite}}

.bard-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.bard-chip{font:400 var(--type-caption)/1.3 var(--font-body);color:var(--color-ink);background:var(--color-page);border:1px solid var(--color-hairline);border-radius:999px;min-height:var(--target-min);padding:.5rem 1rem;cursor:pointer;text-align:left}
.bard-chip:hover{border-color:var(--color-ink)}

.bard-composer{display:flex;gap:.75rem;align-items:flex-end;margin-top:1.5rem;border:1px solid var(--color-ink);border-radius:1rem;padding:.5rem .5rem .5rem 1rem;background:var(--color-page)}
.bard-composer:focus-within{outline:3px solid var(--color-lilac);outline-offset:0}
.bard-composer textarea{flex:1;min-width:0;resize:none;border:0;outline:0;background:transparent;color:var(--color-ink);font:400 var(--type-body)/1.5 var(--font-body);padding:.5rem 0;min-height:var(--action-min);max-height:10rem}
.bard-composer textarea::placeholder{color:var(--color-muted)}
.bard-send{flex:0 0 auto;font:600 var(--type-label)/1 var(--font-body);color:var(--color-reverse);background:var(--color-ink);border:0;border-radius:.625rem;min-height:var(--action-min);padding:0 1.25rem;cursor:pointer}
.bard-send:hover{background:var(--color-night)}
.bard-send:disabled{opacity:.4;cursor:default}
.bard-foot{margin-top:1rem}

.bard-debug{position:fixed;right:1rem;bottom:1rem;z-index:60;width:min(34rem,calc(100% - 2rem));background:var(--color-page);border:1px solid var(--color-ink)}
.bard-debug[hidden]{display:none}
.bard-debug-bar{display:flex;gap:.5rem;align-items:center;padding:.5rem;border-bottom:1px solid var(--color-hairline)}
.bard-debug-bar .spec{margin:0 auto 0 0}
.bard-debug select{font:inherit;font-size:var(--type-caption);min-height:var(--target-min)}
.bard-debug pre{margin:0;max-height:16rem;overflow:auto;padding:.5rem;font:400 .75rem/1.5 var(--font-mono);white-space:pre-wrap}


.bard-mic{flex:0 0 auto;align-self:flex-end;font:600 var(--type-label)/1 var(--font-body);color:var(--color-ink);background:var(--color-lilac);border:1px solid var(--color-ink);border-radius:.625rem;min-height:var(--action-min);padding:0 1.125rem;cursor:pointer}
.bard-mic:hover{background:var(--color-page)}
.bard-mic[aria-pressed="true"]{background:var(--color-ink);color:var(--color-reverse)}
.bard-state.is-listening .bard-pulse,.bard-state.is-connecting .bard-pulse{background:var(--color-lilac);border-color:var(--color-ink)}
@media (prefers-reduced-motion:no-preference){.bard-state.is-listening .bard-pulse{animation:bard-blink 1.4s steps(2,jump-none) infinite}}
.bard-composer{padding-left:.5rem}

/* ── Phones: one screen, no page scroll ──────────────────────────────────────────────────────────
   The page is exactly the visible height (--app-h follows the visual viewport, so it shrinks with the
   iOS keyboard). Only the conversation scrolls. The portrait has three sizes:
   welcome (large, centred) → talking (.has-chat: smaller, name beside it) → typing (.kb-open: compact). */
@media (max-width:47.999rem){
  html:has(body.bard-page){height:100%;overflow:hidden;overscroll-behavior:none}
  body.bard-page{position:fixed;inset:0 0 auto 0;height:var(--app-h,100dvh);display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none}
  .bard-page .hdr{flex:none;position:static;padding-top:env(safe-area-inset-top)}
  .bard-page .hdr-in{flex-direction:row;align-items:center;min-height:3rem}
  .bard-page .mark{font-size:1.25rem}

  .bard{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:.75rem;padding-block:.75rem 0}
  .bard-portrait{flex:none;display:grid;grid-template-columns:auto;justify-items:center;column-gap:1rem}
  .bard-frame{height:clamp(10rem,calc(var(--app-h,100dvh) * .36),24rem);width:auto;min-width:0}
  .bard-plate{margin-top:.75rem}
  .bard-plate h1{font-size:1.75rem}
  .bard-plate .spec{margin-top:.25rem;font-size:.75rem}
  .bard-state{margin-top:.5rem}
  .bard-state,.bard-ctrls{vertical-align:middle}
  .bard-ctrls{display:inline-flex;margin:0 0 0 .5rem}
  .bard-btn{min-height:2.25rem;padding:0 .875rem}

  .bard-chat{flex:1;min-height:0;display:flex;flex-direction:column}
  .bard-chat h2{display:none}
  .bard-chat .lead{font-size:1rem;line-height:1.5;text-align:center;margin:0 auto .75rem;max-width:34ch;color:var(--color-muted)}
  .bard-log{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;gap:.875rem;padding:.75rem .125rem .5rem;border-top:1px solid var(--color-hairline)}
  .bard-msg--bard{font-size:1.1875rem;padding-left:.875rem}
  .bard-msg--you{font-size:1rem;padding:.5rem .875rem}

  /* starters: one row that slides sideways, never a second line */
  .bard-chips{flex:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:auto calc(-1 * var(--page-gutter)) 0;padding:.625rem var(--page-gutter) .125rem;scroll-padding-inline:var(--page-gutter)}
  .bard-chips::-webkit-scrollbar{display:none}
  .bard-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent)}
  .bard-chip{flex:none;white-space:nowrap;min-height:2.5rem;padding:.375rem .875rem}

  .bard-composer{flex:none;margin-top:.625rem;gap:.375rem;padding:.375rem;border-radius:.875rem}
  .bard-composer textarea{padding:.5rem .25rem;min-height:2.75rem;max-height:6.5rem;font-size:1.0625rem}
  .bard-mic,.bard-send{min-height:2.75rem;padding:0 .875rem;font-size:.9375rem}
  .bard-foot{flex:none;font-size:.6875rem;line-height:1.45;text-align:center;margin:.375rem auto 0;padding-bottom:max(.5rem,env(safe-area-inset-bottom))}

  /* talking: the portrait steps back and sits beside his name */
  .bard-page.has-chat .bard-portrait{grid-template-columns:auto 1fr;justify-items:start;align-items:center}
  .bard-page.has-chat .bard-frame{height:clamp(8.5rem,calc(var(--app-h,100dvh) * .22),13rem)}
  .bard-page.has-chat .bard-plate{margin:0;text-align:left}
  .bard-page.has-chat .bard-plate h1{font-size:1.375rem;text-wrap:balance}
  .bard-page.has-chat .bard-ctrls{display:flex;justify-content:flex-start;margin:.5rem 0 0}
  .bard-page.has-chat .bard-chat .lead{display:none}
  .bard-page:not(.has-chat) .bard-log{display:none}

  /* typing: keyboard is up — keep the face, drop everything else above the box */
  .bard-page.kb-open .bard-frame{height:5.5rem}
  .bard-page.kb-open .bard-portrait{grid-template-columns:auto 1fr;justify-items:start;align-items:center}
  .bard-page.kb-open .bard-plate{margin:0;text-align:left}
  .bard-page.kb-open .bard-plate h1{font-size:1.25rem}
  .bard-page.kb-open .bard-plate .spec,.bard-page.kb-open .bard-ctrls,.bard-page.kb-open .bard-foot,
  .bard-page.kb-open .bard-chat .lead{display:none}
  .bard-page.kb-open:not(.has-chat) .bard-chips{margin-top:auto}
  .bard-page.kb-open.has-chat .bard-chips{display:none}
  .bard-page.kb-open .bard-composer{margin-bottom:.5rem}

  @media (prefers-reduced-motion:no-preference){
    .bard-frame{transition:height .35s cubic-bezier(.2,.7,.2,1)}
  }
}
/* small phones (SE, mini): the dates give way beside the smaller portrait */
@media (max-width:24rem){.bard-page.has-chat .bard-plate .spec{display:none}}
/* very short screens (landscape phone, small iPhone SE with keyboard): portrait goes compact */
@media (max-width:47.999rem) and (max-height:34rem){
  .bard-frame{height:5.5rem}
  .bard-portrait{grid-template-columns:auto 1fr;justify-items:start;align-items:center}
  .bard-plate{margin:0;text-align:left}
  .bard-plate .spec{display:none}
}