/* Author: fe-ui-builder */
/* 逐字提取自 V-04 原型 S-02.html 的内嵌 <style>（ADR-004：原型直接演进，不重写）。
   只做两处必要改动：① .field 从静态 div 变成真 input，补 input 的重置；
   ② 加 .msg.error 的降级态——原型没有"模型不可用"这一格，而它必须看得见。 */
  /* ===== 气泡流：宽松 ===== */
  .stream{flex:1;padding:18px 16px 12px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}
  .stream>*{flex:none}
  .ts{align-self:center;font-size:var(--fs-ts);color:var(--muted)}
  .msg{max-width:76%;padding:10px 14px;font-size:var(--fs-bubble);line-height:1.5;border-radius:20px}
  .from-owen{align-self:flex-end;background:var(--accent);color:var(--surface);border-bottom-right-radius:6px}
  .from-bot{align-self:flex-start;background:var(--surface);color:var(--fg-body);
    border:.5px solid var(--border);border-bottom-left-radius:6px;
    box-shadow:0 1px 2px rgba(0,0,0,.03)}
  .caret{display:inline-block;width:2px;height:1em;background:var(--accent);
    vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}

  /* ===== 统一事项卡（唯一结构组件）===== */
  .item{align-self:flex-start;width:84%;background:var(--surface);border-radius:var(--radius-card);
    border:.5px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.04);
    padding:13px 14px}
  .item-head{display:flex;align-items:flex-start;gap:11px}
  .item-title{flex:1;min-width:0}
  .item-title b{font-size:var(--fs-card-title);color:var(--fg);display:block;line-height:1.35}
  .item-title small{font-size:var(--fs-meta);color:var(--muted);display:block;margin-top:2px}
  .item-body{font-size:var(--fs-card-body);line-height:1.5;color:var(--fg-body);margin:9px 0 0}
  .item .quote{background:var(--accent-soft);border-radius:10px;padding:8px 12px;margin-top:8px;
    font-size:var(--fs-card-body);color:var(--fg)}
  .item .path{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-hint);color:var(--muted);margin-top:7px}
  .item .hint{font-size:var(--fs-hint);color:var(--muted);text-align:center;margin-top:8px}

  /* ===== 输入栏 ===== */
  .inputbar{flex:none;background:var(--bg);border-top:1px solid var(--border);
    padding:10px 14px calc(10px + 18px);display:flex;align-items:center;gap:10px}
  .plus{width:33px;height:33px;border-radius:99px;border:1.5px solid var(--muted);color:var(--muted);
    font-size:var(--fs-back);display:flex;align-items:center;justify-content:center;flex:none}
  .field{flex:1;height:38px;border:1px solid var(--border);border-radius:19px;background:var(--surface);
    display:flex;align-items:center;padding:0 15px;font-size:var(--fs-list-title);color:var(--muted)}
  .send{width:33px;height:33px;border-radius:99px;background:var(--accent);color:var(--surface);
    display:flex;align-items:center;justify-content:center;font-size:var(--fs-list-title);flex:none}

/* ── 实装补充（原型是静态稿，这些格子它没有） ── */

/* .field 在原型里是个 div 占位。真 input 要清掉浏览器默认样式，
   否则 iOS Safari 会自己加圆角和内阴影，和 clay 风格打架。 */
input.field {
  border: 1px solid var(--border);
  outline: none;
  color: var(--fg);
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
input.field::placeholder { color: var(--muted); }
input.field:focus { border-color: var(--accent); }

/* 模型不可用的降级态。System_Design 核心机制表：禁模板假回复——
   所以这里必须长得像"出事了"，不能长得像一条正常回复。 */
.msg.error {
  align-self: center;
  max-width: 88%;
  background: var(--accent-soft);
  color: var(--fg-body);
  border: .5px solid var(--border);
  font-size: var(--fs-hint);
  text-align: center;
}

/* 发送中禁用态：连点两下会发两条一样的消息给模型。 */
.send[aria-disabled="true"] { opacity: .45; }