/* Prevent text selection globally */
* { user-select: none; }

body { font-family: sans-serif; margin: 0px; }

/* Wrapper flips the visual order so the top edge looks like the grip */
.timeline-wrapper {
  display: flex;
  flex-direction: column-reverse; /* timeline appears with its "grip" at top */
  border: 1px solid #444;
  width: 100%;
}

/* Timeline resizable with native CSS */
.timeline {
margin-top:5px;
/*	background-color:lightgray;*/
  height: 100%;         /* default height */
  min-height: 100px;     /* prevent collapsing too far */
  max-height: 600px;     /* optional upper bound */
  overflow: auto;        /* required for resize to show the grip */
  resize: vertical;      /* enable vertical resizing */
  border-top: 2px dotted #888; /* thick top border to visually suggest the grip */
  box-sizing: border-box;
  position: relative;    /* keep in normal flow; NOT fixed */
}

/* Remove the conflicting second .timeline rule (the fixed one) */

/* Track visuals */
.track { 
margin-top: 10px; 
background: #fafafa; }
.track-header { 
position:relative;
top:99999;
display: flex; align-items: center; margin-bottom: 5px;font-size:12px; }
.track-label { width: 80px; cursor: move; color:black;background-color:white;padding:3px;border:1px dashed gray;border-radius:3px;}
.track-strip { 
/*position: relative;*/
 height: 30px; background: #eee; }

.ruler { display: flex; border-bottom: 1px solid #999;}
.tick { flex: 0 0 24px; text-align: center; border-left: 1px solid #ccc; font-size:0px;}

/* Frame blocks */
.frame-block {
  position: absolute;
  height: 20px;
  background: #eee;
  border: 2px solid #666;
/*  border-radius: 4px;*/
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  cursor: pointer;
}
.frame-block.selected { border-color: #00aaff; background: #cceeff; }

/*.handle {*/
/*  position: absolute; top: 0; width: 6px; height: 100%;*/
/*  background: #00aaff; cursor: ew-resize;*/
/*}*/
/*.handle.left { left: -3px; }*/
/*.handle.right { right: -3px; }*/

.track.selected { outline: 2px solid red; background: #fee; }
.drag-over { outline: 2px dashed #f00; }

/* Playhead */
.playhead {
  position: absolute;
   top: 0; height: 100%; width: 2px; background: red;
  pointer-events: none; /* line itself not draggable */
}
.playhead-head {
/*	z-index:9999999;*/
  position: absolute; top: -8px; left: -6px; width: 14px; height: 14px;
  background: red; border-radius: 50%; cursor: grab; pointer-events: auto;
}

/* Camera preview (optional) */
#preview {
  width: 300px; height: 169px; border: 0px solid red;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
#preview img { max-width: 100%; max-height: 100%; position: absolute; }

#camera { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.hidden { display: none; }
/*.tl_btn{width:32px;height:32px;}*/
/* Button base style */
button {
  padding: 5px 5px;
  border: 1px solid gray;
  border-radius: 6px;
  background: white;
  color: black;
  font-size: 12px;
/*  font-weight: 600;*/
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Active (pressed) effect */
/*button:active {*/
/*  background: gray;*/
/*}*/

/* Responsive layout for button group */
.controls {
  display: flex;
  flex-wrap: wrap;       /* wrap buttons on small screens */
  gap: 5px;
  justify-content: center;
  margin: 5px 0;
}

/*button {*/
/*  flex: 1 1 auto;        /* buttons grow/shrink evenly */*/
/*  min-width: 100px;      /* prevent too small buttons */*/
/*}*/


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; /* Important to remove any default margin */
  text-align:center;
}

/* For Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  text-align:center;
}






#levelStripPanel {
  position: fixed;
  bottom: 0;                /* dock at bottom */
  left: 0;
  width: 100%;              /* full width */
  height: 140px;            /* fixed height strip */
  background: #2b2b2b;
  color: white;
/*  box-shadow: 0 -2px 6px rgba(0,0,0,0.4);*/
  transition: transform 0.3s ease;
  transform: translateY(100%); /* hidden by default */
  z-index: 999;
  display: flex;
  flex-direction: column;
}

#levelStripPanel.open {
  transform: translateY(0); /* slide up */
}

.level-strip-header {
  padding: 6px;
  background: #1e1e1e;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #555;
}

.level-strip-content {
  flex: 1;
  overflow-x: auto;          /* ✅ horizontal scroll */
  overflow-y: hidden;
  padding: 10px;
  display: flex;
  flex-direction: row;       /* stack frames horizontally */
  gap: 8px;
  align-items: center;
}

.level-frame {
  width: 80px;               /* fixed size */
  height: 80px;
  background: #444;
  border: 1px solid #999;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;            /* don’t shrink when scrolling */
}
.level-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.level-frame:hover { background: #666; }

/*#levelStripBtn {*/
/*  position: fixed;*/
/*  bottom: 160px;             /* float above strip */*/
/*  right: 20px;*/
/*  background: #444;*/
/*  color: white;*/
/*  border: none;*/
/*  border-radius: 50%;*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  font-size: 20px;*/
/*  cursor: pointer;*/
/*  box-shadow: 0 4px 8px rgba(0,0,0,0.3);*/
/*  z-index: 1000;*/
/*}*/