/* Story Elf — AI 写作伴侣组件样式 v2.7 */

/* ============================================================
 * 浮动模式（默认）— read.html, work.html, index.html
 * ============================================================ */

#story-elf {
  position: fixed;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

/* 头像 */
.elf-avatar {
  width: 150px;
  height: 150px;
  border-radius: 14px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.elf-avatar:hover {
  transform: scale(1.06);
}

.elf-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 消息区 — 浮动模式: 默认隐藏，toggle 后显示；嵌入模式始终可见 */
.elf-chat-messages {
  display: none;  /* 浮动模式默认隐藏，.elf-embedded 覆盖 */
  flex-direction: column;
  gap: 0.4rem;
  min-height: 120px;
  max-height: 360px;
  overflow-y: auto;
  padding: 0.5rem;
  width: 300px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 4px;
}

/* 输入栏 — 浮动模式: 默认隐藏；嵌入模式始终可见 */
.elf-chat-input-row {
  display: none;  /* 浮动模式默认隐藏，.elf-embedded 覆盖 */
  gap: 0.3rem;
  padding: 0.4rem 0.5rem;
  align-items: flex-end;
  width: 300px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* textarea 输入框 */
.elf-chat-input {
  flex: 1;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1.5;
  outline: none;
  resize: none;
  min-height: 60px;
  max-height: 120px;
  font-family: inherit;
}

.elf-chat-input:focus {
  border-color: var(--accent-light);
}

/* 发送按钮 */
.elf-send-btn {
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--accent);
  color: var(--text-on-accent, #fff);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.elf-send-btn:hover {
  background: var(--accent-light);
}

/* 消息泡泡 */
.elf-chat-msg {
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  max-width: 90%;
}

.elf-chat-msg.user {
  align-self: flex-end;
  background: rgba(124, 58, 237, 0.2);
  color: var(--text);
}

.elf-chat-msg.ai {
  align-self: flex-start;
  background: var(--bg-hover);
  color: var(--text-dim);
  font-size: var(--md-font-size, 0.82rem);
  line-height: var(--md-line-height, 1.6);
}
/* AI 消息内 Markdown 元素统一间距 */
.elf-chat-msg.ai p { margin: var(--md-p-margin, 0.5rem 0); }
.elf-chat-msg.ai h1, .elf-chat-msg.ai h2, .elf-chat-msg.ai h3 { margin: var(--md-heading-margin, 0.3rem 0 0.1rem); }
.elf-chat-msg.ai ul, .elf-chat-msg.ai ol { margin: var(--md-list-margin, 0.2rem 0); padding-left: var(--md-list-padding, 1.2rem); }
.elf-chat-msg.ai code { background: var(--md-code-bg, rgba(var(--accent-rgb), 0.1)); padding: var(--md-code-padding, 0.1rem 0.3rem); border-radius: var(--md-code-radius, 3px); font-size: var(--md-code-font-size, 0.78rem); }
.elf-chat-msg.ai pre { background: var(--md-pre-bg, rgba(0,0,0,0.2)); padding: var(--md-pre-padding, 0.4rem 0.6rem); border-radius: var(--md-pre-radius, 4px); overflow-x: auto; }
.elf-chat-msg.ai pre code { background: none; padding: 0; }

/* Agent 步骤消息 */
.elf-chat-msg.step {
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.8;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: transparent;
  max-width: 95%;
  align-self: flex-start;
}

.elf-chat-msg.step.error {
  color: var(--error);
  opacity: 1;
}

/* 工作块内的 Markdown 消息也统一 */
.elf-process-msg { font-size: var(--md-font-size, 0.82rem); line-height: var(--md-line-height, 1.6); }
.elf-process-msg p { margin: var(--md-p-margin, 0.5rem 0); }
.elf-process-msg h1, .elf-process-msg h2, .elf-process-msg h3 { margin: var(--md-heading-margin, 0.3rem 0 0.1rem); }
.elf-process-msg ul, .elf-process-msg ol { margin: var(--md-list-margin, 0.2rem 0); padding-left: var(--md-list-padding, 1.2rem); }
.elf-process-msg code { background: var(--md-code-bg, rgba(var(--accent-rgb), 0.1)); padding: var(--md-code-padding, 0.1rem 0.3rem); border-radius: var(--md-code-radius, 3px); font-size: var(--md-code-font-size, 0.78rem); }
.elf-process-msg pre { background: var(--md-pre-bg, rgba(0,0,0,0.2)); padding: var(--md-pre-padding, 0.4rem 0.6rem); border-radius: var(--md-pre-radius, 4px); overflow-x: auto; }
.elf-process-msg pre code { background: none; padding: 0; }

/* ============================================================
 * 嵌入模式 — write.html 左栏
 * 通过 .elf-embedded class 激活
 * ============================================================ */

#story-elf.elf-embedded {
  position: static;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: auto;
}

/* 嵌入模式: 消息区撑满剩余空间，允许滚动 */
#story-elf.elf-embedded .elf-chat-messages {
  display: flex;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  width: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

/* 嵌入模式: 头像缩小到 70px，头朝右 (scaleX 翻转)，底部对齐 */
#story-elf.elf-embedded .elf-avatar {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  flex-shrink: 0;
  align-self: flex-end;
}

