/* ========================================================================
   1.28.0 精緻化層「polish」（老闆：「精緻化、美觀系統介面，配色優化，特效升級」）
   原則：疊在 v3 墨青（styles.css）之上，只加不改——不動任何 class 的語意、不改文字色（對比 QA 全部沿用），
   只加「環境光、玻璃與高光、漸層數字、光掃按鈕、進場節奏、作用中指示燈、折疊」這類裝飾與動效層。
   全部用 token；深色模式自動跟上；prefers-reduced-motion 時 styles.css 的全域規則會把動畫關掉。
   ======================================================================== */
:root {
  --glow-primary: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent), 0 16px 36px -16px color-mix(in srgb, var(--primary) 55%, transparent);
  --sheen: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.34) 46%, rgba(255, 255, 255, 0.1) 54%, transparent 72%);
  --card-hi: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --bg-glow-a: rgba(10, 122, 105, 0.10);
  --bg-glow-b: rgba(217, 178, 106, 0.11);
  --bg-glow-c: rgba(47, 111, 214, 0.05);
  --ease-spring: cubic-bezier(.22, 1.1, .3, 1);
}
[data-theme='dark'] {
  --card-hi: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --bg-glow-a: rgba(47, 195, 166, 0.13);
  --bg-glow-b: rgba(224, 189, 119, 0.07);
  --bg-glow-c: rgba(143, 180, 255, 0.07);
}

/* ---------- 環境光：主內容區底色加三團極淡的光暈（翡翠左上、藍右上、黃銅右下），固定不隨捲動 ---------- */
.main {
  background:
    radial-gradient(900px 540px at 10% -10%, var(--bg-glow-a), transparent 62%),
    radial-gradient(640px 420px at 100% -6%, var(--bg-glow-c), transparent 60%),
    radial-gradient(760px 560px at 92% 112%, var(--bg-glow-b), transparent 60%),
    var(--bg);
  background-attachment: fixed, fixed, fixed, scroll;
}
.auth .pane { background: radial-gradient(760px 520px at 100% 0%, var(--bg-glow-a), transparent 60%), radial-gradient(620px 420px at 0% 100%, var(--bg-glow-b), transparent 60%), var(--bg); }

/* ---------- 字體細節：標題用比例標點（palt）更緊緻；數字一律 Inter ---------- */
h1, h2, h3, .display, .app-greet h2, .topbar h1 { font-feature-settings: 'palt' 1; }
.app-greet h2 { background: linear-gradient(92deg, var(--text) 0%, var(--text) 52%, var(--primary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .1em; }

/* ---------- 外殼：rail 作用中「指示燈」、品牌微光；topbar 翡翠→黃銅漸層髮絲線；手機 tabbar 頂端小橫條 ---------- */
.rail .brand img, .rail .brand svg { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 14px rgba(47, 195, 166, 0.22)); }
.rail a.nav.active::before { content: ''; position: absolute; left: -10px; top: 15px; bottom: 15px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--primary-bright), #1ea88e); box-shadow: 0 0 14px 2px rgba(47, 195, 166, 0.45); animation: lamp-in .36s var(--ease) both; }
@keyframes lamp-in { from { transform: scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.rail a.nav .icon { transition: background var(--dur) var(--ease), color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease); }
.rail a.nav:hover .icon { transform: translateY(-1px); }
.topbar { border-bottom-color: transparent; }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 55%, var(--border)) 0%, var(--border) 38%, var(--border) 62%, color-mix(in srgb, var(--brass) 60%, var(--border)) 100%); }
.tabs { border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent); }
@media (max-width: 899px) {
  .tabbar a.active::before { content: ''; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 0 0 3px 3px; background: var(--primary-grad); box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 45%, transparent); }
  .tabbar a.active .icon { background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--primary) 20%, var(--surface))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--primary) 60%, transparent); }
}

