/* ==========================================================================
   Live2D Parameter Snapshot Panel — 應用程式專屬樣式
   通用元件樣式一律沿用 component-kit.css，本檔只放本工具的版面與階層外觀。
   ========================================================================== */

/* 永遠保留垂直卷軸的空間，避免內容長度跨過一頁時整個版面左右跳動 */
html{ scrollbar-gutter: stable; overflow-y: scroll; }

body{
  font-family:'Noto Sans TC', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- 版面 ----------
   背景網格畫在 .main 上，因此 .main 必須佔滿剩餘寬度（不設 max-width），
   內容改由 .main-inner 置中限寬，這樣寬螢幕右側才不會出現空白。          */
/* 側欄動畫：
   展開用帶過衝的 --ease（拉開後回彈一下）；
   收合改用「先反向拉開再收回」的 ease-in-back 曲線，
   視覺上是側欄先往右伸一小段當作預備動作，再彈回去收起。 */
/* 側欄採 flex + 負邊距滑出，而不是壓縮格線欄寬。
   壓縮欄寬時必須同步把內距與邊框歸零，那兩個屬性沒有過場，
   會造成左邊界瞬間消失、內容突然往左跳。
   改用負邊距後，側欄整塊（含邊框內距）維持原樣平移出畫面。 */
.app{
  display:flex; align-items:stretch;
  overflow-x: clip;
}
.app > .sidebar{
  flex:0 0 290px; width:290px;
  margin-left:-290px;
  transition: margin-left .46s cubic-bezier(.6, -0.28, .735, .045);
}
.app.sidebar-open > .sidebar{
  margin-left:0;
  transition: margin-left .46s var(--ease);
}
.app > .main{ flex:1 1 auto; min-width:0; }

/* 跨越寬窄臨界點時暫時停用過場，避免看到一次多餘的滑動 */
.app.no-transition,
.app.no-transition .sidebar,
.app.no-transition .main{ transition: none !important; }

.main{ max-width:none; padding:26px 40px 140px; min-width:0; }
.main-inner{ max-width:1180px; margin:0 auto; }
.main-bar{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sidebar-toggle{ width:34px; height:34px; }
.sidebar-toggle:hover{ transform:scale(1.08); }

header.page-head{ margin-bottom:22px; }
header.page-head h1{ font-size:24px; }

/* ---------- 側欄 ---------- */
.sidebar{ padding:26px 20px 60px; overflow:hidden auto; min-width:0; }
.sidebar-backdrop{
  display:none; position:fixed; inset:0; z-index:550;
  background:rgba(43,37,38,.35); backdrop-filter:blur(1px);
}
.brand{ margin-bottom:2px; }
.brand-sub{ font-size:11.5px; color:var(--text-secondary); margin:0 0 22px 22px; letter-spacing:.04em; }
.side-block{ margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--border); }
.side-block:last-child{ border-bottom:none; }
.side-title{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-secondary); margin:0 0 14px; }
.side-sub-label{ display:block; font-size:12px; color:var(--text-secondary); margin:14px 0 7px; }
.field.compact{ margin-bottom:12px; }
.field.compact label{ margin-bottom:5px; }
.field.compact input[type="text"], .field.compact input[type="number"]{
  width:100%; font-family:inherit; font-size:13px; color:var(--text); background:var(--card-bg);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 12px; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field.compact input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }

