/**
 * ChatCrack iOS shell — CCAPP-mirrored layout.
 * Only active when html.cc-ios-shell is set (iPhone / iPad Safari).
 */

html.cc-ios-shell-pending .app,
html.cc-ios-shell-pending .top {
  visibility: hidden;
}

/* Never show landscape nudge or shekels "Click Me" on iOS shell */
html.cc-ios-shell-pending #ccRotateOverlay,
html.cc-ios-shell #ccRotateOverlay,
html.cc-ios-shell-pending #shekelNudge,
html.cc-ios-shell #shekelNudge {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.cc-ios-shell {
  --cc-ios-bg: #090e1a;
  --cc-ios-bg-grad: #0d1628;
  --cc-ios-surface: #111d33;
  --cc-ios-surface-high: #172540;
  --cc-ios-border: #2a4060;
  --cc-ios-text: #dde6f5;
  --cc-ios-muted: #8fa3c0;
  --cc-ios-dim: #4e6685;
  --cc-ios-blue: #60a5fa;
  --cc-ios-green: #34d399;
  --cc-ios-danger: #f87171;
  --cc-ios-vv-height: 100dvh;
  --cc-ios-vv-offset: 0px;
  --cc-ios-kb-inset: 0px;
  --cc-ios-bottom-stack-h: 0px;
  height: 100%;
  position: fixed;
  width: 100%;
  overflow: hidden;
}

html.cc-ios-shell body {
  background: var(--cc-ios-bg);
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

html.cc-ios-shell .scale-fit-container {
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html.cc-ios-shell .scale-fit-viewport {
  width: 100vw !important;
  height: 100% !important;
  max-height: 100% !important;
  transform: none !important;
  overflow: hidden !important;
}

html.cc-ios-shell .viewport {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, var(--cc-ios-bg-grad) 0%, var(--cc-ios-bg) 40%, var(--cc-ios-bg) 100%);
}

html.cc-ios-shell #ccIosShell {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--cc-ios-text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html.cc-ios-shell .viewport > #ccIosShell {
  flex: 1 1 0;
  min-height: 0;
}

html.cc-ios-shell .cc-ios-header,
html.cc-ios-shell .cc-ios-media-toolbar,
html.cc-ios-shell .cc-ios-openmic-slot,
html.cc-ios-shell .cc-ios-tabs {
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

html.cc-ios-shell .cc-ios-media-toolbar {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  background: var(--cc-ios-surface);
  border-bottom: 1px solid var(--cc-ios-border);
  min-height: 68px;
}

html.cc-ios-shell .cc-ios-shell-footer {
  flex: 0 0 auto;
  z-index: 25;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html.cc-ios-shell .cc-ios-shell-footer #guestBanner {
  display: none !important;
  border-radius: 14px 14px 0 0 !important;
}

html.cc-ios-shell .cc-ios-shell-footer #guestBanner.cc-guest-banner-visible {
  display: flex !important;
}

/* ── Header ── */
html.cc-ios-shell .cc-ios-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(env(safe-area-inset-top), 8px) 12px 8px;
  background: rgba(9, 14, 26, 0.97);
  border-bottom: 1px solid var(--cc-ios-border);
}

