/* MacControl — 深色主题，移动优先 */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  color-scheme: dark; /* 原生控件/滚动条/iOS 软键盘跟深色，不再浅色键盘配深色界面 */
  --bg: #16161e;
  --bg2: #1f2029;
  --bg3: #2a2b38;
  --fg: #c8cad4;
  --dim: #6b6e7f;
  --accent: #7ee787;
  --accent-bg: #2b5735;
  --danger: #f47067;
  --vvh: 100dvh;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  overscroll-behavior: none;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
.hidden { display: none !important; }
button {
  font: inherit;
  color: var(--fg);
  background: var(--bg3);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:active { filter: brightness(1.3); }
button.primary { background: var(--accent-bg); color: #d3f9d8; }
input, textarea {
  font: inherit;
  color: var(--fg);
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: 8px;
  outline: none;
}
input:focus, textarea:focus { border-color: var(--accent); }
/* 横向滚动区（标签栏 / 工具条 / 面包屑）不显示滚动条 */
#tabs, #toolbar, #files-crumbs { scrollbar-width: none; }
#tabs::-webkit-scrollbar, #toolbar::-webkit-scrollbar, #files-crumbs::-webkit-scrollbar { display: none; }

/* ---------- 登录 ---------- */
#login-view {
  height: var(--vvh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#login-form { width: 100%; max-width: 320px; text-align: center; }
.login-logo {
  font: 700 40px/1 ui-monospace, Menlo, monospace;
  color: var(--accent);
  margin-bottom: 8px;
}
#login-form h1 { font-size: 22px; margin-bottom: 4px; }
#login-hint { color: var(--dim); font-size: 13px; margin-bottom: 20px; }
#login-form input { width: 100%; padding: 12px 14px; margin-bottom: 12px; font-size: 16px; }
#login-form button { width: 100%; padding: 12px; font-size: 16px; }
.err { color: var(--danger); font-size: 13px; margin-top: 12px; min-height: 1.5em; }

/* ---------- 主界面 ---------- */
#app-view {
  height: var(--vvh);
  display: flex;
  flex-direction: column;
}
#topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  padding-top: max(6px, env(safe-area-inset-top));
  padding-left: max(8px, env(safe-area-inset-left));   /* 横屏刘海/圆角 */
  padding-right: max(8px, env(safe-area-inset-right));
  background: var(--bg2);
  flex: none;
}
#conn-dot {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dim);
  margin-left: 2px;
}
#conn-dot.ok { background: var(--accent); }
#conn-dot.bad { background: #e5a54b; }
#tabs {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--dim);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.tab.active { background: var(--bg3); color: var(--fg); }
.tab .tab-close {
  background: none;
  color: var(--dim);
  font-size: 14px;
  padding: 0 2px;
  border-radius: 4px;
}
.tab .tab-close:active { color: var(--danger); }
.tab .tab-idle { /* 闲置角标：满 1 小时无交互的会话。琥珀色与「连接中」同色系，扫一眼能看见但不抢过标题 */
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(229, 165, 75, .22);
  color: #e5a54b;
}
.icon-btn {
  flex: none;
  width: 34px; height: 34px;
  font-size: 17px;
  line-height: 1;
  background: none;
}
#btn-new-tab { font-size: 20px; color: var(--accent); }

#term-wrap { flex: 1; position: relative; min-height: 0; overflow: hidden; background: var(--bg); }
#terminal { position: absolute; inset: 0; padding: 4px env(safe-area-inset-right) 0 max(6px, env(safe-area-inset-left)); display: flex; flex-direction: column; }
#terminal > .xterm { flex: none; }
/* 软键盘挤压期间（term.js 置类）：终端不 fit、行数不变，底部（光标行）锚在键盘上沿，顶部几行被盖住 */
body.kb-open #terminal { justify-content: flex-end; }
.xterm-viewport { overscroll-behavior: contain; }
#conn-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22,22,30,.72);
  z-index: 5;
}
#conn-overlay-text {
  padding: 10px 20px;
  background: var(--bg3);
  border-radius: 10px;
  font-size: 14px;
}

/* ---------- 撰写栏 ---------- */
#compose-bar {
  flex: none;
  display: flex;
  align-items: flex-end; /* 输入框长高时，插入/发送贴底不跟着拉长 */
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg2);
}
/* 自动增高：JS 撑高，这里只封顶 5 行；超出转纵向滚动（可控），不存在横向滚动 */
#compose-input {
  flex: 1;
  padding: 9px 12px;
  font-size: 16px;
  line-height: 1.45;
  min-width: 0;
  touch-action: pan-y;
  resize: none;
  max-height: calc(1.45em * 5 + 20px);
  overflow-y: auto;
}
#compose-bar button { flex: none; padding: 0 14px; font-size: 14px; height: 41px; }

