/* ─── Tablet & PC (Flo 06.07.): Handy-Format bleibt überall ─────────────────
   Alle Screens laufen in derselben ~600px-Spalte wie auf dem Handy. Links und
   rechts vom Content läuft eine Rand-Tönung (--edge, themenfarben) per
   Farbverlauf nach Weiß aus. Ab 1020px wird der Chat dauerhaft rechts neben
   der Liste angedockt (body.authed setzt app.js nach dem Login). */

@media (min-width: 640px) {
  body {
    /* Halbe Breite des Content-Blocks: nur App-Spalte = 300px,
       mit angedocktem Chat (unten) = 500px */
    --content-half: 300px;
    background: linear-gradient(90deg,
      #FFFFFF 0%,
      var(--edge) calc(50% - var(--content-half)),
      var(--edge) calc(50% + var(--content-half)),
      #FFFFFF 100%);
  }
  /* Login bleibt Brand-Grün — auch wenn ein Listen-Theme gecacht ist */
  body:not(.authed) { --edge: #F0F7ED; }

  /* Login in dieselbe Spalte wie die App */
  #login { width: 100%; max-width: 600px; margin: 0 auto; }

  /* Feiner Rahmen setzt die weiße Spalte von der Rand-Tönung ab */
  #app, #login { box-shadow: 0 0 0 1px rgba(var(--border-warm), 0.14); }

  /* Vollbild-Screens (Dashboard, Chat) ebenfalls im Handy-Format statt Full-Bleed */
  .dash-screen { left: calc(50% - 300px); right: auto; width: 600px; box-shadow: 0 0 0 1px rgba(var(--border-warm), 0.14); }

  /* Menü-Drawer klebt an der App-Spalte, nicht am Bildschirmrand. Ohne das
     visibility-Handling würde der translateX(100%)-Ruhezustand rechts neben
     der Spalte sichtbar herausragen. */
  .menu { right: calc(50% - 300px); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s; }
  .menu.visible { visibility: visible; transition: transform 0.25s ease; }
}

/* Seiten-Header/-Footer des PC-Rahmens: nur eingeloggt ab 1020px (unten) */
.pcframe { display: none; }

/* ─── Breite Screens: Chat dauerhaft neben der Liste (Flo 06.07.) ───────────
   Optik „zwei Handyscreens" (User-Feedback 08.07.): Lücke zwischen App- und
   Chat-Spalte, beide mit App-Rundung, Rand + Schatten; oben schmaler Seiten-
   Header (Logo + Wortmarke), unten Footer mit den Legal-Links. --dock-gap /
   --frame-head / --frame-foot stecken in allen Offsets der fixen Elemente
   (Nav, Verwaltung, Snackbar, Sheets), damit sie an den geschrumpften,
   verschobenen Spalten ausgerichtet bleiben. */
@media (min-width: 1020px) {
  body.authed {
    flex-direction: row; justify-content: center; gap: var(--dock-gap);
    --dock-gap: 28px;
    --frame-head: 52px;
    --frame-foot: 42px;
    --content-half: calc(500px + var(--dock-gap) / 2);
    /* Rand + weicher Schatten = „Handy liegt auf dem Tisch" */
    --phone-shadow: 0 0 0 1px rgba(var(--border-warm), 0.28), 0 18px 44px rgba(0,0,0,0.13);
  }
  /* overflow: clip statt hidden: schneidet an den runden Ecken, ohne einen
     Scroll-Container zu erzeugen (Sticky-Header bleibt sticky) */
  body.authed #app {
    margin: var(--frame-head) 0 var(--frame-foot);
    height: calc(100dvh - var(--frame-head) - var(--frame-foot));
    border-radius: var(--radius); overflow: clip;
    box-shadow: var(--phone-shadow);
  }
  body.authed #chatScreen {
    position: static;
    display: flex;
    width: 400px;
    flex-shrink: 0;
    margin: var(--frame-head) 0 var(--frame-foot);
    height: calc(100dvh - var(--frame-head) - var(--frame-foot));
    z-index: auto;
    box-shadow: var(--phone-shadow);
    border-radius: var(--radius);
    overflow: clip;
  }

  /* Seiten-Header (Logo + Wortmarke wie auf dem Login) und Footer (Legal-Links) */
  body.authed .pcframe { position: fixed; left: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 40; }
  body.authed .pcframe-head { top: 0; height: var(--frame-head); gap: 9px; }
  body.authed .pcframe-head img { width: 26px; height: auto; }
  body.authed .pcframe-head span { font-family: 'Fjalla One', sans-serif; font-weight: 400; font-size: 19px; letter-spacing: 0.035em; color: var(--gray-900); transform: scaleY(1.12); transform-origin: bottom; }
  body.authed .pcframe-foot { bottom: 0; height: var(--frame-foot); gap: 12px; font-size: 12.5px; color: var(--gray-400); }
  body.authed .pcframe-foot a { color: var(--gray-500); text-decoration: none; }
  body.authed .pcframe-foot a:hover { color: var(--gray-700); text-decoration: underline; }
  /* Kein "Zurück" im angedockten Chat (visibility statt display: Titel bleibt zentriert) */
  body.authed #chatScreen .dash-back { visibility: hidden; }
  /* Chat-Tab in der Bottom-Nav ist überflüssig, der Chat ist ja immer da —
     an seiner Stelle das Rezeptbuch, damit die Nav wieder 2 + [+] + 2 ist */
  body.authed .bnav-item[data-action="openChat"] { display: none; }
  body.authed .bnav-item[data-action="bnavList"] { display: flex; }

  /* Fixe Elemente an der App-Spalte ausrichten (das Paar App+Chat+Lücke ist
     zentriert, die App-Spalte liegt also 200px + halbe Lücke links der Mitte) */
  body.authed .dash-screen { left: calc(50% - 500px - var(--dock-gap) / 2); top: var(--frame-head); bottom: var(--frame-foot); border-radius: var(--radius); overflow: clip; box-shadow: var(--phone-shadow); }
  /* Nav-Insel exakt so hoch wie das Chat-Textfeld daneben (Flo 07.07.);
     hier ist Platz für die Labels, also wieder Icon + Text */
  body.authed .bnav { left: calc(50% - 486px - var(--dock-gap) / 2); right: calc(50% - 86px + var(--dock-gap) / 2); bottom: calc(12px + var(--safe-bottom) + var(--frame-foot)); min-height: 59px; }
  body.authed .bnav-item { padding: 3px 0; }
  body.authed .bnav-item svg { width: 21px; height: 21px; }
  body.authed .bnav-item span { display: block; }
  body.authed .snackbar { left: calc(50% - 200px - var(--dock-gap) / 2); bottom: calc(94px + var(--safe-bottom) + var(--frame-foot)); }
  /* Menü-Drawer endet an der runden rechten Kante der App-Spalte */
  body.authed .menu { right: calc(50% - 100px + var(--dock-gap) / 2); top: var(--frame-head); bottom: var(--frame-foot); border-radius: 0 var(--radius) var(--radius) 0; overflow: clip; }
  /* Bottom-Sheets über der App-Spalte zentrieren statt über dem ganzen Viewport;
     sie enden an der Unterkante des „Handys" und runden dort mit */
  body.authed .overlay { padding-right: calc(400px + var(--dock-gap)); padding-bottom: var(--frame-foot); }
  body.authed .overlay > * { border-radius: 22px; }
}