/* 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;
  height: auto; /* let the legal footer sit below the app instead of squeezing it */
  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;
  flex: none;
  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; }
.app-body:not(.is-embed) .mvp__foot { display: block; max-width: 56rem; margin: 18px auto 24px; padding: 0 16px; font-size: .85rem; color: var(--ink-2); text-align: center; }
.mvp__foot p { margin: 6px 0; }
.mvp__foot a { color: var(--navy); }
.company--app { color: var(--ink-2); text-align: left; margin-top: 12px; }
.company--app a { color: var(--navy); }
.company--app strong { color: var(--ink); }

/* 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; }

/* AI tools tab */
.tools { padding: 10px 12px 16px; overflow-y: auto; height: 100%; box-sizing: border-box; }
.tools__pick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tools__pick .qchip { width: 100%; text-align: left; }
.tools__pick .qchip.is-on { background: var(--honey-2); }
.tools__form { display: flex; flex-direction: column; gap: 6px; }
.tools__lbl { font-family: var(--font-pixel); font-size: 11px; color: var(--ink-2); margin-top: 4px; }
.tools select, .tools textarea, .tools input[type="file"] {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 8px; background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
}
.tools textarea { resize: vertical; min-height: 64px; }
#tool-preview[hidden], .tools [hidden] { display: none !important; }
#tool-preview { max-width: 100%; max-height: 160px; margin-top: 6px; border: 2px solid var(--ink); object-fit: contain; align-self: flex-start; }
.tools__why, .tools__disc { font-size: .8rem; color: var(--ink-2); margin: 4px 0; }
.tools__out { margin-top: 10px; padding: 10px; background: var(--card); border: 2px solid var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; }
.tools__out.is-err { background: var(--tint-pink); }

.tools__acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tools__acts[hidden] { display: none; }
.tools__out.is-big { font-size: 1.5rem; line-height: 1.5; }
.tools__cnt { font-size: .75rem; color: var(--ink-2); text-align: right; margin: 0; }
.tools__go[disabled], #tool-go[disabled] { opacity: .6; cursor: wait; }