/* 瀏覽器外框（分頁列 + 工具列 + 書籤列）。高度要跟 window_state.rs 的
   TAB_STRIP_HEIGHT / TOOLBAR_HEIGHT / BOOKMARK_BAR_HEIGHT 一致。 */
:root {
  color-scheme: light dark;
  --strip-top: #e6e8ee;
  --strip-bottom: #d8dce3;
  --tab-hover: rgba(255, 255, 255, .45);
  --toolbar: #f8f8fa;
  --border: #c8cdd5;
  --field: #ffffff;
  --field-border: #d0d4db;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #b9bcc3;
  --hover: rgba(0, 0, 0, .06);
  --accent: #007aff;
  --separator: rgba(0, 0, 0, .16);
  --tab-strip-h: 42px;
  --tab-top: 7px;
  --toolbar-h: 46px;
  --bookmarks-h: 30px;
  --lights: 92px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --strip-top: #232326;
    --strip-bottom: #1b1b1e;
    --tab-hover: rgba(255, 255, 255, .06);
    --toolbar: #2d2d30;
    --border: #111113;
    --field: #1e1e21;
    --field-border: #3c3c41;
    --text: #f2f2f5;
    --muted: #a1a1a8;
    --faint: #5c5c63;
    --hover: rgba(255, 255, 255, .08);
    --accent: #0a84ff;
    --separator: rgba(255, 255, 255, .14);
  }
}
/* 無痕視窗：固定深紫灰，一眼看得出來 */
html.private {
  color-scheme: dark;
  --strip-top: #1d1b26;
  --strip-bottom: #17151f;
  --tab-hover: rgba(255, 255, 255, .06);
  --toolbar: #2c2938;
  --border: #0f0e15;
  --field: #1c1a26;
  --field-border: #403c52;
  --text: #f1effa;
  --muted: #a9a5bd;
  --faint: #5a566c;
  --hover: rgba(255, 255, 255, .08);
  --accent: #9b8cff;
  --separator: rgba(255, 255, 255, .14);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--toolbar); color: var(--text);
  font: 13px -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", sans-serif;
  -webkit-user-select: none; user-select: none; cursor: default; }
button { font: inherit; color: inherit; border: none; background: none; padding: 0; cursor: default; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
svg.dots { fill: currentColor; stroke: none; }

/* ---- 分頁列 ---- */
#tabstrip { height: var(--tab-strip-h); display: flex; align-items: flex-end; gap: 0;
  padding: var(--tab-top) 6px 0 var(--lights);
  background: linear-gradient(var(--strip-top), var(--strip-bottom));
  -webkit-app-region: drag; }
#tabs { flex: 1; min-width: 0; height: 100%; display: flex; align-items: stretch; }
.tab { position: relative; flex: 1 1 0; min-width: 44px; max-width: 280px; display: flex; align-items: center;
  gap: 8px; padding: 0 8px 0 14px; color: var(--muted); border-radius: 10px 10px 0 0;
  -webkit-app-region: no-drag; transition: background-color .12s; }
.tab:hover { background: var(--tab-hover); }
/* 分頁之間的短分隔線；作用中分頁兩側、滑過時不畫 */
.tab::after { content: ""; position: absolute; right: 0; top: 9px; bottom: 9px; width: 1px; background: var(--separator); }
.tab.active::after, .tab:hover::after, .tab:has(+ .tab.active)::after, .tab:has(+ .tab:hover)::after,
.tab:last-child::after { display: none; }
.tab.active { background: var(--toolbar); color: var(--text); z-index: 1;
  box-shadow: 0 -1px 0 rgba(0,0,0,.04), 0 0 6px rgba(0,0,0,.08); }
/* 作用中分頁下緣往外翻的圓角，跟工具列接在一起 */
.tab.active::before { content: ""; position: absolute; bottom: 0; left: -10px; width: calc(100% + 20px); height: 10px;
  background:
    radial-gradient(circle at 0 0, transparent 10px, var(--toolbar) 10.5px) left bottom / 10px 10px no-repeat,
    radial-gradient(circle at 100% 0, transparent 10px, var(--toolbar) 10.5px) right bottom / 10px 10px no-repeat;
  pointer-events: none; }
