:root{--b:#111;--g:#6b7280;--bd:#e5e7eb;--bg:#f8fafc;--card:#ffffff}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;margin:0;background:var(--bg);color:var(--b)}
.wrap{max-width:1000px;margin:0 auto;padding:24px}
h1{font-size:1.6rem;margin:0 0 .5rem}
.grid{display:grid;grid-template-columns:360px 1fr;gap:16px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card .inner{padding:16px}
label{font-weight:600;display:block;margin:.5rem 0 .3rem}
input[type=text],input[type=password],textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--bd);border-radius:10px;background:#fff}
button{padding:.6rem .9rem;border-radius:10px;border:1px solid var(--bd);background:#111;color:#fff;cursor:pointer}
button.secondary{background:#fff;color:#111}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.muted{color:var(--g);font-size:.9rem}
.alert{padding:.7rem .9rem;border-radius:10px;margin-bottom:10px}
.warn{background:#fff7ed;border:1px solid #fdba74}
.err{background:#fef2f2;border:1px solid #fecaca}
.ok{background:#f0fdf4;border:1px solid #bbf7d0}
.chat{display:flex;flex-direction:column;height:620px}
.msgs{flex:1;overflow:auto;padding:12px;background:#f3f4f6;border-top-left-radius:16px;border-top-right-radius:16px;border-bottom:1px solid var(--bd)}
.composer{display:flex;gap:8px;padding:12px}
.bubble{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:.5rem .7rem;margin:.4rem 0;max-width:80%}
.bubble .meta{font-size:.78rem;color:var(--g);margin-bottom:.2rem}
.right{align-self:flex-end;background:#eef2ff}
footer{margin-top:18px;color:var(--g);font-size:.85rem}

/* Disabled state visuals */
button[disabled]{opacity:.6;cursor:not-allowed}
textarea[disabled]{opacity:.8}

/* Dark theme */
body.dark{--b:#e5e7eb;--g:#9ca3af;--bd:#374151;--bg:#111827;--card:#0b1220}
body.dark .msgs{background:#0f172a;border-color:#374151}
body.dark .bubble{background:#0b1220;border-color:#374151}
body.dark .right{background:#1f2937}
body.dark button{background:#e5e7eb;color:#111}
body.dark button.secondary{background:#111;color:#e5e7eb;border-color:#374151}

/* Modal styles */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center}
.modal-content{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow:auto}
.modal h3{margin-top:0}

/* Typing indicator */
.typing-indicator{padding:8px 12px;background:var(--bg);border-top:1px solid var(--bd);font-size:.9rem;color:var(--g)}
.typing-indicator:empty{display:none!important}

/* Enhanced form sections */
#createSection,#joinSection,#inviteSection{margin-bottom:20px}
#createSection h3,#joinSection h3,#inviteSection h3{margin-top:0;margin-bottom:12px;font-size:1.1rem}

/* File message styles */
.bubble.file{background:var(--bg)}
.bubble.file .file-info{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.bubble.file .file-icon{font-size:1.2rem}
.bubble.file .file-name{font-weight:600;word-break:break-all}
.bubble.file .file-download{color:var(--g);text-decoration:none;font-size:.9rem}
.bubble.file .file-download:hover{text-decoration:underline}

/* Admin room list */
.admin-room{display:flex;justify-content:space-between;align-items:center;padding:12px;border:1px solid var(--bd);border-radius:8px;margin-bottom:8px;background:var(--bg)}
.admin-room .room-info{flex:1}
.admin-room .room-name{font-weight:600;margin-bottom:4px}
.admin-room .room-meta{font-size:.9rem;color:var(--g)}

/* Enhanced button states */
button:disabled{opacity:.6;cursor:not-allowed}
button:not(:disabled):hover{opacity:.9}