/**
 * 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 on iOS shell */
html.cc-ios-shell-pending #ccRotateOverlay,
html.cc-ios-shell #ccRotateOverlay {
  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-vv-offset-left: 0px;
  --cc-ios-vv-offset-top: 0px;
  --cc-ios-vv-width: 100%;
  --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;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html.cc-ios-shell .scale-fit-viewport {
  width: 100% !important;
  max-width: 100% !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;
}

/* Header above CAM/MIC/₪ row so the logout popover is never covered. */
html.cc-ios-shell .cc-ios-header {
  z-index: 40;
}

html.cc-ios-shell .cc-ios-media-toolbar,
html.cc-ios-shell .cc-ios-openmic-slot,
html.cc-ios-shell .cc-ios-tabs {
  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) 10px 8px;
  background: rgba(9, 14, 26, 0.97);
  border-bottom: 1px solid var(--cc-ios-border);
  position: relative;
  z-index: 40;
  overflow: visible;
}

html.cc-ios-shell .cc-ios-back,
html.cc-ios-shell .cc-ios-menu-btn,
html.cc-ios-shell .cc-ios-hide-btn,
html.cc-ios-shell .cc-ios-header-shekels {
  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-hide-btn {
  padding: 8px 10px;
  font-size: 12px;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
  white-space: nowrap;
  order: 3; /* sit immediately beside MENU (MENU is order 2) */
}

html.cc-ios-shell .cc-ios-menu-btn {
  order: 2;
}

html.cc-ios-shell .cc-ios-header-pot {
  order: 1;
}

html.cc-ios-shell .cc-ios-header-user-wrap {
  order: 4;
}

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

html.cc-ios-shell .cc-ios-hide-btn.is-hidden {
  border-color: rgba(248, 113, 113, 0.55);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.35);
}

html.cc-ios-shell .cc-ios-header-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

html.cc-ios-shell .cc-ios-room-name {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

html.cc-ios-shell .cc-ios-header-center .cc-ios-room-stats {
  margin: 0;
  text-align: left;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.2;
  color: var(--cc-ios-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.cc-ios-shell .cc-ios-header-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  max-width: 52%;
}

/* Header strip kept for brief access-result notices only (Private Access is in-chat). */
html.cc-ios-shell .cc-ios-cam-access-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(16, 24, 42, 0.98);
  border-bottom: 1px solid #2a4060;
  min-height: 0;
}

html.cc-ios-shell .cc-ios-cam-access-bar[hidden] {
  display: none !important;
}

html.cc-ios-shell .cc-ios-cam-access-bar:not(.is-notice) {
  display: none !important;
}

html.cc-ios-shell .cc-ios-cam-access-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: #d7deea;
}

html.cc-ios-shell .cc-ios-cam-access-bar.is-notice .cc-ios-cam-access-text {
  color: #f0d54a;
  font-weight: 700;
}

html.cc-ios-shell .cc-ios-cam-access-bar.is-notice.is-ok {
  background: rgba(6, 78, 59, 0.96);
  border-bottom-color: #34d399;
}

html.cc-ios-shell .cc-ios-cam-access-bar.is-notice.is-ok .cc-ios-cam-access-text {
  color: #a7f3d0;
}

html.cc-ios-shell .cc-ios-cam-access-bar.is-notice.is-err {
  background: rgba(127, 29, 29, 0.96);
  border-bottom-color: #f87171;
}

html.cc-ios-shell .cc-ios-cam-access-bar.is-notice.is-err .cc-ios-cam-access-text {
  color: #fecaca;
}

/* Desktop dock / default bulky access rows — replaced by CCAPP Private Access card */
html.cc-ios-shell #mediaAccessPromptDock,
html.cc-ios-shell #mediaAccessPromptDock .media-access-prompt {
  display: none !important;
}

html.cc-ios-shell #chat .row.system-message.cc-wcam-access-row:not(.cc-ios-private-access),
html.cc-ios-shell #chat .row.cc-cam-chat-prompt-row.cc-wcam-access-row:not(.cc-ios-private-access) {
  display: none !important;
}

/* ── CCAPP-style system announcements (join/leave/cam start) ── */
html.cc-ios-shell #ccIosTabChat #chat .row.system-message {
  display: flex !important;
  align-items: stretch !important;
  margin: 4px 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
}

html.cc-ios-shell #ccIosTabChat #chat .row.system-message .col-msg {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
}

html.cc-ios-shell #ccIosTabChat #chat .row.system-message .col-time {
  display: none !important;
}

html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg,
html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg.local-message {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  background: rgba(18, 28, 48, 0.92) !important;
  border: 1px solid rgba(255, 193, 7, 0.28) !important;
  color: #dde6f5 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-align: left !important;
}

html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg::before {
  content: '▸';
  flex: 0 0 auto;
  color: #ffc107;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  margin-top: 0;
}

html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg .cc-game-award-ann {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg .cc-game-award-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}
html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg .cc-game-award-line {
  display: block !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: #e8eef8 !important;
}

html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg .cc-bingo-win-ann {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg .cc-bingo-win-headline strong {
  white-space: nowrap !important;
}
html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg .cc-bingo-win-note,
html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg .cc-bingo-win-prizes {
  font-size: 14px !important;
  color: #b8c7dc !important;
  line-height: 1.45 !important;
  word-break: normal !important;
}

html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg a {
  color: #60a5fa !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-decoration: underline !important;
  white-space: nowrap;
}

/* Cam-start lines: slightly tighter, keep action link readable */
html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg a[href^="cc-action:"],
html.cc-ios-shell #ccIosTabChat #chat .row.system-message .system-msg a[data-cc-broadcaster] {
  color: #6aa7ff !important;
}

/* ── CCAPP Private Access card (Yes / No) ── */
html.cc-ios-shell #chat .row.cc-ios-private-access {
  display: block !important;
  margin: 8px 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
}

html.cc-ios-shell #chat .row.cc-ios-private-access .col-msg,
html.cc-ios-shell #chat .row.cc-ios-private-access .system-msg {
  display: none !important;
}

html.cc-ios-shell #chat .row.cc-ios-private-access .col-time {
  display: none !important;
}

html.cc-ios-shell #chat .cc-ios-private-access-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: #172540;
  border: 1px solid rgba(96, 165, 250, 0.45);
  box-sizing: border-box;
}

html.cc-ios-shell #chat .cc-ios-private-access-title {
  font-size: 12px;
  font-weight: 800;
  color: #ffc107;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

html.cc-ios-shell #chat .cc-ios-private-access-body {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  font-style: normal;
}

html.cc-ios-shell #chat .cc-ios-private-access-actions {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

html.cc-ios-shell #chat .cc-ios-private-access-yes,
html.cc-ios-shell #chat .cc-ios-private-access-no {
  flex: 1 1 0;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 800;
  color: #060d1f;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.cc-ios-shell #chat .cc-ios-private-access-yes {
  background: #34d399;
}

html.cc-ios-shell #chat .cc-ios-private-access-no {
  background: #f87171;
}

html.cc-ios-shell .cc-ios-header-actions-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

/* Logged-in identity — right of MENU (display + logout popover only) */
html.cc-ios-shell .cc-ios-header-user-wrap {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 118px;
  z-index: 100091;
}

html.cc-ios-shell .cc-ios-header-user-wrap[hidden] {
  display: none !important;
}

