/* ============================================================
   ai-panel.css — AI 助手「操作中心」视觉（2026-09-08 重做）
   设计：从聊天窗隐喻 → 操作卡流。全部走 writer 令牌，明暗自适应。
   行为性规则（停靠/拖拽/缩放/z-index）自旧 writer.css 迁移保留。
   ============================================================ */

/* ---------- 布局容器（行为保留） ---------- */
.ai-panel-container{ width:420px; flex-shrink:0; border-left:1px solid var(--border); background:var(--bg-card); display:none; flex-direction:column; overflow:hidden; }
.ai-panel-container.show{ display:flex; }

.writer-workspace.dock-right .ai-panel-docked{ display:flex; }
.ai-panel-docked{ display:none; flex-direction:column; width:420px; flex-shrink:0; background:var(--bg-card); border-left:1px solid var(--border); overflow:hidden; position:relative; }

@media (max-width: 1024px) {
  .ai-panel-docked{ display:none !important; }
}

/* ---------- 面板头：状态点 + 上下文（取代"AI 写作助手"标题栏） ---------- */
.ai-panel-docked-header, .ai-popup-header{ display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--border-light); flex-shrink:0; min-height:48px; }
.ai-status-dot{ width:8px; height:8px; border-radius:50%; background:var(--primary); flex:none; opacity:.85; animation:aiDotPulse 2.4s ease-in-out infinite; }
@keyframes aiDotPulse{ 0%,100%{opacity:.45} 50%{opacity:1} }
.ai-header-context{ flex:1; min-width:0; font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-header-sub{ font-size:12px; color:var(--text-mute); font-weight:400; }
.ai-header-actions{ display:flex; gap:2px; align-items:center; flex:none; }
.ai-icon-btn{ background:transparent; border:none; color:var(--text-mute); width:30px; height:30px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s; padding:0; }
.ai-icon-btn:hover{ background:var(--bg-hover); color:var(--text); }
.ai-panel-docked-undock, .ai-popup-dock-btn, .ai-popup-close{ background:transparent; border:none; color:var(--text-mute); width:30px; height:30px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.ai-panel-docked-undock:hover, .ai-popup-dock-btn:hover{ background:var(--bg-hover); color:var(--text); }
.ai-popup-close:hover{ background:var(--bg-hover); color:var(--text); }
.ai-popup-title{ display:none; }
.ai-popup-actions{ display:flex; align-items:center; gap:2px; margin-left:auto; flex:none; }

/* ---------- 上下文条（保留 ID，视觉弱化为副行） ---------- */
.ai-panel-docked-context, .ai-popup-context{ padding:8px 14px; font-size:12px; border-bottom:1px solid var(--border-light); background:var(--bg); flex-shrink:0; }
.ai-context-label{ color:var(--text-mute); font-size:12px; }
.ai-context-value{ color:var(--text-soft); font-weight:500; margin-left:6px; }

/* ---------- 操作流（消息区） ---------- */
.ai-panel-docked-messages, .ai-popup-messages{ flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.ai-popup-messages{ min-height:140px; }

.ai-message{ max-width:100%; animation:aiFadeIn .22s ease-out; }
@keyframes aiFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.ai-message .ai-msg-content p{ margin:0 0 10px; }
.ai-message .ai-msg-content p:last-child{ margin-bottom:0; }

/* 用户指令：右对齐紧凑 chip */
.ai-message-user{ align-self:flex-end; max-width:88%; }
.ai-message-user .ai-msg-content{ background:var(--primary-50); color:var(--text); border:1px solid color-mix(in srgb, var(--primary) 22%, transparent); border-radius:10px 10px 3px 10px; padding:7px 11px; font-size:13px; line-height:1.55; }
.ai-message-user .ai-msg-content p{ margin:0; }

/* 系统/提示：安静的文字行 */
.ai-message-system{ align-self:stretch; }
.ai-message-system .ai-msg-content{ color:var(--text-soft); font-size:12.5px; line-height:1.6; padding:2px 1px; }
.ai-message-system .ai-msg-content p{ color:var(--text-soft); }

/* 错误强调 */
.ai-message-system .ai-msg-content p[style*="#ef4444"], .ai-message-error .ai-msg-content{ color:var(--danger, #e24b4a); }

/* 操作按钮消息：作为卡片的容器 */
.ai-message-action{ align-self:stretch; }
.ai-message-action .ai-msg-content{ padding:0; }

/* ---------- 操作卡（核心新组件） ---------- */
.ai-card{ border:1px solid var(--border); border-radius:12px; background:var(--bg); padding:11px 12px; }
.ai-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.ai-card-label{ font-size:12px; font-weight:500; color:var(--primary); letter-spacing:.1px; }
.ai-card-meta{ margin-left:auto; font-size:11px; color:var(--text-mute); }
.ai-card-body{ font-size:13px; line-height:1.65; color:var(--text); }
.ai-card-body p{ margin:0 0 8px; }
.ai-card-body p:last-child{ margin-bottom:0; }
.ai-card-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }

.ai-btn{ border:1px solid var(--border); background:transparent; color:var(--text-soft); font-size:12px; padding:5px 11px; border-radius:8px; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.ai-btn:hover{ background:var(--bg-hover); color:var(--text); }
.ai-btn-primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.ai-btn-primary:hover{ background:var(--primary-light); border-color:var(--primary-light); color:#fff; }
.ai-btn-text{ border:none; padding:5px 7px; color:var(--text-mute); }
.ai-btn-text:hover{ background:transparent; color:var(--danger, #e24b4a); }

/* diff 对比（润色/重写） */
.ai-diff{ display:flex; flex-direction:column; gap:8px; }
.ai-diff-block{ padding:8px 10px; border-radius:8px; font-size:12.5px; line-height:1.6; }
.ai-diff-orig{ background:transparent; border:1px dashed var(--border); color:var(--text-soft); }
.ai-diff-new{ background:color-mix(in srgb, var(--primary) 8%, transparent); border:1px solid color-mix(in srgb, var(--primary) 28%, transparent); color:var(--text); }
.ai-diff-tag{ font-size:11px; color:var(--text-mute); margin-bottom:4px; }

/* 媒体卡：图片 / 3D 场景 */
.ai-media-frame{ width:100%; border-radius:10px; overflow:hidden; background:var(--surface-2, var(--bg)); border:1px solid var(--border-light); margin-top:2px; }
.ai-media-frame img{ display:block; width:100%; height:auto; }
.ai-scene-host{ width:100%; height:260px; position:relative; background:var(--surface-2, var(--bg)); }
.ai-media-hint{ font-size:11px; color:var(--text-mute); margin-top:6px; }

/* 保留旧渲染器的兼容类（历史消息重新显示时） */
.ai-content-section{ border:1px solid var(--border); border-radius:12px; background:var(--bg); padding:11px 12px; }
.ai-content-label{ font-size:12px; font-weight:500; color:var(--primary); }

/* ---------- 空状态 ---------- */
.ai-empty{ margin:auto; text-align:center; padding:28px 18px; }
.ai-empty-icon{ width:40px; height:40px; margin:0 auto 12px; border-radius:12px; background:color-mix(in srgb, var(--primary) 10%, transparent); display:flex; align-items:center; justify-content:center; color:var(--primary); }
.ai-empty-title{ font-size:14px; font-weight:500; color:var(--text); margin:0 0 5px; }
.ai-empty-sub{ font-size:12px; color:var(--text-mute); margin:0; line-height:1.6; }

/* ---------- 加载指示 ---------- */
.ai-popup-loading, .ai-panel-docked-loading{ display:flex; align-items:center; gap:9px; padding:6px 2px; color:var(--text-mute); font-size:12.5px; flex-shrink:0; }
.ai-loading-spinner{ width:14px; height:14px; border:2px solid color-mix(in srgb, var(--primary) 25%, transparent); border-top-color:var(--primary); border-radius:50%; animation:aiSpin .8s linear infinite; flex:none; }
@keyframes aiSpin{ to{ transform:rotate(360deg); } }

/* ---------- 输入区：快捷词 + 紧凑输入 ---------- */
.ai-panel-docked-input, .ai-popup-input{ padding:10px 14px 14px; border-top:1px solid var(--border); flex-shrink:0; position:relative; }
.ai-input-resize-handle{ width:32px; height:4px; background:var(--border); border-radius:2px; cursor:ns-resize; margin:0 auto 8px; opacity:0; transition:opacity .15s; }
.ai-panel-docked-input:hover .ai-input-resize-handle, .ai-popup-input:hover .ai-input-resize-handle{ opacity:.4; }
.ai-input-resize-handle:hover{ opacity:.8 !important; }

.ai-quick-words{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; }
.ai-quick-word{ display:inline-flex; align-items:center; gap:5px; border:none; background:transparent; color:var(--text-mute); font-size:12px; padding:4px 9px; border-radius:7px; cursor:pointer; transition:background .15s, color .15s; }
.ai-quick-word svg{ flex:none; opacity:.85; }
.ai-quick-word span{ line-height:1; }
.ai-quick-word:hover{ background:var(--bg-hover); color:var(--text); }
.ai-quick-word.active{ background:var(--primary-50); color:var(--primary); font-weight:500; }

.ai-input-container{ position:relative; display:flex; align-items:flex-end; }
.ai-panel-docked-input .ai-input, .ai-popup-input .ai-input{ min-height:56px; max-height:180px; height:64px; padding:10px 44px 10px 46px; font-size:13px; line-height:1.5; }
.ai-input{ width:100%; resize:none; background:var(--bg); border:1px solid var(--border); border-radius:10px; color:var(--text); font-family:inherit; transition:border-color .15s; }
.ai-input:focus{ outline:none; border-color:color-mix(in srgb, var(--primary) 55%, var(--border)); }
.ai-input::placeholder{ color:var(--text-mute); }

.ai-upload-btn{ position:absolute; left:10px; bottom:9px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--text-mute); cursor:pointer; border-radius:7px; transition:color .15s, background .15s; }
.ai-upload-btn:hover{ color:var(--text); background:var(--bg-hover); }
.ai-send-btn{ position:absolute; right:8px; bottom:8px; width:30px; height:30px; border:none; border-radius:9px; background:var(--primary); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:opacity .15s, background .15s; }
.ai-send-btn:hover{ background:var(--primary-light); }
.ai-send-btn:disabled{ opacity:.35; cursor:default; }

/* ---------- 浮动面板（行为保留：fixed + 拖拽 + 缩放） ---------- */
.ai-popup-panel{ position:fixed; width:420px; min-height:480px; max-height:640px; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.14); z-index:var(--z-overlay); display:flex; flex-direction:column; overflow:hidden; }
.ai-popup-panel.dragging{ opacity:.98; }
.ai-drag-handle{ position:absolute; top:6px; left:50%; transform:translateX(-50%); width:36px; height:4px; background:var(--border); border-radius:2px; opacity:.35; cursor:grab; transition:opacity .15s; }
.ai-drag-handle:hover{ opacity:.7; }
.ai-drag-handle:active{ cursor:grabbing; }
.ai-popup-mode-switch{ display:none; }

/* ---------- 浮动球 ---------- */
.ai-float-ball{ position:fixed; right:24px; bottom:24px; width:48px; height:48px; background:var(--primary); border:1px solid var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent); z-index:var(--z-modal); transition:transform .15s, box-shadow .15s; }
.ai-float-ball:hover{ transform:translateY(-2px); }
.ai-float-ball:active{ transform:translateY(0); }
.ai-ball-icon{ display:flex; align-items:center; justify-content:center; color:#fff; }
.ai-ball-badge{ position:absolute; top:-2px; right:-2px; background:var(--danger, #e24b4a); color:#fff; font-size:10px; padding:2px 5px; border-radius:8px; font-weight:500; min-width:16px; text-align:center; border:2px solid var(--bg-card); }

/* ---------- 停靠占位（拖出时） ---------- */
.ai-dock-placeholder{ position:fixed; right:0; top:500px; width:8px; height:320px; background:color-mix(in srgb, var(--primary) 45%, transparent); border-radius:8px 0 0 8px; display:none; z-index:var(--z-dropdown); pointer-events:none; transition:all .2s ease; }
.ai-dock-placeholder.expanded{ width:440px; height:400px; right:24px; top:500px; background:color-mix(in srgb, var(--primary) 4%, transparent); border:2px dashed color-mix(in srgb, var(--primary) 55%, transparent); border-radius:14px; }
.ai-dock-placeholder::before{ content:'停靠 AI 助手'; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--accent-light, var(--primary)); opacity:0; transition:opacity .2s; white-space:nowrap; background:color-mix(in srgb, var(--primary) 8%, transparent); padding:6px 12px; border-radius:8px; }
.ai-dock-placeholder.expanded::before{ opacity:1; right:50%; transform:translate(50%,-50%); }

/* ---------- 小屏适配 ---------- */
@media (max-width: 640px) {
  .ai-popup-panel{ left:10px; right:10px; width:auto; min-height:420px; max-height:72vh; bottom:80px; }
  .ai-panel-docked-messages, .ai-popup-messages{ padding:12px 10px; }
  .ai-panel-docked-input, .ai-popup-input{ padding:8px 10px 10px; }
}