@charset "utf-8";
/* ========================================
   K-Tell Chat Layout & Chat-Specific Styles
======================================== */

/* ========================================
   Layout: Full-height App Shell
======================================== */
body {
  background: var(--bg-body);
  color: var(--text-primary);
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: fixed;
  inset: 0;
}

/* ========================================
   Header
======================================== */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  z-index: 10;
}

.header .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
}

.welcome-msg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}

.welcome-title {
  font-size: 14px;
  font-weight: 700;
}

.welcome-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

.header .search-box.pc-only {
  position: relative;
  width: 36px;
  height: 36px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  border-radius: var(--radius-full);
  margin-left: 10px;
}

.header .search-box.pc-only.expanded {
  width: 240px;
}

.header .search-box.pc-only input {
  width: 100%;
  height: 100%;
  padding: 0 16px 0 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: inherit;
  font-size: 13px;
  color: var(--text-primary);
  transition: all 0.3s ease;
  cursor: pointer;
}

.header .search-box.pc-only.expanded input {
  background: var(--bg-input);
  border-color: var(--border-color);
  cursor: text;
}

.header .search-box.pc-only.expanded input:focus {
  border-color: var(--color-prime);
}

.header .search-box.pc-only i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 18px;
  pointer-events: none;
}

.header .logo i {
  font-size: 24px;
  color: var(--color-prime);
}

.header .tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header .tools button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 20px;
  transition: var(--transition);
}

.header .tools button:hover {
  background: var(--bg-surface-hover);
  color: var(--color-prime);
  border: 1px solid var(--color-prime);
}

.header .tools button.active {
  color: var(--color-prime);
  background: rgba(111, 72, 255, 0.1);
}

.header .user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header .user-info .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-prime);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.header .user-info .nick {
  font-weight: 600;
  font-size: 14px;
}

.header .user-info .points {
  font-size: 12px;
  color: var(--color-prime);
  font-weight: 700;
}

.header .back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: var(--radius-full);
  transition: var(--transition);
}

.header .back-btn:hover {
  background: var(--bg-surface-hover);
}

/* ========================================
   Main Content Area (Lobby / Chat)
======================================== */
.main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  position: relative; /* [FEAT-2] webrtc-panel position:absolute 기준점 */
}

/* ========================================
   Side Panel (toggle)
======================================== */
.side-panel {
  width: 300px;
  background: var(--bg-sidebar);
  border-left: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  transition:
    width 0.25s ease,
    opacity 0.25s ease;
}

.side-panel.collapsed {
  width: 0;
  opacity: 0;
  border: none;
  pointer-events: none;
}

.side-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  font-weight: 700;
  font-size: 14px;
}

.side-panel .panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-light);
}

.side-panel .panel-tabs button {
  flex: 1;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-panel .panel-tabs button i {
  font-size: 20px;
}

.side-panel .panel-tabs button.active {
  color: var(--color-prime);
  border-bottom-color: var(--color-prime);
}

.side-panel .panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.side-panel .tab-content {
  display: none;
}

.side-panel .tab-content.active {
  display: block;
}

/* ========================================
   [v9.22] Lobby: Category Tabs
======================================== */
.category-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 0 4px;
  overflow-x: auto;
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
  flex-wrap: nowrap;
}
.category-tabs::-webkit-scrollbar { display: none; }

.cat-tab {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.cat-tab:hover {
  border-color: var(--color-prime);
  color: var(--color-prime);
}
.cat-tab.active {
  background: var(--color-prime);
  border-color: var(--color-prime);
  color: #fff;
  font-weight: 700;
}

/* [v9.22] Room Card: Category Badge */
.category-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(111, 72, 255, 0.12);
  color: var(--color-prime);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  margin-left: auto;
}

/* ========================================
   Lobby: Room Cards
======================================== */
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 16px;
}

.room-card {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

.room-card:hover {
  border-color: var(--color-prime);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.room-card .room-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.room-card .room-name .permanent {
  color: var(--color-prime);
  font-size: 14px;
}

.room-card .room-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.4;
}

.room-card .room-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}

.room-card .room-meta .temp {
  display: flex;
  align-items: center;
  gap: 4px;
}

.room-card .room-meta .users {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-prime);
  font-weight: 600;
}

.room-card .room-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}

/* Lobby toolbar */
.lobby-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
}

.lobby-toolbar .search-box {
  position: relative;
  width: 240px;
}

.lobby-toolbar .search-box input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: 13px;
  color: var(--text-primary);
}

.lobby-toolbar .search-box input:focus {
  border-color: var(--color-prime);
}

.lobby-toolbar .search-box i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 16px;
}

/* ========================================
   Chat Messages & Media Previews
======================================== */
.chat-area {
  flex: 1;
  padding: 16px;
  padding-bottom: 24px; /* 마지막 메시지(이미지 포함)가 인풋바에 가리지 않도록 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  position: relative;
  z-index: 1;
}

.chat-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 0;
  pointer-events: none;
  display: none;
  /* Only activated via JS if needed, but provides a readable layer */
}

.msg {
  display: flex;
  gap: 10px;
  max-width: 85%;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.msg.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
  max-width: 85%;
}

.msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.msg.mine .msg-body {
  align-items: flex-end;
}

.msg-nick {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-area .msg.mine .msg-nick {
  display: none;
}

.msg-bubble {
  padding: 8px 12px;
  background: var(--chat-bubble-other);
  color: var(--text-primary);
  border-radius: 14px;
  border-top-left-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  position: relative;
  border: none;
}

.msg.mine .msg-bubble {
  background: var(--chat-bubble-mine);
  color: var(--chat-text-mine);
  border-top-left-radius: 14px;
  border-top-right-radius: 4px;
}

.msg-time {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: right;
}

/* media style addition */
.msg-media {
  margin-top: 8px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}

.media-preview,
.media-video {
  max-width: 100%;
  max-height: 280px; /* 세로로 긴 이미지가 말풍선 영역 초과 방지 */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

.download-box {
  margin-top: 8px;
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--color-prime);
  text-decoration: none;
  transition: background 0.2s;
}

.btn-download:hover {
  background: var(--bg-surface-hover);
}

/* Bubble color 충돌 방지: 중복 규칙 제거됨 — .msg-bubble 기본 규칙만 사용 */

.chat-area .msg .msg-time {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.chat-area .msg.mine .msg-time {
  text-align: right;
}

.chat-area .msg .msg-bubble.pending {
  /* opacity 사용 금지 — 수신자에게 ACK가 가지 않아 영구 희미해지는 버그 방지 */
  border: 1px dashed var(--border-color);
}

.chat-area .msg .msg-bubble .ack-icon {
  font-size: 11px;
  margin-left: 4px;
}

/* System messages */
.chat-area .system-msg {
  align-self: center;
  padding: 4px 14px;
  background: var(--chat-system-bg);
  border-radius: var(--radius-full);
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  max-width: 80%;
  width: fit-content; /* [v9.73] 텍스트 전체에 배경 적용 보장 */
}

/* Whisper */
.chat-area .msg.whisper .msg-bubble {
  background: rgba(111, 72, 255, 0.12) !important;
  color: var(--color-prime) !important;
  border: 1px dashed var(--color-prime);
}

.chat-area .msg.whisper .msg-nick::before {
  content: "🔒 ";
  font-size: 10px;
}

/* Media embed in chat */
.chat-area .msg .msg-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 4px;
  max-width: 300px;
  border: 1px solid var(--border-light);
}

.chat-area .msg .msg-media img.media-preview {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  display: block;
}

.chat-area .msg .msg-media video.media-video {
  width: 100%;
  max-height: 240px;
  display: block;
  background: #000;
}

.chat-area .msg .msg-media audio.media-audio {
  width: 100%;
  display: block;
  padding: 4px;
}

.chat-area .msg .msg-media .file-attach {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.chat-area .msg .msg-media .file-attach i {
  font-size: 22px;
  color: var(--color-prime);
}

.chat-area .msg .msg-media .file-attach .file-info {
  font-size: 12px;
}

.chat-area .msg .msg-media .file-attach .file-name {
  font-weight: 600;
}

/* ========================================
   Chat Input Bar
======================================== */
.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.chat-input-bar .input-tools {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.chat-input-bar .input-tools button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 20px;
  transition: var(--transition);
}

.chat-input-bar .input-tools button:hover {
  color: var(--color-prime);
  background: var(--bg-surface-hover);
}

.chat-input-bar .msg-input {
  flex: 1;
  height: 36px; /* 높이를 고정하여 움직임 방지 */
  min-height: 36px;
  max-height: 36px; /* 최대 높이도 고정 */
  padding: 8px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  resize: none; /* 사용자 리사이즈 금지 */
  color: var(--text-primary);
  font-size: 14px;
  line-height: 20px; /* 줄 높이를 픽셀 단위로 고정 */
  overflow: hidden; /* 스크롤바와 그로 인한 떨림을 완전히 제거 */
  box-sizing: border-box; /* 패딩이 높이에 영향을 주지 않도록 고정 */
}

.chat-input-bar .msg-input:focus {
  border-color: var(--color-prime);
}

.chat-input-bar .send-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--color-prime);
  color: #fff;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: var(--transition);
}

.chat-input-bar .send-btn:hover {
  background: var(--color-prime-dark);
  transform: scale(1.05);
}

