:root {
  --primary: #A693EF;
  --success: #34C759;
  --warning: #FFC64B;
  --danger: #F08B83;
  --neutral: #83819B;
  --surface: #5A7064;
  --purple: #A693EF;
  --green: #34C759;
  --red: #F08B83;
  --gray: #83819B;
  --yellow: #FFC64B;
  --blue: #A693EF;
  --bg: #f5f5f7;
  --card-bg: #ffffff;
  --text: #1a1a24;
  --dark: #1a1a2e;
  --toast-success-bg: var(--surface);
  --toast-success-text: #fff;
  --toast-info-bg: var(--primary);
  --toast-info-text: #fff;
  --toast-warning-bg: var(--warning);
  --toast-warning-text: #1a1a24;
  --toast-error-bg: var(--danger);
  --toast-error-text: #fff;
}

/* Space toasts – one at a time, type-based colors */
.grigsi-toast {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 99999;
  max-width: 90vw;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.grigsi-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.grigsi-toast.success { background: var(--toast-success-bg); color: var(--toast-success-text); }
.grigsi-toast.info    { background: var(--toast-info-bg);    color: var(--toast-info-text); }
.grigsi-toast.warning { background: var(--toast-warning-bg); color: var(--toast-warning-text); }
.grigsi-toast.error   { background: var(--toast-error-bg);   color: var(--toast-error-text); }

@media (max-width: 380px) {
  .grigsi-toast {
    white-space: normal;
    max-width: calc(100vw - 32px);
    padding: 10px 14px;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(180deg, var(--primary) 0%, #8B7BD4 100%);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

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

.hidden { display: none !important; }

/* Setup Page */
.space-setup {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 32px;
  text-shadow: 0 2px 10px rgba(0,0,0,.2);
}

.setup-card {
  background: var(--card-bg);
  border-radius: 24px;
  padding: 40px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 16px 48px rgba(0,0,0,.12);
}

.setup-card h1 {
  font-size: 1.8rem;
  color: var(--dark);
  margin-bottom: 8px;
  text-align: center;
}

.subtitle {
  color: var(--gray);
  text-align: center;
  margin-bottom: 32px;
}

/* Space Type Selector */
.space-type-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.type-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 16px;
  cursor: pointer;
  transition: all .2s;
  background: #f8f8fa;
}

.type-option:hover {
  border-color: var(--purple);
  background: rgba(166,147,239,.06);
}

.type-option.active {
  border-color: var(--green);
  background: rgba(52,199,89,.1);
  box-shadow: 0 0 0 3px rgba(52,199,89,.15);
}

.type-option.loading {
  pointer-events: none;
  cursor: wait;
  opacity: 0.9;
}

.type-option.loading .type-icon i {
  animation: spin 0.8s linear infinite;
}

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

.type-option .type-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary) 0%, #8B7BD4 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(166,147,239,.2);
}

.type-option .type-icon i {
  font-size: 1.2rem;
  color: #fff;
}

.type-option .type-info {
  flex: 1;
}

.type-option .type-info h3 {
  font-size: 1rem;
  color: var(--dark);
  margin-bottom: 2px;
}

.type-option .type-info p {
  font-size: .85rem;
  color: var(--gray);
  margin: 0;
}

.type-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
}

.type-badge.free {
  background: rgba(52,199,89,.15);
  color: var(--green);
}

/* Password block inside each type option (transitional menu when checkbox checked) */
.type-option-password {
  width: 100%;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  cursor: default;
}

.type-option-password .password-check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--dark);
}

.type-option-password .password-check-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--purple);
}

.type-option-password .password-input-wrap {
  margin-top: 10px;
}

.type-option-password .password-input-wrap.hidden {
  display: none !important;
}

.type-option-password .space-password-input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #eee;
  border-radius: 10px;
  font-size: .95rem;
}

.type-option-password .space-password-input:focus {
  outline: none;
  border-color: var(--purple);
}

.type-badge.paid {
  background: rgba(166,147,239,.15);
  color: var(--purple);
}

/* Space Options */
.space-options {
  margin-bottom: 32px;
}

.option-group {
  margin-bottom: 20px;
}

.option-group label {
  display: block;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 8px;
}

.option-group input[type="checkbox"] {
  margin-right: 8px;
}

.option-group input[type="text"],
.option-group input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #eee;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color .2s;
}

.option-group input:focus {
  outline: none;
  border-color: var(--purple);
}

.code-input-wrap {
  display: flex;
  align-items: center;
  border: 2px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s;
}

.code-input-wrap:focus-within {
  border-color: var(--purple);
}

.code-prefix {
  background: #f5f5f7;
  padding: 12px 14px;
  color: var(--gray);
  font-weight: 600;
  font-family: monospace;
}

.code-input-wrap input {
  flex: 1;
  border: none;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: monospace;
  text-transform: uppercase;
}

.code-input-wrap input:focus {
  outline: none;
}

.hint {
  font-size: .85rem;
  color: var(--gray);
  margin-top: 6px;
}

.hint a {
  color: var(--purple);
  font-weight: 500;
}

.hint a:hover {
  text-decoration: underline;
}

/* Buttons */
.btn-create {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--green) 0%, #34C759 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .25s;
  box-shadow: 0 4px 16px rgba(52,199,89,.3);
}

.btn-create:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(52,199,89,.4);
}

.btn-create:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.btn-join {
  width: 100%;
  padding: 14px 24px;
  background: transparent;
  color: var(--purple);
  border: 2px solid var(--purple);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .2s;
}

.btn-join:hover {
  background: var(--purple);
  color: #fff;
}

.divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
  gap: 16px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #eee;
}

.divider span {
  color: var(--gray);
  font-size: .9rem;
}

/* Join Page */
.join-card {
  max-width: 440px;
}

.code-input-large {
  margin-bottom: 24px;
}

.code-input-large input {
  width: 100%;
  padding: 20px 24px;
  border: 2px solid #eee;
  border-radius: 12px;
  font-size: 1.4rem;
  font-family: monospace;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  transition: border-color .2s;
}

.code-input-large input:focus {
  outline: none;
  border-color: var(--purple);
}

.code-input-large input::placeholder {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1rem;
}

.password-section {
  margin-bottom: 24px;
}

.password-section label {
  display: block;
  color: var(--gray);
  font-size: .9rem;
  margin-bottom: 8px;
}

.password-section input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #eee;
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color .2s;
}

.password-section input:focus {
  outline: none;
  border-color: var(--purple);
}

.error-msg {
  color: var(--red);
  text-align: center;
  margin-top: 16px;
  font-size: .9rem;
}

/* Space password gate (when opening protected space from desktop shortcut) */
.space-password-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.space-password-gate.hidden {
  display: none;
}
.space-password-gate-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 32px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.space-password-gate-header {
  margin-bottom: 24px;
  text-align: center;
}
.space-password-gate-card h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark);
}
.space-password-gate-card h2 i {
  color: var(--purple);
  margin-right: 8px;
}
.space-password-gate-desc {
  color: var(--gray);
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.space-password-gate-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.space-password-gate-section {
  margin-bottom: 16px;
}
.space-password-gate-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.space-password-gate-form .space-password-gate-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.space-password-gate-form .space-password-gate-input:focus {
  outline: none;
  border-color: var(--purple);
}
.space-password-gate-divider {
  display: flex;
  align-items: center;
  margin: 8px 0 16px;
  color: var(--gray);
  font-size: 0.85rem;
}
.space-password-gate-divider::before,
.space-password-gate-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #eee;
}
.space-password-gate-divider span {
  padding: 0 14px;
}
.space-password-gate-file-row {
  margin-bottom: 20px;
}
.space-password-gate-file-row.drag-over .space-password-gate-file-label,
.security-upload-drop.drag-over {
  border-color: var(--purple);
  background: rgba(166,147,239,.1);
  color: var(--purple);
}
.space-password-gate-file {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
}
.space-password-gate-file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 20px;
  border: 2px dashed #ddd;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--gray);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  min-height: 100px;
}
.space-password-gate-file-label i {
  font-size: 1.75rem;
  color: var(--purple);
  opacity: 0.85;
}
.space-password-gate-file-label:hover {
  border-color: var(--purple);
  background: rgba(166,147,239,.06);
  color: var(--purple);
}
.space-password-gate-error {
  color: var(--red);
  font-size: 0.88rem;
  margin: 0 0 14px;
  min-height: 1.3em;
}
.space-password-gate-error.hidden {
  display: none;
}
.space-password-gate-submit {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  background: var(--purple);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.2s, transform 0.1s;
}
.space-password-gate-submit:hover {
  opacity: 0.92;
}
.space-password-gate-submit:active {
  transform: scale(0.99);
}
.space-password-gate-home {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  font-size: 0.85rem;
  color: var(--gray);
  text-align: center;
}
.space-password-gate-grigsi-link {
  color: var(--purple);
  font-weight: 600;
  text-decoration: none;
}
.space-password-gate-grigsi-link:hover {
  text-decoration: underline;
}

/* Security upload panel – file drop */
.security-upload-desc {
  font-size: 0.88rem;
  color: var(--gray);
  margin: 0 0 14px;
  line-height: 1.45;
}
.security-upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px dashed #ddd;
  border-radius: 12px;
  padding: 28px 20px;
  min-height: 120px;
  text-align: center;
  color: var(--gray);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.security-upload-drop-icon {
  font-size: 2rem;
  color: var(--purple);
  opacity: 0.85;
}
.security-upload-drop-text {
  display: block;
}
.security-upload-drop:hover {
  border-color: var(--purple);
  background: rgba(166,147,239,.06);
  color: var(--purple);
}
.security-upload-status {
  font-size: 0.88rem;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.4;
}
.security-upload-status.hidden {
  display: none;
}

/* Footer Note */
.footer-note {
  color: rgba(255,255,255,.8);
  font-size: .85rem;
  margin-top: 24px;
  text-align: center;
}

.footer-note a {
  color: #fff;
  font-weight: 500;
}

.footer-note a:hover {
  text-decoration: underline;
}

/* Setup/Join: touch-friendly on mobile */
@media (max-width: 480px) {
  .code-input-large input {
    min-height: 44px;
    padding: 14px 18px;
    font-size: 1.1rem;
  }
  .btn-create,
  .btn-join {
    min-height: 44px;
    padding: 14px 20px;
  }
  .type-option-password .space-password-input {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 16px;
  }
  .option-group input[type="text"],
  .option-group input[type="password"] {
    min-height: 44px;
    padding: 14px 16px;
    font-size: 16px;
  }
  .password-section input {
    min-height: 44px;
    padding: 14px 16px;
    font-size: 16px;
  }
  .setup-card {
    padding: 24px 20px;
    margin: 0 12px;
  }
}

/* ======================= */
/* SPACE ROOM INTERFACE    */
/* ======================= */

.space-share {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 300px);
  grid-template-rows: auto 1fr;
  height: 100vh;
  height: 100dvh;
  min-height: -webkit-fill-available;
  background: var(--bg);
}

/* Header — compact strip to leave more room for video / content */
.space-header {
  grid-column: 1 / -1;
  background: var(--card-bg);
  border-bottom: 1px solid #eee;
  padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.space-header .left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.space-header .logo {
  font-size: 1.15rem;
  color: var(--purple);
  margin: 0;
  text-shadow: none;
}

.space-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.space-code-display {
  background: var(--bg);
  padding: 5px 11px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
  border: 1px solid #d5d7de;
  min-width: 132px;
  cursor: text;
  transition: background .2s;
}

.space-code-display:hover {
  background: #e8e8eb;
}

.space-code-display:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.14);
}

.space-header .space-code-join-btn {
  flex-shrink: 0;
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}

.participants-badge {
  background: rgba(21,87,36,.12);
  color: #155724;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: .78rem;
  font-weight: 500;
}
.participants-badge .participants-badge-num {
  margin-left: 6px;
}
.participants-badge .participants-badge-word {
  margin-left: 4px;
}

/* Header: others online / alone / still connecting */
.space-presence-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  max-width: min(100%, 200px);
}
.space-presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94a3b8;
}
.space-presence--connecting .space-presence-dot {
  animation: space-presence-pulse 2s ease-in-out infinite;
}
.space-presence--alone .space-presence-dot {
  background: #f59e0b;
}
.space-presence--others .space-presence-dot {
  background: #22c55e;
  animation: space-presence-ring 2.6s ease-out infinite;
}
.space-presence--connecting {
  background: rgba(148, 163, 184, 0.22);
  color: #475569;
}
.space-presence--alone {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}
.space-presence--others {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
}
.space-presence-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes space-presence-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes space-presence-ring {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@media (max-width: 480px) {
  .space-presence-indicator {
    font-size: 0.7rem;
    padding: 5px 10px;
    max-width: 148px;
    gap: 6px;
  }
  .space-presence-dot {
    width: 8px;
    height: 8px;
  }
}

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

.header-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg);
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  transition: all .2s;
  font-size: 0.95rem;
}

