/* ==========================================================================
   App shell: navigation rail (desktop) / tab bar (mobile), page scaffolding
   ========================================================================== */

.shell { position: relative; z-index: 1; display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100dvh; }

.nav {
  position: sticky; top: 0; z-index: 60;
  height: 100dvh;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 0;
  background: var(--surface-1);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.brand {
  width: 46px; height: 46px; margin-bottom: 18px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent));
  color: var(--accent-text); font-weight: 800; font-size: 18px; letter-spacing: -.04em;
  box-shadow: var(--glow);
  transition: transform var(--t-slow) var(--spring);
}
.brand:hover { transform: rotate(-10deg) scale(1.08); text-decoration: none; }
.nav-list { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nav-item {
  position: relative;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 15px; color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-item .i { width: 23px; height: 23px; transition: transform var(--t) var(--spring); }
.nav-item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.nav-item:hover .i { transform: scale(1.1); }
.nav-item:active .i { transform: scale(.9); }
.nav-item.active { background: var(--accent-weak); color: var(--accent); }
.nav-item.active::before {
  content: ""; position: absolute; left: -14px; top: 12px; bottom: 12px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--accent);
  animation: grow-y .35s var(--spring);
}
@keyframes grow-y { from { transform: scaleY(0); } }
.nav-item .label { display: none; }
.nav-item .count { position: absolute; top: 3px; right: 1px; height: 18px; min-width: 18px; font-size: 10.5px; box-shadow: 0 0 0 2px var(--card); }
.nav-spacer { flex: 1; }
.nav-me { border-radius: 50%; padding: 3px; transition: box-shadow var(--t); }
.nav-me.active, .nav-me:hover { box-shadow: 0 0 0 2px var(--accent); }

.main { position: relative; min-width: 0; }
.page { max-width: 1120px; margin: 0 auto; padding: 36px 32px 64px; }
.page.narrow { max-width: 760px; }
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); margin-top: 4px; font-size: 14px; }
.grid { display: grid; gap: 18px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* client-side page transitions (core/router.js) */
.main.leaving > * { opacity: 0; transform: translateY(8px) scale(.995); transition: opacity .14s ease, transform .14s ease; pointer-events: none; }
.main.entering > * { animation: page-in .42s var(--ease-out) both; }
.main.entering > .messenger { animation-name: fade-in; animation-duration: .25s; }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } }
.route-bar { position: fixed; z-index: 1001; top: 0; left: 0; height: 3px; width: 0; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: var(--glow); opacity: 0; pointer-events: none; }
.route-bar.run { opacity: 1; width: 80%; transition: width 6s cubic-bezier(.1, .7, .1, 1); }
.route-bar.done { opacity: 0; width: 100%; transition: width .2s ease, opacity .3s ease .15s; }

/* connection indicator */
.net {
  position: fixed; z-index: 950; left: 50%; top: 12px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--popover); border: 1px solid var(--line); box-shadow: var(--shadow-md);
  font-size: 13px; font-weight: 600;
  transform: translate(-50%, -80px); transition: transform var(--t-slow) var(--spring);
}
.net.on { transform: translate(-50%, 0); }
.net .spinner { width: 15px; height: 15px; border-width: 2px; }

@media (max-width: 1100px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- mobile: bottom tab bar ---------- */
@media (max-width: 767px) {
  .shell { display: block; }
  .nav {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    height: calc(var(--tab-h) + var(--safe-b));
    flex-direction: row; justify-content: space-around; gap: 0;
    padding: 0 6px var(--safe-b);
    border-right: 0; border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 88%, transparent);
  }
  .brand, .nav-spacer { display: none; }
  .nav-list { display: contents; }
  .nav-item, .nav-me {
    flex: 1; width: auto; height: var(--tab-h); padding: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px;
    border-radius: 0; background: none !important; box-shadow: none !important;
  }
  .nav-item .label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0; }
  .nav-item.active::before { left: 30%; right: 30%; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; animation: grow-x .35s var(--spring); }
  @keyframes grow-x { from { transform: scaleX(0); } }
  .nav-item.active .i { transform: translateY(-1px) scale(1.06); }
  .nav-item .count { top: 6px; right: calc(50% - 22px); }
  .nav-me .av { --s: 26px !important; }
  [data-tip]::after { display: none; }
  .page { padding: 20px 16px calc(var(--tab-h) + var(--safe-b) + 28px); }
  .page-head { margin-bottom: 18px; }
  h1 { font-size: 24px; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: minmax(0, 1fr); }
  .grid.c4.keep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { padding: 18px; border-radius: var(--r-lg); }
  .input, .select, textarea.input { font-size: 16px; } /* stops iOS zoom on focus */
  #toasts { top: auto; right: 12px; left: 12px; bottom: calc(var(--tab-h) + var(--safe-b) + 12px); width: auto; }
  body.in-chat #toasts { bottom: 90px; }
}