/* ============================================================================
 * aieditor-aipanel.css — AI Agent Panel (inline, fixed right column)
 * ============================================================================
 * Layout: panel là sibling cuối trong #aie-body (display:flex), chiếm cột phải
 * 340px, push canvas-workspace flex:1 hẹp lại. KHÔNG overlay, KHÔNG toggle —
 * panel luôn hiển thị (mobile thì ẩn để canvas full).
 * Theme: dùng --ae-* vars từ aieditor-v2.css → match canvas chrome.
 * ========================================================================== */

#aie-ai-panel {
  /* Default 33% (col-4 style). User có thể drag handle bên trái để resize;
     JS set inline style flex: 0 0 {N}px khi resize, restore localStorage trên
     init. Clamp 320–800 ở JS để không quá hẹp / quá rộng. */
  flex: 0 0 33.333%;
  max-width: 800px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  background: var(--ae-surface, #fff);
  border-left: 1px solid var(--ae-border, #e5e5e5);
  color: var(--ae-text, #1a1a1a);
  overflow: hidden;
  position: relative;     /* anchor cho .aie-aip-resize-handle absolute */
  /* Inherit font-size (13px) và font-family từ #aieditor để khớp toolbar/
     canvas. UA default cho button/input/textarea KHÔNG inherit → force
     dưới qua selector con. */
}
/* ── Resize handle ────────────────────────────────────────────────────── */
.aie-aip-resize-handle {
  position: absolute;
  top: 0;
  left: -3px;        /* overlap border-left 1px của panel để hit area rộng */
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
  user-select: none;
}
.aie-aip-resize-handle:hover,
.aie-aip-resize-handle.is-dragging {
  background: var(--ae-accent, #FFC814);
  opacity: 0.4;
}
body.aie-aip-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}
body.aie-aip-resizing * { cursor: col-resize !important; }

/* Force toàn bộ control con dùng cùng font với editor — tránh "lệch" font
   với cỡ chữ user setting (button/input/textarea có UA default riêng). */
#aie-ai-panel button,
#aie-ai-panel input,
#aie-ai-panel textarea,
#aie-ai-panel select {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
}

/* Reset font-size cho tất cả block element trong panel — chống global rules
   như `#main-content p { font-size: 1.05rem }` (app2025.css) lọt vào markdown
   render. Dùng 2 ID `#aieditor #aie-ai-panel` (specificity 2,0,1) thắng chắc
   `#main-content p` (1,0,1) hoặc media-query equivalents. */
#aieditor #aie-ai-panel p,
#aieditor #aie-ai-panel li,
#aieditor #aie-ai-panel ul,
#aieditor #aie-ai-panel ol,
#aieditor #aie-ai-panel blockquote,
#aieditor #aie-ai-panel td,
#aieditor #aie-ai-panel th,
#aieditor #aie-ai-panel span,
#aieditor #aie-ai-panel div,
#aieditor #aie-ai-panel a {
  font-size: inherit;
  color: inherit;
}
/* a có thêm decoration được rule khác (link override dưới đẹp hơn) */
#aieditor #aie-ai-panel p {
  margin: 0;             /* base reset; assistant body p override dưới */
}
#aieditor #aie-ai-panel h1,
#aieditor #aie-ai-panel h2,
#aieditor #aie-ai-panel h3,
#aieditor #aie-ai-panel h4,
#aieditor #aie-ai-panel h5,
#aieditor #aie-ai-panel h6 {
  /* h-tags trong markdown render: dùng em để scale theo base */
  font-size: 1.05em;
  margin: 10px 0 6px;
  color: inherit;
}

@media (max-width: 900px) {
  #aie-ai-panel { display: none; }
}

