:root{
  --ink:#f7f8ff;
  --muted:#a6adbd;
  --bg:#070810;
  --panel:rgba(17,19,31,.72);
  --line:rgba(255,255,255,.14);
  --accent:#ff4f9a;
  --accent-2:#7d5cff;
  --danger:#ff4e68;
  --ok:#6df2be;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
button,input,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.app-shell,.screen{min-height:100dvh}
.screen{width:100%}

/* shared headings */
.eyebrow{
  margin:0 0 8px;
  color:#9fa7ba;
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase
}
.muted{color:#7f8798;line-height:1.7}

/* password gate */
.password-screen{
  display:grid;
  place-items:center;
  padding:28px 20px;
  background:
    radial-gradient(circle at 80% 15%,rgba(25,205,225,.14),transparent 25%),
    linear-gradient(135deg,#ffffff 0%,#f8fdff 58%,#eefcff 100%);
  color:#0c213f
}
.password-card{
  width:min(480px,100%);
  padding:38px 34px 34px;
  border:1px solid rgba(12,33,63,.08);
  border-radius:26px;
  background:rgba(255,255,255,.94);
  box-shadow:0 24px 80px rgba(31,116,145,.12);
  text-align:center
}
.password-logo{width:min(180px,55vw);height:auto;margin:0 auto 24px}
.password-card h1{
  margin:0;
  color:#0b2443;
  font-size:30px;
  font-weight:700
}
.password-copy{
  margin:12px 0 22px;
  color:#6f8790;
  font-size:13px;
  line-height:1.7
}
.password-form{display:grid;gap:10px}
.password-form input{
  width:100%;
  min-height:50px;
  padding:0 14px;
  border:1px solid #bcdde1;
  border-radius:12px;
  background:#fff;
  color:#173a40;
  outline:none
}
.password-form input:focus{
  border-color:#27bfd0;
  box-shadow:0 0 0 3px rgba(39,191,208,.12)
}
.password-form button{
  min-height:50px;
  border:0;
  border-radius:12px;
  background:#14bdc9;
  color:#fff;
  font-weight:900
}
.password-error{
  margin:12px 0 0;
  color:#c84949;
  font-size:12px
}
.password-home-link{
  display:inline-block;
  margin-top:20px;
  color:#1b9eaa;
  font-size:12px;
  font-weight:800;
  text-decoration:none
}

/* error */
.error-screen{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:28px 20px;
  background:
    radial-gradient(circle at 84% 12%,rgba(26,205,225,.17),transparent 24%),
    radial-gradient(circle at 12% 88%,rgba(26,205,225,.12),transparent 28%),
    linear-gradient(135deg,#ffffff 0%,#f8fdff 52%,#eefcff 100%);
  color:#0c213f
}
.error-screen::before{
  content:"";
  position:absolute;
  left:-8vw;
  bottom:-22vw;
  width:58vw;
  height:58vw;
  min-width:460px;
  min-height:460px;
  border:70px solid rgba(24,200,220,.10);
  border-radius:50%;
  transform:rotate(-18deg);
  pointer-events:none
}
.error-screen::after{
  content:"";
  position:absolute;
  right:-10vw;
  top:-18vw;
  width:48vw;
  height:48vw;
  min-width:380px;
  min-height:380px;
  border:54px solid rgba(24,200,220,.07);
  border-radius:50%;
  pointer-events:none
}
.error-orb{
  position:absolute;
  border-radius:999px;
  filter:blur(2px);
  pointer-events:none
}
.error-orb-one{
  width:210px;
  height:210px;
  left:10%;
  top:13%;
  background:rgba(90,221,233,.09)
}
.error-orb-two{
  width:150px;
  height:150px;
  right:13%;
  bottom:11%;
  background:rgba(105,209,235,.10)
}
.error-card{
  position:relative;
  z-index:1;
  width:min(560px,100%);
  padding:46px 42px 42px;
  border:1px solid rgba(12,33,63,.08);
  border-radius:30px;
  background:rgba(255,255,255,.82);
  box-shadow:0 24px 80px rgba(31,116,145,.12);
  backdrop-filter:blur(14px);
  text-align:center
}
.error-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:22px
}
.error-brand-logo{
  width:58px;
  height:58px;
  object-fit:contain
}
.error-brand-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  color:#0b2443;
  line-height:1
}
.error-brand-copy strong{
  font-size:24px;
  letter-spacing:.24em
}
.error-brand-copy span{
  margin-top:8px;
  font-size:10px;
  letter-spacing:.48em
}
.error-code{
  margin:0 0 4px;
  color:#1bc8dd;
  font-size:72px;
  font-weight:300;
  line-height:1;
  letter-spacing:.04em
}
.error-card .eyebrow{
  margin:10px 0 16px;
  color:#1bbfd5;
  font-size:11px;
  letter-spacing:.28em
}
.error-card h1{
  margin:0;
  color:#0b2443;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  font-size:34px;
  font-weight:500;
  letter-spacing:.03em
}
.error-card .muted{
  margin:16px auto 0;
  max-width:390px;
  color:#6f8093;
  font-size:14px;
  line-height:1.8
}
.error-home-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:230px;
  margin-top:28px;
  padding:14px 26px;
  border:1px solid rgba(27,200,221,.28);
  border-radius:999px;
  background:linear-gradient(90deg,#18c5d9,#42d7e7);
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 12px 28px rgba(24,197,217,.20);
  transition:transform .18s ease,box-shadow .18s ease
}
.error-home-link:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(24,197,217,.26)
}
@media (max-width:600px){
  .error-card{padding:36px 22px 32px;border-radius:24px}
  .error-brand-logo{width:48px;height:48px}
  .error-brand-copy strong{font-size:20px}
  .error-brand-copy span{font-size:9px}
  .error-code{font-size:58px}
  .error-card h1{font-size:28px}
  .error-home-link{width:100%;min-width:0}
}

/* optional picker */
.character-screen{
  max-width:1080px;margin:0 auto;padding:32px 20px 48px;background:#080a12
}
.selection-head{margin-bottom:24px}
.selection-head h1{margin:0;font-size:34px}
.character-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px
}
.character-card{
  overflow:hidden;border-radius:24px;
  background:#111522;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 48px rgba(0,0,0,.28)
}
.character-card-image{aspect-ratio:4/5;overflow:hidden;background:#0c0f18}
.character-card-image img{width:100%;height:100%;display:block;object-fit:cover}
.character-card-image img.image-error{display:none}
.character-card-info{padding:18px}
.character-card-info h2{margin:0 0 12px;font-size:20px}
.character-card.unavailable{opacity:.5}
.select-button:disabled{cursor:not-allowed;opacity:.45}

/* conversation */
.conversation-screen{
  --call-accent:var(--accent);
  --call-accent-2:var(--accent-2);
  position:fixed;
  inset:0;
  min-height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%,rgba(28,201,222,.16),transparent 28%),
    radial-gradient(circle at 84% 78%,rgba(67,214,231,.14),transparent 30%),
    linear-gradient(135deg,#ffffff 0%,#f8fdff 54%,#edfaff 100%)
}
.conversation-card{
  position:relative;
  width:100%;
  height:100dvh;
  overflow:hidden;
  background:#f4fdff
}
.character-hero{
  position:absolute;
  inset:0;
  overflow:hidden;
  isolation:isolate;
  background:#f4fdff
}
.character-hero::before{
  content:"";
  position:absolute;
  inset:-7%;
  z-index:-2;
  background-image:var(--active-image,linear-gradient(180deg,#141827,#080910));
  background-size:cover;
  background-position:center;
  filter:blur(34px) brightness(.62) saturate(1.18);
  transform:scale(1.10)
}
.character-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 42%,color-mix(in srgb,var(--call-accent) 26%,transparent),transparent 32%),
    radial-gradient(circle at 86% 60%,color-mix(in srgb,var(--call-accent-2) 24%,transparent),transparent 34%);
  opacity:.44;
  mix-blend-mode:screen;
  animation:ambientGlow 6s ease-in-out infinite alternate
}
@keyframes ambientGlow{
  0%{opacity:.22;filter:saturate(.95)}
  100%{opacity:.62;filter:saturate(1.2)}
}
.hero-scroller{
  position:absolute;inset:0;z-index:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-x
}
.hero-scroller::-webkit-scrollbar{display:none}
.hero-track{display:flex;width:100%;height:100%}
.hero-slide{
  flex:0 0 100%;width:100%;height:100%;
  scroll-snap-align:start;scroll-snap-stop:always
}
.hero-slide img{
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  user-select:none;
  -webkit-user-drag:none;
  image-rendering:auto;
  transform-origin:50% 52%;
  transition:transform .5s ease
}
.conversation-card.call-speaking .hero-slide img{
  animation:voichaSpeakingFloat 2.8s ease-in-out infinite
}
@keyframes voichaSpeakingFloat{
  0%{transform:scale(1.008) translate3d(0,0,0) rotate(0deg)}
  24%{transform:scale(1.018) translate3d(0,-2px,0) rotate(.15deg)}
  52%{transform:scale(1.012) translate3d(1px,1px,0) rotate(-.12deg)}
  76%{transform:scale(1.02) translate3d(-1px,-1px,0) rotate(.1deg)}
  100%{transform:scale(1.008) translate3d(0,0,0) rotate(0deg)}
}
.hero-slide img.image-error{visibility:hidden}
.character-fallback{
  position:absolute;inset:0;z-index:-1;
  display:grid;place-items:center;
  color:#687083;font-weight:900;letter-spacing:.16em
}
.image-tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,5,9,.45) 0%,rgba(4,5,9,.06) 18%,transparent 32%)
}
.image-glow{display:none}

