/* 부족 채팅 — 헤더 💬 · 대화 시트 · 새 말풍선 (2026-09-07 재배치).
 * 서버: backend/tribe_chat.py · 화면: web/tribe-chat.js
 *
 * ## 겹침 규칙 (여기가 정본)
 *
 *   미니게임 스테이지  z 9000  → 그 위로 **올라가지 않는다**. 통째로 감춘다(입력이 곧 점수다).
 *   공성 전장 전체화면 z 1200  → 그 **위**에 뜬다(대화가 어디서나 보여야 한다는 결정).
 *   월드보스 전투      z  180  → 위에 뜬다.
 *   하단 모드 내비     z   70  → 말풍선은 이 위에 얹힌다.
 *
 * ⚠ 시트는 `aria-modal="false"` 다 — 뒤 화면(전투·채굴)이 계속 돌아야 한다. 그래서 배경을
 *   덮지 않고 하단 시트로만 뜬다.
 */

/* ── 헤더 버튼 (게시판 📋 옆) ──────────────────────────────────────────── */
/* 모양은 style.css 「헤더 도구 단추 한 벌」이 정한다(2026-09-26). 예전에는 이 단추만 둥근 모서리 · 다른 바탕 ·
   30px 고정이라 소리 · 게시판 · 알림함 · 설정과 한 줄에서 혼자 달라 보였다. 여기는 안 읽음 점만 둔다. */
.gh-chat-dot {
  position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #6fb7e8; box-shadow: 0 0 0 2px #1d150f;
}
.gh-chat-dot[hidden] { display: none }
/* 공유 월드는 **별도 앱**(iframe)이고 자체 채팅이 있다 — 거기서는 감춘다.
   전투·월드보스 독에서는 감추지 않는다(게시판 📋 와 다른 점이고, 그게 이 개편의 요지다). */
#worldBgmDock .gh-chat { display: none }