.header-btn:hover {
  background: var(--purple);
  color: #fff;
}

.header-btn .header-btn-label {
  margin-left: 4px;
}

#btn-invite {
  width: auto;
  padding: 6px 10px;
  font-size: 0.85rem;
  background: var(--purple);
  color: #fff;
}

#btn-invite:hover {
  background: var(--purple);
  filter: brightness(1.15);
  color: #fff;
}

@media (max-width: 600px) {
  .header-btn .header-btn-label { display: none; }
  #btn-invite { padding: 8px 10px; width: 40px; }
}

.btn-upgrade-space {
  width: auto;
  padding: 8px 12px;
  gap: 6px;
  text-decoration: none;
  color: var(--purple);
  border: 1px solid var(--purple);
  font-size: 0.9rem;
}

.btn-upgrade-space:hover {
  background: var(--purple);
  color: #fff;
}

.btn-leave {
  background: transparent;
  border: 2px solid var(--red);
  color: var(--red);
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}

.btn-leave:hover {
  background: var(--red);
  color: #fff;
}

/* Header Security dropdown */
.header-security-dropdown-wrap {
  position: relative;
}
#btn-security-dropdown {
  width: auto;
  min-width: 40px;
  padding: 6px 10px;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
#btn-security-dropdown i {
  flex-shrink: 0;
  width: 1.1em;
  text-align: center;
}
.header-security-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 280px;
  max-width: 360px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
  z-index: 1000;
}
.header-security-dropdown.open {
  display: block;
}
.header-security-desc {
  font-size: 0.9rem;
  color: var(--gray);
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.header-security-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.header-security-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  font-size: 0.95rem;
  color: var(--dark);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
}
.header-security-option:hover {
  border-color: var(--purple);
  background: rgba(166,147,239,.08);
}
.header-security-option i {
  color: var(--purple);
  width: 1.1em;
}
.security-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eee;
}
.security-panel.hidden {
  display: none !important;
}
.security-panel-label {
  display: block;
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 8px;
}
.security-password-input,
.security-file-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #eee;
  border-radius: 8px;
  font-size: 0.95rem;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.security-password-input:focus {
  outline: none;
  border-color: var(--purple);
}
.security-error,
.security-status {
  font-size: 0.85rem;
  margin: 0 0 8px 0;
  min-height: 1.3em;
}
.security-error { color: var(--red); }
.security-status { color: var(--gray); }
.security-error.hidden,
.security-status.hidden { display: none; }
.security-submit-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: var(--purple);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.security-submit-btn:hover {
  opacity: 0.95;
}

/* Header Link dropdown (invite link – used in Invite modal) */
.header-link-dropdown-wrap {
  position: relative;
}
#btn-link-dropdown {
  width: auto;
  min-width: 44px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
#btn-link-dropdown i {
  flex-shrink: 0;
  width: 1.1em;
  text-align: center;
}
.header-link-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 320px;
  max-width: 420px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
  z-index: 1000;
}
.header-link-dropdown.open {
  display: block;
}
.header-link-popout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 14px;
  border: 1px solid var(--purple);
  border-radius: 8px;
  background: rgba(166,147,239,.1);
  color: var(--purple);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.header-link-popout:hover {
  background: var(--purple);
  color: #fff;
}
.header-link-welcome {
  font-size: 0.9rem;
  color: var(--gray);
  margin: 0 0 12px 0;
  line-height: 1.45;
}
.header-link-welcome strong { color: var(--purple); }
.header-link-label {
  font-size: 0.9rem;
  color: var(--gray);
  font-weight: 500;
  margin: 0 0 10px 0;
}
.header-link-dropdown .invite-link-row {
  margin-top: 6px;
}
.header-link-dropdown .invite-link-input-chat {
  font-size: 12px;
}

/* Main Content Area — grid cell + flex column; scroll lives in .space-content. */
.space-main {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  /* Floor height so the row never collapses to 0 (tabs/panels vanished on some layouts). */
  min-height: min(320px, 45vh);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.space-sidebar {
  grid-column: 2;
  grid-row: 2;
}

/* Bar above tabs: Pair link (Quick Space). Hidden when no visible button — no empty white strip */
.space-link-bar {
  flex-shrink: 0;
  padding: 7px 12px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  background: var(--card-bg);
  border-bottom: 1px solid #eee;
}
#space-link-bar:not(:has(.space-link-bar-btn:not(.hidden))) {
  display: none !important;
}
.space-link-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.space-link-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  min-height: 48px;
  border: 1px solid #d8d8dc;
  border-radius: 10px;
  background: var(--bg);
  color: var(--dark);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: min(200px, 100%);
  max-width: 100%;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.space-link-bar-btn i {
  flex-shrink: 0;
  font-size: 1.05rem;
}
.space-link-bar-btn-text {
  white-space: normal;
  word-break: break-word;
  text-align: left;
}
.space-link-bar-btn:hover {
  border-color: var(--purple);
  color: var(--purple);
  background: rgba(166, 147, 239, 0.08);
}
.space-link-bar-btn-secondary {
  border-color: rgba(198, 40, 40, 0.35);
  color: #b71c1c;
}
.space-link-bar-btn-secondary:hover {
  border-color: #c62828;
  color: #fff;
  background: #c62828;
}

.participants-backdrop {
  display: none;
}

@media (max-width: 1024px) {
  .space-share.participants-panel-open .participants-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 8998;
    background: rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
  }
  .space-share.participants-panel-open .space-sidebar {
    display: flex !important;
    position: fixed !important;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(300px, 92vw);
    max-width: 100vw;
    z-index: 8999;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
    border-left: 1px solid #eee;
  }
}

/* Tabs — compact row (more vertical space for video / panels) */
.space-tabs {
  display: flex;
  background: var(--card-bg);
  border-bottom: 1px solid #eee;
  padding: 0 12px;
}

.space-tab {
  padding: 9px 12px;
  font-size: 0.9rem;
  color: var(--gray);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  transition: all .2s;
}

.space-tab:hover {
  color: var(--purple);
}

.space-tab.active {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

.space-tab .badge {
  background: var(--red);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .75rem;
  font-weight: 600;
}

/* Section mode badge: Ads / Paid / Off (next to each tab icon) */
.tab-mode-badge {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.tab-mode-badge.ads {
  background: rgba(255, 198, 75, 0.35);
  color: #856404;
}
.tab-mode-badge.paid {
  background: rgba(52, 199, 89, 0.35);
  color: #155724;
}
.tab-mode-badge.off {
  background: rgba(0, 0, 0, 0.08);
  color: #666;
}
.tab-mode-badge.on {
  background: rgba(129, 119, 240, 0.2);
  color: var(--purple);
}

/* Content Panels — flex child of .space-main; inner panels handle their own scroll. */
.space-content {
  flex: 1;
  min-height: min(240px, 40vh);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Video tab: inner #video-panel-inner scrolls; outer column stays flex so height is never 0. */
.space-content:has(#panel-video.content-panel.active),
.space-content[data-active-tab="video"] {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

/* Chat tab: scroll .space-content if needed — avoids flex-basis 0 collapse (invisible chat). */
.space-content:has(#panel-chat.content-panel.active),
.space-content[data-active-tab="chat"] {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Chat: stable column — floor heights so nothing collapses to 0px */
#panel-chat.content-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: min(360px, 65vh);
  width: 100%;
  overflow: visible;
}
#panel-chat .panel-pop-wrap {
  flex-shrink: 0;
}
#panel-chat #chat-panel-inner {
  flex: 1 1 auto;
  min-height: min(280px, 50vh);
  display: flex;
  flex-direction: column;
  overflow: visible;
}
#panel-chat .chat-important-block {
  flex-shrink: 0;
}
#panel-chat .chat-messages {
  flex: 1 1 auto;
  min-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  margin-top: 8px;
}

/* Video / Screen: column — fixed 16:9 slot + pleer + remote + Info Noise (see .video-panel-hd-slot) */
#panel-video.content-panel.active {
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Module mode: single service (video, chat, files) + join box */
.space-share.module-mode .space-main {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
.space-share.module-mode .space-link-bar {
  flex: 1 0 100%;
  min-width: 100%;
}
.space-share.module-mode #space-tabs {
  display: none !important;
}
.space-share.module-mode .module-join-box {
  display: flex !important;
  flex-direction: column;
  width: 280px;
  min-width: 260px;
  flex-shrink: 0;
  padding: 20px;
  background: rgba(255,255,255,0.95);
  border-left: 1px solid #eee;
  overflow-y: auto;
}
.space-share.module-mode .space-content {
  display: flex;
  flex-direction: column;
}
.space-share.module-mode .space-content .content-panel {
  display: none !important;
}
.space-share.module-mode .space-content .content-panel.module-active {
  display: flex !important;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.module-join-box {
  display: none;
}
.module-join-title {
  font-size: 1rem;
  margin-bottom: 4px;
  color: var(--dark);
}
.module-join-desc {
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 16px;
}
.module-join-row {
  margin-bottom: 12px;
}
.module-join-row label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray);
  margin-bottom: 4px;
}
.module-join-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
.module-join-input-wrap input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: 0.85rem;
  background: #fafafa;
}
.btn-copy-module {
  padding: 8px 12px;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  color: var(--gray);
}
.btn-copy-module:hover {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}

.content-panel {
  display: none;
  height: 100%;
  flex-direction: column;
}

.content-panel.active {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: none;
  overflow: hidden;
}

/* Panel inner wrappers (used for pop-out): fill remaining space below panel-pop-wrap */
.content-panel #chat-panel-inner,
.content-panel #files-panel-inner,
.content-panel #video-panel-inner,
.content-panel #polls-panel-inner,
.content-panel #post-panel-inner,
.content-panel #info-index-panel-inner,
.content-panel #admin-panel-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#panel-chat .chat-toolbar-important,
#panel-chat .chat-input-area {
  flex-shrink: 0;
}

.chat-message {
  max-width: 75%;
  display: flex;
  flex-direction: column;
}

.chat-message.sent {
  align-self: flex-end;
}

.chat-message.received {
  align-self: flex-start;
}

.chat-message .sender {
  font-size: .8rem;
  color: var(--gray);
  margin-bottom: 4px;
}

.chat-message .bubble {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: .95rem;
  line-height: 1.5;
}

.chat-message.sent .bubble {
  background: var(--green);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-message.received .bubble {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid #eee;
  border-bottom-left-radius: 4px;
}

.chat-message .time {
  font-size: .75rem;
  color: var(--gray);
  margin-top: 4px;
}

.chat-message.system {
  align-self: center;
  max-width: none;
}

.chat-message.system .bubble {
  background: rgba(166,147,239,.1);
  color: var(--purple);
  font-size: .85rem;
}

/* Chat — toolbar + „Важно“ + star on bubbles */
.chat-toolbar-important {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 24px 0;
  flex-shrink: 0;
}
.important-send-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--gray);
  cursor: pointer;
  user-select: none;
}
.important-send-label input {
  width: 16px;
  height: 16px;
  accent-color: var(--purple);
}
.chat-important-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
  background: #fff;
  color: var(--dark);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.chat-important-toggle-btn:hover {
  border-color: var(--purple);
  background: rgba(166, 147, 239, 0.08);
}
.chat-important-toggle-btn .fa-star {
  color: #e6a800;
}
.important-badge {
  min-width: 1.25rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}
.important-badge:empty,
.important-badge[data-zero="1"] {
  opacity: 0.5;
}

