:root{color-scheme:dark;font:15px/1.5 system-ui,-apple-system,sans-serif;background:#0d101a;color:#f3f3fa}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0}button,textarea{font:inherit}button{cursor:pointer}.app{display:grid;grid-template-columns:270px minmax(0,1fr);height:100dvh;overflow:hidden}aside{position:sticky;top:0;height:100dvh;overflow:hidden;background:#141726;border-right:1px solid #2c3144;padding:22px 13px;display:flex;flex-direction:column;gap:12px;min-height:0}.brand{display:flex;align-items:center;gap:12px;padding:3px 11px 20px}.brand strong{letter-spacing:.21em;font-size:1.05rem}.brand small{display:block;color:#929bb6;font-size:.76rem}.mark{flex:none;display:inline-block;width:31px;height:31px;border-radius:50%;background:linear-gradient(140deg,#bd72f4,#689bff,#49d8d2);box-shadow:0 0 18px #9e83f044}.mark.large{width:70px;height:70px}.primary{background:#b99af1;color:#171322;border:0;border-radius:12px;padding:11px 15px;font-weight:700}.primary:hover{background:#d1b9fc}.heading{display:flex;justify-content:space-between;align-items:center;color:#8e96b0;text-transform:uppercase;font-size:.72rem;letter-spacing:.12em;padding:9px 11px 0}.heading button,header button{background:transparent;color:#aeb5d1;border:0;font-size:1.2rem}nav{display:flex;flex-direction:column;overflow-y:auto;max-height:38%;gap:3px}nav button{border:0;background:transparent;color:#bdc3d5;text-align:left;border-radius:9px;padding:9px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nav button:hover,nav button.selected{background:#292d44;color:white}.notes-link{margin-top:auto;color:#b7a2e8;text-decoration:none;padding:12px;border-top:1px solid #303448}main{min-width:0;min-height:0;height:100dvh;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(circle at 55% -10%,#23243d 0%,#111421 42%,#0d101a 100%)}header{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:15px;padding:18px 28px;border-bottom:1px solid #303348;background:#151827e8;backdrop-filter:blur(14px)}header h1{font-size:1.04rem;margin:0}header p{font-size:.77rem;color:#9aa3bd;margin:2px 0 0}header #rename{margin-left:auto}#menu{display:none}#messages{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:15px;padding:28px max(25px,calc((100% - 760px)/2))}.welcome{margin:auto;max-width:490px;text-align:center;color:#aab0c8}.welcome h2{color:#f5f1ff;font-size:1.5rem}.bubble{max-width:min(86%,720px);padding:12px 16px;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:17px}.bubble.user{background:#514879;align-self:flex-end}.bubble.assistant{background:#262b40;align-self:flex-start}.bubble.hint{color:#9fa8c2;align-self:center;font-size:.85rem}.composer{flex:none;padding:15px max(25px,calc((100% - 760px)/2)) 20px;background:linear-gradient(180deg,#0d101a00,#0d101ae8 25%)}form{display:flex;align-items:end;gap:10px;border:1px solid #41455d;border-radius:17px;background:#202437;padding:9px}textarea{flex:1;min-width:0;resize:vertical;max-height:150px;min-height:44px;color:white;background:transparent;border:0;outline:0;padding:9px}#attach,#record{border:0;background:transparent;color:#c7b5ee;font-size:1.25rem;padding:9px 5px}#record.recording{color:#ff7878;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.4}}button:disabled{opacity:.55;cursor:wait}.foot{display:flex;justify-content:space-between;gap:10px;color:#8791ab;font-size:.74rem;padding:8px 3px 0}.foot label{white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:700px){.app{grid-template-columns:1fr}aside{position:absolute;z-index:5;width:min(82vw,300px);height:100dvh;transform:translateX(-100%);transition:transform .2s;box-shadow:15px 0 30px #0005}aside.open{transform:translateX(0)}#menu{display:block}header{padding:13px 18px}#messages{padding:20px 15px}.bubble{max-width:94%}.composer{padding:10px 12px 15px}}
:root .model-choice{margin-left:auto;color:#aeb5d1;font-size:.75rem;white-space:nowrap}.model-choice select{margin-left:4px;background:#262b40;color:#f3f3fa;border:1px solid #454967;border-radius:8px;padding:5px}.topbar #rename{margin-left:0}@media(max-width:700px){.model-choice{font-size:0}.model-choice select{font-size:.72rem;max-width:110px}}
.nav-row{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;border-radius:9px}.nav-row:hover,.nav-row.selected{background:#292d44}.nav-row .nav-open{min-width:0}.nav-row .nav-actions{padding:7px;text-align:center;opacity:0}.nav-row:hover .nav-actions,.nav-row.selected .nav-actions{opacity:1}.sidebar-links{margin-top:auto;display:grid}.sidebar-links .notes-link{margin-top:0;padding:10px 12px}.trash{color:#929bb6;font-size:.82rem;padding:0 10px}.trash summary{cursor:pointer;padding:7px 0}.trash nav{max-height:110px}#record{font-size:1.65rem;min-width:42px;min-height:42px;border-radius:50%}#record:hover{background:#ffffff0d}#temporary-chat.active{background:#3b3358;color:#fff;box-shadow:inset 3px 0 #c8a8ff}
.nav-row{position:relative}.action-menu{position:absolute;z-index:20;right:4px;top:36px;width:185px;padding:6px;background:#24283b;border:1px solid #484d68;border-radius:11px;box-shadow:0 12px 30px #0008}.action-menu[hidden]{display:none}.action-menu button{display:block;width:100%;padding:9px;text-align:left}.danger-text{color:#ffaaa9!important}.luna-dialog{width:min(92vw,470px);padding:0;border:1px solid #4b506b;border-radius:18px;background:#1c2031;color:#f3f3fa;box-shadow:0 25px 80px #000b}.luna-dialog::backdrop{background:#070913aa;backdrop-filter:blur(4px)}.luna-dialog form{display:block;border:0;background:transparent;padding:24px}.luna-dialog h2{margin:0 0 7px}.luna-dialog .muted{color:#aab1c8;margin:0 0 18px}.luna-dialog label{display:grid;gap:6px;margin:14px 0;color:#c7cce0}.luna-dialog input,.luna-dialog textarea{width:100%;border:1px solid #4b506b;border-radius:10px;background:#111522;color:#fff;padding:11px;resize:vertical}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.dialog-actions button{border:0;border-radius:10px;padding:10px 15px}.dialog-actions .secondary{background:#34394e;color:#fff}.dialog-actions .danger{background:#e56f73;color:#16090a;font-weight:700}
.trash{padding:0;border:1px solid transparent;border-radius:11px;overflow:hidden;flex:none}.trash[open]{background:#1d2133;border-color:#363b52;padding:4px 7px 7px}.trash summary{padding:7px 9px;white-space:nowrap}.trash nav{max-height:170px!important;overflow-y:auto!important;display:block;padding:2px}.trash nav button{display:block;width:100%;padding:7px 9px;text-align:left;overflow:hidden;text-overflow:ellipsis}
button{transition:transform .16s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,opacity .2s ease}button:hover:not(:disabled){transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(1px) scale(.98)}a{transition:color .2s ease,opacity .2s ease}.primary{box-shadow:0 6px 18px #8e69d225}.primary:hover{box-shadow:0 9px 24px #a47ae344}.bubble{animation:bubble-in .24s ease both}@keyframes bubble-in{from{opacity:0;transform:translateY(5px) scale(.99)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.mark{width:35px;height:38px;border-radius:0;background:url('/luna-idle.webp') center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 6px 12px #755cff55)}.mark.large{width:98px;height:106px}

/* Shared Liquid Glass visual language. */
:root{--glass:#20233a9c;--glass-line:#ffffff20;--glow:#a884ff}
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none;animation:aurora 12s ease-in-out infinite alternate}body::before{width:42vw;height:42vw;left:20%;top:-24%;background:#7653df2c}body::after{width:34vw;height:34vw;right:-10%;bottom:-20%;background:#42d3f51e;animation-delay:-5s}
aside,header,form,.panel,.recording-group,.note,.luna-dialog,.action-menu{background:linear-gradient(145deg,#ffffff12,#ffffff06),var(--glass)!important;border:1px solid var(--glass-line)!important;box-shadow:inset 0 1px #ffffff16,0 18px 50px #0506123b!important;backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
.primary{background:linear-gradient(135deg,#d8c7ff,#9d7bea 58%,#70cbff)!important;box-shadow:inset 0 1px #fff9,0 9px 26px #8d68dd55!important}.notes-link:hover,nav button:hover,#attach:hover,#record:hover,.heading button:hover,header button:hover{background:#ffffff0d!important;border-color:#ffffff16!important}
.bubble{border:1px solid #ffffff16;box-shadow:inset 0 1px #ffffff10,0 10px 30px #0506122c;backdrop-filter:blur(18px)}.bubble.user{background:linear-gradient(135deg,#8065bdcc,#514879b8)}.bubble.assistant{background:linear-gradient(145deg,#303651bf,#22263aba)}
.mark.large{animation:luna-arrive .75s cubic-bezier(.2,.9,.2,1) both,luna-float 4s ease-in-out .75s infinite}.welcome h2,.welcome p,.panel,.recording-group{animation:rise-in .45s ease both}.recording-group[open] .recording-content{animation:reveal .28s ease both}
.attach-menu{position:absolute;left:max(8px,calc((100% - 760px)/2));bottom:76px;z-index:30;display:grid;gap:4px;min-width:230px;padding:8px;border:1px solid var(--glass-line);border-radius:17px;background:#252941da;box-shadow:0 22px 60px #000a;backdrop-filter:blur(25px)}.attach-menu[hidden]{display:none}.attach-menu button{border:0;border-radius:11px;padding:11px 13px;text-align:left;color:#f5f1ff;background:transparent}.attach-menu button:hover{background:#ffffff14}.composer{position:relative}
@keyframes aurora{to{transform:translate(8vw,6vh) scale(1.1)}}@keyframes luna-arrive{from{opacity:0;transform:translateY(22px) scale(.55) rotate(-8deg)}to{opacity:1;transform:none}}@keyframes luna-float{50%{transform:translateY(-7px) scale(1.02)}}@keyframes rise-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:700px){.attach-menu{position:fixed;left:14px;right:14px;bottom:108px}}

/* Calmer response rhythm: thinking state, then softly revealed text groups. */
.bubble.thinking{display:flex;align-items:center;gap:9px;min-height:58px;color:#c9cde0;padding:8px 15px 8px 10px}
.thinking-luna{width:40px;height:42px;flex:none;background:url('/luna-idle.webp') center/contain no-repeat;filter:drop-shadow(0 5px 11px #8e70ef66);animation:thinking-float 1.8s ease-in-out infinite}
.thinking-label{font-size:.88rem;letter-spacing:.01em}
.thinking-dots{display:inline-flex;align-items:center;gap:4px;margin-left:1px}
.thinking-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#cbb7ff;animation:thinking-dot 1.15s ease-in-out infinite}
.thinking-dots i:nth-child(2){animation-delay:.16s}.thinking-dots i:nth-child(3){animation-delay:.32s}
.reply-chunk{animation:reply-group-in .34s ease both}
@keyframes thinking-float{50%{transform:translateY(-4px) scale(1.025);filter:drop-shadow(0 8px 16px #9a7cff88)}}
@keyframes thinking-dot{0%,70%,100%{opacity:.28;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
@keyframes reply-group-in{from{opacity:0;filter:blur(2px);transform:translateY(3px)}to{opacity:1;filter:none;transform:none}}