refactor(frontend): retire legacy CSS and isolate visual artwork
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
/* Minimal element defaults and page background. Preflight is intentionally not enabled. */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
|
||||
font-family: var(--font-sans);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
min-height: 100dvh;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
position: relative;
|
||||
background:
|
||||
radial-gradient(1200px 800px at 15% -10%, rgba(139, 92, 246, 0.3) 0%, transparent 60%),
|
||||
radial-gradient(900px 700px at 110% 10%, rgba(236, 72, 153, 0.22) 0%, transparent 55%),
|
||||
radial-gradient(1000px 800px at 50% 120%, rgba(34, 211, 238, 0.22) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 50% 50%, #0e1019 0%, var(--bg) 65%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
|
||||
radial-gradient(rgba(139, 92, 246, 0.035) 1px, transparent 1px);
|
||||
background-size:
|
||||
42px 42px,
|
||||
42px 42px;
|
||||
background-position:
|
||||
0 0,
|
||||
21px 21px;
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0.55;
|
||||
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
|
||||
}
|
||||
body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(600px 600px at 20% 80%, rgba(139, 92, 246, 0.1), transparent 70%),
|
||||
radial-gradient(500px 500px at 80% 20%, rgba(34, 211, 238, 0.08), transparent 70%);
|
||||
animation: auroraShift 22s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--border-strong);
|
||||
}
|
||||
a:hover {
|
||||
border-bottom-color: var(--text);
|
||||
}
|
||||
html[data-theme="white"] body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
background-image: none;
|
||||
}
|
||||
html[data-theme="white"] body::before,
|
||||
html[data-theme="white"] body::after {
|
||||
display: none;
|
||||
background-image: none;
|
||||
animation: none;
|
||||
}
|
||||
#root {
|
||||
display: contents;
|
||||
}
|
||||
@keyframes auroraShift {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
opacity: 0.9;
|
||||
}
|
||||
50% {
|
||||
transform: translate3d(3%, -2%, 0) scale(1.08);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(-2%, 2%, 0) scale(1.02);
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:root {
|
||||
--audio-level: 0 !important;
|
||||
--ai-audio-level: 0 !important;
|
||||
--bar0: 0 !important;
|
||||
--bar1: 0 !important;
|
||||
--bar2: 0 !important;
|
||||
--bar3: 0 !important;
|
||||
--bar4: 0 !important;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
.circle.state-ai-speaking .bar,
|
||||
.circle.state-user-speaking .bar {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
@@ -1,298 +0,0 @@
|
||||
/* Shared layout. Theme colors and voice artwork remain in legacy-theme.css. */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
min-height: 100dvh;
|
||||
padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
|
||||
}
|
||||
#app {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.stage,
|
||||
html[data-theme="white"] .stage {
|
||||
padding: 12px 12px 8px;
|
||||
gap: 12px;
|
||||
flex: none;
|
||||
}
|
||||
.chat-panel {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
flex-direction: column;
|
||||
height: clamp(240px, 45dvh, 640px);
|
||||
min-width: 0;
|
||||
margin: 8px 12px 0;
|
||||
}
|
||||
.circle-caption {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.chat-panel-inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
max-width: 920px;
|
||||
margin-inline: auto;
|
||||
padding: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-panel-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 0 0 10px;
|
||||
flex: none;
|
||||
}
|
||||
.chat-panel-header h2 {
|
||||
min-width: 0;
|
||||
}
|
||||
.chat-header-actions,
|
||||
html[data-theme="white"] .chat-header-actions {
|
||||
gap: 6px;
|
||||
}
|
||||
.chat-export-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.chat-history {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
gap: 14px;
|
||||
padding: 12px 4px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-anchor: none;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.chat-history:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.hist-msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
gap: 6px;
|
||||
max-width: 86%;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
}
|
||||
.hist-msg.user {
|
||||
align-self: flex-start;
|
||||
margin-right: auto;
|
||||
}
|
||||
.hist-msg.assistant {
|
||||
align-self: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
.hist-msg.tool {
|
||||
align-self: flex-start;
|
||||
max-width: 100%;
|
||||
}
|
||||
.hist-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 4px 10px;
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
}
|
||||
.hist-meta span {
|
||||
overflow-wrap: anywhere;
|
||||
font-weight: 600;
|
||||
}
|
||||
.hist-meta time {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hist-body {
|
||||
min-width: 0;
|
||||
}
|
||||
.hist-body:not(.markdown-content) {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.jump-to-latest {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 18px;
|
||||
right: 18px;
|
||||
z-index: 2;
|
||||
gap: 6px;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
html[data-theme="white"] .chat-panel {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
html[data-theme="white"] .chat-panel-header {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
html[data-theme="white"] .chat-history .hist-msg {
|
||||
max-width: calc(100% - 40px);
|
||||
padding-top: 0;
|
||||
}
|
||||
html[data-theme="white"] .chat-history .hist-msg.assistant {
|
||||
align-self: flex-start;
|
||||
margin: 4px auto 4px 40px;
|
||||
}
|
||||
html[data-theme="white"] .chat-history .hist-msg.user {
|
||||
align-self: flex-end;
|
||||
margin: 4px 40px 4px auto;
|
||||
}
|
||||
html[data-theme="white"] .chat-history .hist-msg.tool {
|
||||
max-width: 100%;
|
||||
margin: 4px 0;
|
||||
}
|
||||
html[data-theme="white"] .chat-history .hist-msg::before {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 11px;
|
||||
}
|
||||
html[data-theme="white"] .hist-meta {
|
||||
color: #64748b;
|
||||
}
|
||||
html[data-theme="white"] .hist-msg.user .hist-meta {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.app-footer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 12px max(12px, env(safe-area-inset-bottom));
|
||||
flex: none;
|
||||
text-align: center;
|
||||
}
|
||||
.feedback-link {
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
border: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
.feedback-link:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
.feedback-link:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
#app.has-reports {
|
||||
padding-left: 320px;
|
||||
}
|
||||
body:has(#app.has-reports) .app-footer {
|
||||
margin-left: 320px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.topbar {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.topbar-right {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.chat-panel {
|
||||
margin-inline: 0;
|
||||
}
|
||||
.chat-panel-inner {
|
||||
padding: 10px;
|
||||
}
|
||||
html[data-theme="white"] .chat-panel-header h2 {
|
||||
font-size: 17px;
|
||||
}
|
||||
html[data-theme="white"] .chat-status-pill {
|
||||
font-size: 11px;
|
||||
padding: 5px 7px;
|
||||
}
|
||||
.orb-wrap {
|
||||
flex-direction: row;
|
||||
gap: 18px;
|
||||
}
|
||||
.circle {
|
||||
width: clamp(110px, 32vw, 176px);
|
||||
}
|
||||
.orb-wrap.live .side-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.mic-gate-arc {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-stage {
|
||||
gap: 12px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform {
|
||||
top: 74px;
|
||||
}
|
||||
html[data-theme="white"] .white-session-controls {
|
||||
gap: 8px;
|
||||
}
|
||||
html[data-theme="white"] .white-mute-btn,
|
||||
html[data-theme="white"] .white-stop-btn {
|
||||
font-size: 13px;
|
||||
padding: 8px 10px;
|
||||
min-height: 44px;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
@media (max-height: 640px) {
|
||||
.stage,
|
||||
html[data-theme="white"] .stage {
|
||||
padding-block: 8px;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-stage {
|
||||
padding-top: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform {
|
||||
top: 57px;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-caption {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:root {
|
||||
--audio-level: 0 !important;
|
||||
--ai-audio-level: 0 !important;
|
||||
--bar0: 0 !important;
|
||||
--bar1: 0 !important;
|
||||
--bar2: 0 !important;
|
||||
--bar3: 0 !important;
|
||||
--bar4: 0 !important;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
.circle.state-ai-speaking .bar,
|
||||
.circle.state-user-speaking .bar {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,123 @@
|
||||
/* Scoped styles for sanitized HTML produced by Marked; model content never supplies utility classes. */
|
||||
|
||||
.markdown-content {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.markdown-content > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.markdown-content > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-content p {
|
||||
margin: 0 0 0.75em;
|
||||
}
|
||||
.markdown-content strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
.markdown-content :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin: 1em 0 0.5em;
|
||||
font-size: 1.12em;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.markdown-content :is(ul, ol) {
|
||||
margin: 0.65em 0;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
.markdown-content ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.markdown-content ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.markdown-content li + li {
|
||||
margin-top: 0.35em;
|
||||
}
|
||||
.markdown-content li > p {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.markdown-content li :is(ul, ol) {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
.markdown-content a {
|
||||
color: var(--brand-3);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
html[data-theme="white"] .markdown-content a {
|
||||
color: var(--speaking);
|
||||
}
|
||||
.markdown-content :is(a, pre, .markdown-table):focus-visible {
|
||||
outline: 2px solid var(--brand);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.markdown-content blockquote {
|
||||
margin: 0.75em 0;
|
||||
padding-inline-start: 12px;
|
||||
border-inline-start: 3px solid var(--brand);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.markdown-content code {
|
||||
padding: 0.15em 0.35em;
|
||||
border-radius: 4px;
|
||||
background: color-mix(in srgb, currentColor 8%, transparent);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.markdown-content pre {
|
||||
max-width: 100%;
|
||||
margin: 0.75em 0;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 8px;
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
.markdown-content pre code {
|
||||
display: block;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
white-space: pre;
|
||||
overflow-wrap: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
.markdown-content hr {
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border-strong);
|
||||
}
|
||||
.markdown-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.markdown-content .markdown-table {
|
||||
max-width: 100%;
|
||||
margin: 0.75em 0;
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
}
|
||||
.markdown-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
.markdown-content :is(th, td) {
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--border-strong);
|
||||
text-align: start;
|
||||
vertical-align: top;
|
||||
}
|
||||
.markdown-content th {
|
||||
font-weight: 700;
|
||||
}
|
||||
.markdown-content [align="center"] {
|
||||
text-align: center;
|
||||
}
|
||||
.markdown-content [align="right"] {
|
||||
text-align: end;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/* Native range pseudo-elements cannot share a selector across browser engines. */
|
||||
.gate-range::-webkit-slider-runnable-track {
|
||||
height: 14px;
|
||||
background: transparent;
|
||||
}
|
||||
.gate-range::-moz-range-track {
|
||||
height: 14px;
|
||||
background: transparent;
|
||||
}
|
||||
.gate-range::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 6px;
|
||||
height: 18px;
|
||||
border-radius: 3px;
|
||||
background: var(--text);
|
||||
border: 2px solid var(--bg-elev);
|
||||
box-shadow: 0 0 0 1px var(--border-strong);
|
||||
}
|
||||
.gate-range::-moz-range-thumb {
|
||||
width: 6px;
|
||||
height: 18px;
|
||||
border-radius: 3px;
|
||||
background: var(--text);
|
||||
border: 2px solid var(--bg-elev);
|
||||
box-shadow: 0 0 0 1px var(--border-strong);
|
||||
}
|
||||
@@ -26,9 +26,9 @@
|
||||
--color-voice-user: var(--voice-user);
|
||||
--color-voice-assistant: var(--voice-assistant);
|
||||
--color-voice-tool: var(--voice-tool);
|
||||
--radius-control: var(--radius-sm);
|
||||
--radius-panel: var(--radius-md);
|
||||
--radius-card: var(--radius-lg);
|
||||
--radius-control: var(--app-radius-control);
|
||||
--radius-panel: var(--app-radius-panel);
|
||||
--radius-card: var(--app-radius-card);
|
||||
--shadow-panel: var(--shadow-soft);
|
||||
--shadow-brand: var(--shadow-glow-brand);
|
||||
--shadow-card-glass: var(--shadow-glass);
|
||||
@@ -73,17 +73,10 @@
|
||||
--voice-user: var(--accent-2);
|
||||
--voice-assistant: var(--accent);
|
||||
--voice-tool: var(--processing);
|
||||
--audio-level: 0;
|
||||
--bar0: 0;
|
||||
--bar1: 0;
|
||||
--bar2: 0;
|
||||
--bar3: 0;
|
||||
--bar4: 0;
|
||||
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 26px;
|
||||
--radius-xl: 34px;
|
||||
--app-radius-control: 10px;
|
||||
--app-radius-panel: 16px;
|
||||
--app-radius-card: 26px;
|
||||
|
||||
--shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.35);
|
||||
--shadow-glow-brand:
|
||||
@@ -161,9 +154,8 @@
|
||||
--message-user-shadow: none;
|
||||
--message-assistant-shadow: none;
|
||||
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 22px;
|
||||
--radius-xl: 28px;
|
||||
--app-radius-control: 10px;
|
||||
--app-radius-panel: 16px;
|
||||
--app-radius-card: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,986 @@
|
||||
/* Audio-reactive artwork. Runtime CSS variables are written by the audio engine, outside React. */
|
||||
:root {
|
||||
--audio-level: 0;
|
||||
--ai-audio-level: 0;
|
||||
--bar0: 0;
|
||||
--bar1: 0;
|
||||
--bar2: 0;
|
||||
--bar3: 0;
|
||||
--bar4: 0;
|
||||
}
|
||||
|
||||
.stage::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 46%;
|
||||
left: 50%;
|
||||
width: clamp(260px, 58vw, 620px);
|
||||
height: clamp(260px, 58vw, 620px);
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
color-mix(in srgb, var(--brand) 22%, transparent) 0%,
|
||||
color-mix(in srgb, var(--brand-2) 12%, transparent) 45%,
|
||||
transparent 75%
|
||||
);
|
||||
filter: blur(12px);
|
||||
opacity: 0.65;
|
||||
pointer-events: none;
|
||||
border-radius: 999px;
|
||||
animation: pedestalBreathe 8s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: relative;
|
||||
width: clamp(120px, min(38svw, 42svh), 300px);
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--glow, var(--accent));
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
filter 0.18s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.circle::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -8%;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(
|
||||
from 0deg,
|
||||
color-mix(in srgb, var(--brand) 65%, transparent) 0%,
|
||||
color-mix(in srgb, var(--brand-2) 55%, transparent) 35%,
|
||||
color-mix(in srgb, var(--brand-3) 55%, transparent) 65%,
|
||||
color-mix(in srgb, var(--brand) 65%, transparent) 100%
|
||||
);
|
||||
filter: blur(14px);
|
||||
opacity: 0.55;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
animation: orbConicSpin 18s linear infinite;
|
||||
}
|
||||
.circle:hover {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
.circle:hover::before {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.circle:active {
|
||||
transform: scale(0.97);
|
||||
filter: brightness(0.92);
|
||||
}
|
||||
.circle:focus-visible .circle-core {
|
||||
outline: 2px solid var(--glow, var(--accent));
|
||||
outline-offset: 6px;
|
||||
}
|
||||
.circle[disabled] {
|
||||
cursor: default;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.circle-glow {
|
||||
position: absolute;
|
||||
inset: -8%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at center, var(--glow, var(--accent)) 0%, transparent 60%);
|
||||
filter: blur(34px);
|
||||
opacity: 0.55;
|
||||
transform: scale(1);
|
||||
transition:
|
||||
opacity 0.25s,
|
||||
background 0.25s,
|
||||
transform 1.4s ease-in-out;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.circle.state-idle .circle-glow,
|
||||
.circle.state-idle::before {
|
||||
animation:
|
||||
orbConicSpin 22s linear infinite,
|
||||
orbBreatheGlow 5s ease-in-out infinite alternate;
|
||||
}
|
||||
.circle-ring,
|
||||
.circle-ring-outer {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
transition:
|
||||
opacity 0.4s ease,
|
||||
border-color 0.4s ease,
|
||||
transform 0.3s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
.circle-ring {
|
||||
width: 86%;
|
||||
height: 86%;
|
||||
border: 1.5px solid transparent;
|
||||
background:
|
||||
linear-gradient(var(--bg, #07080d), var(--bg, #07080d)) padding-box,
|
||||
conic-gradient(
|
||||
from 0deg,
|
||||
color-mix(in srgb, var(--brand) 80%, transparent),
|
||||
color-mix(in srgb, var(--brand-2) 70%, transparent) 40%,
|
||||
color-mix(in srgb, var(--brand-3) 75%, transparent) 70%,
|
||||
color-mix(in srgb, var(--brand) 80%, transparent)
|
||||
)
|
||||
border-box;
|
||||
border-color: transparent;
|
||||
mask:
|
||||
linear-gradient(#000, #000) content-box,
|
||||
linear-gradient(#000, #000);
|
||||
-webkit-mask:
|
||||
linear-gradient(#000, #000) content-box,
|
||||
linear-gradient(#000, #000);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
box-shadow: 0 0 20px -6px color-mix(in srgb, var(--brand) 55%, transparent);
|
||||
opacity: 0.75;
|
||||
}
|
||||
.circle-ring-outer {
|
||||
width: 98%;
|
||||
height: 98%;
|
||||
border: 1px dashed color-mix(in srgb, var(--glow, var(--accent)) 30%, transparent);
|
||||
opacity: 0.55;
|
||||
}
|
||||
.circle.state-idle .circle-ring-outer {
|
||||
animation: outerRingPulse 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle-core {
|
||||
position: relative;
|
||||
width: 72%;
|
||||
height: 72%;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 20%, transparent 45%),
|
||||
radial-gradient(
|
||||
circle at 35% 28%,
|
||||
color-mix(in srgb, var(--glow, var(--accent)) 32%, transparent),
|
||||
color-mix(in srgb, var(--glow, var(--accent)) 12%, transparent) 55%,
|
||||
color-mix(in srgb, var(--glow, var(--accent)) 5%, transparent)
|
||||
);
|
||||
border: 1.5px solid color-mix(in srgb, var(--glow, var(--accent)) 48%, transparent);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
box-shadow:
|
||||
0 0 44px -8px color-mix(in srgb, var(--glow, var(--accent)) 42%, transparent),
|
||||
inset 0 0 34px color-mix(in srgb, var(--glow, var(--accent)) 22%, transparent),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
||||
transition:
|
||||
background 0.4s ease,
|
||||
border-color 0.4s ease,
|
||||
box-shadow 0.4s ease,
|
||||
transform 0.4s ease;
|
||||
z-index: 2;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
.circle.state-idle .circle-core {
|
||||
animation: coreBreathe 5s ease-in-out infinite alternate;
|
||||
}
|
||||
.circle-indicator {
|
||||
position: relative;
|
||||
width: 44%;
|
||||
height: 44%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--glow, var(--accent));
|
||||
}
|
||||
.circle-indicator > .ind {
|
||||
grid-area: 1 / 1;
|
||||
opacity: 0;
|
||||
transform: scale(0.85);
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.25s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.circle-indicator > svg.ind {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
}
|
||||
.ind-spinner {
|
||||
width: 48%;
|
||||
height: 48%;
|
||||
border: 3px solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: ind-spin 0.9s linear infinite;
|
||||
}
|
||||
.ind-thinking {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
}
|
||||
.ind-thinking .dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.3;
|
||||
animation: thinking-dot 1.25s ease-in-out infinite;
|
||||
}
|
||||
.ind-thinking .dot:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.ind-thinking .dot:nth-child(2) {
|
||||
animation-delay: 0.16s;
|
||||
}
|
||||
.ind-thinking .dot:nth-child(3) {
|
||||
animation-delay: 0.32s;
|
||||
}
|
||||
.ind-bars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
height: 42%;
|
||||
}
|
||||
.ind-bars .bar {
|
||||
width: 4px;
|
||||
min-height: 4px;
|
||||
border-radius: 3px;
|
||||
background: currentColor;
|
||||
opacity: 0.7;
|
||||
--h: var(--bar0, 0);
|
||||
height: calc(4px + var(--h) * 36px);
|
||||
transition:
|
||||
height 0.08s ease-out,
|
||||
opacity 0.08s ease-out;
|
||||
}
|
||||
.ind-bars .bar:nth-child(1) {
|
||||
--h: var(--bar0);
|
||||
}
|
||||
.ind-bars .bar:nth-child(2) {
|
||||
--h: var(--bar1);
|
||||
}
|
||||
.ind-bars .bar:nth-child(3) {
|
||||
--h: var(--bar2);
|
||||
}
|
||||
.ind-bars .bar:nth-child(4) {
|
||||
--h: var(--bar3);
|
||||
}
|
||||
.ind-bars .bar:nth-child(5) {
|
||||
--h: var(--bar4);
|
||||
}
|
||||
.ind-bars .bar {
|
||||
opacity: calc(0.55 + 0.45 * var(--h));
|
||||
}
|
||||
.state-connecting .ind-spinner,
|
||||
.state-queued .ind-spinner,
|
||||
.state-processing .ind-thinking,
|
||||
.state-listening .ind-bars,
|
||||
.state-user-speaking .ind-bars,
|
||||
.state-ai-speaking .ind-voice,
|
||||
.state-error .ind-error {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
.ind-mic {
|
||||
color: color-mix(in srgb, var(--glow, var(--accent)) 85%, white);
|
||||
}
|
||||
.circle-caption {
|
||||
margin: 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.24em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-faint);
|
||||
min-height: 1.3em;
|
||||
text-align: center;
|
||||
opacity: 0.78;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
color 0.25s ease,
|
||||
transform 0.25s ease,
|
||||
min-height 0.25s ease,
|
||||
background 0.3s ease,
|
||||
filter 0.3s ease;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.circle-caption:empty::before {
|
||||
content: "\00a0";
|
||||
}
|
||||
.stage:has(.circle.state-idle) .circle-caption {
|
||||
background: var(--brand-gradient);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
opacity: 1;
|
||||
filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--brand) 40%, transparent));
|
||||
animation: idleCaptionBob 3.6s ease-in-out infinite alternate;
|
||||
}
|
||||
.circle-subcaption {
|
||||
margin: 8px 0 0;
|
||||
max-width: 32ch;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-dim);
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.mic-gate {
|
||||
position: relative;
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.mic-gate-arc {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.orb-wrap.live .mic-gate-arc {
|
||||
opacity: 1;
|
||||
}
|
||||
.mga-track {
|
||||
stroke: rgba(255, 255, 255, 0.1);
|
||||
stroke-width: 1.5;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.mga-fill {
|
||||
stroke: var(--accent-2);
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
opacity: 0.85;
|
||||
transition: stroke-dashoffset 0.06s linear;
|
||||
}
|
||||
.mga-handle {
|
||||
fill: var(--text);
|
||||
stroke: none;
|
||||
transition:
|
||||
fill 0.2s ease,
|
||||
filter 0.2s ease;
|
||||
}
|
||||
.mic-gate.gate-open .mga-handle {
|
||||
fill: var(--accent-2);
|
||||
filter: drop-shadow(0 0 3px var(--accent-2));
|
||||
}
|
||||
.mga-hit {
|
||||
stroke: transparent;
|
||||
stroke-width: 16;
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
}
|
||||
.orb-wrap.live .mga-hit {
|
||||
pointer-events: stroke;
|
||||
}
|
||||
|
||||
.side-btn {
|
||||
flex: none;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: color-mix(in srgb, var(--bg-elev-2) 80%, #2a2e3c);
|
||||
color: var(--text);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
box-shadow:
|
||||
0 6px 16px rgba(0, 0, 0, 0.35),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
opacity: 0;
|
||||
transform: scale(0.55);
|
||||
width: 0;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.25s ease,
|
||||
width 0.25s ease,
|
||||
background 0.15s,
|
||||
color 0.15s,
|
||||
border-color 0.15s;
|
||||
}
|
||||
.side-btn:hover {
|
||||
background: color-mix(in srgb, var(--bg-elev-2) 60%, #323746);
|
||||
border-color: var(--text-dim);
|
||||
}
|
||||
.side-btn svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex: none;
|
||||
}
|
||||
.side-btn.muted {
|
||||
color: #fff;
|
||||
border-color: var(--error);
|
||||
background: color-mix(in srgb, var(--error) 70%, #1a0e13);
|
||||
}
|
||||
.orb-wrap.live .side-btn {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
width: 52px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.circle.state-connecting {
|
||||
--glow: #facc15;
|
||||
}
|
||||
.circle.state-queued {
|
||||
--glow: #94a3b8;
|
||||
}
|
||||
.circle.state-queued .ind-spinner {
|
||||
animation-duration: 2.4s;
|
||||
}
|
||||
.circle.state-queued .circle-ring {
|
||||
animation: breathe 2.6s ease-in-out infinite;
|
||||
}
|
||||
.circle.state-your-turn {
|
||||
--glow: var(--accent);
|
||||
}
|
||||
.circle.state-your-turn .circle-ring {
|
||||
animation: breathe 1.6s ease-in-out infinite;
|
||||
}
|
||||
.circle.state-listening,
|
||||
.circle.state-user-speaking {
|
||||
--glow: var(--listening);
|
||||
}
|
||||
.circle.state-processing {
|
||||
--glow: var(--processing);
|
||||
}
|
||||
.circle.state-ai-speaking {
|
||||
--glow: var(--speaking);
|
||||
}
|
||||
.circle.state-error {
|
||||
--glow: var(--error);
|
||||
}
|
||||
.circle.state-connecting .circle-core {
|
||||
animation: thinking 1.4s ease-in-out infinite;
|
||||
}
|
||||
.circle.state-user-speaking .circle-ring {
|
||||
animation: none;
|
||||
opacity: calc(0.25 + 0.55 * var(--audio-level));
|
||||
transform: translate(-50%, -50%) scale(calc(1 + 0.08 * var(--audio-level)));
|
||||
transition:
|
||||
transform 0.08s linear,
|
||||
opacity 0.08s linear;
|
||||
}
|
||||
.circle.state-user-speaking .circle-ring-outer {
|
||||
opacity: calc(0.1 + 0.35 * var(--audio-level));
|
||||
transform: translate(-50%, -50%) scale(calc(1 + 0.12 * var(--audio-level)));
|
||||
transition:
|
||||
transform 0.08s linear,
|
||||
opacity 0.08s linear;
|
||||
}
|
||||
.circle.state-listening .circle-ring {
|
||||
animation: breathe 2s ease-in-out infinite;
|
||||
}
|
||||
.circle.state-ai-speaking .circle-core {
|
||||
animation: none;
|
||||
transform: scale(calc(1 + 0.09 * var(--ai-audio-level, 0)));
|
||||
transition: transform 0.08s linear;
|
||||
}
|
||||
.circle.state-ai-speaking .circle-ring {
|
||||
animation: none;
|
||||
opacity: calc(0.3 + 0.5 * var(--ai-audio-level, 0));
|
||||
transform: translate(-50%, -50%) scale(calc(1 + 0.05 * var(--ai-audio-level, 0)));
|
||||
transition:
|
||||
transform 0.08s linear,
|
||||
opacity 0.08s linear;
|
||||
}
|
||||
.circle.state-ai-speaking .circle-ring-outer {
|
||||
animation: none;
|
||||
opacity: calc(0.15 + 0.55 * var(--ai-audio-level, 0));
|
||||
transform: translate(-50%, -50%) scale(calc(1 + 0.18 * var(--ai-audio-level, 0)));
|
||||
transition:
|
||||
transform 0.08s linear,
|
||||
opacity 0.08s linear;
|
||||
}
|
||||
.circle.state-ai-speaking .circle-glow {
|
||||
opacity: calc(0.35 + 0.45 * var(--ai-audio-level, 0));
|
||||
transition: opacity 0.08s linear;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.circle {
|
||||
width: clamp(110px, min(56svw, 36svh), 220px);
|
||||
}
|
||||
.side-btn {
|
||||
width: 44px;
|
||||
height: 0;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.25s ease,
|
||||
height 0.25s ease,
|
||||
background 0.15s,
|
||||
color 0.15s,
|
||||
border-color 0.15s;
|
||||
}
|
||||
.side-btn svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
.orb-wrap.live .side-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.mic-gate-arc {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 601px) {
|
||||
.circle-caption {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@media (max-height: 780px) {
|
||||
.circle {
|
||||
width: clamp(130px, min(36svw, 38svh), 280px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 560px) {
|
||||
.circle {
|
||||
width: clamp(90px, min(40svw, 34svh), 200px);
|
||||
}
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 116px;
|
||||
height: 116px;
|
||||
border-radius: 999px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
color: #ffffff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
flex: none;
|
||||
transition:
|
||||
transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
|
||||
box-shadow 180ms ease;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle .wmc-halo {
|
||||
position: absolute;
|
||||
inset: -22px;
|
||||
border-radius: 999px;
|
||||
background: radial-gradient(closest-side, rgba(59, 130, 246, 0.22), rgba(59, 130, 246, 0.1) 55%, transparent 75%);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
animation: wmcHaloPulse 3.2s ease-in-out infinite alternate;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle .wmc-ring {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 999px;
|
||||
padding: 4px;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 45%, #60a5fa 100%);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle .wmc-ring::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle .wmc-core {
|
||||
position: absolute;
|
||||
inset: 4px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 55%, #60a5fa 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.35),
|
||||
inset 0 -3px 6px rgba(15, 23, 42, 0.12),
|
||||
0 8px 22px rgba(37, 99, 235, 0.22);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle .wmc-icon {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
color: #ffffff;
|
||||
fill: #ffffff;
|
||||
stroke: #ffffff;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex: none;
|
||||
display: none;
|
||||
filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.14));
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle.state-idle > svg.wmc-icon.wmc-mic,
|
||||
html[data-theme="white"] .white-mic-circle.state-idle .wmc-icon.wmc-mic,
|
||||
html[data-theme="white"] .white-mic-circle.state-listening .wmc-icon.wmc-mic,
|
||||
html[data-theme="white"] .white-mic-circle.state-user-speaking .wmc-icon.wmc-mic,
|
||||
html[data-theme="white"] .white-mic-circle.state-ai-speaking .wmc-icon.wmc-mic {
|
||||
display: inline-flex;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle.state-your-turn > svg.wmc-icon.wmc-mic,
|
||||
html[data-theme="white"] .white-mic-circle.state-your-turn .wmc-icon.wmc-mic {
|
||||
display: inline-flex;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle.state-error > svg.wmc-icon.wmc-mic,
|
||||
html[data-theme="white"] .white-mic-circle.state-error .wmc-icon.wmc-mic {
|
||||
display: inline-flex;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle.state-processing > .wmc-icon.wmc-spinner,
|
||||
html[data-theme="white"] .white-mic-circle.state-processing .wmc-icon.wmc-spinner,
|
||||
html[data-theme="white"] .white-mic-circle.state-connecting > .wmc-icon.wmc-spinner,
|
||||
html[data-theme="white"] .white-mic-circle.state-connecting .wmc-icon.wmc-spinner,
|
||||
html[data-theme="white"] .white-mic-circle.state-queued > .wmc-icon.wmc-spinner,
|
||||
html[data-theme="white"] .white-mic-circle.state-queued .wmc-icon.wmc-spinner {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 999px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.22);
|
||||
border-top-color: #ffffff;
|
||||
animation: voice-spinner-spin 850ms linear infinite;
|
||||
margin: 4px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle:focus-visible {
|
||||
outline: 3px solid #1d4ed8;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle.state-your-turn .wmc-ring {
|
||||
animation: wmcListeningPulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform {
|
||||
position: absolute;
|
||||
top: calc(22px + 116px / 2);
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
height: 70px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform-left {
|
||||
left: calc(50% - 58px - 90px);
|
||||
}
|
||||
html[data-theme="white"] .white-waveform-right {
|
||||
right: calc(50% - 58px - 90px);
|
||||
}
|
||||
html[data-theme="white"] .white-waveform .w-bar {
|
||||
display: block;
|
||||
width: 6px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #3b82f6, #60a5fa);
|
||||
opacity: 0.8;
|
||||
transform-origin: center;
|
||||
height: calc(var(--bar-h, 0.5) * 70px);
|
||||
min-height: 8px;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle.state-your-turn ~ * .w-bar,
|
||||
html[data-theme="white"] .white-mic-stage:has(.state-your-turn) .w-bar {
|
||||
animation: wBarDance 900ms ease-in-out infinite alternate;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform .wb-1 {
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform .wb-2 {
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform .wb-3 {
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform .wb-4 {
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform .wb-5 {
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform .wb-6 {
|
||||
animation-delay: -0.1s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform .wb-7 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform-right .wb-1 {
|
||||
animation-delay: -0s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform-right .wb-2 {
|
||||
animation-delay: -0.1s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform-right .wb-3 {
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform-right .wb-4 {
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform-right .wb-5 {
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform-right .wb-6 {
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform-right .wb-7 {
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
html[data-theme="white"] .white-waveform-left {
|
||||
left: calc(50% - 58px - 72px);
|
||||
}
|
||||
html[data-theme="white"] .white-waveform-right {
|
||||
right: calc(50% - 58px - 72px);
|
||||
}
|
||||
html[data-theme="white"] .white-waveform {
|
||||
gap: 5px;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform .w-bar {
|
||||
width: 5px;
|
||||
}
|
||||
}
|
||||
@media (max-height: 640px) {
|
||||
html[data-theme="white"] .white-mic-circle {
|
||||
width: 98px;
|
||||
height: 98px;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle .wmc-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle.state-processing .wmc-spinner,
|
||||
html[data-theme="white"] .white-mic-circle.state-connecting .wmc-spinner,
|
||||
html[data-theme="white"] .white-mic-circle.state-queued .wmc-spinner {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform .w-bar {
|
||||
height: calc(var(--bar-h, 0.5) * 56px);
|
||||
}
|
||||
html[data-theme="white"] .white-waveform {
|
||||
height: 56px;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform-left {
|
||||
left: calc(50% - 49px - 76px);
|
||||
top: calc(14px + 49px);
|
||||
}
|
||||
html[data-theme="white"] .white-waveform-right {
|
||||
right: calc(50% - 49px - 76px);
|
||||
top: calc(14px + 49px);
|
||||
}
|
||||
}
|
||||
.circle-caption {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.circle {
|
||||
width: clamp(110px, 32vw, 176px);
|
||||
}
|
||||
.orb-wrap.live .side-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.mic-gate-arc {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
}
|
||||
html[data-theme="white"] .white-waveform {
|
||||
top: 74px;
|
||||
}
|
||||
}
|
||||
@media (max-height: 640px) {
|
||||
html[data-theme="white"] .white-waveform {
|
||||
top: 57px;
|
||||
}
|
||||
}
|
||||
.state-idle .ind-mic {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle svg.wmc-mic {
|
||||
fill: none;
|
||||
}
|
||||
.mic-gate-arc:focus-visible {
|
||||
outline: 2px solid var(--accent-2);
|
||||
outline-offset: 4px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@keyframes voice-spinner-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes pedestalBreathe {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 0.55;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.06);
|
||||
opacity: 0.75;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(0.98);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
@keyframes orbConicSpin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes orbBreatheGlow {
|
||||
0% {
|
||||
opacity: 0.42;
|
||||
transform: scale(0.985);
|
||||
filter: blur(30px);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.72;
|
||||
transform: scale(1.04);
|
||||
filter: blur(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.48;
|
||||
transform: scale(1);
|
||||
filter: blur(32px);
|
||||
}
|
||||
}
|
||||
@keyframes outerRingPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.65;
|
||||
transform: translate(-50%, -50%) scale(1.02);
|
||||
}
|
||||
}
|
||||
@keyframes coreBreathe {
|
||||
0% {
|
||||
transform: scale(0.992);
|
||||
box-shadow:
|
||||
0 0 36px -8px color-mix(in srgb, var(--brand) 40%, transparent),
|
||||
inset 0 0 26px color-mix(in srgb, var(--brand) 16%, transparent);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.01);
|
||||
box-shadow:
|
||||
0 0 54px -4px color-mix(in srgb, var(--brand-2) 48%, transparent),
|
||||
inset 0 0 38px color-mix(in srgb, var(--brand-2) 22%, transparent);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow:
|
||||
0 0 44px -6px color-mix(in srgb, var(--brand-3) 42%, transparent),
|
||||
inset 0 0 32px color-mix(in srgb, var(--brand-3) 20%, transparent);
|
||||
}
|
||||
}
|
||||
@keyframes idleCaptionBob {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
letter-spacing: 0.24em;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-1px);
|
||||
letter-spacing: 0.26em;
|
||||
}
|
||||
}
|
||||
@keyframes breathe {
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.06);
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
@keyframes thinking {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.96);
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
@keyframes thinking-dot {
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
transform: scale(0.7);
|
||||
opacity: 0.3;
|
||||
}
|
||||
30% {
|
||||
transform: scale(1.15);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ind-spin {
|
||||
from {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: scale(1) rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes wmcHaloPulse {
|
||||
0% {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.75;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.08);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes wmcListeningPulse {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 18px rgba(59, 130, 246, 0);
|
||||
}
|
||||
}
|
||||
@keyframes wBarDance {
|
||||
from {
|
||||
transform: scaleY(0.55);
|
||||
}
|
||||
to {
|
||||
transform: scaleY(1.05);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user