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

  /* Channels drawer only */
  .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.w-\[260px\],
  .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.w-\[100px\],
  .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.group,
  .blurMe > .flex.flex-1.gap-\[1px\] > .w-\[260px\],
  .blurMe > .flex.flex-1.gap-\[1px\] > .w-\[100px\] {
    position: fixed !important;
    top: 56px !important;
    bottom: 0 !important;
    inset-inline-start: 0 !important;
    width: min(280px, 86vw) !important;
    z-index: 10045 !important;
    transform: translateX(-110%) !important;
    transition: transform 0.2s ease !important;
    background: #1a1a1a !important;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.4) !important;
  }

  body.publyxa-channels-open .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.w-\[260px\],
  body.publyxa-channels-open .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.w-\[100px\],
  body.publyxa-channels-open .blurMe > .flex.flex-1.gap-\[1px\] > .flex.relative.flex-col.group,
  body.publyxa-channels-open .blurMe > .flex.flex-1.gap-\[1px\] > .w-\[260px\],
  body.publyxa-channels-open .blurMe > .flex.flex-1.gap-\[1px\] > .w-\[100px\] {
    transform: translateX(0) !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;
  }

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

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

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

  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 {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    flex-direction: column !important;
    background: #ffffff !important;
    color: #111111 !important;
  }

  body.publyxa-composer .publyxa-composer-shell {
    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;
    overflow: hidden !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: hidden !important;
    min-height: 0 !important;
    flex: 1 1 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: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !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;
  }

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

  /* ONE scroll for channels + publication + settings */
  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: 1 1 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    background: #ffffff !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;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 12px !important;
    gap: 12px !important;
    background: #ffffff !important;
    color: #111111 !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;
  }

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

  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 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !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;
    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;
    height: auto !important;
    max-height: 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: 0 !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 {
    flex-wrap: wrap !important;
    align-items: center !important;
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px !important;
    gap: 6px !important;
    border-color: #ececf0 !important;
  }

  body.publyxa-composer #social-content .b1 .flex.py-\[10px\].b2 {
    flex-wrap: wrap !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 4px !important;
    padding-bottom: 4px !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: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
  }

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

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

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

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

  body.publyxa-composer #social-content .flex.flex-col.items-center.gap-\[10px\].pe-\[12px\] {
    order: -1 !important;
    flex-direction: row !important;
    width: 100% !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 0 4px !important;
    min-height: 32px !important;
  }

  body.publyxa-composer #social-content .publyxa-thread-has-remove [class*="FF3F3F"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    /* keep pointer-events so React can receive the proxied click */
    overflow: hidden !important;
  }

  body.publyxa-composer #social-content .flex:has(> .bg-\[\#D82D7E\]) {
    width: 100% !important;
    display: flex !important;
  }

  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\] {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin-top: 10px !important;
    border-radius: 14px !important;
    justify-content: center !important;
    gap: 10px !important;
    padding-inline: 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(216, 45, 126, 0.28);
  }

  body.publyxa-composer #social-content .bg-\[\#D82D7E\] .\!text-white,
  body.publyxa-composer #social-content .bg-\[\#D82D7E\] div {
    color: #ffffff !important;
  }

  body.publyxa-composer #social-content .flex.items-center:has(.bg-\[\#D82D7E\]) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Hide "Diseñar medios" on mobile composer */
  body.publyxa-composer #social-content .publyxa-hide-design,
  body.publyxa-composer #social-content .cursor-pointer.h-\[30px\]:has(#clip0_designmedia) {
    display: none !important;
  }

  /* AI image button: clear image icon + AI label (same chrome as other pills) */
  body.publyxa-composer #social-content .publyxa-ai-image-btn {
    gap: 5px !important;
    padding-inline: 10px !important;
    border-radius: 8px !important;
    min-height: 32px !important;
  }

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

  /* Settings accordion */
  body.publyxa-composer #wrapper-settings {
    flex: 0 0 auto !important;
    padding: 8px 12px 10px !important;
    background: #ffffff !important;
    min-height: 0 !important;
  }

  /* Open state: take remaining height so absolute settings content is visible */
  body.publyxa-composer #wrapper-settings.flex-1 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-top: 8px !important;
  }

  body.publyxa-composer #wrapper-settings.flex-1 > div {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #f4f4f5 !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 #wrapper-settings.flex-1 .bg-\[\#612BD3\].rounded-\[12px\] {
    border-radius: 14px 14px 0 0 !important;
  }

  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: 1 1 auto !important;
    min-height: 180px !important;
    height: auto !important;
    overflow: hidden !important;
    display: block !important;
  }

  body.publyxa-composer #wrapper-settings .absolute.left-0.top-0.w-full.h-full,
  body.publyxa-composer #wrapper-settings [class*="absolute"][class*="left-0"][class*="top-0"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
    color: #111111 !important;
  }

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

  body.publyxa-composer #social-settings .text-textColor,
  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 input,
  body.publyxa-composer #social-settings textarea,
  body.publyxa-composer #social-settings select {
    color: #111111 !important;
  }

  body.publyxa-composer #social-settings input,
  body.publyxa-composer #social-settings textarea,
  body.publyxa-composer #social-settings select {
    background: #f4f4f5 !important;
    border-color: #e5e5e7 !important;
  }

  /* Preview: readable light cards */
  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;
  }

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

  /* Sticky action footer — light */
  body.publyxa-composer .publyxa-composer-footer {
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px max(14px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #e8e8ea !important;
    background: #ffffff !important;
    color: #111111 !important;
    flex-shrink: 0 !important;
  }

  body.publyxa-composer .publyxa-composer-footer > .flex-1.flex,
  body.publyxa-composer .publyxa-composer-footer > .pe-\[20px\].flex {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }

  body.publyxa-composer .publyxa-composer-footer > .flex-1.flex {
    order: 1;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.publyxa-composer .publyxa-composer-footer > .pe-\[20px\].flex {
    order: 2;
    flex-direction: column !important;
    align-items: stretch !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;
  }

  /* Confirm close dialog above composer chrome */
  body.publyxa-composer .fixed.bg-popup {
    z-index: 2147481000 !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;
  }

  /* 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: 6px !important;
    float: left !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .w8-max > div {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  }

  .w8-max .rounded-\[6px\] {
    border-radius: 12px !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);
  }

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

  /* 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: 30;
    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: 30;
    font-size: 9px;
    font-weight: 700;
    color: #0e0e0e;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
    padding: 2px 5px;
    pointer-events: none;
  }

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

  .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 previews bigger */
  .sortable-container .w-\[40px\].h-\[40px\],
  .cursor-pointer.rounded-\[5px\].w-\[40px\].h-\[40px\] {
    width: 76px !important;
    height: 76px !important;
    border-radius: 12px !important;
    border-width: 2px !important;
  }

  .sortable-container {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

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

  .maxMedia\:hidden {
    display: none !important;
  }
}

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