/* ============ PYRA INTERVIEW — shared voice interview styling ============
   Page-agnostic: reads only CSS vars common to index.css and studio.css
   (--bg, --line, --line2, --text, --muted, --gold, --mono, --ease), so the
   module auto-themes on both pages without a second stylesheet. Mirrors the
   editor.css convention. See CLAUDE.md. */

.pi-log{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;padding:4px 0}
.pi-bubble{display:flex;gap:10px;align-items:flex-start}
.pi-bubble .pi-av{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:10px;border:1px solid var(--line2,var(--line));color:var(--muted)}
.pi-bubble .pi-tx{font-size:14px;line-height:1.55;color:var(--text)}
.pi-bubble.them .pi-av{color:var(--gold);border-color:var(--gold)}
.pi-bubble.me{flex-direction:row-reverse}
.pi-bubble.me .pi-tx{text-align:right}
.pi-bubble.wrap .pi-tx{font-style:italic;color:var(--muted)}
.pi-dim{color:var(--muted);opacity:.7}

/* The recording state must be unmistakable — a mic that is live without the
   user knowing is a trust failure, not a styling detail. */
.pi-bubble.rec .pi-av{border-color:var(--gold);animation:pi-pulse 1.4s infinite}
@keyframes pi-pulse{0%,100%{opacity:1}50%{opacity:.45}}

.pi-controls{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.pi-mic{width:42px;height:42px;border-radius:50%;flex-shrink:0;border:1px solid var(--line2,var(--line));background:none;color:var(--text);font-size:17px;cursor:pointer;transition:all .2s var(--ease,ease)}
.pi-mic:hover{border-color:var(--gold)}
.pi-mic.on{border-color:var(--gold);color:var(--gold);animation:pi-pulse 1.4s infinite}
.pi-type{flex:1;min-width:180px;background:none;border:none;border-bottom:1px solid var(--line);color:var(--text);font-family:inherit;font-size:14px;padding:9px 2px}
.pi-type:focus{outline:none;border-bottom-color:var(--gold)}
.pi-wrap{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:8px 13px;background:none;cursor:pointer}
.pi-wrap:hover:not(:disabled){color:var(--text);border-color:var(--line2,var(--line))}
.pi-wrap:disabled{opacity:.4;cursor:not-allowed}

.pi-status{font-size:11px;color:var(--muted);margin-top:10px;min-height:1.2em}
/* The disclosure is quiet but always present once recording is possible —
   it is the answer to "where does my voice go", and it should not need a
   click to find. */
.pi-note{font-size:10px;color:var(--muted);opacity:.75;margin-top:6px;line-height:1.5}

@media (prefers-reduced-motion:reduce){
  .pi-mic.on,.pi-bubble.rec .pi-av{animation:none}
}

/* (pointer:coarse) OR a narrow viewport.
   The OR matters twice over: a resized desktop browser still reports
   pointer:fine and maxTouchPoints:0, so a coarse-only query is untestable in
   any headless harness — and below 720px the layout is already the mobile
   layout, so larger targets there are consistent rather than a regression. */
@media (pointer:coarse),(max-width:720px){
  .pi-type{font-size:16px}
}

@media (pointer:coarse),(max-width:720px){
  /* The mic is the primary control of the whole interview and was 42px. */
  .pi-mic{width:52px;height:52px}
  .pi-wrap{min-height:44px}
  /* The floor went on the WRAPPER, which is not the thing you tap — the input
     inside it stayed 38px. The typed answer is the whole fallback path for
     anyone who will not or cannot use the mic, so it is not an optional
     control. */
  .pi-type{min-height:44px}
}