/* ── Header ───────────────────────────────────────────────────────────── */
.aie-aip-hd {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ae-border, #e5e5e5);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ae-gray50, #fafafa);
  flex-shrink: 0;
}
.aie-aip-hd .aie-aip-title {
  font-weight: 600;
  flex: 1;
  color: var(--ae-text, #1a1a1a);
}
.aie-aip-hd .aie-aip-title i {
  color: var(--ae-accent, #FFC814);
  margin-right: 4px;
}
.aie-aip-hd .btn {
  padding: 3px 8px;
  line-height: 1.2;
  border-radius: 4px;
  color: var(--ae-text-dim, #737373);
  background: transparent;
  border: 1px solid var(--ae-border, #e5e5e5);
}
.aie-aip-hd .btn:hover {
  background: var(--ae-gray100, #f5f5f5);
  color: var(--ae-text, #1a1a1a);
}

/* ── Messages container ───────────────────────────────────────────────── */
.aie-aip-messages {
  flex: 1;
  overflow-y: auto;
  /* Padding-bottom dài hơn để message cuối có "không gian thở" trước input
     area — đỡ cảm giác chật khi spinner / message dài hiển thị sát viền. */
  padding: 12px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ae-surface, #fff);
}
.aie-aip-messages::-webkit-scrollbar { width: 6px; }
.aie-aip-messages::-webkit-scrollbar-thumb {
  background: var(--ae-gray300, #d4d4d4);
  border-radius: 3px;
}

.aie-aip-msg-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ae-text-dim, #737373);
  margin-bottom: 3px;
  font-weight: 600;
}
.aie-aip-msg-user      .aie-aip-msg-role { color: var(--ae-text, #1a1a1a); }
.aie-aip-msg-assistant .aie-aip-msg-role { color: var(--ae-accent-h, #E6B400); }
.aie-aip-msg-error     .aie-aip-msg-role { color: var(--ae-danger, #DB1A1A); }

.aie-aip-msg-body {
  background: var(--ae-gray50, #fafafa);
  border: 1px solid var(--ae-border, #e5e5e5);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--ae-text, #1a1a1a);
  word-wrap: break-word;
  line-height: 1.55;
  white-space: pre-wrap;
}
.aie-aip-msg-user .aie-aip-msg-body {
  background: var(--ae-gray100, #f5f5f5);
  border-color: var(--ae-gray200, #e5e5e5);
}

/* Attachments thumbnails kèm user message — flex grid, mỗi ảnh ~80px */
.aie-aip-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.aie-aip-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--ae-border, #e5e5e5);
  background: var(--ae-gray100, #f5f5f5);
  cursor: zoom-in;
  transition: transform 0.15s, box-shadow 0.15s;
}
.aie-aip-thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border-color: var(--ae-accent, #FFC814);
}
#aieditor.dark #aie-ai-panel .aie-aip-thumb {
  border-color: var(--ae-gray700, #404040);
  background: var(--ae-gray800, #262626);
}
.aie-aip-msg-assistant .aie-aip-msg-body {
  background: var(--ae-yellow-l, #FFF3CC);
  border-color: var(--ae-yellow, #FFC814);
  white-space: normal; /* markdown rendered HTML — let block flow handle gaps */
}

/* ── Markdown rendered (assistant only) ───────────────────────────────── *
 * Prepend #aieditor #aie-ai-panel để specificity (2,2,1) thắng các reset
 * (2,0,1) ở trên — cần giữ margin/padding cho markdown render đẹp. */
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body > *:first-child { margin-top: 0; }
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body > *:last-child  { margin-bottom: 0; }
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body p  { margin: 6px 0; }
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body ul,
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body ol { padding-left: 1.5em; margin: 6px 0; }
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body li { margin: 3px 0; line-height: 1.5; }
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body li > p { margin: 2px 0; } /* nested marked output */
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body h1,
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body h2,
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body h3,
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body h4 {
  margin: 10px 0 6px;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--ae-text, #1a1a1a);
}
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body strong { font-weight: 700; color: var(--ae-text, #1a1a1a); }
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body em     { font-style: italic; }
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body a {
  color: var(--ae-accent-h, #E6B400);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body a:hover { color: var(--ae-accent, #FFC814); }
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body code:not(pre code) {
  background: rgba(0, 0, 0, 0.08);
  color: var(--ae-text, #1a1a1a);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.88em;
  font-family: 'JetBrains Mono', Consolas, monospace;
}
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body pre {
  background: var(--ae-gray100, #f5f5f5);
  border: 1px solid var(--ae-border, #e5e5e5);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 8px 0;
  overflow-x: auto;
  font-size: 0.92em;
  line-height: 1.45;
}
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body pre code {
  background: none;
  padding: 0;
  color: var(--ae-text, #1a1a1a);
  font-family: 'JetBrains Mono', Consolas, monospace;
}
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body blockquote {
  border-left: 3px solid var(--ae-accent, #FFC814);
  padding-left: 10px;
  color: var(--ae-text-dim, #737373);
  margin: 6px 0;
}
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body table {
  border-collapse: collapse;
  margin: 6px 0;
  font-size: 0.92em;
}
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body th,
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body td {
  border: 1px solid var(--ae-border, #e5e5e5);
  padding: 4px 8px;
}
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body th {
  background: var(--ae-gray100, #f5f5f5);
  font-weight: 600;
}
#aieditor #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body hr {
  border: 0;
  border-top: 1px solid var(--ae-border, #e5e5e5);
  margin: 8px 0;
}
.aie-aip-msg-error .aie-aip-msg-body {
  background: var(--ae-red-l, #FEE2E2);
  border-color: var(--ae-danger, #DB1A1A);
  color: var(--ae-danger, #DB1A1A);
}

/* Tool call line — compact entry, chỉ show tool name (args ẩn mặc định) */
.aie-aip-msg-tool .aie-aip-tool-line {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11px;
  color: var(--ae-text-dim, #737373);
  padding: 3px 8px;
  border-left: 2px solid var(--ae-accent, #FFC814);
  background: var(--ae-yellow-l, #FFF3CC);
  border-radius: 0 3px 3px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.aie-aip-msg-tool .aie-aip-tool-name {
  color: var(--ae-accent-h, #E6B400);
  font-weight: 600;
}
/* Args (chỉ hiện khi window.AIE_AGENT_DEBUG = true) */
.aie-aip-msg-tool .aie-aip-tool-args {
  color: var(--ae-text-dim, #737373);
  opacity: 0.85;
  margin-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#aieditor.dark #aie-ai-panel .aie-aip-msg-tool .aie-aip-tool-args {
  color: var(--ae-gray400, #a3a3a3);
}

/* ── Proposal card (apply / discard) ──────────────────────────────────── */
.aie-aip-proposal {
  border: 1px solid var(--ae-accent, #FFC814);
  border-radius: 8px;
  background: var(--ae-surface, #fff);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(255, 200, 20, 0.15);
}
.aie-aip-prop-hd {
  padding: 8px 12px;
  background: var(--ae-yellow-l, #FFF3CC);
  border-bottom: 1px solid var(--ae-accent, #FFC814);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 12px;
  color: var(--ae-text, #1a1a1a);
}
.aie-aip-prop-hd i { color: var(--ae-accent-h, #E6B400); }
.aie-aip-prop-body {
  padding: 10px 12px;
  font-size: 12px;
}
.aie-aip-prop-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed var(--ae-border, #e5e5e5);
}
.aie-aip-prop-row:last-child { border-bottom: 0; }
.aie-aip-prop-row span { color: var(--ae-text-dim, #737373); }
.aie-aip-prop-row strong { color: var(--ae-text, #1a1a1a); font-weight: 600; }
.aie-aip-prop-actions {
  padding: 8px 12px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: var(--ae-gray50, #fafafa);
  border-top: 1px solid var(--ae-border, #e5e5e5);
}
.aie-aip-prop-actions button {
  padding: 5px 14px;
  border-radius: 4px;
  border: 1px solid var(--ae-border, #e5e5e5);
  cursor: pointer;
  font-weight: 500;
}
.aie-aip-discard {
  background: transparent;
  color: var(--ae-text-dim, #737373);
  border-color: var(--ae-border, #e5e5e5);
}
.aie-aip-discard:hover {
  background: var(--ae-gray100, #f5f5f5);
  color: var(--ae-text, #1a1a1a);
  border-color: var(--ae-gray300, #d4d4d4);
}
.aie-aip-apply {
  background: var(--ae-accent, #FFC814);
  color: var(--ae-text, #1a1a1a);
  border-color: var(--ae-accent-h, #E6B400);
  font-weight: 600;
}
.aie-aip-apply:hover { background: var(--ae-accent-h, #E6B400); color: var(--ae-white, #fff); }
.aie-aip-prop-actions button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Edit choices card (2-option picker cho edit image) ───────────────── */
.aie-aip-edit-card {
  border: 1px solid var(--ae-border, #e5e5e5);
  border-radius: 8px;
  background: var(--ae-surface, #fff);
  overflow: hidden;
}
.aie-aip-edit-hd {
  padding: 8px 12px;
  background: var(--ae-gray50, #fafafa);
  border-bottom: 1px solid var(--ae-border, #e5e5e5);
  font-weight: 600;
}
.aie-aip-edit-hd i {
  color: var(--ae-accent-h, #E6B400);
  margin-right: 6px;
}
.aie-aip-edit-opts {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.aie-aip-edit-opt {
  display: block;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ae-border, #e5e5e5);
  cursor: pointer;
  color: var(--ae-text, #1a1a1a);
}
.aie-aip-edit-opt:first-child { border-top: 0; }
.aie-aip-edit-opt:hover:not(:disabled) {
  background: var(--ae-yellow-l, #FFF3CC);
}
.aie-aip-edit-opt:disabled { opacity: 0.55; cursor: not-allowed; }
.aie-aip-edit-opt.is-picked {
  background: var(--ae-yellow-l, #FFF3CC);
  box-shadow: inset 3px 0 0 var(--ae-accent, #FFC814);
  opacity: 1;
}

.aie-aip-edit-opt-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.aie-aip-edit-opt-badge {
  background: var(--ae-accent, #FFC814);
  color: var(--ae-text, #1a1a1a);
  font-weight: 700;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  flex-shrink: 0;
}
.aie-aip-edit-opt-title { flex: 1; font-weight: 600; }
.aie-aip-edit-opt-cost {
  color: var(--ae-accent-h, #E6B400);
  font-weight: 600;
  font-size: 0.92em;
}
.aie-aip-edit-opt-desc {
  font-size: 0.92em;
  color: var(--ae-text-dim, #737373);
  line-height: 1.45;
  padding-left: 28px;  /* align under badge */
}

#aieditor.dark #aie-ai-panel .aie-aip-edit-card {
  background: var(--ae-gray800, #262626);
  border-color: var(--ae-gray700, #404040);
}
#aieditor.dark #aie-ai-panel .aie-aip-edit-hd {
  background: var(--ae-gray900, #171717);
  border-color: var(--ae-gray700, #404040);
  color: var(--ae-gray100, #f5f5f5);
}
#aieditor.dark #aie-ai-panel .aie-aip-edit-opt {
  border-color: var(--ae-gray700, #404040);
  color: var(--ae-gray100, #f5f5f5);
}
#aieditor.dark #aie-ai-panel .aie-aip-edit-opt:hover:not(:disabled),
#aieditor.dark #aie-ai-panel .aie-aip-edit-opt.is-picked {
  background: #3a2f12;
}
#aieditor.dark #aie-ai-panel .aie-aip-edit-opt-desc { color: var(--ae-gray400, #a3a3a3); }

/* Download button trong agent-job-done message */
.aie-aip-dl-btn {
  background: var(--ae-accent, #FFC814);
  color: var(--ae-text, #1a1a1a);
  border: 1px solid var(--ae-accent-h, #E6B400);
  border-radius: 4px;
  padding: 5px 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.aie-aip-dl-btn:hover {
  background: var(--ae-accent-h, #E6B400);
  color: var(--ae-white, #fff);
}
#aieditor.dark #aie-ai-panel .aie-aip-dl-btn {
  background: var(--ae-accent, #FFC814);
  color: var(--ae-text, #1a1a1a);
}
.aie-aip-proposal.is-applied   { opacity: 0.85; border-color: var(--ae-green, #16A34A); }
.aie-aip-proposal.is-failed    { opacity: 0.85; border-color: var(--ae-danger, #DB1A1A); }
.aie-aip-proposal.is-discarded { opacity: 0.6; }
.aie-aip-status-ok  { color: var(--ae-green, #16A34A); font-size: 12px; font-weight: 600; }
.aie-aip-status-err { color: var(--ae-danger, #DB1A1A); font-size: 12px; font-weight: 600; }

/* ── Status bar bottom — ẩn (giữ DOM cho backward-compat) ─────────────── */
.aie-aip-status { display: none; }

/* ── Status inline (cuối messages, dạng "bubble assistant đang gõ") ───── */
.aie-aip-status-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--ae-gray100, #f5f5f5);
  color: var(--ae-text-dim, #737373);
  font-size: 0.92em;
  font-style: italic;
  align-self: flex-start;        /* trong flex column messages */
  max-width: 80%;
  animation: aie-aip-fadein 0.2s ease-out;
}
.aie-aip-status-inline.is-err {
  background: var(--ae-red-l, #FEE2E2);
  color: var(--ae-danger, #DB1A1A);
  font-style: normal;
}
.aie-aip-status-icon-err { color: var(--ae-danger, #DB1A1A); }

/* Stop button trong status inline */
.aie-aip-stop-btn {
  margin-left: auto;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--ae-gray300, #d4d4d4);
  border-radius: 12px;
  color: var(--ae-text-dim, #737373);
  font-size: 0.88em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.aie-aip-stop-btn:hover {
  background: var(--ae-danger, #DB1A1A);
  color: var(--ae-white, #fff);
  border-color: var(--ae-danger, #DB1A1A);
}
#aieditor.dark #aie-ai-panel .aie-aip-stop-btn {
  border-color: var(--ae-gray700, #404040);
  color: var(--ae-gray400, #a3a3a3);
}
#aieditor.dark #aie-ai-panel .aie-aip-stop-btn:hover {
  background: var(--ae-danger, #DB1A1A);
  color: var(--ae-white, #fff);
}

@keyframes aie-aip-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dots typing indicator — 3 chấm nhấp nhô */
.aie-aip-spinner-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}
.aie-aip-spinner-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ae-accent, #FFC814);
  animation: aie-aip-bounce 1.2s infinite ease-in-out;
}
.aie-aip-spinner-dots span:nth-child(1) { animation-delay: -0.32s; }
.aie-aip-spinner-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes aie-aip-bounce {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.5; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* Dark theme */
#aieditor.dark #aie-ai-panel .aie-aip-status-inline {
  background: var(--ae-gray800, #262626);
  color: var(--ae-gray300, #d4d4d4);
}
#aieditor.dark #aie-ai-panel .aie-aip-status-inline.is-err {
  background: rgba(219, 26, 26, 0.18);
  color: #ffb4b4;
}

/* ── Input area ───────────────────────────────────────────────────────── */
.aie-aip-input-wrap {
  border-top: 1px solid var(--ae-border, #e5e5e5);
  padding: 10px 14px;
  background: var(--ae-surface, #fff);
  flex-shrink: 0;
  position: relative;     /* anchor cho slash popup */
}

/* ── Slash command popup ──────────────────────────────────────────────── */
.aie-aip-slash-popup {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(100% - 4px);
  max-height: 240px;
  overflow-y: auto;
  background: var(--ae-surface, #fff);
  border: 1px solid var(--ae-border, #e5e5e5);
  border-radius: 8px;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 4px;
  /* Custom scrollbar — thin, accent màu khi hover */
  scrollbar-width: thin;
  scrollbar-color: var(--ae-gray300, #d4d4d4) transparent;
}
.aie-aip-slash-popup::-webkit-scrollbar { width: 6px; }
.aie-aip-slash-popup::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.aie-aip-slash-popup::-webkit-scrollbar-thumb {
  background: var(--ae-gray300, #d4d4d4);
  border-radius: 3px;
  transition: background 0.15s;
}
.aie-aip-slash-popup::-webkit-scrollbar-thumb:hover {
  background: var(--ae-accent, #FFC814);
}
#aieditor.dark #aie-ai-panel .aie-aip-slash-popup {
  scrollbar-color: var(--ae-gray600, #525252) transparent;
}
#aieditor.dark #aie-ai-panel .aie-aip-slash-popup::-webkit-scrollbar-thumb {
  background: var(--ae-gray600, #525252);
}
#aieditor.dark #aie-ai-panel .aie-aip-slash-popup::-webkit-scrollbar-thumb:hover {
  background: var(--ae-accent, #FFC814);
}

/* System message (slash command output) — preserve \n line breaks */
.aie-aip-msg-system .aie-aip-msg-body { white-space: pre-line; }
.aie-aip-msg-system .aie-aip-msg-body code {
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.88em;
  color: var(--ae-accent-h, #E6B400);
}
#aieditor.dark #aie-ai-panel .aie-aip-msg-system .aie-aip-msg-body code {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ae-accent, #FFC814);
}
.aie-aip-slash-item {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.92em;
  color: var(--ae-text, #1a1a1a);
}
.aie-aip-slash-item:hover,
.aie-aip-slash-item.is-active {
  background: var(--ae-yellow-l, #FFF3CC);
  color: var(--ae-accent-h, #E6B400);
}
#aieditor.dark #aie-ai-panel .aie-aip-slash-popup {
  background: var(--ae-gray800, #262626);
  border-color: var(--ae-gray700, #404040);
}
#aieditor.dark #aie-ai-panel .aie-aip-slash-item { color: var(--ae-gray100, #f5f5f5); }
#aieditor.dark #aie-ai-panel .aie-aip-slash-item:hover,
#aieditor.dark #aie-ai-panel .aie-aip-slash-item.is-active {
  background: #3a2f12;
  color: var(--ae-accent, #FFC814);
}

/* ── Skill list (from /skill command) ─────────────────────────────────── */
.aie-aip-skill-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--ae-border, #e5e5e5);
  align-items: flex-start;
}
.aie-aip-skill-item:last-of-type { border-bottom: 0; }
.aie-aip-skill-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ae-accent, #FFC814);
  color: var(--ae-text, #1a1a1a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05em;
}
.aie-aip-skill-text { flex: 1; min-width: 0; }
.aie-aip-skill-name {
  font-weight: 700;
  color: var(--ae-text, #1a1a1a);
  margin-bottom: 3px;
}
.aie-aip-skill-desc {
  font-size: 0.92em;
  /* Darker hơn text-dim mặc định để dễ đọc — desc là content quan trọng,
     không phải secondary metadata. */
  color: var(--ae-gray700, #404040);
  line-height: 1.5;
}
.aie-aip-skill-hint {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--ae-gray100, #f5f5f5);
  border-radius: 6px;
  font-size: 0.9em;
  color: var(--ae-text-dim, #737373);
  font-style: italic;
}
.aie-aip-skill-hint i { color: var(--ae-accent-h, #E6B400); }

#aieditor.dark #aie-ai-panel .aie-aip-skill-item { border-color: var(--ae-gray700, #404040); }
#aieditor.dark #aie-ai-panel .aie-aip-skill-name { color: var(--ae-gray100, #f5f5f5); }
#aieditor.dark #aie-ai-panel .aie-aip-skill-desc { color: var(--ae-gray300, #d4d4d4); }
#aieditor.dark #aie-ai-panel .aie-aip-skill-hint {
  background: var(--ae-gray900, #171717);
  color: var(--ae-gray400, #a3a3a3);
}

/* ── /cost table ──────────────────────────────────────────────────────── */
.aie-aip-cost-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed var(--ae-border, #e5e5e5);
  font-size: 0.95em;
}
.aie-aip-cost-row:last-of-type { border-bottom: 0; }
.aie-aip-cost-row span { color: var(--ae-text-dim, #737373); }
.aie-aip-cost-row strong { color: var(--ae-accent-h, #E6B400); }

.aie-aip-cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
  margin-top: 4px;
}
.aie-aip-cost-table th,
.aie-aip-cost-table td {
  padding: 5px 6px;
  text-align: left;
  border-bottom: 1px solid var(--ae-border, #e5e5e5);
}
.aie-aip-cost-table th {
  background: var(--ae-gray100, #f5f5f5);
  font-weight: 600;
  color: var(--ae-text-dim, #737373);
}
.aie-aip-cost-table td:nth-child(2),
.aie-aip-cost-table td:nth-child(3) { text-align: right; font-family: 'JetBrains Mono', Consolas, monospace; }
.aie-aip-cost-table small { color: var(--ae-text-dim, #737373); font-weight: normal; }
#aieditor.dark #aie-ai-panel .aie-aip-cost-table th,
#aieditor.dark #aie-ai-panel .aie-aip-cost-table td { border-color: var(--ae-gray700, #404040); }
#aieditor.dark #aie-ai-panel .aie-aip-cost-table th {
  background: var(--ae-gray900, #171717);
  color: var(--ae-gray400, #a3a3a3);
}
.aie-aip-input {
  width: 100%;
  background: var(--ae-gray50, #fafafa);
  color: var(--ae-text, #1a1a1a);
  border: 1px solid var(--ae-border, #e5e5e5);
  border-radius: 6px;
  padding: 10px 12px;
  resize: none;
  min-height: 72px;       /* ~3 lines @ 13px */
  max-height: 240px;
  overflow-y: auto;
  outline: none;
  box-sizing: border-box;
}
.aie-aip-input:focus { border-color: var(--ae-accent, #FFC814); background: var(--ae-surface, #fff); }

.aie-aip-input-actions {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.aie-aip-input-actions .hint {
  flex: 1;
  font-size: 10px;
  color: var(--ae-text-dim, #737373);
}

/* Disclaimer — small italic line dưới input actions */
.aie-aip-disclaimer {
  margin-top: 6px;
  font-size: 10px;
  color: var(--ae-text-dim, #737373);
  text-align: center;
  font-style: italic;
  opacity: 0.75;
  line-height: 1.3;
}
#aieditor.dark #aie-ai-panel .aie-aip-disclaimer { color: var(--ae-gray400, #a3a3a3); }
.aie-aip-send-btn {
  background: var(--ae-accent, #FFC814);
  color: var(--ae-text, #1a1a1a);
  border: 1px solid var(--ae-accent-h, #E6B400);
  border-radius: 6px;
  padding: 5px 14px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.aie-aip-send-btn:hover { background: var(--ae-accent-h, #E6B400); color: var(--ae-white, #fff); }
.aie-aip-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Dark theme (#aieditor.dark) ────────────────────────────────── */
#aieditor.dark #aie-ai-panel {
  background: var(--ae-gray900, #171717);
  border-left-color: var(--ae-gray700, #404040);
  color: var(--ae-gray100, #f5f5f5);
}
#aieditor.dark .aie-aip-hd { background: var(--ae-gray800, #262626); border-color: var(--ae-gray700, #404040); }
#aieditor.dark .aie-aip-hd .aie-aip-title { color: var(--ae-gray100, #f5f5f5); }
#aieditor.dark .aie-aip-hd .btn { border-color: var(--ae-gray700, #404040); color: var(--ae-gray400, #a3a3a3); }
#aieditor.dark .aie-aip-hd .btn:hover { background: var(--ae-gray700, #404040); color: var(--ae-gray100, #f5f5f5); }
#aieditor.dark .aie-aip-messages { background: var(--ae-gray900, #171717); }
#aieditor.dark .aie-aip-msg-body { background: var(--ae-gray800, #262626); border-color: var(--ae-gray700, #404040); color: var(--ae-gray100, #f5f5f5); }
#aieditor.dark .aie-aip-msg-user .aie-aip-msg-body { background: var(--ae-gray700, #404040); border-color: var(--ae-gray600, #525252); }
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body { background: #3a2f12; border-color: var(--ae-accent-h, #E6B400); color: var(--ae-gray100, #f5f5f5); }
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body h1,
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body h2,
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body h3,
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body h4,
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body strong { color: var(--ae-gray100, #f5f5f5); }
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body code:not(pre code) {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ae-gray100, #f5f5f5);
}
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body pre {
  background: var(--ae-gray900, #171717);
  border-color: var(--ae-gray700, #404040);
}
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body pre code { color: var(--ae-gray100, #f5f5f5); }
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body blockquote { color: var(--ae-gray400, #a3a3a3); }
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body th { background: var(--ae-gray800, #262626); }
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body th,
#aieditor.dark #aie-ai-panel .aie-aip-msg-assistant .aie-aip-msg-body td { border-color: var(--ae-gray700, #404040); }
#aieditor.dark .aie-aip-msg-tool .aie-aip-tool-line { background: #2a2515; color: var(--ae-gray400, #a3a3a3); }
#aieditor.dark .aie-aip-input { background: var(--ae-gray800, #262626); color: var(--ae-gray100, #f5f5f5); border-color: var(--ae-gray700, #404040); }
#aieditor.dark .aie-aip-input:focus { background: var(--ae-gray800, #262626); }
#aieditor.dark .aie-aip-status { background: var(--ae-gray800, #262626); border-color: var(--ae-gray700, #404040); }
#aieditor.dark .aie-aip-input-wrap { background: var(--ae-gray900, #171717); border-color: var(--ae-gray700, #404040); }
#aieditor.dark .aie-aip-proposal { background: var(--ae-gray800, #262626); }
#aieditor.dark .aie-aip-prop-hd { background: #3a2f12; color: var(--ae-gray100, #f5f5f5); }
#aieditor.dark .aie-aip-prop-row strong { color: var(--ae-gray100, #f5f5f5); }
#aieditor.dark .aie-aip-prop-actions { background: var(--ae-gray900, #171717); border-color: var(--ae-gray700, #404040); }
#aieditor.dark .aie-aip-discard {
  color: var(--ae-gray300, #d4d4d4);
  border-color: var(--ae-gray700, #404040);
}
#aieditor.dark .aie-aip-discard:hover {
  background: var(--ae-gray700, #404040);
  color: var(--ae-gray100, #f5f5f5);
  border-color: var(--ae-gray600, #525252);
}