:root {
  color-scheme: light dark;
  --bg: var(--tg-theme-bg-color, #f4f4f5);
  --text: var(--tg-theme-text-color, #111);
  --hint: var(--tg-theme-hint-color, #6b7280);
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-text: var(--tg-theme-button-text-color, #fff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #fff);
  --border: color-mix(in srgb, var(--text) 12%, transparent);
  --danger: #dc2626;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 100%;
}

.top-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-top, 0px));
  background: var(--secondary-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.path-block {
  flex: 1;
  min-width: 0;
}

.path-label {
  font-size: 11px;
  color: var(--hint);
}

.path-value {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-row {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: var(--secondary-bg);
  border-bottom: 1px solid var(--border);
}

#search-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
}

.icon-btn, .text-btn, .primary-btn {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 8px;
}

.icon-btn {
  min-width: 40px;
  font-size: 20px;
  line-height: 1;
}

.primary-btn {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  padding: 8px 14px;
}

.text-btn:active, .icon-btn:active, .primary-btn:active {
  opacity: 0.75;
}

.status-line {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--hint);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}

.list-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Measured: the action bar alone is ~83px tall at 320px width. */
  padding-bottom: calc(90px + var(--safe-bottom));
}

/* The move bar adds a second dock (plus a hint line); both together measure
   ~176px, so the last rows stay reachable instead of hiding under them. */
body.move-mode .list-scroll {
  padding-bottom: calc(190px + var(--safe-bottom));
}

.file-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.file-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--secondary-bg);
  position: relative;
}

.file-item.selected {
  background: color-mix(in srgb, var(--accent) 12%, var(--secondary-bg));
}

.file-item-main {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 15px;
  font-weight: 500;
  word-break: break-word;
}

.file-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--hint);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.file-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hint) 15%, transparent);
}

.file-badge.warn {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.item-check {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.item-icon {
  font-size: 22px;
  line-height: 1;
  margin-top: 1px;
}

.list-loader, .list-empty {
  text-align: center;
  padding: 24px;
  color: var(--hint);
  font-size: 14px;
}

/* Both bottom bars live in one fixed stack, so «помечено к перемещению» and an
   active selection can be on screen at once without either one guessing the
   other's height. */
.bottom-docks {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.action-bar,
.move-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: var(--secondary-bg);
  border-top: 1px solid var(--border);
}

/* `display: flex` above is an AUTHOR rule, and author rules beat the UA
   stylesheet's `[hidden] { display: none }` regardless of specificity — so
   without this the bars stayed on screen with the hidden attribute set. The
   overlays in this file already carry the same override for the same reason;
   .action-bar simply never got one and was visible even with nothing selected. */
.action-bar[hidden],
.move-bar[hidden] {
  display: none;
}

/* Safe-area padding belongs to the LAST VISIBLE bar in the stack. */
.bottom-docks > :last-child:not([hidden]) {
  padding-bottom: calc(10px + var(--safe-bottom));
}

.move-hint {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--hint);
}

.action-meta {
  font-size: 14px;
  font-weight: 600;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Overflow guard. `min-width: 0` is the load-bearing rule: without it a flex
   item refuses to shrink below its content width, so the button row pushed
   past the viewport edge and the last button ("Отправить") was simply cut off
   with no way to scroll it back. Keep it even if the button count shrinks. */
.action-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.icon-btn, .text-btn, .primary-btn {
  white-space: nowrap;
}

.action-buttons .text-btn {
  flex: 0 1 auto;
  min-width: 0;
}

/* The primary action never shrinks and never disappears off-screen. */
.action-buttons .primary-btn {
  flex: 0 0 auto;
}

body.select-mode .file-item.selectable {
  cursor: pointer;
}

#btn-back[disabled] {
  opacity: 0.35;
}

/* Bottom-sheet + rename modal */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}

.overlay[hidden] {
  display: none;
}

.sheet {
  width: 100%;
  max-width: 520px;
  background: var(--secondary-bg);
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
}

.sheet-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  word-break: break-word;
}

.sheet-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.sheet-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  padding: 14px 14px;
  border-radius: 12px;
}

.sheet-option:active {
  opacity: 0.7;
}

.sheet-option .sheet-option-sub {
  display: block;
  font-size: 12px;
  color: var(--hint);
  margin-top: 2px;
}

