/* Imperial-inspired brand palette. Deep navy is the primary brand color,
   but most of this app's own UI (#top-bar, #menu-bar, sheets, buttons) is
   translucent dark chrome sitting *on top of the live camera feed* - navy
   at full brand darkness would nearly disappear there, so --accent/
   --accent-deep are brighter blues (pulled from Imperial's own lighter
   accent range) reserved for exactly those dark-chrome contexts. Pass/fail/
   warning colors (done markers, AI score bands, error dialogs, the rotate
   warning) are semantic, not brand, and are deliberately left alone
   everywhere in this file - only decorative/UI-state accents were remapped
   from the old green/amber scheme to this one. */
:root {
  --imperial-navy: #003e74;
  --imperial-navy-dark: #002147;
  --accent: #0098da;
  --accent-deep: #006eaf;
}

html, body {
  margin: 0;
  padding: 0;
  background: black;
  height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html {
  font-size: 16px !important;
}
body {
  font-size: 1rem !important;
}

.cam-frame {
  width: 100vw;
  height: 100vh;
  object-fit: contain;   
  background: black;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
/* Full-screen takeover when the camera can't be reached at all - see
   showCameraError in index.js. Sits above #video-wrapper/#output (which
   otherwise just stays black with no explanation) but below the shutter/
   menu chrome doesn't matter since those are non-functional without a
   camera anyway; this covers the whole viewport so nothing peeks out from
   underneath. */
#camera-error {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(10, 12, 15, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.camera-error-card {
  max-width: 360px;
  text-align: center;
  color: #e6e6e6;
}
.camera-error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.15);
  color: #ff8a94;
  font-size: 26px;
  margin-bottom: 16px;
}
.camera-error-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.camera-error-text {
  font-size: 14px;
  line-height: 1.5;
  color: #b7bac0;
  margin-bottom: 20px;
}
#camera-error-retry {
  appearance: none;
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--imperial-navy);
  cursor: pointer;
}
#camera-error-retry:hover { background: var(--imperial-navy-dark); }

#video-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  background: black;
  height: calc(var(--vh, 1vh) * 100);
  max-height: calc(var(--vh, 1vh) * 100);
}
#output {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
}
#video {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  object-fit: cover;
  background: black;
}


#menu-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /*height: 80px;*/
  background: rgba(30, 30, 30, 0);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 20px) 20px;
  box-sizing: border-box;
  z-index: 10;
  flex-direction: column;
  gap: 10px;
}

.menu-top{
  width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap:10px;
    overflow:hidden;
}

.menu-bottom{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

#shutter-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #c2c2c257;
    border: 4px solid #8b8a8a;
    box-shadow: 0 0 10px #ffffff22;
    cursor: pointer;
    z-index: 11;
    transition: background 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

#shutter-button.pressed {
  background: #aaa;
}

/* Photo/Search mode icon inside the shutter button - see setShutterMode in
   index.js, which swaps icon-camera/icon-search on this element to match
   the mode switch below. Sized to sit comfortably inside the 50px circle
   (accounting for its 4px border) without touching the edge. */
.shutter-button-icon {
  font-size: 16px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

/* Scene picker toggle - fixed bottom-right corner, mirroring the gallery
   thumbnail's fixed bottom-left corner (#reopen-gallery-btn). Reuses
   .gallery-thumb-btn for its size/shape/border/background; only what
   actually differs (mirrored to the right instead of the left) is
   overridden here. Same bottom offset as .menu-center (shutter + mode
   switch) by default - there's enough width on a normal-size screen for
   the two corners and the centered column to share this one level without
   crowding each other. */
#scene-picker-btn {
  left: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
}
.scene-picker-btn-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  /* The source PNG is black line art on a transparent background - this
     recolors it to white (brightness(0) first flattens it to solid black
     regardless of its original color, then invert(1) flips that to white)
     so it matches every other white icon in the UI. */
  filter: brightness(0) invert(1);
}
/* On a narrow phone there isn't enough width for the corner elements and
   the centered shutter+switch column to share one level without the
   scene-picker/gallery-thumb buttons running into the switch pill. Below
   this width, split them onto two levels instead: .menu-center keeps the
   bottom-most spot (it's the primary, most-used control), and the corner
   elements move up to a level above it. Above this width, everything stays
   at the single shared level it always had. */
