/* ══════════════════════════════════════════════════
   AGENT PAGE — AI 命理顾问
   Layout: Fixed sidebar (280px) + flex chat main
══════════════════════════════════════════════════ */
.agent-page { display:flex; flex-direction:column; height:100%; overflow:hidden; }

/* ── Two-column wrapper ── */
.agent-layout {
  flex:1; display:flex; overflow:hidden; min-height:0;
}

/* ══ LEFT SIDEBAR ══ */
.agent-sidebar {
  width:272px; flex-shrink:0;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow-y:auto;
  padding:1.1rem 0.85rem 1rem;
  gap:0;
}

.agent-sidebar-section { margin-bottom:1.2rem; }
.agent-sidebar-label {
  font-size:10px; text-transform:uppercase; letter-spacing:0.09em;
  color:var(--text-faint); font-weight:700; font-family:var(--font-sans);
  margin-bottom:0.5rem; padding-left:0.2rem;
}

/* Mode buttons */
.agent-modes { display:flex; flex-direction:column; gap:3px; }
.agent-mode-btn {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.6rem 0.7rem; border-radius:0;
  border:1px solid transparent; background:transparent;
  cursor:pointer; transition:all var(--t-fast);
  text-align:left; width:100%; position:relative;
}
.agent-mode-btn:hover {
  background:var(--bg-hover); border-color:var(--border);
}
.agent-mode-btn.active {
  background:color-mix(in srgb, var(--mc) 8%, transparent);
  border-color:color-mix(in srgb, var(--mc) 35%, transparent);
}
.agent-mode-icon { font-size:1.2rem; line-height:1; flex-shrink:0; }
.agent-mode-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.agent-mode-name {
  font-size:var(--text-sm); font-weight:600;
  color:var(--text-primary); line-height:1;
}
.agent-mode-btn.active .agent-mode-name { color:var(--mc); }
.agent-mode-desc { font-size:10px; color:var(--text-faint); line-height:1; font-family:var(--font-mono); }
.agent-mode-active-dot {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:0;
  background:var(--mc);
}

/* Input section */
.agent-input-section { padding:0.1rem 0; }

/* Quick prompts */
.agent-quick-prompts { display:flex; flex-direction:column; gap:4px; }
.agent-quick-btn {
  padding:0.38rem 0.7rem; border-radius:0;
  border:1px solid var(--border); background:var(--bg-subtle);
  font-size:var(--text-xs); color:var(--text-muted);
  cursor:pointer; text-align:left; transition:all var(--t-fast);
  line-height:1.4;
}
.agent-quick-btn:hover {
  border-color:var(--accent-dim); color:var(--accent);
  background:var(--accent-bg);
}


/* ══ MAIN CHAT AREA ══ */
.agent-main {
  flex:1; display:flex; flex-direction:column; overflow:hidden;
  background:var(--base);
  min-width:0;
}

/* Messages area */
.agent-messages {
  flex:1; overflow-y:auto; padding:1.25rem 1.5rem;
  display:flex; flex-direction:column; gap:1rem;
}

/* Empty state */
.agent-empty {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:3rem; text-align:center;
  color:var(--text-muted);
}
.agent-empty-icon { font-size:3rem; margin-bottom:0.75rem; opacity:0.6; }
.agent-empty-title {
  font-family:var(--font-display); font-size:var(--text-lg);
  color:var(--text-secondary); margin-bottom:0.4rem; letter-spacing:0.05em;
}
.agent-empty-desc { font-size:var(--text-sm); font-family:var(--font-serif); line-height:1.7; }

