/* ════════════════════════════════════════════════════
   orb.css — the persistent Lani orb + mini-chat popover + avatar face
   Spec: docs/plans/sanity_spec_v2/ (Lani Intro step 5 / integration §2a).
   Colors are the spec's brand values (the orb is the Lani entity, not a
   skinnable surface); everything else leans on shell tokens.
   ════════════════════════════════════════════════════ */

.lani-orb {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 66px;
    height: 66px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    z-index: 880;
    transition: transform 160ms ease, opacity 200ms ease, width 200ms ease, height 200ms ease;
}
.lani-orb__core {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #8ab4ff, #3b82f6 45%, #9333ea 100%);
    box-shadow: 0 0 28px rgba(59, 130, 246, 0.65), inset 0 2px 10px rgba(255, 255, 255, 0.4);
}
.lani-orb__halo {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.6), rgba(217, 70, 239, 0.3), transparent 70%);
    filter: blur(9px);
    animation: lani-orb-pulse 2.6s ease-in-out infinite;
    pointer-events: none;
}
.lani-orb__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(126, 176, 255, 0.5);
    animation: lani-orb-ring 2.8s ease-out infinite;
    pointer-events: none;
}
.lani-orb--pressed .lani-orb__core { transform: scale(0.92); }
.lani-orb--chatting .lani-orb__halo { animation-duration: 1.4s; }

/* Collapsed while the docked sidebar owns the conversation. */
.lani-orb--docked {
    width: 34px;
    height: 34px;
    right: 22px;
    bottom: 22px;
    opacity: 0.55;
}
.lani-orb--docked .lani-orb__halo,
.lani-orb--docked .lani-orb__ring { display: none; }