@media (max-width: 300px) {
  #reopen-gallery-btn,
  #scene-picker-btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 135px);
  }
}

.menu-center{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.menu-info {
  background: #444444;
  /*display: flex;*/
  display: none;
  padding: 5px;
  min-width: 80px;
  border-radius: 10px;
}
.menu-info-line{
 color: white;
 padding: 0px 10px;
 font-size: 12px;
}
.menu-info-item{
  color: white;
}
/*
#ref-photo-toggle {
  margin-left: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(80,80,80,0.2);
  transition: background 0.2s;
  z-index: 12;
}
#ref-photo-toggle:hover {
  background: rgba(120,120,120,0.4);
}
#ref-photo-toggle.active {
  background: #1fa31f;
}
#ref-photo-toggle.overlay {
  background: #ffb300;
}
*/
.spinner {
  border: 8px solid #eee;
  border-top: 8px solid var(--accent);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  animation: spin 1s linear infinite;
  margin: auto;
}
@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
/*
#reopen-gallery-btn {
  width: 32px;
  height: 32px;
  display: none;
  margin-left: 12px;
  cursor: pointer;
  transition: box-shadow 0.2s;
  vertical-align: middle;
}
#reopen-gallery-btn:hover {
  box-shadow: 0 2px 8px #1fa31f55;
  background: #eaffea;
  border-radius: 50%;
}
  */
.gallery-result-card {
  max-width: 100%;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  /*border-radius: 16px;*/
  box-shadow: 0 2px 12px #0098da22;
  padding: 5px;
  font-size: 12px;
  color: #222;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(var(--vh, 1vh) * 100);
  max-height: calc(var(--vh, 1vh) * 100);
}



.gallery-result-card::-webkit-scrollbar {
  width: 20px;
}

/* Track */
.gallery-result-card::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #ffffff00;; 
  border-radius: 10px;
}
 
/* Handle */
.gallery-result-card::-webkit-scrollbar-thumb {
  background: #c1c1c1; 
  border-radius: 10px;
}

/* Handle on hover */
.gallery-result-card::-webkit-scrollbar-thumb:hover {
  background: #8b8b8b; 
}

/* Dodatkowo, by thumb nie wychodził poza border-radius kontenera */
.gallery-result-card {
  clip-path: inset(0 round 16px);
  padding-left: 15px;
  padding-right: 15px;
}
.gallery-result-card pre {
  background: #f8f8f8;
  border-radius: 10px;
  padding: 18px;
  font-size: 12px;
  color: #222;
  white-space: pre-wrap;
}
.icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(120, 120, 120, 0.4);
  transition: background 0.2s, box-shadow 0.2s;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  user-select: none;

  box-shadow: 0 2px 8px #ffffff22;
  z-index: 12;
}
.icon-btn:hover {
  background: rgba(120,120,120,0.4);
  box-shadow: 0 4px 12px #ffffff22;
}
.icon-btn.active {
  background: var(--accent);
  color: #fff;
}
/* Distinct amber (not another shade of blue) on purpose - #ref-photo-toggle
   is a 3-state cycle (off / reference-only=.active / overlay=.overlay) and
   needs its two "on" states to actually read as different at a glance over
   a live camera feed, which two similarly-dark blues didn't. */
.icon-btn.overlay {
  background: #ffb300;
  color: #1a1a1a;
}
/* #start-new-test-btn before any test has been submitted yet - nothing to
   save, so the action is a no-op (see updateStartNewTestButton). */
.icon-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
#toggle-bottom-bar {
  /* .menu-top no longer holds any visible controls (they've moved to
     #more-options-btn/panel / the shutter-mode switch / the group-id chip,
     or are deliberately hidden) - nothing left to toggle. */
  display: none;
}
/* Top row: badge / Group ID / icon bar as one 3-column grid instead of
   three independently fixed-positioned elements guessing at each other's
   width via vw units - that let them overlap on narrow phones (e.g. the
   badge's wide "no reference yet" hint running under the Group ID chip and
   into the icon bar). The two outer columns share the remaining width
   equally and can shrink to 0, so the center column is never crowded out. */
