@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');

:root{
  --ink:#1c1a18; --sub:#5c5650; --paper:#faf8f5; --card:#fff;
  --line:#e7e2da; --accent:#5b3fd6; --accent-ink:#fff;
  --warn-bg:#fff4e5; --warn-ink:#7a4a06;
  --ok:#0f7a4e; --danger:#b8341f;
  --radius:10px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font:15px/1.7 "Noto Sans TC",-apple-system,sans-serif;
}
h1,h2,h3,h4{font-family:"Noto Serif TC",serif; line-height:1.35; margin:0 0 .5em}
a{color:var(--accent)}
button{font:inherit}

.sv-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; border-bottom:1px solid var(--line); background:var(--card);
  position:sticky; top:0; z-index:20;
}
.sv-bar-brand{font-family:"Noto Serif TC",serif; font-weight:700; font-size:18px; color:var(--ink); text-decoration:none}
.sv-bar-nav{display:flex; align-items:center; gap:18px; font-size:14px}
.sv-bar-nav a{color:var(--sub); text-decoration:none}
.sv-bar-nav a:hover{color:var(--accent)}
.sv-bar-user{color:var(--sub)}

.sv-bell{position:relative; background:none; border:none; cursor:pointer; line-height:1; padding:4px; display:inline-flex; color:#9a9388}
.sv-bell.has-unread{color:#c2661a}
.sv-bell-dot{
  position:absolute; top:-4px; right:-6px; background:var(--danger); color:#fff;
  font-size:10px; font-weight:700; border-radius:999px; padding:1px 5px; min-width:16px; text-align:center;
}
.sv-bell-panel{
  position:absolute; right:24px; top:56px; width:340px; max-height:420px; overflow:auto;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(0,0,0,.12); z-index:30;
}
.sv-bell-panel .item{padding:12px 16px; border-bottom:1px solid var(--line); display:block; text-decoration:none; color:var(--ink)}
.sv-bell-panel .item:hover{background:var(--paper)}
.sv-bell-panel .item .meta{color:var(--sub); font-size:12px; margin-top:3px}
.sv-bell-panel .empty{padding:24px; text-align:center; color:var(--sub); font-size:13px}

.sv-wrap{max-width:1000px; margin:0 auto; padding:32px 28px 80px}
.sv-wrap-narrow{max-width:720px}

.sv-banner{
  background:var(--accent); color:var(--accent-ink); border-radius:var(--radius);
  padding:22px 26px; margin:0 0 28px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.sv-banner h2{color:#fff; margin:0 0 4px; font-size:19px}
.sv-banner p{margin:0; opacity:.9; font-size:14px}
.sv-banner a.btn{background:#fff; color:var(--accent); border-radius:8px; padding:9px 16px; text-decoration:none; font-weight:700; white-space:nowrap}

.sv-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.sv-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; text-decoration:none; color:var(--ink); display:block;
}
.sv-card:hover{border-color:var(--accent)}
.sv-card h3{font-size:17px; margin:0 0 6px}
.sv-card .sub{color:var(--sub); font-size:13px}
.sv-tag{display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; background:var(--paper); border:1px solid var(--line); color:var(--sub); margin-top:10px}
.sv-tag.active{color:var(--ok); border-color:var(--ok)}
.sv-tag.closed{color:var(--sub)}

.sv-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.sv-list li{border-bottom:1px solid var(--line); position:relative}
.sv-list a{display:flex; justify-content:space-between; gap:16px; padding:16px 4px; text-decoration:none; color:var(--ink)}
.sv-list a:hover{color:var(--accent)}
.sv-list .title{font-weight:500}
.sv-list .date{color:var(--sub); font-size:13px; white-space:nowrap}
.sv-list .draft-badge{font-size:11px; color:var(--warn-ink); background:var(--warn-bg); padding:1px 7px; border-radius:999px; margin-left:8px}
.sv-list .comment-count{
  display:inline-flex; align-items:center; gap:3px; font-size:12px; margin-left:8px;
  white-space:nowrap; color:#9a9388; /* 單色灰:留言都已讀 */
}
.sv-list .comment-count.unread{color:var(--danger)} /* 單色紅:有還沒讀過的留言 */

.sv-list .preview{
  position:absolute; left:4px; top:100%; margin-top:-4px; z-index:10;
  width:min(440px, calc(100vw - 56px)); background:var(--card); border:1px solid var(--line);
  border-radius:8px; padding:14px 16px; box-shadow:0 12px 28px rgba(0,0,0,.14);
  font-size:13px; line-height:1.6; color:var(--sub);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .12s ease, transform .12s ease; pointer-events:none;
  max-height:280px; overflow:hidden;
}
.sv-list li:hover .preview{opacity:1; visibility:visible; transform:translateY(0)}
.sv-list .preview h1,.sv-list .preview h2,.sv-list .preview h3,
.sv-list .preview h4,.sv-list .preview h5{
  font-family:inherit; font-size:13px; font-weight:700; color:var(--ink); margin:10px 0 4px;
}
.sv-list .preview h1:first-child,.sv-list .preview h2:first-child,
.sv-list .preview h3:first-child,.sv-list .preview h4:first-child,
.sv-list .preview h5:first-child{margin-top:0}
.sv-list .preview p{margin:0 0 8px}
.sv-list .preview ul,.sv-list .preview ol{margin:0 0 8px; padding-left:1.2em}
.sv-list .preview blockquote{margin:0 0 8px; padding-left:10px; border-left:2px solid var(--line)}
.sv-list .preview .callout{background:var(--paper); border-left:3px solid var(--accent); padding:8px 10px; margin:0 0 8px; border-radius:6px}
.sv-list .preview .callout-title{font-weight:700; font-size:11px; margin:0 0 4px}
.sv-list .preview mark{background:#fde68a}
.sv-list .preview mark.green{background:#c9f0dd}
.sv-list .preview mark.red{background:#fbd4cc}
.sv-list .preview mark.blue{background:#cfe3fb}
.sv-list .preview mark.purple{background:#e3daf9}
.sv-list .preview .tx-red{color:var(--danger)}
@media (max-width:640px){
  .sv-list .preview{display:none} /* 手機上沒有 hover,乾脆不顯示,避免誤觸卡住 */
}

.sv-h1{font-size:26px; margin-bottom:4px}
.sv-crumb{font-size:13px; color:var(--sub); margin-bottom:18px}
.sv-crumb a{color:var(--sub)}

.sv-meeting-meta{color:var(--sub); font-size:13px; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--line)}

.sv-content{font-size:16px; line-height:1.9}
.sv-content h1{font-size:24px; margin-top:1.6em}
.sv-content h2{font-size:20px; margin-top:1.6em}
.sv-content h3{font-size:17px; margin-top:1.4em}
.sv-content p{margin:0 0 1.1em}
.sv-content ul,.sv-content ol{margin:0 0 1.1em; padding-left:1.4em}
.sv-content blockquote{margin:1.4em 0; padding:4px 20px; border-left:3px solid var(--accent); color:var(--sub)}
.sv-content table{width:100%; border-collapse:collapse; margin:1.4em 0; font-size:14px}
.sv-content th,.sv-content td{border:1px solid var(--line); padding:8px 10px; text-align:left}
.sv-content mark{background:#fde68a}
.sv-content mark.green{background:#c9f0dd}
.sv-content mark.red{background:#fbd4cc}
.sv-content mark.blue{background:#cfe3fb}
.sv-content mark.purple{background:#e3daf9}
.sv-content .tx-red{color:var(--danger)}
.sv-content img{max-width:100%; border-radius:6px}

/* 重點/待辦/決議/風險 —— 底色方塊,比 blockquote 更凸顯。
   AI 產出的逐字稿跟手動編輯都可以用,見 PROMPT-transcript.md。 */
/* 圖示一律用單色向量(CSS mask + currentColor),不用 emoji——
   顏色自動跟著各區塊的文字顏色走,AI 或手動編輯都不用自己打任何圖示字元,
   純文字標題(例如「重點」)搭配 class 就會自動長出對應的圖示。 */
:root{
  --icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21Z'/%3E%3C/svg%3E");
  --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h2v-2H3v2Zm0 4h2v-2H3v2Zm0-8h2V7H3v2Zm4 4h14v-2H7v2Zm0 4h14v-2H7v2ZM7 7v2h14V7H7Z'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z'/%3E%3C/svg%3E");
  --icon-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z'/%3E%3C/svg%3E");
  --icon-money: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4Z'/%3E%3C/svg%3E");
}
.sv-content .callout{border-radius:8px; padding:14px 18px; margin:1.6em 0; border-left:4px solid var(--line)}
.sv-content .callout > *:last-child{margin-bottom:0}
.sv-content .callout-title{display:flex; align-items:center; gap:7px; font-weight:700; font-size:13px; margin:0 0 8px}
.sv-content .callout-title::before{content:""; display:inline-block; flex:none; width:14px; height:14px; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center;}

.sv-content .callout.key{background:#f1edfb; border-color:var(--accent)}
.sv-content .callout.key .callout-title{color:var(--accent)}
.sv-content .callout.key .callout-title::before{-webkit-mask-image:var(--icon-star); mask-image:var(--icon-star)}

.sv-content .callout.todo{background:var(--warn-bg); border-color:#c2661a}
.sv-content .callout.todo .callout-title{color:#c2661a}
.sv-content .callout.todo .callout-title::before{-webkit-mask-image:var(--icon-list); mask-image:var(--icon-list)}
.sv-content .callout.todo ul{list-style:none; margin:0; padding-left:0}
.sv-content .callout.todo li{position:relative; padding-left:1.6em}
.sv-content .callout.todo li::before{
  content:""; position:absolute; left:0; top:.35em; width:11px; height:11px;
  border:1.5px solid currentColor; border-radius:2px; opacity:.7;
}

.sv-content .callout.decision{background:#e7f6ef; border-color:var(--ok)}
.sv-content .callout.decision .callout-title{color:var(--ok)}
.sv-content .callout.decision .callout-title::before{-webkit-mask-image:var(--icon-check); mask-image:var(--icon-check)}

.sv-content .callout.risk{background:#fde8e4; border-color:var(--danger)}
.sv-content .callout.risk .callout-title{color:var(--danger)}
.sv-content .callout.risk .callout-title::before{-webkit-mask-image:var(--icon-warn); mask-image:var(--icon-warn)}

/* 報價單——跟一般表格分開一套樣式,金額欄位要用 class="num" 標出來才會靠右對齊
   (不用欄位順序判斷,表格長怎樣都不會對錯欄)。詳細寫法見 PROMPT-transcript.md。
   標題列刻意不用實心深色底——大面積深色看起來厚重,改成跟卡片同色系的淺底線條分隔,
   風格輕一點但還是看得清楚。 */
.sv-content .quote{margin:1.8em 0; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.sv-content .quote-title{
  margin:0; padding:12px 18px; background:var(--paper); color:var(--accent);
  font-weight:700; font-size:13px; display:flex; align-items:center; gap:7px;
  border-bottom:1px solid var(--line);
}
.sv-content .quote-title::before{content:""; display:inline-block; flex:none; width:14px; height:14px; background-color:currentColor;
  -webkit-mask-image:var(--icon-money); mask-image:var(--icon-money);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center;}
.sv-content .quote-table{width:100%; border-collapse:collapse; margin:0; font-size:14px}
.sv-content .quote-table th,.sv-content .quote-table td{padding:10px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.sv-content .quote-table thead th{background:var(--paper); font-weight:700; font-size:12px; color:var(--sub)}
.sv-content .quote-table .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.sv-content .quote-table tfoot td{border-bottom:none; font-weight:600}
.sv-content .quote-table tr.quote-subtotal td,
.sv-content .quote-table tr.quote-tax td{color:var(--sub); font-weight:400}
.sv-content .quote-table tr.quote-total td{
  font-size:16px; font-weight:700; color:var(--accent); background:#f1edfb; padding-top:14px; padding-bottom:14px;
}
.sv-content .quote-note{margin:0; padding:12px 18px; background:var(--paper); font-size:12px; color:var(--sub); border-top:1px solid var(--line)}

.sv-comments{margin-top:48px; padding-top:28px; border-top:1px solid var(--line)}
.sv-comment{padding:14px 0; border-bottom:1px solid var(--line)}
.sv-comment .who{font-weight:700; font-size:13px}
.sv-comment .who .role{font-weight:400; color:var(--sub); margin-left:6px}
.sv-comment .when{color:var(--sub); font-size:12px; margin-left:8px}
.sv-comment .body{margin-top:6px; font-size:14px}
.sv-comment.internal{background:var(--warn-bg); border-radius:8px; padding:12px 14px; border-bottom:none; margin-bottom:10px}
.sv-comment.internal .who::after{content:"內部備註"; font-size:11px; color:var(--warn-ink); border:1px solid var(--warn-ink); border-radius:999px; padding:1px 7px; margin-left:8px}

.sv-form textarea, .sv-form input[type=text], .sv-form input[type=email], .sv-form select{
  width:100%; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff;
}
.sv-form label{display:block; font-size:13px; color:var(--sub); margin:14px 0 5px}
.sv-form .row{display:flex; gap:14px}
.sv-form .row > *{flex:1}
.sv-btn{
  background:var(--accent); color:#fff; border:none; border-radius:8px; padding:10px 18px;
  font-weight:700; cursor:pointer; margin-top:18px;
}
.sv-btn.secondary{background:none; color:var(--accent); border:1px solid var(--accent)}
.sv-btn.danger{background:var(--danger)}
.sv-check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sub); margin-top:10px}

.sv-flash{padding:12px 16px; border-radius:8px; margin-bottom:20px; font-size:14px}
.sv-flash.ok{background:#e7f6ef; color:var(--ok)}
.sv-flash.err{background:#fde8e4; color:var(--danger)}

.sv-login-box{max-width:380px; margin:14vh auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:32px}
.sv-login-box h1{font-size:20px}
.sv-dev-note{background:var(--warn-bg); color:var(--warn-ink); border-radius:8px; padding:14px 16px; font-size:13px; margin-top:16px; word-break:break-all}

.sv-admin-nav{display:flex; gap:16px; margin-bottom:24px; font-size:14px}
.sv-admin-nav a{color:var(--sub); text-decoration:none; padding-bottom:6px; border-bottom:2px solid transparent}
.sv-admin-nav a.on{color:var(--ink); border-color:var(--accent); font-weight:700}

.sv-table{width:100%; border-collapse:collapse; font-size:14px}
.sv-table th,.sv-table td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line)}
.sv-table th{color:var(--sub); font-weight:500; font-size:12px}

/* 注意:這裡故意不用 overflow:hidden 裁圓角——sticky 定位的元素如果被
   overflow:hidden(或 auto/scroll)的祖先包住,就會直接失效,變成跟著頁面一起捲走。
   改成工具列跟編輯框各自裁自己的圓角。 */
.sv-editor-wrap{border:1px solid var(--line); border-radius:8px}
.sv-editor-toolbar{
  display:flex; flex-wrap:wrap; gap:4px; padding:8px; background:var(--paper); border-bottom:1px solid var(--line);
  border-radius:8px 8px 0 0;
  position:sticky; top:57px; z-index:15; /* 57px = 頂欄高度,滾動時工具列黏在頂欄下面不跑掉 */
}
.sv-editor-toolbar button{
  border:1px solid var(--line); background:#fff; border-radius:6px; padding:6px 10px; cursor:pointer; font-size:13px;
}
.sv-editor-toolbar button:hover{border-color:var(--accent); color:var(--accent)}
.sv-editor-box{min-height:400px; padding:20px; outline:none; background:#fff; border-radius:0 0 8px 8px}

@media (max-width:640px){
  .sv-bar{padding:12px 16px}
  .sv-wrap{padding:20px 16px 60px}
  .sv-bell-panel{right:8px; width:calc(100vw - 16px)}
}

/* 會議頁左側「這個案件的所有會議」欄——桌機是常駐側欄,手機才收成可開關的抽屜 */
.sv-shell{display:flex; align-items:flex-start}

.sv-drawer-toggle{display:none} /* 桌機不需要開關按鈕,側欄本來就開著 */
.sv-drawer-overlay{display:none}

.sv-drawer{
  flex:0 0 260px; width:260px; align-self:stretch;
  background:var(--card); border-right:1px solid var(--line);
  display:flex; flex-direction:column;
}
.sv-drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 18px 14px; border-bottom:1px solid var(--line);
  font-family:"Noto Serif TC",serif; font-weight:700; font-size:15px; position:sticky; top:57px; background:var(--card);
}
.sv-drawer-close{display:none} /* 桌機不需要關閉按鈕 */
.sv-drawer-list{list-style:none; margin:0; padding:8px}
.sv-drawer-list li{margin:0}
.sv-drawer-list a{
  display:block; padding:11px 10px; border-radius:8px; text-decoration:none; color:var(--ink);
}
.sv-drawer-list a:hover{background:var(--paper)}
.sv-drawer-list a.current{background:var(--accent); color:#fff}
.sv-drawer-list a.current .date{color:rgba(255,255,255,.8)}
.sv-drawer-list a.current .comment-count{color:rgba(255,255,255,.85) !important}
.sv-drawer-list .title{display:block; font-size:14px; font-weight:500}
.sv-drawer-list .meta{display:flex; align-items:center; gap:8px; margin-top:3px}
.sv-drawer-list .date{font-size:12px; color:var(--sub)}
.sv-drawer-list .comment-count{margin-left:0}

.sv-shell .sv-wrap{flex:1; min-width:0}

body.sv-drawer-locked{overflow:hidden}

/* 手機:側欄收成滑出式抽屜,預設收起 */
@media (max-width:640px){
  .sv-shell{display:block}

  .sv-drawer-toggle{
    display:flex; position:fixed; left:12px; top:64px; z-index:25;
    align-items:center; gap:6px;
    background:var(--card); border:1px solid var(--line); border-radius:999px;
    padding:7px 12px; font-size:12px; color:var(--ink); cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
  }
  .sv-drawer-toggle:hover{border-color:var(--accent); color:var(--accent)}

  .sv-drawer-overlay{display:block; position:fixed; inset:0; background:rgba(28,26,24,.35); z-index:39}

  .sv-drawer{
    position:fixed; left:0; top:0; bottom:0; width:300px; max-width:85vw; z-index:40;
    border-right:1px solid var(--line);
    transform:translateX(-100%); transition:transform .2s ease;
    overflow-y:auto;
  }
  .sv-drawer.open{transform:translateX(0)}
  .sv-drawer-head{position:sticky; top:0}
  .sv-drawer-close{display:inline-block}

  .sv-wrap.has-drawer-toggle{padding-top:56px} /* 讓抽屜按鈕不要蓋住麵包屑 */
}

/* 後台:會議拖曳排序清單 */
.sv-btn-sm{margin:0; padding:5px 12px; font-size:12px; text-decoration:none; display:inline-block}
.sv-reorder-list{list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--line)}
.sv-reorder-list li{
  display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line);
  background:var(--card);
}
.sv-reorder-list li.dragging{opacity:.5; background:var(--paper)}
.sv-reorder-list .drag-handle{cursor:grab; color:var(--sub); touch-action:none; user-select:none; padding:4px; display:inline-flex; align-items:center}
.sv-reorder-list .drag-handle:active{cursor:grabbing}
.sv-reorder-list .info{flex:1; min-width:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.sv-reorder-list .title{font-weight:500}
.sv-reorder-list .date{color:var(--sub); font-size:13px}

/* 發布後異動記錄提示 + 差異內容 */
.sv-diff-note{
  background:var(--warn-bg); border:1px solid #f0d9ad; border-radius:8px;
  padding:12px 16px; margin:0 0 24px; font-size:13px;
}
.sv-diff-note summary{cursor:pointer; color:var(--warn-ink); font-weight:700; list-style:none}
.sv-diff-note summary::-webkit-details-marker{display:none}
.sv-diff-note summary::before{content:"▸ "}
.sv-diff-note[open] summary::before{content:"▾ "}
.sv-diff-body{margin-top:12px; font-size:14px; line-height:1.8}
.sv-diff-body p{margin:0 0 10px}
.sv-diff-body p.added{background:#e7f6ef; border-left:3px solid var(--ok); padding:6px 10px; margin-left:-10px}
.sv-diff-body p.removed{background:#fde8e4; border-left:3px solid var(--danger); text-decoration:line-through; opacity:.75; padding:6px 10px; margin-left:-10px}