@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap";
:root{--bg:#f5f4ef;--bg-accent:#e7f0e8;--surface:#fffef8;--surface-2:#f0ece2;--text:#182019;--muted:#5f645d;--primary:#0f7b6b;--primary-dark:#0b5f53;--danger:#b32828;--ring:#55b8a6;--shadow:0 14px 34px #102c2224}*{box-sizing:border-box}html,body,#__next{min-height:100%;color:var(--text);background:radial-gradient(circle at 10% 20%, #0f7b6b1f, transparent 40%), radial-gradient(circle at 90% 80%, #f5a04d29, transparent 35%), var(--bg);margin:0;font-family:Space Grotesk,sans-serif}a{color:var(--primary);text-decoration:none}button,input{font:inherit}.auth-page{place-items:center;min-height:100vh;padding:2rem;display:grid}.panel{background:linear-gradient(160deg, var(--surface), var(--surface-2));box-shadow:var(--shadow);border:1px solid #18201914;border-radius:20px}.auth-form{gap:.8rem;width:min(460px,100%);padding:2rem;display:grid}.auth-form h1{margin:0;font-size:2rem}.auth-form p{color:var(--muted);margin:0 0 .6rem}.auth-form label{color:var(--muted);font-size:.92rem}.auth-form input{border:1px solid #1820192e;border-radius:10px;outline:none;padding:.75rem .9rem}.auth-form input:focus{border-color:var(--ring);box-shadow:0 0 0 3px #55b8a633}button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:12px;padding:.7rem 1rem;transition:transform .18s,background .18s}button:hover{background:var(--primary-dark);transform:translateY(-1px)}button:disabled{opacity:.55;cursor:not-allowed;transform:none}.error-text{color:var(--danger);margin:0}.auth-switch{margin-top:1rem}.loading-screen{place-items:center;min-height:100vh;font-size:1.2rem;display:grid}.chat-page{grid-template-rows:auto 1fr;gap:1rem;min-height:100vh;padding:1.2rem;display:grid}.topbar{color:#f0fff7;background:#17211c;border-radius:16px;justify-content:space-between;align-items:center;padding:1rem 1.2rem;display:flex}.topbar h1{margin:0;font-size:1.4rem}.topbar p{opacity:.75;margin:.3rem 0 0;font-family:IBM Plex Mono,monospace;font-size:.86rem}.topbar-actions{gap:.55rem;display:flex}.ghost-button{color:#f0fff7;background:0 0;border:1px solid #f0fff759}.ghost-button:hover{background:#f0fff71f}.chat-shell{grid-template-columns:1fr;min-height:0;display:grid}.room-picker{gap:1rem;padding:1.2rem;display:grid}.create-room{background:linear-gradient(145deg,#fffffff2,#e8f5f0d6);gap:.65rem;padding:1rem;display:grid}.create-room h2{margin:0;font-size:1rem}.create-room-grid{flex-wrap:wrap;gap:.6rem;display:flex}.create-room-grid input{border:1px solid #18201933;border-radius:12px;outline:none;flex:1;min-width:160px;padding:.72rem .86rem}.create-room-grid input:focus{border-color:var(--ring);box-shadow:0 0 0 3px #55b8a633}.room-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;display:grid}.room-card{color:var(--text);text-align:left;background:linear-gradient(145deg,#ecf6f3,#d9eee8);border:1px solid #1820191f;align-content:start;gap:.3rem;min-height:92px;display:grid}.room-card:hover{background:linear-gradient(145deg,#def0eb,#cae6df)}.room-card-title{font-size:1rem;font-weight:700}.room-card-subtitle{color:var(--muted);font-size:.78rem}.room-card-actions{grid-template-columns:1fr auto auto;gap:.4rem;margin-top:.5rem;display:grid}.room-card-actions input{border:1px solid #18201933;border-radius:10px;padding:.5rem .62rem}.danger-button{background:#9f1f1f}.danger-button:hover{background:#7d1717}.sidebar,.chat-main{min-height:0}.sidebar{flex-direction:column;gap:.8rem;padding:1rem;display:flex}.sidebar h2{margin:0}.new-room-form{grid-template-columns:1fr auto;gap:.5rem;display:grid}.new-room-form input{border:1px solid #18201926;border-radius:10px;width:100%;padding:.65rem}.room-list{gap:.4rem;margin:0;padding:0;list-style:none;display:grid;overflow:auto}.room-list button{text-align:left;width:100%;color:var(--text);background:#ecf6f3}.room-list button.active{background:var(--primary);color:#fff}.chat-main{grid-template-rows:auto 1fr auto;display:grid;overflow:hidden}.chat-header{border-bottom:1px solid #1820191a;justify-content:space-between;align-items:center;padding:1rem;display:flex}.chat-header h2{margin:0}.presence{color:var(--muted);font-size:.85rem}.messages{gap:.8rem;padding:1rem;display:grid;overflow:auto}.bubble{border-radius:14px;max-width:75%;padding:.7rem .9rem;animation:.25s appear}@keyframes appear{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.bubble.mine{background:var(--primary);color:#fff;justify-self:end}.bubble.other{background:#ebe9dd;justify-self:start}.bubble p{margin:.3rem 0 0}.bubble-meta{justify-content:space-between;align-items:center;gap:.6rem;font-family:IBM Plex Mono,monospace;font-size:.74rem;display:flex}.composer{border-top:1px solid #1820191a;padding:.8rem 1rem 1rem}.typing{min-height:1.1rem;color:var(--muted);margin-bottom:.4rem;font-size:.85rem}.composer form{grid-template-columns:1fr auto;gap:.5rem;display:grid}.composer input{border:1px solid #18201929;border-radius:12px;padding:.72rem .9rem}.guide-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;background:#0f16138f;place-items:center;animation:.24s fade-overlay;display:grid;position:fixed;inset:0}.guide-card{gap:1rem;width:min(560px,100vw - 2rem);padding:1.2rem;animation:.3s float-card;display:grid}.guide-head{justify-content:space-between;align-items:center;display:flex}.guide-head h2{margin:0}.guide-progress{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;display:grid}.guide-dot{background:#18201933;border-radius:999px;height:6px}.guide-dot.active{background:var(--primary)}.guide-step{background:#ffffff80;border:1px solid #18201914;border-radius:14px;gap:.5rem;padding:1rem;animation:.28s step-in;display:grid}.guide-label{color:var(--muted);margin:0;font-family:IBM Plex Mono,monospace;font-size:.82rem}.guide-step h3,.guide-step p{margin:0}.guide-actions{justify-content:space-between;align-items:center;display:flex}@keyframes fade-overlay{0%{opacity:0}to{opacity:1}}@keyframes float-card{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes step-in{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@media (max-width:960px){.sidebar{max-height:280px}.bubble{max-width:90%}}