/* Before the call connects, keep the full character portrait preloaded but hidden.
   The small portrait is the only visible character image until first audio playback. */
.precall-veil{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 27%,rgba(74,82,92,.18),transparent 26%),
    linear-gradient(180deg,#171a20 0%,#101318 58%,#090b0f 100%);
  opacity:1;
  transition:opacity .36s ease
}
.precall-avatar{
  position:absolute;
  z-index:4;
  left:50%;
  top:29%;
  width:124px;
  height:124px;
  transform:translate(-50%,-50%) scale(1);
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.72);
  background:#252a31;
  box-shadow:0 16px 48px rgba(0,0,0,.42),0 0 0 6px rgba(255,255,255,.05);
  opacity:1;
  transition:opacity .25s ease,transform .32s ease;
  pointer-events:none
}
.precall-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 28%
}
.conversation-card.call-visual-connected .precall-veil{
  opacity:0
}
.conversation-card.call-visual-connected .precall-avatar{
  opacity:0;
  transform:translate(-50%,-50%) scale(.88)
}
.conversation-card:not(.call-visual-connected) .hero-dots{
  opacity:0;
  pointer-events:none
}
.hero-dots{
  transition:opacity .24s ease
}

.call-topbar{
  position:absolute;
  z-index:5;
  top:0;left:0;right:0;
  min-height:84px;
  padding:max(16px,env(safe-area-inset-top)) 18px 12px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:12px;
  color:#fff;
  background:transparent
}
.call-top-left{
  justify-self:start;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px
}
.conversation-brand-link{
  display:block;
  width:min(120px,42vw);
  line-height:0;
  text-decoration:none
}
.conversation-brand-logo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(255,255,255,.65))
}
.conversation-brand-link:active{
  transform:scale(.985)
}
.call-top-spacer{min-width:1px}
.top-action-button{
  min-height:40px;
  display:inline-grid;
  place-items:center;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(8,16,20,.52);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  line-height:1;
  letter-spacing:.02em;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(0,0,0,.18)
}
.install-app-button{justify-self:end}
.top-action-button:active{transform:scale(.97)}
.back-button{
  width:40px;height:40px;border:0;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(15,18,28,.45);color:#fff;
  font-size:28px;line-height:1;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px)
}
.voice-cluster{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:225px;
  transform:translateX(-50%);
  width:min(82vw,520px);
  pointer-events:none;
  text-shadow:0 2px 12px rgba(0,0,0,.48)
}
.voice-character-name{
  margin:10px 0 5px;
  padding-left:2px;
  color:#fff;
  font-size:40px;
  line-height:1.05;
  font-weight:200;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.status{
  min-height:18px;
  margin-top:5px;
  color:rgba(255,255,255,.78);
  font-size:10px;
  line-height:1.4;
  font-weight:800;
  text-align:center;
  letter-spacing:.02em
}
.status.listening{color:#e9fff8}
.status.speaking{color:#fff}
.status.thinking{color:#f7e9ff}
.status.error{color:#ffb1bf}

.hero-dots{
  position:absolute;
  z-index:5;
  left:50%;
  top:max(78px,calc(env(safe-area-inset-top) + 62px));
  transform:translateX(-50%);
  display:flex;align-items:center;gap:5px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(10,12,20,.32);
  backdrop-filter:blur(10px)
}
.hero-dot{
  width:5px;height:5px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.34)
}
.hero-dot.active{width:7px;height:7px;background:#fff}

.voice-visualizer{
  position:relative;
  z-index:1;
  left:auto;
  bottom:auto;
  transform:none;
  width:100%;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  opacity:.28;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--call-accent) 42%,transparent));
  transition:opacity .22s ease,transform .22s ease,filter .22s ease
}
.voice-visualizer i{
  display:block;
  width:3px;height:8px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff 0%,var(--call-accent) 52%,var(--call-accent-2) 100%);
  transform-origin:center
}
.voice-visualizer i:nth-child(3n){height:14px}
.voice-visualizer i:nth-child(4n){height:22px}
.voice-visualizer i:nth-child(5n){height:30px}
.call-speaking .voice-visualizer{
  opacity:1;
  transform:scale(1.03);
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--call-accent) 68%,transparent))
}
.call-speaking .voice-visualizer i{
  animation:voiceBars .62s ease-in-out infinite alternate
}
.call-speaking .voice-visualizer i:nth-child(2n){animation-delay:-.18s}
.call-speaking .voice-visualizer i:nth-child(3n){animation-delay:-.32s}
.call-speaking .voice-visualizer i:nth-child(5n){animation-delay:-.46s}
@keyframes voiceBars{
  0%{transform:scaleY(.34);opacity:.58}
  100%{transform:scaleY(1.75);opacity:1}
}

