/* ============================================
   iOS DESIGN SYSTEM - Колесо Workspace
   Version: 4.0.0
   ============================================ */

/* ============================================
   1. DESIGN TOKENS
   ============================================ */
:root {
  /* Colors - Light Theme (default) */
  --ios-bg-primary: #FFFFFF;
  --ios-bg-secondary: #F2F2F7;
  --ios-bg-tertiary: #EFEFF4;
  --ios-bg-grouped: #F2F2F7;
  --ios-bg-elevated: #FFFFFF;
  --ios-bg-hover: rgba(0,0,0,0.04);
  --ios-bg-active: rgba(0,0,0,0.08);

  --ios-accent: #007AFF;
  --ios-accent-hover: #0066D6;
  --ios-accent-light: rgba(0,122,255,0.12);
  --ios-red: #FF3B30;
  --ios-red-light: rgba(255,59,48,0.12);
  --ios-orange: #FF9500;
  --ios-orange-light: rgba(255,149,0,0.12);
  --ios-yellow: #FFCC00;
  --ios-green: #34C759;
  --ios-green-light: rgba(52,199,89,0.12);
  --ios-teal: #5AC8FA;
  --ios-purple: #AF52DE;
  --ios-purple-light: rgba(175,82,222,0.12);
  --ios-pink: #FF2D55;

  --ios-text-primary: #000000;
  --ios-text-secondary: rgba(60,60,67,0.6);
  --ios-text-tertiary: rgba(60,60,67,0.3);
  --ios-text-quaternary: rgba(60,60,67,0.18);
  --ios-text-on-accent: #FFFFFF;

  --ios-separator: rgba(60,60,67,0.12);
  --ios-separator-opaque: #C6C6C8;
  --ios-fill: rgba(120,120,128,0.2);
  --ios-fill-secondary: rgba(120,120,128,0.16);
  --ios-fill-tertiary: rgba(120,120,128,0.12);

  /* Typography */
  --ios-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Helvetica Neue', sans-serif;

  /* Spacing (4px base) */
  --ios-sp-0: 0px;
  --ios-sp-1: 4px;
  --ios-sp-2: 8px;
  --ios-sp-3: 12px;
  --ios-sp-4: 16px;
  --ios-sp-5: 20px;
  --ios-sp-6: 24px;
  --ios-sp-8: 32px;
  --ios-sp-10: 40px;
  --ios-sp-12: 48px;

  /* Radius */
  --ios-radius-xs: 6px;
  --ios-radius-sm: 8px;
  --ios-radius-md: 12px;
  --ios-radius-lg: 16px;
  --ios-radius-xl: 20px;
  --ios-radius-full: 9999px;

  /* Safe areas */
  --ios-safe-top: env(safe-area-inset-top, 0px);
  --ios-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ios-tab-height: 50px;
  --ios-nav-height: 44px;

  /* Shadows */
  --ios-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --ios-shadow-md: 0 2px 12px rgba(0,0,0,0.1);
  --ios-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --ios-shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

  /* Transitions */
  --ios-duration-fast: 0.2s;
  --ios-duration-normal: 0.3s;
  --ios-duration-slow: 0.5s;
  --ios-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ios-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Legacy aliases for backward compatibility */
  --color-bg: var(--ios-bg-primary);
  --color-surface: var(--ios-bg-primary);
  --color-surface-hover: var(--ios-bg-hover);
  --color-border: var(--ios-separator);
  --color-text: var(--ios-text-primary);
  --color-text-secondary: var(--ios-text-secondary);
  --color-accent: var(--ios-accent);
  --color-accent-hover: var(--ios-accent-hover);
  --color-danger: var(--ios-red);
  --color-success: var(--ios-green);
  --color-warning: var(--ios-orange);
  --space-1: var(--ios-sp-1);
  --space-2: var(--ios-sp-2);
  --space-3: var(--ios-sp-3);
  --space-4: var(--ios-sp-4);
  --space-5: var(--ios-sp-5);
  --space-6: var(--ios-sp-6);
  --space-8: var(--ios-sp-8);
  --radius-sm: var(--ios-radius-sm);
  --radius-md: var(--ios-radius-md);
  --radius-lg: var(--ios-radius-lg);
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 34px;
}

/* ============================================
   2. RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--ios-font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--ios-font);
  font-size: 17px;
  line-height: 1.47;
  color: var(--ios-text-primary);
  background: var(--app-bg, var(--ios-bg-secondary));
  height: 100%;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

a { color: var(--ios-accent); text-decoration: none; }
a:hover { color: var(--ios-accent-hover); }

img, video { max-width: 100%; height: auto; display: block; }

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

button { cursor: pointer; -webkit-appearance: none; }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--ios-text-primary);
}

h1 { font-size: 34px; letter-spacing: 0.37px; }
h2 { font-size: 28px; letter-spacing: 0.36px; }
h3 { font-size: 22px; letter-spacing: 0.35px; }
h4 { font-size: 20px; font-weight: 600; }
h5 { font-size: 17px; font-weight: 600; }
h6 { font-size: 15px; font-weight: 600; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
* { scrollbar-width: none; }

::selection {
  background: var(--ios-accent-light);
  color: var(--ios-text-primary);
}

/* ============================================
   3. APP SHELL & LAYOUT
   ============================================ */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--app-bg, var(--ios-bg-secondary));
  position: relative;
  overflow: hidden;
}

/* Sidebar - hidden on mobile, shown on desktop for chat */
.sidebar {
  display: none;
  flex-direction: column;
  background: var(--ios-bg-primary);
  border-right: 1px solid var(--ios-separator);
  width: 360px;
  height: 100%;
  overflow: hidden;
  z-index: 10;
}

.sidebar-menu {
  display: none;
}

.sidebar-header {
  display: none;
}

.sidebar-nav {
  display: none;
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Main content area */
.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--app-bg, var(--ios-bg-secondary));
  position: relative;
  padding-bottom: calc(var(--ios-tab-height) + var(--ios-safe-bottom) + 4px);
}

/* Auth states */
body.not-authenticated .sidebar,
body.not-authenticated .mobile-tab-bar,
body.not-authenticated .task-sidebar-backdrop {
  display: none !important;
}

body.not-authenticated .main-content {
  padding-bottom: 0;
}

body.not-authenticated #app {
  background: var(--ios-bg-primary);
}

body.checking-auth .sidebar,
body.checking-auth .mobile-tab-bar {
  display: none !important;
}

/* Fullscreen mode (conferences, guest) */
body.fullscreen-mode .sidebar,
body.fullscreen-mode .mobile-tab-bar {
  display: none !important;
}
body.fullscreen-mode .main-content {
  padding-bottom: 0;
}

body.guest-join-active .sidebar,
body.guest-join-active .mobile-tab-bar {
  display: none !important;
}
body.guest-join-active .main-content {
  padding-bottom: 0;
  margin-left: 0 !important;
  width: 100% !important;
}

/* Loading screen */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--ios-sp-4);
  color: var(--ios-text-secondary);
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--ios-sp-10);
  color: var(--ios-text-secondary);
  font-size: 14px;
}

.loading::before {
  content: '';
  width: 28px;
  height: 28px;
  border: 3px solid var(--ios-fill);
  border-top-color: var(--ios-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--ios-fill);
  border-top-color: var(--ios-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Loading placeholder — compact spinner for card widgets */
.loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  color: var(--ios-text-tertiary);
  font-size: 13px;
}

.loading-placeholder::before {
  content: '';
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--ios-fill);
  border-top-color: var(--ios-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Gamification loading */
.gam-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  color: var(--ios-text-tertiary);
  font-size: 13px;
}

.gam-loading::before {
  content: '';
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--ios-fill);
  border-top-color: var(--ios-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Rating loading */
.rating-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  color: var(--ios-text-tertiary);
  font-size: 13px;
}

.rating-loading::before {
  content: '';
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--ios-fill);
  border-top-color: var(--ios-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================
   4. BOTTOM TAB BAR
   ============================================ */
.mobile-tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--ios-tab-height) + var(--ios-safe-bottom));
  padding-bottom: var(--ios-safe-bottom);
  background: rgba(249,249,249,0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid var(--ios-separator-opaque);
  z-index: 1000;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 0;
  min-width: 56px;
  height: var(--ios-tab-height);
  color: #999;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color var(--ios-duration-fast);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.tab-item svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
  transition: all var(--ios-duration-fast);
}

.tab-item.active {
  color: var(--ios-accent);
}

.tab-item.active svg {
  stroke-width: 2;
}

.tab-badge {
  position: absolute;
  top: 2px;
  right: 50%;
  transform: translateX(14px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ios-red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* Chat room mode - hide tab bar */
body.in-chat-room .mobile-tab-bar {
  display: none;
}
body.in-chat-room .main-content {
  padding-bottom: 0;
}

/* ============================================
   5. MORE MENU (Bottom Sheet)
   ============================================ */
.more-menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}

.more-menu.more-menu-open {
  pointer-events: auto;
}

.more-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.more-menu.more-menu-open .more-menu-backdrop {
  opacity: 1;
}

.more-menu.more-menu-closing .more-menu-backdrop {
  opacity: 0;
}

.more-menu-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-xl) var(--ios-radius-xl) 0 0;
  padding: var(--ios-sp-3) var(--ios-sp-4) calc(var(--ios-sp-8) + var(--ios-safe-bottom));
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

.more-menu.more-menu-open .more-menu-sheet {
  transform: translateY(0);
}

.more-menu.more-menu-closing .more-menu-sheet {
  transform: translateY(100%);
}

.more-menu-handle {
  width: 36px;
  height: 5px;
  border-radius: 2.5px;
  background: var(--ios-fill);
  margin: 0 auto var(--ios-sp-4);
  cursor: grab;
  touch-action: none;
}

.more-menu-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-radius: var(--ios-radius-md);
  color: var(--ios-text-primary);
  font-size: 17px;
  font-weight: 400;
  text-decoration: none;
  transition: background var(--ios-duration-fast);
  min-height: 44px;
}

.more-menu-item:hover {
  background: var(--ios-bg-hover);
  color: var(--ios-text-primary);
}

.more-menu-item:active {
  background: var(--ios-bg-active);
}

.more-menu-item svg {
  color: var(--ios-accent);
  flex-shrink: 0;
}

/* ============================================
   6. BOTTOM SHEET (Generic)
   ============================================ */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 2000;
  animation: fadeIn var(--ios-duration-normal) var(--ios-ease);
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-xl) var(--ios-radius-xl) 0 0;
  padding: var(--ios-sp-3) var(--ios-sp-4) calc(var(--ios-sp-6) + var(--ios-safe-bottom));
  z-index: 2001;
  animation: slideUp var(--ios-duration-normal) var(--ios-ease);
  max-height: 85vh;
  overflow-y: auto;
}

.bottom-sheet-handle {
  width: 36px;
  height: 5px;
  border-radius: 2.5px;
  background: var(--ios-fill);
  margin: 0 auto var(--ios-sp-4);
}

/* --- Reusable Bottom Sheet (bs-*) --- */
.bs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background 0.3s ease;
  pointer-events: none;
}
.bs-overlay.bs-visible {
  background: rgba(0,0,0,0.4);
  pointer-events: auto;
}
.bs-overlay.bs-hiding {
  background: rgba(0,0,0,0);
  pointer-events: none;
}

.bs-sheet {
  width: 100%;
  max-width: 500px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0));
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.bs-visible .bs-sheet {
  transform: translateY(0);
}
.bs-hiding .bs-sheet {
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
}

.bs-handle {
  width: 36px;
  height: 5px;
  border-radius: 2.5px;
  background: var(--ios-fill-secondary, #ccc);
  margin: 0 auto 8px;
}

.bs-title {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary, #8e8e93);
  padding: 8px 16px 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bs-group {
  background: var(--ios-bg-primary, #fff);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}

.bs-separator {
  height: 0.5px;
  background: var(--ios-separator, rgba(60,60,67,0.12));
  margin-left: 16px;
}

.bs-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  border: none;
  background: transparent;
  font-size: 20px;
  color: var(--ios-accent, #007AFF);
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bs-item:active {
  background: var(--ios-fill-tertiary, rgba(120,120,128,0.12));
}
.bs-destructive {
  color: var(--ios-red, #FF3B30);
}

.bs-item-icon {
  display: flex;
  align-items: center;
  font-size: 18px;
}

.bs-item-label {
  font-weight: 400;
}

.bs-cancel {
  font-weight: 600;
}

.bs-cancel-group {
  margin-bottom: 0;
}

[data-theme="dark"] .bs-group {
  background: var(--ios-bg-secondary, #1c1c1e);
}
[data-theme="dark"] .bs-handle {
  background: var(--ios-fill, #48484a);
}

/* ============================================
   7. BUTTONS
   ============================================ */
.btn, button[class*="btn-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ios-sp-2);
  height: 44px;
  padding: 0 var(--ios-sp-5);
  border-radius: var(--ios-radius-md);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--ios-duration-fast) var(--ios-ease);
  white-space: nowrap;
  min-width: 44px;
  border: none;
  text-decoration: none;
}

.btn-primary, .btn[type="submit"] {
  background: var(--ios-accent);
  color: var(--ios-text-on-accent);
}
.btn-primary:hover { background: var(--ios-accent-hover); color: var(--ios-text-on-accent); }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  background: var(--ios-fill-tertiary);
  color: var(--ios-accent);
}
.btn-secondary:hover { background: var(--ios-fill-secondary); color: var(--ios-accent); }

.btn-danger, .btn-destructive {
  background: var(--ios-red);
  color: #fff;
}
.btn-danger:hover, .btn-destructive:hover { background: #E5352B; color: #fff; }

.btn-success {
  background: var(--ios-green);
  color: #fff;
}

.btn-warning {
  background: var(--ios-orange);
  color: #fff;
}

.btn-text, .btn-ghost, .btn-link {
  background: transparent;
  color: var(--ios-accent);
  height: auto;
  padding: var(--ios-sp-2) var(--ios-sp-3);
}
.btn-text:hover, .btn-ghost:hover, .btn-link:hover {
  background: var(--ios-accent-light);
  color: var(--ios-accent);
}

.btn-icon:not(.btn-primary):not(.btn-danger):not(.btn-success) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: var(--ios-radius-full);
  color: var(--ios-text-secondary);
  background: transparent;
  transition: all var(--ios-duration-fast);
}
.btn-icon:not(.btn-primary):not(.btn-danger):not(.btn-success):hover {
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-primary);
}
/* btn-icon base layout for all variants */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 0;
  border-radius: var(--ios-radius-full);
}

/* Ensure SVGs inside buttons are visible */
.btn-icon svg,
button svg {
  flex-shrink: 0;
}

.btn-sm {
  height: 34px;
  padding: 0 var(--ios-sp-3);
  font-size: 15px;
  border-radius: var(--ios-radius-sm);
}

.btn-lg {
  height: 50px;
  padding: 0 var(--ios-sp-6);
  font-size: 17px;
  border-radius: var(--ios-radius-md);
}

.btn:disabled, .btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.btn-group {
  display: flex;
  gap: var(--ios-sp-2);
}

/* ============================================
   8. FORM CONTROLS
   ============================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
  margin-bottom: var(--ios-sp-4);
}

.form-group label, .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-left: var(--ios-sp-4);
}

.form-control, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="url"],
input[type="search"], input[type="tel"], input[type="date"],
input[type="datetime-local"], select, textarea {
  width: 100%;
  height: 44px;
  padding: 0 var(--ios-sp-4);
  background-color: var(--ios-bg-primary);
  border: 1px solid var(--ios-separator-opaque);
  border-radius: var(--ios-radius-md);
  font-size: 17px;
  color: var(--ios-text-primary);
  transition: border-color var(--ios-duration-fast);
  -webkit-appearance: none;
  appearance: none;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--ios-accent);
  box-shadow: 0 0 0 3px var(--ios-accent-light);
}

.form-control::placeholder, input::placeholder, textarea::placeholder {
  color: var(--ios-text-tertiary);
}

textarea, textarea.form-control {
  height: auto;
  min-height: 88px;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  resize: vertical;
  line-height: 1.47;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233C3C43' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  padding-right: 36px;
  -webkit-appearance: none;
  appearance: none;
}

/* Toggle / Switch */
/* Container label (settings.js uses .toggle, admin.js uses .toggle-switch) */
.toggle, .toggle-switch, .switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Hide the actual checkbox inside toggle */
.toggle input[type="checkbox"],
.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* The visual slider track (settings.js / admin.js both use .toggle-slider) */
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--ios-fill);
  border-radius: 16px;
  transition: background var(--ios-duration-fast);
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--ios-duration-fast) var(--ios-ease);
}

/* Active state via checked checkbox */
.toggle input:checked + .toggle-slider,
.toggle-switch input:checked + .toggle-slider {
  background: var(--ios-green);
}

.toggle input:checked + .toggle-slider::after,
.toggle-switch input:checked + .toggle-slider::after {
  transform: translateX(20px);
}

/* Fallback: direct .toggle-switch / .switch used without inner .toggle-slider */
.toggle-switch:not(:has(.toggle-slider)),
.switch:not(:has(.toggle-slider)) {
  background: var(--ios-fill);
  border-radius: 16px;
  transition: background var(--ios-duration-fast);
}

.toggle-switch.active:not(:has(.toggle-slider)),
.switch.active:not(:has(.toggle-slider)) {
  background: var(--ios-green);
}

.toggle-switch:not(:has(.toggle-slider))::after,
.switch:not(:has(.toggle-slider))::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--ios-duration-fast) var(--ios-ease);
}

.toggle-switch.active:not(:has(.toggle-slider))::after,
.switch.active:not(:has(.toggle-slider))::after {
  transform: translateX(20px);
}

.toggle-label {
  font-size: 13px;
  color: var(--ios-text-secondary);
  margin-left: var(--ios-sp-2);
}

/* Checkbox & Radio */
input[type="checkbox"], input[type="radio"] {
  width: 22px;
  height: 22px;
  accent-color: var(--ios-accent);
}

.form-error, .error-message {
  color: var(--ios-red);
  font-size: 13px;
  padding-left: var(--ios-sp-4);
}

.form-hint {
  color: var(--ios-text-secondary);
  font-size: 13px;
  padding-left: var(--ios-sp-4);
}

/* Search input */
.search-input, input[type="search"] {
  height: 36px;
  padding: 0 var(--ios-sp-3) 0 36px;
  background: var(--ios-fill-tertiary);
  border: none;
  border-radius: var(--ios-radius-sm);
  font-size: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233C3C4399' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.search-input:focus, input[type="search"]:focus {
  box-shadow: none;
  background-color: var(--ios-fill-secondary);
}

/* ============================================
   9. iOS GROUPED LIST
   ============================================ */
.ios-list {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  margin: 0 var(--ios-sp-4) var(--ios-sp-6);
  overflow: hidden;
}

.ios-list-header {
  font-size: 13px;
  font-weight: 400;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: var(--ios-sp-6) var(--ios-sp-4) var(--ios-sp-2);
  margin: 0 var(--ios-sp-4);
}

.ios-list-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  position: relative;
}

.ios-list-row + .ios-list-row {
  border-top: 0.5px solid var(--ios-separator);
  margin-left: var(--ios-sp-4);
  padding-left: 0;
}

.ios-list-row-label {
  flex: 1;
  font-size: 17px;
  color: var(--ios-text-primary);
}

.ios-list-row-value {
  font-size: 17px;
  color: var(--ios-text-secondary);
  margin-right: var(--ios-sp-2);
}

/* Chevron indicator */
.ios-list-row-chevron::after, .has-chevron::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ios-text-quaternary);
  border-bottom: 2px solid var(--ios-text-quaternary);
  transform: rotate(-45deg);
  flex-shrink: 0;
}

/* ============================================
   10. AVATARS
   ============================================ */
.avatar, .user-avatar, .chat-avatar img, .message-avatar img {
  width: 40px;
  height: 40px;
  border-radius: var(--ios-radius-full);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ios-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  position: relative;
}

.avatar img, .user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ios-radius-full);
}

.avatar-sm { width: 28px; height: 28px; }
.avatar-md { width: 40px; height: 40px; }
.avatar-lg { width: 56px; height: 56px; }
.avatar-xl { width: 80px; height: 80px; }
.avatar-xxl { width: 100px; height: 100px; }

.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #fff;
  background: var(--ios-accent);
}

.online-indicator, .status-indicator {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  max-width: 12px;
  max-height: 12px;
  border-radius: 50%;
  background: var(--ios-green);
  border: 2px solid var(--ios-bg-primary);
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  box-sizing: border-box;
  flex-shrink: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
}

.status-indicator.offline { background: var(--ios-text-tertiary); }

/* ============================================
   11. BADGES & PILLS
   ============================================ */
.badge, .unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ios-red);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.badge-primary { background: var(--ios-accent); }
.badge-success { background: var(--ios-green); }
.badge-warning { background: var(--ios-orange); }
.badge-danger { background: var(--ios-red); }
.badge-info { background: var(--ios-teal); }

.pill, .status-pill, .tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--ios-sp-2);
  border-radius: var(--ios-radius-full);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.pill-accent { background: var(--ios-accent-light); color: var(--ios-accent); }
.pill-red { background: var(--ios-red-light); color: var(--ios-red); }
.pill-green { background: var(--ios-green-light); color: var(--ios-green); }
.pill-orange { background: var(--ios-orange-light); color: var(--ios-orange); }
.pill-purple { background: var(--ios-purple-light); color: var(--ios-purple); }

/* ============================================
   12. MODALS
   ============================================ */
.modal-overlay, .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  animation: fadeIn var(--ios-duration-normal) var(--ios-ease);
  padding: var(--ios-sp-4);
}

.modal-content, .modal {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-lg);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn var(--ios-duration-normal) var(--ios-ease);
  box-shadow: var(--ios-shadow-xl);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-4) var(--ios-sp-5);
  border-bottom: 0.5px solid var(--ios-separator);
  min-height: 52px;
}

.modal-header h2, .modal-header h3, .modal-title {
  font-size: 17px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}

.modal-close, .modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--ios-fill-secondary); }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ios-sp-5);
  -webkit-overflow-scrolling: touch;
}

.modal-footer, .modal-actions {
  display: flex;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-4) var(--ios-sp-5);
  border-top: 0.5px solid var(--ios-separator);
  justify-content: flex-end;
}

/* Alert-style modal (iOS alert) */
.modal-alert .modal-content {
  max-width: 270px;
  text-align: center;
  border-radius: 14px;
}

/* Fullscreen modal on mobile */
@media (max-width: 768px) {
  .modal-overlay, .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .modal-content, .modal {
    max-width: 100%;
    max-height: 95vh;
    border-radius: var(--ios-radius-xl) var(--ios-radius-xl) 0 0;
    animation: slideUp var(--ios-duration-normal) var(--ios-ease);
  }
  /* Push modal footer above the tab bar */
  .modal-footer, .modal-actions {
    padding-bottom: calc(var(--ios-sp-4) + var(--ios-tab-height) + var(--ios-safe-bottom));
  }
}

/* ============================================
   12b. TASK MODAL
   ============================================ */
.task-modal-large {
  max-width: 600px;
  width: 100%;
}

.task-modal-body {
  padding: var(--ios-sp-4) var(--ios-sp-5);
}

.task-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.task-form .form-group {
  margin-bottom: var(--ios-sp-4);
}

.task-form .form-group:last-child {
  margin-bottom: 0;
}

.task-form .form-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.task-form .form-label svg {
  opacity: 0.5;
  flex-shrink: 0;
}

/* User search wrapper for assignees/observers */
.user-search-wrapper {
  position: relative;
}

/* Selected users chips */
.selected-users {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--ios-sp-2);
}

.selected-users:empty {
  display: none;
}

.selected-user-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--ios-fill-tertiary);
  border-radius: var(--ios-radius-full);
  font-size: 13px;
  color: var(--ios-text-primary);
}

.selected-user-tag .remove-user {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ios-text-secondary);
  cursor: pointer;
  border: none;
  padding: 0;
  line-height: 1;
  margin-left: 2px;
}

/* File upload area */
.file-upload-area {
  border: 2px dashed var(--ios-separator-opaque);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-5);
  text-align: center;
  cursor: pointer;
  transition: all var(--ios-duration-fast);
  background: var(--ios-bg-secondary);
}

.file-upload-area:hover,
.file-upload-area.dragover {
  border-color: var(--ios-accent);
  background: var(--ios-accent-light);
}

.file-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ios-sp-2);
}

.file-upload-content svg {
  color: var(--ios-text-tertiary);
  opacity: 0.5;
}

.file-upload-text {
  font-size: 15px;
  color: var(--ios-text-secondary);
  margin: 0;
}

.file-upload-link {
  color: var(--ios-accent);
  cursor: pointer;
  font-weight: 500;
}

.file-upload-hint {
  font-size: 13px;
  color: var(--ios-text-tertiary);
  margin: 0;
}

/* Selected files list */
.selected-files {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
  margin-top: var(--ios-sp-2);
}

.selected-files:empty {
  display: none;
}

.selected-file-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  background: var(--ios-fill-tertiary);
  border-radius: var(--ios-radius-sm);
  font-size: 14px;
}

.selected-file-item .file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-file-item .file-size {
  font-size: 12px;
  color: var(--ios-text-tertiary);
  flex-shrink: 0;
}

.selected-file-item .remove-file {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
  color: var(--ios-text-secondary);
  flex-shrink: 0;
}

/* Assign-me checkbox */
.assign-me-checkbox {
  padding-left: var(--ios-sp-1);
}

.form-checkbox input[type="checkbox"] {
  display: none;
}

.form-checkbox .checkbox-mark {
  position: relative;
  transition: all var(--ios-duration-fast);
}

.form-checkbox input[type="checkbox"]:checked + .checkbox-mark {
  background: var(--ios-accent);
  border-color: var(--ios-accent);
}

.form-checkbox input[type="checkbox"]:checked + .checkbox-mark::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-checkbox .checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-checkbox .checkbox-label svg {
  opacity: 0.5;
}

/* Task modal mobile */
@media (max-width: 768px) {
  .task-modal-large {
    max-width: 100%;
  }
  .task-modal-body {
    padding: var(--ios-sp-4);
  }
}

/* ============================================
   13. TOASTS
   ============================================ */
.toast-container {
  position: fixed;
  top: calc(var(--ios-sp-4) + var(--ios-safe-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
  width: calc(100% - var(--ios-sp-8));
  max-width: 400px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-md);
  box-shadow: var(--ios-shadow-lg);
  font-size: 15px;
  color: var(--ios-text-primary);
  pointer-events: auto;
  animation: slideDown var(--ios-duration-normal) var(--ios-ease);
  border-left: 3px solid var(--ios-accent);
}

.toast-success { border-left-color: var(--ios-green); }
.toast-error { border-left-color: var(--ios-red); }
.toast-warning { border-left-color: var(--ios-orange); }
.toast-info { border-left-color: var(--ios-accent); }

.toast-icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.toast-icon-emoji {
  font-size: 24px;
}

.toast-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--ios-radius-full);
  object-fit: cover;
}

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

.toast-subtitle {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

.toast-title {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast-msg {
  font-size: 13px;
  color: var(--ios-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast-click-hint {
  font-size: 12px;
  color: var(--ios-accent);
}

.toast-action {
  padding: 4px 12px;
  border-radius: var(--ios-radius-sm);
  background: var(--ios-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.toast-close {
  margin-left: auto;
  cursor: pointer;
  color: var(--ios-text-tertiary);
  padding: var(--ios-sp-1);
  flex-shrink: 0;
  background: none;
  border: none;
}

.toast-hiding {
  animation: slideUp 0.3s ease forwards;
}

@keyframes slideUp {
  to { transform: translateY(-20px); opacity: 0; }
}

.toast-message { flex: 1; }

/* ============================================
   14. CARDS
   ============================================ */
.card {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
}

.card-body {
  padding: var(--ios-sp-4);
}

.card-footer {
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-top: 0.5px solid var(--ios-separator);
}

/* ============================================
   15. TOOLTIPS & DROPDOWNS
   ============================================ */
.tooltip {
  position: absolute;
  background: var(--ios-text-primary);
  color: var(--ios-text-on-accent);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-radius: var(--ios-radius-sm);
  font-size: 13px;
  white-space: nowrap;
  z-index: 4000;
  pointer-events: none;
  box-shadow: var(--ios-shadow-md);
}

.dropdown, .dropdown-menu, .context-menu {
  position: absolute;
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-md);
  box-shadow: var(--ios-shadow-lg);
  padding: var(--ios-sp-1);
  z-index: 2000;
  min-width: 180px;
  overflow: hidden;
}

.dropdown-item, .context-menu-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-radius: var(--ios-radius-sm);
  font-size: 15px;
  color: var(--ios-text-primary);
  cursor: pointer;
  min-height: 36px;
  transition: background var(--ios-duration-fast);
}
.dropdown-item:hover, .context-menu-item:hover {
  background: var(--ios-bg-hover);
}

.dropdown-divider {
  height: 0.5px;
  background: var(--ios-separator);
  margin: var(--ios-sp-1) 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

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

@keyframes modalIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes slideInFromRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideInFromLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* ============================================
   16. AUTH PAGES
   ============================================ */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--ios-sp-6);
  background: var(--ios-bg-primary);
}

.login-box {
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.login-box h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: var(--ios-sp-2);
}

.login-subtitle {
  color: var(--ios-text-secondary);
  font-size: 15px;
  margin-bottom: var(--ios-sp-8);
}

.login-form, .auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-4);
}

.login-form .form-group {
  margin-bottom: 0;
  text-align: left;
}

.login-form .btn-primary, .auth-form .btn-primary {
  width: 100%;
  height: 50px;
  border-radius: var(--ios-radius-md);
  font-size: 17px;
  font-weight: 600;
  margin-top: var(--ios-sp-2);
}

.login-footer {
  margin-top: var(--ios-sp-6);
  color: var(--ios-text-secondary);
  font-size: 15px;
}

.login-footer a {
  color: var(--ios-accent);
  font-weight: 500;
}

/* Forgot password link on login page */
.forgot-password-link {
  text-align: center;
  margin-top: var(--ios-sp-1);
}

.forgot-password-link a {
  color: var(--ios-accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

/* ============================================
   FORGOT PASSWORD PAGE
   ============================================ */
.forgot-password-box {
  max-width: 400px;
}

.forgot-password-header {
  text-align: left;
  margin-bottom: var(--ios-sp-6);
}

.forgot-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ios-accent);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.forgot-icon {
  margin-bottom: var(--ios-sp-4);
}

.forgot-icon svg {
  display: inline-block;
}

.forgot-icon-success svg {
  filter: drop-shadow(0 2px 8px rgba(52, 199, 89, 0.3));
}

.forgot-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 var(--ios-sp-2) 0;
  color: var(--ios-label-primary);
}

.forgot-subtitle {
  font-size: 15px;
  color: var(--ios-label-secondary);
  margin: 0 0 var(--ios-sp-6) 0;
  line-height: 1.4;
}

/* Method selection buttons */
.forgot-methods {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-3);
}

