/* ============ 11. AskBot 플로팅 위젯 (제품홈·Docs 공용, 우측하단) ============
   디자인 토큰(03-color/05-radius/06-shadow)을 재사용하되 전부 폴백값을 두어 토큰 없는
   사이트(Docs)에서도 동일하게 렌더된다. GNB z-index:50 위에 뜨도록 z-index:120.
   ⚠️ docs-site/static/askbot/askbot.css 는 이 파일의 동기화 복사본 — 수정 시 양쪽을 함께 맞출 것. */

.tb-askbot { position: fixed; right: 24px; bottom: 24px; z-index: 120; font-family: inherit; }

/* 런처 버튼 */
.tb-askbot-launcher {
  width: 56px; height: 56px; border: none; cursor: pointer;
  border-radius: var(--radius-full, 999px);
  background: var(--tb-ink, #1a1a1a); color: var(--tb-yellow, #ffe14d);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tb-askbot-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.tb-askbot svg { display: block; }

/* 패널 */
.tb-askbot-panel {
  position: absolute; right: 0; bottom: 72px;
  width: 360px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 120px);
  display: none; flex-direction: column; overflow: hidden;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-default, #e5e7eb);
  border-radius: var(--radius-2xl, 20px);
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
}
.tb-askbot.open .tb-askbot-panel { display: flex; }

/* 헤더 */
.tb-askbot-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: var(--tb-ink, #1a1a1a); color: #fff; flex-shrink: 0;
}
.tb-askbot-head .avatar {
  width: 32px; height: 32px; border-radius: var(--radius-full, 999px);
  background: var(--tb-yellow, #ffe14d); color: var(--tb-ink, #1a1a1a);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.tb-askbot-head .t { flex: 1; min-width: 0; }
.tb-askbot-head .t b { display: block; font-size: 14px; font-weight: 600; }
.tb-askbot-head .t span { display: block; font-size: 11px; opacity: .72; }
.tb-askbot-close, .tb-askbot-reset {
  border: none; background: transparent; color: #fff; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px; opacity: .8;
}
.tb-askbot-close:hover, .tb-askbot-reset:hover { opacity: 1; }

/* 메시지 영역 */
.tb-askbot-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-subtle, #fafafa); }
.tb-askbot-msg { max-width: 82%; padding: 10px 13px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.tb-askbot-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--border-default, #e5e7eb); border-radius: 4px 14px 14px 14px; color: var(--text-default, #1a1a1a); }
.tb-askbot-msg.user { align-self: flex-end; background: var(--tb-ink, #1a1a1a); color: #fff; border-radius: 14px 4px 14px 14px; }
.tb-askbot-msg a { color: inherit; text-decoration: underline; }

/* 말풍선 안 서식 — askbot.js 의 mdLite 가 만드는 태그만 대상으로 한다(심플 유지).
   본문이 pre-wrap 이라 블록 요소 주위에 여백이 겹치지 않도록 마진을 좁게 잡는다. */
.tb-askbot-msg strong, .tb-askbot-msg b { font-weight: 600; }
.tb-askbot-msg em { font-style: italic; }
.tb-askbot-msg code {
  font-family: var(--font-code, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px; background: rgba(24, 24, 27, .06);
  padding: 1px 5px; border-radius: 5px; white-space: nowrap;
}
.tb-askbot-msg ul, .tb-askbot-msg ol { margin: 6px 0; padding-left: 18px; }
.tb-askbot-msg ul ul, .tb-askbot-msg ol ol, .tb-askbot-msg ul ol, .tb-askbot-msg ol ul { margin: 2px 0; }
.tb-askbot-msg li { margin: 2px 0; white-space: normal; }   /* 항목 안에서는 pre-wrap 해제 — 줄바꿈이 목록을 벌린다 */
.tb-askbot-msg ul { list-style: disc; }
.tb-askbot-msg ol { list-style: decimal; }
.tb-askbot-msg .tb-askbot-h { display: block; margin: 8px 0 2px; }
.tb-askbot-msg.user code { background: rgba(255, 255, 255, .18); }

/* URL → 버튼 링크(말풍선 하단 행) — 본문엔 라벨만 남고 링크는 버튼으로 뽑힌다(askbot.js render). */
.tb-askbot-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tb-askbot-msg .tb-askbot-linkbtn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--tb-yellow, #ffe14d); color: var(--tb-ink, #1a1a1a);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--radius-full, 999px);
  padding: 7px 13px; font-size: 12px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tb-askbot-msg .tb-askbot-linkbtn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, .15); }
/* 대기 표시 — 걷는 마스코트 + 문구를 한 줄로. 말풍선 높이가 다른 메시지와 크게 어긋나지 않게
   28px 로 맞춘다(본문 13px / line-height 1.6 ≈ 21px 기준). */
.tb-askbot-msg.typing { color: var(--text-muted, #777); font-style: normal; display: flex; align-items: center; gap: 6px; }
.tb-askbot-msg.typing .tb-askbot-loader {
  width: 28px; height: 28px; flex: 0 0 auto;
  margin: -4px 0;                 /* 영상 여백만큼 상쇄해 텍스트와 시각 중심을 맞춘다 */
  object-fit: contain;
  /* mp4 는 알파가 없어 흰 배경이 사각형으로 남는다. 말풍선이 흰색이라 대개 티가 안 나지만,
     배경색이 바뀌어도 마크만 남도록 multiply 로 녹인다. */
  mix-blend-mode: multiply;
  pointer-events: none;
}
.tb-askbot-msg.typing .dots::after { content: ''; animation: tbAskbotDots 1.2s steps(4) infinite; }
@keyframes tbAskbotDots { 0% { content: ''; } 25% { content: '·'; } 50% { content: '··'; } 75% { content: '···'; } }

/* 입력줄 */
.tb-askbot-foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-default, #e5e7eb); background: #fff; flex-shrink: 0; }
.tb-askbot-foot input {
  flex: 1; min-width: 0; border: 1px solid var(--border-default, #e5e7eb);
  border-radius: var(--radius-full, 999px); padding: 10px 15px; font-size: 13px; outline: none;
}
.tb-askbot-foot input:focus { border-color: var(--tb-ink, #1a1a1a); }
.tb-askbot-foot button {
  width: 40px; height: 40px; flex-shrink: 0; border: none; cursor: pointer;
  border-radius: var(--radius-full, 999px);
  background: var(--tb-yellow, #ffe14d); color: var(--tb-ink, #1a1a1a);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.tb-askbot-foot button:disabled { opacity: .45; cursor: default; }

/* ── 모바일 세로 최적화 ──────────────────────────────────────────────────
   랜딩 본문은 원본이 모바일까지 잡아 놨지만 위젯은 검증된 적이 없었다. 실측으로 잡은 것들:

   1) **100vw 는 스크롤바를 포함한다.** 390 뷰포트에서 레이아웃 폭은 375 인데 max-width 가 358 로 잡혀,
      오른쪽 12px 을 지키면 왼쪽 여백이 3px 까지 밀렸다(좌우 비대칭). 모바일에서는 폭 계산을 버리고
      left/right 를 직접 물려 대칭을 보장한다 — 넘칠 여지 자체를 없앤다.
   2) **입력 글자가 16px 미만이면 iOS Safari 가 포커스 시 페이지를 확대**한다(되돌아오지 않는다).
   3) **주소창 때문에 vh 가 흔들린다** — dvh 를 쓸 수 있으면 dvh 로.
   4) 노치·홈 인디케이터 **안전영역**을 여백에 반영한다.
   5) 닫기·초기화 버튼이 28px 남짓이라 **터치 타겟**이 작다(권장 44px). */
@media (max-width: 480px) {
  .tb-askbot {
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .tb-askbot-panel {
    position: fixed;                 /* 래퍼가 아니라 뷰포트 기준으로 물린다 */
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));   /* 런처(56) + 여백 */
    width: auto; max-width: none;
    height: 70vh;
    max-height: calc(100vh - 140px);
    border-radius: var(--radius-xl, 16px);
  }
  .tb-askbot-body { padding: 14px 12px; }
  .tb-askbot-msg { max-width: 88%; }              /* 폭이 좁아 82% 는 줄바꿈이 잦다 */
  .tb-askbot-foot { padding: 10px; }
  .tb-askbot-foot input { font-size: 16px; }      /* iOS 자동 확대 방지 — 줄이지 말 것 */
  .tb-askbot-foot button { width: 44px; height: 44px; }
  .tb-askbot-close, .tb-askbot-reset { padding: 10px; }
}

/* dvh 지원 브라우저에서는 주소창 변화에 따라 패널이 잘리지 않는다. */
@supports (height: 100dvh) {
  @media (max-width: 480px) {
    .tb-askbot-panel { height: 70dvh; max-height: calc(100dvh - 140px); }
  }
}