/* Telegram-style shared media: compact chrome and edge-to-edge thumbnails. */
:root {
  color-scheme: light;
  --gallery-bg: #fff;
  --gallery-text: #000;
  --gallery-hint: #707579;
  --gallery-secondary: #f4f4f5;
  --gallery-accent: #3390ec;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--tg-theme-text-color, var(--gallery-text));
  background: var(--tg-theme-bg-color, var(--gallery-bg));
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --gallery-bg: #17212b;
  --gallery-text: #f5f5f5;
  --gallery-hint: #7f91a4;
  --gallery-secondary: #232e3c;
  --gallery-accent: #6ab2f2;
}
* { box-sizing: border-box; }
body { margin: 0; }
header, main { max-width: 1000px; margin: auto; }
header { padding: 17px 16px 13px; }
h1 { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; }
#status {
  margin: 0; padding: 11px 16px; font-size: 13px; line-height: 1.45;
  color: var(--tg-theme-hint-color, var(--gallery-hint));
  background: var(--tg-theme-secondary-bg-color, var(--gallery-secondary));
}
#grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding-top: 2px; }
figure { margin: 0; min-width: 0; }
figure button {
  display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 1;
  border-radius: 0; overflow: hidden;
  background: var(--tg-theme-secondary-bg-color, var(--gallery-secondary));
}
figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Author/date stay available to screen readers and in the full-screen viewer. */
figcaption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid var(--tg-theme-link-color, var(--gallery-accent)); outline-offset: -3px; }
nav {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 14px 12px max(14px, env(safe-area-inset-bottom));
}
nav button {
  border: 0; background: transparent; border-radius: 8px; padding: 10px 6px;
  font-size: 13px; font-weight: 500; color: var(--tg-theme-link-color, var(--gallery-accent));
}
button:disabled { opacity: .35; cursor: default; }
#page { font-size: 12px; color: var(--tg-theme-hint-color, var(--gallery-hint)); white-space: nowrap; }
dialog {
  border: 0; border-radius: 0; margin: 0; padding: 0;
  width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  background: #000; color: #fff;
}
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: #000; }
#close {
  flex: 0 0 auto; align-self: flex-end; margin: max(10px, env(safe-area-inset-top)) 12px 0;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffffff1a; color: #fff; font-size: 20px;
}
#full { display: block; flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; margin: 8px 0; }
#detail { flex: 0 0 auto; max-height: 25vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; margin: 0; padding: 12px 18px max(20px, env(safe-area-inset-bottom)); }
@media (min-width: 720px) { #grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.history-view main { background: var(--tg-theme-secondary-bg-color, var(--gallery-secondary)); }
#messages { display: flex; flex-direction: column; gap: 7px; padding: 4px 12px 16px; }
.day { align-self: center; padding: 5px 12px; margin: 10px 0; border-radius: 16px; font-size: 12px; color: var(--tg-theme-hint-color,var(--gallery-hint)); }
.bubble { width: fit-content; max-width: 88%; padding: 10px 12px 6px; border-radius: 14px; background: var(--tg-theme-bg-color,var(--gallery-bg)); overflow-wrap: anywhere; }
.bubble.rm { align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble.ic { align-self: flex-start; border-bottom-left-radius: 4px; }
.sender { font-size: 13px; color: var(--tg-theme-link-color,var(--gallery-accent)); }
.ic .sender { color: #3aab83; }
.bubble p { margin: 6px 0; white-space: pre-wrap; font-size: 15px; line-height: 1.45; }
.bubble blockquote { margin: 8px 0; padding: 5px 9px; border-left: 3px solid var(--gallery-accent); font-size: 13px; white-space: pre-wrap; color: var(--tg-theme-hint-color,var(--gallery-hint)); }
.time { display: block; text-align: right; font-size: 11px; color: var(--tg-theme-hint-color,var(--gallery-hint)); margin-top: 5px; }
.history-photo { display: block; width: min(260px,65vw); padding: 0; border: 0; background: transparent; margin-top: 8px; }
.history-photo img { display: block; width: 100%; max-height: 280px; object-fit: cover; border-radius: 9px; }
.bubble .media-label { font-size: 13px; color: var(--tg-theme-hint-color,var(--gallery-hint)); }