/* Aria docked chat — pill and panel, fixed to the lower-right of every page. */
.aria-dock {
  --aria-bg: #0f1420;
  --aria-panel: #151b29;
  --aria-panel-2: #1c2333;
  --aria-line: rgba(255, 255, 255, 0.12);
  --aria-text: #f5f7fa;
  --aria-muted: #b9bdc5;
  --aria-accent: #e8b830;
  --aria-accent-2: #b98513;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  font-size: 14px;
  color: var(--aria-text);
}
.aria-dock [hidden] { display: none !important; }
.aria-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The resting state: a small pill with Aria's face on it. */
.aria-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 8px;
  border: 1px solid var(--aria-line);
  border-radius: 999px;
  background: linear-gradient(160deg, var(--aria-panel), var(--aria-bg));
  color: var(--aria-text);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.aria-pill:hover { border-color: var(--aria-accent); }
.aria-pill img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.aria-pill .aria-pill-spark { color: var(--aria-accent); }

/* The open state: a docked conversation panel. */
.aria-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 24px));
  height: min(600px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid var(--aria-line);
  border-radius: 18px;
  background: var(--aria-bg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.aria-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--aria-line);
  background: var(--aria-panel);
}
.aria-head img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}
.aria-head-copy { display: grid; min-width: 0; }
.aria-head-copy strong { font-size: 15px; }
.aria-head-copy span {
  overflow: hidden;
  color: var(--aria-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aria-collapse {
  margin-left: auto;
  padding: 4px 12px;
  border: 1px solid var(--aria-line);
  border-radius: 999px;
  background: transparent;
  color: var(--aria-muted);
  font-size: 12px;
  cursor: pointer;
}
.aria-collapse:hover { color: var(--aria-text); border-color: var(--aria-accent); }

.aria-transcript {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.aria-message { max-width: 88%; }
.aria-message-body {
  padding: 8px 12px;
  border-radius: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.aria-message.assistant { align-self: flex-start; }
.aria-message.assistant .aria-message-body {
  border: 1px solid var(--aria-line);
  background: var(--aria-panel-2);
}
.aria-message.assistant .aria-link {
  color: var(--aria-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aria-message.assistant .aria-link:hover,
.aria-message.assistant .aria-link:focus-visible { color: #fff; }
.aria-message.user { align-self: flex-end; }
.aria-message.user .aria-message-body {
  background: linear-gradient(160deg, var(--aria-accent), var(--aria-accent-2));
  color: #201705;
}
.aria-message.streaming .aria-message-body::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--aria-accent);
  vertical-align: baseline;
  animation: aria-pulse 1.1s ease-in-out infinite;
}
@keyframes aria-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

.aria-composer-wrap {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--aria-line);
  background: var(--aria-panel);
}
.aria-status {
  margin: 0 0 6px;
  color: var(--aria-muted);
  font-size: 12px;
}
.aria-status.error { color: #f3a09a; }
.aria-composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 6px;
  border: 1px solid var(--aria-line);
  border-radius: 14px;
  background: var(--aria-panel-2);
}
.aria-composer:focus-within { border-color: var(--aria-accent); }
.aria-composer textarea {
  width: 0;
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--aria-text);
  font: inherit;
  line-height: 1.4;
  resize: none;
  outline: none;
}
.aria-composer textarea::placeholder { color: var(--aria-muted); }
.aria-send,
.aria-stop {
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}
.aria-send {
  border: 0;
  background: linear-gradient(160deg, var(--aria-accent), var(--aria-accent-2));
  color: #201705;
}
.aria-send:disabled { opacity: 0.45; cursor: default; }
.aria-stop {
  border: 1px solid var(--aria-accent);
  background: transparent;
  color: var(--aria-accent);
}

.aria-icon {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--aria-line);
  border-radius: 999px;
  background: transparent;
  color: var(--aria-muted);
  font-size: 12px;
  cursor: pointer;
}
.aria-icon:hover { color: var(--aria-text); border-color: var(--aria-accent); }
.aria-icon[aria-pressed="true"] {
  border-color: var(--aria-accent);
  color: var(--aria-accent);
}
.aria-collapse { margin-left: 0; }

/*
 * The portrait stage. The idle image, the idle loop and the spoken video occupy
 * the same box so the swap between them never moves the transcript, and
 * whichever is live fills it without cropping the face.
 */
.aria-portrait {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--aria-line);
  background: #000;
}
.aria-portrait-idle,
.aria-portrait-loop,
.aria-portrait-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The loop is layered over the still rather than swapped with it. The picture
   stays underneath for the whole visit, so a loop that has not started yet, one
   the browser will not autoplay, and one that never loads all show as her
   photograph instead of an empty box -- and fading it in rather than toggling
   `hidden` keeps the clip rendered, which is what lets the browser decode it
   and report back that it is playing. It is decoration over the picture that
   carries the alt text, so it takes no pointer and no focus. */
.aria-portrait-loop {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms linear;
}
.aria-portrait-loop.playing { opacity: 1; }
.aria-portrait.speaking { box-shadow: inset 0 0 0 2px var(--aria-accent); }
.aria-portrait-state {
  position: absolute;
  right: 8px;
  bottom: 6px;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--aria-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.aria-portrait.speaking .aria-portrait-state { color: var(--aria-accent); }
/* Why the picture is still while she is speaking. It sits along the top of the
   portrait, over the working room above her hair rather than her face, and out
   of the way of the state pill in the opposite corner. It only exists on a turn
   that needs it. */
.aria-portrait-notice {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--aria-accent);
  font-size: 11px;
  line-height: 1.4;
}

.aria-voice {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.aria-voice-button {
  flex: 1;
  height: 30px;
  border: 1px solid var(--aria-line);
  border-radius: 999px;
  background: transparent;
  color: var(--aria-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.aria-voice-button:hover:not(:disabled) { color: var(--aria-text); border-color: var(--aria-accent); }
.aria-voice-button:disabled { opacity: 0.45; cursor: default; }
.aria-voice-button.active {
  border-color: var(--aria-accent);
  background: rgba(232, 184, 48, 0.16);
  color: var(--aria-accent);
}

/* The onboarding card sits over the whole panel until played or skipped. */
.aria-onboarding {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 20px;
  background: rgba(11, 15, 24, 0.94);
  text-align: center;
}
.aria-onboarding h3 { margin: 0; font-size: 18px; }
.aria-onboarding p {
  margin: 0;
  max-width: 30ch;
  color: var(--aria-muted);
  line-height: 1.5;
}
.aria-onboarding video {
  width: 100%;
  max-width: 300px;
  border: 1px solid var(--aria-line);
  border-radius: 14px;
  background: #000;
}
.aria-onboarding-start {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--aria-accent), var(--aria-accent-2));
  color: #201705;
  font-weight: 700;
  cursor: pointer;
  animation: aria-cta 1.6s ease-in-out infinite;
}
@keyframes aria-cta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 184, 48, 0.45); }
  50% { box-shadow: 0 0 0 9px rgba(232, 184, 48, 0); }
}
.aria-onboarding-skip {
  border: 0;
  background: transparent;
  color: var(--aria-muted);
  text-decoration: underline;
  cursor: pointer;
}
.aria-onboarding-skip:hover { color: var(--aria-text); }

@media (prefers-reduced-motion: reduce) {
  .aria-message.streaming .aria-message-body::after { animation: none; }
  .aria-onboarding-start { animation: none; }
  .aria-portrait.speaking { box-shadow: none; }
  /* A visitor who has asked for less motion gets the photograph. The panel also
     never fetches the clip for them; this is the belt to that pair of braces. */
  .aria-portrait-loop, .aria-portrait-loop.playing { opacity: 0; }
}