/* Talking to Melissa: the gradient orb buttons and the call bar (agent-bar.js). */

/* The orb: a grainy gradient circle in the voice's colours. Melissa's are the defaults. */
@property --orb-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tone-orb {
  --orb-1: #b883eb; --orb-2: #9576eb; --orb-3: #7a54c9; --orb-warm: #ffc9b0; --orb-size: 120px;
  position: relative; display: block; border-radius: 50%; overflow: hidden; isolation: isolate;
  /* Keep filtered layers circular when iOS loses rounded overflow clipping. */
  clip-path: circle(50%);
  background: #f4effc;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 -12px 28px -14px rgba(73,40,140,.3);
}
.tone-orb::before {
  content: ""; position: absolute; inset: -25%; z-index: -1;
  background:
    radial-gradient(36% 36% at 32% 28%, #fff 0, rgba(255,255,255,0) 72%),
    conic-gradient(from var(--orb-turn) at 58% 58%, var(--orb-1), var(--orb-warm), #fff 32%, var(--orb-2), var(--orb-3) 72%, var(--orb-1));
  filter: blur(calc(var(--orb-size) * .11)) saturate(1.15);
  animation: tone-orb-turn 18s linear infinite;
}
.tone-orb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 140px; mix-blend-mode: overlay; opacity: .5;
}
@keyframes tone-orb-turn { to { --orb-turn: 360deg; } }
@media (prefers-reduced-motion: reduce) { .tone-orb::before { animation: none; } }

/* The floating launcher: a small orb beside "Talk to Tone". */
#launcher { animation: none; background: #343434; color: #faf9f6; border-color: #494949; padding: 6px 18px 6px 6px; gap: 10px; transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1); }
#launcher:hover { background: #444444; border-color: #595959; }
#launcher .tone-orb { --orb-size: 34px; width: 34px; height: 34px; flex: none; }
body.agent-bar-open #launcher { opacity: 0; visibility: hidden; pointer-events: none; }

/* The call bar. */
#tone-agent-bar .tab {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  width: min(440px, calc(100vw - 24px));
  transform: translate(-50%, 28px); opacity: 0; visibility: hidden;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .25s ease, visibility 0s linear .5s;
}
#tone-agent-bar .tab[data-open] { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
#tone-agent-bar .tab-bar {
  display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 8px 0 12px; border-radius: 30px;
  background: #343434; border: 1px solid #494949; color: #faf9f6;
  box-shadow: 0 18px 50px -18px rgba(33,28,23,.35);
}
#tone-agent-bar .tab-avatar { position: relative; width: 36px; height: 36px; flex: none; }
#tone-agent-bar .tab-avatar .tone-orb { --orb-size: 36px; width: 100%; height: 100%; transition: opacity .3s ease; }
#tone-agent-bar .tab[data-state="connecting"] .tab-avatar .tone-orb { opacity: .3; }
#tone-agent-bar .tab-thinking { position: absolute; inset: 0; margin: auto; }
#tone-agent-bar .tab-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; line-height: 1.2; }
#tone-agent-bar .tab-who strong { font-size: 15px; font-weight: 600; }
#tone-agent-bar .tab-status { font-size: 13px; color: #d0d0d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#tone-agent-bar .tab-btn {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #f5f5f5; cursor: pointer; transition: background .15s ease, color .15s ease;
}
#tone-agent-bar .tab-btn:hover:not(:disabled) { background: #4b4b4b; color: #fff; }
#tone-agent-bar .tab-btn[aria-pressed="true"] { background: #ededeb; color: #292929; }
#tone-agent-bar .tab-btn:disabled { opacity: .45; cursor: default; }
#tone-agent-bar .tab-btn:focus-visible { outline: 2px solid #7a54c9; outline-offset: 2px; }
#tone-agent-bar .tab-btn svg { width: 20px; height: 20px; }
#tone-agent-bar .tab-caption {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); margin: 0; padding: 10px 14px; border-radius: 16px;
  background: #343434; border: 1px solid #494949; color: #faf9f6;
  font-size: 14px; line-height: 1.45; box-shadow: 0 10px 30px -14px rgba(33,28,23,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
#tone-agent-bar .tab-caption[data-show] { opacity: 1; transform: none; }
#tone-agent-bar .tab-caption:empty { display: none; }
@media (max-width: 560px) {
  #tone-agent-bar .tab { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  #tone-agent-bar .tab, #tone-agent-bar .tab-caption, #launcher { transition: none; }
}

/* Keep the controls readable above the light rising from the lower edge. */
#tone-agent-bar .tab-bar > * { position: relative; z-index: 5; }