/* Appearance and theme tokens; chat.css retains the underlying media/dialog layout. */
:root {
    --primary: #0f766e;
    --primary-dark: #115e59;
    --accent: #0284c7;
    --danger: #bc3942;
    --danger-fill: #bc3942;
    --on-danger: #ffffff;
    --on-primary: #ffffff;
    --primary-fill-end: #0e7490;
    --light: #f3f7f6;
    --dark: #172a2b;
    --gray: #617576;
    --canvas: #eaf2f4;
    --surface: #fbfdfc;
    --surface-soft: #eef5f3;
    --surface-hover: #e2efec;
    --border: #d4e2de;
    --border-strong: #b9d1ca;
    --own-surface: #dff4ec;
    --own-surface-end: #e8f5f8;
    --own-border: #b9dfd2;
    --code-surface: #eaf2f0;
    --focus: #62a99a;
    --grid-line: rgba(15, 118, 110, .055);
    --panel-shadow: 0 16px 36px rgba(22, 64, 57, .08), 0 2px 8px rgba(22, 64, 57, .05);
    --border-radius: 16px;
    --shadow: 0 2px 8px rgba(22, 45, 35, 0.035);
    --transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

:root[data-theme="dark"] {
    --primary: #5eead4;
    --primary-dark: #99f6e4;
    --accent: #67e8f9;
    --danger: #f09195;
    --danger-fill: #bc3942;
    --on-primary: #101d25;
    --primary-fill-end: #67e8f9;
    --light: #0f1720;
    --dark: #ecfdf9;
    --gray: #9ab2b3;
    --canvas: #071218;
    --surface: #101d25;
    --surface-soft: #172832;
    --surface-hover: #203742;
    --border: #2b4650;
    --border-strong: #3f6470;
    --own-surface: #143d3a;
    --own-surface-end: #153643;
    --own-border: #2b6b61;
    --code-surface: #0c1820;
    --focus: #5eead4;
    --grid-line: rgba(103, 232, 249, .06);
    --panel-shadow: 0 20px 48px rgba(0, 0, 0, .28), 0 2px 10px rgba(0, 0, 0, .18);
    --shadow: 0 8px 22px rgba(0, 0, 0, .16);
}

html { background: var(--canvas); }
body { position: relative; isolation: isolate; background: var(--canvas); background-image: radial-gradient(ellipse at 8% 0%, #0ea5a412, transparent 42%), radial-gradient(ellipse at 95% 40%, #0284c712, transparent 44%); color: var(--dark); font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 82%);
}
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
header { background: var(--surface); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--dark); padding: 18px 24px 14px; border-bottom: 1px solid var(--border); box-shadow: var(--panel-shadow); backdrop-filter: blur(16px); }
.header-inner { max-width: 960px; }
.header-topbar { justify-content: space-between; min-height: 46px; gap: 16px; }
.app-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--own-surface), var(--own-surface-end)); color: var(--primary); border: 1px solid var(--own-border); box-shadow: inset 0 1px 0 #ffffff30; flex: 0 0 auto; font-size: 17px; }
.app-heading { min-width: 0; }
header h1 { padding: 0; text-align: left; font-size: 18px; letter-spacing: -0.35px; line-height: 1.35; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 440px; }
.app-subtitle { display: block; color: var(--gray); font-size: 11px; letter-spacing: 1px; margin-top: 2px; }
.header-buttons { position: static; transform: none; gap: 6px; flex: 0 0 auto; }
.header-btn { color: var(--gray); background: transparent; border: 1px solid transparent; border-radius: 10px; }
.header-btn.icon-only { width: 44px; height: 44px; border-radius: 10px; }
.header-btn:hover { background: var(--surface-soft); color: var(--primary); border-color: var(--border); }
.header-menu, .composer-menu { background: var(--surface); background: color-mix(in srgb, var(--surface) 96%, transparent); border: 1px solid var(--border-strong); border-radius: 12px; padding: 6px; box-shadow: var(--panel-shadow); backdrop-filter: blur(16px); }
.header-menu-item, .composer-menu-item { color: var(--dark); border-radius: 8px; font-size: 13px; min-height: 42px; }
.header-menu-item:hover, .composer-menu-item:hover { background: var(--surface-soft); }

