/* ============================================================
   熙磊 · 全站导航（唯一一份，5 个页面共用）

   原则：**断点内数值全部固定**，不用 clamp/vw 连续缩放。
   所以切换页面、放大缩小窗口，导航都不会变形。

   页面自己的 <style> 里不要再写 .topnav / .brand / .navcenter /
   .navright / .iconbtn / .acct / .drop —— 一律用这一份。
   ============================================================ */
:root{ --nav-h:60px; }

.topnav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:60;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 48px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topnav .brand{
  width:38px; height:38px; border-radius:11px; justify-self:start;
  background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center;
  font-family:var(--font-serif); font-weight:700; font-size:19px;
}
.topnav .navcenter{ display:flex; gap:30px; }
.topnav .navcenter a{
  font-size:15px; color:var(--ink-2); padding:6px 2px; letter-spacing:.04em;
  transition:color .18s;
}
.topnav .navcenter a:hover{ color:var(--ink); }
/* 用 inset 阴影画下划线：不占布局，切换页面时字不会上下跳 */
.topnav .navcenter a.on{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent); }
.topnav .navright{ display:flex; gap:12px; align-items:center; justify-self:end; }
.topnav .acctwrap{ position:relative; }

.iconbtn{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink-2); border:1px solid var(--line); background:none; transition:all .2s;
}
.iconbtn:hover{ color:var(--accent); border-color:var(--accent); }
.iconbtn svg{ width:18px; height:18px; }
/* 主题按钮：白天显月亮、夜间显太阳 */
.iconbtn .ic-sun{ display:none; }
:root[data-theme="dark"] .iconbtn .ic-sun{ display:block; }
:root[data-theme="dark"] .iconbtn .ic-moon{ display:none; }

.acct{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink-2); border:1px solid var(--line); background:none; transition:all .2s;
}
.acct:hover{ color:var(--accent); border-color:var(--accent); }
.acct svg{ width:18px; height:18px; }

.drop{
  position:absolute; top:calc(100% + 8px); right:0; min-width:150px; z-index:90;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:6px;
}
.drop button{
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:9px; font-size:14px;
}
.drop button:hover{ background:var(--accent-soft); color:var(--accent-deep); }

/* 窄屏：只换断点，不连续缩放 */
@media (max-width:1080px){
  .topnav{ padding:0 28px; }
  .topnav .navcenter{ gap:20px; }
  .topnav .navcenter a{ font-size:14.5px; }
}
@media (max-width:820px){
  :root{ --nav-h:56px; }
  .topnav{ padding:0 16px; }
  .topnav .brand{ width:32px; height:32px; border-radius:9px; font-size:17px; }
  .topnav .navcenter{ gap:13px; }
  .topnav .navcenter a{ font-size:13.5px; letter-spacing:0; }
  .iconbtn, .acct{ width:34px; height:34px; }
  .iconbtn svg, .acct svg{ width:16px; height:16px; }
}

/* ============================================================
   全站统一的滚动条 —— 只有这一份，各页自己的 <style> 里不要再写
   到顶才出现、细而不抢眼；不用系统那种带箭头、还吃掉内容宽度的粗条。
   ============================================================ */
html{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }   /* Firefox */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:var(--ink-3); }
*::-webkit-scrollbar-corner{ background:transparent; }

/* ============================================================
   录音中的"在听"：按钮外面一圈呼吸的光晕
   采访页和搭子页的麦克风按钮共用（.rec 由 ptt.js 加/去）
   ============================================================ */
#micBtn.rec, #cMic.rec{ animation:mic-breathe 1.7s ease-in-out infinite; }
@keyframes mic-breathe{
  0%, 100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%     { box-shadow:0 0 0 8px transparent; }
}
@media (prefers-reduced-motion:reduce){ #micBtn.rec, #cMic.rec{ animation:none; } }

/* ============================================================
   全站输入条（采访页 / 搭子页共用这一份，别再各写一遍）
   形状照 ChatGPT 那种：一条胶囊，左边可以有个「＋」，右边是麦克风（素图标）
   和发送圆钮 —— 颜色仍用我们的纸与墨、不抄它的灰黑；上方那行可见标签照设计系统保留
   ============================================================ */
.bar{display:flex;align-items:flex-end;gap:4px;padding:6px 6px 6px 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--raised);
  transition:border-color .15s}
.bar:focus-within{border-color:var(--accent)}
.bar textarea{flex:1;min-width:0;border:0;background:transparent;outline:none;resize:none;
  padding:11px 2px;font-family:var(--font-ui);font-size:16px;line-height:1.6;color:var(--ink);
  max-height:176px;overflow-y:hidden}
.bar textarea::placeholder{color:var(--ink-3)}
/* 两边的素图标钮（麦克风、＋）：不要框，只要一个够大的点按区 */
.bar .ibtn2{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:transparent;
  color:var(--ink-2);display:grid;place-items:center;cursor:pointer;
  transition:background .15s,color .15s}
.bar .ibtn2:hover:not(:disabled){background:var(--paper-2);color:var(--ink)}
.bar .ibtn2:active:not(:disabled){transform:scale(.96)}
.bar .ibtn2:disabled{opacity:.4;cursor:not-allowed}
.bar .ibtn2 svg{width:21px;height:21px}
.bar .ibtn2.rec{color:var(--accent);background:var(--accent-soft)}
/* 发送：实心圆钮 */
.bar .sendround{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--accent);
  color:var(--on-accent);display:grid;place-items:center;cursor:pointer;
  transition:background .15s,opacity .15s}
.bar .sendround:hover:not(:disabled){background:var(--accent-deep)}
.bar .sendround:disabled{opacity:.5;cursor:not-allowed}
.bar .sendround svg{width:20px;height:20px}
@media (max-width:820px){
  .bar .ibtn2, .bar .sendround{width:42px;height:42px}
  .bar textarea{max-height:132px}
}