/* ============================================================
 * 🤖 AI 对话体系样式（自 styles.css 迁出集中管理）
 * ------------------------------------------------------------
 * 覆盖：聊天面板壳/头部工具栏/消息气泡/🍵茶话会/输入区/生图卡/AI设置列表
 * 说明：@media 与 @keyframes 内的少量 ai 规则仍在 styles.css（避免层叠顺序风险）
 * 加载顺序：styles.css → styles/dialogs.css → styles/ai-chat.css
 * ============================================================ */

/* ===================== AI 浮动按钮 ===================== */
.ai-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  font-size: 24px;
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.5), 0 0 0 1px rgba(255,255,255,0.4) inset;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ai-fab:hover { transform: scale(1.08) rotate(-6deg); }
.ai-fab:active { transform: scale(0.95); }
.ai-fab.hidden { display: none; }
/* 新消息红点 */
.ai-fab.has-new::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3366;
  box-shadow: 0 0 0 2px white;
}
/* ===================== AI 聊天面板 ===================== */
.ai-panel {
  position: fixed;
  top: 16px;
  right: 16px;
  /* bottom 不再写死，改成显式 height，让 resize:both 能改高度；
     拖动后 JS 会切换到 top/left 定位（去掉 right）。 */
  width: 420px;
  height: calc(100vh - 32px); height: calc(100dvh - 32px);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  min-width: 320px;
  min-height: 360px;
  resize: both;       /* 浏览器原生右下角拖动手柄 */
  overflow: hidden;   /* resize 必须配合 overflow != visible */
  display: flex;
  flex-direction: column;
  padding: 0;
  z-index: 600;
  border-radius: var(--radius-lg);
  animation: ai-slide 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* 容器查询：让顶栏按钮根据自己面板宽度而不是视口宽度做响应 */
  container-type: inline-size;
  container-name: aipanel;
}
.ai-panel[hidden] { display: none; }
/* 标题栏鼠标悬浮时变"移动"光标，但点击区是按钮 / select / input 不要变 */
.ai-panel .ai-head { cursor: move; user-select: none; }
.ai-panel .ai-head button,
.ai-panel .ai-head select,
.ai-panel .ai-head input,
.ai-panel .ai-head label,
.ai-panel .ai-head .ai-tool-btn,
.ai-panel .ai-head .ai-model-status {
  cursor: pointer;
}
.ai-panel .ai-head .ai-tool-btn { cursor: pointer; }
.ai-panel.ai-dragging,
.ai-panel.ai-dragging * { user-select: none !important; cursor: move !important; }
.ai-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-border);
  gap: 8px;
}
.ai-head-left, .ai-head-right { display: flex; align-items: center; gap: 6px; }
.ai-head-left { min-width: 0; }
.ai-head-right {
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.ai-logo { font-size: 18px; }
.ai-head select {
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  font-size: 12px;
  color: var(--text);
  min-width: 0;
  max-width: 100%;
  outline: none;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.45) 50%),
    linear-gradient(135deg, rgba(0,0,0,0.45) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
[data-theme="dark"] .ai-head select {
  background: rgba(255,255,255,0.06);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.6) 50%, transparent 50%);
}
.ai-head select:hover { border-color: rgba(var(--accent-rgb), 0.35); }
.ai-head select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* 头栏布局：允许窄屏折行，保证图标按钮永远完整可见 */
.ai-head { flex-wrap: wrap; row-gap: 6px; }
.ai-head-left, .ai-head-right { min-width: 0; }
.ai-head-left  { flex: 0 1 auto; }
.ai-head-right { flex: 1 1 auto; }
.ai-head-right > .icon-btn { flex: 0 0 auto; }
.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
.ai-empty {
  text-align: center;
  color: var(--text-faint);
  padding: 20px 10px;
}
.ai-empty-logo { font-size: 48px; margin-bottom: 10px; animation: float 3.5s ease-in-out infinite; }
.ai-empty p { margin: 8px 0 16px; font-size: 13px; line-height: 1.6; }
.ai-suggestions { display: flex; flex-direction: column; gap: 8px; }
.ai-suggestions button {
  border: 1px dashed var(--glass-border);
  background: transparent;
  color: var(--text-soft);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s;
}
.ai-suggestions button:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* 消息气泡 */
.ai-msg {
  display: flex;
  gap: 8px;
  animation: fade-in 0.25s;
}
.ai-msg .ai-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
}
.ai-msg .ai-bubble {
  background: var(--card-bg);
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  max-width: 80%;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  word-break: break-word;
  border: 1px solid var(--glass-border);
  overflow-wrap: anywhere;
}
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg.user .ai-avatar { background: rgba(255,255,255,0.5); color: var(--text); }
[data-theme="dark"] .ai-msg.user .ai-avatar { background: rgba(255,255,255,0.12); }
.ai-msg.user .ai-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  border: none;
  border-radius: 14px 14px 4px 14px;
}
.ai-msg .ai-bubble p { margin: 0 0 6px; }
.ai-msg .ai-bubble p:last-child { margin-bottom: 0; }
.ai-msg .ai-bubble h1, .ai-msg .ai-bubble h2, .ai-msg .ai-bubble h3 {
  margin: 6px 0 4px; font-size: 14px;
}
.ai-msg .ai-bubble ul { padding-left: 18px; margin: 4px 0; }
.ai-msg .ai-bubble code {
  background: rgba(0,0,0,0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
}
.ai-msg.user .ai-bubble code { background: rgba(255,255,255,0.2); }
.ai-msg .ai-bubble pre {
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 12px;
  margin: 6px 0;
}
.ai-msg .ai-bubble pre code { background: transparent; color: inherit; padding: 0; }
.ai-msg .ai-bubble a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ai-msg.user .ai-bubble a { color: #fff; text-decoration-color: rgba(255,255,255,0.6); }
/* 思考中：assistant 气泡里的三点动画 */
.ai-thinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
  min-height: 18px;
}
.ai-thinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #ff8fab);
  display: inline-block;
  opacity: 0.45;
  animation: ai-thinking-bounce 1.2s infinite ease-in-out both;
}
.ai-thinking span:nth-child(1) { animation-delay: -0.32s; }
.ai-thinking span:nth-child(2) { animation-delay: -0.16s; }
.ai-thinking span:nth-child(3) { animation-delay: 0s; }
/* ===== 生图卡片（借鉴 ChatGpt-Image-Studio 的 conversation-turns 设计）===== */
.ai-img-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: -2px 0;
}
.ai-img-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
}
.ai-img-pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-soft, #6b6b6b);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ai-img-pill.running {
  background: rgba(56, 139, 253, 0.12);
  color: #2563eb;
  animation: ai-img-pulse 1.6s ease-in-out infinite;
}
.ai-img-pill.err {
  background: rgba(244, 63, 94, 0.12);
  color: #be123c;
}
.ai-img-pill.muted {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}
[data-theme="dark"] .ai-img-pill {
  background: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
}
[data-theme="dark"] .ai-img-pill.running { color: #93c5fd; background: rgba(96, 165, 250, 0.18); }
[data-theme="dark"] .ai-img-pill.err     { color: #fda4af; background: rgba(244, 63, 94, 0.18); }
.ai-img-summary {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}
.ai-img-summary.running { background: rgba(56, 139, 253, 0.10); color: #2563eb; }
.ai-img-summary.ok      { background: rgba(34, 197, 94, 0.12);  color: #15803d; }
.ai-img-summary.err     { background: rgba(244, 63, 94, 0.10);  color: #be123c; }
.ai-img-summary.partial { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.ai-img-summary.muted   { background: rgba(107, 114, 128, 0.10); color: #6b7280; }
[data-theme="dark"] .ai-img-summary { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .ai-img-summary.running { background: rgba(96,165,250,0.18); color: #93c5fd; }
[data-theme="dark"] .ai-img-summary.ok      { background: rgba(34,197,94,0.18); color: #86efac; }
[data-theme="dark"] .ai-img-summary.err     { background: rgba(244,63,94,0.20); color: #fda4af; }
[data-theme="dark"] .ai-img-summary.partial { background: rgba(245,158,11,0.20); color: #fcd34d; }
.ai-img-grid {
  display: grid;
  gap: 12px;
}
.ai-img-grid.one  { grid-template-columns: 1fr; }
.ai-img-grid.many { grid-template-columns: 1fr 1fr; }
.ai-img-card {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ai-img-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10); }
.ai-img-card.error    { background: rgba(244, 63, 94, 0.06); border-color: rgba(244, 63, 94, 0.25); }
.ai-img-card.cancelled { background: rgba(107, 114, 128, 0.06); border-color: rgba(107, 114, 128, 0.25); }
.ai-img-card.loading  { background: rgba(0, 0, 0, 0.03); border-style: dashed; }
[data-theme="dark"] .ai-img-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .ai-img-card.error    { background: rgba(244,63,94,0.10); border-color: rgba(244,63,94,0.30); }
[data-theme="dark"] .ai-img-card.cancelled { background: rgba(107,114,128,0.10); }
[data-theme="dark"] .ai-img-card.loading  { background: rgba(255,255,255,0.04); }
.ai-img-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.03);
  cursor: zoom-in;
}
.ai-img-revised {
  font-size: 11px;
  padding: 8px 12px;
  color: var(--text-soft, #6b6b6b);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
  line-height: 1.5;
  font-style: italic;
}
[data-theme="dark"] .ai-img-revised { border-color: rgba(255,255,255,0.08); background: rgba(0,0,0,0.20); }
.ai-img-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.ai-img-card.error    .ai-img-actions { border-top-color: rgba(244, 63, 94, 0.18); }
[data-theme="dark"] .ai-img-actions { border-top-color: rgba(255,255,255,0.08); }
.ai-img-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-soft, #555);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ai-img-act:hover { background: rgba(0, 0, 0, 0.05); color: var(--text); border-color: rgba(0, 0, 0, 0.16); }
[data-theme="dark"] .ai-img-act { background: rgba(255,255,255,0.06); color: #d1d5db; border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .ai-img-act:hover { background: rgba(255,255,255,0.12); color: #fff; }
.ai-img-err-text {
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
  color: #be123c;
  background: rgba(244, 63, 94, 0.04);
  border-radius: 16px 16px 0 0;
}
.ai-img-cancel-text {
  padding: 28px 18px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}
.ai-img-spinner-wrap {
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--text-soft, #6b6b6b);
}
.ai-img-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--accent, #ff8fab);
  border-radius: 50%;
  animation: ai-img-spin 0.9s linear infinite;
}
[data-theme="dark"] .ai-img-spinner { border-color: rgba(255,255,255,0.15); border-top-color: var(--accent); }
.ai-img-spinner-title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.ai-img-spinner-sub {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-soft, #888);
}
.ai-inline-img, .ai-inline-video {
  max-width: 100%;
  max-height: 260px;
  border-radius: 10px;
  display: block;
  margin: 6px 0;
  cursor: zoom-in;
  background: rgba(0,0,0,0.04);
}
.ai-inline-video, .ai-inline-audio { cursor: default; }
.ai-inline-audio { width: 100%; margin: 6px 0; }
/* 指令卡片 */
.ai-action-card {
  margin: 10px 0 4px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255,255,255,0.5);
  padding: 10px 12px;
  font-size: 12px;
}
[data-theme="dark"] .ai-action-card { background: rgba(255,255,255,0.06); }
.ai-action-card h5 {
  margin: 0 0 8px; font-size: 12px; color: var(--accent);
  display: flex; align-items: center; gap: 6px;
}
.ai-action-card ol { margin: 0; padding-left: 18px; line-height: 1.6; color: var(--text-soft); }
.ai-action-card ol li { margin: 2px 0; }
.ai-action-card .badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent);
  color: white;
  margin-right: 4px;
}
.ai-action-card .op-add { background: #4caf50; }
.ai-action-card .op-delete { background: #e04e75; }
.ai-action-card .op-rename, .ai-action-card .op-move { background: #2196f3; }
.ai-action-card .ai-action-apply {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}
.ai-action-card button { flex: 1; padding: 6px; font-size: 12px; border-radius: 8px; border: none; cursor: pointer; }
.ai-action-card .btn-apply { background: var(--accent); color: #fff; }
.ai-action-card .btn-ignore { background: transparent; color: var(--text-faint); border: 1px solid var(--glass-border); }
.ai-action-card.applied { opacity: 0.55; }
.ai-action-card.applied .ai-action-apply { display: none; }
/* 输入栏 */
.ai-foot {
  border-top: 1px solid var(--glass-border);
  padding: 10px 12px 12px;
}
.ai-attach-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.ai-attach-preview:empty { display: none; }
.ai-attach-item {
  position: relative;
  padding: 4px 6px 4px 8px;
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 140px;
}
[data-theme="dark"] .ai-attach-item { background: rgba(255,255,255,0.08); }
.ai-attach-item img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
}
.ai-attach-item .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-attach-item .x {
  border: none; background: transparent;
  color: var(--text-faint); cursor: pointer;
  font-size: 12px; padding: 0 2px;
}
.ai-attach-item .x:hover { color: #e04e75; }
.ai-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.ai-attach-btn {
  cursor: pointer;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text-soft);
  transition: 0.2s;
}
.ai-attach-btn:hover { color: var(--accent); border-color: var(--accent); }
.ai-tip {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 6px;
  min-height: 14px;
}
.ai-tip.err { color: #e04e75; }
/* ===================== AI 设置 ===================== */

.ai-dialog .dialog-body {
  padding: 20px 24px 24px;
  gap: 14px;
  min-height: 0;
  max-height: calc(90vh - 140px);
  overscroll-behavior: contain;
}
/* 展开某一节不再挤压其他节；由 dialog-body 自己产生滚动条 */
.ai-dialog .dialog-body > details.sec {
  flex-shrink: 0;
}
/* 让 summary 本身有统一内边距 */
.ai-dialog .sec > summary {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  padding: 16px 20px;
}
/* 展开后 summary 与正文之间多留一条分隔空白 */
.ai-dialog .sec[open] > summary {
  padding-bottom: 10px;
}
/* 所有正文放进 .sec-body，由外层统一提供四周内边距，
   内部 button/textarea 不再作为直接子元素被生效的 padding 撑大 */
.ai-dialog .sec > .sec-body {
  padding: 4px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 按钮行：不再与边缘相贴；按钮保持小尺寸 */
.ai-dialog .sec-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-dialog .sec > .sec-body .hint {
  margin: 0 0 16px 2px;
  font-size: 12px;
}
/* ===================== AI 子弹窗（供应商 / 角色） ===================== */

.ai-subdialog .dialog-header h3 {
  font-size: 1.05rem;
}
.ai-subdialog .dialog-body {
  padding: 22px 26px 8px;
  gap: 16px;
  min-height: 0;
  max-height: calc(90vh - 140px);
}
.ai-subdialog .dialog-body > label {
  gap: 8px;
  font-weight: 500;
  color: var(--text-soft);
}
.ai-subdialog .dialog-body > label > input,
.ai-subdialog .dialog-body > label > textarea {
  width: 100%;
}
.ai-subdialog .dialog-body textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 200px;
  padding: 16px 18px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.2px;
  color: var(--text);
  border-radius: 20px;
  background:
    linear-gradient(180deg,
      rgba(var(--accent-rgb), 0.05),
      rgba(var(--accent-rgb), 0.02) 40%,
      rgba(255, 255, 255, 0.55));
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  outline: none;
  resize: vertical;
  caret-color: var(--accent);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(var(--accent-rgb), 0.06);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent;
}
.ai-subdialog .dialog-body textarea::-webkit-scrollbar { width: 6px; }
.ai-subdialog .dialog-body textarea::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.3);
  border-radius: 10px;
}
.ai-subdialog .dialog-body textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.5);
}
.ai-subdialog .dialog-body textarea::placeholder {
  color: var(--text-faint);
  opacity: 0.75;
  font-style: italic;
}
.ai-subdialog .dialog-body textarea:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.ai-subdialog .dialog-body textarea:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow:
    0 0 0 4px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 4px 14px rgba(var(--accent-rgb), 0.15);
}
[data-theme="dark"] .ai-subdialog .dialog-body textarea {
  background:
    linear-gradient(180deg,
      rgba(var(--accent-rgb), 0.1),
      rgba(var(--accent-rgb), 0.04) 40%,
      rgba(255, 255, 255, 0.04));
  border-color: rgba(var(--accent-rgb), 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .ai-subdialog .dialog-body textarea:focus {
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 4px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 14px rgba(var(--accent-rgb), 0.25);
}
.ai-subdialog .dialog-body .hint {
  font-size: 11.5px;
  margin: 4px 0 0;
  min-height: 1em;
  padding-left: 2px;
}
.ai-subdialog .dialog-actions {
  padding: 14px 26px 20px;
}
.ai-providers-list, .ai-personas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.ai-provider-item, .ai-persona-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  font-size: 13px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
[data-theme="dark"] .ai-provider-item,
[data-theme="dark"] .ai-persona-item { 
  background: rgba(255, 255, 255, 0.05); 
}
.ai-provider-item:hover, .ai-persona-item:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(var(--accent-rgb), 0.3);
  transform: translateX(2px);
}
.ai-provider-item.active, .ai-persona-item.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.ai-provider-item .name, .ai-persona-item .name { 
  font-weight: 600; 
  color: var(--text); 
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.ai-provider-item .meta, .ai-persona-item .meta { 
  color: var(--text-faint); 
  font-size: 11.5px; 
  flex: 1; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  opacity: 0.85;
  display: flex;
  align-items: center;
}
.ai-provider-item .actions, .ai-persona-item .actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.ai-provider-item .actions button, .ai-persona-item .actions button {
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-soft);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
[data-theme="dark"] .ai-provider-item .actions button,
[data-theme="dark"] .ai-persona-item .actions button {
  background: rgba(255, 255, 255, 0.08);
}
.ai-provider-item .actions button:hover, 
.ai-persona-item .actions button:hover {
  color: var(--accent); 
  background: rgba(var(--accent-rgb), 0.15);
}
.ai-dialog textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  outline: none;
  resize: vertical;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, opacity 0.25s, box-shadow 0.25s;
}
[data-theme="dark"] .ai-dialog textarea { 
  background: rgba(255, 255, 255, 0.08); 
}
.ai-dialog textarea:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
/* ===================== 图片灯箱（预览） ===================== */
.ai-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  cursor: zoom-out;
  animation: fade-in 0.2s;
}
.ai-lightbox[hidden] { display: none; }
.ai-lightbox img {
  max-width: 94vw;
  max-height: 94vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  cursor: default;
}
.ai-lightbox-toolbar {
  position: absolute;
  top: 18px;
  right: 22px;
  display: flex;
  gap: 8px;
  z-index: 2001;
}
.ai-lightbox-toolbar .ai-lb-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: #222;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transition: transform 0.15s, background 0.15s;
}
.ai-lightbox-toolbar .ai-lb-btn:hover {
  background: #fff;
  transform: scale(1.06);
}
/* ===================== 内联图片悬浮工具条（下载 / 新窗口） ===================== */
.ai-img-figure {
  position: relative;
  display: inline-block;
  margin: 6px 0;
  max-width: 100%;
}
.ai-img-figure > img.ai-inline-img { margin: 0; }
.ai-img-tools {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
}
.ai-img-figure:hover .ai-img-tools,
.ai-img-figure:focus-within .ai-img-tools {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ai-img-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s, transform 0.15s;
}
.ai-img-btn:hover {
  background: rgba(0,0,0,0.78);
  transform: scale(1.08);
}
/* ===================== 错误气泡里的重试按钮 ===================== */
.ai-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ai-error-actions button {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.6);
  color: var(--text);
  cursor: pointer;
  transition: 0.18s;
}
[data-theme="dark"] .ai-error-actions button { background: rgba(255,255,255,0.08); }
.ai-error-actions .btn-retry-ai {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.ai-error-actions .btn-retry-ai:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.ai-error-actions .btn-clear-cooldown:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* fallback 头部提示（前一个模型不可用，已切换到下一个模型继续） */
.ai-route-note {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}
.ai-route-note code {
  background: rgba(0,0,0,0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
}
#ai-find-model.spinning .ai-tool-ico {
  display: inline-block;
  animation: ai-spin 0.9s linear infinite;
}
#ai-image-mode.active .ai-tool-txt,
#ai-image-mode.active .ai-tool-ico { color: #fff; }
/* ===== 模型选择框右侧的可用性徽章 ===== */
.ai-model-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  cursor: help;
  user-select: none;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ai-model-status .ai-model-status-ico { font-size: 12px; line-height: 1; font-weight: 600; }
.ai-model-status .ai-model-status-txt { font-size: 11px; line-height: 1; }
.ai-model-status[data-kind="ok"] {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.30);
}
.ai-model-status[data-kind="cold"] {
  background: rgba(56, 139, 253, 0.12);
  color: #2563eb;
  border-color: rgba(56, 139, 253, 0.30);
}
.ai-model-status[data-kind="error"] {
  background: rgba(244, 63, 94, 0.12);
  color: #be123c;
  border-color: rgba(244, 63, 94, 0.30);
}
.ai-model-status[data-kind="unknown"] {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
  border-color: rgba(107, 114, 128, 0.25);
}
[data-theme="dark"] .ai-model-status[data-kind="ok"]      { background: rgba(34,197,94,0.20);  color: #86efac; border-color: rgba(34,197,94,0.35); }
[data-theme="dark"] .ai-model-status[data-kind="cold"]    { background: rgba(96,165,250,0.20); color: #93c5fd; border-color: rgba(96,165,250,0.35); }
[data-theme="dark"] .ai-model-status[data-kind="error"]   { background: rgba(244,63,94,0.20);  color: #fda4af; border-color: rgba(244,63,94,0.35); }
[data-theme="dark"] .ai-model-status[data-kind="unknown"] { background: rgba(255,255,255,0.08); color: #d1d5db; border-color: rgba(255,255,255,0.16); }
/* ===== AI 面板工具栏按钮（图标 + 中文标签）===== */
.ai-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.ai-tool-btn:hover {
  background: var(--card-hover);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
}
.ai-tool-btn:active { transform: scale(0.97); }
.ai-tool-ico { font-size: 13px; line-height: 1; }
.ai-tool-txt { font-size: 11px; line-height: 1; }
/* 让 .ai-attach-btn 也支持新的 icon+txt 结构 */
.ai-attach-btn { display: inline-flex; align-items: center; gap: 3px; }
.ai-attach-btn .ai-tool-ico { font-size: 14px; }
.ai-attach-btn .ai-tool-txt { font-size: 11px; }
#ai-send .ai-tool-ico, #ai-stop .ai-tool-ico { font-size: 13px; }
#ai-send .ai-tool-txt, #ai-stop .ai-tool-txt { font-size: 12px; }
/* 头部工具行：允许换行避免在 420px 面板里溢出 */
.ai-head-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
/* 生图控件条 */
.ai-image-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 14px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(var(--accent-rgb), 0.06);
}
.ai-image-controls[hidden] { display: none; }
.ai-image-controls .ai-imgctl-tag {
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.4px;
}
.ai-image-controls label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-soft);
}
.ai-image-controls select,
.ai-image-controls input[type="number"] {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.7);
  color: var(--text);
  max-width: 220px;
}
[data-theme="dark"] .ai-image-controls select,
[data-theme="dark"] .ai-image-controls input[type="number"] {
  background: rgba(255,255,255,0.08);
}
.ai-image-controls .ai-imgctl-custom input { width: 70px; }
.ai-image-controls .ai-imgctl-custom[hidden] { display: none; }
/* ===================== AI TTS 按钮 ===================== */
.ai-msg .tts-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 6px;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
  color: inherit;
}
.ai-msg:hover .tts-btn { opacity: 1; }
.ai-msg .tts-btn:hover { background: rgba(255, 143, 171, 0.2); }
.ai-msg .tts-btn.playing { color: var(--accent); opacity: 1; animation: mic-pulse 1.4s ease-in-out infinite; }
[data-theme="dark"] .ai-panel {
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 28px 80px -28px rgba(0,0,0,0.55),
    0 8px 24px -12px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
/* 给浏览器原生 resize 手柄一个可见的提示 */
.ai-panel::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0.18) 60%, transparent 60%, transparent 70%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.18) 80%, transparent 80%);
  opacity: 0.5;
  border-radius: 0 0 10px 0;
}
[data-theme="dark"] .ai-panel::after {
  background:
    linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.22) 60%, transparent 60%, transparent 70%, rgba(255,255,255,0.22) 70%, rgba(255,255,255,0.22) 80%, transparent 80%);
}
/* ---- 头部：把整片紧凑成两行，减少视觉噪音 ---- */
.ai-head {
  padding: 10px 12px;
  gap: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.20));
  backdrop-filter: blur(6px);
}
[data-theme="dark"] .ai-head {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-bottom-color: rgba(255,255,255,0.08);
}
.ai-head-left, .ai-head-right { gap: 6px; }
.ai-head .ai-logo { font-size: 18px; opacity: 0.85; }
.ai-head select {
  height: 30px;
  padding: 0 26px 0 10px;
  font-size: 12px;
  border-radius: 8px;
  background-color: rgba(255,255,255,0.7);
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
[data-theme="dark"] .ai-head select { background-color: rgba(255,255,255,0.07); }
/* ---- 工具按钮：统一胶囊式，高度 28px，行高居中 ---- */
.ai-tool-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.06);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}
.ai-tool-btn:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
}
[data-theme="dark"] .ai-tool-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .ai-tool-btn:hover { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.45); }
.ai-tool-btn .ai-tool-ico { font-size: 12px; }
.ai-tool-btn .ai-tool-txt { font-size: 11px; line-height: 1; }
/* 模型可用性徽章稍微对齐到工具按钮 */
.ai-model-status {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
}
/* ---- 生图控件：2 列网格，整齐对齐 ---- */
.ai-image-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  padding: 10px 14px 12px;
  font-size: 12px;
  background: rgba(var(--accent-rgb), 0.05);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}