.chat-important-block {
  flex-shrink: 0;
  max-height: 42vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #eee;
  background: rgba(250, 250, 252, 0.95);
  transition: max-height 0.25s ease, opacity 0.2s;
}
.chat-important-block.collapsed {
  max-height: 0;
  opacity: 0;
  border-top-color: transparent;
  pointer-events: none;
}
.chat-important-block-inner {
  padding: 12px 24px 16px;
  overflow-y: auto;
}
.chat-important-hint {
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--gray);
}
.important-categories-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.important-cat {
  border: 1px solid #eaeaea;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.important-cat summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.important-cat summary::-webkit-details-marker {
  display: none;
}
.important-cat summary .imp-count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray);
  background: #f0f0f5;
  padding: 2px 8px;
  border-radius: 999px;
}
.important-list {
  margin: 0;
  padding: 0 8px 10px 12px;
  list-style: none;
}
.important-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #f2f2f2;
  font-size: 0.85rem;
  line-height: 1.4;
  word-break: break-word;
}
.important-list li:first-child {
  border-top: none;
}
.important-list .imp-item-text {
  flex: 1;
  min-width: 0;
  color: var(--text);
}
.important-list .imp-item-meta {
  font-size: 0.72rem;
  color: var(--gray);
  margin-top: 4px;
}
.important-list .imp-item-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: #f5f5f5;
  color: var(--gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.important-list .imp-item-remove:hover {
  background: #ffe8e8;
  color: #c00;
}

.chat-message:not(.system) {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  max-width: min(85%, 520px);
}
.chat-message.sent:not(.system) {
  flex-direction: row-reverse;
}
.chat-message-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.chat-message.chat-message-important .bubble {
  box-shadow: 0 0 0 2px rgba(230, 168, 0, 0.45);
}
.chat-msg-star {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-top: 2px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  color: #c9a000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.chat-msg-star:hover {
  background: rgba(230, 168, 0, 0.2);
  color: #a88600;
}
.chat-msg-star[aria-pressed="true"] {
  background: rgba(230, 168, 0, 0.35);
  color: #7a6200;
}

/* Must sit above #pleer-ui (5000), floating panels (9000), and similar overlays — otherwise clicks never reach the dialog and Promises hang. */
#important-category-modal.modal {
  z-index: 12000;
}

.important-category-modal-content {
  max-width: 440px;
}
.important-modal-star {
  color: #e6a800;
  margin-right: 6px;
}
.important-modal-hint {
  font-size: 0.9rem;
  color: var(--gray);
  margin: 0 0 10px;
  line-height: 1.45;
}
.important-modal-preview {
  font-size: 0.88rem;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid #eee;
  margin: 0 0 16px;
  max-height: 120px;
  overflow-y: auto;
  word-break: break-word;
  white-space: pre-wrap;
}
.important-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.imp-pill {
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid #e8e8e8;
  background: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--dark);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.imp-pill:hover {
  border-color: var(--purple);
}
.imp-pill.selected {
  border-color: var(--green);
  background: rgba(120, 200, 120, 0.12);
}
.important-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.important-modal-actions .btn-create {
  width: 100%;
  justify-content: center;
}
.important-modal-actions .btn-reset-settings {
  width: 100%;
}
.important-modal-cancel-btn {
  background: none;
  border: none;
  color: var(--gray);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 8px;
  text-align: center;
}
.important-modal-cancel-btn:hover {
  color: var(--dark);
}

.invite-link-card {
  margin: 12px 0 16px;
  padding: 14px 16px;
  background: rgba(166,147,239,.08);
  border: 1px solid rgba(166,147,239,.25);
  border-radius: 12px;
  align-self: center;
  max-width: 100%;
}

.invite-link-label {
  margin: 0 0 10px 0;
  font-size: 0.9rem;
  color: var(--gray);
  font-weight: 500;
}

.invite-link-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.invite-link-input-chat {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: var(--text);
}

.btn-copy-invite {
  flex-shrink: 0;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: var(--purple);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

.btn-copy-invite:hover {
  filter: brightness(1.1);
}

.btn-onetime-invite {
  padding: 10px 16px;
  border: 1px solid var(--purple);
  border-radius: 8px;
  background: rgba(166,147,239,.12);
  color: var(--purple);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-onetime-invite:hover {
  background: var(--purple);
  color: #fff;
}

.chat-input-area {
  padding: 16px 24px;
  background: var(--card-bg);
  border-top: 1px solid #eee;
  display: flex;
  gap: 12px;
}

.chat-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg);
  border-radius: 24px;
  padding: 4px 4px 4px 20px;
}

.chat-input-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  -webkit-text-fill-color: var(--text); /* Safari/iOS: ensure real text color */
  font-size: 1rem;
  padding: 10px 0;
}

.chat-input-wrap input::placeholder {
  color: var(--gray);
  opacity: 0.9;
}

.chat-input-wrap input:focus::placeholder {
  opacity: 1;
}

.chat-input-wrap input:focus {
  outline: none;
}

.chat-input-wrap .attach-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--gray);
  cursor: pointer;
  border-radius: 50%;
  transition: all .2s;
}

.chat-input-wrap .attach-btn:hover {
  background: rgba(166,147,239,.1);
  color: var(--purple);
}

.send-btn {
  width: 48px;
  height: 48px;
  border: none;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: all .2s;
}

.send-btn:hover {
  background: var(--purple);
  transform: scale(1.05);
}

/* Files Panel */
.files-toolbar {
  padding: 16px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid #eee;
  display: flex;
  gap: 12px;
}

.files-toolbar .btn-upload {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}

.files-toolbar .btn-upload:hover {
  background: var(--green);
  transform: translateY(-2px);
}

.files-grid {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  align-content: start;
}

.file-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 1px solid #eee;
  cursor: pointer;
  transition: all .2s;
}

.file-card:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.file-card .file-icon {
  font-size: 2.5rem;
  color: var(--purple);
  margin-bottom: 12px;
}

.file-card .file-name {
  font-size: .9rem;
  font-weight: 500;
  color: var(--dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-card .file-size {
  font-size: .8rem;
  color: var(--gray);
  margin-top: 4px;
}

.file-share-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--gray);
  cursor: pointer;
}
.file-share-label input.file-share-cb {
  margin: 0;
  cursor: pointer;
}
.file-share-label:hover {
  color: var(--purple);
}

/* Folder Card */
.folder-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
  border: 2px solid var(--purple) !important;
}

.folder-card .folder-icon i {
  color: #FFC107;
}

.folder-contents {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  text-align: left;
  max-height: 200px;
  overflow-y: auto;
}

.folder-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 4px 0;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #eee;
  cursor: pointer;
  transition: all .15s;
}

.folder-file:hover {
  background: #f0f0ff;
  border-color: var(--purple);
}

.folder-file i {
  font-size: .9rem;
  color: var(--purple);
  flex-shrink: 0;
}

.folder-file-name {
  flex: 1;
  font-size: .8rem;
  color: var(--dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-file-size {
  font-size: .7rem;
  color: var(--gray);
  flex-shrink: 0;
}

.folder-toggle {
  margin-top: 12px;
  font-size: .8rem;
  color: var(--purple);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: rgba(166,147,239,.1);
  border-radius: 8px;
  transition: all .15s;
}

.folder-toggle:hover {
  background: rgba(166,147,239,.2);
}

/* Video Panel */
/* #video-stage = picture (#video-container) + pleer; remote + Info Noise are below in #video-panel-inner */
.video-stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  flex: 0 0 auto;
  position: relative;
}

.video-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Frame + pleer: outer shell is transparent so the bar sits below the dark tile (non-fullscreen). */
  background: transparent;
  /* Ensure any plain text (labels/hints) inside dark panel remains readable. */
  color: #fff;
  position: relative;
  min-height: 0;
}

/* Fixed 16:9 (HD) picture area — same width as #pleer-ui (no 100% + side margin overflow) */
.video-panel-hd-slot {
  flex: 0 0 auto;
  width: min(1280px, calc(100% - 24px));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16 / 9;
  position: relative;
  box-sizing: border-box;
}

