body.room-body { background: var(--paper); color: var(--ink); height: 100dvh; display: flex; flex-direction: column; align-items: stretch; }
.room-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 1px solid var(--paper-edge); background: var(--paper); }
.room-head .back { color: var(--ink); text-decoration: none; font-size: 30px; line-height: 1; padding: 0 6px 4px; }
.room-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.room-title b { font-size: 16px; }
.room-title span { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me { all: unset; cursor: pointer; }
.av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #d9d3c4; color: var(--ink); font-family: var(--serif); font-size: 14px; overflow: hidden; flex: none; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.big { width: 56px; height: 56px; font-size: 22px; }
.room-log { flex: 1; overflow-y: auto; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 14px; background: #efebe1; }
.row { display: flex; gap: 9px; align-items: flex-start; max-width: 100%; }
.row.mine { flex-direction: row-reverse; }
.col { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 78%; }
.row.mine .col { align-items: flex-end; }
.who { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.tag-ai { font-size: 10px; padding: 0 5px; border-radius: 4px; background: var(--ink); color: var(--paper); line-height: 15px; }
.bubble { padding: 9px 13px; border-radius: 14px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; background: #fff; border: 1px solid var(--paper-edge); border-top-left-radius: 4px; }
.row.mine .bubble { background: var(--ink); color: var(--paper); border-color: var(--ink); border-top-left-radius: 14px; border-top-right-radius: 4px; }
.row.bot .bubble { background: #fffbe6; border-color: #efe3a6; }
.empty { margin: auto; color: var(--ink-3); font-size: 13px; text-align: center; line-height: 1.8; }
.room-composer { display: flex; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--paper-edge); background: var(--paper); }
.room-composer textarea { flex: 1; resize: none; border: 1px solid var(--paper-edge); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.5; background: #fff; color: var(--ink); max-height: 120px; outline: none; }
.room-composer button { all: unset; cursor: pointer; padding: 0 18px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: 15px; display: grid; place-items: center; }
.room-composer button:disabled { opacity: 0.4; }
.toast { align-self: center; font-size: 12px; color: var(--danger); background: #fbeceb; padding: 6px 12px; border-radius: 999px; }
.profile-sheet { position: fixed; inset: 0; z-index: 30; background: rgba(11, 11, 10, 0.55); display: grid; place-items: center; padding: 16px; }
.profile-sheet[hidden] { display: none; }
.avatar-pick { display: flex; gap: 14px; align-items: center; cursor: pointer; font-size: 14px; }
.avatar-pick small { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }
.dlg-ghost-wide { all: unset; cursor: pointer; text-align: center; padding: 10px; font-size: 13px; color: var(--ink-3); }