html.cc-ios-shell .cc-ios-header-user {
  width: 100%;
  max-width: 118px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 4px 2px 2px;
  border: none;
  background: transparent;
  color: #60a5fa;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html.cc-ios-shell .cc-ios-header-user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100095;
  min-width: 132px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid #2a4060;
  background: #111d33;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

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

html.cc-ios-shell .cc-ios-header-user-logout {
  width: 100%;
  border: 1px solid rgba(248, 113, 113, 0.55);
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html.cc-ios-shell .cc-ios-header-user-av {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #60a5fa;
  background: #172540;
  color: #60a5fa;
  font-size: 11px;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.cc-ios-shell .cc-ios-header-user-av.has-photo {
  line-height: 0;
}

html.cc-ios-shell .cc-ios-header-user-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

html.cc-ios-shell .cc-ios-header-user-name {
  min-width: 0;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  color: #60a5fa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.cc-ios-shell .cc-ios-header-pot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  max-width: 72px;
}

html.cc-ios-shell .cc-ios-header-pot .cc-shekel-pot-wrap,
html.cc-ios-shell .cc-ios-header-pot-live {
  display: inline-flex !important;
  transform: scale(0.72);
  transform-origin: center center;
  margin: -8px -4px;
  pointer-events: none;
}

html.cc-ios-shell .cc-ios-header-shekels {
  background: linear-gradient(135deg, #6a1b9a, #8e24aa);
  border-color: #ce93d8;
  color: #fff;
  padding: 8px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Raffle removed from iOS header — keep desktop raffle elsewhere. */

html.cc-ios-shell .cc-ios-livegame-btn {
  background: linear-gradient(135deg, #7f1d1d, #b91c1c);
  border: 1px solid #f87171;
  border-radius: 10px;
  color: #fee2e2;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 11px;
  line-height: 1.1;
  flex: 0 0 auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.cc-ios-shell .cc-ios-livegame-btn.is-trivia {
  background: linear-gradient(135deg, #4c1d95, #6d28d9);
  border-color: #c4b5fd;
  color: #ede9fe;
}

html.cc-ios-shell .cc-ios-livegame-btn.is-available {
  background: #4a90e2;
  border-color: #357abd;
  color: #fff;
}

html.cc-ios-shell .cc-ios-livegame-btn.is-active {
  background: #ff4444;
  border-color: #c0392b;
  color: #fff;
}

html.cc-ios-shell .cc-ios-livegame-btn[hidden],
html.cc-ios-shell body.cc-lite-hide-livegame .cc-ios-livegame-btn,
html.cc-ios-shell.cc-lite-hide-livegame .cc-ios-livegame-btn {
  display: none !important;
}

html.cc-ios-shell .cc-ios-wcbet-btn {
  background: linear-gradient(135deg, #14532d, #15803d);
  border-color: #4ade80;
  color: #dcfce7;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
  line-height: 1.1;
}

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

/* Live Game / Trivia modal — usable full popup on iOS */
html.cc-ios-shell #ccChallengesModal {
  z-index: 100050 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  pointer-events: auto !important;
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

html.cc-ios-shell #ccChallengesModal[style*="display: block"],
html.cc-ios-shell #ccChallengesModal[style*="display:block"],
html.cc-ios-shell.cc-ios-livegame-open #ccChallengesModal {
  display: flex !important;
}

html.cc-ios-shell #ccChallengesModalContent {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: min(720px, 100%) !important;
  max-width: 100% !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) !important;
  margin: auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: default !important;
}

html.cc-ios-shell #ccChallengesModalHeader {
  cursor: default !important;
  flex-shrink: 0;
  background: #0e1628;
}

html.cc-ios-shell #ccChallengesPlayScroll {
  -webkit-overflow-scrolling: touch;
  flex: 1 1 0 !important;
  max-height: none !important;
  min-height: 72px !important;
}

html.cc-ios-shell #ccChallengesGuessBar {
  flex-shrink: 0 !important;
}

html.cc-ios-shell #ccChallengesScoresFooter {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: 26% !important;
  -webkit-overflow-scrolling: touch;
}

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

html.cc-ios-shell #ccGuessInput {
  font-size: 16px !important;
  min-height: 44px !important;
}

html.cc-ios-shell #ccGuessBtn {
  min-height: 44px !important;
  min-width: 88px !important;
  font-weight: 700 !important;
}

@media (max-width: 700px) {
  html.cc-ios-shell #ccChallengesScoresFooter .cc-scores-grid {
    display: flex !important;
    flex-direction: column !important;
  }
}

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

/* ── Ticker (Main Chat tab only) ── */
html.cc-ios-shell .cc-ios-ticker-wrap {
  flex: 0 0 auto;
  padding: 0 8px 6px;
  background: rgba(9, 14, 26, 0.97);
}

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

html.cc-ios-shell .cc-ios-ticker-box {
  border: 1px solid var(--cc-ios-border);
  border-radius: 10px;
  background: #0a1220;
  overflow: hidden;
  min-height: 34px;
  display: flex;
  align-items: center;
}

html.cc-ios-shell .cc-ios-ticker-box .ticker {
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  line-height: 1.2 !important;
  background: transparent !important;
  border: none !important;
}

html.cc-ios-shell .cc-ios-ticker-box .ticker span {
  font-size: 14px !important;
}

html.cc-ios-shell .cc-ios-ticker-box .track {
  animation: tick 22s linear infinite;
}

/* ── 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-mics-global {
  border: 1px solid #6aa7ff;
  background: #1a3d5c;
  color: #cfe4ff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.cc-ios-shell .cc-ios-media-btn.is-mics-global:not(.open-mic-global-on) {
  background: #3a2020;
  border-color: #8b4545;
  color: #ffcdd2;
}

html.cc-ios-shell .cc-ios-media-btn.is-mics-global .cc-ios-media-label {
  font-size: 13px;
  font-weight: 800;
}

html.cc-ios-shell .cc-ios-media-btn.is-shekels {
  background: linear-gradient(135deg, #6a1b9a, #8e24aa);
  border-color: #ce93d8;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  gap: 2px;
  white-space: nowrap;
}

html.cc-ios-shell .cc-ios-media-btn.is-shekels #ccIosHeaderShekelsAmt {
  font-size: inherit;
  font-weight: inherit;
}

html.cc-ios-shell .cc-ios-media-ico {
  font-size: 16px;
  line-height: 1;
}

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

/* Hear toggle + mic panel under CAM/MIC/GIFT (CCAPP-style) */
html.cc-ios-shell .cc-ios-media-subrow {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--cc-ios-surface);
  border-bottom: 1px solid var(--cc-ios-border);
  z-index: 6;
}

html.cc-ios-shell .cc-ios-hear-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
}

html.cc-ios-shell .cc-ios-hear-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

html.cc-ios-shell .cc-ios-hear-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--cc-ios-text);
}

html.cc-ios-shell .cc-ios-hear-toggle {
  width: 52px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: #3a4558;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.cc-ios-shell .cc-ios-hear-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #111;
  transition: transform 0.15s ease;
}

html.cc-ios-shell .cc-ios-hear-toggle.open-mic-global-on {
  background: #22c55e;
}

html.cc-ios-shell .cc-ios-hear-toggle.open-mic-global-on::after {
  transform: translateX(22px);
  background: #0b1220;
}

html.cc-ios-shell .cc-ios-hear-toggle.is-off {
  background: #5c6678;
}

html.cc-ios-shell .cc-ios-media-subrow .cc-ios-openmic-slot {
  border-bottom: none;
}

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) #openMicPttPanel,
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 #openMicPttPanel.is-live,
html.cc-ios-shell .cc-ios-openmic-slot.expanded #openMicPttPanel.cc-ios-mic-panel-force,
html.cc-ios-shell .cc-ios-openmic-slot.expanded #openMicPttPanel.cc-ios-mic-panel-force[hidden] {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px 6px;
}

html.cc-ios-shell .cc-ios-openmic-slot.expanded #omcChannelBar,
html.cc-ios-shell .cc-ios-openmic-slot.expanded #omcChannelBar[hidden] {
  display: flex !important;
  padding: 4px 8px;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: space-between;
  min-height: 0;
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicCollapseBtn,
html.cc-ios-shell .cc-ios-openmic-slot #omcCreateBtn,
html.cc-ios-shell .cc-ios-openmic-slot #omcJoinBtn,
html.cc-ios-shell .cc-ios-openmic-slot #omcExpandBtn,
html.cc-ios-shell .cc-ios-openmic-slot .cc-ios-mic-help-btn {
  display: none !important;
}

html.cc-ios-shell .cc-ios-openmic-slot #omcCurrentLabel {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--cc-ios-muted);
  line-height: 1.2;
}

html.cc-ios-shell .cc-ios-mic-hear-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Duplicate Hear control in mic panel removed — keep only Turn off mic */
html.cc-ios-shell .cc-ios-mic-hear-row .cc-ios-mic-hear-label,
html.cc-ios-shell .cc-ios-mic-hear-row .cc-ios-switch,
html.cc-ios-shell #ccIosMicHearToggle {
  display: none !important;
}

/* Outgoing mic volume — how loud you are for everyone else */
html.cc-ios-shell .cc-ios-mic-vol {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
}

html.cc-ios-shell .cc-ios-mic-vol-icon {
  font-size: 11px;
  line-height: 1;
}

html.cc-ios-shell .cc-ios-mic-vol-pct {
  min-width: 30px;
  font-size: 10px;
  font-weight: 800;
  color: #cfe0ff;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

html.cc-ios-shell .cc-ios-mic-vol.is-quiet .cc-ios-mic-vol-pct {
  color: #ffb4a8;
}

html.cc-ios-shell #ccIosMicVol {
  -webkit-appearance: none;
  appearance: none;
  width: 84px;
  height: 18px;
  margin: 0;
  background: transparent;
  touch-action: none;
}

html.cc-ios-shell #ccIosMicVol::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.24);
}

html.cc-ios-shell #ccIosMicVol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -6px;
  border: none;
  border-radius: 50%;
  background: #4da3ff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

html.cc-ios-shell .cc-ios-mic-off-btn {
  flex: 0 0 auto;
  border: 1px solid #8b4545;
  background: #3a2020;
  color: #ffcdd2;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.cc-ios-shell .cc-ios-mic-off-btn:active {
  background: #5a2a2a;
}

html.cc-ios-shell .cc-ios-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

html.cc-ios-shell .cc-ios-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

html.cc-ios-shell .cc-ios-switch-ui {
  width: 36px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid var(--cc-ios-border);
  position: relative;
  transition: background 0.15s ease;
}

html.cc-ios-shell .cc-ios-switch-ui::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

html.cc-ios-shell .cc-ios-switch input:checked + .cc-ios-switch-ui {
  background: var(--cc-ios-green);
  border-color: rgba(255, 255, 255, 0.35);
}

html.cc-ios-shell .cc-ios-switch input:checked + .cc-ios-switch-ui::after {
  transform: translateX(14px);
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicPttBtn[data-cc-ios-enable-mic="1"] {
  background: rgba(41, 121, 255, 0.45) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicPttBtn[data-cc-ios-enable-mic="1"]:disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

html.cc-ios-shell .cc-ios-openmic-slot.expanded #openMicExpandedPanel.is-expanded,
html.cc-ios-shell .cc-ios-openmic-slot.expanded #openMicExpandedPanel {
  display: none !important;
  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: 6px !important;
  margin: 0 !important;
  min-height: 40px !important;
  max-height: 44px !important;
}

html.cc-ios-shell .cc-ios-openmic-slot #openMicPttBtn {
  flex: 2 1 0 !important;
  min-height: 40px !important;
  max-height: 44px !important;
  height: 40px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  padding: 0 8px !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: 40px !important;
  max-height: 44px !important;
  height: 40px !important;
  border-radius: 10px !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: 2px 4px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.1 !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: 10px !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);
}

