/* ============================================================
   zone-d.css — CHEFSMART 编辑器 v7
   包含：D区AI助手面板（.panel-d / .zd）及其子元素
         AI 对话面板、消息气泡、快捷按钮、输入栏
   ============================================================ */

/* ── D栏 — 主容器 ── */
.panel-d, .zd {
  flex: 0 0 18%;
  min-width: 200px;
  display: flex; flex-direction: column;
  background: var(--ui-white);
  overflow: hidden;
  border-left: 1px solid var(--ui-border);
}

/* ============================================================
   AI PANEL — D区右侧
   ============================================================ */
.ai-panel, .zd__panel {
  flex: 1; min-width: 200px;
  display: flex; flex-direction: column;
  background: var(--ui-white);
  overflow: hidden;
}
.ai-panel-header, .zd__header {
  height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--ui-border);
}
.ai-panel-title, .zd__title { font-size: 13px; font-weight: 600; color: var(--ui-text); }
.ai-panel-status, .zd__status {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--ui-sub);
}
.ai-panel-status-dot, .zd__status-dot { width: 6px; height: 6px; background: #4ADE80; }
.ai-panel-body, .zd__body { flex: 1; overflow-y: auto; padding: 14px 16px; }

/* ── AI 消息气泡 ── */
.ai-bubble, .zd__bubble {
  margin-bottom: 10px; padding: 10px 14px;
  font-size: 12px; line-height: 1.6;
  max-width: 90%;
}
.ai-bubble-user, .zd__bubble--user {
  background: var(--color-primary);
  color: #FFF; margin-left: auto;
  border-radius: 0;
}
.ai-bubble-ai, .zd__bubble--ai {
  background: #F3F4F6;
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
}

/* ── AI 快捷按钮 ── */
.ai-quick-btns, .zd__quick-btns {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 16px; flex-shrink: 0;
  border-top: 1px solid var(--ui-border);
}
.ai-quick-btn, .zd__quick-btn {
  padding: 8px 16px;
  font-size: 12px; font-weight: 600; color: var(--ui-sub);
  border: 1px solid var(--ui-border); background: var(--ui-white);
  cursor: pointer; font-family: inherit;
}
.ai-quick-btn:hover, .zd__quick-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── AI 输入栏 ── */
.ai-panel-input, .zd__input {
  flex-shrink: 0; padding: 12px 16px;
  border-top: 1px solid var(--ui-border);
  display: flex; gap: 8px; align-items: center;
}
.ai-panel-input input, .zd__input input {
  flex: 1; height: 40px;
  border: 1px solid var(--ui-border); background: var(--ui-surface);
  padding: 0 12px; font-size: 12px; color: var(--ui-text); outline: none;
  font-family: inherit;
}
.ai-panel-input input:focus, .zd__input input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(10,186,181,0.1);
}
.ai-panel-input .ai-send-btn, .zd__input .zd__send-btn {
  height: 40px; padding: 0 16px;
  background: var(--color-primary); color: #FFF;
  font-size: 13px; font-weight: 600; border: none;
  cursor: pointer; font-family: inherit;
}
.ai-panel-input .ai-send-btn:hover, .zd__input .zd__send-btn:hover { background: var(--color-primary-hover); }

/* ============================================================
   AI Input Bar — v6 style（旧版 B区内嵌）
   ============================================================ */
.ai-input-wrap {
  flex-shrink: 0; padding: 14px 20px;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-white);
  display: flex; gap: 10px; align-items: center;
}
.ai-input-wrap input {
  flex: 1; height: 40px;
  border: 1px solid var(--ui-border); background: var(--ui-surface);
  padding: 0 14px; font-size: 12px; color: var(--ui-text); outline: none;
  font-family: inherit;
}
.ai-input-wrap input::placeholder { color: var(--ui-muted); }
.ai-input-wrap input:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px rgba(10,186,181,0.1);
}
.ai-input-wrap .ai-btn-send {
  height: 40px; padding: 0 20px;
  background: var(--color-primary); color: #FFF;
  font-size: 13px; font-weight: 600; border: none;
  cursor: pointer; letter-spacing: 1px; font-family: inherit;
}
.ai-input-wrap .ai-btn-send:hover { background: var(--color-primary-hover); }
.ai-input-wrap .ai-btn-sec {
  height: 40px; padding: 0 14px;
  background: var(--ui-white); color: var(--ui-sub);
  border: 1px solid var(--ui-border);
  font-size: 12px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.ai-input-wrap .ai-btn-sec:hover {
  background: var(--ui-surface); border-color: #D0D5DD;
}