/* ============================================================
   POSTIZ MOBILE RESPONSIVE OVERRIDES
   Injected via nginx sub_filter into every HTML page
   ============================================================ */

/* ------------------------------------------------------------
   COMMIT 1 — Foundation: viewport overflow & base fixes
   ------------------------------------------------------------ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Remove min-w-screen that forces horizontal overflow on mobile */
@media (max-width: 768px) {
  .min-w-screen {
    min-width: 0 !important;
  }

  /* Reduce outer padding on small screens */
  .p-\[12px\] {
    padding: 6px !important;
  }

  /* Ensure images and embeds don't overflow */
  img, video, iframe, embed {
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 2 — Bottom navigation bar (replaces sidebar on mobile)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Hide the fixed left sidebar column */
  #left-menu {
    display: none !important;
  }

  /* Collapse the sidebar wrapper div (w-[80px]) */
  .w-\[80px\].flex.flex-col.bg-newBgColorInner.rounded-\[12px\] {
    display: none !important;
  }

  /* Give content area bottom padding so it doesn't sit behind the nav bar */
  .flex-1.bg-newBgLineColor.rounded-\[12px\] {
    padding-bottom: 68px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* Bottom navigation bar — injected by mobile.js */
  #mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: rgba(26, 25, 25, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #mobile-bottom-nav a,
  #mobile-bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    height: 100%;
    position: relative;
    color: #ffffff;
    opacity: 0.45;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    min-height: 44px;
    transition: color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
  }

  #mobile-bottom-nav a:hover,
  #mobile-bottom-nav button:hover {
    opacity: 0.75;
  }

  #mobile-bottom-nav a.active,
  #mobile-bottom-nav button.active {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  /* Purple indicator bar above active tab */
  #mobile-bottom-nav a.active::before,
  #mobile-bottom-nav button.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: #7c3aed;
    border-radius: 0 0 4px 4px;
  }

  /* Active icon scales up slightly */
  #mobile-bottom-nav a.active svg,
  #mobile-bottom-nav button.active svg {
    transform: scale(1.12);
    transition: transform 0.15s ease;
  }

  /* Press / tap feedback */
  #mobile-bottom-nav a:active,
  #mobile-bottom-nav button:active {
    transform: scale(0.9);
    opacity: 0.6 !important;
  }

  #mobile-bottom-nav svg {
    width: 20px;
    height: 20px;
    transition: transform 0.15s ease;
  }
}

