/* Ask GodGom MVP — layout on top of the homepage design system (../assets/css/style.css) */

html, body { height: 100%; }
.app-body {
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh; min-height: 100dvh;
  margin: 0;
  padding: 0; /* style.css pads <body> under 760px for the homepage bottom nav; the app has none */
}
.mvp {
  width: 100%; max-width: 480px;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
.mvp__bar { padding-top: max(8px, env(safe-area-inset-top)); }
.mvp__home { display: inline-flex; }
.mvp__home img { width: 32px; height: 32px; image-rendering: pixelated; }
.app__badge.is-live { background: var(--sd-green); color: var(--card); }
.app__badge.is-demo { background: var(--honey-2); color: var(--ink); }
.mvp .app__tabs { padding-bottom: env(safe-area-inset-bottom); }
.mvp .app__tabs button { min-height: 52px; font-size: 12px; }
.mvp .chat__form { padding-bottom: 10px; }
.mvp .chat__form input { height: 44px; font-size: 1rem; }
.mvp .chat__form .px-btn--xs { min-height: 44px; }
.mvp .msg { font-size: 1rem; }
.mvp .chat { scroll-behavior: auto; } /* app.js follows the stream itself; smooth scroll would lag behind it */
.msg__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg--note { margin: 8px auto; max-width: 92%; padding: 6px 10px; text-align: center; font-family: var(--font-pixel); font-size: 11px; color: var(--ink-2); background: var(--paper-2); }
.msg__ask {
  display: inline-flex; margin-top: 8px; padding: 6px 8px; border: 0; cursor: pointer;
  background: var(--honey-2); font-family: var(--font-pixel); font-size: 11px;
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
}

/* SOS strip */
.sos {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; overflow-x: auto; scrollbar-width: none;
  background: var(--tint-pink);
  box-shadow: inset 0 3px 0 0 var(--ink);
}
.sos::-webkit-scrollbar { display: none; }
.sos__label { font-family: var(--font-pixel); font-size: 11px; color: var(--sd-red); margin-right: 2px; }
.sos a {
  flex: none; display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 8px; background: var(--card); text-decoration: none;
  font-family: var(--font-pixel); font-size: 13px; color: var(--ink);
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
}
.sos a small { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--ink-2); }

.mvp .cards { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 420px) { .mvp .cards { gap: 16px; } }
.sheet .sheet__ask { margin: 16px 0 4px 4px; }

/* suggestion chips while GodGom is answering (aria-disabled keeps them focusable) */
.qchip[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.qchip[aria-disabled="true"]:hover { transform: none; background: var(--card); }

.mvp__foot { display: none; }

/* desktop: present the app as a device on the dotted page
   (not on phones in landscape: they are wide but too short for the frame) */
@media (min-width: 640px) and (min-height: 560px) {
  .app-body:not(.is-embed) { justify-content: center; padding: 24px 16px 12px; }
  .app-body:not(.is-embed) .mvp {
    height: min(860px, calc(100dvh - 72px));
    box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink);
    filter: drop-shadow(6px 6px 0 var(--ink));
  }
  .app-body:not(.is-embed) .mvp__foot {
    display: block; margin-top: 18px; text-align: center;
    font-size: .9rem; color: var(--ink-2);
  }
}

/* embedded in the homepage console */
.is-embed { background: var(--paper); }
.is-embed .mvp { max-width: none; }
.is-embed .mvp__bar { padding-top: 8px; }

/* hidden toast must not peek above the tab bar */
.toast { visibility: hidden; transition: transform 320ms var(--ease-pop), visibility 0s linear 320ms; }
.toast.is-on { visibility: visible; transition: transform 320ms var(--ease-pop), visibility 0s; }

/* width/height attributes must not override the aspect-ratio crops */
.card-tile img, .place-row img, .sheet__img { height: auto; }
.place-row img { height: 72px; }