.call-stage { width: min(100%, 390px); justify-self: stretch; }
    .call-dock {
      --voice-level: 0px;
      width: 100%;
      border: 1px solid rgba(255,255,255,.74);
      border-radius: 28px;
      padding: .75rem;
      color: var(--ink);
      background: rgba(251,250,246,.86);
      box-shadow: 0 24px 70px rgba(15,18,40,.26);
      backdrop-filter: blur(22px) saturate(1.16);
      transition: background 220ms ease, box-shadow 220ms ease;
    }
    .dock-bar {
      display: grid;
      grid-template-columns: 56px minmax(0,1fr) 54px;
      align-items: center;
      gap: .8rem;
    }
    .avatar-frame {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 4px solid rgba(255,255,255,.82);
      border-radius: 50%;
      background: var(--white);
      box-shadow: 0 4px 16px rgba(29,34,73,.12);
    }
    .callie-initial {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      border-radius: inherit;
      color: #fff;
      background: var(--accent);
      font: 500 1.55rem/1 var(--serif);
      letter-spacing: -.04em;
    }
    .dock-copy { min-width: 0; }
    .dock-copy strong, .dock-copy span { display: block; }
    .dock-copy strong { font-size: .98rem; }
    .dock-copy span {
      margin-top: .1rem;
      overflow: hidden;
      color: var(--muted);
      font-size: .77rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .call-control {
      width: 54px;
      height: 54px;
      display: none;
      place-items: center;
      border: 0;
      border-radius: 50%;
      color: #fff;
      background: var(--accent);
      box-shadow: 0 8px 20px rgba(61,76,184,.26);
      cursor: pointer;
      transition: transform 180ms ease, background 180ms ease;
    }
    .call-control:hover { transform: scale(1.03); background: var(--accent-dark); }
    .call-control svg { width: 21px; height: 21px; fill: currentColor; }
    .mobile-call { display: grid; text-decoration: none; }
    .desktop-call { display: none; }

    .dock-detail {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition: grid-template-rows 320ms ease, opacity 220ms ease, margin 320ms ease;
    }
    .dock-detail-inner { min-height: 0; overflow: hidden; }
    .call-dock.is-open .dock-detail { grid-template-rows: 1fr; margin-top: .75rem; opacity: 1; }
    .live-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      border-top: 1px solid rgba(24,28,45,.11);
      padding: .8rem .35rem .35rem;
      color: var(--muted);
      font-size: .72rem;
    }
    .live-state { display: inline-flex; align-items: center; gap: .4rem; }
    .live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 5px rgba(79,128,99,.11);
    }
    .mini-wave {
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin: .15rem 0 .25rem;
      color: var(--accent);
    }
    .mini-wave i {
      width: 3px;
      height: calc(8px + var(--voice-level));
      display: block;
      border-radius: 99px;
      background: currentColor;
    }
    .mini-wave i:nth-child(2), .mini-wave i:nth-child(6) { height: calc(15px + var(--voice-level)); }
    .mini-wave i:nth-child(3), .mini-wave i:nth-child(5) { height: calc(23px + var(--voice-level)); }
    .mini-wave i:nth-child(4) { height: calc(30px + var(--voice-level)); }
    .call-dock[data-call-state="connecting"] .mini-wave i { animation: connect 1s ease-in-out infinite alternate; }
    .call-dock[data-call-state="listening"] .mini-wave i { animation: listen 1.5s ease-in-out infinite; }
    .call-dock[data-call-state="speaking"] .mini-wave i { animation: speak .7s ease-in-out infinite alternate; }
    .call-dock[data-call-state="speaking"] .mini-wave i:nth-child(2n) { animation-delay: -.25s; }
    .call-dock[data-call-state="speaking"] .mini-wave i:nth-child(3n) { animation-delay: -.42s; }
    .call-dock[data-call-state="ended"] .mini-wave i { height: 4px; opacity: .35; }
    .call-dock[data-call-state="ended"] .live-dot { background: #9ba1b3; box-shadow: none; }
    .transcript {
      min-height: 2.8em;
      margin: .25rem .35rem .75rem;
      text-align: center;
      color: var(--muted);
      font-size: .78rem;
    }
    .call-results {
      max-height: 190px;
      margin: 0 .35rem .8rem;
      overflow: auto;
      border-top: 1px solid rgba(24,28,45,.1);
      padding-top: .7rem;
    }
    .call-results[hidden], .phone-fallback[hidden] { display: none; }
    .result-block + .result-block { margin-top: .65rem; }
    .result-label {
      display: block;
      margin-bottom: .25rem;
      color: var(--muted);
      font-size: .63rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .result-text {
      margin: 0;
      border-radius: 13px 13px 13px 5px;
      padding: .55rem .65rem;
      background: rgba(255,255,255,.72);
      color: var(--ink);
      font-size: .72rem;
      line-height: 1.4;
      white-space: pre-wrap;
    }
    .hangup {
      width: calc(100% - .7rem);
      min-height: 44px;
      margin: 0 .35rem .2rem;
      border: 1px solid rgba(24,28,45,.13);
      border-radius: 999px;
      color: var(--ink);
      background: rgba(255,255,255,.72);
      cursor: pointer;
    }
    .hangup:disabled { cursor: wait; opacity: .58; }
    .phone-fallback {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: .2rem .35rem 0;
      color: var(--accent);
      font-size: .72rem;
      text-align: center;
    }
    @keyframes connect { to { opacity: .35; transform: scaleY(.5); } }
    @keyframes listen { 0%,100% { transform: scaleY(.48); } 50% { transform: scaleY(1.08); } }
    @keyframes speak { to { transform: scaleY(.42); } }


@media (min-width: 760px) {.desktop-call{display:grid}.mobile-call{display:none}}