.forgot-method-btn {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  width: 100%;
  padding: 14px 16px;
  background: var(--ios-bg-secondary);
  border: 1px solid var(--ios-separator);
  border-radius: var(--ios-radius-md);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-align: left;
  font-family: inherit;
  color: var(--ios-label-primary);
}

.forgot-method-btn:hover {
  background: var(--ios-bg-tertiary);
}

.forgot-method-btn:active {
  transform: scale(0.98);
}

.forgot-method-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}

.forgot-method-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.forgot-method-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.forgot-method-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--ios-label-primary);
}

.forgot-method-desc {
  font-size: 13px;
  color: var(--ios-label-secondary);
}

/* Code input digits */
.forgot-code-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: var(--ios-sp-4);
}

.forgot-code-digit {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  border: 2px solid var(--ios-separator);
  border-radius: var(--ios-radius-sm);
  background: var(--ios-bg-secondary);
  color: var(--ios-label-primary);
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}

.forgot-code-digit:focus {
  border-color: var(--ios-accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Link-style button */
.btn-link {
  background: none;
  border: none;
  color: var(--ios-accent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: var(--ios-sp-2);
}

.btn-link:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ============================================
   EMAIL VERIFICATION PAGE
   ============================================ */
.verify-email-box {
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.verify-email-icon {
  margin-bottom: var(--ios-sp-4);
}

.verify-email-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 var(--ios-sp-2) 0;
  color: var(--ios-label-primary);
}

.verify-email-subtitle {
  font-size: 15px;
  color: var(--ios-label-secondary);
  margin: 0 0 var(--ios-sp-6) 0;
  line-height: 1.5;
}

.verify-email-subtitle strong {
  color: var(--ios-label-primary);
  font-weight: 600;
}

.verify-code-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: var(--ios-sp-4);
}

.verify-code-digit {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  border: 2px solid var(--ios-separator);
  border-radius: var(--ios-radius-sm);
  background: var(--ios-bg-secondary);
  color: var(--ios-label-primary);
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}

.verify-code-digit:focus {
  border-color: var(--ios-accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.verify-success-message {
  color: #34c759;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--ios-sp-3);
  text-align: center;
}

.verify-resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ios-sp-2);
  margin-top: var(--ios-sp-4);
}

.verify-resend-text {
  font-size: 14px;
  color: var(--ios-label-secondary);
}

/* Register form reuses login styles */
.register-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--ios-sp-6);
  background: var(--ios-bg-primary);
}

/* ============================================
   17. CHAT LIST
   ============================================ */
.chat-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  min-height: 44px;
  background: var(--ios-bg-primary);
  border-bottom: 0.5px solid var(--ios-separator);
}

.chat-list-header h2, .chat-list-header h3 {
  font-size: 20px;
  font-weight: 700;
}

.chat-list-search {
  padding: var(--ios-sp-2) var(--ios-sp-4);
  background: var(--ios-bg-primary);
}

.chat-list-search input {
  width: 100%;
  height: 36px;
  padding: 0 var(--ios-sp-3) 0 36px;
  background: var(--ios-fill-tertiary);
  border: none;
  border-radius: var(--ios-radius-sm);
  font-size: 17px;
}

.chat-rooms-list, .chat-list-rooms {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Swipe wrapper */
.chat-item-swipe {
  position: relative;
  overflow: hidden;
}
.chat-item-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: stretch;
}
/* Only show swipe actions on touch devices (mobile) */
@media (pointer: coarse) {
  .chat-item-actions {
    display: flex;
  }
  /* Prevent transparent hover from revealing swipe buttons underneath */
  .chat-item:hover {
    background: var(--ios-bg-primary, #fff);
  }
}
.chat-swipe-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  gap: 4px;
  cursor: pointer;
}
.chat-swipe-mute { background: var(--ios-orange, #FF9500); }
.chat-swipe-delete { background: var(--ios-red, #FF3B30); }

.chat-item-chevron {
  flex-shrink: 0;
  color: var(--ios-text-quaternary, #c7c7cc);
  margin-left: 4px;
}

.chat-item-muted-icon {
  flex-shrink: 0;
  color: var(--ios-text-tertiary, #8e8e93);
  margin-left: 2px;
  opacity: 0.7;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  cursor: pointer;
  transition: background var(--ios-duration-fast), transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
  position: relative;
  min-height: 76px;
  background: var(--ios-bg-primary, #fff);
}

.chat-item:hover {
  background: var(--ios-bg-hover);
}

.chat-item:active {
  background: var(--ios-bg-active);
}

.chat-item.chat-active, .chat-item.active {
  background: var(--ios-accent-light);
}

.chat-item-swipe + .chat-item-swipe .chat-item,
.chat-item + .chat-item {
  border-top: 0.5px solid var(--ios-separator);
}

.chat-avatar {
  position: relative;
  flex-shrink: 0;
}

.chat-avatar img {
  width: 52px;
  height: 52px;
  border-radius: var(--ios-radius-full);
  object-fit: cover;
}

/* Chat list avatar initials — match 52px image size */
.chat-item > .avatar {
  width: 52px;
  height: 52px;
  font-size: 20px;
  position: relative;
}

.chat-avatar .online-dot, .chat-avatar .online-indicator,
.chat-item > .avatar .online-dot, .chat-item > .avatar .online-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ios-green);
  border: 2px solid var(--ios-bg-primary);
  position: absolute;
  bottom: 0;
  right: 0;
}

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

.chat-info-name, .chat-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ios-sp-2);
}

.chat-info-name h4, .chat-name span:first-child {
  font-size: 17px;
  font-weight: 600;
  color: var(--ios-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-time {
  font-size: 13px;
  color: var(--ios-text-secondary);
  flex-shrink: 0;
}

.chat-last-message {
  font-size: 15px;
  color: var(--ios-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-unread {
  font-weight: 600;
  color: var(--ios-text-primary);
}

.unread-count, .chat-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ios-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: var(--ios-sp-2);
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ios-sp-10) var(--ios-sp-6);
  text-align: center;
  color: var(--ios-text-secondary);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: var(--ios-sp-4);
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 20px;
  color: var(--ios-text-primary);
  margin-bottom: var(--ios-sp-2);
}

.empty-state p {
  font-size: 15px;
  max-width: 280px;
}

.empty-state-small {
  padding: var(--ios-sp-6) var(--ios-sp-4);
  font-size: 13px;
  color: var(--ios-text-tertiary);
  text-align: center;
}

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ios-sp-10);
  text-align: center;
  color: var(--ios-red);
}

/* ============================================
   18. CHAT WINDOW
   ============================================ */
.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--app-bg, var(--ios-bg-secondary));
}

.chat-window-header {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  min-height: var(--ios-nav-height);
  background: rgba(249,249,249,0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0.5px solid var(--ios-separator-opaque);
  position: relative;
  z-index: 50;
}

.chat-window-header .back-btn-mobile, .back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ios-accent);
  flex-shrink: 0;
}

.chat-window-header .chat-info-avatar img,
.chat-window-header .chat-avatar img {
  width: 36px;
  height: 36px;
}

.chat-window-header .chat-info-name h4 {
  font-size: 17px;
  font-weight: 600;
}

.chat-header-actions {
  display: flex;
  gap: var(--ios-sp-1);
  margin-left: auto;
}

/* Chat header three-dot dropdown menu */
.chat-header-menu-wrapper {
  position: relative;
  margin-left: auto;
}

.chat-header-dropdown {
  display: none;
  position: fixed;
  top: auto;
  right: var(--ios-sp-4);
  min-width: 220px;
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 1200;
  padding: var(--ios-sp-1) 0;
}

.chat-header-dropdown.open {
  display: block;
}

/* Mobile: bottom sheet style */
@media (max-width: 768px) {
  .chat-header-dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    border-radius: var(--ios-radius-xl) var(--ios-radius-xl) 0 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.2);
    padding: var(--ios-sp-2) 0 calc(var(--ios-sp-4) + var(--ios-safe-bottom));
    z-index: 1100;
    animation: slideUpSheet 0.25s ease-out;
  }

  .chat-header-dropdown::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--ios-separator-opaque);
    margin: var(--ios-sp-1) auto var(--ios-sp-2);
  }

  .chat-header-dropdown.open ~ .chat-menu-backdrop {
    display: block;
  }
}

@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Backdrop for mobile bottom sheet */
.chat-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1099;
}

[data-theme="dark"] .chat-header-dropdown {
  background: var(--ios-bg-elevated, #2c2c2e);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.chat-header-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  width: 100%;
  padding: 11px var(--ios-sp-4);
  background: none;
  border: none;
  font-size: 15px;
  color: var(--ios-text-primary);
  cursor: pointer;
  text-align: left;
}

.chat-header-dropdown-item:hover {
  background: var(--ios-fill-tertiary);
}

.chat-header-dropdown-item:active {
  background: var(--ios-fill-secondary, rgba(120,120,128,0.24));
}

.chat-header-dropdown-item svg {
  flex-shrink: 0;
  color: var(--ios-accent);
}

/* Message context menu overlay */
.msg-context-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.msg-context-menu {
  position: fixed;
  min-width: 240px;
  max-width: 280px;
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-lg);
  box-shadow: 0 12px 48px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.1);
  overflow: hidden;
  z-index: 1001;
}

[data-theme="dark"] .msg-context-menu {
  background: var(--ios-bg-elevated, #2c2c2e);
}

/* Emoji bar in context menu */
.ctx-emoji-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--ios-separator);
  overflow-x: auto;
}

.ctx-emoji-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--ios-radius-full);
  background: transparent;
  border: none;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}

.ctx-emoji-btn:hover {
  background: var(--ios-fill-tertiary);
  transform: scale(1.15);
}

.ctx-emoji-btn:active {
  transform: scale(0.9);
}

.ctx-emoji-more {
  color: var(--ios-text-secondary);
}

/* Full emoji grid (expanded from "more" button) */
.ctx-emoji-full-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ios-sp-1);
  padding: var(--ios-sp-3);
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ctx-emoji-full-grid .ctx-emoji-btn {
  width: 44px;
  height: 44px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--ios-radius-sm);
  cursor: pointer;
  transition: background var(--ios-duration-fast), transform 0.1s;
}

.ctx-emoji-full-grid .ctx-emoji-btn:hover {
  background: var(--ios-fill-tertiary);
}

.ctx-emoji-full-grid .ctx-emoji-btn:active {
  transform: scale(0.85);
}

/* Context menu items */
.ctx-menu-items {
  padding: var(--ios-sp-1) 0;
}

.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  width: 100%;
  padding: 11px var(--ios-sp-4);
  background: none;
  border: none;
  font-size: 15px;
  color: var(--ios-text-primary);
  cursor: pointer;
  text-align: left;
}

.ctx-menu-item:hover {
  background: var(--ios-fill-tertiary);
}

.ctx-menu-item:active {
  background: var(--ios-fill-secondary, rgba(120,120,128,0.24));
}

.ctx-menu-item svg {
  flex-shrink: 0;
  color: var(--ios-text-secondary);
}

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

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

.ctx-menu-separator {
  height: 0.5px;
  background: var(--ios-separator);
  margin: var(--ios-sp-1) 0;
}

/* Bottom sheet handle (mobile only) */
.ctx-handle {
  display: none;
}

/* Context menu as bottom sheet on mobile */
@media (max-width: 768px) {
  .msg-context-overlay {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .msg-context-menu.bottom-sheet-mode {
    position: relative !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    border-radius: 14px 14px 0 0;
    animation: slideUp 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .ctx-handle {
    display: block;
    width: 36px;
    height: 4px;
    background: var(--ios-fill-secondary);
    border-radius: 2px;
    margin: 8px auto 4px;
  }

  .msg-context-menu.bottom-sheet-mode .ctx-emoji-bar {
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
  }

  .msg-context-menu.bottom-sheet-mode .ctx-emoji-btn {
    width: 44px;
    height: 44px;
    font-size: 26px;
  }

  .msg-context-menu.bottom-sheet-mode .ctx-menu-items {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .msg-context-menu.bottom-sheet-mode .ctx-menu-item {
    padding: 14px 20px;
    font-size: 16px;
  }

  .ctx-cancel-btn {
    display: block;
    width: calc(100% - 24px);
    margin: 8px 12px;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--ios-fill-secondary, rgba(120,120,128,0.24));
    color: var(--ios-accent);
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    margin-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Selection mode styles */
.message.selection-mode {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.message.selected {
  background: rgba(0,122,255,0.08) !important;
  border-radius: var(--ios-radius-md);
}

[data-theme="dark"] .message.selected {
  background: rgba(0,122,255,0.18) !important;
}

/* Selection checkbox circle */
.msg-select-checkbox {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  border: 2.5px solid var(--ios-text-tertiary);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  transition: all 0.2s ease;
  margin-right: 4px;
}

.msg-select-checkbox.checked {
  background: var(--ios-accent);
  border-color: var(--ios-accent);
}

/* In own messages, checkbox on the right */
.message.own .msg-select-checkbox {
  order: 10;
  margin-right: 0;
  margin-left: 4px;
}

.selection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-2) var(--ios-sp-4);
  padding-bottom: calc(var(--ios-sp-2) + var(--ios-safe-bottom));
  background: var(--ios-bg-primary);
  border-top: 0.5px solid var(--ios-separator);
  gap: var(--ios-sp-2);
}

[data-theme="dark"] .selection-toolbar {
  background: var(--ios-bg-elevated, #1c1c1e);
}

.selection-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--ios-radius-sm);
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--ios-accent);
  cursor: pointer;
}

.selection-toolbar-btn:active {
  opacity: 0.6;
}

.selection-toolbar-btn--danger {
  color: var(--ios-red);
}

.selection-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--ios-text-primary);
  min-width: 24px;
  text-align: center;
}

/* Forward room picker */
.forward-room-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  cursor: pointer;
  border-radius: var(--ios-radius-sm);
}

.forward-room-item:hover {
  background: var(--ios-fill-tertiary);
}

.forward-room-item:active {
  background: var(--ios-fill-secondary, rgba(120,120,128,0.24));
}

.forward-room-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ios-text-primary);
}

/* Messages container */
.messages-container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--ios-sp-4) var(--ios-sp-4) var(--ios-sp-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Date separator */
.message-date-separator, .date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ios-sp-3) 0;
}

.message-date-separator span, .date-separator span {
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--ios-radius-full);
}

/* Message avatar in message list (used within .message containers) */
.message > .avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  align-self: flex-end;
  border-radius: var(--ios-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--ios-accent);
  overflow: hidden;
}

.message > .avatar.avatar-sm {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

.message > .avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--ios-radius-full);
  object-fit: cover;
}

/* Legacy message-avatar support */
.message-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  align-self: flex-end;
}

.message-avatar img {
  width: 32px;
  height: 32px;
  border-radius: var(--ios-radius-full);
  object-fit: cover;
}

/* Message container (the outer row) */
.message {
  display: flex;
  gap: var(--ios-sp-2);
  max-width: 80%;
  align-items: flex-end;
  position: relative;
}

.message.first, .message.single {
  margin-top: var(--ios-sp-2);
}

.message.own {
  align-self: flex-end;
  flex-direction: row-reverse;
}

/* Message bubble (the inner content) */
.message-content, .chat-message {
  position: relative;
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-radius: 18px;
  font-size: 17px;
  line-height: 1.35;
  word-break: break-word;
  max-width: 100%;
  flex: 1;
  min-width: 0;
}

.message:not(.own):not(.system) .message-content,
.message:not(.own):not(.system) .chat-message {
  background: var(--ios-bg-primary);
  color: var(--ios-text-primary);
}

.message.own .message-content,
.message.own .chat-message {
  background: var(--ios-accent);
  color: #fff;
}

/* Grouped bubble border-radius — non-own (left side) */
.message.single:not(.own) .message-content { border-radius: 18px 18px 18px 18px; }
.message.first:not(.own) .message-content { border-radius: 18px 18px 18px 4px; }
.message.middle:not(.own) .message-content { border-radius: 4px 18px 18px 4px; }
.message.last:not(.own) .message-content { border-radius: 4px 18px 18px 18px; }

/* Grouped bubble border-radius — own (right side) */
.message.own.single .message-content { border-radius: 18px 18px 18px 18px; }
.message.own.first .message-content { border-radius: 18px 18px 4px 18px; }
.message.own.middle .message-content { border-radius: 18px 4px 4px 18px; }
.message.own.last .message-content { border-radius: 18px 4px 18px 18px; }

/* Bubble tails — own (right side) */
.message.own.last .message-content::after,
.message.own.single .message-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -6px;
  width: 12px;
  height: 12px;
  background: var(--ios-accent);
  clip-path: path('M 0 0 Q 0 12 12 12 L 0 12 Z');
}

/* Bubble tails — non-own (left side) */
.message.last:not(.own) .message-content::after,
.message.single:not(.own) .message-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -6px;
  width: 12px;
  height: 12px;
  background: var(--ios-bg-primary);
  clip-path: path('M 12 0 Q 12 12 0 12 L 12 12 Z');
}

/* Hidden time for grouped middle/first messages */
.message-time.hidden-time {
  display: none;
}

.chat-sender, .message-sender {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-accent);
  margin-bottom: 2px;
}

.message.own .chat-sender,
.message.own .message-sender {
  display: none;
}

.message-text, .chat-message-text {
  word-break: break-word;
}

.message-text a {
  text-decoration: underline;
}

.message.own .message-text a {
  color: rgba(255,255,255,0.9);
}

.chat-time, .message-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  font-size: 11px;
  color: var(--ios-text-tertiary);
  margin-top: 2px;
  text-align: right;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.message.own .chat-time,
.message.own .message-time {
  color: rgba(255,255,255,0.7);
}

/* System messages */
.message.system, .system-message {
  align-self: center;
  max-width: 90%;
}

.message.system .message-content {
  background: transparent;
  color: var(--ios-text-secondary);
  font-size: 13px;
  text-align: center;
  border-radius: 0;
  padding: var(--ios-sp-1) var(--ios-sp-3);
}

/* Message actions removed — using context menu / bottom sheet instead */

/* Reply preview inside message bubble */
.message-reply {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 4px 10px;
  background: rgba(0,0,0,0.06);
  border-left: 2px solid var(--ios-accent);
  border-radius: 0 6px 6px 0;
  margin-bottom: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.message-reply:active {
  background: rgba(0,0,0,0.1);
}

.message.own .message-reply {
  background: rgba(255,255,255,0.15);
  border-left-color: rgba(255,255,255,0.6);
}

.message.own .message-reply:active {
  background: rgba(255,255,255,0.25);
}

.reply-preview-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.reply-preview-author {
  font-weight: 600;
  color: var(--ios-accent);
  font-size: 12px;
  line-height: 1.3;
}

.message.own .reply-preview-author {
  color: rgba(255,255,255,0.85);
}

.reply-preview-text {
  color: var(--ios-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.3;
}

.message.own .reply-preview-text {
  color: rgba(255,255,255,0.65);
}

/* Reply bar above input */
.reply-bar {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  background: var(--ios-bg-primary);
  border-top: 0.5px solid var(--ios-separator);
  border-left: 3px solid var(--ios-accent);
  font-size: 13px;
}

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

.reply-bar-author {
  font-weight: 600;
  color: var(--ios-accent);
  font-size: 13px;
}

.reply-bar-text {
  color: var(--ios-text-secondary);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-bar-close {
  flex-shrink: 0;
  color: var(--ios-text-tertiary);
}

/* Forwarded message label */
.message-forwarded {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  color: var(--ios-accent);
  margin-bottom: 2px;
}

.message.own .message-forwarded {
  color: rgba(255,255,255,0.7);
}

/* File attachments in messages */
.message-file, .message-attachment {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  background: var(--ios-fill-tertiary);
  border-radius: var(--ios-radius-sm);
  margin-top: var(--ios-sp-1);
  cursor: pointer;
}

.message-file-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ios-accent-light);
  border-radius: var(--ios-radius-sm);
  color: var(--ios-accent);
  flex-shrink: 0;
}

.message-file-info {
  flex: 1;
  min-width: 0;
}

.message-file-name {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-file-size {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

/* Image in messages */
.message-image {
  max-width: 280px;
  border-radius: var(--ios-radius-md);
  overflow: hidden;
  cursor: pointer;
  background: transparent !important;
}

.message-image img {
  width: 100%;
  display: block;
  border-radius: var(--ios-radius-md);
}

/* Own message with image: remove blue bg, no padding, overlay time */
.message.own .message-content:has(.message-image) {
  background: transparent;
  padding: 0;
  overflow: visible;
}
/* Hide tail on image-only messages */
.message .message-content:has(.message-image)::after { display: none; }

.message.own .message-content:has(.message-image) .message-image {
  border-radius: var(--ios-radius-lg);
  overflow: hidden;
}

.message.own .message-content:has(.message-image) .message-time {
  position: absolute;
  bottom: var(--ios-sp-2);
  right: var(--ios-sp-2);
  background: rgba(0,0,0,0.5);
  color: #fff !important;
  padding: 2px 8px;
  border-radius: var(--ios-radius-sm);
  font-size: 10px;
  z-index: 1;
}

.message.own .message-content:has(.message-image) .message-status {
  color: #fff !important;
}

.message.own .message-content:has(.message-image) .message-status.read {
  color: rgba(255,255,255,0.9) !important;
}

/* Also for non-own messages with images */
.message:not(.own) .message-content:has(.message-image) {
  background: transparent;
  padding: 0;
  overflow: visible;
}

.message:not(.own) .message-content:has(.message-image) .message-image {
  border-radius: var(--ios-radius-lg);
  overflow: hidden;
}

.message:not(.own) .message-content:has(.message-image) .username {
  padding: var(--ios-sp-1) var(--ios-sp-3) 0;
}

.message:not(.own) .message-content:has(.message-image) .message-time {
  position: absolute;
  bottom: var(--ios-sp-2);
  right: var(--ios-sp-2);
  background: rgba(0,0,0,0.5);
  color: #fff !important;
  padding: 2px 8px;
  border-radius: var(--ios-radius-sm);
  font-size: 10px;
  z-index: 1;
}

/* When message has BOTH text and image, keep background */
.message.own .message-content:has(.message-image):has(.message-text) {
  background: var(--ios-accent);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  overflow: hidden;
}

.message.own .message-content:has(.message-image):has(.message-text) .message-image {
  margin: calc(-1 * var(--ios-sp-2)) calc(-1 * var(--ios-sp-3));
  margin-bottom: var(--ios-sp-2);
  max-width: calc(100% + 2 * var(--ios-sp-3));
  border-radius: 0;
}

.message.own .message-content:has(.message-image):has(.message-text) .message-time {
  position: static;
  background: transparent;
  color: rgba(255,255,255,0.7) !important;
  padding: 0;
}

/* Typing indicator */
.typing-indicator {
  font-size: 13px;
  color: var(--ios-text-secondary);
  padding: var(--ios-sp-1) var(--ios-sp-4);
  font-style: italic;
}

/* Loading older messages indicator */
.loading-older-messages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  color: var(--ios-text-secondary);
  font-size: 13px;
  animation: fadeIn 0.2s ease;
}

.loading-older-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ios-separator-opaque);
  border-top-color: var(--ios-accent);
  border-radius: 50%;
  animation: spinLoader 0.7s linear infinite;
}

@keyframes spinLoader {
  to { transform: rotate(360deg); }
}

/* ============================================
   19. MESSAGE INPUT BAR
   ============================================ */
.message-input-container {
  display: flex;
  align-items: flex-end;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  background: var(--ios-bg-primary);
  border-top: 0.5px solid var(--ios-separator);
}

.message-input-container textarea,
.message-input-container .message-input {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  padding: var(--ios-sp-2) var(--ios-sp-3);
  background: var(--ios-fill-tertiary);
  border: none;
  border-radius: 18px;
  font-size: 17px;
  line-height: 1.35;
  resize: none;
  -webkit-appearance: none;
}

.message-input-container textarea:focus,
.message-input-container .message-input:focus {
  box-shadow: none;
  background: var(--ios-fill-secondary);
}

.message-input-actions {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-1);
}

.message-input-container .btn-icon,
.message-input-container button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ios-radius-full);
  color: var(--ios-text-secondary);
  flex-shrink: 0;
}

.message-input-container .send-btn,
.message-input-container #send-btn {
  background: var(--ios-accent) !important;
  color: #fff !important;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}

.message-input-container .send-btn:hover,
.message-input-container #send-btn:hover {
  background: var(--ios-accent-hover) !important;
  transform: scale(1.05);
}

.message-input-container .send-btn:active,
.message-input-container #send-btn:active {
  transform: scale(0.92);
}

/* iOS Input Bar refinement */
.ios-input-bar {
  gap: 6px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0));
  background: var(--ios-bg-primary);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.ios-input-pill {
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: var(--ios-fill-tertiary);
  border-radius: 20px;
  min-height: 36px;
  overflow: hidden;
}
.ios-input-pill .message-input {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 8px 4px 8px 14px;
}
.ios-input-pill .ios-input-action {
  color: var(--ios-text-tertiary);
}

.ios-input-action {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ios-accent);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 0;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.ios-input-action:active { opacity: 0.5; }

.ios-send-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: var(--ios-accent) !important;
  color: #fff !important;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.ios-send-btn:hover { transform: scale(1.05); }
.ios-send-btn:active { transform: scale(0.92); }

/* Edit bar */
.edit-bar {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  background: var(--ios-bg-primary);
  border-top: 0.5px solid var(--ios-separator);
  border-left: 3px solid var(--ios-orange);
  font-size: 13px;
}

/* Voice recorder */
.voice-recorder, .voice-recorder-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.voice-recorder-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ios-bg-primary);
  padding: var(--ios-sp-6);
  border-radius: var(--ios-radius-xl) var(--ios-radius-xl) 0 0;
}

/* Audio player — Telegram-style voice message */
.audio-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  max-width: 320px;
  padding: 6px 4px 6px 0;
}

.audio-play-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ios-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s ease, background 0.15s ease;
}

.audio-play-btn:active {
  transform: scale(0.92);
}

/* Own messages: white button */
.message.own .audio-play-btn {
  background: rgba(255,255,255,0.25);
}

.audio-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audio-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  cursor: pointer;
  position: relative;
}

.audio-bar {
  flex: 1;
  min-width: 2px;
  max-width: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,0.15);
  transition: background 0.1s ease;
}

/* Own message bars: semi-transparent white */
.message.own .audio-bar {
  background: rgba(255,255,255,0.35);
}

/* Active (played) bars */
.audio-bar.active {
  background: var(--ios-accent);
}

.message.own .audio-bar.active {
  background: #fff;
}

/* Meta row: time */
.audio-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.audio-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  font-variant-numeric: tabular-nums;
}

.message.own .audio-time {
  color: rgba(255,255,255,0.7);
}

/* Playing state pulse on button */
.audio-player.playing .audio-play-btn {
  animation: audioPulse 1.5s ease-in-out infinite;
}

@keyframes audioPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,122,255,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(0,122,255,0); }
}

.message.own .audio-player.playing .audio-play-btn {
  animation: audioPulseOwn 1.5s ease-in-out infinite;
}

@keyframes audioPulseOwn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}

/* Scheduled call banner */
.scheduled-call-banner {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  background: var(--ios-green-light);
  border-bottom: 0.5px solid var(--ios-separator);
}

.banner-content {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  flex: 1;
}

.banner-icon {
  color: var(--ios-green);
}

.banner-info {
  flex: 1;
}

.banner-title {
  font-size: 15px;
  font-weight: 600;
}

.banner-time, .banner-timer {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.banner-actions {
  display: flex;
  gap: var(--ios-sp-2);
}

/* Emoji reactions on messages */
.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.message-reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: var(--ios-radius-full);
  background: var(--ios-fill-tertiary);
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
}

.message-reaction.active {
  border-color: var(--ios-accent);
  background: var(--ios-accent-light);
}

.message-reaction-count {
  font-size: 11px;
  color: var(--ios-text-secondary);
}

/* Polls in chat */
.poll-card {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-3);
  margin-top: var(--ios-sp-1);
}

.poll-card-header {
  font-size: 13px;
  color: var(--ios-text-secondary);
  margin-bottom: var(--ios-sp-2);
}

.poll-question {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--ios-sp-3);
}

.poll-option, .poll-item {
  padding: var(--ios-sp-2) var(--ios-sp-3);
  margin-bottom: var(--ios-sp-1);
  border-radius: var(--ios-radius-sm);
  background: var(--ios-fill-tertiary);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.poll-option:hover {
  background: var(--ios-fill-secondary);
}

.poll-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--ios-accent-light);
  border-radius: var(--ios-radius-sm);
  transition: width var(--ios-duration-normal);
}