[data-theme="dark"] .ai-image-controls {
  background: rgba(var(--accent-rgb), 0.10);
  border-bottom-color: rgba(var(--accent-rgb), 0.25);
}
.ai-image-controls .ai-imgctl-field {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
}
.ai-image-controls .ai-imgctl-field > span:first-child {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.ai-image-controls select,
.ai-image-controls input[type="number"] {
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--text);
  width: 100%;
  max-width: none;
}
[data-theme="dark"] .ai-image-controls select,
[data-theme="dark"] .ai-image-controls input[type="number"] {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
.ai-image-controls .ai-imgctl-custom { grid-column: 1 / -1; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 6px; }
.ai-image-controls .ai-imgctl-custom .ai-imgctl-custom-row { display: inline-flex; align-items: center; gap: 6px; }
.ai-image-controls .ai-imgctl-custom .ai-imgctl-custom-row em {
  font-style: normal; color: var(--text-faint); font-size: 11px;
}
.ai-image-controls .ai-imgctl-custom input { width: 84px; }
/* ---- 消息容器节奏 ---- */
.ai-messages {
  padding: 14px 14px 8px;
}
/* ---- 气泡：圆角更柔，添加细边和轻微阴影 ---- */
.ai-msg .ai-avatar {
  width: 30px; height: 30px;
  font-size: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  box-shadow: 0 2px 6px rgba(15,23,42,0.10);
  flex: 0 0 auto;
}
.ai-msg.assistant .ai-avatar {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.06));
  color: var(--accent);
}
.ai-msg .ai-bubble {
  position: relative;
  padding: 11px 15px;
  border-radius: 18px 18px 18px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  border: 1px solid rgba(0,0,0,0.05);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
  font-size: 13.5px;
  line-height: 1.7;
  transition: box-shadow 0.18s ease;
}
.ai-msg:hover .ai-bubble { box-shadow: 0 4px 16px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.9); }
[data-theme="dark"] .ai-msg .ai-bubble {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.045));
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
[data-theme="dark"] .ai-msg:hover .ai-bubble { box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
.ai-msg.user .ai-bubble {
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, #fff));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.22);
}
[data-theme="dark"] .ai-msg.user .ai-bubble {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
}
/* hover 时间戳：渲染层写入 data-time，展示在气泡上缘外侧 */
.ai-msg[data-time]::after {
  content: attr(data-time);
  position: absolute;
  top: -14px;
  font-size: 10px;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.ai-msg { position: relative; }
.ai-msg[data-time]:hover::after { opacity: 0.9; }
.ai-msg.user[data-time]::after { right: 40px; }
.ai-msg.assistant[data-time]::after { left: 40px; }
/* ---- 输入区：更整洁的胶囊 ---- */
.ai-foot {
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(0,0,0,0.05);
  background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.55));
}
[data-theme="dark"] .ai-foot {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06));
  border-top-color: rgba(255,255,255,0.08);
}
.ai-input-row {
  align-items: flex-end;
  gap: 6px;
}
.ai-attach-btn {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.06);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
[data-theme="dark"] .ai-attach-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}
/* ---- 空状态更宽敞 ---- */
.ai-empty {
  padding: 36px 24px;
  text-align: center;
}
.ai-empty-logo { font-size: 56px; }
.ai-empty p {
  margin: 12px auto 18px;
  font-size: 13.5px;
  color: var(--text-soft);
  max-width: 280px;
  line-height: 1.7;
}
.ai-suggestions { display: flex; flex-direction: column; gap: 8px; max-width: 280px; margin: 0 auto; }
.ai-suggestions button {
  width: 100%;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.7);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ai-suggestions button:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
  transform: translateY(-1px);
}
[data-theme="dark"] .ai-suggestions button {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}
/* ---- AI 设置弹窗：每个 section 内呼吸更舒服 ---- */
.ai-dialog .dialog-body { padding: 18px 22px 20px; }
.ai-dialog .dialog-body > details.sec { margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; }
.ai-dialog .dialog-body > details.sec > summary {
  font-weight: 600; font-size: 13.5px; padding: 6px 4px;
}
.ai-dialog .sec-body, .ai-dialog .sec-btn-row { padding-top: 8px; }
.ai-providers-list .ai-provider-item,
.ai-personas-list .ai-persona-item {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.6);
}
.ai-providers-list .ai-provider-item.active,
.ai-personas-list .ai-persona-item.active {
  border-color: rgba(var(--accent-rgb), 0.40);
  background: rgba(var(--accent-rgb), 0.06);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
[data-theme="dark"] .ai-providers-list .ai-provider-item,
[data-theme="dark"] .ai-personas-list .ai-persona-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.ai-providers-list .ai-provider-item .actions,
.ai-personas-list .ai-persona-item .actions {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ai-providers-list .ai-provider-item .actions button,
.ai-personas-list .ai-persona-item .actions button {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11.5px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ai-providers-list .ai-provider-item .actions button:hover,
.ai-personas-list .ai-persona-item .actions button:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
}
[data-theme="dark"] .ai-providers-list .ai-provider-item .actions button,
[data-theme="dark"] .ai-personas-list .ai-persona-item .actions button {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: var(--text);
}
/* !important 是因为 .ai-subdialog .dialog-body > label > input { width: 100% }
/* ---- 提示：4K 渲染较慢 ---- */
.ai-image-controls::after {
  content: "";
}
.ai-image-controls[data-warn="4k"]::after {
  content: "⏱ 4K 渲染通常需要 3-5 分钟，期间请保持耐心";
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
  padding: 6px 10px;
  border-radius: 8px;
  text-align: center;
}
.ai-tool-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 茶话会按钮激活态 */
.ai-tool-btn#ai-council.is-active {
  background: linear-gradient(135deg, rgba(255,107,138,0.18), rgba(124,131,250,0.18));
  border-color: rgba(255,107,138,0.45);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(255,107,138,0.20) inset, 0 4px 10px rgba(255,107,138,0.18);
}
/* 茶话会启用时，单代理的模型/角色下拉变灰显示"被茶话会接管" */
.ai-head select.council-overridden {
  opacity: 0.55;
  cursor: not-allowed;
  background: repeating-linear-gradient(135deg, rgba(255,107,138,0.06), rgba(255,107,138,0.06) 6px, transparent 6px, transparent 12px);
}
.ai-head select.council-overridden:hover {
  border-color: rgba(255,107,138,0.30);
}
/* ---- 配置弹窗 ---- */
.council-dialog .dialog-body {
  padding: 18px 22px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.council-toggle span { flex: 1; }
.council-toggle input { flex: 0 0 16px; }
.council-toggle input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--accent); }
.council-toggle b { color: var(--accent); }
/* 模式选择卡片 */
.council-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.council-tab {
  padding: 10px 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.council-tab:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.25);
  transform: translateY(-1px);
}
.council-tab.is-active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.08));
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.20);
}
.council-tab .ico { font-size: 22px; line-height: 1; }
.council-tab .ttl { font-weight: 600; font-size: 13px; color: var(--text); }
.council-tab .sub { font-size: 11px; color: var(--text-soft); line-height: 1.4; }
[data-theme="dark"] .council-tab { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .council-tab:hover { background: rgba(var(--accent-rgb), 0.16); }
/* 模式提示 */
.council-mode-row {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.03);
  border: 1px dashed rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme="dark"] .council-mode-row { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); }
