:root{
    --ink:        #05070a;
    --ink-2:      #0d1117;
    --glass:      rgba(255,255,255,0.07);
    --glass-brd:  rgba(255,255,255,0.10);
    --text-hi:    #f5f6f8;
    --text-lo:    rgba(245,246,248,0.56);
    --text-dim:   rgba(245,246,248,0.34);
    --accept:     #34c85a;
    --accept-glow:rgba(52,200,90,0.45);
    --decline:    #ff453a;
    --decline-glow:rgba(255,69,58,0.45);
    --accent:     #5b8cff;
    --accent-2:   #8b6bff;
  }

  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body {
    /* margin:0; padding:0; height:100%; */
    /* background:#000; */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-hi);
    /* overflow: hidden; */
  }
  button { font-family: inherit; }

  /* ============ PAGE BACKDROP (desktop preview only) ============ */
  /* body{
    display:flex; align-items:center; justify-content:center;
    min-height: 100dvh;
    background:
      radial-gradient(120% 90% at 50% 0%, #23262e 0%, #101116 55%, #050506 100%);
  } */

  /* ============ DEVICE FRAME (real-phone shell) ============ */
  .device{
    margin-top:45%;
    position: relative;
    width: 392px;
    height: 660px;
    padding: 14px;
    border-radius: 58px;
    background: linear-gradient(155deg, #2b2d33, #131418 60%, #0a0a0c);
    box-shadow:
      0 40px 90px rgba(0,0,0,0.55),
      0 4px 0 rgba(255,255,255,0.04) inset,
      0 0 0 1.5px rgba(255,255,255,0.06) inset;
  }
  @media (max-width:767px){
    .device{
      margin-top:45%;
      position: relative;
      width: 350px;
      height: 660px;
      padding: 14px;
      border-radius: 58px;
      background: linear-gradient(155deg, #2b2d33, #131418 60%, #0a0a0c);
      box-shadow:
        0 40px 90px rgba(0,0,0,0.55),
        0 4px 0 rgba(255,255,255,0.04) inset,
        0 0 0 1.5px rgba(255,255,255,0.06) inset;
    }
  }
  .device .btn-vol1, .device .btn-vol2, .device .btn-power{
    position:absolute; background:#0c0d10;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset;
  }
  .device .btn-vol1{ left:-3px; top:150px; width:3px; height:34px; border-radius:2px 0 0 2px; }
  .device .btn-vol2{ left:-3px; top:196px; width:3px; height:60px; border-radius:2px 0 0 2px; }
  .device .btn-power{ right:-3px; top:190px; width:3px; height:80px; border-radius:0 2px 2px 0; }

  .device-screen{
    position:relative;
    width: 100%; height: 100%;
    border-radius: 46px;
    overflow: hidden;
    background:#000;
  }
  .notch{
    position:absolute; top: 14px; left:50%; transform: translateX(-50%);
    width: 118px; height: 34px; border-radius: 20px;
    background:#000; z-index: 50;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
  }
  .home-indicator{
    position:absolute; bottom: 8px; left:50%; transform: translateX(-50%);
    width: 134px; height: 5px; border-radius: 3px;
    background: rgba(255,255,255,0.65);
    z-index: 50;
    pointer-events:none;
  }

  /* On an actual phone browser, drop the decorative shell and fill the real screen */
  /* @media (max-width: 460px), (max-height: 700px){
    body{ background:#000; }
    .device{
      width: 100vw; height: 100dvh;
      padding:0; border-radius:0; box-shadow:none; background:none;
    }
    .device .btn-vol1, .device .btn-vol2, .device .btn-power{ display:none; }
    .device-screen{ border-radius:0; }
    .notch{ display:none; }
  } */

  /* ============ PHONE (screen contents) ============ */
  .phone{
    position: relative;
    width: 100%;
    height: 90%;
    overflow: hidden;
    background: var(--ink);
    isolation: isolate;
  }

  .bg-photo{
    position:absolute; inset:-10%;
    background-size: cover;
    background-position: center;
    filter: blur(38px) saturate(135%) brightness(0.55);
    transform: scale(1.15);
    z-index: 0;
  }
  .bg-scrim{
    position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(120% 60% at 50% -10%, rgba(91, 140, 255, 0.20), transparent 60%), 
      linear-gradient(180deg, rgb(92 133 207 / 63%) 0%, rgb(110 168 255 / 79%) 45%, rgb(128 180 255 / 92%) 100%);
  }

  /* ============ STATUS BAR ============ */
  .status-bar{
    position:absolute; top:0; left:0; right:0; z-index:5;
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 26px 0;
    font-size: 15px; font-weight:600; letter-spacing:.2px;
    color: var(--text-hi);
  }
  .status-bar .icons{ display:flex; align-items:center; gap:6px; opacity:.92; }

  /* ============ TOP: caller identity (shared) ============ */
  .call-meta{
    position:relative; z-index:5;
    text-align:center;
    padding-top: 74px;
  }
  .call-kicker{
    font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--text-lo);
    margin-bottom: 6px;
  }
  .call-kicker.live { color: var(--accept); }
  .call-name{
    font-size: 30px; font-weight: 700; letter-spacing:.2px;
    color: var(--text-hi);
  }
  .call-sub{
    margin-top: 5px;
    font-size: 15px; color: var(--text-lo);
  }
  .call-timer{
    margin-top: 5px; font-size: 15px; color: var(--text-lo);
    font-variant-numeric: tabular-nums;
  }

  /* ============ AVATAR ============ */
  .avatar-stage{
    position:relative; z-index:5;
    display:flex; align-items:center; justify-content:center;
    margin: 26px auto 0;
    width: 100%;
    transition: margin .45s cubic-bezier(.4,0,.2,1);
  }
  .avatar-ring{
    position:relative;
    width: 168px; height:168px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition: width .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1);
  }
  .avatar-ring .pulse{
    position:absolute; inset:0; border-radius:50%;
    border: 1.5px solid rgba(91,140,255,0.55);
    opacity:0; transform: scale(1);
  }
  .avatar-ring.pulsing .pulse{ animation: ringPulse 2.6s ease-out infinite; }
  .avatar-ring.pulsing .pulse:nth-child(2){ animation-delay: .65s; }
  .avatar-ring.pulsing .pulse:nth-child(3){ animation-delay: 1.3s; }
  @keyframes ringPulse{
    0%   { transform:scale(.92); opacity:.55; }
    100% { transform:scale(1.55); opacity:0; }
  }
  .avatar-circle{
    position:relative; z-index:2;
    width: 148px; height:148px; border-radius:50%;
    overflow:hidden;
    background: linear-gradient(160deg, var(--accent), var(--accent-2));
    box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.18);
    display:flex; align-items:center; justify-content:center;
    font-size: 56px;
    transition: width .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1);
  }
  .avatar-circle img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* shrink avatar once call is active */
  .phone.in-call .avatar-stage{ margin-top: 8px; }
  .phone.in-call .avatar-ring{ width:104px; height:104px; }
  .phone.in-call .avatar-circle{ width:92px; height:92px; font-size:36px; }

  /* ============ WAVEFORM (in-call only) ============ */
  .wave-row{
    position:relative; z-index:5;
    height: 40px;
    display:flex; align-items:center; justify-content:center; gap:4px;
    margin-top: 18px;
    opacity:0; transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events:none;
  }
  .phone.in-call .wave-row{ opacity:1; transform:none; }
  .wave-row .bar{
    width:3.5px; border-radius:3px;
    background: var(--text-dim);
    height: 8px;
    transition: height .12s ease, background .2s ease;
  }
  .wave-row.state-listening .bar{ background: var(--accept); }
  .wave-row.state-speaking .bar{ background: var(--accent); }
  .wave-row.state-thinking .bar{ background: var(--text-lo); }

  /* ============ TRANSCRIPT DRAWER ============ */
  .transcript-toggle{
    position:absolute; left:50%; transform: translateX(-50%);
    top: 0; z-index:6;
    display:flex; align-items:center; gap:6px;
    padding: 7px 14px 7px 12px;
    background: var(--glass);
    border:1px solid var(--glass-brd);
    backdrop-filter: blur(20px);
    border-radius: 999px;
    font-size:13px; font-weight:600; color: var(--text-lo);
    opacity:0; pointer-events:none;
    transition: opacity .3s ease, top .3s ease;
  }
  .phone.in-call .transcript-toggle{ opacity:1; pointer-events:auto; top: 14px; }
  .transcript-toggle svg{ width:14px; height:14px; }
  .transcript-toggle .dot{
    width:6px; height:6px; border-radius:50%; background: var(--accept);
    box-shadow: 0 0 0 0 rgba(52,200,90,0.6);
    animation: dotBeat 1.6s ease-in-out infinite;
  }
  @keyframes dotBeat{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

  .drawer{
    position:absolute; left:0; right:0; bottom:0; z-index:20;
    height: 62%;
    background: rgba(13,17,23,0.92);
    backdrop-filter: blur(24px);
    border-top-left-radius: 22px; border-top-right-radius:22px;
    border-top: 1px solid var(--glass-brd);
    box-shadow: 0 -20px 50px rgba(0,0,0,0.5);
    transform: translateY(100%);
    transition: transform .38s cubic-bezier(.32,.72,0,1);
    display:flex; flex-direction:column;
  }
  .drawer.open{ transform: translateY(0); }
  .drawer-handle{
    width:36px; height:4px; border-radius:3px; background: rgba(255,255,255,0.25);
    margin: 10px auto 4px;
  }
  .drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 6px 18px 10px;
    border-bottom: 1px solid var(--glass-brd);
  }
  .drawer-head .title{ font-size:15px; font-weight:700; }
  .drawer-close{
    width:28px; height:28px; border-radius:50%;
    background: rgba(255,255,255,0.08);
    border:none; color: var(--text-lo);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .messages{
    flex:1; overflow-y:auto; padding: 14px 16px 6px;
    display:flex; flex-direction:column; gap:10px;
  }
  .msg{
    max-width: 82%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 14.5px; line-height:1.35;
  }
  .msg .label{ font-size:11px; font-weight:700; opacity:.55; margin-bottom:2px; text-transform:uppercase; letter-spacing:.4px; }
  .msg.user{ align-self:flex-end; background: var(--accent); color:#fff; border-bottom-right-radius:5px; }
  .msg.bot{ align-self:flex-start; background: rgba(255,255,255,0.08); color: var(--text-hi); border-bottom-left-radius:5px; }
  .latency{ padding: 4px 16px 12px; font-size:12px; color: var(--text-dim); }

  /* ============ STATUS LINE (small, above controls) ============ */
  .status-line{
    position:relative; z-index:5;
    text-align:center;
    font-size: 13.5px;
    color: var(--text-dim);
    padding: 0 30px;
    margin-top: 10px;
    min-height: 18px;
  }

  /* ============ INCOMING CALL SHEET ============ */
  .incoming-sheet{
    position:absolute; left:0; right:0; bottom:0; z-index:10;
    padding: 0 26px calc(30px + env(safe-area-inset-bottom));
    transform: translateY(140%);
    transition: transform .55s cubic-bezier(.16,1,.3,1);
  }
  .phone.sheet-up .incoming-sheet{ transform: translateY(0); }
  .phone.in-call .incoming-sheet,
  .phone.hidden-sheet .incoming-sheet{ transform: translateY(140%); pointer-events:none; }

  .swipe-hint{
    text-align:center; font-size:12.5px; color: var(--text-dim);
    margin-bottom: 16px; letter-spacing:.2px;
  }
  .incoming-actions{
    display:flex; align-items:flex-start; justify-content:space-between;
    padding: 0 6px;
  }
  .call-action{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    background:none; border:none; cursor:pointer; color: var(--text-lo);
    font-size: 13px; font-weight:600;
  }
  .call-action .fab{
    width: 68px; height:68px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:none;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .call-action:active .fab{ transform: scale(.92); }
  .call-action.decline .fab{ background: var(--decline); box-shadow: 0 8px 26px var(--decline-glow); }
  .call-action.accept  .fab{ background: var(--accept);  box-shadow: 0 8px 26px var(--accept-glow); animation: acceptBreathe 1.8s ease-in-out infinite; }
  @keyframes acceptBreathe{
    0%,100%{ box-shadow: 0 8px 26px var(--accept-glow); }
    50%    { box-shadow: 0 8px 40px var(--accept-glow); }
  }
  .call-action .fab svg{ width:26px; height:26px; }

  /* ============ IN-CALL CONTROL DOCK ============ */
  .call-dock{
    position:absolute; left:0; right:0; bottom:0; z-index:8;
    padding: 0 30px calc(28px + env(safe-area-inset-bottom));
    opacity:0; transform: translateY(24px);
    pointer-events:none;
    transition: opacity .4s ease .05s, transform .4s ease .05s;
  }
  .phone.in-call .call-dock{ opacity:1; transform:none; pointer-events:auto; }

  .dock-row{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: 22px;
  }
  .dock-btn{
    width: 60px; height:60px; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    background: var(--glass);
    border: 1px solid var(--glass-brd);
    backdrop-filter: blur(18px);
    color: var(--text-hi);
    cursor:pointer;
  }
  .dock-btn svg{ width:20px; height:20px; }
  .dock-btn span{ display:none; }
  .dock-btn.on{ background: #fff; color:#0d1117; }
  .dock-btn:active{ transform: scale(.93); }

  .end-call{
    width: 100%;
    display:flex; align-items:center; justify-content:center;
  }
  .end-call button{
    width: 74px; height:74px; border-radius:50%;
    background: var(--decline);
    box-shadow: 0 10px 30px var(--decline-glow);
    border:none; color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition: transform .15s ease;
  }
  .end-call button:active{ transform: scale(.92); }
  .end-call svg{ width:28px; height:28px; }

  /* ============ ENDED TOAST ============ */
  .ended-toast{
    position:absolute; top: 50%; left:50%; z-index:30;
    transform: translate(-50%, -40%);
    background: rgba(20,22,26,0.9);
    border: 1px solid var(--glass-brd);
    backdrop-filter: blur(20px);
    padding: 14px 22px;
    border-radius: 16px;
    font-size: 14px; font-weight:600;
    color: var(--text-hi);
    opacity:0; pointer-events:none;
    transition: opacity .3s ease, transform .3s ease;
  }
  .ended-toast.show{ opacity:1; transform: translate(-50%,-50%); }

  @media (prefers-reduced-motion: reduce){
    .avatar-ring.pulsing .pulse, .call-action.accept .fab, .dot { animation: none !important; }
  }