/* =========================================================================
   SilverKey showcase shell — glue between the shared brand chrome
   (wwwroot/shared-ui.js: <sk-header>/<sk-footer>/<sk-bottom-nav>/<sk-modal>)
   and ClawCalendar's full-bleed "Tide Table" app.

   Loaded only on full-bleed pages, and every rule is scoped to body.sk-shell
   so /Agents and /Privacy keep the plain Bootstrap layout untouched.

   Do not edit wwwroot/shared-ui.js — it is a verbatim copy of the file every
   other demo serves, and that is what keeps the chrome pixel-identical.
   ========================================================================= */

:root {
    --sk-nav-h: 54px;    /* fixed bottom nav; matches body padding-bottom */
    /* 14px x2 padding + the 49px "Contact Us" pill, which is the tallest item in
       the bar (the 42px logo is not). Measured against the live demos; sk-shell.js
       remeasures at runtime, so this only has to be right for the first paint. */
    --sk-header-h: 77px;
}
@media (max-width: 720px) {
    /* below 720px the bar drops to 12px padding and the pill shrinks, so the
       42px logo becomes the tallest item: 42 + 24 = 66px */
    :root { --sk-header-h: 66px; }
}

/* The same body box every other demo uses. The class outranks site.css's
   `body { margin-bottom: 60px }`, which would otherwise pad below the nav. */
body.sk-shell {
    margin: 0;
    padding-bottom: var(--sk-nav-h);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* line-height is inherited and DOES cross the shadow boundary: Bootstrap's
   reboot sets `body { line-height: 1.5 }`, which would stretch the footer's
   four stacked text blocks ~20px taller than on the Bootstrap-free demos.
   The reference pages inherit `normal`, so hand the components that. */
body.sk-shell sk-header,
body.sk-shell sk-footer,
body.sk-shell sk-bottom-nav,
body.sk-shell sk-modal {
    line-height: normal;
    font-size: 16px;
}

/* The app fills the viewport between the header and the bottom nav, so the
   demo reads whole above the fold; sk-footer sits below it, one scroll away. */
body.sk-shell .tt-app {
    flex: none;
    height: calc(100dvh - var(--sk-header-h) - var(--sk-nav-h));
}

/* Lift the app's own fixed furniture clear of the bottom nav. */
body.sk-shell .tt-chat-fab,
body.sk-shell .tt-toast-host {
    bottom: calc(1rem + var(--sk-nav-h));
}

@media (max-width: 900px) {
    /* the chat dock becomes a slide-in sheet — sit it on top of the nav */
    body.sk-shell .tt-chat { inset: auto 0 var(--sk-nav-h) 0; }
}