/* AI calls on Place a call (ai-call.js). Private preview. */

/* the tab */
.twseg-ai{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.twseg-ai .ai-mark{width:13px;height:13px}
.twseg-ai.on{background:var(--ai-grad-deep,linear-gradient(135deg,#4F46E5,#9333EA))}
.twseg-ai.on .ai-mark{background:#fff}

/* the form rows */
.aic-note{margin:0 0 16px;padding:11px 14px;border-radius:12px;font-size:12.5px;line-height:1.5;color:#FDE68A;
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.28)}
#aiRows select{width:100%;font:inherit;font-size:15px;color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--glass-brd);
  border-radius:12px;padding:12px 14px}
.aic-brief{border:1px solid var(--glass-brd);border-radius:12px;background:rgba(255,255,255,.02);transition:border-color .15s,box-shadow .15s}
.aic-brief:focus-within{border-color:#8B5CF6;box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.aic-brief textarea{display:block;width:100%;min-height:96px;resize:vertical;font:inherit;font-size:14.5px;line-height:1.55;color:var(--ink);
  background:none;border:0;padding:12px 14px 6px;outline:none}
.aic-brief textarea::placeholder{color:var(--faint)}
.aic-brief-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 8px 10px;border-top:1px solid rgba(147,197,253,.08)}
/* voice picker in the composer footer (dropdown.js skins the <select>) */
.aic-voice{display:inline-flex;align-items:center;gap:7px;min-width:0}
.aic-voice > .ai-mark{width:13px;height:13px}
.aic-voice .spf-dd{max-width:100%}
.aic-voice .spf-dd__btn{padding:6px 10px;font-size:12.5px;border-radius:9px;background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.24)}
.aic-voice .spf-dd__btn:hover{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.4)}
.aic-count{font-family:'Geist',sans-serif;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.aic-hint{margin:8px 2px 0;font-size:12px;line-height:1.5;color:var(--faint)}
.aic-err{margin:10px 0 0;padding:10px 13px;border-radius:11px;font-size:13px;line-height:1.5;color:#FECACA;
  background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.3)}
.aic-err[hidden]{display:none}
.aic-price{display:flex;flex-direction:column;gap:3px;margin:0 0 14px;padding:12px 14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(192,38,211,.06));border:1px solid rgba(139,92,246,.24)}
.aic-price b{display:flex;align-items:center;gap:7px;font-family:'Geist',sans-serif;font-size:14.5px;font-weight:600;color:var(--ink)}
.aic-price b .ai-mark{width:14px;height:14px}
.aic-price span{font-size:12px;line-height:1.5;color:var(--muted)}
.aic-price .crd{font-size:14.5px}
label.acbx.aic-agree{margin:0 0 14px}
label.acbx.aic-agree[hidden]{display:none}
/* beside Submit: the same height and corners as the Call settings button it replaces */
/* it sits in the form body now (calls.html styles .pane-call label.acbx) */
.aic-link{font:inherit;color:#C4B5FD;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.aic-spin{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:aicRot .7s linear infinite}
@keyframes aicRot{to{transform:rotate(360deg)}}

/* the brief's label row */
.aic-lrow{display:flex;align-items:center;margin-bottom:7px}
#aiRows .aic-lrow > label[for]{margin:0}
.aic-brief{position:relative}
.aic-count[hidden]{display:none}
.aic-count{position:absolute;right:10px;bottom:46px;pointer-events:none}

/* Caller ID menus (ai-call.js mountCidSource). Custom / Preset number sits on
   the Caller ID field's label line in every call type, overlaying the right
   end of it; with Preset picked the field itself is the dropdown of preset
   numbers, at the typed field's measured height, so neither adds a pixel to
   the locked AI form. At the narrowest two-column width the AI cell is
   ~177px: "Caller ID" plus the widest button label fits. Both menus live on
   <body>, dressed like this page's country picker (.cc-panel). */
.aic-cidrow{position:relative;container-type:inline-size}
#reqForm .inputline[hidden]{display:none}
.cidp{position:absolute;top:-6px;right:0;z-index:3}
.cidp-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px 0 10px;border-radius:8px;cursor:pointer;
  font:600 12px/1 'Geist',system-ui,sans-serif;color:var(--muted);white-space:nowrap;
  background:rgba(255,255,255,.03);border:1px solid var(--glass-brd);transition:color .15s,background .15s,border-color .15s,box-shadow .15s}
