:root{
  --bg:#2b2f36; --panel:#363b43; --panel2:#3e444d; --line:#4a515b;
  --ink:#e9edf2; --muted:#9aa4b0;
  /* コーポレートカラー：小松ウォールアイティ公式サイト(wall-it.com)の基調グリーン。
     色を変えたい時はここ1か所を直す。--on-accent はグリーンの上に置く文字色（暗緑）。 */
  --accent:#00c850; --accent2:#00a94e; --on-accent:#06351a;
  --danger:#e5564b; --ok:#37b26b; --stage:#1f2227; --paper:#ffffff;
  --tool-active:#00c850;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"Yu Gothic UI","Segoe UI","Meiryo",system-ui,sans-serif;
  background:var(--stage); color:var(--ink); overflow:hidden;
  display:flex; flex-direction:column; user-select:none;
}
button{font-family:inherit}

/* ---------- toolbar ---------- */
#toolbar{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:6px 10px; min-height:48px;
  /* if the window is narrow and tools wrap to many rows, scroll the toolbar
     instead of pushing the PDF off-screen (keeps the view area usable) */
  max-height:42vh; overflow-y:auto; flex-shrink:0;
}
.brand{display:flex; align-items:center; gap:8px; margin-right:8px}
.brand-chip{display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; background:#fff; border-radius:8px; padding:4px; flex:none}
.brand-chip img{width:100%; height:100%; object-fit:contain; display:block}
.brand-txt{font-weight:800; letter-spacing:.5px; font-size:18px; color:var(--ink)}
.brand-txt span{color:var(--accent)}
.tgroup{display:flex; align-items:center; gap:4px; padding:3px 8px;
  border-left:1px solid var(--line); min-height:32px; flex-wrap:wrap}
.tgroup:first-of-type{border-left:none}
/* カテゴリ見出し（ジャンル分け）：各グループ先頭の小さなラベル（省スペースのインライン・ピル） */
.tglabel{align-self:center; margin:0 3px 0 0; padding:2px 7px; font-size:10px; line-height:1.4;
  letter-spacing:.3px; color:var(--muted); background:rgba(255,255,255,.06); border-radius:6px;
  white-space:nowrap; pointer-events:none; user-select:none}
/* ---------- tabstrip (toolbar tab row + panes) ---------- */
#tabstrip{display:flex; gap:4px; align-items:center; padding:2px 4px; max-width:100%; overflow-x:auto; flex-basis:100%; order:5}
#tabstrip .tab{background:var(--panel2); color:var(--muted); border:1px solid var(--line); border-radius:8px 8px 0 0;
  padding:6px 12px; font-size:13px; cursor:pointer; white-space:nowrap}