.poll-votes {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.poll-button {
  margin-top: var(--ios-sp-2);
}

/* Poll create modal */
.poll-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ios-sp-4);
}

.poll-modal {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

.poll-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
}

.poll-modal-header h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.poll-modal-body {
  padding: var(--ios-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-3);
}

.poll-option-input-row {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
}

.poll-option-input-row input {
  flex: 1;
}

.poll-option-input-row .remove-option-btn {
  width: 32px;
  height: 32px;
  font-size: 18px;
  color: var(--ios-text-secondary);
  flex-shrink: 0;
}

.poll-settings {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
}

.poll-setting-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  font-size: 15px;
  color: var(--ios-text-primary);
  cursor: pointer;
}

.poll-setting-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--ios-accent);
}

.poll-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-top: 0.5px solid var(--ios-separator);
}

[data-theme="dark"] .poll-modal {
  background: var(--ios-bg-elevated, #2c2c2e);
}

/* Image/file preview modal */
.file-preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-preview-modal img {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--ios-radius-sm);
}

/* ============================================
   20. TASKS - LIST VIEW
   ============================================ */
.task-list-container, .task-list-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.task-list-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.task-list-header-main {
  flex-shrink: 0;
  background: var(--ios-bg-primary);
  padding: var(--ios-sp-4);
  padding-top: var(--ios-sp-3);
  border-bottom: 0.5px solid var(--ios-separator);
}

.task-list-title-row {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  margin-bottom: var(--ios-sp-3);
}

.task-list-title-row h2 {
  font-size: 28px;
  font-weight: 700;
  flex: 1;
}

/* Task search bar */
.task-list-search {
  position: relative;
  margin-bottom: var(--ios-sp-3);
}

.task-list-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ios-text-tertiary);
  pointer-events: none;
}

.task-search-input {
  width: 100%;
  height: 36px;
  padding: 0 var(--ios-sp-3) 0 36px;
  background: var(--ios-fill-tertiary);
  border: none;
  border-radius: var(--ios-radius-sm);
  font-size: 15px;
  color: var(--ios-text-primary);
  outline: none;
}

.task-search-input::placeholder {
  color: var(--ios-text-tertiary);
}

.task-search-input:focus {
  background: var(--ios-fill-secondary);
}

/* Task stats row */
.task-list-stats {
  display: flex;
  gap: var(--ios-sp-2);
}

.task-list-stats .stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ios-sp-2) var(--ios-sp-3);
  background: var(--ios-bg-secondary);
  border-radius: var(--ios-radius-sm);
}

.task-list-stats .stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ios-text-primary);
  line-height: 1.2;
}

.task-list-stats .stat-item.stat-active .stat-value {
  color: var(--ios-accent);
}

.task-list-stats .stat-item.stat-done .stat-value {
  color: var(--ios-green);
}

.task-list-stats .stat-label {
  font-size: 11px;
  color: var(--ios-text-secondary);
  margin-top: 2px;
}

.task-list-header, .task-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-bottom: 0.5px solid var(--ios-separator);
  min-height: 44px;
  gap: var(--ios-sp-2);
  flex-wrap: wrap;
}

.task-list-header h2, .task-board-header h2 {
  font-size: 20px;
  font-weight: 700;
}

/* iOS Segmented Control — Список / Доска */
.task-view-switcher {
  display: flex;
  background: var(--ios-fill-tertiary);
  border-radius: 9px;
  padding: 2px;
  margin: var(--ios-sp-3) var(--ios-sp-4);
}

.view-switch-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px var(--ios-sp-3);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--ios-duration-fast);
}

.view-switch-btn svg {
  flex-shrink: 0;
}

.view-switch-btn.active {
  background: var(--ios-bg-primary);
  color: var(--ios-text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}

/* Task filters */
.task-filters, .task-filter {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: wrap;
}

/* In main content — with bottom border */
.task-list-header-main .task-filters {
  background: var(--ios-bg-primary);
  border-bottom: 0.5px solid var(--ios-separator);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ios-sp-1);
  height: 32px;
  padding: 0 var(--ios-sp-3);
  border-radius: var(--ios-radius-full);
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--ios-duration-fast);
  border: none;
}

.filter-btn.active, .filter-btn.selected {
  background: var(--ios-accent);
  color: #fff;
}

.filter-btn:hover:not(.active) {
  background: var(--ios-fill-secondary);
}

.filter-count {
  font-size: 11px;
  background: rgba(255,255,255,0.3);
  padding: 1px 5px;
  border-radius: 8px;
}

.filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-md);
  box-shadow: var(--ios-shadow-lg);
  padding: var(--ios-sp-1);
  z-index: 100;
  min-width: 200px;
}

/* Desktop task toolbar — inline view switcher + filters + sort */
.task-desktop-toolbar {
  display: none; /* Hidden on mobile */
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) 0;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .task-desktop-toolbar {
    display: flex;
  }
}

.task-desktop-view-switcher {
  display: flex;
  background: var(--ios-fill-tertiary);
  border-radius: 8px;
  padding: 2px;
  flex-shrink: 0;
}

.task-desktop-view-switcher .view-switch-btn {
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--ios-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  transition: all var(--ios-duration-fast);
}

.task-desktop-view-switcher .view-switch-btn.active {
  background: var(--ios-bg-primary);
  color: var(--ios-text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.task-desktop-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--ios-sp-3);
  border-radius: var(--ios-radius-full);
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: all var(--ios-duration-fast);
}

.filter-chip.active {
  background: var(--ios-accent);
  color: #fff;
}

.filter-chip:hover:not(.active) {
  background: var(--ios-fill-secondary);
}

.task-desktop-sort {
  flex-shrink: 0;
}

.sort-select-inline {
  height: 30px;
  padding: 0 8px;
  padding-right: 28px;
  border-radius: 8px;
  border: 0.5px solid var(--ios-separator);
  background-color: var(--ios-bg-primary);
  color: var(--ios-text-primary);
  font-size: 13px;
  cursor: pointer;
}

.my-tasks-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ios-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.my-tasks-inline input[type="checkbox"] {
  accent-color: var(--ios-accent);
  width: 16px;
  height: 16px;
}

/* Task stats bar */
.task-stats, .board-stats {
  display: flex;
  gap: var(--ios-sp-4);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-bottom: 0.5px solid var(--ios-separator);
}

.board-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.board-stat-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--ios-text-primary);
}

.board-stat-label {
  font-size: 11px;
  color: var(--ios-text-secondary);
}

.my-tasks-toggle {
  display: flex;
  align-items: center;
  padding: var(--ios-sp-2) var(--ios-sp-4);
}

.my-tasks-toggle .toggle-label {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  font-size: 15px;
  color: var(--ios-text-primary);
  cursor: pointer;
}

.my-tasks-toggle .toggle-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  accent-color: var(--ios-accent);
  cursor: pointer;
}

/* Task sort dropdown */
.task-sort {
  padding: var(--ios-sp-2) var(--ios-sp-4);
}

.task-sort .input-sort,
.task-sort select {
  width: 100%;
  height: 36px;
  padding: 0 var(--ios-sp-3);
  padding-right: 32px;
  background-color: var(--ios-fill-tertiary);
  border: none;
  border-radius: var(--ios-radius-sm);
  font-size: 15px;
  color: var(--ios-text-primary);
  cursor: pointer;
}

/* Task list rows */
.task-grid, .task-list-content, .task-list-items {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* iOS inset grouped list for task rows */
.task-grid {
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  margin: 0;
}

.task-row {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  cursor: pointer;
  transition: background var(--ios-duration-fast);
  min-height: 60px;
}

.task-row:hover {
  background: var(--ios-bg-hover);
}

.task-row + .task-row {
  border-top: 0.5px solid var(--ios-separator);
}

.task-priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.task-priority-dot.critical, .task-priority-dot.urgent { background: var(--ios-red); }
.task-priority-dot.high { background: var(--ios-orange); }
.task-priority-dot.medium { background: var(--ios-yellow); }
.task-priority-dot.low { background: var(--ios-green); }

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

.task-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--ios-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.task-status-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--ios-sp-2);
  border-radius: var(--ios-radius-full);
  font-size: 12px;
  font-weight: 500;
}

.task-status-pill[data-status="new"] { background: var(--ios-accent-light); color: var(--ios-accent); }
.task-status-pill[data-status="in_progress"] { background: var(--ios-orange-light); color: #C77D00; }
.task-status-pill[data-status="review"] { background: var(--ios-purple-light); color: var(--ios-purple); }
.task-status-pill[data-status="done"], .task-status-pill[data-status="completed"] { background: var(--ios-green-light); color: #248A3D; }
.task-status-pill[data-status="rejected"] { background: var(--ios-red-light); color: var(--ios-red); }

.task-assignee {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-1);
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.task-assignee img {
  width: 20px;
  height: 20px;
  border-radius: var(--ios-radius-full);
}

.task-comments-count, .comments-count {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--ios-text-tertiary);
}

/* Task row inner structure (from task-list.js) */
.task-bulk-checkbox {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.task-status-pill-wrapper {
  position: relative;
  flex-shrink: 0;
}

.task-status-pill-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-md);
  box-shadow: var(--ios-shadow-lg);
  padding: var(--ios-sp-1);
  z-index: 100;
  min-width: 160px;
}

.task-status-pill-wrapper.open .task-status-pill-menu {
  display: block;
}

.pill-menu-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-radius: var(--ios-radius-sm);
  font-size: 15px;
  cursor: pointer;
  min-height: 36px;
  width: 100%;
  background: none;
}

.pill-menu-item:hover {
  background: var(--ios-bg-hover);
}

.pill-menu-item.active {
  font-weight: 600;
}

.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pill-dot.status-todo { background: var(--ios-accent); }
.pill-dot.status-in_progress { background: var(--ios-orange); }
.pill-dot.status-review { background: var(--ios-purple); }
.pill-dot.status-revision { background: var(--ios-red); }
.pill-dot.status-done { background: var(--ios-green); }

/* Status pill class-based selectors (task-list.js uses class not data-attr) */
.task-status-pill.status-todo,
.task-status-pill.status-new { background: var(--ios-accent-light); color: var(--ios-accent); }
.task-status-pill.status-in_progress { background: var(--ios-orange-light); color: #C77D00; }
.task-status-pill.status-review { background: var(--ios-purple-light); color: var(--ios-purple); }
.task-status-pill.status-done,
.task-status-pill.status-completed { background: var(--ios-green-light); color: #248A3D; }
.task-status-pill.status-revision,
.task-status-pill.status-rejected { background: var(--ios-red-light); color: var(--ios-red); }

.task-row-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-row-main {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
}

.task-row-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--ios-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-row-title.completed {
  text-decoration: line-through;
  color: var(--ios-text-tertiary);
}

.task-row-meta {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  font-size: 13px;
  color: var(--ios-text-secondary);
  flex-wrap: wrap;
}

.task-due {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--ios-text-secondary);
}

.task-due.overdue { color: var(--ios-red); font-weight: 600; }
.task-due.due-soon { color: var(--ios-orange); }
.task-due.due-today { color: var(--ios-red); font-weight: 500; }

.task-meta-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--ios-text-tertiary);
}

.task-meta-count.all-completed {
  color: var(--ios-green);
}

.task-assignee-avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--ios-radius-full);
  object-fit: cover;
}

.task-assignee-initials {
  width: 20px;
  height: 20px;
  border-radius: var(--ios-radius-full);
  background: var(--ios-accent-light);
  color: var(--ios-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
}

/* Task priority label */
.task-priority {
  font-size: 12px;
  font-weight: 500;
}

.task-priority.critical, .task-priority.urgent { color: var(--ios-red); }
.task-priority.high { color: var(--ios-orange); }
.task-priority.medium { color: var(--ios-yellow); }
.task-priority.low { color: var(--ios-green); }

/* Mobile filter drawer */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ios-radius-sm);
  color: var(--ios-text-secondary);
  cursor: pointer;
}

.task-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 900;
}

/* FAB */
.fab-button {
  position: fixed;
  bottom: calc(var(--ios-tab-height) + var(--ios-safe-bottom) + 16px);
  right: var(--ios-sp-4);
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--ios-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ios-shadow-lg);
  cursor: pointer;
  z-index: 100;
  transition: transform var(--ios-duration-fast), background var(--ios-duration-fast);
  overflow: hidden;
  border: none;
  padding: 0;
}

.fab-button:hover {
  background: var(--ios-accent-hover);
  transform: scale(1.05);
}

.fab-button:active {
  transform: scale(0.95);
}

.fab-label {
  display: none;
}

/* ============================================
   21. TASKS - BOARD VIEW (Kanban)
   ============================================ */
.task-board, .task-board-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.task-board-info {
  padding: var(--ios-sp-2) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-bottom: 0.5px solid var(--ios-separator);
}

.task-board-mobile-header {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  flex-wrap: wrap;
  border-bottom: 0.5px solid var(--ios-separator);
}

.task-board-mobile-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.task-board-mobile-header .task-desktop-toolbar {
  width: 100%;
}

.task-board-header-actions {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-1);
  margin-left: auto;
}

.task-board-columns {
  display: flex;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3);
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--app-bg, var(--ios-bg-secondary));
}

.task-column, .board-column {
  min-width: 260px;
  max-width: 320px;
  flex: 1;
  flex-shrink: 0;
  background: var(--ios-bg-tertiary, var(--ios-bg-secondary));
  border-radius: var(--ios-radius-md);
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.task-column-header, .column-header {
  padding: var(--ios-sp-3);
  font-size: 15px;
  font-weight: 600;
  color: var(--ios-text-primary);
}

.column-title {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
}

.column-title h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.column-icon-wrapper {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.column-icon-wrapper.todo { background: var(--ios-text-tertiary); }
.column-icon-wrapper.in_progress, .column-icon-wrapper.in-progress { background: var(--ios-accent); }
.column-icon-wrapper.review { background: var(--ios-orange, #FF9500); }
.column-icon-wrapper.revision { background: var(--ios-purple, #AF52DE); }
.column-icon-wrapper.done { background: var(--ios-green); }

.task-column-count, .column-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  background: var(--ios-fill-tertiary);
  padding: 1px 8px;
  border-radius: var(--ios-radius-full);
  margin-left: auto;
}

.task-column-body, .task-column-cards, .column-cards {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--ios-sp-2) var(--ios-sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
}

.loading-cards {
  padding: var(--ios-sp-4);
  text-align: center;
  color: var(--ios-text-secondary);
}

.no-tasks {
  padding: var(--ios-sp-4);
  text-align: center;
  font-size: 13px;
  color: var(--ios-text-tertiary);
}

.task-card {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-3);
  cursor: pointer;
  transition: box-shadow var(--ios-duration-fast), transform var(--ios-duration-fast);
  box-shadow: var(--ios-shadow-sm);
}

.task-card:hover {
  box-shadow: var(--ios-shadow-md);
}

.task-card.dragging {
  opacity: 0.5;
  transform: rotate(3deg);
}

.task-column.drag-over, .task-column.task-drag-over {
  background: var(--ios-accent-light);
}

.task-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ios-sp-2);
}

.task-card-content .task-title, .task-card-body .task-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: var(--ios-sp-2);
  white-space: normal;
}

.task-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ios-sp-2);
  font-size: 12px;
  color: var(--ios-text-secondary);
}

.task-card-footer .avatar, .task-card-footer img {
  width: 24px;
  height: 24px;
  border-radius: var(--ios-radius-full);
}

/* Board cards (Kanban view) */
.board-card {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-3);
  cursor: pointer;
  transition: box-shadow var(--ios-duration-fast), transform var(--ios-duration-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 0.5px solid var(--ios-separator);
  position: relative;
}

.board-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.board-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.board-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.board-card.due-overdue {
  border-left: 3px solid var(--ios-red);
}

.board-card.due-today {
  border-left: 3px solid var(--ios-orange);
}

.board-card.due-soon {
  border-left: 3px solid var(--ios-accent);
}

.board-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ios-sp-2);
}

.board-card-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
}

.board-card-priority.priority-urgent {
  color: var(--ios-red);
  background: rgba(255,59,48,0.12);
}

.board-card-priority.priority-high {
  color: var(--ios-orange);
  background: rgba(255,149,0,0.12);
}

.board-card-priority.priority-medium {
  color: var(--ios-accent);
  background: rgba(0,122,255,0.12);
}

.board-card-priority.priority-low {
  color: var(--ios-green);
  background: rgba(52,199,89,0.12);
}

.board-card-actions {
  display: flex;
  gap: var(--ios-sp-1);
  opacity: 0;
  transition: opacity var(--ios-duration-fast);
}

.board-card:hover .board-card-actions {
  opacity: 1;
}

.btn-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--ios-text-secondary);
  cursor: pointer;
  transition: background var(--ios-duration-fast);
}

.btn-card-action:hover {
  background: var(--ios-fill-tertiary);
  color: var(--ios-accent);
}

.board-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ios-text-primary);
  margin: 0 0 var(--ios-sp-1) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.board-card-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ios-text-secondary);
  margin: 0 0 var(--ios-sp-2) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.board-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ios-sp-2);
  padding-top: var(--ios-sp-2);
  border-top: 0.5px solid var(--ios-separator);
}

.board-card-meta {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.board-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--ios-text-tertiary);
  white-space: nowrap;
}

.board-meta-item svg {
  flex-shrink: 0;
}

.board-meta-item.due-badge.due-overdue {
  color: var(--ios-red);
}

.board-meta-item.due-badge.due-today {
  color: var(--ios-orange);
}

.board-meta-item.due-badge.due-soon {
  color: var(--ios-accent);
}

.board-meta-item.board-subtasks.all-completed {
  color: var(--ios-green);
}

.board-card-assignees {
  display: flex;
  flex-shrink: 0;
  margin-left: var(--ios-sp-2);
}

.board-card-assignees .avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--ios-radius-full);
  border: 2px solid var(--ios-bg-primary);
  font-size: 9px;
  margin-left: -6px;
}

.board-card-assignees .avatar:first-child {
  margin-left: 0;
}

.board-card-assignees .avatar-more {
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
}

.board-empty-column {
  padding: var(--ios-sp-6) var(--ios-sp-4);
  text-align: center;
}

.board-empty-column p {
  font-size: 13px;
  color: var(--ios-text-tertiary);
  margin: 0;
}

/* Dark theme board cards */
[data-theme="dark"] .board-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .board-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .board-card-assignees .avatar {
  border-color: var(--ios-bg-secondary);
}

/* ============================================
   22. TASKS - DETAIL VIEW
   ============================================ */
.task-detail-container, .task-detail-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--app-bg, var(--ios-bg-secondary));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.task-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-bottom: 0.5px solid var(--ios-separator);
  min-height: 44px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.task-detail-header .back-btn, .task-detail-header .back-btn-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ios-accent);
  width: 36px;
  height: 36px;
}

.task-detail-body {
  padding: var(--ios-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-4);
}

.task-detail-title {
  font-size: 22px;
  font-weight: 700;
  padding: var(--ios-sp-2) 0;
}

.task-detail-title input, .task-detail-title textarea {
  width: 100%;
  font-size: 22px;
  font-weight: 700;
  background: transparent;
  border: none;
}

/* Task detail header info (priority + status badges row) */
.task-detail-header-info {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--ios-sp-1);
}

/* Priority badge */
.task-priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--ios-radius-full);
  font-size: 13px;
  font-weight: 600;
}

.task-priority-badge.priority-low {
  background: var(--ios-green-light);
  color: #248A3D;
}

.task-priority-badge.priority-medium {
  background: var(--ios-accent-light);
  color: var(--ios-accent);
}

.task-priority-badge.priority-high {
  background: var(--ios-orange-light);
  color: #C77D00;
}

.task-priority-badge.priority-urgent {
  background: var(--ios-red-light);
  color: var(--ios-red);
}

/* Status badge */
.task-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--ios-radius-full);
  font-size: 13px;
  font-weight: 600;
}

.task-status-badge.status-todo {
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
}

.task-status-badge.status-in_progress {
  background: var(--ios-accent-light);
  color: var(--ios-accent);
}

.task-status-badge.status-review {
  background: var(--ios-purple-light);
  color: var(--ios-purple);
}

.task-status-badge.status-revision {
  background: var(--ios-orange-light);
  color: #C77D00;
}

.task-status-badge.status-done {
  background: var(--ios-green-light);
  color: #248A3D;
}

/* Status dropdown in task detail */
.task-status-dropdown {
  position: relative;
  display: inline-flex;
}

.task-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--ios-radius-full);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: filter var(--ios-duration-fast);
}

.task-status-btn:hover {
  filter: brightness(0.92);
}

.task-status-btn.status-todo {
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
}

.task-status-btn.status-in_progress {
  background: var(--ios-accent-light);
  color: var(--ios-accent);
}

.task-status-btn.status-review {
  background: var(--ios-purple-light);
  color: var(--ios-purple);
}

.task-status-btn.status-revision {
  background: var(--ios-orange-light);
  color: #C77D00;
}

.task-status-btn.status-done {
  background: var(--ios-green-light);
  color: #248A3D;
}

.task-status-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-md);
  box-shadow: var(--ios-shadow-lg);
  padding: var(--ios-sp-1);
  z-index: 100;
  min-width: 180px;
}

.task-status-menu.open {
  display: block;
}

.status-menu-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  width: 100%;
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-radius: var(--ios-radius-sm);
  font-size: 15px;
  border: none;
  background: transparent;
  color: var(--ios-text-primary);
  cursor: pointer;
}

.status-menu-item:hover {
  background: var(--ios-bg-hover);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.status-todo { background: var(--ios-text-tertiary); }
.status-dot.status-in_progress { background: var(--ios-accent); }
.status-dot.status-review { background: var(--ios-purple); }
.status-dot.status-revision { background: var(--ios-orange); }
.status-dot.status-done { background: var(--ios-green); }

/* ---- Participants section in task detail ---- */
.task-participants-section {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-3) var(--ios-sp-4);
}

.task-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ios-sp-2);
}

.participants-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.participant-row {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) 0;
  cursor: pointer;
  border-radius: var(--ios-radius-sm);
}

.participant-row:hover {
  background: var(--ios-bg-hover);
  margin: 0 calc(var(--ios-sp-2) * -1);
  padding-left: var(--ios-sp-2);
  padding-right: var(--ios-sp-2);
}

.participant-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.participant-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ios-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-role {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

/* Sidebar participant chips */
.task-sidebar-header {
  margin-bottom: var(--ios-sp-3);
}

.task-sidebar-badges {
  display: flex;
  gap: var(--ios-sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--ios-sp-2);
}

.task-sidebar-title {
  font-size: 17px;
  font-weight: 600;
}

.task-sidebar-section {
  margin-top: var(--ios-sp-3);
  padding-top: var(--ios-sp-3);
  border-top: 0.5px solid var(--ios-separator);
}

.task-sidebar-label {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  margin-bottom: var(--ios-sp-2);
}

.task-sidebar-participants {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-1);
}

.participant-chip {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-1) 0;
  cursor: pointer;
  border-radius: var(--ios-radius-sm);
}

.participant-chip:hover {
  background: var(--ios-bg-hover);
}

.participant-chip-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ios-text-primary);
}

.participant-chip-role {
  font-size: 12px;
  color: var(--ios-text-secondary);
  margin-left: auto;
}

.participant-chip.more {
  font-size: 13px;
  color: var(--ios-text-secondary);
  font-weight: 500;
}

/* Task detail metadata sections */
.task-detail-section {
  background: var(--ios-bg-primary);
}

.task-detail-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--ios-sp-3) var(--ios-sp-4);
}

.task-detail-row + .task-detail-row {
  border-top: 0.5px solid var(--ios-separator);
}

.task-detail-label {
  font-size: 15px;
  color: var(--ios-text-secondary);
  width: 120px;
  flex-shrink: 0;
}

.task-detail-value {
  flex: 1;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
}

/* Status picker */
.task-status-pill-menu, .status-menu {
  position: absolute;
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-md);
  box-shadow: var(--ios-shadow-lg);
  padding: var(--ios-sp-1);
  z-index: 100;
  min-width: 160px;
}

.status-menu-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-radius: var(--ios-radius-sm);
  font-size: 15px;
  cursor: pointer;
  min-height: 36px;
}

.status-menu-item:hover {
  background: var(--ios-bg-hover);
}

/* Task description */
.task-description {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-4);
}

.task-description h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  margin-bottom: var(--ios-sp-2);
}

.task-description-content {
  font-size: 17px;
  line-height: 1.47;
  word-break: break-word;
}

/* Task comments */
.task-comments {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.task-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
  font-size: 15px;
  font-weight: 600;
}

.task-comment {
  display: flex;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
}

.task-comment + .task-comment {
  border-top: 0.5px solid var(--ios-separator);
}

.task-comment-avatar img {
  width: 32px;
  height: 32px;
  border-radius: var(--ios-radius-full);
}

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

.task-comment-author {
  font-size: 15px;
  font-weight: 600;
}

.task-comment-date {
  font-size: 12px;
  color: var(--ios-text-tertiary);
}

.task-comment-text {
  font-size: 15px;
  line-height: 1.4;
  margin-top: 2px;
}

/* Task comment input */
.task-comment-form {
  display: flex;
  align-items: flex-end;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-top: 0.5px solid var(--ios-separator);
}

.task-comment-form textarea {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  padding: var(--ios-sp-2) var(--ios-sp-3);
  background: var(--ios-fill-tertiary);
  border: none;
  border-radius: 18px;
  resize: none;
}

/* Task create/edit form */
.task-create-form, .task-edit-form {
  padding: var(--ios-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-4);
}

/* Task detail layout (from task-detail.js) */
.task-detail-main-layout {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.task-detail-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-bottom: 0.5px solid var(--ios-separator);
  min-height: 44px;
  position: sticky;
  top: 0;
  z-index: 5;
  gap: var(--ios-sp-2);
  overflow: hidden;
}

.task-detail-header-bar h2 {
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.task-detail-actions {
  display: flex;
  gap: var(--ios-sp-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 1;
  min-width: 0;
}

.task-detail-actions .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .task-detail-actions .btn span,
  .task-detail-actions .btn:not(:first-child) {
    font-size: 12px;
  }
  .task-detail-actions {
    gap: var(--ios-sp-1);
  }
}

.task-detail-content-main {
  padding: var(--ios-sp-4);
}

.loading-task, .loading-comments, .loading-activity {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ios-sp-6);
  color: var(--ios-text-secondary);
}

.task-detail-columns {
  display: flex;
  gap: var(--ios-sp-4);
}

.task-detail-primary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-4);
}

.task-detail-secondary {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-4);
}

@media (max-width: 768px) {
  .task-detail-columns {
    flex-direction: column;
  }
  .task-detail-secondary {
    width: 100%;
    order: -1;
  }
}

/* Task action buttons (Take in work, Submit for review, etc.) */
.task-action-buttons {
  display: flex;
  gap: var(--ios-sp-2);
  flex-wrap: wrap;
  margin: var(--ios-sp-2) 0;
}

.btn-task-action {
  display: inline-flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  border-radius: var(--ios-radius-md);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ios-duration-fast);
  border: none;
}

.btn-action-progress {
  background: var(--ios-accent-light);
  color: var(--ios-accent);
}

.btn-action-review {
  background: var(--ios-purple-light);
  color: var(--ios-purple);
}

.btn-action-done {
  background: var(--ios-green-light);
  color: #248A3D;
}

.btn-action-rework {
  background: var(--ios-orange-light);
  color: #C77D00;
}

.btn-task-action:hover {
  filter: brightness(0.95);
}

/* Revision banner */
.revision-banner {
  background: var(--ios-orange-light);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  margin: var(--ios-sp-2) 0;
}

.revision-banner-header {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  font-size: 15px;
  font-weight: 500;
  color: #C77D00;
  margin-bottom: var(--ios-sp-1);
}

.revision-banner-reason {
  font-size: 15px;
  color: var(--ios-text-primary);
  line-height: 1.4;
}

/* Task metadata list (sidebar in detail view) */
.task-meta-list {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.task-meta-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  gap: var(--ios-sp-3);
}

.task-meta-row + .task-meta-row {
  border-top: 0.5px solid var(--ios-separator);
}

.task-meta-label {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  font-size: 13px;
  color: var(--ios-text-secondary);
  min-width: 80px;
  flex-shrink: 0;
}

.task-meta-value {
  flex: 1;
  font-size: 15px;
  color: var(--ios-text-primary);
  min-width: 0;
}

.task-due-date-value {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
}

.btn-edit-due-date {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ios-radius-full);
  color: var(--ios-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}

.btn-edit-due-date:hover {
  background: var(--ios-bg-hover);
  color: var(--ios-accent);
}

/* Task section labels — iOS Settings style */
.task-section-label {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--ios-sp-2);
  padding-left: var(--ios-sp-4);
}

.task-section-label .tab-count {
  font-size: 12px;
  font-weight: 500;
  background: var(--ios-fill-tertiary);
  padding: 1px 6px;
  border-radius: var(--ios-radius-full);
}

/* Task description block */
.task-description-block {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-4);
}

.task-description-block .ql-editor,
.task-description-block .rich-description-content {
  font-size: 17px;
  line-height: 1.47;
  word-break: break-word;
}