.tab .icon { width: 16px; height: 16px; flex: none; display: grid; place-items: center; }
.tab .icon img { width: 16px; height: 16px; object-fit: contain; }
.tab .spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--faint);
  border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tab .title { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.tab .close { width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center; color: var(--muted); opacity: .75; }
.tab .close svg { width: 11px; height: 11px; stroke-width: 2; }
.tab .close:hover { background: var(--hover); opacity: 1; color: var(--text); }
.tab:not(.active):not(:hover) .close { opacity: .45; }
/* 很窄的時候只留圖示 */
.tab.narrow { padding: 0; justify-content: center; }
.tab.narrow .title, .tab.narrow .close { display: none; }
.tab.narrow.active .close { display: grid; }
.tab.narrow.active .icon { display: none; }

#newtab { margin: 0 2px 4px 6px; width: 30px; height: 28px; -webkit-app-region: no-drag; }
#private-badge { margin: 0 4px 9px 6px; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 600;
  color: var(--text); background: rgba(155, 140, 255, .25); white-space: nowrap; -webkit-app-region: no-drag; }

/* ---- 工具列 ---- */
#toolbar { height: var(--toolbar-h); display: flex; align-items: center; gap: 4px; padding: 0 10px;
  background: var(--toolbar); position: relative; z-index: 2; }
.icon-btn { height: 30px; min-width: 32px; padding: 0 7px; border-radius: 8px; display: inline-flex; align-items: center;
  justify-content: center; gap: 4px; color: var(--muted); transition: background-color .12s; }
.icon-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.icon-btn:active:not(:disabled) { background: var(--separator); }
.icon-btn:disabled { color: var(--faint); }
#reload .i-stop { display: none; }
#reload.loading .i-stop { display: block; }
#reload.loading .i-reload { display: none; }
#home { margin-right: 6px; }

#omnibox { flex: 1; min-width: 120px; height: 34px; display: flex; align-items: center; gap: 2px;
  padding: 0 10px 0 4px; border-radius: 10px; background: var(--field); border: 1px solid var(--field-border);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.03); transition: border-color .12s, box-shadow .12s; }
#omnibox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
#security { width: 28px; height: 26px; border-radius: 7px; font-size: 14px; flex: none; }
#security:hover { background: var(--hover); }
#address { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; color: var(--text);
  font: 15px -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif; -webkit-user-select: text; user-select: text; }
#address::placeholder { color: var(--muted); }
#exit { margin-left: 6px; }
#exit.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
#exit.on:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
#exit-text { font-size: 12px; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#exit-text:empty { display: none; }
#star { margin-left: 0; }
#star.on { color: var(--accent); }
#star.on svg { fill: currentColor; }
#download-text { font-size: 12px; font-weight: 600; color: var(--accent); }
#download-text:empty { display: none; }
#download.active { color: var(--accent); }

/* ---- 書籤列 ---- */
#bookmarks { height: var(--bookmarks-h); display: flex; align-items: center; gap: 2px; padding: 0 10px 2px;
  background: var(--toolbar); border-top: 1px solid color-mix(in srgb, var(--border) 35%, transparent); }
#bookmarks[hidden] { display: none; }
#bookmark-items { flex: 1; min-width: 0; display: flex; gap: 2px; overflow: hidden; }
#bookmark-items button, #all-bookmarks { height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px;
  color: var(--text); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; flex: none; }
#bookmark-items button:hover, #all-bookmarks:hover { background: var(--hover); }
#all-bookmarks { color: var(--muted); }

/* 外框最下面一條細線，跟網頁內容分開 */
body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border); opacity: .6; z-index: 3; }

/* 開發、測試用的視窗（帶 --remote-debugging-port 啟動）：頂端一條紅色警示、整個外框一圈紅框，
   免得被當成平常用的 App 去操作 */
#test-banner { position: fixed; z-index: 99; left: 50%; top: 0; transform: translateX(-50%); padding: 2px 14px 3px;
  background: #e5342a; color: #fff; font: 600 12px/1.4 -apple-system, "PingFang TC", sans-serif; border-radius: 0 0 8px 8px;
  pointer-events: none; white-space: nowrap; }
html.test-instance body { box-shadow: inset 0 0 0 3px #e5342a; }