/**
 * CopyWeb Publicidad — Unified Design System & Theme Overrides
 * Audited and generated using Leonxlnx/taste-skill (redesign-existing-projects & design-taste-frontend)
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   1. BRAND TOKENS & CALIBRATED PALETTE
   ========================================================================== */

:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --typography-fonts-base: var(--font-sans) !important;

  /* Calibrated CopyWeb Violet Ramp (Saturation < 80%, WCAG AA Compliant) */
  --cw-violet-50:  #f5f3ff;
  --cw-violet-100: #ede9fe;
  --cw-violet-200: #ddd6fe;
  --cw-violet-300: #c4b5fd;
  --cw-violet-400: #a78bfa;
  --cw-violet-500: #855bf2;
  --cw-violet-600: #6c3fe7; /* Canonical Brand Primary */
  --cw-violet-700: #582cd1; /* Hover / Active */
  --cw-violet-800: #4620b0;
  --cw-violet-900: #371790;
  --cw-violet-glow: rgba(108, 63, 231, 0.24);
  --cw-violet-tint: rgba(108, 63, 231, 0.12);

  /* Functional Accents */
  --cw-success: #10b981;
  --cw-warning: #f59e0b;
  --cw-danger:  #ef4444;
}

/* --------------------------------------------------------------------------
   DARK THEME (Default & Primary Experience)
   Replaces muddy dead #000 and clashing navy blues with unified charcoal-violet
   -------------------------------------------------------------------------- */
:root .dark,
body.dark,
html.dark,
[data-theme="dark"] {
  /* Surfaces & Hierarchy */
  --new-bgColor:        #0d0d12 !important; /* Deepest Canvas */
  --new-bgColorInner:   #15151e !important; /* Raised Cards / Studio / Panels */
  --new-border:         #252533 !important; /* Subtle Outer Borders */
  --new-table-border:   #232330 !important; /* Internal Grid Borders */
  --new-bgLineColor:    #1c1c26 !important; /* Secondary Separators */
  --new-blockSeparator: #1e1e28 !important;
  --new-table-header:   #181822 !important; /* Headers / Sub-panels */
  --new-box-hover:      #1f1f2a !important; /* Interactive Hover Rows */
  --new-col-color:      #171720 !important;
  --new-small-strips:   #15151e !important;
  --new-big-strips:     #13131b !important;
  --new-settings:       #191924 !important;

  /* Typography Colors */
  --color-text:         #f3f4f6 !important;
  --new-textColor:      243 244 246 !important;
  --new-textItemBlur:   #9ca3af !important; /* Pass WCAG AA contrast against #15151e */
  --new-textItemFocused:#ffffff !important;
  --color-gray:         #9ca3af !important;
  --color-input-text:   #94a3b8 !important;

  /* Interactive / Brand Accent (Single Consolidated Violet Ramp) */
  --new-btn-primary:    #6c3fe7 !important;
  --new-btn-text:       #ffffff !important;
  --new-btn-simple:     #22222f !important;
  --new-ai-btn:         #794beb !important; /* Replaces clashing magenta #d82d7e */
  --color-forth:        #6c3fe7 !important;
  --color-seventh:      #7c52f5 !important;
  --color-custom4:      #855bf2 !important;
  --color-custom7:      #7c52f5 !important;
  --color-custom28:     #b095f7 !important;
  --color-custom29:     #231649 !important;
  --color-custom30:     #582cd1 !important;
  --color-custom45:     #7c52f5 !important;
  --color-custom51:     #6c3fe7 !important; /* Replaces clashing indigo #4f46e5 */
  --colors-primary:     #855bf2 !important;
  --new-table-text-focused: #b095f7 !important;
  --new-boxFocused:     rgba(108, 63, 231, 0.18) !important;

  /* Modals & Overlays */
  --new-back-drop:      rgba(8, 8, 14, 0.82) !important;
  --color-modalCustom:  rgba(8, 8, 14, 0.82) !important;
  --popup-color:        rgba(15, 15, 24, 0.6) !important;
  --menu-shadow:        0 16px 40px -4px rgba(4, 4, 8, 0.7), 0 4px 12px -2px rgba(4, 4, 8, 0.5) !important;
}

/* --------------------------------------------------------------------------
   LIGHT THEME (Cohesive, Clean Slate & Violet)
   -------------------------------------------------------------------------- */
:root .light,
body.light,
html.light,
[data-theme="light"] {
  --new-bgColor:        #f8f9fc !important;
  --new-bgColorInner:   #ffffff !important;
  --new-border:         #e2e4ea !important;
  --new-table-border:   #eaedf2 !important;
  --new-bgLineColor:    #e8ebf0 !important;
  --new-blockSeparator: #f0f2f6 !important;
  --new-table-header:   #f5f7fa !important;
  --new-box-hover:      #f3f5f9 !important;
  --new-col-color:      #eff2f7 !important;

  --color-text:         #0f172a !important;
  --new-textColor:      15 23 42 !important;
  --new-textItemBlur:   #64748b !important;
  --new-textItemFocused:#582cd1 !important;

  --new-btn-primary:    #6c3fe7 !important;
  --new-btn-simple:     #eceff4 !important;
  --new-btn-text:       #0f172a !important;
  --new-ai-btn:         #6c3fe7 !important;
  --color-forth:        #6c3fe7 !important;

  --new-back-drop:      rgba(15, 23, 42, 0.45) !important; /* Neutral backdrop, not purple */
  --color-modalCustom:  rgba(15, 23, 42, 0.45) !important;
  --menu-shadow:        0 14px 34px -4px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

/* ==========================================================================
   2. TYPOGRAPHY & TABULAR NUMERALS
   ========================================================================== */

html, body {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabular Numerals for Calendars, Time, Analytics & Sliders */
table,
.tabular-nums,
[class*="calendar"],
[class*="analytics"],
input[type="range"] + span,
span[class*="font-mono"] {
  font-variant-numeric: tabular-nums !important;
}

/* Fix Micro-Text Clutter (12px minimum floor for interface labels) */
.text-\[9px\],
.text-\[10px\] {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

/* Balanced Headlines */
h1, h2, h3, h4 {
  text-wrap: balance !important;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   3. ACCESSIBILITY & FOCUS RINGS
   ========================================================================== */

/* High-Contrast, Consistent Focus Rings */
:focus-visible {
  outline: 2px solid var(--cw-violet-500) !important;
  outline-offset: 2px !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cw-violet-500) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--cw-violet-tint) !important;
}

/* Remove blinding white focus rings on dark inputs */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--cw-violet-500) !important;
}

/* ==========================================================================
   4. MICRO-INTERACTIONS & TACTILE RESPONSIVENESS
   ========================================================================== */

/* Smooth Interactive Transitions */
button,
[role="button"],
a,
input,
select,
textarea {
  transition: background-color 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.08s ease !important;
}

/* Tactile Button Press (Physics Simulation) */
button:not(:disabled):active,
[role="button"]:not(:disabled):active,
a.bg-btnPrimary:active {
  transform: scale(0.982) translateY(0.5px) !important;
}

/* Primary Button Elevating Glow */
button.bg-btnPrimary,
.bg-btnPrimary {
  background-color: var(--cw-violet-600) !important;
  color: #ffffff !important;
}

button.bg-btnPrimary:hover,
.bg-btnPrimary:hover {
  background-color: var(--cw-violet-700) !important;
  box-shadow: 0 4px 14px var(--cw-violet-glow) !important;
}

/* ==========================================================================
   5. SURFACES, RADIUS & GLASSMORPHISM
   ========================================================================== */

