/* ============================================
   临期管家 · 顶栏共享控件样式（chip 风格）
   被 index.html（应用）/ landing.html / product.html / auth.html 共用
   配色变量来自各页的 :root（styles.css 或 landing.css）
   ============================================ */

/* 顶栏右侧操作区容器：让 4 个控件像一组 */
.topbar-actions{
  display:flex; align-items:center; gap:8px; margin-left:auto;
}

/* 通用 chip：36px 高、圆角胶囊、统一底色与边框 */
.chip{
  height:36px; display:inline-flex; align-items:center; gap:7px;
  padding:0 14px; border-radius:18px;
  background:var(--panel2); border:1px solid var(--line);
  color:var(--text); font-size:13px; font-weight:500; line-height:1;
  cursor:pointer; white-space:nowrap; transition:.15s; user-select:none;
}
.chip:hover{ border-color:var(--accent); background:var(--panel3); }

/* 主题切换：圆形图标按钮 */
.chip-icon{
  width:36px; padding:0; justify-content:center; border-radius:50%;
  position:relative; flex:none;
}
.chip-icon svg{ width:18px; height:18px; display:none; }
/* 邮件按钮：图标始终显示 + 文字标签（不像主题切换那样隐藏 SVG） */
.mail-btn{ padding:0 14px; border-radius:18px; width:auto; }
.mail-btn svg{ display:inline!important; flex:none; }
.chip-icon:hover{ transform:translateY(-1px); }
[data-theme="light"] .chip-icon .ti-moon{ display:inline; }
[data-theme="light"] .chip-icon .ti-sun { display:none; }
[data-theme="dark"]  .chip-icon .ti-sun { display:inline; }
[data-theme="dark"]  .chip-icon .ti-moon{ display:none; }

/* 语言切换：重置浏览器原生 select */
.chip-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:30px; cursor:pointer; outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px;
}
.chip-select:focus{ border-color:var(--accent); }
.chip-select::-ms-expand{ display:none; }   /* IE/Edge 老版本隐藏箭头 */

/* 用户胶囊：头像 + 用户名 */
.chip-user{
  padding:3px 12px 3px 4px; gap:8px; cursor:default;
}
.chip-user.clickable{ cursor:pointer; }
.chip-user .avatar{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--panel3); border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; overflow:hidden;
}
.chip-user .avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.chip-user .uname{ font-weight:600; }

/* 返回主页按钮（图标 + "主页"文字，统一高度与 chip 一致） */
.chip-home{
  text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.chip-home svg{ flex:none; }

/* 退出按钮（危险态） */
.chip-btn-danger{ color:var(--expired); }
.chip-btn-danger:hover{ color:var(--expired); border-color:var(--expired); background:rgba(248,81,73,.12); }

/* landing / product 顶栏里，nav-cta 也用 chip 视觉 */
.nav-cta.chip{
  background:rgba(0,0,0,.04); border-color:transparent; color:var(--ink);
}
.nav-cta.chip:hover{ background:rgba(0,0,0,.08); border-color:transparent; }
[data-theme="dark"] .nav-cta.chip{ background:rgba(255,255,255,.08); color:var(--dark-ink, #f5f5f7); }
[data-theme="dark"] .nav-cta.chip:hover{ background:rgba(255,255,255,.14); }

/* auth 返回链接若也用 chip */
.auth-back.chip{
  background:transparent; border-color:var(--line); color:var(--ink);
}
.auth-back.chip:hover{ border-color:var(--accent); background:rgba(255,255,255,.06); }

@media (max-width:720px){
  .topbar-actions{ margin-left:0; }
  .chip-user .uname{ display:none; }   /* 窄屏只留头像 */
}

/* 通用隐藏（登录态探测后由 topbar.js 控制显隐） */
.hidden{ display:none!important; }

/* 工作区切换器（个人 / 多家庭）：顶栏中段的分段控件 */
.workspace-switcher{
  display:flex; align-items:center; gap:4px; flex:none;
  padding:3px; border-radius:18px;
  background:var(--panel2); border:1px solid var(--line);
  margin-left:14px;
}
/* JS 给 #workspaceSwitcher 加 hidden 属性时，必须强制隐藏（盖过上面的 display:flex） */
.workspace-switcher[hidden]{ display:none!important; }
.workspace-switcher .ws-btn{
  height:30px; padding:0 12px; border:none; border-radius:14px;
  background:transparent; color:var(--text); font-size:13px; font-weight:500;
  cursor:pointer; white-space:nowrap; transition:.15s;
}
.workspace-switcher .ws-btn:hover{ background:var(--panel3); }
.workspace-switcher .ws-btn.active{
  background:var(--accent, #3B95DD); color:#fff;
}
.workspace-switcher .ws-sep{ width:1px; height:18px; background:var(--line); }

@media (max-width:720px){
  .workspace-switcher{ margin-left:8px; }
  .workspace-switcher .ws-btn{ padding:0 9px; font-size:12px; }
}