
:root{color-scheme:dark;--bg:#101218;--card:#191c24;--border:#30333e;--text:#f2f0eb;--muted:#a8aab7;--accent:#cbef8c;--purple:#aaa0e8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,system-ui,sans-serif;font-size:15px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{cursor:pointer;border:0;border-radius:9px;padding:12px 17px;color:inherit;background:#272b36}button:hover{filter:brightness(1.13)}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}header{height:94px;margin:0 auto;max-width:1440px;padding:24px 5%;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:12px;color:var(--accent);font-size:34px}.brand span{font-size:19px;letter-spacing:2px;font-weight:800;color:var(--text)}.brand small{display:block;font-size:10px;font-weight:400;letter-spacing:1px;color:var(--muted);margin-top:5px}.beta{font-size:9px;letter-spacing:1.5px;border:1px solid var(--border);padding:6px 8px;border-radius:5px;color:var(--muted)}#identity{margin-left:auto;display:flex;align-items:center;gap:12px}#identity b{font-size:13px}#identity small{color:var(--accent)}#landing{max-width:1250px;margin:0 auto;padding:70px 38px 36px;display:grid;grid-template-columns:1.25fr 1fr;gap:50px 80px}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:600}.dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:8px}h1{font-size:clamp(38px,4.8vw,66px);letter-spacing:-3px;line-height:1.09;margin:25px 0}h1 em{font-style:normal;color:var(--accent)}p{line-height:1.65}.hero>p{max-width:425px;color:var(--muted);font-size:16px}.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.pills span{font-size:11px;border:1px solid var(--border);border-radius:30px;padding:8px 12px;color:#cccdd5}.preview{margin-top:38px;padding:20px;display:flex;align-items:center;gap:13px;background:linear-gradient(110deg,#21232e,#181b23);border:1px solid var(--border);border-radius:12px;transform:rotate(-1deg);max-width:420px}.preview b{font-size:12px;color:var(--purple)}.preview p{margin:6px 0;font-size:12px;color:#d7d5e1}.mini-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#48405e;color:#e8d5ff}.spark{font-size:28px;color:var(--accent);margin-left:auto}.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:30px}.entry{align-self:start;margin-top:12px}.entry h2{font-size:31px;letter-spacing:-1px;margin:12px 0 25px}.tabs{display:flex;background:#101218;border:1px solid var(--border);border-radius:9px;padding:4px;margin-bottom:23px}.tabs button{flex:1;background:transparent;font-size:12px;padding:10px 4px}.tabs .selected{background:#343944;color:var(--text)}label{display:block;font-size:12px;font-weight:600;margin:17px 0 8px}input,select,textarea{display:block;width:100%;padding:13px 14px;border-radius:8px;border:1px solid #3a3e4a;background:#11141b;color:var(--text);margin-top:9px}input::placeholder{color:#747988}input:focus{border-color:var(--accent)}small,.muted{font-size:11px;color:var(--muted);line-height:1.6}#availability{display:block;margin:7px 0 12px;min-height:18px}.check{display:flex;gap:10px;align-items:flex-start;font-size:11px;line-height:1.7;font-weight:400;color:var(--muted);margin:20px 0}.check input{width:15px;height:15px;flex-shrink:0;margin:3px 0;accent-color:var(--accent)}.link{padding:0;background:transparent;color:var(--muted);font-size:inherit;text-decoration:underline;text-underline-offset:3px}.primary{background:var(--accent);color:#192015;font-weight:650}.primary span{float:right}.full{width:100%}.fine{border-top:1px solid var(--border);padding-top:18px;font-size:10px;line-height:1.6;color:#9296a5}#auth-error{font-size:12px;color:#ffa7a7}.features{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid var(--border);padding-top:30px}.features article>span{font-size:10px;letter-spacing:1px;color:var(--purple)}.features h3{font-size:17px;margin-bottom:6px}.features p{font-size:12px;color:var(--muted);margin-top:0}footer{max-width:1340px;margin:0 auto;padding:25px 35px;display:flex;justify-content:space-between;border-top:1px solid var(--border);font-size:10px;color:var(--muted);gap:16px}footer nav{display:flex;gap:18px}.outline{background:transparent;border:1px solid var(--border);font-size:12px}#workspace{display:grid;grid-template-columns:260px 1fr;max-width:1440px;margin:auto;height:calc(100dvh - 163px);min-height:570px}.sidebar{border-right:1px solid var(--border);padding:24px 20px;overflow:auto;display:flex;flex-direction:column;gap:6px}.nav{text-align:left;background:transparent;color:var(--muted);font-size:13px}.nav.selected{background:#2c3327;color:var(--accent)}.sidebar-label{font-size:10px;color:#858a9a;letter-spacing:1px;margin:28px 10px 12px;display:flex;justify-content:space-between}.room{width:100%;background:transparent;text-align:left;font-size:13px;margin-bottom:5px;display:flex;justify-content:space-between}.room.selected{background:#262b34}.room small{color:var(--accent)}.sidebar-bottom{margin-top:auto;padding:30px 10px 0;font-size:11px}.sidebar-bottom p{color:var(--muted)}.conversation{min-width:0;display:flex;flex-direction:column;overflow:hidden}.conversation-head{padding:23px 30px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:12px}.conversation h2{font-size:24px;letter-spacing:-.7px;margin:8px 0}.conversation-head p{font-size:12px;color:var(--muted);margin:0}.connection{font-size:10px;color:var(--accent);white-space:nowrap}#stranger-controls{padding:12px 25px;border-bottom:1px solid var(--border)}#stranger-controls label{margin:0 0 10px}#stranger-controls input{max-width:430px}#match-status{font-size:11px;color:var(--muted);margin-bottom:0}#room-controls{padding:10px 30px;display:flex;gap:20px;font-size:11px}#messages{padding:25px 30px;overflow-y:auto;flex:1;min-height:150px}.empty{text-align:center;padding:60px 15px;color:var(--muted)}.empty>span{font-size:52px;color:var(--accent)}.empty h3{font-size:18px;color:var(--text)}.empty p{font-size:12px}.msg{margin:0 0 18px;max-width:760px}.msg-head{display:flex;align-items:baseline;gap:9px;font-size:12px}.msg-head b{color:var(--purple)}.msg.mine .msg-head b{color:var(--accent)}.msg time,.msg .tier{font-size:9px;color:#9096a4}.msg p{background:#1d212b;display:inline-block;padding:10px 15px;border-radius:0 12px 12px;margin:7px 0 4px;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;font-size:14px}.msg.mine p{background:#252e23}.msg-actions{display:flex;gap:13px;font-size:9px}.msg-actions button{color:#939bac}#composer{display:flex;gap:12px;padding:12px 30px 8px}#composer input{margin:0}.composer-note{font-size:9px;color:#818797;padding:0 30px 18px}dialog{width:min(560px,92vw);max-height:85vh;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:16px;color:var(--text);padding:30px}dialog::backdrop{background:#000a;backdrop-filter:blur(3px)}dialog h2{padding-right:20px}dialog p,dialog li{font-size:13px;color:#bdc0cd;line-height:1.7}.close{position:absolute;right:12px;top:10px;font-size:22px;background:transparent}.social-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--border)}.social-row b{margin-right:auto}.social-row button{font-size:11px;padding:8px}.social-row small{width:100%}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#e2edcf;color:#172012;padding:14px 22px;border-radius:10px;box-shadow:0 8px 35px #0008;z-index:5;max-width:90vw;font-size:13px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}form>button{margin-top:15px}#composer>button{margin:0}#dialog-content textarea{min-height:90px}
@media(max-width:850px){#landing{padding:35px 24px;gap:35px;grid-template-columns:1fr 1fr}h1{font-size:42px}.card{padding:22px}.preview{display:none}#workspace{grid-template-columns:210px 1fr}.sidebar{padding:16px 10px}.conversation-head{padding:20px}.beta{display:none}}
@media(max-width:600px){header{height:76px;padding:17px 20px}.brand span{font-size:15px}.brand small{font-size:8px}#identity{gap:8px}#identity button{padding:8px;font-size:10px}#identity b{font-size:11px}#landing{display:block;padding:28px 20px}.hero h1{font-size:43px;letter-spacing:-2px;margin:18px 0}.hero>p{font-size:14px}.pills{gap:5px}.pills span{font-size:9px}.entry{margin:28px 0}.features{gap:10px;padding-top:25px}.features h3{font-size:14px}.features p{font-size:11px}footer{padding:20px;flex-direction:column}footer nav{flex-wrap:wrap}#workspace{display:flex;flex-direction:column;height:calc(100dvh - 76px);min-height:650px}.sidebar{flex-shrink:0;padding:8px 12px;display:block;max-height:160px;border-right:0;border-bottom:1px solid var(--border)}.nav{display:inline-block;font-size:11px;padding:9px}.sidebar-label,.sidebar-bottom{display:none}#room-list{display:flex;overflow-x:auto;padding-top:7px}.room{width:auto;white-space:nowrap;gap:15px;margin:0}.sidebar>#create-room{width:auto;font-size:10px;padding:7px;margin-top:5px}.conversation{flex:1}.conversation-head{padding:13px 18px}.conversation h2{font-size:19px}#messages{padding:15px 18px}#composer{padding:9px 12px}#composer button{font-size:12px}.composer-note{padding:0 15px 12px}#stranger-controls{padding:10px 18px}.empty{padding:30px 10px}}

.adult-room-group{border-top:1px solid var(--border);margin-top:14px;padding-top:10px}.adult-label{color:var(--purple);font-size:10px;letter-spacing:1px;margin:5px 10px 10px}@media(max-width:600px){.adult-room-group{display:flex;align-items:center;border-top:0;border-left:1px solid var(--border);margin:0 0 0 10px;padding:0 0 0 10px}.adult-label{white-space:nowrap;margin:0 8px}}

.quota-banner{margin:0 30px 8px;padding:11px 14px;border:1px solid #49405f;border-radius:8px;background:#221f30;color:#d8d1ee;font-size:11px;line-height:1.6}@media(max-width:600px){.quota-banner{margin:0 18px 6px}}

/* Theme picker is available before login and for every account tier. */
.theme-picker{margin:0;flex-shrink:0}
.theme-picker select{margin:0;width:auto;min-width:92px;padding:9px 10px;font-size:12px;cursor:pointer}
:root[data-theme="light"]{color-scheme:light;--bg:#f5f6f2;--card:#ffffff;--border:#cdd4c8;--text:#222a22;--muted:#596354;--accent:#456627;--purple:#71538a}
:root[data-theme="light"] button{background:#e7ebe3}
:root[data-theme="light"] button:hover{filter:brightness(.96)}
:root[data-theme="light"] .link,:root[data-theme="light"] .outline,:root[data-theme="light"] .nav,:root[data-theme="light"] .room,:root[data-theme="light"] .close{background:transparent}
:root[data-theme="light"] .primary{background:#d7eab9;color:#243315}
:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea{background:#fff;border-color:#b9c4b2;color:var(--text)}
:root[data-theme="light"] input::placeholder,:root[data-theme="light"] textarea::placeholder{color:#697361}
:root[data-theme="light"] .tabs{background:#edf0e8}
:root[data-theme="light"] .tabs button{background:transparent}
:root[data-theme="light"] .tabs .selected{background:#fff;box-shadow:0 1px 4px #25351c15}
:root[data-theme="light"] .preview{background:linear-gradient(110deg,#eeeee6,#fff)}
:root[data-theme="light"] .preview p,:root[data-theme="light"] .pills span{color:#495543}
:root[data-theme="light"] .mini-avatar{background:#e8dcf0;color:#604579}
:root[data-theme="light"] .nav.selected{background:#e0ebd5}
:root[data-theme="light"] .room.selected{background:#e8eee2}
:root[data-theme="light"] .msg p{background:#e9eee4}
:root[data-theme="light"] .msg.mine p{background:#deebd1}
:root[data-theme="light"] .msg time,:root[data-theme="light"] .msg .tier,:root[data-theme="light"] .msg-actions button,:root[data-theme="light"] .sidebar-label,:root[data-theme="light"] .composer-note,:root[data-theme="light"] .fine{color:#626e5b}
:root[data-theme="light"] dialog p,:root[data-theme="light"] dialog li{color:#4f5d48}
:root[data-theme="light"] dialog::backdrop{background:#19221755}
:root[data-theme="light"] #auth-error{color:#b13333}
:root[data-theme="light"] .quota-banner{background:#f0eaf6;border-color:#ccbbdd;color:#65437f}
.local-preview{max-width:1180px;margin:20px auto 0;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.local-preview p{margin:0;color:var(--muted);font-size:14px}
.local-preview a{display:inline-block;flex-shrink:0;padding:12px 18px;border-radius:10px;text-decoration:none;font-size:14px;font-weight:700}
@media(max-width:600px){header{height:auto;min-height:76px;flex-wrap:wrap;gap:8px 12px;padding:12px 16px}.brand{font-size:27px}.brand span{font-size:14px}#identity{gap:7px;max-width:100%}#identity b{overflow-wrap:anywhere}.theme-picker{margin-left:auto}.theme-picker select{min-width:80px;padding:8px;font-size:11px}.local-preview{margin:16px;align-items:flex-start;flex-direction:column}}
/* Dedicated contacts screen and room presence */
#workspace.with-members{grid-template-columns:260px minmax(0,1fr) 230px}
.contacts-view{min-width:0;padding:30px;overflow:auto;max-height:calc(100vh - 160px)}
.contacts-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border);padding-bottom:20px}
.contacts-heading h2{margin:8px 0 0}
.contacts-section{padding:20px 0;border-bottom:1px solid var(--border)}
.contacts-section h3{margin:0 0 15px}.contacts-section h4{margin-bottom:6px}
.friend-request{display:flex;align-items:center;gap:12px}.friend-request input{margin:0;min-width:0}.friend-request>button{margin:0;flex-shrink:0}
.presence{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);white-space:nowrap}
.presence-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8b9098;flex-shrink:0}
.presence-dot.online{background:#36a65c}
.room-members{padding:24px 18px;border-left:1px solid var(--border);min-width:0;overflow:auto;max-height:calc(100vh - 160px)}
.room-members h3{font-size:15px;margin:0 0 12px}.room-members .muted,.members-note{font-size:11px;line-height:1.6;color:var(--muted)}
.member-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0;border-bottom:1px solid var(--border)}
.member-row b{font-size:13px;width:100%;overflow-wrap:anywhere}.member-row small{font-size:10px;color:var(--muted)}.member-row button{font-size:11px;width:100%;text-align:left}
@media(max-width:1100px){#workspace.with-members{grid-template-columns:200px minmax(0,1fr)}.room-members{grid-column:2;border-top:1px solid var(--border);max-height:280px}.contacts-view{padding:20px}}
@media(max-width:600px){#workspace.with-members{grid-template-columns:1fr}.room-members{grid-column:1;border-left:0}.contacts-heading{align-items:flex-start;flex-wrap:wrap}.contacts-view{max-height:none;padding:18px}.friend-request{flex-wrap:wrap}.friend-request input{width:100%}.social-row b{overflow-wrap:anywhere}}
/* Chatfunke conversation layout: original styling, compact navigation. */
#conversation-tabs{display:flex;align-items:center;gap:6px;padding:12px 20px;border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0;min-height:58px;background:var(--card)}
.conversation-tab{font-size:12px;padding:9px 13px;white-space:nowrap;background:transparent;border:1px solid var(--border)}
.conversation-tab[aria-current="page"]{background:var(--accent);color:#192217;border-color:var(--accent);font-weight:700}
.private-tab{display:inline-flex;align-items:center;flex-shrink:0}.private-tab .conversation-tab{border-radius:8px 0 0 8px}.tab-close{padding:9px 10px;border:1px solid var(--border);border-left:0;border-radius:0 8px 8px 0;font-size:12px;background:transparent}
.conversation-tab.unread{font-weight:800;border-color:var(--accent)}
.conversation-head{padding:19px 24px}.conversation-head h2{font-size:23px;margin:6px 0}.conversation-head p{margin:5px 0 0}
#messages{padding:18px 24px}.msg{max-width:none;padding:9px 0;margin:0;border-bottom:1px solid var(--border)}.msg-head{gap:10px;flex-wrap:wrap}.msg p{background:transparent!important;padding:3px 0;margin:2px 0 0;display:block;font-size:14px;line-height:1.6}.msg.mine{border-left:2px solid var(--accent);padding-left:12px}
.user-name{padding:0;border-radius:2px;background:transparent!important;font-size:13px;font-weight:700;color:var(--purple);text-align:left;overflow-wrap:anywhere}.user-name:hover{text-decoration:underline}.msg.mine .user-name{color:var(--accent)}
#room-search,#member-search{font-size:12px;margin:8px 0 12px;padding:10px;width:100%;min-width:0}
.member-row{flex-wrap:nowrap;align-items:flex-start;gap:10px;padding:13px 0}.member-avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:10px;background:var(--card);color:var(--accent);border:1px solid var(--border);font-size:12px;font-weight:700}.member-details{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1}.member-details>.user-name{width:100%;font-size:12px}.member-details small{width:100%}
#composer{align-items:center}.emoji-button{background:transparent;border:1px solid var(--border);padding:10px;font-size:22px;flex-shrink:0}.profile-actions{display:grid;gap:10px;margin-top:20px}.emoji-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.emoji-choice{font-size:26px;background:transparent;border:1px solid var(--border)}
@media(max-width:600px){#workspace{height:auto;min-height:calc(100dvh - 110px)}.sidebar{max-height:none}.sidebar #room-search{padding:7px;margin:5px 0;font-size:11px}.conversation{min-height:65dvh;max-height:85dvh}.contacts-view{overflow:visible}#conversation-tabs{padding:10px 12px;min-height:54px}.conversation-head{padding:15px}.conversation-head h2{font-size:20px}#messages{padding:12px 15px}.room-members{max-height:350px}#composer{gap:7px}#composer input{min-width:0}.emoji-button{font-size:20px;padding:8px}.member-row{padding:12px 0}}
