@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   BLUNK — Design System
   Black bg · Grey details · White bold type · Mobile-first
   ============================================================ */

.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: calc(14px + var(--safe-t)) 24px 12px !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

@media (max-width: 580px) {
  .topbar {
    padding: calc(10px + var(--safe-t)) 14px 8px !important;
  }
}

/* Party modal sheet needs overflow scroll */
#partyModalSheet {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Active party info chip on timer page */
#activePartyInfo {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 8px 0 0;
}

/* Timer page itself: flex column, fills height */
#timerPage {
  display: none;
  flex-direction: column;
  min-height: calc(100dvh - var(--nav-h) - var(--safe-b));
  position: relative !important;
}

#timerPage.active {
  display: flex;
}


:root {
  --bg: var(--t-bg-app, #08090c);
  --surface: var(--t-bg-card, #111218);
  --card: var(--t-bg-card, #111218);
  --card2: var(--t-bg-card-hover, #181922);
  --border: var(--t-border-subtle, rgba(255,255,255,0.08));
  --border-soft: var(--t-border-subtle, rgba(255,255,255,0.05));
  --text: var(--t-text-primary, #ffffff);
  --text-2: var(--t-text-secondary, #c5c6c7);
  --text-3: var(--t-text-muted, #8a9099);
  --text-4: var(--t-border-strong, #2a2a2a);
  --danger: #ff3b30;
  --danger-bg: rgba(255, 59, 48, 0.10);
  --success: #32d74b;
  --live: var(--t-text-primary, #ffffff);
  --radius: 12px;
  --radius-sm: 8px;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (display-mode: standalone) {
  :root {
    --safe-t: max(20px, env(safe-area-inset-top, 24px));
  }
}


/* ---- RESET ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', Helvetica, Arial, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
button,
select {
  font-family: inherit;
  outline: none;
  border: none;
  background: none;
}

select option {
  background-color: #0c0c0e !important;
  color: var(--text) !important;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   LAYOUT
   ============================================================ */

#app {
  position: relative;
  min-height: 100dvh;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  min-height: 100dvh;
}

.screen.active {
  display: flex;
}

/* Main app wrapper */
#mainApp {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Scrollable page content above nav */
.page {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--nav-h) + var(--safe-b) + 8px);
  min-height: 0;
}

.page.active {
  display: flex !important;
}

.page:not(.active) {
  display: none !important;
}

/* ============================================================
   BOTTOM NAV
   ============================================================ */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-h) + var(--safe-b));
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  padding-bottom: var(--safe-b);
  z-index: 99999 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

.bottom-nav.nav-hidden {
  transform: translateY(100%) !important;
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: none;
  border: none;
  cursor: pointer;
  height: var(--nav-h);
  padding: 0;
  position: relative;
}

.nav-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--text-3);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s;
}

.nav-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-3);
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-btn.active .nav-icon svg {
  stroke: var(--text);
}

.nav-btn.active .nav-label {
  color: var(--text);
}

.nav-notif-dot {
  position: absolute;
  top: 2px;
  right: calc(50% - 18px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  border: 1.5px solid var(--bg);
  display: none;
}

.nav-notif-dot.show {
  display: block;
}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */

#loginScreen {
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 40px 24px;
}

.login-inner {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.login-brand {
  text-align: center;
}

.login-brand-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--text);
  text-transform: uppercase;
  line-height: 1;
}

.login-brand-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 8px;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input-field {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 16px 18px;
  transition: border-color 0.2s;
}

.input-field::placeholder {
  color: var(--text-3);
  font-weight: 500;
}

.input-field:focus {
  border-color: var(--text-3);
}

.input-field.error {
  border-color: var(--danger);
}

.btn-primary {
  width: 100%;
  padding: 16px;
  background: var(--text);
  color: #000;
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: transform 0.15s, opacity 0.15s;
}

.btn-primary:active {
  transform: scale(0.97);
  opacity: 0.9;
}

.btn-secondary {
  width: 100%;
  padding: 16px;
  background: var(--card);
  color: var(--text-2);
  border: none;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}

.btn-secondary:active {
  background: rgba(255, 255, 255, 0.06);
}

.btn-danger {
  width: 100%;
  padding: 16px;
  background: var(--danger-bg);
  color: var(--danger);
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: opacity 0.15s, transform 0.15s;
}

.btn-danger:active {
  transform: scale(0.97);
  opacity: 0.8;
}

.btn-sm {
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

/* ============================================================
   TOP BAR (shared)
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(16px + var(--safe-t)) 20px 14px;
  flex-shrink: 0;
}

.topbar-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-brand {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--text);
}

/* ============================================================
   AVATAR
   ============================================================ */

.avatar {
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border: 1px solid var(--border);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.avatar-initials {
  font-weight: 800;
  color: #ffffff !important;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  user-select: none;
  font-family: inherit;
  letter-spacing: -0.02em;
}

.avatar-sm {
  width: 34px;
  height: 34px;
}

.avatar-sm .avatar-initials {
  font-size: 13px;
}

.avatar-md {
  width: 48px;
  height: 48px;
}

.avatar-md .avatar-initials {
  font-size: 16px;
}

.avatar-lg {
  width: 72px;
  height: 72px;
}

.avatar-lg .avatar-initials {
  font-size: 24px;
}

.avatar-xl {
  width: 96px;
  height: 96px;
}

.avatar-xl .avatar-initials {
  font-size: 32px;
}

/* ============================================================
   LEVEL BADGE
   ============================================================ */

.lvl-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--card2);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-2);
}

/* ============================================================
   XP BAR
   ============================================================ */

.xp-bar-wrap {
  width: 100%;
  height: 3px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  background: var(--text);
  border-radius: 99px;
  transition: width 0.6s ease;
}

/* ============================================================
   TIMER SCREEN (Saat)
   ============================================================ */

/* ============================================================
   TIMER PAGE — Redesigned
   ============================================================ */

/* Top meta: level + XP + total */
/* Top meta: level + XP + total */
.timer-top-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: space-between !important;
  column-gap: 16px !important;
  padding: var(--safe-t, 0px) 20px 0 !important;
  flex-shrink: 0 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: calc(60px + var(--safe-t, 0px)) !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid var(--border-soft) !important;
  background: var(--bg) !important;
  z-index: 100 !important;
  opacity: 1 !important;
  transform: none !important;
  overflow: hidden !important;
}

.timer-top-meta > * {
  min-width: 0 !important;
}

.timer-top-meta > div:first-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-self: start !important;
}

.timer-level-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  z-index: 2 !important;
}

.timer-lvl-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}

.timer-xp-rail {
  width: 70px !important;
  height: 3px !important;
  background: var(--t-border-strong) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
}

.timer-xp-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6) !important;
  border-radius: 99px !important;
  transition: width 0.8s cubic-bezier(.2, .8, .3, 1) !important;
}

.timer-xp-fill.gained {
  animation: xpGlow 1.2s ease forwards !important;
}

@keyframes xpGlow {
  0% { box-shadow: none; }
  30% { box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.6); }
  100% { box-shadow: none; }
}

.timer-xp-txt {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  letter-spacing: 0.5px !important;
  transition: color 0.4s !important;
  white-space: nowrap !important;
}

.timer-xp-txt.gained {
  color: var(--text) !important;
}

/* Center: Dead-Center Status Chip */
.timer-status-chip {
  justify-self: center !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-width: 154px !important;
  padding: 0 14px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  user-select: none !important;
  z-index: 25 !important;
  overflow: hidden !important;
  margin: 0 !important;
  transition: min-width 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.timer-status-chip:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--border) !important;
}

.timer-status-chip:active {
  transform: scale(0.97) !important;
  transition: transform 0.08s ease !important;
}

.status-chip-avatar {
  position: absolute !important;
  top: 50% !important;
  left: 12px !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
  opacity: 0;
  pointer-events: none !important;
}

.status-chip-username {
  position: absolute !important;
  top: 50% !important;
  left: 42px !important;
  transform: translateY(-50%) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  opacity: 0;
  pointer-events: none !important;
  max-width: 75px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.status-chip-text {
  position: absolute !important;
  top: 50% !important;
  left: 48% !important;
  transform: translate(-48%, -50%) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.38) !important;
  letter-spacing: 1.35px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.timer-status-dot {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  transition: background 0.4s ease !important;
  pointer-events: none !important;
  z-index: 12 !important;
}

.timer-status-dot[data-status="online"] {
  background: #4ade80 !important;
  box-shadow: 0 0 8px #4ade80 !important;
}

.timer-status-dot[data-status="away"] {
  background: #fbbf24 !important;
  box-shadow: 0 0 8px #fbbf24 !important;
}

.timer-status-dot[data-status="dnd"] {
  background: #ef4444 !important;
  box-shadow: 0 0 8px #ef4444 !important;
}

.timer-status-dot[data-status="invisible"] {
  background: #9ca3af !important;
  box-shadow: 0 0 8px #9ca3af !important;
}

.timer-status-dot.live {
  background: #a855f7 !important;
  box-shadow: 0 0 10px #a855f7 !important;
}

.timer-status-dot.bad {
  background: #ef4444 !important;
  box-shadow: 0 0 8px #ef4444 !important;
}

.timer-status-dot.good {
  background: #22c55e !important;
  box-shadow: 0 0 8px #22c55e !important;
}

/* Right: Total Focus Time Chip */
.timer-total-chip {
  justify-self: end !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 3px !important;
  line-height: 1 !important;
}

.timer-total-val {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -0.2px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

.timer-total-lbl {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  color: #80848e !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Responsive Styles */
@media (max-width: 767px) {
  .timer-top-meta {
    padding: var(--safe-t, 0px) 16px 0 !important;
    column-gap: 8px !important;
  }
  
  .timer-xp-rail,
  .timer-xp-txt {
    display: none !important;
  }
  
  .timer-level-chip {
    gap: 4px !important;
  }
  
  .blunk-topbar-brand {
    font-size: 13px !important;
    letter-spacing: 1px !important;
  }
  
  .timer-lvl-badge {
    font-size: 9px !important;
    padding: 1px 4px !important;
  }
  
  .timer-status-chip {
    height: 28px !important;
    min-width: 120px !important;
    padding: 0 10px !important;
  }
  
  .timer-total-val {
    font-size: 11px !important;
  }
  
  .timer-total-lbl {
    font-size: 7.5px !important;
  }
}

/* Duel area */
.timer-duel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  position: relative;
  min-height: 0;
}

/* Solo mode */
.timer-solo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  position: relative;
}

/* ══════════════════════════════════════════════
   STATUS POPOVER MENU  (.spm)
   Premium desktop-app context-menu aesthetic
   ══════════════════════════════════════════════ */

/* Click-outside overlay */
#statusPopoverOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99998;
}

/* Menu shell */
.spm {
  position: fixed;
  display: none;
  flex-direction: column;
  width: 240px;
  padding: 5px;
  border-radius: 16px;
  z-index: 99999;
  background: rgba(15, 15, 17, 0.97);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 1px solid var(--border);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 20px 48px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: scale(0.92) translateY(4px);
  transition:
    opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.spm.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* ── Header ── */
.spm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 10px;
}

.spm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.08);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.1);
}

.spm-header-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.spm-display-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.spm-handle {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.32);
  margin-top: 2px;
}

/* ── Divider ── */
.spm-divider {
  height: 1px;
  margin: 1px 6px 2px;
  background: rgba(255, 255, 255, 0.07);
}

/* ── Section label ── */
.spm-section-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  padding: 5px 12px 3px;
}

/* ── Item ── */
.spm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}

.spm-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.spm-item:active {
  background: var(--card);
  transform: scale(0.98);
}

.spm-item.active {
  background: var(--card);
}

/* ── Dot ── */
.spm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--c, #4ade80);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 8px var(--c, #4ade80);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.spm-item:hover .spm-dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 14px var(--c, #4ade80);
}

.spm-item.active .spm-dot {
  transform: scale(1.2);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 16px var(--c, #4ade80);
}

/* ── Item text ── */
.spm-item-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.spm-item-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.2;
}

.spm-item.active .spm-item-label {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.spm-item-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.28);
  margin-top: 2px;
}

/* ── Check mark ── */
.spm-check {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.15s ease,
    transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.spm-item.active .spm-check {
  opacity: 1;
  transform: scale(1);
}



/* ═══════════════════════════════════════════════════════
   STATUS CHIP — Web Animations API Edition
   All motion driven by JS. CSS = layout + color only.
   ═══════════════════════════════════════════════════════ */

/* Legacy status chip styles removed to prevent conflicts */

/* Profile state: wider */
.timer-status-chip.state-profile {
  min-width: 158px;
}

/* ── Avatar (hidden by default, JS-animated) ── */
.status-chip-avatar {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.4);
  /* Default: hidden + off to the right (ready to enter from right) */
  opacity: 0;
  transform: translateY(-50%) translateX(32px) scale(0.6);
  pointer-events: none;
  will-change: transform, opacity;
}

/* ── Username (hidden by default, JS-animated) ── */
.status-chip-username {
  position: absolute;
  top: 50%;
  left: 36px;
  transform: translateY(-50%) translateX(18px);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.15px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ── Status text (visible by default, centered) ── */
.status-chip-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 1.35px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ── Status dot (visible by default, pinned right) ── */
.timer-status-dot {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  /* Only background color transitions via CSS */
  transition: background 0.4s ease;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes metallicShimmer {
  0%,
  100% {
    color: rgba(255, 255, 255, 0.88);
    text-shadow: none;
  }

  45% {
    color: rgba(255, 255, 255, 0.5);
    text-shadow: none;
  }

  58% {
    color: var(--text);
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.55), 0 0 28px rgba(255, 255, 255, 0.15);
  }

  75% {
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.25);
  }
}

/* ── Focus state (JS still stops cycling; CSS sets the look) ── */
.timer-status-chip.state-focus {
  min-width: 160px;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  cursor: default;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-direction: row !important;
}

.timer-status-chip.state-focus:hover {
  transform: none;
}

.timer-status-chip.state-focus .status-chip-text {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  order: 1 !important;
  margin: 0 !important;
  color: #ff5248;
  letter-spacing: 1.5px;
}

.timer-status-chip.state-focus .timer-status-dot {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  order: 2 !important;
  margin: 0 !important;
  background: #ff4540 !important;
}

/* ── Legacy dot states used by party/duel system ── */




.timer-status-dot.bad {
  background: var(--danger);
  animation: dot-danger 1s infinite;
}

.timer-status-dot.good {
  background: var(--success);
}

.timer-display-solo {
  font-size: 80px;
  font-weight: 800;
  letter-spacing: -4px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
  transition: color 0.3s, transform 0.1s ease-out;
}

.timer-display-solo.violated {
  color: var(--danger);
}

.timer-display-solo.active-pulse {
  animation: timerPulse 2.5s infinite ease-in-out;
}

.timer-display-solo.ticking {
  transform: none !important;
}

@keyframes timerPulse {
  0% {
    opacity: 0.9;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.9;
  }
}

/* Timer Streak Danger Alert Banner */
.timer-streak-alert-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 14px auto;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(245, 158, 11, 0.1);
  cursor: pointer;
  width: fit-content;
  max-width: 90%;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.timer-streak-alert-banner.streak-danger {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  animation: streakAlertPulse 2.6s ease-in-out infinite;
}

.timer-streak-alert-banner.streak-danger .streak-alert-icon {
  color: #f59e0b;
}

.timer-streak-alert-banner.streak-danger .streak-alert-title {
  color: #fbbf24;
}

.timer-streak-alert-banner.streak-danger .streak-alert-action {
  color: rgba(255, 255, 255, 0.85);
  border-left-color: rgba(245, 158, 11, 0.3);
}

.timer-streak-alert-banner.streak-secured {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  animation: none;
}

.timer-streak-alert-banner.streak-secured .streak-alert-icon {
  color: #10b981;
}

.timer-streak-alert-banner.streak-secured .streak-alert-title {
  color: #34d399;
}

.timer-streak-alert-banner.streak-secured .streak-alert-action {
  color: rgba(255, 255, 255, 0.65);
  border-left-color: rgba(16, 185, 129, 0.25);
}

.timer-streak-alert-banner.streak-zero {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  animation: none;
}

.timer-streak-alert-banner.streak-zero .streak-alert-icon {
  color: rgba(255, 255, 255, 0.4);
}

.timer-streak-alert-banner.streak-zero .streak-alert-title {
  color: rgba(255, 255, 255, 0.7);
}

.timer-streak-alert-banner.streak-zero .streak-alert-action {
  color: rgba(255, 255, 255, 0.45);
  border-left-color: rgba(255, 255, 255, 0.12);
}

.timer-streak-alert-banner:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.timer-streak-alert-banner:active {
  transform: scale(0.98);
}

.streak-alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  flex-shrink: 0;
}

.streak-alert-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1;
}

.streak-alert-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.streak-alert-action {
  font-weight: 500;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

@keyframes streakAlertPulse {
  0%, 100% {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 0 0 0 rgba(245, 158, 11, 0.2);
  }
  50% {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 0 12px 2px rgba(245, 158, 11, 0.28);
  }
}

/* ==========================================================================
   INTEGRATED SAND FRAMING HOURGLASS (FRAME & DIGITAL CLOCK)
   ========================================================================== */
.timer-hourglass-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  user-select: none;
  position: relative;
}

.hg-chamber {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.hg-chamber-top {
  margin-bottom: 2px;
}

.hg-chamber-bottom {
  margin-top: 2px;
}

.hg-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hg-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.25s ease;
}

[data-theme="light"] .hg-dot {
  background: rgba(0, 0, 0, 0.12);
}

.hg-dot.active {
  background: var(--text, #ffffff);
}

[data-theme="light"] .hg-dot.active {
  background: #0f172a;
}

/* Break Mode Colors */
.timer-hourglass-frame.is-break .hg-dot.active {
  background: #38bdf8;
}

/* Digital Clock Nestled Inside the Frame */
.timer-display-solo.hg-integrated-display {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(10px, 2.5vw, 24px) !important;
  margin: 4px 0 !important;
  line-height: 0.9 !important;
  white-space: nowrap !important;
  transform: none !important;
}

.hg-digit-block {
  display: inline-block !important;
  font-size: clamp(75px, 14vw, 140px) !important;
  font-weight: 900 !important;
  letter-spacing: -4px !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 0.9 !important;
  color: var(--text) !important;
  flex-shrink: 0 !important;
  text-align: center !important;
}

.hg-sec-group {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 0.9 !important;
}

.hg-digit-small {
  position: absolute !important;
  left: 100% !important;
  bottom: clamp(4px, 1vw, 12px) !important;
  margin-left: clamp(4px, 0.8vw, 8px) !important;
  font-size: clamp(18px, 2.6vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  color: var(--text-3, rgba(255, 255, 255, 0.6)) !important;
  pointer-events: none !important;
  user-select: none !important;
  white-space: nowrap !important;
  transition: opacity 0.25s ease !important;
}

/* Center Hourglass Column Nestled between Minutes & Seconds */
.hg-center-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

/* Center Stream Channel connecting top and bottom chambers */
.hg-stream-channel {
  position: relative;
  width: clamp(14px, 2vw, 24px);
  height: clamp(36px, 6vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Falling Drop Stream with Reference LED Dot + Trail */
.falling-drop {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text, #ffffff);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.falling-drop::after {
  display: none;
}

[data-theme="light"] .falling-drop {
  background: #0f172a;
}

[data-theme="light"] .falling-drop::after {
  display: none;
}

.timer-hourglass-frame.is-break .falling-drop {
  background: #38bdf8;
}

.timer-hourglass-frame.is-break .falling-drop::after {
  display: none;
}

.falling-drop {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.falling-drop.is-dropping {
  animation: dropStream 0.65s cubic-bezier(0.35, 0, 0.65, 1) forwards;
}

@keyframes dropStream {
  0% {
    opacity: 0;
    top: 0%;
    transform: translateX(-50%) scale(0.6);
  }
  6% {
    opacity: 1;
    top: 2%;
    transform: translateX(-50%) scale(1);
  }
  94% {
    opacity: 1;
    top: 98%;
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 0;
    top: 100%;
    transform: translateX(-50%) scale(0.5);
  }
}

@media (min-width: 1025px) {
  .timer-hourglass-frame {
    margin: 8px auto 16px auto !important;
  }

  .hg-chamber {
    gap: 6px !important;
  }

  .hg-chamber-top {
    margin-bottom: 6px !important;
  }

  .hg-chamber-bottom {
    margin-top: 6px !important;
  }

  .hg-row {
    gap: 7px !important;
  }

  .hg-dot {
    width: 5.5px !important;
    height: 5.5px !important;
  }

  .hg-dot.active {
  }

  .timer-hourglass-frame.is-break .hg-dot.active {
  }

  .timer-display-solo.hg-integrated-display {
    gap: clamp(18px, 2.8vw, 36px) !important;
    margin: 6px 0 !important;
  }

  .hg-stream-channel {
    width: clamp(20px, 2.2vw, 32px) !important;
    height: clamp(85px, 14vw, 150px) !important;
    padding: 14px 0 !important;
  }

  .hg-colon-dot {
    width: clamp(10px, 1.2vw, 15px) !important;
    height: clamp(10px, 1.2vw, 15px) !important;
  }

  .falling-drop {
    width: 5px !important;
    height: 46px !important;
  }
}

/* Bidirectional Apple Fluid Transitions for Timer Elements */
#timerTopMeta,
#timerControlsBar,
#pomoRoundBadge,
.timer-status-text,
#timerBonusIndicator,
#pomoOvertimeBox,
#pomoPhaseIndicator,
#pomoBreakPhase,
#unratedSessionBanner,
.bottom-nav,
.mobile-nav,
.navbar,
header {
  transition: opacity 0.55s cubic-bezier(0.19, 1, 0.22, 1),
              transform 0.55s cubic-bezier(0.19, 1, 0.22, 1),
              filter 0.55s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.timer-main-stage,
.timer-hourglass-frame,
.timer-display-solo,
.hg-chamber,
.timer-real-clock {
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

/* ==========================================================================
   ZEN FULLSCREEN IMMERSIVE MODE (REFERENCED RETRO-FUTURISTIC DISPLAY)
   ========================================================================== */
body.zen-fullscreen-mode {
  overflow: hidden !important;
  background: #000000 !important;
  cursor: default !important;
}

body.zen-fullscreen-mode #timerTopMeta,
body.zen-fullscreen-mode #timerControlsBar,
body.zen-fullscreen-mode #pomoRoundBadge,
body.zen-fullscreen-mode .timer-status-text,
body.zen-fullscreen-mode #timerBonusIndicator,
body.zen-fullscreen-mode #pomoOvertimeBox,
body.zen-fullscreen-mode #pomoPhaseIndicator,
body.zen-fullscreen-mode #pomoBreakPhase,
body.zen-fullscreen-mode #unratedSessionBanner,
body.zen-fullscreen-mode #timerStreakAlertBanner,
body.zen-fullscreen-mode .timer-streak-alert-banner,
body.zen-fullscreen-mode .bottom-nav,
body.zen-fullscreen-mode .mobile-nav,
body.zen-fullscreen-mode .navbar,
body.zen-fullscreen-mode header,
body.zen-fullscreen-mode footer,
body.zen-fullscreen-mode nav,
body.zen-fullscreen-mode .sidebar,
body.zen-fullscreen-mode [class*="party"],
body.zen-fullscreen-mode [id*="party"],
body.zen-fullscreen-mode [class*="voice"],
body.zen-fullscreen-mode [id*="voice"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Zen Mode Real-Time Date & Clock: Clean Floating Pill */
body.zen-fullscreen-mode .timer-real-clock {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  position: fixed !important;
  top: max(20px, env(safe-area-inset-top, 20px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2147483645 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(18, 20, 28, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 6px 18px !important;
  border-radius: 9999px !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
  white-space: nowrap !important;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.streak-alert-action:empty {
  display: none !important;
}

[data-theme="light"] body.zen-fullscreen-mode .timer-real-clock {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: rgba(23, 32, 51, 0.6) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
}

body.zen-fullscreen-mode .timer-main-stage:has(.timer-hourglass-frame.is-break) .timer-real-clock {
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: rgba(56, 189, 248, 0.85) !important;
  background: rgba(14, 26, 36, 0.65) !important;
}

[data-theme="light"] body.zen-fullscreen-mode .timer-main-stage:has(.timer-hourglass-frame.is-break) .timer-real-clock {
  border-color: rgba(14, 165, 233, 0.25) !important;
  color: #0284c7 !important;
  background: rgba(240, 249, 255, 0.85) !important;
}

/* OLED Pure Black Stage Covering Everything Seamlessly */
body.zen-fullscreen-mode,
body.zen-fullscreen-mode #timerPage,
body.zen-fullscreen-mode #timerPage.active,
body.zen-fullscreen-mode .timer-main-stage,
body.zen-fullscreen-mode .timer-duel,
body.zen-fullscreen-mode .timer-solo {
  background: #000000 !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="light"] body.zen-fullscreen-mode,
[data-theme="light"] body.zen-fullscreen-mode #timerPage,
[data-theme="light"] body.zen-fullscreen-mode #timerPage.active,
[data-theme="light"] body.zen-fullscreen-mode .timer-main-stage,
[data-theme="light"] body.zen-fullscreen-mode .timer-duel,
[data-theme="light"] body.zen-fullscreen-mode .timer-solo {
  background: #f5f7fb !important;
}

body.zen-fullscreen-mode {
  -webkit-user-select: none !important;
  user-select: none !important;
}

body.zen-fullscreen-mode ::selection {
  background: transparent !important;
  color: inherit !important;
}

body.zen-fullscreen-mode .timer-main-stage {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 2147483640 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: default !important;
  overflow: hidden !important;
}

body.zen-fullscreen-mode .timer-duel {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
}

body.zen-fullscreen-mode .timer-solo {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* Reference Hourglass Vertical Framework: Relative Stage for Full-Length Stream */
body.zen-fullscreen-mode .timer-hourglass-frame {
  position: relative !important;
  width: 100vw !important;
  height: auto !important;
  max-height: 96vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.8vh, 24px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Reference Digital Clock Display: Large Screen-Filling Monumental Scale */
body.zen-fullscreen-mode .timer-display-solo,
body.zen-fullscreen-mode .timer-display-solo.hg-integrated-display {
  width: 100vw !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(40px, 8vw, 140px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  font-size: min(34vw, 72vh) !important;
  line-height: 0.84 !important;
  font-weight: 850 !important;
  letter-spacing: -0.05em !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

body.zen-fullscreen-mode.timer-has-hours .timer-display-solo,
body.zen-fullscreen-mode.timer-has-hours .timer-display-solo.hg-integrated-display {
  font-size: min(29vw, 64vh) !important;
  gap: clamp(24px, 5.5vw, 90px) !important;
}

body.zen-fullscreen-mode .hg-digit-block {
  display: inline-block !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-family: inherit !important;
  font-variant-numeric: tabular-nums !important;
}

body.zen-fullscreen-mode .hg-sec-group {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: inherit !important;
}

body.zen-fullscreen-mode .hg-digit-small {
  position: absolute !important;
  left: 100% !important;
  bottom: min(3vh, 2vw) !important;
  margin-left: clamp(6px, 1vw, 14px) !important;
  font-size: min(3.8vw, 8vh) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  font-family: inherit !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(255, 255, 255, 0.45) !important;
  white-space: nowrap !important;
}

[data-theme="light"] body.zen-fullscreen-mode .hg-digit-small {
  color: rgba(23, 32, 51, 0.4) !important;
}

/* Center Stream Channel: Fixed Axis Connecting Upper & Lower Chambers */
body.zen-fullscreen-mode .hg-stream-channel {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 2147483646 !important;
  width: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

/* Prominent, beautifully scaled hourglass chambers */
body.zen-fullscreen-mode .hg-chamber {
  transform: scale(2.0) !important;
  z-index: 80 !important;
}

body.zen-fullscreen-mode .hg-dot {
  width: 5px !important;
  height: 5px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body.zen-fullscreen-mode .hg-dot.active {
  background: #ffffff !important;
}

body.zen-fullscreen-mode .timer-hourglass-frame.is-break .hg-dot.active {
  background: #38bdf8 !important;
}

/* REALISTIC REFERENCE FALLING DROP (Zen Fullscreen) */
body.zen-fullscreen-mode .falling-drop {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 0 !important;
  width: 4px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7) !important;
  opacity: 0;
  z-index: 2147483647 !important;
  pointer-events: none !important;
}

body.zen-fullscreen-mode .falling-drop::after {
  display: none !important;
}

[data-theme="light"] body.zen-fullscreen-mode .falling-drop {
  background: #0f172a !important;
  box-shadow: 0 0 4px rgba(15, 23, 42, 0.4) !important;
}

body.zen-fullscreen-mode .timer-hourglass-frame.is-break .falling-drop {
  background: #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.7) !important;
}

body.zen-fullscreen-mode .timer-hourglass-frame.is-break .falling-drop::after {
  display: none !important;
}

body.zen-fullscreen-mode .falling-drop.is-dropping {
  animation: dropStreamZen 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards !important;
}

@keyframes dropStreamZen {
  0% {
    opacity: 0;
    top: 0%;
    transform: translateX(-50%) scale(0.7);
  }
  8% {
    opacity: 1;
    top: 5%;
    transform: translateX(-50%) scale(1);
  }
  88% {
    opacity: 1;
    top: 93%;
    transform: translateX(-50%) scale(1);
  }
  98% {
    opacity: 0.8;
    top: 100%;
    transform: translateX(-50%) scale(1.2);
  }
  100% {
    opacity: 0;
    top: 100%;
    transform: translateX(-50%) scale(0.3);
  }
}

/* Zen exit cinematic transition — seamless smooth stage retreat */
body.zen-exiting .timer-main-stage {
  opacity: 0 !important;
  transform: scale(0.97) !important;
  filter: blur(4px) !important;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), filter 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.zen-exiting .timer-real-clock {
  opacity: 0 !important;
  transform: translate(-50%, -12px) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

body.zen-exiting #zenRoomHud,
body.zen-exiting #zenVoiceHud {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

/* Pause & Resume Button Styles */
.timer-pause-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.4px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-top: 12px;
}

.timer-pause-btn:hover {
  background: rgba(245, 158, 11, 0.24);
  color: #fef3c7 !important;
  border-color: rgba(245, 158, 11, 0.6);
  transform: scale(1.03);
}

.timer-pause-btn:active {
  transform: scale(0.97);
  background: rgba(245, 158, 11, 0.35);
}

.timer-resume-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  background: rgba(16, 185, 129, 0.14);
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.4px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-top: 12px;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
}

.timer-resume-btn:hover {
  background: rgba(16, 185, 129, 0.28);
  color: #ecfdf5 !important;
  border-color: rgba(16, 185, 129, 0.7);
  transform: scale(1.03);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.timer-resume-btn:active {
  transform: scale(0.97);
  background: rgba(16, 185, 129, 0.4);
}

.timer-extend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  color: var(--text-3, #888888) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-top: 12px;
}

.timer-extend-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #ffffff) !important;
  border-color: rgba(255, 255, 255, 0.22);
  transform: scale(1.02);
}

.timer-extend-btn:active {
  transform: scale(0.98);
}

[data-theme="light"] .timer-extend-btn {
  border-color: rgba(0, 0, 0, 0.12);
  color: #64748b !important;
}

[data-theme="light"] .timer-extend-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.25);
}

.timer-aux-panel {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.focus-bank-shield {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  color: var(--text-3, #71717a);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.pomo-autocycle-pill {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  color: var(--text-3, #71717a);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
}

.pomo-autocycle-pill:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text, #ffffff);
}

.pomo-autocycle-pill.active {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text, #ffffff);
}

.pomo-autocycle-pill .autocycle-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3, #52525b);
  transition: all 0.2s ease;
}

.pomo-autocycle-pill.active .autocycle-indicator {
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .pomo-autocycle-pill {
  border-color: rgba(0, 0, 0, 0.1);
  color: #64748b;
}

[data-theme="light"] .pomo-autocycle-pill:hover,
[data-theme="light"] .pomo-autocycle-pill.active {
  border-color: rgba(0, 0, 0, 0.22);
  color: #0f172a;
}

[data-theme="light"] .pomo-autocycle-pill.active .autocycle-indicator {
  background: #0f172a;
  box-shadow: 0 0 4px rgba(15, 23, 42, 0.3);
}

body.zen-fullscreen-mode .timer-aux-panel {
  display: none !important;
}

/* --- CLOCK SCREEN RESPONSIVE ALIGNMENT ACROSS ALL DEVICES --- */

/* Mobile Portrait */
@media (max-width: 767px) and (orientation: portrait) {
  .timer-main-stage {
    padding: 16px 12px 16px !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: calc(100vh - 150px) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .timer-hourglass-frame {
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .timer-display-solo.hg-integrated-display {
    gap: clamp(8px, 3vw, 16px) !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .hg-digit-block {
    font-size: clamp(54px, 17vw, 84px) !important;
    letter-spacing: -2px !important;
  }
  .hg-digit-small {
    font-size: clamp(14px, 4vw, 22px) !important;
    bottom: 2px !important;
    margin-left: 3px !important;
  }
  .hg-stream-channel {
    height: clamp(26px, 7vw, 44px) !important;
    width: clamp(10px, 2vw, 16px) !important;
  }
  .timer-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

/* Mobile Landscape (when Zen is not active) */
/* Mobile Landscape: Centered Expanded Clock & Floating Focus Room FAB */
@media (max-height: 540px) and (orientation: landscape), (max-width: 920px) and (orientation: landscape) {
  #timerPage.active {
    padding: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
  }
  #timerPage.active .timer-top-meta {
    display: none !important;
  }
  #timerPage.active .timer-main-stage {
    padding: 4px calc(16px + env(safe-area-inset-left)) 6px calc(16px + env(safe-area-inset-right)) !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    gap: 2px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #timerPage.active .timer-solo {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #timerPage.active .timer-hourglass-frame {
    margin: 0 auto !important;
    gap: clamp(2px, 1.2vh, 6px) !important;
    transform: none !important;
  }
  #timerPage.active .hg-chamber {
    transform: scale(0.9) !important;
    transform-origin: center center !important;
  }
  #timerPage.active .hg-digit-block {
    font-size: clamp(44px, 20vh, 76px) !important;
    line-height: 0.88 !important;
    letter-spacing: -2px !important;
  }
  #timerPage.active.timer-has-hours .hg-digit-block {
    font-size: clamp(38px, 16vh, 60px) !important;
  }
  #timerPage.active .hg-stream-channel {
    height: clamp(16px, 6vh, 28px) !important;
  }
  #timerPage.active .timer-status-text {
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }
  #timerPage.active .timer-controls {
    margin-top: 4px !important;
    gap: 8px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  #timerPage.active .timer-stop-btn,
  #timerPage.active .timer-pause-btn,
  #timerPage.active .timer-resume-btn,
  #timerPage.active .timer-start-btn {
    padding: 6px 16px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 11px !important;
  }
  /* Floating Focus Rooms Button (FAB) anchored to bottom-right */
  #timerPage.active #soloPartyControlsRow {
    position: fixed !important;
    right: calc(16px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    left: auto !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #timerPage.active #soloPartyControlsRow #timerSoloPartyBtn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    background: rgba(18, 22, 29, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  #timerPage.active #soloPartyControlsRow #timerSoloPartyBtn:hover {
    transform: scale(1.06) !important;
    background: rgba(28, 34, 46, 0.96) !important;
    color: #ffffff !important;
  }
  #timerPage.active #timerAuxPanel {
    display: none !important;
  }
}

/* Tablet screens (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .timer-main-stage {
    padding: 24px 20px !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .timer-hourglass-frame {
    margin: 0 auto !important;
  }
  .hg-digit-block {
    font-size: clamp(80px, 12vw, 120px) !important;
  }
}

.timer-status-text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-3);
  text-align: center;
  min-height: 14px;
  transition: color 0.3s;
}

.timer-status-text.live {
  color: var(--text-2);
}

.timer-status-text.bad {
  color: var(--danger);
}

.timer-status-text.good {
  color: var(--success);
}

/* Legacy compat */
.timer-unit-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-3);
  text-transform: uppercase;
}

.status-dot {
  display: flex;
  align-items: center;
  gap: 7px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4);
  transition: background 0.3s;
  flex-shrink: 0;
}

.dot.live {
  background: var(--live);
  animation: dot-pulse 2s infinite;
}

.dot.bad {
  background: var(--danger);
  animation: dot-danger 1s infinite;
}

@keyframes dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes dot-danger {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.5);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(255, 59, 48, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
  }
}

/* Duel mode */
.timer-duel-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 400px;
}

.duel-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.duel-timer {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
  transition: color 0.3s;
}

.duel-side.is-me .duel-timer {
  font-size: 54px;
}

.duel-timer.violated {
  color: var(--danger);
}

.duel-timer.frozen {
  color: var(--text-3);
}

.duel-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-2);
  text-transform: uppercase;
}

.duel-lead {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}

.duel-lead.show {
  opacity: 1;
  border-color: var(--text);
}

.duel-divider {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--border) 20%, var(--border) 80%, transparent);
  flex-shrink: 0;
}

/* Controls */
.timer-controls {
  padding: 12px 24px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-shrink: 0;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
}

.timer-controls .timer-start-btn,
.timer-controls .timer-stop-btn {
  flex: 1 1 0px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 14px 10px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

@media (max-width: 480px) {
  .timer-controls {
    padding: 8px 12px !important;
  }
  .timer-controls .timer-start-btn,
  .timer-controls .timer-stop-btn {
    padding: 12px 8px !important;
    font-size: 13px !important;
  }
}

.timer-start-btn {
  width: 100%;
  padding: 16px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  transition: transform 0.15s, opacity 0.15s;
}

.timer-start-btn:active {
  transform: scale(0.97);
  opacity: 0.9;
}

.timer-mode-picker {
  /* Hide the visible mode pills — keep container to preserve layout.
     Background matches surrounding so the area blends in visually. */
  display: block;
  gap: 0;
  margin-top: 0;
  height: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.timer-mode-option {
  display: none !important; /* remove the two buttons shown in screenshot */
}

.timer-mode-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
}

#timerControlsBar,
.timer-main-stage,
.timer-solo,
#timerControlsBar .timer-start-btn,
#timerControlsBar .timer-stop-btn,
#timerControlsBar .timer-mode-picker,
#timerControlsBar .timer-mode-option,
#timerControlsBar .timer-mode-hint,
#timerControlsBar .timer-room-btn,
#timerControlsBar button {
  position: relative !important;
  z-index: 100001 !important;
  pointer-events: auto !important;
}

#statusPopoverOverlay {
  pointer-events: auto !important;
}

.spm {
  pointer-events: none !important;
}

.spm.open {
  pointer-events: auto !important;
}

.timer-start-btn {
  width: 100%;
  padding: 16px;
  background: transparent;
  color: var(--text-2);
  border: 1px solid #222;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: background 0.2s, color 0.2s;
}

.timer-stop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-top: 12px;
}

.timer-stop-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  color: var(--text) !important;
  border-color: rgba(239, 68, 68, 0.6);
  transform: scale(1.03);
}

.timer-stop-btn:active {
  transform: scale(0.97);
  background: rgba(239, 68, 68, 0.35);
}

.timer-secondary-row {
  display: flex;
  gap: 8px;
}

.timer-room-btn,
.timer-chat-btn,
.timer-leave-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.3px;
  transition: border-color 0.2s, color 0.2s;
}

.timer-room-btn:active,
.timer-chat-btn:active,
.timer-leave-btn:active {
  border-color: #333;
  color: var(--text-2);
}

.timer-leave-btn {
  color: #ff453a;
}

.timer-leave-btn:active {
  border-color: #ff453a;
  color: #ff453a !important;
}

/* Party duel grid */
.party-duel-grid {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px;
  flex-shrink: 0;
}

.party-duel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.party-duel-row.is-me {
  border-color: var(--border);
}

.party-duel-name {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.party-duel-timer {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.party-duel-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-3);
  text-transform: uppercase;
}

.party-duel-status.live {
  color: var(--text-2);
}

/* Party Focus Overlay (Active Session Voice Sidebar) — Borderless Clean Style */
/* Party Focus Overlay (Active Session Voice Sidebar) — Native Desktop App Aesthetic */
.party-focus-overlay {
  margin: 0 16px 12px;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: #111214 !important;
  padding: 14px 16px !important;
  flex-shrink: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  transition: width 0.22s cubic-bezier(0.2, 0, 0, 1), padding 0.22s ease !important;
  position: relative;
}

/* ──────────────────────────────────────────────────────────────
   COLLAPSED = Floating mini-widget (draggable anywhere on screen)
   ────────────────────────────────────────────────────────────── */
.party-focus-overlay.collapsed {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: auto !important;
  min-height: auto !important;
  padding: 8px 4px !important;
  border-radius: 24px !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  background: var(--t-bg-card, rgba(18, 19, 23, 0.95)) !important;
  z-index: 1000100 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  contain: layout paint !important;
  touch-action: none !important;
}

.party-focus-overlay.collapsed * {
  touch-action: none !important;
}

.party-focus-overlay.collapsed.is-dragging {
  cursor: grabbing !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
  scale: 1.04;
  transition: none !important;
}

.party-focus-overlay.is-dragging {
  transition: none !important;
}

.party-focus-overlay.collapsed .party-focus-members,
.party-focus-overlay.collapsed .party-focus-label,
.party-focus-overlay.collapsed #overlayVoiceHandoverBanner,
.party-focus-overlay.collapsed .party-voice-connection,
.party-focus-overlay.collapsed #partyInviteBtnHeader,
.party-focus-overlay.collapsed #addChannelBtnHeader,
.party-focus-overlay.collapsed #partyModerationBtn,
.party-focus-overlay.collapsed .voice-settings-caret {
  display: none !important;
}

/* Center grip and collapse chevron vertically */
.party-focus-overlay.collapsed .party-focus-header {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin-bottom: 4px !important;
  padding: 0 0 4px 0 !important;
  border-bottom: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.06)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.party-focus-overlay.collapsed .party-focus-header > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
}

.party-focus-overlay.collapsed .party-focus-header .party-drag-grip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.6;
  cursor: grab !important;
  touch-action: none !important;
  width: 100% !important;
  height: 20px !important;
  border-radius: 6px !important;
  transition: opacity 0.15s ease, background 0.15s ease !important;
}

.party-focus-overlay.collapsed .party-focus-header .party-drag-grip:hover {
  opacity: 1;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.08));
}

.party-focus-overlay.collapsed .party-focus-header .party-drag-grip svg {
  width: 14px !important;
  height: 14px !important;
  pointer-events: none !important;
}

/* Collapse footer padding and center buttons vertically */
.party-focus-overlay.collapsed .party-focus-footer {
  margin-top: 0 !important;
  padding: 0 !important;
  border-top: none !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.party-focus-overlay.collapsed .party-control-bar {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
}

/* Make buttons slimmer and perfectly circular in collapsed state with instant touch */
.party-focus-overlay.collapsed .party-ctrl-btn,
.party-focus-overlay.collapsed .party-hdr-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

.party-focus-overlay.collapsed .voice-settings-caret {
  display: none !important;
}


.party-focus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.party-focus-label {
  font-size: 14px;
  font-weight: 700;
  color: #f2f3f5;
  letter-spacing: 0.2px;
  cursor: pointer;
}

.party-hdr-btn, .party-invite-btn, .party-add-channel-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #949ba4 !important;
  padding: 6px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.party-hdr-btn:hover, .party-invite-btn:hover, .party-add-channel-btn:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #f2f3f5 !important;
  border: none !important;
  outline: none !important;
}

.party-focus-members {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 160px) !important;
  padding-right: 2px !important;
}

.sub-channel-card {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  margin-bottom: 6px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
}

.sub-channel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease !important;
  border-left: 3px solid transparent !important;
  background: var(--card) !important;
}

.sub-channel-header:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.sub-channel-card.active-channel .sub-channel-header {
  background: rgba(88, 101, 242, 0.15) !important;
  border-left-color: #5865f2 !important;
}

.sub-channel-members-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding-left: 10px !important;
  margin-top: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.party-focus-member {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden !important;
  transition: background 0.15s ease !important;
}

.party-focus-member:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.party-focus-member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.party-focus-member-name {
  font-size: 13px;
  font-weight: 500;
  color: #dbdee1;
  letter-spacing: 0.1px;
}

.party-focus-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  width: 100%;
}

.party-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  width: 100%;
}

/* Zero default background, zero border, desktop icon button aesthetic */
.party-ctrl-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #949ba4 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.party-ctrl-btn svg,
.party-hdr-btn svg {
  pointer-events: none !important;
}

.party-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #f2f3f5 !important;
  border: none !important;
  outline: none !important;
}

/* Active State Colors (No borders, clean desktop tints) */
.party-ctrl-btn.muted,
.party-ctrl-btn.deafened {
  color: #f23f43 !important;
  background: rgba(242, 63, 67, 0.14) !important;
}
.party-ctrl-btn.muted:hover,
.party-ctrl-btn.deafened:hover {
  background: rgba(242, 63, 67, 0.22) !important;
}

.party-ctrl-btn.active {
  color: #23a55a !important;
  background: rgba(35, 165, 90, 0.14) !important;
}
.party-ctrl-btn.active:hover {
  background: rgba(35, 165, 90, 0.22) !important;
}

.party-ctrl-btn.danger {
  color: #949ba4 !important;
}
.party-ctrl-btn.danger:hover {
  color: #f23f43 !important;
  background: rgba(242, 63, 67, 0.14) !important;
}


/* ============================================================
   SESSION LOADING OVERLAY (Defined in Modern Titanium Section)
   ============================================================ */

/* ============================================================
   VIOLATION BANNER & CRACK OVERLAY
   ============================================================ */

.violation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--danger);
  color: #000;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 20px;
  transform: translateY(-110%);
  transition: transform 0.35s cubic-bezier(.2, .9, .3, 1.2);
  z-index: 9999;
}

.violation-banner.show {
  transform: translateY(0);
}

.crack-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 9998;
  background: radial-gradient(ellipse at center, rgba(255, 59, 48, 0.18) 0%, transparent 70%);
  transition: opacity 0.2s;
}

.crack-overlay.show {
  opacity: 1;
}

/* ============================================================
   TOAST (Defined in Global Elevated Notification Section)
   ============================================================ */

/* ============================================================
   SECTION HEADERS
   ============================================================ */

.section-header {
  padding: 18px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.3px;
}

.section-action {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-3);
  text-transform: uppercase;
  cursor: pointer;
}

/* ============================================================
   FEED SCREEN
   ============================================================ */

.unified-feed-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(52px + max(0px, env(safe-area-inset-top, 0px))) !important;
  z-index: 1000 !important;
  background: rgba(13, 17, 23, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0 !important;
  padding-top: max(0px, env(safe-area-inset-top, 0px)) !important;
  box-sizing: border-box !important;
  transform: translateY(0);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

.unified-feed-header.nav-hidden,
.unified-feed-header.header-hidden {
  transform: translateY(-100%) !important;
}

#feedPage {
  padding-top: calc(52px + max(0px, env(safe-area-inset-top, 0px))) !important;
}

[data-theme="light"] .unified-feed-header {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.unified-feed-header-inner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto;
  padding: 0 16px;
  height: 52px;
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.feed-header-left {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Feed Stream Tabs Bar (Integrated Single-Row Layout) */
.feed-stream-tabs-bar {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.feed-stream-tabs-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 0 4px !important;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  position: relative;
}

.feed-stream-tabs-inner::-webkit-scrollbar {
  display: none;
}

.feed-stream-tab {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  cursor: pointer;
  position: relative;
  transition: color 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 4px !important;
  height: 50px !important;
  min-height: 44px;
  min-width: 44px;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.feed-stream-tab:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

.feed-stream-tab.active {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
}

[data-theme="light"] .feed-stream-tab {
  color: rgba(0, 0, 0, 0.55) !important;
}

[data-theme="light"] .feed-stream-tab.active {
  color: rgba(0, 0, 0, 0.95) !important;
}

.feed-stream-tab-line {
  display: none !important;
}

/* Sliding active indicator */
.feed-tabs-slider-line {
  position: absolute;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #8B5CF6;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), width 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

.feed-header-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 0%;
  min-width: 0;
}

.feed-header-left .blunk-topbar-brand {
  cursor: pointer;
  user-select: none;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1;
  margin: 0;
  padding: 0;
  color: var(--t-text-primary, #ffffff);
  transition: opacity 0.15s ease;
}

.feed-header-left .blunk-topbar-brand:hover {
  opacity: 0.85;
}

.feed-header-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

/* ============================================================
   THREADS CENTRAL STREAM SELECTOR & DROPDOWN
   ============================================================ */

.threads-stream-selector-wrap {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.threads-stream-pill-btn,
.feed-stream-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  color: var(--t-text-primary, #ffffff) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

.threads-stream-pill-btn:hover,
.feed-stream-pill-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-1px);
}

.threads-stream-pill-btn:active,
.feed-stream-pill-btn:active {
  transform: translateY(0) scale(0.97);
}

.threads-active-stream-title,
.feed-active-stream-title {
  color: var(--t-text-primary, #ffffff);
  line-height: 1;
}

.threads-stream-chevron,
.stream-pill-chevron {
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.threads-stream-selector-wrap.open .threads-stream-chevron,
.streams-drawer-open .stream-pill-chevron {
  transform: rotate(180deg);
  color: rgba(255, 255, 255, 0.95);
}

.threads-stream-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.96);
  min-width: 195px;
  background: rgba(18, 22, 28, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  padding: 6px;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.threads-stream-selector-wrap.open .threads-stream-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.threads-stream-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.threads-stream-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}

.threads-stream-menu-item.active {
  color: #ffffff;
  font-weight: 650;
  background: rgba(255, 255, 255, 0.05);
}

.threads-stream-item-label {
  flex: 1 1 auto;
}

.threads-stream-check-icon {
  opacity: 0;
  transform: scale(0.8);
  color: #8B5CF6;
  transition: opacity 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.threads-stream-menu-item.active .threads-stream-check-icon {
  opacity: 1;
  transform: scale(1);
}

/* Light Theme */
[data-theme="light"] .threads-stream-pill-btn,
[data-theme="light"] .feed-stream-pill-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}
[data-theme="light"] .threads-stream-pill-btn:hover,
[data-theme="light"] .feed-stream-pill-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .threads-active-stream-title {
  color: rgba(0, 0, 0, 0.9);
}
[data-theme="light"] .threads-stream-chevron {
  color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .threads-stream-dropdown-menu {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), inset 0 1px 0 0 rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .threads-stream-menu-item {
  color: rgba(0, 0, 0, 0.65);
}
[data-theme="light"] .threads-stream-menu-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.95);
}
[data-theme="light"] .threads-stream-menu-item.active {
  color: #000000;
  background: rgba(0, 0, 0, 0.04);
}

.feed-tab {
  background: transparent;
  border: none;
  color: var(--t-text-muted, #8a9099);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.feed-tab:hover {
  color: var(--t-text-primary, #ffffff);
}

.feed-tab.active {
  background: var(--t-bg-card, #181920);
  color: var(--t-text-primary, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .feed-tab.active {
  background: #ffffff;
  color: #12131c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.feed-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 0%;
  min-width: 0;
  gap: 8px;
}

.feed-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
  padding: 0;
}

.feed-icon-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.feed-compose-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.2s, color 0.2s, transform 0.15s !important;
}

.feed-compose-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: none !important;
}

.feed-compose-btn:active {
  transform: scale(0.92) !important;
}

.feed-compose-btn.is-guest-btn {
  width: auto !important;
  height: 32px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  gap: 6px !important;
}

.feed-compose-btn.is-guest-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ============================================================
   RESPONSIVE HEADER: PC (>= 768px) & MOBİL (< 768px)
   ============================================================ */

/* 2. PC / Masaüstü Tasarımı (Ekran Genişliği >= 768px) */
@media (min-width: 768px) {
  .unified-feed-header {
    height: 60px !important;
    padding: 0 !important;
  }

  .unified-feed-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 32px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .feed-header-left {
    order: 1;
    flex: 1 1 0% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  .feed-header-left .blunk-topbar-brand {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    cursor: pointer !important;
    user-select: none !important;
    color: var(--t-text-primary, #ffffff) !important;
    transition: opacity 0.15s ease !important;
  }

  .feed-header-left .blunk-topbar-brand:hover {
    opacity: 0.85 !important;
  }

  .feed-header-center {
    order: 2;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .threads-stream-pill-btn,
  .feed-stream-pill-btn {
    padding: 7px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    gap: 6px !important;
  }

  .feed-header-actions {
    order: 3;
    flex: 1 1 0% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  .feed-icon-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background-color 0.2s, color 0.2s, transform 0.15s !important;
  }

  .feed-icon-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
  }

  .feed-compose-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s, color 0.2s, transform 0.15s !important;
  }

  .feed-compose-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .feed-compose-btn:active {
    transform: scale(0.92) !important;
  }

  .feed-compose-text {
    display: none !important;
  }

  .feed-compose-btn.is-guest-btn {
    width: auto !important;
    height: 32px !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .feed-compose-btn.is-guest-btn .feed-compose-text {
    display: inline !important;
  }

  #feedPage {
    padding-top: 60px !important;
  }
}

/* 3. Mobil Tasarımı (Ekran Genişliği < 768px) */
@media (max-width: 767.98px) {
  .unified-feed-header {
    height: calc(52px + max(0px, env(safe-area-inset-top, 0px))) !important;
    padding: 0 !important;
    padding-top: max(0px, env(safe-area-inset-top, 0px)) !important;
    box-sizing: border-box !important;
  }

  .unified-feed-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .feed-header-left {
    order: 1;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .feed-header-left .blunk-topbar-brand {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
  }

  .feed-header-center {
    order: 2;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .threads-stream-pill-btn,
  .feed-stream-pill-btn {
    min-height: 44px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    gap: 5px !important;
  }

  .feed-header-actions {
    order: 3;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .feed-icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    padding: 0 !important;
    touch-action: manipulation !important;
  }

  .feed-compose-text {
    display: none !important;
  }

  .feed-compose-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    transition: background-color 0.2s, color 0.2s, transform 0.15s !important;
  }

  .feed-compose-btn:active {
    transform: scale(0.92) !important;
  }

  .feed-compose-btn.is-guest-btn {
    width: auto !important;
    min-width: auto !important;
    height: 34px !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .feed-compose-btn.is-guest-btn .feed-compose-text {
    display: inline !important;
  }

  #feedPage {
    padding-top: calc(52px + max(0px, env(safe-area-inset-top, 0px))) !important;
  }
}

/* New post button floating */
.post-compose-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}

.post-compose-input {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 18px;
  cursor: pointer;
  pointer-events: none;
}

/* Post card */
.post-card {
  border-bottom: 1px solid var(--border-soft);
  padding: 16px 0 12px;
}

.post-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 20px 12px;
  cursor: pointer;
}

.post-card-user-info {
  flex: 1;
  min-width: 0;
}

.post-card-username {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 7px;
}

.post-card-meta {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.3px;
}

.post-card-content {
  padding: 0 20px 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.post-card-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  margin-bottom: 12px;
  cursor: pointer;
}

.post-card-actions {
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
}

.post-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color 0.2s;
}

.post-action-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: stroke 0.2s, fill 0.2s;
}

.post-action-btn.liked {
  color: var(--danger);
}

.post-action-btn.liked svg {
  stroke: var(--danger);
  fill: var(--danger);
}

.post-action-btn.reposted {
  color: var(--success);
}

.post-action-btn.reposted svg {
  stroke: var(--success);
}

/* Global Feed Comments Modal & Scrollable Sheet */
.feed-comments-modal-body {
  max-height: calc(85dvh - 60px);
  overflow-y: auto !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px 24px !important;
  box-sizing: border-box;
}

/* Custom Scrollbar for Comment Modal Body */
.feed-comments-modal-body::-webkit-scrollbar {
  width: 4px;
}

.feed-comments-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.feed-comments-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.comments-section {
  display: none;
}

.comment-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.comment-input {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
}

.comment-input::placeholder {
  color: var(--text-3);
}

.comment-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--text);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.comment-send-btn svg {
  width: 16px;
  height: 16px;
  stroke: #000;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.comment-item {
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 10px;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.comment-username {
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.2px;
}

.comment-time {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}

.comment-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  word-break: break-word;
}

.comment-like-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  cursor: pointer;
}

.comment-like-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.comment-like-btn.liked {
  color: var(--danger);
}

.comment-like-btn.liked svg {
  fill: var(--danger);
  stroke: var(--danger);
}

/* ============================================================
   MODERN POST COMPOSE MODAL (NEW POST)
   ============================================================ */
.post-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 10000030 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.24s ease;
  padding: 16px;
}

.post-modal-overlay.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.post-modal-card {
  position: relative;
  background: var(--t-bg-card, #121319);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 22px;
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
  transform: scale(0.95) translateY(12px);
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
  will-change: transform;
}

.post-drop-zone-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 19, 25, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px dashed var(--t-accent-primary, #6366f1);
  border-radius: 22px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.post-modal-card.drag-over .post-drop-zone-overlay {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.post-drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--t-accent-primary, #6366f1);
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}

.post-modal-card .modal-drag-handle {
  display: none;
}

.post-modal-overlay.open .post-modal-card {
  transform: scale(1) translateY(0);
}

[data-theme="light"] .post-modal-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}

.post-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.06));
}

.post-modal-title {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t-text-primary, #ffffff);
}

.post-modal-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--t-text-primary, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
}

.post-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.05);
}

.post-modal-author-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 18px 6px 18px;
}

.post-modal-author-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t-text-primary, #fff);
}

.post-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 8px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.post-modal-textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--t-text-primary, #fff);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  padding: 10px 18px;
  resize: none;
  min-height: 90px;
  max-height: 180px;
  box-sizing: border-box;
  font-family: inherit;
}

.post-modal-textarea::placeholder {
  color: var(--t-text-muted, #666);
}

.post-crop-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 6px 18px 14px 18px;
  width: calc(100% - 36px);
  max-width: 360px;
  align-self: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 12px;
  box-sizing: border-box;
}

.post-crop-viewport {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  background: #090a0f;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.post-crop-viewport:active {
  cursor: grabbing;
}

.post-crop-img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  image-rendering: -webkit-optimize-contrast;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.post-crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.post-crop-grid.active {
  opacity: 1;
}

.post-crop-grid .grid-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.post-crop-grid .grid-line.v1 { top: 0; bottom: 0; left: 33.333%; width: 1px; }
.post-crop-grid .grid-line.v2 { top: 0; bottom: 0; left: 66.666%; width: 1px; }
.post-crop-grid .grid-line.h1 { left: 0; right: 0; top: 33.333%; height: 1px; }
.post-crop-grid .grid-line.h2 { left: 0; right: 0; top: 66.666%; height: 1px; }

.post-crop-remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(15, 17, 23, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.15s, transform 0.15s, border-color 0.15s;
}

.post-crop-remove-btn:hover {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 1);
  transform: scale(1.08);
}

.post-crop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 320px;
  gap: 8px;
  margin-top: 2px;
}

.crop-ratio-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.crop-ratio-btn {
  background: transparent;
  border: none;
  color: var(--t-text-muted, #94a3b8);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.crop-ratio-btn:hover {
  color: #ffffff;
}

.crop-ratio-btn.active {
  background: var(--t-accent-primary, #6366f1);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.crop-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--t-text-muted, #94a3b8);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.crop-reset-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.crop-actions-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.crop-download-btn {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.25);
  background: rgba(56, 189, 248, 0.08);
}

.crop-download-btn:hover {
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.2);
}

.post-crop-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  padding: 2px 4px;
  box-sizing: border-box;
}

.crop-zoom-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: var(--t-text-muted, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.crop-zoom-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.crop-zoom-icon {
  color: currentColor;
  flex-shrink: 0;
}

.post-crop-controls input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  cursor: pointer;
  margin: 0 4px;
}

.post-crop-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--t-accent-primary, #6366f1);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
  border: 2px solid #ffffff;
  cursor: pointer;
}

.post-crop-controls input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--t-accent-primary, #6366f1);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
  border: 2px solid #ffffff;
  cursor: pointer;
}

.post-video-preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 6px 18px 14px 18px;
  width: calc(100% - 36px);
  max-width: 360px;
  align-self: center;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 12px;
  box-sizing: border-box;
}

.post-video-viewport {
  position: relative;
  width: 100%;
  max-width: 320px;
  max-height: 320px !important;
  border-radius: 14px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-video-preview {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 320px !important;
  display: block;
  object-fit: contain;
  background: #000000;
  border-radius: 12px;
}

.post-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)) 18px;
  border-top: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.06));
}

.post-modal-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.post-tool-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-accent-primary, #6366f1);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.2);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-tool-btn:hover {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}

.post-modal-submit-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.post-char-indicator-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 26px;
  height: 26px;
}

.post-progress-ring {
  transform: rotate(-90deg);
  display: block;
  flex-shrink: 0;
}

.post-progress-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 2.5;
}

[data-theme="light"] .post-progress-bg {
  stroke: rgba(0, 0, 0, 0.1);
}

.post-progress-fill {
  fill: none;
  stroke: var(--t-accent-primary, #6366f1);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 62.83; /* 2 * PI * 10 */
  stroke-dashoffset: 62.83;
  transition: stroke-dashoffset 0.12s ease, stroke 0.2s ease;
}

.post-progress-fill.warning {
  stroke: #f59e0b;
}

.post-progress-fill.danger {
  stroke: #ef4444;
}

.post-char-counter {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--t-text-muted, #777);
  font-variant-numeric: tabular-nums;
  display: none;
}

.post-char-counter.visible {
  display: inline-block;
}

.post-char-counter.warning {
  color: #f59e0b;
}

.post-char-counter.danger {
  color: #ef4444;
}

.post-submit-btn {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  padding: 9px 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-submit-btn:hover:not(:disabled) {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.5);
}

.post-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Micro-interaction & tactile feedback */
.post-submit-btn:active:not(:disabled),
.post-tool-btn:active,
.post-modal-cancel-btn:active,
.post-crop-remove-btn:active,
.crop-ratio-btn:active,
.crop-reset-btn:active,
.crop-zoom-btn:active,
.post-poll-add-btn:active,
.post-poll-remove-btn:active {
  transform: scale(0.98) !important;
  transition: transform 0.08s ease !important;
}

.post-submit-btn.loading {
  opacity: 0.88;
  cursor: wait;
  pointer-events: none;
}

.post-submit-btn .btn-spinner {
  animation: spin 0.75s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

.post-tool-btn.loading {
  opacity: 0.6;
  pointer-events: none;
  animation: pulse 1s infinite alternate;
}

@media (max-width: 640px) {
  .post-modal-overlay {
    padding: 0;
    align-items: flex-end;
    justify-content: center;
  }
  .post-modal-card {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92dvh !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border-bottom: none;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .post-modal-overlay.open .post-modal-card {
    transform: translateY(0);
  }
  .post-modal-card .modal-drag-handle {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
    margin: 10px auto 2px auto;
    flex-shrink: 0;
  }
  .post-modal-header {
    padding: 10px 16px 12px 16px;
  }
  .post-modal-textarea {
    min-height: 105px;
    padding: 10px 16px;
  }
  .post-modal-author-row {
    padding: 12px 16px 4px 16px;
  }
  .post-modal-footer {
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)) 16px;
  }
  .post-modal-overlay.keyboard-active {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .post-modal-overlay.keyboard-active .post-modal-card {
    border-radius: 22px 22px 0 0 !important;
    transform: translateY(0) !important;
  }
}

/* ============================================================
   LEADERBOARD SCREEN
   ============================================================ */

.user-rank-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.15s;
}

.user-rank-card:active {
  background: var(--card);
}

.user-rank-card.is-me {
  background: var(--card);
}

.rank-num {
  font-size: 14px;
  font-weight: 900;
  color: var(--text-3);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.rank-num.top1 {
  color: var(--text);
  font-size: 18px;
}

.rank-num.top2 {
  color: var(--text-2);
}

.rank-num.top3 {
  color: var(--text-2);
}

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

.rank-username {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.me-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

.rank-sub {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.3px;
}

.rank-time {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-2);
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

/* My rank hero */
.my-rank-hero {
  margin: 16px 20px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 16px;
}

.my-rank-num {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -2px;
  color: var(--text);
  min-width: 64px;
  text-align: center;
}

.my-rank-info {
  flex: 1;
}

.my-rank-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.my-rank-name {
  font-size: 16px;
  font-weight: 800;
}

/* ============================================================
   PROFILE SCREEN
   ============================================================ */

.profile-cover {
  height: 120px;
  background: var(--card);
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  flex-shrink: 0;
}

.profile-avatar-wrap {
  position: absolute;
  bottom: -36px;
  left: 20px;
  cursor: pointer;
}

.profile-avatar-edit-icon {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar-edit-icon svg {
  width: 12px;
  height: 12px;
  stroke: var(--text-2);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.profile-info-section {
  padding: 48px 20px 20px;
  border-bottom: 1px solid var(--border-soft);
}

.profile-username-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.profile-username {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.profile-bio {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 8px;
  word-break: break-word;
}

.profile-stats-row {
  display: flex;
  gap: 0;
  margin-top: 20px;
}

.profile-stat-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px 8px;
  border-right: 1px solid var(--border-soft);
}

.profile-stat-box:last-child {
  border-right: none;
}

.profile-stat-val {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.profile-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-3);
  text-transform: uppercase;
}

/* Profile detail items */
.profile-detail-section {
  padding: 20px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.profile-detail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-3);
  text-transform: uppercase;
  min-width: 48px;
  padding-top: 2px;
}

.profile-detail-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.5;
  word-break: break-word;
  flex: 1;
}

/* Profile edit form */
.profile-edit-section {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.profile-edit-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.profile-edit-input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 14px;
}

.profile-edit-input::placeholder {
  color: var(--text-3);
}

.profile-edit-textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 14px;
  resize: none;
  min-height: 80px;
  line-height: 1.5;
}

.profile-edit-textarea::placeholder {
  color: var(--text-3);
}

.profile-section-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 16px 20px 6px;
}

/* Session history row */
.session-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 14px 18px !important;
  margin-bottom: 8px !important;
  border-radius: 14px !important;
  background: var(--t-bg-card, #111218) !important;
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08)) !important;
  transition: all 0.18s ease !important;
  box-sizing: border-box !important;
}

.session-row:hover {
  background: var(--t-bg-card-hover, #181922) !important;
  border-color: var(--t-border-strong, rgba(255, 255, 255, 0.16)) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.session-row-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.session-title-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  min-width: 0 !important;
  max-width: calc(100% - 120px) !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.session-title-wrap:hover .session-main-title {
  color: var(--t-text-primary, #ffffff) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.session-title-wrap:hover .session-link-arrow {
  transform: translate(2px, -2px) !important;
  color: var(--t-text-primary, #ffffff) !important;
}

.session-main-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--t-text-primary, #ffffff) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.2px !important;
  transition: color 0.15s ease !important;
}

.session-link-arrow {
  color: var(--t-text-muted, #80848e) !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease, color 0.15s ease !important;
}

.session-top-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.session-row-date {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11.5px !important;
  color: var(--t-text-muted, #80848e) !important;
  font-weight: 600 !important;
}

.session-row-date svg {
  opacity: 0.7;
}

.session-status-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.session-status-icon.completed {
  background: rgba(35, 165, 90, 0.12) !important;
  border: 1px solid rgba(35, 165, 90, 0.25) !important;
  color: #23a55a !important;
}

.session-status-icon.incomplete {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
}

.session-row-sub {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.session-duration-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.session-duration-val {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--t-text-secondary, #b5bac1) !important;
}

.session-mode-pill {
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 1.5px 6px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--t-text-muted, #80848e) !important;
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08)) !important;
}

.session-mode-pill.pomo {
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.2) !important;
  background: rgba(248, 113, 113, 0.08) !important;
}

.session-tags-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

.session-mini-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.03)) !important;
  color: var(--t-text-muted, #80848e) !important;
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.06)) !important;
}

.session-mini-tag svg {
  opacity: 0.8;
}

.session-row-note {
  font-size: 11.5px !important;
  color: var(--t-text-secondary, #b5bac1) !important;
  font-style: italic !important;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.02)) !important;
  border-left: 2px solid var(--t-border-strong, rgba(255, 255, 255, 0.18)) !important;
  padding: 5px 10px !important;
  border-radius: 0 6px 6px 0 !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}

/* ============================================================
   NOTIFICATIONS SCREEN
   ============================================================ */

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.15s;
}

.notif-item:active {
  background: var(--card);
}

.notif-item.unread {
  background: var(--card);
}

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-text {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.notif-text strong {
  font-weight: 800;
}

.notif-time {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  margin-top: 3px;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.empty-icon {
  font-size: 40px;
  opacity: 0.3;
}

.empty-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-3);
  text-transform: uppercase;
}

.empty-sub {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
  line-height: 1.5;
}

/* ============================================================
   MODAL OVERLAY (image viewer / user profile slide-up)
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.modal-sheet {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(24px + var(--safe-b));
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.32, 0.94, 0.6, 1);
}

.modal-overlay.open .modal-sheet {
  transform: translateY(0);
}

.modal-drag-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  margin: 12px auto 8px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 16px;
}

.modal-close {
  font-size: 22px;
  color: var(--text-3);
  cursor: pointer;
  line-height: 1;
}

.img-fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10000060 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.img-fullscreen-overlay.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.img-fullscreen-overlay img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ============================================================
   MISC UTILITIES
   ============================================================ */

.divider-line {
  height: 1px;
  background: var(--border-soft);
  margin: 0;
}

.spacer-8 {
  height: 8px;
}

.spacer-16 {
  height: 16px;
}

.spacer-24 {
  height: 24px;
}

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--text-3);
}

.loading-row {
  padding: 40px 20px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-3);
  text-transform: uppercase;
}

/* ============================================================
   SCROLLBAR (webkit)
   ============================================================ */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ============================================================
   MONOCHROME DESIGN SYSTEM & DISCORD FOCUS LOBBY
   ============================================================ */

.mono-header {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid #ffffff;
  padding-bottom: 8px;
  margin-bottom: 16px;
  margin-top: 8px;
}

.mono-sub-header {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888888;
  margin-bottom: 12px;
  margin-top: 24px;
}

.mono-card {
  background: #000000;
  border: 1px solid #222222;
  border-radius: 0px;
  padding: 14px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}

.mono-card:hover {
  border-color: #555555;
}

.mono-card.active-room {
  border-color: var(--text);
}

.mono-btn-primary {
  background: #ffffff;
  color: #000000;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 20px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #ffffff;
  transition: all 0.2s;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.mono-btn-primary:hover {
  background: #000000;
  color: var(--text);
}

.mono-btn-secondary {
  background: #000000;
  color: var(--text);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 16px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #222222;
  transition: all 0.2s;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.mono-btn-secondary:hover {
  border-color: var(--text);
}

.mono-btn-danger {
  background: #000000;
  color: var(--text);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 16px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #ff3b30;
  transition: all 0.2s;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.mono-btn-danger:hover {
  background: #ff3b30;
  color: #000000;
}

.mono-input {
  background: #000000;
  border: 1px solid #222222;
  color: var(--text);
  padding: 12px 14px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.2s;
}

.mono-input:focus {
  border-color: var(--text);
}

.mono-flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mono-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 6px;
  border: 1px solid #ffffff;
  color: var(--text);
}

.mono-badge.muted {
  border-color: #444444;
  color: #888888;
}

/* Discord-style grid on timer page */
#partyDuelGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 16px;
  transition: all 0.3s ease;
}

.focus-member-card {
  background: #0d0d0d;
  border: 1px solid #222222;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  width: 100%;
  min-width: 100px;
}

/* Sizing options */
.focus-member-card.size-s {
  width: 100px;
  height: 100px;
  padding: 8px;
}

.focus-member-card.size-s .avatar {
  width: 36px;
  height: 36px;
}

.focus-member-card.size-s .member-name {
  font-size: 11px;
  margin-top: 4px;
}

.focus-member-card.size-s .member-status {
  font-size: 8px;
}

.focus-member-card.size-s .card-resize-btn {
  display: none;
}

.focus-member-card.size-m {
  width: 140px;
  height: 140px;
  padding: 12px;
}

.focus-member-card.size-m .avatar {
  width: 54px;
  height: 54px;
}

.focus-member-card.size-m .member-name {
  font-size: 13px;
  margin-top: 8px;
}

.focus-member-card.size-m .member-status {
  font-size: 9px;
}

.focus-member-card.size-l {
  width: 220px;
  height: 220px;
  padding: 20px;
}

.focus-member-card.size-l .avatar {
  width: 80px;
  height: 80px;
}

.focus-member-card.size-l .member-name {
  font-size: 16px;
  font-weight: 800;
  margin-top: 12px;
}

.focus-member-card.size-l .member-status {
  font-size: 11px;
}

.focus-member-card.hidden {
  display: none !important;
}

.focus-member-card.focusing {
  border-color: var(--text);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}

.focus-member-card.focusing .avatar {
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.focus-member-card.idle {
  opacity: 0.45;
}

.focus-member-card .member-name {
  color: var(--text);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.focus-member-card .member-status {
  color: #888888;
  font-weight: 600;
  margin-top: 4px;
  font-family: monospace;
}

.focus-member-card .card-resize-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: #444444;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  transition: color 0.15s;
  padding: 2px 4px;
}

.focus-member-card .card-resize-btn:hover {
  color: var(--text);
}

/* Grid controls bar */
.grid-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid #111111;
  background: #000000;
  width: 100%;
  box-sizing: border-box;
}

.grid-controls-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-2);
  text-transform: uppercase;
}

.grid-size-btn-group {
  display: flex;
  gap: 4px;
  background: #0a0a0a;
  border: 1px solid #222222;
  border-radius: 4px;
  padding: 2px;
}

.grid-size-btn {
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 800;
  color: #666666;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

.grid-size-btn.active {
  background: #ffffff;
  color: #000000;
}

/* ============================================================
   DIRECT MESSAGES (DM) & CHAT STYLING
   ============================================================ */
.inbox-item {
  transition: all 0.2s;
}

.inbox-item:hover {
  background: #0d0d0d !important;
  border-color: #333333 !important;
}

.inbox-item.active {
  background: #111111 !important;
  border-color: var(--text) !important;
}

.inbox-unread-count {
  background: #ffffff;
  color: #000000;
  font-size: 8px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 10px;
}

.inbox-item-hide-btn {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
}

.inbox-item:hover .inbox-item-hide-btn {
  opacity: 1;
}

.inbox-item-hide-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Instagram Direct-Quality Hero Profile & Group Header */
.chat-hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  margin: 16px auto 24px auto;
  padding: 18px 16px 20px 16px;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
  animation: fadeInHeroCard 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.chat-hero-avatar-wrapper {
  position: relative;
  width: 86px;
  height: 86px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-hero-avatar-img {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.chat-hero-avatar-fallback {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  border: 2px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 34px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}

.chat-hero-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #07090e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

/* Stacked Group Member Avatars */
.chat-avatar-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
}

.chat-avatar-stack-item {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #07090e;
  margin-left: -14px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.chat-avatar-stack-item:first-child {
  margin-left: 0;
}

.chat-avatar-stack-item:hover {
  transform: translateY(-4px) scale(1.08);
  z-index: 20 !important;
}

.chat-avatar-stack-item.fallback {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-avatar-stack-item.count {
  background: #1c222c;
  border: 2px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-hero-info {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.chat-hero-name {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.chat-hero-name:hover {
  opacity: 0.85;
}

.chat-hero-handle {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 3px;
}

/* Seamless floating stats typography - NO boxes or borders */
.chat-hero-stats-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  flex-wrap: wrap;
}

.chat-hero-stat-item strong {
  color: #ffffff;
  font-weight: 800;
  margin-right: 3px;
}

.chat-hero-stat-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 10px;
}

.chat-hero-meta-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.chat-hero-meta-dot {
  color: rgba(255, 255, 255, 0.2);
}

.chat-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.chat-hero-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 7px 18px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
}

.chat-hero-pill-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.chat-hero-empty-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  width: 100%;
  max-width: 360px;
  margin-top: 6px;
}

.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #222222;
  border-radius: 2px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

/* Mobile Direct Message Responsive Toggle */
@media (max-width: 768px) {
  .messages-container {
    flex-direction: column;
  }

  #inboxList {
    width: 100% !important;
    flex: 1 !important;
    border-right: none !important;
  }

  #chatArea {
    width: 100% !important;
    flex: 1 !important;
  }

  #chatPlaceholder {
    display: none !important;
  }
}

/* ========================================================================
   FOCUS ROOM — DESKTOP-CLASS MEMBER PRESENCE
   One positioning root owns avatar art, speaking feedback and presence.
   ======================================================================== */
.party-focus-member { overflow: visible !important; min-height: 44px; }
.party-focus-member > div:first-child { overflow: visible !important; }
.voice-avatar-wrap { width: 32px; height: 32px; overflow: visible !important; position: relative; display: inline-grid; place-items: center; }
.voice-avatar-wrap .avatar { width: 28px !important; height: 28px !important; overflow: hidden !important; border: 2px solid #111214 !important; border-radius: 50% !important; transition: border-color 0.15s ease !important; }
.voice-avatar-wrap.is-speaking .avatar,
.voice-avatar-wrap .avatar.is-speaking { border-color: #23a55a !important; box-shadow: none !important; outline: none !important; }
.voice-speaking-ring { display: none !important; }
.voice-presence-dot { position: absolute; right: -1px; bottom: -1px; z-index: 4; display: block; width: 10px; height: 10px; border: 2px solid #111214; border-radius: 50%; background: #80848e; box-sizing: content-box; pointer-events: none; }
.voice-presence-dot.is-online { background: #23a55a; }
.voice-presence-dot.is-away { background: #f0b232; }
.voice-presence-dot.is-dnd { background: #f23f43; }
.voice-presence-dot.is-offline { background: #80848e; }
.party-ctrl-btn.server-muted { color: #ed4245 !important; background: rgba(237,66,69,.16) !important; box-shadow: inset 0 0 0 1px rgba(237,66,69,.28) !important; }
.voice-badge-icon.server-mute { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:5px; background:rgba(237,66,69,.12); }
.party-moderation-panel { position:fixed; top:50%; left:50%; z-index:100200; width:min(460px, calc(100vw - 28px)); max-height:min(580px, calc(100dvh - 28px)); overflow:hidden; color:#f2f3f5; background:#18191c; border:1px solid rgba(255,255,255,.12); border-radius:16px; box-shadow:0 24px 80px rgba(0,0,0,.65); transform:translate(-50%,-50%); }
.party-moderation-head { display:flex; align-items:flex-start; justify-content:space-between; padding:16px; border-bottom:1px solid rgba(255,255,255,.08); }
.party-moderation-head strong,.party-moderation-head small { display:block; }.party-moderation-head strong { font-size:14px; }.party-moderation-head small { margin-top:3px; color:#949ba4; font-size:11px; }.party-moderation-head button { width:28px; height:28px; border:0; border-radius:7px; color:#b5bac1; background:transparent; font-size:22px; line-height:1; cursor:pointer; }.party-moderation-head button:hover { color: var(--text); background:rgba(255,255,255,.08); }
.party-moderation-body { max-height:480px; overflow:auto; padding:8px; }.party-moderation-loading,.party-moderation-empty { padding:28px 14px; color:#949ba4; font-size:12px; text-align:center; }.party-ban-row { display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; }.party-ban-row:hover { background:rgba(255,255,255,.045); }.party-ban-avatar { display:grid; width:30px; height:30px; flex:0 0 auto; place-items:center; border-radius:50%; color:#ffb3b5; background:rgba(237,66,69,.18); font-size:12px; font-weight:800; }.party-ban-copy { min-width:0; flex:1; }.party-ban-copy strong,.party-ban-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.party-ban-copy strong { font-size:12px; }.party-ban-copy small { margin-top:3px; color:#949ba4; font-size:10px; }.party-ban-row button { flex:0 0 auto; padding:7px 9px; border:1px solid rgba(35,165,90,.35); border-radius:7px; color:#8ce7af; background:rgba(35,165,90,.12); font-size:11px; font-weight:700; cursor:pointer; }.party-ban-row button:disabled { opacity:.55; cursor:wait; }

/* ============================================================
   INSTAGRAM-LIKE PROFILE & PRIVACY STYLES
   ============================================================ */
.profile-insta-header {
  padding: 24px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #000;
}

.profile-insta-top {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-insta-avatar-col {
  position: relative;
  cursor: pointer;
}

.profile-insta-avatar-col .avatar {
  border: none;
}

.profile-insta-stats-col {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  gap: 8px;
}

.profile-insta-stat-val {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}

.profile-insta-stat-lbl {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

.profile-insta-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-insta-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-insta-username {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--text);
}

.profile-insta-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.profile-insta-badge.privacy-private {
  background: rgba(255, 59, 48, 0.1);
  color: #ff3b30;
  border: 1px solid rgba(255, 59, 48, 0.2);
}

.profile-insta-badge.privacy-public {
  background: var(--card);
  color: var(--text-3);
  border: 1px solid var(--border-soft);
}

.profile-insta-bio {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  white-space: pre-line;
}

.profile-insta-details {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 700;
}

.profile-insta-action-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Profile Instagram Tabs */
.profile-insta-tabs {
  display: flex;
  background: #000;
  position: sticky;
  top: 0;
  z-index: 10;
}

.profile-insta-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.2s;
}

.profile-insta-tab:hover {
  opacity: 0.7;
}

.profile-insta-tab.active {
  opacity: 1;
}

/* Privacy Lock Overlay */
.profile-locked-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  color: var(--text-3);
}

.profile-locked-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.profile-locked-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.profile-locked-desc {
  font-size: 11px;
  font-weight: 600;
  max-width: 240px;
  line-height: 1.5;
}

/* XP row */
.profile-xp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.profile-xp-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  white-space: nowrap;
}

.profile-private-dot {
  font-size: 12px;
}

.profile-empty-tab {
  text-align: center;
  padding: 48px 20px;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 800;
  letter-spacing: 1px;
}

/* Post Grid */
.profile-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--t-border-subtle);
}

.profile-grid-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  background: var(--t-bg-card);
}

.profile-grid-item:active {
  opacity: 0.8;
}

.profile-grid-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-grid-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: var(--t-bg-card);
}

.profile-grid-text span {
  font-size: 10px;
  font-weight: 700;
  color: var(--t-text-muted);
  line-height: 1.4;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* 3-dot menu button on grid item */
.profile-grid-menu-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.profile-grid-item:hover .profile-grid-menu-btn,
.profile-grid-item:active .profile-grid-menu-btn {
  opacity: 1;
}

.profile-grid-menu-btn span {
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  display: block;
}

/* Post action menu overlay + panel */
.profile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000035 !important;
  background: transparent;
}

.profile-post-menu-panel {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--safe-b) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000036 !important;
  background: #111;
  border-radius: 14px;
  overflow: hidden;
  width: 260px;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.profile-post-menu-title {
  padding: 15px 20px 9px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
}

.profile-post-menu-item {
  width: 100%;
  padding: 16px 20px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.profile-post-menu-item:hover {
  background: #1a1a1a;
}

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

/* Post Edit Modal */
.profile-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 10000040 !important;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.profile-edit-modal-inner {
  background: #111;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-edit-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 1px;
}

.profile-edit-modal-textarea {
  background: #1a1a1a;
  border: none;
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  padding: 14px;
  min-height: 120px;
  resize: none;
  line-height: 1.5;
}

.profile-edit-modal-textarea::placeholder {
  color: #555;
}

/* Sessions list */
.profile-sessions-list {
  max-width: 580px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

/* Grid hover overlay (like/comment count) */
.profile-grid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  transition: opacity 0.15s;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.profile-grid-item:hover .profile-grid-overlay {
  opacity: 1;
}

/* avatar-xs */
.avatar-xs {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.avatar-xs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-xs .avatar-initials {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff !important;
}

/* ─── POST DETAIL SHEET ─────────────────────────── */
.pdetail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000005;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pdetail-sheet {
  background: #0d0d0d;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  height: 80dvh;
  max-height: 80dvh;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

.pdetail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  position: sticky;
  top: 0;
  background: #0d0d0d;
  z-index: 2;
}

.pdetail-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pdetail-author-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.pdetail-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.pdetail-menu-btn span {
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  display: block;
}

.pdetail-close-btn {
  background: none;
  border: none;
  color: #555;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.pdetail-image {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  display: block;
}

.pdetail-actions {
  padding: 12px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pdetail-action-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pdetail-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 0;
  display: flex;
  align-items: center;
  transition: transform 0.15s;
}

.pdetail-action-btn:active {
  transform: scale(0.88);
}

.pdetail-action-btn.liked svg {
  fill: #ff3b30;
  stroke: #ff3b30;
}

.pdetail-counts {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  gap: 8px;
  align-items: center;
}

.pdetail-content {
  padding: 4px 16px 8px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}

.pdetail-content strong {
  font-weight: 900;
  margin-right: 6px;
}

.pdetail-likers {
  padding: 4px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdetail-likers-avatars {
  display: flex;
}

.pdetail-likers-avatars .avatar-xs+.avatar-xs {
  margin-left: -8px;
}

.pdetail-likers-text {
  font-size: 12px;
  color: #aaa;
}

.pdetail-likers-text strong {
  color: var(--text);
}

.pdetail-meta {
  padding: 4px 16px 12px;
  font-size: 10px;
  color: #444;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pdetail-comments-section {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  overflow-y: auto;
}

.pdetail-no-comment {
  font-size: 11px;
  color: #444;
  font-weight: 700;
  text-align: center;
  padding: 12px 0;
}

.pdetail-comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.pdetail-comment-body {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  line-height: 1.4;
}

.pdetail-comment-user {
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
  margin-right: 4px;
}

.pdetail-comment-text {
  font-size: 12px;
  color: #ccc;
  word-break: break-word;
}

.pdetail-comment-meta {
  width: 100%;
  font-size: 10px;
  color: #444;
  font-weight: 700;
}

.pdetail-comment-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  position: sticky;
  bottom: 0;
  background: #0d0d0d;
  border-top: 1px solid #1a1a1a;
}

.pdetail-comment-input {
  flex: 1;
  background: #1a1a1a;
  border: none;
  border-radius: 20px;
  color: var(--text);
  font-size: 13px;
  padding: 8px 14px;
  outline: none;
}

.pdetail-comment-input::placeholder {
  color: #444;
}

.pdetail-comment-send {
  background: none;
  border: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  opacity: 0.6;
}

.pdetail-comment-send:hover {
  opacity: 1;
}



/* Settings view */
.profile-settings-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #000;
}

.profile-settings-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-settings-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.profile-settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #111;
  border-radius: 10px;
}

.profile-settings-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-settings-toggle-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.profile-settings-toggle-desc {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
}

/* Switch styling */
.mono-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.mono-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mono-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #222;
  transition: .2s;
  border: 1px solid var(--border-soft);
  border-radius: 24px;
}

.mono-switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #555;
  transition: .2s;
  border-radius: 50%;
}

.mono-switch input:checked+.mono-switch-slider {
  background-color: var(--text);
  border-color: var(--text);
}

.mono-switch input:checked+.mono-switch-slider:before {
  transform: translateX(20px);
  background-color: #000;
}

/* ============================================================
   CHAT REPLY ELEMENTS
   ============================================================ */
.chat-reply-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #0a0a0a;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
}

.chat-reply-preview-text {
  color: var(--text-3);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}

.chat-reply-preview-text strong {
  color: var(--text);
}

.chat-reply-close-btn {
  background: none;
  border: none;
  color: #888;
  font-weight: 800;
  cursor: pointer;
  padding: 4px 8px;
}

.chat-reply-close-btn:hover {
  color: var(--text);
}

.msg-reply-bubble {
  background: var(--card);
  border-left: 2px solid var(--text-3);
  padding: 4px 8px;
  margin-bottom: 4px;
  font-size: 10px;
  color: var(--text-2);
  border-radius: 2px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-reply-bubble strong {
  color: var(--text);
  display: block;
  margin-bottom: 1px;
  font-size: 9px;
}

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

.msg-bubble-action {
  opacity: 0;
  font-size: 10px;
  color: var(--text-4);
  cursor: pointer;
  font-weight: 800;
  transition: opacity 0.2s;
  padding: 0 6px;
  user-select: none;
}

.msg-bubble-row:hover .msg-bubble-action {
  opacity: 1;
}

.msg-bubble-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* User Profile Page & Friend List styles */
.up-back-btn {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.up-back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.up-back-btn:active {
  opacity: 0.7;
}

.up-cv {
  font-size: 11px;
  color: #aaa;
  background: #050505;
  border: 1px solid #111;
  padding: 8px 10px;
  border-radius: 4px;
  margin-top: 6px;
  word-break: break-word;
}

.fl-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  margin-bottom: 6px !important;
  border-radius: 12px !important;
  background-color: var(--t-bg-card, #111218) !important;
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08)) !important;
  transition: all 0.18s ease !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.fl-row:hover {
  background-color: var(--t-bg-card-hover, #181922) !important;
  border-color: var(--t-border-strong, rgba(255, 255, 255, 0.16)) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.fl-row-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.fl-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.fl-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.fl-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--t-text-primary, #ffffff) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.fl-level {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.08)) !important;
  color: var(--t-text-muted, #80848e) !important;
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.06)) !important;
}

.fl-sub {
  font-size: 11px !important;
  color: var(--t-text-muted, #80848e) !important;
}

.fl-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.profile-locked-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.profile-locked-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.profile-locked-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}

.profile-locked-desc {
  font-size: 11px;
  color: var(--text-3);
  max-width: 240px;
  line-height: 1.5;
}

/* ============================================================
   MOBILE CARD DISPLAY FOR FEED (DESKTOP & MOBILE)
   ============================================================ */

/* ============================================================
   INSTAGRAM MINIMALIST 3x3 GRID FEED & SHORTS REEL STYLES
   ============================================================ */

.feed-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--t-bg-app, #0a0a0c);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.feed-icon-btn {
  background: none;
  border: none;
  color: #888;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.feed-icon-btn:hover {
  color: var(--text);
}

.ig-create-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ig-create-btn:hover {
  border-color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

/* Feed Quick Compose Card — Pixel-Perfect Threads & Twitter Style */
#feedPage .feed-quick-compose-card,
#feedPage .feed-quick-compose-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  margin: 10px auto 14px auto;
  padding: 12px 16px;
  background: #0D1117;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#feedPage .feed-quick-compose-card:hover,
#feedPage .feed-quick-compose-bar:hover {
  background: #111620;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.45);
}

#feedPage .feed-quick-compose-main,
#feedPage .feed-compose-top,
#feedPage .feed-quick-compose-bar > .feed-compose-top {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

#feedPage .feed-quick-compose-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#feedPage .feed-quick-compose-avatar .avatar-container {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#feedPage .feed-quick-compose-avatar .avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#feedPage .feed-quick-compose-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

#feedPage .feed-compose-input-sim {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: unset;
  padding: 6px 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

#feedPage .feed-quick-compose-placeholder,
#feedPage .feed-compose-placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-size: 15px;
  font-weight: 450;
  user-select: none;
  letter-spacing: -0.01em;
}

#feedPage .feed-quick-compose-bottom,
#feedPage .feed-compose-bottom,
#feedPage .feed-quick-compose-bar > .feed-compose-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#feedPage .feed-compose-tools,
#feedPage .feed-quick-compose-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

#feedPage .feed-compose-tool-btn,
#feedPage .feed-quick-tool-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#feedPage .feed-compose-tool-btn:hover,
#feedPage .feed-quick-tool-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #a5b4fc;
  transform: translateY(-1px);
}

#feedPage .feed-compose-tool-btn:active,
#feedPage .feed-quick-tool-btn:active {
  transform: scale(0.96);
}

#feedPage .feed-compose-submit-btn,
#feedPage .feed-quick-compose-btn {
  border: none;
  border-radius: 9999px;
  padding: 8px 18px;
  background: #6366f1;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#feedPage .feed-compose-submit-btn:hover,
#feedPage .feed-quick-compose-btn:hover {
  background: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45);
}

#feedPage .feed-compose-submit-btn:active,
#feedPage .feed-quick-compose-btn:active {
  transform: scale(0.98);
}
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  max-width: 680px;
  margin: 0 auto;
}

.grid-post-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  background: #121218;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid-post-card.text-only-card {
  background: #181822;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.grid-post-card.has-image img.grid-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease;
}

.grid-post-card:hover img.grid-bg-img {
  transform: scale(1.05);
}

.grid-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
}

.grid-post-card:hover .grid-card-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.55);
}

.grid-card-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: #eee;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.grid-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.grid-author-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

.grid-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.grid-author-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

.grid-topic-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.85);
  color: var(--text);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.grid-card-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #f3f4f6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  word-break: break-word;
}

.grid-card-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.grid-stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   RESPONSIVE POST VIEWER MODAL (DESKTOP & MOBILE) STYLES
   ============================================================ */

.shorts-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.99); }
  to { opacity: 1; transform: scale(1); }
}

.shorts-close-float-btn {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 100000;
  background: #1e1e2d;
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: var(--text) !important;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.shorts-close-float-btn:hover {
  background: #32324a;
  transform: scale(1.1);
}

/* Viewport & Swiper Track */
.shorts-viewport {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.shorts-viewport::-webkit-scrollbar {
  display: none;
}

.shorts-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.shorts-slide {
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px;
}

/* Desktop Side-by-Side Modal Container */
.desktop-post-modal-card {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: min(80vh, 700px);
  background: #111116;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  display: flex;
  border: 1px solid var(--border);
}

.desktop-post-left {
  flex: 1.2;
  position: relative;
  background: linear-gradient(135deg, #181826 0%, #0d0d14 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.desktop-post-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.desktop-post-text-box {
  padding: 36px;
  color: var(--text) !important;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 600;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-y: auto;
  box-sizing: border-box;
  word-break: break-word;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* FORCE ALL AVATARS & IMAGES TO BE 100% PERFECT CIRCLES */
.avatar,
.avatar img,
.avatar-container,
.avatar-container .avatar,
.avatar-container img,
.desktop-author-avatar,
.desktop-author-avatar img,
.grid-avatar,
.grid-avatar img,
.light-comment-avatar,
.light-comment-avatar img,
.shorts-comment-avatar,
.shorts-comment-avatar img {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

.desktop-post-right {
  flex: 1;
  background: var(--bg-secondary, #181824);
  color: var(--text-primary, #ffffff);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.desktop-author-bar {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--bg-secondary, #181824);
  gap: 12px;
}

.desktop-author-info-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.desktop-author-info {
  flex-shrink: 0;
  cursor: pointer;
}

.desktop-caption-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.desktop-author-avatar,
.light-comment-avatar,
.grid-avatar {
  width: 38px !important;
  height: 38px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--border);
}

.desktop-author-username {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary, #ffffff);
  cursor: pointer;
}

.desktop-caption-text {
  font-size: 13px;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.4;
  word-break: break-word;
}

.desktop-follow-btn {
  background: #6366f1;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.desktop-follow-btn:hover {
  background: #4f46e5;
}

.desktop-follow-btn.subscribed {
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.12));
  color: var(--text-primary, #ffffff);
}

/* Comments List — Theme Aware */
.desktop-comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-main, #12121c);
}

.light-comment-item {
  display: flex;
  gap: 10px;
  background: var(--bg-card, #1f1f2e);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.light-comment-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.light-comment-content {
  flex: 1;
}

.light-comment-author {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary, #ffffff);
  margin-bottom: 2px;
}

.light-comment-text {
  font-size: 13px;
  color: var(--text-secondary, #cbd5e1);
  line-height: 1.4;
}

.desktop-actions-bar {
  padding: 12px 20px;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-secondary, #181824);
}

.desktop-act-btn {
  background: none;
  border: none;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  transition: color 0.2s ease;
}

.desktop-act-btn:hover {
  color: var(--text-primary, #ffffff);
}

.desktop-act-btn.liked {
  color: #ef4444;
}

.desktop-act-btn.bookmarked {
  color: #3b82f6;
}

/* Reddit Upvote / Downvote Pill */
.reddit-vote-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 20px;
  padding: 2px 8px;
}

.reddit-vote-btn {
  background: none;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.reddit-vote-btn:hover {
  color: var(--text-primary, #ffffff);
}

.reddit-vote-btn.active#shorts-upvote-1,
.reddit-vote-btn.active {
  color: #f97316 !important;
}

.reddit-vote-score {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary, #ffffff);
  padding: 0 2px;
}

.desktop-comment-input-row {
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  background: var(--bg-secondary, #181824);
}

.desktop-comment-input-row input {
  flex: 1;
  background: var(--bg-tertiary, #222232);
  border: 1px solid var(--border-color, #36364f);
  border-radius: 20px;
  padding: 0 16px;
  height: 40px;
  font-size: 13px;
  color: var(--text-primary, #ffffff);
  outline: none;
}

.desktop-comment-input-row input:focus {
  border-color: #6366f1;
  background: var(--bg-card, #26263a);
}

.desktop-send-btn {
  background: #6366f1;
  color: var(--text);
  border: none;
  font-weight: 700;
  font-size: 12px;
  padding: 0 18px;
  border-radius: 20px;
  cursor: pointer;
}

/* Authentic Instagram Comment & Threaded Reply Component Styles */
.insta-comment-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  position: relative;
}

.insta-comment-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.insta-child-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.insta-comment-content {
  flex: 1;
  min-width: 0;
}

.insta-comment-text-box {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-primary, #111827);
  word-break: break-word;
}

.insta-comment-author {
  font-weight: 800;
  color: var(--text-primary, #111827);
  margin-right: 6px;
  cursor: pointer;
}

.insta-comment-body-text {
  font-weight: 400;
}

.insta-comment-sub-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  font-size: 11px;
}

.insta-comment-time {
  color: var(--text-muted, #8e8e8e);
  font-weight: 500;
}

.insta-comment-act-btn {
  background: none;
  border: none;
  color: var(--text-muted, #8e8e8e);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.insta-comment-act-btn:hover {
  color: var(--text-primary, #111827);
}

.insta-comment-act-btn.liked {
  color: #ef4444;
}

.insta-comment-heart-btn {
  background: none;
  border: none;
  color: var(--text-muted, #8e8e8e);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.insta-comment-heart-btn:hover {
  transform: scale(1.15);
}

.insta-replies-toggle-wrap {
  margin-top: 8px;
}

.insta-toggle-replies-btn {
  background: none;
  border: none;
  color: var(--text-muted, #8e8e8e);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.insta-dash-line {
  width: 24px;
  height: 1px;
  background: var(--text-muted, #8e8e8e);
}

.insta-child-replies-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--border-color, rgba(142, 142, 142, 0.2));
}

/* Share Post Modal Card Styles */
.share-modal-card {
  position: relative;
  margin: auto;
  width: 90%;
  max-width: 480px;
  background: var(--bg-secondary, #181824);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
}

.share-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.share-quick-actions {
  display: flex;
  gap: 12px;
  justify-content: space-around;
  margin-bottom: 16px;
}

.share-quick-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.share-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.share-quick-btn:hover .share-icon-wrap {
  transform: scale(1.1);
}

.share-quick-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.share-quick-btn:hover .share-quick-icon {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.06);
}

.share-quick-btn:active .share-quick-icon {
  transform: scale(0.96);
}

.share-quick-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  letter-spacing: 0.01em;
  max-width: 68px;
  line-height: 1.3;
}

.share-quick-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px;
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.share-quick-divider::before,
.share-quick-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}


.share-targets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-height: 180px;
  overflow-y: auto;
}

/* ============================================================
   LIGHT MODE COMPREHENSIVE RULES ([data-theme="light"])
   ============================================================ */
[data-theme="light"] {
  --bg-main: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-card: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
}

[data-theme="light"] .shorts-modal-overlay {
  background: rgba(248, 250, 252, 0.95) !important;
  backdrop-filter: blur(20px);
}

[data-theme="light"] .shorts-close-float-btn {
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .shorts-close-float-btn:hover {
  background: #f1f5f9 !important;
  color: #000000 !important;
}

[data-theme="light"] .desktop-post-modal-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .desktop-post-left {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  border-right: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .desktop-post-text-box {
  color: #0f172a !important;
  text-shadow: none !important;
}

[data-theme="light"] .desktop-post-right {
  background: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] .desktop-author-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .desktop-author-username {
  color: #0f172a !important;
}

[data-theme="light"] .desktop-caption-text {
  color: #334155 !important;
}

[data-theme="light"] .desktop-comments-list {
  background: #f8fafc !important;
}

[data-theme="light"] .insta-comment-item {
  color: #0f172a !important;
}

[data-theme="light"] .insta-comment-author {
  color: #0f172a !important;
}

[data-theme="light"] .insta-comment-text-box {
  color: #0f172a !important;
}

[data-theme="light"] .insta-comment-body-text {
  color: #1e293b !important;
}

[data-theme="light"] .insta-comment-time,
[data-theme="light"] .insta-comment-act-btn,
[data-theme="light"] .insta-toggle-replies-btn {
  color: #64748b !important;
}

[data-theme="light"] .insta-comment-act-btn:hover {
  color: #0f172a !important;
}

[data-theme="light"] .insta-comment-heart-btn {
  color: #64748b !important;
}

[data-theme="light"] .insta-dash-line {
  background: #94a3b8 !important;
}

[data-theme="light"] .desktop-actions-bar {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .desktop-act-btn {
  color: #475569 !important;
}

[data-theme="light"] .desktop-act-btn:hover {
  color: #0f172a !important;
}

[data-theme="light"] .desktop-comment-input-row {
  background: #ffffff !important;
}

[data-theme="light"] .desktop-comment-input-row input {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .desktop-comment-input-row input::placeholder {
  color: #64748b !important;
}

[data-theme="light"] .share-modal-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .share-quick-btn {
  color: #0f172a !important;
}


/* ============================================================
   DARK MODE COMPREHENSIVE RULES ([data-theme="dark"])
   ============================================================ */
[data-theme="dark"], :root:not([data-theme="light"]) {
  --bg-main: #090a0f;
  --bg-secondary: #12131c;
  --bg-tertiary: #1a1c28;
  --bg-card: #161722;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-color: var(--border);
}

[data-theme="dark"] .shorts-modal-overlay,
:root:not([data-theme="light"]) .shorts-modal-overlay {
  background: rgba(9, 10, 15, 0.95);
  backdrop-filter: blur(20px);
}

[data-theme="dark"] .shorts-close-float-btn,
:root:not([data-theme="light"]) .shorts-close-float-btn {
  background: #1e1e2d;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--text) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .shorts-close-float-btn:hover,
:root:not([data-theme="light"]) .shorts-close-float-btn:hover {
  background: #32324a;
}

[data-theme="dark"] .desktop-post-modal-card,
:root:not([data-theme="light"]) .desktop-post-modal-card {
  background: #12131c;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .desktop-post-left,
:root:not([data-theme="light"]) .desktop-post-left {
  background: linear-gradient(135deg, #181826 0%, #0d0d14 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .desktop-post-text-box,
:root:not([data-theme="light"]) .desktop-post-text-box {
  color: var(--text) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .desktop-post-right,
:root:not([data-theme="light"]) .desktop-post-right {
  background: #12131c;
  color: #f8fafc;
}

[data-theme="dark"] .desktop-author-bar,
:root:not([data-theme="light"]) .desktop-author-bar {
  background: #12131c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .desktop-author-username,
:root:not([data-theme="light"]) .desktop-author-username {
  color: var(--text);
}

[data-theme="dark"] .desktop-caption-text,
:root:not([data-theme="light"]) .desktop-caption-text {
  color: #cbd5e1;
}

[data-theme="dark"] .desktop-comments-list,
:root:not([data-theme="light"]) .desktop-comments-list {
  background: #0d0e14;
}

[data-theme="dark"] .insta-comment-item,
:root:not([data-theme="light"]) .insta-comment-item {
  color: #f8fafc;
}

[data-theme="dark"] .insta-comment-author,
:root:not([data-theme="light"]) .insta-comment-author {
  color: var(--text);
}

[data-theme="dark"] .insta-comment-text-box,
:root:not([data-theme="light"]) .insta-comment-text-box {
  color: #f8fafc;
}

[data-theme="dark"] .insta-comment-body-text,
:root:not([data-theme="light"]) .insta-comment-body-text {
  color: #e2e8f0;
}

[data-theme="dark"] .insta-comment-time,
[data-theme="dark"] .insta-comment-act-btn,
[data-theme="dark"] .insta-toggle-replies-btn,
:root:not([data-theme="light"]) .insta-comment-time,
:root:not([data-theme="light"]) .insta-comment-act-btn,
:root:not([data-theme="light"]) .insta-toggle-replies-btn {
  color: #94a3b8;
}

[data-theme="dark"] .insta-comment-act-btn:hover,
:root:not([data-theme="light"]) .insta-comment-act-btn:hover {
  color: var(--text);
}

[data-theme="dark"] .desktop-actions-bar,
:root:not([data-theme="light"]) .desktop-actions-bar {
  background: #12131c;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .desktop-act-btn,
:root:not([data-theme="light"]) .desktop-act-btn {
  color: #94a3b8;
}

[data-theme="dark"] .desktop-act-btn:hover,
:root:not([data-theme="light"]) .desktop-act-btn:hover {
  color: var(--text);
}

[data-theme="dark"] .desktop-comment-input-row,
:root:not([data-theme="light"]) .desktop-comment-input-row {
  background: #12131c;
}

[data-theme="dark"] .desktop-comment-input-row input,
:root:not([data-theme="light"]) .desktop-comment-input-row input {
  background: #1c1e2b;
  border: 1px solid #2e3146;
  color: var(--text);
}

[data-theme="dark"] .desktop-comment-input-row input::placeholder,
:root:not([data-theme="light"]) .desktop-comment-input-row input::placeholder {
  color: #64748b;
}

[data-theme="dark"] .share-modal-card,
:root:not([data-theme="light"]) .share-modal-card {
  background: #12131c;
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .share-quick-btn,
:root:not([data-theme="light"]) .share-quick-btn {
  color: var(--text);
}

/* Mobile responsive fallback (< 768px) */
@media (max-width: 768px) {
  .shorts-slide {
    padding: 0;
  }

  .desktop-post-modal-card {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .desktop-post-left {
    flex: 0 0 auto;
    height: 35vh;
    min-height: 200px;
    max-height: 300px;
    width: 100%;
  }

  .desktop-post-right {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .desktop-comments-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    padding: 12px 14px;
  }

  .desktop-author-bar {
    padding: 10px 14px;
  }

  .desktop-actions-bar {
    padding: 8px 14px;
  }

  .desktop-comment-input-row {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 10px 14px;
  }

  .shorts-close-float-btn {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

/* Light Mode Drawer for Mobile Overlay */
.light-mode-drawer {
  background: #ffffff !important;
  color: #111827 !important;
  border-top: 1px solid #e5e7eb !important;
}

.light-mode-drawer .shorts-drawer-header {
  border-bottom: 1px solid #e5e7eb !important;
}

.light-mode-drawer .shorts-drawer-body {
  background: #f9fafb !important;
}

.light-mode-drawer .shorts-comment-item {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.light-mode-drawer .shorts-comment-author {
  color: #111827 !important;
}

.light-mode-drawer .shorts-comment-text {
  color: #374151 !important;
}

.light-mode-drawer .shorts-drawer-footer {
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
}

.light-mode-drawer .shorts-drawer-footer input {
  background: #f3f4f6 !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
}

.shorts-viewport::-webkit-scrollbar {
  display: none;
}

.shorts-track {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.shorts-slide {
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.shorts-slide-content {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  box-sizing: border-box;
}

/* Background Backdrop for Shorts Slide */
.shorts-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.shorts-bg-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.2) 100%);
  z-index: 2;
}

/* Rich Text Card inside Shorts (For questions, text posts, math) */
.shorts-text-card {
  position: relative;
  z-index: 3;
  background: rgba(20, 20, 30, 0.75);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 70px;
  max-height: 65vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.shorts-card-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  font-weight: 500;
}

/* Discord Style Code Blocks */
.shorts-card-body pre code {
  display: block;
  background: #0f0f15;
  border: 1px solid #2d2d3d;
  border-radius: 10px;
  padding: 12px;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 13px;
  color: #a78bfa;
  overflow-x: auto;
  margin: 10px 0;
}

/* Right Vertical Action Bar (YouTube Shorts / IG Reels style) */
.shorts-action-bar {
  position: absolute;
  right: 16px;
  bottom: 100px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.shorts-act-btn {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  color: var(--text);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shorts-act-btn:hover {
  transform: scale(1.15);
  background: rgba(255, 255, 255, 0.22);
}

.shorts-act-btn.liked {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  animation: heartPulse 0.3s ease;
}

.shorts-act-btn.voted-up {
  color: #10b981;
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5);
}

.shorts-act-btn.voted-down {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
}

.shorts-act-btn.bookmarked {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
}

@keyframes heartPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.shorts-act-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  margin-top: 3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Bottom User Info Area in Shorts */
.shorts-user-info-bar {
  position: absolute;
  left: 20px;
  bottom: 24px;
  right: 80px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shorts-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shorts-author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #6366f1;
  object-fit: cover;
}

.shorts-author-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.shorts-level-badge {
  font-size: 10px;
  font-weight: 800;
  background: #6366f1;
  color: var(--text);
  padding: 2px 7px;
  border-radius: 10px;
}

/* Side/Bottom Comments Drawer Overlay */
.shorts-comment-drawer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  height: 65vh;
  background: rgba(14, 14, 20, 0.95);
  backdrop-filter: blur(24px);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border: 1px solid var(--border);
  z-index: 200;
  display: flex;
  flex-direction: column;
  animation: slideUpDrawer 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
}

@keyframes slideUpDrawer {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.shorts-drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-count-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #a78bfa;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
}

.drawer-close-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
}

.drawer-close-btn:hover {
  color: var(--text);
}

.shorts-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.shorts-comment-item {
  display: flex;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 12px;
}

.shorts-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.shorts-comment-content {
  flex: 1;
}

.shorts-comment-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.shorts-comment-text {
  font-size: 13px;
  color: #ddd;
  line-height: 1.4;
}

.shorts-drawer-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 10px;
  background: rgba(10, 10, 15, 0.98);
}

.shorts-drawer-footer input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0 16px;
  height: 40px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}

.shorts-drawer-footer input:focus {
  border-color: #6366f1;
}

.shorts-comment-send-btn {
  background: #6366f1;
  color: var(--text);
  border: none;
  font-weight: 700;
  font-size: 12px;
  padding: 0 18px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.shorts-comment-send-btn:hover {
  background: #4f46e5;
}


/* ============================================================
   INSTAGRAM / MODERN CHAT EXTENSIONS & REACTIONS
   ============================================================ */
.chat-msg-row-item {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 82%;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.chat-msg-row-item.msg-me-row {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-msg-row-item.msg-them-row {
  align-self: flex-start;
  flex-direction: row;
}

.msg-swipe-reply-icon {
  position: absolute;
  left: -32px;
  top: 50%;
  transform: translateY(-50%) scale(0.5);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.msg-swipe-reply-icon.ready {
  background: #3b82f6;
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

.msg-me-row .msg-swipe-reply-icon {
  left: auto;
  right: -32px;
}

.msg-avatar-col {
  cursor: pointer;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  transition: transform 0.15s ease;
}

.msg-avatar-col:hover {
  transform: scale(1.08);
}

.msg-column {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.msg-me-row .msg-column {
  align-items: flex-end;
}

.msg-them-row .msg-column {
  align-items: flex-start;
}

.msg-group-author {
  font-size: 11px;
  font-weight: 700;
  color: #a78bfa;
  margin-left: 6px;
  margin-bottom: 2px;
  user-select: none;
}

.msg-bubble-row {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.msg-me-row .msg-bubble-row {
  flex-direction: row-reverse;
}

.msg-body-wrapper {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  word-break: break-word;
  cursor: pointer;
  touch-action: pan-y;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease, filter 0.15s ease;
}

.msg-body-wrapper.msg-them {
  background: #15161b;
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px 18px 18px 4px;
}

.msg-body-wrapper.msg-me,
.msg-sender-bubble {
  background: #252836 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px 18px 4px 18px !important;
}

.msg-post-share-bubble {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.msg-text-content {
  letter-spacing: 0.15px;
  user-select: text;
  -webkit-user-select: text;
  white-space: pre-wrap;
  word-break: break-word;
}

.msg-text-content a.msg-link {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
  cursor: pointer;
  transition: color 0.15s ease;
}

.msg-text-content a.msg-link:hover {
  color: #93c5fd;
}

.msg-desktop-action-btn {
  opacity: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-3, #888);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.msg-bubble-row:hover .msg-desktop-action-btn {
  opacity: 1;
}

.msg-desktop-action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: scale(1.1);
}

/* Quoted Reply inside bubble */
.msg-reply-bubble {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
  max-width: 100%;
}

.msg-sender-bubble .msg-reply-bubble {
  background: rgba(0, 0, 0, 0.2);
}

.msg-reply-bar-accent {
  width: 3px;
  border-radius: 2px;
  background: #3b82f6;
  flex-shrink: 0;
}

.msg-sender-bubble .msg-reply-bar-accent {
  background: #a855f7;
}

.msg-reply-bubble-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.msg-reply-bubble-content strong {
  font-size: 10px;
  font-weight: 700;
  color: #93c5fd;
  line-height: 1.2;
}

.msg-sender-bubble .msg-reply-bubble-content strong {
  color: #d8b4fe;
}

.msg-reply-bubble-content span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* Reactions Pill Container */
.msg-reactions-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
  margin-bottom: 2px;
  z-index: 5;
  user-select: none;
}

.msg-me-row .msg-reactions-container {
  justify-content: flex-end;
}

.msg-reaction-badge {
  background: #111216;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.msg-reaction-badge:hover {
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.25);
  background: #1a1b22;
}

.msg-reaction-badge.my-reaction {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}

.msg-reaction-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-reaction-count {
  font-size: 10px;
  font-weight: 700;
  color: #cbd5e1;
}

.msg-reaction-badge.my-reaction .msg-reaction-count {
  color: #93c5fd;
}

/* Metadata (Time, self destruct, read receipts) */
.msg-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-3, #71717a);
  margin-top: 1px;
  margin-bottom: 2px;
  padding: 0 4px;
}

.msg-timestamp {
  font-variant-numeric: tabular-nums;
}

.msg-self-destruct-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #fbbf24;
}

.msg-read-receipt {
  display: inline-flex;
  align-items: center;
}

.msg-read-receipt-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.msg-read-receipt-init {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #27272a;
  color: #a1a1aa;
  font-size: 8px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Reply Preview Bar Above Input */
.chat-reply-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #0d0e12;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid #3b82f6;
  animation: slideUpReply 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  gap: 10px;
}

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

.chat-reply-indicator-line {
  display: none;
}

.chat-reply-content-box {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.chat-reply-user {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #3b82f6;
}

.chat-reply-text {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.chat-reply-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.chat-reply-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Double-tap Heart Animation */
.msg-double-tap-heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 20;
  animation: heartBurst 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes heartBurst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  40% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(0.8) translateY(-20px); opacity: 0; }
}

/* System retention divider */
.chat-system-retention-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 8px 16px;
  margin: 8px auto 14px;
  max-width: 480px;
  font-size: 11px;
  color: var(--text-3, #71717a);
  text-align: center;
}

.chat-system-divider-msg {
  align-self: center;
  text-align: center;
  margin: 12px auto;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-3, #71717a);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 12px;
  border-radius: 12px;
}

.scroll-bottom-btn {
  position: absolute;
  bottom: 75px;
  right: 20px;
  width: 34px;
  height: 34px;
  background: #111;
  border: 1px solid #333;
  color: var(--text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  z-index: 10;
  font-size: 14px;
}

.scroll-bottom-btn.show {
  opacity: 1;
  pointer-events: auto;
}

.group-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #050505;
  border: 1px solid #111;
  border-radius: 8px;
  transition: border-color 0.2s;
}

.group-member-row:hover {
  border-color: #222;
}

.admin-badge {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #333;
  color: var(--text);
  font-size: 8px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* Premium Shared Post inside Chat Bubble Card */
.chat-post-share-card {
  background: rgba(24, 24, 26, 0.85);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  width: 228px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.chat-post-share-card:hover {
  background: rgba(30, 30, 33, 0.95);
  border-color: var(--border);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.chat-post-share-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.chat-post-share-body {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.45;
}

.chat-post-share-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: #000;
  border: 1px solid var(--border);
}

.chat-post-share-footer {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-post-share-footer::after {
  content: '\203a';
  font-size: 14px;
}

/* Instagram-style Share Sheet Layout */
.share-sheet {
  max-width: 440px !important;
  background: rgba(16, 16, 18, 0.98) !important;
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 1px solid var(--border);
}

.share-modal-body {
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.share-search-box {
  position: relative;
  width: 100%;
}

.share-search-box input {
  width: 100%;
  height: 38px;
  padding: 0 16px 0 38px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 13px;
  transition: all 0.15s ease;
}

.share-search-box input:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border);
}

.share-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.35);
}

/* Grid layout of avatars */
.share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 10px;
  max-height: 40vh;
  overflow-y: auto;
  padding: 8px 4px;
  scrollbar-width: none;
}

.share-grid::-webkit-scrollbar {
  display: none;
}

/* Item styling */
.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.share-avatar-wrapper {
  position: relative;
  width: 58px;
  height: 58px;
  margin-bottom: 8px;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.share-avatar-wrapper .avatar-container {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

.share-avatar-wrapper .avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.share-avatar-wrapper .avatar img,
.share-avatar-img,
.share-avatar-circle {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  transition: transform 0.2s ease !important;
}

.share-item:hover .share-avatar-img,
.share-item:hover .share-avatar-circle,
.share-item:hover .avatar img {
  transform: scale(1.06);
}

#sharePostModal {
  z-index: 1006000 !important;
}

/* Mobile: Share & Group modal full-width bottom sheet */
@media (max-width: 479px) {

  #sharePostModal,
  #createGroupModal {
    align-items: flex-end;
    justify-content: center;
  }

  #sharePostModal .share-sheet,
  #createGroupModal .share-sheet {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.94, 0.6, 1);
  }

  #sharePostModal.open .share-sheet,
  #createGroupModal.open .share-sheet {
    transform: translateY(0) !important;
  }
}

/* Desktop: Share & Group modal centered bottom sheet */
@media (min-width: 480px) {

  #sharePostModal,
  #createGroupModal {
    align-items: flex-end;
    justify-content: center;
  }

  #sharePostModal .share-sheet,
  #createGroupModal .share-sheet {
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    transform: translateY(100%);
    padding-bottom: 24px;
    width: 420px;
    margin: 0;
  }

  #sharePostModal.open .share-sheet,
  #createGroupModal.open .share-sheet {
    transform: translateY(0);
  }
}

/* The badge: checkmark inside standard circle */
.share-select-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #333;
  border: 2px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--text);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Selected state modifications */
.share-item.selected .share-avatar-img,
.share-item.selected .share-avatar-circle {
  border-color: #38bdf8;
  transform: scale(0.96);
}

.share-item.selected .share-select-badge {
  background: #38bdf8;
  color: #000;
  transform: scale(1.1);
  font-weight: 900;
}

/* Name */
.share-name-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  width: 72px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.share-item.selected .share-name-label {
  color: var(--text);
  font-weight: 700;
}

/* Bottom Bar */
.share-bottom-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
}

.share-bottom-bar input {
  flex: 1;
  height: 40px;
  padding: 0 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  font-size: 13px;
}

.share-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: 21px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.8px;
  background: #5865f2 !important;
  color: var(--text) !important;
  border: none !important;
  margin: 0 !important;
  width: auto !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.35);
  position: relative;
}

.share-send-btn:hover:not(:disabled) {
  background: #4752c4 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(88, 101, 242, 0.5);
}

.share-send-btn:active:not(:disabled) {
  transform: translateY(0);
}

.share-send-btn:disabled {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

@media (min-width: 601px) {
  .share-send-btn {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    flex-shrink: 0;
  }
  .share-send-btn .share-btn-text {
    display: none !important;
  }
  .share-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: var(--text);
    font-size: 10px;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #1e1f22;
  }
}

/* ============================================================
   STATUS SELECTOR
   ============================================================ */
.status-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #111;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.2s;
}

.status-option:active {
  background: #222;
}

.status-dot-lg {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.status-desc {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.3;
}

/* ============================================================
   PROFILE POST SLIDER
   ============================================================ */
.slider-post-wrapper {
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  position: relative;
}

/* ============================================================
   FOCUS SUMMARY MULTI-STEP MODAL & AUTOCOMPLETE
   ============================================================ */
#focusSummaryModal {
  align-items: center;
  justify-content: center;
}

#focusSummaryModal .modal-sheet {
  border-radius: 24px;
  margin: 24px;
  max-width: 360px;
  width: calc(100% - 48px);
  border: 1px solid var(--border);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.9);
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
  max-height: calc(100dvh - 64px);
}

.summary-step {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 28px 24px;
  text-align: center;
}

.summary-step.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}


/* Emoji Grid */
.feeling-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 24px;
  width: 100%;
}

.feeling-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.feeling-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.feeling-emoji {
  font-size: 24px;
  filter: grayscale(1);
  transition: filter 0.2s ease;
}

.feeling-btn:hover .feeling-emoji {
  filter: grayscale(0);
}

.feeling-label {
  font-size: 9px;
  color: var(--text-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Category Grid */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.category-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.category-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.category-card-icon {
  font-size: 20px;
  color: var(--text);
  opacity: 0.6;
}

.category-card:hover .category-card-icon {
  opacity: 1;
}

.category-card-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Search Autocomplete */
.activity-search-box {
  position: relative;
  margin-bottom: 24px;
}

.activity-search-input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
}

.activity-search-input:focus {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

.activity-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #0d0d0d;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  max-height: 160px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.activity-suggestion-item {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.activity-suggestion-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

/* Similar users list in step 5 */
.similar-users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 24px;
  text-align: left;
}

.similar-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.similar-user-item:hover {
  background: var(--card);
  border-color: rgba(255, 255, 255, 0.1);
}

.similar-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.similar-user-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}

.similar-user-activity {
  font-size: 10px;
  color: var(--text-3);
}

/* In-app banner prompting rating */
.unrated-session-banner {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 16px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.unrated-banner-text {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
}

.unrated-banner-btn {
  background: #fff;
  color: #000;
  border: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.unrated-banner-btn:hover {
  transform: translateY(-1px);
}

/* ── PARTY CHAT FULLSCREEN ── */
.party-chat-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--bg);
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

.party-chat-header {
  position: sticky;
  top: 0;
  height: calc(50px + var(--safe-t));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--safe-t) 16px 0;
  background: #000;
  border-bottom: 1px solid var(--border-soft);
  z-index: 10;
}

/* Chat Messages styling */
.party-msg-row {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}

.party-msg-row.me {
  flex-direction: row-reverse;
}

.party-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}

.party-msg-content {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.party-msg-row.me .party-msg-content {
  align-items: flex-end;
}

.party-msg-name {
  font-size: 10px;
  color: var(--text-3);
  margin-bottom: 4px;
  font-weight: 700;
  cursor: pointer;
}

.party-msg-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  background: #1a1a1a;
  border: 1px solid #333;
}

.party-msg-row.me .party-msg-bubble {
  background: #fff;
  color: #000;
  border-color: var(--text);
}

@keyframes flashHighlight {
  0% {
    color: var(--text);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.2);
  }

  100% {
    color: inherit;
    text-shadow: none;
    background: inherit;
  }
}

.new-message-highlight {
  animation: flashHighlight 2s ease-out;
}

/* ── TIMER PRESENCE CHIP ── */
.timer-presence-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 16px;
  transition: background 0.2s, border-color 0.2s;
}

.timer-presence-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
}

.timer-presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: background 0.3s ease;
}

#timerPresenceText {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-3);
  letter-spacing: 0.5px;
}

/* ── UNREAD CHAT BADGE ── */
#partyChatUnreadBadge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #fff;
  color: #000;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  animation: badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgePop {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

/* ── SMOOTH BANNER ── */
.unrated-session-banner {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 16px;
  border: 1px solid transparent;
  transition: max-height 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 0.4s ease, margin 0.5s ease, padding 0.5s ease;
}

.unrated-session-banner.show {
  max-height: 100px;
  opacity: 1;
  margin: 16px 20px 0;
  padding: 12px 16px;
  border-color: var(--border);
}

/* ── PARTY FOCUS MEMBER HIGHLIGHT ── */
.party-focus-member {
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.party-focus-member.is-me {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

/* ── BUTTON HOVER INTERACTIONS ── */
.timer-secondary-row button,
.timer-start-btn,
.timer-stop-btn {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s, color 0.2s;
}

.timer-secondary-row button:hover,
.timer-start-btn:hover {
  transform: scale(1.03);
}

.timer-stop-btn:hover {
  transform: scale(1.03);
}

/* ── STATUS SELECTOR DOT SIZE ── */
.status-dot-lg {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
}

.status-option {
  padding: 14px 16px !important;
  border-radius: 12px;
  transition: background 0.2s;
}

.status-option:hover {
  background: var(--card);
}

/* ── MOBILE NAV BUTTONS PADDING ── */
@media (max-width: 480px) {
  .bottom-nav {
    padding: 0 8px;
  }

  .nav-btn {
    padding: 0;
  }

  .nav-label {
    font-size: 8.5px;
  }
}

/* ── POST MODAL RESPONSIVE DEVELOPMENTS ── */
.post-modal-author-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-modal-author-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.post-modal-author-username {
  font-size: 11px;
  color: var(--text-3);
  margin-left: 2px;
}

.post-char-counter {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-3);
  pointer-events: none;
  font-family: monospace;
  transition: color 0.2s;
}

.post-char-counter.warning {
  color: #fbbf24;
}

.post-char-counter.danger {
  color: #ef4444;
}

.post-preview-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 5;
}

.post-preview-remove-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.post-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--text-3) !important;
  border-color: var(--border) !important;
}

/* Bottom sheet style for post modal on mobile */
@media (max-width: 480px) {
  .post-modal {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    background: #050505;
    transition: bottom 0.4s cubic-bezier(0.1, 0.9, 0.2, 1);
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
  }

  .post-modal-overlay.open .post-modal {
    bottom: 0 !important;
  }
}


#timerPresenceText {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-3);
  letter-spacing: 0.5px;
}

/* ── UNREAD CHAT BADGE ── */
#partyChatUnreadBadge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #fff;
  color: #000;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  animation: badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgePop {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

/* ── SMOOTH BANNER ── */
.unrated-session-banner {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 16px;
  border: 1px solid transparent;
  transition: max-height 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 0.4s ease, margin 0.5s ease, padding 0.5s ease;
}

.unrated-session-banner.show {
  max-height: 100px;
  opacity: 1;
  margin: 16px 20px 0;
  padding: 12px 16px;
  border-color: var(--border);
}

/* ── PARTY FOCUS MEMBER HIGHLIGHT ── */
.party-focus-member {
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.party-focus-member.is-me {
  background: rgba(88, 101, 242, 0.15);
  border-radius: 6px;
}

/* ── BUTTON HOVER INTERACTIONS ── */
.timer-secondary-row button,
.timer-start-btn,
.timer-stop-btn {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s, color 0.2s;
}

.timer-secondary-row button:hover,
.timer-start-btn:hover {
  transform: scale(1.03);
}

.timer-stop-btn:hover {
  transform: scale(1.03);
}

/* ── STATUS SELECTOR DOT SIZE ── */
.status-dot-lg {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
}

.status-option {
  padding: 14px 16px !important;
  border-radius: 12px;
  transition: background 0.2s;
}

.status-option:hover {
  background: var(--card);
}

/* ── MOBILE NAV BUTTONS PADDING ── */
@media (max-width: 480px) {
  .bottom-nav {
    padding: 0 8px;
  }

  .nav-btn {
    padding: 0;
  }

  .nav-label {
    font-size: 8.5px;
  }
}

/* ── POST MODAL RESPONSIVE DEVELOPMENTS ── */
.post-modal-author-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-modal-author-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.post-modal-author-username {
  font-size: 11px;
  color: var(--text-3);
  margin-left: 2px;
}

.post-preview-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 5;
}

.post-preview-remove-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.post-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--text-3) !important;
  border-color: var(--border) !important;
}

/* Post modal is centered on all screen sizes */



/* Crop Viewport & Image constraints */
.crop-viewport {
  width: 260px;
  height: 260px;
  border-radius: 8px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  background: #000;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
}

.crop-image {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  max-width: none !important;
  max-height: none !important;
}

.crop-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-sizing: border-box;
}

.crop-grid-overlay::before,
.crop-grid-overlay::after {
  content: '';
  position: absolute;
}

.crop-grid-overlay::before {
  top: 0;
  bottom: 0;
  left: 33.33%;
  right: 33.33%;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.crop-grid-overlay::after {
  left: 0;
  right: 0;
  top: 33.33%;
  bottom: 33.33%;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#postCropZoom {
  accent-color: var(--text);
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

/* Plain text posts preview inside profile slider */
.pdetail-text-card-content {
  width: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
  background: linear-gradient(135deg, #101010, #181818);
  border-bottom: 1px solid var(--border-soft);
  text-align: center;
  box-sizing: border-box;
}

.pdetail-text-card-content p {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* MOBILE TIME FORMAT & TEXT WRAP PREVENTIONS */
.timer-total-val,
.session-row-time,
.rank-time,
.profile-insta-stat-val,
.fl-sub {
  white-space: nowrap !important;
}

@media (max-width: 480px) {

  /* Scale down duration text on very small screens to fit side-by-side */
  .profile-insta-stat-val {
    font-size: 12px !important;
  }

  .timer-total-val {
    font-size: 11px !important;
  }

  .session-row-time {
    font-size: 13px !important;
  }

  .rank-time {
    font-size: 11px !important;
  }

  /* Make XP bar slightly more compact on mobile to give room to the total chip */
  .timer-xp-rail {
    width: 100px !important;
  }

  .timer-level-chip {
    font-size: 11px !important;
    gap: 4px !important;
  }

  .timer-xp-txt {
    font-size: 9px !important;
  }
}

/* Premium Floating Message Action Popover */
.msg-action-popover {
  position: absolute;
  width: 200px;
  background: rgba(20, 20, 22, 0.98);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 24px 64px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

#messageActionsModal.open .msg-action-popover {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.msg-reaction-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  font-size: 20px;
}

.msg-reaction-row .react-emoji {
  cursor: pointer;
  transition: transform 0.12s ease;
}

.msg-reaction-row .react-emoji:hover {
  transform: scale(1.3);
}

.msg-reaction-row .react-emoji:active {
  transform: scale(0.9);
}

.msg-popover-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 2px 4px;
}

.msg-action-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  width: 100%;
}

.msg-action-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.msg-action-btn:active {
  background: var(--card);
}

.msg-action-btn.danger {
  color: var(--danger);
}

.msg-action-btn.danger:hover {
  background: var(--danger-bg);
  color: #ff453a;
}

.msg-action-btn svg {
  opacity: 0.55;
  transition: opacity 0.12s ease;
  color: currentColor;
}

.msg-action-btn:hover svg {
  opacity: 0.9;
}

/* Chat Message Row Highlighting / Glow Anim */
@keyframes msgGlow {
  0% {
    box-shadow: 0 0 0px transparent;
    background: transparent;
  }

  30% {
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.08);
    border-radius: 12px;
  }

  100% {
    box-shadow: 0 0 0px transparent;
    background: transparent;
  }
}

.chat-msg-row-item.glow-highlight {
  animation: msgGlow 1.6s ease-in-out;
  padding: 4px;
}

/* Mobile Pinned Chat Screen Overrides */
@media (max-width: 768px) {
  body.chat-active .bottom-nav {
    display: none !important;
  }

  body.chat-active #messagesPage {
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.chat-active .messages-container {
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.chat-active #chatArea {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 9999 !important;
    background: #000 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.chat-active #chatArea .chat-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #050505 !important;
    padding-top: calc(10px + var(--safe-t, 0px)) !important;
    height: calc(64px + var(--safe-t, 0px)) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
  }

  body.chat-active #chatArea .chat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    background: #000 !important;
  }

  body.chat-active #chatArea .chat-input-bar {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: #000 !important;
    padding: 12px 16px !important;
    border-top: 1px solid var(--border-soft) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box;
  }
}

/* Premium Full-Screen Chat Post View Modal */
#chatPostViewModal {
  background: #000 !important;
  display: none !important;
  align-items: center;
  justify-content: center;
  z-index: 999999 !important;
}

#chatPostViewModal .modal-sheet {
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  max-width: 480px !important;
  border-radius: 0 !important;
  border: none !important;
  margin: auto !important;
  display: flex;
  flex-direction: column;
  background: #000 !important;
  box-shadow: none !important;
}

#chatPostViewModal .modal-drag-handle {
  display: none !important;
}

#chatPostViewModal .modal-header {
  padding: calc(12px + var(--safe-t, 0px)) 16px 12px !important;
  background: #050505 !important;
  border-bottom: 1px solid var(--border-soft) !important;
  height: calc(52px + var(--safe-t, 0px)) !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

#chatPostViewContent {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px 16px 40px !important;
  max-height: none !important;
  background: #000 !important;
  scrollbar-width: none;
}

#chatPostViewContent::-webkit-scrollbar {
  display: none;
}

#chatPostViewModal.open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#chatPostViewModal.open .modal-sheet {
  transform: none !important;
}

/* ============================================================
   DEVICE INDICATOR — Chat Header Badge + Subtitle + Popup
   ============================================================ */

/* Subtitle below username in chat header */
.chat-device-subtitle {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.1px;
}

/* Clickable device icon badge — top-right of chat header */
.chat-device-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.45);
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.chat-device-badge:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  transform: scale(1.06);
}

.chat-device-badge:active {
  transform: scale(0.94);
}

/* Glassmorphism device info popup */
.device-info-popup {
  position: fixed;
  z-index: 999999;
  animation: dipSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: auto;
}

@keyframes dipSlideIn {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dip-inner {
  background: rgba(12, 12, 14, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px 18px 14px;
  min-width: 210px;
  max-width: 250px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2px;
}

.dip-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.1px;
}

.dip-desc {
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.55;
}

.dip-desc strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.dip-note {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}

/* Feed Comments Modal Premium Responsive Styles */
#feedCommentsModal .modal-sheet {
  background: rgba(10, 10, 12, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 20px;
  transform: scale(0.92);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#feedCommentsModal.open .modal-sheet {
  transform: scale(1);
}

@media (max-width: 480px) {
  #feedCommentsModal .modal-sheet {
    position: fixed;
    bottom: -100% !important;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    transform: none !important;
    transition: bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #feedCommentsModal.open .modal-sheet {
    bottom: 0 !important;
  }
}

/* Fallback for avatars that are not rendered in the voice-member wrapper. */
.avatar.is-speaking {
  animation: none !important;
  border-color: #23a55a !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .15s ease !important;
}

/* Focus Summary Modal Centering & Transition Duxeltmesi */
#focusSummaryModal {
  z-index: 1000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#focusSummaryModal .modal-sheet {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  border-radius: 24px !important;
  margin: auto !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease !important;
}

#focusSummaryModal.open .modal-sheet {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

/* Voice Control Button Styling */
.voice-ctrl-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.voice-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.voice-ctrl-btn:active {
  transform: scale(0.95);
}

.voice-ctrl-btn.muted {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.voice-ctrl-btn.muted:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.4);
}

.voice-ctrl-btn.deafened {
  background: rgba(156, 163, 175, 0.15);
  border-color: rgba(156, 163, 175, 0.3);
  color: #9ca3af;
}

.voice-ctrl-btn.deafened:hover {
  background: rgba(156, 163, 175, 0.25);
  border-color: rgba(156, 163, 175, 0.4);
}

/* Voice Badge Indicator styles on Lobby Cards */
.voice-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
}

.voice-badge-icon.local-mute {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.voice-badge-icon.muted {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.voice-badge-icon.deafened {
  background: rgba(156, 163, 175, 0.1);
  border: 1px solid rgba(156, 163, 175, 0.2);
}

.voice-badge-icon.unmuted {
  position: relative !important;
  background: rgba(35, 165, 90, 0.12) !important;
  border: 1px solid rgba(35, 165, 90, 0.25) !important;
  color: #23a55a !important;
  overflow: hidden !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.voice-badge-icon.unmuted .voice-mic-svg {
  display: block;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.voice-badge-icon.unmuted .voice-wave-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.voice-wave-bars .voice-bar {
  display: block;
  width: 2px;
  background: #23a55a;
  border-radius: 2px;
  height: 3px;
  transform-origin: center;
}

.party-focus-member.is-speaking {
  background-color: rgba(35, 165, 90, 0.08) !important;
  border-color: rgba(35, 165, 90, 0.3) !important;
}

.party-focus-member.is-speaking .voice-badge-icon.unmuted,
.voice-badge-icon.unmuted.is-speaking {
  background: rgba(35, 165, 90, 0.22) !important;
  border-color: rgba(35, 165, 90, 0.5) !important;
  box-shadow: none !important;
}

.party-focus-member.is-speaking .voice-badge-icon.unmuted .voice-mic-svg,
.voice-badge-icon.unmuted.is-speaking .voice-mic-svg {
  opacity: 0 !important;
  transform: scale(0.6) !important;
}

.party-focus-member.is-speaking .voice-badge-icon.unmuted .voice-wave-bars,
.voice-badge-icon.unmuted.is-speaking .voice-wave-bars {
  opacity: 1 !important;
}

.party-focus-member.is-speaking .voice-wave-bars .voice-bar:nth-child(1),
.voice-badge-icon.unmuted.is-speaking .voice-wave-bars .voice-bar:nth-child(1) {
  animation: voiceWavePulse1 0.42s ease-in-out infinite alternate !important;
}

.party-focus-member.is-speaking .voice-wave-bars .voice-bar:nth-child(2),
.voice-badge-icon.unmuted.is-speaking .voice-wave-bars .voice-bar:nth-child(2) {
  animation: voiceWavePulse2 0.32s ease-in-out infinite alternate 0.1s !important;
}

.party-focus-member.is-speaking .voice-wave-bars .voice-bar:nth-child(3),
.voice-badge-icon.unmuted.is-speaking .voice-wave-bars .voice-bar:nth-child(3) {
  animation: voiceWavePulse3 0.38s ease-in-out infinite alternate 0.05s !important;
}

@keyframes voiceWavePulse1 {
  0% { height: 3px; }
  100% { height: 9px; }
}

@keyframes voiceWavePulse2 {
  0% { height: 4px; }
  100% { height: 12px; }
}

@keyframes voiceWavePulse3 {
  0% { height: 2px; }
  100% { height: 8px; }
}

/* User Voice Settings Modal Premium Centering */
#userVoiceSettingsModal {
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#userVoiceSettingsModal .modal-sheet {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  border-radius: 24px !important;
  margin: auto !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
}

#userVoiceSettingsModal.open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#userVoiceSettingsModal.open .modal-sheet {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

/* Focus Setup Mode Selection Modal Styling */
#focusSetupModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 999999 !important;
  box-sizing: border-box !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#focusSetupModal.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ── FOCUS SETUP MODAL (Titanium / Obsidian Monochrome Design) ── */
.fsm-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100010 !important;
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;
}

.fsm-modal-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.fsm-card {
  background: #0b0c10 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  max-width: 520px !important;
  width: 100% !important;
  max-height: min(780px, calc(100vh - 40px)) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: fsmSheetOpen 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
  color: #f2f3f5 !important;
  box-sizing: border-box !important;
}

@keyframes fsmSheetOpen {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* iOS Sheet Grabber / Drag Indicator */
.fsm-sheet-grabber-wrap {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 4px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex-shrink: 0;
}

.fsm-sheet-grabber {
  width: 38px;
  height: 4.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.16s ease, transform 0.16s ease;
}

.fsm-sheet-grabber-wrap:hover .fsm-sheet-grabber {
  background: rgba(255, 255, 255, 0.4);
  transform: scaleX(1.1);
}

/* Navigation Bar */
.fsm-nav-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  min-height: 52px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  background: #0b0c10 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-sizing: border-box !important;
}

.fsm-nav-left {
  flex: 0 0 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.fsm-nav-center {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 0 !important;
}

.fsm-nav-right {
  flex: 0 0 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.fsm-nav-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.fsm-nav-back-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 6px 10px 6px 6px !important;
  border-radius: 8px !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  min-height: 34px !important;
  -webkit-tap-highlight-color: transparent !important;
}

.fsm-nav-back-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.fsm-nav-back-btn:active {
  transform: scale(0.96) !important;
}

.fsm-nav-close-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.65) !important;
  cursor: pointer !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.fsm-nav-close-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
}

.fsm-nav-close-btn:active {
  transform: scale(0.92) !important;
}

/* Micro Progress Indicator Track */
.fsm-progress-track {
  width: 100% !important;
  height: 2px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.fsm-progress-bar {
  height: 100% !important;
  background: #ffffff !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Modal Body & Sleek Scrollbar */
.fsm-body {
  padding: 14px 20px 18px !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent !important;
}

.fsm-body::-webkit-scrollbar {
  width: 5px !important;
}

.fsm-body::-webkit-scrollbar-track {
  background: transparent !important;
}

.fsm-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
}

.fsm-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.26) !important;
}

/* Step transitions */
.fsm2-step {
  display: none;
  animation: fsmStepSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fsm2-step.active {
  display: block !important;
}

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

.fsm-step-heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 10px !important;
}

.fsm-step-desc {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}

/* Search input - Clean dark Obsidian */
.fsm-search-wrap {
  position: relative !important;
  width: 100% !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.fsm-search-icon {
  position: absolute !important;
  left: 14px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  pointer-events: none !important;
}

#fsm2SearchInput {
  width: 100% !important;
  background: #111216 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 11px 38px 11px 40px !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  outline: none !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#fsm2SearchInput:focus {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: #15161c !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04) !important;
}

#fsm2SearchInput::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.fsm-search-clear {
  position: absolute !important;
  right: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.14s ease !important;
}

.fsm-search-clear:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

/* Quick custom add pill */
.fsm-custom-quick-wrap {
  margin-bottom: 12px !important;
  animation: fsmStepSlide 0.2s ease;
}

.fsm-custom-quick-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: #111216 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.03) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
}

.fsm-custom-quick-btn:hover {
  background: #16171d !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.fsm-custom-quick-btn svg {
  color: rgba(255, 255, 255, 0.7) !important;
  flex-shrink: 0 !important;
}

/* Category Filter Pills - Neutral transparent chips */
.fsm2-cat-pills {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
  margin-bottom: 12px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
}

.fsm2-cat-pills::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.fsm2-cat-pill {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  border-radius: 999px !important;
  padding: 6px 13px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
}

.fsm2-cat-pill:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.fsm2-cat-pill:active {
  transform: scale(0.96) !important;
}

.fsm2-cat-pill.active {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #0d1117 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.fsm2-cat-pill.active svg {
  stroke: #0d1117 !important;
}

/* Personal / Quick Pick section */
.fsm-personal-section {
  margin-bottom: 12px !important;
}

.fsm-personal-section .fsm-section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-bottom: 8px !important;
}

.fsm-personal-list {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.fsm-personal-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.fsm-personal-item {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 9px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  cursor: pointer !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fsm-personal-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.fsm-personal-item.selected {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Activity List - Borderless & Clean list design */
.fsm2-act-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.fsm2-act-item {
  padding: 10px 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  text-align: left !important;
  user-select: none !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent !important;
}

.fsm2-act-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  transform: none !important;
}

.fsm2-act-item:active {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: scale(0.99) !important;
}

.fsm2-act-item.selected {
  background: rgba(255, 255, 255, 0.09) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}

.fsm2-act-item-custom {
  background: transparent !important;
  border: none !important;
}

.fsm2-act-item-custom:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
}

.fsm2-custom-tag-btn {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.15s ease !important;
}

.fsm2-act-item-custom:hover .fsm2-custom-tag-btn {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.fsm2-act-leading {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.fsm2-act-text-wrap {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.fsm2-act-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.fsm2-act-tag {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.fsm2-act-item.selected .fsm2-act-tag {
  color: rgba(255, 255, 255, 0.7) !important;
}

.fsm2-act-trailing {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.fsm2-act-arrow {
  color: rgba(255, 255, 255, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.16s ease, color 0.16s ease !important;
}

.fsm2-act-item:hover .fsm2-act-arrow {
  color: rgba(255, 255, 255, 0.6) !important;
  transform: translateX(2px) !important;
}

.fsm2-act-check {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #0d1117 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Empty State */
.fsm-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 16px !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.fsm-empty-state svg {
  margin-bottom: 10px !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

.fsm-empty-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
}

.fsm-empty-desc {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  max-width: 320px !important;
  line-height: 1.4 !important;
}

/* Step 2 Mode Cards - Deep Blunk charcoal */
.fsm2-mode-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.fsm2-card {
  padding: 18px !important;
  border-radius: 16px !important;
  background: #111216 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.03) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  color: #f2f3f5 !important;
  box-sizing: border-box !important;
}

.fsm2-card:hover {
  background: #16171d !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  transform: translateY(-1px) !important;
}

.fsm2-card.selected {
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  background: #16171d !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.fsm2-card-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.75) !important;
  flex-shrink: 0 !important;
  transition: all 0.18s ease !important;
}

.fsm2-card:hover .fsm2-card-icon {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.fsm2-card.selected .fsm2-card-icon {
  background: #ffffff !important;
  color: #0b0c10 !important;
  border: none !important;
}

.fsm2-card-info {
  flex: 1 1 auto !important;
  background: transparent !important;
}

.fsm2-card-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  background: transparent !important;
}

.fsm2-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  background: transparent !important;
}

.fsm2-card-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.fsm2-card.selected .fsm2-card-badge {
  background: #ffffff !important;
  color: #0d1117 !important;
}

.fsm2-card-desc {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-top: 5px !important;
  line-height: 1.4 !important;
  background: transparent !important;
}

.fsm2-card.selected .fsm2-card-desc {
  color: rgba(255, 255, 255, 0.8) !important;
}

.fsm2-radio {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.16s ease !important;
  background: transparent !important;
}

.fsm2-card.selected .fsm2-radio {
  border-color: #ffffff !important;
  background: #ffffff !important;
}

.fsm2-radio-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: transparent !important;
}

.fsm2-card.selected .fsm2-radio-dot {
  background: #0d1117 !important;
}

/* Step 3 Pomodoro Presets & Steppers - Deep Charcoal */
.fsm-presets {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}

.fsm-preset {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  background: #111216 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.03) !important;
  padding: 14px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fsm-preset:hover {
  background: #16171d !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  transform: translateY(-1px) !important;
}

.fsm-preset.active {
  border-color: rgba(255, 255, 255, 0.32) !important;
  background: #16171d !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.fsm-preset-top {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  background: transparent !important;
}

.fsm-preset-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: transparent !important;
}

.fsm-preset-badge {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  border: none !important;
}

.fsm-preset-times {
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 500 !important;
  background: transparent !important;
}

.fsm-preset.active .fsm-preset-times {
  color: rgba(255, 255, 255, 0.85) !important;
}

.fsm-custom-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: transparent !important;
}

.fsm-custom-field {
  flex: 1 1 50% !important;
  background: transparent !important;
}

.fsm-custom-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: block !important;
  margin-bottom: 7px !important;
  background: transparent !important;
}

.fsm-num-input {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #111216 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.03) !important;
  overflow: hidden !important;
}

.fsm-num-input button {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  width: 44px !important;
  height: 44px !important;
  cursor: pointer !important;
  transition: background 0.14s ease !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fsm-num-input button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.fsm-num-input input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  height: 44px !important;
  padding: 0 !important;
  outline: none !important;
  font-variant-numeric: tabular-nums !important;
}

.fsm-num-input input::-webkit-inner-spin-button,
.fsm-num-input input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Footer & Action Dock */
.fsm-footer {
  padding: 14px 20px 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: #0b0c10 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

.fsm-footer-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

.fsm-footer-summary-tag {
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 60% !important;
  background: transparent !important;
}

.fsm-footer-summary-mode {
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 500 !important;
  background: transparent !important;
}

/* Complete transparency safety rule for all sub-divs */
#focusSetupModal .fsm2-card-info,
#focusSetupModal .fsm2-card-title-row,
#focusSetupModal .fsm2-card-title,
#focusSetupModal .fsm2-card-desc,
#focusSetupModal .fsm2-act-leading,
#focusSetupModal .fsm2-act-text-wrap,
#focusSetupModal .fsm2-act-title,
#focusSetupModal .fsm2-act-tag,
#focusSetupModal .fsm2-act-trailing,
#focusSetupModal .fsm-preset-top,
#focusSetupModal .fsm-preset-name,
#focusSetupModal .fsm-preset-times,
#focusSetupModal .fsm-custom-row,
#focusSetupModal .fsm-custom-field,
#focusSetupModal .fsm-custom-label,
#focusSetupModal .fsm-step-desc,
#focusSetupModal .fsm-step-heading {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.fsm-start-btn {
  width: 100% !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #0b0c10 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.16) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

.fsm-start-btn:hover:not(:disabled) {
  background: #f0f2f5 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(255, 255, 255, 0.24) !important;
}

.fsm-start-btn:active:not(:disabled) {
  transform: scale(0.98) !important;
}

.fsm-start-btn:disabled {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.fsm-start-btn svg {
  transition: transform 0.16s ease !important;
}

.fsm-start-btn:hover:not(:disabled) svg {
  transform: translateX(2px) !important;
}

/* ── Mobile Threads / Instagram Full-Screen Responsive ────────── */
@media (max-width: 640px) {
  .fsm-modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #07090e !important;
  }

  .fsm-card {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    animation: fsmMobileFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }

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

  .fsm-sheet-grabber-wrap {
    display: none !important;
  }

  .fsm-nav-bar {
    padding-top: max(env(safe-area-inset-top, 0px), 14px) !important;
    padding-bottom: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    min-height: calc(56px + max(env(safe-area-inset-top, 0px), 0px)) !important;
  }

  .fsm-body {
    padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 12px)) !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    scrollbar-width: none !important;
  }

  .fsm-body::-webkit-scrollbar {
    display: none !important;
  }

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

  .fsm-footer {
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 12px)) !important;
    background: rgba(10, 12, 16, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .fsm-start-btn {
    height: 52px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
  }
}

/* ── Pomodoro Break Phase ───────────────────────────────────── */
.pomo-break-display {
  font-size: 80px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -4px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(255,255,255,0.15);
  animation: breakPulse 2s ease-in-out infinite;
}
@keyframes breakPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
.timer-display-solo.pomo-break-mode {
  color: var(--text) !important;
  text-shadow: 0 0 30px rgba(255,255,255,0.15) !important;
}
.pomo-break-label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.85;
}
.pomo-skip-break-btn {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.pomo-skip-break-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(108,99,255,0.4); transform: scale(1); }
  50% { box-shadow: 0 4px 30px rgba(108,99,255,0.8); transform: scale(1.03); }
}
.pulse-anim { animation: pulseGlow 0.9s ease-in-out infinite; }

/* Custom Channel Config Modal Styling */
#channelConfigModal {
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#channelConfigModal .modal-sheet {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  border-radius: 24px !important;
  margin: auto !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
}

#channelConfigModal.open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#channelConfigModal.open .modal-sheet {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

/* Lobby Card Settings button hover */
.member-voice-settings-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text) !important;
}

/* Sub-Channel & Drag-and-Drop Styling */
.sub-channel-card {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 6px;
  transition: all 0.2s ease;
  position: relative;
}

.sub-channel-card:hover {
  border-color: var(--border);
}

.sub-channel-card.drag-over {
  border: 2px dashed #5865f2 !important;
  background: rgba(88, 101, 242, 0.12) !important;
  box-shadow: 0 0 16px rgba(88, 101, 242, 0.2) !important;
}

.party-focus-member.can-drag {
  cursor: grab !important;
  user-select: none !important;
}

.party-focus-member.can-drag:active,
.party-focus-member.dragging {
  cursor: grabbing !important;
  opacity: 0.45 !important;
  transform: scale(0.98) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.sub-channel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  margin-bottom: 8px;
}

.sub-channel-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sub-channel-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-family: monospace;
}

.sub-channel-badge.full {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.draggable-member {
  cursor: grab;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.draggable-member:active {
  cursor: grabbing;
  opacity: 0.6;
}

.draggable-member.dragging {
  opacity: 0.4;
  transform: scale(0.98);
}

.role-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.role-badge.owner {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.role-badge.admin {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.role-badge.moderator {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.role-badge.member {
  background: var(--card);
  color: #888;
}

/* Focus Modal Footer Controls Bar */
.party-focus-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* Mobile Responsive Adjustments */
@media (max-width: 767px) {
  #timerPage.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 12px 16px !important;
  }

  .timer-main-stage {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .party-focus-overlay.in-active-party:not(.collapsed) {
    order: 2 !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  .party-focus-members {
    max-height: 240px !important;
    overflow-y: auto !important;
  }

  .party-focus-footer {
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 12px;
  }

  .party-focus-footer .timer-secondary-row {
    width: 100%;
    justify-content: center !important;
    flex-wrap: wrap;
  }

  .party-focus-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  #soloPartyControlsRow button {
    width: 100%;
    justify-content: center;
  }

  .sub-channel-card {
    padding: 0;
  }

  .sub-channel-title {
    font-size: 12px;
  }
}

/* ============================================================
   MASTER DESKTOP LAYOUT & BORDERLESS SLEEK STYLING OVERRIDES
   ============================================================ */

/* Remove harsh outer borders across all cards, overlays and badges */
.party-focus-overlay,
.sub-channel-card,
.party-focus-member,
.party-duel-row,
.mono-card,
.timer-status-chip,
.timer-room-btn,
.timer-chat-btn,
.timer-leave-btn,
.role-badge,
.voice-ctrl-btn,
.sub-channel-badge,
#soloPartyControlsRow button {
  border: none !important;
}

/* Soft, elegant background tones */
.party-focus-overlay {
  background: #17181e !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

.party-duel-row {
  background: var(--card) !important;
  border-radius: 10px !important;
}

.timer-status-chip {
  background: var(--card) !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
}

.timer-room-btn,
.timer-chat-btn,
#timerSoloPartyBtn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}

.timer-room-btn:hover,
.timer-chat-btn:hover,
#timerSoloPartyBtn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

.timer-leave-btn {
  background: rgba(255, 69, 58, 0.12) !important;
  color: #ff453a !important;
  border-radius: 10px !important;
}

.timer-leave-btn:hover {
  background: rgba(255, 69, 58, 0.25) !important;
  color: var(--text) !important;
}

.voice-ctrl-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 50% !important;
}

.voice-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* Desktop 2-Column Layout Override (min-width: 768px) */
@media (min-width: 768px) {
  #timerPage.active {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    height: calc(100vh - var(--nav-h, 64px)) !important;
    height: calc(100dvh - var(--nav-h, 64px)) !important;
    max-height: calc(100vh - var(--nav-h, 64px)) !important;
    margin: 0 auto !important;
    padding: 60px 24px calc(var(--nav-h, 64px) + 16px) !important;
    gap: 28px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Left Vertical Sidebar (Voice Overlay) - Desktop Bounds & Pinned Control Bar */
  .party-focus-overlay.in-active-party:not(.collapsed):not(.has-drag-pos) {
    position: fixed !important;
    top: 76px !important;
    left: 20px !important;
    bottom: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
    height: auto !important;
    max-height: calc(100dvh - 76px - var(--nav-h, 64px) - env(safe-area-inset-bottom, 0px) - 20px) !important;
    width: 280px !important;
    min-width: 280px !important;
    margin: 0 !important;
    border-radius: 18px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1000100 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    background: #111214 !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
  }

  .party-focus-overlay:not(.collapsed) .party-focus-members {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  .party-focus-overlay:not(.collapsed) .party-focus-footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .party-focus-footer .voice-lobby-controls {
    justify-content: center !important;
  }

  .party-focus-footer .timer-secondary-row {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Right Main Stage (Timer Container) */
  .timer-main-stage {
    flex: 1 !important;
    max-width: 520px !important;
    background: #17181e !important;
    border-radius: 22px !important;
    padding: 32px 28px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .timer-start-btn {
    width: 100% !important;
    max-width: 220px !important;
    margin: 16px auto !important;
    background: #666777 !important;
    color: var(--text) !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  }

  .timer-start-btn:hover {
    background: #78798c !important;
  }
}

/* ============================================================
   PIXEL-PERFECT ALIGNMENT & DISCORD LAYOUT OVERRIDES
   ============================================================ */

/* 1. DISABLE LIFT ANIMATIONS ON SPECIFIC ELEMENTS ONLY */
.timer-start-btn:hover,
.timer-stop-btn:hover,
.timer-secondary-row button:hover,
.sub-channel-card:hover,
.sub-channel-header:hover,
.party-focus-member:hover,
.mono-card:hover {
  transform: none !important;
}

/* 2. DISCORD VOICE CHANNEL SIDEBAR & MEMBER LIST ALIGNMENT */
.party-focus-overlay {
  background: #1e1f22 !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Room Name & Channel Title Auto Marquee Text Scroll */
.party-label-scroll-wrap {
  overflow: hidden !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.party-focus-label {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  color: var(--text) !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  transform: translateX(0);
}

.party-focus-label.is-long-title,
.party-focus-label:hover {
  animation: partyTitleMarquee var(--party-title-duration, 8s) linear infinite alternate !important;
  will-change: transform;
}

@keyframes partyTitleMarquee {
  0%, 20% {
    transform: translateX(0);
  }
  80%, 100% {
    transform: translateX(var(--party-title-shift, 0px));
  }
}

.sub-channel-card {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sub-channel-header {
  background: #2b2d31 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: #dbdee1 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
  user-select: none !important;
}

.sub-channel-header:hover {
  background: #35373c !important;
  color: var(--text) !important;
}

.sub-channel-card.active-channel > .sub-channel-header {
  background: #2b2d31 !important;
  border: 1px solid var(--border) !important;
}

/* Sub-Channel Name Auto Marquee on Hover */
.sub-channel-name {
  display: inline-block !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  max-width: 155px !important;
  vertical-align: middle !important;
}

.sub-channel-header:hover .sub-channel-name {
  text-overflow: clip !important;
  animation: subChanMarquee 6s linear infinite alternate !important;
}

@keyframes subChanMarquee {
  0%, 25% { transform: translateX(0); }
  75%, 100% { transform: translateX(calc(-100% + 130px)); }
}

.sub-channel-members-list {
  padding: 6px 0 4px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.party-focus-member {
  background-color: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  color: #949ba4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.party-focus-member:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text) !important;
}

.party-focus-member.is-me {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text) !important;
}

.party-focus-member.is-me:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--text) !important;
}

/* Custom Sleek Site-Themed Scrollbars */
.party-focus-members {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent !important;
}

.party-focus-members::-webkit-scrollbar,
::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

.party-focus-members::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
  background: transparent !important;
}

.party-focus-members::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background: var(--t-border-strong) !important;
  border-radius: 10px !important;
}

.party-focus-members::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
  background: var(--t-accent-primary) !important;
}

.party-focus-member-name {
  color: inherit !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

.party-focus-member-bar-wrap {
  display: none !important;
}

.party-focus-member-time {
  margin-left: auto !important;
  font-size: 12px !important;
  color: #949ba4 !important;
}

/* ============================================================
   DISCORD CLASSIC ESTHETIC & SHARP ZERO-RADIUS SIDEBAR OVERRIDES
   ============================================================ */

/* 1. COMPLETELY HIDE ALL UNWANTED BANNERS & MODAL CRACK OVERLAYS */
#violationBanner,
.violation-banner,
#unratedSessionBanner,
.unrated-session-banner,
.crack-overlay {
  display: none !important;
}

/* 2. ODAKLAN BUTTON (Frameless, clean solid accent) */
.timer-start-btn {
  width: 100% !important;
  max-width: 200px !important;
  margin: 16px auto 0 !important;
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease !important;
}

.timer-start-btn:hover {
  background: #e5e5e5 !important;
  color: #000000 !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 3. ICON-ONLY SECONDARY BUTTONS (Lobi, Sohbet, Ayrıl, Odak Odaları) */
.timer-room-btn,
.timer-chat-btn,
.timer-leave-btn,
#timerSoloPartyBtn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  color: #949ba4 !important;
  border-radius: 8px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.timer-room-btn:hover,
.timer-chat-btn:hover,
#timerSoloPartyBtn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text) !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.timer-leave-btn:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 4. VOICE CONTROL BUTTONS (Kulaklık & Mikrofon - Transparent till hover) */
.voice-ctrl-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  color: #949ba4 !important;
  border-radius: 50% !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.voice-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text) !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.voice-ctrl-btn.muted,
.voice-ctrl-btn.deafened {
  background: transparent !important;
  border: none !important;
  color: #ef4444 !important;
}

.voice-ctrl-btn.muted:hover,
.voice-ctrl-btn.deafened:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: none !important;
}

/* 5. TOP META BAR & HEADER LAYOUT (3 equal columns for 100% dead-center alignment) */
/* Cleaned up duplicate topbar block */

/* Odak Odası / Focus Room member avatar status dot at bottom-right edge */
.party-focus-member .avatar,
.focus-member-card .avatar {
  position: relative !important;
}

.party-focus-member .avatar .status-dot,
.party-focus-member .avatar-status-dot,
.focus-member-card .status-dot,
.party-focus-member .status-online-dot,
.voice-avatar-wrap .status-online-dot {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  top: auto !important;
  left: auto !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  border-radius: 50% !important;
  border: 2px solid #111214 !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
}

.voice-lobby-controls,
.timer-secondary-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
}

.voice-ctrl-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.voice-ctrl-btn svg {
  stroke: #ffffff !important;
  color: var(--text) !important;
}

.voice-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--text) !important;
}

.voice-ctrl-btn:hover svg {
  stroke: #ffffff !important;
}

.voice-ctrl-btn.muted,
.voice-ctrl-btn.deafened {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

.voice-ctrl-btn.muted svg,
.voice-ctrl-btn.deafened svg {
  stroke: #ef4444 !important;
}

.party-invite-btn,
.party-add-channel-btn {
  background: transparent !important;
  border: none !important;
  color: #dbdee1 !important;
  opacity: 0.85 !important;
  padding: 4px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.15s ease, color 0.15s ease !important;
}

.party-invite-btn svg,
.party-add-channel-btn svg {
  stroke: #dbdee1 !important;
  color: #dbdee1 !important;
}

.party-invite-btn:hover,
.party-add-channel-btn:hover {
  opacity: 1 !important;
  color: var(--text) !important;
}

.party-invite-btn:hover svg,
.party-add-channel-btn:hover svg {
  stroke: #ffffff !important;
  color: var(--text) !important;
}

#soloPartyControlsRow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 !important;
}

/* 7. DISCORD WORKSPACE & SLEEK DARK BACKGROUND */
#timerPage.active {
  position: relative !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: calc(100vh - var(--nav-h, 64px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg, #000000) !important;
  overflow: hidden !important;
}

.timer-main-stage {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: min(100%, 1400px) !important;
  background: radial-gradient(
    ellipse 75% 55% at 50% 50%,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(255, 255, 255, 0.008) 45%,
    transparent 75%
  ) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 40px 20px 20px !important;
  gap: 20px !important;
  transition: background 0.6s ease !important;
}

[data-theme="light"] .timer-main-stage {
  background: radial-gradient(
    ellipse 75% 55% at 50% 50%,
    rgba(0, 0, 0, 0.02) 0%,
    transparent 70%
  ) !important;
}

.timer-main-stage:has(.timer-hourglass-frame.is-break) {
  background: radial-gradient(
    ellipse 75% 55% at 50% 50%,
    rgba(56, 189, 248, 0.06) 0%,
    rgba(56, 189, 248, 0.015) 45%,
    transparent 75%
  ) !important;
}

/* Left-Anchored Focus Room Sidebar */
.party-focus-overlay {
  display: none;
}

.party-focus-overlay.in-active-party {
  display: flex !important;
}

/* Desktop default (expanded, in-active-party) */
.party-focus-overlay.in-active-party:not(.collapsed) {
  position: fixed !important;
  top: 76px !important;
  left: 20px !important;
  bottom: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  width: 280px !important;
  height: auto !important;
  max-height: calc(100dvh - 76px - var(--nav-h, 64px) - env(safe-area-inset-bottom, 0px) - 20px) !important;
  margin: 0 !important;
  border-radius: 18px !important;
  padding: 16px !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  background: rgba(17, 18, 20, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  z-index: 1000100 !important;
  pointer-events: auto !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  transition: width 0.25s cubic-bezier(0.2, 0, 0, 1), padding 0.25s ease !important;
  overflow: hidden !important;
}

.party-focus-members {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
}

.party-focus-footer {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* 8. CENTER ALL DIALOG MODALS PERFECTLY IN DEAD CENTER */
#focusSummaryModal,
#customAlertModal,
#customConfirmModal,
#customPromptModal,
#channelConfigModal,
#userVoiceSettingsModal,
#groupDetailsModal,
#reactionDetailsModal,
#pushPermissionModal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 10000000 !important;
}

#focusSummaryModal.open,
#customAlertModal.open,
#customConfirmModal.open,
#customPromptModal.open,
#channelConfigModal.open,
#userVoiceSettingsModal.open,
#groupDetailsModal.open,
#reactionDetailsModal.open,
#pushPermissionModal.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#focusSummaryModal .modal-sheet,
#customAlertModal > div,
#customConfirmModal > div,
#customPromptModal > div,
#channelConfigModal .modal-sheet,
#userVoiceSettingsModal .modal-sheet,
#groupDetailsModal .modal-sheet,
#reactionDetailsModal .modal-sheet,
#pushPermissionModal .modal-sheet {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: auto !important;
  transform: scale(0.95) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
  z-index: 10000001 !important;
}

#focusSummaryModal.open .modal-sheet,
#customAlertModal.open > div,
#customConfirmModal.open > div,
#customPromptModal.open > div,
#channelConfigModal.open .modal-sheet,
#userVoiceSettingsModal.open .modal-sheet,
#groupDetailsModal.open .modal-sheet,
#reactionDetailsModal.open .modal-sheet,
#pushPermissionModal.open .modal-sheet {
  transform: scale(1) !important;
}

/* (Old CSS pseudo-element tooltips removed in favor of single #discordTooltip JS engine) */

/* ============================================================
   DISCORD-QUALITY PARTY FOCUS SIDEBAR & CHANNEL MODAL FIXES
   ============================================================ */

/* Active channel highlight */
.sub-channel-card.active-channel > .sub-channel-header {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Party header label */
.party-focus-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #f2f3f5 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 160px !important;
  user-select: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.party-focus-label:hover {
  color: var(--text) !important;
}

/* Active-channel channel name highlight */
.sub-channel-card.active-channel .sub-channel-title span {
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* channelConfigModal always on very top */
#channelConfigModal {
  z-index: 99999999 !important;
}

/* Sidebar footer row layout */
.party-focus-overlay.in-active-party:not(.collapsed) .party-focus-footer {
  flex-direction: row !important;
  justify-content: space-between !important;
  padding: 10px 8px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Mobile layout: sidebar below timer */
@media (max-width: 767px) {
  .party-focus-overlay.in-active-party:not(.collapsed) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-top: 1px solid #1f2026 !important;
    border-radius: 0 !important;
    order: 2 !important;
  }

  #timerPage.active {
    flex-direction: column !important;
    overflow-y: auto !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 60px 0 0 0 !important;
  }

  .timer-main-stage {
    order: 1 !important;
    padding: 24px 16px 16px !important;
  }

  .party-focus-members {
    flex: 1 1 auto !important;
    flex-grow: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    overflow-y: auto !important;
  }
}

/* ============================================================
   SCREEN SHARE PROMPT & SOURCE SELECTOR MODAL (ELITE REDESIGN)
   ============================================================ */
.modal-overlay#screenSharePromptModal,
#screenSharePromptModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000050 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#screenSharePromptModal.open {
  display: flex !important;
  opacity: 1 !important;
}

.ss-prompt-sheet {
  width: 100% !important;
  max-width: 430px !important;
  background: var(--t-bg-card, #0e121a) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 24px 22px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  user-select: none !important;
  animation: ssModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes ssModalPop {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

[data-theme="light"] .ss-prompt-sheet {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.9) !important;
}

.ss-prompt-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.ss-prompt-header-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.ss-prompt-header-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--t-text-primary, #ffffff) !important;
  flex-shrink: 0 !important;
}

[data-theme="light"] .ss-prompt-header-icon {
  background: rgba(0, 0, 0, 0.04) !important;
  border: none !important;
  color: #0f172a !important;
}

.ss-prompt-header-titles {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
}

.ss-prompt-main-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--t-text-primary, #ffffff) !important;
  letter-spacing: -0.02em !important;
}

[data-theme="light"] .ss-prompt-main-title {
  color: #0f172a !important;
}

.ss-prompt-main-sub {
  font-size: 11.5px !important;
  color: var(--t-text-muted, #8a9099) !important;
  font-weight: 500 !important;
}

[data-theme="light"] .ss-prompt-main-sub {
  color: #64748b !important;
}

.ss-prompt-close-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  color: var(--t-text-muted, #8a9099) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ss-prompt-close-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--t-text-primary, #ffffff) !important;
}

[data-theme="light"] .ss-prompt-close-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

.ss-prompt-channel-note {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--t-text-secondary, rgba(255, 255, 255, 0.6)) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

[data-theme="light"] .ss-prompt-channel-note {
  background: rgba(0, 0, 0, 0.03) !important;
  border: none !important;
  color: #64748b !important;
}

.ss-prompt-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
}

.ss-prompt-option {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  color: var(--t-text-primary, #ffffff) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .ss-prompt-option {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid transparent !important;
  color: #0f172a !important;
}

.ss-prompt-option:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="light"] .ss-prompt-option:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.ss-prompt-option.active {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="light"] .ss-prompt-option.active {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.ss-prompt-opt-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.ss-prompt-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--t-text-secondary, rgba(255, 255, 255, 0.7)) !important;
  flex-shrink: 0 !important;
  transition: all 0.16s ease !important;
}

[data-theme="light"] .ss-prompt-icon {
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
}

.ss-prompt-option.active .ss-prompt-icon {
  background: transparent !important;
  color: #ffffff !important;
}

[data-theme="light"] .ss-prompt-option.active .ss-prompt-icon {
  background: transparent !important;
  color: #0f172a !important;
}

.ss-prompt-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.ss-prompt-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--t-text-primary, #ffffff) !important;
  letter-spacing: -0.01em !important;
}

[data-theme="light"] .ss-prompt-title {
  color: #0f172a !important;
}

.ss-prompt-sub {
  font-size: 11px !important;
  color: var(--t-text-muted, #8a9099) !important;
  margin-top: 1px !important;
  font-weight: 500 !important;
}

[data-theme="light"] .ss-prompt-sub {
  color: #64748b !important;
}

.ss-prompt-radio {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.16s ease !important;
}

[data-theme="light"] .ss-prompt-radio {
  border-color: rgba(0, 0, 0, 0.2) !important;
}

.ss-prompt-option.active .ss-prompt-radio {
  border-color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="light"] .ss-prompt-option.active .ss-prompt-radio {
  border-color: #0f172a !important;
  background: rgba(15, 23, 42, 0.08) !important;
}

.ss-prompt-option.active .ss-prompt-radio::after {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
}

[data-theme="light"] .ss-prompt-option.active .ss-prompt-radio::after {
  background: #0f172a !important;
}

.ss-prompt-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 6px !important;
}

.ss-prompt-btn-cancel {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--t-text-muted, #8a9099) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ss-prompt-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--t-text-primary, #ffffff) !important;
}

[data-theme="light"] .ss-prompt-btn-cancel {
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
}

[data-theme="light"] .ss-prompt-btn-cancel:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

.ss-prompt-btn-confirm {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: #212631 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ss-prompt-btn-confirm:hover {
  background: #2b3240 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

.ss-prompt-btn-confirm:active {
  transform: translateY(0) !important;
}

[data-theme="light"] .ss-prompt-btn-confirm {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2) !important;
}

[data-theme="light"] .ss-prompt-btn-confirm:hover {
  background: #1e293b !important;
  border-color: #1e293b !important;
}

.ss-prompt-btn-confirm:hover:not(:disabled) {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
}

.ss-prompt-btn-confirm:disabled {
  opacity: 0.55 !important;
  cursor: wait !important;
  transform: none !important;
}

.ss-prompt-btn-cancel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--t-text-muted, #8a9099) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .ss-prompt-btn-cancel {
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #62667d !important;
}

.ss-prompt-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--t-text-primary, #ffffff) !important;
}

[data-theme="light"] .ss-prompt-btn-cancel:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #12131c !important;
}

/* SCREEN SHARE OVERLAY */
.ss-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: rgba(0, 0, 0, 0.96);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.ss-overlay.open {
  opacity: 1;
  pointer-events: all;
  display: flex;
}

/* FLOATING MINI MODE (In-app Picture-in-Picture window) */
.ss-overlay.mini-mode {
  inset: auto 24px 24px auto;
  width: 360px;
  height: 220px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  backdrop-filter: blur(20px);
}
.ss-overlay.mini-mode .ss-toolbar {
  padding: 8px 12px;
}
.ss-overlay.mini-mode .ss-quality-badge {
  display: none;
}

.ss-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(15, 15, 15, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  flex-shrink: 0;
  z-index: 2;
}

.ss-toolbar-left, .ss-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-sharer-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.3px;
}

.ss-quality-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 3px 7px;
  border-radius: 4px;
}

.ss-live-badge {
  background: #ef4444;
  color: var(--text);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  animation: ss-pulse 2s ease-in-out infinite;
}

@keyframes ss-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.ss-tool-btn, .ss-close-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.ss-tool-btn:hover { background: rgba(255, 255, 255, 0.14); }
.ss-close-btn:hover { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.4); color: #ef4444; }

/* Voice control button - screen share */
.voice-control-btn.active {
  color: var(--t-accent-primary, #a855f7);
}
.voice-control-btn.active svg {
  stroke: var(--t-accent-primary, #a855f7);
}

/* YAYINI Ä°ZLE BUTTON (Channel header) */
.ss-watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
}
.ss-watch-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.6);
  transform: translateY(-1px);
}
.ss-watch-dot {
  display: none !important;
}

/* SS Member Badge in Channel List */
.ss-member-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: rgba(255, 255, 255, 0.65) !important;
  padding: 3px !important;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.15s ease;
}
.ss-member-badge:hover {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  transform: scale(1.15);
}

.ss-video-container {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

.ss-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Screen share active badge on channel card */
.ss-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(35, 165, 90, 0.15);
  border: 1px solid rgba(35, 165, 90, 0.3);
  color: #23a55a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.voice-control-btn.active {
  color: #23a55a;
}
.voice-control-btn.active svg {
  stroke: #23a55a;
}

/* ============================================================
   DISCORD-STYLE FLOATING TOOLTIP
   ============================================================ */
/* ============================================================
   SPEECH-BUBBLE FLOATING TOOLTIP (Smooth Bezier Curved Arrow)
   ============================================================ */
.discord-tooltip {
  position: fixed !important;
  z-index: 99999999 !important;
  display: none;
  background: #111214 !important;
  color: #dbdee1 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  opacity: 0;
  transform: translateY(-2px) scale(0.98);
  transition: opacity 0.12s cubic-bezier(0.2, 0, 0, 1), transform 0.12s cubic-bezier(0.2, 0, 0, 1) !important;
}

.discord-tooltip.visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.discord-tooltip-svg-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: visible;
}

.discord-tooltip.tooltip-bottom .discord-tooltip-svg-arrow {
  bottom: auto;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.discord-tooltip.tooltip-right .discord-tooltip-svg-arrow {
  bottom: auto;
  top: 50%;
  left: -6px;
  right: auto;
  transform: translateY(-50%);
}

.discord-tooltip.tooltip-left .discord-tooltip-svg-arrow {
  bottom: auto;
  top: 50%;
  left: auto;
  right: -6px;
  transform: translateY(-50%);
}

/* Drag Grip / Handle on Focus Overlay */
.party-drag-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6d737f;
  cursor: grab;
  padding: 4px;
  border-radius: 4px;
  user-select: none;
  touch-action: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.party-drag-grip:hover {
  color: #f2f3f5;
  background: rgba(255, 255, 255, 0.08);
}

.party-focus-overlay.is-dragging {
  cursor: grabbing !important;
  user-select: none !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
}

/* Icon-only Watch Buttons */
.ss-watch-btn.icon-only, .ss-member-badge.icon-only {
  padding: 5px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   VOICE CONNECTION STATUS PILL
   ============================================================ */
.voice-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 4px 6px;
  border-radius: 6px;
  margin-left: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.voice-status-pill.connecting {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
}
.voice-status-pill.connected {
  background: rgba(35, 165, 90, 0.15);
  border: 1px solid rgba(35, 165, 90, 0.35);
  color: #23a55a;
}
.voice-spinner {
  width: 9px;
  height: 9px;
  border: 2px solid rgba(251, 191, 36, 0.3);
  border-top-color: #fbbf24;
  border-radius: 50%;
  animation: voice-spin 0.6s linear infinite;
  display: inline-block;
}
@keyframes voice-spin {
  to { transform: rotate(360deg); }
}
.voice-connected-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #23a55a;
  display: inline-block;
  box-shadow: 0 0 8px rgba(35, 165, 90, 0.6);
}

/* ============================================================
   NOTIFICATION TOPBAR ICON BUTTONS
   ============================================================ */
.notif-hdr-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #949ba4 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.notif-hdr-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f2f3f5 !important;
}

.notif-hdr-btn.danger:hover {
  background: rgba(242, 63, 67, 0.14) !important;
  color: #f23f43 !important;
}

/* ============================================================
   CHAT 24-HOUR AUTO-DELETE SYSTEM BANNER
   ============================================================ */
.chat-system-retention-banner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin: 10px 12px 14px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #949ba4 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.1px !important;
  text-align: left !important;
}

.chat-system-retention-banner svg {
  stroke: #5865f2 !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   MOBILE RESPONSIVENESS & SAFE AREA ENHANCEMENTS
   ============================================================ */
@media (max-width: 768px) {
  /* Profile Post Slider Close Button & Top Header Padding */
  #profilePostSliderOverlay .slider-header {
    top: 0 !important;
    padding-top: max(20px, env(safe-area-inset-top, 20px)) !important;
    height: auto !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
  }

  #profilePostSliderOverlay .modal-close {
    padding: 8px 12px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
  }

  .modal-close {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ============================================================
   FOCUS ROOM OVERLAY DRAG & DEFAULT POSITIONING (Desktop & Mobile)
   ============================================================ */
.party-focus-overlay.in-active-party:not(.collapsed):not(.has-drag-pos) {
  position: fixed !important;
  top: 76px !important;
  left: 20px !important;
  bottom: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  width: 280px !important;
  min-width: 280px !important;
  height: auto !important;
  max-height: calc(100dvh - 76px - var(--nav-h, 64px) - env(safe-area-inset-bottom, 0px) - 20px) !important;
  z-index: 1000100 !important;
  pointer-events: auto !important;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), padding 0.25s ease !important;
}

body:has(#partyChatModal.open) #partyFocusOverlay,
body:has(#partyChatModal.open) .party-focus-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* When collapsed (floating widget) default position pinned cleanly to edge */
.party-focus-overlay.collapsed:not(.has-drag-pos) {
  position: fixed !important;
  top: 80px !important;
  left: 14px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1000100 !important;
  margin: 0 !important;
}

.party-focus-overlay.has-drag-pos,
.party-focus-overlay.is-dragging {
  position: fixed !important;
  z-index: 1000100 !important;
  margin: 0 !important;
}

/* ============================================================
   100% DEAD CENTERED & FLUID TOAST NOTIFICATIONS (No Text Spill!)
   ============================================================ */
.toast {
  position: fixed !important;
  bottom: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) !important;
  background: rgba(16, 18, 22, 0.96) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  padding: 11px 22px !important;
  border-radius: 9999px !important;
  font-size: clamp(12px, 3.2vw, 13.5px) !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 2147483647 !important; /* Always on top of every modal, overlay, drawer, or sheet */
  max-width: calc(100vw - 32px) !important;
  width: max-content !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
  line-height: 1.4 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.97) !important;
  color: #0c0d10 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}


@media (max-width: 768px) {
  /* Mobile: Expanded panel = FULL SCREEN overlay */
  .party-focus-overlay.in-active-party:not(.collapsed):not(.has-drag-pos) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-radius: 0 !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 1000100 !important;
    overflow: hidden !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 16px)) !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  /* Mobile: Collapsed panel = draggable floating mini-widget (no default position, JS controls it) */
  .party-focus-overlay.in-active-party.collapsed:not(.has-drag-pos) {
    position: fixed !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    border-radius: 24px !important;
    margin: 0 !important;
    z-index: 1000100 !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  /* Mobile: Generous touch targets for focus room footer buttons */
  .party-focus-overlay:not(.collapsed) .party-control-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
    padding: 6px 10px !important;
    gap: 8px !important;
  }

  .party-focus-overlay:not(.collapsed) .party-ctrl-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  /* Mobile Timer Screen Clean Alignment */
  #timerPage.active {
    min-height: calc(100dvh - 64px) !important;
    padding: 60px 12px 76px !important; /* Alt boşluk azaltıldı (navbar kadar) */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Full-screen mobile header: push down past status bar */
  .party-focus-overlay.in-active-party:not(.collapsed):not(.has-drag-pos) .party-focus-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  }

  .timer-main-stage {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 12px !important;
    gap: 16px !important;
    text-align: center !important;
    flex: 1 !important;
    justify-content: center !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  #timerDisplay {
    font-size: clamp(3.6rem, 18vw, 5.8rem) !important;
    letter-spacing: -1px !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  #mainFocusBtn {
    margin: 12px auto 0 !important;
    max-width: 280px !important;
    width: 100% !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
}

.slider-close-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  outline: none !important;
  color: var(--text) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.slider-close-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.party-focus-overlay.in-active-party ~ .timer-main-stage #soloPartyControlsRow {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════
   USER VOICE MODAL — Redesigned (uvm-*)
   ═══════════════════════════════════════════════════════ */
#userVoiceSettingsModal.modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  display: none;
}
#userVoiceSettingsModal.modal-overlay.open {
  display: flex !important;
}

.uvm-card {
  width: 330px !important;
  max-width: calc(100vw - 32px) !important;
  background: #0d1017 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
  box-sizing: border-box !important;
  animation: zoomIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .uvm-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.9) !important;
}

/* Banner */
.uvm-banner {
  height: 74px !important;
  background: linear-gradient(135deg, #131520 0%, #201a34 55%, #11131c 100%) !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="light"] .uvm-banner {
  background: linear-gradient(135deg, #f1f4f8 0%, #e2e8f0 100%) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.9) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

.uvm-close-btn {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c5c8d0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}
.uvm-close-btn:hover {
  background: rgba(0, 0, 0, 0.7) !important;
  color: #ffffff !important;
}

[data-theme="light"] .uvm-close-btn {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #333842 !important;
}
[data-theme="light"] .uvm-close-btn:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

.uvm-latency-chip {
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: monospace !important;
  color: #c5c8d0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 3px 8px !important;
  letter-spacing: 0.5px !important;
}

[data-theme="light"] .uvm-latency-chip {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #333842 !important;
}

/* Body */
.uvm-body {
  padding: 16px 18px 20px !important;
  position: relative !important;
  background: #0d1017 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .uvm-body {
  background: #ffffff !important;
}

/* Avatar */
.uvm-avatar-wrap {
  position: relative !important;
  display: inline-block !important;
  margin-top: -46px !important;
  margin-bottom: 12px !important;
}
.uvm-avatar {
  width: 66px !important;
  height: 66px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  border: 3.5px solid #0d1017 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  box-sizing: border-box !important;
}
.uvm-avatar .avatar-initials {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}
[data-theme="light"] .uvm-avatar {
  border-color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

.uvm-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.uvm-online-ring {
  position: absolute !important;
  bottom: 3px !important;
  right: 3px !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: #23a55a !important;
  border: 2.5px solid #0d1017 !important;
  display: none;
}
[data-theme="light"] .uvm-online-ring {
  border-color: #ffffff !important;
}
.uvm-online-ring.visible {
  display: block !important;
}

/* Identity */
.uvm-identity {
  margin-bottom: 14px !important;
}
.uvm-username {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #f2f3f5 !important;
  margin-bottom: 5px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
[data-theme="light"] .uvm-username {
  color: #11131c !important;
}

.uvm-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.uvm-status-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: #949ba4 !important;
}
.uvm-dot {
  font-size: 11px !important;
  color: #4e5058 !important;
}

.uvm-profile-btn {
  width: 100% !important;
  height: 32px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9px !important;
  color: #f2f3f5 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
}
.uvm-profile-btn:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}
[data-theme="light"] .uvm-profile-btn {
  background: #f1f3f7 !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
  color: #11131c !important;
}
[data-theme="light"] .uvm-profile-btn:hover {
  background: #e7eaf0 !important;
}

/* Active Focus Box */
.uvm-active-focus {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  background: rgba(168, 85, 247, 0.08) !important;
  border: 1px solid rgba(168, 85, 247, 0.22) !important;
  border-radius: 9px !important;
  padding: 7px 10px !important;
  margin-bottom: 14px !important;
  font-size: 12px !important;
  box-sizing: border-box !important;
}
.uvm-focus-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #23a55a !important;
  box-shadow: 0 0 6px rgba(35, 165, 90, 0.6) !important;
  flex-shrink: 0 !important;
}
.uvm-focus-league-link {
  color: #c084fc !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  letter-spacing: 0.3px !important;
  transition: color 0.15s ease !important;
}
.uvm-focus-league-link:hover {
  color: #d8b4fe !important;
  text-decoration: underline !important;
}
[data-theme="light"] .uvm-focus-league-link {
  color: #7c3aed !important;
}
.uvm-focus-duration {
  font-weight: 700 !important;
  color: #f2f3f5 !important;
  font-variant-numeric: tabular-nums !important;
}
[data-theme="light"] .uvm-focus-duration {
  color: #11131c !important;
}
.uvm-focus-mode {
  color: #949ba4 !important;
  font-weight: 500 !important;
  text-transform: lowercase !important;
}

/* Social action row */
.uvm-social-row {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.uvm-icon-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9px !important;
  flex: 1 !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #dbdee1 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.uvm-icon-btn:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
}
[data-theme="light"] .uvm-icon-btn {
  background: #f1f3f7 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  color: #555b68 !important;
}
[data-theme="light"] .uvm-icon-btn:hover {
  background: #e6e9f0 !important;
  color: #11131c !important;
}
.uvm-icon-btn.friend-pending {
  color: #f0b232 !important;
}

/* Divider */
.uvm-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  margin: 14px 0 !important;
}
[data-theme="light"] .uvm-divider {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* Section label */
.uvm-section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #949ba4 !important;
  margin-bottom: 8px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.uvm-label-with-icon {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.uvm-vol-val {
  font-family: monospace !important;
  color: #f2f3f5 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}
[data-theme="light"] .uvm-vol-val {
  color: #11131c !important;
}

.uvm-section {
  margin-bottom: 14px !important;
}
.uvm-sub-section {
  margin-bottom: 10px !important;
}

/* Quick Volume Presets */
.uvm-vol-presets {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 10px !important;
}
.uvm-vol-pill {
  flex: 1 !important;
  padding: 5px 0 !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: #949ba4 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.14s ease !important;
  text-align: center !important;
}
.uvm-vol-pill:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.uvm-vol-pill.active {
  background: rgba(168, 85, 247, 0.18) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  color: #c084fc !important;
}
[data-theme="light"] .uvm-vol-pill {
  background: #f1f3f7 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  color: #555b68 !important;
}
[data-theme="light"] .uvm-vol-pill:hover {
  background: #e6e9f0 !important;
  color: #11131c !important;
}
[data-theme="light"] .uvm-vol-pill.active {
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #7c3aed !important;
}

/* Slider */
.uvm-slider {
  width: 100% !important;
  accent-color: #a855f7 !important;
  cursor: pointer !important;
  margin-bottom: 10px !important;
  display: block !important;
  background: rgba(255, 255, 255, 0.08) !important;
  height: 5px !important;
  border-radius: 4px !important;
}
[data-theme="light"] .uvm-slider {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Mute button */
.uvm-mute-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 9px !important;
  color: #dbdee1 !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.uvm-mute-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.uvm-mute-btn.muted {
  color: #f23f43 !important;
  background: rgba(242, 63, 67, 0.1) !important;
  border-color: rgba(242, 63, 67, 0.25) !important;
}
.uvm-mute-btn.muted:hover {
  background: rgba(242, 63, 67, 0.18) !important;
}
[data-theme="light"] .uvm-mute-btn {
  background: #f1f3f7 !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
  color: #333842 !important;
}
[data-theme="light"] .uvm-mute-btn:hover {
  background: #e6e9f0 !important;
}

/* Select inputs */
.uvm-select {
  width: 100% !important;
  background: #090b10 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9px !important;
  padding: 8px 12px !important;
  color: #dbdee1 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  outline: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease !important;
}
.uvm-select:hover {
  border-color: rgba(168, 85, 247, 0.4) !important;
}
[data-theme="light"] .uvm-select {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #11131c !important;
}
[data-theme="light"] .uvm-select:hover {
  border-color: rgba(168, 85, 247, 0.4) !important;
}

/* Danger row */
.uvm-danger-row {
  display: flex !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-sizing: border-box !important;
}
[data-theme="light"] .uvm-danger-row {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}

.uvm-danger-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 9px !important;
  flex: 1 !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  color: #dbdee1 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}
.uvm-danger-btn.kick:hover {
  background: rgba(242, 63, 67, 0.12) !important;
  color: #f23f43 !important;
  border-color: rgba(242, 63, 67, 0.28) !important;
}
.uvm-danger-btn.ban {
  color: #f23f43 !important;
  background: rgba(242, 63, 67, 0.06) !important;
  border: 1px solid rgba(242, 63, 67, 0.22) !important;
}
.uvm-danger-btn.ban:hover {
  background: rgba(242, 63, 67, 0.16) !important;
  color: #ffffff !important;
}
[data-theme="light"] .uvm-danger-btn.kick {
  background: #f1f3f7 !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
  color: #4b5262 !important;
}
[data-theme="light"] .uvm-danger-btn.kick:hover {
  background: rgba(242, 63, 67, 0.1) !important;
  color: #f23f43 !important;
}

/* ── Mobile Layout ── */
@media (max-width: 767px) {
  #userVoiceSettingsModal.modal-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
  }
  .uvm-card {
    width: 320px !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: 16px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
    animation: zoomIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .uvm-close-btn {
    width: 28px !important;
    height: 28px !important;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}


@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════
   TOOLTIP SYSTEM — Single JS Engine (#discordTooltip)
   ═══════════════════════════════════════════════════════ */
[data-tooltip]::after,
[data-tooltip]::before {
  display: none !important;
  content: none !important;
}

/* ═══════════════════════════════════════════════════════
   MOBILE MODAL ACCESSIBILITY & SCROLL FIXES
   ═══════════════════════════════════════════════════════ */
.modal-overlay,
.post-modal-overlay,
.img-fullscreen {
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .modal-overlay,
  .post-modal-overlay {
    padding: 12px !important;
    align-items: flex-end !important; /* Bottom-sheet behavior on mobile */
  }

  /* Keep voice settings centered nicely on mobile */
  #userVoiceSettingsModal.modal-overlay {
    align-items: center !important;
  }

  .modal-sheet,
  .post-modal,
  .uvm-card {
    max-height: 85vh !important;
    max-height: 85dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Close buttons minimum touch target for mobile (44x44px) */
  .modal-close,
  .modal-close-btn,
  .uvm-close-btn,
  .post-modal-close {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   DISCORD-STYLE ODAK ODASI (PARTY) MODAL SYSTEM
   ═══════════════════════════════════════════════════════ */
#partyModal.modal-overlay {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 999999 !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 24px !important;
}
#partyModal.modal-overlay.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Stable, app-like room browser. The modal content is diffed in party.js; these
   animations only run when the modal actually opens, never during polling. */
#partyModal.modal-overlay.open .modal-sheet {
  animation: focus-room-modal-enter 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes focus-room-modal-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.focus-rooms-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  min-height: 68px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  background: var(--t-bg-card, #18191c);
  flex-shrink: 0;
}

.focus-rooms-modal-title-wrap,
.focus-rooms-modal-title,
.focus-rooms-modal-tabs {
  display: flex;
  align-items: center;
}

.focus-rooms-modal-title-wrap { gap: 16px; min-width: 0; }
.focus-rooms-modal-title { gap: 8px; color: var(--t-text-primary, #f2f3f5); font-size: 16px; font-weight: 900; letter-spacing: 0.35px; white-space: nowrap; }
.focus-rooms-modal-divider { width: 1px; height: 20px; background: var(--t-border-subtle, rgba(255,255,255,0.12)); flex: 0 0 auto; }
.focus-rooms-modal-tabs { gap: 8px; }

.focus-rooms-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  box-sizing: border-box;
  background: var(--t-bg-card, #111214);
  color: var(--t-text-primary);
  scrollbar-color: var(--t-border-strong) transparent;
}

.focus-rooms-modal-body::-webkit-scrollbar { width: 8px; }
.focus-rooms-modal-body::-webkit-scrollbar-thumb { background: var(--t-border-strong); border: 2px solid var(--t-bg-card); border-radius: 999px; }

.focus-room-active-card {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 30px rgba(0,0,0,0.16);
}

.focus-room-active-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(#7782ff, #5865f2 55%, #424cc5);
}

.focus-room-list-item { transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.focus-room-list-item:hover { border-color: rgba(88,101,242,0.55) !important; background: #24252b !important; transform: translateY(-1px); }

/* Joined room: make connection state and the active voice channel immediately legible. */
.party-label-scroll-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.party-voice-connection { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: #aeb4bd; font-size: 10px; font-weight: 700; white-space: nowrap; }
.party-voice-connection-dot { width: 7px; height: 7px; border-radius: 50%; background: #f0b232; box-shadow: none !important; }
.party-voice-connection.is-connected { color: #75d99b; }
.party-voice-connection.is-connected .party-voice-connection-dot { background: #23a55a; box-shadow: none !important; }
.party-voice-connection.is-issue { color: #ff9a9d; }
.party-voice-connection.is-issue .party-voice-connection-dot { background: #ed4245; box-shadow: none !important; }
.party-focus-overlay.collapsed .party-voice-connection { display: none !important; }

.focus-room-coach-target {
  position: relative !important;
  z-index: 1000002 !important;
  outline: 2px solid #7782ff !important;
  outline-offset: 4px;
  border-radius: 10px;
  box-shadow: 0 0 0 6px rgba(88,101,242,0.16), 0 0 28px rgba(88,101,242,0.45) !important;
  animation: focus-room-coach-pulse 1.5s ease-in-out infinite;
}

@keyframes focus-room-coach-pulse {
  50% { box-shadow: 0 0 0 9px rgba(88,101,242,0.08), 0 0 32px rgba(88,101,242,0.58) !important; }
}

.focus-room-coach {
  position: fixed;
  z-index: 1000003;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid rgba(133,144,255,0.58);
  border-radius: 14px;
  background: rgba(23,24,32,0.98);
  color: #f5f6ff;
  box-shadow: 0 18px 44px rgba(0,0,0,0.58), 0 0 0 1px rgba(255,255,255,0.05) inset;
  animation: focus-room-coach-enter 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.focus-room-coach-kicker { margin-bottom: 5px; color: #9da6ff; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.focus-room-coach strong { display: block; font-size: 13px; line-height: 1.25; }
.focus-room-coach p { margin: 7px 0 11px; color: #c1c5d2; font-size: 11px; font-weight: 500; line-height: 1.45; }
.focus-room-coach-dismiss { border: 0; border-radius: 7px; padding: 7px 9px; background: rgba(255,255,255,0.1); color: var(--text); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.focus-room-coach-dismiss:hover { background: rgba(255,255,255,0.17); }
@keyframes focus-room-coach-enter { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 768px) {
  #partyModal.modal-overlay.open .modal-sheet { animation-name: focus-room-sheet-up; }
  @keyframes focus-room-sheet-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  .focus-rooms-modal-header { padding: 14px 16px; min-height: 64px; }
  .focus-rooms-modal-title-wrap { gap: 10px; }
  .focus-rooms-modal-divider { display: none; }
  .focus-rooms-modal-title { font-size: 14px; }
  .focus-rooms-modal-tabs .discord-action-btn { min-height: 36px; padding: 6px 10px !important; }
  .focus-rooms-modal-body { padding: 16px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

#partyModal .modal-sheet {
  width: 90vw !important;
  max-width: 920px !important;
  height: 80vh !important;
  max-height: 720px !important;
  margin: auto !important;
  background: #111214 !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
}

@media (max-width: 768px) {
  #partyModal.modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #partyModal .modal-sheet {
    width: 100% !important;
    max-width: 100% !important;
    height: 88dvh !important;
    max-height: 88dvh !important;
    border-radius: 20px 20px 0 0 !important;
  }
}

/* Discord Desktop Action Buttons System */
.discord-action-btn {
  background-color: #4e5058 !important;
  background: #4e5058 !important;
  border: 1px solid #4e5058 !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  text-decoration: none !important;
  outline: none !important;
  user-select: none !important;
  line-height: 1.2 !important;
}

.discord-action-btn *,
.discord-action-btn span,
.discord-action-btn div,
.discord-action-btn label {
  color: var(--text) !important;
}

.discord-action-btn svg {
  stroke: #ffffff !important;
  color: var(--text) !important;
  flex-shrink: 0 !important;
}

.discord-action-btn:hover {
  background-color: #6d6f78 !important;
  background: #6d6f78 !important;
  border-color: #6d6f78 !important;
  color: var(--text) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.discord-action-btn:hover *,
.discord-action-btn:hover span {
  color: var(--text) !important;
}

.discord-action-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Primary Button (Discord Blurple) */
.discord-action-btn.primary {
  background-color: #5865f2 !important;
  background: #5865f2 !important;
  border-color: #5865f2 !important;
  color: var(--text) !important;
}

.discord-action-btn.primary *,
.discord-action-btn.primary span {
  color: var(--text) !important;
}

.discord-action-btn.primary svg {
  stroke: #ffffff !important;
  color: var(--text) !important;
}

.discord-action-btn.primary:hover {
  background-color: #4752c4 !important;
  background: #4752c4 !important;
  border-color: #4752c4 !important;
  color: var(--text) !important;
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.5) !important;
  transform: translateY(-1.5px) !important;
}

.discord-action-btn.primary:active {
  background-color: #3c45a5 !important;
  background: #3c45a5 !important;
}

/* Danger Button (Red) */
.discord-action-btn.danger {
  background-color: #da373c !important;
  background: #da373c !important;
  border-color: #da373c !important;
  color: var(--text) !important;
}

.discord-action-btn.danger *,
.discord-action-btn.danger span {
  color: var(--text) !important;
}

.discord-action-btn.danger:hover {
  background-color: #a1282c !important;
  background: #a1282c !important;
  border-color: #a1282c !important;
  color: var(--text) !important;
  box-shadow: 0 6px 20px rgba(218, 55, 60, 0.5) !important;
  transform: translateY(-1.5px) !important;
}

.discord-action-btn.icon-only {
  padding: 0 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
}

/* Discord Invite Link Widget Box */
.discord-invite-box {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  background: #111214 !important;
  border: 1px solid var(--border) !important;
  padding: 8px !important;
  border-radius: 10px !important;
}

.discord-invite-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  background: #1e1f22 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 4px 6px 4px 12px !important;
}

.discord-invite-input-wrap svg {
  color: #949ba4 !important;
  stroke: #949ba4 !important;
  flex-shrink: 0 !important;
}

.discord-invite-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #f2f3f5 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: monospace, sans-serif !important;
  letter-spacing: 0.5px !important;
  width: 100% !important;
}

.discord-invite-copy-btn {
  padding: 6px 14px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   BLUNK TOPBAR BRAND & AUTH LANDING SYSTEM
   ============================================================ */

.blunk-topbar-brand {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  background: linear-gradient(135deg, #5865f2 0%, #a855f7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  filter: drop-shadow(0 0 10px rgba(88, 101, 242, 0.4)) !important;
  user-select: none !important;
  cursor: pointer !important;
}

/* BLUNK Auth Parallax & Landing Container */
#loginScreen.screen {
  position: relative !important;
  inset: auto !important;
  background: #090a0c !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

#loginScreen.screen.active {
  display: flex !important;
}

#loginScreen.screen:not(.active) {
  display: none !important;
}

.blunk-parallax-bg {
  display: none !important;
}

.blunk-marquee-belt {
  display: flex !important;
  white-space: nowrap !important;
  font-size: clamp(36px, 6vw, 72px) !important;
  font-weight: 900 !important;
  letter-spacing: 8px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.08) !important;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15) !important;
  user-select: none !important;
  animation: marqueeMove 55s linear infinite !important;
}

.blunk-marquee-belt.reverse {
  animation-direction: reverse !important;
  color: rgba(88, 101, 242, 0.1) !important;
  -webkit-text-stroke: 1px rgba(88, 101, 242, 0.2) !important;
}

@keyframes marqueeMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Auth Outer Wrapper */
.blunk-landing-wrap {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  min-height: 100vh !important;
}

.blunk-hero-header {
  text-align: center !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

.blunk-hero-logo {
  font-size: clamp(48px, 9vw, 80px) !important;
  font-weight: 900 !important;
  letter-spacing: 6px !important;
  background: linear-gradient(135deg, #ffffff 0%, #5865f2 60%, #a855f7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 30px rgba(88, 101, 242, 0.3)) !important;
}

.blunk-hero-tagline {
  font-size: clamp(14px, 2vw, 16px) !important;
  color: #949ba4 !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.6 !important;
}

/* Auth Card Glass Container */
.blunk-auth-card {
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  background: rgba(17, 18, 20, 0.95) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  text-align: left !important;
}

/* Inline Alert Box */
.auth-alert-box {
  display: none;
  background: rgba(218, 55, 60, 0.15);
  border: 1px solid rgba(218, 55, 60, 0.4);
  color: #f23f43;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: left;
  line-height: 1.4;
}
.auth-alert-box.success {
  background: rgba(35, 165, 90, 0.15);
  border-color: rgba(35, 165, 90, 0.4);
  color: #23a55a;
}

.auth-input-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.auth-input-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  text-align: left !important;
}

.auth-input-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #b5bac1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

.auth-input-field {
  width: 100% !important;
  background: #1e1f22 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  color: #f2f3f5 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.auth-input-field:focus {
  border-color: #5865f2 !important;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.25) !important;
}
.auth-input-field::placeholder {
  color: #80848e !important;
  font-weight: 500 !important;
}

.auth-privacy-note {
  font-size: 11px !important;
  color: #949ba4 !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}

/* Corporate Info & FAQ Showcase */
.blunk-info-card {
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  background: #111214 !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 40px 36px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.blunk-grid-features {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 28px !important;
}

.blunk-feature-box {
  background: #1e1f22 !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  text-align: left !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}
.blunk-feature-box:hover {
  border-color: rgba(88, 101, 242, 0.3) !important;
}

.blunk-feature-icon {
  width: 44px !important;
  height: 44px !important;
  background: rgba(88, 101, 242, 0.15) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5865f2 !important;
  margin-bottom: 14px !important;
}

.blunk-feature-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #f2f3f5 !important;
  margin-bottom: 8px !important;
}

.blunk-feature-desc {
  font-size: 13px !important;
  color: #949ba4 !important;
  line-height: 1.5 !important;
}

/* Dedicated Registration Modal */
.register-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  animation: modalFadeIn 0.2s cubic-bezier(0.1, 1, 0.1, 1) !important;
}

.register-modal-overlay.active {
  display: flex !important;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.register-modal-card {
  width: 100% !important;
  max-width: 440px !important;
  background: #111214 !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(88, 101, 242, 0.2) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.register-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.register-modal-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: 0.3px !important;
}

.register-modal-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #1e1f22 !important;
  border: 1px solid var(--border) !important;
  color: #949ba4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 16px !important;
  transition: all 0.15s ease !important;
}
.register-modal-close:hover {
  background: #2b2d31 !important;
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════════
   INSTAGRAM STYLE UNIFIED POST DETAIL MODAL SYSTEM
   ═══════════════════════════════════════════════════════ */
.pdetail-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 2000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.1, 1, 0.1, 1);
  padding: 24px;
}

.pdetail-backdrop.open,
.pdetail-backdrop:has(.pdetail-sheet.open) {
  opacity: 1;
}

.pdetail-sheet {
  width: 100% !important;
  max-width: 935px !important;
  height: 85vh !important;
  max-height: 720px !important;
  background: var(--t-bg-modal) !important;
  border: 1px solid var(--t-border-subtle) !important;
  border-radius: 16px !important;
  display: flex !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--t-border-subtle) !important;
  overflow: hidden !important;
  transform: scale(0.96) translateY(12px);
  transition: transform 0.25s cubic-bezier(0.1, 1, 0.1, 1), opacity 0.25s ease;
  position: relative !important;
}

.pdetail-sheet.open {
  transform: scale(1) translateY(0);
}

.pdetail-modal-container {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Left Column: Media */
.pdetail-media-column {
  flex: 1.2 !important;
  background: var(--t-bg-app) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

.pdetail-image-box {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--t-bg-app) !important;
}

.pdetail-image {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.pdetail-text-card-content {
  padding: 32px 24px !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: var(--t-bg-card) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--t-text-primary) !important;
  word-break: break-word !important;
}

/* Right Column: Info & Comments */
.pdetail-info-column {
  width: 380px !important;
  min-width: 340px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--t-bg-modal) !important;
  border-left: 1px solid var(--t-border-subtle) !important;
}

.pdetail-header {
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--t-bg-modal) !important;
  border-bottom: 1px solid var(--t-border-subtle) !important;
  z-index: 10 !important;
}

.pdetail-author {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}

.pdetail-author-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--t-text-primary) !important;
}

.pdetail-close-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--t-border-subtle) !important;
  border: 1px solid var(--t-border-strong) !important;
  color: var(--t-text-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: all 0.15s ease !important;
}

.pdetail-close-btn:hover {
  background: var(--t-border-strong) !important;
  color: var(--t-text-primary) !important;
}

.pdetail-comments-scroll {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 16px !important;
}

.pdetail-caption {
  margin-bottom: 16px !important;
  padding: 0 0 14px !important;
  color: var(--t-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  border-bottom: 1px solid var(--t-border-subtle) !important;
  white-space: pre-wrap;
  word-break: break-word;
}

.pdetail-caption-author {
  margin-right: 7px;
  color: var(--t-text-primary);
  font-weight: 800;
  cursor: pointer;
}

.pdetail-bottom-panel {
  border-top: 1px solid var(--t-border-subtle) !important;
  background: var(--t-bg-modal) !important;
  display: flex !important;
  flex-direction: column !important;
}

.pdetail-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px 6px !important;
}

.pdetail-action-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.pdetail-action-btn {
  background: none !important;
  border: none !important;
  color: var(--t-text-primary) !important;
  cursor: pointer !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.15s ease, color 0.15s ease !important;
}

.pdetail-action-btn:hover {
  transform: scale(1.1) !important;
  color: var(--t-accent-primary) !important;
}

.pdetail-action-btn.liked {
  color: #ff3b30 !important;
}

.pdetail-action-btn.reposted {
  color: #32d74b !important;
}

.pdetail-counts {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 16px 10px !important;
  font-size: 12px !important;
  color: var(--t-text-muted) !important;
  font-weight: 600 !important;
}

.pdetail-comments-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.pdetail-comment-tree-node {
  display: flex !important;
  flex-direction: column !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

[data-theme="light"] .pdetail-comment-tree-node {
  border-bottom-color: rgba(0,0,0,0.05) !important;
}

.pdetail-comment {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

.pdetail-comment-left {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.pdetail-comment-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  padding-top: 2px !important;
}

.pdetail-comment-avatar-wrap {
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.pdetail-comment-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.pdetail-comment-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.pdetail-comment-user {
  font-size: 13px !important;
  font-weight: 750 !important;
  color: var(--t-text-primary, #fff) !important;
  cursor: pointer !important;
}

[data-theme="light"] .pdetail-comment-user {
  color: #111 !important;
}

.pdetail-comment-time {
  font-size: 11px !important;
  color: var(--t-text-muted, #666) !important;
}

.pdetail-comment-text {
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--t-text-secondary, #ccc) !important;
  word-break: break-word !important;
}

[data-theme="light"] .pdetail-comment-text {
  color: #333 !important;
}

.pdetail-comment-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.comment-reply-action-btn {
  background: none !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--t-text-muted, #888) !important;
  cursor: pointer !important;
  padding: 2px 0 !important;
  transition: color 0.15s ease !important;
}

.comment-reply-action-btn:hover {
  color: #a78bfa !important;
}

.comment-delete-action-btn {
  background: none !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--t-text-muted, #888) !important;
  cursor: pointer !important;
  padding: 2px 0 !important;
  transition: color 0.15s ease !important;
}

.comment-delete-action-btn:hover {
  color: #ef4444 !important;
}

.comment-action-dot {
  color: var(--t-text-muted, #555) !important;
  font-size: 12px !important;
}

.comment-like-btn {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  color: var(--t-text-muted, #888) !important;
  padding: 4px !important;
  transition: color 0.15s ease !important;
}

.comment-like-btn.liked svg {
  fill: var(--danger, #ff3b30) !important;
  stroke: var(--danger, #ff3b30) !important;
}

.comment-like-num {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--t-text-muted, #888) !important;
  min-width: 12px !important;
  text-align: center !important;
}

.pdetail-replies-wrapper {
  margin-top: 4px !important;
  padding-left: 48px !important;
}

.pdetail-replies-toggle-btn {
  background: none !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  padding: 6px 0 !important;
  color: var(--t-text-muted, #888) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: color 0.15s ease !important;
}

.pdetail-replies-toggle-btn:hover {
  color: #a78bfa !important;
}

.pdetail-replies-toggle-btn .line {
  display: block !important;
  width: 20px !important;
  height: 1.5px !important;
  background: currentColor !important;
  border-radius: 1px !important;
}

.reply-item {
  padding: 8px 0 0 0 !important;
}

.reply-active-indicator {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 12px !important;
  background: rgba(167, 139, 250, 0.1) !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  font-size: 12px !important;
  color: #a78bfa !important;
  font-weight: 600 !important;
}

.pdetail-replies-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding-left: 14px !important;
  border-left: 2px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.35s cubic-bezier(0.1, 1, 0.1, 1), opacity 0.25s ease, margin-top 0.25s ease !important;
}

.pdetail-replies-list.open {
  max-height: 3000px !important;
  opacity: 1 !important;
  margin-top: 8px !important;
}

.pdetail-comment-input-row {
  padding: 12px 16px !important;
  background: var(--t-bg-modal) !important;
  border-top: 1px solid var(--t-border-subtle) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.pdetail-comment-input {
  flex: 1 !important;
  background: var(--t-bg-input) !important;
  border: 1px solid var(--t-border-subtle) !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  color: var(--t-text-primary) !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.pdetail-comment-input:focus {
  background: var(--t-bg-input) !important;
  border-color: var(--t-border-strong) !important;
}

.pdetail-comment-send {
  background: none !important;
  border: none !important;
  color: #0095f6 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  transition: opacity 0.15s ease !important;
}

.pdetail-comment-send:hover {
  opacity: 0.8 !important;
}

@media (max-width: 767px) {
  .pdetail-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .pdetail-sheet {
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .pdetail-modal-container {
    flex-direction: column !important;
  }
  .pdetail-media-column {
    flex: none !important;
    max-height: 40vh !important;
    width: 100% !important;
  }
  .pdetail-info-column {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 !important;
    border-left: none !important;
  }
  .desktop-only-close {
    display: none !important;
  }
  .mobile-only-close {
    display: flex !important;
  }
}

/* ═══════════════════════════════════════════════════════
   POST EDIT MODAL (GÖNDERİ DÜZENLEME MODALI)
   ═══════════════════════════════════════════════════════ */
.profile-edit-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 999999 !important; /* Always ABOVE openPostModal at 99999 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  animation: editModalFadeIn 0.2s ease forwards !important;
}

@keyframes editModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.profile-edit-modal-inner {
  width: 100% !important;
  max-width: 480px !important;
  background: #09090b !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  animation: editModalPopIn 0.25s cubic-bezier(0.1, 1, 0.1, 1) forwards !important;
}

@keyframes editModalPopIn {
  from { transform: scale(0.95) translateY(10px); }
  to { transform: scale(1) translateY(0); }
}

.profile-edit-modal-header {
  height: 54px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.profile-edit-modal-header span {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  color: var(--text) !important;
  text-transform: uppercase !important;
}

.profile-edit-modal-close {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
}

.profile-edit-modal-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: var(--text) !important;
}

.profile-edit-modal-body {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #09090b !important;
}

.profile-edit-modal-textarea {
  width: 100% !important;
  min-height: 130px !important;
  max-height: 260px !important;
  padding: 14px 16px !important;
  background: var(--card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  outline: none !important;
  resize: vertical !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.profile-edit-modal-textarea:focus {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.profile-edit-modal-footer {
  padding: 12px 20px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  background: #09090b !important;
}

.profile-edit-modal-cancel {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 9px 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.profile-edit-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--text) !important;
}

.profile-edit-modal-save {
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  padding: 9px 22px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.profile-edit-modal-save:hover {
  opacity: 0.9 !important;
  transform: scale(1.02) !important;
}

/* ============================================================
   BLUNK HIGH-CONTRAST PROFILE DESIGN SYSTEM
   ============================================================ */

.profile-stat-box {
  cursor: pointer !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  transition: all 0.15s ease !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border) !important;
  text-align: center !important;
}

.profile-stat-box:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

.profile-insta-tabs {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-top: 16px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
}

.profile-insta-tab {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.profile-insta-tab:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  background: var(--card) !important;
}

.profile-insta-tab.active {
  color: var(--text) !important;
  border-bottom-color: var(--text) !important;
  background: var(--card) !important;
}

.profile-insta-tab svg {
  transition: all 0.2s ease !important;
}

.profile-insta-tab.active svg {
  transform: scale(1.08) !important;
}

#friendListModal {
  z-index: 1005000 !important;
}

#friendListModal .modal-sheet {
  background: rgba(14, 14, 18, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9) !important;
  border-radius: 20px 20px 0 0 !important;
}

.profile-action-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.profile-action-icon-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px) !important;
}

.profile-action-icon-btn.active {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: var(--text) !important;
}

.profile-action-icon-btn.active:hover {
  opacity: 0.9 !important;
}

.profile-action-icon-btn.success {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

.profile-action-icon-btn.danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

.profile-action-icon-btn.danger:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

.profile-action-icon-btn.warning {
  background: rgba(251, 191, 36, 0.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
}

/* ============================================================
   PARTY CHAT MODAL ULTRA HIGH-CONTRAST DESIGN
   ============================================================ */

#partyChatModal {
  z-index: 999999 !important;
  background: rgba(0, 0, 0, 0.95) !important;
  backdrop-filter: blur(16px) !important;
}

.party-chat-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  background: #09090b !important;
  z-index: 999999 !important;
}

.party-chat-header {
  min-height: 60px !important;
  height: auto !important;
  padding-top: max(16px, env(safe-area-inset-top, 16px)) !important;
  padding-bottom: 12px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(14, 14, 18, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  flex-shrink: 0 !important;
}

.party-chat-header .up-back-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.party-chat-header .up-back-btn:hover,
.party-chat-header .up-back-btn:active {
  background: rgba(255, 255, 255, 0.18) !important;
  transform: scale(1.05);
}

.party-chat-header-title {
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
}

.party-chat-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #000000 !important;
}

.party-chat-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.party-chat-input-wrapper {
  padding: 14px 16px max(14px, env(safe-area-inset-bottom, 14px)) 16px !important;
  background: rgba(14, 14, 18, 0.98) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.8) !important;
  flex-shrink: 0 !important;
}

.party-chat-input-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 28px !important;
  padding: 4px 6px 4px 18px !important;
  transition: all 0.2s ease !important;
}

.party-chat-input-pill:focus-within {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--text) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.15) !important;
}

.party-chat-input-field {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 40px !important;
}

.party-chat-input-field::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.party-chat-send-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 20px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.party-chat-send-btn:hover {
  opacity: 0.9 !important;
  transform: scale(1.03) !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================
   MULTI-DEVICE VOICE HANDOVER ("BURADAN BAĞLAN") DESIGN
   ============================================================ */

.voice-handover-banner {
  margin-bottom: 16px;
  width: 100%;
}

.voice-handover-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.15)) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.15) !important;
  border-radius: 16px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  animation: handoverPulse 2.5s infinite ease-in-out !important;
}

@keyframes handoverPulse {
  0%, 100% { border-color: rgba(168, 85, 247, 0.4); box-shadow: 0 8px 24px rgba(168, 85, 247, 0.15); }
  50% { border-color: rgba(236, 72, 153, 0.7); box-shadow: 0 8px 32px rgba(236, 72, 153, 0.3); }
}

.voice-handover-pill svg {
  color: #c084fc !important;
  flex-shrink: 0 !important;
}

.voice-handover-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.voice-handover-btn svg {
  color: #000000 !important;
}

.voice-handover-btn:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.4) !important;
}

/* ============================================================
   MULTI-DEVICE VOICE HANDOVER STRICT BLOCKER DESIGN
   ============================================================ */

/* ============================================================
   MULTI-DEVICE VOICE HANDOVER INLINE CARD DESIGN
   ============================================================ */

.voice-handover-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
  padding: 20px 16px !important;
  margin: 12px 0 !important;
  background: linear-gradient(135deg, rgba(28, 22, 46, 0.96), rgba(16, 16, 26, 0.98)) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.5) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.2) !important;
  backdrop-filter: blur(20px) !important;
  animation: handoverCardFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes handoverCardFadeIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.voice-handover-icon-circle {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c084fc !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.35) !important;
}

.voice-handover-card-title {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  letter-spacing: 0.3px !important;
}

.voice-handover-card-desc {
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.5 !important;
  max-width: 280px !important;
}

.voice-handover-btn-lg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 42px !important;
  margin-top: 4px !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.25) !important;
}

/* ─── MINIMAL LUXURY PODIUM HOVER ANIMATIONS ─── */
.podium-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.podium-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  background-color: #11121c !important;
}

.podium-card.gold:hover {
  border-color: rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.15) !important;
}

.voice-handover-btn-lg:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.5) !important;
}

/* ============================================================
   DESKTOP APP P2P SCREEN SHARE FLOATING WINDOW (DESKTOP VIEW)
   ============================================================ */

/* ============================================================
   BLUNK ELITE SCREEN SHARE VIEWER WINDOW
   ============================================================ */

.ss-overlay {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000000 !important;
  width: 900px;
  max-width: 96vw;
  height: 540px;
  max-height: 90vh;
  min-width: 320px;
  min-height: 200px;
  resize: both !important;
  overflow: hidden !important;
  background: var(--bg-card, #0d1117) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

[data-theme="light"] .ss-overlay {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
}

.ss-overlay:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

[data-theme="light"] .ss-overlay:hover {
  border-color: rgba(0, 0, 0, 0.16) !important;
}

.ss-overlay::after {
  content: "" !important;
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
  pointer-events: none !important;
  z-index: 100 !important;
}

[data-theme="light"] .ss-overlay::after {
  border-right-color: rgba(0, 0, 0, 0.3) !important;
  border-bottom-color: rgba(0, 0, 0, 0.3) !important;
}

.ss-overlay.open {
  display: flex !important;
}

/* Fullscreen Mode Override with Auto-Hiding Toolbar */
.ss-overlay.is-fullscreen,
.ss-overlay:fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  transform: none !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 2147483647 !important;
  background: #000000 !important;
  resize: none !important;
}

.ss-overlay.is-fullscreen .ss-toolbar,
.ss-overlay:fullscreen .ss-toolbar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  background: rgba(13, 17, 23, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
}

[data-theme="light"] .ss-overlay.is-fullscreen .ss-toolbar,
[data-theme="light"] .ss-overlay:fullscreen .ss-toolbar {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.ss-overlay.is-fullscreen.ss-toolbar-hidden,
.ss-overlay:fullscreen.ss-toolbar-hidden {
  cursor: none !important;
}

.ss-overlay.is-fullscreen.ss-toolbar-hidden .ss-toolbar,
.ss-overlay:fullscreen.ss-toolbar-hidden .ss-toolbar {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ss-overlay.is-fullscreen .ss-video-container,
.ss-overlay:fullscreen .ss-video-container {
  height: 100vh !important;
  min-height: 100vh !important;
  flex: 1 !important;
  background: #000000 !important;
}

.ss-overlay.is-fullscreen .ss-video,
.ss-overlay:fullscreen .ss-video {
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
}

.ss-overlay.cover-fit .ss-video {
  object-fit: cover !important;
}

/* Window Header / Toolbar */
.ss-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 42px !important;
  padding: 0 16px !important;
  background: #161b22 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: move !important;
  flex-shrink: 0 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

[data-theme="light"] .ss-toolbar {
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.ss-toolbar-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  overflow: hidden !important;
}

.ss-sharer-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

[data-theme="light"] .ss-sharer-badge {
  color: #0f172a !important;
  background: transparent !important;
  border: none !important;
}

.ss-sharer-name {
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ss-live-dot {
  width: 7px !important;
  height: 7px !important;
  background: #ef4444 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6) !important;
  animation: ssPulse 1.8s infinite ease-in-out !important;
  flex-shrink: 0 !important;
}

@keyframes ssPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.ss-quality-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  letter-spacing: 0.03em !important;
  flex-shrink: 0 !important;
}

[data-theme="light"] .ss-quality-badge {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.ss-volume-popover {
  display: none;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  background: #141824 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  z-index: 10000005 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  backdrop-filter: blur(12px) !important;
}

[data-theme="light"] .ss-volume-popover {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
}

.ss-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 90px !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
  outline: none !important;
  cursor: pointer !important;
}

[data-theme="light"] .ss-volume-slider {
  background: rgba(0, 0, 0, 0.15) !important;
}

.ss-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .ss-volume-slider::-webkit-slider-thumb {
  background: #111218;
}

.ss-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

[data-theme="light"] .ss-volume-slider::-moz-range-thumb {
  background: #111218;
}

.ss-volume-value {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 34px !important;
  text-align: right !important;
}

[data-theme="light"] .ss-volume-value {
  color: #12131c !important;
}

/* Minimalist Stop Broadcast Button (Icon Only, Transparent) */
.ss-stop-broadcast-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.ss-stop-broadcast-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

[data-theme="light"] .ss-stop-broadcast-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: #475569 !important;
}

[data-theme="light"] .ss-stop-broadcast-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

[data-theme="light"] .ss-stop-broadcast-btn:hover {
  background: rgba(0, 0, 0, 0.09) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

.ss-toolbar-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 600px) {
  .ss-sharer-name {
    max-width: 75px !important;
  }
  .ss-quality-badge {
    display: none !important;
  }
}

.ss-overlay.mini-mode .ss-sharer-name {
  max-width: 80px !important;
}
.ss-overlay.mini-mode .ss-quality-badge {
  display: none !important;
}

.ss-tool-btn,
.ss-close-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(255, 255, 255, 0.75) !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .ss-tool-btn,
[data-theme="light"] .ss-close-btn {
  color: #475569 !important;
}

.ss-tool-btn:hover,
.ss-close-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="light"] .ss-tool-btn:hover,
[data-theme="light"] .ss-close-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Video Player Container */
.ss-video-container {
  position: relative !important;
  width: 100% !important;
  height: calc(100% - 42px) !important;
  background: #07090e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  overflow: hidden !important;
}

[data-theme="light"] .ss-video-container {
  background: #0f172a !important;
}

.ss-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
}

.ss-overlay.cover-fit .ss-video {
  object-fit: cover !important;
}

.ss-overlay.contain-fit .ss-video {
  object-fit: contain !important;
}

/* Desktop Mini Window (Kayan Pencere) Mode */
.ss-overlay.mini-mode {
  position: fixed !important;
  z-index: 10000000 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
  resize: both !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

/* ============================================================
   LIVE STREAM RED BADGE & TOOLTIP STYLING
   ============================================================ */

.voice-processing-settings {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(88, 101, 242, 0.22);
  border-radius: 12px;
  background: rgba(88, 101, 242, 0.055);
}

.voice-processing-heading { color: #aeb5ff; font-size: 10px; font-weight: 900; letter-spacing: .8px; }
.voice-processing-toggle,
.voice-sensitivity-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #edf0ff; cursor: pointer; }
.voice-processing-toggle span,
.voice-sensitivity-row span { display: flex; flex-direction: column; gap: 2px; }
.voice-processing-toggle strong,
.voice-sensitivity-row strong { font-size: 12px; }
.voice-processing-toggle small,
.voice-sensitivity-row small { color: #969bb0; font-size: 10px; }
.voice-processing-toggle input { width: 38px; height: 20px; accent-color: #5865f2; cursor: pointer; flex: 0 0 auto; }
.voice-sensitivity-row b { min-width: 28px; color: #aeb5ff; font: 800 11px monospace; text-align: right; }
#settingsVoiceSensitivity { width: 100%; accent-color: #5865f2; cursor: pointer; }

/* Speaker ring lives on a wrapper, not the cropped avatar itself, so it can
   never be hidden behind the profile image or online-status dot. */
.voice-avatar-wrap { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; isolation: isolate; overflow: visible !important; }
.voice-avatar-wrap .avatar { position: relative !important; z-index: 2; border: 2px solid #111214 !important; transition: border-color 0.15s ease !important; }
.voice-avatar-wrap .avatar.is-speaking,
.voice-avatar-wrap.is-speaking .avatar { animation: none !important; border-color: #23a55a !important; box-shadow: none !important; outline: none !important; }
.voice-speaking-ring { display: none !important; }

.status-online-dot {
  box-sizing: border-box !important;
  border-radius: 50% !important;
  pointer-events: auto !important;
}
.status-online-dot.status-dot-online { background-color: #23a55a !important; }
.status-online-dot.status-dot-away { background-color: #f0b232 !important; }
.status-online-dot.status-dot-dnd { background-color: #f23f43 !important; }
.status-online-dot.status-dot-dnd::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 1.5px;
  background-color: #111214;
  border-radius: 1px;
}
.status-online-dot.status-dot-offline,
.status-online-dot.status-dot-invisible { background-color: #80848e !important; }

.voice-badge-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

.ss-member-badge,
.ss-watch-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  background: rgba(88, 101, 242, 0.16) !important;
  border: 1px solid rgba(88, 101, 242, 0.35) !important;
  box-shadow: none !important;
  outline: none !important;
  color: #7289da !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  vertical-align: middle !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ss-member-badge svg,
.ss-watch-btn svg {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  margin: auto !important;
}

.ss-member-badge:hover,
.ss-watch-btn:hover {
  background: rgba(88, 101, 242, 0.38) !important;
  border-color: rgba(88, 101, 242, 0.6) !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

.voice-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

.voice-badge-icon svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}

.party-focus-footer {
  position: relative !important;
  z-index: 1000101 !important;
  pointer-events: auto !important;
}

.party-control-bar {
  position: relative !important;
  z-index: 1000101 !important;
  pointer-events: auto !important;
}

.party-ctrl-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.ss-watch-dot {
  display: none !important;
}

/* Tooltip custom styling for elements with data-tooltip — Disabled in favor of single #discordTooltip JS engine */
[data-tooltip]::after,
[data-tooltip]::before {
  display: none !important;
  content: none !important;
}

/* Focus room header: the viewport stays fixed; only the overflowing name moves. */
.party-focus-label { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; transform: none !important; animation: none !important; }
.party-focus-label-viewport { display: block !important; min-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; }
.party-focus-label-text { display: inline-block !important; min-width: max-content !important; white-space: nowrap !important; transform: translateX(0); }
.party-focus-label-text.is-long-title { animation: partyTitleMarquee var(--party-title-duration, 8s) linear infinite alternate !important; will-change: transform; }

.voice-settings-caret { margin-left: -8px !important; width: 20px !important; min-width: 20px !important; border-radius: 0 7px 7px 0 !important; }
.voice-settings-popover { position: fixed; left: var(--voice-popover-left, 14px); bottom: var(--voice-popover-bottom, 72px); z-index: 10002000 !important; width: min(304px, calc(100vw - 16px)); max-height: min(640px, calc(100dvh - 92px)); overflow-y: auto; display: none; padding: 14px; color: #f2f3f5; background: #111317 !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 14px; box-shadow: 0 24px 54px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.05) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; }
.voice-settings-popover.open { display: block; animation: voice-popover-in .18s cubic-bezier(.16, 1, .3, 1); }
.voice-settings-popover [hidden] { display: none !important; }
@keyframes voice-popover-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.voice-settings-popover-head { display:flex; align-items:center; justify-content:space-between; padding: 2px 2px 9px; border-bottom:1px solid #303238; margin-bottom:5px; font-size:13px; }
.voice-settings-popover-head button { width:26px; height:26px; border:0; color:#aeb2bb; background:transparent; font-size:20px; cursor:pointer; }
.voice-device-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; background:transparent; color:#f2f3f5; text-align:left; padding:9px 2px 4px; cursor:pointer; }
.voice-device-row b, .voice-popover-section label { display:block; font-size:12px; font-weight:700; }
.voice-device-row small, .voice-popover-check small { display:block; color:#858992; font-size:10px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; }
.voice-device-select { width:100%; margin:2px 0 4px; padding:7px 8px; color:#e9eaf0; background:#202126; border:1px solid #36383f; border-radius:7px; font-size:11px; }
.voice-popover-section { padding:10px 2px 7px; border-top:1px solid #303238; margin-top:6px; }
.voice-popover-section label { display:flex; justify-content:space-between; color:#d7d9de; }
.voice-popover-section output { color:#9ca3ff; font-weight:800; }
.voice-popover-section input[type=range] { width:100%; margin:9px 0 0; accent-color:#5865f2; }
.voice-popover-check { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 2px; border-top:1px solid rgba(255,255,255,.05); font-size:11px; }
.voice-popover-check input { width:16px; height:16px; accent-color:#5865f2; flex:0 0 auto; }
.voice-settings-link { display:none !important; }
.voice-profiles-menu { display:none; margin:2px 0 6px; padding:4px; background:#202126; border:1px solid #36383f; border-radius:8px; }
.voice-profiles-menu.open { display:block; animation: voice-popover-in .12s ease-out; }
.voice-profiles-menu button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 7px; border:0; border-radius:6px; color:#e7e8ec; background:transparent; text-align:left; cursor:pointer; }
.voice-profiles-menu button:hover, .voice-profiles-menu button.active { background:#303136; }
.voice-profiles-menu button span { font-size:11px; font-weight:700; }
.voice-profiles-menu button small { display:block; margin-top:2px; color:#92959e; font-size:9px; font-weight:400; }
.voice-profiles-menu button i { color:#5865f2; font-style:normal; font-size:17px; }
@media (max-width: 480px) { .voice-settings-popover { left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); width: auto; max-height: min(72dvh, calc(100dvh - 88px)); } }

/* Compact desktop card and touch-friendly mobile sheet. */
@media (max-width: 480px) {
  .voice-settings-popover { left: 8px !important; right: 8px !important; bottom: calc(72px + env(safe-area-inset-bottom)) !important; width: auto !important; height: auto !important; max-height: min(72dvh, calc(100dvh - 88px)) !important; padding: 14px !important; border-radius: 16px !important; box-shadow: 0 18px 44px rgba(0,0,0,.68) !important; }
  .voice-settings-popover-head { position: sticky; top: -14px; z-index: 1; padding: 3px 0 13px; font-size: 14px; background: #1d1e23; }
  .voice-device-row { padding: 12px 2px 7px; }
  .voice-popover-section { padding: 13px 2px 9px; }
  .voice-popover-check { padding: 12px 2px; }
}

@media (max-width:768px) {
  .toast { bottom:calc(var(--nav-h, 64px) + env(safe-area-inset-bottom) + 104px) !important; z-index:99999999 !important; }
  .party-focus-header .party-drag-grip { display:none !important; }
  .party-focus-header .party-focus-label { pointer-events:none !important; }
}
/* ── Room management (Discord-style settings panel) ── */

#partyModal.room-management-open .modal-sheet {
  width: min(720px, calc(100vw - 32px)) !important;
  height: min(580px, calc(100dvh - 32px)) !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
}

.rm-loading, .rm-error {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 240px;
  place-content: center;
  gap: 10px;
  color: var(--text-2);
  text-align: center;
  font-size: 13px;
  background: var(--bg);
}
.rm-error strong { color: var(--danger); }
.rm-error button {
  justify-self: center;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--card);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.rm-error button:hover { background: var(--card2); }

.rm-shell {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  min-height: 0;
  color: var(--text);
  background: #0d1117;
  border-radius: 16px;
  overflow: hidden;
}

.rm-sidebar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 200px;
  flex: 0 0 200px;
  min-height: 0;
  background: #11141a;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.rm-sidebar-head {
  padding: 20px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.rm-sidebar-kicker {
  display: block;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rm-sidebar-title {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rm-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
  padding: 10px 8px;
  overflow-y: auto;
}

.rm-nav-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-nav-btn svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.7; }
.rm-nav-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.05); }
.rm-nav-btn.active { color: #ffffff; background: rgba(255, 255, 255, 0.09); font-weight: 700; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08); }
.rm-nav-btn.active svg { opacity: 1; }

.rm-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 0;
  flex: 1;
  min-height: 0;
  background: #0d1117;
}

.rm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
.rm-panel-head h2 {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rm-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-close:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.rm-close svg { width: 18px; height: 18px; }

.rm-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

.rm-form { max-width: 440px; }

.rm-field { display: block; margin-bottom: 18px; }
.rm-field > span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.rm-field em { color: rgba(255, 255, 255, 0.4); font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; }
.rm-field input, .rm-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  outline: none;
  color: rgba(255, 255, 255, 0.95);
  background: #151921;
  font: inherit;
  font-size: 14px;
  height: 42px;
  padding: 0 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-field input:focus, .rm-field select:focus {
  border-color: rgba(255, 255, 255, 0.25);
  background: #181d26;
}
/* Modal textarea rule: strictly transparent, no border, outline, focus ring or box-shadow */
.rm-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.95);
  background: transparent !important;
  font: inherit;
  font-size: 14px;
  min-height: 72px;
  resize: vertical;
  padding: 8px 0;
  line-height: 1.5;
}

.rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-btn svg { width: 15px; height: 15px; }
.rm-btn-primary { color: #000000; background: #ffffff; }
.rm-btn-primary:hover { background: #e5e5e5; transform: translateY(-1px); }
.rm-btn-secondary { color: rgba(255, 255, 255, 0.9); background: #1a202c; border: 1px solid rgba(255, 255, 255, 0.08); }
.rm-btn-secondary:hover { background: #222938; color: #ffffff; }
.rm-btn-ghost { color: rgba(255, 255, 255, 0.65); background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); }
.rm-btn-ghost:hover { color: #ffffff; background: rgba(255, 255, 255, 0.05); }

.rm-invite-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: #141820;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
}
.rm-invite-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.rm-invite-label { color: rgba(255, 255, 255, 0.45); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; }
.rm-invite-code { color: #60a5fa; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 15px; letter-spacing: 1.5px; font-weight: 700; }
.rm-invite-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.rm-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 480px;
  margin: 22px 0 0;
  padding: 0;
}
.rm-meta > div {
  padding: 14px 16px;
  border-radius: 12px;
  background: #141820;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
}
.rm-meta dt { margin: 0 0 6px; color: rgba(255, 255, 255, 0.45); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; }
.rm-meta dd { margin: 0; color: rgba(255, 255, 255, 0.95); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }

.rm-hint { max-width: 420px; margin: 16px 0 0; color: var(--text-3); font-size: 12px; line-height: 1.5; }

.rm-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.rm-section-desc { margin: 0; max-width: 420px; color: var(--text-2); font-size: 13px; line-height: 1.5; }

.rm-channel-list, .rm-member-list { display: flex; flex-direction: column; gap: 2px; }

.rm-channel-row, .rm-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.rm-channel-row:hover, .rm-member-row:hover { background: var(--card); }
.rm-channel-row.is-default { border-left: 2px solid var(--text-3); padding-left: 6px; }

.rm-channel-main, .rm-member-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }

.rm-channel-glyph { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; color: var(--text-3); }
.rm-channel-glyph svg { width: 15px; height: 15px; }

.rm-channel-copy strong, .rm-member-copy strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rm-channel-copy small, .rm-member-copy small { display: block; margin-top: 2px; color: var(--text-3); font-size: 11px; }

.rm-channel-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

.rm-icon-btn {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: none;
  border-radius: 6px;
  color: var(--text-2);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rm-icon-btn svg { width: 14px; height: 14px; }
.rm-icon-btn:hover:not(:disabled) { color: var(--text); background: rgba(255,255,255,0.08); }
.rm-icon-btn:disabled { opacity: 0.25; cursor: default; }
.rm-icon-btn.is-danger:hover:not(:disabled) { color: var(--danger); background: var(--danger-bg); }

.rm-member-avatar { flex: 0 0 auto; }
.rm-member-avatar .avatar { width: 32px; height: 32px; }

.rm-empty, .rm-muted { padding: 24px 12px; color: var(--text-3); font-size: 13px; text-align: center; }

.rm-block { margin-top: 24px; }
.rm-block:first-child { margin-top: 0; }
.rm-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rm-block-head h3 { margin: 0; color: var(--text-3); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

.rm-ban-list, .rm-audit-list {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border-soft);
}
.rm-ban-row, .rm-audit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.rm-ban-row:last-child, .rm-audit-row:last-child { border-bottom: none; }
.rm-ban-copy strong, .rm-audit-row strong { display: block; color: var(--text); font-size: 13px; font-weight: 700; }
.rm-ban-copy small, .rm-audit-row small { display: block; margin-top: 2px; color: var(--text-3); font-size: 11px; }
.rm-audit-row time { flex: 0 0 auto; color: var(--text-3); font-size: 11px; white-space: nowrap; }

.rm-switch {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border-soft);
  cursor: pointer;
}
.rm-switch input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--text); }
.rm-switch strong, .rm-switch small { display: block; }
.rm-switch strong { color: var(--text); font-size: 13px; font-weight: 700; }
.rm-switch small { margin-top: 2px; color: var(--text-3); font-size: 11px; }

.rm-dialog-layer {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: rm-dialog-in 0.14s ease-out;
}
.rm-dialog-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
.rm-dialog-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}
.rm-dialog-layer.is-danger .rm-dialog-submit { background: var(--danger); color: var(--text); }
.rm-dialog-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.rm-dialog-card header strong { display: block; color: var(--text); font-size: 15px; font-weight: 800; }
.rm-dialog-card header small { display: block; margin-top: 4px; color: var(--text-3); font-size: 12px; }
.rm-dialog-close {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: none;
  border-radius: 6px;
  color: var(--text-2);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}
.rm-dialog-close:hover { background: rgba(255,255,255,0.07); }
.rm-dialog-close svg { width: 16px; height: 16px; }
.rm-dialog-body { min-height: 0; overflow: auto; padding: 16px; }
.rm-dialog-card footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
}
.rm-dialog-card footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rm-dialog-cancel { color: var(--text-2); background: transparent; }
.rm-dialog-cancel:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.rm-dialog-secondary { margin-right: auto; color: var(--danger); background: transparent; }
.rm-dialog-secondary:hover { background: var(--danger-bg); }
.rm-dialog-submit { color: #000; background: var(--text); }
.rm-dialog-submit:hover { background: #e0e0e0; }
.rm-dialog-submit svg { width: 14px; height: 14px; }
.rm-dialog-error { min-height: 0; margin: 8px 0 0; color: var(--danger); font-size: 12px; }
.rm-dialog-warning {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: #fbbf24;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.2);
  font-size: 12px;
}

.rm-member-action-grid { display: flex; flex-direction: column; gap: 4px; }
.rm-member-action-grid button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.rm-member-action-grid button:hover { background: rgba(255,255,255,0.06); }
.rm-member-action-grid button.is-danger { color: var(--danger); }
.rm-member-action-grid button.is-danger:hover { background: var(--danger-bg); }
.rm-member-action-grid svg { width: 16px; height: 16px; flex: 0 0 auto; }

@keyframes rm-dialog-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  #partyModal.room-management-open .modal-sheet {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .rm-shell { flex-direction: column; }
  .rm-sidebar {
    width: 100%;
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .rm-sidebar-head { padding: calc(12px + env(safe-area-inset-top)) 16px 8px; }
  .rm-nav { flex-direction: row; overflow-x: auto; padding: 0 8px 8px; -webkit-overflow-scrolling: touch; }
  .rm-nav-btn { width: auto; flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
  .rm-panel-body { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .rm-meta { grid-template-columns: 1fr; }
  .rm-section-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .rm-dialog-layer { align-items: end; padding: 0; }
  .rm-dialog-card {
    width: 100%;
    max-height: min(85dvh, calc(100dvh - env(safe-area-inset-top)));
    border-radius: 12px 12px 0 0;
  }
}

.party-focus-header .party-drag-grip { display: none !important; }
.party-focus-header #partyOverlayCollapseBtn { display: inline-flex !important; }
.party-focus-header .party-focus-label { pointer-events: none !important; }
.sub-channel-card .channel-actions,
.sub-channel-header .channel-actions { display: none !important; }
.party-focus-member.can-drag { cursor: default !important; }


/* ================================================================
   BLUNK HERO + FEATURE CARDS — v2
   ================================================================ */

/* Hero wrapper */
.bh {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  padding: 0 4px;
}

.bh-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.bh-logo {
  font-size: clamp(32px, 7vw, 48px);
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #fff 0%, #6c63ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 24px;
}

.bh-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
}

.bh-title {
  font-size: clamp(36px, 8vw, 56px);
  font-weight: 800;
  color: #f2f3f5;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0 0 12px;
}

.bh-title-accent {
  background: linear-gradient(90deg, #6c63ff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bh-sub {
  font-size: clamp(13px, 2vw, 15px);
  color: #9ca3af;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 auto 0;
  max-width: 300px;
}

/* CTA row */
.bh-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.bh-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #6c63ff;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 14px 32px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(108, 99, 255, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  min-width: 160px;
}

.bh-cta-primary:hover {
  background: #5a52e0;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(108, 99, 255, 0.6);
}

.bh-cta-primary:active { transform: translateY(0); }

.bh-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  min-width: 140px;
}

.bh-cta-secondary:hover {
  color: #f2f3f5;
  border-color: rgba(255,255,255,0.25);
  background: var(--card);
}

/* Social proof */
.bh-proof {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 8px 16px 8px 8px;
}

.bh-proof-avatars {
  display: flex;
}

.bh-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #0b0c0e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--text);
  margin-left: -6px;
  flex-shrink: 0;
}

.bh-av:first-child { margin-left: 0; }

.bh-proof-text {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
  white-space: nowrap;
}

.bh-proof-num {
  color: #f2f3f5;
  font-weight: 800;
}

/* Feature Cards */
.bf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.bf-card {
  background: #111214;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 22px;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  animation: bf-fadein 0.5s ease both;
}

.bf-card:nth-child(1) { animation-delay: 0.05s; }
.bf-card:nth-child(2) { animation-delay: 0.15s; }
.bf-card:nth-child(3) { animation-delay: 0.25s; }

@keyframes bf-fadein {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bf-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.bf-card:nth-child(1)::before { background: radial-gradient(ellipse at top left, rgba(108,99,255,0.1) 0%, transparent 65%); }
.bf-card:nth-child(2)::before { background: radial-gradient(ellipse at top left, rgba(245,158,11,0.1) 0%, transparent 65%); }
.bf-card:nth-child(3)::before { background: radial-gradient(ellipse at top left, rgba(16,185,129,0.1) 0%, transparent 65%); }

.bf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}

.bf-card:nth-child(1):hover { border-color: rgba(108,99,255,0.35); }
.bf-card:nth-child(2):hover { border-color: rgba(245,158,11,0.35); }
.bf-card:nth-child(3):hover { border-color: rgba(16,185,129,0.35); }

.bf-card:hover::before { opacity: 1; }

.bf-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform 0.25s ease;
}

.bf-card:hover .bf-icon { transform: scale(1.08); }

.bf-icon--voice     { background: rgba(108,99,255,0.15); color: #7c85ff; }
.bf-icon--xp        { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.bf-icon--community { background: rgba(16,185,129,0.15);  color: #10b981; }

.bf-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #f2f3f5;
  margin-bottom: 8px;
  letter-spacing: 0.1px;
}

.bf-card-desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .bf-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .bf-card { padding: 22px 18px; }
  .bh-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .bh-cta-primary, .bh-cta-secondary {
    justify-content: center;
    width: 100%;
  }
}

/* --- Room Management Extensions --- */
.rm-invite-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  padding: 12px 16px;
  margin-top: 8px;
}

.rm-invite-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rm-invite-label {
  font-size: 11px;
  color: var(--text-3, #9ea3ac);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rm-invite-code {
  font-size: 16px;
  font-family: monospace;
  color: #5865f2;
  letter-spacing: 1px;
}

.rm-invite-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rm-role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.rm-role-badge.role-owner { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.rm-role-badge.role-admin { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.rm-role-badge.role-moderator { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.rm-role-badge.role-member { background: rgba(255, 255, 255, 0.06); color: #9ea3ac; }

.rm-btn-xs {
  padding: 4px 10px !important;
  font-size: 12px !important;
  min-height: 28px !important;
}

.rm-voice-active-tag {
  display: inline-block;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  margin-left: 6px;
}

.rm-members-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.rm-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-2, #9ea3ac);
}
.rm-search-box svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; }
.rm-search-input {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  width: 100%;
  outline: none;
}

.rm-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rm-chip {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-2, #9ea3ac);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rm-chip:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.rm-chip.active { background: #5865f2; color: var(--text); border-color: #5865f2; }

.rm-member-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rm-self-tag {
  background: rgba(88, 101, 242, 0.2);
  color: #5865f2;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
}

.rm-level-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #facc15;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
}

.rm-status-text.online { color: #4ade80; }
.rm-status-text.offline { color: #6b7280; }

.rm-audit-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rm-audit-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #5865f2;
}
.rm-audit-icon svg { width: 16px; height: 16px; }
.rm-audit-copy { flex: 1; min-width: 0; }

/* ============================================================
   ENTERPRISE MESSAGING & MODAL STYLING UPGRADES
   ============================================================ */
#disappearingSettingsModal.disappearing-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  z-index: 99999 !important;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

#disappearingSettingsModal.disappearing-modal-overlay.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.disappearing-modal-box {
  background: #0d1117 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
  max-width: 400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  transform: scale(0.96);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

#disappearingSettingsModal.open .disappearing-modal-box {
  transform: scale(1);
}

.modal-close-icon-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.modal-close-icon-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.disappearing-opt-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
}

.disappearing-opt-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

.disappearing-opt-btn.active, .disappearing-opt-btn:has(.disappearing-check.selected) {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.35);
  color: #ffffff;
}

.disappearing-check.selected::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.chat-image-attachment {
  width: 100%;
  max-width: 260px;
  border-radius: 12px;
  object-fit: cover;
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
}

.msg-self-destruct-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 8px;
  margin-top: 2px;
}

.msg-double-tap-heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-size: 36px;
  opacity: 0;
  pointer-events: none;
  animation: heartPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes heartPop {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.chat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  animation: fadeIn 0.2s ease;
}

@media (max-width: 768px) {
  .messages-container {
    height: calc(100dvh - 60px) !important;
  }
  .chat-area {
    height: 100dvh !important;
  }
}

/* ============================================================
   FIXED MESSAGES PAGE VIEWPORT & SIDEBAR LAYOUT
   ============================================================ */
#messagesPage {
  overflow: hidden !important;
  max-height: calc(100dvh - 56px) !important;
  height: calc(100dvh - 56px) !important;
  padding-bottom: 0 !important;
}

.messages-container {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  background: #000000 !important;
  position: relative !important;
}

.inbox-panel {
  flex: 0 0 320px !important;
  width: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  border-right: 1px solid var(--border-soft);
  background: #050505;
  height: 100% !important;
  overflow: hidden !important;
}

.chat-area {
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  background: #000000 !important;
}

.chat-placeholder {
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #444 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 24px !important;
  text-align: center !important;
  gap: 12px !important;
}

.desktop-toggle-sidebar-btn {
  display: none !important;
}

@media (max-width: 768px) {
  #messagesPage {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .messages-container {
    height: 100dvh !important;
  }
  .inbox-panel {
    width: 100% !important;
    flex: 1 !important;
    border-right: none !important;
  }
  .chat-area {
    width: 100% !important;
    height: 100dvh !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
  }
  #chatPlaceholder {
    display: none !important;
  }
}

/* ============================================================
   RESPONSIVE MOBILE VS DESKTOP MESSAGES UI & SVG REACTION STYLES
   ============================================================ */
@media (min-width: 769px) {
  .chat-back-btn {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .chat-back-btn {
    display: flex !important;
  }
  .chat-input-bar {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.react-svg-btn {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.react-svg-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text);
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.35);
}

.react-svg-btn:active {
  transform: scale(0.95);
}

.chat-share-card-container {
  background: rgba(18, 18, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 12px;
  max-width: 320px;
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-share-card-container:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   POST DETAIL MODAL (pdetail) RESPONSIVE & MOBILE COMMENT INPUT FIX
   ============================================================ */
.pdetail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}

.pdetail-sheet {
  background: #090a0d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 900px;
  max-height: 90dvh;
  height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.9);
}

.pdetail-modal-container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pdetail-media-column {
  flex: 1.2;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.pdetail-image-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdetail-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pdetail-info-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--t-bg-modal);
  border-left: 1px solid var(--t-border-subtle);
  min-width: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.pdetail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--t-border-subtle);
  background: var(--t-bg-modal);
  flex-shrink: 0;
}

.pdetail-comments-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
  overscroll-behavior: contain;
}

.pdetail-bottom-panel {
  flex: 0 0 auto;
  background: var(--t-bg-modal);
  border-top: 1px solid var(--t-border-subtle);
  padding: 12px 16px;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.pdetail-comment-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.pdetail-comment-input {
  flex: 1;
  background: var(--t-bg-input);
  border: 1px solid var(--t-border-subtle);
  color: var(--t-text-primary);
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 12.5px;
  outline: none;
}

.pdetail-comment-send {
  background: var(--t-accent-primary);
  color: var(--t-text-inverse);
  border: none;
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 768px) {
  .pdetail-backdrop {
    padding: 0;
  }
  .pdetail-sheet {
    max-width: 100vw;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .pdetail-modal-container {
    flex-direction: column;
    height: 100dvh;
  }
  .pdetail-media-column {
    max-height: 40dvh;
    flex: 0 0 auto;
  }
  .pdetail-info-column {
    flex: 1 1 auto;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    height: 60dvh;
  }
  .pdetail-bottom-panel {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* Strictly hide focus room overlay whenever user is not in an active party */
.party-focus-overlay:not(.in-active-party) {
  display: none !important;
}

/* ============================================================
   TWITTER-STYLE THREAD MODAL
   ============================================================ */
/* ============================================================
   TWITTER-STYLE THREAD MODAL & REPLY SECTION
   ============================================================ */
.thread-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.thread-modal-backdrop.open {
  opacity: 1;
}
.thread-modal-container {
  width: 100%;
  max-width: 600px;
  min-height: 100%;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
}
.thread-modal-content-wrapper {
  background: var(--t-bg-card, #111218);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--t-border-subtle, rgba(255, 255, 255, 0.05));
  display: flex;
  flex-direction: column;
  flex: 1;
}

[data-theme="light"] .thread-modal-content-wrapper {
  background: #ffffff;
  border-color: var(--t-border-subtle, rgba(0, 0, 0, 0.08));
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.thread-modal-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top, 12px));
  border-bottom: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  position: sticky;
  top: 0;
  background: var(--t-bg-card, rgba(17, 18, 24, 0.95));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
}
.thread-back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
  color: var(--t-text-primary, #ffffff);
  background: transparent;
  border: none;
  outline: none;
  margin-right: 14px;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
  z-index: 101;
}
.thread-back-btn:hover {
  background: var(--t-bg-input, rgba(255, 255, 255, 0.1));
}
.thread-header-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--t-text-primary, #ffffff);
}
.thread-root-container {
  border-bottom: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
}
.thread-root-card {
  padding: 20px 16px;
  border: none !important;
  background: transparent !important;
}
.thread-root-card .tweet-text {
  font-size: 17px;
  line-height: 1.55;
  margin-top: 10px;
}

/* ─── THREAD REPLY SECTION ─── */
.thread-reply-container {
  position: sticky;
  bottom: 0;
  background: var(--t-bg-card, rgba(17, 18, 24, 0.95));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  padding: 12px 16px;
  z-index: 10;
}

[data-theme="light"] .thread-reply-container {
  background: rgba(255, 255, 255, 0.95);
  border-top-color: var(--t-border-subtle, rgba(0, 0, 0, 0.08));
}

.pdetail-reply-bar {
  margin-bottom: 8px;
}

.pdetail-reply-bar .reply-active-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  color: var(--t-text-secondary, #c5c6c7);
  font-weight: 500;
}

.thread-reply-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.thread-reply-input-row .avatar {
  flex-shrink: 0;
}

.thread-comment-input {
  flex: 1;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  color: var(--t-text-primary, #ffffff);
  padding: 10px 16px;
  border-radius: 24px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.thread-comment-input::placeholder {
  color: var(--t-text-muted, #8a9099);
  font-size: 13.5px;
}

.thread-comment-input:focus {
  border-color: var(--t-border-strong, rgba(255, 255, 255, 0.25));
  background: var(--t-bg-input, rgba(255, 255, 255, 0.08));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .thread-comment-input {
  background: var(--t-bg-input, #f4f3f8);
  border-color: var(--t-border-subtle, rgba(0, 0, 0, 0.1));
  color: #12131c;
}

[data-theme="light"] .thread-comment-input:focus {
  border-color: var(--t-border-strong, rgba(0, 0, 0, 0.25));
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.thread-comment-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--t-text-primary, #ffffff);
  color: var(--t-text-inverse, #08090c);
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

.thread-comment-send:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.thread-comment-send:active {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .thread-modal-backdrop {
    padding: 0;
    background: #0D1117 !important;
  }
  .thread-modal-container {
    padding: 0;
    max-width: 100%;
    min-height: 100vh;
  }
  .thread-modal-content-wrapper {
    border-radius: 0;
    border: none;
    min-height: 100vh;
    box-shadow: none;
  }
  .thread-modal-header {
    padding-top: max(14px, env(safe-area-inset-top, 14px));
    padding-left: 12px;
    padding-right: 16px;
  }
  .thread-reply-container {
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  }
}

/* ============================================================
   POST DETAIL COMMENT & NESTED REPLIES SYSTEM
   ============================================================ */

.thread-comments-container {
  display: flex;
  flex-direction: column;
}

.pdetail-comment-tree-node {
  padding: 12px 16px;
  border-bottom: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.06));
  transition: background-color 0.15s ease;
}

.pdetail-comment-tree-node:hover {
  background-color: var(--t-bg-card-hover, rgba(255, 255, 255, 0.02));
}

.pdetail-comment {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.pdetail-comment-left {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.pdetail-comment-avatar-wrap {
  flex-shrink: 0;
  cursor: pointer;
}

.pdetail-comment.reply-item {
  margin-top: 6px;
}

.pdetail-comment-body {
  flex: 1;
  min-width: 0;
}

.pdetail-comment-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2px;
}

.pdetail-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.pdetail-comment-user {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t-text-primary, #ffffff);
  cursor: pointer;
}

.pdetail-comment-user:hover {
  text-decoration: underline;
}

.pdetail-comment-time {
  font-size: 12px;
  color: var(--t-text-muted, #8a9099);
}

.pdetail-comment-text {
  font-size: 14px;
  color: var(--t-text-secondary, #e2e8f0);
  line-height: 1.5;
  word-break: break-word;
}

[data-theme="light"] .pdetail-comment-text {
  color: #1e293b;
}

.pdetail-comment-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.comment-action-dot {
  color: var(--t-text-muted, #8a9099);
  font-size: 11px;
  opacity: 0.5;
  user-select: none;
}

.comment-like-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--t-text-muted, #8a9099);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 8px;
  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.comment-like-btn:hover {
  color: var(--danger, #ff3b30);
  background: rgba(255, 59, 48, 0.08);
  transform: scale(1.08);
}

.comment-like-btn.liked {
  color: var(--danger, #ff3b30);
}

.comment-like-num {
  font-size: 10px;
  line-height: 1;
}

.comment-reply-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--t-text-muted, #8a9099);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.comment-reply-action-btn:hover {
  color: var(--t-text-primary, #ffffff);
}

.comment-delete-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--danger, #ff3b30);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.comment-delete-action-btn:hover {
  opacity: 1;
}

.pdetail-replies-wrapper {
  margin-left: 28px;
  margin-top: 8px;
  border-left: 2px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  padding-left: 14px;
}

.pdetail-replies-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--t-accent-primary, #6366f1);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 0;
  margin-bottom: 6px;
  transition: opacity 0.15s ease;
}

.pdetail-replies-toggle-btn:hover {
  opacity: 0.8;
}

.pdetail-replies-list {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.pdetail-replies-list.open {
  display: flex;
}

@media (max-width: 600px) {
  .pdetail-comment-tree-node {
    padding: 10px 12px;
  }
  .pdetail-comment-left {
    gap: 10px;
  }
  .pdetail-comment-text {
    font-size: 13.5px;
  }
  .pdetail-replies-wrapper {
    margin-left: 18px;
    padding-left: 10px;
  }
  .comment-reply-action-btn,
  .comment-delete-action-btn {
    font-size: 11.5px;
    padding: 4px 2px;
  }
}
/* ============================================================
   ULTRA-PREMIUM LOGIN & AUTH CARD STYLES
   ============================================================ */
#loginScreen {
  position: relative;
  background: #07080b;
  overflow: hidden;
}

/* Ambient Glow Orbs */
.blunk-ambient-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  animation: glowFloat 16s infinite alternate ease-in-out;
}
.glow-1 { top: -10%; left: 15%; width: 500px; height: 500px; background: radial-gradient(circle, #6c63ff, #4f46e5); }
.glow-2 { bottom: -10%; right: 15%; width: 550px; height: 550px; background: radial-gradient(circle, #ec4899, #8b5cf6); animation-delay: -5s; }
.glow-3 { top: 45%; left: 50%; width: 400px; height: 400px; background: radial-gradient(circle, #38bdf8, #6366f1); transform: translate(-50%, -50%); animation-delay: -10s; }

@keyframes glowFloat {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.08); }
  100% { transform: translateY(20px) scale(0.95); }
}

.blunk-landing-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 40px 20px;
  box-sizing: border-box;
  gap: 32px;
}

/* Hero Badge & Headings */
.bh-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(108, 99, 255, 0.12);
  border: 1px solid rgba(108, 99, 255, 0.3);
  border-radius: 30px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #a78bfa;
  margin-bottom: 14px;
  backdrop-filter: blur(10px);
}

.bh-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 10px #a78bfa;
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

.bh-feature-pills {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.bh-pill {
  padding: 6px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}
.bh-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

/* Auth Card */
.blunk-auth-card {
  width: 100%;
  max-width: 410px;
  background: rgba(13, 15, 22, 0.78);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.blunk-auth-card:hover {
  border-color: rgba(108, 99, 255, 0.35);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(108, 99, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.auth-card-header {
  text-align: center;
  margin-bottom: 22px;
}

.auth-card-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.2px;
}

.auth-card-sub {
  font-size: 12.5px;
  color: #949ba4;
  margin-top: 4px;
}

/* Field Inner & Icons */
.auth-input-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.auth-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.auth-input-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #949ba4;
  text-transform: uppercase;
}

.auth-field-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.auth-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #64748b;
  pointer-events: none;
  z-index: 5;
  transition: color 0.2s ease;
}

.auth-input-field {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 13px 14px 13px 44px !important;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.auth-input-field:focus {
  background: rgba(0, 0, 0, 0.6);
  border-color: #6c63ff;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.25);
}

.auth-input-field:focus + .auth-field-icon,
.auth-field-inner:focus-within .auth-field-icon {
  color: #a78bfa;
}

/* Google Auth Button */
.google-auth-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.google-auth-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.google-auth-btn:active {
  transform: translateY(0);
}

.auth-divider {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 0.1em;
  margin: 18px 0 10px;
}

.auth-divider span {
  background: #0e1017;
  color: #64748b;
  padding: 0 12px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Primary Login Button */
#loginSubmitBtn.discord-action-btn.primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.8px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6c63ff 0%, #4f46e5 100%) !important;
  color: var(--text) !important;
  border: none !important;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(108, 99, 255, 0.4);
  transition: all 0.2s ease;
}

#loginSubmitBtn.discord-action-btn.primary:hover {
  background: linear-gradient(135deg, #7c73ff 0%, #5b52f6 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(108, 99, 255, 0.55);
}

#loginSubmitBtn.discord-action-btn.primary:active {
  transform: translateY(0);
}

.auth-footer-link {
  margin-top: 20px;
  font-size: 13px;
  color: #949ba4;
  cursor: pointer;
  text-align: center;
  font-weight: 500;
  transition: color 0.2s ease;
}

.auth-footer-link .link-accent {
  color: #a78bfa;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-footer-link:hover .link-accent {
  color: #c084fc;
}

.blunk-landing-footer {
  margin-top: auto;
  padding-top: 16px;
  text-align: center;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}

/* ==========================================================================
   SPOTLIGHT INTERACTIVE TOUR STYLES
   ========================================================================== */
.blunk-spotlight-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 12, 0.38);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 1000000;
  animation: spotlight-backdrop-fade 0.3s ease both;
}

@keyframes spotlight-backdrop-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.blunk-spotlight-ring {
  position: fixed;
  z-index: 1000001;
  pointer-events: none;
  border: 2px solid #a855f7;
  background: rgba(168, 85, 247, 0.12);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.35), 0 0 35px rgba(168, 85, 247, 0.7);
  animation: spotlight-ring-pulse 2s ease-in-out infinite;
  box-sizing: border-box;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes spotlight-ring-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.3), 0 0 30px rgba(168, 85, 247, 0.6);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(192, 132, 252, 0.5), 0 0 45px rgba(192, 132, 252, 0.85);
  }
}

.blunk-spotlight-target {
  position: relative !important;
  z-index: 1000002 !important;
}

.blunk-spotlight-card {
  position: fixed;
  z-index: 1000003;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  width: calc(100% - 32px);
  max-width: 480px;
  background: rgba(14, 16, 26, 0.94);
  border: 1px solid rgba(168, 85, 247, 0.32);
  border-radius: 20px;
  padding: 22px 24px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(168, 85, 247, 0.12) inset;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text, #ffffff);
  animation: spotlight-sheet-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  box-sizing: border-box;
}

@keyframes spotlight-sheet-enter {
  from { opacity: 0; transform: translate(-50%, 20px) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (max-width: 480px) {
  .blunk-spotlight-card {
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    padding: 18px 20px 18px;
    border-radius: 18px;
  }
}

.spotlight-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.spotlight-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.15);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(168, 85, 247, 0.28);
  text-transform: uppercase;
}

.spotlight-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.spotlight-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

.spotlight-dot.active {
  width: 18px;
  background: #a855f7;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.8);
}

.spotlight-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.65);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.2s ease;
}

.spotlight-close-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.spotlight-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.spotlight-desc {
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
  margin-bottom: 20px;
}

.spotlight-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.spotlight-actions-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spotlight-btn-ghost {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.spotlight-btn-ghost:hover {
  color: rgba(255, 255, 255, 0.85);
}

.spotlight-btn-sec {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.spotlight-btn-sec:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.spotlight-btn-pri {
  background: linear-gradient(135deg, #6c63ff, #a855f7);
  border: none;
  color: #ffffff;
  padding: 9px 20px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(108, 99, 255, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.spotlight-btn-pri:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.55);
}

.spotlight-btn-pri svg {
  width: 14px;
  height: 14px;
}

/* ============================================================
   PROFILE SETTINGS UNIFORM UI DESIGN SYSTEM
   ============================================================ */
#profileSettingsModal.open,
#profileSettingsModal[style*="display: flex"],
#profileSettingsModal[style*="display:flex"] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 999999 !important;
}

.ps-modal-content {
  max-width: 580px;
  margin: 0 auto;
  width: 100%;
  padding: 24px 16px 48px;
  box-sizing: border-box;
}

.ps-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
}

.ps-modal-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--t-text-primary, #ffffff);
  letter-spacing: 0.5px;
}

.ps-card {
  background: var(--t-bg-card, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.ps-card-danger {
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.ps-section-header {
  margin-bottom: 2px;
}

.ps-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-text-primary, #ffffff);
  letter-spacing: 0.5px;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ps-section-title-danger {
  color: #ef4444;
}

.ps-section-desc {
  font-size: 12px;
  color: var(--t-text-muted, #8e9297);
  margin: 0;
  line-height: 1.45;
}

.ps-avatar-section {
  align-items: center;
  text-align: center;
  padding: 24px 20px;
}

.ps-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.ps-field-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ps-field-row > .ps-field-group {
  flex: 1 1 140px;
}

.ps-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--t-text-muted, #8e9297);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ps-input,
.ps-textarea,
.ps-select {
  width: 100%;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--t-text-primary, #ffffff);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.ps-input:focus,
.ps-textarea:focus,
.ps-select:focus {
  border-color: var(--t-accent-primary, #6c63ff);
  background: var(--t-bg-input-focus, rgba(255, 255, 255, 0.07));
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
}

.ps-textarea {
  resize: vertical;
  min-height: 80px;
}

.ps-select option {
  background: var(--t-bg-card, #111214);
  color: var(--t-text-primary, #fff);
}

.ps-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}

.ps-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ps-toggle-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-text-primary, #ffffff);
}

.ps-toggle-desc {
  font-size: 11.5px;
  color: var(--t-text-muted, #8e9297);
}

.ps-range-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ps-range-val {
  font-size: 11px;
  font-weight: 800;
  color: var(--t-accent-primary, #6c63ff);
  font-family: var(--font-mono, monospace);
}

.ps-range-input {
  width: 100%;
  accent-color: var(--t-accent-primary, #6c63ff);
  cursor: pointer;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}

.ps-btn-primary {
  width: 100%;
  padding: 14px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 12px;
  border: none;
  background: var(--t-accent-primary, #6c63ff);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(108, 99, 255, 0.35);
}

.ps-btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.ps-btn-primary:active {
  transform: translateY(0);
}

.ps-btn-secondary {
  width: 100%;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.12));
  color: var(--t-text-primary, #ffffff);
  background: var(--t-bg-card, rgba(255, 255, 255, 0.04));
  cursor: pointer;
  transition: all 0.15s ease;
}

.ps-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--t-accent-primary, rgba(108, 99, 255, 0.5));
}

.ps-btn-danger {
  width: 100%;
  padding: 14px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 12px;
  border: 1px solid #ef4444;
  color: var(--text);
  background: #ef4444;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.ps-btn-danger:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.ps-btn-danger:hover {
  background: #dc2626;
}

.ps-btn-tour {
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #a855f7;
  background: rgba(168, 85, 247, 0.08);
}

.ps-btn-tour:hover {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.5);
}




/* ══════════════════════════════════════════════════════
   STATUS DOT — Temiz, statik uygulama (animasyon yok)
   Tüm önceki çakışan kuralları ezer.
   ══════════════════════════════════════════════════════ */

/* Dot: sabit konum, hiç hareket etmiyor */
.timer-status-dot {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
  will-change: auto !important;
  animation: none !important;
  /* Sadece renk değişimi için yumuşak geçiş */
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

/* Durum renkleri */
.timer-status-dot[data-status="online"],
.timer-status-dot.good {
  background: #4ade80 !important;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.7) !important;
}

.timer-status-dot[data-status="away"] {
  background: #fbbf24 !important;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.7) !important;
}

.timer-status-dot[data-status="dnd"],
.timer-status-dot.bad {
  background: #ef4444 !important;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.7) !important;
}

.timer-status-dot[data-status="invisible"] {
  background: #9ca3af !important;
  box-shadow: 0 0 4px rgba(156, 163, 175, 0.5) !important;
}

.timer-status-dot.live {
  background: #a855f7 !important;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.7) !important;
}

/* Chip hover'da hiçbir şey hareket etmemeli */
.timer-status-chip:hover,
.timer-status-chip.state-status:hover,
.timer-status-chip.state-profile:hover,
.timer-status-chip.state-focus:hover {
  transform: none !important;
}

/* Chip active: hafif scale ama chip ortada kalır */
.timer-status-chip:active {
  transform: scale(0.96) !important;
  transition: transform 0.08s ease !important;
}

/* Cleaned up duplicate media query block */

/* ══════════════════════════════════════════════════════
   SAYAÇ BOYUTLARI — PC ve Mobil için olabildiğince büyük
   ══════════════════════════════════════════════════════ */
.timer-display-solo {
  font-size: clamp(110px, 17vw, 210px) !important;
  letter-spacing: -6px !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin: 6px 0 !important;
  line-height: 0.9 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  transform: none !important;
}

@media (max-width: 1024px) {
  .timer-display-solo {
    font-size: clamp(85px, 14vw, 145px) !important;
    letter-spacing: -4px !important;
    margin: 6px 0 !important;
  }
}

@media (max-width: 767px) {
  .timer-display-solo {
    font-size: clamp(65px, 15vw, 110px) !important;
    letter-spacing: -3px !important;
    margin: 4px 0 !important;
  }
}


/* Real-time date & time clock styling */
.timer-real-clock {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.38) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
  text-align: center !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
}

@media (max-width: 767px) {
  .timer-real-clock {
    font-size: 11px !important;
    letter-spacing: 1px !important;
    margin-bottom: 0px !important;
  }
}

/* ── SESSION LOADING OVERLAY (START & END OVERLAY) ───────── */
.session-loading-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(11, 12, 15, 0.95) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  padding: 24px !important;
}

[data-theme="light"] .session-loading-overlay {
  background: rgba(255, 255, 255, 0.96) !important;
}

[data-theme="dark"] .session-loading-overlay,
:root:not([data-theme="light"]) .session-loading-overlay {
  background: rgba(11, 12, 15, 0.96) !important;
}

.session-loading-overlay.visible {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.session-loading-spinner {
  width: 44px !important;
  height: 44px !important;
  border: 3.5px solid rgba(255, 255, 255, 0.12) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: sessionSpin 0.8s linear infinite !important;
  margin-bottom: 20px !important;
}

[data-theme="light"] .session-loading-spinner {
  border-color: rgba(0, 0, 0, 0.12) !important;
  border-top-color: #0c0d10 !important;
}

@keyframes sessionSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.session-loading-msg {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  text-align: center !important;
  color: #ffffff !important;
}

[data-theme="light"] .session-loading-msg {
  color: #0c0d10 !important;
}

.session-loading-sub {
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  margin-top: 8px;
  max-width: 360px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .session-loading-sub {
  color: #4b5563;
}

/* Highlight selected feeling button */
.feeling-btn.selected {
  background: #212631 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  color: #ffffff !important;
}

.feeling-btn.selected .feeling-emoji {
  filter: none !important;
  color: #ffffff !important;
}

.feeling-btn.selected .feeling-label {
  color: #ffffff !important;
}

/* Clean status row for overtime cancellation countdown */
#pomoOvertimeBox {
  padding: 0 !important;
  margin-top: 12px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide phase indicator completely to keep UI clean */
#pomoPhaseIndicator {
  display: none !important;
}

/* Hide skip break button strictly when it has the hidden class */
#pomoSkipBreakBtn.hidden {
  display: none !important;
}

  .timer-controls button.hidden {
    display: none !important;
  }

/* Discord-style borderless & backgroundless action icon buttons for desktop */
@media (min-width: 768px) {
  .timer-controls .timer-start-btn:not(.hidden),
  .timer-controls .timer-stop-btn:not(.hidden),
  .timer-controls .timer-pause-btn:not(.hidden),
  .timer-controls .timer-resume-btn:not(.hidden),
  .timer-controls .timer-extend-btn:not(.hidden),
  .timer-controls .timer-room-btn:not(.hidden) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-3, #888) !important;
    cursor: pointer !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
  }
  .timer-controls .timer-start-btn:hover,
  .timer-controls .timer-stop-btn:hover,
  .timer-controls .timer-pause-btn:hover,
  .timer-controls .timer-resume-btn:hover,
  .timer-controls .timer-extend-btn:hover,
  .timer-controls .timer-room-btn:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--text) !important;
  }
  
  /* Color highlights for specific buttons on hover in desktop */
  #timerStopBtn:hover {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
  }
  #timerBreakBtn:hover {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
  }
  #pomoNextRoundBtn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text) !important;
  }

  /* Hide written text inside buttons on desktop */
  .timer-controls button .btn-text {
    display: none !important;
  }
  .timer-controls button .btn-icon {
    display: inline-flex !important;
  }
}

/* Mobile full-width/equal-space written buttons with clean backgrounds */
@media (max-width: 767px) {
  .timer-controls {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .timer-controls button:not(.hidden),
  .timer-controls #soloPartyControlsRow:not(.hidden) {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .timer-controls button.hidden,
  .timer-controls #soloPartyControlsRow.hidden {
    display: none !important;
  }
  .timer-controls button {
    height: 42px !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 0 12px !important;
    box-shadow: none !important;
  }
  .timer-controls button .btn-icon {
    display: inline-flex !important;
  }
  .timer-controls button .btn-text {
    display: none !important;
  }

  /* Specific mobile button color highlights */
  .timer-controls #timerStopBtn {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
  }
  .timer-controls #timerBreakBtn {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
  }
}

/* Mola, devam ve bitir eylemleri aynı borderless kontrol dilini kullanır. */
.timer-controls .timer-pause-btn,
.timer-controls .timer-resume-btn,
.timer-controls .timer-extend-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}
.fsm-personal-section { margin: 16px 0 4px; }
.fsm-personal-section.hidden { display: none; }
.fsm-personal-title { color: var(--text, #f2f3f5); font-size: 13px; font-weight: 750; margin-bottom: 8px; }
.fsm-personal-list { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fsm-personal-list::-webkit-scrollbar { display: none; }
.fsm-personal-item { flex: 0 0 auto; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 10px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 9px; background: var(--card, #15171b); color: var(--text, #f2f3f5); cursor: pointer; font: inherit; font-size: 12px; }
.fsm-personal-item:hover { border-color: var(--accent, #7c6cff); color: var(--accent, #a79bff); }

/* Light Zen uses a calm paper surface instead of forced OLED black. */
[data-theme="light"] body.zen-fullscreen-mode,
[data-theme="light"] body.zen-fullscreen-mode .timer-main-stage { background: #f5f7fb !important; }
[data-theme="light"] body.zen-fullscreen-mode .timer-display-solo,
[data-theme="light"] body.zen-fullscreen-mode .timer-display-solo.hg-integrated-display { color: #172033 !important; }
[data-theme="light"] body.zen-fullscreen-mode .hg-dot { background: rgba(23, 32, 51, .12) !important; }
[data-theme="light"] body.zen-fullscreen-mode .hg-dot.active { background: #172033 !important; }

/* ============================================================
   ELITE GROUP SUITE: TOPBAR BUTTON, CREATE GROUP & GROUP SETTINGS
   ============================================================ */

/* Topbar: "+ GRUP OLUŞTUR" Button */
.msg-header-group-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.msg-header-group-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}
.msg-header-group-btn:active {
  transform: scale(0.97) !important;
}
[data-theme="light"] .msg-header-group-btn {
  background: #f1f3f5 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #111 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Modals Common Sheets: Linear / Apple Dark Depth */
#createGroupModal .modal-sheet,
#groupDetailsModal .modal-sheet {
  background: #0D1117 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}
[data-theme="light"] #createGroupModal .modal-sheet,
[data-theme="light"] #groupDetailsModal .modal-sheet {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
}

.group-header-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
}
[data-theme="light"] .group-header-icon-box {
  background: #f1f3f5;
  border-color: rgba(0, 0, 0, 0.08);
  color: #111;
}

/* --- CREATE GROUP MODAL COMPONENTS --- */
.group-create-hero {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 10px 14px;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}
.group-create-avatar-badge {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.group-create-name-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--t-text-primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  padding: 0 !important;
}
.group-create-name-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.group-selected-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.group-selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.group-badge-counter {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.group-selected-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}
.group-user-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 3px 8px 3px 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.group-user-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}
.group-user-pill-remove {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: all 0.15s ease;
}
.group-user-pill-remove:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.group-search-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.group-search-box input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--t-text-primary) !important;
  border-radius: 12px !important;
  padding: 10px 14px 10px 36px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.group-search-box input:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04) !important;
}
.group-search-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.group-select-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}
.group-friend-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.group-friend-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}
.group-friend-card.selected {
  background: rgba(34, 197, 94, 0.08) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}
.group-check-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.group-friend-card.selected .group-check-indicator {
  background: #22c55e;
  border-color: #22c55e;
  color: #000;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

.group-create-footer {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.group-submit-btn {
  width: 100% !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  padding: 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.group-submit-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px) !important;
}
.group-submit-btn:active {
  transform: scale(0.98) !important;
}
.group-submit-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* --- GROUP DETAILS MODAL COMPONENTS --- */
.group-hero-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
}
.group-hero-avatar-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.group-hero-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, #1f2937, #111827);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.group-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.group-avatar-camera-btn {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.group-avatar-camera-btn:hover {
  background: #2563eb;
  border-color: #60a5fa;
  transform: scale(1.1);
}

.group-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.group-hero-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.group-name-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--t-text-primary) !important;
  padding: 4px 0 !important;
}
.group-name-input:focus {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.group-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.group-icon-btn.primary {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
  color: #22c55e;
}
.group-icon-btn.primary:hover {
  background: #22c55e;
  color: #000;
  transform: scale(1.05);
}

.group-hero-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.group-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}
.group-invite-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.group-invite-copy-btn:hover {
  background: rgba(59, 130, 246, 0.16);
  border-color: #60a5fa;
}

/* Metric Stat Cards Grid */
.group-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.group-stat-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
}
.group-stat-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.group-stat-val {
  font-size: 14px;
  font-weight: 900;
  color: var(--t-text-primary);
  font-family: monospace;
  letter-spacing: -0.02em;
}

/* Settings Sections & Segmented Chips */
.group-setting-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.group-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.group-disappearing-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.group-chip-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.group-chip-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.group-chip-btn.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

/* Members Leaderboard */
.group-members-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.group-member-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.group-member-row:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}
.group-rank-badge {
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 6px;
  min-width: 22px;
  text-align: center;
  display: inline-block;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.4);
}
.group-rank-badge.rank-1 {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.group-rank-badge.rank-2 {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.group-rank-badge.rank-3 {
  background: rgba(217, 119, 6, 0.15);
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, 0.3);
}

.group-admin-badge {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
}

.group-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.group-action-mini-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.group-action-mini-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.group-action-mini-btn.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* Add Member Dropdown */
.group-add-results-dropdown {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  background: #161B22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.group-add-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.15s ease;
}
.group-add-result-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Danger Zone Footer */
.group-actions-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.group-footer-btn {
  flex: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.group-footer-btn.danger-subtle {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}
.group-footer-btn.danger-subtle:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}
.group-footer-btn.danger-bold {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}
.group-footer-btn.danger-bold:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}

/* ============================================================
   LOBBY / FOCUS ROOMS DISCORD-LIKE DESKTOP APPLICATION STYLES
   ============================================================ */

/* Main layout containers */
.lobby-meta {
  font-size: 12px;
  color: var(--t-text-muted);
  margin-bottom: 16px;
}

.lobby-meta strong {
  color: var(--t-text-primary);
}

.lobby-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--t-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  margin-top: 14px;
}

/* Members Grid & Cards */
.lobby-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.lobby-member-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  background-color: var(--t-bg-input);
  border: 1px solid transparent;
  box-sizing: border-box;
}

.lobby-member-card:hover {
  background-color: var(--t-bg-card-hover);
  border-color: var(--t-accent-primary);
}

.lobby-member-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lobby-member-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lobby-self-tag {
  font-size: 9.5px;
  color: var(--t-text-muted);
  font-weight: 400;
}

.lobby-member-status {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.lobby-member-card.active .lobby-member-status {
  color: #23a55a;
}

.lobby-member-card.idle .lobby-member-status {
  color: var(--t-text-muted);
}

/* Actions Container */
.lobby-actions-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lobby-focus-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13.5px;
  padding: 10px 16px;
  width: 100%;
  font-weight: 800;
  border-radius: 8px;
  border: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--t-accent-primary) !important;
  color: var(--text) !important;
  box-shadow: 0 4px 12px rgba(108, 99, 255, 0.2);
}

.lobby-focus-btn:hover {
  background: var(--t-accent-primary-hover, #5b52f6) !important;
  box-shadow: 0 6px 18px rgba(108, 99, 255, 0.35);
  transform: translateY(-1px);
}

.lobby-focus-btn svg {
  stroke: #ffffff !important;
  fill: none !important;
}

/* Invite Row */
.lobby-invite-box {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 6px;
  border-radius: 10px;
  background: var(--t-bg-input);
  border: 1px solid transparent;
  box-sizing: border-box;
}

.lobby-invite-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 4px 6px 4px 10px;
  border-radius: 6px;
  background: var(--t-bg-card);
  border: 1px solid transparent;
  min-width: 0;
}

.lobby-invite-input-wrap svg {
  color: var(--t-text-muted);
  flex-shrink: 0;
}

.lobby-invite-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--t-text-primary) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

.lobby-copy-btn {
  background: var(--t-accent-primary) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  border-radius: 4px !important;
  border: none !important;
  cursor: pointer;
  transition: opacity 0.15s;
}

.lobby-copy-btn:hover {
  opacity: 0.9;
}

.lobby-icon-btn {
  background: var(--t-bg-input) !important;
  color: var(--t-text-secondary) !important;
  border: 1px solid var(--t-border-subtle) !important;
  border-radius: 6px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.lobby-icon-btn:hover {
  background: var(--t-bg-card-hover) !important;
  color: var(--t-text-primary) !important;
  border-color: var(--t-accent-primary) !important;
}

.lobby-icon-btn.danger {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

.lobby-icon-btn.danger:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
  border-color: #ef4444 !important;
}

.lobby-icon-btn svg {
  stroke: currentColor !important;
  fill: none !important;
}

/* Search and Friends Box */
.lobby-search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background-color: var(--t-bg-input) !important;
  border: 1px solid transparent !important;
  border-radius: 8px;
  color: var(--t-text-primary) !important;
  font-size: 12.5px;
  box-sizing: border-box;
  outline: none;
  margin-bottom: 6px;
}

.lobby-search-input:focus {
  border-color: var(--t-accent-primary) !important;
}

.lobby-friends-list {
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background-color: var(--t-bg-input);
  border: 1px solid transparent;
  border-radius: 8px;
}

/* ============================================================
   DEDICATED PARTY CREATE MODAL STYLES (BLUNK ODASI - CENTERED)
   ============================================================ */
.party-create-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 1000500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px;
  box-sizing: border-box;
}

[data-theme="light"] .party-create-modal-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
}

.party-create-modal-overlay.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.party-create-modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--t-bg-card, #111218);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.09));
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  transform: scale(0.95) translateY(12px);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.party-create-modal-overlay.open .party-create-modal-card {
  transform: scale(1) translateY(0);
}

.party-create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  background: var(--t-bg-card, #111218);
  border-bottom: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.06));
}

.party-create-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.party-create-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  color: var(--t-text-primary, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.party-create-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--t-text-primary, #ffffff);
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.party-create-subtitle {
  font-size: 11px;
  color: var(--t-text-muted, #80848e);
  margin-top: 2px;
}

.party-create-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.06));
  color: var(--t-text-muted, #80848e);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.party-create-close-btn:hover {
  background: var(--t-bg-card-hover, rgba(255, 255, 255, 0.1));
  color: var(--t-text-primary, #ffffff);
}

.party-create-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(85vh - 160px);
  overflow-y: auto;
  box-sizing: border-box;
}

.party-create-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.party-create-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.party-create-label-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.party-create-label,
.party-create-label-text {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t-text-secondary, #dbdee1);
  letter-spacing: 0.5px;
}

.party-create-label-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--t-text-muted, #80848e);
}

.party-create-search-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  color: var(--t-text-muted, #949ba4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.party-create-search-btn:hover {
  background: var(--t-bg-card-hover, rgba(255, 255, 255, 0.1));
  color: var(--t-text-primary, #ffffff);
}

.party-create-search-box {
  width: 100%;
  margin-bottom: 2px;
}

.party-create-friend-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  background: var(--t-bg-input, #0a0b0d);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  color: var(--t-text-primary, #f2f3f5);
  font-size: 12px;
  outline: none;
  transition: all 0.15s ease;
}

.party-create-friend-search-input:focus {
  border-color: var(--t-accent-primary, #a855f7);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15);
}

.party-create-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.party-create-input-icon {
  position: absolute;
  left: 14px;
  color: var(--t-text-muted, #80848e);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.party-create-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px 11px 40px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  color: var(--t-text-primary, #f2f3f5);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.party-create-input:focus {
  border-color: var(--t-accent-primary, #a855f7);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

/* Tabs & Segmented Control */
.party-modal-tabs-wrap {
  padding: 14px 20px 0;
  background: var(--t-bg-card, #0d1117);
}

.party-modal-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.06));
  border-radius: 12px;
}

.party-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--t-text-muted, rgba(255, 255, 255, 0.5));
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.party-tab-btn:hover {
  color: var(--t-text-primary, #ffffff);
  background: rgba(255, 255, 255, 0.04);
}

.party-tab-btn.active {
  background: var(--t-bg-card, #161b22);
  border-color: var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Join Tab Controls */
.party-code-input {
  letter-spacing: 1px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.party-paste-btn {
  position: absolute;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 8px;
  color: #c084fc;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.party-paste-btn:hover {
  background: rgba(168, 85, 247, 0.22);
  color: #e9d5ff;
}

.party-join-hint-box {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(168, 85, 247, 0.05);
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: 12px;
  color: var(--t-text-secondary, rgba(255, 255, 255, 0.7));
  font-size: 12px;
  line-height: 1.45;
}

.party-create-privacy-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.025));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.07));
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.party-create-privacy-card:hover {
  background: var(--t-bg-card-hover, rgba(255, 255, 255, 0.045));
  border-color: var(--t-border-strong, rgba(255, 255, 255, 0.12));
}

.party-create-privacy-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.party-create-privacy-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.party-create-privacy-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-text-primary, #ffffff);
  line-height: 1.2;
}

.party-create-privacy-desc {
  font-size: 11px;
  color: var(--t-text-muted, #80848e);
  margin-top: 2px;
  line-height: 1.35;
}

/* Custom Switch Toggle */
.party-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  flex-shrink: 0;
}

.party-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.party-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--t-bg-card, #2b2d31);
  transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 24px;
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
}

.party-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 50%;
}

.party-switch input:checked + .party-slider {
  background-color: var(--t-accent-primary, #a855f7);
  border-color: var(--t-accent-primary, #a855f7);
}

.party-switch input:checked + .party-slider:before {
  transform: translateX(20px);
}

/* Friends Invitation Scroll Area */
.party-create-friends-scroll {
  max-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 5px;
  padding: 6px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.07));
  border-radius: 12px;
  box-sizing: border-box;
}

.party-create-friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: var(--t-bg-card, rgba(255, 255, 255, 0.015));
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.party-create-friend-row:hover {
  background: var(--t-bg-card-hover, rgba(255, 255, 255, 0.05));
  border-color: var(--t-border-subtle, rgba(255, 255, 255, 0.06));
}

.party-create-friend-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.party-create-friend-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

.party-create-friend-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-text-primary, #f2f3f5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.party-create-friend-status {
  font-size: 9.5px;
  color: var(--t-text-muted, #80848e);
}

.party-create-checkbox-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.party-create-checkbox-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.party-create-custom-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--t-bg-card, #18191c);
  border: 1.5px solid var(--t-border-strong, rgba(255, 255, 255, 0.18));
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.party-create-checkbox-wrap input[type="checkbox"]:checked + .party-create-custom-checkbox {
  background: var(--t-accent-primary, #a855f7);
  border-color: var(--t-accent-primary, #a855f7);
  color: #ffffff;
}

.party-create-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  background: var(--t-bg-card, #0d1117);
  border-top: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.06));
}

.party-create-btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  color: var(--t-text-secondary, rgba(255, 255, 255, 0.7));
  font-size: 13px;
  font-weight: 600;
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.party-create-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--t-text-primary, #ffffff);
}

.party-create-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.party-create-btn-submit:hover {
  background: linear-gradient(135deg, #b062f8 0%, #7e22ce 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.45);
}

.party-create-btn-submit:active {
  transform: translateY(0);
}

/* Light Theme for Party Create Modal */
[data-theme="light"] .party-create-modal-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .party-create-header,
[data-theme="light"] .party-modal-tabs-wrap,
[data-theme="light"] .party-create-footer {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .party-modal-tabs {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .party-tab-btn {
  color: rgba(0, 0, 0, 0.55) !important;
}

[data-theme="light"] .party-tab-btn:hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .party-tab-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .party-create-input,
[data-theme="light"] .party-create-friend-search-input {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

[data-theme="light"] .party-create-privacy-card {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .party-create-privacy-card:hover {
  background: #f1f5f9 !important;
}

[data-theme="light"] .party-create-privacy-title {
  color: #0f172a !important;
}

[data-theme="light"] .party-create-privacy-desc {
  color: #64748b !important;
}

[data-theme="light"] .party-create-friends-scroll {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .party-create-friend-row {
  background: #ffffff !important;
}

[data-theme="light"] .party-create-friend-row:hover {
  background: #f1f5f9 !important;
}

[data-theme="light"] .party-create-friend-name {
  color: #0f172a !important;
}

[data-theme="light"] .party-create-btn-cancel {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #475569 !important;
}

[data-theme="light"] .party-create-btn-cancel:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ==========================================
   MOBILE FULLSCREEN VIEW
   ========================================== */
@media (max-width: 600px) {
  .party-create-modal-overlay {
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .party-create-modal-card {
    width: 100% !important;
    max-width: 440px !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px) !important;
    border-radius: 20px !important;
    border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1)) !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    margin: auto !important;
    overflow: hidden !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7) !important;
  }

  .party-create-header {
    padding: 16px 18px 14px !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .party-create-close-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    z-index: 10 !important;
  }

  .party-create-body {
    flex: 1 1 auto !important;
    max-height: none !important;
    padding: 16px 18px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .party-create-friends-scroll {
    max-height: 220px !important;
    min-height: 120px !important;
    overflow-y: auto !important;
  }

  .party-create-footer {
    flex-shrink: 0 !important;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
  }

  .party-create-btn-submit {
    max-width: 100% !important;
  }
}

.lobby-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background-color: var(--t-bg-input, #111218);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  margin-bottom: 8px;
  box-sizing: border-box;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.lobby-card:hover {
  background-color: var(--t-bg-card-hover, #181922);
  border-color: rgba(88, 101, 242, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.lobby-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.lobby-card-avatar-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-text-secondary, #949ba4);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.lobby-card:hover .lobby-card-avatar-badge {
  color: var(--t-accent-primary, #5865f2);
  background: rgba(88, 101, 242, 0.12);
  border-color: rgba(88, 101, 242, 0.35);
}

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

.lobby-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t-text-primary, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.lobby-card-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.lobby-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--t-text-muted, #949ba4);
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
}

.lobby-tag svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.lobby-tag-live {
  background: rgba(35, 165, 90, 0.15);
  color: #23a55a;
  font-weight: 600;
}

.lobby-tag-idle {
  background: rgba(255, 255, 255, 0.03);
  color: var(--t-text-muted, #949ba4);
}

.lobby-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #23a55a;
  box-shadow: 0 0 8px #23a55a;
  display: inline-block;
  animation: livePulse 2s infinite ease-in-out;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.lobby-card-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.lobby-avatar-stack {
  display: flex;
  align-items: center;
  padding-right: 2px;
}

.lobby-stacked-avatar {
  margin-left: -8px;
  position: relative;
  transition: transform 0.15s ease;
}

.lobby-stacked-avatar:first-child {
  margin-left: 0;
}

.lobby-stacked-avatar:hover {
  transform: translateY(-2px) scale(1.12);
  z-index: 20 !important;
}

.lobby-stacked-avatar .avatar {
  border: 2px solid var(--t-bg-input, #111218);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.lobby-avatar-overflow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--t-bg-surface, #232428);
  color: var(--t-text-secondary, #dbdee1);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--t-bg-input, #111218);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.lobby-join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--t-accent-primary, #5865f2);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(88, 101, 242, 0.3);
}

.lobby-join-btn:hover {
  background: #4752c4;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.45);
}

.lobby-join-btn:active {
  transform: translateY(0);
}

.lobby-join-btn svg {
  transition: transform 0.15s ease;
}

.lobby-join-btn:hover svg {
  transform: translateX(2px);
}

/* ==========================================
   DESKTOP TWO-COLUMN PANEL LAYOUT
   ========================================== */
.lobby-desktop-layout {
  display: flex;
  gap: 20px;
  width: 100%;
}

.lobby-left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lobby-right-panel {
  flex: 1.45;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--t-border-subtle);
  padding-left: 20px;
  min-width: 0;
}

/* Header Row & Title */
.lobby-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  width: 100%;
}

.lobby-title-text {
  font-size: 19px;
  font-weight: 900;
  color: var(--t-text-primary);
  text-transform: uppercase;
  word-break: break-word;
}

.lobby-title-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.lobby-title-btn {
  background: var(--t-bg-input) !important;
  color: var(--t-text-secondary) !important;
  border: 1px solid var(--t-border-subtle) !important;
  border-radius: 6px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: all 0.15s;
}

.lobby-title-btn:hover {
  background: var(--t-bg-card-hover) !important;
  color: var(--t-text-primary) !important;
  border-color: var(--t-accent-primary) !important;
}

.lobby-title-btn svg {
  stroke: currentColor !important;
  fill: none !important;
}

/* Welcome Dashboard Styles */
.lobby-welcome-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.lobby-welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  width: 100%;
}

.lobby-welcome-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--t-bg-input);
  border: 1px solid transparent;
  box-sizing: border-box;
}

.lobby-welcome-card:hover {
  transform: translateY(-2px);
  border-color: var(--t-accent-primary);
  background-color: var(--t-bg-card-hover);
  box-shadow: 0 8px 24px rgba(108, 99, 255, 0.08);
}

.lobby-welcome-card.create:hover {
  background: rgba(108, 99, 255, 0.03);
}

.lobby-welcome-card.join:hover {
  background: rgba(35, 165, 90, 0.03);
}

.lobby-welcome-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lobby-welcome-card.create .lobby-welcome-icon {
  background: rgba(108, 99, 255, 0.1);
  color: var(--t-accent-primary);
}

.lobby-welcome-card.join .lobby-welcome-icon {
  background: rgba(35, 165, 90, 0.1);
  color: #23a55a;
}

.lobby-welcome-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lobby-welcome-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--t-text-primary);
}

.lobby-welcome-desc {
  font-size: 11px;
  color: var(--t-text-muted);
  line-height: 1.35;
}

.lobby-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--t-text-secondary);
  cursor: pointer;
  margin-top: 4px;
}

.lobby-form-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Responsiveness for small viewports */
@media (max-width: 768px) {
  .lobby-desktop-layout {
    flex-direction: column;
    gap: 16px;
  }
  .lobby-right-panel {
    border-left: none;
    padding-left: 0;
    margin-top: 12px;
    border-top: 1px solid var(--t-border-subtle);
    padding-top: 16px;
  }
}

/* Friend list rows inside Friends tab & Modals */
.lobby-friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background-color: var(--t-bg-card, #111218);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  transition: all 0.18s ease;
  box-sizing: border-box;
  margin-bottom: 6px;
}

.lobby-friend-row:hover {
  background-color: var(--t-bg-card-hover, #181922);
  border-color: var(--t-border-strong, rgba(255, 255, 255, 0.16));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

.lobby-friend-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lobby-friend-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lobby-friend-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-text-primary, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.lobby-friend-level {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.08));
  color: var(--t-text-muted, #80848e);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.06));
}

.lobby-friend-status-text {
  font-size: 10.5px;
  color: var(--t-text-muted, #80848e);
  display: flex;
  align-items: center;
}

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

.friend-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  white-space: nowrap;
  height: 30px;
  box-sizing: border-box;
}

.friend-action-btn.secondary {
  background: var(--t-bg-input, #181920);
  color: var(--t-text-secondary, #c5c6c7);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
}

.friend-action-btn.secondary:hover {
  background: var(--t-bg-card-hover, #222434);
  color: var(--t-text-primary, #ffffff);
  border-color: var(--t-border-strong, rgba(255, 255, 255, 0.18));
}

.friend-action-btn.primary {
  background: var(--t-accent-primary, #5865f2);
  color: #ffffff;
}

.friend-action-btn.primary:hover {
  background: #4752c4;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(88, 101, 242, 0.35);
}

.friend-action-btn.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.friend-action-btn.danger:hover {
  background: #ef4444;
  color: #ffffff;
}

/* ============================================================
   TWITTER-STYLE FEED TIMELINE & TWEET CARDS
   ============================================================ */

.twitter-feed-timeline,
.feed-list {
  max-width: 600px !important;
  width: 100% !important;
  margin: 0 auto !important;
  border-left: 1px solid var(--t-border-subtle) !important;
  border-right: 1px solid var(--t-border-subtle) !important;
  min-height: 40vh;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

@media (max-width: 600px) {
  .twitter-feed-timeline,
  .feed-list {
    border-left: none !important;
    border-right: none !important;
  }
}

.tweet-card {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-bottom: 1px solid var(--t-border-subtle);
  background-color: var(--t-bg-app);
  transition: background-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.tweet-card:hover {
  background-color: var(--t-bg-card-hover);
}

.tweet-repost-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 6px 36px;
  font-size: 13px;
  font-weight: 700;
  color: var(--t-text-muted, #71767b);
  line-height: 1.2;
}

.tweet-repost-banner-icon {
  color: var(--t-text-muted, #71767b);
  flex-shrink: 0;
}

.tweet-repost-banner-text {
  cursor: pointer;
  transition: color 0.15s ease;
}

.tweet-repost-banner-text:hover {
  text-decoration: underline;
  color: var(--t-text-primary, #ffffff);
}

.tweet-main-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.tweet-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  align-self: flex-start;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tweet-avatar img,
.tweet-avatar .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  transition: opacity 0.2s;
}

.tweet-avatar:hover img,
.tweet-avatar:hover .avatar {
  opacity: 0.8;
}

.tweet-content-wrapper {
  flex: 1;
  min-width: 0; /* Prevents overflow */
}

.tweet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 14px;
}

.tweet-header-user {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tweet-delete-btn {
  background: transparent;
  border: none;
  color: var(--t-text-muted, #8a9099);
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
  transition: color 0.15s, background-color 0.15s;
}

.tweet-delete-btn:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

.tweet-author-name {
  font-weight: 700;
  color: var(--t-text-primary);
  white-space: nowrap;
}

.tweet-author-name:hover {
  text-decoration: underline;
}

.tweet-author-handle {
  color: var(--t-text-muted);
  font-weight: 400;
  white-space: nowrap;
}

.tweet-dot-separator {
  color: var(--t-text-muted);
}

.tweet-time {
  color: var(--t-text-muted);
  white-space: nowrap;
}

.tweet-time:hover {
  text-decoration: underline;
}

.tweet-body {
  font-size: 15px;
  color: var(--t-text-primary);
  line-height: 1.5;
  margin-bottom: 12px;
  word-wrap: break-word;
}

.tweet-text {
  margin-bottom: 12px;
}

.tweet-text span[onclick] {
  text-decoration: none;
}

.tweet-text span[onclick]:hover {
  text-decoration: underline;
}

.tweet-media-container {
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tweet-media {
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  display: block;
}

.tweet-video-wrapper {
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
}

/* ─── BLUNK CUSTOM TWITTER (X) STYLE VIDEO PLAYER ─── */
.blunk-video-player {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: #000000;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  aspect-ratio: 16 / 9;
  transition: aspect-ratio 0.25s ease, max-height 0.25s ease;
}

.blunk-video-player .blunk-video-element {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  background: #000000;
  display: block;
  cursor: pointer;
}

/* Fullscreen Mode Optimization */
.blunk-video-player:fullscreen,
.blunk-video-player:-webkit-full-screen,
.blunk-video-player:-moz-full-screen,
.blunk-video-player.is-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  aspect-ratio: unset !important;
  border-radius: 0 !important;
  border: none !important;
  background: #000000 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.blunk-video-player:fullscreen .blunk-video-element,
.blunk-video-player:-webkit-full-screen .blunk-video-element,
.blunk-video-player:-moz-full-screen .blunk-video-element,
.blunk-video-player.is-fullscreen .blunk-video-element {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

.blunk-video-player:fullscreen .blunk-video-overlay-layer,
.blunk-video-player:-webkit-full-screen .blunk-video-overlay-layer,
.blunk-video-player:-moz-full-screen .blunk-video-overlay-layer,
.blunk-video-player.is-fullscreen .blunk-video-overlay-layer {
  padding: 24px 32px 32px 32px;
}

.blunk-video-player:fullscreen .blunk-video-scrub-bar,
.blunk-video-player:-webkit-full-screen .blunk-video-scrub-bar,
.blunk-video-player:-moz-full-screen .blunk-video-scrub-bar,
.blunk-video-player.is-fullscreen .blunk-video-scrub-bar {
  height: 5px;
}

/* Center Play/Pause Splash */
.blunk-video-center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(15, 20, 25, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease, background 0.15s ease;
  pointer-events: auto;
}

.blunk-video-center-btn:hover {
  background: rgba(29, 155, 240, 0.85);
  transform: translate(-50%, -50%) scale(1.08);
}

.blunk-video-player.playing .blunk-video-center-btn {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}

.blunk-video-player.playing:hover .blunk-video-center-btn {
  opacity: 0.85;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Floating Overlay Layer (Twitter/X Style) */
.blunk-video-overlay-layer {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 12px 14px 16px 14px;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.25s ease;
}

.blunk-video-player.playing:not(:hover) .blunk-video-overlay-layer {
  opacity: 0;
}

/* Bottom-Left Time Pill */
.blunk-video-time-pill {
  pointer-events: auto;
  background: rgba(15, 20, 25, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 4px 9px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.blunk-video-time {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* Bottom-Right Corner Action Buttons */
.blunk-video-corner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.blunk-x-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 20, 25, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.blunk-x-btn:hover {
  background: rgba(29, 155, 240, 0.85);
  transform: scale(1.1);
  color: #ffffff;
}

/* Bottom Edge Sleek Progress Scrub Bar */
.blunk-video-scrub-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  z-index: 6;
  transition: height 0.15s ease;
}

.blunk-video-player:hover .blunk-video-scrub-bar,
.blunk-video-scrub-bar:hover {
  height: 6px;
}

.blunk-video-progress-buffer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.35);
  width: 0%;
  transition: width 0.2s ease;
}

.blunk-video-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #1d9bf0, #38bdf8);
  width: 0%;
}

.blunk-video-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%) scale(0);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(29, 155, 240, 0.9), 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.blunk-video-scrub-bar:hover .blunk-video-progress-thumb {
  transform: translate(-50%, -50%) scale(1);
}

.tweet-actions-bar {
  display: flex;
  justify-content: space-between;
  max-width: 425px;
  margin-top: 4px;
}

.tweet-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--t-text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.tweet-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.tweet-action-btn.reply:hover {
  color: #1d9bf0;
}
.tweet-action-btn.reply:hover .tweet-icon-wrap {
  background-color: rgba(29, 155, 240, 0.1);
}

.tweet-action-btn.repost:hover, .tweet-action-btn.repost.reposted {
  color: #00ba7c;
}
.tweet-action-btn.repost:hover .tweet-icon-wrap {
  background-color: rgba(0, 186, 124, 0.1);
}
.tweet-action-btn.repost.reposted svg {
  stroke: #00ba7c;
}

.tweet-action-btn.like:hover, .tweet-action-btn.like.liked {
  color: #f91880;
}
.tweet-action-btn.like:hover .tweet-icon-wrap {
  background-color: rgba(249, 24, 128, 0.1);
}
.tweet-action-btn.like.liked svg {
  fill: #f91880 !important;
  stroke: #f91880 !important;
}

.tweet-action-btn.bookmark:hover, .tweet-action-btn.bookmark.bookmarked {
  color: #1d9bf0;
}
.tweet-action-btn.bookmark:hover .tweet-icon-wrap {
  background-color: rgba(29, 155, 240, 0.1);
}
.tweet-action-btn.bookmark.bookmarked svg {
  fill: #1d9bf0 !important;
  stroke: #1d9bf0 !important;
}

.tweet-action-btn.share:hover {
  color: #1d9bf0;
}
.tweet-action-btn.share:hover .tweet-icon-wrap {
  background-color: rgba(29, 155, 240, 0.1);
}

#sharePostModal {
  z-index: 10000005 !important;
}

/* Simple Media Lightbox */
.media-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000060 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.media-lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lightbox-close-btn:hover {
  background: rgba(255,255,255,0.2);
}

.lightbox-counter {
  position: absolute;
  top: 24px;
  left: 24px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  z-index: 10000070;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000070;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-nav-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-50%) scale(1.08);
}

.lightbox-nav-btn.prev {
  left: 24px;
}

.lightbox-nav-btn.next {
  right: 24px;
}

@media (max-width: 600px) {
  .lightbox-nav-btn {
    width: 40px;
    height: 40px;
  }
  .lightbox-nav-btn.prev {
    left: 12px;
  }
  .lightbox-nav-btn.next {
    right: 12px;
  }
  .lightbox-counter {
    top: 16px;
    left: 16px;
    font-size: 12px;
    padding: 4px 10px;
  }
  .lightbox-close-btn {
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
  }
}

/* ============================================================
   THREADS-STYLE DEDICATED FULL SEARCH MODAL STYLES
   ============================================================ */
.threads-search-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000020 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  background-color: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 32px 16px !important;
  box-sizing: border-box !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease !important;
}

.threads-search-modal.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.modal-open #feedPage,
body.modal-open .unified-feed-header {
  pointer-events: none !important;
}

.threads-search-card {
  width: 100%;
  max-width: 600px;
  background: var(--t-bg-card, #111216);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  transform: scale(0.96) translateY(-10px);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.threads-search-modal.open .threads-search-card {
  transform: scale(1) translateY(0);
}

.threads-search-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.07));
  background: var(--t-bg-card, #111216);
  flex-shrink: 0;
}

.threads-search-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--t-text-muted, #90939c);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  padding: 0;
}

.threads-search-back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.threads-search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  padding: 0 14px;
  height: 44px;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.threads-search-input-wrap:focus-within {
  background: var(--t-bg-input-focus, rgba(255, 255, 255, 0.08));
  border-color: var(--t-accent-primary, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.threads-search-icon {
  color: var(--t-text-muted, #7c8089);
  flex-shrink: 0;
}

#threadsSearchInput,
.threads-search-input,
.threads-search-input-wrap input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  color: var(--t-text-primary, #ffffff) !important;
  font-size: 14.5px;
  font-weight: 500;
  font-family: inherit;
  padding: 0;
  margin: 0;
}

#threadsSearchInput:focus,
.threads-search-input:focus,
.threads-search-input-wrap input:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.threads-search-input::placeholder,
.threads-search-input-wrap input::placeholder {
  color: var(--t-text-muted, #7c8089);
}

.threads-search-clear-btn {
  background: transparent;
  border: none;
  color: var(--t-text-muted, #8b8e97);
  cursor: pointer;
  font-size: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  padding: 0;
}

.threads-search-clear-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.threads-search-tabs {
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.07));
  gap: 24px;
  background: var(--t-bg-card, #111216);
  flex-shrink: 0;
}

.threads-search-tab {
  background: transparent;
  border: none;
  padding: 12px 2px;
  color: var(--t-text-muted, #8b8e97);
  font-size: 13.5px;
  font-weight: 750;
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
  letter-spacing: 0.2px;
}

.threads-search-tab:hover {
  color: var(--t-text-primary, #ffffff);
}

.threads-search-tab.active {
  color: var(--t-text-primary, #ffffff);
}

.threads-search-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--t-accent-primary, #8b5cf6);
  border-radius: 3px 3px 0 0;
}

.threads-search-content {
  padding: 16px 18px 24px 18px;
  max-height: calc(85vh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

.threads-trending-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.threads-search-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

.threads-search-heading {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--t-text-muted, #7c8089);
}

.threads-trending-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.threads-trending-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
}

.threads-trending-chip:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.35);
  transform: translateY(-1px);
}

.threads-trending-chip-tag {
  color: var(--t-text-primary, #ffffff);
  font-size: 13.5px;
  font-weight: 700;
}

.threads-trending-chip-count {
  color: var(--t-text-muted, #8b8e97);
  font-size: 11.5px;
}

.threads-search-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.threads-users-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.threads-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: transparent;
  transition: background 0.15s ease;
}

.threads-user-card:hover {
  background: var(--t-bg-hover, rgba(255, 255, 255, 0.04));
}

.threads-user-info-side {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  cursor: pointer;
}

.threads-user-avatar-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.threads-user-avatar-wrap .avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.threads-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid var(--t-bg-card, #111216);
}

.threads-user-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.threads-user-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.threads-user-handle {
  font-size: 14px;
  font-weight: 750;
  color: var(--t-text-primary, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.threads-user-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 800;
}

.threads-user-bio {
  font-size: 12.5px;
  color: var(--t-text-muted, #8b8e97);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.threads-user-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--t-text-muted, #7c8089);
}

.threads-online-text {
  color: #10b981;
  font-weight: 600;
}

.threads-follow-btn {
  border: 0;
  border-radius: 999px;
  padding: 7px 16px;
  background: var(--t-text-primary, #ffffff);
  color: #0b0c0e;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.threads-follow-btn:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

.threads-follow-btn.following {
  background: transparent;
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.2));
  color: var(--t-text-primary, #ffffff);
}

.threads-follow-btn.following:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.threads-posts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.threads-post-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.07));
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.threads-post-card:hover {
  background: var(--t-bg-hover, rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.threads-post-card-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.threads-post-card-avatar .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.threads-post-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.threads-post-card-username {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--t-text-primary, #ffffff);
}

.threads-post-card-time {
  font-size: 11.5px;
  color: var(--t-text-muted, #7c8089);
}

.threads-post-card-text {
  font-size: 13.5px;
  color: var(--t-text-primary, #e2e4e9);
  line-height: 1.42;
  word-break: break-word;
}

.threads-post-card-media-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  max-height: 380px;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.threads-post-card-media {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  display: block;
}

.threads-video-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.threads-post-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--t-text-muted, #7c8089);
  font-weight: 600;
  margin-top: 2px;
}

/* Responsive Mobile Layout for Threads Search Modal */
@media (max-width: 640px) {
  .threads-search-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .threads-search-card {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 94dvh !important;
    max-height: 94dvh !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: none !important;
    transform: translateY(100%) !important;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
  }

  .threads-search-modal.open .threads-search-card {
    transform: translateY(0) !important;
  }

  .threads-search-content {
    max-height: calc(94dvh - 120px) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important;
  }
}

/* Light Theme Support for Search Modal */
[data-theme="light"] .threads-search-modal {
  background: rgba(255, 255, 255, 0.6) !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="light"] .threads-search-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .threads-search-topbar {
  background: #ffffff;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .threads-search-tabs {
  background: #ffffff;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .threads-search-input-wrap {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.09);
}

[data-theme="light"] .threads-search-input {
  color: #111216 !important;
}

[data-theme="light"] .threads-search-tab {
  color: #6a6f7b;
}

[data-theme="light"] .threads-search-tab.active {
  color: #111216;
}

[data-theme="light"] .threads-follow-btn {
  background: #111216;
  color: #ffffff;
}

[data-theme="light"] .threads-post-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .threads-post-card:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

/* ============================================================
   BLUNK INTERACTIVE USER HOVERCARD (POPOVER) STYLES
   ============================================================ */

.blunk-hovercard-popover {
  position: fixed;
  z-index: 10000020 !important;
  width: 320px;
  background: var(--t-bg-card, #111218);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.blunk-hovercard-popover.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.tweet-mention {
  color: var(--t-accent-primary, #6366f1);
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  transition: opacity 0.15s ease;
}

.tweet-mention:hover {
  text-decoration: underline;
  opacity: 0.85;
}

[data-theme="light"] .blunk-hovercard-popover {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--t-border-subtle, rgba(108, 99, 255, 0.15));
  box-shadow: 0 20px 48px rgba(108, 99, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.blunk-hovercard-inner {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}

/* Top Section: Avatar & Action */
.blunk-hovercard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.blunk-hovercard-avatar-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  cursor: pointer;
}

.blunk-hovercard-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--t-border-subtle, rgba(255, 255, 255, 0.12));
  transition: transform 0.2s ease, opacity 0.2s ease;
  box-sizing: border-box;
}

.blunk-hovercard-avatar.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.blunk-hovercard-avatar.avatar .avatar-initials {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff !important;
}

.blunk-hovercard-avatar-wrap:hover .blunk-hovercard-avatar {
  transform: scale(1.04);
  opacity: 0.92;
}

.blunk-hovercard-online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #10b981;
  border: 2.5px solid var(--t-bg-card, #111218);
  border-radius: 50%;
}

[data-theme="light"] .blunk-hovercard-online-dot {
  border-color: #ffffff;
}

/* Self Tag */
.blunk-hovercard-self-tag {
  display: inline-block;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--t-text-muted, #8a9099);
  background: var(--t-bg-input, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 20px;
}

/* Follow Button */
.blunk-hovercard-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  background: var(--t-text-primary, #ffffff);
  color: var(--t-text-inverse, #08090c);
}

.blunk-hovercard-follow-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.blunk-hovercard-follow-btn .btn-text-following,
.blunk-hovercard-follow-btn .btn-text-unfollow {
  display: none;
}

.blunk-hovercard-follow-btn.following {
  background: transparent;
  color: var(--t-text-primary, #ffffff);
  border-color: var(--t-border-strong, rgba(255, 255, 255, 0.25));
}

.blunk-hovercard-follow-btn.following .btn-text-follow {
  display: none;
}

.blunk-hovercard-follow-btn.following .btn-text-following {
  display: inline;
}

.blunk-hovercard-follow-btn.following:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}

.blunk-hovercard-follow-btn.following:hover .btn-text-following {
  display: none;
}

.blunk-hovercard-follow-btn.following:hover .btn-text-unfollow {
  display: inline;
}

/* Identity Section */
.blunk-hovercard-identity {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.blunk-hovercard-name-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.blunk-hovercard-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--t-text-primary, #ffffff);
  line-height: 1.2;
}

.blunk-hovercard-name-row:hover .blunk-hovercard-name {
  text-decoration: underline;
}

.blunk-hovercard-verified-icon {
  flex-shrink: 0;
}

.blunk-hovercard-handle {
  font-size: 13px;
  font-weight: 500;
  color: var(--t-text-muted, #8a9099);
  cursor: pointer;
  margin-top: 2px;
}

.blunk-hovercard-handle:hover {
  text-decoration: underline;
}

/* Gamification Badges */
.blunk-hovercard-badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}

.blunk-hovercard-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  background: var(--t-bg-input, rgba(255, 255, 255, 0.05));
  color: var(--t-text-secondary, #c5c6c7);
}

.blunk-hovercard-badge.level-badge {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.3);
  color: #c084fc;
}

.blunk-hovercard-badge.level-badge .badge-accent {
  font-size: 9.5px;
  opacity: 0.8;
  letter-spacing: 0.5px;
}

.blunk-hovercard-badge.streak-badge {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.3);
  color: #fb923c;
}

/* Bio */
.blunk-hovercard-bio {
  font-size: 13px;
  color: var(--t-text-primary, #ffffff);
  line-height: 1.45;
  margin-bottom: 12px;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stats Bar */
.blunk-hovercard-stats-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  border-bottom: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  margin-bottom: 12px;
}

.blunk-hovercard-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.blunk-hovercard-stat:hover {
  opacity: 0.8;
}

.blunk-hovercard-stat .stat-value {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--t-text-primary, #ffffff);
}

.blunk-hovercard-stat .stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--t-text-muted, #8a9099);
}

/* Footer Action Buttons */
.blunk-hovercard-footer-actions {
  display: flex;
  gap: 8px;
}

.blunk-hovercard-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.blunk-hovercard-btn.secondary {
  background: var(--t-bg-input, rgba(255, 255, 255, 0.06));
  border-color: var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  color: var(--t-text-primary, #ffffff);
}

.blunk-hovercard-btn.secondary:hover {
  background: var(--t-bg-card-hover, rgba(255, 255, 255, 0.12));
}

.blunk-hovercard-btn.primary {
  background: var(--t-accent-gradient, linear-gradient(135deg, #6c63ff 0%, #a855f7 100%));
  color: #ffffff;
}

.blunk-hovercard-btn.primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* Skeleton Loading State */
.blunk-hovercard-inner.loading {
  pointer-events: none;
}

.blunk-hovercard-avatar-wrap.skeleton {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.08));
}

.blunk-hovercard-btn-skeleton.skeleton {
  width: 90px;
  height: 34px;
  border-radius: 20px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.08));
}

.blunk-hovercard-skeleton-line.skeleton {
  height: 12px;
  border-radius: 6px;
  background: var(--t-bg-input, rgba(255, 255, 255, 0.08));
}

.blunk-hovercard-skeleton-line.short {
  width: 60%;
}

.blunk-hovercard-skeleton-line.tiny {
  width: 40%;
}

.blunk-hovercard-skeleton-line.full {
  width: 100%;
  height: 24px;
}

/* ============================================================
   MESSAGE ACTIONS POPOVER & REACTION DETAILS
   ============================================================ */
#messageActionsModal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: opacity 0.15s ease;
}

[data-theme="light"] #messageActionsModal {
  background: rgba(0, 0, 0, 0.2) !important;
}

.msg-action-popover {
  position: absolute;
  width: 230px;
  background: rgba(18, 19, 24, 0.98);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 8px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 24px 64px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

#messageActionsModal.open .msg-action-popover {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.msg-reaction-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  gap: 4px;
}

.react-svg-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: #fff;
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.react-svg-btn:hover {
  transform: scale(1.25);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
}

.react-svg-btn:active {
  transform: scale(0.9);
}

.msg-popover-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 2px 4px;
}

.msg-action-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--t-text-primary, rgba(255, 255, 255, 0.85));
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  width: 100%;
}

.msg-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.msg-action-btn:active {
  background: rgba(255, 255, 255, 0.12);
}

.msg-action-btn.danger {
  color: #ef4444;
}

.msg-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.msg-action-btn svg {
  opacity: 0.65;
  transition: opacity 0.12s ease;
  color: currentColor;
}

.msg-action-btn:hover svg {
  opacity: 1;
}

/* Chat Message Row Highlighting / Glow Anim */
@keyframes msgGlow {
  0% {
    box-shadow: 0 0 0px transparent;
    background: transparent;
  }
  30% {
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.45);
    background: rgba(59, 130, 246, 0.1);
    border-radius: 14px;
  }
  100% {
    box-shadow: 0 0 0px transparent;
    background: transparent;
  }
}

.chat-msg-row-item.glow-highlight {
  animation: msgGlow 1.6s ease-in-out;
  border-radius: 14px;
}

/* ============================================================
   FORWARD TARGET MODAL & REACTION DETAILS STYLES (CENTERED)
   ============================================================ */
#forwardMessageModal.modal-overlay,
#reactionDetailsModal.modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px;
  box-sizing: border-box;
}

#forwardMessageModal .modal-sheet,
#reactionDetailsModal .modal-sheet {
  width: 100% !important;
  max-width: 400px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(18, 19, 24, 0.98) !important;
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 30px 80px rgba(0, 0, 0, 0.7);
  transform: scale(0.92) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
  margin: auto !important;
  padding-bottom: 0 !important;
  max-height: 82vh !important;
  display: flex;
  flex-direction: column;
}

#forwardMessageModal.open .modal-sheet,
#reactionDetailsModal.open .modal-sheet {
  transform: scale(1) !important;
}

#forwardMessageModal .modal-drag-handle,
#reactionDetailsModal .modal-drag-handle {
  display: none !important;
}

[data-theme="light"] #forwardMessageModal.modal-overlay,
[data-theme="light"] #reactionDetailsModal.modal-overlay {
  background: rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] #forwardMessageModal .modal-sheet,
[data-theme="light"] #reactionDetailsModal .modal-sheet {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 30px 80px rgba(0, 0, 0, 0.18) !important;
}

.forward-target-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.forward-target-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.forward-target-item:active {
  transform: translateY(0);
}

.forward-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #3b82f6;
  color: #ffffff;
  border: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  flex-shrink: 0;
}

.forward-action-btn:hover {
  background: #2563eb;
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.45);
}

.forward-action-btn:active {
  transform: scale(0.97);
}

/* ==========================================================================
   ULTIMATE ZEN FULLSCREEN ENFORCEMENTS
   Guarantees all nav bars, controls and footers are 100% hidden
   ========================================================================== */
body.zen-fullscreen-mode .bottom-nav,
body.zen-fullscreen-mode #bottomNav,
body.zen-fullscreen-mode nav.bottom-nav,
body.zen-fullscreen-mode .mobile-nav,
body.zen-fullscreen-mode .timer-controls,
body.zen-fullscreen-mode #timerControlsBar,
body.zen-fullscreen-mode footer,
body.zen-fullscreen-mode .navbar,
body.zen-fullscreen-mode nav {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* ============================================================
   ZEN MODE VOICE ROOM HUD (TOP-LEFT)
   ============================================================ */
.zen-voice-hud {
  position: fixed;
  top: max(20px, env(safe-area-inset-top, 20px));
  left: 24px;
  z-index: 2147483640;
  pointer-events: auto;
  user-select: none;
  animation: zen-hud-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes zen-hud-fade-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.zen-hud-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 20, 28, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 4px 12px 4px 5px !important;
  border-radius: 9999px !important;
  max-width: calc(100vw - 48px);
  overflow-x: auto;
  scrollbar-width: none;
}

[data-theme="light"] .zen-hud-container {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
}

.zen-hud-container::-webkit-scrollbar {
  display: none;
}

.zen-hud-member {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: opacity 0.16s ease;
  position: relative;
  cursor: pointer;
}

.zen-hud-member:hover {
  background: transparent !important;
  border: none !important;
  opacity: 0.8;
}

.zen-hud-avatar-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zen-hud-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zen-hud-avatar .avatar-initials {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff !important;
}

[data-theme="light"] .zen-hud-avatar {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.zen-hud-focus-badge {
  display: none !important;
}

.zen-hud-avatar-wrap .status-online-dot {
  position: absolute !important;
  bottom: -1px !important;
  right: -1px !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  border-radius: 50% !important;
  border: 2px solid #0f111a !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  box-shadow: none !important;
}

.zen-hud-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.zen-hud-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.2px;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .zen-hud-name {
  color: #172033 !important;
}

.zen-hud-activity {
  font-size: 10px;
  font-weight: 500;
  color: #c084fc;
  letter-spacing: -0.1px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .zen-hud-activity {
  color: #7c3aed !important;
}

/* Compact layout for 5+ members */
.zen-hud-container.is-compact {
  padding: 4px 8px !important;
  gap: 0 !important;
}

.zen-hud-container.is-compact .zen-hud-member {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin-left: -6px;
}

.zen-hud-container.is-compact .zen-hud-member:first-child {
  margin-left: 0;
}

.zen-hud-container.is-compact .zen-hud-avatar {
  border: 2px solid #0e101a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .zen-hud-container.is-compact .zen-hud-avatar {
  border-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.zen-hud-container.is-compact .zen-hud-member:hover {
  z-index: 5;
  transform: translateY(-2px) scale(1.08);
}

/* Speaking pulse */
@keyframes zen-speaker-pulse {
  0% {
    box-shadow: 0 0 0 2px #22c55e, 0 0 8px rgba(34, 197, 94, 0.5);
  }
  100% {
    box-shadow: 0 0 0 3.5px #22c55e, 0 0 18px rgba(34, 197, 94, 0.95);
  }
}

body:not(.zen-hide-speaking) .zen-hud-member.is-speaking .zen-hud-avatar,
body:not(.zen-hide-speaking) .zen-hud-avatar.is-speaking {
  box-shadow: 0 0 0 2px #22c55e, 0 0 14px rgba(34, 197, 94, 0.8) !important;
  border-color: #22c55e !important;
  animation: zen-speaker-pulse 0.8s ease-in-out infinite alternate !important;
}

@media (max-width: 768px) {
  .zen-voice-hud {
    top: max(16px, env(safe-area-inset-top, 16px));
    left: 16px;
  }
  .zen-hud-container {
    max-width: calc(100vw - 32px);
  }
}

/* Clean final language: dots define the vessels; there is no outline card. */
.timer-hourglass-frame .hg-diamond::before { display: none !important; }

/* The central axis cannot cross the large clock without looking like a beam.
   Zen therefore favors a silent, stable hourglass over a fake falling effect. */
body.zen-fullscreen-mode .hg-stream-channel,
body.zen-fullscreen-mode .falling-drop { display: none !important; }

/* Separate the two time groups deliberately: the time must never read as one blob. */
body.zen-fullscreen-mode #timerPage.active #timerDisplaySolo {
  gap: clamp(56px, 8vw, 150px) !important;
  letter-spacing: -0.035em !important;
}
body.zen-fullscreen-mode #timerPage.active #timerDisplaySolo .hg-digit-block {
  letter-spacing: -0.025em !important;
}
body.zen-fullscreen-mode #timerPage.active #timerDisplaySolo .hg-sec-group { margin-left: 0 !important; }

/* ========================================================================
   DIAMOND HOURGLASS
   Both chambers are complete 45-degree squares; dot state changes are staged
   from the throat/base, so a grain never appears to teleport across a bowl.
   ======================================================================== */
.timer-hourglass-frame .hg-diamond {
  position: relative;
  width: max-content;
  min-width: 74px;
  padding: 8px 10px;
  gap: 3px;
  isolation: isolate;
}
.timer-hourglass-frame .hg-diamond::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 13%;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 3px;
  transform: rotate(45deg);
  pointer-events: none;
}
.timer-hourglass-frame .hg-diamond .hg-row { gap: 5px; min-height: 5px; }
.timer-hourglass-frame .hg-diamond .hg-dot {
  width: 5px;
  height: 5px;
  opacity: .16;
  transform: translateY(0) scale(.7);
  transition: opacity 420ms cubic-bezier(.22,1,.36,1) var(--hg-delay, 0ms),
              transform 560ms cubic-bezier(.16,1,.3,1) var(--hg-delay, 0ms),
              background-color 280ms ease;
}
.timer-hourglass-frame .hg-chamber-top .hg-dot.active { opacity: 1; transform: translateY(0) scale(1); }
.timer-hourglass-frame .hg-chamber-top .hg-dot:not(.active) { opacity: .05; transform: translateY(5px) scale(.38); }
.timer-hourglass-frame .hg-chamber-bottom .hg-dot.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: hg-grain-settle 680ms cubic-bezier(.16,1,.3,1) both;
  animation-delay: var(--hg-delay, 0ms);
}
@keyframes hg-grain-settle {
  0% { opacity: 0; transform: translateY(-14px) scale(.28); }
  62% { opacity: 1; transform: translateY(2px) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* The two rotated squares visually meet at their points around the time. */
.timer-hourglass-frame .hg-chamber-top.hg-diamond { margin-bottom: -2px; }
.timer-hourglass-frame .hg-chamber-bottom.hg-diamond { margin-top: -2px; }
body.zen-fullscreen-mode:not(.zen-idle-clock) .hg-diamond::before { border-color: rgba(255,255,255,.16); }
body.zen-fullscreen-mode:not(.zen-idle-clock) .hg-diamond .hg-dot { width: 6px !important; height: 6px !important; }
[data-theme="light"] .timer-hourglass-frame .hg-diamond::before { border-color: rgba(23,32,51,.14); }

/* Final desktop fit: normal mode keeps every companion element inside its stage. */
@media (min-width: 768px) {
  body:not(.zen-fullscreen-mode) #timerPage.active .timer-main-stage {
    height: calc(100dvh - var(--nav-h, 64px) - 54px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--nav-h, 64px) - 54px) !important;
    padding: 14px 20px !important;
    overflow: hidden !important;
  }
  body:not(.zen-fullscreen-mode) #timerPage.active .timer-duel {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  body:not(.zen-fullscreen-mode) #timerPage.active .timer-solo {
    height: 100% !important;
    gap: clamp(5px, .9vh, 10px) !important;
    justify-content: center !important;
  }
  body:not(.zen-fullscreen-mode) #timerPage.active .timer-display-solo.hg-integrated-display { gap: clamp(22px, 3vw, 54px) !important; }
  body:not(.zen-fullscreen-mode) #timerPage.active .hg-digit-block { font-size: clamp(116px, 15vw, 268px) !important; }
  body:not(.zen-fullscreen-mode) #timerPage.active.timer-has-hours .hg-digit-block { font-size: clamp(104px, 13vw, 230px) !important; }
  body:not(.zen-fullscreen-mode) #timerPage.active .hg-digit-small { font-size: clamp(24px, 3vw, 52px) !important; }
  body:not(.zen-fullscreen-mode) #timerPage.active .hg-stream-channel { height: clamp(44px, 5vw, 82px) !important; }
  body:not(.zen-fullscreen-mode) #timerPage.active .hg-chamber { transform: scale(1.06) !important; }
}

/* Zen owns the whole viewport: the time gets the unused space, not its wrappers. */
@media (min-width: 768px) {
  body.zen-fullscreen-mode.zen-idle-clock #timerPage.active #timerDisplaySolo .hg-digit-block { font-size: min(30vw, 70dvh) !important; }
  body.zen-fullscreen-mode.zen-idle-clock.timer-has-hours #timerPage.active #timerDisplaySolo .hg-digit-block { font-size: min(26vw, 62dvh) !important; }
  body.zen-fullscreen-mode.zen-idle-clock #timerPage.active #timerDisplaySolo .hg-digit-small { font-size: min(6vw, 12dvh) !important; }
  body.zen-fullscreen-mode.zen-idle-clock #timerPage.active #timerDisplaySolo { gap: min(6vw, 10dvh) !important; }
}

/* Zen sand stream: a single calm grain falls from the upper throat to the lower one. */
body.zen-fullscreen-mode:not(.zen-idle-clock) .falling-drop {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.zen-fullscreen-mode .falling-drop::before,
body.zen-fullscreen-mode:not(.zen-idle-clock) .falling-drop::before,
body.zen-fullscreen-mode .falling-drop::after,
body.zen-fullscreen-mode:not(.zen-idle-clock) .falling-drop::after {
  display: none !important;
  content: none !important;
}
body.zen-fullscreen-mode:not(.zen-idle-clock) .falling-drop.is-dropping {
  animation: zen-sand-grain 1.25s cubic-bezier(.38, .02, .18, 1) infinite !important;
}
@keyframes zen-sand-grain {
  0% { opacity: 0; top: 0%; transform: translateX(-50%) scale(.6); }
  6% { opacity: 1; top: 2%; transform: translateX(-50%) scale(1); }
  94% { opacity: 1; top: 98%; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; top: 100%; transform: translateX(-50%) scale(.5); }
}
[data-theme="light"] body.zen-fullscreen-mode:not(.zen-idle-clock) .falling-drop { background: #172033 !important; box-shadow: none !important; }
body.zen-fullscreen-mode:not(.zen-idle-clock) .timer-hourglass-frame.is-break .falling-drop { background: #38bdf8 !important; box-shadow: none !important; }

/* Desktop has room: the time is the hero, both inside and outside Zen. */
@media (min-width: 768px) {
  #timerPage.active .timer-display-solo.hg-integrated-display { gap: clamp(28px, 4.5vw, 86px) !important; }
  #timerPage.active .hg-digit-block { font-size: clamp(150px, 22vw, 430px) !important; }
  #timerPage.active.timer-has-hours .hg-digit-block { font-size: clamp(128px, 18vw, 360px) !important; }
  #timerPage.active .hg-digit-small { font-size: clamp(30px, 4vw, 72px) !important; }
  #timerPage.active .hg-stream-channel { pointer-events: none !important; }
  #timerPage.active .hg-chamber { transform: scale(1.35); transform-origin: center; }

  body.zen-fullscreen-mode.zen-idle-clock .timer-display-solo,
  body.zen-fullscreen-mode.zen-idle-clock .timer-display-solo.hg-integrated-display { font-size: min(31vw, 64dvh) !important; }
  body.zen-fullscreen-mode.zen-idle-clock.timer-has-hours .timer-display-solo,
  body.zen-fullscreen-mode.zen-idle-clock.timer-has-hours .timer-display-solo.hg-integrated-display { font-size: min(26vw, 54dvh) !important; }
  body.zen-fullscreen-mode.zen-idle-clock .hg-digit-small { font-size: min(6vw, 12dvh) !important; }
}

/* ========================================================================
   CLOCK STAGE — MOBILE-FIRST FIT SYSTEM
   The timer, chambers and falling axis always live inside the visual viewport.
   ======================================================================== */
@media (max-width: 767px) {
  #timerPage.active {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  #timerPage.active .timer-main-stage {
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: calc(100dvh - var(--nav-h, 64px) - 48px) !important;
    padding: max(8px, env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom)) !important;
    gap: clamp(5px, 1.4dvh, 12px) !important;
    overflow: hidden !important;
  }

  .timer-real-clock { flex: 0 0 auto; }
  .timer-hourglass-frame { flex: 0 1 auto; min-height: 0; }
  .hg-chamber { transform: scale(1.22); transform-origin: center; }
  .hg-row { gap: clamp(3px, .9vw, 5px); }
  .hg-dot { width: clamp(4px, 1.1vw, 5px); height: clamp(4px, 1.1vw, 5px); }
  .timer-status-text { flex: 0 0 auto; }
  #timerAuxPanel { flex: 0 0 auto; }
}

/* Portrait: preserve the classic vertical hourglass while filling the screen. */
@media (max-width: 767px) and (orientation: portrait) {
  #timerPage.active .timer-main-stage { justify-content: center !important; }
  #timerPage.active .timer-hourglass-frame { gap: clamp(8px, 1.6dvh, 14px) !important; }
  #timerPage.active .timer-display-solo.hg-integrated-display { gap: clamp(12px, 4vw, 20px) !important; margin: 0 !important; }
  #timerPage.active .hg-digit-block { font-size: clamp(72px, 22vw, 108px) !important; }
  #timerPage.active.timer-has-hours .hg-digit-block { font-size: clamp(62px, 19vw, 92px) !important; }
  #timerPage.active .hg-digit-small { font-size: clamp(17px, 5.2vw, 26px) !important; }
  #timerPage.active .hg-stream-channel { height: clamp(42px, 12vw, 64px) !important; }
}

/* Landscape: no scaling tricks; constrain every element against short viewport height. */
@media (max-width: 767px) and (orientation: landscape) {
  #timerPage.active .timer-top-meta { display: none !important; }
  #timerPage.active .timer-main-stage {
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 4px calc(12px + env(safe-area-inset-left)) 6px calc(12px + env(safe-area-inset-right)) !important;
    gap: 2px !important;
  }
  #timerPage.active .timer-real-clock { font-size: 10px !important; line-height: 1 !important; }
  #timerPage.active .timer-hourglass-frame { gap: 3px !important; }
  #timerPage.active .hg-chamber { transform: scale(0.9) !important; }
  #timerPage.active .hg-row { gap: 3px; }
  #timerPage.active .hg-dot { width: 4px; height: 4px; }
  #timerPage.active .timer-display-solo.hg-integrated-display { gap: clamp(10px, 3.5vw, 24px) !important; margin: 0 !important; }
  #timerPage.active .hg-digit-block { font-size: clamp(44px, 20vh, 76px) !important; line-height: 0.88 !important; }
  #timerPage.active.timer-has-hours .hg-digit-block { font-size: clamp(38px, 16vh, 60px) !important; }
  #timerPage.active .hg-digit-small { font-size: clamp(14px, 7vh, 22px) !important; }
  #timerPage.active .hg-stream-channel { height: clamp(16px, 6vh, 28px) !important; }
  #timerPage.active .timer-status-text { font-size: 10px !important; line-height: 1.1 !important; }
  #timerPage.active #timerAuxPanel { display: none !important; }
}

/* In idle Zen, this becomes an undistracted full-screen clock — no fake sandglass. */
body.zen-fullscreen-mode.zen-idle-clock .timer-hourglass-frame > .hg-chamber,
body.zen-fullscreen-mode.zen-idle-clock .hg-stream-channel { display: none !important; }
body.zen-fullscreen-mode.zen-idle-clock .timer-hourglass-frame {
  height: 100dvh !important;
  width: 100vw !important;
  max-height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}
body.zen-fullscreen-mode.zen-idle-clock .timer-display-solo,
body.zen-fullscreen-mode.zen-idle-clock .timer-display-solo.hg-integrated-display {
  width: 100vw !important;
  font-size: min(29vw, 56dvh) !important;
  gap: min(7vw, 8dvh) !important;
  background: transparent !important;
}
body.zen-fullscreen-mode.zen-idle-clock.timer-has-hours .timer-display-solo,
body.zen-fullscreen-mode.zen-idle-clock.timer-has-hours .timer-display-solo.hg-integrated-display { font-size: min(23vw, 44dvh) !important; }

/* Focused Zen: retain a large, complete hourglass in either phone orientation. */
@media (max-width: 767px) {
  body.zen-fullscreen-mode .timer-main-stage { height: 100dvh !important; width: 100vw !important; padding: 0 !important; }
  body.zen-fullscreen-mode:not(.zen-idle-clock) .timer-hourglass-frame { width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; gap: clamp(8px, 2dvh, 18px) !important; }
  body.zen-fullscreen-mode:not(.zen-idle-clock) .hg-chamber { transform: scale(1.45) !important; }
  body.zen-fullscreen-mode:not(.zen-idle-clock) .timer-display-solo { font-size: min(25vw, 29dvh) !important; gap: min(7vw, 8dvh) !important; }
  body.zen-fullscreen-mode:not(.zen-idle-clock).timer-has-hours .timer-display-solo { font-size: min(19vw, 24dvh) !important; }
  body.zen-fullscreen-mode:not(.zen-idle-clock) .hg-digit-small { font-size: min(5vw, 7dvh) !important; }
}

@media (max-width: 767px) and (orientation: landscape) {
  body.zen-fullscreen-mode:not(.zen-idle-clock) .timer-hourglass-frame { gap: min(2dvh, 10px) !important; }
  body.zen-fullscreen-mode:not(.zen-idle-clock) .hg-chamber { transform: scale(1.12) !important; }
  body.zen-fullscreen-mode:not(.zen-idle-clock) .timer-display-solo { font-size: min(23vw, 27dvh) !important; }
  body.zen-fullscreen-mode.zen-idle-clock .timer-display-solo,
  body.zen-fullscreen-mode.zen-idle-clock .timer-display-solo.hg-integrated-display { font-size: min(24vw, 48dvh) !important; }
  body.zen-fullscreen-mode.zen-idle-clock.timer-has-hours .timer-display-solo,
  body.zen-fullscreen-mode.zen-idle-clock.timer-has-hours .timer-display-solo.hg-integrated-display { font-size: min(19vw, 40dvh) !important; }
}

/* ==========================================================================
   ZEN MODE ABSOLUTE HIDING & HUD SPECIFICITY OVERRIDES
   ========================================================================== */
body.zen-fullscreen-mode .bottom-nav,
body.zen-fullscreen-mode #bottomNav,
body.zen-fullscreen-mode nav.bottom-nav,
body.zen-fullscreen-mode .mobile-nav,
body.zen-fullscreen-mode .timer-controls,
body.zen-fullscreen-mode #timerControlsBar,
body.zen-fullscreen-mode #soloPartyControlsRow,
body.zen-fullscreen-mode #partyFocusOverlay,
body.zen-fullscreen-mode .party-focus-overlay,
body.zen-fullscreen-mode .party-focus-overlay.in-active-party,
body.zen-fullscreen-mode .party-focus-footer,
body.zen-fullscreen-mode footer,
body.zen-fullscreen-mode .navbar,
body.zen-fullscreen-mode nav {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  transform: translateY(100vh) !important;
}

#zenVoiceHud,
#zenRoomHud,
.zen-voice-hud,
.zen-room-hud {
  position: fixed !important;
  top: 24px !important;
  left: 24px !important;
  z-index: 2147483640 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  user-select: none;
  animation: zen-hud-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#zenVoiceHud *,
#zenRoomHud * {
  visibility: visible !important;
}

/* ==========================================================================
   REDESIGNED PREMIUM PROFILE SETTINGS MODAL
   ========================================================================== */
#profileSettingsModal {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.ps-modal-content {
  max-width: 620px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.ps-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ps-modal-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ps-modal-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #ffffff;
}

.ps-modal-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.ps-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ps-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transform: scale(1.05);
}

.ps-card {
  background: #111217;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease;
}

.ps-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.ps-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 20px;
}

.ps-avatar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-avatar-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ps-btn-danger-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ps-btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}

.ps-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ps-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.ps-section-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

/* ============================================================
   BLUNK MICRO STREAK BADGE — Compact, Anti-Overflow, Inline-Flex
   ============================================================ */
.blunk-micro-streak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 18px;
  line-height: 1;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--streak-bg, rgba(249, 115, 22, 0.12));
  border: 1px solid var(--streak-border, rgba(249, 115, 22, 0.28));
  color: var(--streak-color, #f97316);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  flex-shrink: 0;
  vertical-align: middle;
  user-select: none;
  box-sizing: border-box;
}

.blunk-micro-streak .streak-icon {
  flex-shrink: 0;
  stroke: var(--streak-color, currentColor);
}

.blunk-micro-streak .streak-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

/* ============================================================
   BLUNK STREAK CELEBRATION MODAL — Rich Appreciation & Motivation
   ============================================================ */
#blunkStreakCelebrationModal,
.blunk-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000050 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(4, 5, 8, 0.82) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 24px 16px !important;
  box-sizing: border-box !important;
}

#blunkStreakCelebrationModal.active,
.blunk-modal-overlay.active {
  display: flex !important;
}

.streak-celebration-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 420px !important;
  width: min(420px, calc(100vw - 32px)) !important;
  margin: auto !important;
  padding: 32px 28px !important;
  border-radius: 24px !important;
  background: #111216 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.85), inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
  animation: streakPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

@keyframes streakPopIn {
  0% { transform: scale(0.92) translateY(8px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.streak-celebration-badge-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.streak-celebration-flame-circle {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18) 0%, rgba(249, 115, 22, 0.03) 70%) !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.streak-celebration-count {
  font-size: 38px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #f97316 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -1px !important;
}

.streak-celebration-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #a1a1aa !important;
}

.streak-celebration-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--t-text-primary, #ffffff) !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

.streak-celebration-desc {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.55 !important;
}

.streak-new-record-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  background: rgba(234, 179, 8, 0.12) !important;
  border: 1px solid rgba(234, 179, 8, 0.3) !important;
  color: #facc15 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}

.streak-celebration-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.streak-celebration-btn {
  width: 100% !important;
  padding: 13px 24px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, opacity 0.15s ease !important;
}

.streak-celebration-btn:hover {
  opacity: 0.92 !important;
  transform: translateY(-1px) !important;
}

.streak-celebration-btn:active {
  transform: translateY(0) !important;
}

/* ========================================================================
   TIMER STAGE — RESERVED HEADER SPACE & VIEWPORT-SAFE SCALE
   The status bar is absolute, so normal mode must reserve its physical space
   before centering the hourglass. Zen intentionally remains edge-to-edge.
   ======================================================================== */
:root {
  --timer-header-height: 60px;
}

body:not(.zen-fullscreen-mode) #timerPage.active {
  height: calc(100dvh - var(--nav-h, 64px)) !important;
  min-height: calc(100dvh - var(--nav-h, 64px)) !important;
  box-sizing: border-box !important;
  padding-top: var(--timer-header-height) !important;
  overflow: hidden !important;
}

body:not(.zen-fullscreen-mode) #timerPage.active .timer-top-meta {
  height: var(--timer-header-height) !important;
}

body:not(.zen-fullscreen-mode) #timerPage.active .timer-main-stage {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

@media (min-width: 768px) {
  body:not(.zen-fullscreen-mode) #timerPage.active .timer-hourglass-frame {
    max-height: 100% !important;
    min-height: 0 !important;
  }

  body:not(.zen-fullscreen-mode) #timerPage.active .hg-digit-block {
    font-size: min(22vw, 32dvh) !important;
  }

  body:not(.zen-fullscreen-mode).timer-has-hours #timerPage.active .hg-digit-block {
    font-size: min(18vw, 28dvh) !important;
  }

  body:not(.zen-fullscreen-mode) #timerPage.active .hg-stream-channel {
    height: min(8vw, 10dvh) !important;
  }
}

@media (max-width: 767px) {
  body:not(.zen-fullscreen-mode) #timerPage.active {
    padding-top: var(--timer-header-height) !important;
  }

  body:not(.zen-fullscreen-mode) #timerPage.active .timer-main-stage {
    height: auto !important;
    flex: 1 1 auto !important;
  }
}

/* ============================================================
   FEED REVAMP: SMART HEADER, PULL-TO-REFRESH & MODAL DOCKING
   ============================================================ */

.unified-feed-header {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

.unified-feed-header.header-hidden {
  transform: translateY(-100%) !important;
}

/* Feed Pull-to-Refresh Component */
.feed-pull-refresh {
  height: 0px;
  overflow: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: height 0.15s ease, opacity 0.15s ease;
  pointer-events: none;
}

.pull-refresh-content {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 24px;
  background: var(--t-bg-card, #111218);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.pull-refresh-icon {
  transition: transform 0.12s ease;
  color: var(--t-text-primary, #ffffff);
}

.pull-refresh-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--t-text-secondary, #c5c6c7);
}

.feed-pull-refresh.refreshing .pull-refresh-icon {
  animation: spinPull 0.8s linear infinite;
}

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

/* Mobile Modal Keyboard & Solid Opaque Backdrop Guard */
@media (max-width: 680px) {
  .thread-modal-backdrop {
    background: var(--t-bg-app, #08090c) !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }
  [data-theme="light"] .thread-modal-backdrop {
    background: #ffffff !important;
  }
  .thread-modal-container {
    padding: 0 !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: var(--t-bg-app, #08090c) !important;
    overscroll-behavior: contain !important;
  }
  [data-theme="light"] .thread-modal-container {
    background: #ffffff !important;
  }
  .thread-modal-content-wrapper {
    border-radius: 0 !important;
    border: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: var(--t-bg-app, #08090c) !important;
    box-shadow: none !important;
  }
  [data-theme="light"] .thread-modal-content-wrapper {
    background: #ffffff !important;
  }
  .thread-modal-header {
    padding-top: max(14px, env(safe-area-inset-top, 14px)) !important;
    padding-left: 12px !important;
    padding-right: 16px !important;
    background: var(--t-bg-card, #111218) !important;
  }
  .thread-reply-container {
    padding: 10px 14px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 999 !important;
    background: var(--t-bg-card, #111218) !important;
    border-top: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.12)) !important;
    transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .thread-reply-container.keyboard-docked {
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.7) !important;
    border-top-color: var(--t-border-strong, rgba(255, 255, 255, 0.22)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════ */
/* POST COMPOSE MODAL & INTERACTIVE POLL SYSTEM                 */
/* ══════════════════════════════════════════════════════════════ */

/* Modal Container Overhaul */
.post-modal-card {
  max-width: 540px !important;
  border-radius: 24px !important;
  background: var(--t-bg-card, #11131a) !important;
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1)) !important;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

[data-theme="light"] .post-modal-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.15) !important;
}

.post-modal-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.06)) !important;
}

.post-modal-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
}

.post-modal-author-row {
  padding: 16px 20px 8px 20px !important;
  gap: 12px !important;
}

.post-modal-textarea {
  min-height: 110px !important;
  max-height: 240px !important;
  padding: 12px 20px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Poll Creator inside Modal */
.post-poll-creator {
  margin: 8px 20px 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: pollFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .post-poll-creator {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

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

.post-poll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.post-poll-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--t-accent-primary, #818cf8);
}

.post-poll-remove-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: var(--t-text-muted, #9ca3af);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.post-poll-remove-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.post-poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-poll-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.post-poll-input {
  flex: 1;
  height: 42px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0 14px;
  color: var(--t-text-primary, #ffffff);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
}

[data-theme="light"] .post-poll-input {
  background: #f9fafb;
  border-color: rgba(0, 0, 0, 0.12);
  color: #111827;
}

.post-poll-input:focus {
  border-color: var(--t-accent-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.post-poll-opt-del-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: var(--t-text-muted, #9ca3af);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.post-poll-opt-del-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.post-poll-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.post-poll-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px dashed rgba(99, 102, 241, 0.35);
  border-radius: 10px;
  padding: 6px 14px;
  color: var(--t-accent-primary, #818cf8);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.post-poll-add-btn:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: var(--t-accent-primary, #6366f1);
  transform: translateY(-1px);
}

.post-poll-tip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t-text-muted, #9ca3af);
}

.post-tool-btn.active {
  background: rgba(99, 102, 241, 0.25) !important;
  border-color: var(--t-accent-primary, #6366f1) !important;
  color: #818cf8 !important;
}

/* Feed & Thread Post Poll Rendering */
.blunk-poll-container {
  margin: 10px 0 6px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.blunk-poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.blunk-poll-vote-btn {
  width: 100%;
  min-height: 42px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: var(--t-text-primary, #f3f4f6);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

[data-theme="light"] .blunk-poll-vote-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1f2937;
}

.blunk-poll-vote-btn:hover {
  background: rgba(99, 102, 241, 0.09);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}

.blunk-poll-radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  transition: border-color 0.18s ease;
}

[data-theme="light"] .blunk-poll-radio-dot {
  border-color: rgba(0, 0, 0, 0.25);
}

.blunk-poll-vote-btn:hover .blunk-poll-radio-dot {
  border-color: var(--t-accent-primary, #6366f1);
}

.blunk-poll-vote-label {
  flex: 1;
  line-height: 1.4;
  word-break: break-word;
}

/* Poll Results View */
.blunk-poll-result-row {
  position: relative;
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  text-align: left;
  font-family: inherit;
  padding: 0;
  outline: none;
}

.blunk-poll-result-row:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.12);
}

.blunk-poll-result-row:active {
  transform: scale(0.99);
}

[data-theme="light"] .blunk-poll-result-row {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.blunk-poll-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(99, 102, 241, 0.18);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 14px;
  pointer-events: none;
}

.blunk-poll-result-row.selected {
  border-color: rgba(99, 102, 241, 0.4);
}

.blunk-poll-result-row.selected .blunk-poll-fill {
  background: rgba(99, 102, 241, 0.3);
}

.blunk-poll-result-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
}

.blunk-poll-text-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.blunk-poll-option-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-text-primary, #ffffff);
  word-break: break-word;
}

[data-theme="light"] .blunk-poll-option-label {
  color: #111827;
}

.blunk-poll-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--t-accent-primary, #818cf8);
  flex-shrink: 0;
}

.blunk-poll-pct-wrap {
  display: flex;
  align-items: center;
  margin-left: 12px;
  flex-shrink: 0;
}

.blunk-poll-pct {
  font-size: 14px;
  font-weight: 800;
  color: var(--t-text-primary, #ffffff);
  font-variant-numeric: tabular-nums;
}

[data-theme="light"] .blunk-poll-pct {
  color: #111827;
}

.blunk-poll-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--t-text-muted, #9ca3af);
  margin-top: 4px;
  font-weight: 600;
}

.blunk-poll-badge {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════ */
/* GUEST AUTH WALL & CONFIRMATION DIALOG                        */
/* ══════════════════════════════════════════════════════════════ */

/* Feed Timeline & Card Borders Polishing */
.twitter-feed-timeline,
.feed-list {
  border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom: none !important;
}

[data-theme="light"] .twitter-feed-timeline,
[data-theme="light"] .feed-list {
  border-left: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.tweet-card {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="light"] .tweet-card {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Guest Wall Container */
.guest-auth-wall {
  width: 100%;
  padding: 24px 16px 48px 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.guest-auth-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, rgba(20, 22, 32, 0.85) 0%, rgba(12, 13, 18, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 36px 24px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(99, 102, 241, 0.12);
  overflow: hidden;
  box-sizing: border-box;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-theme="light"] .guest-auth-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.guest-auth-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 100px;
  background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.guest-auth-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-accent-primary, #818cf8);
  margin: 0 auto 16px auto;
}

.guest-auth-title {
  color: var(--t-text-primary, #ffffff);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0 0 10px 0;
}

[data-theme="light"] .guest-auth-title {
  color: #111827;
}

.guest-auth-desc {
  color: var(--t-text-muted, #9ca3af);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 380px;
  margin: 0 auto 24px auto;
}

[data-theme="light"] .guest-auth-desc {
  color: #4b5563;
}

.guest-auth-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.guest-auth-btn {
  height: 44px;
  padding: 0 26px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  text-decoration: none;
}

.guest-auth-btn.primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

.guest-auth-btn.primary:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

.guest-auth-btn.secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--t-text-primary, #ffffff);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .guest-auth-btn.secondary {
  background: #f3f4f6;
  color: #111827;
  border-color: rgba(0, 0, 0, 0.1);
}

.guest-auth-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* Guest Confirmation Dialog Card */
.guest-prompt-card {
  position: relative;
  margin: auto;
  width: 90%;
  max-width: 380px;
  background: var(--t-bg-card, #121319);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 24px;
  padding: 28px 24px 22px 24px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  animation: promptCardPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .guest-prompt-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}

@keyframes promptCardPop {
  from {
    transform: scale(0.94) translateY(8px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.guest-prompt-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-accent-primary, #818cf8);
  margin-bottom: 4px;
}

.guest-prompt-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--t-text-primary, #ffffff);
  line-height: 1.35;
}

[data-theme="light"] .guest-prompt-title {
  color: #111827;
}

.guest-prompt-desc {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--t-text-muted, #9ca3af);
  margin-bottom: 8px;
}

.guest-prompt-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.guest-prompt-btn {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.guest-prompt-btn.cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--t-text-muted, #9ca3af);
}

[data-theme="light"] .guest-prompt-btn.cancel {
  background: #f3f4f6;
  border-color: rgba(0, 0, 0, 0.1);
  color: #4b5563;
}

.guest-prompt-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--t-text-primary, #ffffff);
}

.guest-prompt-btn.confirm {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.guest-prompt-btn.confirm:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
}

/* ============================================================
   THREADS-STYLE POST COMPOSER MODAL (V3 — PREMIUM & MOBILE FIXED)
   ============================================================ */

/* Feed primitives stay scoped to this screen and do not leak into other sheets. */
#feedPage .streams-drawer-backdrop {
  position: fixed; inset: 0; z-index: 10000011 !important; opacity: 0; visibility: hidden; pointer-events: none;
  background: rgba(4, 5, 8, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: opacity 180ms ease, visibility 180ms ease;
}
#feedPage .streams-drawer-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }
#feedPage .streams-drawer-sheet {
  position: fixed; z-index: 10000012 !important; top: 56px; left: max(12px, calc((100vw - 600px) / 2)); width: min(340px, calc(100vw - 24px)); overflow: hidden;
  border: 1px solid var(--t-border-subtle, rgba(255,255,255,.1)); border-radius: 18px; background: var(--t-bg-card, #111216);
  box-shadow: 0 20px 48px rgba(0,0,0,.45); opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px) scale(.98); transform-origin: top left;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.2,.8,.2,1), visibility 180ms ease;
}
#feedPage .streams-drawer-sheet.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
#feedPage .streams-drawer-header { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--t-border-subtle, rgba(255,255,255,.08)); }
#feedPage .streams-drawer-title { color: var(--t-text-primary, #f7f7f8); font-size: 15px; font-weight: 750; }
#feedPage .streams-drawer-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--t-text-muted, #90939c); cursor: pointer; font-size: 17px; }
#feedPage .streams-drawer-close:hover { background: var(--t-bg-hover, rgba(255,255,255,.07)); color: var(--t-text-primary, #fff); }
#feedPage .streams-drawer-items { padding: 7px; }
#feedPage .streams-drawer-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 11px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; font-family: inherit; }
#feedPage .streams-drawer-option:hover, #feedPage .streams-drawer-option.active { background: var(--t-bg-hover, rgba(255,255,255,.065)); }
#feedPage .streams-option-text { display: grid; gap: 3px; min-width: 0; }
#feedPage .streams-option-title { color: var(--t-text-primary, #f7f7f8); font-size: 14px; font-weight: 700; }
#feedPage .streams-option-desc { color: var(--t-text-muted, #8b8e97); font-size: 12px; line-height: 1.35; }
#feedPage .streams-option-indicator { width: 8px; height: 8px; flex: 0 0 auto; border: 1px solid var(--t-border-subtle, rgba(255,255,255,.25)); border-radius: 50%; }
#feedPage .streams-drawer-option.active .streams-option-indicator { border-color: #9b6cff; background: #9b6cff; box-shadow: 0 0 0 3px rgba(155,108,255,.14); }



@media (max-width: 640px) {
  #feedPage .streams-drawer-sheet {
    top: auto;
    bottom: calc(var(--nav-h, 60px) + env(safe-area-inset-bottom, 0px) + 12px);
    left: 12px;
    right: 12px;
    width: auto;
    transform: translateY(12px);
    transform-origin: bottom center;
  }
  #feedPage .streams-drawer-sheet.open { transform: translateY(0); }
  #feedPage .feed-quick-compose-bar {
    border-left: none;
    border-right: none;
  }
}

#postModalOverlay.post-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.76) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000030 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px !important;
  box-sizing: border-box !important;
}

#postModalOverlay.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Hide bottom nav when post compose modal is open to ensure clean mobile view */
body.modal-open:not(:has(#threadsSearchModal.open)) .bottom-nav,
body:has(#postModalOverlay.open) .bottom-nav {
  display: none !important;
}

#postModalOverlay .post-modal-card {
  width: 100% !important;
  max-width: 588px !important;
  max-height: 88vh !important;
  background: #0D1117 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    0 32px 80px rgba(0, 0, 0, 0.85),
    0 4px 16px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Gradient accent line across the top */
#postModalOverlay .post-modal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  animation: none;
  z-index: 10;
}

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

#postModalOverlay.open .post-modal-card {
  transform: translateY(0) scale(1) !important;
}

[data-theme="light"] #postModalOverlay .post-modal-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18) !important;
}

/* Header */
#postModalOverlay .post-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  height: 54px !important;
  flex-shrink: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  position: relative !important;
}

[data-theme="light"] #postModalOverlay .post-modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.07) !important;
}

.post-modal-cancel-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--t-text-muted, #71767b);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  font-family: inherit;
}

.post-modal-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--t-text-primary, #fff);
  transform: scale(1.05);
}

.post-modal-cancel-btn:active {
  transform: scale(0.95);
}

.post-modal-cancel-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

#postModalOverlay .post-modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--t-text-primary, #fff) !important;
  letter-spacing: -0.2px !important;
  text-transform: none !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.post-modal-header-spacer {
  width: 36px;
}

/* Scrollable Body */
#postModalOverlay .post-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 16px 20px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Thread Node Structure */
.thread-node {
  display: flex;
  gap: 12px;
  position: relative;
}

.thread-node-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 38px;
}

.thread-avatar-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  background: var(--surface, #111218);
  box-sizing: border-box;
}

.thread-avatar-wrap .avatar-container {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.thread-avatar-wrap .avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

.thread-avatar-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

.thread-avatar-wrap .avatar-initials {
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}

.thread-avatar-wrap .avatar-initials[style*="display:none"],
.thread-avatar-wrap .avatar-initials[style*="display: none"] {
  display: none !important;
}

.thread-avatar-wrap img + .avatar-initials {
  display: none;
}

.thread-avatar-wrap img[style*="display: none"] + .avatar-initials,
.thread-avatar-wrap img[style*="display:none"] + .avatar-initials {
  display: flex !important;
}

.thread-avatar-wrap .status-online-dot {
  display: none !important;
}

.thread-avatar-wrap.ghost-avatar {
  width: 26px !important;
  height: 26px !important;
  opacity: 0.5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.thread-stem-line {
  width: 2px;
  flex: 1;
  min-height: 24px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 1px;
  margin: 6px 0;
  transition: background 0.2s;
}

[data-theme="light"] .thread-stem-line {
  background: rgba(0, 0, 0, 0.1);
}

.thread-node:focus-within .thread-stem-line {
  background: rgba(139, 92, 246, 0.35);
}

.thread-node-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.thread-node-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--t-text-primary, #fff);
  margin-bottom: 6px;
  line-height: 1.3;
}

.thread-node-textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--t-text-primary, #fff);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.55;
  resize: none;
  min-height: 64px;
  padding: 4px 0 0 0;
  margin: 0;
  font-family: inherit;
  box-sizing: border-box;
  transition: min-height 0.1s ease;
}

.thread-node-textarea::placeholder {
  color: var(--t-text-muted, #71767b);
  transition: color 0.15s ease;
}

.thread-node-textarea:focus::placeholder {
  color: var(--t-text-muted, #71767b);
  opacity: 0.7;
}

/* Composer rule: the writing surface is intentionally borderless. */
#postModalOverlay .thread-node-textarea,
#postModalOverlay .thread-node-textarea:focus,
#postModalOverlay .thread-node-textarea:focus-visible {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Enhanced focus indicator on avatar stem */
#postModalOverlay .thread-node.main-node:focus-within .thread-avatar-wrap {
  box-shadow: 0 0 0 2px #8B5CF6, 0 0 8px rgba(139, 92, 246, 0.3);
  transition: box-shadow 0.15s ease;
}

/* Chained Posts List */
.chained-posts-list {
  display: flex;
  flex-direction: column;
}

.chained-post-item {
  display: flex;
  gap: 12px;
  position: relative;
  margin-top: 4px;
}

.chained-post-remove-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  color: var(--t-text-muted, #71767b);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.chained-post-remove-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Trigger Node (Blunk'a ekle...) */
.thread-node.trigger-node {
  cursor: pointer;
  padding: 8px 0;
  opacity: 0.6;
  transition: opacity 0.15s;
  align-items: center;
}

.thread-node.trigger-node:hover {
  opacity: 1;
}

.add-chained-post-label {
  font-size: 14px;
  color: var(--t-text-muted, #71767b);
  font-weight: 500;
  user-select: none;
}

/* Footer Action Bar */
#postModalOverlay .post-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  height: auto !important;
  min-height: 58px !important;
  flex-shrink: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #0D1117 !important;
  position: relative !important;
  z-index: 10 !important;
  gap: 12px;
}

[data-theme="light"] #postModalOverlay .post-modal-footer {
  background: #ffffff !important;
  border-top-color: rgba(0, 0, 0, 0.07) !important;
}

.post-modal-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.post-tool-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.12s ease, color 0.18s ease;
}

.post-tool-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(1.05);
  color: #a5b4fc;
}

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

.post-tool-btn svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}

.post-tool-btn.active {
  background: rgba(99, 102, 241, 0.16);
  color: #a5b4fc;
}

.post-modal-submit-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Progress ring */
.post-char-indicator-wrap {
  position: relative;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-progress-ring {
  transform: rotate(-90deg);
}

.post-progress-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2.5;
}

[data-theme="light"] .post-progress-bg {
  stroke: rgba(0, 0, 0, 0.1);
}

.post-progress-fill {
  fill: none;
  stroke: #6366f1;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 62.83;
  stroke-dashoffset: 62.83;
  transition: stroke-dashoffset 0.15s ease, stroke 0.2s ease;
}

.post-progress-fill.warning { stroke: #f97316; }
.post-progress-fill.danger { stroke: #ef4444; }

.post-char-counter {
  font-size: 11px;
  font-weight: 700;
  color: #6366f1;
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.post-char-counter.visible {
  opacity: 1;
  position: static;
}

.post-char-counter.warning { color: #f97316; }
.post-char-counter.danger { color: #ef4444; }

/* Paylaş Submit Button */
.post-submit-btn {
  height: 36px;
  padding: 8px 18px;
  border-radius: 9999px;
  background: #6366f1;
  border: none;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}

.post-submit-btn:hover:not(:disabled) {
  background: #4f46e5;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
}

.post-submit-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.post-submit-btn:disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: not-allowed;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  transform: none !important;
}

/* Drop Zone Overlay */
.post-drop-zone-overlay {
  position: absolute;
  inset: 0;
  background: rgba(124, 58, 237, 0.18);
  border: 2px dashed rgba(167, 139, 250, 0.7);
  border-radius: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
}

#postModalCard.drag-over .post-drop-zone-overlay {
  display: flex;
}

.post-drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #a78bfa;
  font-size: 15px;
  font-weight: 600;
}

/* Publish Success Ripple Animation */
@keyframes postSentRipple {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Mobile Fullscreen Bottom Sheet */
@media (max-width: 640px) {
  #postModalOverlay.post-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    z-index: 10000030 !important;
    background: #0D1117 !important;
  }

  #postModalOverlay.keyboard-active {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  #postModalOverlay .post-modal-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 92dvh;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    transform: translateY(100%);
    box-sizing: border-box !important;
    background: #0D1117 !important;
  }

  #postModalOverlay.open .post-modal-card {
    transform: translateY(0) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #postModalOverlay.keyboard-active .post-modal-card {
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    transform: translateY(0) !important;
    transition: none !important;
  }

  #postModalOverlay .modal-drag-handle {
    display: block !important;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.24);
    margin: 8px auto 2px auto;
    flex-shrink: 0 !important;
    cursor: grab;
    touch-action: none;
  }

  #postModalOverlay .post-modal-header {
    height: calc(52px + max(0px, env(safe-area-inset-top, 0px))) !important;
    padding: max(10px, env(safe-area-inset-top, 10px)) 14px 6px 14px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #postModalOverlay .post-modal-cancel-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #postModalOverlay .post-modal-header-spacer {
    width: 44px !important;
    height: 44px !important;
  }

  #postModalOverlay .post-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  #postModalOverlay .post-modal-footer {
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 14px max(10px, env(safe-area-inset-bottom, 10px)) 14px !important;
    background: #0D1117 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 10 !important;
  }

  #postModalOverlay.keyboard-active .post-modal-footer {
    padding-bottom: 8px !important;
  }

  .post-modal-tools {
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .post-tool-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .post-modal-submit-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }

  .post-submit-btn {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .thread-node-textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
  }

  /* Mobile Cropper Container & Multi-Images Responsiveness */
  .post-crop-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 14px 0 !important;
    padding: 10px 8px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  .post-crop-viewport {
    width: 100% !important;
    max-width: min(320px, calc(100vw - 44px)) !important;
    margin: 0 auto !important;
  }

  .post-crop-controls {
    width: 100% !important;
    max-width: min(320px, calc(100vw - 44px)) !important;
  }

  .post-crop-toolbar {
    width: 100% !important;
    max-width: min(320px, calc(100vw - 44px)) !important;
  }

  .post-multi-images-strip {
    padding: 6px 0 !important;
  }

  .multi-image-thumb-wrap {
    width: 52px !important;
    height: 52px !important;
  }

  .multi-images-add-btn {
    width: 52px !important;
    height: 52px !important;
  }
}

#userProfilePage {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000005 !important;
  background: var(--t-bg-main, #0a0a0c) !important;
}

#user-analytics-dashboard-overlay,
.analytics-dashboard-overlay {
  z-index: 10000030 !important;
}

/* ─── USER MENTION AUTOCOMPLETE POPOVER ─── */
.post-mention-popover {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #11151f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  margin: 6px 0 12px 0;
  overflow: hidden;
  z-index: 1000;
}

.comment-mention-popover,
.chat-mention-popover {
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  z-index: 1200 !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6) !important;
}

.chat-mention-link {
  color: #1d9bf0 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease;
}
.chat-mention-link:hover {
  opacity: 0.85;
  text-decoration: underline !important;
}

/* Telegram-style 3-Dot Typing Bubble */
.chat-typing-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 16px;
  animation: fadeInTyping 0.2s ease;
}

.chat-typing-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--t-bg-card, #161a23);
  border: 1px solid var(--t-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.chat-typing-bubble .typing-dot {
  width: 5px;
  height: 5px;
  background: var(--t-text-muted, #8a9099);
  border-radius: 50%;
  animation: typingPulse 1.4s infinite ease-in-out both;
}

.chat-typing-bubble .typing-dot.dot1 { animation-delay: -0.32s; }
.chat-typing-bubble .typing-dot.dot2 { animation-delay: -0.16s; }
.chat-typing-bubble .typing-dot.dot3 { animation-delay: 0s; }

@keyframes typingPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1.15); opacity: 1; background: var(--t-accent, #3b82f6); }
}

.chat-typing-text {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t-text-muted, #8a9099);
}

/* Active Message Highlight when actions modal is open */
.msg-body-wrapper.msg-menu-active {
  transform: scale(1.025);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  z-index: 100001;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

/* Reaction Particle Burst Effect */
.msg-reaction-burst-container {
  position: fixed;
  pointer-events: none;
  z-index: 100005;
  transform: translate(-50%, -50%);
}

.msg-reaction-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation: reactionParticlePop 0.55s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes reactionParticlePop {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: rotate(var(--angle)) translate(var(--dist)) scale(0); opacity: 0; }
}

.mention-popover-header {
  padding: 8px 12px 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.04em;
}

.mention-popover-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  max-height: 220px;
  overflow-y: auto;
}

.mention-popover-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.mention-popover-item:hover,
.mention-popover-item.selected {
  background: rgba(255, 255, 255, 0.08);
}

.mention-item-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.mention-item-avatar.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.mention-item-avatar.avatar .avatar-initials {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff !important;
}

.mention-item-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.mention-item-username {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mention-item-level {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

/* ─── ASPECT RATIO & PRO TOOLS TOOLBAR ─── */
.post-crop-single-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.post-crop-ratio-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 2px 0 8px 0;
  flex-wrap: wrap;
}

.crop-ratio-label {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: -0.01em;
  margin-right: 2px;
}

.crop-ratio-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.crop-ratio-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.crop-ratio-chip.active {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border-color: #6366f1;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.45);
}

.post-crop-tools-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 10px 0;
  flex-wrap: wrap;
}

.crop-tool-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.crop-tool-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.crop-tool-chip.highlight {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.35);
  color: #a5b4fc;
}

.crop-tool-chip.highlight:hover {
  background: rgba(99, 102, 241, 0.25);
  color: #ffffff;
  border-color: #6366f1;
}

/* ─── SLIDE BADGE & NAVIGATION ARROWS ON CROPPER VIEWPORT ─── */
.post-crop-slide-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(7, 9, 14, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.post-crop-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(13, 17, 23, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

.post-crop-nav-btn:hover {
  background: rgba(22, 27, 34, 0.95);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-50%) scale(1.08);
}

.post-crop-nav-btn.prev {
  left: 8px;
}

.post-crop-nav-btn.next {
  right: 8px;
}

.post-crop-nav-btn:disabled,
.post-crop-nav-btn[disabled] {
  opacity: 0.25;
  pointer-events: none;
}

/* ─── MULTI-IMAGE THUMBNAIL STRIP & DRAG-AND-DROP REORDER ─── */
.post-multi-images-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  padding: 8px 2px;
  scrollbar-width: none;
  margin-top: 6px;
  -webkit-overflow-scrolling: touch;
}

.post-multi-images-strip::-webkit-scrollbar {
  display: none;
}

.multi-images-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.multi-image-thumb-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: grab;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: #07090e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  user-select: none;
}

.multi-image-thumb-wrap:active {
  cursor: grabbing;
}

.multi-image-thumb-wrap.active {
  border-color: var(--t-accent-primary, #6366f1);
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.45);
  transform: scale(1.04);
}

.multi-image-thumb-wrap.dragging {
  opacity: 0.4;
  transform: scale(0.92);
  border-color: #6366f1;
}

.multi-image-thumb-wrap.drag-over {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.6) !important;
  transform: scale(1.08) !important;
}

.multi-image-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.multi-image-thumb-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  z-index: 5;
}

.multi-image-thumb-remove:hover {
  background: #ef4444;
  border-color: #ef4444;
  transform: scale(1.1);
}

.multi-image-thumb-idx {
  position: absolute;
  bottom: 3px;
  left: 3px;
  font-size: 9.5px;
  font-weight: 800;
  background: rgba(7, 9, 14, 0.78);
  color: #ffffff;
  padding: 2px 5px;
  border-radius: 5px;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.thumb-reorder-actions {
  position: absolute;
  bottom: 3px;
  right: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 6;
}

.thumb-move-btn {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  background: rgba(7, 9, 14, 0.85);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.thumb-move-btn:hover {
  background: var(--t-accent-primary, #6366f1);
  border-color: var(--t-accent-primary, #6366f1);
}

.multi-images-add-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.multi-images-add-btn:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: var(--t-accent-primary, #6366f1);
  color: var(--t-accent-primary, #6366f1);
  transform: scale(1.03);
}

.multi-images-add-count {
  font-size: 9.5px;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: -0.01em;
}

/* ─── MULTI-SLIDE GALLERY INSPECTION PANEL ─── */
.post-slides-overview-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  gap: 12px;
  box-sizing: border-box;
}

.slides-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.slides-overview-title-wrap {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
}

.slides-overview-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.slides-overview-sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

.slides-overview-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #a5b4fc;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.slides-overview-back-btn:hover {
  background: rgba(99, 102, 241, 0.25);
  color: #ffffff;
  border-color: #6366f1;
}

.slides-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  gap: 10px;
  width: 100%;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px 2px;
  scrollbar-width: thin;
}

.slides-overview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 7px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: grab;
  user-select: none;
  box-sizing: border-box;
}

.slides-overview-card:active {
  cursor: grabbing;
}

.slides-overview-card.active {
  border-color: var(--t-accent-primary, #6366f1);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.06);
}

.slides-overview-card.dragging {
  opacity: 0.4;
  transform: scale(0.92);
}

.slides-overview-card.drag-over {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.6) !important;
  transform: scale(1.05);
}

.slides-overview-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #07090e;
  cursor: pointer;
}

.slides-overview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slides-overview-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(7, 9, 14, 0.85);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  line-height: 1.1;
}

.slides-overview-del-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.78);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}

.slides-overview-del-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
  transform: scale(1.08);
}

.slides-overview-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 1px;
}

.overview-move-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}

.overview-move-btn:hover {
  background: var(--t-accent-primary, #6366f1);
  border-color: var(--t-accent-primary, #6366f1);
}

.overview-move-btn:disabled,
.overview-move-btn[disabled] {
  opacity: 0.2;
  pointer-events: none;
}

.overview-drag-handle {
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.slides-overview-edit-btn {
  width: 100%;
  padding: 4px 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.slides-overview-edit-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  color: #ffffff;
  border-color: rgba(99, 102, 241, 0.4);
}

.slides-overview-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.18s;
  font-size: 11px;
  font-weight: 600;
}

.slides-overview-add-card:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: var(--t-accent-primary, #6366f1);
  color: var(--t-accent-primary, #6366f1);
}

.multi-images-add-btn:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: var(--t-accent-primary, #6366f1);
  color: var(--t-accent-primary, #6366f1);
  transform: scale(1.03);
}

.multi-images-add-count {
  font-size: 9.5px;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: -0.01em;
}

/* ─── TWEET SLIDING CAROUSEL (PHOTO DUMPS UP TO 10) ─── */
.tweet-carousel-wrapper {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #05070a;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tweet-carousel-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  z-index: 10;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.tweet-carousel-track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  width: 100%;
  touch-action: pan-y pinch-zoom;
  scroll-behavior: smooth;
  user-select: none;
  -webkit-user-select: none;
  -webkit-overflow-scrolling: touch;
}

.tweet-carousel-track::-webkit-scrollbar {
  display: none;
}

.tweet-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05070a;
  max-height: 520px;
  overflow: hidden;
  cursor: zoom-in;
  box-sizing: border-box;
}

.tweet-carousel-img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}

.tweet-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease;
}

.tweet-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.08);
}

.tweet-carousel-arrow.prev {
  left: 10px;
}

.tweet-carousel-arrow.next {
  right: 10px;
}

.tweet-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 10;
  padding: 4px 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: auto;
}

.tweet-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  padding: 0;
  outline: none;
  display: block;
}

.tweet-carousel-dot.active {
  width: 16px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* ─── ORIGINAL RATIO SINGLE IMAGE WRAPPER ─── */
.original-ratio-wrap {
  width: 100%;
  max-height: 540px;
  background: #05070a;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.original-ratio-img {
  max-height: 540px;
  width: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================================
   ADVANCED INSTAGRAM & LINEAR GRADE MESSAGING STYLES
   ============================================================ */
.chat-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(13, 17, 23, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  min-height: 58px;
  position: relative;
  z-index: 50;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.chat-header-left:hover {
  background: rgba(255, 255, 255, 0.04);
}

.chat-header-avatar-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-header-avatar-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
}

.chat-header-avatar-fallback {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-header-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #0d1117;
}

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

.chat-header-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chat-header-pill-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 12px;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.chat-header-pill-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: translateY(-1px);
}

/* Center Security & Retention Pill */
.chat-system-retention-pill {
  margin: 4px auto 18px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  text-align: center;
  max-width: 90%;
  width: fit-content;
}

.chat-system-retention-pill svg {
  color: #22c55e;
  flex-shrink: 0;
}

/* Non-Friend Barrier Panel */
.chat-non-friend-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: #090c10 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  gap: 10px;
}

.chat-non-friend-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
}

.chat-non-friend-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
}

.chat-non-friend-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  max-width: 360px;
  line-height: 1.45;
}

.chat-non-friend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  color: #000000;
  border: none;
  padding: 9px 20px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-non-friend-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

/* Extended Reactions Tray */
.msg-reaction-extended {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  animation: fadeInTray 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.react-expand-btn {
  color: rgba(255, 255, 255, 0.45);
  transition: all 0.2s ease;
}

.react-expand-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

/* Chat Input Bar Modernization */
.chat-input-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  background: #090c10 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  gap: 10px !important;
}

.chat-input-field {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #ffffff;
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.chat-input-field:focus {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.chat-media-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 100px;
  padding: 9px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.chat-media-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.chat-send-btn {
  background: #ffffff;
  color: #000000;
  border: none;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-send-btn:hover {
  background: rgba(255, 255, 255, 0.88);
  transform: translateY(-1px);
}

.chat-send-btn:active {
  transform: scale(0.96);
}

/* Floating Scroll-to-Bottom Action Button */
.chat-area {
  position: relative !important;
}

.chat-scroll-bottom-btn {
  position: absolute;
  right: 22px;
  bottom: 78px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(18, 22, 28, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.8);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease, border-color 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chat-scroll-bottom-btn:hover {
  background: rgba(28, 34, 44, 0.98);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: translateY(-2px) scale(1.06);
}

.chat-scroll-bottom-btn:active {
  transform: translateY(0) scale(0.94);
}

.chat-scroll-bottom-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.chat-scroll-bottom-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: #3b82f6;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.6);
  border: 1.5px solid #07090e;
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .chat-scroll-bottom-btn {
    right: 16px;
    bottom: 74px;
    width: 38px;
    height: 38px;
  }
}