#story-elf.elf-embedded .elf-avatar:hover {
  transform: scale(1.08);
}

#story-elf.elf-embedded .elf-img {
  transform: scaleX(-1);
}

/* 嵌入模式: 输入栏固定底部 */
#story-elf.elf-embedded .elf-chat-input-row {
  display: flex;
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  gap: 0.5rem;
  align-items: stretch;
  border: none;
  border-radius: 0;
  background: var(--bg);
  width: auto;
}

/* 嵌入模式: textarea 自适应 */
#story-elf.elf-embedded .elf-chat-input {
  font-size: 0.78rem;
  min-height: 60px;
  max-height: 120px;
}

/* 嵌入模式: 发送按钮（高度随 textarea 自动撑满） */
#story-elf.elf-embedded .elf-send-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
}

/* ============================================================
 * Working Block — Elf 中间步骤（共用于两种模式）
 * ============================================================ */

.elf-working-block {
  margin: 4px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.75rem;
}

.elf-working-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  background: var(--bg-hover);
  cursor: pointer;
  color: var(--text-muted);
  user-select: none;
}

.elf-working-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 2px;
  transition: transform 0.15s;
}

.elf-working-collapsed .elf-working-toggle {
  transform: rotate(-90deg);
}

.elf-working-collapsed .elf-working-body {
  display: none;
}

.elf-working-body {
  padding: 6px 10px;
  max-height: 300px;
  overflow-y: auto;
}

/* Checklist card within working block */
.elf-checklist {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 6px;
}

.elf-checklist-title {
  font-weight: 600;
  margin-bottom: 3px;
  font-size: 0.7rem;
  color: var(--text);
}

.elf-checklist-items {
  line-height: 1.5;
  white-space: pre-wrap;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Process messages and steps within working block */
.elf-process-msg {
  margin: 3px 0;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--text);
}

.elf-process-step {
  margin: 2px 0;
  padding: 2px 6px;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.elf-process-step.error {
  color: var(--error);
}

/* ============================================================
 * Drawer 模式 — write.html 左侧 AI Drawer
 * #story-elf 挂载在 #ai-drawer-panel 内
 * ============================================================ */

#story-elf.elf-drawer {
  position: static;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: auto;
}

/* Drawer 模式: 消息区撑满剩余空间 */
#story-elf.elf-drawer .elf-chat-messages {
  display: flex;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  width: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

/* Drawer 模式: 输入栏固定底部，左留白给头像 */
#story-elf.elf-drawer .elf-chat-input-row {
  display: flex;
  flex-shrink: 0;
  padding: 0.5rem 1rem 0.75rem 86px;
  gap: 0.5rem;
  align-items: stretch;
  border: none;
  border-radius: 0;
  background: transparent;
  width: auto;
}

/* Drawer 模式: 隐藏内部头像（由 ai-drawer-toggle 替代） */
#story-elf.elf-drawer .elf-avatar { display: none; }

#story-elf.elf-drawer .elf-chat-input {
  font-size: 0.78rem;
  height: var(--elf-input-height);
  min-height: var(--elf-input-height);
  max-height: var(--elf-input-height);
  resize: none;
}

#story-elf.elf-drawer .elf-send-btn {
  height: var(--elf-input-height);
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
}