/* ---------- 按键工具条 ---------- */
#toolbar {
  flex: none;
  display: flex;
  gap: 5px;
  padding: 6px 8px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
  background: var(--bg2);
  overflow-x: auto;
}
#toolbar button {
  flex: none;
  min-width: 44px;
  height: 38px;
  padding: 0 10px;
  font-size: 14px;
  font-family: ui-monospace, Menlo, monospace;
}
#toolbar button.on { background: var(--accent-bg); color: var(--accent); }

/* ---------- 抽屉通用（文件 / 通知设置共用骨架，高宽差异见下方各自覆盖） ---------- */
.drawer-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 20;
}
.drawer {
  position: fixed;
  z-index: 21;
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  /* 手机：底部抽屉 */
  left: 0; right: 0; bottom: 0;
  border-radius: 16px 16px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.drawer header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  font-size: 16px;
}
/* 隐藏文件开关：默认（不显示 dotfile）置灰，开启后点亮 */
#files-hidden-toggle { margin-left: auto; color: var(--dim); }
#files-hidden-toggle.on { color: var(--accent); }
.drawer footer {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 10px 16px;
}
.drawer footer button { flex: 1; padding: 11px; font-size: 14px; }
#files-drawer { height: min(72vh, 560px); }
#notify-drawer { max-height: 86vh; }
#browser-drawer { height: min(80vh, 640px); }
@media (min-width: 700px) {
  :root { --bw-w: min(44vw, 900px); } /* 浏览器停靠面板宽度:与终端分屏,两边都够用 */
  /* 桌面/iPad：左侧面板 */
  .drawer {
    top: 0; bottom: 0; left: 0; right: auto;
    border-radius: 0 16px 16px 0;
  }
  #files-drawer { width: 360px; height: auto; }
  #notify-drawer { width: 380px; max-height: none; }
  /* PC 端:浏览器面板右侧停靠(不同于其他抽屉的左侧悬浮)——无遮罩、终端区被挤窄但保持可读可输入 */
  #browser-drawer {
    left: auto; right: 0;
    width: var(--bw-w);
    height: auto;
    border-radius: 16px 0 0 16px;
  }
  #browser-mask { display: none; }                       /* 无遮罩:终端继续交互,关闭走 ✕ */
  body.bw-docked #app-view { margin-right: var(--bw-w); } /* 挤压主区,终端由 fitSoon 重排 */
  #browser-shot-wrap { aspect-ratio: 16 / 9; max-height: 64vh; } /* 宽屏 Chrome 窗口接近 2:1,16/9 比手机档的 16/10 少留黑边 */
}

/* ---------- 粘贴/拖拽直传轻提示 ---------- */
#inbox-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 52px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  max-width: 82vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 浏览器观察面板 ---------- */
#browser-tabs {
  flex: none;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 12px 8px;
  -webkit-overflow-scrolling: touch;
}
.bw-tab {
  flex: none;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--dim);
  border: 1px solid transparent;
}
.bw-tab.active { color: var(--accent); border-color: var(--accent); }
#browser-shot-wrap {
  flex: none;
  position: relative;
  background: #000;
  aspect-ratio: 16 / 10;
}
#browser-shot { width: 100%; height: 100%; object-fit: contain; display: block; }
#browser-err {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--dim);
  background: rgba(0,0,0,.75);
}
#browser-events {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0; padding: 6px 16px;
  font: 12px/1.8 ui-monospace, Menlo, monospace;
}
#browser-events li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#browser-events li .t { color: var(--dim); margin-right: 8px; }
#browser-live { margin-left: auto; margin-right: 8px; color: var(--accent); font-size: 11px; }
#btn-browser { position: relative; }
#browser-dot {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

/* ---------- 文件抽屉 ---------- */
#files-crumbs {
  padding: 0 16px 8px;
  font-size: 13px;
  color: var(--dim);
  white-space: nowrap;
  overflow-x: auto;
}
#files-crumbs a { color: var(--accent); text-decoration: none; cursor: pointer; }
#files-crumbs .sep { margin: 0 3px; color: var(--dim); }
#files-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: 0 8px;
  -webkit-overflow-scrolling: touch;
}
#files-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
#files-list li:active { background: var(--bg3); }
#files-list li .f-icon { flex: none; }
#files-list li .f-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#files-list li .f-meta { flex: none; color: var(--dim); font-size: 12px; }
#files-list li.dotfile .f-name { color: var(--dim); }

