/* ════════════════════════════════════════════════════════════
   THE ORB — voice companion. The only expressive element.
   ════════════════════════════════════════════════════════════ */

.aos-orb-dock {
    position: fixed;
    right: var(--aos-space-8);
    bottom: var(--aos-space-8);
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--aos-space-4);
}

/* the orb button */
.aos-orb {
    position: relative;
    width: 72px; height: 72px;
    border: none; background: transparent; padding: 0;
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}
.aos-orb canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.aos-orb-img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; will-change: transform; }
.aos-orb:focus-visible { outline: 2px solid var(--aos-amber); outline-offset: 6px; }

/* hint label / tray handle pills above the orb */
.aos-orb-hint, .aos-tray-handle {
    background: var(--aos-nook); border: 1px solid var(--aos-bronze-dim);
    color: var(--aos-vellum); font-family: var(--aos-font-heading);
    font-size: var(--aos-text-sm); padding: 8px 14px; border-radius: 999px;
    white-space: nowrap; opacity: 0; transform: translateX(8px);
    transition: opacity var(--aos-t-slow), transform var(--aos-t-slow);
    pointer-events: none;
}
.aos-orb-hint.show { opacity: 1; transform: translateX(0); }
.aos-tray-handle { cursor: pointer; display: inline-flex; align-items: center; gap: 9px; }
.aos-tray-handle.show { opacity: 1; transform: translateX(0); pointer-events: auto; }
.aos-tray-handle:hover { border-color: var(--aos-amber); color: var(--aos-parchment); }
.aos-tray-pip { width: 7px; height: 7px; border-radius: 50%; background: var(--aos-amber); box-shadow: 0 0 8px var(--aos-amber); animation: aos-blink 2.4s ease-in-out infinite; }

/* caption bubble (what the voice is "saying") */
.aos-caption {
    max-width: 360px;
    background: var(--aos-nook);
    border: 1px solid var(--aos-bronze);
    border-radius: var(--aos-r-lg) var(--aos-r-lg) 4px var(--aos-r-lg);
    padding: var(--aos-space-5) var(--aos-space-6);
    opacity: 0; transform: translateY(10px) scale(0.98);
    transition: opacity var(--aos-t-normal), transform var(--aos-t-normal);
    pointer-events: none;
}
.aos-caption.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.aos-caption-state {
    font-family: var(--aos-font-heading); font-size: var(--aos-text-xs);
    letter-spacing: var(--aos-tracking-wider); text-transform: uppercase;
    color: var(--aos-amber); margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}
.aos-caption-state .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--aos-amber); animation: aos-blink 1s steps(2) infinite; }
.aos-caption-text { font-size: var(--aos-text-base); line-height: var(--aos-leading-relaxed); color: var(--aos-parchment); margin: 0; }
.aos-caption-actions { margin-top: var(--aos-space-4); display: flex; gap: var(--aos-space-3); }
.aos-caption-chip {
    font-family: var(--aos-font-heading); font-size: var(--aos-text-xs);
    color: var(--aos-vellum); background: var(--aos-alcove);
    border: 1px solid var(--aos-bronze-dim); border-radius: 999px;
    padding: 6px 12px; cursor: pointer; transition: border-color var(--aos-t-fast), color var(--aos-t-fast);
}
.aos-caption-chip:hover { border-color: var(--aos-amber); color: var(--aos-amber); }

/* notification tray — slides up from the orb */
.aos-tray {
    width: 340px;
    background: var(--aos-shelf);
    border: 1px solid var(--aos-bronze);
    border-radius: var(--aos-r-lg);
    padding: var(--aos-space-5) var(--aos-space-5) var(--aos-space-3);
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity var(--aos-t-normal), transform var(--aos-t-normal);
}
.aos-tray.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.aos-tray-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--aos-space-3); }
.aos-tray-head h4 { font-family: var(--aos-font-heading); font-size: var(--aos-text-xs); letter-spacing: var(--aos-tracking-wider); text-transform: uppercase; color: var(--aos-dust); margin: 0; }
.aos-tray-item { display: block; padding: var(--aos-space-3) 0; border-bottom: 1px solid var(--aos-bronze-dim); }
.aos-tray-item:last-child { border-bottom: none; }
.aos-tray-item .line { font-size: var(--aos-text-sm); color: var(--aos-parchment); line-height: 1.45; }
.aos-tray-item .line.action { color: var(--aos-amber); cursor: pointer; }
.aos-tray-item .ts { font-family: var(--aos-font-mono); font-size: 11px; color: var(--aos-dust); margin-top: 3px; }

@keyframes aos-blink { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } }

@media (max-width: 860px) {
    .aos-orb-dock { right: 50%; transform: translateX(50%); bottom: calc(64px + var(--aos-space-5)); align-items: center; }
    .aos-orb { width: 60px; height: 60px; }
    .aos-caption, .aos-tray { max-width: min(86vw, 360px); }
    .aos-orb-hint { display: none; }
}