/* ========== chat.css —— 聊天子系统（独立于主样式表，最后加载，避免历史规则污染） ========== */

/* ---- 容器 ---- */
#chat{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  background:radial-gradient(120% 80% at 50% 0%,#1b1512 0%,#0e0c0a 60%,#0a0908 100%);
  transform:translateY(102%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
#chat.on{transform:none}

/* ---- 顶栏 ---- */
#chat .chat-head{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  background:rgba(18,16,14,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,168,106,.22);
}
#chat .chat-title{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3}
#chat .chat-title b{
  font-size:14px;font-family:"Noto Serif SC",Georgia,serif;color:#f3ebda;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#chat .chat-title span{font-size:10.5px;color:#7d7364}
#chat .model-pill{
  flex:0 0 auto;font-size:11px;padding:5px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(201,168,106,.3);background:rgba(201,168,106,.1);color:#c9a86a;
  max-width:40vw;overflow:hidden;text-overflow:ellipsis;
}
#chat .icon-btn{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  border:1px solid rgba(201,168,106,.22);background:rgba(255,255,255,.03);
  color:#a4977f;font-size:15px;line-height:1;display:grid;place-items:center;
}

/* ---- 消息区 ---- */
#chat .chat-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:16px 12px 10px;display:flex;flex-direction:column;gap:16px;
  -webkit-overflow-scrolling:touch;
}
#chat .chat-hint{color:#7d7364;font-size:13px;text-align:center;padding:60px 20px;line-height:2}

#chat .turn{display:flex;flex-direction:column;gap:8px}
#chat .turn-head{display:flex;align-items:center;gap:8px}
#chat .turn-head .avatar{
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;
  font-family:"Noto Serif SC",Georgia,serif;
  background:radial-gradient(circle at 30% 30%,#3a2f22,#1d1813);color:#e0c48c;
  border:1px solid rgba(201,168,106,.35);
}
#chat .turn-head .who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
#chat .turn-head .who b{font-size:12.5px;color:#e0c48c;font-weight:600}
#chat .turn-head .who span{font-size:10.5px;color:#7d7364}

#chat .turn-body{
  display:block;width:auto;max-width:100%;box-sizing:border-box;
  background:rgba(30,26,22,.86);
  border:1px solid rgba(201,168,106,.22);border-radius:14px;
  padding:14px 16px;margin:0;
  font-family:"Noto Serif SC",Georgia,serif;font-size:15px;line-height:1.95;color:#e9e0cf;
  white-space:pre-wrap;word-break:break-word;
  box-shadow:0 6px 24px rgba(0,0,0,.35);backdrop-filter:blur(6px);
}
#chat .turn-body img{display:block;max-width:100%;border-radius:8px;cursor:zoom-in}

#chat .turn.user{align-items:flex-end}
#chat .turn.user .turn-head{flex-direction:row-reverse}
#chat .turn.user .turn-head .avatar{background:linear-gradient(135deg,#3c5b8c,#22344f);color:#cfe0f7}
#chat .turn.user .turn-head .who{text-align:right}
#chat .turn.user .turn-head .who b{color:#a9c4ec}
#chat .turn.user .turn-body{
  background:rgba(56,84,132,.42);border-color:rgba(120,158,214,.35);
  color:#e6ecf7;font-family:"Inter","PingFang SC",system-ui,sans-serif;font-size:14.5px;
}

#chat .turn-tools{display:flex;gap:14px;flex-wrap:wrap;padding:0 4px}
#chat .turn-tools button{
  border:0;background:none;padding:2px 0;font-size:11.5px;color:#7d7364;
  display:inline-flex;align-items:center;gap:4px;
}
#chat .turn-tools button:hover{color:#c9a86a}
#chat .turn-cost{font-size:11px;color:#6d6355}

#chat .msg.sys,#chat .msg.err{
  align-self:center;font-size:12px;color:#8d8375;
  border:1px dashed rgba(201,168,106,.25);border-radius:8px;padding:6px 12px;background:transparent;
}
#chat .msg.err{border-color:rgba(224,92,92,.45);color:#ffb4b4;white-space:pre-wrap;line-height:1.7}

/* ---- dock ---- */
#chat .chat-dock{
  flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;
  padding:8px 10px;border-top:1px solid rgba(201,168,106,.16);
  background:rgba(18,16,14,.92);backdrop-filter:blur(8px);
}
#chat .chat-dock::-webkit-scrollbar{display:none}
#chat .chat-dock button{
  flex:0 0 auto;border:1px solid rgba(201,168,106,.18);background:rgba(255,255,255,.03);
  color:#a4977f;border-radius:8px;padding:6px 10px;font-size:11.5px;white-space:nowrap;
}
#chat .chat-dock button:hover{color:#c9a86a;border-color:rgba(201,168,106,.4)}
#chat .chat-dock button.on{color:#c9a86a;background:rgba(201,168,106,.14);border-color:rgba(201,168,106,.45)}