.video-panel-hd-slot .video-frame {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  flex: none !important;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.video-stage:not(:fullscreen):not(:-webkit-full-screen) .video-panel-hd-slot {
  margin-top: 12px;
  margin-bottom: 0;
}

.video-panel-hd-slot .video-grid {
  min-height: 0 !important;
  height: 100%;
  flex: 1;
}

.video-panel-hd-slot .video-tile {
  min-height: 0 !important;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
}

.video-stage:fullscreen .video-panel-hd-slot,
.video-stage:-webkit-full-screen .video-panel-hd-slot {
  aspect-ratio: unset;
  max-width: none;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  align-self: stretch;
}

.video-stage:fullscreen .video-panel-hd-slot .video-frame,
.video-stage:-webkit-full-screen .video-panel-hd-slot .video-frame {
  position: relative;
  inset: auto;
  border-radius: 0;
}

/* Video tiles area only (pleer stays outside this box in normal view). */
.video-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.video-stage:not(:fullscreen):not(:-webkit-full-screen) {
  gap: 10px;
}

.video-stage:not(:fullscreen):not(:-webkit-full-screen) .video-frame {
  background: var(--dark);
  color: #fff;
  border-radius: 16px;
  margin: 12px 12px 0 12px;
}

.video-stage:fullscreen .video-frame,
.video-stage:-webkit-full-screen .video-frame {
  margin: 0;
  border-radius: 0;
  background: transparent;
}

body.ios-theme .video-stage:not(:fullscreen):not(:-webkit-full-screen) {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Solid tile behind tiles — not liquid glass (glass made the feed look empty / “missing”). */
body.ios-theme .video-stage:not(:fullscreen):not(:-webkit-full-screen) .video-frame {
  background: #0f1218 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38) !important;
}

.video-stage:fullscreen,
.video-stage:-webkit-full-screen {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #000;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.video-stage:fullscreen .video-container,
.video-stage:-webkit-full-screen .video-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.video-stage:fullscreen .video-grid,
.video-stage:-webkit-full-screen .video-grid {
  flex: 1;
  min-height: 0;
  padding: 0;
  gap: 6px;
}

/* Fullscreen: nothing on tiles (incl. local X / You / meters) — pure picture until bottom dock appears */
.video-stage:fullscreen .video-tile .participant-name,
.video-stage:-webkit-full-screen .video-tile .participant-name,
.video-stage:fullscreen .video-tile .status-indicators,
.video-stage:-webkit-full-screen .video-tile .status-indicators,
.video-stage:fullscreen .video-tile .mic-level-meter,
.video-stage:-webkit-full-screen .video-tile .mic-level-meter,
.video-stage:fullscreen .video-tile .video-tile-remove,
.video-stage:-webkit-full-screen .video-tile .video-tile-remove {
  display: none !important;
}

.video-stage:fullscreen .remote-video-control-overlay,
.video-stage:-webkit-full-screen .remote-video-control-overlay {
  opacity: 0;
  pointer-events: none;
}

/* Pleer bar: hidden by default in fullscreen; .video-fs-chrome-visible shows it (see space.js) */
.video-stage:fullscreen #pleer-ui,
.video-stage:-webkit-full-screen #pleer-ui {
  position: absolute;
  z-index: 5000;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  margin: 0;
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.22s ease;
  will-change: transform, opacity;
  /* Stronger dock on top of any screen-share / camera content */
  background: linear-gradient(180deg, rgba(18, 20, 32, 0.97) 0%, rgba(6, 8, 16, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: none;
  box-shadow:
    0 -18px 56px rgba(0, 0, 0, 0.65),
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.video-stage:fullscreen #pleer-ui.video-fs-chrome-visible,
.video-stage:-webkit-full-screen #pleer-ui.video-fs-chrome-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Fullscreen dock: only the control row — no title row / share checkboxes (change those after exiting FS) */
.video-stage:fullscreen #pleer-ui .pleer-bar-title,
.video-stage:-webkit-full-screen #pleer-ui .pleer-bar-title,
.video-stage:fullscreen #pleer-ui #video-share-options,
.video-stage:-webkit-full-screen #pleer-ui #video-share-options {
  display: none !important;
}

.video-stage:fullscreen #pleer-ui.video-fs-chrome-visible .video-controls-wrap,
.video-stage:-webkit-full-screen #pleer-ui.video-fs-chrome-visible .video-controls-wrap {
  margin-top: 0;
  padding-top: 4px;
}

.video-grid {
  flex: 1;
  min-height: 160px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
}

/* Two or more feeds: flex layout fills the frame height — no inner scroll, no cropping */
.video-grid.video-grid--multi {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  align-items: stretch;
  gap: 10px;
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  grid-template-columns: unset;
  grid-template-rows: unset;
}

/* Multiview: tiles fill the cell; video uses letterbox (contain) inside — no crop */
.video-grid.video-grid--multi .video-tile {
  display: flex;
  flex-direction: column;
  flex: 1 1 calc(50% - 6px);
  min-width: min(200px, calc(50% - 6px));
  min-height: 0;
  max-height: none;
  aspect-ratio: unset;
  height: auto;
  align-self: stretch;
}
.video-grid.video-grid--multi .video-tile > video,
.video-grid.video-grid--multi .video-tile > .video-fallback-img:not(.video-fallback--brand) {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
/* Remote wrapper: same flex share as direct #local-video (shell is not a <video>). */
.video-grid.video-grid--multi .video-tile > .remote-video-shell {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
}
.video-grid.video-grid--multi .video-tile .remote-video-shell video {
  height: 100%;
  max-height: 100%;
}
.video-grid.video-grid--multi .video-tile.local > #local-video {
  height: 100%;
  max-height: 100%;
}
/* Brand mark stays centered in multiview (not stretched to full tile). */
.video-grid.video-grid--multi .video-tile > .video-fallback-img.video-fallback--brand {
  flex: 0 0 auto;
  align-self: center;
  margin: auto;
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(52%, 200px);
  height: min(52%, 200px);
  max-width: 55%;
  max-height: 55%;
  object-fit: contain;
  background: transparent;
}
.video-stage:not(:fullscreen):not(:-webkit-full-screen) .video-frame:has(.video-grid.video-grid--multi) {
  overflow: hidden;
}

/* Let the grid shrink inside flex column so the pleer bar sits below without clipping */
.video-stage:not(:fullscreen):not(:-webkit-full-screen) .video-grid {
  min-height: 0;
}

/* Focus one tile when multiple feeds (see space.js videoFocusPeerId) */
.video-grid.video-grid--focus .video-tile:not(.video-tile--focused) {
  display: none;
}

/* Single visible tile (only participant, or focus mode): fill the frame above the pleer — no huge min-height / half-clipped picture */
.video-grid:has(> .video-tile:only-child),
.video-grid.video-grid--fill,
.video-grid.video-grid--focus {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-content: stretch;
  min-height: 0;
}

/* Focus/fill overrides multi flex so one tile still uses grid fill */
.video-grid.video-grid--multi.video-grid--fill,
.video-grid.video-grid--multi.video-grid--focus {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  flex: 1;
  min-height: 0;
  height: 100%;
}
.video-grid.video-grid--multi.video-grid--fill .video-tile,
.video-grid.video-grid--multi.video-grid--focus .video-tile.video-tile--focused {
  flex: none;
  min-width: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.video-grid:has(> .video-tile:only-child) .video-tile,
.video-grid.video-grid--fill .video-tile,
.video-grid.video-grid--focus .video-tile.video-tile--focused {
  aspect-ratio: auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  align-self: stretch;
}

.video-tile {
  background: #252541;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 140px;
  /* Same flex model for local + remote: media layer stretches; overlays stay position:absolute on top. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

/* Full camera / screen share in every tile — letterbox only, never crop (incl. multiview + fullscreen). */
.video-tile video {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Local tile: same flex fill as remote shell (multiview used to target only direct > video — now explicit). */
.video-tile.local > #local-video {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  align-self: stretch;
  width: 100%;
}

/* Wrapper for remote tiles — WebKit applies CSS mirror on this layer reliably (not always on <video> + MediaStream). */
.video-tile .remote-video-shell {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  overflow: hidden;
  position: relative;
}

.video-tile .remote-video-shell video {
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Legacy PiP element (kept hidden): local preview is single-surface — screen replaces camera in #local-video when both are active. */
.video-tile.local .local-screen-preview {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 38%;
  max-width: 240px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  z-index: 3;
  object-fit: contain;
  transform: scaleX(1);
  background: #111;
  border: 2px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.video-tile.local .local-screen-preview.hidden {
  display: none !important;
}

/* No camera/screen preview: pause + hidden class in JS; CSS skips painting the element. */
#local-video.local-video-idle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.video-fallback-img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
  background: #252541;
}

.video-tile.show-fallback .video-fallback-img {
  display: block;
}

/* Centered GriGsi mark when there is no camera/screen (not a full-bleed user photo). */
.video-tile .video-fallback-img.video-fallback--brand {
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(52%, 200px);
  height: min(52%, 200px);
  max-width: 55%;
  max-height: 55%;
  object-fit: contain;
  background: transparent;
}

.video-tile.show-fallback video {
  display: none;
}

.video-tile-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(198, 40, 40, 0.9);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.video-tile-remove:hover {
  background: #c62828;
  transform: scale(1.05);
}

.video-tile .participant-name {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: .85rem;
  z-index: 4;
}

/* Remote screen control (P2P — synthetic events on sharer's Space tab only) */
.screen-remote-access-wrap {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(37, 37, 65, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.screen-remote-access-wrap.hidden {
  display: none !important;
}
.screen-remote-access-label {
  display: block;
  margin-bottom: 6px;
}
.screen-remote-access-select {
  width: 100%;
  max-width: 100%;
  margin-bottom: 8px;
}
.screen-remote-access-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.65);
}
body.space-theme-light .screen-remote-access-hint {
  color: #555;
}
body.space-theme-light .screen-remote-access-wrap {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

.remote-video-control-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: transparent;
}
.remote-video-control-overlay.is-active {
  pointer-events: auto;
  cursor: crosshair;
  outline: 2px solid rgba(76, 175, 80, 0.85);
  outline-offset: -2px;
}

.video-tile-remote-bar {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: calc(100% - 56px);
}
.video-tile-remote-bar .remote-control-status {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.video-tile-remote-bar .btn-remote-control {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: rgba(46, 125, 50, 0.92);
  color: #fff;
  font-weight: 600;
}
.video-tile-remote-bar .btn-remote-control:hover {
  filter: brightness(1.08);
}
.video-tile-remote-bar .btn-remote-control.is-released {
  background: rgba(198, 40, 40, 0.9);
}

.btn-remote-desktop-allow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: rgba(46, 125, 50, 0.92);
  color: #fff;
  font-weight: 700;
  transition: filter .15s ease;
}
.btn-remote-desktop-allow:hover { filter: brightness(1.08); }

.screen-remote-control-banner {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(25, 118, 210, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  max-width: 90%;
  text-align: center;
}

.screen-remote-control-request-banner {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 21;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(245, 124, 0, 0.95);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  max-width: 92%;
  text-align: center;
  pointer-events: auto;
}
.screen-remote-control-request-banner .screen-rc-req-text {
  flex: 1 1 100%;
  line-height: 1.35;
}
.screen-remote-control-request-banner button {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.screen-remote-control-request-banner .btn-rc-allow {
  background: #2e7d32;
  color: #fff;
}
.screen-remote-control-request-banner .btn-rc-deny {
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

.video-tile .status-indicators {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

/* Local tile: only mic level meter (no mic/cam glyph icons). */
.video-tile.local .status-indicators--local-meter-only {
  gap: 0;
}

.video-tile .status-indicator {
  background: rgba(0,0,0,.6);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}

.video-tile .status-indicator.muted {
  color: var(--red);
}

.video-tile .mic-level-meter {
  background: rgba(0,0,0,.6);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.video-tile .mic-level-bar {
  width: 100%;
  height: 0%;
  background: var(--green);
  transition: height 80ms linear;
}

.video-share-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 16px;
  background: var(--dark);
  align-items: center;
  flex-shrink: 0;
}

/* Pleer (video+audio bar): below the grid in normal view; overlays bottom in fullscreen */
#pleer-ui {
  position: relative;
  flex: 0 0 auto;
  flex-shrink: 0;
  align-self: center;
  width: min(1280px, calc(100% - 24px));
  max-width: 100%;
  box-sizing: border-box;
  /* Must stay in normal flow directly under the picture (inside #video-stage) */
  order: 0;
  margin: 0 auto 12px;
  z-index: 2;
  isolation: isolate;
  border-radius: 18px;
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, rgba(28, 30, 42, 0.94) 0%, rgba(12, 14, 24, 0.97) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  /* Shadow only downward — avoids painting over the video above */
  box-shadow:
    0 4px 22px rgba(0, 0, 0, 0.45),
    0 10px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.pleer-bar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #fff;
  opacity: .95;
  margin-bottom: 0;
  min-width: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.pleer-bar-title.pleer-bar-title-only {
  margin-bottom: 8px;
}
.pleer-bar-title i { color: var(--liquid-accent-1, var(--purple)); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }

/* Make inner controls render as part of the glass bar (no nested solid panels). */
#pleer-ui .video-share-options {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 10px;
}

/* Stream quality: Default / HD / 4K (applies to camera + screen share) */
.stream-quality-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  box-sizing: border-box;
}
.stream-quality-row.hidden {
  display: none !important;
}
.stream-quality-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.stream-quality-buttons {
  display: inline-flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.stream-quality-btn {
  margin: 0;
  padding: 0.45rem 0.85rem;
  font-weight: 700;
  font-size: 0.76rem;
  cursor: pointer;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.95);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.stream-quality-buttons .stream-quality-btn:last-child {
  border-right: none;
}
.stream-quality-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.stream-quality-btn.active {
  background: var(--liquid-accent-1, #ff9500);
  color: #1a1a1e;
}
#pleer-ui .video-controls-wrap {
  background: transparent !important;
  padding: 0 !important;
}
#pleer-ui .video-controls {
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 6px;
  row-gap: 6px;
  max-width: 100%;
  box-sizing: border-box;
}
/* Compact rectangular controls so all buttons fit (no clipped last button) */
#pleer-ui .video-btn {
  min-width: 0;
  width: auto;
  height: 34px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 0.88rem;
  flex: 0 1 auto;
  transform: none;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#pleer-ui .video-btn:hover {
  transform: none;
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
}
#pleer-ui .video-btn.active {
  background: var(--green);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
#pleer-ui .video-btn.danger {
  background: var(--red);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
#pleer-ui .video-btn-label {
  font-size: 0.62rem;
  font-weight: 600;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
#pleer-ui .video-btn-join {
  border-radius: 8px;
  padding: 0 10px;
}
#pleer-ui .pleer-bar-title {
  font-size: 0.8rem;
  margin-bottom: 0;
}
#pleer-ui .share-option-label {
  font-size: 0.78rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
@media (max-width: 520px) {
  .video-stage:not(:fullscreen):not(:-webkit-full-screen) .video-panel-hd-slot,
  .video-stage:not(:fullscreen):not(:-webkit-full-screen) #pleer-ui {
    width: min(1280px, calc(100% - 16px));
  }
  #panel-video #screen-remote-access-wrap.video-tab-remote-desktop {
    width: min(1280px, calc(100% - 16px));
  }
  .video-stage:not(:fullscreen):not(:-webkit-full-screen) #pleer-ui {
    margin-bottom: max(8px, env(safe-area-inset-bottom));
    padding: 8px 10px 10px;
  }
  #pleer-ui .video-btn-label {
    display: none;
  }
  #pleer-ui .video-btn {
    width: 36px;
    height: 34px;
    padding: 0;
    justify-content: center;
  }
  #pleer-ui .video-btn-join {
    width: auto;
    min-width: 36px;
    padding: 0 6px;
  }
}
.share-option-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}
.share-option-label input { margin: 0; cursor: pointer; }

.video-controls-wrap {
  background: var(--dark);
  padding: 12px 16px;
  flex-shrink: 0;
  /* Buttons already set colors, but this prevents accidental dark text inheritance. */
  color: #fff;
}
.video-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  touch-action: manipulation;
}
.video-btn {
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  gap: 6px;
}

.video-btn:hover {
  background: rgba(255,255,255,.25);
  transform: scale(1.05);
}

.video-btn.active {
  background: var(--green);
  color: #fff;
}

/* Camera + Screen both on: preview shows Screen — Cam stays “on” but visually secondary */
.video-btn.active.preview-secondary {
  opacity: 0.72;
  background: rgba(80, 160, 120, 0.55);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.video-btn.active.preview-secondary:hover {
  opacity: 0.82;
  background: rgba(72, 150, 112, 0.62);
  color: #fff;
}

/* #panel-video forces opacity:1 !important on controls — restore dimmed preview hint */
#panel-video.content-panel.active #btn-cam.video-btn.active.preview-secondary,
#panel-video.content-panel.active #btn-screen.video-btn.active.preview-secondary {
  opacity: 0.72 !important;
  background: rgba(80, 160, 120, 0.55) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
#panel-video.content-panel.active #btn-cam.video-btn.active.preview-secondary:hover,
#panel-video.content-panel.active #btn-screen.video-btn.active.preview-secondary:hover {
  opacity: 0.82 !important;
  background: rgba(72, 150, 112, 0.62) !important;
  color: #fff !important;
}

.video-btn.danger {
  background: var(--red);
  color: #fff;
}

