/* UNDERSTUDY — AI assistant launchers (home page only). Tokens from site.css. */

.asst-orb{
  position:relative; flex:none; width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #F2A19B 0, var(--amber) 40%, var(--crimson) 100%);
  box-shadow:0 0 10px 1px rgba(232,176,75,.45), inset 0 0 0 1px rgba(255,255,255,.18);
}
.asst-orb::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid rgba(232,176,75,.55);
  animation:asstRing 2.8s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes asstRing{ 0%{ transform:scale(.8); opacity:.9 } 70%,100%{ transform:scale(1.3); opacity:0 } }
[aria-busy="true"] .asst-orb{ animation:asstSpin 1s linear infinite; }
@keyframes asstSpin{ to{ transform:rotate(360deg) } }

/* in-page button (example card + next to the form) */
.asst-btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--body); font-weight:700; font-size:.92rem; letter-spacing:.02em;
  color:var(--bone); background:transparent;
  border:1px solid var(--ink-3); border-radius:3px;
  padding:12px 20px 12px 14px; cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
}
.asst-btn:hover{ border-color:var(--amber); transform:translateY(-2px); }
.asst-btn:active{ transform:translateY(0) scale(.98); }
.example .ex-live{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.example .ex-live .asst-btn{ border-color:rgba(232,176,75,.45); }

.next .asst-ask{ margin:22px 0 0; padding-top:18px; border-top:1px solid var(--ink-3); }
.next .asst-ask p{ margin:0 0 12px; color:var(--muted); font-size:.9rem; line-height:1.55; }

/* floating pill: after the hero, hidden while the form is on screen (assistant.js) */
.asst-pill{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:700; font-size:.88rem; letter-spacing:.02em;
  color:var(--bone); background:rgba(18,16,16,.94);
  border:1px solid rgba(232,176,75,.5); border-radius:999px;
  padding:9px 18px 9px 10px; cursor:pointer;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), visibility 0s linear .35s, border-color .2s;
}
.asst-pill.show{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), visibility 0s, border-color .2s;
}
.asst-pill:hover{ border-color:var(--amber); }
.asst-pill .asst-orb{ width:26px; height:26px; }
@media (max-width:560px){
  .asst-pill{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); font-size:.82rem; padding:8px 15px 8px 9px; }
}

/* close control: the widget is removed entirely, which also ends any voice call */
.asst-x{
  display:none; align-items:center; justify-content:center; gap:10px;
  font-family:var(--body); font-weight:700; font-size:.92rem; letter-spacing:.02em;
  color:var(--ink); background:var(--amber);
  border:0; border-radius:3px; cursor:pointer;
  position:fixed; z-index:2147483647;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.7);
}
.asst-x svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; fill:none; }
body.asst-open .asst-x{ display:inline-flex; }
@media (min-width:761px){
  .asst-x{ top:max(92px, calc(100vh - 716px)); right:32px; padding:11px 18px; }
}
@media (max-width:760px){
  .asst-x{ left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); padding:15px 12px; }
  /* keep the chat panel above the close bar */
  body.asst-open elevenlabs-convai{ bottom:calc(66px + env(safe-area-inset-bottom)) !important; }
}

.asst-btn:focus-visible, .asst-pill:focus-visible, .asst-x:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .asst-orb::after, [aria-busy="true"] .asst-orb{ animation:none; }
  .asst-pill, .asst-pill.show{ transition:none; }
  .asst-btn:hover{ transform:none; }
}