/* Publyxa mobile chrome — keep calendars as Postiz designed them */

#publyxa-menu-btn,
#publyxa-channels-btn {
  display: none;
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  z-index: 10060;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #2a2a2a;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#publyxa-nav-overlay {
  display: none;
}

@media (max-width: 1023px) {
  html, body {
    max-width: 100vw;
    overflow-x: clip;
  }

  /* Shell only — do not restyle calendar grids */
  .min-w-screen,
  .min-h-screen.min-w-screen,
  .min-h-screen.w-screen {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
  }

  .flex-1.flex.gap-\[8px\] {
    gap: 0 !important;
  }

  .flex.flex-col.bg-newBgColorInner.w-\[80px\],
  .w-\[80px\].rounded-\[12px\].bg-newBgColorInner {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  #left-menu {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    inset-inline-start: 0 !important;
    width: 76px !important;
    height: 100% !important;
    max-height: none !important;
    padding-top: 56px !important;
    z-index: 10050 !important;
    background: #1a1a1a !important;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.45) !important;
    transform: translateX(-120%) !important;
    transition: transform 0.2s ease !important;
    border-radius: 0 12px 12px 0 !important;
  }

  body.publyxa-nav-open #left-menu {
    transform: translateX(0) !important;
  }

  .blurMe {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  .blurMe > .flex.bg-newBgColorInner.h-\[80px\],
  .blurMe > div.flex.h-\[80px\] {
    height: 56px !important;
    min-height: 56px !important;
    padding-left: 96px !important;
    padding-right: 8px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
  }

  .blurMe > .flex.bg-newBgColorInner.h-\[80px\] > .text-\[24px\],
  .blurMe > div.flex.h-\[80px\] > .text-\[24px\] {
    font-size: 15px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .blurMe > .flex.bg-newBgColorInner.h-\[80px\] > .flex.gap-\[20px\],
  .blurMe > div.flex.h-\[80px\] > .flex.gap-\[20px\] {
    gap: 6px !important;
    max-width: 48% !important;
    overflow-x: auto !important;
  }

  .blurMe > .flex.bg-newBgColorInner.h-\[80px\] > .flex.gap-\[20px\] > .w-\[1px\] {
    display: none !important;
  }

  body.publyxa-mobile #publyxa-menu-btn,
  body.publyxa-mobile #publyxa-channels-btn {
    display: inline-flex !important;
  }

  #publyxa-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  body.publyxa-nav-open #publyxa-nav-overlay,
  body.publyxa-channels-open #publyxa-nav-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .blurMe > .flex.flex-1.gap-\[1px\] {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    /* Stack Canales above calendar on mobile (web parity) */
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /*
   * Calendar mobile: show the REAL Canales panel inline (not an off-screen drawer).
   * Matches desktop: title, Agregar canal, invite, Crear publicación, channel rows.
   */
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col.w-\[260px\],
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col.w-\[100px\],
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col.group,
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .w-\[260px\],
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .w-\[100px\],
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .publyxa-channels-panel {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    inset-inline-start: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    z-index: 2 !important;
    transform: none !important;
    transition: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /*
   * Critical: Postiz puts Canales content in absolute+h-full.
   * On inline mobile that collapses to 0 height — force normal flow.
   */
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col
    > .absolute,
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .w-\[260px\]
    > .absolute,
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .w-\[100px\]
    > .absolute,
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .publyxa-channels-panel
    > .absolute {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 16px 14px !important;
  }

  /* Composer/agent: keep channels as a slide-in drawer */
  body.publyxa-composer .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.w-\[260px\],
  body.publyxa-composer .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.w-\[100px\],
  body.publyxa-composer .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.group,
  body.publyxa-composer .blurMe > .flex.flex-1.gap-\[1px\] > .w-\[260px\],
  body.publyxa-composer .blurMe > .flex.flex-1.gap-\[1px\] > .w-\[100px\],
  body.publyxa-composer .blurMe > .flex.flex-1.gap-\[1px\] > .publyxa-channels-panel,
  body.publyxa-agent .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.w-\[260px\],
  body.publyxa-agent .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.w-\[100px\],
  body.publyxa-agent .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.group,
  body.publyxa-agent .blurMe > .flex.flex-1.gap-\[1px\] > .w-\[260px\],
  body.publyxa-agent .blurMe > .flex.flex-1.gap-\[1px\] > .w-\[100px\],
  body.publyxa-agent .blurMe > .flex.flex-1.gap-\[1px\] > .publyxa-channels-panel {
    position: fixed !important;
    top: 56px !important;
    bottom: 0 !important;
    inset-inline-start: 0 !important;
    width: min(300px, 90vw) !important;
    max-width: 90vw !important;
    z-index: 10045 !important;
    transform: translateX(-110%) !important;
    transition: transform 0.2s ease !important;
    background: #ffffff !important;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.25) !important;
  }

  body.publyxa-channels-open.publyxa-composer .blurMe > .flex.flex-1.gap-\[1px\] > .publyxa-channels-panel,
  body.publyxa-channels-open.publyxa-composer .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.w-\[260px\],
  body.publyxa-channels-open.publyxa-composer .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.w-\[100px\],
  body.publyxa-channels-open.publyxa-composer .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.group,
  body.publyxa-channels-open.publyxa-composer .blurMe > .flex.flex-1.gap-\[1px\] > .w-\[260px\],
  body.publyxa-channels-open.publyxa-composer .blurMe > .flex.flex-1.gap-\[1px\] > .w-\[100px\],
  body.publyxa-channels-open.publyxa-agent .blurMe > .flex.flex-1.gap-\[1px\] > .publyxa-channels-panel,
  body.publyxa-channels-open.publyxa-agent .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.w-\[260px\],
  body.publyxa-channels-open.publyxa-agent .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.w-\[100px\],
  body.publyxa-channels-open.publyxa-agent .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.group,
  body.publyxa-channels-open.publyxa-agent .blurMe > .flex.flex-1.gap-\[1px\] > .w-\[260px\],
  body.publyxa-channels-open.publyxa-agent .blurMe > .flex.flex-1.gap-\[1px\] > .w-\[100px\] {
    transform: translateX(0) !important;
  }

  /* Force expanded labels even if React keeps collapseMenu=1 / .sidebar */
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col
    [class*='group-[.sidebar]:hidden'],
  body.publyxa-mobile .publyxa-channels-panel [class*='group-[.sidebar]:hidden'],
  body.publyxa-channels-open [class*='group-[.sidebar]:hidden'],
  body.publyxa-channels-open .group.sidebar [class*='group-[.sidebar]:hidden'] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col
    [class*='group-[.sidebar]:w-[44px]'],
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col
    [class*='group-[.sidebar]:mx-auto'],
  body.publyxa-channels-open [class*='group-[.sidebar]:w-[44px]'],
  body.publyxa-channels-open [class*='group-[.sidebar]:mx-auto'] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col
    [class*='group-[.sidebar]:flex-col'],
  body.publyxa-channels-open [class*='group-[.sidebar]:flex-col'] {
    flex-direction: row !important;
  }

  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col
    [class*='group-[.sidebar]:p-0'],
  body.publyxa-channels-open [class*='group-[.sidebar]:p-0'] {
    padding: 12px 16px !important;
  }

  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col
    button.bg-btnSimple,
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col
    button.bg-btnPrimary,
  body.publyxa-channels-open button.bg-btnSimple,
  body.publyxa-channels-open button.bg-btnPrimary {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
  }

  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col
    .flex.gap-\[8px\],
  body.publyxa-channels-open .flex.gap-\[8px\] {
    width: 100% !important;
  }

  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col
    h2,
  body.publyxa-channels-open h2 {
    display: block !important;
    font-size: 20px !important;
    font-weight: 500 !important;
  }

  /* Hide collapse chevron on inline mobile Canales (always expanded) */
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent)
    .blurMe
    > .flex.flex-1.gap-\[1px\]
    > .flex.relative.flex-col
    .bg-btnSimple.w-\[24px\].h-\[24px\] {
    display: none !important;
  }

  /* Channels FAB not needed when panel is inline on calendar */
  body.publyxa-mobile:not(.publyxa-composer):not(.publyxa-agent) #publyxa-channels-btn {
    display: none !important;
  }

  /* Calendar pane: give it space, DO NOT touch inner grids */
  .blurMe > .flex.flex-1.gap-\[1px\] > .bg-newBgColorInner.flex-1,
  .blurMe > .flex.flex-1.gap-\[1px\] > .flex-1.flex-col {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Let Postiz absolute+overflow-auto calendars scroll on touch */
  .blurMe .flex-1.relative,
  .blurMe .flex-1.flex.relative,
  .blurMe .flex.flex-col.gap-\[10px\].flex-1.relative {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  .blurMe .absolute.start-0.top-0.w-full.h-full,
  .blurMe .absolute.h-full.start-0.top-0.w-full,
  .blurMe .absolute.start-0.top-0.overflow-auto.w-full.h-full {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overflow: auto !important;
  }

  /*
   * Week view: fixed day widths + scroll ON the grid (bounded width).
   * Do NOT set width:max-content on the same node that scrolls — that kills overflow.
   */
  .blurMe .grid.\[grid-template-columns\:136px_repeat\(7\,_minmax\(0\,_1fr\)\)\] {
    grid-template-columns: 52px repeat(7, 120px) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity;
  }

  .blurMe .grid.\[grid-template-columns\:136px_repeat\(7\,_minmax\(0\,_1fr\)\)\] > .sticky {
    font-size: 11px !important;
  }

  /* Keep hours column pinned while week days scroll from today */
  .blurMe .grid.\[grid-template-columns\:136px_repeat\(7\,_minmax\(0\,_1fr\)\)\] > :nth-child(8n + 1) {
    position: sticky !important;
    left: 0 !important;
    z-index: 12 !important;
    background: var(--new-table-header, #f3f3f5) !important;
  }

  .blurMe .grid.\[grid-template-columns\:136px_repeat\(7\,_minmax\(0\,_1fr\)\)\] > :nth-child(-n + 8) {
    scroll-snap-align: start;
  }

  #publyxa-week-left,
  #publyxa-week-right {
    display: none;
    position: fixed;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 10055;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #612bd3;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  body.publyxa-mobile.publyxa-week #publyxa-week-left,
  body.publyxa-mobile.publyxa-week #publyxa-week-right {
    display: inline-flex !important;
  }

  #publyxa-week-left {
    left: 12px;
  }

  #publyxa-week-right {
    right: 12px;
  }

  /* Month view: compact headers + hide other-month placeholders */
  .blurMe .grid.grid-cols-7.grid-rows-\[62px_auto\] {
    grid-template-rows: 36px auto !important;
  }

  .blurMe .grid.grid-cols-7 > .h-\[62px\] {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 0 !important;
  }

  .blurMe .publyxa-other-month {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .blurMe .min-w-\[200px\] {
    min-width: 110px !important;
  }

  /* Calendar filters: Day/Week/Month + Calendar/List on ONE row (structural, no JS deps) */
  body.publyxa-mobile .blurMe .text-textColor.flex.flex-col.select-none:has(.w-\[74px\]),
  body.publyxa-mobile .blurMe .text-textColor.flex.select-none.gap-\[8px\]:has(.w-\[74px\]),
  body.publyxa-mobile .publyxa-cal-filters {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Pager / Today row — full width */
  body.publyxa-mobile .blurMe .text-textColor.flex.select-none:has(.w-\[74px\]) > .flex.flex-grow,
  body.publyxa-mobile .blurMe .text-textColor.flex.select-none:has(.w-\[74px\]) > .flex.flex-grow.flex-row,
  body.publyxa-mobile .blurMe .text-textColor.flex.select-none:has(.w-\[74px\]) > .publyxa-cal-pager-row {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
  }

  /* Customer select — full width */
  body.publyxa-mobile .blurMe .text-textColor.flex.select-none:has(.w-\[74px\]) > .relative,
  body.publyxa-mobile .blurMe .text-textColor.flex.select-none:has(.w-\[74px\]) > .publyxa-cal-customer {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
  }

  /* Día / Semana / Mes */
  body.publyxa-mobile .blurMe .text-textColor.flex.select-none:has(.w-\[74px\]) > .flex.flex-row.p-\[4px\].border:has(.w-\[74px\]),
  body.publyxa-mobile .blurMe .text-textColor.flex.select-none > .publyxa-cal-period {
    display: inline-flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 88px) !important;
    min-width: 0 !important;
    order: 3 !important;
    height: 40px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  body.publyxa-mobile .blurMe .text-textColor.flex.select-none:has(.w-\[74px\]) > .flex.flex-row.p-\[4px\].border:has(.w-\[74px\]) .w-\[74px\],
  body.publyxa-mobile .publyxa-cal-period .w-\[74px\] {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 13px !important;
  }

  /* Calendario / Lista icons — same row, to the RIGHT of Día/Semana/Mes */
  body.publyxa-mobile .blurMe .text-textColor.flex.select-none:has(.w-\[74px\]) > .flex.flex-row.p-\[4px\].border:has(.w-\[34px\]):not(:has(.w-\[74px\])),
  body.publyxa-mobile .blurMe .text-textColor.flex.select-none > .publyxa-cal-view-toggle {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    order: 4 !important;
    height: 40px !important;
    align-items: center !important;
    align-self: center !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  /* List view filters — clean stacked mobile toolbar */
  body.publyxa-list .blurMe > .flex.flex-1.gap-\[1px\] > .bg-newBgColorInner.flex-1,
  body.publyxa-list .blurMe > .flex.flex-1.gap-\[1px\] > .flex-1.flex-col {
    overflow: hidden !important;
    padding: 8px 8px 0 !important;
  }

  body.publyxa-list .publyxa-list-filters {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 0 8px !important;
    overflow: visible !important;
  }

  /* Block 1: pager + state pills (full width stack) */
  body.publyxa-list .publyxa-list-filters > .publyxa-list-main,
  body.publyxa-list .publyxa-list-filters > .flex.flex-grow,
  body.publyxa-list .publyxa-list-filters > .flex.flex-grow.flex-row,
  body.publyxa-list .publyxa-list-filters > .flex.flex-row.items-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    order: unset !important;
  }

  body.publyxa-list .publyxa-list-filters > .flex.flex-grow > .flex-1 {
    display: none !important;
  }

  body.publyxa-list .publyxa-list-pager {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  body.publyxa-list .publyxa-list-pager .min-w-\[200px\],
  body.publyxa-list .publyxa-list-filters .publyxa-list-pager .min-w-\[200px\] {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  body.publyxa-list .publyxa-list-pager .min-w-\[200px\] > div {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  body.publyxa-list .publyxa-list-states {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    box-sizing: border-box !important;
    gap: 0 !important;
  }

  body.publyxa-list .publyxa-list-states::-webkit-scrollbar {
    display: none;
  }

  body.publyxa-list .publyxa-list-states .min-w-\[80px\] {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* Drafts live under All — hide Draft/Borrador chip on mobile list bar */
  body.publyxa-list .publyxa-hide-draft,
  body.publyxa-list [data-publyxa-hide-draft="1"],
  body.publyxa-list .publyxa-list-states .min-w-\[80px\][data-publyxa-hide-draft="1"],
  body.publyxa-mobile .publyxa-hide-draft,
  body.publyxa-mobile [data-publyxa-hide-draft="1"] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    position: absolute !important;
    height: 0 !important;
  }

  /* Structural fallback: All / Scheduled / Draft / Published → hide 3rd child */
  body.publyxa-mobile .blurMe .flex.flex-row.p-\[4px\].border .min-w-\[80px\]:nth-child(3),
  body.publyxa-mobile .blurMe .flex.flex-row.p-\[4px\] .min-w-\[80px\]:nth-child(3) {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Block 2: customer + calendar/list toggle on one row */
  body.publyxa-list .publyxa-list-customer {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    order: 2 !important;
    max-width: calc(100% - 96px) !important;
  }

  body.publyxa-list .publyxa-list-customer > .cursor-pointer,
  body.publyxa-list .publyxa-list-customer .h-\[42px\] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 40px !important;
  }

  body.publyxa-list .publyxa-list-view-toggle {
    flex: 0 0 auto !important;
    order: 3 !important;
    margin-left: auto !important;
    height: 40px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  body.publyxa-list .blurMe .flex-1.flex {
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* List mode: app title bar can use less right clutter */
  body.publyxa-list .blurMe > .flex.bg-newBgColorInner.h-\[80px\] > .flex.gap-\[20px\],
  body.publyxa-list .blurMe > div.flex.h-\[80px\] > .flex.gap-\[20px\] {
    max-width: 40% !important;
  }

  /* Auth */
  .bg-\[\#0E0E0E\].flex.min-h-screen,
  .bg-\[\#0E0E0E\].min-h-screen.w-screen {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 8px !important;
    gap: 0 !important;
  }

  .bg-\[\#0E0E0E\] > .flex.flex-col.flex-1 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .bg-\[\#0E0E0E\] .text-\[40px\] {
    font-size: 28px !important;
  }

  /* ========== Create Post: mobile-native composer ========== */
  .fixed.bg-popup.w-full.h-full,
  .fixed.bg-popup.min-w-full.min-h-full {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Apply as soon as the create-post modal mounts (don't wait for JS body class) */
  .fixed.bg-popup:has(#social-content),
  .fixed.bg-popup:has(.publyxa-composer-root) {
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .fixed.bg-popup:has(#social-content) > .relative,
  .fixed.bg-popup:has(#social-content) > .relative.flex-1,
  .fixed.bg-popup:has(#social-content) > .relative > .flex,
  .fixed.bg-popup:has(#social-content) > .relative > .flex.flex-1,
  .fixed.bg-popup:has(#social-content) .w-full.h-full.flex-1,
  .fixed.bg-popup:has(#social-content) .w-full.h-full.flex-1.p-\[40px\] {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }

  /* Hide desktop preview column in edit tab only — must NOT win over Vista previa */
  body.publyxa-composer:not(.publyxa-tab-preview) .fixed.bg-popup:has(#social-content) .w-\[580px\],
  body.publyxa-tab-edit .fixed.bg-popup:has(#social-content) .w-\[580px\],
  body.publyxa-composer:not(.publyxa-tab-preview) .publyxa-preview-pane {
    display: none !important;
  }

  body.publyxa-composer {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  html.publyxa-composer {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.publyxa-composer #publyxa-menu-btn,
  body.publyxa-composer #publyxa-channels-btn,
  body.publyxa-composer #publyxa-week-left,
  body.publyxa-composer #publyxa-week-right {
    display: none !important;
  }

  #publyxa-composer-chrome {
    display: none;
  }

  body.publyxa-composer #publyxa-composer-chrome {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 10px;
    padding: 10px 12px 8px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: #ffffff;
    border-bottom: 1px solid #e8e8ea;
    z-index: 40;
  }

  #publyxa-composer-chrome .px-top {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  #publyxa-composer-chrome .px-title {
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #111111;
    line-height: 1.2;
  }

  #publyxa-composer-close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #e5e5e7;
    background: #f4f4f5;
    color: #111;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #publyxa-composer-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: #f0f0f2;
  }

  #publyxa-composer-tabs button {
    height: 40px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #6b6b70;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  body.publyxa-tab-edit #publyxa-composer-tabs [data-tab="edit"],
  body.publyxa-tab-preview #publyxa-composer-tabs [data-tab="preview"] {
    background: #612bd3;
    color: #fff;
    box-shadow: 0 6px 16px rgba(97, 43, 211, 0.28);
  }

  body.publyxa-composer .publyxa-composer-root,
  .fixed.bg-popup:has(#social-content) .w-full.h-full.flex-1.p-\[40px\].flex.relative {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;
    display: flex !important;
    background: #ffffff !important;
    color: #111111 !important;
    box-sizing: border-box !important;
  }

  /* Hide Copilot AI chat launcher + panel while creating/editing a post */
  body.publyxa-composer .copilotKitButton,
  body.publyxa-composer .copilotKitPopup,
  body.publyxa-composer .copilotKitSidebar,
  body.publyxa-composer .copilotKitWindow,
  body.publyxa-composer [class*="copilotKitButton"],
  body.publyxa-composer [class*="copilotKitPopup"],
  body.publyxa-composer [class*="copilotKitWindow"],
  .fixed.bg-popup:has(#social-content) .copilotKitButton,
  .fixed.bg-popup:has(#social-content) .copilotKitPopup,
  .fixed.bg-popup:has(#social-content) .copilotKitSidebar,
  .fixed.bg-popup:has(#social-content) .copilotKitWindow,
  .fixed.bg-popup:has(#social-content) [class*="copilotKitButton"],
  .fixed.bg-popup:has(#social-content) [class*="copilotKitPopup"],
  .fixed.bg-popup:has(#social-content) [class*="copilotKitWindow"],
  .fixed.bg-popup:has(.publyxa-composer-root) .copilotKitButton,
  .fixed.bg-popup:has(.publyxa-composer-root) .copilotKitPopup {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body.publyxa-composer .publyxa-composer-shell,
  .fixed.bg-popup:has(#social-content) > .relative .w-full.h-full.flex-1.p-\[40px\] > .flex.flex-1.bg-newBgColorInner.rounded-\[20px\].flex-col,
  .fixed.bg-popup:has(#social-content) .w-full.h-full.flex-1.p-\[40px\].flex.relative > .flex.flex-1.bg-newBgColorInner.rounded-\[20px\] {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: 100% !important;
    /* ONE scroll for editor content + action buttons (footer stays in React tree) */
    overflow-x: clip !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    color: #111111 !important;
  }

  body.publyxa-composer .publyxa-composer-cols {
    flex-direction: column !important;
    overflow: visible !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    background: #ffffff !important;
  }

  body.publyxa-composer .publyxa-editor-pane {
    border-inline-end: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
  }

  body.publyxa-composer .publyxa-preview-pane {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #f5f5f7 !important;
    color: #111111 !important;
  }

  body.publyxa-tab-edit .publyxa-preview-pane,
  body.publyxa-tab-edit .publyxa-composer-cols > .w-\[580px\],
  body.publyxa-tab-edit .publyxa-composer-cols > :nth-child(2) {
    display: none !important;
  }

  body.publyxa-tab-preview .publyxa-editor-pane,
  body.publyxa-tab-preview .publyxa-composer-cols > .border-e,
  body.publyxa-tab-preview .publyxa-composer-cols > :nth-child(1) {
    display: none !important;
  }

  /* Preview tab: give the pane real height (absolute children collapsed after shell-scroll change) */
  body.publyxa-composer.publyxa-tab-preview .publyxa-composer-shell {
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  body.publyxa-composer.publyxa-tab-preview .publyxa-composer-cols {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.publyxa-composer.publyxa-tab-preview .publyxa-preview-pane,
  body.publyxa-tab-preview .fixed.bg-popup:has(#social-content) .w-\[580px\],
  body.publyxa-tab-preview .fixed.bg-popup:has(#social-content) .publyxa-preview-pane {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #f5f5f7 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.publyxa-composer.publyxa-tab-preview .publyxa-composer-footer {
    display: none !important;
  }

  body.publyxa-composer.publyxa-tab-preview #publyxa-composer-meta {
    display: none !important;
  }

  body.publyxa-composer .publyxa-composer-shell .bg-newBgColor.h-\[65px\],
  body.publyxa-composer .publyxa-editor-pane > .bg-newBgColor.h-\[65px\],
  body.publyxa-composer .publyxa-preview-pane > .bg-newBgColor.h-\[65px\],
  body.publyxa-composer .publyxa-composer-cols > div > .h-\[65px\] {
    display: none !important;
  }

  /* Content flows naturally; shell scrolls (includes footer actions) */
  body.publyxa-composer .publyxa-editor-pane > .flex-1.flex.flex-col.gap-\[16px\],
  body.publyxa-composer .publyxa-editor-pane > div.flex-1 {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
    gap: 0 !important;
    background: #ffffff !important;
  }

  body.publyxa-composer.publyxa-settings-open .publyxa-editor-pane > .flex-1.flex.flex-col.gap-\[16px\],
  body.publyxa-composer.publyxa-settings-open .publyxa-editor-pane > div.flex-1 {
    overflow: visible !important;
  }

  body.publyxa-composer .publyxa-editor-pane .flex-1.relative {
    position: relative !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
  }

  body.publyxa-composer .publyxa-editor-pane .hidden,
  body.publyxa-composer .publyxa-editor-pane .flex-1.relative.hidden,
  body.publyxa-composer #wrapper-settings.hidden {
    display: none !important;
  }

  body.publyxa-composer #social-content {
    position: relative !important;
    inset: auto !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    /* clip (not hidden) — prevents focus from scrolling the pane sideways */
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding: 12px !important;
    padding-bottom: 28px !important;
    gap: 12px !important;
    background: #ffffff !important;
    color: #111111 !important;
    box-sizing: border-box !important;
  }

  body.publyxa-composer #social-content > .flex.w-full {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  body.publyxa-composer #social-content > .flex.w-full > .flex.flex-1 {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.publyxa-composer #social-content > .flex.w-full > .flex.flex-1::-webkit-scrollbar {
    display: none;
  }

  body.publyxa-composer #social-content .flex.flex-1.gap-\[6px\].flex-col,
  body.publyxa-composer #social-content .flex.flex-1.gap-\[6px\].flex-col > .flex-1.flex,
  body.publyxa-composer #social-content .relative.flex-col.gap-\[20px\].flex-1.flex:not(.bg-newSettings),
  /* Postiz drops `flex` when items.length > 1 — keep the thread stacked (NOT the cards) */
  body.publyxa-composer #social-content .relative.flex-col.gap-\[20px\].flex-1:not(.bg-newSettings),
  body.publyxa-composer #social-content .publyxa-thread-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  body.publyxa-composer #social-content .publyxa-thread-stack > .bg-newSettings,
  body.publyxa-composer #social-content .relative.flex-col.gap-\[20px\].flex-1:not(.bg-newSettings) > .bg-newSettings {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }

  body.publyxa-composer #social-content .publyxa-thread-stack > .bg-newSettings.publyxa-thread-comment,
  body.publyxa-composer #social-content .relative.flex.flex-col.gap-\[20px\].flex-1.bg-newSettings.publyxa-thread-comment {
    min-height: 168px !important;
  }

  body.publyxa-composer #social-content .bg-newBgColorInner.flex-1:not(.rounded-t-\[6px\]):not(.rounded-b-\[6px\]):not(.flex),
  body.publyxa-composer #social-content .w-full.h-\[46px\],
  body.publyxa-composer #social-content .uppyChange,
  body.publyxa-composer #social-content .w-full.pointer-events-none {
    display: none !important;
  }

  body.publyxa-composer #social-content .relative.flex.flex-col.gap-\[20px\].flex-1.bg-newSettings {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    gap: 0 !important;
    margin: 0 0 4px !important;
    padding: 12px !important;
    border: 1px solid #e6e6ea !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #111111 !important;
    box-shadow: 0 2px 10px rgba(17, 17, 17, 0.04);
    overflow: visible !important;
    overflow-x: clip !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
  }

  body.publyxa-composer #social-content .bg-newSettings .flex.flex-col.gap-\[20px\].flex-1,
  body.publyxa-composer #social-content .bg-newSettings .relative.flex-1.px-\[12px\],
  body.publyxa-composer #social-content .bg-newSettings .relative.cursor-text.flex.flex-1,
  body.publyxa-composer #social-content .bg-newSettings .flex.flex-1.flex-col,
  body.publyxa-composer #social-content .bg-newSettings .relative.flex-1 {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body.publyxa-composer #social-content .relative.flex.flex-col.gap-\[20px\].flex-1.bg-newSettings.publyxa-thread-comment {
    background: #fafafa !important;
    border-color: #ececf0 !important;
    border-inline-start: 3px solid #d82d7e !important;
  }

  .publyxa-thread-label { display: none; }
  body.publyxa-composer .publyxa-thread-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b6b70;
  }
  body.publyxa-composer .publyxa-thread-comment .publyxa-thread-label { color: #d82d7e; }
  .publyxa-thread-remove { display: none; }
  body.publyxa-composer .publyxa-thread-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #ffd0d0;
    background: #fff5f5;
    color: #e11d48;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
  }

  body.publyxa-composer #social-content .px-\[10px\].pt-\[10px\].bg-newBgColorInner,
  body.publyxa-composer #social-content .bg-newBgColorInner.rounded-t-\[6px\],
  body.publyxa-composer #social-content .bg-newBgColorInner.rounded-b-\[6px\] {
    background: #ffffff !important;
    color: #111111 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.publyxa-composer #social-content .px-\[10px\].pt-\[10px\].bg-newBgColorInner {
    min-height: 88px !important;
    border-radius: 12px 12px 0 0 !important;
    padding-bottom: 8px !important;
  }

  body.publyxa-composer #social-content textarea,
  body.publyxa-composer #social-content [contenteditable="true"],
  body.publyxa-composer #social-content .ProseMirror,
  body.publyxa-composer #social-content .tiptap,
  body.publyxa-composer #social-content .editor {
    font-size: 16px !important;
    line-height: 1.45 !important;
    min-height: 80px !important;
    max-height: none !important;
    overflow: visible !important;
    color: #111111 !important;
  }

  body.publyxa-composer #social-content .b1.flex.flex-col {
    height: auto !important;
    overflow: visible !important;
    gap: 6px !important;
  }

  body.publyxa-composer #social-content .b1 .flex.gap-\[8px\].px-\[12px\].border-t,
  body.publyxa-composer #social-content .flex.gap-\[8px\].px-\[12px\].border-t.border-newColColor {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 8px 10px !important;
    gap: 6px !important;
    border-color: #ececf0 !important;
  }

  /* Row 1 = media actions, row 2 = formatting — hide vertical divider between them */
  body.publyxa-composer #social-content .flex.gap-\[8px\].px-\[12px\].border-t > .text-newColColor,
  body.publyxa-composer #social-content .b1 .flex.gap-\[8px\].px-\[12px\].border-t > .text-newColColor {
    display: none !important;
  }

  /* Media bar: CSS GRID so IA Vídeo can take the full next row.
     Important: AiVideo root is `.relative` > `.cursor-pointer` — the flex/grid
     item is `.relative`, NOT the inner cursor-pointer. */
  body.publyxa-composer #social-content .flex.gap-\[8px\].px-\[12px\].border-t > .flex.py-\[10px\].b2:has(.publyxa-insert-media),
  body.publyxa-composer #social-content .flex.gap-\[8px\].px-\[12px\].border-t > .flex.py-\[10px\].b2:has(#clip0_insertmedia),
  body.publyxa-composer #social-content .flex.gap-\[8px\].px-\[12px\].border-t > .flex.py-\[10px\].b2:has(#clip0_2352_53058),
  body.publyxa-composer #social-content .flex.gap-\[8px\].px-\[12px\].border-t > .flex.py-\[10px\].b2:has(.publyxa-ai-video-btn) {
    display: grid !important;
    grid-template-columns: repeat(3, max-content) !important;
    justify-content: start !important;
    justify-items: start !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 8px !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* The GRID ITEM that must wrap to row 2 is the .relative wrapper */
  body.publyxa-composer #social-content .flex.py-\[10px\].b2 > .relative:has(#clip0_2352_53058),
  body.publyxa-composer #social-content .flex.py-\[10px\].b2 > .relative:has(.publyxa-ai-video-btn),
  body.publyxa-composer #social-content .flex.py-\[10px\].b2 > .publyxa-ai-video-wrap {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    width: max-content !important;
    max-width: 100% !important;
  }

  body.publyxa-composer #social-content .b1 .flex.py-\[10px\].b2 {
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 36px !important;
    overflow: visible !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  /* Formatting tools (bold / emoji) stay compact on row 2 */
  body.publyxa-composer #social-content .flex.gap-\[8px\].px-\[12px\].border-t > .flex.py-\[10px\].b2:has(.publyxa-emoji-btn),
  body.publyxa-composer #social-content .flex.gap-\[8px\].px-\[12px\].border-t > .flex.py-\[10px\].b2:has([data-tooltip-content*="Emoji"]),
  body.publyxa-composer #social-content .flex.gap-\[8px\].px-\[12px\].border-t > .flex.py-\[10px\].b2:has([data-tooltip-content*="emoji"]),
  body.publyxa-composer #social-content .flex.gap-\[8px\].px-\[12px\].border-t > .flex.py-\[10px\].b2:has([data-tooltip-content*="emoticon"]) {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Green char check sits immediately to the right of the emoji tools */
  body.publyxa-composer #social-content .flex.gap-\[8px\].px-\[12px\].border-t > .flex-1 {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    margin-inline-start: 2px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  body.publyxa-composer #social-content .publyxa-emoji-btn {
    flex-shrink: 0 !important;
  }

  /* Emoji picker: fixed overlay ONLY when the picker is actually open */
  body.publyxa-composer #social-content .absolute:has(.EmojiPickerReact),
  body.publyxa-composer #social-content .relative:has(.EmojiPickerReact) > .absolute:has(.EmojiPickerReact),
  body.publyxa-composer #social-content .relative > .absolute.z-\[500\]:has(.EmojiPickerReact) {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    z-index: 2147483600 !important;
    width: min(calc(100vw - 16px), 360px) !important;
    max-width: min(calc(100vw - 16px), 360px) !important;
    max-height: min(58vh, 420px) !important;
    margin: 0 !important;
  }

  /* When picker is closed, collapse empty absolute emoji shell only */
  body.publyxa-composer #social-content .relative > .absolute.z-\[500\]:not(:has(.EmojiPickerReact)):empty,
  body.publyxa-composer #social-content .relative > .absolute.z-\[500\]:not(:has(.EmojiPickerReact)):has(> :only-child:empty) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.publyxa-composer #social-content .relative > .absolute.z-\[500\]:not(:has(.EmojiPickerReact)) {
    /* keep in flow collapsed — do NOT position:fixed (that was breaking the composer) */
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    inset: auto !important;
    transform: none !important;
  }

  body.publyxa-composer #social-content .EmojiPickerReact,
  body.publyxa-composer .EmojiPickerReact {
    width: 100% !important;
    max-width: 100% !important;
    height: min(55vh, 380px) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden !important;
  }

  body.publyxa-emoji-open #publyxa-emoji-backdrop {
    display: block !important;
  }

  #publyxa-emoji-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483500;
    background: rgba(0, 0, 0, 0.35);
  }

  /* Compact tool chips with short labels */
  body.publyxa-composer #social-content .cursor-pointer.h-\[30px\],
  body.publyxa-composer #social-content .publyxa-insert-media,
  body.publyxa-composer #social-content .publyxa-ai-image-btn,
  body.publyxa-composer #social-content .publyxa-ai-video-btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    gap: 5px !important;
    background: #f3f3f5 !important;
    color: #222 !important;
  }

  body.publyxa-composer #social-content .publyxa-tool-label,
  body.publyxa-composer #social-content .publyxa-insert-media .maxMedia\:hidden,
  body.publyxa-composer #social-content .publyxa-ai-label {
    display: inline !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
  }

  body.publyxa-composer #social-content .publyxa-ai-video-btn,
  body.publyxa-composer #social-content .cursor-pointer:has(#clip0_2352_53058),
  body.publyxa-composer #social-content .relative:has(#clip0_2352_53058) > .cursor-pointer,
  body.publyxa-composer #social-content button.publyxa-ai-video-btn,
  body.publyxa-composer #social-content .publyxa-ai-image-btn,
  body.publyxa-composer #social-content .publyxa-ai-image-btn.publyxa-ai-real,
  body.publyxa-composer #social-content .cursor-pointer:has(#clip0_2352_53053),
  body.publyxa-composer #social-content .relative:has(#clip0_2352_53053) > .cursor-pointer {
    background: #f3f3f5 !important;
    color: #222 !important;
    width: max-content !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
  }

  /* Legacy break no longer needed with grid, keep harmless */
  body.publyxa-composer #social-content .publyxa-ai-video-break {
    display: none !important;
  }

  body.publyxa-composer #social-content .bg-newBgColorInner.rounded-b-\[6px\],
  body.publyxa-composer #social-content .flex.bg-newBgColorInner.rounded-b-\[6px\] {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 0 0 12px 12px !important;
    background: #ffffff !important;
  }

  body.publyxa-composer #social-content .sortable-container .w-\[40px\].h-\[40px\],
  body.publyxa-composer #social-content .cursor-pointer.rounded-\[5px\].w-\[40px\].h-\[40px\] {
    width: 76px !important;
    height: 76px !important;
    border-radius: 12px !important;
  }

  body.publyxa-composer #social-content .sortable-container {
    gap: 10px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  body.publyxa-composer #social-content .bg-newSettings > .flex.gap-\[5px\].flex-1.w-full {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.publyxa-composer #social-content .bg-newSettings > .flex.gap-\[5px\] > .flex-1.flex.w-full {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.publyxa-composer #social-content .text-newSep,
  body.publyxa-composer #social-content .pl-\[12px\].text-newSep {
    display: none !important;
  }

  /* Hide native reorder/delay/trash column — it was shifting the editor off-screen on focus */
  body.publyxa-composer #social-content .flex.flex-col.items-center.gap-\[10px\].pe-\[12px\] {
    display: none !important;
  }

  body.publyxa-composer #social-content .publyxa-thread-has-remove [class*="FF3F3F"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  /* Mobile: no "add comment" — hide CTA and its wrappers */
  body.publyxa-composer #social-content .flex:has(> .bg-\[\#D82D7E\]),
  body.publyxa-composer #social-content .flex:has(> .publyxa-add-thread),
  body.publyxa-composer #social-content .flex.items-center:has(.bg-\[\#D82D7E\]),
  body.publyxa-composer #social-content .flex.items-center:has(.publyxa-add-thread),
  body.publyxa-composer #social-content .flex.bg-newBgColorInner.rounded-b-\[6px\] + div,
  body.publyxa-composer #social-content .rounded-b-\[6px\].cursor-default + div,
  body.publyxa-composer #social-content .bg-\[\#D82D7E\].h-\[34px\],
  body.publyxa-composer #social-content .select-none.cursor-pointer.h-\[34px\].rounded-\[6px\].flex.bg-\[\#D82D7E\],
  body.publyxa-composer #social-content .publyxa-add-thread {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Design Media — same weight as Medios / AI chips */
  body.publyxa-composer #social-content .publyxa-design-media,
  body.publyxa-composer #social-content .cursor-pointer.h-\[30px\]:has(#clip0_designmedia) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: #f3f3f5 !important;
    color: #222 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* AI image button: sparkles + label (not the same as Medios gallery) */
  body.publyxa-composer #social-content .publyxa-ai-image-btn {
    gap: 5px !important;
    padding-inline: 10px !important;
    border-radius: 10px !important;
    min-height: 34px !important;
  }

  body.publyxa-composer #social-content .publyxa-ai-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
  }

  /* Locked AI: same grey chip look as Medios / Diseñar / IA */
  body.publyxa-composer #social-content .publyxa-ai-locked,
  body.publyxa-composer #social-content button.publyxa-ai-locked,
  body.publyxa-composer #social-content .publyxa-ai-locked.publyxa-ai-video-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    border: none !important;
    background: #f3f3f5 !important;
    color: #222 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    -webkit-tap-highlight-color: transparent;
  }

  body.publyxa-composer #social-content .publyxa-ai-locked .publyxa-ai-label {
    color: inherit !important;
  }

  /* Settings: collapsed = bar in the post scroll; open = full editor pane */
  body.publyxa-composer #wrapper-settings {
    flex: 0 0 auto !important;
    padding: 8px 12px 12px !important;
    background: #ffffff !important;
    min-height: 0 !important;
  }

  body.publyxa-composer #wrapper-settings.flex-1,
  body.publyxa-composer.publyxa-settings-open #wrapper-settings {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    padding: 8px 12px 0 !important;
  }

  body.publyxa-composer #wrapper-settings > div,
  body.publyxa-composer #wrapper-settings.flex-1 > div {
    flex: 0 0 auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    border-radius: 14px !important;
    background: #f4f4f5 !important;
  }

  body.publyxa-composer.publyxa-settings-open #wrapper-settings > div,
  body.publyxa-composer #wrapper-settings.flex-1 > div {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.publyxa-composer #wrapper-settings .bg-\[\#612BD3\].rounded-\[12px\] {
    min-height: 48px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    flex: 0 0 auto !important;
  }

  body.publyxa-composer.publyxa-settings-open #wrapper-settings .bg-\[\#612BD3\].rounded-\[12px\],
  body.publyxa-composer #wrapper-settings.flex-1 .bg-\[\#612BD3\].rounded-\[12px\] {
    border-radius: 14px 14px 0 0 !important;
  }

  body.publyxa-composer.publyxa-settings-open #wrapper-settings > div > .flex-1.relative,
  body.publyxa-composer.publyxa-settings-open #wrapper-settings > div > div.flex-1:not(.bg-\[\#612BD3\]),
  body.publyxa-composer #wrapper-settings.flex-1 > div > .flex-1.relative,
  body.publyxa-composer #wrapper-settings.flex-1 > div > div.flex-1:not(.bg-\[\#612BD3\]) {
    position: relative !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }

  /* Kill absolute fill — it trapped YouTube fields in a 0-height box */
  body.publyxa-composer.publyxa-settings-open #wrapper-settings .absolute.left-0.top-0.w-full.h-full,
  body.publyxa-composer.publyxa-settings-open #wrapper-settings [class*="absolute"][class*="left-0"][class*="top-0"],
  body.publyxa-composer #wrapper-settings.flex-1 .absolute.left-0.top-0.w-full.h-full,
  body.publyxa-composer #wrapper-settings.flex-1 [class*="absolute"][class*="left-0"][class*="top-0"] {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    padding-bottom: 8px !important;
  }

  /* Force LIGHT theme on settings body — dark Postiz tokens + our #111 text = unreadable */
  body.publyxa-composer #wrapper-settings .bg-newSettings,
  body.publyxa-composer #wrapper-settings .bg-newBgColor,
  body.publyxa-composer #wrapper-settings [class*="bg-newBg"],
  body.publyxa-composer #wrapper-settings [class*="bg-newSettings"],
  body.publyxa-composer #wrapper-settings [class*="bg-newCol"],
  body.publyxa-composer #social-settings,
  body.publyxa-composer #social-settings.bg-newBgColor,
  body.publyxa-composer #social-settings [class*="bg-new"],
  body.publyxa-composer #social-settings .bg-newBgColor,
  body.publyxa-composer #social-settings .bg-newSettings {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  body.publyxa-composer #social-settings {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    padding: 14px 14px 48px !important;
    gap: 14px !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.publyxa-composer #social-settings,
  body.publyxa-composer #social-settings *:not(svg):not(path):not(circle):not(rect) {
    color: #111111 !important;
  }

  body.publyxa-composer #social-settings .text-textColor,
  body.publyxa-composer #social-settings .text-newTextColor,
  body.publyxa-composer #social-settings label,
  body.publyxa-composer #social-settings span,
  body.publyxa-composer #social-settings p,
  body.publyxa-composer #social-settings div,
  body.publyxa-composer #social-settings h1,
  body.publyxa-composer #social-settings h2,
  body.publyxa-composer #social-settings h3,
  body.publyxa-composer #social-settings strong,
  body.publyxa-composer #social-settings b {
    color: #111111 !important;
    opacity: 1 !important;
  }

  body.publyxa-composer #social-settings input,
  body.publyxa-composer #social-settings textarea,
  body.publyxa-composer #social-settings select,
  body.publyxa-composer #social-settings [role="combobox"],
  body.publyxa-composer #social-settings button:not(.bg-\[\#612BD3\]) {
    background: #f4f4f5 !important;
    background-color: #f4f4f5 !important;
    border-color: #e5e5e7 !important;
    color: #111111 !important;
    font-size: 16px !important;
    min-height: 44px !important;
  }

  body.publyxa-composer #social-settings input,
  body.publyxa-composer #social-settings textarea,
  body.publyxa-composer #social-settings select {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e5e7 !important;
    border-radius: 10px !important;
  }

  body.publyxa-composer #social-settings .flex.flex-col {
    gap: 12px !important;
  }

  /* Keep purple Settings header readable */
  body.publyxa-composer #wrapper-settings .bg-\[\#612BD3\],
  body.publyxa-composer #wrapper-settings .bg-\[\#612BD3\] * {
    color: #ffffff !important;
  }
  body.publyxa-composer #wrapper-settings .bg-\[\#612BD3\] {
    background: #612bd3 !important;
    background-color: #612bd3 !important;
  }

  /* Meta (tags / date / repeat) scrolls with the post — not stuck over the editor */
  #publyxa-composer-meta {
    display: none;
  }

  body.publyxa-composer #publyxa-composer-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 8px;
    padding: 12px;
    border-top: 1px solid #e8e8ea;
    background: #ffffff;
  }

  body.publyxa-composer.publyxa-settings-open #publyxa-composer-meta {
    display: none !important;
  }

  body.publyxa-composer #publyxa-composer-meta .border.rounded-\[8px\].h-\[44px\],
  body.publyxa-composer #publyxa-composer-meta .border.border-newTextColor\/10.rounded-\[8px\],
  body.publyxa-composer #publyxa-composer-meta .px-\[16px\].border.border-newTextColor\/10.rounded-\[8px\].h-\[44px\] {
    width: 100% !important;
    flex: 0 0 auto !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    border-radius: 14px !important;
    border: 1px solid #e8e8ea !important;
    background: #f4f4f5 !important;
    justify-content: flex-start !important;
    color: #111111 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.publyxa-composer #publyxa-composer-meta .border.rounded-\[8px\].h-\[44px\].border-\[\#612BD3\],
  body.publyxa-composer #publyxa-composer-meta .border-\[\#612BD3\] {
    border-color: #612bd3 !important;
    background: #f3edff !important;
  }

  body.publyxa-composer #publyxa-composer-meta .ml-\[7px\] {
    margin-left: 0 !important;
    width: 100% !important;
  }

  body.publyxa-composer #publyxa-composer-meta .border.rounded-\[8px\].h-\[44px\] > .px-\[16px\],
  body.publyxa-composer #publyxa-composer-meta .border.rounded-\[8px\] > div.flex-1,
  body.publyxa-composer #publyxa-composer-meta .px-\[16px\].border.h-\[44px\] {
    justify-content: flex-start !important;
    padding-inline: 14px !important;
    gap: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.publyxa-composer #publyxa-composer-meta .absolute.bottom-\[100\%\],
  body.publyxa-composer #publyxa-composer-meta [class*="bottom-[100%]"] {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin-bottom: 8px !important;
    border-radius: 14px !important;
    border: 1px solid #e8e8ea !important;
    background: #ffffff !important;
    color: #111111 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
    z-index: 400 !important;
  }

  /* Preview: readable light cards + visible content on mobile */
  body.publyxa-composer .publyxa-preview-pane > .flex-1.relative {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    background: #f5f5f7 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.publyxa-composer.publyxa-tab-preview .publyxa-preview-pane > .flex-1.relative {
    min-height: calc(100dvh - 140px) !important;
    height: auto !important;
    flex: 1 1 auto !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.publyxa-composer .publyxa-preview-pane .absolute.top-0,
  body.publyxa-composer .publyxa-preview-pane [class*="absolute"][class*="top-0"] {
    padding: 14px !important;
    background: #f5f5f7 !important;
    color: #111111 !important;
  }

  body.publyxa-composer.publyxa-tab-preview .publyxa-preview-pane .absolute.top-0,
  body.publyxa-composer.publyxa-tab-preview .publyxa-preview-pane [class*="absolute"][class*="top-0"] {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 240px !important;
    overflow: visible !important;
    padding: 14px 12px 24px !important;
  }

  body.publyxa-composer .publyxa-preview-pane .text-textColor,
  body.publyxa-composer .publyxa-preview-pane .text-newTextColor {
    color: #111111 !important;
  }

  body.publyxa-composer .publyxa-preview-pane [class*="border"] {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #111111 !important;
  }

  body.publyxa-composer .publyxa-preview-pane p,
  body.publyxa-composer .publyxa-preview-pane span,
  body.publyxa-composer .publyxa-preview-pane h1,
  body.publyxa-composer .publyxa-preview-pane h2,
  body.publyxa-composer .publyxa-preview-pane h3,
  body.publyxa-composer .publyxa-preview-pane h4 {
    color: #111111 !important;
  }

  /* Action bar in document flow under content — scrolls with shell, React clicks intact */
  body.publyxa-composer .publyxa-composer-footer {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding: 12px 14px max(20px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #e8e8ea !important;
    background: #ffffff !important;
    color: #111111 !important;
    z-index: 1;
    pointer-events: auto !important;
  }

  body.publyxa-composer .publyxa-composer-footer > .flex-1.flex,
  body.publyxa-composer .publyxa-composer-footer > .pe-\[20px\].flex {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    pointer-events: auto !important;
  }

  body.publyxa-composer .publyxa-composer-footer button,
  body.publyxa-composer .publyxa-composer-footer .cursor-pointer {
    pointer-events: auto !important;
  }

  /* Meta controls: tags / repeat / date — unified mobile rows */
  body.publyxa-composer .publyxa-composer-footer .border.rounded-\[8px\].h-\[44px\],
  body.publyxa-composer .publyxa-composer-footer .border.border-newTextColor\/10.rounded-\[8px\],
  body.publyxa-composer .publyxa-composer-footer .px-\[16px\].border.border-newTextColor\/10.rounded-\[8px\].h-\[44px\] {
    width: 100% !important;
    flex: 0 0 auto !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    border-radius: 14px !important;
    border: 1px solid #e8e8ea !important;
    background: #f4f4f5 !important;
    justify-content: flex-start !important;
    color: #111111 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.publyxa-composer .publyxa-composer-footer .border.rounded-\[8px\].h-\[44px\].border-\[\#612BD3\],
  body.publyxa-composer .publyxa-composer-footer .border-\[\#612BD3\] {
    border-color: #612bd3 !important;
    background: #f3edff !important;
  }

  body.publyxa-composer .publyxa-composer-footer .ml-\[7px\] {
    margin-left: 0 !important;
    width: 100% !important;
  }

  body.publyxa-composer .publyxa-composer-footer .border.rounded-\[8px\].h-\[44px\] > .px-\[16px\],
  body.publyxa-composer .publyxa-composer-footer .border.rounded-\[8px\] > div.flex-1,
  body.publyxa-composer .publyxa-composer-footer .px-\[16px\].border.h-\[44px\] {
    justify-content: flex-start !important;
    padding-inline: 14px !important;
    gap: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.publyxa-composer .publyxa-composer-footer .border.rounded-\[8px\] > div.flex-1 > .cursor-pointer:nth-child(2),
  body.publyxa-composer .publyxa-composer-footer .px-\[16px\].border.h-\[44px\] > .cursor-pointer:nth-child(2) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: start !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111111 !important;
  }

  body.publyxa-composer .publyxa-composer-footer .border.rounded-\[8px\] > div.flex-1 > .cursor-pointer:last-child,
  body.publyxa-composer .publyxa-composer-footer .border.rounded-\[8px\] svg {
    flex: 0 0 auto !important;
    color: #6b6b70 !important;
  }

  /* Dropdown menus above footer controls */
  body.publyxa-composer .publyxa-composer-footer .absolute.bottom-\[100\%\],
  body.publyxa-composer .publyxa-composer-footer [class*="bottom-[100%]"] {
    left: 0 !important;
    right: 0 !important;
    start: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    translate: none !important;
    margin-bottom: 8px !important;
    border-radius: 14px !important;
    border: 1px solid #e8e8ea !important;
    background: #ffffff !important;
    color: #111111 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
    z-index: 400 !important;
  }

  body.publyxa-composer .publyxa-composer-footer .absolute.bottom-\[100\%\] *,
  body.publyxa-composer .publyxa-composer-footer [class*="bottom-[100%]"] .text-textColor {
    color: #111111 !important;
  }

  body.publyxa-composer .publyxa-composer-footer .min-w-\[180px\] {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  body.publyxa-composer .publyxa-composer-footer button.h-\[44px\],
  body.publyxa-composer .publyxa-composer-footer .h-\[44px\] {
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }

  body.publyxa-composer .publyxa-composer-footer,
  body.publyxa-composer .publyxa-composer-footer .text-textColor,
  body.publyxa-composer .publyxa-composer-footer input,
  body.publyxa-composer .publyxa-composer-footer label,
  body.publyxa-composer .publyxa-composer-footer span {
    color: #111111 !important;
  }

  body.publyxa-composer .publyxa-composer-footer input,
  body.publyxa-composer .publyxa-composer-footer [class*="placeholder"] {
    background: #f4f4f5 !important;
    border-color: #e5e5e7 !important;
  }

  /* Post Now always visible on touch (no hover) */
  body.publyxa-composer .publyxa-composer-footer .group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  body.publyxa-composer .publyxa-composer-footer .group > button.hidden.group-hover\:flex,
  body.publyxa-composer .publyxa-composer-footer button.hidden.group-hover\:flex {
    display: flex !important;
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.publyxa-composer .publyxa-composer-footer .post-now {
    border-radius: 14px !important;
    height: 48px !important;
    font-weight: 700 !important;
    color: #fff !important;
  }

  body.publyxa-composer .publyxa-composer-footer .arrow-change {
    display: none !important;
  }

  body.publyxa-composer .min-w-\[600px\],
  body.publyxa-composer .bg-newBgColorInner.min-w-\[600px\] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  #publyxa-toast {
    position: fixed;
    left: 50%;
    bottom: max(88px, calc(env(safe-area-inset-bottom) + 72px));
    transform: translateX(-50%);
    z-index: 2147483000;
    max-width: min(92vw, 360px);
    padding: 12px 16px;
    border-radius: 12px;
    background: #111111;
    color: #ffffff;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    pointer-events: none;
  }

  /* Native Postiz toasts sit at z-900 — behind the composer modal */
  body.publyxa-composer .fixed.top-\[32px\].z-\[900\],
  body.publyxa-composer .fixed[class*="z-[900]"][class*="top-[32px]"] {
    z-index: 2147482500 !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    start: auto !important;
    width: min(92vw, 360px) !important;
    min-width: 0 !important;
    max-width: min(92vw, 360px) !important;
    height: auto !important;
    min-height: 56px !important;
    background: #111111 !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
  }

  body.publyxa-composer .fixed.top-\[32px\].z-\[900\] .text-textColor,
  body.publyxa-composer .fixed[class*="z-[900]"] .text-textColor,
  body.publyxa-composer .fixed.top-\[32px\].z-\[900\] div {
    color: #ffffff !important;
  }

  /* Confirm close / delete dialogs must sit ABOVE the composer */
  body.publyxa-composer .fixed.bg-popup.w-full.h-full {
    z-index: 2147481000 !important;
  }

  body.publyxa-composer .fixed.bg-popup.min-w-full.min-h-full {
    z-index: 2147482000 !important;
  }

  body.publyxa-composer .fixed.bg-popup .bg-newBgColorInner.mx-auto.flex.flex-col.w-fit {
    width: min(100vw - 24px, 420px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    margin: 20vh auto 24px !important;
    padding: 20px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #111111 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  }

  body.publyxa-composer .fixed.bg-popup .bg-newBgColorInner.mx-auto .text-\[24px\] {
    font-size: 18px !important;
    color: #111111 !important;
  }

  body.publyxa-composer .fixed.bg-popup .bg-newBgColorInner.mx-auto button {
    min-height: 44px;
    border-radius: 12px !important;
  }

  /* Our delete confirm — always on top */
  #publyxa-delete-confirm {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483640;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.45);
  }
  #publyxa-delete-confirm.is-open {
    display: flex;
  }
  #publyxa-delete-confirm .publyxa-delete-sheet {
    width: min(100%, 420px);
    background: #fff;
    color: #111;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  }
  #publyxa-delete-confirm .publyxa-delete-title {
    font-size: 17px;
    font-weight: 750;
    margin-bottom: 8px;
  }
  #publyxa-delete-confirm .publyxa-delete-msg {
    font-size: 14px;
    line-height: 1.45;
    color: #444;
    margin-bottom: 16px;
  }
  #publyxa-delete-confirm .publyxa-delete-actions {
    display: flex;
    gap: 10px;
  }
  #publyxa-delete-confirm .publyxa-delete-actions button {
    flex: 1;
    min-height: 44px;
    border-radius: 12px;
    border: 0;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  #publyxa-delete-confirm .publyxa-delete-cancel {
    background: #f0f0f2;
    color: #222;
  }
  #publyxa-delete-confirm .publyxa-delete-ok {
    background: #e11d48;
    color: #fff;
  }

  body.publyxa-composer #social-content .publyxa-thread-has-remove [class*="FF3F3F"].publyxa-trash-armed {
    position: fixed !important;
    left: 12px !important;
    top: 12px !important;
    width: 44px !important;
    height: 44px !important;
    opacity: 0.02 !important;
    z-index: 2147483630 !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  /* Fallback if JS chrome not ready yet */
  .w-full.h-full.flex-1.p-\[40px\].flex.relative {
    padding: 0 !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  /* ========== Media library: larger tiles, cleaner mobile UI ========== */
  .w8-max {
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    padding: 10px !important;
    float: left !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Do NOT clip here — it cuts the delete X at the corner */
  .w8-max > div {
    border-radius: 14px !important;
    overflow: visible !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    position: relative !important;
  }

  /* Clip only the media image/video */
  .w8-max .w-full.h-full.rounded-\[6px\].overflow-hidden,
  .w8-max > div > .w-full.h-full.rounded-\[6px\].overflow-hidden {
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  .w8-max .rounded-\[6px\] {
    border-radius: 12px !important;
  }

  /* Delete X — full circle, outside the rounded image */
  .w8-max svg.absolute.-top-\[5px\],
  .w8-max svg.absolute.-end-\[5px\],
  .w8-max .absolute.-top-\[5px\].-end-\[5px\],
  .w8-max svg.cursor-pointer.z-\[100\] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: -9px !important;
    right: -9px !important;
    inset-inline-end: -9px !important;
    left: auto !important;
    z-index: 200 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  /* Foto vs Video badges */
  .w8-max:has(img)::after,
  .w8-max:has(video)::after {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 120;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }

  .w8-max:has(img)::after {
    content: "Foto";
    color: #0e0e0e;
    background: rgba(255, 255, 255, 0.92);
  }

  body.publyxa-lang-en .w8-max:has(img)::after,
  html.publyxa-lang-en .w8-max:has(img)::after {
    content: "Photo";
  }

  .w8-max:has(video)::after {
    content: "Video";
    color: #fff;
    background: #612bd3;
  }

  body.publyxa-lang-en .w8-max:has(video)::after,
  html.publyxa-lang-en .w8-max:has(video)::after {
    content: "Video";
  }

  /* Play mark on videos */
  .w8-max:has(video) .w-full.h-full.rounded-\[6px\].overflow-hidden::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 30;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    pointer-events: none;
  }

  .w8-max:has(video) .w-full.h-full.rounded-\[6px\].overflow-hidden::after {
    content: "";
    position: absolute;
    left: calc(50% + 2px);
    top: 50%;
    z-index: 31;
    width: 0;
    height: 0;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #fff;
    pointer-events: none;
  }

  /* Composer chips: same distinction */
  .sortable-container .w-\[40px\].h-\[40px\]:has(video)::after,
  .cursor-pointer.rounded-\[5px\].w-\[40px\].h-\[40px\]:has(video)::after {
    content: "Video";
    position: absolute;
    left: 4px;
    bottom: 4px;
    z-index: 5;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: #612bd3;
    border-radius: 6px;
    padding: 2px 5px;
    pointer-events: none;
  }

  .sortable-container .w-\[40px\].h-\[40px\]:has(img)::after,
  .cursor-pointer.rounded-\[5px\].w-\[40px\].h-\[40px\]:has(img)::after {
    content: "Foto";
    position: absolute;
    left: 4px;
    bottom: 4px;
    z-index: 5;
    font-size: 9px;
    font-weight: 700;
    color: #0e0e0e;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
    padding: 2px 5px;
    pointer-events: none;
  }

  body.publyxa-lang-en .sortable-container .w-\[40px\].h-\[40px\]:has(img)::after,
  body.publyxa-lang-en .cursor-pointer.rounded-\[5px\].w-\[40px\].h-\[40px\]:has(img)::after,
  html.publyxa-lang-en .sortable-container .w-\[40px\].h-\[40px\]:has(img)::after,
  html.publyxa-lang-en .cursor-pointer.rounded-\[5px\].w-\[40px\].h-\[40px\]:has(img)::after {
    content: "Photo";
  }

  /* Hide filename overlay that clutters tiny tiles */
  .w8-max .absolute.bottom-\[10px\].end-\[10px\].z-\[100\] {
    display: none !important;
  }

  /* Selection badge larger and easier to tap */
  .w8-max .w-\[24px\].h-\[24px\].rounded-full.bg-\[\#612BD3\] {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    bottom: 8px !important;
    inset-inline-end: 8px !important;
  }

  /* Show expand/delete affordances without hover on touch */
  .w8-max .hidden.group-hover\:block {
    display: block !important;
    opacity: 1 !important;
  }

  .w8-max .absolute.z-\[20\] .p-\[4px\].bg-black\/40 {
    background: rgba(0, 0, 0, 0.55) !important;
    border-radius: 10px !important;
    padding: 6px !important;
  }

  /* Media library modal chrome */
  .bg-newBgColorInner.mx-auto.flex.flex-col.w-fit.rounded-\[24px\],
  .bg-newBgColorInner.mx-auto.flex.flex-col.rounded-\[24px\] {
    width: min(100vw - 16px, 100%) !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 8px auto !important;
    border-radius: 16px !important;
    padding: 16px !important;
  }

  .p-\[32px\].flex.flex-col.text-newTextColor.bg-newBgColorInner.rounded-\[24px\] {
    padding: 14px !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Top toolbar of media library */
  .flex.items-center.gap-\[12px\] .h-\[44px\] {
    height: 42px !important;
  }

  /* Footer Cancel / Agregar full width */
  .flex.justify-end.mt-\[32px\].gap-\[8px\] {
    margin-top: 16px !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }

  .flex.justify-end.mt-\[32px\].gap-\[8px\] > button {
    width: 100% !important;
    justify-content: center !important;
    border-radius: 12px !important;
    height: 48px !important;
  }

  /* Composer: attached media — keep React tiles in place (no DOM wrap).
     Clip only the image inner; show a large native close hit target. */
  .sortable-container .w-\[40px\].h-\[40px\],
  .cursor-pointer.rounded-\[5px\].w-\[40px\].h-\[40px\],
  .publyxa-media-tile {
    width: 76px !important;
    height: 76px !important;
    border-radius: 12px !important;
    border-width: 2px !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
  }

  .sortable-container .w-\[40px\].h-\[40px\] > .w-full.h-full.relative,
  .cursor-pointer.rounded-\[5px\].w-\[40px\].h-\[40px\] > .w-full.h-full.relative,
  .publyxa-media-tile > .w-full.h-full.relative {
    overflow: hidden !important;
    border-radius: 10px !important;
    width: 100% !important;
    height: 100% !important;
  }

  .sortable-container {
    gap: 10px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding: 8px 8px 4px 4px !important;
  }

  .b1.flex.flex-col.gap-\[8px\],
  .b1.flex.flex-col.gap-\[8px\] .px-\[12px\],
  .b1.flex.flex-col.gap-\[8px\] > .flex.gap-\[10px\].px-\[12px\],
  body.publyxa-composer #social-content .b1,
  body.publyxa-agent .editor.rm-bg .b1 {
    overflow: visible !important;
  }

  /* Native CloseCircleIcon — large tappable X (React onClick intact) */
  .sortable-container svg.absolute.-end-\[4px\].-top-\[4px\],
  .sortable-container svg.absolute.rounded-full.bg-white,
  .sortable-container .publyxa-media-close,
  .publyxa-media-tile > svg.absolute.rounded-full,
  .publyxa-media-tile > svg.absolute.-end-\[4px\],
  body.publyxa-mobile .sortable-container svg.absolute.-end-\[4px\],
  body.publyxa-composer .sortable-container svg.absolute.rounded-full.bg-white {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    inset-inline-end: -8px !important;
    left: auto !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    z-index: 50 !important;
    border-radius: 999px !important;
    background: #ff3535 !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Legacy wrap/button leftovers — hide if any remain */
  .publyxa-media-wrap .publyxa-media-close-btn,
  .sortable-container .publyxa-media-close-btn,
  .sortable-container .publyxa-media-close-hit,
  .publyxa-media-wrap .publyxa-media-close-btn span {
    display: none !important;
  }

  .b1.flex.flex-col.gap-\[8px\] .px-\[12px\] {
    padding-inline: 10px !important;
  }

  /* Keep native maxMedia labels hidden only when we have not marked them as tool labels */
  .maxMedia\:hidden:not(.publyxa-tool-label):not(.publyxa-ai-label) {
    display: none !important;
  }

  /* ===== Agent (mobile): text next to every function icon ===== */
  body.publyxa-agent .publyxa-tool-label,
  body.publyxa-agent .publyxa-ai-label,
  body.publyxa-agent .publyxa-insert-media .maxMedia\:hidden,
  body.publyxa-agent .publyxa-design-media .maxMedia\:hidden,
  body.publyxa-agent .iconBreak\:hidden.publyxa-tool-label,
  body.publyxa-agent .maxMedia\:hidden.publyxa-tool-label {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  body.publyxa-agent .publyxa-insert-media,
  body.publyxa-agent .publyxa-design-media,
  body.publyxa-agent .publyxa-ai-image-btn,
  body.publyxa-agent .publyxa-ai-video-btn,
  body.publyxa-agent .cursor-pointer.h-\[30px\]:has(#clip0_insertmedia),
  body.publyxa-agent .cursor-pointer.h-\[30px\]:has(#clip0_designmedia) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: #f3f3f5 !important;
    color: #222 !important;
  }

  body.publyxa-agent .publyxa-ai-image-btn {
    background: #f3edff !important;
    color: #612bd3 !important;
  }

  body.publyxa-agent .publyxa-ai-video-btn {
    background: #efe9ff !important;
    color: #4b2aa8 !important;
  }

  /* Hide vertical divider after AI Vídeo (VerticalDividerIcon) */
  body.publyxa-agent .flex.gap-\[8px\].px-\[12px\].border-t > .text-newColColor,
  body.publyxa-agent .editor.rm-bg .flex.gap-\[8px\].px-\[12px\].border-t > .text-newColColor,
  body.publyxa-agent .b1 .text-newColColor.h-full.flex.items-center,
  body.publyxa-agent .trz.agent .text-newColColor.h-full {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.publyxa-agent .editor.rm-bg .flex.gap-\[8px\].px-\[12px\].border-t,
  body.publyxa-agent .b1 .flex.gap-\[8px\].px-\[12px\].border-t {
    flex-wrap: wrap !important;
    gap: 6px !important;
    border-top: 0 !important;
    padding: 4px 0 8px !important;
  }

  body.publyxa-agent .editor.rm-bg .flex.py-\[10px\].b2,
  body.publyxa-agent .b1 .flex.py-\[10px\].b2 {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Agent chat input controls */
  body.publyxa-agent .copilotKitInputControls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.publyxa-agent .copilotKitInputControlButton.publyxa-agent-input-btn,
  body.publyxa-agent .publyxa-agent-input-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    border: 0 !important;
    background: #f3f3f5 !important;
    color: #222 !important;
    min-height: 40px !important;
    height: 40px !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
  }

  body.publyxa-agent .copilotKitInputControlButton.publyxa-agent-input-btn svg,
  body.publyxa-agent .publyxa-agent-input-btn svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex-shrink: 0 !important;
    display: block !important;
  }

  body.publyxa-agent .publyxa-agent-btn-label {
    display: inline !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Enviar / Parar — circular icon button */
  body.publyxa-agent .copilotKitInputControlButton.publyxa-agent-send-btn,
  body.publyxa-agent .publyxa-agent-send-btn {
    background: #612bd3 !important;
    color: #fff !important;
    border-radius: 999px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin-inline-start: auto !important;
    gap: 0 !important;
  }

  body.publyxa-agent .publyxa-agent-send-btn .publyxa-agent-btn-label {
    display: none !important;
  }

  body.publyxa-agent .publyxa-agent-send-btn svg,
  body.publyxa-agent .publyxa-agent-send-btn svg path {
    stroke: #fff !important;
    fill: none !important;
    color: #fff !important;
  }

  body.publyxa-agent .publyxa-agent-send-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  body.publyxa-agent .publyxa-agent-send-btn:disabled,
  body.publyxa-agent .copilotKitInputControlButton.publyxa-agent-send-btn:disabled {
    opacity: 0.45 !important;
  }

  /* Adjuntar stays quiet secondary */
  body.publyxa-agent .publyxa-agent-attach-btn {
    background: #f3f3f5 !important;
    color: #222 !important;
  }

  /* Channel list: name beside each platform icon */
  body.publyxa-agent .publyxa-agent-channels,
  body.publyxa-agent .trz.bg-newBgColorInner.publyxa-agent-channels {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.publyxa-agent .publyxa-agent-channel-name,
  body.publyxa-agent .group-\[\.sidebar\]\:hidden,
  body.publyxa-agent .publyxa-agent-channels .flex-1.whitespace-nowrap,
  body.publyxa-agent .publyxa-agent-channels h2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.publyxa-agent .publyxa-agent-channels .flex.gap-\[12px\].items-center {
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* ===== Calendar mobile: Canales actions section (web parity) ===== */
  #publyxa-cal-actions,
  .publyxa-cal-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 10px 12px !important;
    margin: 0 0 8px !important;
    border-radius: 14px !important;
    background: #f4f4f5 !important;
    color: #1a1a1a !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 5 !important;
  }

  body.publyxa-composer #publyxa-cal-actions,
  body.publyxa-agent #publyxa-cal-actions {
    display: none !important;
  }

  #publyxa-cal-actions .publyxa-cal-actions-title {
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    color: #1a1a1a !important;
    margin: 0 0 2px !important;
  }

  #publyxa-cal-actions .publyxa-cal-actions-row {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  #publyxa-cal-actions .publyxa-cal-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #publyxa-cal-actions .publyxa-cal-btn-add {
    flex: 1 1 auto !important;
    background: #e8e8ea !important;
    color: #222 !important;
  }

  #publyxa-cal-actions .publyxa-cal-btn-invite {
    flex: 0 0 44px !important;
    width: 44px !important;
    padding: 0 !important;
    background: #e8e8ea !important;
    color: #222 !important;
  }

  #publyxa-cal-actions .publyxa-cal-btn-create {
    width: 100% !important;
    background: #612bd3 !important;
    color: #fff !important;
  }

  #publyxa-cal-actions .publyxa-cal-btn-create svg path {
    stroke: #fff !important;
  }

  #publyxa-cal-actions .publyxa-cal-btn-channels {
    width: 100% !important;
    background: #fff !important;
    color: #222 !important;
    border: 1px solid #e0e0e3 !important;
  }

  /* Channels drawer: always show labels like desktop expanded */
  body.publyxa-mobile .publyxa-channels-panel [class*="group-[.sidebar]:hidden"],
  body.publyxa-channels-open .publyxa-channels-panel [class*="group-[.sidebar]:hidden"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.publyxa-mobile .publyxa-channels-panel button [class*="group-[.sidebar]:hidden"],
  body.publyxa-channels-open .publyxa-channels-panel button [class*="group-[.sidebar]:hidden"] {
    display: block !important;
  }

  body.publyxa-mobile .publyxa-channels-panel .group-\[\.sidebar\]\:w-\[44px\],
  body.publyxa-mobile .publyxa-channels-panel .flex.flex-col.gap-\[8px\] {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  body.publyxa-mobile .publyxa-channels-panel .flex.gap-\[8px\] {
    flex-direction: row !important;
    width: 100% !important;
  }

  body.publyxa-mobile .publyxa-channels-panel button.bg-btnSimple,
  body.publyxa-mobile .publyxa-channels-panel button.bg-btnPrimary {
    min-height: 44px !important;
    width: auto !important;
    flex: 1 1 auto !important;
    padding: 10px 14px !important;
  }
}

@media (min-width: 480px) and (max-width: 1023px) {
  .w8-max {
    width: calc(33.333% - 8px) !important;
    max-width: calc(33.333% - 8px) !important;
  }
}

/* ===== Global (desktop + mobile): channel action buttons + menus + version ===== */

/* Equal-size Add Channel + Send invite link */
.publyxa-channel-action-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}

.publyxa-add-channel-btn,
.publyxa-invite-btn {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

.publyxa-invite-btn .publyxa-invite-label,
.publyxa-invite-btn span {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  text-align: start !important;
}

/* Hide baked-in NEXT_PUBLIC_VERSION=publyxa-staging */
.mt-\[5px\].text-center.flex.flex-col > div:only-child,
.mt-\[5px\].text-center.flex.flex-col > div:last-child:empty {
  display: none !important;
}

/* Channel ⋮ menu: keep inside viewport (opens leftward when near right edge) */
.fixed.shadow-menu.publyxa-channel-menu,
.fixed.p-\[12px\].bg-newBgColorInner.shadow-menu {
  z-index: 10080 !important;
  max-width: min(280px, calc(100vw - 24px)) !important;
  box-sizing: border-box !important;
}

@media (max-width: 1023px) {
  .fixed.shadow-menu.publyxa-channel-menu,
  .fixed.p-\[12px\].bg-newBgColorInner.shadow-menu {
    left: auto !important;
    right: 12px !important;
  }
}


/* publyxa-toast-z */
[class*="z-[900]"].animate-fadeDown,
.animate-fadeDown.fixed {
  z-index: 2147483646 !important;
}


/* publyxa-ai-prompt-field */
.publyxa-ai-prompt textarea#publyxa-ai-prompt-input {
  width: 100% !important;
  min-height: 120px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 5;
}
.publyxa-ai-prompt {
  display: flex !important;
  visibility: visible !important;
}


/* publyxa-settings-desktop-light */
/* Do not force dark on /settings; respect app theme tokens */
body:not(.dark) #publyxa-settings-email-banner {
  background: #fff !important;
  color: #111 !important;
}
body.dark #publyxa-settings-email-banner,
html.dark #publyxa-settings-email-banner {
  background: #1f2937 !important;
  color: #f9fafb !important;
  border-color: rgba(255,255,255,.15) !important;
}

