/* One conversation composer. The only variation is light before call time and purple backstage. */
body.talk-open { overflow:hidden; }
body.talk-open .masthead,
body.talk-open .job-rail,
body.talk-open .toast-stack,
body.talk-open .tray-actions { visibility:hidden!important; }

.talk-stage {
  --conversation-ink:#211a26;
  --conversation-muted:rgba(33,26,38,.52);
  --conversation-line:rgba(46,33,53,.13);
  --conversation-paper:#f8f5fb;
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(320px,.72fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:0 clamp(22px,4vw,72px);
  width:100%;
  height:100%;
  min-height:100svh;
  padding:max(15px,env(safe-area-inset-top)) clamp(18px,4vw,64px) max(14px,env(safe-area-inset-bottom));
  overflow:hidden;
  overscroll-behavior:none;
  color:var(--conversation-ink);
  background-color:var(--conversation-paper);
  isolation:isolate;
  animation:conversation-enter .42s cubic-bezier(.2,.78,.2,1);
}
.talk-stage::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(132deg,rgba(255,255,255,.96),rgba(239,231,247,.76));
}
.talk-stage::after {
  content:"";
  position:absolute;
  inset:74px 0 0;
  z-index:-1;
  pointer-events:none;
  opacity:.22;
  background:repeating-linear-gradient(180deg,transparent 0 31px,var(--conversation-line) 32px,transparent 33px 64px);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 15%,black 85%,transparent);
  mask-image:linear-gradient(90deg,transparent,black 15%,black 85%,transparent);
}
@keyframes conversation-enter { from { opacity:0; transform:scale(.992) } to { opacity:1; transform:none } }