#tabstrip .tab:hover{background:#48505b; color:var(--ink)}
#tabstrip .tab.active{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700}
.tabpanes{flex-basis:100%; order:6}
.tabpane{display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:4px 2px}
.btn-pair{display:inline-flex; align-items:center; gap:4px}   /* 指示ピン＋指示一覧など、常に横並びにしたいボタンの組 */
#ctxbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; order:7; flex-basis:100%; padding:4px 2px; border-top:1px dashed var(--line)}
.tbtn{
  background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:7px; padding:6px 10px; font-size:13px; cursor:pointer; line-height:1;
  white-space:nowrap; transition:background .12s,border-color .12s;
}
.tbtn:hover{background:#48505b}
.tbtn:active{transform:translateY(1px)}
.tbtn.icon{min-width:32px; text-align:center; font-size:15px; padding:6px 8px}
.tbtn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700}
.tbtn.primary:hover{background:var(--accent2); border-color:var(--accent2)}
.tbtn.big{padding:10px 18px; font-size:15px}
.tbtn.tool.active{background:var(--tool-active); border-color:var(--tool-active); color:var(--on-accent); font-weight:700}
/* selected choice chips in dialogs (きれいに 仕上がり/対象 など) — show the picked one clearly */
.tbtn.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700}
.tbtn.soon{opacity:.45}            /* 準備中：押せるが薄く表示して未実装と分かるように */
.tbtn.soon:hover{opacity:.7; background:var(--panel2)}
.tbtn.danger{border-color:#7a3b3b}                                  /* 取り返しのつかない操作（墨消し実行など） */
.tbtn.danger:hover{background:var(--danger); border-color:var(--danger); color:#fff}

/* ---------- iPad・ブラウザ版（hosted） ---------- */
/* ローカルサーバー(serve.ps1)が要る機能は正直に隠す（Outlook/変換/OCR/CAD/きれいに/線マーカー/AI）。
   見えて押せて失敗するより、最初から無い方が親切。Windows版では全部表示される。 */
html.hosted .win-only{display:none !important}
/* タッチ端末：ボタン・タブを指で押せる大きさに。タブ列は横スクロール可（折り返しでの縦積み崩れ防止） */
@media (pointer:coarse){
  .tbtn{padding:10px 13px; font-size:14px}
  .tbtn.icon{min-width:42px; padding:10px 11px; font-size:16px}
  #tabstrip .tab{padding:10px 14px; font-size:14px}
  #edit-bar .edit-btn{padding:8px 12px; font-size:15px}
  input[type="range"]{min-height:28px}
}
/* ホーム画面から起動（standalone）：iPadのノッチ/ステータスバーにツールバーが隠れないように */
@media (display-mode: standalone){
  #toolbar{padding-top:calc(6px + env(safe-area-inset-top))}
  body{padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right)}
}
.zoom{font-size:13px; color:var(--muted); min-width:46px; text-align:center}

.props{gap:8px}
.swatches{display:flex; gap:4px; align-items:center}
.sw{width:18px; height:18px; border-radius:4px; border:1px solid var(--line); cursor:pointer; padding:0}
.sw[data-color="#ffffff"]{border-color:#8a8a8a}
.sw.on{outline:2px solid var(--accent); outline-offset:1px}
.prop{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted)}
.prop input[type=color]{width:26px; height:24px; border:1px solid var(--line);
  border-radius:5px; background:none; padding:0; cursor:pointer}
.prop input[type=range]{width:96px}
#size-label{min-width:18px; text-align:right; color:var(--ink)}

/* ---------- main layout ---------- */
#main{flex:1; display:flex; min-height:0; transition:margin-right .15s ease}
body.dolly-open #main{ margin-right:360px; }
@media (max-width:900px){ body.dolly-open #main{ margin-right:0; } }  /* 狭い画面は重ねる */
#thumbs{
  width:188px; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.thumbs-head{display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted)}
.thumbs-actions{display:flex; gap:4px}
.mini{background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:6px; padding:4px 7px; font-size:11px; cursor:pointer}
.mini:hover{background:#48505b}
.mini.danger:hover{background:var(--danger); border-color:var(--danger)}
#thumb-list{flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:8px}
.thumb{
  position:relative; background:#222; border:2px solid transparent; border-radius:6px;
  cursor:pointer; overflow:hidden;
}
.thumb.current{border-color:var(--accent)}
.thumb.dragover{border-color:var(--ok)}
.thumb canvas{display:block; width:100%; height:auto}
.thumb-ph{width:100%; height:202px; background:repeating-linear-gradient(45deg,#262a30,#262a30 8px,#2c313800 8px,#2c3138 16px)}
.thumb .pno{position:absolute; left:4px; bottom:3px; font-size:11px; color:#fff;
  background:rgba(0,0,0,.55); padding:1px 6px; border-radius:9px}
.thumb .pick{position:absolute; right:5px; top:5px; width:16px; height:16px;
  border-radius:4px; background:rgba(0,0,0,.45); border:1px solid #fff; cursor:pointer}
.thumb .pick.on{background:var(--accent); border-color:var(--accent)}
.thumb .pick.on::after{content:"✓"; color:#fff; font-size:12px; position:absolute; left:2px; top:-1px}
.thumbs-hint{padding:8px 10px; font-size:11px; color:var(--muted); border-top:1px solid var(--line); line-height:1.5}

/* ---------- stage ---------- */
#stage{flex:1; position:relative; overflow:auto; background:var(--stage);
  display:flex; align-items:flex-start; justify-content:safe center; padding:24px; touch-action:none}
/* "safe center": center the page when it fits, but left-align (so the left/hidden side stays
   reachable by scrolling/掴む) once it's zoomed bigger than the view. touch-action:none lets us
   own wheel-zoom & two-finger pinch instead of the browser. */
#page-wrap{position:relative; box-shadow:0 6px 28px rgba(0,0,0,.5); background:var(--paper); display:none}
#page-canvas{display:block}
#overlay-canvas{position:absolute; left:0; top:0; touch-action:none}
#text-editor{
  position:absolute; min-width:30px; outline:2px solid var(--accent);
  background:rgba(255,255,255,.0); color:#000; padding:0; margin:0; line-height:1.15;
  white-space:pre-wrap; overflow:hidden; z-index:5;
}

#empty-state{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.empty-card{text-align:center; color:var(--muted)}
.empty-logo{font-size:46px; font-weight:800; letter-spacing:1px; color:#cfd6df}
.empty-logo span{color:var(--accent)}
.empty-card p{margin:14px 0}
.empty-brand{font-size:13px; color:var(--muted); margin:6px 0 0; letter-spacing:.3px}
.empty-actions{display:flex; flex-direction:column; gap:8px; align-items:center; margin:14px 0 0}
.empty-drag{font-size:12px; color:var(--muted); margin:10px 0 0}
.empty-note{font-size:12px}

/* ---------- text layer (selectable text from pdf.js renderTextLayer) ---------- */
#text-layer.textLayer{ position:absolute; left:0; top:0; overflow:hidden; line-height:1; pointer-events:none; z-index:3; }
#text-layer.textLayer span{ position:absolute; white-space:pre; transform-origin:0 0; color:transparent; }
#text-layer.textLayer ::selection{ background:rgba(0,120,255,.35); }
/* body has user-select:none (stops UI text being selected); re-enable selection on the text
   layer in text-select mode, else the spans render but the browser refuses to select them. */
/* container drives pointer-events/user-select/cursor; spans inherit (cursor set dynamically in JS) */
#page-wrap.textselect #text-layer{ pointer-events:auto; cursor:text; -webkit-user-select:text; user-select:text; }
#page-wrap.textselect #overlay-canvas{ pointer-events:none; }

/* cursor per tool */
#overlay-canvas.tool-select{cursor:default}
#overlay-canvas.tool-pen,#overlay-canvas.tool-marker{cursor:crosshair}
#overlay-canvas.tool-text{cursor:text}
#overlay-canvas.tool-line,#overlay-canvas.tool-arrow,#overlay-canvas.tool-ruler,#overlay-canvas.tool-link,
#overlay-canvas.tool-rect,#overlay-canvas.tool-ellipse,
#overlay-canvas.tool-whiteout,#overlay-canvas.tool-image,#overlay-canvas.tool-redact{cursor:crosshair}
#overlay-canvas.tool-eraser{cursor:cell}
#overlay-canvas.tool-pan{ cursor:grab; }
#stage.panning{ cursor:grabbing; }
#stage.spacepan{ cursor:grab; }

/* 全画面イマーシブ：ツールバーを隠し、最上部にカーソルを当てると下りてくる */
body.immersive #toolbar{ position:fixed; top:0; left:0; right:0; z-index:100;
  transform:translateY(-100%); transition:transform .18s ease; box-shadow:0 6px 18px rgba(0,0,0,.5); }
body.immersive.toolbar-peek #toolbar{ transform:translateY(0); }
/* 最上部にうっすら緑のヒント線（ここにカーソルを当てると出る、の合図）。出ている間は消す */
body.immersive::before{ content:""; position:fixed; top:0; left:0; right:0; height:3px;
  background:var(--accent); opacity:.5; z-index:99; pointer-events:none; }
body.immersive.toolbar-peek::before{ opacity:0; }

/* サイドパネル（ページ一覧）の出し入れ：手動トグル(no-sidebar)＋全画面では自動で隠す(immersive) */
body.no-sidebar #thumbs,
body.immersive #thumbs{ display:none; }
#btn-sidebar.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700; }

/* 定型文 right-click menu */
.ctx{position:fixed; z-index:80; min-width:220px; max-width:340px; background:var(--panel);
  border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,.5);
  padding:5px; list-style:none; margin:0; font-size:13px}
.ctx li{padding:7px 10px; border-radius:6px; cursor:pointer; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ctx li:hover{background:var(--panel2)}
.ctx li.head{color:var(--muted); font-size:11px; cursor:default; padding:5px 10px 2px}
.ctx li.head:hover{background:none}
.ctx li.sep{height:1px; background:var(--line); margin:4px 2px; padding:0; pointer-events:none}

/* ---------- statusbar ---------- */
#statusbar{display:flex; align-items:center; gap:10px; background:var(--panel);
  border-top:1px solid var(--line); padding:5px 12px; font-size:12px; color:var(--muted)}
#statusbar .sp{flex:1}
#status-msg{color:var(--ok)}

/* ---------- modal & busy ---------- */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex;
  align-items:center; justify-content:center; z-index:50}
.modal-card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:22px 26px; max-width:560px; width:90%; box-shadow:0 18px 60px rgba(0,0,0,.5)}
.modal-card h2{margin:0 0 12px; font-size:18px}
.modal-card ul{margin:0 0 12px; padding-left:18px; line-height:1.9; font-size:14px}
.modal-card .muted{color:var(--muted); font-size:12px; line-height:1.6}
.modal-card button{margin-top:8px}

/* font selector + AI modal */
.fontsel{background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:6px; padding:4px 6px; font-size:12px; max-width:110px}
.modal-card textarea{width:100%; box-sizing:border-box; background:var(--panel2); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:8px; font-family:inherit; font-size:13px; resize:vertical}
#ai-instruction{min-height:54px; margin-top:6px}
#ai-output{min-height:150px; margin-top:10px}
.ai-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:8px 0; font-size:13px}
.ai-row .ai-lbl{color:var(--muted); width:42px}
.ai-row label{display:inline-flex; align-items:center; gap:4px; cursor:pointer}
.ai-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:10px}
#ai-modal .modal-card{max-width:620px}