.council-mode-row .council-tip { margin: 0; font-size: 11.5px; color: var(--text-soft); line-height: 1.5; }
.council-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); }
.council-field input, .council-field select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  font-size: 13px;
  color: var(--text);
}
[data-theme="dark"] .council-field input,
[data-theme="dark"] .council-field select {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
/* 成员区 */
.council-section { display: flex; flex-direction: column; gap: 8px; }
.council-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.council-sec-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}
.council-members-list { display: flex; flex-direction: column; gap: 8px; }
.council-member-row {
  display: grid;
  grid-template-columns: 44px 1fr 32px;
  gap: 10px;
  align-items: center;
  padding: 10px 10px 10px 6px;
  border-radius: 11px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  border-left: 4px solid var(--member-color, #ff6b8a);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.council-member-row:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
[data-theme="dark"] .council-member-row {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.council-member-color {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--member-color, #ff6b8a);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.council-member-color:hover { transform: scale(1.05); box-shadow: 0 4px 10px var(--member-color, rgba(0,0,0,0.20)); }
.council-member-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.council-member-label {
  width: 100%;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
[data-theme="dark"] .council-member-label { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
.council-member-row2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.council-mini-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.council-mini-field span { font-size: 10.5px; color: var(--text-soft); padding-left: 2px; letter-spacing: 0.04em; }
.council-mini-field select {
  width: 100%;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.85);
  font-size: 11.5px;
  color: var(--text);
  text-overflow: ellipsis;
}
[data-theme="dark"] .council-mini-field select { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.council-member-del {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.council-member-del:hover { background: rgba(220,38,38,0.10); color: #dc2626; border-color: rgba(220,38,38,0.30); }
/* ---- 茶话会消息气泡（多代理回答） ---- */
.ai-msg.assistant.is-council {
  /* 父消息容器与普通 assistant 一致，但 avatar/bubble 用成员色覆盖 */
}
.ai-msg.is-council .ai-avatar {
  background: var(--member-color, #ff6b8a);
  color: #fff;
  font-size: 16px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.50), 0 2px 6px var(--member-color, rgba(0,0,0,0.25));
}
[data-theme="dark"] .ai-msg.is-council .ai-avatar {
  box-shadow: 0 0 0 2px rgba(28,28,32,0.50), 0 2px 6px var(--member-color, rgba(0,0,0,0.40));
}
.ai-msg.is-council .ai-bubble {
  border-left: 3px solid var(--member-color, #ff6b8a);
  background: linear-gradient(180deg, color-mix(in srgb, var(--member-color, #ff6b8a) 8%, var(--bubble-bg, rgba(255,255,255,0.65))), var(--bubble-bg, rgba(255,255,255,0.55)));
  position: relative;
}
.ai-council-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--member-color, #ff6b8a);
  letter-spacing: 0.02em;
}
.ai-council-tag .acl-meta {
  font-weight: 400;
  opacity: 0.85;
  font-size: 10.5px;
}
.ai-council-round-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 4px 8px;
  font-size: 11px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ai-msg-divider { display: block !important; padding: 0 !important; }
.ai-msg-divider .ai-avatar { display: none; }
.ai-council-round-divider::before,
.ai-council-round-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.10), transparent);
}
[data-theme="dark"] .ai-council-round-divider::before,
[data-theme="dark"] .ai-council-round-divider::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
}
/* =====================================================================
   AI 面板 · v2 视觉优化
   - 顶栏按钮分组 + 视觉分隔
   - 用户气泡更柔和
   - 生图参数行更紧凑、有层级
   - 生图卡片：横排图标按钮 + "改写"可折叠 + 大图优先
   - 输入框聚焦更明显，发送中视觉反馈
   ===================================================================== */

/* —— 顶栏分组：组内紧贴，组间留出小间距，关闭按钮单独划分 —— */
.ai-head-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .ai-head-group {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.ai-head-group .ai-tool-btn {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.ai-head-group .ai-tool-btn:hover {
  background: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .ai-head-group .ai-tool-btn:hover {
  background: rgba(255, 255, 255, 0.10);
}
.ai-head-group .ai-tool-btn.is-active,
.ai-head-group .ai-tool-btn[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
}
/* 关闭按钮：与组拉开距离，使用更克制的样式（默认无背景）*/
.ai-close-btn {
  margin-left: 4px;
  opacity: 0.7;
}
.ai-close-btn:hover { opacity: 1; color: #e04e75; }
/* —— 用户消息气泡：降低对比，让生成结果成为视觉主角 —— */
.ai-msg.user .ai-bubble {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.92),
    rgba(var(--accent-rgb), 0.78));
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.18);
}
[data-theme="dark"] .ai-msg.user .ai-bubble {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.55),
    rgba(var(--accent-rgb), 0.42));
}
/* —— 生图参数行：更紧凑、视觉成组，警告色带 —— */
.ai-image-controls {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 8px 10px !important;
  margin: 8px 12px 0 !important;
  gap: 8px !important;
}
[data-theme="dark"] .ai-image-controls {
  background: rgba(255, 255, 255, 0.04);
}
.ai-image-controls label {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-faint);
}
.ai-image-controls label > span:first-child {
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.7;
}
.ai-image-controls select {
  padding: 4px 8px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
/* —— 生图结果卡片：图片更大，"改写"默认收起，操作改图标按钮 —— */
.ai-img-thumb {
  max-height: 480px;        /* 原 360 → 给图本身更多空间 */
  border-radius: 12px 12px 0 0;
}
.ai-img-grid.one .ai-img-thumb { max-height: 560px; }
/* "改写提示词" 折叠成 details，节省纵向空间 */
.ai-img-revised {
  font-size: 11px;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.015);
}
[data-theme="dark"] .ai-img-revised {
  border-color: rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}
.ai-img-revised > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 12px;
  color: var(--text-faint);
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}
.ai-img-revised > summary::-webkit-details-marker { display: none; }
.ai-img-revised > summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.2s;
}
.ai-img-revised[open] > summary::before { transform: rotate(90deg); }
.ai-img-revised > summary:hover { color: var(--accent); }
.ai-img-revised .ai-img-revised-body {
  padding: 0 12px 8px 22px;
  color: var(--text-soft);
  line-height: 1.55;
  font-style: italic;
}
/* 操作行：单图模式横排成图标按钮 */
.ai-img-actions {
  padding: 6px 8px;
  gap: 4px;
  justify-content: flex-end;
}
.ai-img-act {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 8px;          /* 不再纯圆形，更克制 */
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint);
}
.ai-img-act:hover {
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.18);
}
[data-theme="dark"] .ai-img-act { background: transparent; color: #9ca3af; }
[data-theme="dark"] .ai-img-act:hover {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
}
/* —— 输入框：聚焦更明显，发送中给整张面板一个柔和提示 —— */
.ai-foot { padding: 8px 12px 12px; }
.ai-input-row {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.ai-input-row:focus-within {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.10);
}
[data-theme="dark"] .ai-input-row {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .ai-input-row:focus-within {
  background: rgba(255, 255, 255, 0.08);
}
/* 输入框自身去掉重复边框（容器已经接管）*/
.ai-input-row #ai-input {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.ai-input-row #ai-input:focus {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
/* 附件/语音按钮在新容器里去掉外框 */
.ai-input-row .ai-attach-btn {
  background: transparent;
  border-color: transparent;
}
.ai-input-row .ai-attach-btn:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: transparent;
  color: var(--accent);
}
/* 发送中：整张面板加一道顶部进度光带 */
.ai-panel.is-sending::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent),
    transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: ai-progress-slide 1.4s linear infinite;
  z-index: 10;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* =====================================================================
   茶话会 v2 · 借鉴 grok2api multi-agent 思路
   - 进度卡：顶部紧凑横向胶囊，显示 N/T 完成、失败、换模型、平均耗时
   - 深度研究按钮：高亮 + 闪光
   - 并发上限输入：内嵌 council-section
   ===================================================================== */

/* 进度卡片本体（system 消息，按 .ai-msg-progress 渲染） */
.ai-msg-progress {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
}
.ai-msg-progress .ai-avatar { display: none; }
.ai-council-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 4px 4px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--glass-border);
  font-size: 12px;
  color: var(--text-soft);
  flex-wrap: wrap;
}
[data-theme="dark"] .ai-council-progress {
  background: rgba(255, 255, 255, 0.06);
}
.ai-council-progress.done {
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb), 0.10),
    rgba(var(--accent-rgb), 0.04));
}
.ai-council-progress .acp-ico {
  font-size: 16px;
  line-height: 1;
}
.ai-council-progress .acp-bar {
  flex: 1 1 120px;
  min-width: 80px;
  max-width: 240px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
[data-theme="dark"] .ai-council-progress .acp-bar {
  background: rgba(255, 255, 255, 0.10);
}
.ai-council-progress .acp-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  border-radius: inherit;
  transition: width 0.3s ease;
}
.ai-council-progress.running .acp-bar-fill {
  background-image: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent) 50%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0.5) 100%);
  background-size: 24px 100%;
  animation: ai-council-progress-stripe 0.9s linear infinite;
}
.ai-council-progress .acp-stat {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .ai-council-progress .acp-stat {
  background: rgba(255, 255, 255, 0.06);
}
.ai-council-progress .acp-stat.err {
  color: #be123c;
  background: rgba(244, 63, 94, 0.10);
}
.ai-council-progress .acp-stat.warn {
  color: #b45309;
  background: rgba(245, 158, 11, 0.10);
}
.ai-council-progress .acp-stat.muted {
  color: var(--text-faint);
  background: transparent;
}
.ai-council-progress .acp-stat b {
  font-weight: 600;
  color: var(--text);
}
/* 茶话会 section 顶部一行：标题 + 两个按钮 */
.council-sec-actions {
  display: inline-flex;
  gap: 6px;
}
/* 并发上限字段：跟其它 council-field 风格一致，但独立成一行 */
.council-concurrency {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  margin: 6px 0 8px;
  font-size: 12px;
}
[data-theme="dark"] .council-concurrency {
  background: rgba(255, 255, 255, 0.04);
}
.council-concurrency > span:first-child {
  color: var(--text-soft);
  font-weight: 500;
  min-width: 64px;
}
.council-concurrency #council-concurrency {
  width: 56px;
  text-align: center;
  padding: 4px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .council-concurrency #council-concurrency {
  background: rgba(255, 255, 255, 0.08);
}
.council-tip-inline {
  color: var(--text-faint);
  font-size: 11px;
  margin: 0;
}
/* 16 个成员时的紧凑列表：减少行高，避免列表把弹窗撑爆 */
.council-members-list .council-member-row {
  /* 已有定义就不再覆盖，仅在含 16+ 成员时给一个紧凑提示边 */
}
.council-members-list:has(> .council-member-row:nth-child(8)) {
  /* 8 人及以上时列表自带滚动 */
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}
/* =====================================================================
   AI 面板 v3 视觉翻修 —— 解决 v2 之后多个反馈问题
   - 顶栏 3 行变 1-2 行（按钮变纯图标，组容器变虚化背景）
   - 用户气泡用主题无关的柔粉，不再受 --accent 主题色干扰
   - 生图参数：单行紧凑 chip
   - 生图卡片：操作按钮加底色，卡片白边缩小
   - 底部输入：附件/语音/输入/发送 一条完整玻璃带
   ===================================================================== */

