/* Thiết kế Giao diện CoFocus Pixel Art Split-Screen */
:root {
  --bg-deep: #0a0908;
  --bg-stage: #100f0d;
  --bg-sidebar: #151413;
  --bg-card: #1c1b19;
  --bg-card-hover: #242220;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-gold: rgba(212, 168, 83, 0.35);
  
  --primary-orange: #e07a38;
  --primary-orange-hover: #f08947;
  --gold-accent: #d4a853;
  --gold-light: #f7e7c4;
  
  --text-main: #f5f0eb;
  --text-body: #d5cdbe;
  --text-muted: #8a8275;
  --text-dim: #605a52;
  
  --focus-green: #38b000;
  --break-amber: #f77f00;
  
  --font-display: 'Noto Serif', Georgia, serif;
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

  /* Con trỏ chuột Pixel Art đồng nhất cho khu vực đồ họa 2.5D */
  --cursor-pixel-default: url('/assets/images/cursor-default.png') 0 0, url('../assets/images/cursor-default.png') 0 0, url('/assets/images/cursor-default.svg') 0 0, default;
  --cursor-pixel-pointer: url('/assets/images/cursor-pointer.png') 6 1, url('../assets/images/cursor-pointer.png') 6 1, url('/assets/images/cursor-pointer.svg') 6 1, pointer;
  --cursor-pixel-grab: url('/assets/images/cursor-grab.png') 8 8, url('../assets/images/cursor-grab.png') 8 8, url('/assets/images/cursor-grab.svg') 8 8, grab;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 168, 83, 0.35) rgba(255, 255, 255, 0.03);
}

/* Tùy biến toàn bộ thanh cuộn (Custom Scrollbars) phong cách Zen Dark sang trọng */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(212, 168, 83, 0.3);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 168, 83, 0.65);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-body);
  touch-action: manipulation;
}

/* 1. KHUNG BỐ CỤC CHIA 2 CỘT CHÍNH (Split Layout) */
#app-layout {
  display: flex;
  width: 100%;
  height: calc(100vh - 54px);
  overflow: hidden;
  background-color: var(--bg-deep);
}

/* CỘT TRÁI: Sân khấu Canvas CoFocus */
#main-stage {
  flex: 1;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background: radial-gradient(circle at center, #1b1916 0%, #0a0908 100%);
  padding: 0;
  overflow: hidden;
  cursor: var(--cursor-pixel-default);
}

/* Khung chứa Canvas: Luôn căn giữa tự nhiên trong khoảng không gian phía trên thanh dock (#stage-bar) */
.canvas-container {
  position: relative;
  /* Kích thước theo CHIỀU RỘNG: luôn giữ đúng 16:9, không bị méo khi có cột trái */
  width: min(calc(100% - 40px), calc((100vh - 158px) * 16 / 9), 1315px);
  aspect-ratio: 16 / 9;
  height: auto;
  margin: auto 20px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--border-gold);
  cursor: var(--cursor-pixel-default);
}

/* Các căn phòng phụ (Breakroom / Lounge / Garden / Courtyard / Island / Stupa) có kích thước 80% so với phòng chính */
.canvas-container.sub-room-map {
  width: min(calc((100% - 40px) * 0.8), calc((100vh - 158px) * 0.8 * 16 / 9), 1052px);
}

#canvas2d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  object-fit: contain;
  cursor: var(--cursor-pixel-default);
}

#canvas2d.hover-interactive,
.canvas-container.hover-interactive,
.canvas-ui-overlay.hover-interactive {
  cursor: var(--cursor-pixel-pointer);
}

/* Lớp phủ UI Vector cho Huy hiệu nhân vật & Bong bóng chat (Typography sắc nét 100%, không vỡ pixel) */
.canvas-ui-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
  cursor: var(--cursor-pixel-default);
}

.char-badge-dom {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  transform: translate(-50%, -100%);
  transition: transform 0.05s ease-out;
  cursor: var(--cursor-pixel-pointer);
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  will-change: transform, left, top;
}

.char-badge-dom.is-me {
  z-index: 12;
}

.char-badge-dom:hover {
  z-index: 25;
}

/* Mũi tên chỉ thị chủ thể lơ lửng trên đầu nhân vật của người dùng (Overhead Indicator Arrow) */
.char-pointer-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  margin-bottom: 2px;
  animation: pointerBobbing 1.6s ease-in-out infinite alternate;
  z-index: 30;
}

.char-pointer-indicator .pointer-text {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #1a1508;
  background: linear-gradient(135deg, #fef08a 0%, #f59e0b 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 1px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 10px rgba(245, 158, 11, 0.6);
  line-height: 1.2;
  white-space: nowrap;
}

.char-pointer-indicator .pointer-arrow {
  font-size: 9px;
  color: #f59e0b;
  margin-top: -3px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
  line-height: 1;
}

@keyframes pointerBobbing {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

.char-badge-dom .char-mood-pill {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  color: #f7fafc;
  background: rgba(26, 26, 26, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 1.5px 7px;
  margin-bottom: 2px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  line-height: 1.25;
}

.char-badge-dom.is-me .char-mood-pill {
  background: rgba(35, 60, 42, 0.94);
  border-color: #68d391;
  color: #e6fffa;
}

.char-badge-dom .char-name-pill {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #f0f0f0;
  background: rgba(18, 18, 20, 0.88);
  border-radius: 4px;
  padding: 1.5px 7px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1.25;
}

/* Huy hiệu [⭐ BẠN] bên trong thanh tên */
.char-name-pill .char-is-me-badge {
  background: #1c1917;
  color: #fbbf24;
  border: 1px solid #f59e0b;
  font-size: 8.5px;
  font-weight: 800;
  padding: 0.5px 4.5px;
  border-radius: 3px;
  margin-right: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

/* Huy hiệu Hoa Anh Đào [🌸] chứng nhân khoảnh khắc cây nở hoa */
.char-name-pill .char-blossom-badge {
  font-size: 11px;
  line-height: 1;
  margin-right: 2px;
  display: inline-block;
  animation: blossomBadgeGlow 2s ease-in-out infinite alternate;
}

@keyframes blossomBadgeGlow {
  0% { transform: scale(1); filter: drop-shadow(0 0 1px rgba(244, 114, 182, 0.4)); }
  100% { transform: scale(1.18); filter: drop-shadow(0 0 5px rgba(244, 114, 182, 0.95)); }
}

.char-badge-dom.is-me .char-name-pill {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #1a1508;
  font-weight: 800;
  border: 1.5px solid #fef08a;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.55), 0 0 16px rgba(245, 158, 11, 0.35);
}

.char-badge-dom.headphones .char-name-pill {
  border: 1px solid #4fd1c5;
}

/* Bong bóng lời nhắn / Chat nhanh truyện tranh */
.char-badge-dom .char-speech-bubble {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #1a1612;
  background: #fffdfa;
  border: 1.5px solid #2d261e;
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 4px;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  position: relative;
  line-height: 1.25;
}

.char-badge-dom .char-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 4px 0 4px;
  border-style: solid;
  border-color: #fffdfa transparent transparent transparent;
}

/* Nút chuyển đổi góc nhìn Camera trên Canvas */
.btn-camera-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: rgba(20, 18, 16, 0.88);
  border: 1px solid rgba(212, 168, 83, 0.45);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--gold-light);
  backdrop-filter: blur(8px);
  cursor: var(--cursor-pixel-pointer);
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
  transition: all 0.2s ease;
  user-select: none;
}

.btn-camera-toggle:hover {
  background: rgba(36, 32, 28, 0.96);
  border-color: var(--gold-accent);
  color: #fff;
  transform: translateY(-1px);
}

.btn-camera-toggle:active {
  transform: translateY(0) scale(0.96);
}

.camera-icon {
  font-size: 13px;
}




/* Thanh công cụ cố định sát đáy khung ngoài, nối liền mạch với cột phải (#sidebar-panel) và tách biệt hoàn toàn với khung Pixel ở giữa */
#stage-bar {
  width: 100%;
  max-width: 100%;
  min-height: 58px;
  margin-top: 0;
  padding: 10px 24px;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  z-index: 15;
  cursor: var(--cursor-pixel-default);
}

.bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.room-tag {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-accent);
}

.occupancy-tag {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Thẻ Pomodoro cả phòng 1 dòng tối giản trên stage-bar */
.room-pomo-tag {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #ffbe53;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
  cursor: var(--cursor-pixel-pointer);
  user-select: none;
}

.room-pomo-tag:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(245, 158, 11, 0.7);
  transform: translateY(-1px);
}

.room-pomo-tag .pomo-mini-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  display: inline-block;
  animation: pomoPulse 1.6s ease-in-out infinite alternate;
  flex-shrink: 0;
}

@keyframes pomoPulse {
  0% { transform: scale(0.9); opacity: 0.65; }
  100% { transform: scale(1.25); opacity: 1; }
}

.room-pomo-tag #room-pomo-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.room-pomo-tag .pomo-time {
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  color: #fff;
}

.room-pomo-tag .pomo-phase-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  letter-spacing: 0.3px;
  line-height: 1.3;
}

/* Khi đang trong ca Giải lao 5 phút cả phòng */
.room-pomo-tag.break {
  background: rgba(72, 187, 120, 0.15);
  border-color: rgba(72, 187, 120, 0.5);
  color: #9ae6b4;
}

.room-pomo-tag.break:hover {
  background: rgba(72, 187, 120, 0.25);
  border-color: rgba(72, 187, 120, 0.75);
}

.room-pomo-tag.break .pomo-mini-dot {
  background: #48bb78;
  box-shadow: 0 0 8px #48bb78;
}

.room-pomo-tag.break .pomo-phase-badge {
  background: rgba(72, 187, 120, 0.25);
  color: #9ae6b4;
  border-color: rgba(72, 187, 120, 0.45);
}

.bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-dock {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 500;
  cursor: var(--cursor-pixel-pointer);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-dock:hover {
  background: var(--bg-card-hover);
  border-color: var(--gold-accent);
}

.btn-dock.active {
  background: rgba(224, 122, 56, 0.2);
  border-color: var(--primary-orange);
  color: #fff;
}

.btn-toggle-panel {
  display: none; /* Ẩn trên desktop vì cột phải đã hiện sẵn */
}

/* 2. CỘT PHẢI: Menu chức năng (Productivity Panel) */
#sidebar-panel {
  width: 380px;
  min-width: 380px;
  max-width: 380px;
  height: 100%;
  background: var(--bg-sidebar);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 12px 14px;
  gap: 10px;
  z-index: 20;
}

/* Thanh cuộn mảnh thanh lịch */
#sidebar-panel::-webkit-scrollbar {
  width: 6px;
}
#sidebar-panel::-webkit-scrollbar-track {
  background: transparent;
}
#sidebar-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
#sidebar-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Thẻ chức năng Panel Card */
.panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Thẻ Pomodoro Card */
.pomodoro-card {
  background: linear-gradient(145deg, #22201d 0%, #1a1816 100%);
  border-color: rgba(224, 122, 56, 0.3);
}

.phase-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.phase-pill.focus.running {
  background: rgba(224, 122, 56, 0.22);
  border-color: rgba(245, 158, 44, 0.75);
  color: #ffbe53;
  box-shadow: 0 0 10px rgba(245, 158, 44, 0.35);
  animation: pulsePomoBadge 1.8s ease-in-out infinite alternate;
}
.phase-pill.focus.idle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text-muted);
}
.phase-pill.focus.paused {
  background: rgba(237, 137, 54, 0.15);
  border-color: rgba(237, 137, 54, 0.5);
  color: #fbd38d;
}
.phase-pill.break.running {
  background: rgba(72, 187, 120, 0.22);
  border-color: rgba(72, 187, 120, 0.75);
  color: #9ae6b4;
  box-shadow: 0 0 10px rgba(72, 187, 120, 0.35);
  animation: pulsePomoBadge 1.8s ease-in-out infinite alternate;
}
.phase-pill.break.idle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text-muted);
}
.phase-pill.break.paused {
  background: rgba(72, 187, 120, 0.12);
  border-color: rgba(72, 187, 120, 0.4);
  color: #c6f6d5;
}

@keyframes pulsePomoBadge {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.03); filter: brightness(1.2); }
}

.card-subtitle-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  margin: 2px 0 6px;
  gap: 6px;
}

.btn-sync-room-pomo {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #ffbe53;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
}

.btn-sync-room-pomo:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  color: #fff;
  transform: translateY(-1px);
}