/* Inline comments in task detail */
.task-comments-inline {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.task-comments-inline-header {
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
}

.comments-list {
  max-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Comment input container */
.comment-input-container {
  display: flex;
  align-items: flex-end;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-top: 0.5px solid var(--ios-separator);
  background: var(--ios-bg-primary);
}

.comment-input {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  padding: var(--ios-sp-2) var(--ios-sp-3);
  background: var(--ios-fill-tertiary);
  border: none;
  border-radius: 18px;
  resize: none;
  font-size: 15px;
  line-height: 1.4;
}

.comment-input:focus {
  background: var(--ios-bg-primary);
  box-shadow: 0 0 0 1px var(--ios-accent);
}

/* Comment items */
.comment-item {
  display: flex;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-4);
}

.comment-item + .comment-item {
  border-top: 0.5px solid var(--ios-separator);
}

.comment-item .avatar {
  flex-shrink: 0;
  margin-top: 2px;
}

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

.comment-author {
  font-size: 14px;
  font-weight: 600;
  color: var(--ios-accent);
  cursor: pointer;
  margin-bottom: 2px;
}

.comment-text {
  font-size: 15px;
  color: var(--ios-text-primary);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

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

.comment-time {
  font-size: 12px;
  color: var(--ios-text-tertiary);
}

.comment-react-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--ios-text-tertiary);
  opacity: 0;
  transition: opacity 0.15s ease;
  line-height: 1;
}

.comment-item:hover .comment-react-btn {
  opacity: 1;
}

/* Comment reactions */
.comment-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.comment-reaction-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: var(--ios-radius-full);
  background: var(--ios-fill-tertiary);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.comment-reaction-item:hover {
  background: var(--ios-fill-secondary);
}

.comment-reaction-item.own {
  background: var(--ios-accent-light);
  color: var(--ios-accent);
}

/* Comment emoji picker */
.comment-emoji-picker {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.comment-emoji-option {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s ease, transform 0.1s ease;
}

.comment-emoji-option:hover {
  background: var(--ios-fill-tertiary);
  transform: scale(1.15);
}

/* Comment attachments */
.comment-attachments {
  display: flex;
  gap: var(--ios-sp-2);
  flex-wrap: wrap;
  margin-top: var(--ios-sp-2);
}

.comment-attachment-image {
  border-radius: var(--ios-radius-sm);
  overflow: hidden;
  cursor: pointer;
  max-width: 200px;
}

.comment-attachment-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ios-radius-sm);
}

.comment-attachment-video {
  position: relative;
  border-radius: var(--ios-radius-sm);
  overflow: hidden;
  cursor: pointer;
  max-width: 200px;
}

.comment-attachment-video video {
  display: block;
  width: 100%;
  height: auto;
}

.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
}

.comment-attachment-file {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  background: var(--ios-fill-tertiary);
  border-radius: var(--ios-radius-sm);
  text-decoration: none;
  color: var(--ios-text-primary);
  font-size: 13px;
}

.comment-attachment-file .file-size {
  color: var(--ios-text-tertiary);
  font-size: 12px;
}

.comment-pending-files {
  display: flex;
  gap: var(--ios-sp-2);
  padding: 0 var(--ios-sp-4);
  flex-wrap: wrap;
}

.comment-pending-files:empty {
  display: none;
}

/* Task activity bar */
.task-activity-bar {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
  margin-top: var(--ios-sp-4);
}

.activity-bar-toggle {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  font-size: 15px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  cursor: pointer;
  user-select: none;
}

.activity-bar-toggle:hover {
  background: var(--ios-bg-hover);
}

.toggle-chevron {
  margin-left: auto;
  transition: transform var(--ios-duration-fast);
  transform: rotate(180deg);
}

.task-activity-bar.expanded .toggle-chevron {
  transform: rotate(0deg);
}

/* Activity list hidden by default, shown when expanded */
.activity-list {
  display: none;
  border-top: 0.5px solid var(--ios-separator);
}

.task-activity-bar.expanded .activity-list {
  display: block;
}

/* Activity log items */
.activity-item {
  display: flex;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-4);
}

.activity-item + .activity-item {
  border-top: 0.5px solid var(--ios-separator);
}

.activity-item .avatar {
  flex-shrink: 0;
  margin-top: 2px;
}

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

.activity-text {
  font-size: 14px;
  line-height: 1.3;
}

.activity-user {
  font-weight: 600;
  color: var(--ios-accent);
  cursor: pointer;
}

.activity-action {
  color: var(--ios-text-secondary);
}

.activity-time {
  font-size: 12px;
  color: var(--ios-text-tertiary);
  margin-top: 2px;
}

.activity-details {
  margin-top: 4px;
}

.activity-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.change-old {
  color: var(--ios-text-tertiary);
  text-decoration: line-through;
}

.change-new {
  font-weight: 600;
  color: var(--ios-text-primary);
}

.activity-tag {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: var(--ios-radius-full);
  font-size: 12px;
  font-weight: 500;
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
}

.activity-subtask-title {
  font-size: 13px;
  color: var(--ios-text-secondary);
  font-style: italic;
}

/* Task info sidebar */
.task-info-sidebar {
  padding: var(--ios-sp-4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Subtasks section */
.subtasks-section {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.subtasks-header {
  padding: var(--ios-sp-3) var(--ios-sp-4);
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
}

.subtasks-header h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ios-text-primary);
  margin: 0;
}

.subtasks-counter {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-accent);
  margin-left: 4px;
}

.subtasks-progress {
  height: 4px;
  background: var(--ios-fill-tertiary);
  border-radius: 2px;
  margin: 0 var(--ios-sp-4) var(--ios-sp-2);
  overflow: hidden;
}

.subtasks-progress-bar {
  height: 100%;
  background: var(--ios-green);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.subtasks-list {
  padding: 0 var(--ios-sp-4);
}

.subtask-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) 0;
  min-height: 40px;
}

.subtask-item + .subtask-item {
  border-top: 0.5px solid var(--ios-separator);
}

.subtask-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ios-text-tertiary);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  color: transparent;
  transition: all 0.2s ease;
}

.subtask-item.completed .subtask-checkbox {
  background: var(--ios-green);
  border-color: var(--ios-green);
  color: #fff;
}

.subtask-title {
  flex: 1;
  font-size: 15px;
  color: var(--ios-text-primary);
  word-break: break-word;
}

.subtask-item.completed .subtask-title {
  text-decoration: line-through;
  color: var(--ios-text-tertiary);
}

.subtask-delete {
  width: 28px;
  height: 28px;
  border-radius: var(--ios-radius-full);
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--ios-text-tertiary);
  opacity: 0;
  transition: all 0.2s ease;
  padding: 0;
}

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

@media (hover: none) {
  .subtask-delete {
    opacity: 0.6;
  }
}

.subtask-delete:hover {
  background: var(--ios-red-light, rgba(255,59,48,0.12));
  color: var(--ios-red);
}

.subtask-add-form {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-4) var(--ios-sp-3);
  border-top: 0.5px solid var(--ios-separator);
}

.subtask-input {
  flex: 1;
  height: 36px;
  padding: 0 var(--ios-sp-3);
  background: var(--ios-fill-tertiary);
  border: none;
  border-radius: var(--ios-radius-sm);
  font-size: 15px;
  color: var(--ios-text-primary);
  outline: none;
}

.subtask-input::placeholder {
  color: var(--ios-text-tertiary);
}

.subtask-add-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--ios-radius-sm);
  background: var(--ios-accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.subtask-add-btn:hover {
  background: var(--ios-accent-hover, #0066D6);
}

/* Time tracking section */
.time-tracking-section {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.time-tracking-section:empty {
  display: none;
}

.time-tracking-header {
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
}

.time-total {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-accent);
  margin-left: auto;
}

.time-tracking-timer {
  padding: var(--ios-sp-3) var(--ios-sp-4);
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
}

.timer-running {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  width: 100%;
}

.timer-display {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ios-accent);
  flex: 1;
}

.time-by-user {
  padding: var(--ios-sp-2) var(--ios-sp-4);
  border-top: 0.5px solid var(--ios-separator);
}

.time-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: var(--ios-sp-2);
}

.time-user-row {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-1) 0;
}

.time-user-name {
  font-size: 14px;
  flex: 1;
  color: var(--ios-text-primary);
}

.time-user-duration {
  font-size: 14px;
  font-weight: 600;
  color: var(--ios-text-primary);
  font-variant-numeric: tabular-nums;
}

.time-logs-list {
  padding: var(--ios-sp-2) var(--ios-sp-4);
  border-top: 0.5px solid var(--ios-separator);
}

.time-log-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) 0;
}

.time-log-item + .time-log-item {
  border-top: 0.5px solid var(--ios-separator);
}

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

.time-log-user {
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-text-primary);
}

.time-log-date {
  font-size: 12px;
  color: var(--ios-text-tertiary);
}

.time-log-desc {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

.time-log-duration {
  font-size: 14px;
  font-weight: 600;
  color: var(--ios-text-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Dependencies section */
.dependencies-section {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.dependencies-section:empty {
  display: none;
}

/* Activity log */
.activity-bar, .activity-log {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.activity-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.activity-log-item {
  display: flex;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.activity-log-item + .activity-log-item {
  border-top: 0.5px solid var(--ios-separator);
}

/* Mobile task board pagination */
.mobile-page-nav, .mobile-paginated {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2);
}

.hidden-page {
  display: none !important;
}

/* ============================================
   23. HOME / DASHBOARD
   ============================================ */

/* --- CloudOS Toolbar (iCloud-style) --- */
.cloudos-toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

.cloudos-toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 var(--ios-sp-4);
  padding: 0 var(--ios-sp-4);
  height: 48px;
}

.cloudos-logo {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  cursor: pointer;
  color: rgba(255,255,255,0.9);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cloudos-logo svg {
  border-radius: 6px;
}

.cloudos-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
}

.cloudos-toolbar-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--ios-radius-full);
  background: rgba(255,255,255,0.12);
  border: none;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.cloudos-toolbar-btn:hover {
  background: rgba(255,255,255,0.22);
}

.cloudos-avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--ios-radius-full);
  border: 2px solid rgba(255,255,255,0.3);
  background: var(--ios-accent);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s;
}

.cloudos-avatar-btn:hover {
  border-color: rgba(255,255,255,0.6);
}

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

.cloudos-avatar-initials {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}

/* --- CloudOS User Dropdown --- */
.cloudos-user-dropdown {
  display: none;
  position: fixed;
  top: 52px;
  right: 16px;
  width: 280px;
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-lg);
  box-shadow: 0 12px 48px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 1200;
  overflow: hidden;
  animation: cloudosDropdownIn 0.2s ease-out;
}

.cloudos-user-dropdown.open {
  display: block;
}

@keyframes cloudosDropdownIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cloudos-dropdown-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1199;
}

.cloudos-dropdown-backdrop.open {
  display: block;
}

.cloudos-dropdown-header {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-4);
}

.cloudos-dropdown-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--ios-radius-full);
  overflow: hidden;
  background: var(--ios-accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.cloudos-dropdown-avatar .cloudos-avatar-initials {
  font-size: 17px;
}

.cloudos-dropdown-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cloudos-dropdown-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ios-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloudos-dropdown-email {
  font-size: 12px;
  color: var(--ios-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloudos-dropdown-divider {
  height: 0.5px;
  background: var(--ios-separator);
  margin: 0 var(--ios-sp-4);
}

.cloudos-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: 10px var(--ios-sp-4);
  font-size: 15px;
  color: var(--ios-text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.cloudos-dropdown-item:hover {
  background: var(--ios-fill-tertiary);
}

.cloudos-dropdown-item svg {
  color: var(--ios-accent);
  flex-shrink: 0;
}

.cloudos-dropdown-logout {
  color: var(--ios-red);
}

.cloudos-dropdown-logout svg {
  color: var(--ios-red);
}

/* --- CloudOS Apps Grid --- */
.cloudos-apps-grid {
  display: none;
  position: fixed;
  top: 52px;
  right: 56px;
  width: 320px;
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-lg);
  box-shadow: 0 12px 48px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 1200;
  padding: var(--ios-sp-5);
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ios-sp-4);
  animation: cloudosDropdownIn 0.2s ease-out;
}

.cloudos-apps-grid.open {
  display: grid;
}

.cloudos-apps-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1199;
}

.cloudos-apps-backdrop.open {
  display: block;
}

.cloudos-app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ios-sp-2);
  text-decoration: none;
  color: var(--ios-text-primary);
  cursor: pointer;
  padding: var(--ios-sp-2);
  border-radius: var(--ios-radius-md);
  transition: background 0.12s;
}

.cloudos-app-item:hover {
  background: var(--ios-fill-tertiary);
}

.cloudos-app-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cloudos-app-item span {
  font-size: 11px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  text-align: center;
}

/* --- CloudOS Hero (user avatar + name) --- */
/* Dark theme overrides for cloudos dropdown */
[data-theme="dark"] .cloudos-user-dropdown,
[data-theme="dark"] .cloudos-apps-grid {
  background: var(--ios-bg-elevated, #2c2c2e);
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}

/* iCloud-style wallpaper overlay via pseudo-element */
body.has-wallpaper::after {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/assets/backgrounds/wallpaper_dark.svg') no-repeat bottom left / cover;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* Home page now has no top padding (toolbar is sticky) */
.home-page {
  padding: 0 0 var(--ios-sp-4);
  margin: 0 auto;
  background: var(--app-bg, var(--ios-bg-secondary));
  min-height: 100dvh;
  min-height: 100vh;
  transition: background 0.3s ease;
}

/* Legacy home-header (replaced by cloudos-toolbar + cloudos-hero) */
.home-header {
  display: none;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ios-sp-4);
  padding: var(--ios-sp-5) var(--ios-sp-4) var(--ios-sp-4);
}

/* CloudOS mobile responsive */
@media (max-width: 600px) {
  .cloudos-user-dropdown {
    right: 8px;
    width: calc(100vw - 16px);
    max-width: 320px;
  }

  .cloudos-apps-grid {
    right: 8px;
    width: calc(100vw - 16px);
    max-width: 340px;
  }

  .cloudos-logo span {
    display: none;
  }
}

/* On tablets+ use 2-column grid */
@media (min-width: 600px) {
  .home-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 0 auto;
  }

  .home-card-wide {
    grid-column: 1 / -1;
  }
}

/* On desktop use 3-column grid */
@media (min-width: 1024px) {
  .home-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    gap: var(--ios-sp-5);
  }

  .home-card-wide {
    grid-column: span 2;
  }
}

.home-card {
  background: var(--ios-bg-primary);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0.5px 2px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
}

.home-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
}

.home-card-header h3 {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.home-card-header h3 svg {
  color: var(--ios-accent);
  flex-shrink: 0;
}

.card-link {
  font-size: 13px;
  color: var(--ios-accent);
  font-weight: 500;
}

.home-card-content {
  padding: 0;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5px;
  background: var(--ios-separator);
}

.home-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ios-sp-4);
  background: var(--ios-bg-primary);
}

.home-stat-item .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ios-accent);
}

.home-stat-item .stat-label {
  font-size: 13px;
  color: var(--ios-text-secondary);
  margin-top: 2px;
}

.home-sidebar-content {
  padding: var(--ios-sp-4);
}

/* Home rating widget */
.home-rating-section {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
}

.home-rating-header {
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
}

.home-rating-content {
  padding: var(--ios-sp-4);
}

.home-rating-level {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
}

.home-rating-level-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--ios-radius-full);
  background: var(--ios-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--ios-accent);
  flex-shrink: 0;
}

.home-rating-info { flex: 1; }
.home-rating-name { font-size: 17px; font-weight: 600; }
.home-rating-xp { font-size: 13px; color: var(--ios-text-secondary); }

.home-rating-progress {
  margin-top: var(--ios-sp-3);
}

.home-rating-progress-bar {
  height: 6px;
  background: var(--ios-fill-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.home-rating-progress-fill {
  height: 100%;
  background: var(--ios-accent);
  border-radius: 3px;
  transition: width var(--ios-duration-normal);
}

.home-rating-achievements {
  display: flex;
  gap: var(--ios-sp-2);
  margin-top: var(--ios-sp-3);
  flex-wrap: wrap;
}

.home-rating-achievement {
  width: 32px;
  height: 32px;
  border-radius: var(--ios-radius-full);
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.home-rating-more {
  color: var(--ios-accent);
  font-size: 13px;
  margin-top: var(--ios-sp-2);
}

.rating-error {
  padding: var(--ios-sp-4);
  text-align: center;
  color: var(--ios-text-secondary);
  font-size: 13px;
}

/* Home list rows */
.home-card-content .task-row,
.home-card-content .message-row:not(.own),
.home-card-content .document-row,
.home-card-content .interview-row,
.home-card-content .news-widget-row {
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  cursor: pointer;
  max-width: 100%;
}

.message-info, .doc-info, .news-widget-info {
  flex: 1;
  min-width: 0;
}

.message-room-name, .doc-title, .news-widget-title {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-preview, .doc-meta, .news-widget-meta {
  font-size: 13px;
  color: var(--ios-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.interview-row {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
}

.interview-row-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-accent);
  min-width: 48px;
}

.interview-row-name {
  font-size: 15px;
  font-weight: 500;
}

.interview-row-position {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.interviews-card, .interviews-list {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
}

.news-widget-list {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
}

/* ============================================
   24. DOCUMENTS
   ============================================ */
.documents-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.documents-sidebar {
  display: none;
}

/* Mobile: show sidebar as horizontal nav */
@media (max-width: 768px) {
  .documents-sidebar {
    display: block;
    padding: 0 var(--ios-sp-3);
    border-bottom: 0.5px solid var(--ios-separator);
    background: var(--ios-bg-primary);
  }
  .documents-sidebar .btn-new-document {
    display: none;
  }
  .documents-sidebar .documents-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0;
    padding: var(--ios-sp-1) 0;
  }
  .documents-sidebar .nav-item {
    white-space: nowrap;
    font-size: 13px;
    padding: var(--ios-sp-1) var(--ios-sp-3);
  }
  .documents-sidebar .storage-info {
    display: none;
  }
}

.documents-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.documents-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-bottom: 0.5px solid var(--ios-separator);
  min-height: 44px;
  gap: var(--ios-sp-2);
  flex-wrap: wrap;
}

.documents-header h2 {
  font-size: 20px;
  font-weight: 700;
}

.documents-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-1);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  font-size: 13px;
  color: var(--ios-text-secondary);
  overflow-x: auto;
}

.breadcrumb-item {
  white-space: nowrap;
}

.breadcrumb-item a {
  color: var(--ios-accent);
}

.documents-actions {
  display: flex;
  gap: var(--ios-sp-2);
}

/* iOS segmented control for Grid/List toggle */
.documents-view-toggle {
  display: inline-flex;
  background: var(--ios-fill-tertiary);
  border-radius: 8px;
  padding: 2px;
}

.view-grid-btn, .view-list-btn {
  width: 36px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--ios-text-secondary);
  transition: all 0.2s ease;
}

.view-grid-btn.active, .view-list-btn.active {
  color: var(--ios-text-primary);
  background: var(--ios-bg-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0.5px 1px rgba(0,0,0,0.06);
}

.documents-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--ios-sp-3);
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--ios-sp-3);
}

.file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ios-sp-4) var(--ios-sp-3);
  background: var(--ios-bg-primary);
  border-radius: 14px;
  cursor: pointer;
  transition: background var(--ios-duration-fast), box-shadow 0.2s ease, transform 0.15s ease;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.file-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.file-item:active {
  transform: scale(0.97);
}

.file-item.folder { }
.file-item.file { }

.file-icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--ios-sp-2);
  color: var(--ios-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--ios-accent-light, rgba(99,102,241,0.1));
  flex-shrink: 0;
}

.file-icon svg {
  width: 24px;
  height: 24px;
}

/* Folder icon — filled, no background box */
.file-icon.ftype-folder {
  background: transparent;
}
.file-icon.ftype-folder svg {
  width: 36px;
  height: 36px;
}

/* Document type colors */
.file-icon.doc-type-doc {
  background: rgba(0, 122, 255, 0.1);
  color: #007AFF;
}
.file-icon.doc-type-sheet {
  background: rgba(52, 199, 89, 0.1);
  color: #34C759;
}
.file-icon.doc-type-presentation {
  background: rgba(255, 149, 0, 0.1);
  color: #FF9500;
}

/* File type colors */
.file-icon.ftype-image {
  background: rgba(175, 82, 222, 0.1);
  color: #AF52DE;
  overflow: hidden;
  position: relative;
}

/* Image thumbnail in file icon */
.file-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
}

.file-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-icon.ftype-video {
  background: rgba(255, 59, 48, 0.1);
  color: #FF3B30;
}
.file-icon.ftype-audio {
  background: rgba(255, 45, 85, 0.1);
  color: #FF2D55;
}
.file-icon.ftype-pdf {
  background: rgba(255, 59, 48, 0.1);
  color: #FF3B30;
}
.file-icon.ftype-archive {
  background: rgba(142, 142, 147, 0.1);
  color: #8E8E93;
}
.file-icon.ftype-generic {
  background: rgba(99, 102, 241, 0.1);
  color: var(--ios-accent);
}

.file-info {
  text-align: center;
  width: 100%;
}

.file-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  max-height: 2.6em;
  word-break: break-word;
}

.file-meta {
  font-size: 11px;
  color: var(--ios-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* List view for files */
.items-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.items-grid.list-view .file-item {
  flex-direction: row;
  align-items: center;
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-radius: 0;
  border-bottom: 0.5px solid var(--ios-separator);
  gap: var(--ios-sp-3);
}

.items-grid.list-view .file-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 0;
  border-radius: 8px;
  flex-shrink: 0;
}
.items-grid.list-view .file-icon svg {
  width: 20px;
  height: 20px;
}
.items-grid.list-view .file-icon.ftype-folder {
  width: 36px;
  height: 36px;
}
.items-grid.list-view .file-icon.ftype-folder svg {
  width: 28px;
  height: 28px;
}

.items-grid.list-view .file-info {
  text-align: left;
  flex: 1;
  min-width: 0;
}

.items-grid.list-view .file-name {
  -webkit-line-clamp: 1;
  max-height: 1.3em;
  display: block;
  white-space: nowrap;
}

.items-grid.list-view .file-menu-btn {
  position: static;
  opacity: 1;
}

.file-menu-btn, .btn-icon-file-menu {
  position: absolute;
  top: var(--ios-sp-2);
  right: var(--ios-sp-2);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ios-radius-full);
  color: var(--ios-text-tertiary);
  opacity: 0;
  transition: opacity var(--ios-duration-fast);
}

.file-item:hover .file-menu-btn,
.file-item:hover .btn-icon-file-menu {
  opacity: 1;
}

.star-icon {
  color: var(--ios-yellow);
}

.btn-new-document {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ios-sp-2);
  width: 100%;
  height: 44px;
  margin: var(--ios-sp-3);
  margin-bottom: var(--ios-sp-2);
  padding: 0 var(--ios-sp-4);
  background: var(--ios-accent);
  color: #fff;
  border: none;
  border-radius: var(--ios-radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  box-sizing: border-box;
  width: calc(100% - var(--ios-sp-3) * 2);
}

.btn-new-document:hover {
  background: var(--ios-accent-hover, #0066D6);
}

.btn-new-document:active {
  transform: scale(0.98);
}

.btn-new-document ion-icon {
  font-size: 20px;
}

/* Document type modal */
.new-document-modal {
  z-index: 3001;
}

.document-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-4);
}

.document-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ios-sp-4);
  border-radius: var(--ios-radius-md);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--ios-duration-fast);
}

.document-type-card:hover {
  background: var(--ios-bg-hover);
  border-color: var(--ios-accent);
}

.type-icon {
  font-size: 36px;
  margin-bottom: var(--ios-sp-2);
}

.type-name {
  font-size: 15px;
  font-weight: 600;
}

.type-desc {
  font-size: 12px;
  color: var(--ios-text-secondary);
  text-align: center;
}

/* Storage info */
.storage-info {
  padding: var(--ios-sp-3) var(--ios-sp-4);
}

.storage-bar {
  height: 4px;
  background: var(--ios-fill-tertiary);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--ios-sp-1);
}

.storage-used {
  height: 100%;
  background: var(--ios-accent);
  border-radius: 2px;
}

.storage-text {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

/* Share modal */
.share-modal, .share-modal-large {
  max-width: 500px;
}

.share-modal-body {
  padding: var(--ios-sp-4);
}

.share-section {
  margin-bottom: var(--ios-sp-4);
}

.share-section-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  margin-bottom: var(--ios-sp-2);
}

.public-link-container, .public-link-active, .public-link-inactive {
  padding: var(--ios-sp-3);
  background: var(--ios-fill-tertiary);
  border-radius: var(--ios-radius-md);
}

.link-url-row {
  display: flex;
  gap: var(--ios-sp-2);
  align-items: center;
}

.link-url-input {
  flex: 1;
  font-size: 13px;
  background: var(--ios-bg-primary);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-radius: var(--ios-radius-sm);
  border: 1px solid var(--ios-separator);
}

.btn-copy {
  height: 32px;
  padding: 0 var(--ios-sp-3);
  font-size: 13px;
}

.share-list {
  display: flex;
  flex-direction: column;
}

.share-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) 0;
}

.share-item + .share-item {
  border-top: 0.5px solid var(--ios-separator);
}

.share-user-info {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  flex: 1;
}

.share-user-avatar img {
  width: 32px;
  height: 32px;
  border-radius: var(--ios-radius-full);
}

.share-user-name {
  font-size: 15px;
  font-weight: 500;
}

.share-user-email {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

.share-item-actions {
  display: flex;
  gap: var(--ios-sp-2);
  align-items: center;
}

.share-permission-select, .link-permission-select {
  height: 32px;
  padding: 0 var(--ios-sp-2);
  padding-right: 28px;
  font-size: 13px;
  border-radius: var(--ios-radius-sm);
}

.share-remove-btn {
  color: var(--ios-red);
}

.share-search-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-radius: var(--ios-radius-sm);
  cursor: pointer;
}

.share-search-item:hover {
  background: var(--ios-bg-hover);
}

.share-search-empty, .share-list-empty, .share-list-loading, .public-link-loading {
  padding: var(--ios-sp-4);
  text-align: center;
  color: var(--ios-text-secondary);
  font-size: 13px;
}

.create-link-btn, .create-link-options {
  padding: var(--ios-sp-2) 0;
}

.link-settings, .link-actions {
  margin-top: var(--ios-sp-2);
}

.link-permission-row {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  margin-bottom: var(--ios-sp-2);
}

.btn-text-danger, .delete-link-btn {
  color: var(--ios-red);
}

.link-description {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

/* Fullscreen overlay for OnlyOffice editor */
.editor-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--ios-bg-primary);
}

/* OnlyOffice editor page */
.onlyoffice-editor-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* OnlyOffice loader - absolute overlay */
.onlyoffice-loader {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ios-bg-primary);
  z-index: 10;
  gap: var(--ios-sp-3);
}

.onlyoffice-loader .loader-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--ios-fill);
  border-top-color: var(--ios-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  padding: 0;
}

.onlyoffice-loader .loader-text {
  font-size: 15px;
  color: var(--ios-text-secondary);
}

/* OnlyOffice error */
.onlyoffice-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ios-sp-4);
  padding: var(--ios-sp-6);
  color: var(--ios-text-secondary);
  font-size: 17px;
}

/* OnlyOffice container — fills remaining space */
.onlyoffice-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.onlyoffice-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
}

.onlyoffice-header {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-bottom: 0.5px solid var(--ios-separator);
  min-height: 44px;
}

.document-info {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  flex: 1;
  min-width: 0;
}

.doc-type-icon {
  font-size: 20px;
}

.document-title {
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-type-label {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

.editor-status {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-1);
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.status-icon { font-size: 14px; }
.status-icon.saved { color: var(--ios-green); }

.header-actions {
  display: flex;
  gap: var(--ios-sp-2);
}

.share-btn, .editor-fullscreen-btn, .convert-pdf-btn {
  height: 32px;
  padding: 0 var(--ios-sp-3);
  font-size: 13px;
  border-radius: var(--ios-radius-sm);
}

.view-mode-toggle {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-1);
  font-size: 13px;
}

body.editor-fullscreen-active .mobile-tab-bar,
body.editor-fullscreen-active .sidebar {
  display: none !important;
}
body.editor-fullscreen-active .main-content {
  padding-bottom: 0;
}

/* Documents nav */
.documents-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--ios-sp-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-radius: var(--ios-radius-sm);
  font-size: 15px;
  color: var(--ios-text-primary);
  cursor: pointer;
}

.nav-item:hover { background: var(--ios-bg-hover); }
.nav-item.active { background: var(--ios-accent-light); color: var(--ios-accent); }

/* Media Lightbox (shared: images + videos) */
.media-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.media-lightbox {
  display: flex;
  flex-direction: column;
  max-width: 90vw;
  max-height: 90vh;
  width: 100%;
  height: 100%;
}

.media-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  flex-shrink: 0;
}

.media-lightbox-name {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
  margin-right: 12px;
}

.media-lightbox-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.media-lightbox-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.media-lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.media-lightbox-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

.media-lightbox-content {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.media-lightbox-content.media-lightbox-img {
  /* images - no extra styles needed */
}

video.media-lightbox-content {
  outline: none;
  background: #000;
  border-radius: 8px;
}

.media-lightbox-fallback {
  text-align: center;
  color: #999;
}

.media-lightbox-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  position: absolute;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   25. CONFERENCES
   ============================================ */
.conference-list-page {
  padding: var(--ios-sp-4);
  max-width: 700px;
  margin: 0 auto;
}

.conference-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ios-sp-5);
}

.conference-list-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.conference-list-subtitle {
  font-size: 14px;
  color: var(--ios-text-secondary);
  margin: 2px 0 0;
}

.conf-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--ios-radius-full) !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  font-weight: 600;
}

.conf-loading {
  display: flex;
  justify-content: center;
  padding: 60px 0;
}

.conf-empty-state {
  text-align: center;
  padding: 60px 20px;
}

.conf-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--ios-sp-4);
  color: var(--ios-text-tertiary);
}

.conf-empty-state h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 var(--ios-sp-2);
}