/* ---------- 顶栏：紧凑化 ---------- */
.ai-head {
  padding: 8px 10px !important;
  gap: 6px !important;
}
.ai-head-left { gap: 4px !important; }
.ai-head-right { gap: 4px !important; }
/* 组容器：去掉重背景，只保留 hover 时的分组视觉 */
.ai-head-group {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  gap: 0 !important;
  border-radius: 8px;
  position: relative;
}
.ai-head-group::after {
  /* 组与组之间的细分隔线，比整块背景更克制 */
  content: "";
  position: absolute;
  right: -3px;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .ai-head-group::after { background: rgba(255, 255, 255, 0.10); }
.ai-head-group:last-of-type::after { display: none; }
/* 单个按钮：固定方形，纯图标 */
.ai-head-right .ai-tool-btn {
  width: 30px;
  height: 30px;
  padding: 0 !important;
  min-width: 30px;
  justify-content: center;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px;
  box-shadow: none !important;
  transition: background 0.15s, color 0.15s;
}
.ai-head-right .ai-tool-btn:hover {
  background: rgba(var(--accent-rgb), 0.12) !important;
  color: var(--accent);
}
.ai-head-right .ai-tool-btn .ai-tool-txt {
  display: none !important;  /* 永远只显示图标，title 给完整文字 */
}
.ai-head-right .ai-tool-btn .ai-tool-ico {
  font-size: 14px;
  line-height: 1;
}
/* 激活态（生图 / 茶话会）— 实色 accent */
.ai-head-right #ai-image-mode.is-active,
.ai-head-right #ai-council.is-active,
.ai-head-right #ai-image-mode[aria-pressed="true"],
.ai-head-right #ai-council[aria-pressed="true"] {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
/* 关闭按钮稍微独立 */
.ai-close-btn {
  margin-left: 4px !important;
  opacity: 0.65;
}
.ai-close-btn:hover {
  opacity: 1 !important;
  background: rgba(244, 63, 94, 0.12) !important;
  color: #e04e75 !important;
}
/* 模型下拉更紧凑 */
.ai-head select#ai-model-select,
.ai-head select#ai-persona-select {
  padding: 4px 24px 4px 8px !important;
  font-size: 11px !important;
  height: 30px;
  min-width: 0;
  max-width: 160px !important;
}
/* ---------- 用户气泡：主题无关的柔粉玻璃 ---------- */
.ai-msg.user .ai-bubble {
  /* 用一个温和的粉色玻璃，文字保持深色，可读性最强 */
  background: linear-gradient(135deg,
    rgba(255, 184, 199, 0.55),
    rgba(255, 154, 178, 0.45)) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 3px 12px rgba(255, 143, 171, 0.18) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .ai-msg.user .ai-bubble {
  background: linear-gradient(135deg,
    rgba(255, 143, 171, 0.30),
    rgba(255, 110, 150, 0.22)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f9d2dc !important;
}
.ai-msg.user .ai-bubble a {
  color: var(--accent) !important;
}
/* ---------- 生图参数：单行紧凑 chip ---------- */
.ai-image-controls {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  padding: 6px 10px !important;
  margin: 6px 10px 0 !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.30) !important;
  border-radius: 10px !important;
}
[data-theme="dark"] .ai-image-controls {
  background: rgba(255, 255, 255, 0.04) !important;
}
.ai-image-controls label {
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  padding: 2px 4px 2px 8px;
  font-size: 11px;
  color: var(--text-soft);
}
[data-theme="dark"] .ai-image-controls label {
  background: rgba(255, 255, 255, 0.06);
}
.ai-image-controls label > span:first-child {
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
  color: var(--text-faint);
}
.ai-image-controls select {
  height: 24px !important;
  padding: 0 18px 0 4px !important;
  font-size: 11px !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  min-width: 80px;
}
.ai-image-controls .ai-imgctl-custom-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ai-image-controls .ai-imgctl-custom input {
  height: 24px;
  width: 60px;
  padding: 2px 4px;
  font-size: 11px;
  text-align: center;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .ai-image-controls .ai-imgctl-custom input {
  background: rgba(255, 255, 255, 0.08);
}
/* ---------- 生图卡片：紧凑 + 操作按钮有底色 ---------- */
.ai-img-card-wrap {
  padding: 0 !important;
}
.ai-img-pills {
  padding: 4px 0 !important;
  gap: 4px !important;
}
.ai-img-pill {
  font-size: 10px !important;
  padding: 2px 7px !important;
  font-weight: 500;
}
.ai-img-summary {
  margin: 4px 0 !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
}
.ai-img-thumb {
  max-height: 420px !important;
  border-radius: 10px 10px 0 0 !important;
}
.ai-img-grid.one .ai-img-thumb { max-height: 480px !important; }
.ai-img-revised > summary {
  padding: 5px 10px !important;
  font-size: 11px !important;
}
.ai-img-revised .ai-img-revised-body {
  padding: 0 10px 6px 22px !important;
  font-size: 11px;
}
/* 操作按钮加底色 + 紧凑 */
.ai-img-actions {
  padding: 4px 6px !important;
  gap: 3px !important;
  background: rgba(255, 255, 255, 0.30);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .ai-img-actions {
  background: rgba(0, 0, 0, 0.18);
}
.ai-img-act {
  width: 30px;
  height: 30px;
  padding: 0 !important;
  min-width: 30px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: var(--text-soft) !important;
}
[data-theme="dark"] .ai-img-act {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #d1d5db !important;
}
.ai-img-act:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
/* ---------- 底部输入：一条完整玻璃带 ---------- */
.ai-foot {
  padding: 8px 10px 10px !important;
  border-top-color: rgba(0, 0, 0, 0.05) !important;
}
.ai-input-row {
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 22px !important;
  padding: 4px 4px 4px 8px !important;
  gap: 4px !important;
  align-items: center !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
[data-theme="dark"] .ai-input-row {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
.ai-input-row:focus-within {
  border-color: rgba(var(--accent-rgb), 0.45) !important;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.10) !important;
}
/* 附件/语音按钮：变成纯圆形小图标 */
.ai-input-row .ai-attach-btn {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent !important;
  border: none !important;
  color: var(--text-faint);
  flex-shrink: 0;
}
.ai-input-row .ai-attach-btn:hover {
  background: rgba(var(--accent-rgb), 0.12) !important;
  color: var(--accent);
}
.ai-input-row .ai-attach-btn .ai-tool-txt {
  display: none !important;  /* 永远只显示图标 */
}
.ai-input-row .ai-attach-btn .ai-tool-ico {
  font-size: 16px;
}
/* 输入框：扁平嵌入玻璃带 */
.ai-input-row #ai-input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 8px !important;
  min-height: 32px !important;
  box-shadow: none !important;
  font-size: 13px;
}
.ai-input-row #ai-input:focus {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
#ai-send .ai-tool-txt, #ai-stop .ai-tool-txt {
  display: none !important;
}
#ai-send .ai-tool-ico, #ai-stop .ai-tool-ico {
  font-size: 14px;
}
/* 防止 .ai-input-row 子项把行撑高 */
.ai-input-row { min-height: 44px; }
/* ai-tip 顶到一行内的小提示 */
.ai-tip { margin-top: 4px !important; font-size: 10px !important; }
/* =====================================================================
   生图 · Responses API 模式（借鉴 Image-Studio）
   - API 模式 select 高亮 Responses 状态
   - partial 半成品卡片视觉区分（黄边 + 标签）
   ===================================================================== */

/* API 模式选择器：Responses 模式时给整个参数行加一道琥珀色描边，提示用户走的是 SSE 保活 */
.ai-image-controls label[title*="Responses"] select#ai-image-api-mode {
  min-width: 130px !important;
}
/* Responses 模式的"文本驱动"输入框 */
.ai-imgctl-driver[hidden] { display: none !important; }
.ai-imgctl-driver input#ai-image-driver {
  width: 130px;
  height: 24px;
  padding: 2px 6px;
  font-size: 11px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .ai-imgctl-driver input#ai-image-driver {
  background: rgba(255, 255, 255, 0.08);
}
.ai-imgctl-driver input#ai-image-driver::placeholder {
  color: var(--text-faint);
  font-style: italic;
}
.ai-image-controls:has(#ai-image-api-mode[value="responses"]),
.ai-image-controls:has(#ai-image-api-mode option[value="responses"]:checked) {
  border-color: rgba(245, 158, 11, 0.35) !important;
  background: linear-gradient(90deg,
    rgba(245, 158, 11, 0.05),
    rgba(255, 255, 255, 0.30)) !important;
}
[data-theme="dark"] .ai-image-controls:has(#ai-image-api-mode[value="responses"]),
[data-theme="dark"] .ai-image-controls:has(#ai-image-api-mode option[value="responses"]:checked) {
  background: linear-gradient(90deg,
    rgba(245, 158, 11, 0.10),
    rgba(255, 255, 255, 0.04)) !important;
}
/* partial 卡片：金黄色边 + 半透明覆盖（与最终图区分） */
.ai-img-card.partial {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: rgba(245, 158, 11, 0.04) !important;
  position: relative;
}
[data-theme="dark"] .ai-img-card.partial {
  border-color: rgba(245, 158, 11, 0.50) !important;
  background: rgba(245, 158, 11, 0.08) !important;
}
.ai-img-card.partial .ai-img-thumb {
  /* 给半成品图轻微降饱和提示用户它还在生成 */
  filter: saturate(0.92);
  opacity: 0.96;
}
.ai-img-partial-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.92);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ===== 渲染架构重构新增（消息操作条 / 回到底部 / 流式光标） ===== */
.ai-msg-actions {
  display: inline-flex;
  gap: 2px;
  vertical-align: bottom;
}
.ai-jump-bottom {
  position: absolute;
  right: 18px;
  bottom: 92px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 5;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.ai-jump-bottom:hover { transform: translateY(-2px); background: rgba(var(--accent-rgb), 0.18); }
.ai-stream-cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  border-radius: 2px;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: ai-cursor-blink 0.9s steps(2, start) infinite;
}
@keyframes ai-cursor-blink { to { visibility: hidden; } }

/* ===== 消息泡视觉升级：代码卡片 / 引用 / 表格 / 连续消息紧凑化 ===== */
/* 代码卡片（renderAssistantContent 把 <pre> 包成 .ai-code） */
.ai-code {
  margin: 8px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #1e1f26;
  box-shadow: 0 3px 12px rgba(0,0,0,0.22);
}
.ai-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px 5px 12px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ai-code-lang {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ai-code-copy {
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ai-code-copy:hover { background: rgba(255,255,255,0.12); color: #fff; }
.ai-code pre {
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 12px !important;
}
/* 引用块 */
.ai-msg .ai-bubble blockquote {
  margin: 6px 0;
  padding: 6px 12px;
  border-left: 3px solid rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.06);
  border-radius: 4px 10px 10px 4px;
  color: var(--text-soft);
}
/* 表格（模型偶尔输出 HTML 表格） */
.ai-msg .ai-bubble table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12.5px;
  width: 100%;
}
.ai-msg .ai-bubble th,
.ai-msg .ai-bubble td {
  border: 1px solid rgba(127,127,127,0.25);
  padding: 4px 8px;
  text-align: left;
}
.ai-msg .ai-bubble th { background: rgba(var(--accent-rgb), 0.10); font-weight: 600; }
/* 同角色连续消息紧凑化：间距收窄 + 圆角连贯 */
.ai-msg.assistant + .ai-msg.assistant:not(.is-council) { margin-top: -6px; }
.ai-msg.assistant + .ai-msg.assistant:not(.is-council) .ai-bubble { border-top-left-radius: 8px; }
.ai-msg.user + .ai-msg.user { margin-top: -6px; }
.ai-msg.user + .ai-msg.user .ai-bubble { border-top-right-radius: 8px; }
/* 头像微悬浮 */
.ai-msg .ai-avatar { transition: transform 0.18s ease; }
.ai-msg:hover .ai-avatar { transform: translateY(-1px) scale(1.05); }

/* ===== 媒体消息脱壳（has-media：生图卡/内联图为主体的消息） =====
 * 问题：气泡 max-width:80% + padding + 图片 max-height 联合作用，
 *       图片实际只占面板一半宽且被"文字气泡"包着，观感突兀。
 * 方案：媒体消息的气泡让位——去背景/边框/内边距，宽度放开到 96%，
 *       视觉主体变成媒体卡片本身（类似主流 IM 的图片消息）。 */
.ai-msg.has-media .ai-bubble {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 96%;
  width: fit-content;
}
.ai-msg.has-media:hover .ai-bubble { box-shadow: none; }
[data-theme="dark"] .ai-msg.has-media .ai-bubble { background: transparent; box-shadow: none; }
/* 媒体消息里若还有文字段落，给文字一个轻量底衬保持可读性 */
.ai-msg.has-media .ai-bubble > p {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 12px;
  padding: 8px 12px;
  width: fit-content;
  max-width: 100%;
}
[data-theme="dark"] .ai-msg.has-media .ai-bubble > p {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.08);
}
/* 生图卡在脱壳后自带完整卡片感，撑满可用宽 */
.ai-msg.has-media .ai-img-card-wrap { width: 100%; }
/* 内联图（对话中贴图/URL 图）也放开尺寸：占满气泡宽、高度上限提高 */
.ai-msg.has-media .ai-img-figure { margin: 2px 0; }
.ai-msg.has-media .ai-inline-img {
  max-height: 420px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 3px 12px rgba(15,23,42,0.10);
}
[data-theme="dark"] .ai-msg.has-media .ai-inline-img {
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 3px 12px rgba(0,0,0,0.35);
}
/* 用户消息带图附件：不脱壳（保留气泡底色），仅放大缩略图 140px → 200px */
.ai-msg.user .ai-bubble .ai-inline-img[style*="max-height:140px"] { max-height: 200px !important; }
/* 操作条在脱壳消息中挂在媒体下方而不是悬浮在透明气泡里 */
.ai-msg.has-media .ai-msg-actions { margin-top: 4px; }

/* ---- v1.20.7 AI 面板打磨（主任务：对话，工具次要） ---- */
.ai-fab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.55), 0 0 0 3px rgba(var(--accent-rgb), 0.35);
}
.ai-panel {
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  box-shadow: var(--glass-shadow), 0 18px 48px rgba(0, 0, 0, 0.12);
}
.ai-panel[hidden] { display: none; }
.ai-head {
  background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.08), transparent);
}
.ai-tool-btn {
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ai-tool-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ai-suggestions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ai-msg.user .ai-bubble {
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.28);
}
#ai-send {
  border-radius: 999px;
}
#ai-send:focus-visible,
#ai-stop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ai-empty p {
  color: var(--text-soft);
  max-width: 28em;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
 * v1.20.9 AI 面板布局 + 统一 SVG 图标
 * ============================================================ */
