* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; background: #1a1a1a; color: #eee;
  font-family: -apple-system, "Segoe UI", sans-serif; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
img { -webkit-user-drag: none; }

header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 14px; background: #111; border-bottom: 1px solid #333; font-size: 13px;
  height: 32px; gap: 12px;
}
#title { font-weight: 600; flex-shrink: 0; }
#hint { color: #888; font-size: 11px; }

.mobile-only { display: none; }
.desktop-only { display: initial; }

main {
  display: flex; flex-direction: column;
  /* 100dvh — динамический viewport, реальная видимая высота (минус URL-бар
     на мобильном Chrome). 100vh — fallback на старых браузерах. */
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}

#viewer {
  flex: 1 1 auto; min-height: 0; background: #000;
  display: flex; justify-content: center; align-items: stretch;
  position: relative; padding: 4px; gap: 4px;
  touch-action: none;  /* мы сами обрабатываем свайпы */
}
.slot {
  flex: 1 1 0; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0a0a0a; border: 2px solid transparent;
  border-radius: 4px; cursor: pointer; position: relative;
  overflow: hidden;
}
.slot.selected {
  border-color: #3a8a3a;
  box-shadow: 0 0 0 1px #3a8a3a inset;
}
.slot:hover:not(.selected) {
  border-color: #444;
}
.slot-label {
  position: absolute; top: 4px; left: 8px;
  background: rgba(0,0,0,0.7); color: #ddd;
  padding: 2px 8px; border-radius: 3px; font-size: 12px;
  pointer-events: none; user-select: none;
  z-index: 2;
}
.slot.selected .slot-label {
  background: #2a6a2a; color: #fff; font-weight: 600;
}
.slot-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;  /* чтобы touch шёл в .slot */
}
#view-mode {
  position: absolute; top: 8px; right: 12px;
  background: rgba(0,0,0,0.7); color: #fff;
  padding: 3px 8px; border-radius: 3px; font-size: 11px;
  pointer-events: none; user-select: none; z-index: 3;
}

#meta {
  flex: 0 0 auto; padding: 8px 14px; background: #181818; border-top: 1px solid #333;
  display: flex; flex-direction: column; gap: 6px;
}
.kv { font-size: 12px; color: #aaa; display: flex; gap: 14px; flex-wrap: wrap; }
.kv b { color: #ddd; font-weight: 500; }
details summary { cursor: pointer; font-size: 11px; color: #888; }
details pre {
  background: #111; padding: 8px; border-radius: 4px; max-height: 120px; overflow: auto;
  white-space: pre-wrap; font-size: 11px; color: #ccc; margin: 4px 0 0;
}
.comment-row { display: flex; gap: 8px; align-items: stretch; }
#comment {
  flex: 1; min-height: 60px; max-height: 120px; background: #0d0d0d; color: #eee;
  border: 1px solid #333; border-radius: 4px; padding: 8px; font-family: inherit; font-size: 13px;
  resize: vertical; user-select: text;
}
#comment:focus { outline: none; border-color: #555; }
.actions { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.actions button {
  padding: 8px 10px; border: none; border-radius: 4px; cursor: pointer;
  font-weight: 600; font-size: 12px;
}
.actions .ok { background: #2a6a2a; color: #fff; }
.actions .ok:hover { background: #348234; }
.actions .warn { background: #804020; color: #fff; }
.actions .warn:hover { background: #a25a30; }
.actions .mic { background: #305878; color: #fff; }
.actions .mic:hover { background: #3a6f93; }
.actions .mic.live { background: #b33030; animation: micPulse 1.2s infinite; }
@keyframes micPulse {
  0%, 100% { background: #b33030; }
  50% { background: #d04545; }
}
#mic-status { font-size: 11px; color: #888; min-height: 14px; }
#mic-status.live { color: #7a3; }
#mic-status .partial { color: #aaa; font-style: italic; }

/* ============================================================
   Mobile / portrait
   ============================================================ */
@media (max-width: 768px), (orientation: portrait) {
  .mobile-only { display: initial; }
  .desktop-only { display: none !important; }

  html, body { height: 100dvh; overflow: hidden; }

  /* Header — фиксированная компактная высота, без flex-wrap-роста */
  header {
    padding: 3px 8px;
    height: 28px; min-height: 28px; max-height: 28px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  #title { font-size: 11px; }
  #hint {
    font-size: 9px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
  }

  /* main = grid: viewer берёт всё, meta столько сколько нужно но не больше 38vh */
  main {
    display: grid;
    grid-template-rows: 1fr auto;
    height: calc(100dvh - 28px);
  }

  #viewer {
    min-height: 0;          /* grid даст ему остаток места */
    flex-direction: column;
    padding: 2px; gap: 2px;
  }
  .slot { flex: 1 1 0; min-height: 0; }
  .slot-label { font-size: 14px; padding: 4px 10px; }

  #meta {
    padding: 6px 10px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    max-height: 38vh;
    overflow: hidden;       /* если контент вдруг больше — обрезаем, не растим */
  }
  .kv {
    font-size: 11px; gap: 6px;
    white-space: nowrap; overflow: hidden;
  }

  .comment-row { flex-direction: column; gap: 6px; }
  #comment {
    height: 44px;            /* фиксированная высота, без авто-роста */
    min-height: 44px; max-height: 44px;
    font-size: 14px; padding: 6px 8px;
    resize: none;
  }
  .actions {
    flex-direction: row; min-width: 0; gap: 6px;
  }
  .actions button {
    flex: 1; padding: 10px 4px; font-size: 13px;
  }
}