/* 设计令牌全部取自 dsh web UI 的实测计算值(浅色/深色各量一遍),
   不另起一套视觉:额外加的页面和按钮要看起来就是 dsh 的一部分。
   dsh 的主题默认「跟随系统」,所以这里跟随 prefers-color-scheme;
   用户在 dsh 里显式选了与系统相反的主题时,外壳这一条窄带会不一致。 */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #0f1115;
  --muted: #81858c;
  --fill: #ebeef2;        /* 选中/主操作填充 */
  --fill-soft: #f5f6f7;   /* 控件药丸、输入框 */
  --border: rgba(0, 0, 0, 0.1);
  --ok: #12805c;
  --warn: #b25e09;
  --danger: #b42318;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151517;
    --surface: #2c2c2e;
    --text: #f9fafb;
    --muted: #adb2b8;
    --fill: #43454a;
    --fill-soft: #353638;
    --border: rgba(255, 255, 255, 0.12);
    --ok: #3ddc97;
    --warn: #f0a35e;
    --danger: #f5766b;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 安卓 WebView 触摸时会按 DOM 盒子刷一块方角蓝底,盖掉圆角也盖掉自定义按下态 */
  -webkit-tap-highlight-color: transparent;
}

html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 顶栏:连上之后它没有信息价值,收成一条窄带把高度还给 dsh 的界面 */
.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar.slim { padding: calc(env(safe-area-inset-top, 0px) + 5px) 12px 5px; }
.brand { flex: 1; font-size: 15px; font-weight: 500; }
.topbar.slim .brand { display: none; }
.status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
/* 主机名可能很长,让它省略而不是把「换主机」挤出屏幕 */
#status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot-off { background: var(--muted); }
.dot-connecting { background: var(--warn); }
.dot-on { background: var(--ok); }

.view {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
.hidden { display: none !important; }

h1 { font-size: 17px; font-weight: 500; margin-bottom: 8px; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.7; margin-bottom: 18px; }
code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  background: var(--fill-soft);
  padding: 1px 6px;
  border-radius: 6px;
}

label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 16px; /* 低于 16px 时移动浏览器会在聚焦时自动放大页面 */
  color: var(--text);
  background: var(--fill-soft);
  border: 1px solid transparent;
  border-radius: 12px;
  outline: none;
}
input:focus { border-color: var(--border); }
input::placeholder { color: var(--muted); }

/* dsh 的按钮语汇:主操作=浅填充块,次操作=描边,都是深色文字、400 字重 */
.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  background: var(--fill);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { opacity: 0.72; }
.btn:disabled { opacity: 0.45; }
.btn-block { display: block; width: 100%; margin-top: 10px; }
.btn-quiet { background: transparent; border-color: var(--border); }
.btn-slim {
  flex: none;
  background: transparent;
  border-color: var(--border);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 14px;
}

.error { color: var(--danger); font-size: 12px; margin: 0 0 12px; }

.host-list { list-style: none; margin-bottom: 8px; }
.host-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.host-pick {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  background: var(--fill-soft);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
}
.host-pick:active { opacity: 0.72; }
.host-name { font-size: 14px; }
.host-rename {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding: 9px 12px;
  font-size: 16px;
}
.btn-slim-quiet { background: transparent; }

.about {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}
.about-link { color: var(--muted); }
.host-meta {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webui {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--bg);
}

.empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  line-height: 1.7;
  padding: 48px 24px;
}

.topbar-hosts { flex: none; margin: 0; }
.local-card { background: var(--fill-soft); border-radius: 12px; padding: 12px 14px 14px; margin-bottom: 18px; }
.local-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.local-card .hint { margin: 6px 0 2px; }
.local-card .btn-block { margin-top: 8px; }
.local-card .error { margin: 8px 0 0; }