.pomodoro-clock {
  font-size: 42px;
  font-weight: 700;
  color: var(--text-main);
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1.5px;
  margin: 4px 0 6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.pomodoro-controls {
  display: flex;
  gap: 8px;
}

.btn-pomodoro-main {
  flex: 1;
  background: var(--primary-orange);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(224, 122, 56, 0.35);
}
.btn-pomodoro-main:hover {
  background: var(--primary-orange-hover);
  transform: translateY(-1px);
}
.btn-pomodoro-main.running {
  background: #2d261e;
  border-color: rgba(245, 158, 44, 0.6);
  color: #ffbe53;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.btn-pomodoro-main.running:hover {
  background: #393126;
  border-color: #f59e0b;
  color: #fff;
}

.btn-pomodoro-sub {
  width: 40px;
  background: #282623;
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-pomodoro-sub:hover {
  background: #33302c;
  color: #fff;
}

/* Thẻ Hồ Sơ Nhân Vật Thu Gọn & Tinh Tế (Compact Profile Header) */
.profile-compact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 0 5px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-user-info {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.profile-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  image-rendering: pixelated;
  flex-shrink: 0;
}

.profile-user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-user-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.profile-user-sub {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
  margin-top: 1px;
}

.user-id-badge {
  font-size: 10px;
  font-family: monospace;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  padding: 1.5px 5px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

/* Form tự nhập lời nhắn / trạng thái tùy chỉnh (thu gọn) */
.custom-chat-form {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.custom-chat-form input {
  flex: 1;
  background: #141312;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  padding: 3px 8px;
  color: #fff;
  font-size: 11px;
  font-family: inherit;
  outline: none;
  height: 26px;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.custom-chat-form input:focus {
  border-color: var(--primary-orange);
}

.btn-send-chat {
  background: var(--primary-orange);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  height: 26px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-send-chat:hover {
  background: var(--primary-orange-hover);
}

/* Thẻ Mood Chips dạng lưới 2 dòng gọn gàng, zero-scroll không cần cuộn/vuốt */
.mood-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.mood-chip {
  background: #201e1b;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 4px 2px;
  font-size: 10px;
  color: var(--text-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.mood-chip span {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.mood-chip:hover {
  background: #2a2723;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.mood-chip.selected {
  background: rgba(224, 122, 56, 0.2);
  border-color: var(--primary-orange);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(224, 122, 56, 0.25);
}

/* Sơ đồ Streak truy cập web mỗi nửa ngày (Heatmap Git Contribution) */
.streak-heatmap-section {
  background: #141311;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 5px 8px 4px;
  margin-top: 2px;
}

.streak-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.streak-title-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.streak-icon {
  font-size: 11px;
}

.streak-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-heading, #fff);
  text-transform: uppercase;
}

.streak-badge {
  background: rgba(224, 122, 56, 0.15);
  color: #ff9d5c;
  border: 1px solid rgba(224, 122, 56, 0.35);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

/* Khung lưới Heatmap */
.heatmap-container {
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 168, 83, 0.4) rgba(255, 255, 255, 0.04);
}

.heatmap-container::-webkit-scrollbar {
  height: 4px;
}

.heatmap-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
}

.heatmap-container::-webkit-scrollbar-thumb {
  background: rgba(212, 168, 83, 0.35);
  border-radius: 999px;
}

.heatmap-container::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 168, 83, 0.7);
}

.heatmap-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
}

.heatmap-row {
  display: flex;
  align-items: center;
  gap: 2.5px;
}

.heatmap-header-row {
  margin-bottom: 1px;
}

.heatmap-row-label {
  width: 16px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  user-select: none;
  flex-shrink: 0;
}

.heatmap-col-header {
  width: 12px;
  text-align: center;
  font-size: 8.5px;
  color: var(--text-muted);
  font-weight: 500;
  user-select: none;
  flex-shrink: 0;
}

.heatmap-col-header.is-today-label {
  color: #ff9d5c;
  font-weight: 700;
}

.heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 2.5px;
  background: #201e1b;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  flex-shrink: 0;
}

.heatmap-cell:hover {
  transform: scale(1.3);
  z-index: 10;
  border-color: #fff !important;
}

/* 5 Cấp độ màu xanh Git contribution */
.heatmap-cell.level-0 {
  background: #201e1b;
  border-color: rgba(255, 255, 255, 0.05);
}

.heatmap-cell.level-1 {
  background: #0e4429;
  border-color: rgba(14, 68, 41, 0.85);
}

.heatmap-cell.level-2 {
  background: #006d32;
  border-color: rgba(0, 109, 50, 0.85);
}

.heatmap-cell.level-3 {
  background: #26a641;
  border-color: rgba(38, 166, 65, 0.9);
}

.heatmap-cell.level-4 {
  background: #39d353;
  border-color: rgba(57, 211, 83, 0.95);
  box-shadow: 0 0 5px rgba(57, 211, 83, 0.45);
}

/* Ca đang diễn ra hiện tại: viền xung nhịp xanh lá nổi bật */
.heatmap-cell.is-current {
  outline: 1.5px solid #39d353;
  outline-offset: 1px;
  animation: cellPulse 2s infinite ease-in-out;
}

@keyframes cellPulse {
  0%, 100% {
    box-shadow: 0 0 0 1px #39d353, 0 0 5px rgba(57, 211, 83, 0.6);
  }
  50% {
    box-shadow: 0 0 0 2px #39d353, 0 0 9px rgba(57, 211, 83, 0.9);
  }
}

/* Chú giải & Thống kê dưới chân Heatmap */
.heatmap-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 9.5px;
  color: var(--text-muted);
}

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

.legend-label {
  font-size: 9px;
  color: var(--text-muted);
  margin: 0 1px;
}

.legend-cell {
  width: 8.5px;
  height: 8.5px;
  border-radius: 2px;
  display: inline-block;
}

.legend-cell.level-0 { background: #201e1b; border: 1px solid rgba(255, 255, 255, 0.05); }
.legend-cell.level-1 { background: #0e4429; }
.legend-cell.level-2 { background: #006d32; }
.legend-cell.level-3 { background: #26a641; }
.legend-cell.level-4 { background: #39d353; }

/* Tooltip tùy chỉnh hiển thị thông tin khi hover ô heatmap */
.heatmap-tooltip {
  position: fixed;
  background: #1c1b18;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  display: none;
  white-space: nowrap;
  line-height: 1.35;
}

.heatmap-tooltip-title {
  font-weight: 600;
  color: #ff9d5c;
  margin-bottom: 2px;
}

.heatmap-tooltip-desc {
  font-size: 10.5px;
  color: #e0e0e0;
}

/* Thẻ To-Do Priorities */
.tasks-counter {
  font-size: 12px;
  color: var(--text-muted);
}

.tasks-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 190px;
  overflow-y: auto;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-main);
  transition: all 0.2s ease;
}

.task-item:hover {
  background: rgba(0, 0, 0, 0.3);
}

.task-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.task-checkbox:checked {
  background-color: var(--primary-orange);
  border-color: var(--primary-orange);
}

.task-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.task-text {
  flex: 1;
  word-break: break-word;
}

.task-item.completed .task-text {
  text-decoration: line-through;
  color: var(--text-dim);
}

.task-delete {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 0 4px;
}

.task-item:hover .task-delete {
  opacity: 1;
}

.task-delete:hover {
  color: #ff6b6b;
}

.add-task-form {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.add-task-form input {
  flex: 1;
  background: #141312;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 12px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}

.add-task-form input:focus {
  border-color: var(--primary-orange);
}

.btn-add-task {
  width: 34px;
  background: #2a2724;
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-add-task:hover {
  background: var(--primary-orange);
  color: #fff;
}

/* Thẻ Soundscape Mixer */
.btn-test-chime {
  background: rgba(212, 168, 83, 0.12);
  color: var(--gold-light);
  border: 1px solid rgba(212, 168, 83, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-test-chime:hover {
  background: rgba(212, 168, 83, 0.25);
}

.sound-sliders {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slider-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.slider-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-body);
}

.slider-val {
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.sound-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  background: #262421;
  border-radius: 4px;
  outline: none;
}

.sound-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold-accent);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  transition: transform 0.1s ease;
}

.sound-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.sound-sliders.hidden,
.sound-header-actions.hidden,
.btn-test-chime.hidden {
  display: none !important;
}

.sound-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.headphones-box {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.headphones-box:has(+ .sound-sliders.hidden) {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.btn-ambient-tool {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-body);
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.2;
}

.btn-ambient-tool:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: var(--gold-accent);
}

.btn-ambient-tool:active {
  transform: scale(0.95);
}

.btn-ambient-tool.btn-active-muted {
  background: rgba(229, 62, 62, 0.2);
  border-color: rgba(229, 62, 62, 0.6);
  color: #feb2b2;
}

/* Khi đeo tai nghe riêng: Làm mờ nhẹ hàng nhạc nền phòng vì đang nhường chỗ cho tai nghe */
.row-bgmusic-dimmed {
  opacity: 0.45;
  filter: grayscale(0.8);
  transition: opacity 0.2s ease;
}

.toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.toggle-title {
  font-size: 13px;
  color: var(--text-body);
}

.toggle-input {
  display: none;
}

.toggle-slider {
  width: 36px;
  height: 20px;
  background-color: #262421;
  border-radius: 20px;
  position: relative;
  transition: 0.3s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background-color: #fff;
  transition: 0.3s;
}

.toggle-input:checked + .toggle-slider {
  background-color: var(--focus-green);
}

.toggle-input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

/* ========================================================
   MINI PLAYER CHO CHẾ ĐỘ TAI NGHE RIÊNG (YOUTUBE)
   ======================================================== */
.headphones-mini-player {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: slideDownFade 0.22s ease-out;
}

.headphones-mini-player.hidden {
  display: none !important;
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.yt-input-row {
  display: flex;
  gap: 5px;
  align-items: center;
}

.yt-url-input {
  flex: 1;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-main);
  outline: none;
  font-family: var(--font-body);
  height: 26px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 0;
}

.yt-url-input:focus {
  border-color: var(--gold-accent);
  box-shadow: 0 0 6px rgba(212, 168, 83, 0.2);
}

.yt-url-input::placeholder {
  color: var(--text-dim);
  font-size: 10.5px;
}

.btn-yt-play {
  background: var(--gold-accent);
  color: #100f0d;
  border: none;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  height: 26px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}

.btn-yt-play:hover {
  background: var(--gold-light);
  transform: scale(1.04);
}

.btn-yt-play:active {
  transform: scale(0.96);
}

/* Header tiêu đề khu vực Gợi ý & Kênh đã lưu */
.yt-presets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1px;
  padding: 0 1px;
}

.yt-presets-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.btn-toggle-presets {
  background: transparent;
  border: none;
  color: var(--gold-accent);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 4px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.btn-toggle-presets:hover {
  background: rgba(212, 168, 83, 0.12);
  color: var(--gold-light);
}

/* Khung chứa các nút Preset & Kênh cá nhân đã lưu */
.yt-presets-bar {
  display: flex;
  gap: 4px;
  transition: max-height 0.25s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 168, 83, 0.45) rgba(255, 255, 255, 0.04);
}

/* Chế độ thu hẹp: cuộn ngang 1 dòng gọn gàng */
.yt-presets-bar:not(.expanded) {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 26px;
  padding: 1px 1px 3px 1px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Chế độ mở rộng (Mặc định): tự động xuống dòng dàn trải đầy đủ, không phải cuộn ngang */
.yt-presets-bar.expanded {
  flex-wrap: wrap;
  max-height: 96px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1px 1px 3px 1px;
}

.yt-presets-bar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.yt-presets-bar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  margin: 0 4px;
}

.yt-presets-bar::-webkit-scrollbar-thumb {
  background: rgba(212, 168, 83, 0.4);
  border-radius: 999px;
  transition: background 0.2s ease;
}

.yt-presets-bar::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 168, 83, 0.75);
}

.btn-yt-preset {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-body);
  border-radius: 6px;
  padding: 2.5px 7px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-body);
  flex-shrink: 0;
  user-select: none;
}

.btn-yt-preset:hover {
  background: rgba(212, 168, 83, 0.18);
  border-color: var(--gold-accent);
  color: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.btn-yt-preset:active {
  transform: scale(0.96);
}

/* Container danh sách kênh cá nhân người dùng đã lưu */
.user-saved-links-list {
  display: contents;
}

/* Nút kênh cá nhân đã lưu kèm nút xoá x */
.saved-yt-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(212, 168, 83, 0.12);
  border: 1px solid rgba(212, 168, 83, 0.35);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.15s ease;
  flex-shrink: 0;
  max-width: 100%;
}

.saved-yt-chip:hover {
  background: rgba(212, 168, 83, 0.22);
  border-color: var(--gold-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.btn-saved-yt {
  background: transparent;
  border: none;
  color: var(--gold-light, #f7d58b);
  padding: 2.5px 4px 2.5px 6px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 125px;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-saved-yt:active {
  transform: scale(0.97);
}

.btn-remove-saved-yt {
  background: transparent;
  border: none;
  color: var(--text-dim, #888);
  padding: 2.5px 5px 2.5px 2px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-remove-saved-yt:hover {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.15);
}

.yt-frame-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.yt-frame-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.yt-empty-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  padding: 12px;
}

.yt-hint-icon {
  font-size: 20px;
  opacity: 0.6;
}

.yt-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}

.yt-status-text {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}

.btn-yt-stop {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 10.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-body);
}

.btn-yt-stop:hover {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.4);
  background: rgba(255, 107, 107, 0.1);
}

.yt-controls-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.btn-yt-open-fallback {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(212, 168, 83, 0.15);
  border: 1px solid rgba(212, 168, 83, 0.5);
  color: var(--gold-light, #f2d98b);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.btn-yt-open-fallback:hover {
  background: rgba(212, 168, 83, 0.28);
  transform: translateY(-1px);
}

/* Thẻ Đồng nghiệp trong phòng tinh gọn & công thái học */
.colleagues-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
}

.colleague-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: all 0.15s ease;
  cursor: pointer;
  user-select: none;
}

.colleague-item:hover {
  background: rgba(212, 168, 83, 0.08);
  border-color: rgba(212, 168, 83, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.colleague-item.is-me {
  background: rgba(212, 168, 83, 0.12);
  border-color: rgba(212, 168, 83, 0.28);
  cursor: default;
}

.colleague-thumb {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  image-rendering: pixelated;
  background: #141210;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.colleague-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.colleague-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

/* Nhãn "cư dân" (NPC) — hiển thị tinh tế, có tooltip giải thích */
.colleague-tag-resident {
  font-size: 9px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--text-dim, #9a9a9a);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Ghi chú công khai về cư dân mô phỏng (mức công khai B) */
.resident-note {
  margin: 8px 2px 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim, #8a8a8a);
  opacity: 0.75;
}

/* Đặt trong Sảnh: dưới lưới phòng */
.lobby-resident-note {
  margin: 12px 4px 2px;
  text-align: center;
  font-size: 10.5px;
  opacity: 0.7;
}

.colleague-name {
  font-size: 11.5px;
  font-weight: 600;
  color: #f5f5f4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.colleague-name.is-me {
  color: var(--gold-accent);
}

.colleague-badge {
  font-size: 9.5px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(224, 122, 56, 0.16);
  border: 1px solid rgba(224, 122, 56, 0.35);
  color: #fdba74;
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.colleague-row-bottom {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #a8a29e;
  min-width: 0;
}

.colleague-seat {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.colleague-focus-time {
  font-size: 9.5px;
  font-weight: 600;
  color: #fb923c;
  background: rgba(251, 146, 60, 0.12);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1.25;
}

.btn-locate-colleague {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
}

.btn-locate-colleague:hover {
  background: rgba(212, 168, 83, 0.28);
  border-color: var(--gold-accent);
  transform: scale(1.12);
  box-shadow: 0 0 10px rgba(212, 168, 83, 0.45);
}

.btn-locate-colleague:active {
  transform: scale(0.95);
}

/* Hiệu ứng beacon hào quang khi tìm đến đồng nghiệp */
@keyframes beaconBadgePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
  }
  100% {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(255, 215, 0, 1);
  }
}

.char-badge-dom.highlighted-colleague .char-name-badge {
  border-color: #ffd700 !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.9) !important;
  animation: beaconBadgePulse 0.7s ease-in-out infinite alternate !important;
}

.panel-footer {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.5;
  padding: 4px 0 12px;
}

/* 3. THÔNG BÁO TOAST */
#toast {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  background: rgba(18, 16, 14, 0.94);
  border: 1px solid var(--gold-accent);
  color: var(--gold-light);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
}

#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* 4. VIRTUAL JOYSTICK & MOBILE CONTROLLER (DI ĐỘNG) */
#mobile-controller-bar {
  display: none;
}

.drawer-header {
  display: none;
}

#sidebar-backdrop,
#rail-backdrop {
  display: none;
}

#mobile-audio-backdrop,
.mobile-sheet-backdrop {
  display: none;
}

#mobile-audio-sheet,
.mobile-audio-sheet {
  display: none;
}

#mobile-mini-player-bar,
.mobile-mini-player-bar {
  display: none !important;
}

/* Joystick 360 độ phong cách Zen Analog */
.joystick-container {
  position: relative;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.joystick-base {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(38, 34, 28, 0.75) 0%, rgba(18, 16, 14, 0.92) 100%);
  border: 2px solid rgba(212, 168, 83, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), inset 0 0 16px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.joystick-base.active {
  border-color: var(--gold-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 15px rgba(212, 168, 83, 0.3), inset 0 0 16px rgba(0, 0, 0, 0.5);
}

.joystick-decor-ring {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 168, 83, 0.2);
  pointer-events: none;
}

/* 4 vạch chỉ hướng trục mờ trên joystick */
.joystick-axis-marker {
  position: absolute;
  font-size: 8px;
  color: rgba(212, 168, 83, 0.4);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.marker-up { top: 6px; left: 50%; transform: translateX(-50%); }
.marker-down { bottom: 6px; left: 50%; transform: translateX(-50%); }
.marker-left { left: 7px; top: 50%; transform: translateY(-50%); }
.marker-right { right: 7px; top: 50%; transform: translateY(-50%); }

.joystick-stick {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #504434 0%, #29241e 65%, #181512 100%);
  border: 2px solid var(--gold-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85), inset 0 2px 3px rgba(255, 255, 255, 0.25);
  top: calc(50% - 23px);
  left: calc(50% - 23px);
  transform: translate(0px, 0px);
  transition: transform 0.08s ease-out;
  pointer-events: none;
}

.joystick-base.active .joystick-stick {
  transition: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.9), 0 0 10px rgba(212, 168, 83, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.35);
  filter: brightness(1.15);
}

.joystick-stick::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(212, 168, 83, 0.25);
  border: 1px solid rgba(212, 168, 83, 0.6);
}

/* Smart Action Dock Group (Mobile) */
.mobile-action-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.btn-mobile-action {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  background: rgba(42, 36, 28, 0.8);
  border: 1px solid rgba(212, 168, 83, 0.35);
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
  position: relative;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.btn-mobile-action:active,
.btn-mobile-action.active {
  transform: scale(0.94);
  background: rgba(212, 168, 83, 0.25);
  border-color: var(--gold-accent);
}

.btn-mobile-action .action-icon {
  font-size: 15px;
  line-height: 1;
}

.btn-mobile-action .action-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--gold-light);
  white-space: nowrap;
}

.btn-mobile-action#btn-mobile-sit.is-seated {
  background: rgba(46, 125, 50, 0.35);
  border-color: rgba(76, 175, 80, 0.7);
}

.btn-mobile-action#btn-mobile-sit.is-seated .action-label {
  color: #a5d6a7;
}

