/* Neyro motion system: quiet surfaces, observable work, stable streaming. */
:root { --motion-fast:140ms; --motion-enter:320ms; --motion-panel:400ms; --motion-ease:cubic-bezier(.22,1,.36,1); }
[hidden] { display:none!important; }
button:focus-visible, a:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.main-pane { position:relative; }
.conversation-scroller { scroll-behavior:auto; }
.main-pane { container-type:inline-size; }
.topbar-left,.topbar-right,.section-title-wrap { min-width:0; }
.section-title { white-space:nowrap; }
.project-card-head { flex-wrap:wrap; gap:14px; }
.project-card-actions { display:flex; flex-wrap:wrap; gap:6px; max-width:100%; }
.project-card-actions button { flex:none; }
.studio-tabs { display:flex; gap:4px; padding:6px 10px; height:46px; min-height:46px; overflow-x:auto; overflow-y:hidden; align-items:center; background:var(--surface); }
.studio-tab { border:0; padding:8px 12px; border-radius:8px; color:var(--muted); background:transparent; font-size:12px; white-space:nowrap; cursor:pointer; }
.studio-tab:hover { background:var(--hover); color:var(--ink); }
.studio-tab.active { background:var(--surface-3); color:var(--ink); }
.preview-urlbar { height:auto; min-height:40px; padding:8px 10px; flex-wrap:wrap; }
.preview-title-wrap { flex:1; }
.preview-title-wrap strong { max-width:100%; }
.preview-head { gap:12px; }
.preview-stage { overflow:hidden; }
.preview-stage[data-device] iframe { min-height:0; height:100%; max-height:100%; }
.workspace-details { margin:0; }
.workspace-details summary { cursor:pointer; padding:12px 0 8px; color:var(--muted); font-size:12px; }
.workspace-run:not(.done) .workspace-details summary { display:none; }
.workspace-run.done .workspace-run-copy strong { font-size:14px; }
.workspace-run.done .workspace-foot { padding-top:10px; }
@container(max-width:520px) { .section-subtitle,.topbar-action-label,.wallet-unit{display:none}.wallet-pill{padding:6px 8px}.topbar{gap:8px;padding-inline:14px}.composer-model-trigger{max-width:110px;min-width:0}.composer-model-name{font-size:11px}.workspace-run-time{font-size:10px}.web-search-toggle span{display:none}.web-search-toggle{width:34px!important;padding:0!important;justify-content:center}.web-search-toggle::before{left:6px!important}.web-search-toggle svg{margin:0!important}.composer-tools-left,.composer-tools-right{min-width:0;gap:4px}.composer-tools-right{flex:1;justify-content:flex-end}.send-button{flex:none}.composer-meta-row{flex-wrap:wrap;padding-top:5px;gap:4px}.service-status{position:static}.composer-note{width:100%;font-size:9px;line-height:1.5;padding-top:0!important} }
.message { animation:message-arrive var(--motion-enter) var(--motion-ease) both; }
.assistant-content.is-streaming p:last-of-type,.assistant-content.is-streaming li:last-child { animation:none; }
.streaming-cursor { width:5px; height:5px; vertical-align:2px; margin-left:6px; opacity:.5; animation:quiet-pulse 1.3s ease-in-out infinite; }
.thinking-line { gap:8px; min-height:36px; }
.thinking-label { background:linear-gradient(110deg,var(--faint) 20%,var(--ink) 45%,var(--faint) 70%); background-size:220% 100%; background-clip:text; color:transparent; animation:text-sweep 2.6s linear infinite; }
.thinking-orb { width:8px; height:8px; box-shadow:none; animation:quiet-pulse 1.7s ease-in-out infinite; }
.thinking-dots { display:inline-flex; gap:3px; margin-left:1px; }
.thinking-dots i { width:3px; height:3px; border-radius:50%; background:var(--faint); animation:dot-breathe 1.4s ease-in-out infinite; }
.thinking-dots i:nth-child(2) { animation-delay:150ms; }
.thinking-dots i:nth-child(3) { animation-delay:300ms; }
.welcome-mark { animation:none; }
.suggestion { transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast); }
.suggestion:hover { transform:translateY(-2px); }
.welcome h1 { letter-spacing:-.04em; }
.workspace-run { background:var(--surface); border-radius:16px; box-shadow:none; animation:message-arrive var(--motion-enter) var(--motion-ease) both; }
.workspace-run-glow { display:none; }
.workspace-run-copy strong { font-size:14px; line-height:1.55; letter-spacing:-.02em; }
.workspace-run-copy small { font-size:11px; line-height:1.6; }
.workspace-action-line { font-size:12px; line-height:1.7; animation:activity-arrive 240ms var(--motion-ease) both; }
.workspace-action-line.active { color:var(--ink); }
.workspace-action-line.active .workspace-action-dot { box-shadow:none; animation:quiet-pulse 1.8s ease-in-out infinite; }
.workspace-run:not(.done) .workspace-progress span { transition:width 650ms var(--motion-ease); }
.workspace-progress { height:2px; opacity:.55; }
.workspace-file { animation:activity-arrive var(--motion-enter) var(--motion-ease) both; }
.workspace-file:nth-child(2) { animation-delay:35ms; }
.workspace-file:nth-child(3) { animation-delay:70ms; }
.workspace-file-name { font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.workspace-run.done .workspace-progress { opacity:.25; }
.workspace-run.done .workspace-action-head .workspace-action-pulse { animation:none; opacity:.3; }
.workspace-phase.active i { animation:quiet-pulse 1.7s ease-in-out infinite; }
.project-card { animation:message-arrive 380ms var(--motion-ease) both; }
.preview-panel { transition:width var(--motion-panel) var(--motion-ease),flex-basis var(--motion-panel) var(--motion-ease),transform var(--motion-panel) var(--motion-ease),opacity 240ms; }
.image-options { display:flex; gap:16px; flex-wrap:wrap; padding:2px 4px 10px; color:var(--muted); }
.image-options label { display:flex; align-items:center; gap:8px; font-size:11px; }
.image-options select { max-width:160px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:inherit; }
.image-progress { width:min(100%,512px); border:0; background:none; box-shadow:none; padding:0; }
.image-progress-copy { margin-bottom:12px; align-items:center; }
.image-progress-copy strong { font-size:13px; }
.image-progress-copy small { font-size:11px; color:var(--faint); }
.gen-time { font:11px ui-monospace,Consolas,monospace; color:var(--faint); }
.image-generation-stage { position:relative; aspect-ratio:var(--image-ratio,1); width:100%; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface-2); isolation:isolate; }
.image-generation-mesh { position:absolute; inset:0; overflow:hidden; background:linear-gradient(140deg,var(--surface-2),var(--surface-3)); }
.image-generation-mesh i { position:absolute; width:75%; height:75%; border-radius:50%; filter:blur(60px); background:color-mix(in srgb,var(--ink) 12%,transparent); top:-15%; left:-20%; animation:mesh-drift 9s ease-in-out infinite alternate; }
.image-generation-mesh i:nth-child(2) { top:35%; left:40%; background:color-mix(in srgb,var(--ink) 7%,transparent); animation-delay:-3s; animation-direction:alternate-reverse; }
.image-generation-mesh i:nth-child(3) { width:35%; height:35%; top:55%; left:10%; background:color-mix(in srgb,var(--ink) 10%,transparent); animation-delay:-5s; }
.image-generation-mesh::after { content:''; position:absolute; inset:0; opacity:.15; background-image:radial-gradient(var(--faint) .7px,transparent .7px); background-size:12px 12px; }
.image-partial-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; filter:blur(9px); transform:scale(1.02); transition:opacity 600ms,filter 900ms,transform 900ms var(--motion-ease); }
.has-partial .image-partial-preview { opacity:1; filter:blur(0); transform:none; }
.has-partial .image-generation-mesh { opacity:0; transition:opacity 800ms; }
.image-generation-caption { position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:9px; padding:9px 12px; background:var(--surface); border:1px solid var(--line); border-radius:999px; font-size:11px; color:var(--muted); box-shadow:0 3px 12px #0001; }
.image-progress-note { margin-top:10px; font-size:10px; line-height:1.6; color:var(--faint); }
.image-result-grid { max-width:640px; }
.image-result { border-radius:20px; background:var(--surface-2); overflow:hidden; }
.image-result img { opacity:0; animation:none; transition:opacity 500ms,filter 650ms,transform 650ms var(--motion-ease); filter:blur(6px); transform:scale(1.015); }
.image-result.loaded img { opacity:1; filter:blur(0); transform:none; }
.image-result.load-error img { opacity:1; filter:none; transform:none; }
.image-result-actions { transition:opacity var(--motion-fast),transform var(--motion-fast); }
.image-result:focus-within .image-result-actions { opacity:1; transform:none; }
.viewer-toolbar { position:fixed; bottom:20px; display:flex; gap:8px; }
.viewer-toolbar button,.viewer-toolbar a { border:1px solid #ffffff30; padding:10px 16px; border-radius:999px; color:#fff; background:#202020c9; text-decoration:none; cursor:pointer; font-size:12px; }
.image-viewer img { max-height:calc(100dvh - 130px); }
.scroll-bottom-button { position:absolute; right:28px; bottom:164px; z-index:40; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); cursor:pointer; box-shadow:0 4px 16px #0002; animation:message-arrive 180ms ease both; }
@keyframes message-arrive { from {opacity:0;transform:translateY(10px)} to {opacity:1;transform:none} }
@keyframes activity-arrive { from {opacity:0;transform:translateY(4px)} to {opacity:1;transform:none} }
@keyframes quiet-pulse { 0%,100% {opacity:.4;transform:scale(.9)} 50% {opacity:.95;transform:scale(1)} }
@keyframes dot-breathe { 0%,65%,100% {opacity:.3;transform:translateY(0)} 30% {opacity:.9;transform:translateY(-2px)} }
@keyframes text-sweep { to {background-position:-220% 0} }
@keyframes mesh-drift { to {transform:translate(24%,18%) scale(1.25)} }
@media(max-width:620px) { .image-options {gap:8px}.image-options label{gap:5px}.image-options select{max-width:132px}.image-result-actions{opacity:1;transform:none}.image-generation-stage{border-radius:16px}.scroll-bottom-button{right:16px;bottom:190px} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}.thinking-label{background:none;color:var(--muted)}.image-generation-mesh i{filter:blur(40px)} }