.call-controls{
  position:absolute;
  z-index:7;
  left:50%;
  bottom:132px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:20px
}
.round-control{
  width:56px;height:56px;padding:0;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(18,20,32,.64);
  color:#fff;
  backdrop-filter:blur(18px);
  box-shadow:0 10px 28px rgba(0,0,0,.26);
  transition:.18s ease
}
.round-control:active{transform:scale(.94)}
.round-control .icon,
.round-control>svg{
  width:22px;height:22px;display:grid;place-items:center
}
.round-control svg{
  width:22px;height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round
}
.mic-control.is-listening{
  background:color-mix(in srgb,var(--call-accent) 78%,rgba(20,22,34,.55));
  border-color:color-mix(in srgb,var(--call-accent) 72%,white);
  box-shadow:0 0 26px color-mix(in srgb,var(--call-accent) 58%,transparent)
}
.mic-control.is-muted{opacity:.55}
.mic-control .interrupt-label{
  display:none;
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  letter-spacing:.02em
}
.mic-control.is-interrupt{
  width:112px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:999px;
  background:rgba(10,12,18,.78);
  border-color:rgba(255,255,255,.32)
}
.mic-control.is-interrupt .interrupt-label{display:block}
.call-toggle{
  width:66px;height:66px;
  background:linear-gradient(135deg,#5bdcab,#31b67d);
  border-color:rgba(255,255,255,.38);
  box-shadow:0 0 0 5px rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.34),0 0 26px rgba(73,220,164,.25)
}
.call-toggle.is-active{
  background:linear-gradient(135deg,#ff6077,#e93e5f);
  box-shadow:0 0 0 5px rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.34),0 0 28px rgba(255,78,104,.34)
}
.call-toggle.is-active .phone-icon{transform:rotate(135deg)}
.call-toggle .phone-icon{width:25px;height:25px;transition:transform .22s ease}
.speaker-control .speaker-off-icon{display:none}
.speaker-control.is-muted .speaker-on-icon{display:none}
.speaker-control.is-muted .speaker-off-icon{display:grid}
.speaker-control.is-on{
  color:#fff;
  background:rgba(29,32,47,.68)
}