#top-bar {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  /* An explicit width, not left+right with width:auto - the latter should
     stretch the box between the two edges per spec, but on a grid
     container it instead sized to its columns' combined content width in
     testing, overflowing straight past the viewport on narrow phones. */
  width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 24px);
  z-index: 101;
  display: flex;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  pointer-events: none;
  box-sizing: border-box;
  height:52px;
}
#test-progress-badge {
 min-width: 0;
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(20, 20, 20, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 6px 12px;
    pointer-events: none;
    user-select: none;
    max-width: 100%;
    box-sizing: border-box;
    min-height: stretch;
    justify-content: space-evenly;
}
#test-progress-badge .test-progress-count {
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
#test-progress-badge .test-progress-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Test picker dropdown - replaces the old beaker-icon button/popup menu.
   #test-progress-badge itself is pointer-events:none (a passive status
   readout), so this wrapper opts back into pointer events for itself only.
   Deliberately a plain, no-accent-color look - no accent color of its own,
   selected test is conveyed by its text alone, same as any other dropdown. */
.test-progress-select-wrap {
  position: relative;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
}
.test-progress-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(30, 30, 30, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 6px 22px 6px 12px;
  cursor: pointer;
  max-width: 100%;
  text-align: center;
  /* The dark background/white text above only styles the closed select box -
     the dropdown's own open option list is drawn by the browser/OS using
     its native (usually white/light) form-control theme regardless, unless
     told otherwise. color-scheme:dark asks for a dark native theme there
     too; the explicit option colors below are a belt-and-suspenders fallback
     for browsers that only partially honor that. */
  color-scheme: dark;
}
.test-progress-select-wrap select option {
  background: #202124;
  color: #fff;
}
/* Already-submitted test - see updateTestProgressSelectOptions in index.js,
   called whenever the badge/dropdown refreshes so this stays in sync with
   the actual per-test gallery state. Native <select> options only honor a
   handful of CSS properties (color/background), which is all we need here. */
.test-progress-select-wrap select option.test-option-done {
  color: #4cd964;
}
/* Closed-state select text - toggled alongside the option class above (see
   updateTestProgressSelectOptions) so a done test reads green even while
   the dropdown itself is closed, not just in its open option list. */
.test-progress-select-wrap select.test-progress-select--done {
  color: #4cd964;
}
.test-progress-select-wrap select:hover {
  border-color: rgba(255, 255, 255, 0.45);
}
.test-progress-select-wrap select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.test-progress-select-wrap .test-progress-select-caret {
  position: absolute;
  right: 13px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
/* "No reference yet" call-to-action reads more like a nudge than a status
   line - wraps instead of truncating (still capped to the badge's own grid
   column - see #top-bar - so it can't run under the Group ID chip or icon
   bar), and a warmer accent border so it stands out until the user actually
   finds a reference. */
#test-progress-badge.test-progress-badge--hint {
  /* border-color: rgba(255, 179, 0, 0.55); */
}
#test-progress-badge.test-progress-badge--hint .test-progress-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* Group ID - center column of #top-bar, its own small pill so it reads as
   a distinct, required piece of setup rather than another line inside the
   badge. */
#group-id-bar {
  /* stretch (default) rather than justify-self:center - see the note on
     #test-progress-badge above. This column is auto-sized to the chip's
     own content anyway, so stretching doesn't visibly change anything;
     display:flex + justify-content:center keeps the chip centered within
     it regardless. */
  display: flex;
  justify-content: center;
  max-width: 100%;
  pointer-events: auto;
  min-width: 0;
}
.group-id-chip {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.72);
  border: 1px solid rgba(41, 41, 41, 1);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  max-width: 40vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  box-sizing: border-box;
}
.group-id-chip:hover {
  border-color: rgba(0, 152, 218, 0.8);
}
.group-id-chip i {
  font-size: 12px;
}
/* More-options toggle - right column of #top-bar. Reuses .gallery-thumb-btn
   (same size/shape/border as #reopen-gallery-btn) via a shared class on the
   element; only what actually differs from that base gets overridden here:
   it's a grid child (not independently fixed) and shows two stacked
   icon-dot-3 glyphs (a 2x3 dot grid) instead of a photo. */
