/* 言诺 · 网页共用配色与部件（桌面 index.html、手机 m.html 共用，PD-CLIENT-014）
 *
 * 1. 配色：纯欲风（用户 2026-11-08 决定，和首页、登录页同一套）：奶油白打底，裸粉的面和线，
 *    深玫瑰色给按钮、选中和链接，自己的气泡恢复原来的蓝色（用户 2026-11-08 决定），聊天发送键同色（2026-11-09 决定）。
 *    深色是同一色系的深莓色（和安卓登录页的深色品牌色同源），跟随系统切换、不单设开关。
 *    和安卓 ui/Theme 的 Palette 同一套色值。页面和共用组件只从这里取色（--y-*），不再各自写色值。
 * 2. 登录页（html[data-gate="login"]）保持品牌浅色，和公开页一致（PD-SITE-007），不跟深色。
 * 3. 共用部件：页面内对话框、「↓ N 条新消息」、看大图的缩放控件。
 *
 * 页面样式里引用这些变量时都带浅色兜底值：这份文件没加载到时（例如服务端还没重启、
 * 白名单里还没有它），页面照旧是浅色，不会变成一片空白。 */

:root {
  color-scheme: light;
  --y-bg: #faf0ef;
  --y-surface: #fffaf8;
  --y-surface-alt: #f6e9e8;
  --y-bar: #fdf4f3;
  --y-line: #f1dfdd;
  --y-text: #3b2a2e;
  --y-text2: #8a6c72;
  --y-text3: #a3868c;
  --y-icon: #5e454c;
  --y-hover: #f9ebea;
  --y-pressed: rgba(122, 64, 84, .08);
  --y-primary: #c96c8a;
  /* 桌面旧控件的强调色：与消息气泡分开，恢复蓝色气泡时保留控件原色 */
  --y-control-accent: #d58099;
  --y-primary-deep: #b9587a;
  --y-primary-text: #ad4f72;
  --y-primary-soft: rgba(201, 108, 138, .12);
  /* 品牌主按钮（确定等）用的玫瑰渐变，和首页按钮一样；只能用在 background 上 */
  --y-primary-grad: linear-gradient(135deg, #d9809a, #b9587a);
  --y-on-primary: #ffffff;
  --y-danger: #d9435f;
  --y-danger-soft: rgba(217, 67, 95, .08);
  --y-pink: #d6336c;
  --y-pink-soft: rgba(214, 51, 108, .08);
  --y-pink-line: rgba(214, 51, 108, .35);
  --y-warn-text: #8a5a00;
  --y-rel-up: #d73545;
  --y-rel-down: #16834b;
  --y-down: #3b7dd8;
  --y-bubble-mine: #12b7f5;
  --y-bubble-mine-text: #ffffff;
  --y-bubble-peer: #ffffff;
  --y-bubble-peer-text: #3b2a2e;
  /* 旁白写法里引号中的对白（PD-CHAT-007，用户 2026-11-10 选的金色） */
  --y-dialogue: #a0620a;
  --y-quote-mine: rgba(255, 255, 255, .2);
  --y-quote-mine-line: rgba(255, 255, 255, .65);
  --y-quote-mine-text: #fff0f4;
  --y-quote-peer: rgba(122, 64, 84, .06);
  --y-quote-peer-line: #e5c9cf;
  --y-quote-peer-text: #8a6c72;
  --y-chip-bg: #ffffff;
  --y-chip-stroke: #ebd3d7;
  --y-chip-text: #5e3a46;
  --y-control-bar: #fff7f5;
  --y-placeholder: #f2e3e3;
  --y-notice-bg: rgba(47, 32, 36, .9);
  --y-notice-text: #ffffff;
  --y-badge: #fa5151;
  --y-shadow: 0 1px 2px rgba(122, 64, 84, .07);
  --y-shadow-pop: 0 12px 34px rgba(122, 64, 84, .2);
  --y-overlay: rgba(47, 24, 32, .38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-gate="login"]) {
    color-scheme: dark;
    --y-bg: #130e11;
    --y-surface: #1c1519;
    --y-surface-alt: #2a1f25;
    --y-bar: #181216;
    --y-line: #33262c;
    --y-text: #f3e7ea;
    --y-text2: #bca2a9;
    --y-text3: #856d73;
    --y-icon: #dcc8cd;
    --y-hover: #251c21;
    --y-pressed: rgba(255, 220, 232, .12);
    --y-primary-text: #ec9db5;
    --y-control-accent: #a5536f;
    --y-primary-soft: rgba(224, 140, 168, .16);
    --y-danger: #ff7a93;
    --y-danger-soft: rgba(255, 122, 147, .16);
    --y-pink: #f07aa4;
    --y-pink-soft: rgba(240, 122, 164, .15);
    --y-pink-line: rgba(240, 122, 164, .45);
    --y-warn-text: #e8c477;
    --y-rel-up: #ff7a85;
    --y-rel-down: #5fcb7a;
    --y-down: #6ea8ff;
    --y-bubble-mine: #1690c8;
    --y-bubble-peer: #2a1f25;
    --y-bubble-peer-text: #f3e7ea;
    --y-dialogue: #f0b860;
    --y-quote-mine: rgba(255, 255, 255, .16);
    --y-quote-mine-line: rgba(255, 255, 255, .55);
    --y-quote-mine-text: #ffe3ec;
    --y-quote-peer: rgba(255, 255, 255, .07);
    --y-quote-peer-line: #4d3a42;
    --y-quote-peer-text: #bca2a9;
    --y-chip-bg: #221a1e;
    --y-chip-stroke: #3d2d33;
    --y-chip-text: #e8ccd5;
    --y-control-bar: #161014;
    --y-placeholder: #2e2328;
    --y-notice-bg: rgba(66, 50, 57, .96);
    --y-badge: #ff5c5c;
    --y-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --y-shadow-pop: 0 12px 34px rgba(0, 0, 0, .55);
    --y-overlay: rgba(0, 0, 0, .55);
  }
}

