/*
 * PWA standalone/fullscreen layout override
 * Load this file after common.css and each page's CSS file.
 */

:root {
  --app-viewport-height: 100vh;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-page-pad-x: clamp(16px, 2.25vw, 32px);
  --app-page-pad-y: clamp(12px, 1.75vh, 24px);
}

/* dvh follows the visible area when a mobile browser/PWA chrome changes. */
@supports (height: 100dvh) {
  :root {
    --app-viewport-height: 100dvh;
  }
}

html,
body {
  width: 100%;
  min-height: var(--app-viewport-height);
  min-height: -webkit-fill-available;
}

/* The navigation occupies only its intrinsic height; the active screen owns the rest. */
body:has(#screen-home),
body:has(#screen-chat),
body:has(#screen-dashboard) {
  height: var(--app-viewport-height);
  min-height: var(--app-viewport-height);
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-inline: var(--app-safe-left) var(--app-safe-right);
}

body:has(#screen-home) > nav,
body:has(#screen-home) > header,
body:has(#screen-chat) > nav,
body:has(#screen-chat) > header,
body:has(#screen-dashboard) > nav,
body:has(#screen-dashboard) > header {
  flex: 0 0 auto;
}

#screen-home.active,
#screen-chat.active,
#screen-dashboard.active {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
}

/* ---------------- Home ---------------- */
#screen-home {
  align-items: stretch;
}

.home-inner {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  padding: var(--app-page-pad-y) var(--app-page-pad-x)
    calc(var(--app-page-pad-y) + var(--app-safe-bottom));
}

.home-top-controls {
  flex: 0 0 auto;
  margin-bottom: clamp(10px, 1.5vh, 20px);
}

.home-service-grid {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
}

.service-card {
  min-height: 0;
  padding: clamp(14px, 1.75vw, 24px);
  gap: clamp(8px, 1vh, 12px);
}

.service-img {
  width: clamp(96px, min(17vw, 25vh), 220px);
  height: clamp(96px, min(17vw, 25vh), 220px);
  max-height: 46%;
}

.service-card .s-name {
  font-size: clamp(24px, 2.55vw, calc(40px * var(--large-mode)));
}
.service-card .s-desc {
  font-size: clamp(18px, 2.1vw, calc(36px * var(--large-mode)));
}

/* ---------------- Chat ---------------- */
#screen-chat {
  /* Replaces the brittle calc(100vh - 80px). The flex page already excludes nav. */
  height: auto;
  min-height: 0;
}

.chat-dashboard-container {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  padding: var(--app-page-pad-y) var(--app-page-pad-x)
    calc(var(--app-page-pad-y) + var(--app-safe-bottom));
}

.chat-page-header {
  width: auto;
  flex: 0 0 auto;
  margin-bottom: clamp(10px, 1.5vh, 20px);
}

.chat-dashboard-grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: minmax(190px, 220px) minmax(240px, 300px) minmax(
      0,
      1fr
    );
  gap: clamp(12px, 1.5vw, 20px);
}

.chat-col-menu,
.chat-col-cards,
.chat-col-chatbot,
.chat-col-main {
  min-width: 0;
  min-height: 0;
  height: auto;
}

.service-menu-list,
.quick-cards-wrapper,
.cw-body,
.event-grid {
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.chat-window,
.event-list-window {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  /* The old -30px moved content outside its grid cell and created a blank strip. */
  transform: none;
}

.cw-header,
.cw-footer {
  flex: 0 0 auto;
}
.cw-body {
  flex: 1 1 auto;
}

/* ---------------- Dashboard ---------------- */
#screen-dashboard {
  min-height: 0;
}

.dashboard-body {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: var(--app-page-pad-y) var(--app-page-pad-x)
    calc(var(--app-page-pad-y) + var(--app-safe-bottom));
  gap: clamp(20px, 1vh, 30px);
}

.dash-row {
  min-width: 0;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

/* Let the main visual rows grow instead of leaving unused height beneath them. */
.dashboard-body > .dash-row-2,
.dashboard-body > .dash-row-4:last-child {
  flex: 1 1 0;
}

.dash-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.panel-zoom-modal {
  padding: max(16px, var(--app-safe-top)) max(16px, var(--app-safe-right))
    max(16px, var(--app-safe-bottom)) max(16px, var(--app-safe-left));
}

.panel-zoom-box {
  max-height: min(92dvh, calc(var(--app-viewport-height) - 32px));
}

/* ---------------- Width and short-height adaptations ---------------- */
@media (max-width: 980px) {
  .chat-dashboard-grid {
    grid-template-columns: minmax(170px, 0.8fr) minmax(210px, 1fr) minmax(
        0,
        1.5fr
      );
  }

  .dash-row-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body:has(#screen-home),
  body:has(#screen-chat),
  body:has(#screen-dashboard) {
    overflow: auto;
  }

  #screen-home.active,
  #screen-chat.active,
  #screen-dashboard.active {
    overflow: visible;
  }

  .home-top-controls {
    justify-content: stretch;
    gap: 8px;
  }
  .voice-experience-btn,
  .large-mode-btn {
    flex: 1 1 0;
    padding-inline: 12px;
    font-size: clamp(16px, 4vw, 22px);
  }
  .home-service-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .service-card {
    min-height: 220px;
  }

  .chat-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .chat-col-menu,
  .chat-col-cards {
    max-height: 42dvh;
  }
  .chat-window,
  .event-list-window {
    min-height: 60dvh;
  }

  .dash-row-3,
  .dash-row-2 {
    grid-template-columns: 1fr;
  }
}

/* A landscape phone or a short kiosk display needs less fixed decoration. */
@media (max-height: 700px) and (min-width: 701px) {
  .home-inner,
  .chat-dashboard-container,
  .dashboard-body {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .home-top-controls,
  .chat-page-header {
    margin-bottom: 8px;
  }
  .service-img {
    width: clamp(76px, 14vh, 150px);
    height: clamp(76px, 14vh, 150px);
  }
  .service-card .s-desc {
    display: none;
  }
  .quick-card {
    padding-block: 16px;
  }
  .cw-body {
    padding: 16px;
    gap: 12px;
  }
  .cw-footer {
    padding: 12px;
  }
}