/* DSH 手机遥控 — 视觉层
   意图：收到提醒后单手找会话/答问题，安静的遥控器，不做仪表盘。
   纸白/墨黑/石灰为面，绿与琥珀只表状态；边框分层，不用大阴影。 */

:root {
  color-scheme: light;
  /* 纸白三层 */
  --paper: #f5f1e8;
  --paper-raise: #fcf9f2;
  --paper-inset: #ece7da;
  /* 墨黑四级文本 */
  --ink: #20251f;
  --ink-2: #4f554b;
  --ink-3: #6a7063;
  --ink-mute: #687063;
  /* 石灰边框梯度 */
  --line: rgba(32, 37, 31, 0.16);
  --line-soft: rgba(32, 37, 31, 0.09);
  --line-strong: rgba(32, 37, 31, 0.28);
  /* 状态色（只表状态） */
  --ok: #3f5b47;
  --ok-soft: rgba(63, 91, 71, 0.12);
  --amber: #93462f;
  --amber-soft: rgba(147, 70, 47, 0.10);
  --amber-dot: #9b6d1f;
  --error: #a74d36;
  --attention: #9b6d1f;
  --focus-ring: rgba(32, 37, 31, 0.45);
  --on-accent: #fcf9f2;
  /* 控件 */
  --control: #fcf9f2;
  --control-border: rgba(32, 37, 31, 0.18);
  /* 气泡：助手下左、本人下右 */
  --bubble-agent-bg: #fcf9f2;
  --bubble-agent-border: #d9d3c4;
  --bubble-user-bg: #3f5b47;
  --bubble-user-border: #334b3b;
  --bubble-user-ink: #fcf9f2;
  --event-ink: #5f655a;
  --shadow: rgba(32, 37, 31, 0.08);
  --overlay: rgba(24, 28, 23, 0.44);
  /* 字号 */
  --fs-body: 16px;
  --fs-meta: 13px;
  --fs-title: 17px;
  /* 间距基 4px */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --r-s: 8px; --r-m: 12px; --r-full: 999px;
  --strip-h: 30px;
}

/* 夜间：表面压暗，文本/状态色提高亮度；所有组件只经变量取色。 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #191d18;
  --paper-raise: #232822;
  --paper-inset: #2c332b;
  --ink: #ece6d9;
  --ink-2: #c3bdae;
  --ink-3: #a9a99a;
  --ink-mute: #b3b3a5;
  --line: rgba(236, 230, 217, 0.16);
  --line-soft: rgba(236, 230, 217, 0.10);
  --line-strong: rgba(236, 230, 217, 0.30);
  --ok: #a6c7ad;
  --ok-soft: rgba(166, 199, 173, 0.16);
  --amber: #e7a48e;
  --amber-soft: rgba(231, 148, 116, 0.16);
  --amber-dot: #e0bb6a;
  --error: #e78f74;
  --attention: #e0bb6a;
  --focus-ring: rgba(236, 230, 217, 0.55);
  --on-accent: #101310;
  --control: #232822;
  --control-border: rgba(236, 230, 217, 0.22);
  --bubble-agent-bg: #232822;
  --bubble-agent-border: #3b4237;
  --bubble-user-bg: #39503f;
  --bubble-user-border: #4d6b55;
  --bubble-user-ink: #f2f3ea;
  --event-ink: #b3ad9f;
  --shadow: rgba(0, 0, 0, 0.40);
  --overlay: rgba(0, 0, 0, 0.62);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "MiSans", "HONOR Sans CN", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body { height: 100dvh; overflow: hidden; }

.app {
  max-width: 640px;
  margin: 0 auto;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.noscript { padding: var(--s6); }

/* ---------- 顶栏：返回 + 两层导航 ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s1);
  min-height: 52px;
  padding: calc(env(safe-area-inset-top) + var(--s1)) var(--s3) var(--s1);
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}

.topbar--session {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--s1);
}
.topbar--session .topbar__titles { text-align: center; min-width: 0; align-items: center; }
.topbar--session .topbar__meta { justify-content: center; width: 100%; }
.topbar__eyebrow {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-bottom: 1px;
}
.topbar__back {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin-left: calc(-1 * var(--s2));
  padding: 0 var(--s2);
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-body);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

/* 顶栏右侧按钮不换行：320px 窄屏也保持“刷新”完整可点。 */
.topbar > .btn { flex: 0 0 auto; white-space: nowrap; }

