/* ────────────────────────────────────────────────────────────────────
   Live chat widget — kookjang24
   Brand accent: #77EEBB
   Mounted into any Flask page via `chat-widget.js`.
   Everything is scoped under .k24-chat to avoid colliding with predictions.css
   ──────────────────────────────────────────────────────────────────── */

:root {
  --k24-accent: #77EEBB;
  --k24-accent-dim: rgba(119, 238, 187, 0.2);
  --k24-bg: #0f1115;
  --k24-bg-2: #171a20;
  --k24-bg-3: #1f242c;
  --k24-fg: #e6e8eb;
  --k24-fg-dim: #9aa4b2;
  --k24-border: #2a303a;
  --k24-danger: #ff6b6b;
  /* 5/27 — 정보(news) 카테고리: 속보/breaking news 시각 구분.
     amber (#FFC25C) — design.md 의 --dot-closed (semantic warning/pending) 와
     의도 인접. brand accent 와 분리해서 "주목" 신호로 사용. */
  --k24-news: #FFC25C;
  --k24-news-dim: rgba(255, 194, 92, 0.12);
}

/* ── floating launcher button ───────────────────────────────────────── */
.k24-chat-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--k24-accent);
  color: #0b0d10;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  font-size: 22px;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease;
}
.k24-chat-launcher:hover { transform: translateY(-2px); }
/* When the mobile bottom-nav hosts the chat entry point, drop the
   floating bubble so there's only one clear launcher on screen. */
.k24-chat-launcher--nav-hosted { display: none; }
.k24-chat-launcher[data-online]::after {
  content: attr(data-online);
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 11px;
  background: #0b0d10;
  color: var(--k24-accent);
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--k24-accent);
}

/* ── drawer ─────────────────────────────────────────────────────────── */
.k24-chat-drawer {
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 9999;
  width: min(380px, calc(100vw - 40px));
  height: min(560px, calc(100vh - 120px));
  background: var(--k24-bg);
  color: var(--k24-fg);
  border: 1px solid var(--k24-border);
  border-radius: 14px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
}
.k24-chat-drawer[data-open="true"] { display: flex; }

/* Mobile layout: fullscreen drawer that sits above the bottom-nav.
   The nav stays visible so the user can see "채팅" lit up (is-active)
   and tap it again to close. Breakpoint matches the nav's own
   max-width: 1024px so tablets get the same sheet. */
@media (max-width: 1024px) {
  .k24-chat-drawer {
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--mobile-nav-h, 60px) + env(safe-area-inset-bottom));
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
  }
}

/* ── Desktop docked sidebar (>= 1025px) ─────────────────────────────────
   Community sidecar — design.md anti-pattern §11 (data-terminal sidebar)
   금지와 별개 carve-out.

   Layout 우선순위 (5/27 v3, 사용자 명시):
     1) viewport 큰 경우 (>= ~1640px): content centered within (viewport - sidebar).
        좌측 빈공간 = (viewport - sidebar - content_max) / div 2 — 자연 centering.
        실제 구현: main wrapper 에 `margin-right: sidebar; margin-left: auto`
        → 좌측 자동 분배.
     2) viewport 줄어듦: **좌측 빈공간이 먼저 0 까지 줄어듬** (margin-left auto 가
        남은 공간 다 차지). 콘텐츠는 사이드바 옆에 고정.
     3) viewport - sidebar < content_max 도달: 콘텐츠 (max 1240) 가 사이드바 영역으로
        underflow (z-index 사이드바 50 > content 0, 사이드바 가 우측 일부 가림).

   Launcher 제거 (5/27 v3): 데스크탑 docked 에선 fab launcher 안 씀. 대신
   사이드바 왼쪽 가장자리에 `<` 토글 버튼 — collapsed 시 `>` 로 viewport 우측 가장자리에. */