#publyxa-agent-wait {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: 99999;
  max-width: min(520px, calc(100vw - 24px));
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(20, 16, 40, 0.92);
  color: #f3eefc;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  pointer-events: none;
  display: none;
}

#publyxa-agent-wait { display: none !important; }
#publyxa-agent-progress {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 100000;
  display: none;
  align-items: center;
  gap: 12px;
  max-width: min(560px, calc(100vw - 24px));
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(18, 14, 36, 0.96);
  color: #f6f2ff;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  border: 1px solid rgba(167,139,250,.35);
  pointer-events: none;
}
#publyxa-agent-progress .pap-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #c4b5fd;
  animation: papspin 0.8s linear infinite;
  flex: 0 0 auto;
}
#publyxa-agent-progress.pap-done .pap-spinner { display: none; }
#publyxa-agent-progress.pap-stuck {
  border-color: rgba(251, 191, 36, .55);
}
#publyxa-agent-progress .pap-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
#publyxa-agent-progress .pap-sub {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
  line-height: 1.35;
}
@keyframes papspin { to { transform: rotate(360deg); } }

#publyxa-agent-progress{pointer-events:auto}
#publyxa-agent-progress .pap-btn{margin-top:8px;display:none;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;border:0;background:#a78bfa;color:#1a102e;font-size:12px;font-weight:700;cursor:pointer}