.ui-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
}
.ui-ico svg {
  width: 1em;
  height: 1em;
  display: block;
}

.ai-fab {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--accent-2)));
  box-shadow:
    0 12px 28px rgba(var(--accent-rgb), 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}
.ai-fab:hover { transform: scale(1.06) rotate(-4deg); }
.ai-fab-icon.ui-ico { font-size: 24px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); }

.ai-panel {
  width: min(440px, calc(100vw - 24px));
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  box-shadow: var(--glass-shadow), 0 22px 56px rgba(0, 0, 0, 0.12);
}
.ai-logo.ui-ico {
  font-size: 20px;
  color: var(--accent);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
}
.ai-head {
  padding: 10px 12px;
  gap: 8px;
  background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.08), transparent);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}
.ai-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 140px;
}
.ai-head-left select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 180px;
}
.ai-head-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex: 1 1 200px;
}
.ai-head-group {
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 999px;
  padding: 2px;
  gap: 1px;
}
[data-theme="dark"] .ai-head-group {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
.ai-tool-btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  gap: 4px;
}
.ai-tool-btn .ai-tool-ico.ui-ico { font-size: 13px; }
.ai-tool-btn .ai-tool-txt { font-size: 11px; font-weight: 550; }
.ai-close-btn {
  margin-left: 2px;
  opacity: 0.75;
}
.ai-close-btn:hover { opacity: 1; color: #e04e75; background: rgba(224, 78, 117, 0.1); }

.ai-messages { padding: 14px 14px 10px; gap: 14px; }
.ai-empty {
  padding: 28px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ai-empty-logo.ui-ico {
  font-size: 42px;
  color: var(--accent);
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.16), rgba(255,255,255,0.35));
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.18);
  animation: float 3.5s ease-in-out infinite;
}
.ai-empty p {
  margin: 0;
  max-width: 26em;
  text-align: center;
  color: var(--text-soft);
}
.ai-suggestions {
  width: min(100%, 320px);
  margin-top: 4px;
}
.ai-suggestions button {
  border-radius: 999px;
  border-style: solid;
  border-color: rgba(var(--accent-rgb), 0.16);
  background: rgba(255, 255, 255, 0.35);
  padding: 9px 14px;
  text-align: left;
}
.ai-suggestions button:hover {
  background: rgba(var(--accent-rgb), 0.12);
  transform: translateX(2px);
}

