/* ============================================================
   public/voice/talk.css — Copilot Talk mode (dashboard Copilot panel).
   Uses the dashboard's theme tokens (--accent, --panel, --line, --text, …), so
   light/dark and every accent palette work without extra rules.
   ============================================================ */

/* the robot launcher's Talk button, once enabled (no "Coming soon" badge) */
.lbtn.cp-talk{white-space:nowrap}
/* Talk view hides the text box (.cp-input sets display:flex, which beats [hidden]) */
.cp-input[hidden]{display:none}

/* mode bar under the panel header: Chat | Talk · read aloud · mic on */
.cp-modebar{position:relative; display:flex; align-items:center; gap:10px; padding:8px var(--s3, 16px);
  border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--text) 1.5%,transparent)}
.cp-modebar[hidden]{display:none}
.cp-seg{display:inline-flex; padding:3px; gap:2px; border-radius:999px; border:1px solid var(--line);
  background:color-mix(in srgb,var(--text) 3%,transparent)}
.cp-seg button{display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; font-size:13px; font-weight:600;
  color:var(--muted); transition:color .2s, background .2s; min-height:30px}
.cp-seg button i{font-size:15px}
.cp-seg button[aria-selected="true"],.cp-seg button[aria-checked="true"]{color:var(--accent-ink); background:var(--accent)}
.cp-seg button:not([aria-selected="true"]):not([aria-checked="true"]):hover{color:var(--text)}
.cp-seg button:focus-visible,.cp-readaloud:focus-visible,.cp-talk-mic:focus-visible,.cp-talk-link:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.cp-readaloud{display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; border:1px solid var(--line);
  font-size:12.5px; font-weight:600; color:var(--muted); min-height:30px; transition:color .2s, border-color .2s, background .2s}
.cp-readaloud i{font-size:15px}
.cp-readaloud:hover{color:var(--text)}
.cp-readaloud[aria-pressed="true"]{color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft)}
.cp-readaloud[hidden]{display:none}
.cp-micon{margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--red); background:var(--red-soft); border:1px solid var(--red-line)}
.cp-micon[hidden]{display:none}
.cp-micon .dot{width:7px; height:7px; border-radius:50%; background:var(--red); animation:cpMicPulse 1.4s ease-in-out infinite}
@keyframes cpMicPulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.8)}}

/* the Talk area (replaces the text box while in Talk view) */
.cp-talk{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:14px var(--s3, 16px) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line); background:color-mix(in srgb,var(--text) 2%,transparent)}
.cp-talk[hidden]{display:none}
.cp-talk-live{min-height:22px; max-width:100%; font-size:14px; line-height:1.5; color:var(--body); font-style:italic;
  text-align:center; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.cp-talk-wave{width:100%; max-width:340px; height:40px; display:block}
.cp-talk-mic{position:relative; width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:30px; color:var(--accent-ink); background:var(--accent); box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 35%,transparent);
  transition:transform .15s ease, box-shadow .2s, background .2s; touch-action:none; -webkit-user-select:none; user-select:none}
.cp-talk-mic:active{transform:scale(.96)}
.cp-talk-mic::after{content:""; position:absolute; inset:-7px; border-radius:50%; border:2px solid var(--accent-line); opacity:0; transition:opacity .2s}
.cp-talk[data-state="listening"] .cp-talk-mic::after,.cp-talk[data-state="holding"] .cp-talk-mic::after{opacity:1; animation:cpRing 1.6s ease-out infinite}
.cp-talk[data-state="holding"] .cp-talk-mic{transform:scale(1.06)}
/* thinking: no audio yet (no fillers) — the button breathes and the wave shimmers (talk.js) */
.cp-talk[data-state="thinking"] .cp-talk-mic{background:color-mix(in srgb,var(--accent) 55%,var(--panel)); animation:cpThink 1.3s ease-in-out infinite}
.cp-talk[data-state="thinking"] .cp-talk-mic::after{opacity:1; animation:cpRing 1.3s ease-out infinite}
.cp-talk[data-state="thinking"] .cp-talk-state{animation:cpThinkText 1.3s ease-in-out infinite}
.cp-talk[data-state="speaking"] .cp-talk-mic{background:var(--panel); color:var(--accent); border:2px solid var(--accent)}
.cp-talk[data-state="connecting"] .cp-talk-mic{opacity:.7}
@keyframes cpRing{0%{transform:scale(.92); opacity:.9} 100%{transform:scale(1.18); opacity:0}}
@keyframes cpThink{0%,100%{transform:scale(1)} 50%{transform:scale(.93)}}
@keyframes cpThinkText{0%,100%{opacity:1} 50%{opacity:.55}}
.cp-talk-state{font-size:13px; font-weight:600; color:var(--text); min-height:18px; text-align:center}
.cp-talk-msg{max-width:36ch; font-size:13px; line-height:1.5; text-align:center; color:var(--text);
  padding:8px 12px; border-radius:12px; background:var(--red-soft); border:1px solid var(--red-line)}
.cp-talk-msg[hidden]{display:none}
.cp-talk-msg.info{background:color-mix(in srgb,var(--text) 4%,transparent); border-color:var(--line); color:var(--body)}
.cp-talk-link{display:inline; padding:0; font:inherit; font-weight:700; color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.cp-seg-sm button{padding:5px 11px; font-size:12px; min-height:28px}

@media (max-width:420px){
  .cp-modebar{gap:8px; padding:7px 12px}
  .cp-seg button{padding:6px 11px}
  .cp-readaloud span{display:none}
  .cp-talk{padding:12px 12px calc(14px + env(safe-area-inset-bottom, 0px))}
  .cp-talk-mic{width:68px; height:68px}
}
@media (prefers-reduced-motion:reduce){
  .cp-micon .dot,.cp-talk .cp-talk-mic::after,.cp-talk .cp-talk-mic,.cp-talk .cp-talk-state{animation:none}
  .cp-talk-mic{transition:none}
}