.btn-mobile-action.btn-mobile-leave {
  grid-column: span 2;
  border-color: rgba(217, 83, 79, 0.4);
  background: rgba(60, 24, 24, 0.55);
}

.btn-mobile-action.btn-mobile-leave .action-label {
  color: #ffb4b4;
}

/* Chấm đèn hiệu ứng nhấp nháy khi đang phát âm thanh */
.mobile-audio-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  pointer-events: none;
}

.mobile-audio-indicator.playing {
  background: #4caf50;
  box-shadow: 0 0 6px #4caf50;
  animation: pulse-audio-dot 1.4s infinite ease-in-out;
}

@keyframes pulse-audio-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}

/* Lớp phủ Backdrop cho Bottom Sheet Âm Thanh */
.mobile-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1060;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-sheet-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Bottom Sheet Âm Thanh & YouTube */
.mobile-audio-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 82dvh;
  min-height: 48dvh;
  height: auto;
  background: #181512;
  border-top: 2px solid var(--gold-accent);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.88);
  z-index: 1070;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.mobile-audio-sheet.sheet-open {
  transform: translateY(0);
}

.sheet-drag-handle {
  width: 100%;
  padding: 10px 0 6px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  touch-action: none;
}

.sheet-drag-pill {
  width: 44px;
  height: 4.5px;
  border-radius: 3px;
  background: rgba(212, 168, 83, 0.45);
  transition: background 0.2s ease, width 0.2s ease;
}

.sheet-drag-handle:active .sheet-drag-pill {
  background: var(--gold-accent);
  width: 54px;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.sheet-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sheet-icon {
  font-size: 18px;
}

.sheet-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--gold-accent);
}

.btn-sheet-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: var(--text-light);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sheet-close:active {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(0.95);
}

.mobile-audio-sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 20px 14px;
}

.mobile-audio-sheet-body #sound-panel-card {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.mobile-audio-sheet-body #sound-panel-card .card-header {
  display: none;
}

/* Thanh phát nhạc Mini Floating Bar trên Mobile */
.mobile-mini-player-bar {
  position: absolute;
  bottom: 96px;
  left: 12px;
  right: 12px;
  max-width: 480px;
  margin: 0 auto;
  height: 44px;
  background: rgba(26, 22, 18, 0.94);
  border: 1px solid var(--gold-accent);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 12px rgba(212, 168, 83, 0.25);
  z-index: 1030;
  padding: 0 8px 0 10px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  animation: slide-up-mini-bar 0.25s ease-out;
}

.mobile-mini-player-bar.hidden {
  display: none !important;
}

@keyframes slide-up-mini-bar {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.mini-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.mini-bar-disc-glow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 168, 83, 0.4) 0%, rgba(30, 24, 18, 0.9) 100%);
  border: 1px solid var(--gold-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: disc-rotate 6s linear infinite;
}

@keyframes disc-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.mini-bar-icon {
  font-size: 14px;
  line-height: 1;
}

.mini-bar-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.mini-bar-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.mini-bar-sub {
  font-size: 9.5px;
  color: var(--gold-accent);
  line-height: 1.1;
  opacity: 0.85;
}

.mini-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-mini-bar-action {
  height: 28px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(212, 168, 83, 0.4);
  background: rgba(45, 36, 26, 0.8);
  color: var(--gold-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.btn-mini-bar-action:active {
  background: var(--gold-accent);
  color: #1a1610;
  transform: scale(0.95);
}



/* 5. MODAL SẢNH CHÀO (LOBBY MODAL) */
#lobby-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 16px;
}

.modal-card {
  background: #181614;
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-card h1 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold-accent);
}

.modal-card p {
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.5;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.form-group input[type="text"] {
  background: #100f0e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.form-group input[type="text"]:focus {
  border-color: var(--gold-accent);
}

.avatar-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.avatar-scroll-hint {
  font-size: 10.5px;
  color: var(--gold-accent);
  opacity: 0.85;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.avatar-picker-scroll-container {
  display: grid;
  grid-template-columns: repeat(10, calc((100% - 40px) / 6));
  grid-template-rows: repeat(2, auto);
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.avatar-picker-scroll-container::-webkit-scrollbar {
  height: 5px;
}

.avatar-picker-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(212, 168, 83, 0.35);
  border-radius: 999px;
}

.avatar-choice {
  aspect-ratio: 1 / 1.15;
  background: #1c1a17;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: var(--cursor-pixel-pointer);
  transition: all 0.2s ease;
  user-select: none;
}

.avatar-choice:hover {
  background: #25221e;
  border-color: rgba(212, 168, 83, 0.4);
}

.avatar-choice.selected {
  background: rgba(212, 168, 83, 0.16);
  border-color: var(--gold-accent);
  box-shadow: 0 0 10px rgba(212, 168, 83, 0.3);
}

.avatar-choice img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  image-rendering: pixelated;
  background: #121110;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1px;
}

/* Khung xem trước nhân vật to lớn nổi bật & Trạng thái nằm ngang bên cạnh */
.lobby-preview-and-mood-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: 10px;
}

.lobby-character-showcase-box {
  flex: 0 0 124px;
  background: rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(212, 168, 83, 0.35);
  border-radius: 12px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.4);
  cursor: var(--cursor-pixel-default);
}

.preview-sprite-stage-large {
  position: relative;
  width: 96px;
  height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(212, 168, 83, 0.28) 0%, rgba(212, 168, 83, 0.08) 52%, transparent 74%);
  border-radius: 10px;
}

#lobby-character-preview-img {
  width: 62px;
  height: 86px;
  object-fit: contain;
  image-rendering: pixelated;
  z-index: 2;
  transform-origin: bottom center;
}

.character-breathe-anim {
  animation: charPreviewBreathe 2.4s ease-in-out infinite alternate;
}

@keyframes charPreviewBreathe {
  0% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-3px) scaleY(1.04); }
  100% { transform: translateY(0) scaleY(1); }
}

.character-preview-shadow-large {
  width: 38px;
  height: 8px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, transparent 80%);
  border-radius: 50%;
  margin-top: -4px;
  z-index: 1;
}

.preview-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.preview-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold-accent);
}

.preview-badge {
  font-size: 9.5px;
  background: rgba(56, 176, 0, 0.16);
  color: #48bb78;
  border: 1px solid rgba(72, 187, 120, 0.35);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
}

.preview-current-mood-tag {
  font-size: 10px;
  font-weight: 600;
  color: #ffbe53;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 999px;
  padding: 2.5px 8px;
  margin-top: 5px;
  text-align: center;
  width: 100%;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

/* Hòm thư góp ý / lời nhắn người dùng ở cột Hồ Sơ */
.lobby-feedback-box {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lobby-feedback-box label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-accent);
}

.lobby-feedback-box textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  background: #121110;
  color: #f5efe6;
  border: 1px solid rgba(212, 168, 83, 0.3);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
}

.lobby-feedback-box textarea:focus {
  border-color: var(--gold-accent);
}

.lobby-feedback-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lobby-feedback-head .btn-send-feedback {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: #1a1a1a;
  background: var(--gold-accent);
  border: none;
  border-radius: 7px;
  cursor: var(--cursor-pixel-pointer);
  transition: filter 0.15s ease, transform 0.1s ease;
}

.lobby-feedback-head .btn-send-feedback:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.lobby-feedback-head .btn-send-feedback:active {
  transform: translateY(0);
}

/* Phần lựa chọn tâm thế & mục tiêu tự do */
.lobby-mood-section {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lobby-mood-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.custom-mood-input-card {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1c1a17;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 5px 8px;
  transition: all 0.2s ease;
}

.custom-mood-input-card:focus-within,
.custom-mood-input-card.selected {
  border-color: var(--primary-orange);
  background: rgba(224, 122, 56, 0.16);
  box-shadow: 0 0 10px rgba(224, 122, 56, 0.25);
}

.custom-mood-icon {
  font-size: 12px;
  flex-shrink: 0;
}

.custom-mood-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 11px;
  font-family: inherit;
  width: 100%;
  outline: none;
}

.custom-mood-input::placeholder {
  color: #78716c;
}

.mood-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.mood-pill {
  background: #1c1a17;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11px;
  color: var(--text-body);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mood-pill:hover {
  background: #25221e;
}

.mood-pill.selected {
  background: rgba(224, 122, 56, 0.2);
  border-color: var(--primary-orange);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(224, 122, 56, 0.25);
}

.btn-primary {
  background: linear-gradient(135deg, #d4a853 0%, #b88628 100%);
  color: #1a1610;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(212, 168, 83, 0.3);
}
.btn-primary:hover {
  filter: brightness(1.1);
}

/* 6. MEDIA QUERIES (MOBILE / TABLET NHỎ) */
@media (max-width: 900px) {
  #app-layout {
    flex-direction: column;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
  }

  #main-stage {
    flex: none;
    height: auto;
    width: 100%;
    min-height: auto;
    padding: 10px 10px 20px 10px;
    justify-content: flex-start;
  }

  .canvas-container {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: none;
    border-radius: 10px;
  }

  #controls-hint {
    display: none;
  }

  #stage-bar {
    order: 1;
    width: 100%;
    max-width: 100%;
    min-height: auto;
    padding: 0;
    background: transparent;
    border-top: none;
    box-shadow: none;
    margin-top: 0;
    margin-bottom: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-shrink: 0;
  }

  .bar-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 6px;
    flex-wrap: nowrap;
  }

  .room-tag {
    font-size: 11px;
    padding: 5px 9px;
    white-space: nowrap;
  }

  .occupancy-tag {
    font-size: 11px;
    padding: 5px 8px;
    white-space: nowrap;
  }

  .room-pomo-tag {
    font-size: 11px;
    padding: 4px 8px;
    gap: 5px;
    white-space: nowrap;
  }

  .room-pomo-tag .pomo-time {
    font-size: 11.5px;
  }

  .room-pomo-tag .pomo-phase-badge {
    font-size: 9px;
    padding: 1px 4px;
  }

  .bar-right {
    display: none !important;
  }

  /* 1. KHUNG CHÍNH MOBILE: Không bị cuộn trang, chia 3 phần cân đối */
  #app-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 54px);
    height: calc(100dvh - 54px);
    overflow: hidden;
    position: relative;
  }

  #main-stage {
    flex: 1;
    height: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 8px 12px 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* 2. BẢN ĐỒ HIỂN THỊ VỚI CAMERA BÁM THEO NHÂN VẬT (MOBILE FOLLOW-CAMERA) */
  .canvas-container {
    order: 2;
    width: 100%;
    flex: 1;
    min-height: 240px;
    max-height: calc(100dvh - 165px);
    height: auto;
    aspect-ratio: auto; /* Mở rộng tối ưu theo chiều dọc để bao quát khu vực xung quanh nhân vật */
    margin: 4px 0;
    border-radius: 14px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--border-gold);
    position: relative;
    overflow: hidden;
  }

  /* Khi người dùng chuyển sang góc nhìn toàn cảnh (Overview) trên Mobile */
  .canvas-container.overview-mode {
    flex: none;
    aspect-ratio: 16 / 9;
    max-width: min(calc((100dvh - 210px) * (16 / 9)), 100%);
    margin: auto 0;
  }

  .canvas-container.overview-mode.sub-room-map {
    width: 80%;
    max-width: calc(min(calc((100dvh - 210px) * (16 / 9)), 100%) * 0.8);
  }

  #canvas2d {
    width: 100%;
    height: 100%;
    object-fit: fill;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    touch-action: none;
    user-select: none;
  }

  #controls-hint {
    display: none;
  }

  /* 4. CỤM ĐIỀU KHIỂN DƯỚI CÙNG (SMART ACTION DOCK) */
  #mobile-controller-bar {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 500px;
    margin-top: 4px;
    padding: 6px 10px;
    background: rgba(22, 20, 18, 0.92);
    border: 1px solid rgba(212, 168, 83, 0.35);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
    flex-shrink: 0;
    gap: 8px;
    box-sizing: border-box;
  }

  .joystick-container {
    width: 86px;
    height: 86px;
    flex-shrink: 0;
  }

  .joystick-base {
    width: 86px;
    height: 86px;
  }

  .joystick-stick {
    width: 38px;
    height: 38px;
    top: calc(50% - 19px);
    left: calc(50% - 19px);
  }

  .joystick-decor-ring {
    width: 56px;
    height: 56px;
  }

  #mobile-audio-backdrop.mobile-sheet-backdrop {
    display: block;
  }

  #mobile-audio-sheet.mobile-audio-sheet {
    display: flex;
  }

  #mobile-mini-player-bar.mobile-mini-player-bar {
    display: flex;
  }

  #mobile-mini-player-bar.hidden {
    display: none !important;
  }

  /* 5. DRAWER NGANG CHO MENU CHỨC NĂNG (OFF-CANVAS SIDE DRAWER) */
  #sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #sidebar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  #sidebar-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 380px);
    height: 100%;
    height: 100dvh;
    background: #161412;
    border-left: 1px solid var(--border-gold);
    border-top: none;
    z-index: 1050;
    padding: 16px;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.85);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #sidebar-panel.drawer-open {
    transform: translateX(0);
  }

  /* Header Drawer */
  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }

  .drawer-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .drawer-title-icon {
    font-size: 18px;
  }

  .drawer-title-text {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--gold-accent);
  }

  .btn-drawer-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-main);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-drawer-close:active {
    background: rgba(224, 80, 56, 0.3);
    border-color: #ff5a5a;
    color: #fff;
  }
}

@media (max-width: 420px) {
  .joystick-container {
    width: 96px;
    height: 96px;
  }

  .joystick-base {
    width: 96px;
    height: 96px;
  }

  .joystick-stick {
    width: 42px;
    height: 42px;
    top: calc(50% - 21px);
    left: calc(50% - 21px);
  }

  .btn-mobile-action {
    width: 66px;
    height: 66px;
  }

  .btn-mobile-action .action-icon {
    font-size: 20px;
  }

  .room-tag, .occupancy-tag, .room-pomo-tag {
    font-size: 10px;
    padding: 4px 6px;
  }
}

