/* 安住（anzhu）—— 日常陪伴页
 *
 * 视觉纪律：这一页**故意和站内其他页不一样**。
 *   站内其他页是「判词页」：档案带、盘面卡、证据链、金色强调 —— 都在告诉用户
 *   「这里在给你一个关于你的判断」。安住不能那样：用户进来时情绪是低的，
 *   再摆一屏盘面和术语，等于把他推回「被审视」的位置。
 * 所以这一页：
 *   · 只有一个消息流 + 一个输入框，没有任何图表、盘面、术语、徽标；
 *   · 全页唯一强调色 = 青绿 --accent（站青绿），
 *     不用金色（金色在站内是「断语」的颜色），不用朱砂（那是警示）；
 *   · 正文行高放到 1.9、字号 16.5px——陪伴页的可读性优先于信息密度；
 *   · 气泡刻意做得**不像聊天软件**（无头像、无时间戳、无已读），
 *     它要像一个安静的房间，不是一个 IM。
 *
 * 头部契约（AGENTS.md §全站导航栏标准）：新页只报 --nav-ground / --nav-a-top/mid，
 * 其余由 header-v2.css 提供。本页地面色取 --bg（#efeee7）。
 */

body[data-page="anzhu"] {
  --nav-ground: 239, 238, 231;   /* = #efeee7，照地面色取的整数值 */
  --nav-a-top: 0.92;
  --nav-a-mid: 0.86;
}

.az-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 96px;
}

/* ---------------------------------------------------------------- 头部 */

.az-head {
  padding: 44px 0 30px;
  text-align: center;
}

.az-head h1 {
  font-family: "Noto Serif SC", Songti SC, SimSun, serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.26em;          /* 抵消字距造成的右侧空档，让标题视觉居中 */
  color: var(--ink);
  margin: 0 0 14px;
}

.az-sub {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 18px;
}

.az-note {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-tertiary);
  margin: 0;
}

/* 「这里到底是干什么的」——用户第一次进来最需要的三句话。
   左对齐、带浅色分隔，像一张说明卡而不是居中排的宣传语：
   居中会读成口号，左对齐才读成说明。不用图标不用色块，避免又变成一屏装饰。 */
.az-what {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  text-align: left;
  border-top: 1px solid var(--line);
}

.az-what li {
  position: relative;
  padding: 13px 4px 13px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-secondary);
}

/* 用一枚小圆点当行首，而不是图标——这一页不该出现任何徽标 */
.az-what li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 21px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

/* 标签独占行首：inline 的 <b> 与紧随其后的正文之间没有天然停顿，
   「就是说说今天怎么样」会连读成一句（实测连读）。做成 inline-block
   并给右外边距，标签才读得出是标签。 */
.az-what b {
  display: inline-block;
  min-width: 4.6em;
  color: var(--text-primary);
  font-weight: 600;
  margin-right: 2px;
}

/* ---------------------------------------------------------------- 未登录 */

.az-gate {
  margin: 30px auto 0;
  max-width: 460px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 30px 26px;
}

.az-gate p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-secondary);
  margin: 0 0 20px;
}

/* ---------------------------------------------------------------- 会话列表 */