/* ---------------- 页面内对话框（替代浏览器自带的 confirm / prompt / alert） ---------------- */

dialog.ui-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  transform: none;
  width: min(360px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--y-surface);
  color: var(--y-text);
  box-shadow: var(--y-shadow-pop);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
dialog.ui-dialog[open] { display: flex; flex-direction: column; animation: ui-dialog-in .16s ease-out; }
dialog.ui-dialog::backdrop { background: var(--y-overlay); }
@keyframes ui-dialog-in { from { opacity: 0; transform: scale(.96); } }

.ui-dialog-body {
  min-height: 0;
  overflow-y: auto;
  padding: 22px 20px 18px;
  text-align: center;
}
.ui-dialog-title { margin: 0 0 14px; font-size: 18px; line-height: 1.4; }
.ui-dialog-text { font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-dialog-media img {
  display: block;
  max-width: 100%;
  max-height: min(46vh, 360px);
  margin: 0 auto 14px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--y-surface-alt);
}
.ui-dialog-field {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 9px 11px;
  border: 1px solid var(--y-line);
  border-radius: 9px;
  background: var(--y-bar);
  color: var(--y-text);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  outline: 0;
  box-sizing: border-box;
}
textarea.ui-dialog-field { min-height: 108px; resize: vertical; }
.ui-dialog-field:focus { border-color: var(--y-primary); background: var(--y-surface); }
.ui-dialog-field::placeholder { color: var(--y-text3); }
.ui-dialog-count { margin-top: 5px; font-size: 12px; color: var(--y-text3); text-align: right; }
.ui-dialog-count.over { color: var(--y-danger); }

