/* 서울대공원 AI 챗봇 위젯 스킨 — 우하단 플로팅 팝업.
   시그모이드 R2 조직 페이지의 "AI 에이전트 > 챗봇 위젯"(chat-widget-skin.css)을 이식하고
   색만 서울대공원 토큰(common_2024.css: --color-primary #27384d / --color-mint #0c9c96)으로 맞췄다.

   스코프 규칙 (양방향 격리):
   - 모든 셀렉터는 .gp-chat 하위. 위젯 스타일이 사이트로 새지 않는다.
   - 사이트 전역 CSS(common_2024.css 등)가 button/textarea/ul/a 를 건드리므로,
     위젯 내부에서 쓰는 요소는 여기서 명시적으로 리셋한다.
   - reset.css / common.css 는 로드하지 않는다 (전역 요소 셀렉터로 사이트를 오염시킴).
   - 폰트는 호스트 페이지 것을 상속한다. Pretendard woff(1MB×9)를 추가로 받지 않는다. */

.gp-chat{
  /* ─ 서울대공원 토큰 ─ */
  --gp-navy: #27384d;        /* common_2024.css --color-primary */
  --gp-navy-lift: #3d5470;
  --gp-mint: #0c9c96;        /* common_2024.css --color-mint */
  --gp-cyan: #098295;        /* common_2024.css --color-cyan */
  --gp-mint-soft: #7fcfca;

  --gp-ink: #1f2b3a;
  --gp-ink-soft: #5b6b7d;
  --gp-gray-50: #f5f8fa;
  --gp-gray-100: #eef2f6;
  --gp-gray-200: #dde5ec;
  --gp-gray-300: #aab8c5;
  --gp-gray-600: #64748b;

  --gp-brand: linear-gradient(135deg, var(--gp-navy), var(--gp-mint));
  --gp-shadow-brand: rgba(39, 56, 77, 0.34);

  font-family: inherit;
  color: var(--gp-ink);
}

/* ─── 위젯 내부 요소 리셋 (사이트 전역 CSS 영향 차단) ─── */
.gp-chat button{
  margin: 0; padding: 0;
  font: inherit; color: inherit;
  background: none; border: 0;
  text-align: inherit;
  -webkit-appearance: none; appearance: none;
}
/* 사이트 전역 CSS(common_2024.css)가 textarea 에 min-height:270px / height:55px / padding /
   border 를 걸어둔다. 위젯 입력창은 JS autogrow 가 높이를 재므로 그 강제값을 전부 되돌린다.
   (font 만 덮었다가 입력창이 패널을 다 잡아먹는 회귀가 있었다) */
/* 포커스 링 — 사이트 전역 `button:focus{outline:2px dashed #0C82E9}`(common_2024.css)를 끄고
   위젯 톤으로 다시 준다. :focus 를 꺼야 하는 이유: 마우스 클릭은 :focus-visible 에 해당하지 않아
   내 규칙이 적용되지 않고 사이트의 점선 링만 남는다. 키보드 탐색용 링은 :focus-visible 로 유지한다. */
.gp-chat button:focus,
.gp-chat a:focus,
.gp-chat textarea:focus{ outline: none; }
.gp-chat button:focus-visible,
.gp-chat a:focus-visible,
.gp-chat textarea:focus-visible{ outline: 2px solid var(--gp-mint); outline-offset: 2px; }
.gp-chat textarea{
  font: inherit;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}
.gp-chat p, .gp-chat h1, .gp-chat h2, .gp-chat h3,
.gp-chat h4, .gp-chat h5, .gp-chat h6, .gp-chat blockquote{ margin: 0; }
.gp-chat *, .gp-chat *::before, .gp-chat *::after{ box-sizing: border-box; }
.gp-chat [hidden]{ display: none !important; }
/* 문구는 JS 사전이 채운다. 채우기 전에는 감춰 둬야 영어/중국어 페이지에서 한국어 기본값이
   잠깐 스쳐 보이는 일이 없다 (특히 항상 떠 있는 안내 말풍선). */
.gp-chat .cw-root[data-ready="false"]{ visibility: hidden; }

/* ─── 기능 스위치 (chatbot.jsp) ───
   JS 에만 의존해 숨기면 스크립트가 낡거나(브라우저 캐시) 실패했을 때 버튼이 그대로 노출된다.
   실제로 캐시된 구버전 JS 때문에 꺼둔 버튼이 보이는 일이 있었다. 마크업은 남기고 CSS 로도 막는다. */