/* Slash command autocomplete */
.slash-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

.slash-menu.show {
  display: block;
}

.slash-menu .slash-item {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.slash-menu .slash-item:hover {
  background: var(--bg-surface-hover);
}

.slash-menu .slash-item .cmd {
  font-weight: 700;
  color: var(--color-prime);
}

.slash-menu .slash-item .desc {
  color: var(--text-secondary);
}

/* ========================================
   Chat Top Banner (Announcement / Media)
======================================== */
.chat-banner {
  padding: 10px 16px;
  background: rgba(111, 72, 255, 0.08);
  border-bottom: 1px solid rgba(111, 72, 255, 0.15);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chat-banner i {
  color: var(--color-prime);
  font-size: 16px;
}

.chat-banner .banner-text {
  flex: 1;
  font-weight: 500;
}

.chat-banner .close-banner {
  cursor: pointer;
  color: var(--text-tertiary);
}

/* Media player (PiP Mode) */
.media-player {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 320px;
  min-width: 220px;
  min-height: 44px; /* 헤더 높이만 */
  max-width: 90vw;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  resize: both; /* 자유 리사이즈 — 내부 미디어도 함께 반응 */
  overflow: hidden;
}

.media-player-header {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-light);
  cursor: move;
  user-select: none;
  background: rgba(111, 72, 255, 0.05);
  flex-shrink: 0;
  height: 44px;
  box-sizing: border-box;
}

/* ── compact 모드: 헤더만 표시, 미디어 숨김 ── */
.media-player.media-compact {
  height: 44px !important;
  min-height: 44px;
  resize: none !important;
  overflow: hidden;
}
.media-player.media-compact .yt-container,
.media-player.media-compact #nativeMediaPlayer {
  display: none !important;
}

/* ── 커스텀 리사이즈 핸들 (코너) ── */
.pip-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  z-index: 10;
  background: transparent;
}

.pip-resize-handle::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
}

.media-player.media-compact .pip-resize-handle {
  display: none;
  /* 축소 모드에선 코너 핸들 숨김 */
}

/* ── 하단 전체 라인 리사이즈 핸들 ── */
.pip-bottom-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 16px;
  /* 코너 액션과 겹치지 않게 */
  height: 4px;
  /* 최소 두께 */
  cursor: ns-resize;
  z-index: 10;
  display: block;
  background: transparent;
}

/* ── 우측 전체 라인 리사이즈 핸들 ── */
.pip-right-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 16px;
  /* 코너 액션과 겹치지 않게 */
  width: 4px;
  /* 최소 두께 */
  cursor: ew-resize;
  z-index: 10;
}

/* [C-SW] 좌하단(SW) 리사이즈 핸들 — 오른쪽 가장자리 고정, 왼쪽·아래 확장 */
.pip-left-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
  cursor: sw-resize;
  z-index: 10;
}
.pip-left-resize-handle::after {
  content: '';
  position: absolute;
  left: 3px; bottom: 3px;
  width: 8px; height: 8px;
  border-left: 2px solid rgba(255,255,255,0.65);
  border-bottom: 2px solid rgba(255,255,255,0.65);
  border-radius: 0 0 0 3px;
}

.media-player .media-info {
  flex: 1;
  font-size: 12px;
}

.media-player .media-title {
  font-weight: 600;
}

.media-player .media-controls {
  display: flex;
  gap: 4px;
}

.media-player .media-controls button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: 16px;
  color: var(--text-secondary);
}

.media-player .media-controls button:hover {
  background: var(--bg-surface-hover);
  color: var(--color-prime);
}

/* ========================================
   User List Items & Cards (side panel)
======================================== */
.user-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.user-card.my-card {
  border: 1px solid var(--color-prime);
  background: rgba(111, 72, 255, 0.03);
}

.user-card.owner-card {
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.04);
}

.user-card.owner-card.my-card {
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.06);
}

.user-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  background: transparent;
  transition: var(--transition);
}

.user-card-header:hover {
  background: var(--bg-surface-hover);
}

.user-card-body {
  padding: 4px 10px 6px;
  border-top: 1px dashed var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: slideUp 0.2s ease;
}

.card-bio {
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-input);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  word-break: break-all;
}

.card-stats {
  display: flex;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding-bottom: 2px;
}

.card-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 0;
}

.user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.user-item:hover {
  background: var(--bg-surface-hover);
}

.user-item .u-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  flex-shrink: 0;
}

.user-item .u-avatar .online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--bg-sidebar);
}

.user-item .u-info {
  flex: 1;
  min-width: 0;
}

.user-item .u-info .u-nick {
  font-size: 13px;
  font-weight: 600;
}

.user-item .u-info .u-status {
  font-size: 11px;
  color: var(--text-secondary);
}

.user-item .u-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: var(--transition);
}

.user-item:hover .u-actions {
  opacity: 1;
}

.user-item .u-actions button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-secondary);
}

.user-item .u-actions button:hover {
  color: var(--color-prime);
  background: rgba(111, 72, 255, 0.1);
}

/* ========================================
   Operator Panel (방장 전용)
======================================== */
.operator-panel {
  padding: 12px;
}

.operator-panel h4 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.operator-panel .op-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.operator-panel .op-btn {
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  transition: var(--transition);
}

.operator-panel .op-btn:hover {
  border-color: var(--color-prime);
  color: var(--color-prime);
}

.operator-panel .op-btn.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ========================================
   Pet Widget
======================================== */
.pet-widget {
  padding: 12px;
  text-align: center;
}

.pet-widget .pet-icon {
  font-size: 42px;
  margin-bottom: 6px;
}

.pet-widget .pet-name {
  font-weight: 700;
  font-size: 14px;
}

.pet-widget .pet-level {
  font-size: 11px;
  color: var(--text-secondary);
}

.pet-widget .pet-exp {
  width: 100%;
  height: 4px;
  background: var(--bg-input);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.pet-widget .pet-exp .bar {
  height: 100%;
  background: var(--color-prime);
  border-radius: 2px;
  transition: width 0.3s;
}

/* ========================================
   Login Page
======================================== */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg-body);
  padding: 20px;
}

.login-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 400px;
  padding: 40px 32px;
  text-align: center;
}

.login-card .logo-area {
  margin-bottom: 28px;
}

.login-card .logo-area i {
  font-size: 48px;
  color: var(--color-prime);
}

.login-card .logo-area h1 {
  font-size: 24px;
  font-weight: 800;
  margin-top: 8px;
}

.login-card .logo-area p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.login-card .form-group {
  margin-bottom: 14px;
  text-align: left;
}

.login-card .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.login-card .divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--text-tertiary);
  font-size: 12px;
}

.login-card .divider::before,
.login-card .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.login-card .theme-selector {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}

.login-card .theme-selector button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  transition: var(--transition);
}

.login-card .theme-selector button:hover,
.login-card .theme-selector button.active {
  border-color: var(--color-prime);
  transform: scale(1.15);
}

.login-card .theme-selector .t-light {
  background: #ffffff;
}

.login-card .theme-selector .t-dark {
  background: #1a1a1a;
}

.login-card .theme-selector .t-hitel {
  background: #000033;
}

/* ========================================
   Connection Status
======================================== */
.conn-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.conn-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

.conn-status .dot.disconnected {
  background: var(--danger);
  animation: pulse 1s infinite;
}

.conn-status .dot.connecting {
  background: var(--warning);
  animation: pulse 0.8s infinite;
}

/* ========================================
   Context Menu (Right-click on user)
======================================== */
.ctx-menu {
  position: fixed;
  z-index: 150;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  overflow: hidden;
  display: none;
}

.ctx-menu.show {
  display: block;
}

.ctx-menu .ctx-item {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.ctx-menu .ctx-item:hover {
  background: var(--bg-surface-hover);
  color: var(--color-prime);
}

.ctx-menu .ctx-item.danger {
  color: var(--danger);
}

.ctx-menu .ctx-item.danger:hover {
  background: rgba(244, 67, 54, 0.08);
}

.ctx-menu .ctx-sep {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

/* ========================================
   Responsive
======================================== */
@media (max-width: 768px) {
  .side-panel {
    position: fixed;
    right: 0;
    top: 56px;
    bottom: 0;
    z-index: 20;
    width: 280px;
    box-shadow: var(--shadow-lg);
  }

  .side-panel.collapsed {
    width: 0;
  }

  .room-grid {
    grid-template-columns: 1fr !important;
  }

  .chat-area .msg {
    max-width: 85%;
  }

  .lobby-toolbar .search-box {
    width: 160px;
  }
}

/* ========================================
   PC / Mobile visibility
======================================== */
.mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .pc-only {
    display: none !important;
  }

  .mobile-only {
    display: inline-flex !important;
  }
}

/* Floating side toggle button (mobile) */
.floating-side-btn {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 30;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-prime);
  color: #fff;
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.floating-side-btn:hover {
  background: var(--color-prime-dark);
  transform: scale(1.1);
}

/* ========================================
   #8: Welcome Message
======================================== */
.welcome-msg {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  line-height: 1.2;
}

.welcome-msg .welcome-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.welcome-msg .welcome-sub {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ========================================
   #8: Animated Search Box
======================================== */
.lobby-toolbar {
  flex-direction: row-reverse;
}

.lobby-toolbar .search-box {
  width: 42px;
  transition: width 0.35s ease;
  overflow: hidden;
  cursor: pointer;
}

.lobby-toolbar .search-box.expanded {
  width: 240px;
}

.lobby-toolbar .search-box input {
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
}

.lobby-toolbar .search-box.expanded input {
  opacity: 1;
}

@media (max-width: 768px) {
  .lobby-toolbar .search-box {
    width: 160px;
  }

  .lobby-toolbar .search-box input {
    opacity: 1;
  }

  .lobby-toolbar {
    flex-direction: row;
  }
}

/* ========================================
   #6: Expandable User Card
======================================== */
.user-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  overflow: hidden;
  animation: slideUp 0.2s ease;
}

.user-card.my-card {
  border-color: var(--color-prime);
  border-width: 2px;
  background: rgba(255, 106, 0, 0.04);
}

:root.darkMode .user-card.my-card {
  background: rgba(255, 136, 51, 0.08);
}

:root.hitelMode .user-card.my-card {
  background: rgba(0, 170, 255, 0.08);
}

.user-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: var(--transition);
}

