/* ST4R AI V12 — 100% transparent floating cosmic interface. */
.st4r-ai-section{
  position:relative;
  z-index:4;
  padding-top:34px;
  padding-bottom:26px;
}

/* No outer card / no frame / no dark rectangle. */
.st4r-ai-shell{
  --voice:.03;
  --mic:.03;
  position:relative;
  overflow:visible;
  isolation:isolate;
  padding:18px 0 16px;
  border:0!important;
  outline:0!important;
  clip-path:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
.st4r-ai-shell:before,
.st4r-ai-shell:after,
.st4r-ai-topline,
.st4r-ai-frame-mark,
.st4r-ai-stage-topbar,
.st4r-ai-telemetry,
.st4r-ai-scanline{display:none!important}

.st4r-ai-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(390px,.92fr) minmax(0,1.08fr);
  gap:clamp(36px,5.2vw,78px);
  align-items:center;
}

/* LEFT: star floats directly on the galaxy background. */
.st4r-ai-visual{min-width:0;position:relative}
.st4r-ai-stage{
  position:relative;
  height:clamp(500px,47vw,620px);
  min-height:500px;
  overflow:visible;
  border:0!important;
  outline:0!important;
  clip-path:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
.st4r-ai-stage:before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:min(78vw,560px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(120,223,255,.11) 0%,
    rgba(113,126,255,.055) 32%,
    rgba(178,95,255,.028) 49%,
    transparent 71%);
  filter:blur(16px);
  pointer-events:none;
}
.st4r-ai-stage:after{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:min(73vw,520px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(129,211,255,.06);
  box-shadow:0 0 80px rgba(103,97,255,.055),inset 0 0 80px rgba(89,217,255,.025);
  pointer-events:none;
}
.st4r-ai-nebula{
  position:absolute;
  z-index:0;
  inset:7% 3% 8%;
  background:
    radial-gradient(circle at 48% 45%,rgba(91,223,255,.18),transparent 19%),
    radial-gradient(circle at 56% 50%,rgba(169,103,255,.16),transparent 29%),
    radial-gradient(circle at 50% 56%,rgba(255,111,231,.07),transparent 38%);
  filter:blur(24px);
  opacity:calc(.52 + var(--voice)*.46);
  transform:scale(calc(1 + var(--voice)*.055));
  transition:transform 60ms linear,opacity 80ms linear;
  pointer-events:none;
}
.st4r-ai-orbit{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  border-radius:50%;
  pointer-events:none;
  opacity:.46;
}
.st4r-ai-orbit.orbit-a{
  width:430px;
  height:430px;
  margin:-215px 0 0 -215px;
  border:1px solid rgba(104,225,255,.12);
  box-shadow:0 0 26px rgba(67,173,255,.035);
  transform:rotateX(72deg) rotateZ(12deg);
  animation:aiOrbitA 19s linear infinite;
}
.st4r-ai-orbit.orbit-b{
  width:520px;
  height:520px;
  margin:-260px 0 0 -260px;
  border:1px solid rgba(160,110,255,.09);
  transform:rotateX(76deg) rotateZ(-16deg);
  animation:aiOrbitB 28s linear infinite reverse;
}
.st4r-ai-star-wrap{
  position:absolute;
  z-index:5;
  inset:8px 0 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateZ(0);
}
.st4r-ai-star-img{
  position:relative;
  z-index:4;
  display:block;
  width:min(100%,565px);
  height:auto;
  user-select:none;
  pointer-events:none;
  transform:scale(calc(.98 + var(--voice)*.085));
  filter:
    brightness(calc(1 + var(--voice)*.38))
    saturate(calc(1.05 + var(--voice)*.32))
    drop-shadow(0 0 calc(18px + var(--voice)*30px) rgba(88,214,255,.72))
    drop-shadow(0 0 calc(34px + var(--voice)*44px) rgba(142,91,255,.32));
  transition:transform 55ms linear,filter 55ms linear;
  animation:starFloat 5.8s ease-in-out infinite;
}
.st4r-ai-star-aura{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(calc(1 + var(--voice)*.13));
  transition:transform 65ms linear,opacity 65ms linear;
  pointer-events:none;
}
.st4r-ai-star-aura.aura-a{
  width:75%;
  aspect-ratio:1;
  background:radial-gradient(circle,rgba(104,224,255,.20),rgba(90,131,255,.07) 42%,transparent 70%);
  filter:blur(22px);
  opacity:calc(.62 + var(--voice)*.32);
}
.st4r-ai-star-aura.aura-b{
  width:52%;
  aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,255,255,.19),rgba(173,107,255,.11) 34%,transparent 68%);
  filter:blur(30px);
  opacity:calc(.42 + var(--voice)*.40);
}
.st4r-ai-voice-ring{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.st4r-ai-voice-ring.ring-one{
  width:73%;
  aspect-ratio:1;
  border:1px solid rgba(104,225,255,.10);
  box-shadow:0 0 calc(12px + var(--voice)*22px) rgba(83,214,255,.09);
}
.st4r-ai-voice-ring.ring-two{
  width:87%;
  aspect-ratio:1;
  border:1px solid rgba(157,114,255,.07);
}
.st4r-ai-statebar{
  position:absolute;
  z-index:12;
  left:6%;
  right:6%;
  bottom:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  pointer-events:none;
}
.st4r-ai-state,
.st4r-ai-livebadge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#a9c5e5;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  text-shadow:0 0 16px rgba(118,215,255,.22);
}
.st4r-ai-state i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#66e8ff;
  box-shadow:0 0 12px rgba(102,232,255,.8);
}
.st4r-ai-livebadge{color:#c8f7ff}

/* RIGHT: completely floating UI, no containing card. */
.st4r-ai-panel{
  position:relative;
  min-width:0;
  padding:16px 0 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.st4r-ai-panel:before{
  content:"";
  position:absolute;
  left:-26px;
  top:8%;
  bottom:8%;
  width:1px;
  background:linear-gradient(transparent,rgba(107,222,255,.26) 22%,rgba(122,102,255,.16) 56%,rgba(195,109,255,.20) 82%,transparent);
  box-shadow:0 0 20px rgba(96,209,255,.10);
  pointer-events:none;
}
.st4r-ai-panel:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-45px;
  top:18%;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(88,180,255,.055),transparent 68%);
  filter:blur(28px);
  pointer-events:none;
}
.st4r-ai-heading-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.st4r-ai-titleblock{min-width:0}
.st4r-ai-panel h2{
  margin:0;
  font-size:clamp(48px,5.1vw,72px);
  line-height:.90;
  letter-spacing:-.06em;
  font-weight:900;
  text-shadow:0 8px 38px rgba(0,0,0,.18);
}
.st4r-ai-panel h2 em{
  font-style:normal;
  background:linear-gradient(90deg,#76e4ff 2%,#84a7ff 49%,#c783ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(101,130,255,.12));
}
.st4r-ai-title-rule{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:15px;
  width:min(390px,76%);
}
.st4r-ai-title-rule i{
  width:7px;
  height:7px;
  transform:rotate(45deg);
  background:#77e7ff;
  box-shadow:0 0 18px rgba(115,229,255,.62);
}
.st4r-ai-title-rule span{
  height:1px;
  flex:1;
  background:linear-gradient(90deg,rgba(115,229,255,.68),rgba(132,103,255,.20),transparent);
}
.st4r-ai-online{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:0 2px 0 0;
  border:0!important;
  background:transparent!important;
  clip-path:none!important;
  box-shadow:none!important;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  color:#abf6d8;
  text-shadow:0 0 14px rgba(82,239,185,.22);
}
.st4r-ai-online i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#52efb9;
  box-shadow:0 0 14px rgba(82,239,185,.82);
  animation:aiPulse 1.6s ease-in-out infinite;
}

