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

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:#07070e;color:#e2e2e2;font-family:'Space Grotesk',sans-serif;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-thumb{background:#2d1b4e;border-radius:4px;}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes flicker{from{opacity:.8;transform:scale(.95)rotate(-5deg)}to{opacity:1;transform:scale(1.06)rotate(5deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 20px rgba(168,85,247,.4)}50%{box-shadow:0 0 55px rgba(168,85,247,.85)}}
@keyframes dot-bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-7px);opacity:1}}
@keyframes msg-pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes particle{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-60px) scale(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes slide-in{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}

.fire{display:inline-block;animation:flicker .8s ease-in-out infinite alternate;}

/* NAVBAR */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:.85rem clamp(1rem,3vw,2.5rem);border-bottom:1px solid #18182a;background:rgba(7,7,14,.97);backdrop-filter:blur(16px);position:sticky;top:0;z-index:500;}
.navbar-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:clamp(.8rem,.9rem + .2vw,.95rem);letter-spacing:.06em;color:#fff;}
.logo-icon{width:30px;height:30px;background:#1a0a2e;border:1px solid #7c3aed;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#a78bfa;font-weight:800;flex-shrink:0;}
.navbar-links{display:flex;gap:clamp(.8rem,2vw,2rem);list-style:none;}
.navbar-links a{color:#9ca3af;font-size:clamp(.75rem,.85rem + .1vw,.9rem);transition:color .2s;}
.navbar-links a:hover{color:#fff;}

/* HERO */
.hero{display:grid;grid-template-columns:200px 1fr 250px;gap:1.5rem;min-height:90vh;padding:2.5rem clamp(1rem,3vw,2.5rem);align-items:start;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(124,58,237,.14) 0%,transparent 65%);pointer-events:none;}

.hero-pot{display:flex;align-items:center;justify-content:center;padding-top:2.5rem;animation:fadeUp .8s ease both;}
.pot-wrap{width:clamp(140px,18vw,200px);height:clamp(140px,18vw,200px);border-radius:16px;border:1px solid #2d1b4e;display:flex;align-items:center;justify-content:center;font-size:clamp(3.5rem,6vw,5rem);position:relative;background:radial-gradient(ellipse at center,#1a0535 0%,#07070e 70%);animation:float 4s ease-in-out infinite;}
.pot-glow{position:absolute;inset:-30px;background:radial-gradient(ellipse,rgba(168,85,247,.22) 0%,transparent 70%);pointer-events:none;}

.hero-center{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:1.5rem;}
.version-badge{display:inline-flex;align-items:center;gap:8px;background:#111120;border:1px solid #2d2d3d;border-radius:100px;padding:.32rem .9rem;font-size:clamp(.58rem,.65rem + .1vw,.72rem);font-family:'Space Mono',monospace;letter-spacing:.12em;color:#9ca3af;margin-bottom:1.2rem;animation:fadeUp .6s ease both;}
.version-dot{width:7px;height:7px;background:#a855f7;border-radius:50%;animation:blink 2s infinite;}
.hero-title{font-size:clamp(2.8rem,6vw,5.5rem);font-weight:900;line-height:.9;letter-spacing:-.02em;color:#fff;margin-bottom:.3rem;animation:fadeUp .6s .1s ease both;}
.hero-title .purple{color:#a855f7;}
.hero-sub{font-size:clamp(.6rem,.7rem + .1vw,.75rem);font-family:'Space Mono',monospace;letter-spacing:.16em;color:#6b7280;margin:.7rem 0 1rem;line-height:1.7;animation:fadeUp .6s .2s ease both;}
.hero-sub .pink{color:#ec4899;}
.hero-desc{color:#9ca3af;font-size:clamp(.82rem,.9rem + .1vw,.96rem);line-height:1.65;max-width:380px;margin-bottom:1.8rem;animation:fadeUp .6s .3s ease both;}
.btn-primary{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;padding:clamp(.7rem,.85rem + .2vw,1rem) clamp(1.4rem,2rem + .5vw,2.2rem);border-radius:100px;font-family:'Space Grotesk',sans-serif;font-size:clamp(.8rem,.88rem + .1vw,.95rem);font-weight:700;letter-spacing:.08em;cursor:pointer;display:inline-flex;align-items:center;gap:10px;box-shadow:0 0 40px rgba(168,85,247,.45);animation:fadeUp .6s .4s ease both,glow-pulse 3s 1s infinite;transition:transform .2s;}
.btn-primary:hover{transform:scale(1.05);}
.hero-badges{display:flex;gap:.9rem;margin-top:1.2rem;font-size:clamp(.58rem,.65rem + .1vw,.72rem);font-family:'Space Mono',monospace;letter-spacing:.1em;color:#6b7280;align-items:center;animation:fadeUp .6s .5s ease both;}
.hero-badges .sep{color:#3d3d4d;}

.hero-steps{display:flex;flex-direction:column;gap:.85rem;padding-top:1rem;animation:fadeUp .8s .2s ease both;}
.step-card{background:#111120;border:1px solid #1e1e30;border-radius:12px;padding:.9rem 1rem;display:flex;gap:.7rem;align-items:flex-start;transition:border-color .2s,transform .2s;}
.step-card:hover{border-color:#4c1d95;transform:translateX(-3px);}
.step-icon{width:34px;height:34px;background:#1a0a2e;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;}
.step-label{font-size:.58rem;font-family:'Space Mono',monospace;letter-spacing:.1em;color:#6b7280;margin-bottom:2px;}
.step-title{font-size:.82rem;font-weight:700;color:#e2e2e2;margin-bottom:3px;}
.step-desc{font-size:.72rem;color:#6b7280;line-height:1.5;}

/* MOODS STRIP landing */
.moods-section{padding:3rem clamp(1rem,3vw,2.5rem);border-top:1px solid #18182a;}
.section-eyebrow{font-size:.6rem;font-family:'Space Mono',monospace;letter-spacing:.2em;color:#7c3aed;margin-bottom:.4rem;}
.section-title{font-size:clamp(1.5rem,3.5vw,2.6rem);font-weight:900;color:#fff;margin-bottom:.3rem;}
.section-title .pink{color:#ec4899;}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.8rem;flex-wrap:wrap;gap:.8rem;}
.section-aside{font-size:.82rem;color:#6b7280;max-width:260px;text-align:right;line-height:1.5;}
.moods-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem;}
.mood-mini{background:#0f0f1c;border:1px solid #1e1e30;border-radius:14px;padding:1.2rem .8rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;cursor:pointer;transition:all .25s;overflow:hidden;position:relative;}
.mood-mini::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(168,85,247,.07),transparent);opacity:0;transition:opacity .3s;}
.mood-mini:hover{border-color:#4c1d95;transform:translateY(-5px);}
.mood-mini:hover::after{opacity:1;}
.mood-mini .num{font-size:.58rem;font-family:'Space Mono',monospace;color:#3d3d4d;align-self:flex-start;}
.mood-mini .emoji{font-size:2rem;}
.mood-mini .name{font-size:.65rem;font-weight:700;letter-spacing:.12em;color:#9ca3af;text-align:center;}

/* MANIFESTO */
.manifesto{margin:0 clamp(1rem,3vw,2.5rem) 3.5rem;background:#0e0e1a;border:1px solid #1e1e30;border-radius:20px;padding:clamp(1.5rem,3vw,3rem);}
.manifesto-eyebrow{font-size:.58rem;font-family:'Space Mono',monospace;letter-spacing:.18em;color:#ec4899;margin-bottom:.7rem;}
.manifesto-title{font-size:clamp(1.2rem,2.5vw,1.9rem);font-weight:700;color:#e2e2e2;line-height:1.3;margin-bottom:1rem;}
.manifesto-title .amber{color:#f59e0b;}
.manifesto-body{font-size:clamp(.8rem,.88rem + .1vw,.93rem);color:#9ca3af;line-height:1.75;max-width:580px;margin-bottom:1.8rem;}
.manifesto-cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;}
.cta-note{font-size:.62rem;font-family:'Space Mono',monospace;letter-spacing:.1em;color:#4b5563;}

/* FOOTER */
.footer{border-top:1px solid #18182a;padding:1.2rem clamp(1rem,3vw,2.5rem);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;}
.footer-brand{font-size:.78rem;font-weight:800;color:#6b7280;letter-spacing:.08em;}
.footer-tagline{font-size:.72rem;color:#4b5563;margin-top:2px;}
.footer-links{display:flex;gap:1.4rem;font-size:.68rem;font-family:'Space Mono',monospace;letter-spacing:.1em;color:#6b7280;}
.footer-links a:hover{color:#e2e2e2;}

/* MOODS PAGE */
.page-header{padding:2.5rem clamp(1rem,3vw,2.5rem) 1.5rem;position:relative;}
.step-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #2d2d3d;border-radius:100px;padding:.26rem .85rem;font-size:.6rem;font-family:'Space Mono',monospace;letter-spacing:.14em;color:#9ca3af;margin-bottom:.9rem;}
.step-badge strong{color:#a855f7;}
.page-title{font-size:clamp(2rem,5vw,4rem);font-weight:900;line-height:.95;letter-spacing:-.02em;color:#fff;}
.page-title .chaos{color:#ec4899;}
.page-desc{color:#6b7280;font-size:clamp(.8rem,.88rem + .1vw,.93rem);line-height:1.6;max-width:480px;margin-top:.9rem;}
.cooking-badge{position:absolute;right:clamp(1rem,3vw,2.5rem);top:2.8rem;background:#111120;border:1px solid #2d2d3d;border-radius:14px;padding:.65rem 1rem;display:flex;align-items:center;gap:10px;}
.cooking-emojis{display:flex;gap:3px;font-size:.95rem;}
.cooking-label{font-size:.56rem;font-family:'Space Mono',monospace;letter-spacing:.1em;color:#6b7280;}
.cooking-count{font-size:1rem;font-weight:800;color:#fff;}
.cooking-count .purple{color:#a855f7;}

/* MOOD CARDS */
.moods-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:0 clamp(1rem,3vw,2.5rem) 1.5rem;}
.mood-card{border-radius:20px;padding:1.2rem;cursor:pointer;position:relative;display:flex;flex-direction:column;min-height:clamp(220px,25vw,300px);border:1.5px solid transparent;transition:all .3s ease;overflow:hidden;}
.mood-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;background:radial-gradient(ellipse at 50% 0%,rgba(168,85,247,.12),transparent 70%);}
.mood-card:hover::before,.mood-card.selected::before{opacity:1;}
.mood-card.diva        {background:radial-gradient(ellipse at 65% 35%,#3a0a38 0%,#1c0518 55%,#0e030d 100%);}
.mood-card.savage      {background:radial-gradient(ellipse at 65% 35%,#3d0a0a 0%,#1a0505 55%,#0a0303 100%);}
.mood-card.sigma       {background:radial-gradient(ellipse at 65% 35%,#0a0a3d 0%,#050518 55%,#030308 100%);}
.mood-card.indian-parents{background:radial-gradient(ellipse at 65% 35%,#2e1a05 0%,#160d03 55%,#0a0601 100%);}
.mood-card.pookie      {background:radial-gradient(ellipse at 65% 35%,#3d0a28 0%,#1e0514 55%,#0e0309 100%);}
.mood-card.iced        {background:radial-gradient(ellipse at 65% 35%,#051a3d 0%,#030d1e 55%,#02060e 100%);}
.mood-card.selected{border-color:rgba(168,85,247,.7);box-shadow:0 0 50px rgba(168,85,247,.18);}
.mood-card:not(.selected):hover{border-color:rgba(168,85,247,.35);transform:translateY(-5px);}
.card-top{display:flex;justify-content:space-between;align-items:center;}
.card-num{font-size:.58rem;font-family:'Space Mono',monospace;letter-spacing:.12em;color:rgba(255,255,255,.3);}
.danger-meter{display:flex;align-items:center;gap:5px;font-size:.58rem;font-family:'Space Mono',monospace;letter-spacing:.1em;color:rgba(255,255,255,.25);}
.danger-bars{display:flex;gap:2px;align-items:flex-end;}
.d-bar{width:4px;border-radius:2px;background:rgba(168,85,247,.85);}
.d-bar.off{background:rgba(255,255,255,.1);}
.check-badge{width:22px;height:22px;background:#7c3aed;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;margin-left:4px;animation:glow-pulse 2s infinite;}
.card-emoji{flex:1;display:flex;align-items:center;justify-content:center;font-size:clamp(3.5rem,5vw,5rem);padding:.8rem 0;transition:transform .3s;}
.mood-card:hover .card-emoji{transform:scale(1.12);}
.card-bottom{margin-top:auto;}
.card-name{font-size:clamp(1.1rem,1.5rem + .2vw,1.6rem);font-weight:900;letter-spacing:.02em;color:#fff;margin-bottom:2px;}
.card-tagline{font-size:.58rem;font-family:'Space Mono',monospace;letter-spacing:.13em;color:rgba(255,255,255,.35);}

/* PERSONALITY PANEL */
.personality-panel{margin:0 clamp(1rem,3vw,2.5rem) 1.5rem;background:#0e0e1c;border:1px solid #2a1a4a;border-radius:20px;padding:1.6rem clamp(1rem,2vw,2rem);animation:fadeUp .4s ease;}
.panel-top{display:flex;align-items:flex-start;gap:1.2rem;margin-bottom:1.2rem;flex-wrap:wrap;}
.panel-avatar{width:68px;height:68px;border-radius:14px;background:#1a0a2e;display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0;border:1px solid #2d1b4e;}
.panel-info{flex:1;min-width:200px;}
.panel-name{font-size:clamp(1.3rem,1.6rem + .2vw,1.7rem);font-weight:900;letter-spacing:.04em;color:#fff;margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.trait-badge{font-size:.58rem;font-family:'Space Mono',monospace;letter-spacing:.07em;background:#1e1e2d;border:1px solid #3d3d5d;border-radius:6px;padding:2px 8px;color:#9ca3af;font-weight:400;}
.panel-desc{color:#9ca3af;font-size:clamp(.78rem,.85rem + .1vw,.9rem);line-height:1.65;margin-bottom:.45rem;}
.panel-quote{color:#a855f7;font-style:italic;font-size:clamp(.75rem,.82rem + .1vw,.87rem);line-height:1.5;}
.panel-divider{border:none;border-top:1px solid #1e1e2d;margin:1rem 0;}
.intensity-row{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.intensity-left{flex:1;min-width:200px;}
.intensity-label{font-size:.6rem;font-family:'Space Mono',monospace;letter-spacing:.16em;color:#7c3aed;margin-bottom:.65rem;}
.roast-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;outline:none;cursor:pointer;}
.roast-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#c084fc,#7c3aed);border:2px solid #a855f7;box-shadow:0 0 12px rgba(168,85,247,.65);cursor:pointer;}
.roast-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#c084fc,#7c3aed);border:2px solid #a855f7;cursor:pointer;}
.slider-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:.58rem;font-family:'Space Mono',monospace;letter-spacing:.08em;color:rgba(255,255,255,.2);}
.intensity-right{display:flex;align-items:center;gap:1rem;flex-shrink:0;}
.intensity-val{font-size:1.8rem;font-weight:900;font-family:'Space Mono',monospace;color:#fff;white-space:nowrap;line-height:1;}
.intensity-val small{font-size:.72rem;color:#6b7280;}
.intensity-level{font-size:.58rem;font-family:'Space Mono',monospace;letter-spacing:.08em;color:#9ca3af;}
.btn-begin{background:linear-gradient(135deg,#6d28d9,#a855f7);color:#fff;border:none;padding:clamp(.7rem,.9rem,.95rem) clamp(1.2rem,1.6rem,1.8rem);border-radius:12px;font-family:'Space Grotesk',sans-serif;font-size:clamp(.76rem,.82rem,.88rem);font-weight:700;letter-spacing:.1em;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;box-shadow:0 0 30px rgba(168,85,247,.4);transition:all .2s;flex-shrink:0;}
.btn-begin:hover{transform:scale(1.05);box-shadow:0 0 50px rgba(168,85,247,.65);}

/* CHAT LAYOUT */
body.chat-page{overflow:hidden;height:100vh;}
.chat-layout{display:flex;height:100vh;overflow:hidden;position:relative;}

/* SIDEBAR */
.sidebar{width:255px;min-width:255px;background:#0a0a14;border-right:1px solid #18182a;display:flex;flex-direction:column;height:100vh;transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:200;flex-shrink:0;position:relative;}
.sidebar.collapsed{transform:translateX(-100%);}
@media(max-width:768px){
  .chat-main{margin-left:0;}
  .sidebar{position:fixed;left:0;top:0;height:100vh;}
  .sidebar.collapsed{transform:translateX(-100%);}
  .sidebar.open{
transform:translateX(0);
}
}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:190;backdrop-filter:blur(3px);}
.sidebar-overlay.show{display:block;}

.sidebar-top{padding:.9rem 1rem;border-bottom:1px solid #18182a;flex-shrink:0;}
.sidebar-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.85rem;letter-spacing:.06em;color:#fff;margin-bottom:.9rem;}
.btn-new-cook{width:100%;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;padding:.62rem 1rem;border-radius:10px;font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.06em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:box-shadow .2s;box-shadow:0 0 18px rgba(168,85,247,.3);}
.btn-new-cook:hover{box-shadow:0 0 32px rgba(168,85,247,.55);}

.sidebar-search{padding:.7rem 1rem;border-bottom:1px solid #18182a;flex-shrink:0;}
.search-wrap{position:relative;}
.search-icon{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:#4b5563;font-size:.82rem;pointer-events:none;}
.search-input{width:100%;background:#111120;border:1px solid #1e1e30;border-radius:8px;padding:.42rem .75rem .42rem 2rem;color:#9ca3af;font-family:'Space Grotesk',sans-serif;font-size:.78rem;outline:none;transition:border-color .2s;}
.search-input:focus{border-color:#4c1d95;}

.sidebar-history{flex:1;overflow-y:auto;padding:.65rem .65rem;}
.history-section-label{font-size:.54rem;font-family:'Space Mono',monospace;letter-spacing:.14em;color:#4b5563;padding:.32rem .4rem .28rem;margin-top:.4rem;}
.history-item{display:flex;align-items:center;gap:7px;padding:.52rem .62rem;border-radius:8px;cursor:pointer;transition:background .15s;border-left:2px solid transparent;}
.history-item:hover{background:#111120;}
.history-item.active{background:#111120;border-left-color:#7c3aed;}
.history-emoji{font-size:.92rem;flex-shrink:0;}
.history-text{flex:1;min-width:0;font-size:.76rem;color:#d1d5db;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-time{font-size:.56rem;font-family:'Space Mono',monospace;color:#4b5563;flex-shrink:0;}

.sidebar-bottom{padding:.7rem;border-top:1px solid #18182a;flex-shrink:0;}
.personality-section-label{font-size:.54rem;font-family:'Space Mono',monospace;letter-spacing:.14em;color:#4b5563;margin-bottom:.42rem;padding:0 .3rem;}
.personality-switcher{background:#111120;border:1px solid #1e1e30;border-radius:10px;padding:.62rem .82rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:border-color .2s;}
.personality-switcher:hover{border-color:#4c1d95;}
.personality-left{display:flex;align-items:center;gap:8px;}
.personality-emoji{font-size:1.2rem;}
.personality-name{font-size:.8rem;font-weight:700;color:#fff;letter-spacing:.04em;display:block;}
.personality-switch-label{font-size:.56rem;font-family:'Space Mono',monospace;letter-spacing:.1em;color:#6b7280;}
.personality-arrow{color:#6b7280;font-size:.72rem;}
.user-card{margin-top:.52rem;background:#111120;border:1px solid #1e1e30;border-radius:10px;padding:.62rem .82rem;display:flex;align-items:center;justify-content:space-between;}
.user-left{display:flex;align-items:center;gap:8px;}
.user-avatar{width:26px;height:26px;background:#7c3aed;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;color:#fff;}
.user-name{font-size:.78rem;font-weight:700;color:#fff;}
.user-cooks{font-size:.56rem;font-family:'Space Mono',monospace;color:#ef4444;}
.user-settings{color:#6b7280;font-size:.85rem;cursor:pointer;background:none;border:none;transition:color .2s;}
.user-settings:hover{color:#a855f7;}

/* CHAT MAIN */
.chat-main{
flex:1;
display:flex;
flex-direction:column;
overflow:hidden;
min-width:0;
transition:margin-left .35s cubic-bezier(.4,0,.2,1);
margin-left:255px;
}

/* TOPBAR */
.chat-topbar{display:flex;align-items:center;justify-content:space-between;padding:.75rem clamp(.8rem,1.5vw,1.5rem);border-bottom:1px solid #18182a;background:rgba(7,7,14,.97);flex-shrink:0;gap:.8rem;}
.topbar-left{display:flex;align-items:center;gap:.7rem;}
.btn-sidebar-toggle{width:34px;height:34px;background:#111120;border:1px solid #1e1e30;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#9ca3af;font-size:1.1rem;transition:all .2s;flex-shrink:0;}
.btn-sidebar-toggle:hover{border-color:#4c1d95;color:#a855f7;}
.active-persona{display:flex;align-items:center;gap:8px;background:#111120;border:1px solid #2d2d3d;border-radius:12px;padding:.42rem .85rem;}
.active-persona-emoji{font-size:1.25rem;}
.active-persona-name{font-size:clamp(.78rem,.88rem,.95rem);font-weight:800;letter-spacing:.04em;color:#fff;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.heat-badge{font-size:.58rem;font-family:'Space Mono',monospace;background:#1a0a2e;border:1px solid #4c1d95;border-radius:6px;padding:2px 6px;color:#a855f7;}
.active-persona-sub{font-size:clamp(.62rem,.7rem,.75rem);color:#6b7280;font-style:italic;}
.topbar-right{display:flex;align-items:center;gap:.6rem;}
.btn-upgrade{background:transparent;border:1px solid #2d2d3d;color:#9ca3af;padding:.36rem .82rem;border-radius:8px;font-family:'Space Grotesk',sans-serif;font-size:clamp(.68rem,.75rem,.8rem);font-weight:600;letter-spacing:.06em;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s;}
.btn-upgrade:hover{border-color:#7c3aed;color:#a855f7;}
.btn-icon{width:32px;height:32px;background:#111120;border:1px solid #1e1e30;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6b7280;font-size:.88rem;transition:all .2s;flex-shrink:0;}
.btn-icon:hover{border-color:#4c1d95;color:#a855f7;}

/* MESSAGES */
.chat-messages{flex:1;overflow-y:auto;padding:1.8rem clamp(1rem,4vw,4rem);display:flex;flex-direction:column;gap:.9rem;}
.session-header{display:flex;flex-direction:column;align-items:center;gap:.45rem;margin-bottom:1.2rem;}
.session-emoji{font-size:2.2rem;}
.session-label{font-size:.6rem;font-family:'Space Mono',monospace;letter-spacing:.14em;color:#6b7280;}
.session-label .purple{color:#a855f7;}
.session-sub{font-size:.76rem;color:#6b7280;font-style:italic;}

.message-wrap{display:flex;gap:9px;align-items:flex-end;animation:msg-pop .35s ease both;}
.message-wrap.user-wrap{flex-direction:row-reverse;}
.msg-avatar{width:28px;height:28px;border-radius:50%;background:#1a0a2e;border:1px solid #4c1d95;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.msg-bubble{background:#0f0f1e;border:1px solid #1e1e2d;border-radius:16px 16px 16px 4px;padding:.85rem 1.1rem;max-width:min(600px,75vw);}
.msg-bubble.user-bubble{background:#1a0a2e;border:1px solid #2d1b4e;border-radius:16px 16px 4px 16px;}
.msg-text{font-size:clamp(.82rem,.9rem,.95rem);color:#e2e2e2;line-height:1.65;}
.msg-time{font-size:.56rem;font-family:'Space Mono',monospace;letter-spacing:.08em;color:#4b5563;margin-top:5px;}

/* INPUT */
.chat-input-area{padding:.75rem clamp(1rem,4vw,4rem) .5rem;flex-shrink:0;border-top:1px solid #18182a;}
.quick-prompts{display:flex;gap:.5rem;margin-bottom:.7rem;flex-wrap:wrap;}
.quick-btn{background:#111120;border:1px solid #1e1e30;border-radius:100px;padding:.3rem .85rem;font-family:'Space Grotesk',sans-serif;font-size:clamp(.7rem,.78rem,.84rem);color:#9ca3af;cursor:pointer;transition:all .2s;white-space:nowrap;}
.quick-btn:hover{border-color:#4c1d95;color:#c084fc;background:#1a0a2e;}
.input-box{display:flex;align-items:center;gap:.7rem;background:#0f0f1e;border:1px solid #1e1e2d;border-radius:16px;padding:.65rem .65rem .65rem .9rem;transition:border-color .2s;}
.input-box:focus-within{border-color:#4c1d95;box-shadow:0 0 20px rgba(168,85,247,.1);}
.input-icon{color:#4b5563;font-size:1.05rem;cursor:pointer;flex-shrink:0;transition:color .2s;background:none;border:none;}
.input-icon:hover{color:#a855f7;}
.chat-text-input{flex:1;background:transparent;border:none;outline:none;color:#e2e2e2;font-family:'Space Grotesk',sans-serif;font-size:clamp(.84rem,.9rem,.95rem);}
.chat-text-input::placeholder{color:#4b5563;}
.btn-send{width:34px;height:34px;background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.95rem;box-shadow:0 0 14px rgba(168,85,247,.4);transition:all .2s;flex-shrink:0;}
.btn-send:hover{box-shadow:0 0 26px rgba(168,85,247,.65);transform:scale(1.08);}
.btn-send:disabled{opacity:.5;transform:none;}
.chat-disclaimer{text-align:center;font-size:.56rem;font-family:'Space Mono',monospace;letter-spacing:.12em;color:#2d2d3d;margin-top:.45rem;padding-bottom:.4rem;}

/* TYPING */
.typing-dots{display:flex;gap:4px;align-items:center;padding:.2rem 0;}
.typing-dots span{width:6px;height:6px;background:#a855f7;border-radius:50%;animation:dot-bounce 1.2s infinite ease-in-out;}
.typing-dots span:nth-child(2){animation-delay:.2s;}
.typing-dots span:nth-child(3){animation-delay:.4s;}

/* PARTICLES */
.particle{position:fixed;pointer-events:none;font-size:1.2rem;animation:particle .8s ease-out forwards;z-index:9999;}

/* RESPONSIVE */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr;}
  .hero-pot,.hero-steps{display:none;}
  .moods-strip{grid-template-columns:repeat(3,1fr);}
  .cooking-badge{display:none;}
}
@media(max-width:700px){
  .moods-grid{grid-template-columns:repeat(2,1fr);}
  .moods-strip{grid-template-columns:repeat(3,1fr);}
  .intensity-row{flex-direction:column;align-items:stretch;}
  .intensity-right{justify-content:space-between;}
  .btn-begin{width:100%;justify-content:center;}
  .chat-topbar{padding:.65rem .8rem;}
  .active-persona-sub{display:none;}
  .topbar-right .btn-upgrade{display:none;}
}
@media(max-width:480px){
  .moods-grid{grid-template-columns:1fr 1fr;}
  .moods-strip{grid-template-columns:repeat(2,1fr);}
  .panel-top{flex-direction:column;}
  .hero-title{font-size:2.6rem;}
}
.footer{
display:flex;
justify-content:center;
gap:30px;
padding:30px;
font-size:14px;
color:#888;
}

.footer a{
color:#a855f7;
text-decoration:none;
transition:0.3s;
}

.footer a:hover{
color:#d946ef;
}
/* =========================
LOGIN + PROFILE UI
========================= */

.account-strip{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin-top:28px;
margin-bottom:28px;
flex-wrap:wrap;
}

.login-btn,
.signup-btn{
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.12);
color:white;
padding:10px 18px;
border-radius:999px;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:0.3s;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}

.login-btn:hover,
.signup-btn:hover{
transform:translateY(-2px);
background:rgba(217,70,239,0.2);
border-color:rgba(217,70,239,0.5);
}

.profile-mini{
width:42px;
height:42px;
border-radius:50%;
overflow:hidden;
border:2px solid #d946ef;
box-shadow:0 0 20px rgba(217,70,239,0.35);
}

.profile-mini img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.hidden{
display:none;
}

/* =========================
SIDEBAR PROFILE
========================= */

.sidebar-top{
padding:18px;
border-bottom:1px solid rgba(255,255,255,0.06);
}

.sidebar-profile{
display:flex;
align-items:center;
gap:12px;
margin-bottom:18px;
}

.sidebar-profile img{
width:44px;
height:44px;
border-radius:50%;
object-fit:cover;
border:2px solid #d946ef;
}

.sidebar-profile h4{
margin:0;
font-size:15px;
color:white;
font-weight:700;
}

.sidebar-profile p{
margin:0;
font-size:12px;
color:#9ca3af;
}

.chat-history-list{
padding:14px;
display:flex;
flex-direction:column;
gap:10px;
overflow-y:auto;
}

.history-item{
padding:14px;
border-radius:14px;
background:rgba(255,255,255,0.05);
color:#d1d5db;
font-size:14px;
cursor:pointer;
transition:0.3s;
border:1px solid transparent;
}

.history-item:hover{
background:rgba(217,70,239,0.16);
border-color:rgba(217,70,239,0.3);
transform:translateX(2px);
}

.history-item.active{
background:rgba(217,70,239,0.2);
color:white;
border-color:rgba(217,70,239,0.45);
}

.logout-btn{
margin:16px;
padding:12px;
border-radius:14px;
background:#111827;
border:1px solid rgba(255,255,255,0.08);
color:#ff6b81;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.logout-btn:hover{
background:#1f2937;
transform:translateY(-1px);
}

/* =========================
MOBILE FIXES
========================= */

@media(max-width:768px){

.account-strip{
gap:10px;
margin-top:22px;
}

.login-btn,
.signup-btn{
padding:9px 15px;
font-size:13px;
}

.profile-mini{
width:38px;
height:38px;
}

.history-item{
font-size:13px;
padding:12px;
}

.sidebar-profile img{
width:40px;
height:40px;
}

}
/* =========================
PRO SIDEBAR
========================= */

.sidebar{
  width:280px;
height:100vh;
background:#0f0f13;
border-right:1px solid rgba(255,255,255,0.06);
display:flex;
flex-direction:column;
padding:18px;
position:fixed;
left:0;
top:0;
z-index:999;

overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;

}

.sidebar-logo{
display:flex;
align-items:center;
gap:12px;
font-size:20px;
font-weight:800;
color:white;
margin-bottom:28px;
}

.sidebar-profile{
display:flex;
align-items:center;
gap:12px;
padding:14px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.06);
border-radius:18px;
margin-bottom:18px;
}

.sidebar-profile img{
width:46px;
height:46px;
border-radius:50%;
object-fit:cover;
border:2px solid #d946ef;
}

.sidebar-profile h4{
margin:0;
font-size:15px;
color:white;
}

.sidebar-profile p{
margin:0;
font-size:12px;
color:#9ca3af;
}

.new-cook-btn{
width:100%;
padding:13px;
border:none;
border-radius:16px;
background:linear-gradient(135deg,#d946ef,#9333ea);
color:white;
font-weight:700;
font-size:14px;
cursor:pointer;
margin-bottom:18px;
transition:0.3s;
}

.new-cook-btn:hover{
transform:translateY(-2px);
}

.search-wrap{
margin-bottom:16px;
}

.search-history{
width:100%;
padding:12px 14px;
background:#16161d;
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
outline:none;
color:white;
font-size:14px;
}

.search-history::placeholder{
color:#6b7280;
}

.chat-history-list{
flex:1;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:10px;
padding-right:4px;
}

.history-item{
padding:13px;
background:rgba(255,255,255,0.04);
border-radius:14px;
font-size:14px;
color:#d1d5db;
cursor:pointer;
transition:0.3s;
border:1px solid transparent;
}

.history-item:hover{
background:rgba(217,70,239,0.12);
border-color:rgba(217,70,239,0.25);
}

.switch-mood-btn{
margin-top:18px;
display:flex;
justify-content:center;
align-items:center;
padding:12px;
border-radius:14px;
background:#18181f;
color:white;
text-decoration:none;
font-weight:600;
border:1px solid rgba(255,255,255,0.06);
transition:0.3s;
}

.switch-mood-btn:hover{
background:#22222c;
}

.logout-btn{
margin-top:12px;
padding:12px;
border:none;
border-radius:14px;
background:#1a1114;
color:#ff6b81;
font-weight:700;
cursor:pointer;
transition:0.3s;
}

.logout-btn:hover{
background:#241419;
}

/* MOBILE */

@media(max-width:768px){

.sidebar{
width:82%;
max-width:300px;
}

} 
/* FINAL SIDEBAR FIX */

.sidebar{
left:0;
top:0;
position:fixed;
}

.sidebar.collapsed{
transform:translateX(-100%);
}

.chat-main{
margin-left:280px;
width:calc(100% - 280px);
}

@media(max-width:768px){

.sidebar{
width:82%;
max-width:300px;
z-index:9999;
}

.chat-main{
margin-left:0;
width:100%;
}

.topbar-left{
width:100%;
display:flex;
align-items:center;
gap:10px;
}

.active-persona{
flex:1;
min-width:0;
overflow:hidden;
}

.active-persona-name{
font-size:13px;
}

.active-persona-sub{
font-size:11px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.quick-prompts{
overflow-x:auto;
flex-wrap:nowrap;
padding-bottom:4px;
}

.quick-btn{
flex-shrink:0;
}

.chat-input-area{
padding:10px;
}

.input-box{
gap:8px;
padding:10px;
}

.chat-text-input{
font-size:14px;
}

}
/* SIDEBAR SCROLL FIX */

.sidebar{
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:thin;
}

.sidebar::-webkit-scrollbar{
width:4px;
}

.sidebar::-webkit-scrollbar-thumb{
background:#7c3aed;
border-radius:10px;
}
/* FINAL MOBILE SIDEBAR FIX */

.sidebar{
display:flex;
flex-direction:column;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch;
}

.chat-history-list{
flex:1;
min-height:0;
overflow-y:auto;
}

@media(max-width:768px){

.sidebar{
height:100dvh;
padding-bottom:80px;
}

}
/* PERFECT CHATBAR FIX */

/* CHAT INPUT AREA */
.chat-input-area{
position:sticky;
bottom:0;
background:#07070e;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
z-index:50;
}

/* INPUT BOX */
.input-box{
display:flex;
align-items:flex-end;
gap:10px;

background:#0f0f1e;
border:1px solid #1e1e2d;
border-radius:18px;

padding:10px 12px;

min-height:58px;
max-height:180px;

overflow:hidden;
}

/* TEXT INPUT */
.chat-text-input{
flex:1;

background:transparent;
border:none;
outline:none;

color:#e2e2e2;
font-family:'Space Grotesk',sans-serif;
font-size:16px;
line-height:1.5;

min-height:24px;
max-height:140px;

overflow-y:auto;
overflow-x:hidden;

word-break:break-word;
white-space:pre-wrap;

resize:none;
}

/* LONG TEXT FIX */
.msg-text{
word-break:break-word;
overflow-wrap:break-word;
white-space:pre-wrap;
}

/* SEND BUTTON */
.btn-send{
flex-shrink:0;
width:42px;
height:42px;
border-radius:12px;
}

/* MOBILE KEYBOARD FIX */
@media(max-width:768px){

.chat-page{
height:100dvh;
overflow:hidden;
}

.chat-layout{
height:100dvh;
}

.chat-main{
height:100dvh;
}

.chat-messages{
padding-bottom:120px;
}

.chat-input-area{
padding-bottom:calc(10px + env(safe-area-inset-bottom));
background:#07070e;
}

.input-box{
border-radius:20px;
}

.chat-text-input{
font-size:16px;
}

}
/* ===== MIC BUTTON ===== */
#mic-btn {
  background: transparent;
  border: 1.5px solid rgba(168, 85, 247, 0.5);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #a855f7;
  transition: all 0.2s ease;
  outline: none;
  margin-left: 6px;
}

#mic-btn:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

#mic-btn.recording {
  background: rgba(168, 85, 247, 0.25);
  border-color: #a855f7;
  color: #fff;
  animation: mic-pulse 1.2s infinite;
}

@keyframes mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(168, 85, 247, 0); }
  100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}