.topbar__titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.topbar__title {
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__meta {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px var(--s2);
  min-width: 0;
  overflow: hidden;
}

.topbar__meta > span { white-space: nowrap; }
.topbar__project { color: var(--ink-2); font-weight: 500; }

/* 会话模型入口：44px 触控；文案只读（模型名/“模型”），点击打开选择弹窗。 */
.topbar__model {
  flex: 0 1 auto;
  min-width: 44px;
  min-height: 44px;
  max-width: 46vw;
  padding: 0 var(--s2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-s);
  background: var(--control);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-meta);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  cursor: pointer;
}

.topbar__model {
  width: 44px;
  max-width: 44px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.topbar__model:active { background: var(--paper-inset); }
.topbar__model-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__model-icon { flex: 0 0 auto; color: var(--ink-3); }

.topbar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 明暗切换：图标显示当前状态（日/月），aria-pressed 同步；44px 触控。 */
.iconbtn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s2);
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.iconbtn:hover { background: var(--paper-inset); }
.iconbtn[aria-pressed="true"] { border-color: var(--line); background: var(--paper-inset); }

/* 原型：融入页面的线性图标按钮，不用描边方块。 */
.glyph {
  width: 21px;
  height: 21px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle {
  width: 44px;
  min-width: 44px;
  padding: 0;
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
}
.theme-toggle[aria-pressed="true"] {
  border-color: transparent;
  background: var(--paper-inset);
  color: var(--ok);
}
.theme-toggle .glyph { width: 22px; height: 22px; }
.topbar__model .glyph { width: 20px; height: 20px; }


/* ---------- 签名：本机实时状态细条 ---------- */

.strip {
  position: sticky;
  top: var(--topbar-h, calc(52px + env(safe-area-inset-top)));
  z-index: 19;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--strip-h);
  padding: var(--s1) var(--s4);
  background: var(--paper-inset);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.strip[hidden] { display: none; }

.strip__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-mute);
}

.strip--ok .strip__dot { background: var(--ok); }
.strip--ok { color: var(--ink-2); }

.strip--down .strip__dot { background: var(--amber-dot); }
.strip--down { color: var(--amber); }

.strip--busy .strip__dot {
  background: transparent;
  border: 2px solid var(--ink-3);
}

@media (prefers-reduced-motion: no-preference) {
  .strip--busy .strip__dot { animation: strip-pulse 1.2s ease-in-out infinite; }
  @keyframes strip-pulse { 50% { opacity: 0.25; } }
}

/* ---------- 主区 ---------- */

.view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 列表/配对页自身滚动；会话页由 .msgs 独立滚动，composer 固定。 */
.view[data-route="list"],
.view[data-route="pair"],
.view[data-route="loading"] {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.pad { padding: var(--s4); }

.hint { color: var(--ink-3); font-size: var(--fs-meta); }
.hint--center { text-align: center; padding: var(--s6) var(--s4); }

.notice {
  margin: var(--s3) var(--s4) 0;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--paper-raise);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.notice--error { border-color: var(--line-strong); color: var(--amber); background: var(--amber-soft); }
.notice--ok { color: var(--ok); background: var(--ok-soft); }

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

.btn {
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--control-border);
  border-radius: var(--r-s);
  background: var(--control);
  color: var(--ink);
  font-size: var(--fs-body);
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
}

.btn:active { background: var(--paper-inset); }

.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-raise);
}

.btn--primary:active { background: var(--ink-2); }

.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}

.btn--danger {
  border-color: var(--error);
  color: var(--error);
  background: var(--paper-raise);
}
.btn--danger:active { background: var(--amber-soft); }

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn.is-loading { cursor: progress; }

.btn .spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0.8;
}

