body { display: flex; flex-direction: column; min-height: 100dvh; }
body > main { flex: 1 0 auto; }
footer.site-footer {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  width: 100%;
  margin: auto 0 0;
  padding: 18px max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border-top: 1px solid #35506e;
  background: #0b1826;
  color: #b6c7da;
  font-size: .75rem;
  line-height: 1.6;
}
.footer-clock { flex: 0 1 auto; min-width: 0; }
.footer-clock-label { display: block; color: #78d9c6; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.footer-clock time { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.footer-legal { flex: 1 1 300px; text-align: right; overflow-wrap: anywhere; }
.footer-legal p { margin: 0; }
.footer-legal a { color: #c4e3ff; text-underline-offset: 3px; }
.shell.login-shell { min-block-size: calc(100dvh - 64px - var(--footer-height, 112px)); }
.shell.chat-shell {
  flex: 0 0 auto;
  height: calc(100dvh - 64px - var(--footer-height, 112px));
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
}
@media (max-width: 860px) {
  .shell.chat-shell { height: calc(var(--chat-viewport, 100dvh) - var(--footer-height, 150px)); }
}
@media (max-width: 600px) {
  footer.site-footer { gap: 8px; padding-top: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .footer-clock, .footer-legal { flex: 1 1 100%; text-align: left; }
}