/* ---------- 卡片：頂緣高光、更柔的邊、hover 微升＋翡翠微光（只在有滑鼠的裝置） ---------- */
.card, .pg-card, .summary-bar, .kpi, .file-card, .doc-action, .pg-topic-card, .skel-card, .progress, .memo, .composer, .ask-composer, .ask-item { box-shadow: var(--card-hi), var(--shadow-card); }
.card, .kpi, .summary-bar { border-color: color-mix(in srgb, var(--border) 86%, transparent); transition: box-shadow var(--dur-slow) var(--ease), border-color var(--dur), transform var(--dur-slow) var(--ease); }
.summary-bar { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, transparent), color-mix(in srgb, var(--surface-2) 45%, var(--surface))); }
[data-theme='dark'] .card, [data-theme='dark'] .pg-card, [data-theme='dark'] .kpi { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff 6%) 0%, var(--surface) 42%); }
@media (hover: hover) {
  a.card:hover, .card.link:hover, .pg-topic-card:hover, .file-card:hover, .doc-action:hover { box-shadow: var(--card-hi), var(--glow-primary); transform: translateY(-2px); }
  a.kpi:hover { box-shadow: var(--card-hi), var(--glow-primary); transform: translateY(-3px); }
  a.kpi.accent:hover, a.kpi.primary:hover, a.kpi.red:hover, a.kpi.green:hover, a.kpi.amber:hover, a.kpi.blue:hover, a.kpi.teal:hover { box-shadow: inset 0 3px 0 currentColor, var(--glow-primary); }
}
.card-title h2 .icon:first-child, .card-title h3 .icon:first-child { background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--primary) 18%, var(--surface))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent); }
.card-title > a, .app-more-link { position: relative; }
.card-title > a::after, .app-more-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease); opacity: .7; }
.card-title > a:hover, .app-more-link:hover { text-decoration: none; }
.card-title > a:hover::after, .app-more-link:hover::after { transform: scaleX(1); }

/* ---------- KPI：數字漸層字、圖示方磚玻璃感、進場錯開 ---------- */
.kpi .v { background: linear-gradient(135deg, currentColor 0%, color-mix(in srgb, currentColor 68%, var(--text)) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi .ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(10, 27, 30, 0.06); transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur); }
[data-theme='dark'] .kpi .ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
@media (hover: hover) { a.kpi:hover .ic { transform: translateY(-2px) rotate(-6deg) scale(1.06); } }
.summary-bar .item .n { letter-spacing: -0.025em; }

/* ---------- 按鈕：主按鈕光掃（hover 一道斜光從左掃到右）、按下微縮、ink／lg 微升 ---------- */
.btn { transition: background var(--dur), border-color var(--dur), color var(--dur), box-shadow var(--dur), transform 160ms var(--ease), filter var(--dur); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn.primary { overflow: hidden; isolation: isolate; }
.btn.primary::before { content: ''; position: absolute; inset: -1px; background: var(--sheen); transform: translateX(-130%); transition: transform .7s var(--ease); pointer-events: none; z-index: 0; }
.btn.primary > * { position: relative; z-index: 1; }
@media (hover: hover) {
  .btn.primary:hover::before { transform: translateX(130%); }
  .btn.ink:hover, .btn.lg:hover, .fab:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
}
.btn.primary.busy::before { display: none; }
.btn:focus-visible, .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline-offset: 3px; }

/* ---------- 章印 chip：實底加一點上下內光，更像蓋上去的印 ---------- */
.chip.red:not(.soft), .chip.orange:not(.soft), .chip.amber:not(.soft), .chip.green:not(.soft), .chip.blue:not(.soft), .chip.purple:not(.soft), .chip.teal:not(.soft), .chip.lime:not(.soft), .chip.primary:not(.soft), .chip.ink:not(.soft), .chip.copper:not(.soft), .chip.brass:not(.soft) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.14); }
.chip.soft { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent); }

/* ---------- 輸入：hover 邊線漸亮、focus 光圈柔和放大 ---------- */
.input, .textarea, .select { transition: border-color var(--dur), box-shadow var(--dur-slow) var(--ease), background var(--dur); }
.input:focus, .textarea:focus, .select:focus, .composer:focus-within, .ask-composer:focus-within { box-shadow: 0 0 0 .5px var(--primary), 0 0 0 4px var(--ring), 0 10px 28px -16px color-mix(in srgb, var(--primary) 45%, transparent); }
.composer:focus-within, .ask-composer:focus-within { box-shadow: 0 0 0 .5px var(--primary), 0 0 0 4px var(--ring), var(--shadow); }

/* ---------- 清單列：hover 翡翠淡底＋箭頭前移 ---------- */
@media (hover: hover) {
  .list-item.link:hover, .case-row:hover, .app-act:hover, .app-row:hover { background: color-mix(in srgb, var(--primary-soft) 48%, var(--surface-2)); }
}
.list-item.link, .case-row, .app-act { transition: background var(--dur), box-shadow var(--dur); }

