/* ============ 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; }

/* 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); }
.tb-askbot-msg.typing { color: var(--text-muted, #777); font-style: normal; }
.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; }

@media (max-width: 480px) {
  .tb-askbot { right: 12px; bottom: 12px; }
  .tb-askbot-panel { bottom: 64px; height: 70vh; }
}