*{box-sizing:border-box}
:root{--green:#8b5cf6;--green-dark:#a78bfa;--mint:#3c2c62;--bg:#0b1024;--card:#151b35;--text:#f4f3ff;--muted:#a7aecb;--line:#2b3358}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;min-height:100vh}
.topbar{background:var(--green);color:white;display:flex;align-items:center;gap:12px;padding:13px max(16px,env(safe-area-inset-right)) 13px max(16px,env(safe-area-inset-left));box-shadow:0 2px 8px #0001}
.brand-mark{width:43px;height:43px;border-radius:50%;background:#ffffff22;border:1px solid #ffffff66;display:grid;place-items:center;font-size:26px;font-weight:800}
.brand-copy h1{font-size:17px;margin:0;font-weight:750}.brand-copy p{font-size:12px;margin:2px 0 0;color:#e1fff2}
.icon-btn{margin-inline-start:auto;border:0;background:#ffffff22;color:inherit;border-radius:12px;width:42px;height:42px;font-size:23px;cursor:pointer}
main{max-width:1100px;margin:22px auto;padding:0 14px;min-height:calc(100vh - 140px)}
.auth-card{max-width:440px;margin:40px auto;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 10px 30px #1231}
.welcome-icon{margin:auto;width:64px;height:64px;display:grid;place-items:center;border-radius:22px;background:#e1f6eb;color:var(--green);font-size:34px}
h2{font-size:21px;margin:16px 0 8px}.auth-card h2{text-align:center}.muted{color:var(--muted)}.auth-card>.muted{text-align:center;font-size:14px;line-height:1.6}
label{display:block;font-size:13px;font-weight:650;margin:15px 0 7px}
input:not([type=file]){font:inherit;width:100%;border:1px solid #d5dfda;border-radius:12px;padding:13px 14px;background:#fbfdfc;outline:none}
input:focus{border-color:var(--green);box-shadow:0 0 0 3px #087f5b1a}
.primary-btn,.send-btn{border:0;background:var(--green);color:#fff;border-radius:12px;font:inherit;font-weight:700;padding:13px 16px;cursor:pointer}
.primary-btn{width:100%;margin-top:20px}.primary-btn:disabled{opacity:.6}
.link-btn{display:block;margin:15px auto 0;border:0;background:none;color:var(--green);font:inherit;font-weight:650;cursor:pointer}.tiny{font-size:11px;text-align:center;margin-top:18px}
.app-layout{display:grid;grid-template-columns:330px minmax(0,1fr);min-height:68vh;background:white;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 8px 25px #1231}
.sidebar{border-left:1px solid var(--line);padding:18px;min-width:0}.profile-row,.chat-header{display:flex;align-items:center;gap:11px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.avatar{width:43px;height:43px;flex:0 0 43px;border-radius:50%;display:grid;place-items:center;background:#d9f2e5;color:var(--green-dark);font-size:19px;font-weight:750}
.profile-info{min-width:0;display:flex;flex-direction:column;gap:4px}.profile-info strong{font-size:14px;overflow:hidden;text-overflow:ellipsis}.profile-info small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.section-heading h2{font-size:16px;margin:0}.online-dot{width:9px;height:9px;background:#20b56d;border-radius:50%}.small{font-size:12px}
.users-list{display:flex;flex-direction:column;gap:5px;margin-top:12px}.user-item{display:flex;gap:10px;align-items:center;text-align:right;border:0;border-radius:13px;background:white;padding:10px;cursor:pointer;color:inherit}.user-item:hover,.user-item.selected{background:#eaf8f0}.user-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.user-copy strong{font-size:13px}.user-copy small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.chat-panel{min-width:0;display:flex;flex-direction:column;position:relative;background:#f8faf9}.chat-empty{flex:1;min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px}.empty-illustration{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:#e3f5eb;color:var(--green);font-size:48px}.chat-empty p{max-width:300px;color:var(--muted);line-height:1.7;font-size:14px}
.chat-active{display:flex;flex-direction:column;min-height:68vh;height:100%}.chat-header{padding:13px 16px;background:#fff}.chat-header .profile-info{flex:1}
.messages{padding:18px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1;min-height:300px;max-height:calc(100vh - 290px);background-color:#f5f8f6;background-image:radial-gradient(#dfe9e3 0.7px,transparent 0.7px);background-size:15px 15px}
.message{max-width:min(82%,430px);padding:9px 11px 6px;border-radius:14px;box-shadow:0 1px 2px #0001;overflow-wrap:anywhere}.message.mine{align-self:flex-start;background:var(--mint);border-top-right-radius:4px}.message.theirs{align-self:flex-end;background:white;border-top-left-radius:4px}.message-text{white-space:pre-wrap;line-height:1.55;font-size:14px}.message-meta{font-size:10px;color:#75837c;text-align:left;margin-top:4px}.message-image{display:block;max-width:100%;max-height:280px;border-radius:9px}.message audio{width:min(250px,65vw);height:38px}
.composer-tools{display:flex;align-items:center;gap:10px;padding:7px 14px 0;background:#fff}.attach-btn{display:inline-flex;align-items:center;justify-content:center;border:0;background:#eef6f1;color:var(--green);border-radius:12px;width:42px;height:38px;font-size:21px;cursor:pointer;margin:0}.recording{background:#ffe5e5;color:#b42318;animation:pulse 1s infinite}.record-status{font-size:11px;color:#b42318}
.composer{display:flex;gap:9px;align-items:center;padding:9px 14px 14px;background:#fff}.composer input{border-radius:24px!important;background:#f4f7f5!important}.send-btn{width:44px;height:44px;border-radius:50%;font-size:20px;padding:0;flex:0 0 44px}
.empty-state{text-align:center;padding:24px 8px;color:var(--muted);font-size:12px;line-height:1.8}
.notice{max-width:700px;margin:0 auto 15px;padding:14px 16px;background:#fff5d8;border:1px solid #f1d88c;border-radius:14px;color:#6b4e00;font-size:13px;line-height:1.6}.notice p{margin:5px 0 0}.notice code{direction:ltr;display:inline-block}
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:#183c30;color:white;padding:12px 17px;border-radius:12px;max-width:calc(100vw - 28px);font-size:13px;box-shadow:0 6px 22px #0003;opacity:0;pointer-events:none;transition:.2s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}
footer{display:flex;justify-content:space-between;max-width:1100px;margin:0 auto;padding:12px 18px 24px;color:#87928d;font-size:11px}
.hidden{display:none!important}.mobile-only{display:none}
@keyframes pulse{50%{opacity:.6}}
@media(max-width:720px){main{margin:12px auto;padding:0 8px}.auth-card{margin:20px auto;padding:22px 18px}.app-layout{grid-template-columns:1fr;min-height:70vh;border-radius:16px}.sidebar{border-left:0;padding:14px}.sidebar .section-heading{margin-top:14px}.users-list{max-height:40vh;overflow-y:auto}.chat-panel{display:none}.app-layout.chat-open .sidebar{display:none}.app-layout.chat-open .chat-panel{display:flex;min-height:70vh}.chat-active{min-height:70vh}.chat-empty{min-height:300px}.messages{max-height:none;min-height:250px}.mobile-only{display:block;margin:0;width:36px;height:36px;background:#eef6f1;color:var(--green)}footer{padding-inline:12px}}

/* Dark navy and purple theme */
body{background:radial-gradient(ellipse at top,#20234a 0%,#0b1024 55%);color:var(--text)}
.topbar{background:linear-gradient(110deg,#11152e,#34205f 70%,#6d3fc0);box-shadow:0 8px 28px #0005}
.auth-card,.app-layout{background:var(--card);border-color:var(--line);box-shadow:0 14px 40px #0004}
.welcome-icon,.avatar{background:#30234f;color:#c4b5fd}
input:not([type=file]){background:#0f1530;color:#f4f3ff;border-color:#363d65}
input::placeholder{color:#8189ad}
input:focus{border-color:#a78bfa;box-shadow:0 0 0 3px #8b5cf633}
.primary-btn,.send-btn{background:linear-gradient(110deg,#7c3aed,#a855f7)}
.link-btn{color:#c4b5fd}
.sidebar,.chat-panel{background:#11172f;border-color:var(--line)}
.user-item{background:#151b35;color:var(--text)}
.user-item:hover,.user-item.selected{background:#30234f}
.chat-header,.composer-tools,.composer{background:#151b35;border-color:var(--line)}
.chat-empty p{color:var(--muted)}
.empty-illustration{background:#30234f;color:#c4b5fd}
.messages{background-color:#0d1329;background-image:radial-gradient(#293153 0.7px,transparent 0.7px)}
.message.mine{background:#493174;color:#fff}.message.theirs{background:#1d2544;color:#f4f3ff}
.message-meta{color:#b4bad3}.composer input{background:#0f1530!important}
.attach-btn{background:#30234f;color:#c4b5fd}
.notice{background:#32294a;border-color:#5e4b86;color:#e9ddff}
.toast{background:#38265b;color:#fff}
footer{color:#8d96ba}