.space-access-chip,
.space-tabs-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  margin: 0 4px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92);
  padding: 0 10px;
  min-height: var(--space-h-ctrl);
  max-height: var(--space-h-ctrl);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.space-tabs-settings-btn i {
  font-size: 0.82rem;
  opacity: 0.95;
  color: inherit;
  -webkit-text-fill-color: inherit;
}

.space-tabs-settings-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.space-tabs-settings-btn:hover,
.space-tabs-settings-btn:focus-visible {
  background: rgba(255, 198, 75, 0.22);
  border-color: rgba(255, 198, 75, 0.48);
  color: #fff4d6;
  -webkit-text-fill-color: #fff4d6;
}

.space-tabs-close-btn {
  flex-shrink: 0;
  margin-left: 4px;
  min-height: var(--space-h-ctrl);
  max-height: var(--space-h-ctrl);
  padding: 0 10px;
  border: 1px solid #d5d7de;
  border-radius: 8px;
  background: var(--bg);
  color: var(--dark);
  -webkit-text-fill-color: var(--dark);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.space-tabs-close-btn:hover,
.space-tabs-close-btn:focus-visible {
  border-color: rgba(198, 40, 40, 0.45);
  background: rgba(198, 40, 40, 0.08);
  color: #b71c1c;
  -webkit-text-fill-color: #b71c1c;
}

/* Top dock — Open · New · Favorites · More · Close */
.space-tabs-bar--dock5 {
  display: flex;
  align-items: stretch;
  gap: 5px;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  --space-dock-h: var(--space-code-bar-h, 30px);
  --space-dock-font: 0.68rem;
  --space-dock-icon: 0.7rem;
}

.space-tabs-dock-btn {
  flex: 0 0 auto;
  min-width: auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: var(--space-dock-h);
  max-height: var(--space-dock-h);
  padding: 0 7px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f3f8 100%);
  color: #1f2430;
  -webkit-text-fill-color: #1f2430;
  font: inherit;
  font-size: var(--space-dock-font);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 1px 2px rgba(15, 18, 28, 0.06),
    0 3px 10px rgba(129, 119, 240, 0.08);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.space-tabs-dock-btn i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--space-dock-h) - 12px);
  height: calc(var(--space-dock-h) - 12px);
  border-radius: 6px;
  font-size: var(--space-dock-icon);
  line-height: 1;
}

.space-tabs-dock-btn__label {
  flex-shrink: 0;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

.space-tabs-dock-btn--open {
  background: linear-gradient(180deg, #f7fbff 0%, #e9f2fd 100%);
  border-color: rgba(21, 101, 192, 0.2);
}
.space-tabs-dock-btn--open i {
  background: rgba(21, 101, 192, 0.14);
  color: #1565c0;
}

.space-tabs-dock-btn--new {
  background: linear-gradient(180deg, #f6fcf7 0%, #e7f5ea 100%);
  border-color: rgba(46, 125, 50, 0.2);
}
.space-tabs-dock-btn--new i {
  background: rgba(46, 125, 50, 0.14);
  color: #2e7d32;
}

.space-tabs-dock-btn--favorites {
  background: linear-gradient(180deg, #fffaf4 0%, #fff0df 100%);
  border-color: rgba(239, 108, 0, 0.22);
}
.space-tabs-dock-btn--favorites i {
  background: rgba(239, 108, 0, 0.14);
  color: #ef6c00;
}

.space-tabs-dock-btn--more {
  background: linear-gradient(180deg, #faf8ff 0%, #f0ebfc 100%);
  border-color: rgba(123, 31, 162, 0.2);
}

.space-tabs-dock-btn--close {
  background: linear-gradient(180deg, #fffafa 0%, #f9ecec 100%);
  border-color: rgba(198, 40, 40, 0.16);
}
.space-tabs-dock-btn--close i {
  background: rgba(198, 40, 40, 0.1);
  color: #c62828;
}

.space-tabs-bar .space-tabs-dock-more {
  flex: 0 0 auto;
  min-width: auto;
  position: relative;
}

.space-tabs-bar .space-tabs-dock-more > summary.space-tabs-dock-btn {
  width: auto;
  list-style: none;
}

.space-tabs-bar .space-tabs-dock-more > summary.space-tabs-dock-btn--more::after,
.space-tabs-bar .space-tabs-dock-more > summary.nav-more-summary::after {
  content: none !important;
  display: none !important;
}

.space-tabs-dock-btn--more .space-tabs-dock-btn__label {
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  flex-shrink: 0;
}

.space-tabs-bar .space-tabs-dock-more > summary.space-tabs-dock-btn::-webkit-details-marker {
  display: none;
}

.space-tabs-bar .space-tabs-dock-more > summary.space-tabs-dock-btn::marker {
  content: "";
  font-size: 0;
}

.space-tabs-dock-btn:hover,
.space-tabs-dock-btn:focus-visible {
  transform: translateY(-1px);
}

.space-tabs-dock-btn:active {
  transform: translateY(0);
}

.space-tabs-dock-btn--open:hover,
.space-tabs-dock-btn--open:focus-visible {
  background: linear-gradient(180deg, #dce9f8 0%, #b8d4f0 100%);
  border-color: rgba(13, 71, 161, 0.5);
  color: #0d47a1;
  -webkit-text-fill-color: #0d47a1;
  box-shadow:
    0 2px 4px rgba(21, 101, 192, 0.16),
    0 6px 14px rgba(21, 101, 192, 0.22);
}
.space-tabs-dock-btn--open:hover i,
.space-tabs-dock-btn--open:focus-visible i {
  background: rgba(13, 71, 161, 0.22);
  color: #0d47a1;
}

.space-tabs-dock-btn--new:hover,
.space-tabs-dock-btn--new:focus-visible {
  background: linear-gradient(180deg, #dff0e3 0%, #b9dcc2 100%);
  border-color: rgba(27, 94, 32, 0.48);
  color: #1b5e20;
  -webkit-text-fill-color: #1b5e20;
  box-shadow:
    0 2px 4px rgba(46, 125, 50, 0.14),
    0 6px 14px rgba(46, 125, 50, 0.2);
}
.space-tabs-dock-btn--new:hover i,
.space-tabs-dock-btn--new:focus-visible i {
  background: rgba(27, 94, 32, 0.2);
  color: #1b5e20;
}

.space-tabs-dock-btn--favorites:hover,
.space-tabs-dock-btn--favorites:focus-visible {
  background: linear-gradient(180deg, #ffe8cc 0%, #ffd4a3 100%);
  border-color: rgba(230, 81, 0, 0.5);
  color: #e65100;
  -webkit-text-fill-color: #e65100;
  box-shadow:
    0 2px 4px rgba(239, 108, 0, 0.14),
    0 6px 14px rgba(239, 108, 0, 0.2);
}
.space-tabs-dock-btn--favorites:hover i,
.space-tabs-dock-btn--favorites:focus-visible i {
  background: rgba(230, 81, 0, 0.2);
  color: #e65100;
}

.space-tabs-dock-btn--more:hover,
.space-tabs-dock-btn--more:focus-visible,
.space-tabs-bar .nav-dropdown.space-more[open] > summary.space-tabs-dock-btn--more {
  background: linear-gradient(180deg, #ebe2fa 0%, #d4c4f2 100%);
  border-color: rgba(106, 27, 154, 0.48);
  color: #6a1b9a;
  -webkit-text-fill-color: #6a1b9a;
  box-shadow:
    0 2px 4px rgba(123, 31, 162, 0.14),
    0 6px 14px rgba(123, 31, 162, 0.2);
}
.space-tabs-dock-btn--more:hover .space-tabs-dock-btn__label,
.space-tabs-dock-btn--more:focus-visible .space-tabs-dock-btn__label,
.space-tabs-bar .nav-dropdown.space-more[open] > summary.space-tabs-dock-btn--more .space-tabs-dock-btn__label {
  color: #6a1b9a;
  -webkit-text-fill-color: #6a1b9a;
}

.space-tabs-dock-btn--close:hover,
.space-tabs-dock-btn--close:focus-visible {
  border-color: rgba(198, 40, 40, 0.42);
  background: linear-gradient(180deg, #fff5f5 0%, #fde8e8 100%);
  color: #b71c1c;
  -webkit-text-fill-color: #b71c1c;
  box-shadow:
    0 2px 4px rgba(198, 40, 40, 0.1),
    0 6px 14px rgba(198, 40, 40, 0.12);
}
.space-tabs-dock-btn--close:hover i,
.space-tabs-dock-btn--close:focus-visible i {
  background: rgba(183, 28, 28, 0.18);
  color: #b71c1c;
}

.space-tabs-dock-btn:active {
  box-shadow: 0 1px 2px rgba(15, 18, 28, 0.08);
}

.space-more-panel .space-tabs-important-chip:not(.hidden),
.space-more-panel .space-tabs-participants-chip:not(.hidden),
.space-more-panel .space-tabs-viewer-btn:not(.hidden),
.space-more-panel .space-tabs-share-btn:not(.hidden),
.space-more-panel .space-tabs-settings-btn:not(.hidden),
.space-more-panel .space-tabs-pair-btn:not(.hidden) {
  display: flex !important;
  width: 100%;
  height: auto;
  min-height: 40px;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
}

.space-more-panel .space-tabs-participants-chip {
  border: 1px solid rgba(129, 119, 240, 0.22);
  background: rgba(129, 119, 240, 0.08);
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
}

body.ios-theme.space-shell .space-tabs-dock-btn,
body.ios-theme:has(.space-share) .space-tabs-dock-btn {
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

body.ios-theme.space-shell .space-tabs-dock-btn--open,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--open {
  background: linear-gradient(180deg, #f7fbff 0%, #e9f2fd 100%) !important;
}

body.ios-theme.space-shell .space-tabs-dock-btn--new,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--new {
  background: linear-gradient(180deg, #f6fcf7 0%, #e7f5ea 100%) !important;
}

body.ios-theme.space-shell .space-tabs-dock-btn--favorites,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--favorites {
  background: linear-gradient(180deg, #fffaf4 0%, #fff0df 100%) !important;
}

body.ios-theme.space-shell .space-tabs-dock-btn--more,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--more {
  background: linear-gradient(180deg, #faf8ff 0%, #f0ebfc 100%) !important;
}

body.ios-theme.space-shell .space-tabs-dock-btn--close,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--close {
  background: linear-gradient(180deg, #fffafa 0%, #f9ecec 100%) !important;
}

body.ios-theme.space-shell .space-tabs-dock-btn--open:hover,
body.ios-theme.space-shell .space-tabs-dock-btn--open:focus-visible,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--open:hover,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--open:focus-visible {
  background: linear-gradient(180deg, #dce9f8 0%, #b8d4f0 100%) !important;
  border-color: rgba(13, 71, 161, 0.5) !important;
  color: #0d47a1 !important;
  -webkit-text-fill-color: #0d47a1 !important;
}

body.ios-theme.space-shell .space-tabs-dock-btn--new:hover,
body.ios-theme.space-shell .space-tabs-dock-btn--new:focus-visible,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--new:hover,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--new:focus-visible {
  background: linear-gradient(180deg, #dff0e3 0%, #b9dcc2 100%) !important;
  border-color: rgba(27, 94, 32, 0.48) !important;
  color: #1b5e20 !important;
  -webkit-text-fill-color: #1b5e20 !important;
}

body.ios-theme.space-shell .space-tabs-dock-btn--favorites:hover,
body.ios-theme.space-shell .space-tabs-dock-btn--favorites:focus-visible,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--favorites:hover,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--favorites:focus-visible {
  background: linear-gradient(180deg, #ffe8cc 0%, #ffd4a3 100%) !important;
  border-color: rgba(230, 81, 0, 0.5) !important;
  color: #e65100 !important;
  -webkit-text-fill-color: #e65100 !important;
}

body.ios-theme.space-shell .space-tabs-dock-btn--more:hover,
body.ios-theme.space-shell .space-tabs-dock-btn--more:focus-visible,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--more:hover,
body.ios-theme:has(.space-share) .space-tabs-dock-btn--more:focus-visible,
body.ios-theme.space-shell .space-tabs-bar .nav-dropdown.space-more[open] > summary.space-tabs-dock-btn--more,
body.ios-theme:has(.space-share) .space-tabs-bar .nav-dropdown.space-more[open] > summary.space-tabs-dock-btn--more {
  background: linear-gradient(180deg, #ebe2fa 0%, #d4c4f2 100%) !important;
  border-color: rgba(106, 27, 154, 0.48) !important;
  color: #6a1b9a !important;
  -webkit-text-fill-color: #6a1b9a !important;
}

.space-tabs-dock-btn.space-tabs-close-btn {
  min-height: var(--space-dock-h, 30px);
  max-height: var(--space-dock-h, 30px);
  margin-left: 0;
  padding: 0 7px;
  font-size: var(--space-dock-font, 0.68rem);
}

body.ios-theme.space-shell .space-tabs-close-btn,
body.ios-theme:has(.space-share) .space-tabs-close-btn {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

body.ios-theme.space-shell .space-tabs-close-btn:hover,
body.ios-theme:has(.space-share) .space-tabs-close-btn:hover {
  border-color: rgba(198, 40, 40, 0.4) !important;
  background: rgba(198, 40, 40, 0.1) !important;
  color: #b71c1c !important;
  -webkit-text-fill-color: #b71c1c !important;
}

.space-access-chip.is-limit-exhausted {
  border-color: rgba(198, 40, 40, 0.55) !important;
  background: rgba(198, 40, 40, 0.12) !important;
  color: #b71c1c !important;
  -webkit-text-fill-color: #b71c1c !important;
}

.space-limit-exhausted-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 12px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 198, 75, 0.55);
  border-radius: 10px;
  background: rgba(255, 198, 75, 0.14);
  color: #2b2240;
  font-size: 0.82rem;
  line-height: 1.4;
}

.space-limit-exhausted-banner.hidden {
  display: none !important;
}

.space-limit-exhausted-banner i {
  margin-top: 2px;
  color: #c62828;
}

.space-limit-exhausted-banner__text {
  margin: 0;
  flex: 1;
}

.space-limit-exhausted-modal .space-limit-exhausted-message {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #444;
}

.space-limit-exhausted-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.space-limit-exhausted-btn {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.space-limit-exhausted-btn--primary {
  border: 2px solid rgba(255, 198, 75, 0.85);
  background: rgba(255, 198, 75, 0.2);
  color: #1a1528;
}

.space-limit-exhausted-btn--primary:hover {
  background: rgba(255, 198, 75, 0.35);
  border-color: #ffc64b;
}

.space-limit-exhausted-btn--settings {
  border: 1px solid #d4cdf4;
  background: #f8f6ff;
  color: #2b2240;
}

#space-limit-exhausted-settings.hidden {
  display: none !important;
}

.space-limit-exhausted-btn--settings:hover {
  border-color: #a693ef;
  background: #ece7ff;
}

.space-access-current {
  margin: 0 0 10px;
  font-size: 13px;
  color: #555;
}

.space-access-mode-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.space-access-mode {
  border: 1px solid #d4cdf4;
  border-radius: 10px;
  background: #f8f6ff;
  color: #2b2240;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.space-access-mode.is-on {
  border-color: #a693ef;
  background: #ece7ff;
}

.space-access-panel {
  border: 1px solid #ece9f7;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background: #faf9ff;
}

.space-access-label {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #5f5674;
}

.space-access-panel input,
#space-access-link {
  width: 100%;
  padding: 10px 11px;
  border-radius: 8px;
  border: 1px solid #d6d0ea;
  font-size: 14px;
  margin-bottom: 8px;
}

#space-access-link {
  margin-bottom: 10px;
}

.space-access-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.space-access-action {
  border: 1px solid #d4cdf4;
  border-radius: 10px;
  background: #ffffff;
  color: #2b2240;
  padding: 8px 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.space-access-action.is-on {
  border-color: #a693ef;
  background: #f1eeff;
}

.space-access-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.space-access-note {
  margin: 9px 0 0;
  font-size: 12px;
  color: #6a6381;
}

/* Unified Create Space wizard (connection mode + quick pick) — centered modal */
.grigsi-wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  overflow: hidden;
  overscroll-behavior: contain;
  pointer-events: auto;
  background: rgba(18, 16, 32, 0.72);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  -webkit-tap-highlight-color: transparent;
}

body.grigsi-wizard-open {
  overflow: hidden !important;
}

.grigsi-wizard-overlay.hidden,
.grigsi-wizard-overlay[hidden] {
  display: none !important;
}

body.grigsi-wizard-open .space-share {
  visibility: hidden;
}

.grigsi-wizard-panel {
  position: relative;
  width: min(100%, 420px);
  margin: 0;
  min-height: 0;
  max-height: min(
    86vh,
    calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)) - 24px)
  );
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px 18px 18px;
  border-radius: 20px;
  border: 1px solid rgba(166, 147, 239, 0.45);
  background: #2a1d45;
  color: #f8f6ff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.38);
  pointer-events: auto;
  touch-action: manipulation;
}

.grigsi-wizard-overlay .grigsi-wizard-mode,
.grigsi-wizard-overlay .grigsi-wizard-pick,
.grigsi-wizard-overlay .grigsi-wizard-continue,
.grigsi-wizard-overlay .grigsi-wizard-skip {
  pointer-events: auto;
}

.grigsi-wizard-kicker {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #c4b5fd;
  text-align: center;
}

.grigsi-wizard-title {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -2px 0 6px;
  padding-top: 2px;
  padding-bottom: 6px;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.25;
  color: #f8f6ff;
  text-align: center;
  background: #2a1d45;
  box-shadow: 0 1px 0 rgba(166, 147, 239, 0.22);
}

.grigsi-wizard-meta {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(248, 246, 255, 0.84);
  text-align: center;
}

.grigsi-wizard-code {
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  color: rgba(248, 246, 255, 0.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  word-break: break-all;
}

.grigsi-wizard-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.grigsi-wizard-mode {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-height: 58px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(196, 181, 253, 0.3);
  background: rgba(0, 0, 0, 0.15);
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.grigsi-wizard-mode strong {
  font-size: 0.84rem;
}

.grigsi-wizard-mode span {
  font-size: 0.72rem;
  color: rgba(248, 246, 255, 0.72) !important;
  -webkit-text-fill-color: rgba(248, 246, 255, 0.72) !important;
}

.grigsi-wizard-mode.is-on {
  border-color: rgba(255, 198, 75, 0.65);
  background: rgba(255, 198, 75, 0.16);
}

.grigsi-wizard-mode:hover {
  border-color: rgba(196, 181, 253, 0.55);
  background: rgba(166, 147, 239, 0.22);
}

.grigsi-wizard-mode.is-on:hover {
  border-color: #ffc64b;
  background: rgba(255, 198, 75, 0.26);
}

.grigsi-wizard-mode:active {
  transform: scale(0.98);
}

.grigsi-wizard-block {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(196, 181, 253, 0.24);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
}

.grigsi-wizard-block.hidden,
.grigsi-wizard-block[hidden] {
  display: none !important;
}

.grigsi-wizard-block-meta {
  margin: 0 0 8px;
  font-size: 0.76rem;
  line-height: 1.35;
  color: #c4b5fd;
}

.grigsi-wizard-choice-grid,
.grigsi-wizard-pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grigsi-wizard-choice {
  border-radius: 10px;
  border: 1px solid rgba(196, 181, 253, 0.28);
  background: rgba(0, 0, 0, 0.18);
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 9px 8px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.grigsi-wizard-choice.is-on {
  border-color: rgba(255, 198, 75, 0.6);
  background: rgba(255, 198, 75, 0.42);
  color: #3d2860 !important;
  -webkit-text-fill-color: #3d2860 !important;
}

.grigsi-wizard-choice:hover {
  border-color: rgba(196, 181, 253, 0.5);
  background: rgba(166, 147, 239, 0.28);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.grigsi-wizard-choice.is-on:hover {
  border-color: #ffc64b;
  background: rgba(255, 198, 75, 0.55);
  color: #2a1d45 !important;
  -webkit-text-fill-color: #2a1d45 !important;
}

.grigsi-wizard-choice:active {
  transform: scale(0.98);
}

.grigsi-wizard-field {
  display: block;
  margin-bottom: 8px;
}

.grigsi-wizard-field:last-child {
  margin-bottom: 0;
}

.grigsi-wizard-field span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(248, 246, 255, 0.78);
}

.grigsi-wizard-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(196, 181, 253, 0.35);
  background: rgba(0, 0, 0, 0.22);
  background-color: rgba(0, 0, 0, 0.22);
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
  caret-color: #f8f6ff;
  font: inherit;
  font-size: 0.84rem;
  color-scheme: dark;
}

.grigsi-wizard-panel input:-webkit-autofill,
.grigsi-wizard-panel input:-webkit-autofill:hover,
.grigsi-wizard-panel input:-webkit-autofill:focus,
body.ios-theme .grigsi-wizard-panel input:-webkit-autofill,
body.ios-theme .grigsi-wizard-panel input:-webkit-autofill:hover,
body.ios-theme .grigsi-wizard-panel input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(20, 14, 36, 0.95) inset !important;
  box-shadow: 0 0 0 1000px rgba(20, 14, 36, 0.95) inset !important;
  -webkit-text-fill-color: #f8f6ff !important;
  caret-color: #f8f6ff;
}

.grigsi-wizard-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 104px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(196, 181, 253, 0.28);
  background: rgba(0, 0, 0, 0.18);
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}

.grigsi-wizard-pick:hover {
  border-color: rgba(196, 181, 253, 0.55);
  background: rgba(166, 147, 239, 0.28);
}

.grigsi-wizard-pick:active {
  transform: scale(0.97);
}

.grigsi-wizard-pick-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(166, 147, 239, 0.22);
  color: #c4b5fd;
  font-size: 1.2rem;
}

.grigsi-wizard-pick-label {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.grigsi-wizard-continue {
  width: 100%;
  margin-top: 12px;
  border: 2px solid rgba(255, 198, 75, 0.75);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  color: #f8f6ff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 12px 14px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.grigsi-wizard-continue:hover {
  background: rgba(255, 198, 75, 0.14);
  border-color: #ffc64b;
  color: #ffc64b;
}

.grigsi-wizard-continue:active {
  transform: scale(0.98);
  background: rgba(255, 198, 75, 0.22);
}

.grigsi-wizard-skip {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(196, 181, 253, 0.28);
  background: rgba(0, 0, 0, 0.12);
  color: rgba(248, 246, 255, 0.82) !important;
  -webkit-text-fill-color: rgba(248, 246, 255, 0.82) !important;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.grigsi-wizard-skip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(196, 181, 253, 0.5);
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
}

.grigsi-wizard-skip:active {
  transform: scale(0.98);
}

#access-settings-modal .modal-content {
  background: #2a1d45;
  border: 1px solid rgba(166, 147, 239, 0.45);
}

#access-settings-modal h2,
#access-settings-modal .space-access-current,
#access-settings-modal .space-access-label,
#access-settings-modal .space-access-note {
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
}

#access-settings-modal .space-access-current {
  color: rgba(248, 246, 255, 0.86) !important;
  -webkit-text-fill-color: rgba(248, 246, 255, 0.86) !important;
}

#access-settings-modal .space-access-mode-list {
  background: transparent;
}

#access-settings-modal .space-access-mode,
#access-settings-modal .space-access-action {
  background: rgba(255, 255, 255, 0.08);
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
  border-color: rgba(166, 147, 239, 0.45);
}

#access-settings-modal .space-access-mode.is-on,
#access-settings-modal .space-access-action.is-on {
  background: rgba(255, 198, 75, 0.18);
  color: #ffc64b !important;
  -webkit-text-fill-color: #ffc64b !important;
  border-color: rgba(255, 198, 75, 0.58);
}

#access-settings-modal .space-access-panel {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(166, 147, 239, 0.35);
}

#access-settings-modal .space-access-panel input,
#access-settings-modal #space-access-link {
  background: rgba(0, 0, 0, 0.24);
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
  border-color: rgba(166, 147, 239, 0.35);
}

#access-settings-modal .space-access-panel input::placeholder,
#access-settings-modal #space-access-link::placeholder {
  color: rgba(248, 246, 255, 0.52) !important;
  -webkit-text-fill-color: rgba(248, 246, 255, 0.52) !important;
}

#access-settings-modal .close-btn,
body.ios-theme #access-settings-modal .close-btn,
body.ios-theme.space-shell #access-settings-modal .close-btn,
body.ios-theme:has(.space-share) #access-settings-modal .close-btn {
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
  opacity: 0.95;
}

#access-settings-modal .close-btn:hover {
  color: #c4b5fd !important;
  -webkit-text-fill-color: #c4b5fd !important;
  opacity: 1;
}

#access-settings-modal #btn-access-copy-link,
#access-settings-modal .space-access-actions .btn-reset-settings {
  border: 1px solid rgba(196, 181, 253, 0.4) !important;
  border-radius: 10px;
  background: rgba(88, 62, 140, 0.45) !important;
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
  font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

#access-settings-modal #btn-access-copy-link:hover,
#access-settings-modal .space-access-actions .btn-reset-settings:hover,
body.ios-theme #access-settings-modal #btn-access-copy-link:hover,
body.ios-theme #access-settings-modal .space-access-actions .btn-reset-settings:hover {
  background: rgba(196, 181, 253, 0.62) !important;
  border-color: rgba(196, 181, 253, 0.75) !important;
  color: #3d2860 !important;
  -webkit-text-fill-color: #3d2860 !important;
}

#access-settings-modal #btn-access-apply,
#access-settings-modal .space-access-actions .btn-create {
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
}

#access-settings-modal .important-modal-cancel-btn,
#access-settings-modal #btn-access-revoke-current {
  color: rgba(248, 246, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(248, 246, 255, 0.88) !important;
  border-color: rgba(166, 147, 239, 0.4) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}
:root {
  --primary: #A693EF;
  --success: #A693EF;
  --warning: #FFC64B;
  --danger: #1a1a24;
  --neutral: rgba(26, 26, 36, 0.62);
  --surface: #FFC64B;
  --purple: #A693EF;
  --green: #A693EF;
  --red: #1a1a24;
  --gray: rgba(26, 26, 36, 0.62);
  --yellow: #FFC64B;
  --blue: #A693EF;
  --bg: #ffffff;
  --card-bg: #ffffff;
  --text: #1a1a24;
  --dark: #1a1a24;
  --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 — masterpiece backdrop (images via space-art-backdrop.js) */
  --space-shell-bg-top: #0c1228;
  --space-shell-bg-bottom: #060a18;
  --space-cosmos-top: #0e1430;
  --space-cosmos-deep: #050818;
  --space-cosmos-mid: #08102a;
  --space-cosmos-glow: #ffc64b;
  --space-atmosphere-base: linear-gradient(180deg, rgba(8, 14, 36, 0.55) 0%, rgba(6, 10, 24, 0.72) 100%);
  --space-shell-bg: var(--space-shell-bg-bottom);
  --space-atmosphere: var(--space-atmosphere-base);
  --space-shell-panel: rgba(22, 18, 32, 0.88);
  --space-shell-tabs: rgba(18, 14, 28, 0.92);
  --space-shell-chat-well: rgba(248, 246, 255, 0.9);
  --space-art-fade-ms: 2200ms;
}

/* 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);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  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: min(420px, calc(100vw - 32px));
  box-sizing: border-box;
}
.grigsi-toast__text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-wrap: break-word;
}
.grigsi-toast__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -2px -2px -2px 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.grigsi-toast__close:hover,
.grigsi-toast__close:focus-visible {
  background: rgba(0, 0, 0, 0.24);
  outline: none;
}
.grigsi-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.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 {
    max-width: calc(100vw - 32px);
    padding: 12px 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);
}
body.ios-theme:has(.space-setup) {
  background: linear-gradient(180deg, var(--primary) 0%, #8B7BD4 100%) !important;
  color: var(--text) !important;
}

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));
}

.space-setup .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: #5c5678;
  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%, #A693EF 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;
  }
}

/* Setup / join / quick with site top bar — scrollable on phones */
@media (max-width: 768px) {
  body:has(.grigsi-top-bar) .space-setup {
    min-height: auto;
    justify-content: flex-start;
    align-items: stretch;
    padding: 10px 12px max(28px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  body:has(.grigsi-top-bar):has(.space-setup) {
    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;
  }

  body:has(.grigsi-top-bar) .space-setup .setup-card {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    border-radius: 20px;
    padding: 22px 18px;
  }

  body:has(.grigsi-top-bar) .space-setup .setup-card h1 {
    font-size: 1.45rem;
  }

  body:has(.grigsi-top-bar) .space-setup .subtitle {
    font-size: 0.92rem;
    margin-bottom: 22px;
  }

  body:has(.grigsi-top-bar) .space-setup .type-option {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  body:has(.grigsi-top-bar) .space-setup .type-option .type-info {
    width: 100%;
  }

  body:has(.grigsi-top-bar) .space-setup .type-badge {
    width: auto;
    margin-top: 0;
    align-self: flex-start;
  }

  body:has(.grigsi-top-bar) .space-setup .footer-note {
    padding: 0 4px;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  body:has(.grigsi-top-bar) .space-setup .gsi-entry-hint {
    font-size: 0.84rem;
    line-height: 1.45;
    word-break: break-word;
  }

  body:has(.grigsi-top-bar) .modal {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    align-items: flex-end;
  }

  body:has(.grigsi-top-bar) .modal-content {
    max-height: min(92dvh, calc(100vh - 24px));
    border-radius: 20px 20px 0 0;
    padding: 24px 18px max(20px, env(safe-area-inset-bottom));
  }

  body:has(.grigsi-top-bar) .org-tabs {
    flex-direction: column;
    gap: 8px;
  }

  body:has(.grigsi-top-bar) .org-tab {
    flex: none;
    width: 100%;
    min-height: 44px;
    text-align: center;
  }
}

/* ======================= */
/* SPACE CHAT ART BACKDROP */
/* ======================= */

.space-chat-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--space-cosmos-deep);
  transition:
    filter 0.55s ease,
    transform 0.55s ease;
}

.space-chat-art--split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.space-chat-art__half {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  overflow: hidden;
}

.space-chat-art__divider {
  flex: 0 0 2px;
  align-self: stretch;
  background: linear-gradient(
    180deg,
    rgba(255, 198, 75, 0.05) 0%,
    rgba(129, 119, 240, 0.55) 42%,
    rgba(201, 146, 0, 0.65) 58%,
    rgba(255, 198, 75, 0.05) 100%
  );
  box-shadow: 0 0 12px rgba(129, 119, 240, 0.22);
}

.space-chat-art__half--history {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 90% 70% at 72% 28%, rgba(255, 198, 75, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 80% 55% at 18% 78%, rgba(129, 119, 240, 0.1) 0%, transparent 62%),
    linear-gradient(155deg, #f6f0df 0%, #efe4c8 38%, #e8d9b4 100%);
  opacity: 0;
  transition: opacity var(--space-art-fade-ms, 2200ms) ease-in-out;
}

.space-chat-art__half--history.is-active {
  opacity: 1;
}

.space-chat-art:not(.is-history-active) .space-chat-art__divider {
  opacity: 0.35;
}

.space-chat-art.is-history-active .space-chat-art__half--art {
  flex-basis: 50%;
}

.space-chat-art:not(.is-history-active) .space-chat-art__half--art {
  flex: 1 1 100%;
}

.space-chat-art:not(.is-history-active) .space-chat-art__half--history,
.space-chat-art:not(.is-history-active) .space-chat-art__divider {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
}

.space-chat-history__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(42, 46, 54, 0.06) 55%,
    rgba(42, 46, 54, 0.12) 100%
  );
  pointer-events: none;
}

.space-chat-history__body {
  position: relative;
  z-index: 1;
  max-width: 92%;
  padding: 18px 16px 20px;
  text-align: left;
  color: #3d3528;
}

.space-chat-history__headline {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b5a2e;
}

.space-chat-history__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
  color: #2a2418;
}

.space-chat-history__meta {
  margin: 12px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(61, 53, 40, 0.72);
  font-style: italic;
}

.space-chat-art__slide.hidden {
  display: none !important;
}

.space-chat-art__slide {
  position: absolute;
  inset: 0;
  background-color: #0a0810;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--space-art-fade-ms, 2200ms) ease-in-out;
  will-change: opacity;
}

.space-chat-art__slide.is-active {
  opacity: 1;
}

.space-chat-art__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.space-chat-art.is-logo-mode .space-chat-art__half--art {
  background:
    radial-gradient(ellipse 85% 55% at 50% -8%, rgba(56, 72, 140, 0.42) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 92% 78%, rgba(40, 60, 110, 0.28) 0%, transparent 52%),
    radial-gradient(ellipse 50% 40% at 8% 88%, rgba(48, 56, 108, 0.22) 0%, transparent 48%),
    linear-gradient(180deg, var(--space-cosmos-top) 0%, var(--space-cosmos-mid) 42%, var(--space-cosmos-deep) 100%);
}

.space-chat-art.is-logo-mode .space-chat-art__half--art::before,
body.space-dock-hero-active #panel-chat #chat-panel-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 5% 8%, rgba(255, 255, 255, 0.82), transparent),
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 18% 41%, rgba(255, 248, 230, 0.6), transparent),
    radial-gradient(1px 1px at 24% 67%, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(1px 1px at 31% 15%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 37% 53%, rgba(255, 255, 255, 0.72), transparent),
    radial-gradient(1px 1px at 43% 84%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(1px 1px at 49% 29%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 55% 61%, rgba(255, 240, 210, 0.58), transparent),
    radial-gradient(1px 1px at 61% 11%, rgba(255, 255, 255, 0.48), transparent),
    radial-gradient(1px 1px at 67% 38%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 73% 72%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 79% 19%, rgba(255, 255, 255, 0.52), transparent),
    radial-gradient(1px 1px at 85% 47%, rgba(255, 255, 255, 0.78), transparent),
    radial-gradient(1px 1px at 91% 88%, rgba(255, 255, 255, 0.36), transparent),
    radial-gradient(1px 1px at 97% 33%, rgba(255, 255, 255, 0.44), transparent),
    radial-gradient(1px 1px at 8% 58%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 22% 76%, rgba(255, 255, 255, 0.62), transparent),
    radial-gradient(1px 1px at 52% 8%, rgba(255, 255, 255, 0.46), transparent),
    radial-gradient(1px 1px at 64% 56%, rgba(255, 255, 255, 0.56), transparent),
    radial-gradient(1px 1px at 77% 64%, rgba(255, 255, 255, 0.68), transparent),
    radial-gradient(1.5px 1.5px at 26% 18%, rgba(255, 248, 220, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 62% 42%, rgba(255, 255, 255, 0.82), transparent),
    radial-gradient(2px 2px at 20% 62%, rgba(255, 255, 255, 0.92), transparent),
    radial-gradient(2px 2px at 54% 24%, rgba(255, 252, 240, 0.85), transparent),
    radial-gradient(2.5px 2.5px at 36% 32%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(2.5px 2.5px at 82% 36%, rgba(255, 248, 230, 0.88), transparent),
    radial-gradient(3px 3px at 58% 68%, rgba(255, 255, 255, 0.5), transparent);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: space-cosmos-twinkle 9s ease-in-out infinite alternate;
}

.space-chat-art.is-logo-mode .space-chat-art__veil {
  background: linear-gradient(
    180deg,
    rgba(6, 10, 24, 0.04) 0%,
    rgba(6, 10, 24, 0.1) 55%,
    rgba(6, 10, 24, 0.16) 100%
  );
}

.space-chat-art__slide.is-logo-fallback {
  background-image: none !important;
  background-color: transparent;
  overflow: visible;
}

.space-chat-art__slide.is-logo-fallback::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(46vw, 248px);
  height: min(46vw, 248px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  filter: blur(18px) saturate(0.48) brightness(1.06);
  background: radial-gradient(
    circle at 34% 26%,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 246, 212, 0.5) 16%,
    rgba(255, 198, 75, 0.34) 40%,
    rgba(245, 166, 35, 0.22) 68%,
    rgba(212, 136, 6, 0.14) 100%
  );
  box-shadow:
    0 0 24px rgba(255, 198, 75, 0.14),
    0 10px 28px rgba(0, 0, 0, 0.14);
  animation: space-sun-breathe-muted 4.8s ease-in-out infinite;
}

.space-chat-art__slide.is-logo-fallback::after {
  content: "G";
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(4.2rem, 22vw, 7.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(26, 21, 40, 0.32);
  -webkit-text-fill-color: rgba(26, 21, 40, 0.32);
  text-shadow: none;
  filter: blur(4px);
  opacity: 0.55;
}

@keyframes space-cosmos-twinkle {
  0% { opacity: 0.42; }
  100% { opacity: 0.78; }
}

@keyframes space-sun-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, calc(-50% - 6px)) scale(1.02); }
}

@keyframes space-sun-breathe-muted {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.36;
  }
  50% {
    transform: translate(-50%, calc(-50% - 4px)) scale(1.012);
    opacity: 0.46;
  }
}

@media (prefers-reduced-motion: reduce) {
  .space-chat-art.is-logo-mode .space-chat-art__half--art::before,
  body.space-dock-hero-active #panel-chat #chat-panel-inner::before {
    animation: none;
    opacity: 0.58;
  }

  .space-chat-art__slide.is-logo-fallback::before,
  body.space-dock-hero-active #panel-chat #chat-panel-inner::after {
    animation: none;
  }
}

@media (max-width: 720px) {
  .space-chat-art--split.is-history-active {
    flex-direction: column;
  }

  .space-chat-art--split.is-history-active .space-chat-art__half--art,
  .space-chat-art--split.is-history-active .space-chat-art__half--history {
    flex: 1 1 50%;
    min-height: 0;
  }

  .space-chat-art--split.is-history-active .space-chat-art__divider {
    flex: 0 0 2px;
    width: 100%;
    height: 2px;
    background: linear-gradient(
      90deg,
      rgba(255, 198, 75, 0.05) 0%,
      rgba(129, 119, 240, 0.55) 42%,
      rgba(201, 146, 0, 0.65) 58%,
      rgba(255, 198, 75, 0.05) 100%
    );
  }

  .space-chat-history__body {
    padding: 12px 14px 14px;
  }

  .space-chat-history__lead {
    font-size: 12px;
  }
}

.space-chat-art__veil {
  position: absolute;
  inset: 0;
  /* Light veil — full painting stays visible (contain); readability via bubbles */
  background:
    linear-gradient(180deg, rgba(8, 6, 14, 0.06) 0%, rgba(8, 6, 14, 0.14) 55%, rgba(8, 6, 14, 0.22) 100%);
}

#panel-chat #chat-panel-inner {
  --space-art-caption-clearance: 52px;
}

#panel-chat #chat-panel-inner:has(.space-art-caption.is-expanded) {
  --space-art-caption-clearance: min(42vh, calc(12em + 58px));
}

body.space-gi-painting-unavailable {
  --space-art-caption-clearance: 0px;
}

body.space-gi-painting-unavailable #space-art-caption.space-art-caption,
body.space-gi-painting-unavailable #space-gi-controls,
body.space-gi-painting-unavailable #space-gi-info-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* GI toggle — portaled to <body>, fixed bottom-left (above composer dock) */
#space-art-caption.space-art-caption,
body.space-gi-caption-portaled #space-art-caption.space-art-caption,
body.space-gi-chrome-portaled #space-art-caption.space-art-caption {
  position: fixed !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  right: auto !important;
  top: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10070 !important;
  display: flex !important;
  align-items: flex-end;
  gap: 8px;
  max-width: min(380px, calc(100% - 20px));
  pointer-events: none;
  visibility: visible !important;
  opacity: 1 !important;
}

#space-art-caption .space-art-caption__toggle {
  pointer-events: auto;
}

body.space-bottom-dock-active:not(.space-art-gi-lock) #space-art-caption.space-art-caption,
body.space-gi-caption-portaled.space-bottom-dock-active:not(.space-art-gi-lock) #space-art-caption.space-art-caption {
  bottom: calc(var(--space-bottom-dock-height, 112px) + var(--space-channel-overlay-height, 40px) + 16px) !important;
}

.space-art-caption__toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(129, 119, 240, 0.45);
  background: rgba(255, 255, 255, 0.94);
  color: var(--purple, #8177f0);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(45, 35, 90, 0.14);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.space-art-caption__gi {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.space-art-caption__g {
  color: var(--purple, #8177f0);
}

.space-art-caption__i {
  color: #c99200;
}

.space-art-caption__toggle:hover,
.space-art-caption__toggle:focus-visible {
  border-color: rgba(255, 198, 75, 0.75);
  background: rgba(255, 198, 75, 0.18);
  color: #5c4bb5;
  outline: none;
}

.space-art-caption__toggle:active {
  transform: scale(0.96);
}

.space-art-caption.is-expanded .space-art-caption__toggle,
.space-art-caption__toggle[aria-expanded="true"] {
  border-color: rgba(255, 198, 75, 0.85);
  background: linear-gradient(135deg, rgba(129, 119, 240, 0.16), rgba(255, 198, 75, 0.22));
  color: #4a3f9f;
  box-shadow: 0 0 0 2px rgba(129, 119, 240, 0.18);
}

.space-art-caption__body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(129, 119, 240, 0.35);
  background: rgba(255, 255, 255, 0.96);
  color: var(--dark, #2a2e36);
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 28px rgba(45, 35, 90, 0.16);
}

.space-art-caption__body[hidden] {
  display: none !important;
}

.space-art-caption.is-expanded .space-art-caption__body {
  max-height: min(40vh, 12em);
  overflow-y: auto;
}

.space-art-caption__lead {
  margin: 0;
  font-weight: 500;
}

.space-art-caption__meta {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--gray, #6b7280);
}

.space-art-caption:not(.is-expanded) .space-art-caption__meta {
  display: none;
}

@media (max-width: 520px) {
  #space-art-caption.space-art-caption,
  #panel-chat #chat-panel-inner .space-art-caption {
    left: max(8px, env(safe-area-inset-left));
    right: auto;
    max-width: min(380px, calc(100% - 16px));
  }
}

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

.space-share {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: 0;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Space: site nav stays visible; main area fills viewport below sticky header. */
body:has(.space-share) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: -webkit-fill-available;
  background-color: var(--space-shell-bg-bottom);
}
/* Site nav: same size/colors as other ios-theme hubs (space.css must not leak into .grigsi-top-bar .logo) */
body.ios-theme:has(.space-share) > header.grigsi-top-bar,
body.ios-theme.space-shell > header.grigsi-top-bar {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 9999;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: 6px 14px;
  padding-top: max(6px, env(safe-area-inset-top));
  line-height: 1.2;
  min-height: 0;
  background: var(--nav-matte-bg) !important;
  border-bottom: 1px solid var(--nav-matte-border) !important;
  box-shadow: var(--nav-matte-shadow) !important;
  backdrop-filter: var(--nav-matte-backdrop) !important;
  -webkit-backdrop-filter: var(--nav-matte-backdrop) !important;
}
body.ios-theme:has(.space-share) > header.grigsi-top-bar .logo,
body.ios-theme.space-shell > header.grigsi-top-bar .logo {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  color: var(--ios-orange, #FFC64B) !important;
  -webkit-text-fill-color: var(--ios-orange, #FFC64B) !important;
  text-shadow: none;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  min-height: 44px;
  min-width: 44px;
  -webkit-tap-highlight-color: rgba(255, 198, 75, 0.25);
}
body.ios-theme:has(.space-share) > header.grigsi-top-bar .home-header-cluster,
body.ios-theme.space-shell > header.grigsi-top-bar .home-header-cluster {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
@media (min-width: 900px) {
  body.ios-theme:has(.space-share) > header.grigsi-top-bar .home-header-cluster,
  body.ios-theme.space-shell > header.grigsi-top-bar .home-header-cluster {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px 12px;
  }
}
body.ios-theme:has(.space-share) > header.grigsi-top-bar .nav-buttons,
body.ios-theme.space-shell > header.grigsi-top-bar .nav-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  justify-content: flex-end;
  line-height: 1.2;
}

/* Mobile Space: logo only — hide site nav (Tools, Solutions, …, More) */
@media (max-width: 768px) {
  body.ios-theme:has(.space-share) > header.grigsi-top-bar .home-header-cluster,
  body.ios-theme.space-shell > header.grigsi-top-bar .home-header-cluster {
    display: none !important;
  }

  body.ios-theme:has(.space-share) > header.grigsi-top-bar,
  body.ios-theme.space-shell > header.grigsi-top-bar {
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  body.ios-theme:has(.space-share) > header.grigsi-top-bar .logo,
  body.ios-theme.space-shell > header.grigsi-top-bar .logo {
    min-height: 40px;
  }

  body:has(.space-share) {
    --space-grigsi-nav-clearance: max(48px, calc(env(safe-area-inset-top, 0px) + 40px));
  }
}

body:has(.space-share) > .grigsi-top-bar-spacer {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body:has(.space-share) .space-share {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  background: transparent;
}
body:has(.space-share) .space-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* No extra band under site nav — Space code lives in .space-tabs. */
body:has(.space-share) .space-tabs {
  background: var(--space-shell-tabs) !important;
  background-color: var(--space-shell-tabs) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body:has(.space-share) .space-link-bar.hidden,
body:has(.space-share) .module-join-box.hidden,
body:has(.space-share) #space-link-bar:not(:has(.space-link-bar-btn:not(.hidden))) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}
/* Keep cosmic / glass Space theme — do not force flat light body ( broke contrast ). */
body.ios-theme:has(.space-share) {
  color: var(--lg-glass-text) !important;
}
body.ios-theme:has(.space-share) .space-header {
  display: none !important;
}
body.ios-theme:has(.space-share) .space-code-display {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  color-scheme: light;
}
body.ios-theme:has(.space-share) .participants-badge {
  color: var(--purple) !important;
}
body.ios-theme:has(.space-share) .space-presence--alone {
  color: var(--yellow) !important;
}
body.ios-theme:has(.space-share) .space-presence--others {
  color: var(--purple) !important;
}
body.ios-theme:has(.space-share) .space-presence--connecting {
  color: #ffffff !important;
}

/* Space header — responsive toolbar + mobile overflow sheet */
.space-header {
  --space-h-ctrl: 28px;
  grid-column: 1 / -1;
  grid-row: 1;
  background: var(--card-bg);
  border-bottom: 1px solid #eee;
  padding: 6px 14px;
  padding-top: 6px;
  gap: 8px 10px;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  line-height: 1.2;
  position: relative;
  z-index: 100;
}

.space-header-zone--Space {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.space-code-row {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.sidebar-header-row h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.space-tabs-bar .nav-dropdown.space-more {
  position: relative;
  list-style: none;
  flex-shrink: 0;
}

.space-tabs-bar summary.btn-nav.nav-more-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  height: var(--space-h-ctrl);
  min-height: 0;
  max-height: var(--space-h-ctrl);
  padding: 0 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #d5d7de;
  background: var(--bg);
  color: var(--dark);
  white-space: nowrap;
}

.space-tabs-bar summary.btn-nav.nav-more-summary::-webkit-details-marker {
  display: none;
}

.space-tabs-bar summary.btn-nav.nav-more-summary::marker {
  content: "";
  font-size: 0;
}

.space-tabs-bar summary.nav-more-summary::after {
  content: "\00a0▾";
  font-size: 0.72em;
  opacity: 0.88;
}

.space-tabs-bar .nav-dropdown.space-more[open] summary.btn-nav.nav-more-summary {
  outline: 2px solid rgba(166, 147, 239, 0.45);
  outline-offset: 1px;
}

.space-tabs-bar .space-more-panel {
  position: absolute;
  z-index: var(--space-overlay-menu-z, 11850);
  right: 0;
  top: 100%;
  width: min(100vw - 24px, 320px);
  max-width: min(100vw - 24px, 320px);
  max-height: min(70vh, calc(100dvh - 120px));
  padding: 14px 12px 12px;
  background: #f8f7fc;
  background-color: #f8f7fc;
  color: #1a1a24;
  border: 1px solid rgba(129, 119, 240, 0.2);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 22, 36, 0.18);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.space-more-panel.space-more-panel--portal,
.space-code-picker-menu.space-code-picker-menu--portal {
  position: fixed !important;
  z-index: var(--space-overlay-menu-z, 11850) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 16px 42px rgba(8, 6, 18, 0.28) !important;
}

/* Portaled panel leaves .space-tabs-bar — keep full menu chrome */
.space-more-panel.space-more-panel--portal {
  padding: 14px 12px 12px;
  background: #f8f7fc;
  background-color: #f8f7fc;
  color: #1a1a24;
  border: 1px solid rgba(129, 119, 240, 0.2);
  border-radius: 12px;
}

.space-more-panel.space-more-panel--portal,
.space-more-panel.space-more-panel--portal * {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

.space-more-panel.space-more-panel--portal .nav-more-heading {
  color: #555 !important;
  -webkit-text-fill-color: #555 !important;
}

.space-more-panel.space-more-panel--portal .space-more-action--leave {
  color: #c62828 !important;
  -webkit-text-fill-color: #c62828 !important;
}

.space-more-panel.space-more-panel--portal .space-more-action,
.space-more-panel.space-more-panel--portal a.space-more-action {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14) !important;
}

.space-more-panel.space-more-panel--portal .space-more-action:hover,
.space-more-panel.space-more-panel--portal a.space-more-action:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.space-tabs-bar .nav-dropdown.space-more[open] > summary.space-tabs-dock-btn {
  outline: 2px solid rgba(166, 147, 239, 0.5);
  outline-offset: 1px;
}

.space-tabs-bar .space-more-panel,
.space-more-panel.space-more-panel--portal,
.space-tabs-bar .space-more-panel *,
.space-more-panel.space-more-panel--portal * {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

.space-tabs-bar .space-more-panel .nav-more-heading,
.space-more-panel.space-more-panel--portal .nav-more-heading {
  color: #555 !important;
  -webkit-text-fill-color: #555 !important;
}

.space-tabs-bar .space-more-panel .space-more-action i,
.space-tabs-bar .space-more-panel .header-security-option i,
.space-more-panel.space-more-panel--portal .space-more-action i,
.space-more-panel.space-more-panel--portal .header-security-option i {
  color: inherit;
}

.space-tabs-bar .space-more-panel .space-more-action--leave,
.space-more-panel.space-more-panel--portal .space-more-action--leave {
  color: #c62828 !important;
  -webkit-text-fill-color: #c62828 !important;
}

.space-tabs-bar .space-more-panel .header-security-dropdown,
.space-tabs-bar .space-more-panel .header-security-dropdown *,
.space-more-panel.space-more-panel--portal .header-security-dropdown,
.space-more-panel.space-more-panel--portal .header-security-dropdown * {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

.space-tabs-bar .space-more-panel .header-security-option,
.space-more-panel.space-more-panel--portal .header-security-option {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14) !important;
  border-radius: 0 !important;
  color: #1a1a24 !important;
}

.space-tabs-bar .space-more-panel .header-security-option:hover,
.space-more-panel.space-more-panel--portal .header-security-option:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1a1a24 !important;
}

:root {
  --space-overlay-menu-z: 11850;
  --space-overlay-modal-z: 11920;
}

/* Header menus + modals — always above chat art, dock, composer sheets */
#access-settings-modal.modal,
#settings-modal.modal,
#space-participants-modal.modal,
#space-local-rename-modal.modal,
#space-join-request-modal.modal,
#important-category-modal.modal,
#compose-sanity-modal.modal,
body:has(.space-share) .modal.active {
  z-index: var(--space-overlay-modal-z);
}

#important-category-modal.modal {
  z-index: 12000;
}

.space-participants-modal-content {
  max-width: min(96vw, 420px);
  max-height: min(90vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#space-participants-modal .space-participants-modal-content > h2 {
  flex-shrink: 0;
  padding-right: 28px;
}

.space-participants-modal-hint {
  font-size: 0.82rem;
  color: var(--gray);
  margin: 0 0 12px;
  line-height: 1.4;
  flex-shrink: 0;
}

/* One scroll region: Connect bridge + participant lists (avoids nested scroll on mobile). */
.space-participants-modal-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-right: 2px;
}

.space-participants-modal-body::-webkit-scrollbar {
  width: 6px;
}

.space-participants-modal-body::-webkit-scrollbar-thumb {
  background: rgba(129, 119, 240, 0.45);
  border-radius: 4px;
}

.space-participants-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  max-height: none;
}

.space-participants-modal-item {
  margin-bottom: 6px;
}

#space-participants-modal .participant-item:hover {
  background: rgba(129, 119, 240, 0.08);
}

.participant-rename-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(129, 119, 240, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  background: #fff;
  min-height: 44px;
}

.participant-rename-input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(129, 119, 240, 0.2);
}

.space-participants-modal-empty {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--gray);
  text-align: center;
  padding: 8px;
}

body.ios-theme.space-shell #space-participants-modal .modal-content,
body.ios-theme:has(.space-share) #space-participants-modal .modal-content {
  background: #1e2230 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

body.ios-theme.space-shell #space-participants-modal .modal-content:hover,
body.ios-theme:has(.space-share) #space-participants-modal .modal-content:hover {
  transform: none !important;
}

body.ios-theme.space-shell #space-participants-modal .modal-content h2,
body.ios-theme:has(.space-share) #space-participants-modal .modal-content h2 {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
}

body.ios-theme.space-shell #space-participants-modal .close-btn,
body.ios-theme:has(.space-share) #space-participants-modal .close-btn {
  color: rgba(255, 255, 255, 0.85) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

body.ios-theme.space-shell #space-participants-modal .close-btn:hover,
body.ios-theme:has(.space-share) #space-participants-modal .close-btn:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.ios-theme.space-shell #space-participants-modal .participant-item:hover,
body.ios-theme:has(.space-share) #space-participants-modal .participant-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

body.ios-theme.space-shell #space-participants-modal .participant-status,
body.ios-theme:has(.space-share) #space-participants-modal .participant-status {
  color: rgba(255, 255, 255, 0.62) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
}

/* Participant rows: do not force --dark on names inside the dark participants modal */
#space-participants-modal .participant-name {
  color: inherit;
  -webkit-text-fill-color: inherit;
}

body.ios-theme.space-shell #space-participants-modal .participant-name,
body.ios-theme:has(.space-share) #space-participants-modal .participant-name {
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
}

body.ios-theme.space-shell #space-participants-modal .space-participants-viewers-heading,
body.ios-theme:has(.space-share) #space-participants-modal .space-participants-viewers-heading {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}

body.ios-theme.space-shell #space-participants-modal .space-connect-bridge-lead,
body.ios-theme:has(.space-share) #space-participants-modal .space-connect-bridge-lead,
body.ios-theme.space-shell #space-participants-modal .space-connect-bridge-lead strong,
body.ios-theme:has(.space-share) #space-participants-modal .space-connect-bridge-lead strong {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}

body.ios-theme.space-shell #space-participants-modal .space-connect-bridge-sub,
body.ios-theme:has(.space-share) #space-participants-modal .space-connect-bridge-sub,
body.ios-theme.space-shell #space-participants-modal .space-connect-local-status,
body.ios-theme:has(.space-share) #space-participants-modal .space-connect-local-status {
  color: rgba(255, 255, 255, 0.62) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
}

body.ios-theme.space-shell #space-participants-modal .space-connect-bridge-lead code,
body.ios-theme:has(.space-share) #space-participants-modal .space-connect-bridge-lead code {
  color: #fcd34d !important;
  -webkit-text-fill-color: #fcd34d !important;
  background: rgba(0, 0, 0, 0.28);
  padding: 1px 5px;
  border-radius: 4px;
}

body.ios-theme.space-shell .participant-rename-input,
body.ios-theme:has(.space-share) .participant-rename-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  cursor: text !important;
  caret-color: rgba(255, 255, 255, 0.95);
}

body.ios-theme.space-shell #space-participants-modal .participant-rename-input:focus,
body.ios-theme:has(.space-share) #space-participants-modal .participant-rename-input:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(129, 119, 240, 0.65) !important;
  box-shadow: 0 0 0 2px rgba(129, 119, 240, 0.25) !important;
}

body.ios-theme.space-shell .space-participants-modal-hint,
body.ios-theme:has(.space-share) .space-participants-modal-hint,
body.ios-theme.space-shell .space-participants-modal-empty,
body.ios-theme:has(.space-share) .space-participants-modal-empty {
  color: rgba(255, 255, 255, 0.65) !important;
}

.space-more-panel .space-more-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.space-more-panel .space-more-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.space-more-panel .space-more-group + .space-more-group {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.space-more-panel .space-more-group .nav-more-heading {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
}

.space-more-panel .space-more-action.hidden,
.space-more-panel a.space-more-action.hidden,
.space-more-panel .space-tabs-pair-btn.hidden,
.space-more-panel .space-tabs-viewer-btn.hidden,
.space-more-panel .btn-upgrade-space.hidden {
  display: none !important;
}

.space-more-join-label {
  display: block;
  width: 100%;
  padding: 0 12px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray);
  box-sizing: border-box;
}

.more-join-space-code {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  color: #1a1a24;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-sizing: border-box;
}

body.ios-theme.space-shell .more-join-space-code,
body.ios-theme:has(.space-share) .more-join-space-code {
  background: #fff !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border-color: rgba(52, 199, 89, 0.45) !important;
}

.space-tabs-bar .space-more-panel .space-more-action--join,
.space-more-panel .space-more-action--join {
  margin-top: 2px;
}

.space-more-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--dark);
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

/* More menu rows: light gray rule, no white chips */
.space-tabs-bar .space-more-panel .space-more-action,
.space-tabs-bar .space-more-panel a.space-more-action,
.space-more-panel .space-more-action,
.space-more-panel a.space-more-action {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14) !important;
}

.space-tabs-bar .space-more-panel .space-more-action:hover,
.space-tabs-bar .space-more-panel a.space-more-action:hover,
.space-more-panel .space-more-action:hover,
.space-more-panel a.space-more-action:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.space-more-action:hover {
  background: rgba(129, 119, 240, 0.1);
}

.space-more-action--leave {
  color: var(--red);
}

.space-more-action--leave:hover {
  background: rgba(220, 53, 69, 0.1);
}

.space-tabs-bar .space-more-action.btn-leave,
.space-more-panel .space-more-action.btn-leave {
  border: 0;
  height: auto;
  min-height: 40px;
  max-height: none;
  padding: 0 12px;
  font-weight: 500;
}

.space-more-action i {
  width: 1.1em;
  text-align: center;
  flex-shrink: 0;
}

.space-more-security {
  position: relative;
  width: 100%;
}

.space-more-security .space-more-action--security {
  width: 100%;
}

.space-more-security .header-security-dropdown {
  position: static;
  display: none;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin-top: 6px;
  box-shadow: none;
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: transparent;
  background-color: transparent;
  color: #1a1a24;
}

.space-more-security .header-security-dropdown.open {
  display: block;
}

.header-btn--menu-row {
  width: auto;
  min-width: 0;
  max-width: none;
  height: var(--space-h-ctrl);
  max-height: var(--space-h-ctrl);
  padding: 0 10px;
  justify-content: flex-start;
  gap: 8px;
}

.header-btn--menu-row .header-btn-label {
  margin-left: 0;
}

.btn-upgrade-space.header-btn--menu-row {
  border: 1px solid var(--purple);
  text-decoration: none;
}

.space-code-field-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0;
}

.space-code-field-wrap .space-code-display {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  border-radius: 6px 0 0 6px;
  border-right: none;
  padding-right: 4px;
}

.space-code-field-wrap .space-code-display:focus {
  z-index: 1;
}

.space-code-picker-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  overflow: visible;
}

.space-code-copy-btn,
.space-code-rename-btn,
.space-code-share-btn,
.space-code-picker-btn {
  flex-shrink: 0;
}

.space-code-copy-btn i,
.space-code-rename-btn i,
.space-code-share-btn i,
.space-code-picker-btn i,
.space-code-picker-icon {
  font-size: 1.0625rem;
  line-height: 1;
  display: block;
}

.space-code-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: auto;
  min-height: var(--space-code-h, 34px);
  padding: 0;
  border: 1px solid rgba(21, 101, 192, 0.22);
  border-left: none;
  border-radius: 0;
  background: linear-gradient(180deg, #f7fbff 0%, #e9f2fd 100%);
  color: #1565c0;
  -webkit-text-fill-color: #1565c0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(21, 101, 192, 0.08);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.space-code-copy-btn:hover,
.space-code-copy-btn:focus-visible {
  background: linear-gradient(180deg, #dce9f8 0%, #b8d4f0 100%);
  border-color: rgba(13, 71, 161, 0.5);
  color: #0d47a1;
  -webkit-text-fill-color: #0d47a1;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(21, 101, 192, 0.16),
    0 4px 10px rgba(21, 101, 192, 0.2);
  outline: none;
}

.space-code-copy-btn:active {
  transform: translateY(0);
}

.space-code-rename-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: auto;
  min-height: var(--space-code-h, 34px);
  padding: 0;
  border: 1px solid rgba(239, 108, 0, 0.24);
  border-left: none;
  border-radius: 0;
  background: linear-gradient(180deg, #fffaf4 0%, #fff0df 100%);
  color: #ef6c00;
  -webkit-text-fill-color: #ef6c00;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(239, 108, 0, 0.08);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.space-code-rename-btn:hover,
.space-code-rename-btn:focus-visible {
  background: linear-gradient(180deg, #ffe8cc 0%, #ffd4a3 100%);
  border-color: rgba(230, 81, 0, 0.5);
  color: #e65100;
  -webkit-text-fill-color: #e65100;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(239, 108, 0, 0.14),
    0 4px 10px rgba(239, 108, 0, 0.2);
  outline: none;
}

.space-code-rename-btn:active {
  transform: translateY(0);
}

.space-code-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: auto;
  min-height: var(--space-code-h, 34px);
  padding: 0;
  border: 1px solid rgba(27, 94, 32, 0.22);
  border-left: none;
  border-radius: 0;
  background: linear-gradient(180deg, #f1f8f2 0%, #e0f0e3 100%);
  color: #2e7d32;
  -webkit-text-fill-color: #2e7d32;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(27, 94, 32, 0.08);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.space-code-share-btn:hover,
.space-code-share-btn:focus-visible {
  background: linear-gradient(180deg, #d4ead8 0%, #b8dcc0 100%);
  border-color: rgba(27, 94, 32, 0.5);
  color: #1b5e20;
  -webkit-text-fill-color: #1b5e20;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(27, 94, 32, 0.14),
    0 4px 10px rgba(27, 94, 32, 0.18);
  outline: none;
}

.space-code-share-btn:active {
  transform: translateY(0);
}

.space-code-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: auto;
  min-height: var(--space-code-h, 34px);
  padding: 0;
  border: 1px solid rgba(123, 31, 162, 0.22);
  border-left: 1px solid rgba(123, 31, 162, 0.14);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #faf8ff 0%, #f0ebfc 100%);
  color: #7b1fa2;
  -webkit-text-fill-color: #7b1fa2;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(123, 31, 162, 0.08);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
  position: relative;
}

.space-code-picker-chevron {
  font-size: 0.875rem;
  transition: transform 0.18s ease;
}

.space-code-picker-btn[aria-expanded="true"] .space-code-picker-chevron {
  transform: rotate(180deg);
}

.space-code-picker-btn--has-others {
  background: linear-gradient(180deg, #f3edff 0%, #e4d9fc 100%);
  border-color: rgba(106, 27, 154, 0.32);
}

.space-code-picker-btn:hover,
.space-code-picker-btn:focus-visible,
.space-code-picker-btn[aria-expanded="true"] {
  background: linear-gradient(180deg, #ebe2fa 0%, #d4c4f2 100%);
  border-color: rgba(106, 27, 154, 0.48);
  color: #6a1b9a;
  -webkit-text-fill-color: #6a1b9a;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(123, 31, 162, 0.14),
    0 4px 10px rgba(123, 31, 162, 0.2);
  outline: none;
}

.space-code-picker-btn:active {
  transform: translateY(0);
}

.space-code-picker-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.space-code-picker-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: min(280px, calc(100vw - 24px));
  max-width: min(360px, calc(100vw - 16px));
  max-height: min(320px, 50vh);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: var(--space-overlay-menu-z, 11850);
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  background: linear-gradient(165deg, #fff9e8 0%, #ffefb8 48%, #ffe89a 100%);
  border: 1px solid rgba(201, 137, 0, 0.45);
  box-shadow: 0 10px 32px rgba(26, 26, 36, 0.18);
}

.space-code-picker-menu.hidden {
  display: none;
}

.space-code-picker-empty {
  margin: 8px 10px 10px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(26, 26, 36, 0.78);
  -webkit-text-fill-color: rgba(26, 26, 36, 0.78);
}

.space-code-picker-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.space-code-picker-item {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.space-code-picker-item .space-code-picker-option {
  flex: 1;
  min-width: 0;
}

.space-code-picker-newtab {
  flex: 0 0 auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  margin: 4px 4px 4px 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #5c5670;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.12s, color 0.12s;
}

.space-code-picker-newtab:hover,
.space-code-picker-newtab:focus-visible {
  background: rgba(166, 147, 239, 0.18);
  color: #6b4fd4;
  outline: none;
}

.space-code-picker-item.is-current .space-code-picker-newtab {
  opacity: 0.35;
  pointer-events: none;
}

.space-code-picker-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s;
}

.space-code-picker-option:hover,
.space-code-picker-option:focus-visible {
  background: rgba(255, 255, 255, 0.55);
  outline: none;
}

.space-code-picker-item.is-current .space-code-picker-option {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(92, 67, 200, 0.28);
}

.space-code-picker-option-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-code-picker-option-code {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5c43c8;
  -webkit-text-fill-color: #5c43c8;
  letter-spacing: 0.04em;
}

.space-code-picker-option-here {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5c3d00;
  -webkit-text-fill-color: #5c3d00;
  background: rgba(255, 198, 75, 0.55);
  padding: 2px 6px;
  border-radius: 999px;
}

.space-code-picker-rename-row {
  margin: 0 0 4px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(92, 67, 200, 0.2);
}

.space-code-picker-rename-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: #5c3d00;
  -webkit-text-fill-color: #5c3d00;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.space-code-picker-rename-link i {
  color: #5c3d00;
  -webkit-text-fill-color: #5c3d00;
}

.space-code-picker-rename-link:hover,
.space-code-picker-rename-link:focus-visible {
  background: rgba(255, 255, 255, 0.85);
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
  outline: none;
}

#space-local-rename-modal.modal {
  background: rgba(8, 10, 18, 0.52);
}

#space-local-rename-modal.modal.active {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
  justify-content: center;
  z-index: 130000 !important;
}

#space-local-rename-modal .modal-content,
.space-local-rename-content {
  max-width: 420px;
  background: linear-gradient(165deg, #fff9e8 0%, #ffefb8 48%, #ffe89a 100%) !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border: 1px solid rgba(255, 198, 75, 0.65) !important;
  box-shadow:
    0 14px 40px rgba(26, 26, 36, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

#space-local-rename-modal .modal-content h2,
#space-local-rename-title {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

#space-local-rename-modal .modal-content h2 i,
#space-local-rename-title i {
  color: #c98900 !important;
}

#space-local-rename-modal .close-btn {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

#space-local-rename-modal .close-btn:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #1a1a24 !important;
}

.space-local-rename-hint {
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(26, 26, 36, 0.78) !important;
  -webkit-text-fill-color: rgba(26, 26, 36, 0.78) !important;
}

.space-local-rename-code {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

.space-local-rename-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #7a5200 !important;
  -webkit-text-fill-color: #7a5200 !important;
  background: rgba(255, 255, 255, 0.55);
  padding: 2px 6px;
  border-radius: 6px;
}

.space-local-rename-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(201, 137, 0, 0.45) !important;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: #ffffff !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  color-scheme: light;
}

.space-local-rename-input::placeholder {
  color: rgba(26, 26, 36, 0.42) !important;
  -webkit-text-fill-color: rgba(26, 26, 36, 0.42) !important;
}

.space-local-rename-input:focus {
  outline: none;
  border-color: #c98900 !important;
  box-shadow: 0 0 0 3px rgba(255, 198, 75, 0.35) !important;
}

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

#space-local-rename-modal #space-local-rename-save,
#space-local-rename-modal .btn-create {
  background: #ffc64b !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border: 1px solid rgba(201, 137, 0, 0.35) !important;
}

#space-local-rename-modal #space-local-rename-save:hover,
#space-local-rename-modal .btn-create:hover {
  background: #f5b830 !important;
  color: #1a1a24 !important;
}

.space-local-rename-reset {
  border: none;
  background: transparent;
  color: #5c3d00 !important;
  -webkit-text-fill-color: #5c3d00 !important;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 10px;
  font-family: inherit;
}

.space-local-rename-reset:hover,
.space-local-rename-reset:focus-visible {
  text-decoration: underline;
  outline: none;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

#space-local-rename-modal #space-local-rename-cancel,
#space-local-rename-modal .important-modal-cancel-btn {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(26, 26, 36, 0.14) !important;
}

body.ios-theme.space-shell #space-local-rename-modal .modal-content,
body.ios-theme:has(.space-share) #space-local-rename-modal .modal-content,
body.ios-theme.space-shell .space-local-rename-content,
body.ios-theme:has(.space-share) .space-local-rename-content {
  background: linear-gradient(165deg, #fff9e8 0%, #ffefb8 48%, #ffe89a 100%) !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

body.ios-theme.space-shell #space-local-rename-modal .space-local-rename-hint,
body.ios-theme:has(.space-share) #space-local-rename-modal .space-local-rename-hint,
body.ios-theme.space-shell #space-local-rename-modal .space-local-rename-code,
body.ios-theme:has(.space-share) #space-local-rename-modal .space-local-rename-code,
body.ios-theme.space-shell #space-local-rename-modal .modal-content h2,
body.ios-theme:has(.space-share) #space-local-rename-modal .modal-content h2 {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

body.ios-theme.space-shell #space-local-rename-modal .space-local-rename-input,
body.ios-theme:has(.space-share) #space-local-rename-modal .space-local-rename-input {
  background: #ffffff !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

body.ios-theme.space-shell .space-code-copy-btn,
body.ios-theme:has(.space-share) .space-code-copy-btn {
  background: linear-gradient(180deg, #f7fbff 0%, #e9f2fd 100%) !important;
  color: #1565c0 !important;
  -webkit-text-fill-color: #1565c0 !important;
  border-color: rgba(21, 101, 192, 0.22) !important;
}

body.ios-theme.space-shell .space-code-copy-btn:hover,
body.ios-theme:has(.space-share) .space-code-copy-btn:hover,
body.ios-theme.space-shell .space-code-copy-btn:focus-visible,
body.ios-theme:has(.space-share) .space-code-copy-btn:focus-visible {
  background: linear-gradient(180deg, #dce9f8 0%, #b8d4f0 100%) !important;
  border-color: rgba(13, 71, 161, 0.5) !important;
  color: #0d47a1 !important;
  -webkit-text-fill-color: #0d47a1 !important;
}

body.ios-theme.space-shell .space-code-rename-btn,
body.ios-theme:has(.space-share) .space-code-rename-btn {
  background: linear-gradient(180deg, #fffaf4 0%, #fff0df 100%) !important;
  color: #ef6c00 !important;
  -webkit-text-fill-color: #ef6c00 !important;
  border-color: rgba(239, 108, 0, 0.24) !important;
}

body.ios-theme.space-shell .space-code-rename-btn:hover,
body.ios-theme:has(.space-share) .space-code-rename-btn:hover,
body.ios-theme.space-shell .space-code-rename-btn:focus-visible,
body.ios-theme:has(.space-share) .space-code-rename-btn:focus-visible {
  background: linear-gradient(180deg, #ffe8cc 0%, #ffd4a3 100%) !important;
  border-color: rgba(230, 81, 0, 0.5) !important;
  color: #e65100 !important;
  -webkit-text-fill-color: #e65100 !important;
}

body.ios-theme.space-shell .space-code-share-btn,
body.ios-theme:has(.space-share) .space-code-share-btn {
  background: linear-gradient(180deg, #f1f8f2 0%, #e0f0e3 100%) !important;
  color: #2e7d32 !important;
  -webkit-text-fill-color: #2e7d32 !important;
  border-color: rgba(27, 94, 32, 0.22) !important;
}

body.ios-theme.space-shell .space-code-share-btn:hover,
body.ios-theme:has(.space-share) .space-code-share-btn:hover,
body.ios-theme.space-shell .space-code-share-btn:focus-visible,
body.ios-theme:has(.space-share) .space-code-share-btn:focus-visible {
  background: linear-gradient(180deg, #d4ead8 0%, #b8dcc0 100%) !important;
  border-color: rgba(27, 94, 32, 0.5) !important;
  color: #1b5e20 !important;
  -webkit-text-fill-color: #1b5e20 !important;
}

body.ios-theme.space-shell .space-code-picker-menu,
body.ios-theme:has(.space-share) .space-code-picker-menu {
  background: linear-gradient(165deg, #fff9e8 0%, #ffefb8 48%, #ffe89a 100%) !important;
  border-color: rgba(201, 137, 0, 0.45) !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

body.ios-theme.space-shell .space-code-picker-btn,
body.ios-theme:has(.space-share) .space-code-picker-btn {
  background: linear-gradient(180deg, #faf8ff 0%, #f0ebfc 100%) !important;
  color: #7b1fa2 !important;
  -webkit-text-fill-color: #7b1fa2 !important;
  border-color: rgba(123, 31, 162, 0.22) !important;
}

body.ios-theme.space-shell .space-code-picker-btn:hover,
body.ios-theme:has(.space-share) .space-code-picker-btn:hover,
body.ios-theme.space-shell .space-code-picker-btn[aria-expanded="true"],
body.ios-theme:has(.space-share) .space-code-picker-btn[aria-expanded="true"] {
  background: linear-gradient(180deg, #ebe2fa 0%, #d4c4f2 100%) !important;
  border-color: rgba(106, 27, 154, 0.48) !important;
  color: #6a1b9a !important;
  -webkit-text-fill-color: #6a1b9a !important;
}

body.ios-theme.space-shell .space-code-picker-empty,
body.ios-theme:has(.space-share) .space-code-picker-empty,
body.ios-theme.space-shell .space-code-picker-option,
body.ios-theme:has(.space-share) .space-code-picker-option,
body.ios-theme.space-shell .space-code-picker-option-title,
body.ios-theme:has(.space-share) .space-code-picker-option-title,
body.ios-theme.space-shell .space-code-picker-rename-link,
body.ios-theme:has(.space-share) .space-code-picker-rename-link {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

body.ios-theme.space-shell .space-code-picker-option-code,
body.ios-theme:has(.space-share) .space-code-picker-option-code {
  color: #5c43c8 !important;
  -webkit-text-fill-color: #5c43c8 !important;
}

body.ios-theme.space-shell .space-code-picker-rename-link,
body.ios-theme:has(.space-share) .space-code-picker-rename-link {
  color: #5c3d00 !important;
  -webkit-text-fill-color: #5c3d00 !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

body.ios-theme.space-shell .space-code-field-wrap .space-code-display,
body.ios-theme:has(.space-share) .space-code-field-wrap .space-code-display {
  border-radius: 6px 0 0 6px !important;
}

.space-code-display:not(.space-tabs-code-wrap .space-code-display) {
  background: var(--bg);
  padding: 0 6px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  height: var(--space-h-ctrl);
  min-height: 0;
  max-height: var(--space-h-ctrl);
  box-sizing: border-box;
  color: var(--dark);
  border: 1px solid #d5d7de;
  min-width: 88px;
  width: 8.25ch;
  max-width: 96px;
  flex: 0 0 auto;
  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: 0 10px;
  font-size: 0.85rem;
  font-weight: 600;
  height: var(--space-h-ctrl);
  min-height: 0;
  max-height: var(--space-h-ctrl);
  line-height: 1.2;
}

.participants-badge {
  background: rgba(21,87,36,.12);
  color: #155724;
  padding: 0 8px;
  height: var(--space-h-ctrl);
  box-sizing: border-box;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.participants-badge .participants-badge-num {
  margin-left: 0;
}
.participants-badge .participants-badge-word {
  display: none;
}

/* Header: others online / alone / still connecting */
.space-presence-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  height: var(--space-h-ctrl);
  box-sizing: border-box;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  max-width: 108px;
  flex-shrink: 0;
}
.space-presence-label {
  max-width: 76px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.space-presence-dot {
  width: 6px;
  height: 6px;
  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: #A693EF;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35);
  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;
}
@keyframes space-presence-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@keyframes space-presence-ring {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
  70% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.header-btn {
  width: var(--space-h-ctrl);
  height: var(--space-h-ctrl);
  min-width: var(--space-h-ctrl);
  min-height: 0;
  max-height: var(--space-h-ctrl);
  border: none;
  background: var(--bg);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  transition: all .2s;
  font-size: 0.9rem;
  padding: 0;
}

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

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

.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: 1.5px solid var(--red);
  color: var(--red);
  padding: 0 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  height: var(--space-h-ctrl);
  min-height: 0;
  max-height: var(--space-h-ctrl);
  box-sizing: border-box;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.space-header .btn-leave i {
  font-size: 0.85rem;
}

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

/* Header Security dropdown */
.header-security-dropdown-wrap {
  position: relative;
}
.space-more-security #btn-security-dropdown {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 40px;
  max-height: none;
  padding: 0 12px;
  font-size: 0.92rem;
  justify-content: flex-start;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
}

.space-more-security #btn-security-dropdown:hover {
  background: rgba(129, 119, 240, 0.1);
}

.space-more-security #btn-security-dropdown i {
  flex-shrink: 0;
  width: 1.1em;
  text-align: center;
}

@media (max-width: 768px) {
  .space-tabs {
    --space-h-ctrl: 26px;
    --space-code-h: 28px;
    gap: 4px;
    padding: 4px 6px;
    flex-wrap: wrap;
    align-items: stretch;
    overflow-x: visible;
    overflow-y: visible;
  }

  .space-tabs-code-wrap {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 1;
  }

  .space-tabs-code-wrap .space-code-display {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    font-size: 0.78rem;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .space-tabs .space-code-picker-wrap {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-width: max-content;
  }

  .space-tabs .space-code-copy-btn,
  .space-tabs .space-code-rename-btn,
  .space-tabs .space-code-share-btn,
  .space-tabs .space-code-picker-btn {
    width: 34px;
    min-width: 34px;
    min-height: var(--space-code-h, 28px);
    flex-shrink: 0;
  }

  .space-tabs .space-code-copy-btn i,
  .space-tabs .space-code-rename-btn i,
  .space-tabs .space-code-share-btn i,
  .space-tabs .space-code-picker-btn i,
  .space-tabs .space-code-picker-icon {
    font-size: 1.125rem;
  }

  .space-tabs .space-code-picker-btn {
    border-radius: 0 6px 6px 0 !important;
  }

  .space-tabs-bar {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 2;
    margin-left: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .space-tabs-bar::-webkit-scrollbar {
    display: none;
  }

  .space-tabs-nav {
    display: none !important;
  }

  .space-share:not(.chat-first-shell) .space-tabs-nav {
    display: flex !important;
    flex: 0 0 auto;
    min-height: 30px;
  }

  .space-share:not(.chat-first-shell) .space-tabs-nav .space-tab {
    flex-shrink: 0;
    padding: 5px 7px;
    font-size: 0.72rem;
  }

  .space-tabs-bar--dock5 {
    gap: 4px;
    --space-dock-font: 0.64rem;
    --space-dock-icon: 0.66rem;
  }

  .space-tabs-bar--dock5 .space-tabs-dock-btn,
  .space-tabs-bar--dock5 .space-tabs-dock-more > summary {
    padding: 0 5px;
    border-radius: 8px;
    gap: 3px;
  }

  .space-tabs-bar--dock5 .space-tabs-dock-btn__label {
    font-size: var(--space-dock-font);
    line-height: 1.1;
  }

  .space-tabs-participants-text {
    max-width: 7.5rem;
  }

  .space-tabs-important-text {
    max-width: 7.5rem;
  }

  .space-tabs-invite-label,
  .space-tabs-pair-label {
    display: none;
  }

  .space-tabs-invite-btn,
  .space-tabs-pair-btn {
    padding: 0 9px;
    min-width: var(--space-h-ctrl);
  }

  .space-tabs-bar .space-more-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: max(56px, calc(12px + env(safe-area-inset-bottom)));
    width: auto;
    max-width: none;
    max-height: min(75vh, calc(100dvh - 100px));
  }

  body.ios-theme.space-shell .space-tabs-bar .space-more-panel,
  body.ios-theme:has(.space-share) .space-tabs-bar .space-more-panel {
    background: #f8f7fc !important;
    background-color: #f8f7fc !important;
    color: #1a1a24 !important;
    border-color: rgba(129, 119, 240, 0.22) !important;
  }

  body.ios-theme.space-shell .space-tabs-bar .space-more-panel .space-more-action,
  body.ios-theme:has(.space-share) .space-tabs-bar .space-more-panel .space-more-action,
  body.ios-theme.space-shell .space-tabs-bar .space-more-panel .nav-more-heading,
  body.ios-theme:has(.space-share) .space-tabs-bar .space-more-panel .nav-more-heading,
  body.ios-theme.space-shell .space-tabs-bar .space-more-panel .header-security-desc,
  body.ios-theme:has(.space-share) .space-tabs-bar .space-more-panel .header-security-desc,
  body.ios-theme.space-shell .space-tabs-bar .space-more-panel .header-security-option,
  body.ios-theme:has(.space-share) .space-tabs-bar .space-more-panel .header-security-option {
    color: #1a1a24 !important;
    -webkit-text-fill-color: #1a1a24 !important;
  }

  body.ios-theme.space-shell .space-tabs-bar .space-more-panel .space-more-action--leave,
  body.ios-theme:has(.space-share) .space-tabs-bar .space-more-panel .space-more-action--leave {
    color: #c62828 !important;
    -webkit-text-fill-color: #c62828 !important;
  }

  body.ios-theme.space-shell .space-more-security .header-security-dropdown,
  body.ios-theme:has(.space-share) .space-more-security .header-security-dropdown {
    background: transparent !important;
    background-color: transparent !important;
    color: #1a1a24 !important;
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
  }

  body.ios-theme.space-shell .space-tabs-bar .space-more-panel .space-more-action,
  body.ios-theme:has(.space-share) .space-tabs-bar .space-more-panel .space-more-action,
  body.ios-theme.space-shell .space-tabs-bar .space-more-panel a.space-more-action,
  body.ios-theme:has(.space-share) .space-tabs-bar .space-more-panel a.space-more-action,
  body.ios-theme.space-shell .space-tabs-bar .space-more-panel .header-security-option,
  body.ios-theme:has(.space-share) .space-tabs-bar .space-more-panel .header-security-option {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.14) !important;
  }

}

.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;
}

/* Main Content Area — grid cell + flex column; scroll lives in .space-content. */
.space-main {
  grid-column: 1;
  grid-row: 1;
  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 {
  display: none !important;
}

/* 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;
    left: 0;
    right: 0;
    top: 12vh;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 8999;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
    border-top: 1px solid #eee;
    border-left: none;
    border-radius: 16px 16px 0 0;
  }

  .space-share.participants-panel-open .space-sidebar .participants-list {
    display: block;
    flex: 1;
    min-height: 0;
  }
}

/* Tabs — code + dock on one row */
.space-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  background: var(--card-bg);
  border-bottom: 1px solid #eee;
  padding: 4px 8px;
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  --space-h-ctrl: 30px;
  --space-code-h: 30px;
}

.space-tabs::-webkit-scrollbar {
  display: none;
}

.space-tabs-code-wrap {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  width: auto;
  gap: 0;
  background: transparent;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 0;
}

.space-tabs > .space-tabs-join-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: var(--space-h-ctrl);
}

.space-tabs > .space-tabs-share-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: var(--space-h-ctrl);
}

.space-tabs-bar .space-tabs-join-btn,
.space-tabs-bar .space-tabs-share-btn {
  flex: 0 0 auto;
  align-self: center;
  min-height: var(--space-h-ctrl);
}

.space-tabs-code-wrap .space-code-display {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: var(--space-code-h, 34px);
  max-height: var(--space-code-h, 34px);
  height: var(--space-code-h, 34px);
  resize: none;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  background: #ffffff !important;
  background-color: #ffffff !important;
  text-align: center;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  line-height: var(--space-code-h, 34px);
  padding: 0 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  box-sizing: border-box;
}

.space-tabs-share-btn {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  background: #ffffff;
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.space-tabs-share-btn:hover,
.space-tabs-share-btn:focus-visible {
  background: #f2f2f7;
  color: #0f0f14;
  -webkit-text-fill-color: #0f0f14;
}

.space-tabs-viewer-btn {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  background: rgba(129, 119, 240, 0.28);
  color: #ece8ff;
  -webkit-text-fill-color: #ece8ff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.space-tabs-viewer-btn:hover,
.space-tabs-viewer-btn:focus-visible {
  background: rgba(129, 119, 240, 0.42);
  color: #fff;
  -webkit-text-fill-color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}

.space-tabs-viewer-btn.hidden {
  display: none !important;
}

body.ios-theme.space-shell .space-tabs-share-btn,
body.ios-theme:has(.space-share) .space-tabs-share-btn {
  background: #ffffff !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
}

body.ios-theme.space-shell .space-tabs-share-btn:hover,
body.ios-theme:has(.space-share) .space-tabs-share-btn:hover {
  background: #f2f2f7 !important;
  color: #0f0f14 !important;
  -webkit-text-fill-color: #0f0f14 !important;
}

.space-tabs-join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.space-tabs-join-btn {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 44px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  background: #1e2230;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}

.space-tabs-join-btn:hover,
.space-tabs-join-btn:focus-visible {
  background: #2c3142;
  color: #fff;
}

.space-tabs-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.space-tabs-join-btn i,
.space-tabs-share-btn i {
  font-size: 0.78rem;
}

body.ios-theme.space-shell .space-tabs-join-btn,
body.ios-theme:has(.space-share) .space-tabs-join-btn {
  background: rgba(12, 14, 24, 0.92) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

body.ios-theme.space-shell .space-tabs-join-btn:hover,
body.ios-theme:has(.space-share) .space-tabs-join-btn:hover {
  background: rgba(30, 34, 48, 0.98) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

#space-join-request-modal.modal {
  z-index: 12100;
}

.space-join-request-content {
  max-width: 420px;
}

.space-join-request-text {
  margin: 0 0 16px;
  line-height: 1.45;
  color: #444;
}

.space-join-request-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.ios-theme.space-shell #space-join-request-modal .modal-content,
body.ios-theme:has(.space-share) #space-join-request-modal .modal-content {
  background: rgba(22, 24, 36, 0.96) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

body.ios-theme.space-shell #space-join-request-modal .space-join-request-text,
body.ios-theme:has(.space-share) #space-join-request-modal .space-join-request-text {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}

.space-tabs-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}

.space-tabs-nav .space-tab {
  white-space: nowrap;
  flex-shrink: 0;
}

.space-tabs-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-left: auto;
  min-width: 0;
}

/* /style.css marketing preview used to style every span here (flex:1; padding:12px). */
body.space-shell .space-tabs-bar > span,
body.space-shell .space-tabs-bar button span {
  flex: 0 0 auto;
  padding: 0;
  text-align: inherit;
  cursor: inherit;
}

body.space-shell .space-tabs-bar .space-tabs-participants-chip .space-presence-dot {
  display: block;
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  min-height: 7px !important;
  max-width: 7px !important;
  max-height: 7px !important;
  padding: 0 !important;
  flex: none !important;
  border-radius: 50% !important;
  transform: none !important;
}

body.space-shell .space-tabs-bar .space-tabs-participants-chip.space-presence--others .space-presence-dot {
  animation: none !important;
  box-shadow: none !important;
}

body.space-shell .space-tabs-bar .space-tabs-participants-chip.space-presence--connecting .space-presence-dot {
  animation: space-presence-pulse 2s ease-in-out infinite;
}

.space-tabs-participants-chip,
.space-tabs-participants-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--space-h-ctrl);
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: rgba(166, 147, 239, 0.18);
  color: var(--purple);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.space-tabs-participants-chip {
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.space-tabs-participants-chip .space-presence-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94a3b8;
}

.space-tabs-participants-chip.space-presence--connecting .space-presence-dot {
  animation: space-presence-pulse 2s ease-in-out infinite;
}

.space-tabs-participants-chip.space-presence--alone .space-presence-dot {
  background: #f59e0b;
}

.space-tabs-participants-chip.space-presence--others .space-presence-dot {
  background: #A693EF;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35);
  animation: space-presence-ring 2.6s ease-out infinite;
}

.space-tabs-participants-chip.space-presence--connecting {
  background: rgba(148, 163, 184, 0.22);
  color: #475569;
}

.space-tabs-participants-chip.space-presence--alone {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}

.space-tabs-participants-chip.space-presence--others {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
}

.space-tabs-participants-text {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-tabs-participants-chip:hover,
.space-tabs-participants-chip:focus-visible {
  background: rgba(21, 87, 36, 0.2);
  outline: 2px solid rgba(21, 87, 36, 0.35);
  outline-offset: 1px;
}

.space-tabs-participants-count {
  background: var(--purple);
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.72rem;
  line-height: 1.2;
}

.space-tabs-participants-label {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
}

.space-tabs-bar .space-tabs-invite-btn,
.space-tabs-bar .space-tabs-pair-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--space-h-ctrl);
  min-height: 0;
  max-height: var(--space-h-ctrl);
  padding: 0 10px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.space-tabs-bar .space-tabs-invite-btn {
  background: rgba(52, 199, 89, 0.22);
  color: #155724;
}

.space-tabs-bar .space-tabs-pair-btn {
  background: rgba(129, 119, 240, 0.22);
  color: #4a3f8f;
}

.space-tabs-bar .space-tabs-pair-btn.hidden {
  display: none !important;
}

.space-tabs-bar .space-tabs-invite-btn:hover {
  background: rgba(52, 199, 89, 0.34);
  color: #0d3d1a;
}

.space-tabs-bar .space-tabs-pair-btn:hover,
.space-tabs-bar .space-tabs-pair-btn:focus-visible {
  background: rgba(129, 119, 240, 0.34);
  color: #3d2f7a;
  outline: none;
}

.space-tabs-bar .space-tabs-invite-btn i,
.space-tabs-bar .space-tabs-pair-btn i {
  font-size: 0.78rem;
}

body.ios-theme.space-shell .space-tabs-bar .space-tabs-invite-btn,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-invite-btn {
  background: rgba(52, 199, 89, 0.28) !important;
  color: #d4f5dc !important;
  -webkit-text-fill-color: #d4f5dc !important;
}

body.ios-theme.space-shell .space-tabs-bar .space-tabs-pair-btn,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-pair-btn {
  background: rgba(129, 119, 240, 0.32) !important;
  color: #e8e4ff !important;
  -webkit-text-fill-color: #e8e4ff !important;
}

body.ios-theme.space-shell .space-tabs-bar .space-tabs-invite-btn:hover,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-invite-btn:hover {
  background: rgba(52, 199, 89, 0.4) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.ios-theme.space-shell .space-tabs-viewer-btn,
body.ios-theme:has(.space-share) .space-tabs-viewer-btn,
body:has(.space-share) .space-tabs-viewer-btn {
  background: rgba(129, 119, 240, 0.32) !important;
  color: #ece8ff !important;
  -webkit-text-fill-color: #ece8ff !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

body.ios-theme.space-shell .space-tabs-viewer-btn:hover,
body.ios-theme.space-shell .space-tabs-viewer-btn:focus-visible,
body.ios-theme:has(.space-share) .space-tabs-viewer-btn:hover,
body.ios-theme:has(.space-share) .space-tabs-viewer-btn:focus-visible,
body:has(.space-share) .space-tabs-viewer-btn:hover,
body:has(.space-share) .space-tabs-viewer-btn:focus-visible {
  background: rgba(129, 119, 240, 0.46) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
}

.space-tabs-important-chip {
  display: none;
  gap: 4px;
  height: var(--space-h-ctrl);
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 198, 75, 0.18);
  color: #92680a;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.space-main:has(.space-content[data-active-tab="chat"]) .space-tabs-bar > .space-tabs-important-chip {
  display: inline-flex;
}

.space-tabs-important-chip .space-important-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(146, 104, 10, 0.35);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.space-tabs-important-chip.important-chip--on-send .space-important-dot {
  opacity: 1;
  background: #FFC64B;
  box-shadow: 0 0 0 0 rgba(255, 198, 75, 0.45);
  animation: space-presence-pulse 2s ease-in-out infinite;
}

.space-tabs-important-chip.important-chip--open {
  background: rgba(255, 198, 75, 0.32);
  color: #7a5200;
}

.space-tabs-important-chip .fa-star {
  color: #e6a800;
  font-size: 0.82rem;
}

.space-tabs-important-text {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-tabs-important-chip:hover,
.space-tabs-important-chip:focus-visible {
  background: rgba(255, 198, 75, 0.28);
  outline: 2px solid rgba(255, 198, 75, 0.45);
  outline-offset: 1px;
}

.chat-important-on-send-row {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.chat-important-on-send-row .important-send-label {
  color: #1a1a24;
}

.space-tab {
  padding: 8px 11px;
  font-size: 0.85rem;
  color: var(--gray);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 2px solid transparent;
  transition: all .2s;
  white-space: nowrap;
  flex-shrink: 0;
}

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

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

body.ios-theme.space-shell .space-tabs-nav .space-tab,
body.ios-theme:has(.space-share) .space-tabs-nav .space-tab {
  color: rgba(255, 255, 255, 0.78) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important;
}

body.ios-theme.space-shell .space-tabs-nav .space-tab:hover,
body.ios-theme:has(.space-share) .space-tabs-nav .space-tab:hover {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
}

body.ios-theme.space-shell .space-tabs-nav .space-tab.active,
body.ios-theme:has(.space-share) .space-tabs-nav .space-tab.active {
  color: var(--yellow, #ffc64b) !important;
  -webkit-text-fill-color: var(--yellow, #ffc64b) !important;
  border-bottom-color: var(--yellow, #ffc64b) !important;
}

.space-tab .badge {
  background: var(--red);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .75rem;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.2;
  min-width: 1.25rem;
  text-align: center;
}

/* 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;
  background: transparent;
}

/* 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: clip;
  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%;
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  box-sizing: border-box;
}
#panel-chat .panel-pop-wrap {
  flex-shrink: 0;
}
#panel-chat #chat-panel-inner {
  position: relative;
  flex: 1 1 auto;
  min-height: min(280px, 50vh);
  display: flex;
  flex-direction: column;
  overflow: visible;
  --space-art-bottom-inset: 0px;
}

body.space-bottom-dock-active #panel-chat #chat-panel-inner {
  --space-art-bottom-inset: var(--space-bottom-dock-height, 112px);
}

/* Fixed art layer — stays above composer dock, does not scroll with messages */
.chat-art-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--space-art-bottom-inset, 0px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

/* Phase A — new Space: quick actions only, art hidden (GI stays visible) */
#chat-panel-inner.space-art-idle .chat-art-layer {
  visibility: hidden;
  opacity: 0;
}

/* Empty Space with art logo — soft frosted backdrop, icons stay sharp */
#chat-panel-inner.space-art-active:not(.space-art-gi-open):not(.has-chat-feed) .chat-art-layer {
  filter: blur(14px) saturate(0.72);
  opacity: 0.88;
}

#chat-panel-inner.space-art-active:not(.space-art-gi-open):not(.has-chat-feed) .space-media-dock {
  filter: none;
  isolation: isolate;
}

#chat-panel-inner.space-art-active .chat-art-layer,
#chat-panel-inner.space-art-gi-open .chat-art-layer {
  visibility: visible;
  opacity: 1;
}

/* Phase C — GI fullscreen overlay (mobile + desktop) */
#chat-panel-inner.space-art-gi-open .chat-art-layer {
  position: fixed;
  inset: 0;
  bottom: 0 !important;
  z-index: 10000;
  pointer-events: auto;
}

#chat-panel-inner.space-art-gi-open #space-chat-art {
  filter: none !important;
  transform: none !important;
}

#chat-panel-inner.space-art-gi-open .space-chat-art__slide.is-active {
  background-size: contain;
  background-position: center center;
}

body.space-art-gi-lock {
  overflow: hidden;
}

/* GI fullscreen: shell above body-portaled media dock (9010) and bottom composer (9005) */
body.space-art-gi-lock .space-share {
  z-index: 10001;
}

body.space-art-gi-lock #space-media-dock {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.space-art-gi-lock .space-bottom-dock {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Channel overlay stays visible over GI fullscreen painting */
body.space-art-gi-lock .space-channel-overlay {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
  z-index: 10065 !important;
}

body.space-art-gi-lock #space-art-caption.space-art-caption {
  bottom: calc(var(--space-channel-overlay-height, 40px) + 10px) !important;
}

#chat-panel-inner.space-art-gi-open > *:not(.chat-art-layer):not(.space-art-caption):not(.space-gi-controls) {
  pointer-events: none !important;
  user-select: none;
}

#chat-panel-inner.space-art-gi-open .space-art-caption,
body.space-gi-chrome-portaled #space-art-caption.space-art-caption {
  visibility: visible !important;
  opacity: 1 !important;
}

body.space-gi-chrome-portaled #space-art-caption .space-art-caption__toggle,
#chat-panel-inner.space-art-gi-open .space-art-caption .space-art-caption__toggle,
.space-art-caption--gi-open .space-art-caption__toggle,
.space-art-caption__toggle.is-open {
  width: 44px;
  height: 44px;
  border-width: 2px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 8px 24px rgba(8, 6, 18, 0.35);
}

body.space-gi-chrome-portaled #space-art-caption .space-art-caption__gi,
.space-art-caption--gi-open .space-art-caption__gi {
  font-size: 0.74rem;
}

body.space-art-gi-lock .space-gi-controls:not(.hidden),
body.space-gi-chrome-portaled #space-gi-controls.space-gi-controls:not(.hidden) {
  z-index: 10055;
  bottom: calc(var(--space-channel-overlay-height, 40px) + 62px) !important;
}

body.space-bottom-dock-active:not(.space-art-gi-lock) #space-gi-controls.space-gi-controls {
  bottom: calc(var(--space-bottom-dock-height, 112px) + var(--space-channel-overlay-height, 40px) + 62px);
}

.space-gi-controls,
body.space-gi-chrome-portaled #space-gi-controls.space-gi-controls {
  position: fixed;
  z-index: 10055;
  left: 50%;
  right: auto;
  bottom: calc(var(--space-channel-overlay-height, 40px) + max(12px, env(safe-area-inset-bottom)) + 52px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(92vw, 360px);
  pointer-events: auto;
}

.space-gi-controls.hidden {
  display: none !important;
}

/* GI fullscreen — object info (I) */
.space-gi-info-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 10056;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #c99200;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 0 0 2px rgba(129, 119, 240, 0.22),
    0 8px 24px rgba(8, 6, 18, 0.35);
  pointer-events: auto;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.space-gi-info-btn.hidden {
  display: none !important;
}

.space-gi-info-btn:hover,
.space-gi-info-btn:focus-visible {
  border-color: rgba(255, 198, 75, 0.9);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 230, 0.98));
  outline: none;
}

.space-gi-info-btn[aria-expanded="true"] {
  border-color: rgba(255, 198, 75, 0.95);
  background: linear-gradient(135deg, rgba(255, 248, 220, 1), rgba(255, 230, 170, 0.98));
  color: #9a7200;
}

.space-gi-info-btn__i {
  display: block;
  transform: translateY(-1px);
}

.space-gi-info-panel {
  position: fixed;
  inset: 0;
  z-index: 10058;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: rgba(8, 6, 18, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}

.space-gi-info-panel.hidden {
  display: none !important;
}

.space-gi-info-panel__card {
  position: relative;
  width: min(100%, 400px);
  max-height: min(82dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 18px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 255, 0.96));
  color: var(--dark, #2a2e36);
  box-shadow: 0 18px 48px rgba(8, 6, 18, 0.42);
}

.space-gi-info-panel__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(42, 46, 54, 0.08);
  color: var(--dark, #2a2e36);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.space-gi-info-panel__close:hover,
.space-gi-info-panel__close:focus-visible {
  background: rgba(129, 119, 240, 0.14);
  outline: none;
}

.space-gi-info-panel__eyebrow {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple, #8177f0);
}

.space-gi-info-panel__title {
  margin: 0 0 6px;
  padding-right: 28px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dark, #2a2e36);
}

.space-gi-info-panel__artist {
  margin: 0 0 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #4a3f7a;
}

.space-gi-info-panel__artist[hidden] {
  display: none !important;
}

.space-gi-info-panel__facts {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: minmax(88px, 34%) 1fr;
  gap: 8px 12px;
}

.space-gi-info-panel__facts dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7280;
}

.space-gi-info-panel__facts dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--dark, #2a2e36);
}

.space-gi-info-panel__source {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(129, 119, 240, 0.18);
  font-size: 0.74rem;
  line-height: 1.4;
  color: #6b7280;
}

.space-gi-info-panel__source[hidden] {
  display: none !important;
}

.space-gi-controls__region,
.space-gi-controls__back {
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(129, 119, 240, 0.45);
  background: rgba(255, 255, 255, 0.96);
  color: var(--dark, #2a2e36);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(45, 35, 90, 0.18);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.space-gi-controls__region:hover,
.space-gi-controls__region:focus-visible,
.space-gi-controls__back:hover,
.space-gi-controls__back:focus-visible {
  border-color: rgba(255, 198, 75, 0.75);
  background: rgba(255, 198, 75, 0.14);
  outline: none;
}

.space-gi-controls__back {
  font-weight: 500;
  font-size: 12px;
}

/* Region timeline overlay inside GI fullscreen */
#chat-panel-inner.space-art-gi-open.space-art-gi-region .space-chat-art--split {
  position: relative;
  height: 100%;
}

#chat-panel-inner.space-art-gi-open.space-art-gi-region .space-chat-art__half--art {
  position: absolute;
  inset: 0;
  flex: none !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

#chat-panel-inner.space-art-gi-open.space-art-gi-region .space-chat-art__divider {
  display: none !important;
}

#chat-panel-inner.space-art-gi-open.space-art-gi-region .space-chat-art__half--history {
  position: absolute;
  inset: 0;
  flex: none !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1;
  z-index: 2;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#chat-panel-inner.space-art-gi-open.space-art-gi-region .space-chat-history__body {
  max-width: min(92vw, 480px);
  margin: 0 auto;
  padding: 24px 18px 32px;
}

/* After first user message: keep full split backdrop, blur it — do not shrink */
#chat-panel-inner.has-chat-feed .chat-art-layer {
  bottom: var(--space-art-bottom-inset, 0px);
}

#chat-panel-inner.has-chat-feed #space-chat-art {
  filter: blur(16px) saturate(1.08);
  transform: scale(1.06);
  transform-origin: center center;
}

#chat-panel-inner.has-chat-feed .space-chat-art__slide:not(.is-logo-fallback) {
  background-size: cover;
  background-position: center center;
}

#chat-panel-inner.has-chat-feed .space-chat-art__veil {
  background:
    linear-gradient(180deg, rgba(8, 6, 14, 0.22) 0%, rgba(8, 6, 14, 0.38) 55%, rgba(8, 6, 14, 0.48) 100%);
}

#chat-panel-inner.has-chat-feed .space-chat-history__veil {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(42, 46, 54, 0.2) 55%, rgba(42, 46, 54, 0.28) 100%);
}

#chat-panel-inner.has-chat-feed .space-chat-art__half--history.is-active .space-chat-history__body {
  opacity: 0.82;
}

#chat-panel-inner.has-chat-feed #panel-chat .chat-messages {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Glass only on each object — not full rows or the message list */
#chat-panel-inner.has-chat-feed .chat-messages-feed {
  position: relative;
  z-index: 1;
}

#chat-panel-inner.has-chat-feed .chat-message-main {
  width: fit-content;
  max-width: 100%;
}

#chat-panel-inner.has-chat-feed .chat-message.sent .chat-message-main {
  align-items: flex-end;
}

#chat-panel-inner.has-chat-feed .chat-message.received .chat-message-main {
  align-items: flex-start;
}

#chat-panel-inner.has-chat-feed .chat-message .bubble {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}

#chat-panel-inner.has-chat-feed .chat-message.sent .bubble:not(.bubble--object):not(.bubble--owner):not(.bubble--outbox) {
  background: var(--space-chat-card-glass-bg, rgba(255, 255, 255, 0.14));
  backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%));
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%));
  border: 1px solid var(--space-chat-card-glass-border, rgba(255, 255, 255, 0.28));
  color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94));
  -webkit-text-fill-color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94));
  box-shadow: var(--space-chat-card-glass-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 28px rgba(0, 0, 0, 0.16));
}

#chat-panel-inner.has-chat-feed .chat-message.received .bubble:not(.bubble--object):not(.bubble--inbox) {
  background: var(--space-chat-card-owner-bg, rgba(255, 255, 255, 0.97));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--space-chat-card-owner-border, rgba(166, 147, 239, 0.48));
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
  box-shadow: var(--space-chat-card-owner-shadow, 0 2px 12px rgba(129, 119, 240, 0.08));
}

#chat-panel-inner.has-chat-feed .chat-message.system .bubble {
  width: fit-content;
  max-width: min(92%, 420px);
  background: linear-gradient(160deg, rgba(228, 222, 244, 0.92), rgba(210, 202, 232, 0.88));
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid rgba(129, 119, 240, 0.42);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 7px 22px rgba(0, 0, 0, 0.32);
}

#chat-panel-inner.has-chat-feed .chat-msg-star,
#chat-panel-inner.has-chat-feed .chat-msg-forward,
#chat-panel-inner.has-chat-feed .chat-msg-download,
#chat-panel-inner.has-chat-feed .chat-msg-select-wrap,
#chat-panel-inner.has-chat-feed .chat-msg-tool {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

#chat-panel-inner.has-chat-feed .chat-live-notice {
  width: fit-content;
  max-width: min(92vw, 360px);
}

#chat-panel-inner.has-chat-feed .chat-live-notice__card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(248, 246, 255, 0.68));
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  box-shadow:
    0 3px 14px rgba(8, 6, 18, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

#chat-panel-inner.has-chat-feed .space-art-caption {
  filter: none;
}

/* iOS flat theme: compact per-object glass when art backdrop is active */
body.ios-theme.space-shell #chat-panel-inner.has-chat-feed .chat-message .bubble:not(.bubble--inbox):not(.bubble--object):not(.bubble--outbox),
body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-message .bubble:not(.bubble--inbox):not(.bubble--object):not(.bubble--outbox) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 3px 10px rgba(8, 6, 18, 0.18) !important;
}

body.ios-theme.space-shell #chat-panel-inner.has-chat-feed .chat-message.sent .bubble:not(.bubble--owner):not(.bubble--object):not(.bubble--outbox),
body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-message.sent .bubble:not(.bubble--owner):not(.bubble--object):not(.bubble--outbox) {
  background: var(--space-chat-card-glass-bg, rgba(255, 255, 255, 0.14)) !important;
  backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
  border: 1px solid var(--space-chat-card-glass-border, rgba(255, 255, 255, 0.28)) !important;
  color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94)) !important;
  box-shadow: var(--space-chat-card-glass-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 28px rgba(0, 0, 0, 0.16)) !important;
}

body.ios-theme.space-shell #chat-panel-inner.has-chat-feed .chat-message.received .bubble:not(.bubble--inbox):not(.bubble--object),
body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-message.received .bubble:not(.bubble--inbox):not(.bubble--object) {
  background: var(--space-chat-card-owner-bg, rgba(255, 255, 255, 0.97)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--space-chat-card-owner-border, rgba(166, 147, 239, 0.48)) !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  box-shadow: var(--space-chat-card-owner-shadow, 0 2px 12px rgba(129, 119, 240, 0.08)) !important;
}

body.ios-theme.space-shell #chat-panel-inner.has-chat-feed .chat-msg-tool,
body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-msg-tool,
body.ios-theme.space-shell #chat-panel-inner.has-chat-feed .chat-msg-star,
body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-msg-star,
body.ios-theme.space-shell #chat-panel-inner.has-chat-feed .chat-msg-forward,
body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-msg-forward,
body.ios-theme.space-shell #chat-panel-inner.has-chat-feed .chat-msg-download,
body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-msg-download,
body.ios-theme.space-shell #chat-panel-inner.has-chat-feed .chat-msg-select-wrap,
body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-msg-select-wrap {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow: none !important;
}

#panel-chat .chat-composer {
  flex-shrink: 0;
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}
#panel-chat .chat-important-block {
  flex-shrink: 0;
}
#panel-chat .chat-messages {
  position: relative;
  z-index: 1;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Left inset clears the GI painting-info button (38px + 10px offset + gap) */
  padding: 16px 18px 16px max(56px, calc(18px + env(safe-area-inset-left)));
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  margin-top: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Anchor first messages at the bottom, above the composer — not under the media dock */
#panel-chat .chat-messages-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  min-height: min-content;
  flex-shrink: 0;
  /* Keep last messages above the GI painting-info button (bottom-left) */
  padding-bottom: var(--space-art-caption-clearance, 52px);
}

/* 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 #post-panel-inner,
.content-panel #admin-panel-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

.chat-message {
  max-width: 75%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

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

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

.chat-message .sender {
  font-size: .8rem;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  margin-bottom: 4px;
}

.chat-message .sender.peer-label-name,
.participant-name.peer-label-name {
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
  margin: -2px -6px 4px;
  display: inline-block;
  transition: background 0.15s ease;
}

.chat-message .sender.peer-label-name:hover,
.chat-message .sender.peer-label-name:focus-visible,
.participant-name.peer-label-name:hover,
.participant-name.peer-label-name:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.chat-message .peer-label-input {
  max-width: min(220px, 100%);
  margin-bottom: 4px;
  font-size: 0.88rem;
  padding: 6px 10px;
  min-height: 36px;
}

#space-participants-modal .participant-name.peer-label-name {
  margin: 0;
  padding: 4px 8px;
}

#space-participants-modal .participant-name.peer-label-name:hover,
#space-participants-modal .participant-name.peer-label-name:focus-visible {
  background: rgba(129, 119, 240, 0.16);
}

.chat-message .bubble {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: .95rem;
  line-height: 1.5;
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}

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

.chat-message.received .bubble {
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.chat-message .time {
  font-size: .75rem;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  margin-top: 4px;
}

.chat-message.received .time,
.chat-message.received .chat-message-actions .time {
  color: rgba(26, 26, 36, 0.62) !important;
  -webkit-text-fill-color: rgba(26, 26, 36, 0.62) !important;
  text-shadow: none;
}

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

#chat-panel-inner.has-presence-notice .chat-message--presence-notice {
  position: relative;
  z-index: 3;
}

/* Empty chat — shared plate + four individual action plates */
#panel-chat .chat-messages-feed .chat-empty-quick-actions,
#chat-panel-inner .chat-empty-quick-actions {
  position: relative;
  z-index: 4;
  width: min(100%, 408px);
  max-width: min(94vw, 408px);
  margin: 12px auto 16px;
  padding: 16px 14px 14px;
  border-radius: 22px;
  background: linear-gradient(165deg, #120c20 0%, #1a122c 52%, #140f24 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  isolation: isolate;
}
.chat-empty-quick-actions.hidden {
  display: none !important;
}
.chat-empty-quick-actions__lead {
  margin: 0 0 12px;
  padding: 0 4px;
  font-size: 0.9rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.96);
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.chat-empty-quick-actions__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.chat-empty-quick-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 12px 12px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(42, 34, 64, 0.98), rgba(30, 24, 48, 0.96));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 8px 22px rgba(0, 0, 0, 0.34);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: rgba(255, 255, 255, 0.94);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  touch-action: manipulation;
}
.chat-empty-quick-action:hover,
.chat-empty-quick-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(196, 181, 253, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 12px 28px rgba(0, 0, 0, 0.42);
  outline: none;
}
.chat-empty-quick-action:active {
  transform: scale(0.98);
}
.chat-empty-quick-action--file {
  background: linear-gradient(155deg, rgba(58, 44, 18, 0.98), rgba(42, 32, 14, 0.96));
  border-color: rgba(255, 193, 7, 0.28);
}
.chat-empty-quick-action--call {
  background: linear-gradient(155deg, rgba(20, 48, 30, 0.98), rgba(14, 36, 24, 0.96));
  border-color: rgba(102, 187, 106, 0.28);
}
.chat-empty-quick-action--video {
  background: linear-gradient(155deg, rgba(48, 28, 72, 0.98), rgba(34, 20, 54, 0.96));
  border-color: rgba(166, 147, 239, 0.32);
}
.chat-empty-quick-action--screen {
  background: linear-gradient(155deg, rgba(16, 42, 58, 0.98), rgba(12, 32, 46, 0.96));
  border-color: rgba(76, 201, 240, 0.28);
}
.chat-empty-quick-action__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #e8e0ff;
  font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.chat-empty-quick-action--call .chat-empty-quick-action__icon {
  color: #b8f0c0;
  background: rgba(102, 187, 106, 0.2);
}
.chat-empty-quick-action--screen .chat-empty-quick-action__icon {
  color: #b8ecff;
  background: rgba(76, 201, 240, 0.2);
}
.chat-empty-quick-action--file .chat-empty-quick-action__icon {
  color: #ffe082;
  background: rgba(255, 193, 7, 0.2);
}
.chat-empty-quick-action--video .chat-empty-quick-action__icon {
  color: #dccfff;
  background: rgba(166, 147, 239, 0.22);
}
.chat-empty-quick-action__label {
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.96);
}
.chat-empty-quick-action__hint {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.3;
}

body.ios-theme #panel-chat .chat-messages-feed .chat-empty-quick-actions,
body.ios-theme #chat-panel-inner .chat-empty-quick-actions,
body.ios-theme.space-shell #panel-chat .chat-messages-feed .chat-empty-quick-actions,
body.ios-theme.space-shell #chat-panel-inner .chat-empty-quick-actions,
body.ios-theme:has(.space-share) #panel-chat .chat-messages-feed .chat-empty-quick-actions,
body.ios-theme:has(.space-share) #chat-panel-inner .chat-empty-quick-actions {
  background: linear-gradient(165deg, #120c20 0%, #1a122c 52%, #140f24 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.ios-theme #panel-chat .chat-empty-quick-action,
body.ios-theme.space-shell #panel-chat .chat-empty-quick-action,
body.ios-theme:has(.space-share) #panel-chat .chat-empty-quick-action {
  color: rgba(255, 255, 255, 0.94) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;
}

/* File action prompts — incoming (chat) and outgoing (files panel) */
#panel-chat #chat-panel-inner.has-incoming-file-prompt::before,
#panel-files.has-outgoing-file-prompt .files-grid-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  background: rgba(8, 6, 18, 0.38);
  pointer-events: auto;
}

#panel-chat #chat-panel-inner .chat-incoming-file-prompt,
#panel-files .files-outgoing-prompt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: min(92vw, 320px);
  max-height: min(78vh, calc(100% - 24px));
  margin: 0;
  padding: 10px 10px 8px;
  border-radius: 16px;
  border: 1px solid rgba(129, 119, 240, 0.35);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(248, 246, 255, 0.94));
  box-shadow: 0 14px 36px rgba(45, 35, 90, 0.24);
  pointer-events: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#panel-files .files-grid-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#panel-files .files-grid-wrap.files-drop-active {
  outline: 2px dashed rgba(129, 119, 240, 0.55);
  outline-offset: -4px;
  background: rgba(129, 119, 240, 0.06);
}

.chat-file-action-prompt.hidden,
.chat-file-share-panel.hidden {
  display: none !important;
}
.chat-file-action-prompt__lead {
  margin: 0 0 4px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #1f2430;
  -webkit-text-fill-color: #1f2430;
  text-align: center;
}
.chat-file-action-prompt__meta {
  margin: 0 0 8px;
  font-size: 0.62rem;
  font-weight: 600;
  color: #5c6478;
  -webkit-text-fill-color: #5c6478;
  text-align: center;
  line-height: 1.35;
  word-break: break-word;
}
.chat-file-action-prompt__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.chat-file-action-prompt .chat-empty-quick-action {
  gap: 2px;
  padding: 6px 6px 5px;
  border-radius: 11px;
  border-color: rgba(129, 119, 240, 0.22);
  background: linear-gradient(160deg, #ffffff 0%, #f3efff 100%);
  box-shadow: 0 4px 12px rgba(45, 35, 90, 0.1);
  color: #1f2430;
  -webkit-text-fill-color: #1f2430;
}
.chat-file-action-prompt .chat-empty-quick-action:hover,
.chat-file-action-prompt .chat-empty-quick-action:focus-visible {
  border-color: rgba(129, 119, 240, 0.42);
  box-shadow: 0 6px 16px rgba(45, 35, 90, 0.14);
}
.chat-file-action-prompt .chat-empty-quick-action__icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 0.62rem;
  box-shadow: none;
}
.chat-file-action-prompt .chat-empty-quick-action__label {
  font-size: 0.58rem;
  font-weight: 800;
  color: #1f2430;
  -webkit-text-fill-color: #1f2430;
}
.chat-file-action-prompt .chat-empty-quick-action__hint {
  font-size: 0.5rem;
  color: #5c6478;
  -webkit-text-fill-color: #5c6478;
}
.chat-file-action-prompt__grid--incoming {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 360px) {
  .chat-file-action-prompt__grid--incoming {
    grid-template-columns: repeat(4, 1fr);
  }
}
.chat-file-action-prompt__open-here .chat-empty-quick-action__icon {
  color: #8a5a00;
  background: rgba(255, 198, 75, 0.32);
}
.chat-file-action-prompt__open-here:disabled,
.chat-file-action-prompt__open-here.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
.chat-message.chat-message--file-focus {
  animation: chat-message-file-focus 2.2s ease-out;
}
@keyframes chat-message-file-focus {
  0%,
  18% {
    box-shadow: 0 0 0 3px rgba(255, 198, 75, 0.75);
    border-radius: 14px;
  }
  100% {
    box-shadow: none;
  }
}
.chat-file-action-prompt__open .chat-empty-quick-action__icon {
  color: #3d2a9e;
  background: rgba(129, 119, 240, 0.3);
}
.chat-file-action-prompt__save .chat-empty-quick-action__icon {
  color: #1b5e20;
  background: rgba(102, 187, 106, 0.28);
}
.chat-file-action-prompt__share .chat-empty-quick-action__icon {
  color: #0d47a1;
  background: rgba(33, 150, 243, 0.24);
}
.chat-file-action-prompt__send .chat-empty-quick-action__icon {
  color: #7a5200;
  background: rgba(255, 198, 75, 0.4);
}
.chat-file-action-prompt__open:disabled,
.chat-file-action-prompt__open.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.chat-file-action-prompt__cancel {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(129, 119, 240, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: #1f2430;
  -webkit-text-fill-color: #1f2430;
  font: inherit;
  font-size: 0.6rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chat-file-action-prompt__cancel:hover,
.chat-file-action-prompt__cancel:focus-visible {
  background: rgba(255, 198, 75, 0.18);
  border-color: rgba(255, 198, 75, 0.55);
  outline: none;
}

/* Post or Share — attach flow chooser */
.chat-file-intent-modal {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: rgba(8, 6, 18, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  pointer-events: auto;
}

#panel-chat #chat-panel-inner.has-file-intent-modal {
  position: relative;
}

.chat-file-intent-modal.hidden {
  display: none !important;
}

.chat-file-intent-modal__glow {
  position: absolute;
  width: min(220px, 56vw);
  height: min(220px, 56vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129, 119, 240, 0.34) 0%, rgba(129, 119, 240, 0) 68%);
  pointer-events: none;
  filter: blur(2px);
}

.chat-file-intent-modal__main {
  position: relative;
  z-index: 1;
  width: min(100%, 300px);
  margin: auto 0;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: linear-gradient(165deg, #ffffff 0%, #f7f4ff 48%, #fff9ec 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 16px 36px rgba(24, 18, 48, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.chat-file-intent-modal__badge {
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 198, 75, 0.42), rgba(129, 119, 240, 0.26));
  color: #3d2a9e;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(129, 119, 240, 0.16);
}

.chat-file-intent-modal__lead {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
  color: #1f2430;
  -webkit-text-fill-color: #1f2430;
}

.chat-file-intent-modal__meta {
  margin: 0 0 10px;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: center;
  color: #5c6478;
  -webkit-text-fill-color: #5c6478;
  line-height: 1.35;
  word-break: break-word;
}

.chat-file-intent-modal__question {
  margin: 0 0 10px;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  color: #4f38b8;
  -webkit-text-fill-color: #4f38b8;
}

.chat-file-intent-modal__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.chat-file-intent-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px 10px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: rgba(255, 255, 255, 0.94);
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  touch-action: manipulation;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.chat-file-intent-btn:hover,
.chat-file-intent-btn:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.chat-file-intent-btn__icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.95rem;
}

.chat-file-intent-btn__label {
  font-size: 0.9rem;
  font-weight: 800;
  color: #1f2430;
  -webkit-text-fill-color: #1f2430;
}

.chat-file-intent-btn__hint {
  font-size: 0.74rem;
  font-weight: 600;
  color: #5c6478;
  -webkit-text-fill-color: #5c6478;
}

.chat-file-intent-btn--post {
  border-color: rgba(34, 140, 80, 0.35);
  box-shadow: 0 8px 22px rgba(34, 140, 80, 0.12);
}

.chat-file-intent-btn--post .chat-file-intent-btn__icon {
  background: linear-gradient(165deg, #e8fff0, #c9f0d8);
  color: #1a6b40;
}

.chat-file-intent-btn--post:hover,
.chat-file-intent-btn--post:focus-visible {
  border-color: rgba(34, 140, 80, 0.55);
  box-shadow: 0 12px 28px rgba(34, 140, 80, 0.18);
}

.chat-file-intent-btn--share {
  border-color: rgba(129, 119, 240, 0.38);
  box-shadow: 0 8px 22px rgba(129, 119, 240, 0.14);
}

.chat-file-intent-btn--share .chat-file-intent-btn__icon {
  background: linear-gradient(165deg, #f5f0ff, #ddd4ff);
  color: #4f38b8;
}

.chat-file-intent-btn--share:hover,
.chat-file-intent-btn--share:focus-visible {
  border-color: rgba(129, 119, 240, 0.58);
  box-shadow: 0 12px 28px rgba(129, 119, 240, 0.22);
}

.chat-file-intent-btn--post .chat-file-intent-btn__icon {
  background: linear-gradient(165deg, #dff8ea, #b8eacb);
  color: #145c32;
}

.chat-file-intent-btn--share .chat-file-intent-btn__icon {
  background: linear-gradient(165deg, #efe8ff, #d5cbff);
  color: #3d2a9e;
}

.chat-file-intent-modal__cancel {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: #5c6478;
  -webkit-text-fill-color: #5c6478;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.chat-file-intent-modal__cancel:hover,
.chat-file-intent-modal__cancel:focus-visible {
  color: #1f2430;
  -webkit-text-fill-color: #1f2430;
  outline: none;
}

#chat-file-intent-modal .chat-file-share-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 300px);
  margin: auto 0;
  padding: 10px 10px 8px;
  border-radius: 18px;
  background: linear-gradient(165deg, #ffffff 0%, #f7f4ff 52%, #fff9ec 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 16px 36px rgba(24, 18, 48, 0.24);
}

body.ios-theme #chat-file-intent-modal .chat-file-intent-modal__main,
body.ios-theme #chat-file-intent-modal .chat-file-share-panel,
body.ios-theme.space-shell #chat-file-intent-modal .chat-file-intent-modal__main,
body.ios-theme.space-shell #chat-file-intent-modal .chat-file-share-panel,
body.ios-theme:has(.space-share) #chat-file-intent-modal .chat-file-intent-modal__main,
body.ios-theme:has(.space-share) #chat-file-intent-modal .chat-file-share-panel {
  background: linear-gradient(165deg, #1e2230 0%, #252a3a 52%, #1a2030 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92);
}

body.ios-theme #chat-file-intent-modal .chat-file-intent-modal__lead,
body.ios-theme #chat-file-intent-modal .chat-file-intent-btn__label,
body.ios-theme #chat-file-intent-modal .chat-file-share-panel__title,
body.ios-theme.space-shell #chat-file-intent-modal .chat-file-intent-modal__lead,
body.ios-theme.space-shell #chat-file-intent-modal .chat-file-intent-btn__label,
body.ios-theme.space-shell #chat-file-intent-modal .chat-file-share-panel__title,
body.ios-theme:has(.space-share) #chat-file-intent-modal .chat-file-intent-modal__lead,
body.ios-theme:has(.space-share) #chat-file-intent-modal .chat-file-intent-btn__label,
body.ios-theme:has(.space-share) #chat-file-intent-modal .chat-file-share-panel__title {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
}

body.ios-theme #chat-file-intent-modal .chat-file-intent-modal__meta,
body.ios-theme #chat-file-intent-modal .chat-file-intent-btn__hint,
body.ios-theme #chat-file-intent-modal .chat-file-intent-modal__cancel,
body.ios-theme.space-shell #chat-file-intent-modal .chat-file-intent-modal__meta,
body.ios-theme.space-shell #chat-file-intent-modal .chat-file-intent-btn__hint,
body.ios-theme.space-shell #chat-file-intent-modal .chat-file-intent-modal__cancel,
body.ios-theme:has(.space-share) #chat-file-intent-modal .chat-file-intent-modal__meta,
body.ios-theme:has(.space-share) #chat-file-intent-modal .chat-file-intent-btn__hint,
body.ios-theme:has(.space-share) #chat-file-intent-modal .chat-file-intent-modal__cancel {
  color: rgba(255, 255, 255, 0.68) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.68) !important;
}

body.ios-theme #chat-file-intent-modal .chat-file-intent-btn,
body.ios-theme.space-shell #chat-file-intent-modal .chat-file-intent-btn,
body.ios-theme:has(.space-share) #chat-file-intent-modal .chat-file-intent-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

body.ios-theme #chat-file-intent-modal .chat-file-intent-btn--post .chat-file-intent-btn__icon,
body.ios-theme.space-shell #chat-file-intent-modal .chat-file-intent-btn--post .chat-file-intent-btn__icon,
body.ios-theme:has(.space-share) #chat-file-intent-modal .chat-file-intent-btn--post .chat-file-intent-btn__icon {
  background: rgba(34, 140, 80, 0.32) !important;
  color: #b8f0c8 !important;
}

body.ios-theme #chat-file-intent-modal .chat-file-intent-btn--share .chat-file-intent-btn__icon,
body.ios-theme.space-shell #chat-file-intent-modal .chat-file-intent-btn--share .chat-file-intent-btn__icon,
body.ios-theme:has(.space-share) #chat-file-intent-modal .chat-file-intent-btn--share .chat-file-intent-btn__icon {
  background: rgba(129, 119, 240, 0.32) !important;
  color: #e8e0ff !important;
}

body.ios-theme #panel-chat .chat-file-action-prompt .chat-empty-quick-action,
body.ios-theme.space-shell #panel-chat .chat-file-action-prompt .chat-empty-quick-action,
body.ios-theme:has(.space-share) #panel-chat .chat-file-action-prompt .chat-empty-quick-action,
body.ios-theme #panel-files .chat-file-action-prompt .chat-empty-quick-action,
body.ios-theme.space-shell #panel-files .chat-file-action-prompt .chat-empty-quick-action,
body.ios-theme:has(.space-share) #panel-files .chat-file-action-prompt .chat-empty-quick-action {
  color: #1f2430 !important;
  -webkit-text-fill-color: #1f2430 !important;
  background: linear-gradient(160deg, #ffffff 0%, #f3efff 100%) !important;
  border-color: rgba(129, 119, 240, 0.28) !important;
}

body.ios-theme #panel-chat .chat-file-action-prompt .chat-empty-quick-action__label,
body.ios-theme.space-shell #panel-chat .chat-file-action-prompt .chat-empty-quick-action__label,
body.ios-theme:has(.space-share) #panel-chat .chat-file-action-prompt .chat-empty-quick-action__label,
body.ios-theme #panel-files .chat-file-action-prompt .chat-empty-quick-action__label,
body.ios-theme.space-shell #panel-files .chat-file-action-prompt .chat-empty-quick-action__label,
body.ios-theme:has(.space-share) #panel-files .chat-file-action-prompt .chat-empty-quick-action__label {
  color: #1f2430 !important;
  -webkit-text-fill-color: #1f2430 !important;
}

body.ios-theme #panel-chat .chat-file-action-prompt .chat-empty-quick-action__hint,
body.ios-theme.space-shell #panel-chat .chat-file-action-prompt .chat-empty-quick-action__hint,
body.ios-theme:has(.space-share) #panel-chat .chat-file-action-prompt .chat-empty-quick-action__hint,
body.ios-theme #panel-files .chat-file-action-prompt .chat-empty-quick-action__hint,
body.ios-theme.space-shell #panel-files .chat-file-action-prompt .chat-empty-quick-action__hint,
body.ios-theme:has(.space-share) #panel-files .chat-file-action-prompt .chat-empty-quick-action__hint {
  color: #5c6478 !important;
  -webkit-text-fill-color: #5c6478 !important;
}

.chat-file-action-prompt .chat-file-share-panel__btn,
#chat-file-intent-modal .chat-file-share-panel__btn {
  padding: 5px 8px;
  font-size: 0.64rem;
  border-radius: 9px;
}

.chat-file-share-panel__title {
  margin: 0 0 10px;
  font-size: 0.88rem;
  font-weight: 800;
  text-align: center;
  color: var(--dark, #2a2e36);
}
.chat-file-share-panel__code-label {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray, #6b7280);
}
.chat-file-share-panel__code {
  display: block;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(129, 119, 240, 0.1);
  font-size: 0.78rem;
  font-weight: 700;
  word-break: break-all;
  text-align: center;
  color: #3d2860;
}
.chat-file-share-panel__code--file {
  background: rgba(33, 150, 243, 0.1);
  color: #0d47a1;
}
.chat-file-share-panel__code--grigsi {
  background: rgba(76, 201, 240, 0.12);
  color: #0d5a7a;
  font-size: 0.72rem;
}
.chat-file-share-panel__ttl {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  color: var(--gray, #6b7280);
}
.chat-file-share-panel__link {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(129, 119, 240, 0.25);
  border-radius: 10px;
  font-size: 0.72rem;
  background: #fff;
  color: var(--dark, #2a2e36);
}
.chat-file-share-panel__qr {
  margin: 0 auto 10px;
  width: fit-content;
}
.chat-file-share-panel__actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.chat-file-share-panel__btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(129, 119, 240, 0.3);
  background: rgba(255, 255, 255, 0.8);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.chat-file-share-panel__btn--primary {
  background: var(--purple, #a693ef);
  border-color: var(--purple, #a693ef);
  color: #fff;
}

/* Live activity notices — screen / video / file (tap to open) */
.chat-live-notice {
  max-width: min(92vw, 360px);
  margin: 6px 0;
}
.chat-live-notice__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(129, 119, 240, 0.35);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(129, 119, 240, 0.14), rgba(76, 201, 240, 0.08));
  box-shadow: 0 8px 24px rgba(45, 35, 90, 0.12);
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  animation: chat-live-notice-in 0.45s ease;
}
.chat-live-notice--screen .chat-live-notice__card {
  border-color: rgba(76, 201, 240, 0.45);
  background: linear-gradient(135deg, rgba(76, 201, 240, 0.16), rgba(129, 119, 240, 0.1));
}
.chat-live-notice--file .chat-live-notice__card {
  border-color: rgba(255, 193, 7, 0.4);
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(129, 119, 240, 0.08));
}
.chat-live-notice__card:hover,
.chat-live-notice__card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(129, 119, 240, 0.65);
  box-shadow: 0 12px 28px rgba(45, 35, 90, 0.18);
  outline: none;
}
.chat-live-notice--ready .chat-live-notice__card {
  border-color: rgba(102, 187, 106, 0.55);
}
.chat-live-notice--disabled .chat-live-notice__card {
  opacity: 0.72;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.chat-live-notice__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  color: var(--purple);
  font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px rgba(129, 119, 240, 0.2);
}
.chat-live-notice--screen .chat-live-notice__icon {
  color: #0288d1;
}
.chat-live-notice--file .chat-live-notice__icon {
  color: #f9a825;
}
.chat-live-notice__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-live-notice__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chat-live-notice__pill {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(129, 119, 240, 0.22);
  color: var(--purple);
}
.chat-live-notice--ready .chat-live-notice__pill {
  background: rgba(102, 187, 106, 0.22);
  color: #2e7d32;
}
.chat-live-notice__time {
  font-size: 0.68rem;
  color: var(--gray);
}
.chat-live-notice__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.35;
}
.chat-live-notice__hint {
  font-size: 0.78rem;
  color: var(--gray);
  line-height: 1.35;
}
.chat-live-notice__cta {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--purple);
  color: #fff;
}
.chat-live-notice--screen .chat-live-notice__cta {
  background: #0288d1;
}
.chat-live-notice--file .chat-live-notice__cta {
  background: #f9a825;
  color: #1a1a1a;
}
@keyframes chat-live-notice-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

.chat-message.system .bubble.bubble--system {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: min(92vw, 520px);
  padding: 8px 10px 8px 12px;
  background: linear-gradient(160deg, rgba(228, 222, 244, 0.96), rgba(210, 202, 232, 0.92));
  border: 1px solid rgba(129, 119, 240, 0.38);
  color: #3d2f6b;
  -webkit-text-fill-color: #3d2f6b;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 6px 18px rgba(0, 0, 0, 0.14);
}

.chat-message.system .bubble--system__text {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  -webkit-text-fill-color: inherit;
}

.chat-message.system .chat-system-dismiss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: -2px -4px -2px 0;
  padding: 0;
  border: 1px solid rgba(129, 119, 240, 0.32);
  border-radius: 8px;
  background: rgba(79, 56, 184, 0.12);
  color: #4f38b8;
  -webkit-text-fill-color: #4f38b8;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chat-message.system .chat-system-dismiss:hover,
.chat-message.system .chat-system-dismiss:focus-visible {
  background: rgba(79, 56, 184, 0.22);
  border-color: rgba(129, 119, 240, 0.48);
  outline: none;
}

#chat-panel-inner.has-chat-feed .chat-message.system .bubble.bubble--system {
  background: linear-gradient(160deg, rgba(228, 222, 244, 0.94), rgba(210, 202, 232, 0.9));
  color: #3d2f6b !important;
  -webkit-text-fill-color: #3d2f6b !important;
}

#chat-panel-inner.has-chat-feed .chat-message.system .chat-system-dismiss {
  background: rgba(79, 56, 184, 0.14) !important;
  color: #4f38b8 !important;
  -webkit-text-fill-color: #4f38b8 !important;
  border-color: rgba(129, 119, 240, 0.35) !important;
}

body.ios-theme.space-shell .chat-message.system .bubble.bubble--system,
body.ios-theme:has(.space-share) .chat-message.system .bubble.bubble--system {
  background: linear-gradient(160deg, rgba(228, 222, 244, 0.96), rgba(210, 202, 232, 0.92)) !important;
  color: #3d2f6b !important;
  -webkit-text-fill-color: #3d2f6b !important;
  border-color: rgba(129, 119, 240, 0.42) !important;
}

body.ios-theme.space-shell .chat-message.system .chat-system-dismiss,
body.ios-theme:has(.space-share) .chat-message.system .chat-system-dismiss {
  background: rgba(79, 56, 184, 0.14) !important;
  color: #4f38b8 !important;
  -webkit-text-fill-color: #4f38b8 !important;
  border-color: rgba(129, 119, 240, 0.35) !important;
}

/* Chat - toolbar + "Important" + 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);
}
/* Legacy chat toolbar toggle (chip replaces tabs-bar controls) */
.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);
}

/* Tabs bar: legacy toggle hover (chip replaces tabs-bar controls) */
.space-tabs-bar .space-tabs-important .chat-important-toggle-btn:hover,
.space-tabs-bar .space-tabs-important .chat-important-toggle-btn:focus-visible {
  border-color: rgba(255, 198, 75, 0.5) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
}

.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 rgba(0, 0, 0, 0.1);
  background: #ffffff;
  color: #1a1a24;
  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: #484848;
}
.chat-important-block .important-send-label {
  color: #1a1a24;
}
.important-categories-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.important-cat {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}
.important-cat summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1a24;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
}
.important-cat summary::-webkit-details-marker {
  display: none;
}
.important-cat summary .imp-count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: #484848;
  background: #f0f0f5;
  padding: 2px 8px;
  border-radius: 999px;
}
.important-list {
  margin: 0;
  padding: 0 8px 10px 12px;
  list-style: none;
  background: #ffffff;
}
.important-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  margin: 0 0 4px;
  border-top: none;
  border-radius: 8px;
  background: #f5f5f7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.85rem;
  line-height: 1.4;
  word-break: break-word;
  color: #1a1a24;
}
.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) {
  max-width: min(85%, 520px);
}
.chat-message-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
.chat-message-bubble-wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  overflow: visible;
}

.chat-message-bubble-wrap--tasks {
  padding-top: 22px;
  margin-top: 2px;
}

/* Task bangs sit ABOVE the bubble — blue = collective, yellow = personal */
.chat-message-task-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22px;
  z-index: 12;
  pointer-events: none;
  overflow: visible;
}
.chat-msg-task-bang {
  position: absolute;
  top: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border-radius: 7px;
  border: 1.5px solid transparent;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  opacity: 1;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
  z-index: 13;
}
.chat-msg-task-bang--collective {
  color: #0d47a1;
  background: rgba(227, 242, 253, 0.96);
  border-color: rgba(21, 101, 192, 0.45);
}
.chat-msg-task-bang--collective.is-active {
  color: #fff;
  background: linear-gradient(165deg, #1e88e5, #1565c0);
  border-color: #0d47a1;
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.45);
}
.chat-msg-task-bang--personal {
  color: #f57f17;
  background: rgba(255, 248, 225, 0.98);
  border-color: rgba(245, 127, 23, 0.5);
  z-index: 14;
}
.chat-msg-task-bang--personal.is-active {
  color: #5d4037;
  background: linear-gradient(165deg, #ffe082, #ffca28);
  border-color: #f9a825;
  box-shadow: 0 2px 8px rgba(249, 168, 37, 0.42);
}
.chat-msg-task-bang:hover,
.chat-msg-task-bang:focus-visible {
  transform: translateY(-1px);
}
.chat-msg-task-bang:active {
  transform: scale(0.94);
}
.chat-message.received .chat-msg-task-bang--personal { left: 0; right: auto; }
.chat-message.received .chat-msg-task-bang--collective { right: 0; left: auto; }
.chat-message.sent .chat-msg-task-bang--collective { left: 0; right: auto; }
.chat-message.sent .chat-msg-task-bang--personal { right: 0; left: auto; }
.chat-message.chat-message--task-collective .bubble {
  box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.38);
}
.chat-message.chat-message--task-personal .bubble {
  box-shadow: 0 0 0 2px rgba(249, 168, 37, 0.4);
}
.chat-message.chat-message--task-flash .bubble {
  animation: chat-task-flash 1.1s ease;
}
@keyframes chat-task-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  35% { box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.55); }
}
.chat-task-roster {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  min-width: 180px;
  max-width: min(260px, 78vw);
  padding: 8px 10px 10px;
  border-radius: 12px;
  background: rgba(250, 252, 255, 0.98);
  border: 1px solid rgba(21, 101, 192, 0.28);
  box-shadow: 0 10px 28px rgba(13, 71, 161, 0.22);
  color: #0d47a1;
}
.chat-message.sent .chat-task-roster--anchored { left: auto; right: 0; transform: none; }
.chat-message.received .chat-task-roster--anchored { left: 0; right: auto; transform: none; }
.chat-task-roster__title { font-size: 0.72rem; font-weight: 700; margin-bottom: 6px; }
.chat-task-roster__list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
.chat-task-roster__row { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: #1565c0; cursor: pointer; padding: 3px 2px; }
.chat-task-roster__cb { width: 14px; height: 14px; accent-color: #1565c0; margin: 0; }
.chat-task-roster__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-task-roster__empty, .chat-task-roster__hint { font-size: 0.65rem; opacity: 0.75; margin-top: 6px; line-height: 1.35; color: #455a64; }
.chat-task-notice-stack {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(320px, calc(100% - 24px));
  pointer-events: none;
}
.chat-task-received-notice {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(187, 222, 251, 0.55);
  border-radius: 14px;
  background: linear-gradient(165deg, #1e88e5, #0d47a1);
  color: #e3f2fd;
  box-shadow: 0 8px 22px rgba(13, 71, 161, 0.35);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.chat-task-received-notice--personal {
  border-color: rgba(255, 224, 130, 0.65);
  background: linear-gradient(165deg, #ffca28, #f9a825);
  color: #5d4037;
  box-shadow: 0 8px 22px rgba(249, 168, 37, 0.35);
}
.chat-task-received-notice__bang {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.2);
}
.chat-task-received-notice__text {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 600;
}


/* E2E lock chip — keep off message corners so yellow/blue task bangs stay visible */
.space-e2e-badge {
  position: absolute;
  top: 8px;
  left: 10px;
  right: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #455a64;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(69, 90, 100, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  opacity: 0.72;
  max-width: 42%;
}
.space-e2e-badge.is-on {
  color: #0d47a1;
  background: rgba(227, 242, 253, 0.95);
  border-color: rgba(21, 101, 192, 0.4);
  opacity: 1;
}
.space-e2e-badge i { font-size: 0.68rem; }
@media (max-width: 768px) {
  .space-e2e-badge {
    top: 6px;
    left: 8px;
    padding: 2px 7px;
    font-size: 0.58rem;
  }
}

/* Keep bangs visible above P2P/media overlays inside the chat column */
#chat-panel-inner.has-chat-feed .chat-message,
#chat-panel-inner.has-chat-feed .chat-message-main,
#chat-panel-inner.has-chat-feed .chat-message-bubble-wrap {
  overflow: visible !important;
}
@media (max-width: 768px) {
  .chat-message-bubble-wrap--tasks { padding-top: 20px; margin-top: 0; }
  .chat-msg-task-bang { width: 24px; height: 24px; font-size: 1rem; }
  .chat-message-actions { margin-top: 2px !important; gap: 2px !important; }
  .chat-message:not(.system) { margin-bottom: 6px; }
  .chat-message .sender { margin-bottom: 2px; }
}

.chat-message.sent .chat-message-bubble-wrap,
.chat-message.received .chat-message-bubble-wrap {
  flex-direction: row;
}
/* Reaction chips float beside bubble — bubble must not shift when they appear */
.chat-message-reaction-badge {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  flex: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.chat-message.sent .chat-message-reaction-badge {
  right: calc(100% + 6px);
  left: auto;
}
.chat-message.received .chat-message-reaction-badge {
  left: calc(100% + 6px);
  right: auto;
}
.chat-message-bubble-wrap > .bubble {
  position: relative;
  z-index: 1;
}

/* Quick reaction buttons (thumbs / surprise) — opposite side from post */
.chat-message.sent .chat-msg-reactions {
  margin-right: auto;
}
.chat-message.received .chat-msg-reactions {
  margin-left: auto;
}
.chat-message-reaction-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(129, 119, 240, 0.22);
  box-shadow: 0 2px 8px rgba(24, 18, 48, 0.14);
  font-size: 0.62rem;
  line-height: 1;
}
.chat-message-reaction-chip--up {
  color: #2e7d32;
  border-color: rgba(76, 175, 80, 0.35);
  background: linear-gradient(165deg, #f3fff5, #dff5e4);
}
.chat-message-reaction-chip--down {
  color: #c62828;
  border-color: rgba(198, 40, 40, 0.32);
  background: linear-gradient(165deg, #fff5f5, #ffe8e8);
}
.chat-message-reaction-chip--wow {
  color: #ef6c00;
  border-color: rgba(255, 152, 0, 0.38);
  background: linear-gradient(165deg, #fff8ef, #ffefd9);
}
.chat-message-reaction-chip__count {
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1;
}
.chat-message-reaction-chip--fresh {
  animation: chat-reaction-chip-pop 0.45s ease;
}
@keyframes chat-reaction-chip-pop {
  0% { transform: scale(0.82); }
  55% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.chat-message--has-reactions.sent,
.chat-message--has-reactions.received {
  margin-left: 0;
  margin-right: 0;
}

/* Live notices — own lane right, others left (same as chat messages) */
.chat-live-notice.sent {
  align-self: flex-end;
}
.chat-live-notice.received {
  align-self: flex-start;
}
.chat-live-notice.sent .chat-live-notice__main,
.chat-live-notice.sent .chat-live-notice__actions {
  align-items: flex-end;
}
.chat-live-notice.received .chat-live-notice__main,
.chat-live-notice.received .chat-live-notice__actions {
  align-items: flex-start;
}
.chat-live-notice.sent .chat-live-notice__actions {
  justify-content: flex-end;
}
.chat-live-notice.received .chat-live-notice__actions {
  justify-content: flex-start;
}
.chat-message-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  width: 100%;
  position: relative;
  z-index: 4;
  pointer-events: auto;
  isolation: isolate;
}
.chat-message.sent .chat-message-actions {
  justify-content: flex-end;
}
.chat-message.received .chat-message-actions {
  justify-content: flex-start;
}
.chat-message-actions .time {
  margin-top: 0;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.68rem;
  opacity: 0.82;
}
.chat-message.chat-message-important .bubble {
  box-shadow: 0 0 0 2px rgba(255, 198, 75, 0.45);
}

/* Message row actions — vivid chips readable on light or dark art backdrops */
.chat-msg-star,
.chat-msg-forward,
.chat-msg-download,
.chat-msg-select-wrap,
.chat-msg-tool {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.93);
  color: #37474f;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  line-height: 1;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, filter 0.15s ease, transform 0.12s ease;
}

.chat-msg-select-wrap {
  border-color: rgba(69, 90, 100, 0.42);
  background: linear-gradient(180deg, rgba(248, 249, 250, 0.97), rgba(236, 239, 241, 0.95));
  color: #455a64;
}

.chat-msg-download {
  border-color: rgba(21, 101, 192, 0.42);
  background: linear-gradient(180deg, rgba(227, 242, 253, 0.97), rgba(187, 222, 251, 0.94));
  color: #1565c0;
}
.chat-msg-download i {
  color: #1565c0;
}

.chat-msg-forward {
  border-color: rgba(106, 27, 154, 0.4);
  background: linear-gradient(180deg, rgba(243, 229, 245, 0.97), rgba(225, 190, 231, 0.94));
  color: #7b1fa2;
}
.chat-msg-forward i {
  color: #7b1fa2;
}

.chat-msg-star {
  border-color: rgba(245, 127, 23, 0.45);
  background: linear-gradient(180deg, rgba(255, 248, 225, 0.97), rgba(255, 236, 179, 0.94));
  color: #ef6c00;
}
.chat-msg-star i {
  color: #f57f17;
}

.chat-msg-tool--reaction[data-reaction="up"] {
  border-color: rgba(46, 125, 50, 0.42);
  background: linear-gradient(180deg, rgba(232, 245, 233, 0.97), rgba(200, 230, 201, 0.94));
  color: #2e7d32;
}
.chat-msg-tool--reaction[data-reaction="up"] i {
  color: #2e7d32;
}

.chat-msg-tool--reaction[data-reaction="down"] {
  border-color: rgba(198, 40, 40, 0.4);
  background: linear-gradient(180deg, rgba(255, 235, 238, 0.97), rgba(255, 205, 210, 0.94));
  color: #c62828;
}
.chat-msg-tool--reaction[data-reaction="down"] i {
  color: #c62828;
}

.chat-msg-tool--reaction[data-reaction="wow"] {
  border-color: rgba(239, 108, 0, 0.42);
  background: linear-gradient(180deg, rgba(255, 243, 224, 0.97), rgba(255, 224, 178, 0.94));
  color: #ef6c00;
}
.chat-msg-tool--reaction[data-reaction="wow"] i {
  color: #ef6c00;
}

.chat-msg-tool--tts {
  border-color: rgba(0, 105, 92, 0.42);
  background: linear-gradient(180deg, rgba(224, 247, 250, 0.97), rgba(178, 235, 242, 0.94));
  color: #00695c;
}
.chat-msg-tool--tts i {
  color: #00838f;
}

.chat-msg-tool--stt {
  border-color: rgba(40, 53, 147, 0.42);
  background: linear-gradient(180deg, rgba(232, 234, 246, 0.97), rgba(197, 202, 233, 0.94));
  color: #283593;
}
.chat-msg-tool--stt i {
  color: #3949ab;
}
.chat-msg-tool--stt.is-active {
  border-color: rgba(40, 53, 147, 0.65);
  background: linear-gradient(180deg, rgba(197, 202, 233, 0.98), rgba(159, 168, 218, 0.96));
  color: #1a237e;
}
.chat-msg-tool--stt.is-active i {
  color: #1a237e;
}
.space-audio-chat-card__transcript.is-transcript-reveal,
.space-audio-chat-card__summary.is-transcript-reveal,
.chat-media-transcript.is-transcript-reveal {
  animation: space-transcript-reveal 1.4s ease;
}
@keyframes space-transcript-reveal {
  0% {
    box-shadow: 0 0 0 0 rgba(57, 73, 171, 0.45);
    background-color: rgba(197, 202, 233, 0.55);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    background-color: transparent;
  }
}

.chat-message-actions button i,
.chat-message-actions .chat-msg-select {
  pointer-events: none;
}

.chat-msg-star:hover,
.chat-msg-star:focus-visible,
.chat-msg-forward:hover,
.chat-msg-forward:focus-visible,
.chat-msg-download:hover,
.chat-msg-download:focus-visible,
.chat-msg-select-wrap:hover,
.chat-msg-select-wrap:focus-visible,
.chat-msg-tool:hover,
.chat-msg-tool:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.chat-msg-star[aria-pressed="true"] {
  border-color: rgba(255, 160, 0, 0.72);
  color: #e65100;
  background: linear-gradient(180deg, rgba(255, 236, 179, 0.98), rgba(255, 213, 79, 0.96));
  box-shadow:
    0 0 0 1px rgba(255, 193, 7, 0.35),
    0 2px 6px rgba(245, 127, 23, 0.28);
}
.chat-msg-star[aria-pressed="true"] i {
  color: #e65100;
}

.chat-msg-forward:active,
.chat-msg-download:active,
.chat-msg-star:active,
.chat-msg-tool:active {
  transform: scale(0.94);
}

.chat-msg-select-wrap {
  cursor: pointer;
}

.chat-msg-select {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--purple, #8177f0);
  cursor: pointer;
}

.chat-message--share-selected .chat-msg-select-wrap {
  border-color: rgba(69, 90, 100, 0.62);
  background: linear-gradient(180deg, rgba(207, 216, 220, 0.98), rgba(176, 190, 197, 0.96));
  box-shadow:
    0 0 0 2px rgba(69, 90, 100, 0.22),
    0 2px 6px rgba(55, 71, 79, 0.18);
}

.chat-message.sent .chat-msg-star,
.chat-message.sent .chat-msg-forward,
.chat-message.sent .chat-msg-download,
.chat-message.sent .chat-msg-select-wrap,
.chat-message.sent .chat-msg-tool {
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.chat-message--share-selected .bubble {
  box-shadow: 0 0 0 2px rgba(129, 119, 240, 0.42);
}

.chat-share-selection-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(30, 20, 53, 0.92);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.chat-share-selection-bar.hidden {
  display: none !important;
}

.chat-share-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(21, 101, 168, 0.92);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.chat-share-filter-bar.hidden {
  display: none !important;
}

.chat-share-filter-bar__label {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 700;
}

.chat-share-filter-bar__show-all {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}

.chat-share-filter-bar__show-all:hover,
.chat-share-filter-bar__show-all:focus-visible {
  background: rgba(255, 255, 255, 0.24);
  outline: none;
}

.chat-message--share-filtered-out {
  display: none !important;
}

.chat-share-selection-bar__count {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 700;
}

.chat-share-selection-bar__share,
.chat-share-selection-bar__clear {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 7px 10px;
  cursor: pointer;
}

.chat-share-selection-bar__share {
  background: var(--purple, #a693ef);
  border-color: var(--purple, #a693ef);
}

.chat-message--highlight {
  animation: chat-msg-highlight 2.2s ease-out;
}

@keyframes chat-msg-highlight {
  0% { box-shadow: 0 0 0 3px rgba(129, 119, 240, 0.55); }
  100% { box-shadow: none; }
}

#chat-msg-share-modal.chat-msg-share-modal {
  position: fixed;
  inset: 0;
  z-index: 11940;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.62);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#chat-msg-share-modal.chat-msg-share-modal.hidden {
  display: none !important;
}

#chat-msg-share-modal .chat-msg-share-panel {
  position: relative;
  flex: 0 1 auto;
  width: min(100%, 340px);
  max-height: min(86dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px));
  margin: auto;
  padding: 36px 14px 14px;
  border-radius: 14px;
  background: #1e1435;
  color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#chat-msg-share-modal .chat-msg-share-close {
  position: absolute;
  top: max(8px, env(safe-area-inset-top, 0px));
  right: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

#chat-msg-share-modal .chat-msg-share-close:hover,
#chat-msg-share-modal .chat-msg-share-close:focus-visible {
  background: rgba(255, 255, 255, 0.24);
  outline: none;
}

#chat-msg-share-modal .chat-file-share-panel__title {
  margin: 0 0 8px;
  padding-right: 28px;
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
}

#chat-msg-share-modal .chat-msg-share-preview {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 72px;
  overflow-y: auto;
}

#chat-msg-share-modal .chat-file-share-panel__code-label {
  margin: 0 0 3px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.58);
}

#chat-msg-share-modal .chat-file-share-panel__code {
  display: block;
  margin: 0 0 8px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(129, 119, 240, 0.22);
  font-size: 0.74rem;
  font-weight: 700;
  word-break: break-all;
  text-align: center;
  color: #e8e0ff;
}

#chat-msg-share-modal .chat-file-share-panel__code--file {
  background: rgba(76, 201, 240, 0.18);
  color: #b8ecff;
}

#chat-msg-share-modal .chat-file-share-panel__link {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  font-size: 0.68rem;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.92);
}

#chat-msg-share-modal .chat-file-share-panel__qr {
  margin: 0 auto 8px;
  padding: 6px;
  transform: scale(0.82);
  transform-origin: center top;
}

#chat-msg-share-modal .chat-file-share-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

#chat-msg-share-modal .chat-file-share-panel__btn {
  flex: 1 1 calc(33.333% - 6px);
  min-width: 0;
  padding: 8px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

#chat-msg-share-modal .chat-file-share-panel__btn--primary {
  background: var(--purple, #a693ef);
  border-color: var(--purple, #a693ef);
  color: #fff;
}

body.ios-theme.space-shell #chat-msg-share-modal .chat-msg-share-panel,
body.ios-theme:has(.space-share) #chat-msg-share-modal .chat-msg-share-panel {
  background: #1e1435 !important;
  color: rgba(255, 255, 255, 0.94) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;
}

body.ios-theme.space-shell #chat-msg-share-modal .chat-file-share-panel__title,
body.ios-theme:has(.space-share) #chat-msg-share-modal .chat-file-share-panel__title,
body.ios-theme.space-shell #chat-msg-share-modal .chat-msg-share-preview,
body.ios-theme:has(.space-share) #chat-msg-share-modal .chat-msg-share-preview,
body.ios-theme.space-shell #chat-msg-share-modal .chat-file-share-panel__code-label,
body.ios-theme:has(.space-share) #chat-msg-share-modal .chat-file-share-panel__code-label,
body.ios-theme.space-shell #chat-msg-share-modal .chat-file-share-panel__code,
body.ios-theme:has(.space-share) #chat-msg-share-modal .chat-file-share-panel__code,
body.ios-theme.space-shell #chat-msg-share-modal .chat-file-share-panel__link,
body.ios-theme:has(.space-share) #chat-msg-share-modal .chat-file-share-panel__link,
body.ios-theme.space-shell #chat-msg-share-modal .chat-file-share-panel__btn,
body.ios-theme:has(.space-share) #chat-msg-share-modal .chat-file-share-panel__btn,
body.ios-theme.space-shell #chat-msg-share-modal .chat-msg-share-close,
body.ios-theme:has(.space-share) #chat-msg-share-modal .chat-msg-share-close {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.ios-theme.space-shell #chat-msg-share-modal .chat-file-share-panel__code-label,
body.ios-theme:has(.space-share) #chat-msg-share-modal .chat-file-share-panel__code-label {
  color: rgba(255, 255, 255, 0.58) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.58) !important;
}

body.ios-theme.space-shell #chat-msg-share-modal .chat-file-share-panel__code,
body.ios-theme:has(.space-share) #chat-msg-share-modal .chat-file-share-panel__code {
  color: #e8e0ff !important;
  -webkit-text-fill-color: #e8e0ff !important;
}

body.ios-theme.space-shell #chat-msg-share-modal .chat-file-share-panel__code--file,
body.ios-theme:has(.space-share) #chat-msg-share-modal .chat-file-share-panel__code--file {
  color: #b8ecff !important;
  -webkit-text-fill-color: #b8ecff !important;
}

/* Inline file share panels inside prompts — dark theme parity */
body.ios-theme.space-shell .chat-incoming-file-prompt .chat-file-share-panel,
body.ios-theme:has(.space-share) .chat-incoming-file-prompt .chat-file-share-panel,
body.ios-theme.space-shell .files-outgoing-prompt .chat-file-share-panel,
body.ios-theme:has(.space-share) .files-outgoing-prompt .chat-file-share-panel,
body.ios-theme.space-shell #panel-chat .chat-file-share-panel,
body.ios-theme:has(.space-share) #panel-chat .chat-file-share-panel {
  background: rgba(30, 20, 53, 0.96) !important;
  border-radius: 14px;
  padding: 10px 8px 8px;
  margin-top: 8px;
}
body.ios-theme.space-shell .chat-file-share-panel__title,
body.ios-theme:has(.space-share) .chat-file-share-panel__title,
body.ios-theme.space-shell .chat-file-share-panel__code-label,
body.ios-theme:has(.space-share) .chat-file-share-panel__code-label,
body.ios-theme.space-shell .chat-file-share-panel__ttl,
body.ios-theme:has(.space-share) .chat-file-share-panel__ttl {
  color: rgba(255, 255, 255, 0.62) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
}
body.ios-theme.space-shell .chat-file-share-panel__code,
body.ios-theme:has(.space-share) .chat-file-share-panel__code,
body.ios-theme.space-shell .chat-file-share-panel__code--file,
body.ios-theme:has(.space-share) .chat-file-share-panel__code--file,
body.ios-theme.space-shell .chat-file-share-panel__code--grigsi,
body.ios-theme:has(.space-share) .chat-file-share-panel__code--grigsi {
  color: #e8e0ff !important;
  -webkit-text-fill-color: #e8e0ff !important;
  background: rgba(129, 119, 240, 0.22) !important;
}
body.ios-theme.space-shell .chat-file-share-panel__link,
body.ios-theme:has(.space-share) .chat-file-share-panel__link {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
body.ios-theme.space-shell .chat-file-share-panel__btn,
body.ios-theme:has(.space-share) .chat-file-share-panel__btn {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
body.ios-theme.space-shell #chat-msg-share-modal .chat-file-share-panel__ttl,
body.ios-theme:has(.space-share) #chat-msg-share-modal .chat-file-share-panel__ttl {
  color: rgba(255, 255, 255, 0.58) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.58) !important;
}

@media (max-width: 380px) {
  #chat-msg-share-modal .chat-file-share-panel__btn {
    flex: 1 1 100%;
  }
}

/* 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,
#compose-sanity-modal.modal {
  z-index: 12000;
}

.compose-sanity-modal-icon {
  color: #d97706;
  margin-right: 6px;
}
.compose-sanity-modal-preview {
  white-space: pre-wrap;
  word-break: break-word;
}
.compose-sanity-highlight {
  background: rgba(217, 119, 6, 0.22);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}
.compose-sanity-reasons {
  margin: 0 0 16px;
  padding-left: 1.15rem;
  font-size: 0.86rem;
  color: var(--gray);
  line-height: 1.45;
}
.compose-sanity-reasons li + li {
  margin-top: 4px;
}

.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);
}

/* Important category modal — light copy on space Space dark chrome */
body.ios-theme.space-shell #important-category-modal .important-category-modal-content,
body.ios-theme:has(.space-share) #important-category-modal .important-category-modal-content {
  background: rgba(22, 24, 36, 0.96) !important;
  background-color: rgba(22, 24, 36, 0.96) !important;
  border: 1px solid rgba(255, 198, 75, 0.32) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

body.ios-theme.space-shell #important-category-modal .important-category-modal-content h2,
body.ios-theme:has(.space-share) #important-category-modal .important-category-modal-content h2 {
  color: var(--yellow, #ffc64b) !important;
  -webkit-text-fill-color: var(--yellow, #ffc64b) !important;
}

body.ios-theme.space-shell #important-category-modal .important-modal-hint,
body.ios-theme:has(.space-share) #important-category-modal .important-modal-hint {
  color: rgba(255, 255, 255, 0.82) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
}

body.ios-theme.space-shell #important-category-modal .important-modal-preview,
body.ios-theme:has(.space-share) #important-category-modal .important-modal-preview {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

body.ios-theme.space-shell #important-category-modal .close-btn,
body.ios-theme:has(.space-share) #important-category-modal .close-btn {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}

body.ios-theme.space-shell #important-category-modal .close-btn:hover,
body.ios-theme:has(.space-share) #important-category-modal .close-btn:hover {
  color: var(--yellow, #ffc64b) !important;
  -webkit-text-fill-color: var(--yellow, #ffc64b) !important;
}

body.ios-theme.space-shell #important-category-modal .important-modal-cancel-btn,
body.ios-theme:has(.space-share) #important-category-modal .important-modal-cancel-btn {
  color: rgba(255, 255, 255, 0.78) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important;
}

body.ios-theme.space-shell #important-category-modal .important-modal-cancel-btn:hover,
body.ios-theme:has(.space-share) #important-category-modal .important-modal-cancel-btn:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.ios-theme.space-shell #important-category-modal .imp-pill,
body.ios-theme:has(.space-share) #important-category-modal .imp-pill {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
}

body.ios-theme.space-shell #important-category-modal .imp-pill:hover,
body.ios-theme:has(.space-share) #important-category-modal .imp-pill:hover {
  border-color: rgba(255, 198, 75, 0.5) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

body.ios-theme.space-shell #important-category-modal .imp-pill.selected,
body.ios-theme:has(.space-share) #important-category-modal .imp-pill.selected {
  border-color: var(--green, #A693EF) !important;
  background: rgba(52, 199, 89, 0.22) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.ios-theme.space-shell #important-category-modal .important-modal-actions .btn-reset-settings,
body.ios-theme:has(.space-share) #important-category-modal .important-modal-actions .btn-reset-settings {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

body.ios-theme.space-shell #important-category-modal .important-modal-actions .btn-reset-settings:hover,
body.ios-theme:has(.space-share) #important-category-modal .important-modal-actions .btn-reset-settings:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 198, 75, 0.45) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.chat-input-area {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 16px 24px;
  background: var(--card-bg);
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.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 {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  background: transparent;
  color: var(--gray);
  cursor: pointer;
  border-radius: 50%;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.send-btn {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  padding: 0;
  margin: 0;
  border: none;
  background: #ffc64b;
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
  border-radius: 9999px;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: background .2s, color .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  align-self: center;
}

.send-btn i,
.send-btn .fas {
  color: inherit;
  -webkit-text-fill-color: inherit;
  font-size: 0.95rem;
  line-height: 1;
  pointer-events: none;
}

.send-btn:hover {
  background: #a693ef;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* 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);
}

.file-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(198, 40, 40, 0.45);
  background: rgba(198, 40, 40, 0.1);
  color: #b71c1c;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.file-delete-btn:hover,
.file-delete-btn:focus-visible {
  background: rgba(198, 40, 40, 0.2);
  border-color: #c62828;
  color: #8b0000;
}

.file-delete-btn--local {
  border-color: rgba(100, 116, 139, 0.45);
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.file-delete-btn--local:hover,
.file-delete-btn--local:focus-visible {
  background: rgba(100, 116, 139, 0.22);
  color: #334155;
}

body.ios-theme.space-shell .file-delete-btn,
body.ios-theme:has(.space-share) .file-delete-btn {
  background: rgba(198, 40, 40, 0.22) !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
  color: #fecaca !important;
  -webkit-text-fill-color: #fecaca !important;
}

body.ios-theme.space-shell .file-delete-btn--local,
body.ios-theme:has(.space-share) .file-delete-btn--local {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

.file-card-actions,
.chat-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  justify-content: center;
}

.chat-file-actions {
  justify-content: flex-start;
  margin-top: 8px;
}

.file-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid rgba(129, 119, 240, 0.35);
  background: rgba(129, 119, 240, 0.12);
  color: var(--dark);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.file-action-btn:hover,
.file-action-btn:focus-visible {
  background: rgba(129, 119, 240, 0.22);
  border-color: var(--purple);
  color: var(--purple);
}

.file-action-muted {
  font-size: 0.75rem;
  color: var(--gray);
  font-style: italic;
}

.bubble-file {
  min-width: min(100%, 260px);
  max-width: 100%;
}

.chat-message.chat-message-file {
  max-width: min(92vw, 380px);
}

.chat-message.chat-message-file .chat-message-main {
  width: 100%;
}

.chat-file-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.chat-file-actions .file-action-btn--full {
  grid-column: 1 / -1;
}

.file-action-btn--compact {
  padding: 4px 8px !important;
  min-height: 36px;
  font-size: 0.68rem !important;
}

.file-action-btn--compact span {
  display: none;
}

.file-action-btn--delete {
  border-color: rgba(198, 40, 40, 0.45) !important;
  background: rgba(198, 40, 40, 0.12) !important;
  color: #c62828 !important;
}

.chat-message.sent .bubble-file .file-action-btn {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

.chat-message.sent .bubble-file .file-action-btn:hover,
.chat-message.sent .bubble-file .file-action-btn:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.chat-message.sent .bubble-file .file-action-btn--delete {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 180, 180, 0.55) !important;
  color: #ffe0e0 !important;
}

.chat-folder-file-list {
  margin-top: 10px;
  border-top: 1px solid rgba(129, 119, 240, 0.2);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-folder-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-folder-file-name {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  word-break: break-word;
}

.chat-folder-more {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--gray);
}

@media (max-width: 520px) {
  .chat-message.chat-message-file {
    max-width: min(96vw, 100%);
  }

  .bubble-file {
    min-width: min(100%, 200px);
  }

  .chat-file-actions .file-action-btn {
    min-height: 44px;
    justify-content: center;
    padding: 10px 8px;
    font-size: 0.78rem;
  }
}

body.ios-theme.space-shell .chat-message .file-action-btn,
body.ios-theme:has(.space-share) .chat-message .file-action-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
}

/* 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;
  background: var(--space-media-letterbox, #2a2e36);
}

.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(--space-media-letterbox, #2a2e36);
  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: var(--space-media-letterbox, #2a2e36) !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;
}

/* Mesh / idle peer: no picture yet — do not stack an empty second window under local camera. */
.video-grid .video-tile.video-tile--empty-remote {
  display: none !important;
}

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

/* In-frame back control when one tile is enlarged (mobile + desktop; pleer bar may be off-screen). */
.video-frame {
  position: relative;
}

.video-focus-back {
  position: absolute;
  z-index: 12;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(12, 14, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}

.video-focus-back.hidden {
  display: none !important;
}

.video-focus-back i {
  font-size: 13px;
}

/* Legacy native tile fullscreen (older sessions) — always offer exit. */
.video-tile-fs-exit {
  position: fixed;
  z-index: 2147483000;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: rgba(180, 40, 50, 0.92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.video-tile-fs-exit.hidden {
  display: none !important;
}

/* 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: var(--space-media-letterbox, #2a2e36);
  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;
}

/* Voice-only remote: play audio via hidden tile — no black video panel. */
.video-grid .video-tile.video-tile--audio-only {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* 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;
  background: var(--space-media-letterbox, #2a2e36);
}

/* 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;
  background: var(--space-media-letterbox, #2a2e36);
}

.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: var(--space-media-letterbox, #2a2e36);
}

.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;
}
.remote-video-control-overlay.is-active.is-guest-pointer {
  cursor: default;
  outline: 2px solid rgba(255, 152, 0, 0.88);
}

.guest-pointer-tile-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  overflow: hidden;
}
.guest-pointer-viewport-layer {
  position: fixed;
  inset: 0;
  z-index: 11800;
  pointer-events: none;
  overflow: hidden;
}
.guest-pointer-marker {
  position: absolute;
  transform: translate(-3px, -3px);
  pointer-events: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.guest-pointer-cursor {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--guest-pointer-color, #ff9800);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.35);
}
.guest-pointer-label {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Screen share icon — consistent SVG monitor (replaces fa-desktop) */
.space-icon-screen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
}
.space-icon-screen svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.space-media-dock__btn--screen .space-icon-screen {
  width: 1.05em;
  height: 1.05em;
}
.space-media-dock--hero .space-media-dock__btn--screen .space-icon-screen,
.space-media-dock--hero-settle .space-media-dock__btn--screen .space-icon-screen {
  width: 2.05em;
  height: 2.05em;
}
@media (max-width: 768px) {
  .space-media-dock--hero .space-media-dock__btn--screen .space-icon-screen,
  .space-media-dock--hero-settle .space-media-dock__btn--screen .space-icon-screen {
    width: 1.35em;
    height: 1.35em;
  }
}
#pleer-ui #btn-screen .space-icon-screen,
.video-btn .space-icon-screen,
.chat-empty-quick-action__icon .space-icon-screen,
.composer-action-btn .space-icon-screen {
  width: 1.1em;
  height: 1.1em;
}

/* Screen annotation — trail + draw on shared screen tiles */
.screen-annotate-layer {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.screen-annotate-overlay {
  position: absolute;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  background: transparent;
}
.screen-annotate-overlay.is-trail-active,
.screen-annotate-overlay.is-draw-active {
  pointer-events: auto;
  cursor: crosshair;
}
.screen-annotate-overlay.is-trail-active {
  cursor: none;
}
.video-tile-annotate-bar {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 14;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 16px);
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(12, 10, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.video-tile-annotate-bar .btn-screen-annotate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.video-tile-annotate-bar .btn-screen-annotate i {
  font-size: 0.82rem;
  line-height: 1;
}
.video-tile-annotate-bar .btn-screen-annotate:hover,
.video-tile-annotate-bar .btn-screen-annotate:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.38);
  outline: none;
}
.video-tile-annotate-bar .btn-screen-annotate.is-on {
  background: rgba(166, 147, 239, 0.92);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(166, 147, 239, 0.35);
}
.video-tile-annotate-bar .btn-screen-annotate--clear {
  background: rgba(240, 139, 131, 0.18);
  border-color: rgba(240, 139, 131, 0.45);
  color: #ffd4d0;
}
.video-tile-annotate-bar .btn-screen-annotate--clear:hover {
  background: rgba(240, 139, 131, 0.32);
}

.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: #6B5ACD;
  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, #FFC64B);
  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 #btn-screen .video-btn-label {
  max-width: 5.5rem;
  font-size: 0.68rem;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
}
#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: 768px) {
  #pleer-ui .video-controls {
    gap: 6px;
    row-gap: 6px;
  }
  #pleer-ui .video-btn-label {
    display: none !important;
  }
  #pleer-ui .video-btn {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    transform: none !important;
  }
  #pleer-ui .video-btn i {
    font-size: 0.92rem !important;
    line-height: 1 !important;
    width: 1em !important;
    height: 1em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  #pleer-ui .video-btn-join {
    width: auto !important;
    min-width: 42px !important;
    max-width: none !important;
    padding: 0 10px !important;
  }
  #pleer-ui .video-btn.video-btn--preview-toggle {
    width: auto !important;
    min-width: 42px !important;
    max-width: 68px !important;
    padding: 0 6px !important;
    gap: 3px !important;
    font-size: 0 !important;
  }
  #pleer-ui .video-btn.video-btn--preview-toggle .video-btn-label {
    display: inline !important;
    font-size: 0.55rem !important;
    max-width: 2rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.1 !important;
  }
  #pleer-ui .video-btn.video-btn--preview-toggle i {
    font-size: 0.82rem !important;
  }
}

@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;
  }
}
.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: #A693EF;
  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;
  }
  #pleer-ui .video-btn-label {
    display: none !important;
  }
  .video-btn-join { padding: 0 14px; }
  #pleer-ui .video-btn-join {
    padding: 0 10px !important;
  }
}

.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;
}

/* Video tab: link to two-person limit overlay */
#panel-video .video-two-people-link-wrap {
  flex: 0 0 auto;
  margin: 0 0 10px 0;
  text-align: center;
}
#panel-video .video-two-people-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--purple, #6366f1);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
#panel-video .video-two-people-link:hover {
  background: rgba(99, 102, 241, 0.1);
}
body.ios-theme.space-shell #panel-video .video-two-people-link,
body.ios-theme:has(.space-share) #panel-video .video-two-people-link {
  color: var(--yellow, #ffc64b);
  -webkit-text-fill-color: var(--yellow, #ffc64b);
}
body.ios-theme.space-shell #panel-video .video-two-people-link i,
body.ios-theme:has(.space-share) #panel-video .video-two-people-link i {
  color: inherit;
}

/* Two-person video limit overlay */
.video-two-people-overlay.modal {
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.video-two-people-overlay .video-two-people-overlay-content {
  max-width: 520px;
  padding: 28px 24px 22px;
  margin: auto;
}
.video-two-people-overlay .video-two-people-overlay-content h2 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 4px;
  padding-right: 8px;
}
.video-two-people-overlay .video-two-people-body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #333;
  margin: 12px 0 20px;
}
.video-two-people-overlay .video-two-people-body p {
  margin: 0 0 12px;
}
.video-two-people-overlay .video-two-people-body ul {
  margin: 0;
  padding-left: 1.25em;
}
.video-two-people-overlay .video-two-people-body li + li {
  margin-top: 10px;
}
.video-two-people-overlay-actions {
  display: flex;
  justify-content: flex-end;
}
.video-two-people-overlay-actions .btn-save-settings {
  min-width: 120px;
  padding: 10px 24px;
  font-size: 1rem;
  font-weight: 600;
}

/* Space: dark panel + light/yellow copy (same family as ios “More” menu) */
body.ios-theme.space-shell #video-two-people-overlay .video-two-people-overlay-content,
body.ios-theme:has(.space-share) #video-two-people-overlay .video-two-people-overlay-content {
  background: rgba(22, 24, 36, 0.94) !important;
  background-color: rgba(22, 24, 36, 0.94) !important;
  border: 1px solid rgba(255, 198, 75, 0.32) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
body.ios-theme.space-shell #video-two-people-overlay .video-two-people-overlay-content h2,
body.ios-theme:has(.space-share) #video-two-people-overlay .video-two-people-overlay-content h2 {
  color: var(--yellow, #ffc64b) !important;
  -webkit-text-fill-color: var(--yellow, #ffc64b) !important;
}
body.ios-theme.space-shell #video-two-people-overlay .video-two-people-body,
body.ios-theme.space-shell #video-two-people-overlay .video-two-people-body p,
body.ios-theme.space-shell #video-two-people-overlay .video-two-people-body li,
body.ios-theme:has(.space-share) #video-two-people-overlay .video-two-people-body,
body.ios-theme:has(.space-share) #video-two-people-overlay .video-two-people-body p,
body.ios-theme:has(.space-share) #video-two-people-overlay .video-two-people-body li {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}
body.ios-theme.space-shell #video-two-people-overlay .video-two-people-body strong,
body.ios-theme:has(.space-share) #video-two-people-overlay .video-two-people-body strong {
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
}
body.ios-theme.space-shell #video-two-people-overlay .video-two-people-overlay-actions .btn-save-settings,
body.ios-theme:has(.space-share) #video-two-people-overlay .video-two-people-overlay-actions .btn-save-settings {
  background: var(--yellow, #ffc64b) !important;
  color: #8A6D00 !important;
  -webkit-text-fill-color: #8A6D00 !important;
  border: 1px solid rgba(220, 170, 50, 0.45) !important;
}
body.ios-theme.space-shell #video-two-people-overlay .video-two-people-overlay-actions .btn-save-settings:hover,
body.ios-theme:has(.space-share) #video-two-people-overlay .video-two-people-overlay-actions .btn-save-settings:hover {
  background: #FFD966 !important;
  color: #333 !important;
  -webkit-text-fill-color: #333 !important;
}

/* 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;
}

.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;
  width: 100%;
  padding: 32px 24px;
  background: var(--card-bg, #fff);
  border-radius: 12px;
  border: 1px solid #eee;
}
#screen-share-unsupported-note {
  position: relative;
  margin-top: 14px;
  padding: 12px 38px 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 198, 75, 0.18);
  color: #000;
  text-align: left;
  font-size: 0.92rem;
  line-height: 1.45;
}
#screen-share-unsupported-note .screen-share-unsupported-note__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.1);
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
#screen-share-unsupported-note .screen-share-unsupported-note__close:hover,
#screen-share-unsupported-note .screen-share-unsupported-note__close:focus-visible {
  background: rgba(0, 0, 0, 0.18);
  outline: none;
}
#screen-share-unsupported-note a[data-switch-to-video] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  background: #8a6d00;
  color: #fff;
  text-decoration: none;
}
.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;
}

/* 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;
  flex-shrink: 0;
}

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

.sidebar-header-row 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: #D4CCEF;
}
.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;
  overflow: hidden;
  flex-shrink: 0;
}

.participant-avatar--mark {
  background: transparent;
  padding: 0;
}

.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;
    padding-bottom: 0;
  }

  .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;
  }
  
  #panel-chat .chat-input-area,
  .chat-input-area {
    padding-top: 10px;
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
    gap: 8px;
  }

  .chat-input-wrap {
    padding-left: 10px;
    padding-right: 2px;
  }

  .send-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
  }
  
  .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: 1fr;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
  }
  
  .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-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: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: visible;
  }

  #panel-chat .chat-important-block {
    margin-left: max(8px, env(safe-area-inset-left));
    margin-right: max(8px, env(safe-area-inset-right));
  }

  #panel-chat .chat-messages {
    margin-left: max(8px, env(safe-area-inset-left));
    margin-right: max(8px, env(safe-area-inset-right));
  }

  .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;
  }
  
  #panel-chat .chat-input-area,
  .chat-input-area {
    padding-top: 10px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    gap: 8px;
  }

  .chat-composer .chat-input-area {
    background: transparent !important;
    border: none !important;
    padding: 0;
  }

  .chat-composer {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  
  .chat-input-wrap {
    min-height: 44px;
    padding-left: 10px;
    padding-right: 2px;
  }
  
  .chat-input-wrap input,
  .chat-input-wrap textarea,
  .chat-input-wrap #chat-input {
    font-size: 16px;
    min-height: 44px;
    min-width: 0;
  }
  
  .chat-input-wrap .attach-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .send-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-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;
  }
  
  .btn-post-submit,
  .btn-attach-post {
    min-height: 44px;
    padding: 12px 18px;
  }
  
  .video-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Pop-out row hidden — was extra vertical strip above panels */
.panel-pop-wrap {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

#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;
}
.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%, #A693EF 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); }
@media (max-width: 420px) {
  .social-share-checkboxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }
  .social-check-item {
    min-width: 0;
    font-size: 0.88rem;
    white-space: nowrap;
  }
}
.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: #9A7B00;
  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;
}
/* Visually hidden but clickable — display:none breaks programmatic .click() in Chrome/Opera. */
.space-native-file-input,
.post-file-input {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.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,
.qr-display .qr-canvas-host img {
  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; }
.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, 198, 75,.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, 198, 75,.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, 198, 75,.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, 198, 75,.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-color: var(--space-shell-bg-bottom) !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,
.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,
.file-card {
  box-shadow: var(--space-panel-shadow) !important;
}

/* Text readability inside glass */
.space-header * ,
.space-link-bar * ,
.space-tabs * ,
.module-join-box * ,
.file-card * {
  color: inherit !important;
}
.space-tabs .space-code-display,
.space-tabs #space-code,
.space-tabs-code-wrap .space-code-display {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

.space-tabs .space-tabs-important-chip,
.space-tabs .space-tabs-important-chip .space-tabs-important-text,
.space-tabs .space-tabs-important-chip:hover,
.space-tabs .space-tabs-important-chip:focus-visible,
.space-tabs .space-access-chip,
.space-tabs .space-tabs-settings-btn,
.space-tabs .space-tabs-settings-btn__label,
.space-tabs .space-tabs-settings-btn i {
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
}

.space-tabs .space-tabs-important-chip:hover,
.space-tabs .space-tabs-important-chip:focus-visible {
  background: rgba(255, 198, 75, 0.22) !important;
}

/* Space bar: Important + participants chip + More — readable on dark tabs row */
body.ios-theme.space-shell .space-tabs-bar .space-tabs-participants-text,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-participants-text {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

body.ios-theme.space-shell .space-tabs-bar .space-tabs-participants-chip.space-presence--connecting,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-participants-chip.space-presence--connecting {
  color: rgba(255, 255, 255, 0.78) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

body.ios-theme.space-shell .space-tabs-bar .space-tabs-participants-chip.space-presence--alone,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-participants-chip.space-presence--alone {
  color: #fcd34d !important;
  -webkit-text-fill-color: #fcd34d !important;
  background: rgba(252, 211, 77, 0.14) !important;
}

body.ios-theme.space-shell .space-tabs-bar .space-tabs-participants-chip.space-presence--others,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-participants-chip.space-presence--others {
  color: #86efac !important;
  -webkit-text-fill-color: #86efac !important;
  background: rgba(134, 239, 172, 0.12) !important;
}

/* Space bar: Important chip — readable on dark tabs row */
body.ios-theme.space-shell .space-tabs-bar .space-tabs-important-chip,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-important-chip {
  background: rgba(255, 198, 75, 0.16) !important;
  color: #fcd34d !important;
  -webkit-text-fill-color: #fcd34d !important;
}

body.ios-theme.space-shell .space-tabs-bar .space-tabs-important-chip .fa-star,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-important-chip .fa-star {
  color: var(--yellow, #ffc64b) !important;
}

body.ios-theme.space-shell .space-tabs-bar .space-tabs-important-chip.important-chip--open,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-important-chip.important-chip--open {
  background: rgba(255, 198, 75, 0.28) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.ios-theme.space-shell .space-tabs-bar .space-tabs-important-text,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-important-text {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* Space bar: Settings — light on dark tabs row */
body.ios-theme.space-shell .space-tabs-bar .space-tabs-settings-btn,
body.ios-theme.space-shell .space-tabs-bar .space-access-chip,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-settings-btn,
body.ios-theme:has(.space-share) .space-tabs-bar .space-access-chip {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
}

body.ios-theme.space-shell .space-tabs-bar .space-tabs-settings-btn i,
body.ios-theme.space-shell .space-tabs-bar .space-tabs-settings-btn__label,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-settings-btn i,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-settings-btn__label {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

body.ios-theme.space-shell .space-tabs-bar .space-tabs-settings-btn:hover,
body.ios-theme.space-shell .space-tabs-bar .space-tabs-settings-btn:focus-visible,
body.ios-theme.space-shell .space-tabs-bar .space-access-chip:hover,
body.ios-theme.space-shell .space-tabs-bar .space-access-chip:focus-visible,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-settings-btn:hover,
body.ios-theme:has(.space-share) .space-tabs-bar .space-tabs-settings-btn:focus-visible,
body.ios-theme:has(.space-share) .space-tabs-bar .space-access-chip:hover,
body.ios-theme:has(.space-share) .space-tabs-bar .space-access-chip:focus-visible {
  background: rgba(255, 198, 75, 0.22) !important;
  border-color: rgba(255, 198, 75, 0.48) !important;
  color: #fff4d6 !important;
  -webkit-text-fill-color: #fff4d6 !important;
}

body.ios-theme.space-shell .space-tabs-bar summary.btn-nav.nav-more-summary,
body.ios-theme:has(.space-share) .space-tabs-bar summary.btn-nav.nav-more-summary {
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !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 textarea,
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 textarea::placeholder,
body.ios-theme .chat-input-wrap input::placeholder {
  color: #4a4a52 !important;
  opacity: 0.95 !important;
}

/* Files toolbar: light card background + body’s light text = invisible labels; force dark text. */
body.ios-theme .space-content .files-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 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.ios-theme .space-content .chat-toolbar-important {
  color: #1c1c1e !important;
}

/* Chat thread: art backdrop visible through transparent well */
body.ios-theme #panel-chat.chat-panel .chat-messages {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12) !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, 198, 75, 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;
}

/* =============================================================================
   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;
  }

  .space-share.chat-first-shell .space-content[data-active-tab="chat"] {
    overflow: hidden !important;
    overflow-y: hidden !important;
  }

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

  /* Post / Admin: scroll inside panel (parent uses overflow:hidden) */
  .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;
  }

  .space-share.chat-first-shell #panel-chat #chat-panel-inner {
    overflow: hidden !important;
    min-height: 0 !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;
  }

  .space-share.chat-first-shell #panel-chat.content-panel.active {
    overflow: hidden !important;
    min-height: 0 !important;
    flex: 1 1 auto !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 inner scroll only when NOT in composer sheet (sheet has its own scroll rules) */
  #panel-video:not(.space-sheet-open) #video-panel-inner,
  #panel-video:not(.space-sheet-open).content-panel.active #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:not(.space-sheet-open).content-panel.active {
    overflow: visible !important;
  }
  .space-content:has(#panel-video.content-panel.active:not(.space-sheet-open)),
  .space-content[data-active-tab="video"]:not(:has(#panel-video.space-sheet-open)) {
    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 {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  color-scheme: light;
}
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;
}

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

/* ios-theme Space: light surfaces must use dark ink (body sets --lg-glass-text). */
body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-files.space-sheet-open,
body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-post.space-sheet-open,
body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-video.space-sheet-open,
body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-files.space-sheet-open .files-toolbar,
body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-files.space-sheet-open .files-grid,
body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-post.space-sheet-open #post-panel-inner,
body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-video.space-sheet-open #video-panel-inner,
body.ios-theme:has(.space-share) .space-composer-sheet-header,
body.ios-theme:has(.space-share) .composer-action-menu {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-files.space-sheet-open .file-card,
body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-files.space-sheet-open .file-card .file-name,
body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-files.space-sheet-open .file-card .file-share-label {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-files.space-sheet-open .file-card .file-icon {
  color: var(--purple, #8177f0) !important;
  -webkit-text-fill-color: var(--purple, #8177f0) !important;
}

body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-files.space-sheet-open .file-card .file-size {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

body.ios-theme:has(.space-share) .composer-action-menu-item,
body.ios-theme:has(.space-share) .space-composer-sheet-title,
body.ios-theme:has(.space-share) .space-composer-sheet-back,
body.ios-theme:has(.space-share) .space-composer-sheet-close {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-live-notice__title {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-live-notice__hint,
body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-live-notice__time {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-message.received .bubble.bubble--inbox-fallback {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !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 server channel — signal overlay + live banner (see website/js/sendi-server-channel.js) */
#space-watermark-host {
  position: fixed;
  right: 0;
  bottom: 72px;
  left: auto;
  top: auto;
  width: min(92vw, 420px);
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 9998;
}
.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.15;
}
.space-watermark-overlay.space-watermark-overlay--channel.space-watermark-overlay--visible {
  /* opacity set inline from watermarkScope */
}
.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: #3D2860;
  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: #3D2860;
}

/* Live message banner — same behaviour as extension live-renderer */
.grigsi-space-live-banner {
  position: relative;
  bottom: auto;
  left: auto;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  pointer-events: none;
  z-index: auto;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grigsi-space-live-banner--static {
  white-space: normal;
  flex-wrap: wrap;
}
.grigsi-space-live-banner--moving {
  animation: grigsi-space-live-pulse 2.4s ease-in-out infinite;
}
@keyframes grigsi-space-live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.9; }
}
.grigsi-space-live-banner__text {
  display: inline-block;
}
.grigsi-space-live-banner__media {
  max-height: 26px;
  max-width: 64px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Bottom dock — composer only; channel strip is .space-channel-overlay */
:root {
  --space-bottom-dock-height: 112px;
  --space-channel-overlay-height: calc(36px + env(safe-area-inset-bottom, 0px));
  --space-media-letterbox: #2a2e36;
}

/* Always-on channel overlay — G‿G watermark + live messages */
.space-channel-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10065;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: calc(34px + env(safe-area-inset-bottom, 0px));
  padding: 4px 10px max(6px, env(safe-area-inset-bottom, 0px));
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
  pointer-events: none;
  box-sizing: border-box;
  border-top: 1px solid rgba(166, 147, 239, 0.28);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  box-shadow: 0 -4px 18px rgba(8, 6, 18, 0.1);
  overflow: visible;
}

body.space-art-gi-lock .space-channel-overlay {
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 -6px 24px rgba(8, 6, 18, 0.22);
}

.space-channel-overlay .space-channel-signal,
.space-channel-overlay .space-channel-live {
  pointer-events: none;
}

.space-channel-overlay #grigsi-space-signal-banner {
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.65);
}

.space-channel-overlay #grigsi-space-signal-banner.grigsi-space-signal-banner--faded {
  opacity: 0.92 !important;
}

.space-channel-overlay .grigsi-space-live-banner {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.55);
}

.space-bottom-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--space-channel-overlay-height, 40px);
  z-index: 10070;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  box-sizing: border-box;
}

/* Floating chat controls — overlay top-center of message area (no bar) */
#panel-chat #chat-panel-inner .space-media-dock {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100% - 24px);
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  pointer-events: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#panel-chat #chat-panel-inner .space-media-dock::-webkit-scrollbar {
  display: none;
}

.space-media-dock.hidden {
  display: none !important;
}

.space-media-dock__btn {
  pointer-events: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid rgba(129, 119, 240, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--purple, #8177f0);
  -webkit-text-fill-color: currentColor;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 3px 12px rgba(45, 35, 90, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.space-media-dock__btn i {
  font-size: 1.05rem;
  line-height: 1;
}

.space-media-dock__btn--write {
  background: linear-gradient(165deg, #eefcf3 0%, #c9f0d8 100%);
  border-color: rgba(34, 140, 80, 0.52);
  border-width: 2px;
  color: #1a6b40;
  box-shadow: 0 3px 12px rgba(34, 140, 80, 0.18);
}

.space-media-dock__btn--write:hover,
.space-media-dock__btn--write:focus-visible {
  background: linear-gradient(165deg, #f6fff9 0%, #b8eacb 100%);
  border-color: rgba(34, 140, 80, 0.68);
  box-shadow: 0 4px 16px rgba(34, 140, 80, 0.24);
}

/* Compact dock (top row) — no Write; composer bar handles typing */
#panel-chat #chat-panel-inner .space-media-dock:not(.space-media-dock--hero) .space-media-dock__btn--write,
#space-media-dock:not(.space-media-dock--hero) .space-media-dock__btn--write {
  display: none !important;
}

/* Hero onboarding — large centered dock icons on empty Space */
body.space-dock-hero-active #chat-panel-inner {
  position: relative;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(10, 14, 30, 0.2) 44%, rgba(6, 8, 18, 0.34) 100%),
    radial-gradient(ellipse 85% 55% at 50% -8%, rgba(56, 72, 140, 0.28) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 92% 78%, rgba(40, 60, 110, 0.18) 0%, transparent 52%),
    radial-gradient(ellipse 50% 40% at 8% 88%, rgba(48, 56, 108, 0.14) 0%, transparent 48%),
    linear-gradient(180deg, var(--space-cosmos-top) 0%, var(--space-cosmos-mid) 42%, var(--space-cosmos-deep) 100%);
}

body.space-dock-hero-active #panel-chat #chat-panel-inner::after {
  content: "G";
  position: absolute;
  left: 50%;
  top: min(38%, calc(var(--space-hero-dock-top, 120px) * 0.42));
  width: min(46vw, 248px);
  height: min(46vw, 248px);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(4.2rem, 22vw, 7.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(26, 21, 40, 0.3);
  -webkit-text-fill-color: rgba(26, 21, 40, 0.3);
  text-shadow: none;
  opacity: 0.42;
  filter: blur(18px) saturate(0.48) brightness(1.06);
  background: radial-gradient(
    circle at 34% 26%,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 246, 212, 0.5) 16%,
    rgba(255, 198, 75, 0.34) 40%,
    rgba(245, 166, 35, 0.22) 68%,
    rgba(212, 136, 6, 0.14) 100%
  );
  box-shadow:
    0 0 24px rgba(255, 198, 75, 0.14),
    0 10px 28px rgba(0, 0, 0, 0.14);
  animation: space-sun-breathe-muted 4.8s ease-in-out infinite;
}

/* Hero create: hide duplicate bottom chrome (G‿G / GI) — keep composer bar visible */
body.space-dock-hero-active #space-channel-overlay,
body.space-dock-hero-active #space-art-caption,
body.space-dock-hero-active #space-gi-controls,
body.space-dock-hero-active #space-gi-info-btn {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

body.space-dock-hero-active #space-bottom-dock {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
  z-index: 10080 !important;
}

body.space-dock-hero-active #space-bottom-dock .space-bottom-dock__composer,
body.space-dock-hero-active #space-bottom-dock .chat-composer {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.space-dock-hero-active #chat-panel-inner::before {
  z-index: 0;
  opacity: 0.34;
  filter: blur(12px) saturate(0.82);
}

body.space-dock-hero-active #panel-chat .chat-messages {
  background: transparent;
}

#panel-chat #chat-panel-inner .space-media-dock.space-media-dock--hero,
#panel-chat #chat-panel-inner .space-media-dock.space-media-dock--hero-settle,
body.space-dock-hero-active > #space-media-dock.space-media-dock--hero,
body.space-dock-hero-active > #space-media-dock.space-media-dock--hero-settle {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--space-hero-dock-top, 120px) !important;
  bottom: calc(var(--space-bottom-dock-height, 112px) + var(--space-channel-overlay-height, 40px)) !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 0 !important;
  height: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 12;
  isolation: isolate;
  filter: none;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 18px 22px;
  padding: 12px 16px;
  overflow: visible;
  pointer-events: auto;
  box-sizing: border-box;
}

.space-media-dock--hero .space-dock-mic-meter,
.space-media-dock--hero .space-media-dock__btn--hide-keyboard,
.space-media-dock--hero-settle .space-dock-mic-meter,
.space-media-dock--hero-settle .space-media-dock__btn--hide-keyboard {
  display: none !important;
}

.space-media-dock--hero .space-media-dock__btn,
.space-media-dock--hero-settle .space-media-dock__btn {
  width: 108px;
  height: 108px;
  border-width: 2.5px;
  border-radius: 999px;
  flex-direction: column;
  gap: 0;
  box-shadow:
    0 10px 28px rgba(45, 35, 90, 0.22),
    0 2px 0 rgba(255, 255, 255, 0.45) inset;
}

.space-media-dock--hero .space-media-dock__btn i,
.space-media-dock--hero-settle .space-media-dock__btn i {
  font-size: 2.3rem;
}

.space-media-dock--hero .space-media-dock__btn::after,
.space-media-dock--hero-settle .space-media-dock__btn::after {
  content: attr(data-hero-label);
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.015em;
  color: inherit;
  -webkit-text-fill-color: inherit;
  opacity: 0.92;
}

.space-media-dock--hero .space-media-dock__btn--screen::after,
.space-media-dock--hero-settle .space-media-dock__btn--screen::after {
  content: "Screen\A sharing";
  white-space: pre;
  font-size: 0.86rem;
  max-width: none;
  text-align: center;
  line-height: 1.12;
  letter-spacing: 0.01em;
  margin-top: 4px;
}

.space-media-dock--hero .space-media-dock__btn--screen i,
.space-media-dock--hero-settle .space-media-dock__btn--screen i {
  font-size: 2.05rem;
}

.space-media-dock--hero .space-media-dock__btn:hover,
.space-media-dock--hero .space-media-dock__btn:focus-visible,
.space-media-dock--hero-settle .space-media-dock__btn:hover,
.space-media-dock--hero-settle .space-media-dock__btn:focus-visible {
  transform: scale(1.04);
}

/* Mobile hero — compact grid, all icons visible without scrolling */
@media (max-width: 768px) {
  #panel-chat #chat-panel-inner .space-media-dock.space-media-dock--hero,
  #panel-chat #chat-panel-inner .space-media-dock.space-media-dock--hero-settle,
  body.space-dock-hero-active > #space-media-dock.space-media-dock--hero,
  body.space-dock-hero-active > #space-media-dock.space-media-dock--hero-settle {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: center;
    justify-items: center;
    align-items: center;
    gap: clamp(6px, 1.5vw, 9px) clamp(7px, 2vw, 11px);
    padding: clamp(6px, 1.4vw, 10px) clamp(10px, 2.8vw, 14px);
    overflow: hidden;
  }

  .space-media-dock--hero .space-media-dock__btn,
  .space-media-dock--hero-settle .space-media-dock__btn {
    width: min(74px, calc((100vw - 52px) / 4));
    height: min(74px, calc((100vw - 52px) / 4));
    max-width: 74px;
    max-height: 74px;
    border-width: 2px;
    box-shadow:
      0 6px 18px rgba(45, 35, 90, 0.18),
      0 1px 0 rgba(255, 255, 255, 0.4) inset;
  }

  .space-media-dock--hero .space-media-dock__btn i,
  .space-media-dock--hero-settle .space-media-dock__btn i {
    font-size: 1.5rem;
  }

  .space-media-dock--hero .space-media-dock__btn--screen i,
  .space-media-dock--hero-settle .space-media-dock__btn--screen i {
    font-size: 1.35rem;
  }

  .space-media-dock--hero .space-media-dock__btn::after,
  .space-media-dock--hero-settle .space-media-dock__btn::after {
    font-size: 0.62rem;
    margin-top: 2px;
    line-height: 1.05;
  }

  .space-media-dock--hero .space-media-dock__btn--screen::after,
  .space-media-dock--hero-settle .space-media-dock__btn--screen::after {
    font-size: 0.58rem;
    margin-top: 2px;
    line-height: 1.05;
  }

  body.space-dock-hero-active #panel-chat #chat-panel-inner {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: manipulation;
  }

  body.space-dock-hero-active #panel-chat .chat-messages {
    padding-top: 0 !important;
    min-height: 0 !important;
  }

  body.space-dock-hero-active #chat-panel-inner::before {
    min-height: 0;
  }
}

@media (max-width: 420px) {
  #panel-chat #chat-panel-inner .space-media-dock.space-media-dock--hero,
  #panel-chat #chat-panel-inner .space-media-dock.space-media-dock--hero-settle,
  body.space-dock-hero-active > #space-media-dock.space-media-dock--hero,
  body.space-dock-hero-active > #space-media-dock.space-media-dock--hero-settle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px 8px;
    padding: 6px 10px;
  }

  .space-media-dock--hero .space-media-dock__btn,
  .space-media-dock--hero-settle .space-media-dock__btn {
    width: min(68px, calc((100vw - 44px) / 3));
    height: min(68px, calc((100vw - 44px) / 3));
    max-width: 68px;
    max-height: 68px;
  }

  .space-media-dock--hero .space-media-dock__btn i,
  .space-media-dock--hero-settle .space-media-dock__btn i {
    font-size: 1.35rem;
  }

  .space-media-dock--hero .space-media-dock__btn--screen i,
  .space-media-dock--hero-settle .space-media-dock__btn--screen i {
    font-size: 1.2rem;
  }

  .space-media-dock--hero .space-media-dock__btn::after,
  .space-media-dock--hero-settle .space-media-dock__btn::after {
    font-size: 0.58rem;
  }

  .space-media-dock--hero .space-media-dock__btn--screen::after,
  .space-media-dock--hero-settle .space-media-dock__btn--screen::after {
    font-size: 0.54rem;
  }
}

/* Short mobile viewports — shrink hero icons so all rows fit without scroll */
@media (max-width: 768px) and (max-height: 520px) {
  .space-media-dock--hero .space-media-dock__btn,
  .space-media-dock--hero-settle .space-media-dock__btn {
    width: min(62px, calc((100vw - 48px) / 4));
    height: min(62px, calc((100vw - 48px) / 4));
    max-width: 62px;
    max-height: 62px;
  }

  .space-media-dock--hero .space-media-dock__btn i,
  .space-media-dock--hero-settle .space-media-dock__btn i {
    font-size: 1.25rem;
  }
}

@media (max-width: 420px) and (max-height: 520px) {
  .space-media-dock--hero .space-media-dock__btn,
  .space-media-dock--hero-settle .space-media-dock__btn {
    width: min(58px, calc((100vw - 40px) / 3));
    height: min(58px, calc((100vw - 40px) / 3));
    max-width: 58px;
    max-height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .space-media-dock--hero-settle .space-media-dock__btn {
    transition: none !important;
    transform: none !important;
  }
}

/* Tablet hero — keep feed minimal; icons use compact mobile grid below 768px */
@media (max-width: 1024px) {
  body.space-dock-hero-active #panel-chat .chat-messages {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.space-dock-hero-active #panel-chat .chat-messages-feed {
    margin-top: 0 !important;
    padding-top: 4px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/*
 * Dock palette by role (GriGsi: yellow attach · purple audio · ink video · dark+gold screen)
 * ─ Attach: file + gallery
 * ─ Audio: voice message + live mic
 * ─ Video: video message + live camera
 * ─ Screen: presentation share
 */
.space-media-dock__btn--attach {
  border-width: 2px;
  border-color: rgba(201, 137, 0, 0.5);
  color: #6b4a00;
  box-shadow: 0 3px 12px rgba(255, 198, 75, 0.28);
}

.space-media-dock__btn--attach.space-media-dock__btn--file {
  background: linear-gradient(165deg, #ffffff 0%, #fff9e8 100%);
}

.space-media-dock__btn--attach.space-media-dock__btn--gallery {
  background: linear-gradient(165deg, #fff4d4 0%, #ffe89a 92%);
  border-color: rgba(201, 137, 0, 0.62);
  box-shadow: 0 3px 14px rgba(255, 198, 75, 0.38);
}

.space-media-dock__btn--audio {
  background: linear-gradient(165deg, #f5f0ff 0%, #ddd4ff 100%);
  border-color: rgba(92, 67, 200, 0.55);
  border-width: 2px;
  color: #4f38b8;
  box-shadow: 0 3px 12px rgba(92, 67, 200, 0.2);
}

.space-media-dock__btn--video {
  background: #ffffff;
  border: 2px solid #1a1a24;
  color: #1a1a24;
  box-shadow: 0 4px 14px rgba(26, 26, 36, 0.16);
}

/* Recorded messages (file) vs live mic/cam in the same dock */
.space-media-dock__btn--msg-audio,
.space-media-dock__btn--msg-video {
  border-style: dashed;
  overflow: visible;
}

.space-media-dock__btn--msg-audio i,
.space-media-dock__btn--msg-video i {
  font-size: 1.55rem;
  line-height: 1;
}

.space-media-dock__btn--msg-audio {
  background: linear-gradient(165deg, #fff8f0 0%, #ffe8cc 100%);
  border-color: rgba(201, 137, 0, 0.45);
  color: #8a5a00;
  box-shadow: 0 3px 10px rgba(255, 198, 75, 0.2);
}

.space-media-dock__btn--msg-video {
  background: linear-gradient(165deg, #f0f7ff 0%, #d4e8ff 100%);
  border-color: rgba(33, 120, 200, 0.45);
  color: #1565a8;
  box-shadow: 0 3px 10px rgba(33, 120, 200, 0.18);
}

.space-media-dock__btn--utility.space-media-dock__btn--hide-keyboard {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(26, 26, 36, 0.22);
  border-style: dashed;
  color: rgba(26, 26, 36, 0.62);
  box-shadow: none;
}

.space-media-dock__btn--screen {
  background: linear-gradient(165deg, #2a2838 0%, #1a1a24 100%);
  border: 2px solid #ffc64b;
  color: #ffc64b;
  box-shadow: 0 4px 16px rgba(26, 26, 36, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.space-media-dock__btn--attach:hover,
.space-media-dock__btn--attach:focus-visible {
  background: #ffc64b;
  border-color: #c98900;
  color: #1a1a24;
  outline: none;
}

.space-media-dock__btn--audio:hover,
.space-media-dock__btn--audio:focus-visible {
  background: #c8b8ff;
  border-color: #6b5ce0;
  color: #2a1a6e;
  outline: none;
}

.space-media-dock__btn--video:hover,
.space-media-dock__btn--video:focus-visible {
  background: #1a1a24;
  border-color: #1a1a24;
  color: #ffffff;
  outline: none;
}

.space-media-dock__btn--utility:hover,
.space-media-dock__btn--utility:focus-visible {
  background: #ffffff;
  border-color: rgba(26, 26, 36, 0.45);
  color: #1a1a24;
  outline: none;
}

.space-media-dock__btn--screen:hover,
.space-media-dock__btn--screen:focus-visible {
  background: #3d3850;
  border-color: #ffe89a;
  color: #ffe89a;
  outline: none;
}

.space-media-dock__btn:active {
  transform: scale(0.96);
}

/* Live: audio = green · video = purple glow · screen = green on dark */
.space-media-dock__btn--audio.is-on {
  border-color: rgba(76, 175, 80, 0.75);
  background: linear-gradient(165deg, #e8f8ea 0%, #c8e6c9 100%);
  color: #1b5e20;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2), 0 3px 12px rgba(76, 175, 80, 0.25);
}

.space-media-dock__btn--video.is-on {
  border-color: #6b5ce0;
  background: linear-gradient(165deg, #ede8ff 0%, #a693ef 100%);
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(107, 92, 224, 0.28), 0 3px 14px rgba(107, 92, 224, 0.35);
}

.space-media-dock__btn--screen.is-on {
  border-color: #81c784;
  background: linear-gradient(165deg, #1b3d22 0%, #0d2812 100%);
  color: #a5d6a7;
  box-shadow: 0 0 0 2px rgba(129, 199, 132, 0.25), 0 4px 16px rgba(0, 0, 0, 0.35);
}

.space-media-dock__btn.is-off {
  opacity: 0.78;
}

.space-media-dock__btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

.space-media-dock__btn--hide-keyboard i {
  font-size: 0.92rem;
}

.space-dock-mic-meter {
  pointer-events: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 34px;
  height: 36px;
  padding: 5px 4px 4px;
  border-radius: 10px;
  border: 1.5px solid rgba(92, 67, 200, 0.45);
  background: linear-gradient(165deg, #f5f0ff 0%, #ddd4ff 100%);
  box-shadow: 0 3px 12px rgba(92, 67, 200, 0.18);
  box-sizing: border-box;
  opacity: 0.72;
  transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.space-dock-mic-meter.hidden {
  display: none !important;
}

.space-dock-mic-meter.is-on {
  opacity: 1;
}

.space-dock-mic-meter.is-active {
  border-color: rgba(102, 187, 106, 0.55);
  box-shadow: 0 0 0 2px rgba(102, 187, 106, 0.12);
}

.space-dock-mic-meter__bar {
  flex: 1 1 0;
  min-width: 3px;
  max-width: 4px;
  height: 18%;
  min-height: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(129, 119, 240, 0.55) 0%, rgba(129, 119, 240, 0.85) 100%);
  transition: height 65ms linear;
}

.space-dock-mic-meter.is-active .space-dock-mic-meter__bar {
  background: linear-gradient(180deg, #a5d6a7 0%, #66bb6a 52%, #43a047 100%);
}

.composer-hide-keyboard-btn.hidden {
  display: none !important;
}

@media (max-width: 1024px) {
  #space-media-dock.space-media-dock--vv-pinned {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 9010;
    margin: 0;
    pointer-events: none;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }

  body.space-mobile-vv-sync.space-bottom-dock-active .space-bottom-dock {
    transition: bottom 0.1s ease-out;
  }

  body.space-mobile-vv-sync #panel-chat .chat-messages {
    padding-top: max(52px, calc(var(--space-media-dock-top, 72px) - 8px));
  }

  body.space-mobile-kbd-open.space-bottom-dock-active #panel-chat .chat-messages {
    scroll-padding-bottom: calc(var(--space-bottom-dock-height, 112px) + 12px);
  }

  body.space-mobile-kbd-open .space-bottom-dock__composer {
    padding-bottom: 4px;
  }

  #space-media-dock.space-media-dock--kbd-collapsed {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #space-media-dock.space-media-dock--above-composer {
    z-index: 10068;
  }

  body.space-mobile-kbd-open #space-media-dock.space-media-dock--above-composer .space-media-dock__btn {
    pointer-events: auto;
  }

  /* Writing focus — keyboard + composer + action icons only (mobile) */
  body.space-mobile-writing-focus > header.grigsi-top-bar,
  body.space-mobile-writing-focus > .connect-offline-banner,
  body.space-mobile-writing-focus .space-header,
  body.space-mobile-writing-focus .space-tabs-bar,
  body.space-mobile-writing-focus .space-tabs,
  body.space-mobile-writing-focus .space-link-bar {
    display: none !important;
  }

  /* Keep #panel-chat .chat-messages visible: send keeps focus so the keyboard
     stays open — hiding the feed made sent bubbles invisible on phone. */
  body.space-mobile-writing-focus #space-channel-overlay,
  body.space-mobile-writing-focus #chat-panel-inner::before,
  body.space-mobile-writing-focus .chat-art-layer,
  body.space-mobile-writing-focus #space-art-caption,
  body.space-mobile-writing-focus #space-gi-controls,
  body.space-mobile-writing-focus #space-gi-info-btn,
  body.space-mobile-writing-focus .chat-empty-quick-actions,
  body.space-mobile-writing-focus #space-bottom-dock > :not(.space-bottom-dock__composer) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.space-mobile-writing-focus #panel-chat .chat-messages {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.space-mobile-writing-focus .space-share {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  body.space-mobile-writing-focus .space-main,
  body.space-mobile-writing-focus .space-content,
  body.space-mobile-writing-focus #panel-chat,
  body.space-mobile-writing-focus #chat-panel-inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.space-mobile-writing-focus .space-share,
  body.space-mobile-writing-focus #panel-chat,
  body.space-mobile-writing-focus #chat-panel-inner {
    background: #f4f2fb !important;
    background-image: none !important;
  }

  body.space-mobile-writing-focus .space-bottom-dock {
    z-index: 10075 !important;
    background: #ffffff;
    box-shadow: 0 -2px 12px rgba(26, 26, 36, 0.08);
  }

  body.space-mobile-writing-focus .space-bottom-dock__composer {
    padding-bottom: 6px;
    background: #ffffff;
  }

  body.space-mobile-writing-focus .chat-composer-dock {
    min-height: 42px;
    box-shadow: 0 2px 14px rgba(26, 26, 36, 0.06);
  }

  body.space-mobile-writing-focus .chat-composer-actions {
    display: none !important;
  }

  body.space-mobile-writing-focus .chat-composer .chat-input-wrap textarea,
  body.space-mobile-writing-focus .chat-composer .chat-input-wrap #chat-input {
    max-height: min(var(--chat-input-max-height, 120px), 28vh) !important;
  }

  #space-media-dock.space-media-dock--writing-toolbar {
    z-index: 10074 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    max-width: calc(100vw - 16px);
    padding: 0 6px;
    pointer-events: none;
    opacity: 1 !important;
    visibility: visible !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #space-media-dock.space-media-dock--writing-toolbar::-webkit-scrollbar {
    display: none;
  }

  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn {
    pointer-events: auto;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
  }

  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn i {
    font-size: 1rem;
  }

  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn--msg-audio i,
  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn--msg-video i {
    font-size: 1.25rem;
  }

  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn::after {
    display: none !important;
    content: none !important;
  }

  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn--write,
  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn--screen,
  #space-media-dock.space-media-dock--writing-toolbar .space-dock-mic-meter {
    display: none !important;
  }

  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn--mic,
  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn--cam {
    display: inline-flex !important;
  }

  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn--hide-keyboard {
    display: inline-flex !important;
  }
}

@media (max-width: 520px) {
  #space-media-dock.space-media-dock--writing-toolbar {
    gap: 4px !important;
    max-width: calc(100vw - 10px);
  }

  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn {
    width: 34px;
    height: 34px;
  }

  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn i {
    font-size: 0.92rem;
  }

  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn--msg-audio i,
  #space-media-dock.space-media-dock--writing-toolbar .space-media-dock__btn--msg-video i {
    font-size: 1.15rem;
  }

  body.space-mobile-writing-focus .space-bottom-dock__composer {
    padding: 4px 6px 4px;
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
  }

  body.space-mobile-writing-focus .chat-composer-dock {
    min-height: 40px;
    border-radius: 22px !important;
  }
}

@media (max-width: 520px) {
  #panel-chat #chat-panel-inner .space-media-dock:not(.space-media-dock--vv-pinned) {
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    gap: 5px;
  }

  #panel-chat #chat-panel-inner .space-media-dock.space-media-dock--vv-pinned {
    gap: 5px;
  }

  .space-media-dock__btn {
    width: 36px;
    height: 36px;
  }

  .space-media-dock__btn i {
    font-size: 0.95rem;
  }

  .space-media-dock__btn--msg-audio i,
  .space-media-dock__btn--msg-video i {
    font-size: 1.4rem;
  }
}

.space-bottom-dock__composer {
  pointer-events: auto;
  padding: 6px 8px max(6px, env(safe-area-inset-bottom, 0px));
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.92) 28%,
    #ffffff 55%
  );
}

/* Portaled to body on mobile so Send stays above media-dock / overlays */
.space-bottom-dock.space-bottom-dock--portaled {
  z-index: 10080 !important;
  pointer-events: none;
}
.space-bottom-dock.space-bottom-dock--portaled .space-bottom-dock__composer,
.space-bottom-dock.space-bottom-dock--portaled .space-pending-delivery,
.space-bottom-dock.space-bottom-dock--portaled .chat-important-block {
  pointer-events: auto;
}

.send-btn,
#btn-send.send-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 6;
  pointer-events: auto !important;
}

.space-channel-overlay .space-channel-live {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

.space-channel-overlay .space-channel-live .grigsi-space-live-banner {
  justify-content: flex-end;
  text-align: right;
}

.space-channel-overlay .space-channel-live .grigsi-space-live-banner__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.space-channel-overlay .space-channel-signal {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: min(46vw, 220px);
}

body.space-bottom-dock-active .chat-composer {
  margin-top: 0 !important;
  position: relative !important;
  bottom: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border-top: none !important;
}

body.space-bottom-dock-active #panel-chat .chat-messages,
body.space-bottom-dock-active .space-share.chat-first-shell #panel-chat .chat-messages {
  padding-bottom: calc(var(--space-bottom-dock-height, 112px) + var(--space-channel-overlay-height, 40px) + 32px) !important;
}

body.space-bottom-dock-active .space-share.chat-first-shell .chat-composer {
  position: relative !important;
  bottom: auto !important;
  margin-top: 0 !important;
  background: transparent !important;
}

body.space-composer-sheet-active .space-bottom-dock {
  z-index: 0;
}

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

/* ========== Space: performance-first (flat UI, no animated cosmic backdrop) ========== */
body.space-dock-hero-active.ios-theme.space-shell,
body.space-dock-hero-active.ios-theme:has(.space-share) {
  background:
    radial-gradient(ellipse 85% 55% at 50% -8%, rgba(56, 72, 140, 0.38) 0%, transparent 58%),
    linear-gradient(180deg, var(--space-cosmos-top) 0%, var(--space-cosmos-deep) 100%) !important;
  background-image: none !important;
}

body.ios-theme.space-shell,
body.ios-theme:has(.space-share) {
  animation: none !important;
  --lg-h1: 28;
  --lg-h2: 220;
  background: var(--space-shell-bg) !important;
  background-image: none !important;
}

body.ios-theme.space-shell {
  --space-glass-backdrop: blur(0px);
  --lg-glass-bg: var(--space-shell-panel);
  --lg-glass-border: rgba(255, 255, 255, 0.12);
  --space-panel-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
  --pleer-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

body.ios-theme.space-shell .space-header {
  background: var(--space-shell-tabs) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ios-theme.space-shell .space-share {
  background: transparent !important;
}

body.ios-theme.space-shell .space-main,
body.ios-theme.space-shell .space-content {
  background: transparent !important;
}

body.ios-theme.space-shell .space-header,
body.ios-theme.space-shell .space-tabs,
body.ios-theme.space-shell .module-join-box,
body.ios-theme.space-shell .space-sidebar,
body.ios-theme.space-shell .panel-pop-wrap,
body.ios-theme.space-shell .floating-panel-body,
body.ios-theme.space-shell .screen-share-start-card,
body.ios-theme.space-shell .file-card,
body.ios-theme.space-shell .space-link-bar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--space-panel-shadow) !important;
  background: var(--space-shell-panel) !important;
  background-color: var(--space-shell-panel) !important;
}

body.ios-theme.space-shell .space-header {
  background: var(--space-shell-tabs) !important;
  background-color: var(--space-shell-tabs) !important;
  padding-top: 0 !important;
}

body.ios-theme.space-shell .space-tabs-bar summary.btn-nav.nav-more-summary,
body.ios-theme:has(.space-share) .space-tabs-bar summary.btn-nav.nav-more-summary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}

body.ios-theme.space-shell .space-tabs-participants-btn,
body.ios-theme:has(.space-share) .space-tabs-participants-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
}


body.ios-theme.space-shell .space-presence--connecting .space-presence-dot,
body.ios-theme.space-shell .space-presence--others .space-presence-dot {
  animation: none !important;
  opacity: 1;
  transform: none;
  box-shadow: none;
}

/* Space code (tabs row, far left) — always light chip, dark text (any theme / color-scheme) */
body.ios-theme.space-shell .space-tabs .space-code-display,
body.ios-theme:has(.space-share) .space-tabs .space-code-display,
.space-tabs-code-wrap .space-code-display,
body.ios-theme .space-tabs-code-wrap .space-code-display,
body.ios-theme.space-shell .space-code-display {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  color-scheme: light;
  caret-color: #1a1a24;
}
body.ios-theme.space-shell .space-tabs .space-code-display:hover,
body.ios-theme:has(.space-share) .space-tabs .space-code-display:hover,
.space-tabs-code-wrap .space-code-display:hover {
  background: #f2f2f7 !important;
  background-color: #f2f2f7 !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}
body.ios-theme.space-shell .space-tabs .space-code-display:focus,
body.ios-theme:has(.space-share) .space-tabs .space-code-display:focus,
.space-tabs-code-wrap .space-code-display:focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border-color: var(--purple, #6a5acd) !important;
  box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.22) !important;
}

body.ios-theme.space-shell .space-header .logo {
  color: var(--purple);
  text-shadow: none;
}

body.ios-theme.space-shell #panel-chat.chat-panel .chat-messages {
  background: transparent;
}

body.ios-theme.space-shell .content-panel {
  background: transparent;
}

body.ios-theme.space-shell .space-tabs {
  background: var(--space-shell-tabs) !important;
  background-color: var(--space-shell-tabs) !important;
}

/* Kill remaining GPU-heavy effects inside the Space (not site header.grigsi-top-bar) */
body.ios-theme.space-shell .space-share,
body.ios-theme.space-shell .space-share * {
  animation: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.ios-theme.space-shell .space-share * {
  transition-property: none !important;
  transition-duration: 0s !important;
}

body.ios-theme.space-shell .space-header,
body.ios-theme.space-shell .space-tabs,
body.ios-theme.space-shell .chat-message .bubble,
body.ios-theme.space-shell .file-card {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25) !important;
}

body.ios-theme.space-shell .video-stage:not(:fullscreen),
body.ios-theme.space-shell .pleer-bar,
body.ios-theme.space-shell .modal-content {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--space-shell-panel) !important;
}

body.ios-theme.space-shell .fa-spin,
body.ios-theme.space-shell .loading-spinner {
  animation: spin 0.8s linear infinite !important;
}

/* Edge help tab: light glass + black “G at a glance” (not page background) */
body.ios-theme.space-shell .grigsi-help-wrap,
body.ios-theme.space-shell .grigsi-help-wrap .grigsi-help-chip,
body.ios-theme.space-shell .grigsi-help-wrap .grigsi-help-glyph,
body.ios-theme.space-shell .grigsi-help-wrap .grigsi-help-label,
body.ios-theme.space-shell .grigsi-help-wrap #grigsi-help-launch,
body.ios-theme.space-shell .grigsi-help-wrap #grigsi-help-launch .grigsi-help-label,
body.ios-theme.space-shell .grigsi-help-wrap #grigsi-help-launch .grigsi-help-glyph {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
body.ios-theme.space-shell .grigsi-help-wrap .grigsi-help-chip.grigsi-glass-surface {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), -6px 8px 28px rgba(0, 0, 0, 0.35) !important;
}

/* FINAL: Space code field — desktop: full-width input + icons on the right edge */
@media (min-width: 769px) {
  html body.ios-theme #space-tabs .space-tabs-code-wrap,
  html body.ios-theme.space-shell #space-tabs .space-tabs-code-wrap,
  html body.ios-theme:has(.space-share) #space-tabs .space-tabs-code-wrap {
    display: flex !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    overflow: visible !important;
  }

  html body.ios-theme #space-tabs .space-code-picker-wrap,
  html body.ios-theme.space-shell #space-tabs .space-code-picker-wrap,
  html body.ios-theme:has(.space-share) #space-tabs .space-code-picker-wrap {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: stretch !important;
    margin-left: 0 !important;
  }

  html body.ios-theme.space-shell #space-tabs textarea#space-code.space-code-display,
  html body.ios-theme.space-shell #space-tabs input#space-code.space-code-display,
  html body.ios-theme:has(.space-share) #space-tabs textarea#space-code.space-code-display,
  html body.ios-theme:has(.space-share) #space-tabs input#space-code.space-code-display,
  html body.ios-theme #space-tabs textarea#space-code.space-code-display,
  html body.ios-theme #space-tabs input#space-code.space-code-display,
  html body.ios-theme textarea#space-code.space-code-display,
  html body.ios-theme input#space-code.space-code-display {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 6px 0 0 6px !important;
    border-right: none !important;
  }
}

@media (max-width: 768px) {
  html body.ios-theme #space-tabs .space-tabs-code-wrap,
  html body.ios-theme.space-shell #space-tabs .space-tabs-code-wrap,
  html body.ios-theme:has(.space-share) #space-tabs .space-tabs-code-wrap {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
  }

  html body.ios-theme #space-tabs .space-code-picker-wrap,
  html body.ios-theme.space-shell #space-tabs .space-code-picker-wrap,
  html body.ios-theme:has(.space-share) #space-tabs .space-code-picker-wrap {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    margin-left: 0 !important;
  }

  html body.ios-theme #space-tabs textarea#space-code.space-code-display,
  html body.ios-theme.space-shell #space-tabs textarea#space-code.space-code-display,
  html body.ios-theme:has(.space-share) #space-tabs textarea#space-code.space-code-display,
  html body.ios-theme #space-tabs input#space-code.space-code-display,
  html body.ios-theme textarea#space-code.space-code-display,
  html body.ios-theme input#space-code.space-code-display {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

html body.ios-theme.space-shell #space-tabs textarea#space-code.space-code-display,
html body.ios-theme.space-shell #space-tabs input#space-code.space-code-display,
html body.ios-theme:has(.space-share) #space-tabs textarea#space-code.space-code-display,
html body.ios-theme:has(.space-share) #space-tabs input#space-code.space-code-display,
html body.ios-theme #space-tabs textarea#space-code.space-code-display,
html body.ios-theme #space-tabs input#space-code.space-code-display,
html body.ios-theme textarea#space-code.space-code-display,
html body.ios-theme input#space-code.space-code-display {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  color-scheme: light;
  caret-color: #1a1a24;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 1 !important;
}
html body.ios-theme #space-tabs .space-tabs-code-wrap {
  background: transparent !important;
  background-color: transparent !important;
}

html body.ios-theme #space-tabs .space-tabs-share-btn,
html body.ios-theme.space-shell #space-tabs .space-tabs-share-btn,
html body.ios-theme:has(.space-share) #space-tabs .space-tabs-share-btn {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  box-shadow: none !important;
}

/* FINAL: Space code picker + copy/rename icons on white code strip */
html body.ios-theme #space-tabs .space-code-copy-btn,
html body.ios-theme.space-shell #space-tabs .space-code-copy-btn,
html body.ios-theme:has(.space-share) #space-tabs .space-code-copy-btn {
  background: linear-gradient(180deg, #f7fbff 0%, #e9f2fd 100%) !important;
  background-color: transparent !important;
  color: #1565c0 !important;
  -webkit-text-fill-color: #1565c0 !important;
  border: 1px solid rgba(21, 101, 192, 0.22) !important;
  border-left: none !important;
}

html body.ios-theme #space-tabs .space-code-copy-btn:hover,
html body.ios-theme.space-shell #space-tabs .space-code-copy-btn:hover,
html body.ios-theme:has(.space-share) #space-tabs .space-code-copy-btn:hover,
html body.ios-theme #space-tabs .space-code-copy-btn:focus-visible,
html body.ios-theme.space-shell #space-tabs .space-code-copy-btn:focus-visible,
html body.ios-theme:has(.space-share) #space-tabs .space-code-copy-btn:focus-visible {
  background: linear-gradient(180deg, #dce9f8 0%, #b8d4f0 100%) !important;
  border-color: rgba(13, 71, 161, 0.5) !important;
  color: #0d47a1 !important;
  -webkit-text-fill-color: #0d47a1 !important;
  box-shadow:
    0 2px 4px rgba(21, 101, 192, 0.16),
    0 4px 10px rgba(21, 101, 192, 0.2) !important;
}

html body.ios-theme #space-tabs .space-code-copy-btn i,
html body.ios-theme.space-shell #space-tabs .space-code-copy-btn i,
html body.ios-theme:has(.space-share) #space-tabs .space-code-copy-btn i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

html body.ios-theme #space-tabs .space-code-rename-btn,
html body.ios-theme.space-shell #space-tabs .space-code-rename-btn,
html body.ios-theme:has(.space-share) #space-tabs .space-code-rename-btn {
  background: linear-gradient(180deg, #fffaf4 0%, #fff0df 100%) !important;
  background-color: transparent !important;
  color: #ef6c00 !important;
  -webkit-text-fill-color: #ef6c00 !important;
  border: 1px solid rgba(239, 108, 0, 0.24) !important;
  border-left: none !important;
}

html body.ios-theme #space-tabs .space-code-rename-btn:hover,
html body.ios-theme.space-shell #space-tabs .space-code-rename-btn:hover,
html body.ios-theme:has(.space-share) #space-tabs .space-code-rename-btn:hover,
html body.ios-theme #space-tabs .space-code-rename-btn:focus-visible,
html body.ios-theme.space-shell #space-tabs .space-code-rename-btn:focus-visible,
html body.ios-theme:has(.space-share) #space-tabs .space-code-rename-btn:focus-visible {
  background: linear-gradient(180deg, #ffe8cc 0%, #ffd4a3 100%) !important;
  border-color: rgba(230, 81, 0, 0.5) !important;
  color: #e65100 !important;
  -webkit-text-fill-color: #e65100 !important;
  box-shadow:
    0 2px 4px rgba(239, 108, 0, 0.14),
    0 4px 10px rgba(239, 108, 0, 0.2) !important;
}

html body.ios-theme #space-tabs .space-code-rename-btn i,
html body.ios-theme.space-shell #space-tabs .space-code-rename-btn i,
html body.ios-theme:has(.space-share) #space-tabs .space-code-rename-btn i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

html body.ios-theme #space-tabs .space-code-share-btn,
html body.ios-theme.space-shell #space-tabs .space-code-share-btn,
html body.ios-theme:has(.space-share) #space-tabs .space-code-share-btn {
  background: linear-gradient(180deg, #f1f8f2 0%, #e0f0e3 100%) !important;
  background-color: transparent !important;
  color: #2e7d32 !important;
  -webkit-text-fill-color: #2e7d32 !important;
  border: 1px solid rgba(27, 94, 32, 0.22) !important;
  border-left: none !important;
}

html body.ios-theme #space-tabs .space-code-share-btn:hover,
html body.ios-theme.space-shell #space-tabs .space-code-share-btn:hover,
html body.ios-theme:has(.space-share) #space-tabs .space-code-share-btn:hover,
html body.ios-theme #space-tabs .space-code-share-btn:focus-visible,
html body.ios-theme.space-shell #space-tabs .space-code-share-btn:focus-visible,
html body.ios-theme:has(.space-share) #space-tabs .space-code-share-btn:focus-visible {
  background: linear-gradient(180deg, #d4ead8 0%, #b8dcc0 100%) !important;
  border-color: rgba(27, 94, 32, 0.5) !important;
  color: #1b5e20 !important;
  -webkit-text-fill-color: #1b5e20 !important;
  box-shadow:
    0 2px 4px rgba(27, 94, 32, 0.14),
    0 4px 10px rgba(27, 94, 32, 0.18) !important;
}

html body.ios-theme #space-tabs .space-code-share-btn i,
html body.ios-theme.space-shell #space-tabs .space-code-share-btn i,
html body.ios-theme:has(.space-share) #space-tabs .space-code-share-btn i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

html body.ios-theme #space-tabs .space-code-picker-btn,
html body.ios-theme.space-shell #space-tabs .space-code-picker-btn,
html body.ios-theme:has(.space-share) #space-tabs .space-code-picker-btn {
  background: linear-gradient(180deg, #faf8ff 0%, #f0ebfc 100%) !important;
  background-color: transparent !important;
  color: #7b1fa2 !important;
  -webkit-text-fill-color: #7b1fa2 !important;
  border: 1px solid rgba(123, 31, 162, 0.22) !important;
}

html body.ios-theme #space-tabs .space-code-picker-btn:hover,
html body.ios-theme.space-shell #space-tabs .space-code-picker-btn:hover,
html body.ios-theme:has(.space-share) #space-tabs .space-code-picker-btn:hover,
html body.ios-theme #space-tabs .space-code-picker-btn[aria-expanded="true"],
html body.ios-theme.space-shell #space-tabs .space-code-picker-btn[aria-expanded="true"],
html body.ios-theme:has(.space-share) #space-tabs .space-code-picker-btn[aria-expanded="true"] {
  background: linear-gradient(180deg, #ebe2fa 0%, #d4c4f2 100%) !important;
  border-color: rgba(106, 27, 154, 0.48) !important;
  color: #6a1b9a !important;
  -webkit-text-fill-color: #6a1b9a !important;
  box-shadow:
    0 2px 4px rgba(123, 31, 162, 0.14),
    0 4px 10px rgba(123, 31, 162, 0.2) !important;
}

html body.ios-theme #space-tabs .space-code-picker-btn i,
html body.ios-theme.space-shell #space-tabs .space-code-picker-btn i,
html body.ios-theme:has(.space-share) #space-tabs .space-code-picker-btn i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

html body.ios-theme .space-code-picker-menu,
html body.ios-theme.space-shell .space-code-picker-menu,
html body.ios-theme:has(.space-share) .space-code-picker-menu {
  background: linear-gradient(165deg, #fff9e8 0%, #ffefb8 48%, #ffe89a 100%) !important;
  border: 1px solid rgba(201, 137, 0, 0.45) !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  box-shadow: 0 10px 32px rgba(26, 26, 36, 0.18) !important;
}

html body.ios-theme .space-code-picker-option,
html body.ios-theme .space-code-picker-option-title,
html body.ios-theme .space-code-picker-empty,
html body.ios-theme .space-code-picker-rename-link {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

html body.ios-theme .space-code-picker-option-code {
  color: #5c43c8 !important;
  -webkit-text-fill-color: #5c43c8 !important;
}

html body.ios-theme .space-code-picker-rename-link,
html body.ios-theme .space-code-picker-rename-link i {
  color: #5c3d00 !important;
  -webkit-text-fill-color: #5c3d00 !important;
}

/* Attention signals — online (1) + activity (2), max 2 activity sounds */
@keyframes space-attention-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 198, 75, 0); }
  50% { box-shadow: 0 0 0 5px rgba(255, 198, 75, 0.5); }
}

body.space-attention-online #space-participants-chip {
  animation: space-attention-pulse-ring 0.55s ease-in-out 2;
}

body.space-attention-activity .space-tabs-code-wrap {
  animation: space-attention-pulse-ring 0.45s ease-in-out 2;
}

body.space-attention-activity #chat-badge:not(.hidden) {
  animation: space-attention-pulse-ring 0.45s ease-in-out 2;
}

/* GriGsi Connect ↔ Space (participant modal) */
.space-connect-bridge {
  margin: 0 0 14px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.08);
}
#space-participants-modal .space-connect-bridge-lead {
  margin: 0 0 10px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #444;
}
.space-connect-bridge-lead a {
  color: #a8d4ff;
  font-weight: 700;
}
.space-connect-bridge-self {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(166, 147, 239, 0.12);
  border: 1px solid rgba(166, 147, 239, 0.28);
}

.space-connect-bridge-self__mark {
  flex-shrink: 0;
}

.space-connect-bridge-self__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}

.space-connect-bridge-self__code {
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
  color: #fff;
}

.space-connect-bridge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.space-connect-bridge-btn {
  flex: 1 1 140px;
  min-width: 0;
  margin-bottom: 0;
}
.space-connect-bridge-btn--secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}
.space-connect-bridge-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.16);
}
.space-connect-local-status--err {
  color: #ffb4b4;
}
#space-participants-modal .space-connect-local-status {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #555;
}
.space-connect-local-status {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}
#space-participants-modal .space-connect-bridge-sub {
  margin: 10px 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
}
.space-connect-bridge-sub {
  margin: 10px 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
}
.space-connect-hints-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.space-connect-hints-list li,
.space-connect-hint-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.space-connect-hints-empty {
  padding: 8px 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: none;
}
.space-connect-hint-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  margin-left: auto;
}
.space-connect-hint-btn {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(166, 147, 239, 0.45);
  background: rgba(166, 147, 239, 0.2);
  color: #fff;
  cursor: pointer;
}
.space-connect-hint-btn--open {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
}
.space-connect-hint-btn:disabled {
  opacity: 0.65;
  cursor: default;
}
.space-connect-hint-text {
  flex: 1;
  min-width: 0;
}
.space-connect-hint-mark {
  flex-shrink: 0;
  line-height: 0;
}
.space-connect-hint-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.9);
}
.space-connect-hints-list li:last-child {
  border-bottom: none;
}

/* Local Connect mode — compact code + Share/Add in tabs row */
html.grigsi-local-connect .space-tabs-pair-btn {
  display: none !important;
}

html.grigsi-local-connect .space-code-display {
  pointer-events: none;
  opacity: 0.95;
}

html.grigsi-local-connect .space-tabs-share-btn,
html.grigsi-local-connect .space-tabs-dock-btn--open,
html.grigsi-local-connect #btn-space-dock-open {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.space-connect-sheet-overlay.modal {
  z-index: 12000;
  padding: 0 !important;
  background: transparent !important;
  border: none;
  overflow: hidden;
}

.space-connect-sheet-overlay {
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.space-connect-sheet-overlay.active {
  display: flex;
}

.space-connect-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(12, 10, 24, 0.58);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* Share bottom sheet — dark glass (matches invite modal) */
.space-share-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  min-height: 0;
  max-height: min(92vh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin: 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: rgba(22, 24, 36, 0.96);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.45);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
  color: rgba(255, 255, 255, 0.92);
}

.space-share-sheet__handle {
  width: 36px;
  height: 5px;
  margin: 4px auto 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}

.space-share-sheet__done {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  border: 0;
  background: rgba(255, 198, 75, 0.95);
  color: #2a1a45;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.space-spacebook-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 4px 0 10px;
  min-height: 44px;
}
.space-spacebook-top .space-share-sheet__done {
  position: static;
  z-index: auto;
}
#space-spacebook-sheet .space-share-sheet__head {
  padding-right: 0;
}
body.sendi-landing-picker #space-spacebook-close,
body.sendi-creating-new #space-spacebook-close {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Bigger New — Old sendis sheet: RIGHT, ~2× longer */
html body #space-spacebook-new.space-chrome-action--new,
#space-spacebook-new {
  min-height: 44px !important;
  min-width: 11.5rem !important;
  width: min(72%, 14rem) !important;
  padding: 0.5rem 1.6rem !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  margin-left: auto !important;
}

.space-spacebook-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 4px 0 10px;
  min-height: 44px;
}
body.sendi-landing-picker .space-spacebook-top,
body.sendi-creating-new .space-spacebook-top {
  justify-content: flex-end;
}

.space-spacebook-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  cursor: pointer;
  margin: 0;
  padding: 0 2px 0 8px;
  align-self: stretch;
}
.space-spacebook-check__input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #ffc64b;
  cursor: pointer;
}
.space-spacebook-item.is-selected {
  border-color: rgba(255, 198, 75, 0.7);
  background: rgba(255, 198, 75, 0.14);
}

/* Delete bar ABOVE the list — always obvious */
.space-spacebook-purge-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin: 0 0 10px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(240, 139, 131, 0.1);
  border: 1px solid rgba(240, 139, 131, 0.35);
  position: sticky;
  top: 0;
  z-index: 3;
}
.space-spacebook-purge-actions.is-empty {
  opacity: 0.55;
}
.space-spacebook-purge-actions.has-selection {
  background: rgba(240, 80, 70, 0.22);
  border-color: rgba(255, 120, 110, 0.65);
  box-shadow: 0 0 0 1px rgba(255, 120, 110, 0.25);
}
.space-spacebook-delete-selected {
  flex: 1.4 1 160px !important;
  min-height: 44px !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  border-color: rgba(255, 110, 100, 0.75) !important;
  color: #ffe8e4 !important;
  -webkit-text-fill-color: #ffe8e4 !important;
  background: rgba(198, 40, 40, 0.55) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.space-spacebook-delete-selected.is-armed {
  background: #c62828 !important;
  border-color: #ff8a80 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.space-spacebook-delete-selected:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.space-spacebook-purge-all {
  flex: 1 1 120px !important;
}

.space-share-sheet__head {
  padding: 0 72px 10px 0;
  margin: 0 0 12px;
  color: #fff;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.space-share-sheet__head h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--yellow, #ffc64b);
}

.space-share-sheet__lead {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
}

#space-connect-sheet .space-share-sheet__head {
  padding: 0 72px 10px 0 !important;
  margin: 0 0 12px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  border-radius: 0 !important;
}

.space-share-sheet__perms,
.space-access-guest-perms,
[data-guest-perm-group].grigsi-guest-perm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

.space-access-guest-perms {
  margin: 12px 0;
}

.space-share-sheet__perms-label,
.space-access-guest-perms > legend,
[data-guest-perm-group].grigsi-guest-perm-grid > legend {
  grid-column: 1 / -1;
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 4px;
  padding: 0;
}

.space-share-sheet__perm,
.space-access-perm,
[data-guest-perm-group].grigsi-guest-perm-grid > label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  margin: 0;
  cursor: pointer;
  min-width: 0;
}

.space-share-sheet__perm--all,
.space-access-perm--all,
[data-guest-perm-group].grigsi-guest-perm-grid > label[class*="--all"] {
  font-weight: 700;
}

.grigsi-invite-access-hint {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 198, 75, 0.12);
  border: 1px solid rgba(255, 198, 75, 0.28);
}

.grigsi-invite-access-hint[data-access-kind="full"] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.62);
}

.grigsi-invite-access-hint.hidden {
  display: none !important;
}

.space-share-sheet__code-card,
.space-share-sheet__link-card {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.space-share-sheet__code-label,
.space-share-sheet__section-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 8px;
}

.space-share-sheet__code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.space-share-sheet__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fff;
  flex: 1 1 auto;
  min-width: 0;
}

.space-share-sheet__chip-btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 198, 75, 0.18);
  color: var(--yellow, #ffc64b);
  border: 1px solid rgba(255, 198, 75, 0.35);
}

.space-share-sheet__chip-btn:active {
  background: rgba(255, 198, 75, 0.28);
}

.space-share-hub {
  margin-bottom: 4px;
}

.space-share-hub .space-share-sheet__link-card {
  margin-top: 0;
}

.space-share-mode {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.space-share-mode__btn {
  flex: 1;
  padding: 10px 6px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.15;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.space-share-mode__btn.is-active {
  background: #ffc64b;
  color: #2a1a45;
  box-shadow: 0 2px 8px rgba(255, 198, 75, 0.45);
}

.space-share-sheet__mode-hint {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}

.space-share-action-wrap {
  margin-bottom: 12px;
}

.space-share-action-wrap.hidden {
  display: none;
}

.space-share-sheet__select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 0.92rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: rgba(0, 0, 0, 0.32);
  color: rgba(255, 255, 255, 0.92);
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #ffc64b 50%), linear-gradient(135deg, #ffc64b 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.space-share-link-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.8rem;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 255, 255, 0.92);
}

.space-share-qr {
  display: flex;
  justify-content: center;
  margin: 0 0 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.space-share-qr:empty {
  display: none;
}

.space-share-hub__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.space-share-sheet__action {
  border: 0;
  border-radius: 12px;
  padding: 12px 10px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.space-share-sheet__action--primary {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #8177f0 0%, #6a5acd 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(106, 90, 205, 0.35);
}

.space-share-sheet__action--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  border-color: rgba(255, 255, 255, 0.1);
}

.space-share-sheet__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.space-share-sheet__footer-btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.space-share-sheet__footer-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--yellow, #ffc64b);
  font-weight: 700;
}

@media (min-width: 520px) {
  .space-connect-sheet-overlay.active {
    align-items: center;
    padding: 16px;
  }

  .space-share-sheet {
    border-radius: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    max-height: min(88vh, 680px);
  }

  .space-share-sheet__handle {
    display: none;
  }
}

@media (max-width: 768px) {
  body.space-invite-sheet-open,
  body.space-add-sheet-open {
    overflow: hidden !important;
  }

  #space-connect-sheet.space-connect-sheet-overlay.modal.active {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    z-index: 12100 !important;
  }

  #space-connect-sheet .space-share-sheet {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - var(--space-grigsi-nav-clearance, 72px)) !important;
    border-radius: 16px 16px 0 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: auto;
  }

  #space-connect-sheet .space-share-sheet__head {
    position: sticky;
    top: 0;
    z-index: 4;
    background: rgba(22, 24, 36, 0.98);
    padding-top: 10px;
    margin-bottom: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  #space-connect-sheet .space-share-sheet__done {
    top: 10px;
  }

  #space-add-sheet.space-connect-sheet-overlay.modal.active {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    z-index: 12100 !important;
  }

  #space-add-sheet .space-share-sheet {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - var(--space-grigsi-nav-clearance, 72px)) !important;
    border-radius: 16px 16px 0 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: auto;
  }

  #space-add-sheet .space-share-sheet__head {
    position: sticky;
    top: 0;
    z-index: 4;
    background: rgba(22, 24, 36, 0.98);
    padding-top: 10px;
    margin-bottom: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  #space-add-sheet .space-share-sheet__done {
    top: 10px;
  }
}

/* Share sheet — beat ios-theme global input glass */
body.ios-theme.space-shell #space-connect-sheet.modal,
body.ios-theme:has(.space-share) #space-connect-sheet.modal {
  background: transparent !important;
}

body.ios-theme.space-shell #space-connect-sheet .space-connect-sheet-backdrop,
body.ios-theme:has(.space-share) #space-connect-sheet .space-connect-sheet-backdrop {
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}

html body.ios-theme #space-connect-sheet .space-share-link-input,
html body.ios-theme #space-connect-sheet .space-share-sheet__select {
  background: rgba(0, 0, 0, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

html body.ios-theme #space-connect-sheet .space-share-sheet__select {
  background-image: linear-gradient(45deg, transparent 50%, #ffc64b 50%), linear-gradient(135deg, #ffc64b 50%, transparent 50%) !important;
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

body.ios-theme #space-connect-sheet .space-connect-local-toast,
body.ios-theme #space-connect-sheet .space-action-cap-banner,
body.ios-theme #space-connect-sheet .space-cap-policy-status {
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
}

body.ios-theme #space-connect-sheet .space-connect-local-toast--err {
  color: #ffc8c8 !important;
  -webkit-text-fill-color: #ffc8c8 !important;
}

.space-connect-local-toast {
  margin-top: 10px;
  font-size: 0.85rem;
  min-height: 0;
  text-align: center;
  color: #3d2860;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
}

.space-connect-local-toast.hidden {
  display: none !important;
}

#space-connect-sheet .space-connect-local-toast {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.space-connect-local-toast.show {
  opacity: 1;
}

.space-connect-local-toast--err {
  color: #c62828;
}

#space-connect-sheet .space-connect-local-toast--err {
  color: #ffc8c8 !important;
  -webkit-text-fill-color: #ffc8c8 !important;
  background: rgba(198, 40, 40, 0.22);
  border-color: rgba(255, 138, 128, 0.35);
}

.space-action-cap-banner {
  font-size: 0.88rem;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(33, 150, 243, 0.12);
  color: #0d47a1;
  margin-bottom: 10px;
}

#space-connect-sheet .space-action-cap-banner {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(33, 150, 243, 0.22);
  border: 1px solid rgba(144, 202, 249, 0.28);
}

.space-action-cap-banner.hidden {
  display: none;
}

.space-cap-policy-status {
  font-size: 0.82rem;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(166, 147, 239, 0.12);
  color: #4a3d7a;
  margin-bottom: 10px;
}

#space-connect-sheet .space-cap-policy-status {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(166, 147, 239, 0.22);
  border: 1px solid rgba(196, 181, 253, 0.28);
}

/* Add Space sheet — reuses invite sheet chrome */
#space-add-sheet.space-connect-sheet-overlay.modal.active {
  z-index: 12100 !important;
}

#space-add-sheet .space-share-sheet {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.space-add-sheet__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}

.space-add-sheet__optional {
  font-weight: 500;
  opacity: 0.75;
}

.space-add-sheet__input,
.space-add-sheet__name {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.95);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  min-height: 48px;
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  touch-action: manipulation;
  caret-color: #ffc64b;
  position: relative;
  z-index: 3;
}

.space-add-sheet__input::placeholder,
.space-add-sheet__name::placeholder {
  color: rgba(255, 255, 255, 0.45);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.space-add-sheet__input:focus,
.space-add-sheet__name:focus {
  outline: none;
  border-color: rgba(255, 198, 75, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 198, 75, 0.18);
}

.space-add-sheet__status {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  background: rgba(166, 147, 239, 0.2);
  color: rgba(255, 255, 255, 0.92);
}

.space-add-sheet__status--err {
  background: rgba(220, 80, 80, 0.22);
  color: #ffd4d4;
}

.space-add-sheet__hint {
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.58);
}

.space-add-sheet__actions--dual .space-share-sheet__action--primary {
  grid-column: auto;
}

#space-add-sheet #btn-space-add-open-tab {
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

#space-add-sheet #btn-space-add-open-tab:hover {
  background: #111;
}

#space-add-sheet #btn-space-add-open-tab:active {
  background: #1a1a1a;
}

.space-add-sheet__actions {
  margin-top: 4px;
}

#space-add-sheet .space-share-sheet__footer {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.space-add-sheet__spacebook-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(196, 181, 253, 0.35);
  border-radius: 12px;
  background: rgba(129, 119, 240, 0.22);
  color: #f8f6ff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.space-add-sheet__spacebook-btn:hover {
  background: rgba(129, 119, 240, 0.34);
  border-color: rgba(196, 181, 253, 0.55);
}

.space-add-sheet__spacebook-btn:active {
  transform: scale(0.98);
}

html body.ios-theme #space-add-sheet .space-add-sheet__input,
html body.ios-theme #space-add-sheet .space-add-sheet__name {
  background: rgba(0, 0, 0, 0.45) !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html body.ios-theme #space-add-sheet .space-add-sheet__input::placeholder,
html body.ios-theme #space-add-sheet .space-add-sheet__name::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

html body.ios-theme #space-add-sheet .space-add-sheet__input:-webkit-autofill,
html body.ios-theme #space-add-sheet .space-add-sheet__input:-webkit-autofill:hover,
html body.ios-theme #space-add-sheet .space-add-sheet__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(20, 14, 36, 0.95) inset !important;
  box-shadow: 0 0 0 1000px rgba(20, 14, 36, 0.95) inset !important;
  -webkit-text-fill-color: #f8f6ff !important;
  caret-color: #f8f6ff;
}

body.ios-theme.space-shell #space-add-sheet.modal,
body.ios-theme:has(.space-share) #space-add-sheet.modal {
  background: transparent !important;
}

body.ios-theme.space-shell #space-add-sheet .space-connect-sheet-backdrop,
body.ios-theme:has(.space-share) #space-add-sheet .space-connect-sheet-backdrop {
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}

/* Spacebook sheet */
.space-spacebook-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#space-spacebook-sheet .space-spacebook-filter[data-spacebook-filter="favorites"],
#space-spacebook-sheet .space-spacebook-filter[data-spacebook-filter="used"] {
  flex: 1 1 0;
  min-width: 0;
}

.space-spacebook-filter {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: min(88px, 28vw);
  max-width: 120px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.14);
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.space-spacebook-filter strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}

.space-spacebook-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(255, 255, 255, 0.16);
}

.space-spacebook-filter.is-on .space-spacebook-filter-count {
  color: #1a1528 !important;
  -webkit-text-fill-color: #1a1528 !important;
  background: rgba(255, 198, 75, 0.92);
}

.space-spacebook-filter span {
  font-size: 0.65rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.68) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.68) !important;
}

.space-spacebook-filter:hover {
  border-color: rgba(196, 181, 253, 0.45);
  background: rgba(166, 147, 239, 0.18);
}

.space-spacebook-filter.is-on {
  border-color: rgba(255, 198, 75, 0.65);
  background: rgba(255, 198, 75, 0.14);
}

.space-spacebook-filter.is-on span {
  color: rgba(255, 224, 138, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 224, 138, 0.9) !important;
}

.space-spacebook-filter--expired:not(.is-on) .space-spacebook-filter-count {
  background: rgba(240, 139, 131, 0.28);
}

.space-spacebook-filter--expired.is-on {
  border-color: rgba(240, 139, 131, 0.7);
  background: rgba(240, 139, 131, 0.14);
}

.space-spacebook-filter--expired.is-on .space-spacebook-filter-count {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(240, 139, 131, 0.92);
}

.space-spacebook-filter--expired.is-on span {
  color: rgba(255, 200, 190, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 200, 190, 0.92) !important;
}

.space-spacebook-purge-actions {
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.space-spacebook-purge-all,
.space-spacebook-delete-selected {
  flex: 1 1 140px;
  border-color: rgba(240, 139, 131, 0.55) !important;
  color: #ffd4cf !important;
  -webkit-text-fill-color: #ffd4cf !important;
  background: rgba(240, 139, 131, 0.12) !important;
}

.space-spacebook-purge-all:hover,
.space-spacebook-delete-selected:hover:not(:disabled) {
  background: rgba(240, 139, 131, 0.22) !important;
}

.space-spacebook-delete-selected:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.space-spacebook-item.is-expired {
  opacity: 0.82;
  border-color: rgba(240, 139, 131, 0.42);
  background: rgba(240, 139, 131, 0.1);
}

.space-spacebook-item.is-expired .space-spacebook-item-meta {
  color: #f08b83 !important;
  -webkit-text-fill-color: #f08b83 !important;
  font-weight: 700;
}

.space-spacebook-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(50vh, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.space-spacebook-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.space-spacebook-item.is-viewing {
  border-color: rgba(255, 198, 75, 0.55);
  background: rgba(255, 198, 75, 0.12);
}

.space-spacebook-item-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.space-spacebook-item-title {
  font-weight: 700;
  font-size: 0.92rem;
  flex: 1 1 100%;
}

.space-spacebook-item-code {
  font-size: 0.72rem;
  opacity: 0.65;
  font-family: ui-monospace, monospace;
}

.space-spacebook-item-meta {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffc64b;
}

.space-spacebook-rename,
.space-spacebook-newtab,
.space-spacebook-remove,
.space-spacebook-fav {
  flex: 0 0 auto;
  width: 44px;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.space-spacebook-fav {
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.95rem;
  border-radius: 12px 0 0 12px;
}
.space-spacebook-fav.is-on {
  color: #ffc64b;
}
.space-spacebook-fav:hover,
.space-spacebook-fav:focus-visible {
  background: rgba(255, 198, 75, 0.16);
  color: #ffe08a;
  outline: none;
}

.space-spacebook-rename {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
}

.space-spacebook-rename:hover,
.space-spacebook-rename:focus-visible {
  background: rgba(255, 198, 75, 0.18);
  color: #ffe08a;
  outline: none;
}

.space-spacebook-newtab {
  color: rgba(255, 255, 255, 0.65);
}

.space-spacebook-newtab:hover,
.space-spacebook-newtab:focus-visible {
  background: rgba(166, 147, 239, 0.2);
  color: #fff;
  outline: none;
}

.space-spacebook-remove {
  color: rgba(255, 255, 255, 0.55);
  border-radius: 0 12px 12px 0;
}

.space-spacebook-remove__x {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.space-spacebook-remove:hover,
.space-spacebook-remove:focus-visible {
  background: rgba(198, 40, 40, 0.22);
  color: #ffb4b4;
  outline: none;
}

.space-spacebook-live-hint {
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.58);
}

.space-spacebook-empty {
  margin: 0 0 14px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

.space-spacebook-empty.hidden {
  display: none !important;
}

.space-spacebook-footer {
  flex-direction: column;
  gap: 10px;
}

.space-spacebook-add {
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #8177f0 0%, #6a5acd 100%);
  color: #fff;
}

@media (max-width: 768px) {
  body.space-spacebook-open {
    overflow: hidden !important;
  }

  #space-spacebook-sheet.space-connect-sheet-overlay.modal.active {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    z-index: 12100 !important;
  }

  #space-spacebook-sheet .space-share-sheet {
    max-height: calc(100dvh - var(--space-grigsi-nav-clearance, 72px)) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

#access-settings-modal.modal.active {
  align-items: flex-end;
  padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
  overflow: hidden;
}

#access-settings-modal .modal-content.modal-small {
  width: min(100%, 420px);
  min-height: 0;
  max-height: min(
    90dvh,
    calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)) - 24px)
  );
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.space-cap-policy-status.hidden {
  display: none !important;
}

.space-p2p-lan-block {
  margin: 12px 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(166, 147, 239, 0.25);
}

.space-p2p-lan-block.hidden {
  display: none !important;
}

.space-p2p-my-peer-id {
  display: block;
  margin: 6px 0 10px;
  padding: 8px 10px;
  font-size: 0.78rem;
  word-break: break-all;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}

.space-p2p-lan-status {
  margin-bottom: 8px;
}

@media (min-width: 520px) {
  .grigsi-wizard-pick {
    min-height: 112px;
  }
}

/* legacy aliases (older cached HTML) */
.space-quick-pick-chat-fallback {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px 18px;
  border: 1.5px solid rgba(106, 90, 205, 0.28);
  border-radius: 14px;
  background: #fff;
  color: #555 !important;
  -webkit-text-fill-color: #555 !important;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.space-quick-pick-chat-fallback:focus {
  outline: none;
}

.space-quick-pick-chat-fallback:active {
  transform: scale(0.98);
}

.space-quick-pick-chat-fallback:focus-visible {
  outline: 2px solid #ffc64b;
  outline-offset: 3px;
}

/* ===== Chat-first shell: single channel + composer sheets ===== */
.space-share.chat-first-shell .space-tabs-nav {
  display: none !important;
}

.space-share.chat-first-shell .space-content {
  position: relative;
}

.space-share.chat-first-shell .space-content[data-active-tab="chat"] {
  overflow-x: clip;
  overflow-y: auto;
}

.space-share.chat-first-shell #panel-chat.content-panel.active {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* Clearance for sticky GriGsi site nav (wraps to 2 rows on narrow phones) */
body:has(.space-share) {
  --space-grigsi-nav-clearance: max(72px, calc(env(safe-area-inset-top, 0px) + 56px));
}

@media (max-width: 420px) {
  body:has(.space-share) {
    --space-grigsi-nav-clearance: max(96px, calc(env(safe-area-inset-top, 0px) + 80px));
  }
}

.space-composer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(8, 10, 18, 0.52);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Composer sheets live inside .space-share (z-index: 1) — lift above backdrop + bottom dock when open */
body.space-composer-sheet-active .space-share {
  z-index: 10055;
}

body.space-composer-sheet-active .space-composer-backdrop {
  z-index: 10050;
}

body.space-composer-sheet-active .space-bottom-dock {
  visibility: hidden;
  pointer-events: none;
}

.space-composer-backdrop.hidden {
  display: none;
}

.space-composer-sheet-nav {
  display: none;
  position: fixed;
  top: max(calc(var(--space-grigsi-nav-clearance, 72px) + 8px), env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 10055;
  pointer-events: none;
}

.space-composer-sheet-nav:not(.hidden) {
  display: block;
  pointer-events: auto;
}

.space-composer-back-chat,
.space-composer-sheet-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(201, 137, 0, 0.45);
  border-radius: 999px;
  background: #ffc64b;
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(26, 26, 36, 0.22);
}

.space-composer-back-chat:hover,
.space-composer-back-chat:focus-visible,
.space-composer-sheet-back:hover,
.space-composer-sheet-back:focus-visible {
  background: #f5b830;
  color: #1a1a24;
  outline: none;
}

body.space-composer-sheet-active {
  overflow: hidden;
}

body.space-composer-sheet-active:has(.space-share.chat-first-shell) {
  overflow: hidden !important;
}

.space-share.chat-first-shell #panel-files.space-sheet-open,
.space-share.chat-first-shell #panel-video.space-sheet-open,
.space-share.chat-first-shell #panel-post.space-sheet-open {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(720px, 100vw);
  max-height: min(88vh, 920px);
  z-index: 10050;
  margin: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.28);
  background: var(--card-bg, #fff);
  overflow: hidden;
  animation: space-sheet-in 0.22s ease;
  box-sizing: border-box;
}

.space-share.chat-first-shell #panel-video.space-sheet-open {
  max-height: min(90dvh, 920px);
  height: min(90dvh, 920px);
}

@keyframes space-sheet-in {
  from {
    transform: translateX(-50%) translateY(12px);
    opacity: 0.85;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.space-composer-sheet-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 14px;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  background: var(--card-bg, #fff);
}

.space-composer-sheet-back {
  display: none;
}

.space-composer-sheet-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dark, #1a1a2e);
  min-width: 0;
  justify-self: center;
  text-align: center;
}

.space-composer-sheet-close {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: rgba(26, 26, 36, 0.08);
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.space-composer-sheet-close:hover {
  background: rgba(166, 147, 239, 0.15);
  color: var(--purple, #8177f0);
}

.space-share.chat-first-shell #panel-files.space-sheet-open .files-toolbar,
.space-share.chat-first-shell #panel-files.space-sheet-open .files-grid,
.space-share.chat-first-shell #panel-video.space-sheet-open #video-panel-inner,
.space-share.chat-first-shell #panel-post.space-sheet-open #post-panel-inner {
  flex: 1 1 auto;
  min-height: 0;
}

.space-share.chat-first-shell #panel-video.space-sheet-open #video-panel-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

.chat-composer {
  flex-shrink: 0;
  background: transparent;
  border-top: none;
  padding: 8px 12px 10px;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

/* Unified message dock — one pill, no outer gray band */
.chat-composer .chat-input-area.chat-composer-dock,
.chat-composer-dock {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 5px 6px 5px 4px;
  overflow: visible;
  background: #ffffff !important;
  border: 1px solid rgba(166, 147, 239, 0.32) !important;
  border-radius: 26px !important;
  box-shadow:
    0 6px 24px rgba(26, 26, 36, 0.07),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  box-sizing: border-box;
}

.chat-composer-divider {
  flex-shrink: 0;
  width: 1px;
  align-self: center;
  height: 26px;
  margin: 0 4px;
  background: rgba(166, 147, 239, 0.28);
  border-radius: 1px;
}

.chat-composer-actions {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 2px;
  flex-shrink: 0;
  align-self: center;
  margin-bottom: 0;
}

.composer-actions-expanded {
  display: flex;
  align-items: center;
  gap: 0;
}

.composer-actions-collapsed {
  display: none;
  align-items: center;
}

/* Composer dock: only + menu (all actions inside); full icon row stays in #space-media-dock */
.chat-composer-dock .composer-actions-expanded {
  display: none !important;
}

.chat-composer-dock .composer-actions-collapsed {
  display: flex !important;
  align-items: center;
  gap: 2px;
}

.chat-composer-dock .chat-composer-divider {
  display: none !important;
}

.chat-composer-dock.is-input-expanded {
  align-items: flex-end;
}

.chat-composer-dock .chat-composer-actions {
  flex: 0 0 auto !important;
}

.chat-composer-dock .chat-input-wrap {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

.composer-more-btn.is-open .fa-plus {
  transform: rotate(45deg);
}

.composer-more-menu {
  min-width: 210px;
}

.composer-menu-wrap {
  position: relative;
}

.composer-action-btn {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--purple);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.15s, color 0.15s, transform 0.12s;
}

.composer-action-btn:hover,
.composer-action-btn[aria-expanded="true"] {
  background: rgba(166, 147, 239, 0.14);
  color: var(--purple);
}

.composer-action-btn:active {
  transform: scale(0.94);
}

.chat-composer .chat-input-wrap {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 4px 0 2px;
  min-height: 0;
  overflow: visible;
}

.chat-composer .chat-input-wrap textarea,
.chat-composer .chat-input-wrap #chat-input {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  max-height: var(--chat-input-max-height, 50vh);
  resize: none;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 0.98rem;
  line-height: 1.45;
  padding: 9px 0;
  border: none;
  background: transparent;
  font-family: inherit;
  box-sizing: border-box;
}

.chat-composer .chat-input-wrap textarea:focus,
.chat-composer .chat-input-wrap #chat-input:focus {
  outline: none;
}

.chat-composer .chat-input-wrap .send-btn,
.chat-composer .send-btn {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  padding: 0;
  margin: 0;
  margin-bottom: 0;
  border: 2px solid #e6ad00 !important;
  border-radius: 9999px;
  aspect-ratio: 1 / 1;
  font-size: 0.95rem;
  line-height: 1;
  background-color: #ffc64b !important;
  background-image: none !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  box-shadow: 0 2px 10px rgba(255, 198, 75, 0.45) !important;
  align-self: center;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.chat-composer .send-btn i,
.chat-composer .send-btn .fas,
.chat-composer .send-btn .fas::before {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  font-size: 0.95rem;
  line-height: 1;
  pointer-events: none;
}

.chat-composer .chat-input-wrap .chat-tts-btn,
.chat-composer .chat-tts-btn {
  display: none !important;
}

.chat-composer .chat-tts-btn i {
  color: #00838f !important;
  font-size: 0.9rem;
  pointer-events: none;
}

.chat-composer .chat-tts-btn:hover {
  filter: brightness(1.03);
}

.chat-composer .chat-tts-btn.is-active {
  border-color: rgba(0, 77, 64, 0.75) !important;
  background: linear-gradient(180deg, rgba(178, 235, 242, 0.98), rgba(128, 222, 234, 0.96)) !important;
  box-shadow: 0 0 0 2px rgba(0, 105, 92, 0.25) !important;
}

.chat-composer .send-btn:hover i,
.chat-composer .send-btn:hover .fas,
.chat-composer .send-btn:hover .fas::before {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.chat-composer .send-btn:hover {
  background: #a693ef !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(166, 147, 239, 0.4) !important;
}

.composer-action-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  min-width: 190px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(166, 147, 239, 0.35);
  box-shadow: 0 10px 32px rgba(26, 26, 36, 0.14);
  z-index: 40;
}

.composer-action-menu.hidden {
  display: none;
}

body.composer-menu-open .chat-composer-dock,
body.composer-menu-open .space-bottom-dock__composer,
body.composer-menu-open .space-bottom-dock {
  overflow: visible;
}

body.composer-menu-open .composer-menu-wrap {
  overflow: visible;
}

.composer-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11590;
  background: rgba(8, 10, 18, 0.35);
  -webkit-tap-highlight-color: transparent;
}

.composer-more-backdrop.hidden {
  display: none !important;
}

.composer-more-menu.composer-more-menu--portal {
  position: fixed !important;
  z-index: 11600 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  min-width: min(220px, calc(100vw - 24px)) !important;
  box-shadow: 0 14px 44px rgba(26, 26, 36, 0.22) !important;
  -webkit-overflow-scrolling: touch;
}

.composer-more-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.composer-action-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--dark);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}

.composer-action-menu-item i {
  color: var(--purple);
}

.composer-action-menu-item:hover {
  background: rgba(166, 147, 239, 0.12);
  color: var(--purple);
}

.chat-media-banner {
  display: none !important;
}

.chat-media-banner.hidden {
  display: none;
}

.chat-media-banner-main {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--purple, #8177f0);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  padding: 0;
}

.chat-media-banner-expand {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: rgba(129, 119, 240, 0.15);
  color: var(--purple, #8177f0);
  cursor: pointer;
  flex-shrink: 0;
}

.chat-media-banner-expand:hover {
  background: var(--purple, #8177f0);
  color: #fff;
}

body.ios-theme.space-shell .chat-composer,
body.ios-theme:has(.space-share) .chat-composer {
  background: transparent;
  border-top: none;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}

body.ios-theme.space-shell .chat-composer-dock,
body.ios-theme:has(.space-share) .chat-composer-dock {
  background: #ffffff !important;
  border: 1px solid rgba(166, 147, 239, 0.38) !important;
  box-shadow:
    0 8px 28px rgba(26, 26, 36, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
}

body.ios-theme.space-shell .chat-composer .chat-input-wrap,
body.ios-theme:has(.space-share) .chat-composer .chat-input-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.ios-theme.space-shell .composer-action-btn,
body.ios-theme:has(.space-share) .composer-action-btn {
  color: var(--purple) !important;
  background: transparent !important;
}

body.ios-theme.space-shell .composer-action-btn:hover,
body.ios-theme:has(.space-share) .composer-action-btn:hover,
body.ios-theme.space-shell .composer-action-btn[aria-expanded="true"],
body.ios-theme:has(.space-share) .composer-action-btn[aria-expanded="true"] {
  color: var(--purple) !important;
  background: rgba(166, 147, 239, 0.18) !important;
}

body.ios-theme.space-shell .composer-action-menu,
body.ios-theme:has(.space-share) .composer-action-menu {
  background: #ffffff;
  border-color: rgba(166, 147, 239, 0.4);
}

body.ios-theme.space-shell .composer-action-menu-item,
body.ios-theme:has(.space-share) .composer-action-menu-item {
  color: var(--dark);
}

body.ios-theme.space-shell .space-share.chat-first-shell .space-composer-sheet-header,
body.ios-theme:has(.space-share) .space-share.chat-first-shell .space-composer-sheet-header {
  background: #ffffff;
  border-bottom-color: rgba(166, 147, 239, 0.25);
}

body.ios-theme.space-shell .space-share.chat-first-shell .space-composer-sheet-title,
body.ios-theme:has(.space-share) .space-share.chat-first-shell .space-composer-sheet-title {
  color: var(--dark);
}

body.ios-theme.space-shell .space-share.chat-first-shell #panel-files.space-sheet-open,
body.ios-theme.space-shell .space-share.chat-first-shell #panel-video.space-sheet-open,
body.ios-theme.space-shell .space-share.chat-first-shell #panel-post.space-sheet-open,
body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-files.space-sheet-open,
body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-video.space-sheet-open,
body.ios-theme:has(.space-share) .space-share.chat-first-shell #panel-post.space-sheet-open {
  background: #ffffff;
  border: 1px solid rgba(166, 147, 239, 0.35);
}

@media (max-width: 768px) {
  .space-share.chat-first-shell #panel-files.space-sheet-open,
  .space-share.chat-first-shell #panel-video.space-sheet-open,
  .space-share.chat-first-shell #panel-post.space-sheet-open {
    top: var(--space-grigsi-nav-clearance, 72px);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: none;
    transform: none;
    border-radius: 16px 16px 0 0;
  }

  /* True overlay: lock chat underneath; only sheet body scrolls */
  body.space-composer-sheet-active:has(.space-share.chat-first-shell) {
    position: fixed;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !important;
    touch-action: none;
  }

  body.space-composer-sheet-active .space-share.chat-first-shell .space-main,
  body.space-composer-sheet-active .space-share.chat-first-shell .space-content,
  body.space-composer-sheet-active .space-share.chat-first-shell #panel-chat,
  body.space-composer-sheet-active .space-share.chat-first-shell #panel-chat .chat-messages {
    overflow: hidden !important;
    touch-action: none;
  }

  body.space-composer-sheet-active .space-share.chat-first-shell #panel-chat {
    pointer-events: none;
  }

  body.space-composer-sheet-active .space-share.chat-first-shell #panel-files.space-sheet-open,
  body.space-composer-sheet-active .space-share.chat-first-shell #panel-video.space-sheet-open,
  body.space-composer-sheet-active .space-share.chat-first-shell #panel-post.space-sheet-open {
    pointer-events: auto;
    touch-action: auto;
  }

  .space-share.chat-first-shell #panel-files.space-sheet-open,
  .space-share.chat-first-shell #panel-post.space-sheet-open {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .space-share.chat-first-shell #panel-files.space-sheet-open .files-toolbar {
    flex-shrink: 0;
  }

  .space-share.chat-first-shell #panel-files.space-sheet-open .files-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .space-share.chat-first-shell #panel-video.space-sheet-open {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0;
  }

  .space-composer-sheet-header {
    position: sticky;
    top: 0;
    z-index: 2;
    grid-template-columns: auto 1fr auto;
    padding-top: 12px;
  }

  .space-composer-sheet-title {
    font-size: 0.92rem;
  }

  .space-share.chat-first-shell #panel-video.space-sheet-open #video-panel-inner {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: max(24px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
  }

  .space-share.chat-first-shell #panel-video.space-sheet-open .video-panel-hd-slot {
    width: min(100%, calc(100% - 16px)) !important;
    max-height: min(32vh, 220px);
  }

  .space-share.chat-first-shell #panel-video.space-sheet-open #pleer-ui {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
    padding: 8px 10px max(14px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    position: relative;
    z-index: 4;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .space-share.chat-first-shell #panel-video.space-sheet-open .video-controls-wrap {
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  }

  .space-share.chat-first-shell #panel-video.space-sheet-open #screen-remote-access-wrap:not(.hidden) {
    margin-bottom: 12px;
  }

  /* Sheet header already has ← Chat; hide duplicate floating pill on mobile */
  .space-composer-sheet-nav {
    display: none !important;
  }

  .space-composer-sheet-back {
    display: inline-flex;
  }

  .space-composer-sheet-close {
    width: 44px;
    height: 44px;
  }

  body.ios-theme.space-shell .space-composer-sheet-back,
  body.ios-theme:has(.space-share) .space-composer-sheet-back,
  body.ios-theme.space-shell .space-composer-back-chat,
  body.ios-theme:has(.space-share) .space-composer-back-chat {
    background: #ffc64b !important;
    color: #1a1a24 !important;
    -webkit-text-fill-color: #1a1a24 !important;
  }

  body.ios-theme.space-shell .space-composer-sheet-close,
  body.ios-theme:has(.space-share) .space-composer-sheet-close {
    background: rgba(26, 26, 36, 0.1) !important;
    color: #1a1a24 !important;
    -webkit-text-fill-color: #1a1a24 !important;
  }

  .chat-composer {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }

  .chat-composer-dock {
    min-height: 44px;
    padding: 3px 4px 3px 2px;
    border-radius: 24px !important;
    align-items: flex-end;
    flex-wrap: nowrap;
    overflow: visible;
  }

  .chat-composer-divider {
    height: 22px;
    margin: 0 2px;
  }

  /* Chat-first mobile: viewport-fit + allow pull-to-refresh / page reload */
  html:has(.space-share.chat-first-shell) {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  body:has(.space-share.chat-first-shell) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    min-height: -webkit-fill-available !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  body:has(.space-share.chat-first-shell) > header.grigsi-top-bar,
  body:has(.space-share.chat-first-shell) > .connect-offline-banner:not(.hidden) {
    flex-shrink: 0;
  }

  .space-share.chat-first-shell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .space-share.chat-first-shell .space-tabs {
    --space-h-ctrl: 28px;
    gap: 4px;
    padding: 4px 6px 6px;
    flex-shrink: 0;
  }

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

  .space-share.chat-first-shell .space-content[data-active-tab="chat"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .space-share.chat-first-shell #panel-chat.content-panel.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .space-share.chat-first-shell #panel-chat #chat-panel-inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .space-share.chat-first-shell #panel-chat .chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    margin-bottom: 0 !important;
    margin-top: 4px !important;
    padding: 10px 12px !important;
  }

  .space-share.chat-first-shell .chat-composer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding-top: 6px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 18%, #fff 36%);
  }

  /* Compact horizontal pill: [+] [text…………] [send] */
  .space-share.chat-first-shell .chat-composer-dock {
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
    min-height: 44px !important;
    padding: 3px 4px 3px 2px !important;
    overflow: visible !important;
  }

  .space-share.chat-first-shell .chat-composer-dock.is-input-expanded {
    align-items: flex-end !important;
  }

  .space-share.chat-first-shell .chat-composer-actions {
    align-self: center !important;
    margin-bottom: 0 !important;
  }

  .space-share.chat-first-shell .chat-composer .chat-input-wrap {
    min-height: 0 !important;
    align-items: flex-end !important;
    overflow: visible !important;
    padding: 0 4px 0 2px !important;
  }

  .space-share.chat-first-shell .chat-composer .chat-input-wrap textarea,
  .space-share.chat-first-shell .chat-composer .chat-input-wrap #chat-input {
    min-height: 24px !important;
    max-height: var(--chat-input-max-height, 72vh) !important;
    line-height: 1.25 !important;
    padding: 7px 0 !important;
    font-size: 16px !important;
  }

  .space-share.chat-first-shell .chat-composer .chat-input-wrap .send-btn,
  .space-share.chat-first-shell .chat-composer .send-btn {
    align-self: center !important;
    margin: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 9999px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    flex: 0 0 40px !important;
  }

  .space-share.chat-first-shell .composer-action-btn {
    width: 34px;
    height: 34px;
    font-size: 0.88rem;
  }
}

/* Larger phones / small tablets (769–1024px): pin chat composer to bottom */
@media (min-width: 769px) and (max-width: 1024px) {
  html:has(.space-share.chat-first-shell) {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  body:has(.space-share.chat-first-shell) {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

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

  .space-share.chat-first-shell .space-main,
  .space-share.chat-first-shell .space-content[data-active-tab="chat"],
  .space-share.chat-first-shell #panel-chat.content-panel.active,
  .space-share.chat-first-shell #panel-chat #chat-panel-inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .space-share.chat-first-shell #panel-chat .chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .space-share.chat-first-shell .chat-composer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    position: sticky;
    bottom: 0;
    z-index: 3;
  }
}

/* Video sheet: scrollable body — controls stay below the frame, never clipped */
.space-share.chat-first-shell #panel-files.space-sheet-open .files-toolbar,
.space-share.chat-first-shell #panel-files.space-sheet-open .files-grid,
.space-share.chat-first-shell #panel-post.space-sheet-open #post-panel-inner {
  overflow: auto;
}

.space-share.chat-first-shell #panel-video.space-sheet-open #video-stage {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.space-share.chat-first-shell #panel-video.space-sheet-open #video-container {
  flex: 0 0 auto;
  min-height: 0;
}

.space-share.chat-first-shell #panel-video.space-sheet-open .video-panel-hd-slot {
  width: min(100%, calc(min(38vh, 300px) * 16 / 9));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  flex: 0 0 auto;
  background: var(--space-media-letterbox, #2a2e36);
}

.space-share.chat-first-shell #panel-video.space-sheet-open .video-frame {
  background: var(--space-media-letterbox, #2a2e36) !important;
}

.space-share.chat-first-shell #panel-files.space-sheet-open .files-grid {
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}

.chat-message .bubble img,
.chat-message-main img,
.files-grid .file-card img,
.file-card .file-thumb {
  display: block;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--space-media-letterbox, #2a2e36);
  border-radius: 8px;
}

.space-share.chat-first-shell #panel-video.space-sheet-open #pleer-ui {
  flex-shrink: 0;
  display: flex !important;
  flex-direction: column;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  position: relative;
  z-index: 4;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.space-share.chat-first-shell #panel-video.space-sheet-open .video-controls-wrap,
.space-share.chat-first-shell #panel-video.space-sheet-open #video-controls {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.space-share.chat-first-shell #panel-video.space-sheet-open #video-share-options {
  display: flex !important;
  flex-wrap: wrap;
  visibility: visible !important;
  opacity: 1 !important;
}

.space-share.chat-first-shell #panel-video.space-sheet-open #screen-remote-access-wrap:not(.hidden) {
  flex: 0 0 auto;
}

.space-share.chat-first-shell #panel-video.space-sheet-open .panel-pop-wrap {
  display: none;
}

/* ===== GriGsi Space — 4-color palette (purple · yellow · black · white) ===== */
body.ios-theme.space-shell,
body.ios-theme:has(.space-share) {
  --lg-glass-text: #ffffff;
  --lg-glass-muted: rgba(255, 255, 255, 0.82);
}

body.ios-theme.space-shell .space-share,
body.ios-theme:has(.space-share) .space-share {
  --space-ui-purple: #A693EF;
  --space-ui-yellow: #FFC64B;
  --space-ui-black: #1a1a24;
  --space-ui-white: #ffffff;
}

body.ios-theme.space-shell .space-tabs,
body.ios-theme:has(.space-share) .space-tabs {
  background: var(--space-shell-tabs);
  border-bottom-color: rgba(166, 147, 239, 0.28);
}

body.ios-theme.space-shell #panel-chat .chat-messages,
body.ios-theme:has(.space-share) #panel-chat .chat-messages {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--space-ui-black) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15) !important;
}

body.ios-theme.space-shell .chat-composer .chat-input-wrap textarea,
body.ios-theme.space-shell .chat-composer .chat-input-wrap #chat-input,
body.ios-theme:has(.space-share) .chat-composer .chat-input-wrap textarea,
body.ios-theme:has(.space-share) .chat-composer .chat-input-wrap #chat-input {
  color: var(--space-ui-black) !important;
  -webkit-text-fill-color: var(--space-ui-black) !important;
}

body.ios-theme.space-shell .chat-composer .chat-input-wrap textarea::placeholder,
body.ios-theme.space-shell .chat-composer .chat-input-wrap #chat-input::placeholder,
body.ios-theme:has(.space-share) .chat-composer .chat-input-wrap textarea::placeholder,
body.ios-theme:has(.space-share) .chat-composer .chat-input-wrap #chat-input::placeholder {
  color: rgba(26, 26, 36, 0.45) !important;
}

body.ios-theme.space-shell .chat-composer .send-btn,
body.ios-theme:has(.space-share) .chat-composer .send-btn {
  background: #ffc64b !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border-radius: 9999px !important;
  aspect-ratio: 1 / 1 !important;
  box-shadow: 0 2px 10px rgba(255, 198, 75, 0.45) !important;
}

body.ios-theme.space-shell .chat-composer .send-btn i,
body.ios-theme.space-shell .chat-composer .send-btn .fas,
body.ios-theme:has(.space-share) .chat-composer .send-btn i,
body.ios-theme:has(.space-share) .chat-composer .send-btn .fas {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

body.ios-theme.space-shell .chat-composer .send-btn:hover,
body.ios-theme:has(.space-share) .chat-composer .send-btn:hover {
  background: #a693ef !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(166, 147, 239, 0.4) !important;
}

body.ios-theme.space-shell .space-tabs-participants-chip:not(.space-presence--alone):not(.space-presence--others):not(.space-presence--connecting),
body.ios-theme:has(.space-share) .space-tabs-participants-chip:not(.space-presence--alone):not(.space-presence--others):not(.space-presence--connecting) {
  background: rgba(166, 147, 239, 0.22) !important;
  color: #ffffff !important;
}

body.ios-theme.space-shell .space-more-action--leave,
body.ios-theme:has(.space-share) .space-more-action--leave,
body.ios-theme.space-shell .btn-leave,
body.ios-theme:has(.space-share) .btn-leave {
  color: var(--space-ui-black) !important;
  -webkit-text-fill-color: var(--space-ui-black) !important;
  background: var(--space-ui-yellow) !important;
  border-color: var(--space-ui-yellow) !important;
}

body.ios-theme.space-shell .imp-pill.selected,
body.ios-theme:has(.space-share) .imp-pill.selected {
  border-color: var(--space-ui-purple) !important;
  background: rgba(166, 147, 239, 0.14) !important;
}

body.ios-theme.space-shell .chat-message.sent .bubble:not(.bubble--owner),
body.ios-theme:has(.space-share) .chat-message.sent .bubble:not(.bubble--owner) {
  background: var(--space-ui-purple) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.ios-theme.space-shell .chat-message.received .bubble,
body.ios-theme:has(.space-share) .chat-message.received .bubble {
  background: #ffffff !important;
  color: var(--space-ui-black) !important;
  border: 1px solid rgba(166, 147, 239, 0.25);
}

body.ios-theme.space-shell .btn-upload,
body.ios-theme:has(.space-share) .btn-upload,
body.ios-theme.space-shell .btn-create,
body.ios-theme:has(.space-share) .btn-create {
  background: var(--space-ui-purple) !important;
  color: #ffffff !important;
}

body.ios-theme.space-shell .btn-upload:hover,
body.ios-theme:has(.space-share) .btn-upload:hover {
  background: var(--space-ui-yellow) !important;
  color: var(--space-ui-black) !important;
}

body.ios-theme.space-shell summary.btn-nav.nav-more-summary,
body.ios-theme:has(.space-share) summary.btn-nav.nav-more-summary {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-color: rgba(166, 147, 239, 0.35) !important;
}

body.ios-theme.space-shell .space-tabs-share-btn,
body.ios-theme:has(.space-share) .space-tabs-share-btn {
  background: #ffffff !important;
  color: var(--space-ui-black) !important;
  -webkit-text-fill-color: var(--space-ui-black) !important;
  border-color: rgba(166, 147, 239, 0.35) !important;
}

body.ios-theme.space-shell .send-btn,
body.ios-theme:has(.space-share) .send-btn {
  background: #ffc64b !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border-radius: 9999px !important;
  aspect-ratio: 1 / 1 !important;
  box-shadow: 0 2px 10px rgba(255, 198, 75, 0.45) !important;
}

body.ios-theme.space-shell .send-btn i,
body.ios-theme.space-shell .send-btn .fas,
body.ios-theme:has(.space-share) .send-btn i,
body.ios-theme:has(.space-share) .send-btn .fas {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

body.ios-theme.space-shell .send-btn:hover,
body.ios-theme:has(.space-share) .send-btn:hover {
  background: #a693ef !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(166, 147, 239, 0.4) !important;
}

/* Viewer invite sheet + participant badges */
.space-viewer-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.space-viewer-mode__btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.space-viewer-mode__btn.is-active {
  background: rgba(129, 87, 199, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.space-viewer-slots-wrap {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.space-viewer-slots-title {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.space-viewer-slots-empty {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

.space-viewer-slots-empty.hidden {
  display: none;
}

.space-viewer-slots-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.space-viewer-slot-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.78rem;
}

.space-viewer-slot-item__label {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

.space-viewer-slot-item__token {
  font-size: 0.72rem;
  opacity: 0.75;
}

.space-viewer-slot-item__copy {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #ffc64b;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.space-viewer-slot-item__revoke {
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
}

.space-viewer-sheet-toast--err {
  color: #ff8a80 !important;
}

.participant-item.is-viewer .participant-avatar {
  background: rgba(129, 87, 199, 0.35);
}

.participant-viewer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(129, 87, 199, 0.2);
  color: #5b3d91;
  margin-left: 6px;
}

.btn-remove-viewer {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(200, 60, 60, 0.35);
  background: rgba(200, 60, 60, 0.08);
  color: #b32d2d;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.space-participants-viewers-heading {
  margin: 14px 0 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #444;
}

.space-participants-viewers-heading.hidden,
.space-participants-viewers-list.hidden {
  display: none !important;
}

.viewer-mode-banner {
  margin: 8px 12px !important;
}

.chat-input-wrap.viewer-only {
  display: none !important;
}

/* Portaled bottom-dock composer — beat ios-theme glass inputs + keep touch typing reliable */
#space-bottom-dock .chat-composer .chat-input-wrap textarea,
#space-bottom-dock .chat-composer .chat-input-wrap #chat-input {
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  touch-action: manipulation;
  caret-color: var(--space-ui-black, #1a1a24);
}

body.ios-theme #space-bottom-dock .chat-composer .chat-input-wrap textarea,
body.ios-theme #space-bottom-dock .chat-composer .chat-input-wrap #chat-input,
body.ios-theme.space-shell #space-bottom-dock .chat-composer .chat-input-wrap textarea,
body.ios-theme.space-shell #space-bottom-dock .chat-composer .chat-input-wrap #chat-input,
body.ios-theme:has(.space-share) #space-bottom-dock .chat-composer .chat-input-wrap textarea,
body.ios-theme:has(.space-share) #space-bottom-dock .chat-composer .chat-input-wrap #chat-input {
  color: var(--space-ui-black, #1a1a24) !important;
  -webkit-text-fill-color: var(--space-ui-black, #1a1a24) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* FINAL: Send — solid yellow pad + dark plane icon (beats ios glass text inherit) */
html body.ios-theme.space-shell #btn-send.send-btn,
html body.ios-theme:has(.space-share) #btn-send.send-btn,
html body.ios-theme #btn-send.send-btn {
  background: #ffc64b !important;
  background-color: #ffc64b !important;
  background-image: none !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  border: 2px solid #e6ad00 !important;
  box-shadow: 0 2px 10px rgba(255, 198, 75, 0.5) !important;
}

html body.ios-theme.space-shell #btn-send.send-btn .fa-paper-plane,
html body.ios-theme.space-shell #btn-send.send-btn .fa-paper-plane::before,
html body.ios-theme:has(.space-share) #btn-send.send-btn .fa-paper-plane,
html body.ios-theme:has(.space-share) #btn-send.send-btn .fa-paper-plane::before,
html body.ios-theme #btn-send.send-btn .fa-paper-plane,
html body.ios-theme #btn-send.send-btn .fa-paper-plane::before {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

html body.ios-theme.space-shell #btn-send.send-btn:hover,
html body.ios-theme:has(.space-share) #btn-send.send-btn:hover,
html body.ios-theme #btn-send.send-btn:hover {
  background: #a693ef !important;
  background-color: #a693ef !important;
  border-color: #8f7de8 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body.ios-theme.space-shell #btn-send.send-btn:hover .fa-paper-plane,
html body.ios-theme.space-shell #btn-send.send-btn:hover .fa-paper-plane::before,
html body.ios-theme:has(.space-share) #btn-send.send-btn:hover .fa-paper-plane,
html body.ios-theme:has(.space-share) #btn-send.send-btn:hover .fa-paper-plane::before,
html body.ios-theme #btn-send.send-btn:hover .fa-paper-plane,
html body.ios-theme #btn-send.send-btn:hover .fa-paper-plane::before {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Bottom dock stack: pending delivery → Important → composer → channel */
.space-bottom-dock .chat-important-block {
  pointer-events: auto;
  flex-shrink: 0;
  margin: 0;
  max-height: min(42vh, 320px);
  border-top: none;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.08);
}

.space-bottom-dock .chat-important-block.collapsed {
  max-height: 0;
  opacity: 0;
  border-top-color: transparent;
  box-shadow: none;
}

.space-bottom-dock .chat-important-block:not(.collapsed) + .space-bottom-dock__composer {
  padding-top: 0;
}

.space-bottom-dock .space-pending-delivery:not(.hidden) + .chat-important-block:not(.collapsed) {
  box-shadow: none;
}

.space-bottom-dock .space-pending-delivery:not(.hidden) + .chat-important-block.collapsed + .space-bottom-dock__composer,
.space-bottom-dock .space-pending-delivery:not(.hidden) + .space-bottom-dock__composer {
  padding-top: 4px;
}

/* Pending P2P delivery (chat / files) — lives in #space-bottom-dock above Important + composer */
.space-pending-delivery {
  margin: 0 8px 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #1a1a24;
  font-size: 0.85rem;
  flex-shrink: 0;
  pointer-events: auto;
  box-sizing: border-box;
}
.space-bottom-dock .space-pending-delivery:not(.hidden) {
  display: block;
  background: #ffffff;
}
.space-bottom-dock .space-pending-delivery:not(.hidden) + .space-bottom-dock__composer {
  background: #ffffff;
  padding-top: 4px;
}
.space-pending-delivery.hidden {
  display: none !important;
}
body.ios-theme.space-shell .space-pending-delivery:not(.hidden),
body.ios-theme:has(.space-share) .space-pending-delivery:not(.hidden) {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}
body.ios-theme.space-shell .chat-important-block:not(.collapsed),
body.ios-theme:has(.space-share) .chat-important-block:not(.collapsed) {
  background: #ffffff !important;
  color: #1a1a24 !important;
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}
body.ios-theme.space-shell .chat-important-hint,
body.ios-theme:has(.space-share) .chat-important-hint {
  color: #484848 !important;
  -webkit-text-fill-color: #484848 !important;
}
.space-pending-delivery__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1a1a24;
}
.space-pending-delivery.is-minimized .space-pending-delivery__head {
  margin-bottom: 0;
  cursor: pointer;
}
.space-pending-delivery__count {
  font-weight: 500;
  opacity: 0.75;
}
.space-pending-delivery__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
.space-pending-delivery__minimize,
.space-pending-delivery__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #5c5670;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.12s, color 0.12s;
}
.space-pending-delivery__minimize:hover,
.space-pending-delivery__minimize:focus-visible,
.space-pending-delivery__close:hover,
.space-pending-delivery__close:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  color: #1a1a24;
  outline: none;
}
.space-pending-delivery__close {
  font-size: 0.9rem;
}
.space-pending-delivery.is-minimized .space-pending-delivery__body,
.space-pending-delivery.is-chat-only-queue .space-pending-delivery__body {
  display: none;
}

/* Chat already shown in the feed — compact status bar only (auto-retry in background) */
.space-pending-delivery.is-chat-only-queue {
  margin: 0 8px 2px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
}

.space-pending-delivery.is-chat-only-queue .space-pending-delivery__head {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 0.78rem;
  min-width: 0;
}

.space-pending-delivery.is-chat-only-queue #space-pending-delivery-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-pending-delivery.is-chat-only-queue .space-pending-delivery__minimize {
  display: none;
}
.space-pending-delivery__list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  max-height: 120px;
  overflow-y: auto;
}
.space-pending-delivery__item label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: #f5f5f7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.space-pending-delivery__item span {
  flex: 1;
  word-break: break-word;
  color: #1a1a24;
}
.space-pending-delivery__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.space-pending-delivery__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
  color: #1a1a24;
}
.space-pending-delivery__send {
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: var(--accent, #8177F0);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.space-pending-delivery__send:hover {
  filter: brightness(1.05);
}

/* Media player download (inside outbox expand + space-audio-chat-card) */
.chat-media-card__download {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.chat-media-card__download:hover,
.chat-media-card__download:focus-visible {
  filter: brightness(1.08);
}

.chat-media-player-wrap {
  position: relative;
  display: block;
  max-width: min(280px, 100%);
  margin-top: 4px;
}

.chat-media-player-wrap--audio {
  min-width: 0;
}

@media (min-width: 481px) {
  .chat-media-player-wrap--audio {
    min-width: 140px;
  }
}

.chat-media-player-wrap--video {
  max-width: min(320px, 100%);
  pointer-events: auto;
}

.chat-media-player-wrap--video .chat-media-player {
  pointer-events: auto;
  touch-action: manipulation;
}

.chat-media-player {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  background: #000;
  pointer-events: auto;
}

.chat-media-player-wrap video.chat-media-player {
  min-height: 150px;
  max-height: 240px;
  object-fit: contain;
}

.chat-media-player--audio {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 40px;
}

.space-audio-chat-card .chat-media-player--audio {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.chat-media-player-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 2;
}

.chat-media-player-wrap--audio .chat-media-player-play {
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
}

.chat-media-player-play.hidden {
  display: none;
}

.chat-media-player-wrap.is-playing .chat-media-player-play {
  display: none;
}

.chat-media-open-link {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  pointer-events: auto;
}

.chat-video-play-modal {
  position: fixed;
  inset: 0;
  z-index: 100020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.chat-video-play-modal.hidden {
  display: none !important;
}

.chat-video-play-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.chat-video-play-modal__panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 720px);
  max-height: 86vh;
  background: #111;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.chat-video-play-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}

.chat-video-play-modal__video {
  display: block;
  width: 100%;
  max-height: calc(86vh - 24px);
  border-radius: 10px;
  background: #000;
  object-fit: contain;
}

body.chat-video-play-open {
  overflow: hidden;
}

.chat-message .chat-media-transcript,
.space-object-card__transcript-full,
.space-object-card__inline-transcript,
.space-audio-chat-card__transcript {
  margin: 8px 0 0;
  padding: 0 2px;
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.92;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--dark, #2a2e36);
}

.chat-message.sent .space-object-card__transcript-full,
.chat-message.sent .space-audio-chat-card__transcript {
  color: var(--dark, #2a2e36);
}

.chat-message.sent .chat-media-card__download {
  background: rgba(0, 0, 0, 0.08);
  color: var(--dark, #2a2e36);
}


/* Message reaction fold — TTS/STT stay visible; reactions behind one icon */
.chat-msg-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.chat-msg-tool--more {
  border-color: rgba(69, 90, 100, 0.35);
  background: linear-gradient(180deg, rgba(248, 249, 250, 0.97), rgba(236, 239, 241, 0.95));
  color: #546e7a;
}
.chat-msg-tool--more i { color: #546e7a; font-size: 0.78rem; }
.chat-msg-more.is-open .chat-msg-tool--more {
  border-color: rgba(123, 31, 162, 0.45);
  background: linear-gradient(180deg, rgba(243, 229, 245, 0.98), rgba(225, 190, 231, 0.95));
  color: #7b1fa2;
}
.chat-msg-more.is-open .chat-msg-tool--more i { color: #7b1fa2; }
.chat-msg-more__panel {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-6px) scale(0.96);
  transform-origin: left center;
  pointer-events: none;
  transition: max-width 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), margin 0.22s ease;
  margin-left: 0;
}
.chat-msg-more.is-open .chat-msg-more__panel {
  max-width: 240px;
  opacity: 1;
  overflow: visible;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  margin-left: 4px;
}
.chat-message.sent .chat-msg-more { flex-direction: row-reverse; }
.chat-message.sent .chat-msg-more__panel {
  transform-origin: right center;
  transform: translateX(6px) scale(0.96);
}
.chat-message.sent .chat-msg-more.is-open .chat-msg-more__panel {
  transform: translateX(0) scale(1);
  margin-left: 0;
  margin-right: 4px;
}
.chat-msg-more__panel .chat-msg-reactions { display: inline-flex; gap: 3px; }
.chat-message-actions .chat-msg-tools,
.chat-message-actions .chat-msg-tool--tts,
.chat-message-actions .chat-msg-tool--stt,
.chat-message-actions .chat-msg-tool--more {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.chat-msg-tools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 0;
}

.chat-msg-tool.is-active {
  filter: none;
  transform: none;
  box-shadow:
    0 0 0 2px rgba(0, 150, 136, 0.35),
    0 2px 6px rgba(0, 105, 92, 0.25);
}
.chat-msg-tool--tts.is-active {
  border-color: rgba(0, 105, 92, 0.65);
  background: linear-gradient(180deg, rgba(178, 235, 242, 0.98), rgba(128, 222, 234, 0.96));
  color: #004d40;
}
.chat-msg-tool--tts.is-active i {
  color: #004d40;
}

.chat-msg-reactions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.chat-msg-tool--reaction.is-picked {
  filter: none;
  transform: none;
}

.chat-msg-tool--reaction[data-reaction="up"].is-picked {
  border-color: rgba(46, 125, 50, 0.72);
  color: #1b5e20;
  background: linear-gradient(180deg, rgba(200, 230, 201, 0.98), rgba(165, 214, 167, 0.96));
  box-shadow:
    0 0 0 1px rgba(76, 175, 80, 0.35),
    0 2px 6px rgba(46, 125, 50, 0.22);
}
.chat-msg-tool--reaction[data-reaction="up"].is-picked i {
  color: #1b5e20;
}

.chat-msg-tool--reaction[data-reaction="down"].is-picked {
  border-color: rgba(198, 40, 40, 0.68);
  color: #b71c1c;
  background: linear-gradient(180deg, rgba(255, 205, 210, 0.98), rgba(239, 154, 154, 0.96));
  box-shadow:
    0 0 0 1px rgba(229, 115, 115, 0.35),
    0 2px 6px rgba(198, 40, 40, 0.2);
}
.chat-msg-tool--reaction[data-reaction="down"].is-picked i {
  color: #b71c1c;
}

.chat-msg-tool--reaction[data-reaction="wow"].is-picked {
  border-color: rgba(239, 108, 0, 0.7);
  color: #e65100;
  background: linear-gradient(180deg, rgba(255, 224, 178, 0.98), rgba(255, 183, 77, 0.96));
  box-shadow:
    0 0 0 1px rgba(255, 152, 0, 0.35),
    0 2px 6px rgba(239, 108, 0, 0.22);
}
.chat-msg-tool--reaction[data-reaction="wow"].is-picked i {
  color: #e65100;
}

.chat-message--reacted .bubble,
.chat-message--reacted .chat-live-notice__card {
  animation: chat-reaction-pulse 0.55s ease;
}

@keyframes chat-reaction-pulse {
  0% { box-shadow: 0 0 0 0 rgba(129, 119, 240, 0.45); }
  100% { box-shadow: 0 0 0 10px rgba(129, 119, 240, 0); }
}

.chat-live-notice__actions {
  margin-top: 4px;
  width: fit-content;
  max-width: 100%;
}

.chat-media-record-modal {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
}

@media (min-height: 640px) {
  .chat-media-record-modal {
    align-items: center;
    padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
  }
}

.chat-media-record-modal.hidden {
  display: none !important;
}

.chat-media-record-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.chat-media-record-modal__panel {
  position: relative;
  width: min(400px, 100%);
  max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
  background: #1e1435;
  color: #fff;
  border-radius: 16px;
  padding: 10px 12px 8px;
  padding-top: 38px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-media-record-prepare {
  position: absolute;
  inset: 38px 12px 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px;
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(30, 20, 53, 0.98), rgba(42, 28, 72, 0.96));
  border: 1px solid rgba(166, 147, 239, 0.35);
  text-align: center;
}

.chat-media-record-prepare.hidden {
  display: none !important;
}

.chat-media-record-modal__body.is-preparing {
  visibility: hidden;
  pointer-events: none;
}

.chat-media-record-prepare__spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(166, 147, 239, 0.25);
  border-top-color: #c4b5fd;
  animation: chat-media-record-prepare-spin 0.85s linear infinite;
}

@keyframes chat-media-record-prepare-spin {
  to { transform: rotate(360deg); }
}

.chat-media-record-prepare__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.chat-media-record-prepare__status {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  max-width: 28ch;
}

.chat-media-record-prepare__bar {
  width: min(100%, 260px);
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.chat-media-record-prepare__bar-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a693ef, #c4b5fd);
  transition: width 0.35s ease;
}

.chat-media-record-prepare__note {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.chat-media-record-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.chat-media-record-modal__close {
  position: absolute;
  top: max(8px, env(safe-area-inset-top, 0px));
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.12s ease;
}

.chat-media-record-modal__close:hover,
.chat-media-record-modal__close:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  outline: none;
}

.chat-media-record-modal__close:active {
  transform: scale(0.94);
}

.chat-media-record-modal__panel h2 {
  margin: 0 0 4px;
  font-size: 0.98rem;
  padding-right: 36px;
}

.chat-media-record-modal__hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
  opacity: 0.72;
  line-height: 1.3;
}

.chat-media-record-modal__preview-wrap {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  max-height: min(34vh, 240px);
  border-radius: 12px;
  overflow: hidden;
  background: #0a0614;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-media-record-modal__preview-wrap.is-audio {
  aspect-ratio: auto;
  max-height: 108px;
  min-height: 96px;
}

.chat-media-record-modal__preview-wrap.is-audio .chat-media-record-modal__audio-ui {
  gap: 6px;
  font-size: 1.8rem;
}

.chat-media-record-modal__preview-wrap.is-audio .chat-media-record-modal__pulse {
  width: 44px;
  height: 44px;
}

.chat-media-record-modal__preview-wrap.is-loading .chat-media-record-modal__loading {
  display: block;
}

.chat-media-record-modal__preview-wrap.is-live .chat-media-record-modal__loading {
  display: none;
}

.chat-media-record-modal__loading {
  display: none;
  margin: 0;
  font-size: 0.88rem;
  opacity: 0.75;
  text-align: center;
  padding: 12px;
}

.chat-media-record-modal__preview {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
  background: #000;
}

.chat-media-record-modal__preview.is-mirror {
  transform: scaleX(-1);
}

.chat-media-record-modal__audio-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 2.4rem;
  color: var(--purple, #8177f0);
}

.chat-media-record-modal__pulse {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(129, 119, 240, 0.25);
}

.chat-media-record-modal__pulse.is-recording {
  animation: chat-media-pulse 1.2s ease-in-out infinite;
}

@keyframes chat-media-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.55; }
  50% { transform: scale(1.08); opacity: 1; }
}

.chat-media-record-modal__timer {
  margin: 6px 0 0;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.chat-media-record-modal__timer.is-countdown-low,
.video-btn.is-countdown-low .video-btn-label {
  color: #e74c3c;
  -webkit-text-fill-color: #e74c3c;
}

.chat-media-record-modal__timer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.chat-media-record-modal__timer-row .chat-media-record-modal__timer {
  margin: 0;
}

.chat-media-record-modal__stop {
  padding: 5px 14px;
  border: none;
  border-radius: 999px;
  background: #e74c3c;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: none;
}

.chat-media-record-modal__stop.is-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-media-record-modal__stop:hover,
.chat-media-record-modal__stop:focus-visible {
  background: #c0392b;
  outline: none;
}

.chat-media-record-intent {
  margin-top: 10px;
}

.chat-media-record-intent.hidden {
  display: none !important;
}

#chat-media-record-modal .chat-media-record-intent__card {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

#chat-media-record-modal .chat-file-intent-btn.is-disabled,
#chat-media-record-modal .chat-file-intent-btn:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

#chat-media-record-modal .chat-media-record-intent {
  flex-shrink: 0;
  padding-bottom: 2px;
}

#chat-media-record-modal .chat-file-intent-modal__choices {
  gap: 10px;
}

#chat-media-record-modal .chat-file-share-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px 10px;
  border-radius: 18px;
  background: linear-gradient(165deg, #ffffff 0%, #f7f4ff 48%, #fff9ec 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 16px 36px rgba(24, 18, 48, 0.24);
}

#chat-media-record-modal .chat-file-share-panel.hidden {
  display: none !important;
}

#chat-media-record-modal .chat-media-record-modal__body.hidden {
  display: none !important;
}

.chat-media-record-modal__transcript {
  display: none !important;
}

.chat-media-record-modal__transcript--roll {
  min-height: 2.8em;
}

.chat-media-record-lang-toggle {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 6px;
}

.chat-media-record-lang-btn {
  min-width: 56px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(129, 119, 240, 0.45);
  background: rgba(255, 255, 255, 0.9);
  color: #4a4578;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.chat-media-record-lang-btn.is-active {
  background: #8177f0;
  border-color: #8177f0;
  color: #fff;
}

.chat-media-record-live-banner {
  display: block;
  margin: 10px 0 0;
  padding: 14px 14px;
  border-radius: 12px;
  background: rgba(20, 16, 48, 0.88);
  border: 2px solid rgba(180, 172, 255, 0.9);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1.45;
  text-align: center;
  min-height: 3.2em;
  max-height: 8em;
  overflow-y: auto;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.01em;
}

.chat-media-record-live-banner.is-active {
  display: block !important;
}

.chat-media-record-live-banner.is-active:not(.has-words) {
  min-height: 2.4em;
  padding: 10px 14px;
  border-color: rgba(180, 172, 255, 0.55);
  background: rgba(20, 16, 48, 0.72);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.98rem;
  font-weight: 600;
}

.chat-media-record-live-banner:not(.has-words):not(.is-active) {
  min-height: 0.4em;
  padding: 4px 0;
  border-color: transparent;
  background: transparent;
}

.chat-media-record-preview-live {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 11;
  pointer-events: none;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-height: 4.2em;
  overflow-y: auto;
  font-weight: 600;
}

.chat-media-record-preview-live.hidden {
  display: none !important;
}

.chat-media-record-modal__transcript.is-live {
  display: block !important;
  text-align: center;
}

.chat-media-record-modal__transcript.is-live .live-caption-roll,
.chat-media-record-modal__transcript.is-capturing .live-caption-roll,
.chat-media-record-modal__transcript.is-live .live-caption-roll.is-empty,
.chat-media-record-modal__transcript.is-capturing .live-caption-roll.is-empty {
  display: block !important;
}

.chat-media-record-preview-captions.is-live,
.chat-media-record-preview-captions:not(.hidden) {
  display: block !important;
}

.chat-media-record-preview-captions.is-live .live-caption-roll,
.chat-media-record-preview-captions.is-live .live-caption-roll.is-empty {
  display: block !important;
}

.chat-media-record-preview-captions {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 10px;
  z-index: 12;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.chat-media-record-preview-captions.hidden {
  display: none !important;
}

.chat-media-record-preview-captions .live-caption-roll__line {
  color: #fff;
  font-size: 0.82rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* Live call captions — two rolling lines */
.live-caption-roll {
  width: 100%;
  min-width: 0;
}

.live-caption-roll.is-empty {
  display: none;
}

.live-caption-roll__viewport {
  overflow: hidden;
  height: calc(2 * 1.38em);
  min-height: 2.76em;
}

.live-caption-roll__track {
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform 0.34s ease;
  will-change: transform;
}

.live-caption-roll__track.is-rolling {
  transform: translateY(-1.38em);
}

.live-caption-roll__line {
  min-height: 1.38em;
  max-height: 1.38em;
  line-height: 1.38;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dark, #2a2e36);
}

.chat-live-caption-slot {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 4px;
  padding: 4px 2px 0;
}

.chat-live-notice--captioned .space-object-card__summary {
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "icon text expand"
    "caption caption caption"
    "preview preview preview";
}

.chat-live-notice--captioned .space-object-card--audio .space-object-card__summary {
  display: flex !important;
  flex-direction: column !important;
  grid-template: none !important;
  grid-template-areas: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.chat-live-notice--captioned .chat-live-caption-slot {
  grid-area: caption;
}

.chat-live-notice--captions-live .chat-live-caption-slot {
  min-height: 2.76em;
}

.chat-live-notice .live-caption-roll__line {
  color: var(--dark, #2a2e36);
}

#chat-panel-inner.has-chat-feed .chat-live-notice .live-caption-roll__line {
  color: #1a1a24;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
}

.video-live-captions {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 52px;
  z-index: 12;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.video-live-captions.hidden {
  display: none !important;
}

.video-live-captions .live-caption-roll__line {
  color: #fff;
  font-size: 0.82rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.chat-media-record-modal__transcript .live-caption-roll__line {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.82rem;
}

body.chat-media-record-open {
  overflow: hidden;
}

/* ======================= */
/* SPACE OBJECT CARD       */
/* summary | expanded      */
/* ======================= */

:root {
  --space-object-width: min(100%, 300px);
  --space-object-summary-h: 88px;
  --space-object-preview-h: 120px;
  --space-object-owner-tile-h: 52px;
  --chat-post-preview-h: 120px;
}

.chat-message .bubble.bubble--object {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: var(--space-object-width);
  width: var(--space-object-width);
}

.chat-message.received .bubble.bubble--object {
  max-width: min(78%, var(--space-object-width));
}

/* Owner lane — fixed tiles (summary only) */
.chat-message.sent .bubble.bubble--owner,
.chat-message.sent .bubble.bubble--outbox {
  width: auto;
  max-width: var(--space-object-width);
}

.chat-message.sent .bubble.bubble--owner:not(.bubble--outbox) {
  width: var(--space-object-width);
  max-width: var(--space-object-width);
}

/* Inbox cards grow with content — no fixed 52px owner tile */
.chat-message .space-object-card--inbox.space-object-card--summary .space-object-card__summary,
.chat-message .space-object-card--outbox-sent.space-object-card--summary .space-object-card__summary,
.chat-message .space-object-card--text.space-object-card--summary .space-object-card__summary {
  height: auto;
  min-height: var(--space-object-owner-tile-h);
  max-height: none;
  overflow: visible;
  align-content: start;
  padding: 8px 10px;
}

.chat-message .space-object-card--inbox.space-object-card--audio .space-object-card__summary,
.chat-message .space-object-card--outbox-sent.space-object-card--audio .space-object-card__summary {
  overflow: visible !important;
  max-height: none !important;
}

.chat-message .space-object-card--inbox.space-object-card--audio .space-object-card__audio-player-slot,
.chat-message .space-object-card--outbox-sent.space-object-card--audio .space-object-card__audio-player-slot {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

.chat-message .space-object-card--inbox .space-object-card__inline-audio,
.chat-message .space-object-card--outbox-sent .space-object-card__inline-audio {
  width: 100%;
  min-width: 0;
}

.chat-message .space-object-card--inbox .space-object-card__inline-audio .chat-media-player-wrap--audio,
.chat-message .space-object-card--inbox .space-object-card__inline-audio .chat-media-player--audio,
.chat-message .space-object-card--outbox-sent .space-object-card__inline-audio .chat-media-player-wrap--audio,
.chat-message .space-object-card--outbox-sent .space-object-card__inline-audio .chat-media-player--audio {
  width: 100%;
  max-width: 100%;
}

.chat-message .space-object-card--inbox.space-object-card--video .space-object-card__summary:has(.space-object-card__preview) .space-object-card__icon,
.chat-message .space-object-card--outbox-sent.space-object-card--video .space-object-card__summary:has(.space-object-card__preview) .space-object-card__icon {
  display: none;
}

.chat-message.received .space-object-card--video .space-object-card__summary:has(.space-object-card__video-preview--compact) .space-object-card__icon {
  display: flex;
  grid-area: icon;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: rgba(129, 119, 240, 0.14);
  color: var(--theme-purple, #8177f0);
  font-size: 1.05rem;
}

.chat-message.received .space-object-card--video .space-object-card__summary:has(.space-object-card__video-preview--compact) .space-object-card__text {
  grid-area: text;
  min-width: 0;
}

.chat-message.received .space-object-card--video .space-object-card__summary:has(.space-object-card__video-preview--compact) .space-object-card__title {
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-message.received .space-object-card--video .space-object-card__summary:has(.space-object-card__video-preview--compact) .space-object-card__meta {
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-message.received .space-object-card--video .space-object-card__summary:has(.space-object-card__video-preview--compact) .space-object-card__expand-label {
  grid-area: expand;
  align-self: center;
}

.chat-message .space-object-card--inbox.space-object-card--video .space-object-card__summary:has(.space-object-card__preview),
.chat-message .space-object-card--outbox-sent.space-object-card--video .space-object-card__summary:has(.space-object-card__preview) {
  grid-template-areas:
    "text text expand"
    "preview preview preview";
}

.chat-message.received .space-object-card--video .space-object-card__summary:has(.space-object-card__video-preview--compact) {
  grid-template-columns: 40px 80px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  grid-template-areas: "icon preview text expand";
  min-height: 64px;
  height: auto;
  max-height: none;
  gap: 8px;
  padding: 8px 10px;
}

.chat-message.received .space-object-card--video .space-object-card__video-preview--compact {
  grid-area: preview;
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
  border-radius: 10px;
  cursor: pointer;
}

.chat-message.received .space-object-card--video .space-object-card__video-preview--compact .space-object-card__video-thumb {
  pointer-events: none;
}

.chat-message.received .space-object-card--video .space-object-card__video-preview--compact .space-object-card__play {
  width: 28px;
  height: 28px;
  font-size: 0.72rem;
}

.chat-message.received .space-object-card--video .space-object-card__video-preview--compact .space-object-card__duration {
  font-size: 0.62rem;
  padding: 1px 5px;
}

.chat-message.received .space-object-card--video .space-object-card__video-preview--compact .space-object-card__media-badge {
  font-size: 0.52rem;
  padding: 2px 5px;
}

.chat-message.received .space-object-card--video .space-object-card__preview--tap:focus-visible {
  outline: 2px solid rgba(129, 119, 240, 0.85);
  outline-offset: 2px;
}

.chat-message.sent .bubble.bubble--outbox:has(.space-object-card--outbox-sent) {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: var(--space-object-width);
}

.space-object-card--outbox-sent .space-object-card__summary {
  background: var(--space-chat-card-glass-bg, rgba(255, 255, 255, 0.14)) !important;
  backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
  color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94));
  -webkit-text-fill-color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94));
  border-color: var(--space-chat-card-glass-border, rgba(255, 255, 255, 0.28));
}

.space-object-card--outbox-sent .space-object-card__title,
.space-object-card--outbox-sent .space-object-card__meta,
.space-object-card--outbox-sent .space-object-card__caption-text,
.space-object-card--outbox-sent .space-object-card__text-full,
.space-object-card--outbox-sent .space-object-card__transcript-full {
  color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94));
  -webkit-text-fill-color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94));
}

.space-object-card--outbox-sent .space-object-card__meta {
  color: var(--space-chat-card-glass-text-muted, rgba(255, 255, 255, 0.76));
  -webkit-text-fill-color: var(--space-chat-card-glass-text-muted, rgba(255, 255, 255, 0.76));
}

.space-object-card--outbox-sent .space-object-card__icon {
  color: var(--purple, #a693ef);
  -webkit-text-fill-color: var(--purple, #a693ef);
  background: rgba(166, 147, 239, 0.12);
}

.chat-message.sent .space-object-card--summary:has(.space-object-card__preview) .space-object-card__summary {
  height: auto;
  min-height: var(--space-object-owner-tile-h);
  max-height: none;
  overflow: visible;
  padding: 6px 8px 8px;
  gap: 6px 8px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon text expand"
    "preview preview preview";
}

/* Audio: icon + player on top — never the 52px text-only tile grid */
.chat-message.sent .space-object-card--audio.space-object-card--summary .space-object-card__summary {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  grid-template: none !important;
  grid-template-areas: none !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  align-content: stretch !important;
  padding: 8px 10px !important;
  gap: 8px !important;
}

.chat-message.sent .space-object-card--audio .space-object-card__icon,
.chat-message.sent .space-object-card--audio .space-object-card__text,
.chat-message.sent .space-object-card--audio .space-object-card__expand-label {
  grid-area: unset !important;
}

.chat-message.sent .space-object-card__preview {
  display: block !important;
  width: 100%;
  min-height: var(--space-object-preview-h);
}

.chat-message.sent .space-object-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 0.9rem;
}

.chat-message.sent .space-object-card__icon--inline-media {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: none;
  background: #1a1528;
}

.chat-message.sent .space-object-card__inline-player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 9px;
  pointer-events: none;
}

.chat-message.sent .space-object-card__icon--inline-media .space-object-card__inline-playing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding-bottom: 3px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 30%, rgba(166, 147, 239, 0.35) 100%);
}

.chat-message.sent .space-object-card__icon--inline-media.is-playing .space-object-card__inline-playing::before,
.chat-message.sent .space-object-card__icon--inline-media.is-playing .space-object-card__inline-playing::after {
  content: "";
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.92);
  animation: space-owner-wave 0.55s ease-in-out infinite alternate;
}

.chat-message.sent .space-object-card__icon--inline-media.is-playing .space-object-card__inline-playing::after {
  animation-delay: 0.18s;
  height: 14px;
}

@keyframes space-owner-wave {
  from { transform: scaleY(0.45); }
  to { transform: scaleY(1); }
}

.chat-message.sent .space-object-card__title {
  -webkit-line-clamp: 3;
  font-size: 0.8rem;
  line-height: 1.2;
}

.chat-message.sent .space-object-card--text .space-object-card__title,
.chat-message.received .space-object-card--text .space-object-card__title {
  -webkit-line-clamp: 5;
  line-height: 1.3;
}

.chat-message.sent .space-object-card__meta {
  font-size: 0.68rem;
  line-height: 1.15;
}

.chat-message.sent .space-object-card__expand-label {
  font-size: 0.58rem;
  padding: 2px 6px;
  align-self: center;
}

.chat-message-fallback,
.bubble.bubble--inbox-fallback {
  display: block;
  max-width: min(78%, 340px);
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#chat-panel-inner.has-chat-feed .chat-message.sent .bubble.bubble--owner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--dark, #1a1a24) !important;
  -webkit-text-fill-color: var(--dark, #1a1a24) !important;
}

/* Owner outbox expand — light text on sent glass media cards */
.chat-message.sent .bubble.bubble--owner .space-audio-chat-card,
.chat-message.sent .bubble.bubble--owner .space-audio-chat-card__full-transcript {
  color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94)) !important;
}

.chat-message.sent .bubble.bubble--owner .space-audio-chat-card__summary {
  color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
  background: rgba(166, 147, 239, 0.2) !important;
}

.chat-message.sent .bubble.bubble--owner .space-audio-chat-card__summary::before {
  color: var(--space-chat-card-glass-text-muted, rgba(255, 255, 255, 0.76)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text-muted, rgba(255, 255, 255, 0.76)) !important;
  opacity: 1;
}

.chat-message.sent .bubble.bubble--owner .space-audio-chat-card__transcript {
  color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
}

.chat-message.sent .bubble.bubble--owner .space-audio-chat-card__transcript::before {
  color: var(--space-chat-card-glass-text-muted, rgba(255, 255, 255, 0.76)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text-muted, rgba(255, 255, 255, 0.76)) !important;
}

.space-object-card {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.space-object-card__summary {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon text expand"
    "preview preview preview";
  gap: 8px 10px;
  align-items: center;
  width: 100%;
  min-height: var(--space-object-summary-h);
  padding: 10px 12px;
  border: 1px solid rgba(166, 147, 239, 0.48);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--dark, #2a2e36);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(129, 119, 240, 0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.space-object-card__summary:not(:has(.space-object-card__preview)) {
  grid-template-rows: auto;
  grid-template-areas: "icon text expand";
  min-height: 64px;
}

.chat-message.sent .space-object-card__summary {
  background: var(--space-chat-card-glass-bg, rgba(255, 255, 255, 0.14)) !important;
  backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
}

.space-object-card__summary:hover,
.space-object-card__summary:focus-visible {
  border-color: rgba(166, 147, 239, 0.85);
  box-shadow: 0 4px 18px rgba(129, 119, 240, 0.14);
  outline: none;
}

.space-object-card__icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(166, 147, 239, 0.35);
  background: rgba(166, 147, 239, 0.1);
  color: var(--purple, #a693ef);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.space-object-card__text {
  grid-area: text;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.space-object-card__title {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.space-object-card__meta {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--gray, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.space-object-card__expand-label {
  grid-area: expand;
  align-self: start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--purple, #a693ef);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(166, 147, 239, 0.45);
  background: rgba(166, 147, 239, 0.08);
  white-space: nowrap;
}

.space-object-card__preview {
  grid-area: preview;
  width: 100%;
}

.space-object-card__video-preview {
  position: relative;
  width: 100%;
  height: var(--space-object-preview-h);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(166, 147, 239, 0.3);
  background: #1a1528;
}

.space-object-card__image-preview {
  position: relative;
  width: 100%;
  height: var(--space-object-preview-h);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(166, 147, 239, 0.28);
  background: var(--space-media-letterbox, #2a2e36);
}

.space-object-card__image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.space-object-card__file-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: var(--space-object-preview-h);
  border-radius: 10px;
  border: 1px solid rgba(166, 147, 239, 0.22);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(243, 239, 255, 0.94));
}

.space-object-card__file-preview > i {
  font-size: 1.65rem;
  color: var(--purple, #a693ef);
}

.space-object-card__file-ext {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #4b5563;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(166, 147, 239, 0.28);
  background: rgba(255, 255, 255, 0.9);
}

.space-object-card__expanded-media {
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(166, 147, 239, 0.25);
  background: var(--space-media-letterbox, #2a2e36);
}

.space-object-card__expanded-image {
  display: block;
  width: 100%;
  max-height: min(52vh, 360px);
  object-fit: contain;
}

.chat-file-preview {
  width: 100%;
  margin-bottom: 6px;
  border-radius: 10px;
  overflow: hidden;
}

.chat-file-preview.space-object-card__image-preview,
.chat-file-preview.space-object-card__video-preview,
.chat-file-preview.space-object-card__audio-preview,
.chat-file-preview.space-object-card__file-preview {
  height: var(--chat-post-preview-h);
}

.chat-file-preview .space-object-card__image-thumb,
.chat-file-preview .space-object-card__video-thumb {
  height: var(--chat-post-preview-h);
}

.chat-message.received .bubble.bubble--inbox:has(.space-object-card__preview) {
  max-width: min(82%, 320px);
}

.space-object-card__video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.space-object-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--purple, #a693ef);
  border: 1px solid rgba(166, 147, 239, 0.45);
  font-size: 0.85rem;
  pointer-events: none;
}

.space-object-card__duration {
  position: absolute;
  right: 6px;
  bottom: 5px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}

.space-object-card__audio-preview {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--space-object-preview-h);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(166, 147, 239, 0.28);
  background: rgba(166, 147, 239, 0.06);
}

.space-object-card__audio-waves {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  flex: 1;
}

.space-object-card__media-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(61, 40, 96, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.space-object-card__media-badge--video {
  background: rgba(76, 63, 150, 0.82);
}

.space-object-card__media-badge--audio {
  background: rgba(106, 74, 168, 0.82);
}

.space-object-card__duration--audio {
  position: absolute;
  right: 6px;
  bottom: 5px;
}

.space-object-card__transcript-full {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(166, 147, 239, 0.25);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--dark, #2a2e36);
}

.space-object-card__inline-transcript {
  margin: -4px 0 0;
  padding: 8px 12px 10px;
  border: 1px solid rgba(166, 147, 239, 0.35);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--dark, #2a2e36);
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.space-object-card--expanded .space-object-card__inline-transcript {
  display: none;
}

.space-object-card--audio .space-object-card__title {
  display: block;
  -webkit-line-clamp: 3;
}

.space-object-card--audio .space-object-card__meta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dark, #2a2e36);
  white-space: normal;
}

.space-object-card--audio .space-object-card__title,
.space-object-card--video .space-object-card__title {
  -webkit-line-clamp: 3;
}

/* Audio message card — icon + player on top row, transcript below */
.space-object-card--audio .space-object-card__summary {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: auto;
}

.space-object-card__audio-top {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.space-object-card__audio-player-slot {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.space-object-card--audio .space-object-card__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  font-size: 0.95rem;
  grid-area: unset;
}

.space-object-card--audio .space-object-card__meta {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: normal;
}

.space-object-card__audio-meta-row {
  width: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gray, #6b7280);
  white-space: normal;
}

.space-object-card__audio-title-row {
  width: 100%;
  min-width: 0;
}

.space-object-card__audio-title-row .space-object-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.space-object-card--audio .space-object-card__expand-label {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  grid-area: unset;
}

.space-object-card__inline-audio {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  pointer-events: auto;
}

.space-object-card__inline-audio .chat-media-player-wrap--audio {
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

.space-object-card__inline-audio .chat-media-player--audio {
  min-width: 0;
  width: 100%;
  height: 32px;
}

.space-object-card__inline-audio .chat-media-player-play {
  font-size: 1.35rem;
}

.space-object-card--audio .space-object-card__audio-top .space-object-card__expand-label {
  align-self: center;
  margin-top: 0;
}

.space-object-card--audio .space-object-card__caption-row .space-object-card__expand-label {
  align-self: flex-end;
  margin-top: 2px;
  margin-left: 0;
}

@media (max-width: 480px) {
  .space-object-card--audio .space-object-card__summary {
    padding: 8px 10px;
    gap: 6px;
  }

  .space-object-card__audio-top {
    gap: 8px;
  }

  .space-object-card--audio .space-object-card__icon {
    width: 32px;
    height: 32px;
  }

  .space-object-card--audio .space-object-card__meta {
    font-size: 0.72rem;
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .space-object-card__inline-audio .chat-media-player--audio {
    height: 34px;
  }
}

.space-object-card--audio .space-object-card__caption-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid rgba(166, 147, 239, 0.2);
}

.space-object-card--audio .space-object-card__caption-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--dark, #2a2e36);
  font-weight: 500;
}

.space-object-card__wave {
  display: block;
  width: 5px;
  height: var(--wave-h, 40%);
  min-height: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, #c4b5fd, var(--purple, #a693ef));
}

.space-object-card--expanded .space-object-card__summary {
  display: none;
}

.space-object-card__expanded {
  width: 100%;
  border: 1px solid rgba(166, 147, 239, 0.55);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 28px rgba(129, 119, 240, 0.12);
  overflow: hidden;
}

.space-object-card__expanded-body {
  padding: 12px 12px 8px;
  max-width: 100%;
}

.space-object-card__expanded-foot {
  padding: 0 12px 10px;
  display: flex;
  justify-content: flex-end;
}

.space-object-card__collapse {
  border: 1px solid rgba(166, 147, 239, 0.45);
  background: rgba(166, 147, 239, 0.08);
  color: var(--purple, #a693ef);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.space-object-card__collapse:hover,
.space-object-card__collapse:focus-visible {
  border-color: rgba(166, 147, 239, 0.8);
  outline: none;
}

.space-object-card__text-full {
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--dark, #1a1a24);
  -webkit-text-fill-color: var(--dark, #1a1a24);
}

.space-object-card__file-expanded {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.space-object-card__file-name {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
  word-break: break-word;
}

.space-object-card__file-size {
  margin: 0;
  font-size: 0.8rem;
  color: var(--gray, #6b7280);
}

.space-object-card__file-open,
.space-object-card__live-cta {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--purple, #a693ef);
  background: var(--purple, #a693ef);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.space-object-card__file-open:disabled,
.space-object-card__live-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.space-object-card__live-hint {
  margin: 0 0 10px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--dark, #2a2e36);
}

.space-object-card__waiting {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray, #6b7280);
}

.space-object-card__expanded-body .space-audio-chat-card {
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.space-object-card__expanded-body .chat-media-player-wrap--video {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(166, 147, 239, 0.3);
}

.space-object-card__expanded-body .chat-media-player--audio,
.space-object-card__expanded-body .chat-media-player-wrap--video video {
  width: 100%;
  max-width: 100%;
}

.chat-live-notice__main {
  width: var(--space-object-width);
  max-width: 100%;
}

/* Live notices — same readable contrast as inbox cards */
.chat-live-notice .bubble.bubble--inbox,
.chat-live-notice .bubble.bubble--outbox {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.chat-live-notice .space-object-card--live .space-object-card__summary {
  background: rgba(255, 255, 255, 0.98);
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
  border-color: rgba(166, 147, 239, 0.42);
}

.chat-live-notice .space-object-card--live .space-object-card__title,
.chat-live-notice .space-object-card--live .space-object-card__meta,
.chat-live-notice .space-object-card__live-hint {
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
}

.chat-live-notice .space-object-card--live .space-object-card__meta {
  color: #6b7280;
  -webkit-text-fill-color: #6b7280;
}

.chat-live-notice .space-object-card--live .space-object-card__icon {
  color: var(--purple, #a693ef);
  -webkit-text-fill-color: var(--purple, #a693ef);
  background: rgba(166, 147, 239, 0.12);
}

.chat-live-notice--screen .space-object-card--live .space-object-card__icon {
  color: #0e7490;
  -webkit-text-fill-color: #0e7490;
  background: rgba(76, 201, 240, 0.14);
}

.chat-live-notice .space-object-card__live-cta {
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(166, 147, 239, 0.45);
  background: rgba(166, 147, 239, 0.1);
  color: var(--purple, #7c6ccf);
  -webkit-text-fill-color: var(--purple, #7c6ccf);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.chat-live-notice .space-object-card__live-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.chat-live-notice--ringing .space-object-card--live .space-object-card__summary {
  animation: chat-live-notice-ring 1.35s ease-in-out infinite;
  border-color: rgba(129, 119, 240, 0.72);
  box-shadow: 0 0 0 2px rgba(129, 119, 240, 0.2);
}

.chat-live-notice--calling.sent .space-object-card--live .space-object-card__summary {
  animation: chat-live-notice-ring 1.35s ease-in-out infinite;
  border-color: rgba(79, 172, 254, 0.62);
  box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.18);
}

.chat-live-notice__outgoing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

@keyframes chat-live-notice-ring {
  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(129, 119, 240, 0.18);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(129, 119, 240, 0.34);
  }
}

.chat-live-notice__incoming-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

.chat-live-notice__incoming-actions--expanded {
  margin-top: 10px;
}

.chat-live-notice__incoming-btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.chat-live-notice__incoming-btn--accept {
  background: linear-gradient(165deg, #8177f0, #6b5fd4);
  border-color: rgba(107, 95, 212, 0.55);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.chat-live-notice__incoming-btn--decline {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(220, 80, 80, 0.45);
  color: #b42318;
  -webkit-text-fill-color: #b42318;
}

.chat-live-notice__incoming-btn--skip {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(107, 114, 128, 0.35);
  color: #4b5563;
  -webkit-text-fill-color: #4b5563;
}

.chat-live-notice__incoming-btn:hover,
.chat-live-notice__incoming-btn:focus-visible {
  outline: none;
  filter: brightness(1.04);
}

body.ios-theme:has(.space-share) .chat-live-notice .space-object-card--live .space-object-card__title,
body.ios-theme:has(.space-share) .chat-live-notice .space-object-card--live .space-object-card__meta,
body.ios-theme.space-shell .chat-live-notice .space-object-card--live .space-object-card__title,
body.ios-theme.space-shell .chat-live-notice .space-object-card--live .space-object-card__meta {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

#chat-panel-inner.has-chat-feed .chat-message .bubble.bubble--object {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#chat-panel-inner.has-chat-feed .chat-message.sent .space-object-card__summary {
  background: var(--space-chat-card-glass-bg) !important;
  backdrop-filter: var(--space-chat-card-glass-backdrop) !important;
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop) !important;
}

#chat-panel-inner.has-chat-feed .chat-message.received .space-object-card__summary {
  background: var(--space-chat-card-owner-bg, rgba(255, 255, 255, 0.97)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#chat-panel-inner.has-chat-feed .chat-message.sent .space-object-card__expanded {
  background: var(--space-chat-card-glass-bg) !important;
  backdrop-filter: var(--space-chat-card-glass-backdrop) !important;
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop) !important;
}

#chat-panel-inner.has-chat-feed .chat-message.received .space-object-card__expanded {
  background: var(--space-chat-card-owner-bg, rgba(255, 255, 255, 0.97)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== OUTBOX CHIP — sender (icon-only, composer-style) ===== */
.chat-message.sent .bubble.bubble--outbox {
  display: flex;
  justify-content: flex-end;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.space-outbox-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: auto;
  max-width: min(100%, var(--space-object-width));
}

.space-outbox-chip__trigger {
  flex-shrink: 0;
  border: 1px solid var(--space-chat-card-glass-border, rgba(255, 255, 255, 0.28)) !important;
  background: var(--space-chat-card-glass-bg, rgba(255, 255, 255, 0.14)) !important;
  backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
  color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
}

.space-outbox-chip__trigger:hover,
.space-outbox-chip__trigger:focus-visible {
  background: rgba(166, 147, 239, 0.12) !important;
  border-color: rgba(166, 147, 239, 0.65) !important;
  outline: none;
}

.space-outbox-chip--open .space-outbox-chip__trigger {
  border-color: rgba(166, 147, 239, 0.85) !important;
  box-shadow: 0 2px 10px rgba(129, 119, 240, 0.18);
}

.space-outbox-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.space-outbox-chip__expand {
  width: 100%;
  min-width: min(280px, 78vw);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--space-chat-card-glass-border, rgba(255, 255, 255, 0.28));
  background: var(--space-chat-card-glass-bg, rgba(255, 255, 255, 0.14));
  backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%));
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%));
  color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94));
  -webkit-text-fill-color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94));
  box-sizing: border-box;
  box-shadow: var(--space-chat-card-glass-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 28px rgba(0, 0, 0, 0.16));
}

.space-outbox-chip__summary {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96));
  -webkit-text-fill-color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96));
}

.space-outbox-chip__text-full,
.space-outbox-chip__file-name {
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
}

.space-outbox-chip__file-open {
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(166, 147, 239, 0.45);
  background: rgba(166, 147, 239, 0.1);
  color: var(--purple, #7c6ccf);
  -webkit-text-fill-color: var(--purple, #7c6ccf);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.space-object-card--inbox.space-object-card--file .space-object-card__summary,
.space-object-card--inbox.space-object-card--folder .space-object-card__summary {
  background: rgba(255, 255, 255, 0.98);
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
}

.space-object-card--inbox.space-object-card--file .space-object-card__file-preview,
.space-object-card--inbox .space-object-card__file-preview {
  display: none;
}

.chat-message.sent .bubble.bubble--outbox .space-outbox-chip__expand,
.chat-message.sent .bubble.bubble--owner .space-outbox-chip__expand {
  color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94)) !important;
  background: var(--space-chat-card-glass-bg, rgba(255, 255, 255, 0.14)) !important;
  backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
}

/* ===== INBOX CARD — receiver (one unified bubble) ===== */
.chat-message.received .bubble.bubble--inbox {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ios-theme.space-shell #chat-panel-inner.has-chat-feed .chat-message.received .bubble.bubble--inbox,
body.ios-theme:has(.space-share) #chat-panel-inner.has-chat-feed .chat-message.received .bubble.bubble--inbox {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.space-object-card--inbox .space-object-card__summary {
  background: var(--space-chat-card-owner-bg, rgba(255, 255, 255, 0.97));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
  border-color: rgba(166, 147, 239, 0.42);
}

.space-object-card--inbox .space-object-card__title,
.space-object-card--inbox .space-object-card__caption-text,
.space-object-card--inbox .space-object-card__text-full,
.space-object-card--inbox .space-object-card__transcript-full,
.space-object-card--inbox .space-object-card__file-name {
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
}

.space-object-card--inbox .space-object-card__meta {
  color: #6b7280;
  -webkit-text-fill-color: #6b7280;
}

.space-object-card--inbox .space-object-card__expand-label,
.space-object-card--inbox .space-object-card__collapse {
  color: var(--purple, #7c6ccf);
  -webkit-text-fill-color: var(--purple, #7c6ccf);
}

.space-object-card--inbox .space-object-card__icon {
  color: var(--purple, #a693ef);
  -webkit-text-fill-color: var(--purple, #a693ef);
  background: rgba(166, 147, 239, 0.12);
}

.space-object-card--inbox.space-object-card--audio .space-object-card__summary,
.space-object-card--inbox.space-object-card--video .space-object-card__summary {
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
}

.chat-message.sent .bubble.bubble--outbox .space-audio-chat-card,
.chat-message.sent .bubble.bubble--outbox .space-audio-chat-card__full-transcript,
.chat-message.sent .bubble.bubble--outbox .space-audio-chat-card__summary,
.chat-message.sent .bubble.bubble--outbox .space-audio-chat-card__transcript {
  color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94)) !important;
}

.chat-message.sent .bubble.bubble--outbox .space-audio-chat-card__summary {
  color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
  background: rgba(166, 147, 239, 0.2) !important;
}

.space-object-card--inbox .space-object-card__expanded,
.space-object-card--inbox .space-object-card__expanded-body {
  color: #1a1a24;
  -webkit-text-fill-color: #1a1a24;
  background: var(--space-chat-card-owner-bg, rgba(255, 255, 255, 0.97)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ios-theme:has(.space-share) .space-object-card--inbox .space-object-card__summary,
body.ios-theme.space-shell .space-object-card--inbox .space-object-card__summary,
body.ios-theme:has(.space-share) .space-object-card--inbox .space-object-card__title,
body.ios-theme:has(.space-share) .space-object-card--inbox .space-object-card__meta,
body.ios-theme:has(.space-share) .space-object-card--inbox .space-object-card__caption-text,
body.ios-theme:has(.space-share) .space-object-card--inbox .space-object-card__text-full,
body.ios-theme.space-shell .space-object-card--inbox .space-object-card__title,
body.ios-theme.space-shell .space-object-card--inbox .space-object-card__meta,
body.ios-theme.space-shell .space-object-card--inbox .space-object-card__caption-text,
body.ios-theme.space-shell .space-object-card--inbox .space-object-card__text-full {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

body.ios-theme:has(.space-share) .space-object-card--inbox .space-object-card__meta,
body.ios-theme.space-shell .space-object-card--inbox .space-object-card__meta {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

body.ios-theme:has(.space-share) .space-outbox-chip__expand,
body.ios-theme.space-shell .space-outbox-chip__expand,
body.ios-theme:has(.space-share) .space-outbox-chip__text-full,
body.ios-theme:has(.space-share) .space-outbox-chip__summary,
body.ios-theme.space-shell .space-outbox-chip__text-full,
body.ios-theme.space-shell .space-outbox-chip__summary {
  color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text, rgba(255, 255, 255, 0.94)) !important;
  background: var(--space-chat-card-glass-bg, rgba(255, 255, 255, 0.14)) !important;
  backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
}

body.ios-theme:has(.space-share) .space-outbox-chip__trigger,
body.ios-theme.space-shell .space-outbox-chip__trigger {
  background: var(--space-chat-card-glass-bg, rgba(255, 255, 255, 0.14)) !important;
  backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%)) !important;
  color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
}

/* ===== SPACE CODE BAR — canonical (content-width: digits + 1 char each side) ===== */
html body #space-tabs,
#space-tabs {
  --space-code-bar-h: 30px;
}

html body #space-tabs .space-tabs-code-wrap,
html body.ios-theme #space-tabs .space-tabs-code-wrap,
html body.ios-theme.space-shell #space-tabs .space-tabs-code-wrap,
html body.ios-theme:has(.space-share) #space-tabs .space-tabs-code-wrap,
#space-tabs .space-tabs-code-wrap {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
}

html body #space-tabs #space-code.space-code-display,
html body #space-tabs textarea#space-code.space-code-display,
html body #space-tabs input#space-code.space-code-display,
html body.ios-theme #space-tabs textarea#space-code.space-code-display,
html body.ios-theme #space-tabs input#space-code.space-code-display,
html body.ios-theme.space-shell #space-tabs textarea#space-code.space-code-display,
html body.ios-theme.space-shell #space-tabs input#space-code.space-code-display,
html body.ios-theme:has(.space-share) #space-tabs textarea#space-code.space-code-display,
html body.ios-theme:has(.space-share) #space-tabs input#space-code.space-code-display,
#space-tabs #space-code.space-code-display,
#space-tabs textarea#space-code.space-code-display,
#space-tabs input#space-code.space-code-display {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--space-code-bar-h) !important;
  min-height: var(--space-code-bar-h) !important;
  max-height: var(--space-code-bar-h) !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 8px 0 0 8px !important;
  border-right: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: var(--space-code-bar-h) !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  resize: none !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#space-tabs .space-code-copy-btn,
#space-tabs .space-code-rename-btn,
#space-tabs .space-code-share-btn,
#space-tabs .space-code-picker-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 26px !important;
  min-width: 26px !important;
  min-height: var(--space-code-bar-h) !important;
  height: var(--space-code-bar-h) !important;
}

#space-tabs #btn-space-code-share {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#space-tabs .space-code-share-btn {
  border: 1px solid rgba(27, 94, 32, 0.22) !important;
  border-left: none !important;
  background: linear-gradient(180deg, #f1f8f2 0%, #e0f0e3 100%) !important;
  color: #2e7d32 !important;
  -webkit-text-fill-color: #2e7d32 !important;
}

#space-tabs .space-code-share-btn.hidden {
  display: inline-flex !important;
}

#space-tabs .space-code-copy-btn:hover,
#space-tabs .space-code-copy-btn:focus-visible {
  background: linear-gradient(180deg, #dce9f8 0%, #b8d4f0 100%) !important;
  border-color: rgba(13, 71, 161, 0.5) !important;
  color: #0d47a1 !important;
  -webkit-text-fill-color: #0d47a1 !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(21, 101, 192, 0.16),
    0 4px 10px rgba(21, 101, 192, 0.2) !important;
}

#space-tabs .space-code-rename-btn:hover,
#space-tabs .space-code-rename-btn:focus-visible {
  background: linear-gradient(180deg, #ffe8cc 0%, #ffd4a3 100%) !important;
  border-color: rgba(230, 81, 0, 0.5) !important;
  color: #e65100 !important;
  -webkit-text-fill-color: #e65100 !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(239, 108, 0, 0.14),
    0 4px 10px rgba(239, 108, 0, 0.2) !important;
}

#space-tabs .space-code-share-btn:hover,
#space-tabs .space-code-share-btn:focus-visible {
  background: linear-gradient(180deg, #d4ead8 0%, #b8dcc0 100%) !important;
  border-color: rgba(27, 94, 32, 0.5) !important;
  color: #1b5e20 !important;
  -webkit-text-fill-color: #1b5e20 !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(27, 94, 32, 0.14),
    0 4px 10px rgba(27, 94, 32, 0.18) !important;
}

#space-tabs .space-code-picker-btn:hover,
#space-tabs .space-code-picker-btn:focus-visible,
#space-tabs .space-code-picker-btn[aria-expanded="true"] {
  background: linear-gradient(180deg, #ebe2fa 0%, #d4c4f2 100%) !important;
  border-color: rgba(106, 27, 154, 0.48) !important;
  color: #6a1b9a !important;
  -webkit-text-fill-color: #6a1b9a !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(123, 31, 162, 0.14),
    0 4px 10px rgba(123, 31, 162, 0.2) !important;
}

#space-tabs .space-tabs-bar--dock5 {
  --space-dock-h: var(--space-code-bar-h) !important;
}

#space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn,
#space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more > summary.space-tabs-dock-btn {
  flex: 0 0 auto !important;
  min-width: auto !important;
  max-width: none !important;
  min-height: var(--space-code-bar-h) !important;
  max-height: var(--space-code-bar-h) !important;
}

#space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn__label {
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}

#space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more > summary.space-tabs-dock-btn {
  padding: 0 6px !important;
  justify-content: center !important;
}

#space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more > summary.space-tabs-dock-btn--more .space-tabs-dock-btn__label {
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}

#space-tabs .space-tabs-bar {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 900px) {
  #space-tabs {
    --space-code-bar-h: 28px;
  }

  #space-tabs .space-tabs-bar--dock5 {
    --space-dock-font: 0.6rem;
    --space-dock-icon: 0.64rem;
    gap: 3px !important;
  }

  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn,
  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more > summary.space-tabs-dock-btn {
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important;
    min-height: var(--space-code-bar-h) !important;
    max-height: var(--space-code-bar-h) !important;
    padding: 0 4px !important;
    font-size: var(--space-dock-font) !important;
    border-radius: 8px !important;
  }

  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn__label {
    display: inline !important;
    font-size: var(--space-dock-font) !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    flex-shrink: 0 !important;
  }

  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn i {
    width: calc(var(--space-code-bar-h) - 12px) !important;
    height: calc(var(--space-code-bar-h) - 12px) !important;
    font-size: var(--space-dock-icon) !important;
  }

  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more {
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important;
  }

  #space-tabs #space-code.space-code-display,
  #space-tabs input#space-code.space-code-display {
    font-size: 0.82rem !important;
    padding: 0 6px !important;
  }

  #space-tabs .space-code-copy-btn,
  #space-tabs .space-code-rename-btn,
  #space-tabs .space-code-share-btn,
  #space-tabs .space-code-picker-btn {
    width: 24px !important;
    min-width: 24px !important;
  }
}

@media (max-width: 420px) {
  #space-tabs .space-tabs-bar--dock5 {
    --space-dock-font: 0.58rem;
    --space-dock-icon: 0.66rem;
  }

  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn,
  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more > summary.space-tabs-dock-btn {
    padding: 0 3px !important;
    gap: 3px !important;
  }
}

/* Outbox expand + inbox expanded — media player width */
.chat-message:has(.space-outbox-chip--open),
.chat-message:has(.space-object-card--expanded) {
  max-width: min(92%, 380px) !important;
  width: auto !important;
}

.chat-message:has(.space-outbox-chip--open) .chat-message-main,
.chat-message:has(.space-object-card--expanded) .chat-message-main {
  width: fit-content !important;
  max-width: min(92%, 380px) !important;
}

#chat-panel-inner.has-chat-feed .chat-message.sent:has(.space-outbox-chip--open) .chat-message-main {
  align-items: flex-end !important;
}

#chat-panel-inner.has-chat-feed .chat-message.received:has(.space-object-card--expanded) .chat-message-main {
  align-items: flex-start !important;
}

.chat-message:has(.space-outbox-chip--open) .chat-message-bubble-wrap,
.chat-message:has(.space-object-card--expanded) .chat-message-bubble-wrap {
  width: 100% !important;
  max-width: min(92%, 380px) !important;
  min-width: 0 !important;
}

.chat-message .bubble:has(.space-audio-chat-card) {
  overflow: hidden;
}

.chat-message.sent .bubble.bubble--outbox:has(.space-audio-chat-card) {
  display: block !important;
  width: min(92vw, 380px) !important;
  max-width: min(92%, 380px) !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.chat-message:has(.space-audio-chat-card) .chat-message-actions {
  position: relative;
  z-index: 6;
  margin-top: 6px;
  max-width: min(92%, 380px);
  clear: both;
}

.chat-message:has(.space-audio-chat-card) .chat-msg-reactions {
  flex-shrink: 0;
}

/* ===== SPACE AUDIO CHAT CARD — [icon][player][download] in one row, text below ===== */

/* Frosted liquid glass — sent (you); received (others) stays solid white */
:root {
  --space-chat-card-owner-bg: rgba(255, 255, 255, 0.97);
  --space-chat-card-owner-border: rgba(166, 147, 239, 0.48);
  --space-chat-card-owner-shadow: 0 2px 12px rgba(129, 119, 240, 0.08);
  --space-chat-card-glass-bg: rgba(255, 255, 255, 0.14);
  --space-chat-card-glass-border: rgba(255, 255, 255, 0.28);
  --space-chat-card-glass-backdrop: blur(18px) saturate(165%);
  --space-chat-card-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 28px rgba(0, 0, 0, 0.16);
  --space-chat-card-glass-text: rgba(255, 255, 255, 0.94);
  --space-chat-card-glass-text-muted: rgba(255, 255, 255, 0.76);
  --space-chat-card-glass-accent: rgba(214, 204, 255, 0.96);
}

body.ios-theme.space-shell,
body.ios-theme:has(.space-share) {
  --space-chat-card-glass-bg: rgba(255, 255, 255, 0.1);
  --space-chat-card-glass-border: rgba(255, 255, 255, 0.24);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --space-chat-card-glass-bg: rgba(40, 42, 58, 0.88);
    --space-chat-card-glass-backdrop: blur(0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --space-chat-card-glass-backdrop: blur(0px);
    --space-chat-card-glass-bg: rgba(40, 42, 58, 0.82);
  }
}

/* Outgoing (you) — liquid glass */
.chat-message.sent .space-audio-chat-card,
.chat-message.sent .space-object-card__summary,
.chat-message.sent .space-object-card--outbox-sent .space-object-card__summary,
.chat-message.sent .space-outbox-chip__expand,
.chat-message.sent .space-outbox-chip__trigger,
.chat-message.sent .chat-message-fallback,
.chat-message.sent .bubble.bubble--inbox-fallback {
  background: var(--space-chat-card-glass-bg) !important;
  backdrop-filter: var(--space-chat-card-glass-backdrop) !important;
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop) !important;
  border-color: var(--space-chat-card-glass-border) !important;
  box-shadow: var(--space-chat-card-glass-shadow) !important;
  isolation: isolate;
}

/* Incoming (others) — solid white */
.chat-message.received .space-audio-chat-card,
.chat-message.received .space-object-card--inbox .space-object-card__summary,
.chat-message.received .chat-message-fallback,
.chat-message.received .bubble.bubble--inbox-fallback,
.chat-message.received .space-object-card--inbox .space-object-card__expanded,
.chat-message.received .space-object-card--inbox .space-object-card__expanded-body,
#chat-panel-inner.has-chat-feed .chat-message.received .space-object-card__summary,
#chat-panel-inner.has-chat-feed .chat-message.received .space-object-card__expanded {
  background: var(--space-chat-card-owner-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--space-chat-card-owner-border) !important;
  box-shadow: var(--space-chat-card-owner-shadow) !important;
}

/* Light readable copy on sent glass */
.chat-message.sent .space-audio-chat-card,
.chat-message.sent .space-audio-chat-card__caption,
.chat-message.sent .space-audio-chat-card__text-status,
.chat-message.sent .space-object-card--outbox-sent .space-object-card__title,
.chat-message.sent .space-object-card--outbox-sent .space-object-card__caption-text,
.chat-message.sent .space-object-card--outbox-sent .space-object-card__text-full,
.chat-message.sent .space-object-card--outbox-sent .space-object-card__transcript-full,
.chat-message.sent .space-object-card--outbox-sent .space-object-card__file-name,
.chat-message.sent .chat-message-fallback,
.chat-message.sent .bubble.bubble--inbox-fallback {
  color: var(--space-chat-card-glass-text) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text) !important;
}

.chat-message.sent .space-audio-chat-card__summary,
.chat-message.sent .space-audio-chat-card__transcript {
  color: var(--space-chat-card-glass-accent) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-accent) !important;
  background: rgba(166, 147, 239, 0.2) !important;
}

.chat-message.sent .space-audio-chat-card__summary::before,
.chat-message.sent .space-audio-chat-card__transcript::before {
  color: var(--space-chat-card-glass-text-muted) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text-muted) !important;
}

.chat-message.sent .space-object-card--outbox-sent .space-object-card__meta,
.chat-message.sent .space-audio-chat-card__text-loader-time,
.chat-message.sent .space-audio-chat-custom-player__time {
  color: var(--space-chat-card-glass-text-muted) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text-muted) !important;
}

.chat-message.sent .space-audio-chat-card__text-loader-g {
  color: var(--space-chat-card-glass-text) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text) !important;
}

.chat-message.sent .space-object-card--outbox-sent .space-object-card__expand-label,
.chat-message.sent .space-object-card--outbox-sent .space-object-card__collapse {
  color: var(--space-chat-card-glass-accent) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-accent) !important;
}

/* Dark readable copy on received white cards */
.chat-message.received .space-audio-chat-card,
.chat-message.received .space-audio-chat-card__caption,
.chat-message.received .space-object-card--inbox .space-object-card__title,
.chat-message.received .space-object-card--inbox .space-object-card__caption-text,
.chat-message.received .space-object-card--inbox .space-object-card__text-full,
.chat-message.received .space-object-card--inbox .space-object-card__transcript-full,
.chat-message.received .space-object-card--inbox .space-object-card__file-name,
.chat-message.received .chat-message-fallback,
.chat-message.received .bubble.bubble--inbox-fallback {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

.chat-message.received .space-object-card--inbox .space-object-card__meta,
.chat-message.received .space-audio-chat-card__text-status {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

body.ios-theme.space-shell .chat-message.received .space-object-card--inbox .space-object-card__summary,
body.ios-theme:has(.space-share) .chat-message.received .space-object-card--inbox .space-object-card__summary,
body.ios-theme.space-shell .chat-message.received .space-object-card--inbox .space-object-card__title,
body.ios-theme:has(.space-share) .chat-message.received .space-object-card--inbox .space-object-card__title,
body.ios-theme.space-shell .chat-message.received .space-object-card--inbox .space-object-card__meta,
body.ios-theme:has(.space-share) .chat-message.received .space-object-card--inbox .space-object-card__meta,
body.ios-theme.space-shell .chat-message.received .space-object-card--inbox .space-object-card__caption-text,
body.ios-theme:has(.space-share) .chat-message.received .space-object-card--inbox .space-object-card__caption-text,
body.ios-theme.space-shell .chat-message.received .space-object-card--inbox .space-object-card__text-full,
body.ios-theme:has(.space-share) .chat-message.received .space-object-card--inbox .space-object-card__text-full {
  color: #1a1a24 !important;
  -webkit-text-fill-color: #1a1a24 !important;
}

body.ios-theme.space-shell .chat-message.received .space-object-card--inbox .space-object-card__meta,
body.ios-theme:has(.space-share) .chat-message.received .space-object-card--inbox .space-object-card__meta {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

body.ios-theme.space-shell .chat-message.sent .space-object-card--outbox-sent .space-object-card__summary,
body.ios-theme:has(.space-share) .chat-message.sent .space-object-card--outbox-sent .space-object-card__summary,
body.ios-theme.space-shell .chat-message.sent .space-object-card--outbox-sent .space-object-card__title,
body.ios-theme:has(.space-share) .chat-message.sent .space-object-card--outbox-sent .space-object-card__title,
body.ios-theme.space-shell .chat-message.sent .space-object-card--outbox-sent .space-object-card__meta,
body.ios-theme:has(.space-share) .chat-message.sent .space-object-card--outbox-sent .space-object-card__meta,
body.ios-theme.space-shell .chat-message.sent .space-object-card--outbox-sent .space-object-card__caption-text,
body.ios-theme:has(.space-share) .chat-message.sent .space-object-card--outbox-sent .space-object-card__caption-text,
body.ios-theme.space-shell .chat-message.sent .space-object-card--outbox-sent .space-object-card__text-full,
body.ios-theme:has(.space-share) .chat-message.sent .space-object-card--outbox-sent .space-object-card__text-full {
  color: var(--space-chat-card-glass-text) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text) !important;
}

body.ios-theme.space-shell .chat-message.sent .space-object-card--outbox-sent .space-object-card__meta,
body.ios-theme:has(.space-share) .chat-message.sent .space-object-card--outbox-sent .space-object-card__meta {
  color: var(--space-chat-card-glass-text-muted) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text-muted) !important;
}

.chat-message.sent .bubble .space-audio-chat-card {
  display: grid !important;
  grid-template-rows: auto auto !important;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--space-chat-card-glass-border, rgba(255, 255, 255, 0.28));
  border-radius: 14px;
  background: var(--space-chat-card-glass-bg, rgba(255, 255, 255, 0.14));
  backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%));
  -webkit-backdrop-filter: var(--space-chat-card-glass-backdrop, blur(18px) saturate(165%));
  box-shadow: var(--space-chat-card-glass-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 28px rgba(0, 0, 0, 0.16));
  text-align: left;
  pointer-events: auto;
  overflow: hidden;
  isolation: isolate;
}

.chat-message.received .bubble .space-audio-chat-card {
  background: var(--space-chat-card-owner-bg, rgba(255, 255, 255, 0.97));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--space-chat-card-owner-border, rgba(166, 147, 239, 0.48));
  box-shadow: var(--space-chat-card-owner-shadow, 0 2px 12px rgba(129, 119, 240, 0.08));
}

.space-audio-chat-card__top {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  grid-row: 1 !important;
  overflow: hidden;
}

.space-audio-chat-card__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(166, 147, 239, 0.35);
  background: rgba(166, 147, 239, 0.1);
  color: #a693ef;
  font-size: 1rem;
  flex-shrink: 0;
}

.space-audio-chat-card__player {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  pointer-events: auto;
}

/* Custom player: [play] [0'00 ——— slider ——— 02.01] */
.space-audio-chat-custom-player {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  pointer-events: auto;
}

.space-audio-chat-custom-player__audio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.space-audio-chat-custom-player__play {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(166, 147, 239, 0.22);
  color: #7c5ce6;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  padding: 0;
  pointer-events: auto;
}

.space-audio-chat-custom-player__play:hover,
.space-audio-chat-custom-player__play:focus-visible {
  background: rgba(166, 147, 239, 0.35);
}

.space-audio-chat-custom-player__track {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.space-audio-chat-custom-player__time {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #4a5060;
  white-space: nowrap;
  line-height: 1;
}

.space-audio-chat-custom-player__time--start {
  min-width: 2.5em;
}

.space-audio-chat-custom-player__time--end {
  min-width: 2.85em;
  text-align: right;
}

.space-audio-chat-custom-player__seek {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  touch-action: pan-x;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  accent-color: #a693ef;
}

.space-audio-chat-custom-player__seek::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(166, 147, 239, 0.28);
}

.space-audio-chat-custom-player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #a693ef;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(80, 60, 140, 0.35);
}

.space-audio-chat-custom-player__seek::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(166, 147, 239, 0.28);
}

.space-audio-chat-custom-player__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #a693ef;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(80, 60, 140, 0.35);
}

.space-audio-chat-card__status {
  flex: 1 1 auto;
  font-size: 0.8rem;
  color: var(--gray, #6b7280);
  display: flex;
  align-items: center;
  min-height: 36px;
}

.space-audio-chat-card--text-pending {
  min-height: 132px;
}

.space-audio-chat-card__text-loader {
  grid-row: 2 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 72px;
  margin-top: 8px;
  padding: 10px 0;
  box-sizing: border-box;
}

.space-audio-chat-card__text-status {
  grid-row: 2 !important;
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #6b5f8a;
  text-align: center;
}

.space-audio-chat-card__text-loader-stage {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.space-audio-chat-card__text-loader-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateZ(0);
}

.space-audio-chat-card__text-loader-ring-bg {
  stroke: rgba(129, 119, 240, 0.14);
  stroke-width: 2.5;
}

.space-audio-chat-card__text-loader-ring-fill {
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.12s ease-out;
  filter: drop-shadow(0 0 3px rgba(166, 147, 239, 0.45));
  animation: space-audio-chat-g-loader-pulse 1.4s ease-in-out infinite;
}

.space-audio-chat-card__text-loader-core {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
}

.space-audio-chat-card__text-loader-g {
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  color: #3d2860;
  -webkit-text-fill-color: #3d2860;
}

.space-audio-chat-card__text-loader-time {
  font-size: 0.52rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #6b5f8a;
  -webkit-text-fill-color: #6b5f8a;
}

@keyframes space-audio-chat-g-loader-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(166, 147, 239, 0.35)); }
  50% { filter: drop-shadow(0 0 5px rgba(255, 198, 75, 0.55)); }
}

body.ios-theme.space-shell .space-audio-chat-card__text-loader-ring-fill,
body.ios-theme:has(.space-share) .space-audio-chat-card__text-loader-ring-fill {
  animation-play-state: running !important;
}

.space-audio-chat-card__player--video .chat-media-player-play {
  display: none !important;
}

.space-audio-chat-card .chat-media-card__download {
  flex: 0 0 32px;
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: 1;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
}

.space-audio-chat-card__caption {
  grid-row: 2 !important;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(166, 147, 239, 0.22);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--dark, #2a2e36);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.space-audio-chat-card:not(.space-audio-chat-card--expanded) .space-audio-chat-card__caption {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.space-audio-chat-card__summary {
  grid-row: 2 !important;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(166, 147, 239, 0.12);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
  color: #3d2a9e;
  -webkit-text-fill-color: #3d2a9e;
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(1.45em * 3 + 2px);
}

.space-audio-chat-card__summary::before {
  content: 'Summary · ';
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.72;
}

.space-audio-chat-card__transcript {
  grid-row: 3 !important;
  margin: 8px 0 0;
  padding: 8px 10px 2px;
  border-top: 1px solid rgba(166, 147, 239, 0.2);
  font-size: 0.8rem;
  line-height: 1.5;
  color: #4a4f5c;
  -webkit-text-fill-color: #4a4f5c;
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 12em;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.space-audio-chat-card__transcript::before {
  content: 'Full text';
  display: block;
  margin-bottom: 4px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(74, 79, 92, 0.72);
  -webkit-text-fill-color: rgba(74, 79, 92, 0.72);
}

.space-audio-chat-card__preview {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: #1a122c;
  flex-shrink: 0;
}

.space-audio-chat-card__preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.space-audio-chat-card__preview-dur {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
}

body.ios-theme.space-shell .chat-message.sent .space-audio-chat-card__summary,
body.ios-theme:has(.space-share) .chat-message.sent .space-audio-chat-card__summary {
  background: rgba(166, 147, 239, 0.2) !important;
  color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
}

body.ios-theme.space-shell .chat-message.sent .space-audio-chat-card__summary::before,
body.ios-theme:has(.space-share) .chat-message.sent .space-audio-chat-card__summary::before {
  color: var(--space-chat-card-glass-text-muted, rgba(255, 255, 255, 0.76)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text-muted, rgba(255, 255, 255, 0.76)) !important;
  opacity: 1 !important;
}

body.ios-theme.space-shell .chat-message.sent .space-audio-chat-card__transcript,
body.ios-theme:has(.space-share) .chat-message.sent .space-audio-chat-card__transcript {
  color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-accent, rgba(214, 204, 255, 0.96)) !important;
  border-top-color: rgba(255, 255, 255, 0.18) !important;
}

body.ios-theme.space-shell .chat-message.sent .space-audio-chat-card__transcript::before,
body.ios-theme:has(.space-share) .chat-message.sent .space-audio-chat-card__transcript::before {
  color: var(--space-chat-card-glass-text-muted, rgba(255, 255, 255, 0.76)) !important;
  -webkit-text-fill-color: var(--space-chat-card-glass-text-muted, rgba(255, 255, 255, 0.76)) !important;
}

body.ios-theme.space-shell .chat-message.received .space-audio-chat-card__summary,
body.ios-theme:has(.space-share) .chat-message.received .space-audio-chat-card__summary {
  background: rgba(166, 147, 239, 0.14) !important;
  color: #2a1f6e !important;
  -webkit-text-fill-color: #2a1f6e !important;
}

body.ios-theme.space-shell .chat-message.received .space-audio-chat-card__summary::before,
body.ios-theme:has(.space-share) .chat-message.received .space-audio-chat-card__summary::before {
  color: #4a3a9e !important;
  -webkit-text-fill-color: #4a3a9e !important;
  opacity: 1 !important;
}

body.ios-theme.space-shell .chat-message.received .space-audio-chat-card__transcript,
body.ios-theme:has(.space-share) .chat-message.received .space-audio-chat-card__transcript {
  color: #4a4f5c !important;
  -webkit-text-fill-color: #4a4f5c !important;
  border-top-color: rgba(166, 147, 239, 0.2) !important;
}

body.ios-theme.space-shell .chat-message.received .space-audio-chat-card__transcript::before,
body.ios-theme:has(.space-share) .chat-message.received .space-audio-chat-card__transcript::before {
  color: rgba(74, 79, 92, 0.72) !important;
  -webkit-text-fill-color: rgba(74, 79, 92, 0.72) !important;
}

.space-audio-chat-card__full-transcript {
  display: none;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(166, 147, 239, 0.14);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--dark, #2a2e36);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.space-audio-chat-card--expanded .space-audio-chat-card__full-transcript {
  display: block;
}

.space-audio-chat-card__expand-hint {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--purple, #8177ad);
  cursor: pointer;
  text-align: left;
}

.space-audio-chat-card__expand-hint:hover {
  text-decoration: underline;
}

.space-audio-chat-card__original-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(129, 119, 173, 0.85);
  margin-bottom: 4px;
}

.space-audio-chat-card__player {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.space-audio-chat-card__preview--tap {
  cursor: pointer;
}

.space-audio-chat-card__preview--tap:focus-visible {
  outline: 2px solid rgba(166, 147, 239, 0.85);
  outline-offset: 2px;
}

.space-audio-chat-card__body {
  grid-row: 2 !important;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
}

.space-audio-chat-card__body--solo {
  margin-top: 0;
  grid-row: 1 !important;
}

.space-audio-chat-card--video:has(.space-audio-chat-card__body--solo) {
  grid-template-rows: auto !important;
}

.space-audio-chat-card--video .space-audio-chat-card__player--video {
  position: relative;
  width: 100%;
}

.space-audio-chat-card--video .space-audio-chat-card__player--video > .chat-media-card__download {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  margin: 0;
}

.space-audio-chat-card--video .space-audio-chat-card__body .space-audio-chat-card__player--video {
  width: 100%;
}

.space-audio-chat-card--video .chat-media-player-wrap--video {
  position: relative;
  width: 100%;
  min-height: 150px;
  max-height: min(52vw, 240px);
  border-radius: 10px;
  overflow: hidden;
  background: #0f1115;
}

.space-audio-chat-card--video .chat-media-player-wrap--video .chat-media-player-play {
  z-index: 2;
}

.space-audio-chat-card--video .chat-media-player-wrap--video .space-audio-chat-card__video,
.space-audio-chat-card--video .chat-media-player-wrap--video video.chat-media-player {
  width: 100%;
  min-height: 150px;
  max-height: min(52vw, 240px);
  object-fit: contain;
  display: block;
}

.space-audio-chat-card__video {
  width: 100%;
  max-width: 100%;
  max-height: min(52vw, 240px);
  border-radius: 10px;
  background: #0f1115;
  object-fit: contain;
}

.space-audio-chat-card--video .space-audio-chat-card__top {
  align-items: flex-start;
}

.chat-message.received .bubble .space-audio-chat-card {
  max-width: 100%;
}

@media (max-width: 480px) {
  .chat-message:has(.space-outbox-chip--open),
  .chat-message:has(.space-outbox-chip--open) .chat-message-main,
  .chat-message:has(.space-outbox-chip--open) .chat-message-bubble-wrap,
  .chat-message:has(.space-object-card--expanded),
  .chat-message:has(.space-object-card--expanded) .chat-message-main,
  .chat-message:has(.space-object-card--expanded) .chat-message-bubble-wrap {
    max-width: min(94%, 340px) !important;
  }

  .chat-message.sent .bubble.bubble--outbox:has(.space-audio-chat-card) {
    width: min(94vw, 340px) !important;
    max-width: min(94%, 340px) !important;
    min-width: 0 !important;
  }

  .chat-message .bubble .space-audio-chat-card {
    padding: 8px;
  }

  .space-audio-chat-card__top {
    gap: 6px !important;
    min-height: 40px;
  }

  .space-audio-chat-card__icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
    border-radius: 8px;
  }

  .space-audio-chat-custom-player__play {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
  }

  .space-audio-chat-custom-player__track {
    gap: 6px;
  }

  .space-audio-chat-custom-player__time {
    font-size: 0.68rem;
  }

  .space-audio-chat-custom-player__seek {
    min-width: 0;
    height: 22px;
  }

  .space-audio-chat-card .chat-media-card__download {
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px !important;
  }
}

/* Share sheet (#instant-invite-sheet) — self-contained on Space (connect-shell --cn-* vars are .cn-page only) */
#instant-invite-sheet {
  --cn-text: #f8f6ff;
  --cn-muted: rgba(248, 246, 255, 0.72);
  --cn-lilac: #c4b5fd;
  --cn-line: rgba(166, 147, 239, 0.42);
  --cn-panel: #2a1d45;
  --cn-panel-elevated: #352a52;
  --cn-chip-gold-bg: rgba(255, 198, 75, 0.2);
  --cn-chip-gold-border: rgba(255, 198, 75, 0.48);
  --cn-chip-gold-text: #ffd86a;
  --cn-chip-purple-bg: rgba(166, 147, 239, 0.24);
  --cn-chip-purple-border: rgba(166, 147, 239, 0.55);
  --cn-chip-purple-text: #ece8ff;
  isolation: isolate;
  pointer-events: auto !important;
  z-index: 122000 !important;
}

body.space-invite-sheet-open {
  overflow: hidden !important;
}

body.space-invite-sheet-open #space-connect-local-toast.show {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 122010;
  width: min(92vw, 360px);
  margin: 0;
  padding: 11px 14px;
  border-radius: 12px;
  text-align: center;
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
  background: rgba(42, 29, 69, 0.96) !important;
  border: 1px solid rgba(166, 147, 239, 0.45);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
  opacity: 1 !important;
  pointer-events: none;
}

body.space-invite-sheet-open #space-connect-local-toast.show.space-connect-local-toast--err {
  color: #ffc8c8 !important;
  -webkit-text-fill-color: #ffc8c8 !important;
  background: rgba(74, 20, 28, 0.96) !important;
  border-color: rgba(255, 138, 128, 0.45);
}

body.ios-theme.space-shell #instant-invite-sheet,
body.ios-theme:has(.space-share) #instant-invite-sheet {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ios-theme.space-shell #instant-invite-sheet .cn-sheet__backdrop,
body.ios-theme:has(.space-share) #instant-invite-sheet .cn-sheet__backdrop {
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  background: rgba(8, 6, 18, 0.68) !important;
}

#instant-invite-sheet.cn-sheet {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 12px max(12px, env(safe-area-inset-bottom)) !important;
}

/* Must beat #instant-invite-sheet.cn-sheet display:flex — otherwise Share is always on screen */
#instant-invite-sheet.cn-sheet.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

#instant-invite-sheet .cn-sheet__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
}

#instant-invite-sheet .cn-sheet__panel {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
  width: min(100%, 400px) !important;
  max-width: 400px !important;
  margin: 0 !important;
  padding: 16px 16px 22px !important;
  border-radius: 18px 18px 0 0 !important;
  background: var(--cn-panel) !important;
  background-color: var(--cn-panel) !important;
  border: 1px solid var(--cn-line) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45) !important;
  color: var(--cn-text) !important;
  -webkit-text-fill-color: var(--cn-text) !important;
  height: calc(100dvh - 10px) !important;
  min-height: calc(100dvh - 10px) !important;
  max-height: calc(100dvh - 10px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#instant-invite-sheet.cn-invite-sheet--compact .cn-sheet__panel {
  height: calc(100dvh - 10px) !important;
  min-height: calc(100dvh - 10px) !important;
  max-height: calc(100dvh - 10px) !important;
}

#instant-invite-sheet .cn-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

#instant-invite-sheet .cn-sheet__title {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--cn-text) !important;
  -webkit-text-fill-color: var(--cn-text) !important;
}

#instant-invite-sheet .cn-invite-sheet__rename-for-you {
  width: 100% !important;
  margin: 12px 0 4px !important;
  border: 1px solid rgba(255, 198, 75, 0.55) !important;
  background: rgba(255, 198, 75, 0.2) !important;
  color: #ffd86a !important;
  -webkit-text-fill-color: #ffd86a !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

#instant-invite-sheet .cn-invite-sheet__rename-for-you i {
  color: #ffd86a !important;
  -webkit-text-fill-color: #ffd86a !important;
  font-size: 0.85rem !important;
}

#instant-invite-sheet .cn-invite-sheet__rename-for-you:active {
  transform: scale(0.98);
}

#instant-invite-sheet .cn-invite-sheet__block--rename {
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 14px 14px 16px !important;
  border-radius: 14px !important;
  background: rgba(255, 198, 75, 0.08) !important;
  border: 1px solid rgba(255, 198, 75, 0.38) !important;
}

#instant-invite-sheet .cn-invite-sheet__block--rename .cn-invite-sheet__rename-for-you {
  margin: 0 0 10px !important;
}

#instant-invite-sheet .cn-invite-sheet__rename-hint {
  margin: 0 0 12px !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  color: var(--cn-muted) !important;
  -webkit-text-fill-color: var(--cn-muted) !important;
}

#instant-invite-sheet .cn-invite-sheet__block--rename .cn-invite-sheet__field-label {
  display: block !important;
  margin: 0 0 8px !important;
}

#instant-invite-sheet .cn-invite-sheet__rename-input {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 12px !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 198, 75, 0.4) !important;
  background: rgba(0, 0, 0, 0.32) !important;
  color: #fff8e1 !important;
  -webkit-text-fill-color: #fff8e1 !important;
  font: inherit !important;
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
}

#instant-invite-sheet .cn-invite-sheet__rename-input::placeholder {
  color: rgba(255, 248, 225, 0.45) !important;
  -webkit-text-fill-color: rgba(255, 248, 225, 0.45) !important;
}

#instant-invite-sheet .cn-invite-sheet__rename-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

#instant-invite-sheet .cn-sheet__head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#instant-invite-sheet .cn-invite-sheet__done,
#instant-invite-sheet .cn-sheet__close {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(166, 147, 239, 0.45) !important;
  background: rgba(166, 147, 239, 0.22) !important;
  color: var(--cn-text) !important;
  -webkit-text-fill-color: var(--cn-text) !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  font: inherit;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}

#instant-invite-sheet .cn-sheet__close {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#instant-invite-sheet .cn-invite-sheet__block {
  margin-bottom: 18px;
}

#instant-invite-sheet .cn-invite-sheet__block--share {
  margin-bottom: 16px;
  padding: 16px 14px 18px !important;
  border-radius: 14px !important;
  background: var(--cn-panel-elevated) !important;
  background-color: var(--cn-panel-elevated) !important;
  border: 1px solid rgba(166, 147, 239, 0.32) !important;
}

#instant-invite-sheet .cn-invite-sheet__block--advanced {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(166, 147, 239, 0.28) !important;
}

#instant-invite-sheet .cn-invite-sheet__expired {
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(198, 40, 40, 0.18) !important;
  border: 1px solid rgba(244, 67, 54, 0.38) !important;
  color: #ffb4a9 !important;
  -webkit-text-fill-color: #ffb4a9 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#instant-invite-sheet.cn-invite-sheet--compact .cn-invite-sheet__block--advanced {
  display: none !important;
}

#instant-invite-sheet .cn-invite-sheet__field-label,
#instant-invite-sheet .cn-invite-sheet__block-title {
  margin: 0 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--cn-lilac) !important;
  -webkit-text-fill-color: var(--cn-lilac) !important;
}

#instant-invite-sheet .cn-invite-sheet__code-head,
#instant-invite-sheet .cn-invite-sheet__link-head {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}

#instant-invite-sheet .cn-invite-sheet__link-head {
  margin-top: 14px !important;
}

#instant-invite-sheet .cn-invite-sheet__history {
  margin: 20px 0 8px !important;
}

#instant-invite-sheet .cn-invite-sheet__history > .cn-invite-sheet__field-label {
  display: block !important;
  margin: 0 0 8px !important;
}

#instant-invite-sheet .cn-share-history-grid {
  margin: 0 0 8px !important;
}

#instant-invite-sheet .cn-invite-sheet__history-hint {
  margin: 0 !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
  color: var(--cn-muted) !important;
  -webkit-text-fill-color: var(--cn-muted) !important;
}

#instant-invite-sheet.cn-invite-sheet--compact .cn-invite-sheet__history {
  display: block !important;
}

.chat-join-history-bar {
  background: rgba(166, 147, 239, 0.14);
}

#instant-invite-sheet .cn-invite-sheet__field-label--inline {
  display: inline-block !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

#instant-invite-sheet .cn-invite-sheet__code-box {
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.32) !important;
  border: 1px solid rgba(166, 147, 239, 0.28) !important;
}

#instant-invite-sheet .cn-invite-sheet__code {
  display: block !important;
  margin: 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.35 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  word-break: break-all !important;
}

#instant-invite-sheet .cn-invite-sheet__chip,
#instant-invite-sheet .cn-invite-sheet__btn,
#instant-invite-sheet .cn-invite-sheet__advanced-toggle {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  font: inherit !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

#instant-invite-sheet .cn-invite-sheet__chip--code,
#instant-invite-sheet #btn-instant-invite-copy-code {
  background: var(--cn-chip-gold-bg) !important;
  border: 1px solid var(--cn-chip-gold-border) !important;
  color: var(--cn-chip-gold-text) !important;
  -webkit-text-fill-color: var(--cn-chip-gold-text) !important;
}

#instant-invite-sheet .cn-invite-sheet__chip--copy-link,
#instant-invite-sheet #btn-instant-invite-copy-link {
  background: var(--cn-chip-purple-bg) !important;
  border: 1px solid var(--cn-chip-purple-border) !important;
  color: var(--cn-chip-purple-text) !important;
  -webkit-text-fill-color: var(--cn-chip-purple-text) !important;
}

#instant-invite-sheet .cn-invite-sheet__chip--code:hover,
#instant-invite-sheet .cn-invite-sheet__chip--copy-link:hover,
#instant-invite-sheet #btn-instant-invite-copy-code:hover,
#instant-invite-sheet #btn-instant-invite-copy-link:hover {
  filter: brightness(1.08);
}

#instant-invite-sheet .cn-invite-sheet__chip:active,
#instant-invite-sheet .cn-invite-sheet__btn:active,
#instant-invite-sheet .cn-invite-sheet__advanced-toggle:active,
#instant-invite-sheet .cn-invite-sheet__done:active,
#instant-invite-sheet .cn-sheet__close:active {
  transform: scale(0.97);
}

#instant-invite-sheet .cn-invite-sheet__chip:focus-visible,
#instant-invite-sheet .cn-invite-sheet__btn:focus-visible,
#instant-invite-sheet .cn-invite-sheet__advanced-toggle:focus-visible,
#instant-invite-sheet .cn-invite-sheet__done:focus-visible,
#instant-invite-sheet .cn-sheet__close:focus-visible {
  outline: 2px solid rgba(196, 181, 253, 0.85);
  outline-offset: 2px;
}

#instant-invite-sheet .cn-invite-sheet__btn.cn-invite-sheet__rename-for-you,
#instant-invite-sheet #btn-instant-invite-rename-for-me,
#instant-invite-sheet #btn-instant-invite-rename-focus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255, 198, 75, 0.55) !important;
  background: rgba(255, 198, 75, 0.2) !important;
  color: #ffd86a !important;
  -webkit-text-fill-color: #ffd86a !important;
}

#instant-invite-sheet .cn-invite-sheet__link {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 8px !important;
  padding: 9px 11px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(166, 147, 239, 0.3) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: #f0ecff !important;
  -webkit-text-fill-color: #f0ecff !important;
  font: inherit !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

#instant-invite-sheet .cn-invite-sheet__qr {
  display: flex;
  justify-content: center;
  margin: 6px auto 8px;
  padding: 8px;
  border-radius: 12px;
  background: #ffffff;
  max-width: 148px;
}

#instant-invite-sheet .cn-invite-sheet__qr.hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: none !important;
}

#instant-invite-sheet .cn-invite-sheet__qr img,
#instant-invite-sheet .cn-invite-sheet__qr canvas {
  display: block;
  max-width: 120px;
  max-height: 120px;
}

#instant-invite-sheet .cn-invite-sheet__actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

#instant-invite-sheet .cn-invite-sheet__actions .cn-invite-sheet__btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  text-align: center !important;
  padding: 10px 14px !important;
}

#instant-invite-sheet .cn-invite-sheet__btn--primary,
#instant-invite-sheet #btn-instant-invite-send {
  background: rgba(166, 147, 239, 0.65) !important;
  border: 1px solid rgba(166, 147, 239, 0.78) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#instant-invite-sheet .cn-invite-sheet__btn--ghost,
#instant-invite-sheet #btn-instant-invite-new-link {
  background: rgba(0, 0, 0, 0.24) !important;
  border: 1px solid rgba(166, 147, 239, 0.35) !important;
  color: #f8f6ff !important;
  -webkit-text-fill-color: #f8f6ff !important;
}

#instant-invite-sheet .cn-invite-sheet__advanced-toggle {
  display: none;
  width: 100%;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px dashed rgba(166, 147, 239, 0.5) !important;
  border-radius: 12px;
  background: rgba(166, 147, 239, 0.12) !important;
  color: #e8e0ff !important;
  -webkit-text-fill-color: #e8e0ff !important;
  text-align: center;
  font-weight: 700 !important;
  pointer-events: auto !important;
}

#instant-invite-sheet.cn-invite-sheet--compact .cn-invite-sheet__advanced-toggle:not(.hidden) {
  display: block !important;
}

#instant-invite-sheet .cn-rel-mode {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  text-align: left !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(166, 147, 239, 0.32) !important;
  color: var(--cn-text) !important;
  -webkit-text-fill-color: var(--cn-text) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

#instant-invite-sheet .cn-rel-mode-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#instant-invite-sheet .cn-rel-mode strong {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--cn-text) !important;
  -webkit-text-fill-color: var(--cn-text) !important;
}

#instant-invite-sheet .cn-rel-mode span {
  color: var(--cn-muted) !important;
  -webkit-text-fill-color: var(--cn-muted) !important;
  font-size: 0.72rem !important;
}

#instant-invite-sheet .cn-rel-mode.is-on {
  background: rgba(166, 147, 239, 0.28) !important;
  border-color: rgba(166, 147, 239, 0.62) !important;
}

#instant-invite-sheet .cn-rel-action-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#instant-invite-sheet .cn-rel-action {
  border: 1px solid rgba(166, 147, 239, 0.32) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  color: var(--cn-text) !important;
  -webkit-text-fill-color: var(--cn-text) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

#instant-invite-sheet .cn-rel-action.is-on,
#instant-invite-sheet .cn-rel-action[aria-pressed="true"] {
  background: rgba(166, 147, 239, 0.28) !important;
  border-color: rgba(166, 147, 239, 0.62) !important;
}

#instant-invite-sheet .cn-rel-field {
  display: block !important;
  margin-top: 8px !important;
}

#instant-invite-sheet .cn-rel-field span {
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 0.78rem !important;
  color: var(--cn-muted) !important;
  -webkit-text-fill-color: var(--cn-muted) !important;
}

#instant-invite-sheet .cn-rel-field input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(166, 147, 239, 0.32) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: #f0ecff !important;
  -webkit-text-fill-color: #f0ecff !important;
  font: inherit !important;
  pointer-events: auto !important;
}

#instant-invite-sheet .cn-rel-panel-meta {
  color: var(--cn-muted) !important;
  -webkit-text-fill-color: var(--cn-muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}

@media (min-width: 769px) {
  #instant-invite-sheet.cn-sheet {
    align-items: stretch !important;
    justify-content: center !important;
    padding: 8px 16px !important;
  }

  #instant-invite-sheet .cn-sheet__panel {
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    border-radius: 18px !important;
    height: calc(100dvh - 16px) !important;
    min-height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    box-shadow:
      0 24px 64px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(166, 147, 239, 0.14) inset !important;
  }

  #instant-invite-sheet.cn-invite-sheet--compact .cn-sheet__panel {
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    height: calc(100dvh - 16px) !important;
    min-height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  #instant-invite-sheet:not(.cn-invite-sheet--compact) .cn-sheet__panel {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    height: calc(100dvh - 16px) !important;
    min-height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  #instant-invite-sheet .cn-invite-sheet__code {
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #instant-invite-sheet .cn-invite-sheet__actions {
    justify-content: flex-end !important;
  }

  #instant-invite-sheet .cn-invite-sheet__actions .cn-invite-sheet__btn,
  #instant-invite-sheet .cn-invite-sheet__actions .cn-invite-sheet__btn:only-child {
    flex: 0 0 auto !important;
    min-width: 104px !important;
  }
}

/* ===== MOBILE: row 1 = Space code + icons; row 2 = Open / New / Favorites / … ===== */
@media (max-width: 768px) {
  html body #space-tabs,
  #space-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    gap: 0 !important;
    padding: 4px 6px 6px !important;
    overflow: visible !important;
  }

  html body #space-tabs .space-tabs-code-wrap,
  html body.ios-theme #space-tabs .space-tabs-code-wrap,
  html body.ios-theme.space-shell #space-tabs .space-tabs-code-wrap,
  html body.ios-theme:has(.space-share) #space-tabs .space-tabs-code-wrap,
  #space-tabs .space-tabs-code-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    order: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  html body #space-tabs #space-code.space-code-display,
  html body #space-tabs input#space-code.space-code-display,
  html body #space-tabs textarea#space-code.space-code-display,
  #space-tabs #space-code.space-code-display,
  #space-tabs input#space-code.space-code-display,
  #space-tabs textarea#space-code.space-code-display {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #space-tabs .space-code-picker-wrap {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
  }

  #space-tabs .space-tabs-nav {
    display: none !important;
    order: 99 !important;
  }

  #space-tabs .space-tabs-bar,
  #space-tabs .space-tabs-bar.space-tabs-bar--dock5 {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
    margin: 4px 0 0 !important;
    padding: 4px 0 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 5px !important;
  }

  #space-tabs .space-tabs-bar::-webkit-scrollbar {
    display: none;
  }

  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn,
  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  body.ios-theme.space-shell #space-tabs .space-tabs-bar,
  body.ios-theme:has(.space-share) #space-tabs .space-tabs-bar {
    border-top-color: rgba(255, 255, 255, 0.12);
  }

  /* Code row: grid — digits shrink, icon strip (incl. Spacebook) always fully visible */
  html body #space-tabs .space-tabs-code-wrap,
  html body.ios-theme #space-tabs .space-tabs-code-wrap,
  #space-tabs .space-tabs-code-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
    column-gap: 0 !important;
    overflow: hidden !important;
  }

  html body #space-tabs #space-code.space-code-display,
  html body #space-tabs input#space-code.space-code-display,
  html body #space-tabs textarea#space-code.space-code-display,
  #space-tabs #space-code.space-code-display,
  #space-tabs input#space-code.space-code-display,
  #space-tabs textarea#space-code.space-code-display {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow-x: hidden !important;
  }

  #space-tabs .space-code-picker-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    flex: none !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    min-width: max-content !important;
  }

  #space-tabs .space-code-copy-btn,
  #space-tabs .space-code-rename-btn,
  #space-tabs .space-code-share-btn,
  #space-tabs .space-code-picker-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: var(--space-code-bar-h, 28px) !important;
    min-height: var(--space-code-bar-h, 28px) !important;
    max-height: var(--space-code-bar-h, 28px) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  #space-tabs .space-code-picker-btn {
    border-radius: 0 6px 6px 0 !important;
    overflow: visible !important;
  }

  #space-tabs .space-code-picker-icon {
    font-size: 0.68rem !important;
    line-height: 1 !important;
  }

  /* Dock row: More — same height as Open/New/Favorites, full label */
  #space-tabs .space-tabs-bar--dock5 {
    --space-dock-font: 0.66rem !important;
    --space-dock-icon: 0.68rem !important;
    --space-code-bar-h: var(--space-h-ctrl, 28px) !important;
  }

  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn,
  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more > summary.space-tabs-dock-btn {
    min-height: var(--space-h-ctrl, 28px) !important;
    max-height: var(--space-h-ctrl, 28px) !important;
    height: var(--space-h-ctrl, 28px) !important;
    padding: 0 7px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }

  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more > summary.space-tabs-dock-btn--more {
    padding: 0 10px !important;
    min-width: 2.9rem !important;
    justify-content: center !important;
  }

  #space-tabs .space-tabs-bar summary.nav-more-summary.space-tabs-dock-btn--more::after,
  #space-tabs .space-tabs-bar .space-tabs-dock-more > summary.space-tabs-dock-btn--more::after {
    content: none !important;
    display: none !important;
  }

  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn__label,
  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more .space-tabs-dock-btn__label {
    display: inline !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Narrow portrait: icon-only dock so Open/New/Favorites/More/Close all fit (no clipped labels) */
  @media (max-width: 420px) {
    #space-tabs .space-tabs-bar--dock5 {
      gap: 4px !important;
      justify-content: space-between !important;
      overflow-x: hidden !important;
    }

    #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn,
    #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more > summary.space-tabs-dock-btn {
      padding: 0 6px !important;
      min-width: 36px !important;
      flex: 1 1 0 !important;
      max-width: 56px !important;
    }

    #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn__label,
    #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more .space-tabs-dock-btn__label {
      display: none !important;
    }

    #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more > summary.space-tabs-dock-btn--more {
      min-width: 36px !important;
      padding: 0 6px !important;
    }

    #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more > summary.space-tabs-dock-btn--more::before {
      content: none !important;
      display: none !important;
    }

    body.space-shell .space-tabs-dock-inbox .find-inbox-bell,
    body.ios-theme.space-shell .space-tabs-dock-inbox .find-inbox-bell {
      width: 100%;
      min-width: 36px;
      max-width: 56px;
      padding: 0;
      flex: 1 1 0;
    }

    #space-tabs .space-tabs-dock-inbox {
      flex: 1 1 0 !important;
      max-width: 56px;
      min-width: 36px;
      display: flex !important;
    }

    /* Code row: keep Recent Spaces / Spacebook book icon fully visible (never edge-clipped) */
    html body #space-tabs .space-tabs-code-wrap,
    html body.ios-theme #space-tabs .space-tabs-code-wrap,
    #space-tabs .space-tabs-code-wrap {
      overflow: visible !important;
    }

    #space-tabs .space-code-picker-wrap {
      overflow: visible !important;
      z-index: 2;
    }

    #space-tabs .space-code-copy-btn,
    #space-tabs .space-code-rename-btn,
    #space-tabs .space-code-share-btn,
    #space-tabs .space-code-picker-btn {
      width: 28px !important;
      min-width: 28px !important;
    }
  }
}

/* Chat-only peer queue: compact status that must not cover yellow Send on first message */
@media (max-width: 768px) {
  .space-pending-delivery.is-chat-only-queue {
    margin: 0 8px 4px;
    padding: 5px 8px 5px 10px;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    overflow: hidden;
  }

  .space-pending-delivery.is-chat-only-queue .space-pending-delivery__head {
    gap: 6px;
    min-width: 0;
  }

  .space-pending-delivery.is-chat-only-queue #space-pending-delivery-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .space-bottom-dock .space-pending-delivery:not(.hidden) {
    pointer-events: auto;
  }

  .space-bottom-dock .space-pending-delivery.is-chat-only-queue + .space-bottom-dock__composer,
  .space-bottom-dock .space-pending-delivery.is-chat-only-queue + .chat-important-block.collapsed + .space-bottom-dock__composer {
    padding-top: 2px;
  }

  .space-bottom-dock__composer .send-btn,
  .space-bottom-dock__composer #btn-send {
    position: relative;
    z-index: 3;
  }
}

/* Mobile hero — scroll includes large dock icons + quick-actions (beats chat-first-shell overflow:hidden) */
@media (max-width: 1024px) {
  body.space-dock-hero-active.space-share.chat-first-shell #panel-chat #chat-panel-inner,
  body.space-dock-hero-active #panel-chat #chat-panel-inner {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.space-dock-hero-active.space-share.chat-first-shell #panel-chat .chat-messages,
  body.space-dock-hero-active #panel-chat .chat-messages {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }

  body.space-dock-hero-active #panel-chat #chat-panel-inner .space-media-dock.space-media-dock--hero,
  body.space-dock-hero-active #panel-chat #chat-panel-inner .space-media-dock.space-media-dock--hero-settle {
    gap: 14px 16px;
  }
}


/* ===== space-mobile-ui-restore-2a95 ===== */
@media (max-width: 768px) {
  /* Keep code-row action buttons visible beside the Space number */
  #space-tabs .space-tabs-code-wrap {
    overflow: visible !important;
  }
  #space-tabs .space-code-picker-wrap {
    overflow: visible !important;
    flex-shrink: 0 !important;
    z-index: 3;
  }
  #space-tabs .space-code-copy-btn,
  #space-tabs .space-code-rename-btn,
  #space-tabs .space-code-share-btn,
  #space-tabs .space-code-picker-btn {
    flex-shrink: 0 !important;
  }

  /* Composer / Send must stay above peer queue and safe-area */
  .space-bottom-dock {
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
    overflow: visible !important;
  }
  .space-bottom-dock__composer,
  .space-share.chat-first-shell .chat-composer {
    overflow: visible !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .space-bottom-dock__composer .send-btn,
  .space-bottom-dock__composer #btn-send,
  .space-share.chat-first-shell .chat-composer .send-btn {
    position: relative;
    z-index: 5 !important;
    flex: 0 0 auto !important;
  }

  /* Less air between bubble and action icons */
  .chat-message-actions {
    margin-top: 1px !important;
    min-height: 0 !important;
  }
  .chat-message:not(.system) {
    row-gap: 0;
    margin-bottom: 8px;
  }
  .chat-message-main {
    gap: 2px;
  }
}


/* ===== space-mobile-ui-followup-2a95 ===== */

/* Bubble → action icons: no phantom gap */
.chat-message-main {
  gap: 0 !important;
  row-gap: 0 !important;
}
.chat-message-bubble-wrap,
.chat-message-bubble-wrap--tasks {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.chat-message-bubble-wrap--tasks {
  /* room for bangs fully above the bubble */
  padding-top: 30px !important;
  margin-top: 0 !important;
}
.chat-message-bubble-wrap > .bubble {
  margin: 0 !important;
}
.chat-message-actions {
  margin-top: 0 !important;
  padding-top: 0 !important;
  gap: 2px !important;
  min-height: 0 !important;
  line-height: 1 !important;
}
.chat-message-actions .time {
  margin-top: 0 !important;
}
.chat-msg-reactions {
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
}
.chat-message .sender {
  margin-bottom: 2px !important;
}
.chat-message .sender.peer-label-name {
  margin-bottom: 2px !important;
}
#panel-chat .chat-messages-feed {
  gap: 8px;
}

@media (max-width: 768px) {
  /* Spacebook / code-row icons must be fully visible (never half-clipped) */
  #space-tabs,
  #space-tabs .space-tabs-code-wrap,
  html body #space-tabs .space-tabs-code-wrap,
  html body.ios-theme #space-tabs .space-tabs-code-wrap {
    overflow: visible !important;
  }
  #space-tabs .space-code-picker-wrap {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    min-width: max-content !important;
    margin-right: 2px !important;
    padding-right: 2px !important;
    z-index: 5 !important;
    position: relative;
  }
  #space-tabs .space-code-copy-btn,
  #space-tabs .space-code-rename-btn,
  #space-tabs .space-code-share-btn,
  #space-tabs .space-code-picker-btn {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    flex: 0 0 30px !important;
    overflow: visible !important;
  }
  #space-tabs #space-code.space-code-display,
  #space-tabs input#space-code.space-code-display {
    padding-right: 4px !important;
  }

  /* Dock: Open/New/Fav/More/Bell/Close fit one row — icon-only on narrow phones */
  #space-tabs .space-tabs-bar--dock5 {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 3px !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }
  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn,
  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more,
  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more > summary.space-tabs-dock-btn,
  #space-tabs .space-tabs-dock-inbox,
  body.space-shell #find-inbox-slot.space-tabs-dock-inbox {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-btn__label,
  #space-tabs .space-tabs-bar--dock5 .space-tabs-dock-more .space-tabs-dock-btn__label {
    display: none !important;
  }
  body.space-shell .space-tabs-dock-inbox .find-inbox-bell,
  body.ios-theme.space-shell .space-tabs-dock-inbox .find-inbox-bell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--space-code-bar-h, 28px) !important;
    min-height: var(--space-code-bar-h, 28px) !important;
    max-height: var(--space-code-bar-h, 28px) !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }
  #space-tabs .space-tabs-dock-inbox {
    display: inline-flex !important;
    align-items: stretch !important;
    order: 40;
  }
  #space-tabs .space-tabs-dock-btn--close {
    order: 50;
  }
  #space-tabs .space-tabs-dock-more {
    order: 30;
  }

  .chat-message-actions {
    margin-top: 0 !important;
  }
  .chat-message-bubble-wrap--tasks {
    padding-top: 30px !important;
  }
  .chat-msg-task-bang {
    width: 22px !important;
    height: 22px !important;
  }
}


/* Final overrides — Spacebook full + bubble/actions flush + E2E clear of bangs */
html body #space-tabs .space-tabs-code-wrap,
html body.ios-theme #space-tabs .space-tabs-code-wrap,
#space-tabs .space-tabs-code-wrap.space-code-field-wrap {
  overflow: visible !important;
}
html body #space-tabs .space-code-picker-wrap {
  overflow: visible !important;
  flex-shrink: 0 !important;
  z-index: 6 !important;
}
html body .chat-message-main > .chat-message-actions {
  margin-top: -2px !important;
  padding-top: 0 !important;
  transform: none !important;
}
html body .chat-message-main > .chat-message-bubble-wrap {
  margin-bottom: 0 !important;
}
html body #space-e2e-badge,
html body .space-e2e-badge {
  top: 8px !important;
  left: 10px !important;
  right: auto !important;
  z-index: 3 !important;
}
html body .chat-msg-task-bang--personal {
  z-index: 14 !important;
}


/* ===== space-chrome-clusters-2a95 ===== */
.space-chrome-compact-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  flex: 1 1 100%;
  order: 0;
  padding: 0;
  box-sizing: border-box;
}

.space-chrome-fab {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(129, 119, 240, 0.28);
  background: linear-gradient(165deg, #ffffff 0%, #f3f0fb 100%);
  color: #3d2860;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(15, 18, 28, 0.06),
    0 6px 16px rgba(129, 119, 240, 0.12);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.22s ease,
    color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.space-chrome-fab i {
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.space-chrome-fab--code {
  border-color: rgba(249, 168, 37, 0.45);
  background: linear-gradient(165deg, #fff8e1, #ffe082);
  color: #5d4037;
}

.space-chrome-fab--fav {
  border-color: rgba(255, 198, 75, 0.4);
  background: linear-gradient(165deg, #fff8e1, #ffe082);
  color: rgba(93, 64, 55, 0.55);
}
.space-chrome-fab--fav.is-on {
  color: #f5b301;
}
body.sendi-landing-picker #btn-sendi-chrome-fav {
  display: none !important;
}

.space-chrome-fab:hover,
.space-chrome-fab:focus-visible {
  transform: translateY(-1px) scale(1.04);
  outline: none;
  box-shadow:
    0 2px 4px rgba(15, 18, 28, 0.08),
    0 10px 22px rgba(129, 119, 240, 0.18);
}

.space-chrome-fab[aria-expanded="true"] {
  transform: scale(1.02);
  box-shadow:
    0 0 0 2px rgba(129, 119, 240, 0.22),
    0 8px 18px rgba(61, 40, 96, 0.16);
}

.space-chrome-fab--code[aria-expanded="true"] i {
  transform: rotate(-12deg) scale(1.08);
}

.space-chrome-fab--dock[aria-expanded="true"] i {
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  #space-tabs.space-chrome-clusters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 4px 6px 6px;
  }

  #space-tabs.space-chrome-clusters .space-chrome-compact-bar {
    display: flex !important;
    order: 0;
  }

  #space-tabs.space-chrome-clusters #space-code-cluster-panel,
  #space-tabs.space-chrome-clusters #space-dock-cluster-panel {
    order: 2;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transform-origin: top center;
    will-change: max-height, opacity, transform;
    transition:
      max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.24s ease,
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      margin 0.28s ease,
      padding 0.28s ease,
      border-width 0.2s ease;
  }

  /* Collapsed: free vertical space for chat up to the compact fab row */
  #space-tabs.space-chrome-clusters:not(.is-code-open) #space-code-cluster-panel {
    max-height: 0 !important;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
    visibility: hidden;
  }

  #space-tabs.space-chrome-clusters:not(.is-dock-open) #space-dock-cluster-panel {
    max-height: 0 !important;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
    visibility: hidden;
  }

  #space-tabs.space-chrome-clusters.is-code-open #space-code-cluster-panel {
    max-height: 120px;
    opacity: 1;
    transform: translateY(0) scale(1);
    overflow: visible !important;
    pointer-events: auto;
    visibility: visible;
    margin: 0 !important;
  }

  #space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel {
    max-height: 88px;
    opacity: 1;
    transform: translateY(0) scale(1);
    overflow: visible !important;
    pointer-events: auto;
    visibility: visible;
    display: flex !important;
    margin: 0 !important;
    padding-top: 4px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  /* Stagger children when opening dock */
  #space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel > .space-tabs-dock-btn,
  #space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel > .space-tabs-dock-more,
  #space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel > .space-tabs-dock-inbox {
    animation: space-chrome-pop 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  #space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel > .space-tabs-dock-btn--open { animation-delay: 0.02s; }
  #space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel > .space-tabs-dock-btn--new { animation-delay: 0.06s; }
  #space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel > .space-tabs-dock-btn--favorites { animation-delay: 0.1s; }
  #space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel > .space-tabs-dock-more { animation-delay: 0.14s; }
  #space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel > .space-tabs-dock-inbox { animation-delay: 0.18s; }
  #space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel > .space-tabs-dock-btn--close { animation-delay: 0.22s; }

  #space-tabs.space-chrome-clusters.is-code-open #space-code-cluster-panel .space-code-display,
  #space-tabs.space-chrome-clusters.is-code-open #space-code-cluster-panel .space-code-picker-wrap {
    animation: space-chrome-pop 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  #space-tabs.space-chrome-clusters.is-code-open #space-code-cluster-panel .space-code-picker-wrap {
    animation-delay: 0.08s;
  }

  @keyframes space-chrome-pop {
    from {
      opacity: 0;
      transform: translateY(-6px) scale(0.92);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Distinct dock icons already present; ensure More has visible icon on mobile */
  #space-tabs.space-chrome-clusters .space-tabs-dock-btn--more i {
    display: inline-flex !important;
  }

  body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab--code {
    background: linear-gradient(165deg, #ffe082, #ffca28);
    color: #4e342e;
  }
  body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab--dock {
    background: linear-gradient(165deg, #90caf9, #42a5f5);
    color: #0d47a1;
  }
}

@media (min-width: 769px) {
  .space-chrome-compact-bar {
    display: none !important;
  }
}

/* ===== communicator-chrome-top-6e2d ===== */
body.space-shell,
body.ios-theme.space-shell {
  --space-chrome-top-h: 52px;
}

/* Always pin Communicator chrome to the very top */
#space-tabs.space-chrome-clusters {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 4px 8px 6px;
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(15, 18, 28, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#space-tabs.space-chrome-clusters .space-chrome-compact-bar {
  display: flex !important;
  order: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--space-chrome-top-h);
  padding: 4px 2px;
}

.space-chrome-title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  pointer-events: auto;
}

.space-chrome-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  transition:
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.28s ease;
}

.space-chrome-action {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 163, 90, 0.45);
  background: rgba(240, 163, 90, 0.16);
  color: #f8e7d2;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}

.space-chrome-action--new {
  background: #f0a35a;
  border-color: transparent;
  color: #1a120a;
}

.space-chrome-action--open {
  background: rgba(255, 198, 75, 0.22);
  border-color: rgba(255, 198, 75, 0.55);
  color: #ffe9a8;
}

.space-chrome-action--passbook {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(244, 239, 230, 0.22);
  color: #f4efe6;
}

@media (max-width: 380px) {
  .space-chrome-action {
    padding: 0.32rem 0.62rem;
    font-size: 0.82rem;
  }
}

.space-chrome-action:active {
  transform: scale(0.97);
}

.space-chrome-title__text {
  display: inline-block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: #f4f1ff;
  white-space: nowrap;
  transform: translateY(0);
  opacity: 1;
  transition:
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing 0.34s ease,
    filter 0.28s ease;
}

#space-tabs.space-chrome-clusters.is-code-open .space-chrome-title__text,
#space-tabs.space-chrome-clusters.is-dock-open .space-chrome-title__text,
#space-tabs.space-chrome-clusters.is-code-open .space-chrome-actions,
#space-tabs.space-chrome-clusters.is-dock-open .space-chrome-actions {
  opacity: 0;
  transform: translateY(-10px) scale(0.92);
  letter-spacing: 0.18em;
  filter: blur(2px);
  pointer-events: none;
}

/* Pinned dock: keep SENDi! title + always show Open / New / Favorites / More */
#space-tabs.space-chrome-clusters.space-chrome-dock-pinned .space-chrome-fab--dock {
  display: none !important;
}
#space-tabs.space-chrome-clusters.space-chrome-dock-pinned.is-dock-open .space-chrome-title__text {
  opacity: 1;
  transform: none;
  letter-spacing: inherit;
  filter: none;
  pointer-events: auto;
}
#space-tabs.space-chrome-clusters.space-chrome-dock-pinned:not(.is-code-open) #space-dock-cluster-panel,
#space-tabs.space-chrome-clusters.space-chrome-dock-pinned.is-dock-open #space-dock-cluster-panel {
  max-height: 88px !important;
  opacity: 1 !important;
  transform: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
#space-tabs.space-chrome-clusters.space-chrome-dock-pinned.is-code-open #space-dock-cluster-panel {
  /* Code row expands; dock stays under it */
  max-height: 88px !important;
}

/* Hide permanent Chat/Files/Video/Post tabs */
.space-tabs-nav--communicator-hidden,
#space-tabs .space-tabs-nav--communicator-hidden {
  display: none !important;
}

/* Hide permanent media dock (Write/Voice/Video/Mic/Cam…) */
#space-media-dock.space-media-dock--communicator-hidden,
body.space-communicator-ui #space-media-dock {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.space-communicator-ui.space-dock-hero-active #panel-chat #chat-panel-inner .space-media-dock {
  display: none !important;
}

html.sendi-product-boot body.space-dock-hero-active #panel-chat #chat-panel-inner .space-media-dock.space-media-dock--hero,
html.sendi-product-boot body.space-dock-hero-active #panel-chat #chat-panel-inner .space-media-dock.space-media-dock--hero-settle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Cluster panels sit under the compact bar (displace title area) */
#space-tabs.space-chrome-clusters #space-code-cluster-panel,
#space-tabs.space-chrome-clusters #space-dock-cluster-panel {
  order: 2;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transform-origin: top center;
  will-change: max-height, opacity, transform;
  transition:
    max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.28s ease,
    padding 0.28s ease;
}

#space-tabs.space-chrome-clusters:not(.is-code-open) #space-code-cluster-panel,
#space-tabs.space-chrome-clusters:not(.is-dock-open) #space-dock-cluster-panel {
  max-height: 0 !important;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
  visibility: hidden;
}

#space-tabs.space-chrome-clusters.is-code-open #space-code-cluster-panel,
#space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel {
  max-height: 220px;
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  overflow: visible;
}

#space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel > .space-tabs-dock-btn,
#space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel > .space-tabs-dock-more,
#space-tabs.space-chrome-clusters.is-dock-open #space-dock-cluster-panel > .space-tabs-dock-inbox {
  animation: space-chrome-pop 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#space-tabs.space-chrome-clusters.is-code-open #space-code-cluster-panel .space-code-display,
#space-tabs.space-chrome-clusters.is-code-open #space-code-cluster-panel .space-code-picker-wrap {
  animation: space-chrome-pop 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.space-chrome-fab {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.22s ease,
    color 0.2s ease;
}

.space-chrome-fab i {
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.space-chrome-fab[aria-expanded="true"] i {
  transform: scale(1.08);
}

.space-chrome-fab--code[aria-expanded="true"] i {
  transform: rotate(-14deg) scale(1.1);
}

.space-chrome-fab--dock[aria-expanded="true"] i {
  transform: rotate(90deg) scale(1.08);
}

/* Swipe AV hint — flush to composer dock, thin so messages/bangs stay clear */
.space-swipe-av-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--space-bottom-dock-height, 112px) + var(--space-channel-overlay-height, 0px));
  z-index: 46;
  margin: 0;
  padding: 1px 12px;
  min-height: 20px;
  height: 20px;
  max-height: 20px;
  border-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 18, 28, 0.94);
  color: rgba(244, 241, 255, 0.78);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  box-sizing: border-box;
}

.space-swipe-av-hint__left,
.space-swipe-av-hint__right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.9;
}

.space-swipe-av-hint__mid {
  opacity: 0.55;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.space-swipe-recording .space-swipe-av-hint {
  background: rgba(120, 24, 24, 0.94);
  color: #ffe8e8;
  height: 22px;
  max-height: 22px;
  min-height: 22px;
}

body.space-swipe-recording-audio .space-swipe-av-hint__left {
  color: #ff8a80;
  font-weight: 700;
}

body.space-swipe-recording-video .space-swipe-av-hint__right {
  color: #82b1ff;
  font-weight: 700;
}

#panel-chat.space-swipe-armed {
  touch-action: pan-y;
}

/* Listen beside bubble; emoji glued under bubble bottom */
html body .chat-message-main > .chat-message-bubble-wrap {
  display: inline-flex !important;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  max-width: min(100%, 92%);
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
  overflow: visible !important;
}
html body .chat-message.sent .chat-message-main > .chat-message-bubble-wrap {
  flex-direction: row;
  margin-left: auto;
}
html body .chat-message.received .chat-message-main > .chat-message-bubble-wrap {
  margin-right: auto;
}
html body .chat-message-bubble-wrap > .bubble {
  margin: 0 !important;
  flex: 0 1 auto;
  max-width: 100%;
  position: relative;
  z-index: 1;
}
html body .chat-message-bubble-wrap > .chat-msg-tools {
  display: none !important;
}

/* Emoji (more) + time glued to bottom edge of bubble */
html body .chat-message-main > .chat-message-actions,
html body .chat-message:has(.space-audio-chat-card) .chat-message-actions {
  margin-top: -2px !important;
  padding-top: 0 !important;
  transform: none !important;
  gap: 2px !important;
  min-height: 0 !important;
}
html body .chat-message-actions .chat-msg-more {
  margin-top: 0 !important;
}
html body .chat-message-main > .chat-message-bubble-wrap--tasks {
  padding-top: 26px !important;
}
html body .chat-message-task-rail {
  top: 0 !important;
  height: 24px !important;
}
html body .chat-msg-task-bang {
  top: 0 !important;
}

/* Compact top chrome — New / Old / Share / star / dots */
html body #space-tabs.space-chrome-clusters .space-chrome-compact-bar {
  min-height: 34px !important;
  gap: 6px !important;
  padding: 1px 0 !important;
}
html body #space-tabs.space-chrome-clusters .space-chrome-fab,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab--code,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab--dock,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab--fav {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
}
html body #space-tabs.space-chrome-clusters .space-chrome-fab i,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab i {
  font-size: 0.78rem !important;
}
html body #space-tabs.space-chrome-clusters .space-chrome-action,
html body #space-tabs.space-chrome-clusters .space-chrome-action--new,
html body #space-tabs.space-chrome-clusters .space-chrome-action--open,
html body #space-tabs.space-chrome-clusters .space-chrome-action--passbook {
  min-height: 28px !important;
  padding: 0.18rem 0.55rem !important;
  font-size: 0.74rem !important;
  box-shadow: 0 1px 4px rgba(255, 198, 75, 0.35) !important;
}
html body #space-tabs.space-chrome-clusters .space-chrome-actions {
  gap: 5px !important;
}

/* ===== send-matched chrome — yellow pad + gold rim, like #btn-send ===== */
html body #space-tabs.space-chrome-clusters {
  --space-send-yellow: #ffc64b;
  --space-send-yellow-border: #e6ad00;
  --space-send-ink: #1a1a24;
  --space-send-hover: #a693ef;
  --space-send-hover-border: #8f7de8;
  --space-send-glow: 0 2px 10px rgba(255, 198, 75, 0.45);
  --space-send-hover-glow: 0 2px 12px rgba(166, 147, 239, 0.4);
}

html body #space-tabs #btn-space-code-picker,
html body.ios-theme #space-tabs #btn-space-code-picker,
html body.ios-theme.space-shell #space-tabs #btn-space-code-picker,
html body.ios-theme:has(.space-share) #space-tabs #btn-space-code-picker,
html body #space-tabs .space-code-picker-btn {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body #space-tabs.space-chrome-clusters .space-chrome-fab,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab--code,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab--dock,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab--fav {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 9999px !important;
  border: 2px solid var(--space-send-yellow-border) !important;
  background: var(--space-send-yellow) !important;
  background-image: none !important;
  color: var(--space-send-ink) !important;
  -webkit-text-fill-color: var(--space-send-ink) !important;
  box-shadow: var(--space-send-glow) !important;
}

html body #space-tabs.space-chrome-clusters .space-chrome-fab i,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-size: 0.78rem !important;
}

html body #space-tabs.space-chrome-clusters .space-chrome-fab--fav {
  color: rgba(26, 26, 36, 0.42) !important;
  -webkit-text-fill-color: rgba(26, 26, 36, 0.42) !important;
}
html body #space-tabs.space-chrome-clusters .space-chrome-fab--fav.is-on {
  color: var(--space-send-ink) !important;
  -webkit-text-fill-color: var(--space-send-ink) !important;
}

html body #space-tabs.space-chrome-clusters .space-chrome-fab:hover,
html body #space-tabs.space-chrome-clusters .space-chrome-fab:focus-visible,
html body #space-tabs.space-chrome-clusters .space-chrome-fab[aria-expanded="true"],
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab:hover,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab:focus-visible,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-chrome-fab[aria-expanded="true"] {
  background: var(--space-send-hover) !important;
  background-image: none !important;
  border-color: var(--space-send-hover-border) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: var(--space-send-hover-glow) !important;
  transform: none;
}

html body #space-tabs.space-chrome-clusters .space-chrome-fab--code[aria-expanded="true"] i,
html body #space-tabs.space-chrome-clusters .space-chrome-fab--dock[aria-expanded="true"] i,
html body #space-tabs.space-chrome-clusters .space-chrome-fab[aria-expanded="true"] i {
  transform: none;
}

html body #space-tabs.space-chrome-clusters .space-chrome-action,
html body #space-tabs.space-chrome-clusters .space-chrome-action--new,
html body #space-tabs.space-chrome-clusters .space-chrome-action--open,
html body #space-tabs.space-chrome-clusters .space-chrome-action--passbook {
  min-height: 28px !important;
  padding: 0.18rem 0.55rem !important;
  font-size: 0.74rem !important;
  border-radius: 9999px !important;
  border: 2px solid var(--space-send-yellow-border) !important;
  background: var(--space-send-yellow) !important;
  color: var(--space-send-ink) !important;
  -webkit-text-fill-color: var(--space-send-ink) !important;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(255, 198, 75, 0.35) !important;
}

html body #space-tabs.space-chrome-clusters .space-chrome-action:hover,
html body #space-tabs.space-chrome-clusters .space-chrome-action:focus-visible {
  background: var(--space-send-hover) !important;
  border-color: var(--space-send-hover-border) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: var(--space-send-hover-glow);
  outline: none;
}

html body #space-tabs.space-chrome-clusters #space-code.space-code-display,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters #space-code.space-code-display,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters input#space-code.space-code-display {
  border-radius: 9999px !important;
  border: 2px solid var(--space-send-yellow-border) !important;
  border-right: 2px solid var(--space-send-yellow-border) !important;
  background: #fff8e1 !important;
  color: var(--space-send-ink) !important;
  -webkit-text-fill-color: var(--space-send-ink) !important;
  padding: 0 12px !important;
}

html body #space-tabs.space-chrome-clusters .space-code-picker-wrap {
  gap: 6px;
  margin-left: 6px;
  align-items: center !important;
}

html body #space-tabs.space-chrome-clusters .space-code-copy-btn,
html body #space-tabs.space-chrome-clusters .space-code-share-btn,
html body #space-tabs.space-chrome-clusters .space-code-rename-btn,
html body.ios-theme #space-tabs.space-chrome-clusters .space-code-copy-btn,
html body.ios-theme #space-tabs.space-chrome-clusters .space-code-share-btn,
html body.ios-theme #space-tabs.space-chrome-clusters .space-code-rename-btn,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-code-copy-btn,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-code-share-btn,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-code-rename-btn {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  border-radius: 9999px !important;
  border: 2px solid var(--space-send-yellow-border) !important;
  border-left: 2px solid var(--space-send-yellow-border) !important;
  background: var(--space-send-yellow) !important;
  background-image: none !important;
  color: var(--space-send-ink) !important;
  -webkit-text-fill-color: var(--space-send-ink) !important;
  box-shadow: var(--space-send-glow) !important;
}

html body #space-tabs.space-chrome-clusters .space-code-copy-btn i,
html body #space-tabs.space-chrome-clusters .space-code-share-btn i,
html body #space-tabs.space-chrome-clusters .space-code-rename-btn i,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-code-copy-btn i,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-code-share-btn i,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-code-rename-btn i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

html body #space-tabs.space-chrome-clusters .space-code-copy-btn:hover,
html body #space-tabs.space-chrome-clusters .space-code-copy-btn:focus-visible,
html body #space-tabs.space-chrome-clusters .space-code-share-btn:hover,
html body #space-tabs.space-chrome-clusters .space-code-share-btn:focus-visible,
html body #space-tabs.space-chrome-clusters .space-code-rename-btn:hover,
html body #space-tabs.space-chrome-clusters .space-code-rename-btn:focus-visible,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-code-copy-btn:hover,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-code-share-btn:hover,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-code-rename-btn:hover {
  background: var(--space-send-hover) !important;
  background-image: none !important;
  border-color: var(--space-send-hover-border) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: var(--space-send-hover-glow) !important;
  transform: none;
}

html body #space-tabs.space-chrome-clusters .space-tabs-dock-btn,
html body #space-tabs.space-chrome-clusters .space-tabs-bar .space-tabs-dock-more > summary.space-tabs-dock-btn,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--open,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--new,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--favorites,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--more,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--close {
  border-radius: 9999px !important;
  border: 2px solid var(--space-send-yellow-border) !important;
  background: var(--space-send-yellow) !important;
  background-image: none !important;
  color: var(--space-send-ink) !important;
  -webkit-text-fill-color: var(--space-send-ink) !important;
  box-shadow: var(--space-send-glow) !important;
  min-height: 36px !important;
  max-height: none !important;
  padding: 0 12px !important;
}

html body #space-tabs.space-chrome-clusters .space-tabs-dock-btn i,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn i,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--open i,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--new i,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--favorites i,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--more i {
  background: transparent !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

html body #space-tabs.space-chrome-clusters .space-tabs-dock-btn:hover,
html body #space-tabs.space-chrome-clusters .space-tabs-dock-btn:focus-visible,
html body #space-tabs.space-chrome-clusters .space-tabs-bar .nav-dropdown.space-more[open] > summary.space-tabs-dock-btn--more,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn:hover,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn:focus-visible,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--open:hover,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--new:hover,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--favorites:hover,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--more:hover {
  background: var(--space-send-hover) !important;
  background-image: none !important;
  border-color: var(--space-send-hover-border) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: var(--space-send-hover-glow) !important;
}

html body #space-tabs.space-chrome-clusters .space-tabs-dock-btn:hover i,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn:hover i {
  color: inherit !important;
  background: transparent !important;
}

html body #space-tabs.space-chrome-clusters #btn-space-dock-new,
html body #space-tabs.space-chrome-clusters .space-tabs-dock-btn--new,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters #btn-space-dock-new,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-btn--new,
html body #space-tabs #btn-space-dock-new,
html body #space-tabs .space-tabs-dock-btn--new {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body #space-tabs.space-chrome-clusters .space-tabs-bar--dock5 .space-tabs-dock-more > summary.space-tabs-dock-btn--more::before {
  content: none !important;
  display: none !important;
}

html body #space-tabs.space-chrome-clusters .space-tabs-dock-inbox,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters #find-inbox-slot.space-tabs-dock-inbox,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters #space-dock-cluster-panel #find-inbox-slot.space-tabs-dock-inbox {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  gap: 0 !important;
}

html body #space-tabs.space-chrome-clusters .space-tabs-dock-inbox .find-inbox-bell ~ .find-inbox-bell {
  display: none !important;
}

html body #space-tabs.space-chrome-clusters .space-tabs-dock-inbox .find-inbox-bell,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters .space-tabs-dock-inbox .find-inbox-bell {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 9999px !important;
  border: 2px solid var(--space-send-yellow-border) !important;
  background: var(--space-send-yellow) !important;
  background-image: none !important;
  color: var(--space-send-ink) !important;
  box-shadow: var(--space-send-glow) !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

html body #space-tabs.space-chrome-clusters .space-tabs-dock-inbox .find-inbox-bell:hover,
html body #space-tabs.space-chrome-clusters .space-tabs-dock-inbox .find-inbox-bell:focus-visible {
  background: var(--space-send-hover) !important;
  border-color: var(--space-send-hover-border) !important;
  color: #ffffff !important;
  box-shadow: var(--space-send-hover-glow) !important;
}

html body #space-tabs.space-chrome-clusters .space-tabs-dock-more,
html body.ios-theme.space-shell #space-tabs.space-chrome-clusters #space-dock-cluster-panel > .space-tabs-dock-more {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* TTS 2× mid-left of balloon; smile sits on the bottom-left corner */
html body .chat-message-bubble-host {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  overflow: visible !important;
}
html body .chat-message-bubble-host > .chat-msg-edge-rail,
html body .chat-message-bubble-wrap > .chat-msg-edge-rail {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 6 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .chat-msg-edge-rail .chat-msg-tools,
html body .chat-msg-edge-rail .chat-msg-more {
  pointer-events: auto !important;
}
html body .chat-msg-edge-rail .chat-msg-tools {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}
html body .chat-msg-edge-rail .chat-msg-tool--tts,
html body .chat-msg-edge-rail .chat-msg-tool--stt {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: 1.36rem !important;
}
html body .chat-msg-edge-rail .chat-msg-tool--tts i,
html body .chat-msg-edge-rail .chat-msg-tool--stt i {
  font-size: 1.36rem !important;
  line-height: 1 !important;
}
html body .chat-msg-edge-rail .chat-msg-tools {
  z-index: 7 !important;
}
html body .chat-msg-edge-rail .chat-msg-more {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex !important;
  margin: 0 !important;
  transform: none !important;
  flex-direction: row !important;
  z-index: 8 !important;
}
/* Sent balloons round the bottom-left (16px). Inset the smile onto that corner. */
html body .chat-message.sent .chat-msg-edge-rail .chat-msg-more {
  left: 8px !important;
  bottom: 8px !important;
  flex-direction: row !important;
}
html body .chat-msg-edge-rail .chat-msg-tool--more {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body .chat-msg-edge-rail .chat-msg-more__panel {
  position: absolute !important;
  left: calc(100% + 4px) !important;
  bottom: 0 !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  transform: translateX(-4px) scale(0.96) !important;
  transform-origin: left bottom !important;
  z-index: 8 !important;
}
html body .chat-msg-edge-rail .chat-msg-more.is-open .chat-msg-more__panel {
  transform: translateX(0) scale(1) !important;
  margin: 0 !important;
}
html body .chat-message.sent .chat-msg-edge-rail .chat-msg-more__panel {
  left: calc(100% + 4px) !important;
  right: auto !important;
  transform-origin: left bottom !important;
}
html body .chat-message.sent:has(.chat-msg-edge-rail) .chat-message-reaction-badge {
  right: calc(100% + 36px) !important;
}

/* SENDi new-chat start — Instant orb look, stays on /SENDi!/ */
html body .sendi-new-start {
  position: fixed;
  inset: 0;
  z-index: 118000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 72px 20px 28px;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 198, 75, 0.16), transparent 52%),
    #050408;
  color: #fff;
}
html body .sendi-new-start.hidden,
html body .sendi-new-start[hidden] {
  display: none !important;
}
html body .sendi-new-start__brand {
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}
html body .sendi-new-start__dismiss {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  cursor: pointer;
}
html body .sendi-new-start__lead {
  margin: 0 0 14px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
html body .sendi-gate-panel {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
html body .sendi-gate-panel.hidden,
html body .sendi-gate-panel[hidden] {
  display: none !important;
}
html body .sendi-new-start__code-card {
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 198, 75, 0.45);
  background: rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
}
html body .sendi-new-start__code-label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 216, 106, 0.85);
}
html body .sendi-new-start__code-full {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffd86a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.04em;
  word-break: break-word;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
html body .sendi-new-start__hint {
  margin: 12px 0 0;
  max-width: 320px;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}
html body .sendi-new-start__orb--static {
  pointer-events: none;
  opacity: 0.55;
}
html body .sendi-gate-panel--open .sendi-new-start__join-field {
  width: 100%;
  margin-bottom: 12px;
}
html body .sendi-new-start__reel {
  position: relative;
  width: min(248px, 46vw);
  height: min(248px, 46vw);
  margin: 8px auto 12px;
}
html body .sendi-new-start__orb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  animation: sendi-new-orb-float 3.4s ease-in-out infinite;
}
html body .sendi-new-start__ring,
html body .sendi-new-start__pulse,
html body .sendi-new-start__core,
html body .sendi-new-start__label {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
html body .sendi-new-start__ring,
html body .sendi-new-start__pulse,
html body .sendi-new-start__label {
  inset: 0;
}
html body .sendi-new-start__core {
  inset: 18%;
  background: radial-gradient(
    circle at 34% 26%,
    #ffffff 0%,
    #fff6d4 14%,
    #ffc64b 38%,
    #f5a623 68%,
    #d48806 100%
  );
  box-shadow:
    0 0 42px rgba(255, 198, 75, 0.52),
    0 12px 32px rgba(0, 0, 0, 0.3),
    inset 0 5px 14px rgba(255, 255, 255, 0.5),
    inset 0 -8px 16px rgba(180, 120, 0, 0.28);
}
html body .sendi-new-start__ring {
  border: 2px solid rgba(255, 224, 138, 0.45);
  animation: sendi-new-orb-pulse 2.5s ease-in-out infinite;
}
html body .sendi-new-start__pulse {
  inset: -8%;
  border: 1px solid rgba(255, 198, 75, 0.28);
  animation: sendi-new-orb-scan 2.8s ease-in-out infinite;
}
html body .sendi-new-start__label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1528;
  -webkit-text-fill-color: #1a1528;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
html body .sendi-new-start__join {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
html body .sendi-new-start__join-lead {
  margin: 0;
  text-align: center;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
}
html body .sendi-new-start__join-field {
  display: flex;
  gap: 8px;
}
html body .sendi-new-start__join-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  padding: 0 14px;
  font-size: 1rem;
  font-weight: 600;
}
html body .sendi-new-start__join-go {
  height: 48px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: #f5a623;
  color: #1a1528;
  font-weight: 800;
  cursor: pointer;
}
html body .sendi-new-start__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
html body .sendi-new-start__chip {
  appearance: none;
  border: 1px solid rgba(255, 198, 75, 0.45);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffd86a;
  background: rgba(255, 198, 75, 0.14);
  cursor: pointer;
}
html body .sendi-new-start__chip.hidden,
html body .sendi-new-start__chip[hidden] {
  display: none !important;
}
html body .sendi-new-start__chip--link {
  border-color: rgba(166, 147, 239, 0.5);
  color: #ece8ff;
  background: rgba(166, 147, 239, 0.2);
}
html body .sendi-new-start__chip:disabled {
  opacity: 0.45;
  cursor: wait;
}
html body .sendi-new-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 130050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
html body .sendi-new-qr-modal.hidden,
html body .sendi-new-qr-modal[hidden] {
  display: none !important;
}
html body .sendi-new-qr-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 16, 0.72);
}
html body .sendi-new-qr-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  max-height: min(92dvh, 720px);
  overflow: auto;
  padding: 18px 16px 16px;
  border-radius: 18px;
  background: #2a1d45;
  border: 1px solid rgba(166, 147, 239, 0.4);
  color: #f8f6ff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  text-align: center;
}
html body .sendi-new-qr-modal__panel h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 800;
}
html body .sendi-new-qr-modal__lead {
  margin: 0 0 12px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(248, 246, 255, 0.72);
}
html body .sendi-new-qr-modal__code {
  display: block;
  margin: 0 auto 12px;
  padding: 8px 10px;
  max-width: 100%;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 198, 75, 0.35);
  color: #ffd86a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  word-break: break-all;
}
html body .sendi-new-qr-modal__host {
  display: flex;
  justify-content: center;
  margin: 0 auto 14px;
  padding: 10px;
  width: fit-content;
  max-width: 100%;
  border-radius: 12px;
  background: #fff;
}
html body .sendi-new-qr-modal__host img,
html body .sendi-new-qr-modal__host canvas {
  display: block;
  max-width: 168px;
  height: auto;
}
html body .sendi-new-qr-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}
html body .sendi-new-qr-modal__btn {
  appearance: none;
  border: 1px solid rgba(166, 147, 239, 0.45);
  border-radius: 999px;
  padding: 9px 14px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #f8f6ff;
  background: rgba(166, 147, 239, 0.22);
  cursor: pointer;
}
html body .sendi-new-qr-modal__btn--primary {
  border-color: rgba(255, 198, 75, 0.55);
  background: rgba(255, 198, 75, 0.22);
  color: #ffd86a;
}
html body .sendi-new-qr-modal__btn--open {
  width: 100%;
  margin-bottom: 8px;
  border-color: rgba(255, 198, 75, 0.55);
  background: linear-gradient(165deg, #ffe082, #ffc64b);
  color: #1a1a24;
}
html body .sendi-new-qr-modal__btn--ghost {
  width: 100%;
  background: transparent;
  border-color: rgba(248, 246, 255, 0.22);
  color: rgba(248, 246, 255, 0.78);
}
html body .sendi-new-scan__video {
  display: block;
  width: 100%;
  max-height: 48vh;
  margin: 0 0 12px;
  border-radius: 12px;
  background: #000;
  object-fit: cover;
}
html body .sendi-new-scan__error {
  margin: 0 0 10px;
  color: #ffb4a9;
  font-size: 0.84rem;
}
@keyframes sendi-new-orb-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.02); }
}
@keyframes sendi-new-orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes sendi-new-orb-scan {
  0%, 100% { transform: scale(1); opacity: 0.25; }
  50% { transform: scale(1.12); opacity: 0.7; }
}