@media (min-width: 1025px) {
  .k24-chat-drawer[data-mode="docked"] {
    position: fixed;
    top: var(--header-h-desktop, 68px);   /* site header (sticky z:40) 아래부터 시작 */
    right: 0;
    bottom: 0;
    left: auto;
    width: var(--chat-sidebar-w-desktop, 400px);
    height: calc(100vh - var(--header-h-desktop, 68px));
    max-height: none;
    border-radius: 0;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid var(--k24-border);
    box-shadow: none;
    z-index: 50;
  }
  /* Docked + collapsed: drawer hide */
  .k24-chat-drawer[data-mode="docked"][data-open="false"] {
    display: none;
  }
  /* 데스크탑 docked 면 fab launcher 자체 hide (사용자 명시 '없었으면') */
  .k24-chat-launcher {
    display: none !important;
  }

  /* < / > 토글 버튼 — collapsed/expanded 상태 모두에서 사이드바 왼쪽 가장자리 또는
     viewport 우측 가장자리에 작은 tab 으로 노출. */
  .k24-chat-toggle {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 64px;
    background: var(--k24-bg-2);
    border: 1px solid var(--k24-border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--k24-fg-dim);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: grid;
    place-items: center;
    z-index: 51;   /* 사이드바 위 */
    padding: 0;
    transition: color 0.12s ease;
  }
  .k24-chat-toggle:hover { color: var(--k24-fg); }
  /* 펼쳐진 상태: 사이드바 왼쪽 가장자리, 화살표 `<` (= 접기) */
  .k24-chat-drawer[data-mode="docked"][data-open="true"] ~ .k24-chat-toggle--collapse {
    right: var(--chat-sidebar-w-desktop, 400px);
    display: grid;
  }
  /* 펼쳐진 상태에서는 expand tab 숨김 */
  .k24-chat-drawer[data-mode="docked"][data-open="true"] ~ .k24-chat-toggle--expand {
    display: none;
  }
  /* 접힌 상태: viewport 우측 가장자리, 화살표 `>` (= 펼치기) */
  .k24-chat-drawer[data-mode="docked"][data-open="false"] ~ .k24-chat-toggle--expand {
    right: 0;
    display: grid;
  }
  /* 접힌 상태에서는 collapse tab 숨김 */
  .k24-chat-drawer[data-mode="docked"][data-open="false"] ~ .k24-chat-toggle--collapse {
    display: none;
  }
  /* floating 모드 (모바일/태블릿) 에서는 토글 둘 다 hide */
  .k24-chat-drawer[data-mode="floating"] ~ .k24-chat-toggle {
    display: none;
  }

  /* ── Layout 영향: 가용 영역 = viewport - sidebar. 그 안에서 콘텐츠 centering ───
     `margin-left: auto` 는 콘텐츠를 우측 (사이드바 옆) 에 정렬시켜 좌측 빈공간
     커지는 버그. design intent §107-114 의 "가용 영역 안에서 centering" 정확
     구현 = `(viewport - sidebar - content_max) / 2` 만큼 좌측 margin.
     viewport 가 content_max + sidebar 보다 좁으면 0 (콘텐츠 사이드바 옆에 붙음). */
  body.k24-chat-docked-active .k-v2__layout,
  body.k24-chat-docked-active .k-home,
  body.k24-chat-docked-active .k-stock,
  body.k24-chat-docked-active .k-hdr__inner {
    margin-right: var(--chat-sidebar-w-desktop, 400px);
    margin-left: max(0px, (100vw - var(--chat-sidebar-w-desktop, 400px) - var(--content-max, 1240px)) / 2);
  }
}

/* 모바일/태블릿 (<=1024px): docked 모드 자체 안 쓰니까 토글 안 보임 */
@media (max-width: 1024px) {
  .k24-chat-toggle { display: none; }
}

.k24-chat-header {
  padding: 12px 14px;
  background: var(--k24-bg-2);
  border-bottom: 1px solid var(--k24-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.k24-chat-title {
  font-weight: 700;
  font-size: 14px;
  flex: 1;
}
.k24-chat-presence {
  font-size: 12px;
  color: var(--k24-fg-dim);
}
.k24-chat-presence::before {
  content: "●";
  color: var(--k24-accent);
  margin-right: 4px;
}
.k24-chat-close {
  background: none;
  border: none;
  color: var(--k24-fg-dim);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

/* banner — visible on first open, dismissable */
.k24-chat-banner {
  padding: 10px 14px;
  background: var(--k24-accent-dim);
  border-bottom: 1px solid var(--k24-border);
  font-size: 12px;
  color: var(--k24-fg);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.k24-chat-banner strong { color: var(--k24-accent); }
.k24-chat-banner-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--k24-fg-dim);
  cursor: pointer;
  font-size: 14px;
}

/* ── message list ───────────────────────────────────────────────────── */
.k24-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.k24-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--k24-bg-2);
  border: 1px solid transparent;
}
.k24-msg.k24-msg-mine {
  background: var(--k24-accent-dim);
  border-color: var(--k24-accent);
}
/* 5/27 — 정보(news) 메시지: amber 좌측 4px border + 미묘한 amber tint.
   사용자 시선에 "주목" 신호. design.md 원칙 §2 (계층은 typography+space) 와
   §3 (semantic 색 분리) 둘 다 준수 — accent 와 다른 amber, 박스 강도 ↑ 안 함. */
.k24-msg.k24-msg--news {
  background: var(--k24-news-dim);
  border-left: 3px solid var(--k24-news);
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  padding-left: 8px;   /* border 두께 보정 */
}
.k24-msg.k24-msg--news .k24-msg-nick { color: var(--k24-news); }
/* 통합(전체) 뷰에서 news 출처 태그 — amber 배경 */
.k24-msg-tag--news {
  background: var(--k24-news-dim);
  color: var(--k24-news);
}
.k24-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: var(--k24-fg-dim);
}
.k24-msg-nick { color: var(--k24-fg); font-weight: 600; }
.k24-msg-content {
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}
.k24-msg.k24-msg-deleted .k24-msg-content {
  color: var(--k24-fg-dim);
  font-style: italic;
}
.k24-msg-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.k24-msg:hover .k24-msg-actions { opacity: 1; }
.k24-msg-actions button {
  background: none;
  border: none;
  color: var(--k24-fg-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}
.k24-msg-actions button:hover { color: var(--k24-danger); }

.k24-chat-system {
  font-size: 11px;
  color: var(--k24-fg-dim);
  text-align: center;
  padding: 4px 0;
}

/* ── composer ───────────────────────────────────────────────────────── */
.k24-chat-composer {
  border-top: 1px solid var(--k24-border);
  padding: 10px;
  display: flex;
  gap: 8px;
  background: var(--k24-bg-2);
}
.k24-chat-input {
  flex: 1;
  resize: none;
  max-height: 80px;
  min-height: 36px;
  padding: 8px 10px;
  background: var(--k24-bg);
  color: var(--k24-fg);
  border: 1px solid var(--k24-border);
  border-radius: 8px;
  /* iOS Safari auto-zooms on focus when a form control's computed
     font-size is below 16px. Keep it exactly 16px everywhere — the
     visual difference on desktop is negligible and this eliminates
     the jarring viewport zoom on iPhones/iPads. */
  font-size: 16px;
  font-family: inherit;
}
.k24-chat-input:focus {
  outline: none;
  border-color: var(--k24-accent);
}
.k24-chat-send {
  background: var(--k24-accent);
  color: #0b0d10;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}
.k24-chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── nickname modal ─────────────────────────────────────────────────── */
.k24-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.k24-modal-backdrop[data-open="true"] { display: flex; }

.k24-modal {
  background: var(--k24-bg);
  border: 1px solid var(--k24-border);
  border-radius: 14px;
  padding: 22px;
  width: min(340px, calc(100vw - 40px));
  color: var(--k24-fg);
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
}
.k24-modal h2 {
  margin: 0 0 8px;
  font-size: 16px;
}
.k24-modal p {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--k24-fg-dim);
  line-height: 1.5;
}
.k24-modal input {
  width: 100%;
  padding: 10px 12px;
  background: var(--k24-bg-2);
  color: var(--k24-fg);
  border: 1px solid var(--k24-border);
  border-radius: 8px;
  /* 16px — see .k24-chat-input comment about iOS auto-zoom. */
  font-size: 16px;
  box-sizing: border-box;
}
.k24-modal input:focus {
  outline: none;
  border-color: var(--k24-accent);
}
.k24-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.k24-modal button {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.k24-modal-primary {
  background: var(--k24-accent);
  color: #0b0d10;
}
.k24-modal-secondary {
  background: var(--k24-bg-3);
  color: var(--k24-fg);
}
.k24-modal-error {
  margin-top: 10px;
  font-size: 12px;
  color: var(--k24-danger);
  min-height: 16px;
}