/* ── Private video / voice call (full-screen, above shell chrome) ── */
html.cc-ios-shell #ccVcallOverlay,
html.cc-ios-shell.cc-ios-vcall-open #ccVcallOverlay {
  z-index: 2147483646 !important;
  position: fixed !important;
  inset: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  background: #000 !important;
  pointer-events: auto !important;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-panel,
html.cc-ios-shell #ccVcallOverlay .cc-vcall-panel.is-video {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-body {
  flex: 1 !important;
  min-height: 0 !important;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-chat {
  width: min(42vw, 220px) !important;
  flex: 0 0 min(42vw, 220px) !important;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-resize-handle {
  display: none !important;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-hd {
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-bar {
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-ctrl {
  width: 46px !important;
  height: 46px !important;
  font-size: 17px !important;
  -webkit-tap-highlight-color: transparent;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-ctrl.device {
  width: 44px !important;
  height: 44px !important;
  font-size: 14px !important;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-ctrl.end,
html.cc-ios-shell #ccVcallOverlay .cc-vcall-ctrl.accept {
  width: 58px !important;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-stage {
  padding: 10px !important;
  gap: 10px !important;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-panel.is-video .cc-vcall-stage {
  display: grid !important;
  align-content: center !important;
  justify-content: center !important;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-panel.is-video .cc-vcall-person {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-tile .audio-level-indicator {
  width: 10px;
  height: 48px;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-vol {
  padding: 6px 10px;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-vol-slider {
  width: 88px;
  height: 6px;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-name.is-host-click {
  padding: 6px 4px;
}

html.cc-ios-shell #ccVcallOverlay .cc-vcall-peer-menu button {
  min-height: 44px;
  padding: 12px 14px;
}

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

/* ── 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(94dvh, 760px) !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: 0 !important;
  width: 46px !important;
  height: 28px !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--cc-ios-border) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  color: transparent !important;
  position: relative;
  flex-shrink: 0;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamAudioBtn.cc-ios-toggle-on,
html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamLockToggleBtn.cc-ios-toggle-on,
html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamLockToggleBtn.locked {
  background: var(--cc-ios-blue) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamAudioBtn::after,
html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamLockToggleBtn::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamAudioBtn.cc-ios-toggle-on::after,
html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamLockToggleBtn.cc-ios-toggle-on::after,
html.cc-ios-shell body.webcam-modal-open #webcamModal #webcamLockToggleBtn.locked::after {
  transform: translateX(18px);
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .cc-ios-webcam-toggle-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .cc-ios-webcam-toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ios-text);
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .webcam-controls-audio-lock {
  display: flex !important;
  flex-direction: column !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 streaming';
  font-size: 15px;
  line-height: 1.2;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .cc-ios-cam-quality-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .cc-ios-cam-quality-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 0 !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .cc-ios-cam-quality-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cc-ios-muted) !important;
}

html.cc-ios-shell body.webcam-modal-open #webcamModal .cc-ios-cam-quality-select {
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  border: 1px solid var(--cc-ios-border) !important;
  background: var(--cc-ios-surface-high) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239aa4bb' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 34px !important;
}

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

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;
  align-items: stretch;
  background: var(--cc-ios-surface);
  border-bottom: 1px solid var(--cc-ios-border);
  gap: 2px;
  padding-right: 6px;
}

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;
  min-width: 0;
}

html.cc-ios-shell .cc-ios-ping-btn,
html.cc-ios-shell .cc-ios-menu-ping {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  margin: 0 0 10px;
  border: 1px solid #6a7f9c;
  background: #0d1524;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.cc-ios-shell .cc-ios-ping-btn:active,
html.cc-ios-shell .cc-ios-menu-ping:active {
  background: #152238;
}

html.cc-ios-shell .cc-ios-ping-display {
  font-size: 14px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Tab bar: three equal tabs (Messages / Main Chat / Users) — Casino is in MENU. */
html.cc-ios-shell .cc-ios-tabs {
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 8;
  pointer-events: auto;
}

html.cc-ios-shell .cc-ios-tab {
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 48px;
}

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;
  /* Never collapse to 0 — Safari "ticker-only black screen" drops the main layer
     when flex min-height:0 lets the chat column shrink away while the ticker lives. */
  min-height: min(42vh, 320px);
  display: flex;
  overflow: hidden;
  visibility: visible !important;
  opacity: 1 !important;
}

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 wrap — dock + expand cams control (matches CCAPP) */
html.cc-ios-shell .cc-ios-cam-dock-wrap {
  flex: 0 0 auto;
  display: none;
  flex-direction: column;
  background: rgba(9, 14, 26, 0.95);
  min-width: 0;
  min-height: 0;
  border-bottom: 1px solid var(--cc-ios-border);
}

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

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

html.cc-ios-shell .cc-ios-cam-dock {
  flex: 0 0 auto;
  display: none;
  background: transparent;
  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;
}

html.cc-ios-shell .cc-ios-expand-cams {
  flex: 0 0 auto;
  display: block;
  width: calc(100% - 16px);
  margin: 0 8px 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cc-ios-border);
  background: var(--cc-ios-surface-high);
  color: var(--cc-ios-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 7;
}

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

html.cc-ios-shell .cc-ios-cam-dock-wrap.is-expanded .cc-ios-expand-cams,
html.cc-ios-cams-expanded .cc-ios-expand-cams {
  color: #86efac;
  border-color: #166534;
}

/* Side dock — CCAPP WebcamDockColumn (~70dp); expand ≈ drive size (~108dp). */
html.cc-ios-shell .cc-ios-main-row.dock-side {
  --cc-ios-cam-w: 70px;
  --cc-ios-cam-h: 70px;
  --cc-ios-cam-w-large: 108px;
  --cc-ios-cam-h-large: 108px;
}

html.cc-ios-shell.cc-ios-cams-expanded .cc-ios-main-row.dock-side,
html.cc-ios-shell .cc-ios-main-row.dock-side:has(.cc-ios-cam-dock-wrap.is-expanded) {
  --cc-ios-cam-w: var(--cc-ios-cam-w-large);
  --cc-ios-cam-h: var(--cc-ios-cam-h-large);
}

html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock-wrap.has-cams {
  width: calc(var(--cc-ios-cam-w) + 12px);
  max-width: 130px;
  align-self: stretch;
  border-right: 1px solid var(--cc-ios-border);
  border-bottom: none;
  background: rgba(9, 14, 26, 0.95);
}

html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock.has-cams {
  flex-direction: column;
  align-self: stretch;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  height: auto;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-right: none;
}

html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-expand-cams {
  width: calc(100% - 6px);
  margin: 2px 3px 6px;
  padding: 6px 4px;
  font-size: 10px;
  border-radius: 8px;
  line-height: 1.15;
}

/* Top dock — Users / Messages horizontal strip (compact, expandable). */
html.cc-ios-shell .cc-ios-main-row.dock-top {
  --cc-ios-cam-w-compact: min(46vw, 176px);
  --cc-ios-cam-h-compact: calc(var(--cc-ios-cam-w-compact) * 9 / 16);
  --cc-ios-cam-w-large: min(78vw, 300px);
  --cc-ios-cam-h-large: calc(var(--cc-ios-cam-w-large) * 9 / 16);
  --cc-ios-cam-w: var(--cc-ios-cam-w-compact);
  --cc-ios-cam-h: var(--cc-ios-cam-h-compact);
}

html.cc-ios-shell.cc-ios-cams-expanded .cc-ios-main-row.dock-top,
html.cc-ios-shell .cc-ios-cam-dock-wrap.is-expanded ~ .cc-ios-tab-panels,
html.cc-ios-shell .cc-ios-main-row.dock-top:has(.cc-ios-cam-dock-wrap.is-expanded) {
  --cc-ios-cam-w: var(--cc-ios-cam-w-large);
  --cc-ios-cam-h: var(--cc-ios-cam-h-large);
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock.has-cams {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%;
  max-height: calc(var(--cc-ios-cam-h, 180px) + 16px);
  min-height: calc(var(--cc-ios-cam-h-compact) + 8px);
  gap: 6px;
  padding: 4px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-bottom: none;
}

html.cc-ios-shell.cc-ios-cams-expanded .cc-ios-main-row.dock-top .cc-ios-cam-dock.has-cams {
  max-height: calc(var(--cc-ios-cam-h-large) + 16px);
  min-height: calc(var(--cc-ios-cam-h-large) + 8px);
}

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;
  align-items: center !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock .webcam-dock,
html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock .screen-dock,
html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock .mini-cam-slot {
  border-radius: 10px !important;
  overflow: hidden !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;
}

/* 16:9 tiles; Expand uses --cc-ios-cam-*-large. Never stretch to fill the dock. */
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 #webcamPanel .webcam-dock,
html.cc-ios-shell .cc-ios-cam-dock #webcamPanel .webcam-dock:not(.webcam-dock--mini),
html.cc-ios-shell .cc-ios-cam-dock #webcamPanel .screen-dock:not(.screen-dock--mini) {
  position: relative !important;
  display: block !important;
  flex: 0 0 var(--cc-ios-cam-w, 280px) !important;
  width: var(--cc-ios-cam-w, 280px) !important;
  min-width: var(--cc-ios-cam-w, 280px) !important;
  max-width: var(--cc-ios-cam-w, 280px) !important;
  height: var(--cc-ios-cam-h, 158px) !important;
  min-height: var(--cc-ios-cam-h, 158px) !important;
  max-height: var(--cc-ios-cam-h, 158px) !important;
  align-self: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px !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;
}

/* Cam Off custom message overlay */
html.cc-ios-shell .camera-off-overlay {
  background: #0a0f18 !important;
  padding: 4px !important;
}

html.cc-ios-shell .camera-off-overlay .camera-off-brb {
  font-size: clamp(9px, 2.8vw, 16px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  padding: 0 2px;
  text-transform: none !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock:not(.webcam-dock--enlarged) .camera-off-overlay .camera-off-brb {
  font-size: 14px !important;
}

html.cc-ios-shell .cc-cam-off-msg-backdrop {
  z-index: 2147483646 !important;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

html.cc-ios-shell .cc-cam-off-msg-dialog {
  width: min(340px, 100%);
}

html.cc-ios-shell .cc-cam-off-msg-input {
  font-size: 16px; /* avoid iOS zoom on focus */
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock.webcam-dock--enlarged,
html.cc-ios-shell .cc-ios-cam-dock #webcamPanel .webcam-dock.webcam-dock--enlarged {
  width: var(--cc-ios-cam-w-large) !important;
  min-width: var(--cc-ios-cam-w-large) !important;
  max-width: var(--cc-ios-cam-w-large) !important;
  height: var(--cc-ios-cam-h-large) !important;
  min-height: var(--cc-ios-cam-h-large) !important;
  max-height: var(--cc-ios-cam-h-large) !important;
  flex: 0 0 var(--cc-ios-cam-w-large) !important;
}

/* Beat chat.html #webcamPanel 16:9 relative/contain rules — video must fill
   the green tile edge-to-edge (name / kbps overlay on the video, no black gap). */
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 #webcamPanel .webcam-dock .webcam-video,
html.cc-ios-shell .cc-ios-cam-dock #webcamPanel .webcam-dock:not(.webcam-dock--mini) .webcam-video,
html.cc-ios-shell .cc-ios-cam-dock #webcamPanel .screen-dock:not(.screen-dock--mini) .screen-video,
html.cc-ios-shell .cc-ios-cam-dock .mini-cam-dock .webcam-dock .webcam-video,
html.cc-ios-shell .cc-ios-cam-dock .mini-cam-slot .webcam-video,
html.cc-ios-shell .cc-ios-cam-dock .mini-cam-slot .screen-video {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  display: block !important;
  overflow: hidden !important;
  background: #000 !important;
  z-index: 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,
html.cc-ios-shell .cc-ios-cam-dock #webcamPanel .webcam-dock .webcam-video video,
html.cc-ios-shell .cc-ios-cam-dock #webcamPanel .webcam-dock:not(.webcam-dock--mini) .webcam-video video,
html.cc-ios-shell .cc-ios-cam-dock #webcamPanel .screen-dock:not(.screen-dock--mini) .screen-video video,
html.cc-ios-shell .cc-ios-cam-dock .mini-cam-dock .webcam-dock .webcam-video video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Unused footer slot under video — hide so it can't create a black bar */
html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .dock-footer,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .dock-footer,
html.cc-ios-shell .cc-ios-cam-dock #webcamPanel .webcam-dock .dock-footer {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !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: 24px !important;
  right: 54px !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: center !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 .webcam-dock-enlarge {
  position: absolute !important;
  top: 2px !important;
  right: 28px !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: 1px solid rgba(255, 255, 255, 0.25) !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 .webcam-dock-enlarge[aria-pressed="true"] {
  color: #6aa7ff !important;
  border-color: rgba(106, 167, 255, 0.7) !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;
}

/* Keep detach/attach mini hidden on iOS; star stays so mixer can sit beside it */
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 .webcam-dock .webcam-favourite {
  display: flex !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  right: auto !important;
  bottom: auto !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  z-index: 6 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.72) !important;
}

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

html.cc-ios-shell .cc-ios-cam-dock .mini-cam-slot.mini-cam-slot--enlarged {
  width: var(--cc-ios-cam-w-large, 140px) !important;
  height: var(--cc-ios-cam-h-large, 105px) !important;
  min-width: var(--cc-ios-cam-w-large, 140px) !important;
  min-height: var(--cc-ios-cam-h-large, 105px) !important;
  max-height: var(--cc-ios-cam-h-large, 105px) !important;
  flex: 0 0 var(--cc-ios-cam-w-large, 140px) !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;
}

/* Epikchat-style landscape tiles in top row (not tiny squares) */
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 {
  position: relative !important;
  width: var(--cc-ios-cam-w) !important;
  height: var(--cc-ios-cam-h) !important;
  min-width: var(--cc-ios-cam-w) !important;
  min-height: var(--cc-ios-cam-h) !important;
  max-height: var(--cc-ios-cam-h) !important;
  flex: 0 0 var(--cc-ios-cam-w) !important;
  border-radius: 12px !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock .webcam-video,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .screen-dock .screen-video {
  aspect-ratio: 4 / 3 !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock .dock-title,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .screen-dock .dock-title {
  left: 8px !important;
  right: 64px !important;
  bottom: 6px !important;
  font-size: 11px !important;
  text-align: left !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock .dock-close,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .screen-dock .screen-dock-close {
  top: 6px !important;
  right: 6px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 14px !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock .webcam-dock-enlarge {
  top: 6px !important;
  right: 38px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 14px !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .mini-cam-slot.mini-cam-slot--enlarged,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .mini-cam-slot.mini-cam-slot--enlarged .webcam-dock,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .mini-cam-slot.mini-cam-slot--enlarged .screen-dock,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock.webcam-dock--enlarged {
  width: var(--cc-ios-cam-w-large) !important;
  height: var(--cc-ios-cam-h-large) !important;
  min-width: var(--cc-ios-cam-w-large) !important;
  min-height: var(--cc-ios-cam-h-large) !important;
  max-height: var(--cc-ios-cam-h-large) !important;
  flex: 0 0 var(--cc-ios-cam-w-large) !important;
}

/* Video host always fills the tile (no aspect-ratio letterbox). */
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock .webcam-video,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .screen-dock .screen-video,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock:not(.webcam-dock--enlarged) .webcam-video,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .screen-dock:not(.webcam-dock--enlarged) .screen-video,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock.webcam-dock--enlarged .webcam-video,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .mini-cam-slot.mini-cam-slot--enlarged .webcam-video,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .mini-cam-slot.mini-cam-slot--enlarged .screen-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  max-height: none !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock:not(.webcam-dock--enlarged) .dock-title,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .screen-dock:not(.webcam-dock--enlarged) .dock-title {
  left: 8px !important;
  right: 72px !important;
  bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: left !important;
  z-index: 6 !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock:not(.webcam-dock--enlarged) .dock-close,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .screen-dock:not(.webcam-dock--enlarged) .screen-dock-close {
  top: 4px !important;
  right: 4px !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  font-size: 13px !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock:not(.webcam-dock--enlarged) .webcam-dock-enlarge {
  top: 4px !important;
  right: 34px !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  font-size: 13px !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .mini-cam-slot.mini-cam-slot--enlarged,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .mini-cam-slot.mini-cam-slot--enlarged .webcam-dock,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .mini-cam-slot.mini-cam-slot--enlarged .screen-dock,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock.webcam-dock--enlarged {
  width: var(--cc-ios-cam-w-large) !important;
  height: var(--cc-ios-cam-h-large) !important;
  min-width: var(--cc-ios-cam-w-large) !important;
  min-height: var(--cc-ios-cam-h-large) !important;
  max-height: var(--cc-ios-cam-h-large) !important;
  flex: 0 0 var(--cc-ios-cam-w-large) !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .webcam-dock .wb-pill,
html.cc-ios-shell .cc-ios-main-row.dock-top .cc-ios-cam-dock .screen-dock .wb-pill {
  top: auto !important;
  left: auto !important;
  bottom: 6px !important;
  right: 6px !important;
  font-size: 11px !important;
  line-height: 14px !important;
  padding: 2px 6px !important;
  z-index: 6 !important;
}

/* Spotify now-playing / Skip·Add — never on iOS (any cam, any tab) */
html.cc-ios-shell .webcam-now-playing,
html.cc-ios-shell #spotifyMiniDock,
html.cc-ios-shell #headerSpotifyBtn,
html.cc-ios-shell #spotifyDjModal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Mic level bar stays clear at bottom-left (do not cover with mixer) */
html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .audio-level-indicator,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .audio-level-indicator,
html.cc-ios-shell #webcamPanel .webcam-dock .audio-level-indicator,
html.cc-ios-shell .mini-cam-dock .webcam-dock .audio-level-indicator {
  left: 4px !important;
  bottom: 4px !important;
  top: auto !important;
  right: auto !important;
  z-index: 7 !important;
  pointer-events: none !important;
}

/*
 * Cam/mute/volume: top strip between ★ and enlarge/undock.
 * Hidden by default — show on hover (desktop) or tap (.cc-ios-show-audio on iOS).
 */
html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-audio-controls,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .webcam-audio-controls,
html.cc-ios-shell #webcamPanel .webcam-dock .webcam-audio-controls,
html.cc-ios-shell #webcamPanel .webcam-dock.has-now-playing .webcam-audio-controls,
html.cc-ios-shell .mini-cam-dock .webcam-dock .webcam-audio-controls,
html.cc-ios-shell .mini-cam-dock .webcam-dock.has-now-playing .webcam-audio-controls {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  top: 2px !important;
  left: 28px !important;
  right: 54px !important;
  bottom: auto !important;
  transform: none !important;
  padding: 2px 5px !important;
  gap: 3px !important;
  border-radius: 999px !important;
  z-index: 8 !important;
  background: rgba(0, 0, 0, 0.78) !important;
  max-width: none !important;
  width: auto !important;
  opacity: 0 !important;
  pointer-events: none !important;
  touch-action: manipulation !important;
  transition: opacity 0.15s ease !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock:hover .webcam-audio-controls,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock:hover .webcam-audio-controls,
html.cc-ios-shell .cc-ios-cam-dock .webcam-dock:focus-within .webcam-audio-controls,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock:focus-within .webcam-audio-controls,
html.cc-ios-shell .cc-ios-cam-dock .webcam-dock.cc-ios-show-audio .webcam-audio-controls,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock.cc-ios-show-audio .webcam-audio-controls,
html.cc-ios-shell #webcamPanel .webcam-dock:hover .webcam-audio-controls,
html.cc-ios-shell #webcamPanel .webcam-dock.cc-ios-show-audio .webcam-audio-controls,
html.cc-ios-shell .mini-cam-dock .webcam-dock:hover .webcam-audio-controls,
html.cc-ios-shell .mini-cam-dock .webcam-dock.cc-ios-show-audio .webcam-audio-controls {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-volume-slider,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .webcam-volume-slider,
html.cc-ios-shell #webcamPanel .webcam-dock .webcam-volume-slider,
html.cc-ios-shell .mini-cam-dock .webcam-dock .webcam-volume-slider {
  display: block !important;
  width: 44px !important;
  min-width: 36px !important;
  max-width: 56px !important;
  height: 4px !important;
  flex: 1 1 auto !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  opacity: 1 !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-volume-label,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .webcam-volume-label,
html.cc-ios-shell #webcamPanel .webcam-dock .webcam-volume-label {
  display: none !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-audio-mute-btn,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .webcam-audio-mute-btn,
html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-hide-video-btn,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .webcam-hide-video-btn {
  display: flex !important;
  min-width: 20px !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
  padding: 0 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-hide-video-btn svg,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .webcam-hide-video-btn svg {
  width: 13px !important;
  height: 13px !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock .webcam-dock .webcam-volume-slider,
html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock .screen-dock .webcam-volume-slider {
  width: 48px !important;
  min-width: 40px !important;
}

html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock .webcam-dock .webcam-audio-mute-btn,
html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock .screen-dock .webcam-audio-mute-btn,
html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock .webcam-dock .webcam-hide-video-btn,
html.cc-ios-shell .cc-ios-main-row.dock-side .cc-ios-cam-dock .screen-dock .webcam-hide-video-btn {
  min-width: 22px !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 12px !important;
}

html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .wb-pill,
html.cc-ios-shell .cc-ios-cam-dock .screen-dock .wb-pill {
  display: block !important;
  bottom: 2px !important;
  right: 2px !important;
  left: auto !important;
  z-index: 5 !important;
  pointer-events: none !important;
  font-size: 7px !important;
  line-height: 11px !important;
  padding: 0 3px !important;
}

html.cc-ios-shell .cc-ios-tab-panels {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: min(36vh, 280px);
  visibility: visible !important;
  opacity: 1 !important;
}

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

html.cc-ios-shell .cc-ios-tab-panel.active {
  display: flex !important;
  pointer-events: auto;
}

/* ── 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;
  flex: 1 1 0 !important;
  min-height: min(36vh, 280px) !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !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;
  position: relative !important;
  z-index: 1 !important;
}

html.cc-ios-shell #ccIosTabChat #chat .row {
  z-index: auto !important;
}

html.cc-ios-shell #ccIosTabChat .composer.cc-ios-composer {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 100050 !important;
  background: rgba(9, 14, 26, 0.97) !important;
  border-top: 1px solid var(--cc-ios-border) !important;
  padding: 6px 8px 6px 4px !important;
  flex-shrink: 0 !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
}

html.cc-ios-shell #ccIosTabChat .cc-ios-bottom-stack {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  z-index: 100050;
  position: relative;
  flex-shrink: 0;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
}

/* Keyboard open: pin composer above the keyboard. When closed, relative rules above win. */
html.cc-ios-shell.cc-ios-kb-open.cc-ios-tab-chat #composer.cc-ios-composer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  bottom: var(--cc-ios-kb-inset, 0px) !important;
  z-index: 100060 !important;
  margin: 0 !important;
  border-top: 1px solid var(--cc-ios-border) !important;
  padding: 6px 8px 6px 4px !important;
  background: rgba(9, 14, 26, 0.98) !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.55) !important;
}

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

html.cc-ios-shell.cc-ios-kb-open .scale-fit-container,
html.cc-ios-shell.cc-ios-main-focus .scale-fit-container,
html.cc-ios-shell.cc-ios-kb-open .scale-fit-viewport,
html.cc-ios-shell.cc-ios-main-focus .scale-fit-viewport,
html.cc-ios-shell.cc-ios-kb-open #ccIosShell,
html.cc-ios-shell.cc-ios-main-focus #ccIosShell,
html.cc-ios-shell.cc-ios-kb-open #ccIosTabChat #chat,
html.cc-ios-shell.cc-ios-main-focus #ccIosTabChat #chat {
  overflow-x: hidden !important;
  touch-action: pan-y;
  max-width: 100% !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 #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;
}

/* CCAPP-style say-something row: attach | pill field | circular send */
html.cc-ios-shell #ccIosTabChat .composer .input-row,
html.cc-ios-shell #ccIosTabChat .composer .input-row.cc-ios-composer-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

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

/* CCAPP ChatComposerBar — pill field, blue focus ring */
html.cc-ios-shell #ccIosTabChat .msg-compose-col {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  border: 1.5px solid #2a4060 !important;
  border-radius: 20px !important;
  background: #111d33 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: border-color 0.12s ease, background 0.12s ease;
}

html.cc-ios-shell #ccIosTabChat .msg-compose-col:focus-within,
html.cc-ios-shell.cc-ios-kb-open #ccIosTabChat .msg-compose-col {
  border-color: #60a5fa !important;
  background: #172540 !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: #ffffff !important;
  /* 16px minimum — iOS Safari auto-zooms smaller inputs and shifts the page sideways */
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  padding: 10px 14px !important;
  resize: none !important;
  box-shadow: none !important;
  caret-color: #60a5fa !important;
}

html.cc-ios-shell #ccIosTabChat #msg::placeholder {
  color: #4e6685 !important;
  opacity: 1 !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;
  -webkit-tap-highlight-color: transparent;
}

/* GIF / freeze chips removed from the CCAPP-style say-something bar. */
html.cc-ios-shell .cc-ios-composer-gif,
html.cc-ios-shell .cc-ios-composer-freeze,
html.cc-ios-shell .cc-ios-composer-gif[hidden],
html.cc-ios-shell .cc-ios-composer-freeze[hidden] {
  display: none !important;
}

html.cc-ios-shell .cc-ios-composer-freeze.is-frozen {
  background: #c62828;
  border-color: #b71c1c;
  color: #fff;
}

/* GIF Search modal — scrollable results on iOS */
html.cc-ios-shell #gifModal.pop {
  left: 50% !important;
  right: auto !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(600px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  height: min(780px, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)) !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  z-index: 100060 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: none;
  flex-direction: column !important;
}

html.cc-ios-shell #gifModal.pop.open {
  display: flex !important;
}

html.cc-ios-shell #gifModal .hd {
  flex: 0 0 auto !important;
  cursor: default !important;
}

html.cc-ios-shell #gifModal .bd {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 10px 12px !important;
  -webkit-overflow-scrolling: touch;
}

html.cc-ios-shell #gifModal .bd > .sub:first-child {
  flex: 0 0 auto !important;
}

html.cc-ios-shell #gifModal .bd > .sub:last-child {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html.cc-ios-shell #gifModal #gifSearchInput {
  font-size: 16px !important;
  min-height: 44px !important;
}

html.cc-ios-shell #gifModal #gifSearchBtn,
html.cc-ios-shell #gifModal .gif-category-btn {
  min-height: 44px !important;
}

html.cc-ios-shell #gifModal #gifResults {
  flex: 1 1 0 !important;
  min-height: 180px !important;
  max-height: none !important;
  height: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  padding-right: 4px !important;
  scrollbar-width: thin;
  scrollbar-color: #4a5a7a #0d1422;
}

html.cc-ios-shell #gifModal #gifResults::-webkit-scrollbar {
  width: 10px !important;
  display: block !important;
  -webkit-appearance: none !important;
}

html.cc-ios-shell #gifModal #gifResults::-webkit-scrollbar-track {
  background: #0d1422 !important;
  border-radius: 8px !important;
}

html.cc-ios-shell #gifModal #gifResults::-webkit-scrollbar-thumb {
  background: #4a5a7a !important;
  border-radius: 8px !important;
  border: 2px solid #0d1422 !important;
}

/* Staff Tools popup — centered, scrollable, touch-friendly sheet on iOS */
html.cc-ios-shell #staff.pop {
  left: 50% !important;
  right: auto !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(560px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  z-index: 100060 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  flex-direction: column !important;
}

html.cc-ios-shell #staff.pop.open {
  display: flex !important;
}

html.cc-ios-shell #staff .hd {
  flex: 0 0 auto !important;
  cursor: default !important;
  padding: 14px 16px !important;
}

html.cc-ios-shell #staff .hd h4 {
  font-size: 17px !important;
}

html.cc-ios-shell #staff .hd button {
  width: 40px !important;
  height: 40px !important;
  font-size: 18px !important;
  border-radius: 10px !important;
}

html.cc-ios-shell #staff .bd {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px 18px !important;
}

html.cc-ios-shell #staff .sub {
  padding: 8px 0 !important;
}

html.cc-ios-shell #staff .rowbtn {
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

html.cc-ios-shell #staff .rowbtn .cc-feature-btn {
  flex: 1 1 calc(50% - 10px) !important;
  min-width: calc(50% - 10px) !important;
  min-height: 54px !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  -webkit-tap-highlight-color: transparent;
}

html.cc-ios-shell #staff .rowbtn .cc-feature-btn:active {
  background: var(--cc-ios-blue, #3a7bd5) !important;
  color: #fff !important;
}

/* Features panel — fixed shell, scrollable body (same pattern as Staff) */
html.cc-ios-shell #feat.pop {
  left: 50% !important;
  right: auto !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(560px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  z-index: 100070 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  flex-direction: column !important;
}

html.cc-ios-shell #feat.pop.open {
  display: flex !important;
}

html.cc-ios-shell #feat .hd {
  flex: 0 0 auto !important;
  cursor: default !important;
  padding: 14px 16px !important;
}

html.cc-ios-shell #feat .hd h4 {
  font-size: 17px !important;
}

html.cc-ios-shell #feat .hd button {
  width: 40px !important;
  height: 40px !important;
  font-size: 18px !important;
  border-radius: 10px !important;
}

