/* public/style.css — HHMail 前端样式（无构建步骤，纯 CSS） */

/* 主题：暗色为默认（:root），亮色通过 <html data-theme="light"> 覆盖 */
:root {
  --bg: #0f1420;
  --bg-soft: #161d2e;
  --panel: #1c2438;
  --panel-2: #212b42;
  --border: #2b3754;
  --text: #e6ebf5;
  --text-dim: #9aa7c2;
  --text-strong: #ffffff;   /* 未读邮件强调色 */
  --accent: #4f8cff;
  --accent-2: #7aa8ff;
  --danger: #ff5d6c;
  --ok: #3ecf8e;
  --warn: #ffb020;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}

/* 亮色主题 */
:root[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --panel-2: #eef1f8;
  --border: #d8dfeb;
  --text: #1d2637;
  --text-dim: #61708a;
  --text-strong: #000000;
  --accent: #2f6fe0;
  --accent-2: #1f57bd;
  --danger: #d43a4c;
  --ok: #17996a;
  --warn: #b97700;
  --shadow: 0 10px 30px rgba(30, 50, 90, 0.14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

/* hidden 属性必须生效。
   浏览器把 [hidden] 实现为 UA 样式 [hidden]{display:none}，而作者样式里的
   #login-view / #app-view { display:flex } 会覆盖它（作者样式优先于 UA 样式），
   导致主界面在登录页下方可见、可滚动。这里用 !important 强制 [hidden] 胜出。 */
[hidden] { display: none !important; }

button {
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 12px;
  white-space: nowrap; /* 按钮文字保持单行；同时让最小宽度等于文字宽度，避免被 flex 压缩换行 */
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
button:hover { border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: var(--accent-2); }
button.danger { color: var(--danger); }
button.danger:hover { border-color: var(--danger); }
button.ghost { background: transparent; }
button.small { padding: 4px 8px; font-size: 12px; }
/* 顶栏图标按钮（菜单 / 主题切换） */
button.icon-btn { padding: 6px 10px; font-size: 15px; line-height: 1; }

input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  width: 100%;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 140px; }
label { display: block; font-size: 12px; color: var(--text-dim); margin: 12px 0 5px; }

a { color: var(--accent-2); }

/* ---------- 登录 ---------- */

#login-view {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 360px;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card .sub { color: var(--text-dim); font-size: 13px; margin-bottom: 12px; }
.login-card .err {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
  margin-top: 10px;
}
.login-card button { width: 100%; margin-top: 16px; padding: 10px; font-size: 14px; }
.login-card .hint { margin-top: 14px; color: var(--text-dim); font-size: 12px; }

/* ---------- 主界面 ---------- */

#app-view { display: flex; flex-direction: column; height: 100%; }

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { font-weight: 700; font-size: 16px; letter-spacing: 0.3px; }
.topbar .brand span { color: var(--accent); }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--text-dim); font-size: 13px; }

.layout { display: flex; flex: 1; min-height: 0; }

/* 侧栏 */
.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 12px;
}
.sidebar h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  margin: 14px 6px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar h3 button { padding: 1px 7px; font-size: 13px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  border: 1px solid transparent;
  margin-bottom: 2px;
}
.nav-item:hover { background: var(--panel); }
.nav-item.active { background: var(--panel-2); border-color: var(--border); }
.nav-item .addr { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .badge {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
}
.nav-item.inactive .addr { color: var(--text-dim); text-decoration: line-through; }
.nav-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.nav-item.inactive .dot { background: var(--text-dim); }

/* 账号行右侧的汉堡菜单按钮 */
.acct-menu-btn {
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px 7px;
  min-height: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
}
.acct-menu-btn:hover,
.acct-menu-btn:focus-visible {
  color: var(--text);
  background: var(--panel);
  border-color: var(--border);
}

/* 账号快捷操作浮层（挂到 body，fixed 定位） */
.acct-menu {
  position: fixed;
  z-index: 130;
  min-width: 148px;
  padding: 5px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acct-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text);
  font-size: 13px;
}
.acct-menu-item:hover { background: var(--panel-2); border-color: var(--border); }
.acct-menu-item.danger { color: var(--danger); }
.acct-menu-item.danger:hover { border-color: var(--danger); }

