/* Postiz Mobile-Fix - wird per Nginx sub_filter in jede Postiz-Seite eingefuegt.
   Gilt nur bis 820px Breite, Desktop bleibt unveraendert.
   Datei liegt auf dem Server unter /opt/postiz/mobile-proxy/mobile.css */
@media (max-width: 820px) {

  /* Grundlayout: weniger Aussenabstand, unten Platz fuer die Menueleiste */
  body .flex.flex-col.min-h-screen {
    padding: 6px !important;
    padding-bottom: 78px !important;
    min-width: 0 !important;
  }

  /* Sidebar-Spalte: seit Postiz 2.23 steckt das Menue (#left-menu) darin. Spalte selbst weg,
     Inhalt bleibt (display: contents), damit die feste Menueleiste unten sichtbar ist */
  .flex.flex-col.bg-newBgColorInner.w-\[80px\] {
    display: contents !important;
  }

  /* Menue wird zur festen Leiste am unteren Rand */
  #left-menu {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    inset-inline-start: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    background: var(--new-bgColorInner, #16151a);
    border-top: 1px solid var(--new-bgLineColor, #2a2830);
    z-index: 200;
  }
  #left-menu > div {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    height: auto !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    overflow-x: auto;
  }
  /* Logo in der Leiste ausblenden */
  #left-menu > div > svg {
    display: none !important;
  }
  /* Menuegruppen nebeneinander statt untereinander */
  #left-menu > div > div {
    flex-direction: row !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
    justify-content: space-around;
    min-width: 0;
  }
  #left-menu a,
  #left-menu button {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0;
    height: 50px !important;
    padding: 4px 2px !important;
  }
  #left-menu a *,
  #left-menu button * {
    font-size: 10px !important;
  }
  /* Home-Link als erster Eintrag der Leiste (per JS eingehaengt), schwebender Chip faellt am Handy weg */
  .pz-home-link { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--new-textItemBlur, #9ca2a8); text-decoration: none; }
  .pz-home-link span { font-weight: 600; }
  .pz-home-chip { display: none !important; }

  /* Inhaltsbereich darf schmaler als sein Inhalt werden (sonst ragt die Liste rechts raus) */
  .bg-newBgColorInner.flex-1.flex-col.flex.p-\[20px\] {
    min-width: 0 !important;
    padding: 10px !important;
  }
  .bg-newBgColorInner.flex-1.flex-col.flex.p-\[20px\] .flex.flex-grow.flex-row.items-center {
    flex-wrap: wrap !important;
    justify-content: center;
    row-gap: 8px;
  }

  /* Analytics: Kanal-Spalte wie im Kalender per Knopf als Overlay */
  div.bg-newBgColorInner.flex.flex-col.transition-all[class*="w-[260"] {
    display: none !important;
  }
  html.pz-channels div.bg-newBgColorInner.flex.flex-col.transition-all[class*="w-[260"] {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    width: min(320px, 88vw) !important;
    z-index: 190 !important;
    overflow-y: auto;
    padding-top: 58px !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.55);
  }

  /* Kleine Dialoge (z.B. "Select a Set", Bestaetigungen) haben am Desktop min. 600px - am Handy auf Bildschirmbreite */
  .min-w-\[600px\] {
    min-width: 0 !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    padding: 18px !important;
    gap: 20px !important;
  }

  /* Media: 3 Vorschaubilder pro Reihe statt 8 Briefmarken */
  .w8-max {
    width: calc((100vw - 32px) / 3) !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Kopfzeile kompakter */
  .flex.bg-newBgColorInner.h-\[80px\] {
    height: 56px !important;
    padding: 0 10px !important;
  }
  .flex.bg-newBgColorInner.h-\[80px\] .text-\[24px\] {
    font-size: 17px !important;
  }
  .flex.bg-newBgColorInner.h-\[80px\] > .flex.gap-\[20px\] {
    gap: 10px !important;
  }
  .bg-blockSeparator {
    display: none !important;
  }

  /* Kalender-Filterleiste: Wochenanzeige nicht ueberbreit */
  .min-w-\[200px\] {
    min-width: 0 !important;
    flex: 1 1 auto;
  }

  /* Wochenansicht: schmale Zeitspalte, Tage horizontal scrollbar */
  [class*="136px_repeat"] {
    grid-template-columns: 48px repeat(7, minmax(110px, 1fr)) !important;
  }

  /* Datumsbereich in der Filterleiste kompakt und einzeilig */
  .min-w-\[200px\] .py-\[3px\] {
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* Channel-Spalte: standardmaessig ausgeblendet ... */
  div.flex.relative.flex-col[class*="w-[260"],
  div.flex.relative.flex-col.group.sidebar {
    display: none !important;
  }
  /* ... und per Knopf als Overlay von links einblendbar */
  html.pz-channels div.flex.relative.flex-col[class*="w-[260"],
  html.pz-channels div.flex.relative.flex-col.group.sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    width: min(320px, 88vw) !important;
    z-index: 190 !important;
    background: var(--new-bgColorInner, #16151a);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.55);
    padding-top: 58px !important;
    overflow-y: auto;
  }

  /* ===== Create-Post-Modal: einspaltig statt Editor+Preview nebeneinander ===== */

  /* Modal fuellt den Bildschirm, kein 40px-Rahmen */
  .w-full.h-full.flex-1.p-\[40px\].flex.relative {
    padding: 0 !important;
  }

  /* Editor- und Preview-Spalte untereinander */
  .bg-newBgColorInner.rounded-\[20px\] > .flex-1.flex {
    flex-direction: column !important;
  }

  /* Preview-Spalte: nur die Kopfzeile behalten (dort sitzt das Schliessen-X),
     Inhalt ausblenden, als oberste Zeile anordnen */
  div[class*="w-[580px]"] {
    width: 100% !important;
    order: -1;
    flex: 0 0 auto !important;
  }
  div[class*="w-[580px]"] > .flex-1.relative {
    display: none !important;
  }
  div[class*="w-[580px]"] > div:first-child {
    height: 48px !important;
    border-radius: 0 !important;
  }
  /* "Post Preview"-Text in der Kopfzeile ausblenden, X bleibt */
  div[class*="w-[580px]"] > div:first-child > .flex-1 {
    visibility: hidden;
  }

  /* Editor-Spalte: Trennlinie weg, Kopf kompakt */
  .flex.flex-col.flex-1.border-e.border-newBorder {
    border-inline-end: none !important;
  }
  .flex.flex-col.flex-1.border-e.border-newBorder > div:first-child,
  .bg-newBgColor.h-\[65px\] {
    height: 48px !important;
    font-size: 16px !important;
  }

  /* Editor-Spalten duerfen schmaler als ihr Inhalt werden */
  .fixed.bg-popup .flex-1 { min-width: 0; }
  .fixed.bg-popup .relative.flex-col.flex-1.flex { min-width: 0 !important; }
  /* Werkzeugleiste im Editor bricht um statt abgeschnitten zu werden */
  .fixed.bg-popup .flex.gap-\[8px\].px-\[12px\].border-t.w-full.b1 { flex-wrap: wrap !important; row-gap: 0 !important; }
  .fixed.bg-popup .flex.gap-\[8px\].px-\[12px\].border-t.w-full.b1 > div { flex-wrap: wrap; }
  .fixed.bg-popup .flex.gap-\[8px\].px-\[12px\].border-t.w-full.b1 > .flex-1 { flex: 1 1 100%; }

  /* Fusszeile des Modals in 3 kompakten Reihen: Tag + Wiederholen | Datum + Entwurf | Planen + Jetzt posten */
  .select-none.h-\[84px\] {
    height: auto !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px !important;
  }
  .select-none.h-\[84px\] button { height: 40px !important; }
  .select-none.h-\[84px\] > .flex-1.flex { flex-wrap: nowrap !important; padding-inline-start: 0 !important; width: 100%; }
  .select-none.h-\[84px\] > .flex-1.flex > div { flex: 1 1 0; min-width: 0; height: 40px !important; font-size: 13px !important; }
  .select-none.h-\[84px\] > .flex-1.flex > div > div { padding: 0 8px !important; gap: 6px !important; min-width: 0; }
  .select-none.h-\[84px\] > .flex-1.flex > div > div > div:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .select-none.h-\[84px\] > .pe-\[20px\] { padding-inline-end: 0 !important; justify-content: stretch !important; flex: 1 1 100%; flex-wrap: wrap; gap: 6px !important; }
  .select-none.h-\[84px\] > .pe-\[20px\] > div:first-child { flex: 1 1 auto; height: 40px !important; padding: 0 10px !important; font-size: 13px; }
  .select-none.h-\[84px\] > .pe-\[20px\] > .group { flex: 1 1 100%; display: flex; gap: 6px; }
  .select-none.h-\[84px\] > .pe-\[20px\] > .group > button:first-child { flex: 1 1 0; min-width: 0 !important; }
  /* "Post now" erscheint am Desktop nur beim Drueberfahren mit der Maus - am Handy immer sichtbar daneben */
  .select-none.h-\[84px\] > .pe-\[20px\] > .group > button.hidden { display: flex !important; position: static !important; width: auto !important; flex: 1 1 0; padding: 0 !important; background: none !important; }
  .select-none.h-\[84px\] > .pe-\[20px\] > .group > button.hidden > div { height: 40px !important; }

  /* Offenes Post-Fenster: Menueleiste und eigene Schwebe-Knoepfe weg, KI-Chat-Knopf klein nach oben */
  html:has(.fixed.bg-popup) #left-menu,
  html:has(.fixed.bg-popup) .pz-channels-toggle,
  html:has(.fixed.bg-popup) .pz-neu { display: none !important; }
  .copilotKitButton { width: 44px !important; height: 44px !important; }
  html:has(.fixed.bg-popup) .copilotKitPopup .copilotKitButton { position: fixed !important; top: 10px !important; right: 52px !important; bottom: auto !important; width: 36px !important; height: 36px !important; }

  /* Stoerende Schwebe-Elemente auf dem Handy ausblenden
     (Support-Bubble und Feedback-Knopf verdecken sonst die Buttons) */
  .bg-customColor39.fixed,
  #sentry-feedback {
    display: none !important;
  }

  /* Channel-Knopf ausblenden, solange das Post-Modal offen ist */
  html:has(div[class*="w-[580px]"]) .pz-channels-toggle {
    display: none !important;
  }

  /* Menue-Knopf (Kanaele bzw. Einstellungs-Menue) oben links in der Kopfzeile (per JS eingehaengt) */
  .pz-channels-toggle {
    display: none;
    position: fixed;
    left: 12px;
    top: 14px;
    z-index: 210;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #612bd3;
    color: #fff;
    border: none;
    align-items: center;
    justify-content: center;
  }
  .pz-channels-toggle.pz-visible {
    display: flex;
  }
  html:has(.pz-channels-toggle.pz-visible) .flex.bg-newBgColorInner.h-\[80px\] {
    padding-inline-start: 58px !important;
  }
  html.pz-channels .pz-channels-toggle {
    background: #fff;
    color: #131019;
  }

  /* Neuer Post: schwebender Plus-Knopf unten rechts (per JS, klickt Postiz' "Create Post") */
  .pz-neu {
    display: none;
    position: fixed;
    right: 14px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 205;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #612bd3;
    color: #fff;
    border: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  }
  .pz-neu.pz-visible { display: flex; }
  html.pz-channels .pz-neu { display: none !important; }
  /* KI-Chat-Knopf ueber den Plus-Knopf schieben, damit sich beide nicht verdecken */
  html:not(:has(.fixed.bg-popup)) .copilotKitButton { bottom: calc(140px + env(safe-area-inset-bottom)) !important; }
}

@media (min-width: 821px) {
  .pz-channels-toggle,
  .pz-neu,
  .pz-home-link {
    display: none !important;
  }
}

/* Home-Chip: kleiner Rueckweg zum Moritzboard, auf allen Bildschirmgroessen */
.pz-home-chip {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 300;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--new-bgColorInner, #16151a) 80%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--new-textItemBlur, #9ca2a8);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: color .2s ease, transform .2s ease;
}
.pz-home-chip:hover { color: #fff; transform: scale(1.08); }
@media (max-width: 820px) {
  .pz-home-chip { bottom: calc(78px + env(safe-area-inset-bottom)); }
}