#more-options-btn.more-options-btn {
  position: static;
  justify-self: end;
  pointer-events: auto;
  flex-direction: column;
  gap: 2px;
  background: rgba(20, 20, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  aspect-ratio: 1 / 1;
    width: auto;
    min-height: stretch;
    margin-left:auto
}
#more-options-btn.more-options-btn i {
      font-size: 20px;
    /* line-height: 0.1; */
    height: 10px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

/* Shared "bottom sheet" plumbing for both #more-options-panel and
   #scene-picker-panel below - only one is ever open at once (opening
   either closes the other first, see index.js), so a single backdrop
   serves both. */
#sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 150;
}
.sheet-panel {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 151;
  background: rgba(45, 45, 48, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  padding: 18px 16px 20px;
  box-sizing: border-box;
}
.sheet-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9aa0a6;
  text-align: center;
  margin: 0 0 14px;
}
/* While either sheet is open, hide the other bottom-anchored controls it
   would otherwise sit on top of / crowd against. */
body.sheet-open #menu-bar,
body.sheet-open #reopen-gallery-btn,
body.sheet-open #more-options-btn,
body.sheet-open #scene-picker-btn {
  display: none;
}

/* --- More-options sheet content (opened by #more-options-btn) --- */
.more-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 8px;
}
.more-options-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.more-options-item .icon-btn {
  margin: 0 auto;
}
.more-options-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ddd;
  text-align: center;
}

/* --- Scene picker sheet content (opened by #scene-picker-btn) --- */
.scene-picker-columns {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.scene-picker-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scene-picker-col + .scene-picker-col {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 16px;
}
.scene-picker-col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9aa0a6;
  text-align: center;
}
.scene-picker-col-wrap {
  position: relative;
  display: flex;
  /* align-items left at its default (stretch) so the select below fills
     this wrap's full height - see the comment on .scene-picker-col-wrap
     select for why that matters. */
  flex: 1 1 auto;
}
.scene-picker-col-wrap select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 14px 30px 14px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
  /* See the same note on .test-progress-select-wrap select - the dropdown's
     own open option list is drawn by the browser/OS, not by this rule. */
  color-scheme: dark;
  white-space: normal;
  text-align: center;
  /* Bigger by default (min-height), and - together with .scene-picker-col's
     flex:1/.scene-picker-columns's align-items:stretch above - stretches to
     match whichever of the two selects needs more room, e.g. when this
     select's own option text is short (one line) but its sibling's wraps to
     two: both columns are already stretched to the taller one's height,
     align-self:stretch here is what makes THIS select actually fill that
     extra height too, instead of staying at its own shorter natural size. */
  min-height: 52px;
  align-self: stretch;
}
.scene-picker-col-wrap select:hover {
  border-color: rgba(255, 255, 255, 0.4);
}
.scene-picker-col-wrap select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.scene-picker-col-wrap select option {
  background: #202124;
  color: #fff;
}
.scene-picker-col-caret {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
/* Sits just below #more-options-btn (top-right corner, ~58px tall from the
   top inset) rather than at the same top offset - they used to overlap
   since both anchor to that same corner. Same right edge as that button
   (12px inset) so the two sit centered/stacked on top of each other, and
   the same width/height/corner-rounding as .gallery-thumb-btn (48px,
   14px radius) instead of .icon-btn's default circular 40px shape, so it
   visually matches rather than looking like a different kind of control. */
#rotate-warning {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 68px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  cursor: default !important;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 200, 0, 0.85);
  animation: blink-rotate 2s linear infinite;
  box-shadow: 0 2px 8px #ffb30088;
  z-index: 200;
}

@keyframes blink-rotate {
  0%   { opacity: 1; }
  50%  { opacity: 0.1; }
  100% { opacity: 1; }
}

#rotate-warning img {
  width: 29px;
  height: auto;
  padding-top: 1px;
  display: block;
}