.ai-msg .ai-avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 13px;
}
.ai-msg .ai-bubble {
  border-radius: 16px 16px 16px 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.ai-msg.user .ai-bubble {
  border-radius: 16px 16px 6px 16px;
}

.ai-foot {
  padding: 10px 12px 12px;
  background: linear-gradient(to top, rgba(var(--accent-rgb), 0.05), transparent);
}
.ai-input-row {
  border-radius: 16px;
  padding: 5px;
  gap: 4px;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
}
[data-theme="dark"] .ai-input-row { background: rgba(255, 255, 255, 0.05); }
.ai-attach-btn {
  border-radius: 12px;
  height: 36px;
  padding: 0 10px;
  gap: 4px;
}
.ai-attach-btn .ai-tool-ico.ui-ico { font-size: 15px; }
#ai-input {
  min-height: 36px;
  max-height: 140px;
  padding: 8px 10px;
  line-height: 1.45;
  resize: none;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  flex: 1;
  min-width: 0;
}
#ai-send.ai-send-btn,
#ai-stop.ai-stop-btn {
  height: 36px;
  min-width: 36px;
  border-radius: 12px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#ai-send .ai-tool-ico.ui-ico { font-size: 15px; }
#ai-stop .ai-tool-ico.ui-ico { font-size: 13px; }

