/* ===== MẠNH LIFE V49 - CREATE DRAWER VISIBLE =====
   Feedback: khi mở rộng ô tạo nhiệm vụ compact thì nội dung ghi âm/tùy chọn phải hiện đầy đủ, không bị cắt/ẩn.
   Giữ dock tạo task bé, chỉ mở rộng khi cần.
*/

/* Cho các panel cha không cắt drawer compact */
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-hero-card.ml-task-panel,
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-task-panel,
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-task-row,
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-current-task-wrap,
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-allocation-panel,
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-allocation-head,
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot,
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-compact-create-box{
  overflow:visible !important;
}

.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-allocation-panel{
  z-index:80 !important;
  isolation:isolate !important;
}

.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot{
  position:relative !important;
  z-index:220 !important;
}

.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot .ml-compact-create-box{
  position:relative !important;
  z-index:230 !important;
}

/* Drawer mở ra rộng vừa đủ, không bị parent clip. */
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot .ml-compact-audio-drawer:not([hidden]),
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot .ml-compact-detail-drawer:not([hidden]){
  display:block !important;
  position:absolute !important;
  top:50px !important;
  right:0 !important;
  left:auto !important;
  width:min(720px, calc(100vw - 72px)) !important;
  max-width:calc(100vw - 72px) !important;
  max-height:min(56vh, 440px) !important;
  overflow:auto !important;
  overscroll-behavior:contain !important;
  z-index:99999 !important;
  transform:none !important;
  background:rgba(255,255,255,.99) !important;
  border:1px solid rgba(226,232,240,.98) !important;
  border-radius:18px !important;
  box-shadow:0 26px 80px rgba(15,23,42,.22) !important;
}

/* Khi drawer mở, đẩy thanh phân bổ xuống đúng bằng chiều cao drawer để không bị đè/khuất. */
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-allocation-panel.ml-v49-drawer-open .ml-time-budget-bar{
  margin-top:var(--v49-create-drawer-offset, 150px) !important;
  transition:margin-top .14s ease !important;
}

/* Audio drawer: cao vừa đủ, audio full chiều ngang */
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot .ml-compact-audio-drawer audio,
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot .ml-compact-audio-drawer [data-compact-audio-preview]{
  width:100% !important;
  height:42px !important;
  margin-top:8px !important;
}

.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot .ml-v28-rec-line{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:24px !important;
  white-space:nowrap !important;
}

/* Detail drawer: gọn nhưng đủ dùng */
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot .ml-compact-detail-drawer textarea{
  width:100% !important;
  min-height:46px !important;
  max-height:92px !important;
  resize:vertical !important;
}

.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot .ml-compact-detail-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:8px !important;
  margin-top:8px !important;
}

/* Vùng task bên dưới thấp z-index hơn drawer */
.ml-focus-app[data-v49-create-drawer-visible="true"] .ml-current-task-list{
  position:relative !important;
  z-index:1 !important;
}

@media(max-width:900px){
  .ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot .ml-compact-audio-drawer:not([hidden]),
  .ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot .ml-compact-detail-drawer:not([hidden]){
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
    right:50% !important;
    transform:translateX(50%) !important;
  }
}

@media(max-width:560px){
  .ml-focus-app[data-v49-create-drawer-visible="true"] .ml-v48-create-slot .ml-compact-detail-grid{
    grid-template-columns:1fr !important;
  }
}