/* ─────────────────────────────────────────────────────────────
   스크래블 — 채팅 모듈 (스타일)

   chat.js 와 한 쌍입니다. 이 두 파일만 가져가면 어느 페이지에서든
   채팅 창을 띄울 수 있습니다. 대기실에도, 나중에 만들 게임 화면에도
   같은 파일을 씁니다.

   ▸ 클래스 이름을 전부 chat- 으로 시작하게 지었습니다.
     끼워 넣는 페이지에 .field .hint 같은 흔한 이름이 이미 있어도
     서로 부딪히지 않게 하기 위해서입니다.

   ▸ 색·글꼴은 design/styles.css 의 토큰을 따릅니다. 다만 그 파일을
     안 불러온 페이지에 끼워도 깨지지 않도록, 아래에서 기본값을 함께
     적어둡니다. var(--paper-2, #FBF9F3) 은 "--paper-2 가 있으면 그걸
     쓰고, 없으면 #FBF9F3" 이라는 뜻입니다.
   ───────────────────────────────────────────────────────────── */

/* 색·글꼴 값을 한 번 받아둡니다.
   ⚠️ .chat 뿐 아니라 .chat-dock 에도 정의해야 합니다. 떠 있는 모드의
   동그란 버튼은 창(.chat)의 자식이 아니라 형제라서, 창 안에만 적어두면
   버튼에서는 값이 비어 배경·배지가 투명해집니다. */