.user-card-header:hover {
  background: var(--bg-surface-hover);
}

.user-card-body {
  padding: 4px 10px 6px;
  border-top: 1px solid var(--border-light);
  animation: fadeIn 0.2s ease;
}

.card-bio {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.card-bio i {
  font-size: 13px;
  color: var(--color-prime);
}

.card-stats {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  padding-bottom: 2px;
}

.card-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-stats i {
  font-size: 13px;
  color: var(--color-prime);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding-top: 4px;
  border-top: 1px solid var(--border-light);
}

.card-actions .btn {
  font-size: 11px;
  padding: 3px 7px;
}

/* ========================================
   #17: Color Palette Popup
======================================== */
.color-palette-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 14px; /* 내부 여백을 살짝 늘려 안정감 부여 */
  display: none;
  z-index: 40;
  width: 300px; /* 280px에서 300px로 확장하여 잘림 방지 */
  box-sizing: border-box; /* 패딩이 너비 계산에 포함되도록 고정 */
}

.color-palette-popup.show {
  display: block;
  animation: fadeIn 0.15s ease;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.palette-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
}

.palette-swatch:hover {
  transform: scale(1.15);
  border-color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.palette-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

.palette-footer input[type="color"] {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  padding: 0;
}

.palette-eyedropper {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 18px;
}

.palette-eyedropper input[type="color"] {
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  visibility: hidden;
  position: absolute;
}

.palette-alpha {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
}

.palette-alpha input[type="range"] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-color);
  border-radius: 2px;
  outline: none;
}

.palette-alpha input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-prime);
  cursor: pointer;
}

.palette-alpha span {
  min-width: 36px;
  text-align: right;
  font-weight: 600;
}

/* ========================================
   #3: Media Filename Display
======================================== */
.media-fname {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.media-fname i {
  font-size: 13px;
  color: var(--color-prime);
}

/* ========================================
   #16: Emoji Popup
======================================== */
.emoji-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0;
  display: none;
  z-index: 40;
  width: 340px;
  max-height: 380px;
  overflow: hidden;
}

.emoji-popup.show {
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.15s ease;
}

/* Emoji Tabs */
.emoji-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.emoji-tab {
  flex: 1;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.emoji-tab.active {
  color: var(--color-prime);
  border-bottom: 2px solid var(--color-prime);
}

.emoji-tab:hover {
  background: var(--bg-surface-hover);
}

/* Tab content */
.emoji-tab-content {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.emoji-tab-content.active {
  display: flex;
}

/* Default emoji grid */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  padding: 10px;
  overflow-y: auto;
  max-height: 200px;
}

.emoji-item {
  font-size: 22px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}

.emoji-item:hover {
  background: var(--bg-surface-hover);
  transform: scale(1.2);
}

/* #4: Custom emoji category tabs */
.emoji-custom-cats {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-light);
}

.emoji-cat-btn {
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 12px;
  background: var(--bg-surface-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.emoji-cat-btn.active {
  background: var(--color-prime);
  color: #fff;
  border-color: var(--color-prime);
}

/* Custom emoji grid */
.emoji-custom-grid {
  grid-template-columns: repeat(6, 1fr);
  max-height: 160px;
  overflow-y: auto;
}

.emoji-custom-item {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-base);
  border: 1px solid var(--border-light);
}

.emoji-custom-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emoji-custom-item:hover {
  border-color: var(--color-prime);
  transform: scale(1.05);
}

.emoji-del {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.emoji-custom-item:hover .emoji-del {
  opacity: 1;
}

/* Emoji management controls */
.emoji-mgmt {
  padding: 8px 10px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.emoji-mgmt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.emoji-mgmt-row:last-child {
  margin-bottom: 0;
  justify-content: space-between;
}

/* ========================================
   #12: Enhanced Media Player
======================================== */
.media-player-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  min-height: 42px;
}

.yt-container {
  width: 100%;
  flex: 1 1 auto; /* 컨테이너 남은 높이 채움 → 리사이즈 시 미디어도 함께 조정 */
  min-height: 160px;
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid var(--border-color);
}

/* ytPlayer div: YT API가 iframe으로 교체하기 전/후 모두 100% 높이 채움 */
#ytPlayer {
  width: 100%;
  height: 100%;
}

.yt-container iframe {
  width: 100%;
  height: 100% !important; /* YT API의 height="100%" 인라인 속성 보강 */
  border: none;
  display: block;
}

/* nativeMediaPlayer (오디오/비디오) - yt-container와 동일하게 flex로 채움 */
#nativeMediaPlayer {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  border-radius: 0;
}

/* 채팅 파일 업로드 미디어 헤더 (상단 파일명+저장버튼) */
.media-file-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid var(--border-light);
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  font-weight: 500;
}
/* 미디어(비디오/오디오) 헤더: 파일명 + 저장버튼 균등배열 (클립아이콘 없음) */
.media-file-header.media-header-equal {
  justify-content: space-between;
}
.media-file-header.media-header-equal .media-file-name {
  max-width: none;
  flex: 1;
  margin-right: 8px;
}
.media-file-header i {
  font-size: 16px;
  color: var(--color-prime);
  flex-shrink: 0;
}
.media-file-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  font-size: 12px;
  font-weight: 500;
}

/* 이미지 하단 저장 버튼 영역 */
.media-img-footer {
  display: flex;
  justify-content: flex-end;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.04);
  border-top: 1px solid var(--border-light);
}
.btn-save-sm {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.btn-save-sm:hover {
  opacity: 0.8;
}
.btn-save-sm i {
  font-size: 13px;
}

/* 압축/기타파일 전용 박스 (클립아이콘+파일명 상단, 다운로드버튼 하단) */
.file-nonmedia-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 8px;
}
.file-nonmedia-top {
  display: flex;
  align-items: center;
  gap: 7px;
}
.file-nonmedia-top i {
  font-size: 22px;
  color: var(--color-prime);
  flex-shrink: 0;
}
.btn-download-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 14px;
  background: var(--color-prime);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  transition: opacity 0.2s;
}
.btn-download-block:hover {
  opacity: 0.85;
}
.btn-download-block i {
  font-size: 15px;
}

.btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 8px;
  background: var(--color-prime);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.btn-save:hover {
  opacity: 0.85;
}
.btn-save i {
  font-size: 14px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 420px;
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-body {
  padding: 20px;
}

.btn-prime {
  background: var(--color-prime);
  color: #fff;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: var(--transition);
}

.btn-prime:hover {
  background: var(--color-prime-dark);
}

/* ========================================
   Card Section Labels (role-based controls)
======================================== */
.card-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0 2px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-prime);
  border-top: 1px solid var(--border-light);
}

.card-section-label i {
  font-size: 13px;
}

/* ========================================
   #14: Owner Controls Divider
======================================== */
.op-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.op-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.owner-controls {
  border-top: 1px solid var(--border-light);
  margin-top: 8px;
  padding-top: 4px;
}

/* iframe 포인터 이벤트 제어 (크기 조절 드래그 중 버벅이기 완벽 방지) */
.media-player.is-resizing .yt-container iframe,
.media-player.is-resizing #ytPlayer {
  pointer-events: none;
}

/* ========================================
   [v9.24] Chat Mechanism Enhancements
======================================== */

/* 타이핑 인디케이터 바 — [v10.3] 플로팅 오버레이 (본문 레이아웃에 영향 없음) */
.typing-bar {
  position: fixed;
  bottom: 60px;          /* 입력바(~56px) 바로 위 */
  left: 0;
  right: 0;
  padding: 4px 18px;
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  background: var(--bg-surface, rgba(18,18,30,0.92));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid var(--border-light, rgba(255,255,255,0.06));
  z-index: 200;
  pointer-events: none;
  line-height: 1.4;
  /* display:none 이 기본 — JS에서 block 으로 전환 */
}

