.chat-media { display: block; width: 100%; height: 100%; border-radius: 4px; background: #222; object-fit: contain; }
.media-trigger { position: relative; display: block; width: min(100%, 320px); max-height: min(320px, 60vh); aspect-ratio: 9.3 / 4.3; margin: 6px 0; padding: 0; overflow: hidden; border: 0; border-radius: 4px; background: #222; }
.sticker-message { width: min(100%, 128px); max-height: 128px; aspect-ratio: 1 / 1 !important; background: transparent; }
.media-trigger .chat-media { cursor: zoom-in; }
.video-trigger > span { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); padding: 7px 10px; border-radius: 4px; background: #0009; color: #fff; font-size: 12px; }
.media-viewer { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 18px; background: #000e; }
.media-viewer img, .media-viewer video { display: block; max-width: 100%; max-height: calc(100vh - 36px); object-fit: contain; }
.media-close { position: fixed; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: #ffffff30; color: #fff; font-size: 31px; line-height: 1; }
.chat-file { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; max-width: min(100%, 320px); min-width: 180px; margin: 6px 0; padding: 9px 10px; border-radius: 4px; background: #f1f1f1; color: #333; text-decoration: none; }
.chat-file span { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; background: #5a8d4f; color: #fff; font-size: 11px; }
.chat-file b { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.chat-file small { color: #777; font-size: 11px; }
.message.mine .chat-file { background: #cdecbf; }
.attachment-preview { width: 100%; display: flex; flex-wrap: wrap; gap: 5px; }
.attachment-preview span { display: flex; align-items: center; gap: 4px; width: 100%; box-sizing: border-box; padding: 4px 7px; background: #e7e7e7; border-radius: 4px; color: #666; font-size: 12px; }
.attachment-preview .pending-media-preview { display: block; flex: 0 0 20%; width: 20%; max-width: 20%; max-height: 64px; aspect-ratio: 9.3 / 4.3; object-fit: contain; border-radius: 3px; background: #222; }
.attachment-preview b { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.attachment-preview button { background: transparent; color: #777; font-size: 16px; line-height: 1; }
.attach-button { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 5px; background: #e4e4e4; color: #555; font-size: 20px; cursor: pointer; }
.sticker-toggle { width: 38px; padding: 0; display: grid; place-items: center; line-height: 1; flex: 0 0 38px; background: #e4e4e4 !important; color: #555 !important; font-size: 22px; }
.sticker-panel { width: 100%; max-height: 250px; overflow: auto; padding: 8px; border: 1px solid #ddd; background: #fff; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.sticker-grid { margin-top: 8px; }
.emoji-item { height: 36px !important; padding: 0 !important; background: #f4f4f4 !important; color: inherit !important; font-size: 21px; }
.sticker-item { position: relative; display: block; aspect-ratio: 1; }
.sticker-send { width: 100%; height: 100% !important; padding: 0 !important; background: #f2f2f2 !important; overflow: hidden; }
.sticker-send img { width: 100%; height: 100%; object-fit: contain; }
.sticker-delete { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px !important; padding: 0 !important; border-radius: 50%; background: #8f2323 !important; color: #fff !important; font-size: 14px; line-height: 18px; }
.sticker-upload { display: grid; place-items: center; aspect-ratio: 1; border: 1px dashed #aaa; color: #777; font-size: 28px; cursor: pointer; }
.sticker-grid > small { grid-column: 1 / -1; color: #888; font-size: 12px; text-align: center; }

/* The composer reserves four fifths for typing and one fifth for its three tools. */
.composer { display: grid; grid-template-columns: minmax(0, 80fr) repeat(3, minmax(0, 6.666fr)); gap: 4px; align-items: end; }
.composer textarea { grid-column: 1; width: 100%; }
.composer > button[type="submit"] { grid-column: 2; width: 100%; min-width: 0; padding: 0; font-size: 17px; }
.composer > .attach-button { grid-column: 3; width: 100%; min-width: 0; height: 38px; flex: initial; font-size: 21px; }
.composer > .sticker-toggle { grid-column: 4; width: 100%; min-width: 0; height: 38px; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; line-height: 1; flex: initial; font-size: 18px; }
.composer > .attachment-preview, .composer > .quote-preview, .composer > .sticker-panel { grid-column: 1 / -1; }
.composer.has-text { grid-template-columns: minmax(0, 86.666fr) repeat(2, minmax(0, 6.666fr)); }
.composer.has-text > .attach-button { display: none; }
.composer.has-text > button[type="submit"] { grid-column: 2; }
.composer.has-text > .sticker-toggle { grid-column: 3; }

@media (max-width: 680px) {
  .conversation.open {
    top: var(--visual-viewport-top, 0px);
    bottom: auto;
    height: var(--visual-viewport-height, 100dvh);
    max-height: var(--visual-viewport-height, 100dvh);
  }
}

/* Keep the message scroller inside the visible mobile viewport when the keyboard or browser chrome changes size. */
html, body { min-height: 100%; }
.shell { height: 100dvh; min-height: 0; }
.sidebar, .conversation { min-height: 0; }
.conversation, .shell { overflow: hidden; }
.message-area { min-height: 0; overscroll-behavior: contain; }
.composer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
@media (max-width: 680px) {
  .shell, .sidebar { height: 100dvh; }
  .message-area { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

.announcement-thumbnail-field { display: grid; gap: 7px; padding: 10px; border: 1px solid #e4e4e4; border-radius: 4px; background: #fafafa; }
.announcement-thumbnail-field > b { font-size: 13px; color: #555; }
.announcement-thumbnail-field small { color: #888; font-size: 12px; line-height: 1.5; }
.announcement-thumbnail-preview > span { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px; background: #fff; border: 1px solid #e4e4e4; border-radius: 4px; }
.announcement-thumbnail-preview img { width: 100px; height: 62px; object-fit: cover; border-radius: 3px; background: #222; }
.announcement-thumbnail-preview b { color: #555; font-size: 12px; }
.announcement-thumbnail-preview button { padding: 2px 6px; background: transparent; color: #999; font-size: 18px; }
.announcement-thumbnail-button { width: fit-content; padding: 7px 10px; border-radius: 4px; background: #e7e7e7; color: #555; font-size: 13px; cursor: pointer; }