/* Atomrock AI Voice Chat, floating site widget */
#atomrock-voice-root {
  --av-bg: #101113;
  --av-panel: #17191d;
  --av-border: #2d3238;
  --av-text: #e9edf2;
  --av-muted: #9aa3ad;
  --av-accent: #4797ff; /* matches site --thm-color */
  --av-danger: #e85d5d;
  --av-ok: #3ecf8e;
  /* Same stack style.css sets on body, so the widget reads as part of the site. */
  font-family: var(--body-font, "Inter", sans-serif, "Meiryo UI");
  /* body sets line-height: 28px, which every unstyled line in here was
     inheriting and padding out. Buttons opt back into 28px on purpose. */
  line-height: 1.45;
}

/* Sole floating control now that .back-to-top is gone, so a plain
   bottom-right anchor is enough. right: 3% matches the site gutter. */
.av-fab-wrap {
  position: fixed;
  right: 3%;
  bottom: 24px;
  z-index: 99999;
}

.av-fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 51px;
  padding: 0 14px 0 1.5px;
  border-radius: 26px;
  border: 1px solid var(--av-border);
  background: var(--av-panel);
  color: var(--av-text);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 0 10px rgb(0 0 0 / 31%);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.av-fab:hover {
  background: #20242a;
  border-color: #3a4148;
}

.av-fab-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Grip dots: hidden until hover, then the pill grows to reveal them */
.av-drag {
  display: grid;
  place-items: center;
  width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: 0;
  cursor: grab;
  color: var(--av-muted);
  transition: width 0.15s ease, opacity 0.15s ease, margin-left 0.15s ease;
  touch-action: none;
}

.av-fab:hover .av-drag,
.av-drag:active {
  width: 10px;
  opacity: 1;
  margin-left: 8px;
}

.av-drag:active {
  cursor: grabbing;
}

/* Beats the generic .av-fab svg sizing rule that follows this block */
.av-fab .av-drag svg {
  width: 10px;
  height: 12px;
  flex-shrink: 0;
  fill: currentColor;
}

.av-fab-icon {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--av-accent);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

/* Expanding ring, not a bouncing button: reads as live audio. */
.av-fab[data-state="listening"] .av-fab-icon::before,
.av-fab[data-state="connecting"] .av-fab-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: av-ring 1.8s ease-out infinite;
}

.av-fab[data-state="speaking"] .av-fab-icon {
  background: var(--av-ok);
}

.av-fab[data-state="error"] .av-fab-icon {
  background: var(--av-danger);
}

.av-fab[data-state="incall"] .av-fab-icon::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  top: 1px;
  right: 1px;
  box-shadow: 0 0 0 2px var(--av-accent);
}

.av-fab svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Particle mascot canvas fills the disc; SVGs stay as the fallback for
   reduced motion or no canvas (engine adds .av-orb-on when it runs) */
.av-fab-icon .av-orb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#atomrock-voice-root:not(.av-orb-on) .av-orb {
  display: none;
}

#atomrock-voice-root.av-orb-on .av-fab .av-wave,
#atomrock-voice-root.av-orb-on .av-fab .av-micoff {
  display: none;
}

/* The orb paints its own colors, so the disc drops the flat state fills */
#atomrock-voice-root.av-orb-on .av-fab .av-fab-icon {
  background: #0c1322;
}

.av-wave rect {
  transform-box: fill-box;
  transform-origin: center;
}

/* Mic blocked: danger disc + mic-off glyph replaces the wave */
.av-fab .av-micoff {
  display: none;
}

.av-fab[data-micblocked] .av-wave {
  display: none;
}

.av-fab[data-micblocked] .av-micoff {
  display: block;
}

.av-fab[data-micblocked] .av-fab-icon {
  background: var(--av-danger);
}

.av-fab[data-state="listening"] .av-wave rect,
.av-fab[data-state="speaking"] .av-wave rect {
  animation: av-bar 0.9s ease-in-out infinite;
}

.av-wave rect:nth-child(2) {
  animation-delay: 0.12s;
}
.av-wave rect:nth-child(3) {
  animation-delay: 0.24s;
}
.av-wave rect:nth-child(4) {
  animation-delay: 0.36s;
}
.av-wave rect:nth-child(5) {
  animation-delay: 0.48s;
}

@keyframes av-ring {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}