@media (prefers-reduced-motion: no-preference) {
  .btn .spinner { animation: spin 0.9s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* ---------- 配对 ---------- */

.pair {
  padding: var(--s6) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.pair__title { font-size: 20px; font-weight: 600; margin: 0; }
.pair__desc { margin: 0; color: var(--ink-2); font-size: var(--fs-meta); }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.field__label { font-size: var(--fs-meta); font-weight: 500; color: var(--ink-2); }

.input, .textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--control-border);
  border-radius: var(--r-s);
  background: var(--control);
  color: var(--ink);
  font-size: var(--fs-body);
  font-family: inherit;
}

.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--line-strong);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.55;
}

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

.slist { display: flex; flex-direction: column; }

.srow {
  width: 100%;
  min-height: 64px;
  padding: var(--s3) var(--s4);
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.srow:active { background: var(--paper-inset); }

.srow__head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  min-width: 0;
}

.srow__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srow__time {
  flex: 0 0 auto;
  color: var(--ink-3);
  font-size: var(--fs-meta);
  white-space: nowrap;
}

.srow__excerpt {
  color: var(--ink-2);
  font-size: var(--fs-meta);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srow__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

.srow__project {
  color: var(--ink-3);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 var(--s2);
  border-radius: var(--r-full);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 12px;
  font-weight: 500;
}

/* 状态符号（列表/详情共用优先级；文字与符号同源） */
.state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-2);
  font-size: var(--fs-meta);
  white-space: nowrap;
}

.state__marker {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.state__marker--error { background: var(--error); }
.state__marker--pending {
  background: transparent;
  border: 2px solid var(--attention);
}
.state__marker--running {
  background: transparent;
  border: 2px solid var(--ok);
  border-right-color: transparent;
}
.state__marker--completed { background: var(--ok); }
.state__marker--idle {
  background: transparent;
  border: 1.5px solid var(--ink-3);
}
.state__marker--unknown {
  background: transparent;
  border: 1.5px dashed var(--ink-3);
}
.state--error .state__word { color: var(--error); }
.state--pending .state__word { color: var(--amber); }
.state--running .state__word { color: var(--ok); }
.state--completed .state__word { color: var(--ok); }
.state--unknown .state__word { color: var(--ink-3); }

@media (prefers-reduced-motion: no-preference) {
  .state__marker--running { animation: spin 1.1s linear infinite; }
}

.list-sentinel {
  min-height: 44px;
  padding: var(--s3) var(--s4);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-meta);
}

.list-note {
  padding: var(--s3) var(--s4);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-meta);
}

.footline {
  padding: var(--s4);
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--fs-meta);
}

/* ---------- 会话消息 ---------- */

.chat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.msgs {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--s3) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  overscroll-behavior: contain;
}

.msg {
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

/* 左右气泡：助手下左、本人下右；去掉左侧竖线/节点。 */
.msg--assistant, .msg--other { align-items: flex-start; }
.msg--user { align-items: flex-end; }

.msg__role {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 3px;
  padding: 0 2px;
}

.msg__bubble {
  max-width: min(100%, 86%);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--bubble-agent-border);
  border-radius: var(--r-m);
  background: var(--bubble-agent-bg);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.msg--assistant .msg__bubble, .msg--other .msg__bubble {
  border-bottom-left-radius: 3px;
}

.msg--user .msg__bubble {
  background: var(--bubble-user-bg);
  border-color: var(--bubble-user-border);
  color: var(--bubble-user-ink);
  border-bottom-right-radius: 3px;
}

.msg__body {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: var(--fs-body);
}

.msg--user .msg__body { color: inherit; }

.msg__imgs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}

.msg__img-btn {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  max-width: 100%;
}
.msg__img {
  display: block;
  max-width: 160px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-s);
  background: var(--paper-inset);
}
.img-failed {
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-s);
  background: var(--paper-inset);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  cursor: pointer;
}

/* 全屏图片查看层（点击缩略图打开；不落文件） */
.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
  background: rgba(0, 0, 0, 0.86);
}
.image-viewer[hidden] { display: none; }
.image-viewer__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-s);
}
.image-viewer__close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.image-viewer__error {
  color: #fff;
  font-size: var(--fs-body);
  text-align: center;
}

