/* ============================================================
   VisionCore · 07 Hotfix — top-nav, sidebar, layout collapse
   
   증상: top-nav 영역에서 제목·통계·모드 라벨·힌트가 겹쳐 보이고,
   "Start Auto (VPS)" 같은 긴 텍스트 버튼이 wrap되어 깨짐.
   
   원인: 04-layout.css에서 .top-nav { height: 60px !important }로
   강제한 결과 legacy 마크업의 콘텐츠가 60px 안에 못 들어감.
   nav-left-group의 wrap 처리 부족으로 텍스트 겹침.
   
   조치: height 강제 해제 + 영역별 white-space/overflow 처리.
   ============================================================ */

/* ---------- TOP NAV — height auto, allow content to size itself ---------- */
.top-nav {
  height: auto !important;
  min-height: 64px !important;
  padding: 12px 24px !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

/* nav-left-group: prevent vertical wrap, allow title to ellipsis */
.nav-left-group {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

/* heading block: single line, ellipsis on overflow */
.nav-heading-block {
  min-width: 0 !important;
  flex: 0 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
}
.nav-heading-title {
  font-family: var(--vc-font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 340px !important;
}
.nav-heading-subtitle {
  font-size: 11.5px !important;
  color: var(--vc-ink-4) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 340px !important;
}

/* top-stats: no wrap, push to inline */
.top-stats {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.top-stat {
  white-space: nowrap !important;
}

/* nav-right: tight, no wrap, single line */
.nav-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}

/* mode switcher */
.mode-switcher { flex-shrink: 0 !important; }

/* Engine cluster — clamp text width */
.engine-control-cluster {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.engine-status-pill { white-space: nowrap !important; }
.engine-status-text {
  display: inline-block !important;
  max-width: 90px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

/* toggle-engine ("Start Auto (VPS)" etc.) — single line, no wrap */
#toggle-engine {
  white-space: nowrap !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  line-height: 1.2 !important;
  max-height: 32px !important;
}

/* Other top-nav buttons — keep them on one line */
#chatbot-persona-btn,
#settings-btn,
#open-studio-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ---------- WORKSPACE TOOLBAR — push BELOW top-nav (not inline) ---------- */
.workspace-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 10px 24px !important;
  border-bottom: 1px solid #141414 !important;
  background: #0b0b0b !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}
.workspace-toolbar-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.workspace-toolbar-copy strong {
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--vc-ink-2) !important;
  white-space: nowrap !important;
}
.workspace-toolbar-copy span {
  font-size: 12px !important;
  color: var(--vc-ink-4) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 680px !important;
}
.workspace-toolbar-actions {
  display: inline-flex !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* ---------- SIDEBAR — protect against width collapse ---------- */
.sidebar {
  width: 280px !important;
  flex-shrink: 0 !important;
  min-width: 280px !important;
}

/* Sidebar folder item — JS-generated; needs basic spacing */
.folder-item {
  padding: 10px 12px !important;
  margin-bottom: 3px !important;
  border-radius: 8px !important;
}
.folder-item strong {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Folder section header (PORTFOLIOS 9 etc.) — JS generated, keep readable */
.folder-section-header {
  padding: 8px 12px !important;
  font-size: 10.5px !important;
  letter-spacing: .12em !important;
  color: var(--vc-ink-4) !important;
  background: transparent !important;
}

/* ---------- GRID CONTAINER — restore consistent padding ---------- */
.grid-container {
  padding: 18px 24px !important;
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* ---------- MAIN CONTENT — column flex so toolbar sits under nav ---------- */
.main-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0 !important;
  background: var(--vc-bg) !important;
}

/* ---------- FLOATING ACTION BAR — anchor at bottom, not stretched ---------- */
.floating-action-bar {
  position: fixed !important;
  left: 50% !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: calc(100vw - 48px) !important;
  z-index: var(--vc-z-overlay) !important;
}

/* ---------- IMAGE GRID THUMBNAILS — JS generated, ensure they look right ---------- */
.thumbnail,
.grid-item,
.grid-item-img {
  border-radius: 10px !important;
}

/* "미분류" badge on cards — chip styling */
.grid-item .badge,
.thumbnail .badge,
.classification-badge {
  background: rgba(15,15,15,.85) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--vc-line) !important;
  color: var(--vc-ink-2) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: var(--vc-r-pill) !important;
  letter-spacing: 0 !important;
}

/* ---------- RIGHT SIDEBAR (Tools & Engine) — don't break top-nav z-stack ---------- */
/* 05-screens.css 가 width 를 440px 로 늘렸는데 right 오프셋을 갱신 안 해 40px 삐져나옴 → 수정 */
.right-sidebar {
  z-index: var(--vc-z-drawer) !important;
  right: -500px !important;          /* 440px 폭보다 충분히 더 밀어서 완전 숨김 */
  transition: right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.right-sidebar.open {
  right: 0 !important;
}

/* ---------- PERSONA BOARD MODAL — grid + button fixes ---------- */
/* .modal .icon-btn in 10-modals.css sets width/height/background/border all !important
   which would override inline styles on persona board buttons. Use dedicated class names
   (persona-board-queue-btn / persona-board-dup-btn) to avoid that collision. */
#persona-board-modal {
  align-items: flex-start !important;   /* 모달 패널 상단 정렬 — 내용이 많을 때 스크롤 가능 */
  overflow-y: auto !important;
  padding: 24px !important;
}
#persona-board-modal .modal-content {
  max-height: none !important;           /* components.css 기본 max-height 해제 */
  max-width: 1320px !important;
  width: 95% !important;
  padding: 28px !important;
}
#persona-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) !important;
  gap: 18px !important;
  padding: 4px 0 8px !important;
  max-height: none !important;           /* 스크롤 없이 전체 표시 */
  overflow: visible !important;
}
.persona-preset-card {
  min-height: 164px !important;
}
.persona-board-cover {
  flex: 0 0 132px !important;
}
.persona-board-cover-img,
.persona-board-cover-empty {
  width: 132px !important;
  height: 132px !important;
  border-radius: 12px !important;
  flex-shrink: 0 !important;
}
.persona-board-cover-img {
  object-fit: cover !important;
  display: block !important;
}
.persona-board-cover-empty {
  background: #242424 !important;
  color: #6f6f6f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  text-align: center !important;
}
.persona-board-card-body {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding-right: 78px !important;
}
.persona-board-card-title {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.persona-board-card-meta {
  color: #9a9a9a !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.persona-board-card-rating {
  color: #ffb3c4 !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  margin-top: 6px !important;
}
@media (max-width: 720px) {
  #persona-board-modal {
    padding: 12px !important;
  }
  #persona-board-modal .modal-content {
    width: 100% !important;
    padding: 18px !important;
  }
  #persona-grid {
    grid-template-columns: 1fr !important;
  }
  .persona-preset-card {
    gap: 14px !important;
    min-height: 138px !important;
  }
  .persona-board-cover {
    flex-basis: 108px !important;
  }
  .persona-board-cover-img,
  .persona-board-cover-empty {
    width: 108px !important;
    height: 108px !important;
  }
  .persona-board-card-body {
    padding-right: 58px !important;
  }
  .persona-board-card-title {
    font-size: 16px !important;
  }
}
.persona-board-queue-btn,
.persona-board-dup-btn {
  /* 10-modals.css .modal .icon-btn !important 규칙 무력화 */
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
.persona-board-queue-btn {
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
}
.persona-board-dup-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
}

/* ---------- VIEWPORT BELOW DESKTOP — collapse top-nav gracefully ---------- */
@media (max-width: 1100px) {
  .top-stats { display: none !important; }
  .nav-heading-title { max-width: 200px !important; }
  .nav-heading-subtitle { max-width: 200px !important; }
}
@media (max-width: 900px) {
  #chatbot-persona-btn,
  #settings-btn { display: none !important; }
}