@keyframes av-bar {
  0%,
  100% {
    transform: scaleY(0.4);
  }
  50% {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-fab[data-state="listening"] .av-fab-icon::before,
  .av-fab[data-state="connecting"] .av-fab-icon::before,
  .av-fab .av-wave rect {
    animation: none;
  }
}

.av-panel {
  position: fixed;
  right: 3%;
  bottom: 88px;
  width: min(380px, calc(100vw - 28px));
  /* dvh for mobile browser chrome; fallback to vh */
  max-height: min(480px, calc(100vh - 100px));
  max-height: min(480px, calc(100dvh - 100px));
  background: var(--av-panel);
  color: var(--av-text);
  border: 1px solid var(--av-border);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  display: none;
  flex-direction: column;
  z-index: 99999;
}

.av-panel.open {
  display: flex;
}

.av-panel-head {
  position: relative;
  border-radius: 11px 11px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--av-border);
  background: #1c1f24;
  flex-shrink: 0;
}

.av-panel-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
}

.av-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.av-info {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--av-muted);
}

.av-info svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.av-info:hover,
.av-info:focus {
  color: var(--av-accent);
}

/* Tooltip bubble under the header, hover or focus (focus covers touch taps) */
.av-info-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 14px;
  right: 14px;
  background: #24282e;
  border: 1px solid var(--av-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--av-text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  z-index: 2;
}

.av-info:hover ~ .av-info-tip,
.av-info:focus ~ .av-info-tip {
  opacity: 1;
  transform: translateY(0);
}

.av-sub {
  margin-top: 4px;
  font-size: 11px;
}

/* Idle is the machine's word for "nothing is happening", which the user
   can already see. Status only earns its space once a call is running. */
.av-status[data-state="idle"] {
  display: none;
}

.av-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--av-muted);
}

.av-status[data-state="live"],
.av-status[data-state="connecting"] {
  color: rgb(44 133 199); /* same blue as .contact_bt */
}

.av-status[data-state="error"] {
  color: var(--av-danger);
}

.av-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--av-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}

/* Nothing said yet, so the panel is just the consent box and one button. */
.av-transcript:empty {
  display: none;
}

.av-transcript {
  flex: 1 1 auto;
  min-height: 0; /* allow shrink in landscape */
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
}

.av-msg {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: pre-wrap;
  word-break: break-word;
}

.av-msg .av-role {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 3px;
}

/* You = the site's button blue (.contact_bt), agent = site card grey */
.av-msg.user {
  align-self: flex-end;
  max-width: 92%;
  background: rgb(44 133 199);
  border-color: rgb(44 133 199);
  color: #fff;
}

.av-msg.user .av-role {
  color: rgba(255, 255, 255, 0.85);
}

.av-msg.assistant {
  align-self: flex-start;
  max-width: 92%;
  background: #1e2126;
  border-color: #2d3238;
  color: var(--av-text);
}

.av-msg.system {
  align-self: center;
  color: var(--av-muted);
  font-size: 12px;
  text-align: center;
}

/* System lines are meta, not a speaker: the role badge only added noise. */
.av-msg.system .av-role {
  display: none;
}

.av-actions {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--av-border);
  flex-shrink: 0;
}

/* Composer: text + mic toggle + stop, one rounded bar */
.av-composer {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #202429;
  border: 1px solid var(--av-border);
  border-radius: 999px;
  padding: 5px 6px 5px 16px;
}

.av-text {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--av-text);
  font: inherit;
  font-size: 14px;
}

.av-text::placeholder {
  color: var(--av-muted);
}

.av-mic-btn,
.av-stop-btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--av-muted);
  padding: 0;
}

.av-mic-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.av-mic-btn:hover {
  background: #2a2f36;
}

.av-mic-btn.live {
  color: var(--av-accent);
}

.av-mic-btn.muted {
  color: var(--av-danger);
}

.av-mic-btn .av-ic-micoff {
  display: none;
}

.av-mic-btn.muted .av-ic-mic {
  display: none;
}

.av-mic-btn.muted .av-ic-micoff {
  display: block;
}

/* Stop: white disc, dark rounded square, ChatGPT voice style */
.av-stop-btn {
  background: #fff;
}

.av-stop-btn:hover {
  background: #e4e6e9;
}

.av-stop-square {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #17191d;
}

/* Phone / short landscape: keep actions visible */
@media (max-height: 480px) {
  .av-panel {
    bottom: 80px;
    max-height: calc(100dvh - 88px);
    width: min(400px, calc(100vw - 20px));
  }
  .av-transcript {
    padding: 8px 12px;
  }
  .av-actions {
    padding: 8px 12px 10px;
  }
}