.msgs__more {
  align-self: center;
  margin: 0 0 var(--s2);
}

.msgs__end {
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--fs-meta);
}

/* 滑动窗口折叠分隔条（较近历史已折叠：可展开或返回最新，不静默丢弃） */
.msgs__fold {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: var(--s2) 0;
  padding: var(--s2) var(--s3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-s);
  background: var(--paper-inset);
}

.msgs__fold .btn { min-height: 36px; padding: 0 var(--s3); }

/* ---------- 待回答卡 ---------- */

.pending-wrap {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: var(--s3) var(--s4) 0;
  max-height: 45dvh;
  overflow-y: auto;
}

.pcard {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--paper-raise);
  padding: var(--s3);
  margin-bottom: var(--s3);
}

.pcard__kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--amber);
  margin-bottom: var(--s1);
}

.pcard__tool {
  font-size: var(--fs-meta);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.pcard__reason {
  margin: var(--s1) 0 0;
  font-size: var(--fs-meta);
  color: var(--ink-2);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.pcard__detail {
  margin: var(--s2) 0 0;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-s);
  background: var(--paper-inset);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  max-height: 180px;
  overflow-y: auto;
}

.q { margin-top: var(--s3); }

.q__text { font-weight: 500; overflow-wrap: anywhere; }

.q__opts {
  margin-top: var(--s1);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.opt {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s1) var(--s2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-s);
  background: var(--control);
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
}

.opt[aria-pressed="true"], .opt[aria-checked="true"] {
  border-color: var(--ink);
  background: var(--paper-inset);
}

.opt--primary[aria-checked="true"], .opt--primary[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper-raise);
  border-color: var(--ink);
}

.opt__mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.opt--multi .opt__mark { border-radius: 4px; }

.opt[aria-checked="true"] .opt__mark::after,
.opt[aria-pressed="true"] .opt__mark::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: inherit;
  background: currentColor;
}

.opt__label { flex: 1 1 auto; overflow-wrap: anywhere; }
.opt__desc { display: block; font-size: var(--fs-meta); color: var(--ink-3); }

.q__custom { margin-top: var(--s1); }

.q__custom .input { min-height: 40px; }

/* plan-review 冲突实时提示（选批准+填反馈=提交被拒） */
.q__hint {
  margin-top: var(--s1);
  font-size: var(--fs-meta);
  color: var(--amber);
  overflow-wrap: anywhere;
}

.q__hint:empty { display: none; }

.pcard__actions {
  margin-top: var(--s3);
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.pcard__actions .btn { flex: 1 1 auto; }

.pcard__state {
  margin-top: var(--s2);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.pcard__state--err { color: var(--amber); }

/* ---------- 会话底部容器 / 停止行 / 回执区 ---------- */

.below {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.receipts { margin: var(--s3) var(--s4) 0; }
.receipts:empty { display: none; }

/* 历史图占位（尺寸未知/超限：不自动解码，不冒称消息不存在） */
.img-blocked {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  max-width: 100%;
  padding: var(--s2) var(--s3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-s);
  background: var(--paper-inset);
  font-size: var(--fs-meta);
  color: var(--ink-2);
}

/* 长消息逐块展开操作行 */
.msg__expand {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s1);
}

.msg__expand .btn { min-height: 36px; padding: 0 var(--s3); }

/* 禁用态标签按钮（本会话不支持图片时禁选图） */
.btn.is-disabled { opacity: 0.45; pointer-events: none; }

/* ---------- 轻提示 ---------- */

.toastbox {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 84px);
  z-index: 50;
  width: max-content;
  max-width: min(92vw, 560px);
  pointer-events: none;
}

.toastbox .notice { margin: 0; box-shadow: 0 1px 4px var(--shadow); }

/* 停止过程/结果：屏幕中央短暂胶囊；不占输入区高度、不阻挡输入（单条替换）。 */
.stop-capsule {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 60;
  max-width: min(86vw, 420px);
  padding: 10px 18px;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--paper-raise);
  font-size: var(--fs-meta);
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 10px var(--shadow);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.stop-capsule.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.stop-capsule[data-tone="attention"] { background: var(--error); color: var(--on-accent); }
.stop-capsule[data-tone="ok"] { background: var(--ok); color: var(--on-accent); }

/* ---------- 模型选择弹窗（底部 sheet） ---------- */

.model-sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: env(safe-area-inset-top);
  background: var(--overlay);
}

