/* ==========================================================================
   牌局顾问 · 问答界面
   ==========================================================================

   移动优先。使用者主要用手机扫码进来问问题，所以：

     1. 单列布局，没有侧栏——那些是开发/评审视角的东西，玩家不需要
     2. 高度用 100dvh 而不是 100vh：手机浏览器地址栏收放时，
        vh 不会跟着变，输入框会被顶到屏幕外
     3. 四边留 safe-area：刘海屏、圆角屏、底部手势条上不让内容被切
     4. 任何地方都不允许横向溢出（见文件末尾的溢出兜底）

   工具调用行的样式在 dsh-toolrow.css（移植自 DSH 的 ToolRow）；
   轮次时间线（.ar-*）也定义在那里，这里只补充页面级的外观。
   ========================================================================== */

:root {
  --bg: #0b1016;
  --bg-soft: #111923;
  --panel: #17232c;
  --panel-2: #1d2c35;
  --line: #2d4149;
  --text: #f2eee5;
  --text-dim: #a6b2b4;
  --text-faint: #718083;
  --accent: #e7b85c;
  --accent-2: #f5d98e;
  --red: #ed6c61;
  --blue: #78b7b3;
  --green: #69c49b;
  --shadow: 0 20px 60px rgba(0, 0, 0, .34);
  --r: 12px;
  /* 悬浮条的尺寸，消息区要按它留出上下空间 */
  --float-gap: 10px;
  --float-radius: 20px;
  --topbar-space: 74px;
  --composer-space: 96px;
  --bg-glow:
    radial-gradient(circle at 78% 5%, rgba(61, 110, 101, .18), transparent 29rem),
    radial-gradient(circle at 5% 90%, rgba(168, 83, 71, .1), transparent 23rem);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  /* 防止 iOS 横屏/输入框聚焦时自动放大字号 */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-glow), var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  /* 输入框聚焦、滚动到头时的回弹会露出白边 */
  overscroll-behavior: none;
}

button, input, select { font-family: inherit; font-size: inherit; color: inherit; }

/* hidden 的语义修正：任何显式 display 都会盖过它 */
[hidden] { display: none !important; }

/* ============================== 整体布局 ============================== */

/* .app 本身是滚动容器。
   入场动画需要一个"滚动行程"，但对话区自己也要能滚——两层滚动在手机上会打架。
   所以拆开：.app 负责入场那一段滚动，.chat 负责消息滚动，
   并且给 .chat 加 overscroll-behavior: contain，防止消息滚到头时把滚动传给外层
   （否则消息滚到底会顺手把牌盒又滑回来）。 */
.app {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ---------- 入场：扑克牌盒 ---------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5dvh;
  padding: calc(14px + env(safe-area-inset-top)) 20px calc(14px + env(safe-area-inset-bottom));
  will-change: opacity;
}

/* 牌与字直接摆在背景上，不画外框——
   用户那张草图里手绘的方框是【手机屏幕】的示意，不是要渲染的元素。 */
.deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(5dvh, 44px);
  width: 100%;
}

.deck-title {
  font-family: Georgia, 'Songti SC', 'Songti TC', serif;
  font-weight: 700;
  font-size: clamp(52px, 17vw, 96px);
  line-height: 1;
  color: var(--accent-2);
  letter-spacing: .14em;
  text-indent: .14em;          /* letter-spacing 会在末字后留白，用缩进抵消 */
  text-shadow: 0 6px 26px rgba(231, 184, 92, .3);
  will-change: transform;
}

.deck-cards {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: min(30dvh, 260px);
}
.deck-card {
  position: absolute;
  /* 没有外框约束了，牌可以大一些。
     注意 translateX(%) 是相对【元素自身宽度】的，不是容器宽度——
     按容器算位移会严重偏小（踩过：以为分开了，实际还叠着 88px）。 */
  width: min(36vw, 140px);
  height: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .55);
  will-change: transform;
}

