/* Voice panel (v8/voice.js): a floating side panel so people keep working while they talk to an agent. */
.vp { position: fixed; right: 20px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 295; width: 348px; max-height: min(640px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 24px 60px -18px rgba(0,0,0,.38); overflow: hidden; animation: vpIn .26s cubic-bezier(.2,.8,.2,1); }
.vp.vp-out { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .2s, transform .2s; }
@keyframes vpIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.vp-h { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--border); }
.vp-face { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.vp-face svg, .vp-face img { width: 88%; height: 88%; }
.vp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.vp-who b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.vp-state { font-size: 12px; color: var(--text2); }
.vp[data-state="speaking"] .vp-state { color: var(--agent-color); }
.vp-ib { width: 30px; height: 30px; border-radius: 9px; border: none; background: transparent; color: var(--text2); font-size: 18px; line-height: 1; cursor: pointer; }
.vp-ib:hover { background: var(--hover); color: var(--text); }

.vp-stage { display: flex; justify-content: center; padding: 22px 0 14px; }

/* The orb is drawn on a canvas by VoiceOrb in v8/voice.js. */
.vo-c { width: 150px; height: 150px; display: block; }

.vp-log { flex: 1; min-height: 80px; overflow-y: auto; padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.vp-hint { margin: 6px auto; font-size: 12.5px; color: var(--text3); text-align: center; }
.vp-m { max-width: 86%; padding: 8px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.vp-m.you { align-self: flex-end; background: var(--hover); border-bottom-right-radius: 6px; }
.vp-m.you.interim { color: var(--text3); }
.vp-m.ag { align-self: flex-start; background: color-mix(in srgb, var(--agent-color) 10%, transparent); border-bottom-left-radius: 6px; }
.vp-m.task { font-size: 12.5px; color: var(--text2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vp-link { border: none; background: none; padding: 0; color: var(--agent-color); font-weight: 600; font-size: 12.5px; cursor: pointer; }

.vp-f { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); }
.vp-mute { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.vp-mute.on { background: var(--text); color: var(--panel); border-color: var(--text); }
.vp-tip { flex: 1; font-size: 11.5px; color: var(--text3); line-height: 1.35; }
.vp-end { height: 40px; padding: 0 20px; border-radius: 20px; border: none; background: #ef4444; color: #fff; font-weight: 650; font-size: 13.5px; cursor: pointer; flex-shrink: 0; }
.vp-end:hover { background: #dc2626; }

/* Minimized: just the header and controls, out of the way; the face still talks. */
.vp.vp-min { width: 300px; }
.vp.vp-min .vp-stage, .vp.vp-min .vp-log, .vp.vp-min .vp-tip { display: none; }
.vp.vp-min .vp-f { justify-content: flex-end; }

@media (max-width: 640px) {
  .vp { left: 8px; right: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom)); max-height: 62vh; }
  .vp.vp-min { left: auto; width: 280px; }
}

/* Wide screens: dock to the right edge and make room, so the panel never covers the work. */
@media (min-width: 1180px) {
  .vp:not(.vp-min) { top: 12px; bottom: 12px; right: 12px; max-height: none; }
  body.vp-on .main { padding-right: 372px; transition: padding-right .22s ease; }
  body.vp-on .asst-fab { right: 384px; }
}

/* Intro-page composer (v8/voice.js addIntroComposer): the agent says hi, then you type or talk right away. */
.ic { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ic-hi { align-self: flex-start; display: flex; align-items: center; gap: 8px; min-height: 38px; max-width: 92%; padding: 9px 14px; border-radius: 18px 18px 18px 6px; background: color-mix(in srgb, var(--agent-color) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--agent-color) 18%, transparent); font-size: 14.5px; line-height: 1.45; color: var(--text); opacity: 0; transform: translateY(6px); animation: icIn .4s .15s cubic-bezier(.2,.8,.2,1) forwards; }
.ic-dot { width: 22px; height: 8px; flex-shrink: 0; background: radial-gradient(circle, var(--agent-color) 2.5px, transparent 3px) 0 50% / 8px 8px repeat-x; opacity: .7; animation: icDots 1s steps(3) infinite; }
.ic.ic-said .ic-dot { display: none; }
@keyframes icIn { to { opacity: 1; transform: none; } }
@keyframes icDots { 0% { clip-path: inset(0 66% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.ic-box { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 22px; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -16px rgba(0,0,0,.22); transition: border-color .2s, box-shadow .2s; }
.ic-box:focus-within { border-color: color-mix(in srgb, var(--agent-color) 55%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--agent-color) 14%, transparent), 0 12px 32px -16px rgba(0,0,0,.22); }
.ic-in { flex: 1; min-width: 0; border: none; outline: none; resize: none; background: transparent; color: var(--text); font: inherit; font-size: 15px; line-height: 1.45; padding: 8px 0; max-height: 160px; }
.ic-in::placeholder { color: var(--text3); }
.ic-mic, .ic-send { width: 38px; height: 38px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform .15s, background .2s, opacity .2s; }
.ic-mic { background: var(--hover); color: var(--text); }
.ic-mic:hover { background: color-mix(in srgb, var(--agent-color) 16%, var(--hover)); color: var(--agent-color); transform: scale(1.05); }
.ic-send { background: var(--text); color: var(--panel); }
.ic-send:disabled { opacity: .25; cursor: default; }
.ic-send:not(:disabled):hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .ic-hi { animation: none; opacity: 1; transform: none; } .ic-dot { animation: none; } }
/* The specialists page picks who answers right in the chat box. */
.ic-who { align-self: center; flex-shrink: 0; max-width: 130px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--hover, transparent); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cg-spec-chat { max-width: 640px; }

/* Color dot: shows the other orb color; tap to switch (ocean blue <-> orange). */
.vp-hue { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--border); cursor: pointer; flex-shrink: 0; margin-right: 2px; transition: transform .15s; }
.vp-hue[data-next="orange"] { background: radial-gradient(circle at 35% 30%, #FFE3C4, #FF9A3C 55%, #E2560A); }
.vp-hue[data-next="ocean"] { background: radial-gradient(circle at 35% 30%, #E6F5FF, #4FB3F6 55%, #0A5BD8); }
.vp-hue:hover { transform: scale(1.12); }
.vo-c { cursor: pointer; }

/* In-page section: the call opens right above the chat box and stays on the page while you work. */
.vp.vp-inline { position: relative; inset: auto; z-index: 2; width: 100%; max-width: 100%; max-height: none; margin: 0 0 14px; display: grid; grid-template-columns: 168px 1fr; grid-template-areas: "h h" "s l" "f f"; text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 44px -22px rgba(10,91,216,.35); }
.vp.vp-inline .vp-h { grid-area: h; }
.vp.vp-inline .vp-stage { grid-area: s; align-items: center; padding: 14px 0 14px 12px; }
.vp.vp-inline .vo-c { width: 144px; height: 144px; }
.vp.vp-inline .vp-log { grid-area: l; max-height: 220px; min-height: 120px; padding: 14px 16px 12px; }
.vp.vp-inline .vp-f { grid-area: f; }
.vp.vp-inline.vp-min { width: 100%; grid-template-areas: "h" "f"; grid-template-columns: 1fr; }
@media (max-width: 640px) {
  /* Compact on phones and capped in height, so the chat above always keeps room. */
  .vp.vp-inline { left: auto; right: auto; bottom: auto; max-height: min(42vh, 340px); grid-template-columns: 92px 1fr; grid-template-rows: auto minmax(0, 1fr) auto; }
  .vp.vp-inline .vp-stage { padding: 8px 0 8px 8px; }
  .vp.vp-inline .vo-c { width: 80px; height: 80px; }
  .vp.vp-inline .vp-log { min-height: 0; max-height: none; padding: 10px 12px; }
  .vp.vp-inline .vp-f { padding: 8px 10px; }
}