.video-btn.danger:hover {
  background: #ff5544;
  color: #fff;
}

.video-btn-join {
  background: var(--green);
  color: #fff;
  border-radius: 24px;
  padding: 0 20px;
}

.video-btn-join:hover {
  background: #34C759;
  color: #fff;
}

.video-controls.in-call .video-btn-join {
  display: inline-flex !important;
}

.video-controls:not(.in-call) .video-btn:not(.video-btn-join):not(.video-btn.danger):not(.video-btn-files) {
  opacity: 1;
  pointer-events: auto;
}
.video-controls:not(.in-call) .video-btn-files {
  opacity: 1;
  pointer-events: auto;
}

.video-controls:not(.in-call) .video-btn.danger {
  opacity: 1;
  pointer-events: auto;
}

.video-btn-label {
  margin-left: 0;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Dual cam + screen: compact “See cam / See screen” preview switch */
.video-btn.video-btn--preview-toggle {
  padding: 0 10px;
  min-width: auto;
  gap: 4px;
}
.video-btn.video-btn--preview-toggle .video-btn-label {
  font-size: 0.68rem;
  max-width: 4.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quality cycle: stable width (Def / HD / 4K) */
#btn-stream-quality .video-btn-label {
  min-width: 1.85rem;
  display: inline-block;
  text-align: center;
}

@media (max-width: 480px) {
  .video-btn-label { display: none; }
  .video-btn-join .video-btn-label,
  #btn-cam .video-btn-label,
  #btn-local-preview-source .video-btn-label,
  #btn-flip-cam .video-btn-label,
  #btn-stream-quality .video-btn-label {
    display: inline !important;
  }
  .video-btn {
    min-width: 44px;
    height: 44px;
    padding: 0;
  }
  .video-btn-join { padding: 0 14px; }
}

.video-container .video-controls {
  display: flex;
  flex-shrink: 0;
}

.video-container.call-active .video-controls {
  opacity: 1;
}

/* Video panel: scroll column (frame height is fixed by .video-panel-hd-slot aspect-ratio)
   Stack (top→bottom): 1) picture + pleer  2) remote desktop  3) Info Noise / Members */
#panel-video.content-panel.active #video-stage {
  order: 1;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#panel-video .video-container {
  min-height: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

#panel-video.content-panel.active #video-panel-inner {
  flex: 1 1 auto;
  min-height: min(60vh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Realistic expectations: P2P limits + browser/OS differences (paired with space.html copy) */
#panel-video .video-realistic-hint {
  flex: 0 0 auto;
  margin: 0 0 12px 0;
  padding: 10px 12px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.68);
  background: rgba(99, 102, 241, 0.09);
  border-radius: 10px;
  border: 1px solid rgba(99, 102, 241, 0.22);
  box-sizing: border-box;
}
#panel-video .video-realistic-hint i {
  margin-right: 6px;
  color: var(--purple, #6366f1);
  opacity: 0.95;
}
body.ios-theme #panel-video .video-realistic-hint {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(99, 102, 241, 0.16);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Remote desktop block — directly under pleer */
#panel-video.content-panel.active #screen-remote-access-wrap.video-tab-remote-desktop {
  order: 2;
}
#panel-video #screen-remote-access-wrap.video-tab-remote-desktop {
  flex: 0 0 auto;
  width: min(1280px, calc(100% - 24px));
  max-width: 100%;
  box-sizing: border-box;
  margin: 10px auto 0;
  padding: 12px 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, rgba(28, 30, 42, 0.94) 0%, rgba(12, 14, 24, 0.97) 100%);
  color: #fff;
}

#panel-video #screen-remote-access-wrap.video-tab-remote-desktop:not(.hidden) {
  display: block;
}

/* Info Noise Index — dedicated tab (not under Video / Screen) */
#panel-info-index #info-index-panel-inner.video-tab-info-noise-block {
  flex: 1 1 auto;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  margin: 12px 12px 16px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #eee;
  background: var(--card-bg, #fff);
}

#panel-info-index #info-index-panel-inner .info-index-inner-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#panel-info-index #info-index-panel-inner .info-index-embed-wrap {
  height: min(420px, 52vh);
  min-height: 280px;
  max-height: min(560px, 60vh);
}

#panel-info-index.content-panel.active #info-index-panel-inner.video-tab-info-noise-block:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  scroll-margin-top: 12px;
}

.space-share.screen-only-mode #btn-record,
.space-share.screen-only-mode #btn-multistream {
  display: none;
}

.space-share.screen-only-mode .video-grid {
  display: none;
}

/* Screen-only: show start card until user shares; then show video container */
.space-share.screen-only-mode .screen-share-start.hidden { display: none; }
.space-share.screen-only-mode .screen-share-start:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 200px;
}
.space-share.screen-only-mode .video-container:not(.call-active) {
  display: none;
}
.space-share.screen-only-mode .video-container.call-active {
  display: flex;
}

/* Hard UI fallback: keep video controls visible whenever Video panel is active.
   This prevents "controls disappeared" issues after hard refresh / UI state toggles. */
#panel-video.content-panel.active .space-share.screen-only-mode .video-container:not(.call-active) {
  display: flex !important;
}
#panel-video.content-panel.active .space-share.screen-only-mode .video-grid {
  display: grid !important;
}
#panel-video.content-panel.active .video-container {
  display: flex !important;
}
/* Keep pleer + share row visible (do not hide #video-share-options — that strips “screen”/fallback UI). */
#panel-video.content-panel.active #pleer-ui {
  display: flex !important;
  flex-direction: column;
  flex-shrink: 0;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#panel-video.content-panel.active #video-share-options {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#panel-video.content-panel.active .video-controls-wrap,
#panel-video.content-panel.active #video-controls {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#panel-video.content-panel.active #btn-mic,
#panel-video.content-panel.active #btn-cam,
#panel-video.content-panel.active #btn-join-video,
#panel-video.content-panel.active #btn-record,
#panel-video.content-panel.active #btn-multistream,
#panel-video.content-panel.active #btn-screen,
#panel-video.content-panel.active #btn-end-video,
#panel-video.content-panel.active #btn-fullscreen {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#panel-video.content-panel.active #btn-join-video .video-btn-label,
#panel-video.content-panel.active #btn-cam .video-btn-label {
  display: inline !important;
}
#panel-video.content-panel.active .share-option-label {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.screen-share-start-card {
  text-align: center;
  max-width: 400px;
  padding: 32px 24px;
  background: var(--card-bg, #fff);
  border-radius: 12px;
  border: 1px solid #eee;
}
.screen-share-start-card h3 { margin: 0 0 12px; font-size: 1.25rem; color: var(--primary); }
.screen-share-start-card p { margin: 0 0 20px; font-size: 14px; color: #555; line-height: 1.5; }
.screen-share-start-card .btn { padding: 12px 24px; font-size: 1rem; }
.screen-share-start-card .screen-share-mode-field {
  margin: 0 0 16px;
  text-align: left;
}
.screen-share-start-card .screen-share-mode-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
}
.screen-share-start-card .screen-share-mode-card-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 15px;
  border-radius: 8px;
  border: 2px solid rgba(166, 147, 239, 0.45);
  background: rgba(166, 147, 239, 0.08);
}
.screen-share-start-card .screen-share-mode-hint {
  font-size: 12px;
  color: #666;
  margin: 0 0 18px;
  line-height: 1.45;
}

/* Polls Panel */
.polls-list {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.poll-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #eee;
}

.poll-card .poll-question {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 16px;
}

.poll-card .poll-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.poll-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
}

.poll-option:hover {
  background: rgba(166,147,239,.1);
}

.poll-option.selected {
  background: rgba(52,199,89,.15);
  border: 2px solid var(--green);
}

.poll-option .option-text {
  flex: 1;
}

.poll-option .option-votes {
  font-size: .85rem;
  color: var(--gray);
}

.poll-option .option-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(52,199,89,.2);
  border-radius: 10px;
  z-index: 0;
}

.poll-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.poll-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}

.poll-share-space {
  background: var(--purple);
  color: #fff;
}

.poll-share-space:hover {
  background: #6b62d9;
  transform: translateY(-1px);
}

.poll-create-public {
  background: var(--green);
  color: #fff;
}

.poll-create-public:hover {
  background: #5fb85f;
  transform: translateY(-1px);
}

.polls-toolbar {
  padding: 16px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid #eee;
}

.polls-toolbar .btn-create-poll {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}

.polls-toolbar .btn-create-poll:hover {
  background: var(--green);
}

/* Sidebar - Participants (narrower + denser list) */
.space-sidebar {
  background: var(--card-bg);
  border-left: 1px solid #eee;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
}

.sidebar-header h3 {
  font-size: 0.92rem;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-header h3 span {
  background: var(--purple);
  color: #fff;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: .75rem;
}

.participants-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
}

.participant-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  transition: background .2s;
}

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

.btn-resume-participant-media {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(46, 125, 50, 0.35);
  color: #c8e6c9;
}
.btn-resume-participant-media:hover {
  background: rgba(46, 125, 50, 0.55);
  color: #fff;
}

.btn-remove-participant {
  flex-shrink: 0;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(198, 40, 40, 0.15);
  color: #c62828;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-remove-participant:hover {
  background: #c62828;
  color: #fff;
}

.participant-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.85rem;
  background: linear-gradient(135deg, var(--purple) 0%, var(--green) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
}

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

.participant-name {
  font-weight: 500;
  color: var(--dark);
}

.space-sidebar .participant-name {
  font-size: 0.88rem;
  line-height: 1.25;
}

.participant-status {
  font-size: .75rem;
  color: var(--gray);
}

.participant-actions {
  display: flex;
  gap: 4px;
}

.participant-actions button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--gray);
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
}

.participant-actions button:hover {
  background: var(--bg);
  color: var(--purple);
}

/* Responsive */
@media (max-width: 1024px) {
  .space-share {
    grid-template-columns: 1fr;
  }
  
  .space-sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  .setup-card {
    padding: 28px 24px;
    margin: 0 16px;
  }
  
  .type-option {
    flex-wrap: wrap;
  }
  
  .type-badge {
    width: 100%;
    text-align: center;
    margin-top: 8px;
  }
  
  .space-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  
  .space-header .left,
  .space-header .right {
    width: 100%;
    justify-content: center;
  }
  
  .space-tabs {
    overflow-x: auto;
    padding: 0 8px;
    -webkit-overflow-scrolling: touch;
  }
  
  .space-tab {
    padding: 9px 12px;
    font-size: .85rem;
    flex-shrink: 0;
  }
  
  .chat-input-area {
    padding: 12px 16px;
  }
  
  .video-btn {
    width: 48px;
    height: 48px;
  }
}

