styles.css

:root{--bg:#07111f;--panel:#0f1d31;--panel2:#142640;--line:#ffffff16;--text:#edf4ff;--muted:#9cb0cd;--blue:#3478ee}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,sans-serif}.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 15%,#174b9860,transparent 35rem),radial-gradient(circle at 85% 85%,#5726a060,transparent 35rem),var(--bg)}.auth-card{width:min(100%,445px);padding:40px 35px;text-align:center;background:#101d31e8;border:1px solid var(--line);border-radius:27px;box-shadow:0 28px 80px #0008}.signup-card{text-align:left}.app-logo{width:39px;height:39px;border-radius:12px;object-fit:cover}.app-logo.large{width:62px;height:62px;border-radius:18px}.eyebrow{margin:19px 0 5px;color:#92baff;font-size:.77rem;font-weight:bold;letter-spacing:.12em;text-transform:uppercase}.auth-card h1{margin:0;font-size:2.25rem;letter-spacing:-.07em}.lead{color:var(--muted);line-height:1.5;margin:12px 0 27px}.auth-card label{display:block;margin:0 0 8px;font-size:.84rem;font-weight:bold}.auth-card input,.compose-row textarea{width:100%;border:1px solid #ffffff24;border-radius:12px;background:#07111f;color:#fff;padding:13px;font:inherit;outline:none}.auth-card input:focus,.compose-row textarea:focus{border-color:#5a93ff;box-shadow:0 0 0 3px #3478ee33}.input-help,.fine-print,.composer-help{color:#8196b5;font-size:.78rem}.input-help{margin:8px 0 20px}.primary-button{border:0;border-radius:12px;background:var(--blue);color:white;padding:13px 17px;font:700 .95rem Arial,sans-serif;cursor:pointer}.primary-button:hover{background:#4b88f4}.primary-button:disabled{opacity:.6;cursor:wait}.auth-card .primary-button{width:100%}.status{min-height:19px;color:#ffb4b4;font-size:.86rem;margin:14px 0 0}.mini-brand{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:bold}.signed-in{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.78rem;margin-top:22px}.signed-in img,.current-user img,.message-avatar,.active-user img{width:31px;height:31px;object-fit:cover;border-radius:50%;background:#244a7d}.chat-app{height:100dvh;max-width:1200px;margin:auto;display:flex;flex-direction:column;background:#0b1728;border-inline:1px solid var(--line)}.chat-header{height:67px;flex:0 0 67px;display:flex;align-items:center;gap:10px;padding:0 17px;background:var(--panel);border-bottom:1px solid var(--line)}.chat-header strong{display:block}.chat-header small{color:var(--muted);font-size:.72rem}.header-spacer{flex:1}.current-user{display:flex;align-items:center;gap:7px;font-size:.85rem;color:#c6d6ec}.quiet-button{border:1px solid #ffffff28;border-radius:9px;background:transparent;color:#c7d7ed;padding:7px 10px;cursor:pointer}.workspace{display:grid;grid-template-columns:210px minmax(0,1fr) 210px;min-height:0;flex:1}.left-sidebar,.right-sidebar{background:var(--panel);padding:16px 10px;border-right:1px solid var(--line);overflow:auto}.right-sidebar{border-right:0;border-left:1px solid var(--line)}.side-label{margin:3px 7px 8px;color:#7f95b4;font-size:.7rem;text-transform:uppercase;font-weight:bold;letter-spacing:.09em}.chat-link{display:flex;align-items:center;gap:8px;width:100%;border:0;border-radius:9px;background:transparent;color:#b9cbe3;padding:10px;text-align:left;cursor:pointer}.chat-link:hover,.chat-link.active{background:#1a3453;color:#fff}.chat-link span{font-weight:bold}.chat-link em{margin-left:auto;min-width:18px;border-radius:99px;background:#e45050;color:#fff;font-style:normal;font-size:.67rem;text-align:center;padding:2px 5px}.side-help{margin:15px 7px;color:#8297b5;font-size:.76rem;line-height:1.45}.conversation{min-width:0;display:flex;flex-direction:column}.conversation-title{padding:15px 18px;border-bottom:1px solid var(--line)}.conversation-title strong{display:block}.conversation-title small{font-size:.74rem;color:var(--muted)}.messages{flex:1;min-height:0;overflow:auto;padding:21px max(15px,calc((100% - 760px)/2))}.welcome-message{text-align:center;color:var(--muted);font-size:.85rem;margin:3px 0 24px}.new-marker{text-align:center;color:#91baff;font-size:.75rem;font-weight:bold;margin:7px 0 18px}.message{display:flex;gap:9px;margin:0 0 18px}.message-avatar{flex:0 0 34px;width:34px;height:34px}.message-content{max-width:min(650px,calc(100vw - 80px));min-width:0}.message-meta{display:flex;gap:8px;align-items:baseline;margin-bottom:4px}.message-meta b{font-size:.88rem}.message-meta span{font-size:.7rem;color:#8196b5}.message-text{line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.mention{color:#8cb7ff;font-weight:bold}.admin-mark,.active-user i{font-style:normal;color:#fbbf24;font-size:.72rem;margin-left:4px}.deleted-message{margin:3px 0;color:#a9b8cc;font-size:.82rem;font-weight:bold}.message-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.reaction,.admin-delete{border:1px solid #ffffff18;background:var(--panel2);color:#d9e6f8;border-radius:99px;padding:3px 7px;font-size:.75rem;cursor:pointer}.reaction.mine{border-color:#6098f2;background:#1a3b68}.admin-delete{color:#ffb1b1;border-radius:7px}.composer{position:relative;padding:11px max(14px,calc((100% - 760px)/2));background:var(--panel);border-top:1px solid var(--line)}.compose-row{display:flex;gap:8px;align-items:flex-end}.compose-row textarea{resize:none;min-height:43px;max-height:120px;flex:1}.send-button{height:43px}.tag-suggestions{position:absolute;bottom:76px;left:14px;right:82px;max-width:330px;background:#172b48;border:1px solid #ffffff20;border-radius:10px;box-shadow:0 10px 30px #0008;padding:5px;z-index:2}.tag-suggestions button{display:block;width:100%;border:0;border-radius:7px;background:transparent;text-align:left;color:#e8f1ff;padding:8px;cursor:pointer}.tag-suggestions button:hover{background:#24466f}.composer-help{margin:7px 1px 0}.active-heading{display:flex;align-items:center;gap:6px;padding:4px 6px 13px;color:#cbd9ed}.active-heading small{margin-left:auto;color:#83a0c7}.presence-dot,.active-user b{width:8px;height:8px;border-radius:50%;background:#38d379}.active-users{display:grid;gap:4px}.active-user{display:flex;align-items:center;gap:8px;padding:7px;border-radius:8px;font-size:.84rem;color:#d6e2f3}.active-user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.active-user b{margin-left:auto;width:6px;height:6px}.empty-list{color:#8095b4;font-size:.78rem;padding:6px}.toast{position:fixed;left:50%;bottom:94px;transform:translateX(-50%);opacity:0;pointer-events:none;background:#1c3352;color:#fff;padding:9px 13px;border-radius:9px;font-size:.84rem;transition:.2s}.toast.show{opacity:1}@media(max-width:820px){.workspace{grid-template-columns:185px minmax(0,1fr)}.right-sidebar{display:none}}@media(max-width:540px){.chat-header{height:61px;flex-basis:61px;padding:0 9px}.chat-header .current-user span{display:none}.chat-header #enable-pings{display:none}.workspace{grid-template-columns:1fr}.left-sidebar{display:flex;gap:6px;align-items:center;padding:7px 9px;border-bottom:1px solid var(--line);border-right:0}.left-sidebar .side-label,.side-help{display:none}.chat-link{width:auto;padding:8px}.message-content{max-width:calc(100vw - 75px)}.auth-card{padding:33px 24px}.send-button{padding-inline:12px}}