/* One screen for a shared chat and Kikuemon. Popup styles remain in the widget. */
.pi.wrap { width: 100%; max-width: none; margin: 0; padding: 0; scroll-margin-top: 84px; }
.pi .pi-heading { margin: 0; padding: 32px 24px 24px; color: var(--navy); font: 300 clamp(1.5rem,2.6vw,2.4rem)/1.2 var(--display); text-align: center; }
.kk-launch { opacity: 1; visibility: visible; transition: opacity .26s ease, visibility 0s; }
.kk-launch.kk-intake-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .26s ease, visibility 0s .26s; }
.pi-conversation { --pi-inset: clamp(24px,4vw,64px); --pi-edge: clamp(44px,7vw,88px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; height: 80vh; height: 80svh; min-height: 500px; max-height: 820px; background: linear-gradient(180deg,var(--bg,#fafafc),transparent var(--pi-edge),transparent calc(100% - var(--pi-edge)),var(--bg,#fafafc)), linear-gradient(90deg,var(--bg,#fafafc) 32%,#f6f8fd 48%,#edf4ff 76%,#eaf2ff); }
.pi-chat { position: relative; min-width: 0; min-height: 0; }
.pi .kk-panel.kk-embedded { position: relative !important; inset: auto !important; width: 100% !important; max-width: none; height: 100% !important; max-height: none !important; min-height: 0; opacity: 1; visibility: visible; pointer-events: auto; transform: none !important; display: flex; flex-direction: column; border: 0; border-radius: 0; overflow: hidden; background: transparent; box-shadow: none; z-index: 1; }
.pi .kk-head, .pi #kkChips, .pi .pi-intro,
.pi .kk-panel #kkX, .pi .kk-panel #kkVoice, .pi .kk-panel #kkVideo, .pi .kk-panel #kkCall { display: none !important; }
.pi .kk-log { flex: 1; min-height: 0; padding: 28px var(--pi-inset) 16px; background: transparent; }
.pi .kk-foot { flex: none; padding: 10px var(--pi-inset) 24px; background: transparent; }
.pi .kk-status, .pi .kk-cred { background: transparent; border: 0; }
.pi .kk-preview { max-height: 112px; overflow-y: auto; }
.pi .pi-chat-center { position: absolute; inset: 0 24px 100px; margin: 0; display: grid; place-items: center; color: var(--navy); font: 300 clamp(1.5rem,2.1vw,2rem)/1.25 var(--display); text-align: center; pointer-events: none; z-index: 2; }
.pi-chat.has-draft .pi-chat-center, .pi-chat.has-messages .pi-chat-center { display: none; }
.pi-live { --pi-face-size: clamp(160px,30svh,260px); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; min-height: 0; padding: 24px var(--pi-inset); background: transparent; border: 0; border-radius: 0; }
.pi-avatar { width: 100%; height: var(--pi-face-size); display: grid; place-items: center; flex: none; }
.pi .pi-avatar .kk-cv-stage { width: 100%; height: 100%; position: relative; display: block; overflow: visible; background: transparent; }
.pi .pi-avatar .kk-cv-orbw { display: none; }
.pi .pi-avatar .kk-wave { display: none; }
.pi .pi-avatar .kk-cv-face { display: block; position: absolute; left: 50%; top: 0; height: 100%; width: var(--pi-face-size); max-width: 100%; transform: translateX(-50%); }
/* The transcript reaches 14px into the column's side padding, and pads the same
   back, so its scrollbar stands clear of the bubbles without moving them. */
.pi-voice-transcript { display: flex; flex: 1 1 0; min-height: 0; width: calc(100% + 14px); margin-inline-end: -14px; overflow: hidden; }
.pi .pi-voice-transcript .kk-cv-script { padding: 8px 0; padding-inline-end: 14px; gap: 10px; overscroll-behavior: auto; }
.pi .pi-voice-transcript .kk-cv-state { display: none; }
.pi-live-controls { display: flex; justify-content: center; flex: none; }
.pi-voice-control { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; padding: 8px 20px; border: 0; border-radius: 12px; background: transparent; color: var(--navy); font: 500 .88rem/1.5 var(--sans); text-align: center; cursor: pointer; }
.pi-voice-control svg { display: block; width: 56px; height: 56px; fill: currentColor; transition: transform .18s ease; }
.pi-voice-control:hover svg { transform: scale(1.07); }
.pi-voice-control:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.pi-voice-control:disabled { opacity: .45; cursor: default; }
.pi-live [hidden] { display: none !important; }
.pi-avatar-status { flex: none; margin: 0; text-align: center; font: 400 .78rem/1.4 var(--sans); color: var(--ink-2); }
@media (max-width: 760px) {
  .pi.wrap { scroll-margin-top: 52px; }
  .pi .pi-heading { padding: 28px 24px 20px; }
  .pi-conversation { --pi-inset: 24px; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) minmax(0,1fr); height: calc(100svh - 100px); min-height: 640px; max-height: 820px; background: linear-gradient(180deg,var(--bg,#fafafc),transparent var(--pi-edge),transparent calc(100% - var(--pi-edge)),var(--bg,#fafafc)), linear-gradient(180deg,var(--bg,#fafafc) 32%,#f6f8fd 48%,#edf4ff 76%,#eaf2ff); }
  .pi .kk-log { padding-top: 20px; }
  .pi .kk-foot { padding-bottom: 16px; }
  .pi-live { --pi-face-size: clamp(112px,16svh,150px); padding: 12px var(--pi-inset) 16px; gap: 6px; }
  .pi-voice-control { gap: 4px; padding: 4px 14px; font-size: .8rem; }
  .pi-voice-control svg { width: 44px; height: 44px; }
  .pi-avatar-status { font-size: .7rem; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .pi-conversation { height: calc(100svh + 180px); min-height: 920px; max-height: 1140px; }
}
@media (prefers-reduced-motion: reduce) { .pi-voice-control svg, .kk-launch { transition: none !important; } }