@keyframes lani-orb-pulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.08); }
}
@keyframes lani-orb-ring {
    0%   { transform: scale(1);    opacity: 0.65; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* ── Hint bubble (one-time, post-intro) ── */
.lani-orb-hint {
    position: fixed;
    right: 30px;
    bottom: 108px;
    max-width: 250px;
    padding: 11px 30px 11px 14px;
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 14px 14px 4px 14px;
    background: rgba(18, 18, 26, 0.95);
    color: #d8dbe4;
    font-size: 13px;
    line-height: 1.45;
    z-index: 885;
}
.lani-orb-hint b { color: #fff; font-weight: 600; }
.lani-orb-hint__close {
    position: absolute;
    top: 5px;
    right: 7px;
    border: none;
    background: transparent;
    color: #8a8f9c;
    font-size: 14px;
    cursor: pointer;
}

/* ── Mini-chat popover (adopts the assistant surface) ── */
.lani-orb-popover {
    position: fixed;
    right: 30px;
    bottom: 108px;
    width: 360px;
    /* DEFINITE height, not max-height. The adopted assistant surface is a
       column-flex chain that only collapses its message list into an internal
       scroller when every ancestor has a definite height (the docked panel gets
       one from #shell-chat-panel). With `max-height` the popover's height is
       content-driven, `.lani-ai-cw-root` stretches to its full content, and the
       popover itself becomes programmatically scrollable — so `_widget.focus()`
       in adoptAssistantInto scrolled the header bar (and its Expand button)
       clean out of view. */
    height: min(560px, calc(100vh - 140px));
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(14, 14, 20, 0.97);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    z-index: 890;
}
.lani-orb-popover__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Never let the adopted surface squeeze the Expand/close affordances away. */
    flex: 0 0 auto;
}
.lani-orb-popover__who { font-size: 12.5px; color: #aab0bd; }
.lani-orb-popover__grow { flex: 1; }
.lani-orb-popover__expand,
.lani-orb-popover__close {
    border: none;
    background: transparent;
    color: #8a8f9c;
    font-size: 12.5px;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 7px;
}
.lani-orb-popover__expand:hover,
.lani-orb-popover__close:hover { background: rgba(255, 255, 255, 0.07); color: #dfe2ea; }
.lani-orb-popover__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Compact posture for the adopted assistant surface. */
.lani-assistant--compact { height: 100%; min-height: 0; }
.lani-assistant--compact .lani-assistant__header { display: none; }

/* Both overlays are display:flex, which beats the UA's [hidden] rule —
   without these, `.hidden = true` closed NOTHING (the face stayed up). */
.lani-orb-popover[hidden],
.lani-orb-face[hidden] { display: none; }

/* ── Expanded avatar face (double-tap) ── */
.lani-orb-face {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 4, 6, 0.82);
    backdrop-filter: blur(6px);
    z-index: 895;
    cursor: pointer;
}
.lani-orb-face__stage { position: relative; text-align: center; }
.lani-orb-face__portrait {
    width: 212px;
    height: 212px;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #8ab4ff, #3b82f6 45%, #9333ea 100%);
    box-shadow: 0 0 60px rgba(59, 130, 246, 0.55);
    border: 2px solid var(--orb-avatar-ring, rgba(126, 176, 255, 0.6));
}
.lani-orb-face__portrait[data-avatar="aria"] { border-color: #f0a6d6; box-shadow: 0 0 60px rgba(226, 63, 158, 0.45); }
.lani-orb-face__portrait[data-avatar="kai"]  { border-color: #7eb0ff; box-shadow: 0 0 60px rgba(37, 99, 235, 0.5); }
.lani-orb-face__portrait[data-avatar="sol"]  { border-color: #9af0c8; box-shadow: 0 0 60px rgba(16, 185, 129, 0.45); }
.lani-orb-face__ring {
    position: absolute;
    left: 50%;
    top: 106px;
    width: 212px;
    height: 212px;
    margin-left: -106px;
    margin-top: -106px;
    border-radius: 50%;
    border: 1px solid rgba(126, 176, 255, 0.4);
    animation: lani-orb-ring 2.6s ease-out infinite;
    pointer-events: none;
}
.lani-orb-face__ring--b { animation-delay: 1.3s; }
.lani-orb-face__name {
    margin-top: 22px;
    font-size: 22px;
    font-weight: 600;
    color: #f4f4f6;
    letter-spacing: -0.02em;
}
.lani-orb-face__hint {
    margin-top: 8px;
    font-size: 12.5px;
    color: #7c818c;
}

/* ── Face voice loop: status, live transcript, listen/speak states ── */
.lani-orb-face__portrait { cursor: pointer; }
.lani-orb-face__status {
    margin-top: 6px;
    font-size: 14px;
    color: #c4c9d4;
    min-height: 20px;
}
.lani-orb-face__transcript {
    margin: 10px auto 0;
    max-width: 420px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #9ca3af;
    font-style: italic;
}
.lani-orb-face__reply {
    margin: 12px auto 0;
    max-width: 460px;
    max-height: 30vh;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.55;
    color: #dcdce1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 15px;
    text-align: left;
}
.lani-orb-face__mute {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #c4c9d4;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.lani-orb-face--muted .lani-orb-face__mute {
    background: rgba(232, 69, 59, 0.14);
    border-color: rgba(232, 69, 59, 0.4);
    color: #f0a9a4;
}
.lani-orb-face--muted .lani-orb-face__ring { animation-play-state: paused; opacity: 0.25; }

/* Voice mode off (early-access default): calm face, no mic affordances. */
.lani-orb-face--novoice .lani-orb-face__mute { display: none; }
.lani-orb-face--novoice .lani-orb-face__ring { opacity: 0.25; animation-duration: 4s; }
.lani-orb-face--listening .lani-orb-face__ring {
    border-color: rgba(47, 168, 109, 0.65);
    animation-duration: 1.2s;
}
.lani-orb-face--listening .lani-orb-face__status { color: #5fc98f; }
.lani-orb-face--speaking .lani-orb-face__ring {
    border-color: rgba(139, 108, 255, 0.65);
    animation-duration: 1.6s;
}
.lani-orb-face--speaking .lani-orb-face__portrait {
    animation: lani-orb-speak 1.1s ease-in-out infinite;
}
@keyframes lani-orb-speak {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

/* Collapsed orb: glow with the voice even when no surface is open. */
.lani-orb--speaking .lani-orb__halo {
    animation-duration: 1.1s;
    opacity: 0.9;
}
.lani-orb--listening .lani-orb__ring {
    border-color: rgba(47, 168, 109, 0.7);
    animation-duration: 1.2s;
}

/* ── Reduced motion: everything settles static ── */
@media (prefers-reduced-motion: reduce) {
    .lani-orb__halo,
    .lani-orb__ring,
    .lani-orb-face__ring,
    .lani-orb-face--speaking .lani-orb-face__portrait { animation: none; }
    .lani-orb__ring, .lani-orb-face__ring { opacity: 0.4; }
}

/* ── Phone (spec-v2 mobile principles #5 / integration §2a): the orb is
      the FAB on every screen; its chat opens as a full-screen route. ── */
@media (max-width: 767px) {
    .lani-orb { right: 18px; bottom: 18px; }
    .lani-orb-popover {
        inset: 0;
        width: 100vw;
        /* `inset: 0` already pins top+bottom, so `auto` is still a definite
           height here — which the assistant's flex chain requires. */
        height: auto;
        border-radius: 0;
        border: none;
    }
    .lani-orb-hint { right: 18px; bottom: 96px; }
    .lani-orb-face__portrait { width: 160px; height: 160px; }
    .lani-orb-face__ring { top: 80px; width: 160px; height: 160px; margin-left: -80px; margin-top: -80px; }
}