/* =========================================================
Drawer vertical contract + composer pin (RiRi exact)
Appended at file end so these rules win the cascade.
========================================================= */
/* === RiRi: Tighten top stack + chips + composer padding + action tone === */
/* 1) Tighten the top stack (header + greeting + question) */
.bia-drawer[data-bia-ai-drawer] .bia-drawer__header {
padding-bottom: 8px !important; /* was likely 16–20px */
}
.bia-drawer[data-bia-ai-drawer] .bia-greeting {
margin-bottom: 6px !important;
}
.bia-drawer[data-bia-ai-drawer] .bia-primary-question {
margin-bottom: 6px !important;
}
/* 2) Snap chips closer to the question */
.bia-drawer[data-bia-ai-drawer] .bia-quickchips {
margin-top: 4px !important;
gap: 6px !important;
}
.bia-drawer[data-bia-ai-drawer] .bia-quickchips .bia-chip {
margin: 0 !important;
}
/* 3) Reduce composer block padding */
.bia-drawer[data-bia-ai-drawer] .bia-drawer__composer {
padding-top: 8px !important;
padding-bottom: 10px !important;
}
.bia-drawer[data-bia-ai-drawer] .bia-composer-hint {
margin-top: 4px !important;
font-size: 12px !important;
opacity: 0.75 !important;
}
/* 4) Make bottom action buttons feel secondary */
.bia-drawer[data-bia-ai-drawer] .bia-action-row {
margin-top: 6px !important;
gap: 8px !important;
}
.bia-drawer[data-bia-ai-drawer] .bia-action-btn {
opacity: 0.9 !important;
}
.bia-drawer[data-bia-ai-drawer] .bia-action-btn:hover {
opacity: 1 !important;
}
/* Bia (Biakobaye) – Global AI Layer Styles
Shared orb component + animated logo
*/
:root {
--bia-bg: #020617;
--bia-bg-elevated: #020617;
--bia-panel: #020617;
--bia-border-subtle: rgba(148, 163, 184, 0.4);
--bia-accent: #6b5bff;
--bia-accent2: #16e2ff; /* teal */
--bia-accent3: #ff6bd5; /* magenta */
--bia-accent-soft: rgba(107, 91, 255, 0.18);
--bia-accent-secondary: #16e2ff;
--bia-text-main: #f9fafb;
--bia-text-muted: #9ca3af;
--bia-text-soft: #6b7280;
--bia-radius-lg: 18px;
--bia-radius-pill: 999px;
--bia-shadow-strong: 0 24px 80px rgba(0, 0, 0, 0.9);
--bia-shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.85);
--bia-z-index: 9999;
/* Ether Orb “power levels” (tune pop on dark UIs) */
--orb-halo-alpha: 1.0;
--orb-halo-blur: 14px;
--orb-halo-spread: -22px;
--orb-brightness: 1.08;
--orb-saturation: 1.15;
/* Optional pulse knobs */
--bia-pulse-strength: 1;
--bia-pulse-speed: 2.8s;
}
/* === RiRi: Global background smoothing (kills hard gradient waves) === */
:root{
/* tune these if you want */
--bg-deep: #020617;
--bg-ink: #050a1a;
--bg-teal: rgba(22,226,255,0.14);
--bg-violet: rgba(107,91,255,0.16);
--bg-magenta: rgba(255,107,213,0.10);
--bia-bg-asset-url: url("/assets/backgrounds/bia-gradient-4096-v1.png");
--bia-bg-css-layer:
radial-gradient(1260px 840px at 17% 19%, rgba(255,255,255,0.05), transparent 61%),
radial-gradient(940px 730px at 79% 61%, var(--bg-teal), transparent 67%),
radial-gradient(1130px 820px at 61% 23%, var(--bg-violet), transparent 71%),
radial-gradient(920px 720px at 46% 84%, var(--bg-magenta), transparent 73%);
--bia-bg-image-layer: var(--bia-bg-asset-url);
--bia-bg-base-layer: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-ink) 55%, #020617 100%);
--bia-bg-active-layer: var(--bia-bg-image-layer), var(--bia-bg-base-layer);
}
/* === BIA UI MUST FLOAT ABOVE EVERYTHING === */
#bia-chat-dock,
.bia-chat-dock,
#bia-ai-root,
.bia-ai-root {
position: fixed;
z-index: 2147483000;
}
/* Backdrop behind panel but above page */
.bia-drawer-backdrop,
.bia-ai-backdrop {
position: absolute;
inset: 0;
z-index: 2147483400;
}
/* === Drawer visibility: single truth = .bia-open (aria-hidden follows for A11y) === */
.bia-drawer[data-bia-ai-drawer]{
opacity: 0;
transform: translateY(12px) scale(.98);
pointer-events: none;
transition: opacity 180ms ease, transform 180ms ease;
}
.bia-drawer[data-bia-ai-drawer].bia-open{
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* ARIA-linked rules kept for parity but prefer .bia-open as source-of-truth */
.bia-drawer[data-bia-ai-drawer][aria-hidden="true"]{ opacity:0; pointer-events:none; }
.bia-drawer[data-bia-ai-drawer][aria-hidden="false"]{ opacity:1; pointer-events:auto; }
/* Panel above backdrop */
.bia-drawer-panel,
.bia-ai-panel {
position: fixed;
z-index: 2147483600;
}
/* Ensure page orbs never compete */
.orb { z-index: 0 !important; pointer-events: none; }
.shell { position: relative; z-index: 1; }
/* Kill transforms that create new stacking contexts (pages may override) */
body, .shell { transform: none !important; }
/* Drawer / chat header layout */
.bia-drawer-head,
.bia-chat-head,
[data-bia-drawer] .bia-drawer-head,
.bia-drawer .bia-drawer-head {
display: grid;
grid-template-columns: 44px 1fr auto;
align-items: center;
gap: 12px;
min-height: 56px;
}
.bia-drawer-title,
.bia-chat-title,
[data-bia-drawer] .bia-drawer-title,
.bia-drawer .bia-drawer-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bia-drawer-sub,
.bia-chat-sub,
[data-bia-drawer] .bia-drawer-sub,
.bia-drawer .bia-drawer-sub {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--bia-text-muted);
}
/* === BIA AI GLOBAL OVERLAY (must live in bia-ai.css) === */
#bia-ai-root,
#bia-chat-dock,
.bia-ai-root {
position: fixed;
inset: 0;
z-index: 2147483640;
pointer-events: none;
}
/* Drawer backdrop */
.bia-ai-backdrop {
position: fixed;
inset: 0;
background: rgba(2,4,10,0.55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
pointer-events: auto;
}
/* Drawer panel */
.bia-ai-panel {
position: fixed;
top: 12px;
left: 12px;
bottom: 12px;
width: 380px;
max-width: 92vw;
border-radius: 16px;
pointer-events: auto;
z-index: 2147483647;
}
/* Prevent page scroll when drawer open */
body.bia-drawer-open {
overflow: hidden;
}
/* Apply to the whole app shell */
body,
.bia-ui,
.bia-shell{
background:
/* big soft “sky” */
radial-gradient(1200px 800px at 18% 18%, rgba(255,255,255,0.05), transparent 60%),
/* teal bloom */
radial-gradient(900px 700px at 78% 62%, var(--bg-teal), transparent 68%),
/* violet bloom */
radial-gradient(1100px 800px at 62% 22%, var(--bg-violet), transparent 70%),
/* magenta whisper */
radial-gradient(900px 700px at 45% 85%, var(--bg-magenta), transparent 72%),
/* base wash (very gentle) */
linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-ink) 55%, #020617 100%);
background-attachment: fixed; /* prevents “waves” scrolling weird */
}
/* Dither/noise veil to eliminate banding */
body::before{
content:"";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
/* tiny fake noise (no image needed) */
background:
repeating-linear-gradient(
0deg,
rgba(255,255,255,0.018) 0px,
rgba(255,255,255,0.018) 1px,
rgba(0,0,0,0) 2px,
rgba(0,0,0,0) 4px
),
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.012) 0px,
rgba(255,255,255,0.012) 1px,
rgba(0,0,0,0) 2px,
rgba(0,0,0,0) 5px
);
mix-blend-mode: overlay;
opacity: 0.18; /* keep subtle */
filter: blur(0.25px); /* softens the pattern */
}
/* Make sure app content sits above the noise veil */
.bia-ui, .bia-shell, main, header, nav {
position: relative;
z-index: 1;
}
/* ===============================
Dr. Neal: Royal Ether Orb (Gold + Neon Purple + Teal Halo)
Kills radar/rings, adds curved energy ribbons
================================= */
.bia-theme-drneal .bia-orb--drneal{
/* palette */
--dr-teal: rgba(22,226,255,0.95);
--dr-purple: rgba(176, 82, 255, 0.95);
--dr-gold: rgba(255, 199, 74, 0.95);
/* glow */
box-shadow:
0 0 34px rgba(22,226,255,0.45),
0 0 70px rgba(176,82,255,0.22),
0 0 110px rgba(255,199,74,0.14) !important;
border: none !important;
outline: none !important;
overflow: hidden;
isolation: isolate;
/* core glass (no radar vibes) */
background:
radial-gradient(circle at 30% 18%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 18%, transparent 42%),
radial-gradient(circle at 70% 35%, rgba(22,226,255,0.22) 0%, transparent 55%),
radial-gradient(circle at 38% 78%, rgba(176,82,255,0.26) 0%, transparent 58%),
radial-gradient(circle at 52% 60%, rgba(255,199,74,0.18) 0%, transparent 60%),
radial-gradient(circle at 50% 55%, rgba(5,7,20,0.96) 0%, rgba(5,7,20,0.98) 74%, rgba(5,7,20,0) 100%) !important;
}
/* Hard-kill ANY rings on this variant */
.bia-theme-drneal .bia-orb--drneal .bia-ring,
.bia-theme-drneal .bia-orb--drneal .bia-orb-track,
.bia-theme-drneal .bia-orb--drneal .bia-orb-rim{
display:none !important;
}
/* Kill conic “radar spokes” on this variant (if any) */
.bia-theme-drneal .bia-orb--drneal::before,
.bia-theme-drneal .bia-orb--drneal::after{
content: "";
position: absolute;
inset: -24%;
border-radius: 999px;
pointer-events: none;
}
/* Outer teal halo (soft, alive) */
.bia-theme-drneal .bia-orb--drneal::after{
background:
radial-gradient(circle at 50% 50%,
rgba(22,226,255,0.55) 0%,
rgba(22,226,255,0.28) 28%,
rgba(176,82,255,0.14) 52%,
rgba(255,199,74,0.10) 66%,
transparent 78%);
filter: blur(16px);
opacity: 0.95;
animation: drHaloBreath 4.8s ease-in-out infinite;
}
/* Curved ribbons (NOT rings): 2 soft arcs that precess */
.bia-theme-drneal .bia-orb--drneal::before{
background:
radial-gradient(60% 40% at 35% 40%, rgba(255,199,74,0.22), transparent 62%),
radial-gradient(55% 45% at 70% 62%, rgba(176,82,255,0.20), transparent 64%),
radial-gradient(40% 55% at 55% 30%, rgba(22,226,255,0.14), transparent 68%);
filter: blur(10px);
mix-blend-mode: screen;
opacity: 0.9;
animation: drRibbonPrecess 7.6s ease-in-out infinite;
}
/* Make the internal “core” read as gold plasma + purple glass */
.bia-theme-drneal .bia-orb--drneal > .bia-orb-core{
background:
radial-gradient(circle at 35% 40%, rgba(22,226,255,0.65) 0%, rgba(22,226,255,0.10) 32%, rgba(5,7,20,0.98) 72%),
radial-gradient(circle at 68% 70%, rgba(176,82,255,0.55) 0%, rgba(176,82,255,0.08) 40%),
radial-gradient(circle at 48% 62%, rgba(255,199,74,0.55) 0%, rgba(255,199,74,0.08) 42%),
radial-gradient(circle at 50% 50%, rgba(107,91,255,0.40) 0%, rgba(5,7,20,0.98) 88%) !important;
filter: blur(1.6px) brightness(var(--core-bright,1)) saturate(1.12);
mix-blend-mode: screen;
opacity: 0.98;
}
/* Optional: soften sparks so they feel like arcs, not “dots” */
.bia-theme-drneal .bia-orb--drneal > .bia-orb-spark-front,
.bia-theme-drneal .bia-orb--drneal > .bia-orb-spark-back,
.bia-theme-drneal .bia-orb--drneal > .bia-orb-spark-ccw{
filter: blur(0.9px) !important;
opacity: 0.55 !important;
}
/* Motion */
@keyframes drHaloBreath{
0%,100%{ transform: scale(0.96); opacity: 0.78; }
45% { transform: scale(1.08); opacity: 1.0; }
70% { transform: scale(1.02); opacity: 0.9; }
}
@keyframes drRibbonPrecess{
0% { transform: rotate(-8deg) translate(-1%, 1%) scale(0.98); }
40% { transform: rotate(18deg) translate(2%, -1%) scale(1.03); }
80% { transform: rotate(-14deg) translate(-2%, 2%) scale(1.01); }
100% { transform: rotate(-8deg) translate(-1%, 1%) scale(0.98); }
}
/* === Bia Ether Orb (canonical) ===
One orb. Variants are size/intensity-only via modifier classes.
NOTE: `button#bia-orb.bia-bubble` + `.bia-orb-logo` are kept as compatibility aliases.
*/
:where(.bia-ui, .bia-shell) .bia-orb,
button#bia-orb,
button#bia-orb.bia-bubble,
:where(.bia-ui, .bia-shell) .bia-orb-logo {
--bia-orb-size: 64px;
/* Orb states (idle is the default when no state class is present) */
--bia-orb-speed-mult: 1;
--bia-orb-glow-mult: 1;
--bia-orb-halo-speed: calc(4.2s * var(--bia-orb-speed-mult));
--bia-orb-core-speed: calc(var(--bia-pulse-speed) * var(--bia-orb-speed-mult));
width: var(--bia-orb-size);
height: var(--bia-orb-size);
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
position: relative;
overflow: visible;
isolation: isolate;
background:
radial-gradient(circle at 30% 15%,
rgba(255,255,255,0.9) 0%,
rgba(255,255,255,0.35) 10%,
transparent 28%),
radial-gradient(circle at 70% 80%,
rgba(22,226,255,0.75) 0%,
rgba(22,226,255,0.15) 40%,
transparent 70%),
radial-gradient(circle at 50% 50%,
rgba(15,23,42,1) 0%,
rgba(15,23,42,0.98) 55%,
rgba(15,23,42,0.0) 100%);
background-repeat: no-repeat;
background-position: 30% 15%, 70% 80%, 50% 50%;
background-size: 100% 100%, 100% 100%, 100% 100%;
box-shadow:
0 0 22px rgba(22,226,255,0.55),
0 0 44px rgba(22,226,255,0.35);
}
/* One-class orb state system (idle = bia-idle) */
:where(.bia-ui, .bia-shell) .bia-orb.bia-listening,
button#bia-orb.bia-listening,
:where(.bia-ui, .bia-shell) .bia-orb-logo.bia-listening {
--bia-orb-speed-mult: 0.90;
--bia-orb-glow-mult: 1.10;
--orb-halo-alpha: 1.0;
--orb-brightness: 1.10;
}
:where(.bia-ui, .bia-shell) .bia-orb.bia-thinking,
button#bia-orb.bia-thinking,
:where(.bia-ui, .bia-shell) .bia-orb-logo.bia-thinking {
--bia-orb-speed-mult: 0.70;
--bia-orb-glow-mult: 1.35;
--orb-halo-alpha: 1.0;
--orb-brightness: 1.14;
}
:where(.bia-ui, .bia-shell) .bia-orb.bia-offline,
button#bia-orb.bia-offline,
:where(.bia-ui, .bia-shell) .bia-orb-logo.bia-offline {
--bia-orb-speed-mult: 1.25;
--bia-orb-glow-mult: 0.35;
--orb-halo-alpha: 0.25;
--orb-brightness: 0.92;
--orb-saturation: 0.85;
}
/* Explicit idle (uses defaults; class exists for consistency) */
:where(.bia-ui, .bia-shell) .bia-orb.bia-idle,
button#bia-orb.bia-idle,
:where(.bia-ui, .bia-shell) .bia-orb-logo.bia-idle {
--bia-orb-speed-mult: 1;
--bia-orb-glow-mult: 1;
}
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--nav,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="nav"] {
--bia-orb-size: 40px;
}
/* Size utilities (avoid inline styles for common sizes) */
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--size-54 {
--bia-orb-size: 54px;
}
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--avatar,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="avatar"] {
--bia-orb-size: 32px;
}
/* Dark-mode contrast amplifier (nav + bubble only) */
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--nav,
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--bubble,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="nav"],
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="bubble"],
button#bia-orb {
filter: saturate(var(--orb-saturation)) brightness(var(--orb-brightness));
}
/* Avatar orb uses the same cool glass build as the chat orb (scaled down) */
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--avatar,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="avatar"] {
background:
radial-gradient(circle at 35% 30%, rgba(235,245,255,0.95), transparent 52%),
radial-gradient(circle at 60% 70%, rgba(93,169,255,0.22), transparent 58%),
radial-gradient(circle at 50% 50%, rgba(10,14,26,0.75), rgba(8,10,18,0.92));
box-shadow:
0 14px 32px rgba(0,0,0,0.45),
0 0 0 1px rgba(255,255,255,0.10),
0 0 18px rgba(93,169,255,0.22);
}
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--avatar .bia-orb-streaks,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="avatar"] .bia-orb-streaks {
opacity: 0.72;
filter: blur(2px) saturate(1.15) brightness(1.04);
}
.bia-ui * {
box-sizing: border-box;
}
/* Never allow orb styling on user avatars */
.profile-avatar,
.profile-avatar * {
box-shadow: none !important;
filter: none !important;
}
.profile-avatar {
background-image: none !important;
}
.profile-avatar::before,
.profile-avatar::after {
content: none !important;
}
/* === Bia Ether Orb – v3 “Solar Storm Crystal” (canonical visuals) === */
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--bubble,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="bubble"],
button#bia-orb.bia-bubble {
position: fixed;
right: 24px;
bottom: 24px;
padding: 0;
padding-left: 2px;
border: none;
cursor: pointer;
font-size: 0;
color: transparent;
transition:
transform 160ms ease-out,
box-shadow 160ms ease-out,
filter 160ms ease-out;
}
/* Logo-page legacy class: static, resizable, non-interactive */
:where(.bia-ui, .bia-shell) .bia-orb-logo {
--bia-orb-size: var(--bia-logo-size, 220px);
cursor: default;
transform: none;
transition: none;
}
:where(.bia-ui, .bia-shell) .bia-orb-logo:hover,
:where(.bia-ui, .bia-shell) .bia-orb-logo:active {
transform: none;
filter: none;
box-shadow: inherit;
}
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="bubble"]:not(.bia-selected):hover,
button#bia-orb.bia-bubble:not(.bia-selected):hover,
:where(.bia-ui, .bia-shell) .bia-orb-logo:hover {
transform: translateY(-2px) scale(1.05);
box-shadow:
0 0 22px rgba(22,226,255,0.55),
0 0 44px rgba(22,226,255,0.35);
filter: saturate(var(--orb-saturation)) brightness(calc(var(--orb-brightness) + 0.02));
}
button#bia-orb.bia-bubble:not(.bia-selected):hover > span.bia-orb-core,
:where(.bia-ui, .bia-shell) .bia-orb-logo:hover > span.bia-orb-core {
animation-duration: 2.2s; /* faster heartbeat */
}
button#bia-orb.bia-bubble:not(.bia-selected):hover > span.bia-orb-caustic,
:where(.bia-ui, .bia-shell) .bia-orb-logo:hover > span.bia-orb-caustic,
button#bia-orb.bia-bubble:not(.bia-selected):hover > span.bia-orb-refraction,
:where(.bia-ui, .bia-shell) .bia-orb-logo:hover > span.bia-orb-refraction {
animation-duration: 8s; /* quicker glass drift on hover */
}
button#bia-orb.bia-bubble:not(.bia-selected):hover > span.bia-orb-spark-front,
:where(.bia-ui, .bia-shell) .bia-orb-logo:hover > span.bia-orb-spark-front,
button#bia-orb.bia-bubble:not(.bia-selected):hover > span.bia-orb-spark-back,
:where(.bia-ui, .bia-shell) .bia-orb-logo:hover > span.bia-orb-spark-back,
button#bia-orb.bia-bubble:not(.bia-selected):hover > span.bia-orb-spark-ccw,
:where(.bia-ui, .bia-shell) .bia-orb-logo:hover > span.bia-orb-spark-ccw {
animation-duration: 6s; /* slightly more energetic orbits */
}
button#bia-orb.bia-bubble:not(.bia-selected):hover,
:where(.bia-ui, .bia-shell) .bia-orb-logo:hover {
filter: saturate(var(--orb-saturation)) brightness(calc(var(--orb-brightness) + 0.03));
}
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="bubble"]:not(.bia-selected):active,
button#bia-orb.bia-bubble:not(.bia-selected):active,
:where(.bia-ui, .bia-shell) .bia-orb-logo:active {
transform: translateY(0) scale(0.96);
filter: saturate(var(--orb-saturation)) brightness(calc(var(--orb-brightness) - 0.10));
}
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="bubble"]:focus-visible,
button#bia-orb.bia-bubble:focus-visible,
:where(.bia-ui, .bia-shell) .bia-orb-logo:focus-visible {
outline: 2px solid rgba(22,226,255,0.9);
outline-offset: 4px;
}
/* (removed duplicate pseudo-layer system — RiRi canonical layers retained below) */
/* Counter-spin inner core – slightly tighter, more “plasma ball” */
:where(.bia-ui, .bia-shell) .bia-orb > .bia-orb-inner,
button#bia-orb.bia-bubble > .bia-orb-inner,
:where(.bia-ui, .bia-shell) .bia-orb-logo > .bia-orb-inner {
pointer-events: none;
position: absolute;
inset: 16%;
border-radius: 50%;
background:
radial-gradient(circle at 40% 40%, rgba(22,226,255,0.30) 0%, transparent 45%),
radial-gradient(circle at 60% 60%, rgba(255,107,213,0.22) 0%, transparent 48%);
filter: blur(4px);
mix-blend-mode: screen;
opacity: 0.95;
z-index: 2;
/* parallax layer (slower, larger) driven by JS vars for 3D faux-depth */
transform: translate(var(--drift-x2, 0px), var(--drift-y2, 0px)) scale(1);
animation: bia-orb-core-spin 18s linear infinite reverse;
}
/* Ether core – bright electric heart of the orb */
:where(.bia-ui, .bia-shell) .bia-orb > .bia-orb-core,
button#bia-orb.bia-bubble > .bia-orb-core,
:where(.bia-ui, .bia-shell) .bia-orb-logo > .bia-orb-core {
/* ORB CORE should NOT translate in % space (creates “second orb”) */
pointer-events: none;
position: absolute;
inset: 14%;
border-radius: 999px;
/* Keep the core centered; move the LIGHT, not the element */
background:
radial-gradient(circle at var(--attx,50%) var(--atty,50%),
rgba(22,226,255,0.78) 0%,
rgba(22,226,255,0.18) 26%,
rgba(5,7,20,0.0) 62%),
radial-gradient(circle at calc(var(--attx,50%) + 10%) calc(var(--atty,50%) + 10%),
rgba(255,107,213,0.50) 0%,
rgba(255,107,213,0.08) 34%,
transparent 68%);
/* Feather edges so it never reads as a hard mini-sphere */
-webkit-mask-image: radial-gradient(circle, #000 0 52%, transparent 78%);
mask-image: radial-gradient(circle, #000 0 52%, transparent 78%);
mix-blend-mode: screen;
filter: blur(2.5px) brightness(var(--core-bright, 1));
opacity: 0.95;
/* ONLY tiny pixel drift allowed */
transform:
translate(var(--bias-x, 0px), var(--bias-y, 0px))
translate(var(--drift-x1, 0px), var(--drift-y1, 0px))
scale(var(--breath, 1));
transition: transform 220ms linear, filter 120ms linear, opacity 220ms linear;
}
/* internal turbulence overlay — very subtle moving noise to break flatness */
:where(.bia-ui, .bia-shell) .bia-orb > .bia-orb-core::after,
button#bia-orb.bia-bubble > .bia-orb-core::after,
:where(.bia-ui, .bia-shell) .bia-orb-logo > .bia-orb-core::after {
content: "";
position: absolute;
inset: 8%;
border-radius: inherit;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 36%);
mix-blend-mode: overlay;
filter: blur(6px) saturate(1.08);
/* leave a very subtle turbulence but avoid synced brightness pulses */
animation: bia-core-turb 36s linear infinite;
opacity: 0.9;
pointer-events: none;
z-index: 2;
}
/* flash state applied briefly by JS; brightness is controlled through CSS var --core-bright */
:where(.bia-ui, .bia-shell) .bia-orb .bia-orb-core,
button#bia-orb .bia-orb-core {
filter: brightness(var(--core-bright, 1)) saturate(1.02);
}
@keyframes bia-core-turb {
0% { transform: translate(-1%, -1%) scale(0.995); opacity: 0.88; }
35% { transform: translate(1.2%, 0.8%) scale(1.002); opacity: 0.94; }
70% { transform: translate(-0.6%, 1.4%) scale(0.998); opacity: 0.90; }
100% { transform: translate(0.8%, -0.9%) scale(1.0); opacity: 0.92; }
}
@keyframes biaPlasmaDrift {
0% { transform: translate(-3%, -2%) scale(0.98); }
50% { transform: translate(2%, 1%) scale(1.03); }
100% { transform: translate(-1%, 3%) scale(0.99); }
}
@keyframes biaSpark {
0%, 92%, 100% { filter: blur(4px) brightness(1); }
94% { filter: blur(3px) brightness(1.25); }
}
/* Surface ether flares – figure-8 motion across the glass */
:where(.bia-ui, .bia-shell) .bia-orb > .bia-orb-surface,
button#bia-orb.bia-bubble > .bia-orb-surface,
:where(.bia-ui, .bia-shell) .bia-orb-logo > .bia-orb-surface {
pointer-events: none;
position: absolute;
inset: 10%;
border-radius: 50%;
/* softened surface mist (no starburst/conic patterns) */
background:
radial-gradient(circle at 35% 35%, rgba(255,255,255,0.08) 0%, transparent 36%),
radial-gradient(circle at 65% 65%, rgba(22,226,255,0.06) 0%, transparent 40%);
mix-blend-mode: screen;
filter: blur(2px);
opacity: 0.95;
/* surface arcs rotate using --surface-rot so JS can tune flow; also apply parallax via layer2 */
transform: rotate(var(--surface-rot, 0deg)) translate(var(--drift-x2, 0px), var(--drift-y2, 0px));
animation: bia-orb-surface-figure8 9s ease-in-out infinite;
z-index: 3; /* above inner/core, under outer flares */
}
/* State changes are variable-driven; keep selectors above as the only class switch. */
/* NEW: flare ring around the orb – “ether flares spinning off” */
:where(.bia-ui, .bia-shell) .bia-orb > .bia-orb-flares,
button#bia-orb.bia-bubble > .bia-orb-flares,
:where(.bia-ui, .bia-shell) .bia-orb-logo > .bia-orb-flares {
pointer-events: none;
position: absolute;
inset: -22%; /* widen flare ring so circle reads larger and visible in tight nav */
border-radius: 50%;
/* soft glow ring (replaces sharp conic beams) */
background:
radial-gradient(circle at 50% 50%, rgba(22,226,255,0.12) 0%, transparent 48%),
radial-gradient(circle at 30% 70%, rgba(255,107,213,0.10) 0%, transparent 46%),
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
/* crisper, brighter flares */
filter: blur(4px) saturate(1.18) contrast(1.06) brightness(1.04);
opacity: 1;
mix-blend-mode: screen;
animation: bia-orb-flares-spin 18s linear infinite;
z-index: 7;
}
/* Soft inner lens for depth – no white border */
:where(.bia-ui, .bia-shell) .bia-orb > span.bia-orb-rim,
button#bia-orb.bia-bubble > span.bia-orb-rim,
:where(.bia-ui, .bia-shell) .bia-orb-logo > span.bia-orb-rim {
pointer-events: none;
position: absolute;
inset: 8%;
border-radius: 50%;
background:
radial-gradient(circle at 35% 12%,
rgba(255,255,255,0.45) 0%,
rgba(255,255,255,0.12) 14%,
transparent 40%),
radial-gradient(circle at 50% 125%,
transparent 60%,
rgba(9,14,26,0.65) 95%);
mix-blend-mode: screen;
opacity: 0.85;
filter: blur(1.2px);
z-index: 4;
}
/* Micro-refraction ring – chromatic edge sparkle */
:where(.bia-ui, .bia-shell) .bia-orb > .bia-orb-refraction,
button#bia-orb.bia-bubble > .bia-orb-refraction,
:where(.bia-ui, .bia-shell) .bia-orb-logo > .bia-orb-refraction {
pointer-events: none;
position: absolute;
inset: 4%;
border-radius: 50%;
/* subtle chromatic edge (no repeating beams) */
background:
radial-gradient(circle at 50% 20%, rgba(22,226,255,0.06) 0%, transparent 40%),
radial-gradient(circle at 50% 80%, rgba(255,107,213,0.04) 0%, transparent 46%);
mix-blend-mode: screen;
opacity: 0.6;
filter: blur(1px);
z-index: 5; /* above rim/caustic, below sparks/flares */
animation: bia-orb-refraction-shift 16s linear infinite;
}
/* BACK SPARK – teal, goes "behind" the orb */
:where(.bia-ui, .bia-shell) .bia-orb > span.bia-orb-spark-back,
button#bia-orb.bia-bubble > span.bia-orb-spark-back,
:where(.bia-ui, .bia-shell) .bia-orb-logo > span.bia-orb-spark-back {
pointer-events: none;
position: absolute;
width: 9px;
height: 9px;
border-radius: 999px;
left: 50%;
top: 50%;
transform-origin: center;
background: radial-gradient(circle,
rgba(22,226,255,1) 0%,
rgba(224,250,255,0.9) 40%,
rgba(22,226,255,0.0) 100%);
mix-blend-mode: screen;
opacity: 0;
filter: blur(0.5px);
z-index: 1; /* behind surface (2), caustic (3), rim (4) */
animation: bia-orb-spark-back-orbit 9s linear infinite;
/* micro-flick: discrete step-like brightness jumps to read as tiny arcs */
animation: bia-orb-spark-back-orbit 9s linear infinite, bia-orb-spark-microflick 3.6s steps(3,end) infinite;
}
/* FRONT SPARK – magenta/gold, always on top */
:where(.bia-ui, .bia-shell) .bia-orb > span.bia-orb-spark-front,
button#bia-orb.bia-bubble > span.bia-orb-spark-front,
:where(.bia-ui, .bia-shell) .bia-orb-logo > span.bia-orb-spark-front {
pointer-events: none;
position: absolute;
width: 8px;
height: 8px;
border-radius: 999px;
left: 50%;
top: 50%;
transform-origin: center;
background: radial-gradient(circle,
rgba(255,255,255,1) 0%,
rgba(255,107,213,0.9) 40%,
rgba(255,107,213,0.0) 100%);
mix-blend-mode: screen;
opacity: 0;
filter: blur(0.4px);
z-index: 6; /* above rim/caustic/surface, below outer flares if any */
animation: bia-orb-spark-front-orbit 7.2s linear infinite;
/* micro-flick for front spark */
animation: bia-orb-spark-front-orbit 7.2s linear infinite, bia-orb-spark-microflick 3s steps(3,end) infinite;
}
/* CCW SPARK – cyan/white, counter-clockwise orbit */
:where(.bia-ui, .bia-shell) .bia-orb > span.bia-orb-spark-ccw,
button#bia-orb.bia-bubble > span.bia-orb-spark-ccw,
:where(.bia-ui, .bia-shell) .bia-orb-logo > span.bia-orb-spark-ccw {
pointer-events: none;
position: absolute;
width: 7px;
height: 7px;
border-radius: 999px;
left: 50%;
top: 50%;
transform-origin: center;
background: radial-gradient(circle,
rgba(255,255,255,1) 0%,
rgba(180,244,255,0.9) 40%,
rgba(22,226,255,0.0) 100%);
mix-blend-mode: screen;
opacity: 0;
filter: blur(0.4px);
z-index: 5; /* above rim & caustic, below front spark */
animation: bia-orb-spark-ccw 8.6s linear infinite;
/* micro-flick for ccw */
animation: bia-orb-spark-ccw 8.6s linear infinite, bia-orb-spark-microflick 4s steps(3,end) infinite;
}
/* Caustic highlight – subtle shifting light through the crystal */
:where(.bia-ui, .bia-shell) .bia-orb > span.bia-orb-caustic,
button#bia-orb.bia-bubble > span.bia-orb-caustic,
:where(.bia-ui, .bia-shell) .bia-orb-logo > span.bia-orb-caustic {
pointer-events: none;
position: absolute;
inset: 5%;
border-radius: 50%;
background:
radial-gradient(circle at 8% 40%,
rgba(255,255,255,0.35) 0%,
rgba(255,255,255,0.08) 18%,
transparent 40%),
radial-gradient(circle at 88% 70%,
rgba(22,226,255,0.32) 0%,
transparent 40%);
mix-blend-mode: screen;
opacity: 0.8;
filter: blur(1px);
animation: bia-orb-caustic-drift 12s ease-in-out infinite;
z-index: 3;
}
/* Safety if span isn’t there – inject via JS if needed */
button#bia-orb.bia-bubble:not(:has(.bia-orb-inner))::marker { content: ""; }
/* Orb track REMOVED — old-school ring artifact */
:where(.bia-ui, .bia-shell) .bia-orb > span.bia-orb-track,
button#bia-orb.bia-bubble > span.bia-orb-track,
:where(.bia-ui, .bia-shell) .bia-orb-logo > span.bia-orb-track {
display: none !important;
}
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--nav > span.bia-orb-track,
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--avatar > span.bia-orb-track,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="nav"] > span.bia-orb-track,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="avatar"] > span.bia-orb-track {
display: none !important;
}
/* Variant tuning (intensity only) */
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--nav::after,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="nav"]::after {
inset: calc(var(--orb-halo-spread) + 4px);
filter: blur(var(--orb-halo-blur)) drop-shadow(0 0 2px rgba(22,226,255,0.5));
opacity: 0.7;
animation-duration: calc(7.6s * var(--bia-orb-speed-mult));
}
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--nav::before,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="nav"]::before {
opacity: 0.78;
animation-duration: calc(22s * var(--bia-orb-speed-mult));
}
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--nav > span.bia-orb-flares,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="nav"] > span.bia-orb-flares {
opacity: 0.65;
filter: blur(9px);
animation-duration: calc(18s * var(--bia-orb-speed-mult));
}
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--nav > span.bia-orb-spark-front,
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--nav > span.bia-orb-spark-back,
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--nav > span.bia-orb-spark-ccw,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="nav"] > span.bia-orb-spark-front,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="nav"] > span.bia-orb-spark-back,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="nav"] > span.bia-orb-spark-ccw {
animation-duration: calc(14s * var(--bia-orb-speed-mult));
}
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--avatar::after,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="avatar"]::after {
inset: calc(var(--orb-halo-spread) + 6px);
filter: blur(calc(var(--orb-halo-blur) - 2px)) drop-shadow(0 0 2px rgba(22,226,255,0.45));
opacity: 0.65;
animation-duration: 8.6s;
}
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--avatar::before,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="avatar"]::before {
opacity: 0.75;
animation-duration: 24s;
}
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--avatar > span.bia-orb-flares,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="avatar"] > span.bia-orb-flares {
opacity: 0.55;
filter: blur(10px);
animation-duration: 20s;
}
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="avatar"] > span.bia-orb-spark-front,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="avatar"] > span.bia-orb-spark-back,
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="avatar"] > span.bia-orb-spark-ccw {
animation-duration: 16s;
}
/* Keyframes */
@keyframes bia-ether-glow-strong {
0%, 100% {
transform: scale(0.93);
opacity: 0.82;
}
40% {
transform: scale(1.12);
opacity: 1.05;
}
65% {
transform: scale(1.02);
opacity: 0.9;
}
}
/* Outer halo breathing / subtle scale */
@keyframes bia-orb-outer-breathe {
0%, 100% {
opacity: 0.75;
transform: scale(0.94);
filter: blur(26px);
}
40% {
opacity: 1;
transform: scale(1.06);
filter: blur(20px);
}
70% {
opacity: 0.9;
transform: scale(1.0);
filter: blur(23px);
}
}
/* Clockwise ether ribbons */
@keyframes bia-orb-ribbons-spin {
0% { transform: rotate(0deg) scale(0.96); }
25% { transform: rotate(110deg) scale(0.99); }
50% { transform: rotate(225deg) scale(1.03); }
75% { transform: rotate(305deg) scale(1.0); }
100% { transform: rotate(360deg) scale(0.96); }
}
/* Counter-spin inner core */
@keyframes bia-orb-core-spin {
0% { transform: rotate(0deg) scale(0.98); }
50% { transform: rotate(-220deg) scale(1.02); }
100% { transform: rotate(-360deg) scale(0.98); }
}
/* Electric pulse + tiny jitter */
@keyframes bia-orb-core-electric {
0% {
transform: scale(0.92) rotate(0deg);
opacity: 0.50;
box-shadow:
0 0 10px rgba(22,226,255,0.45),
0 0 18px rgba(255,107,213,0.25);
}
25% {
transform: scale(1.05) rotate(2deg);
opacity: 0.64;
box-shadow:
0 0 18px rgba(22,226,255,0.64),
0 0 32px rgba(255,107,213,0.51);
}
50% {
transform: scale(0.98) rotate(-1.5deg);
opacity: 0.58;
box-shadow:
0 0 14px rgba(22,226,255,0.54),
0 0 26px rgba(255,107,213,0.38);
}
75% {
transform: scale(1.06) rotate(1deg);
opacity: 0.64;
box-shadow:
0 0 20px rgba(56,189,248,0.64),
0 0 34px rgba(255,107,213,0.51);
}
100% {
transform: scale(0.92) rotate(0deg);
opacity: 0.50;
box-shadow:
0 0 10px rgba(22,226,255,0.45),
0 0 18px rgba(255,107,213,0.25);
}
}
@keyframes bia-orb-refraction-shift {
0% {
transform: rotate(0deg) scale(1.0);
opacity: 0.55;
}
50% {
transform: rotate(180deg) scale(1.03);
opacity: 0.8;
}
100% {
transform: rotate(360deg) scale(1.0);
opacity: 0.55;
}
}
/* Brightness flicker across the ribbons */
@keyframes bia-orb-flicker {
0%, 100% { opacity: 0.82; filter: blur(4px); }
40% { opacity: 1.0; filter: blur(3px); }
65% { opacity: 0.9; filter: blur(4.6px); }
}
/* Solar flares pulsing outwards */
@keyframes bia-orb-solar-burst {
0%, 100% {
box-shadow:
0 0 0 0 rgba(22,226,255,0.0),
0 0 0 0 rgba(255,107,213,0.0);
}
35% {
box-shadow:
0 0 24px 2px rgba(22,226,255,0.45),
0 0 40px 4px rgba(255,107,213,0.38);
}
60% {
box-shadow:
0 0 32px 4px rgba(22,226,255,0.3),
0 0 56px 6px rgba(124,58,237,0.32);
}
}
/* Figure-8 style motion: tilt + drift */
@keyframes bia-orb-surface-figure8 {
0% {
transform: rotate(0deg) translateX(0px) translateY(0px) scale(1.0);
opacity: 0.9;
}
20% {
transform: rotate(25deg) translateX(2px) translateY(-1px) scale(1.02);
opacity: 1;
}
40% {
transform: rotate(0deg) translateX(-2px) translateY(-2px) scale(1.03);
opacity: 0.95;
}
60% {
transform: rotate(-25deg) translateX(2px) translateY(1px) scale(1.02);
opacity: 1;
}
80% {
transform: rotate(0deg) translateX(-2px) translateY(2px) scale(1.01);
opacity: 0.9;
}
100% {
transform: rotate(0deg) translateX(0px) translateY(0px) scale(1.0);
opacity: 0.95;
}
}
/* Caustic light drifting through the crystal */
@keyframes bia-orb-caustic-drift {
0% { transform: rotate(0deg) translate(-2px, 1px) scale(1); opacity: 0.8; }
25% { transform: rotate(12deg) translate(1px, -1px) scale(1.03); opacity: 0.85; }
50% { transform: rotate(22deg) translate(2px, 0px) scale(1.05); opacity: 0.9; }
75% { transform: rotate(12deg) translate(-1px, 1px) scale(1.02); opacity: 0.85; }
100% { transform: rotate(0deg) translate(-2px, 1px) scale(1); opacity: 0.8; }
}
/* Back spark orbit – fades when "on far side" */
@keyframes bia-orb-spark-back-orbit {
0% { transform: rotate(0deg) translateX(12px); opacity: 0; }
10% { opacity: 0.9; }
25% { transform: rotate(90deg) translateX(12px); opacity: 1; }
50% { transform: rotate(180deg) translateX(10px) scale(0.96); opacity: 0.25; }
75% { transform: rotate(270deg) translateX(12px); opacity: 0.9; }
90% { opacity: 0.5; }
100% { transform: rotate(360deg) translateX(12px); opacity: 0; }
}
/* Front spark orbit – slightly tighter, offset, always visible on near side */
@keyframes bia-orb-spark-front-orbit {
0% { transform: rotate(210deg) translateX(10px); opacity: 0; }
10% { opacity: 0.9; }
40% { transform: rotate(300deg) translateX(10px); opacity: 1; }
70% { transform: rotate(390deg) translateX(10px); opacity: 0.85; }
90% { opacity: 0.3; }
100% { transform: rotate(450deg) translateX(10px); opacity: 0; }
}
/* Counter-clockwise spark orbit (cyan/white) */
@keyframes bia-orb-spark-ccw {
0% { transform: rotate(0deg) translateX(-11px); opacity: 0; }
10% { opacity: 0.9; }
35% { transform: rotate(-120deg) translateX(-11px); opacity: 1; }
55% { transform: rotate(-200deg) translateX(-12px) scale(1.03); opacity: 0.85; }
80% { transform: rotate(-310deg) translateX(-10px); opacity: 0.4; }
100% { transform: rotate(-360deg) translateX(-11px); opacity: 0; }
}
/* Floating only for chat orb */
#bia-orb[data-bia-orb="chat"],
.bia-orb[data-bia-orb="chat"],
#bia-chat-bubble,
#bia-ether-orb {
position: fixed !important;
right: 18px !important;
bottom: 18px !important;
left: auto !important;
top: auto !important;
z-index: 9999 !important;
}
/* Nav/logo never float */
:where(.bia-ui, .bia-shell) .bia-orb[data-bia-orb="nav"],
:where(.bia-ui, .bia-shell) .bia-orb.bia-orb--nav,
:where(.bia-ui, .bia-shell) .bia-orb-logo {
position: relative !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
top: auto !important;
}
/* Kill the track artifact only; keep rim for lens/glass when used */
.bia-orb-track { display: none !important; }
/* If a subtle glow is desired, apply it only to the container */
#bia-orb {
box-shadow: 0 0 28px rgba(22,226,255,0.30);
}
/* NAV / LOGO: ensure logo orb doesn't get floated out */
:where(.bia-ui, .bia-shell) .nav-left .bia-orb,
:where(.bia-ui, .bia-shell) .bia-main-nav-left .bia-orb {
position: relative !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
top: auto !important;
}
/* === Orb State Classes (visual flavors) === */
/* Default: calm energy */
#bia-orb.bia-idle .bia-orb-core,
#bia-orb.bia-idle > .bia-orb-core {
opacity: 0.92 !important;
}
/* Listening: subtle pulse (NOT disco) */
#bia-orb.bia-listening {
transform: translateZ(0) scale(1.02) !important;
}
#bia-orb.bia-listening .bia-orb-core::after {
opacity: 0.75 !important;
animation-duration: 6s !important;
}
/* Thinking: inner turbulence increases */
#bia-orb.bia-thinking .bia-orb-core::after {
opacity: 0.9 !important;
filter: blur(0.4px) !important;
}
/* Offline: dim + cool */
#bia-orb.bia-offline {
opacity: 0.55 !important;
filter: saturate(0.7) !important;
}
/* ASE: subtle purple edge */
#bia-orb.bia-ase {
box-shadow:
0 0 32px rgba(22,226,255,0.35),
0 0 22px rgba(255,107,213,0.18) !important;
}
/* Micro flicker used with steps() to produce discrete tiny arcs */
@keyframes bia-orb-spark-microflick {
0% { opacity: 0.0; filter: blur(0.6px) brightness(0.9); }
30% { opacity: 1.0; filter: blur(0.4px) brightness(1.2); }
60% { opacity: 0.45; filter: blur(0.5px) brightness(0.95); }
100% { opacity: 0.0; filter: blur(0.6px) brightness(0.85); }
}
/* Flare ring orbit */
@keyframes bia-orb-flares-spin {
0% { transform: rotate(0deg) scale(1.02); opacity: 0.85; }
40% { transform: rotate(150deg) scale(1.06); opacity: 1; }
70% { transform: rotate(260deg) scale(1.03); opacity: 0.9; }
100% { transform: rotate(360deg) scale(1.02); opacity: 0.85; }
}
/* Drawer header */
.bia-drawer-header {
padding: 1.1rem 1.35rem 0.95rem 1.35rem;
display: flex;
align-items: center;
gap: 0.65rem;
border-bottom: 1px solid rgba(148,163,184,0.35);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background:
radial-gradient(circle at 12% 30%, rgba(22,226,255,0.14), transparent 55%),
radial-gradient(circle at 88% 10%, rgba(255,107,213,0.12), transparent 60%),
linear-gradient(180deg, rgba(15,23,42,0.88), rgba(10,14,28,0.72));
}
/* Drawer avatar – mini Ether orb */
.bia-drawer-avatar {
width: 34px;
height: 34px;
border-radius: 999px;
position: relative;
display: grid;
place-items: center;
background: rgba(10,14,28,0.7);
box-shadow:
0 10px 22px rgba(0,0,0,0.55);
}
/* Legacy fallback: if any stale renderer injects a B, hide it */
.bia-drawer-avatar > span {
display: none !important;
}
/* If the drawer avatar uses the canonical orb system, size it to the header avatar slot */
.bia-drawer-avatar .bia-orb {
--bia-orb-size: 34px;
}
.bia-drawer-mini-orb {
width: 100%;
height: 100%;
border-radius: 999px;
position: relative;
background:
radial-gradient(circle at 30% 15%,
rgba(255,255,255,0.85) 0%,
rgba(255,255,255,0.22) 12%,
transparent 32%),
radial-gradient(circle at 70% 80%,
rgba(22,226,255,0.7) 0%,
rgba(22,226,255,0.12) 42%,
transparent 72%),
radial-gradient(circle at 50% 50%,
rgba(15,23,42,1) 0%,
rgba(15,23,42,0.92) 55%,
rgba(15,23,42,0) 100%);
box-shadow:
0 0 14px rgba(22,226,255,0.45),
0 0 26px rgba(255,107,213,0.18);
overflow: hidden;
isolation: isolate;
}
/* Safety: prevent avatar/mini-orb flex squeeze and enforce 1:1 aspect */
.bia-drawer-avatar {
flex: 0 0 auto !important;
min-width: 34px !important;
min-height: 34px !important;
width: 34px !important;
height: 34px !important;
}
.bia-drawer-mini-orb,
.bia-orb--avatar,
.bia-orb--mini,
.bia-orb-avatar {
flex: 0 0 auto !important;
aspect-ratio: 1 / 1 !important;
width: 100% !important;
height: 100% !important;
min-width: 28px !important;
min-height: 28px !important;
overflow: hidden !important;
}
.bia-drawer-mini-orb * , .bia-orb--avatar * { width:100% !important; height:100% !important; }
/* Bia Signals controls in nav (global rules so all Bia Signals pages match) */
.signals-controls { display:flex; gap:10px; align-items:center; }
.signals-type { display:flex; gap:6px; background:transparent; }
.signals-type .type-btn { padding:6px 9px; border-radius:999px; border:1px solid rgba(148,163,184,0.14); background:rgba(255,255,255,0.02); color:var(--bia-text-main); cursor:pointer; font-size:0.82rem }
.signals-type .type-btn.active { background:linear-gradient(90deg, rgba(107,91,255,0.12), rgba(22,226,255,0.06)); box-shadow:0 6px 18px rgba(56,189,248,0.06); border-color:rgba(107,91,255,0.28); }
.signal-lenses { display:flex; gap:6px; flex-wrap:wrap; }
.signal-lenses .lens-chip { padding:6px 10px; border-radius:999px; border:1px solid rgba(148,163,184,0.12); background:rgba(15,23,42,0.96); color:var(--bia-text-main); cursor:pointer; font-size:0.82rem }
.signal-lenses .lens-chip.active { border-color:rgba(107,91,255,0.9); background:radial-gradient(circle at 0 0, rgba(107,91,255,0.22), rgba(15,23,42,0.98)); color:#e5e7eb }
.bia-drawer-mini-orb::before {
content: "";
position: absolute;
inset: 12%;
border-radius: 999px;
/* soften mini-orb accent to avoid sharp beams */
background:
radial-gradient(circle at 30% 30%, rgba(22,226,255,0.22) 0%, transparent 38%),
radial-gradient(circle at 70% 70%, rgba(255,107,213,0.18) 0%, transparent 40%);
mix-blend-mode: screen;
filter: blur(2px);
opacity: 0.85;
animation: bia-mini-orb-spin 20s linear infinite;
}
@keyframes bia-mini-orb-spin {
to { transform: rotate(360deg); }
}
/* Title block */
.bia-drawer-title-block {
display: flex;
flex-direction: column;
gap: 1px;
}
.bia-drawer-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--bia-text-main);
}
.bia-drawer-pronounce {
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--bia-text-muted);
}
.bia-drawer-sub {
font-size: 0.73rem;
color: #c7d2fe;
}
/* Status area */
.bia-drawer-status-row {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
}
/* Presence Bar — Phase 19.9 (LOCKED)
- Top-right ONLY
- Icon-only; no labels/tooltips
- Single circular container; constant size across states
- No glow/halo bleed into chat/composer
- States: idle / listening / thinking (exact)
*/
.bia-presence {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
overflow: hidden;
flex: 0 0 auto;
background: none;
box-shadow: none;
color: var(--bia-presence-color, rgb(22, 226, 255));
border: 1.5px solid currentColor;
}
.bia-presence-icon {
width: 16px;
height: 16px;
position: relative;
color: inherit;
}
/* Canonical presence colors (no purple) */
.bia-drawer.bia-idle {
--bia-presence-color: rgb(22, 226, 255);
}
.bia-drawer.bia-listening {
/* Same hue as idle, slightly brighter (≈10–15%) */
--bia-presence-color: rgb(32, 244, 255);
}
.bia-drawer.bia-thinking {
--bia-presence-color: #38FF6A;
}
/* Internal-only state: keep presence within the 3-state contract */
.bia-drawer.bia-offline {
--bia-presence-color: rgb(22, 226, 255);
}
/* A. IDLE / PRESENT — hollow circle + slow breathe (<=4% scale, >=4s interval) */
.bia-drawer.bia-idle .bia-presence {
animation: bia-presence-breathe 6s ease-in-out infinite;
}
.bia-drawer.bia-idle .bia-presence-icon {
display: none;
}
/* B. LISTENING — eye glyph open; steady (no pulse) */
.bia-drawer.bia-listening .bia-presence {
animation: none;
}
.bia-drawer.bia-listening .bia-presence-icon {
display: block;
width: 20px;
height: 15px;
opacity: 1;
transform: none;
background:
linear-gradient(180deg, color-mix(in srgb, currentColor 88%, white 12%), currentColor)
center top / 4.4px 4.4px no-repeat;
background-size: 4.4px 4.4px;
background-position: center top;
background-repeat: no-repeat;
border-radius: 0;
}
.bia-drawer.bia-listening .bia-presence-icon::before {
content: "";
position: absolute;
width: 4.75px;
height: 4.75px;
left: 2.8px;
bottom: 0.3px;
border-radius: 1.8px;
background: linear-gradient(180deg, color-mix(in srgb, currentColor 88%, white 12%), currentColor);
opacity: 0.98;
}
.bia-drawer.bia-listening .bia-presence-icon::after {
content: "";
position: absolute;
width: 4.75px;
height: 4.75px;
right: 2.8px;
bottom: 0.3px;
border-radius: 1.8px;
background: linear-gradient(180deg, color-mix(in srgb, currentColor 88%, white 12%), currentColor);
opacity: 0.98;
}
/* C. THINKING — keep the same readout shape without ring motion */
.bia-drawer.bia-thinking .bia-presence {
animation: none;
}
.bia-drawer.bia-thinking .bia-presence-icon {
display: block;
width: 20px;
height: 15px;
opacity: 0.94;
transform: none;
background:
linear-gradient(180deg, color-mix(in srgb, currentColor 88%, white 12%), currentColor)
center top / 4.4px 4.4px no-repeat;
background-size: 4.4px 4.4px;
background-position: center top;
background-repeat: no-repeat;
border-radius: 0;
}
.bia-drawer.bia-thinking .bia-presence-icon::before {
content: "";
position: absolute;
width: 4.75px;
height: 4.75px;
left: 2.8px;
bottom: 0.3px;
border-radius: 1.8px;
background: linear-gradient(180deg, color-mix(in srgb, currentColor 88%, white 12%), currentColor);
opacity: 0.9;
}
.bia-drawer.bia-thinking .bia-presence-icon::after {
content: "";
position: absolute;
width: 4.75px;
height: 4.75px;
right: 2.8px;
bottom: 0.3px;
border-radius: 1.8px;
background: linear-gradient(180deg, color-mix(in srgb, currentColor 88%, white 12%), currentColor);
opacity: 0.9;
}
@keyframes bia-presence-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
.bia-drawer.bia-idle .bia-presence {
animation: none;
}
}
.bia-drawer-recap-btn {
padding: 0.15rem 0.6rem;
border-radius: 999px;
border: 1px solid rgba(56, 189, 248, 0.45);
background: rgba(14, 165, 233, 0.12);
color: #e2e8f0;
font-size: 0.72rem;
cursor: pointer;
}
.bia-drawer-recap-btn:hover {
border-color: rgba(56, 189, 248, 0.75);
}
.bia-message-tile {
width: 100%;
max-width: 92%;
border-radius: 16px;
padding: 0.75rem 0.85rem;
border: 1px solid rgba(148, 163, 184, 0.35);
background: rgba(15, 23, 42, 0.85);
color: #e2e8f0;
}
.bia-message-tile-title {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #93c5fd;
margin-bottom: 0.35rem;
}
.bia-message-tile-body {
font-size: 0.82rem;
line-height: 1.35;
margin-bottom: 0.45rem;
}
.bia-message-tile-next {
font-size: 0.76rem;
color: #cbd5f5;
}
.bia-chip-pulse {
animation: bia-chip-pulse 0.6s ease-out;
}
@keyframes bia-chip-pulse {
0% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); transform: scale(1); }
50% { box-shadow: 0 0 18px rgba(34, 197, 94, 0.45); transform: scale(1.02); }
100% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.bia-chip-pulse {
animation: none;
}
}
/* Legacy drawer status dot/text removed (presence bar only) */
/* Session time divider (once per session, above first greeting) */
.bia-session-divider-row {
width: 100%;
display: flex;
justify-content: center;
padding: 10px 0 6px;
}
.bia-session-divider {
font-size: 0.72rem;
line-height: 1;
letter-spacing: 0.02em;
color: rgba(226, 232, 240, 0.72);
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 999px;
padding: 4px 10px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.bia-drawer-focus-toggle {
border: 1px solid rgba(148,163,184,0.16);
background: rgba(2,6,23,0.2);
color: inherit;
font: inherit;
font-size: 11px;
padding: 4px 8px;
border-radius: 999px;
cursor: pointer;
opacity: 0.85;
}
.bia-drawer-focus-toggle.is-active {
border-color: rgba(59,130,246,0.35);
background: rgba(59,130,246,0.16);
opacity: 1;
}
.bia-command-ghost {
font-size: 11px;
color: rgba(148,163,184,0.85);
padding: 0;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
height: 16px;
min-height: 16px;
line-height: 16px;
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, visibility 0.18s ease;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bia-command-ghost.is-visible {
opacity: 1;
visibility: visible;
}
.bia-pinboard-breadcrumb {
position: absolute;
left: 0.6rem;
bottom: calc(100% + 0.35rem);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.9rem;
border-radius: 999px;
border: 1px solid rgba(59, 130, 246, 0.45);
background: rgba(59, 130, 246, 0.18);
color: var(--bia-text-main);
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, visibility 0.18s ease;
cursor: pointer;
z-index: 2;
}
.bia-pinboard-breadcrumb.is-visible {
opacity: 1;
visibility: visible;
}
/* Decisive override: remove any scanner/radar-style wedge on ::after (use streaks layer instead) */
/* (removed decisive override — using RiRi pseudo-layer system instead) */
/* Curved chaos streaks (NOT radar beams) */
#bia-orb .bia-orb-streaks,
.bia-orb .bia-orb-streaks {
position: absolute;
inset: -26%;
border-radius: 999px;
pointer-events: none;
z-index: 8;
mix-blend-mode: screen;
opacity: 0.95;
/* “curved” comes from masking + blur + uneven falloff */
background:
conic-gradient(from 140deg,
transparent 0 58%,
rgba(22,226,255,0.0) 58%,
rgba(22,226,255,0.75) 61%,
rgba(22,226,255,0.0) 66%,
transparent 66% 78%,
rgba(255,107,213,0.0) 78%,
rgba(255,107,213,0.65) 81%,
rgba(255,107,213,0.0) 86%,
transparent 86% 100%);
/* sharper presence: reduced blur, boosted color and contrast */
filter: blur(3px) saturate(1.3) contrast(1.06) brightness(1.06);
transform: rotate(var(--surface-rot, 0deg));
/* this mask turns wedges into curved “arcs” */
-webkit-mask-image:
radial-gradient(circle at 50% 50%,
transparent 0 44%,
#000 54%,
transparent 78%);
mask-image:
radial-gradient(circle at 50% 50%,
transparent 0 44%,
#000 54%,
transparent 78%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
animation: bia-streak-chaos 9.5s linear infinite;
}
@keyframes bia-streak-chaos {
0% { transform: rotate(0deg) translate(0,0) scale(1.02); opacity: 0.62; }
50% { transform: rotate(180deg) translate(2px,-1px) scale(1.05); opacity: 0.88; }
100% { transform: rotate(360deg) translate(0,0) scale(1.02); opacity: 0.62; }
}
/* State-driven streak intensities */
.bia-idle .bia-orb-streaks { opacity: 0.55; animation-duration: 10.5s, 6.2s; }
.bia-listening .bia-orb-streaks { opacity: 0.82; animation-duration: 8.4s, 4.8s; }
.bia-thinking .bia-orb-streaks {
opacity: 0.92;
filter: blur(0.6px) brightness(1.08);
animation-duration: 6.2s, 3.6s;
}
.bia-offline .bia-orb-streaks { opacity: 0.12; animation-play-state: paused; }
/* MINI ORBS — bring the small glow dots back while keeping streaks */
.bia-orb .bia-orb-spark-back,
.bia-orb .bia-orb-spark-front,
.bia-orb .bia-orb-spark-ccw {
position: absolute;
width: 8px !important;
height: 8px !important;
border-radius: 999px !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%);
opacity: 0;
filter: blur(0.6px);
transform-origin: center;
mix-blend-mode: screen;
pointer-events: none;
}
.bia-orb .bia-orb-spark-back{
background: rgba(22,226,255,0.98);
box-shadow: 0 0 10px rgba(22,226,255,0.9), 0 0 26px rgba(22,226,255,0.12);
z-index: 2;
animation: bia-mini-orbit-1 10.5s linear infinite, bia-mini-pulse 3.8s ease-in-out infinite;
}
.bia-orb .bia-orb-spark-front{
background: rgba(255,107,213,0.98);
box-shadow: 0 0 10px rgba(255,107,213,0.88), 0 0 22px rgba(255,107,213,0.12);
z-index: 6;
animation: bia-mini-orbit-2 8.8s linear infinite, bia-mini-pulse 3.2s ease-in-out infinite;
}
.bia-orb .bia-orb-spark-ccw{
background: rgba(180,244,255,0.95);
box-shadow: 0 0 9px rgba(180,244,255,0.86), 0 0 20px rgba(180,244,255,0.10);
z-index: 5;
animation: bia-mini-orbit-3 9.6s linear infinite reverse, bia-mini-pulse 4.1s ease-in-out infinite;
}
@keyframes bia-mini-orbit-1{
0%{ transform: translate(-50%,-50%) rotate(0deg) translateX(20px) translateY(1px) rotate(0deg); opacity:0; }
12%{ opacity:0.9; }
50%{ transform: translate(-50%,-50%) rotate(180deg) translateX(18px) translateY(-1px) rotate(0deg); opacity:0.45; }
88%{ opacity:0.7; }
100%{ transform: translate(-50%,-50%) rotate(360deg) translateX(20px) translateY(1px) rotate(0deg); opacity:0; }
}
@keyframes bia-mini-orbit-2{
0%{ transform: translate(-50%,-50%) rotate(210deg) translateX(18px) translateY(-1px) rotate(0deg); opacity:0; }
14%{ opacity:0.95; }
55%{ transform: translate(-50%,-50%) rotate(420deg) translateX(16px) translateY(1px) rotate(0deg); opacity:0.55; }
100%{ transform: translate(-50%,-50%) rotate(570deg) translateX(18px) translateY(-1px) rotate(0deg); opacity:0; }
}
@keyframes bia-mini-orbit-3{
0%{ transform: translate(-50%,-50%) rotate(0deg) translateX(-19px) translateY(1px) rotate(0deg); opacity:0; }
16%{ opacity:0.85; }
60%{ transform: translate(-50%,-50%) rotate(-240deg) translateX(-17px) translateY(-1px) rotate(0deg); opacity:0.5; }
100%{ transform: translate(-50%,-50%) rotate(-360deg) translateX(-19px) translateY(1px) rotate(0deg); opacity:0; }
}
@keyframes bia-mini-pulse{
0%,100%{ filter: blur(0.9px) brightness(0.95); }
50% { filter: blur(0.4px) brightness(1.18); }
}
/* Focus dot: keep it gone to avoid mini-orb look */
.bia-focus-dot{ display:none !important; }
/* Messages area */
.bia-messages {
padding: 0.75rem 0.85rem;
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.55rem;
font-size: 0.8rem;
}
/* Scrollbar */
.bia-messages::-webkit-scrollbar {
width: 6px;
}
.bia-messages::-webkit-scrollbar-track {
background: transparent;
}
.bia-messages::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.7);
border-radius: 999px;
}
/* Message bubbles */
.bia-message-row {
display: flex;
align-items: flex-end;
gap: 0.4rem;
}
.bia-message-row.user {
justify-content: flex-end;
}
.bia-message {
max-width: 80%;
padding: 0.45rem 0.6rem;
border-radius: 14px;
line-height: 1.35;
}
.bia-message.bia {
border-color: rgba(148,163,184,0.45);
background: rgba(10,14,28,0.72);
color: var(--bia-text-main);
}
.bia-message.user {
background: rgba(10,14,28,0.72);
color: var(--bia-text-main);
font-weight: 500;
text-shadow: 0 1px 1px rgba(255,255,255,0.4);
border-radius: 16px 16px 4px 16px;
}
.bia-message-meta {
font-size: 0.68rem;
color: var(--bia-text-soft);
margin-top: 0.15rem;
}
/* Quick actions */
.bia-quick-actions {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.1rem;
}
.bia-quick-chip {
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.6);
background: rgba(15, 23, 42, 0.96);
padding: 0.18rem 0.55rem;
font-size: 0.72rem;
color: var(--bia-text-soft);
cursor: pointer;
transition: border-color 140ms ease-out, background 140ms ease-out, color 140ms ease-out;
}
.bia-quick-chip:hover {
border-color: rgba(226, 232, 240, 0.9);
color: var(--bia-text-main);
}
/* Typing indicator */
.bia-typing {
display: inline-flex;
align-items: center;
gap: 0.12rem;
}
.bia-typing-dot {
width: 4px;
height: 4px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.9);
animation: bia-typing 1s infinite ease-in-out;
}
.bia-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.bia-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes bia-typing {
0%, 60%, 100% { transform: translateY(0); opacity: 0.7; }
30% { transform: translateY(-3px); opacity: 1; }
}
/* Input area */
.bia-input-row {
border-top: 1px solid rgba(30, 64, 175, 0.7);
padding: 0.55rem 0.6rem 0.6rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
background: rgba(15, 23, 42, 0.96);
position: relative;
}
.bia-input-main {
display: flex;
align-items: center;
gap: 0.45rem;
position: relative;
}
/* Focus icon: halo bullseye (concentric rings). No tooltip; aria-label only. */
.bia-focus-eye{
width: 14px;
height: 14px;
display: inline-block;
position: relative;
}
.bia-focus-eye::before{
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
border: 1.6px solid currentColor;
opacity: 0.95;
}
.bia-focus-eye::after{
content: "";
position: absolute;
width: 4px;
height: 4px;
border-radius: 999px;
background: currentColor;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0.95;
}
/* Focus control (input-row, icon-only). Inactive stays neutral; active is explicit. */
.bia-input-focus {
border: 1px solid rgba(148,163,184,0.6);
background: rgba(15, 23, 42, 0.98);
color: rgba(148, 163, 184, 0.85);
font: inherit;
font-size: 0.72rem;
width: 26px;
height: 26px;
border-radius: 999px;
cursor: pointer;
opacity: 0.6;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
transition: background 140ms ease-out, border-color 140ms ease-out, transform 140ms ease-out, opacity 140ms ease-out, color 140ms ease-out;
}
.bia-input-focus:hover {
opacity: 0.8;
border-color: rgba(148,163,184,0.8);
}
.bia-input-focus:focus-visible {
outline: 2px solid rgba(226, 232, 240, 0.55);
outline-offset: 2px;
}
.bia-input-focus.is-active {
color: #2FFFD5;
opacity: 0.95;
border-color: rgba(47,255,213,0.65);
}
.bia-input-focus.is-active:hover {
opacity: 1;
}
.bia-input {
flex: 1;
border-radius: var(--bia-radius-pill);
border: 1px solid rgba(148, 163, 184, 0.8);
background: rgba(15, 23, 42, 0.98);
color: var(--bia-text-main);
padding: 0.4rem 0.7rem;
font-size: 0.8rem;
outline: none;
}
.bia-input::placeholder {
color: var(--bia-text-soft);
}
.bia-input-send,
.bia-input-mic {
width: 30px;
height: 30px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.8);
background: rgba(15, 23, 42, 0.98);
color: var(--bia-text-main);
font-size: 0.78rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 140ms ease-out, transform 140ms ease-out;
}
/* Feather mic (calm Ether aesthetic)
Feather replaces with