/* ------------------------------------------------------------
   COMMIT 3 — Responsive header
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Shrink header height */
  .h-\[80px\].flex.bg-newBgColorInner {
    height: 56px !important;
    min-height: 56px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  /* Shrink page title font */
  .text-\[24px\].font-\[600\] {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
  }

  /* Hide lower-priority header icons on very small screens */
  @media (max-width: 480px) {
    /* Chrome extension, streak, language — hide on very small */
    .chrome-ext-hide-mobile,
    .streak-hide-mobile,
    .lang-hide-mobile {
      display: none !important;
    }
  }

  /* Tighten header icon gap */
  .flex.gap-\[20px\].text-textItemBlur {
    gap: 10px !important;
  }

  /* Hide dividers between icons when cramped */
  .w-\[1px\].h-\[20px\].bg-blockSeparator {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 4 — Calendar & content area
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Calendar grid — allow horizontal scroll instead of squishing */
  .grid.\[grid-template-columns\:136px_repeat\(7\,_minmax\(0\,_1fr\)\)\] {
    min-width: 700px !important;
  }

  .grid.grid-cols-7 {
    min-width: 560px !important;
  }

  /* Wrap calendar in a horizontal scroll container */
  .flex-1.relative:has(.grid) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Scrollable content areas */
  .overflow-auto,
  .overflow-hidden {
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce content inner padding */
  .p-\[20px\] {
    padding: 12px !important;
  }

  .gap-\[8px\] {
    gap: 4px !important;
  }

  /* Launches calendar sidebar — hide the 260px channels panel */
  .flex.relative.flex-col.w-\[260px\] {
    display: none !important;
  }

  /* Stack two-panel layouts (calendar, settings) vertically on mobile */
  .flex.flex-1.gap-\[1px\] {
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Settings left nav — limit height and scroll horizontally */
  .flex.flex-1.gap-\[1px\] > .bg-newBgColorInner:first-child {
    max-height: 56px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Settings left nav items — inline so they scroll */
  .flex.flex-1.gap-\[1px\] > .bg-newBgColorInner:first-child > * {
    display: inline-flex !important;
    white-space: nowrap !important;
  }

  /* Content panel (second child or only child) — fill remaining height */
  .flex.flex-1.gap-\[1px\] > .bg-newBgColorInner:not(:first-child),
  .flex.flex-1.gap-\[1px\] > .bg-newBgColorInner:only-child {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    white-space: normal !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 5 — UX polish: touch targets, modals, forms
   ------------------------------------------------------------ */

/* Minimum 44px touch target on interactive elements — scoped to avoid breaking inline links */
@media (max-width: 768px) {
  button,
  [role="button"],
  select,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Nav and standalone action links (not inline text links) */
  nav a,
  [role="navigation"] a,
  .cursor-pointer:not(p):not(span):not(li):not(.rounded-full) {
    min-height: 44px;
  }

  /* Exception: inline icon buttons inside text */
  button svg:only-child {
    pointer-events: none;
  }

  /* Modals — full screen on mobile */
  [class*="mantine-Modal-content"],
  [class*="mantine-Drawer-content"] {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 60dvh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  [class*="mantine-Modal-overlay"],
  [class*="mantine-Drawer-overlay"] {
    background: rgba(0,0,0,0.6) !important;
  }

  /* Make modal header sticky */
  [class*="mantine-Modal-header"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: var(--new-bgColorInner, #1a1919) !important;
  }

  /* Form inputs — larger on mobile */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important; /* prevents iOS zoom */
    min-height: 44px !important;
    padding: 10px 12px !important;
  }

  /* Auth page — already responsive via lg: classes, just ensure
     login card takes full width on mobile */
  .lg\:w-\[600px\] {
    width: 100% !important;
  }

  /* Increase tap area on post/channel items in calendar */
  .cursor-pointer:not(.rounded-full) {
    min-height: 36px;
  }

  /* Scrollbar — hide on mobile (use native scroll) */
  .scrollbar {
    scrollbar-width: none !important;
  }
  .scrollbar::-webkit-scrollbar {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 6 — Post composer / New Launch modal
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Reduce the enormous 40px outer padding inside the modal wrapper */
  .w-full.h-full.flex-1.p-\[40px\].flex.relative,
  [class*="mantine-Modal-body"] .p-\[40px\] {
    padding: 0 !important;
  }

  /* The inner card: keep flex-col but remove border-radius on mobile */
  .flex-1.bg-newBgColorInner.rounded-\[20px\].flex-col {
    border-radius: 0 !important;
  }

  /* Main row (editor + preview) → stack vertically */
  .flex-1.flex:has(.w-\[580px\]) {
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Left panel (editor) — full width, reasonable max height */
  .flex.flex-col.flex-1.border-e.border-newBorder {
    max-height: 55vh !important;
    overflow-y: auto !important;
    border-inline-end: none !important;
    border-bottom: 1px solid var(--new-border, #2b2a2a) !important;
  }

  /* Right panel (preview) — override fixed 580px, full width */
  .w-\[580px\].flex.flex-col {
    width: 100% !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
  }

  /* Header rows inside composer panels — tighten */
  .bg-newBgColor.h-\[65px\].rounded-s-\[20px\],
  .bg-newBgColor.h-\[65px\].rounded-e-\[20px\] {
    height: 48px !important;
    font-size: 14px !important;
    border-radius: 0 !important;
  }

  /* Create Post modal — push content above bottom nav */
  .w-full.h-full.fixed.flex.left-0.top-0.bg-popup {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Create Post modal — make inner editor card full width */
  .w-full.h-full.fixed.flex.left-0.top-0.bg-popup .flex.flex-1 {
    width: 100% !important;
    min-width: 0 !important;
  }
  .w-full.h-full.fixed.flex.left-0.top-0.bg-popup .w-full.h-full.flex-1 {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Bottom action bar in composer — wrap into two rows */
  .select-none.h-\[84px\].py-\[20px\].border-t {
    height: auto !important;
    padding: 8px 10px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
  }

  /* Action bar left group (Add tag, Repeat post) — second row */
  .flex-1.flex.ps-\[20px\].gap-\[8px\] {
    padding-inline-start: 0 !important;
    order: 2 !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }

  /* Action bar right group (Date, Save draft, Post now) — first row, scrollable */
  .pe-\[20px\].flex.items-center.justify-end.gap-\[8px\] {
    padding-inline-end: 0 !important;
    order: 1 !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .pe-\[20px\].flex.items-center.justify-end.gap-\[8px\]::-webkit-scrollbar {
    display: none !important;
  }

  /* Prevent text wrapping inside ALL action bar items (buttons AND divs) */
  .select-none.h-\[84px\].py-\[20px\].border-t button,
  .select-none.h-\[84px\].py-\[20px\].border-t [role="button"],
  .select-none.h-\[84px\].py-\[20px\].border-t button *,
  .select-none.h-\[84px\].py-\[20px\].border-t [role="button"] *,
  .select-none.h-\[84px\].py-\[20px\].border-t > div > div,
  .select-none.h-\[84px\].py-\[20px\].border-t > div > div * {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    flex-shrink: 0 !important;
    min-width: auto !important;
    min-height: 36px !important;
  }

  /* Channel/integration pill list — wrap horizontally */
  .innerComponent.flex-1.flex {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Reduce heavy padding inside editor scroll area */
  .gap-\[32px\].flex.flex-col.pe-\[8px\].pt-\[20px\].ps-\[20px\] {
    padding: 12px 8px !important;
    gap: 16px !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 7 — Analytics page
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Analytics main container — stack chart + sidebar vertically */
  .flex.gap-\[24px\].flex-1:has(canvas) {
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Chart canvas wrapper — full width, fixed reasonable height */
  .flex.flex-col.gap-\[24px\].flex-1:has(canvas) {
    width: 100% !important;
  }

  /* Chart itself — constrain height on mobile */
  canvas {
    max-height: 260px !important;
  }

  /* Analytics stat number blocks — wrap into 2-column grid */
  .flex.gap-\[24px\].flex-1 > .flex.flex-col.gap-\[24px\] {
    width: 100% !important;
  }

  /* Stats header row (title + date picker) — wrap */
  .flex.items-center.justify-between:has(canvas),
  .flex.justify-between.items-center {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Date range or filter inputs — stretch */
  .flex.gap-\[8px\]:has(input[type="date"]),
  .flex.gap-\[8px\]:has(input[type="text"]) {
    flex-wrap: wrap !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 8 — Integrations / Channels (Plugs) page
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Plugs sidebar (w-[260px] collapsible) — hide on mobile, use bottom nav instead */
  .group.sidebar,
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.gap-\[15px\].transition-all.w-\[260px\],
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.gap-\[15px\].transition-all.w-\[100px\] {
    display: none !important;
  }

  /* Plugs content area — full width without sidebar */
  .bg-newBgColorInner.flex-1.flex-col.flex.p-\[20px\].gap-\[12px\] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Integration provider cards grid — 2 cols on mobile */
  .flex.flex-wrap.gap-\[12px\] {
    gap: 8px !important;
  }

  /* Provider/integration cards — ensure min width for 2-col layout */
  .flex.flex-wrap.gap-\[12px\] > * {
    min-width: calc(50% - 8px) !important;
    flex: 1 1 calc(50% - 8px) !important;
  }

  @media (max-width: 400px) {
    .flex.flex-wrap.gap-\[12px\] > * {
      min-width: 100% !important;
      flex: 1 1 100% !important;
    }
  }

  /* Integration card inner content — tighter padding */
  .rounded-\[8px\].p-\[12px\].flex,
  .rounded-\[12px\].p-\[20px\].flex.flex-col {
    padding: 10px !important;
  }

  /* Provider icon + name row in cards */
  .flex.gap-\[8px\].items-center {
    gap: 6px !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 9 — Settings pages
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Settings nav tabs — horizontal scroll */
  [role="tablist"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }
  [role="tablist"]::-webkit-scrollbar { display: none !important; }

  /* Active tab — purple underline indicator */
  [role="tab"][aria-selected="true"],
  [role="tab"][data-active="true"],
  [role="tab"].active {
    border-bottom: 2px solid #7c3aed !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }

  /* Inactive tabs — slightly dimmed */
  [role="tab"] {
    transition: color 0.15s ease, border-color 0.15s ease !important;
    opacity: 0.6;
  }

  /* Fixed-width settings containers — full width */
  .max-w-\[600px\] { max-width: 100% !important; }
  .w-\[600px\]     { width: 100% !important; }
  .w-\[400px\]     { width: 100% !important; }
  .max-w-\[800px\] { max-width: 100% !important; }

  /* Notification toggle rows: keep text left, toggle right */
  .flex.items-center.justify-between > .flex.flex-col:first-child {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  /* Compact toggle switch: slightly smaller on mobile */
  .w-\[57px\].h-\[34px\].rounded-\[100px\] {
    width: 46px !important;
    height: 26px !important;
    padding: 3px !important;
    flex-shrink: 0 !important;
  }

  /* Reduce settings card padding on mobile */
  .bg-sixth.border.rounded-\[4px\].p-\[24px\],
  .bg-sixth.rounded-\[4px\].p-\[24px\] {
    padding: 14px !important;
  }

  /* Settings section form: stack label + control side-by-side rows */
  .flex.justify-between.gap-\[20px\]:has(input),
  .flex.justify-between.gap-\[20px\]:has(select),
  .flex.justify-between.gap-\[20px\]:has(textarea) {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Billing plan cards — vertical stack */
  .flex.flex-row.gap-\[20px\]:has(.rounded-\[16px\]),
  .flex.gap-\[20px\]:has(.rounded-\[16px\]) {
    flex-direction: column !important;
  }

  /* API key rows — break long tokens */
  .font-mono, code, .text-\[12px\].font-mono {
    word-break: break-all !important;
    white-space: pre-wrap !important;
  }

  /* Settings sub-section header rows */
  .flex.justify-between.items-center:has(h3),
  .flex.justify-between.items-center:has(h2) {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 10 — Dropdown & popover overflow prevention
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Mantine select dropdowns — prevent viewport overflow */
  [class*="mantine-Select-dropdown"],
  [class*="mantine-Combobox-dropdown"],
  [class*="mantine-Popover-dropdown"],
  [class*="mantine-DatePicker-dropdown"],
  [class*="mantine-DatePickerInput-dropdown"] {
    max-width: calc(100vw - 24px) !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }

  /* Organisation selector dropdown — clamp to viewport */
  .absolute.bg-newBgColorInner.rounded-\[12px\] {
    max-width: calc(100vw - 24px) !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Mantine menu dropdown */
  [class*="mantine-Menu-dropdown"] {
    max-width: calc(100vw - 24px) !important;
  }

  /* Context menus / absolute panels that might go off right edge */
  .absolute.right-0 {
    right: auto !important;
    left: 0 !important;
  }

  /* Prevent popover arrow overflows */
  [class*="mantine-Popover-arrow"] {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 11 — Notifications / toasts + media library
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Move Mantine toast notifications above bottom nav */
  [class*="mantine-Notifications-root"],
  .mantine-Notifications-root {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    max-width: calc(100vw - 16px) !important;
  }

  /* Individual notification — full width */
  [class*="mantine-Notification-root"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Media library — float-left thumbnail items: make them finger-friendly */
  /* Actual DOM uses float-left, not CSS grid — class: group px-[3px] py-[3px] float-left rounded-[6px] */
  /* w8-max class sets max-width: 16.67% (~67px) — must override */
  .group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    min-width: 140px !important;
  }
  .group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] img,
  .group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Media library upload drop zone — large enough to tap */
  .border-dashed {
    min-height: 120px !important;
    padding: 20px !important;
  }

  /* Media preview modal — full screen */
  [class*="mantine-Modal-content"]:has(video),
  [class*="mantine-Modal-content"]:has(img:not([width="20"])) {
    min-height: 80dvh !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 12 — Filter bars, date pickers, search UI
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Calendar top filter bar — wrap items */
  .flex.gap-\[12px\].items-center:not(#mobile-bottom-nav *) {
    flex-wrap: wrap !important;
  }

  /* Launches / calendar top toolbar — wrap and reduce padding */
  .flex.justify-between.gap-\[10px\] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Search bar — full width */
  input[type="search"],
  input[placeholder*="earch"],
  input[placeholder*="Search"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* View switcher buttons (Day / Week / Month) */
  .flex.gap-\[4px\] > button,
  .flex.gap-\[8px\] > [role="tab"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
  }

  /* Date picker inputs — full width stacking */
  [class*="mantine-DateInput-input"],
  [class*="mantine-DatePickerInput-input"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Filter chips / tag list — horizontal scroll */
  .flex.flex-wrap.gap-\[8px\]:has([role="option"]) {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }

  /* Reduce gap in dense list headers */
  .flex.items-center.gap-\[16px\] {
    gap: 8px !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 13 — General polish & edge cases
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Break long words (URLs, handles, keys) before they overflow */
  p, span, td, li {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Buttons and labels must NOT have word-break (overrides the rule above for nested spans) */
  button, [role="button"], label {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
  }

  /* But allow multi-line button text in modals / action sheets */
  [class*="mantine-Modal-body"] button,
  [class*="mantine-Drawer-body"] button {
    white-space: normal !important;
  }

  /* Truncate long page titles — scoped to Tailwind size classes, not all headings */
  .text-\[24px\], .text-\[20px\], .text-\[18px\] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Loading skeleton — full width */
  [class*="mantine-Skeleton-root"] {
    max-width: 100% !important;
  }

  /* Empty states — center on mobile */
  .flex.flex-col.items-center.justify-center {
    padding: 24px 16px !important;
    text-align: center;
  }

  /* Large heading text (empty-state titles like Plugs page) — scale down */
  .text-\[48px\] {
    font-size: 16px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* Reduce content padding on narrow screens so text has more room */
  .bg-newBgColorInner.p-\[20px\] {
    padding: 12px !important;
  }

  /* Sticky / fixed elements — ensure they don't overlap bottom nav */
  .fixed.bottom-\[20px\],
  .fixed.bottom-\[16px\],
  .fixed.bottom-\[12px\] {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Tables — horizontal scroll wrapper */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap;
  }

  /* Table cells — prevent excessive shrinking */
  th, td {
    min-width: 80px;
    white-space: nowrap;
  }

  /* Reduce very large padding wrappers */
  .p-\[40px\] { padding: 16px !important; }
  .p-\[32px\] { padding: 16px !important; }
  .px-\[40px\] { padding-left: 16px !important; padding-right: 16px !important; }
  .py-\[40px\] { padding-top: 20px !important; padding-bottom: 20px !important; }

  /* Polotno / image editor — hide on mobile with a message */
  .polotno-workspace-container {
    display: none !important;
  }

  /* CopilotKit — ensure it doesn't overflow */
  [class*="copilot"] {
    max-width: calc(100vw - 16px) !important;
  }

  /* Onboarding / welcome dialogs — full screen treatment */
  [class*="mantine-Modal-content"]:has(.text-\[40px\]),
  [class*="mantine-Modal-content"]:has(.text-\[32px\]) {
    min-height: 70dvh !important;
  }

  /* Prevent header overflow from long org names */
  .flex.gap-\[8px\].items-center .text-\[14px\] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* RTL compatibility for bottom nav */
  [dir="rtl"] #mobile-bottom-nav {
    direction: rtl;
  }
}

/* Safe area for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom) !important;
    height: calc(62px + env(safe-area-inset-bottom)) !important;
  }

  @media (max-width: 768px) {
    .flex-1.bg-newBgLineColor {
      padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ------------------------------------------------------------
   COMMIT 14 — Root layout width, header icons, notifications popup
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Root layout: Tailwind min-w-screen = 100vw which on Windows includes
     scrollbar width, making the root wider than the visual viewport.
     Override to prevent the whole app from being wider than the screen. */
  .min-w-screen {
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Also clip the outer padding wrapper */
  .flex.flex-col.min-h-screen.p-\[12px\] {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Header right icon group — prevent it from being crushed by flex-1 title */
  .flex.gap-\[20px\].text-textItemBlur {
    flex-shrink: 0 !important;
    gap: 8px !important;
  }

  /* Header title — allow it to shrink so icons stay visible */
  .text-\[24px\].font-\[600\].flex.flex-1 {
    min-width: 0 !important;
    overflow: hidden !important;
    flex-shrink: 1 !important;
  }

  /* Notifications popup — fit within viewport width */
  .w-\[420px\].min-h-\[200px\].absolute {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    right: 0 !important;
    left: auto !important;
  }

  /* Notifications list items — prevent content overflow */
  .w-\[420px\].min-h-\[200px\].absolute * {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* Calendar column headers — prevent overflow */
  .bg-newTableHeader {
    overflow: hidden !important;
    min-width: 0 !important;
  }

  /* Common action buttons (API key page, etc.) — prevent text wrapping from global word-break rule */
  .cursor-pointer.px-\[16px\].h-\[36px\].bg-btnSimple,
  .cursor-pointer.px-\[16px\].h-\[36px\].bg-btnSimple * {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 16 — Floating Action Button (FAB): Create Post
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* FAB button — injected by mobile.js */
  #mobile-fab {
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    right: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #7c3aed;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.45), 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  #mobile-fab svg {
    width: 26px;
    height: 26px;
    color: #fff;
    flex-shrink: 0;
  }

  #mobile-fab:active {
    transform: scale(0.9);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
  }

  /* Entrance animation */
  #mobile-fab {
    animation: fab-in 0.25s ease both;
  }

  @keyframes fab-in {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
  }

  /* Hide FAB when create-post overlay is open */
  body:has(.w-full.h-full.fixed.flex.left-0.top-0.bg-popup) #mobile-fab,
  body:has([class*="mantine-Modal-root"][data-opened="true"]) #mobile-fab {
    display: none !important;
  }

  /* Hide on auth/login pages */
  body:has([class*="login"]) #mobile-fab,
  body:has([class*="register"]) #mobile-fab {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 19 — Landscape orientation fixes
   Targets phones in landscape (narrow height, wide width)
   ------------------------------------------------------------ */
@media (orientation: landscape) and (max-height: 500px) {
  /* Compact bottom nav — reduce height to save vertical space */
  #mobile-bottom-nav {
    height: 48px !important;
    padding-bottom: 0 !important;
  }

  /* FAB — move to bottom-right, smaller diameter */
  #mobile-fab {
    width: 44px !important;
    height: 44px !important;
    bottom: 56px !important;
    right: 14px !important;
  }

  #mobile-fab svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Header — shrink aggressively in landscape */
  .h-\[80px\].flex.bg-newBgColorInner,
  .h-\[56px\].flex.bg-newBgColorInner {
    height: 44px !important;
    min-height: 44px !important;
  }

  /* Content area — add bottom padding for compact nav */
  .flex-1.bg-newBgLineColor.rounded-\[12px\] {
    padding-bottom: 52px !important;
  }

  /* Outer padding wrapper — smaller top/bottom padding */
  .flex.flex-col.min-h-screen.p-\[12px\] {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Modal sheets — limit height so they don't cover entire screen */
  [class*="mantine-Modal-content"],
  [class*="mantine-Drawer-content"] {
    min-height: 40dvh !important;
    max-height: 85dvh !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 20 — Tablet breakpoint (769px – 1024px)
   iPad mini, Android tablets, small laptops
   ------------------------------------------------------------ */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Shrink the left sidebar icon strip from 80px → 64px */
  .w-\[80px\].flex.flex-col.bg-newBgColorInner.rounded-\[12px\] {
    width: 64px !important;
    min-width: 64px !important;
  }

  /* Sidebar icons — slightly smaller */
  .w-\[80px\].flex.flex-col.bg-newBgColorInner.rounded-\[12px\] svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Header — reduce height slightly */
  .h-\[80px\].flex.bg-newBgColorInner {
    height: 64px !important;
    min-height: 64px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Page title — slightly smaller */
  .text-\[24px\].font-\[600\] {
    font-size: 20px !important;
  }

  /* Calendar grid — allow horizontal scroll on tablets too */
  .grid.\[grid-template-columns\:136px_repeat\(7\,_minmax\(0\,_1fr\)\)\] {
    min-width: 700px !important;
  }

  .grid.grid-cols-7 {
    min-width: 560px !important;
  }

  .flex-1.relative:has(.grid) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Post composer: slightly reduced preview panel on tablet */
  .w-\[580px\].flex.flex-col {
    width: 380px !important;
  }

  /* Settings fixed-width containers — allow slightly wider on tablet */
  .max-w-\[600px\] { max-width: 100% !important; }
  .w-\[600px\]     { width: 100% !important; max-width: 560px !important; }

  /* Content padding — slightly tighter on tablet */
  .p-\[20px\] {
    padding: 14px !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 21 — Calendar post card improvements (mobile)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Post cards inside calendar cells — constrain height, clean truncation */
  .calendar-post-card,
  .fc-event,
  [class*="post-card"],
  .cursor-pointer.rounded-\[4px\].flex,
  .cursor-pointer.rounded-\[6px\].flex,
  .cursor-pointer.rounded-\[8px\].flex {
    max-height: 56px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Post card body text — 2-line clamp */
  .cursor-pointer.rounded-\[4px\].flex p,
  .cursor-pointer.rounded-\[6px\].flex p,
  .cursor-pointer.rounded-\[8px\].flex p,
  [class*="post-card"] p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  /* Time label inside post card */
  .cursor-pointer.rounded-\[4px\].flex .text-\[12px\],
  .cursor-pointer.rounded-\[6px\].flex .text-\[12px\],
  [class*="post-card"] .text-\[12px\] {
    font-size: 10px !important;
  }

  /* Platform/channel icon in card — ensure it renders at a fixed small size */
  .cursor-pointer.rounded-\[4px\].flex img,
  .cursor-pointer.rounded-\[6px\].flex img,
  [class*="post-card"] img {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  /* Calendar cell itself — enough min-height to show a card */
  .bg-newBgColorInner.border.border-newBorder.flex.flex-col {
    min-height: 64px !important;
  }

  /* Prevent post cards from stretching the cell beyond screen */
  .bg-newBgColorInner.border.border-newBorder {
    overflow: hidden !important;
  }

  /* Day-view: give each time slot a visible minimum height */
  .relative.border-b.border-newBorder {
    min-height: 48px !important;
  }

  /* Day-view post cards: full width, no fixed height constraint */
  .absolute.rounded-\[4px\],
  .absolute.rounded-\[6px\] {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 23 — Hide CopilotKit AI chat on mobile
   The OpenAI key is not configured; the widget is non-functional
   and causes repeated API timeouts. Hide it on mobile to reclaim
   screen space and eliminate the broken UX.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* CopilotKit chat panel — class confirmed from source: "trz agent ..." */
  .trz.agent,
  [class*="copilotKit"],
  [class*="copilot-kit"],
  .copilotKitMessages,
  .copilotKitMessage {
    display: none !important;
  }

  /* If the agent panel pushes other content, restore layout */
  .flex.flex-1:has(.trz.agent) {
    flex-direction: column !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 25 — Fix overflow-hidden clipping on main content area
   The main wrapper has overflow:hidden which clips content on
   mobile. Allow the inner scroll container to scroll properly.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Main app wrapper — allow overflow so bottom-padding clearance works */
  .flex.flex-col.min-h-screen.min-w-screen.text-newTextColor.p-\[12px\] {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Main content column (right of sidebar) */
  .flex-1.bg-newBgLineColor.rounded-\[12px\].overflow-hidden {
    overflow: visible !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Inner flex row that contains the page panels */
  .flex.flex-1.gap-\[1px\] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Ensure the outer padding wrapper doesn't clip either */
  .flex-1.bg-newBgLineColor {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 26 — Calendar toolbar: compact date nav on mobile
   Source: filters.tsx container "flex flex-col md:flex-row gap-[8px]"
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Date display in nav row — remove 200px minimum width */
  .min-w-\[200px\].text-center {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    font-size: 13px !important;
  }

  /* Nav arrow buttons — slightly smaller tap area on mobile */
  .border.h-\[42px\].border-newTableBorder {
    height: 36px !important;
  }

  /* View switcher individual buttons — shrink from 74px to fit 3 on screen */
  .pt-\[6px\].pb-\[5px\].cursor-pointer.w-\[74px\].text-center.rounded-\[6px\] {
    width: 56px !important;
    font-size: 12px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* View switcher container — tighter padding */
  .flex.flex-row.p-\[4px\].border.border-newTableBorder.rounded-\[8px\] {
    padding: 3px !important;
  }

  /* List/Calendar icon toggle buttons — shrink */
  .pt-\[6px\].pb-\[5px\].cursor-pointer.flex.justify-center.items-center.w-\[34px\] {
    width: 28px !important;
    padding: 4px !important;
  }

  /* Whole filter row — less vertical gap when stacked */
  .flex.flex-col.gap-\[8px\].items-center.select-none {
    gap: 6px !important;
    padding: 8px !important;
  }

  /* Calendar page content area — give back some vertical space */
  .flex.flex-col.gap-\[8px\].items-center.select-none + * {
    flex: 1 !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 27 — Login / auth page mobile polish
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Auth page outer wrapper — full height, proper padding */
  .flex.h-screen.flex-1.overflow-hidden {
    flex-direction: column !important;
    overflow-y: auto !important;
    height: 100dvh !important;
  }

  /* Auth left panel (testimonial/logo side) — hide on very small screens */
  @media (max-width: 500px) {
    .hidden.lg\:flex,
    .lg\:flex.flex-col.bg-\[url\(\/auth\/background\.png\)\] {
      display: none !important;
    }
  }

  /* Auth right panel (login form) — full width */
  .lg\:w-\[600px\].flex.flex-col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 20px !important;
  }

  /* Auth form — center content */
  .flex.flex-col.gap-\[16px\],
  .flex.flex-col.gap-\[20px\] {
    gap: 14px !important;
  }

  /* "Don't have an account?" links — larger tap targets */
  .text-\[14px\].text-center a {
    display: inline-block;
    padding: 4px 8px;
  }

  /* Social login buttons — proper width on mobile */
  .flex.gap-\[12px\] > button,
  .flex.gap-\[12px\] > a {
    flex: 1 !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 28 — Channel picker pills: horizontal scroll in composer
   10 channels need to scroll, not wrap onto multiple rows
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Channel/integration pills in post composer — single scrollable row */
  .innerComponent.flex-1.flex,
  [class*="innerComponent"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
    scrollbar-width: none !important;
  }
  [class*="innerComponent"]::-webkit-scrollbar { display: none !important; }

  /* Each channel pill — fixed min-width so they don't squish */
  [class*="innerComponent"] > * {
    flex-shrink: 0 !important;
    min-width: 40px !important;
  }

  /* Channel avatar images in the pill — consistent size */
  [class*="innerComponent"] img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  /* Channel selection area in plugs/integrations — grid of 2 cols */
  .flex.gap-\[12px\].flex-wrap:not([class*="innerComponent"]) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .flex.gap-\[12px\].flex-wrap:not([class*="innerComponent"]) > * {
    min-width: 0 !important;
    flex: none !important;
    width: 100% !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 29 — Fix media library thumbnails
   Media uses float-left layout (not CSS grid). Old grid-cols rules
   inside commit 11 were dead code. New rules target actual DOM class.
   Also adds landscape, tablet, and calendar card polish.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   COMMIT 32 — Landscape orientation handling
   ------------------------------------------------------------ */
@media (orientation: landscape) and (max-height: 500px) {
  /* Compact bottom nav in landscape — save vertical space */
  #mobile-bottom-nav {
    height: 48px !important;
    padding-bottom: 4px !important;
  }
  #mobile-bottom-nav a {
    font-size: 9px !important;
    gap: 2px !important;
  }
  #mobile-bottom-nav svg {
    width: 18px !important;
    height: 18px !important;
  }
  /* FAB — smaller in landscape */
  #mobile-fab {
    bottom: 56px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }
  /* Compact header */
  .h-\[50px\], .h-\[56px\] {
    height: 40px !important;
    min-height: 40px !important;
  }
  /* Hide left sidebar in landscape (bottom nav covers navigation) */
  #left-menu {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 33 — Tablet breakpoint (769px–1024px)
   ------------------------------------------------------------ */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Show left sidebar but make it more compact */
  #left-menu {
    display: flex !important;
    width: 60px !important;
    min-width: 60px !important;
  }
  /* Sidebar icon labels — hide text, show icons only */
  #left-menu span:not([class*="icon"]) {
    display: none !important;
  }
  /* Main content area — allow more space */
  .flex-1.bg-newBgLineColor,
  .flex-1.overflow-hidden {
    padding: 6px !important;
  }
  /* Header — reduce horizontal padding */
  header, [class*="header"], .h-\[50px\].flex {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* Calendar — horizontal scroll (same as mobile) */
  .flex.flex-col.flex-1.overflow-hidden {
    overflow-x: auto !important;
  }
  /* Settings — tighten two-panel layout */
  .flex.flex-1.gap-\[1px\] {
    gap: 0 !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 34 — Calendar post card polish
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Calendar cell post cards — readable at 375px */
  .cursor-pointer.relative.rounded-\[4px\].flex.flex-col {
    max-height: 56px !important;
    overflow: hidden !important;
  }
  /* Post title in card — 2-line clamp */
  .cursor-pointer.relative.rounded-\[4px\].flex.flex-col .text-\[12px\],
  .cursor-pointer.relative.rounded-\[4px\].flex.flex-col .text-\[11px\] {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  /* Time label in card */
  .cursor-pointer.relative.rounded-\[4px\].flex.flex-col .text-\[10px\] {
    font-size: 10px !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 35 — Calendar toolbar: compact 2-row layout on mobile
   The container uses flex-col (3 rows) on mobile, flex-row on md+.
   On mobile: make it flex-row flex-wrap so Day/Week/Month and
   the Calendar/List icon toggle share the second row instead of
   each taking its own row — saves ~50px of vertical space.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Toolbar container: switch to row-wrap */
  .text-textColor.flex.flex-col.items-center.select-none {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  /* First child (date nav: arrows + date + Today) — take full width */
  .text-textColor.flex.flex-col.items-center.select-none > *:first-child {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
  }
  /* Subsequent children (Day/Week/Month and icons) — side-by-side */
  .text-textColor.flex.flex-col.items-center.select-none > *:not(:first-child) {
    flex-shrink: 0 !important;
  }
}

/* ============================================================
   REDESIGN SERIES — Commits 37–42
   Comprehensive light-mode mobile polish
   ============================================================ */

/* ------------------------------------------------------------
   COMMIT 37 — App shell: light-mode bottom nav + header polish
   Previous nav used dark rgba(26,25,25,0.92) which clashes with
   the app's light-mode design. Switch to white with standard
   iOS/Material bottom tab bar aesthetics.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* ── Bottom nav: white, clean light-mode ── */
  #mobile-bottom-nav {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
    height: 58px !important;
  }

  /* Inactive tab: medium gray */
  #mobile-bottom-nav a,
  #mobile-bottom-nav button {
    color: #9ca3af !important;
    opacity: 1 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
    transition: color 0.18s ease, transform 0.15s ease !important;
  }

  #mobile-bottom-nav a:hover,
  #mobile-bottom-nav button:hover {
    color: #7c3aed !important;
    opacity: 1 !important;
  }

  /* Active tab: purple text + purple indicator */
  #mobile-bottom-nav a.active,
  #mobile-bottom-nav button.active {
    color: #7c3aed !important;
    font-weight: 600 !important;
    opacity: 1 !important;
  }

  #mobile-bottom-nav a.active::before,
  #mobile-bottom-nav button.active::before {
    background: #7c3aed !important;
    width: 24px !important;
    height: 2.5px !important;
  }

  /* Active icon stays same scale — don't inflate */
  #mobile-bottom-nav a.active svg,
  #mobile-bottom-nav button.active svg {
    transform: none !important;
  }

  /* SVG stroke-based icons inherit color properly */
  #mobile-bottom-nav svg {
    color: inherit !important;
    stroke: currentColor !important;
    width: 22px !important;
    height: 22px !important;
  }

  /* ── Header: visible border on light bg ── */
  .h-\[80px\].flex.bg-newBgColorInner,
  header.flex.bg-newBgColorInner,
  .flex.h-\[56px\].bg-newBgColorInner {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
  }

  /* Override the earlier white/transparent border-bottom set in commit 3 */
  .h-\[80px\].flex.bg-newBgColorInner {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  }

  /* ── FAB: ensure it clears the new nav height ── */
  #mobile-fab {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Landscape: keep nav visible but thinner */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  #mobile-bottom-nav {
    height: 46px !important;
    background: #ffffff !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 38 — Calendar post cards: readability + spacing
   Cards in day-view cells are often too small to read.
   Add padding, clamp title to 2 lines, show channel icon.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Post card in calendar cell */
  .cursor-pointer.relative.rounded-\[4px\].flex.flex-col {
    padding: 5px 6px !important;
    gap: 3px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    min-height: 44px !important;
  }

  /* Title: 2-line clamp */
  .cursor-pointer.relative.rounded-\[4px\].flex.flex-col > div:first-child,
  .cursor-pointer.relative.rounded-\[4px\].flex.flex-col .line-clamp-2,
  .cursor-pointer.relative.rounded-\[4px\].flex.flex-col .truncate {
    font-size: 11px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  /* Time label */
  .cursor-pointer.relative.rounded-\[4px\].flex.flex-col .text-\[10px\] {
    font-size: 10px !important;
    opacity: 0.75 !important;
    line-height: 1.2 !important;
  }

  /* Day-view column: ensure cells don't overflow */
  [class*="day-view"] .flex.flex-col,
  .flex.flex-col[class*="day"] {
    overflow: visible !important;
  }

  /* Calendar grid container — prevent horizontal overflow */
  .overflow-y-auto.flex {
    overflow-x: hidden !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 39 — Media library: true 2-column responsive grid
   The float-left items (commit 29) use 140px fixed width.
   Override to use percentage-based 2-column layout.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Container: clear floats, switch to flex-wrap grid */
  .p-\[10px\].flex.flex-wrap,
  div[class*="float-left"]:first-child,
  .p-\[10px\] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  /* Each media item — 2 columns with gap */
  .group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] {
    width: calc(50% - 0px) !important;
    max-width: 50% !important;
    min-width: 0 !important;
    height: auto !important;
    float: none !important;
    box-sizing: border-box !important;
    padding: 3px !important;
  }

  /* Inner image/video — fill the cell */
  .group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] img,
  .group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] video,
  .group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] > div {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 100% !important; /* square aspect ratio */
    position: relative !important;
    overflow: hidden !important;
    border-radius: 6px !important;
  }

  .group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] img {
    height: auto !important;
    padding-bottom: 0 !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }

  /* Search bar on media page — full width, proper height */
  .flex.gap-\[10px\].items-center.p-\[10px\] input[type="text"],
  .flex.gap-\[10px\].items-center.p-\[10px\] input[type="search"] {
    flex: 1 !important;
    min-width: 0 !important;
    height: 40px !important;
    font-size: 14px !important;
  }

  /* Upload / Add button on media page */
  .flex.gap-\[10px\].items-center.p-\[10px\] button,
  .flex.gap-\[10px\].items-center.p-\[10px\] [role="button"] {
    flex-shrink: 0 !important;
    height: 40px !important;
    min-width: 44px !important;
    white-space: nowrap !important;
  }

  /* Toolbar / filter row above media grid */
  .flex.items-center.justify-between.p-\[10px\] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 40 — Create Post: compact channel selector + composer
   Channel grid currently 2-column large circles taking ~350px.
   Redesign to single horizontal-scroll row of smaller circles.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* ── Channel selector: single horizontal scroll row ── */

  /* The grid container holding channel circles (inside modals only) */
  /* Scoped to .fixed parent to avoid breaking Analytics stat card grids */
  .fixed .grid.grid-cols-2.gap-\[8px\],
  .fixed .grid.grid-cols-3.gap-\[8px\],
  .fixed .grid.grid-cols-2.gap-\[10px\],
  .fixed .grid.grid-cols-3.gap-\[10px\] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px !important;
    padding: 8px 12px 10px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  /* Channel item container */
  .flex.flex-col.items-center.cursor-pointer.gap-\[4px\],
  .flex.flex-col.items-center.cursor-pointer.gap-\[6px\] {
    flex-shrink: 0 !important;
    width: 64px !important;
    min-width: 64px !important;
  }

  /* Channel circle avatar */
  .flex.flex-col.items-center.cursor-pointer.gap-\[4px\] > div:first-child,
  .flex.flex-col.items-center.cursor-pointer.gap-\[6px\] > div:first-child,
  .rounded-full.w-\[64px\].h-\[64px\],
  .rounded-full.w-\[56px\].h-\[56px\],
  .rounded-full.w-\[50px\].h-\[50px\] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
  }

  /* Channel name label below circle */
  .flex.flex-col.items-center.cursor-pointer.gap-\[4px\] span,
  .flex.flex-col.items-center.cursor-pointer.gap-\[6px\] span,
  .flex.flex-col.items-center.cursor-pointer .text-\[12px\],
  .flex.flex-col.items-center.cursor-pointer .text-\[11px\] {
    font-size: 10px !important;
    max-width: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* ── Composer area: expand editor ── */
  /* Text editor takes available height */
  .w-full.flex-1.min-h-\[200px\],
  .flex-1.min-h-\[200px\],
  .flex-1.min-h-\[150px\] {
    min-height: 140px !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
  }

  /* ── Bottom action bar: sticky, clean ── */
  /* The row with char count + Post button */
  .flex.items-center.justify-between.gap-\[10px\].p-\[10px\],
  .flex.items-center.justify-between.px-\[10px\].py-\[8px\] {
    position: sticky !important;
    bottom: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    z-index: 10 !important;
    padding: 10px 14px !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06) !important;
  }

  /* Post / Schedule button — min touch target */
  .flex.items-center.justify-between.gap-\[10px\].p-\[10px\] button[class*="bg-"],
  .flex.items-center.justify-between.px-\[10px\].py-\[8px\] button[class*="bg-"] {
    min-height: 40px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 41 — Settings: card layout, toggle alignment, forms
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* ── Settings cards: proper spacing ── */
  /* Top-level setting sections */
  .flex.flex-col.gap-\[20px\] > div,
  .flex.flex-col.gap-\[24px\] > div,
  .flex.flex-col.gap-\[16px\] > div {
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  /* Setting row: label + control side-by-side or stacked */
  .flex.items-center.justify-between.p-\[20px\],
  .flex.items-center.justify-between.px-\[20px\].py-\[14px\],
  .flex.items-center.justify-between.px-\[16px\].py-\[12px\] {
    gap: 12px !important;
    padding: 14px 16px !important;
    flex-wrap: wrap !important;
  }

  /* Label / description side — don't shrink text too much */
  .flex.items-center.justify-between > div:first-child,
  .flex.items-center.justify-between > span:first-child {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 14px !important;
  }

  /* Toggle / select — don't stretch */
  .flex.items-center.justify-between > div:last-child,
  .flex.items-center.justify-between > button:last-child,
  .flex.items-center.justify-between > select:last-child {
    flex-shrink: 0 !important;
  }

  /* Form inputs in settings: full width */
  .flex.flex-col.gap-\[6px\] input,
  .flex.flex-col.gap-\[8px\] input,
  .flex.flex-col.gap-\[6px\] textarea,
  .flex.flex-col.gap-\[8px\] textarea {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  /* Selects in settings: auto width, not full */
  .flex.items-center.justify-between select {
    width: auto !important;
    max-width: 160px !important;
    min-height: 36px !important;
    font-size: 13px !important;
  }

  /* Analytics time-range select specifically */
  select.w-full,
  select[class*="w-full"] {
    width: auto !important;
    max-width: 160px !important;
  }

  /* Settings sub-nav tabs: horizontal scroll */
  .flex.gap-\[4px\].border-b,
  .flex.gap-\[8px\].border-b,
  nav.flex.gap-\[4px\] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .flex.gap-\[4px\].border-b > *,
  .flex.gap-\[8px\].border-b > *,
  nav.flex.gap-\[4px\] > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 42 — Global polish: typography, touch targets,
   micro-animations, consistent spacing, 320px support
   ------------------------------------------------------------ */

/* ── Consistent touch target minimum ── */
@media (max-width: 768px) {
  button, [role="button"], a {
    min-height: 36px !important;
  }

  /* But allow small inline chips / badges to stay small */
  .text-\[10px\], .text-\[11px\], .text-\[12px\] {
    min-height: unset !important;
  }

  /* ── Typography: consistent scale ── */
  /* Page headings */
  h1, .text-\[28px\], .text-\[30px\], .text-\[32px\] {
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: -0.4px !important;
  }

  h2, .text-\[20px\], .text-\[22px\], .text-\[24px\] {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  /* Body text: readable at 375px */
  p, .text-\[14px\], .text-\[15px\], .text-\[16px\] {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* ── Smooth transitions on interactive elements ── */
  button, a, [role="button"], input, select, textarea {
    transition-property: color, background-color, border-color, box-shadow, transform, opacity !important;
    transition-duration: 0.15s !important;
    transition-timing-function: ease !important;
  }

  /* ── Prevent text size adjustment on iOS ── */
  * {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  /* ── 320px (iPhone SE) support ── */
  @media (max-width: 320px) {
    .text-\[24px\].font-\[600\] {
      font-size: 16px !important;
    }
    #mobile-bottom-nav a, #mobile-bottom-nav button {
      font-size: 9px !important;
    }
    #mobile-bottom-nav svg {
      width: 19px !important;
      height: 19px !important;
    }
  }

  /* ── Prevent horizontal scrollbar on body ── */
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ── Modal / sheet backdrops: proper z-index ── */
  [class*="mantine-Overlay"],
  .fixed.inset-0.bg-black\/50,
  .fixed.inset-0.bg-black\/40 {
    z-index: 1001 !important;
  }

  [class*="mantine-Modal-content"],
  [class*="mantine-Drawer-content"] {
    z-index: 1002 !important;
  }

  /* ── Better scrollbar hiding globally ── */
  .overflow-x-auto, .overflow-y-auto {
    scrollbar-width: none !important;
  }
  .overflow-x-auto::-webkit-scrollbar,
  .overflow-y-auto::-webkit-scrollbar {
    display: none !important;
  }

  /* ── Card / panel radius consistency ── */
  .rounded-\[8px\], .rounded-\[10px\], .rounded-\[12px\] {
    border-radius: 10px !important;
  }

  /* ── Focus rings: visible on mobile (accessibility) ── */
  button:focus-visible, a:focus-visible, input:focus-visible {
    outline: 2px solid #7c3aed !important;
    outline-offset: 2px !important;
  }

  /* ── Loading states: spinner centering ── */
  .flex.items-center.justify-center.h-full {
    min-height: 120px !important;
  }

  /* ── Notification badge on nav icons ── */
  #mobile-bottom-nav .badge,
  #mobile-bottom-nav [class*="badge"] {
    position: absolute !important;
    top: 4px !important;
    right: calc(50% - 18px) !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #ef4444 !important;
    border: 1.5px solid #ffffff !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 43 — Settings sidebar: full-width vertical nav on mobile
   The settings uses a 2-panel layout (sidebar + content).
   On mobile, make the sidebar collapse to a horizontal pill row.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Settings layout: stack vertically */
  .flex-1.flex.gap-\[8px\],
  .flex.flex-1.gap-\[8px\] {
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Settings left sidebar panel: horizontal scrolling pill nav */
  .w-\[200px\].min-w-\[200px\],
  .w-\[220px\].min-w-\[220px\],
  .min-w-\[200px\],
  .min-w-\[220px\] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    display: flex !important;
    height: auto !important;
    min-height: auto !important;
    flex-shrink: 0 !important;
  }

  /* Each settings nav item — compact pill */
  .w-\[200px\].min-w-\[200px\] > *,
  .w-\[220px\].min-w-\[220px\] > *,
  .min-w-\[200px\] > *,
  .min-w-\[220px\] > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Settings content area: full width */
  .flex-1.flex.gap-\[8px\] > *:last-child,
  .flex.flex-1.gap-\[8px\] > *:last-child {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 44 — FAB visibility: hide on non-creation pages
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Hide FAB on analytics, settings, channels/plugs pages */
  body[data-page*="analytics"] #mobile-fab,
  body[data-page*="settings"] #mobile-fab,
  body[data-page*="plugs"] #mobile-fab {
    display: none !important;
  }

  /* Additional CSS-based hide using URL — covered by JS but belt-and-suspenders */
  /* FAB is already hidden by JS for /analytics, /settings, /agents routes */
}

/* ------------------------------------------------------------
   COMMIT 45 — Header: tighten title + reduce excess padding
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Page-level title row (the "Analytics", "Settings" etc headings) */
  .text-\[24px\].font-\[600\],
  .text-\[24px\].font-\[700\],
  h1.text-\[24px\] {
    font-size: 20px !important;
    letter-spacing: -0.3px !important;
    line-height: 1.2 !important;
  }

  /* Inner page container: reduce side padding so content fills viewport */
  .flex-1.flex.flex-col.p-\[20px\],
  .flex-1.flex.flex-col.p-\[24px\],
  .flex-1.overflow-y-auto.p-\[20px\],
  .flex-1.overflow-y-auto.p-\[24px\] {
    padding: 14px 12px !important;
  }

  /* Less padding for inner cards too */
  .bg-third.rounded-\[12px\].p-\[20px\],
  .bg-third.rounded-\[12px\].p-\[24px\],
  .rounded-\[12px\].p-\[20px\],
  .rounded-\[12px\].p-\[24px\] {
    padding: 14px 14px !important;
    border-radius: 10px !important;
  }

  /* Analytics stat cards: wrap to 2 columns */
  .grid.grid-cols-4,
  .grid.grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Analytics recharts chart: full width, constrained height */
  .recharts-wrapper,
  .recharts-surface {
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 46 — Settings sidebar: correct selectors (verified DOM)
   Sidebar: bg-newBgColorInner p-[20px] flex flex-col transition-all w-[260px]
   Container: (second) flex flex-1 gap-[1px]
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Convert the two-panel row into a column stack */
  /* :not(.items-center) excludes empty-state containers (Plugs, Analytics) */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all:not(.items-center) {
    /* This matches the sidebar (has transition-all) — make it horizontal pills */
    flex-direction: row !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 10px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
  }

  /* Each nav item inside settings sidebar */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all:not(.items-center) > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    min-height: 32px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: auto !important;
    justify-content: center !important;
  }

  /* The parent container: force column direction */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all:not(.items-center) ~ .bg-newBgColorInner.flex-1.flex-col.flex {
    width: 100% !important;
  }

  /* Make the two-panel container a column */
  .flex.flex-1.gap-\[1px\]:has(.bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all:not(.items-center)) {
    flex-direction: column !important;
  }
}

/* ------------------------------------------------------------
   COMMIT 47 — Create Post: fix channel selector to horizontal scroll
   Actual DOM: container is flex flex-wrap gap-[12px] flex-1
   Each circle: cursor-pointer border-[2px] relative rounded-full
   Override to single horizontal scrolling row.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Channel picker container: single row horizontal scroll */
  .flex.flex-wrap.gap-\[12px\].flex-1 {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px 4px 8px !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .flex.flex-wrap.gap-\[12px\].flex-1::-webkit-scrollbar {
    display: none !important;
  }

  /* Each channel circle: no shrink */
  .flex.flex-wrap.gap-\[12px\].flex-1 > * {
    flex-shrink: 0 !important;
  }

  /* Outer row containing label + channel circles */
  .flex.gap-\[8px\].items-center {
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  /* ── Post composer text area: better height ── */
  /* The post text editor in Create Post modal */
  .flex-1.min-h-\[200px\].max-h-\[40vh\],
  .flex-1.min-h-\[150px\].max-h-\[40vh\],
  [contenteditable="true"][class*="min-h"],
  .ProseMirror,
  [class*="ql-editor"],
  [class*="editor"] {
    min-height: 120px !important;
    max-height: 35vh !important;
    overflow-y: auto !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* Post Preview section — compact height */
  .max-h-\[40vh\], .max-h-\[50vh\] {
    max-height: 35vh !important;
  }
}

/* ============================================================
   FLUID RESPONSIVE SYSTEM — Commit 48
   Replaces all hard-coded pixel rules with a content-driven,
   fluid layout system. Works at any screen width, not just
   specific device presets.

   Principles:
   - clamp() for all sizing (typography, spacing, components)
   - CSS Grid auto-fill/minmax for responsive grids
   - min-width: 0 everywhere flex children could overflow
   - No device-specific pixel rules
   - Mobile-first foundations, desktop stays clean
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   1. DESIGN TOKENS  (custom properties — override px constants)
   ────────────────────────────────────────────────────────────── */
:root {
  /* Fluid spacing — scales between small phone and wide desktop */
  --sp-2xs : clamp(2px,  0.5vw, 4px);
  --sp-xs  : clamp(4px,  1vw,   8px);
  --sp-sm  : clamp(6px,  1.5vw, 12px);
  --sp-md  : clamp(10px, 2.5vw, 18px);
  --sp-lg  : clamp(14px, 3.5vw, 24px);
  --sp-xl  : clamp(18px, 4.5vw, 32px);

  /* Fluid typography */
  --fs-2xs : clamp(9px,  2.2vw, 11px);
  --fs-xs  : clamp(10px, 2.5vw, 13px);
  --fs-sm  : clamp(12px, 3vw,   15px);
  --fs-base: clamp(13px, 3.3vw, 16px);
  --fs-lg  : clamp(15px, 4vw,   20px);
  --fs-xl  : clamp(18px, 5vw,   26px);
  --fs-2xl : clamp(20px, 6vw,   32px);

  /* UI component sizing */
  --nav-height    : clamp(52px, 9vw, 68px);
  --header-height : clamp(50px, 8.5vw, 68px);
  --touch-min     : clamp(40px, 10vw, 52px);
  --fab-size      : clamp(48px, 12.5vw, 60px);
  --icon-nav      : clamp(18px, 4.8vw, 24px);
  --radius-sm     : clamp(4px,  1.2vw, 8px);
  --radius-md     : clamp(8px,  2vw,   14px);
  --radius-lg     : clamp(10px, 2.8vw, 20px);

  /* Content padding — shrinks on narrow, expands on wide */
  --content-px    : clamp(8px, 3vw, 20px);
}

/* ──────────────────────────────────────────────────────────────
   2. GLOBAL OVERFLOW & BOX-SIZING GUARD
   Prevents accidental horizontal scroll at every width.
   ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
  min-width: 0;
}

/* All media & embeds are capped at container width */
img, video, svg, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Flex children that could cause overflow */
[class*="flex"] > * {
  min-width: 0;
}

/* ──────────────────────────────────────────────────────────────
   3. FLUID BOTTOM NAV  (replaces hard-coded 58px / 62px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #mobile-bottom-nav {
    height: var(--nav-height) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--sp-xs)) !important;
  }

  #mobile-bottom-nav a,
  #mobile-bottom-nav button {
    font-size: var(--fs-2xs) !important;
    gap: var(--sp-2xs) !important;
    min-height: var(--touch-min) !important;
  }

  #mobile-bottom-nav svg {
    width: var(--icon-nav) !important;
    height: var(--icon-nav) !important;
  }

  /* Content area bottom padding adjusts to nav height */
  .flex-1.bg-newBgLineColor.rounded-\[12px\] {
    padding-bottom: calc(var(--nav-height) + var(--sp-sm) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   4. FLUID FAB
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #mobile-fab {
    width:  var(--fab-size) !important;
    height: var(--fab-size) !important;
    bottom: calc(var(--nav-height) + var(--sp-md) + env(safe-area-inset-bottom, 0px)) !important;
    right: var(--sp-lg) !important;
  }

  #mobile-fab svg {
    width:  calc(var(--fab-size) * 0.46) !important;
    height: calc(var(--fab-size) * 0.46) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   5. FLUID HEADER
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Header bar height */
  .h-\[80px\].flex.bg-newBgColorInner,
  header.flex.bg-newBgColorInner {
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    padding-left: var(--content-px) !important;
    padding-right: var(--content-px) !important;
  }

  /* Page title — fluid size */
  .text-\[24px\].font-\[600\],
  .text-\[24px\].font-\[700\] {
    font-size: var(--fs-xl) !important;
    letter-spacing: -0.02em !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   6. FLUID TYPOGRAPHY  (all breakpoints, not just mobile)
   ────────────────────────────────────────────────────────────── */

/* Headings */
h1 { font-size: var(--fs-2xl) !important; }
h2 { font-size: var(--fs-xl)  !important; }
h3 { font-size: var(--fs-lg)  !important; }

/* Body text clamp — readable at 320px, not too big at 1400px */
@media (max-width: 900px) {
  p, li, td, th, label, span:not([class*="text-["]) {
    font-size: var(--fs-base) !important;
    line-height: 1.55 !important;
  }

  /* Small labels and timestamps */
  .text-\[12px\], .text-\[11px\], .text-\[10px\] {
    font-size: var(--fs-xs) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   7. FLUID MEDIA LIBRARY GRID
   Uses CSS Grid auto-fill so it works at every width:
   - 320px  → 2 columns (~140px each)
   - 480px  → 3 columns
   - 768px  → 4 columns
   - 1024px → 5-6 columns
   No breakpoints needed — layout adapts to container width.
   ────────────────────────────────────────────────────────────── */

/* Wrapper: switch to CSS Grid */
.p-\[10px\].flex.flex-wrap {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(130px, 44%), 1fr)) !important;
  gap: clamp(3px, 1.2vw, 8px) !important;
  padding: clamp(4px, 1.5vw, 10px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Each media item fills its grid cell */
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  float: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Inner image/thumb — square aspect, fills cell */
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] img,
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] video {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: var(--radius-sm) !important;
  display: block !important;
}

/* ──────────────────────────────────────────────────────────────
   8. FLUID CONTENT PADDING  (inner page containers)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Main page inner padding */
  .flex-1.flex.flex-col.p-\[20px\],
  .flex-1.flex.flex-col.p-\[24px\],
  .flex-1.overflow-y-auto.p-\[20px\],
  .flex-1.overflow-y-auto.p-\[24px\] {
    padding: var(--sp-md) var(--content-px) !important;
  }

  /* Cards */
  .bg-third.rounded-\[12px\].p-\[20px\],
  .rounded-\[12px\].p-\[20px\],
  .rounded-\[12px\].p-\[24px\] {
    padding: var(--sp-md) !important;
    border-radius: var(--radius-md) !important;
  }

  /* Settings sidebar nav items */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all:not(.items-center) > * {
    padding: var(--sp-xs) var(--sp-md) !important;
    border-radius: var(--radius-lg) !important;
    font-size: var(--fs-sm) !important;
    min-height: var(--touch-min) !important;
    height: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   9. FLUID ANALYTICS GRID
   Stats cards: auto-fill, min 140px per card, no breakpoint needed
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Recharts container: max-width prevents overflow */
  .recharts-responsive-container,
  .recharts-wrapper {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Stat card grids */
  .grid.grid-cols-4,
  .grid.grid-cols-3 {
    grid-template-columns: repeat(auto-fill, minmax(min(140px, 45%), 1fr)) !important;
    gap: var(--sp-sm) !important;
  }

  /* Time range select: never full width */
  select.w-full,
  select[class*="w-full"] {
    width: auto !important;
    max-width: min(180px, 50%) !important;
    font-size: var(--fs-sm) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   10. FLUID CALENDAR TOOLBAR
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Toolbar: let it wrap naturally, don't force fixed widths */
  .text-textColor.flex.flex-col.items-center.select-none {
    gap: var(--sp-xs) !important;
    padding: var(--sp-xs) 0 !important;
  }

  /* Date navigation buttons */
  .text-textColor.flex.flex-col.items-center.select-none button,
  .text-textColor.flex.flex-col.items-center.select-none [role="button"] {
    min-height: var(--touch-min) !important;
    padding: var(--sp-xs) var(--sp-sm) !important;
    font-size: var(--fs-sm) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   11. PREVENT HORIZONTAL OVERFLOW — aggressive guard
   Applied at ALL widths to prevent any element causing scroll.
   ────────────────────────────────────────────────────────────── */

/* Tables can overflow — add horizontal scroll container */
table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* Long unbreakable text */
[class*="text-"] {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Fixed-width Tailwind classes that can overflow container */
@media (max-width: 480px) {
  /* Very narrow: clamp the fixed widths Tailwind sets */
  [class*="w-[300px]"], [class*="w-[320px]"], [class*="w-[350px]"],
  [class*="w-[400px]"], [class*="w-[450px]"], [class*="w-[500px]"],
  [class*="w-[600px]"], [class*="w-[700px]"], [class*="w-[800px]"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  [class*="min-w-[200px]"], [class*="min-w-[250px]"], [class*="min-w-[300px]"] {
    min-width: 0 !important;
  }
}

/* Modals / sheets: never wider than viewport */
[class*="mantine-Modal-content"],
[class*="mantine-Drawer-content"],
.w-\[580px\].flex.flex-col {
  max-width: min(580px, 100vw) !important;
  width: 100% !important;
}

/* ──────────────────────────────────────────────────────────────
   12. FLUID FORM CONTROLS  (scales across all widths)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Inputs and textareas: full container width, fluid height */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  textarea {
    width: 100% !important;
    min-height: var(--touch-min) !important;
    font-size: var(--fs-base) !important;
    padding: var(--sp-xs) var(--sp-sm) !important;
    border-radius: var(--radius-sm) !important;
  }

  /* Buttons: fluid touch targets */
  button,
  [role="button"] {
    min-height: var(--touch-min) !important;
    font-size: var(--fs-sm) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   13. TABLET (600–1024px) — fluid sidebar, not hidden
   At tablet widths keep the sidebar but let it be fluid.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 1024px) {
  /* Sidebar: shrink but remain visible */
  #left-menu,
  .w-\[80px\].flex.flex-col.bg-newBgColorInner.rounded-\[12px\] {
    display: flex !important;
    width: clamp(60px, 8vw, 80px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Hide bottom nav at tablet — sidebar takes over */
  #mobile-bottom-nav {
    display: none !important;
  }

  #mobile-fab {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   14. SAFE LANDSCAPE  (short viewports at any width)
   ────────────────────────────────────────────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {
  #mobile-bottom-nav {
    height: clamp(40px, 8vh, 52px) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 2px) !important;
  }

  #mobile-bottom-nav a,
  #mobile-bottom-nav button {
    font-size: clamp(8px, 2vw, 10px) !important;
  }

  #mobile-fab {
    width:  clamp(40px, 9vw, 48px) !important;
    height: clamp(40px, 9vw, 48px) !important;
    bottom: calc(clamp(40px, 8vh, 52px) + 8px) !important;
  }

  /* Reclaim vertical space */
  .h-\[80px\].flex.bg-newBgColorInner {
    height: clamp(38px, 7vh, 48px) !important;
    min-height: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   15. DESKTOP STABILITY  (≥ 1025px)
   Ensure our mobile rules don't leak into desktop view.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  /* Mobile nav should never show on desktop */
  #mobile-bottom-nav,
  #mobile-fab {
    display: none !important;
  }

  /* Restore left sidebar */
  #left-menu,
  .w-\[80px\].flex.flex-col.bg-newBgColorInner.rounded-\[12px\] {
    display: flex !important;
  }

  /* Media grid — more columns on desktop */
  .p-\[10px\].flex.flex-wrap {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 4px !important;
  }

  /* Restore content area padding */
  .flex-1.bg-newBgLineColor.rounded-\[12px\] {
    padding-bottom: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   16. SAFE-AREA PADDING  (notch / home-bar / dynamic island)
   Applied using logical properties so it works in all orientations.
   ────────────────────────────────────────────────────────────── */
@supports (padding: max(0px)) {
  #mobile-bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--sp-xs)) !important;
  }

  #mobile-fab {
    bottom: max(
      calc(var(--nav-height) + var(--sp-md)),
      calc(var(--nav-height) + var(--sp-md) + env(safe-area-inset-bottom, 0px))
    ) !important;
  }

  /* Page content: left/right safe areas for foldables / landscape notch */
  body {
    padding-left:  env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* ──────────────────────────────────────────────────────────────
   COMMIT 48b — Media grid: correct container selector
   Actual parent of media items is .withp3 (absolute positioned)
   not .p-[10px].flex.flex-wrap. Apply CSS Grid to the real container.
   ────────────────────────────────────────────────────────────── */

/* The actual media scroll container */
[class*="withp3"],
.absolute.-left-\[3px\].-top-\[3px\] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(130px, 44%), 1fr)) !important;
  gap: clamp(3px, 1.2vw, 8px) !important;
  align-content: start !important;
  /* Keep original absolute/overflow behavior */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: clamp(3px, 1vw, 6px) !important;
  box-sizing: border-box !important;
}

/* Items become grid cells — width/height driven by grid */
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  float: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Inner image/video: square, fills grid cell */
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] > *:first-child,
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] img,
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] video,
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] [class*="aspect"] {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: var(--radius-sm, clamp(4px, 1.2vw, 8px)) !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* On desktop: larger media cards with proper spacing */
@media (min-width: 1025px) {
  [class*="withp3"],
  .absolute.-left-\[3px\].-top-\[3px\] {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    padding: 20px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   COMMIT 49 — Settings inner nav: make items row (horizontal scroll)
   Outer sidebar is already flex-row (commit 46), but the inner
   .flex.flex-1.flex-col.gap-[15px] still stacks items vertically.
   Fix: convert inner nav to horizontal scroll too.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Inner nav group: horizontal scrollable pills */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all
  .flex.flex-1.flex-col.gap-\[15px\] {
    flex-direction: row !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    gap: 4px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all
  .flex.flex-1.flex-col.gap-\[15px\]::-webkit-scrollbar {
    display: none !important;
  }

  /* Each nav item: compact pill, no icon needed on mobile */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all
  .flex.flex-1.flex-col.gap-\[15px\] > div {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: var(--sp-xs, 6px) var(--sp-sm, 10px) !important;
    border-radius: 20px !important;
    font-size: var(--fs-xs, 12px) !important;
    gap: var(--sp-xs, 4px) !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Active/selected nav pill highlight */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all
  .flex.flex-1.flex-col.gap-\[15px\] > div[class*="bg-"] {
    background: rgba(124, 58, 237, 0.1) !important;
    color: #7c3aed !important;
  }

  /* Hide icons in settings nav pills to save space */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all
  .flex.flex-1.flex-col.gap-\[15px\] > div svg {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   COMMIT 49b — Media filename label: prevent overflow clipping
   The .absolute.bottom-[10px].end-[10px] label can extend left
   of the grid cell, getting clipped by overflow:hidden on .withp3.
   Fix: anchor left edge and add text-overflow: ellipsis.
   ────────────────────────────────────────────────────────────── */
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\]
.absolute.bottom-\[10px\].end-\[10px\].z-\[100\] {
  left: 4px !important;
  right: 4px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(9px, 2.5vw, 11px) !important;
}

/* ──────────────────────────────────────────────────────────────
   COMMIT 51 — Header hamburger menu (☰) for utility icons
   Moon / flag / bell stay in the header, hidden behind a ☰ button.
   Tapping slides in a compact panel from the top-right corner.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* ── Slide controls off-screen by default ── */
  .flex.gap-\[20px\].text-textItemBlur {
    position: fixed !important;
    top: clamp(52px, 10vw, 70px) !important;
    right: -260px !important;
    bottom: auto !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 16px !important;
    padding: 10px 18px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13) !important;
    z-index: 9998 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    transition: right 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    color: inherit !important;
    height: auto !important;
  }

  /* ── Open state: slide into view ── */
  .flex.gap-\[20px\].text-textItemBlur.header-menu-open {
    right: 8px !important;
  }

  /* ── Hide the thin divider lines inside the panel ── */
  .flex.gap-\[20px\].text-textItemBlur .w-\[1px\] {
    display: none !important;
  }

  /* ── Backdrop ── */
  #mobile-header-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: transparent;
  }
  #mobile-header-backdrop.open {
    display: block;
  }

  /* ── ☰ hamburger toggle button ── */
  #mobile-header-menu-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
    color: #6b7280 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    transition: color 0.15s, background 0.15s !important;
  }
  #mobile-header-menu-btn.open {
    color: #7c3aed !important;
    background: rgba(124, 58, 237, 0.08) !important;
  }
}

/* ── COMMIT 52 — Pill indicator bottom nav ── */

/* Neutralise old ::before top-line */
#mobile-bottom-nav a::before,
#mobile-bottom-nav button::before {
  display: none !important;
}

/* Icon wrapper — pill lives here */
#mobile-bottom-nav .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 30px;
  border-radius: 15px;
  background: transparent;
  transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0;
}

/* Label wrapper */
#mobile-bottom-nav .nav-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px;
  line-height: 1;
}

@media (max-width: 900px) {
  /* Active: soft purple pill + purple icon + purple label */
  #mobile-bottom-nav a.active .nav-icon,
  #mobile-bottom-nav button.active .nav-icon {
    background: rgba(124, 58, 237, 0.12) !important;
  }
  #mobile-bottom-nav a.active svg,
  #mobile-bottom-nav button.active svg {
    color: #7c3aed !important;
    stroke: #7c3aed !important;
    transform: none !important;
  }
  #mobile-bottom-nav a.active .nav-label,
  #mobile-bottom-nav button.active .nav-label {
    font-weight: 600 !important;
    color: #7c3aed !important;
  }

  /* Inactive: gray icon + gray label */
  #mobile-bottom-nav a:not(.active) svg,
  #mobile-bottom-nav button:not(.active) svg {
    color: #9ca3af !important;
    stroke: #9ca3af !important;
  }
  #mobile-bottom-nav a:not(.active) .nav-label,
  #mobile-bottom-nav button:not(.active) .nav-label {
    color: #9ca3af !important;
  }

  /* Hover: faint pill */
  #mobile-bottom-nav a:hover .nav-icon,
  #mobile-bottom-nav button:hover .nav-icon {
    background: rgba(124, 58, 237, 0.06) !important;
  }

  /* Tap feedback: pill squishes, not whole tab */
  #mobile-bottom-nav a:active,
  #mobile-bottom-nav button:active {
    transform: none !important;
    opacity: 1 !important;
  }
  #mobile-bottom-nav a:active .nav-icon,
  #mobile-bottom-nav button:active .nav-icon {
    background: rgba(124, 58, 237, 0.18) !important;
    transform: scale(0.92);
    transition: transform 0.08s ease !important;
  }
}

/* Narrow phones (320px) */
@media (max-width: 320px) {
  #mobile-bottom-nav .nav-icon {
    width: 42px !important;
    height: 27px !important;
  }
}

/* Landscape: hide labels, shrink pill */
@media (max-height: 480px) and (orientation: landscape) {
  #mobile-bottom-nav .nav-icon {
    width: 44px !important;
    height: 24px !important;
    border-radius: 12px !important;
  }
  #mobile-bottom-nav .nav-label {
    display: none !important;
  }
}

/* Dark mode — Tailwind class toggle */
.dark #mobile-bottom-nav {
  background: #1a1919 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -1px 0 rgba(0,0,0,0.3), 0 -4px 16px rgba(0,0,0,0.4) !important;
}
.dark #mobile-bottom-nav a:not(.active) svg,
.dark #mobile-bottom-nav button:not(.active) svg {
  color: rgba(255,255,255,0.45) !important;
  stroke: rgba(255,255,255,0.45) !important;
}
.dark #mobile-bottom-nav a:not(.active) .nav-label,
.dark #mobile-bottom-nav button:not(.active) .nav-label {
  color: rgba(255,255,255,0.45) !important;
}
.dark #mobile-bottom-nav a.active .nav-icon,
.dark #mobile-bottom-nav button.active .nav-icon {
  background: rgba(167,139,250,0.18) !important;
}
.dark #mobile-bottom-nav a.active svg,
.dark #mobile-bottom-nav button.active svg {
  color: #a78bfa !important;
  stroke: #a78bfa !important;
}
.dark #mobile-bottom-nav a.active .nav-label,
.dark #mobile-bottom-nav button.active .nav-label {
  color: #a78bfa !important;
}

/* ── COMMIT 53 — Header action group: vertical alignment ── */

/*
 * Problem: moon & bell SVGs sit at the top of their block-level wrappers,
 * while the flag img lands at the center. Fix: make every direct-child div
 * a flex row so its content is always vertically centred.
 * Applies globally (both desktop header and mobile hamburger dropdown).
 */

/* Outer action wrapper — flex-center everything inside */
.flex.gap-\[20px\].text-textItemBlur > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Inner click-handler divs (dark-mode toggle, bell) — also centred */
.flex.gap-\[20px\].text-textItemBlur > div > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Flag circle: lock to a fixed 26 × 26 px touch target */
.flex.gap-\[20px\].text-textItemBlur > div.rounded-full {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* Flag image: fill the circle, no distortion */
.flex.gap-\[20px\].text-textItemBlur > div.rounded-full img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Uniform gap between the three actions */
.flex.gap-\[20px\].text-textItemBlur {
  gap: 16px !important;
}

/* Dark-mode dropdown: same treatment */
.dark .flex.gap-\[20px\].text-textItemBlur {
  background: #1e1e2e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ══════════════════════════════════════════════════════════════
   COMMIT 54 — Comprehensive mobile polish: calendar toolbar,
   media grid placeholders, global spacing, content safe-area,
   desktop layout, and FAB positioning.
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   54a — Calendar toolbar: fix date truncation + compact 1-row layout
   
   DOM structure:
   .text-textColor.flex.flex-col.md:flex-row.gap-[8px].items-center.select-none
     ├── .flex.flex-grow.flex-row.items-center.gap-[10px]   (date nav row)
     │     ├── .border.h-[42px].border-newTableBorder.bg-newTableBorder  (< date >)
     │     │     ├── < arrow (prev)
     │     │     ├── .min-w-[200px].text-center  (date text)
     │     │     └── > arrow (next)
     │     └── .flex-1.text-[14px].font-[500]  (Today wrapper)
     ├── .flex.flex-row.p-[4px].border ... (Day/Week/Month)
     └── .flex.flex-row.p-[4px].border ... (cal/list icons)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Toolbar wrapper: compress vertical gap, add horizontal padding */
  .text-textColor.flex.flex-col.items-center.select-none,
  .text-textColor.flex.flex-col.md\:flex-row.gap-\[8px\].items-center.select-none {
    gap: 4px !important;
    padding: var(--sp-sm, 8px) var(--content-px, 12px) !important;
    align-items: stretch !important;
  }

  /* Row 1: date nav - make it full-width flex row */
  .flex.flex-grow.flex-row.items-center.gap-\[10px\] {
    flex-grow: 1 !important;
    width: 100% !important;
    gap: 6px !important;
  }

  /* The outer date nav container (< date >) - allow it to shrink */
  .border.h-\[42px\].border-newTableBorder.bg-newTableBorder.gap-\[1px\].flex.items-center.rounded-\[8px\].overflow-hidden {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 90px) !important;
  }

  /* Date text div — allow it to shrink, use ellipsis, smaller font */
  .min-w-\[200px\].text-center.bg-newBgColorInner.h-full.flex.items-center.justify-center {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 4px !important;
  }

  /* Arrow buttons - keep compact */
  .border.h-\[42px\].border-newTableBorder.bg-newTableBorder.gap-\[1px\].flex.items-center.rounded-\[8px\].overflow-hidden
  > div:first-child,
  .border.h-\[42px\].border-newTableBorder.bg-newTableBorder.gap-\[1px\].flex.items-center.rounded-\[8px\].overflow-hidden
  > div:last-child {
    flex-shrink: 0 !important;
    width: 32px !important;
    padding: 0 !important;
  }

  /* Today button wrapper — don't let it grow, keep it tight */
  .flex-1.text-\[14px\].font-\[500\] {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  /* Today button itself */
  .hover\:text-textItemFocused.hover\:bg-boxFocused.py-\[3px\].px-\[9px\].flex.justify-center.items-center.rounded-\[8px\].transition-all.cursor-pointer {
    padding: 4px 10px !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    white-space: nowrap !important;
  }

  /* Row 2: Day/Week/Month + icons - keep them on same row */
  /* Day/Week/Month container */
  .flex.flex-row.p-\[4px\].border.border-newTableBorder.rounded-\[8px\].text-\[14px\].font-\[500\] {
    padding: 2px !important;
    gap: 0 !important;
  }

  /* Individual Day/Week/Month buttons */
  .pt-\[6px\].pb-\[5px\].cursor-pointer.w-\[74px\].text-center.rounded-\[6px\] {
    width: auto !important;
    min-width: 44px !important;
    padding: 4px 8px !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
  }

  /* Active Day/Week/Month button — clear purple highlight */
  .pt-\[6px\].pb-\[5px\].cursor-pointer.w-\[74px\].text-center.rounded-\[6px\].text-textItemFocused.bg-boxFocused {
    background: rgba(124, 58, 237, 0.12) !important;
    color: #7c3aed !important;
    font-weight: 600 !important;
  }

  /* Calendar/list icon toggle container */
  .flex.flex-row.p-\[4px\].border.border-newTableBorder.rounded-\[8px\].text-\[14px\].font-\[500\]:has(svg) {
    padding: 2px !important;
  }

  /* Calendar/list icon toggle buttons */
  .pt-\[6px\].pb-\[5px\].cursor-pointer.flex.justify-center.items-center.w-\[34px\] {
    width: 30px !important;
    padding: 4px !important;
  }

  /* Second row wrapper: day/week/month + icons side by side */
  .text-textColor.flex.flex-col.items-center.select-none > *:not(:first-child),
  .text-textColor.flex.flex-col.md\:flex-row.gap-\[8px\].items-center.select-none > *:not(:first-child) {
    flex-shrink: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   54b — Media grid: video placeholder + constrain item height
   
   Videos with readyState=0 render as invisible blank boxes.
   Add a visible placeholder background so cells don't look empty.
   ────────────────────────────────────────────────────────────── */

/* Video elements that haven't loaded: show a dark placeholder with play icon */
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] video {
  background: #1a1a2e !important;
  min-height: 80px !important;
}

/* The inner wrapper div — ensure it's positioned for the overlay */
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] .w-full.h-full.rounded-\[6px\].border-\[4px\].relative {
  position: relative !important;
  background: #f0f0f5 !important;
  border-radius: var(--radius-sm, 6px) !important;
  overflow: hidden !important;
}

/* Video placeholder — pseudo via container background pattern */
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\]:has(video) .w-full.h-full.rounded-\[6px\].border-\[4px\].relative {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4e 100%) !important;
}

/* Ensure video fills its container */
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--radius-sm, 4px) !important;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
}

/* Filename label — overlay at bottom of the grid cell (not below it) */
.group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] .absolute.bottom-\[10px\].end-\[10px\].z-\[100\] {
  position: absolute !important;
  bottom: 6px !important;
  left: 4px !important;
  right: 4px !important;
  end: auto !important;
  inset-inline-end: 4px !important;
  font-size: clamp(9px, 2.2vw, 11px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

/* ──────────────────────────────────────────────────────────────
   54c — Global spacing & typography polish
   
   Page titles: bold, large. Cards: subtle borders, less wasted padding.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Page title in mobile header */
  #mobile-page-title {
    font-size: clamp(20px, 5vw, 26px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
  }

  /* Content area bottom padding — prevent overlap with nav */
  .flex-1.bg-newBgLineColor.rounded-\[12px\].overflow-hidden.flex {
    padding-bottom: calc(var(--nav-height, 60px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Inner content scroll areas — keep padding from nav */
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col.gap-\[15px\] {
    padding-bottom: calc(var(--nav-height, 60px) + env(safe-area-inset-bottom, 0px) + var(--sp-md, 12px)) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   54d — Content safe-area: prevent nav bar overlap
   
   The main scroll containers need bottom padding to account for
   the fixed bottom nav bar height + safe area insets.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Main page content wrapper — has the calendar, media, etc. */
  .flex-1.bg-newBgLineColor.rounded-\[12px\].overflow-hidden.flex.flex-col.gap-\[1px\] {
    margin-bottom: calc(var(--nav-height, 58px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Scrollable content: ensure it doesn't go under the FAB */
  [class*="overflow-y-auto"]:not(#mobile-bottom-nav):not([class*="withp3"]) {
    scroll-padding-bottom: calc(var(--nav-height, 58px) + var(--sp-lg, 20px)) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   54e — FAB positioning: above nav bar
   
   Ensure FAB (+ button) is above the nav and not overlapping it.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #mobile-fab {
    bottom: calc(var(--nav-height, 58px) + var(--sp-md, 12px) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   54f — Desktop layout: max-width + centered content
   
   On wide screens, cap content width for readability.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  /* Settings cards: cap width for readability */
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col {
    max-width: 800px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   54g — Settings nav: ensure Logout button is accessible
   
   Make sure "Logout from Postiz" pill is never cut off.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Ensure scroll extends to show last item */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all
  .flex.flex-1.flex-col.gap-\[15px\] {
    padding-inline-end: var(--sp-md, 12px) !important;
  }

  /* Ensure the scroll container has enough end padding */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all
  .flex.flex-1.flex-col.gap-\[15px\]::after {
    content: '' !important;
    display: inline-block !important;
    min-width: var(--sp-md, 12px) !important;
    flex-shrink: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   54h — Create Post: sticky action bar above nav
   
   The publish/draft/schedule buttons should be sticky at bottom
   and not overlap the bottom nav bar.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Sticky action bar */
  .sticky.bottom-0.z-\[100\] {
    bottom: calc(var(--nav-height, 58px) + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #ffffff !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06) !important;
    padding: var(--sp-sm, 8px) var(--content-px, 12px) !important;
    padding-bottom: calc(var(--sp-sm, 8px) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 100 !important;
  }

  .dark .sticky.bottom-0.z-\[100\] {
    background: #1a1919 !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   COMMIT 54 PATCH — Fix calendar date text + Day/Week/Month overflow
   
   On mobile, the date text sits in .py-[3px].px-[9px].rounded-[5px]
   (not .min-w-[200px]) and Day/Week/Month buttons need more width.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Date inner button: allow text to show, smaller font */
  .py-\[3px\].px-\[9px\].rounded-\[5px\].transition-all.text-\[14px\] {
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    padding: 3px 6px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* The .min-w-[200px] container: ensure it can expand */
  .min-w-\[200px\].text-center.bg-newBgColorInner.h-full.flex.items-center.justify-center {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
  }

  /* The outer date nav container: remove overflow:hidden so date shows */
  .border.h-\[42px\].border-newTableBorder.bg-newTableBorder.gap-\[1px\].flex.items-center.rounded-\[8px\].overflow-hidden {
    overflow: visible !important;
    border-radius: var(--radius-sm, 6px) !important;
  }

  /* Day/Week/Month: use flex: 1 so they distribute evenly */
  .flex.flex-row.p-\[4px\].border.border-newTableBorder.rounded-\[8px\].text-\[14px\].font-\[500\] {
    display: flex !important;
    align-items: stretch !important;
    width: auto !important;
  }

  /* Day/Week/Month individual buttons: flex-1, no fixed width */
  .pt-\[6px\].pb-\[5px\].cursor-pointer.w-\[74px\].text-center.rounded-\[6px\] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 38px !important;
    padding: 4px 6px !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    white-space: nowrap !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   COMMIT 54 PATCH 2 — Fix Day/Week/Month overflow clipping
   
   The view container has overflow:hidden and 120px width.
   3 buttons × 38px = 114px, plus 2×2px padding = 118px, but
   Month's trailing edge is still clipped. Force overflow:visible.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* View switcher (Day/Week/Month) container: allow overflow */
  .flex.flex-row.p-\[4px\].border.border-newTableBorder.rounded-\[8px\].text-\[14px\].font-\[500\] {
    overflow: visible !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  /* Also fix the icon toggle container */
  .flex.flex-row.p-\[4px\].border.border-newTableBorder.rounded-\[8px\].text-\[14px\].font-\[500\] ~ .flex.flex-row.p-\[4px\].border {
    overflow: visible !important;
  }

  /* Toolbar: let the second row flex-wrap if needed */
  .text-textColor.flex.flex-col.items-center.select-none > *:nth-child(2),
  .text-textColor.flex.flex-col.md\:flex-row.gap-\[8px\].items-center.select-none > *:nth-child(2),
  .text-textColor.flex.flex-col.items-center.select-none > *:nth-child(3),
  .text-textColor.flex.flex-col.md\:flex-row.gap-\[8px\].items-center.select-none > *:nth-child(3) {
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  /* Remove the erroneous margin-bottom on the main content box that creates gray space */
  .flex-1.bg-newBgLineColor.rounded-\[12px\].overflow-hidden.flex.flex-col.gap-\[1px\] {
    margin-bottom: 0 !important;
  }

  /* Instead, give the inner scrollable area padding-bottom */
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col.gap-\[15px\],
  .bg-newBgColorInner.p-\[20px\].flex.flex-col {
    padding-bottom: calc(var(--nav-height, 58px) + env(safe-area-inset-bottom, 0px) + var(--sp-sm, 8px)) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   COMMIT 54 PATCH 3 — Media page: fix content centering
   
   The media page main column uses align-items:center which causes
   children (including the grid) to be centered at their natural width
   instead of stretching full-width.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Fix the main content area: stretch children full-width */
  .relative.flex.flex-col.flex-1 {
    align-items: stretch !important;
  }

  /* The withp3 grid container needs to respect the full-width parent */
  [class*="withp3"] {
    width: calc(100% + 6px) !important;
    max-width: calc(100% + 6px) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   COMMIT 54 PATCH 4 — Media/content pages: force full-width children
   
   The .relative.flex.flex-col.flex-1 container uses align-items:center
   which prevents children from stretching full-width. Override with
   !important and also force children to width:100%.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Force full-width stretch for the main content column */
  .relative.flex.flex-col.flex-1 {
    align-items: stretch !important;
  }

  /* Force the content child full-width */
  .relative.flex.flex-col.flex-1 > .flex.flex-col.flex-1,
  .relative.flex.flex-col.flex-1 > .flex.flex-col.gap-\[15px\] {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   COMMIT 55 — Create Post: fix channel selector layout
   
   The channel selector .flex.flex-wrap.gap-[12px].flex-1 has its
   children forced to 50% width by the integrations grid rule.
   Override children to be compact circles for horizontal scroll.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Channel selector children: compact circles, no 50% min-width */
  .flex.flex-wrap.gap-\[12px\].flex-1 > * {
    min-width: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Channel selector wrapper: proper horizontal scroll */
  .flex.flex-wrap.gap-\[12px\].flex-1 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 4px 2px 6px !important;
    width: 100% !important;
  }

  .flex.flex-wrap.gap-\[12px\].flex-1::-webkit-scrollbar {
    display: none !important;
  }

  /* Ensure the channel circle icons have proper size */
  .flex.flex-wrap.gap-\[12px\].flex-1 .cursor-pointer.border-\[2px\].relative.rounded-full {
    flex-shrink: 0 !important;
    min-width: 48px !important;
    min-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
  }

  /* The outer .flex.gap-[8px].items-center wrapping label+channels */
  /* Only target those in the Create Post modal */
  .w-full.h-full.fixed .flex.gap-\[8px\].items-center {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    width: 100% !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   COMMIT 55 PATCH — Fix channel items taking full width
   
   Each .flex.gap-[8px].items-center child was stretching to
   fill the row width. Force fit-content width on each.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Channel items (wrappers with tooltip): fit-content, not full-width */
  .flex.flex-wrap.gap-\[12px\].flex-1 > .flex.gap-\[8px\].items-center {
    flex-shrink: 0 !important;
    width: fit-content !important;
    max-width: fit-content !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   COMMIT 56 — Design polish: typography, spacing, dark mode
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   56a — Calendar: Day/Week/Month visual separator
   Add subtle separator lines between the buttons so they look
   like a proper segmented control.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Add separator between Day/Week/Month buttons */
  .pt-\[6px\].pb-\[5px\].cursor-pointer.w-\[74px\].text-center.rounded-\[6px\]:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  .dark .pt-\[6px\].pb-\[5px\].cursor-pointer.w-\[74px\].text-center.rounded-\[6px\]:not(:last-child) {
    border-right-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* Active button: no separator on right */
  .pt-\[6px\].pb-\[5px\].cursor-pointer.w-\[74px\].text-center.rounded-\[6px\].text-textItemFocused.bg-boxFocused {
    border-right: none !important;
    margin-right: 0 !important;
  }

  /* Compact calendar toolbar: reduce top padding to save space */
  .text-textColor.flex.flex-col.items-center.select-none,
  .text-textColor.flex.flex-col.md\:flex-row.gap-\[8px\].items-center.select-none {
    padding-top: var(--sp-xs, 6px) !important;
    padding-bottom: var(--sp-xs, 6px) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   56b — Dark mode: media grid placeholder
   ────────────────────────────────────────────────────────────── */
.dark .group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\]:has(video)
.w-full.h-full.rounded-\[6px\].border-\[4px\].relative {
  background: linear-gradient(135deg, #0d0d1a 0%, #1a1a30 100%) !important;
}

/* ──────────────────────────────────────────────────────────────
   56c — Settings: reduce card padding on mobile for more content density
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Settings section cards: compact padding */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.gap-\[15px\] {
    padding: var(--sp-md, 14px) !important;
    gap: var(--sp-sm, 10px) !important;
  }

  /* Settings card inner sections: reduce gap */
  .flex.flex-col.gap-\[15px\].bg-\[#f2f2f2\],
  .flex.flex-col.gap-\[15px\].dark\:bg-\[#2b2b2b\] {
    gap: var(--sp-sm, 10px) !important;
    padding: var(--sp-sm, 10px) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   56d — Global: improve toggle/switch appearance on mobile
   Toggles (on/off switches) should have clear tap area and look sharp.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Standard toggle switches: ensure tap area */
  [role="switch"],
  [type="checkbox"][class*="toggle"] {
    min-width: 44px !important;
    min-height: 28px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   56e — Media page: ensure content column is full-width
   Only target the primary .flex.flex-col.flex-1 child wrapper.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* The primary content column inside the main wrapper */
  .relative.flex.flex-col.flex-1 > .flex.flex-col.flex-1 {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   56f — Bottom nav: consistent elevation and clean look
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Ensure FAB clears the bottom nav comfortably */
  #mobile-fab {
    right: var(--content-px, 16px) !important;
    bottom: calc(var(--nav-height, 58px) + 16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   COMMIT 58 — Desktop UI Polish & UX Improvements
   Targets: all pages at ≥ 1025px viewport.
   Goals:
   - Expand content beyond old 720/800px max-width caps
   - Improve sidebar legibility (no wrapping labels)
   - Refine header, typography, card rhythm
   - Better Analytics chart grid
   - Better Media grid column count
   - Better Settings layout
   ────────────────────────────────────────────────────────────── */

/* ── 1. REMOVE OVERLY-BROAD 720px MAX-WIDTH ── */
/* The previous rule matched Calendar/Analytics main content — wrong. */
/* Content areas should expand to fill available space on desktop.    */
@media (min-width: 1025px) {

  /* Main outer container: full width */
  .flex-1.bg-newBgLineColor.rounded-\[12px\].overflow-hidden.flex {
    max-width: 100% !important;
  }

  /* All flex-1 content panels — remove any inherited max-width cap */
  .bg-newBgColorInner.flex-1.flex-col.flex.p-\[20px\].gap-\[12px\],
  .bg-newBgColorInner.flex-1.flex-col.flex.p-\[20px\],
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col.gap-\[15px\] {
    max-width: 100% !important;
  }

  /* Remove the .max-w-[800px] constraint the app puts on settings content */
  .max-w-\[800px\] {
    max-width: 100% !important;
  }

  /* ── 2. LEFT NAVIGATION SIDEBAR ── */

  /* Fix "Integrations" and other long labels wrapping to 2 lines */
  .w-\[80px\].flex.flex-col.bg-newBgColorInner.rounded-\[12px\] a span,
  .w-\[80px\].flex.flex-col.bg-newBgColorInner.rounded-\[12px\] button span,
  #left-menu a span,
  #left-menu button span {
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 68px !important;
    display: block !important;
    text-align: center !important;
  }

  /* Sidebar nav item — ensure consistent spacing */
  .w-\[80px\].flex.flex-col.bg-newBgColorInner.rounded-\[12px\] a,
  .w-\[80px\].flex.flex-col.bg-newBgColorInner.rounded-\[12px\] button,
  #left-menu a,
  #left-menu button {
    padding: 8px 4px !important;
    min-height: 56px !important;
    gap: 4px !important;
  }

  /* Active state: keep pill highlight clean */
  .w-\[80px\].flex.flex-col.bg-newBgColorInner.rounded-\[12px\] a.active,
  .w-\[80px\].flex.flex-col.bg-newBgColorInner.rounded-\[12px\] button.active {
    border-radius: 10px !important;
  }

  /* Sidebar icon size */
  .w-\[80px\].flex.flex-col.bg-newBgColorInner.rounded-\[12px\] svg,
  #left-menu svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }

  /* ── 3. PAGE HEADER ── */

  /* Bigger, bolder page title on desktop */
  .flex.bg-newBgColorInner.h-\[80px\].px-\[20px\].items-center h1,
  .flex.bg-newBgColorInner.h-\[80px\].px-\[20px\].items-center .text-\[24px\],
  .flex.bg-newBgColorInner.h-\[80px\].px-\[20px\].items-center .font-\[600\] {
    font-size: clamp(22px, 2vw, 28px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }

  /* Header height: slightly taller on desktop for more breathing room */
  .flex.bg-newBgColorInner.h-\[80px\].px-\[20px\].items-center {
    height: 68px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* ── 4. SETTINGS PAGE ── */

  /* Settings section sidebar nav: clean list style */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all.w-\[260px\] {
    padding: 16px 12px !important;
    width: 220px !important;
  }

  /* Settings nav items */
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all.w-\[260px\] a,
  .bg-newBgColorInner.p-\[20px\].flex.flex-col.transition-all.w-\[260px\] button {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Settings content cards: better internal spacing */
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col.gap-\[12px\] > div,
  .bg-newBgColorInner.flex-1.flex-col.flex.p-\[20px\].gap-\[12px\] > div {
    max-width: 900px !important;
  }

  /* Individual setting card */
  .bg-sixth.border-fifth.border.rounded-\[4px\] {
    border-radius: 10px !important;
    padding: 24px !important;
  }

  /* Setting row (label + description + control) */
  .bg-sixth.border-fifth.border.rounded-\[4px\] .flex.justify-between,
  .bg-sixth.border-fifth.border.rounded-\[4px\] .flex.gap-\[20px\] {
    align-items: center !important;
  }

  /* ── 5. ANALYTICS PAGE ── */

  /* Chart stat cards: use CSS Grid for better alignment */
  .grid.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }

  /* Analytics channel list sidebar */
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col.gap-\[15px\] > div > div {
    min-height: 44px !important;
  }

  /* Analytics "7 Days" dropdown */
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col.gap-\[15px\] > div:first-child select,
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col.gap-\[15px\] > div:first-child [role="combobox"] {
    min-width: 140px !important;
    border-radius: 8px !important;
  }

  /* Analytics stat cards: polished appearance */
  .grid.grid-cols-3 > div {
    border-radius: 12px !important;
    padding: 20px !important;
  }

  /* Metric card: bigger number display */
  .grid.grid-cols-3 > div .text-\[40px\],
  .grid.grid-cols-3 > div [class*="text-[40"] {
    font-size: clamp(28px, 3vw, 40px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
  }

  /* ── 6. MEDIA PAGE ── */

  /* Media grid: auto-fill with larger minimum cards */
  [class*="withp3"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    padding: 20px !important;
  }

  /* Media card items: bigger, rounded, with aspect ratio */
  [class*="withp3"] > div {
    border-radius: 12px !important;
    overflow: hidden !important;
    min-height: 200px !important;
  }

  /* Search + Upload bar: full width with proper alignment */
  .bg-newBgColorInner.flex-1.flex-col.flex.p-\[20px\].gap-\[12px\] > div:first-child {
    max-width: 100% !important;
  }

  /* ── 7. CALENDAR PAGE ── */

  /* Calendar toolbar: single row, no wrap + "Today" text fix */
  .flex.flex-wrap.items-center.gap-\[10px\] {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .flex.flex-wrap.items-center.gap-\[10px\] > * {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Calendar date navigation: more breathing room */
  .flex.items-center.gap-\[5px\] {
    gap: 6px !important;
  }

  /* Calendar post thumbnails: slightly larger on desktop (NOT media page) */
  :not([class*="withp3"]) > .group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] {
    width: 56px !important;
    height: 56px !important;
  }

  /* Media page items: fill the grid cell */
  [class*="withp3"] > .group.px-\[3px\].py-\[3px\].float-left.rounded-\[6px\] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
  }

  /* ── 8. GENERAL DESKTOP CARD RHYTHM ── */

  /* Consistent card border radius */
  .rounded-\[4px\] {
    border-radius: 8px !important;
  }

  /* Subtle shadows on white panels */
  .bg-newBgColorInner {
    box-shadow: none !important;
  }

  /* Content area padding */
  .bg-newBgColorInner.flex-1.flex-col.flex.p-\[20px\].gap-\[12px\],
  .bg-newBgColorInner.flex-1.flex-col.flex.p-\[20px\] {
    padding: 24px 28px !important;
  }

  /* ── 9. SECTION TITLES ── */

  /* Section/card titles */
  .text-\[18px\].font-\[600\],
  .text-\[20px\].font-\[600\] {
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: inherit !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   57 — Empty-state pages: contain oversized children
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Empty-state container (Plugs, Analytics, etc.) uses flex-col items-center
     but children have large intrinsic widths that overflow the viewport.
     Clip them and ensure content stays within bounds. */
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col.gap-\[15px\].transition-all.items-center.justify-center {
    overflow: hidden !important;
  }
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col.gap-\[15px\].transition-all.items-center.justify-center > * {
    max-width: 100% !important;
  }
  /* Make the illustration scale down instead of overflowing */
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col.gap-\[15px\].transition-all.items-center.justify-center img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Center-align the text in the empty-state message */
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col.gap-\[15px\].transition-all.items-center.justify-center .text-\[48px\] {
    text-align: center !important;
    font-size: clamp(16px, 5vw, 24px) !important;
    line-height: 1.4 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   COMMIT 60 — Alert/Dialog centering, Logout button, Toggle polish
   ══════════════════════════════════════════════════════════════ */

/* ── 1. ALERT / TOAST DIALOGS — center on screen ──────────── */

/* Sonner toaster: reposition to bottom-center (default is top-left) */
[data-sonner-toaster] {
  --offset: 24px !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--offset) !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
  z-index: 999999 !important;
}

/* Individual toast items: polished card style */
[data-sonner-toast] {
  border-radius: 14px !important;
  padding: 14px 20px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  gap: 10px !important;
}

/* Toast success variant */
[data-sonner-toast][data-type="success"] {
  background: #065f46 !important;
  color: #d1fae5 !important;
}

/* Toast error variant */
[data-sonner-toast][data-type="error"] {
  background: #991b1b !important;
  color: #fecaca !important;
}

/* Toast default */
[data-sonner-toast]:not([data-type]) {
  background: rgba(30,30,30,0.95) !important;
  color: #f3f4f6 !important;
}

/* Light mode toasts */
:not(.dark) [data-sonner-toast]:not([data-type]) {
  background: rgba(255,255,255,0.97) !important;
  color: #1f2937 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}

/* Postiz popup modals (Add Autopost, Are you sure, etc.) — center the card */
/* The .absolute container is only as wide as its card content (600px),
   pinned to top-0 left-0. Force it full-width so mx-auto on the card works. */
.fixed.flex.bg-popup > .relative > .absolute.top-0.left-0[class*="pt-[100px]"] {
  width: 100% !important;
}

/* Also vertically center shorter dialogs (like "Are you sure?" confirmation) */
.fixed.flex.bg-popup > .relative > .absolute.top-0.left-0[class*="pt-[100px]"] > .rounded-\[24px\].min-w-\[600px\] {
  max-width: min(600px, calc(100vw - 32px)) !important;
}

/* AlertDialog / Radix Dialog — always centered */
[role="alertdialog"],
[role="dialog"] {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: min(480px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 48px) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25) !important;
  z-index: 99999 !important;
}

/* Dialog overlay / backdrop */
[data-radix-portal] > [data-state],
.fixed.inset-0[class*="bg-"] {
  z-index: 99998 !important;
}

/* Mobile: toasts sit above bottom nav */
@media (max-width: 768px) {
  [data-sonner-toaster] {
    bottom: 80px !important;
  }
}

/* ── 2. TOGGLE SWITCHES — polished iOS-style ──────────────── */

/* Toggle track (outer container) */
.w-\[57px\].h-\[34px\].p-\[4px\].border-fifth.border.rounded-\[100px\] {
  width: 52px !important;
  height: 30px !important;
  padding: 3px !important;
  border: none !important;
  border-radius: 15px !important;
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15) !important;
}

/* Toggle track — OFF state (gray) */
.w-\[57px\].h-\[34px\].p-\[4px\].border-fifth.border.rounded-\[100px\]:not(.bg-customColor4) {
  background: #d1d5db !important;
}

/* Toggle track — ON state (purple) — bg-customColor4 is the ON bg */
.w-\[57px\].h-\[34px\].p-\[4px\].border-fifth.border.rounded-\[100px\].bg-customColor4 {
  background: #7c3aed !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 0 1px rgba(124,58,237,0.3) !important;
}

/* Toggle knob */
.w-\[57px\].h-\[34px\].p-\[4px\].border-fifth.border.rounded-\[100px\] .w-\[24px\].h-\[24px\].rounded-full {
  width: 24px !important;
  height: 24px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Toggle knob — active press: slightly shrink */
.w-\[57px\].h-\[34px\].p-\[4px\].border-fifth.border.rounded-\[100px\]:active .w-\[24px\].h-\[24px\].rounded-full {
  transform: scale(0.9) !important;
}

/* Dark mode toggle OFF */
.dark .w-\[57px\].h-\[34px\].p-\[4px\].border-fifth.border.rounded-\[100px\]:not(.bg-customColor4) {
  background: #4b5563 !important;
}

/* Dark mode toggle ON */
.dark .w-\[57px\].h-\[34px\].p-\[4px\].border-fifth.border.rounded-\[100px\].bg-customColor4 {
  background: #8b5cf6 !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15), 0 0 12px rgba(139,92,246,0.3) !important;
}

/* Mobile: compact toggle that fits inside cards */
@media (max-width: 768px) {
  .w-\[57px\].h-\[34px\].p-\[4px\].border-fifth.border.rounded-\[100px\] {
    width: 48px !important;
    height: 28px !important;
    min-width: 48px !important;
    padding: 3px !important;
    flex-shrink: 0 !important;
  }
  .w-\[57px\].h-\[34px\].p-\[4px\].border-fifth.border.rounded-\[100px\] .w-\[24px\].h-\[24px\].rounded-full {
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    min-width: 22px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.08) !important;
  }
}

/* ── 3. LOGOUT BUTTON — proper styled button ──────────────── */

/* Logout text container: style as a real button */
.cursor-pointer > .text-red-400 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 24px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: #ffffff !important;
  background: #dc2626 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.cursor-pointer > .text-red-400:hover {
  background: #b91c1c !important;
  box-shadow: 0 4px 12px rgba(220,38,38,0.3) !important;
  transform: translateY(-1px) !important;
}

.cursor-pointer > .text-red-400:active {
  background: #991b1b !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Mobile: move Logout out of the horizontal nav row, pin at bottom */
@media (max-width: 900px) {
  /* The .mt-4 wrapper that contains the cursor-pointer > logout span */
  .mt-4:has(> .cursor-pointer > .text-red-400) {
    position: fixed !important;
    bottom: 72px !important; /* above bottom nav bar */
    left: 16px !important;
    right: 16px !important;
    z-index: 100 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Add bottom padding to settings content so Logout doesn't overlap */
  .bg-newBgColorInner.p-\[20px\].flex.flex-1.flex-col.gap-\[15px\],
  .bg-newBgColorInner.flex-1.flex-col.flex.p-\[20px\].gap-\[12px\] {
    padding-bottom: 80px !important;
  }

  .cursor-pointer:has(> .text-red-400) {
    width: 100% !important;
  }

  .cursor-pointer > .text-red-400 {
    display: flex !important;
    width: 100% !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    justify-content: center !important;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.2) !important;
  }
}

/* Desktop: position logout nicely in sidebar */
@media (min-width: 1025px) {
  .cursor-pointer > .text-red-400 {
    padding: 8px 20px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
}

/* ============================================
   SocialQ Rebrand — hide Postiz, show SocialQ
   ============================================ */

/* Hide Postiz logo SVG in sidebar */
svg.mt-\[8px\].min-w-\[60px\].min-h-\[60px\] {
  display: none !important;
}

/* Show SocialQ icon in its place */
.flex.flex-col.h-full.gap-\[32px\].flex-1.py-\[12px\]::before {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  margin: 8px auto 0;
  background: url('/custom/favicon.png') no-repeat center/contain;
  flex-shrink: 0;
  border-radius: 10px;
}

/* Auth page: replace Postiz logo with SocialQ on login/register pages */
#socialq-auth-logo {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 8px;
  border-radius: 16px;
}
#socialq-auth-wordmark {
  display: block;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}