.gp-chat[data-multilingual="off"] .cw-lang-picker{ display: none !important; }
.gp-chat[data-pdf="off"] .cw-print{ display: none !important; }

/* ─── 플로팅 컨테이너 (우하단 고정) ─── */
.gp-chat .cw-root{
  position: fixed;
  right: 28px;
  bottom: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
}
.gp-chat .cw-root > *{ pointer-events: auto; }

/* ─── 런처 버튼 ─── */
.gp-chat .cw-launcher{
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--gp-brand);
  box-shadow: 0 12px 34px var(--gp-shadow-brand);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform 0.18s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.18s ease;
}
.gp-chat .cw-launcher:hover{ transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 40px rgba(12, 156, 150, 0.42); }
.gp-chat .cw-launcher:active{ transform: scale(0.97); }
.gp-chat .cw-launcher:focus-visible{ outline: 3px solid var(--gp-mint); outline-offset: 3px; }
.gp-chat .cw-launcher-icon{ display: inline-flex; align-items: center; justify-content: center; }
.gp-chat .cw-launcher .cw-mark{ width: 38px; height: 38px; }
.gp-chat .cw-avatar .cw-mark{ width: 23px; height: 23px; }

/* ─── 런처 안내 말풍선 (닫힘 상태에서만) ─── */
.gp-chat .cw-hint{
  position: absolute;
  bottom: 38px;
  right: 102px;
  max-width: 214px;
  padding: 11px 15px;
  background: #fff;
  color: var(--gp-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  text-align: right;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(20, 30, 60, 0.18);
  animation: gp-cw-hint-bob 2.6s ease-in-out infinite;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.gp-chat .cw-hint b{ color: var(--gp-mint); font-weight: 800; }
.gp-chat .cw-hint::after{
  content: "";
  position: absolute;
  right: -8px; bottom: 16px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 9px solid #fff;
}
@keyframes gp-cw-hint-bob{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
.gp-chat .cw-root[data-open="true"] .cw-hint{ opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce){ .gp-chat .cw-hint{ animation: none; } }
@media (max-width: 560px){ .gp-chat .cw-hint{ display: none; } }

/* ─── 패널 ─── */
.gp-chat .cw-panel{
  width: 420px;
  max-width: calc(100vw - 40px);
  height: 620px;
  max-height: calc(100vh - 128px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(20, 30, 60, 0.24);
  overflow: hidden;
  transform-origin: bottom right;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.2,0.7,0.2,1);
}
.gp-chat .cw-root[data-open="false"] .cw-panel{
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  pointer-events: none;
}
.gp-chat .cw-root[data-open="true"] .cw-panel{ opacity: 1; transform: translateY(0) scale(1); }

/* ─── 헤더 ─── */
.gp-chat .cw-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 15px 16px 14px;
  border-bottom: 1px solid var(--gp-gray-200);
}
.gp-chat .cw-head-id{ display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.gp-chat .cw-avatar{
  position: relative;
  width: 40px; height: 40px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gp-brand);
  box-shadow: 0 6px 16px rgba(39, 56, 77, 0.26);
  color: #fff;
  flex-shrink: 0;
}
.gp-chat .cw-head-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gp-chat .cw-org{
  font-size: 15px; font-weight: 800; letter-spacing: -0.3px;
  color: var(--gp-navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.1;
}
.gp-chat .cw-status{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--gp-ink-soft);
}
.gp-chat .cw-status::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gp-mint); box-shadow: 0 0 0 3px rgba(12, 156, 150, 0.18);
}
.gp-chat .cw-head-actions{ display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.gp-chat .cw-print,
.gp-chat .cw-close{
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 10px;
  color: var(--gp-gray-600); line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.gp-chat .cw-close{ font-size: 20px; }
.gp-chat .cw-print svg{ width: 17px; height: 17px; }
.gp-chat .cw-print:hover,
.gp-chat .cw-close:hover{ background: var(--gp-gray-100); color: var(--gp-navy); }

/* ─── 본문 ─── */
.gp-chat .cw-body{
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 10px;
  background: var(--gp-gray-50);
  scrollbar-width: thin;
  scrollbar-color: var(--gp-gray-300) transparent;
}
.gp-chat .cw-body::-webkit-scrollbar{ width: 7px; }
.gp-chat .cw-body::-webkit-scrollbar-thumb{ background: var(--gp-gray-300); border-radius: 999px; }
.gp-chat .cw-thread{ display: flex; flex-direction: column; gap: 14px; }

/* ─── 메시지 버블 ─── */
.gp-chat .cw-msg{ display: flex; flex-direction: column; max-width: 100%; }
.gp-chat .cw-msg--user{ align-items: flex-end; }
.gp-chat .cw-msg--bot{ align-items: flex-start; }
.gp-chat .cw-bubble{
  max-width: 90%;
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.62;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.gp-chat .cw-msg--user .cw-bubble{
  background: var(--gp-brand);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 6px 16px rgba(39, 56, 77, 0.22);
}
.gp-chat .cw-msg--bot .cw-bubble{
  background: #fff;
  color: var(--gp-ink);
  border: 1px solid var(--gp-gray-200);
  border-bottom-left-radius: 5px;
  box-shadow: 0 4px 14px rgba(20, 30, 60, 0.05);
}
.gp-chat .cw-greeting .cw-em-navy{ color: var(--gp-navy); font-weight: 700; }
.gp-chat .cw-greeting .cw-em-mint{ color: var(--gp-mint); font-weight: 700; }
.gp-chat .cw-greeting .cw-note{ color: var(--gp-cyan); font-weight: 600; }
.gp-chat .cw-time{ margin-top: 5px; font-size: 11px; color: var(--gp-gray-300); }

/* ─── 봇 답변 markdown ───
   기존 r1 위젯 CSS 에는 pre/code/white-space 규칙이 아예 없어 표·코드·개행이 깨졌다.
   marked 가 만들어내는 요소를 여기서 전부 받아준다. */
.gp-chat .cw-bubble .text-block{ display: inline; white-space: pre-wrap; }
.gp-chat .cw-bubble .text-block--rendered{ display: block; white-space: normal; }
.gp-chat .cw-bubble .text-block--rendered > :first-child{ margin-top: 0; }
.gp-chat .cw-bubble .text-block--rendered > :last-child{ margin-bottom: 0; }
.gp-chat .cw-bubble p{ margin: 0 0 9px; }
.gp-chat .cw-bubble h1, .gp-chat .cw-bubble h2, .gp-chat .cw-bubble h3,
.gp-chat .cw-bubble h4, .gp-chat .cw-bubble h5, .gp-chat .cw-bubble h6{
  font-weight: 700; color: var(--gp-navy); line-height: 1.3; margin: 12px 0 5px;
}
.gp-chat .cw-bubble h1{ font-size: 17px; }
.gp-chat .cw-bubble h2{ font-size: 16px; }
.gp-chat .cw-bubble h3{ font-size: 15px; }
.gp-chat .cw-bubble h4{ font-size: 14px; }
.gp-chat .cw-bubble h5, .gp-chat .cw-bubble h6{ font-size: 13px; }
.gp-chat .cw-bubble ul{ margin: 0 0 9px; padding-left: 20px; list-style: disc; }
.gp-chat .cw-bubble ol{ margin: 0 0 9px; padding-left: 20px; list-style: decimal; }
.gp-chat .cw-bubble li{ margin: 3px 0; list-style: inherit; }
.gp-chat .cw-bubble li > ul, .gp-chat .cw-bubble li > ol{ margin: 3px 0; }
.gp-chat .cw-bubble a{ color: var(--gp-cyan); text-decoration: underline; text-underline-offset: 2px; }
.gp-chat .cw-bubble a:hover{ color: var(--gp-mint); }
.gp-chat .cw-bubble strong{ font-weight: 700; }
.gp-chat .cw-bubble em{ font-style: italic; }
.gp-chat .cw-bubble code{
  background: var(--gp-gray-100); padding: 1px 5px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em;
}
.gp-chat .cw-bubble pre{
  background: var(--gp-gray-100); border: 1px solid var(--gp-gray-200); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 9px; overflow-x: auto;
}
.gp-chat .cw-bubble pre code{ background: transparent; padding: 0; border-radius: 0; }
.gp-chat .cw-bubble blockquote{
  margin: 0 0 9px; padding: 3px 12px; border-left: 3px solid var(--gp-mint-soft); color: var(--gp-ink-soft);
}
.gp-chat .cw-bubble hr{ border: 0; border-top: 1px solid var(--gp-gray-200); margin: 12px 0; }
/* 넓은 표는 표 안에서만 가로 스크롤 — 좁은 버블에서 다열 표가 대화 밖으로 넘치지 않게
   block + width:max-content + overflow-x 로 가둔다 (width:100% 는 상한 역할을 못 한다). */
.gp-chat .cw-bubble table{
  border-collapse: collapse; margin: 0 0 9px;
  display: block; width: max-content; max-width: 100%;
  overflow-x: auto; font-size: 13px;
}
/* keep-all — 좁은 셀에서 '구분'이 '구/분'으로 끊기는 것을 막는다(한국어 단어 단위 줄바꿈). */
.gp-chat .cw-bubble th, .gp-chat .cw-bubble td{
  border: 1px solid var(--gp-gray-200); padding: 5px 8px; text-align: left;
  /* anywhere 가 아니라 break-word — anywhere 는 min-content 폭을 글자 1개로 만들어
     열이 최대한 좁아지고, 결국 keep-all 이 지키려던 단어가 도로 끊긴다. */
  word-break: keep-all; overflow-wrap: break-word;
}
.gp-chat .cw-bubble th{ background: var(--gp-gray-100); font-weight: 600; color: var(--gp-navy); }

/* ─── 인용 필 (본문 [n] → 클릭) ─── */
.gp-chat .cw-cite{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 16px;
  margin: 0 1px;
  padding: 0 5px;
  font-size: 10px; font-weight: 700;
  color: #fff;
  background: var(--gp-brand);
  border-radius: 999px;
  cursor: pointer;
  vertical-align: super;
  line-height: 1;
  position: relative; top: -1px;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.gp-chat .cw-cite:hover{ transform: translateY(-1px) scale(1.08); box-shadow: 0 3px 9px rgba(12, 156, 150, 0.38); }
.gp-chat .cw-cite:active{ transform: scale(0.94); }
.gp-chat .cw-cite:focus-visible{ outline: 2px solid var(--gp-mint); outline-offset: 2px; }

/* ─── 진행 인디케이터 ─── */
.gp-chat .cw-progress{ display: inline-flex; align-items: center; gap: 8px; color: var(--gp-ink-soft); font-size: 13px; }
.gp-chat .cw-dots{ display: inline-flex; gap: 3px; }
.gp-chat .cw-dots i{
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(90deg, var(--gp-navy), var(--gp-mint));
  animation: gp-cw-bounce 1s ease-in-out infinite;
}
.gp-chat .cw-dots i:nth-child(2){ animation-delay: 0.15s; }
.gp-chat .cw-dots i:nth-child(3){ animation-delay: 0.3s; }
@keyframes gp-cw-bounce{ 0%,100%{ opacity:0.3; transform: translateY(0);} 50%{ opacity:1; transform: translateY(-3px);} }
.gp-chat .cw-error{ color: #d1362f; font-size: 13px; }
.gp-chat .cw-error--cutoff{ margin-top: 8px; }

/* ─── 참고 자료 ─── */
.gp-chat .cw-sources{
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--gp-gray-200);
}
.gp-chat .cw-sources-head{ display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.gp-chat .cw-sources-kicker{
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gp-ink-soft);
}
.gp-chat .cw-sources-kicker::before{
  content: "§"; margin-right: 5px; color: var(--gp-mint);
}
.gp-chat .cw-sources-count{ font-size: 10.5px; color: var(--gp-gray-300); }
.gp-chat .cw-sources-list{ display: flex; flex-direction: column; gap: 2px; }

.gp-chat .cw-src{
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  padding: 9px 6px;
  border-radius: 10px;
  transition: background 0.2s ease;
}
.gp-chat .cw-src + .cw-src{ border-top: 1px dotted var(--gp-gray-200); }
/* .cw-src 는 display:grid 라 [hidden] 기본 display:none 을 덮는다 → 위 리셋의 !important 로 가둔다. */
.gp-chat .cw-src-num{
  font-size: 18px; font-weight: 700;
  line-height: 1.2;
  color: var(--gp-mint);
  user-select: none;
  text-align: center;
}
.gp-chat .cw-src-body{ min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gp-chat .cw-src-title{
  font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--gp-navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gp-chat .cw-src-snip{
  margin: 0; padding: 0; border: none;
  font-size: 12px; line-height: 1.5; color: var(--gp-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: keep-all; overflow-wrap: anywhere;
}
.gp-chat .cw-src-foot{ display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gp-chat .cw-src-type{
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gp-ink-soft);
}
.gp-chat .cw-src-page{ font-size: 9.5px; color: var(--gp-gray-300); }
.gp-chat .cw-src-link{
  font-size: 11.5px; font-weight: 600; color: var(--gp-cyan); text-decoration: none;
  display: inline-flex; align-items: center; gap: 2px;
}
.gp-chat .cw-src-link::after{ content: "↗"; font-size: 10px; }
.gp-chat .cw-src-link:hover{ color: var(--gp-mint); }
.gp-chat .cw-src-pulse{ animation: gp-cw-src-pulse 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes gp-cw-src-pulse{ 0%{ background: rgba(12, 156, 150, 0.16); } 100%{ background: transparent; } }

/* ─── 출처 문서 그룹 ─── */
.gp-chat .cw-src-group{ padding: 9px 6px; }
.gp-chat .cw-src-group + .cw-src-group{ border-top: 1px dotted var(--gp-gray-200); }
.gp-chat .cw-src-group-head{ display: flex; align-items: flex-start; gap: 8px; }
.gp-chat .cw-src-group-title-wrap{ flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gp-chat .cw-src-group-badge{
  flex-shrink: 0;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--gp-ink-soft);
  padding: 1px 7px; border-radius: 999px; background: var(--gp-gray-100);
}
.gp-chat .cw-src-group-toggle{
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 7px;
  cursor: pointer;
  font-size: 12px; line-height: 1; color: var(--gp-gray-600);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.gp-chat .cw-src-group-toggle:hover{ background: var(--gp-gray-100); color: var(--gp-navy); }
.gp-chat .cw-src-group > .cw-src-foot{ margin-top: 6px; }
.gp-chat .cw-src-chunks{ margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.gp-chat .cw-src-chunks .cw-src{ padding: 7px 6px; border-radius: 8px; }

/* ─── 추천 질문 칩 ─── */
.gp-chat .cw-chips{ display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.gp-chat .cw-chip{
  display: flex; align-items: center; gap: 9px;
  text-align: left;
  padding: 11px 15px;
  font-size: 13px; font-weight: 600; color: var(--gp-ink);
  background: #fff;
  border: 1px solid var(--gp-gray-200);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.gp-chat .cw-chip:hover{ border-color: var(--gp-mint-soft); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(12, 156, 150, 0.12); }
.gp-chat .cw-chip-icon{
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  background: var(--gp-brand);
}

/* ─── 언어 선택 (헤더 드롭다운) ───
   언어는 한 번 정하고 거의 바꾸지 않는 설정이라 상시 노출 대신 현재 값만 보여주고
   필요할 때 펼친다. 입력창 위 한 줄을 차지하던 알약 묶음을 대체한다. */
.gp-chat .cw-lang-picker{ position: relative; display: inline-flex; }
.gp-chat .cw-lang-btn{
  display: inline-flex; align-items: center; gap: 3px;
  height: 28px; padding: 0 7px;
  border-radius: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--gp-gray-600);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.gp-chat .cw-lang-btn:hover{ background: var(--gp-gray-100); color: var(--gp-navy); }
.gp-chat .cw-lang-btn[aria-expanded="true"]{ background: var(--gp-gray-100); color: var(--gp-navy); }
.gp-chat .cw-globe{ width: 15px; height: 15px; flex-shrink: 0; }
.gp-chat .cw-caret{ font-size: 9px; line-height: 1; opacity: 0.75; }

.gp-chat .cw-lang-menu{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  min-width: 108px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--gp-gray-200);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20, 30, 60, 0.16);
  display: flex; flex-direction: column; gap: 1px;
}
.gp-chat .cw-lang{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--gp-ink);
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease;
}
.gp-chat .cw-lang:hover{ background: var(--gp-gray-100); }
.gp-chat .cw-lang--on{ color: var(--gp-mint); font-weight: 800; }
.gp-chat .cw-lang--on::after{ content: "✓"; font-size: 11px; }

/* ─── 입력 ─── */
.gp-chat .cw-input{ border-top: 1px solid var(--gp-gray-200); padding: 10px 14px; background: #fff; display: flex; flex-direction: column; }
.gp-chat .cw-count{ display: block; text-align: right; margin: 0 4px 5px 0; font-size: 11px; color: var(--gp-gray-300); }
.gp-chat .cw-input-bar{
  display: flex; align-items: flex-end; gap: 8px;
  padding: 6px 6px 6px 16px;
  border: 1.5px solid var(--gp-gray-200);
  border-radius: 24px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gp-chat .cw-input-bar:focus-within{ border-color: var(--gp-mint-soft); box-shadow: 0 0 0 4px rgba(12, 156, 150, 0.10); }
.gp-chat .cw-input textarea{
  flex: 1; border: none; outline: none; resize: none;
  background: transparent;
  font-size: 14px; line-height: 1.5; color: var(--gp-ink);
  max-height: 96px; padding: 6px 0;
}
.gp-chat .cw-input textarea::placeholder{ color: var(--gp-gray-300); }
.gp-chat .cw-input-btns{ display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gp-chat .cw-mic{
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gp-gray-600);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.gp-chat .cw-mic svg{ width: 18px; height: 18px; }
.gp-chat .cw-mic:hover{ background: var(--gp-gray-100); color: var(--gp-navy); }
/* 듣는 중 — 색만 바꾸면 조용해서 놓친다. 퍼지는 링으로 "지금 녹음 중"을 분명히 알린다. */
.gp-chat .cw-mic--listening{ background: rgba(12, 156, 150, 0.12); color: var(--gp-mint); animation: gp-cw-mic-pulse 1.4s ease-in-out infinite; }
@keyframes gp-cw-mic-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(12, 156, 150, 0.42); }
  50%{ box-shadow: 0 0 0 6px rgba(12, 156, 150, 0); }
}
@media (prefers-reduced-motion: reduce){ .gp-chat .cw-mic--listening{ animation: none; } }

.gp-chat .cw-send{
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: var(--gp-brand); color: #fff;
  box-shadow: 0 5px 14px rgba(12, 156, 150, 0.30);
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.gp-chat .cw-send:hover{ transform: scale(1.06); }
.gp-chat .cw-send:disabled{ opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

/* ─── 푸터 ─── */
.gp-chat .cw-foot{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 16px;
  background: var(--gp-gray-100);
  font-size: 10.5px; color: var(--gp-gray-600);
}
.gp-chat .cw-tagline{ font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-chat .cw-brand{ font-weight: 700; flex-shrink: 0; letter-spacing: 0.02em; }

@media (max-width: 560px){
  .gp-chat .cw-root{ right: 16px; bottom: 16px; }
  .gp-chat .cw-panel{ width: calc(100vw - 32px); height: calc(100vh - 118px); }
  .gp-chat .cw-launcher{ width: 64px; height: 64px; }
  .gp-chat .cw-launcher .cw-mark{ width: 31px; height: 31px; }
}

/* ─── 답변 복사 액션 ─── */
.gp-chat .cw-actions{ margin-top: 8px; display: flex; }
.gp-chat .cw-copy{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border: 1px solid var(--gp-gray-200); border-radius: 999px;
  background: #fff; color: var(--gp-gray-600);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.gp-chat .cw-copy:hover{ color: var(--gp-navy); border-color: var(--gp-mint-soft); background: var(--gp-gray-100); }
.gp-chat .cw-copy--done{ color: var(--gp-mint); border-color: var(--gp-mint-soft); }

/* ─── 인쇄 ───
   PDF 내보내기가 켜진 경우에만 "대화만 출력" 레이아웃을 적용한다. 이때 호스트 페이지 본문을
   숨기는 규칙은 JS 가 붙이는 body.gp-chat-print-export 가 있을 때만 동작한다 — 예전에는 조건
   없이 body > * 를 숨겨서, 방문자가 그냥 Ctrl+P 로 페이지를 인쇄해도 본문 대신 챗봇만 나왔다.
   PDF 내보내기가 꺼져 있으면 위젯은 인쇄물에서 통째로 빠진다. */
@media print {
  .gp-chat[data-pdf="off"]{ display: none !important; }
  body.gp-chat-print-export > *:not(.gp-chat){ display: none !important; }
  .gp-chat .cw-launcher,
  .gp-chat .cw-hint,
  .gp-chat .cw-head-actions,
  .gp-chat .cw-input,
  .gp-chat .cw-foot,
  .gp-chat .cw-chips,
  .gp-chat .cw-actions{ display: none !important; }
  .gp-chat .cw-root{ position: static !important; display: block !important; }
  .gp-chat .cw-panel{
    width: 100% !important; max-width: none !important;
    height: auto !important; max-height: none !important;
    opacity: 1 !important; transform: none !important;
    box-shadow: none !important; overflow: visible !important;
    border-radius: 0 !important;
  }
  .gp-chat .cw-body{ overflow: visible !important; height: auto !important; background: #fff !important; }
  /* 출처 그룹은 접힌 상태로 시작하므로 인쇄에서는 강제로 펼친다.
     인용 필터로 숨긴 .cw-src[hidden] 은 그대로 숨겨져 인용된 청크만 나온다. */
  .gp-chat .cw-src-chunks{ display: flex !important; }
  .gp-chat .cw-src-group-toggle{ display: none !important; }
}