.talk-stage[data-theme="backstage"] {
  --conversation-ink:#f1e9f5;
  --conversation-muted:rgba(241,233,245,.5);
  --conversation-line:rgba(226,199,242,.13);
  --conversation-paper:#0d0713;
  color:var(--conversation-ink);
  background-color:var(--conversation-paper);
}
.talk-stage[data-theme="backstage"]::before { background:linear-gradient(137deg,#1b0e24 0%,#100817 54%,#09060e 100%); }

.talk-top {
  grid-column:1/-1;
  grid-row:1;
  position:relative;
  z-index:8;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  border-bottom:1px solid var(--conversation-line);
  padding:0 0 12px;
}
.talk-mark { width:auto; height:21px; opacity:.82; }
.talk-stage[data-theme="backstage"] .talk-mark { filter:invert(1); opacity:.9; }
.talk-who { display:flex; min-width:0; align-items:baseline; gap:9px; margin-right:auto; }
.talk-who strong { overflow:hidden; font:500 clamp(16px,2vw,22px)/1 var(--sans); letter-spacing:-.03em; text-overflow:ellipsis; white-space:nowrap; }
.talk-who span { color:var(--conversation-muted); font:600 9px/1 var(--sans); letter-spacing:.06em; text-transform:none; }
.talk-who #talk-mood { color:var(--emotion-color); }
.talk-top button { color:var(--conversation-ink); }
.talk-refine-toggle,
.talk-sound-toggle { border:0; padding:9px 4px; background:transparent; color:var(--conversation-muted)!important; font:550 11px/1 var(--sans); cursor:pointer; }
.talk-chat-toggle,
.talk-close {
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  flex:0 0 auto;
  padding:0;
  border:1px solid var(--conversation-line);
  border-radius:50%;
  background:color-mix(in srgb,var(--conversation-paper) 82%,transparent);
  font:400 17px/1 var(--sans);
  cursor:pointer;
}
.talk-close { font-size:24px; }
.talk-top button:focus-visible,
.talk-mic:focus-visible,
.talk-type input:focus-visible { outline:2px solid var(--emotion-color); outline-offset:3px; }

.talk-character {
  grid-column:1;
  grid-row:2/4;
  position:relative;
  min-width:0;
  min-height:0;
  overflow:visible;
}
.conversation-performer { position:absolute; inset:0; display:grid; place-items:center; isolation:isolate; }
.conversation-performer::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:16%;
  right:16%;
  bottom:3%;
  height:9%;
  border-radius:50%;
  background:color-mix(in srgb,var(--emotion-color) 18%,transparent);
  filter:blur(18px);
  opacity:.76;
}
.conversation-canvas { position:absolute; inset:-2%; z-index:2; width:104%; height:104%; opacity:0; filter:drop-shadow(0 32px 29px rgba(21,9,27,.3)); transition:opacity .5s ease; touch-action:none; cursor:grab; overscroll-behavior:contain; }
.conversation-canvas.is-orbiting { cursor:grabbing; }
.conversation-performer[data-ready="true"] .conversation-canvas { opacity:1; }
.conversation-portrait { position:absolute; inset:2%; z-index:1; width:96%; height:96%; object-fit:contain; object-position:center; filter:drop-shadow(0 26px 25px rgba(19,8,25,.28)); transition:opacity .52s ease,transform .9s cubic-bezier(.2,.75,.2,1); }
.conversation-performer[data-ready="true"] .conversation-portrait { opacity:0; transform:scale(1.018); }
.conversation-performer[data-error="true"] .conversation-portrait { opacity:1; transform:none; }
.conversation-loading { position:absolute; z-index:4; bottom:5%; color:var(--conversation-muted); font:500 11px/1 var(--sans); letter-spacing:.02em; }
.conversation-orbit-hint { position:absolute; z-index:4; left:50%; bottom:4%; translate:-50% 0; padding:7px 11px; border:1px solid var(--conversation-line); border-radius:999px; background:color-mix(in srgb,var(--conversation-paper) 72%,transparent); color:var(--conversation-muted); font:550 9px/1 var(--sans); letter-spacing:.02em; pointer-events:none; opacity:0; transform:translateY(5px); transition:opacity .35s ease,transform .35s ease; backdrop-filter:blur(12px); }
.conversation-performer[data-ready="true"] .conversation-orbit-hint { opacity:.74; transform:none; }
.conversation-performer[data-explored="true"] .conversation-orbit-hint { opacity:0; transform:translateY(5px); }

.emotion-atmosphere { position:absolute; inset:68px 0 0; z-index:-1; overflow:hidden; pointer-events:none; opacity:.42; }
.emotion-etching { position:absolute; left:3%; top:18%; width:90px; color:var(--emotion-color); opacity:.42; }
.emotion-orbit { position:absolute; right:8%; top:16%; width:clamp(180px,28vw,420px); aspect-ratio:1; border:1px solid color-mix(in srgb,var(--emotion-color) 24%,transparent); border-radius:50%; }
#emotion-moment { display:none; }

.talk-subtitles,
.talk-wave { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%)!important; }
.talk-log {
  grid-column:2;
  grid-row:2;
  position:relative;
  z-index:5;
  display:flex!important;
  min-height:0;
  width:min(520px,100%);
  margin:0 auto;
  padding:clamp(22px,4vh,44px) 7px 18px;
  flex-direction:column;
  justify-content:flex-end;
  gap:13px;
  overflow:auto;
  list-style:none;
  scrollbar-width:thin;
  scrollbar-color:var(--conversation-line) transparent;
  -webkit-mask-image:linear-gradient(transparent,black 11%,black 95%,transparent);
  mask-image:linear-gradient(transparent,black 11%,black 95%,transparent);
}
.talk-log li,
.talk-log li[data-role="assistant"] { width:100%; max-width:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:color-mix(in srgb,var(--conversation-ink) 82%,transparent); }
.talk-log li[data-role="user"] { color:var(--conversation-muted); }
.talk-log li span { display:flex; align-items:center; gap:7px; margin:0 0 4px; color:inherit; opacity:.62; font:600 8px/1 var(--sans); letter-spacing:.07em; text-transform:none; }
.talk-log li p { margin:0; font:400 14px/1.52 var(--sans); }
.talk-log .conversation-empty { color:var(--conversation-muted); font-style:normal; }
.talk-feeling,
.talk-bond { padding:0; border-radius:0; background:transparent; color:var(--emotion-color); font:inherit; }

