/* Test-only 2026-10-24 · Shot hover clarity and studio/canvas handoff. */
/* Give the first card enough painted room on all sides; hover effects must
   remain inside the shot strip, never clipped by its scroll viewport. */
html body#daailokStudio #lightShotTimeline .shot-strip {
  padding:12px 18px 15px!important;
  scroll-padding-inline:18px;
  gap:9px;
}
html body#daailokStudio #lightShotTimeline .shot-card {
  flex:0 0 168px!important;
  position:relative!important;
  overflow:visible!important;
  isolation:isolate;
  transition:border-color .17s,box-shadow .17s!important;
}
html body#daailokStudio #lightShotTimeline .shot-card:hover,
html body#daailokStudio #lightShotTimeline .shot-card:focus-within {
  border-color:rgba(240,194,97,.78)!important;
  box-shadow:0 0 0 1px rgba(238,196,110,.22),0 3px 16px rgba(230,183,92,.18)!important;
  z-index:3;
  transform:none!important;
}
html body#daailokStudio #lightShotTimeline .shot-hover-actions {
  inset:0!important;
  border-radius:7px;
  overflow:hidden;
  padding:4px;
  gap:4px;
  z-index:5;
}
html body#daailokStudio #lightShotTimeline .shot-action {
  min-width:0!important;
  flex:0 0 auto;
  height:26px;
  padding:0 7px!important;
  font-size:10px!important;
  border-radius:8px;
}
html body#daailokStudio #lightShotTimeline .shot-action[title] {
  cursor:pointer;
}
html body#daailokStudio #lightShotTimeline .import-to-canvas-btn {
  width:auto!important;
  min-width:75px!important;
  padding:0 12px!important;
  white-space:nowrap;
  font-size:11px!important;
  font-weight:600;
  border:1px solid rgba(241,204,122,.28)!important;
  border-radius:9px!important;
  background:rgba(230,195,116,.08)!important;
  color:inherit;
  transition:background .17s,border-color .17s;
}
html body#daailokStudio #lightShotTimeline .import-to-canvas-btn:hover {
  background:rgba(226,181,85,.18)!important;
  border-color:rgba(242,203,120,.55)!important;
}
html body#daailokStudio #lightShotTimeline .video-sequence-tabs {
  display:inline-flex;align-items:center;gap:4px;flex:0 1 auto;
  max-width:min(470px,42vw);overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;white-space:nowrap;padding:3px 2px;
}
html body#daailokStudio #lightShotTimeline[data-panel="shot"] .video-sequence-tabs {
  display:none!important;
}
html body#daailokStudio #lightShotTimeline .video-sequence-tabs button {
  border:1px solid rgba(174,178,180,.22);
  border-radius:7px;
  min-width:25px;height:27px;
  padding:0 7px;
  background:rgba(255,255,255,.045);
  color:inherit;
  font-size:11px;
  cursor:pointer;
}
html body#daailokStudio #lightShotTimeline .video-sequence-tabs button:hover {
  border-color:rgba(240,197,110,.53);
}
html body#daailokStudio #lightShotTimeline #addVideoSequenceBtn {
  flex:0 0 27px;font-size:16px;font-weight:500;padding:0;
}
html body#daailokStudio #lightShotTimeline .video-sequence-item {
  display:inline-flex;align-items:center;gap:0;flex:0 0 auto;
  border-radius:8px;overflow:hidden;
}
html body#daailokStudio #lightShotTimeline .video-sequence-item button {
  border-radius:0;margin:0;min-width:25px;
}
html body#daailokStudio #lightShotTimeline .video-sequence-item button:first-child {
  border-radius:8px 0 0 8px;
}
html body#daailokStudio #lightShotTimeline .video-sequence-item button:last-child {
  border-radius:0 8px 8px 0;
  color:#eac66c;font-size:15px;
}
html body#daailokStudio #lightShotTimeline .video-sequence-item.active button {
  background:rgba(233,192,101,.16);
  border-color:rgba(233,192,101,.56);
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .timeline-title {
  flex:1 1 auto;min-width:0;
}
html body#daailokStudio #lightShotTimeline[data-panel="route"] .route-preview-actions {
  flex:0 0 auto;min-width:0;
}