/* ==========================================================================
   6. NÚT CHUYỂN BẢN ĐỒ & LỚP PHỦ CHUYỂN CẢNH (ZEN GARDEN & MAP TRANSITION)
   ========================================================================== */

/* Nút Ra Vườn Thiền trên Stage Bar */
.btn-switch-map {
  background: rgba(46, 117, 89, 0.25);
  border: 1px solid rgba(104, 211, 145, 0.45);
  color: #9ae6b4;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-switch-map:hover {
  background: rgba(46, 117, 89, 0.45);
  border-color: #68d391;
  color: #fff;
  box-shadow: 0 0 12px rgba(104, 211, 145, 0.35);
  transform: translateY(-1px);
}

.btn-switch-map.in-garden {
  background: rgba(184, 80, 56, 0.25);
  border-color: rgba(246, 173, 85, 0.5);
  color: #fbd38d;
}

.btn-switch-map.in-garden:hover {
  background: rgba(184, 80, 56, 0.45);
  border-color: #f6ad55;
  color: #fff;
  box-shadow: 0 0 12px rgba(246, 173, 85, 0.35);
}

/* Nút Portal trên Mobile */
.btn-mobile-portal {
  background: rgba(30, 45, 38, 0.95);
  border-color: rgba(104, 211, 145, 0.5);
}

.btn-mobile-portal:active {
  background: rgba(46, 117, 89, 0.7);
  border-color: #68d391;
  transform: scale(0.94);
}

/* Badge khu vực trong danh sách đồng nghiệp */
.colleague-map-tag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.08);
  color: #e7e5e4;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.colleague-map-tag.garden,
.colleague-map-tag.silicon_lounge,
.colleague-map-tag.neko_balcony,
.colleague-map-tag.science_courtyard {
  background: rgba(104, 211, 145, 0.15);
  color: #86efac;
  border: 1px solid rgba(104, 211, 145, 0.3);
}

.colleague-map-tag.sanctuary,
.colleague-map-tag.silicon_loft,
.colleague-map-tag.neko_cafe,
.colleague-map-tag.science_classroom {
  background: rgba(212, 168, 83, 0.15);
  color: var(--gold-accent);
  border: 1px solid rgba(212, 168, 83, 0.3);
}

/* Màn hình Loading chuyển cảnh mượt mà giữa các bản đồ (Map Transition Overlay) */
.map-transition-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #1b1916 0%, #0a0908 100%);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.map-transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.transition-modal {
  max-width: 440px;
  width: 90%;
  padding: 36px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: modalPopIn 0.35s ease-out;
}

@keyframes modalPopIn {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.transition-icon {
  font-size: 48px;
  animation: floatBreathing 2.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(235, 130, 160, 0.4));
}

@keyframes floatBreathing {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.08);
  }
}

.transition-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: #f7fafc;
  letter-spacing: 0.3px;
  margin: 0;
}

.transition-desc {
  font-size: 13.5px;
  color: #cbd5e0;
  line-height: 1.5;
  margin: 0;
}

.transition-loader-track {
  width: 100%;
  max-width: 260px;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.transition-loader-bar {
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, #68d391, #d4af37, #f687b3);
  border-radius: 4px;
  animation: transitionProgress 1.4s infinite ease-in-out;
}

@keyframes transitionProgress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}

/* ==========================================================================
   POPUP NHỎ THÔNG BÁO BẬT ÂM LƯỢNG THIẾT BỊ (ZEN AUDIO PROMPT BANNER)
   ========================================================================== */
.audio-prompt-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 400px;
  background: rgba(28, 24, 20, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 16px rgba(212, 175, 55, 0.16);
  border-radius: 12px;
  padding: 12px 16px;
  color: #f7fafc;
  animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.audio-prompt-toast.closing {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.audio-prompt-icon {
  font-size: 26px;
  line-height: 1;
  animation: bellSway 2.5s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes bellSway {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-4deg); }
  75% { transform: rotate(0deg); }
}

.audio-prompt-content {
  flex: 1;
  min-width: 0;
}

.audio-prompt-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ecc94b;
  margin-bottom: 2px;
  letter-spacing: 0.2px;
  font-family: var(--font-serif);
}

.audio-prompt-desc {
  font-size: 11.5px;
  color: #cbd5e0;
  line-height: 1.4;
}

.audio-prompt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-audio-prompt-action {
  background: linear-gradient(135deg, #d4af37 0%, #b7791f 100%);
  color: #1a1a1a;
  border: none;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-audio-prompt-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.45);
}

.btn-audio-prompt-close {
  background: transparent;
  border: none;
  color: #a0aec0;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s ease;
}

.btn-audio-prompt-close:hover {
  color: #fff;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .audio-prompt-toast {
    bottom: 74px; /* Tránh đè lên mobile action bar */
    left: 12px;
    right: 12px;
    max-width: none;
    padding: 10px 14px;
  }
}

/* ========================================================
   HỆ THỐNG AVATAR THƯƠNG HIỆU & PWA COFOCUS
   ======================================================== */

/* 1. Mini Avatar hiển thị tại Stage Bar */
.brand-avatar-mini {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
  vertical-align: middle;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 168, 83, 0.35);
  margin-right: 6px;
}

.room-tag {
  display: inline-flex;
  align-items: center;
}

/* Nút Cài App trên Stage Bar Dock */
.btn-pwa-dock {
  background: linear-gradient(135deg, rgba(224, 122, 56, 0.25) 0%, rgba(200, 75, 49, 0.2) 100%) !important;
  border-color: rgba(224, 122, 56, 0.45) !important;
  color: var(--gold-light) !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(224, 122, 56, 0.2);
}

.btn-pwa-dock:hover {
  background: linear-gradient(135deg, rgba(224, 122, 56, 0.4) 0%, rgba(200, 75, 49, 0.35) 100%) !important;
  border-color: var(--primary-orange) !important;
  transform: translateY(-1px);
}

/* 2. Thẻ Thương hiệu tại đầu Sidebar */
.sidebar-brand-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(28, 27, 25, 0.9) 0%, rgba(20, 19, 18, 0.95) 100%);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  padding: 5px 10px;
  margin-bottom: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.brand-avatar-glow-wrap {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(212, 168, 83, 0.5);
  box-shadow: 0 0 10px rgba(224, 122, 56, 0.3);
}

.sidebar-brand-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sidebar-brand-info {
  flex: 1;
  min-width: 0;
}

.sidebar-brand-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-accent);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.sidebar-brand-subtitle {
  display: none;
}

.btn-sidebar-install {
  background: rgba(224, 122, 56, 0.15);
  border: 1px solid rgba(224, 122, 56, 0.4);
  color: var(--gold-light);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-sidebar-install:hover {
  background: var(--primary-orange);
  color: #fff;
  border-color: var(--primary-orange);
  box-shadow: 0 2px 8px rgba(224, 122, 56, 0.4);
}

/* Tối ưu hóa vi mô cho màn hình laptop 13" trở lên (đảm bảo YouTube Iframe hiển thị trọn vẹn không bị tràn) */
@media (min-width: 901px) and (max-height: 850px) {
  #sidebar-panel {
    padding: 8px 10px;
    gap: 6px;
  }
  .panel-card {
    padding: 7px 9px;
    gap: 6px;
  }
  .headphones-mini-player {
    padding: 5px 6px;
    gap: 4px;
    margin-top: 4px;
  }
  .yt-presets-bar.expanded {
    max-height: 76px;
  }
  .yt-frame-container {
    max-height: 175px;
  }
}

/* 3. Avatar Thương hiệu trong Lobby Modal */
.lobby-brand-avatar-wrap {
  width: 68px;
  height: 68px;
  margin: 0 auto 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(212, 168, 83, 0.6);
  box-shadow: 0 0 24px rgba(224, 122, 56, 0.45), 0 8px 20px rgba(0, 0, 0, 0.6);
}

.lobby-brand-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 4. Modal Hướng dẫn Cài đặt PWA */
.pwa-install-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.pwa-install-modal.active {
  display: flex;
}

.pwa-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 7, 6, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pwa-modal-card {
  position: relative;
  max-width: 460px;
  width: 100%;
  background: #171615;
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 24px 22px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(212, 168, 83, 0.15);
  color: var(--text-main);
  animation: pwaModalPop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes pwaModalPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.btn-pwa-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-pwa-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.pwa-modal-header {
  text-align: center;
  margin-bottom: 16px;
}

.pwa-avatar-ring {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(212, 168, 83, 0.6);
  box-shadow: 0 0 24px rgba(224, 122, 56, 0.4);
}

.pwa-modal-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pwa-modal-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 6px;
}

.pwa-modal-subtitle {
  font-size: 12.5px;
  color: var(--text-body);
  line-height: 1.5;
  max-width: 380px;
  margin: 0 auto;
}

/* Tabs chọn thiết bị */
.pwa-guide-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 3px;
  gap: 4px;
  margin-bottom: 14px;
}

.pwa-guide-tab {
  flex: 1;
  padding: 8px 6px;
  font-size: 11.5px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-align: center;
}

.pwa-guide-tab.active {
  background: rgba(212, 168, 83, 0.18);
  color: var(--gold-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Thân hướng dẫn các bước */
.pwa-guide-body {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 120px;
}

.guide-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guide-step-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-orange);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.step-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-body);
}

.step-desc b {
  color: #fff;
}

.pwa-feature-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.pwa-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--gold-light);
}

.ios-share-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  color: #fff;
}

.step-icon-plus {
  color: var(--gold-accent);
}

.ios-tip-box {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--gold-light);
  background: rgba(212, 168, 83, 0.1);
  border: 1px dashed rgba(212, 168, 83, 0.35);
  padding: 8px 10px;
  border-radius: 8px;
}

.pwa-platform-guide.highlight-pulse {
  animation: pulseGlow 0.8s ease-in-out;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 rgba(224, 122, 56, 0); }
  50% { box-shadow: 0 0 16px rgba(224, 122, 56, 0.5); }
  100% { box-shadow: 0 0 0 rgba(224, 122, 56, 0); }
}

/* Thao tác nút */
.pwa-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.btn-pwa-primary {
  flex: 2;
  background: linear-gradient(135deg, var(--primary-orange) 0%, #c84b31 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 16px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(224, 122, 56, 0.35);
  transition: all 0.15s ease;
}

.btn-pwa-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(224, 122, 56, 0.5);
}

.btn-pwa-primary.disabled,
.btn-pwa-primary:disabled {
  opacity: 0.65;
  cursor: default;
  filter: none;
  transform: none;
}

.btn-pwa-secondary {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-pwa-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-main);
}

.pwa-modal-footer {
  text-align: center;
  margin-top: 10px;
}

.btn-pwa-link {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.15s ease;
}

.btn-pwa-link:hover {
  color: var(--text-muted);
}

/* 5. Chế độ PWA Standalone khi đã cài đặt */
body.is-pwa-standalone #btn-pwa-install,
body.is-pwa-standalone #btn-pwa-sidebar-install {
  display: none !important;
}

@media (max-width: 640px) {
  .pwa-modal-card {
    padding: 20px 16px 14px;
  }
  .pwa-modal-title {
    font-size: 17px;
  }
  .pwa-guide-tab {
    font-size: 11px;
    padding: 7px 4px;
  }
}

/* ==========================================================================
   ROOM CENTERPIECE ENGINE (CÂY TIÊU ĐIỂM COFOCUS) UI & MODAL
   ========================================================================== */

/* Khung Overlay Modal toàn màn hình (Popup chuyên nghiệp) */
#centerpiece-modal,
.modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(8, 7, 6, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  box-sizing: border-box;
}

#centerpiece-modal.hidden,
.modal-overlay.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Nút trên Stage Bar */
.btn-centerpiece-dock {
  background: linear-gradient(135deg, rgba(219, 39, 119, 0.25) 0%, rgba(244, 114, 182, 0.15) 100%) !important;
  border-color: rgba(244, 114, 182, 0.45) !important;
  color: #fbcfe8 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.btn-centerpiece-dock:hover {
  background: linear-gradient(135deg, rgba(219, 39, 119, 0.4) 0%, rgba(244, 114, 182, 0.25) 100%) !important;
  border-color: #f472b6 !important;
  transform: translateY(-1px);
}