/* 邮件列表 */
.list-pane {
  width: 380px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 260px;
}
.list-toolbar {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.list-toolbar input { padding: 7px 10px; font-size: 13px; }
/* 搜索框容器：相对定位，让清空按钮能锚定在输入框右侧 */
.search-wrap { position: relative; flex: 1; min-width: 0; }
/* 有内容时给输入框右侧留出清空按钮的位置 */
.search-wrap input { padding-right: 30px; }
.search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-clear:hover { background: var(--text-dim); color: var(--bg); }
.mail-list { flex: 1; overflow-y: auto; }
.mail-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
}
.mail-row:hover { background: var(--panel); }
.mail-row.active { background: var(--panel-2); }
.mail-row .line1 { display: flex; align-items: center; gap: 6px; }
.mail-row .from {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* “所有账号邮件”聚合视图里标注该信属于哪个账号 */
.mail-row .acct-chip {
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}
.mail-row.unread .from, .mail-row.unread .subject { color: var(--text-strong); font-weight: 700; }
.mail-row .star { color: var(--text-dim); cursor: pointer; user-select: none; }
.mail-row .star.on { color: var(--warn); }
.mail-row .subject {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  margin-top: 2px;
}
.mail-row .snippet {
  color: var(--text-dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.mail-row .date { color: var(--text-dim); font-size: 11px; flex-shrink: 0; }
.mail-row .att { color: var(--text-dim); font-size: 12px; }

.list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
}

/* 阅读区 */
.read-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* 阅读区内容容器（head + body）。桌面用 flex 列填满阅读区；
   移动端媒体查询里会改为块级 + 整页滚动，让头部信息能滚走。 */
.read-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.read-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  flex-direction: column;
  gap: 8px;
}
.read-head { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.read-head .subject { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.read-meta { color: var(--text-dim); font-size: 12.5px; }
.read-meta b { color: var(--text); font-weight: 600; }
.read-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* read-body 用 flex 列布局，让 iframe 能填满剩余高度（否则 iframe 卡在 min-height、下方留白） */
.read-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 18px;
}
/* flex:1 1 auto：桌面填满阅读区；移动端 read-pane 为 auto 高度时退回 min-height，避免塌陷成 0 */
.read-body > iframe {
  flex: 1 1 auto;
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.read-body pre.plain {
  flex: 0 0 auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0;
}
.att-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.att-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--text);
  text-decoration: none;
}
.att-chip:hover { border-color: var(--accent); }
.att-chip .size { color: var(--text-dim); }
.att-chip.skipped { opacity: 0.6; cursor: not-allowed; }

.img-toggle { margin-top: 10px; color: var(--text-dim); font-size: 12px; }

/* ---------- 弹窗 ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 15, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  width: 620px;
  max-width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.modal.wide { width: 860px; }
/* head/foot 不许收缩：低屏时内容超高会把它们按比例压扁导致标题被裁；
   由 body 吸收全部剩余空间并滚动 */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.modal-body { padding: 16px 18px; overflow: auto; flex: 1; min-height: 0; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
/* 弹窗底部常把按钮包进一个 div，这里让它同样成为 flex 行并带间距，
   否则按钮会紧贴在一起（水平方向没有间距）。 */
.modal-foot > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-row { display: flex; gap: 10px; }
.form-row > * { flex: 1; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
table.grid th { color: var(--text-dim); font-weight: 500; font-size: 12px; }
table.grid td .actions { display: flex; gap: 6px; justify-content: flex-end; }

.muted { color: var(--text-dim); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- 提示 ---------- */

#toast-root {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}
.toast {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-width: 360px;
  animation: slide-in 0.2s ease-out;
}
.toast.error { border-left-color: var(--danger); }
.toast.ok { border-left-color: var(--ok); }
@keyframes slide-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-dim);
}

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 响应式 ---------- */

/* 桌面端：隐藏移动端专用控件 */
.back-btn { display: none; }
#btn-menu { display: none; }
#btn-sidebar-backdrop { display: none; }

/* 窄屏但仍是桌面/平板：仅收窄侧栏与列表 */
@media (max-width: 1000px) {
  .sidebar { width: 210px; }
  .list-pane { width: 320px; }
}

/* ---------------- 移动端（≤760px） ----------------
   三块面板改为「单屏切换」：
   - 列表屏（默认）
   - 侧栏抽屉（点 ☰ 打开，覆盖在列表上）
   - 阅读屏（点邮件进入，点「返回」回来）
   由 body 上的 nav-open / read-open 两个类驱动。 */
@media (max-width: 760px) {
  html, body { font-size: 15px; }

  .topbar { padding: 8px 10px; gap: 8px; }
  .topbar .brand { font-size: 15px; }
  .topbar .who { display: none; }          /* 空间紧张，隐藏当前用户文字 */
  .topbar button { padding: 6px 9px; }
  #btn-refresh { display: none; }           /* 移动端靠下拉/重进即可，省顶栏空间 */
  #btn-compose .compose-label { display: none; } /* 写信按钮只留 ✍️ 图标 */

  #btn-menu { display: inline-flex; }       /* 显示汉堡菜单 */

  .layout { position: relative; }

  /* 侧栏 → 抽屉：默认藏在左侧外，nav-open 时滑入 */
  .sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: min(82vw, 300px);
    z-index: 40;
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
    padding-top: 14px;
  }
  body.nav-open .sidebar { transform: none; }
  #btn-sidebar-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.nav-open #btn-sidebar-backdrop { opacity: 1; pointer-events: auto; }

  /* 列表屏：占满整块 */
  .list-pane { width: 100%; min-width: 0; border-right: none; }

  /* 阅读屏：默认隐藏，read-open 时盖住列表。
     整个 read-pane 作为滚动容器：头部（主题/发件人/时间/按钮）随页面滚走，
     正文随之获得完整高度，避免头部固定占位导致正文只剩一小块。 */
  .read-pane { display: none; }
  body.read-open .list-pane { display: none; }
  body.read-open .read-pane {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 容器改为块级：取消 flex 约束与正文内部滚动，改为整页滚动 */
  body.read-open .read-wrap { display: block; flex: none; min-height: 0; }
  body.read-open .read-body { display: block; flex: none; overflow: visible; }
  body.read-open .read-body > iframe { flex: none; min-height: 65vh; }

  /* 返回按钮：仅在阅读屏出现 */
  body.read-open .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: fixed;
    top: 8px;
    left: 10px;
    z-index: 45;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--panel-2);
    box-shadow: var(--shadow);
  }

  /* 阅读屏头部给返回按钮留出左侧空间 */
  .read-head { padding-top: 12px; padding-left: 14px; }

  .list-toolbar { padding: 8px; gap: 6px; }
  .mail-row { padding: 12px 12px; }         /* 加大点击热区 */
  .mail-row .line1 { flex-wrap: wrap; }

  /* 弹窗在小屏尽量占满 */
  .modal-backdrop { padding: 10px; align-items: flex-end; }
  .modal { width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; }
  .modal.wide { width: 100%; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot > div { flex-wrap: wrap; justify-content: flex-end; }

  .form-row { flex-direction: column; gap: 0; } /* 表单双列改单列 */

  #toast-root { left: 10px; right: 10px; bottom: 10px; }
  .toast { max-width: none; }
}

/* 触屏：放大可点元素，改善手感 */
@media (pointer: coarse) {
  button { min-height: 38px; }
  .nav-item { padding-top: 9px; padding-bottom: 9px; }
  /* 汉堡按钮平时压了 min-height 保持行高统一，触屏上单独放大点击区 */
  .acct-menu-btn { min-height: 34px; padding: 4px 12px; }
  .mail-row .star { padding: 6px; margin: -6px; }
}