/* Incremental conversation layout: keep existing image and video elements alive. */
#chat-message-list > [data-key] { display: flow-root; }
#chat-message-list > [data-key="state"], #chat-message-list > [data-key="empty"] { height: 100%; }
.chat-room-tools { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.chat-room-tools input { width: 100%; min-width: 0; font-size: 12px; }
.chat-room-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.chat-room-filters button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: white; font-size: 11px; cursor: pointer; }
.chat-room-filters button.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.chat-message-list { overflow-anchor: none; }
.chat-message { max-width: min(78%, 600px); }
.chat-bubble { max-width: 100%; overflow-wrap: anywhere; }
.chat-message .sender { font-size: 11px; }
.chat-time { display: flex; gap: 3px; font-size: 10px; }
.chat-reactions { align-items: center; min-height: 22px; }
.chat-reaction-counts { font-size: 12px; }
.chat-reactions button { padding: 3px 7px; }
.chat-message.pending .chat-bubble { opacity: .72; }
.chat-image-button { width: min(300px, 47vw); height: auto; min-height: 180px; max-width: 100%; background: #ebe9f3; }
.chat-image-button img { aspect-ratio: auto; max-height: 350px; object-fit: contain; }
.chat-image-button:disabled { cursor: wait; }
.chat-media-placeholder, .chat-media-error { display: grid; gap: 8px; padding: 18px; place-content: center; color: #6d6585; font-size: 12px; }
[data-media-retry] { display: inline-block; padding: 5px 9px; border: 1px solid #ccc6e1; border-radius: 7px; background: white; color: #4f3dad; cursor: pointer; font-size: 11px; }
.chat-sticker-wrap { min-width: 0; max-width: 100%; }
.chat-picker .chat-sticker-wrap { width: 100%; min-height: 70px; }
.chat-picker .chat-sticker { width: 100%; height: 70px; }
.chat-picker { z-index: 20; max-height: min(440px, 60dvh); width: min(390px, 74vw); }
.chat-picker-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.chat-picker-grid button { min-width: 0; }
.chat-accessory { flex-wrap: nowrap; gap: 4px; }
.chat-accessory > button, .chat-photo-button { width: 40px; height: 44px; }
.chat-file-card { display: flex; align-items: center; gap: 10px; max-width: 330px; padding: 8px 4px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.chat-file-card .material-symbol { font-size: 30px; flex-shrink: 0; }
.chat-file-card span:last-child { min-width: 0; }
.chat-file-card strong { display: block; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; }
.chat-file-card small { display: block; font-size: 10px; opacity: .75; }
.chat-file-card:disabled { cursor: wait; }
.chat-retry-button { padding: 4px 9px; margin-top: 4px; border: 1px solid var(--line); border-radius: 8px; background: white; color: #ad3333; font-size: 11px; cursor: pointer; }
.chat-deleted { color: inherit; opacity: .7; font-style: italic; }
.chat-topic-links > div { display: contents; }
.chat-viewer { width: min(1160px, 95vw); height: min(900px, 92dvh); max-width: 95vw; max-height: 94dvh; padding: 0; border: 1px solid #cfcbdc; border-radius: 16px; background: #171523; color: white; overflow: hidden; }
.chat-viewer[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.chat-viewer::backdrop, .chat-action-dialog::backdrop { background: rgba(18,15,31,.68); }
.chat-viewer header, .chat-viewer footer { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #262235; }
.chat-viewer header strong { margin-right: auto; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.chat-viewer footer { justify-content: space-between; }
.chat-viewer button { border: 1px solid #5f576f; padding: 7px 12px; border-radius: 8px; background: #383044; color: white; cursor: pointer; font-size: 12px; }
.chat-viewer button:disabled { opacity: .35; cursor: default; }
.chat-viewer-stage { display: flex; justify-content: center; align-items: center; min-height: 0; overflow: auto; padding: 12px; }
.chat-viewer-stage img, .chat-viewer-stage video { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.chat-viewer-stage.zoomed { display: block; }
.chat-viewer-stage.zoomed img { max-width: none; max-height: none; margin: auto; }
#chat-viewer-status { font-size: 12px; color: #d9d2e8; }
.chat-action-dialog { width: min(460px, 92vw); max-height: 85dvh; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.chat-dialog-close { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.chat-dialog-close button { border: 0; background: transparent; padding: 8px; cursor: pointer; }
.chat-dialog-content { display: grid; gap: 10px; }
.chat-dialog-content > button, .chat-invitation button { padding: 10px 12px; border: 1px solid var(--line); background: white; border-radius: 9px; text-align: left; cursor: pointer; }
.chat-dialog-content label { display: grid; gap: 6px; margin: 10px 0; font-size: 12px; }
.chat-dialog-content p, .chat-dialog-content small { line-height: 1.7; color: var(--muted); font-size: 12px; }
.chat-dialog-content textarea { width: 100%; min-height: 100px; }
.chat-dialog-content [data-dialog-error] { color: #ac2c3c; }
.chat-invitation { border: 1px solid var(--line); border-radius: 10px; padding: 13px; }
.chat-invitation strong { font-size: 14px; }
.chat-invitation > div { display: flex; gap: 8px; margin-top: 10px; }
@media (max-width: 720px) {
  .chat-compose { gap: 5px; padding: 10px 8px; }
  .chat-accessory > button, .chat-photo-button { width: 32px; }
  .chat-message { max-width: 92%; }
  .chat-viewer header { flex-wrap: wrap; }
  .chat-viewer header strong { max-width: 100%; width: 100%; }
  .chat-viewer-stage { padding: 4px; }
}
.chat-attachment-draft { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 9px; background: var(--primary-soft); font-size: 11px; color: var(--primary); }
.chat-attachment-draft[hidden] { display: none; }
.chat-attachment-draft button { height: auto; padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; background: white; cursor: pointer; }