:root {
  --orni-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --orni-ink: #22333d;
  --orni-bubble: #ffffff;
  --orni-bubble-border: rgba(35, 52, 62, 0.16);
  --orni-focus: #1769aa;
  --orni-launcher-width: clamp(3.8rem, 5.6vw, 4.8rem);
  --orni-launcher-height: clamp(8rem, 14.4vw, 10.4rem);
  --orni-edge-gap: clamp(0.75rem, 2vw, 1.5rem);
  --orni-layer: 2147482900;
}

.orni-chatbot,
.orni-chatbot *,
.orni-chatbot *::before,
.orni-chatbot *::after {
  box-sizing: border-box;
}

.orni-doc-page {
  margin: 0;
  color: #26343d;
  background: #f8f9f9;
  font-family: var(--orni-font);
}

.orni-example-page {
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(2rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem);
}

.orni-example-page h1 {
  margin: 0 0 1rem;
  color: #17222b;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.04em;
}

.orni-example-page p {
  max-width: 42rem;
  color: #53616c;
  font-size: 1.05rem;
  line-height: 1.7;
}

.orni-example-page a {
  color: #145b8c;
}

.orni-example-page__eyebrow {
  margin-bottom: 0.6rem !important;
  color: #6c7a83 !important;
  font-size: 0.78rem !important;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.orni-chatbot {
  --orni-safe-top: env(safe-area-inset-top, 0px);
  --orni-safe-right: env(safe-area-inset-right, 0px);
  --orni-safe-bottom: env(safe-area-inset-bottom, 0px);
  --orni-safe-left: env(safe-area-inset-left, 0px);
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: var(--orni-layer);
  right: max(var(--orni-edge-gap), env(safe-area-inset-right));
  bottom: max(var(--orni-edge-gap), env(safe-area-inset-bottom));
  width: var(--orni-launcher-width);
  height: auto;
  pointer-events: none;
  isolation: isolate;
}

html.intro-pending .orni-chatbot,
html.intro-playing .orni-chatbot {
  visibility: hidden;
}
html.intro-pending .orni-chatbot__bubble,
html.intro-playing .orni-chatbot__bubble {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
  transition: none;
}

html.orni-session-dismissed .orni-chatbot,
.orni-chatbot[hidden],
.orni-chatbot__dismiss[hidden],
.orni-restore[hidden] { display: none; }
.orni-chatbot__dismiss {
  position: absolute;
  top: 0;
  right: -2px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(35, 52, 62, .14);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #596168;
  font: 20px/1 var(--orni-font);
  opacity: .5;
  cursor: pointer;
  pointer-events: auto;
}
.orni-chatbot__dismiss:hover,
.orni-chatbot__dismiss:focus-visible { color: #22333d; background: #fff; opacity: 1; }
.orni-chatbot__dismiss:focus-visible,
.orni-restore:focus-visible { outline: 2px solid var(--orni-focus); outline-offset: 3px; }
.orni-chatbot.is-dragging .orni-chatbot__dismiss { visibility: hidden; }
.footer-explore .orni-restore {
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 5px 13px 5px 7px;
  border: 1px solid #717579;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: 13px/1.3 Arial, Helvetica, sans-serif;
  text-align: left;
  cursor: pointer;
}
.footer-explore .orni-restore:not([hidden]) { display: inline-flex; }
.footer-explore .orni-restore:hover { background: #88888812; border-color: currentColor; }
.orni-restore__icon { display: block; flex: 0 0 30px; width: 30px; height: 34px; overflow: hidden; }
.orni-restore__icon img { display: block; width: 30px; height: 34px; object-fit: cover; object-position: 50% 25%; }

.orni-chatbot__launcher,
.orni-chatbot__bubble-open {
  margin: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.orni-chatbot__launcher {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 var(--orni-launcher-height);
  width: var(--orni-launcher-width);
  height: var(--orni-launcher-height);
  min-width: 0;
  min-height: 3.5rem;
  padding: 0;
  border-radius: 1.5rem;
  background: transparent;
  pointer-events: auto;
  place-items: center;
  filter: drop-shadow(0 0.7rem 0.8rem rgba(22, 33, 40, 0.18));
  transition: transform 180ms ease, filter 180ms ease;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.orni-chatbot__launcher:hover {
  transform: translateY(-0.2rem) scale(1.02);
  filter: drop-shadow(0 0.9rem 1rem rgba(22, 33, 40, 0.23));
}

.orni-chatbot__launcher:active {
  transform: translateY(0) scale(0.98);
}

.orni-chatbot.is-dragging .orni-chatbot__launcher {
  cursor: grabbing;
  transform: none;
  transition: none;
}
.orni-chatbot.is-dragging .orni-chatbot__bubble {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none;
}
.orni-chatbot[data-bubble-placement="left"] .orni-chatbot__bubble::after {
  left: auto;
  right: -8px;
  top: calc(var(--orni-tail-y, 50%) - 8px);
  bottom: auto;
  transform: rotate(-45deg);
}
.orni-chatbot[data-bubble-placement="right"] .orni-chatbot__bubble::after {
  left: -8px;
  right: auto;
  top: calc(var(--orni-tail-y, 50%) - 8px);
  bottom: auto;
  transform: rotate(135deg);
}
.orni-chatbot[data-bubble-placement="above"] .orni-chatbot__bubble::after,
.orni-chatbot[data-bubble-placement="below"] .orni-chatbot__bubble::after {
  left: calc(var(--orni-tail-x, 50%) - 8px);
  right: auto;
}
.orni-chatbot[data-bubble-placement="above"] .orni-chatbot__bubble::after {
  top: auto;
  bottom: -8px;
  transform: rotate(45deg);
}
.orni-chatbot[data-bubble-placement="below"] .orni-chatbot__bubble::after {
  top: -8px;
  bottom: auto;
  transform: rotate(225deg);
}

.orni-chatbot__launcher:focus-visible,
.orni-chatbot__bubble-open:focus-visible {
  outline: 3px solid var(--orni-focus);
  outline-offset: 4px;
}

.orni-chatbot__sound {
  position: relative;
  z-index: 3;
  flex: 0 0 28px;
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #49453f;
  box-shadow: none;
  cursor: pointer;
}
.orni-chatbot__sound[hidden] { display: none; }
.orni-chatbot__sound svg { width: 15px; height: 15px; opacity: .95; stroke-width: 2.1; }
.orni-chatbot__sound:hover,
.orni-chatbot__sound:focus-visible { color: #393632; background: transparent; }
.orni-chatbot__sound:hover svg,
.orni-chatbot__sound:focus-visible svg { opacity: 1; }
.orni-chatbot__sound:focus-visible { outline: 3px solid var(--orni-focus); outline-offset: 3px; }
.orni-chatbot__sound .orni-sound-waves,
.orni-chatbot__sound[aria-pressed="true"] .orni-sound-off { display: none; }
.orni-chatbot__sound[aria-pressed="true"] .orni-sound-waves { display: block; }
.orni-chatbot.is-dragging .orni-chatbot__sound { visibility: hidden; }

.orni-chatbot__visual {
  /* Keep the image's intrinsic height from expanding a grid track past Orni. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 97%;
  pointer-events: none;
}

/* Only the artwork hops: the button, saved position and hit area stay still. */
.orni-chatbot__visual.is-hopping {
  animation: orni-little-hop 780ms cubic-bezier(.3, .05, .3, 1) both;
}
@keyframes orni-little-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  15% { transform: translateY(1px) scale(1.025, .97); }
  42% { transform: translateY(-10px) scale(.985, 1.025); }
  66% { transform: translateY(0) scale(1.035, .965); }
  83% { transform: translateY(-2px) scale(.995, 1.005); }
}

.orni-chatbot__gaze {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease;
}
.orni-chatbot[data-gaze-active="true"][data-eye-state="open"] .orni-chatbot__gaze {
  opacity: 1;
}
.orni-chatbot[data-eye-state="closed"] .orni-chatbot__gaze,
.orni-chatbot[data-eye-state="wink"] .orni-chatbot__gaze {
  transition: none;
}

.orni-chatbot__mascot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 55ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.orni-chatbot__mascot--frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.orni-chatbot[data-eye-state="closed"] .orni-chatbot__mascot--open,
.orni-chatbot[data-eye-state="wink"] .orni-chatbot__mascot--open {
  opacity: 0;
}

.orni-chatbot[data-eye-state="closed"] .orni-chatbot__mascot--closed,
.orni-chatbot[data-eye-state="wink"] .orni-chatbot__mascot--wink {
  opacity: 1;
}

.orni-chatbot__bubble {
  position: absolute;
  right: calc(100% - 0.65rem);
  bottom: 64%;
  z-index: 1;
  display: grid;
  min-width: 12rem;
  min-height: 4.6rem;
  padding: 0.8rem 1.15rem 0.85rem;
  border: 1px solid var(--orni-bubble-border);
  border-radius: 1.5rem;
  color: var(--orni-ink);
  background: var(--orni-bubble);
  box-shadow: 0 0.9rem 2.4rem rgba(24, 38, 48, 0.16), 0 0.2rem 0.7rem rgba(24, 38, 48, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  place-content: center;
  font-family: var(--orni-font);
  transform: translateY(0.45rem) scale(0.97);
  transform-origin: right bottom;
  transition:
    opacity 1500ms ease,
    transform 1500ms cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s linear 1500ms,
    box-shadow 180ms ease;
}

.orni-chatbot__bubble-open {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  text-align: left;
}
.orni-chatbot__bubble-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 6px;
}
.orni-chatbot__bubble-meta { flex: 1; min-width: 0; }

/* Der Zeiger sitzt an der Orni zugewandten Kante der runden Sprechblase. */
.orni-chatbot__bubble::after {
  content: "";
  position: absolute;
  right: -8px;
  top: calc(var(--orni-tail-y, 50%) - 8px);
  width: 16px;
  height: 16px;
  border-right: 1px solid var(--orni-bubble-border);
  border-bottom: 1px solid var(--orni-bubble-border);
  border-bottom-right-radius: 3px;
  background: var(--orni-bubble);
  transform: rotate(-45deg);
  transform-origin: center;
}

.orni-chatbot__bubble:hover {
  box-shadow: 0 1rem 2.7rem rgba(24, 38, 48, 0.2), 0 0.2rem 0.8rem rgba(24, 38, 48, 0.1);
}

.orni-chatbot__bubble.is-fading { pointer-events: auto; }

.orni-chatbot__bubble.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity 800ms ease,
    transform 800ms cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s,
    box-shadow 180ms ease;
}

.orni-chatbot__bubble-line {
  position: relative;
  z-index: 1;
  display: block;
  white-space: nowrap;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.28;
  text-align: left;
}

.orni-chatbot__bubble-line--lead {
  font-size: 1.08rem;
  font-weight: 800;
}

.orni-chatbot__sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 35rem) {
  :root {
    --orni-launcher-width: clamp(3.4rem, 16.8vw, 4rem);
    --orni-launcher-height: clamp(6.8rem, 34.4vw, 8rem);
    --orni-edge-gap: 0.75rem;
  }

  .orni-chatbot__bubble {
    right: calc(100% - 0.5rem);
    bottom: 68%;
    min-width: 10.9rem;
    min-height: 4.25rem;
    padding: 0.7rem 1rem 0.75rem;
    border-radius: 1.4rem;
  }

  .orni-chatbot__bubble-line {
    font-size: 0.9rem;
  }

  .orni-chatbot__bubble-line--lead {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orni-chatbot__visual.is-hopping { animation: none; }
  .orni-chatbot__gaze { display: none; }
  .orni-chatbot__launcher,
  .orni-chatbot__bubble,
  .orni-chatbot__bubble.is-visible,
  .orni-chatbot__mascot {
    transition: none;
  }

  .orni-chatbot__launcher:hover,
  .orni-chatbot__launcher:active {
    transform: none;
  }
}

/* History shares the bubble's visibility; it is never a separate floating box. */
.orni-chatbot__usage {
  position: relative;
  display: block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #6b7379;
  text-align: left;
  font: 10px/1.3 var(--orni-font);
  letter-spacing: 0;
  box-shadow: none;
}
.orni-chatbot__usage span { display:inline; }
.orni-chatbot__usage strong { display:inline; margin-left:3px; font-weight:400; white-space:nowrap; }
.orni-chatbot__usage[hidden] { display:none; }

/* Visible before opening the external chat, with no unverified quota number. */
.orni-chatbot__bubble-line--note {
  max-width: 27ch;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  color: #72777b;
  white-space: normal;
  font-size: 7.5px;
  font-weight: 400;
  line-height: 1.25;
}
#orni-dialog .orni-volume-note { font-size: 9px; line-height: 1.35; color: #72777b; }