/* MAYUMA CHAT Web-Client – App-Hülle: Rail, Bottom-Navigation, Liste + Inhalt (eigener Code).
 * Telefon < 720 px: Bottom-Navigation (5 Tabs). Tablet 720–1099 px: schmale Rail. Desktop ≥ 1100 px: breite Rail.
 */
.shell { display: flex; height: 100dvh; width: 100%; overflow: hidden; background: var(--bg); }
.shell-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.panes { flex: 1 1 auto; min-height: 0; display: flex; }
.pane-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.pane-main:focus-visible { outline-offset: -3px; }
.pane-list { flex: 0 0 var(--list-w); width: var(--list-w); min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-inline-end: 1px solid var(--divider); background: var(--surface); }
.net-banner { flex: none; padding: var(--space-2) var(--space-3) 0; }
.net-reconnect { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-2); padding: 0 var(--space-2); }

/* Ansicht */
.view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; background: var(--bg); }
.view-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.view-pad { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); max-width: 46rem; width: 100%; margin: 0 auto; }
.view-deco { background-image: var(--deco-band); background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; }

/* Bottom-Navigation (Telefon) */
.bottom-nav { display: none; }
.rail { display: none; }
.shell[data-chrome="app"][data-layout="phone"] { flex-direction: column; }
.shell[data-chrome="app"][data-layout="phone"] .bottom-nav {
  display: flex; flex: none; align-items: stretch; justify-content: space-around; gap: var(--space-1);
  min-height: var(--nav-h); padding: 6px var(--space-2) max(env(safe-area-inset-bottom), 6px);
  background: var(--nav-bg); border-top: 1px solid var(--divider); position: relative; z-index: 4;
}
.shell[data-chrome="app"][data-layout="phone"][data-nav="hidden"] .bottom-nav { display: none; }
.bn-item {
  flex: 1 1 0; min-width: 0; min-height: var(--touch); position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 4px 2px; border-radius: var(--radius-m);
  color: var(--nav-text); text-decoration: none; font-size: var(--fs-xs); font-weight: var(--fw-medium);
}
.bn-item svg { width: 1.5rem; height: 1.5rem; padding: 3px 14px; box-sizing: content-box; border-radius: var(--radius-pill); }
.bn-item .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-item.active { color: var(--nav-active); font-weight: var(--fw-bold); }
.bn-item.active svg { background: var(--primary-soft); }
.bn-item .badge { position: absolute; top: 2px; inset-inline-start: calc(50% + 6px); }
html[data-theme="senior"] .bn-item { font-size: .875rem; }
html[data-theme="senior"] .bn-item svg { width: 1.75rem; height: 1.75rem; }
html[data-font-scale="1.75"] .bn-item .nav-label, html[data-font-scale="2"] .bn-item .nav-label { font-size: .7rem; }

/* Rail (Tablet/Desktop) */
.shell[data-chrome="app"]:not([data-layout="phone"]) .rail {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1);
  flex: 0 0 var(--rail-w-narrow); width: var(--rail-w-narrow);
  padding: var(--space-3) var(--space-2); background: var(--rail-bg); color: var(--rail-text);
  overflow-y: auto; overflow-x: hidden; z-index: 5;
}
.shell[data-layout="desktop"] .rail { flex-basis: var(--rail-w-wide) !important; width: var(--rail-w-wide) !important; padding: var(--space-4) var(--space-3); }
.rail-items { display: flex; flex-direction: column; gap: var(--space-1); }
.rail-spacer { flex: 1 1 auto; }
.rail-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-1) var(--space-4); color: #FFFFFF; text-decoration: none; font-weight: 800; letter-spacing: .04em; }
.brand-mark { width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; border-radius: var(--radius-m); background: var(--rail-active-bg); color: var(--rail-active-text); font-weight: 800; }
.rail-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 3.25rem; padding: 6px 4px; border-radius: var(--radius-m);
  color: var(--rail-text); text-decoration: none; font-size: .6875rem; font-weight: var(--fw-medium); text-align: center;
}
.rail-item .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item:hover { background: color-mix(in srgb, var(--rail-text) 12%, transparent); }
.rail-item.active { background: var(--rail-active-bg); color: var(--rail-active-text); font-weight: var(--fw-bold); }
.rail-item .badge { position: absolute; top: 4px; inset-inline-end: 8px; }
.rail .brand-text { display: none; }
.rail-item:focus-visible, .rail-brand:focus-visible { outline-color: #FFFFFF; }
.shell[data-layout="desktop"] .rail-item { flex-direction: row; justify-content: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--fs-m); text-align: start; }
.shell[data-layout="desktop"] .rail-item .badge { position: static; margin-inline-start: auto; }
.shell[data-layout="desktop"] .rail .brand-text { display: inline; }
.rail-me .avatar { border: 2px solid var(--rail-text); }

/* Ohne App-Hülle (Onboarding, Anmeldung): volle Fläche */
.shell[data-chrome="bare"] .pane-list { display: none; }

/* Liste + Inhalt erst ab Tablet */
.shell[data-layout="phone"] .pane-list { display: none !important; }
.shell[data-layout="tablet"] .pane-list { flex-basis: 18rem; width: 18rem; }
.pane-list > .view { background: var(--surface); }