/* ══════════════════════════════════════════════════════════════
   채팅 방 안의 딥 리서치(static/js/chat_deep_research_card.js) — 진행 카드와 끝난 보고서의 머리표·[n] 배지,
   입력창 스위치의 '업그레이드' 배지. 색은 사이트 토큰(base-layout.css :root / [data-theme="dark"])만 쓴다 —
   없는 토큰에 대체값을 달면 어두운 테마에서만 깨진다(summet-css-token-must-exist).
   ══════════════════════════════════════════════════════════════ */

.cdr-card, .cdr-report {
  --cdr-soft: color-mix(in srgb, var(--primary-color) 10%, transparent);
  --cdr-ring: color-mix(in srgb, var(--primary-color) 24%, transparent);
  --cdr-ok: #16a34a;
  --cdr-bad: #dc2626;
}
[data-theme="dark"] .cdr-card, [data-theme="dark"] .cdr-report { --cdr-ok: #4ade80; --cdr-bad: #f87171; }
.cdr-card [hidden] { display: none !important; }

/* ── 머리표: 돋보기 · 딥 리서치 · 모델 ── */
.cdr-tag { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--primary-color); }
.cdr-tag__mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--cdr-soft); flex-shrink: 0; }
.cdr-tag__model { color: var(--text-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdr-tag__model::before { content: "·"; margin-right: 6px; }
.cdr-report > .cdr-tag { display: flex; margin: 0 0 10px; }

/* ── 진행 카드 ── */
.summet-msg__bubble--research { width: 100%; max-width: 720px; }
.cdr-card { display: grid; gap: 14px; min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--surface-color); color: var(--text-color); }
.cdr-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdr-card__time { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cdr-card__stop { display: inline-flex; align-items: center; gap: 5px; height: 28px; margin-left: auto; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 999px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cdr-card__stop:hover { color: var(--text-color); background: var(--sidebar-hover); }
.cdr-card__stop:disabled { opacity: .5; cursor: default; }
.cdr-card:is([data-status="done"], [data-status="error"], [data-status="cancelled"]) .cdr-card__stop { display: none; }
.cdr-card__notice { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--input-bg); color: var(--text-muted); font-size: 12.5px; }

.cdr-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--cdr-soft); color: var(--primary-color); font-size: 11.5px; font-weight: 700; }
.cdr-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: cdr-pulse 1.2s ease-in-out infinite; }
.cdr-status:empty { display: none; }

.cdr-sub { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--text-muted); }

.cdr-plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cdr-step { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; }
.cdr-step__mark { position: relative; flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; border: 2px solid var(--border-color); border-radius: 50%; box-sizing: border-box; }
.cdr-step[data-status="running"] .cdr-step__mark { border-color: var(--cdr-ring); border-top-color: var(--primary-color); animation: cdr-spin .9s linear infinite; }
.cdr-step[data-status="running"] .cdr-step__text { font-weight: 600; }
.cdr-step[data-status="done"] .cdr-step__mark { border-color: var(--cdr-ok); background: var(--cdr-ok); }
.cdr-step[data-status="done"] .cdr-step__mark::after { content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.cdr-step[data-status="done"] .cdr-step__text { color: var(--text-muted); }

.cdr-activity__list { list-style: none; margin: 0; padding: 0 0 0 12px; display: grid; gap: 5px; border-left: 2px solid var(--border-color); }
.cdr-act { position: relative; color: var(--text-muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.cdr-act::before { content: ""; position: absolute; left: -17px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--border-color); }
.cdr-act.is-latest { color: var(--text-color); font-weight: 600; }
.cdr-act.is-latest::before { background: var(--primary-color); box-shadow: 0 0 0 3px var(--cdr-ring); }

.cdr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cdr-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-color); color: var(--text-color); font-size: 12px; font-weight: 600; text-decoration: none; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: cdr-pop .25s ease; }
.cdr-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
.cdr-chip--more { color: var(--text-muted); }

.cdr-card__wait { margin: 0; color: var(--text-muted); font-size: 12.5px; }
.cdr-card__report { padding-top: 12px; border-top: 1px dashed var(--border-color); overflow-wrap: anywhere; }
.cdr-card__report > :first-child { margin-top: 0; }

/* 보고서의 바깥 링크(끝의 출처 목록 등) — 브라우저 기본 파랑은 어두운 바탕에서 읽히지 않는다. */
.cdr-report a[href]:not(.cdr-cite), .cdr-card__report a[href]:not(.cdr-cite) { color: var(--primary-color); text-decoration: none; overflow-wrap: anywhere; }
.cdr-report a[href]:not(.cdr-cite):hover, .cdr-card__report a[href]:not(.cdr-cite):hover { text-decoration: underline; }

/* ── [n] 출처 배지 ── */
.cdr-cite { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; margin: 0 0 0 2px; box-sizing: border-box; border-radius: 6px; background: var(--cdr-soft); color: var(--primary-color); font-size: 10.5px; font-weight: 800; line-height: 1; vertical-align: 2px; text-decoration: none !important; font-variant-numeric: tabular-nums; }
a.cdr-cite:hover { background: var(--primary-color); color: #fff; }

/* ── 입력창 스위치의 '업그레이드' 배지(무료 플랜) ── */
.cdr-upgrade { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--cdr-badge-bg, color-mix(in srgb, var(--primary-color) 12%, transparent)); color: var(--primary-color); font-size: 10.5px; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.cdr-upgrade[hidden] { display: none; }
.summet-chat-web-btn .cdr-upgrade { margin-left: 0; }
@media (max-width: 640px) {
  /* 좁은 화면은 단추 이름을 접는다 — 배지는 남겨 잠긴 것이 보이게. */
  .summet-chat-web-btn span.cdr-upgrade { display: inline-flex; }
  .summet-chat-web-btn span.cdr-upgrade[hidden] { display: none; }
}

@keyframes cdr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes cdr-spin { to { transform: rotate(360deg); } }
@keyframes cdr-pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cdr-card *, .cdr-card *::before, .cdr-card *::after { animation: none !important; }
}