.model-sheet-layer[hidden] { display: none; }

.model-sheet {
  width: min(100%, 640px);
  max-height: min(82dvh, 640px);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-m) var(--r-m) 0 0;
  background: var(--paper-raise);
  color: var(--ink);
  box-shadow: 0 -2px 16px var(--shadow);
}

.model-sheet__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3) var(--s2) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}

.model-sheet__title { margin: 0; font-size: var(--fs-title); font-weight: 600; }
.model-sheet__close { min-width: 44px; min-height: 44px; }

.model-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s2) var(--s3) var(--s4);
}

.model-sheet__status {
  margin: var(--s4) 0;
  padding: 0 var(--s4);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  text-align: center;
}
.model-sheet__status--error { color: var(--error); }
.model-sheet__note { margin: var(--s2) 0; color: var(--ink-3); font-size: var(--fs-meta); }
.model-sheet__error { margin: var(--s2) var(--s3) var(--s4); }

.model-group { margin-top: var(--s2); }
.model-group__name {
  padding: var(--s1) var(--s2);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}

.model-row {
  width: 100%;
  min-height: 44px;
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-s);
  background: var(--control);
  color: var(--ink);
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--s2);
  cursor: pointer;
}

.model-row:active { background: var(--paper-inset); }
.model-row[aria-current="true"] { border-color: var(--ok); background: var(--ok-soft); }
.model-row[disabled] { opacity: 0.55; cursor: not-allowed; }
:root[data-theme="dark"] .model-row[disabled] { opacity: 0.62; }

.model-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.model-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-row__desc { color: var(--ink-3); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.model-row__busy { flex: 0 0 auto; color: var(--ink-3); font-size: 12px; }
.model-row__current {
  flex: 0 0 auto;
  padding: 0 var(--s2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-full);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 12px;
}

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

.composer {
  position: static;
  flex: 0 0 auto;
  z-index: 20;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: var(--s2) var(--s3) calc(env(safe-area-inset-bottom) + var(--s2));
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.picks {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* A：输入框上沿轻量运行态；不挡输入、不伪造进度。 */
.composer__running {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  padding: 0 2px var(--s1);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.3;
}
.composer__running[hidden] { display: none; }
.composer__running-mark {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ok);
  animation: running-pulse 1.2s ease-in-out infinite;
}
.composer__running-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-bottom: 1px;
}
.composer__running-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
  animation: running-dot 1.2s ease-in-out infinite;
}
.composer__running-dots span:nth-child(2) { animation-delay: 0.16s; }
.composer__running-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes running-dot {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-1px); }
}
@keyframes running-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.pick {
  position: relative;
  width: 72px;
}

.pick__img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--r-s);
  border: 1px solid var(--line-soft);
  display: block;
  background: var(--paper-inset);
}

.pick__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--paper-raise);
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.composer__row {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
}
.attach-button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--paper-raise);
  color: var(--ink-2);
  font-size: 18px;
  cursor: pointer;
}
.attach-button:active { background: var(--paper-inset); }
.attach-button.is-disabled { opacity: 0.45; pointer-events: none; }

.composer__text {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 132px;
}

.composer__btns {
  display: flex;
  gap: var(--s2);
  flex: 0 0 auto;
}

.composer__action {
  min-width: 76px;
  justify-content: center;
}

.composer__hint {
  font-size: 12px;
  color: var(--ink-3);
}

/* 夜间禁用态仍可辨认，但不再可点提示清楚。 */
:root[data-theme="dark"] .btn[disabled],
:root[data-theme="dark"] .btn.is-disabled { opacity: 0.58; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}