.talk-controls { grid-column:2; grid-row:3; position:relative; z-index:7; display:grid; justify-items:center; align-self:end; gap:7px; padding:9px 0 5px; }
.talk-control-orbit { position:relative; display:grid; width:min(330px,100%); min-height:122px; place-items:center; }
.talk-mic { position:relative; display:grid; width:102px; height:102px; place-items:center; border:0; border-radius:50%; background:#151119; color:#fff; box-shadow:0 0 0 1px color-mix(in srgb,var(--conversation-ink) 25%,transparent),0 0 0 8px color-mix(in srgb,var(--conversation-ink) 4%,transparent),0 18px 44px rgba(15,6,20,.26); cursor:pointer; touch-action:none; transition:transform .18s ease,background .25s ease,box-shadow .25s ease; -webkit-user-select:none; user-select:none; }
.talk-stage[data-theme="backstage"] .talk-mic { background:#08060b; box-shadow:0 0 0 1px rgba(239,226,246,.3),0 0 0 9px rgba(255,255,255,.035),0 20px 52px rgba(0,0,0,.48); }
.talk-mic-ring { position:absolute; inset:-9px; border:1px solid var(--emotion-color); border-radius:50%; opacity:0; }
.talk-mic-label { max-width:68px; color:#fff; font:650 12px/1.12 var(--sans); letter-spacing:.01em; text-align:center; text-transform:none; }
.talk-stage[data-state="listening"] .talk-mic,
.talk-stage[data-state="speaking"] .talk-mic { background:color-mix(in srgb,var(--emotion-color) 34%,#100a14); transform:scale(1.025); box-shadow:0 0 0 1px var(--emotion-color),0 0 0 10px color-mix(in srgb,var(--emotion-color) 12%,transparent),0 20px 54px rgba(16,7,20,.35); }
.talk-stage[data-state="listening"] .talk-mic-ring,
.talk-stage[data-state="speaking"] .talk-mic-ring { opacity:1; animation:conversation-pulse 1.35s ease-out infinite; }
@keyframes conversation-pulse { from { transform:scale(.96); opacity:.8 } to { transform:scale(1.28); opacity:0 } }
.talk-hint { min-height:1.2em; margin:0; color:var(--conversation-muted); font:500 10px/1.25 var(--sans); letter-spacing:.01em; text-align:center; text-transform:none; }
.talk-type { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; width:min(430px,100%); margin-top:3px; }
.talk-stage[data-typing="true"] .talk-type { display:grid!important; }
.talk-type input { min-width:0; padding:12px 17px; border:1px solid var(--conversation-line); border-radius:999px; background:color-mix(in srgb,var(--conversation-paper) 84%,transparent); color:var(--conversation-ink); font:16px/1 var(--sans); }
.talk-type .ink-button { min-height:42px; padding:0 18px; border-radius:999px; background:var(--conversation-ink); color:var(--conversation-paper); }

.talk-gallery-action { position:absolute; inset:0; z-index:1; display:grid; grid-template-columns:1fr 1fr; align-items:center; justify-self:stretch; align-self:stretch; padding:0; pointer-events:none; }
.talk-send-backstage,
.talk-save-gallery,
.talk-gallery-link,
.talk-backstage-status { position:relative; display:grid; width:48px; min-width:0; height:48px; min-height:0; place-items:center; padding:0; border:1px solid var(--conversation-line); border-radius:50%; background:color-mix(in srgb,var(--conversation-paper) 86%,transparent); color:var(--conversation-ink); box-shadow:0 10px 30px rgba(17,7,22,.11); text-decoration:none; pointer-events:auto; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.talk-send-backstage,.talk-backstage-status { grid-column:1; justify-self:start; }
.talk-save-gallery,.talk-gallery-link { grid-column:2; justify-self:end; }
.talk-send-backstage:hover,.talk-save-gallery:hover,.talk-gallery-link:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--conversation-ink) 40%,transparent); }
.talk-send-backstage svg,.talk-save-gallery svg,.talk-gallery-link svg,.talk-backstage-status svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.talk-send-backstage { background:var(--conversation-ink); color:var(--conversation-paper); }
.talk-stage[data-theme="backstage"] .talk-send-backstage { background:var(--conversation-ink); color:#14091a; }
.talk-send-backstage:disabled { opacity:.48; }
.talk-action-check { position:absolute; right:-2px; bottom:-1px; display:grid; width:17px; height:17px; place-items:center; border-radius:50%; background:var(--conversation-ink); color:var(--conversation-paper); font:700 9px/1 var(--sans); }

.talk-refine { position:absolute; z-index:20; right:clamp(16px,4vw,64px); top:78px; width:min(340px,calc(100vw - 32px)); max-height:calc(100dvh - 96px); overflow:auto; padding:24px; border:1px solid var(--conversation-line); border-radius:22px; background:color-mix(in srgb,var(--conversation-paper) 94%,transparent); color:var(--conversation-ink); box-shadow:0 28px 90px rgba(22,9,27,.18); backdrop-filter:blur(24px); }
.talk-refine[hidden] { display:none; }
.talk-refine .eyebrow { display:none; }
.talk-refine h2 { margin:0 0 20px; font:500 29px/1 var(--sans); letter-spacing:-.04em; }
.talk-refine label { display:grid; gap:8px; font-size:12px; }
.talk-refine textarea { width:100%; min-height:130px; padding:12px; border:1px solid var(--conversation-line); border-radius:12px; background:transparent; color:inherit; font:14px/1.5 var(--sans); resize:vertical; }
.talk-refine>p,
.talk-save-note { color:var(--conversation-muted); font-size:11px; line-height:1.5; }

@media(max-width:899px) {
  .talk-stage { grid-template-columns:1fr; grid-template-rows:auto minmax(250px,48dvh) minmax(78px,1fr) auto; padding-inline:14px; }
  .talk-top { grid-column:1; grid-row:1; gap:7px; }
  .talk-mark { display:none; }
  .talk-who { flex:1; display:grid; gap:3px; }
  .talk-who strong { font-size:17px; }
  .talk-who #talk-relationship { display:none; }
  .talk-refine-toggle { display:none; }
  .talk-sound-toggle { margin-left:auto; font-size:10px; }
  .talk-character { grid-column:1; grid-row:2; }
  .conversation-canvas { inset:-5%; width:110%; height:110%; }
  .conversation-portrait { inset:0; width:100%; height:100%; }
  .talk-log { grid-column:1; grid-row:3; width:100%; max-height:none; padding:13px 14px 8px; gap:8px; }
  .talk-log li p { font-size:13px; line-height:1.42; }
  .talk-controls { grid-column:1; grid-row:4; padding:5px 0 3px; }
  .talk-mic { width:86px; height:86px; }
  .talk-gallery-action:empty { display:none; }
  .talk-send-backstage,
  .talk-save-gallery,
  .talk-gallery-link,
  .talk-backstage-status { width:44px; height:44px; }
  .emotion-atmosphere { inset:62px 0 0; }
  .emotion-etching { width:62px; }
  .emotion-orbit { right:-18%; top:18%; }
}
@media(max-width:430px) {
  .talk-stage { grid-template-rows:auto minmax(235px,46dvh) minmax(72px,1fr) auto; }
  .talk-top { min-height:42px; padding-bottom:8px; }
  .talk-chat-toggle,.talk-close { width:36px; height:36px; }
  .talk-sound-toggle { padding-inline:2px; }
  .talk-mic { width:82px; height:82px; }
  .talk-hint { max-width:170px; }
}
@media(prefers-reduced-motion:reduce) {
  .talk-stage,.conversation-canvas,.conversation-portrait { animation:none; transition:none; }
  .talk-mic-ring { animation:none!important; }
}

/* Physical press acknowledgement and a halo visible beyond a covering thumb. */
.talk-mic:active,.talk-mic.is-pressed,.talk-mic.is-listening {background:#f3e9ff!important;color:#211329!important;transform:scale(1.045);box-shadow:0 0 0 10px rgba(211,171,255,.38),0 0 0 22px rgba(211,171,255,.16),0 0 64px 18px rgba(195,139,250,.65)!important;transition:background .06s,box-shadow .08s,transform .08s}
.talk-mic.is-pressed .talk-mic-label,.talk-mic.is-listening .talk-mic-label{color:#211329}
.talk-mic.is-pressed .talk-mic-ring,.talk-mic.is-listening .talk-mic-ring{opacity:1;inset:-26px;border:2px solid #dfbdff;animation:conversation-pulse 1.1s ease-out infinite}
@media(prefers-reduced-motion:reduce){.talk-mic.is-pressed .talk-mic-ring,.talk-mic.is-listening .talk-mic-ring{animation:none}}
