:root{
color-scheme:dark;
--bg:#000;
--panel:#050505;
--panel2:#090909;
--text:#f4f4f4;
--muted:#737373;
--dim:#414141;
--line:rgba(255,255,255,.085);
--line2:rgba(255,255,255,.16);
--sidebar:272px;
--danger:#ff5757;
}
*{box-sizing:border-box}
html,body{height:100%;background:#000}
body{
margin:0;
overflow:hidden;
color:var(--text);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:radial-gradient(circle at 50% -10%,rgba(255,255,255,.035),transparent 28%),#000;
}
/* Full-availability boot gate */
body.momo-booting{cursor:progress}
body.momo-booting .app{visibility:hidden;pointer-events:none;user-select:none}
.momo-loading-screen{
position:fixed;inset:0;z-index:100000;
display:grid;place-items:center;
background:#000;color:#f4f4f4;
opacity:1;visibility:visible;
transition:opacity .28s ease,visibility .28s ease;
}
.momo-loading-screen.is-complete{opacity:0;visibility:hidden;pointer-events:none}
.momo-loading-screen.is-error{cursor:default}
.momo-loading-card{
width:min(360px,calc(100vw - 44px));
display:flex;flex-direction:column;align-items:center;text-align:center;
padding:30px 20px;
}
.momo-loading-logo{
width:76px;height:76px;display:block;
filter:drop-shadow(0 0 22px rgba(255,255,255,.12));
}
.momo-loading-brand{
margin-top:18px;font-size:16px;font-weight:650;letter-spacing:.22em;
}
.momo-loading-status{
min-height:20px;margin-top:13px;color:#a7a7a7;font-size:12px;
}
.momo-loading-track{
width:min(220px,68vw);height:5px;margin-top:18px;overflow:hidden;
border:1px solid rgba(255,255,255,.16);border-radius:999px;
background:rgba(255,255,255,.075);
box-shadow:inset 0 0 10px rgba(0,0,0,.72),0 0 18px rgba(255,255,255,.025);
}
.momo-loading-track span{
position:relative;display:block;width:6%;min-width:8px;height:100%;overflow:hidden;
border-radius:inherit;background:linear-gradient(90deg,#bfc3c8 0%,#f7f7f7 64%,#fff 100%);
transform-origin:left center;will-change:width;
}
.momo-loading-track span::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,0) 62%);
}
.momo-loading-track span{background:linear-gradient(90deg,#4169e1 0%,#7567ed 34%,#b778f2 62%,#5c35c5 100%);background-size:220% 100%;animation:momoGradientFlow 2.4s linear infinite;box-shadow:0 0 14px rgba(126,105,255,.52)}
.momo-loading-bubble{position:absolute;z-index:3;left:var(--bubble-left);top:50%;width:var(--bubble-size);height:var(--bubble-size);border-radius:50%;background:#e8e8ff;box-shadow:0 0 6px #fff,0 0 12px var(--bubble-glow);opacity:.82;transform:translate(-50%,-50%);animation:momoLoadingBubble 2.8s var(--bubble-delay) ease-in-out infinite}
.momo-loading-bubble.b1{--bubble-left:9%;--bubble-size:2px;--bubble-delay:-.3s;--bubble-glow:#78b7ff}.momo-loading-bubble.b2{--bubble-left:26%;--bubble-size:3px;--bubble-delay:-1.2s;--bubble-glow:#bd91ff}.momo-loading-bubble.b3{--bubble-left:43%;--bubble-size:2px;--bubble-delay:-2.1s;--bubble-glow:#f3a5ff}.momo-loading-bubble.b4{--bubble-left:61%;--bubble-size:3px;--bubble-delay:-.8s;--bubble-glow:#9d8cff}.momo-loading-bubble.b5{--bubble-left:77%;--bubble-size:2px;--bubble-delay:-1.7s;--bubble-glow:#73dfff}.momo-loading-bubble.b6{--bubble-left:92%;--bubble-size:3px;--bubble-delay:-2.5s;--bubble-glow:#d9b2ff}
@keyframes momoGradientFlow{from{background-position:100% 0}to{background-position:-120% 0}}
@keyframes momoLoadingBubble{0%,100%{margin-top:2px;opacity:.3;transform:translate(-50%,-50%) scale(.65)}50%{margin-top:-2px;opacity:1;transform:translate(-50%,-50%) scale(1.25)}}
.momo-loading-smoke{
position:absolute;inset:0;z-index:2;display:block;pointer-events:none;overflow:visible;
--smoke-x:-18%;--smoke-alpha:0;--smoke-scale:.97;
}
.momo-loading-smoke::before{
content:"";position:absolute;top:50%;left:var(--smoke-x);width:58px;height:18px;border-radius:999px;
opacity:var(--smoke-alpha);
transform:translate3d(-50%,-50%,0) scale(var(--smoke-scale));
background:radial-gradient(ellipse at 50% 50%,
rgba(0,0,0,1) 0%,rgba(0,0,0,.995) 16%,rgba(0,0,0,.93) 34%,
rgba(0,0,0,.68) 52%,rgba(0,0,0,.38) 68%,rgba(0,0,0,.15) 81%,
rgba(0,0,0,0) 95%);
box-shadow:0 0 7px 4px rgba(0,0,0,.78),0 0 17px 9px rgba(0,0,0,.34);
filter:blur(5.1px);will-change:left,transform,opacity;
}
.momo-loading-detail{
min-height:16px;margin-top:12px;color:#555;font-size:9px;letter-spacing:.08em;
}
.momo-loading-reload{
margin-top:22px;padding:9px 16px;border:1px solid rgba(255,255,255,.18);
border-radius:10px;background:#080808;color:#eee;
}
@media (prefers-reduced-motion:reduce){
.momo-loading-screen,.momo-loading-track span{transition:none}
.momo-loading-smoke,.momo-loading-bubble{display:none}
.momo-loading-track span,.voice-dictation-btn,.voice-live-btn,.voice-core{animation:none}
}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}
::selection{background:#fff;color:#000}
/* App shell */
.app{
width:100%;
height:100dvh;
display:grid;
grid-template-columns:var(--sidebar) minmax(0,1fr);
transition:grid-template-columns .22s ease;
}
/* EIN MENUE, EIN SCROLLEN (21.09., zweiter Anlauf)
Vorher rollte nur der mittlere Teil (.sidebar-scroll): Kopfzeile und "Neuer Chat"
standen fest, und Network samt Chatliste sassen in einem eigenen Rollkasten mit
eigenem Balken. Jetzt rollt die Leiste selbst — als ein Stueck, vom Logo bis zum
letzten Chat. Die Account-Karte klebt unten (siehe .sidebar-account-dock). */
.sidebar{
width:var(--sidebar);
min-width:0;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-width:thin;
display:flex;
flex-direction:column;
padding:14px 12px;
border-right:1px solid rgba(255,255,255,.055);
background:rgba(0,0,0,.97);
transform:translateX(0);
opacity:1;
transition:transform .22s ease,opacity .16s ease,padding .22s ease;
z-index:30;
}
.app.sidebar-closed{
--sidebar:0px;
}
.app.sidebar-closed .sidebar{
transform:translateX(-100%);
opacity:0;
padding-left:0;
padding-right:0;
pointer-events:none;
border-right:0;
}
/* Sidebar */
.brand-row{
min-height:48px;
display:flex;
align-items:center;
gap:10px;
padding:5px 5px 14px;
}
.logo-button{
width:36px;height:36px;
flex:0 0 36px;
display:grid;place-items:center;
padding:0;
border:0;
border-radius:50%;
background:transparent;
}
.logo-button:hover{background:#080808}
.atom-mini{
width:36px;height:36px;
filter:drop-shadow(0 0 10px rgba(255,255,255,.16));
}
.brand-copy{min-width:0;overflow:hidden}
.brand-copy strong{
display:block;
white-space:nowrap;
font-size:11px;
font-weight:600;
letter-spacing:.30em;
}
.brand-copy span{
display:block;
margin-top:4px;
white-space:nowrap;
color:#555;
font-size:8px;
letter-spacing:.18em;
text-transform:uppercase;
}
.collapse-btn{
margin-left:auto;
width:30px;height:30px;
flex:0 0 30px;
display:grid;place-items:center;
border:1px solid transparent;
border-radius:9px;
background:transparent;
color:#555;
}
.collapse-btn:hover{color:#aaa;border-color:var(--line);background:#060606}
.sidebar-action{
width:100%;
min-height:40px;
display:flex;
align-items:center;
gap:11px;
padding:0 11px;
margin:2px 0;
overflow:hidden;
white-space:nowrap;
border:1px solid transparent;
background:transparent;
color:#818181;
border-radius:11px;
text-align:left;
font-size:12px;
transition:.16s ease;
}
.sidebar-action:hover,.sidebar-action.active{
color:#eee;
background:#070707;
border-color:rgba(255,255,255,.07);
}
.sidebar-action.primary{
margin:6px 0 10px;
color:#dedede;
background:#060606;
border-color:rgba(255,255,255,.085);
}
.sidebar-action svg{width:17px;height:17px;flex:0 0 17px}
.nav-label{
margin:9px 10px 7px;
color:#3f3f3f;
font-size:8px;
letter-spacing:.25em;
text-transform:uppercase;
white-space:nowrap;
}
.nav-count{
margin-left:auto;
min-width:20px;
padding:2px 6px;
border-radius:999px;
background:#111;
text-align:center;
color:#777;
font-size:9px;
}
/* Frueher der eigene Rollkasten der Seitenleiste — jetzt nur noch eine Gruppe.
Er rollt NICHT mehr selbst: das Menue rollt als Ganzes (siehe .sidebar oben).
`flex:0 0 auto` und `overflow:visible` sind dafuer das Entscheidende; mit
`flex:1` und `overflow:auto` entstuende hier wieder ein zweiter Balken. */
.sidebar-scroll{
flex:0 0 auto;
min-height:0;
overflow:visible;
display:flex;
flex-direction:column;
scrollbar-gutter:auto;
padding-right:0;
}
.sidebar::-webkit-scrollbar{width:7px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}
.session-list{
overflow:visible;
display:flex;
flex-direction:column;
gap:3px;
margin-bottom:10px;
}
.chat-section-title{
margin:10px 10px 5px;
color:#414141;
font-size:8px;
letter-spacing:.22em;
text-transform:uppercase;
}
.session{
position:relative;
width:100%;
min-height:38px;
padding:0 40px 0 11px;
border:1px solid transparent;
border-radius:10px;
background:transparent;
color:#666;
text-align:left;
overflow:hidden;
white-space:nowrap;
font-size:11px;
}
.session-title{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.session:hover,.session.active{
color:#d4d4d4;
background:#060606;
border-color:rgba(255,255,255,.065);
}
.session.pinned::before{
content:"";
position:absolute;
left:3px;top:50%;
width:2px;height:16px;
transform:translateY(-50%);
border-radius:99px;
background:#fff;
opacity:.45;
}
.session-menu{
position:absolute;
top:6px;right:6px;
width:25px;height:25px;
display:grid;place-items:center;
border:0;
border-radius:7px;
background:transparent;
color:#666;
opacity:.72;
font-size:15px;
letter-spacing:1px;
}
.session:hover .session-menu,.session.active .session-menu{color:#d0d0d0;opacity:1}
.session-menu:hover{background:#101010;color:#fff}
.engine-card{
margin-top:auto;
padding:12px 11px;
border:1px solid rgba(255,255,255,.065);
border-radius:13px;
background:#040404;
overflow:hidden;
}
.engine-card strong{
display:block;
font-size:9px;
font-weight:500;
letter-spacing:.12em;
text-transform:uppercase;
color:#aaa;
white-space:nowrap;
}
.engine-card span{
display:block;
margin-top:5px;
font-size:8px;
color:#484848;
line-height:1.5;
white-space:nowrap;
}
.engine-card .engine-line{display:flex;align-items:center;gap:7px}
.engine-dot{
width:6px;height:6px;
border-radius:50%;
background:#fff;
box-shadow:0 0 11px rgba(255,255,255,.72);
flex:0 0 auto;
}
/* Main */
.main{
min-width:0;
height:100%;
display:grid;
grid-template-rows:62px 1fr;
}
.topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:0 20px;
border-bottom:1px solid rgba(255,255,255,.05);
background:rgba(0,0,0,.78);
backdrop-filter:blur(18px);
z-index:20;
}
.topbar-left{
min-width:0;
display:flex;
align-items:center;
gap:10px;
}
.hamburger-btn{
display:grid!important;
color:#929292!important;
flex:0 0 35px;
}
.hamburger-btn:hover{color:#fff!important}
.page-title strong{
display:block;
font-size:11px;
font-weight:500;
letter-spacing:.22em;
text-transform:none;
}
.page-title span{
display:block;
margin-top:3px;
color:#444;
font-size:8px;
letter-spacing:.14em;
text-transform:uppercase;
}
.connection{
display:flex;
align-items:center;
gap:8px;
color:#666;
font-size:8px;
letter-spacing:.17em;
text-transform:uppercase;
}
.connection-dot{
width:6px;height:6px;
border-radius:50%;
background:#fff;
box-shadow:0 0 12px rgba(255,255,255,.7);
}
.connection.busy .connection-dot{animation:pulseDot .9s infinite}
@keyframes pulseDot{50%{opacity:.25}}
.content{
min-width:0;
height:100%;
overflow:hidden;
position:relative;
}
.view{width:100%;height:100%;overflow:auto}
/* Chat */
.chat-view{
display:grid;
grid-template-rows:1fr auto;
overflow:hidden;
}
.chat-scroll{
overflow:auto;
padding:28px 22px 125px;
scroll-behavior:smooth;
}
.chat-inner{width:min(880px,100%);margin:0 auto}
.hero{
min-height:67vh;
display:grid;
place-items:center;
padding:30px 0;
}
.hero-inner{
width:min(660px,100%);
text-align:center;
}
.atom-wrap{
position:relative;
width:258px;height:258px;
margin:0 auto;
display:grid;place-items:center;
}
.atom-ambient{
position:absolute;
inset:22%;
border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,.04) 35%,transparent 70%);
filter:blur(11px);
}
.atom-large{
width:245px;height:245px;
filter:drop-shadow(0 0 9px rgba(255,255,255,.18));
}
.wordmark{
margin-top:-2px;
color:#f1f1f1;
font-size:13px;
font-weight:500;
letter-spacing:.43em;
text-transform:uppercase;
}
.hero-subtitle{
margin:14px auto 0;
max-width:540px;
color:#4d4d4d;
font-size:9px;
line-height:1.9;
letter-spacing:.17em;
text-transform:uppercase;
}
.hero-state{
margin-top:20px;
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 10px;
border:1px solid rgba(255,255,255,.07);
border-radius:999px;
color:#5d5d5d;
font-size:8px;
letter-spacing:.12em;
text-transform:uppercase;
}
.message{
display:flex;
gap:13px;
margin:0 0 30px;
animation:msgIn .2s ease both;
}
@keyframes msgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.avatar{
width:31px;height:31px;
flex:0 0 31px;
display:grid;place-items:center;
border:1px solid rgba(255,255,255,.1);
border-radius:50%;
background:#050505;
color:#707070;
font-size:8px;
letter-spacing:.08em;
}
.message.ai .avatar{
color:#fff;
border-color:rgba(255,255,255,.22);
box-shadow:0 0 16px rgba(255,255,255,.07);
}
/* RC72: user prompts sit on the right; the circular role badge is the single DU/Momo label. */
.message.user{
flex-direction:row-reverse;
}
.message.user .message-body{
display:flex;
flex-direction:column;
align-items:flex-end;
min-width:0;
}
.message.user .meta,
.message.user .message-actions{
justify-content:flex-end;
}
.message.user .bubble{
text-align:left;
}
.message-body{min-width:0;flex:1;padding-top:2px}
.meta{
margin-bottom:8px;
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.meta strong{
font-size:9px;
font-weight:500;
letter-spacing:.18em;
text-transform:uppercase;
}
.meta span{
color:#414141;
font-size:8px;
letter-spacing:.12em;
text-transform:uppercase;
}
.bubble{
color:#d4d4d4;
font-size:14px;
line-height:1.72;
white-space:pre-wrap;
overflow-wrap:anywhere;
}
.message.user .bubble{
display:inline-block;
max-width:92%;
padding:11px 13px;
border:1px solid rgba(255,255,255,.075);
border-radius:14px;
background:#060606;
color:#c5c5c5;
}
.message.system .bubble{color:#9a6969;font-size:12px}
.attachment-chip{
display:inline-flex;
align-items:center;
gap:7px;
margin-top:8px;
margin-right:6px;
padding:6px 9px;
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
color:#747474;
background:#050505;
font-size:9px;
}
.typing{
height:27px;
display:inline-flex;
align-items:center;
gap:6px;
}
.typing i{
width:4px;height:4px;
border-radius:50%;
background:#fff;
opacity:.18;
animation:blink 1.1s infinite ease-in-out;
}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.18;transform:none}40%{opacity:1;transform:translateY(-2px)}}
.composer-shell{
position:absolute;
left:0;right:0;bottom:0;
z-index:7;
padding:13px 22px calc(18px + env(safe-area-inset-bottom));
background:linear-gradient(to top,#000 72%,rgba(0,0,0,.94) 83%,transparent);
pointer-events:none;
}
.composer{
width:min(900px,100%);
margin:0 auto;
padding:8px 9px;
border:1px solid rgba(255,255,255,.13);
border-radius:22px;
background:rgba(6,6,6,.96);
box-shadow:0 18px 70px rgba(0,0,0,.8);
pointer-events:auto;
}
.composer:focus-within{border-color:rgba(255,255,255,.23)}
.attachment-preview{
display:none;
flex-wrap:wrap;
gap:6px;
padding:7px 8px 2px;
}
.attachment-preview.active{display:flex}
.file-pill{
display:flex;
align-items:center;
gap:6px;
max-width:220px;
padding:6px 8px;
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
background:#080808;
color:#777;
font-size:9px;
}
.file-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-pill button{width:18px;height:18px;padding:0;border:0;background:transparent;color:#555}
textarea{
width:100%;
min-height:44px;
max-height:180px;
resize:none;
outline:none;
border:0;
background:transparent;
padding:9px 10px 6px;
color:#e8e8e8;
font-size:14px;
line-height:1.5;
}
textarea::placeholder{color:#454545}
.composer-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:1px 2px 0;
}
.round-btn{
width:35px;height:35px;
display:grid;place-items:center;
border:1px solid rgba(255,255,255,.08);
border-radius:50%;
background:#050505;
color:#5c5c5c;
}
.round-btn:hover{color:#aaa;border-color:rgba(255,255,255,.14)}
.send{
width:35px;height:35px;
display:grid;place-items:center;
border:1px solid rgba(255,255,255,.9);
border-radius:50%;
background:#fff;
color:#000;
font-size:17px;
}
.send:disabled{opacity:.28;cursor:not-allowed}
.composer-note{
margin-top:7px;
text-align:center;
color:#333;
font-size:8px;
letter-spacing:.13em;
text-transform:uppercase;
}
/* Workspace panels */
.panel-view{padding:34px 28px 80px}
.panel-wrap{width:min(1040px,100%);margin:0 auto}
.panel-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
margin-bottom:28px;
}
.panel-head h1{
margin:0;
font-size:26px;
font-weight:450;
letter-spacing:-.03em;
}
.panel-head p{
margin:7px 0 0;
color:#606060;
font-size:12px;
line-height:1.6;
}
.action-btn{
min-height:38px;
padding:0 14px;
border:1px solid rgba(255,255,255,.11);
border-radius:11px;
background:#070707;
color:#bcbcbc;
font-size:11px;
}
.action-btn:hover{border-color:rgba(255,255,255,.2);color:#eee}
.action-btn.white{background:#fff;color:#000;border-color:#fff}
.action-btn.danger{color:#d88;border-color:rgba(255,87,87,.25)}
.action-btn.danger-solid{background:#d83838;color:#fff;border-color:#d83838}
.cards-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:11px;
}
.card{
position:relative;
min-height:155px;
padding:17px;
border:1px solid rgba(255,255,255,.07);
border-radius:16px;
background:linear-gradient(145deg,#070707,#030303);
}
.card:hover{border-color:rgba(255,255,255,.13)}
.card-icon{
width:34px;height:34px;
display:grid;place-items:center;
border:1px solid rgba(255,255,255,.1);
border-radius:11px;
background:#090909;
color:#888;
}
.card h3{margin:24px 0 6px;font-size:13px;font-weight:500}
.card p{margin:0;color:#505050;font-size:10px;line-height:1.6}
.card-meta{
margin-top:13px;
color:#3c3c3c;
font-size:9px;
letter-spacing:.08em;
text-transform:uppercase;
}
.card-actions{
position:absolute;
top:12px;right:12px;
display:flex;gap:5px;
}
.card-actions button{
width:28px;height:28px;
border:1px solid rgba(255,255,255,.065);
border-radius:9px;
background:#050505;
color:#555;
}
.card-actions button:hover{color:#aaa;border-color:rgba(255,255,255,.15)}
.empty-state{
min-height:55vh;
display:grid;
place-items:center;
text-align:center;
}
.empty-icon{
width:52px;height:52px;
margin:0 auto 15px;
display:grid;place-items:center;
border:1px solid rgba(255,255,255,.08);
border-radius:17px;
color:#4f4f4f;
}
.empty-state h2{margin:0;font-size:16px;font-weight:450}
.empty-state p{
max-width:390px;
margin:8px auto 18px;
color:#515151;
font-size:11px;
line-height:1.65;
}
/* Archived list */
.archive-list{display:flex;flex-direction:column;gap:8px}
.archive-row{
display:flex;
align-items:center;
gap:14px;
padding:13px 14px;
border:1px solid rgba(255,255,255,.07);
border-radius:13px;
background:#040404;
}
.archive-copy{min-width:0;flex:1}
.archive-copy strong{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:12px;
font-weight:500;
}
.archive-copy span{
display:block;
margin-top:4px;
color:#4a4a4a;
font-size:9px;
}
.archive-actions{display:flex;gap:7px;flex-wrap:wrap}
/* Project modal */
.modal-backdrop,.dialog-backdrop{
position:fixed;
inset:0;
z-index:240;
display:none;
place-items:center;
padding:18px;
background:rgba(0,0,0,.66);
backdrop-filter:blur(6px);
}
.modal-backdrop.open,.dialog-backdrop.open{display:grid}
.modal,.dialog{
width:min(430px,100%);
padding:20px;
border:1px solid rgba(255,255,255,.11);
border-radius:18px;
background:#1e1e1e;
box-shadow:0 30px 100px rgba(0,0,0,.7);
}
.modal h2,.dialog h3{
margin:0 0 16px;
font-size:16px;
font-weight:500;
}
.dialog p{
margin:-4px 0 16px;
color:#8a8a8a;
font-size:11px;
line-height:1.55;
}
.field{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:10px;
}
.field label{
color:#777;
font-size:9px;
letter-spacing:.08em;
text-transform:uppercase;
}
.field input,.dialog input{
width:100%;
min-height:42px;
padding:9px 11px;
border:1px solid rgba(255,255,255,.10);
border-radius:11px;
outline:0;
background:#0b0b0b;
color:#e2e2e2;
font-size:12px;
}
.field input:focus,.dialog input:focus{border-color:rgba(255,255,255,.25)}
.modal-actions,.dialog-actions{
margin-top:15px;
display:flex;
justify-content:flex-end;
gap:8px;
}
/* GPT-like context menu */
.chat-context-menu,.chat-project-submenu{
position:fixed;
z-index:220;
display:none;
width:286px;
max-width:calc(100vw - 24px);
padding:8px;
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
background:#303030;
color:#f3f3f3;
box-shadow:0 26px 70px rgba(0,0,0,.58);
}
.chat-project-submenu{
z-index:230;
width:260px;
border-radius:16px;
}
.chat-context-menu.open,.chat-project-submenu.open{display:block}
.chat-menu-item{
width:100%;
min-height:46px;
display:flex;
align-items:center;
gap:12px;
padding:0 12px;
border:0;
border-radius:11px;
background:transparent;
color:#f1f1f1;
text-align:left;
font-size:14px;
}
.chat-menu-item:hover{background:rgba(255,255,255,.085)}
.chat-menu-item.danger{color:#ff5555}
.chat-menu-item svg{
width:20px;height:20px;
flex:0 0 20px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.chat-menu-divider{
height:1px;
margin:7px 4px;
background:rgba(255,255,255,.14);
}
.chat-menu-section{
padding:8px 12px 5px;
color:#989898;
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
}
.chat-menu-spacer{flex:1}
.chat-menu-chevron{font-size:21px;color:#d9d9d9;line-height:1}
/* Mobile */
.mobile-overlay{display:none}
@media(max-width:880px){
.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
.app,.app.sidebar-closed{display:block}
.sidebar{
position:fixed;
top:0;left:0;bottom:0;
width:min(310px,86vw);
transform:translateX(-105%);
opacity:1;
pointer-events:none;
box-shadow:30px 0 80px rgba(0,0,0,.72);
}
.app.mobile-open .sidebar{
transform:translateX(0);
pointer-events:auto;
}
.mobile-overlay{
position:fixed;
inset:0;
z-index:25;
background:rgba(0,0,0,.6);
backdrop-filter:blur(4px);
}
.app.mobile-open .mobile-overlay{display:block}
.collapse-btn{display:none}
.main{height:100dvh;grid-template-rows:56px 1fr}
.topbar{padding:0 13px}
.connection{display:none}
.chat-scroll{padding:22px 13px 115px}
.hero{min-height:60vh}
.atom-wrap{width:205px;height:205px}
.atom-large{width:198px;height:198px}
.wordmark{font-size:10px;letter-spacing:.31em}
.hero-subtitle{font-size:8px}
.composer-shell{padding:10px 10px calc(12px + env(safe-area-inset-bottom))}
.panel-view{padding:25px 14px 70px}
.panel-head{align-items:flex-start;flex-direction:column}
.cards-grid{grid-template-columns:1fr}
.archive-row{align-items:flex-start;flex-direction:column}
}
/* ===== GPT / Claude style functional additions ===== */
.shortcut-hint{
margin-left:auto;
color:#3e3e3e;
font-size:8px;
letter-spacing:.02em;
}
.topbar-right{
display:flex;
align-items:center;
gap:9px;
min-width:0;
}
.project-chip{
max-width:180px;
height:30px;
padding:0 10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
background:#060606;
color:#858585;
font-size:9px;
}
.project-chip:hover{color:#ddd;border-color:rgba(255,255,255,.15)}
.session.temporary .session-title{color:#9b9b9b;font-style:italic}
/* Message markdown + actions */
.rich-text h1,.rich-text h2,.rich-text h3{
margin:16px 0 8px;
line-height:1.3;
font-weight:600;
}
.rich-text h1{font-size:20px}
.rich-text h2{font-size:17px}
.rich-text h3{font-size:15px}
.rich-text ul,.rich-text ol{margin:7px 0 7px 20px;padding:0}
.rich-text li{margin:4px 0}
.paragraph-gap{height:10px}
.inline-code{
padding:2px 5px;
border:1px solid rgba(255,255,255,.08);
border-radius:6px;
background:#0b0b0b;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:.92em;
}
.code-block{
margin:13px 0;
overflow:hidden;
border:1px solid rgba(255,255,255,.09);
border-radius:13px;
background:#080808;
}
.code-head{
min-height:38px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 11px;
border-bottom:1px solid rgba(255,255,255,.07);
color:#656565;
font-size:9px;
text-transform:uppercase;
letter-spacing:.08em;
}
.code-head>div{display:flex;gap:5px}
.code-action{
min-height:26px;
padding:0 8px;
border:1px solid rgba(255,255,255,.08);
border-radius:8px;
background:#0d0d0d;
color:#777;
font-size:9px;
text-transform:none;
letter-spacing:0;
}
.code-action:hover{color:#fff;border-color:rgba(255,255,255,.16)}
.code-block pre{
margin:0;
padding:14px;
overflow:auto;
color:#d7d7d7;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:12px;
line-height:1.55;
}
.message-actions{
min-height:27px;
display:flex;
gap:4px;
margin-top:7px;
opacity:0;
transition:opacity .15s ease;
}
.message:hover .message-actions,.message:focus-within .message-actions{opacity:1}
.message-actions button{
width:28px;height:28px;
display:grid;place-items:center;
border:1px solid transparent;
border-radius:8px;
background:transparent;
color:#555;
font-size:13px;
}
.message-actions button:hover{color:#ddd;background:#080808;border-color:rgba(255,255,255,.07)}
/* Drag and drop */
.composer.dragging{
border-color:rgba(255,255,255,.38);
box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 70px rgba(0,0,0,.8);
}
/* Project instructions / knowledge */
.modal-textarea,.edit-textarea{
width:100%;
min-height:110px;
resize:vertical;
padding:10px 11px;
border:1px solid rgba(255,255,255,.10);
border-radius:11px;
outline:0;
background:#0b0b0b;
color:#e2e2e2;
font-size:12px;
line-height:1.55;
}
.modal-textarea:focus,.edit-textarea:focus{border-color:rgba(255,255,255,.25)}
.project-file-row{display:flex;gap:8px;align-items:center}
.project-file-privacy-note{margin-top:7px;color:#666;font-size:9px;line-height:1.45}
.project-file-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:180px;overflow:auto}
.knowledge-file{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 9px;
border:1px solid rgba(255,255,255,.07);
border-radius:10px;
background:#080808;
}
.knowledge-file strong{display:block;font-size:10px;font-weight:500}
.knowledge-file span{display:block;margin-top:2px;color:#484848;font-size:8px}
.knowledge-file button{width:24px;height:24px;border:0;border-radius:7px;background:transparent;color:#555}
.knowledge-file button:hover{background:#111;color:#ddd}
.knowledge-empty{padding:9px;color:#454545;font-size:9px}
/* Search */
.search-backdrop{z-index:260}
.search-dialog{
width:min(680px,100%);
max-height:min(720px,82vh);
display:flex;
flex-direction:column;
overflow:hidden;
border:1px solid rgba(255,255,255,.11);
border-radius:18px;
background:#181818;
box-shadow:0 30px 100px rgba(0,0,0,.72);
}
.search-header{
display:flex;
gap:10px;
padding:12px;
border-bottom:1px solid rgba(255,255,255,.07);
}
.search-header input{
flex:1;
min-width:0;
height:42px;
padding:0 12px;
border:1px solid rgba(255,255,255,.09);
border-radius:11px;
outline:0;
background:#0d0d0d;
color:#fff;
}
.search-results{overflow:auto;padding:8px}
.search-result{
width:100%;
min-height:58px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:8px 10px;
border:0;
border-radius:11px;
background:transparent;
color:#ddd;
text-align:left;
}
.search-result:hover{background:#222}
.search-result strong{display:block;font-size:11px;font-weight:500}
.search-result span{display:block;margin-top:4px;color:#666;font-size:9px}
.search-empty{padding:35px;text-align:center;color:#555;font-size:11px}
.search-footer{padding:10px 13px;border-top:1px solid rgba(255,255,255,.06);color:#4c4c4c;font-size:8px}
/* Workspace popover */
.workspace-menu{
position:fixed;
top:54px;
right:14px;
z-index:250;
width:245px;
display:none;
padding:7px;
border:1px solid rgba(255,255,255,.1);
border-radius:15px;
background:#292929;
box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.workspace-menu.open{display:block}
.workspace-menu button{
width:100%;
min-height:40px;
padding:0 10px;
border:0;
border-radius:9px;
background:transparent;
color:#eee;
text-align:left;
font-size:11px;
}
.workspace-menu button:hover{background:rgba(255,255,255,.07)}
.workspace-menu button.danger{color:#ff6464}
/* Artifact panel */
.artifact-panel{
position:fixed;
top:0;right:0;bottom:0;
z-index:270;
width:min(620px,96vw);
display:grid;
grid-template-rows:62px 1fr;
transform:translateX(102%);
transition:transform .22s ease;
border-left:1px solid rgba(255,255,255,.10);
background:#0c0c0c;
box-shadow:-28px 0 80px rgba(0,0,0,.48);
}
.artifact-panel.open{transform:translateX(0)}
.artifact-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 13px 0 16px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.artifact-head strong{display:block;font-size:11px;font-weight:500}
.artifact-head span{display:block;margin-top:3px;color:#505050;font-size:8px;text-transform:uppercase;letter-spacing:.12em}
.artifact-actions{display:flex;align-items:center;gap:7px}
.artifact-panel iframe{width:100%;height:100%;border:0;background:#fff}
/* Toast */
.toast{
position:fixed;
left:50%;bottom:26px;
z-index:320;
transform:translate(-50%,16px);
opacity:0;
pointer-events:none;
padding:9px 12px;
border:1px solid rgba(255,255,255,.1);
border-radius:999px;
background:#2b2b2b;
color:#eee;
font-size:10px;
box-shadow:0 16px 50px rgba(0,0,0,.5);
transition:.18s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:720px){
.shortcut-hint{display:none}
.topbar-right{gap:6px}
.project-chip{max-width:90px}
#workspaceMenuBtn{display:grid}
.message-actions{opacity:1}
.artifact-panel{width:100vw}
}
/* Account & billing */
.account-shell{display:flex;flex-direction:column;gap:18px}
.account-card{
padding:20px;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
background:linear-gradient(145deg,#070707,#030303);
}
.account-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.account-head h2{margin:4px 0 6px;font-size:20px;font-weight:500}
.account-head p{margin:0;color:#606060;font-size:11px}
.eyebrow{color:#555;font-size:8px;letter-spacing:.22em}
.plan-badge{
padding:7px 10px;border:1px solid rgba(255,255,255,.12);
border-radius:999px;background:#090909;color:#cfcfcf;font-size:9px;white-space:nowrap
}
.oauth-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.oauth-btn{
min-height:42px;border:1px solid rgba(255,255,255,.1);border-radius:12px;
background:#080808;color:#ddd
}
.oauth-btn:hover{border-color:rgba(255,255,255,.22)}
.email-login{display:flex;gap:8px;margin-top:8px}
.email-login input{
flex:1;min-height:42px;padding:9px 11px;border:1px solid rgba(255,255,255,.1);
border-radius:11px;background:#090909;color:#fff;outline:none
}
.account-actions{display:flex;gap:8px;margin-top:18px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.price-card{
min-height:300px;padding:20px;border:1px solid rgba(255,255,255,.08);
border-radius:18px;background:#050505;display:flex;flex-direction:column
}
.price-card.selected{border-color:rgba(255,255,255,.22);background:#080808}
.price-name{font-size:13px;font-weight:500}
.price-amount{margin-top:22px;font-size:29px;letter-spacing:-.04em}
.price-sub{min-height:20px;margin-top:3px;color:#555;font-size:10px}
.price-card ul{list-style:none;margin:23px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.price-card li{color:#8b8b8b;font-size:11px}
.price-card li::before{content:"✓";margin-right:8px;color:#ddd}
.price-cta{margin-top:auto;padding-top:22px}
.plan-current{opacity:.55}
.account-notice{
display:none;padding:11px 13px;border:1px solid rgba(255,255,255,.08);
border-radius:12px;background:#060606;color:#9c9c9c;font-size:11px
}
.account-notice.show{display:block}
.account-notice.error{color:#dc8f8f;border-color:rgba(255,85,85,.18)}
@media(max-width:820px){.pricing-grid{grid-template-columns:1fr}.oauth-grid{grid-template-columns:1fr}}
@media(max-width:560px){.email-login,.account-head{flex-direction:column}}
/* Product Core: fatal error boundary + self-test report */
.fatal-error{
position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:20px;
background:rgba(0,0,0,.84);backdrop-filter:blur(12px)
}
.fatal-error.show{display:grid}
.fatal-card{
width:min(520px,100%);padding:24px;border:1px solid rgba(255,255,255,.13);
border-radius:20px;background:#101010;box-shadow:0 35px 120px rgba(0,0,0,.75)
}
.fatal-kicker{color:#a0a0a8;font-size:9px;letter-spacing:.22em;text-transform:uppercase}
.fatal-card h2{margin:8px 0 9px;font-size:20px;font-weight:500}
.fatal-card p{margin:0;color:#8b8b8b;font-size:12px;line-height:1.6;white-space:pre-wrap}
.fatal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.fatal-actions button{
min-height:38px;padding:0 13px;border:1px solid rgba(255,255,255,.12);border-radius:10px;
background:#080808;color:#ddd
}
.fatal-actions button:first-child{background:#fff;color:#000;border-color:#fff}
.selftest-report{
position:fixed;right:12px;bottom:12px;z-index:9998;width:min(420px,calc(100vw - 24px));
max-height:70vh;overflow:auto;padding:14px;border:1px solid rgba(255,255,255,.12);
border-radius:14px;background:#101010;color:#ddd;box-shadow:0 22px 80px rgba(0,0,0,.7);
font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace
}
.selftest-report strong{display:block;margin-bottom:8px;font-family:inherit}
.selftest-report .pass{color:#a8d5ad}.selftest-report .fail{color:#ef9999}
/* === STEP 2 · PRODUCT CHAT UX === */
.rich-text a{color:#cfcfcf;text-decoration:underline;text-decoration-color:#555;text-underline-offset:3px}
.rich-text a:hover{color:#fff;text-decoration-color:#aaa}
.rich-text em{color:#d8d8d8}
.rich-text del{color:#777}
.rich-text blockquote{
margin:10px 0;padding:8px 12px;border-left:2px solid #555;background:#060606;color:#aaa;border-radius:0 9px 9px 0
}
.table-wrap{max-width:100%;overflow:auto;margin:12px 0;border:1px solid rgba(255,255,255,.08);border-radius:12px}
.table-wrap table{width:100%;border-collapse:collapse;min-width:420px;background:#050505;font-size:12px}
.table-wrap th,.table-wrap td{padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.07);border-right:1px solid rgba(255,255,255,.055);vertical-align:top}
.table-wrap th{background:#0a0a0a;color:#ddd;font-weight:550}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap th:last-child,.table-wrap td:last-child{border-right:0}
.message{position:relative;border-radius:14px;padding:5px 4px;margin-left:-4px;margin-right:-4px}
.message:focus{outline:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.015)}
.message-actions button.active{color:#fff;background:#111;border-color:rgba(255,255,255,.14)}
.message-actions .feedback{font-size:12px}
.branch-banner{
display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 22px;padding:9px 11px;
border:1px solid rgba(255,255,255,.075);border-radius:11px;background:#050505;color:#666;font-size:9px;letter-spacing:.04em
}
.branch-banner button{border:0;background:transparent;color:#8f8f8f;font-size:9px}
.branch-banner button:hover{color:#fff}
.file-pill small{color:#3f3f3f;font-size:8px;white-space:nowrap}
.composer.dragging::before{
content:"Dateien hier ablegen";position:absolute;inset:5px;z-index:2;display:grid;place-items:center;
border:1px dashed rgba(255,255,255,.28);border-radius:17px;background:rgba(0,0,0,.9);color:#aaa;font-size:11px;letter-spacing:.04em
}
.composer{position:relative}
.scroll-bottom-btn{
position:absolute;z-index:9;left:50%;bottom:132px;width:34px;height:34px;display:grid;place-items:center;
transform:translate(-50%,10px);opacity:0;pointer-events:none;border:1px solid rgba(255,255,255,.12);border-radius:50%;
background:#111;color:#aaa;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:.16s ease
}
.scroll-bottom-btn.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.scroll-bottom-btn:hover{color:#fff;border-color:rgba(255,255,255,.22)}
.shortcut-help-btn{font-size:12px;font-weight:600}
.shortcut-dialog{width:min(460px,100%)}
.shortcut-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.shortcut-title-row h3{margin:0}
.shortcut-list{display:flex;flex-direction:column}
.shortcut-list>div{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.06);color:#aaa;font-size:11px}
.shortcut-list kbd{padding:5px 8px;border:1px solid rgba(255,255,255,.1);border-bottom-color:rgba(255,255,255,.18);border-radius:7px;background:#111;color:#ddd;font-family:inherit;font-size:9px;white-space:nowrap}
.search-result.selected,.search-result:hover{background:#242424}
.search-result>div{min-width:0;flex:1}
.search-result p{margin:5px 0 0;color:#858585;font-size:10px;line-height:1.45;white-space:normal}
.search-result .search-kind{color:#555;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.search-chevron{flex:0 0 auto}
.search-footer::after{content:" · ↑↓ auswählen · Enter öffnen"}
.artifact-resize-handle{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize;z-index:3}
.artifact-resize-handle:hover::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.28)}
.artifact-panel.fullscreen{width:100vw!important}
body.artifact-resizing{cursor:col-resize;user-select:none}
body.artifact-resizing iframe{pointer-events:none}
@media(max-width:720px){
.message{margin-bottom:22px}
.message-actions{gap:2px;overflow-x:auto;padding-bottom:2px}
.message-actions button{width:32px;height:32px;flex:0 0 32px}
.scroll-bottom-btn{bottom:120px}
.shortcut-help-btn{display:none}
.chat-context-menu.open{left:12px!important;right:12px!important;top:auto!important;bottom:12px!important;width:auto!important;max-width:none!important}
.chat-project-submenu.open{left:12px!important;right:12px!important;top:auto!important;bottom:12px!important;width:auto!important;max-width:none!important}
.artifact-resize-handle{display:none}
.artifact-actions .action-btn{padding:0 10px}
}
/* === STEP 3: Momo production inference runtime === */
.send.is-stopping{
background:#fff;
color:#000;
font-size:0;
}
.send.is-stopping::after{
content:"";
width:9px;
height:9px;
border-radius:2px;
background:#000;
}
.meta .confidence{
display:inline-flex;
align-items:center;
gap:4px;
color:#555;
}
.meta .confidence.high{color:#747474}
.meta .confidence.verified{color:#8c8c8c}
.runtime-details-dialog{width:min(640px,100%)}
.runtime-details-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
}
.runtime-details-head h3{margin:4px 0 15px}
.icon-close{
width:32px;height:32px;
border:1px solid rgba(255,255,255,.08);
border-radius:9px;
background:#090909;
color:#777;
}
.icon-close:hover{color:#fff;border-color:rgba(255,255,255,.18)}
.runtime-summary{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
margin-bottom:16px;
}
.runtime-stat{
padding:11px;
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
background:#090909;
}
.runtime-stat span{
display:block;
color:#525252;
font-size:8px;
letter-spacing:.12em;
text-transform:uppercase;
}
.runtime-stat strong{
display:block;
margin-top:6px;
overflow:hidden;
text-overflow:ellipsis;
color:#d2d2d2;
font-size:11px;
font-weight:500;
}
.runtime-block{
margin-top:12px;
padding:12px;
border:1px solid rgba(255,255,255,.07);
border-radius:12px;
background:#080808;
}
.runtime-block h4{
margin:0 0 9px;
color:#777;
font-size:9px;
font-weight:500;
letter-spacing:.13em;
text-transform:uppercase;
}
.runtime-list{display:flex;flex-direction:column;gap:7px}
.runtime-row{
display:grid;
grid-template-columns:115px minmax(0,1fr) auto;
align-items:start;
gap:10px;
color:#828282;
font-size:10px;
line-height:1.45;
}
.runtime-row strong{color:#b8b8b8;font-weight:500}
.runtime-source-detail{color:#5a5a5a}
.runtime-stage-ok{color:#777}
.runtime-stage-error{color:#c97979}
@media(max-width:620px){
.runtime-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.runtime-row{grid-template-columns:90px minmax(0,1fr)}
.runtime-row>span:last-child{display:none}
}
/* === STEP 4: IndexedDB memory, storage & recovery === */
.storage-dialog{width:min(760px,100%);max-height:min(82vh,760px);overflow:auto}
.storage-summary-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
margin-bottom:10px;
}
.storage-note{
margin:10px 0 0;
color:#595959;
font-size:10px;
line-height:1.55;
}
.storage-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:16px 0 4px;
}
.snapshot-list{display:flex;flex-direction:column;gap:7px}
.snapshot-row{
display:flex;
align-items:center;
gap:12px;
padding:10px;
border:1px solid rgba(255,255,255,.07);
border-radius:11px;
background:#070707;
}
.snapshot-copy{min-width:0;flex:1}
.snapshot-copy strong{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#b9b9b9;
font-size:10px;
font-weight:500;
}
.snapshot-copy span{
display:block;
margin-top:4px;
color:#4c4c4c;
font-size:8px;
}
.snapshot-actions{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:680px){
.storage-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.snapshot-row{align-items:flex-start;flex-direction:column}
}
/* === STEP 5: Product accounts, OAuth & device identity === */
.auth-note{margin:11px 0 0;color:#555;font-size:10px;line-height:1.55}
.oauth-btn:disabled{opacity:.38;cursor:not-allowed}
.account-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.account-card h3{margin:5px 0 7px;font-size:14px;font-weight:500}
.account-warning{border-color:rgba(255,185,90,.22);background:linear-gradient(145deg,#0a0804,#040404)}
.compact-account-card{display:flex;align-items:center;justify-content:space-between;gap:16px}
.profile-form{display:grid;grid-template-columns:1fr 150px;gap:9px;margin:15px 0}
.profile-form label{display:flex;flex-direction:column;gap:6px;color:#777;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.profile-form input,.profile-form select{
min-height:40px;padding:8px 10px;border:1px solid rgba(255,255,255,.1);
border-radius:10px;background:#090909;color:#ddd;outline:none
}
.identity-list,.device-list{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.identity-row,.device-row{
display:flex;align-items:center;gap:12px;padding:11px;
border:1px solid rgba(255,255,255,.07);border-radius:12px;background:#070707
}
.identity-row>div:first-child,.device-copy{min-width:0;flex:1}
.identity-row strong,.device-copy strong{display:block;color:#c2c2c2;font-size:10px;font-weight:500}
.identity-row span,.device-copy span{display:block;margin-top:4px;color:#555;font-size:9px}
.device-icon{width:31px;height:31px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#666}
.current-device{
display:inline!important;margin-left:6px!important;padding:2px 6px;border-radius:999px;
background:#101010;color:#8a8a8a!important;font-size:7px!important;text-transform:uppercase
}
.status-pill{
display:inline-flex!important;width:max-content;padding:5px 8px;border:1px solid rgba(255,255,255,.09);
border-radius:999px;background:#090909;color:#777!important;font-size:8px!important;text-transform:uppercase
}
.status-pill.ok{color:#aaa!important}
.account-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.account-section-head p{margin:0;color:#5a5a5a;font-size:10px;line-height:1.5}
.sync-status{
display:none;margin-top:12px;padding:9px 11px;border:1px solid rgba(255,255,255,.07);
border-radius:10px;background:#060606;color:#777;font-size:10px
}
.sync-status.show{display:block}
.sync-status.error{color:#d08a8a;border-color:rgba(255,90,90,.18)}
@media(max-width:760px){
.account-columns{grid-template-columns:1fr}
.profile-form{grid-template-columns:1fr}
.compact-account-card,.account-section-head{align-items:flex-start;flex-direction:column}
.identity-row,.device-row{align-items:flex-start}
}
.magic-link-only{margin-top:18px}
.magic-link-only input{min-width:0}
/* === STEP 6: Stripe subscription lifecycle === */
.account-badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.billing-status-badge{
padding:7px 9px;border:1px solid rgba(255,255,255,.08);border-radius:999px;
background:#080808;color:#777;font-size:8px;text-transform:uppercase;white-space:nowrap
}
.billing-status-badge.active,.billing-status-badge.trialing{color:#b9b9b9;border-color:rgba(255,255,255,.15)}
.billing-status-badge.past_due{color:#d4b17d;border-color:rgba(230,175,80,.22)}
.billing-status-badge.unpaid,.billing-status-badge.incomplete,.billing-status-badge.incomplete_expired{color:#d58d8d;border-color:rgba(255,90,90,.2)}
.billing-status-badge.canceled,.billing-status-badge.paused{color:#777}
.subscription-summary{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px
}
.subscription-summary>div{
padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#070707
}
.subscription-summary span{display:block;color:#4d4d4d;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.subscription-summary strong{display:block;margin-top:5px;color:#aaa;font-size:10px;font-weight:500}
@media(max-width:680px){
.subscription-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.account-badges{justify-content:flex-start}
}
/* === STEP 7: Animated brand system === */
.brand-mark{display:inline-flex;align-items:center;justify-content:center}
.atom-mini{width:34px;height:34px;display:block}
.topbar-brand-mark{width:28px;height:28px;display:flex;align-items:center;justify-content:center;opacity:.92;flex:0 0 auto}
.topbar-logo-svg{width:28px;height:28px;display:block}
.momo-brand-svg,.momo-orbit-logo{display:block}
.logo-button{display:flex;align-items:center;justify-content:center}
.logo-button .brand-mark{width:36px;height:36px}
.brand-row{align-items:center}
.atom-mini ellipse,.topbar-logo-svg ellipse,.momo-brand-svg ellipse{transform-origin:60px 60px}
@keyframes momoPulse{0%,100%{transform:scale(1);opacity:.98}50%{transform:scale(1.035);opacity:1}}
.logo-button .atom-mini circle[cx="60"], .topbar-logo-svg circle[cx="60"], .momo-brand-svg circle[cx="60"]{animation:momoPulse 3.2s ease-in-out infinite}
.reduced-motion .logo-button .atom-mini circle[cx="60"],
.reduced-motion .topbar-logo-svg circle[cx="60"],
.reduced-motion .momo-brand-svg circle[cx="60"]{animation:none}
@media (max-width:760px){
.topbar-brand-mark{display:none}
}
/* === STEP 7: animated Momo brand mark + cloud conflict UI === */
.brand-mark{display:grid;place-items:center;line-height:0}
.topbar-brand-mark{width:28px;height:28px;display:grid;place-items:center}
.topbar-logo-svg{width:26px;height:26px;filter:drop-shadow(0 0 7px rgba(255,255,255,.16))}
.hero-brand-mark{width:245px;height:245px}
.account-logo-mark{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center}
.account-logo-svg{width:44px;height:44px;filter:drop-shadow(0 0 9px rgba(255,255,255,.16))}
.momo-brand-svg{/* overflow auf ![]()
ist wirkungslos und veraltet */}
.reduced-motion .momo-brand-svg animateMotion{display:none}
#cloudForceUploadBtn{display:block}
/* === STEP 8: Momo Project Workspaces === */
.project-workspace{max-width:1120px;margin:0 auto}
.project-workspace-head{
display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
padding:4px 0 20px;border-bottom:1px solid rgba(255,255,255,.07)
}
.project-workspace-head h2{margin:6px 0 7px;font-size:25px;font-weight:500;letter-spacing:-.02em}
.project-workspace-head p{margin:0;color:#626262;font-size:11px;line-height:1.5}
.project-back{
border:0;background:transparent;color:#555;padding:0;margin:0 0 14px;
font-size:10px;cursor:pointer
}
.project-back:hover{color:#aaa}
.project-workspace-actions{display:flex;gap:8px;flex-wrap:wrap}
.project-stats{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;margin:16px 0
}
.project-workspace-grid{
display:grid;grid-template-columns:1fr 1fr;gap:12px
}
.project-section{
padding:16px;border:1px solid rgba(255,255,255,.07);
border-radius:15px;background:#050505;min-width:0
}
.project-section-wide{grid-column:1/-1}
.project-section-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px
}
.project-section h3{margin:4px 0 0;color:#c7c7c7;font-size:13px;font-weight:500}
.project-chat-list,.project-memory-list{display:flex;flex-direction:column;gap:7px}
.project-chat-row{
width:100%;display:flex;align-items:center;gap:10px;padding:10px;
border:1px solid rgba(255,255,255,.06);border-radius:11px;background:#070707;
color:#777;text-align:left
}
.project-chat-row:hover{border-color:rgba(255,255,255,.13);background:#090909}
.project-chat-icon{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.07);border-radius:9px;color:#555}
.project-chat-copy{min-width:0;flex:1}
.project-chat-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#bcbcbc;font-size:10px;font-weight:500}
.project-chat-copy small{display:block;margin-top:4px;color:#4b4b4b;font-size:8px}
.project-instructions-preview{
min-height:90px;padding:11px;border:1px solid rgba(255,255,255,.06);
border-radius:11px;background:#070707;color:#8a8a8a;font-size:10px;line-height:1.6;white-space:pre-wrap
}
.muted{color:#444}
.context-toggle-list{display:flex;flex-direction:column;gap:8px}
.context-toggle-list label{
display:flex;align-items:center;gap:9px;padding:9px 10px;
border:1px solid rgba(255,255,255,.06);border-radius:10px;background:#070707;color:#777;font-size:10px
}
.context-toggle-list input{accent-color:#fff}
.project-context-note{margin:12px 0 0;color:#464646;font-size:9px;line-height:1.55}
.project-knowledge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.project-knowledge-card{
display:flex;align-items:center;gap:10px;padding:10px;
border:1px solid rgba(255,255,255,.06);border-radius:11px;background:#070707
}
.project-file-icon{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.07);border-radius:8px;color:#555}
.project-knowledge-card div{min-width:0}
.project-knowledge-card strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aaa;font-size:10px;font-weight:500}
.project-knowledge-card small{display:block;margin-top:4px;color:#474747;font-size:8px}
.project-memory-add{
display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:7px;margin-bottom:10px
}
.project-memory-add select,.project-memory-add input{
min-width:0;min-height:38px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);
border-radius:10px;background:#070707;color:#aaa;outline:none
}
.project-memory-row{
display:grid;grid-template-columns:90px minmax(0,1fr) 28px;align-items:start;gap:9px;
padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:#070707
}
.project-memory-type{
width:max-content;padding:4px 6px;border:1px solid rgba(255,255,255,.07);
border-radius:999px;color:#666;font-size:7px;text-transform:uppercase;letter-spacing:.08em
}
.project-memory-copy{min-width:0}
.project-memory-copy strong{display:block;color:#aaa;font-size:10px;line-height:1.5;font-weight:400}
.project-memory-copy small{display:block;margin-top:4px;color:#444;font-size:8px}
.project-memory-delete{border:0;background:transparent;color:#444;font-size:16px}
.project-memory-delete:hover{color:#aaa}
.project-empty-inline{
padding:14px;border:1px dashed rgba(255,255,255,.07);border-radius:11px;
color:#444;font-size:10px;text-align:center
}
.project-card{cursor:pointer}
@media(max-width:760px){
.project-workspace-head{align-items:flex-start;flex-direction:column}
.project-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.project-workspace-grid{grid-template-columns:1fr}
.project-section-wide{grid-column:auto}
.project-knowledge-grid{grid-template-columns:1fr}
.project-memory-add{grid-template-columns:1fr}
.project-memory-row{grid-template-columns:74px minmax(0,1fr) 24px}
}
/* === STEP 9: Files, Knowledge Index & Sources === */
.knowledge-search-row{
display:flex;align-items:center;gap:10px;margin-bottom:10px
}
.knowledge-search-row input{
min-width:0;flex:1;min-height:38px;padding:8px 11px;
border:1px solid rgba(255,255,255,.08);border-radius:10px;
background:#070707;color:#bbb;outline:none
}
.knowledge-search-row span{color:#454545;font-size:8px;white-space:nowrap}
.knowledge-search-results{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.knowledge-hit{
width:100%;display:grid;grid-template-columns:150px 110px minmax(0,1fr);
align-items:start;gap:9px;padding:9px 10px;border:1px solid rgba(255,255,255,.06);
border-radius:10px;background:#070707;color:#777;text-align:left
}
.knowledge-hit:hover{border-color:rgba(255,255,255,.14)}
.knowledge-hit-ref{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aaa;font-size:9px}
.knowledge-hit strong{color:#666;font-size:8px;font-weight:500}
.knowledge-hit p{
margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
color:#555;font-size:9px;line-height:1.45
}
.source-chips{
display:flex;flex-wrap:wrap;gap:6px;margin-top:10px
}
.source-chip{
display:inline-flex;align-items:center;gap:6px;max-width:260px;padding:5px 8px;
border:1px solid rgba(255,255,255,.07);border-radius:999px;background:#050505;color:#666
}
.source-chip:hover{color:#aaa;border-color:rgba(255,255,255,.15)}
.source-chip>span{color:#aaa;font-size:7px;font-weight:600}
.source-chip strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;font-weight:500}
.source-chip small{color:#444;font-size:7px;white-space:nowrap}
.source-dialog{width:min(700px,100%)}
.source-summary{
display:grid;grid-template-columns:120px 150px minmax(0,1fr);gap:8px;margin-bottom:12px
}
.source-excerpt{
max-height:50vh;overflow:auto;padding:14px;border:1px solid rgba(255,255,255,.07);
border-radius:12px;background:#070707;color:#aaa;font-size:11px;line-height:1.65;white-space:pre-wrap
}
.source-actions{display:flex;gap:8px;margin-top:12px}
@media(max-width:680px){
.knowledge-hit{grid-template-columns:1fr}
.knowledge-search-row{align-items:stretch;flex-direction:column}
.source-summary{grid-template-columns:1fr}
}
/* === STEP 10: Claude-like Artifact Work Surface === */
:root{--artifact-work-width:640px}
.app.artifact-work-open{padding-right:var(--artifact-work-width);transition:padding-right .22s ease,grid-template-columns .22s ease}
.artifact-panel{
width:min(var(--artifact-work-width),96vw);
grid-template-rows:62px 45px 1fr;
background:#080808;
}
.artifact-title-wrap{min-width:0;flex:1}
.artifact-title-input{
width:min(320px,100%);display:block;padding:0;border:0;background:transparent;outline:none;
color:#d5d5d5;font-size:11px;font-weight:500
}
.artifact-title-wrap>span{display:block;margin-top:3px;color:#505050;font-size:8px;text-transform:uppercase;letter-spacing:.12em}
.artifact-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px 0 16px;
border-bottom:1px solid rgba(255,255,255,.07);background:#060606
}
.artifact-tabs{display:flex;align-items:center;gap:3px}
.artifact-tabs button{
min-height:31px;padding:0 10px;border:1px solid transparent;border-radius:8px;background:transparent;
color:#555;font-size:9px
}
.artifact-tabs button:hover,.artifact-tabs button.active{color:#bbb;background:#0c0c0c;border-color:rgba(255,255,255,.07)}
.artifact-save-btn.dirty{background:#fff;color:#000;border-color:#fff}
.artifact-work-body,.artifact-pane{min-height:0;height:100%}
.artifact-pane{overflow:hidden}
.artifact-panel iframe{width:100%;height:100%;border:0;background:#fff}
#artifactCodePane{background:#050505}
#artifactEditor{
width:100%;height:100%;resize:none;border:0;outline:none;padding:20px 22px;background:#050505;color:#d5d5d5;
font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;tab-size:2
}
.artifact-versions-pane{overflow:auto;padding:14px}
.artifact-versions-list{display:flex;flex-direction:column;gap:8px}
.artifact-version{
display:flex;align-items:center;gap:12px;padding:11px;border:1px solid rgba(255,255,255,.07);
border-radius:11px;background:#070707
}
.artifact-version.active{border-color:rgba(255,255,255,.14);background:#0a0a0a}
.artifact-version-copy{min-width:0;flex:1}
.artifact-version-copy strong{display:block;color:#aaa;font-size:10px;font-weight:500}
.artifact-version-copy span{display:block;margin-top:4px;color:#4b4b4b;font-size:8px}
.artifact-version-copy small{display:block;margin-top:5px;color:#555;font-size:8px;line-height:1.4}
.project-artifact-list{display:flex;flex-direction:column;gap:7px}
.project-artifact-row{
width:100%;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.06);
border-radius:11px;background:#070707;color:#666;text-align:left
}
.project-artifact-row:hover{border-color:rgba(255,255,255,.14);background:#090909}
.project-artifact-icon{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.07);border-radius:9px}
.project-artifact-copy{min-width:0;flex:1}
.project-artifact-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b9b9b9;font-size:10px;font-weight:500}
.project-artifact-copy small{display:block;margin-top:4px;color:#484848;font-size:8px}
.project-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){
.app.artifact-work-open{padding-right:0}
}
@media(max-width:900px){
.artifact-panel{width:100vw!important}
.artifact-actions .action-btn{display:none}
.artifact-toolbar{padding-left:10px}
.artifact-tabs button{padding:0 8px}
.artifact-title-input{max-width:210px}
}
@media(max-width:760px){.project-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* === STEP 11: sidebar atom mark correction from supplied motion reference === */
.logo-button{
width:38px;height:38px;flex:0 0 38px;
overflow:visible;
}
.logo-button .brand-mark{
width:36px;height:36px;
overflow:visible;
}
.atom-mini{
width:34px!important;height:34px!important;
display:block;
filter:drop-shadow(0 0 5px rgba(255,255,255,.12));
}
.atom-mini .momo-orbit-dot{opacity:.78}
.atom-mini .momo-nucleus{filter:none}
.brand-row{gap:8px}
/* === STEP 11: Coding Work === */
.coding-view{overflow:hidden;background:#020202}
.coding-work-content{height:100%;min-height:0}
.coding-workspace{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);padding:16px 18px 18px;gap:12px}
.coding-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:2px 0 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.coding-title-row{display:flex;align-items:center;gap:9px;margin-top:6px}
.coding-title-row select{min-width:220px;max-width:420px;height:36px;padding:0 10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#070707;color:#c5c5c5;outline:none}
.coding-head-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.coding-grid{min-height:0;display:grid;grid-template-columns:220px minmax(320px,1fr) minmax(360px,42%);border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;background:#040404}
.coding-files-pane,.coding-editor-pane,.coding-output-pane{min-width:0;min-height:0;background:#040404}
.coding-files-pane{border-right:1px solid rgba(255,255,255,.06);display:grid;grid-template-rows:42px minmax(0,1fr)}
.coding-pane-head,.coding-editor-head,.coding-output-toolbar{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.06);background:#050505}
.coding-pane-head>span{color:#505050;font-size:8px;letter-spacing:.16em}
.coding-pane-head>button{width:26px;height:26px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:#080808;color:#777}
.coding-file-tree{overflow:auto;padding:7px}
.coding-tree-folder{padding:7px 7px 5px calc(7px + var(--depth)*13px);color:#555;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.coding-tree-folder span{margin-right:5px;color:#3f3f3f}
.coding-tree-file{width:100%;min-height:32px;display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:7px;padding:0 8px 0 calc(8px + var(--depth)*13px);border:1px solid transparent;border-radius:8px;background:transparent;color:#777;text-align:left}
.coding-tree-file:hover,.coding-tree-file.active{background:#090909;border-color:rgba(255,255,255,.07);color:#d0d0d0}
.coding-tree-file strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400}
.coding-tree-file small{color:#3f3f3f;font-size:7px}
.coding-file-dot{width:4px;height:4px;border-radius:50%;background:#555}
.coding-tree-file.active .coding-file-dot{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.45)}
.coding-editor-pane{display:grid;grid-template-rows:42px minmax(0,1fr) auto;border-right:1px solid rgba(255,255,255,.06)}
.coding-editor-head code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#777;font-size:10px}
.coding-editor-head>div{display:flex;gap:6px;align-items:center}
#codingEditor{width:100%;height:100%;resize:none;border:0;outline:none;padding:16px 17px;background:#030303;color:#cfcfcf;font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;tab-size:2;white-space:pre;overflow:auto}
#codingSaveBtn.dirty{background:#fff;color:#000;border-color:#fff}
.coding-momo-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:9px;border-top:1px solid rgba(255,255,255,.06);background:#050505}
.coding-momo-bar input{min-width:0;height:36px;padding:0 10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#080808;color:#aaa;outline:none}
.coding-output-pane{display:grid;grid-template-rows:42px minmax(0,1fr)}
.coding-output-toolbar{padding:0 8px 0 10px}
.coding-output-actions{display:flex;align-items:center;gap:6px;min-width:0}
.coding-output-actions>span{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#454545;font-size:8px}
.coding-output-body{min-height:0;position:relative}
.coding-output-view{position:absolute;inset:0;overflow:auto;background:#050505}
#codingPreviewPane{background:#fff}
#codingPreviewFrame{width:100%;height:100%;border:0;background:#fff}
.coding-output-empty{height:100%;display:grid;place-items:center;padding:24px;color:#444;font-size:10px;text-align:center}
.coding-console{padding:10px;background:#020202;font:10px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
.coding-console-line{display:grid;grid-template-columns:74px minmax(0,1fr);gap:8px;padding:5px 7px;border-bottom:1px solid rgba(255,255,255,.035)}
.coding-console-line>span{color:#373737}
.coding-console-line code{white-space:pre-wrap;overflow-wrap:anywhere;color:#777}
.coding-console-line.warn code{color:#b89d72}.coding-console-line.error code{color:#c77e7e}.coding-console-line.info code{color:#8a8a8a}
.coding-patch-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);background:#060606}
.coding-patch-head strong{display:block;color:#bcbcbc;font-size:10px;font-weight:500}.coding-patch-head span{display:block;margin-top:4px;color:#555;font-size:9px}.coding-patch-head>div:last-child{display:flex;gap:6px}
.coding-diff{padding:8px 0;background:#030303;font:10px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
.coding-diff-line{display:grid;grid-template-columns:28px minmax(0,1fr);min-height:20px;padding:1px 10px;border-left:2px solid transparent}
.coding-diff-line>span{color:#3e3e3e}.coding-diff-line code{white-space:pre-wrap;overflow-wrap:anywhere;color:#777}
.coding-diff-line.add{background:rgba(90,160,105,.07);border-left-color:rgba(90,160,105,.35)}.coding-diff-line.add>span,.coding-diff-line.add code{color:#8eb197}
.coding-diff-line.del{background:rgba(180,85,85,.06);border-left-color:rgba(180,85,85,.32)}.coding-diff-line.del>span,.coding-diff-line.del code{color:#b48787}
.coding-lock,.coding-empty{height:100%;display:grid;place-items:center;align-content:center;gap:10px;padding:36px;text-align:center}
.coding-lock-mark{width:84px;height:84px;margin-bottom:4px}
.coding-lock h2,.coding-empty h2{margin:0;color:#e4e4e4;font-size:24px;font-weight:500}.coding-lock p,.coding-empty p{max-width:520px;margin:0 0 6px;color:#555;font-size:11px;line-height:1.65}
@media(max-width:1180px){
.coding-grid{grid-template-columns:190px minmax(300px,1fr) minmax(320px,40%)}
.coding-editor-head .action-btn{padding:0 8px}
}
@media(max-width:900px){
.coding-view{overflow:auto}
.coding-workspace{height:auto;min-height:100%;padding:12px}
.coding-head{align-items:flex-start;flex-direction:column}
.coding-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(520px,70vh) minmax(480px,65vh);overflow:visible}
.coding-files-pane{border-right:0;border-bottom:1px solid rgba(255,255,255,.06);max-height:260px}
.coding-editor-pane{border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
.coding-title-row{align-items:flex-start;flex-direction:column;width:100%}.coding-title-row select{width:100%;max-width:none}
}
@media(max-width:600px){
.coding-workspace{padding:8px}.coding-grid{border-radius:10px}.coding-editor-head{align-items:flex-start;height:auto;padding:8px;flex-direction:column}.coding-editor-head>div{width:100%;overflow:auto}.coding-momo-bar{grid-template-columns:1fr}.coding-output-toolbar{height:auto;min-height:78px;align-items:flex-start;flex-direction:column;padding:8px}.coding-output-actions{width:100%}
}
/* === STEP 12: Tool Router === */
.meta .tool-meta{
padding:2px 6px;
border:1px solid rgba(255,255,255,.07);
border-radius:999px;
background:#070707;
color:#686868;
}
/* === STATIC Momo LOGO — supplied image, no animation === */
[data-momo-logo]{
overflow:hidden!important;
display:grid!important;
place-items:center!important;
}
.momo-static-logo{
display:block!important;
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center!important;
animation:none!important;
transform:none!important;
filter:none!important;
pointer-events:none!important;
user-select:none!important;
}
.logo-button{
width:38px!important;
height:38px!important;
flex:0 0 38px!important;
overflow:hidden!important;
border-radius:10px!important;
}
.logo-button .brand-mark{
width:34px!important;
height:34px!important;
overflow:hidden!important;
}
.topbar-brand-mark{
width:28px!important;
height:28px!important;
overflow:hidden!important;
border-radius:8px!important;
}
.hero-brand-mark{
width:245px!important;
height:245px!important;
overflow:hidden!important;
}
.account-logo-mark,.coding-lock-mark{overflow:hidden!important}
.account-logo-mark{
width:46px!important;
height:46px!important;
border-radius:12px!important;
}
.coding-lock-mark{
width:64px!important;
height:64px!important;
border-radius:16px!important;
}
.atom-ambient{display:none!important}
.momo-static-branding [data-momo-logo] *,
.momo-static-branding .momo-static-logo{animation:none!important}
/* === STEP 14: Settings & Personalization === */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settings-card{padding:17px;border:1px solid rgba(255,255,255,.07);border-radius:15px;background:#050505}
.settings-card h3{margin:5px 0 6px;color:#cfcfcf;font-size:14px;font-weight:500}
.settings-card>p{margin:0 0 15px;color:#565656;font-size:10px;line-height:1.55}
.settings-field{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:9px;padding:9px 10px;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:#070707;color:#777;font-size:10px}
.settings-field select{min-width:190px;height:34px;padding:0 9px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:#090909;color:#bbb;outline:none}
.settings-field input{min-width:190px;height:34px;padding:0 9px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:#090909;color:#bbb;outline:none}
.settings-goals{display:grid;gap:6px;margin-top:10px}
.settings-goal-row{padding:8px 10px;border:1px solid rgba(255,255,255,.05);border-radius:9px;background:#050505;color:#aaa;font-size:10px}
.settings-goal-row span{display:flex;flex-direction:column;gap:3px}.settings-goal-row small{color:#555;font-size:9px}
.settings-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:9px;padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:#070707}
.settings-toggle>span{min-width:0;flex:1}.settings-toggle strong{display:block;color:#aaa;font-size:10px;font-weight:500}.settings-toggle small{display:block;margin-top:4px;color:#4d4d4d;font-size:8px;line-height:1.5}
.settings-toggle input{width:17px;height:17px;accent-color:#fff}
.settings-note{margin-top:11px;padding:9px 10px;border:1px solid rgba(255,255,255,.05);border-radius:10px;color:#494949;background:#040404;font-size:9px;line-height:1.55}
.settings-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;padding:14px 15px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:#050505}
.settings-footer strong{display:block;color:#aaa;font-size:10px;font-weight:500}.settings-footer span{display:block;margin-top:4px;color:#484848;font-size:8px}
.hide-technical-meta .meta .confidence,.hide-technical-meta .meta .tool-meta,.hide-technical-meta [data-message-action="details"]{display:none!important}
.hide-source-chips .source-chips{display:none!important}
/* Exact supplied static logo; embedded in branding.js so standalone preview never breaks. */
.momo-static-logo{object-fit:cover!important;object-position:center!important;background:#000!important}
.logo-button .momo-static-logo{transform:scale(1.12)!important}
.topbar-brand-mark .momo-static-logo{transform:scale(1.12)!important}
.hero-brand-mark .momo-static-logo{transform:scale(1.02)!important}
@media(max-width:760px){.settings-grid{grid-template-columns:1fr}.settings-field{align-items:flex-start;flex-direction:column}.settings-field select{width:100%;min-width:0}.settings-footer{align-items:flex-start;flex-direction:column}}
/* === STEP 15: Central Plan / Feature Gates === */
.entitlement-dialog{width:min(520px,100%)}
.entitlement-copy{margin:8px 0 10px;color:#858585;font-size:11px;line-height:1.6}
.entitlement-plan{padding:10px 11px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:#070707;color:#5e5e5e;font-size:9px}
.entitlement-matrix-card{margin-top:12px}
.entitlement-matrix-card>p{margin:7px 0 15px;color:#585858;font-size:10px;line-height:1.55}
.entitlement-table{overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:12px}
.entitlement-row{display:grid;grid-template-columns:minmax(180px,1fr) 72px 72px 72px;align-items:center;min-height:39px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.055)}
.entitlement-row:last-child{border-bottom:0}
.entitlement-row strong{color:#8d8d8d;font-size:9px;font-weight:500}
.entitlement-row span{text-align:center;color:#626262;font-size:8px}
.entitlement-head{background:#080808}
.entitlement-head strong,.entitlement-head span{color:#4f4f4f;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:580px){.entitlement-row{grid-template-columns:minmax(120px,1fr) 52px 52px 52px;padding:0 7px}.entitlement-row strong{font-size:8px}}
/* === STEP 16: Security Diagnostics === */
.security-score{
display:flex;align-items:baseline;gap:8px;margin:14px 0 10px;padding:11px;
border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#070707
}
.security-score strong{font-size:18px;font-weight:500;color:#bcbcbc}
.security-score span{font-size:9px;color:#5d5d5d;text-transform:uppercase;letter-spacing:.08em}
.security-score.warn{border-color:rgba(255,175,80,.18)}
.security-check-list{display:flex;flex-direction:column;gap:6px;margin-bottom:11px}
.security-check{
display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid rgba(255,255,255,.055);
border-radius:9px;background:#060606
}
.security-check>span{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;font-size:8px;background:#0d0d0d;color:#777}
.security-check strong{color:#737373;font-size:9px;font-weight:400}
.security-check.fail>span{color:#d99}
/* === STEP 17: Reliability === */
.connection.offline .connection-dot{background:#777;box-shadow:none}
.connection.offline{color:#777}
.reliability-score{display:flex;align-items:baseline;gap:9px;margin:14px 0 10px;padding:11px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#070707}
.reliability-score strong{font-size:20px;font-weight:500;color:#c0c0c0}
.reliability-score span{color:#5c5c5c;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.reliability-score.degraded{border-color:rgba(255,190,90,.18)}
.reliability-score.attention{border-color:rgba(255,90,90,.18)}
.reliability-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}
.reliability-grid>div{padding:9px;border:1px solid rgba(255,255,255,.055);border-radius:9px;background:#060606}
.reliability-grid span{display:block;color:#454545;font-size:7px;text-transform:uppercase;letter-spacing:.08em}
.reliability-grid strong{display:block;margin-top:4px;color:#777;font-size:9px;font-weight:500}
.reliability-recovery{margin:0 0 10px;padding:8px 9px;border:1px solid rgba(255,190,90,.15);border-radius:9px;color:#967c55;font-size:9px;background:#090704}
@media(max-width:560px){.reliability-grid{grid-template-columns:1fr}}
/* === STEP 18: Release Quality === */
.release-gate-status{
display:flex;flex-direction:column;gap:5px;margin:13px 0 10px;padding:12px;
border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#070707
}
.release-gate-status strong{font-size:11px;font-weight:550;letter-spacing:.08em}
.release-gate-status span{color:#555;font-size:8px;line-height:1.5}
.release-gate-status.ok{border-color:rgba(255,255,255,.14)}
.release-gate-status.warn{border-color:rgba(220,180,90,.18)}
.release-gate-status.fail{border-color:rgba(255,90,90,.22)}
.release-gate-status.fail strong{color:#d88}
.release-check-summary{display:flex;flex-direction:column;gap:5px;margin:8px 0 11px}
.release-check-line{
display:grid;grid-template-columns:20px minmax(120px,.7fr) minmax(0,1fr);
align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(255,255,255,.055);
border-radius:9px;background:#060606
}
.release-check-line>span{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#0d0d0d;color:#777;font-size:8px}
.release-check-line strong{color:#797979;font-size:9px;font-weight:500}
.release-check-line small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#484848;font-size:8px}
.release-check-line.fail>span{color:#d88}
.release-check-line.warn>span{color:#c9a96d}
.settings-inline-actions{display:flex;gap:7px;flex-wrap:wrap}
/* === STEP 19: PWA & Mobile === */
:root{
--app-viewport-height:100dvh;
--keyboard-inset:0px;
--safe-top:env(safe-area-inset-top,0px);
--safe-right:env(safe-area-inset-right,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
--safe-left:env(safe-area-inset-left,0px);
--topbar-height:62px;
}
html,body{
overscroll-behavior:none;
-webkit-text-size-adjust:100%;
}
body{-webkit-tap-highlight-color:transparent}
.app{
height:var(--app-viewport-height,100dvh);
min-height:0;
padding-left:0;
padding-right:0;
}
.main{
min-height:0;
grid-template-rows:calc(var(--topbar-height) + var(--safe-top)) minmax(0,1fr);
}
.topbar{
padding-top:var(--safe-top);
padding-left:max(20px,var(--safe-left));
padding-right:max(20px,var(--safe-right));
}
.sidebar{
padding-top:calc(14px + var(--safe-top));
padding-bottom:calc(14px + var(--safe-bottom));
padding-left:max(12px,var(--safe-left));
}
.content,.view,.chat-scroll,.session-list,.panel-view{
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.composer-shell{
padding-left:max(22px,var(--safe-left));
padding-right:max(22px,var(--safe-right));
padding-bottom:calc(18px + var(--safe-bottom));
}
.panel-view{
padding-left:max(28px,var(--safe-left));
padding-right:max(28px,var(--safe-right));
padding-bottom:calc(80px + var(--safe-bottom));
}
button,[role="button"],.session,.project-chat-row,.knowledge-hit{
touch-action:manipulation;
}
.pwa-install-btn{font-size:16px;line-height:1}
.pwa-update-banner{
position:fixed;
left:50%;
bottom:calc(18px + var(--safe-bottom));
z-index:520;
width:min(520px,calc(100% - 28px));
transform:translateX(-50%);
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:11px 12px 11px 14px;
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
background:rgba(10,10,10,.97);
box-shadow:0 20px 70px rgba(0,0,0,.78);
backdrop-filter:blur(18px);
}
.pwa-update-banner strong{display:block;color:#d8d8d8;font-size:10px;font-weight:500}
.pwa-update-banner span{display:block;margin-top:3px;color:#575757;font-size:8px}
.pwa-update-actions{display:flex;gap:6px;flex:0 0 auto}
.pwa-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
margin:13px 0
}
.pwa-grid>div{
padding:10px;
border:1px solid rgba(255,255,255,.06);
border-radius:10px;
background:#070707
}
.pwa-grid span{display:block;color:#454545;font-size:7px;text-transform:uppercase;letter-spacing:.08em}
.pwa-grid strong{display:block;margin-top:5px;color:#8c8c8c;font-size:9px;font-weight:500}
@media(max-width:720px){
:root{--topbar-height:56px}
.app{height:var(--app-viewport-height,100dvh)}
.main{grid-template-rows:calc(var(--topbar-height) + var(--safe-top)) minmax(0,1fr)}
.topbar{
min-height:calc(var(--topbar-height) + var(--safe-top));
padding-top:var(--safe-top);
padding-left:max(10px,var(--safe-left));
padding-right:max(10px,var(--safe-right));
}
.sidebar{
width:min(88vw,320px);
max-width:calc(100vw - 34px);
padding-top:calc(12px + var(--safe-top));
padding-bottom:calc(12px + var(--safe-bottom));
padding-left:max(10px,var(--safe-left));
}
.composer-shell{
padding-left:max(10px,var(--safe-left));
padding-right:max(10px,var(--safe-right));
padding-bottom:calc(10px + var(--safe-bottom));
}
.panel-view{
padding-left:max(14px,var(--safe-left));
padding-right:max(14px,var(--safe-right));
padding-bottom:calc(74px + var(--safe-bottom));
}
.chat-scroll{
padding-left:max(13px,var(--safe-left));
padding-right:max(13px,var(--safe-right));
padding-bottom:calc(118px + var(--safe-bottom));
}
.round-btn,.send{
width:42px;
height:42px;
min-width:42px;
min-height:42px;
}
.hamburger-btn{flex-basis:42px}
textarea,input,select{
font-size:16px;
}
.composer textarea{
min-height:46px;
font-size:16px;
}
.session{min-height:44px}
.sidebar-action{min-height:44px}
.session-menu{
top:8px;
width:30px;
height:30px;
opacity:1;
}
.message-actions{opacity:1}
.message-actions button{
width:34px;
height:34px;
}
.topbar-brand-mark{width:28px!important;height:28px!important}
.shortcut-help-btn{display:none}
.pwa-update-banner{
align-items:stretch;
flex-direction:column;
bottom:calc(10px + var(--safe-bottom));
}
.pwa-update-actions{width:100%}
.pwa-update-actions button{flex:1;min-height:42px}
.pwa-grid{grid-template-columns:1fr 1fr}
}
@media(pointer:coarse){
.message-actions{opacity:1}
.session-menu{opacity:1}
button{min-height:40px}
}
@media(max-width:420px){
.page-title span{display:none}
.project-chip{max-width:100px}
.pwa-grid{grid-template-columns:1fr}
}
.keyboard-open .composer-note{display:none}
.keyboard-open .composer-shell{
padding-bottom:8px;
}
.keyboard-open .chat-scroll{
padding-bottom:104px;
}
.pwa-standalone body{
user-select:none;
}
.pwa-standalone textarea,
.pwa-standalone input,
.pwa-standalone [contenteditable="true"],
.pwa-standalone .rich-text,
.pwa-standalone pre{
user-select:text;
}
/* === STEP 20: Production Deployment === */
.production-status{
display:flex;flex-direction:column;gap:4px;margin:13px 0 10px;padding:11px;
border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#070707
}
.production-status strong{font-size:10px;letter-spacing:.08em;font-weight:550}
.production-status span{color:#555;font-size:8px}
.production-status.fail{border-color:rgba(255,90,90,.22)}
.production-status.fail strong{color:#d88}
.production-checks{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.production-check{
display:grid;grid-template-columns:20px minmax(130px,.7fr) minmax(0,1fr);
gap:7px;align-items:center;padding:7px 9px;border:1px solid rgba(255,255,255,.055);
border-radius:9px;background:#060606
}
.production-check>span{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#0d0d0d;color:#777;font-size:8px}
.production-check strong{color:#777;font-size:9px;font-weight:500}
.production-check small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#484848;font-size:8px}
.production-check.fail>span{color:#d88}
.production-backend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0}
.production-backend>div{padding:9px;border:1px solid rgba(255,255,255,.055);border-radius:9px;background:#060606}
.production-backend span{display:block;color:#444;font-size:7px;text-transform:uppercase;letter-spacing:.08em}
.production-backend strong{display:block;margin-top:4px;color:#858585;font-size:9px;font-weight:500}
@media(max-width:520px){.production-backend{grid-template-columns:1fr}.production-check{grid-template-columns:20px 1fr}.production-check small{grid-column:2}}
/* === STEP 21: Product Polish === */
.sr-only{
position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important
}
.skip-link{
position:fixed;left:12px;top:10px;z-index:9999;
transform:translateY(-160%);
padding:9px 12px;border:1px solid rgba(255,255,255,.18);border-radius:9px;
background:#111;color:#eee;font-size:10px;text-decoration:none;
transition:transform .16s ease
}
.skip-link:focus{transform:translateY(0)}
:where(button,a,input,textarea,select,[tabindex]):focus-visible{
outline:1px solid rgba(255,255,255,.72);
outline-offset:3px;
}
/* Composer-Eingabe: kein Fokus-Rahmen, nur der Cursor blinkt (Wunsch Product) */
#chatInput:focus-visible,#chatInput:focus{outline:none}
button:disabled{cursor:default;opacity:.48}
.action-btn.is-busy{position:relative;opacity:.7}
.hero-value{
margin-top:9px;color:#4a4a4a;font-size:8px;letter-spacing:.08em;text-transform:uppercase
}
.hero-quickstart{
width:min(620px,calc(100vw - 48px));
margin:26px auto 0;
padding:12px;
border:1px solid rgba(255,255,255,.065);
border-radius:15px;
background:rgba(6,6,6,.72);
backdrop-filter:blur(16px)
}
.hero-quickstart-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:2px 2px 10px
}
.hero-quickstart-head strong{display:block;color:#8a8a8a;font-size:9px;font-weight:500}
.hero-quickstart-head span{display:block;margin-top:3px;color:#414141;font-size:8px}
.hero-quickstart-dismiss{
width:28px;height:28px;min-height:28px;border:0;border-radius:8px;background:transparent;color:#464646;cursor:pointer
}
.hero-quickstart-dismiss:hover{background:#0d0d0d;color:#aaa}
.hero-quickstart-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.hero-quickstart-grid>button{
min-height:72px;padding:10px;text-align:left;
border:1px solid rgba(255,255,255,.055);border-radius:11px;
background:#080808;color:#777;cursor:pointer
}
.hero-quickstart-grid>button:hover{border-color:rgba(255,255,255,.12);background:#0b0b0b}
.hero-quickstart-grid strong{display:block;font-size:9px;font-weight:500;color:#858585}
.hero-quickstart-grid span{display:block;margin-top:5px;font-size:7.5px;line-height:1.45;color:#414141}
.empty-actions{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:14px}
.empty-footnote{margin-top:12px;color:#393939;font-size:8px;line-height:1.5}
.polish-loading{
padding:16px;border:1px solid rgba(255,255,255,.055);border-radius:12px;background:#050505
}
.polish-loading-title{margin-bottom:12px;color:#606060;font-size:9px}
.polish-skeleton-row{height:10px;margin:8px 0;overflow:hidden;border-radius:6px;background:#090909}
.polish-skeleton-row span{
display:block;width:var(--skeleton-width,80%);height:100%;
border-radius:inherit;background:linear-gradient(90deg,#0b0b0b,#141414,#0b0b0b);
background-size:180% 100%;animation:polish-shimmer 1.2s linear infinite
}
@keyframes polish-shimmer{to{background-position:-180% 0}}
[data-view][aria-current="page"]{position:relative}
[data-view][aria-current="page"]::after{
content:"";position:absolute;right:8px;width:3px;height:3px;border-radius:50%;background:#d8d8d8;opacity:.65
}
@media(max-width:720px){
.hero-quickstart{width:min(100% - 24px,520px);margin-top:20px}
.hero-quickstart-grid{grid-template-columns:1fr 1fr}
.hero-quickstart-grid>button{min-height:66px}
.empty-state>div{max-width:340px}
}
@media(max-width:430px){
.hero-quickstart-grid{grid-template-columns:1fr}
.hero-quickstart-grid>button{min-height:56px}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
/* === STEP 22: Release Candidate === */
.rc-status{
display:flex;flex-direction:column;gap:4px;margin:13px 0 10px;padding:12px;
border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#070707
}
.rc-status strong{font-size:12px;font-weight:600;letter-spacing:.1em}
.rc-status span{color:#555;font-size:8px}
.rc-status.ok{border-color:rgba(155,255,185,.18)}
.rc-status.fail{border-color:rgba(255,90,90,.24)}
.rc-status.fail strong{color:#d88}
.rc-blockers{display:flex;flex-direction:column;gap:5px;margin:8px 0 13px}
.rc-blockers>div{
display:grid;grid-template-columns:20px minmax(120px,.65fr) minmax(0,1fr);
align-items:center;gap:7px;padding:8px 9px;border:1px solid rgba(255,90,90,.12);
border-radius:9px;background:#070505
}
.rc-blockers span{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#130a0a;color:#d88;font-size:8px}
.rc-blockers strong{color:#9a7373;font-size:9px;font-weight:500}
.rc-blockers small{color:#5f4747;font-size:8px}
.rc-manual-title{margin:14px 0 7px;color:#555;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.rc-manual-list{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.rc-manual-item{
display:flex;align-items:flex-start;gap:9px;padding:9px;border:1px solid rgba(255,255,255,.055);
border-radius:10px;background:#060606;cursor:pointer
}
.rc-manual-item input{width:16px;height:16px;min-height:16px;margin:1px 0 0;accent-color:#d7d7d7}
.rc-manual-item span{min-width:0}
.rc-manual-item strong{display:block;color:#7d7d7d;font-size:9px;font-weight:500}
.rc-manual-item small{display:block;margin-top:3px;color:#444;font-size:8px;line-height:1.45}
@media(max-width:520px){
.rc-blockers>div{grid-template-columns:20px 1fr}
.rc-blockers small{grid-column:2}
}
/* === FOUNDATION MODEL v24.8 === */
.hero-foundation-note{margin-top:7px;color:#4b4b4b;font-size:7.5px;letter-spacing:.04em}
.foundation-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:13px 0}
.foundation-status>div{padding:9px;border:1px solid rgba(255,255,255,.055);border-radius:9px;background:#060606}
.foundation-status span{display:block;color:#444;font-size:7px;text-transform:uppercase;letter-spacing:.08em}
.foundation-status strong{display:block;margin-top:4px;color:#858585;font-size:9px;font-weight:500}
.foundation-fingerprint{margin:10px 0;padding:10px;border:1px solid rgba(255,255,255,.065);border-radius:10px;background:#050505;overflow:hidden}
.foundation-fingerprint>span{display:block;color:#444;font-size:7px;letter-spacing:.08em}
.foundation-fingerprint code{display:block;margin-top:5px;color:#a0a0a0;font-size:10px;word-break:break-all}
.foundation-fingerprint small{display:block;margin-top:5px;color:#454545;font-size:7px;word-break:break-all}
.foundation-runtime-note{display:flex;justify-content:space-between;gap:10px;margin:8px 0 12px;padding:8px 9px;border-radius:9px;background:#070707}
.foundation-runtime-note strong,.foundation-runtime-note span{font-size:8px;font-weight:400;color:#5f5f5f}
@media(max-width:520px){.foundation-status{grid-template-columns:1fr}.hero-foundation-note{max-width:330px;margin-left:auto;margin-right:auto}}
/* === ACCOUNT SETTINGS HOTFIX === */
.view-initial-fallback{min-height:110px}
.settings-card-degraded,.account-degraded{
border-style:dashed!important;
border-color:rgba(255,255,255,.09)!important
}
.settings-render-fallback,.account-render-fallback{max-width:760px}
/* Momo locale is intentionally automatic; no manual language selector. */
.profile-auto-locale{display:flex;flex-direction:column;gap:7px;padding:11px 12px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:12px;background:var(--surface-soft,rgba(255,255,255,.03))}
.profile-auto-locale span{font-size:12px;color:var(--muted,#9b9b9b)}
.profile-auto-locale strong{font-size:14px;font-weight:600;color:var(--text,#fff)}
/* === OpenOS exact motion branding === */
html.momo-motion-branding [data-momo-logo]{
overflow:visible!important;
display:grid!important;
place-items:center!important;
line-height:0;
}
html.momo-motion-branding .logo-button{
width:38px!important;height:38px!important;flex:0 0 38px!important;
overflow:visible!important;border-radius:10px!important;
}
html.momo-motion-branding .logo-button .brand-mark{
width:36px!important;height:36px!important;overflow:visible!important;
}
html.momo-motion-branding .atom-mini{
width:34px!important;height:34px!important;display:block!important;
filter:drop-shadow(0 0 5px rgba(255,255,255,.12))!important;
}
html.momo-motion-branding .atom-mini .momo-orbit-dot{opacity:.78}
html.momo-motion-branding .atom-mini .momo-nucleus{filter:none}
html.momo-motion-branding .topbar-brand-mark{
width:28px!important;height:28px!important;border-radius:0!important;
}
html.momo-motion-branding .topbar-logo-svg{
width:26px!important;height:26px!important;display:block;
filter:drop-shadow(0 0 7px rgba(255,255,255,.16));
}
html.momo-motion-branding .hero-brand-mark{
width:245px!important;height:245px!important;
}
html.momo-motion-branding .account-logo-mark{
width:46px!important;height:46px!important;border-radius:0!important;
}
html.momo-motion-branding .account-logo-svg{
width:44px!important;height:44px!important;
filter:drop-shadow(0 0 9px rgba(255,255,255,.16));
}
html.momo-motion-branding .momo-brand-svg,
html.momo-motion-branding .momo-orbit-logo{display:block;overflow:visible!important}
html.momo-motion-branding .momo-static-logo{display:none!important}
html.momo-motion-branding .atom-ambient{display:none!important}
html.reduced-motion.momo-motion-branding .momo-brand-svg animateMotion,
html.reduced-motion.momo-motion-branding .atom-mini animateMotion,
html.reduced-motion.momo-motion-branding .topbar-logo-svg animateMotion,
html.reduced-motion.momo-motion-branding .account-logo-svg animateMotion{display:none}
/* === Momo Agent Tasks v24.8 === */
.agent-tasks-wrap{max-width:980px;margin:0 auto}
.agent-create-card,.agent-task-card{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.018);border-radius:18px;padding:20px}
.agent-create-card h2{margin:5px 0 8px;font-size:24px;font-weight:550}
.agent-create-card p{color:#777;line-height:1.55;margin:0 0 16px}
.agent-create-card textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:108px;background:#090909;color:#eee;border:1px solid rgba(255,255,255,.11);border-radius:14px;padding:14px;font:inherit;line-height:1.5;outline:none}
.agent-create-card textarea:focus{border-color:rgba(255,255,255,.32)}
.agent-create-actions{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.agent-runtime-note{font-size:10px;color:#555}
.agent-task-list{display:grid;gap:12px;margin-top:16px}
.agent-task-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.agent-task-head strong{display:block;font-size:15px;font-weight:600}.agent-task-head div>span{display:block;color:#555;font-size:10px;margin-top:4px}
.agent-status{font-size:9px;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:6px 8px;color:#888;white-space:nowrap}
.agent-status.running{color:#fff;border-color:rgba(255,255,255,.34)}.agent-status.completed{color:#bbb}.agent-status.failed,.agent-status.waiting_approval{color:#ccc;border-style:dashed}
.agent-goal{margin:14px 0;color:#aaa;line-height:1.55;font-size:12px;white-space:pre-wrap}
.agent-error,.agent-approval{margin:10px 0;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);font-size:11px;color:#aaa}
.agent-result{margin:12px 0;border-top:1px solid rgba(255,255,255,.06);padding-top:10px}.agent-result summary{cursor:pointer;color:#888;font-size:11px}.agent-result pre{white-space:pre-wrap;word-break:break-word;color:#ccc;font:inherit;font-size:12px;line-height:1.55;max-height:460px;overflow:auto}
.agent-progress{display:grid;gap:6px;margin:12px 0}.agent-progress>div{display:grid;grid-template-columns:90px 1fr;gap:10px;border-left:1px solid rgba(255,255,255,.1);padding-left:10px}.agent-progress span{font-size:9px;text-transform:uppercase;color:#555;letter-spacing:.06em}.agent-progress p{margin:0;color:#666;font-size:10px;line-height:1.45;max-height:44px;overflow:hidden}
.agent-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.agent-actions button{border:1px solid rgba(255,255,255,.09);background:transparent;color:#777;border-radius:9px;padding:7px 10px;font-size:10px;cursor:pointer}.agent-actions button:hover{color:#ddd;border-color:rgba(255,255,255,.25)}
@media(max-width:720px){.agent-create-card,.agent-task-card{padding:16px;border-radius:14px}.agent-task-head{align-items:center}.agent-progress>div{grid-template-columns:72px 1fr}}
/* === Momo v24.8 observable agent work + code UX === */
.code-block{border:1px solid rgba(255,255,255,.10);border-radius:12px;overflow:hidden;background:#090909;margin:12px 0 16px}
.code-head{position:sticky;top:0;z-index:2;background:#111!important;border-bottom:1px solid rgba(255,255,255,.08);min-height:38px}
.code-head>span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:#888;text-transform:none!important;letter-spacing:.02em}
.code-action{transition:background .15s ease,color .15s ease,border-color .15s ease}
.code-action:hover{background:#202020!important;color:#fff!important}
.code-action.copied{background:#fff!important;color:#000!important;border-color:#fff!important}
.code-block pre{overflow:auto;margin:0;padding:16px 18px;line-height:1.58;tab-size:2}
.code-block pre code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;white-space:pre}
.agent-worklog,.agent-checkpoint,.agent-tool-call{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.015)}
.agent-worklog{margin-top:12px;overflow:hidden}
.agent-worklog>summary,.agent-checkpoint>summary,.agent-tool-call>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px}
.agent-worklog>summary::-webkit-details-marker,.agent-checkpoint>summary::-webkit-details-marker,.agent-tool-call>summary::-webkit-details-marker{display:none}
.agent-worklog>summary{padding:13px 14px;justify-content:space-between;background:rgba(255,255,255,.025)}
.agent-worklog>summary>div{display:grid;gap:3px}
.agent-worklog>summary strong{font-size:12px;font-weight:600}
.agent-worklog>summary span{font-size:9px;color:#666}
.agent-chevron{font-size:13px!important;color:#666!important;transition:transform .15s ease}
details[open]>summary>.agent-chevron{transform:rotate(180deg)}
.agent-worklog-body{display:grid;gap:8px;padding:10px}
.agent-checkpoint{overflow:hidden}
.agent-checkpoint>summary{padding:11px 12px}
.agent-step-index{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#161616;color:#777;font:600 9px ui-monospace,SFMono-Regular,Menlo,monospace}
.agent-checkpoint>summary>div{display:grid;gap:2px;flex:1}
.agent-checkpoint>summary strong{font-size:11px;font-weight:600}
.agent-checkpoint>summary div span{font-size:9px;color:#5e5e5e}
.agent-checkpoint-body{border-top:1px solid rgba(255,255,255,.06);padding:12px}
.agent-checkpoint-summary{font-size:11px;line-height:1.6;color:#b5b5b5}
.agent-tools{margin-top:12px;display:grid;gap:7px}
.agent-tool-section-title,.agent-tool-label{font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:#555}
.agent-tool-call{background:#0c0c0c}
.agent-tool-call>summary{padding:9px 10px}
.agent-tool-call>summary strong{font-size:10px;font-weight:550;flex:1}
.agent-tool-call>summary span:last-child{font-size:9px;color:#666}
.agent-tool-dot{width:6px;height:6px;border-radius:50%;background:#666}.agent-tool-dot.completed{background:#d5d5d5}.agent-tool-dot.failed,.agent-tool-dot.blocked{background:#777}.agent-tool-dot.running{box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.agent-tool-body{border-top:1px solid rgba(255,255,255,.06);padding:10px;display:grid;gap:7px}
.agent-tool-body pre{margin:0;max-height:190px;overflow:auto;padding:9px;background:#070707;border-radius:8px;font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#888}
.agent-tool-evidence{white-space:pre-wrap;word-break:break-word;font-size:10px;line-height:1.55;color:#999;background:#080808;border-radius:8px;padding:9px}
.agent-no-tools{font-size:9px;color:#555;padding:4px 1px}
.agent-result>summary{display:flex;justify-content:space-between;align-items:center}.agent-result>summary span{font-size:9px;color:#666;font-weight:400}
.agent-result-content{padding:12px 0 3px;font-size:11px;line-height:1.65}
@media(max-width:680px){.code-head{position:static}.code-block pre{padding:14px}.agent-worklog>summary{padding:12px}.agent-checkpoint-body{padding:10px}}
.agent-remote-event{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:start;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px}.agent-remote-event span{color:#555;font-variant-numeric:tabular-nums}.agent-remote-event strong{font-weight:500;color:#cfcfcf}.agent-runtime-note{line-height:1.35}
.agent-approval-actions{display:flex;gap:8px;margin-top:10px}.agent-approval-actions button{border:1px solid rgba(255,255,255,.12);background:#111;color:#eee;border-radius:8px;padding:7px 10px;cursor:pointer}.agent-approval-actions button:first-child{background:#f2f2f2;color:#0a0a0a}.agent-approval-actions button:disabled{opacity:.5;cursor:wait}
/* === RC10 uploaded atom branding + lower network carpet === */
[data-momo-logo]{line-height:0}
.momo-atom-logo-img{
display:block;
width:100%;
height:100%;
object-fit:contain;
user-select:none;
-webkit-user-drag:none;
pointer-events:none;
filter:drop-shadow(0 0 8px rgba(255,255,255,.14));
}
html.reduced-motion .momo-atom-logo-img{filter:drop-shadow(0 0 5px rgba(255,255,255,.10))}
.content{
isolation:isolate;
background:radial-gradient(circle at 50% 100%,rgba(255,255,255,.022),transparent 38%);
}
.content>.view{
position:relative;
z-index:2;
}
.momo-network-carpet{
position:absolute;
left:0;
right:0;
bottom:0;
height:min(43vh,470px);
min-height:250px;
z-index:1;
overflow:hidden;
pointer-events:none;
opacity:.60;
background:#000;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.16) 16%,#000 48%,#000 100%);
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.16) 16%,#000 48%,#000 100%);
}
.momo-network-carpet::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 32%,transparent 74%,rgba(0,0,0,.18));
}
.momo-network-carpet canvas{opacity:.92}
.momo-network-carpet.reduced-motion{
opacity:.24;
background:
radial-gradient(circle at 18% 82%,rgba(255,255,255,.22) 0 1px,transparent 1.7px),
radial-gradient(circle at 47% 66%,rgba(255,255,255,.16) 0 1px,transparent 1.8px),
radial-gradient(circle at 78% 84%,rgba(255,255,255,.19) 0 1px,transparent 1.7px),
#000;
background-size:46px 46px,62px 62px,54px 54px,auto;
}
@media(max-width:720px){
.momo-network-carpet{
height:min(36vh,360px);
min-height:210px;
opacity:.48;
}
}
/* === RC11 header identity follows sidebar state === */
.app:not(.sidebar-state-ready) .topbar-brand-mark,
.app:not(.sidebar-state-ready) .page-title{visibility:hidden}
.app.menu-open .topbar-brand-mark,
.app.menu-open .page-title{display:none!important}
.app.menu-closed .topbar-brand-mark{display:grid}
.app.menu-closed .page-title{display:block}
/* === RC13 bottom account dock === */
/* Klebt unten, weil das ganze Menue rollt: sonst waere die Account-Karte bei
vielen Chats nur am Ende der Liste erreichbar. Der Verlauf nach oben verdeckt
die Chats, die darunter durchlaufen. */
.sidebar-account-dock{
position:sticky;
bottom:0;
margin-top:auto;
padding-top:8px;
flex:0 0 auto;
z-index:2;
background:linear-gradient(to top,rgba(0,0,0,.97) 72%,rgba(0,0,0,0));
}
.sidebar-account-trigger{
width:100%;
min-height:66px;
display:flex;
align-items:center;
gap:10px;
padding:9px 9px;
border:1px solid rgba(255,255,255,.07);
border-radius:14px;
background:#040404;
color:#d9d9d9;
text-align:left;
transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.sidebar-account-trigger:hover,
.sidebar-account-dock.open .sidebar-account-trigger,
.sidebar-account-dock:focus-within .sidebar-account-trigger{
background:#070707;
border-color:rgba(255,255,255,.13);
}
.sidebar-account-avatar{
width:34px;height:34px;
flex:0 0 34px;
display:grid;place-items:center;
border:1px solid rgba(255,255,255,.10);
border-radius:50%;
background:#0b0b0b;
color:#e8e8e8;
font-size:12px;
font-weight:650;
letter-spacing:.02em;
}
.sidebar-account-copy{
min-width:0;
display:flex;
flex:1 1 auto;
flex-direction:column;
gap:2px;
}
.sidebar-account-copy>strong{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#e4e4e4;
font-size:11px;
font-weight:600;
line-height:1.25;
}
.sidebar-engine-title{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#777;
font-size:8px;
font-weight:600;
letter-spacing:.09em;
line-height:1.4;
}
.sidebar-engine-stats{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#494949;
font-size:7px;
line-height:1.4;
}
.sidebar-account-chevron{
flex:0 0 auto;
color:#505050;
font-size:13px;
transition:transform .16s ease,color .16s ease;
}
.sidebar-account-dock.open .sidebar-account-chevron,
.sidebar-account-dock:hover .sidebar-account-chevron,
.sidebar-account-dock:focus-within .sidebar-account-chevron{
color:#9a9a9a;
transform:translateY(-1px);
}
.sidebar-account-popover{
position:absolute;
left:0;right:0;
bottom:calc(100% + 8px);
z-index:120;
display:flex;
flex-direction:column;
gap:3px;
padding:7px;
border:1px solid rgba(255,255,255,.11);
border-radius:15px;
background:rgba(13,13,13,.98);
box-shadow:0 18px 45px rgba(0,0,0,.62);
opacity:0;
visibility:hidden;
transform:translateY(7px) scale(.985);
transform-origin:bottom center;
pointer-events:none;
transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
}
/* :focus-within statt :focus-visible hielt das Menue nach einem MAUSklick offen —
der angeklickte Eintrag behielt den Fokus, und das Menue klemmte sichtbar fest.
:has(:focus-visible) greift nur bei Tastaturbedienung, und genau dafuer war die
Regel gedacht. */
.sidebar-account-dock:hover .sidebar-account-popover,
.sidebar-account-dock:has(:focus-visible) .sidebar-account-popover,
.sidebar-account-dock.open .sidebar-account-popover{
opacity:1;
visibility:visible;
transform:translateY(0) scale(1);
pointer-events:auto;
}
.sidebar-account-menu-action{
width:100%;
min-height:42px;
display:flex;
align-items:center;
gap:11px;
padding:0 11px;
border:0;
border-radius:10px;
background:transparent;
color:#bbb;
text-align:left;
font-size:12px;
}
.sidebar-account-menu-action:hover,
.sidebar-account-menu-action.active{
background:#171717;
color:#fff;
}
.sidebar-account-menu-action svg{width:17px;height:17px;flex:0 0 17px}
@media(max-width:720px){
.sidebar-account-dock{padding-bottom:max(2px,env(safe-area-inset-bottom))}
.sidebar-account-trigger{min-height:70px}
.sidebar-account-popover{bottom:calc(100% + 9px)}
}
/* === RC14 desktop collapsed icon rail === */
.sidebar-rail{display:none}
@media(min-width:721px){
.app.sidebar-closed{--sidebar:64px}
.app.sidebar-closed .sidebar-rail{
position:fixed;
inset:0 auto 0 0;
z-index:31;
width:64px;
display:flex;
flex-direction:column;
align-items:center;
padding:14px 9px 12px;
border-right:1px solid rgba(255,255,255,.065);
background:rgba(0,0,0,.98);
}
.rail-btn{
width:44px;height:44px;
flex:0 0 44px;
display:grid;place-items:center;
padding:0;
border:1px solid transparent;
border-radius:12px;
background:transparent;
color:#8a8a8a;
transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.rail-btn:hover,.rail-btn.active{
color:#f1f1f1;
background:#090909;
border-color:rgba(255,255,255,.075);
}
.rail-btn:active{transform:scale(.96)}
.rail-btn svg{width:20px;height:20px;stroke-linecap:round;stroke-linejoin:round}
.rail-brand{margin-bottom:18px;border-radius:50%}
.rail-brand-mark,.rail-atom-logo{width:34px;height:34px;display:block}
.rail-primary{display:flex;flex-direction:column;gap:7px;align-items:center}
.rail-spacer{flex:1 1 auto;min-height:28px}
.rail-account{position:relative;display:flex;justify-content:center}
.rail-account-btn{border-radius:50%}
.rail-account-avatar{
width:31px;height:31px;
display:grid;place-items:center;
border:1px solid rgba(255,255,255,.13);
border-radius:50%;
background:#0a0a0a;
color:#e8e8e8;
font-size:11px;font-weight:650;
}
.rail-account-popover{
position:absolute;
left:calc(100% + 11px);
bottom:0;
width:190px;
display:flex;
flex-direction:column;
gap:3px;
padding:8px;
border:1px solid rgba(255,255,255,.11);
border-radius:14px;
background:rgba(13,13,13,.985);
box-shadow:0 18px 48px rgba(0,0,0,.65);
opacity:0;
visibility:hidden;
transform:translateX(-6px) scale(.985);
transform-origin:left bottom;
pointer-events:none;
transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
}
.rail-account:hover .rail-account-popover,
.rail-account:focus-within .rail-account-popover{
opacity:1;
visibility:visible;
transform:translateX(0) scale(1);
pointer-events:auto;
}
/* Unsichtbare Hover-Brücke über die 11px-Lücke zwischen Rail und Popup:
sonst kippt :hover beim Überfahren ab und das Popup klappt zu, bevor
man Account/Pricing/Einstellungen anklicken kann (nur im eingeklappten
Menü sichtbar, weil die Popover-Regeln oben in der Desktop-Media-Query
stehen). */
.rail-account-popover::before{
content:"";
position:absolute;
left:-12px;
top:0;
bottom:0;
width:12px;
}
.rail-account-name{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
padding:7px 10px 6px;
color:#858585;font-size:10px;
}
.rail-popover-action{
width:100%;min-height:40px;
display:flex;align-items:center;gap:10px;
padding:0 10px;
border:0;border-radius:9px;
background:transparent;color:#bdbdbd;
text-align:left;font-size:12px;
}
.rail-popover-action:hover,.rail-popover-action.active{background:#181818;color:#fff}
.rail-popover-action svg{width:17px;height:17px;flex:0 0 17px}
}
@media(max-width:720px){
.sidebar-rail,.app.sidebar-closed .sidebar-rail{display:none!important}
}
/* === RC15 Momo Work directly in chat === */
.work-message .bubble{max-width:min(820px,100%);width:100%;padding:0;background:transparent!important;border:0!important}
.work-message .message-body{max-width:min(860px,calc(100vw - 150px))}
.chat-work-card{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.018);overflow:hidden}
.chat-work-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 15px;background:rgba(255,255,255,.022)}
.chat-work-card>summary::-webkit-details-marker{display:none}
.chat-work-title{display:flex;align-items:center;gap:11px;min-width:0}
.chat-work-title>div{display:grid;gap:3px;min-width:0}
.chat-work-title strong{font-size:12px;font-weight:600;color:#e7e7e7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-work-title span{font-size:9px;color:#666}
.chat-work-pulse{width:8px;height:8px;border-radius:50%;background:#666;flex:0 0 auto}
.chat-work-pulse.running,.chat-work-pulse.queued{background:#e8e8e8;box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.chat-work-pulse.waiting_approval{background:#aaa;box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.chat-work-pulse.completed{background:#9d9d9d}.chat-work-pulse.failed{background:#777}.chat-work-pulse.cancelled{background:#555}
.chat-work-body{border-top:1px solid rgba(255,255,255,.06);padding:12px}
.chat-work-goal{font-size:11px;line-height:1.6;color:#a7a7a7;white-space:pre-wrap;margin:0 1px 10px}
.chat-work-artifacts{display:grid;gap:6px;margin:10px 0}.chat-work-artifact{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;background:#0b0b0b;border:1px solid rgba(255,255,255,.06)}
.chat-work-artifact span{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#555}.chat-work-artifact strong{font-size:10px;font-weight:500;color:#aaa}
.chat-work-actions{margin-top:10px}.chat-work-missing{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#777;font-size:11px}
@media(max-width:720px){.work-message .message-body{max-width:100%}.chat-work-card{border-radius:13px}.chat-work-card>summary{padding:12px}.chat-work-body{padding:10px}}
.chat-work-diff{margin:12px 0;border:1px solid #252525;border-radius:12px;background:#0d0d0d;overflow:hidden}
.chat-work-diff summary{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;cursor:pointer}
.chat-work-diff summary span{color:#777;font-size:12px}
.chat-work-diff pre{margin:0;padding:14px;max-height:360px;overflow:auto;border-top:1px solid #222;background:#090909;color:#d6d6d6;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
.chat-work-applied{margin:12px 0;padding:10px 12px;border:1px solid #2d2d2d;border-radius:10px;color:#cfcfcf;background:#111}
/* === RC17 empty-chat layout: logo top, composer bottom, carpet behind === */
.chat-view{
position:relative;
isolation:isolate;
min-height:0;
}
.chat-view .chat-scroll{
position:relative;
z-index:3;
min-height:0;
padding-bottom:154px;
}
.chat-view .chat-inner{
min-height:100%;
}
.chat-view .hero{
min-height:0;
display:block;
padding:34px 0 190px;
}
.chat-view .hero-inner{
width:min(660px,100%);
margin:0 auto;
text-align:center;
}
.chat-view .atom-wrap{
width:172px;
height:172px;
margin:0 auto;
}
.chat-view .hero-brand-mark{
width:160px;
height:160px;
}
.chat-view .atom-large{
width:160px;
height:160px;
}
.chat-view .wordmark{
margin-top:-2px;
}
/* The network belongs to the lower background, never above the empty-chat logo. */
.momo-network-carpet{
top:auto!important;
bottom:0!important;
height:clamp(260px,40vh,430px)!important;
min-height:260px;
z-index:1;
opacity:.48;
background:transparent;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.72) 42%,#000 100%);
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.72) 42%,#000 100%);
}
.momo-network-carpet::after{
background:linear-gradient(to bottom,rgba(0,0,0,.86) 0%,rgba(0,0,0,.28) 26%,transparent 58%,rgba(0,0,0,.08) 100%);
}
/* Composer is always visible above the lower carpet. */
.chat-view .composer-shell{
position:absolute!important;
left:0!important;
right:0!important;
bottom:0!important;
z-index:12!important;
display:block!important;
visibility:visible!important;
opacity:1!important;
padding-top:46px;
background:linear-gradient(to top,rgba(0,0,0,.98) 0%,rgba(0,0,0,.72) 52%,transparent 100%);
}
.chat-view .composer{
position:relative;
z-index:13;
background:rgba(8,8,8,.92);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
box-shadow:0 18px 70px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.015);
}
.chat-view .composer-note{
position:relative;
z-index:13;
}
@media(min-width:721px){
.chat-view .hero{padding-top:30px}
.chat-view .composer{width:min(860px,calc(100% - 48px))}
}
@media(max-width:720px){
.chat-view .hero{padding:22px 0 164px}
.chat-view .atom-wrap{width:132px;height:132px}
.chat-view .hero-brand-mark,.chat-view .atom-large{width:124px;height:124px}
.momo-network-carpet{height:clamp(220px,34vh,330px)!important;min-height:220px}
.chat-view .chat-scroll{padding-bottom:128px}
.chat-view .composer-shell{padding-top:34px}
}
/* === RC18 header task progress panel === */
.task-panel-btn{
position:relative;
height:34px;
display:inline-flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid rgba(255,255,255,.075);
border-radius:10px;
background:#050505;
color:#8b8b8b;
font:500 10px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.task-panel-btn:hover,.task-panel-btn[aria-expanded="true"]{color:#efefef;background:#0b0b0b;border-color:rgba(255,255,255,.14)}
.task-panel-btn.has-active{color:#cfcfcf}
.task-panel-btn svg{width:16px;height:16px;stroke-linecap:round;stroke-linejoin:round}
.task-panel-badge{min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:#e8e8e8;color:#050505;font-size:8px;font-weight:750}
.task-panel-backdrop{position:fixed;inset:calc(var(--topbar-height) + var(--safe-top)) 0 0 0;z-index:58;background:rgba(0,0,0,.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
.task-panel-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
.task-panel{
position:fixed;
z-index:59;
top:calc(var(--topbar-height) + var(--safe-top));
right:0;
bottom:0;
width:min(390px,calc(100vw - 72px));
display:flex;
flex-direction:column;
border-left:1px solid rgba(255,255,255,.08);
background:rgba(5,5,5,.985);
box-shadow:-28px 0 70px rgba(0,0,0,.5);
backdrop-filter:blur(24px);
transform:translateX(102%);
visibility:hidden;
pointer-events:none;
transition:transform .2s cubic-bezier(.2,.72,.25,1),visibility .2s ease;
}
.task-panel.open{transform:translateX(0);visibility:visible;pointer-events:auto}
.task-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.065)}
.task-panel-head h2{margin:4px 0 4px;color:#ededed;font-size:18px;font-weight:560;letter-spacing:-.025em}
.task-panel-head p{margin:0;color:#646464;font-size:10px}
.task-panel-eyebrow{display:block;color:#505050;font-size:7px;font-weight:650;letter-spacing:.18em}
.task-panel-close{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;font-size:18px}
.task-panel-content{flex:1;min-height:0;overflow:auto;padding:14px 12px calc(20px + var(--safe-bottom));overscroll-behavior:contain}
.task-panel-section{display:grid;gap:8px;margin-bottom:18px}
.task-panel-section>h3{margin:2px 6px 4px;color:#555;font-size:8px;font-weight:650;letter-spacing:.13em;text-transform:uppercase}
.task-panel-empty{padding:34px 18px;color:#575757;text-align:center;font-size:10px;line-height:1.6}
.task-panel-task{border:1px solid rgba(255,255,255,.07);border-radius:13px;background:#080808;overflow:hidden}
.task-panel-task>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:12px}
.task-panel-task>summary::-webkit-details-marker{display:none}
.task-panel-task-title{min-width:0;display:flex;align-items:center;gap:9px;flex:1}
.task-panel-task-title>div{min-width:0;display:grid;gap:3px}
.task-panel-task-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d6d6d6;font-size:10px;font-weight:560}
.task-panel-task-title span{color:#595959;font-size:8px}
.task-panel-task-state{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#555}
.task-panel-task-state.running,.task-panel-task-state.queued{background:#e6e6e6;box-shadow:0 0 0 4px rgba(255,255,255,.055)}
.task-panel-task-state.waiting_approval{background:#aaa}.task-panel-task-state.completed{background:#777}.task-panel-task-state.failed{background:#6a6a6a}
.task-panel-progress{position:relative;width:42px;height:3px;overflow:hidden;flex:0 0 42px;border-radius:999px;background:#1c1c1c}
.task-panel-progress i{position:absolute;inset:0 auto 0 0;width:var(--task-progress);border-radius:inherit;background:#a9a9a9;transition:width .22s ease}
.task-panel-steps{list-style:none;margin:0;padding:1px 12px 12px;display:grid;gap:2px}
.task-panel-step{min-height:36px;display:flex;align-items:flex-start;gap:9px;padding:7px 6px;border-radius:9px;color:#858585}
.task-panel-step.current{background:#0d0d0d;color:#bdbdbd}
.task-panel-check{width:17px;height:17px;flex:0 0 17px;display:grid;place-items:center;margin-top:1px;border:1px solid #323232;border-radius:50%;color:#8d8d8d;font-size:9px}
.task-panel-step.done .task-panel-check{border-color:#777;background:#151515;color:#e5e5e5}
.task-panel-step.done .task-panel-check svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.task-panel-step.current .task-panel-check{border-color:#8b8b8b;box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.task-panel-step.current .task-panel-check:after{content:"";width:5px;height:5px;border-radius:50%;background:#dedede;animation:taskPanelPulse 1.25s ease-in-out infinite}
.task-panel-step.blocked .task-panel-check{border-color:#555;color:#aaa}
.task-panel-step>div{min-width:0;display:grid;gap:2px}
.task-panel-step strong{color:inherit;font-size:9.5px;font-weight:520;line-height:1.45}
.task-panel-step span{color:#505050;font-size:7.5px;line-height:1.4}
.task-panel-note{margin:0 12px 12px;padding:8px 9px;border-radius:8px;background:#0d0d0d;color:#777;font-size:8px}
.task-panel-recent{opacity:.88}
@keyframes taskPanelPulse{0%,100%{opacity:.42;transform:scale(.72)}50%{opacity:1;transform:scale(1)}}
@media(max-width:900px){.task-panel-btn-label{display:none}.task-panel-btn{width:38px;padding:0;justify-content:center}.task-panel-badge{position:absolute;right:-4px;top:-4px;border:2px solid #000}}
@media(max-width:720px){
.task-panel{top:calc(var(--topbar-height) + var(--safe-top));width:min(92vw,390px)}
.task-panel-backdrop{background:rgba(0,0,0,.42)}
.task-panel-head{padding:17px 14px 14px}
.task-panel-content{padding-left:9px;padding-right:9px}
}
@media(prefers-reduced-motion:reduce){.task-panel,.task-panel-backdrop,.task-panel-progress i{transition:none}.task-panel-step.current .task-panel-check:after{animation:none}}
/* RC19 Product Ready -> GO preflight */
.go-preflight-card .production-checks{margin-top:10px}
.go-manual-signoff{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:7px}
.go-manual-row{display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:start;padding:8px 9px;border:1px solid rgba(255,255,255,.055);border-radius:10px;background:#030303;cursor:pointer}
.go-manual-row input{margin:2px 0 0;accent-color:#fff}
.go-manual-row span{display:flex;min-width:0;flex-direction:column;gap:2px}
.go-manual-row strong{color:#898989;font-size:9px;font-weight:550}
.go-manual-row small{color:#4d4d4d;font-size:8px;line-height:1.45}
.go-manual-row:has(input:checked){border-color:rgba(255,255,255,.13)}
.go-manual-row:has(input:checked) strong{color:#cfcfcf}
@media(max-width:520px){.go-manual-row{grid-template-columns:18px 1fr}}
/* === RC20 deterministic chat viewport: logo top, composer bottom, network behind composer === */
#view-chat.chat-view:not(.hidden){
position:relative!important;
display:block!important;
width:100%!important;
height:100%!important;
min-height:0!important;
overflow:hidden!important;
isolation:isolate;
background:#000;
}
/* RC30 P0: hidden must beat the deterministic chat display override. */
#view-chat.chat-view.hidden{display:none!important}
#view-chat .chat-scroll{
position:absolute!important;
inset:0!important;
z-index:4!important;
width:100%!important;
height:100%!important;
min-height:0!important;
overflow-y:auto!important;
overflow-x:hidden!important;
padding:0 22px 176px!important;
overscroll-behavior:contain;
}
#view-chat .chat-inner{
width:min(880px,100%)!important;
min-height:100%!important;
margin:0 auto!important;
}
#view-chat .hero{
position:relative!important;
min-height:0!important;
display:block!important;
padding:24px 0 34px!important;
margin:0!important;
}
#view-chat .hero-inner{
width:min(660px,100%)!important;
margin:0 auto!important;
text-align:center!important;
transform:none!important;
}
#view-chat .atom-wrap{
width:136px!important;
height:136px!important;
margin:0 auto!important;
}
#view-chat .hero-brand-mark,
#view-chat .atom-large{
width:128px!important;
height:128px!important;
}
#view-chat .wordmark{margin-top:-4px!important}
#view-chat .hero-subtitle{margin-top:10px!important}
#view-chat .hero-state{margin-top:13px!important}
#view-chat .hero-value{margin-top:10px!important}
/* The carpet is a child of the chat viewport and occupies only the lower background. */
#view-chat>.momo-network-carpet{
position:absolute!important;
left:0!important;
right:0!important;
top:auto!important;
bottom:0!important;
width:100%!important;
height:clamp(230px,36vh,380px)!important;
min-height:230px!important;
z-index:1!important;
opacity:.46!important;
overflow:hidden!important;
pointer-events:none!important;
background:transparent!important;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 10%,rgba(0,0,0,.62) 38%,#000 100%)!important;
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 10%,rgba(0,0,0,.62) 38%,#000 100%)!important;
}
#view-chat>.momo-network-carpet::after{
background:linear-gradient(to bottom,rgba(0,0,0,.92) 0%,rgba(0,0,0,.28) 30%,transparent 62%,rgba(0,0,0,.04) 100%)!important;
}
/* Composer is pinned to the visible chat viewport, always above the carpet. */
#view-chat>.composer-shell{
position:absolute!important;
left:0!important;
right:0!important;
top:auto!important;
bottom:0!important;
z-index:20!important;
display:block!important;
visibility:visible!important;
opacity:1!important;
pointer-events:none!important;
padding:34px 22px calc(18px + env(safe-area-inset-bottom))!important;
background:linear-gradient(to top,rgba(0,0,0,.42) 0%,rgba(0,0,0,.12) 54%,transparent 100%)!important;
}
#view-chat>.composer-shell .composer{
position:relative!important;
z-index:21!important;
width:min(900px,calc(100% - 28px))!important;
margin:0 auto!important;
background:rgba(7,7,7,.88)!important;
border-color:rgba(255,255,255,.19)!important;
box-shadow:0 18px 70px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.02)!important;
backdrop-filter:blur(18px)!important;
-webkit-backdrop-filter:blur(18px)!important;
pointer-events:auto!important;
}
#view-chat>.composer-shell .composer-note{
position:relative!important;
z-index:21!important;
pointer-events:auto!important;
}
#view-chat .scroll-bottom-btn{z-index:22!important}
@media(max-width:720px){
#view-chat .chat-scroll{padding:0 12px 148px!important}
#view-chat .hero{padding:18px 0 28px!important}
#view-chat .atom-wrap{width:112px!important;height:112px!important}
#view-chat .hero-brand-mark,#view-chat .atom-large{width:106px!important;height:106px!important}
#view-chat>.momo-network-carpet{height:clamp(205px,31vh,290px)!important;min-height:205px!important;opacity:.40!important}
#view-chat>.composer-shell{padding:26px 10px calc(10px + env(safe-area-inset-bottom))!important}
#view-chat>.composer-shell .composer{width:100%!important}
}
/* === RC25 plan badge alignment === */
.task-plan-badge{
margin-left:1px;
min-width:0;
padding:3px 7px;
line-height:1.15;
flex:0 0 auto;
}
.task-panel-btn .task-plan-badge{color:#777;background:#111}
@media(max-width:900px){
.task-panel-btn .task-plan-badge{display:inline-flex;align-items:center;justify-content:center}
}
/* === RC27 P0 navigation + composer privacy disclosure === */
.composer-privacy-note{
position:relative;
z-index:21;
width:min(900px,calc(100% - 28px));
margin:0 auto 7px;
text-align:center;
color:#565656;
font-size:9px;
line-height:1.35;
letter-spacing:.01em;
pointer-events:none;
}
@media(max-width:720px){
.composer-privacy-note{width:100%;padding:0 8px;font-size:8px;margin-bottom:6px}
}
.keyboard-open .composer-privacy-note{display:none}
/* === RC33 GPT-like sidebar controls + zero-key browser voice === */
.sidebar-top-row{
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.sidebar-brand-identity{
min-width:0;
display:flex;
align-items:center;
gap:9px;
}
.sidebar-brand-identity>.brand-mark{
width:34px;
height:34px;
flex:0 0 34px;
}
.sidebar-top-actions{
display:flex;
align-items:center;
gap:4px;
flex:0 0 auto;
}
.sidebar-top-icon{
width:38px;
height:38px;
display:grid;
place-items:center;
padding:0;
border:0;
border-radius:10px;
background:transparent;
color:#969696;
}
.sidebar-top-icon:hover{background:#0b0b0b;color:#efefef}
.sidebar-top-icon svg{width:22px;height:22px;stroke-linecap:round;stroke-linejoin:round}
.sidebar-search-legacy{display:none!important}
.sidebar-panel-icon{stroke-linecap:round;stroke-linejoin:round}
.hamburger-btn .sidebar-panel-icon{width:20px;height:20px}
/* RC33 removes the duplicate Momo logo from the main header intentionally. */
.topbar-brand-mark{display:none!important}
.app.menu-closed .topbar-brand-mark{display:none!important}
.composer-voice-actions{
display:flex;
align-items:center;
gap:7px;
margin-left:auto;
}
.voice-dictation-btn,.voice-live-btn{position:relative}
.voice-dictation-btn,.voice-live-btn{color:#d7ceff;border-color:rgba(133,111,255,.42);background:linear-gradient(135deg,rgba(62,102,229,.3),rgba(169,113,244,.28),rgba(88,49,193,.34));background-size:220% 220%;animation:momoGradientFlow 3.6s linear infinite;box-shadow:0 0 15px rgba(105,86,238,.18)}
.voice-dictation-btn svg,.voice-live-btn svg{width:18px;height:18px;stroke-linecap:round;stroke-linejoin:round}
.voice-dictation-btn.listening{
color:#fff;
border-color:rgba(255,255,255,.35);
box-shadow:0 0 0 4px rgba(255,255,255,.045),0 0 18px rgba(255,255,255,.10);
}
.voice-dictation-btn.listening::after{
content:"";
position:absolute;
inset:-5px;
border:1px solid rgba(255,255,255,.18);
border-radius:50%;
animation:momoVoiceMicPulse 1.4s ease-out infinite;
}
.voice-live-btn{color:#b6b6b6}
.voice-live-btn:hover{color:#fff}
@keyframes momoVoiceMicPulse{0%{transform:scale(.82);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.voice-mode-backdrop{
position:fixed;
inset:0;
z-index:520;
display:grid;
place-items:center;
padding:22px;
background:rgba(0,0,0,.76);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .18s ease,visibility .18s ease;
}
.voice-mode-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
.voice-mode-window{
width:min(520px,100%);
min-height:610px;
display:flex;
flex-direction:column;
align-items:stretch;
padding:18px 18px 16px;
border:1px solid rgba(255,255,255,.10);
border-radius:30px;
background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.035),transparent 34%),#050505;
box-shadow:0 30px 120px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.035);
}
.voice-mode-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.voice-mode-head>div{display:grid;gap:5px;padding:5px 4px}
.voice-mode-head strong{font-size:13px;font-weight:620;letter-spacing:.12em}
.voice-mode-head span{font-size:8px;color:#525252;letter-spacing:.12em;text-transform:uppercase}
.voice-close-btn{flex:0 0 35px;font-size:18px}
.voice-stage{
--voice-energy:.18;
--voice-flow:.33;
position:relative;
width:250px;
height:250px;
margin:64px auto 24px;
display:grid;
place-items:center;
isolation:isolate;
}
.voice-orbit{
position:absolute;
border:1px solid rgba(255,255,255,.10);
border-radius:50%;
box-shadow:0 0 30px rgba(255,255,255,.015);
transition:transform .12s ease,border-color .2s ease,opacity .2s ease;
}
.voice-orbit-a{inset:13px;animation:momoVoiceOrbitA 11s linear infinite}
.voice-orbit-b{inset:38px;border-style:dashed;animation:momoVoiceOrbitB 8s linear infinite reverse}
.voice-orbit-c{inset:66px;animation:momoVoiceOrbitA 6s linear infinite}
.voice-core{
position:relative;
width:74px;
height:74px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.28);
border-radius:50%;
background:radial-gradient(circle,#fff 0 7%,rgba(218,207,255,.95) 8%,rgba(139,112,255,.65) 20%,rgba(54,87,218,.28) 43%,rgba(24,12,69,.96) 78%);
background-size:180% 180%;background-position:calc(20% + 60% * var(--voice-flow)) 50%;transition:transform .11s ease,box-shadow .11s ease,background-position .16s ease;
box-shadow:0 0 calc(24px + 42px * var(--voice-energy)) rgba(124,106,255,.48),0 0 80px rgba(83,106,255,.18);
transform:scale(calc(.94 + .13 * var(--voice-energy)));
transition:transform .11s ease,box-shadow .11s ease;
z-index:3;
}
.voice-core span{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 16px #fff,0 0 28px #9c8cff}
.voice-bars{
position:absolute;
left:50%;
bottom:31px;
transform:translateX(-50%);
height:26px;
display:flex;
align-items:center;
gap:4px;
z-index:4;
opacity:.25;
}
.voice-bars i{display:block;width:2px;height:7px;border-radius:2px;background:#fff;transform-origin:center}
.voice-stage[data-state="listening"] .voice-orbit{border-color:rgba(255,255,255,.17)}
.voice-stage[data-state="listening"] .voice-bars{opacity:.55}
.voice-stage[data-state="listening"] .voice-bars i{animation:momoVoiceBars 1s ease-in-out infinite}
.voice-stage[data-state="listening"] .voice-bars i:nth-child(2){animation-delay:.12s}
.voice-stage[data-state="listening"] .voice-bars i:nth-child(3){animation-delay:.24s}
.voice-stage[data-state="listening"] .voice-bars i:nth-child(4){animation-delay:.36s}
.voice-stage[data-state="listening"] .voice-bars i:nth-child(5){animation-delay:.48s}
.voice-stage[data-state="thinking"] .voice-core{animation:momoVoiceThink 1.5s ease-in-out infinite}
.voice-stage[data-state="speaking"] .voice-orbit-a{animation-duration:3.4s}
.voice-stage[data-state="speaking"] .voice-orbit-b{animation-duration:2.7s}
.voice-stage[data-state="speaking"] .voice-orbit-c{animation-duration:2s}
.voice-stage[data-state="speaking"] .voice-bars{opacity:.9}
.voice-stage[data-state="speaking"] .voice-bars i{animation:momoVoiceBars .62s ease-in-out infinite}
.voice-stage[data-state="speaking"] .voice-bars i:nth-child(2){animation-delay:.08s}
.voice-stage[data-state="speaking"] .voice-bars i:nth-child(3){animation-delay:.16s}
.voice-stage[data-state="speaking"] .voice-bars i:nth-child(4){animation-delay:.24s}
.voice-stage[data-state="speaking"] .voice-bars i:nth-child(5){animation-delay:.32s}
@keyframes momoVoiceOrbitA{to{transform:rotate(360deg)}}
@keyframes momoVoiceOrbitB{to{transform:rotate(360deg) scale(1.02)}}
@keyframes momoVoiceBars{0%,100%{height:5px;opacity:.35}50%{height:24px;opacity:1}}
@keyframes momoVoiceThink{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.06);opacity:1}}
.voice-state-label{text-align:center;color:#d4d4d4;font-size:12px;font-weight:560;letter-spacing:.06em}
.voice-transcript{
min-height:64px;
max-height:112px;
overflow:auto;
margin:12px auto 0;
width:min(420px,100%);
text-align:center;
color:#777;
font-size:12px;
line-height:1.55;
}
.voice-controls{display:flex;justify-content:center;gap:10px;margin-top:auto;padding-top:22px}
.voice-control{
min-height:44px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:0 15px;
border:1px solid rgba(255,255,255,.10);
border-radius:999px;
background:#0a0a0a;
color:#b6b6b6;
}
.voice-control:hover{border-color:rgba(255,255,255,.20);color:#fff}
.voice-control svg{width:17px;height:17px}
.voice-control[aria-pressed="true"]{color:#fff;border-color:rgba(255,255,255,.28);background:#111}
.voice-control-end{min-width:96px;background:#121212;color:#e2e2e2}
.voice-privacy{margin:15px auto 0;max-width:440px;text-align:center;color:#424242;font-size:8px;line-height:1.45}
@media(max-width:720px){
.sidebar-brand-identity>.brand-mark{width:30px;height:30px;flex-basis:30px}
.sidebar-top-icon{width:42px;height:42px}
.voice-mode-backdrop{padding:0;align-items:stretch}
.voice-mode-window{width:100%;min-height:100dvh;border-radius:0;border-left:0;border-right:0;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))}
.voice-stage{width:220px;height:220px;margin-top:54px}
.composer-voice-actions{gap:5px}
.voice-dictation-btn,.voice-live-btn{width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){
.voice-orbit,.voice-bars i,.voice-stage[data-state="thinking"] .voice-core,.voice-dictation-btn.listening::after{animation:none!important}
}
/* RC34 Admin Analytics */
.admin-settings-entry{border-color:rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.admin-open-btn{margin-top:12px}
.admin-page{width:min(1400px,100%);margin:0 auto;padding:4px 0 36px;display:grid;gap:16px}
.admin-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:8px 2px 4px}
.admin-topbar h2{font-size:28px;letter-spacing:-.03em;margin:6px 0 6px}.admin-topbar p{margin:0;color:#8b8b8b;max-width:760px;line-height:1.5}
.admin-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.admin-actions select{min-width:128px;background:#080808;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;color:var(--text)}
.admin-live-strip{display:grid;grid-template-columns:repeat(8,minmax(115px,1fr));gap:10px}.admin-business-strip{grid-template-columns:repeat(10,minmax(110px,1fr))}
.admin-kpi{min-width:0;border:1px solid var(--line);border-radius:14px;background:#050505;padding:14px 14px 13px;display:flex;flex-direction:column;gap:4px;min-height:92px}.admin-kpi span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#747474}.admin-kpi strong{font-size:23px;line-height:1.1;font-weight:650;letter-spacing:-.03em;color:#f5f5f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-kpi small{font-size:11px;color:#727272;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-panel{border:1px solid var(--line);border-radius:16px;background:#030303;padding:16px;min-width:0}.admin-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.admin-panel-head h3,.admin-section-title h3{margin:0;font-size:14px;letter-spacing:.01em}.admin-section-title{padding:8px 2px 0}.admin-muted,.admin-generated{color:#6f6f6f;font-size:12px;line-height:1.5}.admin-generated{text-align:right;padding:4px 2px}.admin-live-dot{font-size:10px;letter-spacing:.12em;color:#d8d8d8;display:inline-flex;align-items:center;gap:6px}.admin-live-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.9)}
.admin-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.admin-bars{display:grid;gap:8px}.admin-bar-row{display:grid;grid-template-columns:minmax(90px,1.3fr) minmax(80px,3fr) auto;align-items:center;gap:10px;font-size:12px}.admin-bar-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aaa}.admin-bar-row>div{height:7px;background:#101010;border-radius:999px;overflow:hidden}.admin-bar-row i{display:block;height:100%;background:linear-gradient(90deg,#6c6c6c,#fff);border-radius:999px}.admin-bar-row strong{font-variant-numeric:tabular-nums;font-size:11px;color:#d7d7d7}.admin-empty{color:#666;font-size:12px;padding:8px 0}
.admin-table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.05);border-radius:12px}.admin-table{width:100%;border-collapse:collapse;font-size:11px;min-width:760px}.admin-table th,.admin-table td{text-align:left;padding:10px 11px;border-bottom:1px solid rgba(255,255,255,.055);white-space:nowrap}.admin-table th{position:sticky;top:0;background:#080808;color:#6f6f6f;font-weight:600;letter-spacing:.05em;text-transform:uppercase;z-index:1}.admin-table td{color:#bdbdbd}.admin-table tr:last-child td{border-bottom:0}.admin-status{display:inline-flex;padding:4px 7px;border:1px solid var(--line);border-radius:999px;font-size:10px}.admin-status.signed{color:#fff;background:#111}.admin-status.guest{color:#777}
.admin-code{margin:10px 0 0;background:#000;border:1px solid var(--line);border-radius:12px;padding:14px;overflow:auto;white-space:pre-wrap;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:#d0d0d0}.admin-privacy p{color:#818181;font-size:12px;line-height:1.6;margin:0}.admin-loading{min-height:380px;display:grid;place-items:center;align-content:center;gap:14px;color:#777}.admin-loading span{width:26px;height:26px;border:2px solid #222;border-top-color:#fff;border-radius:50%;animation:adminSpin .8s linear infinite}@keyframes adminSpin{to{transform:rotate(360deg)}}
@media(max-width:1200px){.admin-live-strip,.admin-business-strip{grid-template-columns:repeat(4,minmax(120px,1fr))}}
@media(max-width:820px){.admin-topbar{flex-direction:column}.admin-actions{justify-content:flex-start}.admin-grid-2{grid-template-columns:1fr}.admin-live-strip,.admin-business-strip{grid-template-columns:repeat(2,minmax(120px,1fr))}.admin-kpi strong{font-size:20px}}
@media(max-width:480px){.admin-live-strip,.admin-business-strip{grid-template-columns:1fr 1fr}.admin-page{gap:12px}.admin-panel{padding:12px}}
/* === RC35: when the sidebar is open, the duplicate right/main-header toggle is hidden. === */
.app.menu-open #mobileMenu{
display:none!important;
}
.pricing-local-note{grid-column:1/-1;margin:8px 2px 0;font-size:11px;line-height:1.45;color:#7f7f7f}
/* === RC40 Chat UX: GPT-like latest button + Momo thinking/working motion === */
#view-chat .chat-inner.has-chat-messages::after{
content:"";
display:block;
width:100%;
height:clamp(180px,26vh,300px);
pointer-events:none;
}
#view-chat .scroll-bottom-btn{
left:50%!important;
bottom:calc(142px + env(safe-area-inset-bottom))!important;
width:46px!important;
height:46px!important;
border:1px solid rgba(255,255,255,.16)!important;
background:rgba(18,18,18,.96)!important;
color:#f3f3f3!important;
box-shadow:0 10px 32px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,255,255,.025)!important;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
#view-chat .scroll-bottom-btn svg{width:25px;height:25px;stroke-linecap:round;stroke-linejoin:round}
#view-chat .scroll-bottom-btn:not(.show){visibility:hidden}
#view-chat .scroll-bottom-btn.show{visibility:visible}
#view-chat .scroll-bottom-btn:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:3px}
.momo-thinking-message{margin-top:2px}
.momo-thinking-badge{
position:relative;
min-width:76px;
height:46px;
padding:0 17px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
border:1px solid rgba(255,255,255,.14);
border-radius:999px;
background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.055),transparent 62%),rgba(15,15,15,.94);
box-shadow:0 8px 28px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.018),0 0 24px rgba(255,255,255,.025);
overflow:hidden;
}
.momo-thinking-badge::after{
content:"";
position:absolute;
inset:-35% -25%;
background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.055) 50%,transparent 65%);
transform:translateX(-55%);
animation:momoThinkSweep 2.3s ease-in-out infinite;
pointer-events:none;
}
.momo-thinking-badge i,
.momo-work-thinking i{
position:relative;
z-index:1;
display:block;
width:7px;
height:7px;
border-radius:50%;
background:#bcbcbc;
box-shadow:0 0 9px rgba(255,255,255,.12);
animation:momoThinkDot 1.14s ease-in-out infinite;
}
.momo-thinking-badge i:nth-child(2),.momo-work-thinking i:nth-child(2){animation-delay:.13s}
.momo-thinking-badge i:nth-child(3),.momo-work-thinking i:nth-child(3){animation-delay:.26s}
@keyframes momoThinkDot{
0%,70%,100%{opacity:.32;transform:translateY(0) scale(.9)}
34%{opacity:1;transform:translateY(-3px) scale(1.08)}
}
@keyframes momoThinkSweep{
0%,22%{transform:translateX(-58%);opacity:0}
48%{opacity:1}
78%,100%{transform:translateX(58%);opacity:0}
}
.momo-work-thinking{
display:inline-flex;
align-items:center;
gap:4px;
margin-left:8px;
padding:5px 8px;
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
background:#0c0c0c;
flex:0 0 auto;
}
.momo-work-thinking i{width:4px;height:4px;animation-duration:1.05s}
.task-panel-task-title .momo-work-thinking,.chat-work-title .momo-work-thinking{align-self:center}
@media(max-width:720px){
#view-chat .chat-inner.has-chat-messages::after{height:clamp(150px,28vh,260px)}
#view-chat .scroll-bottom-btn{bottom:calc(124px + env(safe-area-inset-bottom))!important;width:44px!important;height:44px!important}
#view-chat .scroll-bottom-btn svg{width:23px;height:23px}
.momo-thinking-badge{height:43px;min-width:70px;padding:0 15px}
}
@media(prefers-reduced-motion:reduce){
.momo-thinking-badge::after,.momo-thinking-badge i,.momo-work-thinking i{animation:none!important}
.momo-thinking-badge i,.momo-work-thinking i{opacity:.7!important;transform:none!important}
}
/* RC41 local voice install fallback */
.voice-install{width:min(440px,100%);margin:12px auto 0;text-align:center}
.voice-install[hidden],.voice-install-panel[hidden]{display:none!important}
.voice-install-btn,.voice-install-recheck{
min-height:38px;padding:0 15px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
background:#0b0b0b;color:#e8e8e8;font-size:11px;font-weight:600;letter-spacing:.01em
}
.voice-install-btn:hover,.voice-install-recheck:hover{border-color:rgba(255,255,255,.28);background:#101010}
.voice-install-panel{margin-top:10px;padding:13px 14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#080808;color:#8f8f8f;font-size:10px;line-height:1.5;text-align:left}
.voice-install-panel strong{display:block;color:#d8d8d8;font-size:11px;margin-bottom:5px}
.voice-install-panel p{margin:0 0 10px}
.voice-install-recheck{display:block;margin:0;min-height:34px;font-size:10px}
.voice-install-actions{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0 11px}
.voice-install-actions-bottom{margin:10px 0 0}
.voice-install-action{min-height:34px;padding:0 11px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:#101010;color:#ddd;font-size:10px;font-weight:600}
.voice-install-action:hover{border-color:rgba(255,255,255,.28);background:#141414}
.voice-picker{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.voice-picker>strong{font-size:10px}
.voice-picker>p{margin:4px 0 8px!important;color:#777}
.voice-choice-list{display:grid;gap:6px;max-height:220px;overflow:auto;padding-right:2px}
.voice-choice{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:#0c0c0c}
.voice-choice-meta{min-width:0;display:grid;gap:2px}
.voice-choice-meta strong{margin:0;font-size:10px;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-choice-meta span{font-size:9px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-choice-actions{display:flex;gap:5px;flex:0 0 auto}
.voice-choice-btn{min-height:30px;padding:0 8px;border:1px solid rgba(255,255,255,.11);border-radius:8px;background:#111;color:#aaa;font-size:9px}
.voice-choice-use{color:#eee;border-color:rgba(255,255,255,.18)}
@media(max-width:600px){.voice-choice{align-items:flex-start;flex-direction:column}.voice-choice-actions{width:100%}.voice-choice-btn{flex:1}.voice-install-actions>.voice-install-action{flex:1 1 150px}}
.attachment-chip small{margin-left:5px;color:#666;font-size:9px;text-transform:uppercase;letter-spacing:.06em}
/* RC43 P0 voice visibility + short-screen safety */
.voice-mode-window{max-height:calc(100dvh - 44px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:720px){.voice-mode-window{max-height:100dvh;overflow-y:auto}}
/* RC51 production signoff evidence console */
.rc51-evidence-list{display:grid;gap:8px;margin-top:12px}
.rc51-evidence-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(127,127,127,.16)}
.rc51-evidence-row:first-child{border-top:0}
.rc51-evidence-row strong{display:block}
.rc51-evidence-row small{display:block;opacity:.72;margin-top:2px;overflow-wrap:anywhere}
.rc51-dot{width:9px;height:9px;border-radius:999px;background:currentColor;opacity:.34;display:inline-block;flex:0 0 auto}
.rc51-dot.ok{opacity:1}
.rc51-row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rc51-row-actions .action-btn{padding:6px 9px;min-height:30px}
@media(max-width:720px){.rc51-evidence-row{grid-template-columns:auto minmax(0,1fr)}.rc51-row-actions{grid-column:2;justify-content:flex-start}.rc51-row-actions .action-btn{font-size:12px}}
/* === RC65 sidebar usability: collapsible Network, rail hover labels, scrollable Chats === */
#momoNetworkNav{
flex:0 0 auto;
min-width:0;
}
.momo-network-nav-toggle{
width:calc(100% - 20px);
min-height:25px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:0;
border:0;
background:transparent;
text-align:left;
cursor:pointer;
}
.momo-network-nav-toggle:hover,
.momo-network-nav-toggle:focus-visible{color:#8a8a8a}
.momo-network-nav-chevron{
flex:0 0 auto;
font-size:12px;
line-height:1;
color:#555;
transform:rotate(0deg);
transition:transform .16s ease,color .16s ease;
}
.momo-network-nav-toggle:hover .momo-network-nav-chevron,
.momo-network-nav-toggle:focus-visible .momo-network-nav-chevron{color:#a0a0a0}
/* EINHEITLICHES SCROLLEN IM MENUE (21.09.)
Vorher hatte das Menue drei getrennte Scrollbereiche: die Sidebar selbst, die
Network-Gruppe und die Chatliste. Wer die Maus an der falschen Stelle hatte,
scrollte das falsche Ding — und am Ende einer inneren Liste blieb das Scrollen
stehen, statt weiterzulaufen. Jetzt scrollt genau EIN Behaelter: .sidebar-scroll.
Darum haben Network-Gruppe und Chatliste hier KEINE eigene Hoehe und KEIN
eigenes overflow mehr. */
.momo-network-nav-items{
display:block;
}
#momoNetworkNav.is-collapsed .momo-network-nav-items{display:none}
#momoNetworkNav.is-collapsed .momo-network-nav-chevron{transform:rotate(180deg)}
/* Die Chatliste laeuft im Menue-Scroll mit, statt selbst zu scrollen.
Ohne Kind-Kombinator: die Liste steht nicht direkt in .sidebar, sondern in
.sidebar-scroll — mit `.sidebar>.session-list` traf diese Regel nichts. */
.sidebar .session-list{
flex:0 0 auto;
min-height:0;
max-height:none;
overflow:visible;
padding-right:0;
}
/* Closed desktop menu: show the actual button name beside each hovered/focused icon. */
@media(min-width:721px){
.app.sidebar-closed .sidebar-rail{overflow:visible}
.app.sidebar-closed #momoNetworkRail{overflow:visible}
/* Alle Menüpunkte bleiben im eingeklappten Rail sichtbar (23.10.) — Plugins
inklusive; die Beschriftung beim Darüberfahren kommt aus den ::after-Regeln
unten. */
/* Die Network-Symbole bekommen dieselbe Beschriftung wie Chat und Projekte.
Sie stehen in #momoNetworkRail, nicht in .rail-primary — darum waren sie hier
vorher nicht dabei und blieben beim Darueberfahren stumm. */
.app.sidebar-closed #railMenuToggle,
.app.sidebar-closed .rail-primary .rail-btn,
.app.sidebar-closed #momoNetworkRail .rail-btn,
.app.sidebar-closed #momoStoreRailBtn{position:relative}
.app.sidebar-closed #momoPluginsRailBtn{position:relative}
.app.sidebar-closed #railMenuToggle::after,
.app.sidebar-closed .rail-primary .rail-btn::after,
.app.sidebar-closed #momoNetworkRail .rail-btn::after,
.app.sidebar-closed #momoStoreRailBtn::after,
.app.sidebar-closed #momoPluginsRailBtn::after{
content:attr(aria-label);
position:absolute;
left:calc(100% + 10px);
top:50%;
z-index:1000;
max-width:240px;
padding:7px 10px;
border:1px solid rgba(255,255,255,.11);
border-radius:9px;
background:rgba(17,17,17,.98);
box-shadow:0 10px 30px rgba(0,0,0,.48);
color:#e7e7e7;
font-size:11px;
font-weight:500;
line-height:1.2;
letter-spacing:.01em;
white-space:nowrap;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translate(6px,-50%);
transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}
.app.sidebar-closed #railMenuToggle:hover::after,
.app.sidebar-closed #railMenuToggle:focus-visible::after,
.app.sidebar-closed .rail-primary .rail-btn:hover::after,
.app.sidebar-closed .rail-primary .rail-btn:focus-visible::after,
.app.sidebar-closed #momoNetworkRail .rail-btn:hover::after,
.app.sidebar-closed #momoNetworkRail .rail-btn:focus-visible::after,
.app.sidebar-closed #momoStoreRailBtn:hover::after,
.app.sidebar-closed #momoStoreRailBtn:focus-visible::after,
.app.sidebar-closed #momoPluginsRailBtn:hover::after,
.app.sidebar-closed #momoPluginsRailBtn:focus-visible::after{
opacity:1;
visibility:visible;
transform:translate(0,-50%);
}
/* Solange das Account-Popup offen ist, die doppelte Account-Beschriftung
darunter ausblenden — beide zeigen sonst übereinander. */
.app.sidebar-closed .rail-account:hover .rail-account-btn::after,
.app.sidebar-closed .rail-account:focus-within .rail-account-btn::after{
opacity:0;visibility:hidden;
}
}
@media(max-width:720px){
.momo-network-nav-toggle{min-height:30px}
}
/* === RC77: sand-glass / frosted composer surface === */
#view-chat>.composer-shell .composer{
position:relative!important;
isolation:isolate;
overflow:hidden;
background:
linear-gradient(180deg,rgba(26,26,28,.58),rgba(8,8,10,.72))!important;
border:1px solid rgba(255,255,255,.17)!important;
box-shadow:
0 18px 70px rgba(0,0,0,.74),
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(255,255,255,.025),
0 0 0 1px rgba(255,255,255,.018)!important;
backdrop-filter:blur(24px) saturate(.72)!important;
-webkit-backdrop-filter:blur(24px) saturate(.72)!important;
}
#view-chat>.composer-shell .composer::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
opacity:.48;
background:
radial-gradient(circle at 14% 18%,rgba(255,255,255,.055) 0 1px,transparent 1.8px),
radial-gradient(circle at 74% 34%,rgba(255,255,255,.035) 0 1px,transparent 1.6px),
radial-gradient(circle at 42% 76%,rgba(255,255,255,.025) 0 1px,transparent 1.7px),
linear-gradient(112deg,rgba(255,255,255,.026),transparent 34%,rgba(255,255,255,.016) 58%,transparent 82%);
background-size:17px 19px,23px 21px,29px 27px,100% 100%;
mix-blend-mode:screen;
}
#view-chat>.composer-shell .composer::after{
content:"";
position:absolute;
inset:1px;
z-index:-1;
pointer-events:none;
border-radius:20px;
background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0) 38%);
}
#view-chat>.composer-shell .composer:focus-within{
border-color:rgba(255,255,255,.28)!important;
box-shadow:
0 20px 78px rgba(0,0,0,.78),
inset 0 1px 0 rgba(255,255,255,.11),
0 0 0 1px rgba(255,255,255,.03)!important;
}
#view-chat>.composer-shell .composer textarea{
position:relative;
z-index:2;
color:#f0f0f2;
text-shadow:0 1px 1px rgba(0,0,0,.38);
}
#view-chat>.composer-shell .composer textarea::placeholder{
color:rgba(220,220,224,.38);
}
#view-chat>.composer-shell .composer .composer-row,
#view-chat>.composer-shell .composer .attachment-preview{
position:relative;
z-index:2;
}
@media (prefers-reduced-transparency: reduce){
#view-chat>.composer-shell .composer{
background:#0b0b0d!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
#view-chat>.composer-shell .composer::before{opacity:.18}
}
/* === Momo Apps / personal Coding Work apps === */
.apps-view,.momo-apps-content{min-height:0;height:100%}
.momo-apps-shell{height:100%;min-height:0;display:grid;grid-template-columns:310px minmax(0,1fr);background:#030303}
.momo-apps-sidebar{min-height:0;display:flex;flex-direction:column;padding:18px;border-right:1px solid rgba(255,255,255,.07);background:#050505}
.momo-apps-sidebar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.momo-apps-sidebar h2{margin:4px 0 0;font-size:25px;font-weight:560;letter-spacing:-.03em}
.momo-apps-sidebar>p{margin:9px 0 16px;color:#777;font-size:12px;line-height:1.55}
.momo-app-list{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:7px;padding-right:3px}
.momo-app-card{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;text-align:left;padding:11px;border:1px solid transparent;border-radius:13px;background:#080808;color:#eee;cursor:pointer}
.momo-app-card:hover{background:#0c0c0c;border-color:rgba(255,255,255,.07)}
.momo-app-card.selected{background:#111;border-color:rgba(255,255,255,.12)}
.momo-app-card.is-active{box-shadow:inset 2px 0 0 rgba(255,255,255,.65)}
.momo-app-card-icon{width:36px;height:36px;border:1px solid rgba(255,255,255,.13);border-radius:10px;display:grid;grid-template-columns:repeat(2,6px);grid-template-rows:repeat(2,6px);align-content:center;justify-content:center;gap:4px;background:#0b0b0b}
.momo-app-card-icon span{width:6px;height:6px;border-radius:2px;background:#d7d7d7;opacity:.85}
.momo-app-card-copy{min-width:0;display:flex;flex-direction:column}
.momo-app-card-copy strong{font-size:13px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.momo-app-card-copy small{margin-top:2px;color:#777;font-size:10px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.momo-app-card-copy em{margin-top:6px;color:#9d9d9d;font-size:8px;font-style:normal;letter-spacing:.08em}
.momo-apps-main{min-width:0;min-height:0;overflow:hidden}
.momo-app-detail{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.momo-app-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px 15px;border-bottom:1px solid rgba(255,255,255,.07)}
.momo-app-detail-head h2{margin:5px 0 3px;font-size:25px;font-weight:560;letter-spacing:-.03em}
.momo-app-detail-head p{max-width:700px;margin:0;color:#818181;font-size:12px;line-height:1.55}
.momo-app-detail-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.momo-app-tabs-row{height:44px;display:flex;align-items:end;gap:4px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.07);background:#050505}
.momo-app-tab{height:36px;padding:0 13px;border:0;border-bottom:1px solid transparent;background:transparent;color:#666;font-size:11px;cursor:pointer}
.momo-app-tab:hover,.momo-app-tab.active{color:#ddd}.momo-app-tab.active{border-bottom-color:#ddd}
.momo-app-pane{min-height:0;height:100%;overflow:auto;padding:16px 18px 18px}
.momo-app-pane[data-app-pane-content="run"]{padding:12px;background:#060606}
#momoAppPreviewFrame{width:100%;height:100%;min-height:460px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#080808}
.momo-app-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.4fr);gap:13px;max-width:920px}
.momo-app-form-grid label{display:flex;flex-direction:column;gap:7px;color:#8a8a8a;font-size:10px;letter-spacing:.05em}
.momo-app-form-grid label.wide{grid-column:1/-1}.momo-app-form-grid input,.momo-app-form-grid select,.momo-app-form-grid textarea,.momo-app-reflection-compose textarea{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#090909;color:#e8e8e8;outline:none;padding:11px 12px;font:12px/1.55 system-ui,sans-serif}
.momo-app-form-grid textarea{min-height:108px;resize:vertical}.momo-app-form-grid input:focus,.momo-app-form-grid select:focus,.momo-app-form-grid textarea:focus,.momo-app-reflection-compose textarea:focus{border-color:rgba(255,255,255,.28)}
.momo-app-form-grid .momo-app-check{justify-content:center;display:flex;flex-direction:row;align-items:center;gap:8px;letter-spacing:0}.momo-app-form-grid .momo-app-check input{width:auto}
.momo-app-settings-actions{display:flex;gap:8px;margin-top:16px}
.momo-app-reflection-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end;margin-bottom:15px}.momo-app-reflection-compose textarea{min-height:88px;resize:vertical}
.momo-app-reflection-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}
.momo-app-reflection-grid>div{min-width:0;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:#060606;overflow:hidden}
.momo-app-reflection-list,.momo-app-proposal-list{max-height:520px;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.momo-app-reflection-list article,.momo-app-proposal-list article{padding:11px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#0a0a0a}
.momo-app-reflection-list article>span{font-size:8px;color:#a5a5a5;letter-spacing:.12em}.momo-app-reflection-list p,.momo-app-proposal-list p{margin:6px 0;color:#b7b7b7;font-size:11px;line-height:1.55;white-space:pre-wrap}.momo-app-reflection-list time{font-size:8px;color:#555}.momo-app-proposal-list strong{font-size:12px;font-weight:620}.momo-app-proposal-list article>div{display:flex;gap:6px;margin-top:8px}
.momo-apps-empty,.apps-lock{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px}.momo-apps-empty h2,.apps-lock h2{margin:7px 0 5px;font-size:28px;font-weight:560}.momo-apps-empty p,.apps-lock p{max-width:560px;margin:0 0 18px;color:#818181;font-size:13px;line-height:1.6}
@media(max-width:980px){.momo-apps-shell{grid-template-columns:250px minmax(0,1fr)}.momo-app-reflection-grid{grid-template-columns:1fr}}
@media(max-width:720px){.apps-view,.momo-apps-content{height:auto;min-height:100%}.momo-apps-shell{height:auto;min-height:100%;grid-template-columns:1fr}.momo-apps-sidebar{border-right:0;border-bottom:1px solid rgba(255,255,255,.07);max-height:320px}.momo-apps-main{min-height:70vh}.momo-app-detail{height:auto;min-height:70vh}.momo-app-detail-head{flex-direction:column}.momo-app-detail-actions{justify-content:flex-start}.momo-app-pane{min-height:520px}.momo-app-form-grid{grid-template-columns:1fr}.momo-app-form-grid label.wide{grid-column:auto}.momo-app-reflection-compose{grid-template-columns:1fr}#momoAppPreviewFrame{min-height:520px}}
/* Unified commerce buttons: Suggests+ and Customer API */
.momo-commerce-btn,.momo-api-actions .action-btn,.momo-suggests-plus-actions .action-btn{min-width:220px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;box-sizing:border-box;white-space:nowrap}
@media(max-width:520px){.momo-commerce-btn,.momo-api-actions .action-btn,.momo-suggests-plus-actions .action-btn{width:100%;min-width:0}}
.hero-benchmark{margin:11px auto 0;max-width:560px;padding:10px 13px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:#050505;text-align:center}
.hero-benchmark span{display:block;color:#454545;font-size:7px;letter-spacing:.13em;text-transform:uppercase}
.hero-benchmark strong{display:block;margin-top:5px;color:#9a9a9a;font-size:9px;font-weight:500;letter-spacing:.04em}
.hero-benchmark small{display:block;margin-top:4px;color:#4b4b4b;font-size:7px;line-height:1.45}
/* ---------------------------------------------------------------- Sprechen im Chat
Bisher öffnete «Mit Momo sprechen» eine eigene Seite über dem Chat. Jetzt bleibt man
im Gespräch: Momos Zeichen erscheint über der Eingabe und bewegt sich mit der Stimme,
tippen geht weiter. --voice-energy kommt aus dem Mikrofon-Pegel (voice.js). */
.voice-inline{
--voice-energy:.18;
display:none;
flex-direction:column;
align-items:center;
gap:10px;
padding:6px 0 18px;
}
body.voice-inline-on .voice-inline{display:flex}
body.voice-inline-on .composer-privacy-note{display:none}
.voice-inline-orb{
position:relative;
width:92px;
height:92px;
display:grid;
place-items:center;
border-radius:50%;
background:radial-gradient(circle at 50% 38%,rgba(214,214,255,.98),rgba(150,150,225,.72) 58%,rgba(96,96,170,.42));
box-shadow:0 0 calc(16px + 40px * var(--voice-energy)) rgba(140,124,255,.42),
inset 0 -8px 22px rgba(60,58,120,.34);
transform:scale(calc(.93 + .12 * var(--voice-energy)));
transition:transform .11s ease-out,box-shadow .16s ease-out,opacity .2s ease;
}
/* Ein ruhiger Ring, der mit der Lautstärke aufgeht - kein Zappeln, nur Atmen. */
.voice-inline-orb::after{
content:"";
position:absolute;
inset:-14px;
border-radius:50%;
border:1px solid rgba(170,160,255,calc(.10 + .38 * var(--voice-energy)));
transform:scale(calc(1 + .10 * var(--voice-energy)));
transition:transform .14s ease-out,border-color .2s ease;
pointer-events:none;
}
.voice-inline-mark,.voice-inline-logo img{
width:56px;
height:56px;
display:block;
opacity:.92;
filter:drop-shadow(0 0 6px rgba(40,40,80,.45));
}
.voice-inline-label{
font-size:12.5px;
letter-spacing:.06em;
color:var(--muted,#9a9aa6);
text-align:center;
min-height:16px;
}
.voice-inline-orb[data-state="listening"]{box-shadow:0 0 calc(20px + 54px * var(--voice-energy)) rgba(120,170,255,.48),inset 0 -8px 22px rgba(50,64,120,.34)}
.voice-inline-orb[data-state="thinking"]{opacity:.72;animation:momoVoiceInlineDenken 1.5s ease-in-out infinite}
.voice-inline-orb[data-state="speaking"]{box-shadow:0 0 calc(22px + 60px * var(--voice-energy)) rgba(168,130,255,.52),inset 0 -8px 22px rgba(70,54,120,.34)}
.voice-inline-orb[data-state="error"]{background:radial-gradient(circle at 50% 38%,rgba(255,200,200,.92),rgba(190,120,120,.6) 60%,rgba(120,70,70,.4))}
@keyframes momoVoiceInlineDenken{0%,100%{transform:scale(.94)}50%{transform:scale(1.0)}}
.voice-inline-close{display:none}
body.voice-inline-on .voice-inline-close{display:inline-flex}
body.voice-inline-on .voice-live-btn{background:rgba(255,255,255,.14)}
body.voice-inline-on .voice-live-btn[aria-pressed="false"]{opacity:.55}
@media (prefers-reduced-motion:reduce){
.voice-inline-orb,.voice-inline-orb::after{transition:none;animation:none;transform:none}
}
@media (max-width:640px){
.voice-inline-orb{width:76px;height:76px}
.voice-inline-mark,.voice-inline-logo img{width:46px;height:46px}
}
/* ------------------------------------------------------- Menü auf dem Telefon scrollen
Gemessen: Auf einem 640 px hohen Bildschirm war das Menü 984 px hoch – und `.sidebar`
stand auf `overflow:hidden`. Die unteren 344 px waren damit nicht erreichbar, der
Account-Knopf (und die MOMO-Seite darin) gar nicht. Kein Balken, kein Wischen, nichts.
Auf dem Telefon scrollt jetzt das **ganze** Menü als ein Stück. Dafür muss die
Chat-Liste ihr eigenes Scrollen abgeben – zwei ineinanderliegende Scrollbereiche
fühlen sich auf einem Finger falsch an: man wischt die Liste, obwohl man das Menü
meint. Der Account-Knopf bleibt unten kleben, damit er immer erreichbar ist. */
@media (max-width:760px){
.sidebar{-webkit-overflow-scrolling:touch}
.sidebar::-webkit-scrollbar{width:0}
}
/* Auch auf dem Rechner ist der Inhalt höher als das Fenster (981 px bei 900 px).
Das Rollen selbst steht jetzt in der Grundregel von .sidebar — hier bleibt nur
der etwas blassere Balken für grosse Fenster. */
@media (min-width:761px){
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10)}
}
/* ------------------------------------------------------- Zwei Kleinigkeiten für Lighthouse
1. `overflow: visible` hat auf ![]()
keine Wirkung - ausser der veralteten, vor der
Chrome warnt und für die Lighthouse 5 Punkte abzieht. Die Regeln oben setzen es
teils mit !important, deshalb hier zum Schluss und ebenfalls mit !important.
Der Schein um das Zeichen kommt von `filter: drop-shadow` und wird davon nicht
beschnitten - das ist nachgesehen, nicht vermutet.
2. Der Ladetext war zu blass für den geforderten Kontrast. */
img.momo-atom-logo-img,img.atom-mini,img.account-logo-svg,img.topbar-logo-svg,
img.momo-brand-svg,img.hero-brand-mark,img.momo-orbit-logo{overflow:hidden!important}
.momo-loading-detail{color:#a6a6b0}
/* ---------------------------------------------------- Karte auf der Startseite
Zeigt, was gerade fehlt: das Anmeldefeld, wenn niemand angemeldet ist, sonst
die Kaufpakete, wenn das Guthaben leer ist. Sie erbt das Aussehen des
Schnellstarts, damit auf der Startseite nicht zwei Kastenarten stehen. */
.hero-credits{border-color:rgba(255,255,255,.12)}
.hero-credits .email-login{margin-top:10px}
.hero-credits .hero-quickstart-grid{margin-top:2px}
.hero-credits-actions{display:flex;justify-content:center;margin-top:10px}
.hero-credits-note{
margin:9px 2px 0;
font-size:11.5px;
line-height:1.5;
color:#9a9a9a;
text-align:center;
min-height:0;
}
.hero-credits-note:empty{display:none}
.hero-credits-note.is-error{color:#e88}
@media (max-width:520px){
.hero-credits .email-login{flex-direction:column}
.hero-credits .email-login .action-btn{width:100%}
}
/* ------------------------------------------------- Account-Menü unten links
Das Menü schwebt 8 px über der Karte. Diese 8 px gehören weder zur Karte noch
zum Menü — wer mit der Maus hinaufwandert, verliert dort den Hover, und das
Menü begann zu verschwinden, bevor man einen Eintrag treffen konnte.
Die unsichtbare Brücke schliesst die Lücke. */
.sidebar-account-popover::after{
content:"";
position:absolute;
left:0;right:0;
top:100%;
height:12px;
}
/* Kurze Nachlaufzeit: ein Ausrutscher über den Rand schliesst nicht sofort.
Beim Öffnen gibt es keine Verzögerung — nur beim Schliessen. */
.sidebar-account-popover{transition-delay:.28s}
.sidebar-account-dock:hover .sidebar-account-popover,
.sidebar-account-dock:has(:focus-visible) .sidebar-account-popover,
.sidebar-account-dock.open .sidebar-account-popover{transition-delay:0s}
/* Angeklickt bleibt es offen, bis man daneben klickt — dann ist der Nachlauf egal. */
.sidebar-account-dock.open .sidebar-account-popover{transition-delay:0s!important}
/* 27.09.2026: Im offenen Handy-Menue liegt nichts mehr ueber der Account-Karte.
Vorher deckte die Network-Leiste unten (Start, Rooms, +, Social, Presence, z-index 140)
die Karte auf allen Network-Ansichten zu; im Chat war sie sichtbar. */
@media(max-width:720px){
.app.mobile-open .momo-network-mobile-dock{display:none!important}
}
/* --- Chat-Uebersicht: Kimi-artige Strichleiste + Abschnitts-Popup --- */
.chat-view{position:relative}
.chat-overview-rail{position:absolute;right:6px;top:50%;transform:translateY(-58%);
width:22px;z-index:21}
.chat-overview-rail[hidden]{display:none}
.chat-overview-strich{position:absolute;right:4px;width:16px;height:3px;border:0;border-radius:2px;
padding:0;cursor:pointer;background:rgba(140,140,150,.45);transition:background .15s ease,width .15s ease}
.chat-overview-strich:hover{background:var(--text,#e8e8e8)}
.chat-overview-strich.aktiv{width:22px;background:var(--text,#e8e8e8)}
@media(max-width:760px){.chat-overview-rail{display:none}}
.chat-overview-blitz{animation:chatOverviewBlitz 1.5s ease}
@keyframes chatOverviewBlitz{0%{box-shadow:0 0 0 2px rgba(255,255,255,.32);border-radius:12px}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.chat-overview-popup{position:absolute;right:34px;top:50%;transform:translateY(-58%);
width:min(340px,72vw);max-height:56vh;display:flex;flex-direction:column;z-index:23;
background:var(--panel,#17181d);border:1px solid var(--border,#33363f);
border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.45);overflow:hidden}
.chat-overview-popup[hidden]{display:none}
.chat-overview-popup-kopf{display:flex;align-items:center;justify-content:space-between;
padding:10px 12px;border-bottom:1px solid var(--border,#33363f);font-size:12px}
.chat-overview-popup-zu{border:0;background:transparent;color:var(--muted,#8b93a7);
font-size:16px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:8px}
.chat-overview-popup-zu:hover{color:var(--text,#f4f4f4)}
.chat-overview-popup-liste{overflow:auto;padding:6px}
.chat-overview-eintrag{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
border:0;background:transparent;color:var(--text,#d7d7dc);cursor:pointer;
padding:7px 9px;border-radius:10px;font-size:12.5px;line-height:1.3}
.chat-overview-eintrag:hover{background:rgba(127,127,140,.1)}
.chat-overview-eintrag.aktiv{background:rgba(127,127,140,.16)}
.chat-overview-eintrag-buchstabe{flex:0 0 22px;width:22px;height:22px;border-radius:6px;
display:grid;place-items:center;font-size:10px;font-weight:700;
background:rgba(127,127,140,.18);color:var(--text,#e8e8ec)}
.chat-overview-eintrag-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- Spenden-Karte im Pricing (Unterstuetze die Entwicklung von Momo AI) ---------- */
.donate-card .donate-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.donate-seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;
background:var(--surface-2,rgba(127,127,140,.12));border:1px solid var(--line,rgba(127,127,140,.22))}
.donate-seg button{border:0;background:transparent;color:var(--muted,#8b93a7);
font:inherit;font-size:13px;padding:7px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
.donate-seg button:hover{color:var(--text,#f4f4f4)}
.donate-seg button.is-active{background:var(--accent,#6e5bf0);color:#fff}
.donate-amount{display:inline-flex;align-items:center;gap:7px;font-size:13px;
color:var(--muted,#8b93a7);border:1px solid var(--line,rgba(127,127,140,.22));
border-radius:12px;padding:0 12px;background:var(--surface-1,rgba(127,127,140,.08))}
.donate-amount input{width:86px;border:0;background:transparent;color:var(--text,#eee);
font:inherit;font-size:15px;padding:9px 0;outline:none;-moz-appearance:textfield}
.donate-amount input::-webkit-outer-spin-button,.donate-amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.donate-btn[disabled]{opacity:.55;cursor:default}
@media(max-width:560px){.donate-card .donate-row{align-items:stretch;flex-direction:column}
.donate-amount,.donate-seg,.donate-btn{width:100%;justify-content:center}
.donate-amount input{flex:1}}