:root {
  --ara-wine: #741d35;
  --ara-coral: #f26d50;
  --ara-gold: #f4b942;
  --ara-cream: #fff2d8;
  --ara-night: #160d10;
  --ara-teal: #27a69d;
}

.ara-assistant {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 8800;
  font-family: inherit;
}

.ara-stage {
  position: fixed;
  right: 22px;
  bottom: 92px;
  width: min(620px, calc(100vw - 44px));
  height: 470px;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px) scale(.96);
  transform-origin: right bottom;
  transition: opacity 1100ms ease, transform 1700ms cubic-bezier(.2,.82,.2,1), visibility 0s linear 1750ms;
}

.ara-assistant.is-open .ara-stage {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.ara-magic-aura {
  position: absolute;
  right: 17px;
  bottom: -42px;
  width: 220px;
  height: 135px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,217,120,.7), rgba(244,185,66,.2) 42%, transparent 70%);
  filter: blur(10px);
  opacity: 0;
  transform: scale(.3);
}

.ara-assistant.is-open .ara-magic-aura {
  opacity: 1;
  transform: scale(1);
  transition: opacity 900ms 140ms ease, transform 1200ms cubic-bezier(.2,.9,.2,1);
}

.ara-fairy {
  position: absolute;
  right: 6px;
  bottom: -3px;
  width: 225px;
  aspect-ratio: 2 / 3;
  opacity: 0;
  transform: translateY(110px) scale(.15) rotate(7deg);
  filter: drop-shadow(0 17px 28px rgba(22,13,16,.36)) drop-shadow(0 0 22px rgba(244,185,66,.26));
  transform-origin: 50% 100%;
  transition: opacity 1250ms ease, transform 2100ms cubic-bezier(.18,.78,.2,1);
}

.ara-fairy img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ara-assistant.is-open .ara-fairy {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
  transition: opacity 1200ms 520ms ease, transform 2250ms 360ms cubic-bezier(.15,.82,.18,1.04);
  animation: ara-hover 7.2s 2.7s ease-in-out infinite;
}

.ara-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ara-gold);
  box-shadow: 0 0 14px var(--ara-gold), 0 0 25px rgba(255,242,216,.8);
  opacity: 0;
}

.ara-spark-one { left: 8%; top: 33%; animation: ara-spark 2.5s 1.7s ease-in-out infinite; }
.ara-spark-two { right: 4%; top: 25%; animation: ara-spark 3.1s 2.1s ease-in-out infinite; }
.ara-spark-three { right: 17%; bottom: 15%; animation: ara-spark 2.8s 2.4s ease-in-out infinite; }

.ara-dialog {
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 390px;
  padding: 22px;
  border: 1px solid rgba(255,242,216,.22);
  border-radius: 26px;
  color: var(--ara-cream);
  background: linear-gradient(145deg, rgba(39,19,25,.97), rgba(22,13,16,.985));
  box-shadow: 0 24px 70px rgba(22,13,16,.42), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(1.2);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 900ms ease, transform 1250ms cubic-bezier(.2,.75,.2,1);
}

.ara-assistant.is-open .ara-dialog {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 900ms 1050ms ease, transform 1250ms 900ms cubic-bezier(.2,.78,.2,1);
}

.ara-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ara-kicker {
  margin: 0 0 6px;
  color: var(--ara-gold);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .15em;
}

.ara-dialog h2 {
  margin: 0;
  color: var(--ara-cream);
  font-family: inherit;
  font-size: 1.28rem;
  line-height: 1.15;
}

.ara-close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255,242,216,.18);
  border-radius: 50%;
  color: var(--ara-cream);
  background: rgba(255,255,255,.05);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}

.ara-status {
  min-height: 18px;
  margin: 15px 0 7px;
  color: #ffd978;
  font-size: .78rem;
  font-weight: 780;
}