/* Active collection remains distinctly red, with a compact persistent summary. */
body.collection-active header { background: var(--surface); border-top: 3px solid #ca4248; padding-top: 15px; }
body.collection-active .app-mark { background: #fae5e4; color: #b43137; }
.collection-status-banner { max-width: 960px; margin: 12px auto 0; padding: 11px 14px; border-radius: 10px; box-shadow: none; backdrop-filter: none; gap: 12px; animation: none; }
body.collection-active .collection-status-banner { background: #fff1ee; border: 1px solid #efcac5; color: #952c32; }
.collection-status-title { font-size: 13px; line-height: 1.4; font-weight: 650; }
.collection-status-detail { font-size: 11px; opacity: 0.88; margin-top: 2px; }
.collection-status-dot { background: #c9444b; width: 8px; height: 8px; box-shadow: none; animation: none; }
body.collection-active .collection-status-dot { animation: none; }
.collection-status-badge { font-size: 11px; padding: 5px 8px; border-radius: 6px; background: #f9dbd6; color: #952c32; }
.collection-status-badge .fa-spin { animation: none; }
:root[data-theme="dark"] body.collection-active .app-mark { background: #502d2d; color: #f4a5a2; }
:root[data-theme="dark"] body.collection-active .collection-status-banner { background: #382622; border-color: #69403a; color: #ffc7bd; }
:root[data-theme="dark"] .collection-status-badge { background: #53322c; color: #ffc7bd; }

.collection-status-banner { position: relative; overflow: hidden; box-shadow: var(--panel-shadow); }
.collection-status-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.18) 48%, transparent 58%); transform: translateX(-120%); animation: statusScan 4.8s ease-in-out infinite; }
@keyframes statusScan { 0%, 42% { transform: translateX(-120%); } 68%, 100% { transform: translateX(120%); } }

#chat-container { width: min(100%, 1010px); max-width: 1010px; margin: 0 auto; padding: 0 24px; background: var(--light); background: color-mix(in srgb, var(--light) 92%, transparent); border-inline: 1px solid var(--border); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset; }
#chat-messages { padding: 20px 14px 24px; gap: 14px; scrollbar-color: var(--border) transparent; scroll-padding-block: 16px; }
.message { background: var(--surface); background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: 0 8px 22px rgba(24, 70, 61, .045); border: 1px solid var(--border); border-radius: 14px; max-width: min(78%, 680px); padding: 12px 14px 9px; animation: none; }
.message.other { background: var(--surface); border-bottom-left-radius: 5px; }
.message.self { align-self: flex-end; background: linear-gradient(135deg, var(--own-surface), var(--own-surface-end)); border-color: var(--own-border); border-radius: 14px 14px 5px 14px; }
.message.self .user { color: var(--primary-dark); }
.message .user { color: var(--gray); font-size: 11px; font-weight: 600; line-height: 1.5; margin-bottom: 5px; padding-right: 66px; }
.message .content { font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.message .content.is-collapsed { max-height: 168px; overflow: hidden; mask-image: linear-gradient(to bottom, #000 120px, transparent); }
.message .timestamp { color: var(--gray); opacity: 1; font-size: 10px; line-height: 1.4; margin-top: 6px; font-variant-numeric: tabular-nums; }
.message .timestamp, .collection-status-detail, .composer-meta, #upload-percent { font-family: "JetBrains Mono", Consolas, monospace; letter-spacing: .01em; }
.message-actions { top: 7px; right: 7px; gap: 1px; }
.copy-btn, .delete-btn { background: transparent; color: var(--gray); border-radius: 7px; width: 30px; height: 30px; font-size: 11px; opacity: 0.65; }
.copy-btn:hover { color: var(--primary); background: var(--surface-hover); transform: none; opacity: 1; }
.delete-btn:hover { color: var(--danger); background: #c9444b16; transform: none; opacity: 1; }
.message.system-message { align-self: center; max-width: 100%; text-align: center; background: transparent; border: 0; border-radius: 0; padding: 5px 12px; color: var(--gray); }
.system-message .user { display: none; }
.system-message .content { font-size: 11px; line-height: 1.6; }
.system-message .timestamp { text-align: center; }
.system-message .message-actions { position: static; display: inline-flex; vertical-align: middle; margin-top: 2px; }
.system-message .copy-btn, .system-message .delete-btn { width: 25px; height: 25px; }
.sms-message { border-left: 3px solid var(--primary); }
.day-divider { display: flex; align-items: center; align-self: stretch; justify-content: center; gap: 12px; color: var(--gray); font-size: 10px; margin: 12px 0 4px; pointer-events: none; }
.day-divider::before, .day-divider::after { content: ""; height: 1px; width: 36px; background: var(--border); }
.message pre { margin: 8px 0; padding: 12px; background: var(--code-surface); color: var(--dark); border: 1px solid var(--border); border-radius: 8px; overflow: auto; max-width: 100%; font: 12px/1.65 Consolas, "SFMono-Regular", monospace; white-space: pre; }
.expand-message-btn, .copy-code-btn { border: 1px solid var(--border); color: var(--primary-dark); background: var(--surface-soft); border-radius: 7px; padding: 5px 9px; font-size: 11px; margin-top: 8px; cursor: pointer; min-height: 32px; }
.copy-code-btn { font-variant-numeric: tabular-nums; }
.expand-message-btn:hover, .copy-code-btn:hover { background: var(--surface-hover); }
.message-highlight { animation: appearanceHighlight 2s ease; }
@keyframes appearanceHighlight { 0%, 45% { outline: 2px solid var(--focus); outline-offset: 3px; } 100% { outline: 2px solid transparent; outline-offset: 3px; } }

.file-attachment { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; padding: 11px; min-width: min(220px, 100%); }
.file-icon { color: var(--primary); font-size: 22px; }
.file-name { font-size: 12px; line-height: 1.5; }
.file-download-btn { border-radius: 8px; background: var(--primary); color: var(--on-primary); width: 34px; height: 34px; }
.media-placeholder, .media-placeholder.video-placeholder { background: var(--surface-soft); border: 1px dashed var(--border); color: var(--primary); border-radius: 10px; padding: 22px 30px; }
.media-placeholder i { font-size: 24px; }
.media-placeholder:hover { transform: none; background: var(--surface-hover); }
.link-container { background: var(--surface-soft); border-color: var(--border); }
.link-container a, .message a { color: var(--primary-dark); }
.copy-link-btn, .qr-btn { color: var(--gray); background: var(--surface-soft); }
.chat-status { color: var(--gray); font-size: 12px; }
#image-upload-status-text { overflow-wrap: anywhere; min-width: 0; }
.upload-progress { max-width: calc(100vw - 32px); min-width: min(280px, calc(100vw - 32px)); box-sizing: border-box; }
.progress-text { gap: 12px; }
#upload-filename { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#upload-percent { flex-shrink: 0; }
.chat-status button, .search-preview-heading button { color: var(--primary-dark); background: var(--surface-soft); border: 1px solid var(--border); min-height: 32px; }
#new-messages-btn { background: var(--primary); color: var(--on-primary); font-size: 12px; box-shadow: 0 3px 12px #10291e24; padding: 10px 18px; bottom: 18px; }

#message-form-container { max-width: 1010px; width: 100%; border-radius: 0; border: 1px solid var(--border); border-top: 0; background: var(--light); background: color-mix(in srgb, var(--light) 92%, transparent); box-shadow: none; padding: 4px 36px 18px; }
#message-form { border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); background: color-mix(in srgb, var(--surface) 94%, transparent); padding: 11px 12px 7px; box-shadow: var(--panel-shadow); backdrop-filter: blur(12px); }
#nickname-container { flex-wrap: nowrap; padding: 0 2px; gap: 6px; margin-bottom: 7px; min-height: 22px; }
#nickname-icon { font-size: 11px; }
#nickname-input { color: var(--gray); width: 125px; border: 0; padding: 2px 0; font-size: 11px; line-height: 1.5; }
.nickname-saved { font-size: 10px; white-space: nowrap; margin-left: 0; }
.draft-status { margin-left: auto; color: var(--gray); font-size: 10px; white-space: nowrap; }
#message-input { color: var(--dark); background: transparent; border: 0; border-radius: 0; min-height: 56px; padding: 9px 104px 11px 2px; font-size: 14px; line-height: 1.6; box-shadow: none; }
#message-input:focus { outline: 0; box-shadow: none; }
#message-form:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px #74ae9320; }
.action-buttons { right: 0; bottom: 7px; top: auto; transform: none; gap: 5px; }
.action-button, #send-button { width: 44px; height: 44px; border-radius: 11px; }
.action-button { background: transparent; color: var(--gray); }
.action-button:hover { background: var(--surface-soft); color: var(--primary); }
#send-button { background: var(--primary); background-image: linear-gradient(135deg, var(--primary), var(--primary-fill-end)); color: var(--on-primary); box-shadow: inset 0 1px 0 #ffffff30; }
#send-button:hover { background: var(--primary-dark); transform: none; }
.composer-meta { display: flex; align-items: center; gap: 8px; justify-content: space-between; color: var(--gray); font-size: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
.keyboard-hint { display: flex; gap: 5px; align-items: center; }
.keyboard-hint kbd { font-family: inherit; font-size: 9px; color: var(--gray); }
.mobile-hint { display: none; }
#composer-counter { margin-left: auto; font-variant-numeric: tabular-nums; }
#composer-counter.is-over-limit { color: var(--danger); }
.attachment-preview { display: flex; align-items: center; gap: 9px; background: var(--surface-soft); padding: 9px 10px; border-radius: 9px; border: 1px solid var(--border); margin: 8px 0; }
.attachment-preview[hidden] { display: none; }
.attachment-symbol { color: var(--primary); }
.attachment-thumbnail { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 6px; object-fit: cover; }
.attachment-thumbnail[hidden] { display: none; }
.attachment-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
#attachment-kind { color: var(--gray); font-size: 10px; }
#attachment-remove { border: 0; width: 32px; height: 32px; border-radius: 6px; background: transparent; color: var(--gray); cursor: pointer; }
#attachment-remove:hover { color: var(--danger); background: var(--surface-hover); }
#chat-container.drag-over, #message-form-container.drag-over { outline: 2px dashed var(--primary); outline-offset: -6px; background: var(--own-surface); }

.chat-tools { background: var(--surface-soft); background: color-mix(in srgb, var(--surface-soft) 92%, transparent); border: 1px solid var(--border-strong); border-radius: 12px; margin-top: 14px; padding: 10px; box-shadow: var(--panel-shadow); backdrop-filter: blur(12px); }
.search-bar { background: transparent; border-color: transparent; padding: 0; box-shadow: none; }
.search-input-wrap, #search-input { background: var(--surface); border-color: var(--border); color: var(--dark); }
#search-input { font-size: 16px; border-radius: 0 9px 9px 0; }
.search-btn { background: var(--primary); color: var(--on-primary); border-radius: 9px; font-size: 12px; }
.secondary-btn { background: var(--surface); color: var(--gray); border: 1px solid var(--border); border-radius: 9px; font-size: 12px; }
.search-results-header, .search-preview { border-color: var(--border); }
.search-results-title, .search-preview-heading, .search-empty, .search-result-meta { color: var(--gray); }
.search-result-item { background: var(--surface); border-color: var(--border); border-radius: 9px; }
.search-result-item:hover { border-color: var(--focus); background: var(--surface-hover); }
.search-result-content { color: var(--dark); }
.search-result-content mark, .search-result-meta mark { background: var(--own-surface); color: var(--primary-dark); }
.search-clear-btn { background: var(--surface-soft); color: var(--gray); }
.upload-progress, .qr-content, .confirm-content { background: var(--surface); color: var(--dark); border: 1px solid var(--border); }
.progress-bar { background: var(--surface-soft); }
.progress-fill { background: linear-gradient(90deg, var(--primary), var(--accent)); }
.cancel-btn { background: var(--surface-soft); color: var(--dark); }
.danger-action-btn { background: var(--danger-fill); color: var(--on-danger); }
.close-lightbox { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff30; border-radius: 12px; background: #ffffff14; font-size: 22px; }
.close-lightbox:hover { opacity: 1; background: #ffffff25; }
.confirm-content p, .progress-text { color: var(--gray); }
.announcement { background: var(--surface); color: var(--gray); border-color: var(--border); }

/* Small state feedback: animate only newly inserted content, never a full sync. */
.message.is-entering { animation: messageEnter 220ms cubic-bezier(.22, .8, .32, 1) both; }
@keyframes messageEnter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.message-skeleton {
    position: absolute;
    top: 44px;
    left: 20px;
    right: 20px;
    z-index: 1;
    display: grid;
    gap: 12px;
    pointer-events: none;
}
.message-skeleton[hidden] { display: none; }
.message-skeleton-bubble {
    display: block;
    height: 58px;
    border-radius: 14px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    animation: skeletonPulse 1.2s ease-in-out infinite;
}
.message-skeleton-bubble-wide { width: min(72%, 520px); }
.message-skeleton-bubble-short { width: min(54%, 380px); margin-left: auto; }
.message-skeleton-bubble-medium { width: min(64%, 460px); }
.message-skeleton.is-history { top: 12px; }
@keyframes skeletonPulse {
    0%, 100% { opacity: .52; }
    50% { opacity: .9; }
}

.copy-btn.is-copied,
.copy-code-btn.is-copied,
.copy-link-btn.is-copied {
    color: var(--primary);
    background: var(--own-surface);
    opacity: 1;
}

/* Keep overlays mounted during the short fade so the close motion is visible. */
.media-lightbox,
.qr-modal,
.confirm-modal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.media-lightbox.is-open,
.qr-modal.is-open,
.confirm-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
.media-lightbox .lightbox-content,
.qr-content,
.confirm-content {
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: opacity 180ms ease, transform 180ms ease;
}
.media-lightbox.is-open .lightbox-content,
.qr-modal.is-open .qr-content,
.confirm-modal.is-open .confirm-content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.header-menu, .composer-menu { transform-origin: top right; opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity 160ms ease, transform 160ms ease; }
.header-menu.open, .composer-menu.open { opacity: 1; transform: translateY(0) scale(1); animation: popoverEnter 160ms ease-out both; }
.composer-menu { transform-origin: bottom right; --popover-offset: 4px; }
@keyframes popoverEnter { from { opacity: 0; transform: translateY(var(--popover-offset, -4px)) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chat-tools { opacity: 0; transform: translateY(-4px); transition: opacity 180ms ease, transform 180ms ease; }
.chat-tools.open { opacity: 1; transform: translateY(0); animation: searchPanelEnter 180ms ease-out; }
@keyframes searchPanelEnter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.action-button, #send-button, .header-btn, .search-btn, .secondary-btn, .file-download-btn { transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.action-button:hover, .header-btn:hover, .search-btn:hover, .secondary-btn:hover, .file-download-btn:hover { transform: translateY(-1px); }
.action-button:active, #send-button:active, .header-btn:active, .search-btn:active, .secondary-btn:active { transform: translateY(0) scale(.98); }

@media (hover: hover) and (pointer: fine) {
    .message-actions { opacity: 0; transition: opacity 140ms ease; }
    .message:hover .message-actions, .message:focus-within .message-actions { opacity: 1; }
}
@media (hover: none) {
    .download-btn { opacity: 1; }
    .copy-btn, .delete-btn { width: 32px; height: 32px; }
}
@media (max-width: 640px) {
    header { padding: 12px 16px 11px; }
    body.collection-active header { padding-top: 9px; }
    .header-topbar { min-height: 42px; gap: 8px; }
    .app-brand { gap: 9px; }
    .app-mark { width: 35px; height: 35px; border-radius: 10px; font-size: 15px; }
    header h1 { padding: 0; font-size: 16px; max-width: 170px; text-align: left; }
    .app-subtitle { font-size: 9px; letter-spacing: 0.5px; }
    .header-buttons { gap: 1px; }
    .header-btn.icon-only { width: 44px; height: 44px; font-size: 13px; }
    .collection-status-banner { padding: 9px 10px; margin-top: 9px; flex-direction: row; align-items: center; flex-wrap: nowrap; }
    .collection-status-title { font-size: 12px; }
    .collection-status-detail { font-size: 10px; line-height: 1.5; }
    .collection-status-badge { flex: 0 0 auto; font-size: 10px; padding: 4px 6px; }
    .collection-status-dot { display: none; }
    #chat-container { padding: 0 7px; border: 0; }
    #chat-messages { padding: 14px 7px 20px; gap: 13px; }
    .message { max-width: 88%; padding: 10px 12px 8px; }
    .message .content { font-size: 14px; }
    .message .user { padding-right: 60px; }
    #message-form-container { border: 0; padding: 4px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
    #message-form { padding: 10px 10px 6px; border-radius: 13px; }
    #message-input { font-size: 16px; min-height: 50px; }
    header, #message-form { backdrop-filter: none; }
    .keyboard-hint { display: none; }
    .mobile-hint { display: inline; }
    .composer-meta { font-size: 9px; }
    #nickname-input { width: 114px; }
    .nickname-saved { font-size: 9px; }
    .draft-status { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .chat-tools {
        position: fixed;
        z-index: 1100;
        top: var(--search-viewport-top, 0px);
        left: 0;
        right: 0;
        height: var(--search-viewport-height, 100dvh);
        max-height: none;
        margin: 0;
        padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        border: 0;
        border-radius: 0;
        overflow: hidden;
        background: var(--surface);
        flex-direction: column;
    }
    .chat-tools.open { display: flex; }
    #search-scope { font-size: 16px; }
    .search-bar { flex: 0 0 auto; }
    .search-results { flex: 1; min-height: 0; max-height: none; overflow: hidden; margin-top: 8px; }
    .search-results.show { display: flex; flex-direction: column; }
    .search-results-header { flex: 0 0 auto; margin-bottom: 8px; }
    .search-results-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
    .search-result-list { flex: 1; min-height: 0; max-height: none; overscroll-behavior: contain; }
    .chat-tools.preview-open .search-results { display: none; }
    .search-preview { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
    .search-preview-heading { flex: 0 0 auto; }
    .search-preview-heading button { min-height: 44px; }
    #search-preview-message { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .search-bar { gap: 6px; }
    .message-skeleton { left: 14px; right: 14px; top: 34px; }
    .message-skeleton-bubble { height: 52px; border-radius: 13px; }
}
@media (max-width: 360px) {
    header { padding-inline: 10px; }
    .app-mark { display: none; }
    .header-btn.icon-only { width: 44px; }
    .message { max-width: 93%; }
    .nickname-saved { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}