/* Câmera — same visual language as the rest of the desktop (shell.css):
   plain 1px solid borders, translucent white panels, one orange accent.
   This is a separate document loaded in its own iframe, so it can't read
   the parent's CSS variables directly — the same hsl(30,80%,50%) value is
   just repeated here so the accent matches. */
:root{
  --accent: hsl(30, 80%, 50%);
  --accent-faded: hsla(30, 80%, 50%, 0.35);
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:Arial, sans-serif;
  background:rgba(255,255,255,0.85); /* matches the parent .window panel exactly, so there's no visible seam where the iframe starts */
}

video{
  /* Never actually shown — see camera.html's comment. Kept in the
     document (not display:none) because some browsers pause/starve
     hidden <video> elements, which would stall drawImage() reads. */
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}

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

/* ---------- live preview ---------- */
#viewport{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  background:#000;
  overflow:hidden;
}
#preview{
  display:block;
  width:100%;
  height:100%;
}
#cameraMessage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  color:#fff;
  font-size:14px;
  line-height:1.5;
  background:#111;
}
#cameraMessage.hidden{display:none;}

#switchBtn{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.7);
  background:rgba(0,0,0,0.45);
  color:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
/* Hidden entirely (via JS, not just CSS) when the device only exposes one
   camera — no point offering a switch that can't do anything. */
#switchBtn.hidden{display:none;}

/* ---------- filter strip ---------- */
#filterStrip{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px;
  overflow-x:auto;
  border-top:1px solid;
  border-bottom:1px solid;
  background:rgba(255,255,255,0.85);
}
.filter-btn{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  cursor:pointer;
  padding:6px 12px;
  border:1px solid;
  background:#fff;
  font:12px/1 Arial, sans-serif;
  white-space:nowrap;
}
.filter-btn.active{
  background:var(--accent);
  color:#fff;
}

/* Shows which of the 3 channels the next shutter click will capture.
   Only visible while the Tricromia filter is selected — camera.js sets
   #tricromiaChannelLabel's color to match (red/green/blue) so it reads
   at a glance, not just from the letter. */
#tricromiaIndicator{
  margin-left:auto;
  flex:0 0 auto;
  font:12px/1 Arial, sans-serif;
  white-space:nowrap;
}
#tricromiaIndicator.hidden{display:none;}
#tricromiaChannelLabel{
  font-weight:bold;
}

/* ---------- shutter ---------- */
#controls{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
#shutterBtn{
  appearance:none;
  -webkit-appearance:none;
  width:60px;
  height:60px;
  border-radius:50%;
  border:3px solid;
  background:var(--accent);
  cursor:pointer;
  padding:0;
}
#shutterBtn:active{
  background:hsl(30, 80%, 42%);
}

/* ---------- gallery strip ---------- */
#gallery{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  padding:0 10px 10px;
  overflow-x:auto;
  min-height:0;
}
#gallery:empty{
  padding:0; /* no wasted strip height before the first shot is taken */
}
.shot-thumb{
  flex:0 0 auto;
  width:52px;
  height:52px;
  border:1px solid;
  background-size:cover;
  background-position:center;
  cursor:pointer;
  padding:0;
}

/* ---------- enlarged shot overlay ---------- */
#shotOverlay{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:20px;
  background:rgba(0,0,0,0.85);
  z-index:10;
}
#shotOverlay.hidden{display:none;}
#shotOverlayImg{
  max-width:100%;
  max-height:70%;
  border:1px solid #fff;
}
#shotOverlayControls{
  display:flex;
  gap:10px;
}
#shotOverlayControls a,
#shotOverlayControls button{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding:8px 16px;
  border:1px solid #fff;
  background:rgba(255,255,255,0.15);
  color:#fff;
  font:13px Arial, sans-serif;
  text-decoration:none;
}