@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --bg: #020711; --panel: rgba(3, 19, 35, .88); --panel-soft: rgba(8, 31, 52, .54); --cyan: #59e7ff; --cyan-soft: #2aa7c6; --blue: #1d70e8; --text: #effbff; --muted: #87a7bb; --line: rgba(86, 203, 239, .21); --mono: 'IBM Plex Mono', monospace; --display: 'Space Grotesk', system-ui, sans-serif; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--text); background: radial-gradient(ellipse at 50% 30%, #07345b 0%, #031426 28%, var(--bg) 70%); font-family: var(--display); }
button, input { font: inherit; }
button { cursor: pointer; }
.ambient { position: fixed; width: 36vw; height: 36vw; border-radius: 50%; filter: blur(55px); opacity: .12; pointer-events: none; }
.ambient-one { top: 3%; left: -10%; background: #006dff; }
.ambient-two { right: -12%; bottom: 4%; background: #00d9ff; }
.scanlines { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .04; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, #b9efff 4px); mix-blend-mode: screen; }
.topbar { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 25px 0 12px; border-bottom: 1px solid rgba(91, 211, 239, .12); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 700; letter-spacing: .36em; }
.brand-mark { display: inline-flex; align-items: end; gap: 3px; height: 18px; }
.brand-mark i { display: block; width: 3px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transform: skew(-18deg); }
.brand-mark i:nth-child(1) { height: 7px; }.brand-mark i:nth-child(2) { height: 13px; }.brand-mark i:nth-child(3) { height: 18px; }
.system-readout, .readout-muted { color: var(--muted); font: 10px var(--mono); letter-spacing: .12em; }
.system-readout { display: flex; align-items: center; gap: 8px; }.system-readout #system-status { color: #85dfbe; }.readout-divider { opacity: .4; }.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #6de8bf; box-shadow: 0 0 10px #6de8bf; }.status-dot.busy { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 1s infinite; }.status-dot.error { background: #ff7d9a; box-shadow: 0 0 10px #ff7d9a; }
.app-shell { position: relative; z-index: 1; width: min(1000px, calc(100% - 48px)); min-height: calc(100vh - 105px); margin: 0 auto; padding: 68px 0 42px; }
.hero-copy { position: relative; z-index: 2; width: min(440px, 75%); }.eyebrow, .panel-kicker, .stage-label, .avatar-hud { color: var(--cyan); font: 10px var(--mono); letter-spacing: .16em; }.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 19px; }.eyebrow-line { width: 31px; height: 1px; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
h1 { margin: 0; color: #e9faff; font-size: clamp(47px, 7vw, 78px); line-height: .91; letter-spacing: -.065em; }.hero-copy h1 em { color: var(--cyan); font-style: normal; text-shadow: 0 0 27px rgba(89, 231, 255, .3); }.hero-description { max-width: 370px; margin: 23px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.avatar-stage { position: relative; height: 410px; margin: -76px auto 0; }.three-canvas { position: absolute; inset: 0; z-index: 2; }.three-canvas canvas { display: block; width: 100%; height: 100%; }.avatar-glow { position: absolute; z-index: 1; top: 32%; left: 50%; width: 220px; height: 180px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0, 180, 255, .23); filter: blur(45px); }.css-avatar { position: absolute; top: 50%; left: 50%; width: 135px; height: 235px; transform: translate(-50%, -45%); filter: drop-shadow(0 0 15px rgba(0, 205, 255, .45)); animation: cssAvatarFloat 3.2s ease-in-out infinite; }.avatar-paused .css-avatar { animation-play-state: paused; }.css-avatar-head { position: absolute; z-index: 3; top: 18px; left: 27px; width: 81px; height: 91px; border: 1px solid rgba(150, 219, 255, .78); border-radius: 47% 47% 42% 42%; background: linear-gradient(145deg, #a4d7ed 0%, #4d84a7 35%, #183957 72%, #071423); box-shadow: inset 0 -15px 20px rgba(1, 12, 26, .68), 0 0 12px rgba(0, 207, 255, .4); }.css-avatar-head::before { content: ''; position: absolute; top: 1px; left: 5px; width: 69px; height: 26px; border-radius: 50% 50% 15% 15%; background: #05101e; }.css-avatar-head::after { content: ''; position: absolute; right: -8px; bottom: 24px; width: 13px; height: 27px; border: 1px solid var(--cyan); border-left: 0; border-radius: 0 12px 12px 0; box-shadow: 0 0 8px var(--cyan); }.css-avatar-visor { position: absolute; z-index: 2; top: 43px; left: 9px; display: flex; justify-content: space-around; width: 63px; height: 12px; padding: 3px 13px; border: 1px solid rgba(0, 207, 255, .8); border-radius: 50%; background: rgba(0, 207, 255, .16); box-shadow: 0 0 12px rgba(0, 207, 255, .8), inset 0 0 8px rgba(0, 207, 255, .55); }.css-avatar-visor i { width: 7px; height: 2px; background: #e6fcff; box-shadow: 0 0 5px 2px var(--cyan); }.css-avatar-head > span { position: absolute; left: 35px; bottom: 15px; width: 11px; height: 2px; border-radius: 50%; background: #06101a; }.css-avatar-neck { position: absolute; z-index: 2; top: 101px; left: 53px; width: 29px; height: 22px; border: 1px solid #2e7394; border-top: 0; background: #081e32; }.css-avatar-body { position: absolute; top: 112px; left: 12px; width: 111px; height: 108px; border: 1px solid #2d7395; border-radius: 42px 42px 18px 18px; background: linear-gradient(165deg, #0d3652, #071b31 58%, #020b16); box-shadow: inset 0 4px 14px rgba(78, 190, 230, .2); }.css-avatar-body::before { content: ''; position: absolute; top: 16px; left: 14px; width: 81px; height: 60px; border: 1px solid rgba(89, 231, 255, .24); border-radius: 50%; transform: scaleY(.9); }.css-avatar-core { position: absolute; top: 40px; left: 42px; width: 26px; height: 26px; border: 1px solid #b1f8ff; border-radius: 50%; background: #0084ad; box-shadow: 0 0 13px 4px #00cfff, inset 0 0 8px #d6fdff; }.css-avatar-arm { position: absolute; top: 126px; width: 22px; height: 82px; border: 1px solid #28617e; border-radius: 14px; background: linear-gradient(90deg, #09213a, #174765); }.css-avatar-arm-left { left: 0; transform: rotate(8deg); }.css-avatar-arm-right { right: 0; transform: rotate(-8deg); }.orbit { position: absolute; z-index: 0; top: 49%; left: 50%; border: 1px solid rgba(89, 231, 255, .27); border-radius: 50%; transform: translate(-50%, -50%) rotate(-19deg); box-shadow: 0 0 20px rgba(0, 192, 255, .06), inset 0 0 20px rgba(0, 192, 255, .04); }.orbit-outer { width: min(520px, 75vw); height: 205px; animation: orbitSpin 26s linear infinite; }.orbit-mid { width: min(390px, 57vw); height: 145px; transform: translate(-50%, -50%) rotate(62deg); border-style: dashed; opacity: .7; animation: orbitSpinReverse 19s linear infinite; }.orbit-inner { width: min(270px, 42vw); height: 100px; transform: translate(-50%, -50%) rotate(-46deg); opacity: .7; animation: orbitSpin 14s linear infinite; }.orbit-node { position: absolute; z-index: 3; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px 3px var(--cyan); }.node-a { top: 29%; left: calc(50% - min(250px, 37vw)); }.node-b { top: 69%; left: calc(50% + min(205px, 31vw)); }.stage-label { position: absolute; z-index: 4; font-size: 9px; color: #557f99; }.stage-label span { display: inline-block; width: 24px; height: 1px; margin-left: 8px; vertical-align: middle; background: var(--cyan); }.stage-label-top { top: 18px; left: 10%; }.stage-label-bottom { right: 8%; bottom: 23px; }.stage-label-bottom strong { color: #6de8bf; font-weight: 500; }.avatar-hud { position: absolute; z-index: 4; top: 42%; color: #557f99; font-size: 8px; line-height: 1.75; }.avatar-hud strong { color: var(--cyan); font-size: 10px; font-weight: 500; }.avatar-hud-left { left: 7%; }.avatar-hud-right { right: 7%; text-align: right; }.audio-bars { position: absolute; z-index: 5; bottom: 43px; left: 50%; display: flex; gap: 3px; align-items: center; height: 19px; transform: translateX(-50%); opacity: .45; }.audio-bars i { width: 2px; height: 7px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }.audio-bars i:nth-child(2), .audio-bars i:nth-child(6) { height: 13px; }.audio-bars i:nth-child(3), .audio-bars i:nth-child(5) { height: 18px; }.audio-bars i:nth-child(4) { height: 10px; }.is-speaking .audio-bars { opacity: 1; }.is-speaking .audio-bars i { animation: voiceBar .6s ease-in-out infinite alternate; }.is-speaking .audio-bars i:nth-child(2n) { animation-delay: -.3s; }
.command-panel { position: relative; z-index: 6; width: min(680px, 100%); margin: -1px auto 0; padding: 23px 26px 17px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(5, 30, 52, .96), rgba(2, 13, 26, .95)); box-shadow: 0 20px 60px rgba(0, 0, 0, .3), 0 0 30px rgba(0, 157, 255, .08), inset 0 1px rgba(144, 235, 255, .08); }.command-panel::before { content: ''; position: absolute; top: -1px; left: 38px; width: 76px; height: 1px; background: var(--cyan); box-shadow: 0 0 11px var(--cyan); }.panel-topline, .panel-heading, .panel-footer { display: flex; align-items: center; justify-content: space-between; }.panel-kicker { margin: 0; color: #6399b1; font-size: 9px; }.sound-toggle, .animate-button { border: 0; color: #6b98ac; background: none; font: 9px var(--mono); letter-spacing: .08em; }.sound-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 3px 0; }.sound-toggle:hover, .sound-toggle:focus-visible, .animate-button:hover, .animate-button:focus-visible { color: var(--cyan); }.sound-icon { color: var(--cyan); font-size: 14px; transform: rotate(-45deg); }.panel-heading { margin: 16px 0 17px; align-items: start; }.panel-heading h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.04em; }.panel-heading p { margin: 0; color: #7294aa; font-size: 12px; }.live-pill { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: #6de8bf; font: 9px var(--mono); letter-spacing: .12em; }.live-pill span { width: 5px; height: 5px; border-radius: 50%; background: #6de8bf; box-shadow: 0 0 8px #6de8bf; }
.conversation { display: flex; flex-direction: column; gap: 11px; max-height: 245px; overflow: auto; margin: 0 -7px 14px; padding: 0 7px 2px; scrollbar-color: #1a5778 transparent; scrollbar-width: thin; }.message { display: flex; gap: 10px; max-width: 93%; animation: messageIn .3s ease both; }.message-user { align-self: flex-end; flex-direction: row-reverse; }.message-avatar { flex: 0 0 25px; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(89, 231, 255, .55); border-radius: 7px; color: var(--cyan); background: #082c45; font: 11px var(--mono); }.message-user .message-avatar { color: #bfefff; border-color: #285eac; background: #123c75; }.message-body { padding: 2px 10px 7px; border-bottom: 1px solid rgba(89, 231, 255, .1); }.message-user .message-body { text-align: right; }.message-label { display: block; margin-bottom: 4px; color: #6a99ad; font: 8px var(--mono); letter-spacing: .12em; }.message-label time { margin-left: 5px; color: #44677a; }.message-body p { margin: 0; color: #cbeaf3; font-size: 12px; line-height: 1.52; white-space: pre-wrap; }.message.thinking .message-body p { color: var(--cyan); }.thinking-dots span { animation: dotPulse 1s infinite; }.thinking-dots span:nth-child(2) { animation-delay: .15s; }.thinking-dots span:nth-child(3) { animation-delay: .3s; }
.composer { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid rgba(86, 203, 239, .23); border-radius: 11px; background: rgba(1, 11, 23, .82); transition: border-color .2s, box-shadow .2s; }.composer:focus-within { border-color: rgba(89, 231, 255, .7); box-shadow: 0 0 18px rgba(0, 196, 255, .1); }.composer input { min-width: 0; flex: 1; padding: 8px 8px 8px 10px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }.composer input::placeholder { color: #51748a; }.mic-button, .send-button { flex: 0 0 auto; height: 32px; border: 1px solid rgba(89, 231, 255, .3); border-radius: 7px; color: var(--cyan); background: #07263e; }.mic-button { width: 34px; font-size: 10px; }.mic-button:hover, .mic-button:focus-visible, .mic-button.listening { border-color: var(--cyan); background: #0a4762; box-shadow: 0 0 12px rgba(89, 231, 255, .25); }.mic-button.listening { animation: micPulse 1s infinite; }.send-button { display: inline-flex; align-items: center; gap: 11px; padding: 0 12px; border-color: transparent; color: #03111d; background: linear-gradient(120deg, var(--cyan), #378de9); font: 9px var(--mono); font-weight: 600; letter-spacing: .08em; }.send-button:hover, .send-button:focus-visible { filter: brightness(1.13); }.send-button:disabled, .mic-button:disabled { cursor: wait; opacity: .48; }.send-button b { font-size: 15px; font-weight: 400; }.panel-footer { margin-top: 10px; color: #527487; font: 9px var(--mono); }.animate-button span { color: var(--cyan); font-size: 12px; }.privacy-note { margin: 19px auto 0; color: #4d7185; text-align: center; font: 9px var(--mono); letter-spacing: .04em; }.privacy-note span { color: var(--cyan); }.footer { position: relative; z-index: 1; display: flex; justify-content: space-between; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 13px 0 19px; color: #3d5b6c; border-top: 1px solid rgba(91, 211, 239, .08); font: 8px var(--mono); letter-spacing: .12em; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@keyframes orbitSpin { to { transform: translate(-50%, -50%) rotate(341deg); } } @keyframes orbitSpinReverse { to { transform: translate(-50%, -50%) rotate(-298deg); } } @keyframes cssAvatarFloat { 50% { transform: translate(-50%, -49%); } } @keyframes blink { 50% { opacity: .35; } } @keyframes micPulse { 50% { box-shadow: 0 0 0 5px rgba(89, 231, 255, .08), 0 0 14px rgba(89, 231, 255, .42); } } @keyframes voiceBar { to { transform: scaleY(.35); } } @keyframes messageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @keyframes dotPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (max-width: 700px) { .topbar, .footer, .app-shell { width: min(100% - 30px, 540px); }.topbar { padding-top: 18px; }.app-shell { padding-top: 45px; }.hero-copy { width: 100%; }.hero-description { max-width: 315px; }.avatar-stage { height: 335px; margin-top: -25px; }.avatar-hud { display: none; }.stage-label-top { left: 1%; }.stage-label-bottom { right: 1%; bottom: 13px; }.command-panel { padding: 19px 15px 14px; }.panel-heading h2 { font-size: 18px; }.panel-footer { gap: 10px; }.privacy-note { line-height: 1.5; }.footer span:nth-child(2) { display: none; } }
@media (max-width: 440px) { h1 { font-size: 52px; }.system-readout .readout-divider, .system-readout .readout-muted { display: none; }.avatar-stage { height: 305px; }.orbit-outer { width: 115vw; }.orbit-mid { width: 90vw; }.orbit-inner { width: 64vw; }.composer { gap: 4px; }.send-button { padding: 0 9px; }.send-button span { display: none; }.mic-button { width: 31px; }.panel-footer { font-size: 8px; }.footer { font-size: 7px; } }


/* Presence Link: câmera e microfone permanecem locais ao navegador. */
.presence-panel { margin-top: 15px; padding: 14px 0 2px; border-top: 1px solid rgba(86, 203, 239, .12); }
.presence-heading { display: flex; align-items: start; justify-content: space-between; margin-bottom: 11px; }
.presence-heading h3 { margin: 5px 0 0; color: #cceef7; font-size: 13px; font-weight: 500; letter-spacing: -.02em; }
.local-badge { padding: 4px 6px; border: 1px solid rgba(109, 232, 191, .3); border-radius: 4px; color: #6de8bf; font: 8px var(--mono); letter-spacing: .12em; }
.presence-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 9px; }
.presence-card { min-width: 0; padding: 9px; border: 1px solid rgba(86, 203, 239, .14); border-radius: 9px; background: rgba(1, 14, 28, .62); }
.presence-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #6791a5; font: 8px var(--mono); letter-spacing: .08em; }
.presence-icon { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid rgba(89, 231, 255, .36); border-radius: 50%; color: var(--cyan); font-size: 9px; }
.camera-preview { position: relative; display: grid; place-items: center; height: 73px; overflow: hidden; border: 1px solid rgba(89, 231, 255, .13); border-radius: 6px; background: radial-gradient(circle, rgba(13, 72, 103, .6), rgba(1, 9, 18, .9)); }
.camera-preview video { display: none; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: .86; }
.camera-preview.active video { display: block; }
.camera-placeholder { color: #527689; font: 8px var(--mono); letter-spacing: .08em; }.camera-placeholder[hidden] { display: none; }
.camera-preview i { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: #ff6f91; box-shadow: 0 0 7px #ff6f91; }.camera-preview.active i { background: #6de8bf; box-shadow: 0 0 7px #6de8bf; }
.presence-button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 8px; padding: 7px 8px; border: 1px solid rgba(89, 231, 255, .2); border-radius: 5px; color: #77a5b9; background: rgba(7, 38, 62, .7); font: 8px var(--mono); letter-spacing: .06em; }.presence-button b { color: var(--cyan); font-size: 10px; font-weight: 400; }.presence-button:hover, .presence-button:focus-visible, .presence-button.active { border-color: rgba(89, 231, 255, .72); color: var(--cyan); background: rgba(10, 71, 96, .68); }.presence-button.active b { color: #6de8bf; }
.mic-visualizer { position: relative; display: grid; place-items: center; height: 73px; overflow: hidden; padding: 0 8px; border: 1px solid rgba(89, 231, 255, .13); border-radius: 6px; background: radial-gradient(circle, rgba(13, 72, 103, .6), rgba(1, 9, 18, .9)); }.mic-visualizer::before { content: ''; position: absolute; inset: 8px; border: 1px dashed rgba(89, 231, 255, .1); border-radius: 50%; }.mic-visualizer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }.mic-scope-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; color: #6e9db0; font: 7px var(--mono); line-height: 1.2; letter-spacing: .08em; pointer-events: none; }.mic-scope-center strong { color: #d2fbff; font: 600 17px var(--display); letter-spacing: -.05em; text-shadow: 0 0 9px var(--cyan); }.scope-corner { position: absolute; z-index: 2; width: 7px; height: 7px; border-color: rgba(89, 231, 255, .55); }.scope-corner-tl { top: 7px; left: 7px; border-top: 1px solid; border-left: 1px solid; }.scope-corner-br { right: 7px; bottom: 7px; border-right: 1px solid; border-bottom: 1px solid; }.mic-stats { display: flex; justify-content: space-between; margin-top: 5px; color: #4e8298; font: 7px var(--mono); letter-spacing: .08em; }.mic-stats span:first-child { color: var(--cyan); }.presence-note { margin: 9px 0 0; color: #4e7488; font: 8px var(--mono); line-height: 1.45; }.presence-note span { color: var(--cyan); }
@media (max-width: 440px) { .presence-grid { grid-template-columns: 1fr; }.camera-preview, .mic-visualizer { height: 62px; } }