body {
  background: white;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.top {
  position: fixed !important;
  top: 0;
  display: flex;
  height: 5vh;
  justify-content: space-around;
  z-index: 2;
  width: 100vw;
}
.top span {
  font-weight: bold;
  font-family: serif;
  font-style: italic;
  color: white;
  font-size: 3vh;
  padding: 1vh;
}
.bck {
  background: transparent;
  border: none;
  font-size: 3vh;
  color: white;
  margin-top: 1vh;
}
.bck:focus {
  animation: up 0.3s ease;
}
.camera {
  position: fixed;   /* MOST IMPORTANT */
  inset: 0;          /* top:0 left:0 right:0 bottom:0 */
  width: 100vw;
  height: 100dvh;
  object-fit: cover; /* fill like Lens */
  z-index: 1;
}
.buttons {
  position: fixed;  /* change from absolute */
  bottom: 3vh;
  left: 5vw;
  height: 22vh;
  width: 90vw;
  z-index: 2;       /* above camera */
}
.options {
  display: flex;
  padding: 1vh;
  border-radius: 5vh;
  background: white;
  box-shadow: 0.2vh 0.2vh 2vh dodgerblue;
  justify-content: space-around;
}
.cont {
  background: transparent;
  border: none;
  padding: 2vh;
  border-radius: 2vh;
}
.cont i {
  font-size: 3vh;
}
.cont span {
  font-family: sans-serif;
  font-size: 1.2vh !important;
  font-weight: bold;
}
#in-use {
  background: #007bff;
  color: white;   
}
.cont:focus {
  background: #007bff;
  color: white;
}
.controls {
  display: flex;
  height: 10vh;
  margin-bottom: 2vh;
  justify-content: space-around;
}
.controls button {
  height: 7vh;
  background: white;
  width: 7vh;
  border: none;
  margin-top: 2vh;
  border-radius: 50%;
 box-shadow: 0.2vh 0.2vh 2vh dodgerblue;
   overflow: hidden;
}
.controls button:hover {
  animation: up 0.3s ease;
}
@keyframes up {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.25);
  }
  50% {
    transform: scale(1.5);
  }
  75% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
.controls button img {
  height: 3.5vh;
}
.capture {
  height: 10vh !important;
  margin-top: 0 !important;
  width: 10vh !important;
}
.custom-alert {
  position: fixed;
  bottom: 30vh;
  left: 50%;
  transform: translateX(-50%) translateY(2vh);

  background: rgba(0, 0, 0, 0.9);
  color: white;

  padding: 1.5vh 4vw;
  border-radius: 4vh;

  font-family: sans-serif;
  font-size: 1.6vh;
  font-weight: bold;

  z-index: 999999;

  box-shadow: 0 0 3vh rgba(0, 0, 0, 0.6);

  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.custom-alert.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0vh);
}
/* =========================
   🟩 CROPPING BOX - GOOGLE LENS STYLE
   ========================= */
#cropBox {
  position: fixed;
  top: 20vh;
  left: 10vw;
  width: 80vw;
  height: 40vh;

  /* Transparent fill with white border edges */
  background: transparent;
  border: 0.3vh solid white;
  
  z-index: 5;
  touch-action: none;
  box-sizing: border-box;
  pointer-events: auto;
}

/* Edge handles - invisible but wide touch area */
#cropBox::before {
  content: "";
  position: absolute;
  inset: -12px; /* Extends touch area beyond visible border */
  z-index: -1;
}

/* Corner handles - white circles like Google Lens */
.crop-handle {
  position: absolute;
  width: 2vh;
  height: 2vh;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  pointer-events: auto;
  touch-action: none;
  z-index: 10;
}

.crop-handle.top-left {
  top: -12px;
  left: -12px;
  cursor: nw-resize;
}

.crop-handle.top-right {
  top: -12px;
  right: -12px;
  cursor: ne-resize;
}

.crop-handle.bottom-left {
  bottom: -12px;
  left: -12px;
  cursor: sw-resize;
}

.crop-handle.bottom-right {
  bottom: -12px;
  right: -12px;
  cursor: se-resize;
}

/* Edge resize zones - invisible hit areas */
.edge-handle {
  position: absolute;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  z-index: 8;
}

.edge-handle.top-edge {
  top: -15px;
  left: 15px;
  right: 15px;
  height: 20px;
  cursor: n-resize;
}

.edge-handle.bottom-edge {
  bottom: -15px;
  left: 15px;
  right: 15px;
  height: 20px;
  cursor: s-resize;
}

.edge-handle.left-edge {
  left: -15px;
  top: 15px;
  bottom: 15px;
  width: 20px;
  cursor: w-resize;
}

.edge-handle.right-edge {
  right: -15px;
  top: 15px;
  bottom: 15px;
  width: 20px;
  cursor: e-resize;
}

/* Remove old pseudo-element handle */
#cropBox::after {
  display: none;
}
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1c2c;
  }
  .options {
    background: black;
  }
  .cont {
    color: white !important;
  }
}