/* ============ tel-theater — the Telefonie demo, restaged (2026-07-17) ============
   Iman: the phone demo must FEEL like the real app — the living orb is the star,
   captions must be readable, the scene needs cinema. Pure override layer on top of
   live-demo.css, scoped to .v-tel / .mwp.telp — the other three tabs are untouched.
   All animations are transform/opacity-only (throttle/capture-safe). */

/* ---------- the stage: light pool under the devices ---------- */
.v-tel .tel-wrap{position:relative; gap:44px; padding:26px 26px 30px}
.v-tel .tel-wrap::before{content:""; position:absolute; left:50%; bottom:10px; z-index:0;
  width:72%; height:64px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(45,108,246,.20), rgba(34,211,238,.10) 45%, transparent 72%);
  filter:blur(16px); pointer-events:none}
.v-tel .tel-wrap > *{position:relative; z-index:1}

/* ---------- the phone: bigger, titanium-navy, real presence ---------- */
.mwp.telp{width:254px; height:478px; border-radius:44px; padding:9px;
  background:linear-gradient(160deg,#243352 0%,#0B1322 34%,#0B1322 68%,#1C2A47 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.06),
    0 34px 70px -28px rgba(10,19,34,.65),
    0 60px 110px -50px rgba(45,108,246,.35)}
.mwp.telp .mwp-screen{border-radius:36px}
.mwp.telp .mwp-notch{width:62px; height:16px; top:7px}
.mwp.telp .mwp-status{height:30px; padding:0 17px}
.mwp.telp .mwp-status b{font-size:11px}

/* screen: deep aurora — the call happens somewhere alive */
.mwp.telp .callscr{background:
  radial-gradient(95% 62% at 80% -12%, rgba(45,108,246,.50), transparent 55%),
  radial-gradient(70% 48% at 10% 6%, rgba(34,211,238,.24), transparent 55%),
  radial-gradient(130% 85% at 50% 118%, rgba(20,184,166,.22), transparent 62%),
  linear-gradient(172deg,#0A1428 0%,#0D1B36 55%,#122448 100%)}
/* slow ambient drift behind the UI */
.telp .scrglow{position:absolute; left:50%; top:26%; z-index:0; width:340px; height:340px;
  margin:-170px 0 0 -170px; border-radius:50%; pointer-events:none; opacity:.5;
  background:conic-gradient(from 0deg, rgba(45,108,246,.16), rgba(34,211,238,.05) 30%,
    transparent 55%, rgba(20,184,166,.10) 75%, rgba(45,108,246,.16));
  filter:blur(26px)}
@media (prefers-reduced-motion:no-preference){
  .telp .scrglow{animation:scrDrift 22s linear infinite}
}
@keyframes scrDrift{to{transform:rotate(360deg)}}
.telp .call-ui{z-index:1; padding:40px 12px 12px}

/* ---------- the orb: the hero, like in the real app ---------- */
.v-tel .call-ui .morb{width:96px; height:96px; margin-top:12px}
/* breathing halo */
.v-tel .morb .halo{position:absolute; inset:-24px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(45,108,246,.42) 0%, rgba(34,211,238,.16) 45%, transparent 70%);
  opacity:.55; transition:opacity .5s}
.v-tel.talk .morb .halo{opacity:1}
.v-tel.connected:not(.talk) .morb .halo{
  background:radial-gradient(circle, rgba(20,184,166,.36) 0%, rgba(34,211,238,.14) 45%, transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  .v-tel.connected .morb .halo{animation:haloBreath 3.4s ease-in-out infinite}
}
@keyframes haloBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* spinning gradient ring — always alive, brighter while the KI speaks */
.v-tel .morb .ring{inset:-9px; border:0; opacity:.75;
  background:conic-gradient(from 0deg, rgba(45,108,246,0) 0%, rgba(45,108,246,.9) 18%,
    rgba(34,211,238,.9) 38%, rgba(34,211,238,0) 55%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px))}
.v-tel.connected .morb .ring, .v-tel.talk .morb .ring{opacity:.75}
.v-tel.talk .morb .ring{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .v-tel .morb .ring{animation:orbSpin 7s linear infinite}
  .v-tel.calling .morb .ring{animation:orbSpin 2.2s linear infinite}
}
@keyframes orbSpin{to{transform:rotate(360deg)}}
/* the sphere: deeper glass, stronger specular */
.v-tel .morb .sph{background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.95), transparent 30%),
    radial-gradient(circle at 68% 82%, rgba(34,211,238,.55), transparent 42%),
    radial-gradient(circle at 36% 32%, #8CC2FF 0%, #2D6CF6 52%, #0D2258 100%);
  box-shadow:inset 0 -16px 26px rgba(6,16,50,.6), inset 0 6px 12px rgba(255,255,255,.4),
    0 18px 40px -12px rgba(45,108,246,.75)}
/* equalizer bars: fuller, glowing */
.v-tel .morb .bars{gap:3.5px}
.v-tel .morb .bars i{width:3.5px; height:9px; border-radius:3px;
  box-shadow:0 0 10px rgba(255,255,255,.65)}
/* orbiting motes */
.v-tel .morb .mote{position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px;
  border-radius:50%; background:#9BD8FF; box-shadow:0 0 8px rgba(120,200,255,.9);
  opacity:0; transition:opacity .6s}
.v-tel.connected .morb .mote{opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .v-tel .morb .mote.m1{animation:orbit1 5.5s linear infinite}
  .v-tel .morb .mote.m2{animation:orbit2 8s linear infinite; width:3.5px; height:3.5px}
}
@keyframes orbit1{from{transform:rotate(0deg) translateX(58px)}to{transform:rotate(360deg) translateX(58px)}}
@keyframes orbit2{from{transform:rotate(140deg) translateX(66px)}to{transform:rotate(500deg) translateX(66px)}}

/* ---------- identity + status ---------- */
.telp .call-ui .ct{margin-top:14px}
.telp .call-ui .ct b{font-size:16.5px}
.telp .call-ui .ct em{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(234,241,255,.7); margin-top:4px}

/* waveform: taller, luminous */
.telp .call-ui .wave-strip{height:18px; margin-top:10px; gap:3px}
.telp .call-ui .wave-strip i{width:2.5px}
.v-tel.connected .telp .wave-strip i,
.telp .wave-strip i{box-shadow:0 0 6px rgba(34,211,238,.35)}

/* ---------- captions: finally readable ---------- */
.telp .call-ui .transcript{gap:7px; padding:10px 5px 6px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 30px);
  mask-image:linear-gradient(180deg, transparent 0, #000 30px)}
.telp .callscr .cap{max-width:95%; padding:8px 12px; border-radius:14px;
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.10)}
.telp .callscr .cap.ai{border-bottom-left-radius:5px}
.telp .callscr .cap.cu{background:linear-gradient(140deg, rgba(0,132,255,.5), rgba(34,211,238,.32));
  border-color:rgba(120,200,255,.22); border-bottom-right-radius:5px}
.telp .callscr .cap .ctxt{font-size:12px; line-height:1.5; min-height:18px; color:#F2F7FF}
.telp .callscr .cap.dim{opacity:.35}
.telp .callscr .result{font-size:10.5px; padding:6px 12px;
  background:rgba(18,161,74,.28); border-color:rgba(60,220,140,.45); color:#B9F4D2}

/* hang-up */
.telp .hangbtn{width:42px; height:42px; margin:9px 0 3px}
.telp .callfoot{font-size:9px; padding:6px 0 3px}

/* ---------- the rail: liquid glass, premium cards ---------- */
.tel-wrap .ai-rail{flex:0 0 278px; max-height:478px; min-height:340px; border-radius:22px;
  padding:17px 16px 18px;
  background:linear-gradient(165deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.7), 0 26px 60px -30px rgba(20,50,110,.5)}
.tel-wrap .rail-title{font-size:10.5px; color:#5B6B86}
.tel-wrap .rcard{padding:10px 12px; border-radius:15px; gap:11px;
  background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.95);
  box-shadow:0 14px 30px -20px rgba(20,50,110,.55);
  animation:railSpring .55s cubic-bezier(.34,1.45,.5,1)}
@keyframes railSpring{from{transform:translateY(16px) scale(.94)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.tel-wrap .rcard{animation:none}}
.tel-wrap .rcard .ri{width:32px; height:32px; border-radius:11px}
.tel-wrap .rcard .ri.blue{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 16px -7px rgba(45,108,246,.8)}
.tel-wrap .rcard .ri.violet{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 16px -7px rgba(124,92,252,.8)}
.tel-wrap .rcard .ri.cyan{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 16px -7px rgba(34,211,238,.8)}
.tel-wrap .rcard .ri.teal{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 16px -7px rgba(20,184,166,.8)}
.tel-wrap .rcard .ri.green{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 16px -7px rgba(37,211,102,.8)}
.tel-wrap .rcard b{font-size:12.5px}
.tel-wrap .rcard em{font-size:11px; color:#6B7C97}

/* ---------- stage height: the bigger phone needs room (tel tab only) ---------- */
.demo-stage:has(.v-tel.on){min-height:560px}

@media (max-width:880px){
  .v-tel .tel-wrap{gap:26px}
  .tel-wrap .ai-rail{flex-basis:246px}
}
@media (max-width:720px){
  .v-tel .tel-wrap{padding:18px 14px 22px}
  .mwp.telp{width:236px; height:446px}
  .demo-stage:has(.v-tel.on){min-height:510px}
  .telp .callscr .cap .ctxt{font-size:11.5px}
}