:root { --ink:#142019; --muted:#5f6d65; --faint:#718078; --line:#d7ded9; --paper:#f8faf8; --white:#fff; --panel:#f3f6f4; --raised:#fff; --green:#216b4d; --green-dark:#15563c; --mint:#e3eee7; --coral:#e98770; --shadow:0 20px 60px rgba(31,50,40,.10); color-scheme:light; }
[data-theme="dark"] { --ink:#edf4ef; --muted:#aab8af; --faint:#8e9e94; --line:#34433a; --paper:#0c130f; --white:#121b16; --panel:#101914; --raised:#17221c; --green:#66c092; --green-dark:#50a979; --mint:#1d3327; --shadow:0 20px 60px rgba(0,0,0,.35); color-scheme:dark; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { font-family:"DM Sans",sans-serif; color:var(--ink); background:var(--paper); }
button, input { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
.hidden { display:none !important; }
.brand { display:flex; align-items:center; gap:10px; font-family:"Manrope",sans-serif; font-weight:700; letter-spacing:-.4px; }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:var(--green); color:white; font:700 19px/1 Georgia,serif; font-style:italic; }
.brand-large { font-size:18px; position:absolute; top:42px; left:48px; }
.join-screen { min-height:100vh; display:grid; grid-template-columns:minmax(440px, 56%) 44%; background:#f9faf7; }
.join-card { position:relative; display:flex; flex-direction:column; justify-content:center; padding:110px clamp(44px,9vw,150px) 50px; }
.join-copy { max-width:610px; }
.eyebrow { font-size:11px; letter-spacing:2px; font-weight:700; color:var(--green); display:flex; align-items:center; gap:9px; }
.eyebrow i { width:7px; height:7px; background:#5aaf7e; border-radius:50%; box-shadow:0 0 0 4px #e0f2e7; }
h1 { font-family:"Manrope",sans-serif; font-size:clamp(43px,5vw,68px); line-height:1.03; letter-spacing:-3.2px; margin:22px 0 23px; font-weight:600; }
.join-copy > p { color:#647068; line-height:1.7; max-width:520px; font-size:16px; }
.join-form { max-width:490px; margin-top:34px; }
.join-form label { display:block; font-size:13px; font-weight:600; margin-bottom:10px; }
.nickname-row { display:flex; background:white; border:1px solid #dce2dd; padding:5px; border-radius:13px; box-shadow:0 5px 20px rgba(22,42,31,.04); }
.nickname-row:focus-within { border-color:#8db6a1; box-shadow:0 0 0 3px rgba(38,112,82,.1); }
.nickname-row input { flex:1; min-width:0; padding:13px; border:0; outline:0; background:transparent; color:var(--ink); }
.nickname-row input::placeholder { color:#a6aea9; }
.dice { width:44px; border:0; border-radius:9px; background:#f0f4f1; color:var(--green); font-size:18px; }
.form-error { min-height:18px; color:#b44d3b; font-size:12px; margin:7px 2px; }
.primary { width:100%; border:0; border-radius:12px; padding:15px 18px; background:var(--green); color:#fff; font-weight:600; }
.primary:hover { background:var(--green-dark); }
.join-button { display:flex; justify-content:center; gap:12px; }
.join-button span { font-size:20px; line-height:16px; }
.fine-print { color:#98a19b; font-size:11px; margin-top:20px; }
.join-art { position:relative; overflow:hidden; margin:14px; border-radius:24px; background:linear-gradient(145deg,#dfeee4,#c4ddcd); }
.join-art::before { content:""; position:absolute; inset:0; opacity:.45; background-image:radial-gradient(#71957e 1px,transparent 1px); background-size:24px 24px; }
.orb { position:absolute; border-radius:50%; filter:blur(1px); }
.orb-one { width:420px;height:420px; right:-80px;top:-70px;background:rgba(255,246,215,.55); }
.orb-two { width:330px;height:330px; left:-100px;bottom:-75px;background:rgba(120,180,146,.35); }
.quote-card { position:absolute; z-index:2; display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.92); padding:14px 19px; border-radius:15px; box-shadow:var(--shadow); }
.quote-one { top:31%; left:12%; transform:rotate(-2deg); }
.quote-two { top:53%; right:10%; transform:rotate(2deg); }
.avatar, .my-avatar { flex:0 0 auto; display:grid; place-items:center; width:35px;height:35px;border-radius:50%;font-size:13px;font-weight:700; }
.coral { background:#f4d2c8;color:#8f4838; }.blue { background:#cedee8;color:#3b687c; }
.quote-card b { font-size:12px; }.quote-card p { margin:3px 0 0; font-size:12px;color:#6b756e; }
.tiny-note { position:absolute; z-index:2; bottom:28px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:10px 14px;border-radius:20px;background:rgba(255,255,255,.65);font-size:11px;color:#536258; }
.tiny-note i { display:inline-block;width:6px;height:6px;border-radius:50%;background:#5ca977;margin-left:5px; }
.app { position:fixed; top:var(--viewport-top,0px); right:0; left:0; height:var(--app-height,100vh); height:var(--app-height,100dvh); background:#fff; overflow:hidden; }
.topbar { height:68px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:260px 1fr 300px; align-items:center; padding:0 24px; }
.room-pill { justify-self:center; padding:7px 12px; background:#f2f7f3;border-radius:20px;color:#627068;font-size:11px;font-weight:600; }
.room-pill span { display:inline-block;width:6px;height:6px;border-radius:50%;background:#55a774;margin-right:6px; }
.me-menu { display:flex;align-items:center;justify-content:flex-end;gap:9px;font-size:12px;font-weight:600; }
.my-avatar { width:30px;height:30px;background:#dae9df;color:var(--green); }
.leave-button, .icon-button { border:0;background:transparent;color:#919a94;font-size:11px;margin-left:8px; }.leave-button:hover{color:#a84939;}
.theme-button { display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);font-size:15px; }
.layout { display:grid; grid-template-columns:260px minmax(360px,1fr) 300px; height:calc(var(--app-height,100vh) - 68px); height:calc(var(--app-height,100dvh) - 68px); min-height:0; overflow:hidden; }
.sidebar,.friends-panel { padding:25px 18px; overflow:auto; background:#fbfcfb; }
.sidebar { border-right:1px solid var(--line); }.friends-panel{border-left:1px solid var(--line);}
.side-heading { display:flex;justify-content:space-between;align-items:center;padding:0 8px 17px;text-transform:uppercase;font-size:10px;letter-spacing:1.25px;font-weight:700;color:#808a84; }
.count { padding:2px 7px;border-radius:10px;background:#e9eeeb;color:#617068; }
.person { display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;position:relative; }
.person:hover { background:#f0f4f1; }.person .avatar{width:34px;height:34px;background:#e5ece7;color:#587064;}
.person-info { min-width:0;flex:1; }.person-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.person-status{font-size:10px;color:#9ba39e;margin-top:2px;}
.presence { position:absolute;left:32px;top:32px;width:8px;height:8px;border:2px solid #fbfcfb;border-radius:50%;background:#b8bfba;}.presence.online{background:#5db078;}
.person-action { border:0;background:transparent;color:#8a958e;padding:5px;font-size:15px; }.person-action:hover{color:var(--green);}.person-action.sent{font-size:9px;color:#9ba39e;}
.sidebar-note { margin:30px 5px 0;padding:16px; border-radius:12px;background:#f0f5f1;color:#748078;text-align:center; }.sidebar-note span{font-size:18px;color:#729682}.sidebar-note p{font-size:10px;line-height:1.5;margin:6px 0 0;}
.chat-panel { display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:white; }
.chat-heading { height:70px;border-bottom:1px solid var(--line);padding:0 27px;display:flex;align-items:center;justify-content:space-between; }
.chat-heading>div { display:flex;align-items:center;gap:12px; }.hash{font-size:25px;color:#9aaa9f;font-weight:400;}.chat-heading h2{font:600 14px "Manrope";margin:0;}.chat-heading p{font-size:10px;color:#9aa39d;margin:3px 0 0;}.close-private{border:1px solid var(--line);background:white;border-radius:8px;padding:7px 10px;font-size:10px;color:#69746d;}
.messages { flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:25px max(24px,5vw); scroll-behavior:smooth; }
.welcome { text-align:center;margin:45px auto 35px;max-width:390px; }.welcome-icon{margin:auto;width:47px;height:47px;display:grid;place-items:center;background:#edf5f0;border-radius:15px;color:var(--green);font-size:22px;}.welcome h3{font:600 19px "Manrope";margin:14px 0 8px;}.welcome p{font-size:12px;line-height:1.6;color:#89928c;}
.date-divider { display:flex;align-items:center;gap:13px;color:#a0a8a3;font-size:9px;text-transform:uppercase;letter-spacing:1px;margin:22px 0; }.date-divider::before,.date-divider::after{content:"";height:1px;background:#edf0ee;flex:1;}
.message { display:grid;grid-template-columns:36px 1fr;gap:11px;margin:17px 0;animation:arrive .18s ease-out; }.message .avatar{width:36px;height:36px;background:#e5eee8;color:#4f6d5c;}.message-meta{display:flex;align-items:baseline;gap:8px;}.message-meta b{font-size:12px;}.message-meta time{font-size:9px;color:#acb2ae;}.message p{font-size:13px;line-height:1.52;margin:4px 0 0;overflow-wrap:anywhere;white-space:pre-wrap;}.message.mine .avatar{background:#dcede3;color:var(--green);}
.message { position:relative; padding-right:104px; border-radius:8px; transition:background .2s; cursor:pointer; }.message:hover{background:color-mix(in srgb,var(--mint) 45%,transparent)}.message.continuation{margin:-9px 0 0;min-height:27px;}.message.continuation>div:not(.message-actions){grid-column:2}.compact-time{grid-column:1;align-self:start;text-align:right;padding-top:3px;font-size:8px;color:transparent}.message.continuation:hover .compact-time{color:var(--muted)}.message-actions{position:absolute;right:4px;top:0;display:flex;gap:3px;opacity:0}.message:hover .message-actions,.message-actions:focus-within{opacity:1}.message-actions button{display:grid;place-items:center;border:1px solid var(--line);background:var(--raised);color:var(--muted);border-radius:7px;min-width:27px;height:25px;padding:0 6px;font-size:11px}.message-actions button:hover{color:var(--green);background:var(--mint)}.message-actions .delete-message:hover{color:#b44d3b}.message-quote{display:block;max-width:100%;margin:5px 0 3px;padding:5px 9px;border:0;border-left:2px solid var(--green);background:transparent;color:var(--muted);font-size:10px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-quote span{color:var(--green);font-weight:600;margin-right:7px}.message.highlight{background:var(--mint)}.edited-label{margin-left:2px;font-size:8px;color:var(--faint)}.deleted-message{color:var(--faint)!important;font-style:italic}.edit-preview .reply-line{background:var(--coral)}
@keyframes arrive{from{opacity:0;transform:translateY(4px)}}
.composer { flex:0 0 auto; margin:0 max(24px,5vw); border:1px solid #dfe4e0;border-radius:12px;display:flex;padding:5px;background:#fff;box-shadow:0 3px 15px rgba(25,45,34,.04); }.composer:focus-within{border-color:#91b7a2;box-shadow:0 0 0 3px rgba(38,112,82,.08);}.composer input:not(.visually-hidden){border:0;outline:0;flex:1;min-width:0;padding:10px 12px;font-size:16px;}.composer button{flex:0 0 36px;border:0;width:36px;height:34px;border-radius:9px;font-size:18px}.composer .send-button{background:var(--green);color:white}.composer .send-button:hover{background:var(--green-dark)}.composer .attach-button{background:transparent;color:var(--muted);font-size:22px}.composer .attach-button:hover{background:var(--mint);color:var(--green)}.typing-hint{flex:0 0 29px;height:29px;margin:5px max(24px,5vw) 0;font-size:9px;color:#9ea6a1;}
.compose-area{flex:0 0 auto}.reply-preview{margin:0 max(24px,5vw) 6px;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;background:var(--mint);color:var(--muted)}.reply-line{width:3px;height:29px;border-radius:3px;background:var(--green)}.reply-preview>div{min-width:0;flex:1}.reply-preview small{font-size:9px}.reply-preview p{font-size:10px;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-preview button{border:0;background:transparent;color:var(--muted);font-size:18px}
.compose-area{position:relative}.mention-menu{position:absolute;z-index:8;left:max(24px,5vw);right:max(24px,5vw);bottom:calc(100% + 6px);max-height:190px;overflow-y:auto;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--raised);box-shadow:var(--shadow)}.mention-option{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);text-align:left}.mention-option:hover,.mention-option.active{background:var(--mint)}.mention-option .avatar{width:29px;height:29px;background:#dce8e0;color:#345744}.mention-option span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:600}.mention{padding:1px 3px;border-radius:4px;background:var(--mint);color:var(--green);font-weight:600}.mention.me{background:var(--green);color:#fff}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.image-preview{margin:0 max(24px,5vw) 6px;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;background:var(--mint);color:var(--muted);font-size:10px}.image-preview img{width:42px;height:42px;border-radius:7px;object-fit:cover}.image-preview span{flex:1}.image-preview button{border:0;background:transparent;color:var(--muted);font-size:18px}.message-image{display:block;width:min(440px,100%);margin-top:7px}.message-image img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;object-position:left;border-radius:11px;background:var(--mint)}
.friends-panel h3{margin:5px 8px 8px;font-size:9px;color:#9aa39e;text-transform:uppercase;letter-spacing:1px;}.request{padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;}.request b{font-size:11px;}.request-actions{display:flex;gap:5px;margin-top:8px}.request-actions button{flex:1;border:0;border-radius:7px;padding:6px;font-size:9px}.accept{background:var(--green);color:white}.decline{background:#eef1ef;color:#7a837e}.friend { cursor:pointer; }.unread{margin-left:auto;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:9px;background:var(--green);color:white;font-size:9px;}.empty-friends{text-align:center;color:#a0a8a3;margin-top:90px;}.empty-friends span{display:grid;place-items:center;margin:auto;width:43px;height:43px;border:1px dashed #bdc6c0;border-radius:50%;font-size:17px}.empty-friends p{font-size:10px;line-height:1.6;}.toast{position:fixed;z-index:10;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#1e2b24;color:white;padding:10px 16px;border-radius:9px;font-size:11px;box-shadow:var(--shadow);transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.mobile-only{display:none;}
@media(max-width:900px){.join-screen{grid-template-columns:1fr}.join-art{display:none}.join-card{padding:110px max(25px,10vw) 40px}.topbar{grid-template-columns:1fr auto}.room-pill{display:none}.layout{grid-template-columns:210px 1fr}.friends-panel{display:none}.topbar{padding:0 17px}.sidebar{padding:20px 12px}}
@media(max-width:620px){.brand-large{left:25px;top:28px}.join-card{justify-content:flex-start;padding-top:125px}h1{font-size:43px;letter-spacing:-2px}.topbar{height:60px}.topbar .brand span:last-child{display:none}.layout{height:calc(var(--app-height,100vh) - 60px);height:calc(var(--app-height,100dvh) - 60px);grid-template-columns:1fr}.sidebar{position:fixed;z-index:5;left:0;top:60px;bottom:0;width:270px;transform:translateX(-105%);transition:.2s;box-shadow:12px 0 30px rgba(20,40,30,.12)}.sidebar.open{transform:translateX(0)}.mobile-only{display:block}.messages{padding:17px}.message{padding-right:74px}.message-actions{opacity:1}.message-actions button{min-width:25px;padding:0 5px}.composer{margin:0 14px}.reply-preview,.image-preview{margin-left:14px;margin-right:14px}.mention-menu{left:14px;right:14px;max-height:155px}.typing-hint{margin-left:15px;margin-bottom:env(safe-area-inset-bottom)}.chat-heading{padding:0 17px}}
[data-theme="dark"] body,[data-theme="dark"] .app,[data-theme="dark"] .chat-panel,[data-theme="dark"] .composer,[data-theme="dark"] .nickname-row{background:var(--paper);color:var(--ink)}
[data-theme="dark"] .topbar,[data-theme="dark"] .chat-heading{background:var(--white)}
[data-theme="dark"] .sidebar,[data-theme="dark"] .friends-panel{background:#131a16}
[data-theme="dark"] .person:hover,[data-theme="dark"] .dice{background:#222d27}
[data-theme="dark"] .person .avatar,[data-theme="dark"] .message .avatar,[data-theme="dark"] .my-avatar{color:#173326}
[data-theme="dark"] .composer{border-color:var(--line);box-shadow:none}
[data-theme="dark"] .composer input{background:transparent;color:var(--ink)}
[data-theme="dark"] .room-pill,[data-theme="dark"] .sidebar-note{background:#1c2b23}
[data-theme="dark"] .count{background:#263129;color:#aab5ae}

/* Contrast pass: every surface and secondary label uses theme tokens. */
.join-screen,.app,.chat-panel{background:var(--paper)}
.join-copy>p,.fine-print,.person-status,.chat-heading p,.welcome p,.message-meta time,.typing-hint,.friends-panel h3,.empty-friends{color:var(--muted)}
.nickname-row,.composer,.close-private,.theme-button{background:var(--raised);border-color:var(--line);color:var(--ink)}
.nickname-row input::placeholder,.compact-time{color:var(--faint)}
.dice,.room-pill,.count,.person:hover,.sidebar-note,.reply-preview,.image-preview{background:var(--mint)}
.room-pill,.leave-button,.icon-button,.person-action,.sidebar-note{color:var(--muted)}
.room-pill,.sidebar-note{border:1px solid var(--line)}
.sidebar,.friends-panel{background:var(--panel)}
.side-heading{color:var(--muted)}
.count{color:var(--green)}
.presence{border-color:var(--panel)}
.hash{color:var(--muted)}
.date-divider{color:var(--faint)}
.date-divider::before,.date-divider::after{background:var(--line)}
.welcome-icon{background:var(--mint)}
.message .avatar{background:#dce8e0;color:#345744}
.message.mine .avatar{background:#cfe7d8;color:#155d3e}
.composer{box-shadow:0 3px 15px rgba(25,45,34,.07)}
.composer input:not(.visually-hidden){background:transparent;color:var(--ink)}
.composer input:not(.visually-hidden)::placeholder{color:var(--faint);opacity:1}
.decline{background:var(--mint);color:var(--muted);border:1px solid var(--line)!important}
.request,.thread{background:var(--raised)}
[data-theme="dark"] .join-screen,[data-theme="dark"] .app,[data-theme="dark"] .chat-panel,[data-theme="dark"] .composer,[data-theme="dark"] .nickname-row{background:var(--paper);color:var(--ink)}
[data-theme="dark"] .composer,[data-theme="dark"] .nickname-row,[data-theme="dark"] .close-private,[data-theme="dark"] .theme-button{background:var(--raised)}
[data-theme="dark"] .sidebar,[data-theme="dark"] .friends-panel{background:var(--panel)}
[data-theme="dark"] .person:hover,[data-theme="dark"] .dice,[data-theme="dark"] .room-pill,[data-theme="dark"] .sidebar-note{background:var(--mint)}
[data-theme="dark"] .message .avatar,[data-theme="dark"] .person .avatar,[data-theme="dark"] .my-avatar{background:#dce8e0;color:#173e2c}
[data-theme="dark"] .welcome-icon{background:#dce8e0;color:#216b4d}
[data-theme="dark"] .date-divider::before,[data-theme="dark"] .date-divider::after{background:var(--line)}