.composer-wrap{
  position:absolute;
  z-index:8;
  left:12px;right:12px;
  bottom:max(10px,env(safe-area-inset-bottom));
}
.speech-support-notice{
  margin:0 4px 8px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(8,10,18,.72);
  color:rgba(255,255,255,.88);
  font-size:11px;
  line-height:1.45;
  text-align:center;
  backdrop-filter:blur(12px)
}
.text-composer{
  display:grid;
  grid-template-columns:1fr 48px;
  align-items:end;
  gap:8px;
  padding:7px 7px 7px 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:rgba(12,14,23,.58);
  backdrop-filter:blur(20px);
  box-shadow:0 14px 34px rgba(0,0,0,.28)
}
.text-composer textarea{
  width:100%;
  min-height:42px;
  max-height:92px;
  resize:none;
  border:0;
  outline:none;
  padding:10px 4px 9px;
  color:#fff;
  background:transparent;
  line-height:1.45;
  font-size:13px
}
.text-composer textarea::placeholder{color:rgba(255,255,255,.52)}
.text-composer button{
  width:46px;height:46px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--call-accent),var(--call-accent-2));
  box-shadow:0 8px 20px color-mix(in srgb,var(--call-accent) 28%,transparent)
}
.text-composer button svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}
.text-composer textarea:disabled,
.text-composer button:disabled{opacity:.45;cursor:not-allowed}
.usage-meta-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  width:100%;
  margin:8px 4px 7px 0;
}
.usage-counter{
  width:max-content;
  max-width:100%;
  margin:0;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(8,10,18,.72);
  color:#fff;
  text-align:right;
  font-size:11px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
  backdrop-filter:blur(14px);
  box-shadow:0 8px 24px rgba(0,0,0,.22)
}
.usage-counter.limit-reached{
  color:#fff;
  border-color:rgba(255,112,137,.65);
  background:rgba(130,27,47,.82)
}
.usage-bonus-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:max-content;
  max-width:100%;
  margin:0;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#111827;
  text-decoration:none;
  text-align:center;
  font-size:11px;
  line-height:1.2;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.18)
}
.usage-bonus-link:hover{background:#fff}
@media(max-width:420px){
  .usage-meta-row{gap:5px}
  .usage-counter,.usage-bonus-link{
    padding:5px 7px;
    font-size:10px;
  }
}

.screen-reader-state{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap
}

/* state effects */

.conversation-card.call-speaking .character-hero::after{opacity:.72}
.conversation-card.call-thinking .character-hero::after{opacity:.5}
.conversation-card.call-idle .voice-visualizer{opacity:.16}
.conversation-card.call-ended .voice-visualizer{opacity:.10}

@media(min-width:760px) and (orientation:landscape){
  .hero-slide img{
    object-fit:contain;
    object-position:center
  }
  .conversation-card{
    max-width:560px;
    margin:0 auto;
    border-left:1px solid rgba(27,200,221,.10);
    border-right:1px solid rgba(27,200,221,.10);
    box-shadow:0 24px 90px rgba(37,126,151,.18)
  }
  .conversation-screen{
    background:
      radial-gradient(circle at 18% 18%,rgba(28,201,222,.18),transparent 28%),
      radial-gradient(circle at 84% 78%,rgba(67,214,231,.16),transparent 30%),
      linear-gradient(135deg,#ffffff 0%,#f8fdff 54%,#edfaff 100%)
  }
}
@media(max-width:720px){
  .character-screen{padding:22px 14px 32px}
  .selection-head h1{font-size:30px}
  .character-grid{grid-template-columns:1fr;gap:14px}
  .character-card{display:grid;grid-template-columns:42% 1fr;min-height:160px}
  .character-card-image{aspect-ratio:auto;min-height:160px}
  .character-card-info{display:flex;flex-direction:column;justify-content:center}
}
@media(max-width:420px){
  .call-topbar{padding-left:14px;padding-right:14px}
  .precall-avatar{width:108px;height:108px;top:27%}
  .conversation-brand-link{width:100px}
  .voice-cluster{bottom:217px;width:82vw}
  .voice-visualizer{height:62px}
  .call-controls{bottom:128px;gap:17px}
  .round-control{width:52px;height:52px}
  .call-toggle{width:62px;height:62px}
  .composer-wrap{left:8px;right:8px}
  .text-composer{border-radius:22px}
}
@media(max-height:650px){
  .voice-cluster{bottom:201px;width:84vw}
  .voice-visualizer{height:52px}
  .call-controls{bottom:118px}
  .composer-wrap{bottom:6px}
  .round-control{width:48px;height:48px}
  .call-toggle{width:58px;height:58px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .character-hero::after,.voice-visualizer i,.conversation-card.call-speaking .hero-slide img{animation:none!important}
}
/* voicha: keep the character image itself clean */
.image-tint,
.image-glow,
.character-hero::after{display:none!important}

/* custom-order conversion panel */
.order-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(4,8,12,.76);
  backdrop-filter:blur(12px)
}
.order-panel{
  width:min(430px,100%);
  padding:30px 26px;
  border:1px solid rgba(144,225,231,.48);
  background:#f8ffff;
  color:#123a40;
  box-shadow:0 28px 90px rgba(0,0,0,.42)
}
.order-kicker{
  margin:0 0 9px;
  color:#08aeb9;
  font:900 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em
}
.order-panel h2{margin:0;font-size:27px;line-height:1.25;letter-spacing:-.025em}
.order-panel p{margin:15px 0 0;color:#5d777c;font-size:13px;line-height:1.8}
.order-price{margin-top:20px;padding:15px 0;border-top:1px solid #b9dce1;border-bottom:1px solid #b9dce1;font-size:13px}
.order-price strong{font-size:27px;color:#073f46}
.order-actions{display:grid;gap:9px;margin-top:20px}
.order-primary,.order-secondary{
  min-height:48px;
  display:grid;
  place-items:center;
  border:1px solid #7fc5cd;
  border-radius:0;
  font-weight:900;
  text-decoration:none
}
.order-primary{background:#18c6d1;border-color:#18c6d1;color:#003b40}
.order-secondary{background:#fff;color:#385e64}



/* in-call email bonus registration */
.registration-bonus-overlay{
  position:fixed;
  inset:0;
  z-index:150;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(4,8,12,.78);
  backdrop-filter:blur(14px)
}
.registration-bonus-panel{
  position:relative;
  width:min(410px,100%);
  padding:30px 24px 24px;
  border:1px solid rgba(144,225,231,.48);
  border-radius:22px;
  background:#f8ffff;
  color:#123a40;
  box-shadow:0 28px 90px rgba(0,0,0,.42)
}
.registration-bonus-close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#769096;
  font-size:24px;
  line-height:1
}
.registration-bonus-kicker{
  margin:0 0 8px;
  color:#08aeb9;
  font:900 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em
}
.registration-bonus-panel h2{
  margin:0;
  color:#123a40;
  font-size:27px;
  line-height:1.3;
  letter-spacing:-.02em
}
.registration-bonus-panel p{
  margin:13px 0 0;
  color:#5d777c;
  font-size:13px;
  line-height:1.75
}
.registration-bonus-panel .registration-bonus-note{
  margin-top:5px;
  font-size:12px
}
.registration-bonus-field{
  display:grid;
  gap:7px;
  margin-top:20px
}
.registration-bonus-field span{
  color:#42666c;
  font-size:12px;
  font-weight:800
}
.registration-bonus-field input{
  width:100%;
  min-height:50px;
  padding:0 14px;
  border:1px solid #bcdde1;
  border-radius:12px;
  background:#fff;
  color:#173a40;
  outline:none
}
.registration-bonus-field input:focus{
  border-color:#27bfd0;
  box-shadow:0 0 0 3px rgba(39,191,208,.12)
}
.registration-bonus-primary,
.registration-bonus-secondary{
  width:100%;
  min-height:48px;
  margin-top:12px;
  border-radius:12px;
  font-weight:900
}
.registration-bonus-primary{
  border:0;
  background:#18c6d1;
  color:#003b40
}
.registration-bonus-secondary{
  border:1px solid #b8dce0;
  background:#fff;
  color:#42666c
}
.registration-bonus-primary:disabled,
.registration-bonus-secondary:disabled{opacity:.55;cursor:not-allowed}
.registration-bonus-message{
  min-height:18px;
  margin-top:12px!important;
  color:#c84949!important;
  font-size:12px!important
}
.registration-bonus-success{text-align:center;padding:8px 0}
.registration-bonus-check{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  border-radius:50%;
  background:#18c6d1;
  color:#fff;
  font-size:30px;
  font-weight:900
}
.registration-bonus-success p{margin-top:8px}
@media(max-width:420px){
  .registration-bonus-overlay{padding:14px}
  .registration-bonus-panel{padding:28px 18px 20px}
  .registration-bonus-panel h2{font-size:24px}
}

/* add-to-home-screen */
.install-help-overlay{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(4,8,12,.76);
  backdrop-filter:blur(12px)
}
.install-help-panel{
  width:min(390px,100%);
  padding:28px 24px;
  border:1px solid rgba(144,225,231,.48);
  background:#f8ffff;
  color:#123a40;
  box-shadow:0 28px 90px rgba(0,0,0,.42)
}
.install-help-kicker{
  margin:0 0 9px;
  color:#08aeb9;
  font:900 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em
}
.install-help-panel h2{margin:0;font-size:25px;line-height:1.25}
.install-help-text{margin-top:16px;color:#4e6f75;font-size:13px;line-height:1.9}
.install-help-text strong{color:#123a40}
.install-help-close{
  width:100%;
  min-height:46px;
  margin-top:20px;
  border:1px solid #7fc5cd;
  background:#18c6d1;
  color:#003b40;
  font-weight:900
}
@media(min-width:721px){
  .install-app-button{display:none}
}
@media(max-width:420px){
  .call-top-left{gap:6px}
  .top-action-button{min-height:38px;padding:0 12px;font-size:12px}
}
@media(display-mode:standalone){
  .install-app-button{display:none!important}
}