/* 중국어 AI 도우미 — 전 페이지 공용. 2026-08-25 view.html 에서 추출.
   패널의 기본 배치는 마크업의 인라인 style 에 있고, FAB 은 여기서 전부 정한다(2026-09-17). */

/* ── FAB ──
   48px · z --z-fab. 데스크톱은 오른쪽 아래 24px, 모바일은 하단 탭 바(--bottom-nav-h) 위 12px.
   display 는 flex 여야 한다 — ai-chat.js 가 패널을 닫을 때 style.display='flex' 로 되돌린다.
   quiz/view 는 페이지 CSS 에서 display:none !important 로 끈다. */
#ai-chat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--color-primary-500);
  color: var(--color-bg);
  font-size: 1.125rem;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
#ai-chat-fab:hover { background: var(--color-primary-600); }
#ai-chat-fab:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 3px; }

@media (max-width: 767.98px) {
  #ai-chat-fab {
    right: 16px;
    bottom: calc(var(--bottom-nav-h) + 12px);
  }
  /* 탭 바가 없는 페이지(로그인 전 화면은 FAB 도 없다 — 그 외 hide_bottom_nav 페이지용) */
  body.no-bottom-nav #ai-chat-fab { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
}

/* ── 학습 코치 말풍선 (C1, 2026-09-19, 홈 전용) ──
   #ai-chat-fab 좌표는 그대로 두고, 그 왼쪽에 알약형 말풍선 + 닫기 버튼을 고정폭 오프셋으로
   덧붙인다. right 를 고정하고 내용 폭만 늘려 "왼쪽으로 자라는" 모양을 만든다.
   로직은 static/js/coach-bubble.js(dashboard.html 이 coach_bubble=true 일 때만 싣는다). */
.coach-bubble-wrap {
  position: fixed;
  right: calc(24px + 48px + 8px);
  bottom: 24px;
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.coach-bubble-wrap[hidden] { display: none; }
.coach-bubble-wrap.is-visible { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .coach-bubble-wrap { transition: none; }
}
@media (max-width: 767.98px) {
  .coach-bubble-wrap {
    right: calc(16px + 48px + 8px);
    bottom: calc(var(--bottom-nav-h) + 12px);
  }
  body.no-bottom-nav .coach-bubble-wrap { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
}

.coach-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: min(280px, calc(100vw - 32px - 44px - 6px));
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--color-bg);
  color: var(--color-fg);
  box-shadow: var(--shadow-md);
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.coach-bubble:hover { background: var(--muted); }
.coach-bubble:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
.coach-bubble-icon { flex-shrink: 0; color: var(--color-primary-500); }
.coach-bubble-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.coach-bubble-close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--color-bg);
  color: var(--muted-foreground);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.coach-bubble-close:hover { background: var(--muted); }
.coach-bubble-close:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }

/* 채팅 메시지 안 코치 바로가기 버튼 — appendAiMsg 가 만드는 버블 내부 */
.coach-msg-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.coach-msg-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--color-primary-500);
  color: var(--color-bg);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.coach-msg-action:hover { background: var(--color-primary-600); }

/* ── '중국인 친구' 채팅 코치 (C4, 2026-09-21, docs/coach-design §11) ──
   코치 모드는 dashboard 의 말풍선(coach-bubble.js)에서만 들어가고, 패널 헤더의 배지 하나로
   표시 + 종료를 겸한다(§ 헤더 폭이 이미 4버튼이라 별도 종료 버튼을 더하지 않는다). */
.coach-mode-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 4px 9px;
  min-height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.coach-mode-badge:hover { background: rgba(255, 255, 255, 0.28); }
.coach-mode-badge:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.coach-mode-badge[hidden] { display: none; }

/* 채팅 버블 안 중국어 한마디 — §11-1, 매 턴이 아니라 화면이 고른 턴에만 붙는다(coach-bubble.js 주석 참고) */
.coach-cheer {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.8rem;
  color: var(--muted-foreground);
}
.coach-cheer-py { opacity: 0.85; }

/* 퀴즈로 나온 '어려운 단어'로 가는 작은 링크 — 채점 없음, 이동만(§11-2) */
.coach-quiz-links { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.coach-quiz-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--color-primary-200);
  border-radius: 10px;
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.coach-quiz-link:hover { background: var(--color-primary-100); }

/* ── AI 채팅 전체화면 모드 ── */
#ai-chat-panel.ai-chat-fullscreen {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100% !important; max-width: 100% !important;
  height: 100% !important; max-height: 100% !important;
  border-radius: 0 !important;
  z-index: var(--z-modal) !important;
  margin: 0 !important;
}
#ai-chat-panel.ai-chat-fullscreen > div:first-child { border-radius: 0 !important; }
#ai-chat-panel.ai-chat-fullscreen #ai-messages { max-height: none !important; flex: 1; }
/* 히스토리 패널도 메시지 영역과 같은 자리를 차지한다(_ai_chat.html 참고) — 이 규칙이 없으면
   본문 inline max-height:420px 가 그대로 남아 전체화면 안에서 하단이 텅 비어 보인다. */
#ai-chat-panel.ai-chat-fullscreen #ai-history-panel { max-height: none !important; flex: 1; }