.media-gallery { width: min(680px, calc(100vw - 32px)); max-height: min(780px, calc(100dvh - 32px)); margin: auto; padding: 0; overflow: hidden; color: var(--ink, #18304d); background: var(--panel, #fff); border: 1px solid var(--line, #dce5ef); border-radius: 20px; box-shadow: 0 24px 90px #102a4c40; }
.media-gallery[open] { display: flex; flex-direction: column; }
.media-gallery::backdrop { background: #132a4b80; }
.media-gallery button { font: inherit; cursor: pointer; }
.media-gallery button:disabled { opacity: .5; cursor: default; }
.media-gallery [hidden] { display: none !important; }
.media-gallery button:focus-visible, .media-gallery [tabindex]:focus-visible { outline: 2px solid var(--accent, #3478d4); outline-offset: -3px; }
.media-gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px 16px; flex: none; }
.media-gallery-header h2 { margin: 0 0 6px; font-size: 21px; }
.media-gallery-header p { margin: 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.media-gallery-close { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 28px !important; }
.media-gallery-close:hover { background: #3478d414; }
.media-gallery-tabs { display: flex; gap: 6px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; scrollbar-width: thin; }
.media-gallery-tabs button { flex: 1 0 auto; min-height: 46px; padding: 0 8px; white-space: nowrap; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: 13px; }
.media-gallery-tabs button[aria-selected="true"] { color: var(--accent-strong, #2167c7); border-bottom-color: var(--accent, #3478d4); font-weight: 600; }
.media-gallery-content { overflow: auto; overscroll-behavior: contain; min-height: 160px; padding: 0 24px 20px; }
.media-gallery-hint { margin: 16px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.media-gallery-list { display: grid; gap: 6px; }
.media-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.media-gallery-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: inherit; text-align: left; }
.media-gallery-item:hover { background: #3478d40b; border-color: var(--accent); }
.media-gallery-item[href] { text-decoration: none; }
.media-gallery-item[href] .media-gallery-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-gallery-face { position: relative; display: grid; place-items: center; overflow: hidden; flex: none; width: 44px; height: 44px; border-radius: 9px; color: var(--accent-strong, #2167c7); background: #3478d415; }
.media-gallery-face svg { width: 27px; height: 27px; }
.media-gallery-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-gallery-face[hidden] { display: none; }
button.media-gallery-face { border: 0; padding: 0; cursor: pointer; }
.media-gallery-video { width: 100%; max-height: 240px; aspect-ratio: 1; background: #101b2b; border-radius: 9px; }
.media-gallery-video-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.media-gallery-video-actions button { border: 0; border-radius: 6px; padding: 6px; color: var(--accent-strong, #2167c7); background: #3478d415; font: inherit; font-size: 11px; }
.media-gallery-play { z-index: 1; }
.media-gallery-copy { display: grid; gap: 5px; min-width: 0; }
.media-gallery-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.media-gallery-copy small { color: var(--muted); font-size: 11px; }
.media-gallery-grid .media-gallery-item { display: grid; gap: 8px; padding: 7px; }
.media-gallery-grid .media-gallery-face { width: 100%; height: auto; aspect-ratio: 1; }
.media-gallery-play { position: absolute; bottom: 7px; right: 7px; border-radius: 50%; padding: 5px 8px; color: white; background: #2368bb; font-size: 11px; }
.media-gallery-empty { padding: 30px 0; text-align: center; font-size: 14px; color: var(--muted); }
.media-gallery-older { display: block; width: 100%; margin: 18px 0 0; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--accent-strong); }
.media-gallery-footer { flex: none; padding: 0 24px 12px; font-size: 12px; }
.media-gallery-footer:has(p:empty) { padding-bottom: 0; }
.media-gallery-footer p { line-height: 1.5; }
.media-gallery-footer p:empty { display: none; }
.media-gallery-footer .error { color: #a8474e; }
.media-gallery-footer button { padding: 8px 12px; border: 0; border-radius: 7px; background: #3478d415; color: var(--accent-strong); }
.media-gallery-embedded { display: flex; flex-direction: column; width: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.media-gallery-embedded .media-gallery-content { max-height: 520px; padding: 0 12px 16px; }
.media-gallery-embedded .media-gallery-tabs { padding: 0 8px; gap: 2px; }
.media-gallery-embedded .media-gallery-tabs button { padding: 0 6px; font-size: 12px; }
.media-gallery-embedded .media-gallery-footer { padding: 0 12px 12px; }
.media-gallery-voice { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.media-gallery-voice-actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
.media-gallery-voice-actions button { min-height: 36px; padding: 6px 12px; border: 0; border-radius: 8px; background: #3478d415; color: var(--accent-strong, #2167c7); }
.media-gallery-audio { display: block; width: 100%; min-width: 0; grid-column: 1 / -1; height: 42px; }
.media-gallery-audio-error { grid-column: 1 / -1; color: #a8474e; line-height: 1.5; }
.media-gallery-audio-error:empty { display: none; }
[data-theme="dark"] .media-gallery-audio-error { color: #f2a3ac; }
[data-theme="dark"] .media-gallery-footer .error { color: #f2a3ac; }
@media (max-width: 520px) { .media-gallery { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 15px; } .media-gallery-header { padding: 18px 16px 12px; } .media-gallery-tabs { padding: 0 16px; } .media-gallery-content { padding: 0 12px 16px; } .media-gallery-grid { gap: 6px; } .media-gallery-copy strong { font-size: 11px; } .media-gallery-footer { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 520px) { .media-gallery-embedded { width: 100%; max-height: none; border-radius: 0; } }