/* Message bubbles */
.agent-msg {
  display:flex; align-items:flex-start; gap:0.6rem;
  animation:fadeUp 0.2s ease;
}
.agent-msg.user { flex-direction:row-reverse; }
.agent-avatar {
  width:32px; height:32px; border-radius:0; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent-b), var(--accent-dark));
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  box-shadow:none;
}
.agent-bubble {
  max-width:82%; padding:0.82rem 1.1rem;
  border-radius:0;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text-primary); font-size:var(--text-sm);
  line-height:1.8; white-space:pre-wrap; word-break:break-word;
  box-shadow:none;
  font-family:var(--font-serif);
}
.agent-msg.user .agent-bubble {
  background:var(--accent); border-color:var(--accent-dark);
  color:#fff; border-radius:0;
  font-family:var(--font-sans);
}
.agent-msg.error .agent-bubble {
  background:var(--accent-bg); border-color:var(--accent-dim); color:var(--accent-b);
}
.agent-thinking { opacity:0.55; font-style:italic; }
.agent-cursor   { animation:blink 0.8s step-end infinite; margin-left:2px; }
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Input area */
.agent-input-wrap {
  display:flex; gap:0.65rem; align-items:flex-end;
  padding:0.85rem 1.5rem 1rem;
  background:var(--surface); border-top:1px solid var(--border);
}
.agent-input {
  flex:1; padding:0.72rem 1rem;
  background:var(--bg-subtle) !important;
  border:1.5px solid var(--border) !important;
  border-radius:0;
  font-size:var(--text-sm) !important; resize:none;
  line-height:1.65; min-height:52px;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.agent-input:focus {
  border-color:var(--accent-dim) !important;
  background:var(--surface) !important;
  box-shadow:none;
}
.agent-send-btn {
  display:flex; align-items:center; justify-content:center; gap:0.3rem;
  padding:0 1.25rem; height:52px; min-width:80px;
  border-radius:0; border:none; cursor:pointer;
  font-size:var(--text-sm); font-weight:600; letter-spacing:0.03em;
  background:linear-gradient(160deg, var(--accent-b), var(--accent));
  color:#fff; box-shadow:none;
  transition:all var(--t-fast);
}
.agent-send-btn:hover { background:linear-gradient(160deg, var(--accent-c), var(--accent-b)); box-shadow:none; transform:translateY(-1px); }
.agent-send-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.agent-send-btn.stop { background:linear-gradient(160deg, #e04040, #a01818); box-shadow:none; }

/* ── Responsive ── */
@media(max-width:900px) {
  .agent-sidebar { width:220px; }
  .agent-messages { padding:1rem; }
  .agent-input-wrap { padding:0.75rem 1rem 0.85rem; }
}
@media(max-width:640px) {
  /* 手机端修复：放弃「左表单 + 右对话」的双栏应用式布局，改自然文档流——
     旧写法把整个生辰表单压进 max-height:220px 的小框里内部滚动，
     用户只能在一小截里上下滑。现在表单完整展开、随页面滚动，输入条吸底。 */
  .agent-page { height:auto; overflow:visible; }
  .agent-layout { flex-direction:column; overflow:visible; }
  .agent-sidebar {
    width:100%; max-height:none; overflow:visible;
    border-right:none; border-bottom:1px solid var(--border);
    padding:0.75rem;
  }
  .agent-main { overflow:visible; }
  .agent-messages { flex:none; overflow:visible; min-height:240px; padding:1rem; }
  /* 输入条吸底：聊天再长，打字框也始终在手边 */
  .agent-input-wrap {
    position:sticky; bottom:0; z-index:20;
    padding:0.6rem 0.75rem 0.7rem;
  }
  .agent-quick-prompts { flex-direction:row; flex-wrap:wrap; }
  .agent-quick-btn { flex:0 0 auto; }
  .agent-usage-note { display:none; }
  .agent-empty { padding:2rem 1rem; }
}

/* ── Module status indicator ── */
.agent-module-status {
  margin-top: 0.6rem; padding: 0.42rem 0.65rem;
  border-radius:0; font-size: var(--text-xs);
  font-family: var(--font-mono); letter-spacing: 0.03em;
}
.agent-status { display: flex; align-items: center; gap: 0.45rem; }
.agent-status.ready   { color: var(--jade); background: rgba(74,122,90,0.08); border: 1px solid rgba(74,122,90,0.25); border-radius:0; padding: 0.38rem 0.6rem; }
.agent-status.computing { color: var(--cyan-b); background: rgba(74,106,138,0.08); border: 1px solid rgba(74,106,138,0.22); border-radius:0; padding: 0.38rem 0.6rem; }
.agent-status.pending { color: var(--text-faint); }

.agent-status-dot {
  width: 7px; height: 7px; border-radius:0; background: var(--text-faint); flex-shrink: 0;
}
.agent-status.ready   .agent-status-dot { background: var(--jade); }
.agent-status.computing .agent-status-dot { background: var(--cyan-b); }
.agent-status-dot.green  { background: var(--jade); }
.agent-status-dot.pulse  { animation: pulse 1.1s ease infinite; }

/* ── Flow hint ── */
.agent-flow-hint {
  display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
  justify-content: center; margin-top: 1rem;
  font-size: var(--text-xs); color: var(--text-muted);
}
.agent-flow-step {
  padding: 0.22rem 0.6rem; border-radius:0;
  background: var(--bg-subtle); border: 1px solid var(--border);
  font-family: var(--font-sans); font-weight: 500;
}
.agent-flow-arrow { color: var(--text-faint); font-size: 0.75rem; }

/* ── System message ── */
.agent-system-msg {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 1rem; margin: 0.35rem 0;
  font-size: var(--text-xs); color: var(--text-muted);
  font-family: var(--font-mono); letter-spacing: 0.03em;
  justify-content: center;
}
.agent-system-dot {
  width: 5px; height: 5px; border-radius:0;
  background: var(--border-hover); flex-shrink: 0;
}
.agent-spinner {
  width: 12px; height: 12px; border-radius:0;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite; flex-shrink: 0;
}

/* ── Send button spinner ── */
.btn-spinner {
  display: inline-block; width: 14px; height: 14px; border-radius:0;
  border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

/* ── Compact BirthForm in sidebar ── */
.agent-sidebar .form-row { gap: 0.4rem; }
.agent-sidebar .form-group { gap: 0.15rem; }
.agent-sidebar .form-group label { font-size: 9px; margin-bottom: 0; }
.agent-sidebar .form-group input,
.agent-sidebar .form-group select { padding: 0.3rem 0.5rem; font-size: 12px; }
.agent-sidebar .form-group textarea { font-size: 12px; }