/* 영상진단 정당성 가이드라인 AI 챗봇 (js/guide-chat.js).
   Shared by ac.cdss.co.kr (index.html) and cdss.or.kr (ai-chat.html → symlink). Uses --cdss-* tokens from cdss-theme.css. */
.ai-chat-section { padding: 56px 0 8px; background: var(--cdss-bg, #f5f7fb); }
.gc-box { background: #fff; border: 1px solid var(--cdss-border); border-radius: 16px;
          box-shadow: var(--cdss-shadow); overflow: hidden; }
.gc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
          padding: 16px 20px; border-bottom: 1px solid var(--cdss-border);
          background: linear-gradient(135deg, #0f1b2d, #16325c); color: #fff; }
.gc-top h2 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; }
.gc-top p { margin: 2px 0 0; font-size: 13px; color: #b9c6dc; }
.gc-new { flex: none; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff;
          border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.gc-new:hover { background: rgba(255,255,255,.12); }
.gc-log { position: relative; height: 620px; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
          background: #f8fafc; scroll-behavior: smooth; }
.gc-msg { max-width: 88%; font-size: 14.5px; line-height: 1.6; color: var(--cdss-text); }
.gc-msg p { margin: 0 0 6px; } .gc-msg p:last-child { margin-bottom: 0; }
.gc-bot { align-self: flex-start; background: #fff; border: 1px solid var(--cdss-border);
          border-radius: 4px 14px 14px 14px; padding: 11px 14px; }
.gc-user { align-self: flex-end; background: var(--cdss-primary); color: #fff;
           border-radius: 14px 4px 14px 14px; padding: 9px 14px; white-space: pre-wrap; }
.gc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gc-chip { border: 1px solid #c7d7f0; background: #eef4fd; color: #1452b8; border-radius: 99px;
           padding: 5px 12px; font-size: 13px; cursor: pointer; }
.gc-chip:hover:not(:disabled) { background: #dbe8fb; } .gc-chip:disabled { opacity: .5; cursor: default; }
.gc-typing { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: middle; }
.gc-typing i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: gc-b 1s infinite; }
.gc-typing i:nth-child(2) { animation-delay: .15s; } .gc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes gc-b { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.gc-card { margin-top: 10px; border: 1px solid var(--cdss-border); border-radius: 12px; padding: 12px 14px; background: #fff; }
.gc-card-h { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--cdss-text-muted); }
.gc-sp { background: #e6f6f5; color: #0b7f7e; border-radius: 6px; padding: 1px 8px; font-weight: 600; }
.gc-q { font-weight: 700; margin: 6px 0 4px; font-size: 14.5px; }
.gc-rec { border-top: 1px dashed #e2e8f0; padding-top: 10px; margin-top: 10px; }
.gc-er { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; margin-top: 6px; }
.gc-er .gc-exam { justify-self: start; }
.gc-more { margin-top: 10px; font-size: 13px; }
.gc-more summary { cursor: pointer; color: var(--cdss-primary); font-weight: 600; }
.gc-exam { font-size: 12.5px; font-weight: 700; color: #334155; background: #f1f5f9; border-radius: 6px; padding: 2px 8px; }
.gc-rec-t { font-size: 13.5px; color: #334155; margin: 6px 0 8px !important; }
.gc-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 13px; }
.gc-links a { color: var(--cdss-primary); font-weight: 600; }
.gc-grip { height: 14px; display: flex; align-items: center; justify-content: center; cursor: ns-resize;
           background: #f1f5f9; border-top: 1px solid var(--cdss-border); touch-action: none; user-select: none; }
.gc-grip::before { content: ""; width: 44px; height: 4px; border-radius: 3px; background: #cbd5e1; }
.gc-grip:hover::before, .gc-grip.on::before { background: var(--cdss-primary); }
.gc-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--cdss-border); background: #fff; }
.gc-input { flex: 1; min-width: 0; resize: none; border: 1.5px solid var(--cdss-border); border-radius: 12px;
            padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.45; max-height: 140px; outline: none; }
.gc-input:focus { border-color: var(--cdss-primary); box-shadow: 0 0 0 3px rgba(22,99,216,.15); }
.gc-send { flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--cdss-primary);
           color: #fff; font-weight: 700; cursor: pointer; }
.gc-send:disabled { opacity: .5; cursor: default; }
.gc-note { padding: 0 16px 12px; font-size: 12px; color: var(--cdss-text-muted); background: #fff; }
@media (max-width: 640px) {
  .ai-chat-section { padding-top: 32px; }
  .gc-log { height: 72vh; padding: 14px 12px; }
  .gc-msg { max-width: 96%; }
    .gc-er { grid-template-columns: 1fr; gap: 4px; }
  .gc-top { padding: 14px 14px; } .gc-form { padding: 10px 12px; }
}
/* 권고등급 / 근거수준 / 방사선량 scales — same reading as cdss.or.kr detail.html */
.gc-scales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gc-scale { border: 1px solid #e8edf4; border-radius: 10px; padding: 8px 10px 6px; background: #fff; }
.gc-scale-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gc-scale-l { font-size: 12px; font-weight: 700; color: #334155; }
.gc-scale-l::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
                      background: var(--cdss-accent, #0ea5a4); margin-right: 6px; vertical-align: middle; }
.gc-badge { min-width: 30px; text-align: center; font-weight: 800; font-size: 14px; border-radius: 7px; padding: 1px 7px;
            background: #f1f5f9; color: #475569; }
.gc-badge.g-a { background: #e7f6ec; color: #15803d; } .gc-badge.g-b { background: #e8f0fd; color: #1663d8; }
.gc-badge.g-c { background: #fdf3e2; color: #b45309; }
.gc-badge.ev { background: #e8f0fd; color: #0f4cab; } .gc-badge.dose { background: #f1f5f9; color: #475569; }
.gc-steps { display: flex; list-style: none; margin: 0; padding: 0; }
.gc-steps li { flex: 1; position: relative; text-align: center; font-size: 11px; color: #94a3b8; padding-top: 16px; white-space: nowrap; }
.gc-steps li::before { content: ""; position: absolute; top: 3px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
                       border-radius: 50%; background: #cbd5e1; z-index: 1; }
.gc-steps li::after { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: #cbd5e1; }
.gc-steps li:first-child::after { display: none; }
.gc-steps li.on { color: #475569; font-weight: 700; }
.gc-steps li.on::before, .gc-steps li.on::after { background: #4ade80; }
.gc-steps.red li.on::before, .gc-steps.red li.on::after { background: #ef4444; }
.gc-er { grid-template-columns: 120px 1fr !important; }
.gc-info { margin-top: 8px; font-size: 12px; color: var(--cdss-text-muted); }
.gc-info a { color: var(--cdss-text-muted); text-decoration: underline; }
@media (max-width: 640px) {
  .gc-scales { grid-template-columns: 1fr; }
  .gc-er { grid-template-columns: 1fr !important; }
}

/* Host-page isolation: cdss.or.kr styles p (purple 12px, 20px indent) and a (display:block) globally */
#ai-chat p { color: inherit; font-size: inherit; line-height: inherit; padding: 0; }
#ai-chat .gc-top h2 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; line-height: 1.3; }
#ai-chat .gc-top p { margin: 2px 0 0; font-size: 13px; color: #b9c6dc; }
#ai-chat .gc-rec-t { font-size: 13.5px; color: #334155; }
#ai-chat a { display: inline; }
#ai-chat .gc-links { flex-direction: row; }
#ai-chat .gc-links a, #ai-chat .gc-info a { width: auto; flex: none; float: none; margin: 0; padding: 0; }

/* Modality (검사명) is the key answer: make it the heading of each row, larger than the KQ title */
.gc-er { grid-template-columns: 170px 1fr !important; gap: 14px; margin-top: 10px; }
#ai-chat .gc-er .gc-exam { font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--cdss-navy, #0f1b2d);
  background: none; border-radius: 0; padding: 3px 0 3px 11px; border-left: 4px solid var(--cdss-accent, #0ea5a4);
  justify-self: stretch; word-break: keep-all; }
@media (max-width: 640px) {
  .gc-er { grid-template-columns: 1fr !important; gap: 6px; margin-top: 12px; }
  #ai-chat .gc-er .gc-exam { font-size: 16px; }
}
/* phones: keep the three scales on one row, compact */
@media (max-width: 640px) {
  .gc-scales { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px; }
  .gc-scale { padding: 6px 5px 4px; }
  .gc-scale-h { flex-direction: column-reverse; align-items: center; gap: 3px; margin-bottom: 4px; }
  .gc-scale-l { font-size: 10.5px; }
  .gc-scale-l::before { display: none; }
  .gc-badge { font-size: 13px; padding: 0 6px; }
  .gc-steps li { font-size: 9px; padding-top: 13px; }
  .gc-steps li::before { width: 8px; height: 8px; margin-left: -4px; top: 2px; }
  .gc-steps li::after { top: 5px; }
}