:root { color-scheme:light; font:16px/1.5 'Segoe UI',sans-serif; color:#24262a; background:#f7f7f8; --muted:#696d75; --border:#dddfe3; --accent:#30343b; }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; } button,input,select,textarea { font:inherit; color:inherit; } button { cursor:pointer; } button:disabled { opacity:.45; cursor:not-allowed; } :focus-visible { outline:2px solid #5778ad; outline-offset:3px; } h1,h2,h3,p { margin:0; } h1 { font-size:21px; font-weight:650; } h2 { font-size:20px; font-weight:600; } h3 { font-size:15px; margin-bottom:12px; font-weight:600; } button { background:#fff; border:1px solid #d7d9dd; border-radius:6px; padding:8px 13px; font-size:14px; white-space:nowrap; } button:hover:not(:disabled) { background:#eff0f2; } .primary { background:var(--accent); border-color:var(--accent); color:#fff; } .primary:hover:not(:disabled) { background:#15181c; } .text-button { background:transparent; border:0; padding:3px 0; text-decoration:underline; text-underline-offset:3px; color:#565c66; font-size:13px; } .app { width:min(740px,100%); margin:0 auto; padding:27px 30px; } header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; gap:15px; } .row { display:flex; gap:10px; align-items:center; } .row select,.row input { flex:1; min-width:0; } .room-section { margin-bottom:23px; } label { display:block; font-size:14px; margin-bottom:7px; font-weight:500; } .optional { color:var(--muted); font-weight:400; margin-left:5px; font-size:13px; } input,select,textarea { background:#fff; border:1px solid #d5d8dd; border-radius:6px; padding:9px 11px; width:100%; min-width:0; } select { font-size:14px; } textarea { resize:vertical; min-height:110px; display:block; font-size:16px; } input::placeholder,textarea::placeholder { color:#91949a; } .room-info { display:flex; gap:15px; align-items:center; flex-wrap:wrap; margin-top:10px; font-size:13px; color:var(--muted); } #members { margin-top:6px; font-size:13px; } .muted { font-size:13px; color:var(--muted); line-height:1.55; } .composer { padding:22px; border:1px solid var(--border); background:#fff; border-radius:9px; } .drop-zone { display:flex; align-items:center; gap:12px; padding:16px 0; } .drop-zone span { color:var(--muted); font-size:12px; } .drop-zone.dragging { background:#eaf0f8; outline:2px dashed #8099b8; } .attachments { display:grid; gap:10px; } .attachment { padding:10px; border:1px solid var(--border); border-radius:6px; display:flex; gap:12px; align-items:center; } .attachment img,.attachment video { width:74px; height:58px; object-fit:contain; background:#f1f2f4; border-radius:3px; } .attachment-info { flex:1; min-width:0; } .attachment strong { display:block; font-size:14px; font-weight:500; overflow-wrap:anywhere; } .attachment small { color:var(--muted); font-size:12px; } .attachment audio { width:100%; height:30px; max-width:300px; margin-top:6px; } details { margin-top:4px; } summary { color:var(--muted); cursor:pointer; font-size:13px; padding:8px 0; } .options { padding:9px 0; } .options .row { margin-top:12px; flex-wrap:wrap; } .options label { font-size:13px; } .send-row { display:flex; align-items:center; gap:9px; padding-top:18px; border-top:1px solid #ebecef; margin-top:12px; } .send-row label { margin:0; font-size:13px; color:var(--muted); } .send-row select { width:72px; padding:7px; } .spacer { flex:1; } #broadcast { min-width:100px; } #send-status { margin-top:10px; font-size:12px; min-height:19px; } footer { padding-top:18px; display:flex; flex-direction:column; gap:5px; color:#797d84; font-size:12px; } dialog { color:#24262a; background:#fff; padding:24px; border:1px solid #d5d8dd; border-radius:10px; width:min(460px,calc(100% - 30px)); max-height:90vh; overflow:auto; box-shadow:0 20px 80px #0003; } dialog::backdrop { background:#181d254f; } .dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:22px; } .dialog-heading button { border:0; color:var(--muted); background:transparent; font-size:13px; padding:5px 0; } dialog label:not(.check) { margin-top:16px; } .mode-buttons { display:flex; gap:8px; margin-bottom:20px; } .mode-buttons button { flex:1; } .mode-buttons .selected { background:#edf0f4; border-color:#788292; } .note { margin:15px 0; } #host-address { margin-top:6px; overflow-wrap:anywhere; } .wide { width:100%; } .error { color:#b42318; font-size:14px; margin:12px 0; } .check { display:flex; align-items:center; gap:10px; margin:17px 0; font-weight:400; font-size:14px; } input[type=checkbox] { width:16px; height:16px; accent-color:#30343b; flex-shrink:0; } input[type=range] { padding:0; border:0; accent-color:#454d59; height:17px; } output { float:right; font-size:13px; color:var(--muted); } dialog section { border-top:1px solid var(--border); margin-top:23px; padding-top:20px; } .saved-entry { display:flex; align-items:center; gap:12px; padding:10px 0; } .saved-entry>div { flex:1; min-width:0; } .saved-entry strong { display:block; font-size:14px; font-weight:500; } .saved-entry small { font-size:12px; color:var(--muted); display:block; overflow-wrap:anywhere; } #saved-rooms-list { margin-bottom:10px; } #preview-dialog { width:min(600px,calc(100% - 30px)); } #large-preview { display:flex; justify-content:center; align-items:center; min-height:120px; max-height:65vh; padding:20px; background:#eceef1; border-radius:6px; } .reaction-view { display:flex; flex-direction:column; align-items:center; gap:8px; min-height:0; width:100%; } .reaction-art { display:flex; align-items:center; justify-content:center; width:100%; overflow:hidden; border-radius:5px; min-height:0; } .reaction-media { max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; display:block; } .reaction-caption { white-space:pre-line; overflow-wrap:anywhere; font:500 18px/1.5 'Segoe UI',sans-serif; color:#fff; background:#191c22ed; padding:10px 15px; border-radius:5px; max-width:100%; text-align:center; } #large-preview .reaction-art { max-height:350px; } #large-preview .reaction-media { max-height:350px; } #toast { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); max-width:calc(100% - 30px); background:#292d34; color:#fff; border-radius:7px; padding:12px 18px; box-shadow:0 5px 25px #0002; font-size:14px; z-index:100; } #toast.error { background:#942c27; }
@media(max-width:550px) { .app { padding:20px 16px; } header { margin-bottom:23px; } header .row { gap:6px; } button { padding:8px 10px; } .composer { padding:16px; } .drop-zone { flex-wrap:wrap; gap:7px; } .drop-zone span { width:100%; } .room-picker .row { flex-wrap:wrap; } .room-picker select { min-width:180px; } .send-row { flex-wrap:wrap; gap:7px; } #broadcast { min-width:80px; } }

.reaction-sender { flex-shrink:0; max-width:100%; padding:4px 10px; border-radius:4px; font:600 13px/1.4 'Segoe UI',sans-serif; color:#fff; background:#191c22ed; overflow-wrap:anywhere; text-align:center; }
.directory-entry { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); } .directory-entry>div { flex:1; min-width:0; } .directory-entry strong { display:block; font-size:14px; font-weight:500; overflow-wrap:anywhere; } .directory-entry small { color:var(--muted); font-size:12px; } #room-directory { margin-top:18px; } #directory-status { margin-top:12px; } #server-rooms { max-height:230px; overflow:auto; } #audio-replacement { margin-top:10px; } .mode-buttons { flex-wrap:wrap; }