/* Media queries: mobil-layout og reduced motion
   Udtrukket fra index.html (linje 374-387 i den oprindelige <style>-blok).
   Raekkefoelgen af <link>-tags i index.html skal bevares - kaskaden afhaenger af den. */

/* ---------- responsive ---------- */
@media (max-width:880px){
  .app.is-on{grid-template-columns:1fr}
  .burger{display:grid}
  .side{position:fixed;top:0;left:0;height:100vh;width:284px;z-index:50;transform:translateX(-100%);
    transition:transform .22s ease}
  .app.nav-open .side{transform:none;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .main{grid-column:1}
  .view{padding:1.3rem 1.1rem 3rem;padding-top:3.6rem}
  .chat{grid-template-columns:1fr;height:auto}
  .channels{display:flex;gap:.4rem;overflow-x:auto}
  .ch{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}