/* Warcut / Warpaint 20-Phase Modernization - Phase 07 Clip Editing Core
   Adds clip edit controls, drag-reorder affordances, and a plain splitter grip between the main timeline and Layer Timeline Matrix. */
:root{
  --warcut-phase07-clip-strip-height:34px;
  --warcut-phase07-matrix-height:150px;
  --warcut-phase07-matrix-min-height:74px;
  --warcut-phase07-matrix-max-height:620px;
  --warcut-phase07-matrix-splitter-height:9px;
}

html.warcut-phase07-clip-ready #phase18Controls.warcut-phase07-layout{
  grid-template-rows:9px var(--warcut-phase05-transport-height) var(--warcut-phase06-scale-height) var(--warcut-phase07-clip-strip-height) auto minmax(76px,1fr) var(--warcut-phase07-matrix-splitter-height) var(--warcut-phase07-matrix-height) minmax(26px,auto) !important;
}

html.warcut-phase07-clip-ready #phase18Controls .phase06-scale-strip{ grid-row:3 !important; }
html.warcut-phase07-clip-ready #phase18Controls .phase07-clip-edit-strip{
  grid-row:4 !important;
  width:calc(100% - 12px) !important;
  max-width:none !important;
  min-width:0 !important;
  justify-self:stretch !important;
  align-self:stretch !important;
  box-sizing:border-box !important;
  margin:0 6px !important;
  min-height:var(--warcut-phase07-clip-strip-height);
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border:1px solid rgba(95,125,153,.26);
  border-radius:7px;
  background:linear-gradient(180deg,rgba(26,31,41,.98),rgba(10,13,19,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}
html.warcut-phase07-clip-ready #phase18Controls .phase18-toolbar{ grid-row:5 !important; }
html.warcut-phase07-clip-ready #phase18Controls .phase18-timeline-shell{ grid-row:6 !important; }
html.warcut-phase07-clip-ready #phase18Controls .phase07-matrix-splitter-handle{ grid-row:7 !important; }
html.warcut-phase07-clip-ready #phase18Controls #phase1LayerTimeline{ grid-row:8 !important; }
html.warcut-phase07-clip-ready #phase18Controls .phase18-frame-rail{ grid-row:9 !important; }

.phase07-kicker{
  flex:0 0 auto;
  color:#9fb5c7;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-right:3px;
}
.phase07-clip-edit-strip button,
.phase07-clip-edit-strip select{
  flex:0 0 auto;
  min-height:22px !important;
  padding:3px 7px !important;
  border:1px solid rgba(93,113,132,.84) !important;
  border-radius:6px !important;
  background:rgba(18,22,30,.96) !important;
  color:#eaf8ff !important;
  font-size:10px !important;
  line-height:1 !important;
  cursor:pointer !important;
  white-space:nowrap !important;
}
.phase07-clip-edit-strip button:hover,
.phase07-clip-edit-strip select:hover{
  border-color:rgba(57,207,255,.78) !important;
  color:#9defff !important;
}
.phase07-clip-edit-strip button.is-active{
  border-color:rgba(245,185,66,.84) !important;
  color:#ffe7a2 !important;
  background:linear-gradient(180deg,rgba(245,185,66,.18),rgba(18,22,30,.96)) !important;
}
.phase07-readout{
  flex:1 1 140px;
  min-width:120px;
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:3px 7px;
  border:1px solid rgba(88,108,128,.52);
  border-radius:999px;
  background:rgba(0,0,0,.18);
  color:#aac0d2;
  font-size:10px;
}
.phase07-divider{
  flex:0 0 1px;
  width:1px;
  height:18px;
  background:rgba(255,255,255,.12);
}

html.warcut-phase07-clip-ready .phase18-clip{
  cursor:grab !important;
  will-change:transform;
}
html.warcut-phase07-clip-ready .phase18-clip:active{ cursor:grabbing !important; }
.phase18-clip.phase07-dragging{
  z-index:30 !important;
  opacity:.82 !important;
  box-shadow:0 0 0 2px rgba(57,207,255,.78),0 0 18px rgba(57,207,255,.36) !important;
  transform:translateY(-2px);
}
.phase18-clip.phase07-drop-before::before,
.phase18-clip.phase07-drop-after::after{
  content:'';
  position:absolute;
  top:-7px;
  bottom:-7px;
  width:2px;
  border-radius:99px;
  background:#ffe47a;
  box-shadow:0 0 10px rgba(245,185,66,.70);
  pointer-events:none;
}
.phase18-clip.phase07-drop-before::before{ left:-4px; }
.phase18-clip.phase07-drop-after::after{ right:-4px; }


.phase07-matrix-splitter-handle{
  width:calc(100% - 12px);
  justify-self:stretch;
  align-self:stretch;
  min-height:var(--warcut-phase07-matrix-splitter-height);
  height:var(--warcut-phase07-matrix-splitter-height);
  margin:0 6px;
  padding:0 !important;
  border:0;
  border-top:1px solid rgba(255,255,255,.045);
  border-bottom:1px solid rgba(255,255,255,.07);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(82,96,111,.72),rgba(28,33,41,.92));
  cursor:ns-resize;
  user-select:none;
  touch-action:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 1px 0 rgba(0,0,0,.28);
}
.phase07-matrix-splitter-handle::before{
  content:'';
  flex:0 0 160px;
  max-width:160px;
  height:5px;
  border-top:1px solid rgba(191,232,255,.32);
  border-bottom:1px solid rgba(191,232,255,.20);
  background:repeating-linear-gradient(to right,rgba(191,232,255,.32) 0 1px,transparent 1px 7px);
  opacity:.76;
  border-radius:999px;
}
.phase07-matrix-splitter-handle:hover{
  background:linear-gradient(180deg,rgba(95,111,128,.82),rgba(32,39,49,.96));
}
.phase07-matrix-splitter-handle:focus-visible{
  outline:2px solid rgba(57,207,255,.72);
  outline-offset:-2px;
}
html.warcut-phase07-clip-ready #phase18Controls #phase1LayerTimeline > .phase07-matrix-resize-handle{
  display:none !important;
}
html.phase07-matrix-dragging,
html.phase07-matrix-dragging *{
  cursor:ns-resize !important;
  user-select:none !important;
}
html.warcut-phase07-clip-ready #phase18Controls #phase1LayerTimeline{
  min-height:var(--warcut-phase07-matrix-min-height) !important;
  height:var(--warcut-phase07-matrix-height) !important;
  max-height:var(--warcut-phase07-matrix-height) !important;
  resize:none !important;
}
html.warcut-phase07-clip-ready #phase18Controls #phase1LayerTimeline .phase1-layer-grid{
  flex:1 1 auto !important;
  min-height:0 !important;
}
@media (max-width:1280px){
  html.warcut-phase07-clip-ready #phase18Controls.warcut-phase07-layout{
    --warcut-phase07-clip-strip-height:58px;
    grid-template-rows:9px auto var(--warcut-phase06-scale-height) var(--warcut-phase07-clip-strip-height) auto minmax(70px,1fr) var(--warcut-phase07-matrix-splitter-height) var(--warcut-phase07-matrix-height) minmax(26px,auto) !important;
  }
  html.warcut-phase07-clip-ready #phase18Controls .phase07-clip-edit-strip{
    flex-wrap:wrap;
    align-content:flex-start;
  }
  .phase07-readout{ flex-basis:100%; max-width:none; }
}