/* ──────────────────────────────────────────────
   바이브 코딩 — 파이썬·C 편집기용 (센서 모니터 아래)
   coding_ai.html 과 같은 모양. 색은 각 페이지의 CSS 변수를 따라간다.
   ────────────────────────────────────────────── */
.vibe-panel {
  flex-shrink: 0; display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
  max-height: 46vh; min-height: 0;
}
.vibe-head {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; cursor: pointer; user-select: none; flex-shrink: 0;
}
.vibe-head:hover { background: rgba(255,255,255,.04); }
body.light .vibe-head:hover { background: #f1f5f9; }
.vibe-caret { font-size: 9px; color: var(--dimmer); transition: transform .15s; }
.vibe-panel.open .vibe-caret { transform: rotate(90deg); }
.vibe-title { font-size: 12px; font-weight: 900; color: var(--txt); }
.vibe-badge {
  font-size: 9px; font-weight: 900; padding: 2px 7px; border-radius: 999px;
  background: rgba(148,163,184,.2); color: var(--dim);
}
.vibe-badge.on { background: rgba(34,197,94,.2); color: #4ade80; }
.vibe-spacer { flex: 1; }
.vibe-gear {
  background: none; border: none; cursor: pointer; padding: 4px 6px;
  border-radius: 8px; font-size: 15px; line-height: 1; color: var(--dim);
  font-family: inherit;
}
.vibe-gear:hover { background: rgba(255,255,255,.1); color: var(--txt); }
body.light .vibe-gear:hover { background: #e2e8f0; color: #0f172a; }

.vibe-body { display: none; flex-direction: column; min-height: 0; flex: 1; }
.vibe-panel.open .vibe-body { display: flex; }
.vibe-log {
  flex: 1; min-height: 110px; max-height: 30vh; overflow-y: auto;
  padding: 2px 12px 9px; display: flex; flex-direction: column; gap: 8px;
}
.vibe-msg { max-width: 92%; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.vibe-msg.me {
  align-self: flex-end; background: #7c3aed; color: #fff;
  padding: 7px 11px; border-radius: 12px 12px 3px 12px; font-weight: 700;
}
.vibe-msg.ai {
  align-self: flex-start; background: rgba(255,255,255,.07); color: var(--txt);
  padding: 7px 11px; border-radius: 12px 12px 12px 3px;
}
body.light .vibe-msg.ai { background: #eef2f7; color: #334155; }
.vibe-msg.err { background: rgba(239,68,68,.14); color: #fca5a5; }
body.light .vibe-msg.err { background: #fee2e2; color: #b91c1c; }
.vibe-msg.wait { color: var(--dimmer); font-weight: 700; }

.vibe-card {
  align-self: stretch;
  border: 1px solid rgba(96,165,250,.35); border-radius: 11px;
  background: rgba(96,165,250,.08); padding: 9px 11px;
}
body.light .vibe-card { background: #eff6ff; border-color: #bfdbfe; }
.vibe-card-t { font-size: 11px; font-weight: 900; color: #93c5fd; margin-bottom: 6px; }
body.light .vibe-card-t { color: #1d4ed8; }
.vibe-card pre {
  margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; max-height: 150px;
  background: #0b1120; color: #9cdcfe; overflow: auto;
  font-family: 'Fira Code', Consolas, monospace; font-size: 11px; line-height: 1.6;
}
.vibe-card .row { display: flex; gap: 6px; flex-wrap: wrap; }
.vibe-card .row .tb-btn { flex: 1; min-width: 88px; padding: 7px 0; font-size: 11.5px; font-weight: 900; }

.vibe-input-row {
  display: flex; gap: 6px; padding: 8px 12px 10px; flex-shrink: 0;
  border-top: 1px solid var(--line);
}
.vibe-input {
  flex: 1; resize: none; height: 36px;
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 11px; color: var(--txt);
  font-family: inherit; font-size: 12px; font-weight: 600; outline: none;
}
.vibe-input:focus { border-color: #60a5fa; }
body.light .vibe-input { background: #fff; border-color: #cbd5e1; }
.vibe-send { padding: 0 14px; }

/* ── 설정 모달 ── */
.ai-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ai-row label { font-size: 12px; font-weight: 800; color: var(--dim); width: 74px; flex-shrink: 0; }
.ai-row select, .ai-row input {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,.08); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; color: var(--txt);
  font-family: inherit; font-size: 13px; font-weight: 700; outline: none;
}
.ai-row select option { background: #1e293b; }
body.light .ai-row select, body.light .ai-row input { background: #f8fafc; border-color: #cbd5e1; }
body.light .ai-row select option { background: #fff; }
.ai-hint { font-size: 11px; color: var(--dimmer); line-height: 1.7; margin: -4px 0 14px 84px; }
.ai-note {
  font-size: 11.5px; line-height: 1.75; color: var(--dim);
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 14px;
}
.ai-note b { color: #fbbf24; }
#ai-test-result { font-size: 12px; font-weight: 800; margin-bottom: 10px; min-height: 17px; }

/* 설정 창의 '키 받는 법' 링크 */
.ai-guide {
  display: block; margin: -2px 0 14px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; font-weight: 800; text-decoration: none; text-align: center;
  background: rgba(124, 58, 237, .14); color: #a78bfa;
  border: 1px solid rgba(124, 58, 237, .3);
}
.ai-guide:hover { background: rgba(124, 58, 237, .22); }
body.light .ai-guide { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

/* 모델 칸 옆의 [목록] 버튼 */
.ai-mini {
  flex-shrink: 0; padding: 9px 13px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 800;
  background: rgba(255,255,255,.08); border: 1px solid var(--line, rgba(255,255,255,.12));
  color: var(--dim, #94a3b8);
}
.ai-mini:hover { background: rgba(255,255,255,.15); color: var(--txt, #e2e8f0); }
.ai-mini:disabled { opacity: .5; cursor: default; }
body.light .ai-mini { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }

/* 결과 카드 안의 짧은 안내 — 무엇이 지워지는지 알려 준다 */
.vibe-card-note {
  font-size: 10.5px; line-height: 1.75; margin: 7px 0 9px;
  color: var(--dim, #94a3b8);
}
.vibe-card-note b { color: var(--txt, #e2e8f0); font-weight: 900; }
body.light .vibe-card-note { color: #64748b; }
body.light .vibe-card-note b { color: #0f172a; }

/* AI 가 빠뜨린 밑준비를 채웠다는 알림 */
.vibe-card-fix {
  margin: 8px 0 4px; padding: 9px 11px; border-radius: 9px;
  font-size: 10.5px; font-weight: 700; line-height: 1.7;
  background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3);
  color: #fbbf24;
}
.vibe-card-fix b { font-weight: 900; }
.vibe-card-fix span { opacity: .75; font-weight: 600; }
.vibe-card-fix ul { margin: 4px 0 0; padding-left: 16px; }
.vibe-card-fix li { margin-top: 2px; }
body.light .vibe-card-fix { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* 고칠 것이 없었을 때 — 초록 */
.vibe-card-fix.ok {
  background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #4ade80;
}
body.light .vibe-card-fix.ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }