/* 채팅방(크랙식) 레이아웃 */
.chat-page.chat-room-fixed { display: flex; gap: 0; height: calc(100vh - 72px); min-height: 480px; background: var(--bg); }
/* app-v018.css의 .chat-main(grid/center)을 확실히 덮어써 본문이 전폭으로 차고 스크롤바가 우측 패널에 붙도록 한다 */
.chat-page.chat-room-fixed .chat-room-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; align-items: stretch; place-items: stretch; }

.chat-room-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--topbar-bg); backdrop-filter: blur(12px); }
.chat-room-bar .chat-back { font-size: 22px; line-height: 1; }
.chat-room-title { font-size: 16px; font-weight: 700; margin: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.chat-room-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.chat-room-model { font-size: 12px; color: var(--muted, #9aa0aa); padding: 3px 10px; border: 1px solid var(--line, #2a2a33); border-radius: 999px; white-space: nowrap; }

/* AI가 매 응답 맨 앞에 출력하는 INFO 상태창 — 메시지 안에서 본문 위에 표시(고정/스티키 아님) */
.chat-info-msg { margin: 0 0 12px; }
.chat-info-msg .info-window { width: 100%; }
/* 모바일: INFO가 길어 화면을 다 덮지 않도록 '고정 높이 박스(내부 스크롤)'로 가두고, 긴 값은 줄바꿈해 가로 넘침 방지 */
@media (max-width: 760px) {
  .chat-info-msg .info-window { max-height: 42vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  .chat-info-msg .info-window .iw-body { padding: 12px 13px; gap: 9px; }
  .chat-info-msg .info-window .iw-stat { flex-wrap: wrap; }
  .chat-info-msg .info-window .iw-pill { white-space: normal; word-break: break-word; max-width: 100%; }
  .chat-info-msg .info-window .iw-chip { max-width: 100%; }
  .chat-info-msg .info-window .iw-chip i { white-space: nowrap; }
  .chat-info-msg .info-window .iw-chip b { white-space: normal; word-break: break-word; min-width: 0; }
  .chat-info-msg .info-window .iw-char-stats,
  .chat-info-msg .info-window .iw-char,
  .chat-info-msg .info-window .iw-multi { width: 100%; }
  /* 라벨(호감도·강수확률·의상 등)이 '호감\n도'처럼 글자 중간에서 줄바꿈되지 않게 고정 */
  .chat-info-msg .info-window .iw-key { white-space: nowrap; flex: 0 0 auto; }
  .chat-info-msg .info-window .iw-bar-head { gap: 8px; }
  .chat-info-msg .info-window .iw-bar-head .iw-key { white-space: nowrap; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .chat-info-msg .info-window .iw-bar-head .iw-val { white-space: nowrap; flex: 0 0 auto; }
  /* 인라인 게이지 칩(강수확률·호감도 등): 막대 길이 설정(최대 400px)이 길면 값 '5%'가 '5\n%'로 쪼개진다.
     단말기 폭이 제각각이므로 '고정 px'이 아니라, 라벨·값은 한 줄로 고정하고 '막대만 남는 폭만큼 자동으로 줄어들게'(flex-shrink) 한다.
     → 넓은 기기는 설정 길이까지 길게, 좁은 기기는 짧게 — 어떤 폭에서도 값은 항상 한 줄. */
  .chat-info-msg .info-window .iw-chip-gauge { max-width: 100%; min-width: 0; flex-wrap: nowrap; }
  .chat-info-msg .info-window .iw-chip-gauge i { white-space: nowrap; flex: 0 0 auto; }
  .chat-info-msg .info-window .iw-chip-gauge .iw-mini { width: var(--iw-bar-len, 44px); flex: 0 1 auto; min-width: 22px; }
  .chat-info-msg .info-window .iw-chip-gauge b { white-space: nowrap; flex: 0 0 auto; }
}

/* ===== 긴 INFO 보강 ===== */
/* 앱(설치형): 섹션별 '가로 스와이프 + 점' 캐러셀. 위아래로 길어지지 않고 좌우로 넘긴다. */
.chat-info-msg .info-window.iw-carousel { max-height: none !important; overflow: visible !important; }
.chat-info-msg .info-window.iw-carousel .iw-body {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 0 !important;       /* 페이지 폭 = 뷰포트 폭이 되도록 본문 패딩 제거(패딩은 페이지로 이동) */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.info-window.iw-carousel .iw-body::-webkit-scrollbar { display: none; }
.info-window.iw-carousel .iw-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 13px;          /* 본문에서 옮겨온 패딩(시각 간격 유지) */
  scroll-snap-align: start;
  scroll-snap-stop: always;    /* 한 번 스와이프에 한 페이지만 넘어가게 */
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-content: flex-start;
}
.info-window.iw-carousel .iw-dots { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 9px 0 1px; }
.info-window.iw-carousel .iw-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: var(--line, #2a2a33); cursor: pointer; transition: width .22s ease, background .22s ease; }
.info-window.iw-carousel .iw-dot.is-active { width: 16px; background: var(--accent); }

/* 웹/모바일웹: INFO가 채팅영역 30%를 넘으면 위(핵심)만 보이고 나머지는 '구분선 토글'로 접기(기본 접힘) */
.chat-info-msg .info-window.iw-collapsible { max-height: none !important; overflow: visible !important; }
.info-window.iw-collapsible .iw-body { transition: max-height .26s ease; }
.info-window.iw-collapsible.is-collapsed .iw-body {
  max-height: var(--iw-cap, 30vh);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.info-window.iw-collapsible .iw-expander {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 2px 0 0; padding: 4px 14px 12px; background: none; border: 0; cursor: pointer;
}
.info-window.iw-collapsible .iw-expander-line { flex: 1 1 auto; height: 1px; background: var(--line, #2a2a33); }
.info-window.iw-collapsible .iw-expander-knob {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 3px 11px; font-size: 11.5px; font-weight: 800; color: var(--muted, #9aa0aa);
  background: var(--surface-2); border: 1px solid var(--line, #2a2a33); border-radius: 999px;
  transition: color .15s ease, border-color .15s ease;
}
.info-window.iw-collapsible .iw-expander svg { width: 12px; height: 12px; transition: transform .22s ease; }
.info-window.iw-collapsible .iw-expander.is-open svg { transform: rotate(180deg); }
.info-window.iw-collapsible .iw-expander:hover .iw-expander-knob { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line, #2a2a33)); }

/* 사용 모델(LLM) 콤보박스 — 선택 즉시 적용, 체크 표시 */
.chat-model-combo { position: relative; }
.chat-model-combo-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text, #e7e7ea); background: transparent; border: 1px solid var(--line, #2a2a33); border-radius: 999px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.chat-model-combo-btn:hover { border-color: var(--border-strong); }
.chat-model-caret { color: var(--muted, #9aa0aa); font-size: 10px; }
.chat-model-menu { position: absolute; right: 0; top: 36px; z-index: 40; min-width: 210px; max-height: 340px; overflow-y: auto; background: var(--card-bg, #1b1b22); border: 1px solid var(--line, #2a2a33); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.chat-model-menu.hidden { display: none; }
.chat-model-menu button { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: transparent; border: 0; color: inherit; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.chat-model-menu button:hover { background: var(--surface-3); }
.chat-model-menu button.sel { color: var(--accent, #2ecf9e); }
.chat-model-check { display: inline-block; width: 14px; color: var(--accent, #2ecf9e); }
.chat-model-menu button .chat-model-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chat-model-nocache { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: -.02em; color: var(--muted, #9aa0aa); background: var(--surface-2); border: 1px solid var(--line, #2a2a33); border-radius: 6px; padding: 1px 6px; }
.chat-model-cache { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: -.02em; color: #2f9e6e; background: color-mix(in srgb, #2f9e6e 14%, transparent); border: 1px solid color-mix(in srgb, #2f9e6e 42%, transparent); border-radius: 6px; padding: 1px 6px; }
.chat-model-empty { padding: 8px 10px; color: var(--muted, #9aa0aa); font-size: 13px; }

/* 메시지: 중앙 정렬 컬럼 + 전폭 텍스트 행(크랙식). 박스/큰 여백 없음 */
.chat-messages { flex: 1 1 auto; display: flex; flex-direction: column; overflow-y: auto; padding: 6px 20px 28px; scroll-behavior: smooth; }
/* 메시지가 적을 때 위쪽에 빈 공간이 크게 남지 않도록 본문을 아래(입력창 쪽)에 붙인다. 내용이 넘치면 auto 여백이 0이 되어 정상 스크롤된다. */
.chat-messages > .chat-message:first-child { margin-top: auto; }
.chat-message { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 12px 46px 12px 12px; line-height: 1.7; font-size: 15px; word-break: break-word; }
.chat-message .chat-body { color: var(--text, #e7e7ea); display: flex; flex-direction: column; gap: 16px; }

/* 나레이션: 말풍선 없이 회색 전체폭 */
.kk-narr { color: var(--chat-narr-color, var(--soft)); line-height: 1.85; }
/* 사용자가 쓴 나레이션(*...*)은 사용자 말풍선과 같은 쪽(우측)으로 정렬 */
.kk-narr-user { text-align: right; }
.chat-message .story-narration, .kk-narr .story-narration { color: var(--chat-narr-color, var(--soft)); }

/* 카톡식 말풍선 */
.kk-row { display: flex; gap: 9px; align-items: flex-start; max-width: 100%; }
.kk-row.user { justify-content: flex-end; }
.kk-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 13px; overflow: hidden; background: var(--surface-3); }
.kk-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-avatar.kk-avatar-default { display: grid; place-items: center; background: linear-gradient(160deg, var(--accent), var(--accent-press)); }
.kk-avatar-default svg { width: 24px; height: 24px; fill: rgba(255,255,255,.92); }
.kk-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 74%; }
.kk-row.user .kk-col { align-items: flex-end; max-width: 76%; }
.kk-name { font-size: 12.5px; color: var(--soft); font-weight: 700; margin-bottom: 1px; }
.kk-bubble { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px 15px 15px 15px; padding: 9px 13px; font-size: 14.5px; line-height: 1.55; width: fit-content; max-width: 100%; box-shadow: var(--shadow-1); }
.kk-col > .kk-bubble + .kk-bubble { border-top-left-radius: 15px; }
.kk-row.user .kk-bubble { background: var(--accent); border-color: var(--accent); color: var(--on-accent); border-radius: 15px 4px 15px 15px; }
.kk-row.user .kk-col > .kk-bubble + .kk-bubble { border-top-right-radius: 15px; }
.kk-row.user .kk-bubble .story-narration { color: rgba(255,255,255,.85); }
.kk-thought { color: var(--chat-thought-color, var(--soft)); font-style: italic; }

/* 입력 중(타이핑) 점 애니메이션 */
.kk-typing { display: inline-flex; gap: 5px; align-items: center; padding: 13px 14px; }
.kk-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: kkTyping 1.3s infinite ease-in-out; }
.kk-typing span:nth-child(2) { animation-delay: .18s; }
.kk-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes kkTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }

.chat-inline-image { margin: 8px 0; }
.chat-inline-image img { max-width: 100%; border-radius: 10px; display: block; }

/* 빌더 채팅 미리보기(카톡식 동일 적용) */
.kk-preview { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.kk-preview .kk-col { max-width: 82%; }

/* 메시지 액션: 우상단, hover(또는 마지막 메시지) 시 표시 */
.chat-actions { position: absolute; top: auto; bottom: 6px; right: 6px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.chat-message:hover .chat-actions { opacity: 1; }
/* 마지막 메시지의 새로고침/⋯는 본문 하단에 표시 */
.chat-message.is-last .chat-actions { position: static; opacity: 1; justify-content: flex-end; margin-top: 10px; }
.chat-act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted, #9aa0aa); cursor: pointer; border-radius: 7px; }
.chat-act:hover { background: var(--surface-3); color: var(--text, #e7e7ea); }
/* 끊긴 답변에만 뜨는 '이어쓰기' 버튼 — 텍스트 칩으로 또렷하게 */
.chat-act-continue { width: auto; height: 28px; padding: 0 12px; gap: 5px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--accent, #7c6cff); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent, #7c6cff) 45%, transparent); }
.chat-act-continue:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.chat-menu-wrap { position: relative; }
.chat-msg-menu { position: absolute; right: 0; bottom: calc(100% + 4px); top: auto; z-index: 20; min-width: 120px; background: var(--card-bg, #1b1b22); border: 1px solid var(--line, #2a2a33); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.chat-msg-menu.hidden { display: none; }
.chat-msg-menu button { text-align: left; background: transparent; border: 0; color: inherit; font: inherit; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.chat-msg-menu button:hover { background: var(--surface-3); }

/* 인라인 수정 */
.chat-edit-input { width: 100%; min-height: 80px; resize: vertical; background: var(--input-bg, #15151b); color: inherit; border: 1px solid var(--line, #2a2a33); border-radius: 10px; padding: 10px; font: inherit; }
.chat-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.chat-edit-actions button { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--line, #2a2a33); background: transparent; color: inherit; cursor: pointer; }
.chat-edit-actions .chat-edit-save { background: var(--accent); color: var(--on-accent); border: 0; font-weight: 700; }

/* 입력창: 넓게, 빨간 우향 전송 버튼 */
.chat-composer { border-top: 1px solid var(--line, #2a2a33); padding: 14px 24px 18px; }
.chat-model-warn { font-size: 13px; color: var(--accent-2); margin: 0 auto 10px; max-width: 960px; }
/* 비회원(게스트) 읽기 전용 안내 */
.chat-guest-note { max-width: 960px; margin: 0 auto 10px; padding: 11px 16px; border-radius: 13px; text-align: center; font-size: 13px; color: var(--soft); background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); border: 1px solid var(--line, #2a2a33); }
.chat-guest-login { background: none; border: 0; padding: 0 2px; color: var(--accent); font-weight: 800; cursor: pointer; text-decoration: underline; }
.chat-composer .chat-input:disabled { opacity: .55; cursor: not-allowed; }
.chat-composer .chat-send:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
/* 입력창은 본문(메시지) 폭에 맞춤 */
.chat-composer-row { display: flex; align-items: center; gap: 12px; max-width: 960px; margin: 0 auto; background: var(--surface-1); border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px 10px 18px; box-shadow: var(--shadow-1); transition: border-color .16s ease, box-shadow .16s ease; }
/* 포커스 시 테두리 한 줄만(이전엔 테두리+그림자로 원이 두 개처럼 보였음). */
.chat-composer-row:focus-within { border-color: var(--accent-2); box-shadow: none; }
.chat-input:focus, .chat-input:focus-visible { outline: none; box-shadow: none; }
.chat-input { flex: 1 1 auto; resize: none; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15.5px; line-height: 1.5; min-height: 28px; max-height: 180px; outline: none; padding: 4px 0; }
.chat-send { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 16px var(--accent-soft); transition: background .15s, transform .1s; }
.chat-send:hover:not(:disabled) { background: var(--accent-2); }
/* 출력 중: 전송 버튼이 정지(중지) 버튼으로 — 빨강 톤 + 미세 펄스 */
.chat-send.is-stop { background: #e5484d; box-shadow: 0 6px 16px rgba(229,72,77,.35); animation: chatStopPulse 1.3s ease-in-out infinite; }
.chat-send.is-stop:hover:not(:disabled) { background: #d83a3f; }
@keyframes chatStopPulse { 0%,100% { box-shadow: 0 6px 16px rgba(229,72,77,.30); } 50% { box-shadow: 0 6px 22px rgba(229,72,77,.55); } }
.chat-send:active:not(:disabled) { transform: scale(.94); }
.chat-send:disabled { opacity: .4; cursor: not-allowed; }
.chat-send svg { margin-left: 2px; }

/* ===== 추천 답변(말풍선 3개) — AI 답변 후 입력창 위에 표시, 탭하면 입력창에 채움 ===== */
.chat-suggests { max-width: 960px; margin: 0 auto 10px; display: flex; flex-direction: column; gap: 7px; }
.chat-suggests[hidden] { display: none; }
.chat-suggests-head { display: flex; align-items: baseline; gap: 7px; padding-left: 2px; font-size: 11.5px; font-weight: 800; color: var(--muted, #9aa0aa); }
.chat-suggests-head span { font-weight: 600; font-size: 10.5px; opacity: .8; }
.chat-suggests-list { display: flex; flex-direction: column; gap: 7px; }
.chat-suggest-chip {
  width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: 14px; line-height: 1.45;
  color: var(--text, #e7e7ea); background: color-mix(in srgb, var(--accent) 7%, var(--surface-1, #15151b));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line, #2a2a33));
  border-radius: 13px; padding: 10px 14px;
  transition: background .14s ease, border-color .14s ease, transform .08s ease;
}
.chat-suggest-chip:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface-1, #15151b)); border-color: var(--accent-2); }
.chat-suggest-chip:active { transform: scale(.99); }
.chat-suggests-loading { padding: 6px 4px; font-size: 12.5px; color: var(--muted, #9aa0aa); opacity: .85; }

/* ===== 리미트 해제(입력창 위, 펼침형) ===== */
.chat-limit { max-width: 960px; margin: 0 auto 8px; }
.chat-limit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 12px; border: 1px solid var(--line, #2a2a33); border-radius: 12px; background: var(--surface-1); color: var(--muted, #9aa0aa); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.chat-limit-head:hover { background: var(--surface-2); }
.chat-limit.is-on .chat-limit-head { border-color: color-mix(in srgb, #e5484d 55%, var(--line, #2a2a33)); background: color-mix(in srgb, #e5484d 8%, var(--surface-1)); color: var(--text, #e7e7ea); }
.chat-limit-title { font-weight: 800; }
.chat-limit-state { margin-left: 6px; font-size: 11px; font-weight: 800; color: var(--muted, #9aa0aa); border: 1px solid var(--line, #2a2a33); border-radius: 999px; padding: 1px 8px; }
.chat-limit-state.on { color: #fff; background: #e5484d; border-color: #e5484d; }
.chat-limit-chevron { font-size: 15px; line-height: 1; transition: transform .18s ease; }
.chat-limit.is-expanded .chat-limit-chevron { transform: rotate(180deg); }
.chat-limit-panel { padding: 11px 4px 2px; }
.chat-limit-panel[hidden] { display: none; }
.chat-limit-warn { margin: 0 0 11px; font-size: 12px; line-height: 1.6; color: var(--soft, #b9bdc7); }
.chat-limit-warn b { color: #e5848a; }
.chat-limit-toggle { width: 100%; height: 38px; border-radius: 10px; border: 1px solid color-mix(in srgb, #e5484d 45%, var(--line, #2a2a33)); background: color-mix(in srgb, #e5484d 10%, transparent); color: #e5848a; font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; transition: background .15s, color .15s; }
.chat-limit-toggle:hover { background: color-mix(in srgb, #e5484d 18%, transparent); }
.chat-limit-toggle.on { background: #e5484d; color: #fff; border-color: #e5484d; }
.chat-limit-range { margin: 9px 2px 2px; font-size: 11.5px; line-height: 1.5; color: var(--muted, #9aa0aa); }

/* 리미트 해제 ON: 보내기(▶) 버튼을 경고색 + 맥동 글로우로(아이콘은 그대로) */
.chat-send.is-limit { background: #e5484d; box-shadow: 0 0 0 0 rgba(229,72,77,.55); animation: chatLimitPulse 1.5s ease-in-out infinite; }
.chat-send.is-limit:hover:not(:disabled) { background: #d83a3f; }
@keyframes chatLimitPulse {
  0%   { box-shadow: 0 0 0 0 rgba(229,72,77,.55), 0 4px 14px rgba(229,72,77,.45); }
  70%  { box-shadow: 0 0 0 12px rgba(229,72,77,0), 0 4px 18px rgba(229,72,77,.65); }
  100% { box-shadow: 0 0 0 0 rgba(229,72,77,0), 0 4px 14px rgba(229,72,77,.45); }
}

/* 예상 토큰 비용 — 현재 기억 모드 안내 줄 */
.chat-cost-mode { margin: 0 0 8px; font-size: 11.5px; line-height: 1.55; color: var(--muted, #9aa0aa); }
.chat-cost-mode:empty { display: none; }
.chat-cost-mode.on { color: #e5848a; font-weight: 700; }

/* 우측 설정 패널: 패널 자체는 스크롤하지 않고, 안의 .chat-side-scroll만 스크롤한다.
   → '예상 토큰 비용'을 패널 맨 아래에 고정(스크롤해도 위치 불변), 그 위 영역만 스크롤. */
.chat-side { flex: 0 0 256px; border-left: 1px solid var(--line, #2a2a33); padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.chat-side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 18px 16px 18px; }
/* 메뉴(섹션)별 구분선 — 채팅방 설정 / 표시 설정 사이를 시각적으로 분리해 보기 쉽게(설정 초기화는 자체 구분선 보유) */
.chat-side-scroll > .chat-side-block:not(:first-child) { border-top: 1px solid var(--line, #2a2a33); padding-top: 18px; }
.chat-side-block h3 { font-size: 13px; color: var(--muted, #9aa0aa); margin: 0 0 10px; font-weight: 600; }
.chat-side-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; color: inherit; font: inherit; padding: 10px 8px; border-radius: 8px; }
.chat-side-item:hover { background: var(--surface-2); }
.chat-side-tag { font-size: 11px; color: var(--accent-2); border: 1px solid var(--danger-border); border-radius: 999px; padding: 1px 7px; }
/* 엔터로 이어쓰기 ON/OFF 토글 칩 */
.chat-side-switch { justify-content: space-between; }
.chat-side-toggle { font-size: 11px; font-weight: 800; color: var(--muted, #9aa0aa); border: 1px solid var(--line, #2a2a33); border-radius: 999px; padding: 2px 9px; }
.chat-side-toggle.on { color: var(--accent, #7c6cff); border-color: color-mix(in srgb, var(--accent, #7c6cff) 45%, transparent); background: var(--accent-soft); }
.chat-side-note { font-size: 12px; color: var(--muted, #9aa0aa); line-height: 1.5; margin-bottom: 6px; }
.chat-loading { padding: 40px 20px; text-align: center; }

/* 좌측 채팅 목록(크랙식: 썸네일 + 제목 + 마지막 대사) */
#sidebar-rooms.side-list { overflow-x: hidden; gap: 2px; }
#sidebar-rooms .room-row { grid-template-columns: 48px 1fr; align-items: center; gap: 10px; padding: 6px 8px; }
/* 메신저식 컴팩트 썸네일: 정사각(제목+마지막대사 2줄 높이) + 상단 크롭으로 인물 얼굴/상단이 보이게. */
#sidebar-rooms .room-thumb { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; }
#sidebar-rooms .room-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
#sidebar-rooms .room-text { min-width: 0; }
#sidebar-rooms .room-row { position: relative; }
#sidebar-rooms .room-text { padding-right: 18px; }
#sidebar-rooms .room-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar-rooms .room-meta { font-size: 11.5px; color: var(--muted, #9aa0aa); margin-top: 2px; }
#sidebar-rooms .room-pin { font-size: 11px; }
#sidebar-rooms .room-menu-btn { position: absolute; top: 6px; right: 4px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--muted, #9aa0aa); cursor: pointer; border-radius: 6px; opacity: 0; line-height: 1; }
#sidebar-rooms .room-row:hover .room-menu-btn { opacity: 1; }
#sidebar-rooms .room-menu-btn:hover { background: var(--surface-3); color: var(--text); }
#sidebar-rooms .room-menu { position: absolute; top: 28px; right: 4px; z-index: 30; min-width: 132px; background: var(--card-bg, #1b1b22); border: 1px solid var(--line, #2a2a33); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
#sidebar-rooms .room-menu.hidden { display: none; }
#sidebar-rooms .room-menu button { text-align: left; background: transparent; border: 0; color: inherit; font: inherit; padding: 8px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
#sidebar-rooms .room-menu button:hover { background: var(--surface-3); }

/* 채팅 목록이 사이드바 하단까지 채우고, 넘칠 때만 스크롤 */
.sidebar .side-block:has(#sidebar-rooms) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#sidebar-rooms.side-list { flex: 1 1 auto; min-height: 0; max-height: none; align-content: start; }

/* 인라인 이름 변경:
   - 입력칸은 한 줄 전체(✓/✕를 옆에 두지 않아 폭을 최대로 확보)
   - ✓/✕는 입력칸 아래 우측에 배치(= ⋯ 아래쪽)
   - ⋯(메뉴 버튼)은 편집 중엔 항상 보이게 해서 위쪽에 위치 */
.room-rename-input { width: 100%; box-sizing: border-box; min-width: 0; background: var(--surface-sunken); border: 1px solid var(--accent); border-radius: 7px; color: var(--text); font: inherit; font-size: 13px; padding: 5px 9px; outline: none; }
.room-rename-input:focus { box-shadow: var(--focus-ring); }
.room-rename-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 6px; }
.room-rename-btn { flex: 0 0 auto; width: 28px; height: 24px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--surface-2); color: var(--soft); cursor: pointer; border-radius: 7px; font-size: 13px; line-height: 1; transition: background-color .14s ease, color .14s ease, transform .08s ease; }
.room-rename-btn:hover { background: var(--surface-3); color: var(--text); }
.room-rename-btn.ok:hover { color: var(--accent-2); border-color: var(--accent-2); }
.room-rename-btn:active { transform: scale(.92); }
/* 편집 중에는 ⋯(메뉴)을 위쪽에 항상 보이게, 행은 위 정렬 */
#sidebar-rooms .room-row.is-editing { align-items: start; }
#sidebar-rooms .room-row.is-editing .room-menu-btn { opacity: 1; }

/* 모달 */
.chat-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 1200; }
.chat-modal { width: min(460px, 92vw); background: var(--card-bg, #1b1b22); border: 1px solid var(--line, #2a2a33); border-radius: 16px; padding: 22px; }
.chat-modal h3 { margin: 0 0 12px; font-size: 16px; }
.chat-modal-desc { font-size: 13px; color: var(--muted, #9aa0aa); margin: 0 0 12px; line-height: 1.5; }
.chat-modal-input { width: 100%; background: var(--input-bg, #15151b); color: inherit; border: 1px solid var(--line, #2a2a33); border-radius: 10px; padding: 10px 12px; font: inherit; resize: vertical; }
.chat-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.chat-modal-actions button { padding: 8px 16px; border-radius: 9px; border: 1px solid var(--line, #2a2a33); background: transparent; color: inherit; cursor: pointer; }
.chat-modal-actions .primary { background: var(--accent); color: var(--on-accent); border: 0; font-weight: 700; }
.chat-modal-actions .danger { background: var(--accent); color: var(--on-accent); border: 0; font-weight: 700; }

/* ===== 메모리얼 모달 ===== */
.mem-modal { width: min(520px, 94vw); }
.mem-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.mem-empty { padding: 18px 12px; text-align: center; font-size: 13px; color: var(--muted, #9aa0aa); border: 1px dashed var(--line, #2a2a33); border-radius: 12px; }
.mem-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--line, #2a2a33); border-radius: 12px; background: var(--surface-1); }
.mem-text { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--text, #e7e7ea); word-break: break-word; }
.mem-row-actions { flex: 0 0 auto; display: flex; gap: 2px; }
.mem-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted, #9aa0aa); border-radius: 7px; cursor: pointer; font-size: 13px; }
.mem-btn:hover { background: var(--surface-3); color: var(--text, #e7e7ea); }
.mem-btn.mem-del:hover { background: color-mix(in srgb, #e5484d 18%, transparent); color: #e5848a; }
.mem-edit-input { margin-bottom: 8px; }
.mem-edit-actions { display: flex; gap: 6px; }
.mem-edit-actions .mem-btn { width: auto; padding: 4px 12px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line, #2a2a33); }
.mem-add { display: flex; gap: 8px; align-items: flex-end; }
.mem-add .chat-modal-input { flex: 1 1 auto; }
.mem-add .primary { flex: 0 0 auto; height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 800; cursor: pointer; }
.mem-add .primary:hover { background: var(--accent-2); }
/* 메모리얼 도구(AI 추출·인물 노트 가져오기) */
.mem-tools { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.mem-tool { flex: 1 1 0; min-width: 150px; padding: 9px 10px; border: 1px solid var(--line, #2a2a33); border-radius: 10px; background: var(--surface-1); color: var(--text, #e7e7ea); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.mem-tool:hover:not(:disabled) { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--line, #2a2a33)); }
.mem-tool:disabled { opacity: .6; cursor: default; }
/* 후보 패널 */
.mem-cand { margin: 0 0 12px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line, #2a2a33)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--surface-1)); }
.mem-cand[hidden] { display: none; }
.mem-cand-head { font-size: 12px; font-weight: 800; color: var(--soft, #b9bdc7); margin-bottom: 8px; }
.mem-cand-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow-y: auto; }
.mem-cand-list label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--text, #e7e7ea); cursor: pointer; }
.mem-cand-list input { margin-top: 3px; flex: 0 0 auto; }
.mem-cand-actions { display: flex; gap: 8px; }
.mem-cand-actions .primary { height: 34px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 800; cursor: pointer; }
.mem-cand-actions button:not(.primary) { height: 34px; padding: 0 14px; border: 1px solid var(--line, #2a2a33); border-radius: 9px; background: transparent; color: inherit; cursor: pointer; }
/* 항목 켜기·끄기 + 순서 */
.mem-onoff { flex: 0 0 auto; width: 24px; height: 24px; border: 0; background: transparent; color: var(--accent, #7c6cff); font-size: 12px; cursor: pointer; border-radius: 6px; }
.mem-onoff:hover { background: var(--surface-3); }
.mem-item.is-off { opacity: .55; }
.mem-item.is-off .mem-onoff { color: var(--muted, #9aa0aa); }
.mem-item.is-off .mem-text { text-decoration: line-through; }
.mem-btn:disabled { opacity: .3; cursor: default; }

/* ===== 대화 프로필 모달(프리미엄: 바이올렛 액센트·아바타·선택 글로우) ===== */
.chat-profile-modal { width: min(540px, 94vw); padding: 0; overflow: hidden; }
.chat-profile-head { position: relative; padding: 22px 24px 16px; background: var(--hero-grad); border-bottom: 1px solid var(--line); }
.chat-profile-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent), #b06cff); }
.chat-profile-head h3 { margin: 0 0 5px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.chat-profile-head p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.chat-profile-body { padding: 16px 20px; }
.chat-profile-list { display: flex; flex-direction: column; gap: 9px; max-height: 360px; overflow-y: auto; padding: 2px; margin: 0 -2px; }

.chat-profile-item { display: flex; align-items: stretch; background: var(--surface-1); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .16s ease, box-shadow .16s ease, transform .08s ease; }
.chat-profile-item:hover { border-color: var(--border-strong); }
.chat-profile-item.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 26px var(--accent-soft); }
.chat-profile-pick { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 13px; text-align: left; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 13px 6px 13px 14px; }
.chat-profile-ava { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 18px; font-weight: 800; color: #fff; background: var(--avatar-grad); box-shadow: 0 4px 12px var(--accent-soft); text-transform: uppercase; }
.chat-profile-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-profile-name { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 800; color: var(--text); min-width: 0; }
.chat-profile-name > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-profile-cur { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; color: var(--accent-2); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; letter-spacing: .02em; }
.chat-profile-info { font-size: 12.5px; color: var(--muted); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chat-profile-info-empty { color: var(--faint); font-style: italic; }
.chat-profile-check { flex: 0 0 auto; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; display: grid; place-items: center; color: var(--on-accent); background: var(--accent); font-size: 12px; font-weight: 800; }
.chat-profile-del { flex: 0 0 auto; width: 40px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--faint); cursor: pointer; font-size: 14px; transition: background-color .14s ease, color .14s ease; }
.chat-profile-del:hover { background: var(--danger-bg); color: var(--danger); }

.chat-profile-empty { text-align: center; padding: 30px 18px; color: var(--muted); font-size: 13px; line-height: 1.6; border: 1px dashed var(--line); border-radius: 14px; }
.chat-profile-empty b { display: block; color: var(--soft); font-size: 14px; font-weight: 800; margin-bottom: 5px; }

/* 새 프로필 추가 폼 */
.chat-profile-add { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-sunken); }
.chat-profile-add-title { font-size: 12.5px; font-weight: 800; color: var(--soft); letter-spacing: .01em; }
.chat-profile-field { display: flex; flex-direction: column; gap: 6px; }
.chat-profile-field > span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.chat-profile-add .chat-modal-input { border-radius: 10px; }

/* 푸터: 새 프로필 / 완료 */
.chat-profile-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.chat-profile-addbtn { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--line); color: var(--soft); font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 11px; cursor: pointer; transition: background-color .14s ease, border-color .14s ease, color .14s ease; }
.chat-profile-addbtn:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
.chat-profile-addbtn svg { width: 15px; height: 15px; }
.chat-profile-done { background: var(--accent); color: var(--on-accent); border: 0; font-weight: 800; font-size: 13.5px; padding: 10px 22px; border-radius: 11px; cursor: pointer; box-shadow: 0 6px 16px var(--accent-soft); transition: background-color .14s ease, transform .08s ease; }
.chat-profile-done:hover { background: var(--accent-2); }
.chat-profile-done:active { transform: scale(.96); }

/* 블록 접기/펼치기 헤더 */
.chat-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; padding: 2px 0; }
/* 펼침/접힘 화살표 — 잘 보이도록 크고 또렷하게(둥근 배경 + 진한 색) */
.chat-block-chevron { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; font-size: 15px; line-height: 1; color: var(--text, #e7e7ea); background: var(--surface-2); transition: transform .18s ease, background .15s ease; }
.chat-block-head:hover .chat-block-chevron { background: var(--surface-3, #2a2a33); }
.chat-side-block.is-collapsed .chat-block-chevron { transform: rotate(-90deg); }
.chat-side-block.is-collapsed > :not(.chat-block-head) { display: none; }

/* 채팅방 설정 드로어 백드롭(모바일에서만 표시) */
.chat-side-backdrop { display: none; }

@media (max-width: 980px) {
  /* 우측 패널을 평소엔 숨기고, 좌 스와이프(또는 토글) 시 우측에서 슬라이드되는 드로어로 표시 */
  .chat-page.chat-room-fixed .chat-side {
    display: flex; position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 88vw);
    z-index: 65; background: var(--surface-1); border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .26s ease; overflow: hidden; padding: 0;
  }
  /* 드로어 안에서도 스크롤 영역만 스크롤(예상 토큰 비용은 하단 고정) */
  .chat-page.chat-room-fixed .chat-side-scroll { padding: 16px 14px 16px; }
  #app.chat-side-open .chat-page.chat-room-fixed .chat-side { transform: translateX(0); box-shadow: -10px 0 30px rgba(0, 0, 0, .45); }
  #app.chat-side-open .chat-side-backdrop { display: block; position: fixed; inset: 0; z-index: 64; background: rgba(0, 0, 0, .42); }
  /* 앱/모바일에선 '전체 설정 / 사용 모델' 줄은 숨긴다(헤더 콤보에 이미 모델 표시됨). */
  .chat-side-system h3, .chat-side-system .chat-side-note { display: none; }
}

/* 예상 토큰 비용 패널 (우측 네비게이션 맨 아래에 항상 고정 — 스크롤해도 위치 불변) */
.chat-cost-block { position: relative; flex: 0 0 auto; margin-top: 0; border-top: 1px solid var(--line, #2a2a33); background: var(--surface-1); padding: 14px 16px 18px; }
.chat-cost-rows { display: flex; flex-direction: column; gap: 2px; }
.chat-cost-row { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; column-gap: 10px; padding: 5px 4px; }
.chat-cost-row .cc-k { font-size: 12px; color: var(--muted, #9aa0aa); font-weight: 600; }
.chat-cost-row .cc-t { font-size: 12px; color: var(--soft, #c8ccd4); font-weight: 700; font-style: normal; text-align: right; }
.chat-cost-row .cc-c { font-size: 13px; color: var(--text, #f2f3f5); font-weight: 800; font-style: normal; min-width: 62px; text-align: right; }
.chat-cost-row.chat-cost-total { margin-top: 4px; border-top: 1px dashed var(--line, #2a2a33); padding-top: 9px; }
.chat-cost-row.chat-cost-total .cc-k { color: var(--text, #f2f3f5); font-weight: 800; }
.chat-cost-row.chat-cost-total .cc-c { color: var(--accent, #7c6cff); }
.chat-cost-note { font-size: 11px; color: var(--muted, #9aa0aa); line-height: 1.5; margin: 10px 2px 0; }
/* 예상 비용 설명: 기본은 숨기고 '?' 도움말 버튼으로만 펼친다(패널을 깔끔하게). */
.chat-cost-title { display: inline-flex; align-items: center; gap: 5px; }
.chat-cost-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted, #9aa0aa); font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; }
.chat-cost-help-btn:hover { background: var(--surface-3, #2a2a33); color: var(--text, #f2f3f5); }
.chat-cost-help-btn.is-open { background: var(--accent, #7c6cff); color: #fff; }
/* 캐싱 적용 상태 한 줄(항상 표시) */
.chat-cost-cache { margin: 8px 2px 0; font-size: 11px; line-height: 1.5; color: var(--muted, #9aa0aa); }
.chat-cost-cache:empty { display: none; }
.chat-cost-cache.on { color: var(--accent, #7c6cff); font-weight: 700; }
/* 비용 설명: 원본은 패널에 숨겨두고(복제 원본), JS가 복제본을 body로 빼서 '?' 왼쪽에 띄운다(배경 안 가림). */
.chat-cost-pop { margin: 0; }
.chat-cost-pop[hidden] { display: none; }
/* body로 빠진 떠 있는 복제본: 화면 기준 고정 위치(우측 패널 overflow에 안 잘림). 위치는 JS가 지정. */
.chat-cost-pop-float { position: fixed; z-index: 200; width: max-content; max-width: min(280px, calc(100vw - 24px));
  background: var(--card-bg, var(--surface-2, #1b1c22)); border: 1px solid var(--line, #2a2a33); border-radius: 12px;
  padding: 12px 28px 12px 14px; box-shadow: 0 14px 40px rgba(0,0,0,.34); }
.chat-cost-pop-float .chat-cost-mode { margin: 0; }
.chat-cost-pop-float .chat-cost-note { margin-top: 8px; }
.chat-cost-help-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: var(--surface-2, #20222b); color: var(--muted, #9aa0aa); font-size: 12px; line-height: 1; cursor: pointer; }
.chat-cost-help-x:hover { background: var(--surface-3, #2a2a33); color: var(--text, #f2f3f5); }
/* 쉐브론(▾)만 접기/펼치기 — 헤더 본문은 클릭 대상 아님 */
.chat-block-head { cursor: default; }
.chat-block-chevron { cursor: pointer; }

/* INFO 시작값 불러오는 중: 정적 '-'가 버그처럼 보이지 않게 로딩 셔머 + 점 애니메이션 */
.chat-info-msg.is-seeding { position: relative; }
.chat-info-msg.is-seeding .info-window { position: relative; overflow: hidden; }
.chat-info-msg.is-seeding .info-window::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(100deg, transparent 32%, color-mix(in srgb, var(--accent, #7c6cff) 18%, transparent) 50%, transparent 68%);
  background-size: 220% 100%; animation: cc-info-shimmer 1.25s ease-in-out infinite; }
.chat-info-seeding-tag { display: flex; align-items: center; gap: 7px; margin: 9px 2px 1px; font-size: 11.5px; color: var(--muted, #9aa0aa); }
.chat-info-seeding-dots { display: inline-flex; gap: 3px; }
.chat-info-seeding-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #7c6cff); opacity: .4; animation: cc-info-dot 1s infinite ease-in-out; }
.chat-info-seeding-dots i:nth-child(2) { animation-delay: .15s; }
.chat-info-seeding-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cc-info-shimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }
@keyframes cc-info-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .chat-info-msg.is-seeding .info-window::after, .chat-info-seeding-dots i { animation: none; }
}

/* 플레인(말풍선 OFF) 표시 */
.plain-line { margin: 0 0 6px; line-height: 1.85; font-size: 14.5px; }
.plain-narr { color: var(--chat-narr-color, var(--soft)); }
.plain-dlg .plain-speaker { font-weight: 800; color: var(--text); }
.plain-dlg .plain-sep { color: var(--muted); }
.plain-dlg .plain-say { color: var(--text); }
.plain-user { color: var(--accent, #7c6cff); font-weight: 600; }

/* 표시 설정 — 색상/간격 입력 컨트롤 */
.chat-side-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 8px; min-height: 0; border-radius: 8px; font-size: 13px; color: var(--soft, #c8ccd4); }
.chat-side-field > span { font-weight: 600; }
.chat-side-num { width: 58px; height: 26px; min-height: 0; padding: 0 8px; box-sizing: border-box; -webkit-appearance: none; appearance: none; margin: 0; border: 1px solid var(--line, #2a2a33); border-radius: 8px; background: var(--surface-2); color: inherit; font: inherit; font-size: 13px; line-height: 24px; text-align: center; }
.chat-side-num::-webkit-outer-spin-button, .chat-side-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 등장인물 대사 색상 그룹 — 소제목(라벨)과 인물 행을 또렷이 구분하고, 행은 가이드라인으로 들여쓴다 */
.chat-char-colors { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #2a2a33); }
.chat-char-colors-head { display: flex; align-items: center; gap: 7px; margin: 0 2px 9px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #9aa0aa); cursor: pointer; user-select: none; }
.chat-char-colors-head::before { content: ""; flex: 0 0 auto; width: 3px; height: 11px; border-radius: 2px; background: var(--accent, #7c6cff); }
/* 펼침/접힘 화살표 — 섹션 헤더와 동일한 또렷한 스타일 */
.chat-char-colors-chevron { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; font-size: 15px; line-height: 1; color: var(--text, #e7e7ea); background: var(--surface-2); transition: transform .18s ease, background .15s ease; }
.chat-char-colors-head:hover .chat-char-colors-chevron { background: var(--surface-3, #2a2a33); }
.chat-char-colors.is-collapsed .chat-char-colors-chevron { transform: rotate(-90deg); }
.chat-char-colors.is-collapsed .chat-char-colors-list { display: none; }
.chat-char-colors.is-collapsed .chat-char-colors-head { margin-bottom: 0; }
.chat-char-colors-list { display: flex; flex-direction: column; gap: 1px; margin-left: 4px; padding-left: 11px; border-left: 1px solid var(--line, #2a2a33); }
.chat-char-row { padding-top: 4px; padding-bottom: 4px; border-radius: 9px; }
.chat-char-row:hover { background: var(--surface-2); }
/* 인물 이름: 소제목보다 크고 밝게(본문 색) — 라벨과 확실히 다른 위계 */
.chat-char-colors .chat-char-row > span { font-size: 13.5px; font-weight: 700; color: var(--text, #f2f3f5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 설정 초기화(실수 방지: 눈에 띄지 않게 하단에, 호버 시에만 위험색. 클릭하면 확인 모달) */
.chat-side-reset { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, #2a2a33); }
.chat-side-reset-btn { display: inline-flex; align-items: center; gap: 7px; width: 100%; justify-content: center; padding: 9px 12px; border: 1px solid var(--line, #2a2a33); border-radius: 11px; background: transparent; color: var(--muted, #9aa0aa); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.chat-side-reset-btn:hover { border-color: var(--danger-border, #5d2c39); color: var(--danger, #ff8a90); background: var(--danger-bg, #2a1820); }
.chat-side-reset-btn svg { opacity: .85; }
.chat-side-reset-note { margin: 8px 4px 0; font-size: 11px; line-height: 1.5; color: var(--faint, #5b6070); }
.chat-side-color-input { width: 40px; height: 28px; padding: 0; border: 1px solid var(--line, #2a2a33); border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.chat-side-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.chat-side-color-input::-webkit-color-swatch { border: 0; border-radius: 6px; }
.chat-bubble-only.is-off { opacity: .4; }
.chat-bubble-only.is-off .chat-side-num, .chat-bubble-only.is-off .chat-side-color-input { cursor: not-allowed; }

/* ===== 색상 선택 토글 팔레트(네이티브 input 대체) ===== */
.chat-color-field { position: relative; }
.kk-color-swatch { width: 28px; height: 28px; padding: 0; border: 1px solid var(--line, #2a2a33); border-radius: 8px; cursor: pointer; box-shadow: inset 0 0 0 2px var(--surface-1, #14141a); }
.chat-bubble-only.is-off .kk-color-swatch { cursor: not-allowed; }
.kk-color-pop { position: absolute; bottom: calc(100% + 6px); right: 6px; z-index: 40; width: 196px; padding: 12px; background: var(--card-bg, #1b1b22); border: 1px solid var(--line, #2a2a33); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.kk-color-pop.hidden { display: none; }
.kk-color-dots { display: flex; flex-wrap: wrap; gap: 10px; }
.kk-color-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; transition: transform .1s ease; }
.kk-color-dot:hover { transform: scale(1.08); }
.kk-color-dot.is-sel { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent); }
.kk-color-custom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line, #2a2a33); font-size: 12px; color: var(--muted, #9aa0aa); font-weight: 600; }
.kk-color-custom input[type="color"] { width: 42px; height: 26px; padding: 0; border: 1px solid var(--line, #2a2a33); border-radius: 6px; background: var(--surface-2); cursor: pointer; }

/* ===== 말풍선 아바타 원본 이미지 보기 ===== */
.kk-avatar-zoomable { cursor: zoom-in; }
.kk-img-zoom-overlay { position: fixed; inset: 0; z-index: 260; background: rgba(0,0,0,.82); display: grid; place-items: center; padding: 24px; }
.kk-img-zoom { position: relative; max-width: 92vw; max-height: 88vh; }
.kk-img-zoom img { max-width: 92vw; max-height: 88vh; border-radius: 12px; display: block; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.kk-img-zoom-close { position: absolute; top: -14px; right: -14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.45); }

/* 인물 프로필 정보 패널 — 아바타(프로필 사진) 클릭 시 */
.kk-avatar { cursor: pointer; }
/* 채팅 아바타에 마우스를 갖다대면 '인물 관찰 노트(🔎)' 아이콘을 띄워, 클릭하면 이 인물 정보가 열린다는 걸 알려준다.
   (마우스 기기에서만 — 터치에선 hover가 탭 후 잠깐 끼는 문제가 있어 제외) */
@media (hover: hover) and (pointer: fine) {
  .kk-row[data-speaker] .kk-avatar { position: relative; }
  .kk-row[data-speaker] .kk-avatar::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background-color: rgba(10, 10, 16, .46);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48%;
    opacity: 0;
    transition: opacity .14s ease;
    pointer-events: none;
  }
  .kk-row[data-speaker] .kk-avatar:hover::after { opacity: 1; }
}
.kk-profile-overlay { position: fixed; inset: 0; z-index: 210; background: rgba(8,8,14,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: grid; place-items: center; padding: 22px; animation: kkProfFade .18s ease; }
@keyframes kkProfFade { from { opacity: 0; } to { opacity: 1; } }
.kk-profile-card { position: relative; width: min(440px, 94vw); max-height: 86vh; overflow-y: auto; border-radius: 20px; padding: 22px 20px 20px; background: var(--card-bg, #1b1b22); border: 1px solid var(--line, #2a2a33); box-shadow: 0 24px 70px rgba(0,0,0,.5); animation: kkProfPop .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes kkProfPop { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.kk-profile-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line, #2a2a33); background: var(--surface-2); color: var(--soft); font-size: 15px; font-weight: 800; cursor: pointer; display: grid; place-items: center; }
.kk-profile-close:hover { color: var(--text); background: var(--surface-3); }
.kk-profile-hero { display: flex; align-items: center; gap: 15px; margin-bottom: 16px; }
/* 아바타: 네모 배경 없이 '동그라미 그대로'. (라운드 사각 → 원형) */
.kk-profile-img { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: transparent; box-shadow: 0 4px 16px rgba(0,0,0,.32); }
.kk-profile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-profile-img-zoom { cursor: zoom-in; }
.kk-profile-img-default { display: grid; place-items: center; background: linear-gradient(160deg, var(--accent), var(--accent-press, #6d28d9)); }
.kk-profile-img-default svg { width: 46px; height: 46px; fill: rgba(255,255,255,.92); }
.kk-profile-headline { min-width: 0; }
.kk-profile-name { font-size: 21px; font-weight: 900; letter-spacing: -.4px; color: var(--text); }
.kk-profile-tag { margin-top: 5px; display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.kk-profile-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.kk-profile-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line, #2a2a33); font-size: 12.5px; }
.kk-profile-chip b { font-style: normal; }
.kk-profile-chip-k { color: var(--muted, #9aa0aa); font-weight: 600; }
.kk-profile-chip-v { color: var(--text); font-weight: 800; }
.kk-profile-body { display: grid; gap: 13px; }
.kk-profile-sec h4 { margin: 0 0 5px; font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: -.2px; }
.kk-profile-sec p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.kk-profile-sec.kk-profile-sec-empty h4 { color: var(--muted, #9aa0aa); }
.kk-profile-undisc { margin: 0; font-size: 12.5px; color: var(--muted, #9aa0aa); font-style: italic; }
.kk-profile-empty { color: var(--muted, #9aa0aa); font-size: 13px; text-align: center; padding: 14px 4px; line-height: 1.6; }
.kk-profile-empty b { color: var(--accent); }
/* 인물 관찰 노트 — 나와의 이벤트 히스토리 */
.kk-profile-events .kk-ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.kk-profile-events .kk-ev-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.55; }
.kk-ev-turn { flex: 0 0 auto; min-width: 40px; text-align: center; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.kk-ev-text { flex: 1 1 auto; min-width: 0; color: var(--text); word-break: break-word; }
/* 이벤트 삭제(빼기) — 항목 가장 오른쪽 */
.kk-ev-del { flex: 0 0 auto; align-self: flex-start; margin-left: 4px; margin-top: -1px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line, #2a2a33); background: var(--surface-2); color: var(--muted, #9aa0aa); font-size: 11px; line-height: 1; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.kk-ev-del:hover { background: color-mix(in srgb, var(--danger, #ff5d6c) 16%, var(--surface-2)); border-color: color-mix(in srgb, var(--danger, #ff5d6c) 55%, var(--line)); color: var(--danger, #ff7a86); }
/* 인물 관찰 노트 — 꺼져 있을 때 안내(기록은 위에 그대로 유지) */
.kk-profile-off { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 13px; border-radius: 13px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--soft, #9aa0aa) 9%, transparent), color-mix(in srgb, var(--soft, #9aa0aa) 5%, transparent));
  border: 1px solid var(--line, #2a2a33); }
.kk-profile-off-ic { flex: 0 0 auto; font-size: 16px; line-height: 1.4; opacity: .9; }
.kk-profile-off-txt { display: grid; gap: 3px; }
.kk-profile-off-txt b { font-size: 12.8px; font-weight: 800; color: var(--text); }
.kk-profile-off-txt small { font-size: 11.8px; line-height: 1.55; color: var(--muted, #9aa0aa); }
/* 인물 카드 — 큰 이미지가 있을 때 좌(이미지)·우(정보) 2단 레이아웃 */
/* 폭을 키우지 않아(≤300px) 640px 이미지가 과하게 확대되지 않게 한다. 이미지는 3:4 칸으로 고정. */
.kk-profile-card--wide { width: min(800px, 95vw); padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(200px, 300px) 1fr; align-items: stretch; }
.kk-profile-figure { background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; align-self: stretch; }
.kk-figure-inner { width: 100%; aspect-ratio: 3 / 4; display: block; background-repeat: no-repeat; background-position: center; background-color: var(--bg); }
img.kk-figure-inner { object-fit: cover; height: auto; }
.kk-profile-card--wide .kk-profile-main { min-width: 0; max-height: 86vh; overflow-y: auto; padding: 24px 20px 20px; }
.kk-profile-card--wide .kk-profile-hero { margin-bottom: 14px; }
/* 수집 요소 그리드 */
.kk-profile-collect-sec h4 { display: flex; align-items: center; gap: 8px; }
.kk-collect-progress { font-size: 11px; font-weight: 800; color: var(--muted, #9aa0aa); background: var(--surface-2); border: 1px solid var(--line, #2a2a33); border-radius: 999px; padding: 1px 8px; }
.kk-collect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.kk-collect { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line, #2a2a33); }
.kk-collect-ic { flex: 0 0 auto; font-size: 16px; line-height: 1.35; }
.kk-collect-tx { display: grid; gap: 2px; min-width: 0; }
.kk-collect-k { font-size: 11px; font-weight: 700; color: var(--muted, #9aa0aa); }
.kk-collect-v { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.5; word-break: break-word; }
.kk-collect.is-locked { background: var(--surface-1); border-style: dashed; }
.kk-collect.is-locked .kk-collect-ic { filter: grayscale(1); opacity: .5; }
.kk-collect-q { font-size: 18px; font-weight: 900; letter-spacing: 1px; color: color-mix(in srgb, var(--accent) 55%, var(--muted, #9aa0aa)); }
@media (max-width: 640px) {
  .kk-profile-card--wide { grid-template-columns: 1fr; width: min(440px, 94vw); max-height: 88vh; overflow-y: auto; }
  .kk-profile-figure { align-self: auto; }
  .kk-figure-inner { width: auto; height: 50vh; aspect-ratio: 3 / 4; max-width: 100%; margin: 0 auto; }
  .kk-profile-card--wide .kk-profile-main { max-height: none; overflow: visible; }
}
@media (max-width: 480px) {
  .kk-profile-hero { flex-direction: column; text-align: center; gap: 12px; }
  .kk-profile-headline { text-align: center; }
  .kk-collect-grid { grid-template-columns: 1fr; }
}

/* 인물 관찰 노트 — 켤 때 안내·모드 선택 모달 */
.kk-cn-overlay { position: fixed; inset: 0; z-index: 215; background: rgba(8,8,14,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: grid; place-items: center; padding: 22px; animation: kkProfFade .18s ease; }
.kk-cn-card { position: relative; width: min(440px, 94vw); max-height: 86vh; overflow-y: auto; border-radius: 20px; padding: 22px 20px; background: var(--card-bg, #1b1b22); border: 1px solid var(--line, #2a2a33); box-shadow: 0 24px 70px rgba(0,0,0,.5); animation: kkProfPop .22s cubic-bezier(.2,.9,.3,1.2); }
.kk-cn-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line, #2a2a33); background: var(--surface-2); color: var(--soft); font-weight: 800; cursor: pointer; }
.kk-cn-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 900; color: var(--text); }
.kk-cn-desc { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--soft); }
.kk-cn-desc b { color: var(--text); }
.kk-cn-warn { margin: 0 0 14px; padding: 9px 12px; border-radius: 11px; font-size: 12.5px; color: #ffd9a8; background: color-mix(in srgb, #ff9f43 16%, transparent); border: 1px solid color-mix(in srgb, #ff9f43 35%, transparent); }
/* 이전 기록이 있을 때 '이어쓰기' 안내 */
.kk-cn-note { margin: 0 0 12px; padding: 9px 12px; border-radius: 11px; font-size: 12.5px; line-height: 1.55; color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
.kk-cn-note b { color: var(--accent); }
.kk-cn-choices { display: grid; gap: 10px; }
.kk-cn-opt { position: relative; text-align: left; display: grid; gap: 3px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line, #2a2a33); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.kk-cn-opt:hover { border-color: var(--accent); background: var(--surface-3); }
.kk-cn-opt b { font-size: 14.5px; font-weight: 800; color: var(--text); }
.kk-cn-opt small { font-size: 12px; color: var(--muted, #9aa0aa); line-height: 1.45; }
.kk-cn-opt small b { font-size: inherit; color: var(--accent); }
.kk-cn-opt em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--accent); margin-top: 2px; }
/* 추천(이어쓰기) 옵션 강조 */
.kk-cn-opt-primary { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); padding-top: 20px; }
.kk-cn-opt-primary:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 22%, transparent); }
.kk-cn-opt-badge { position: absolute; top: -9px; left: 13px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 900; letter-spacing: .2px; color: var(--on-accent, #fff); background: var(--accent); box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent); }

/* 인물 관찰 노트 — 작성 중 로딩 오버레이(취소 가능) */
.kk-cn-load-overlay { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; padding: 24px;
  background: rgba(8,8,14,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: kkProfFade .16s ease; }
.kk-cn-load-card { width: min(360px, 92vw); border-radius: 20px; padding: 26px 22px 20px; text-align: center;
  background: var(--card-bg, #1b1b22); border: 1px solid var(--line, #2a2a33); box-shadow: 0 24px 70px rgba(0,0,0,.5); animation: kkProfPop .22s cubic-bezier(.2,.9,.3,1.2); }
.kk-cn-load-spin { width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); animation: kkCnSpin .8s linear infinite; }
.kk-cn-load-title { font-size: 15px; font-weight: 900; color: var(--text); }
.kk-cn-load-msg { margin-top: 5px; font-size: 12.8px; line-height: 1.5; color: var(--soft); }
.kk-cn-load-bar { position: relative; height: 6px; margin: 16px 2px 4px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.kk-cn-load-bar > span { position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 999px; background: var(--accent); animation: kkCnBar 1.15s cubic-bezier(.4,0,.2,1) infinite; }
.kk-cn-load-cancel { margin-top: 14px; padding: 9px 22px; border-radius: 11px; border: 1px solid var(--line, #2a2a33); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s, border-color .15s; }
.kk-cn-load-cancel:hover { background: var(--surface-3); border-color: color-mix(in srgb, var(--danger, #ff5d6c) 60%, var(--line)); color: var(--danger, #ff7a86); }
@keyframes kkCnSpin { to { transform: rotate(360deg); } }
@keyframes kkCnBar { 0% { left: -40%; } 100% { left: 100%; } }