/* Mobile phones: single column, touch-friendly */
@media (max-width: 480px) {
  /* Two rows only: header + main. A third 1fr row was empty and stole height when grid applied. */
  .space-share {
    grid-template-rows: auto 1fr;
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
  }
  
  .space-header {
    padding: 7px 10px;
    padding-top: max(7px, env(safe-area-inset-top));
    gap: 6px;
  }
  
  .space-header .left {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .space-info {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .space-code-display {
    font-size: 0.8rem;
    padding: 10px 12px;
    min-height: 44px;
    box-sizing: border-box;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .space-header .right {
    gap: 8px;
  }
  
  .header-link-dropdown {
    min-width: 0;
    max-width: calc(100vw - 24px);
    right: 0;
    left: auto;
  }
  
  .header-btn,
  #btn-invite {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .btn-leave {
    padding: 12px 16px;
    min-height: 44px;
    font-size: 0.9rem;
  }
  
  .space-tabs {
    padding: 4px 6px;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  
  .space-tab {
    padding: 8px 10px;
    font-size: 0.8rem;
    min-height: 40px;
    flex-shrink: 0;
    align-items: center;
  }

  .space-main:has(.space-content[data-active-tab="video"]) .space-header {
    padding: 5px 8px;
    padding-top: max(5px, env(safe-area-inset-top));
  }
  .space-main:has(.space-content[data-active-tab="video"]) .space-tab {
    padding: 7px 8px;
    min-height: 38px;
    font-size: 0.78rem;
  }
  
  .space-content {
    padding: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .space-content[data-active-tab="chat"] {
    padding-left: 10px;
    padding-right: 10px;
  }

  .space-content[data-active-tab="video"] {
    padding: 6px 6px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .space-content:has(#panel-video.content-panel.active) {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .video-grid:not(.video-grid--multi) {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Multiview: stack tiles vertically; equal flex share of frame — no fixed 180px min */
  .video-grid.video-grid--multi {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .video-grid.video-grid--multi .video-tile {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
  }
  
  .video-tile {
    min-height: 180px;
  }

  .video-grid.video-grid--multi .video-tile {
    min-height: 0;
  }

  .video-grid.video-grid--fill .video-tile,
  .video-grid.video-grid--focus .video-tile.video-tile--focused {
    min-height: 0;
  }
  
  .invite-link-card {
    padding: 12px;
    margin: 10px 0;
  }
  
  .invite-link-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .invite-link-input-chat,
  .invite-link-row input {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 16px;
  }
  
  .btn-copy-invite {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  
  .chat-input-area {
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  
  .chat-input-wrap {
    min-height: 44px;
  }
  
  .chat-input-wrap input {
    font-size: 16px;
    min-height: 44px;
  }
  
  .chat-input-wrap .attach-btn,
  .send-btn {
    min-width: 44px;
    min-height: 44px;
  }
  
  .participants-badge {
    font-size: 0.8rem;
    padding: 8px 12px;
  }
  
  /* Module mode on mobile: stack join box below content */
  .space-share.module-mode .space-main {
    flex-direction: column;
  }
  
  .space-share.module-mode .module-join-box {
    width: 100%;
    min-width: 0;
    max-height: 40vh;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-left: none;
    border-top: 1px solid #eee;
  }
  
  .space-share.module-mode .module-join-input-wrap input {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 16px;
  }
  
  .space-share.module-mode .btn-copy-module {
    min-height: 44px;
    padding: 12px 16px;
  }
  
  .files-toolbar .btn-upload {
    min-height: 44px;
    padding: 12px 18px;
  }
  
  .poll-option {
    min-height: 44px;
    padding: 12px 16px;
  }
  
  .polls-toolbar .btn-create-poll,
  .btn-post-submit,
  .btn-attach-post {
    min-height: 44px;
    padding: 12px 18px;
  }
  
  .video-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Pop-out button in panels */
.panel-pop-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

#panel-video .panel-pop-wrap {
  margin-bottom: 4px;
}
.btn-pop-out {
  background: transparent;
  border: 1px solid var(--gray);
  color: var(--gray);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-pop-out:hover {
  border-color: var(--purple);
  color: var(--purple);
}

/* Floating panels (pop-out Chat / Video) */
#floating-panels-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9000;
}
#floating-panels-container .floating-panel {
  pointer-events: auto;
  position: fixed;
  min-width: 320px;
  min-height: 240px;
  max-width: 95vw;
  max-height: 90vh;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  z-index: 9001;
  overflow: hidden;
}
.floating-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  flex-shrink: 0;
  /* Solid bar — never use glass here (bright video behind made text/icons invisible). */
  background: linear-gradient(180deg, #4e3d8f 0%, #3d2f6b 100%);
  color: #fff;
  font-weight: 600;
  cursor: move;
  user-select: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.floating-panel-header > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.floating-panel-header .btn-pop-in {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.floating-panel-header .btn-pop-in:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.65);
}
.floating-panel-header .btn-pop-in i {
  font-size: 0.95em;
  opacity: 0.95;
}
.floating-panel-body {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
/* Video pop-out: inner must fill the floating window so multiview/grid gets height (no collapsed strip). */
#floating-panels-container .floating-panel[data-panel="video"] .floating-panel-body {
  overflow: auto;
  min-height: 0;
}
#floating-panels-container .floating-panel-body > #video-panel-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.floating-panel-body .content-panel {
  display: flex !important;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.floating-panel-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  z-index: 2;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.55) 50%);
  background-size: 8px 8px;
  opacity: 0.7;
}
.floating-panel-resize:hover {
  opacity: 1;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.9) 50%);
}

/* ========== Moved from space.html inline <style> ========== */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.6);
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal.active { display: flex; }
.modal-content {
  background: #fff;
  border-radius: 16px;
  padding: 40px 32px 32px;
  max-width: 560px;
  width: 100%;
  position: relative;
  margin: max(20px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom));
  max-height: calc(100dvh - 40px);
  overflow: auto;
}
.modal-content h2 {
  color: var(--dark);
  margin-bottom: 8px;
}
.close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray);
  cursor: pointer;
  z-index: 2;
}

@media (max-width: 520px) {
  .modal { padding: 12px; }
  .modal-content {
    padding: 44px 18px 18px;
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 14px;
  }
  .close-btn { top: 12px; right: 12px; }
}
.invite-code {
  background: var(--bg);
  padding: 20px;
  border-radius: 12px;
  font-family: monospace;
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  color: var(--purple);
  margin-bottom: 20px;
}
.invite-actions {
  display: flex;
  gap: 12px;
}
.btn-copy {
  flex: 1;
  padding: 12px 16px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .2s;
}
.btn-copy:hover {
  background: var(--green);
}
.form-group {
  margin-bottom: 20px;
  text-align: left;
}
.form-group label {
  display: block;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 8px;
}
.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #eee;
  border-radius: 10px;
  font-size: 1rem;
  margin-bottom: 8px;
}
.form-group input:focus {
  outline: none;
  border-color: var(--purple);
}
.btn-add-option {
  background: none;
  border: none;
  color: var(--purple);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}
.btn-add-option:hover {
  color: var(--green);
}
.empty-state {
  opacity: .6;
  cursor: default;
}
.empty-state:hover {
  transform: none;
  border-color: #eee;
  box-shadow: none;
}

/* Multistream Modal */
.modal-large {
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--purple) #f0f0f0;
}
.modal-large::-webkit-scrollbar {
  width: 8px;
}
.modal-large::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}
.modal-large::-webkit-scrollbar-thumb {
  background: var(--purple);
  border-radius: 4px;
}
.modal-large::-webkit-scrollbar-thumb:hover {
  background: #6b62d9;
}
.stream-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: 10px;
  margin-bottom: 24px;
}
.stream-status .status-dot {
  width: 12px;
  height: 12px;
  background: var(--gray);
  border-radius: 50%;
}
.stream-status.live .status-dot {
  background: #FF0000;
  animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.stream-status .status-text {
  font-weight: 500;
  color: var(--dark);
}
.platforms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.platform-card {
  border: 2px solid #eee;
  border-radius: 12px;
  padding: 16px;
  transition: all .2s;
}
.platform-card:hover {
  border-color: var(--purple);
}
.platform-card.active {
  border-color: var(--green);
  background: rgba(52,199,89,.05);
}
.platform-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.platform-header i {
  font-size: 1.5rem;
}
.platform-header span {
  flex: 1;
  font-weight: 500;
}
.toggle {
  position: relative;
  width: 48px;
  height: 26px;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #ccc;
  border-radius: 26px;
  transition: .3s;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .3s;
}
.toggle input:checked + .toggle-slider {
  background: var(--green);
}
.toggle input:checked + .toggle-slider:before {
  transform: translateX(22px);
}
.platform-config {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
.platform-config input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #eee;
  border-radius: 8px;
  font-size: .9rem;
  margin-bottom: 8px;
}
.platform-config input:focus {
  outline: none;
  border-color: var(--purple);
}
.help-link {
  font-size: .85rem;
  color: var(--purple);
  text-decoration: none;
}
.help-link:hover {
  text-decoration: underline;
}
.platform-note {
  font-size: .8rem;
  color: var(--gray);
  margin: 0;
}
.stream-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.btn-start-stream {
  flex: 1;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--green) 0%, #34C759 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .2s;
}
.btn-start-stream:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(52,199,89,.3);
}
.btn-stop-stream {
  flex: 1;
  padding: 14px 24px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .2s;
}
.btn-stop-stream:hover {
  background: #ff5544;
}
.stream-info {
  background: var(--bg);
  padding: 20px;
  border-radius: 12px;
}
.stream-info h4 {
  color: var(--dark);
  margin-bottom: 12px;
}
.stream-info ol {
  margin: 0 0 12px 20px;
  color: var(--gray);
  font-size: .9rem;
}
.stream-info li {
  margin-bottom: 6px;
}
.stream-note {
  font-size: .85rem;
  color: var(--purple);
  margin: 0;
}
@media (max-width: 600px) {
  .platforms-grid {
    grid-template-columns: 1fr;
  }
  .modal-large {
    padding: 24px;
  }
}