html.cc-ios-shell #feat .bd,
html.cc-ios-shell #feat #featBody {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 8px 14px 18px !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

html.cc-ios-shell #feat .sub {
  padding: 8px 0 !important;
}

html.cc-ios-shell #feat .rowbtn {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

html.cc-ios-shell #feat .cc-feature-btn {
  min-height: 44px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  touch-action: manipulation;
}

html.cc-ios-shell #feat #debugReportDesc {
  min-height: 88px !important;
  font-size: 16px !important;
}

/* Poll management reuses #feat — keep body scrollable */
html.cc-ios-shell #feat .poll-tab-content,
html.cc-ios-shell #feat #poll-create-tab,
html.cc-ios-shell #feat #poll-manage-tab {
  max-height: none !important;
  overflow: visible !important;
}

/* Preferences (Settings) — scrollable body on iOS; header + footer stay fixed */
html.cc-ios-shell #cc-prefs {
  left: 50% !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(980px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  z-index: 100080 !important;
  box-sizing: border-box !important;
}

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

html.cc-ios-shell #cc-prefs.open,
html.cc-ios-shell #cc-prefs[style*="display: flex"],
html.cc-ios-shell #cc-prefs[style*="display:flex"] {
  display: flex !important;
}

html.cc-ios-shell #cc-prefs-hd {
  flex: 0 0 auto !important;
  cursor: default !important;
}

