:root{color-scheme:light;--olive:#34452f;--paper:#faf7ef;--line:#948675}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:#242820;font:16px/1.6 system-ui,sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:18px 4vw;border-bottom:1px solid #d2c8b8}a{color:var(--olive)}main{max-width:1400px;margin:auto;padding:24px 4vw}h1,h2,h3{font-family:Georgia,serif;line-height:1.2}h1{font-size:clamp(32px,4vw,48px);margin:22px 0 12px}h2{font-size:25px}h3{font-size:22px}.preview{background:#e9dfc9;border-left:4px solid #805c35;padding:12px 16px;font-size:14px}.workspace{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;margin:24px 0}aside{padding:16px;background:#eeeadd;border:1px solid #d2c8b8}button,input,select,textarea{font:inherit}button{cursor:pointer;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;color:var(--olive);background:#fffaf3}button:hover{background:#e9eddf}button:disabled{opacity:.55;cursor:not-allowed}button[aria-current="true"]{background:var(--olive);color:white}#room-list{display:grid;gap:10px;margin:20px 0}#room-list button{text-align:left}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a9563a;outline-offset:3px}.chat{display:flex;flex-direction:column;min-width:0;height:clamp(480px,74dvh,850px);border:1px solid var(--line);border-radius:10px;background:#fffcf7;overflow:hidden}.room-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid #d2c8b8}.room-bar>div{flex:1}.room-bar h2{margin:4px 0}.privacy{font-size:12px;letter-spacing:.04em}#conversation{flex:1;overflow:auto;padding:18px;min-height:120px;overscroll-behavior:contain}.message{max-width:72ch;border-bottom:1px solid #e0d9ca;padding:10px 0}.message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0}.message small{color:#5b6255}.compose{display:flex;gap:12px;align-items:flex-end}textarea{resize:vertical;min-height:56px;max-height:140px;flex:1;min-width:0}input,textarea,select{padding:9px;border:1px solid var(--line);border-radius:5px;background:white;color:#242820}label{display:block;font-weight:600;margin:8px 0}#private-composer{border-top:1px solid #d2c8b8;padding:10px 18px}#private-composer label{margin:0 0 6px;font-size:14px}#room-status{margin:4px 0;font-size:13px}#member-panel{padding:12px 18px;background:#f0f1e8;max-height:36vh;overflow:auto}#member-panel p{font-size:14px}#member-list li{padding:5px 0}#member-list button{margin-left:10px}dialog{max-width:min(480px,94vw);border:1px solid var(--line);border-radius:10px;padding:24px;background:var(--paper)}dialog::backdrop{background:#172819aa}dialog input,dialog select{width:100%}details{border-top:1px solid #d2c8b8;padding:18px 0}summary{cursor:pointer}details p{max-width:80ch}@media(max-width:850px){.workspace{grid-template-columns:1fr}aside{padding:12px}aside h2{font-size:22px;margin:0}#room-list{display:flex;overflow:auto;margin:12px 0;gap:8px}#room-list button{flex:0 0 180px}.chat{height:clamp(430px,72dvh,760px)}.room-bar{padding:10px 12px;gap:8px}.room-bar h2{font-size:22px}main{padding:16px}#conversation{padding:12px}.compose{gap:8px}#private-composer{padding:10px 12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Keep the horizontally scrolling room list inside the mobile grid track. */
.emoji-toolbar{position:relative;margin:6px 0 10px}.emoji-options{display:flex;flex-wrap:wrap;gap:6px;padding:10px;margin-top:8px;background:#eef3ee;border:1px solid #727b73;border-radius:8px}.emoji-options[hidden]{display:none}.emoji-options button{min-width:48px;min-height:48px;font-size:24px}.emoji-options button:last-child{font-size:18px}.emoji-toolbar [role=status]{display:block;font-size:16px}
.workspace>aside{min-width:0}
.private-language{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.private-language label{margin:0}.private-language select{min-height:48px;max-width:100%}
@media(max-width:850px){.workspace{grid-template-columns:minmax(0,1fr)}header{gap:12px;flex-wrap:wrap}.room-bar>div{min-width:0}.room-bar h2{overflow-wrap:anywhere}}
/* Accessible preview palette: neutral surfaces, forest-green actions. */
:root{--olive:#244735;--paper:#f7f8f5;--line:#727b73}
body{color:#202923;font-size:18px;line-height:1.6}
header{background:#fff;border-color:#ccd3cd}
.preview{background:#edf2ed;border-left-color:#244735;color:#263c2e}
aside{background:#eef2ed;border-color:#ccd3cd}
.chat{background:#fff}
button{background:#fff;color:#244735;min-height:48px;padding:10px 14px}
button:hover{background:#e5ede6}
#new-room,#send,dialog button:not([type="button"]),#invite-form button{background:#244735;color:#fff;border-color:#244735}
#new-room:hover,#send:hover,dialog button:not([type="button"]):hover,#invite-form button:hover{background:#193526}
#close-room,#leave-room{background:#fff;color:#37433b}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #244735;outline-offset:3px;box-shadow:0 0 0 6px #fff}
.room-bar,#private-composer,.message,details{border-color:#ccd3cd}
#member-panel{background:#eef3ee}
.message small{color:#46564b;font-size:14px}
#room-status{font-size:16px;color:#244735;min-height:1.6em}
.privacy{font-size:14px;letter-spacing:0}
.conversation-help{margin:8px 0 16px;color:#425348;font-size:16px}
textarea{min-height:76px}
@media(max-width:600px){body{font-size:17px}.room-bar>div{flex-basis:100%}.compose{flex-wrap:wrap}.compose textarea{flex-basis:100%}.compose button{margin-left:auto}.chat{height:clamp(520px,78dvh,850px)}}
.report-form{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff)}
.report-form label{display:block;margin-bottom:8px}.report-form textarea{display:block;width:100%;box-sizing:border-box;font:inherit;min-height:100px;resize:vertical}
.report-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.report-actions button{min-height:48px}.report-form p{margin:12px 0 0;overflow-wrap:anywhere}
.private-confirm button{min-height:48px;margin:8px 12px 0 0}.private-confirm p{overflow-wrap:anywhere}.private-confirm h2{margin-top:0}
/* More space for reading, without reducing the 48px action targets. */
.chat{height:clamp(560px,82dvh,900px)}
#private-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
#private-composer>label{margin:0;align-self:center;font-size:16px;line-height:1.4}
#private-composer>.emoji-toolbar{margin:0;max-width:240px}
#private-composer>.compose,#private-composer>#room-status{grid-column:1/-1}
#private-composer>#room-status{margin:2px 0}
@media(min-width:851px) and (max-width:1050px){
 .workspace{grid-template-columns:minmax(0,1fr)}
 .workspace>aside{padding:12px}
 .workspace>aside h2{font-size:22px;margin:0}
 #room-list{display:flex;overflow:auto;margin:12px 0;gap:8px}
 #room-list button{flex:0 0 180px}
}
@media(max-width:600px){.chat{height:clamp(600px,82dvh,900px)}#private-composer{gap:6px 8px}#private-composer>.emoji-toolbar{max-width:180px}}
/* Inline expansion preserves navigation, composition and safety information. */
.chat.is-expanded{height:clamp(720px,95dvh,1200px)}
.room-expand-button[aria-pressed="true"]{background:var(--olive);color:#fff}