/* "往下滑"提示 */
.scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 12.5px; color: var(--text-faint);
  letter-spacing: .18em;
  will-change: opacity;
}
.hint-arrow { font-size: 17px; color: var(--accent); animation: hintBob 1.5s ease-in-out infinite; }
@keyframes hintBob { 0%, 100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(5px); opacity: 1 } }

/* ---------- 对话层：初始在视口下方 ---------- */

.chatwrap {
  position: fixed;
  inset: 0;
  z-index: 3;
  background: var(--bg-glow), var(--bg);   /* 不透明，否则上浮时会透出牌盒 */
  transform: translateY(100%);
  will-change: transform;
}

/* 滚动行程：只提供距离，不渲染东西 */
.scroll-driver { height: 160dvh; }

/* ============================== 顶栏 ============================== */

/* 悬浮胶囊：不给它画通栏分割线——那条线会把界面切成两块，很廉价。
   改成半透明 + 毛玻璃 + 圆角 + 阴影，消息从它下面滚过去。 */
.topbar {
  position: absolute;
  top: calc(var(--float-gap) + env(safe-area-inset-top));
  left: var(--float-gap);
  right: var(--float-gap);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px 9px 13px;
  border-radius: var(--float-radius);
  border: .5px solid rgba(255, 255, 255, .08);
  background: rgba(22, 30, 38, .66);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .34);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  position: relative; flex: none;
  width: 26px; height: 30px;
  display: grid; place-items: center;
  color: var(--accent); font-size: 21px;
}
.brand-suit { position: absolute; left: 0; top: -4px; }
.brand-card-mini {
  position: absolute; right: -2px; bottom: -1px;
  width: 15px; height: 19px; border-radius: 3px;
  display: grid; place-items: center;
  background: #f7f1dd; color: #b0473e;
  font: 800 10px Georgia, serif;
  box-shadow: 1px 2px 0 rgba(0, 0, 0, .2);
}
.brand-title {
  font-family: Georgia, 'Songti SC', serif;
  font-size: 16px; font-weight: 700; letter-spacing: .3px;
  color: #fffaf0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar-right { display: flex; align-items: center; gap: 6px; flex: none; }

/* 触控目标不小于 34px——低于这个尺寸手指点不准 */
.icon-btn {
  flex: none;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(23, 35, 44, .9);
  border: 1px solid #2c4148;
  border-radius: 9px;
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn:disabled { opacity: .4; cursor: default; }
/* 朗读开启时给个常亮的边框，顶栏没有文字标签可看 */
.icon-btn[data-on="1"] { border-color: var(--accent); color: var(--accent); background: rgba(231, 184, 92, .1); }

/* ============================== 对话区 ============================== */

/* 消息区铺满整个对话层，上下留出悬浮条的空间。
   这样消息是从顶栏/输入条【下面】滚过去的，不是被夹在两条横杠中间。 */
.chat {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;   /* 滚到头也不把滚动传给外层，否则牌盒会滑回来 */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: calc(var(--topbar-space) + env(safe-area-inset-top)) 14px
           calc(var(--composer-space) + env(safe-area-inset-bottom));
}

/* ============================== 欢迎页 ============================== */

.welcome { margin: auto 0; text-align: center; padding: 8px 4px 20px; }
.welcome-lead { color: var(--text-dim); font-size: 14.5px; }

.chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 7px; margin-top: 20px;
}
.chip {
  font-size: 12.5px; color: var(--text-dim);
  background: rgba(23, 35, 44, .82);
  border: 1px solid #2c4148;
  border-radius: 999px;
  padding: 8px 13px;
  cursor: pointer; transition: .15s;
  -webkit-tap-highlight-color: transparent;
  max-width: 100%; overflow-wrap: anywhere;
}
.chip:hover, .chip:active {
  color: var(--accent-2); border-color: var(--accent);
  background: rgba(231, 184, 92, .09);
}

/* ============================== 消息 ============================== */

.msg { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.msg.user { align-items: flex-end; }
.msg.ai { align-items: stretch; }

.bubble {
  border-radius: 15px;
  padding: 11px 14px;
  line-height: 1.75;
  font-size: 14.5px;
  /* 长英文、长 URL、连续数字都要能断行，否则会撑破气泡 */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.msg.user .bubble {
  max-width: 84%;
  background: rgba(110, 177, 175, .16);
  border: 1px solid rgba(120, 183, 179, .34);
  border-bottom-right-radius: 5px;
}
.msg.ai .bubble {
  background: rgba(23, 35, 44, .92);
  border: 1px solid #2f464d;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
  border-bottom-left-radius: 5px;
}
.msg.user img.thumb { max-width: 100%; border-radius: 9px; margin-bottom: 6px; display: block; }

/* 反问 */
.bubble.clarify { border-color: rgba(231, 184, 92, .4); background: rgba(231, 184, 92, .07); }
.q-title { font-weight: 700; color: var(--accent-2); margin-bottom: 7px; }
.q-item { font-size: 13.5px; line-height: 1.7; }

/* ---------- 牌面图 ---------- */

/* 提牌的"特殊渲染"。
   像行内代码那样给个浅色底框，让它在整段文字里一眼可辨——
   读者扫一眼就知道"这里是具体某张牌/某个牌型"，不用逐字读。
   底色用强调金的低透明度，和牌面图的暖色是一套。 */
.card-mention {
  display: inline;
  padding: 1px 5px;
  margin: 0 1px;
  border-radius: 7px;
  background: rgba(231, 184, 92, .1);
  box-shadow: inset 0 0 0 .5px rgba(231, 184, 92, .24);
  color: var(--accent-2);
}
.card-inline-wrap {
  display: inline-flex; flex-wrap: wrap;      /* 一次提到很多张时允许换行，不撑破气泡 */
  gap: 2px; align-items: center;
  vertical-align: middle;
  max-width: 100%;
}
.card-fig { margin: 0; text-align: center; }
.card-fig figcaption { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }

.card-img {
  width: 46px; border-radius: 5px; background: #fff;
  border: 1px solid #d4c9ac; display: block;
}
.card-inline {
  height: 26px; width: auto;
  vertical-align: -7px;
  margin: 0 2px 0 3px;
  border-radius: 3px; background: #fff;
  border: 1px solid #d4c9ac;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* 没被正文提到的牌，兜底排在下面；能换行 */
.cards-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}

/* 可点击放大 */
img[data-large] { cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
img[data-large]:hover { border-color: var(--accent); }
.card-inline[data-large]:hover { box-shadow: 0 2px 8px rgba(242, 181, 68, .35); }

/* ---------- 引用与策略 ---------- */

.citations { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.citation {
  font-size: 12.5px; line-height: 1.7; color: var(--text-dim);
  background: rgba(23, 35, 44, .8);
  border: 1px solid #2c4148;
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  padding: 9px 11px;
  overflow-wrap: anywhere;
}
.citation b { color: var(--accent-2); }

/* ---------- 元信息 ---------- */

.meta-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pill {
  font-size: 10.5px; line-height: 18px;
  padding: 0 9px; border-radius: 999px;
  background: rgba(23, 35, 44, .9);
  border: 1px solid #2c4148;
  color: var(--text-faint);
  white-space: nowrap;
}
.pill.good { color: var(--green); border-color: rgba(105, 196, 155, .35); }
.pill.warn { color: var(--accent); border-color: rgba(231, 184, 92, .35); }

/* 记忆更新时的系统提示：一行小字，不占地方 */
.sys-note {
  align-self: center;
  font-size: 11.5px; color: var(--text-faint);
  background: rgba(23, 35, 44, .7);
  border: 1px solid #24363d;
  border-radius: 999px;
  padding: 4px 12px;
  max-width: 100%; overflow-wrap: anywhere;
  text-align: center;
}

/* ============================== 输入区 ============================== */

/* 输入条同样是悬浮胶囊，去掉通栏顶边线 */
.composer {
  position: absolute;
  bottom: calc(var(--float-gap) + env(safe-area-inset-bottom));
  left: var(--float-gap);
  right: var(--float-gap);
  z-index: 5;
  padding: 6px 6px 6px 8px;
  border-radius: var(--float-radius);
  border: .5px solid rgba(255, 255, 255, .08);
  background: rgba(22, 30, 38, .66);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .34);
}

/* 胶囊内部不再画第二层框——两层边框叠在一起很脏 */
.composer-row {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
}
/* 输入框必须能收缩，否则会把这个行撑宽 */
.composer-row #input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: none;
  padding: 10px 6px;
  font-size: 16px;   /* 低于 16px 时 iOS 聚焦会自动放大页面，把布局顶乱 */
}
.composer-row #input::placeholder { color: var(--text-faint); }

.btn {
  font-size: 13px; cursor: pointer; border-radius: 10px;
  border: 1px solid #30464d; background: #1a2a32; color: var(--text);
  padding: 9px 14px;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap; flex: none;
}
.btn-primary {
  background: linear-gradient(135deg, #f2d183, #cf9743);
  color: #22190c; border-color: transparent;
  font-weight: 700;
  box-shadow: 0 7px 18px rgba(207, 151, 67, .18);
}
.btn-primary:disabled { opacity: .5; cursor: default; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }

.composer-hint { font-size: 10.5px; color: #6e8082; margin-top: 6px; padding-left: 8px; }

/* 待发送图片预览 */
.attach-preview { position: relative; display: inline-block; margin-bottom: 8px; }
.attach-preview img { max-height: 76px; max-width: 100%; border-radius: 9px; display: block; border: 1px solid #334b52; }
.attach-remove {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff; border: 2px solid var(--bg-soft);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
}

/* ============================== 牌面放大 ============================== */

.lightbox {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 18, .85);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
  animation: lb-in .14s ease-out;
}
@keyframes lb-in { from { opacity: 0 } to { opacity: 1 } }

.lightbox figure {
  margin: 0; padding: 16px;
  display: flex; flex-direction: column; align-items: center;
  max-width: 100%; max-height: 100%;
}
.lightbox img {
  /* 竖长条的牌按视口高度定尺寸；同时限宽，横屏也不会溢出 */
  height: min(74vh, 74dvh, 720px);
  width: auto; max-width: 88vw;
  border-radius: 12px; background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  animation: lb-pop .16s ease-out;
}
@keyframes lb-pop { from { transform: scale(.94) } to { transform: scale(1) } }

.lightbox figcaption {
  margin-top: 12px; font-size: 13px; color: var(--text);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
}
.lb-hint { font-size: 11px; color: var(--text-faint); }

body.lightbox-open { overflow: hidden; }

/* ============================== 大屏微调 ============================== */

/* 手机上不显示滚动条；桌面端给一条细的 */
@media (min-width: 720px) {
  ::-webkit-scrollbar { width: 9px; }
  ::-webkit-scrollbar-thumb { background: #2b3a4d; border-radius: 5px; }
  ::-webkit-scrollbar-thumb:hover { background: #3a4d68; }
  ::-webkit-scrollbar-track { background: transparent; }

  /* 大屏把对话收窄居中，一行太长不好读 */
  .chat { padding: 24px max(16px, calc((100% - 720px) / 2)); gap: 20px; }
  .composer { padding-left: max(12px, calc((100% - 720px) / 2)); padding-right: max(12px, calc((100% - 720px) / 2)); }
}

/* 很窄的屏幕（iPhone SE 一代 320px）：再压一压 */
@media (max-width: 360px) {
  .brand-title { font-size: 14px; }
  .icon-btn { width: 32px; height: 32px; }
  .bubble { font-size: 14px; padding: 10px 12px; }
  .msg.user .bubble { max-width: 90%; }
  .card-inline { height: 23px; }
  .chip { font-size: 12px; padding: 7px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   横向溢出兜底
   ==========================================================================
   手机上最烦的就是"整页能左右拖"。上面每处都单独防了（输入框 min-width:0、
   气泡 overflow-wrap、牌图 flex-wrap、选择框 max-width），这里再加一道总闸：
   任何直接子元素都不许超过容器宽度。

   故意不用 `* { max-width: 100% }` —— 那会把绝对定位和 flex 布局一起搞坏。 */
.app > *, .chatwrap > * { max-width: 100vw; }
.chat > *, .msg > *, .bubble > * { min-width: 0; }
img, svg, video { max-width: 100%; }

/* ==========================================================================
   失败提示
   失败不该只甩一行原始报错——要给"发生了什么 + 该怎么办 + 一个重试按钮"。
   ========================================================================== */

.ar-fail {
  margin: 10px 0 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(237, 108, 97, .08);
  border: 1px solid rgba(237, 108, 97, .3);
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
}
.fail-title { font-size: 13.5px; font-weight: 700; color: var(--red); }
.fail-hint { font-size: 12.5px; line-height: 1.65; color: var(--text-dim); }

.fail-detail { font-size: 11.5px; color: var(--text-faint); }
.fail-detail summary { cursor: pointer; }
.fail-detail code {
  display: block; margin-top: 5px; padding: 6px 8px;
  background: rgba(0, 0, 0, .28); border-radius: 6px;
  font-size: 11px; line-height: 1.5;
  overflow-wrap: anywhere; white-space: pre-wrap;
}

.fail-retry {
  margin-top: 3px;
  padding: 7px 18px;
  background: rgba(237, 108, 97, .16);
  border-color: rgba(237, 108, 97, .5);
  color: #ffd9d5;
  font-weight: 700;
}
.fail-retry:hover { background: rgba(237, 108, 97, .26); }

/* 服务端的进行中提示（模型重试之类），语气是"说明"不是"报错" */
.ar-notice {
  margin: 8px 0 0;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12px; line-height: 1.6;
  color: var(--accent-2);
  background: rgba(231, 184, 92, .08);
  border: 1px solid rgba(231, 184, 92, .22);
}

/* 结束会话是破坏性操作，二次确认时用警示色 */
.icon-btn-danger {
  border-color: var(--red) !important;
  color: var(--red) !important;
  background: rgba(237, 108, 97, .12) !important;
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================================================
   操作面板（仿 iOS 的底部 action sheet）
   ========================================================================== */

.sheet-mask {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(6, 10, 14, .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: sheet-fade .16s ease-out;
}
@keyframes sheet-fade { from { opacity: 0 } to { opacity: 1 } }

.sheet {
  display: flex; flex-direction: column;
  gap: 8px;
  animation: sheet-rise .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes sheet-rise { from { transform: translateY(14px); opacity: .5 } to { transform: none; opacity: 1 } }

.sheet-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 16px;
  border-radius: 16px;
  border: .5px solid rgba(255, 255, 255, .08);
  background: rgba(30, 39, 48, .82);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, background .12s;
  text-align: center;
}
.sheet-item:active { transform: scale(.98); background: rgba(40, 51, 62, .9); }

.sheet-title { font-size: 15.5px; font-weight: 600; }
.sheet-sub { font-size: 12px; color: var(--text-faint); line-height: 1.5; }

.sheet-item.danger .sheet-title { color: var(--red); }

.sheet-item.cancel {
  margin-top: 2px;
  font-size: 15.5px; font-weight: 600;
  padding: 15px 16px;
  background: rgba(22, 30, 38, .92);
}