/* ---------- 菜单 ---------- */
#menu-pop {
  position: fixed;
  top: 48px; right: 8px;
  z-index: 30;
  background: var(--bg3);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  min-width: 160px;
}
#menu-pop button { background: none; text-align: left; padding: 10px 14px; font-size: 14px; border-radius: 7px; }
#menu-pop button:active { background: var(--bg2); }
#menu-pop hr { border: none; border-top: 1px solid var(--bg2); margin: 4px 0; }

/* ---------- 文件行操作 / 上传进度 ---------- */
#files-list li .f-more {
  flex: none;
  width: 40px; height: 36px;
  margin: -6px -6px -6px 0; /* 视觉小、热区足 */
  background: none;
  color: var(--dim);
  font-size: 17px;
}
#files-list li .f-more:active { color: var(--fg); }
#files-progress { padding: 6px 16px 0; }
#files-progress-text {
  font-size: 12px;
  color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 4px;
}
#files-progress-track {
  height: 4px;
  border-radius: 2px;
  background: var(--bg3);
  overflow: hidden;
}
#files-progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .15s;
}

/* ---------- 文件条目 action sheet ---------- */
#fmenu-mask {
  position: fixed; inset: 0;
  z-index: 26;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#fmenu {
  width: 100%;
  max-width: 420px;
  background: var(--bg2);
  border-radius: 16px 16px 0 0;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#fmenu-title {
  text-align: center;
  font-size: 13px;
  color: var(--dim);
  padding: 6px 10px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#fmenu button { padding: 13px; font-size: 15px; }
#fmenu button.danger { color: var(--danger); }
#fmenu [data-f="cancel"] { background: none; color: var(--dim); }

/* ---------- 文件预览层 ---------- */
#preview {
  position: fixed; inset: 0;
  z-index: 27;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
#preview header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--bg2);
}
#preview-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#preview-actions { flex: none; display: flex; align-items: center; gap: 4px; }
#preview-save { padding: 7px 16px; font-size: 14px; }
#preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
#preview-body img, #preview-body video {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
}
#preview-body pre {
  flex: 1;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  font: 12.5px/1.55 ui-monospace, Menlo, monospace;
  white-space: pre;
  overflow: auto;
}
#preview-editor {
  flex: 1;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.55 ui-monospace, Menlo, monospace;
  resize: none;
  outline: none;
}
.preview-fallback {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  font-size: 14px;
}
.preview-fallback .pf-icon { font-size: 44px; }
.preview-fallback .pf-meta { color: var(--dim); font-size: 12px; }
.preview-fallback button { padding: 10px 26px; }
.preview-fallback audio { width: min(78vw, 320px); }

/* ---------- 通知横幅 ---------- */
#notify-banner {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(92vw, 420px);
  background: var(--bg3);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  cursor: pointer;
}
#notify-banner-title { font-size: 14px; font-weight: 600; }
#notify-banner-body {
  font-size: 12.5px;
  color: var(--dim);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 通知设置抽屉（骨架见「抽屉通用」） ---------- */
#notify-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px;
  -webkit-overflow-scrolling: touch;
}
.n-caption { font-size: 12.5px; color: var(--dim); margin-bottom: 14px; }
.n-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
}
.n-row small { color: var(--dim); font-size: 11.5px; }
.n-row > button { flex: none; padding: 8px 18px; font-size: 13px; }
.n-row > button.on { background: var(--accent-bg); color: var(--accent); }
.n-group { padding: 10px 0; }
.n-group label {
  display: block;
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 6px;
}
.n-group input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 8px;
}

/* ---------- 小对话框 ---------- */
#dlg-mask {
  position: fixed; inset: 0;
  z-index: 40;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#dlg {
  width: 100%;
  max-width: 320px;
  background: var(--bg2);
  border-radius: 14px;
  padding: 20px;
}
#dlg-text { font-size: 15px; margin-bottom: 14px; }
#dlg-input { width: 100%; padding: 10px 12px; font-size: 16px; margin-bottom: 14px; }
.dlg-btns { display: flex; gap: 10px; }
.dlg-btns button { flex: 1; padding: 10px; }