*{box-sizing:border-box}
:root{
  --bg:#fff; --ink:#161616; --muted:#666; --accent:#4c7ef3; --border:#e7e7e7; --surface:#fafafa;
  --topbar-h:56px; --vh:100vh; --left-w:66%;
}
html,body{height:100%}
body{margin:0;color:var(--ink);background:var(--bg);font:16px/1.62 system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,"Helvetica Neue",Arial}

/* 頂欄：品牌 / 搜索 / 分頁（grid-areas 便於響應式重排） */
.topbar{
  position:sticky;top:0;z-index:30;
  display:grid;gap:12px;align-items:center;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"brand search controls";
  padding:8px 12px;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(6px);
}
.brand{grid-area:brand;justify-self:start;font-weight:600;white-space:nowrap}
.search{grid-area:search;justify-self:center;display:flex;gap:8px;align-items:center;min-width:0;width:min(52vw,520px)}
.search input{flex:1;min-width:0;padding:6px 12px;border:1px solid var(--border);border-radius:999px;font:inherit}
.search button{border:1px solid var(--border);padding:6px 12px;border-radius:999px;background:#fff;cursor:pointer}
.search button:hover{border-color:var(--accent)}
.controls{grid-area:controls;justify-self:end;display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.controls button{border:1px solid var(--border);padding:4px 10px;border-radius:10px;background:#fff;cursor:pointer;line-height:1;min-width:38px}
.controls button:hover{border-color:var(--accent)}
.controls .page-label{white-space:nowrap;font-variant-numeric:tabular-nums}

/* 主：左|分隔條|右（--left-w 控制左寬） */
.grid{display:grid;grid-template-columns:minmax(280px,var(--left-w)) 8px minmax(320px,1fr);gap:14px;padding:12px}
.sticky{position:sticky;top:var(--topbar-h);height:calc(var(--vh) - var(--topbar-h));overflow:hidden}
.page-frame{height:100%;width:100%;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;background:#fff}

/* 分隔條 */
.divider{cursor:col-resize;border-radius:8px;background:linear-gradient(180deg,#eee,#ddd);box-shadow:inset 0 0 0 1px #e3e3e3}
.divider::after{content:"";display:block;width:2px;height:28px;margin:0 auto;border-radius:2px;background:#c9c9c9}

/* 舞台：讓圖與覆蓋層精確重疊 */
.page-stage{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.page-stage img{ max-height:100%; max-width:100%; height:auto; width:auto; object-fit:contain; display:block; pointer-events:none; z-index:1; }
.page-stage .text-layer, .page-stage .anchor-layer{ position:absolute; }
.page-stage .text-layer{ z-index:2; pointer-events:auto; }
.page-stage .anchor-layer{ z-index:3; pointer-events:none; }

/* 可選文字覆蓋層 */
.text-layer.selectable .text-span{
  color:transparent; opacity:.02; white-space:pre; user-select:text; -webkit-user-select:text;
  position:absolute; transform-origin:0 0; line-height:1;
}
.text-layer.selectable .text-span::selection{ background:rgba(76,126,243,.35); color:#000; opacity:1; }
.text-layer.selectable{ cursor:text; }

/* 選區高亮框 */
.anchor-layer .mark{ position:absolute; border:2px solid rgba(76,126,243,.85); border-radius:4px; background:rgba(76,126,243,.12); }

/* 右側 AI 對話 */
.chat{ display:flex; flex-direction:column; width:100%; height:100%; }
.chat-head{ padding:10px 12px; border-bottom:1px solid var(--border); font-weight:600; }
.chat-feed{ flex:1; overflow:auto; padding:8px 12px; display:flex; flex-direction:column; gap:10px; background:var(--surface); }
.msg{ border:1px solid var(--border); border-radius:12px; padding:8px 10px; background:#fff; max-width:100%; }
.msg.user{ align-self:flex-end; background:#f6faff; border-color:#d5e3ff; }
.msg.assistant{ align-self:flex-start; }
.msg .meta{ font-size:12px; color:var(--muted); margin-bottom:4px; display:flex; gap:6px; align-items:center; }
.msg .text{ white-space:pre-wrap; line-height:1.55; }
.msg.loading .text{ opacity:.6; font-style:italic; }

/* 輸入區 */
.chat-compose{ border-top:1px solid var(--border); padding:8px 10px; display:flex; flex-direction:column; gap:8px; background:#fff; }
.chat-compose textarea{ width:100%; resize:vertical; border:1px solid var(--border); border-radius:8px; padding:8px 10px; font:inherit; }
.chat-compose .row{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.chat-compose button{ border:1px solid var(--border); padding:6px 12px; border-radius:10px; background:#fff; cursor:pointer; }
.chat-compose button:hover{ border-color:var(--accent); }

/* 右鍵菜單 */
.ctx{ position:fixed; z-index:40; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:6px; display:flex; flex-direction:column; gap:4px; }
.ctx button{ text-align:left; padding:8px 10px; border:0; background:#fff; border-radius:8px; cursor:pointer; }
.ctx button:hover{ background:#f6f9ff; }

/* ---- 搜索結果樣式 ---- */
.msg.search .text { font-size: 15px; }
.sr-group { padding:8px 0; }
.sr-head { font-weight:600; margin-bottom:6px; }
.sr-list { margin:6px 0 0 1.2em; padding:0; }
.sr-list li { margin:4px 0; }
.sr-sep { border:0; border-top:1px dashed var(--border); margin:10px 0; }
.sr-footer { display:flex; justify-content:flex-end; margin-top:8px; }
.icon-btn { border:1px solid var(--border); background:#fff; padding:4px 10px; border-radius:10px; cursor:pointer; }
.icon-btn:hover { border-color: var(--accent); }

/* ---- AI 回覆快捷複製 ---- */
.msg .tools{ display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
.copy-btn{ border:1px solid var(--border); background:#fff; padding:4px 10px; border-radius:10px; cursor:pointer; }
.copy-btn:hover{ border-color: var(--accent); }

/* =========================
   移動端與縮放優化
   ========================= */

/* <= 960px：主內容單列；頂欄重排為兩行：第一行品牌+分頁；第二行整行搜索居中 */
@media (max-width: 960px){
  .grid{grid-template-columns:1fr; gap:10px}
  .divider{display:none}
  .sticky{position:static;height:auto}
  .topbar{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand controls"
      "search search";
    row-gap:8px;
  }
  .search{width:100%}
  .search input{width:100%}
  .controls{
    flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    gap:6px;
    padding-bottom:2px;
  }
  .controls::-webkit-scrollbar{height:6px}
  .chat{height:auto}
  .chat-feed{max-height:46vh}
  .chat-compose{position:sticky; bottom:0; background:#fff}
}

/* <= 640px：更緊湊的按鈕與字級、避免擠壓 */
@media (max-width: 640px){
  .brand{white-space:nowrap}
  .controls button{padding:4px 8px;border-radius:8px;min-width:34px}
  .controls .page-label{font-size:14px}
}

/* <= 400px：隱藏首/末頁，保留前後翻頁與當前標籤，進一步減少擠壓 */
@media (max-width: 400px){
  .controls #firstBtn,
  .controls #lastBtn{display:none}
}

/* 高縮放或窄視窗時，確保搜索與分頁不換行重疊 */
@media (max-width: 360px){
  .search{width:100%}
}