html.cc-ios-shell #ccPrefsTabs.prefs-tabs {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  touch-action: manipulation;
}

html.cc-ios-shell #ccPrefsBody {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

html.cc-ios-shell #ccPrefsFooter {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

/* Blocked / muted list popup */
html.cc-ios-shell #pop.pop {
  left: 50% !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  transform: translateX(-50%) !important;
  width: min(520px, calc(100vw - 16px)) !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  z-index: 100080 !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

html.cc-ios-shell #pop.pop.open {
  display: flex !important;
}

html.cc-ios-shell #pop .bd,
html.cc-ios-shell #pop #popBody {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Quests + What's New */
html.cc-ios-shell #questsModal {
  align-items: flex-start !important;
  padding-top: max(12px, env(safe-area-inset-top)) !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.cc-ios-shell #questsBody,
html.cc-ios-shell .quests-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: min(72vh, 620px) !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

html.cc-ios-shell .quests-panel {
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px) !important;
  overflow: hidden !important;
}

html.cc-ios-shell #whatsNewPublicModal {
  padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) !important;
  align-items: flex-start !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y;
}

html.cc-ios-shell #whatsNewPublicModal > div {
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html.cc-ios-shell #whatsNewPublicModal > div > div:last-child {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y;
}

html.cc-ios-shell .cc-ios-menu-sheet {
  max-height: min(88vh, calc(100dvh - env(safe-area-inset-top) - 12px)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Global: any marked scroll region must receive touch pans on iOS */
html.cc-ios-shell .cc-ios-scrollable,
html.cc-ios-shell [data-cc-ios-scroll] {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

/* Staff favourite cams modal — full scrollable sheet on iOS (matches desktop module). */
html.cc-ios-shell #favCamsStaffOverlay {
  z-index: 2147483647 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding:
    max(env(safe-area-inset-top), 8px)
    max(env(safe-area-inset-right), 8px)
    max(env(safe-area-inset-bottom), 8px)
    max(env(safe-area-inset-left), 8px) !important;
}

html.cc-ios-shell #favCamsStaffOverlay > div {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 780px !important;
  max-height: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
}

html.cc-ios-shell #favCamsStaffBody {
  flex: 1 1 0% !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

html.cc-ios-shell #ccIosTabChat #send,
html.cc-ios-shell #ccIosTabChat #send.cc-ios-composer-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: #172540 !important;
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  opacity: 1 !important;
  -webkit-tap-highlight-color: transparent;
}

