:root{--bg:#0b0f15;--card:rgba(17,24,39,.6);--muted:#94a3b8;--accent:#e5e7eb;--glass-stroke:hsla(0,0%,100%,.08);--glass-highlight:hsla(0,0%,100%,.06);--brand:#a78bfa;--brand-2:#22d3ee;--danger:#ef4444;--success:#10b981}#__next,body,html{height:100%}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:radial-gradient(60rem 60rem at 20% -10%,rgba(79,70,229,.22),transparent 60%),radial-gradient(60rem 60rem at 110% 20%,rgba(16,185,129,.18),transparent 60%),var(--bg);color:var(--accent)}.chat-shell{min-height:100vh;padding:24px 16px;position:relative}.glass-bg{position:fixed;inset:0;background:linear-gradient(135deg,hsla(0,0%,100%,.06),hsla(0,0%,100%,.02));pointer-events:none}.chat-container{max-width:1000px;height:88vh;margin:28px auto;background:var(--card);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 var(--glass-highlight);display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(16px) saturate(115%);-webkit-backdrop-filter:blur(16px) saturate(115%);border:1px solid var(--glass-stroke)}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid hsla(0,0%,100%,.06)}.chat-header h1{margin:0;font-size:18px;letter-spacing:.2px;font-weight:600;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}.chat-main{display:flex;flex:1 1;gap:12px}.chat-side{width:220px;padding:12px;border-right:1px solid hsla(0,0%,100%,.06);display:flex;flex-direction:column;gap:12px}.chat-side .label{font-size:12px;color:var(--muted);margin-bottom:6px}.chat-side input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid hsla(0,0%,100%,.1);background:rgba(15,23,42,.6);color:#e5e7eb;outline:none;transition:border-color .2s,box-shadow .2s,transform .05s}.chat-side input::placeholder{color:#94a3b8}.chat-side input:focus{border-color:rgba(167,139,250,.6);box-shadow:0 0 0 4px rgba(167,139,250,.12)}.chat-box{padding:16px 12px 24px;overflow:auto;display:flex;flex-direction:column;gap:10px;position:relative;scroll-behavior:smooth}.chat-box::-webkit-scrollbar{width:10px}.chat-box::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.18);border-radius:6px;border:2px solid transparent;background-clip:padding-box}.chat-box::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.28)}.chat-box::-webkit-scrollbar-track{background:transparent}.empty-state{margin:auto;text-align:center;color:var(--muted);display:grid;grid-gap:10px;gap:10px;padding-bottom:10%}.empty-bubble{display:inline-block;background:hsla(0,0%,100%,.06);padding:10px 14px;border-radius:14px;border:1px solid hsla(0,0%,100%,.08)}.empty-text{font-size:13px}.shimmer{position:relative;overflow:hidden}.shimmer:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(120deg,transparent,hsla(0,0%,100%,.18),transparent);animation:shimmer 2s infinite}@keyframes shimmer{to{transform:translateX(100%)}}.msg-row{display:grid;grid-template-columns:36px 1fr;grid-gap:8px;gap:8px;align-items:end;animation:fadeUp .25s ease both;will-change:transform,opacity}.msg-row.mine{grid-template-columns:1fr 36px}.msg-row.mine .avatar{order:2;background:linear-gradient(135deg,var(--brand),#6ee7b7);color:#0b0f15}.msg-row.theirs .avatar{background:linear-gradient(135deg,#38bdf8,#a78bfa)}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#0b0f15;border:1px solid hsla(0,0%,100%,.18);box-shadow:0 8px 24px rgba(0,0,0,.35)}.message{background:hsla(0,0%,100%,.06);padding:10px 12px;border-radius:14px;max-width:80%;border:1px solid hsla(0,0%,100%,.08);box-shadow:0 6px 20px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.msg-row.mine .message{background:linear-gradient(180deg,rgba(167,139,250,.16),rgba(34,211,238,.12));justify-self:end}.msg-row.theirs .message{background:hsla(0,0%,100%,.06);justify-self:start}.message .meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:6px}.message .meta strong{color:#fff;font-weight:600}.message .text{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;color:#eaf0f7;line-height:1.35;letter-spacing:.1px}.composer{display:flex;gap:8px;padding:12px;border-top:1px solid hsla(0,0%,100%,.06);background:linear-gradient(180deg,hsla(0,0%,100%,.02),hsla(0,0%,100%,.04))}.composer textarea{flex:1 1;padding:12px 14px;border-radius:12px;border:1px solid hsla(0,0%,100%,.12);background:rgba(15,23,42,.6);color:#e5e7eb;outline:none;transition:border-color .2s,box-shadow .2s,transform .05s}.composer input::placeholder{color:#93a3b3}.composer input:focus{border-color:rgba(34,211,238,.6);box-shadow:0 0 0 4px rgba(34,211,238,.12)}.composer button{padding:12px 16px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;cursor:pointer;font-weight:600;letter-spacing:.2px;box-shadow:0 10px 28px rgba(0,0,0,.35);transition:transform .06s ease,filter .2s ease,box-shadow .2s ease}.composer button:hover{filter:brightness(1.05);box-shadow:0 14px 34px rgba(0,0,0,.45)}.composer button:active{transform:translateY(1px)}.status{position:relative;padding-left:22px;font-weight:600;letter-spacing:.2px}.status:before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;border-radius:50%;transform:translateY(-50%);box-shadow:0 0 0 4px hsla(0,0%,100%,.06),0 0 18px currentColor}.status.online:before{background:var(--success)}.status.offline:before{background:#9ca3af}.typing-bar{position:-webkit-sticky;position:sticky;top:0;z-index:2;margin:0 auto 6px;background:rgba(15,23,42,.5);border:1px solid hsla(0,0%,100%,.08);padding:6px 10px;border-radius:10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:10px;width:max-content}.typing-text{font-size:12px;color:var(--muted)}.typing-dots{display:inline-flex;gap:4px}.typing-dots i{width:6px;height:6px;border-radius:50%;background:#cbd5e1;display:inline-block;animation:bounce 1.2s ease-in-out infinite}.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,80%,to{transform:translateY(0);opacity:.6}40%{transform:translateY(-4px);opacity:1}}.new-msg-pill{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);padding:8px 12px;border-radius:999px;border:1px solid hsla(0,0%,100%,.12);background:rgba(15,23,42,.75);color:#e5e7eb;cursor:pointer;font-size:12px;box-shadow:0 10px 28px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:filter .2s ease,transform .06s ease}.new-msg-pill:hover{filter:brightness(1.06)}.new-msg-pill:active{transform:translateX(-50%) translateY(1px)}.legend{margin-top:auto;border-top:1px dashed hsla(0,0%,100%,.08);padding-top:10px}.legend-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.dot{width:10px;height:10px;border-radius:999px;display:inline-block}.dot.me{background:var(--brand-2)}.dot.other{background:var(--brand)}.status.online{color:var(--success)}.status.offline{color:#9ca3af}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width:900px){.chat-container{height:calc(100vh - 56px)}}@media (max-width:720px){.chat-main{flex-direction:column}.chat-side{width:100%;border-right:none;border-bottom:1px solid hsla(0,0%,100%,.06)}}@media (max-width:420px){.chat-container{border-radius:12px}.chat-header h1{font-size:16px}.composer button{padding:10px 14px}}.chat-box,.chat-main{min-height:0}.chat-box{flex:1 1}.composer{position:-webkit-sticky;position:sticky;bottom:0;z-index:5}