.cidp-btn:hover{color:var(--ink);border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.06)}
.cidp-btn:focus-visible{outline:none;border-color:var(--electric);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.cidp.open .cidp-btn{color:var(--ink);border-color:var(--electric);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.cidp.our .cidp-btn{color:var(--glow);background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.4)}
.cidp-caret{width:10px;height:10px;flex:0 0 auto;opacity:.6;transition:transform .2s}
.cidp.open .cidp-btn .cidp-caret{transform:rotate(180deg)}
.cidp.na .cidp-btn{cursor:not-allowed;opacity:.5;border-style:dashed;background:none}
.cidp.na .cidp-caret{display:none}

.cidp-pop{position:fixed;z-index:2147482000;padding:8px;border-radius:13px;background:#0f1428;border:1px solid var(--glass-brd);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.8);animation:cidpIn .16s ease}
.cidp-pop[hidden]{display:none}
@keyframes cidpIn{from{opacity:0;transform:translateY(-4px)}}
.cidp-head{display:flex;align-items:center;gap:6px;padding:4px 9px 8px;font-size:12px;font-weight:500;color:var(--faint)}
.cidp-head .flagimg{width:16px;height:12px;border-radius:2px}
.cidp-opt{position:relative;display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;padding:9px;border:0;border-radius:9px;
  background:none;font:inherit;color:var(--ink);transition:background .12s}
.cidp-opt + .cidp-opt{margin-top:2px}
.cidp-opt:hover,.cidp-opt:focus-visible,.cidp-num:hover,.cidp-num:focus-visible{outline:none;background:rgba(37,99,235,.14)}
.cidp-opt[aria-selected="true"]{background:rgba(37,99,235,.09)}
/* the site's gradient line on the menu's left edge (the pop's 8px padding):
   the source in use, and the number under the pointer in the list below */
.cidp-opt::before,.cidp-num::before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(#60A5FA,#2DD4BF);opacity:0;transition:opacity .14s ease;pointer-events:none}
.cidp-opt[aria-selected="true"]::before,.cidp-num:hover::before,.cidp-num:focus-visible::before{opacity:1}
.cidp-ic{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;color:var(--glow);background:rgba(37,99,235,.12)}
.cidp-ic svg{width:15px;height:15px}
.cidp-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cidp-tx b{display:flex;align-items:center;gap:7px;font-family:'Geist',sans-serif;font-weight:600;font-size:13.5px;white-space:nowrap}
.cidp-tx em{font-style:normal;font-size:12px;font-weight:600;
  color:var(--signal,#2DD4BF)}
.cidp-tx small{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the preset numbers (the field's own dropdown) */
.cidp-search{display:block;width:100%;margin:0 0 6px;padding:8px 11px;border-radius:9px;font:inherit;font-size:13px;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--glass-brd);outline:none}
.cidp-search:focus{border-color:var(--electric)}
.cidp-list{max-height:264px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:1px;
  margin-left:-8px;padding-left:8px}   /* out to the pop's edge, so the line (.cidp-num::before) isn't clipped */
.cidp-list::-webkit-scrollbar{width:6px}
.cidp-list::-webkit-scrollbar-thumb{background:rgba(37,99,235,.3);border-radius:10px}
.cidp-none{padding:12px;text-align:center;font-size:12.5px;color:var(--faint)}
.cidp-none[hidden],.cidp-num[hidden]{display:none}
.cidp-num{position:relative;display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;padding:8px 9px;border:0;border-radius:8px;
  background:none;font:inherit;color:var(--ink);transition:background .12s}
.cidp-radio{width:13px;height:13px;flex:0 0 auto;border-radius:50%;border:1.5px solid rgba(147,197,253,.4);transition:.15s}
.cidp-num[aria-selected="true"] .cidp-radio{border-color:var(--glow);box-shadow:inset 0 0 0 3px #0f1428;background:var(--glow)}
.cidp-nflag{display:inline-flex;width:18px;flex:0 0 auto}
.cidp-nflag .flagimg{width:18px;height:13px;border-radius:2px;object-fit:cover;display:block}
.cidp-nn{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-family:'Geist',sans-serif;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cidp-nn > span{flex:0 0 auto}
/* where the number is from, in grey under it */
.cidp-np{display:block;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.3;color:var(--faint);font-variant-numeric:normal}
/* prices: the rates table's own marks (AI credits in AI mode, credits otherwise) */
.cidp-price{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.cidp-price .ai-mark{width:11px;height:11px;align-self:center}
.cidp-price b{font-family:'Geist',sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.cidp-price .crd{font-size:14px}
.cidp-price small{font-size:12px;color:var(--faint)}
/* a preset number's cheapest -> dearest destination */
.cidp-foot{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding:9px 9px 3px;border-top:1px solid var(--line);font-size:12px;color:var(--faint)}
.cidp-range{display:flex;align-items:center;gap:5px;min-width:0;color:var(--muted);white-space:nowrap}
.cidp-range .ai-mark{width:10px;height:10px}
.cidp-range b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.cidp-range i{flex:1;min-width:16px;height:3px;margin:0 3px;border-radius:3px;background:linear-gradient(90deg,rgba(147,197,253,.35),var(--glow))}
@media (prefers-reduced-motion:reduce){ .cidp-pop{animation:none} .cidp-opt::before,.cidp-num::before{transition:none} }

/* the preset number, in place of the typed Caller ID field: the whole field
   is the button that opens the list */
.aic-spf{padding:0;background:rgba(37,99,235,.06);border-color:rgba(147,197,253,.3)}
.aic-spf[hidden]{display:none}
.aic-spf.open,.aic-spf:focus-within{border-color:var(--electric);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.aic-spf-btn{display:flex;align-items:center;gap:10px;width:100%;height:100%;padding:0 12px 0 14px;border:0;border-radius:12px;
  background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.aic-spf-btn:focus-visible{outline:none}
.aic-spf-btn > .cidp-caret{width:11px;height:11px;color:var(--faint)}
.aic-spf.open .aic-spf-btn > .cidp-caret{transform:rotate(180deg)}
.aic-spf-rate[hidden]{display:none}
.aic-spf-flag{display:inline-flex;flex:0 0 auto}
.aic-spf-flag .flagimg{width:18px;height:13px;border-radius:2px;object-fit:cover;display:block}
.aic-spf-num{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;font-size:15.5px;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;text-align:left}
.aic-spf-n,.aic-spf-place{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* where the picked number is from, in grey under it */
.aic-spf-place{font-size:12px;line-height:1.25;color:var(--faint);font-variant-numeric:normal}
/* under the field when one of their own numbers is picked: where else it works */
.aic-mine-note{margin:8px 2px 0;font-size:12px;line-height:1.45;color:var(--muted)}
.aic-mine-note[hidden]{display:none}
.aic-mine-note a{color:var(--glow);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(147,197,253,.35)}
.aic-mine-note a:hover{border-bottom-color:var(--glow)}
.aic-spf-rate{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-family:'Geist',sans-serif;font-size:12px;font-weight:600;
  color:var(--glow);font-variant-numeric:tabular-nums}
.aic-spf-rate .ai-mark{width:10px;height:10px}
/* the whole number and the caret always show: a half-width AI cell drops the
   price pill first (the rate chip and table still show it), the narrowest
   the flag too, and tightens the type */
@container (max-width:309px){ .aic-spf-rate{display:none} }
@container (max-width:219px){
  .aic-spf-flag{display:none}
  .aic-spf-btn{gap:8px;padding:0 10px 0 12px}
  .aic-spf-num{font-size:14px}
}

/* the live call */
.aic-bg{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,6,14,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .22s}
.aic-bg.in{opacity:1}
.aic{--c1:#818CF8;--c2:#C084FC;--v1:#E0E7FF;--v2:#818CF8;--v3:#5B21B6;position:relative;width:100%;max-width:560px;max-height:min(88vh,780px);display:flex;flex-direction:column;
  border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#121735 0%,#0a0d1f 70%);border:1px solid rgba(139,92,246,.26);
  box-shadow:0 60px 140px -40px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(14px) scale(.97);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.aic-bg.in .aic{transform:none}
.aic[data-phase="you"]{--c1:#2DD4BF;--c2:#38BDF8}
.aic[data-phase="live"]{--c1:#34D399;--c2:#818CF8}
.aic[data-phase="done"]{--c1:#64748B;--c2:#6366F1}
.aic > *{position:relative}
.aic-aura{position:absolute;inset:-30% -20% auto;height:340px;pointer-events:none;opacity:.55;filter:blur(40px);
  background:radial-gradient(200px 140px at 22% 40%,var(--c1),transparent 70%),radial-gradient(220px 150px at 78% 30%,var(--c2),transparent 70%);
  animation:aicDrift 9s ease-in-out infinite alternate;transition:opacity .4s}
.aic[data-phase="done"] .aic-aura{opacity:.22}
@keyframes aicDrift{to{transform:translate3d(18px,10px,0) scale(1.08)}}

.aic-top{display:flex;align-items:center;gap:13px;padding:18px 18px 14px 20px}
.aic-orb{position:relative;width:46px;height:46px;flex:0 0 auto}
.aic-orb > span{position:absolute;inset:0}
.aic-orb i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--c1);opacity:0}
.aic[data-phase="live"] .aic-orb i,.aic[data-phase="ring"] .aic-orb i{animation:aicRing 2s ease-out infinite}
.aic-orb i:nth-child(2){animation-delay:1s!important}
.aic-id{flex:1;min-width:0}
.aic-name{display:flex;align-items:center;gap:8px;font-family:'Geist',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.aic-name em{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.03em;padding:2px 7px;border-radius:100px;color:#fff;background:var(--ai-grad-deep)}
.aic-lang{margin-top:2px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aic-x{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(147,197,253,.14);transition:background .15s,color .15s}
.aic-x:hover{color:var(--ink);background:rgba(255,255,255,.08)}

.aic-route{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10px;margin:0 20px;padding:11px 14px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid rgba(147,197,253,.1)}
.aic-rt{min-width:0}
.aic-rt.to{text-align:right}
.aic-rt small{display:block;font-size:12px;color:var(--faint)}
.aic-rt b{display:block;font-family:'Geist',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.aic-steps{display:flex;gap:8px;list-style:none;margin:14px 20px 0;padding:0}
.aic-steps li{flex:1;font-size:12px;color:var(--faint);transition:color .3s}
.aic-dur{font-style:normal;font-variant-numeric:tabular-nums}
.aic-steps li span{display:block;height:3px;border-radius:3px;margin-bottom:7px;background:rgba(147,197,253,.14);overflow:hidden;position:relative}
.aic-steps li.past{color:var(--muted)}
.aic-steps li.past span{background:linear-gradient(90deg,var(--c2),var(--c1))}
.aic-steps li.now{color:var(--ink)}
.aic-steps li.now span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--c1),transparent);animation:aicSweep 1.4s ease-in-out infinite}
.aic[data-phase="done"] .aic-steps li.now span{background:linear-gradient(90deg,var(--c2),var(--c1))}
.aic[data-phase="done"] .aic-steps li.now span::after{display:none}
@keyframes aicSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.aic-body{flex:1;min-height:250px;overflow-y:auto;padding:18px 20px;overscroll-behavior:contain}
.aic-body::-webkit-scrollbar{width:6px}.aic-body::-webkit-scrollbar-thumb{background:rgba(139,92,246,.3);border-radius:10px}
.aic-stage{min-height:214px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;animation:aicIn .35s cubic-bezier(.2,.8,.2,1)}
.aic-stage h4{margin:18px 0 6px;font-family:'Geist',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.aic-stage p{margin:0;max-width:350px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.aic-stage p b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.aic-art{position:relative;width:104px;height:104px;display:grid;place-items:center}
.aic-art > i{position:absolute;inset:14px;border-radius:50%;border:2px solid var(--c1);animation:aicRing 2.1s ease-out infinite}
.aic-art > i:nth-child(2){animation-delay:.7s}.aic-art > i:nth-child(3){animation-delay:1.4s}
.aic-art-core{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,var(--c1),var(--c2));box-shadow:0 16px 40px -12px var(--c1),inset 0 1px 0 rgba(255,255,255,.3)}
.aic-art-core svg{width:28px;height:28px}
.aic-art-core .ai-mark{width:26px;height:26px;background:#fff}
.aic-art.you .aic-art-core svg{animation:aicBuzz 1.6s ease-in-out infinite}
.aic-art.done .aic-art-core{background:rgba(147,197,253,.12);color:var(--muted);box-shadow:none;border:1px solid rgba(147,197,253,.2)}
/* The voice's orb: a lit sphere whose colours (--v1, --v2, --v3; ai-call.js
   VOICE_TONE) swirl round and round, with a fixed light on top. */
.aic-ball{display:block;border-radius:50%;overflow:hidden;position:relative;isolation:isolate;
  background:linear-gradient(145deg,var(--v1),var(--v2) 50%,var(--v3));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 26px -8px var(--v2)}
.aic-art-core.aic-ball{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 18px 44px -12px var(--v2)}
.aic-ball > b{position:absolute;inset:-12%;border-radius:50%;filter:blur(3px);
  background:conic-gradient(from 0deg,var(--v1),var(--v2) 22%,var(--v3) 45%,var(--v2) 66%,var(--v1) 84%,var(--v2) 100%);
  animation:aicSpin 3.2s linear infinite}
.aic-ball::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.92) 0,rgba(255,255,255,.32) 15%,transparent 40%),
    radial-gradient(circle at 72% 80%,rgba(0,0,0,.28),transparent 62%)}
.aic[data-phase="live"] .aic-ball > b{animation-duration:1.6s}
@keyframes aicSpin{to{transform:rotate(360deg)}}
.aic-orb i,.aic-art.ring > i{border-color:var(--v2)}
@keyframes aicRing{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@keyframes aicBuzz{0%,55%,100%{transform:rotate(0)}60%,70%,80%{transform:rotate(-12deg)}65%,75%,85%{transform:rotate(12deg)}}
.aic-eq{display:flex;align-items:center;gap:5px;height:48px}
.aic-eq i{width:6px;border-radius:6px;background:linear-gradient(180deg,var(--v1),var(--v2) 45%,var(--v3));animation:aicEq 1s ease-in-out infinite}
.aic-eq i:nth-child(1){height:18px;animation-delay:-.2s}.aic-eq i:nth-child(2){height:34px;animation-delay:-.5s}
.aic-eq i:nth-child(3){height:46px}.aic-eq i:nth-child(4){height:30px;animation-delay:-.35s}.aic-eq i:nth-child(5){height:16px;animation-delay:-.7s}
@keyframes aicEq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

.aic-thread{display:flex;flex-direction:column;gap:10px}
.aic-msg{max-width:82%;padding:10px 13px 11px;border-radius:17px;animation:aicIn .3s cubic-bezier(.2,.8,.2,1)}
.aic-msg p{margin:0;font-size:14.5px;line-height:1.5}
.aic-mh{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-family:'Geist',sans-serif;font-size:12px;font-weight:600}
.aic-mh time{margin-left:auto;padding-left:10px;font-weight:500;font-variant-numeric:tabular-nums;opacity:.7}
.aic-dot{width:15px;height:15px;flex:0 0 auto}
.aic-msg.them{align-self:flex-start;color:var(--ink);background:rgba(147,197,253,.07);border:1px solid rgba(147,197,253,.14);border-bottom-left-radius:6px}
.aic-msg.them .aic-mh{color:var(--faint)}
.aic-msg.them.quiet p{color:var(--faint);font-style:italic}
.aic-msg.ai{align-self:flex-end;color:#fff;border-bottom-right-radius:6px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--v2) 62%,#151230),color-mix(in srgb,var(--v3) 78%,#151230));
  box-shadow:0 12px 28px -14px var(--v2),inset 0 1px 0 rgba(255,255,255,.12)}
.aic-msg.ai .aic-mh{color:rgba(255,255,255,.85)}
@keyframes aicIn{from{opacity:0;transform:translateY(8px)}}

.aic-tail{display:flex;align-items:center;gap:9px;padding:11px 20px;border-top:1px solid rgba(147,197,253,.08);font-size:12.5px;color:var(--muted)}
.aic-tail[hidden]{display:none}
.aic-typing{display:inline-flex;gap:3px}
.aic-typing i{width:5px;height:5px;border-radius:50%;background:#C4B5FD;animation:aicType 1.2s ease-in-out infinite}
.aic-typing i:nth-child(2){animation-delay:.15s}.aic-typing i:nth-child(3){animation-delay:.3s}
@keyframes aicType{0%,100%{transform:none;opacity:.35}40%{transform:translateY(-3px);opacity:1}}
.aic-listen{display:inline-flex;align-items:center;gap:2px;height:14px}
.aic-listen i{width:3px;height:100%;border-radius:2px;background:#6EE7B7;animation:aicEq .9s ease-in-out infinite}
.aic-listen i:nth-child(2){animation-delay:-.3s}.aic-listen i:nth-child(3){animation-delay:-.6s}.aic-listen i:nth-child(4){animation-delay:-.15s}
.aic-on{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:#CCFBF1}
.aic-on svg{width:13px;height:13px}

/* the recording, once the call's over (in the tail strip, so it stays on screen) */
.aic-tail.rec{flex-direction:column;align-items:stretch;gap:9px;padding:14px 20px}
.aic-rec-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.aic-rec-top b{font-family:'Geist',sans-serif;font-weight:600;font-size:13.5px;color:var(--ink)}
.aic-rec-top span{font-size:12px;color:var(--faint);text-align:right}
.aic-tail.rec audio{display:block;width:100%;height:40px;border-radius:12px}
.aic-rec-wait{display:flex;align-items:center;gap:9px}
.aic-rec-acts{display:flex;align-items:center;justify-content:space-between;gap:10px}
.aic-rec-hist{font-family:'Geist',sans-serif;font-weight:600;font-size:12.5px;color:#C7D2FE;cursor:pointer;padding:7px 12px;border-radius:10px;
  background:rgba(129,140,248,.1);border:1px solid rgba(129,140,248,.3);transition:background .15s,color .15s}
.aic-rec-hist:hover{color:#fff;background:rgba(129,140,248,.18)}
.aic-rec-acts a{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none}
.aic-rec-acts a:hover{color:var(--ink)}
/* the history row "Open in call history" lands on */
.hist-row.hist-flash{animation:histFlash 2.4s ease-out}
@keyframes histFlash{0%,35%{border-color:rgba(129,140,248,.7);box-shadow:0 0 0 4px rgba(129,140,248,.18)}}

.aic-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.aic-sum > div{padding:12px 13px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(147,197,253,.12)}
.aic-sum small{display:block;font-size:12px;color:var(--faint)}
.aic-sum b{display:block;margin-top:3px;font-family:'Geist',sans-serif;font-weight:600;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.aic-sum > div:last-child b{font-size:13px;line-height:1.35}

.aic-foot{display:flex;align-items:center;gap:10px;padding:14px 20px 18px;border-top:1px solid rgba(147,197,253,.1)}
.aic-meta{flex:1;min-width:0;font-size:12px;color:var(--faint)}
.aic-btn{font-family:'Geist',sans-serif;font-weight:600;font-size:13.5px;color:#fff;cursor:pointer;border:1px solid transparent;border-radius:12px;padding:10px 18px;
  background:linear-gradient(135deg,#3B82F6,#1D4ED8);box-shadow:0 10px 24px -12px rgba(59,130,246,.9);transition:filter .15s,transform .15s}
.aic-btn:hover{filter:brightness(1.08)}
.aic-btn.end{color:#FCA5A5;background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3);box-shadow:none}
.aic-btn.end:hover{background:rgba(239,68,68,.15)}
.aic-btn:disabled{opacity:.6;cursor:default}
.aic-btn[hidden]{display:none}
/* Listen live (ai-call.js openLive): off / connecting / live / muted / none */
.aic-btn.lis{display:inline-flex;align-items:center;gap:8px;color:var(--muted);background:rgba(37,99,235,.08);border-color:var(--glass-brd);box-shadow:none}
.aic-btn.lis svg{width:16px;height:16px}
.aic-btn.lis:hover:not(:disabled){color:var(--ink);background:rgba(37,99,235,.14);filter:none}
.aic-btn.lis.live{color:#CCFBF1;background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.4)}
.aic-btn.lis.live .aic-listen i{background:#5EEAD4}
.aic-btn.lis.muted{color:var(--faint)}
/* hidden once the call's over (ai-call.js); .lis's own display above would
   otherwise beat the plain [hidden] rule and leave it on screen */
.aic-btn.lis[hidden]{display:none}
.aic-btn.lis:disabled{opacity:.55;cursor:default}


@media (max-width:560px){
  .aic-bg{padding:0;align-items:flex-end}
  .aic{max-width:none;max-height:94vh;border-radius:24px 24px 0 0;border-bottom:0}
  .aic-top{padding:16px 14px 12px 16px}
  .aic-route,.aic-steps{margin-left:16px;margin-right:16px}
  .aic-body{padding:16px}
  .aic-tail{padding:10px 16px}
  .aic-tail.rec{padding:12px 16px}
  .aic-rec-top{flex-wrap:wrap}
  .aic-rec-top span{text-align:left}
  .aic-foot{padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
  .aic-msg{max-width:92%}
  .aic-lang{font-size:12px}
  .aic-sum{gap:8px}
  /* a phone: the close button big enough to hit; less empty space round the
     call's picture; the footer's line (rate, time left) across the top and
     the buttons sharing the row under it, instead of the line being
     squeezed into a sliver between three buttons */
  .aic-x{width:38px;height:38px}
  .aic-body{min-height:196px}
  .aic-stage{min-height:176px}
  .aic-art{width:92px;height:92px}
  .aic-stage h4{margin-top:14px}
  .aic-foot{flex-wrap:wrap;row-gap:10px}
  .aic-meta{flex:1 1 100%;order:-1}
  .aic-meta:empty{display:none}
  .aic-foot .aic-btn{flex:1 1 auto;justify-content:center;text-align:center;padding:11px 14px}
}
/* the narrowest phones: both numbers still fit whole */
@media (max-width:380px){
  .aic-route{padding:10px 12px;gap:8px}
  .aic-rt b{font-size:13px}
  .aic-top{gap:11px}
  .aic-name{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .aic-bg,.aic{transition:none}
  .aic-aura,.aic-orb i,.aic-art > i,.aic-art-core svg,.aic-eq i,.aic-steps li.now span::after,
  .aic-typing i,.aic-listen i,.aic-msg,.aic-stage,.aic-spin,.hist-row.hist-flash{animation:none}
}