/* Radius Scale Normalization:
   - Controls: 8px
   - Panels / Containers: 12px
   - Modals: 16px
*/
input,
select,
textarea,
button.rounded-\[6px\],
button.rounded-\[5px\],
div.rounded-\[6px\],
div.rounded-\[5px\] {
  border-radius: 8px !important;
}

/* Floating Studio Windows & Overlays (True Frosted Glass) */
.floating-studio-window {
  background-color: rgba(21, 21, 30, 0.92) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 36px -4px rgba(4, 4, 8, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px !important;
}

/* Toast Notifications */
.fixed.bottom-24.right-6 {
  background-color: rgba(21, 21, 30, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5) !important;
  border-radius: 10px !important;
}

/* ==========================================================================
   6. CUSTOM SLEEK SCROLLBARS
   ========================================================================== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(150, 150, 185, 0.22);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 150, 185, 0.38);
}

/* ==========================================================================
   7. REDUCED MOTION SAFETY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   8. TARGETED CHUNK & COMPONENT REFINEMENTS
   ========================================================================== */

/* Auth & Onboarding Cards */
.bg-\[\#1A1919\] {
  background-color: var(--new-bgColorInner) !important;
  border-color: var(--new-border) !important;
}

/* Input Placeholder Contrast */
input::placeholder,
textarea::placeholder {
  color: var(--color-input-text) !important;
  opacity: 0.8 !important;
}

/* Studio & Media Badges / Highlights */
.bg-\[\#612BD3\] {
  background-color: var(--cw-violet-600) !important;
}

.border-\[\#411996\] {
  border-color: var(--cw-violet-800) !important;
}

.text-\[\#00EB75\],
.text-\[\#00FF00\],
.text-\[\#06ff00\] {
  color: var(--cw-success) !important;
}

/* Prevent text overflow in dense studio controls */
.floating-studio-window input[type="text"],
.floating-studio-window input[type="number"],
.floating-studio-window select {
  font-family: var(--font-mono), var(--font-sans) !important;
}

/* ==========================================================================
   9. MOBILE RESPONSIVE ENGINE (PHASES 1–4)
   Targeted for handheld devices (<= 768px viewports)
   ========================================================================== */

@media (max-width: 768px) {
  /* --- 9.1 Full-Bleed App Shell --- */
  body > div > div.p-\[12px\],
  div.min-h-screen.min-w-screen.p-\[12px\],
  .text-newTextColor.p-\[12px\] {
    padding: 0 !important;
  }

  .rounded-\[12px\].overflow-hidden {
    border-radius: 0 !important;
  }

  /* Viewport stability (100dvh prevents address bar jump) */
  .min-h-screen {
    min-height: 100dvh !important;
  }

  /* --- 9.2 Compact Mobile Header (56px) --- */
  .bg-newBgColorInner.h-\[80px\] {
    height: 56px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .bg-newBgColorInner.h-\[80px\] .text-\[24px\] {
    font-size: 17px !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .bg-newBgColorInner.h-\[80px\] .gap-\[20px\] {
    gap: 8px !important;
  }

  /* Hide decorative header vertical dividers to prevent wrapping */
  .bg-newBgColorInner.h-\[80px\] .bg-blockSeparator {
    display: none !important;
  }

  /* --- 9.3 Safe-Area Bottom Navigation --- */
  div.fixed.bottom-0.start-0.end-0,
  div.mobile\:flex.fixed.bottom-0 {
    height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-top: 4px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    background-color: rgba(18, 18, 26, 0.96) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-top: 1px solid var(--new-table-border, #252533) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  div.fixed.bottom-0.start-0.end-0::-webkit-scrollbar,
  div.mobile\:flex.fixed.bottom-0::-webkit-scrollbar {
    display: none !important;
  }
  div.fixed.bottom-0.start-0.end-0 > div,
  div.mobile\:flex.fixed.bottom-0 > div {
    flex: 0 0 auto !important;
    min-width: 48px !important;
    max-width: 66px !important;
  }
  div.fixed.bottom-0.start-0.end-0 a,
  div.mobile\:flex.fixed.bottom-0 a {
    height: 48px !important;
    padding: 3px 2px !important;
    gap: 2px !important;
  }
  div.fixed.bottom-0.start-0.end-0 a div:last-child,
  div.mobile\:flex.fixed.bottom-0 a div:last-child {
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.3px !important;
    line-height: 1.1 !important;
  }

  /* Ensure page content is not covered by the bottom bar */
  .blurMe > div:last-child,
  main,
  .mobile\:flex-col > .bg-newBgColorInner.flex-1 {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --- 9.4 Calendar Responsive Adaptation (/launches) --- */
  /* Month View: Fit 100% within the mobile viewport without overflowing or clipping */
  .grid.grid-cols-7.grid-rows-\[62px_auto\],
  .grid.grid-cols-7 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 2px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .grid.grid-cols-7 > div {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Compact day header in Month View on mobile */
  .grid.grid-cols-7 > div.sticky.top-0 {
    height: 32px !important;
    min-height: 32px !important;
    padding: 2px !important;
    border-radius: 4px !important;
  }

  .grid.grid-cols-7 > div.sticky.top-0 > div {
    font-size: 10px !important;
    font-weight: 600 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  /* Date number & cell height in Month View */
  .grid.grid-cols-7 .pt-\[6px\].text-\[14px\] {
    padding-top: 2px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  .grid.grid-cols-7 .min-h-\[70px\] {
    min-height: 44px !important;
  }

  /* Tighten main content padding around calendar on mobile so columns have full width */
  .bg-newBgColorInner.p-\[20px\].flex-1.flex-col,
  .mobile\:flex-col > .bg-newBgColorInner.flex-1 {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 8px !important;
  }

  /* Week View with 8 columns (hours + 7 days): slim hour column, smooth swipe, sticky hours */
  div[class*="grid-template-columns:136px"],
  .grid[class*="[grid-template-columns:136px"] {
    grid-template-columns: 56px repeat(7, minmax(76px, 1fr)) !important;
    min-width: 588px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Sticky hours column on the left */
  div[class*="grid-template-columns:136px"] > div:nth-child(8n + 1),
  .grid[class*="[grid-template-columns:136px"] > div:nth-child(8n + 1) {
    position: sticky !important;
    left: 0 !important;
    z-index: 30 !important;
    background: var(--new-table-header, #191924) !important;
    width: 56px !important;
    min-width: 56px !important;
    font-size: 11px !important;
    text-align: center !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* Sticky top-left intersection cell */
  div[class*="grid-template-columns:136px"] > div:first-child,
  .grid[class*="[grid-template-columns:136px"] > div:first-child {
    z-index: 40 !important;
  }

  /* Compact day headers in Week View */
  div[class*="grid-template-columns:136px"] > div.sticky.top-0,
  .grid[class*="[grid-template-columns:136px"] > div.sticky.top-0 {
    font-size: 11px !important;
    padding: 4px 2px !important;
  }

  /* Hide stray empty channel illustration in mobile top bar */
  .mobile\:flex-col > div:first-child:not(.flex-1) img[src*="no-channels"] {
    display: none !important;
  }
  .mobile\:flex-col > div:first-child:not(.flex-1) .select-none {
    display: none !important;
  }

  /* Mobile Analytics empty state refinement */
  .bg-newBgColorInner:has(img[src*="peoplemarketplace.svg"]) {
    padding: 24px 16px !important;
    gap: 12px !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }
  .bg-newBgColorInner:has(img[src*="peoplemarketplace.svg"]) img,
  img[src*="peoplemarketplace.svg"] {
    max-height: 120px !important;
    width: auto !important;
    margin-bottom: 8px !important;
  }
  .bg-newBgColorInner:has(img[src*="peoplemarketplace.svg"]) .text-\[48px\] {
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }
  .bg-newBgColorInner:has(img[src*="peoplemarketplace.svg"]) .text-\[20px\] {
    font-size: 13px !important;
    line-height: 1.4 !important;
    opacity: 0.8 !important;
    word-break: break-word !important;
  }
  .bg-newBgColorInner:has(img[src*="peoplemarketplace.svg"]) button {
    margin-top: 6px !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
  }

  /* --- 9.5 AI Media Studio Touch Ergonomics (/media) --- */
  .floating-studio-window {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 50dvh !important;
    border-radius: 16px 16px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid var(--new-table-border, #252533) !important;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.7) !important;
    z-index: 1001 !important;
    transform: none !important;
  }

  /* Make media studio action bar scroll horizontally without wrapping */
  header.border-b.border-newTableBorder div.flex.items-center.justify-between {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    flex-wrap: nowrap !important;
  }

  header.border-b.border-newTableBorder div.flex.items-center.justify-between::-webkit-scrollbar {
    display: none !important;
  }

  /* --- 9.6 iOS Safari Auto-Zoom Elimination --- */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* --- 9.7 Universal Dialog Constraints --- */
  /* =========================================================================
     UNIVERSAL MOBILE POPUP & MODAL FIXES (Postiz ModalManager & Mantine)
     ========================================================================= */

  /* 1. ModalManager Backdrop & Viewport Fit */
  .fixed.bg-popup,
  div[style*="z-index"]:has(.bg-newBgColorInner) {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    z-index: 100000 !important;
    background: rgba(10, 10, 16, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* Multi-modal stacking: secondary and tertiary popups stack above base */
  .fixed.bg-popup ~ .fixed.bg-popup,
  .fixed.bg-popup:nth-of-type(2),
  .fixed.bg-popup:has(.flex.gap-\[12px\].mt-\[16px\]),
  .fixed.bg-popup:has(button[class*="mantine-Modal-close"]) {
    z-index: 100020 !important;
  }

  .fixed.bg-popup ~ .fixed.bg-popup ~ .fixed.bg-popup,
  .fixed.bg-popup:nth-of-type(3) {
    z-index: 100030 !important;
  }

  /* 2. Reset Desktop 100px Spacers inside ModalManager */
  .fixed.bg-popup:not(:has(#social-content)) > .relative.flex-1 {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    position: static !important;
    padding: 16px !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  .fixed.bg-popup:not(:has(#social-content)) .absolute.min-w-full,
  .fixed.bg-popup:not(:has(#social-content)) div[class*="pt-\[100px\]"],
  .fixed.bg-popup:not(:has(#social-content)) div[class*="pb-\[100px\]"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
  }

  /* 3. Universal Modal Card Container (.bg-newBgColorInner) */
  .fixed.bg-popup:not(:has(#social-content)) .bg-newBgColorInner,
  .fixed.bg-popup:not(:has(#social-content)) .min-w-\[600px\],
  .fixed.bg-popup:not(:has(#social-content)) div[class*="w-fit"],
  .fixed.bg-popup:not(:has(#social-content)) .w-\[100\%\] {
    width: 100% !important;
    max-width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    max-height: calc(100dvh - 48px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: auto !important;
    padding: 20px 16px !important;
    gap: 16px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    background: var(--new-bgColorInner, #161622) !important;
    border: 1px solid var(--new-table-border, #2d2d3f) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important;
    position: relative !important;
  }

  /* Modal Title & Close Button */
  .fixed.bg-popup:not(:has(#social-content)) .text-\[24px\].font-\[600\],
  .fixed.bg-popup:not(:has(#social-content)) h2,
  .fixed.bg-popup:not(:has(#social-content)) .text-\[18px\].font-\[600\] {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    padding-right: 36px !important;
  }

  .fixed.bg-popup:not(:has(#social-content)) .mantine-Modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    color: #e5e7eb !important;
  }

  /* 4. Decision & Confirmation Dialogs ("Are you sure?", Delete Post) */
  .fixed.bg-popup .bg-newBgColorInner .flex.gap-\[12px\].mt-\[16px\],
  .fixed.bg-popup .bg-newBgColorInner .flex.gap-\[2px\].justify-center {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 16px !important;
  }

  .fixed.bg-popup .bg-newBgColorInner .flex.gap-\[12px\].mt-\[16px\] button,
  .fixed.bg-popup .bg-newBgColorInner .flex.gap-\[2px\].justify-center button {
    flex: 1 1 50% !important;
    min-height: 44px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 5. Add Provider / Channels Modal (5 cols -> 2 cols) */
  .fixed.bg-popup .grid.grid-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .fixed.bg-popup .grid.grid-cols-5 > div {
    width: 100% !important;
    min-width: 0 !important;
    height: 84px !important;
    padding: 8px !important;
    font-size: 13px !important;
  }

  .fixed.bg-popup .grid.grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* 6. Change Language Modal (4 cols -> 2 cols) */
  .fixed.bg-popup .grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .fixed.bg-popup .grid.grid-cols-4 > div {
    padding: 12px 8px !important;
  }

  /* 7. Select Company Modal */
  .fixed.bg-popup .w-\[500px\] {
    width: 100% !important;
    max-width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 200px !important;
  }

  /* 8. Notifications Popup */
  #notification-popup {
    position: fixed !important;
    top: 56px !important;
    left: 12px !important;
    right: 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 80px) !important;
    z-index: 100005 !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7) !important;
  }

  /* 9. Organization Selector Popover */
  .group.text-\[12px\].relative > div.group-hover\:flex,
  .group.text-\[12px\].relative > div.flex-col {
    position: fixed !important;
    top: 56px !important;
    left: 16px !important;
    right: 16px !important;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    z-index: 100005 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7) !important;
  }

  /* 10. Mantine Dropdowns, Popovers, Selects, Menus & Portals */
  .mantine-Select-dropdown,
  .mantine-Popover-dropdown,
  .mantine-Menu-dropdown,
  .mantine-DatePicker-dropdown,
  div[class*="mantine-Select-dropdown"],
  div[class*="mantine-Popover-dropdown"],
  div[class*="mantine-Menu-dropdown"],
  .mantine-Portal-root,
  .mantine-Portal-root > div,
  div[data-portal="true"],
  div[id*="mantine-"] {
    z-index: 100050 !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
  }


  .mantine-Modal-content:not(:has(#social-content)),
  [role="dialog"]:not(:has(#social-content)):not(#add-edit-modal) {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
    max-height: calc(100dvh - 32px) !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
  }

  [role="dialog"]:not(:has(#social-content)) button:not([class*="toolBar"] *):not(.select-none button),
  .mantine-Modal-content:not(:has(#social-content)) button:not([class*="toolBar"] *) {
    min-height: 44px !important;
  }

  /* --- 9.8 Channels & Action Buttons Mobile Header Bar (/launches) --- */
  /* Ensure the sidebar transforms into a slim, compact top bar */
  .mobile\:flex-col > div:first-child:not(.flex-1),
  .mobile\:flex-col > .w-\[260px\],
  .mobile\:flex-col > .w-\[100px\],
  .mobile\:flex-col > div[class*="sidebar"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    position: relative !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: var(--new-bgColorInner, #15151e) !important;
    border-bottom: 1px solid var(--new-table-border, #252533) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Inner scrolling row: Action buttons on left, channels scrolling smoothly to the right */
  .mobile\:flex-col > div:first-child:not(.flex-1) > div,
  .mobile\:flex-col > .w-\[260px\] > div,
  .mobile\:flex-col > .w-\[100px\] > div {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 0 10px !important;
    margin: 0 !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  .mobile\:flex-col > div:first-child:not(.flex-1) > div::-webkit-scrollbar,
  .mobile\:flex-col > .w-\[260px\] > div::-webkit-scrollbar,
  .mobile\:flex-col > .w-\[100px\] > div::-webkit-scrollbar {
    display: none !important;
  }

  /* Hide Channels title, toggle button, and version footer text on mobile */
  .mobile\:flex-col > div:first-child:not(.flex-1) h2,
  .mobile\:flex-col > .w-\[260px\] h2,
  .mobile\:flex-col > .w-\[100px\] h2,
  .mobile\:flex-col > div:first-child:not(.flex-1) .group-\[\.sidebar\]\:rotate-\[180deg\],
  .mobile\:flex-col > .w-\[260px\] .group-\[\.sidebar\]\:rotate-\[180deg\],
  .mobile\:flex-col > .w-\[100px\] .group-\[\.sidebar\]\:rotate-\[180deg\],
  .mobile\:flex-col > div:first-child:not(.flex-1) > div > div.flex.items-center:first-child,
  .mobile\:flex-col > div:first-child:not(.flex-1) > div > div.mt-\[5px\] {
    display: none !important;
  }

  /* Compact Action Buttons Container ("Add Channel", "New Post", "AI") */
  .mobile\:flex-col > div:first-child:not(.flex-1) > div > div.flex.flex-col:not(.select-none) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 6px !important;
    margin: 0 !important;
    padding-right: 8px !important;
    border-right: 1px solid var(--new-table-border, #252533) !important;
  }

  .mobile\:flex-col > div:first-child:not(.flex-1) > div > div.flex.flex-col:not(.select-none) > div.flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  /* "Add Channel" Button: Compact tactile 36x36 icon button */
  .mobile\:flex-col > div:first-child:not(.flex-1) button.bg-btnSimple,
  .mobile\:flex-col > .w-\[260px\] button.bg-btnSimple,
  .mobile\:flex-col > .w-\[100px\] button.bg-btnSimple {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--new-btn-simple, #22222f) !important;
    border: 1px solid var(--new-border, #252533) !important;
    flex: 0 0 36px !important;
    box-sizing: border-box !important;
  }

  /* "Create Post" Button: Compact vibrant violet pill with label on mobile */
  .mobile\:flex-col > div:first-child:not(.flex-1) button.bg-btnPrimary,
  .mobile\:flex-col > .w-\[260px\] button.bg-btnPrimary,
  .mobile\:flex-col > .w-\[100px\] button.bg-btnPrimary {
    width: auto !important;
    min-width: 86px !important;
    max-width: 110px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: var(--cw-violet-600, #6c3fe7) !important;
    border: none !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  .mobile\:flex-col > div:first-child:not(.flex-1) button.bg-btnPrimary svg,
  .mobile\:flex-col > .w-\[260px\] button.bg-btnPrimary svg,
  .mobile\:flex-col > .w-\[100px\] button.bg-btnPrimary svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }

  .mobile\:flex-col > div:first-child:not(.flex-1) button.bg-btnPrimary > div,
  .mobile\:flex-col > .w-\[260px\] button.bg-btnPrimary > div,
  .mobile\:flex-col > .w-\[100px\] button.bg-btnPrimary > div {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* AI Generator Button: Compact 36x36 icon button */
  .mobile\:flex-col > div:first-child:not(.flex-1) div.bg-ai,
  .mobile\:flex-col > .w-\[260px\] div.bg-ai,
  .mobile\:flex-col > .w-\[100px\] div.bg-ai {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 8px !important;
    flex: 0 0 36px !important;
    box-sizing: border-box !important;
  }

  /* Hide desktop text labels from other action buttons on mobile */
  .mobile\:flex-col > div:first-child:not(.flex-1) button .text-start:not(button.bg-btnPrimary *),
  .mobile\:flex-col > div:first-child:not(.flex-1) button .text-\[16px\]:not(button.bg-btnPrimary *),
  .mobile\:flex-col > .w-\[260px\] button .text-start:not(button.bg-btnPrimary *),
  .mobile\:flex-col > .w-\[100px\] button .text-start:not(button.bg-btnPrimary *),
  .mobile\:flex-col > div:first-child:not(.flex-1) button.bg-btnSimple > div:not(:first-child) {
    display: none !important;
  }

  /* Channels List Container: Horizontal scroll row occupying all remaining width */
  .mobile\:flex-col > div:first-child:not(.flex-1) > div > div.select-none,
  .mobile\:flex-col > div:first-child:not(.flex-1) .gap-\[32px\] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .mobile\:flex-col > div:first-child:not(.flex-1) .gap-\[32px\]::-webkit-scrollbar {
    display: none !important;
  }

  /* Channel Groups and items wrappers */
  .mobile\:flex-col > div:first-child:not(.flex-1) .gap-\[32px\] > div,
  .mobile\:flex-col > div:first-child:not(.flex-1) .gap-\[16px\],
  .mobile\:flex-col > div:first-child:not(.flex-1) .gap-\[12px\] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .mobile\:flex-col > div:first-child:not(.flex-1) .gap-\[16px\] > div.cursor-pointer:first-child {
    display: none !important;
  }

  /* Channel Pill Badge item */
  .mobile\:flex-col > div:first-child:not(.flex-1) div.group\/profile,
  .mobile\:flex-col > div:first-child:not(.flex-1) div[class*="group/profile"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 36px !important;
    padding: 3px 8px 3px 4px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--new-table-border, #252533) !important;
    border-radius: 18px !important;
    gap: 6px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
  }

  .mobile\:flex-col > div:first-child:not(.flex-1) div[class*="group/profile"]:hover {
    background: rgba(108, 63, 231, 0.12) !important;
    border-color: var(--cw-violet-500, #855bf2) !important;
  }

  /* Channel Avatar size */
  .mobile\:flex-col > div:first-child:not(.flex-1) div[class*="group/profile"] img[class*="min-w-\[36px\]"],
  .mobile\:flex-col > div:first-child:not(.flex-1) div[class*="group/profile"] img:first-child {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 14px !important;
  }

  /* Platform icon badge (Pinterest, X, LinkedIn) at corner */
  .mobile\:flex-col > div:first-child:not(.flex-1) div[class*="group/profile"] img.absolute {
    width: 14px !important;
    height: 14px !important;
    bottom: -2px !important;
    right: -2px !important;
    border-radius: 7px !important;
  }

  /* Channel name label inside pill */
  .mobile\:flex-col > div:first-child:not(.flex-1) div[class*="group/profile"] > div[role="Handle"],
  .mobile\:flex-col > div:first-child:not(.flex-1) div[class*="group/profile"] > div.whitespace-nowrap {
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--color-text, #f3f4f6) !important;
    max-width: 85px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Hide three-dots menu & drag handle hover indicators on mobile */
  .mobile\:flex-col > div:first-child:not(.flex-1) div[class*="group/profile"] > div:last-child:not([role="Handle"]) {
    display: none !important;
  }

  .mobile\:flex-col > div:first-child:not(.flex-1) div[class*="group/profile"] .-ms-\[12px\],
  .mobile\:flex-col > div:first-child:not(.flex-1) div[class*="group/profile"] .-ms-\[20px\] {
    display: none !important;
  }

  /* --- 9.9 Create Post Modal Mobile Adaptation (/launches) --- */
  /* Ensure the Create Post modal takes full mobile viewport without clipping */
  .fixed.bg-popup:has(#social-content),
  .fixed:has(#add-edit-modal),
  .fixed:has([id="social-content"]),
  div[style*="z-index"]:has(#social-content),
  .cw-mobile-create-post-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 99999 !important;
    overflow: hidden !important;
  }

  .fixed:has(#social-content) div[style*="width: 80%"],
  .fixed:has(#social-content) div[style*="width:80%"],
  .fixed:has(#social-content) .p-\[40px\],
  .fixed:has(#social-content) .w-full.h-full.flex-1,
  .cw-mobile-create-post-modal .p-\[40px\],
  .cw-mobile-create-post-modal .w-full.h-full.flex-1 {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .fixed:has(#social-content) .rounded-\[20px\],
  .cw-mobile-create-post-modal .rounded-\[20px\] {
    border-radius: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--new-bgColorInner, #15151e) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Unified Mobile Header (Sticky at top of modal) */
  .cw-mobile-modal-header {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    width: 100% !important;
    padding: 0 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--new-table-header, #181822) !important;
    border-bottom: 1px solid var(--new-table-border, #252533) !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
    flex: 0 0 52px !important;
  }

  /* Hide redundant desktop headers inside Column 1 and Column 2 on mobile */
  .fixed:has(#social-content) div.bg-newBgColor.h-\[65px\],
  .cw-mobile-create-post-modal div.bg-newBgColor.h-\[65px\],
  .fixed:has(#social-content) .rounded-tl-\[20px\],
  .fixed:has(#social-content) .rounded-tr-\[20px\] {
    display: none !important;
  }

  /* Segmented Pill Tab Group */
  .cw-mobile-tab-pill-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 3px !important;
    gap: 3px !important;
  }

  .cw-mobile-tab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 5px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    background: transparent !important;
    border: none !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    line-height: 1 !important;
    outline: none !important;
  }

  .cw-mobile-tab-btn.active {
    background: var(--cw-violet-600, #6c3fe7) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(108, 63, 231, 0.4) !important;
  }

  .cw-mobile-tab-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Close Button in Mobile Header */
  .cw-mobile-close-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #e5e7eb !important;
    transition: background 0.15s ease !important;
    outline: none !important;
    padding: 0 !important;
  }

  .cw-mobile-close-btn:hover,
  .cw-mobile-close-btn:active {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
  }

  .cw-mobile-close-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Hide old injected modal tab switcher if present */
  #modal-tab-switcher {
    display: none !important;
  }

  /* Content Row: Holds Column 1 (Editor) and Column 2 (Preview) */
  .fixed:has(#social-content) .rounded-\[20px\] > .flex-1.flex,
  .cw-mobile-create-post-modal .rounded-\[20px\] > .flex-1.flex {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* Column 1 (Editor): Visible by default, hidden when in preview tab */
  .fixed:has(#social-content) .rounded-\[20px\] > .flex-1.flex > div.border-r,
  .cw-mobile-create-post-modal .cw-editor-column {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Column 2 (Preview): Hidden by default */
  .fixed:has(#social-content) .rounded-\[20px\] > .flex-1.flex > .w-\[580px\],
  .cw-mobile-create-post-modal .cw-preview-column {
    display: none !important;
  }

  /* When on Preview tab: Hide Editor, Show Preview */
  .fixed:has(#social-content) .rounded-\[20px\].show-preview-tab > .flex-1.flex > div.border-r,
  .fixed:has(#social-content) [data-cw-active-tab="preview"] > .flex-1.flex > div.border-r,
  .cw-mobile-create-post-modal.cw-active-tab-preview .cw-editor-column,
  .cw-mobile-create-post-modal .show-preview-tab .cw-editor-column {
    display: none !important;
  }

  .fixed:has(#social-content) .rounded-\[20px\].show-preview-tab > .flex-1.flex > .w-\[580px\],
  .fixed:has(#social-content) [data-cw-active-tab="preview"] > .flex-1.flex > .w-\[580px\],
  .cw-mobile-create-post-modal.cw-active-tab-preview .cw-preview-column,
  .cw-mobile-create-post-modal .show-preview-tab .cw-preview-column {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Issue 4: Hide old "← Back to Editing Post" Banner */
  .cw-preview-back-banner {
    display: none !important;
  }

  /* Issue 3: Synchronized Preview Channel Selector Bar */
  .cw-preview-channel-selector {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: var(--new-bgColorInner, #161622) !important;
    border-bottom: 1px solid var(--new-table-border, #262638) !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    z-index: 20 !important;
  }

  .cw-preview-channel-selector::-webkit-scrollbar {
    display: none !important;
  }

  .cw-preview-channel-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 9px !important;
    background: #1c1c28 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  }

  .cw-preview-channel-btn:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
  }

  .cw-preview-channel-btn.active {
    background: var(--cw-violet-600, #6c3fe7) !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 2px rgba(108, 63, 231, 0.4), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }

  .cw-preview-channel-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #ffffff !important;
    stroke-width: 1.75 !important;
    color: #ffffff !important;
    display: block !important;
  }

  .cw-preview-channel-btn img {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .cw-preview-channel-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1c1c28 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
  }

  .cw-preview-channel-badge svg {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
  }

  /* Column 1 internal flex expansion */
  .fixed:has(#social-content) .rounded-\[20px\] > .flex-1.flex > div.border-r > div.flex-1,
  .cw-mobile-create-post-modal .cw-editor-column > div.flex-1 {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .fixed:has(#social-content) .rounded-\[20px\] > .flex-1.flex > div.border-r > div.flex-1 > div.relative,
  .cw-mobile-create-post-modal .cw-editor-column > div.flex-1 > div.relative {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    position: relative !important;
  }

  /* Issue 5: Preview Column Fitting for Each Channel */
  .fixed:has(#social-content) .rounded-\[20px\].show-preview-tab > .flex-1.flex > .w-\[580px\],
  .fixed:has(#social-content) [data-cw-active-tab="preview"] > .flex-1.flex > .w-\[580px\],
  .cw-mobile-create-post-modal.cw-active-tab-preview .cw-preview-column,
  .cw-mobile-create-post-modal .show-preview-tab .cw-preview-column,
  .cw-mobile-create-post-modal .cw-preview-column {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 calc(70px + env(safe-area-inset-bottom, 0px)) 0 !important;
    border: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .cw-preview-column > div,
  .cw-preview-column [class*="w-[580px]"],
  .cw-preview-column [class*="w-[550px]"],
  .cw-preview-column [class*="w-[460px]"],
  .cw-preview-column [class*="w-[400px]"],
  .fixed:has(#social-content) [class*="w-[580px]"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .cw-preview-column .p-\[20px\],
  .cw-preview-column .p-\[24px\],
  .cw-preview-column .p-\[32px\] {
    padding: 10px 12px !important;
  }

  /* Prevent collapsed heights on absolute-positioned previews (YouTube, TikTok, Pinterest) */
  .cw-preview-column .relative:has(> .absolute) {
    min-height: 420px !important;
    width: 100% !important;
    position: relative !important;
  }

  .cw-preview-column .relative > .absolute {
    max-width: 100% !important;
  }

  .cw-preview-column img,
  .cw-preview-column video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Issue 6: #social-content Clean Tight Spacing & Scroll */
  .fixed:has(#social-content) #social-content,
  .cw-mobile-create-post-modal #social-content,
  #social-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 8px 10px calc(70px + env(safe-area-inset-bottom, 0px)) 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Issue 1: Account Selection Bar at Top of Editor - Single Unstacked Row */
  .fixed:has(#social-content) #social-content > div:first-child,
  .cw-mobile-create-post-modal #social-content > div:first-child,
  .fixed:has(#social-content) #social-content > div:first-child > div.flex,
  .cw-mobile-create-post-modal #social-content > div:first-child > div.flex,
  .fixed:has(#social-content) .innerComponent,
  .cw-mobile-create-post-modal .innerComponent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
  }

  .fixed:has(#social-content) #social-content > div:first-child > div.flex.flex-1,
  .cw-mobile-create-post-modal #social-content > div:first-child > div.flex.flex-1 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .fixed:has(#social-content) #social-content > div:first-child > div.flex.flex-1::-webkit-scrollbar,
  .cw-mobile-create-post-modal #social-content > div:first-child > div.flex.flex-1::-webkit-scrollbar {
    display: none !important;
  }

  .fixed:has(#social-content) .innerComponent,
  .cw-mobile-create-post-modal .innerComponent {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .fixed:has(#social-content) .innerComponent::-webkit-scrollbar,
  .cw-mobile-create-post-modal .innerComponent::-webkit-scrollbar {
    display: none !important;
  }

  .fixed:has(#social-content) .innerComponent .flex-wrap,
  .cw-mobile-create-post-modal .innerComponent .flex-wrap,
  .fixed:has(#social-content) .innerComponent .gap-\[12px\],
  .cw-mobile-create-post-modal .innerComponent .gap-\[12px\],
  .fixed:has(#social-content) .innerComponent > div,
  .cw-mobile-create-post-modal .innerComponent > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .fixed:has(#social-content) .innerComponent .flex.gap-\[8px\].items-center,
  .cw-mobile-create-post-modal .innerComponent .flex.gap-\[8px\].items-center {
    width: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .fixed:has(#social-content) .innerComponent img[class*="min-w-\[42px\]"],
  .fixed:has(#social-content) .innerComponent img,
  .cw-mobile-create-post-modal .innerComponent img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
  }

  /* Issue 2: Sub-channel Tabs Bar (Global Planet & Individual Account Selectors) */
  .fixed:has(#social-content) div.select-none.left-0.absolute.w-full.z-\[100\],
  .cw-mobile-create-post-modal div.select-none.left-0.absolute.w-full.z-\[100\],
  .fixed:has(#social-content) div:has(> div[class*="overflow-x-auto"]),
  .cw-mobile-create-post-modal div:has(> div[class*="overflow-x-auto"]) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 2px 0 4px 0 !important;
    z-index: 10 !important;
  }

  .fixed:has(#social-content) div[class*="overflow-x-auto"],
  .cw-mobile-create-post-modal div[class*="overflow-x-auto"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 4px 2px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .fixed:has(#social-content) div[class*="overflow-x-auto"]::-webkit-scrollbar,
  .cw-mobile-create-post-modal div[class*="overflow-x-auto"]::-webkit-scrollbar {
    display: none !important;
  }

  /* Fix selector item buttons: high visibility & high contrast */
  .fixed:has(#social-content) div[class*="overflow-x-auto"] div.cursor-pointer,
  .cw-mobile-create-post-modal div[class*="overflow-x-auto"] div.cursor-pointer {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    background: #1c1c28 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.15s ease !important;
    position: relative !important;
  }

  .fixed:has(#social-content) div[class*="overflow-x-auto"] div.cursor-pointer.bg-newBgColorInner,
  .cw-mobile-create-post-modal div[class*="overflow-x-auto"] div.cursor-pointer.bg-newBgColorInner {
    background: var(--cw-violet-600, #6c3fe7) !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 2px rgba(108, 63, 231, 0.4), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }

  /* Planet / Globe SVG icon inside selector */
  .fixed:has(#social-content) div[class*="overflow-x-auto"] svg,
  .cw-mobile-create-post-modal div[class*="overflow-x-auto"] svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 1.75 !important;
    display: block !important;
  }

  /* Account avatar images inside selector */
  .fixed:has(#social-content) div[class*="overflow-x-auto"] img,
  .cw-mobile-create-post-modal div[class*="overflow-x-auto"] img {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    display: block !important;
    object-fit: cover !important;
  }

  /* Provider badge on individual account selector */
  .fixed:has(#social-content) div[class*="overflow-x-auto"] .top-\[-6px\].right-\[-6px\],
  .cw-mobile-create-post-modal div[class*="overflow-x-auto"] .top-\[-6px\].right-\[-6px\] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    top: -4px !important;
    right: -4px !important;
    border-radius: 50% !important;
    background: #1c1c28 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
  }

  .fixed:has(#social-content) div[class*="overflow-x-auto"] .top-\[-6px\].right-\[-6px\] svg,
  .cw-mobile-create-post-modal div[class*="overflow-x-auto"] .top-\[-6px\].right-\[-6px\] svg {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
  }

  /* Hide empty spacer div in editor.tsx */
  .fixed:has(#social-content) div.h-\[40px\],
  .cw-mobile-create-post-modal div.h-\[40px\] {
    display: none !important;
    height: 0 !important;
  }

  /* 3. The Main Post Editor Card Box */
  .fixed:has(#social-content) #social-content .bg-newSettings,
  .cw-mobile-create-post-modal #social-content .bg-newSettings {
    background: var(--new-bgColorInner, #161622) !important;
    border: 1px solid var(--new-table-border, #262638) !important;
    border-radius: 12px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
  }

  .fixed:has(#social-content) #social-content .bg-newSettings [class*="px-\[12px\]"][class*="pt-\[12px\]"],
  .cw-mobile-create-post-modal #social-content .bg-newSettings [class*="px-\[12px\]"][class*="pt-\[12px\]"] {
    padding: 6px !important;
  }

  /* TipTap Input Container & ProseMirror */
  .fixed:has(#social-content) #social-content .bg-newSettings .flex-1.flex,
  .cw-mobile-create-post-modal #social-content .bg-newSettings .flex-1.flex,
  .fixed:has(#social-content) #social-content div:has(> .ProseMirror),
  .cw-mobile-create-post-modal #social-content div:has(> .ProseMirror) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 120px !important;
    width: 100% !important;
    position: relative !important;
  }

  /* Channel Selector Row in Create Post Modal: Horizontal row of circular avatars */
  .fixed:has(#social-content) .innerComponent,
  .cw-mobile-create-post-modal .innerComponent,
  #social-content .innerComponent {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 52px !important;
    max-height: 56px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 2px 4px !important;
    margin: 0 0 10px 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }

  .fixed:has(#social-content) .innerComponent::-webkit-scrollbar,
  .cw-mobile-create-post-modal .innerComponent::-webkit-scrollbar,
  #social-content .innerComponent::-webkit-scrollbar {
    display: none !important;
  }

  .fixed:has(#social-content) .innerComponent .flex-wrap,
  .cw-mobile-create-post-modal .innerComponent .flex-wrap,
  #social-content .innerComponent .flex-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    min-height: 48px !important;
    flex: 0 0 auto !important;
  }

  .fixed:has(#social-content) .innerComponent .gap-\[8px\],
  .cw-mobile-create-post-modal .innerComponent .gap-\[8px\],
  #social-content .innerComponent .gap-\[8px\] {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    flex: 0 0 44px !important;
  }

  .fixed:has(#social-content) .innerComponent div.cursor-pointer,
  .cw-mobile-create-post-modal .innerComponent div.cursor-pointer,
  #social-content .innerComponent div.cursor-pointer {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Main circular avatar photo */
  .fixed:has(#social-content) .innerComponent div.cursor-pointer > img:first-child,
  .cw-mobile-create-post-modal .innerComponent div.cursor-pointer > img:first-child,
  #social-content .innerComponent div.cursor-pointer > img:first-child {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Platform badge on corner */
  .fixed:has(#social-content) .innerComponent div.cursor-pointer > img.absolute,
  .cw-mobile-create-post-modal .innerComponent div.cursor-pointer > img.absolute,
  #social-content .innerComponent div.cursor-pointer > img.absolute {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    position: absolute !important;
    bottom: -2px !important;
    right: -4px !important;
    z-index: 10 !important;
    border-radius: 4px !important;
  }

  .fixed:has(#social-content) .ProseMirror,
  .cw-mobile-create-post-modal .ProseMirror,
  .ProseMirror {
    min-height: 120px !important;
    max-height: 38vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: block !important;
    width: 100% !important;
    color: #f3f4f6 !important;
    background: transparent !important;
  }

  .ProseMirror p.is-editor-empty:first-child::before,
  .is-editor-empty:before {
    color: #6b7280 !important;
    font-style: normal !important;
  }

  /* Issue 6: Collapse Unwanted Empty Spacers Inside Editor */
  .fixed:has(#social-content) #social-content div.bg-newBgColorInner.flex-1,
  .cw-mobile-create-post-modal #social-content div.bg-newBgColorInner.flex-1 {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
  }

  .fixed:has(#social-content) #social-content div.h-\[46px\],
  .cw-mobile-create-post-modal #social-content div.h-\[46px\],
  .fixed:has(#social-content) #social-content div.h-\[46px\].cursor-text,
  .cw-mobile-create-post-modal #social-content div.h-\[46px\].cursor-text {
    display: none !important;
    height: 0 !important;
  }

  .fixed:has(#social-content) #social-content .uppyChange,
  .cw-mobile-create-post-modal #social-content .uppyChange {
    height: 8px !important;
    min-height: 8px !important;
    background: transparent !important;
  }

  /* Issue 7: Thread Reorder Arrows & Trash Icon - Compact Top-Right Badge */
  .fixed:has(#social-content) #social-content div.flex.flex-col.items-center.gap-\[10px\],
  .cw-mobile-create-post-modal #social-content div.flex.flex-col.items-center.gap-\[10px\] {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 6px !important;
    margin: 0 !important;
    z-index: 50 !important;
    background: rgba(22, 22, 34, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }

  .fixed:has(#social-content) #social-content div.flex.flex-col.items-center.gap-\[10px\] svg,
  .cw-mobile-create-post-modal #social-content div.flex.flex-col.items-center.gap-\[10px\] svg {
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
  }

  .fixed:has(#social-content) #social-content div.flex.flex-col.items-center.gap-\[10px\] > div,
  .cw-mobile-create-post-modal #social-content div.flex.flex-col.items-center.gap-\[10px\] > div {
    padding: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* InformationComponent / character limit indicator positioning */
  .fixed:has(#social-content) #social-content div:has(> .text-red-500),
  .fixed:has(#social-content) #social-content div.absolute.bottom-\[6px\],
  .cw-mobile-create-post-modal #social-content div.absolute.bottom-\[6px\] {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    margin: 2px 6px !important;
    align-self: flex-end !important;
    z-index: 20 !important;
  }

  /* 4. Media Attachments Thumbnails List */
  .fixed:has(#social-content) .sortable-container,
  .cw-mobile-create-post-modal .sortable-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 4px 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .fixed:has(#social-content) .sortable-container > div,
  .cw-mobile-create-post-modal .sortable-container > div {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 8px !important;
    border: 1px solid var(--new-table-border, #2e2e40) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* 5. Editor Bottom Action Toolbar (.b1) */
  .fixed:has(#social-content) .b1,
  .cw-mobile-create-post-modal .b1,
  .b1 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px 6px !important;
    padding: 6px 8px !important;
    width: 100% !important;
    border-top: 1px solid var(--new-table-border, #252533) !important;
    background: transparent !important;
    box-sizing: border-box !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }

  /* Hide vertical separator on mobile */
  .b1 > div.text-newColColor {
    display: none !important;
  }

  /* Media actions group (Insert Media, Design Media, AI) */
  .b1 > div.b2:first-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .b1 > div.b2:first-child::-webkit-scrollbar {
    display: none !important;
  }

  .b1 > div.b2:first-child div[class*="bg-newColColor"] {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  /* Hide long labels on small mobile so buttons are clean compact icon pills */
  .b1 .maxMedia\:hidden,
  .b1 .iconBreak\:hidden {
    display: none !important;
  }

  /* Formatting toolbar (Bold, Italic, Strikethrough, Emoji) */
  .b1 > div.b2:not(:first-child):not(.flex-1) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  .b1 button,
  .b1 div[data-tooltip-id="tooltip"],
  .fixed:has(#social-content) .ProseMirror-menubar button,
  .fixed:has(#social-content) button[data-tooltip-id],
  .cw-mobile-create-post-modal button[data-tooltip-id] {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  /* Character counter */
  .b1 > div.flex-1 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    flex: 1 0 auto !important;
    min-width: 50px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
  }

  /* 6. Emoji Picker Dialog on Mobile */
  div:has(> aside.EmojiPickerReact),
  div[class*="z-[500]"]:has(aside.EmojiPickerReact) {
    position: fixed !important;
    bottom: 74px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    max-width: calc(100vw - 20px) !important;
    width: calc(100vw - 20px) !important;
    z-index: 999999 !important;
    display: flex !important;
    justify-content: center !important;
  }

  aside.EmojiPickerReact {
    max-width: 100% !important;
    width: 100% !important;
    height: 300px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  }

  /* 7. Settings Accordion (#wrapper-settings) */
  #wrapper-settings {
    padding: 2px 0 12px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #wrapper-settings .bg-newSettings {
    border-radius: 10px !important;
    overflow: hidden !important;
    background: var(--new-bgColorInner, #161622) !important;
    border: 1px solid var(--new-table-border, #262638) !important;
  }

  #social-settings {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 150px !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  /* Bottom Action Footer on Mobile: 2-tier stacked layout for 100% visibility */
  .fixed:has(#social-content) .select-none.h-\[84px\],
  .cw-mobile-create-post-modal .select-none.h-\[84px\] {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    background: var(--new-bgColorInner, #15151e) !important;
    border-top: 1px solid var(--new-table-border, #252533) !important;
    box-sizing: border-box !important;
    z-index: 500 !important;
  }

  /* Row 1: Tags and Repeat options */
  .fixed:has(#social-content) .select-none.h-\[84px\] > div.flex-1.flex,
  .cw-mobile-create-post-modal .select-none.h-\[84px\] > div.flex-1.flex {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  .fixed:has(#social-content) .select-none.h-\[84px\] > div.flex-1.flex > *,
  .cw-mobile-create-post-modal .select-none.h-\[84px\] > div.flex-1.flex > * {
    flex: 0 0 auto !important;
  }

  /* Row 2: Action buttons container */
  .fixed:has(#social-content) .select-none.h-\[84px\] > div.justify-end,
  .cw-mobile-create-post-modal .select-none.h-\[84px\] > div.justify-end {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Date Picker button inside justify-end - full width banner */
  .fixed:has(#social-content) .select-none.h-\[84px\] > div.justify-end > div.border,
  .fixed:has(#social-content) .select-none.h-\[84px\] > div.justify-end > div[class*="border"],
  .cw-mobile-create-post-modal .select-none.h-\[84px\] > div.justify-end > div.border,
  .cw-mobile-create-post-modal .select-none.h-\[84px\] > div.justify-end > div[class*="border"] {
    width: 100% !important;
    flex: 1 1 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    order: 1 !important;
  }

  /* Save as Draft button */
  .fixed:has(#social-content) .select-none.h-\[84px\] > div.justify-end > button,
  .cw-mobile-create-post-modal .select-none.h-\[84px\] > div.justify-end > button {
    flex: 1 1 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    height: 42px !important;
    min-height: 42px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    order: 2 !important;
  }

  /* Submit Group container */
  .fixed:has(#social-content) .select-none.h-\[84px\] > div.justify-end > div.group,
  .cw-mobile-create-post-modal .select-none.h-\[84px\] > div.justify-end > div.group {
    flex: 1 1 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    order: 3 !important;
  }

  /* Hide pink Post Now hover dropdown button on mobile */
  .fixed:has(#social-content) button:has(.post-now),
  .cw-mobile-create-post-modal button:has(.post-now),
  .select-none.h-\[84px\] button:has(.post-now),
  .fixed:has(#social-content) .select-none.h-\[84px\] .group > button.hidden,
  .cw-mobile-create-post-modal .select-none.h-\[84px\] .group > button.hidden,
  .fixed:has(#social-content) .select-none.h-\[84px\] .group button.hidden,
  .cw-mobile-create-post-modal .select-none.h-\[84px\] .group button.hidden,
  button:has(.post-now),
  .post-now {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Primary submit / schedule button inside group */
  .fixed:has(#social-content) .select-none.h-\[84px\] > div.justify-end > div.group > button,
  .cw-mobile-create-post-modal .select-none.h-\[84px\] > div.justify-end > div.group > button,
  .fixed:has(#social-content) button.btnSub,
  .cw-mobile-create-post-modal button.btnSub {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  /* Save as draft styling */
  .fixed:has(#social-content) button.bg-btnSimple,
  .cw-mobile-create-post-modal button.bg-btnSimple {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid var(--new-table-border, #2a2a3a) !important;
  }

  /* Primary submit / schedule styling */
  .fixed:has(#social-content) button.btnSub,
  .fixed:has(#social-content) button.bg-\[\#612BD3\],
  .fixed:has(#social-content) button[class*="bg-btnPrimary"],
  .cw-mobile-create-post-modal button.btnSub,
  .cw-mobile-create-post-modal button.bg-\[\#612BD3\],
  .cw-mobile-create-post-modal button[class*="bg-btnPrimary"] {
    background: var(--cw-violet-600, #6c3fe7) !important;
    color: #ffffff !important;
  }
}

/* --- 11. Mobile Agent Page (/agents) Polish & Ergonomics --- */
@media (max-width: 768px) {
  /* On mobile agent page, hide the clunky stacked sidebars from the main flow */
  body:has(.agent) .channels-sidebar,
  body:has(.agent) .threads-sidebar,
  body:has(.agent) .mobile\:flex-col > .channels-sidebar,
  body:has(.agent) .mobile\:flex-col > .threads-sidebar,
  body:has(.agent) .mobile\:flex-col > div:first-child:not(.flex-1),
  .mobile\:flex-col:has(.agent) > div:first-child:not(.flex-1),
  .mobile\:flex-col:has(.agent) > .channels-sidebar,
  .mobile\:flex-col:has(.agent) > .threads-sidebar,
  .mobile\:flex-col:has(.agent) > .w-\[260px\],
  .mobile\:flex-col:has(.agent) > .w-\[100px\],
  .channels-sidebar,
  .threads-sidebar,
  div:has(> .agent) ~ .trz:not(.agent),
  .flex-1:has(.agent) > .trz:not(.agent),
  div:has(> .agent) > .trz.w-\[260px\],
  div:has(> .agent) > .trz.w-\[100px\],
  div:has(> .agent) > div:has(> div > h2) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Ensure agent chat and parent are flex column */
  div:has(> .agent),
  .flex-1:has(.agent),
  .agent,
  div.agent,
  .trz.agent {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Ensure agent messages don't clip at top */
  .agent .copilotKitMessages,
  .agent [class*="copilotKitMessages"] {
    padding-top: 24px !important;
    scroll-padding-top: 24px !important;
  }

  /* Compact top action toolbar for mobile Agent */
  .cw-agent-mobile-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--new-bgColorInner, #12121a) !important;
    border-bottom: 1px solid var(--new-table-border, #1f1f2d) !important;
    z-index: 20 !important;
    flex: 0 0 auto !important;
  }

  .cw-agent-mobile-toolbar button,
  .cw-agent-mobile-toolbar a {
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.15s ease !important;
  }

  .cw-agent-btn-new-chat {
    background: var(--cw-violet-600, #6c3fe7) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(108, 63, 231, 0.3) !important;
  }

  .cw-agent-btn-glass {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  /* Make Agent chat container expand to fill viewport cleanly */
  .agent,
  .agent > div {
    height: calc(100dvh - 180px) !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .copilotKitChat {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .copilotKitMessages {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 290px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 14px 24px 14px !important;
    scroll-behavior: smooth !important;
  }

  /* Welcome & Markdown messages readability */
  .copilotKitMarkdown {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #d1d5db !important;
  }

  .copilotKitMarkdown p {
    margin-bottom: 12px !important;
  }

  .copilotKitMarkdown p:last-child {
    margin-bottom: 0 !important;
  }

  /* Bottom chat input bar */
  .copilotKitInputContainer {
    padding: 8px 12px 12px 12px !important;
    background: var(--new-bgColorInner, #15151e) !important;
    border-top: 1px solid var(--new-table-border, #252533) !important;
    position: relative !important;
    z-index: 10 !important;
    flex: 0 0 auto !important;
  }

  /* History toggle button cleanup when toolbar is present */
  #history-toggle-btn {
    display: none !important;
  }
}

/* --- 10. Channel Modal Perfection & Complete Labels --- */
.mantine-Modal-content,
div[class*="bg-popup"],
div:has(> div > .grid.grid-cols-5) {
  max-height: 88vh !important;
  overflow-y: auto !important;
  padding-bottom: 24px !important;
  scrollbar-width: thin !important;
}

/* Ensure channel cards in Add Channel modal accommodate full names comfortably */
.grid.grid-cols-5 > div.bg-newTableHeader {
  min-height: 104px !important;
  height: auto !important;
  padding: 10px 6px !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.grid.grid-cols-5 > div.bg-newTableHeader:hover {
  transform: translateY(-2px) !important;
}

.grid.grid-cols-5 > div.bg-newTableHeader .text-center {
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.25 !important;
  font-size: 12.5px !important;
  padding: 0 2px !important;
}

/* --- 11. Dark 404 & Error Page Styling --- */
body, html {
  background-color: var(--new-bgColor, #0d0d12) !important;
  color: var(--new-textColor, #e2e8f0) !important;
}

div[style*="font-family:system-ui"]:has(.next-error-h1) {
  background-color: #0d0d12 !important;
  color: #ffffff !important;
}

.next-error-h1 {
  border-right-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/* --- 12. Sidebar Footer Links Rhythm & Spacing --- */
.fixed.h-full.w-\[64px\] div:has(> a[href*="terms"]),
.fixed.h-full.w-\[64px\] div:has(> a[href*="condiciones"]),
div:has(> a[href*="copyweb-publish-condiciones-generales-de-servicio"]) {
  padding: 10px 4px 18px 4px !important;
  margin-top: auto !important;
}

div:has(> a[href*="copyweb-publish-condiciones-generales-de-servicio"]) a {
  opacity: 0.6 !important;
  transition: opacity 0.15s ease !important;
}

div:has(> a[href*="copyweb-publish-condiciones-generales-de-servicio"]) a:hover {
  opacity: 1 !important;
}