/* German Eiland -- persistent Voice Dock (assets/js/voice-shell.js). Themed entirely from the --sw-* design tokens so it matches the live Signature theme automatically in both dark (default) and light. */ /* The dock mounts on , so it does not inherit body-scoped resets -- state its own box model explicitly. */ #ge-voicedock, #ge-voicedock *, #ge-voicedock *::before, #ge-voicedock *::after { box-sizing: border-box; } #ge-voicedock { --gevd-w: 384px; --gevd-dot: var(--sw-ink-3, #7a6e93); position: fixed; z-index: 1000; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); font-family: var(--sw-sans, 'Rajdhani', system-ui, sans-serif); color: var(--sw-ink, #f1ecf8); pointer-events: none; /* children re-enable; keeps the fixed layer click-through */ } #ge-voicedock > * { pointer-events: auto; } /* connection dot colour by state */ #ge-voicedock[data-conn="connecting"], #ge-voicedock[data-conn="reconnecting"] { --gevd-dot: var(--sw-orange, #e8a13a); } #ge-voicedock[data-conn="connected"] { --gevd-dot: var(--sw-ok, #5fd08a); } #ge-voicedock[data-conn="poor"] { --gevd-dot: var(--sw-warn, #e8a13a); } #ge-voicedock[data-conn="lost"], #ge-voicedock[data-conn="error"] { --gevd-dot: var(--sw-bad, #e0655e); } /* ---- state visibility ------------------------------------------------- */ #ge-voicedock[data-state="closed"] .gevd-panel, #ge-voicedock[data-state="closed"] .gevd-pill, #ge-voicedock[data-state="collapsed"] .gevd-panel, #ge-voicedock[data-state="expanded"] .gevd-pill { display: none; } /* ---- expanded panel --------------------------------------------------- */ .gevd-panel { width: min(var(--gevd-w), calc(100vw - 28px)); max-height: min(74vh, 660px); display: flex; flex-direction: column; background: var(--sw-panel, #120e1f); border: 1px solid var(--sw-glass-border, rgba(176,142,255,.16)); border-radius: 16px; box-shadow: var(--sw-shadow, 0 22px 60px -22px rgba(0,0,0,.7)), 0 0 0 1px rgba(0,0,0,.15); overflow: hidden; transform-origin: bottom right; animation: gevd-pop .22s var(--sw-ease, cubic-bezier(.22,.61,.36,1)); } @keyframes gevd-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } .gevd-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 14px; background: linear-gradient(180deg, var(--sw-panel-2, #171125), transparent); border-bottom: 1px solid var(--sw-hair, rgba(176,142,255,.14)); flex: 0 0 auto; } .gevd-headtext { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1 1 auto; } .gevd-title { font-weight: 700; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; } .gevd-status { font-size: 11.5px; color: var(--sw-ink-2, #aba0c4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gevd-dot, .gevd-pill-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--gevd-dot); box-shadow: 0 0 0 0 var(--gevd-dot); } #ge-voicedock[data-conn="connecting"] .gevd-dot, #ge-voicedock[data-conn="reconnecting"] .gevd-dot, #ge-voicedock[data-conn="connecting"] .gevd-pill-dot, #ge-voicedock[data-conn="reconnecting"] .gevd-pill-dot { animation: gevd-blink 1s steps(2, jump-none) infinite; } #ge-voicedock.is-speaking .gevd-dot, #ge-voicedock.is-speaking .gevd-pill-dot { animation: gevd-pulse 1.1s var(--sw-ease, ease) infinite; } @keyframes gevd-blink { 50% { opacity: .3; } } @keyframes gevd-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--sw-warm-rgb, 95,208,138), .5); } 70% { box-shadow: 0 0 0 7px rgba(var(--sw-warm-rgb, 95,208,138), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--sw-warm-rgb, 95,208,138), 0); } } .gevd-head-actions { display: flex; gap: 4px; flex: 0 0 auto; } .gevd-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--sw-ink-2, #aba0c4); cursor: pointer; transition: background .15s, color .15s; } .gevd-icon svg { width: 16px; height: 16px; } .gevd-icon:hover { background: var(--sw-glass, rgba(255,255,255,.06)); color: var(--sw-ink, #f1ecf8); } .gevd-icon:focus-visible { outline: 2px solid var(--sw-accent, #a06cff); outline-offset: 1px; } .gevd-frame-wrap { position: relative; flex: 1 1 auto; min-height: 0; background: var(--sw-bg, #090610); } /* Fallback height only: voice-shell.js autosizeFrame() overrides this inline with the framed page's real content height (and re-measures via a ResizeObserver as the roster grows). Kept usable if that ever fails. */ .gevd-frame { display: block; width: 100%; height: min(58vh, 520px); border: 0; background: var(--sw-bg, #090610); transition: height .18s var(--sw-ease, ease); } @media (prefers-reduced-motion: reduce) { .gevd-frame { transition: none; } } .gevd-frame-load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--sw-bg, #090610); color: var(--sw-ink-2, #aba0c4); font-size: 12.5px; letter-spacing: .04em; } .gevd-spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--sw-hair, rgba(176,142,255,.2)); border-top-color: var(--sw-accent, #a06cff); animation: gevd-rot .8s linear infinite; } @keyframes gevd-rot { to { transform: rotate(360deg); } } /* ---- collapsed pill --------------------------------------------------- */ .gevd-pill { display: inline-flex; align-items: stretch; gap: 2px; padding: 4px; background: var(--sw-panel, #120e1f); border: 1px solid var(--sw-glass-border, rgba(176,142,255,.16)); border-radius: 999px; box-shadow: var(--sw-shadow, 0 18px 44px -18px rgba(0,0,0,.65)); animation: gevd-pop .2s var(--sw-ease, cubic-bezier(.22,.61,.36,1)); } .gevd-pill-main { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--sw-ink, #f1ecf8); font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .03em; cursor: pointer; transition: background .15s; } .gevd-pill-main:hover { background: var(--sw-glass, rgba(255,255,255,.06)); } .gevd-pill-label { white-space: nowrap; } .gevd-pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sw-accent, #a06cff); color: var(--sw-accent-ink, #160e22); font-size: 11px; font-weight: 700; } .gevd-pill-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; padding: 0; border: 0; border-radius: 999px; background: var(--sw-glass, rgba(255,255,255,.06)); color: var(--sw-ink, #f1ecf8); cursor: pointer; transition: background .15s, color .15s; } .gevd-pill-btn svg { width: 16px; height: 16px; } .gevd-pill-btn:hover { background: var(--sw-glass-2, rgba(255,255,255,.1)); } .gevd-pill-btn:focus-visible, .gevd-pill-main:focus-visible { outline: 2px solid var(--sw-accent, #a06cff); outline-offset: 1px; } .gevd-pill-btn.is-muted { background: var(--sw-bad, #e0655e); color: #fff; } .gevd-pill-leave { color: var(--sw-bad, #e0655e); } .gevd-pill-leave:hover { background: var(--sw-bad, #e0655e); color: #fff; } /* ---- mobile: bottom sheet + centered pill ----------------------------- */ @media (max-width: 560px) { #ge-voicedock { left: 0; right: 0; bottom: 0; } .gevd-panel { width: 100%; max-height: 82vh; border-radius: 18px 18px 0 0; border-bottom: 0; transform-origin: bottom center; } .gevd-frame { height: min(70vh, 620px); } #ge-voicedock[data-state="collapsed"] { left: auto; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); } @keyframes gevd-pop { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } } /* Keep the dock clear of the mobile bottom tab bar (.mtabs, ~58px tall, z-index 960) that landing.js shows while a module is open on narrow screens. Collapsed pill: lift on all narrow widths. Expanded corner panel: lift only on small tablets; on phones (<=560px) it is a bottom sheet that covers the bar by design. NOTE the `:root:has(body.module-open)` form: voice-shell.js mounts the dock on (a SIBLING of body -- see the mount comment there), so a plain `body.module-open #ge-voicedock` descendant selector can never match. If a browser lacks :has() this simply no-ops and the pill may overlap the tab bar -- cosmetic only, never broken. */ @media (max-width: 820px) { :root:has(body.module-open) #ge-voicedock[data-state="collapsed"] { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } } @media (min-width: 561px) and (max-width: 820px) { :root:has(body.module-open) #ge-voicedock[data-state="expanded"] { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .gevd-panel, .gevd-pill { animation: none; } .gevd-dot, .gevd-pill-dot, .gevd-spin { animation: none !important; } }