/* ==========================================================
   CANTAIMY v7.6.59 — Stable edit modal after AI generation
   Goal: AI suggestions/description must not grow the dialog.
   The dialog remains inside the usable viewport; only compact
   internal areas may scroll when absolutely necessary.
   ========================================================== */

#editTrackModal{
  z-index:60000 !important;
  box-sizing:border-box;
  padding:12px 12px 88px !important; /* reserve desktop player area */
  align-items:center !important;
  justify-items:center !important;
}

#editTrackModal .track-modal-card{
  box-sizing:border-box;
  width:min(920px,calc(100vw - 24px)) !important;
  max-width:920px !important;
  height:min(650px,calc(100dvh - 112px)) !important;
  max-height:calc(100dvh - 112px) !important;
  margin:0 !important;
  padding:18px 20px !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
}

#editTrackModal .track-modal-head{
  margin-bottom:10px !important;
}
#editTrackModal .track-modal-head h2{
  font-size:25px !important;
}

#editTrackModal #editTrackForm{
  min-height:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}

#editTrackModal .edit-track-grid{
  flex:0 0 auto;
  gap:8px 16px !important;
}
#editTrackModal label{
  gap:5px !important;
}
#editTrackModal input,
#editTrackModal select{
  height:39px !important;
}
#editTrackModal input[type=file]{
  height:39px !important;
  padding:4px 7px !important;
}

/* Artist AI controls stay compact. */
#editTrackModal .edit-track-grid > .ai-field{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:
    "label label"
    "input input"
    "assist more"
    "suggest suggest" !important;
  column-gap:8px !important;
  row-gap:5px !important;
}
#editTrackModal .edit-track-grid > .ai-field > span{grid-area:label}
#editTrackModal .edit-track-grid > .ai-field > input{grid-area:input}
#editTrackModal .edit-track-grid > .ai-field > .ai-assist-btn{grid-area:assist}
#editTrackModal .edit-track-grid > .ai-field > .ai-more-btn{grid-area:more;justify-self:start}
#editTrackModal .edit-track-grid > .ai-field > .ai-suggestions{grid-area:suggest}

/* Suggestions never wrap into a tall block. */
#editTrackModal .ai-suggestions{
  box-sizing:border-box;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  margin-top:0 !important;
  padding:3px 5px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap;
  scrollbar-width:thin;
}
#editTrackModal .ai-suggestion-label{display:none !important}
#editTrackModal .ai-suggestion-chips{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:5px !important;
  width:max-content;
}
#editTrackModal .ai-name-chip{
  flex:0 0 auto;
  min-height:26px !important;
  height:26px !important;
  padding:0 9px !important;
}
#editTrackModal .ai-assist-btn{
  min-height:29px !important;
  height:29px !important;
}
#editTrackModal .ai-more-btn{
  min-height:29px !important;
  height:29px !important;
}

/* Description is deliberately bounded: AI text changes content, not layout. */
#editTrackModal .edit-wide{
  flex:0 0 auto;
  margin-top:8px !important;
}
#editTrackModal textarea[name="description"]{
  height:82px !important;
  min-height:82px !important;
  max-height:82px !important;
  resize:none !important;
  overflow-y:auto !important;
}
#editTrackModal .edit-wide .ai-assist-btn{
  margin-top:0 !important;
}

#editTrackModal .track-modal-actions{
  flex:0 0 auto;
  margin-top:8px !important;
}
#editTrackModal .modal-status{
  flex:0 0 auto;
  min-height:16px !important;
  margin:5px 0 0 !important;
  line-height:16px !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Very short laptop displays: compress further rather than enlarge modal. */
@media (min-width:761px) and (max-height:760px){
  #editTrackModal{
    padding:8px 8px 82px !important;
  }
  #editTrackModal .track-modal-card{
    height:calc(100dvh - 98px) !important;
    max-height:calc(100dvh - 98px) !important;
    padding:13px 16px !important;
  }
  #editTrackModal .track-modal-head{margin-bottom:7px !important}
  #editTrackModal .track-modal-head h2{font-size:22px !important}
  #editTrackModal .edit-track-grid{gap:6px 14px !important}
  #editTrackModal label{gap:3px !important}
  #editTrackModal input,#editTrackModal select{height:35px !important}
  #editTrackModal input[type=file]{height:35px !important}
  #editTrackModal textarea[name="description"]{
    height:66px !important;min-height:66px !important;max-height:66px !important;
  }
  #editTrackModal .ai-suggestions{
    height:30px !important;min-height:30px !important;max-height:30px !important;
  }
  #editTrackModal .ai-name-chip{height:22px !important;min-height:22px !important}
  #editTrackModal .ai-assist-btn,#editTrackModal .ai-more-btn{height:26px !important;min-height:26px !important}
  #editTrackModal .track-modal-actions{margin-top:6px !important}
}

/* Tablet/mobile: reserve the fixed 78px player and use compact sheet. */
@media (max-width:760px){
  #editTrackModal{
    align-items:flex-end !important;
    padding:8px 8px calc(86px + env(safe-area-inset-bottom)) !important;
  }
  #editTrackModal .track-modal-card{
    width:100% !important;
    max-width:none !important;
    height:calc(100dvh - 102px - env(safe-area-inset-bottom)) !important;
    max-height:calc(100dvh - 102px - env(safe-area-inset-bottom)) !important;
    border-radius:20px 20px 0 0 !important;
    overflow:hidden !important;
  }
  #editTrackModal #editTrackForm{
    overflow-y:auto !important;
    padding-right:2px;
  }
  #editTrackModal .edit-track-grid{grid-template-columns:1fr !important}
  #editTrackModal textarea[name="description"]{
    height:76px !important;min-height:76px !important;max-height:76px !important;
  }
}