/* Settings Modal */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #eee;
}
.settings-tab {
  padding: 8px 16px;
  background: var(--bg);
  border: none;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  color: var(--gray);
}
.settings-tab:hover {
  background: #e8e8eb;
  color: var(--dark);
}
.settings-tab.active {
  background: var(--purple);
  color: #fff;
}
.settings-panel {
  display: none;
  max-height: 400px;
  overflow-y: auto;
}
.settings-panel.active {
  display: block;
}
.setting-group {
  margin-bottom: 24px;
}
.setting-group h3 {
  font-size: .9rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.setting-item:last-child {
  border-bottom: none;
}
.setting-info {
  flex: 1;
}
.setting-label {
  display: block;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 2px;
}
.setting-desc {
  font-size: .85rem;
  color: var(--gray);
}
.setting-input {
  width: 200px;
  padding: 8px 12px;
  border: 2px solid #eee;
  border-radius: 8px;
  font-size: .9rem;
}
.setting-input:focus {
  outline: none;
  border-color: var(--purple);
}
.setting-select {
  width: 180px;
  padding: 8px 12px;
  border: 2px solid #eee;
  border-radius: 8px;
  font-size: .9rem;
  background: #fff;
  cursor: pointer;
}
.setting-select:focus {
  outline: none;
  border-color: var(--purple);
}
.setting-range {
  width: 150px;
  cursor: pointer;
}
.btn-test-audio,
.btn-request-notif,
.btn-clear-data {
  padding: 10px 16px;
  background: var(--bg);
  border: 2px solid #eee;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all .2s;
}
.btn-test-audio:hover,
.btn-request-notif:hover {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}
.btn-clear-data {
  color: var(--red);
  border-color: var(--red);
}
.btn-clear-data:hover {
  background: var(--red);
  color: #fff;
}
.video-preview-container {
  background: var(--dark);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  color: #fff;
}
.video-preview-container video {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}
.preview-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-size: .85rem;
}
.shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
}
.shortcut-action {
  color: var(--dark);
}
.shortcut-key {
  font-family: monospace;
  background: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: .85rem;
  color: var(--gray);
}
.settings-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid #eee;
}
.btn-reset-settings {
  padding: 12px 24px;
  background: transparent;
  border: 2px solid #eee;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.btn-reset-settings:hover {
  background: var(--bg);
}
.btn-save-settings {
  padding: 12px 24px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.btn-save-settings:hover {
  background: var(--purple);
}
@media (max-width: 600px) {
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .setting-input,
  .setting-select {
    width: 100%;
  }
  .settings-tabs {
    justify-content: center;
  }
}

/* Share Social Modal – scrollable when content is tall */
.modal-medium {
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.modal-medium::-webkit-scrollbar {
  width: 8px;
}
.modal-medium::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}
.modal-medium::-webkit-scrollbar-thumb {
  background: var(--purple);
  border-radius: 4px;
}
.modal-medium::-webkit-scrollbar-thumb:hover {
  background: #6b62d9;
}
.btn-share-social {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%) !important;
  color: #fff !important;
}
.btn-share-social:hover {
  background: linear-gradient(135deg, #FF8E53 0%, #FF6B6B 100%) !important;
}
.share-section {
  margin-bottom: 20px;
}
.share-section h3 {
  font-size: 1rem;
  color: var(--dark);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.share-desc {
  font-size: .85rem;
  color: var(--gray);
  margin-bottom: 16px;
}
.share-info-note {
  font-size: .8rem;
  color: var(--gray);
  background: rgba(0,0,0,.04);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  line-height: 1.4;
}
.social-share-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 16px;
}
.social-check-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: .95rem;
}
.social-check-item input { margin: 0; width: 18px; height: 18px; }
.social-check-item i { color: var(--gray); }
.btn-post-to-social {
  width: 100%;
  padding: 14px 20px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-post-to-social:hover { background: #6b62d9; }
.post-section-notice {
  margin: 0 0 16px 0;
  padding: 10px 14px;
  background: rgba(255, 179, 71, 0.2);
  color: #b8860b;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(184, 134, 11, 0.4);
}
.post-compose {
  padding: 20px;
  max-width: 560px;
}
.post-compose textarea {
  width: 100%;
  padding: 14px;
  border: 2px solid #eee;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
  margin-bottom: 12px;
}
.post-attach-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.post-file-input { display: none; }
.btn-attach-post {
  padding: 10px 16px;
  border: 2px solid #eee;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--gray);
}
.btn-attach-post:hover { border-color: var(--purple); color: var(--purple); }
.post-file-name { font-size: .85rem; color: var(--gray); }
.btn-post-submit {
  padding: 14px 24px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-post-submit:hover { background: #6b62d9; }
.social-share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.social-share-btn {
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: 12px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-share-btn[data-platform="whatsapp"] {
  background: #25D366;
  color: #fff;
}
.social-share-btn[data-platform="telegram"] {
  background: #0088cc;
  color: #fff;
}
.social-share-btn[data-platform="facebook"] {
  background: #1877F2;
  color: #fff;
}
.social-share-btn[data-platform="twitter"] {
  background: #000;
  color: #fff;
}
.social-share-btn[data-platform="linkedin"] {
  background: #0A66C2;
  color: #fff;
}
.social-share-btn[data-platform="email"] {
  background: #EA4335;
  color: #fff;
}
.social-share-btn[data-platform="sms"] {
  background: #34B7F1;
  color: #fff;
}
.social-share-btn[data-platform="copy"] {
  background: var(--purple);
  color: #fff;
}
.social-share-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.share-divider {
  height: 1px;
  background: #eee;
  margin: 24px 0;
}
.btn-go-live {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .2s;
}
.btn-go-live:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,0,0,.3);
}
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.quick-action-btn {
  padding: 16px;
  background: var(--bg);
  border: 2px solid #eee;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all .2s;
}
.quick-action-btn i {
  font-size: 1.5rem;
  color: var(--purple);
}
.quick-action-btn span {
  font-size: .85rem;
  color: var(--dark);
  font-weight: 500;
}
.quick-action-btn:hover {
  border-color: var(--purple);
  background: rgba(166,147,239,.05);
}
.qr-display, .embed-display {
  margin-top: 20px;
  padding: 20px;
  background: var(--bg);
  border-radius: 12px;
  text-align: center;
}
.qr-display canvas {
  max-width: 200px;
  margin-bottom: 12px;
}
.qr-display p {
  color: var(--gray);
  font-size: .9rem;
  margin-bottom: 12px;
}
.btn-download-qr, .btn-copy-embed {
  padding: 10px 20px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .2s;
}
.btn-download-qr:hover, .btn-copy-embed:hover {
  background: var(--green);
}
.embed-display textarea {
  width: 100%;
  height: 80px;
  padding: 12px;
  border: 2px solid #eee;
  border-radius: 8px;
  font-family: monospace;
  font-size: .85rem;
  resize: none;
  margin-bottom: 12px;
}
@media (max-width: 500px) {
  .social-share-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .quick-actions-grid {
    grid-template-columns: 1fr;
  }
}
/* Admin panel (organization) */
#panel-admin { padding: 20px; }
.admin-org-card {
  background: var(--bg);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #eee;
}
.admin-org-card h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: var(--dark);
}
.admin-org-card h3 i { margin-right: 8px; color: var(--purple); }
.admin-hint {
  color: var(--gray);
  font-size: .9rem;
  margin-bottom: 16px;
}
.admin-field { margin-bottom: 14px; }
.admin-field label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--dark);
}
.admin-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
.admin-input-wrap input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #eee;
  border-radius: 8px;
  font-size: .95rem;
  font-family: monospace;
}
.btn-copy-inline {
  padding: 10px 14px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.btn-copy-inline:hover { background: #6b62d9; }
#admin-sites-list {
  width: 100%;
  padding: 12px;
  border: 2px solid #eee;
  border-radius: 8px;
  font-size: .9rem;
  font-family: monospace;
  resize: vertical;
  margin-bottom: 12px;
}
.btn-save-sites {
  padding: 12px 20px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-save-sites:hover { background: #6b62d9; }
.admin-status {
  margin-top: 10px;
  font-size: .9rem;
  color: var(--gray);
}
.admin-status.success { color: var(--green); }
.admin-status.error { color: #c62828; }
.admin-licenses-toolbar { margin-bottom: 12px; }
.admin-licenses-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-licenses-table th, .admin-licenses-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; }
.admin-licenses-table th { font-weight: 600; color: var(--dark); }
.admin-licenses-empty { color: var(--gray); font-style: italic; }
.admin-license-status.active { color: var(--green); }
.admin-license-status.inactive { color: var(--red); }
.btn-revoke-license { padding: 6px 12px; font-size: .85rem; background: #e0e0e0; color: #333; border: none; border-radius: 6px; cursor: pointer; }
.btn-revoke-license:hover { background: var(--red); color: #fff; }
.admin-admin-permissions-hint { font-size: .85rem; color: var(--gray); margin-bottom: 10px; }
.admin-code-permissions { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.admin-code-permissions label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.enter-admin-code-bar {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--card-bg); border: 1px solid #eee; border-radius: 12px;
  padding: 12px 20px; box-shadow: 0 4px 20px rgba(0,0,0,.12);
  display: flex; align-items: center; gap: 12px; z-index: 1000;
}
.enter-admin-code-bar input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; width: 180px; }
.btn-enter-admin-code { padding: 8px 16px; background: var(--purple); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn-enter-admin-code:hover { background: #6b62d9; }
.enter-admin-code-bar .enter-admin-code-error { margin: 4px 0 0 0; color: var(--red); font-size: .85rem; position: absolute; top: 100%; left: 0; right: 0; text-align: center; }
.modal-small { max-width: 420px; }
/* Info Noise Index panel – inner tabs (only when active; #id alone was overriding .content-panel { display:none }) */
#panel-info-index.content-panel.active {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.info-index-inner-tabs {
  display: flex; gap: 0; background: var(--card-bg); border-bottom: 1px solid #eee;
  padding: 0 20px 0 0;
}
.info-index-inner-tab {
  padding: 14px 20px; border: none; background: none; color: var(--gray);
  font-weight: 500; font-size: .95rem; cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.info-index-inner-tab:hover { color: var(--purple); }
.info-index-inner-tab.active { color: var(--purple); border-bottom-color: var(--purple); }
.info-index-inner-tab i { margin-right: 6px; }
.info-index-inner-content { flex: 1; overflow: auto; padding: 20px; }
.info-index-inner-panel { display: none; flex-direction: column; gap: 16px; height: 100%; }
.info-index-inner-panel.active { display: flex; }
.info-index-space-card {
  background: var(--bg);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #eee;
}
.info-index-space-card h3 { margin: 0 0 8px 0; font-size: 1.1rem; color: var(--dark); }
.info-index-space-card h3 i { margin-right: 8px; color: var(--purple); }
.org-resources-list { list-style: none; margin: 0; padding: 0; }
.org-resources-list li { padding: 6px 0; border-bottom: 1px solid #eee; }
.org-resources-list a { color: var(--purple); text-decoration: none; }
.org-resources-list a:hover { text-decoration: underline; }
.info-index-mode-toggle { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.info-index-mode-btn {
  padding: 12px 20px;
  border: 2px solid #eee;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .2s;
}
.info-index-mode-btn:hover { border-color: var(--purple); color: var(--purple); }
.info-index-mode-btn.active { border-color: var(--purple); background: rgba(166,147,239,.08); color: var(--purple); }
.info-index-mode-hint { margin-bottom: 16px; }
.info-index-embed-wrap { width: 100%; height: calc(100vh - 320px); min-height: 360px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.info-index-embed-wrap iframe { width: 100%; height: 100%; border: none; }
.ft-results-toolbar { margin-bottom: 12px; }
.ft-results-count { font-size: .9rem; color: var(--gray); }
.ft-results-wrap { overflow-x: auto; border: 1px solid #eee; border-radius: 8px; }
.ft-results-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ft-results-table th, .ft-results-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; }
.ft-results-table th { font-weight: 600; color: var(--dark); background: var(--bg); }
.ft-results-empty { color: var(--gray); font-style: italic; text-align: center; padding: 24px !important; }
.ft-stat-card {
  background: var(--bg); border: 1px solid #eee; border-radius: 8px; padding: 16px;
  text-align: center; min-width: 100px;
}
.ft-stat-value { display: block; font-size: 1.5rem; font-weight: 700; color: var(--purple); }
.ft-stat-label { font-size: .85rem; color: var(--gray); }

/* ==========================================
   iOS 19 Liquid Glass (Space page override)
   ==========================================
   The goal is to make ALL main containers glassy,
   even if other CSS rules exist earlier.
*/
:root {
  --lg-glass-bg: rgba(255,255,255,.06);
  --lg-glass-border: rgba(255,255,255,.22);
  --lg-glass-text: rgba(255,255,255,.92);
  /* Default glass — lighter blur for long sessions / weaker devices */
  --space-glass-backdrop: blur(4px) saturate(125%);
  /* Softer panels — smaller spread than before */
  --space-panel-shadow: 0 8px 28px rgba(0,0,0,.18), 0 0 18px rgba(255,149,0,.08);
  --pleer-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 14px rgba(255,149,0,.1);
}

/* Touch devices: cheaper composite */
@media (hover: none) and (pointer: coarse) {
  :root {
    --space-glass-backdrop: blur(3px) saturate(118%);
    --space-panel-shadow: 0 6px 20px rgba(0,0,0,.16), 0 0 14px rgba(255,149,0,.06);
    --pleer-shadow: 0 8px 22px rgba(0,0,0,.17), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 12px rgba(255,149,0,.08);
  }
}

/* OS “reduce motion” → skip backdrop-filter (big CPU/GPU win); solidify glass slightly */
@media (prefers-reduced-motion: reduce) {
  :root {
    /* blur(0) instead of "none" — some WebKit builds mishandle hit-testing with backdrop-filter: none */
    --space-glass-backdrop: blur(0px);
    --lg-glass-bg: rgba(255,255,255,.11);
    --space-panel-shadow: 0 4px 14px rgba(0,0,0,.14);
    --pleer-shadow: 0 4px 14px rgba(0,0,0,.14), 0 0 0 1px rgba(255,255,255,.08) inset;
  }
  .space-presence--connecting .space-presence-dot,
  .space-presence--others .space-presence-dot {
    animation: none !important;
  }
  .stream-status.live .status-dot {
    animation: none !important;
    opacity: 1;
  }
}

body.ios-theme {
  background:
    radial-gradient(circle at 18% 10%, rgba(255,149,0,.28) 0%, rgba(255,149,0,0) 48%),
    radial-gradient(circle at 88% 80%, rgba(0,122,255,.32) 0%, rgba(0,122,255,0) 55%),
    linear-gradient(180deg, #0b1020 0%, #05070d 100%) !important;
  color: var(--lg-glass-text) !important;
}

/* Glass + backdrop layers must not swallow clicks (Safari/stacking edge cases) */
body.ios-theme .space-share,
body.ios-theme .space-main,
body.ios-theme .space-header,
body.ios-theme .space-link-bar,
body.ios-theme .space-tabs,
body.ios-theme .space-content,
body.ios-theme .content-panel {
  pointer-events: auto;
}
body.ios-theme .space-tab,
body.ios-theme .header-btn,
body.ios-theme .space-link-bar-btn,
body.ios-theme .btn-pop-out,
body.ios-theme .video-btn,
body.ios-theme .btn-upload,
body.ios-theme .btn-create-poll,
body.ios-theme button:not(:disabled),
body.ios-theme input:not([disabled]),
body.ios-theme select:not([disabled]),
body.ios-theme textarea:not([disabled]),
body.ios-theme label {
  pointer-events: auto;
}

/* Main glass surfaces — NOT .video-container / .video-share-options / .video-controls-wrap:
   Applying liquid glass there washed out the camera feed and made pleer buttons look “gone”. */
.space-share,
.space-header,
.space-tabs,
.module-join-box,
.space-sidebar,
.panel-pop-wrap,
.floating-panel-body,
.screen-share-start-card,
.info-index-space-card,
.poll-card,
.file-card {
  background: var(--lg-glass-bg) !important;
  background-color: var(--lg-glass-bg) !important;
  border: 0.5px solid var(--lg-glass-border) !important;
  border-color: var(--lg-glass-border) !important;
  backdrop-filter: var(--space-glass-backdrop) !important;
  -webkit-backdrop-filter: var(--space-glass-backdrop) !important;
}

/* Give "lift" shadow so it feels like VisionOS */
.space-header,
.space-link-bar,
.space-tabs,
.module-join-box,
.panel-pop-wrap,
.floating-panel-body,
.info-index-space-card,
.poll-card,
.file-card {
  box-shadow: var(--space-panel-shadow) !important;
}

/* Text readability inside glass */
.space-header * ,
.space-link-bar * ,
.space-tabs * ,
.module-join-box * ,
.poll-card * ,
.file-card * ,
.info-index-space-card * {
  color: inherit !important;
}

/* Header buttons (Security/Upgrade/Settings/etc.) must not become "white on white". */
.space-header .header-btn,
.space-header .btn-upgrade-space,
.space-header #btn-security-dropdown {
  background: rgba(255,255,255,.08) !important;
  border: 0.5px solid rgba(255,255,255,.22) !important;
  color: var(--lg-glass-text) !important;
}

.space-header .header-btn:hover,
.space-header .btn-upgrade-space:hover {
  color: #fff !important;
}

/* Security dropdown glass */
.header-security-dropdown {
  background: var(--lg-glass-bg) !important;
  border: 0.5px solid var(--lg-glass-border) !important;
}
.header-security-dropdown * {
  color: var(--lg-glass-text) !important;
}
.header-security-option {
  background: rgba(255,255,255,.08) !important;
  border: 0.5px solid rgba(255,255,255,.22) !important;
}
.header-security-option:hover {
  background: rgba(166,147,239,.18) !important;
}

body.ios-theme .space-link-bar {
  border-bottom-color: var(--lg-glass-border) !important;
}
body.ios-theme .space-link-bar-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 0.5px solid var(--lg-glass-border) !important;
  color: var(--lg-glass-text) !important;
}
body.ios-theme .space-link-bar-btn:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
body.ios-theme .space-link-bar-btn-secondary {
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fecaca !important;
}
body.ios-theme .space-link-bar-btn-secondary:hover {
  color: #fff !important;
  background: rgba(198, 40, 40, 0.55) !important;
  border-color: rgba(254, 202, 202, 0.6) !important;
}

/* Glass panels use color: inherit → light text; local light input backgrounds need dark text */
body.ios-theme .module-join-box input[type="text"],
body.ios-theme .module-join-box input[type="password"],
body.ios-theme .module-join-box input[type="search"],
body.ios-theme .module-join-box input[type="email"],
body.ios-theme .module-join-box textarea,
body.ios-theme .module-join-box select {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
}

body.ios-theme .module-join-box .btn-copy-module {
  color: #3a3a3c !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

body.ios-theme .module-join-box .btn-copy-module:hover {
  color: #fff !important;
  background: var(--purple) !important;
  border-color: var(--purple) !important;
}

/* Chat input: avoid white text on light background in iOS Liquid Glass mode */
body.ios-theme .chat-input-wrap input,
body.ios-theme #chat-input {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}

body.ios-theme .chat-input-wrap input::placeholder {
  color: #4a4a52 !important;
  opacity: 0.95 !important;
}

/* Files / Polls toolbars: light card background + body’s light text = invisible labels; force dark text. */
body.ios-theme .space-content .files-toolbar,
body.ios-theme .space-content .polls-toolbar {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.ios-theme .space-content .files-toolbar .btn-upload,
body.ios-theme .space-content .polls-toolbar .btn-create-poll {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.ios-theme .space-content .chat-toolbar-important {
  color: #1c1c1e !important;
}

/* Chat thread strip: readable on liquid-glass page */
body.ios-theme #panel-chat.chat-panel .chat-messages {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
body.ios-theme .space-content .chat-toolbar-important .important-send-label {
  color: #636366 !important;
  -webkit-text-fill-color: #636366 !important;
}
body.ios-theme .space-content .panel-pop-wrap .btn-pop-out {
  color: #1c1c1e !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

body.ios-theme .space-presence--connecting {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}
body.ios-theme .space-presence--alone {
  background: rgba(255, 149, 0, 0.22) !important;
  color: #fde68a !important;
}
body.ios-theme .space-presence--others {
  background: rgba(52, 199, 89, 0.22) !important;
  color: #bbf7d0 !important;
}
body.ios-theme .space-presence--alone .space-presence-dot {
  background: #fbbf24 !important;
}
body.ios-theme .space-presence--others .space-presence-dot {
  background: #4ade80 !important;
}

/* Info Noise Index tab: iOS theme — opaque surfaces + dark text so labels are readable. */
body.ios-theme #panel-info-index #info-index-panel-inner.video-tab-info-noise-block {
  color: #1c1c1e !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
body.ios-theme #panel-info-index #info-index-panel-inner .info-index-inner-tabs {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.ios-theme #panel-info-index #info-index-panel-inner .info-index-inner-tab {
  color: #636366 !important;
  -webkit-text-fill-color: #636366 !important;
}
body.ios-theme #panel-info-index #info-index-panel-inner .info-index-inner-tab.active {
  color: var(--purple) !important;
  -webkit-text-fill-color: var(--purple) !important;
}
body.ios-theme #panel-info-index #info-index-panel-inner .info-index-inner-tab:hover {
  color: var(--purple) !important;
}
body.ios-theme #panel-info-index #info-index-panel-inner .panel-pop-wrap .btn-pop-out {
  color: #1c1c1e !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}
body.ios-theme #panel-info-index #info-index-panel-inner .info-index-space-card {
  background: rgba(248, 248, 250, 0.98) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}
body.ios-theme #panel-info-index #info-index-panel-inner .info-index-space-card * {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
}
body.ios-theme #panel-info-index #info-index-panel-inner .info-index-space-card h3 i,
body.ios-theme #panel-info-index #info-index-panel-inner .info-index-space-card a {
  color: var(--purple) !important;
  -webkit-text-fill-color: var(--purple) !important;
}
body.ios-theme #panel-info-index #info-index-panel-inner .admin-hint {
  color: #636366 !important;
  -webkit-text-fill-color: #636366 !important;
}
body.ios-theme #panel-info-index #info-index-panel-inner .info-index-mode-btn.active {
  color: var(--purple) !important;
  -webkit-text-fill-color: var(--purple) !important;
}

/* =============================================================================
   Phones / narrow screens: full-page scroll (Safari iOS, Chrome Android)
   Fixed 100vh + grid 1fr often traps content with no scroll.
   ============================================================================= */
@media (max-width: 768px) {
  html {
    height: auto;
    -webkit-text-size-adjust: 100%;
  }

  body {
    height: auto !important;
    min-height: 100dvh !important;
    min-height: -webkit-fill-available !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .space-share {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh !important;
    min-height: -webkit-fill-available !important;
  }

  .space-header {
    flex-shrink: 0;
  }

  .space-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .space-link-bar,
  .space-tabs {
    flex-shrink: 0;
  }

  .space-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  .space-content[data-active-tab="chat"] {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .content-panel.active {
    overflow: hidden !important;
    min-height: 0 !important;
  }

  /* Polls / Post / Admin: scroll inside panel (parent uses overflow:hidden) */
  .content-panel #polls-panel-inner,
  .content-panel #post-panel-inner,
  .content-panel #admin-panel-inner {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  #panel-chat #chat-panel-inner {
    overflow: visible !important;
    min-height: min(220px, 42vh) !important;
  }

  #panel-chat .chat-messages {
    flex: 1 1 auto !important;
    min-height: 180px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #panel-chat.content-panel.active {
    overflow: visible !important;
    min-height: min(300px, 55vh) !important;
  }

  /* Files: toolbar fixed, grid scrolls */
  #panel-files.active {
    overflow: hidden !important;
    min-height: 0 !important;
  }
  #panel-files.active .files-grid {
    min-height: 0 !important;
  }

  #video-panel-inner {
    overflow: visible !important;
  }

  /* Video tab on phones: must NOT clip the column. Info Noise / Members sit below the video; the old
     overflow:hidden here + on .space-content made that block unreachable (looked "missing"). */
  #panel-video.content-panel.active {
    overflow: visible !important;
  }
  #panel-video.content-panel.active #video-panel-inner {
    overflow: visible !important;
  }
  .space-content:has(#panel-video.content-panel.active),
  .space-content[data-active-tab="video"] {
    overflow: visible !important;
  }

  .video-container {
    max-width: 100%;
  }
}