.side-actions{ display:flex; gap:8px; margin-bottom:14px; }
.side-actions .btn{ flex:1; }
.side-tools{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.side-tools .btn{ flex:1 1 calc(50% - 4px); }

.btn-compact{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:12.5px; padding:8px 14px;
}
.btn-compact svg{ flex-shrink:0; }
.danger-text{ color:#C9503F; }
.danger-text:hover{ background:rgba(201,80,63,.09); color:#C9503F; }

.side-meta{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0 0 14px; font-size:12.5px; }
.side-meta dt{ color:var(--text-secondary); }
.side-meta dd{ margin:0; overflow-wrap:anywhere; }
.conn-state{ font-weight:600; }
.conn-state-3{ color:#4A9B6E; }
.conn-state-4, .conn-state-5{ color:#C9503F; }
.model-path{ font-size:11.5px; color:var(--text-secondary); }

.error-log{
  width:100%; height:78px; resize:vertical; font-size:11px; line-height:1.5;
  color:var(--text-secondary); background:var(--surface-alt); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:9px 11px; outline:none;
}
.switch-row.compact{ padding:12px 0 0; border-top:1px solid var(--border); margin-top:12px; }
.locale-switch button{ font-size:12px; padding:6px 12px; }
.advanced-toggle{ width:100%; justify-content:flex-start; margin-top:16px; font-size:12.5px; padding:8px 12px; }
.advanced-inner{ padding-top:12px; }
.hint{ font-size:11.5px; color:var(--text-secondary); margin:7px 0 0; line-height:1.5; }

/* ---------- 通用列 ---------- */
.row-head{ display:flex; align-items:center; gap:7px; }
.row-spacer{ flex:1; }
.row-icon{ display:inline-flex; color:var(--accent-dark); flex-shrink:0; }
.count-tag{ font-size:11px; padding:3px 10px; flex-shrink:0; margin-right:2px; }
.count-tag:hover{ transform:none; }

.title-input{
  flex:1; min-width:80px; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--text);
  background:transparent; border:1px solid transparent; border-radius:7px; padding:6px 9px; outline:none;
  transition: border-color .15s ease, background .15s ease;
}
.title-input:hover:not(:disabled){ background:var(--surface-alt); }
.title-input:focus{ border-color:var(--accent); background:var(--card-bg); box-shadow:0 0 0 3px var(--accent-light); }
.title-input:disabled{ color:var(--text-secondary); cursor:not-allowed; }

.chevron-btn{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:24px; height:24px; padding:0; border:none; background:transparent;
  color:var(--accent-dark); cursor:pointer; border-radius:6px;
  transition: background .15s ease;
}
.chevron-btn:hover{ background:var(--surface-alt); }
.chevron-btn .chevron{ display:inline-flex; transition:transform .25s ease; }
.chevron-btn[aria-expanded="false"] .chevron{ transform:rotate(-90deg); }

.btn-icon-sm{ width:30px; height:30px; }
.btn-icon-sm:hover{ transform:scale(1.1); }
.btn-icon:disabled{ opacity:.32; cursor:not-allowed; }
.btn-icon:disabled:hover{ transform:none; border-color:var(--border); color:var(--text-secondary); }
.btn-icon.danger{ color:#C9503F; }
.btn-icon.danger:hover{ border-color:#C9503F; color:#C9503F; background:rgba(201,80,63,.08); }
.btn-icon.danger:disabled{ color:#C9503F; }
.lock-btn.is-on{ background:var(--accent-light); border-color:var(--accent); color:var(--accent-dark); }
.fav-btn.is-on{ color:var(--accent); border-color:var(--accent); }

.empty-hint{
  font-size:13px; color:var(--text-secondary); padding:26px; text-align:center;
  border:1px dashed var(--border); border-radius:var(--radius-md); background:var(--card-bg);
}
.empty-hint.small{ padding:14px; font-size:12px; margin:6px 0 0; text-align:left; }

/* ---------- 資料夾 ---------- */
.folder-list{ display:flex; flex-direction:column; gap:12px; min-height:20px; }
.folder{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:0 var(--card-shadow-offset) var(--card-shadow-blur) rgba(43,37,38,.10);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.folder.is-locked{ background:var(--surface-alt); }
.folder{ padding:6px; }
.folder-head{
  padding:11px 12px; background:var(--surface-alt); border-radius:10px;
  transition: background-color .3s ease;
}
.folder.is-locked .folder-head{ background:var(--accent-light); }
.folder-inner{ padding:10px 6px 2px; }

/* ---------- 快照 ---------- */
.snapshot-list{ display:flex; flex-direction:column; gap:8px; min-height:14px; }
.snapshot{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  transition: border-color .2s ease, background .2s ease, box-shadow .3s ease;
}
.snapshot.is-locked{ background:var(--surface-alt); }
.snapshot.is-inherited-lock{ border-style:dashed; }
.snapshot.is-highlight{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-light); }
.snapshot-head{ padding:9px 11px; flex-wrap:wrap; }
.snapshot-inner{ padding:0 11px 11px; }

/* ---------- 參數列 ---------- */
.entry-list{ display:flex; flex-direction:column; gap:6px; min-height:12px; }
.entry{
  display:flex; align-items:center; gap:9px; padding:7px 9px;
  background:var(--surface-alt); border:1px solid transparent; border-radius:var(--radius-sm);
  transition: border-color .15s ease, opacity .15s ease;
}
.entry.is-locked{ opacity:.72; }
.entry.is-missing{ border-color:#C9503F; background:rgba(201,80,63,.07); }
.entry-select-wrap{ flex:0 0 230px; }
.entry-select{
  width:100%; font-family:inherit; font-size:12.5px; color:var(--text);
  background:var(--card-bg); border:1px solid var(--border); border-radius:7px;
  padding:7px 28px 7px 10px; outline:none; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.entry-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.entry-select:disabled{ background-color:var(--card-bg); color:var(--text-secondary); cursor:not-allowed; opacity:.7; }
.entry-slider{ flex:1; display:flex; align-items:center; gap:12px; min-width:180px; }
.entry-slider input[type="range"]:disabled{ opacity:.45; cursor:not-allowed; }
.entry-slider .slider-number{ width:72px; padding:6px 4px; font-size:12px; }
.missing-flag{ display:inline-flex; color:#C9503F; flex-shrink:0; }

/* ---------- 最愛卡片 ---------- */
.fav-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
  gap:14px; min-height:40px; align-items:start;
}
.fav-card{ padding:16px; display:flex; flex-direction:column; gap:10px; }
.fav-card:hover{ transform:translateY(-4px); }
.fav-card.is-locked{ background:var(--surface-alt); }
.fav-card-head{ display:flex; align-items:center; gap:6px; }
.fav-card-title{
  flex:1; margin:0; font-size:14px; font-weight:700; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fav-remove.btn-icon{ color:var(--accent); border-color:var(--accent-light); }
.fav-remove.btn-icon:hover{ border-color:var(--accent); }
.fav-card-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.fav-card-tags .tag{ font-size:11px; padding:3px 9px; gap:4px; }
.fav-card-tags .tag:hover{ transform:none; }
.tag-warn{ background:rgba(201,80,63,.12); color:#C9503F; }
.fav-card-desc-label{ font-size:11.5px; color:var(--text-secondary); }
.fav-card-desc{
  width:100%; min-height:66px; resize:vertical; font-family:inherit; font-size:12.5px; line-height:1.55;
  color:var(--text); background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:9px 11px; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fav-card-desc:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.fav-card-actions{ display:flex; gap:8px; margin-top:2px; }
.fav-card-actions .btn{ flex:1; }

/* ---------- 拖曳中的視覺 ---------- */
.drag-ghost.folder, .drag-ghost.snapshot, .drag-ghost.fav-card{ background:var(--card-bg); }
.drag-ghost .collapsible{ display:none; }

@media (max-width: 980px){
  .app > .sidebar{
    position:fixed; top:0; left:0; bottom:0; width:290px; height:100vh; z-index:600;
    flex:none; margin-left:0;
    padding:26px 20px 60px; border-right:1px solid var(--border);
    transform:translateX(-100%);
    transition: transform .46s cubic-bezier(.6, -0.28, .735, .045);
  }
  .app.sidebar-open > .sidebar{
    transform:none; box-shadow:0 0 40px rgba(43,37,38,.22);
    transition: transform .46s var(--ease);
  }
  .app.sidebar-open .sidebar-backdrop{ display:block; }
  .main{ padding:22px 16px 90px; }
  .entry{ flex-wrap:wrap; }
  .entry-select-wrap{ flex:1 1 100%; }
  .fav-grid{ grid-template-columns:1fr; }
}

/* ---------- 覆寫元件庫中示範頁專用的預設 ----------
   .tab-panel 在元件庫中預設為次要文字色與較小字級（供示範文字使用），
   本工具的分頁內容是主要介面，需還原為一般文字色。                       */
.tab-panel{ color:var(--text); font-size:14px; }

/* 拖曳期間關閉卡片的 hover 位移，避免影響拖曳影像的定位基準 */
body.is-dragging .mini-card:hover,
body.is-dragging .fav-card:hover{ transform:none; }

/* ---------- 強制建立範圍設定視窗 ---------- */
.force-modal{ max-width:560px; }
.force-desc{ margin-bottom:14px; }
.force-toolbar{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.force-count{ margin-left:auto; font-size:12px; color:var(--text-secondary); }
.force-list{
  max-height:min(46vh, 380px); overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-alt); padding:6px; margin-bottom:18px;
  /* 拖曳連續勾選期間不要選取文字 */
  user-select:none; -webkit-user-select:none;
}
.force-item{
  display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:7px;
  cursor:pointer; font-size:12.5px;
  transition: background-color .15s ease;
}
.force-item:hover{ background:var(--card-bg); }
.force-item.is-on{ background:var(--accent-light); }
.force-item .choice-box{ flex-shrink:0; pointer-events:none; }
.force-item .choice-box.is-on{ background:var(--accent); border-color:var(--accent); }
.force-item .choice-box.is-on svg{ opacity:1; }
.force-item-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.force-item-id{ font-size:11px; color:var(--text-secondary); flex-shrink:0; }

/* 品牌副標 */
.brand-sub{ user-select:text; }

/* ---------- 側欄左側出血 ----------
   側欄滑出畫面時，若只有本體有底色，動畫過程中左緣會露出一條沒有底色的縫。
   用 ::before 往左延伸一大塊同色區域補滿，並繼承邊框色的過場。 */
.sidebar::before{
  content:""; position:absolute; top:0; bottom:0; right:100%;
  width:600px; background:var(--card-bg); pointer-events:none;
  transition: background-color .4s ease;
}

/* 強制建立清單：項目之間留一點間距 */
.force-list{ display:flex; flex-direction:column; gap:3px; }