/* Voice entry — the mic button (bottom right) and its panel. See js/voice.js. */

.voice-fab{
  position:fixed;right:24px;bottom:24px;z-index:65;
  width:56px;height:56px;border-radius:50%;border:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  box-shadow:0 6px 18px rgba(79,70,229,0.35),0 2px 4px rgba(0,0,0,0.12);
  transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background 160ms var(--ease-out);
  touch-action:manipulation;
}
.voice-fab[hidden]{display:none}   /* off until turned on in Adv Settings */
.voice-fab:active{transform:scale(0.94)}
.voice-fab:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:3px}
.voice-fab.on{background:var(--accent-2)}
@media (hover:hover) and (pointer:fine){
  .voice-fab:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(79,70,229,0.4),0 2px 4px rgba(0,0,0,0.12)}
}
/* Listening: a soft ring breathes out of the button. */
.voice-fab.live{background:var(--bad);animation:voice-ring 1.4s var(--ease-out) infinite}
@keyframes voice-ring{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 45%,transparent),0 6px 18px rgba(0,0,0,0.18)}
  100%{box-shadow:0 0 0 16px color-mix(in srgb,var(--bad) 0%,transparent),0 6px 18px rgba(0,0,0,0.18)}
}

/* In the corner (phones, or the rail hidden) the button would sit on the
   open panel's composer, so it steps aside; the panel's ✕ closes it. In the
   desktop rail it stays, like Messages' icon (index.html). */
html.rail-off .voice-fab.hidden-open{display:none}
@media screen and (max-width:860px){ .voice-fab.hidden-open{display:none} }

/* The panel: a side panel docked on the right under the header, like
   Messages (#msgPanel). Chat on top, the composer pinned at the bottom:
   type, or tap the mic to talk. */
.voice-panel{
  position:fixed;top:var(--header-h);right:var(--rail-w,0px);bottom:0;z-index:66;
  width:min(400px,calc(100vw - var(--rail-w,0px) - 24px));
  display:flex;flex-direction:column;
  background:var(--card);color:var(--ink);
  border-left:1px solid var(--border);
  box-shadow:-16px 0 36px -24px rgba(0,0,0,.45);
  opacity:0;transform:translateX(24px);
  pointer-events:none;visibility:hidden;
  transition:opacity 180ms var(--ease-out),transform 220ms var(--ease-out),visibility 0s linear 220ms;
}
.voice-panel.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.vp-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 8px}

.vp-head{display:flex;align-items:center;gap:6px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--border)}
.vp-head b{font-family:var(--font-head);font-size:15px;flex:1}
.vp-icon{width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--ink-2);font-size:15px;line-height:1}
@media (hover:hover) and (pointer:fine){ .vp-icon:hover{background:var(--surface-alt)} }

.vp-status{font-size:13px;color:var(--ink-2);min-height:18px}
.vp-status.live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bad);margin-right:6px;vertical-align:1px;animation:voice-blink 1s ease-in-out infinite}
@keyframes voice-blink{50%{opacity:0.25}}
.vp-heard{font-size:14px;font-weight:500;margin:6px 0 4px;word-break:break-word}
.vp-heard:empty{display:none}

.vp-try{font-size:12px;color:var(--muted);margin-top:8px;text-transform:uppercase;letter-spacing:0.04em}
.vp-examples{margin:6px 0 10px;padding-left:18px;font-size:13px;color:var(--ink-2);line-height:1.6}
.vp-note{font-size:13px;color:var(--ink-2);margin:8px 0}

.vp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:600;
  border:1px solid var(--border-strong);background:var(--card);color:var(--ink);
  transition:transform 120ms var(--ease-out),background 120ms var(--ease-out);
}
.vp-btn:active{transform:scale(0.97)}
.vp-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.vp-btn.ghost{background:transparent}

.vp-form{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.vp-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:500}
.vp-form input,.vp-form select,.vp-type input{
  height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--card);color:var(--ink);font:inherit;font-size:14px;min-width:0;width:100%;
}
.vp-form input:focus,.vp-form select:focus,.vp-type input:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:0;border-color:var(--accent)}
.vp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.vp-row label{min-width:0}
.vp-seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:10px;background:var(--surface-alt);gap:3px}
.vp-seg button{height:32px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font-size:13px;font-weight:600}
.vp-seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,0.12)}
.vp-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}

.vp-type{display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--card)}
.vp-type input{flex:1;height:42px;border-radius:21px;padding:0 16px}
.vp-talk,.vp-send{
  flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--ink-2);
  transition:transform 120ms var(--ease-out),background 120ms var(--ease-out);
}
.vp-talk:active,.vp-send:active{transform:scale(0.94)}
.vp-talk svg{width:18px;height:18px}
.vp-talk.live{background:var(--bad);border-color:var(--bad);color:#fff}
.vp-send{background:var(--accent);border-color:var(--accent);color:#fff}

/* AI on/off chip in the header. */
.vp-chip{height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--border-strong);
  background:transparent;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:0.04em}
.vp-chip.on{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}

/* Conversation. */
.vp-chat{display:flex;flex-direction:column;gap:8px;margin:0 0 8px}
.vp-chat:empty{display:none}
.vp-msg{max-width:85%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.4;word-break:break-word;
  animation:vp-in 180ms var(--ease-out)}
.vp-msg.ai{align-self:flex-start;background:var(--surface-alt);color:var(--ink);border-bottom-left-radius:4px}
.vp-msg.you{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.vp-msg.done{align-self:stretch;max-width:none;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;
  background:color-mix(in srgb,var(--ok) 10%,transparent);color:var(--ink);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.vp-msg.note{align-self:stretch;max-width:none;font-size:12px;color:var(--ink-2);background:transparent;border:1px dashed var(--border-strong)}
.vp-undo{margin-left:auto;flex:none;white-space:nowrap;height:26px;padding:0 10px;border-radius:8px;border:1px solid var(--border-strong);background:var(--card);color:var(--ink);font-size:12px;font-weight:600}
.vp-undo:disabled{opacity:0.6}
@keyframes vp-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.voice-panel.ai .vp-heard{font-weight:400;color:var(--ink-2);font-style:italic}
.vp-body:empty{display:none}

/* The toast lives where the button now sits — lift it clear. */
body.has-voice-fab .toast{right:92px}

/* Phones / tablets: clear the bottom nav bar, and 16px inputs so iOS
   doesn't zoom the page when one is focused. */
@media screen and (max-width:860px){
  .voice-fab{right:16px;bottom:calc(76px + env(safe-area-inset-bottom))}
  /* Phones: the whole width, between the header and the bottom nav. */
  .voice-panel{left:0;right:0;width:auto;border-left:0;box-shadow:none;
               bottom:calc(64px + env(safe-area-inset-bottom));transform:translateY(16px)}
  .voice-panel.open{transform:none}
  .vp-type{padding-bottom:10px}
  .vp-form input,.vp-form select,.vp-type input{font-size:16px;height:42px}
  body.has-voice-fab .toast{right:16px;bottom:calc(144px + env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  .voice-fab,.voice-panel,.vp-btn{transition:none}
  .voice-fab.live,.vp-status.live::before,.vp-msg{animation:none}
}
@media print{ .voice-fab,.voice-panel{display:none !important} }