/* =========================================================
   XERION — COMPANION
   File: web/frontend/css/companion.css

   Styles for the floating Companion widget (companion.js) and its
   figure (companion-svg.js). Off by default; companion.js only ever
   creates these elements when appearance.companion.enabled is true.

   Figure colors are the approved design sheet's own fixed values (see
   companion-svg.js) — not re-themed to the site's --blue variables.
   Everything else here (bubble, resize handle, shadows) uses the
   site's normal CSS variables so it fits light/dark mode.
   ========================================================= */

.xerion-companion-widget {
    position: fixed;
    z-index: 2147483000;
    width: 72px;
    height: 72px;
    touch-action: none;
    user-select: none;
}

.xerion-companion {
    width: 100%;
    height: 100%;
    cursor: grab;
}

.xerion-companion-widget.is-dragging .xerion-companion {
    cursor: grabbing;
}

.xerion-companion svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

.xerion-companion-resize-handle {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-strong, var(--border));
    box-shadow: var(--shadow-small);
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.xerion-companion-widget:hover .xerion-companion-resize-handle,
.xerion-companion-widget.is-resizing .xerion-companion-resize-handle {
    opacity: 1;
}

.xerion-companion-bubble {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    max-width: 220px;
    width: max-content;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-small);
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.xerion-companion-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--surface);
}

.xerion-companion-bubble.is-visible {
    opacity: 1;
}

/* ---- figure: expressions / state attributes ---- */
.companion-mouth-open { display: none; }
.xerion-companion[data-mouth-open="1"] .companion-mouth-closed { display: none; }
.xerion-companion[data-mouth-open="1"] .companion-mouth-open { display: inline; }
.xerion-companion [data-face] { display: none; }
.xerion-companion[data-expression="idle"] [data-face="idle"],
.xerion-companion[data-expression="happy"] [data-face="happy"],
.xerion-companion[data-expression="speaking"] [data-face="speaking"],
.xerion-companion[data-expression="thinking"] [data-face="thinking"],
.xerion-companion[data-expression="listening"] [data-face="listening"],
.xerion-companion[data-expression="working"] [data-face="working"],
.xerion-companion[data-expression="success"] [data-face="happy"],
.xerion-companion[data-expression="surprised"] [data-face="surprised"],
.xerion-companion[data-expression="attention"] [data-face="surprised"],
.xerion-companion[data-expression="sleeping"] [data-face="sleeping"],
.xerion-companion[data-expression="error"] [data-face="error"],
.xerion-companion[data-expression="excited"] [data-face="excited"] { display: block; }
.xerion-companion[data-click-face="1"] [data-face] { display: none !important; }
.xerion-companion[data-click-face="1"] [data-face="click"] { display: block !important; }

.xerion-companion-accent { display: none; stroke: #3B82F6; stroke-width: 14; stroke-linecap: round; fill: none; }
.xerion-companion[data-expression="listening"] .xerion-companion-accent[data-accent="ticks"],
.xerion-companion[data-hover="1"] .xerion-companion-accent[data-accent="ticks"] { display: inline; }
.xerion-companion[data-expression="excited"] .xerion-companion-accent[data-accent="sparkle"] { display: inline; fill: #3B82F6; stroke: none; }
.xerion-companion[data-expression="sleeping"] .xerion-companion-accent[data-accent="zzz"] { display: inline; }

.xerion-companion[data-blink="1"] .xerion-companion-eye { transform: scaleY(0.12); transform-box: fill-box; transform-origin: center; }
.xerion-companion[data-look="left"] .xerion-companion-eye-pupil { transform: translateX(-20px); }
.xerion-companion[data-look="right"] .xerion-companion-eye-pupil { transform: translateX(20px); }

/* ---- animations (skipped entirely under prefers-reduced-motion, and
   paused while the tab is hidden via the .is-paused class) ---- */
@media (prefers-reduced-motion: no-preference) {
    .xerion-companion[data-anim="breathe"] { animation: xc-breathe 4.5s ease-in-out infinite; }
    .xerion-companion[data-anim="hover"] { animation: xc-hover 0.6s ease-in-out; filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.22)); }
    .xerion-companion[data-anim="bounce"] { animation: xc-bounce 0.55s cubic-bezier(.34, 1.56, .64, 1); filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.22)); }
    .xerion-companion[data-anim="click"] { animation: xc-click 0.22s ease-out; }

    .xerion-companion-widget.is-paused .xerion-companion {
        animation-play-state: paused;
    }
}

@keyframes xc-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes xc-hover { 0% { transform: rotate(0deg) scale(1); } 30% { transform: rotate(-5deg) scale(1.06); } 60% { transform: rotate(4deg) scale(1.06); } 100% { transform: rotate(0deg) scale(1); } }
@keyframes xc-bounce { 0% { transform: translateY(0); } 35% { transform: translateY(-20px); } 60% { transform: translateY(0); } 80% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes xc-click { 0% { transform: scale(1); } 50% { transform: scale(0.88); } 100% { transform: scale(1); } }