/* 답장/수정 안내 바 */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--bg-secondary, #f5f5f5);
  border-left: 3px solid var(--color-prime, #6f48ff);
  font-size: 12px;
  color: var(--text-secondary);
  border-radius: 0 4px 4px 0;
  margin-bottom: 2px;
}
.reply-bar button {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 0 4px;
}
.reply-bar button:hover { color: var(--color-prime, #6f48ff); }

/* 메시지 액션 버튼 */
.msg-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.msg-actions {
  display: none;
  gap: 2px;
}
.msg:hover .msg-actions,
.msg-item:hover .msg-actions {
  display: flex;
}
.msg-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.msg-action-btn:hover {
  background: var(--bg-hover, rgba(111,72,255,0.08));
  color: var(--color-prime, #6f48ff);
}

/* 수정됨 배지 */
.edit-badge {
  font-size: 10px;
  color: var(--text-muted, #aaa);
  margin-left: 4px;
  font-style: italic;
}

/* 읽음 배지 */
.seen-badge {
  font-size: 10px;
  color: var(--color-prime, #6f48ff);
  margin-left: auto;
}

/* 답장 인용 미리보기 */
.msg-reply-preview {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-secondary, #f5f5f5);
  border-left: 3px solid var(--color-prime, #6f48ff);
  padding: 2px 8px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 3px;
  cursor: pointer;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-reply-preview:hover { opacity: 0.8; }

/* ========================================
   [v9.25] 채팅 검색 패널
======================================== */
.search-panel {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}
.search-input-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}
.search-input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-input, var(--bg-primary));
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border 0.2s;
}
.search-input:focus { border-color: var(--color-prime, #6f48ff); }
.search-input-wrap button {
  padding: 7px 10px;
  background: var(--color-prime, #6f48ff);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.search-input-wrap button:hover { opacity: 0.85; }
.search-result-panel {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-result-item {
  padding: 8px 10px;
  background: var(--bg-secondary, #f5f5f5);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.search-result-item:hover { background: rgba(111,72,255,0.08); }
.search-nick {
  font-weight: 600;
  font-size: 12px;
  color: var(--color-prime, #6f48ff);
  margin-right: 6px;
}
.search-ts {
  font-size: 11px;
  color: var(--text-secondary);
}
.search-msg {
  font-size: 13px;
  color: var(--text-primary);
  margin-top: 2px;
  word-break: break-all;
}
.search-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
  font-size: 13px;
}
/* 검색 결과 하이라이트 */
.msg-item.highlight {
  animation: highlight-flash 0.5s ease 0s 3 alternate;
}
@keyframes highlight-flash {
  from { background: transparent; }
  to   { background: rgba(111,72,255,0.15); border-radius: 8px; }
}

/* ========================================
   [v9.26] WebRTC P2P 방송 UI
======================================== */

/* 방송 알림 배너 */
.broadcast-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(111,72,255,0.12), rgba(111,72,255,0.04));
  border-bottom: 1px solid rgba(111,72,255,0.2);
  font-size: 13px;
  color: var(--text-primary);
  flex-shrink: 0;
  animation: banner-slide-in 0.3s ease;
}
.broadcast-banner i.bx-broadcast {
  color: var(--color-prime, #6f48ff);
  font-size: 18px;
  animation: pulse-broadcast 1.5s ease-in-out infinite;
}
@keyframes pulse-broadcast {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes banner-slide-in {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.btn-join-broadcast {
  padding: 4px 12px;
  background: var(--color-prime, #6f48ff);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.15s;
}
.btn-join-broadcast:hover { opacity: 0.85; }

/* On Air 배지 [FEAT-1] */
.on-air-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #22c55e;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  animation: pulse-onair 1.5s ease-in-out infinite;
}
@keyframes pulse-onair {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* 방송/시청 플로팅 패널 [FEAT-2] — media-player PiP 스타일로 통일 */
.webrtc-panel {
  position: absolute;
  top: 20px;
  left: calc(50% - 160px); /* 초기: 콘텐츠 영역 상단 중앙 */
  width: 320px;
  min-width: 240px;
  min-height: 180px;
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  z-index: 900;
  display: none;
  flex-direction: column;
  resize: both;
}
.webrtc-panel.active {
  display: flex;
}
.webrtc-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-light);
  cursor: move;
  user-select: none;
  flex-shrink: 0; /* 헤더 높이 고정 */
}
.webrtc-panel-header .viewer-count {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 400;
}
.webrtc-close-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-secondary);
  padding: 0 2px;
  line-height: 1;
}
.webrtc-close-btn:hover { color: #ff4d4f; }
.webrtc-video {
  width: 100%;
  flex: 1;
  min-height: 80px;
  /* [v9.35] 순수 검정 대신 패널 배경색으로 → 레터박스 영역이 자연스럽게 처리됨 */
  background: linear-gradient(135deg, #0c0c1e 0%, #0a1525 100%);
  object-fit: contain;
  display: block;
}
/* [v9.29 B] WebRTC 패널 추가 스타일 */
.live-badge {
  color: #ff4d4f;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5px;
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
.webrtc-type-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 400;
  padding: 2px 6px;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
}
.webrtc-ctrl-btn {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 4px;
  opacity: .75;
  transition: opacity .12s;
}
.webrtc-ctrl-btn:hover { opacity: 1; background: rgba(255,255,255,.1); }
.webrtc-ctrl-btn.muted { opacity: .4; }

/* 오디오 전용 표시 [v9.35 개편: 풀스크린 이미지 지원] */
.webrtc-audio-indicator {
  flex: 1;
  position: relative;           /* 자식 absolute 위치 기준 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #111128, #0e1a30);
  overflow: hidden;
  min-height: 120px;
}

/* [v9.35] 풀스크린 배경 이미지 (이미지 업로드 시) */
.audio-fill-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.88;
  z-index: 0;
  transition: opacity .3s;
}
/* 웨이브/텍스트/펫은 이미지 위에 오버레이 — 중앙 하단 고정 */
.audio-overlay {
  position: absolute;
  bottom: 18px;
  left: 0; right: 0;
  z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  width: 100%;
}
.audio-wave-text {
  font-size: 12px; color: rgba(255,255,255,.8);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  background: rgba(0,0,0,.35);
  padding: 3px 10px; border-radius: 20px;
}

/* 접이식 시청자 목록 */
.webrtc-viewer-list {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.15);
  overflow: hidden;
  max-height: 160px;
  transition: max-height .2s ease;
}
.webrtc-viewer-list.collapsed { max-height: 30px; }
.webrtc-viewer-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  font-size: 11px;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  user-select: none;
}
.webrtc-viewer-list-header:hover { background: rgba(255,255,255,.04); }
.webrtc-collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  color: rgba(255,255,255,.4);
  line-height: 1;
  padding: 0;
  transition: transform .15s;
}
.webrtc-viewer-list.collapsed .webrtc-collapse-btn { transform: rotate(-90deg); }
.webrtc-viewer-items {
  list-style: none;
  margin: 0;
  padding: 0 8px 6px;
  max-height: 122px;
  overflow-y: auto;
}
.webrtc-viewer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  font-size: 12px;
  color: #ccc;
  border-radius: 6px;
  transition: background .1s;
}
.webrtc-viewer-item:hover { background: rgba(255,255,255,.06); }
.webrtc-viewer-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.webrtc-viewer-item-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  opacity: .55;
  padding: 1px 3px;
  border-radius: 3px;
  transition: opacity .12s;
}
.webrtc-viewer-item-btn:hover { opacity: 1; background: rgba(255,255,255,.1); }

/* 방송 모달: 미디어 타입 선택 버튼 */
.broadcast-type-btn {
  flex: 1;
  padding: 16px 8px;
  border: 2px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-secondary);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.broadcast-type-btn i { font-size: 22px; margin-bottom: 4px; display: block; }
.broadcast-type-btn:hover {
  border-color: var(--color-prime, #6f48ff);
  color: var(--color-prime, #6f48ff);
}
.broadcast-type-btn.active {
  border-color: var(--color-prime, #6f48ff);
  background: rgba(111,72,255,0.1);
  color: var(--color-prime, #6f48ff);
  font-weight: 700;
}

/* ========================================
   [v9.27] Warden + PetBot AI 시스템
======================================== */

/* ── Warden: Optimistic UI 롤백 마스크 ── */
.warden-blocked {
  position: relative;
  pointer-events: none;
}
.warden-blocked::after {
  content: '🚫 차단됨';
  position: absolute;
  inset: 0;
  background: rgba(255, 60, 60, 0.55);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(2px);
  animation: warden-fade-in 0.2s ease;
}
@keyframes warden-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── PetBot 메시지 스타일 ── */
.petbot-msg {
  padding: 2px 0;
}
.petbot-nick {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-prime, #6f48ff);
  margin-bottom: 3px;
}
.petbot-bubble {
  background: linear-gradient(135deg, rgba(111,72,255,0.10), rgba(111,72,255,0.04)) !important;
  border: 1px solid rgba(111,72,255,0.2) !important;
  border-radius: 12px 12px 12px 3px !important;
  font-size: 13px;
  line-height: 1.55;
  max-width: 80%;
  padding: 8px 12px;
}

/* ── PetBot 설정 폼 ── */
.petbot-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.form-label-sm {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.input-sm {
  padding: 6px 10px;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: var(--bg-input, var(--bg-primary));
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.input-sm:focus { border-color: var(--color-prime, #6f48ff); }

/* ─── [v9.31] Pet 애니메이션 키프레임 ─── */
@keyframes petBounce {
    0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
    25%       { transform: translateY(-6px) rotate(2deg) scale(1.05); }
    75%       { transform: translateY(-3px) rotate(-1deg) scale(1.02); }
}
@keyframes petFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    33%       { transform: translateY(-10px) scale(1.06) rotate(3deg); }
    66%       { transform: translateY(-5px) scale(1.03) rotate(-2deg); }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* [v9.31] 소환된 플로팅 펫 등장 */
#floatingPet { display: none; }
#floatingPet.active { display: flex !important; }

/* ─── [v9.34] 방송 시스템 UI ─── */
@keyframes liveBlink {
    0%, 49%  { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes noticeTicker {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* ── [v9.35] Exo 2: LIVE / OnAir / 공지 폰트 (DotGothic16 대체) ─ */
/* @import는 chat.html <link>로 처리 */
.dotty-font {
    font-family: 'Exo 2', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif !important;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* LIVE 뱃지 — 녹색 + Exo 2  [v9.35] */
.live-dot {
    display: inline-block;
    width: 9px; height: 9px;
    background: #00e676;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0,230,118,.7);
    animation: liveBlink 1.2s step-start infinite;
    flex-shrink: 0;
}
.live-badge-new {
    display: flex; align-items: center; gap: 5px;
    font-family: 'Exo 2', sans-serif;
    font-size: 13px; font-weight: 800; color: #00e676;
    letter-spacing: 2px;
}

/* 방송자 패널 헤더 개편 */
.webrtc-panel-header {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border-light, #002244);
    background: var(--bg-header, #000011);
    min-height: 44px;
}
.bcast-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid var(--color-prime, #00aaff);
    flex-shrink: 0;
}
.bcast-nick {
    font-size: 12px; font-weight: 700; color: var(--text-primary, #fff);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 80px;
}
.bcast-notice-wrap {
    width: 100%; overflow: hidden; height: 22px;
    border-top: 1px solid var(--border-light, #002244);
    background: rgba(0, 200, 80, .08);
    display: flex; align-items: center;
}
/* [v9.35] 공지 텍스트: Exo 2 + 13px + 녹색 */
.bcast-notice-ticker {
    font-family: 'Exo 2', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
    font-size: 13px; font-weight: 600; color: #00e676; white-space: nowrap;
    animation: noticeTicker 20s linear infinite;
    padding-left: 100%;
}
.bcast-notice-ticker.paused { animation-play-state: paused; }

/* ── [v9.34] 마이크 버튼 재설계 (가독성) ── */
.bcast-mic-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 9px;
    border: 1.5px solid rgba(255,255,255,.22);
    border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,.07);
    color: #fff; font-size: 13px;
    transition: background .15s, border-color .15s;
    flex-shrink: 0; margin-left: auto;
}
.bcast-mic-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.bcast-mic-btn.muted {
    background: rgba(255, 60, 60, .15);
    border-color: #ff3c3c; color: #ff6b6b;
}
.bcast-mic-btn i { font-size: 16px; }
.bcast-mic-btn .mic-label { font-size: 10px; font-weight: 700; letter-spacing: .5px; }

/* ── [v9.34] 시청자 패널 헤더: 방송자 아바타 + 닉 + LIVE ── */
.view-panel-header-live {
    display: flex; align-items: center; gap: 6px;
    flex: 1; min-width: 0;
}
.view-live-badge {
    display: flex; align-items: center; gap: 4px;
    font-family: 'Exo 2', sans-serif;
    font-size: 13px; font-weight: 800; color: #00e676;
    letter-spacing: 1.5px;
    white-space: nowrap; flex-shrink: 0;
}
.view-host-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1.5px solid #00e676; flex-shrink: 0;
    object-fit: cover;
}
.view-host-nick {
    font-size: 12px; font-weight: 700; color: var(--text-primary, #fff);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 70px;
}

/* ── [v9.34] 오디오 패널 내 펫 위치 (우하단 절대위치) ── */
.webrtc-audio-indicator { position: relative; }  /* 기준점 */
.audio-panel-pet {
    position: absolute; bottom: 8px; right: 10px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    pointer-events: none;
}
.audio-panel-pet-emoji {
    font-size: 42px; line-height: 1;
    animation: petFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.6));
}
.audio-panel-pet-name {
    font-size: 10px; font-weight: 700; color: var(--text-primary, #fff);
    background: rgba(0,0,0,.45); border-radius: 6px; padding: 1px 5px;
}

/* ── [v9.35] 방송패널 펫 소환 버튼 (가독성 개선) ── */
.bcast-pet-summon-btn {
    display: none;   /* JS로 audio 타입 시 표시 */
    align-items: center; gap: 5px;
    padding: 4px 10px;
    border: 1.5px solid rgba(255,255,255,.28);
    border-radius: 20px; cursor: pointer;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.9);
    font-size: 12px; font-weight: 600;
    transition: all .15s;
    flex-shrink: 0;
    white-space: nowrap;
}
.bcast-pet-summon-btn:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.5);
}
.bcast-pet-summon-btn.summoned {
    background: rgba(0,230,118,.15);
    border-color: #00e676; color: #00e676;
}

/* 방송 시작 모달 개편 */
.bcast-modal-box {
    background: var(--bg-surface, #1a1a2e);
    border: 1.5px solid var(--border-color, #003366);
    border-radius: 14px; width: 380px; max-width: 97vw;
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,100,255,.25));
}
.bcast-modal-header {
    background: var(--bg-header, #000011);
    padding: 13px 16px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1.5px solid var(--border-color, #003366);
}
.bcast-modal-body {
    padding: 16px; display: flex; flex-direction: column; gap: 14px;
}
.bcast-type-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.bcast-type-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 6px;
    background: var(--bg-input, #000044);
    border: 1.5px solid var(--border-light, #002244);
    border-radius: 10px; cursor: pointer; transition: all .15s;
    color: var(--text-secondary, #aaa);
}
.bcast-type-card:hover {
    border-color: var(--color-prime, #00aaff);
    color: var(--color-prime, #00aaff);
    background: var(--bg-surface-hover, #000055);
}
.bcast-type-card.selected {
    border-color: var(--color-prime, #00aaff);
    background: rgba(0,170,255,.12);
    color: var(--color-prime, #00aaff);
}
.bcast-type-card i { font-size: 26px; }
.bcast-type-card span { font-size: 12px; font-weight: 600; }
.bcast-type-card small { font-size: 10px; opacity: .7; text-align: center; line-height: 1.3; }
.bcast-modal-footer {
    background: var(--bg-header, #000011);
    padding: 12px 16px;
    border-top: 1px solid var(--border-light, #002244);
    display: flex; justify-content: flex-end; gap: 8px;
}

/* ─── [v9.33] Phase 2: 오디오 웨이브 바 + 볼륨 컨트롤 ─── */

/* 오디오 웨이브 바 (6개, 높이 애니메이션) */
.audio-wave-bars {
    display: flex; align-items: flex-end; gap: 4px;
    height: 44px; padding: 4px 0;
}
.audio-wave-bar {
    width: 6px; border-radius: 4px;
    background: var(--color-prime, #00aaff);
    box-shadow: 0 0 6px rgba(0,170,255,.5);
    animation: waveBar 1.1s ease-in-out infinite;
    min-height: 6px;
}
.audio-wave-bar:nth-child(1) { height: 55%; animation-delay: 0s;    }
.audio-wave-bar:nth-child(2) { height: 90%; animation-delay: 0.12s; }
.audio-wave-bar:nth-child(3) { height: 40%; animation-delay: 0.22s; }
.audio-wave-bar:nth-child(4) { height: 75%; animation-delay: 0.08s; }
.audio-wave-bar:nth-child(5) { height: 60%; animation-delay: 0.18s; }
.audio-wave-bar:nth-child(6) { height: 85%; animation-delay: 0.05s; }
@keyframes waveBar {
    0%, 100% { transform: scaleY(0.35); opacity: 0.6; }
    50%       { transform: scaleY(1.0);  opacity: 1.0; }
}

/* 오디오 방송 이미지/펫 */
.audio-bcast-image {
    width: 84px; height: 84px; border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-prime, #00aaff);
    box-shadow: 0 0 18px rgba(0,170,255,.45);
    animation: audioImgPulse 2.2s ease-in-out infinite;
}
@keyframes audioImgPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(0,170,255,.35); }
    50%       { box-shadow: 0 0 28px rgba(0,170,255,.7); }
}
.audio-pet-emoji {
    font-size: 56px; line-height: 1;
    animation: petFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.55));
}

/* 화면공유 볼륨 컨트롤 패널 */
.bcast-vol-ctrl {
    padding: 8px 12px; flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.22);
    display: flex; flex-direction: column; gap: 6px;
}
.bcast-vol-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: rgba(255,255,255,.6);
}
.bcast-vol-row label { min-width: 62px; flex-shrink: 0; cursor: default; }
.bcast-vol-row input[type=range] {
    flex: 1; height: 4px;
    accent-color: var(--color-prime, #00aaff);
    cursor: pointer; background: transparent;
}
.bcast-vol-value {
    min-width: 28px; text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 10px; color: var(--color-prime, #00aaff);
}
.bcast-vol-ctrl-title {
    font-size: 10px; font-weight: 700;
    color: var(--color-prime, #00aaff);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   [v9.36] STT / TTS 버튼 스타일
   ══════════════════════════════════════════════════════════════════ */

/* STT 음성 입력 버튼 (입력창 우측, 전송 버튼 좌측) */
#btnSTT {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition);
}
#btnSTT:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--color-prime);
}
/* 녹음 중: 빨간 맥박 효과 */
#btnSTT.stt-active {
  background: rgba(255, 60, 60, 0.15);
  color: #ff3c3c;
  border-color: #ff3c3c;
  animation: sttPulse 1.2s ease-in-out infinite;
}
@keyframes sttPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,60,60,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(255,60,60,0); }
}

/* TTS 읽어주기 모드 버튼 (input-tools 내부) */
#btnTTSMode {
  color: var(--text-secondary);
  transition: var(--transition);
}
#btnTTSMode:hover {
  color: var(--text-primary);
}
#btnTTSMode.tts-active {
  color: #00e676;
  animation: ttsBlink 2s ease-in-out infinite;
}
@keyframes ttsBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* 메시지 개별 TTS 읽기 버튼 */
.msg-btn-tts {
  color: var(--text-secondary);
}
.msg-btn-tts:hover {
  color: #00b4d8;
}

/* ────────────────────────────────────────────────────────────────
   귓속말 팝업 — 항공편지(Airmail) 스타일  [v9.84]
   ──────────────────────────────────────────────────────────────── */
.whisper-popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 9998;
  pointer-events: auto;
  animation: whisperPopOpen 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.whisper-popup.whisper-popup-hide {
  animation: whisperPopClose 0.3s ease forwards;
}
@keyframes whisperPopOpen {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.8) rotateX(-10deg); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotateX(0deg); }
}
@keyframes whisperPopClose {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotateX(0deg); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.85) rotateX(10deg); }
}

.whisper-popup-inner {
  width: 300px;
  background: #171726;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 50px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.07);
}

/* 항공편지 상단 사선 줄무늬 */
.whisper-airmail-stripe {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    #c1121f 0px 10px,
    #fff    10px 20px,
    #023e8a 20px 30px
  );
}

.whisper-airmail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 9px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.whisper-header-icon {
  font-size: 20px; line-height: 1;
}
.whisper-header-title {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.whisper-close-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.4); font-size: 14px; padding: 0;
  line-height: 1;
  transition: color 0.15s;
}
.whisper-close-btn:hover { color: #fff; }

/* 발신/수신 경로 */
.whisper-route {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 4px;
}
.whisper-from, .whisper-to {
  font-size: 11px;
  font-weight: 700;
  color: #c0cad8;
  background: rgba(255,255,255,0.07);
  padding: 2px 9px;
  border-radius: 20px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whisper-arrow {
  color: var(--primary, #ff7b3a);
  font-size: 14px;
  flex-shrink: 0;
}

/* 메시지 본문 */
.whisper-body {
  padding: 8px 14px 14px;
  font-size: 14px;
  color: #e0e8f4;
  line-height: 1.55;
  word-break: break-word;
  min-height: 40px;
}

/* 자동 닫힘 진행바 */
.whisper-timer-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--primary, #ff7b3a) 0%, #ffd166 100%);
  transform-origin: left;
  animation: whisperTimerShrink linear forwards;
}
@keyframes whisperTimerShrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* 로비 친구요청 타이머 [v9.84] */
@keyframes lfrTimer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* 친구요청 팝업 닫힘 애니메이션 (우측하단 고정 위치용) [v9.85] */
@keyframes friendReqPopClose {
  from { opacity: 1; transform: translateY(0)   scale(1); }
  to   { opacity: 0; transform: translateY(16px) scale(0.92); }
}

/* ═══════════════════════════════════════════════════════════════════
   [v10.4] SFU Meet Panel — Google Meet 방식 N:N 화상회의
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   [v10.6] SFU Meet 패널 — Google Meet 스타일 (상단 정보바 + 그리드 + 하단 컨트롤 바)
   ═══════════════════════════════════════════════════════════════════ */
/* [v10.11] Meet 모달 — 구글미트 스타일 floating 모달 (draggable + resizable) */
.sfu-meet-panel {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 520px;
  min-width: 360px;
  min-height: 260px;
  background: #111118;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08);
}

/* 리사이즈 핸들 (우하단 꼭짓점) */
#sfuMeetResizeHandle {
  position: absolute;
  bottom: 0; right: 0;
  width: 20px; height: 20px;
  cursor: nwse-resize;
  z-index: 10;
  opacity: 0.4;
  background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.5) 50%);
  border-bottom-right-radius: 12px;
  transition: opacity 0.2s;
}
#sfuMeetResizeHandle:hover { opacity: 0.9; }

/* 윈도우 컨트롤 영역 (상단 바 우측) */
.sfu-meet-win-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

/* 투명도 슬라이더 */
.sfu-opacity-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.25);
  outline: none;
  cursor: pointer;
  transition: background 0.2s;
}
.sfu-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}
.sfu-opacity-slider:hover { background: rgba(255,255,255,0.4); }

/* 윈도우 컨트롤 버튼 (최소화·닫기) */
.sfu-win-btn {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.sfu-win-btn-close  { background: rgba(229,57,53,0.7);  color: #fff; }
.sfu-win-btn-close:hover { background: #e53935; }
.sfu-win-btn-full   { background: rgba(255,255,255,0.12); color: #ccc; }
.sfu-win-btn-full:hover  { background: rgba(255,255,255,0.22); }

/* 상단 정보 바 */
.sfu-meet-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(12,12,22,0.97);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  gap: 10px;
  cursor: move;
  user-select: none;
  min-height: 40px;
}

.sfu-meet-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sfu-meet-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* LIVE 점 */
.sfu-meet-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4caf50;
  box-shadow: 0 0 6px rgba(76,175,80,0.7);
  animation: sfuVoicePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

.sfu-meet-title {
  font-size: 13px;
  font-weight: 600;
  color: #e0e8f4;
}

.sfu-meet-peer-count {
  font-size: 11px;
  color: #a0aab8;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 하단 컨트롤 바 (Google Meet 스타일) */
.sfu-meet-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(10,10,20,0.98);
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  gap: 8px;
  min-height: 68px;
}

.sfu-meet-bottom-left,
.sfu-meet-bottom-right {
  flex: 0 0 80px;
  display: flex;
  align-items: center;
}

.sfu-meet-bottom-right {
  justify-content: flex-end;
}

.sfu-meet-room-label {
  font-size: 11px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
}

.sfu-meet-bottom-center {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
}

/* 하단 컨트롤 버튼 (아이콘 + 레이블) */
.sfu-meet-ctrl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #e0e8f4;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s;
  padding: 4px 0 2px;
}
.sfu-meet-ctrl-btn:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); }
.sfu-meet-ctrl-btn.sfu-meet-ctrl-on  { background: rgba(255,255,255,0.12); }
.sfu-meet-ctrl-btn.sfu-meet-ctrl-off { background: rgba(229,57,53,0.75); color: #fff; }
.sfu-meet-ctrl-btn.sfu-meet-ctrl-leave { background: #e53935; color: #fff; border-radius: 50%; }
.sfu-meet-ctrl-btn.sfu-meet-ctrl-leave:hover { background: #c62828; }

.sfu-ctrl-label {
  font-size: 9px;
  color: inherit;
  opacity: 0.8;
  line-height: 1;
  white-space: nowrap;
}

/* 우측 부가 옵션 버튼 */
.sfu-meet-opt-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #a0b0c0;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.sfu-meet-opt-btn:hover { background: rgba(255,255,255,0.16); color: #e0e8f4; }

/* 사이드바: 참여자 목록 */
.sfu-meet-sidebar {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 220px;
  background: rgba(14,14,24,0.97);
  border-left: 1px solid rgba(255,255,255,0.08);
  z-index: 10;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
.sfu-meet-sidebar.open { transform: translateX(0); }

.sfu-meet-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #d0d8e8;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.sfu-meet-peer-list {
  list-style: none;
  margin: 0; padding: 6px 0;
  overflow-y: auto;
  flex: 1;
}

.sfu-meet-peer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 12px;
  color: #c0c8d8;
}

.sfu-meet-peer-item:hover { background: rgba(255,255,255,0.04); }

.sfu-meet-peer-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.sfu-meet-peer-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sfu-meet-peer-icons {
  display: flex;
  gap: 4px;
  font-size: 13px;
}

/* 레거시 헤더 호환 (이전 버전 참조 시) */
.sfu-meet-header { display: none; }
.sfu-meet-controls { display: none; }

/* 컨트롤 버튼 (레거시 — 헤더 내, 하위호환) */
.sfu-ctrl-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #e0e8f4;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.sfu-ctrl-btn:hover { background: rgba(255,255,255,0.18); }
.sfu-ctrl-btn.sfu-ctrl-on  { background: rgba(255,255,255,0.12); }
.sfu-ctrl-btn.sfu-ctrl-off { background: rgba(229,57,53,0.75); color: #fff; }
.sfu-ctrl-btn.sfu-ctrl-leave { background: #e53935; color: #fff; }
.sfu-ctrl-btn.sfu-ctrl-leave:hover { background: #c62828; }

/* 비디오 그리드 */
.sfu-video-grid {
  flex: 1;
  display: grid;
  gap: 6px;
  padding: 8px;
  overflow: hidden;
  background: #0d0d14;
  align-content: center;
  justify-content: center;
}

/* 자동 그리드 레이아웃 (1~9명) */
.sfu-video-grid.peers-1 { grid-template-columns: 1fr; }
.sfu-video-grid.peers-2 { grid-template-columns: repeat(2, 1fr); }
.sfu-video-grid.peers-3,
.sfu-video-grid.peers-4 { grid-template-columns: repeat(2, 1fr); }
.sfu-video-grid.peers-5,
.sfu-video-grid.peers-6 { grid-template-columns: repeat(3, 1fr); }
.sfu-video-grid.peers-7,
.sfu-video-grid.peers-8,
.sfu-video-grid.peers-9 { grid-template-columns: repeat(3, 1fr); }

/* 비디오 타일 */
.sfu-video-tile {
  position: relative;
  background: #1a1a2a;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-width: 0;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.sfu-video-tile.speaking {
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76,175,80,0.3);
}

.sfu-video-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}

/* 카메라 OFF 상태 — 아바타 표시 */
.sfu-video-tile .sfu-cam-off {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a2a;
}

.sfu-cam-off-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.12);
}

/* 타일 하단 정보 바 */
.sfu-tile-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 4px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #e0e8f4;
}

.sfu-tile-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sfu-tile-muted {
  color: #ff5252;
  font-size: 13px;
}

/* 화면공유 타일 — 넓게 */
.sfu-video-tile.screen-tile {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

/* 컨트롤 버튼 (헤더 내) */
.sfu-ctrl-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #e0e8f4;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.sfu-ctrl-btn:hover { background: rgba(255,255,255,0.18); }
.sfu-ctrl-btn.sfu-ctrl-on  { background: rgba(255,255,255,0.12); }
.sfu-ctrl-btn.sfu-ctrl-off { background: rgba(229,57,53,0.75); color: #fff; }
.sfu-ctrl-btn.sfu-ctrl-leave { background: #e53935; color: #fff; }
.sfu-ctrl-btn.sfu-ctrl-leave:hover { background: #c62828; }

/* ═══════════════════════════════════════════════════════════════════
   [v10.6] SFU Voice Widget — Discord 스타일 보이스 채널
   구조: 헤더(채널명+상태) | 참여자 목록(아바타+닉+아이콘) | 하단(내정보+컨트롤)
   ═══════════════════════════════════════════════════════════════════ */
/* [v10.11] Voice 위젯 — 디스코드 스타일 floating 위젯 (draggable) */
.sfu-voice-widget {
  position: fixed;
  top: 68px;
  right: 20px;
  bottom: auto;
  width: 240px;
  background: var(--bg-surface, rgba(17,17,27,0.98));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  z-index: 1400;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}

/* 헤더 (드래그 핸들) */
.sfu-voice-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #4caf50;
  background: rgba(76,175,80,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: move;
  user-select: none;
}
/* 보이스 닫기 버튼 */
.sfu-voice-close-btn {
  margin-left: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(229,57,53,0.6);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.sfu-voice-close-btn:hover { background: #e53935; }

.sfu-voice-channel-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sfu-voice-status {
  margin-left: auto;
  font-size: 10px;
  color: #a0a0b0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sfu-voice-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4caf50;
  animation: sfuVoicePulse 2s ease-in-out infinite;
}

@keyframes sfuVoicePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* 참여자 목록 */
.sfu-voice-peers {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 180px;
  overflow-y: auto;
}

/* 참여자 항목 (Discord: 아바타 + 닉 + 상태 아이콘) */
.sfu-voice-peer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 12px;
  color: #c0c8d8;
  transition: background 0.15s;
  border-radius: 4px;
  margin: 1px 4px;
}
.sfu-voice-peer:hover { background: rgba(255,255,255,0.05); }

/* 발화 중: 초록 링 표시 */
.sfu-voice-peer.speaking {
  background: rgba(76,175,80,0.08);
}
.sfu-voice-peer.speaking .sfu-voice-peer-avatar {
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76,175,80,0.4);
}

/* 아바타 */
.sfu-voice-peer-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sfu-voice-peer-nick {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 상태 아이콘 영역 */
.sfu-voice-peer-icons {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.sfu-peer-muted   { color: #ff5252; font-size: 13px; }
.sfu-peer-speaking { color: #4caf50; font-size: 13px; animation: sfuVoicePulse 0.8s ease-in-out infinite; }

/* 레거시 호환 */
.sfu-voice-peer-dot { display: none; }
.sfu-voice-peer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfu-voice-peer-muted { font-size: 11px; color: #ff5252; }
.sfu-voice-actions { display: none; }
.sfu-voice-btn { display: none; }

/* 하단 컨트롤 (Discord: 내 정보 + 아이콘 버튼) */
.sfu-voice-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(8,8,16,0.5);
  gap: 6px;
}

.sfu-voice-me-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.sfu-voice-me-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(76,175,80,0.5);
  flex-shrink: 0;
}

.sfu-voice-me-nick {
  font-size: 11px;
  font-weight: 600;
  color: #d0d8e8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
}

.sfu-voice-connected-label {
  font-size: 9px;
  color: #4caf50;
  flex-shrink: 0;
}

.sfu-voice-ctrl-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sfu-voice-icon-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #e0e8f4;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.sfu-voice-icon-btn:hover { background: rgba(255,255,255,0.16); }
.sfu-voice-icon-btn.sfu-ctrl-on { background: rgba(255,255,255,0.1); color: #fff; }
.sfu-voice-icon-btn.sfu-ctrl-off { background: rgba(229,57,53,0.75); color: #fff; }
.sfu-voice-leave-btn { background: rgba(229,57,53,0.6) !important; color: #fff !important; }
.sfu-voice-leave-btn:hover { background: rgba(229,57,53,0.9) !important; }

/* ── [v10.4] SFU Meet 활성 배너 ──────────────────────────────────── */
.sfu-meet-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(76,175,80,0.1);
  border-bottom: 1px solid rgba(76,175,80,0.2);
  font-size: 12px;
  color: #c8e6c9;
  flex-shrink: 0;
}
.sfu-meet-banner .btn-join-broadcast {
  margin-left: auto;
  background: rgba(76,175,80,0.25);
  color: #a5d6a7;
  border: 1px solid rgba(76,175,80,0.4);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.2s;
}
.sfu-meet-banner .btn-join-broadcast:hover {
  background: rgba(76,175,80,0.4);
}

/* ═══════════════════════════════════════════════════════════════
   [v10.12] Phase 2 — 호스트 컨트롤 패널 + 공지 시스템 + PTT
   ═══════════════════════════════════════════════════════════════ */

/* ── 공지 티커 (흐르는 자막) ─────────────────────────────────── */
.sfu-notice-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(76,175,80,0.14);
  border-bottom: 1px solid rgba(76,175,80,0.25);
  color: #c8e6c9;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  min-height: 28px;
}
.sfu-ticker-track {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.sfu-ticker-text {
  display: inline-block;
  white-space: nowrap;
  animation: sfuTickerScroll 18s linear infinite;
  padding-left: 100%;
}
@keyframes sfuTickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-200%); }
}
.sfu-ticker-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}
.sfu-ticker-close:hover { color: #fff; }

/* ── 공지 중앙 팝업 ────────────────────────────────────────────── */
.sfu-notice-popup {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
  background: transparent;
}
.sfu-notice-popup-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(17,17,27,0.92);
  border: 1px solid rgba(76,175,80,0.5);
  border-radius: 12px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 700;
  color: #e0f7e9;
  box-shadow: 0 6px 30px rgba(0,0,0,0.6);
  opacity: 0;
  transform: scale(0.85) translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 80%;
  text-align: center;
}
.sfu-notice-popup-icon { color: #4caf50; font-size: 20px; }
.sfu-notice-popup-show .sfu-notice-popup-inner {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── 호스트 전용 섹션 (Meet 사이드바 + Voice 위젯) ─────────────── */
.sfu-host-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.2);
}
.sfu-host-global-ctrl {
  display: flex;
  gap: 6px;
}
.sfu-host-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  padding: 6px 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #c0c8d8;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
  justify-content: center;
  white-space: nowrap;
}
.sfu-host-btn:hover { background: rgba(255,255,255,0.15); }
.sfu-host-btn-active {
  background: rgba(76,175,80,0.25) !important;
  border-color: rgba(76,175,80,0.5) !important;
  color: #a5d6a7 !important;
}
.sfu-host-btn-notice {
  background: rgba(229,57,53,0.2);
  border-color: rgba(229,57,53,0.3);
  color: #ef9a9a;
}
.sfu-host-btn-notice:hover { background: rgba(229,57,53,0.35); }

/* 공지 입력 영역 */
.sfu-host-notice-ctrl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sfu-notice-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #e0e8f4;
  font-size: 11px;
  outline: none;
  transition: border-color 0.15s;
}
.sfu-notice-input:focus { border-color: rgba(76,175,80,0.5); }
.sfu-notice-input::placeholder { color: rgba(255,255,255,0.3); }
.sfu-notice-style-row {
  display: flex;
  gap: 12px;
}
.sfu-radio-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #a0aab8;
  cursor: pointer;
}

/* Voice 위젯 내 호스트 섹션 */
.sfu-voice-host-section {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.15);
}
.sfu-voice-host-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  padding: 4px 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 5px;
  color: #b0b8c8;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s;
  justify-content: center;
  white-space: nowrap;
}
.sfu-voice-host-btn:hover { background: rgba(255,255,255,0.14); }

/* ── 참여자 개별 제어 팝업 (position:fixed) ──────────────────── */
.sfu-peer-ctrl-popup {
  position: fixed;
  z-index: 2000;
  background: var(--bg-surface, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  min-width: 160px;
  padding: 4px 0;
  overflow: hidden;
}
.sfu-peer-ctrl-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #e0e8f4;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sfu-peer-ctrl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px;
  background: none;
  border: none;
  color: #c0c8d8;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.sfu-peer-ctrl-item:hover { background: rgba(255,255,255,0.07); }
.sfu-peer-ctrl-kick { color: #ef9a9a; }
.sfu-peer-ctrl-kick:hover { background: rgba(229,57,53,0.15); }
.sfu-peer-ctrl-ban  { color: #ff7043; font-weight: 600; }
.sfu-peer-ctrl-ban:hover  { background: rgba(255,112,67,0.15); }
.sfu-peer-ctrl-divider {
  margin: 3px 0;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* 개별 제어 버튼 (참여자 목록 항목 내) */
.sfu-peer-ctrl-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.sfu-peer-ctrl-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* ── PTT 플로팅 버튼 (참여자 전용) ──────────────────────────── */
.sfu-ptt-hold-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 24px;
  background: rgba(76,175,80,0.25);
  border: 2px solid rgba(76,175,80,0.5);
  border-radius: 32px;
  color: #c8e6c9;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  transition: background 0.1s, border-color 0.1s, transform 0.1s;
  user-select: none;
  -webkit-user-select: none;
}
.sfu-ptt-hold-btn:active,
.sfu-ptt-hold-btn.sfu-ptt-active {
  background: rgba(76,175,80,0.6);
  border-color: #4caf50;
  transform: scale(0.96);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(76,175,80,0.3), 0 4px 20px rgba(0,0,0,0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   [v10.13] Phase 3: View Mode + Volume Mixer + Device Modal
   ═══════════════════════════════════════════════════════════════════ */

/* ── 뷰 모드 버튼 ─────────────────────────────────────────────────── */
.sfu-view-btn {
  position: relative;
  transition: color .15s, background .15s;
}
.sfu-view-btn.active {
  color: var(--color-prime, #00aaff) !important;
  background: rgba(0,170,255,.12) !important;
}
.sfu-view-btn.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-prime, #00aaff);
}

/* ── Focus 뷰 레이아웃 ───────────────────────────────────────────── */
.sfu-video-grid.view-focus {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
.sfu-video-grid.view-focus .sfu-tile-focused {
  flex: 1;
  min-height: 0;
  border: 2px solid var(--color-prime, #00aaff);
  border-radius: 10px;
}
.sfu-video-grid.view-focus .sfu-tile-strip {
  display: none; /* 필름스트립은 가로 스크롤 행으로 */
}
/* 스트립 행 (필름스트립) — display flex horizontal */
.sfu-video-grid.view-focus::after {
  content: none;
}

/* 실제 스트립: JS가 .sfu-tile-strip을 숨기지 않고 하단 행에 배치하려면
   grid 자체를 flex column으로 + strip들을 감싸는 row로 만든다.
   간단 구현: strip은 단순히 숨기고 focused만 표시 */

/* ── ScreenShare 뷰 레이아웃 ─────────────────────────────────────── */
.sfu-video-grid.view-screenshare {
  display: grid !important;
  grid-template-columns: 1fr 200px;
  grid-template-rows: 1fr;
  gap: 6px;
}
.sfu-video-grid.view-screenshare .sfu-tile-focused {
  grid-column: 1;
  grid-row: 1;
  border: 2px solid var(--color-prime, #00aaff);
  border-radius: 10px;
}
.sfu-video-grid.view-screenshare .sfu-tile-strip {
  grid-column: 2;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
}
/* strip들이 세로로 쌓이게 — 오른쪽 열을 flex 컬럼으로 */
.sfu-video-grid.view-screenshare::before {
  content: none;
}

/* 타일에 클릭 커서 (focus 모드 힌트) */
.sfu-video-grid:not(.view-focus):not(.view-screenshare) .sfu-video-tile:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 2px solid rgba(0,170,255,.5);
  pointer-events: none;
  z-index: 5;
}
.sfu-video-tile { cursor: pointer; }

/* ── 볼륨 믹서 패널 (Voice Widget) ──────────────────────────────── */
.sfu-mixer-details {
  border-top: 1px solid var(--border-color, #333);
  margin: 0;
}
.sfu-mixer-summary {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
}
.sfu-mixer-summary::-webkit-details-marker { display: none; }
.sfu-mixer-summary:hover { color: var(--text-primary, #eee); }
.sfu-mixer-panel {
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
}
.sfu-mixer-empty {
  font-size: 11px;
  color: var(--text-secondary, #888);
  text-align: center;
  padding: 4px 0;
}
.sfu-mixer-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sfu-mixer-nick {
  font-size: 11px;
  color: var(--text-primary, #eee);
  min-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sfu-mixer-slider {
  flex: 1;
  height: 3px;
  accent-color: var(--color-prime, #00aaff);
  cursor: pointer;
}
.sfu-mixer-vol-label {
  font-size: 10px;
  color: var(--text-secondary, #aaa);
  min-width: 32px;
  text-align: right;
}

/* ── 장치 선택 모달 ──────────────────────────────────────────────── */
.sfu-device-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sfuFadeIn .2s ease;
}
.sfu-device-modal-inner {
  background: var(--bg-surface, #1e1e1e);
  border: 1px solid var(--border-color, #333);
  border-radius: 12px;
  width: 340px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  overflow: hidden;
}
.sfu-device-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #eee);
  border-bottom: 1px solid var(--border-color, #333);
}
.sfu-device-close-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  transition: color .15s;
}
.sfu-device-close-btn:hover { color: var(--text-primary, #eee); }
.sfu-device-modal-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sfu-device-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary, #aaa);
}
.sfu-device-label i { font-size: 14px; color: var(--color-prime, #00aaff); }
.sfu-device-select {
  background: var(--bg-input, #2a2a2a);
  border: 1px solid var(--border-color, #444);
  border-radius: 6px;
  color: var(--text-primary, #eee);
  padding: 5px 8px;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.sfu-device-select:focus { border-color: var(--color-prime, #00aaff); }
.sfu-device-modal-footer {
  padding: 10px 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-color, #333);
}
.sfu-device-note {
  font-size: 10px;
  color: var(--text-secondary, #777);
  flex: 1;
  margin-right: 8px;
}
.sfu-device-ok-btn {
  background: var(--color-prime, #00aaff);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  cursor: pointer;
  transition: opacity .15s;
}
.sfu-device-ok-btn:hover { opacity: .85; }

@keyframes sfuFadeIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   [v10.14] Phase 4: VAD 시각화 + 마이크 설정 패널
   ═══════════════════════════════════════════════════════════════════ */

/* ── VAD 레벨 바 ─────────────────────────────────────────────────── */
.sfu-vad-bar-wrap {
  height: 4px;
  background: var(--bg-input, #2a2a2a);
  border-radius: 2px;
  overflow: hidden;
  margin: 2px 0;
}
.sfu-vad-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .06s linear, background .15s;
  background: var(--vad-green, #4caf50);
}
/* Meet 패널 내 VAD 바 (더 얇게, 방 이름 옆에) */
.sfu-vad-meet {
  width: 80px;
  height: 3px;
  margin-left: 8px;
  align-self: center;
}
.sfu-meet-bottom-left {
  display: flex;
  align-items: center;
}

/* ── 마이크 설정 패널 ─────────────────────────────────────────────── */
.sfu-audio-details {
  border-top: 1px solid var(--border-color, #333);
}
.sfu-audio-summary {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
}
.sfu-audio-summary::-webkit-details-marker { display: none; }
.sfu-audio-summary:hover { color: var(--text-primary, #eee); }

.sfu-audio-panel-inner {
  padding: 6px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 증폭 슬라이더 행 */
.sfu-audio-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sfu-audio-label {
  font-size: 11px;
  color: var(--text-secondary, #aaa);
  min-width: 22px;
}
.sfu-audio-slider {
  flex: 1;
  height: 3px;
  accent-color: var(--color-prime, #00aaff);
  cursor: pointer;
}
.sfu-audio-val {
  font-size: 10px;
  color: var(--text-secondary, #aaa);
  min-width: 34px;
  text-align: right;
}

/* AEC / NS / AGC 토글 버튼 */
.sfu-audio-toggles {
  display: flex;
  gap: 5px;
}
.sfu-audio-toggle-btn {
  flex: 1;
  padding: 4px 0;
  font-size: 10px;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid var(--border-color, #444);
  background: transparent;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sfu-audio-toggle-btn:hover {
  border-color: var(--color-prime, #00aaff);
  color: var(--text-primary, #eee);
}
.sfu-audio-toggle-btn.active {
  background: rgba(0,170,255,.15);
  border-color: var(--color-prime, #00aaff);
  color: var(--color-prime, #00aaff);
}

/* ═══════════════════════════════════════════════════════════════════
   [v10.15] ON AIR 배지 (Meet 패널 + Voice 위젯)
   ═══════════════════════════════════════════════════════════════════ */
@keyframes onAirPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}
.sfu-on-air-badge {
  display: none; /* JS가 inline-flex로 켬 */
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  animation: onAirPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.sfu-on-air-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}