html.cc-ios-shell .cc-ios-back,
html.cc-ios-shell .cc-ios-menu-btn {
  flex: 0 0 auto;
  border: 1px solid var(--cc-ios-border);
  background: var(--cc-ios-surface-high);
  color: var(--cc-ios-text);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

html.cc-ios-shell .cc-ios-header-center {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

html.cc-ios-shell .cc-ios-room-name {
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.cc-ios-shell .cc-ios-room-stats {
  font-size: 12px;
  color: var(--cc-ios-muted);
  margin-top: 2px;
}

/* ── Media toolbar (CAM | MIC | Shekels) — duplicate rule removed; see above ── */
html.cc-ios-shell .cc-ios-media-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, #37474f, #455a64);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  padding: 6px 4px;
  position: relative;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html.cc-ios-shell .cc-ios-media-btn.is-cam {
  background: linear-gradient(135deg, #1565c0, #29b6f6);
}

html.cc-ios-shell .cc-ios-media-btn.is-cam.live {
  background: linear-gradient(135deg, #00c853, #00e676);
}

html.cc-ios-shell .cc-ios-media-btn.is-mic {
  background: linear-gradient(135deg, #37474f, #455a64);
}

html.cc-ios-shell .cc-ios-media-btn.is-mic.on {
  background: linear-gradient(135deg, #2e7d32, #43a047);
}

html.cc-ios-shell .cc-ios-media-btn.is-shekels {
  background: linear-gradient(135deg, #6a1b9a, #8e24aa);
}

html.cc-ios-shell .cc-ios-media-btn svg {
  width: 18px;
  height: 18px;
}

html.cc-ios-shell .top,
html.cc-ios-shell .app {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.cc-ios-shell .cc-ios-media-slot > button,
html.cc-ios-shell .cc-ios-media-slot > .open-mic-inline-wrap {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ── Open mic panel slot ── */
html.cc-ios-shell .cc-ios-openmic-slot {
  flex: 0 0 auto;
  background: var(--cc-ios-surface-high);
  border-bottom: 1px solid var(--cc-ios-border);
}

html.cc-ios-shell .cc-ios-openmic-slot:not(.expanded) {
  display: none !important;
  border: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}

html.cc-ios-shell .cc-ios-openmic-slot.expanded {
  display: block !important;
  padding: 0 !important;
}

html.cc-ios-shell .cc-ios-openmic-slot:not(.expanded) #openMicExpandedPanel,
html.cc-ios-shell .cc-ios-openmic-slot:not(.expanded) #omcMemberPanel,
html.cc-ios-shell .cc-ios-openmic-slot:not(.expanded) #omcChannelBar,
html.cc-ios-shell .cc-ios-openmic-slot:not(.expanded) .cc-ios-mic-help-btn {
  display: none !important;
}

html.cc-ios-shell .cc-ios-openmic-slot.expanded #omcChannelBar {
  display: flex !important;
  padding: 8px 10px;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

html.cc-ios-shell .cc-ios-openmic-slot.expanded #openMicExpandedPanel {
  display: block !important;
  padding: 0 10px 10px;
}

html.cc-ios-shell .cc-ios-openmic-slot.expanded #openMicExpandedPanel.is-expanded,
html.cc-ios-shell .cc-ios-openmic-slot.expanded #openMicExpandedPanel {
  max-height: none !important;
  overflow: visible !important;
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicSettingsPanel {
  display: none !important;
}

html.cc-ios-shell .cc-ios-openmic-slot .open-mic-ptt-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 !important;
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicPttBtn {
  flex: 2 1 0 !important;
  min-height: 56px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  background: rgba(41, 121, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicPttBtn.is-holding {
  background: #2e7d32 !important;
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicVoiceActivationLabel {
  flex: 1 1 0 !important;
  min-height: 56px !important;
  border-radius: 12px !important;
  border: 1px solid var(--cc-ios-border) !important;
  background: var(--cc-ios-surface) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicVoiceActivationLabel span {
  font-size: 0 !important;
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicVoiceActivationLabel span::after {
  content: 'MIC HOLD';
  font-size: 11px !important;
  font-weight: 800 !important;
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicVoiceActivationLabel:has(#openMicVoiceActivation:checked) {
  background: #2e7d32 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicPttAssignBtn,
html.cc-ios-shell .cc-ios-openmic-slot #openMicPttTimer {
  display: none !important;
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicPttHint {
  display: none !important;
}

html.cc-ios-shell .cc-ios-mic-help-btn {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  border: 1px solid var(--cc-ios-border);
  background: var(--cc-ios-surface);
  color: var(--cc-ios-text);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

html.cc-ios-shell .cc-ios-media-label-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

html.cc-ios-shell .cc-ios-mic-expand {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

html.cc-ios-shell .cc-ios-media-btn.is-mic.panel-open .cc-ios-mic-expand {
  transform: rotate(180deg);
}

/* ── iOS webcam setup dialog (centered, topmost layer) ── */
html.cc-ios-shell #ccIosWebcamBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

html.cc-ios-shell #ccIosWebcamBackdrop.open {
  display: block;
}

html.cc-ios-shell.cc-ios-webcam-open #ccIosShell,
html.cc-ios-shell.cc-ios-webcam-open #ccIosShell * {
  pointer-events: none;
}

html.cc-ios-shell.cc-ios-webcam-open #webcamModal,
html.cc-ios-shell.cc-ios-webcam-open #webcamModal * {
  pointer-events: auto;
}

html.cc-ios-shell body.webcam-modal-open #ccFloatingMediaLayer::before,
html.cc-ios-shell.cc-ios-webcam-open #ccFloatingMediaLayer::before {
  display: none !important;
  content: none !important;
  pointer-events: none !important;
}

html.cc-ios-shell body.webcam-modal-open #ccFloatingMediaLayer,
html.cc-ios-shell.cc-ios-webcam-open #ccFloatingMediaLayer {
  pointer-events: none !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal.webcam-modal,
html.cc-ios-shell.cc-ios-webcam-open #webcamModal.webcam-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  touch-action: auto !important;
  pointer-events: auto !important;
  width: min(360px, 92vw) !important;
  max-width: 92vw !important;
  min-width: 280px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(92dvh, 680px) !important;
  margin: 0 !important;
  border-radius: 16px !important;
  border: 1px solid var(--cc-ios-border) !important;
  background: var(--cc-ios-surface) !important;
  z-index: 2147483647 !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65) !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-modal-header {
  padding: 14px 14px 6px !important;
  border-bottom: none !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-modal-title {
  font-size: 20px !important;
  font-weight: 800 !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-modal-header-actions {
  gap: 6px !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-modal-collapse,
html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-modal-settings,
html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-modal-resize,
html.cc-ios-shell body.webcam-modal-open #webcamModal #mediasoupStatus {
  display: none !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-modal-content {
  padding: 0 14px max(14px, env(safe-area-inset-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-modal-content::before {
  content: 'Preview — start when ready';
  display: block;
  font-size: 13px;
  color: var(--cc-ios-muted);
  margin-bottom: 2px;
  flex-shrink: 0;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-preview-container,
html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-preview {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 160px !important;
  max-height: 200px !important;
  height: 200px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-controls .hidden {
  display: none !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamAudioBtn,
html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamLockToggleBtn {
  min-height: 44px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-controls-audio-lock {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .cc-ios-flip-cam-btn {
  order: unset !important;
  grid-column: unset !important;
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  background: var(--cc-ios-surface-high) !important;
  color: var(--cc-ios-text) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border: 1px solid var(--cc-ios-border) !important;
  flex-shrink: 0 !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamStartBtn {
  order: unset !important;
  grid-column: unset !important;
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 12px !important;
  background: var(--cc-ios-green) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 0 !important;
  border: none !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamStartBtn::before {
  content: 'Start broadcasting';
  font-size: 15px;
  line-height: 1.2;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamStopBtn,
html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamCameraOffBtn {
  display: none !important;
}

html.cc-ios-shell.cc-apple-guest-cam body.webcam-modal-open #webcamModal .webcam-visibility-btn[data-mode="friends_only"],
html.cc-ios-shell.cc-apple-guest-cam body.webcam-modal-open #webcamModal .webcam-visibility-btn[data-mode="ppv"] {
  display: none !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamLockToggleBtn.cc-apple-guest-lock-disabled,
html.cc-ios-shell.cc-apple-guest-cam body.webcam-modal-open #webcamModal #webcamLockToggleBtn {
  opacity: 0.35 !important;
  pointer-events: none !important;
  filter: grayscale(1);
}

html.cc-ios-shell .cc-ios-media-btn.live .cc-ios-media-label {
  font-size: 10px;
  line-height: 1.1;
  max-width: 72px;
  text-align: center;
  white-space: normal;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-visibility-row {
  order: unset !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-modal-close {
  font-size: 0 !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-modal-close::after {
  content: 'Close';
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ios-muted);
}

/* ── Tabs ── */
html.cc-ios-shell .cc-ios-tabs {
  flex: 0 0 auto;
  display: flex;
  background: var(--cc-ios-surface);
  border-bottom: 1px solid var(--cc-ios-border);
}

html.cc-ios-shell .cc-ios-tab {
  flex: 1 1 0;
  border: none;
  background: transparent;
  color: var(--cc-ios-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 4px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

html.cc-ios-shell .cc-ios-tab-icon {
  font-size: 15px;
  line-height: 1;
}

html.cc-ios-shell .cc-ios-tab-text {
  line-height: 1.2;
  white-space: nowrap;
}

html.cc-ios-shell .cc-ios-tab.active {
  color: var(--cc-ios-blue);
}

html.cc-ios-shell .cc-ios-tab.active::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 2px;
  background: var(--cc-ios-blue);
  border-radius: 2px 2px 0 0;
}

html.cc-ios-shell .cc-ios-tab.has-unread {
  animation: cc-ios-inbox-pulse 1.2s ease-in-out infinite alternate;
}

html.cc-ios-shell .cc-ios-tab.has-unread .cc-ios-tab-text {
  font-weight: 800;
}

@keyframes cc-ios-inbox-pulse {
  from { color: var(--cc-ios-muted); }
  to { color: #00e5ff; }
}

/* ── Main row: cam dock + tab panels ── */
html.cc-ios-shell .cc-ios-main-row {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

html.cc-ios-shell .cc-ios-main-row.dock-side {
  flex-direction: row;
}

html.cc-ios-shell .cc-ios-main-row.dock-top {
  flex-direction: column;
}

/* Cam dock — hidden entirely when no live cams (matches CCAPP) */
html.cc-ios-shell .cc-ios-cam-dock {
  flex: 0 0 auto;
  display: none;
  background: rgba(9, 14, 26, 0.95);
  min-width: 0;
  min-height: 0;
}

html.cc-ios-shell .cc-ios-cam-dock.has-cams {
  display: flex;
}

html.cc-ios-shell .cc-ios-cam-dock.is-empty {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Side dock — full height of chat column (Main Chat tab) */
html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock.has-cams {
  flex-direction: column;
  align-self: stretch;
  width: 82px;
  max-width: 82px;
  height: auto;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-right: 1px solid var(--cc-ios-border);
}

/* Top dock — horizontal strip (Messages / Users tabs) */
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock.has-cams {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  max-height: 64px;
  gap: 6px;
  padding: 4px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--cc-ios-border);
}

html.cc-ios-shell .cc-ios-cam-dock #webcamPanel {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock #webcamPanel {
  flex-direction: column !important;
  width: 100% !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock #webcamPanel {
  display: contents !important;
}

html.cc-ios-shell .cc-ios-cam-dock #miniCamDock {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: static !important;
  width: auto !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock #miniCamDock {
  flex-direction: column !important;
  width: 100% !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock #miniCamDock {
  display: contents !important;
}

html.cc-ios-shell .cc-ios-cam-dock #miniCamDock.cc-ios-strip-empty {
  display: none !important;
}

html.cc-ios-shell .cc-ios-cam-dock .mini-cam-slot:not(:has(.webcam-dock)):not(:has(.screen-dock)) {
  display: none !important;
}

html.cc-ios-shell .cc-ios-cam-dock .mini-cam-slot::before {
  display: none !important;
}

/* CCAPP-style compact square tiles */
html.cc-ios-shell .cc-ios-cam-dock .webcam-dock,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 70px !important;
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--cc-ios-border) !important;
  background: #000 !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock.active,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock.active {
  border: 2px solid var(--cc-ios-green) !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-video,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .screen-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-video video,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .screen-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-video,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .screen-video,
html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-video video,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .screen-video video {
  pointer-events: none !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .dock-head,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .dock-head {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  pointer-events: none !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .dock-title,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .dock-title {
  position: absolute !important;
  left: 2px !important;
  right: 26px !important;
  bottom: 2px !important;
  top: auto !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  color: #fff !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
  pointer-events: none !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .dock-close,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .screen-dock-close {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  bottom: auto !important;
  left: auto !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.72) !important;
  color: #fff !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .dock-close:active,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .screen-dock-close:active {
  background: rgba(255, 107, 107, 0.85) !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-favourite,
html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-detach,
html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-attach-mini,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .screen-dock-detach {
  display: none !important;
}

html.cc-ios-shell .cc-ios-cam-dock .mini-cam-slot {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
  flex: 0 0 70px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

html.cc-ios-shell .cc-ios-cam-dock .mini-cam-slot .webcam-dock,
html.cc-ios-shell .cc-ios-cam-dock .mini-cam-slot .screen-dock {
  position: absolute !important;
  inset: 0 !important;
}

/* Horizontal strip uses smaller tiles (CCAPP WebcamDockRow) */
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .screen-dock,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .mini-cam-slot {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  flex: 0 0 56px !important;
}

html.cc-ios-shell .cc-ios-tab-panels {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

html.cc-ios-shell .cc-ios-tab-panel {
  display: none;
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

html.cc-ios-shell .cc-ios-tab-panel.active {
  display: flex;
}

/* ── Main chat tab (CCAPP composer — no toolbar) ── */
html.cc-ios-shell #ccIosTabChat #pollsBar {
  display: none !important;
}

html.cc-ios-shell #ccIosTabChat.active {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.cc-ios-shell #ccIosTabChat:not(.active) {
  display: none !important;
}

html.cc-ios-shell:not(.cc-ios-tab-chat) #chat,
html.cc-ios-shell:not(.cc-ios-tab-chat) #composer,
html.cc-ios-shell:not(.cc-ios-tab-chat) .cc-ios-bottom-stack {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.cc-ios-shell.cc-ios-tab-chat,
html.cc-ios-shell.cc-ios-tab-chat body,
html.cc-ios-shell.cc-ios-tab-chat .scale-fit-container,
html.cc-ios-shell.cc-ios-tab-chat .scale-fit-viewport,
html.cc-ios-shell.cc-ios-tab-chat .viewport,
html.cc-ios-shell.cc-ios-tab-chat #ccIosShell,
html.cc-ios-shell.cc-ios-tab-chat .cc-ios-main-row,
html.cc-ios-shell.cc-ios-tab-chat .cc-ios-tab-panels {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  max-height: 100% !important;
}

html.cc-ios-shell #ccIosTabChat #chat,
html.cc-ios-shell #ccIosTabChat #chat.chat-scroll {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 8px 10px !important;
  padding-bottom: 8px !important;
  background: transparent !important;
  border: none !important;
}

html.cc-ios-shell #ccIosTabChat .composer.cc-ios-composer {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 20 !important;
  background: rgba(9, 14, 26, 0.97) !important;
  border-top: 1px solid var(--cc-ios-border) !important;
  padding: 6px 8px 6px !important;
  flex-shrink: 0 !important;
}

html.cc-ios-shell #ccIosTabChat .cc-ios-bottom-stack {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  z-index: 30;
  flex-shrink: 0;
}

html.cc-ios-shell.cc-ios-kb-open.cc-ios-tab-chat #composer.cc-ios-composer,
html.cc-ios-shell.cc-ios-main-focus.cc-ios-tab-chat #composer.cc-ios-composer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 99990 !important;
  margin: 0 !important;
  border-top: 1px solid var(--cc-ios-border) !important;
  padding: 6px 8px max(6px, env(safe-area-inset-bottom)) !important;
  background: rgba(9, 14, 26, 0.98) !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45) !important;
}

/* iPad: keyboard does not resize layout viewport — pin composer above keyboard */
html.cc-ios-shell.cc-ios-ipad.cc-ios-kb-open.cc-ios-tab-chat #composer.cc-ios-composer,
html.cc-ios-shell.cc-ios-ipad.cc-ios-main-focus.cc-ios-tab-chat #composer.cc-ios-composer {
  bottom: var(--cc-ios-kb-inset, 0px) !important;
}

html.cc-ios-shell.cc-ios-ipad.cc-ios-kb-open.cc-ios-tab-chat #ccIosTabChat #chat,
html.cc-ios-shell.cc-ios-ipad.cc-ios-main-focus.cc-ios-tab-chat #ccIosTabChat #chat {
  padding-bottom: calc(80px + var(--cc-ios-kb-inset, 0px)) !important;
  scroll-padding-bottom: calc(80px + var(--cc-ios-kb-inset, 0px)) !important;
}

html.cc-ios-shell.cc-ios-kb-open.cc-ios-tab-chat #ccIosTabChat #chat,
html.cc-ios-shell.cc-ios-main-focus.cc-ios-tab-chat #ccIosTabChat #chat {
  padding-bottom: 80px !important;
  scroll-padding-bottom: 80px !important;
}

html.cc-ios-shell.cc-ios-dm-focus .cc-ios-dm-thread-body .dmCompose {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 30 !important;
  background: rgba(9, 14, 26, 0.98) !important;
  padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
}

html.cc-ios-shell.cc-ios-kb-open:not(.cc-ios-ipad) #ccIosTabChat #chat {
  scroll-padding-bottom: 12px;
}

html.cc-ios-shell #ccIosTabChat #guestBanner {
  display: none !important;
}

html.cc-ios-shell #ccIosTabChat #guestBanner.cc-guest-banner-visible {
  display: none !important;
}

html.cc-ios-shell #ccIosTabChat .composer > .toolbar {
  display: none !important;
}

html.cc-ios-shell #ccIosTabChat .composer .input-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  border: 1px solid var(--cc-ios-border) !important;
  border-radius: 24px !important;
  background: var(--cc-ios-surface-high) !important;
  padding: 4px 6px 4px 2px !important;
}

html.cc-ios-shell #ccIosTabChat #atMentionIndicator,
html.cc-ios-shell #ccIosTabChat #atMentionDropdown,
html.cc-ios-shell #ccIosTabChat #jailTimerBar {
  display: none !important;
}

html.cc-ios-shell #ccIosTabChat .msg-compose-col {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

html.cc-ios-shell #ccIosTabChat #msg {
  width: 100% !important;
  min-height: 40px !important;
  max-height: 88px !important;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  padding: 8px 10px !important;
  resize: none !important;
  box-shadow: none !important;
}

html.cc-ios-shell #ccIosTabChat #msg::placeholder {
  color: var(--cc-ios-dim) !important;
}

html.cc-ios-shell .cc-ios-composer-attach {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--cc-ios-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

html.cc-ios-shell #ccIosTabChat #send {
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--cc-ios-blue) !important;
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

html.cc-ios-shell #ccIosTabChat #send::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23090e1a'%3E%3Cpath d='M2.01 21 23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}

html.cc-ios-shell #ccIosShellFooter #guestBanner.cc-guest-banner-visible {
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, #0e1530 0%, #111a38 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: none !important;
  border-radius: 14px 14px 0 0 !important;
}

html.cc-ios-shell #ccIosShellFooter #guestBannerHeadline {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.cc-ios-shell #ccIosShellFooter #guestBannerSubline {
  font-size: 11px !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
  color: var(--cc-ios-muted) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.cc-ios-shell #ccIosShellFooter #guestBanner > div:first-child {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

html.cc-ios-shell #ccIosShellFooter #guestBanner > div:last-child {
  flex: 0 0 auto !important;
  gap: 8px !important;
}

html.cc-ios-shell #ccIosShellFooter #guestBannerRegister {
  background: var(--cc-ios-green) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  border: none !important;
}

html.cc-ios-shell #ccIosShellFooter #guestBannerLogin {
  border-radius: 20px !important;
  border: 1px solid var(--cc-ios-blue) !important;
  background: transparent !important;
  color: var(--cc-ios-blue) !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
}

html.cc-ios-shell #ccIosShellFooter #guestBannerClose {
  display: none !important;
}

html.cc-ios-shell .cc-ios-dm-thread[hidden],
html.cc-ios-shell .cc-ios-dm-list-wrap[hidden],
html.cc-ios-shell .cc-ios-inbox-pane[hidden] {
  display: none !important;
}

html.cc-ios-shell .cc-ios-dm-pane .chat-inbox-empty,
html.cc-ios-shell .cc-ios-dm-list-wrap .chat-inbox-empty {
  display: none !important;
}

/* ── Users tab ── */
html.cc-ios-shell #ccIosTabUsers #users {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  padding: 8px !important;
}

/* ── Messages tab (CCAPP DM / Inbox panel) ── */
html.cc-ios-shell #ccIosTabMessages {
  background: var(--cc-ios-surface);
}

html.cc-ios-shell .cc-ios-msg-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html.cc-ios-shell .cc-ios-msg-segbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--cc-ios-surface-high);
  border-bottom: 1px solid var(--cc-ios-border);
}

html.cc-ios-shell .cc-ios-msg-seg {
  flex: 1 1 0;
  display: flex;
  border: 1px solid var(--cc-ios-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--cc-ios-bg);
}

html.cc-ios-shell .cc-ios-msg-seg-btn {
  flex: 1 1 0;
  border: none;
  background: transparent;
  color: var(--cc-ios-text);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 8px;
  cursor: pointer;
}

html.cc-ios-shell .cc-ios-msg-seg-btn.active {
  background: linear-gradient(135deg, #5e35b1, #7e57c2);
  color: #fff;
}

html.cc-ios-shell .cc-ios-msg-refresh {
  flex: 0 0 auto;
  border: 1px solid var(--cc-ios-border);
  background: var(--cc-ios-surface-high);
  color: var(--cc-ios-text);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

html.cc-ios-shell .cc-ios-msg-compose-row {
  flex: 0 0 auto;
  padding: 8px 12px;
  background: var(--cc-ios-surface);
  border-bottom: 1px solid var(--cc-ios-border);
}

html.cc-ios-shell .cc-ios-msg-compose-btn {
  border: 1px solid var(--cc-ios-border);
  background: var(--cc-ios-surface-high);
  color: var(--cc-ios-text);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html.cc-ios-shell .cc-ios-msg-compose-btn.open {
  border-color: var(--cc-ios-blue);
  color: var(--cc-ios-blue);
}

html.cc-ios-shell .cc-ios-inbox-compose-wrap {
  flex: 0 0 auto;
  max-height: 42vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px;
  background: var(--cc-ios-surface-high);
  border-bottom: 1px solid var(--cc-ios-border);
}

html.cc-ios-shell .cc-ios-inbox-compose-wrap .chat-inbox-compose {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

html.cc-ios-shell .cc-ios-inbox-compose-wrap .chat-inbox-compose-toolbar {
  display: none !important;
}

html.cc-ios-shell .cc-ios-inbox-compose-wrap label {
  font-size: 11px !important;
  color: var(--cc-ios-muted) !important;
}

html.cc-ios-shell .cc-ios-inbox-compose-wrap input[type="text"],
html.cc-ios-shell .cc-ios-inbox-compose-wrap .chat-inbox-compose-editor {
  border-radius: 10px !important;
  border: 1px solid var(--cc-ios-border) !important;
  background: var(--cc-ios-bg) !important;
  color: #fff !important;
}

html.cc-ios-shell .cc-ios-msg-content {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html.cc-ios-shell .cc-ios-dm-pane,
html.cc-ios-shell .cc-ios-inbox-pane {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html.cc-ios-shell .cc-ios-dm-list-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px;
}

html.cc-ios-shell .cc-ios-dm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html.cc-ios-shell .cc-ios-dm-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--cc-ios-border);
  background: var(--cc-ios-surface-high);
  border-radius: 14px;
  padding: 12px 14px;
  color: #fff;
  cursor: pointer;
}

html.cc-ios-shell .cc-ios-dm-row.unread {
  border-color: rgba(0, 229, 255, 0.75);
  background: rgba(0, 188, 212, 0.08);
}

html.cc-ios-shell .cc-ios-dm-row-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

html.cc-ios-shell .cc-ios-dm-row-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.cc-ios-shell .cc-ios-dm-row-meta {
  font-size: 12px;
  color: var(--cc-ios-dim);
}

html.cc-ios-shell .cc-ios-dm-row-preview {
  font-size: 12px;
  color: var(--cc-ios-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

html.cc-ios-shell .cc-ios-dm-row.unread .cc-ios-dm-row-preview {
  color: #e8f4ff;
}

html.cc-ios-shell .cc-ios-dm-row-badge {
  flex: 0 0 auto;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.25);
  color: var(--cc-ios-green);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.cc-ios-shell .cc-ios-dm-row-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cc-ios-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

html.cc-ios-shell .cc-ios-dm-empty,
html.cc-ios-shell .cc-ios-inbox-empty-fallback {
  color: var(--cc-ios-muted);
  font-size: 14px;
  text-align: center;
  padding: 24px 16px;
}

html.cc-ios-shell .cc-ios-dm-thread {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html.cc-ios-shell .cc-ios-dm-thread-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 4px;
  border-bottom: 1px solid var(--cc-ios-border);
  background: var(--cc-ios-surface-high);
}

html.cc-ios-shell .cc-ios-dm-back {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--cc-ios-text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-width: 44px;
  min-height: 44px;
}

html.cc-ios-shell.cc-ios-dm-thread-open .cc-ios-dm-thread {
  flex: 1 1 0;
  min-height: 0;
}

html.cc-ios-shell.cc-ios-dm-thread-open .cc-ios-msg-content {
  min-height: 0;
}

html.cc-ios-shell .cc-ios-dm-thread-headtext {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

html.cc-ios-shell .cc-ios-dm-thread-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.cc-ios-shell .cc-ios-dm-thread-sub {
  font-size: 11px;
  color: var(--cc-ios-dim);
}

html.cc-ios-shell .cc-ios-dm-thread-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cc-ios-bg);
}

html.cc-ios-shell .cc-ios-dm-thread-body #dmViews {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  overflow: hidden !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmBody {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmBody.active {
  display: flex !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmMsgs {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmCompose {
  flex: 0 0 auto !important;
  border-top: 1px solid var(--cc-ios-border) !important;
  background: rgba(9, 14, 26, 0.97) !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  align-items: center !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmCompose .dm-tool-btn {
  display: none !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmCompose .dm-input {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
  border: 1px solid var(--cc-ios-border) !important;
  background: var(--cc-ios-bg) !important;
  color: #fff !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmCompose .dm-input:focus {
  border-color: var(--cc-ios-blue) !important;
  outline: none !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmCompose .dm-send-btn,
html.cc-ios-shell .cc-ios-dm-thread-body .dmCompose button.dm-send-btn {
  flex: 0 0 auto !important;
  min-width: 48px !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--cc-ios-blue) !important;
  color: transparent !important;
  font-size: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmCompose .dm-send-btn::after {
  content: 'Send';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #090e1a;
  font-size: 13px;
  font-weight: 700;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmMsgs {
  padding: 8px 12px !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmRow {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  margin-bottom: 8px !important;
  clear: none !important;
  width: 100% !important;
  position: relative !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmRow .mine,
html.cc-ios-shell .cc-ios-dm-thread-body .dmRow .theirs {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmRow.dm-incoming .theirs {
  color: var(--cc-ios-green) !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmRow.dm-outgoing .mine {
  color: var(--cc-ios-blue) !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmRow .message-content {
  display: block !important;
  width: 100% !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  float: none !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmRow.dm-outgoing .message-content {
  color: var(--cc-ios-text) !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmRow .muted {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  font-size: 10px !important;
  color: var(--cc-ios-dim) !important;
}

html.cc-ios-shell .cc-ios-inbox-pane {
  background: var(--cc-ios-bg);
}

html.cc-ios-shell .cc-ios-inbox-list-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px;
}

html.cc-ios-shell .cc-ios-inbox-list-wrap .chat-inbox-list {
  max-height: none !important;
  overflow: visible !important;
}

html.cc-ios-shell .cc-ios-inbox-list-wrap .chat-inbox-item {
  border-radius: 12px !important;
  margin-bottom: 8px !important;
}

html.cc-ios-shell .cc-ios-inbox-list-wrap .chat-inbox-empty {
  display: block !important;
  color: var(--cc-ios-muted) !important;
  text-align: center;
  padding: 24px 16px;
}

html.cc-ios-shell #dm,
html.cc-ios-shell #dm.open,
html.cc-ios-shell #dm.cc-ios-dm-hidden,
html.cc-ios-shell #dm.cc-ios-dm-hidden.open {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Menu sheet ── */
html.cc-ios-shell.cc-ios-kb-open .cc-ios-shell-footer,
html.cc-ios-shell.cc-ios-kb-open .cc-ios-shell-footer #guestBanner.cc-guest-banner-visible {
  display: none !important;
}

html.cc-ios-shell .cc-ios-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99995;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: flex-end;
  justify-content: center;
}

html.cc-ios-shell .cc-ios-sheet-backdrop.open {
  display: flex;
}

html.cc-ios-shell .cc-ios-menu-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
}

html.cc-ios-shell .cc-ios-menu-sub {
  font-size: 13px;
  color: var(--cc-ios-muted);
  margin: 0 0 16px;
}

html.cc-ios-shell .cc-ios-menu-page[hidden] {
  display: none !important;
}

html.cc-ios-shell .cc-ios-menu-back {
  border: none;
  background: transparent;
  color: var(--cc-ios-text);
  font-size: 14px;
  font-weight: 600;
  padding: 0 0 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html.cc-ios-shell .cc-ios-menu-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

html.cc-ios-shell .cc-ios-menu-field label {
  font-size: 12px;
  color: var(--cc-ios-muted);
}

html.cc-ios-shell .cc-ios-menu-field input[type="text"],
html.cc-ios-shell .cc-ios-menu-field textarea {
  border: 1px solid var(--cc-ios-border);
  background: var(--cc-ios-bg);
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
}

html.cc-ios-shell .cc-ios-menu-field textarea {
  min-height: 88px;
  resize: vertical;
}

html.cc-ios-shell .cc-ios-menu-save {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: var(--cc-ios-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 14px;
  cursor: pointer;
  margin-top: 8px;
}

html.cc-ios-shell .cc-ios-menu-photo-btn {
  width: 100%;
  border: 1px solid var(--cc-ios-border);
  border-radius: 12px;
  background: transparent;
  color: var(--cc-ios-text);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  margin-bottom: 12px;
}

html.cc-ios-shell .cc-ios-menu-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1565c0, #29b6f6);
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  overflow: hidden;
}

html.cc-ios-shell .cc-ios-menu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.cc-ios-shell .cc-ios-font-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

html.cc-ios-shell .cc-ios-font-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

html.cc-ios-shell .cc-ios-font-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--cc-ios-blue);
}

html.cc-ios-shell .cc-ios-font-toggles {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

html.cc-ios-shell .cc-ios-font-toggle {
  flex: 1 1 0;
  border: 1px solid var(--cc-ios-border);
  border-radius: 12px;
  background: var(--cc-ios-surface-high);
  color: var(--cc-ios-text);
  font-size: 14px;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
}

html.cc-ios-shell .cc-ios-font-toggle.active {
  background: var(--cc-ios-blue);
  border-color: var(--cc-ios-blue);
  color: #fff;
}

html.cc-ios-shell .cc-ios-dm-opt {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--cc-ios-border);
  background: var(--cc-ios-surface-high);
  color: var(--cc-ios-text);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
}

html.cc-ios-shell .cc-ios-dm-opt.active {
  border-color: var(--cc-ios-blue);
  background: rgba(96, 165, 250, 0.12);
}

html.cc-ios-shell .cc-ios-dm-opt-title {
  font-size: 15px;
  font-weight: 700;
  display: block;
}

html.cc-ios-shell .cc-ios-dm-opt-sub {
  font-size: 12px;
  color: var(--cc-ios-muted);
  margin-top: 4px;
  display: block;
}

/* Shekels coming-soon sheet */
html.cc-ios-shell .cc-ios-shekels-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99996;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: flex-end;
  justify-content: center;
}

html.cc-ios-shell .cc-ios-shekels-backdrop.open {
  display: flex;
}

html.cc-ios-shell .cc-ios-shekels-sheet {
  width: 100%;
  background: linear-gradient(180deg, #111a38 0%, #090e1a 100%);
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--cc-ios-border);
  border-bottom: none;
  padding: 24px 20px max(24px, env(safe-area-inset-bottom));
  text-align: center;
}

html.cc-ios-shell .cc-ios-shekels-balance {
  font-size: 42px;
  font-weight: 800;
  color: #ff76cf;
  margin: 0 0 4px;
}

html.cc-ios-shell .cc-ios-shekels-balance-sub {
  font-size: 14px;
  color: var(--cc-ios-muted);
  margin: 0 0 20px;
}

html.cc-ios-shell .cc-ios-shekels-soon {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
}

html.cc-ios-shell .cc-ios-shekels-soon-sub {
  font-size: 14px;
  color: var(--cc-ios-blue);
  margin: 0;
}

html.cc-ios-shell .cc-ios-shekels-close {
  margin-top: 20px;
  border: none;
  background: transparent;
  color: var(--cc-ios-muted);
  font-size: 14px;
  cursor: pointer;
}

html.cc-ios-shell .cc-ios-sheet {
  width: 100%;
  max-height: 70vh;
  background: var(--cc-ios-surface);
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--cc-ios-border);
  padding: 12px 12px max(env(safe-area-inset-bottom), 16px);
  overflow-y: auto;
}

html.cc-ios-shell .cc-ios-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--cc-ios-border);
  border-radius: 4px;
  margin: 0 auto 12px;
}

html.cc-ios-shell .cc-ios-sheet-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--cc-ios-border);
  background: var(--cc-ios-surface-high);
  color: var(--cc-ios-text);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

html.cc-ios-shell .cc-ios-sheet-item.danger {
  color: var(--cc-ios-danger);
  border-color: rgba(248, 113, 113, 0.45);
}

html.cc-ios-shell .cc-ios-pending-fr-list .cc-pending-fr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cc-ios-border);
}

html.cc-ios-shell .cc-ios-pending-fr-list .cc-pending-fr-info {
  min-width: 0;
  flex: 1 1 auto;
}

html.cc-ios-shell .cc-ios-pending-fr-list .cc-pending-fr-info strong {
  display: block;
  color: var(--cc-ios-text);
  font-size: 15px;
}

html.cc-ios-shell .cc-ios-pending-fr-list .cc-pending-fr-sub {
  font-size: 12px;
  color: var(--cc-ios-muted);
  margin-top: 2px;
}

html.cc-ios-shell .cc-ios-pending-fr-list .cc-pending-fr-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

html.cc-ios-shell .cc-ios-pending-fr-list .cc-pending-fr-actions button {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

html.cc-ios-shell .cc-ios-pending-fr-list .muted {
  color: var(--cc-ios-muted);
  font-size: 14px;
  padding: 8px 0;
  margin: 0;
}

.cc-pending-fr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #2a3855;
}

.cc-pending-fr-info {
  min-width: 0;
  flex: 1 1 auto;
}

.cc-pending-fr-sub {
  font-size: 12px;
  color: #8aa0bd;
  margin-top: 2px;
}

.cc-pending-fr-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* iPad: slightly wider dock column + tiles */
@media (min-width: 768px) {
  html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock.has-cams {
    width: 118px;
    max-width: 118px;
  }

  html.cc-ios-shell .cc-ios-cam-dock .webcam-dock,
  html.cc-ios-shell .cc-ios-cam-dock .screen-dock,
  html.cc-ios-shell .cc-ios-cam-dock .mini-cam-slot {
    width: 108px !important;
    height: 108px !important;
    min-width: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    flex: 0 0 108px !important;
  }

  html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock.has-cams {
    max-height: 96px;
  }
}