/* AI챗봇관리 (2026-08-30, 실험적) — A-4 액센트형 (차콜 #3e6187 축)
   페이지(DB관리 > AI챗봇관리) + API 키 모달 + 캐시/챗봇 모달 공용. .aicb-* */

/* ── 페이지 탭 — 광고캠페인관리 목록 그룹 세그먼트와 같은 시각 언어 (2026-08-30 개편) ── */
.aicb-tabs {
  display: inline-flex; align-items: center; gap: 2px;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 9px; padding: 3px;
}
.aicb-tab {
  padding: 4px 12px; border: none; border-radius: 6px;
  background: transparent; color: #64748b; font-size: 11.5px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.aicb-tab strong { font-size: 11px; color: #94a3b8; font-weight: 700; }
.aicb-tab.on {
  background: #fff; color: #1e293b; font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}
.aicb-tab.on strong { color: #2563eb; }
.aicb-panel { display: none; }
.aicb-panel.on { display: block; }

/* ── 섹션 밴드 카드 (A-4) ────────────────────────────────────────── */
.aicb-card { border: 1px solid #dbe6f0; border-radius: 10px; background: #fff; overflow: hidden; }
.aicb-card + .aicb-card { margin-top: 12px; }
.aicb-card-band {
  padding: 8px 14px; background: #f3f7fb; border-bottom: 1px solid #dbe6f0;
  font-size: 12px; font-weight: 700; color: #3e6187;
  display: flex; align-items: center; gap: 8px;
}
.aicb-card-body { padding: 14px; }

/* ── 폼 필드 ─────────────────────────────────────────────────────── */
.aicb-fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.aicb-fld label { font-size: 12px; font-weight: 600; color: #374151; }
.aicb-fld input[type="text"], .aicb-fld input[type="password"], .aicb-fld input[type="number"],
.aicb-fld select, .aicb-fld textarea {
  padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 7px;
  font-size: 13px; background: #fff; color: #111827; box-sizing: border-box; width: 100%;
}
.aicb-fld input:focus, .aicb-fld select:focus, .aicb-fld textarea:focus {
  outline: none; border-color: #3e6187; box-shadow: 0 0 0 3px #3e618722;
}
.aicb-hint { font-size: 11px; color: #94a3b8; line-height: 1.5; }

/* ── API 키 프로바이더 행 ────────────────────────────────────────── */
.aicb-key-row { display: flex; align-items: center; gap: 8px; }
.aicb-key-row input { flex: 1; font-family: monospace; }
.aicb-key-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
}
.aicb-key-status.is-on  { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.aicb-key-status.is-off { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; }

/* ── 버튼 (A-4 pill) ─────────────────────────────────────────────── */
.aicb-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px;
  border: 1px solid #d1d5db; border-radius: 999px; background: #fff; color: #374151;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.aicb-btn:hover { background: #f3f7fb; }
.aicb-btn.primary { background: #3e6187; border-color: #3e6187; color: #fff; }
.aicb-btn.primary:hover { background: #34526f; }
.aicb-btn.danger { border-color: #fca5a5; color: #dc2626; }
.aicb-btn.danger:hover { background: #fef2f2; }
.aicb-btn:disabled { opacity: .55; cursor: default; }

/* ── 클릭 가능한 목록 행 ─────────────────────────────────────────── */
.aicb-row-click { cursor: pointer; }
.aicb-row-click:hover { background: #f3f7fb; }

/* ── 안내 배너 ───────────────────────────────────────────────────── */
.aicb-note {
  padding: 10px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
  font-size: 11.5px; color: #1e40af; line-height: 1.55;
}
.aicb-note.warn { background: #fffbeb; border-color: #fcd34d; color: #78350f; }

/* ── 대화 콘솔 말풍선 ────────────────────────────────────────────── */
.aicb-console-msg {
  max-width: 82%; padding: 9px 13px; border-radius: 14px;
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.aicb-console-msg.user {
  align-self: flex-end; background: #3e6187; color: #fff; border-bottom-right-radius: 4px;
}
.aicb-console-msg.assistant {
  align-self: flex-start; background: #fff; color: #1e293b;
  border: 1px solid #e2e8f0; border-bottom-left-radius: 4px;
}
.aicb-console-msg.failed {
  align-self: flex-start; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
  font-size: 12px;
}
.aicb-console-msg.typing { color: #94a3b8; font-style: italic; }

/* ── 콘솔 마크다운 (assistant 말풍선 내부) ───────────────────────── */
.aicb-md { white-space: normal; }
.aicb-md .aicb-md-gap { height: 7px; }
.aicb-md .aicb-md-h { font-weight: 700; color: #3e6187; margin: 4px 0 2px; }
.aicb-md ul { margin: 3px 0; padding-left: 18px; }
.aicb-md li { margin: 2px 0; }
.aicb-md table {
  border-collapse: collapse; margin: 6px 0; font-size: 12.5px; width: 100%;
  display: block; overflow-x: auto;
}
.aicb-md th, .aicb-md td { border: 1px solid #dbe6f0; padding: 5px 9px; text-align: left; white-space: nowrap; }
.aicb-md th { background: #f3f7fb; color: #3e6187; font-weight: 700; }
.aicb-md img { max-width: 240px; max-height: 240px; border-radius: 10px; display: block; margin: 6px 0; border: 1px solid #e2e8f0; background: #fff; }
.aicb-md a { color: #2563eb; text-decoration: underline; word-break: break-all; }

/* ── 선택지 칩 (답변 하단 빠른 응답) ─────────────────────────────── */
.aicb-chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 82%; }
.aicb-chip {
  padding: 7px 14px; border: 1px solid #9db8d2; border-radius: 999px;
  background: #fff; color: #3e6187; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.aicb-chip:hover { background: #eaf1f8; }

/* ── 추천 하이라이트 (==...== ) ──────────────────────────────────── */
.aicb-md mark.aicb-rec {
  background: linear-gradient(transparent 55%, #ffe9a8 55%);
  color: inherit; font-weight: 700; padding: 0 2px;
  border-bottom: 2px solid #f0b429;
}

/* ── 대기 인디케이터 — 점 3개 바운스 ─────────────────────────────── */
.aicb-dots-anim { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.aicb-dots-anim i {
  width: 6px; height: 6px; border-radius: 50%; background: #94a3b8;
  animation: aicb-bounce 1.2s infinite ease-in-out;
}
.aicb-dots-anim i:nth-child(2) { animation-delay: .18s; }
.aicb-dots-anim i:nth-child(3) { animation-delay: .36s; }
@keyframes aicb-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ── 스트리밍 캐럿 ───────────────────────────────────────────────── */
.aicb-caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: #3e6187; vertical-align: -2px;
  animation: aicb-caret-blink 0.9s steps(1) infinite;
}
@keyframes aicb-caret-blink { 50% { opacity: 0; } }

/* ── 캐시 본문 편집기 검색/치환 바 ───────────────────────────────── */
.aicb-editor-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 8px;
  background: #f3f7fb; border: 1px solid #dbe6f0; border-radius: 8px;
}
.aicb-editor-bar input[type="text"] {
  padding: 6px 9px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 12px; width: 170px; background: #fff;
}
.aicb-editor-bar input[type="text"]:focus { outline: none; border-color: #3e6187; box-shadow: 0 0 0 3px #3e618722; }
.aicb-editor-bar .aicb-btn { padding: 5px 10px; font-size: 11.5px; }

/* ══ E안 A-4 디테일 (2026-08-31 — sample/test2/aicb/e_A4디테일만.html 확정) ══ */

/* 헤더 우측 오늘 요약 pill — A-4 원본 .views 문법 */
.aicb-views {
  font-size: 12px; font-weight: 600; color: #3e6187;
  background: #fff; border: 1px solid #c4d3e2; padding: 6px 13px; border-radius: 20px;
  margin-left: auto; white-space: nowrap;
}
.aicb-views b { font-weight: 800; }

/* 소제목 — A-4 원본 .chead(3px 차콜 언더라인 + 건수 pill) */
.aicb-sec {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 800; color: #0f172a; margin: 0;
  padding-bottom: 6px; border-bottom: 3px solid #3e6187;
}
.aicb-sec .aicb-sec-n { background: #3e6187; color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; }

/* 행 액션 버튼 — A-4 원본 .dl(아웃라인 차콜, hover 반전) */
.aicb-act {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #3e6187; border: 1.5px solid #3e6187; background: #fff;
  padding: 4px 12px; border-radius: 8px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.aicb-act:hover { background: #3e6187; color: #fff; }
.aicb-act--fill { background: #3e6187; color: #fff; }
.aicb-act--fill:hover { background: #355475; }
.aicb-act:disabled { opacity: .55; cursor: default; }

/* 카드 하단 메타 줄 — 등록자·사용량 요약 (옅은 배경 한 줄) */
.aicb-item-meta {
  padding: 8px 14px; border-top: 1px solid #eef4f9; background: #fafcfe;
  font-size: 11.5px; color: #94a3b8; display: flex; gap: 16px; flex-wrap: wrap;
}
.aicb-item-meta b { color: #64748b; font-weight: 600; }

/* 모달 헤더 아래 밴드 메타 줄 — A-4 원본 밴드의 축약판 (그라디언트) */
.aicb-mband {
  background: linear-gradient(180deg, #f3f7fb, #fff);
  padding: 9px 18px; border-bottom: 1px solid #e2e8f0;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 11.5px; color: #64748b;
}
.aicb-mband b { color: #334155; }
.aicb-mband .aicb-mband-right { margin-left: auto; }

/* 밴드용 배지 — A-4 원본 .badge notice/board */
.aicb-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.aicb-badge--notice { background: #3e6187; color: #fff; }
.aicb-badge--board { background: #fff; color: #3e6187; border: 1px solid #c4d3e2; }

/* ── [전체|내부|방문자] 구분 세그먼트 (2026-08-31 — 검색영역 구분 select 대체) ── */
.aicb-kind-seg { display: inline-flex; gap: 4px; }
.aicb-kind {
  font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid #c4d3e2; background: #fff; color: #3e6187; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.aicb-kind strong { font-size: 11px; font-weight: 700; opacity: .75; }
.aicb-kind.on { background: #3e6187; border-color: #3e6187; color: #fff; }

/* ══ 모바일 반응형 (2026-08-31 — 마크업 한 벌 + CSS 재배치) ══ */
@media (max-width: 768px) {
  /* 헤더 — 요약 pill 은 줄바꿈 시 전폭 */
  .aicb-views { margin-left: 0; width: 100%; text-align: center; }

  /* 카드 밴드·메타 줄 — 줄바꿈 허용 + 버튼 그룹 전폭 우측 */
  .aicb-card-band { flex-wrap: wrap; row-gap: 6px; }
  .aicb-card-band > span[style*="margin-left: auto"] { margin-left: 0 !important; width: 100%; justify-content: flex-end; }
  .aicb-item-meta { gap: 8px 14px; }

  /* 대화 목록 — 표를 라벨:값 카드로 (thead 숨김 · 제목이 카드 머리).
     행이 각각 카드가 되므로 바깥 래퍼의 외곽선·배경은 없앤다(이중 테두리 방지, 2026-09-01) */
  .aicb-sess-wrap { border: none; background: transparent; border-radius: 0; overflow: visible; }
  .aicb-sess-wrap > .aicb-card-body { overflow-x: visible !important; }
  .aicb-sess-table thead { display: none; }
  .aicb-sess-table, .aicb-sess-table tbody { display: block; }
  .aicb-sess-table tr {
    display: flex; flex-direction: column;
    border: 1px solid #dbe6f0 !important; border-radius: 10px;
    margin: 0 0 8px; padding: 10px 12px; background: #fff;
  }
  .aicb-sess-table td { display: flex; align-items: center; gap: 10px; padding: 3px 0 !important; white-space: normal !important; }
  .aicb-sess-table td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0; width: 92px; font-size: 11px; color: #94a3b8; font-weight: 600;
  }
  .aicb-sess-table td[data-label] { justify-content: flex-start; text-align: left !important; }
  /* 제목 = 카드 머리(맨 위·강조) / 사용자(배지)는 그 다음 */
  .aicb-sess-table td.aicb-c-title {
    order: -2; font-size: 13.5px; font-weight: 700; color: #0f172a;
    max-width: none !important; overflow: visible !important; text-overflow: unset !important;
    padding-bottom: 6px !important; border-bottom: 1px solid #f1f5f9; margin-bottom: 3px;
  }
  .aicb-sess-table td.aicb-c-user { order: -1; }

  /* 추가 지식 행 — 줄바꿈 허용 + 수정 버튼은 항상 우측 상단 고정(내용 길이 무관 같은 위치, 2026-09-01) */
  .aicb-kn-row { flex-wrap: wrap; position: relative; padding-right: 76px !important; row-gap: 4px; }
  .aicb-kn-row .aicb-act { position: absolute; top: 10px; right: 14px; }
}

/* 폼 2열 그리드 — 모바일 1열 (지식 모달 종류·사용) */
.aicb-form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 768px) { .aicb-form-grid2 { grid-template-columns: 1fr; } }

/* 만료 버튼 — 앰버 톤 아웃라인 (파괴 아님·되돌릴 수 있는 상태 전환) */
.aicb-act--warn { color: #b45309; border-color: #d97706; }
.aicb-act--warn:hover { background: #d97706; border-color: #d97706; color: #fff; }

/* ══ 챗봇 설정모달 UI/UX 탭 (2026-09-01) — 좌 설정 / 우 미리보기 ══ */
.aicb-ui-cols { display: grid; grid-template-columns: 1fr 400px; }
.aicb-ui-left { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.aicb-ui-right { border-left: 1px solid #e2e8f0; background: linear-gradient(160deg, #f8fafc 60%, #e8eef5); position: relative; min-height: 560px; }
.aicb-ui-right .aicb-ui-lbl { position: absolute; top: 10px; left: 14px; font-size: 11px; font-weight: 700; color: #94a3b8; }
@media (max-width: 880px) { .aicb-ui-cols { grid-template-columns: 1fr; } .aicb-ui-right { border-left: 0; border-top: 1px solid #e2e8f0; min-height: 520px; } }

/* 프리셋 선택 카드 */
.aicb-ui-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 640px) { .aicb-ui-presets { grid-template-columns: repeat(3, 1fr); } }
.aicb-ui-pre { border: 2px solid #e2e8f0; border-radius: 10px; padding: 8px; cursor: pointer; text-align: center; background: #fff; }
.aicb-ui-pre.on { border-color: #3e6187; box-shadow: 0 0 0 3px #3e618722; }
.aicb-ui-pre .sw { height: 38px; border-radius: 7px; margin-bottom: 6px; border: 1px solid #e5ecf3; overflow: hidden; display: flex; flex-direction: column; }
.aicb-ui-pre .sw i { display: block; flex: 1; }
.aicb-ui-pre .nm { font-size: 11px; font-weight: 700; color: #334155; }
.aicb-ui-fabs { display: flex; gap: 8px; flex-wrap: wrap; }
.aicb-ui-fo { flex: 1; min-width: 120px; border: 2px solid #e2e8f0; border-radius: 10px; padding: 10px 8px; cursor: pointer; text-align: center; font-size: 11.5px; font-weight: 600; color: #475569; background: #fff; }
.aicb-ui-fo.on { border-color: #3e6187; box-shadow: 0 0 0 3px #3e618722; }

/* 미리보기 위젯 목업 (.awp-* — 실물 위젯의 CSS 변수 세트를 그대로 받는다) */
.awp { position: absolute; right: 14px; bottom: 76px; width: 305px; height: 350px; border-radius: 14px; overflow: hidden;
       display: flex; flex-direction: column; box-shadow: 0 12px 34px rgba(15,23,42,.22); background: var(--win-bg, #fff); }
.awp-head { padding: 11px 14px; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 9px;
            background: var(--head-bg, #3e6187); color: var(--head-fg, #fff); border-bottom: var(--head-line, none); }
.awp-ava { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #fcd9b6, #f5b78a);
           display: none; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.awp-st { display: none; font-size: 10.5px; font-weight: 400; opacity: .85; align-items: center; gap: 4px; }
.awp-st i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: inline-block; }
.awp.profile .awp-ava { display: flex; }
.awp.profile .awp-st { display: flex; }
.awp-body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; background: var(--win-bg, #f7fafc); }
.awp-m { max-width: 84%; padding: 8px 11px; border-radius: 12px; font-size: 12px; line-height: 1.55; }
.awp-m.a { align-self: flex-start; background: var(--a-bg, #fff); border: 1px solid var(--a-bd, #e5ecf3); border-bottom-left-radius: 4px; color: var(--a-fg, #1f2937); }
.awp-m.u { align-self: flex-end; background: var(--u-bg, #3e6187); color: var(--u-fg, #fff); border: 1px solid var(--u-bd, transparent); border-bottom-right-radius: 4px; }
.awp-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.awp-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--chip-bg, #fff); border: 1px solid var(--chip-bd, #b9cfe2); color: var(--chip-fg, #3e6187); }
.awp-foot { padding: 9px 10px; border-top: 1px solid var(--foot-bd, #e8eef4); display: flex; gap: 6px; background: var(--foot-bg, #fff); }
.awp-foot .in { flex: 1; border: 1px solid #d6dfe8; border-radius: 9px; padding: 7px 10px; font-size: 11.5px; color: #94a3b8; background: var(--in-bg, #fff); }
.awp-foot .go { border: 0; background: var(--c, #3e6187); color: #fff; font-weight: 700; border-radius: 9px; padding: 0 14px; font-size: 12px; }
.awp-fab { position: absolute; right: 14px; bottom: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
           background: var(--c, #3e6187); color: #fff; font-weight: 700; font-size: 13px; padding: 11px 18px; border-radius: 999px; box-shadow: 0 6px 18px rgba(15,23,42,.3); }
.awp-teaser { position: absolute; right: 76px; bottom: 24px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px 12px 4px 12px;
              padding: 8px 12px; font-size: 11.5px; color: #334155; box-shadow: 0 4px 14px rgba(15,23,42,.14); max-width: 220px; line-height: 1.5; }