/* 随手记：便签风浅色主题，手机优先 */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #faf7f2;
  --card: #ffffff;
  --ink: #2b2620;
  --ink2: #8a8175;
  --line: #ece5da;
  --accent: #e8710a;
  --accent-soft: #fdeeda;
  --red: #c0392b;
  --green: #1e8e5a;
}
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
  font-size: 16px; line-height: 1.6;
}
#app { max-width: 640px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

/* ---- 顶栏 ---- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(250, 247, 242, 0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  display: flex; align-items: center; gap: 10px;
}
.topbar h1 { font-size: 18px; font-weight: 700; flex: 1; }
.topbar .nav-btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer;
}
.topbar .nav-btn:active { background: var(--accent-soft); }

/* ---- 口令门 ---- */
.gate { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; gap: 14px; }
.gate .logo { font-size: 52px; }
.gate h2 { font-size: 20px; }
.gate p { color: var(--ink2); font-size: 14px; }
.gate input {
  width: 100%; max-width: 300px; padding: 13px 16px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
  outline: none; text-align: center;
}
.gate input:focus { border-color: var(--accent); }
.gate .err { color: var(--red); font-size: 13px; min-height: 20px; }

/* ---- 按钮 ---- */
.btn {
  border: none; border-radius: 12px; padding: 12px 18px; font-size: 15px; font-weight: 600;
  background: var(--accent); color: #fff; cursor: pointer;
}
.btn:active { opacity: 0.85; }
.btn[disabled] { opacity: 0.5; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn.small { padding: 7px 12px; font-size: 13px; border-radius: 999px; }
.btn.danger { background: var(--card); color: var(--red); border: 1px solid var(--line); }

/* ---- 会议条 ---- */
.session-bar {
  margin: 14px 16px 0; padding: 12px 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.session-bar .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.session-bar .dot.live { background: var(--red); animation: pulse 1.4s infinite; }
.session-bar .dot.idle { background: var(--green); }
@keyframes pulse { 50% { opacity: 0.35; } }
.session-bar .s-title { font-weight: 600; font-size: 15px; flex: 1; min-width: 120px; }
.session-bar .s-time { color: var(--ink2); font-size: 12px; width: 100%; }

/* ---- 笔记流 ---- */
.stream { flex: 1; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.empty-hint { color: var(--ink2); text-align: center; padding: 60px 20px; font-size: 14px; line-height: 2; }
.note {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start;
}
.note .n-time { color: var(--ink2); font-size: 12px; padding-top: 3px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.note .n-text { flex: 1; white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.note .n-ops { flex-shrink: 0; display: flex; gap: 2px; }
.note .n-ops button {
  border: none; background: none; color: var(--ink2); font-size: 14px; padding: 2px 4px; cursor: pointer;
}

/* ---- 底部输入 ---- */
.composer {
  position: sticky; bottom: 0; z-index: 10;
  background: rgba(250, 247, 242, 0.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(env(safe-area-inset-bottom) + 10px);
  display: flex; gap: 8px; align-items: flex-end;
}
.composer textarea {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 14px; font-size: 16px; font-family: inherit; line-height: 1.5;
  background: var(--card); color: var(--ink); outline: none;
  max-height: 140px;
}
.composer textarea:focus { border-color: var(--accent); }
.composer .send-btn {
  border: none; border-radius: 14px; background: var(--accent); color: #fff;
  font-size: 16px; font-weight: 700; padding: 11px 20px; cursor: pointer; flex-shrink: 0;
}
.composer .send-btn:active { opacity: 0.85; }

/* ---- 归档 ---- */
.search-bar { padding: 12px 16px 0; }
.search-bar input {
  width: 100%; padding: 11px 16px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); outline: none;
}
.search-bar input:focus { border-color: var(--accent); }
.card-list { padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.sess-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 14px; cursor: pointer;
}
.sess-card:active { background: var(--accent-soft); }
.sess-card .c-head { display: flex; align-items: center; gap: 8px; }
.sess-card .c-title { font-weight: 600; font-size: 15px; flex: 1; }
.sess-card .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.badge.done { background: #e3f4ec; color: var(--green); }
.badge.todo { background: var(--accent-soft); color: var(--accent); }
.sess-card .c-meta { color: var(--ink2); font-size: 12px; margin-top: 4px; }
.sess-card .c-preview {
  color: var(--ink2); font-size: 13px; margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 详情 ---- */
.detail-head { padding: 14px 16px 0; }
.detail-head h2 { font-size: 19px; line-height: 1.4; }
.detail-head .d-meta { color: var(--ink2); font-size: 12px; margin-top: 4px; }
.detail-ops { display: flex; gap: 8px; padding: 10px 16px 0; flex-wrap: wrap; }
.summary-card {
  margin: 12px 16px 0; padding: 14px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid #f5d9b8;
}
.summary-card h3 { font-size: 14px; color: var(--accent); margin-bottom: 6px; }
.summary-card .sec { margin-top: 10px; }
.summary-card .sec-t { font-size: 13px; font-weight: 700; }
.summary-card ul { padding-left: 20px; font-size: 14px; }
.summary-card li { margin: 2px 0; }
.summary-card .fallback-note { font-size: 12px; color: var(--ink2); margin-top: 8px; }
.summary-card .s-time { font-size: 11px; color: var(--ink2); margin-top: 8px; }
.section-label { padding: 16px 16px 0; font-size: 13px; font-weight: 700; color: var(--ink2); }

.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 9px 18px; border-radius: 999px;
  font-size: 14px; z-index: 99; opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.toast.show { opacity: 0.92; }
.loading-line { text-align: center; color: var(--ink2); padding: 30px; font-size: 14px; }