/* 署名・電子印 modal */
.sign-card{max-width:600px}
.sign-tabs{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap}
.sign-tab{background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:6px 12px; font-size:13px; cursor:pointer}
.sign-tab.active{background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700}
.sign-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0; font-size:13px}
.sign-row .ai-lbl{color:var(--muted); min-width:56px}
.sign-row label{display:inline-flex; align-items:center; gap:4px; cursor:pointer}
.sign-input{background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:7px 9px; font-size:14px; max-width:220px}
.sign-pad{width:100%; height:auto; aspect-ratio:520/200; background:#fff; border:2px dashed var(--line);
  border-radius:10px; touch-action:none; cursor:crosshair; display:block}
.sign-ink,.seal-color{width:22px; height:22px; border-radius:50%; border:2px solid var(--line);
  cursor:pointer; padding:0; margin-top:0}
.sign-ink.on,.seal-color.on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
.sign-seal-wrap{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.sign-seal-form{flex:1 1 260px; min-width:240px}
.sign-seal-prev{flex:0 0 auto; background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px}
#seal-prev{display:block; width:160px; height:160px}
.sign-saved-list{display:flex; flex-wrap:wrap; gap:12px; max-height:46vh; overflow:auto}
.sign-saved-item{background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:8px; width:130px; text-align:center}
.sign-saved-item img{width:100%; height:78px; object-fit:contain; background:#fff; border-radius:6px}
.sign-saved-cap{font-size:11px; color:var(--muted); margin:4px 0}
.sign-saved-item button{width:100%; margin-top:4px; font-size:12px}

/* 記入セット */
.fillset-list{display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow:auto; margin:10px 0}
.fillset-item{display:flex; align-items:center; gap:8px; background:var(--panel2);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px}
.fillset-meta{flex:1; font-size:14px}
.fillset-item button{margin-top:0; font-size:12px}

/* 見比べ 濃さバー（画面下中央のフローティング） */
.compare-bar{position:fixed; left:50%; transform:translateX(-50%); bottom:54px; z-index:45;
  display:flex; align-items:center; gap:10px; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:24px; padding:8px 16px; box-shadow:0 8px 30px rgba(0,0,0,.45); font-size:13px}
.compare-bar input[type=range]{width:160px}
.compare-bar button{margin-top:0}

.busy{position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex;
  align-items:center; justify-content:center; gap:14px; z-index:60; color:#fff; font-size:15px}
.spinner{width:26px; height:26px; border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:#555c66; border-radius:7px; border:3px solid var(--stage)}
#thumb-list::-webkit-scrollbar-thumb{border-color:var(--panel)}

/* ---------- AI エージェント パネル ---------- */
#agent-panel{
  position:fixed; top:0; right:0; width:360px; max-width:92vw; height:100vh; z-index:49;
  background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(0,0,0,.4);
}
.agent-head{display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--line)}
.agent-title{font-weight:700; font-size:14px; color:var(--ink)}
.agent-log{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px}
.agent-msg{max-width:90%; padding:8px 11px; border-radius:12px; font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word}
.agent-msg.me{align-self:flex-end; background:var(--accent); color:var(--on-accent); border-bottom-right-radius:4px}
.agent-msg.bot{align-self:flex-start; background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:4px}
/* new-Dolly-message signal: a short blue ring pulse so a fresh instruction is noticed (LINE-like). */
@keyframes dollyPulse{0%,100%{box-shadow:0 0 0 0 rgba(61,126,255,0)}30%{box-shadow:0 0 0 3px rgba(61,126,255,.5)}}
.agent-msg.bot.dolly-new{animation:dollyPulse .7s ease-out 2; border-color:#3d7eff}
/* floating edit mini-bar next to a selected object (パワポ風) */
#edit-bar{position:absolute; z-index:13; display:flex; gap:4px; padding:4px;
  background:var(--panel,#20242b); border:1px solid var(--accent,#3d7eff); border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.3)}
#edit-bar .edit-btn{border:0; background:var(--panel2,#2b3038); color:var(--ink,#e8eaed);
  border-radius:6px; padding:4px 8px; font-size:13px; cursor:pointer; line-height:1.2}
#edit-bar .edit-btn:hover{background:var(--accent,#3d7eff); color:#fff}
.agent-act{align-self:flex-start; background:var(--panel2); color:var(--ink); border:1px solid var(--accent);
  border-radius:9px; padding:7px 11px; font-size:13px; cursor:pointer; text-align:left}
.agent-act:hover{background:#48505b}
.agent-actrow{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px;align-self:flex-start}
.agent-actbtn{background:var(--panel2);color:var(--ink);border:1px solid var(--accent);border-radius:9px;padding:5px 10px;font-size:12px;cursor:pointer}
.agent-actbtn:hover{background:#48505b}
.agent-sugg{align-self:flex-start;max-width:95%;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.agent-sugg-t{font-size:13px;color:var(--ink);font-weight:600}
.agent-actbtn.ghost{border-color:var(--line);color:var(--muted)}
.agent-actbtn.ghost:hover{background:var(--panel);color:var(--ink)}
.agent-input-row{display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--line)}
.agent-input-row textarea{flex:1; resize:none; background:var(--panel2); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:8px; font-family:inherit; font-size:13px}
.agent-note{margin:0; padding:0 12px 12px; font-size:11px; color:var(--muted); line-height:1.6}
#btn-photoswap{display:block; width:calc(100% - 24px); margin:0 12px 10px; text-align:center}

/* ---- 名簿ピッカー ---- */
.roster-list{max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:4px; margin:6px 0}
.roster-item{padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--panel2);
  color:var(--ink); cursor:pointer; font-size:14px}
.roster-item:hover{background:#48505b; border-color:var(--accent)}
.roster-empty{padding:12px; color:var(--muted); text-align:center}

/* ---- 宛先選択送信ピッカー ---- */
.send-list{max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:4px;margin-bottom:8px}
.send-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--ink)}
.send-item:hover{background:var(--panel2)}
.send-item input{width:16px;height:16px}
#send-msg{width:100%;box-sizing:border-box;min-height:70px;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px;font-family:inherit;font-size:13px;resize:vertical}

/* ---- 共有セクション (share.js) ---- */
.send-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.send-share-lbl{color:var(--muted);font-size:12px}
.channel-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--ink)}
.channel-item:hover{background:var(--panel2)}

/* ---- OCRヒントバナー (ocrhint) ---- */
.ocr-hint{ position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:6;
  display:flex; align-items:center; gap:10px; max-width:92%;
  background:var(--panel); color:var(--ink); border:1px solid var(--accent); border-left:5px solid var(--accent);
  border-radius:10px; padding:8px 12px; box-shadow:0 6px 20px rgba(0,0,0,.4); font-size:13px; }
.ocr-hint .ocr-hint-msg{ line-height:1.5; }
.ocr-hint button{ flex:none; }

/* ---- 範囲AI (rangeai) ---- */
#overlay-canvas.tool-airegion{cursor:crosshair}
#overlay-canvas.tool-linemark{cursor:crosshair}
.lm-chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 8px}
.lm-chip{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:5px 12px;font-size:13px;cursor:pointer}
.lm-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.lm-canvas-wrap{max-height:48vh;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel2);text-align:center;padding:6px}
#linemark-canvas{max-width:100%;cursor:pointer;background:#fff}
#linemark-panel .modal-card{max-width:600px}
#memory-panel .modal-card{max-width:680px}
.mm-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0}
.mm-col h3{margin:0 0 6px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:4px}
.mm-list{list-style:none;margin:0;padding:0;max-height:40vh;overflow:auto;font-size:12px}
.mm-list li{display:flex;justify-content:space-between;gap:8px;padding:4px 2px;border-bottom:1px dashed var(--line)}
.mm-main{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-sub{color:var(--muted);flex:none}
.mm-list li.mm-clickable{cursor:pointer}
.mm-list li.mm-clickable:hover{background:var(--panel2)}
.mm-clickable .mm-main{flex:1 1 auto}
.mm-open{flex:none;font-size:11px;padding:1px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--ink);cursor:pointer}
.mm-open:hover{border-color:var(--accent,#4a90d9)}
@media(max-width:560px){.mm-cols{grid-template-columns:1fr}}
.suggest-chip{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:300; display:flex; align-items:center; gap:10px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:10px 14px; box-shadow:0 6px 24px rgba(0,0,0,.4); max-width:92vw}
.suggest-chip .sg-msg{font-size:13px}
.rai-chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.rai-chip{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:5px 12px;font-size:13px;cursor:pointer}
.rai-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
#rangeai-instr{width:100%;box-sizing:border-box;min-height:64px;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px;font-family:inherit;font-size:13px;resize:vertical}

/* full-screen page grid: review every page large, zoom previews, pick pages to extract */
#grid-overlay{position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; flex-direction:column}
#grid-bar{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--panel); flex-wrap:wrap}
#grid-title{font-weight:600; font-size:15px; color:var(--ink)}
#grid-bar .grid-zoom{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted)}
#grid-bar .grid-zoom input{vertical-align:middle}
/* 大きく見る：カードは --card の実サイズ（幅）で並べ、コンテナ幅を超えない範囲で好きなだけ大きくできる。
   flex-wrap で折り返し、中央寄せ。カード高さは中身（＝ページ全体）に合わせて伸びる＝ページの上だけでなく
   スライド全体が見える。はみ出す分は上下スクロール（横スクロールは出さない）。
   ※ grid の repeat(auto-fill, min(--card,100%)) は「%はauto-fillで不可」でレイアウトが壊れ、
     カードが薄い帯に潰れてページの頭しか見えなくなる不具合があったため flex に変更。 */
#grid-pages{flex:1; overflow-y:auto; overflow-x:hidden; padding:18px; display:flex; flex-wrap:wrap;
  gap:18px; justify-content:center; align-content:flex-start; align-items:flex-start}
.gcard{width:var(--card,460px); max-width:100%; position:relative; cursor:pointer; background:var(--paper); border:3px solid transparent; border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.45); overflow:hidden; min-height:60px}
.gcard canvas{display:block; width:100%; height:auto}
.gcard .gph{width:100%; aspect-ratio:1/1.414; background:repeating-linear-gradient(45deg,#eee,#eee 10px,#e2e2e2 10px,#e2e2e2 20px)}
.gcard .gno{position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.66); color:#fff; font-size:12px; padding:1px 8px; border-radius:10px}
.gcard .gck{position:absolute; top:7px; right:7px; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.9); border:1.5px solid #aaa; color:transparent; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:bold}
.gcard:hover{box-shadow:0 4px 16px rgba(0,0,0,.6)}
.gcard.sel{border-color:var(--accent)}
.gcard.sel .gck{background:var(--accent); border-color:var(--accent); color:#fff}
.gcard.dragging{opacity:.4}
.gcard.gdragover{outline:3px dashed var(--accent); outline-offset:3px}