.ui-dialog-foot { display: flex; flex: none; border-top: 1px solid var(--y-line); }
.ui-dialog-foot button {
  flex: 1;
  min-width: 0;
  padding: 14px 10px;
  border: 0;
  background: none;
  color: var(--y-text);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.ui-dialog-foot button + button { border-left: 1px solid var(--y-line); }
.ui-dialog-foot button:hover { background: var(--y-hover); }
.ui-dialog-foot button:active { background: var(--y-pressed); }
.ui-dialog-foot button:focus-visible { outline: 2px solid var(--y-primary); outline-offset: -2px; }
.ui-dialog-foot .primary { color: var(--y-primary-text); font-weight: 600; }
.ui-dialog-foot .danger { color: var(--y-danger); font-weight: 600; }
.ui-dialog-foot button:disabled { opacity: .45; cursor: default; }

/* ---------------- 往上翻时来了新消息：「↓ N 条新消息」 ---------------- */

/* 横向居中：不压在左边她的气泡或右边自己的气泡上 */
.new-msg-pill {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border: 1px solid var(--y-line);
  border-radius: 999px;
  background: var(--y-surface);
  color: var(--y-primary-text);
  box-shadow: var(--y-shadow-pop);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  animation: ui-pill-in .18s ease-out;
}
.new-msg-pill[hidden] { display: none; }
.new-msg-pill:hover { background: var(--y-hover); }
@keyframes ui-pill-in { from { opacity: 0; transform: translateY(6px); } }

/* 登录页右上角的语言切换「中文 / English」（PD-CLIENT-018）：颜色跟着登录页走 */
.gate-lang { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 16px; z-index: 2; display: flex; gap: 2px; font-size: 13px; line-height: 1; }
.gate-lang[hidden] { display: none; }
.gate-lang [data-lang] { padding: 7px 11px; border-radius: 999px; color: inherit; opacity: .72; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.gate-lang [data-lang]:hover, .gate-lang [data-lang]:focus-visible { opacity: 1; }
.gate-lang [data-lang][aria-pressed="true"] { opacity: 1; font-weight: 600; background: rgba(127, 127, 127, .16); }
.gate-lang [data-lang][hidden] { display: none; }

/* 日文版（PD-CLIENT-018）：web/i18n.js 给 <html> 设 lang="ja"。中文字体里的汉字字形和日文不一样，日文界面先用日文字体 */
html[lang="ja"] body,
html[lang="ja"] .ui-dialog {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, sans-serif;
}

/* 登录后选语言（I18n.choose）：一种语言一行，选中的带底色和对勾 */
.lang-choices { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.lang-choices-note { margin: 0 0 4px; font-size: 13px; line-height: 1.6; color: var(--y-text2); text-align: center; white-space: pre-line; }
.lang-choice { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 14px; border: 1px solid var(--y-line); border-radius: 10px; background: var(--y-surface); color: var(--y-text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.lang-choice:hover { background: var(--y-hover); }
.lang-choice:focus-visible { outline: 2px solid var(--y-primary); outline-offset: 1px; }
.lang-choice[aria-checked="true"] { border-color: var(--y-primary); background: var(--y-primary-soft); color: var(--y-primary-text); font-weight: 600; }
.lang-choice[aria-checked="true"]::after { content: "✓"; }

/* 账号安全（web/account-security.js，PD-ACCT-013～PD-ACCT-016）：表单框每个输入框上面写清楚填什么，「账号与安全」一项一行 */
.sec-dialog .ui-dialog-body { text-align: left; }
.sec-dialog .ui-dialog-title { text-align: center; }
.sec-note { font-size: 14px; line-height: 1.6; color: var(--y-text2); }
.sec-note[hidden] { display: none; }
.sec-field { display: block; margin-top: 14px; }
.sec-field > span { display: block; font-size: 13px; color: var(--y-text2); }
.sec-field .ui-dialog-field { margin-top: 6px; }
.sec-err { min-height: 18px; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--y-danger); }
.sec-link { display: block; margin: 2px auto 0; padding: 4px 6px; border: 0; background: none; color: var(--y-primary-text); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.sec-link:disabled { color: var(--y-text3); text-decoration: none; cursor: default; }
.sec-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--y-line); }
.sec-row-main { flex: 1; min-width: 0; }
.sec-row-main b { display: block; font-size: 15px; font-weight: 600; }
.sec-row-main small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--y-text2); overflow-wrap: anywhere; }
.sec-row-actions { display: flex; flex: none; gap: 6px; }
.sec-row-actions button { padding: 6px 12px; border: 1px solid var(--y-line); border-radius: 999px; background: var(--y-surface); color: var(--y-primary-text); font: inherit; font-size: 13.5px; cursor: pointer; }
.sec-row-actions button:hover { background: var(--y-hover); }
.sec-row-actions button.danger { color: var(--y-danger); }
.sec-tip { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--y-text3); }

/* 玩法介绍（web/guide.js，PD-CLIENT-022）：沿用 .ui-dialog；标题居中，正文左对齐，长了在框里滚，「知道了」一直在底部 */
dialog.ui-dialog:has(.guide-full) { width: min(460px, calc(100vw - 32px)); }
.guide { text-align: left; }
.guide-heading { margin: 18px 0 6px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--y-primary-text); }
.guide-heading:first-child { margin-top: 2px; }
.guide-list { margin: 0; padding-left: 1.2em; }
.guide-list li { margin: 5px 0; font-size: 14.5px; line-height: 1.6; color: var(--y-text); overflow-wrap: anywhere; }
.guide-list li::marker { color: var(--y-text3); }
.guide-quick .guide-list li { margin: 8px 0; }
.guide-more { display: block; margin: 14px auto 0; padding: 4px 8px; border: 0; background: none; color: var(--y-primary-text); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }