/* Asti, the AsteriskAI mascot. One figure; the state only changes the eyes, the mouth or one arm. */
.asti {
  --asti-size: 3rem;
  --asti-face: #14161f; /* Stays dark in both themes: it sits on the orange hub, not on the page. */
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  color: var(--aai-ink);
}
.asti--sm { --asti-size: 2.25rem; gap: .6rem; }
.asti--lg { --asti-size: 4.75rem; gap: 1.1rem; }
.asti--solo { display: inline-flex; }

.asti-figure { width: var(--asti-size); height: var(--asti-size); flex-shrink: 0; color: var(--aai-star); overflow: visible; }
.asti-face { fill: var(--asti-face); stroke: var(--asti-face); }
.asti-eyes-open { stroke: none; }
.asti-mouth-open { fill: var(--asti-face); }

/* Transform origins: arms turn around the hub, eyes squash around their own centre. */
.asti-arms, .asti-arm { transform-box: view-box; transform-origin: 32px 32px; }
.asti-eyes { transform-box: fill-box; transform-origin: center; }

/* Expressions: everything hidden, then each state shows its eyes and mouth. */
.asti-eyes-happy, .asti-mouth { display: none; }
.asti[data-asti-state="default"] .asti-mouth-smile,
.asti[data-asti-state="thinking"] .asti-mouth-side,
.asti[data-asti-state="analyzing"] .asti-mouth-flat,
.asti[data-asti-state="explaining"] .asti-mouth-open,
.asti[data-asti-state="alert"] .asti-mouth-flat,
.asti[data-asti-state="greeting"] .asti-mouth-wide,
.asti[data-asti-state="success"] .asti-mouth-wide { display: inline; }
.asti[data-asti-state="greeting"] .asti-eyes-open,
.asti[data-asti-state="success"] .asti-eyes-open { display: none; }
.asti[data-asti-state="greeting"] .asti-eyes-happy,
.asti[data-asti-state="success"] .asti-eyes-happy { display: inline; }

/* Default and explaining: a rare, calm blink. */
.asti[data-asti-state="default"] .asti-eyes-open,
.asti[data-asti-state="explaining"] .asti-eyes-open { animation: asti-blink 7s ease-in-out 1.5s 4; }
/* Greeting: the upper-right arm waves twice. */
.asti[data-asti-state="greeting"] .asti-arm-60 { animation: asti-wave 1.5s ease-in-out .3s 2; }
/* Thinking: a slight tilt while the eyes glance up and aside. */
.asti[data-asti-state="thinking"] .asti-eyes-open { transform: translate(1.3px, -1.3px); animation: asti-look 4s ease-in-out .6s 2; }
.asti[data-asti-state="thinking"] .asti-arms { transform: rotate(-8deg); transition: transform .6s ease; }
/* Analyzing: focused eyes while the arms turn one step at a time; the face stays level. */
.asti[data-asti-state="analyzing"] .asti-eyes-open { transform: scaleY(.62); }
.asti[data-asti-state="analyzing"] .asti-arms { animation: asti-step 2.6s cubic-bezier(.65, 0, .35, 1) infinite; }
/* Explaining: the upper-right arm leans towards the message. */
.asti[data-asti-state="explaining"] .asti-arm-60 { transform: rotate(9deg) scale(1.06); transition: transform .5s ease; }
/* Alert: eyes open a touch wider and the figure gives a single small nudge. */
.asti[data-asti-state="alert"] .asti-eyes-open { transform: scale(1.12); }
.asti[data-asti-state="alert"] .asti-figure { animation: asti-nudge .5s ease-in-out .2s 1; }
/* Success: one celebratory turn of the arms. */
.asti[data-asti-state="success"] .asti-arms { animation: asti-step .9s cubic-bezier(.3, 1.4, .5, 1) .15s 1; }

@keyframes asti-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.12); } }
@keyframes asti-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(15deg); } 50% { transform: rotate(-4deg); } 75% { transform: rotate(11deg); } }
@keyframes asti-look { 0%, 100% { transform: translate(1.3px, -1.3px); } 50% { transform: translate(-1px, -1.3px); } }
@keyframes asti-step { 0% { transform: rotate(0); } 55%, 100% { transform: rotate(60deg); } }
@keyframes asti-nudge { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } 60% { transform: translateY(1px); } }

/* The message: a calm surface with a small tail towards Asti. */
.asti-bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 42rem;
  padding: .7rem 1rem;
  background: var(--aai-surface);
  border: 1px solid var(--aai-line);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(20, 22, 31, .04);
  font-size: .94rem;
  line-height: 1.45;
}
.asti-bubble::before {
  content: "";
  position: absolute;
  top: calc(var(--asti-size) / 2 - .4rem);
  left: -.42rem;
  width: .8rem;
  height: .8rem;
  background: inherit;
  border-left: 1px solid var(--aai-line);
  border-bottom: 1px solid var(--aai-line);
  transform: rotate(45deg);
  border-bottom-left-radius: .2rem;
}
.asti--sm .asti-bubble { padding: .5rem .85rem; font-size: .9rem; }
.asti--sm .asti-bubble::before { top: calc(var(--asti-size) / 2 - .4rem); }
.asti--lg .asti-bubble::before { top: 1.1rem; }
.asti[data-asti-dismissible] .asti-bubble { padding-right: 2.6rem; }
.asti[data-asti-state="alert"] .asti-bubble,
.asti[data-asti-state="alert"] .asti-bubble::before { border-color: color-mix(in srgb, var(--aai-warn) 50%, var(--aai-line)); }
.asti-message { margin: 0; }
.asti-message a, .asti-link { font-weight: 600; }