@container aipanel (max-width: 560px) {
  .ai-tool-btn .ai-tool-txt { display: none; }
  .ai-tool-btn { padding: 0 8px; min-width: 30px; justify-content: center; }
  .ai-attach-btn .ai-tool-txt { display: none; }
  .ai-attach-btn { padding: 0 9px; }
  #ai-send .ai-tool-txt,
  #ai-stop .ai-tool-txt { display: none; }
  #ai-send, #ai-stop { width: 36px; padding: 0; }
}

@media (max-width: 480px) {
  .ai-panel {
    top: 8px;
    right: 8px;
    left: 8px;
    width: auto;
    height: calc(100vh - 16px); height: calc(100dvh - 16px);
    max-width: none;
    border-radius: 16px;
  }
  .ai-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; border-radius: 16px; }
}

/* ============================================================
 * v1.21.5 AI 面板布局重整
 * 顶栏两行：① 角色+模型+关闭  ② 工具图标栏
 * 输入区：左附件/语音 · 中输入 · 右发送
 * ============================================================ */

.ai-panel {
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 24px));
  min-width: 300px;
  overflow: hidden;
}

/* —— 顶栏整块 —— */
.ai-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px 10px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
  background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.07), transparent);
}

/* 第 1 行 */
.ai-head-primary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ai-head-primary .ai-logo.ui-ico {
  width: 30px;
  height: 30px;
  font-size: 16px;
  border-radius: 9px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
}
.ai-head-primary select {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 32px;
  padding: 0 26px 0 10px;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background-color: rgba(255, 255, 255, 0.55);
  color: var(--text);
  box-shadow: none;
}
[data-theme="dark"] .ai-head-primary select {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.ai-head-primary .ai-close-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  margin: 0;
  opacity: 0.75;
  border-radius: 10px;
  justify-content: center;
  flex-shrink: 0;
}
.ai-head-primary .ai-close-btn .ai-tool-txt { display: none; }
.ai-head-primary .ai-close-btn:hover {
  opacity: 1;
  color: #e04e75;
  background: rgba(224, 78, 117, 0.12);
}