/* ---- 输入区（强制 flex + 三件套宽度） ---- */
#chat #chat-form{
  flex:0 0 auto;display:block!important;position:relative!important;
  width:100%;box-sizing:border-box;
  padding:10px 66px calc(12px + env(safe-area-inset-bottom)) 12px!important;
  margin:0!important;border-top:1px solid rgba(201,168,106,.22);
  background:rgba(18,16,14,.96);
}
#chat #chat-text{
  width:100%!important;min-width:0!important;max-width:none!important;
  box-sizing:border-box;display:block;margin:0;
  border-radius:14px;border:1px solid rgba(201,168,106,.22);background:rgba(30,26,22,.9);
  color:#e9e0cf;font-family:"Inter","PingFang SC",system-ui,sans-serif;font-size:14px;line-height:1.6;
  padding:11px 14px;min-height:44px;max-height:140px;outline:0;resize:none;
}
#chat #chat-text:focus{border-color:rgba(201,168,106,.5)}
#chat .send-wrap{
  position:absolute;right:10px;bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
#chat .counter{font-size:11px;color:#6d6355;min-width:10px;text-align:right;font-variant-numeric:tabular-nums}
#chat #chat-send{
  position:static!important;flex:0 0 40px;width:40px!important;height:40px!important;
  padding:0!important;margin:0;border-radius:50%;
  border:1px solid rgba(201,168,106,.45);background:rgba(201,168,106,.18);
  color:#e0c48c;font-size:15px;display:grid;place-items:center;
}
#chat #chat-send:disabled{opacity:.4}

@media (max-width:860px){
  #chat .turn-body{font-size:14.5px;padding:12px 14px}
  #chat .chat-dock{padding:6px 8px}
  #chat .chat-dock button{font-size:11px;padding:5px 8px}
}



/* v7 兜底：任何子元素都不得超出容器 */
#chat, #chat *{box-sizing:border-box;max-width:100%}
#chat{overflow-x:hidden;width:100vw}
#chat .chat-body{width:100%;overflow-x:hidden}
#chat .turn,#chat .turn-body{width:auto;max-width:100%}
#chat .turn.user{align-items:flex-end}
#chat .turn.user .turn-body{max-width:88%}
#chat .turn-tools{flex-wrap:wrap;max-width:100%}
#chat .chat-dock{max-width:100%}

/* v8 最终兜底：用 vw 直接夹住卡片宽度，不依赖父级计算 */
#chat .turn{width:100%;max-width:100%}
#chat .turn-body{max-width:calc(100vw - 46px)!important;box-sizing:border-box;overflow-wrap:anywhere}
#chat .turn.user .turn-body{max-width:calc(88vw - 40px)!important}
#chat .chat-body{padding-left:12px!important;padding-right:12px!important}
#chat .turn-tools{max-width:calc(100vw - 46px);overflow:hidden}

/* ===== 对齐原站视觉 ===== */
#chat{
  background-color:#0b0a09;
  background-image:radial-gradient(120% 70% at 50% 0%,rgba(35,28,22,.9) 0%,rgba(12,10,9,.96) 55%,#080706 100%);
  background-size:cover;background-position:center top;background-attachment:fixed;
}
/* 消息卡：更薄的金边、更大圆角，贴近原站 */
#chat .turn-body{
  background:rgba(26,22,19,.78);
  border:1px solid rgba(201,168,106,.18);
  border-radius:16px;
  box-shadow:0 2px 18px rgba(0,0,0,.4);
  backdrop-filter:blur(10px);
}
#chat .turn.user .turn-body{
  background:rgba(62,86,128,.30);
  border-color:rgba(126,160,214,.28);
  border-radius:16px;
}
/* 工具条更像原站的一排小字 */
#chat .turn-tools{gap:16px;padding:2px 6px 0}
#chat .turn-tools button{font-size:12px;color:#8a7f6d}
#chat .turn-tools button:hover{color:#d8b878}
/* 输入区：原站那种外框 + 圆形按钮 */
#chat #chat-form{padding:10px 10px calc(10px + env(safe-area-inset-bottom)) 10px!important}
#chat #chat-text{border-radius:12px;background:rgba(26,22,19,.92);border-color:rgba(201,168,106,.18)}
#chat #chat-send{background:rgba(201,168,106,.16);border-color:rgba(201,168,106,.4);color:#e8cf9c}

/* 右下角悬浮球（对应原站那个圆形浮钮） */
#chat .chat-fab{
  position:absolute;right:14px;bottom:calc(84px + env(safe-area-inset-bottom));
  width:44px;height:44px;border-radius:50%;z-index:5;
  border:1px solid rgba(201,168,106,.45);
  background:radial-gradient(circle at 35% 30%,rgba(80,110,150,.95),rgba(40,58,86,.95));
  color:#dce6f5;font-size:17px;display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}

/* 新对话：铺满作者介绍页 */
#chat .chat-body.has-landing{padding:0;overflow:hidden;display:block}
#chat .landing{width:100%;height:100%;min-height:0}
#chat .landing-frame{
  display:block;border:0;background:#12100e;
  width:181.8%;height:181.8%;
  zoom:.55;
}
/* 顶栏模型胶囊居中（对齐原站） */
#chat .chat-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
#chat .chat-head .model-pill{grid-column:2;justify-self:center}
#chat .chat-head #chat-send-top{grid-column:3}