/* ── 부족 탭의 '열기' 문 ───────────────────────────────────────────────── */
.tribe-chat-entry .tce-open {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 2px solid #4c6970; background: linear-gradient(135deg, #1d3336, #172329);
  color: var(--ink); font-family: "Galmuri11", "Galmuri9", sans-serif; text-align: left; cursor: pointer;
}
.tribe-chat-entry .tce-open:hover { border-color: #79cfc6; filter: brightness(1.08) }
.tce-icon { font-size: 18px;font-family:"Galmuri11","Galmuri9",sans-serif}
.tce-copy b { display: block; font-size: 12px;font-family:"Galmuri11","Galmuri9",sans-serif; color: #ddfff7 }
.tce-copy small { display: block; margin-top: 3px; font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; color: #a7d8d2 }
.tce-dot {
  margin-left: auto; width: 8px; height: 8px; border-radius: 50%;
  background: #6fb7e8; box-shadow: 0 0 6px #6fb7e8;
}
.tce-dot[hidden] { display: none }

/* ── 대화 시트 ────────────────────────────────────────────────────────── */
.tc-sheet {
  position: fixed; z-index: 1250; left: 50%;
  width: min(100%, var(--game-shell-max, 460px));
  transform: translateX(-50%);
  pointer-events: none;   /* 카드만 받는다 — 뒤 화면(전투)이 계속 조작돼야 한다 */
  /* 키보드가 올라오면 그 높이만큼 띄운다(`--tc-kb` 는 tribe-chat.js 가 visualViewport 로 잰다).
     ⚠ 모바일 브라우저는 키보드를 레이아웃 밖에 얹으므로, 이걸 안 하면 시트가 키보드 뒤로 들어간다. */
  bottom: var(--tc-kb, 0px);
  /* 키보드가 없을 때만 하단 내비만큼 띄운다(`--tc-pad` 가 0px 이면 키보드 바로 위에 붙는다). */
  padding-bottom: var(--tc-pad, calc(var(--mode-nav-height, 52px) + env(safe-area-inset-bottom)));
}
.tc-sheet.hidden { display: none }
.tc-sheet-card {
  pointer-events: auto;
  display: flex; flex-direction: column;
  padding: 10px 12px 12px;
  background: #1d150f; border: 3px solid #08060a; border-bottom: 0;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .5);
}
.tc-sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
.tc-sheet-title { margin: 0; font: 700 12px "Galmuri11","Galmuri9",sans-serif; color: var(--gold) }
.tc-sheet-tribe { font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; color: var(--muted) }
.tc-sheet-close {
  margin-left: auto; width: 26px; height: 26px; padding: 0;
  border: 2px solid var(--line); background: #5c3540; color: #fff;
  font: 700 12px/1 "Galmuri11","Galmuri9",sans-serif; cursor: pointer;
}
.tc-sheet-close:hover { background: #754450 }
/* 채널 단추 (2026-09-10) — 누른 쪽이 **참여 채널**이다. 알림(점·말풍선)도 그 채널에서만 온다. */
.tc-channels { display: flex; gap: 4px }
.tc-channel {
  padding: 4px 11px; font: 700 12px "Galmuri11","Galmuri9",sans-serif;
  color: var(--muted); background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; cursor: pointer;
}
.tc-channel:hover { color: var(--ink) }
.tc-channel.is-active { color: #342820; background: var(--gold); border-color: var(--gold) }
/* 시트 제목은 **읽어 주는 이름**으로만 남긴다 — 보이는 제목 자리는 채널 단추가 대신한다. */
.tc-sheet-title.tc-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tc-feed {
  /* 키보드가 올라오면 남은 높이 안으로 줄인다 — 안 줄이면 입력칸이 화면 밖으로 밀려
     **쓰던 글이 안 보인다**(`--tc-feed-max` 는 tribe-chat.js 가 정한다). */
  max-height: var(--tc-feed-max, 40vh); min-height: 96px; overflow-y: auto;
  padding: 4px 2px; display: flex; flex-direction: column; gap: 6px;
}
.tc-row { position: relative; padding: 4px 6px; border-radius: 6px; background: rgba(255, 255, 255, .04) }
/* 내 줄은 바닥색 하나로만 구분한다 — 좌우로 가르면 좁은 화면에서 글자 폭이 반으로 준다. */
.tc-row.is-mine { background: rgba(255, 214, 122, .10) }
/* 공지는 사람 줄과 달라야 한다 — 같은 모양이면 운영 안내가 잡담에 묻힌다. */

.tc-row.is-system { background: rgba(111, 183, 232, .12); border-left: 3px solid #6fb7e8 }

.tc-row.is-system .tc-name { color: #9fd4f5 }

/* 운영자 발언(2026-09-07) — 공지(📢)와 **다른 것**이다. 공지는 안내문이고 이건 대화에
   끼어 앉은 한 줄이라, 대화 모양을 유지하고 왼쪽 띠와 이름 색으로만 구분한다. */
.tc-row.is-admin { background: rgba(255, 214, 122, .07); border-left: 3px solid var(--gold) }
.tc-row.is-admin .tc-name { color: #ffe9ad }
/* 부족 표 — **운영자 시점에서만** 붙는다(세 방이 섞여 오므로 없으면 못 읽는다). */
.tc-chip {
  flex: none; padding: 1px 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .10); color: var(--muted);
  font: 700 10px "Galmuri9","Galmuri11",sans-serif;
}

/* 전체 채널의 표 — `[들풀] 닉네임`. 색은 **대화창 전용 팔레트**다(2026-09-11 사용자 지정).
   부족 고유색(dungeon.TRIBES — 지도·부족 화면)과 **일부러 다르다**: 잿불 고유색은 주황인데 대화에서는
   붉게 읽혀야 한다는 결정이다. 그래서 서버가 고유색을 실어 칠하지 않고 여기서 **키로** 고른다.
   운영자 줄은 부족이 아니라 역할이라 `[개발자]`(키 `dev`) · 노랑. 내 줄은 흰색 — 남의 줄과 한눈에
   갈린다. 모르는 키는 흐린 색으로 떨어진다. */
.tc-tribe { flex: none; font: 700 10px "Galmuri9","Galmuri11",sans-serif; color: var(--muted) }
.tc-tribe[data-tribe="meadow"]  { color: #5fd38a }  /* 들풀 — 초록 */
.tc-tribe[data-tribe="cave"]    { color: #5aa9e6 }  /* 메아리 — 파랑 */
.tc-tribe[data-tribe="volcano"] { color: #ff5a5a }  /* 잿불 — 붉음 */
.tc-tribe[data-tribe="dev"]     { color: #ffe14a }  /* 개발자 — 노랑 */
/* ⚠ 위 규칙들보다 **선택자 점수가 높아야** 이긴다(0,3,0 > 0,2,0) — 선택자를 줄이지 말 것. */
.tc-row.is-mine .tc-tribe { color: #ffffff }         /* 내 줄 — 흰색 */
.tc-head { display: flex; align-items: baseline; gap: 6px }
.tc-name { font: 700 12px "Galmuri11","Galmuri9",sans-serif; color: var(--gold) }
.tc-time { font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; color: var(--muted) }
.tc-more {
  margin-left: auto; padding: 0 4px; line-height: 1;
  background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px;font-family:"Galmuri14","Galmuri11",sans-serif;
}
.tc-more:hover { color: var(--ink) }
.tc-text { margin: 2px 0 0; font-size: 12px;font-family:"Galmuri11","Galmuri9",sans-serif; line-height: 1.7; color: var(--ink); word-break: break-word; white-space: pre-line }

/* ⋯ 메뉴 — 줄 위에 겹쳐 띄운다(목록을 밀어내면 읽던 자리가 흔들린다). */
.tc-menu {
  position: absolute; right: 4px; top: 20px; z-index: 5;
  display: flex; flex-direction: column; min-width: 118px;
  background: #342820; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45); overflow: hidden;
}
.tc-menu button {
  padding: 6px 8px; font-size: 12px;font-family:"Galmuri11","Galmuri9",sans-serif; text-align: left;
  background: none; border: 0; color: var(--ink); cursor: pointer;
}
.tc-menu button:hover { background: rgba(255, 255, 255, .10) }
.tc-menu-title { padding: 5px 8px 2px; font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; color: var(--muted) }
.tc-menu .tc-block { border-top: 1px solid rgba(255, 255, 255, .12); color: #ffb0a8 }

.tc-new {
  display: block; margin: 4px auto 0; padding: 3px 10px;
  font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; color: var(--ink);
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; cursor: pointer;
}
/* ⚠ `display` 를 정한 요소는 `hidden` 속성이 **안 먹는다**(작성자 규칙이 UA 의
   `[hidden]{display:none}` 을 이긴다). 실제로 "새 메시지 ↓" 가 늘 보였다(2026-09-07).
   아래 두 줄이 그 함정을 막는 자리다 — 이 파일에서 display 를 새로 정할 때마다 같이 볼 것. */
.tc-new[hidden] { display: none !important }
.tribe-chat-entry[hidden] { display: none !important }
.tc-pin {
  margin: 0 0 6px; padding: 5px 7px; font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; line-height: 1.6; white-space: pre-line;
  background: rgba(111, 183, 232, .12); border-left: 3px solid #6fb7e8; color: #d6ecfa;
}
.tc-muted {
  margin: 6px 0 0; padding: 5px 7px; font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; line-height: 1.6;
  background: rgba(255, 176, 168, .10); border-left: 3px solid #ffb0a8; color: #ffb0a8;
}
.tc-preview {
  margin: 0 0 6px; padding: 5px 7px; font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; line-height: 1.6;
  background: rgba(255, 255, 255, .06); border-left: 3px solid var(--gold); color: var(--muted);
}
.tc-empty { margin: 10px 0; font-size: 12px;font-family:"Galmuri11","Galmuri9",sans-serif; color: var(--muted); text-align: center }


/* 차단 안내 — **숨기고 있다는 사실**을 말한다(2026-09-07 제보: 옛 게시판 차단이 대화를 막았다). */
.tc-blocked {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 6px; padding: 4px 7px; font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; line-height: 1.6;
  background: rgba(255, 255, 255, .05); border-left: 3px solid #a28f73; color: var(--muted);
}
.tc-blocked[hidden] { display: none !important }
.tc-blocked button {
  margin-left: auto; flex: none; padding: 2px 7px; font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; cursor: pointer;
  color: var(--ink); background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
}
.tc-blocklist {
  margin: 0 0 6px; padding: 4px; display: flex; flex-direction: column; gap: 3px;
  max-height: 22vh; overflow-y: auto;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .14); border-radius: 4px;
}
.tc-blocklist[hidden] { display: none !important }
.tc-bl-row { display: flex; align-items: center; gap: 6px; font-size: 12px;font-family:"Galmuri11","Galmuri9",sans-serif; color: var(--ink) }
.tc-bl-row button {
  margin-left: auto; padding: 2px 8px; font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; cursor: pointer;
  color: #342820; background: var(--gold); border: 0; border-radius: 3px;
}
.tc-bl-empty { padding: 3px 4px; font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; color: var(--muted) }

.tc-compose { display: flex; gap: 6px; margin-top: 8px }
.tc-compose[hidden] { display: none }
.tc-compose input {
  flex: 1; min-width: 0; padding: 6px 8px; font: inherit; font-size: 12px;font-family:"Galmuri11","Galmuri9",sans-serif;
  color: var(--ink); background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 4px;
}
.tc-compose input:disabled { opacity: .5 }
.tc-send {
  flex: none; padding: 6px 12px; font: 700 12px "Galmuri11","Galmuri9",sans-serif;
  color: #342820; background: var(--gold); border: 0; border-radius: 4px; cursor: pointer;
}
.tc-send:disabled { opacity: .5; cursor: default }
.tc-count { display: block; margin-top: 3px; font-size: 10px;font-family:"Galmuri9","Galmuri11",sans-serif; color: var(--muted); text-align: right }

/* ── 새 말풍선 — 평소에는 공간을 0 먹는다 ─────────────────────────────── */
.tc-bubble {
  position: fixed; z-index: 1240; left: 50%;
  /* 하단 고정 막대들(모드 내비 + 화면별 서브내비) **바로 위 경계선**에 얹는다.
     ⚠ 값은 tribe-chat.js 가 그때그때 잰다(`bottomBars`) — 상수로 박으면 방치 화면의
       펫·아이템·적립 줄을 덮는다(2026-09-07 제보). 아래는 못 쟀을 때의 폴백이다. */
  bottom: var(--tc-bubble-bottom, calc(var(--mode-nav-height, 52px) + env(safe-area-inset-bottom)));
  transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 6px;
  width: min(calc(100% - 24px), calc(var(--game-shell-max, 460px) - 24px));
  padding: 7px 10px; text-align: left; cursor: pointer;
  background: rgba(29,21,15,.94); border: 2px solid #5d493b; border-radius: 8px;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, .45);
  border-bottom: 0; border-radius: 8px 8px 0 0;   /* 막대 위에 얹힌 판처럼 */
  animation: tc-bubble-in .18s ease-out;
}
.tc-bubble[hidden] { display: none }
.tc-bubble.is-system { border-color: #6fb7e8; background: rgba(19, 33, 45, .96) }
.tc-bubble-name { flex: none; font: 700 10px "Galmuri9","Galmuri11",sans-serif; color: var(--gold) }
.tc-bubble.is-system .tc-bubble-name { color: #9fd4f5 }
.tc-bubble-text {
  flex: 1; min-width: 0; font-size: 12px;font-family:"Galmuri11","Galmuri9",sans-serif; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes tc-bubble-in { from { opacity: 0; transform: translate(-50%, 6px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* 미니게임 무대(z 9000) — 대화창은 무대의 💬 단추로 **어느 무대에서나** 연다(2026-09-17 사용자 결정 · 함께하기 정답이 샐 수 있음을 알고 골랐다).
   저절로 뜨는 말풍선만 이벤트 무대(.minigame-stage-live)에서 허용한다 — 혼자 하는 종목은 입력이 곧 점수라 화면을 덮으면 판이 망가진다. */
body.minigame-stage-open:not(.minigame-stage-live) .tc-bubble,
body.minigame-stage-open .gh-chat { display: none !important }
body.minigame-stage-open .tc-sheet { z-index: 9500 }
body.minigame-stage-live .tc-bubble { z-index: 9490 }

/* 부족 탭 단추의 점 — 전쟁 뱃지(`.dtab-war`)와 **같은 자리·다른 색**이다.
   전쟁은 지금 달려가야 하는 일이고 채팅은 읽으면 되는 일이라, 크기로 무게를 가른다. */
.dtab-chat {
  position: absolute; top: 4px; right: 16px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #6fb7e8; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}