/* 今天页的 AI 对话面板和 AI 设置（ai.js）。沿用 app.css 的颜色变量和 .panel / .btn / .input，只补对话特有的样式。 */
.ai-chat .panel-head h2 { flex: 1; text-align: center; }
.ai-log { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; padding-bottom: 12px; }
.ai-msg { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-msg.user { align-self: flex-end; background: var(--text); color: var(--bg); border-bottom-right-radius: 6px; }
.ai-msg.assistant { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 6px; }
.ai-msg.note { align-self: center; max-width: 100%; background: none; padding: 2px 8px; font-size: 12px; color: var(--text-2); text-align: center; }
.ai-msg.note.warn { background: var(--mid-soft); color: var(--mid); padding: 8px 12px; border-radius: 12px; font-weight: 600; }
.ai-msg.note .btn { display: flex; margin-top: 8px; min-height: 38px; }
.ai-msg.faint { color: var(--text-3); }
.ai-confirm { align-self: stretch; background: var(--surface); border-radius: 16px; padding: 12px 14px; }
.ai-confirm-text { font-size: 14px; margin-top: 4px; overflow-wrap: anywhere; }
.ai-confirm .btns { margin-top: 10px; }
.ai-confirm .btn { min-height: 40px; background: var(--surface-2); }
.ai-confirm .btn-primary { background: var(--text); }
.ai-usage { text-align: center; padding: 0 0 4px; font-variant-numeric: tabular-nums; }
.ai-thumbs { display: flex; gap: 8px; padding: 0 16px; }
.ai-thumbs:empty { display: none; }
.ai-thumb { border: 0; padding: 0; background: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; }
.ai-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px calc(env(safe-area-inset-bottom) + 10px); border-top: 1px solid var(--hair); background: var(--bg); }
.ai-composer .input { flex: 1; min-height: 42px; max-height: 140px; padding: 10px 14px; border-radius: 21px; line-height: 1.4; }
.ai-attach { width: 42px; height: 42px; flex: none; cursor: pointer; }
.ai-attach svg { width: 20px; height: 20px; }
.ai-send { flex: none; width: 42px; min-height: 42px; padding: 0; border-radius: 50%; }
.ai-code { background: var(--in-sheet); border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; margin: 6px 0 10px; user-select: all; }
@media (min-width: 1024px) {
  .ai-chat { left: auto; width: 440px; box-shadow: -12px 0 40px rgba(0,0,0,.12); }
}
@media (prefers-reduced-motion: reduce) { .ai-chat { transition: none; } }