.az-sessions {
  margin: 4px 0 26px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.az-sessions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.az-session-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.az-session-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.az-session-list li:hover {
  background: var(--surface-soft);
}

.az-session-list li.is-cur {
  background: var(--accent-soft);
}

.az-s-title {
  font-size: 14.5px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.az-s-meta {
  flex: none;
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.az-s-del {
  flex: none;
  border: 0;
  background: none;
  color: var(--text-disabled);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.az-s-del:hover {
  color: var(--cinnabar);
  background: var(--cinnabar-soft);
}

/* ---------------------------------------------------------------- 对话区 */

.az-room {
  margin-top: 6px;
}

/* 空态招呼：不是气泡，是这间屋子开口说的第一句。
   所以它没有气泡底色，字号略大、颜色更实，像有人在对面轻声开口。 */
.az-opening {
  font-size: 19px;
  line-height: 1.9;
  color: var(--text-primary);
  margin: 4px 0 0;
  padding-left: 2px;
}

.az-stream {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 160px;
  padding: 8px 0 26px;
}

.az-msg {
  font-size: 16.5px;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 用户的话：靠右、有气泡，但用的是纸面色而不是品牌色——
   不让用户在「被安慰」时还看到自己说的话带着强调色。 */
.az-msg.is-user {
  align-self: flex-end;
  max-width: 84%;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px 14px 4px 14px;
  padding: 12px 16px;
  color: var(--text-primary);
}

/* 安住的话：无气泡、无头像，就是一段安静的文字。 */
.az-msg.is-ai {
  align-self: flex-start;
  max-width: 94%;
  color: var(--text-primary);
  padding-left: 2px;
}

/* 危机回复：比其他消息更明确地「被框起来」，因为它是固话术不是闲聊。 */
.az-msg.is-crisis {
  align-self: stretch;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 15.5px;
  line-height: 1.95;
}

.az-msg.is-crisis strong {
  color: var(--ink);
}

/* 等待态：三点，不用「正在输入…」这种 IM 词。 */
.az-wait {
  align-self: flex-start;
  display: inline-flex;
  gap: 5px;
  padding: 6px 2px;
}

.az-wait i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
  animation: az-blink 1.3s infinite ease-in-out;
}

.az-wait i:nth-child(2) { animation-delay: 0.18s; }
.az-wait i:nth-child(3) { animation-delay: 0.36s; }

@keyframes az-blink {
  0%, 60%, 100% { opacity: 0.28; }
  30% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .az-wait i { animation: none; opacity: 0.5; }
}

/* ---------------------------------------------------------------- 输入 */

.az-compose {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(239, 238, 231, 0) 0%, rgba(239, 238, 231, 0.96) 22%);
  padding: 14px 0 10px;
}

.az-compose textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  resize: none;
  outline: none;
}

.az-compose textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.az-compose textarea::placeholder {
  color: var(--text-disabled);
}

.az-compose-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

/* 键盘提示靠左、按钮靠右：两个按钮本来被 justify-content:space-between
   推到最两边，中间空一大块，看着像没排完版。加一条提示把这一行填满，
   同时它本身有用（桌面端 Enter 直接发送，移动端软键盘不劫持）。 */
.az-compose-hint {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-disabled);
}

/* ---------------------------------------------------------------- 按钮 */

.az-btn {
  font-family: inherit;
  font-size: 15px;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.az-btn-main {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}

.az-btn-main:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.az-btn-main:disabled {
  background: var(--line);
  border-color: var(--line);
  color: var(--text-disabled);
  cursor: default;
}

.az-btn-ghost {
  background: none;
  color: var(--text-secondary);
  border-color: var(--line-strong);
}

.az-btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--line-strong-hover);
}

/* ---------------------------------------------------------------- 页脚 */

.az-foot {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-tertiary);
  margin: 6px 0 0;
}

.az-hotline {
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- 危机弹层 */

.az-crisis {
  border: 0;
  padding: 0;
  background: none;
  max-width: 560px;
  width: calc(100% - 32px);
}

.az-crisis::backdrop {
  background: rgba(24, 35, 42, 0.42);
}

.az-crisis-inner {
  background: var(--surface);
  border-radius: 16px;
  padding: 26px 24px 20px;
  box-shadow: 0 10px 40px var(--shadow-color-lg);
}

.az-crisis-body {
  font-size: 15.5px;
  line-height: 2;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.az-crisis-body strong {
  color: var(--ink);
}

.az-crisis-inner .az-btn {
  display: block;
  margin: 20px auto 0;
}

/* ---------------------------------------------------------------- 移动端 */

@media (max-width: 720px) {
  .az-main { padding: 0 16px 84px; }
  .az-head { padding: 30px 0 22px; }
  .az-head h1 { font-size: 26px; }
  .az-msg { font-size: 16px; }
  .az-msg.is-user { max-width: 88%; }
  .az-msg.is-ai { max-width: 100%; }
  /* 移动端不劫持 Enter（软键盘的换行更常用），所以这条提示在手机上不成立，
     必须藏掉——写出来就等于骗用户按了没反应。 */
  .az-compose-hint { display: none; }
  .az-opening { font-size: 17.5px; }
  /* 提示藏了以后这一行要重新靠右 */
  .az-compose-row { justify-content: flex-end; }
}