html.cc-ios-shell #ccIosTabChat #send.is-armed,
html.cc-ios-shell #ccIosTabChat #send.cc-ios-composer-send.is-armed {
  background: #60a5fa !important;
}

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='%238fa3c0'%3E%3Cpath d='M2.01 21 23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}

html.cc-ios-shell #ccIosTabChat #send.is-armed::after {
  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");
}

/* ── CCAPP chat typography + staff role badges ── */
html.cc-ios-shell #ccIosTabChat #chat {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

html.cc-ios-shell #ccIosTabChat #chat .cc-msg-line,
html.cc-ios-shell #ccIosTabChat #chat .cc-msg-body,
html.cc-ios-shell #ccIosTabChat #chat .col-msg {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

html.cc-ios-shell #ccIosTabChat #chat .msg-username {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

html.cc-ios-shell #ccIosTabChat #chat .col-time {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 10px !important;
  color: #4e6685 !important;
  font-weight: 400 !important;
}

/* Staff role tags beside chat names are retired — the role colour on the
   username below is the only staff marker left. Hidden rather than deleted so a
   stale cached bundle cannot paint one. */
html.cc-ios-shell #ccIosTabChat #chat .cc-ios-chat-role-badge,
html.cc-ios-shell #ccIosTabChat #chat .cc-chat-role-badge {
  display: none !important;
}

/* Role-colored usernames (CCAPP) when inline style missing / overridden */
html.cc-ios-shell #ccIosTabChat #chat .msg-username[data-cc-ios-role="owner"]:not(.cc-platinum-name) {
  color: #ff9800 !important;
  -webkit-text-fill-color: #ff9800 !important;
}

html.cc-ios-shell #ccIosTabChat #chat .msg-username[data-cc-ios-role="admin"]:not(.cc-platinum-name) {
  color: #ff3b30 !important;
  -webkit-text-fill-color: #ff3b30 !important;
}

html.cc-ios-shell #ccIosTabChat #chat .msg-username[data-cc-ios-role="moderator"]:not(.cc-platinum-name) {
  color: #818cf8 !important;
  -webkit-text-fill-color: #818cf8 !important;
}

html.cc-ios-shell #ccIosTabChat #chat .msg-username[data-cc-ios-role="jr_moderator"]:not(.cc-platinum-name) {
  color: #60a5fa !important;
  -webkit-text-fill-color: #60a5fa !important;
}

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-dm-pane[hidden],
html.cc-ios-shell .cc-ios-inbox-pane[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: 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.active {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

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;
  pointer-events: auto !important;
}

html.cc-ios-shell #ccIosTabUsers input,
html.cc-ios-shell #ccIosTabUsers button,
html.cc-ios-shell #ccIosTabUsers select,
html.cc-ios-shell #ccIosTabUsers .user {
  pointer-events: auto !important;
}

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

/* ── Casino tab ── */
html.cc-ios-shell #ccIosTabCasino {
  background: var(--cc-ios-bg);
}

html.cc-ios-shell .cc-ios-casino {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  box-sizing: border-box;
}

html.cc-ios-shell .cc-ios-casino-hero {
  text-align: center;
  margin: 2px 0 16px;
}

html.cc-ios-shell .cc-ios-casino-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--cc-ios-text);
}

html.cc-ios-shell .cc-ios-casino-hero-sub {
  font-size: 13px;
  color: var(--cc-ios-muted);
  margin-top: 2px;
}

html.cc-ios-shell .cc-ios-casino-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 14px;
  max-width: 560px;
}

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