.conf-empty-state p {
  font-size: 15px;
  color: var(--ios-text-secondary);
  margin: 0 0 var(--ios-sp-5);
  line-height: 1.5;
}

.conference-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ios-sp-4);
}

.conference-header h2, .conference-header h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.conference-section {
  margin-bottom: var(--ios-sp-5);
}

.conf-section-header {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  margin-bottom: var(--ios-sp-3);
}

.conf-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.conf-section-dot--active {
  background: var(--ios-green);
  box-shadow: 0 0 6px rgba(52, 199, 89, 0.4);
}

.conf-section-dot--scheduled {
  background: var(--ios-accent);
}

.conf-section-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--ios-text-tertiary);
  background: var(--ios-fill-tertiary);
  border-radius: var(--ios-radius-full);
  padding: 1px 8px;
  margin-left: auto;
}

.conference-section .section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.5px;
}

/* Conference list — iOS-style grouped rows */
.conf-list-group {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.conf-list-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  min-height: 60px;
  position: relative;
  cursor: default;
  transition: background var(--ios-duration-fast);
}

.conf-list-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 56px;
  right: 0;
  height: 0.5px;
  background: var(--ios-separator);
}

.conf-list-item:active {
  background: var(--ios-fill-tertiary);
}

.conf-list-item.conf-live {
  background: rgba(52, 199, 89, 0.04);
}

.conf-list-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--ios-radius-sm);
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ios-text-secondary);
}

.conf-live .conf-list-icon {
  background: rgba(52, 199, 89, 0.12);
  color: var(--ios-green);
}

.conf-live-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.conf-live-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ios-green);
  animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.conf-list-content {
  flex: 1;
  min-width: 0;
}

.conf-list-top {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  margin-bottom: 2px;
}

.conf-list-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ios-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.conf-list-bottom {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
}

.conf-list-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.conf-list-meta svg {
  color: var(--ios-text-tertiary);
  flex-shrink: 0;
}

.conf-list-actions {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-1);
  flex-shrink: 0;
}

.conf-action-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--ios-radius-full);
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ios-text-secondary);
  transition: background var(--ios-duration-fast), color var(--ios-duration-fast);
}

.conf-action-btn:hover {
  background: var(--ios-fill-tertiary);
}

.conf-action-join {
  color: var(--ios-green);
}
.conf-action-join:hover {
  background: rgba(52, 199, 89, 0.12);
}

.conf-action-link {
  color: var(--ios-accent);
}
.conf-action-link:hover {
  background: rgba(0, 122, 255, 0.08);
}

.conf-action-delete {
  color: var(--ios-red);
}
.conf-action-delete:hover {
  background: rgba(255, 59, 48, 0.08);
}

/* Legacy card support (conference-card still referenced in CSS media queries) */
.conference-card {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-3);
  border: 0.5px solid var(--ios-separator);
}

.conference-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ios-sp-3);
}

.conference-card-header h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.conference-card-title {
  font-size: 17px;
  font-weight: 600;
}

.conference-status, .conference-card-status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--ios-sp-2);
  border-radius: var(--ios-radius-full);
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}

.conference-status.status-active, .conference-card-status.active, .conference-card-status.live {
  background: var(--ios-green-light);
  color: #248A3D;
}

.conference-status.status-scheduled, .conference-card-status.upcoming, .conference-card-status.scheduled {
  background: var(--ios-accent-light);
  color: var(--ios-accent);
}

.conference-status.status-ended, .conference-card-status.ended {
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
}

.conference-status.status-cancelled, .conference-card-status.cancelled {
  background: var(--ios-red-light);
  color: var(--ios-red);
}

.conference-desc {
  font-size: 15px;
  color: var(--ios-text-secondary);
  line-height: 1.4;
}

.conference-meta, .conference-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ios-sp-3);
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-1);
}

.meta-item svg {
  flex-shrink: 0;
  color: var(--ios-text-tertiary);
}

.conference-card-actions, .conference-actions {
  display: flex;
  gap: var(--ios-sp-2);
  padding-top: var(--ios-sp-2);
  border-top: 0.5px solid var(--ios-separator);
}

.btn-join-conf {
  background: var(--ios-green);
  color: #fff;
}

.btn-delete-conf {
  color: var(--ios-red);
}

.btn-copy-link {
  color: var(--ios-accent);
}

/* Conference create modal */
.conference-modal {
  max-width: 500px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.invite-link-modal {
  max-width: 460px;
}

.invite-link-container {
  display: flex;
  gap: var(--ios-sp-2);
  margin-top: var(--ios-sp-2);
}

.invite-link-container .form-control {
  flex: 1;
}

.password-note {
  font-size: 13px;
  color: var(--ios-orange);
  margin-top: var(--ios-sp-2);
}

.modal-actions {
  display: flex;
  gap: var(--ios-sp-2);
  justify-content: flex-end;
  padding: var(--ios-sp-4);
  border-top: 0.5px solid var(--ios-separator);
}

.conference-loading, .loading-spinner {
  padding: var(--ios-sp-10);
  text-align: center;
  color: var(--ios-text-secondary);
}

/* User selector (conference creation) */
.form-hint {
  font-size: 13px;
  color: var(--ios-text-tertiary);
  margin: 0 0 var(--ios-sp-2);
}

/* ============================================
   NEW CHAT MODAL
   ============================================ */
.new-chat-tabs {
  display: flex;
  gap: 0;
  margin: var(--ios-sp-3) var(--ios-sp-4);
  background: var(--ios-fill-tertiary);
  border-radius: var(--ios-radius-sm);
  padding: 2px;
}

.new-chat-tab {
  flex: 1;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  background: transparent;
  color: var(--ios-text-secondary);
  border: none;
  border-radius: calc(var(--ios-radius-sm) - 2px);
  cursor: pointer;
  transition: all var(--ios-duration-fast);
}

.new-chat-tab.active {
  background: var(--ios-bg-primary);
  color: var(--ios-text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}

.new-chat-panel {
  display: none;
  padding: var(--ios-sp-3) 0;
}

.new-chat-panel.active {
  display: block;
}

.new-chat-results {
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.user-selector {
  position: relative;
}

.user-search-input {
  width: 100%;
}

.selected-users-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--ios-sp-2);
}

.selected-users-chips:empty {
  margin-bottom: 0;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--ios-fill-tertiary);
  border-radius: var(--ios-radius-full);
  font-size: 13px;
  color: var(--ios-text-primary);
}

.user-chip .chip-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.user-chip .chip-name {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chip .chip-remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ios-text-secondary);
  cursor: pointer;
  border: none;
  padding: 0;
  line-height: 1;
}

.user-search-results {
  background: var(--ios-bg-primary);
  border: 1px solid var(--ios-separator);
  border-radius: var(--ios-radius-md);
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 4px;
}

.user-search-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: 10px var(--ios-sp-3);
  cursor: pointer;
  transition: background 0.1s;
}

.user-search-item:hover {
  background: var(--ios-fill-tertiary);
}

.user-search-item + .user-search-item {
  border-top: 0.5px solid var(--ios-separator);
}

.user-search-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ios-fill-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  flex-shrink: 0;
  overflow: hidden;
}

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

.user-search-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-search-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ios-text-primary);
}

.user-search-email {
  font-size: 12px;
  color: var(--ios-text-tertiary);
}

.user-search-empty {
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--ios-text-tertiary);
}

/* Conference room */
.conference-room-active .tab-bar { display: none !important; }
.conference-room-page { padding: 0 !important; }

.conference-room {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: #000;
  color: #fff;
  overflow: hidden;
}

/* Conference header */
.conference-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  padding-top: calc(var(--ios-sp-2) + var(--ios-safe-top));
  background: rgba(28,28,30,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  min-height: 44px;
  z-index: 5;
}

.conference-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.conference-duration {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  font-variant-numeric: tabular-nums;
}

/* Conference main content area */
.conference-main-content {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

/* Video container wrapper */
.conference-video-container {
  flex: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Video grid — Telemost style: all participants equal */
.remote-videos-grid {
  display: grid;
  gap: 6px;
  padding: 6px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.remote-videos-grid.grid-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.remote-videos-grid.grid-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.remote-videos-grid.grid-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.remote-videos-grid.grid-6 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
}
.remote-videos-grid.grid-9 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.remote-videos-grid.grid-many {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
}

/* Each video tile (remote AND local) */
.remote-video-container {
  position: relative;
  background: #1c1c1e;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* LOCAL video tile — same as remote, NOT a PiP */
.local-video-tile {
  position: relative;
  background: #1c1c1e;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.remote-video-container video,
.local-video-tile video,
.remote-video-grid-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Speaking indicator — animated green glow border */
.remote-video-container.speaking,
.local-video-tile.speaking {
  box-shadow: 0 0 0 3px var(--ios-green), 0 0 16px rgba(52,199,89,0.5);
  transform: scale(1.01);
}

/* Pulsing glow animation for active speaker */
@keyframes speaker-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--ios-green), 0 0 12px rgba(52,199,89,0.4); }
  50% { box-shadow: 0 0 0 3px var(--ios-green), 0 0 20px rgba(52,199,89,0.6); }
}
.remote-video-container.speaking.active-speaker {
  animation: speaker-pulse 2s ease-in-out infinite;
  transform: scale(1.015);
}

/* Mobile speaker switch crossfade */
.remote-video-container.speaker-fade-in {
  animation: speaker-enter 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.remote-video-container.speaker-fade-out {
  animation: speaker-exit 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes speaker-enter {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes speaker-exit {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

/* Participant avatar placeholder (when video is off) */
.remote-video-container .participant-avatar,
.local-video-tile .participant-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.remote-video-container .participant-avatar img,
.local-video-tile .participant-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Name + indicators overlay at bottom of tile */
.remote-video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.remote-video-overlay .participant-name {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-indicators {
  display: flex;
  align-items: center;
  gap: 4px;
}

.indicator-mic, .indicator-video, .indicator-hand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator-mic svg, .indicator-video svg, .indicator-hand svg {
  width: 14px;
  height: 14px;
}

.indicator-mic.off svg, .indicator-video.off svg {
  color: var(--ios-red);
}

.indicator-hand {
  color: #FFD60A;
}

/* Mobile page navigation arrows */
.mobile-page-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}

.mobile-page-nav.prev { left: 8px; }
.mobile-page-nav.next { right: 8px; }

/* Page indicator dots */
.conf-page-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
  padding: 6px 12px;
  background: rgba(0,0,0,0.35);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.conf-page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: all 0.25s ease;
}
.conf-page-dot.active {
  width: 20px;
  border-radius: 4px;
  background: #fff;
}
.conf-page-dot.has-speaker {
  background: var(--ios-green, #34c759);
  box-shadow: 0 0 6px rgba(52,199,89,0.6);
}

/* Mobile paginated grid: 2 tiles per page */
.remote-videos-grid.mobile-paginated {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 6px;
  padding: 6px;
  align-content: stretch;
  align-items: stretch;
}

/* Conference controls bar */
.conference-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ios-sp-3) var(--ios-sp-4) calc(var(--ios-sp-3) + var(--ios-safe-bottom));
  background: rgba(28,28,30,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 5;
}

.controls-main {
  display: flex;
  gap: var(--ios-sp-2);
  align-items: center;
}

.btn-conference-control, .btn-call-control {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  position: relative;
}

.btn-conference-control svg, .btn-call-control svg {
  width: 20px;
  height: 20px;
}

.btn-conference-control:hover, .btn-call-control:hover {
  background: rgba(255,255,255,0.25);
}

.btn-conference-control:active {
  transform: scale(0.92);
}

.btn-conference-control.muted,
.btn-conference-control.off {
  background: rgba(255,59,48,0.3);
  color: var(--ios-red);
}

.btn-conference-control.active {
  background: rgba(0,122,255,0.3);
  color: var(--ios-accent);
}

.btn-conference-control .badge {
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--ios-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0 4px;
}

.btn-conference-control .unread-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--ios-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0 4px;
}

.btn-end-call {
  background: var(--ios-red) !important;
  color: #fff !important;
  width: 56px;
}

.btn-end-call:hover {
  background: #E5352B !important;
}

/* Conference sidebar (participants) */
.conference-sidebar, .call-sidebar {
  width: 300px;
  min-width: 300px;
  background: rgba(28,28,30,0.95);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255,255,255,0.08);
  z-index: 20;
}

.sidebar-header, .chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-bottom: 0.5px solid rgba(255,255,255,0.1);
  min-height: 44px;
}

.sidebar-header h4, .chat-panel-header h4 {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.btn-close-sidebar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}

.btn-close-sidebar:hover {
  background: rgba(255,255,255,0.2);
}

.call-sidebar-tabs {
  display: flex;
  border-bottom: 0.5px solid rgba(255,255,255,0.1);
}

.sidebar-tab {
  flex: 1;
  padding: var(--ios-sp-3);
  text-align: center;
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  border: none;
  background: none;
}

.sidebar-tab.active {
  color: #fff;
  border-bottom: 2px solid var(--ios-accent);
}

.sidebar-panel {
  flex: 1;
  overflow-y: auto;
}

/* Participants list */
.participants-list, .conference-participants-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
}

.conference-participant-item, .call-participant-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: 10px var(--ios-sp-4);
  transition: background 0.15s;
}

.conference-participant-item:hover {
  background: rgba(255,255,255,0.05);
}

.conference-participant-item.local {
  background: rgba(255,255,255,0.05);
}

.conference-participant-item.speaking {
  background: rgba(52,199,89,0.12);
}

.participant-avatar-small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

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

.conference-participant-item .participant-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ios-sp-2);
}

.conference-participant-item .participant-name {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.participant-status-icons span {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.4);
}

.participant-status-icons span svg {
  width: 14px;
  height: 14px;
}

.participant-status-icons span.off svg {
  color: var(--ios-red);
}

.participant-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.btn-participant-action {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}

.btn-participant-action:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.btn-participant-action.btn-kick:hover {
  background: rgba(255,59,48,0.2);
  color: var(--ios-red);
}

.btn-participant-action svg {
  width: 14px;
  height: 14px;
}

.participants-count {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  padding: var(--ios-sp-2) var(--ios-sp-4);
}

.admin-actions-panel {
  padding: var(--ios-sp-3);
}

.end-conference-btn {
  width: 100%;
  background: var(--ios-red);
  color: #fff;
}

.hand-raised-icon {
  color: #FFD60A;
  margin-right: 4px;
}

/* Conference chat panel */
.conference-chat-panel {
  width: 300px;
  min-width: 300px;
  background: rgba(28,28,30,0.95);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255,255,255,0.08);
  z-index: 20;
}

.conference-chat-panel .chat-messages,
.call-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--ios-sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
}

.conference-chat-panel .chat-message {
  padding: 0;
  font-size: 14px;
}

.conference-chat-panel .chat-message.own .chat-sender {
  color: var(--ios-accent);
}

.chat-message-header {
  display: flex;
  gap: var(--ios-sp-2);
  align-items: baseline;
  font-size: 12px;
  margin-bottom: 2px;
}

.chat-sender {
  font-weight: 600;
  color: var(--ios-green);
  font-size: 13px;
}

.chat-time {
  color: rgba(255,255,255,0.35);
  font-size: 11px;
}

.chat-message-text {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

.chat-message-author {
  font-weight: 600;
  color: var(--ios-accent);
}

.chat-message-time {
  color: rgba(255,255,255,0.4);
}

.chat-input-container, .call-chat-input {
  display: flex;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-top: 0.5px solid rgba(255,255,255,0.1);
  align-items: center;
}

.chat-input-container input, .call-chat-input input {
  flex: 1;
  height: 36px;
  padding: 0 var(--ios-sp-3);
  background: rgba(255,255,255,0.1);
  border-radius: 18px;
  color: #fff;
  border: none;
  font-size: 14px;
}

.chat-input-container input::placeholder {
  color: rgba(255,255,255,0.35);
}

.btn-send-chat {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ios-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.btn-send-chat:hover {
  opacity: 0.85;
}

.btn-send-chat svg {
  width: 16px;
  height: 16px;
}

/* Conference notification (mute request, etc.) */
.conference-notification {
  position: fixed;
  top: calc(var(--ios-safe-top) + 60px);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(50,50,50,0.95);
  backdrop-filter: blur(20px);
  padding: 10px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  z-index: 100;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}

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

/* Conference loading & error */
.conference-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--ios-sp-4);
  color: rgba(255,255,255,0.7);
}

.conference-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--ios-sp-4);
  color: rgba(255,255,255,0.6);
  text-align: center;
  padding: var(--ios-sp-6);
}

.conference-error h2 {
  color: #fff;
  font-size: 20px;
  margin: 0;
}

.conference-error p {
  margin: 0;
  font-size: 15px;
}

/* Call window */
.call-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #000;
}

.call-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3);
}

.call-header-actions {
  display: flex;
  gap: var(--ios-sp-2);
}

.call-main-content, .call-video-container {
  flex: 1;
  position: relative;
}

.call-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-4);
}

.call-duration {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  text-align: center;
}

.admin-badge {
  font-size: 10px;
  padding: 1px 4px;
  background: var(--ios-accent);
  color: #fff;
  border-radius: 3px;
  font-weight: 600;
}

.hand-raised-icon {
  color: var(--ios-yellow);
}

.toggle-participants-btn, .toggle-chat-btn, .toggle-sidebar-btn {
  position: relative;
}

/* Virtual background modal */
.vb-modal-overlay, .virtual-background-ui, .virtual-bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ios-sp-4);
}

.vb-modal, .virtual-bg-content, .virtual-bg-modal {
  background: #1c1c1e;
  border-radius: var(--ios-radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
}

.vb-modal-header, .virtual-bg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-4);
  border-bottom: 0.5px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.vb-modal-header h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.vb-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}

.vb-close-btn:hover {
  background: rgba(255,255,255,0.2);
}

.vb-modal-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Preview section */
.vb-preview-section {
  padding: var(--ios-sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ios-sp-2);
}

.vb-preview-container {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4/3;
  border-radius: var(--ios-radius-md);
  overflow: hidden;
  background: #000;
  position: relative;
}

.vb-preview-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  transform: scaleX(-1);
}

.vb-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ios-sp-2);
  color: rgba(255,255,255,0.4);
  font-size: 13px;
}

.vb-preview-hint {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  text-align: center;
}

/* Options section */
.vb-options-section {
  padding: 0 var(--ios-sp-4) var(--ios-sp-4);
}

.vb-option-group {
  margin-bottom: var(--ios-sp-4);
}

.vb-option-group h4 {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin: 0 0 var(--ios-sp-2);
  letter-spacing: 0.5px;
}

.vb-options-row {
  display: flex;
  gap: var(--ios-sp-2);
  flex-wrap: wrap;
}

.vb-options-grid, .virtual-bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: var(--ios-sp-2);
}

.vb-option, .bg-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--ios-sp-2);
  border-radius: var(--ios-radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.06);
  transition: all 0.15s;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  text-align: center;
}

.vb-option:hover {
  background: rgba(255,255,255,0.1);
}

.vb-option.selected, .bg-option.selected {
  border-color: var(--ios-accent);
  background: rgba(0,122,255,0.12);
  color: #fff;
}

.vb-option-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
}

.vb-option-preview, .bg-preview {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}

.vb-option-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Blur preview circles */
.vb-blur-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
}

.blur-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  filter: blur(var(--blur, 3px));
}

/* Footer */
.vb-modal-footer {
  display: flex;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-top: 0.5px solid rgba(255,255,255,0.1);
  justify-content: flex-end;
  flex-shrink: 0;
}

.vb-btn {
  height: 36px;
  padding: 0 var(--ios-sp-5);
  border-radius: var(--ios-radius-sm);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}

.vb-btn:hover { opacity: 0.85; }
.vb-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vb-btn-primary { background: var(--ios-accent); color: #fff; }
.vb-btn-secondary { background: rgba(255,255,255,0.12); color: #fff; }

/* Upload area */
.vb-upload-area {
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-5);
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ios-sp-2);
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  transition: all 0.15s;
}

.vb-upload-area:hover {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.04);
}

.vb-upload-area.dragover {
  border-color: var(--ios-accent);
  background: rgba(0,122,255,0.08);
}

.vb-custom-backgrounds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: var(--ios-sp-2);
  margin-top: var(--ios-sp-2);
}

.vb-error-message {
  font-size: 13px;
  color: var(--ios-red);
  padding: var(--ios-sp-1) 0;
}

/* Incoming call modal */
.incoming-call-modal-content {
  text-align: center;
  padding: var(--ios-sp-8);
}

.incoming-call-header {
  margin-bottom: var(--ios-sp-6);
}

.caller-name {
  font-size: 22px;
  font-weight: 700;
  margin-top: var(--ios-sp-3);
}

.incoming-call-actions {
  display: flex;
  justify-content: center;
  gap: var(--ios-sp-8);
}

.btn-round {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-large {
  width: 64px;
  height: 64px;
}

/* Guest join page — iOS-native style */
.main-content.guest-join-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  background: var(--ios-bg-grouped) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.guest-join-wrapper {
  width: 100%;
  max-width: 720px;
  padding: 32px;
  position: relative;
}

.guest-join-card {
  background: var(--ios-bg-primary);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--ios-shadow-lg);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
}

/* Left column — video preview */
.guest-join-preview-col {
  flex: 1;
  min-width: 0;
  background: #000;
  display: flex;
  flex-direction: column;
}

/* Right column — info & form */
.guest-join-info-col {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.guest-join-header {
  padding: 24px 24px 16px;
  text-align: left;
}

.guest-join-body {
  padding: 0 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.conference-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--ios-radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--ios-green-light, rgba(52,199,89,0.12));
  color: var(--ios-green);
}

.conference-badge .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.conference-badge .status-dot.live {
  animation: gj-pulse 2s ease-in-out infinite;
}

@keyframes gj-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.guest-join-card .conference-title {
  font-size: 22px;
  font-weight: 700;
  margin-top: 12px;
  color: var(--ios-text-primary);
  letter-spacing: -0.3px;
}

.guest-join-card .conference-description {
  font-size: 14px;
  color: var(--ios-text-secondary);
  margin-top: 6px;
  line-height: 1.4;
}

.conference-description, .conference-desc {
  font-size: 15px;
  color: var(--ios-text-secondary);
  margin-top: var(--ios-sp-2);
}

/* Conference status (conference-list.js uses .conference-status, not .conference-card-status) */
.conference-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--ios-radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.conference-status--active { background: var(--ios-green-light, rgba(52,199,89,0.12)); color: var(--ios-green); }
.conference-status--scheduled { background: var(--ios-accent-light, rgba(0,122,255,0.1)); color: var(--ios-accent); }
.conference-status--ended { background: var(--ios-fill-tertiary); color: var(--ios-text-tertiary); }
.conference-status--cancelled { background: var(--ios-red-light, rgba(255,59,48,0.1)); color: var(--ios-red); }

/* Fallback for old class names */
.conference-status.status-active { background: var(--ios-green-light, rgba(52,199,89,0.12)); color: var(--ios-green); }
.conference-status.status-scheduled { background: var(--ios-accent-light, rgba(0,122,255,0.1)); color: var(--ios-accent); }
.conference-status.status-ended { background: var(--ios-fill-tertiary); color: var(--ios-text-secondary); }
.conference-status.status-cancelled { background: var(--ios-red-light, rgba(255,59,48,0.1)); color: var(--ios-red); }

/* Conference action pill buttons (Join / Start) */
.conf-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--ios-radius-full);
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--ios-duration-fast), opacity var(--ios-duration-fast);
}

.conf-action-pill:active {
  transform: scale(0.95);
}

.conf-action-pill--join {
  background: var(--ios-green);
  color: #fff;
}

.conf-action-pill--start {
  background: var(--ios-accent);
  color: #fff;
}

.conf-list-item.conf-ended {
  opacity: 0.55;
}

.conf-list-group--ended .conf-list-item:hover {
  opacity: 0.75;
}

.guest-join-card .conference-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ios-separator);
}

.guest-join-card .host-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

.guest-join-card .host-avatar,
.guest-join-card .host-avatar img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.guest-join-card .host-avatar-placeholder {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ios-text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.guest-join-card .host-details {
  display: flex;
  flex-direction: column;
}

.guest-join-card .host-label {
  font-size: 11px;
  color: var(--ios-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.guest-join-card .host-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ios-text-primary);
}

.guest-join-card .participant-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.guest-join-card .participant-badge svg {
  opacity: 0.6;
}

.conference-meta {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  font-size: 13px;
  color: var(--ios-text-secondary);
  margin-top: var(--ios-sp-2);
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ios-sp-1);
}

.host-info {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  margin-top: var(--ios-sp-3);
}

.host-avatar img, .host-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: var(--ios-radius-full);
}

.host-avatar-placeholder {
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.host-details { flex: 1; }
.host-label { font-size: 12px; color: var(--ios-text-secondary); }
.host-name { font-size: 15px; font-weight: 500; }

.participant-badge {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.device-preview-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.preview-label {
  display: none;
}

.video-preview-wrapper {
  flex: 1;
  overflow: hidden;
  background: #000;
  position: relative;
  min-height: 200px;
}

.video-preview-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.video-off-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  background: linear-gradient(135deg, #1c1c2e 0%, #16213e 100%);
  color: rgba(255,255,255,0.4);
}

.video-off-placeholder span {
  font-size: 14px;
  font-weight: 500;
}

.placeholder-icon {
  font-size: 40px;
  opacity: 0.6;
}

.device-controls-overlay {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 2;
}

.device-toggle-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.device-toggle-btn:active {
  transform: scale(0.9);
}

.device-toggle-btn.active {
  background: var(--ios-accent);
  box-shadow: 0 2px 12px rgba(0,122,255,0.4);
}

.device-toggle-btn:not(.active) {
  background: rgba(255,59,48,0.7);
}

.icon-on { display: block; }
.icon-off { display: none; }
.device-toggle-btn:not(.active) .icon-on { display: none; }
.device-toggle-btn:not(.active) .icon-off { display: block; }

/* Device selectors */
.device-selectors {
  display: flex;
  gap: 0;
  flex-direction: column;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.device-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.device-selector:last-child {
  border-bottom: none;
}

.selector-icon {
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  display: flex;
}

.device-select {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  padding: 4px 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.device-select option {
  background: #1c1c1e;
  color: #fff;
}

.guest-join-bg, .bg-gradient, .bg-pattern {
  display: none;
}

/* Guest join form section */
.guest-form-section {
  margin-top: 0;
}

.guest-form-section .form-header {
  margin-bottom: 14px;
}

.guest-form-section .form-header h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ios-text-primary);
  margin: 0;
}

.guest-form-section .form-header p {
  font-size: 13px;
  color: var(--ios-text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

.guest-join-card .form-group {
  margin-bottom: 14px;
}

.guest-join-card .form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  margin-bottom: 6px;
}

.guest-join-card .form-label svg {
  color: var(--ios-text-tertiary);
}

.guest-join-card .optional-label {
  font-weight: 400;
  color: var(--ios-text-tertiary);
}

.guest-join-card .form-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--ios-fill-tertiary);
  border: 1px solid transparent;
  border-radius: var(--ios-radius-md);
  font-size: 16px;
  color: var(--ios-text-primary);
  transition: all 0.2s ease;
}

.guest-join-card .form-input::placeholder {
  color: var(--ios-text-tertiary);
}

.guest-join-card .form-input:focus {
  background: var(--ios-bg-primary);
  border-color: var(--ios-accent);
  box-shadow: 0 0 0 3px var(--ios-accent-light);
  outline: none;
}

/* Join button */
.btn-join-meeting {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: var(--ios-radius-md);
  background: var(--ios-green);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.2s ease;
}

.btn-join-meeting:active {
  transform: scale(0.97);
}

.btn-join-meeting:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-join-meeting .btn-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-join-meeting .btn-loading {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Spinner dots */
.spinner-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.spinner-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: gj-dot-bounce 1.4s ease-in-out infinite;
}

.spinner-dots span:nth-child(2) { animation-delay: 0.16s; }
.spinner-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes gj-dot-bounce {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Form footer */
.guest-join-card .form-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ios-text-tertiary);
  margin-top: 16px;
}

.guest-join-card .form-footer svg {
  color: var(--ios-text-quaternary);
}

/* Guest join loading state */
.guest-join-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 24px;
  color: var(--ios-text-secondary);
  font-size: 15px;
}

.guest-join-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ios-fill-tertiary);
  border-top-color: var(--ios-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Guest join error card */
.guest-join-error-card {
  background: var(--ios-bg-primary);
  border-radius: 20px;
  box-shadow: var(--ios-shadow-lg);
  padding: 40px 32px;
  text-align: center;
}

.guest-join-error-card .error-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ios-red-light, rgba(255,59,48,0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--ios-red);
}

.guest-join-error-card h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ios-text-primary);
  margin: 0 0 8px;
}

.guest-join-error-card p {
  font-size: 15px;
  color: var(--ios-text-secondary);
  margin: 0 0 24px;
  line-height: 1.4;
}

.btn-go-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--ios-radius-md);
  background: var(--ios-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  transition: all 0.2s ease;
}

.btn-go-home:active {
  transform: scale(0.97);
}

/* Guest join container */
.guest-join-container {
  position: relative;
  z-index: 1;
}

/* Divider */
.gj-divider {
  height: 1px;
  background: var(--ios-separator);
  margin: 16px 0;
}

/* Authenticated user card */
.gj-auth-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 16px 0;
  background: var(--ios-fill-tertiary);
  border-radius: var(--ios-radius-md);
}

.gj-auth-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ios-fill-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.gj-auth-avatar span {
  font-size: 15px;
  font-weight: 600;
  color: var(--ios-text-secondary);
}

.gj-auth-info {
  flex: 1;
  min-width: 0;
}