/* Search/Photo shutter mode switch - iOS photo/video style pill under the
   shutter button. Replaces the old #find-reference-btn. */
.shutter-mode-switch {
  display: flex;
  align-items: center;
  background: rgba(30, 30, 30, 0.55);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  user-select: none;
}
.shutter-mode-option {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.shutter-mode-option.active {
  background: var(--accent);
  color: #fff;
}
.shutter-mode-option.disabled {
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
}

/* Gallery thumbnail button - fixed bottom-left corner, mirroring
   #scene-picker-btn's fixed bottom-right corner. Replaces the old
   plain .icon-btn #reopen-gallery-btn. Always present (never display:none):
   grayed out with just the picture icon when there's nothing to show yet,
   swaps to the latest submitted photo as its background once there is one -
   see updateGalleryButton in index.js. */
.gallery-thumb-btn {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 101;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background-color: rgba(120, 120, 120, 0.4);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s;
}
.gallery-thumb-btn.empty {
  opacity: 0.4;
  border-color: rgba(255, 255, 255, 0.3);
  cursor: default;
  pointer-events: none;
}
.gallery-thumb-btn.has-photo i {
  display: none;
}

.test-node { font-size: 13px!important; margin-bottom: 2px; }
.test-node input[type=number] { font-size: 12px; border-radius: 5px; border: 1px solid #ccc; padding: 2px 6px; }
.test-node .test-name { margin-left: 6px; }
.gallery-result-card,
.test-result-flex-card {
  display: flex;
  flex-direction: column;

}



.test-node .test-last b{
  font-weight: 1;
  font-style: italic;
}

#test-tree-list {
  /*flex: 1 1 0;*/
  font-size: 12px !important;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}


#test-tree-list::-webkit-scrollbar {
  width: 20px;
}

/* Track */
#test-tree-list::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #ffffff00;; 
  border-radius: 10px;
}
 
/* Handle */
#test-tree-list::-webkit-scrollbar-thumb {
  background: #c1c1c1; 
  border-radius: 10px;
}

/* Handle on hover */
#test-tree-list:-webkit-scrollbar-thumb:hover {
  background: #8b8b8b; 
}
.test-points-editable:focus {
  background: #e8f4fb;
  border-bottom: 1px solid var(--accent-deep);
}
#test-result-panel-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.test-tree-list {
  max-height: 320px;   /* lub inna wartość, np. 40vh */
  overflow-y: auto;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #f9f9f9;
  box-shadow: 0 1px 4px #0001;
  padding: 8px 0;
}

#main_cont{
  position:fixed;
  top:0;
  left:0;
  z-index: 1060;
}

/* .menu-top is left empty (its remaining children are deliberately hidden)
   and the scene picker is now its own fixed-position #scene-picker-btn, so
   #menu-bar only really lays out .menu-bottom (the shutter + mode switch)
   at any width - no responsive reordering needed any more. */

/* Fake spacer to allow mobile browsers to hide the address/tool bar */
#fake-spacer {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100 + 1000px);
  min-height: 120px;
  pointer-events: none;
  background: transparent;
  display: block;
  z-index: 0;
}


@media (max-width: 800px) {
  html, body {
    height: auto;
    min-height: 100vh;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }


}

/* Storage-folder info line inside the Group ID dialog (see
   groupIdStorageInfoHtml/openGroupIdSwal in index.js) - that dialog is a
   plain SweetAlert2 popup (default light theme, dark text), so this is
   styled to stay legible there rather than matching the rest of the app's
   dark UI. */
.group-id-storage-note {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}
.group-id-storage-note code {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f0f0f0;
  color: #333;
  font-size: 11px;
  word-break: break-all;
}
.group-id-storage-note--pending {
  font-style: italic;
  color: #888;
}

/* The Group ID SweetAlert2 popup can be taller than the visible viewport on
   phones (especially once the on-screen keyboard shrinks it further), so cap
   it to the actual viewport height and let its content scroll instead of
   getting clipped/pushed off-screen. */
.group-id-swal-popup {
  max-height: calc(var(--vh, 1vh) * 100 - 20px);
  overflow-y: auto;
}