/* ---------- 進場節奏：首頁與一般頁的卡片、KPI、摘要條依序浮現（只動 opacity＋translate；輸入列與側欄不參與） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .page > .app-greet, .page > .summary-bar, .page > .callout, .page > .kpis > .kpi, .page > .card, .page > .grid2 > .card, .page > .app-pulse, .page > .page-head, .page > .pg-card, .page > .col > .summary-bar, .page > .col > .kpis > .kpi, .page > .col > .card { animation: rise-in .55s var(--ease) backwards; } /* 1.66.0 backwards：結束後不留 transform，卡片裡的 fixed 浮層（手機貼底選單）才不會被困住 */
  .page > :nth-child(1) { animation-delay: 0ms; } .page > :nth-child(2) { animation-delay: 45ms; } .page > :nth-child(3) { animation-delay: 90ms; } .page > :nth-child(4) { animation-delay: 135ms; } .page > :nth-child(5) { animation-delay: 180ms; } .page > :nth-child(6) { animation-delay: 225ms; } .page > :nth-child(7) { animation-delay: 270ms; } .page > :nth-child(n+8) { animation-delay: 300ms; }
  .page > .kpis > .kpi:nth-child(1), .page > .col > .kpis > .kpi:nth-child(1) { animation-delay: 120ms; } .page > .kpis > .kpi:nth-child(2), .page > .col > .kpis > .kpi:nth-child(2) { animation-delay: 160ms; } .page > .kpis > .kpi:nth-child(3), .page > .col > .kpis > .kpi:nth-child(3) { animation-delay: 200ms; } .page > .kpis > .kpi:nth-child(4), .page > .col > .kpis > .kpi:nth-child(4) { animation-delay: 240ms; } .page > .kpis > .kpi:nth-child(5), .page > .col > .kpis > .kpi:nth-child(5) { animation-delay: 280ms; } .page > .kpis > .kpi:nth-child(n+6), .page > .col > .kpis > .kpi:nth-child(n+6) { animation-delay: 320ms; }
  .page > .grid2 > .card:nth-child(2) { animation-delay: 360ms; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Modal：彈簧感進場；Toast 微光 ---------- */
@media (min-width: 640px) { .modal { animation: modal-pop 340ms var(--ease-spring); } }
@keyframes modal-pop { from { transform: scale(.955) translateY(10px); opacity: 0; } 70% { opacity: 1; } to { transform: none; opacity: 1; } }
.toast { box-shadow: var(--shadow-lg), inset 3px 0 0 var(--primary-bright), 0 0 0 1px rgba(255, 255, 255, 0.04); }
/* 1.45.0 分批上傳進度提示：數字等寬不跳動、圖示慢慢呼吸表示還在傳 */
.toast.is-progress .msg { font-variant-numeric: tabular-nums; }
.toast.is-progress svg { animation: toast-breathe 1.4s ease-in-out infinite; }
@keyframes toast-breathe { 0%, 100% { opacity: .55; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .toast.is-progress svg { animation: none; } }

/* ---------- 捲軸：細、hover 翡翠 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong)); }

/* ---------- 空狀態：光暈呼吸 ---------- */
@media (prefers-reduced-motion: no-preference) {
  .empty > .icon, .empty > .empty-art::before { animation: halo 3.6s ease-in-out infinite; }
}
@keyframes halo { 0%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 7%, transparent), 0 0 0 16px color-mix(in srgb, var(--primary) 3%, transparent), var(--shadow-sm); } 50% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--primary) 9%, transparent), 0 0 0 22px color-mix(in srgb, var(--primary) 3.5%, transparent), var(--shadow-sm); } }

/* ---------- 預設折疊（ui.js foldable；老闆：「某些畫面過長就要會預設折疊」） ---------- */
.fold { position: relative; }
.fold-toggle.btn { width: 100%; justify-content: center; margin-top: 6px; color: var(--text-2); font-weight: 600; border-radius: 10px; }
.fold-toggle.btn:hover { color: var(--primary); background: var(--primary-soft); }
.fold .fold-less { display: none; } .fold.is-open .fold-more { display: none; } .fold.is-open .fold-less { display: inline-flex; align-items: center; gap: 4px; }
.fold .fold-more { display: inline-flex; align-items: center; gap: 4px; }
.fold-rest:not([hidden]) { animation: rise-in .35s var(--ease) backwards; }
/* 放在 .list 裡時列與列之間照舊有髮絲線（折疊容器不是 .list 的直接子元素，補回） */
.list > .fold > * + *:not(.fold-toggle), .list > .fold > .fold-rest > * + *, .list > .fold > .fold-rest > *:first-child { border-top: 1px solid var(--border); }
.list > .fold > .fold-toggle { border-top: 1px dashed var(--border); margin-top: 0; border-radius: 0 0 10px 10px; height: 40px; }
/* 案件對話：較早的回合收成一列，在最近幾則上方 */
.case-fold-older { margin: 0 0 6px; }
.case-fold-older > .fold-toggle.btn { height: 38px; margin: 0 auto 14px; width: auto; min-width: 260px; max-width: 100%; border-radius: 999px; border: 1px dashed var(--border-2); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.case-fold-older > .fold-toggle.btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.case-fold-older > .fold-rest { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.case-fold-older.is-open > .fold-toggle.btn { border-style: solid; }