/* =========================
   iOS glass - specific fixes
   (avoid black/white text on wrong backgrounds)
   ========================= */
body.ios-theme .space-code-display {
  color: var(--dark) !important;
  -webkit-text-fill-color: var(--dark) !important;
}
body.ios-theme .space-code-display i {
  color: var(--gray) !important;
}

body.ios-theme .space-sidebar .sidebar-header h3 {
  color: var(--lg-glass-text) !important;
}
body.ios-theme .space-sidebar .participant-name {
  color: var(--lg-glass-text) !important;
}
body.ios-theme .space-sidebar .participant-status {
  color: rgba(255,255,255,.85) !important;
}

/* Pop-out window: keep title bar solid (glass on header made white-on-white over bright video). */
body.ios-theme #floating-panels-container .floating-panel-header {
  background: linear-gradient(180deg, #4e3d8f 0%, #3d2f6b 100%) !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.28) !important;
}
body.ios-theme #floating-panels-container .floating-panel-header > span {
  color: #fff !important;
}
body.ios-theme #floating-panels-container .floating-panel-header .btn-pop-in {
  color: #fff !important;
}

/* Info Noise Index "web only" button: background is light, text must be dark. */
body.ios-theme .info-index-mode-btn:not(.active) {
  color: var(--dark) !important;
}

/* Popup close button: ensure dark icon/text on white modal background. */
body.ios-theme .modal-content .close-btn {
  color: var(--dark) !important;
}

/* Participant row: AV badges + Join (sidebar) */
.participant-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.participant-av-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(103, 58, 183, 0.12);
  color: var(--purple);
  font-size: 0.85rem;
}
.btn-participant-join-av {
  position: relative;
  z-index: 2;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  pointer-events: auto;
  background: linear-gradient(135deg, var(--purple) 0%, #5c6bc0 100%);
  color: #fff;
}
.btn-participant-join-av:hover {
  filter: brightness(1.08);
}

/* Multiview: one tile fullscreen — video only, no chrome */
.video-tile:fullscreen,
.video-tile:-webkit-full-screen {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.video-tile:fullscreen .participant-name,
.video-tile:fullscreen .video-tile-remove,
.video-tile:fullscreen .status-indicators,
.video-tile:fullscreen .mic-level-meter,
.video-tile:fullscreen .remote-video-control-overlay,
.video-tile:-webkit-full-screen .participant-name,
.video-tile:-webkit-full-screen .video-tile-remove,
.video-tile:-webkit-full-screen .status-indicators,
.video-tile:-webkit-full-screen .mic-level-meter,
.video-tile:-webkit-full-screen .remote-video-control-overlay {
  display: none !important;
}
.video-tile:fullscreen .remote-video-shell,
.video-tile:-webkit-full-screen .remote-video-shell {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
}
.video-tile:fullscreen video,
.video-tile:-webkit-full-screen video {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  object-position: center;
}

/* Space watermark — same GET /ads feed as extension (see website/js/space-watermark.js) */
/* Do not cover the whole viewport — only anchors the overlay; avoids stacking/blanking issues. */
#space-watermark-host {
  position: fixed;
  right: 0;
  bottom: 0;
  left: auto;
  top: auto;
  width: min(92vw, 420px);
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 120;
}
.space-watermark-overlay {
  position: absolute;
  right: 14px;
  bottom: 14px;
  max-width: min(92vw, 420px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.space-watermark-overlay.space-watermark-overlay--visible {
  opacity: 0.1;
}
.space-watermark-overlay.space-watermark-overlay--in-video-fs {
  z-index: 4600;
}
.space-watermark-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.space-watermark-img {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
  border-radius: 8px;
}
.space-watermark-text {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: #194025;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.35);
}
/* Admin: readable preview (same content, not dimmed) */
.space-admin-watermark-preview {
  min-height: 56px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(248, 249, 250, 0.95);
  text-align: center;
}
.space-admin-watermark-preview--empty .space-admin-watermark-placeholder {
  font-size: 0.9rem;
  color: var(--gray, #8e8e93);
}
.space-admin-watermark-preview--filled .space-admin-watermark-placeholder {
  display: none;
}
.space-admin-watermark-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.space-admin-watermark-img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  border-radius: 8px;
}
.space-admin-watermark-text {
  font-size: 14px;
  font-weight: 600;
  color: #194025;
}

#stream-status.live {
  background: rgba(46, 125, 50, 0.15) !important;
  color: #1b5e20;
  font-weight: 600;
}