.gj-auth-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ios-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gj-auth-label {
  font-size: 13px;
  color: var(--ios-text-secondary);
  margin-top: 2px;
}

/* Tablet: stack columns */
@media (max-width: 700px) {
  .guest-join-card {
    flex-direction: column;
  }
  .guest-join-info-col {
    width: 100%;
  }
  .guest-join-preview-col {
    max-height: none;
    overflow: hidden;
  }
  .video-preview-wrapper {
    min-height: 200px;
    max-height: 240px;
  }
}

/* Mobile optimizations for guest join */
@media (max-width: 480px) {
  .main-content.guest-join-page {
    align-items: flex-start;
  }
  .guest-join-wrapper {
    padding: 0;
    max-width: 100%;
  }
  .guest-join-card {
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .guest-join-preview-col {
    max-height: none;
    overflow: hidden;
  }
  .video-preview-wrapper {
    min-height: 180px;
    max-height: 220px;
    border-radius: 0;
  }
  .guest-join-header {
    padding: 20px 20px 14px;
    text-align: center;
  }
  .guest-join-body {
    padding: 0 20px 24px;
  }
  .guest-join-card .conference-title {
    font-size: 20px;
  }
  .guest-join-card .conference-meta {
    justify-content: center;
  }
  .btn-join-meeting {
    height: 50px;
    font-size: 17px;
  }
  .guest-join-error-card {
    padding: 32px 20px;
    border-radius: 16px;
  }
}

/* Conference ended page */
.conference-ended-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  background: var(--ios-bg-grouped) !important;
  padding: 32px;
}

.conference-ended-card {
  background: var(--ios-bg-primary);
  border-radius: 20px;
  box-shadow: var(--ios-shadow-lg);
  padding: 48px 40px;
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.conference-ended-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--ios-text-secondary);
}

.conference-ended-card h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ios-text-primary);
  margin: 0 0 8px;
}

.conference-ended-card p {
  font-size: 15px;
  color: var(--ios-text-secondary);
  margin: 0 0 8px;
  line-height: 1.4;
}

.conference-ended-duration {
  font-size: 13px;
  color: var(--ios-text-tertiary);
  margin-bottom: 28px !important;
}

.conference-ended-card .btn-go-home {
  width: 100%;
  justify-content: center;
  padding: 14px 24px;
}

@media (max-width: 480px) {
  .conference-ended-page {
    padding: 20px;
  }
  .conference-ended-card {
    padding: 40px 24px;
    border-radius: 16px;
  }
}

.empty-grid-message {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255,255,255,0.5);
  font-size: 17px;
}

.loader-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ios-sp-10);
}

.conference-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--ios-sp-4);
  color: var(--ios-red);
  text-align: center;
  padding: var(--ios-sp-6);
}

/* ============================================
   26. NEWS
   ============================================ */
.news-feed-page {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--ios-sp-4);
}

.news-feed-page .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ios-sp-4);
}

.news-feed-page .page-header h2 {
  font-size: 28px;
  font-weight: 700;
}

.news-feed-subtitle {
  font-size: 14px;
  color: var(--ios-text-tertiary);
  font-weight: 400;
  margin-top: 2px;
}

.news-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--ios-radius-full);
  background: var(--ios-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--ios-duration-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.news-create-btn:hover {
  filter: brightness(1.08);
  transform: scale(1.03);
}

.news-create-btn:active {
  transform: scale(0.97);
}

.news-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ios-text-tertiary);
}

.news-categories {
  display: flex;
  gap: var(--ios-sp-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--ios-sp-3);
  margin-bottom: var(--ios-sp-4);
  scrollbar-width: none;
}

.news-categories::-webkit-scrollbar { display: none; }

.news-categories .category-chip {
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: var(--ios-radius-full);
  border: 1.5px solid var(--ios-separator);
  background: var(--ios-bg-primary);
  font-size: 14px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  cursor: pointer;
  transition: all var(--ios-duration-fast);
  flex-shrink: 0;
}

.news-categories .category-chip:hover {
  border-color: var(--ios-accent);
  color: var(--ios-accent);
}

.news-categories .category-chip.active {
  background: var(--ios-accent);
  border-color: var(--ios-accent);
  color: #fff;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-4);
}

.news-card {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--ios-duration-fast), box-shadow var(--ios-duration-fast);
  position: relative;
}

.news-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.news-card:active {
  transform: scale(0.99);
}

.news-card.pinned {
  border: 1.5px solid var(--ios-orange, #ff9500);
}

.news-pinned-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--ios-orange-light, rgba(255,149,0,0.12));
  color: var(--ios-orange, #ff9500);
  border-radius: var(--ios-radius-full);
  font-size: 11px;
  font-weight: 600;
  margin: var(--ios-sp-3) 0 0 var(--ios-sp-4);
  letter-spacing: 0.2px;
}

.news-card-image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card:hover .news-card-image img {
  transform: scale(1.02);
}

.news-card-body {
  padding: var(--ios-sp-4);
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  font-size: 13px;
  color: var(--ios-text-secondary);
  margin-bottom: var(--ios-sp-2);
  flex-wrap: wrap;
}

.news-author {
  font-weight: 600;
  color: var(--ios-text-primary);
}

.news-dot {
  color: var(--ios-text-tertiary);
  font-size: 10px;
}

.news-date {
  color: var(--ios-text-secondary);
}

.news-category-label {
  background: var(--ios-fill-tertiary);
  padding: 2px 8px;
  border-radius: var(--ios-radius-full);
  font-size: 11px;
  font-weight: 500;
}

.news-card-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--ios-sp-2);
  line-height: 1.3;
  color: var(--ios-text-primary);
}

.news-card-excerpt {
  font-size: 15px;
  color: var(--ios-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-top: 0.5px solid var(--ios-separator);
}

.news-reactions-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.news-reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: var(--ios-radius-full);
  background: var(--ios-fill-tertiary);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--ios-duration-fast);
  border: 1.5px solid transparent;
}

.news-reaction:hover {
  background: var(--ios-fill-secondary);
}

.news-reaction.my-reaction {
  background: var(--ios-accent-light, rgba(0,122,255,0.1));
  border-color: var(--ios-accent);
  color: var(--ios-accent);
}

.news-add-reaction-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--ios-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ios-fill-tertiary);
  font-size: 14px;
  cursor: pointer;
  border: none;
  color: var(--ios-text-secondary);
  transition: background var(--ios-duration-fast);
}

.news-add-reaction-btn:hover {
  background: var(--ios-fill-secondary);
}

.reaction-pick {
  padding: 4px 8px;
  border-radius: var(--ios-radius-full);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  transition: transform var(--ios-duration-fast);
}

.reaction-pick:hover {
  transform: scale(1.25);
}

.reaction-picker-popup {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-lg);
  padding: 8px 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  display: flex;
  gap: 2px;
  z-index: 9999;
}

.news-stats {
  display: flex;
  gap: var(--ios-sp-3);
  font-size: 13px;
  color: var(--ios-text-tertiary);
}

.news-card-actions {
  display: flex;
  gap: var(--ios-sp-1);
  padding: 0 var(--ios-sp-3) var(--ios-sp-3);
}

.news-pin-btn, .news-edit-btn, .news-delete-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ios-radius-full);
  color: var(--ios-text-secondary);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--ios-duration-fast);
}

.news-pin-btn:hover, .news-edit-btn:hover { background: var(--ios-fill-tertiary); }
.news-delete-btn { color: var(--ios-red); }
.news-delete-btn:hover { background: var(--ios-red-light, rgba(255,59,48,0.1)); }

.news-load-more {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-radius: var(--ios-radius-md);
  margin-top: var(--ios-sp-2);
}

/* News editor modal */
.news-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-editor-modal {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-xl, 20px);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.news-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
}

.news-editor-header h3 {
  font-size: 18px;
  font-weight: 700;
}

.close-news-editor {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ios-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-3);
}

.news-content-editor, .quill-editor-container {
  min-height: 200px;
  border: 1px solid var(--ios-separator-opaque);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.news-editor-footer {
  display: flex;
  gap: var(--ios-sp-2);
  justify-content: flex-end;
  padding: var(--ios-sp-4);
  border-top: 0.5px solid var(--ios-separator);
}

/* News post detail */
.news-post-page {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--ios-sp-4);
}

.news-post-page .page-header {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  margin-bottom: var(--ios-sp-4);
}

.news-post-page .page-header .back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ios-accent);
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: background var(--ios-duration-fast);
}

.news-post-page .page-header .back-btn:hover {
  background: var(--ios-fill-secondary);
}

.news-post-page .page-header h2 {
  font-size: 18px;
  font-weight: 600;
}

.news-post-detail {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-lg);
  overflow: hidden;
}

.news-post-image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.news-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-post-title {
  font-size: 26px;
  font-weight: 700;
  padding: var(--ios-sp-4) var(--ios-sp-4) var(--ios-sp-2);
  line-height: 1.25;
}

.news-post-meta {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: 0 var(--ios-sp-4) var(--ios-sp-4);
  font-size: 13px;
  color: var(--ios-text-secondary);
  flex-wrap: wrap;
}

.news-post-content {
  padding: 0 var(--ios-sp-4) var(--ios-sp-4);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ios-text-primary);
}

.news-post-content img {
  border-radius: var(--ios-radius-md);
  margin: var(--ios-sp-3) 0;
  max-width: 100%;
}

/* Quill editor styles */
.ql-editor {
  font-size: 16px;
  line-height: 1.65;
  min-height: 200px;
  padding: var(--ios-sp-4);
}

.news-post-reactions {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-top: 0.5px solid var(--ios-separator);
  flex-wrap: wrap;
}

.news-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--ios-radius-full);
  background: var(--ios-fill-tertiary);
  border: 1.5px solid transparent;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--ios-duration-fast);
}

.news-reaction-btn:hover {
  background: var(--ios-fill-secondary);
  transform: scale(1.05);
}

.news-reaction-btn.my-reaction {
  background: var(--ios-accent-light, rgba(0,122,255,0.1));
  border-color: var(--ios-accent);
}

.news-reaction-btn.has-count {
  font-weight: 500;
}

/* News comments */
.news-comments-section {
  margin-top: var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-lg);
  overflow: hidden;
}

.news-comments-section h3 {
  padding: var(--ios-sp-4) var(--ios-sp-4) 0;
  font-size: 17px;
  font-weight: 700;
}

.news-comment-form {
  display: flex;
  align-items: flex-end;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
}

.news-comment-form textarea {
  flex: 1;
  min-height: 38px;
  max-height: 120px;
  padding: 8px 14px;
  background: var(--ios-fill-tertiary);
  border: none;
  border-radius: 20px;
  resize: none;
  font-size: 15px;
  line-height: 1.4;
  font-family: inherit;
}

.news-comment-form .btn {
  border-radius: var(--ios-radius-full);
  flex-shrink: 0;
}

.news-comment-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ios-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--ios-duration-fast), opacity var(--ios-duration-fast);
}

.news-comment-send-btn:hover {
  transform: scale(1.08);
}

.news-comment-send-btn:active {
  transform: scale(0.95);
}

.news-comments-list {
  padding: 0;
}

.news-comment {
  display: flex;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
}

.news-comment + .news-comment {
  border-top: 0.5px solid var(--ios-separator);
}

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

.news-comment-header {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  font-size: 13px;
}

.news-comment-header .username {
  font-weight: 600;
  color: var(--ios-text-primary);
}

.news-comment-time {
  color: var(--ios-text-tertiary);
  font-size: 12px;
}

.delete-comment-btn {
  color: var(--ios-red);
  font-size: 12px;
  cursor: pointer;
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--ios-duration-fast);
  border: none;
  background: none;
}

.news-comment:hover .delete-comment-btn {
  opacity: 1;
}

.news-comment-text {
  font-size: 15px;
  line-height: 1.45;
  margin-top: 3px;
  color: var(--ios-text-primary);
}

/* ============================================
   27. GAMIFICATION / RATING
   ============================================ */
.gamification-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.gamification-card {
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
  padding: var(--ios-sp-4);
}

.gamification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ios-sp-4);
}

.gamification-header h2 {
  font-size: 22px;
  font-weight: 700;
}

/* Gamification sidebar content */
.gam-sidebar-content {
  padding: var(--ios-sp-4);
}

.gam-sidebar-level {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  margin-bottom: var(--ios-sp-4);
}

.gam-sidebar-level-info { flex: 1; }
.gam-sidebar-level-name { font-size: 17px; font-weight: 600; }
.gam-sidebar-xp { font-size: 13px; color: var(--ios-text-secondary); }

.gam-sidebar-section {
  margin-bottom: var(--ios-sp-4);
}

.gam-sidebar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  margin-bottom: var(--ios-sp-2);
}

.gam-sidebar-achievements {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
}

.gam-sidebar-achievement {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
}

.gam-sidebar-achievement-icon { font-size: 20px; }
.gam-sidebar-achievement-name { font-size: 14px; }

.gam-sidebar-top {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
}

.gam-sidebar-top-rank { font-weight: 600; }
.gam-sidebar-top-name { flex: 1; }
.gam-sidebar-top-xp { color: var(--ios-text-secondary); font-size: 13px; }

.gam-sidebar-my-rank {
  padding: var(--ios-sp-3);
  background: var(--ios-accent-light);
  border-radius: var(--ios-radius-md);
  margin-top: var(--ios-sp-2);
}

/* Gamification tabs */
.gam-tabs {
  display: flex;
  background: var(--ios-fill-tertiary);
  border-radius: var(--ios-radius-sm);
  padding: 2px;
  margin-bottom: var(--ios-sp-4);
  overflow-x: auto;
}

.gam-tab {
  flex: 1;
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-radius: var(--ios-radius-xs);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ios-text-secondary);
  transition: all var(--ios-duration-fast);
}

.gam-tab.active {
  background: var(--ios-bg-primary);
  color: var(--ios-text-primary);
  box-shadow: var(--ios-shadow-sm);
}

.gam-tab-content {
  padding: 0 var(--ios-sp-4) var(--ios-sp-4);
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}

.gam-cat-btn {
  display: inline-flex;
  height: 28px;
  padding: 0 var(--ios-sp-2);
  border-radius: var(--ios-radius-full);
  font-size: 13px;
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
  align-items: center;
  cursor: pointer;
}

.gam-cat-btn.active {
  background: var(--ios-accent);
  color: #fff;
}

/* Level badge with per-level colors */
.level-badge {
  width: 64px;
  height: 64px;
  border-radius: var(--ios-radius-full);
  background: linear-gradient(135deg, var(--ios-accent), var(--ios-purple, #AF52DE));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  flex-shrink: 0;
}

.level-badge[data-level="1"] { background: linear-gradient(135deg, #8E8E93, #636366); }
.level-badge[data-level="2"] { background: linear-gradient(135deg, #34C759, #248A3D); }
.level-badge[data-level="3"] { background: linear-gradient(135deg, #007AFF, #0055D4); }
.level-badge[data-level="4"] { background: linear-gradient(135deg, #AF52DE, #8944AB); }
.level-badge[data-level="5"] { background: linear-gradient(135deg, #FF9500, #C77D00); }
.level-badge[data-level="6"] { background: linear-gradient(135deg, #FF3B30, #D32D22); }
.level-badge[data-level="7"] { background: linear-gradient(135deg, #FFD700, #FF9500); }
.level-badge[data-level="8"] { background: linear-gradient(135deg, #FFD700, #FF3B30); }

.level-badge-sm {
  width: 40px;
  height: 40px;
}

.level-number {
  font-size: 20px;
  font-weight: 700;
}

.level-label {
  font-size: 9px;
  text-transform: uppercase;
}

.level-info { flex: 1; }
.level-name { font-size: 17px; font-weight: 600; }
.level-xp { font-size: 13px; color: var(--ios-text-secondary); }

.xp-total {
  font-size: 15px;
  font-weight: 600;
  color: var(--ios-accent);
}

.xp-progress-bar, .level-progress-bar {
  height: 8px;
  background: var(--ios-fill-tertiary);
  border-radius: 4px;
  overflow: hidden;
  margin-top: var(--ios-sp-2);
}

.xp-progress-bar-sm {
  height: 4px;
}

.xp-progress-fill, .level-progress-fill {
  height: 100%;
  background: var(--ios-accent);
  border-radius: 4px;
  transition: width var(--ios-duration-normal);
}

.xp-progress-text, .level-progress-text {
  font-size: 12px;
  color: var(--ios-text-secondary);
  margin-top: 2px;
}

.level-progress {
  margin-top: var(--ios-sp-2);
}

/* Gamification metrics */
.gamification-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ios-sp-3);
  margin-bottom: var(--ios-sp-4);
}

.metric-card {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-3);
  text-align: center;
}

.metric-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ios-accent);
}

.metric-label {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

/* Achievements */
.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ios-separator);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.achievement-item, .achievement-card {
  background: var(--ios-bg-primary);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ios-sp-3);
}

.achievement-card.earned {
  background: var(--ios-bg-primary);
}

.achievement-card.earned .achievement-icon {
  opacity: 1;
}

.achievement-card.earned .achievement-points {
  color: var(--ios-green);
}

.achievement-card.locked {
  opacity: 0.55;
}

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

.achievement-icon {
  font-size: 28px;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}

.achievement-name {
  font-size: 15px;
  font-weight: 600;
}

.achievement-desc {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.achievement-cat {
  font-size: 11px;
  color: var(--ios-text-tertiary);
}

.achievement-points {
  font-size: 13px;
  color: var(--ios-accent);
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.gam-achievements-progress-bar {
  height: 4px;
  background: var(--ios-fill-tertiary);
  border-radius: 2px;
  overflow: hidden;
  margin: var(--ios-sp-2) 0;
}

.gam-achievements-progress-fill {
  height: 100%;
  background: var(--ios-accent);
  border-radius: 2px;
}

.gam-achievement-group {
  margin-bottom: var(--ios-sp-4);
}

.gam-achievement-group-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--ios-sp-2);
}

.gam-achievement-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) 0;
}

/* Leaderboard */
.leaderboard {
  display: flex;
  flex-direction: column;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3);
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  margin-bottom: var(--ios-sp-2);
}

.leaderboard-rank {
  font-size: 17px;
  font-weight: 700;
  width: 28px;
  text-align: center;
  color: var(--ios-text-secondary);
}

.leaderboard-item:nth-child(1) .leaderboard-rank { color: #FFD700; }
.leaderboard-item:nth-child(2) .leaderboard-rank { color: #C0C0C0; }
.leaderboard-item:nth-child(3) .leaderboard-rank { color: #CD7F32; }

img.leaderboard-avatar, .leaderboard-avatar-placeholder {
  width: 44px;
  height: 44px;
  border-radius: var(--ios-radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.leaderboard-avatar-placeholder {
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 17px;
  color: var(--ios-text-secondary);
}

.leaderboard-info { flex: 1; }
.leaderboard-name { font-size: 17px; font-weight: 500; }
.leaderboard-meta { font-size: 13px; color: var(--ios-text-secondary); }
.leaderboard-level { font-size: 13px; font-weight: 600; }
.leaderboard-tasks { font-size: 13px; color: var(--ios-text-secondary); }

.gamification-info, .gamification-empty {
  padding: var(--ios-sp-4);
  text-align: center;
  color: var(--ios-text-secondary);
}

/* gam-loading: overridden by new spinner styles at top */

/* History */
.gam-history-list {
  display: flex;
  flex-direction: column;
}

.gam-history-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3);
  border-bottom: 0.5px solid var(--ios-separator);
}

.gam-history-icon { font-size: 20px; }

.gam-history-info { flex: 1; }
.gam-history-label { font-size: 15px; }
.gam-history-task { font-size: 12px; color: var(--ios-text-secondary); }

.gam-history-right { text-align: right; }
.gam-history-points { font-size: 15px; font-weight: 600; color: var(--ios-green); }
.gam-history-date { font-size: 12px; color: var(--ios-text-tertiary); }

/* ============================================
   28. INTERVIEWS
   ============================================ */
.interviews-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--ios-sp-4);
  padding-bottom: calc(var(--ios-tab-height, 49px) + var(--ios-safe-bottom, 0px) + var(--ios-sp-4));
  gap: var(--ios-sp-3);
}

/* Sidebar content */
.interview-sidebar-content {
  padding: var(--ios-sp-4);
}

.interview-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ios-sp-3);
  margin-bottom: var(--ios-sp-4);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.legend-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot.scheduled { background: var(--ios-accent); }
.dot.completed { background: var(--ios-green); }
.dot.cancelled { background: var(--ios-red); }
.dot.no-show { background: var(--ios-orange); }

.interview-stats-sidebar {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-4);
}

.interview-stat-row {
  display: flex;
  justify-content: space-between;
  padding: var(--ios-sp-2) 0;
  font-size: 15px;
  color: var(--ios-text-primary);
}

.interview-stat-row .value {
  font-weight: 600;
  color: var(--ios-accent);
}

/* Header */
.interviews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
}

.interviews-header h1,
.interviews-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

/* Calendar navigation */
.calendar-nav {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  justify-content: center;
}

.calendar-nav h2,
.calendar-nav h3 {
  min-width: 160px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

/* Calendar grid */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--ios-separator);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.calendar-day-header {
  background: var(--ios-bg-tertiary);
  padding: var(--ios-sp-2) var(--ios-sp-1);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calendar-day {
  background: var(--ios-bg-primary);
  padding: var(--ios-sp-2);
  min-height: 72px;
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex;
  flex-direction: column;
}

.calendar-day:hover {
  background: var(--ios-bg-hover, rgba(0,0,0,0.03));
}

.calendar-day.today {
  background: rgba(0, 122, 255, 0.06);
}

.calendar-day.other-month {
  opacity: 0.35;
  cursor: default;
}

.calendar-day.selected {
  background: rgba(0, 122, 255, 0.1);
  box-shadow: inset 0 0 0 2px var(--ios-accent);
}

.calendar-day-number {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.calendar-day.today .calendar-day-number {
  background: var(--ios-accent);
  color: #fff;
  font-weight: 700;
}

.calendar-day-interviews {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: auto;
}

.calendar-day-interviews .dot,
.calendar-day-interviews .interview-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.interview-dot.scheduled { background: var(--ios-accent); }
.interview-dot.completed { background: var(--ios-green); }
.interview-dot.cancelled { background: var(--ios-red); }
.interview-dot.no_show, .interview-dot.no-show { background: var(--ios-orange); }

.interview-count {
  font-size: 10px;
  color: var(--ios-accent);
  font-weight: 600;
  margin-top: 2px;
}

/* Day detail panel */
.day-detail-panel {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.day-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
}

.day-detail-header h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.day-detail-list {
  padding: 0;
}

.day-detail-empty {
  padding: var(--ios-sp-8) var(--ios-sp-4);
  text-align: center;
  color: var(--ios-text-secondary);
  font-size: 15px;
}

/* Interview items in day detail */
.interview-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
}

.interview-item + .interview-item {
  border-top: 0.5px solid var(--ios-separator);
}

.interview-item-time {
  font-size: 15px;
  font-weight: 600;
  color: var(--ios-accent);
  min-width: 50px;
  flex-shrink: 0;
}

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

.interview-item-name {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.interview-item-meta {
  font-size: 13px;
  color: var(--ios-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.interview-status {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--ios-radius-full);
  flex-shrink: 0;
  white-space: nowrap;
}

.interview-status.scheduled { background: var(--ios-accent-light, rgba(0,122,255,0.1)); color: var(--ios-accent); }
.interview-status.completed { background: var(--ios-green-light, rgba(52,199,89,0.12)); color: #248A3D; }
.interview-status.cancelled { background: var(--ios-red-light, rgba(255,59,48,0.12)); color: var(--ios-red); }
.interview-status.no_show, .interview-status.no-show { background: var(--ios-orange-light, rgba(255,149,0,0.12)); color: #C77D00; }

.interview-item-actions {
  display: flex;
  gap: var(--ios-sp-1);
  flex-shrink: 0;
}

.edit-interview-btn, .delete-interview-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ios-radius-full);
  color: var(--ios-text-secondary);
  transition: background 0.15s;
}

.edit-interview-btn:hover { background: var(--ios-bg-hover, rgba(0,0,0,0.04)); }
.delete-interview-btn { color: var(--ios-red); }
.delete-interview-btn:hover { background: var(--ios-red-light, rgba(255,59,48,0.1)); }

/* Interview modal */
.interview-modal {
  max-width: 500px;
}

.interview-form {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-4);
}

.form-row {
  display: flex;
  gap: var(--ios-sp-3);
}

.form-row > .form-group {
  flex: 1;
}

/* Mobile: stack form rows */
@media (max-width: 480px) {
  .form-row {
    flex-direction: column;
  }
  .calendar-day {
    min-height: 56px;
    padding: var(--ios-sp-1);
  }
  .calendar-day-number {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .interview-item {
    flex-wrap: wrap;
  }
  .interview-item-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: var(--ios-sp-1);
  }
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
}

.form-checkbox, .checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  font-size: 15px;
  cursor: pointer;
}

.checkbox-mark {
  width: 22px;
  height: 22px;
  border-radius: var(--ios-radius-xs);
  border: 2px solid var(--ios-separator-opaque);
  flex-shrink: 0;
}

/* ============================================
   29. ADMIN
   ============================================ */
.admin-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--ios-sp-4);
}

.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ios-sp-4);
}

.admin-page-header h2 {
  font-size: 22px;
  font-weight: 700;
}

/* Admin section tabs (inline navigation) */
.admin-tabs {
  display: flex;
  background: var(--ios-fill-tertiary);
  border-radius: 9px;
  padding: 2px;
  margin-bottom: var(--ios-sp-4);
}

.admin-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px var(--ios-sp-2);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--ios-duration-fast);
  white-space: nowrap;
}

.admin-tab svg {
  flex-shrink: 0;
}

.admin-tab.active {
  background: var(--ios-bg-primary);
  color: var(--ios-text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}

.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ios-sp-3);
  margin-bottom: var(--ios-sp-6);
}

.admin-stat-card {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-4);
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--ios-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.stat-icon.users { background: var(--ios-accent-light); color: var(--ios-accent); }
.stat-icon.online { background: var(--ios-green-light); color: var(--ios-green); }
.stat-icon.tasks { background: var(--ios-orange-light); color: var(--ios-orange); }
.stat-icon.departments { background: var(--ios-purple-light); color: var(--ios-purple); }

.stat-info { flex: 1; }
.stat-value { font-size: 24px; font-weight: 700; }
.stat-label { font-size: 13px; color: var(--ios-text-secondary); }

.admin-content {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-6);
}

.admin-section {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.admin-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  padding: var(--ios-sp-6) var(--ios-sp-4) var(--ios-sp-2);
}

.admin-card {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
}

.admin-search {
  max-width: 240px;
}

/* Admin user list */
.admin-users-list {
  display: flex;
  flex-direction: column;
}

.admin-user-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  flex-wrap: wrap;
}

.admin-user-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.admin-user-avatar .online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
}

.admin-user-item + .admin-user-item {
  border-top: 0.5px solid var(--ios-separator);
}

.admin-user-avatar img {
  width: 40px;
  height: 40px;
  border-radius: var(--ios-radius-full);
}

.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name {
  font-size: 17px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
}

.badge-admin {
  font-size: 10px;
  padding: 1px 6px;
  background: var(--ios-accent);
  color: #fff;
  border-radius: var(--ios-radius-full);
  font-weight: 600;
}

.admin-user-email {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.admin-user-meta {
  font-size: 12px;
  color: var(--ios-text-tertiary);
}

.admin-user-actions {
  display: flex;
  gap: var(--ios-sp-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.reset-password-btn {
  height: 32px;
  padding: 0 var(--ios-sp-3);
  font-size: 13px;
  border-radius: var(--ios-radius-sm);
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-primary);
}

.delete-user-btn {
  height: 32px;
  padding: 0 var(--ios-sp-3);
  font-size: 13px;
  border-radius: var(--ios-radius-sm);
  background: var(--ios-red-light);
  color: var(--ios-red);
}

/* Admin tasks */
.admin-tasks-list {
  display: flex;
  flex-direction: column;
}

.admin-task-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  flex-wrap: wrap;
}

.admin-task-item + .admin-task-item {
  border-top: 0.5px solid var(--ios-separator);
}

.admin-task-info { flex: 1; min-width: 0; }
.admin-task-title { font-size: 15px; font-weight: 500; }
.admin-task-meta {
  font-size: 12px;
  color: var(--ios-text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.task-creator { font-weight: 500; }
.task-date { color: var(--ios-text-tertiary); }

.admin-task-actions {
  display: flex;
  gap: var(--ios-sp-1);
}

.edit-due-date-btn, .view-task-btn, .delete-task-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ios-radius-full);
  color: var(--ios-text-secondary);
}

.delete-task-btn { color: var(--ios-red); }

/* Admin departments */
.admin-departments-list {
  display: flex;
  flex-direction: column;
}

.admin-dept-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  flex-wrap: wrap;
}

.admin-dept-item + .admin-dept-item {
  border-top: 0.5px solid var(--ios-separator);
}

.admin-dept-info { flex: 1 1 100%; min-width: 0; }
.admin-dept-name { font-size: 17px; font-weight: 500; }
.admin-dept-desc { font-size: 13px; color: var(--ios-text-secondary); }
.admin-dept-meta { font-size: 12px; color: var(--ios-text-tertiary); }
.dept-member-count { font-weight: 500; }

.admin-dept-calendar-toggle {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  flex-shrink: 0;
}

.interview-calendar-toggle {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.admin-dept-actions {
  display: flex;
  gap: var(--ios-sp-1);
  flex-shrink: 0;
  margin-left: auto;
}

.view-members-btn, .edit-dept-btn, .delete-dept-btn {
  width: auto;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ios-radius-full);
  color: var(--ios-text-secondary);
}

