/* ── 플로팅 채팅 (v1.13.0) — 카페 홈·게시판 공용. 카페 디자인 변수(--c-*) 따름 ──
   z-index: 카페 상단 네비 100 < 채팅 500 < 모달 1000 < 토스트 2000 */
.fchat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 500;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--c-primary, var(--brand)); color: #fff;
  box-shadow: 0 6px 20px rgba(35, 42, 54, .22);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.fchat-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(35, 42, 54, .28); }
.fchat-fab.on { transform: none; }
.fchat-fab.off { filter: grayscale(1); opacity: .7; }
.fchat-fab.off::after {
  content: '꺼짐'; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; line-height: 16px;
}
.fchat-fab-ico { font-size: 25px; line-height: 1; }
.fchat-badge {
  position: absolute; top: -4px; right: -4px; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--card);
}

.fchat-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 500;
  width: min(370px, calc(100vw - 40px)); height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--c-card, var(--card)); color: var(--c-text, var(--ink));
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 14px 40px rgba(35, 42, 54, .22); overflow: hidden;
  animation: fchat-in .18s ease;
}
@keyframes fchat-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.fchat-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--line); background: var(--c-card, var(--card)); flex-shrink: 0;
}
.fchat-title { font-size: 15px; }
.fchat-online { font-size: 12px; color: var(--muted); margin-right: auto; white-space: nowrap; }
.fchat-close {
  width: 30px; height: 30px; border-radius: 8px; border: none; background: none; color: var(--muted); font-size: 15px;
}
.fchat-close:hover { background: var(--brand-soft); color: var(--c-primary, var(--brand)); }

.fchat-body { flex: 1; overflow-y: auto; padding: 10px 12px; overscroll-behavior: contain; }
.fchat-more { display: block; margin: 0 auto 10px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 12px; padding: 4px 12px; border-radius: 999px; }
.fchat-more:hover { color: var(--c-primary, var(--brand)); border-color: var(--c-primary, var(--brand)); }
.fchat-off { font-size: 12px; color: var(--muted); background: var(--paper); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.fchat-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 40px 10px; }

.fchat-msg { padding: 5px 0; }
.fchat-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; min-width: 0; }
.fchat-nick { color: var(--c-primary, var(--brand)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchat-msg.owner .fchat-nick { color: var(--amber); }
.fchat-time { color: var(--muted); font-size: 11px; margin-left: auto; flex-shrink: 0; }
.fchat-del { border: none; background: none; color: var(--muted); font-size: 11px; padding: 0 3px; opacity: 0; flex-shrink: 0; }
.fchat-msg:hover .fchat-del, .fchat-del:focus-visible { opacity: 1; }
.fchat-del:hover { color: var(--danger); }
.fchat-text { font-size: 14px; line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; }
.fchat-msg.mine .fchat-text { background: var(--brand-soft); border-radius: 10px; padding: 5px 9px; display: inline-block; margin-top: 2px; }

.fchat-foot {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  border-top: 1px solid var(--line); background: var(--c-card, var(--card)); flex-shrink: 0;
}
.fchat-input {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); font-size: 14px;
}
.fchat-input:focus { border-color: var(--c-primary, var(--brand)); outline: none; }
.fchat-login-hint { flex: 1; font-size: 13px; color: var(--muted); }

/* 모바일: 아래에서 올라오는 시트 */
@media (max-width: 719px) {
  .fchat-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .fchat-panel {
    right: 0; left: 0; bottom: 0; width: 100%; height: min(72vh, 560px);
    border-radius: 18px 18px 0 0; border-bottom: none;
  }
  .fchat-fab.on { display: none; }   /* 시트가 열리면 버튼은 숨기고 헤더 ✕로 닫음 */
  .fchat-del { opacity: 1; }         /* 터치 기기는 hover가 없으니 항상 표시 */
}

@media (prefers-reduced-motion: reduce) {
  .fchat-panel { animation: none; }
  .fchat-fab { transition: none; }
}