/* One fixed viewport owner. Only .view and the conversation's inner scroller move. */
html { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body {
  position:fixed; left:0; top:var(--pocket-viewport-top,0px); width:100%;
  height:var(--pocket-viewport-height,100dvh); min-height:0;
  overflow:hidden; overscroll-behavior:none;
  padding:0 env(safe-area-inset-right,0px) var(--pocket-bottom-inset,env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px);
}
.topbar, .topbar.slim {
  display:flex; flex:none; min-height:60px; gap:4px;
  padding:calc(env(safe-area-inset-top,0px) + 6px) 10px 6px;
  border-bottom:0; background:var(--bg);
}
.heading-stack { flex:1; min-width:0; padding:0 8px; }
.brand, .topbar.slim .brand {
  display:block; font-size:17px; font-weight:600; line-height:24px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.25px;
}
.status { font-size:11px; line-height:17px; gap:5px; }
.dot { width:5px; height:5px; }
.icon-button {
  flex:none; width:44px; height:44px; padding:10px; border:0; border-radius:50%;
  background:transparent; color:var(--text); display:grid; place-items:center;
  cursor:pointer; touch-action:manipulation;
}
.icon-button svg { width:23px; height:23px; }
.icon-button:active { background:var(--fill-soft); }
.icon-button:focus-visible { outline:2px solid var(--muted); outline-offset:-3px; }
.webui { display:block; flex:1 1 0; height:0; min-height:0; min-width:0; width:100%; overflow:hidden; }
.view { flex:1 1 0; min-height:0; overscroll-behavior:contain; padding:28px 24px; }
#view-pair .btn, #view-hosts .btn { min-height:46px; }
.host-pick { min-height:64px; padding:14px 16px; border-radius:18px; }
.host-name { font-size:16px; font-weight:500; }
h1 { font-size:24px; font-weight:600; letter-spacing:-.5px; margin-bottom:12px; }
.hint { font-size:14px; line-height:1.65; }
@media (prefers-color-scheme:dark) { :root { --bg:#161616; --surface:#242424; --fill:#303030; --fill-soft:#242424; } }

/* Chat-focused phone chrome. Connection details live in the options sheet. */
.topbar.slim { min-height:54px; padding-top:calc(env(safe-area-inset-top,0px) + 3px); padding-bottom:3px; }
.heading-stack { appearance:none; background:transparent; border:0; color:var(--text); text-align:left; font:inherit; cursor:pointer; }
.topbar.slim .status { display:none; }
.topbar.slim .brand { font-size:19px; font-weight:650; letter-spacing:-.5px; }
.topbar.slim .brand::after { content:'⌄'; font-size:16px; color:var(--muted); margin-left:7px; }
.pocket-sheet { position:absolute; inset:0; z-index:100; display:flex; align-items:flex-end; padding:12px; }
.sheet-backdrop { position:absolute; inset:0; border:0; background:#0007; padding:0; }
.sheet-panel { position:relative; width:100%; border-radius:28px; background:var(--bg); padding:10px 18px 18px; box-shadow:0 20px 60px #0003; animation:sheet-in .18s ease-out; }
.sheet-handle { width:34px; height:4px; border-radius:4px; background:var(--muted); opacity:.4; margin:0 auto 8px; }
.sheet-heading { display:flex; align-items:center; gap:10px; padding:0 0 10px 8px; }
#sheet-title { flex:1; font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sheet-action { width:100%; border:0; color:var(--text); background:transparent; padding:17px 10px; font-size:17px; display:flex; align-items:center; justify-content:space-between; text-align:left; border-top:1px solid var(--fill-soft); }
.sheet-action small { display:block; color:var(--muted); font-size:12px; margin-top:5px; }
.sheet-action:active { background:var(--fill-soft); border-radius:14px; }
@keyframes sheet-in { from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }
@media(prefers-reduced-motion:reduce){ .sheet-panel{animation:none} }
.sheet-panel { max-height:100%; overflow-y:auto; overscroll-behavior:contain; }
.balance-card { margin:0 0 14px; padding:16px; border-radius:20px; background:var(--fill-soft); }
.balance-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:15px; font-weight:600; }
.balance-heading small { display:block; margin-top:5px; color:var(--muted); font-size:11px; font-weight:400; }
#balance-refresh { min-width:44px; min-height:44px; padding:8px; border:0; background:transparent; color:var(--text); font:inherit; font-size:14px; touch-action:manipulation; }
#balance-refresh:disabled { opacity:.45; }
.balance-values { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 22px; margin-top:14px; font-size:14px; line-height:1.6; }
.balance-wallet { display:flex; align-items:baseline; gap:6px; }
.balance-wallet strong { font-size:27px; line-height:1.3; font-weight:600; letter-spacing:-.6px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.balance-wallet span { color:var(--muted); font-size:12px; }
.balance-note { margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.balance-note:empty { display:none; }

/* Quiet indigo chrome around the illustrated chat, with opaque reading panels. */
:root {
  color-scheme:dark;
  --bg:#11131f !important; --surface:#222637 !important;
  --text:#f1f2fa !important; --muted:#a5acc6 !important;
  --fill:#424960 !important; --fill-soft:#262b3f !important;
  --border:#43485e !important;
}
.topbar, .topbar.slim { background:#151929; }
.sheet-panel { background:#191d2d; border:1px solid #3c435c; }
.balance-card { background:#292e45; }


/* Recharge usage shares the desktop USD 10 baseline; CNY remains separate. */
.balance-usage { flex:0 0 100%; min-width:0; margin-top:4px; font-variant-numeric:tabular-nums; }
.balance-usage-label { display:flex; justify-content:space-between; gap:12px; color:var(--text); font-size:14px; line-height:1.5; margin-bottom:8px; }
.balance-usage-track { height:8px; overflow:hidden; border-radius:6px; background:#505974; }
.balance-usage-fill { display:block; height:100%; border-radius:inherit; background:#a4bdff; }
.balance-usage-caption { margin:8px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }

.wallpaper-control { display:flex; align-items:center; gap:10px; flex:none; }
#wallpaper-state { font-size:13px; color:var(--muted); }
.wallpaper-switch { box-sizing:border-box; display:block; width:46px; height:28px; padding:3px; border-radius:16px; background:#525a70; }
.wallpaper-switch::after { content:''; display:block; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; }
#sheet-wallpaper[aria-checked="true"] .wallpaper-switch { background:#35a67a; }
#sheet-wallpaper[aria-checked="true"] .wallpaper-switch::after { transform:translateX(18px); }
#sheet-wallpaper:focus-visible { outline:2px solid #a4bdff; outline-offset:-2px; }

/* The shell follows the resolved Harness theme, including the balance sheet. */
:root[data-pocket-theme="light"] {
  color-scheme:light;
  --bg:#f6f7fb !important; --surface:#ffffff !important;
  --text:#192136 !important; --muted:#606b82 !important;
  --fill:#d6deee !important; --fill-soft:#e5e9f2 !important;
  --border:#c7ccda !important;
}
:root[data-pocket-theme="light"] .topbar { background:#f6f7fb; }
:root[data-pocket-theme="light"] .sheet-panel { background:#ffffff; border-color:#c7ccda; }
:root[data-pocket-theme="light"] .balance-card { background:#eef1f8; }
:root[data-pocket-theme="light"] .balance-usage-track { background:#d5ddec; }
:root[data-pocket-theme="light"] .balance-usage-fill { background:#4364a6; }