html, body { margin: 0; height: 100%; background: #1e1e1e; overflow: hidden; }

/* Layout Wrapper */
#app-layout {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#viewport { 
  flex: 1 1 auto;
  display: flex;
  flex-direction: column; /* Stacks the header above the image container */
  justify-content: center; /* Centers image/canvas when modal is hidden */
  align-items: center;
  /* position: relative; */
  transition: all 0.3s ease-in-out; /* Smooth shifting animation */ 

  /* position: relative; */
  /* width: 100vw;  */
  /* height: 100vh;  */
}

.viewport-header {
  width: 100%;
  text-align: center;   /* Centers the text inside the header */
  padding: 15px 0;      /* Adds breathing room around the title */
}

.viewport-header h4 {
  margin: 0;
  /*margin: 0 0 5px 0;*/    /* Removes default margins, controls subtitle spacing */
  /* font-size: 0.9rem; */
  color: #ffffff;
}

#image-wrapper {
  position: relative;
  width: 100%;
  flex: 1;              /* Takes up all remaining vertical space */
  display: flex;
  justify-content: center;
  align-items: center;
}
#testImage, #overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
#testImage { object-fit: contain; user-select: none; -webkit-user-drag: none; }
#overlay { cursor: crosshair; }

/* .grid2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #333; }
.grid2x2 img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } */

.modal-container {
  flex: 0 0 auto;
  width: 660px;         /* Fixed width for your tools/results sidebar */
  max-width: 50vw;      /* Prevents it from squeezing the image out on narrow screens */
  height: 100vh;
  /* border-left: 1px solid #444; */
  background: transparent;
  display: flex;        /* Controlled dynamically by JS (none vs flex) */
}

/* dialog#compareModal {
  margin: 0;
  position: fixed;
  top: 50px;
  left: 100px;
  border: none;
  padding: 0;
  background: transparent; Let modal-inner handle background */

  /* Critical: Prevent the outer dialog container from overflowing the screen */
  /*max-width: 90vw;*/   /* Keeps modal at max 90% of screen width */
  /*max-height: 75vh;*/  /* Keeps modal at max 90% of screen height */
  
  /* border: none; border-radius: 8px; padding: 0;
  width: min(90vw, 660px); max-height: 85vh; background: #f5f5f5; */
  /*width: min(90vw, 900px); max-height: 85vh; background: #f5f5f5;*/
/* } */
/* dialog#compareModal::backdrop { background: rgba(0,0,0,0.55); } */
.modal-inner { display: flex; flex-direction: column; 
  background: #f5f5f5;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* max-width: min(90vw, 660px); max-height: 95vh; */
  
  /* Inherit the screen limits from the dialog parent */
  /* max-width: 100%; */
  /* max-height: 100%; */
  
  /* max-height: 85vh;  */
  /* Enables native browser resizing */
  /* resize: both;        
  overflow: hidden;  */
}
.modal-header {
  cursor: move;       /* Changes cursor to show it is draggable */
  user-select: none;  /* Prevents text highlighting while dragging */
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 15px; background: #222; color: #fff; flex: 0 0 auto;
}
.modal-header h4 {
  margin: 0;
}
.icon-btn { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; }
.modal-body { display: flex; gap: 20px; padding: 15px; overflow-y: auto; }

.grids-column { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; flex: 1 1 auto;}
.grid2x2 {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; background: #ffff00; width: 340px;
  /* gap: 2px; background: #333; width: 340px; */
   align-items: start; /* Prevents images from stretching vertically */
}
.grid2x2 img { width: 100%; height: auto; object-fit: cover; display: block; }
/* .grid2x2 img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } */
/* .marker-halo {
  position: absolute; width: 60px; height: 60px; border-radius: 50%;
  background: rgba(0,0,255,0.4); transform: translate(-50%, -50%); pointer-events: none;
} */
 .marker-halo {
  position: absolute; width: 50%; height: 50%;
  background: none; border: 2px solid rgba(0, 255, 255, 0.8);
  transform: translate(-50%, -50%); pointer-events: none;
}
.marker-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: red; transform: translate(-50%, -50%); pointer-events: none;
}

.status {
    color: #1a4fb4;
}


.results-column { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; min-width: 220px; }
.result-card { text-align: center; margin: 0; }
.result-card img { width: 100%; max-width: 250px; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; }
.result-card figcaption { margin-top: 6px; font-size: 0.85rem; color: #1a4fb4; }