/* Modal Card - Minimalist Compact Layout */
.centerpiece-modal-card {
  position: relative;
  max-width: 480px;
  width: 100%;
  max-height: min(600px, 94vh);
  background: #171513;
  border-radius: 16px;
  overflow: hidden;
  animation: cpModalPop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Room Identity Themes */
.centerpiece-modal-card.theme-sanctuary {
  border: 1px solid rgba(244, 114, 182, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.88), 0 0 32px rgba(244, 114, 182, 0.2);
}
.centerpiece-modal-card.theme-sanctuary .centerpiece-title-text { color: #fbcfe8; }
.centerpiece-modal-card.theme-sanctuary .cp-points-text { color: #f472b6; }
.centerpiece-modal-card.theme-sanctuary .cp-progress-fill { background: linear-gradient(90deg, #f472b6, #fb7185, #fda4af); }
.centerpiece-modal-card.theme-sanctuary .cp-hold-banner { background: rgba(219, 39, 119, 0.15); border: 1px solid rgba(244, 114, 182, 0.35); color: #fbcfe8; }
.centerpiece-modal-card.theme-sanctuary .cp-tab-btn.active { border-bottom: 2px solid #f472b6; color: #fbcfe8; }
.centerpiece-modal-card.theme-sanctuary .btn-cp-wish-submit { background: linear-gradient(135deg, #db2777 0%, #be185d 100%); }
.centerpiece-modal-card.theme-sanctuary .cp-wish-item { border-left: 3px solid #f472b6; background: rgba(244, 114, 182, 0.05); }
.centerpiece-modal-card.theme-sanctuary .cp-wish-author { color: #fbcfe8; }
.centerpiece-modal-card.theme-sanctuary .cp-next-goal-hint { background: rgba(244, 114, 182, 0.08); border-color: rgba(244, 114, 182, 0.25); color: #fbcfe8; }
.centerpiece-modal-card.theme-sanctuary .cp-next-goal-hint strong { color: #f472b6; }
.centerpiece-modal-card.theme-sanctuary .cp-milestone-step.active .cp-milestone-dot { background: #f472b6; border-color: rgba(244, 114, 182, 0.4); box-shadow: 0 0 6px rgba(244, 114, 182, 0.6); }
.centerpiece-modal-card.theme-sanctuary .cp-milestone-line.active { background: rgba(244, 114, 182, 0.45); }

.centerpiece-modal-card.theme-silicon {
  border: 1px solid rgba(6, 182, 212, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.88), 0 0 32px rgba(6, 182, 212, 0.25);
}
.centerpiece-modal-card.theme-silicon .centerpiece-title-text { color: #38bdf8; }
.centerpiece-modal-card.theme-silicon .cp-points-text { color: #38bdf8; }
.centerpiece-modal-card.theme-silicon .cp-progress-fill { background: linear-gradient(90deg, #06b6d4, #3b82f6, #a855f7); }
.centerpiece-modal-card.theme-silicon .cp-hold-banner { background: rgba(6, 182, 212, 0.15); border: 1px solid rgba(6, 182, 212, 0.35); color: #a5f3fc; }
.centerpiece-modal-card.theme-silicon .cp-tab-btn.active { border-bottom: 2px solid #06b6d4; color: #a5f3fc; }
.centerpiece-modal-card.theme-silicon .btn-cp-wish-submit { background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%); }
.centerpiece-modal-card.theme-silicon .cp-wish-item { border-left: 3px solid #06b6d4; background: rgba(6, 182, 212, 0.05); }
.centerpiece-modal-card.theme-silicon .cp-wish-author { color: #38bdf8; }
.centerpiece-modal-card.theme-silicon .cp-next-goal-hint { background: rgba(6, 182, 212, 0.08); border-color: rgba(6, 182, 212, 0.25); color: #bae6fd; }
.centerpiece-modal-card.theme-silicon .cp-next-goal-hint strong { color: #38bdf8; }
.centerpiece-modal-card.theme-silicon .cp-milestone-step.active .cp-milestone-dot { background: #38bdf8; border-color: rgba(56, 189, 248, 0.4); box-shadow: 0 0 6px rgba(56, 189, 248, 0.6); }
.centerpiece-modal-card.theme-silicon .cp-milestone-line.active { background: rgba(56, 189, 248, 0.45); }

.centerpiece-modal-card.theme-neko {
  border: 1px solid rgba(217, 119, 6, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.88), 0 0 32px rgba(217, 119, 6, 0.22);
}
.centerpiece-modal-card.theme-neko .centerpiece-title-text { color: #fcd34d; }
.centerpiece-modal-card.theme-neko .cp-points-text { color: #f59e0b; }
.centerpiece-modal-card.theme-neko .cp-progress-fill { background: linear-gradient(90deg, #d97706, #f59e0b, #fde68a); }
.centerpiece-modal-card.theme-neko .cp-hold-banner { background: rgba(217, 119, 6, 0.15); border: 1px solid rgba(217, 119, 6, 0.35); color: #fef08a; }
.centerpiece-modal-card.theme-neko .cp-tab-btn.active { border-bottom: 2px solid #f59e0b; color: #fef08a; }
.centerpiece-modal-card.theme-neko .btn-cp-wish-submit { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }
.centerpiece-modal-card.theme-neko .cp-wish-item { border-left: 3px solid #f59e0b; background: rgba(217, 119, 6, 0.05); }
.centerpiece-modal-card.theme-neko .cp-wish-author { color: #fcd34d; }
.centerpiece-modal-card.theme-neko .cp-next-goal-hint { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.25); color: #fef08a; }
.centerpiece-modal-card.theme-neko .cp-next-goal-hint strong { color: #f59e0b; }
.centerpiece-modal-card.theme-neko .cp-milestone-step.active .cp-milestone-dot { background: #f59e0b; border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 0 6px rgba(245, 158, 11, 0.6); }
.centerpiece-modal-card.theme-neko .cp-milestone-line.active { background: rgba(245, 158, 11, 0.45); }

.centerpiece-modal-card.theme-science {
  border: 1px solid rgba(16, 185, 129, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.88), 0 0 32px rgba(16, 185, 129, 0.22);
}
.centerpiece-modal-card.theme-science .centerpiece-title-text { color: #6ee7b7; }
.centerpiece-modal-card.theme-science .cp-points-text { color: #10b981; }
.centerpiece-modal-card.theme-science .cp-progress-fill { background: linear-gradient(90deg, #10b981, #059669, #34d399); }
.centerpiece-modal-card.theme-science .cp-hold-banner { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); color: #a7f3d0; }
.centerpiece-modal-card.theme-science .cp-tab-btn.active { border-bottom: 2px solid #10b981; color: #a7f3d0; }
.centerpiece-modal-card.theme-science .btn-cp-wish-submit { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
.centerpiece-modal-card.theme-science .cp-wish-item { border-left: 3px solid #10b981; background: rgba(16, 185, 129, 0.05); }
.centerpiece-modal-card.theme-science .cp-wish-author { color: #6ee7b7; }
.centerpiece-modal-card.theme-science .cp-next-goal-hint { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); color: #a7f3d0; }
.centerpiece-modal-card.theme-science .cp-next-goal-hint strong { color: #10b981; }
.centerpiece-modal-card.theme-science .cp-milestone-step.active .cp-milestone-dot { background: #10b981; border-color: rgba(16, 185, 129, 0.4); box-shadow: 0 0 6px rgba(16, 185, 129, 0.6); }
.centerpiece-modal-card.theme-science .cp-milestone-line.active { background: rgba(16, 185, 129, 0.45); }

.centerpiece-modal-card.theme-ocean {
  border: 1px solid rgba(14, 165, 233, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.88), 0 0 32px rgba(14, 165, 233, 0.22);
}
.centerpiece-modal-card.theme-ocean .centerpiece-title-text { color: #38bdf8; }
.centerpiece-modal-card.theme-ocean .cp-points-text { color: #0284c7; }
.centerpiece-modal-card.theme-ocean .cp-progress-fill { background: linear-gradient(90deg, #0284c7, #06b6d4, #38bdf8); }
.centerpiece-modal-card.theme-ocean .cp-hold-banner { background: rgba(14, 165, 233, 0.15); border: 1px solid rgba(14, 165, 233, 0.35); color: #bae6fd; }
.centerpiece-modal-card.theme-ocean .cp-tab-btn.active { border-bottom: 2px solid #0ea5e9; color: #bae6fd; }
.centerpiece-modal-card.theme-ocean .btn-cp-wish-submit { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }
.centerpiece-modal-card.theme-ocean .cp-wish-item { border-left: 3px solid #0ea5e9; background: rgba(14, 165, 233, 0.05); }
.centerpiece-modal-card.theme-ocean .cp-wish-author { color: #38bdf8; }
.centerpiece-modal-card.theme-ocean .cp-next-goal-hint { background: rgba(14, 165, 233, 0.08); border-color: rgba(14, 165, 233, 0.25); color: #bae6fd; }
.centerpiece-modal-card.theme-ocean .cp-next-goal-hint strong { color: #0ea5e9; }
.centerpiece-modal-card.theme-ocean .cp-milestone-step.active .cp-milestone-dot { background: #0ea5e9; border-color: rgba(14, 165, 233, 0.4); box-shadow: 0 0 6px rgba(14, 165, 233, 0.6); }
.centerpiece-modal-card.theme-ocean .cp-milestone-line.active { background: rgba(14, 165, 233, 0.45); }

.centerpiece-modal-card.theme-truc-lam {
  border: 1px solid rgba(16, 185, 129, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.88), 0 0 32px rgba(16, 185, 129, 0.22);
}
.centerpiece-modal-card.theme-truc-lam .centerpiece-title-text { color: #34d399; }
.centerpiece-modal-card.theme-truc-lam .cp-points-text { color: #059669; }
.centerpiece-modal-card.theme-truc-lam .cp-progress-fill { background: linear-gradient(90deg, #065f46, #10b981, #34d399); }
.centerpiece-modal-card.theme-truc-lam .cp-hold-banner { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); color: #a7f3d0; }
.centerpiece-modal-card.theme-truc-lam .cp-tab-btn.active { border-bottom: 2px solid #10b981; color: #a7f3d0; }
.centerpiece-modal-card.theme-truc-lam .btn-cp-wish-submit { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
.centerpiece-modal-card.theme-truc-lam .cp-wish-item { border-left: 3px solid #10b981; background: rgba(16, 185, 129, 0.05); }
.centerpiece-modal-card.theme-truc-lam .cp-wish-author { color: #34d399; }
.centerpiece-modal-card.theme-truc-lam .cp-next-goal-hint { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); color: #a7f3d0; }
.centerpiece-modal-card.theme-truc-lam .cp-next-goal-hint strong { color: #10b981; }
.centerpiece-modal-card.theme-truc-lam .cp-milestone-step.active .cp-milestone-dot { background: #10b981; border-color: rgba(16, 185, 129, 0.4); box-shadow: 0 0 6px rgba(16, 185, 129, 0.6); }
.centerpiece-modal-card.theme-truc-lam .cp-milestone-line.active { background: rgba(16, 185, 129, 0.45); }

@keyframes cpModalPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.centerpiece-modal-card .modal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.centerpiece-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.centerpiece-title-icon {
  font-size: 22px;
  line-height: 1;
}

.centerpiece-title-text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0;
}

.centerpiece-cycle-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  color: #d4af37;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 1px 7px;
  border-radius: 8px;
  margin-top: 2px;
}

.centerpiece-modal-card .btn-modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.centerpiece-modal-card .btn-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: rotate(90deg);
}

.centerpiece-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(min(600px, 94vh) - 60px);
}

.centerpiece-modal-body::-webkit-scrollbar {
  width: 5px;
}

.centerpiece-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* KHỐI 1: Hero Progress & Micro-Status */
.cp-hero-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
}

.cp-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}

.cp-stage-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #f1f5f9;
}

.cp-points-text {
  font-size: 12.5px;
  font-weight: 700;
}

.cp-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.cp-progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
}

/* Mốc điểm giai đoạn (Milestones Track) */
.cp-milestones-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 7px 10px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cp-milestone-step {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.cp-milestone-step.active {
  opacity: 1;
}

.cp-milestone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.cp-milestone-step.active .cp-milestone-dot {
  background: #22c55e;
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

.cp-milestone-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.cp-milestone-label {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
}

.cp-milestone-step.active .cp-milestone-label {
  color: #e2e8f0;
  font-weight: 600;
}

.cp-milestone-target {
  font-size: 11px;
  color: #cbd5e1;
  font-weight: 700;
}

.cp-milestone-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 8px;
  position: relative;
}

.cp-milestone-line.active {
  background: rgba(34, 197, 94, 0.5);
}

/* Lời nhắc lên cấp (Next Goal Hint) */
.cp-next-goal-hint {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 8px;
  font-size: 11.5px;
  color: #bae6fd;
  text-align: center;
  line-height: 1.4;
}

.cp-next-goal-hint strong {
  color: #38bdf8;
  font-weight: 700;
}

.cp-hold-banner {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  text-align: center;
  animation: pulseHold 2s infinite ease-in-out;
}

/* QUAN TRỌNG: Ẩn triệt để hold banner khi chưa đạt đỉnh cao */
.cp-hold-banner.hidden,
#cp-hold-banner.hidden {
  display: none !important;
}

@keyframes pulseHold {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.7; }
}

.cp-micro-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
}

/* Hộp giải thích cơ chế ngồi 10 phút */
.cp-mechanism-box {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.45;
}

.cp-mechanism-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
  color: #e2e8f0;
  font-weight: 600;
  font-size: 11.5px;
}

.cp-mech-desc {
  margin: 0;
  color: #cbd5e1;
}

.cp-mech-desc strong {
  color: #f1f5f9;
}

.cp-mech-sub {
  margin-top: 3px;
  font-size: 10.5px;
  color: #94a3b8;
}

.cp-micro-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 11px;
  color: #cbd5e1;
  font-weight: 500;
}

.cp-pill-icon {
  font-size: 11.5px;
  line-height: 1;
}

.cp-pill-text {
  white-space: nowrap;
}

/* KHỐI 2: Segmented Dual-Tab Hub */
.cp-tabs-container {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cp-tab-group {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.32);
  padding: 3px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.cp-tab-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.cp-tab-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.04);
}

.cp-tab-btn.active {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.cp-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Leaderboard List */
.cp-leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 185px;
  overflow-y: auto;
  padding-right: 2px;
}

.cp-leaderboard-list::-webkit-scrollbar,
.cp-wishes-list::-webkit-scrollbar {
  width: 4px;
}

.cp-leaderboard-list::-webkit-scrollbar-thumb,
.cp-wishes-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.cp-leader-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 11.5px;
}

.cp-leader-item.is-me {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.cp-leader-rank {
  font-weight: 700;
  width: 22px;
  color: #d4af37;
  flex-shrink: 0;
}

.cp-leader-name {
  flex: 1;
  color: #f1f5f9;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-leader-pts {
  font-weight: 700;
  color: #38bdf8;
  margin-left: 8px;
  flex-shrink: 0;
}

/* Wishes / Community Notes */
.cp-wish-form {
  display: flex;
  gap: 6px;
}

.cp-wish-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  padding: 7px 10px;
  color: #f1f5f9;
  font-size: 11.5px;
  font-family: inherit;
}

.cp-wish-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.btn-cp-wish-submit {
  border: none;
  border-radius: 7px;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-cp-wish-submit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.cp-wishes-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 140px;
  overflow-y: auto;
  margin-top: 2px;
  padding-right: 2px;
}

.cp-wish-item {
  border-radius: 0 7px 7px 0;
  padding: 6px 10px;
  font-size: 11.5px;
}

.cp-wish-author {
  font-size: 10.5px;
  font-weight: 600;
  margin-bottom: 2px;
}

.cp-wish-text {
  color: #e2e8f0;
  line-height: 1.35;
  word-break: break-word;
}

.cp-empty-state {
  text-align: center;
  color: #64748b;
  font-size: 11px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.015);
  border-radius: 7px;
  font-style: italic;
}

@media (max-width: 640px) {
  .centerpiece-modal-card {
    max-width: 95vw;
    border-radius: 14px;
  }
  .centerpiece-modal-card .modal-card-header {
    padding: 10px 14px;
  }
  .centerpiece-modal-body {
    padding: 12px 14px 14px;
  }
  .centerpiece-title-text {
    font-size: 15px;
  }
  .cp-leaderboard-list {
    max-height: 165px;
  }
  .cp-wishes-list {
    max-height: 125px;
  }
}

/* ==========================================================================
   DASHBOARD SẢNH CHÍNH (COFOCUS LOBBY HUB) & MULTI-ROOM DIRECTORY
   ========================================================================== */
.lobby-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(10, 9, 8, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
}

html.in-room-session #lobby-modal {
  display: none !important;
}

.lobby-dashboard-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  width: 100%;
  max-width: 1280px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 32px rgba(212, 163, 115, 0.12);
  overflow: hidden;
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lobby-dashboard-header {
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
}

.lobby-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lobby-brand-avatar-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(212, 163, 115, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--gold-accent);
  box-shadow: 0 0 12px rgba(212, 163, 115, 0.3);
  overflow: hidden;
}

.lobby-brand-avatar {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.lobby-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--gold-accent);
  margin: 0;
  line-height: 1.25;
}

.lobby-tagline {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.lobby-status-badge {
  background: rgba(212, 163, 115, 0.15);
  border: 1px solid rgba(212, 163, 115, 0.35);
  color: var(--gold-accent);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lobby-header-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lobby-headphones-badge {
  background: linear-gradient(135deg, rgba(212, 168, 83, 0.18) 0%, rgba(245, 158, 11, 0.35) 50%, rgba(212, 168, 83, 0.18) 100%);
  background-size: 200% 100%;
  border: 1.5px solid var(--gold-accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.2px;
  box-shadow: 0 0 14px rgba(212, 168, 83, 0.45);
  animation: headphoneSparkle 2.2s ease-in-out infinite alternate, headphoneShimmer 3.5s linear infinite;
}

@keyframes headphoneSparkle {
  0% {
    box-shadow: 0 0 8px rgba(212, 168, 83, 0.35);
    border-color: rgba(212, 168, 83, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.85), 0 0 32px rgba(212, 168, 83, 0.45);
    border-color: #fef08a;
    transform: scale(1.025);
  }
  100% {
    box-shadow: 0 0 10px rgba(212, 168, 83, 0.4);
    border-color: rgba(212, 168, 83, 0.6);
    transform: scale(1);
  }
}

@keyframes headphoneShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.lobby-mobile-headphones-banner {
  display: none;
}

.lobby-dashboard-body {
  padding: 16px 22px 18px;
  display: grid;
  grid-template-columns: 356px 1fr;
  gap: 20px;
  overflow-y: auto;
  align-items: start;
}

.lobby-section-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  margin: 0 0 10px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lobby-profile-col {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 16px;
}

.lobby-rooms-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lobby-section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.lobby-section-header-row .lobby-section-title {
  margin-bottom: 0;
}

.lobby-rooms-count-badge {
  font-size: 11px;
  color: #48bb78;
  background: rgba(72, 187, 120, 0.12);
  border: 1px solid rgba(72, 187, 120, 0.3);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 600;
}

/* Lưới Thẻ Phòng 3x2 Trên Máy Tính (Widescreen 3 Columns x 2 Rows - Zero Scroll) */
.lobby-rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lobby-room-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.lobby-room-card.active-room {
  border-color: rgba(212, 163, 115, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.lobby-room-card.active-room:hover {
  border-color: var(--gold-accent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(212, 163, 115, 0.18);
  transform: translateY(-2px);
}

.room-card-preview {
  position: relative;
  width: 100%;
  height: 92px;
  overflow: hidden;
  background: #141210;
}

.room-preview-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.lobby-room-card.active-room:hover .room-preview-thumb {
  transform: scale(1.04);
}

.room-status-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.room-status-indicator.online {
  background: rgba(20, 83, 45, 0.88);
  color: #dcfce7;
  border: 1px solid #22c55e;
}

.room-status-indicator.full {
  background: rgba(185, 28, 28, 0.85);
  color: #fee2e2;
  border: 1px solid #ef4444;
}

.room-status-indicator.locked {
  background: rgba(97, 97, 97, 0.85);
  color: #e0e0e0;
  border: 1px solid #757575;
}

/* Phòng chưa đủ người ("đang ngủ"): mờ nhẹ, vẫn bấm được để xin chờ mở */
.room-status-indicator.sleeping {
  background: rgba(120, 88, 20, 0.85);
  color: #fef3c7;
  border: 1px solid #f59e0b;
}

.lobby-room-card.room-card-gated {
  border-color: rgba(245, 158, 11, 0.35);
}

.lobby-room-card.room-card-gated .room-card-preview img {
  filter: saturate(0.55) brightness(0.82);
}

/* Nút "Mời bạn" ở tiêu đề khu vực phòng */
.btn-invite-room {
  margin-left: 8px;
  padding: 4px 9px;
  font-size: 10.5px;
  border-radius: 999px;
  border: 1px solid rgba(212, 168, 83, 0.45);
  background: rgba(212, 168, 83, 0.12);
  color: var(--gold-light, #f7d58b);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-body);
}

.btn-invite-room:hover {
  background: rgba(212, 168, 83, 0.22);
}

/* Link mời dạng chữ trong hộp thông báo chờ mở */
.btn-inline-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--gold-light, #f7d58b);
  text-decoration: underline;
  cursor: pointer;
}

/* Thẻ phòng đã đầy: xám mờ và ngăn chặn chọn vào phòng */
.lobby-room-card.room-card-full {
  opacity: 0.52 !important;
  filter: grayscale(0.85) !important;
  cursor: not-allowed !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.lobby-room-card.room-card-full:hover {
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.lobby-room-card.room-card-full .btn-join-room {
  background: #25221e !important;
  color: #8a8275 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transform: none !important;
}

.room-card-content {
  padding: 10px 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.room-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.room-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-seat-badge {
  font-size: 9.5px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--text-body);
  white-space: nowrap;
  flex-shrink: 0;
}

.room-card-desc {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.room-meta-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 5px 7px;
}

.room-stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-stat-item .stat-value {
  color: var(--text-main);
  font-weight: 600;
}

.lobby-waitlist-alert {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #ffbe53;
  display: flex;
  align-items: center;
  gap: 6px;
}

.room-card-action {
  margin-top: auto;
  padding-top: 2px;
}

.btn-join-room {
  width: 100%;
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 7px;
}

/* Thẻ Coming Soon */
.coming-soon-room {
  opacity: 0.65;
}

.room-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: rgba(255, 255, 255, 0.02);
}

.btn-disabled {
  width: 100%;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: not-allowed;
}

/* ==========================================================================
   MODAL XÁC NHẬN RỜI PHÒNG (LEAVE ROOM CONFIRMATION)
   ========================================================================== */
.leave-room-card {
  max-width: 420px;
  text-align: center;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.leave-room-card .leave-icon {
  font-size: 36px;
  margin-bottom: 2px;
}

.leave-room-card h2 {
  font-size: 17px;
  color: var(--text-main);
  margin: 0;
}

.leave-room-card p {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 12px;
}

.leave-room-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.leave-room-actions button {
  flex: 1;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
}

.btn-confirm-leave {
  background: #c53030 !important;
  color: #fff !important;
  border: 1px solid #e53e3e !important;
}

.btn-confirm-leave:hover {
  background: #e53e3e !important;
}

/* Nút Ra Sảnh Ngoài trên Stage Bar */
.btn-leave-dock {
  background: rgba(212, 163, 115, 0.12);
  border-color: rgba(212, 163, 115, 0.35);
  color: var(--gold-accent);
}

.btn-leave-dock:hover {
  background: rgba(212, 163, 115, 0.25);
  border-color: var(--gold-accent);
  color: #fff;
}

/* =====================================================================
   LOBBY MOBILE TABS & RESPONSIVE DESIGN (TABLET 769-1120px & MOBILE <=768px)
   ===================================================================== */
.lobby-mobile-nav {
  display: none;
  background: rgba(18, 16, 14, 0.95);
  border-bottom: 1px solid var(--border-subtle);
  padding: 8px 14px;
  gap: 8px;
}

.lobby-mobile-tab-btn {
  flex: 1;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.lobby-mobile-tab-btn.active {
  background: rgba(212, 168, 83, 0.18);
  border-color: var(--gold-accent);
  color: var(--gold-accent);
  box-shadow: 0 0 10px rgba(212, 168, 83, 0.2);
}

.mobile-quick-profile-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(212, 168, 83, 0.25);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

.quick-profile-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

#mobile-quick-avatar-img {
  width: 24px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 4px;
  background: #141312;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.quick-profile-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
}

.btn-quick-edit-profile {
  background: rgba(212, 168, 83, 0.12);
  border: 1px solid rgba(212, 168, 83, 0.35);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--gold-accent);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-quick-edit-profile:hover {
  background: rgba(212, 168, 83, 0.25);
  color: #fff;
}

.mobile-goto-rooms-row {
  display: none;
  margin-top: 10px;
}

.btn-mobile-goto-rooms {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
}

/* Màn hình laptop nhỏ / Tablet ngang (769px - 1140px): 2 cột thẻ phòng */
@media (max-width: 1140px) {
  .lobby-dashboard-card {
    max-width: 97vw;
    max-height: min(94dvh, 94vh);
  }

  .lobby-dashboard-body {
    grid-template-columns: 330px 1fr;
    gap: 16px;
  }

  .lobby-rooms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Màn hình Mobile & Tablet dọc (<= 768px) */
@media (max-width: 768px) {
  .lobby-overlay {
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }

  .lobby-dashboard-card {
    max-width: 100vw;
    width: 100%;
    max-height: min(94dvh, 94vh);
    border-radius: 14px;
  }

  .lobby-dashboard-header {
    padding: 10px 14px 8px;
  }

  .lobby-brand-avatar-wrap {
    width: 32px;
    height: 32px;
  }

  .lobby-brand-avatar {
    width: 24px;
    height: 24px;
  }

  .lobby-title {
    font-size: 15px;
  }

  .lobby-tagline {
    display: none;
  }

  .lobby-status-badge {
    font-size: 10px;
    padding: 2px 8px;
  }

  .lobby-headphones-badge {
    display: none !important;
  }

  .lobby-mobile-headphones-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.16) 0%, rgba(245, 158, 11, 0.35) 50%, rgba(212, 168, 83, 0.16) 100%);
    background-size: 200% 100%;
    border-bottom: 1.5px solid var(--gold-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.2px;
    box-shadow: 0 0 14px rgba(212, 168, 83, 0.45);
    animation: headphoneSparkle 2.2s ease-in-out infinite alternate, headphoneShimmer 3.5s linear infinite;
  }

  .lobby-mobile-nav {
    display: flex;
  }

  .lobby-dashboard-body {
    padding: 10px 12px 14px;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lobby-profile-col {
    padding: 12px;
  }

  /* Ẩn hiện tab trên Mobile */
  .lobby-dashboard-body[data-mobile-tab="rooms"] .lobby-profile-col {
    display: none !important;
  }

  .lobby-dashboard-body[data-mobile-tab="rooms"] .lobby-rooms-col {
    display: flex !important;
  }

  .lobby-dashboard-body[data-mobile-tab="profile"] .lobby-profile-col {
    display: flex !important;
  }

  .lobby-dashboard-body[data-mobile-tab="profile"] .lobby-rooms-col {
    display: none !important;
  }

  .mobile-quick-profile-bar {
    display: flex;
    margin-bottom: 4px;
  }

  .mobile-goto-rooms-row {
    display: block;
  }

  /* Khắc phục triệt để lỗi iOS Safari tự động phóng to (Auto-Zoom) khi chạm vào ô input */
  .form-group input[type="text"] {
    font-size: 16px !important;
  }

  /* Bố cục tâm thế dạng lưới 2 cột gọn nhẹ trên Mobile */
  .mood-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .mood-pill {
    font-size: 11px;
    padding: 7px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Bố cục thẻ 6 phòng dạng Ngang Siêu Gọn (Horizontal Compact Cards) trên Mobile */
  .lobby-rooms-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .room-card-compact {
    flex-direction: row;
    align-items: center;
    padding: 7px 9px;
    gap: 9px;
    border-radius: 10px;
  }

  .room-card-compact .room-card-preview {
    width: 72px;
    height: 68px;
    min-width: 72px;
    border-radius: 8px;
  }

  .room-card-compact .room-status-indicator {
    top: 3px;
    right: 3px;
    font-size: 8.5px;
    padding: 1px 4px;
  }

  .room-card-compact .room-card-content {
    padding: 0;
    flex: 1;
    min-width: 0;
    gap: 3px;
  }

  .room-card-compact .room-card-header-row {
    margin-bottom: 0;
  }

  .room-card-compact .room-card-title {
    font-size: 12.5px;
  }

  .room-card-compact .room-seat-badge {
    font-size: 9px;
    padding: 1px 5px;
  }

  .room-card-compact .room-card-desc {
    display: none; /* Ẩn mô tả dài trên mobile để hiển thị gọn cả 6 phòng */
  }

  .room-card-compact .room-meta-stats {
    padding: 2.5px 6px;
    gap: 4px;
  }

  .room-card-compact .room-stat-item {
    font-size: 9.5px;
    gap: 3px;
  }

  .room-card-compact .btn-join-room {
    padding: 5px 8px;
    font-size: 11px;
    margin-top: 1px;
  }
}

/* =====================================================================
   BẢNG 6 MÀU ĐẶC TRƯNG CHO 6 KHÔNG GIAN LÀM VIỆC (6 DISTINCT ROOM THEMES)
   1. Trà Đạo Nhật Bản (Sakura Rose / Hồng Anh Đào)
   2. Trạm Lập Trình AI (Cyber Violet / Tím Điện Tử)
   3. Đại Thư Viện Cổ (Warm Amber Gold / Vàng Hổ Phách)
   4. Viện Hàn Lâm (Academic Crimson / Đỏ Đô Học Viện)
   5. Tàu Viễn Dương (Deep Ocean Blue / Xanh Dương Đại Dương)
   6. Thiền Viện Trúc Lâm (Deep Forest Emerald / Xanh Lá Rừng Trúc)
   ===================================================================== */

/* PHÒNG 1: TRÀ ĐẠO NHẬT BẢN — Hồng Anh Đào (Sakura Rose) */
.room-zen-sanctuary {
  border: 1px solid rgba(244, 63, 94, 0.42) !important;
  background: linear-gradient(135deg, rgba(34, 14, 22, 0.95), rgba(48, 18, 30, 0.9)) !important;
  box-shadow: 0 4px 20px rgba(244, 63, 94, 0.12);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.room-zen-sanctuary:hover {
  border-color: rgba(251, 113, 133, 0.85) !important;
  box-shadow: 0 6px 28px rgba(244, 63, 94, 0.28);
}

.btn-join-zen {
  background: linear-gradient(135deg, #be123c, #e11d48) !important;
  color: #fff !important;
  border: 1px solid rgba(251, 113, 133, 0.65) !important;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.35);
}

.btn-join-zen:hover {
  background: linear-gradient(135deg, #9f1239, #be123c) !important;
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.55);
  transform: translateY(-1px);
}

/* PHÒNG 2: TRẠM LẬP TRÌNH AI — Tím Điện Tử (Cyber Violet) */
.room-silicon-loft {
  border: 1px solid rgba(139, 92, 246, 0.45) !important;
  background: linear-gradient(135deg, rgba(17, 14, 34, 0.95), rgba(28, 21, 54, 0.9)) !important;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.14);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.room-silicon-loft:hover {
  border-color: rgba(167, 139, 250, 0.85) !important;
  box-shadow: 0 6px 28px rgba(139, 92, 246, 0.3);
}

.btn-join-silicon {
  background: linear-gradient(135deg, #5b21b6, #7c3aed) !important;
  color: #fff !important;
  border: 1px solid rgba(167, 139, 250, 0.65) !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.38);
}

.btn-join-silicon:hover {
  background: linear-gradient(135deg, #4c1d95, #6d28d9) !important;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.58);
  transform: translateY(-1px);
}

/* PHÒNG 3: ĐẠI THƯ VIỆN CỔ — Vàng Hổ Phách (Warm Amber Gold) */
.room-neko-cafe {
  border: 1px solid rgba(217, 119, 6, 0.45) !important;
  background: linear-gradient(135deg, rgba(32, 21, 12, 0.95), rgba(48, 30, 16, 0.9)) !important;
  box-shadow: 0 4px 20px rgba(217, 119, 6, 0.14);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.room-neko-cafe:hover {
  border-color: rgba(245, 158, 11, 0.85) !important;
  box-shadow: 0 6px 28px rgba(217, 119, 6, 0.28);
}

.btn-join-neko {
  background: linear-gradient(135deg, #b45309, #d97706) !important;
  color: #fff !important;
  border: 1px solid rgba(251, 191, 36, 0.65) !important;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.35);
}

.btn-join-neko:hover {
  background: linear-gradient(135deg, #92400e, #b45309) !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.55);
  transform: translateY(-1px);
}

/* PHÒNG 4: VIỆN HÀN LÂM — Cam Đồng Cổ Điển / Terracotta (Academic Copper) */
.room-science-academy {
  border: 1px solid rgba(234, 88, 12, 0.45) !important;
  background: linear-gradient(135deg, rgba(35, 17, 12, 0.95), rgba(52, 24, 16, 0.9)) !important;
  box-shadow: 0 4px 20px rgba(234, 88, 12, 0.14);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.room-science-academy:hover {
  border-color: rgba(251, 146, 60, 0.85) !important;
  box-shadow: 0 6px 28px rgba(234, 88, 12, 0.28);
}

.btn-join-science {
  background: linear-gradient(135deg, #9a3412, #c2410c) !important;
  color: #fff !important;
  border: 1px solid rgba(251, 146, 60, 0.65) !important;
  box-shadow: 0 2px 10px rgba(194, 65, 12, 0.38);
}

.btn-join-science:hover {
  background: linear-gradient(135deg, #7c2d12, #9a3412) !important;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.55);
  transform: translateY(-1px);
}

/* Huy hiệu Cây Sách Tri Thức: Học Giả Uyên Bác 📖 */
.char-book-badge {
  background: linear-gradient(135deg, #78350f, #dfb15b) !important;
  color: #fff !important;
  border: 1px solid #dfb15b !important;
  box-shadow: 0 0 8px rgba(223, 177, 91, 0.6) !important;
}

.btn-switch-dev {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
  color: #38bdf8;
}

.btn-switch-dev:hover {
  background: rgba(6, 182, 212, 0.3);
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

/* Huy hiệu Siêu Máy Tính AI: Quantum Master ⚡ */
.char-duck-badge,
.char-quantum-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-left: 4px;
  filter: drop-shadow(0 0 5px #00e5ff);
  animation: quantumBadgePulse 2s infinite ease-in-out;
}

@keyframes quantumBadgePulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 4px #00e5ff); }
  50% { transform: translateY(-2px) scale(1.15); filter: drop-shadow(0 0 8px #a855f7); }
}

/* PHÒNG 5: TÀU VIỄN DƯƠNG — Xanh Dương Đại Dương Sâu (Deep Ocean Blue) */
.room-ocean-voyager {
  border: 1px solid rgba(14, 165, 233, 0.45) !important;
  background: linear-gradient(135deg, rgba(8, 25, 48, 0.95), rgba(12, 38, 72, 0.9)) !important;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.room-ocean-voyager:hover {
  border-color: rgba(56, 189, 248, 0.85) !important;
  box-shadow: 0 6px 28px rgba(14, 165, 233, 0.32);
}

.btn-join-ocean {
  background: linear-gradient(135deg, #0369a1, #0284c7) !important;
  color: #fff !important;
  border: 1px solid rgba(56, 189, 248, 0.65) !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.38);
}

.btn-join-ocean:hover {
  background: linear-gradient(135deg, #075985, #0369a1) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.58);
  transform: translateY(-1px);
}

/* Huy hiệu Bánh Lái Thuyền Trưởng: Captain Voyager ⚓ */
.char-captain-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-left: 4px;
  filter: drop-shadow(0 0 5px #38bdf8);
  animation: captainBadgePulse 2s infinite ease-in-out;
}

@keyframes captainBadgePulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 4px #38bdf8); }
  50% { transform: translateY(-2px) scale(1.15); filter: drop-shadow(0 0 8px #f59e0b); }
}

/* PHÒNG 6: THIỀN VIỆN TRÚC LÂM — Xanh Lá Rừng Trúc Đậm (Deep Forest Emerald) */
.room-truc-lam {
  border: 1px solid rgba(22, 163, 74, 0.45) !important;
  background: linear-gradient(135deg, rgba(8, 28, 21, 0.95), rgba(20, 54, 38, 0.9)) !important;
  box-shadow: 0 4px 20px rgba(22, 163, 74, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.room-truc-lam:hover {
  border-color: rgba(74, 222, 128, 0.85) !important;
  box-shadow: 0 6px 28px rgba(22, 163, 74, 0.3);
}

.btn-join-truclam {
  background: linear-gradient(135deg, #1b4332, #15803d) !important;
  color: #fff !important;
  border: 1px solid rgba(74, 222, 128, 0.6) !important;
  box-shadow: 0 2px 10px rgba(21, 128, 61, 0.38);
}

.btn-join-truclam:hover {
  background: linear-gradient(135deg, #143326, #166534) !important;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.58);
  transform: translateY(-1px);
}

/* Huy hiệu Đại Hồng Chung & Tâm Thiền: Zen Monk Badge 📿 */
.char-zen-monk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-left: 4px;
  filter: drop-shadow(0 0 5px #10b981);
  animation: zenMonkBadgePulse 2s infinite ease-in-out;
}

@keyframes zenMonkBadgePulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 4px #10b981); }
  50% { transform: translateY(-2px) scale(1.15); filter: drop-shadow(0 0 8px #f59e0b); }
}


/* ===== Tiến độ ngồi tới +1 điểm (popup Trung Tâm) ===== */
.cp-seat-progress {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 10px;
}
.cp-seat-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 6px;
}
.cp-seat-progress-label {
  color: var(--text-body, #cfc5b6);
  font-weight: 600;
}
.cp-seat-progress-time {
  font-family: var(--font-pixel, monospace);
  color: var(--gold-light, #f2d98b);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.cp-seat-progress-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.cp-seat-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3d7a53, #d4a359);
  border-radius: 999px;
  transition: width 0.6s linear;
}
.cp-seat-progress-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted, #8c8275);
  line-height: 1.4;
}

/* ===== Pomodoro CẢ PHÒNG — bản to trong panel phải ===== */
.room-pomodoro-panel .room-pomodoro-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.4);
  cursor: var(--cursor-pixel-pointer);
  transition: all 0.2s ease;
}
.room-pomodoro-panel .room-pomodoro-big:hover { background: rgba(245, 158, 11, 0.2); }
.room-pomodoro-panel .room-pomodoro-big.break {
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.4);
}
.room-pomodoro-panel #room-pomo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.room-pomodoro-panel .pomo-prefix {
  font-size: 12px;
  color: var(--text-muted, #8c8275);
  font-weight: 500;
}
.room-pomodoro-panel .pomo-time {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  color: #ffbe53;
  font-variant-numeric: tabular-nums;
}
.room-pomodoro-panel .room-pomodoro-big.break .pomo-time { color: #7dd3fc; }
.room-pomodoro-panel .pomo-phase-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: #ffbe53;
}
.room-pomodoro-panel .room-pomodoro-big.break .pomo-phase-badge {
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
}
.room-pomodoro-panel .pomo-mini-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #f59e0b; box-shadow: 0 0 10px #f59e0b;
  animation: pomoPulse 1.6s ease-in-out infinite alternate;
  flex-shrink: 0;
}
.room-pomodoro-panel .room-pomodoro-big.break .pomo-mini-dot {
  background: #38bdf8; box-shadow: 0 0 10px #38bdf8;
}

/* ===== HEADER TRANG WEB (chứa đồng hồ Pomodoro cả phòng) ===== */
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.app-header {
  flex: 0 0 auto;
  height: 54px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: linear-gradient(180deg, #171512, #100e0c);
  border-bottom: 1px solid var(--border-gold, rgba(212, 168, 83, 0.35));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  z-index: 50;
  box-sizing: border-box;
}
.app-header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app-header-logo { width: 26px; height: 26px; border-radius: 6px; image-rendering: pixelated; }
.app-header-brand { font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif); font-weight: 700; font-size: 15px; color: #f4ece1; white-space: nowrap; letter-spacing: 0.2px; }
.app-header-brand-sub { font-weight: 500; font-size: 12px; color: var(--text-muted, #8c8275); }
.app-header-center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.app-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.room-pomodoro-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: var(--cursor-pixel-pointer, pointer);
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
}
.room-pomodoro-header:hover { background: rgba(245, 158, 11, 0.22); }
.room-pomodoro-header #room-pomo-text { display: flex; align-items: baseline; gap: 8px; }
.room-pomodoro-header .pomo-prefix { font-size: 12px; color: #c9bfae; font-weight: 500; }
.room-pomodoro-header .pomo-time { font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: 1px; color: #ffbe53; font-variant-numeric: tabular-nums; }
.room-pomodoro-header .pomo-phase-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(245, 158, 11, 0.2); color: #ffbe53; }
.room-pomodoro-header .pomo-mini-dot { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 10px #f59e0b; animation: pomoPulse 1.6s ease-in-out infinite alternate; flex-shrink: 0; }
.room-pomodoro-header.break { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.45); }
.room-pomodoro-header.break .pomo-time { color: #7dd3fc; }
.room-pomodoro-header.break .pomo-phase-badge { background: rgba(56, 189, 248, 0.2); color: #7dd3fc; }
.room-pomodoro-header.break .pomo-mini-dot { background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }

@media (max-width: 900px) {
  .app-header { padding: 0 10px; gap: 8px; }
  .app-header-brand { font-size: 13px; }
  .app-header-brand-sub { display: none; }
  .room-pomodoro-header { padding: 4px 10px; gap: 6px; }
  .room-pomodoro-header .pomo-time { font-size: 1.25rem; }
  .room-pomodoro-header .pomo-prefix { display: none; }
  .room-pomodoro-header .pomo-phase-badge { font-size: 10px; padding: 1px 7px; }
}

/* ===== Header clock: chuyển Cả phòng <-> Cá nhân ===== */
.app-header-center { align-items: center; gap: 8px; }
.hclock-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border-radius: 999px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
}
.hclock-tab {
  border: none; background: transparent; color: var(--text-muted, #8c8275);
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  cursor: pointer; white-space: nowrap; transition: all 0.15s ease;
}
.hclock-tab:hover { color: #f4ece1; }
.hclock-tab.active { background: rgba(245,158,11,0.22); color: #ffbe53; }

#room-pomodoro-clock.hidden, #personal-clock-header.hidden { display: none !important; }

.personal-clock-header {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.4);
  white-space: nowrap;
}
.personal-clock-header #personal-time-display {
  font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: 1px;
  color: #7dd3fc; font-variant-numeric: tabular-nums;
}
.personal-clock-header #personal-phase-badge {
  font-size: 11px; max-width: 150px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.hclock-ctrl {
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06);
  color: #e8e0d4; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: all 0.15s ease;
}
.hclock-ctrl:hover { background: rgba(245,158,11,0.2); border-color: rgba(245,158,11,0.5); }
.hclock-ctrl.running { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.5); }

.pwa-header-btn { width: auto !important; margin: 0 !important; padding: 5px 10px !important; font-size: 12px !important; flex-shrink: 0; }

@media (max-width: 900px) {
  .hclock-switch .hclock-tab { font-size: 11px; padding: 2px 8px; }
  .personal-clock-header { padding: 4px 8px; gap: 6px; }
  .personal-clock-header #personal-time-display { font-size: 1.2rem; }
  .personal-clock-header #personal-phase-badge { display: none; }
  .pwa-header-btn { padding: 4px 8px !important; font-size: 11px !important; }
}

/* ===== Header: căn giữa tuyệt đối (ngang + dọc) ===== */
.app-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-content: initial;
}
.app-header-left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.app-header-center {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.app-header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Căn giữa dọc cho nội dung các đồng hồ */
.room-pomodoro-header { align-items: center; }
.room-pomodoro-header #room-pomo-text { align-items: center; }
.personal-clock-header { align-items: center; }
.hclock-switch, .hclock-tab { align-items: center; }

@media (max-width: 600px) {
  .app-header-brand-sub { display: none; }
  .app-header-right .occupancy-tag { font-size: 10px; padding: 3px 6px; }
  .room-pomodoro-header { padding: 4px 10px; }
  .room-pomodoro-header .pomo-prefix { display: none; }
}

/* ===== Khung đồng hồ hợp nhất: nút chuyển + đồng hồ trong 1 bound ===== */
.hclock-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(245,158,11,0.14), rgba(245,158,11,0.06));
  border: 1px solid rgba(245,158,11,0.42);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.hclock-box .room-pomodoro-header,
.hclock-box .personal-clock-header {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 2px 6px;
  border-radius: 999px;
}
.hclock-box .hclock-switch {
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.06);
}



/* Nút chia sẻ cạnh nút vào phòng */
.room-card-action { display: flex; gap: 6px; align-items: stretch; }
.room-card-action .btn-join-room { flex: 1 1 auto; width: auto; min-width: 0; }

.btn-share-room {
  flex: 0 0 36px;
  border-radius: 8px;
  border: 1px solid rgba(212, 168, 83, 0.4);
  background: rgba(212, 168, 83, 0.12);
  color: var(--gold-light, #f7d58b);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.btn-share-room:hover { background: rgba(212, 168, 83, 0.22); }

/* Thẻ phòng đang chờ mở */
.lobby-room-card.room-card-waiting {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}

/* ===== Modal chia sẻ (QR + link) ===== */
.share-room-card {
  width: min(92vw, 380px);
  padding: 16px 18px 18px;
  text-align: center;
}

.share-room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.share-room-head h2 { font-size: 15px; margin: 0; }

.share-close {
  background: none;
  border: none;
  color: var(--text-dim, #9a9a9a);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
}

.share-preview {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 168, 83, 0.28);
  border-radius: 14px;
  padding: 8px;
  margin: 2px 0 10px;
}

.share-preview img {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  border-radius: 10px;
}

.share-link-text {
  font-size: 10.5px;
  color: var(--text-dim, #9a9a9a);
  word-break: break-all;
  margin: 0 0 12px;
}

.share-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.share-actions .btn-primary,
.share-actions .btn-secondary { flex: 1 1 140px; }

.share-hint {
  font-size: 10.5px;
  color: var(--text-dim, #9a9a9a);
  opacity: 0.8;
  margin: 12px 0 0;
  line-height: 1.45;
}

/* Khối "đang chờ" ngay trong từng thẻ phòng */
.room-wait-inline {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fde68a;
  font-size: 10.5px;
  line-height: 1.6;
}

.room-wait-inline strong { color: #fef3c7; }

/* Hộp chờ của PHÒNG KHÁC (không phải mình đang chờ): nhạt hơn, chỉ để xem realtime */
.room-wait-inline.is-others {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-muted);
}
.room-wait-inline.is-others strong { color: var(--text-main); }

/* Thanh tiến độ nhỏ trong hộp chờ */
.wait-bar {
  display: block;
  height: 3px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.wait-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  transition: width 0.35s ease;
}
.room-wait-inline.is-others .wait-bar i {
  background: linear-gradient(90deg, #64748b, #94a3b8);
}

.btn-wait-mini {
  margin-left: 4px;
  padding: 2px 7px;
  font-size: 10px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.18);
  color: #fef3c7;
  cursor: pointer;
  font-family: var(--font-body);
}

.btn-wait-mini.danger {
  border-color: rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--text-dim, #9a9a9a);
}

.btn-wait-mini:hover { filter: brightness(1.15); }

/* Nút "Mời bạn vào cùng phòng" trong thẻ Bạn cùng phòng */
.btn-invite-inroom {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 11px;
  border-radius: 8px;
  border: 1px dashed rgba(212, 168, 83, 0.45);
  background: rgba(212, 168, 83, 0.08);
  color: var(--gold-light, #f7d58b);
  cursor: pointer;
  font-family: var(--font-body);
}

.btn-invite-inroom:hover { background: rgba(212, 168, 83, 0.16); }

/* 3 phòng "sắp ra mắt" (khoá) */
.lobby-room-card.locked-room {
  opacity: 0.72;
  filter: grayscale(0.85);
  cursor: default;
}

.lobby-room-card.locked-room:hover { filter: grayscale(0.6); }

.locked-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(212, 168, 83, 0.10), rgba(0, 0, 0, 0.42));
}

/* Icon SVG màu xám đặt giữa khung */
.locked-icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.9;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.locked-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lobby-room-card.locked-room:hover .locked-icon {
  color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}

.lobby-room-card.locked-room .btn-join-room {
  cursor: not-allowed;
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ===== CỘT TRÁI: TIẾN ĐỘ CÁ NHÂN (chỉ hiện trên màn hình rộng) ===== */
.focus-rail { display: none; }

@media (min-width: 1200px) {
  #app-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 380px;
  }

  .focus-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    overflow-y: auto;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-subtle);
  }
}

.rail-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px;
}

.rail-streak-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rail-flame { font-size: 20px; line-height: 1; }

.rail-streak-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.rail-streak-days {
  font-size: 30px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: #ffe0a3;
}

.rail-streak-label { font-size: 10.5px; color: var(--text-dim, #9a9a9a); }

/* Vòng tiến độ hôm nay */
.rail-ring {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(#f0b45a 0%, rgba(255, 255, 255, 0.09) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rail-ring::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--bg-card);
}

.rail-ring-text {
  position: relative;
  z-index: 1;
  font-size: 9.5px;
  color: #f7d58b;
  font-variant-numeric: tabular-nums;
}

/* Dải 7 ngày */
.rail-week {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin: 10px 0 6px;
}

.rail-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rail-day-label { font-size: 8.5px; color: var(--text-dim, #7f7f7f); }

.rail-day-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.rail-day-dot.is-done { background: #f0b45a; border-color: #f0b45a; }
.rail-day-dot.is-partial { background: rgba(240, 180, 90, 0.35); border-color: rgba(240, 180, 90, 0.7); }
.rail-day-dot.is-today { box-shadow: 0 0 0 2px rgba(240, 180, 90, 0.25); }

.rail-today-text {
  margin: 2px 0 0;
  font-size: 11px;
  color: #e8e2d6;
}

.rail-streak-hint {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim, #8a8a8a);
}

/* Tổng kết phiên */
.rail-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim, #b9b2a6);
  margin-bottom: 8px;
}

.rail-session-total { color: #f7d58b; font-variant-numeric: tabular-nums; }

.rail-session-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
}

.rail-session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  color: #ded6c8;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.rail-session-item b { color: #f7d58b; font-variant-numeric: tabular-nums; }
.rail-session-time { color: var(--text-dim, #8a8a8a); font-variant-numeric: tabular-nums; }

.rail-empty { font-size: 10.5px; color: var(--text-dim, #8a8a8a); }

/* ===== Rail: nút trợ giúp, trạng thái rỗng, live, ghi chú ===== */
.rail-help {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: var(--text-dim, #9a9a9a);
  font-size: 9.5px;
  line-height: 1;
  cursor: help;
  padding: 0;
  margin-left: 2px;
}

.rail-x {
  background: none;
  border: none;
  color: var(--text-dim, #9a9a9a);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
}

.rail-empty-state { padding: 2px 0 0; }

.rail-empty-title { margin: 0 0 4px; font-size: 12px; color: #e8e2d6; }

.rail-empty-desc { margin: 0 0 8px; font-size: 10.5px; line-height: 1.5; color: var(--text-dim, #8f8f8f); }

.rail-ghost-row {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.28);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

.rail-live { margin: 2px 0 6px; }

.rail-live-row {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #f0d9a8;
  margin-bottom: 5px;
}

.rail-live-count { font-variant-numeric: tabular-nums; }

.rail-live-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.rail-live-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #d4a853, #f0b45a);
  transition: width 0.8s linear;
}

/* Việc hôm nay trong rail: thu gọn */
.rail-tasks .tasks-container { max-height: 150px; overflow-y: auto; }
.rail-tasks .task-item { font-size: 10.5px; padding: 4px 6px; }
.rail-tasks .add-task-form { margin-top: 8px; }
.rail-note { border-color: rgba(212, 168, 83, 0.4); }

/* ===== Mobile/tablet: cột trái thành SIDEBAR TRÁI trượt (song song sidebar phải) ===== */
.btn-rail-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid rgba(212, 168, 83, 0.35);
  background: rgba(212, 168, 83, 0.1);
  color: var(--gold-light, #f7d58b);
  cursor: pointer;
  font-family: var(--font-body);
}

@media (max-width: 1199px) {
  .btn-rail-toggle { display: inline-flex; }

  .focus-rail {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 300px);
    height: 100%;
    height: 100dvh;
    background: #161412;
    border-right: 1px solid var(--border-gold);
    z-index: 1050;
    padding: 16px 14px;
    box-shadow: 10px 0 35px rgba(0, 0, 0, 0.85);
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .focus-rail.drawer-open { transform: translateX(0); }

  #rail-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(8, 7, 6, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1040;
  }

  #rail-backdrop.active { opacity: 1; pointer-events: auto; }
}

/* ===== Châm ngôn trong rail ===== */
.rail-quote {
  border-color: rgba(212, 168, 83, 0.28);
}

.rail-quote-text {
  margin: 2px 0 6px;
  padding-left: 9px;
  border-left: 2px solid rgba(212, 168, 83, 0.45);
  font-size: 11.5px;
  line-height: 1.62;
  color: #ece5d8;
  font-style: italic;
  transition: opacity 0.35s ease;
}

.rail-quote-author {
  margin: 0;
  font-size: 10px;
  color: var(--text-dim, #8a8a8a);
  text-align: right;
}

/* ===== Header trên mobile/tablet nhỏ: chống tràn (do thêm nút 📊) ===== */
@media (max-width: 900px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 0 8px;
    gap: 6px;
    overflow: hidden;
  }

  .app-header-left { gap: 6px; overflow: hidden; }

  .app-header-brand {
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
  }

  .btn-rail-toggle { padding: 3px 7px; }
  .app-header-center { gap: 4px; }
}

@media (max-width: 640px) {
  /* Chỉ còn logo, đủ chỗ cho nút 📊 + đồng hồ */
  .app-header-brand { display: none; }
  .app-header-right .occupancy-tag { display: none; }
  .hclock-switch .hclock-tab { font-size: 10px; padding: 2px 5px; }
  .room-pomodoro-header { padding: 4px 8px; gap: 6px; }
  .room-pomodoro-header .pomo-phase-badge { display: none; }
}

@media (max-width: 420px) {
  .pwa-header-btn { display: none; }
  .app-header-logo { width: 22px; height: 22px; }
  .hclock-switch .hclock-tab { font-size: 9.5px; padding: 2px 4px; }
}

/* ===== Màn hẹp ~360px: header siêu gọn (tab chỉ còn icon) ===== */
@media (max-width: 400px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 0 6px;
    gap: 4px;
  }

  .app-header-left { gap: 5px; }
  .app-header-logo { width: 20px; height: 20px; }
  .btn-rail-toggle { padding: 2px 6px; font-size: 13px; }

  .app-header-center { gap: 4px; }
  .hclock-box { gap: 4px; }

  /* Ẩn chữ, chỉ còn icon 🎯 / ⏰ — vẫn giữ đủ chức năng + tooltip */
  .hclock-switch { padding: 1px; }
  .hclock-switch .hclock-tab { font-size: 0; padding: 3px 6px; }
  .hclock-switch .hclock-tab::before { font-size: 12px; line-height: 1; }
  #hclock-mode-room::before { content: '🎯'; }
  #hclock-mode-personal::before { content: '⏰'; }

  .room-pomodoro-header { padding: 3px 7px; gap: 5px; }
  .room-pomodoro-header .pomo-time { font-size: 13px; }
  .personal-clock-header #personal-time-display { font-size: 13px; }
  .hclock-ctrl { padding: 2px 4px; font-size: 12px; }
}

/* ===== Dock điều khiển: 1 HÀNG 5 nút, không tràn, luôn hiển thị ===== */
@media (max-width: 420px) {
  #mobile-controller-bar {
    max-width: 100%;
    padding: 5px 7px;
    gap: 6px;
    border-radius: 16px;
  }

  .joystick-container, .joystick-base { width: 76px; height: 76px; }
  .joystick-stick { width: 34px; height: 34px; top: calc(50% - 17px); left: calc(50% - 17px); }
  .joystick-decor-ring { width: 50px; height: 50px; }

  .mobile-action-group {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  /* Bỏ "span 2" của nút Ra Sảnh cho vừa 5 cột; icon trên – nhãn dưới */
  .btn-mobile-action,
  .btn-mobile-action.btn-mobile-leave {
    grid-column: auto;
    width: 100%;
    height: 54px;
    flex-direction: column;
    gap: 1px;
    padding: 4px 1px;
    border-radius: 11px;
  }

  .btn-mobile-action .action-icon { font-size: 16px; }
  .btn-mobile-action .action-label {
    font-size: 8.5px;
    letter-spacing: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Nhường chỗ cho dock ở đáy để nút không bao giờ bị đẩy khỏi màn hình */
  .canvas-container {
    min-height: 180px;
    max-height: calc(100dvh - 235px);
  }
}

/* Máy thấp (≤680px chiều cao): thu joystick & dock thêm */
@media (max-width: 420px) and (max-height: 680px) {
  .joystick-container, .joystick-base { width: 68px; height: 68px; }
  .joystick-stick { width: 30px; height: 30px; top: calc(50% - 15px); left: calc(50% - 15px); }
  .joystick-decor-ring { width: 44px; height: 44px; }
  .btn-mobile-action { height: 48px; }
  .btn-mobile-action .action-icon { font-size: 15px; }
  .canvas-container { min-height: 160px; }
}

/* ===== Chốt an toàn: dock LUÔN hiện ở đáy, canvas tự co ===== */
@media (max-width: 420px) {
  #main-stage {
    justify-content: flex-start;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* Canvas được co giãn tự do (không chặn bởi min-height) để không đẩy dock ra ngoài */
  .canvas-container {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
  }

  #mobile-controller-bar {
    margin-top: auto;
    flex-shrink: 0;
  }
}

/* ===== Dock điều khiển: GHIM ĐÁY MÀN HÌNH (fixed) — không bao giờ bị cắt ===== */
@media (max-width: 900px) {
  #mobile-controller-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    z-index: 60;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }

  /* Chừa đúng chiều cao dock (JS đo) để canvas không bị dock che */
  #main-stage {
    padding-bottom: calc(var(--dock-h, 84px) + 10px);
  }

  /* Mini player nổi ngay TRÊN dock thay vì đè lên nút */
  .mobile-mini-player-bar {
    bottom: calc(var(--dock-h, 84px) + 8px);
  }
}

/* ===== Joystick NỔI TRONG SUỐT trên lớp pixel; dock đáy CHỈ CÒN NÚT ===== */
:root { --joy-h: 86px; }

/* Desktop: joystick không tồn tại (trước đây bị ẩn nhờ nằm trong dock) */
#virtual-joystick.joystick-container { display: none; }

@media (max-width: 900px) {
  /* --- Dock: chỉ còn cụm nút, 5 nút 1 hàng cho gọn --- */
  #mobile-controller-bar {
    justify-content: center;
    gap: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-action-group {
    flex: 1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .btn-mobile-action { height: 46px; }

  /* Nút Ra Sảnh không còn chiếm 2 cột */
  .btn-mobile-action.btn-mobile-leave { grid-column: auto; }

  /* --- Joystick: nổi trên canvas, nền kính trong suốt --- */
  #virtual-joystick.joystick-container {
    display: flex;
    position: fixed;
    left: 10px;
    bottom: calc(var(--dock-h, 84px) + 14px);
    z-index: 58;
    opacity: 0.78;
    transition: opacity 0.18s ease;
  }

  #virtual-joystick.joystick-container:active,
  #virtual-joystick.joystick-container:has(.joystick-base.active) { opacity: 1; }

  #virtual-joystick .joystick-base {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.16) 100%);
    border: 1.5px solid rgba(212, 168, 83, 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 0 10px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
  }

  #virtual-joystick .joystick-decor-ring { border-color: rgba(212, 168, 83, 0.3); }
  #virtual-joystick .joystick-axis-marker { color: rgba(255, 228, 175, 0.55); }
  #virtual-joystick .joystick-stick { opacity: 0.92; }

  /* Mini player nhạc nằm TRÊN joystick, không đè cần điều khiển */
  .mobile-mini-player-bar {
    bottom: calc(var(--dock-h, 84px) + 14px + var(--joy-h, 86px) + 8px);
  }
}

@media (max-width: 420px) {
  :root { --joy-h: 76px; }
}

@media (max-width: 420px) and (max-height: 680px) {
  :root { --joy-h: 68px; }
}

/* ===== Joystick: TO hơn, dời sang PHẢI, cách lề cho vừa ngón cái ===== */
@media (max-width: 900px) {
  #virtual-joystick.joystick-container {
    --joy-size: 120px;
    right: 18px;
    left: auto;
    bottom: calc(var(--dock-h, 84px) + 18px);
    width: var(--joy-size);
    height: var(--joy-size);
  }

  #virtual-joystick .joystick-base {
    width: var(--joy-size);
    height: var(--joy-size);
  }

  #virtual-joystick .joystick-stick {
    width: calc(var(--joy-size) * 0.44);
    height: calc(var(--joy-size) * 0.44);
    top: calc(50% - var(--joy-size) * 0.22);
    left: calc(50% - var(--joy-size) * 0.22);
  }

  #virtual-joystick .joystick-decor-ring {
    width: calc(var(--joy-size) * 0.7);
    height: calc(var(--joy-size) * 0.7);
  }

  #virtual-joystick .joystick-axis-marker { font-size: 10px; }
  #virtual-joystick .marker-up { top: 8px; }
  #virtual-joystick .marker-down { bottom: 8px; }
  #virtual-joystick .marker-left { left: 9px; }
  #virtual-joystick .marker-right { right: 9px; }

  :root { --joy-h: 120px; }
}

@media (max-width: 420px) {
  #virtual-joystick.joystick-container {
    --joy-size: 112px;
    right: 16px;
    bottom: calc(var(--dock-h, 84px) + 16px);
  }

  :root { --joy-h: 112px; }
}

@media (max-width: 420px) and (max-height: 680px) {
  #virtual-joystick.joystick-container { --joy-size: 104px; }
  :root { --joy-h: 104px; }
}

/* ===== Drawer rail TRÁI: header đóng + safe-area + vuốt (hỗ trợ mobile) ===== */
.rail-drawer-header { display: none; }

@media (max-width: 1199px) {
  .focus-rail {
    /* FIX: thiếu flex-direction nên các card bị xếp NGANG hàng trên mobile */
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: min(88vw, 320px);
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
    overflow-x: hidden;
  }

  /* Card luôn chiếm trọn bề ngang drawer, không co lại theo nội dung */
  .focus-rail .rail-card {
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  .rail-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 10px;
    padding: 4px 0 9px;
    background: #161412;
    border-bottom: 1px solid rgba(212, 168, 83, 0.22);
    flex-shrink: 0;
  }

  .rail-drawer-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--gold-accent, #d4a853);
    white-space: nowrap;
  }

  .rail-drawer-icon { font-size: 13px; }

  .rail-drawer-close {
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-body);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-main, #f4ece1);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .rail-drawer-close:active {
    background: rgba(224, 80, 56, 0.3);
    border-color: #ff5a5a;
    color: #fff;
  }
}

/* ===== Dock nút: DÃN ĐỀU khi phòng nhỏ chỉ còn 4 nút (nút Ra Sảnh bị ẩn) ===== */
@media (max-width: 900px) {
  .mobile-action-group {
    display: flex;
    flex: 1;
    gap: 4px;
    min-width: 0;
  }

  /* flex-basis 0 + grow 1 => nút nào còn hiện thì chia đều, nút bị display:none tự nhường chỗ */
  .mobile-action-group .btn-mobile-action {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    grid-column: auto;
  }
}