#publyxa-agent-progress .pap-body{min-width:min(280px,70vw);flex:1}
#publyxa-agent-progress .pap-bar{margin-top:8px;height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
#publyxa-agent-progress .pap-bar-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#a78bfa,#c4b5fd);transition:width .45s ease}
#publyxa-agent-progress .pap-meta{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;opacity:.8}
#publyxa-agent-progress.pap-done .pap-bar-fill{background:#86efac}

#publyxa-agent-progress{position:relative}
#publyxa-agent-progress .pap-close{position:absolute;top:6px;right:8px;border:0;background:transparent;color:rgba(255,255,255,.7);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px}
#publyxa-agent-progress .pap-close:hover{color:#fff}

/* Publyxa agent references mobile */
body.publyxa-mobile.publyxa-agent #publyxa-agent-refs-mobile,
body.publyxa-agent #publyxa-agent-refs-mobile {
  display: block !important;
  pointer-events: auto !important;
  z-index: 70 !important;
}
body.publyxa-mobile.publyxa-agent #publyxa-agent-refs,
body.publyxa-channels-open.publyxa-agent #publyxa-agent-refs {
  display: block !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Keep channels drawer scrollable so references at bottom are reachable */
body.publyxa-mobile.publyxa-agent .publyxa-channels-panel,
body.publyxa-mobile.publyxa-agent .publyxa-agent-channels,
body.publyxa-channels-open.publyxa-agent [class*="w-[260px]"],
body.publyxa-channels-open.publyxa-agent [class*="w-[100px]"] {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
body.publyxa-mobile.publyxa-agent #publyxa-agent-refs-mobile .publyxa-refs-upload-btn {
  min-height: 40px;
}