.delete-dept-btn { color: var(--ios-red); }

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-top: 0.5px solid var(--ios-separator);
}

.pagination-info {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.pagination-buttons {
  display: flex;
  gap: var(--ios-sp-2);
}

/* System status styles */
.sys-grid {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.sys-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sys-info-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.sys-info-value {
  font-size: 14px;
  color: var(--ios-text-primary);
  font-variant-numeric: tabular-nums;
}

.sys-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sys-bar {
  height: 8px;
  background: var(--ios-fill-tertiary, #7676801f);
  border-radius: 4px;
  overflow: hidden;
}

.sys-bar-fill {
  height: 100%;
  background: var(--ios-green, #34c759);
  border-radius: 4px;
  transition: width 0.3s;
}

.sys-bar-fill.sys-bar-warn {
  background: var(--ios-orange, #FF9500);
}

.sys-bar-fill.sys-bar-danger {
  background: var(--ios-red, #FF3B30);
}

.sys-bar-text {
  font-size: 13px;
  color: var(--ios-text-secondary);
  font-variant-numeric: tabular-nums;
}

.sys-service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
}

.sys-service-row + .sys-service-row {
  border-top: 0.5px solid var(--ios-separator);
}

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

.sys-service-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ios-text-primary);
}

.sys-service-detail {
  font-size: 12px;
  color: var(--ios-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sys-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sys-ok {
  background: rgba(52, 199, 89, 0.12);
  color: var(--ios-green, #34c759);
}

.sys-warn {
  background: rgba(255, 149, 0, 0.12);
  color: var(--ios-orange, #FF9500);
}

.sys-err {
  background: rgba(255, 59, 48, 0.12);
  color: var(--ios-red, #FF3B30);
}

/* ============================================
   30. SETTINGS
   ============================================ */
.settings-page {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--ios-sp-4);
}

.settings-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ios-sp-4);
}

.settings-page-header h1,
.settings-page-header h2 {
  font-size: 22px;
  font-weight: 700;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-6);
}

/* Settings inline tabs (mobile section navigation) */
.settings-tabs {
  display: flex;
  gap: var(--ios-sp-1);
  padding: 0 var(--ios-sp-4) var(--ios-sp-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}

.settings-tabs::-webkit-scrollbar {
  display: none;
}

.settings-tab {
  padding: var(--ios-sp-2) var(--ios-sp-3);
  border-radius: var(--ios-radius-full);
  font-size: 14px;
  font-weight: 500;
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}

.settings-tab.active {
  background: var(--ios-accent);
  color: #fff;
}

.settings-tab:hover:not(.active) {
  background: var(--ios-fill-secondary);
}

.settings-section {
  display: none;
  margin-bottom: 0;
}

.settings-section.active {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-4);
}

.settings-logout-section {
  padding: var(--ios-sp-6) var(--ios-sp-4);
  text-align: center;
}

.settings-logout-section .btn {
  width: 100%;
  max-width: 400px;
}

.settings-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0 var(--ios-sp-4) 0;
}

.settings-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: var(--ios-sp-4) var(--ios-sp-4) var(--ios-sp-2);
}

.settings-card-desc {
  font-size: 13px;
  color: var(--ios-text-tertiary);
  padding: 0 var(--ios-sp-4) var(--ios-sp-2);
}

.settings-card {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.settings-card > .btn,
.settings-card > .btn-danger {
  margin: var(--ios-sp-3) var(--ios-sp-4) var(--ios-sp-4);
}

/* About section in settings */
.about-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-6) var(--ios-sp-4) var(--ios-sp-4);
}

.about-logo {
  margin-bottom: var(--ios-sp-2);
}

.about-logo svg {
  border-radius: var(--ios-radius-md);
}

.about-app h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ios-text-primary);
}

.about-app .version {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.about-info {
  padding: var(--ios-sp-4);
  text-align: center;
  font-size: 15px;
  color: var(--ios-text-secondary);
  border-top: 0.5px solid var(--ios-separator);
}

/* iOS Settings row (label left, value/toggle right) */
.settings-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  gap: var(--ios-sp-3);
}
.settings-row + .settings-row {
  border-top: 0.5px solid var(--ios-separator);
}
.settings-row-label {
  flex: 1;
  font-size: 17px;
  color: var(--ios-text-primary);
}
.settings-row-value {
  font-size: 17px;
  color: var(--ios-text-secondary);
  flex-shrink: 0;
}
.settings-row-chevron {
  color: var(--ios-text-quaternary, #c7c7cc);
  flex-shrink: 0;
  margin-left: 4px;
}

/* Settings profile card (larger avatar at top) */
.settings-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ios-sp-6) var(--ios-sp-4) var(--ios-sp-4);
  gap: var(--ios-sp-2);
}
.settings-profile-card .avatar {
  width: 80px;
  height: 80px;
  font-size: 30px;
}
.settings-profile-card .profile-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--ios-text-primary);
}
.settings-profile-card .profile-email {
  font-size: 15px;
  color: var(--ios-text-secondary);
}

.settings-nav {
  display: flex;
  flex-direction: column;
}

.settings-nav-link {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  min-height: 44px;
  cursor: pointer;
  transition: background var(--ios-duration-fast);
}

.settings-nav-link:hover {
  background: var(--ios-bg-hover);
}

.settings-nav-link.active {
  background: var(--ios-accent);
  color: #fff;
}

.settings-nav-link.active svg {
  stroke: #fff;
}

.settings-nav-link + .settings-nav-link {
  border-top: 0.5px solid var(--ios-separator);
}

/* Settings rows */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  min-height: 44px;
}

.setting-row + .setting-row {
  border-top: 0.5px solid var(--ios-separator);
}

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

.setting-label {
  font-size: 17px;
  color: var(--ios-text-primary);
}

.setting-desc {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.session-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.session-row + .session-row {
  border-top: 0.5px solid var(--ios-separator);
}

.session-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ios-fill-tertiary, #7676801f);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ios-text-secondary);
}

.session-icon-current {
  background: rgba(52, 199, 89, 0.12);
  color: var(--ios-green, #34c759);
}

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

.session-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ios-text-primary);
}

.session-current-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(52, 199, 89, 0.12);
  color: var(--ios-green, #34c759);
  white-space: nowrap;
}

.session-details {
  font-size: 13px;
  color: var(--ios-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-terminate-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 59, 48, 0.1);
  color: var(--ios-red, #ff3b30);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.session-terminate-btn:hover {
  background: rgba(255, 59, 48, 0.2);
}

.session-terminate-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.notification-status {
  font-size: 13px;
  color: var(--ios-text-secondary);
  padding: var(--ios-sp-2) var(--ios-sp-4) var(--ios-sp-3);
}

.notification-status .status-success {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ios-green, #34c759);
}

.notification-status .status-error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ios-red, #ff3b30);
}

.notification-status .status-info {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--ios-accent, #007aff);
  line-height: 1.4;
}

.notification-status .status-info svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Settings avatar section */
.settings-avatar-section {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-4);
  padding: var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
}

.settings-avatar-section img {
  width: 80px;
  height: 80px;
  border-radius: var(--ios-radius-full);
  object-fit: cover;
}

.avatar-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
}

.avatar-upload-container {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
}

.avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: var(--ios-radius-full);
  object-fit: cover;
}

/* Settings form */
.settings-form {
  padding: var(--ios-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-3);
}

.custom-status-form {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-4);
}

.custom-status-row {
  display: flex;
  gap: var(--ios-sp-2);
  align-items: center;
}

.status-emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--ios-sp-2);
}

.status-emoji-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--ios-radius-sm);
  background: var(--ios-fill-tertiary);
  border: 2px solid transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ios-duration-fast);
}

.status-emoji-btn:hover {
  background: var(--ios-fill-secondary);
}

.status-emoji-btn.active {
  border-color: var(--ios-accent);
  background: var(--ios-accent-light);
}

.status-emoji-btn[data-emoji=""] {
  font-size: 14px;
  color: var(--ios-text-tertiary);
}

/* Theme options */
.theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-4);
}

.theme-option {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
}

.theme-preview, .theme-preview-auto {
  flex: 1;
  border-radius: var(--ios-radius-md);
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color var(--ios-duration-fast);
}

.theme-preview.active, .theme-preview-auto.active,
.theme-option.active .theme-preview,
.theme-option.active .theme-preview-auto {
  border-color: var(--ios-accent);
}

.theme-preview-half {
  display: flex;
  height: 60px;
}

.theme-preview-dark {
  flex: 1;
  background: #1c1c1e;
}

.theme-preview-light {
  flex: 1;
  background: #f2f2f7;
}

.theme-preview-sidebar {
  width: 30%;
  background: #2c2c2e;
}

.theme-preview-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.theme-preview-header {
  height: 12px;
  background: rgba(120,120,128,0.2);
}

.theme-preview-body {
  flex: 1;
}

.theme-option-info {
  padding: var(--ios-sp-2);
  text-align: center;
}

.theme-option-label {
  font-size: 13px;
  font-weight: 500;
}

/* Home background color picker */
.home-bg-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-4);
}

.home-bg-option {
  width: 44px;
  height: 44px;
  border-radius: var(--ios-radius-md);
  border: 2.5px solid transparent;
  cursor: pointer;
  padding: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, transform 0.15s;
  position: relative;
}

.home-bg-option:hover {
  transform: scale(1.08);
}

.home-bg-option.active {
  border-color: var(--ios-accent);
}

.home-bg-swatch {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 0.5px solid var(--ios-separator);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-bg-default {
  background: var(--ios-bg-secondary);
  color: var(--ios-text-tertiary);
}

.home-bg-custom-swatch {
  background: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6);
  color: #fff;
}

.home-bg-custom-label {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* ============================================
   31. GLOBAL SEARCH
   ============================================ */
.global-search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 4000;
  animation: fadeIn var(--ios-duration-fast);
}

.global-search-container {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 560px;
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-lg);
  box-shadow: var(--ios-shadow-xl);
  z-index: 4001;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.global-search-header {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
}

.search-icon {
  color: var(--ios-text-tertiary);
  flex-shrink: 0;
}

.global-search-input {
  flex: 1;
  height: 36px;
  font-size: 17px;
  border: none;
  background: transparent;
}

.global-search-shortcut {
  font-size: 12px;
  color: var(--ios-text-tertiary);
  background: var(--ios-fill-tertiary);
  padding: 2px 6px;
  border-radius: var(--ios-radius-xs);
}

.global-search-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.global-search-empty, .global-search-loading, .global-search-error {
  padding: var(--ios-sp-6);
  text-align: center;
  color: var(--ios-text-secondary);
  font-size: 15px;
}

.search-section {
  padding: var(--ios-sp-2) 0;
}

.search-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  padding: var(--ios-sp-2) var(--ios-sp-4);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  cursor: pointer;
  transition: background var(--ios-duration-fast);
  min-height: 44px;
}

.search-result-item:hover, .search-result-item.focused {
  background: var(--ios-bg-hover);
}

.result-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--ios-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.result-icon.message-icon { background: var(--ios-accent-light); color: var(--ios-accent); }
.result-icon.task-icon { background: var(--ios-green-light); color: var(--ios-green); }
.result-icon.doc-icon { background: var(--ios-orange-light); color: var(--ios-orange); }

.result-content { flex: 1; min-width: 0; }
.result-title { font-size: 15px; font-weight: 500; }
.result-meta { font-size: 12px; color: var(--ios-text-secondary); display: flex; gap: var(--ios-sp-2); }
.result-author, .result-location, .result-time { white-space: nowrap; }

/* Message highlight animation for search & pinned navigation */
.message.search-current,
.message.highlight {
  animation: msgHighlightPulse 2s ease-out forwards;
  border-radius: var(--ios-radius-md);
}

@keyframes msgHighlightPulse {
  0% { background: rgba(0,122,255,0.32); transform: scale(1.012); }
  12% { background: rgba(0,122,255,0.24); transform: scale(1); }
  40% { background: rgba(0,122,255,0.10); }
  100% { background: transparent; }
}

[data-theme="dark"] .message.search-current,
[data-theme="dark"] .message.highlight {
  animation: msgHighlightPulseDark 2s ease-out forwards;
}

@keyframes msgHighlightPulseDark {
  0% { background: rgba(10,132,255,0.38); transform: scale(1.012); }
  12% { background: rgba(10,132,255,0.26); transform: scale(1); }
  40% { background: rgba(10,132,255,0.10); }
  100% { background: transparent; }
}

/* Inline text highlight (search matches) */
.search-highlight { background: var(--ios-yellow); color: var(--ios-text-primary); padding: 0 2px; border-radius: 2px; }

/* ============================================
   32. USER PROFILE MODAL — iOS Contact Card
   ============================================ */
.user-profile-modal {
  max-width: 380px;
  padding: 0 !important;
  border-radius: 20px;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.user-profile-loading, .user-profile-error {
  padding: 48px 20px;
  text-align: center;
  color: var(--ios-text-secondary);
}

/* --- Header: avatar + name + meta --- */
.user-profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 16px;
  text-align: center;
  background: var(--ios-bg-primary);
}

.user-profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
  flex-shrink: 0;
}

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

.user-profile-avatar .avatar-initials {
  font-size: 30px;
  font-weight: 600;
  color: var(--ios-text-secondary);
}

.user-profile-avatar .online-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: var(--ios-green);
  border-radius: 50%;
  border: 2.5px solid var(--ios-bg-primary);
}

.user-profile-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.user-profile-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.user-profile-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.user-profile-admin-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  background: var(--ios-accent);
  color: #fff;
  border-radius: 20px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.user-profile-email {
  font-size: 14px;
  color: var(--ios-text-secondary);
  margin: 0;
}

.user-profile-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.user-profile-status {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 20px;
}

.user-profile-status.online {
  color: var(--ios-green);
  background: var(--ios-green-light, rgba(52, 199, 89, 0.12));
}

.user-profile-status.offline {
  color: var(--ios-text-tertiary);
  background: var(--ios-fill-tertiary);
}

.user-profile-dept-pill {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--ios-accent-light, rgba(0, 122, 255, 0.1));
  color: var(--ios-accent);
}

.user-profile-custom-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 10px;
  background: var(--ios-fill-tertiary);
  border-radius: 20px;
}

.custom-status-emoji {
  font-size: 14px;
  line-height: 1;
}

.custom-status-text {
  font-size: 12px;
  color: var(--ios-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* --- iOS Grouped Sections --- */
.up-section {
  padding: 0 16px;
  margin-top: 8px;
}

.up-section:first-of-type {
  margin-top: 4px;
}

.up-section-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--ios-text-tertiary);
  letter-spacing: 0.5px;
  padding: 0 4px 4px;
}

.up-card {
  background: var(--ios-bg-secondary, var(--ios-fill-quaternary));
  border-radius: 12px;
  padding: 12px;
}

/* Level row */
.up-level-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.up-level-row .level-badge {
  width: 44px;
  height: 44px;
  font-size: 18px;
  flex-shrink: 0;
}

.up-level-info {
  flex: 1;
  min-width: 0;
}

.up-level-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ios-text-primary);
  display: block;
  margin-bottom: 4px;
}

.up-level-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.up-level-progress-wrap .level-progress {
  flex: 1;
  height: 6px;
  background: var(--ios-fill-tertiary);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0;
}

.up-level-progress-wrap .level-progress-bar {
  height: 100%;
  background: var(--ios-accent);
  border-radius: 3px;
  transition: width 0.5s ease;
  margin-top: 0;
}

.up-level-xp {
  font-size: 11px;
  color: var(--ios-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Stats row — 3 cards */
.up-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.up-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px;
  background: var(--ios-bg-secondary, var(--ios-fill-quaternary));
  border-radius: 12px;
}

.up-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ios-text-primary);
  line-height: 1.2;
}

.up-stat-label {
  font-size: 11px;
  color: var(--ios-text-secondary);
  margin-top: 2px;
}

/* Achievements — horizontal pills, wrap on small screens */
.up-achievements-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.up-achievement-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--ios-fill-tertiary);
  border-radius: 8px;
  min-width: 0;
  cursor: default;
}

.up-achievement-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

.up-achievement-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.up-achievements-more {
  font-size: 12px;
  color: var(--ios-accent);
  text-align: center;
  margin-top: 6px;
}

/* Footer */
.up-footer {
  text-align: center;
  font-size: 12px;
  color: var(--ios-text-tertiary);
  padding: 12px 16px 16px;
}

/* ============================================
   33. CHAT INFO MODAL
   ============================================ */
.chat-info-modal-content {
  max-width: 460px;
  width: 100%;
}

.chat-info-modal-content .modal-body {
  padding: 0;
}

.chat-info-header {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-4);
  padding: var(--ios-sp-5);
  border-bottom: 0.5px solid var(--ios-separator);
}

.chat-info-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--ios-radius-full);
  overflow: hidden;
  background: var(--ios-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.chat-info-avatar span {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

.chat-info-details {
  flex: 1;
  min-width: 0;
}

.chat-info-details .chat-info-name {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--ios-text-primary);
}

.chat-info-type {
  font-size: 14px;
  color: var(--ios-text-secondary);
  margin-top: 2px;
}

/* Chat info sections */
.chat-info-section {
  padding: var(--ios-sp-4);
  border-bottom: 0.5px solid var(--ios-separator);
}

.chat-info-section:last-child {
  border-bottom: none;
}

/* Encryption verification section */
.encryption-section {
  background: rgba(52, 199, 89, 0.06);
}

.encryption-status {
  margin-bottom: var(--ios-sp-3);
}

.encryption-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(52, 199, 89, 0.12);
  color: var(--ios-green, #34c759);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--ios-radius-full);
}

.encryption-fingerprint {
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  padding: var(--ios-sp-3);
  margin-bottom: var(--ios-sp-3);
  text-align: center;
}

.fingerprint-emojis {
  font-size: 28px;
  letter-spacing: 4px;
  margin-bottom: var(--ios-sp-2);
  line-height: 1.4;
}

.fingerprint-hint {
  font-size: 12px;
  color: var(--ios-text-secondary);
  line-height: 1.4;
}

.auto-delete-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.auto-delete-icon {
  vertical-align: middle;
  opacity: 0.7;
}

/* Auto-delete message animations */
@keyframes autoDeleteFadeOut {
  0% {
    opacity: 1;
    transform: scale(1);
    max-height: 500px;
  }
  50% {
    opacity: 0.4;
    transform: scale(0.97);
  }
  100% {
    opacity: 0;
    transform: scale(0.92);
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
}

@keyframes autoDeleteWarningPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.message.msg-delete-fadeout {
  animation: autoDeleteFadeOut 0.4s ease-out forwards;
  pointer-events: none;
}

.message.auto-delete-warning {
  animation: autoDeleteWarningPulse 1s ease-in-out 2;
}

.auto-delete-setting {
  margin-top: var(--ios-sp-3);
}

.auto-delete-header {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  font-size: 14px;
  font-weight: 500;
  color: var(--ios-text-primary);
  margin-bottom: var(--ios-sp-2);
}

.auto-delete-options {
  display: flex;
  gap: var(--ios-sp-2);
  flex-wrap: wrap;
}

.auto-delete-option {
  padding: 6px 14px;
  border-radius: var(--ios-radius-full);
  border: 1.5px solid var(--ios-separator);
  background: var(--ios-bg-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.auto-delete-option:hover {
  border-color: var(--ios-accent);
  color: var(--ios-accent);
}

.auto-delete-option.active {
  background: var(--ios-accent);
  border-color: var(--ios-accent);
  color: #fff;
}

.chat-info-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ios-sp-3);
}

.chat-info-section .section-header h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ios-text-primary);
  margin: 0;
}

/* Participants list */
.participants-list {
  display: flex;
  flex-direction: column;
}

.participant-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) 0;
  cursor: pointer;
  border-radius: var(--ios-radius-sm);
  transition: background var(--ios-duration-fast);
}

.participant-item:hover {
  background: var(--ios-bg-hover);
}

.participant-item + .participant-item {
  border-top: 0.5px solid var(--ios-separator);
}

.participant-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--ios-radius-full);
  overflow: hidden;
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

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

.participant-avatar span {
  font-size: 14px;
  font-weight: 600;
  color: var(--ios-text-secondary);
}

.participant-avatar .status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ios-bg-primary);
  background: var(--ios-text-tertiary);
}

.participant-avatar.online .status-dot {
  background: var(--ios-green);
}

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

.participant-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ios-text-primary);
  display: flex;
  align-items: center;
  gap: var(--ios-sp-1);
  flex-wrap: wrap;
}

.you-label {
  font-size: 13px;
  color: var(--ios-text-secondary);
  font-weight: 400;
}

.role-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--ios-radius-full);
  font-weight: 500;
}

.role-badge.role-founder {
  background: var(--ios-orange-light);
  color: #C77D00;
}

.role-badge.role-admin {
  background: var(--ios-accent-light);
  color: var(--ios-accent);
}

.participant-status {
  font-size: 13px;
  color: var(--ios-text-tertiary);
}

.participant-status.online {
  color: var(--ios-green);
}

.participant-actions {
  flex-shrink: 0;
}

/* Participant dropdown menu */
.participant-menu {
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-md);
  box-shadow: var(--ios-shadow-xl);
  overflow: hidden;
  z-index: 1100;
  min-width: 200px;
}

/* Admin actions in chat info */
.chat-info-section.admin-section .admin-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
}

.chat-info-section .admin-actions .btn {
  justify-content: flex-start;
  gap: var(--ios-sp-2);
  width: 100%;
  text-align: left;
}

/* Outline danger button */
.btn-outline-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ios-sp-2);
  width: 100%;
  padding: var(--ios-sp-3);
  font-size: 15px;
  font-weight: 500;
  color: var(--ios-red);
  background: transparent;
  border: 1px solid var(--ios-red);
  border-radius: var(--ios-radius-md);
  cursor: pointer;
  transition: background var(--ios-duration-fast);
}

.btn-outline-danger:hover {
  background: var(--ios-red-light);
}

/* Edit chat modal */
.edit-chat-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ios-sp-3);
  margin-bottom: var(--ios-sp-4);
}

.edit-chat-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--ios-radius-full);
  overflow: hidden;
  background: var(--ios-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.edit-chat-avatar span {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
}

/* Admin management modal */
.admin-list-section,
.add-admin-section {
  margin-bottom: var(--ios-sp-4);
}

.admin-list-section h4,
.add-admin-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  margin: 0 0 var(--ios-sp-2) 0;
}

.admin-list,
.member-list {
  display: flex;
  flex-direction: column;
  background: var(--ios-bg-primary);
  border-radius: var(--ios-radius-md);
  overflow: hidden;
}

.admin-item,
.member-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-3) var(--ios-sp-4);
}

.admin-item + .admin-item,
.member-item + .member-item {
  border-top: 0.5px solid var(--ios-separator);
}

.admin-name,
.member-name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--ios-text-primary);
}

.btn-demote {
  color: var(--ios-red);
}

.btn-promote {
  flex-shrink: 0;
}

/* ============================================
   ADDITIONAL: Chat module specific classes
   ============================================ */

/* Chat list item structure (from chat-list.js) */
.chat-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ios-sp-2);
}

.chat-item-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ios-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Encrypted chat lock icon */
.encrypted-icon {
  color: var(--ios-green, #34c759);
  flex-shrink: 0;
  vertical-align: middle;
}

.chat-name .encrypted-icon {
  color: var(--ios-green, #34c759);
}

.chat-item-time {
  font-size: 13px;
  color: var(--ios-text-secondary);
  flex-shrink: 0;
}

.chat-item-message {
  font-size: 15px;
  color: var(--ios-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item-message.typing {
  color: var(--ios-accent);
  font-style: italic;
}

.typing-text {
  color: var(--ios-accent);
}

.user-status-emoji {
  font-size: 14px;
  margin-left: 2px;
}

.avatar-current-user {
  width: 32px;
  height: 32px;
  border-radius: var(--ios-radius-full);
  cursor: pointer;
}

/* Chat window header (from chat-window.js) */
.chat-header {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  min-height: var(--ios-nav-height);
  background: rgba(249,249,249,0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0.5px solid var(--ios-separator-opaque);
  position: relative;
  z-index: 50;
}

[data-theme="dark"] .chat-header {
  background: rgba(28,28,30,0.94);
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ios-accent);
  flex-shrink: 0;
}

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .mobile-only {
    display: flex;
  }
}

.chat-name {
  font-size: 17px;
  font-weight: 600;
}

.chat-status {
  font-size: 13px;
  color: var(--ios-text-secondary);
}

.chat-status.online {
  color: var(--ios-green);
}

.chat-status.typing {
  color: var(--ios-accent);
}

/* Chat search panel */
.chat-search-panel {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-bottom: 0.5px solid var(--ios-separator);
}

.chat-search-panel .form-control {
  flex: 1;
  height: 36px;
}

.search-results-count {
  font-size: 13px;
  color: var(--ios-text-secondary);
  white-space: nowrap;
}

/* Pinned messages banner */
.pinned-messages-banner {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  background: var(--ios-bg-primary);
  border-bottom: 0.5px solid var(--ios-separator);
  cursor: pointer;
}

.pinned-banner-content {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-3);
  flex: 1;
  min-width: 0;
}

.pinned-icon {
  color: var(--ios-accent);
  flex-shrink: 0;
}

.pinned-text {
  flex: 1;
  min-width: 0;
}

.pinned-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ios-accent);
  display: block;
}

.pinned-content {
  font-size: 14px;
  color: var(--ios-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.pinned-close-btn {
  flex-shrink: 0;
}

/* Telegram-style pinned progress indicator (vertical segments) */
.pinned-progress {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  width: 3px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 28px;
  border-radius: 2px;
  overflow: hidden;
}

.pinned-progress-seg {
  flex: 1;
  background: var(--ios-separator-opaque);
  border-radius: 2px;
  transition: background 0.25s ease;
}

.pinned-progress-seg.active {
  background: var(--ios-accent);
}

/* Username in message bubble */
.message .username {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  display: block;
}

.message.own .username {
  display: none;
}

/* Telegram-style random username colors */
.username.ucolor-1 { color: #E17076; }
.username.ucolor-2 { color: #7BC862; }
.username.ucolor-3 { color: #E5A64E; }
.username.ucolor-4 { color: #65AADD; }
.username.ucolor-5 { color: #A695E7; }
.username.ucolor-6 { color: #EE7AAE; }
.username.ucolor-7 { color: #6EC9CB; }
.username.ucolor-8 { color: #E88B68; }

.message-edited {
  font-size: 11px;
  color: var(--ios-text-tertiary);
  font-style: italic;
}

.message.own .message-edited {
  color: rgba(255,255,255,0.55);
}

.message-status {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: var(--ios-text-tertiary);
  margin-left: 3px;
}

.message-status svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.message-status.read {
  color: var(--ios-accent);
}

.message-status.pending svg {
  width: 12px;
  height: 12px;
  animation: spin 1s linear infinite;
}

.message.pending, .message.msg-pending {
  opacity: 0.6;
}

/* Failed message state */
.message.msg-failed {
  opacity: 0.85;
}
.message.msg-failed .message-content {
  border: 1px solid var(--ios-red, #FF3B30);
}
.message-status.failed {
  color: var(--ios-red, #FF3B30);
}
.message-failed-bar {
  margin-top: 4px;
}
.message-retry-link {
  font-size: 12px;
  color: var(--ios-red, #FF3B30);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.message-retry-link:hover {
  text-decoration: underline;
}

/* Reaction buttons */
.reaction-btn, .pin-msg-btn, .edit-msg-btn, .delete-msg-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ios-radius-xs);
  color: var(--ios-text-secondary);
  cursor: pointer;
}

.reaction-btn:hover, .edit-msg-btn:hover { color: var(--ios-text-primary); }
.delete-msg-btn:hover { color: var(--ios-red); }

.reaction-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: var(--ios-radius-full);
  background: var(--ios-fill-tertiary);
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
}

.reaction-item.own {
  border-color: var(--ios-accent);
  background: var(--ios-accent-light);
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: var(--ios-sp-2) var(--ios-sp-4);
}

.typing-indicator .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ios-text-tertiary);
  animation: typingDot 1.4s infinite ease-in-out;
}

.typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }

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

/* Emoji picker */
.emoji-picker {
  position: absolute;
  bottom: 100%;
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-md);
  box-shadow: var(--ios-shadow-lg);
  padding: var(--ios-sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 240px;
  z-index: 20;
}

.emoji-option {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: var(--ios-radius-xs);
  cursor: pointer;
}

.emoji-option:hover {
  background: var(--ios-bg-hover);
}

/* Mention dropdown */
.mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-md) var(--ios-radius-md) 0 0;
  box-shadow: var(--ios-shadow-lg);
  max-height: 200px;
  overflow-y: auto;
  z-index: 20;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-3);
  cursor: pointer;
}

.mention-item:hover, .mention-item.active {
  background: var(--ios-bg-hover);
}

.mention-item-info { flex: 1; }
.mention-item-name { font-size: 15px; font-weight: 500; }

/* File/media message types */
.message-video {
  max-width: 280px;
  border-radius: var(--ios-radius-md);
  overflow: hidden;
  position: relative;
}

.message-video video {
  width: 100%;
  display: block;
}

.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.message-audio {
  min-width: 200px;
}

.file-size {
  font-size: 12px;
  color: var(--ios-text-secondary);
}

/* Search highlight */
.search-highlight {
  background: var(--ios-yellow);
  color: var(--ios-text-primary);
  padding: 0 2px;
  border-radius: 2px;
}

/* Pin scope options */
.pin-scope-options {
  display: flex;
  flex-direction: column;
  gap: var(--ios-sp-2);
}

.pin-scope-btn {
  justify-content: flex-start;
}

/* Button close (X) */
.btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-close:hover {
  background: var(--ios-fill-secondary);
}

/* Modal sizes */
.modal-sm, .modal.modal-sm, .modal-small {
  max-width: 360px;
}

.modal-large, .modal.modal-large {
  max-width: 700px;
}

/* System message styling */
.system-message-icon {
  display: inline-flex;
  margin-right: var(--ios-sp-1);
}

/* Date separator in messages */
.message-date {
  text-align: center;
  padding: var(--ios-sp-3) 0;
}

.message-date span {
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--ios-radius-full);
}

/* Poll-specific */
.poll-placeholder { margin: var(--ios-sp-1) 0; }
.poll-info { font-size: 13px; color: var(--ios-text-secondary); }
.poll-item-text { font-size: 15px; position: relative; z-index: 1; }
.poll-item-votes { font-size: 13px; color: var(--ios-text-secondary); position: relative; z-index: 1; }
.poll-result-percentage { font-size: 13px; font-weight: 600; color: var(--ios-accent); }
.poll-results { margin-top: var(--ios-sp-2); }
.poll-progress-row { display: flex; align-items: center; gap: var(--ios-sp-2); margin-bottom: var(--ios-sp-1); }
.poll-progress { flex: 1; height: 4px; background: var(--ios-fill-tertiary); border-radius: 2px; overflow: hidden; }

/* Input class alias */
.input {
  width: 100%;
  height: 44px;
  padding: 0 var(--ios-sp-4);
  background-color: var(--ios-bg-primary);
  border: 1px solid var(--ios-separator-opaque);
  border-radius: var(--ios-radius-md);
  font-size: 17px;
  color: var(--ios-text-primary);
  transition: border-color var(--ios-duration-fast);
}

.input:focus {
  border-color: var(--ios-accent);
  box-shadow: 0 0 0 3px var(--ios-accent-light);
}

/* Recording state */
.message-input-container.recording {
  background: var(--ios-bg-primary);
}

/* Voice Recording Overlay */
.voice-recording-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: var(--ios-bg-primary);
  z-index: 10;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.voice-recording-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.voice-rec-cancel {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--ios-fill-tertiary);
  border-radius: 50%;
  color: var(--ios-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.voice-rec-cancel:active {
  background: var(--ios-red);
  color: #fff;
}

.voice-rec-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.voice-rec-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ios-red);
  animation: recDotPulse 1s ease-in-out infinite;
}

@keyframes recDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.voice-rec-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--ios-text-primary);
  font-variant-numeric: tabular-nums;
}