.ara-status::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.ara-assistant.is-listening .ara-status { color: #6fe0d8; }
.ara-assistant.is-speaking .ara-status { color: #ffb19d; }

.ara-transcript {
  max-height: 118px;
  min-height: 74px;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid rgba(255,242,216,.1);
  border-radius: 16px;
  color: rgba(255,242,216,.78);
  background: rgba(255,242,216,.045);
  scrollbar-width: thin;
}

.ara-transcript p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.52;
}

.ara-transcript .ara-assistant-line { color: var(--ara-cream); }
.ara-transcript .ara-user-line { margin-bottom: 7px; color: #8fe5df; }

.ara-actions {
  display: flex;
  min-height: 0;
}

.ara-actions:not(:empty) { margin-top: 9px; }

.ara-context-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-top: 0;
  padding: 7px 11px;
  border: 1px solid rgba(255,217,120,.38);
  border-radius: 999px;
  color: #2a1418;
  background: linear-gradient(135deg, var(--ara-gold), #ffd978);
  box-shadow: 0 7px 18px rgba(22,13,16,.22);
  font-size: .74rem;
  font-weight: 880;
  line-height: 1.2;
  text-decoration: none;
}

.ara-context-link:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ara-context-link:focus-visible { outline: 3px solid #6fe0d8; outline-offset: 2px; }

.ara-controls {
  display: flex;
  gap: 9px;
  margin-top: 13px;
}

.ara-control {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(255,242,216,.18);
  border-radius: 999px;
  color: var(--ara-cream);
  background: rgba(255,255,255,.06);
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
}

.ara-control-primary {
  border-color: transparent;
  color: #2a1418;
  background: linear-gradient(135deg, var(--ara-gold), #ffd978);
}

.ara-control:disabled { opacity: .42; cursor: not-allowed; }

.ara-privacy {
  margin: 10px 2px 0;
  color: rgba(255,242,216,.5);
  font-size: .67rem;
  line-height: 1.4;
}

.ara-flower {
  position: relative;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid rgba(255,242,216,.56);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffd978, #f26d50 46%, #741d35 100%);
  box-shadow: 0 12px 32px rgba(22,13,16,.3), 0 0 0 6px rgba(244,185,66,.11);
  cursor: pointer;
  isolation: isolate;
}

.ara-flower:focus-visible,
.ara-control:focus-visible,
.ara-close:focus-visible {
  outline: 3px solid #6fe0d8;
  outline-offset: 3px;
}

.ara-flower-glow {
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,217,120,.58), transparent 65%);
  opacity: .58;
  animation: ara-pulse 2.8s ease-in-out infinite;
}

.ara-petal {
  position: absolute;
  left: 23px;
  top: 11px;
  width: 22px;
  height: 31px;
  border: 1px solid rgba(255,242,216,.72);
  border-radius: 70% 20% 70% 24%;
  background: linear-gradient(145deg, rgba(255,217,120,.98), rgba(242,109,80,.98) 54%, rgba(116,29,53,.98));
  box-shadow: inset 3px 3px 8px rgba(255,255,255,.34);
  transform-origin: 50% 90%;
  transition: transform 1750ms cubic-bezier(.2,.82,.18,1.04), filter 1100ms ease;
}

.ara-petal-one { transform: rotate(-12deg) translateY(5px) scale(.92); }
.ara-petal-two { transform: rotate(78deg) translateY(5px) scale(.92); }
.ara-petal-three { transform: rotate(168deg) translateY(5px) scale(.92); }
.ara-petal-four { transform: rotate(258deg) translateY(5px) scale(.92); }

.ara-assistant.is-open .ara-petal-one { transform: rotate(-48deg) translateY(-7px) scale(1.02); }
.ara-assistant.is-open .ara-petal-two { transform: rotate(55deg) translateY(-8px) scale(1.02); }
.ara-assistant.is-open .ara-petal-three { transform: rotate(145deg) translateY(-8px) scale(1.02); }
.ara-assistant.is-open .ara-petal-four { transform: rotate(238deg) translateY(-8px) scale(1.02); }

.ara-flower-heart {
  position: relative;
  z-index: 2;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff9de, #f4b942 55%, #9c5121);
  box-shadow: 0 0 13px rgba(255,242,216,.85);
}

.ara-flower-label {
  position: absolute;
  right: 78px;
  top: 50%;
  width: max-content;
  padding: 8px 12px;
  border: 1px solid rgba(255,242,216,.25);
  border-radius: 999px;
  color: var(--ara-cream);
  background: rgba(22,13,16,.9);
  box-shadow: 0 8px 24px rgba(22,13,16,.22);
  font-size: .72rem;
  font-weight: 850;
  transform: translateY(-50%);
}

@keyframes ara-hover {
  0%, 100% { translate: 0 0; rotate: -.8deg; scale: 1; }
  25% { translate: -3px -7px; rotate: .2deg; scale: 1.006; }
  50% { translate: 1px -14px; rotate: .9deg; scale: 1.012; }
  75% { translate: 4px -6px; rotate: -.1deg; scale: 1.005; }
}

@keyframes ara-spark {
  0%, 100% { opacity: 0; transform: translateY(8px) scale(.5); }
  35% { opacity: .95; }
  70% { opacity: .18; transform: translateY(-20px) scale(1.15); }
}

@keyframes ara-pulse {
  0%, 100% { opacity: .4; transform: scale(.9); }
  50% { opacity: .78; transform: scale(1.12); }
}

@media (max-width: 680px) {
  .ara-assistant { right: 14px; bottom: 14px; }
  .ara-stage {
    left: 12px;
    right: 12px;
    bottom: 78px;
    width: auto;
    height: min(520px, calc(100vh - 98px));
  }
  .ara-fairy {
    right: 16px;
    bottom: auto;
    top: -5px;
    width: 126px;
  }
  .ara-magic-aura { right: 4px; bottom: auto; top: 170px; width: 155px; height: 90px; }
  .ara-dialog {
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 19px;
    border-radius: 22px;
  }
  .ara-dialog-head { padding-right: 118px; min-height: 75px; }
  .ara-transcript { max-height: 96px; min-height: 68px; }
  .ara-flower { width: 60px; height: 60px; }
  .ara-petal { left: 20px; top: 10px; width: 20px; height: 27px; }
  .ara-flower-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ara-stage,
  .ara-dialog,
  .ara-fairy,
  .ara-magic-aura,
  .ara-petal { transition-duration: 1ms !important; transition-delay: 0s !important; }
  .ara-fairy,
  .ara-spark,
  .ara-flower-glow { animation: none !important; }
}