html.cc-ios-shell .cc-ios-casino-page-btn {
  width: 40px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--cc-ios-border);
  background: var(--cc-ios-surface-high);
  color: var(--cc-ios-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html.cc-ios-shell .cc-ios-casino-page-btn:disabled {
  cursor: default;
}

html.cc-ios-shell .cc-ios-casino-page-btn:active:not(:disabled) {
  transform: scale(0.96);
  border-color: var(--cc-ios-blue);
}

html.cc-ios-shell .cc-ios-casino-page-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

html.cc-ios-shell .cc-ios-casino-page-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #2f3d57;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html.cc-ios-shell .cc-ios-casino-page-dot.active {
  background: #6aa7ff;
}

html.cc-ios-shell .cc-ios-casino-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}

html.cc-ios-shell .cc-ios-casino-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 12px;
  min-height: 132px;
  border: 1px solid var(--cc-ios-border);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--cc-ios-surface-high), var(--cc-ios-surface));
  color: var(--cc-ios-text);
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, border-color .12s ease;
}

html.cc-ios-shell .cc-ios-casino-card:active {
  transform: scale(0.96);
  border-color: var(--cc-ios-blue);
}

html.cc-ios-shell .cc-ios-casino-card-icon {
  font-size: 40px;
  line-height: 1;
}

html.cc-ios-shell .cc-ios-casino-card-name {
  font-size: 16px;
  font-weight: 700;
}

html.cc-ios-shell .cc-ios-casino-card-desc {
  font-size: 12px;
  color: var(--cc-ios-muted);
  line-height: 1.3;
}

/* iPad — roomier cards for the large 12.9" screen */
html.cc-ios-ipad .cc-ios-casino-grid {
  gap: 18px;
  max-width: 760px;
}

html.cc-ios-ipad .cc-ios-casino-card {
  min-height: 188px;
  padding: 30px 16px;
  border-radius: 20px;
}

html.cc-ios-ipad .cc-ios-casino-card-icon { font-size: 56px; }
html.cc-ios-ipad .cc-ios-casino-card-name { font-size: 20px; }
html.cc-ios-ipad .cc-ios-casino-card-desc { font-size: 14px; }

/* ── Casino games — fit the module to the Apple viewport ── */
/* iPhone: fill the safe-area viewport so the whole game is usable */
html.cc-ios-shell:not(.cc-ios-ipad) #hiLowModal .hilow-dialog,
html.cc-ios-shell:not(.cc-ios-ipad) #blackjackModal .bj-dialog,
html.cc-ios-shell:not(.cc-ios-ipad) #bingoModal .bg-window {
  left: env(safe-area-inset-left) !important;
  top: env(safe-area-inset-top) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: calc(100dvw - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100dvw !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
}

/* Yahtzee on iPhone: open near full-screen but allow touch resize / drag */
html.cc-ios-shell:not(.cc-ios-ipad) #yahtzeeModal .yz-window {
  left: env(safe-area-inset-left) !important;
  top: env(safe-area-inset-top) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  max-width: calc(100dvw - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}

/* iPhone: hide drag-to-resize handles when the game is full screen */
html.cc-ios-shell:not(.cc-ios-ipad) #hiLowModal .cc-game-resize-handle,
html.cc-ios-shell:not(.cc-ios-ipad) #blackjackModal .cc-game-resize-handle,
html.cc-ios-shell:not(.cc-ios-ipad) #bingoModal .bg-resize-handle {
  display: none !important;
}

/* Yahtzee — keep scorecards scrollable on iPhone; show a larger touch resize grip on iPad */
html.cc-ios-shell #yahtzeeModal .yz-body {
  overflow: hidden !important;
  min-height: 0 !important;
}

html.cc-ios-shell #yahtzeeModal .yz-body-view.active {
  overflow: hidden !important;
  min-height: 0 !important;
}

html.cc-ios-shell #yahtzeeModal .yz-game-view {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.cc-ios-shell #yahtzeeModal .yz-play-layout {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

html.cc-ios-shell #yahtzeeModal .yz-score-panel {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

html.cc-ios-shell:not(.cc-ios-ipad) #yahtzeeModal .yz-table-area {
  min-height: 180px !important;
  max-height: min(34vh, 240px) !important;
}

html.cc-ios-ipad #yahtzeeModal .yz-table-area {
  min-height: 180px !important;
  max-height: min(30vh, 240px) !important;
}

html.cc-ios-shell #yahtzeeModal .yz-scorecards-row,
html.cc-ios-shell #yahtzeeModal .yz-scorecards-row.yz-sc-cols-3,
html.cc-ios-shell #yahtzeeModal .yz-scorecards-row.yz-sc-cols-4,
html.cc-ios-shell #yahtzeeModal .yz-scorecards-row.yz-sc-cols-5,
html.cc-ios-shell #yahtzeeModal .yz-scorecards-row.yz-sc-cols-6 {
  grid-template-columns: 1fr !important;
}

html.cc-ios-shell #yahtzeeModal .yz-chat-box {
  flex-shrink: 0 !important;
}

html.cc-ios-shell #yahtzeeModal .yz-chat-log {
  max-height: 56px !important;
  min-height: 36px !important;
}

html.cc-ios-shell:not(.cc-ios-ipad) #yahtzeeModal .yz-resize-handle {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  touch-action: none;
}

html.cc-ios-ipad #yahtzeeModal .yz-resize-handle {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  touch-action: none;
}

/* iPad: near full-screen Yahtzee so scorecards have room to scroll */
html.cc-ios-ipad #yahtzeeModal .yz-window {
  left: env(safe-area-inset-left) !important;
  top: env(safe-area-inset-top) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: calc(100dvw - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  max-width: 100dvw !important;
  max-height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}

/* iPad: other casino games stay centered (default positioning) */

/* ── Messages tab (CCAPP DM / Inbox panel) ── */
html.cc-ios-shell #ccIosTabMessages {
  background: var(--cc-ios-surface);
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

html.cc-ios-shell #ccIosTabMessages:not(.active) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.cc-ios-shell #ccIosTabMessages.active {
  display: flex !important;
}

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-pane[hidden],
html.cc-ios-shell .cc-ios-inbox-pane[hidden] {
  display: none !important;
  flex: 0 0 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

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,
html.cc-ios-shell .cc-ios-dm-list.chat-inbox-list {
  max-height: none !important;
  overflow: visible !important;
}

html.cc-ios-shell .cc-ios-dm-list-wrap .chat-inbox-item,
html.cc-ios-shell .cc-ios-inbox-list-wrap .chat-inbox-item {
  background: var(--cc-ios-surface-high) !important;
  border: 1px solid var(--cc-ios-border) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  padding: 10px 12px !important;
  font-size: 0.92rem !important;
  color: var(--cc-ios-text) !important;
}

html.cc-ios-shell .cc-ios-dm-list-wrap .chat-inbox-item.unread,
html.cc-ios-shell .cc-ios-inbox-list-wrap .chat-inbox-item.unread {
  background: rgba(106, 167, 255, 0.12) !important;
  border-color: rgba(106, 167, 255, 0.4) !important;
}

html.cc-ios-shell .cc-ios-dm-list-wrap .chat-inbox-item-header,
html.cc-ios-shell .cc-ios-inbox-list-wrap .chat-inbox-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

html.cc-ios-shell .cc-ios-dm-list-wrap .chat-inbox-item-from,
html.cc-ios-shell .cc-ios-inbox-list-wrap .chat-inbox-item-from {
  font-weight: 600;
  color: #6aa7ff !important;
}

html.cc-ios-shell .cc-ios-dm-list-wrap .chat-inbox-item-date,
html.cc-ios-shell .cc-ios-inbox-list-wrap .chat-inbox-item-date {
  font-size: 0.8rem;
  color: var(--cc-ios-muted) !important;
  white-space: nowrap;
}

html.cc-ios-shell .cc-ios-dm-list-wrap .chat-inbox-item-preview,
html.cc-ios-shell .cc-ios-inbox-list-wrap .chat-inbox-item-preview {
  color: var(--cc-ios-muted) !important;
  cursor: pointer;
  margin: 4px 0;
}

html.cc-ios-shell .cc-ios-dm-list-wrap .chat-inbox-item-body,
html.cc-ios-shell .cc-ios-inbox-list-wrap .chat-inbox-item-body {
  margin: 6px 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

html.cc-ios-shell .cc-ios-dm-list-wrap .chat-inbox-item-actions,
html.cc-ios-shell .cc-ios-inbox-list-wrap .chat-inbox-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

html.cc-ios-shell .cc-ios-dm-list-wrap .chat-inbox-item-actions .btn,
html.cc-ios-shell .cc-ios-inbox-list-wrap .chat-inbox-item-actions .btn {
  padding: 4px 10px !important;
  font-size: 0.8rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--cc-ios-border) !important;
  background: var(--cc-ios-surface-high) !important;
  color: var(--cc-ios-text) !important;
}

html.cc-ios-shell .cc-ios-dm-list {
  display: block;
}

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;
  background: var(--cc-ios-bg);
}

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

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