/* Floating microphone waveform. */
.st4r-ai-meter{
  position:relative;
  min-height:60px;
  display:grid;
  grid-template-columns:minmax(104px,auto) 1fr auto;
  align-items:center;
  gap:15px;
  padding:8px 0 10px;
  margin:4px 0 12px;
  overflow:visible;
  border:0!important;
  border-bottom:1px solid rgba(115,177,255,.12)!important;
  clip-path:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
.st4r-ai-meter:before{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:34%;
  height:1px;
  background:linear-gradient(90deg,#6fe5ff,rgba(105,104,255,.4),transparent);
  box-shadow:0 0 14px rgba(105,215,255,.22);
}
.st4r-ai-meter-icon{display:none!important}
.st4r-ai-meter-bars{
  height:40px;
  display:flex;
  align-items:center;
  gap:5px;
}
.st4r-ai-meter-bars span{
  width:3px;
  height:calc(7px + var(--mic,.04)*27px);
  min-height:7px;
  max-height:34px;
  border-radius:99px;
  background:linear-gradient(to top,#6d71ff,#71edff);
  box-shadow:0 0 calc(4px + var(--mic,.04)*13px) rgba(84,216,255,.44);
  transition:height 55ms linear;
}
.st4r-ai-meter-bars span:nth-child(2),.st4r-ai-meter-bars span:nth-child(8){height:calc(10px + var(--mic,.04)*21px)}
.st4r-ai-meter-bars span:nth-child(3),.st4r-ai-meter-bars span:nth-child(7){height:calc(13px + var(--mic,.04)*24px)}
.st4r-ai-meter-bars span:nth-child(4),.st4r-ai-meter-bars span:nth-child(6){height:calc(17px + var(--mic,.04)*17px)}
.st4r-ai-meter b{
  color:#91a8ca;
  font-size:8px;
  letter-spacing:.17em;
  white-space:nowrap;
}
.st4r-ai-meter-signal{
  display:flex;
  align-items:flex-end;
  gap:3px;
  opacity:.7;
}
.st4r-ai-meter-signal i{display:block;width:3px;background:#5f759b;border-radius:2px}
.st4r-ai-meter-signal i:nth-child(1){height:6px}
.st4r-ai-meter-signal i:nth-child(2){height:10px}
.st4r-ai-meter-signal i:nth-child(3){height:14px;background:#72ddf6;box-shadow:0 0 10px rgba(114,221,246,.35)}

/* Transcript rows: no cards, just elegant floating lines. */
.st4r-ai-chat{
  display:grid;
  gap:4px;
  margin:0 0 15px;
}
.st4r-ai-bubble{
  position:relative;
  overflow:visible;
  min-height:68px;
  padding:13px 5px 13px 20px;
  border:0!important;
  border-bottom:1px solid rgba(117,145,223,.10)!important;
  clip-path:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
.st4r-ai-bubble.ai{
  border-bottom-color:rgba(86,203,255,.12)!important;
}
.st4r-ai-bubble:before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(#6fe5ff,#806dff,#c879ff);
  box-shadow:0 0 14px rgba(100,211,255,.22);
  opacity:.72;
}
.st4r-ai-bubble.ai:before{
  background:linear-gradient(#76f0d1,#6fd9ff,#9677ff);
}
.st4r-ai-bubble:after{display:none!important}
.st4r-ai-bubble-rail{display:none!important}
.st4r-ai-bubble small{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
  color:#8498c8;
}
.st4r-ai-bubble small em{
  font-style:normal;
  color:#63779a;
  font-size:7px;
}
.st4r-ai-bubble div:not(.st4r-ai-bubble-rail){
  color:#f4f7ff;
  line-height:1.48;
  word-break:break-word;
  font-size:13px;
  text-shadow:0 2px 18px rgba(0,0,0,.18);
}

/* Controls remain usable but look like floating glass, not a frame. */
.st4r-ai-controls{
  display:grid;
  grid-template-columns:minmax(210px,1.42fr) .70fr .46fr;
  gap:10px;
  margin-top:4px;
}
.st4r-ai-controls .btn,
.st4r-ai-textrow .btn{
  min-height:48px;
  border-radius:16px!important;
  clip-path:none!important;
  font-weight:900!important;
  letter-spacing:-.01em;
}
.st4r-ai-talk{
  min-width:0;
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,rgba(103,88,255,.86),rgba(93,124,255,.84) 55%,rgba(84,180,255,.82))!important;
  border:1px solid rgba(148,204,255,.34)!important;
  box-shadow:0 12px 36px rgba(73,86,255,.15),0 0 26px rgba(77,153,255,.08),inset 0 1px rgba(255,255,255,.16)!important;
  backdrop-filter:blur(10px);
}
.st4r-ai-talk:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 0 40%,rgba(255,255,255,.15) 50%,transparent 60%);
  transform:translateX(-120%);
  animation:aiButtonSweep 4.8s ease-in-out infinite;
}
.st4r-ai-talk span{display:inline-block;margin-right:5px;color:#cbf6ff}
.st4r-ai-talk.is-live{box-shadow:0 0 36px rgba(80,185,255,.25)!important}
.st4r-ai-iconbtn{
  min-width:0!important;
  background:rgba(5,9,24,.18)!important;
  border:1px solid rgba(129,151,255,.14)!important;
  color:#abb8d5!important;
  box-shadow:none!important;
  backdrop-filter:blur(8px);
}
.st4r-ai-iconbtn:hover:not(:disabled){
  background:rgba(19,28,54,.22)!important;
  border-color:rgba(107,211,255,.28)!important;
  color:#fff!important;
}
.st4r-ai-textrow{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.st4r-ai-textrow input{
  flex:1;
  min-width:0;
  height:48px;
  padding:0 4px;
  border-radius:0;
  clip-path:none!important;
  border:0!important;
  border-bottom:1px solid rgba(124,153,255,.18)!important;
  background:transparent!important;
  color:#f6f8ff;
  outline:none;
  box-shadow:none!important;
}
.st4r-ai-textrow input::placeholder{color:rgba(184,194,219,.48)}
.st4r-ai-textrow input:focus{
  border-bottom-color:rgba(102,208,255,.58)!important;
  box-shadow:0 8px 18px -16px rgba(80,194,255,.65)!important;
}
.st4r-ai-textrow .btn{
  min-width:76px;
  background:rgba(93,101,255,.34)!important;
  border:1px solid rgba(130,171,255,.24)!important;
  box-shadow:none!important;
  backdrop-filter:blur(8px);
}

@keyframes aiOrbitA{to{transform:rotateX(72deg) rotateZ(372deg)}}
@keyframes aiOrbitB{to{transform:rotateX(76deg) rotateZ(344deg)}}
@keyframes starFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes aiPulse{50%{opacity:.42;transform:scale(.82)}}
@keyframes aiButtonSweep{0%,62%{transform:translateX(-120%)}84%,100%{transform:translateX(120%)}}

@media(max-width:1050px){
  .st4r-ai-shell{padding:12px 0}
  .st4r-ai-grid{grid-template-columns:1fr;gap:18px}
  .st4r-ai-stage{height:560px;min-height:560px;max-width:760px;margin-inline:auto}
  .st4r-ai-panel{padding:2px 0 8px;max-width:760px;width:100%;margin-inline:auto}
  .st4r-ai-panel:before{display:none}
  .st4r-ai-panel h2{font-size:clamp(48px,8vw,68px)}
}

@media(max-width:700px){
  .st4r-ai-section{padding-top:18px;padding-bottom:18px}
  .st4r-ai-shell{padding:0}
  .st4r-ai-stage{height:470px;min-height:470px}
  .st4r-ai-star-wrap{inset:2px -2px 44px}
  .st4r-ai-orbit.orbit-a{width:325px;height:325px;margin:-162.5px 0 0 -162.5px}
  .st4r-ai-orbit.orbit-b{width:405px;height:405px;margin:-202.5px 0 0 -202.5px}
  .st4r-ai-heading-row{align-items:center}
  .st4r-ai-panel h2{font-size:46px}
  .st4r-ai-online{font-size:7px}
  .st4r-ai-meter{grid-template-columns:1fr auto;gap:10px;min-height:58px}
  .st4r-ai-meter-signal{display:none}
  .st4r-ai-controls{grid-template-columns:1fr 1fr}
  .st4r-ai-talk{grid-column:1/-1}
  .st4r-ai-textrow{flex-direction:column}
  .st4r-ai-textrow .btn{width:100%}
  .st4r-ai-statebar{left:3%;right:3%;bottom:4px}
  .st4r-ai-state,.st4r-ai-livebadge{font-size:7px}
  .st4r-ai-bubble{padding-left:17px}
  .st4r-ai-bubble div:not(.st4r-ai-bubble-rail){font-size:12px}
}

@media(max-width:430px){
  .st4r-ai-stage{height:410px;min-height:410px}
  .st4r-ai-livebadge{display:none}
  .st4r-ai-heading-row{display:block}
  .st4r-ai-online{margin-top:12px}
  .st4r-ai-panel h2{font-size:41px}
  .st4r-ai-controls{grid-template-columns:1fr}
  .st4r-ai-talk{grid-column:auto}
  .st4r-ai-meter b{font-size:7px}
  .st4r-ai-meter-bars{gap:4px}
  .st4r-ai-meter-bars span{width:3px}
}

@media(prefers-reduced-motion:reduce){
  .st4r-ai-orbit,
  .st4r-ai-star-img,
  .st4r-ai-online i,
  .st4r-ai-talk:after{animation:none!important}
}