@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Modak&display=swap');

:root{
  --luna-blue:#CED5D9;
  --luna-glacier:#E8F2FF;
  --luna-ice:#F7FBFF;
  --ink:#111418;
  --muted:#6E7880;
  --line:rgba(17,20,24,.075);
  --glass:rgba(232,242,255,.66);
  --glass2:rgba(255,255,255,.82);
  --shadow:0 20px 60px rgba(75,91,105,.12),inset 0 1px rgba(255,255,255,.9);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Manrope",-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;color:var(--ink)}
body{min-height:100dvh;background:var(--luna-glacier);overflow-x:hidden}
button,textarea,input{font:inherit}
button{-webkit-tap-highlight-color:transparent}

.aurora{position:fixed;inset:0;overflow:hidden;z-index:-2;background:
  radial-gradient(circle at 18% 14%,rgba(255,255,255,.95),transparent 32%),
  linear-gradient(145deg,var(--luna-glacier) 0%,#fafdff 48%,var(--luna-blue) 145%)}
.aurora:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.7) .7px,transparent .7px);background-size:18px 18px;opacity:.16}
.aurora i{position:absolute;width:48vw;height:48vw;border-radius:50%;filter:blur(95px);opacity:.32;animation:drift 17s var(--ease) infinite alternate}
.aurora i:nth-child(1){background:#fff;left:-12%;top:-18%}
.aurora i:nth-child(2){background:var(--luna-blue);right:-16%;top:18%;animation-delay:-5s}
.aurora i:nth-child(3){background:#dbe9f4;left:30%;bottom:-28%;animation-delay:-9s}
@keyframes drift{to{transform:translate3d(6vw,4vh,0) scale(1.12)}}

.glass{background:var(--glass);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);backdrop-filter:blur(30px) saturate(135%);-webkit-backdrop-filter:blur(30px) saturate(135%)}

.topbar{position:fixed;z-index:20;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);height:58px;width:min(720px,calc(100% - 28px));border-radius:29px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;padding:3px 5px;transition:.45s var(--ease)}
.wordmark{text-align:center;text-decoration:none;color:inherit}
.luna-wordmark{font-family:"Modak","Manrope",sans-serif;font-weight:400;letter-spacing:.01em;line-height:1}
.topbar .luna-wordmark{font-size:29px;transform:translateY(1px)}
.drawer-logo{font-size:31px}
.icon-btn,.profile,.attach,.send{border:0;background:transparent;cursor:pointer;color:inherit}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;transition:.25s var(--ease)}
.icon-btn:hover{background:rgba(206,213,217,.38)}
.icon-btn svg,.send svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.profile{width:38px;height:38px;border-radius:50%;background:#111418;color:#fff;justify-self:end;font-weight:750;box-shadow:0 7px 18px rgba(17,20,24,.15)}

main{width:min(820px,calc(100% - 32px));margin:auto;padding:130px 0 190px}
.welcome{min-height:55dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:.6s var(--ease)}
.welcome.hide{opacity:0;transform:translateY(-18px) scale(.985);min-height:0;height:0;overflow:hidden}
.welcome h1{font-size:clamp(34px,6vw,58px);line-height:1;letter-spacing:-.055em;margin:26px 0 10px;font-weight:800}
.welcome p{color:var(--muted);font-size:17px;margin:0;font-weight:500}

.luna-sigil{position:relative;width:94px;height:76px;filter:drop-shadow(0 15px 24px rgba(89,107,120,.13))}
.sigil{position:absolute;font-family:"Modak","Manrope",sans-serif;color:#111418;display:grid;place-items:center;user-select:none}
.s1{font-size:48px;left:25px;top:5px;animation:symbolFloat 4.2s ease-in-out infinite}
.s2{font-size:30px;right:5px;top:7px;color:#87959e;animation:symbolFloat 3.4s ease-in-out infinite reverse}
.s3{font-size:31px;left:4px;bottom:0;color:#87959e;animation:symbolFloat 3.8s ease-in-out infinite .4s}
.s4{font-size:20px;right:19px;bottom:5px;color:var(--luna-blue);-webkit-text-stroke:1px #83919a;animation:symbolFloat 4.6s ease-in-out infinite .8s}
@keyframes symbolFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(4deg)}}

.conversation{display:flex;flex-direction:column;gap:30px}
.message{animation:enter .5s var(--ease) both;line-height:1.62;font-size:16px}
@keyframes enter{from{opacity:0;transform:translateY(12px);filter:blur(5px)}}
.message.user{align-self:flex-end;max-width:78%;padding:13px 17px;border-radius:22px 22px 7px 22px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.86);box-shadow:0 8px 25px rgba(62,78,90,.06)}
.message.ai{align-self:flex-start;max-width:92%;padding:2px 4px}
.message.ai .name{font-family:"Modak","Manrope",sans-serif;font-size:20px;font-weight:400;line-height:1;margin-bottom:10px;color:#111418}
.message.ai h1,.message.ai h2,.message.ai h3{line-height:1.2;letter-spacing:-.025em}
.message.ai p{margin:.65em 0}
.message.ai pre{overflow:auto;border:1px solid rgba(17,20,24,.08);border-radius:18px;background:rgba(255,255,255,.6);padding:15px}
.message.ai code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.message.ai table{border-collapse:separate;border-spacing:0;width:100%;overflow:hidden;border:1px solid rgba(17,20,24,.08);border-radius:16px;background:rgba(255,255,255,.44)}
.message.ai th,.message.ai td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(17,20,24,.07)}
.message.ai th{background:rgba(206,213,217,.32);font-weight:750}
.message.ai tr:last-child td{border-bottom:0}

.thinking-wrap{display:flex;align-items:center;gap:12px;min-height:42px;color:var(--muted)}
.thinking-symbol{font-family:"Modak","Manrope",sans-serif;color:#111418;font-size:31px;width:38px;height:38px;display:grid;place-items:center;animation:lunaThink .85s var(--ease) infinite alternate}
.thinking-label{font-size:13px;font-weight:650;animation:softPulse 1.3s ease-in-out infinite}
@keyframes lunaThink{from{transform:rotate(-9deg) scale(.9);opacity:.55}to{transform:rotate(8deg) scale(1.08);opacity:1}}
@keyframes softPulse{50%{opacity:.48}}

.composer-wrap{position:fixed;z-index:15;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(760px,calc(100% - 24px))}
.composer{min-height:62px;border-radius:31px;display:flex;align-items:flex-end;padding:8px;transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.composer:focus-within{box-shadow:0 22px 65px rgba(65,83,96,.15),inset 0 1px rgba(255,255,255,.95);transform:translateY(-2px)}
.attach,.send{flex:0 0 46px;width:46px;height:46px;border-radius:50%;font-size:25px;display:grid;place-items:center;transition:.25s var(--ease)}
.attach:hover{background:rgba(206,213,217,.38)}
.send{background:#111418;color:white;transform:scale(.86);opacity:.35}
.send.ready{transform:scale(1);opacity:1}
.send:active{transform:scale(.9)}
textarea{resize:none;overflow:auto;max-height:160px;min-height:46px;flex:1;border:0;outline:0;background:transparent;padding:12px 5px;font-size:16px;color:inherit}
textarea::placeholder{color:#879199}
.hint{text-align:center;font-size:10.5px;color:#7f8a92;margin-top:7px}

.drawer{position:fixed;z-index:40;top:12px;bottom:12px;left:12px;width:min(360px,calc(100% - 24px));border-radius:30px;padding:18px;transform:translateX(calc(-100% - 30px));transition:.5s var(--ease)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;font-size:20px}
.drawer-head .icon-btn{font-size:28px}
.new-chat{width:100%;border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:13px;margin:18px 0;background:rgba(255,255,255,.66);font-weight:700;cursor:pointer;transition:.25s var(--ease)}
.new-chat:hover{transform:translateY(-1px);background:#fff}
.history{font-size:13px;padding:6px}.muted{color:var(--muted)}
.scrim{position:fixed;z-index:35;inset:0;background:rgba(34,44,50,.12);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:.35s}
.scrim.show{opacity:1;pointer-events:auto}

.account-pop{position:fixed;z-index:60;top:82px;left:calc(50% + min(360px,calc(50% - 14px)) - 220px);width:220px;border-radius:20px;padding:15px;display:grid;gap:4px;animation:enter .3s var(--ease)}
.account-pop[hidden]{display:none}
.account-pop span{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.account-pop button{border:0;background:rgba(206,213,217,.38);border-radius:12px;padding:9px;margin-top:8px;cursor:pointer}
.profile.logged{background:linear-gradient(145deg,#111418,#3b464d)}

.login-page{min-height:100svh;overflow:auto;background:var(--luna-glacier);color:#111418}
.login-page .aurora{opacity:.95}
.login-shell{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:38px 22px}
.login-brand{position:absolute;top:28px;left:50%;transform:translateX(-50%);color:#111418;text-decoration:none;font-family:"Modak","Manrope",sans-serif;font-size:36px;line-height:1}
.login-panel{width:min(420px,calc(100vw - 34px));padding:36px 34px 30px;border-radius:34px;text-align:center;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.92);box-shadow:0 24px 70px rgba(71,87,99,.13),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(34px) saturate(140%);-webkit-backdrop-filter:blur(34px) saturate(140%);animation:loginIn .7s var(--ease) both}
@keyframes loginIn{from{opacity:0;transform:translateY(15px) scale(.985);filter:blur(5px)}}
.lc-logo-wrap{display:flex;justify-content:center;align-items:center;margin:0 auto 18px}
.lc-logo{display:block;width:min(230px,70%);max-height:120px;object-fit:contain}
.login-heading h1{margin:0;font-size:32px;letter-spacing:-.045em;font-weight:800}
.login-heading p{margin:8px auto 25px;color:#707a82;font-size:14px;line-height:1.45;max-width:300px}
.login-form{text-align:left}
.field{margin:13px 0}
.field label{display:block;margin:0 0 7px 2px;font-size:12px;font-weight:700;color:#535e65}
.field input{box-sizing:border-box;width:100%;height:50px;padding:0 15px;border:1px solid rgba(17,20,24,.075);border-radius:16px;background:rgba(255,255,255,.78);outline:none;font:inherit;box-shadow:inset 0 1px 0 #fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.field input:focus{border-color:rgba(91,110,123,.35);box-shadow:0 0 0 4px rgba(206,213,217,.28),inset 0 1px 0 #fff}
.auth-primary{width:100%;height:50px;border:0;border-radius:16px;padding:14px;margin-top:8px;background:#111418;color:#fff;font-weight:750;cursor:pointer;transition:.25s var(--ease)}
.auth-primary:active{transform:scale(.98)}
.auth-primary:disabled{opacity:.5}
.auth-error{min-height:18px;text-align:center;color:#b42318;font-size:12px;margin-top:10px}
.login-divider{display:flex;align-items:center;gap:12px;margin:23px 0 12px;color:#89939a}
.login-divider span{height:1px;flex:1;background:rgba(17,20,24,.08)}
.login-divider small{font-size:9px;letter-spacing:.16em;font-weight:800}
.login-foot{margin:0;color:#7d878e;font-size:11px}
.login-legal{margin:18px 0 0;color:#8a949a;font-size:10px}

@media(max-width:600px){
  .topbar{top:max(8px,env(safe-area-inset-top))}
  main{padding-top:100px}
  .welcome{min-height:58dvh}
  .message.user{max-width:88%}
  .message.ai{max-width:100%}
  .composer-wrap{bottom:max(8px,env(safe-area-inset-bottom))}
  .hint{display:none}
  .account-pop{right:14px;left:auto;top:76px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Luna v0.8 — account conversations, Markdown and settings */
.history-search{margin:-7px 0 10px}.history-search input{box-sizing:border-box;width:100%;height:40px;border:1px solid rgba(17,20,24,.07);border-radius:14px;background:rgba(255,255,255,.52);padding:0 13px;outline:none;font:inherit;font-size:13px}.history{display:grid;gap:5px;overflow:auto;max-height:calc(100dvh - 190px)}.history-item{display:flex;align-items:center;border-radius:15px;transition:.2s var(--ease)}.history-item:hover,.history-item.active{background:rgba(255,255,255,.55)}.history-open{min-width:0;flex:1;border:0;background:transparent;text-align:left;padding:10px 8px;cursor:pointer;color:inherit}.history-open span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:650}.history-open small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.history-more{border:0;background:transparent;opacity:.45;padding:10px 8px;cursor:pointer}.history-item:hover .history-more{opacity:1}
.message-body{min-width:0}.message.ai .message-body>p:first-child{margin-top:0}.message.ai .message-body>p:last-child{margin-bottom:0}.message.ai ul,.message.ai ol{padding-left:1.4em}.message.ai li{margin:.3em 0}.message.ai a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}.message.ai blockquote{margin:1em 0;padding:2px 0 2px 14px;border-left:3px solid rgba(17,20,24,.18);color:#566169}.message.ai hr{border:0;border-top:1px solid rgba(17,20,24,.09);margin:20px 0}.table-scroll{overflow-x:auto;border-radius:16px;margin:12px 0}.codebox{border:1px solid rgba(17,20,24,.08);border-radius:18px;background:rgba(255,255,255,.58);overflow:hidden;margin:12px 0}.codebox .codehead{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(17,20,24,.07);font-size:10px;color:var(--muted);text-transform:lowercase}.copy-code{border:0;border-radius:8px;background:rgba(206,213,217,.35);padding:5px 8px;font-size:10px;cursor:pointer}.message.ai .codebox pre{border:0;border-radius:0;background:transparent;margin:0}.friendly-error{padding:12px 14px;border-radius:15px;background:rgba(255,255,255,.48);color:#6c4a4a;font-size:14px}
.modal-backdrop{position:fixed;z-index:100;inset:0;background:rgba(42,53,61,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;padding:18px}.modal-backdrop[hidden]{display:none}.settings{width:min(760px,calc(100vw - 28px));max-height:min(760px,calc(100dvh - 36px));overflow:hidden;border-radius:30px;display:grid;grid-template-rows:auto auto 1fr;box-shadow:0 35px 100px rgba(54,69,80,.18)}.settings-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 12px}.settings-head h2{margin:2px 0 0;font-size:25px;letter-spacing:-.035em}.eyebrow{font-size:9px;letter-spacing:.16em;color:var(--muted);font-weight:800}.settings-tabs{display:flex;gap:5px;padding:0 20px 12px;overflow-x:auto}.settings-tabs button{border:0;background:transparent;padding:9px 12px;border-radius:12px;white-space:nowrap;font-weight:650;color:#6c767d;cursor:pointer}.settings-tabs button.active{background:rgba(206,213,217,.35);color:#111418}.settings-body{overflow:auto;padding:4px 24px 24px}.settings-pane{display:none;grid-template-columns:1fr 1fr;gap:15px}.settings-pane.active{display:grid}.settings-pane label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#59646b}.settings-pane select,.settings-pane textarea,.memory-add input{box-sizing:border-box;width:100%;border:1px solid rgba(17,20,24,.08);border-radius:14px;background:rgba(255,255,255,.62);padding:12px;outline:none;font:inherit;color:#111418}.settings-pane textarea{resize:vertical}.settings-pane .wide{grid-column:1/-1}.toggle{display:flex!important;grid-column:1/-1;flex-direction:row;align-items:center;gap:9px}.settings-save{border:0;border-radius:14px;background:#111418;color:#fff;padding:13px;font-weight:750;cursor:pointer}.memory-intro{grid-column:1/-1;display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.memory-intro p,.settings-note{color:var(--muted);font-size:13px;line-height:1.55;margin:5px 0}.switch input{display:none}.switch span{display:block;width:44px;height:25px;border-radius:20px;background:#b8c1c7;position:relative;transition:.2s}.switch span:after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}.switch input:checked+span{background:#111418}.switch input:checked+span:after{transform:translateX(19px)}.memory-add{grid-column:1/-1;display:flex;gap:8px}.memory-add button{width:44px;border:0;border-radius:14px;background:#111418;color:#fff;font-size:20px}.memory-list{grid-column:1/-1;display:grid;gap:8px}.memory-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.48);font-size:13px}.memory-item button{border:0;background:transparent;font-size:20px;color:#7a858c;cursor:pointer}.stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stats div{padding:18px;border-radius:18px;background:rgba(255,255,255,.48);display:grid;gap:4px}.stats strong{font-size:26px}.stats span{font-size:11px;color:var(--muted)}.settings-pane[data-pane="activity"] .settings-note,.settings-pane[data-pane="privacy"]>*{grid-column:1/-1}.toast{position:fixed;z-index:150;left:50%;bottom:92px;transform:translateX(-50%);background:#111418;color:#fff;padding:10px 14px;border-radius:20px;font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);animation:enter .25s var(--ease)}.toast[hidden]{display:none}.modal-open{overflow:hidden}.reduce-luna-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:600px){.settings{max-height:calc(100dvh - 20px)}.settings-head{padding:18px 18px 10px}.settings-tabs{padding-left:14px}.settings-body{padding:4px 18px 20px}.settings-pane{grid-template-columns:1fr}.settings-pane>*{grid-column:1!important}.stats{grid-template-columns:1fr 1fr 1fr!important}.stats div{padding:12px}.stats strong{font-size:21px}}


/* Luna v0.9 — visual identity. Keeps v0.8 architecture/data compatibility. */
.luna-logo-link img{display:block;width:84px;height:30px;object-fit:contain}
.drawer-logo img{display:block;width:92px;height:34px;object-fit:contain}
.luna-register-brand img{display:block;width:112px;height:40px;object-fit:contain;margin:auto}
.luna-mascot{position:relative;width:132px;height:98px;margin:0 auto 12px;filter:drop-shadow(0 16px 28px rgba(70,88,100,.12))}
.luna-mascot>img{width:100%;height:100%;object-fit:contain;animation:lunaBreathe 3.6s ease-in-out infinite;transform-origin:50% 75%}
.mascot-symbol{position:absolute;font-family:"Modak","Manrope",sans-serif;color:#111418;pointer-events:none;animation:symbolFloat 4.4s ease-in-out infinite}
.ms1{font-size:22px;right:-3px;top:7px}.ms2{font-size:17px;left:-2px;top:17px;color:#8998a1;animation-delay:-1.4s}.ms3{font-size:18px;right:8px;bottom:3px;color:#8998a1;animation-delay:-2.2s}
@keyframes lunaBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.018)}}
.reduce-luna-motion .luna-mascot>img{animation:none!important}
@media(max-width:600px){.luna-mascot{width:112px;height:82px}.luna-logo-link img{width:76px}}

/* Luna v0.9.1 — motion architecture + asset containment
   Spatial system: 4/8px rhythm. Micro 120–220ms, component 280–520ms,
   ambient 3.2–18s. Transforms/opacity only on continuous animation. */
:root{
  --motion-micro:160ms;
  --motion-fast:240ms;
  --motion-ui:380ms;
  --motion-scene:680ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.2,1.35,.35,1);
}

/* Hard containment: no source PNG may ever define layout size. */
.luna-wordmark{display:flex;align-items:center;justify-content:center;min-width:0;overflow:visible}
.luna-wordmark img{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;object-fit:contain!important}
.topbar .luna-logo-link{width:96px;height:38px;justify-self:center}
.topbar .luna-logo-link img{width:84px!important;height:30px!important;max-width:84px!important;max-height:30px!important}
.drawer{overflow:hidden}
.drawer-logo{width:104px;height:42px;justify-content:flex-start}
.drawer-logo img{width:92px!important;height:34px!important;max-width:92px!important;max-height:34px!important}
.luna-mascot{width:132px!important;height:98px!important;max-width:132px!important;max-height:98px!important;isolation:isolate;perspective:600px;transform:translate3d(var(--cat-x,0),var(--cat-y,0),0);transition:transform var(--motion-ui) var(--ease-out),filter var(--motion-ui) ease}
.luna-mascot>img{position:relative;z-index:2;display:block!important;width:132px!important;height:98px!important;max-width:132px!important;max-height:98px!important;object-fit:contain!important;will-change:transform,filter}
.mascot-halo{position:absolute;z-index:0;left:50%;top:58%;width:112px;height:62px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.86),rgba(206,213,217,.24) 48%,transparent 72%);filter:blur(9px);transform:translate(-50%,-50%) scale(.88);opacity:.55;transition:opacity .45s ease,transform .55s var(--ease-out)}

/* Cat: sleeps ambiently, wakes on intent, settles after inactivity. */
.luna-mascot.is-sleeping>img{animation:lunaSleep 3.8s ease-in-out infinite;transform-origin:52% 78%}
.luna-mascot.is-awake>img{animation:lunaWake .72s var(--ease-spring) both,lunaAlive 4.8s ease-in-out .72s infinite;transform-origin:50% 78%}
.luna-mascot.is-awake .mascot-halo{opacity:.95;transform:translate(-50%,-50%) scale(1.08)}
.sleep-note{position:absolute;z-index:4;font-weight:800;color:#7f8e98;line-height:1;opacity:0;pointer-events:none}
.z1{right:6px;top:12px;font-size:12px;animation:sleepZ 3.1s ease-in-out infinite .2s}
.z2{right:-5px;top:-1px;font-size:16px;animation:sleepZ 3.1s ease-in-out infinite 1.1s}
.is-awake .sleep-note{animation:none;opacity:0;transform:translateY(-8px) scale(.7)}
.is-awake .mascot-symbol{animation:wakeSpark .62s var(--ease-spring) both}
.is-awake .ms2{animation-delay:.07s}.is-awake .ms3{animation-delay:.13s}
@keyframes lunaSleep{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(1px) scale(1.012,.988)}55%{transform:translateY(-1px) scale(.996,1.014)}}
@keyframes lunaWake{0%{transform:translateY(1px) scale(1.01,.99) rotate(0)}38%{transform:translateY(-9px) scale(.96,1.08) rotate(-1.5deg)}70%{transform:translateY(1px) scale(1.035,.98) rotate(.8deg)}100%{transform:none}}
@keyframes lunaAlive{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(.45deg)}}
@keyframes sleepZ{0%,28%{opacity:0;transform:translate(0,5px) scale(.72)}45%{opacity:.72}82%{opacity:0;transform:translate(7px,-9px) scale(1.08)}100%{opacity:0}}
@keyframes wakeSpark{0%{opacity:0;transform:scale(.3) rotate(-24deg)}65%{opacity:1;transform:scale(1.32) rotate(8deg)}100%{opacity:.72;transform:scale(1) rotate(0)}}

/* Page entrance and tactile motion. */
.topbar{animation:topbarArrive .7s var(--ease-out) both;will-change:transform,opacity}
.welcome .luna-mascot{animation:sceneArrive .82s var(--ease-out) .06s both}
.welcome h1{animation:sceneArrive .78s var(--ease-out) .13s both}
.welcome p{animation:sceneArrive .78s var(--ease-out) .2s both}
.composer-wrap{animation:composerArrive .72s var(--ease-out) .16s both}
@keyframes topbarArrive{from{opacity:0;transform:translate(-50%,-14px) scale(.985);filter:blur(6px)}to{opacity:1;transform:translate(-50%,0) scale(1);filter:none}}
@keyframes sceneArrive{from{opacity:0;transform:translateY(14px) scale(.975);filter:blur(7px)}to{opacity:1;transform:translateY(0) scale(1);filter:none}}
@keyframes composerArrive{from{opacity:0;transform:translate(-50%,18px) scale(.985);filter:blur(6px)}to{opacity:1;transform:translate(-50%,0) scale(1);filter:none}}

.icon-btn,.profile,.attach,.send,.new-chat,.account-pop button,.settings-save,.memory-add button,.settings-tabs button{transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,opacity var(--motion-fast) ease}
.icon-btn:hover,.attach:hover{transform:translateY(-1px) scale(1.04)}
.icon-btn:active,.attach:active,.profile:active,.account-pop button:active,.settings-save:active,.memory-add button:active{transform:scale(.94)}
.profile:hover{transform:scale(1.06);box-shadow:0 10px 25px rgba(17,20,24,.2)}
.send.ready{animation:sendReady .34s var(--ease-spring)}
@keyframes sendReady{0%{transform:scale(.82)}65%{transform:scale(1.08)}100%{transform:scale(1)}}

.drawer.open{animation:drawerSettle .5s var(--ease-out)}
@keyframes drawerSettle{0%{transform:translateX(-18px);opacity:.55}100%{transform:translateX(0);opacity:1}}
.history-item{animation:listIn .36s var(--ease-out) both}
.history-item:nth-child(2){animation-delay:30ms}.history-item:nth-child(3){animation-delay:60ms}.history-item:nth-child(4){animation-delay:90ms}.history-item:nth-child(5){animation-delay:120ms}
@keyframes listIn{from{opacity:0;transform:translateX(-8px)}}

.account-pop:not([hidden]){transform-origin:88% 0;animation:popIn .28s var(--ease-spring) both}
@keyframes popIn{from{opacity:0;transform:translateY(-7px) scale(.94);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.modal-backdrop:not([hidden]){animation:veilIn .28s ease both}
.modal-backdrop:not([hidden]) .settings{animation:modalIn .46s var(--ease-spring) both}
@keyframes veilIn{from{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.965);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.settings-pane.active>*{animation:settingRowIn .38s var(--ease-out) both}
.settings-pane.active>*:nth-child(2){animation-delay:35ms}.settings-pane.active>*:nth-child(3){animation-delay:70ms}.settings-pane.active>*:nth-child(4){animation-delay:105ms}.settings-pane.active>*:nth-child(5){animation-delay:140ms}
@keyframes settingRowIn{from{opacity:0;transform:translateY(7px)}}

.message.user{transform-origin:100% 100%;animation:messageUserIn .44s var(--ease-out) both}
.message.ai{transform-origin:0 100%;animation:messageAiIn .5s var(--ease-out) both}
@keyframes messageUserIn{from{opacity:0;transform:translate(10px,8px) scale(.96);filter:blur(4px)}}
@keyframes messageAiIn{from{opacity:0;transform:translate(-7px,9px);filter:blur(5px)}}
.message-body{transition:opacity var(--motion-fast) ease,filter var(--motion-fast) ease}

.composer{will-change:transform;transition:box-shadow var(--motion-ui) var(--ease-out),transform var(--motion-ui) var(--ease-out),background-color var(--motion-ui) ease}
.composer:focus-within{transform:translateY(-3px) scale(1.006)}
.composer.typing{box-shadow:0 24px 72px rgba(65,83,96,.17),inset 0 1px rgba(255,255,255,.98)}
textarea{transition:color var(--motion-fast) ease}

/* Ambient background is deliberately slow and low-amplitude. */
.aurora i{will-change:transform;animation-duration:18s}
.aurora:after{animation:grainDrift 16s linear infinite}
@keyframes grainDrift{50%{transform:translate3d(7px,-5px,0)}}

@media(max-width:600px){
 .topbar .luna-logo-link{width:84px}.topbar .luna-logo-link img{width:76px!important;max-width:76px!important}
 .luna-mascot,.luna-mascot>img{width:112px!important;height:82px!important;max-width:112px!important;max-height:82px!important}
 .mascot-halo{width:96px;height:54px}
}
@media(prefers-reduced-motion:reduce){.aurora:after{animation:none!important}}
.reduce-luna-motion .aurora:after,.reduce-luna-motion .luna-mascot *{animation:none!important}

/* Luna v0.9.1 — motion architecture + hard asset containment */
:root{
  --motion-instant:120ms;
  --motion-fast:180ms;
  --motion-ui:280ms;
  --motion-panel:420ms;
  --motion-hero:760ms;
  --motion-ease:cubic-bezier(.2,.8,.2,1);
  --motion-spring:cubic-bezier(.16,1,.3,1);
}
/* Hard guardrails: image intrinsic dimensions can never dictate layout. */
.luna-logo-link,.drawer-logo,.luna-register-brand{display:flex!important;align-items:center;justify-content:center;overflow:hidden}
.luna-logo-link{width:104px;height:42px;justify-self:center}
.luna-logo-link img{display:block!important;width:auto!important;height:auto!important;max-width:82px!important;max-height:25px!important;object-fit:contain!important;transform:none!important}
.drawer-logo{width:108px;height:42px;justify-content:flex-start}
.drawer-logo img{display:block!important;width:auto!important;height:auto!important;max-width:94px!important;max-height:30px!important;object-fit:contain!important}
.luna-register-brand{width:132px;height:52px}
.luna-register-brand img{display:block!important;width:auto!important;height:auto!important;max-width:116px!important;max-height:38px!important;object-fit:contain!important}

.welcome{position:relative}
.luna-mascot{position:relative!important;display:block!important;width:124px!important;height:92px!important;max-width:124px!important;max-height:92px!important;margin:0 auto 10px!important;filter:drop-shadow(0 14px 26px rgba(70,88,100,.11));isolation:isolate;cursor:default;transform:translateZ(0)}
.luna-mascot>img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;transform-origin:50% 72%;animation:lunaSleep 4.8s ease-in-out infinite!important;will-change:transform,filter}
.luna-mascot::after{content:"";position:absolute;z-index:-1;left:18%;right:18%;bottom:5px;height:18px;border-radius:50%;background:rgba(94,113,126,.14);filter:blur(11px);transform:scaleX(.9);animation:lunaShadow 4.8s ease-in-out infinite}
.luna-mascot.is-awake>img{animation:lunaWake 900ms var(--motion-spring) both!important}
.luna-mascot.is-curious>img{animation:lunaCurious 680ms var(--motion-spring) both!important}
.luna-mascot.is-listening>img{animation:lunaListen 900ms var(--motion-spring) both!important}
.luna-mascot.is-sleepy>img{animation:lunaSleepy 1200ms var(--motion-spring) both!important}
@keyframes lunaSleep{0%,100%{transform:translate3d(0,0,0) scale(1)}45%{transform:translate3d(0,-1.5px,0) scale(1.012,1.02)}55%{transform:translate3d(0,-1.5px,0) scale(1.012,1.02)}}
@keyframes lunaShadow{0%,100%{opacity:.55;transform:scaleX(.9)}50%{opacity:.38;transform:scaleX(.82)}}
@keyframes lunaWake{0%{transform:scale(1) translateY(0)}30%{transform:scale(1.055,.965) translateY(2px) rotate(-1deg)}60%{transform:scale(.985,1.04) translateY(-7px) rotate(1.5deg)}100%{transform:scale(1) translateY(0) rotate(0)}}
@keyframes lunaCurious{0%{transform:rotate(0) translateY(0)}35%{transform:rotate(-4deg) translate(-2px,-3px) scale(1.02)}70%{transform:rotate(2deg) translate(1px,-1px)}100%{transform:rotate(0) translateY(0)}}
@keyframes lunaListen{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-5px) scale(1.025)}60%{transform:translateY(-3px) scale(1.015) rotate(.8deg)}100%{transform:translateY(0) scale(1)}}
@keyframes lunaSleepy{0%{transform:translateY(0) scale(1)}30%{transform:translateY(2px) scale(.985,1.015)}70%{transform:translateY(1px) scale(1.008,.992)}100%{transform:translateY(0) scale(1)}}

.mascot-symbol{opacity:.68;transition:opacity var(--motion-ui) ease,transform var(--motion-ui) var(--motion-spring)}
.luna-mascot.is-awake .mascot-symbol,.luna-mascot.is-curious .mascot-symbol{opacity:1}
.luna-mascot.is-awake .ms1{animation:lunaSpark 720ms var(--motion-spring) both}
@keyframes lunaSpark{0%{opacity:0;transform:scale(.2) rotate(-30deg)}55%{opacity:1;transform:scale(1.28) rotate(12deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* Staged page entrance: spatially tiny movements so nothing jumps. */
body.luna-boot .topbar{animation:topbarArrive 620ms var(--motion-spring) both}
body.luna-boot .welcome .luna-mascot{animation:heroMascotArrive 760ms 90ms var(--motion-spring) both}
body.luna-boot .welcome h1{animation:heroTextArrive 650ms 180ms var(--motion-spring) both}
body.luna-boot .welcome p{animation:heroTextArrive 650ms 250ms var(--motion-spring) both}
body.luna-boot .composer-wrap{animation:composerArrive 680ms 220ms var(--motion-spring) both}
@keyframes topbarArrive{from{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.985)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes heroMascotArrive{from{opacity:0;transform:translateY(14px) scale(.9);filter:blur(6px)}to{opacity:1;transform:translateY(0) scale(1);filter:none}}
@keyframes heroTextArrive{from{opacity:0;transform:translateY(9px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:none}}
@keyframes composerArrive{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.985)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

/* Micro-interactions */
.icon-btn,.profile,.attach,.send,.new-chat,.settings-save,.account-pop button,.history-item,.settings-tabs button,.memory-add button{transition:transform var(--motion-fast) var(--motion-spring),background-color var(--motion-ui) ease,box-shadow var(--motion-ui) ease,opacity var(--motion-ui) ease}
.icon-btn:hover,.attach:hover{transform:translateY(-1px) scale(1.035)}
.icon-btn:active,.attach:active,.profile:active,.new-chat:active,.settings-save:active,.memory-add button:active{transform:scale(.94)}
.profile:hover{transform:translateY(-1px) scale(1.045);box-shadow:0 10px 24px rgba(17,20,24,.2)}
.send.ready{animation:sendReady 340ms var(--motion-spring) both}
@keyframes sendReady{0%{transform:scale(.86)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.composer{will-change:transform;transition:box-shadow var(--motion-ui) var(--motion-ease),transform var(--motion-ui) var(--motion-spring),background-color var(--motion-ui) ease}
.composer.is-typing{transform:translateY(-2px);box-shadow:0 22px 65px rgba(65,83,96,.15),inset 0 1px rgba(255,255,255,.95)}
.composer.is-sending{animation:composerSend 460ms var(--motion-spring)}
@keyframes composerSend{0%,100%{transform:translateY(-2px) scale(1)}45%{transform:translateY(-3px) scale(.994)}}
.drawer.open{animation:drawerSettle 520ms var(--motion-spring) both}
@keyframes drawerSettle{0%{transform:translateX(calc(-100% - 30px))}72%{transform:translateX(5px)}100%{transform:translateX(0)}}
.settings:not([hidden]){animation:settingsArrive 460ms var(--motion-spring) both}
@keyframes settingsArrive{from{opacity:0;transform:translateY(14px) scale(.975);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.settings-pane.active{animation:paneArrive 300ms var(--motion-spring) both}
@keyframes paneArrive{from{opacity:0;transform:translateX(7px)}to{opacity:1;transform:none}}
.message.ai .name{display:inline-block;animation:nameNod 420ms var(--motion-spring) both}
@keyframes nameNod{from{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:none}}

/* Pointer parallax is deliberately capped to a few CSS pixels. */
.luna-mascot{--mx:0px;--my:0px}
.luna-mascot:not(.is-awake):not(.is-curious):not(.is-listening):not(.is-sleepy){transform:translate3d(var(--mx),var(--my),0)}

@media(max-width:600px){
 .luna-logo-link{width:94px}.luna-logo-link img{max-width:74px!important;max-height:23px!important}
 .luna-mascot{width:108px!important;height:80px!important;max-width:108px!important;max-height:80px!important}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
 .aurora i{transform:none!important}
}
.reduce-luna-motion .luna-mascot>img,.reduce-luna-motion .luna-mascot::after{animation:none!important}


/* =========================================================
   LUNA v0.9.2 — LIVING MASCOT
   Motion architecture: 120–180ms micro / 420–900ms state /
   3.8–5.4s ambient. Transform-only where possible.
   ========================================================= */
#lunaMascot{
  --look-x:0px; --look-y:0px;
  transform:translate3d(var(--cat-x,0),var(--cat-y,0),0);
  contain:layout paint;
}
#lunaMascot>img{
  transform-origin:52% 74%;
  backface-visibility:hidden;
}
#lunaMascot .cat-eyes{
  position:absolute; z-index:5; left:22%; top:48%;
  width:38%; height:25%; opacity:0; pointer-events:none;
  transform:translate3d(var(--look-x),var(--look-y),0);
  transition:opacity 150ms ease,transform 180ms cubic-bezier(.2,.8,.2,1);
}
#lunaMascot .cat-eyes i{
  position:absolute; top:38%; width:7px; height:9px;
  border-radius:50%; background:#f7fbff;
  box-shadow:0 0 0 3px rgba(10,12,14,.92),0 0 10px rgba(255,255,255,.35);
  transform:scaleY(.15);
}
#lunaMascot .cat-eyes i:first-child{left:24%}
#lunaMascot .cat-eyes i:last-child{right:18%}
#lunaMascot:not(.is-sleeping) .cat-eyes{opacity:.96}
#lunaMascot:not(.is-sleeping) .cat-eyes i{animation:lunaEyesOpen 420ms cubic-bezier(.2,.9,.2,1) forwards}
#lunaMascot.is-thinking .cat-eyes i{animation:lunaBlink 3.2s ease-in-out infinite}
#lunaMascot.is-happy .cat-eyes i{transform:scaleY(.35);border-radius:50% 50% 65% 65%}
#lunaMascot.is-error .cat-eyes i{opacity:.72}

#lunaMascot.is-sleeping>img{animation:lunaDeepSleep 4.9s ease-in-out infinite!important}
#lunaMascot.is-waking>img{animation:lunaWakeUp 760ms cubic-bezier(.16,1.35,.32,1) both!important}
#lunaMascot.is-listening>img{animation:lunaListen 2.8s ease-in-out infinite!important}
#lunaMascot.is-typing>img{animation:lunaTyping 1.15s ease-in-out infinite!important}
#lunaMascot.is-sending>img{animation:lunaSend 620ms cubic-bezier(.16,1.3,.3,1) both!important}
#lunaMascot.is-thinking>img{animation:lunaThinkCat 1.8s ease-in-out infinite!important}
#lunaMascot.is-happy>img{animation:lunaHappy 900ms cubic-bezier(.16,1.4,.3,1) both!important}
#lunaMascot.is-error>img{animation:lunaOops 560ms cubic-bezier(.36,.07,.19,.97) both!important}
#lunaMascot.is-curious>img{animation:lunaCurious2 900ms cubic-bezier(.16,1.25,.3,1) both!important}

#lunaMascot.is-thinking .mascot-halo{
  opacity:1; transform:translate(-50%,-50%) scale(1.16);
  animation:lunaHaloThink 1.5s ease-in-out infinite;
}
#lunaMascot.is-happy .mascot-halo{opacity:1;animation:lunaHaloHappy 900ms ease-out both}
#lunaMascot.is-error .mascot-halo{opacity:.25}
#lunaMascot.is-sleeping .mascot-symbol{opacity:.25}
#lunaMascot.is-thinking .mascot-symbol{opacity:1;animation:lunaOrbit 1.9s ease-in-out infinite}
#lunaMascot.is-thinking .ms2{animation-delay:-.63s}
#lunaMascot.is-thinking .ms3{animation-delay:-1.26s}
#lunaMascot.is-happy .mascot-symbol{opacity:1;animation:lunaConfetti 820ms cubic-bezier(.16,1.3,.3,1) both}
#lunaMascot.is-happy .ms2{animation-delay:80ms}
#lunaMascot.is-happy .ms3{animation-delay:150ms}
#lunaMascot.is-sending .mascot-symbol{animation:lunaWhoosh 620ms ease-out both}
#lunaMascot.is-error .mascot-symbol{animation:lunaSymbolOops 560ms ease both}

#lunaMascot.is-sleeping .sleep-note{display:block}
#lunaMascot:not(.is-sleeping) .sleep-note{display:none!important}

.composer:focus-within{transform:translateX(-50%) translateY(-2px);transition:transform 180ms cubic-bezier(.2,.8,.2,1),box-shadow 220ms ease}
.composer.is-typing{box-shadow:0 18px 48px rgba(76,95,110,.14),inset 0 0 0 1px rgba(255,255,255,.82)}
.send.ready{animation:lunaSendReady 420ms cubic-bezier(.16,1.3,.3,1) both}
.message.ai:last-child .thinking-wrap{animation:lunaThinkingIn 300ms cubic-bezier(.2,.8,.2,1) both}

@keyframes lunaEyesOpen{0%{transform:scaleY(.08)}65%{transform:scaleY(1.18)}100%{transform:scaleY(1)}}
@keyframes lunaBlink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}}
@keyframes lunaDeepSleep{0%,100%{transform:translateY(0) scale(1)}48%{transform:translateY(1.5px) scale(1.012,.985)}54%{transform:translateY(-.5px) scale(.997,1.012)}}
@keyframes lunaWakeUp{0%{transform:translateY(1px) scale(1.02,.98)}32%{transform:translateY(-8px) scale(.95,1.09) rotate(-2deg)}58%{transform:translateY(1px) scale(1.06,.95) rotate(1.5deg)}78%{transform:translateY(-3px) scale(.99,1.03)}100%{transform:none}}
@keyframes lunaListen{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-2px) rotate(-.7deg)}55%{transform:translateY(-2px) rotate(.7deg)}}
@keyframes lunaTyping{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-2.5px) rotate(.45deg)}}
@keyframes lunaSend{0%{transform:translateY(0) scale(1)}28%{transform:translateY(3px) scale(1.06,.94)}60%{transform:translateY(-12px) scale(.94,1.08) rotate(2deg)}100%{transform:translateY(0) scale(1)}}
@keyframes lunaThinkCat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes lunaHappy{0%{transform:scale(1)}28%{transform:translateY(-8px) scale(.96,1.08) rotate(-2deg)}52%{transform:translateY(1px) scale(1.08,.94) rotate(2deg)}72%{transform:translateY(-4px) rotate(-1deg)}100%{transform:none}}
@keyframes lunaOops{0%,100%{transform:translateX(0) rotate(0)}18%{transform:translateX(-4px) rotate(-2deg)}36%{transform:translateX(4px) rotate(2deg)}54%{transform:translateX(-3px) rotate(-1.2deg)}72%{transform:translateX(2px) rotate(.8deg)}}
@keyframes lunaCurious2{0%{transform:none}38%{transform:translate(-2px,-3px) rotate(-4deg) scale(1.02)}70%{transform:translate(1px,-1px) rotate(1.5deg)}100%{transform:none}}
@keyframes lunaHaloThink{50%{opacity:.62;transform:translate(-50%,-50%) scale(.98)}}
@keyframes lunaHaloHappy{0%{transform:translate(-50%,-50%) scale(.75);opacity:.3}55%{transform:translate(-50%,-50%) scale(1.35);opacity:1}100%{transform:translate(-50%,-50%) scale(1.05);opacity:.7}}
@keyframes lunaOrbit{0%,100%{transform:translate(0,0) scale(.8);opacity:.45}50%{transform:translate(4px,-8px) scale(1.18);opacity:1}}
@keyframes lunaConfetti{0%{transform:translateY(4px) scale(.3);opacity:0}55%{transform:translateY(-10px) scale(1.35) rotate(15deg);opacity:1}100%{transform:translateY(-4px) scale(1);opacity:.7}}
@keyframes lunaWhoosh{0%{transform:translateX(-2px) scale(.5);opacity:.3}55%{transform:translate(8px,-6px) scale(1.25);opacity:1}100%{transform:translate(12px,-3px) scale(.7);opacity:0}}
@keyframes lunaSymbolOops{35%{transform:rotate(12deg) scale(.85);opacity:.45}}
@keyframes lunaSendReady{0%{transform:scale(.82)}62%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes lunaThinkingIn{from{opacity:0;transform:translateY(4px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}

@media(max-width:600px){
  #lunaMascot .cat-eyes i{width:6px;height:8px}
}
@media(prefers-reduced-motion:reduce){
  #lunaMascot *,#lunaMascot,.composer,.send,.thinking-wrap{animation:none!important;transition:none!important}
}
.reduce-luna-motion #lunaMascot *,
.reduce-luna-motion #lunaMascot,
.reduce-luna-motion .composer,
.reduce-luna-motion .send{animation:none!important;transition:none!important}

/* Luna v0.9.3 — composer centering hotfix
   The wrapper owns horizontal centering. Never translate the composer on X,
   otherwise focusing the textarea shifts the whole bar half its width left. */
.composer-wrap .composer:focus-within{
  transform:translateY(-2px) scale(1.006);
}
.composer-wrap .composer.is-typing{
  transform:translateY(-2px);
}
.composer-wrap .composer.is-sending{
  transform:none;
  animation:composerSend 460ms var(--motion-spring);
}
@media(max-width:600px){
  .composer-wrap{width:calc(100% - 20px);left:50%;right:auto;transform:translateX(-50%)}
}

/* =========================================================
   LUNA v0.9.4 — EXPRESSIVE MASCOT
   Bigger, readable motion while keeping layout stable.
   ========================================================= */
#lunaMascot{cursor:pointer;transition:filter 220ms ease,transform 260ms cubic-bezier(.16,1.25,.3,1)}
#lunaMascot:hover{filter:drop-shadow(0 20px 30px rgba(70,88,100,.20))}
#lunaMascot .sleep-note{font-size:14px;text-shadow:0 2px 8px rgba(255,255,255,.9)}
#lunaMascot .z1{right:7px;top:10px;animation:lunaZBig 2.4s ease-in-out infinite!important}
#lunaMascot .z2{right:-4px;top:-2px;animation:lunaZBig 2.4s .72s ease-in-out infinite!important}
#lunaMascot.is-waking>img{animation:lunaWakeUpBig 880ms cubic-bezier(.16,1.4,.3,1) both!important}
#lunaMascot.is-curious>img{animation:lunaCuriousBig 980ms cubic-bezier(.16,1.3,.3,1) both!important}
#lunaMascot.is-sending>img{animation:lunaSendBig 700ms cubic-bezier(.16,1.35,.3,1) both!important}
#lunaMascot.is-happy>img{animation:lunaHappyBig 1050ms cubic-bezier(.16,1.45,.3,1) both!important}
#lunaMascot.is-error>img{animation:lunaOopsBig 650ms cubic-bezier(.36,.07,.19,.97) both!important}
#lunaMascot.is-thinking>img{animation:lunaThinkBig 1.55s ease-in-out infinite!important}
#lunaMascot.is-typing>img{animation:lunaTypingBig .82s ease-in-out infinite!important}
#lunaMascot.is-listening>img{animation:lunaListenBig 2.2s ease-in-out infinite!important}
#lunaMascot:not(.is-sleeping) .cat-eyes{opacity:1}
#lunaMascot .cat-eyes i{width:8px;height:11px;box-shadow:0 0 0 3px rgba(10,12,14,.92),0 0 13px rgba(255,255,255,.65)}
#lunaMascot.is-waking .mascot-halo,#lunaMascot.is-curious .mascot-halo{opacity:1;transform:translate(-50%,-50%) scale(1.22)}
#lunaMascot.is-waking .mascot-symbol,#lunaMascot.is-curious .mascot-symbol{opacity:1;animation:lunaPopSymbol .75s cubic-bezier(.16,1.4,.3,1) both}
#lunaMascot.is-waking .ms2,#lunaMascot.is-curious .ms2{animation-delay:80ms}
#lunaMascot.is-waking .ms3,#lunaMascot.is-curious .ms3{animation-delay:150ms}
@keyframes lunaZBig{0%{opacity:0;transform:translate(0,7px) scale(.55) rotate(-8deg)}25%{opacity:.8}75%{opacity:.45}100%{opacity:0;transform:translate(12px,-16px) scale(1.25) rotate(7deg)}}
@keyframes lunaWakeUpBig{0%{transform:translateY(2px) scale(1.04,.96)}24%{transform:translateY(5px) scale(1.12,.88)}52%{transform:translateY(-16px) scale(.90,1.14) rotate(-4deg)}72%{transform:translateY(2px) scale(1.10,.92) rotate(3deg)}88%{transform:translateY(-5px) scale(.98,1.04) rotate(-1deg)}100%{transform:none}}
@keyframes lunaCuriousBig{0%,100%{transform:none}34%{transform:translate(-5px,-6px) rotate(-7deg) scale(1.055)}62%{transform:translate(3px,-3px) rotate(3deg) scale(1.025)}82%{transform:translate(-1px,-1px) rotate(-1deg)}}
@keyframes lunaSendBig{0%{transform:none}25%{transform:translateY(5px) scale(1.11,.88)}58%{transform:translate(8px,-17px) scale(.90,1.15) rotate(5deg)}80%{transform:translate(-2px,2px) scale(1.08,.94) rotate(-2deg)}100%{transform:none}}
@keyframes lunaHappyBig{0%{transform:none}22%{transform:translateY(-14px) scale(.92,1.14) rotate(-5deg)}42%{transform:translateY(2px) scale(1.12,.90) rotate(4deg)}60%{transform:translateY(-10px) scale(.96,1.08) rotate(-3deg)}78%{transform:translateY(1px) scale(1.05,.96) rotate(2deg)}100%{transform:none}}
@keyframes lunaOopsBig{0%,100%{transform:none}15%{transform:translateX(-7px) rotate(-4deg)}30%{transform:translateX(7px) rotate(4deg)}45%{transform:translateX(-6px) rotate(-3deg)}60%{transform:translateX(5px) rotate(2.5deg)}78%{transform:translateX(-2px) rotate(-1deg)}}
@keyframes lunaThinkBig{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}50%{transform:translateY(-7px) rotate(2deg) scale(1.035)}}
@keyframes lunaTypingBig{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg) scale(1.025)}}
@keyframes lunaListenBig{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-4px) rotate(-1.5deg) scale(1.02)}65%{transform:translateY(-4px) rotate(1.5deg) scale(1.02)}}
@keyframes lunaPopSymbol{0%{opacity:0;transform:scale(.2) rotate(-25deg)}60%{opacity:1;transform:translateY(-6px) scale(1.45) rotate(10deg)}100%{opacity:.9;transform:scale(1) rotate(0)}}


/* =========================================================
   LUNA v0.9.5 — ALIVE RIG
   Articulated SVG mascot: independent head, ears, eyes, body,
   paws and tail. Layout dimensions remain fixed; only transforms animate.
   ========================================================= */
#lunaMascot>img,#lunaMascot>.cat-eyes{display:none!important}
#lunaMascot{width:138px!important;height:102px!important;overflow:visible;transform:none!important}
.luna-cat-rig{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 15px rgba(36,48,58,.10))}
.luna-cat-rig path,.luna-cat-rig ellipse{fill:#090b0d;stroke:#090b0d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.luna-cat-rig .eye,.luna-cat-rig .cat-mouth{fill:none;stroke:#eaf4ff;stroke-width:3.4}
.luna-cat-rig .pupil{fill:#eaf4ff;stroke:none;opacity:0;transform-box:fill-box;transform-origin:center}
.cat-body{transform-origin:92px 69px}.cat-head{transform-origin:57px 72px}.cat-tail{transform-origin:108px 61px}.cat-paw{transform-origin:center}.cat-ear{transform-box:fill-box;transform-origin:bottom center}.cat-face{transform-origin:54px 66px}

/* Sleep is calm: body breathes while head stays heavy. */
#lunaMascot.is-sleeping .cat-body{animation:rigBreathe 4.6s ease-in-out infinite}
#lunaMascot.is-sleeping .cat-head{animation:rigSleepHead 4.6s ease-in-out infinite}
#lunaMascot.is-sleeping .cat-tail{animation:rigSleepTail 6.8s ease-in-out infinite}
#lunaMascot.is-sleeping .cat-paw{animation:rigSleepPaw 4.6s ease-in-out infinite}

/* Wake sequence: ears first, then head, spine/body, tail and paws. */
#lunaMascot.is-waking .cat-ear-left{animation:rigEarL .58s cubic-bezier(.16,1.4,.3,1) both}
#lunaMascot.is-waking .cat-ear-right{animation:rigEarR .58s .07s cubic-bezier(.16,1.4,.3,1) both}
#lunaMascot.is-waking .cat-head{animation:rigWakeHead 1.18s cubic-bezier(.16,1.15,.3,1) both}
#lunaMascot.is-waking .cat-body{animation:rigWakeBody 1.18s .08s cubic-bezier(.16,1.12,.3,1) both}
#lunaMascot.is-waking .cat-tail{animation:rigWakeTail 1.25s .16s cubic-bezier(.16,1.2,.3,1) both}
#lunaMascot.is-waking .cat-paw-front{animation:rigWakePaw 1.05s .12s cubic-bezier(.16,1.2,.3,1) both}
#lunaMascot.is-waking .pupil{animation:rigOpenEyes .34s .34s ease-out both}
#lunaMascot.is-waking .eye{animation:rigHideSleepEye .22s .32s ease both}

/* Awake states keep open pupils and hide sleeping arcs. */
#lunaMascot:is(.is-listening,.is-typing,.is-sending,.is-thinking,.is-happy,.is-error,.is-curious) .pupil{opacity:1}
#lunaMascot:is(.is-listening,.is-typing,.is-sending,.is-thinking,.is-happy,.is-error,.is-curious) .eye{opacity:0}
#lunaMascot:not(.is-sleeping) .pupil{transform:translate(var(--look-x,0),var(--look-y,0))}

#lunaMascot.is-listening .cat-head{animation:rigListenHead 2.4s ease-in-out infinite}
#lunaMascot.is-listening .cat-ear-left{animation:rigEarTwitch 2.9s ease-in-out infinite}
#lunaMascot.is-listening .cat-tail{animation:rigTailIdle 2.8s ease-in-out infinite}
#lunaMascot.is-curious .cat-head{animation:rigCuriousHead 1.05s cubic-bezier(.16,1.25,.3,1) both}
#lunaMascot.is-curious .cat-ear-right{animation:rigEarTwitch .72s ease-in-out 2}
#lunaMascot.is-curious .cat-tail{animation:rigTailCurious 1.05s ease-in-out both}
#lunaMascot.is-typing .cat-head{animation:rigTypeHead .72s ease-in-out infinite}
#lunaMascot.is-typing .cat-paw-front{animation:rigTypePaw .42s ease-in-out infinite alternate}
#lunaMascot.is-typing .cat-tail{animation:rigTailIdle 1.45s ease-in-out infinite}
#lunaMascot.is-sending .cat-body{animation:rigSendBody .72s cubic-bezier(.16,1.3,.3,1) both}
#lunaMascot.is-sending .cat-head{animation:rigSendHead .72s cubic-bezier(.16,1.3,.3,1) both}
#lunaMascot.is-sending .cat-tail{animation:rigSendTail .72s ease-out both}
#lunaMascot.is-thinking .cat-body{animation:rigThinkBody 1.7s ease-in-out infinite}
#lunaMascot.is-thinking .cat-head{animation:rigThinkHead 1.7s ease-in-out infinite}
#lunaMascot.is-thinking .cat-tail{animation:rigThinkTail 1.15s ease-in-out infinite}
#lunaMascot.is-thinking .cat-ear-left{animation:rigEarTwitch 2.2s ease-in-out infinite}
#lunaMascot.is-happy .cat-head{animation:rigHappyHead 1.05s cubic-bezier(.16,1.35,.3,1) both}
#lunaMascot.is-happy .cat-body{animation:rigHappyBody 1.05s cubic-bezier(.16,1.35,.3,1) both}
#lunaMascot.is-happy .cat-tail{animation:rigHappyTail .38s ease-in-out 3}
#lunaMascot.is-error .cat-head{animation:rigErrorHead .62s ease both}
#lunaMascot.is-error .cat-ear-left,#lunaMascot.is-error .cat-ear-right{animation:rigErrorEar .62s ease both}
#lunaMascot.is-error .cat-tail{animation:rigErrorTail .62s ease both}

@keyframes rigBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025,.975) translateY(1px)}}
@keyframes rigSleepHead{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-1deg) translateY(1px)}}
@keyframes rigSleepTail{0%,82%,100%{transform:rotate(0)}90%{transform:rotate(3deg)}}
@keyframes rigSleepPaw{50%{transform:translateY(1px)}}
@keyframes rigEarL{0%{transform:rotate(0)}45%{transform:rotate(-16deg) scaleY(1.08)}100%{transform:rotate(-4deg)}}
@keyframes rigEarR{0%{transform:rotate(0)}45%{transform:rotate(15deg) scaleY(1.1)}100%{transform:rotate(3deg)}}
@keyframes rigWakeHead{0%{transform:translateY(0) rotate(0)}28%{transform:translateY(2px) rotate(-3deg)}58%{transform:translate(-3px,-18px) rotate(-8deg)}78%{transform:translate(-1px,-13px) rotate(3deg)}100%{transform:translate(0,-11px) rotate(0)}}
@keyframes rigWakeBody{0%{transform:scale(1)}35%{transform:scale(1.04,.94) translateY(2px)}70%{transform:scale(.96,1.09) translateY(-5px)}100%{transform:scale(.98,1.05) translateY(-3px)}}
@keyframes rigWakeTail{0%{transform:rotate(0)}35%{transform:rotate(-8deg)}62%{transform:rotate(14deg)}82%{transform:rotate(-5deg)}100%{transform:rotate(4deg)}}
@keyframes rigWakePaw{0%{transform:none}55%{transform:translate(-6px,-8px) rotate(-9deg)}100%{transform:translate(-3px,-3px)}}
@keyframes rigOpenEyes{from{opacity:0;transform:scaleY(.1)}to{opacity:1;transform:scaleY(1)}}
@keyframes rigHideSleepEye{to{opacity:0}}
@keyframes rigListenHead{0%,100%{transform:translateY(-10px) rotate(0)}45%{transform:translate(-2px,-12px) rotate(-2deg)}55%{transform:translate(1px,-12px) rotate(1deg)}}
@keyframes rigEarTwitch{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-10deg)}94%{transform:rotate(6deg)}}
@keyframes rigTailIdle{0%,100%{transform:rotate(2deg)}50%{transform:rotate(10deg)}}
@keyframes rigCuriousHead{0%{transform:translateY(-10px)}45%{transform:translate(-5px,-14px) rotate(-10deg)}75%{transform:translate(-3px,-12px) rotate(-6deg)}100%{transform:translateY(-10px)}}
@keyframes rigTailCurious{40%{transform:rotate(15deg)}70%{transform:rotate(-2deg)}}
@keyframes rigTypeHead{0%,100%{transform:translateY(-10px) rotate(-1deg)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes rigTypePaw{to{transform:translate(-6px,-5px) rotate(-5deg)}}
@keyframes rigSendBody{0%{transform:scale(.98,1.05) translateY(-3px)}35%{transform:scale(1.08,.92) translateY(3px)}65%{transform:scale(.94,1.1) translateY(-9px)}100%{transform:scale(.98,1.05) translateY(-3px)}}
@keyframes rigSendHead{0%{transform:translateY(-10px)}40%{transform:translateY(-5px) rotate(3deg)}65%{transform:translate(3px,-20px) rotate(5deg)}100%{transform:translateY(-10px)}}
@keyframes rigSendTail{40%{transform:rotate(-13deg)}70%{transform:rotate(16deg)}}
@keyframes rigThinkBody{0%,100%{transform:scale(.98,1.05) translateY(-3px)}50%{transform:scale(1,1.04) translateY(-6px)}}
@keyframes rigThinkHead{0%,100%{transform:translateY(-10px) rotate(-2deg)}50%{transform:translate(2px,-15px) rotate(3deg)}}
@keyframes rigThinkTail{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(14deg)}}
@keyframes rigHappyHead{0%{transform:translateY(-10px)}28%{transform:translateY(-23px) rotate(-8deg)}50%{transform:translateY(-7px) rotate(5deg)}72%{transform:translateY(-17px) rotate(-4deg)}100%{transform:translateY(-10px)}}
@keyframes rigHappyBody{0%{transform:scale(.98,1.05) translateY(-3px)}28%{transform:scale(.92,1.12) translateY(-10px)}50%{transform:scale(1.08,.94) translateY(1px)}100%{transform:scale(.98,1.05) translateY(-3px)}}
@keyframes rigHappyTail{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(18deg)}}
@keyframes rigErrorHead{0%,100%{transform:translateY(-10px)}20%{transform:translate(-5px,-9px) rotate(-5deg)}40%{transform:translate(5px,-9px) rotate(5deg)}60%{transform:translate(-4px,-9px) rotate(-4deg)}80%{transform:translate(3px,-9px) rotate(3deg)}}
@keyframes rigErrorEar{50%{transform:scaleY(.7) rotate(10deg)}}
@keyframes rigErrorTail{50%{transform:rotate(-12deg)}}

/* Mini Luna lives with every assistant turn, including thinking. */
.message.ai .name{display:flex;align-items:center;gap:7px}
.luna-mini{width:28px;height:21px;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;vertical-align:middle}
.luna-mini svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 4px rgba(20,30,38,.09))}
.luna-mini path,.luna-mini ellipse{fill:#090b0d;stroke:#090b0d;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.luna-mini .mini-eye{fill:none;stroke:#edf6ff;stroke-width:1.7}
.luna-mini .mini-head{transform-origin:18px 25px}.luna-mini .mini-tail{transform-origin:31px 21px}.luna-mini .mini-body{transform-origin:center}
.luna-mini.is-thinking .mini-head{animation:miniThinkHead 1.15s ease-in-out infinite}
.luna-mini.is-thinking .mini-tail{animation:miniThinkTail .82s ease-in-out infinite}
.luna-mini.is-thinking .mini-body{animation:miniThinkBody 1.15s ease-in-out infinite}
.luna-mini.is-happy .mini-head{animation:miniHappy .7s cubic-bezier(.16,1.35,.3,1) both}
.luna-mini.is-happy .mini-tail{animation:miniWag .24s ease-in-out 3}
.luna-mini.is-error .mini-head{animation:miniOops .42s ease both}
@keyframes miniThinkHead{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-2px) rotate(3deg)}}
@keyframes miniThinkTail{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(14deg)}}
@keyframes miniThinkBody{50%{transform:translateY(-1px) scale(1.02)}}
@keyframes miniHappy{40%{transform:translateY(-4px) rotate(-5deg)}70%{transform:translateY(1px) rotate(3deg)}}
@keyframes miniWag{50%{transform:rotate(18deg)}}
@keyframes miniOops{20%{transform:translateX(-2px)}40%{transform:translateX(2px)}60%{transform:translateX(-2px)}80%{transform:translateX(1px)}}

/* The old whole-PNG animations must never fight the articulated rig. */
#lunaMascot.is-waking>img,#lunaMascot.is-curious>img,#lunaMascot.is-sending>img,#lunaMascot.is-happy>img,#lunaMascot.is-error>img,#lunaMascot.is-thinking>img,#lunaMascot.is-typing>img,#lunaMascot.is-listening>img{animation:none!important}
@media(max-width:600px){#lunaMascot{width:124px!important;height:92px!important}.luna-mini{width:25px;height:19px}}
@media(prefers-reduced-motion:reduce){.luna-cat-rig *,.luna-mini *{animation:none!important;transition:none!important}}
.reduce-luna-motion .luna-cat-rig *,.reduce-luna-motion .luna-mini *{animation:none!important;transition:none!important}