.sheet-cancel {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
  border-radius: 12px;
}

.rename-ext-hint {
  font-size: 12px;
  color: var(--hint);
  margin-bottom: 6px;
}

.rename-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
}

.rename-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 8px;
}

.rename-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* Play button on a video row */
.item-play {
  flex: none;
  align-self: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-play:active {
  opacity: 0.7;
}

/* STREAM_4: resume progress strip on a video row */
.item-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: color-mix(in srgb, var(--hint) 25%, transparent);
  pointer-events: none;
  overflow: hidden;
}

.item-progress-fill {
  height: 100%;
  background: var(--accent);
}

/* Fullscreen video player overlay (STREAM_1) */
.player-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  display: flex;
  flex-direction: column;
}

.player-overlay[hidden] {
  display: none;
}

body.player-open {
  overflow: hidden;
}

.player-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}

.player-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-bar .icon-btn {
  color: #fff;
}

.player-bar-btn {
  color: #fff;
  flex-shrink: 0;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: transparent;
}

.player-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-video {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
}

.player-error {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(24px + var(--safe-bottom));
  text-align: center;
  color: #fff;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 82%, #000);
}

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.login-overlay[hidden] {
  display: none;
}

.login-card {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.login-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.login-hint {
  font-size: 13px;
  color: var(--hint);
  text-align: center;
}

.login-input {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
}

.login-error {
  font-size: 13px;
  color: var(--danger);
  text-align: center;
}

.login-submit {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
}

.login-setup-hint {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 10px;
  line-height: 1.35;
}

.login-qr {
  display: block;
  width: min(220px, 70vw);
  height: auto;
  margin: 0 auto 12px;
  border-radius: 8px;
  background: #fff;
}

.login-secret {
  display: block;
  font-size: 12px;
  word-break: break-all;
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 8%, var(--bg));
  user-select: all;
}

/* --- STREAM_4 grid / posters (Photos-like pinch density) --- */

body.view-grid .list-scroll {
  touch-action: pan-y;
}

body.view-grid .file-list {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
  gap: calc(2px + (6 - var(--grid-cols, 3)) * 2.5px);
  padding: 2px;
}

body.view-grid .file-item {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  border-bottom: none;
  background: color-mix(in srgb, var(--text) 6%, var(--bg));
}

body.view-grid .file-item .item-icon {
  display: none;
}

body.view-grid:not(.select-mode) .file-item .item-check {
  display: none;
}

body.view-grid.select-mode .file-item .item-check {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  display: block;
}

body.view-grid .grid-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: color-mix(in srgb, var(--text) 8%, var(--bg));
}

body.view-grid .grid-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  font-size: calc(18px + (6 - var(--grid-cols, 3)) * 4px);
  background: color-mix(in srgb, var(--text) 8%, var(--bg));
}

body.view-grid .file-item-main {
  padding: 6px 8px 8px;
}

body.view-grid .file-name {
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.view-grid .file-meta {
  font-size: 10px;
}

/* Compact / dense: hide captions like Photos zoomed-out */
body.view-grid.grid-compact .file-item-main {
  display: none;
}

body.view-grid .item-frames {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

body.view-grid.grid-dense .item-frames {
  width: 22px;
  height: 22px;
  font-size: 11px;
  border-radius: 6px;
}

body.view-grid .item-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
}

body.view-grid .item-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  height: 3px;
  border-radius: 0;
  z-index: 2;
}

body:not(.view-grid) .grid-thumb,
body:not(.view-grid) .grid-thumb-fallback,
body:not(.view-grid) .item-frames {
  display: none;
}

.frames-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: #0b0b0c;
  color: #fff;
}

.frames-overlay[hidden] {
  display: none;
}

.frames-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  background: rgba(0, 0, 0, 0.85);
}

.frames-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}

.frames-bar .icon-btn {
  color: #fff;
}

.frames-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: relative;
}

.frames-sheet {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: #111;
}

.frames-error {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 24px;
  text-align: center;
  font-size: 14px;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 82%, #000);
}

.frames-actions {
  padding: 12px 16px calc(16px + var(--safe-bottom));
  display: flex;
  justify-content: center;
}

.frames-actions .primary-btn {
  min-width: 160px;
  padding: 12px 18px;
}