:root {
  color-scheme: light;
  --canvas: #f4f3ee;
  --paper: #fffefa;
  --ink: #263d32;
  --body: #3e4d43;
  --muted: #788175;
  --line: #e6e8df;
  --green: #315b47;
  --green-dark: #234331;
  --green-light: #e9efe6;
  --danger: #ad4f3f;
  --serif: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 900px; min-height: 100%; }
body { background: var(--canvas); color: var(--body); font: 14px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }
button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 0; color: inherit; background: none; transition: background .16s, color .16s, border-color .16s, box-shadow .16s; }
button:disabled, select:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #88a98d; outline-offset: 3px; }
button svg { flex: 0 0 auto; width: 20px; height: 20px; }
button:not(:disabled):active { transform: translateY(1px); }
h1, h2, h3, p { margin: 0; }
input, textarea { color: var(--ink); }
input::placeholder, textarea::placeholder { color: #7c8972; opacity: 1; }
input { display: block; width: 100%; height: 48px; padding: 0 15px; border: 1px solid #dfe3d8; border-radius: 9px; background: #fbfcf8; transition: background .16s, border-color .16s, box-shadow .16s; }
input:hover { border-color: #b5c3b0; }
input:focus { outline: none; border-color: #709578; background: #fff; box-shadow: 0 0 0 3px #e9efe5; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.primary-button { color: #fffef7; background: var(--green); border: 1px solid var(--green); border-radius: 9px; font-weight: 600; }
.primary-button:hover:not(:disabled) { background: var(--green-dark); border-color: var(--green-dark); box-shadow: 0 3px 8px #243d2e14; }
.secondary-button { border: 1px solid #c8d3c4; border-radius: 8px; padding: 9px 18px; color: var(--green); }
.secondary-button:hover { background: var(--green-light); }
.text-button { padding: 2px 0; color: var(--green); font-size: 12px; line-height: 1.7; }
.text-button:hover { color: #152e1e; text-decoration: underline; text-underline-offset: 4px; }
.icon-button { width: 36px; height: 36px; padding: 8px; border-radius: 8px; color: #657460; flex: 0 0 auto; }
.icon-button:hover:not(:disabled), .icon-button[aria-expanded="true"] { background: var(--green-light); color: var(--green); }
.icon-button.small { width: 30px; height: 30px; padding: 5px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--green-dark); font-size: 27px; font-weight: 600; letter-spacing: 2px; }
.brand-mark { width: 34px; height: 34px; flex: 0 0 auto; }
.eyebrow, .section-kicker { display: block; font-size: 11px; letter-spacing: 2px; font-weight: 600; color: #778574; }
.gate-shell { display: grid; grid-template-columns: 1fr 1fr; width: min(1120px, calc(100% - 96px)); min-height: 700px; margin: max(40px, calc((100vh - 740px) / 2)) auto 40px; background: var(--paper); border: 1px solid #e1e4d9; border-radius: 22px; overflow: hidden; box-shadow: 0 16px 60px #35433307; }
.gate-story { position: relative; overflow: hidden; padding: 42px 48px 36px; background: #eaf0e5; border-right: 1px solid #e0e6d8; }
.story-copy { margin-top: 65px; position: relative; z-index: 1; }
.story-copy h2 { font-family: var(--serif); font-size: 44px; font-weight: 500; letter-spacing: 2px; line-height: 1.5; margin-top: 15px; color: #294c38; }
.story-description { margin-top: 22px; color: #68765f; font-size: 14px; line-height: 2; letter-spacing: .4px; }
.conversation-art { position: relative; height: 211px; width: 320px; margin: 12px auto 30px; }
.art-orbit { position: absolute; border: 1px solid #d1dcc7; width: 222px; height: 222px; border-radius: 50%; top: 1px; left: 35px; }
.art-orbit::after { content: ""; position: absolute; height: 156px; width: 156px; border: 1px solid #dce5d5; border-radius: 50%; top: 32px; left: 32px; }
.art-bubble { display: flex; justify-content: center; align-items: center; gap: 15px; position: absolute; width: 159px; height: 106px; border-radius: 29px; }
.art-bubble::after { content: ""; position: absolute; bottom: -18px; width: 28px; height: 35px; border-radius: 0 0 9px 0; }
.art-bubble span { width: 9px; height: 9px; border-radius: 50%; }
.art-bubble-back { top: 35px; left: 42px; transform: rotate(-10deg); background: #c4d3b8; box-shadow: 0 8px 0 #b7c9a935; }
.art-bubble-back::after { left: 25px; background: #c4d3b8; transform: skewY(-37deg); }
.art-bubble-back span { background: #f3f5ed; }
.art-bubble-front { top: 93px; left: 143px; transform: rotate(8deg); background: #3c634a; box-shadow: 0 9px 0 #29463013; }
.art-bubble-front::after { right: 26px; background: #3c634a; transform: skewY(37deg); }
.art-bubble-front span { background: #c1d0b3; }
.art-small-dot { position: absolute; left: 14px; top: 125px; width: 9px; height: 9px; border-radius: 50%; background: #c3aa76; }
.art-spark { position: absolute; top: 11px; right: 20px; width: 31px; height: 31px; color: #8b9c7e; transform: rotate(13deg); }
.art-caption { position: absolute; bottom: -29px; width: 100%; text-align: center; font-size: 8px; letter-spacing: 2px; color: #89957e; }
.story-footer { display: flex; align-items: center; gap: 8px; margin-top: 50px; color: #65775b; font-size: 12px; white-space: nowrap; }
.tiny-dot { width: 5px; height: 5px; background: #8f9d78; border-radius: 50%; }
.gate-form-panel { display: flex; flex-direction: column; justify-content: center; padding: 44px 58px 27px; }
.gate-form-content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
.section-kicker { letter-spacing: 1.1px; color: #8a9384; font-size: 11px; }
.gate-form-panel h1 { margin-top: 13px; color: var(--ink); font-size: 29px; line-height: 1.4; font-weight: 600; letter-spacing: .5px; }
.gate-hint { font-size: 13px; line-height: 1.8; color: var(--muted); margin-top: 13px; margin-bottom: 23px; }
.entry-form label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 18px 0 8px; color: #465941; font-size: 13px; font-weight: 500; }
.entry-form > label:first-child { margin-top: 0; }
.field-help { font-size: 11px; color: #7a8570; font-weight: 400; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-pair input { padding: 0 11px; font-size: 12px; }
.err { min-height: 20px; font-size: 12px; color: var(--danger); line-height: 1.6; margin: 8px 0 9px; }
.entry-submit { width: 100%; height: 48px; position: relative; letter-spacing: .7px; }
.entry-submit span { position: absolute; right: 17px; font-size: 20px; font-weight: 400; }
.reset-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 19px; font-size: 12px; color: #7b8772; }
.back-to-join { align-self: center; margin-top: 16px; }
.entry-note { display: flex; gap: 9px; margin-top: 30px; padding-top: 22px; border-top: 1px solid #e9ece3; color: #8a9583; }
.entry-note svg { flex: 0 0 auto; height: 18px; width: 18px; margin-top: 1px; }
.entry-note p { font-size: 12px; color: #7a8671; line-height: 1.9; }
.gate-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #a0a696; font-size: 10px; margin-top: 25px; }
.gate-bottom .text-button { font-size: 10px; }
.room-shell { display: none; grid-template-columns: 237px minmax(0, 1fr); width: calc(100% - 48px); max-width: 1560px; height: calc(100vh - 48px); min-height: 540px; margin: 24px auto; border: 1px solid #e0e3d8; border-radius: 16px; background: var(--paper); overflow: hidden; box-shadow: 0 10px 45px #37432d05; }
.room-sidebar { display: flex; flex-direction: column; min-height: 0; padding: 30px 21px 19px; background: #f0f2e9; border-right: 1px solid #e2e6db; }
.room-sidebar .brand { padding-left: 5px; font-size: 26px; }
.sidebar-tagline { margin: 11px 0 39px 7px; color: #728266; font-size: 12px; }
.sidebar-section-label { color: #7c8a70; font-size: 11px; letter-spacing: 1px; margin: 0 0 11px 9px; }
.current-room { display: flex; align-items: center; gap: 10px; margin: 0 -5px; padding: 13px 12px; border: 1px solid #dfe7d7; border-radius: 10px; background: #e4ebdc; }
.room-icon { display: flex; color: #557248; }
.room-icon svg { width: 24px; height: 24px; }
.current-room strong { display: block; font-size: 14px; font-weight: 600; color: #3b5833; }
.current-room small { display: block; font-size: 11px; color: #728064; margin-top: 2px; }
.room-active-dot { margin-left: auto; width: 5px; height: 5px; background: #76926b; border-radius: 50%; }
.sidebar-notes { padding: 27px 9px; }
.sidebar-note-title { display: block; color: #6d7d60; font-size: 12px; margin-bottom: 10px; }
.sidebar-notes p { color: #6d7d61; font-size: 12px; line-height: 2; }
.sidebar-notes .text-button { color: #687f57; font-size: 12px; margin-top: 12px; }
.sidebar-invite { margin-top: auto; padding: 21px 13px 15px; background: #e9eee1; border: 1px solid #e0e6d6; border-radius: 11px; }
.invite-art { display: flex; height: 34px; margin-bottom: 13px; padding-left: 1px; }
.invite-art span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #d3dfc9; border: 2px solid #e9eee1; color: #819872; border-radius: 50%; font-size: 18px; }
.invite-art span + span { background: #f4f6ee; margin-left: -8px; border-style: dashed; border-color: #d8e0ce; color: #8b9b7d; }
.sidebar-invite strong { font-size: 13px; font-weight: 500; color: #526e45; }
.sidebar-invite p { margin-top: 7px; font-size: 12px; line-height: 1.8; color: #6a7d5b; }
.invite-button { width: 100%; padding: 9px 3px; margin-top: 16px; border: 1px solid #cfdac4; border-radius: 7px; font-size: 12px; color: #536f46; background: #f5f7ef; }
.invite-button:hover { background: #fffef9; border-color: #9db28e; }
.invite-button svg { width: 17px; height: 17px; }
.sidebar-signoff { font-size: 7px; letter-spacing: 1.1px; color: #a4ab99; margin-top: 23px; text-align: center; white-space: nowrap; }
.room-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fffefa; }
.room-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 30px 21px; flex: 0 0 auto; border-bottom: 1px solid var(--line); }
.room-heading { min-width: 0; }
.room-title-line { display: flex; align-items: center; gap: 12px; }
.room-heading h1 { font-size: 18px; font-weight: 600; letter-spacing: .4px; }
.online-pill { color: #788d6a; background: #eff3e9; border: 1px solid #e5ebdc; border-radius: 20px; padding: 2px 8px; font-size: 12px; white-space: nowrap; }
#history-status { color: #78866d; font-size: 12px; margin-top: 7px; line-height: 1.6; }
.header-actions { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.connection-state { font-size: 12px; color: #728267; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.connection-state::before { content: ""; width: 5px; height: 5px; background: #b8ae80; border-radius: 50%; }
.connection-state[data-state="online"]::before { background: #7f9e70; box-shadow: 0 0 0 3px #eef3e9; }
.connection-state[data-state="offline"] { color: #a66b52; }
.connection-state[data-state="offline"]::before { background: #be7c5e; }
#reconnect-btn { margin-left: 3px; font-size: 12px; }
.header-action-divider { width: 1px; height: 20px; background: var(--line); margin: 0 7px 0 14px; }
.search-panel { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; padding: 9px 27px; border-bottom: 1px solid var(--line); background: #f9faf5; }
.search-panel > svg { width: 17px; height: 17px; color: #8c9a82; flex: 0 0 auto; }
#search-input { flex: 1; min-width: 120px; height: 32px; padding: 3px 7px; background: transparent; border-color: transparent; border-radius: 5px; font-size: 12px; }
#search-input:focus { border-color: #cedac3; background: #fffef9; box-shadow: none; }
.search-count { font-size: 12px; color: #78876c; min-width: 67px; text-align: right; margin-right: 3px; }
.conversation-stage { flex: 1; min-height: 0; position: relative; }
#log { position: absolute; inset: 0; overflow: auto; padding: 25px 32px 24px; display: flex; flex-direction: column; gap: 19px; scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #d7ddcf transparent; }
.message-row { display: flex; align-items: flex-start; gap: 10px; max-width: 82%; align-self: flex-start; flex: 0 0 auto; }
.avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 33px; height: 33px; margin-top: 1px; border: 1px solid #e2e8d9; border-radius: 11px; background: #ebefdf; color: #7c895a; font-size: 13px; font-weight: 500; }
.message-content { min-width: 0; }
.message-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 1px; line-height: 1.2; }
.sender { color: #6e7c63; font-size: 12px; }
.message-time { color: #7d8a73; font-size: 11px; font-variant-numeric: tabular-nums; }
.bubble { padding: 10px 14px; border: 1px solid #e9ece3; border-radius: 0 11px 11px 11px; background: #f4f6ef; color: #46583c; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.message-body { white-space: pre-wrap; }
.message-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.message-row.mine .avatar { background: #dfe9d8; border-color: #d7e1cf; color: #547146; }
.message-row.mine .message-meta { justify-content: flex-end; margin-right: 1px; }
.message-row.mine .bubble { background: #e5eddc; border-color: #dce6d3; border-radius: 11px 0 11px 11px; color: #435d35; }
.message-row.search-hit .bubble { outline: 2px solid #e0d6a7; outline-offset: 2px; }
.message-row.search-current .bubble { outline-color: #9b9658; background: #f3eed5; }
.message-row mark { background: #eadb9d; color: inherit; border-radius: 2px; }
.date-divider { align-self: stretch; display: flex; align-items: center; gap: 17px; color: #818e76; font-size: 11px; margin: 0 9px 3px; flex: 0 0 auto; }
.date-divider::before, .date-divider::after { content: ""; height: 1px; background: #eceee5; flex: 1; }
.sys { align-self: center; color: #839079; font-size: 12px; padding: 0 8px; text-align: center; flex: 0 0 auto; }
.burn, .delivery { font-size: 11px; margin-top: 5px; color: #a38c5c; }
.delivery { display: block; color: #718460; }
.delivery.is-read { color: #426a43; cursor: help; }
.message-row.pending .bubble { opacity: .72; }
.retry-message { padding: 0 3px; color: #536e45; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.retry-message:hover { color: #273f24; }
.sticker { line-height: 0; padding: 2px; }
.sticker svg { width: 82px; height: 82px; }
.sticker img { display: block; width: 112px; height: 112px; object-fit: contain; }
.sticker.gif-sticker img { width: 128px; height: 128px; }
.gif-caption { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 7px; color: #718460; font-size: 12px; line-height: 1.5; }
.bubble.ash { opacity: 0; transform: scale(.96); transition: opacity .25s ease, transform .25s ease; }
.empty-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; pointer-events: none; padding: 40px 25px; text-align: center; }
.empty-art { width: 76px; height: 72px; color: #b0c1a4; margin-bottom: 23px; }
.empty-art svg { width: 100%; height: 100%; }
.empty-eyebrow { font-size: 12px; color: #85947a; letter-spacing: 1px; }
.empty-state h2 { font-family: var(--serif); color: #788a6c; font-size: 24px; font-weight: 500; letter-spacing: 1px; margin: 10px 0 13px; }
.empty-state > p:last-child { font-size: 13px; color: #85967a; line-height: 1.9; }
.jump-latest { position: absolute; bottom: 19px; left: 50%; transform: translateX(-50%); z-index: 2; background: var(--green); color: #fffdf5; font-size: 12px; border-radius: 24px; padding: 9px 17px; box-shadow: 0 4px 15px #253e2b21; gap: 5px; white-space: nowrap; }
.jump-latest svg { width: 16px; height: 16px; }
.jump-latest:hover { background: var(--green-dark); }
.jump-latest:not(:disabled):active { transform: translateX(-50%) translateY(1px); }
.room-footer { position: relative; flex: 0 0 auto; padding: 0 27px 13px; background: var(--paper); }
.composer { border: 1px solid #dde5d5; border-radius: 12px; background: #fcfdf9; box-shadow: 0 3px 12px #44603404; transition: border-color .16s, box-shadow .16s; }
.composer:focus-within { border-color: #9eb991; box-shadow: 0 0 0 3px #edf2e7; }
#text { display: block; width: 100%; min-height: 70px; max-height: 168px; padding: 17px 17px 10px; resize: none; overflow-y: auto; border: 0; background: transparent; font-size: 15px; line-height: 1.7; outline: none; box-shadow: none; scrollbar-width: thin; }
#text:focus-visible { outline: none; }
.composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 10px 10px 12px; }
.composer-tools, .send-tools { display: flex; align-items: center; gap: 11px; }
.tool-button { padding: 5px 4px; font-size: 12px; color: #74876a; border-radius: 5px; }
.tool-button:hover, .tool-button[aria-expanded="true"] { background: #eaf0e2; color: #577549; }
.tool-button svg { width: 18px; height: 18px; }
.toolbar-divider { width: 1px; height: 14px; background: #e1e7d9; }
.burn-control { display: flex; align-items: center; gap: 4px; color: #8e9b84; }
.burn-control svg { width: 16px; height: 16px; flex: 0 0 auto; }
#burn { border: 0; color: #738367; background: transparent; font-size: 11px; max-width: 195px; padding: 4px 2px; border-radius: 4px; }
#burn:hover { color: #557248; background: #edf2e6; }
.char-count { font-size: 11px; color: #8a9880; font-variant-numeric: tabular-nums; }
.char-count.near-limit { color: #ad7751; }
.send-button { height: 33px; min-width: 82px; padding: 0 13px; border-radius: 7px; font-size: 12px; gap: 9px; }
.send-button svg { height: 15px; width: 15px; }
.composer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 28px; padding: 7px 2px 0; }
#composer-note { min-height: 16px; color: #78876d; font-size: 11px; }
#composer-note.is-error { color: var(--danger); }
.keyboard-hint { color: #8a987f; font-size: 11px; white-space: nowrap; }
.keyboard-hint span { padding: 0 5px; }
kbd { font: inherit; }
.sticker-picker { position: absolute; left: 27px; bottom: calc(100% + 10px); width: 460px; max-width: calc(100% - 54px); max-height: min(510px, calc(100vh - 350px)); z-index: 4; display: flex; flex-direction: column; padding: 14px 16px 12px; border: 1px solid #dce5d2; border-radius: 14px; background: #fffffb; box-shadow: 0 12px 36px #29492e24; }
.sticker-picker::after { content: ""; position: absolute; bottom: -6px; left: 26px; width: 10px; height: 10px; background: #fffffb; border-right: 1px solid #dce5d2; border-bottom: 1px solid #dce5d2; transform: rotate(45deg); }
.sticker-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 10px; flex: 0 0 auto; }
.sticker-picker-heading h2 { color: var(--ink); font-size: 14px; font-weight: 600; }
.sticker-picker-heading .icon-button { margin-right: -4px; }
.sticker-search-field { position: relative; flex: 0 0 auto; }
.sticker-search-field > svg { position: absolute; top: 10px; left: 11px; width: 17px; height: 17px; color: #83927a; pointer-events: none; }
#sticker-search { height: 37px; padding: 0 11px 0 35px; font-size: 12px; background: #f6f8f1; border-color: #e3e8da; border-radius: 8px; }
#sticker-search:focus { background: #fffefa; border-color: #91ad84; box-shadow: 0 0 0 2px #edf2e6; }
.sticker-tabs { display: flex; align-items: center; gap: 5px; padding: 10px 0; flex: 0 0 auto; }
.sticker-tabs button { padding: 5px 12px; border: 1px solid transparent; border-radius: 7px; color: #75826b; font-size: 12px; line-height: 1.5; }
.sticker-tabs button:hover { color: var(--green); background: #f1f5e9; }
.sticker-tabs button[aria-selected="true"] { color: #416135; background: #eaf0e2; border-color: #dae5ce; font-weight: 600; }
.sticker-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-content: start; gap: 5px; min-height: 0; max-height: 306px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 7px; margin: 0 -4px; scrollbar-width: thin; scrollbar-color: #cfdbc4 transparent; }
.sticker-grid.gif-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.sticker-choice { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px 3px 7px; border: 1px solid transparent; border-radius: 9px; color: #65755b; background: transparent; line-height: 1; }
.sticker-choice:hover:not(:disabled) { background: #f0f5e8; border-color: #dce7d2; color: #39592e; }
.sticker-choice:focus-visible { outline-width: 2px; outline-offset: 0; border-color: #9bb88e; background: #f0f5e8; }
.sticker-choice .sticker-visual, .sticker-choice svg, .sticker-choice img { display: block; flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; }
.gif-grid .sticker-choice { padding-top: 10px; padding-bottom: 9px; background: #f8faf3; border-color: #edf1e5; }
.gif-grid .sticker-choice:hover:not(:disabled) { background: #edf3e5; border-color: #d8e5cb; }
.gif-grid .sticker-choice .sticker-visual, .gif-grid .sticker-choice svg, .gif-grid .sticker-choice img { width: 72px; height: 72px; }
.sticker-label { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 12px; line-height: 1.5; }
.gif-badge { display: inline-flex; align-items: center; padding: 2px 4px; border-radius: 4px; background: #e5eddc; color: #637952; font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: .3px; }
.sticker-choice .gif-badge { position: absolute; top: 4px; right: 4px; }
.sticker-empty { min-height: 125px; padding: 33px 22px; color: #7b8873; font-size: 13px; line-height: 1.9; text-align: center; white-space: pre-line; }
.sticker-picker-footer { flex: 0 0 auto; padding-top: 10px; margin-top: 7px; border-top: 1px solid #e8edde; }
.sticker-picker-settings { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#sticker-status { color: #7b8871; font-size: 12px; }
#animation-toggle { flex: 0 0 auto; padding: 3px 8px; border: 1px solid #dce5d2; border-radius: 6px; background: #f1f5eb; color: #59744a; font-size: 12px; line-height: 1.5; }
#animation-toggle[aria-pressed="false"] { background: #f9faf5; color: #7d8775; border-color: #e3e8da; }
#animation-toggle:hover { background: #e8f0de; border-color: #becfaf; color: #3b5b2e; }
.sticker-attribution { display: inline-block; margin-top: 5px; color: #859178; font-size: 10px; line-height: 1.6; text-decoration: none; }
.sticker-attributions { display: flex; flex-wrap: wrap; column-gap: 14px; }
.sticker-attribution:hover { color: #4c6940; text-decoration: underline; text-underline-offset: 3px; }
.sticker-attribution:focus-visible { outline: 2px solid #88a98d; outline-offset: 3px; border-radius: 2px; }
.room-info { width: 492px; max-width: calc(100vw - 80px); padding: 30px 34px 32px; color: var(--body); background: #fffef9; border: 1px solid #dce4d2; border-radius: 17px; box-shadow: 0 25px 100px #21312726; }
.room-info::backdrop { background: #26362c45; backdrop-filter: blur(3px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.dialog-header .eyebrow { font-size: 9px; color: #8c9a7c; }
.dialog-header .icon-button { margin-right: -9px; margin-top: -11px; }
.room-info h2 { color: #48603a; font-size: 23px; font-family: var(--serif); font-weight: 500; letter-spacing: .4px; }
.dialog-intro { color: #78876c; font-size: 13px; margin: 11px 0 22px; line-height: 1.8; }
.room-rule { display: flex; align-items: baseline; gap: 15px; border-top: 1px solid #e9ecdf; padding: 18px 0; }
.room-rule > span { font-size: 10px; color: #a6b196; letter-spacing: 1px; }
.room-rule h3 { font-size: 14px; font-weight: 500; color: #657956; }
.room-rule p { font-size: 13px; line-height: 1.9; color: #78896b; margin-top: 6px; }
.dialog-tip { font-size: 12px; color: #758964; background: #f0f4e9; border-radius: 7px; padding: 10px 12px; margin-top: 6px; }
.notification-button { position: relative; }
.notification-enabled-dot { display: none; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px #fffef9; }
.notification-button[data-enabled="true"] .notification-enabled-dot { display: block; }
.notification-preference { border: 1px solid #dde5d6; padding: 17px 18px; border-radius: 11px; background: #fafbf6; }
.notification-preference-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.notification-preference h3 { color: #4d6540; font-size: 14px; font-weight: 600; }
.notification-state { color: #839076; background: #eef2e8; border-radius: 20px; padding: 3px 9px; font-size: 11px; }
.notification-state[data-state="enabled"] { color: #3d683f; background: #e3efdf; }
.notification-state[data-state="blocked"] { color: #967546; background: #f3eddc; }
.notification-preference p { color: #7b886d; font-size: 12px; line-height: 1.8; margin: 11px 0 15px; }
.notification-toggle { width: 100%; min-height: 39px; font-size: 13px; }
.notification-toggle[aria-pressed="true"] { background: #eaf0e2; color: #577145; box-shadow: none; }
.notification-toggle[aria-pressed="true"]:hover { background: #dde8d3; }
.notification-test { width: 100%; min-height: 39px; margin-top: 9px; }
.notification-test:disabled { opacity: .5; cursor: not-allowed; }
.notification-preference .notification-feedback { margin: 12px 0 0; color: #637951; }
.notification-feedback[data-state="error"], .notification-feedback[data-state="unknown"] { color: #967546; }
.notification-notes { color: #7b886d; font-size: 12px; line-height: 1.8; margin: 19px 0; padding-left: 17px; }
.notification-notes li + li { margin-top: 5px; }
.room-panel { position: relative; }
.image-drop-zone { position: absolute; inset: 12px; z-index: 12; display: grid; place-items: center; pointer-events: none; border: 2px dashed #8cab7c; border-radius: 14px; background: #f1f6ecef; }
.image-drop-zone > div { display: flex; align-items: center; flex-direction: column; gap: 12px; color: #5b7b48; }
.image-drop-zone svg { width: 52px; height: 52px; margin-bottom: 5px; }
.image-drop-zone strong { color: #426338; font-size: 21px; font-weight: 500; }
.image-drop-zone span { color: #78896c; font-size: 13px; }
.image-preview { width: 620px; max-height: calc(100vh - 60px); padding: 25px 28px 24px; overflow: auto; }
.image-preview h2 { font-size: 23px; }
.image-preview-note { color: #7b8871; font-size: 12px; margin: 8px 0 17px; }
.image-preview-stage { display: grid; place-items: center; min-height: 170px; max-height: min(440px, calc(100vh - 330px)); overflow: hidden; border: 1px solid #e4e9dc; border-radius: 10px; background: repeating-conic-gradient(#f3f5ee 0% 25%, #fafbf7 0% 50%) 50% / 20px 20px; }
.image-preview-stage img { display: block; max-width: 100%; max-height: min(440px, calc(100vh - 330px)); object-fit: contain; }
.image-preview-stage p { color: #7d8a70; font-size: 13px; padding: 30px; }
.image-preview-details { display: flex; justify-content: space-between; gap: 20px; margin-top: 11px; font-size: 12px; color: #738469; }
#image-preview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#image-preview-size { flex: 0 0 auto; color: #8a9781; }
.image-preview-status { min-height: 24px; padding-top: 6px; color: #788b6b; font-size: 12px; }
.image-preview-status.is-error { color: var(--danger); }
.image-preview-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 13px; }
.image-preview-actions button { min-width: 94px; min-height: 39px; font-size: 13px; padding: 7px 16px; }
.chat-image-button { display: block; padding: 0; border-radius: 7px; overflow: hidden; background: #f6f8f1; line-height: 0; cursor: zoom-in; max-width: 100%; }
.chat-image-button:not(:disabled):active { transform: none; }
.chat-image { display: block; max-width: min(360px, 100%); max-height: 300px; width: auto; height: auto; object-fit: contain; }
.chat-image-caption { display: block; max-width: 360px; margin-top: 6px; color: #79896c; font-size: 11px; line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.image-viewer { width: min(1200px, calc(100vw - 100px)); max-width: calc(100vw - 100px); max-height: calc(100vh - 70px); padding: 18px 22px 12px; border: 1px solid #dce4d2; border-radius: 15px; background: #fffef9; color: var(--body); box-shadow: 0 25px 100px #182b293d; overflow: auto; }
.image-viewer::backdrop { background: #1d2b25b3; backdrop-filter: blur(4px); }
.image-viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 14px; }
.image-viewer-heading > div { min-width: 0; }
.image-viewer h2 { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#image-viewer-size { color: #89967f; font-size: 11px; margin-top: 3px; }
.image-viewer-stage { display: grid; place-items: center; min-height: 80px; background: repeating-conic-gradient(#f0f3eb 0% 25%, #f9faf6 0% 50%) 50% / 24px 24px; border-radius: 8px; overflow: hidden; }
.image-viewer-stage img { display: block; max-width: 100%; max-height: calc(100vh - 200px); object-fit: contain; }
.image-viewer-hint { color: #94a08b; font-size: 11px; text-align: center; margin-top: 10px; }
.toast { position: fixed; bottom: 33px; left: 50%; transform: translateX(-50%); z-index: 20; max-width: 560px; padding: 11px 19px; background: #2e4b36; color: #f8faef; border-radius: 9px; box-shadow: 0 5px 24px #243b2a20; font-size: 12px; }
@media (max-height: 760px) and (min-width: 900px) {
  .gate-shell { min-height: 625px; margin-top: 28px; margin-bottom: 28px; }
  .gate-story { padding-top: 32px; padding-bottom: 25px; }
  .story-copy { margin-top: 33px; }
  .story-copy h2 { font-size: 40px; }
  .conversation-art { height: 181px; transform: scale(.9); transform-origin: center top; margin-bottom: 14px; }
  .story-footer { margin-top: 35px; }
  .gate-form-panel { padding-top: 25px; }
  .sidebar-notes { padding-top: 22px; padding-bottom: 20px; }
  .sidebar-invite { padding-top: 14px; }
  .invite-art { display: none; }
}
@media (min-width: 1700px) { .room-shell { height: calc(100vh - 80px); margin-top: 40px; margin-bottom: 40px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Keep the full run available while avoiding layout/paint for offscreen rows. */
.message-row { content-visibility: auto; contain-intrinsic-size: auto 90px; }
.message-row:hover, .message-row:focus-within, .message-row.search-hit { content-visibility: visible; }
#log[aria-busy="true"] .message-row { content-visibility: hidden; }
.room-upgrade-notice { flex-shrink: 0; }

/* A block flow can append history without relaying out every prior flex item. */
#log { display: block; }
#log > .message-row { width: fit-content; margin-bottom: 19px; }
#log > .message-row.mine { margin-left: auto; }
#log > .sys { width: fit-content; margin: 0 auto 19px; }
#log > .date-divider { margin-bottom: 22px; }

/* Keep the conversation surface quiet; detailed rules live in the privacy dialog. */
.room-sidebar > .brand { margin-bottom: 24px; }
.room-sidebar .sidebar-invite { padding: 0; background: transparent; border: 0; margin-top: auto; }
.sidebar-invite .invite-button { margin-top: 0; }
.sidebar-privacy { align-self: center; margin-top: 18px; font-size: 14px; }
#history-status:empty { display: none; }
.empty-art { margin-bottom: 12px; }


/* Compact message tools appear on hover and keyboard focus. */
.message-content { position: relative; }
.message-actions { position: absolute; z-index: 4; left: -1px; top: -12px; display: flex; align-items: center; width: max-content; max-width: 350px; padding: 3px; border: 1px solid #dce5d4; border-radius: 8px; background: #fffef9; box-shadow: 0 3px 12px #314a2412; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .13s, transform .13s; }
.message-row.mine .message-actions { left: auto; right: -1px; }
.message-row:hover .message-actions, .message-row:focus-within .message-actions { opacity: 1; transform: translateY(0); pointer-events: auto; }
.message-action { padding: 4px 8px; border-radius: 5px; color: #627653; font-size: 11px; white-space: nowrap; line-height: 1.4; }
.message-action:hover { background: #eff4e8; color: #36582b; }
.message-action[data-action="revoke"]:hover { color: #9d604c; background: #fbefe8; }
.message-action:disabled, .reaction-chip:disabled { cursor: default; opacity: .5; }
.message-action:focus-visible, .reaction-choice:focus-visible, .reaction-chip:focus-visible, .message-quote:focus-visible, .pin-link:focus-visible, .interaction-composecopy:focus-visible { outline: 2px solid #8eaf7d; outline-offset: 2px; }
.message-row.revoked .bubble { background: #f5f6f0; border-color: #e7e9df; }
.message-tombstone { display: block; color: #89927f; font-size: 12px; font-style: normal; padding: 2px 0; }
.message-edited, .message-pinned { color: #8a957e; font-size: 10px; white-space: nowrap; }
.message-pinned { color: #74805a; border: 1px solid #dde3d1; border-radius: 4px; padding: 1px 4px; }
.message-quote { display: flex; flex-direction: column; width: 100%; min-width: 140px; max-width: 410px; gap: 3px; padding: 7px 10px; margin: 0 0 9px; border-left: 2px solid #9fb687; border-radius: 0 5px 5px 0; background: #eaf0e1; color: #6e805f; text-align: left; line-height: 1.55; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.message-row.mine .message-quote { background: #dbe6cd; border-color: #8ba976; }
.message-quote strong { font-size: 11px; font-weight: 500; color: #567444; }
.message-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.message-quote:hover { filter: brightness(.98); }
.message-quote:disabled { cursor: default; opacity: .7; }
.message-reactions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; max-width: 360px; }
.message-row.mine .message-reactions { justify-content: flex-end; }
.reaction-chip { border: 1px solid #e2e8d9; border-radius: 14px; padding: 2px 8px; color: #738266; background: #fbfcf7; font-size: 12px; line-height: 1.6; }
.reaction-chip:hover { background: #f0f5e8; border-color: #c4d6b4; }
.reaction-chip.selected { color: #486c33; background: #eaf3dd; border-color: #adc59a; }
.interaction-composebar { display: flex; align-items: center; gap: 12px; padding: 9px 13px; border-bottom: 1px solid #e5ebdc; border-radius: 11px 11px 0 0; background: #f1f5e9; }
.interaction-composebar[hidden] { display: none; }
.interaction-composebar.is-editing { background: #f5f2e6; border-color: #e9e3ce; }
.interaction-composecopy { flex: 1; min-width: 0; text-align: left; font-size: 12px; color: #627b50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.interaction-composecopy:disabled { opacity: 1; cursor: default; }
.interaction-cancel { color: #809070; font-size: 11px; padding: 3px 5px; border-radius: 4px; }
.interaction-cancel:hover { background: #e5edda; color: #476837; }
.pins-toggle { position: relative; }
.pin-count { position: absolute; top: 1px; right: 0; min-width: 14px; height: 14px; padding: 0 3px; border: 1px solid #fffef9; border-radius: 8px; background: #698855; color: white; font-size: 9px; line-height: 12px; }
.pin-count[hidden] { display: none; }
.interaction-dialog { position: fixed; max-height: min(680px, calc(100vh - 80px)); overflow-y: auto; }
.interaction-dialog .dialog-close { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border-radius: 6px; color: #849179; font-size: 22px; line-height: 24px; }
.interaction-dialog .dialog-close:hover { background: #eff3e8; color: #4d693e; }
.interaction-help { color: #7c8a71; font-size: 12px; line-height: 1.8; margin: 12px 0 19px; }
.interaction-preview { color: #667956; font-size: 13px; line-height: 1.7; background: #f2f5eb; border: 1px solid #e5ebdb; border-radius: 9px; padding: 12px 14px; margin: 17px 0 22px; overflow-wrap: anywhere; white-space: pre-wrap; max-height: 140px; overflow: auto; }
.reaction-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.reaction-choice { font-size: 27px; height: 58px; border: 1px solid #e6ecdd; border-radius: 11px; background: #fafcf5; }
.reaction-choice:hover, .reaction-choice.selected { background: #eaf3df; border-color: #aabd99; }
.reaction-choice:disabled { opacity: .45; cursor: default; }
.interaction-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.interaction-dialog-actions button { font-size: 13px; padding: 9px 17px; min-height: 36px; }
.pin-list { display: flex; flex-direction: column; gap: 12px; }
.pins-empty { color: #8b967f; font-size: 13px; line-height: 1.8; padding: 24px 12px; text-align: center; border: 1px dashed #dfe6d5; border-radius: 10px; }
.pin-card { padding: 13px 15px; border: 1px solid #e3e9d9; border-radius: 10px; background: #fafbf5; }
.pin-link { display: flex; flex-direction: column; width: 100%; gap: 6px; text-align: left; border-radius: 4px; }
.pin-link:disabled { cursor: default; }
.pin-author { color: #7d8b70; font-size: 11px; }
.pin-excerpt { color: #4e6840; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.pin-link:hover .pin-excerpt { text-decoration: underline; text-decoration-color: #b0c29f; text-underline-offset: 4px; }
.pin-detail { display: flex; justify-content: space-between; gap: 15px; margin-top: 11px; padding-top: 9px; border-top: 1px solid #e8eddf; font-size: 10px; color: #8a967e; }
.pin-detail .text-button { font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .message-actions { transition: none; } }


/* People and lightweight room interactions. */
.social-members { padding: 6px 7px 18px; margin-top: 1px; }
.social-members-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
#member-count { font-size:11px; color:#738367; white-space:nowrap; }
.social-members-more { font-size:10px; white-space:nowrap; }
.social-sidebar-list, .social-member-list { list-style:none; padding:0; margin:0; }
.social-sidebar-list li { display:flex; align-items:center; gap:8px; min-height:33px; font-size:12px; color:#53664a; }
.social-sidebar-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.social-member-avatar { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:0 0 auto; border-radius:9px; background:#e4eadb; color:#657e52; font-size:11px; }
.social-member-state { color:#8a957e; font-size:10px; margin-left:auto; white-space:nowrap; }
.social-members-overflow, .social-members-empty { color:#8a957e !important; font-size:11px !important; padding-left:2px; }
.social-member-toggle { flex:0 0 auto; }
.social-member-dialog { width:440px; }
.social-member-list { max-height:350px; overflow-y:auto; margin:2px -2px 22px; padding:2px; }
.social-member-list li { display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid #edf0e8; padding:12px 0; }
.social-member-list li:last-child { border:0; }
.social-member-identity { display:flex; align-items:center; gap:9px; min-width:0; }
.member-name { font-size:13px; color:#516444; overflow:hidden; text-overflow:ellipsis; }
.social-member-actions { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.social-member-actions button { color:#668053; border:1px solid #dce6d3; border-radius:7px; padding:6px 8px; background:#f8faf4; font-size:11px; }
.social-member-actions button:hover { background:#ecf2e4; }
.social-member-actions button:disabled { opacity:.45; cursor:not-allowed; }
.social-poke-setting { display:flex; align-items:flex-start; gap:10px; padding:16px 0 0; border-top:1px solid #e6ebdf; cursor:pointer; }
.social-poke-setting input { margin-top:3px; accent-color:#6f8d59; }
.social-poke-setting strong { display:block; font-size:13px; font-weight:500; color:#5a704c; }
.social-poke-setting small { display:block; margin-top:5px; line-height:1.65; color:#839177; font-size:11px; }
.social-offline-hint { padding:0 0 15px; font-size:12px; color:#859479; }
.social-typing { color:#7f8e73; font-size:11px; margin:0 2px 6px; min-height:15px; line-height:15px; }
.composer { position:relative; }
.mention-suggestions { position:absolute; left:10px; bottom:calc(100% + 7px); width:270px; padding:7px; border:1px solid #dce5d3; border-radius:12px; background:#fcfdf9; box-shadow:0 10px 35px #354a3220; z-index:35; max-height:310px; overflow-y:auto; }
.mention-suggestions-label { display:block; padding:6px 8px 8px; font-size:10px; color:#8a967f; }
.mention-option { display:flex; align-items:center; gap:9px; padding:8px; width:100%; border:0; border-radius:7px; background:transparent; text-align:left; color:#4e6643; font-size:12px; }
.mention-option[aria-selected="true"], .mention-option:hover { background:#edf3e6; }
.mention-inbox { border:1px solid #d7e5c7; border-radius:20px; color:#678347; background:#f3f7e9; padding:6px 10px; font-size:11px; white-space:nowrap; }
.mention-inbox:hover { background:#e9f0dc; }
.mention-badge { color:#7c793b; background:#f5edc5; border-radius:4px; font-size:10px; padding:1px 5px; white-space:nowrap; }
.message-row.mentions-me > .message-content > .bubble { border-color:#c1ce9e; box-shadow:0 0 0 2px #e9eedc; }
.avatar[data-poke-ready] { cursor:pointer; }
.avatar[data-poke-ready]:hover { box-shadow:0 0 0 3px #e4eadb; }
.avatar[data-poke-ready]:focus-visible { outline:2px solid #8da66c; outline-offset:3px; }
.social-poke-toast { position:fixed; z-index:80; bottom:30px; right:34px; display:flex; align-items:center; gap:12px; padding:12px 38px 12px 12px; border:1px solid #e5dec3; border-radius:16px; background:#fffdf1; box-shadow:0 12px 34px #64582d20; animation:poke-arrive .25s ease-out; }
.social-poke-art { width:78px; height:78px; object-fit:contain; }
.poke-caption { max-width:220px; font-size:13px; color:#766b48; overflow-wrap:anywhere; }
.social-poke-dismiss { position:absolute; right:9px; top:7px; border:0; background:none; color:#a1987e; font-size:20px; line-height:24px; width:24px; height:24px; }
.social-poke-toast.is-still { animation:none; }
@keyframes poke-arrive { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@media (max-height:850px) { .social-members { padding-bottom:10px; } .social-sidebar-list li { min-height:29px; } .sidebar-notes { padding-top:19px; padding-bottom:16px; } }
@media (prefers-reduced-motion:reduce) { .social-poke-toast { animation:none; } }


/* Shared desktop details for room tools, polls and the gallery. */
#log[aria-busy="true"] { visibility: hidden; }
.room-sidebar { overflow-y: auto; scrollbar-width: thin; }
.room-sidebar > * { flex-shrink: 0; }
.sidebar-invite { margin-top: auto; }
.social-poke-setting input { width: 16px; height: 16px; padding: 0; flex: 0 0 auto; box-shadow: none; }
.feature-dialog { width: 520px; max-height: calc(100vh - 70px); overflow-y: auto; }
.feature-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.feature-dialog-heading h2 { margin: 0; }
.feature-dialog label { display: block; font-size: 13px; margin: 17px 0 7px; color: #5e7152; }
.feature-dialog input { height: 42px; font-size: 13px; }
#poll-options { display: block; width: 100%; resize: vertical; min-height: 125px; max-height: 260px; border: 1px solid #dfe5d6; border-radius: 8px; padding: 11px 13px; background: #fbfcf8; color: var(--ink); font-size: 13px; line-height: 1.8; }
.feature-help { font-size: 12px; color: #809074; line-height: 1.8; margin: 12px 0; }
.feature-dialog-actions { display: flex; justify-content: flex-end; margin-top: 17px; }
.feature-dialog-actions button { padding: 9px 20px; min-height: 40px; font-size: 13px; }
.poll-card { min-width: min(290px, 100%); width: 330px; max-width: 100%; }
.poll-kicker { font-size: 10px; color: #7d8d6f; }
.poll-question { color: #405d35; font-size: 15px; font-weight: 600; margin: 5px 0 12px; line-height: 1.7; white-space: pre-wrap; }
.poll-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; overflow: hidden; padding: 8px 10px; margin-top: 7px; border: 1px solid #d8e3d0; border-radius: 7px; background: #fffffa; font-size: 12px; line-height: 1.7; text-align: left; }
.poll-option.selected { border-color: #709660; }
.poll-option:disabled { opacity: 1; }
.poll-option:not(:disabled):hover { border-color: #86a675; }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #e7efdb; pointer-events: none; }
.poll-option-label, .poll-option-count { position: relative; z-index: 1; }
.poll-option-label { overflow-wrap: anywhere; }
.poll-option-count { color: #788a6b; font-size: 11px; white-space: nowrap; }
.poll-footer { display: flex; align-items: center; gap: 13px; margin-top: 11px; flex-wrap: wrap; }
.poll-total { font-size: 11px; color: #829174; margin-right: auto; }
.poll-footer button { font-size: 11px; }
.gallery-dialog { width: 780px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; max-height: min(560px,calc(100vh - 260px)); overflow-y: auto; padding: 2px; }
.gallery-item { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; min-width: 0; border: 1px solid #e1e7d9; border-radius: 9px; text-align: left; background: #f8faf4; }
.gallery-item:hover { background: #eef3e5; border-color: #bcccae; }
.gallery-item img { width: 100%; height: 132px; object-fit: contain; background: #edf1e7; border-radius: 5px; }
.gallery-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #5b704e; }
.gallery-item small { font-size: 10px; color: #8c987e; }
.gallery-empty { padding: 40px 0; text-align: center; color: #89957e; }
.gallery-navigation { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.gallery-counter { font-size: 12px; color: #839176; min-width: 45px; text-align: center; }
.message-located .bubble { outline: 2px solid #9db486; outline-offset: 3px; }
.action-status { display: flex; justify-content: center; align-items: center; gap: 13px; margin-top: 6px; padding: 7px 10px; font-size: 12px; color: #92714c; background: #faf2e2; border-radius: 7px; }
@media (max-height: 900px) { .sidebar-notes { display: none; } .social-members { margin-top: 23px; } .sidebar-invite { margin-top: 20px; } }
@media (max-width: 1190px) {
  .room-header { flex-wrap: wrap; padding-top: 17px; padding-bottom: 15px; row-gap: 9px; }
  .header-actions { margin-left: auto; }
  .room-heading h1 { font-size: 16px; }
  #history-status { font-size: 11px; }
  .composer-tools, .send-tools { gap: 7px; }
  #burn { max-width: 150px; }
}


.transfer-dialog { width:min(500px,calc(100vw - 48px)); }
.transfer-dialog input[type="file"] { margin:12px 0; padding:10px; font-size:12px; }
.attachment-preview { display:flex; flex-direction:column; gap:6px; padding:12px; margin:6px 0; border:1px solid var(--line); border-radius:10px; background:var(--green-light); overflow-wrap:anywhere; }
.attachment-preview[hidden], .transfer-progress-list[hidden], .voice-recorder [hidden], .transfer-dialog audio[hidden], .transfer-dialog button[hidden] { display:none; }
.attachment-preview small, .attachment-size { color:var(--muted); font-size:11px; }
.transfer-progress-list { display:flex; flex-direction:column; gap:6px; max-height:126px; overflow:auto; margin-bottom:10px; }
.transfer-progress-item { display:flex; align-items:center; gap:10px; min-width:0; padding:8px 12px; border-radius:9px; background:var(--green-light); border:1px solid var(--line); font-size:11px; }
.transfer-progress-name { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.transfer-progress-status { color:var(--muted); flex:1; }
.transfer-progress-item button { white-space:nowrap; font-size:11px; }
.transfer-progress-item button[hidden] { display:none; }
.attachment-card { display:flex; flex-direction:column; gap:7px; min-width:210px; max-width:340px; }
.attachment-kind { color:var(--muted); font-size:10px; letter-spacing:.05em; }
.attachment-name { font-weight:600; font-size:13px; overflow-wrap:anywhere; line-height:1.5; }
.attachment-download { align-self:flex-start; color:var(--green); font-size:12px; text-decoration:none; padding:3px 0; border-bottom:1px solid currentColor; }
.attachment-download:hover { opacity:.7; }
.attachment-error { color:var(--muted); font-size:11px; line-height:1.6; }
.chat-voice { width:280px; max-width:100%; height:40px; margin:4px 0; }
.voice-card .attachment-name { display:none; }
.voice-card .attachment-size { font-size:10px; }
.voice-recorder { display:flex; gap:12px; align-items:center; margin:20px 0; }
.voice-recorder output { margin-left:auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
#voice-preview { width:100%; margin:0 0 16px; }
.voice-file-label { display:block; font-size:12px; color:var(--muted); margin-top:14px; }
.composer-tools { flex-wrap:wrap; row-gap:4px; }
@media(max-width:1100px) { .composer-tools { gap:3px; } .composer-tools .tool-button { padding-left:7px; padding-right:7px; } .transfer-progress-name { max-width:140px; } }


/* One quiet home for the room's shared notes, tasks and small games. */
.shared-dialog { width: 690px; max-width: calc(100vw - 90px); max-height: calc(100vh - 70px); overflow-y: auto; }
.shared-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.shared-heading h2 { margin: 0; font-size: 23px; }
.shared-intro { color: #7d8c73; font-size: 12px; line-height: 1.8; margin: 12px 0 21px; }
.shared-tabs { display: flex; gap: 6px; padding: 5px; background: #eef2e7; border-radius: 10px; margin-bottom: 23px; }
.shared-tab { flex: 1; border: 0; border-radius: 7px; background: transparent; padding: 9px 12px; color: #7a8b6d; font-size: 13px; }
.shared-tab[aria-selected="true"] { background: #fffffc; color: #365846; box-shadow: 0 1px 5px #2e49300b; }
.shared-tab:not([aria-selected="true"]):hover { background: #e6ecde; }
.shared-panel[hidden], .shared-conflict[hidden] { display: none; }
.shared-label { display: block; color: #52674a; font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.shared-textarea { width: 100%; display: block; resize: vertical; min-height: 110px; max-height: 270px; padding: 13px 15px; border: 1px solid #dce4d2; border-radius: 9px; background: #fbfcf8; color: var(--ink); line-height: 1.9; font-size: 13px; }
.shared-textarea:focus { outline: 2px solid #bdd0b2; outline-offset: 2px; }
.shared-textarea:read-only { color: #8b967f; }
.shared-help { color: #849276; font-size: 12px; line-height: 1.8; margin: 10px 0; }
.shared-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 17px; flex-wrap: wrap; }
.shared-actions > button, .shared-game-tool > button { min-height: 38px; padding: 8px 17px; font-size: 12px; }
.shared-note-actions .shared-help { margin-right: auto; }
.shared-conflict { padding: 13px 16px; border: 1px solid #e7d8b8; border-radius: 9px; background: #faf5e9; color: #877348; }
.shared-conflict > p { margin: 0; font-size: 12px; line-height: 1.8; }
.shared-note-remote { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow-y: auto; color: #667154; background: #fffdf7; padding: 10px; margin: 10px 0 0; border-radius: 5px; font: inherit; font-size: 12px; }
.shared-conflict .shared-actions { justify-content: flex-start; margin-top: 11px; }
.shared-task-entry { display: flex; align-items: center; gap: 10px; }
.shared-task-entry input { flex: 1; min-width: 0; height: 42px; font-size: 13px; }
.shared-task-entry button { flex-shrink: 0; height: 42px; padding: 0 18px; font-size: 12px; }
.shared-task-list { list-style: none; padding: 0; margin: 15px 0 0; max-height: min(390px, calc(100vh - 360px)); overflow-y: auto; }
.shared-task { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; padding: 12px 3px; border-bottom: 1px solid #e6ebdf; }
.shared-task-label { display: flex; gap: 11px; align-items: flex-start; flex: 1; min-width: 0; cursor: pointer; font-size: 13px; line-height: 1.8; }
.shared-task-label input { width: 16px; height: 16px; padding: 0; margin: 4px 0 0; box-shadow: none; accent-color: #426b54; flex: 0 0 auto; }
.shared-task-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.shared-task.is-done .shared-task-text { text-decoration: line-through; color: #9ba58e; }
.shared-task > button { flex-shrink: 0; margin-top: 3px; font-size: 11px; }
.shared-timer-display { text-align: center; background: #f0f4e9; border-radius: 13px; padding: 19px 15px 15px; margin: 0 0 20px; }
.shared-timer-value { color: #8a977a; font-size: 27px; letter-spacing: .01em; font-variant-numeric: tabular-nums; margin: 0 0 2px; }
.shared-timer-value.is-running { color: #426548; font-size: 45px; font-weight: 500; }
.shared-timer-display .shared-help { margin: 5px 0 0; overflow-wrap: anywhere; }
.shared-timer-form > input { height: 42px; font-size: 13px; margin-bottom: 18px; }
.shared-timer-entry { display: flex; align-items: center; gap: 12px; }
.shared-timer-entry input { width: 105px; height: 41px; font-size: 14px; }
.shared-timer-presets { display: flex; gap: 8px; margin: 11px 0; }
.shared-timer-presets button { padding: 6px 12px; font-size: 11px; }
.shared-game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shared-game-tool { border: 1px solid #e1e8d8; border-radius: 11px; padding: 18px; background: #fafbf6; }
.shared-game-icon { color: #658356; font-size: 32px; line-height: 1.1; display: block; margin-bottom: 10px; }
.shared-game-tool h3 { color: #486140; font-size: 15px; margin: 0; }
.shared-game-tool .shared-help { margin: 7px 0 13px; }
.shared-game-tool button { margin-top: 4px; }
.shared-draw-form { padding-top: 23px; margin-top: 21px; border-top: 1px solid #e2e8d9; }
.shared-draw-form .shared-textarea { min-height: 100px; max-height: 180px; }
.game-card { display: flex; flex-direction: column; min-width: 190px; max-width: 320px; gap: 7px; padding: 2px 3px 3px; }
.game-kicker, .game-footnote { font-size: 11px; color: #829176; }
.game-result { font-size: 21px; font-weight: 500; color: #3f654b; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.5; }
.game-die { font-size: 57px; line-height: 1.1; color: #5a7750; }
.game-details { font-size: 11px; line-height: 1.8; color: #7c8d70; }
.game-details summary { cursor: pointer; }
.game-details ul { margin: 6px 0 0; padding-left: 19px; max-height: 150px; overflow-y: auto; overflow-wrap: anywhere; }
@media (max-height: 850px) { .shared-dialog { padding: 25px 30px; } .shared-intro { margin-bottom: 15px; } .shared-tabs { margin-bottom: 17px; } .shared-game-tool { padding: 13px 16px; } .shared-draw-form { margin-top: 15px; padding-top: 15px; } }


.room-management { width: 560px; max-height: calc(100vh - 64px); }
.room-management h3 { margin: 0 0 9px; font-size: 14px; color: #526b42; }
.room-management section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e4e9db; }
.room-access-status { margin: -5px 0 13px; font-size: 12px; color: #758768; }
.room-announcement-copy { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.9; background: #f1f5e9; padding: 12px 15px; border-radius: 8px; color: #536d43; }
.room-announcement-banner { flex-shrink: 0; width: 100%; padding: 9px 28px; border: 0; border-bottom: 1px solid #e3e9d8; background: #f2f5e8; color: #657a52; text-align: left; font-size: 12px; line-height: 1.7; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.room-announcement-banner:hover { background: #eaf0dc; }
.room-inline { display: flex; align-items: center; gap: 10px; }
.room-inline > input, .room-inline > select { flex: 1; min-width: 0; }
.room-inline > button { flex-shrink: 0; min-height: 40px; padding: 8px 16px; font-size: 12px; }
.room-management select { height: 42px; border: 1px solid #dfe5d6; background: #fbfcf8; border-radius: 8px; padding: 0 12px; font-size: 12px; color: #5f744e; }
.room-management textarea { width: 100%; resize: vertical; min-height: 92px; max-height: 250px; background: #fbfcf8; border: 1px solid #dfe5d6; border-radius: 8px; padding: 11px 13px; font-size: 13px; line-height: 1.8; color: var(--ink); }
.room-owner-badge { font-size: 12px; color: #557340; margin: 16px 0 -2px; }
.room-management .room-check { display: flex; align-items: flex-start; gap: 11px; margin: 14px 0; cursor: pointer; }
.room-management .room-check input { width: 16px; height: 16px; flex: 0 0 16px; margin: 2px 0 0; padding: 0; accent-color: #73935c; }
.room-check span { font-size: 13px; line-height: 1.6; }
.room-check small { display: block; color: #879779; font-size: 11px; margin-top: 3px; }
.room-section-actions { justify-content: space-between; }
#room-invite-revoke { font-size: 12px; margin-top: 13px; }
.room-manage-members { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.room-manage-members li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid #edf0e8; font-size: 13px; color: #617353; }
.room-manage-members li > span { min-width: 0; overflow-wrap: anywhere; }
.room-member-remove { flex-shrink: 0; font-size: 12px; }
.room-remove-confirm { margin-top: 13px; padding: 13px; border-radius: 8px; background: #faf0e6; font-size: 12px; color: #8b6952; }
.room-remove-confirm p { margin: 0 0 12px; overflow-wrap: anywhere; }
.room-remove-confirm button { padding: 7px 13px; margin-right: 8px; }
.room-danger { color: #98584e; border-color: #e4c7b7; }
.room-lifecycle-note { border-top: 1px solid #e4e9db; padding-top: 15px; margin-bottom: 0; }
.room-owner-entry { margin: 12px 0 0; font-size: 12px; color: #839474; }
.room-owner-entry summary { cursor: pointer; width: fit-content; }
.room-owner-entry label { font-size: 12px; }
.room-owner-entry input { height: 42px; font-size: 12px; }
@media (max-width: 1190px) { .room-announcement-banner { padding-left: 22px; padding-right: 22px; } }

.room-reset-notice { display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 28px;background:#fff0be;border-bottom:2px solid #cc9b30;color:#614613;flex-shrink:0; }
.room-reset-notice strong {font-size:16px;line-height:1.6;}
.room-reset-notice p {font-size:14px;margin:3px 0 0;}
.gate-notice {padding:14px;background:#fff0be;color:#614613;border-radius:8px;font-size:14px;line-height:1.7;}
.room-management .feature-help {font-size:14px;line-height:1.75;}
#room-rotate-form input {display:block;width:100%;margin:7px 0 12px;}
#room-rotate-form label {font-size:14px;}
#room-rotate-form button {margin-top:8px;}
#invite-fallback-url {width:100%;margin:12px 0 20px;}
#action-confirm-copy {white-space:pre-line;}
.delivery[role=button] {cursor:pointer;text-decoration:underline;text-underline-offset:3px;}


.desktop-dialog { width: 590px; max-height: calc(100vh - 64px); overflow-y: auto; }
.desktop-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.desktop-dialog-heading h2 { margin:0; }
.desktop-header-button { padding:7px 10px; font-size:12px; border:1px solid #dce4d2; border-radius:7px; background:#f8faf4; white-space:nowrap; }
.desktop-header-button.has-unread { background:#e5efdc; color:#4b6e3b; border-color:#b7caa7; }
.desktop-tabs { display:flex; gap:7px; flex-wrap:wrap; margin:13px 0; }
.desktop-tab { background:transparent; border:1px solid #dbe4d2; border-radius:6px; padding:6px 10px; font-size:12px; }
.desktop-tab[aria-pressed=true] { background:#e6efdc; border-color:#b3c99f; }
.activity-list { max-height:45vh; overflow-y:auto; margin-bottom:17px; }
.activity-item { display:flex; flex-direction:column; gap:6px; text-align:left; width:100%; padding:12px; margin-bottom:8px; background:#f5f8ef; border:1px solid #e2e8d9; border-radius:8px; }
.activity-item strong { font-size:12px; color:#5c744e; }
.activity-item span { font-size:13px; color:#6b7863; overflow-wrap:anywhere; white-space:pre-wrap; }
.reading-divider { text-align:center; color:#8d714a; font-size:11px; border-bottom:1px dashed #d8c9ad; padding:7px; margin:15px 0 24px; }
.desktop-empty { padding:22px 8px; color:#7f8c74; font-size:13px; line-height:1.8; grid-column:1/-1; }
.favorite-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; max-height:43vh; overflow-y:auto; }
.favorite-cell { border:1px solid #e0e7d6; border-radius:8px; padding:7px; min-width:0; }
.favorite-send { width:100%; background:transparent; display:flex; align-items:center; flex-direction:column; gap:7px; }
.favorite-send img,.favorite-send .sticker-visual { height:82px; width:100%; object-fit:contain; }
.favorite-send span:last-child { font-size:11px; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.favorite-move { width:100%; margin:7px 0; font-size:11px; padding:4px; border:1px solid #d7e2c9; border-radius:4px; background:#fafbf7; }
.favorite-remove { font-size:11px; }
.favorite-category-form { display:flex; gap:10px; margin:18px 0 12px; }
.favorite-category-form input { min-width:0; height:38px; font-size:12px; }
.favorite-category-form button { white-space:nowrap; padding:5px 11px; font-size:12px; }
#favorite-save-dialog select { display:block; width:100%; margin:20px 0; padding:10px; background:#fafbf7; border:1px solid #d7e2c9; border-radius:6px; }
#favorite-save { padding:10px 20px; }
#command-query { height:43px; font-size:13px; }
.command-list { margin-top:15px; max-height:44vh; overflow-y:auto; }
.command-choice { display:block; width:100%; text-align:left; padding:11px; font-size:13px; border:1px solid transparent; border-radius:6px; background:transparent; overflow-wrap:anywhere; }
.command-choice.selected,.command-choice:hover { background:#edf3e5; border-color:#d9e4cd; }
.composer-toolbar,.composer-tools { flex-wrap:wrap; row-gap:9px; }
.send-tools { margin-left:auto; }
.header-actions { flex-wrap:wrap; }
#mention-inbox { display:none; }
@media (max-width:1100px) { .room-header { gap:12px; } .header-actions { gap:5px; } .favorite-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.room-upgrade-notice { margin: 0; padding: 8px 24px; color: #805b21; background: #fff6df; border-bottom: 1px solid #e8d9bd; font-size: 12px; line-height: 1.6; }


.burn-message .bubble{min-width:180px;max-width:min(520px,100%)}
.burn-heading{display:block;font-size:1rem;margin-bottom:6px}
.burn-help{display:block;font-size:.875rem;line-height:1.6;color:#65665f}
.burn-open{margin-top:12px;padding:8px 16px;border:1px solid #858b7d;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:.875rem;cursor:pointer}
.burn-open:hover{background:#00000009}.burn-open:disabled{opacity:.5;cursor:wait}
.burn-countdown{font-size:.875rem;color:#a54b2c;margin-top:10px;font-variant-numeric:tabular-nums}
.burn-destroyed{font-size:.875rem;color:#777b71}.burn-message[data-burn-state=expired] .bubble{background:transparent;border:1px dashed #c0c4b8;box-shadow:none}
.burn-control select{max-width:180px}.burn-mode-note{font-size:.875rem;line-height:1.6;color:#795d3d;padding:8px 0;margin:0}


/* Shared desktop panel language: one title bar, readable controls and quiet surfaces. */
dialog.room-info {
  --panel-padding: 28px;
  --panel-surface: #fffefa;
  --panel-soft: #f3f5ee;
  width: 540px;
  max-width: calc(100vw - 64px);
  max-height: calc(100vh - 64px);
  padding: 0 var(--panel-padding) 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-top: 96px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5c4 transparent;
  border: 1px solid #dce2d5;
  border-radius: 16px;
  background: var(--panel-surface);
  color: var(--body);
  box-shadow: 0 20px 80px #263d3226, 0 3px 16px #263d3210;
  font-size: 14px;
  line-height: 1.7;
}
dialog.room-info::backdrop, dialog.image-viewer::backdrop { background: #253b324f; backdrop-filter: blur(4px); }
.room-info > .panel-heading {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 calc(-1 * var(--panel-padding)) 24px;
  padding: 20px var(--panel-padding);
  border-bottom: 1px solid var(--line);
  background: var(--panel-surface);
}
.room-info .panel-heading h2 { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.5; letter-spacing: .3px; overflow-wrap: anywhere; }
.panel-heading .panel-close, .sticker-picker-heading .panel-close {
  position: static;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0 -7px 0 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #6f7d70;
  font: 300 26px/1 var(--sans);
}
.panel-close svg { width: 20px; height: 20px; }
.panel-heading .panel-close:hover, .sticker-picker-heading .panel-close:hover { color: var(--green-dark); background: #eaf0e5; border-color: #dbe4d4; }
.room-info :is(button,input,textarea,select,a):focus-visible, .sticker-picker :is(button,input,a):focus-visible { outline: 2px solid #628571; outline-offset: 3px; }
.room-info :is(.primary-button,.secondary-button) { min-height: 42px; padding: 9px 18px; border-radius: 9px; font-size: 14px; line-height: 1.5; white-space: nowrap; }
.room-info .secondary-button { background: #fffefa; border-color: #d4dfcc; color: var(--green); }
.room-info .secondary-button:hover { background: #eef3e8; border-color: #aabea0; }
.room-info :is(button,input,select,textarea):disabled { cursor: not-allowed; opacity: .5; }
.room-info .text-button { min-height: 30px; padding: 3px 0; font-size: 13px; }
.room-info :is(input:not([type=checkbox]):not([type=file]),select,textarea) { border: 1px solid #d9e1d2; border-radius: 9px; background: #fbfcf8; color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.7; }
.room-info :is(input:not([type=checkbox]):not([type=file]),select) { min-height: 44px; padding: 9px 13px; }
.room-info textarea { padding: 12px 14px; }
.room-info input::placeholder, .room-info textarea::placeholder { color: #899181; }
.room-info label:not(.room-check):not(.shared-task-label):not(.social-poke-setting) { display: block; margin: 18px 0 8px; color: #4a604c; font-size: 14px; font-weight: 500; }
.room-info :is(form,.shared-panel) > label:first-child { margin-top: 0; }
.room-info :is(.dialog-intro,.feature-help,.interaction-help,.shared-help,.shared-intro,.image-preview-note) { margin: 0 0 18px; color: #6c796a; font-size: 13px; line-height: 1.8; }
.room-info :is(.feature-dialog-actions,.interaction-dialog-actions,.image-preview-actions,.panel-actions) { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.room-info .err:empty { display: none; }
.room-info .err:not(:empty) { margin: 14px 0; padding: 10px 13px; border: 1px solid #ebd0c5; border-radius: 8px; background: #fcf1ec; color: #9e4c3b; font-size: 13px; line-height: 1.7; }
.room-info :is(.pins-empty,.gallery-empty,.desktop-empty) { display: grid; place-content: center; min-height: 140px; margin: 0; padding: 28px 18px; border: 1px dashed #dbe3d2; border-radius: 10px; background: #f8faf4; color: #72816b; text-align: center; font-size: 14px; }
.room-info :is(.interaction-preview,.attachment-preview,.room-announcement-copy) { margin: 0 0 20px; padding: 14px 16px; border: 1px solid #e2e8da; border-radius: 10px; background: var(--panel-soft); color: #52634d; font-size: 14px; }
.room-info .attachment-preview { margin-top: 16px; }
.room-info :is(.dialog-tip,.notification-preference) { background: var(--panel-soft); border: 1px solid #e1e7d9; border-radius: 10px; }
.room-info .dialog-tip { padding: 12px 14px; margin-top: 20px; color: #6c796a; font-size: 13px; line-height: 1.8; }

/* Tabs share the same selected, hover and keyboard-focus states. */
.room-info :is(.shared-tabs,.desktop-tabs), .sticker-tabs { display: flex; align-items: center; gap: 4px; margin: 0 0 20px; padding: 4px; border: 1px solid #e3e8dd; border-radius: 10px; background: #eff3e9; }
.room-info :is(.shared-tab,.desktop-tab), .sticker-tabs button { min-height: 36px; margin: 0; padding: 7px 13px; border: 1px solid transparent; border-radius: 7px; color: #718168; background: transparent; font-size: 13px; font-weight: 500; line-height: 1.5; }
.room-info :is(.shared-tab,.desktop-tab):is([aria-selected=true],[aria-pressed=true]), .sticker-tabs button[aria-selected=true] { border-color: #dbe3d2; background: #fffefa; color: var(--green-dark); box-shadow: 0 1px 4px #2e49300a; }
.room-info :is(.shared-tab,.desktop-tab):hover, .sticker-tabs button:hover { color: var(--green); background: #e4ebdd; }
.room-info :is(.shared-tab,.desktop-tab):is([aria-selected=true],[aria-pressed=true]):hover, .sticker-tabs button[aria-selected=true]:hover { background: #fffefa; }

/* Form and utility panels retain sizes suited to their contents. */
dialog.panel-compact, dialog#revoke-dialog, dialog#readers-dialog { width: 480px; }
dialog#reaction-dialog { width: 440px; }
dialog#room-info { width: 600px; }
dialog.image-preview { width: 640px; }
dialog.gallery-dialog { width: 780px; }
dialog.desktop-dialog { width: 600px; }
dialog.shared-dialog { width: 680px; }
dialog.room-management { width: 600px; }
.room-info .room-rule { gap: 16px; padding: 19px 0; }
.room-info .room-rule:first-of-type { border-top: 0; }
.room-info .room-rule > span { padding-top: 2px; color: #9ba88b; font-size: 11px; }
.room-info .room-rule h3 { font-size: 14px; font-weight: 600; color: #4b6548; }
.room-info .room-rule p, .room-info .notification-preference p { color: #6c796a; font-size: 13px; line-height: 1.85; }
.room-info .notification-preference { padding: 20px; }
.room-info .notification-state { font-size: 12px; }
.room-info input[type=file] { display: block; width: 100%; height: auto; padding: 12px; margin: 0; border: 1px dashed #b9cbae; border-radius: 10px; background: #f6f9f0; font-size: 13px; color: #6c796a; }
.room-info input[type=file]::file-selector-button { padding: 8px 13px; margin-right: 12px; border: 1px solid #d3dfc9; border-radius: 7px; background: #fffefa; color: var(--green); cursor: pointer; font: inherit; }
.room-info .voice-recorder { padding: 17px; margin: 18px 0; border: 1px solid #e1e7d8; border-radius: 10px; background: var(--panel-soft); }
.room-info .voice-recorder output { font-size: 14px; }
.room-info .shared-game-tool .shared-help { margin: 8px 0 14px; }
.room-info .shared-help { margin-top: 10px; margin-bottom: 10px; }
.room-info .shared-game-tool { background: #f8faf4; border-color: #e1e7d9; padding: 20px; }
.room-info .shared-timer-presets button { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.room-info .shared-task-text { font-size: 14px; }
.room-info .favorite-grid { padding: 2px; }
.room-info .favorite-cell { background: #f8faf4; padding: 10px; border-radius: 10px; }
.room-info .favorite-move { min-height: 34px; padding: 4px 6px; font-size: 12px; }
.room-info .favorite-remove { color: #9e6454; font-size: 12px; }
.room-info .command-choice { padding: 13px 14px; border-radius: 8px; font-size: 14px; }
.room-info .command-choice.selected { background: #eaf1e2; border-color: #cedec1; color: var(--green-dark); }
.room-info .activity-item { padding: 14px 16px; border-radius: 10px; }
.room-info .activity-item strong { color: var(--green); font-size: 13px; }
.room-info #resume-reading { margin-top: 10px; }
.room-info #favorite-save { display: block; margin-left: auto; }
.room-info #readers-copy { overflow-wrap: anywhere; margin: 0; }

/* Management sections separate routine settings from consequential actions. */
.room-info .room-access-status { display: inline-block; margin: 0 0 16px; padding: 4px 11px; border: 1px solid #dfe7d7; border-radius: 20px; background: #eff4e9; color: #617953; font-size: 12px; }
.room-info .room-owner-badge { margin: 24px 0 12px; color: var(--green); font-size: 13px; }
.room-info.room-management section { margin: 16px 0 0; padding: 20px; border: 1px solid #e2e7da; border-radius: 11px; background: #fafbf6; }
.room-info.room-management h3 { margin: 0 0 12px; color: #496142; font-size: 15px; font-weight: 600; }
.room-info.room-management .panel-danger-zone { border-color: #ead6c6; background: #fcf6ee; }
.room-info .panel-danger-zone h3 { color: #87523b; }
.room-info .room-danger { color: #98513d; border-color: #dbbda9; background: #fffaf4; }
.room-info .room-danger:hover { color: #8c422e; border-color: #c59179; background: #faede2; }
.room-info.room-management .room-check { margin: 16px 0; gap: 12px; }
.room-info .room-check span { font-size: 14px; }
.room-info .room-check small { margin-top: 4px; color: #78816f; font-size: 12px; }
.room-info input[type=checkbox] { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--green); }
.room-info .room-section-actions { align-items: flex-end; }
.room-info .room-section-actions .feature-help { margin-bottom: 8px; font-size: 12px; }
.room-info .room-remove-confirm { border: 1px solid #e9cebd; border-radius: 9px; color: #8b503a; font-size: 13px; }
.room-info .social-member-list li { border-color: var(--line); padding: 14px 0; }
.room-info .social-poke-setting { padding-top: 18px; margin-top: 18px; }
.room-info .social-poke-setting strong { font-size: 14px; }
.room-info .social-poke-setting small { color: #78816f; font-size: 12px; }

/* The composer popover and image lightbox use the same family of controls. */
.sticker-picker { padding: 18px; border-color: #dce2d5; border-radius: 14px; background: #fffefa; box-shadow: 0 12px 40px #263d3229; }
.sticker-picker-heading { margin-bottom: 14px; }
.sticker-picker-heading h2 { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.sticker-tabs { margin: 12px 0; }
.sticker-tabs button { flex: 1; padding-left: 8px; padding-right: 8px; }
.sticker-search-field { border-radius: 9px; }
.sticker-picker-footer { border-color: var(--line); }
.message-actions { padding: 4px; border-radius: 9px; border-color: #dce2d5; background: #fffefa; }
.message-action { padding: 5px 8px; font-size: 12px; border-radius: 6px; }
.mention-suggestions { border-color: #dce2d5; border-radius: 10px; background: #fffefa; }
.image-viewer { border-color: #dce2d5; border-radius: 16px; background: #fffefa; }
.image-viewer-heading { gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.image-viewer-heading > div:first-child { min-width: 0; }
.image-viewer-heading h2 { color: var(--ink); font-family: var(--sans); font-size: 16px; overflow-wrap: anywhere; }
.image-viewer .panel-close { margin-right: 0; }

.room-info .social-member-actions button { min-height: 34px; padding: 6px 10px; border-radius: 8px; font-size: 12px; }
.room-info .social-member-avatar { width: 32px; height: 32px; font-size: 13px; }
.room-info .social-member-state { font-size: 12px; }
.room-info .social-member-identity { flex: 1; }
.room-info .member-name { font-size: 14px; }
.room-info .shared-game-tool { display: flex; flex-direction: column; align-items: flex-start; }
.room-info .shared-game-tool > button { margin-top: auto; }
.panel-file-picker { position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px; border: 1px dashed #b9cbae; border-radius: 10px; background: #f6f9f0; color: #77836d; font-size: 13px; }
.panel-file-button { flex-shrink: 0; padding: 8px 13px; border: 1px solid #d3dfc9; border-radius: 7px; background: #fffefa; color: var(--green); }
.room-info .panel-file-picker input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.panel-file-picker:hover { border-color: #8eac80; background: #eff5e7; }
.panel-file-picker:focus-within { outline: 2px solid #628571; outline-offset: 3px; }
.panel-file-picker:has(input:disabled) { opacity: .5; }

.room-info .primary-button.danger-button { background: #98563f; border-color: #98563f; color: #fffaf4; }
.room-info .primary-button.danger-button:hover:not(:disabled) { background: #7e412d; border-color: #7e412d; }