/* The chat room screen (public/room-ui.js). Dense small-phone layout: iPhone 15 first, controls 28px tall (never under 24px), no big buttons. Works inside every app's own page. */
.rm-wrap { font: 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; color: #111827; display: block; padding: 6px 0 12px; }
.rm-wrap * { box-sizing: border-box; }
.rm-hd { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; }
.rm-hd b { flex: 1; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.rm-btn { min-height: 28px; min-width: 28px; padding: 3px 9px; border: 1px solid #9ca3af; border-radius: 7px; background: #f3f4f6; color: #111827; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.rm-btn[disabled] { opacity: .55; cursor: default; }
.rm-pri { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.rm-ghost { background: transparent; }
.rm-danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.rm-sm { min-height: 26px; padding: 2px 7px; font-size: 12.5px; }
.rm-read { min-width: 44px; }
.rm-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; }
.rm-tab { border-radius: 14px; }
.rm-tab.on { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.rm-tab-lane.on { background: #92400e; border-color: #92400e; }
.rm-band { padding: 5px 9px; border-radius: 7px; font-weight: 700; font-size: 13.5px; margin: 0 0 6px; color: #fff; }
.rm-band-room { background: #1d4ed8; }
.rm-band-lane { background: #92400e; }
.rm-card { display: block; width: 100%; text-align: left; border: 1px solid #d1d5db; border-radius: 9px; background: #fff; padding: 7px 9px; margin: 0 0 6px; font: inherit; color: inherit; }
.rm-tap { cursor: pointer; min-height: 28px; }
.rm-locked { border-color: #92400e; background: #fffbeb; }
.rm-row { display: flex; align-items: center; gap: 6px; }
.rm-grow { flex: 1; min-width: 0; }
.rm-blk { display: block; }
.rm-mut { color: #4b5563; font-size: 12.5px; }
.rm-h { font-weight: 700; margin: 2px 0 3px; }
.rm-sub { font-weight: 600; margin: 4px 0 1px; font-size: 13px; }
.rm-ul { margin: 0 0 2px 16px; padding: 0; font-size: 13px; }
.rm-badge { background: #b91c1c; color: #fff; border-radius: 10px; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; padding: 0 6px; }
.rm-feed { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 7px; padding: 4px 8px; margin: 0 0 4px; font-size: 13px; }
.rm-people { border: 1px solid #d1d5db; border-radius: 9px; padding: 6px 8px; margin: 0 0 6px; background: #fff; }
.rm-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 0; }
.rm-pname { font-weight: 600; }
.rm-chip { font-size: 11.5px; background: #e5e7eb; border-radius: 9px; padding: 1px 7px; }
.rm-chip.rm-ok { background: #dcfce7; color: #14532d; }
.rm-chip.rm-warn { background: #fef3c7; color: #78350f; }
.rm-inline { display: inline-flex; align-items: center; }
.rm-confirm { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12.5px; }
.rm-list { max-height: 46vh; overflow-y: auto; margin: 0 0 6px; padding: 2px; }
.rm-msg { border: 1px solid #d1d5db; border-radius: 9px; padding: 5px 8px; margin: 0 0 5px; background: #fff; }
.rm-msg.mine { background: #eff6ff; border-color: #bfdbfe; }
.rm-msg.held { border-color: #d97706; border-width: 2px; }
.rm-msg.lane { background: #fffbeb; border-color: #fcd34d; }
.rm-meta { font-size: 12px; color: #374151; }
.rm-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 1px 0 3px; }
.rm-held { font-size: 12.5px; color: #78350f; background: #fef3c7; border-radius: 6px; padding: 2px 6px; margin: 2px 0; }
.rm-sys { text-align: center; color: #4b5563; font-size: 12px; margin: 3px 0; }
.rm-btns { display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0; align-items: center; }
.rm-in { width: 100%; min-height: 30px; padding: 4px 7px; border: 1px solid #9ca3af; border-radius: 7px; font: inherit; font-size: 14px; background: #fff; color: #111827; }
.rm-lbl { display: block; font-size: 12.5px; color: #374151; margin: 3px 0; }
.rm-opt { display: flex; align-items: center; gap: 6px; min-height: 26px; font-size: 13px; }
.rm-opt input { width: 24px; height: 24px; flex: none; margin: 0; }
.rm-tab.on[disabled] { opacity: 1; cursor: default; }
.rm-tick { background: #fef9c3; border-radius: 6px; padding: 2px 5px; }
.rm-sw { width: 44px; height: 26px; border-radius: 13px; border: 1px solid #9ca3af; background: #d1d5db; position: relative; cursor: pointer; flex: none; padding: 0; }
.rm-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .12s; }
.rm-sw[aria-checked="true"] { background: #1d4ed8; border-color: #1d4ed8; }
.rm-sw[aria-checked="true"]::after { left: 20px; }
.rm-err { color: #991b1b; background: #fee2e2; border-radius: 6px; padding: 3px 7px; margin: 3px 0; font-size: 13px; }
.rm-preview { border: 2px solid #1d4ed8; border-radius: 9px; padding: 6px 8px; margin: 5px 0; background: #f8fafc; }
.rm-card-code { border-color: #92400e; background: #fffbeb; }
.rm-code { font: 700 22px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 3px; margin: 3px 0; }
.rm-record { max-height: 30vh; overflow-y: auto; }
.rm-compose { border-top: 1px solid #e5e7eb; padding-top: 5px; }
@media (prefers-color-scheme: dark) {
  .rm-wrap { color: #e5e7eb; }
  .rm-btn { background: #374151; color: #f3f4f6; border-color: #6b7280; } .rm-pri { background: #2563eb; border-color: #2563eb; color: #fff; } .rm-ghost { background: transparent; }
  .rm-card, .rm-people, .rm-msg, .rm-in { background: #1f2937; color: #e5e7eb; border-color: #4b5563; } .rm-msg.mine { background: #1e3a5f; } .rm-msg.lane { background: #422006; } .rm-locked, .rm-card-code { background: #422006; }
  .rm-mut, .rm-meta, .rm-sys { color: #9ca3af; } .rm-chip { background: #374151; } .rm-preview { background: #111827; } .rm-lbl { color: #d1d5db; } .rm-held { background: #422006; color: #fde68a; }
}