/* Voice screen v66. Each element has a real grid row; imagery cannot spill into chat. */
.agent-page.voice-page {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(120px,1.2fr) auto minmax(92px,1fr) auto auto auto;
  grid-template-areas:'header' 'intro' 'avatar' 'status' 'conversation' 'error' 'replies' 'composer';
  width:100%;max-width:940px;height:100dvh;min-height:0;
  padding:calc(16px + env(safe-area-inset-top)) 24px calc(16px + env(safe-area-inset-bottom));
  gap:6px;overflow:auto;isolation:isolate;
}
.voice-page .topbar {grid-area:header;gap:12px;min-width:0;padding:0;}
.voice-page .topbar>div:first-child,.voice-page .topbar>div:first-child>div {min-width:0;}
.voice-page .topbar h1 {font-size:18px;line-height:1.3;}
.voice-page .topbar p {font-size:12px;line-height:1.4;max-width:290px;}
.voice-page .top-actions {flex:none;}
.voice-page .agent-intro {grid-area:intro;margin:8px 0 0;}
.voice-page .agent-intro .eyebrow {font:10px/1.4 monospace;letter-spacing:.15em;color:#93bbd0;}
.voice-page .agent-intro h2 {font-size:clamp(20px,3vw,28px);line-height:1.2;margin:5px auto 0;}
.voice-page .bento-presence {
  grid-area:avatar;position:relative;isolation:isolate;display:grid;place-items:center;
  width:100%;height:100%;min-height:0;max-width:100%;margin:0;
  overflow:hidden;perspective:none;contain:layout paint;container-type:size;--level:0;--presence-color:#b9eeff;
}
.bento-presence[data-state=listening] {--presence-color:#7feaff;}
.bento-presence[data-state=thinking] {--presence-color:#c3b5ff;}
.bento-presence[data-state=speaking] {--presence-color:#a1efff;}
.bento-presence[data-state=error] {--presence-color:#ffc56d;}
.presence-touch {
  position:absolute;display:grid;place-items:center;height:100%;width:auto;aspect-ratio:1;max-width:100%;max-height:100%;
  padding:0;border:0;border-radius:40%;background:transparent;cursor:grab;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  --touch-x:0px;--touch-y:0px;--touch-pitch:0deg;--touch-yaw:0deg;--touch-roll:0deg;--touch-scale:1;
  --look-x:0px;--look-y:0px;--shine-x:50%;--shine-y:35%;--touch-energy:0;
  transform:perspective(760px) translate3d(var(--touch-x),var(--touch-y),0) rotateX(var(--touch-pitch)) rotateY(var(--touch-yaw)) rotateZ(var(--touch-roll)) scale(var(--touch-scale));
  transition:transform .7s cubic-bezier(.18,.95,.22,1.18),filter .35s ease;
}
.presence-touch.is-touching {cursor:grabbing;transition-duration:60ms;transition-timing-function:linear;will-change:transform;filter:drop-shadow(0 0 22px #8feaff38);}
.presence-touch:focus-visible {outline:1px solid #a6e9ff;outline-offset:-10px;}
.voice-page.ios-tap-ready .presence-touch {cursor:pointer;filter:drop-shadow(0 0 26px #8feaff42);}
.voice-page.ios-tap-ready .presence-reactor {opacity:.58;transform:scale(1.03);}
.voice-page.ios-tap-ready .face-status,.voice-page.ios-tap-ready .voice-hint {color:#d8f7ff;}
.presence-gesture {position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transform-origin:54% 55%;}
.presence-touch.is-greeting .presence-gesture {animation:presence-greeting .85s ease-in-out both;}
.presence-touch.is-touching .presence-eyes,.presence-touch.is-greeting .presence-eyes {filter:drop-shadow(0 0 6px #9cf1ff);}
.presence-model {
  position:absolute;height:100%;max-height:100%;width:auto;aspect-ratio:1;max-width:100%;
  color:var(--presence-color);transform-origin:54% 55%;
  animation:presence-breathe 5.2s ease-in-out infinite;will-change:transform,filter;
  filter:drop-shadow(0 18px 34px #020915aa) drop-shadow(0 0 calc(12px + var(--level)*16px) #62dfff22);
}
.presence-shell {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;}
.presence-shell-fallback {display:none;position:absolute;inset:9% 12%;border-radius:35%;border:7px solid #415869;background:radial-gradient(ellipse at 30% 10%,#425a72,#060c16 60%);box-shadow:inset 2px 2px 4px #c9dcdf55;}
.bento-presence.avatar-fallback .presence-shell {display:none;}
.bento-presence.avatar-fallback .presence-shell-fallback {display:block;}
.presence-aura {position:absolute;inset:5% 14% 4%;background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,35%),#92f1ff2b,transparent 34%),radial-gradient(ellipse,#5bcaff1a,transparent 68%);opacity:calc(.74 + var(--touch-energy)*.18);transform:scale(calc(.98 + var(--level)*.12 + var(--touch-energy)*.04));filter:blur(calc(0px + var(--level)*2px));transition:opacity .25s ease,transform .12s linear;}
.presence-shadow {position:absolute;bottom:3%;width:30%;height:4%;border-radius:50%;background:#80d9ff1a;filter:blur(7px);animation:presence-shadow 5.2s ease-in-out infinite;}
.presence-reactor {position:absolute;inset:7%;border-radius:42%;opacity:calc(.28 + var(--touch-energy)*.24);pointer-events:none;transform:scale(calc(.92 + var(--level)*.08 + var(--touch-energy)*.05));transition:opacity .28s ease,transform .2s ease;}
.presence-reactor i {position:absolute;inset:8%;border:1px solid #8eefff18;border-radius:50%;filter:blur(.1px);animation:presence-orbit 8s linear infinite;}
.presence-reactor i:nth-child(2) {inset:16%;border-color:#b9b2ff16;animation-duration:11s;animation-direction:reverse;transform:rotateX(68deg) rotateZ(24deg);}
.presence-reactor i:nth-child(3) {inset:24%;border-color:#f8e3a81a;animation-duration:13s;transform:rotateY(72deg) rotateZ(-18deg);}
.presence-orbit {position:absolute;inset:11%;border-radius:50%;opacity:.34;mix-blend-mode:screen;transform:translate(var(--look-x),var(--look-y));transition:transform .18s ease;}
.presence-orbit i {position:absolute;inset:0;border-radius:50%;border:1px solid transparent;border-top-color:#9fefff3b;border-left-color:#b9b2ff20;animation:presence-orbit 7.5s linear infinite;}
.presence-orbit i:nth-child(2){inset:8%;animation-duration:10s;animation-direction:reverse;transform:rotateX(74deg) rotateZ(20deg);}
.presence-orbit i:nth-child(3){inset:17%;border-top-color:#e6f9ff22;animation-duration:13s;}
.presence-shine {position:absolute;inset:18% 19% 20% 20%;border-radius:35%;background:radial-gradient(circle at var(--shine-x) var(--shine-y),#ffffff2e,transparent 18%),linear-gradient(115deg,transparent 36%,#ffffff12 47%,transparent 56%);mix-blend-mode:screen;opacity:calc(.4 + var(--touch-energy)*.22 + var(--level)*.2);transition:opacity .18s ease;}
.presence-eyes {position:absolute;left:33%;top:46%;width:42%;height:6%;display:flex;align-items:center;justify-content:space-between;transform:translate(var(--look-x),var(--look-y));transition:transform .16s ease;}
.presence-eyes i {display:block;width:28%;height:44%;border-radius:999px;background:currentColor;box-shadow:0 0 7px #9adeff,0 0 16px #67beff88;transform-origin:50% 50%;animation:presence-blink 5.2s infinite;}
.presence-smile {position:absolute;left:46%;top:57%;width:16%;height:auto;overflow:visible;filter:drop-shadow(0 0 4px #87d9ff);transform:translate(var(--look-x),var(--look-y));transition:transform .16s ease;}
.presence-smile path {fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;}
.presence-voice-mouth {position:absolute;left:46%;top:56%;width:16%;height:8%;border:2px solid currentColor;border-radius:50%;background:#93e4ff24;box-shadow:0 0 10px #81d4ff66;opacity:0;transform:translate(var(--look-x),var(--look-y)) scaleY(.12);transform-origin:50% 50%;}
.presence-visor-scan {position:absolute;left:28%;top:28%;width:51%;height:44%;border-radius:35%;overflow:hidden;opacity:0;}
.presence-visor-scan i {position:absolute;inset:0;background:linear-gradient(110deg,transparent 36%,#bab5ff2e 49%,#dbf5ff66 51%,transparent 58%);transform:translateX(-110%);}
.bento-presence[data-state=listening] .presence-model {animation:presence-listening 1.25s ease-in-out infinite;transform:translateY(3px) scale(1.025);transition:transform .3s ease;}
.bento-presence[data-state=listening] .presence-eyes i {animation:none;transform:scaleY(1.65);}
.bento-presence[data-state=listening] .presence-aura {opacity:calc(.7 + var(--level)*.3);background:radial-gradient(ellipse,#6ae9ff33,transparent 68%);transform:scale(calc(.92 + var(--level)*.28));transition:transform .1s linear;}
.bento-presence[data-state=thinking] .presence-eyes i {animation:none;transform:scaleY(.45);}
.bento-presence[data-state=thinking] .presence-smile {opacity:.6;}
.bento-presence[data-state=thinking] .presence-visor-scan {opacity:1;}
.bento-presence[data-state=thinking] .presence-visor-scan i {animation:presence-scan 1.8s ease-in-out infinite;}
.bento-presence[data-state=thinking] .presence-orbit {opacity:.55;}
.bento-presence[data-state=speaking] .presence-model {animation:none;transform:translateY(calc(-4px * var(--level))) scale(calc(1 + var(--level)*.025)) rotateZ(calc(var(--level)*.8deg));}
.bento-presence[data-state=speaking] .presence-smile {opacity:0;}
.bento-presence[data-state=speaking] .presence-voice-mouth {opacity:1;transform:translate(var(--look-x),var(--look-y)) scaleY(calc(.12 + var(--level)*1.05));}
.bento-presence[data-state=speaking] .presence-reactor {opacity:calc(.42 + var(--level)*.32);}
.bento-presence[data-state=error] .presence-eyes i {box-shadow:0 0 14px #eaa24b88;animation:presence-error 1s ease-in-out;}
.bento-presence[data-state=error] .presence-model {animation:none;}
.voice-page .face-status {grid-area:status;margin:0;min-height:20px;font-size:12px;line-height:20px;color:#a7ccda;}
.voice-page .conversation {
  grid-area:conversation;position:relative;z-index:auto;min-height:0;max-height:none;height:100%;
  width:100%;max-width:720px;margin:0 auto;padding:12px 8px 6px;overflow:auto;
  border:0;border-top:1px solid #9edceb16;border-radius:0;background:none;mask-image:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.voice-page .message {font-size:14px;line-height:1.6;margin:0 0 14px;}
.voice-page .message.in {max-width:90%;margin-left:auto;padding:10px 14px;border-radius:14px 14px 4px 14px;box-shadow:none;}
.voice-page .message.out {max-width:100%;padding:2px 0;}
.voice-page .message-label {font-size:9px;margin-bottom:5px;}
.voice-page .reply-actions {grid-area:replies;min-height:0;margin:0;gap:8px;flex-wrap:wrap;}
.voice-page .reply-actions:has(button:not([hidden])) {min-height:32px;}
.voice-page .reply-actions button {font-size:12px;min-height:34px;padding:7px 14px;border-radius:18px;}
.voice-page #screen-error {grid-area:error;margin:0;max-height:76px;overflow:auto;}
.voice-page .composer {grid-area:composer;position:static;width:100%;max-width:720px;margin:0 auto;padding:4px 0 0;}
.voice-page .voice-controls {display:flex;justify-content:center;gap:clamp(6px,2vw,16px);padding:0;}
.voice-page .icon-button {width:42px;min-width:42px;height:42px;}
.voice-page .mic-button {width:68px;height:68px;flex:0 0 68px;}
.voice-page .voice-hint {font-size:11px;line-height:1.5;margin:10px 0 0;}
.voice-page .text-composer textarea {min-width:0;}
.voice-page .text-composer .attach-button {flex:none;}
.voice-page .attachment-preview {max-height:70px;overflow:auto;}
.voice-page.text-mode {grid-template-rows:auto auto minmax(82px,.65fr) auto minmax(100px,1.5fr) auto auto auto;}
@keyframes presence-breathe {0%,100%{transform:translateY(3px) rotateY(-1.2deg)}50%{transform:translateY(-5px) rotateY(1.4deg)}}
@keyframes presence-shadow {0%,100%{transform:scaleX(1);opacity:.7}50%{transform:scaleX(.85);opacity:.35}}
@keyframes presence-blink {0%,90%,96%,100%{transform:scaleY(1)}93%{transform:scaleY(.06)}}
@keyframes presence-scan {0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
@keyframes presence-error {0%,100%{opacity:1}30%,65%{opacity:.25}}
@keyframes presence-orbit {to{transform:rotateZ(360deg)}}
@keyframes presence-listening {0%,100%{transform:translateY(2px) scale(1.02) rotateX(0)}50%{transform:translateY(-5px) scale(1.035) rotateX(-2deg)}}
@keyframes presence-greeting {
  0%,100%{transform:perspective(650px) translateY(0) rotateX(0) rotateY(0) rotateZ(0)}
  22%{transform:perspective(650px) translateY(8px) rotateX(-14deg) rotateY(8deg) rotateZ(-4deg)}
  48%{transform:perspective(650px) translateY(-10px) rotateX(10deg) rotateY(-10deg) rotateZ(4deg)}
  72%{transform:perspective(650px) translateY(2px) rotateX(-4deg) rotateY(4deg) rotateZ(-1deg)}
}
@media(min-width:900px) and (min-height:620px) {
  .agent-page.voice-page {grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(240px,1fr) auto auto auto auto;grid-template-areas:'header header' 'intro intro' 'avatar conversation' 'status conversation' 'error error' 'replies replies' 'composer composer';gap:12px 28px;padding-top:30px;}
  .voice-page .conversation {padding:22px 4px 10px 22px;border-top:0;border-left:1px solid #9edceb16;}
}
@supports(width:1cqw) {
  .voice-page .presence-touch,.voice-page .presence-model {width:min(100cqw,100cqh);height:min(100cqw,100cqh);}
}
@media(max-width:650px) {
  .agent-page.voice-page {padding-left:16px;padding-right:16px;}
  .voice-page .topbar p {font-size:11px;max-width:235px;}
  .voice-page .topbar h1 {font-size:17px;}
}
@media(max-width:360px) {
  .agent-page.voice-page {padding-left:12px;padding-right:12px;}
  .voice-page .voice-controls {gap:6px;}
  .voice-page .voice-controls .icon-button {width:38px;min-width:38px;height:38px;}
  .voice-page .mic-button {width:60px;height:60px;flex-basis:60px;}
}
@media(max-height:620px) {
  .agent-page.voice-page {padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom));gap:3px;}
  .voice-page .agent-intro {display:none;}
  .voice-page .mic-button {width:54px;height:54px;flex-basis:54px;}
  .voice-page .voice-hint {margin-top:6px;}
  .voice-page.text-mode .bento-presence,.voice-page.text-mode .face-status {display:none;}
  .voice-page.text-mode {grid-template-rows:auto 0 0 0 minmax(80px,1fr) auto auto auto;}
}
@media(prefers-reduced-motion:reduce) {
  .bento-presence * {animation:none!important;transition:none!important;}
  .bento-presence[data-state] .presence-model,.bento-presence[data-state] .presence-aura,.bento-presence[data-state] .presence-eyes i {transform:none!important;}
  .bento-presence[data-state] .presence-voice-mouth,.bento-presence[data-state] .presence-visor-scan {display:none;}
  .bento-presence .presence-reactor,.bento-presence .presence-orbit,.bento-presence .presence-shine {display:none;}
  .bento-presence[data-state] .presence-smile {opacity:1;}
  .bento-presence .presence-touch,.bento-presence .presence-gesture {transform:none!important;}
}

/* v75 — conversation first, with permanent text entry and named voice controls. */
.agent-page.voice-page.has-conversation {grid-template-rows:auto auto minmax(76px,.32fr) auto minmax(150px,1.7fr) auto auto auto;}
.voice-page.has-conversation .agent-intro {margin:0;}
.voice-page .quick-access {display:flex;justify-content:center;gap:12px;margin:0 0 8px;}
.voice-page .quick-access a,.voice-page .quick-access button {display:inline-flex;align-items:center;gap:6px;border:1px solid #b4dfff28;border-radius:18px;background:#0c1b27;color:#cde5f2;padding:8px 12px;font:inherit;font-size:12px;text-decoration:none;min-height:36px;cursor:pointer;}
.voice-page .quick-access svg {width:16px;height:16px;}
.voice-page .text-composer {margin-bottom:10px;gap:8px;}
.voice-page .text-composer textarea {font-size:16px;min-height:46px;max-height:110px;}
.voice-page .voice-controls {align-items:center;padding-bottom:20px;}
.voice-page .voice-controls button {position:relative;}
.voice-page .control-label {position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;font:10px/1.2 system-ui;color:#c1d7e5;}
.voice-page .mic-button {width:54px;height:54px;flex-basis:54px;}
.voice-page .voice-hint {margin-top:8px;}
.voice-page .message {font-size:15px;line-height:1.65;}
.voice-page .composer:focus-within {padding-bottom:env(safe-area-inset-bottom);}
@media(max-height:620px){
 .agent-page.voice-page.has-conversation,.agent-page.voice-page.text-mode {grid-template-rows:auto 0 0 auto minmax(85px,1fr) auto auto auto;}
 .voice-page.has-conversation .agent-intro,.voice-page.has-conversation .bento-presence {display:none;}
 .voice-page .topbar p {display:none;}
 .voice-page .quick-access {margin-bottom:4px;}
}

/* v77 — voice is the primary experience; history never shrinks the character. */
.agent-page.voice-page:not(.text-mode) {
 grid-template-rows:auto auto clamp(210px,36dvh,400px) auto minmax(90px,1fr) auto auto auto;
}
.voice-page:not(.text-mode) .agent-intro {display:block;margin:4px 0 0;}
.voice-page:not(.text-mode) .bento-presence {display:grid;}
.voice-page:not(.text-mode) .conversation {min-height:90px;}
.agent-page.voice-page.text-mode {
 grid-template-rows:auto auto 100px auto minmax(140px,1fr) auto auto auto;
}
.voice-page.text-mode .bento-presence {display:grid;}
.voice-page.text-mode .agent-intro {display:block;}
@media(max-height:620px){
 .agent-page.voice-page:not(.text-mode) {grid-template-rows:auto 0 clamp(155px,33dvh,205px) auto minmax(70px,1fr) auto auto auto;}
 .voice-page:not(.text-mode) .agent-intro {display:none;}
 .agent-page.voice-page.text-mode {grid-template-rows:auto 0 0 auto minmax(85px,1fr) auto auto auto;}
 .voice-page.text-mode .bento-presence,.voice-page.text-mode .agent-intro {display:none;}
}

/* v79 — two views of the same conversation. Voice gives the stage to Bento. */
.agent-page.voice-page:not(.text-mode),.agent-page.voice-page.text-mode {
 display:flex;flex-direction:column;gap:8px;
}
.voice-page .topbar,.voice-page .agent-intro,.voice-page .composer,.voice-page .reply-actions,.voice-page .face-status {flex-shrink:0;}
.voice-page .conversation-modes {display:flex;justify-content:center;gap:4px;padding:4px;border:1px solid #b4dfff28;border-radius:24px;width:fit-content;margin:4px auto;background:#091620;}
.voice-page .conversation-modes button {font:inherit;font-size:14px;min-height:40px;padding:8px 24px;border:0;border-radius:20px;background:transparent;color:#a7bdcc;cursor:pointer;}
.voice-page .conversation-modes button[aria-pressed=true] {background:#c1eaff;color:#082133;}
.voice-page .conversation-modes button:focus-visible {outline:2px solid #fff;outline-offset:3px;}
.voice-page:not(.text-mode) .bento-presence {flex:1 0 220px;min-height:220px;width:100%;}
.voice-page:not(.text-mode) .conversation,.voice-page #live-caption {display:none;}
.voice-page:not(.text-mode) .quick-access {display:none;}
.voice-page .view-conversation {display:block;margin:0 auto 12px;color:#b9d9ea;min-height:36px;}
.voice-page #keyboard {display:none;}
.voice-page.text-mode .view-conversation {display:none;}
.voice-page.text-mode .bento-presence {display:grid;flex:0 0 58px;height:58px;min-height:58px;}
.voice-page.text-mode .face-status {display:none;}
.voice-page.text-mode .conversation {flex:1 0 140px;min-height:140px;height:auto;}
.voice-page .agent-intro {display:block!important;margin:0!important;}
.voice-page .approval-list:not([hidden]) {flex-shrink:0;max-height:28dvh;overflow:auto;}
@media(max-height:620px){
 .voice-page:not(.text-mode) .bento-presence {flex-basis:160px;min-height:160px;}
 .voice-page.text-mode .bento-presence {display:none;}
 .voice-page .topbar p {display:none;}
}