html.cc-ios-shell.cc-ios-dm-thread-open .cc-ios-dm-pane,
html.cc-ios-shell.cc-ios-dm-thread-open .cc-ios-dm-thread,
html.cc-ios-shell.cc-ios-dm-thread-open .cc-ios-msg-content,
html.cc-ios-shell.cc-ios-dm-thread-open .cc-ios-msg-panel {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html.cc-ios-shell.cc-ios-dm-thread-open .cc-ios-msg-segbar,
html.cc-ios-shell.cc-ios-dm-thread-open .cc-ios-msg-compose-row,
html.cc-ios-shell.cc-ios-dm-thread-open .cc-ios-inbox-compose-wrap,
html.cc-ios-shell.cc-ios-dm-thread-open .cc-ios-dm-list-wrap {
  display: none !important;
}

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

html.cc-ios-shell .cc-ios-dm-thread-title {
  font-size: 17px;
  font-weight: 800;
  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;
  height: 100% !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;
  height: auto !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;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 12px !important;
  background: transparent !important;
}

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

html.cc-ios-shell .cc-ios-dm-thread-body .dmCompose .dm-tool-btn {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--cc-ios-text) !important;
  font-size: 20px !important;
  cursor: pointer !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmCompose .dm-gif-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: 40px !important;
  max-height: 88px !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  border-radius: 24px !important;
  border: 1px solid var(--cc-ios-border) !important;
  background: var(--cc-ios-surface-high) !important;
  color: #fff !important;
  box-shadow: none !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: 44px !important;
  width: 44px !important;
  height: 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;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmCompose .dm-send-btn::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 .cc-ios-dm-thread-body .dmRow {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0 6px !important;
  margin-bottom: 6px !important;
  clear: none !important;
  width: 100% !important;
  position: relative !important;
  padding-right: 56px !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmRow .mine,
html.cc-ios-shell .cc-ios-dm-thread-body .dmRow .theirs {
  display: inline !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #fff !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmRow.dm-incoming .theirs,
html.cc-ios-shell .cc-ios-dm-thread-body .dmRow.dm-outgoing .mine {
  color: #fff !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmRow .message-content {
  display: inline !important;
  font-size: 15px !important;
  color: #c8d0dc !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  float: none !important;
  width: auto !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmRow.dm-outgoing .message-content {
  color: #dce4f0 !important;
}

html.cc-ios-shell .cc-ios-dm-thread-body .dmRow .muted {
  position: absolute !important;
  right: 0 !important;
  top: 2px !important;
  float: none !important;
  margin: 0 !important;
  font-size: 11px !important;
  color: var(--cc-ios-dim) !important;
  white-space: nowrap !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;
}

/* Cam / mic permission explain + denied sheets (Safari-safe) */
html.cc-ios-shell .cc-ios-perm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100020;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

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

html.cc-ios-shell .cc-ios-perm-sheet {
  width: min(360px, 100%);
  background: linear-gradient(180deg, #152238 0%, #0b1220 100%);
  border: 1px solid var(--cc-ios-border);
  border-radius: 16px;
  padding: 20px 18px 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

html.cc-ios-shell .cc-ios-perm-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

html.cc-ios-shell .cc-ios-perm-body {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cc-ios-muted);
}

html.cc-ios-shell .cc-ios-perm-actions {
  display: flex;
  gap: 10px;
}

html.cc-ios-shell .cc-ios-perm-btn {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--cc-ios-border);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.cc-ios-shell .cc-ios-perm-btn.secondary {
  background: var(--cc-ios-surface);
  color: var(--cc-ios-text);
}

html.cc-ios-shell .cc-ios-perm-btn.primary {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  border-color: #93c5fd;
  color: #fff;
}

/* 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: default stays 180px; enlarge uses a wider landscape size */
@media (min-width: 768px) {
  html.cc-ios-shell.cc-ios-ipad .cc-ios-main-row.dock-top {
    --cc-ios-cam-w-large: min(55vw, 420px);
    --cc-ios-cam-h-large: calc(var(--cc-ios-cam-w-large) * 0.75);
  }

  html.cc-ios-shell .cc-ios-cam-dock .webcam-dock .webcam-audio-mute-btn,
  html.cc-ios-shell .cc-ios-cam-dock .screen-dock .webcam-audio-mute-btn {
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
}

/* Soundboard + Connection Check usable on iOS shell */
html.cc-ios-shell .cc-sb-panel.open {
  left: 2.5vw !important;
  right: 2.5vw !important;
  top: max(8vh, env(safe-area-inset-top, 0px) + 12px) !important;
  width: auto !important;
  max-width: 95vw !important;
  height: min(78vh, 640px) !important;
  z-index: 100120 !important;
}

html.cc-ios-shell #pingDiagModal {
  left: 50% !important;
  right: auto !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(540px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
  z-index: 100130 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html.cc-ios-shell #pingDiagModal.open,
html.cc-ios-shell #pingDiagModal[style*="display: flex"],
html.cc-ios-shell #pingDiagModal[style*="display:flex"],
html.cc-ios-shell #pingDiagModal[style*="display: block"],
html.cc-ios-shell #pingDiagModal[style*="display:block"] {
  display: flex !important;
}

html.cc-ios-shell #pingDiagModal .hd {
  flex: 0 0 auto !important;
  cursor: default !important;
}

html.cc-ios-shell #pingDiagModal .bd,
html.cc-ios-shell #pingDiagModal #pingDiagBody {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

html.cc-ios-shell #screenShareModal {
  z-index: 100110 !important;
  max-width: 96vw !important;
}

/* Full-screen Login / Register / Guest (matches homepage yellow ChatCrack login) */
html.cc-ios-shell .cc-ios-room-auth {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: #000;
  color: #e7ecf3;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html.cc-ios-shell .cc-ios-room-auth.open { display: flex; }
html.cc-ios-shell.cc-ios-room-auth-open #ccAuthBackdrop { display: none !important; }

html.cc-ios-shell .cc-ios-room-auth-brand { text-align: center; margin: 18px 0 16px; }
html.cc-ios-shell .cc-ios-room-auth-logo {
  width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 14px;
  background: #b8f000; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.12);
}
html.cc-ios-shell .cc-ios-room-auth-logo span {
  width: 18px; height: 18px; border: 2px solid #0b1220; border-radius: 50%;
}
html.cc-ios-shell .cc-ios-room-auth-name {
  font-size: 28px; font-weight: 800; color: #c6ff00; letter-spacing: .01em;
}
html.cc-ios-shell .cc-ios-room-auth-tag {
  margin: 6px 0 0; color: #d7deea; font-size: 13px;
}
html.cc-ios-shell .cc-ios-room-auth-card {
  width: min(400px, 100%);
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  padding: 18px 16px 16px;
  box-sizing: border-box;
}
html.cc-ios-shell .cc-ios-room-auth-card h1 {
  margin: 0; font-size: 24px; font-weight: 800; color: #f0d54a;
}
html.cc-ios-shell .cc-ios-room-auth-sub {
  margin: 4px 0 14px; color: #d7deea; font-size: 13px; line-height: 1.35;
}
html.cc-ios-shell .cc-ios-room-auth-field {
  display: flex; align-items: center; gap: 8px;
  background: #0b0b0b; border: 1px solid #333; border-radius: 12px;
  padding: 0 12px; margin-bottom: 10px;
}
html.cc-ios-shell .cc-ios-room-auth-field input {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent;
  color: #f0d54a; font-size: 15px; padding: 12px 0; outline: none;
}
html.cc-ios-shell .cc-ios-room-auth-field input::placeholder { color: #f0d54a; opacity: .85; }
html.cc-ios-shell .cc-ios-room-auth-check {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: #d7deea; margin: 4px 0 8px;
}
html.cc-ios-shell .cc-ios-room-auth-check input { width: 16px; height: 16px; accent-color: #38bdf8; }
html.cc-ios-shell .cc-ios-room-auth-forgot {
  display: block; text-align: right; color: #fff; font-size: 13px; margin: 0 0 12px; text-decoration: none;
}
html.cc-ios-shell .cc-ios-room-auth-primary {
  width: 100%; border: none; border-radius: 12px; padding: 13px 14px;
  font-size: 16px; font-weight: 800; background: #9ec9e8; color: #0b1220; cursor: pointer;
}
html.cc-ios-shell .cc-ios-room-auth-primary.is-green { background: #22c55e; }
html.cc-ios-shell .cc-ios-room-auth-primary.is-guest { background: #64748b; color: #fff; }
html.cc-ios-shell .cc-ios-room-auth-switch {
  margin: 14px 0 0; text-align: center; color: #d7deea; font-size: 13px;
}
html.cc-ios-shell .cc-ios-room-auth-switch button {
  border: none; background: none; color: #c6ff00; font-weight: 800; font-size: 13px; cursor: pointer; padding: 0;
}
html.cc-ios-shell .cc-ios-room-auth-label {
  margin: 4px 0 8px; color: #d7deea; font-size: 13px; font-weight: 600;
}
html.cc-ios-shell .cc-ios-room-auth-gender {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
}
html.cc-ios-shell .cc-ios-room-auth-gender button {
  border: 1px solid #333; background: #0b0b0b; color: #d7deea; border-radius: 12px; padding: 12px; font-weight: 700; cursor: pointer;
}
html.cc-ios-shell .cc-ios-room-auth-gender button.is-on {
  border-color: #c6ff00; background: rgba(198,255,0,.12); color: #fff;
}
html.cc-ios-shell .cc-ios-room-auth-msg {
  width: min(400px, 100%); min-height: 1.2em; margin: 12px 0 0; text-align: center; font-size: 13px; color: #8fa3c0;
}
html.cc-ios-shell .cc-ios-room-auth-msg.is-err { color: #f87171; }
html.cc-ios-shell .cc-ios-room-auth-msg.is-ok { color: #34d399; }
html.cc-ios-shell .cc-ios-room-auth-x {
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px;
  width: 40px; height: 40px; border: none; border-radius: 10px;
  background: transparent; color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}