.asti-close {
  position: absolute;
  top: .35rem;
  right: .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: var(--aai-muted);
}
.asti-close:hover { background: var(--aai-surface-2); color: var(--aai-ink); }
.asti-close .icon { width: 1rem; height: 1rem; }

/* Remembered dismissals: with scripts on, dismissible tips wait until asti.js has checked them. */
.js .asti[data-asti-key]:not(.is-ready) { display: none; }
html:not(.js) .asti-close { display: none !important; }
.asti.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }

/* The companion: Asti floats over the app, free of any card, with its message just above. */
.asti-companion {
  --asti-size: 4.4rem;
  --asti-look-x: 0px;
  --asti-look-y: 0px;
  position: fixed;
  right: 1.25rem;
  bottom: 1.1rem;
  z-index: 1040;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  pointer-events: none;
}
.asti-companion[hidden] { display: none; }
.asti-companion > * { pointer-events: auto; }
.asti-companion .asti-face { transform: translate(var(--asti-look-x), var(--asti-look-y)); transition: transform .35s ease-out; }
.asti-companion-toggle {
  display: inline-flex;
  padding: .2rem;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 6px 14px rgba(20, 22, 31, .18));
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
[data-bs-theme="dark"] .asti-companion-toggle { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5)); }
.asti-companion-toggle:hover { transform: translateY(-3px) rotate(-6deg); }
.asti-companion-toggle:active { transform: scale(.94); }
.asti-companion .asti-figure { animation: asti-float 5s ease-in-out 1s 3; }
.asti-companion.is-collapsed .asti-figure { --asti-size: 3.6rem; }

.asti-companion-bubble {
  position: relative;
  width: min(21.5rem, calc(100vw - 2.5rem));
  margin-right: 1.1rem;
  padding: .8rem 2.6rem .85rem 1rem;
  background: var(--aai-surface);
  border: 1px solid var(--aai-line);
  border-radius: 1.1rem 1.1rem .3rem 1.1rem;
  box-shadow: var(--aai-shadow);
  font-size: .93rem;
  line-height: 1.45;
  transform-origin: bottom right;
}
.asti-companion.is-collapsed .asti-companion-bubble { display: none; }
.asti-companion[data-asti-state="alert"] .asti-companion-bubble { border-color: color-mix(in srgb, var(--aai-warn) 55%, var(--aai-line)); }
.asti-companion.is-touring .asti-message { display: none; }
.asti-companion.is-entering { animation: asti-enter .7s cubic-bezier(.2, .9, .3, 1.15) both; }
.asti-companion.is-entering .asti-arms { animation: asti-step .9s cubic-bezier(.3, 1.3, .5, 1) .25s 1; }
.asti-companion-bubble.is-new { animation: asti-pop .35s ease both; }

@keyframes asti-enter { from { opacity: 0; transform: translateY(2rem) scale(.85); } }
@keyframes asti-pop { from { opacity: 0; transform: translateY(.4rem) scale(.96); } }
@keyframes asti-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

body.has-asti .toast-zone { bottom: 6.5rem; }

/* First-visit tour, inside the companion's bubble: a few short, skippable steps. Never a modal. */
.asti-tour-count { font-size: .76rem; font-weight: 650; color: var(--aai-muted); letter-spacing: .02em; }
.asti-tour-title { font-size: 1.02rem; font-weight: 700; margin: .1rem 0 .3rem; letter-spacing: -.015em; }
.asti-tour-title:focus { outline: none; }
.asti-tour-text { color: var(--aai-muted); margin: 0; font-size: .92rem; }
.asti-tour-step[hidden], .asti-tour[hidden] { display: none; }
.asti-tour-footer { display: flex; align-items: center; gap: .35rem; margin: .9rem -1.6rem 0 0; flex-wrap: wrap; }
.asti-tour-footer .btn { padding: .35rem .75rem; }
.asti-tour-dots { display: flex; gap: .3rem; margin-right: auto; }
.asti-tour-dots span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--aai-line); transition: background-color .2s ease, width .2s ease; }
.asti-tour-dots span.is-current { width: 1.1rem; border-radius: 1rem; background: var(--aai-accent); }

@media (max-width: 575.98px) {
  .asti--md { --asti-size: 2.5rem; gap: .65rem; }
  .asti--lg { --asti-size: 3.25rem; }
  .asti-companion { --asti-size: 3.1rem; right: .75rem; bottom: .75rem; }
  .asti-companion.is-collapsed .asti-figure { --asti-size: 2.6rem; }
  .asti-companion-bubble { width: calc(100vw - 1.5rem); margin-right: 0; }
  body.has-asti { padding-bottom: 4rem; }
  body.has-asti .toast-zone { bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .asti *, .asti { animation: none !important; transition: none !important; }
}
@media print {
  .asti { display: none !important; }
}