/* 第 2 行工具栏 */
.ai-head-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ai-head-toolbar .ai-head-group {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
}
[data-theme="dark"] .ai-head-toolbar .ai-head-group {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.ai-head-toolbar .ai-tool-btn {
  height: 30px;
  min-width: 30px;
  padding: 0 8px;
  border: none;
  background: transparent;
  border-radius: 999px;
  gap: 4px;
  color: var(--text-soft);
}
.ai-head-toolbar .ai-tool-btn:hover {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}
.ai-head-toolbar .ai-tool-btn.is-active,
.ai-head-toolbar .ai-tool-btn[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  font-weight: 600;
}
.ai-head-toolbar .ai-tool-ico.ui-ico { font-size: 14px; }
/* 默认窄面板：隐藏文字，只留图标，整齐一行 */
.ai-head-toolbar .ai-tool-txt { display: none; }

@container aipanel (min-width: 520px) {
  .ai-head-toolbar .ai-tool-txt {
    display: inline;
    font-size: 11px;
    font-weight: 550;
  }
  .ai-head-toolbar .ai-tool-btn { padding: 0 10px; }
}

/* 旧选择器兼容（若仍被 JS 引用结构外的 left/right） */
.ai-head-left, .ai-head-right { display: contents; }

/* —— 消息区 —— */
.ai-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 14px 10px;
  gap: 12px;
}
.ai-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 16px 24px;
  min-height: 200px;
}
.ai-empty-logo.ui-ico {
  font-size: 40px;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  color: var(--accent);
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.14), rgba(255,255,255,0.4));
  border: 1px solid rgba(var(--accent-rgb), 0.16);
}
.ai-empty p {
  margin: 0;
  text-align: center;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.55;
  max-width: 22em;
}
.ai-suggestions {
  width: min(100%, 300px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-suggestions button {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(255, 255, 255, 0.4);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ai-suggestions button:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  transform: none;
}
[data-theme="dark"] .ai-suggestions button {
  background: rgba(255, 255, 255, 0.05);
}

/* —— 输入区 —— */
.ai-foot {
  flex-shrink: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.1);
  background: linear-gradient(to top, rgba(var(--accent-rgb), 0.04), transparent);
}
.ai-input-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: rgba(255, 255, 255, 0.42);
  min-width: 0;
}
[data-theme="dark"] .ai-input-row {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.ai-input-row:focus-within {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
.ai-attach-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}
.ai-attach-btn:hover {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}
.ai-attach-btn .ai-tool-txt { display: none; }
.ai-attach-btn .ai-tool-ico.ui-ico { font-size: 16px; }
.ai-input-row #ai-input {
  grid-column: auto;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  max-height: 120px;
  margin: 0;
  padding: 8px 4px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  resize: none;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
}
.ai-send-btn,
.ai-stop-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0 !important;
  border-radius: 11px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ai-send-btn .ai-tool-txt,
.ai-stop-btn .ai-tool-txt { display: none; }
.ai-send-btn .ai-tool-ico.ui-ico { font-size: 15px; color: #fff; }
.ai-stop-btn .ai-tool-ico.ui-ico { font-size: 13px; }
.ai-tip {
  min-height: 0;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
}
.ai-tip:empty { display: none; margin: 0; }

/* stop 与 send 占同一格：stop 显示时替换 send */
.ai-input-row:has(#ai-stop:not([hidden])) #ai-send { display: none; }

@media (max-width: 480px) {
  .ai-panel {
    top: 8px;
    right: 8px;
    left: 8px;
    width: auto;
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    max-width: none;
    border-radius: 16px;
  }
  .ai-head-primary {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 6px;
  }
}