.chat,
.chat-dock{
  --chat-paper:   var(--paper-2,    #FBF9F3);
  --chat-paper-2: var(--paper,      #F3F0E8);
  --chat-ink:     var(--ink,        #15120E);
  --chat-soft:    var(--ink-soft,   #6E675A);
  --chat-faint:   var(--ink-faint,  #A29A88);
  --chat-theme:   var(--theme,      #A9C8E4);
  --chat-deep:    var(--theme-deep, #7BA5C9);
  --chat-tint:    var(--theme-tint, #E7F0F8);
  --chat-rule:    var(--rule,       #15120E);
  --chat-grid:    var(--grid,       #C7C0AF);
  --chat-ok:      var(--ok,         #1F6B4A);
  --chat-bad:     var(--bad,        #B23A3A);
  --chat-display: var(--font-display, "Helvetica Neue", Helvetica, Arial, sans-serif);
  --chat-text:    var(--font-text,    "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif);
  --chat-mono:    var(--font-mono,    ui-monospace, SFMono-Regular, Menlo, monospace);
  --chat-caps:    var(--track-caps,   .16em);
  /* 대화가 쌓이는 칸의 높이. mount 할 때 height 로 바꿀 수 있습니다. */
  --chat-height: 260px;
}

/* 창의 겉모습. 위 토큰과 나눠 적습니다 — 여기 있는 배경·테두리가
   dock 에까지 붙으면, 화면 구석에 빈 상자가 하나 더 생깁니다. */
.chat{
  display:flex; flex-direction:column;
  background:var(--chat-paper);
  border:1.5px solid var(--chat-rule);
  color:var(--chat-ink);
  font-family:var(--chat-text);
  line-height:1.6;
}
.chat *{box-sizing:border-box}

/* ── 머리줄 — 제목·연결 상태·안 읽음·접기 ────────────────── */
.chat-head{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px;
  border-bottom:1.5px solid var(--chat-rule);
  background:var(--chat-paper-2);
}
.chat-title{
  margin-right:auto;          /* 제목이 자리를 밀어, 배지·접기가 오른쪽에 붙습니다 */
  font-family:var(--chat-mono); font-size:11px;
  letter-spacing:var(--chat-caps); text-transform:uppercase;
  color:var(--chat-ink);
}

/* 연결 상태는 색이 있는 네모 하나로 알립니다.
   색만으로 뜻을 전하면 색을 구분 못 하는 분이 놓치므로,
   화면에 안 보이는 글자(.chat-a11y)를 함께 넣어 읽어줍니다. */
.chat-dot{
  width:9px; height:9px; flex:none;
  border:1px solid var(--chat-rule);
  background:var(--chat-ok);
}
.chat[data-status="connecting"] .chat-dot{ background:var(--chat-theme); animation:chat-blink 1s steps(2,end) infinite }
.chat[data-status="offline"]    .chat-dot{ background:transparent; border-color:var(--chat-grid) }
@keyframes chat-blink{ 50%{ background:transparent } }

.chat-a11y{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 안 읽음 개수 — 접어둔 동안 들어온 말의 수 */
.chat-badge{
  min-width:20px; height:20px; padding:0 5px;
  display:none; place-items:center;
  background:var(--chat-bad); border:1px solid var(--chat-rule); color:#fff;
  font-family:var(--chat-mono); font-size:10.5px; font-variant-numeric:tabular-nums;
}
.chat[data-unread="yes"] .chat-badge{ display:grid }

.chat-fold{
  padding:4px 9px;
  font-family:var(--chat-mono); font-size:10.5px;
  letter-spacing:var(--chat-caps); text-transform:uppercase;
  color:var(--chat-soft); background:transparent;
  border:1px solid var(--chat-grid); border-radius:0; cursor:pointer;
}
.chat-fold:hover{ color:var(--chat-ink); border-color:var(--chat-rule) }

/* 접으면 머리줄만 남습니다. */
.chat[data-open="no"] .chat-body{ display:none }

/* ── 대화가 쌓이는 칸 ────────────────────────────────────── */
.chat-body{ position:relative; display:flex; flex-direction:column }

.chat-log{
  height:var(--chat-height);
  overflow-y:auto; overscroll-behavior:contain;
  padding:14px 12px;
  display:flex; flex-direction:column; gap:10px;
}

/* 아직 아무 말도 없을 때 */
.chat-empty{
  margin:auto; padding:0 20px;
  text-align:center; font-size:13px; color:var(--chat-faint);
}

/* ── 말 한 마디 ──────────────────────────────────────────── */
.chat-msg{ display:flex; flex-direction:column; gap:3px; max-width:82% }
.chat-msg.is-mine{ align-self:flex-end; align-items:flex-end }

/* 누가 한 말인지 — 같은 사람이 연달아 말하면 이름을 다시 안 씁니다.
   매 줄마다 이름이 붙으면 정작 내용이 눈에 안 들어옵니다. */
.chat-who{
  margin:0; font-family:var(--chat-mono); font-size:10px;
  letter-spacing:var(--chat-caps); text-transform:uppercase;
  color:var(--chat-faint);
}
.chat-msg.is-tail .chat-who{ display:none }
.chat-msg.is-tail{ margin-top:-6px }

.chat-line{ display:flex; align-items:flex-end; gap:6px }
.chat-msg.is-mine .chat-line{ flex-direction:row-reverse }

.chat-bubble{
  padding:8px 11px;
  background:#fff; border:1.5px solid var(--chat-rule);
  font-size:14px; text-align:left;
  white-space:pre-wrap;      /* 줄바꿈을 그대로 살립니다 */
  overflow-wrap:anywhere;    /* 띄어쓰기 없는 긴 글자도 칸을 안 넘칩니다 */
}
.chat-msg.is-mine .chat-bubble{ background:var(--chat-theme) }

.chat-time{
  flex:none; font-family:var(--chat-mono); font-size:9.5px;
  font-variant-numeric:tabular-nums; color:var(--chat-faint);
}

/* 보내는 중 — 서버가 받았다고 답하기 전까지 흐리게 */
.chat-msg.is-pending .chat-bubble{ opacity:.5 }

/* 들어옴·나감 같은 알림 줄 */
.chat-sys{
  margin:2px 0; text-align:center;
  font-family:var(--chat-mono); font-size:10.5px;
  letter-spacing:var(--chat-caps); text-transform:uppercase;
  color:var(--chat-faint);
}

/* ── 위로 올려 읽는 중에 새 말이 왔을 때 ─────────────────── */
.chat-jump{
  position:absolute; left:50%; bottom:88px; transform:translateX(-50%);
  display:none; padding:5px 12px;
  font-family:var(--chat-mono); font-size:10.5px;
  letter-spacing:var(--chat-caps); text-transform:uppercase;
  color:var(--chat-ink); background:var(--chat-theme);
  border:1.5px solid var(--chat-rule); border-radius:0; cursor:pointer;
}
.chat[data-behind="yes"] .chat-jump{ display:block }

/* ── 상대가 입력 중 ──────────────────────────────────────── */
.chat-typing{
  display:none; align-items:center; gap:6px;
  margin:0; padding:0 12px 8px;
  font-size:12px; color:var(--chat-soft);
}
.chat[data-typing="yes"] .chat-typing{ display:flex }
.chat-typing i{
  width:5px; height:5px; flex:none;
  background:var(--chat-soft); border-radius:50%;
  animation:chat-bounce 1.2s infinite;
}
.chat-typing i:nth-child(2){ animation-delay:.15s }
.chat-typing i:nth-child(3){ animation-delay:.3s }
@keyframes chat-bounce{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }

/* ── 입력칸 + 보내기 ─────────────────────────────────────── */
.chat-foot{
  display:flex; align-items:stretch;
  border-top:1.5px solid var(--chat-rule);
}
.chat-input{
  flex:1; min-width:0; height:44px; padding:0 12px;
  font:inherit; font-size:15px; color:var(--chat-ink);
  background:#fff; border:0; border-radius:0; outline:none;
  transition:box-shadow .15s;
}
.chat-input::placeholder{ color:var(--chat-faint) }
.chat-input:focus{ box-shadow:inset 0 -3px 0 var(--chat-theme) }
.chat-input:disabled{ background:transparent; cursor:not-allowed }

.chat-count{
  flex:none; display:grid; place-items:center; padding:0 8px;
  background:#fff;
  font-family:var(--chat-mono); font-size:10px;
  font-variant-numeric:tabular-nums; color:var(--chat-faint);
}
.chat-count.is-over{ color:var(--chat-bad) }

.chat-send{
  flex:none; height:44px; padding:0 16px;
  font-family:var(--chat-display); font-size:12px; font-weight:700;
  letter-spacing:var(--chat-caps); text-transform:uppercase; white-space:nowrap;
  color:var(--chat-ink); background:var(--chat-theme);
  border:0; border-left:1.5px solid var(--chat-rule);
  border-radius:0; cursor:pointer; transition:background .15s;
}
.chat-send:hover:not(:disabled){ background:var(--chat-deep) }
.chat-send:disabled{ cursor:not-allowed; background:transparent; color:var(--chat-faint) }

/* 연결이 끊기면 입력칸 전체를 잠급니다.
   보낼 수 없는 상태에서 글을 치게 두면, 보내고 나서야 실패를 알게 됩니다. */
.chat[data-status="offline"] .chat-foot{ background:var(--chat-paper-2) }

@media (prefers-reduced-motion:reduce){
  .chat-dot, .chat-typing i{ animation:none }
}

/* ─────────────────────────────────────────────────────────────
   떠 있는 모드 (float: true)

   화면 오른쪽 아래에 동그란 버튼만 두고, 누를 때만 창을 펼칩니다.
   채팅이 주인공이 아닌 화면(대기실·게임판)에서는 이렇게 두어야
   본래 할 일이 가려지지 않습니다.
   ───────────────────────────────────────────────────────────── */
.chat-dock{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  /* 이 칸 자체는 눌림을 받지 않습니다. 안에 든 창과 동그란 버튼만
     받습니다.

     왜 필요한가: 좁은 화면에서 이 칸은 가로 전체로 넓어지는데(아래
     640px 규칙), 정작 보이는 것은 오른쪽 끝 동그라미 하나뿐입니다.
     그대로 두면 아무것도 안 보이는 왼쪽 빈 자리가 눌림을 가로채서,
     그 아래 있는 버튼이 눌리지 않습니다. 실제로 휴대폰 크기에서
     게임 시작 버튼이 이것 때문에 눌리지 않았습니다. */
  pointer-events:none;
}
.chat-dock > *{ pointer-events:auto }

/* 창은 버튼 위에 뜹니다. 닫혀 있으면 아예 없습니다. */
.chat-dock .chat{
  width:340px; max-width:calc(100vw - 40px);
  box-shadow:6px 6px 0 rgba(21,18,14,.14);
}
.chat-dock[data-open="no"] .chat{ display:none }

/* 동그란 버튼.
   바탕을 진한 먹색으로 둡니다. 크림색 종이 위에서 하늘색은 둘 다 옅어
   서로 묻히는데, 먹색은 이 화면에서 가장 진한 색이라 확실히 떠오릅니다.
   글자·타일에 쓰는 색 그대로라 화면과 따로 놀지도 않습니다. */
.chat-launcher{
  position:relative; flex:none;
  width:64px; height:64px; padding:0;
  display:grid; place-items:center;
  color:var(--chat-paper);
  background:var(--chat-ink);
  border:2px solid var(--chat-rule);
  border-radius:50%;
  box-shadow:0 3px 0 rgba(21,18,14,.3), 0 8px 20px rgba(21,18,14,.22);
  cursor:pointer;
  transition:background .15s, color .15s, transform .1s, box-shadow .1s;
}
.chat-launcher svg{ width:28px; height:28px }
.chat-launcher-off svg{ width:24px; height:24px }

/* 누르면 색이 뒤집힙니다 — 눌렸다는 걸 색으로도 알립니다. */
.chat-launcher:hover{ background:var(--chat-theme); color:var(--chat-ink) }
.chat-launcher:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 rgba(21,18,14,.3), 0 4px 10px rgba(21,18,14,.22);
}
.chat-launcher:focus-visible{ outline:3px solid var(--chat-deep); outline-offset:3px }

/* 열려 있으면 말풍선 대신 × 를 보여줍니다. */
.chat-launcher-off{ display:none }
.chat-dock[data-open="yes"] .chat-launcher-on{ display:none }
.chat-dock[data-open="yes"] .chat-launcher-off{ display:grid }
.chat-launcher-on, .chat-launcher-off{ place-items:center }

/* 닫아둔 동안 온 말의 수 — 버튼 모서리에 붙습니다. */
.chat-launcher-badge{
  position:absolute; top:-3px; right:-3px;
  min-width:24px; height:24px; padding:0 6px;
  display:none; place-items:center;
  background:var(--chat-bad); border:2px solid var(--chat-paper); color:#fff;
  border-radius:12px;
  font-family:var(--chat-mono); font-size:11.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.chat-dock[data-unread="yes"][data-open="no"] .chat-launcher-badge{ display:grid }

/* 창이 열려 있을 땐 머리줄의 배지가 필요 없습니다. */
.chat-dock .chat-badge{ display:none !important }

/* 화면이 좁으면 창을 폭에 맞춰 늘립니다. */
@media (max-width:420px){
  .chat-dock{ right:14px; bottom:14px; left:14px; align-items:stretch }
  .chat-dock .chat{ width:auto; max-width:none }
  .chat-launcher{ align-self:flex-end }
}