.content.chat-open > :is(.intro,.stats,.journal,.note,.mobile-import) { display: none !important; }
#chat-page { max-width: 820px; }
#chat-page h1 { margin: 12px 0; }
.chat-description { margin: 0 0 22px; color: #506553; line-height: 1.65; }
.chat-room { position: relative; border: 1px solid #c8d7c9; border-radius: 16px; background: #fff; }
.chat-transcript {
 min-height: 210px;
 height: clamp(260px, 52dvh, 560px);
 overflow: auto;
 padding: 18px;
 background: #f2f6ef;
 border-radius: 15px 15px 0 0;
}
.chat-empty { color: #506553; text-align: center; margin: 30px 0; }
.chat-messages { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.chat-message {
 justify-self: start;
 max-width: min(88%, 570px);
 min-width: 0;
 padding: 9px 13px;
 border: 1px solid #d6e3d5;
 border-radius: 12px 12px 12px 3px;
 background: #fff;
 color: #20352a;
}
.chat-own { justify-self: end; border-radius: 12px 12px 3px 12px; background: #dcebe0; border-color: #c7decd; }
.chat-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; color: #285441; overflow-wrap: anywhere; }
.chat-meta time { color: #506553; font-size: 12px; }
.chat-message p { margin: 5px 0 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-latest { position: absolute; right: 20px; top: calc(clamp(260px, 52dvh, 560px) - 52px); background: #fff; }
.chat-connection:not(:empty), .chat-send-error:not(:empty) { padding: 8px 14px; margin: 0; color: #874b3c; font-size: 13px; }
.chat-composer { padding: 12px 16px; }
.chat-composer label { display: block; margin-bottom: 5px; font-weight: 650; color: #214f43; }
.chat-input-row { display: flex; gap: 8px; align-items: stretch; }
.chat-composer textarea {
 flex: 1;
 min-width: 0;
 padding: 8px 10px;
 resize: vertical;
 border: 1px solid #b8cbba;
 border-radius: 8px;
 color: var(--ink);
 background: #fff;
 font: inherit;
 font-size: 16px;
}
.chat-composer .primary { flex: none; padding-inline: 14px; }
@media (max-width: 600px) {
 .chat-transcript { padding: 12px; }
 .chat-composer { padding: 10px; }
}
.nav[data-view="chat"] .chat-unread {
 display: inline-grid;
 place-items: center;
 width: auto;
 min-width: 20px;
 height: 20px;
 flex: none;
 margin-inline-start: auto;
 padding: 0 4px;
 border-radius: 999px;
 background: #a12f2c;
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 line-height: 1;
 font-variant-numeric: tabular-nums;
}
.nav[data-view="chat"] .chat-unread[hidden] { display: none; }
@media (max-width: 400px) {
 .nav[data-view="chat"] { white-space: normal; line-height: 1.25; }
 .nav[data-view="chat"] .chat-nav-icon { display: none; }
 .nav[data-view="chat"] .chat-unread { margin-inline-start: 3px; min-width: 18px; height: 18px; }
}

.chat-participants { margin: 0 0 12px; border: 1px solid #c8d7c9; border-radius: 10px; background: #fff; }
.chat-participants > summary { padding: 10px 14px; cursor: pointer; color: #214f43; font-weight: 650; }
.chat-participant-count { margin-left: 5px; color: #496953; font-weight: 500; }
.chat-participant-status:not(:empty) { margin: 0; padding: 0 14px 10px; color: #506553; }
.chat-participant-status:empty { display: none; }
.chat-participant-names { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 14px 10px; list-style: none; }
.chat-participant-names:empty { display: none; }
.chat-participant-names li { padding: 4px 8px; border-radius: 6px; background: #edf4ed; color: #214f43; overflow-wrap: anywhere; }