.voice-rec-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  overflow: hidden;
}

.voice-rec-bar {
  flex: 1;
  min-width: 2px;
  max-width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--ios-accent);
  transition: height 0.08s ease;
}

.voice-rec-send {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--ios-accent);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}

.voice-rec-send:active {
  transform: scale(0.9);
}

/* ============================================
   32B. MISSING CLASS ALIASES & ADDITIONS
   ============================================ */

/* .form-input alias (used in conference/guest-join, poll-create, news) */
.form-input {
  width: 100%;
  height: 44px;
  padding: 0 var(--ios-sp-4);
  background-color: var(--ios-fill-tertiary);
  border: none;
  border-radius: var(--ios-radius-md);
  font-size: 17px;
  color: var(--ios-text-primary);
  transition: border-color var(--ios-duration-fast), box-shadow var(--ios-duration-fast);
}

.form-input:focus {
  background: var(--ios-bg-primary);
  box-shadow: 0 0 0 3px var(--ios-accent-light);
}

/* Conference section/grid (conference-list.js) */
.conference-section {
  margin-bottom: var(--ios-sp-4);
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--ios-sp-3);
}

.conference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ios-sp-3);
}

@media (max-width: 768px) {
  .conference-grid {
    grid-template-columns: 1fr;
  }
}

/* Category chips (news-feed.js) */
.category-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--ios-sp-3);
  border-radius: var(--ios-radius-full);
  background: var(--ios-fill-tertiary);
  color: var(--ios-text-secondary);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--ios-duration-fast);
  border: none;
}

.category-chip.active {
  background: var(--ios-accent);
  color: #fff;
}

.category-chip:hover:not(.active) {
  background: var(--ios-fill-secondary);
}

/* News categories container */
.news-categories {
  display: flex;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-2) var(--ios-sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Page header (news, conferences, interviews) */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ios-sp-3) var(--ios-sp-4);
  min-height: 44px;
}

.page-header h2 {
  font-size: 22px;
  font-weight: 700;
}

/* ============================================
   33. UTILITY CLASSES
   ============================================ */
.text-muted, .text-secondary { color: var(--ios-text-secondary); }
.text-small { font-size: 13px; }
.text-primary { color: var(--ios-text-primary); }
.text-danger { color: var(--ios-red); }
.text-success { color: var(--ios-green); }
.text-warning { color: var(--ios-orange); }
.text-hint { color: var(--ios-text-tertiary); font-size: 13px; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.hidden { display: none !important; }
.visible { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }
.flex-1 { flex: 1; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: var(--ios-sp-1); }
.gap-2 { gap: var(--ios-sp-2); }
.gap-3 { gap: var(--ios-sp-3); }
.gap-4 { gap: var(--ios-sp-4); }

.w-full { width: 100%; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mt-1 { margin-top: var(--ios-sp-1); }
.mt-2 { margin-top: var(--ios-sp-2); }
.mt-3 { margin-top: var(--ios-sp-3); }
.mt-4 { margin-top: var(--ios-sp-4); }
.mb-1 { margin-bottom: var(--ios-sp-1); }
.mb-2 { margin-bottom: var(--ios-sp-2); }
.mb-3 { margin-bottom: var(--ios-sp-3); }
.mb-4 { margin-bottom: var(--ios-sp-4); }

.p-2 { padding: var(--ios-sp-2); }
.p-3 { padding: var(--ios-sp-3); }
.p-4 { padding: var(--ios-sp-4); }

.rounded { border-radius: var(--ios-radius-md); }
.rounded-sm { border-radius: var(--ios-radius-sm); }
.rounded-lg { border-radius: var(--ios-radius-lg); }
.rounded-full { border-radius: var(--ios-radius-full); }

.spinner-small {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.btn-block {
  width: 100%;
  display: flex;
}

.btn-content {
  display: flex;
  align-items: center;
  gap: var(--ios-sp-2);
}

.btn-loading {
  opacity: 0.6;
  pointer-events: none;
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--ios-accent);
  color: var(--ios-accent);
}

.btn-outline:hover {
  background: var(--ios-accent-light);
}

.btn-danger.btn-outline {
  background: transparent;
  border: 1.5px solid var(--ios-red);
  color: var(--ios-red);
}

.btn-danger.btn-outline:hover {
  background: rgba(255, 59, 48, 0.1);
}

.btn-danger-subtle {
  background: var(--ios-red-light);
  color: var(--ios-red);
}

.btn-close-sidebar, .btn-close-modal {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ios-fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loading spinner with text */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ios-sp-2);
  padding: var(--ios-sp-6);
}

.loading-spinner .spin {
  animation: spin 0.8s linear infinite;
}

/* Mobile-specific */
.back-btn-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ios-accent);
}

/* Keyboard visible adjustments */
body.keyboard-visible .mobile-tab-bar {
  display: none;
}

body.keyboard-visible .main-content {
  padding-bottom: 0;
}

/* ============================================
   34. DESKTOP ADAPTATIONS (≥768px) — Tablet
   ============================================ */
@media (min-width: 768px) {
  /* App shell becomes row layout */
  #app {
    flex-direction: row;
  }

  /* Tab bar: centered at bottom on tablet */
  .mobile-tab-bar {
    left: 50%;
    transform: translateX(-50%);
    max-width: 500px;
    border-radius: var(--ios-radius-lg) var(--ios-radius-lg) 0 0;
    border: 0.5px solid var(--ios-separator);
    border-bottom: none;
  }

  /* When chat sidebar is visible, tab bar moves into the sidebar */
  body.show-chat-list .mobile-tab-bar {
    position: absolute;
    left: 0;
    right: auto;
    width: 360px;
    max-width: 360px;
    transform: none;
    border-radius: 0;
    border: none;
    border-top: 0.5px solid var(--ios-separator-opaque);
    border-right: 0.5px solid var(--ios-separator);
  }

  /* Chat main content doesn't need tab bar padding on desktop */
  body.show-chat-list .main-content {
    padding-bottom: 0;
  }

  /* Content gets max-width on desktop */
  .main-content {
    background: var(--app-bg, var(--ios-bg-secondary));
  }

  /* Pages get centered column */
  .news-feed-page, .news-post-page,
  .settings-page, .admin-page, .gamification-card,
  .conference-list-page, .interviews-page {
    max-width: 700px;
    margin: 0 auto;
  }

  /* Task list centered on tablet */
  .task-list-main {
    max-width: 800px;
    margin: 0 auto;
  }

  /* Home grid centered on wide screens */
  .home-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--ios-sp-5) var(--ios-sp-4) var(--ios-sp-4);
  }

  /* Grouped lists get inset */
  .ios-list, .settings-card, .admin-section, .admin-card {
    margin-left: var(--ios-sp-4);
    margin-right: var(--ios-sp-4);
  }

  /* Cards get subtle shadow on desktop */
  .home-card, .news-card, .conference-card,
  .achievement-item, .leaderboard-item, .metric-card {
    box-shadow: var(--ios-shadow-sm);
  }

  /* Modals stay centered on desktop */
  .modal-overlay, .modal-backdrop {
    padding: var(--ios-sp-6);
    align-items: center;
  }
  .modal-content, .modal {
    max-width: 500px;
    border-radius: var(--ios-radius-lg);
    animation: modalIn var(--ios-duration-normal) var(--ios-ease);
  }

  /* Forms wider */
  .form-row {
    display: flex;
    gap: var(--ios-sp-3);
  }

  /* Task filter drawer becomes visible sidebar */
  .mobile-menu-btn {
    display: none !important;
  }

  .task-sidebar-backdrop {
    display: none !important;
  }

  /* Achievements grid wider */
  .achievements-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  /* Admin stats row */
  .admin-stats-row {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Documents grid larger */
  .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  /* Task detail in centered modal on tablet */
  .task-detail-container {
    max-width: 800px;
    margin: 0 auto;
  }
}

/* ============================================
   35. DESKTOP LAYOUT (≥1024px) — Full desktop with nav sidebar
   ============================================ */
@media (min-width: 1024px) {
  /* Show permanent left navigation sidebar */
  #app {
    flex-direction: row;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    width: 240px;
    flex-shrink: 0;
    border-right: 0.5px solid var(--ios-separator);
    background: var(--ios-bg-primary);
    z-index: 10;
  }

  .sidebar-menu {
    display: flex;
    flex-direction: column;
    padding: var(--ios-sp-3) 0;
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ios-sp-3) var(--ios-sp-4);
    border-bottom: 0.5px solid var(--ios-separator);
    margin-bottom: var(--ios-sp-2);
  }

  .sidebar-header h2 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ios-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 var(--ios-sp-2);
  }

  .sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: var(--ios-sp-3);
    padding: 10px var(--ios-sp-3);
    border-radius: var(--ios-radius-md);
    color: var(--ios-text-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background var(--ios-duration-fast);
  }

  .sidebar-nav .nav-link:hover {
    background: var(--ios-bg-hover);
  }

  .sidebar-nav .nav-link.active {
    background: var(--ios-accent-light, rgba(0, 122, 255, 0.1));
    color: var(--ios-accent);
  }

  .sidebar-nav .nav-link.active svg {
    stroke: var(--ios-accent);
  }

  .sidebar-nav .nav-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: var(--ios-text-secondary);
  }

  /* On non-chat pages, sidebar only shows nav (no chat list) */
  .sidebar-content {
    display: none;
  }

  /* On chat pages, sidebar shows chat list below nav */
  body.show-chat-list .sidebar .sidebar-content {
    display: block;
    flex: 1;
    overflow-y: auto;
    border-top: 0.5px solid var(--ios-separator);
  }

  /* Hide mobile bottom tab bar on desktop (non-chat pages) */
  .mobile-tab-bar {
    display: none !important;
  }

  /* Main content takes remaining space, no bottom padding */
  .main-content {
    flex: 1;
    padding-bottom: 0;
  }

  /* --- Chat-specific: wider sidebar when chat is active --- */
  body.show-chat-list .sidebar {
    width: 360px;
    padding-bottom: calc(var(--ios-tab-height) + var(--ios-safe-bottom));
  }

  body.show-chat-list .sidebar .sidebar-menu {
    display: none; /* nav hidden in chat — sidebar is full chat list */
  }

  body.show-chat-list .sidebar .sidebar-content {
    border-top: none;
  }

  body.show-chat-list .main-content {
    flex: 1;
  }

  /* Show tab bar inside chat sidebar */
  body.show-chat-list .mobile-tab-bar {
    display: flex !important;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 360px;
    max-width: 360px;
    transform: none;
    border-radius: 0;
    border: none;
    border-top: 0.5px solid var(--ios-separator-opaque);
    border-right: 0.5px solid var(--ios-separator);
    z-index: 20;
  }

  /* No need for back button on desktop chat */
  body.show-chat-list .back-btn-mobile {
    display: none;
  }

  body.show-chat-list .chat-window-header .back-btn-mobile,
  body.show-chat-list .chat-window-header .back-btn {
    display: none;
  }

  body.in-chat-room .main-content {
    padding-bottom: 0;
  }

  /* --- Non-chat pages: centered content column --- */
  .news-feed-page, .news-post-page,
  .settings-page, .admin-page, .gamification-card,
  .conference-list-page, .interviews-page {
    max-width: 750px;
    margin: 0 auto;
  }

  .task-list-main {
    max-width: 900px;
    margin: 0 auto;
  }

  .home-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--ios-sp-5) var(--ios-sp-6) var(--ios-sp-4);
  }

  .task-detail-container {
    max-width: 900px;
    margin: 0 auto;
  }

  /* Documents sidebar visible */
  .documents-page {
    flex-direction: row;
  }
  .documents-sidebar {
    display: flex !important;
    flex-direction: column;
    width: 240px;
    height: 100%;
    background: var(--ios-bg-primary);
    border-right: 0.5px solid var(--ios-separator);
    flex-shrink: 0;
    overflow-y: auto;
  }
  .documents-sidebar .documents-nav { flex: 1; }
  .documents-sidebar .storage-info {
    margin-top: auto;
    border-top: 0.5px solid var(--ios-separator);
  }

  /* Task board columns wider */
  .task-column {
    min-width: 300px;
    max-width: 350px;
  }

  /* Conference sidebar */
  .conference-sidebar, .call-sidebar {
    position: relative;
    width: 320px;
    flex-shrink: 0;
  }
}

/* ============================================
   35b. WIDE DESKTOP (≥1280px) — Extra space usage
   ============================================ */
@media (min-width: 1280px) {
  /* Wider nav sidebar */
  .sidebar {
    width: 260px;
  }

  /* Wider chat sidebar + tab bar */
  body.show-chat-list .sidebar {
    width: 400px;
  }
  body.show-chat-list .mobile-tab-bar {
    width: 400px;
    max-width: 400px;
  }

  /* Pages can go wider */
  .news-feed-page, .news-post-page,
  .settings-page, .admin-page, .gamification-card,
  .conference-list-page, .interviews-page {
    max-width: 800px;
  }

  .task-list-main, .task-detail-container {
    max-width: 1000px;
  }

  /* Larger document grid */
  .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* ============================================
   36. MOBILE-SPECIFIC (≤768px)
   ============================================ */
@media (max-width: 768px) {
  /* Sidebar always hidden on mobile */
  .sidebar {
    display: none !important;
  }

  /* Chat list mode on mobile: show sidebar as full-screen chat list */
  body.show-chat-list .sidebar {
    display: flex !important;
    width: 100%;
    height: 100%;
    border-right: none;
  }

  body.show-chat-list .main-content {
    display: none;
  }

  /* In chat room: full screen chat, show main content */
  body.in-chat-room .main-content {
    display: block;
    padding-bottom: 0;
  }

  /* Mobile menu button visible for tasks */
  .task-list-main .mobile-menu-btn,
  .task-board-mobile-header .mobile-menu-btn {
    display: flex !important;
  }

  /* Task filter drawer slide in from right */
  body.task-sidebar-open .task-sidebar-backdrop {
    display: block;
    animation: fadeIn var(--ios-duration-fast);
  }

  body.task-sidebar-open .sidebar {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 300px;
    z-index: 950;
    animation: slideInFromRight var(--ios-duration-normal) var(--ios-ease);
    border-right: none;
    border-left: 0.5px solid var(--ios-separator);
    box-shadow: var(--ios-shadow-xl);
  }

  body.task-sidebar-open .sidebar .sidebar-menu {
    display: none;
  }

  body.task-sidebar-open .sidebar .sidebar-content {
    display: block;
  }

  /* Task detail full screen */
  .task-detail-container {
    height: 100%;
    overflow-y: auto;
  }

  /* Task board height */
  .task-board-main {
    height: 100%;
  }

  /* News editor fullscreen */
  .news-editor-modal {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .news-editor-footer {
    padding-bottom: calc(var(--ios-sp-4) + var(--ios-tab-height) + var(--ios-safe-bottom));
  }

  /* Calendar grid compact */
  .calendar-day {
    min-height: 48px;
    padding: var(--ios-sp-1);
  }

  .calendar-day-number {
    font-size: 12px;
  }

  /* Form rows stack on mobile */
  .form-row {
    flex-direction: column;
  }

  /* Gamification metrics */
  .gamification-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Admin page */
  .admin-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-user-actions {
    flex-direction: column;
    gap: var(--ios-sp-1);
  }

  /* Conference controls */
  .conference-sidebar, .call-sidebar {
    position: fixed;
    width: 100%;
    bottom: 0;
    top: auto;
    height: 60vh;
    border-radius: var(--ios-radius-xl) var(--ios-radius-xl) 0 0;
  }

  /* Conference room mobile: stack sidebar over video */
  .conference-sidebar,
  .conference-chat-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-width: unset;
    z-index: 50;
  }

  .conference-main-content {
    flex-direction: column;
  }

  /* Mobile conference grid: stack all layouts vertically */
  .remote-videos-grid.grid-2 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .remote-videos-grid.grid-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .remote-videos-grid.grid-6,
  .remote-videos-grid.grid-9,
  .remote-videos-grid.grid-many {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(120px, 1fr);
  }

  /* Ensure video tiles have actual height on mobile */
  .remote-video-container,
  .local-video-tile {
    min-height: 120px;
  }

  .controls-main {
    gap: var(--ios-sp-1);
  }

  .btn-conference-control, .btn-call-control {
    width: 44px;
    height: 44px;
  }

  /* Search fullscreen on mobile */
  .global-search-container {
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    height: 100%;
  }

  /* Gamification tabs horizontal scroll */
  .gam-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .gam-tab {
    flex: 0 0 auto;
  }
}

/* ============================================
   37. DARK THEME
   ============================================ */
[data-theme="dark"] {
  --ios-bg-primary: #1C1C1E;
  --ios-bg-secondary: #000000;
  --ios-bg-tertiary: #2C2C2E;
  --ios-bg-grouped: #000000;
  --ios-bg-elevated: #2C2C2E;
  --ios-bg-hover: rgba(255,255,255,0.06);
  --ios-bg-active: rgba(255,255,255,0.1);

  --ios-text-primary: #FFFFFF;
  --ios-text-secondary: rgba(235,235,245,0.6);
  --ios-text-tertiary: rgba(235,235,245,0.3);
  --ios-text-quaternary: rgba(235,235,245,0.18);

  --ios-separator: rgba(84,84,88,0.36);
  --ios-separator-opaque: #38383A;
  --ios-fill: rgba(120,120,128,0.36);
  --ios-fill-secondary: rgba(120,120,128,0.32);
  --ios-fill-tertiary: rgba(120,120,128,0.24);

  --ios-accent-light: rgba(0,122,255,0.2);
  --ios-red-light: rgba(255,59,48,0.2);
  --ios-orange-light: rgba(255,149,0,0.2);
  --ios-green-light: rgba(52,199,89,0.2);
  --ios-purple-light: rgba(175,82,222,0.2);

  --ios-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --ios-shadow-md: 0 2px 12px rgba(0,0,0,0.4);
  --ios-shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --ios-shadow-xl: 0 16px 48px rgba(0,0,0,0.6);

  /* Legacy aliases */
  --color-bg: var(--ios-bg-primary);
  --color-surface: var(--ios-bg-primary);
  --color-surface-hover: var(--ios-bg-hover);
  --color-border: var(--ios-separator);
  --color-text: var(--ios-text-primary);
  --color-text-secondary: var(--ios-text-secondary);
}

[data-theme="dark"] body {
  background: var(--app-bg, var(--ios-bg-secondary));
  color: var(--ios-text-primary);
}

[data-theme="dark"] .mobile-tab-bar {
  background: rgba(28,28,30,0.92);
  border-top-color: var(--ios-separator-opaque);
}

[data-theme="dark"] .more-menu-sheet,
[data-theme="dark"] .bottom-sheet {
  background: var(--ios-bg-elevated);
}

[data-theme="dark"] .chat-window-header {
  background: rgba(28,28,30,0.94);
}

[data-theme="dark"] .message:not(.own):not(.system) .message-content,
[data-theme="dark"] .message:not(.own):not(.system) .chat-message {
  background: var(--ios-bg-tertiary);
  color: var(--ios-text-primary);
}

[data-theme="dark"] .message.last:not(.own) .message-content::after,
[data-theme="dark"] .message.single:not(.own) .message-content::after {
  background: var(--ios-bg-tertiary);
}

[data-theme="dark"] .chat-item.chat-active {
  background: rgba(0,122,255,0.15);
}

[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23EBEBF599' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

[data-theme="dark"] .search-input, [data-theme="dark"] input[type="search"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23EBEBF599' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
}

[data-theme="dark"] .toast {
  background: var(--ios-bg-elevated);
  box-shadow: var(--ios-shadow-lg);
}

[data-theme="dark"] ::selection {
  background: rgba(0,122,255,0.3);
}

[data-theme="dark"] .task-status-pill[data-status="in_progress"] { color: var(--ios-orange); }
[data-theme="dark"] .task-status-pill[data-status="done"],
[data-theme="dark"] .task-status-pill[data-status="completed"] { color: var(--ios-green); }

/* Dark theme — elevated surfaces & components */
[data-theme="dark"] .home-card {
  background: var(--ios-bg-tertiary);
  box-shadow: none;
}
[data-theme="dark"] .file-item {
  background: var(--ios-bg-tertiary);
  box-shadow: none;
}
[data-theme="dark"] .settings-card {
  background: var(--ios-bg-tertiary);
}
[data-theme="dark"] .task-meta-list {
  background: var(--ios-bg-tertiary);
}
[data-theme="dark"] .task-participants-section {
  background: var(--ios-bg-tertiary);
}
[data-theme="dark"] .task-row {
  background: var(--ios-bg-primary);
}

/* Dark bubbles — own brighter blue, received darker gray */
[data-theme="dark"] .message.own .message-content {
  background: #0A84FF;
}

/* Dark frosted glass headers */
[data-theme="dark"] .cloudos-toolbar {
  background: rgba(28,28,30,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Dark swipe actions */
[data-theme="dark"] .chat-item {
  background: var(--ios-bg-primary);
}

/* Dark iOS input bar */
[data-theme="dark"] .ios-input-pill {
  background: var(--ios-fill-tertiary);
}
[data-theme="dark"] .ios-input-action {
  color: var(--ios-accent);
}

/* Dark bottom sheet */
[data-theme="dark"] .bs-group {
  background: var(--ios-bg-tertiary);
}

/* Dark conference room already uses dark backgrounds */

/* ============================================
   OFFLINE BANNER
   ============================================ */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--ios-red, #FF3B30);
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), background 0.3s ease;
  pointer-events: none;
}
.offline-banner svg { flex-shrink: 0; }

.offline-banner--visible {
  transform: translateY(0);
  pointer-events: auto;
}

.offline-banner--reconnected {
  transform: translateY(0);
  background: var(--ios-green, #34C759);
  pointer-events: auto;
}

.offline-banner--hidden {
  transform: translateY(-100%);
}

/* Push main content down when offline */
body.is-offline .sidebar,
body.is-offline .main-content {
  padding-top: 36px;
}

/* ============================================
   38. PRINT STYLES
   ============================================ */
@media print {
  .mobile-tab-bar, .sidebar, .more-menu,
  .fab-button, .message-actions, .toast-container {
    display: none !important;
  }
  .main-content {
    padding-bottom: 0;
    overflow: visible;
  }
  body { background: #fff; color: #000; }
}

/* ============================================
   39. MOBILE KEYBOARD FIX
   ============================================ */
.mobile-keyboard-active .message-input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* ============================================
   40. PULL-TO-REFRESH
   ============================================ */
.ptr-spinner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  transform: translateY(0);
  pointer-events: none;
  z-index: 50;
}

.ptr-spinner-inner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ios-bg-elevated, #fff);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -36px; /* hidden above viewport */
}

.ptr-spinner .ptr-arrow {
  transition: transform 0.15s ease, opacity 0.15s ease;
  color: var(--ios-text-secondary, #8E8E93);
  opacity: 0;
}

.ptr-spinner.ptr-ready .ptr-arrow {
  color: var(--ios-accent, #007AFF);
  opacity: 1;
}

.ptr-spinner.ptr-refreshing .ptr-arrow {
  animation: ptr-spin 0.8s linear infinite;
  color: var(--ios-accent, #007AFF);
  opacity: 1;
}

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

[data-theme="dark"] .ptr-spinner-inner {
  background: var(--ios-bg-elevated, #2C2C2E);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ============================================
   END OF iOS DESIGN SYSTEM
   ============================================ */

/* ============================================
   INTERVIEW RESCHEDULE PUBLIC PAGE
   ============================================ */
.interview-reschedule-active #sidebar,
.interview-reschedule-active .mobile-tab-bar { display: none !important; }
.interview-reschedule-page { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }

.ir-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 16px;
}

.ir-container {
  width: 100%;
  max-width: 460px;
}

.ir-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.ir-header {
  text-align: center;
  margin-bottom: 24px;
}

.ir-logo {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #5e6ad2 0%, #4f46e5 100%);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}

.ir-header h1 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.ir-info { margin-bottom: 24px; }

.ir-info h2 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 16px;
  text-align: center;
}

.ir-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}

.ir-label { color: #64748b; font-size: 14px; }
.ir-value { color: #1e293b; font-weight: 500; font-size: 14px; text-align: right; }
.ir-date { color: #5e6ad2; font-weight: 600; }
.ir-note { color: #94a3b8; font-size: 13px; justify-content: center; border: none; }

.ir-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ir-btn {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.ir-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ir-btn-primary {
  background: linear-gradient(135deg, #5e6ad2 0%, #4f46e5 100%);
  color: #fff;
}

.ir-btn-primary:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }

.ir-btn-danger {
  background: #fff;
  color: #ef4444;
  border: 2px solid #fecaca;
}

.ir-btn-danger:hover:not(:disabled) { background: #fef2f2; }

.ir-btn-secondary {
  background: #f1f5f9;
  color: #475569;
}

.ir-btn-secondary:hover { background: #e2e8f0; }

/* Date picker */
.ir-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 16px;
  padding: 2px;
}

.ir-date-btn {
  width: 100%;
  padding: 12px 16px;
  background: #f8fafc;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  color: #1e293b;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}

.ir-date-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.ir-date-btn.ir-selected { background: #eef2ff; border-color: #5e6ad2; color: #5e6ad2; font-weight: 600; }

/* Time slots */
.ir-time-slots { margin-bottom: 16px; }
.ir-time-slots h3 { font-size: 14px; color: #64748b; margin: 0 0 10px; }

.ir-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ir-slot-btn {
  padding: 10px 4px;
  background: #f8fafc;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.15s;
}

.ir-slot-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.ir-slot-btn.ir-selected { background: #eef2ff; border-color: #5e6ad2; color: #5e6ad2; }

.ir-loading, .ir-loading-small {
  text-align: center;
  padding: 32px 0;
  color: #64748b;
}

.ir-loading-small { padding: 16px 0; }
.ir-no-slots { text-align: center; color: #94a3b8; font-size: 14px; padding: 16px 0; }
.ir-empty { text-align: center; color: #64748b; padding: 16px 0; }
.ir-empty p { margin-bottom: 16px; }

/* Cancel view */
.ir-cancel-info { margin-bottom: 24px; }
.ir-cancel-info p { color: #475569; font-size: 15px; text-align: center; margin: 0 0 12px; }
.ir-cancel-date { color: #5e6ad2 !important; font-weight: 600; font-size: 16px !important; }

.ir-field { margin-top: 16px; }
.ir-field label { display: block; font-size: 14px; color: #64748b; margin-bottom: 6px; }

.ir-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.ir-textarea:focus { outline: none; border-color: #5e6ad2; box-shadow: 0 0 0 3px rgba(94,106,210,0.1); }

/* Success/Error states */
.ir-success, .ir-error { text-align: center; padding: 24px 0; }

.ir-success-icon {
  width: 64px;
  height: 64px;
  background: #dcfce7;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #16a34a;
  margin-bottom: 16px;
}

.ir-error-icon {
  width: 64px;
  height: 64px;
  background: #fef2f2;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #ef4444;
  margin-bottom: 16px;
}

.ir-success h2, .ir-error h2 { font-size: 20px; color: #1e293b; margin: 0 0 8px; }
.ir-success p, .ir-error p { color: #64748b; font-size: 15px; margin: 0; }

/* Mobile adjustments */
@media (max-width: 480px) {
  .ir-wrapper { padding: 0; align-items: flex-start; }
  .ir-card { border-radius: 0; min-height: 100vh; padding: 24px 16px; box-shadow: none; }
  .ir-slots-grid { grid-template-columns: repeat(3, 1fr); }
}