/* ══════════════════════════════════════════════
   Echo 回响 · css/retro.css
   「复古书房」皮肤 v3 —— Retro-digital / MacOS Classic / Editorial UI
   设计系统提取自参考图(我的廿一世纪·图书馆 App):
     · 窗口灰 #E6E8EB / 内容白 #FFFFFF / 炭墨 #2B2B2E
     · 唯一彩色 = 侧栏选中石板蓝 #6E7F96(渐变 8496AC→667691)
     · 标题栏三段渐变 + 红绿灯描边圆点;hairline #CBD0D6
     · 标签 chip:白底 1px 描边 radius 3px;stat 卡:condensed 大数字 + caps 小注
     · UI 无衬线(SF Pro 系)/ 内容衬线(Georgia 系)/ 数字 condensed
   本文件最后加载,纯覆盖,不改任何原文件;想回到原皮肤,删掉
   index.html 里对本文件的引用即可。
   ══════════════════════════════════════════════ */

/* ── 主题变量:浅色「书房」── */
:root{
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
             "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-en: Georgia, "Times New Roman", serif;        /* 内容衬线(英) */
  --font-num: "Avenir Next Condensed", "Helvetica Neue", "Arial Narrow",
              "PingFang SC", sans-serif;               /* stat 大数字 */
  /* --font-cn 沿用 base.css 的 Noto Serif SC(内容衬线·中) */

  --bg: #E6E8EB;                   /* 窗口灰(采样 #DDE0E3~#EBECEE) */
  --header-bg: #E6E8EB;
  --hairline: #CBD0D6;             /* 分隔线(采样 #CECFD1) */
  --text: #2B2B2E;                 /* 炭墨 */
  --text-soft: #6F757E;            /* meta label 灰 */
  --text-faint: #A2A8B0;           /* caps 小注灰 */

  --bubble-ai-bg: #FFFFFF;
  --bubble-ai-fg: #2B2B2E;
  --bubble-ai-line: #C6CAD1;
  --bubble-human-bg: #6E7F96;      /* ★ 参考图唯一彩色:石板蓝选中态 */
  --bubble-human-fg: #FFFFFF;
  --bubble-human-line: #5B6C84;
  --bubble-human-grad: linear-gradient(180deg, #8496AC 0%, #6E7F96 100%);

  --accent: #6E7F96;
  --accent-deep: #5B6C84;
  --accent-soft: #E4E9EF;          /* 石板蓝极浅底 */
  --send-bg: #6E7F96;
  --tick: #8A9CB2;
  --accent-fg: #FFFFFF;
  --think-flourish: rgba(110, 127, 150, .55);
  --think-label: #6E7F96;
  --think-body: #5A6472;

  --composer-bg: #E6E8EB;
  --field-bg: #FFFFFF;
  --field-line: #BEC3CA;
  --shadow: 0 1px 2px rgba(20,24,30,.06), 0 10px 28px rgba(20,24,30,.07);
  --soft-shadow: 0 1px 2px rgba(20,24,30,.05), 0 6px 18px rgba(20,24,30,.05);
  --scrim: none;
  --bubble-radius: 12px;

  --card-bg: #FFFFFF;
  --card-line: #C3C8CE;
  --card-shadow: 0 1px 2px rgba(20,24,30,.05), 0 8px 22px rgba(20,24,30,.05);
  --chip-line: #B9BDC4;            /* 标签 chip 描边(采样) */
  --seg-track: #DFE2E6;
  --seg-thumb: #FFFFFF;
  --seg-thumb-shadow: 0 1px 3px rgba(20,24,30,.14);
  --row-press: rgba(110, 127, 150, .14);
  --slider-track: #C9CDD3;
  --slider-thumb: #6E7F96;
  --info-ring: rgba(110, 127, 150, .45);
  --status-dot: #6E7F96;

  /* 经典 Mac 拟物件 */
  --chrome-bar: linear-gradient(180deg, #F8F9FA 0%, #ECEDEF 48%, #DBDEE2 100%);
  --chrome-line: #B9BDC4;
  --chrome-hi: rgba(255,255,255,.7);
  --btn-grad: linear-gradient(180deg, #FFFFFF 0%, #EEEFF1 100%);
  --btn-line: #B4B9C0;
  --btn-grad-press: linear-gradient(180deg, #E4E6E9 0%, #F2F3F5 100%);
  --btn-primary: linear-gradient(180deg, #8496AC 0%, #6E7F96 100%);
  --btn-primary-press: linear-gradient(180deg, #6E7F96 0%, #8496AC 100%);
  --inset-field: inset 0 1px 3px rgba(20,24,30,.10), inset 0 0 0 1px rgba(20,24,30,.02);
  --emboss: 0 1px 0 rgba(255,255,255,.85);
  /* 红绿灯描边圆点(纯 CSS 三环,供标题栏背景使用) */
  --traffic-dots:
    radial-gradient(circle 6px at 18px 50%, #F3F4F6 0 3.5px, #9AA0A8 4px 5px, transparent 5.5px),
    radial-gradient(circle 6px at 36px 50%, #F3F4F6 0 3.5px, #9AA0A8 4px 5px, transparent 5.5px),
    radial-gradient(circle 6px at 54px 50%, #F3F4F6 0 3.5px, #9AA0A8 4px 5px, transparent 5.5px);

  --call-glass-top: rgba(248,249,250,.72);
  --call-glass-bot: rgba(219,222,226,.42);
  --call-glass-edge: rgba(185,189,196,.9);
  --call-glass-hi: rgba(255,255,255,.85);
  --call-glass-glow: rgba(110,127,150,.18);
  --call-glass-shadow: 0 20px 50px rgba(20,24,30,.12);
  --call-scrim: rgba(20,24,30,.04);
  --call-hangup-bg: #C98F93;
  --call-hangup-shadow: rgba(176,96,104,.30);
}

/* ── 深色「夜读」:同一骨架的暗色衍生 ── */
:root[data-theme="harbor"]{
  --bg: #232427;
  --header-bg: #232427;
  --hairline: #3E4148;
  --text: #E8E8EB;
  --text-soft: #A4A8B0;
  --text-faint: #7C8089;

  --bubble-ai-bg: #2F3137;
  --bubble-ai-fg: #E8E8EB;
  --bubble-ai-line: #44474F;
  --bubble-human-bg: #4A5D74;
  --bubble-human-fg: #EEF3F9;
  --bubble-human-line: #5A6E86;
  --bubble-human-grad: linear-gradient(180deg, #54687F 0%, #43566C 100%);

  --accent: #8CA2B9;
  --accent-deep: #46586C;
  --accent-soft: #2C3640;
  --send-bg: #8CA2B9;
  --tick: #9DB2C6;
  --accent-fg: #232427;
  --think-flourish: rgba(140, 162, 185, .5);
  --think-label: #8CA2B9;
  --think-body: #9FA8B4;

  --composer-bg: #232427;
  --field-bg: #2A2B30;
  --field-line: #484B53;
  --shadow: 0 1px 2px rgba(0,0,0,.30), 0 10px 28px rgba(0,0,0,.26);
  --soft-shadow: 0 1px 2px rgba(0,0,0,.24), 0 6px 18px rgba(0,0,0,.22);
  --scrim: none;

  --card-bg: #2C2E33;
  --card-line: #43464D;
  --card-shadow: 0 1px 2px rgba(0,0,0,.26), 0 8px 22px rgba(0,0,0,.22);
  --chip-line: #4B4F57;
  --seg-track: #1E1F22;
  --seg-thumb: #3A3C42;
  --seg-thumb-shadow: 0 1px 3px rgba(0,0,0,.40);
  --row-press: rgba(140, 162, 185, .14);
  --slider-track: #43464D;
  --slider-thumb: #8CA2B9;
  --info-ring: rgba(140, 162, 185, .45);
  --status-dot: #8CA2B9;

  --chrome-bar: linear-gradient(180deg, #34363B 0%, #2B2C31 48%, #25262A 100%);
  --chrome-line: #17181B;
  --chrome-hi: rgba(255,255,255,.08);
  --btn-grad: linear-gradient(180deg, #3B3D43 0%, #313338 100%);
  --btn-line: #4C4F57;
  --btn-grad-press: linear-gradient(180deg, #2A2B30 0%, #35373D 100%);
  --btn-primary: linear-gradient(180deg, #9DB2C6 0%, #7E96AC 100%);
  --btn-primary-press: linear-gradient(180deg, #7E96AC 0%, #9DB2C6 100%);
  --inset-field: inset 0 1px 3px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.18);
  --emboss: 0 1px 0 rgba(0,0,0,.5);
  --traffic-dots:
    radial-gradient(circle 6px at 18px 50%, #2A2B30 0 3.5px, #565A63 4px 5px, transparent 5.5px),
    radial-gradient(circle 6px at 36px 50%, #2A2B30 0 3.5px, #565A63 4px 5px, transparent 5.5px),
    radial-gradient(circle 6px at 54px 50%, #2A2B30 0 3.5px, #565A63 4px 5px, transparent 5.5px);

  --call-glass-top: rgba(52,54,59,.66);
  --call-glass-bot: rgba(37,38,42,.42);
  --call-glass-edge: rgba(76,79,87,.9);
  --call-glass-hi: rgba(255,255,255,.12);
  --call-glass-glow: rgba(140,162,185,.16);
  --call-glass-shadow: 0 20px 50px rgba(0,0,0,.44);
  --call-scrim: rgba(0,0,0,.22);
}

/* ── 全局:UI 无衬线,内容衬线 ── */
body{
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
.bubble, .think-text, .menu-title, .menu-name{
  font-family: var(--font-en), var(--font-cn);   /* 内容区恢复衬线 */
}

/* ── 顶栏:经典 Mac 标题栏 —— 三段渐变 + 顶部内高光 + 底部铬线 ── */
.topbar{
  background: var(--chrome-bar);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--chrome-line);
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 rgba(255,255,255,.35);
}
:root[data-theme="harbor"] .topbar{
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 rgba(0,0,0,.35);
}
.peerpill{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 44px;
}
.peerpill .name{
  font-family: var(--font-en), var(--font-cn);
  font-weight: 700; letter-spacing: .04em;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: var(--emboss);
}
.peerpill .status{
  font-family: var(--font-ui);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-faint);
}
/* 窄屏挤下 4 个操作键:收一点尺寸,避免和中间名字重叠(上游版在小屏有这个问题) */
.header-actions{ gap: 4px; }
.topbtn{
  width: 28px; height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}
.topbtn:active{
  background: var(--row-press);
  border-color: var(--chip-line);
}
.topbtn svg{ width: 17px; height: 17px; }
.topbtn.more svg{ width: 15px; }

/* ── 气泡:AI 白卡细边 + 顶部高光;人类 = 石板蓝渐变(参考图侧栏选中色)── */
.row.ai .bubble{
  border: 1px solid var(--bubble-ai-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), var(--soft-shadow);
}
:root[data-theme="harbor"] .row.ai .bubble{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--soft-shadow);
}
.row.human .bubble{
  background: var(--bubble-human-grad);
  border: 1px solid var(--bubble-human-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--soft-shadow);
}
.row.human .bubble .meta, .row.human .bubble .time{ color: rgba(255,255,255,.72); }
.row.human .bubble .tick{ color: rgba(255,255,255,.85); }
.row.ai.tail .bubble{ border-bottom-left-radius: 4px; }
.row.human.tail .bubble{ border-bottom-right-radius: 4px; }
.bubble .txt code{
  font-family: Menlo, "SF Mono", Consolas, monospace;
  background: var(--accent-soft);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── 日期/新消息分隔:caps 宽字距 + 两侧 hairline(参考图 DESCRIPTION ───)── */
.day, .new-divider, .meta{
  font-family: var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── act 动作 chip / thinking 开关:带边框标签(参考图 tags, radius 3px)── */
.act-block, .act-toggle, .think-toggle{
  font-family: var(--font-ui);
}
.act-toggle{
  border: 1px solid var(--chip-line) !important;
  border-radius: 3px;
  background: var(--card-bg);
  color: var(--text-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  font-size: 11px;
  letter-spacing: .04em;
}
.act-toggle:active{ background: var(--accent-soft); }

/* ── 输入区:内凹白底文本框 + 描边方钮(参考图 B/I/U 格式条)── */
.composer{
  background: var(--composer-bg);
  border-top: 1px solid var(--chrome-line);
  box-shadow: inset 0 1px 0 var(--chrome-hi);
}
.composer .field{
  border-radius: 8px;
  border: 1px solid var(--field-line);
  background: var(--field-bg);
  box-shadow: var(--inset-field);
}
.composer .field:focus-within{
  border-color: var(--accent);
  box-shadow: var(--inset-field), 0 0 0 3px var(--info-ring);
}
.composer input, .composer textarea{
  font-family: var(--font-en), var(--font-cn);
  color: var(--text);
}
.composer input::placeholder, .composer textarea::placeholder{
  font-family: var(--font-ui);
  color: var(--text-faint);
  letter-spacing: .03em;
}
.floatbtn{
  border-radius: 6px;
  border: 1px solid var(--btn-line);
  background: var(--btn-grad);
  box-shadow: inset 0 1px 0 var(--chrome-hi), var(--soft-shadow);
  color: var(--text-soft);
}
.floatbtn:active{ background: var(--btn-grad-press); }
.floatbtn.send{
  border-radius: 7px;
  background: var(--btn-primary);
  border: 1px solid var(--accent-deep);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--soft-shadow);
}
.floatbtn.send:active{ background: var(--btn-primary-press); }
.newmsg-pill{
  font-family: var(--font-ui);
  border: 1px solid var(--card-line);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  letter-spacing: .06em;
}

/* ── 主菜单:参考图侧栏语言 —— caps 小注 + hairline 列表 + 石板蓝按压 ── */
.menu-page{
  background-color: var(--bg);   /* 不盖掉 menu.css 的壁纸层(背景图跟着 --menu-wall-* 走) */
}
.menu-private{
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: .30em; text-transform: uppercase;
  color: var(--text-soft);
}
.menu-private::after{
  content: ""; display: block;
  width: 34px; height: 1px; background: var(--hairline);
  margin-top: 8px;
}
.menu-title{
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
}
.menu-since{
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: .10em;
  color: var(--text-faint);
}
/* 「284 Days together」= 参考图大数字 stat 卡语言 */
.menu-days .num{
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
}
.menu-days .lab{
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-faint);
}
.menu-sub{
  font-family: var(--font-ui);
  letter-spacing: .10em;
  color: var(--text-faint);
}
.menu-name{
  font-weight: 600;
  color: var(--text);
}
.menu-item{
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
}
.menu-item:active{
  background: var(--btn-primary);
}
.menu-item:active .menu-name,
.menu-item:active .menu-sub,
.menu-item:active .menu-arrow{ color: #FFFFFF; }
.menu-foot{
  font-family: var(--font-en), var(--font-cn);
  font-style: italic;
  color: var(--text-faint);
}

/* ── 登录页:完整经典窗口 —— 红绿灯标题栏 + 面板体 ── */
.login{
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  margin: 0 var(--side-pad);
  padding: 0 0 28px;
  overflow: hidden;
  width: auto;
  max-width: 420px;
}
.login h1{
  font-family: var(--font-ui);
  font-weight: 700; letter-spacing: .10em;
  font-size: 15px;
  color: var(--text);
  text-shadow: var(--emboss);
  background: var(--chrome-bar);
  background-image: var(--traffic-dots);
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--chrome-line);
  box-shadow: inset 0 1px 0 var(--chrome-hi);
  width: 100%;
  margin: 0 0 20px;
  padding: 15px 0 13px;
  text-align: center;
  order: -2;                          /* 提到 orb 之前,像窗口标题栏 */
}
.login .orb{
  box-shadow: 0 0 0 1px var(--card-line), var(--soft-shadow);
}
.login .sub{
  font-family: var(--font-ui);
  color: var(--text-soft);
  letter-spacing: .03em;
}
.login input{
  font-family: var(--font-ui);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: 8px;
  box-shadow: var(--inset-field);
  color: var(--text);
}
.login input:focus{
  border-color: var(--accent);
  box-shadow: var(--inset-field), 0 0 0 3px var(--info-ring);
}
.login button{
  font-family: var(--font-ui);
  letter-spacing: .18em;
  background: var(--btn-primary);
  border: 1px solid var(--accent-deep);
  color: #FFFFFF;
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--soft-shadow);
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.login button:active{ background: var(--btn-primary-press); }

/* ── 设置页:白卡细边 + caps 标签带 hairline 延伸线 ── */
.settings-card{
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}
.settings-label{
  font-family: var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-label::after{
  content: ""; flex: 1;
  height: 1px; background: var(--hairline);
}
/* 段控 = 参考图 tabs:内凹轨道 + 白色凸起活页 */
.segmented{
  background: var(--seg-track);
  border: 1px solid var(--card-line);
  border-radius: 7px;
  box-shadow: var(--inset-field);
}
.segmented button{
  font-family: var(--font-ui);
  color: var(--text-soft);
  letter-spacing: .06em;
}
.segmented button.active{
  background: var(--seg-thumb);
  color: var(--text);
  box-shadow: var(--seg-thumb-shadow);
  border: 1px solid var(--btn-line);
  border-radius: 5px;
}
/* 经典渐变按钮 */
.loop-btn{
  font-family: var(--font-ui);
  letter-spacing: .08em;
  border: 1px solid var(--btn-line);
  border-radius: 6px;
  background: var(--btn-grad);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--chrome-hi), var(--soft-shadow);
  text-shadow: var(--emboss);
}
.loop-btn:active{ background: var(--btn-grad-press); }
/* 输入框/文本域:内凹白底 */
.settings-card input[type="text"],
.settings-card input[type="password"],
.settings-card input[type="number"],
.settings-card textarea,
.settings-card select{
  font-family: var(--font-ui);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: 6px;
  box-shadow: var(--inset-field);
  color: var(--text);
}
.settings-card input:focus, .settings-card textarea:focus, .settings-card select:focus{
  border-color: var(--accent);
  outline: none;
  box-shadow: var(--inset-field), 0 0 0 3px var(--info-ring);
}
/* 滑动条 */
.settings-card input[type="range"]{
  accent-color: var(--slider-thumb);
}
/* 行分隔:label 灰 / value 深(参考图 meta 网格) */
.action-row, .settings-row{
  border-bottom: 1px solid var(--hairline);
}
.action-row:last-child, .settings-row:last-child{ border-bottom: none; }

/* ── 个人资料头:头像环 + caps 小注 ── */
.profile-identity .avatar, .profile-avatar, #profileAvatar{
  box-shadow: 0 0 0 1px var(--card-line), var(--soft-shadow);
}

/* ── 长按菜单 / 上下文菜单:白卡细边圆角 ── */
.ctx-menu, .context-menu{
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}

/* ── 语音通话:保持 v2 的玻璃拟物变量即可(变量已换复古色)── */

/* ── 对话字体(九信风):只盖聊天气泡。retro.css 在 messages.css 之后加载,
   皮肤里 .bubble 的字体规则会压过 messages.css,所以在这里最后兜底 ── */
.bubble{ font-family: "Jiuxinfeng90", var(--font-en), var(--font-cn); }