/* ═══════════════════════════════════════════════════════════════
   GOOSE PUBLIC POPUP — styles for landing/goose-popup.js

   Split out of App/css/landing-index.css so BOTH surfaces that mount the
   popup load the same rules from one file rather than duplicating them:
     - the marketing landing page (/)         -> landing/index.html
     - the NVIDIA Inception deck (/nvidia)    -> landing/nvda-deck/nvda-deck.html
   The deck cannot simply import landing-index.css: that file styles the
   whole landing page and would fight nvda-deck.css for the same elements.
   ═══════════════════════════════════════════════════════════════ */

#goose-pop-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .26s cubic-bezier(.16,1,.3,1),
              visibility 0s linear .26s;
}
#goose-pop-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .26s cubic-bezier(.16,1,.3,1),
              visibility 0s linear 0s;
}
#goose-pop-backdrop.is-reduced {
  transition: opacity .12s linear,
              visibility 0s linear .12s;
}
#goose-pop-backdrop.is-reduced.is-open {
  transition: opacity .12s linear,
              visibility 0s linear 0s;
}

#goose-pop-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(640px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 64px));
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  z-index: 201;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translate(-50%, -50%) translateY(8px) scale(.98);
  transition: opacity .26s cubic-bezier(.16,1,.3,1),
              transform .26s cubic-bezier(.16,1,.3,1),
              visibility 0s linear .26s;
}
#goose-pop-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translate(-50%, -50%) translateY(0) scale(1);
  transition: opacity .26s cubic-bezier(.16,1,.3,1),
              transform .26s cubic-bezier(.16,1,.3,1),
              visibility 0s linear 0s;
}
#goose-pop-modal.is-reduced {
  transition: opacity .12s linear,
              visibility 0s linear .12s;
  transform: translate(-50%, -50%);
}
#goose-pop-modal.is-reduced.is-open {
  transform: translate(-50%, -50%);
  transition: opacity .12s linear,
              visibility 0s linear 0s;
}

#goose-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px;
  min-height: 56px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
#goose-pop-head-l { display: flex; align-items: center; gap: 8px; }
#goose-pop-eyebrow {
  font: 600 14px/1 var(--f-sans, inherit);
  color: var(--ink);
  padding: 0 4px;
  display: inline-flex; align-items: center;
}
.goose-pop-mark { width: 24px; height: 24px; color: var(--gold); }
/* Text fallback for a page with no brand.js painter (see goose-popup.js):
   drop the icon box sizing so the word sits on the baseline normally. */
.goose-pop-mark.is-text { width: auto; height: auto; color: var(--ink); }
#goose-pop-close {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
#goose-pop-close:hover { color: var(--ink); background: var(--surface-2); }

#goose-pop-feed {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 28px;
  min-height: 240px;
}

#goose-pop-feed .gp-eyebrow {
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 16px 0 6px;
}
#goose-pop-feed > .gp-eyebrow:first-child { margin-top: 0; }

.gp-msg {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 18px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.003em;
  max-width: 82%;
  width: fit-content;
  margin-right: auto;
  margin-left: 0;
  margin-bottom: 4px;
}
.gp-msg p { margin: 0 0 12px; }
.gp-msg p:last-child { margin-bottom: 0; }
.gp-msg > :first-child { margin-top: 0; }

/* Markdown block rhythm inside bubbles (mirrors app-shell/chat-panels.css's
   s122 fix -- the bubble must style lists/headings, not only <p>, or a reply
   mixing bullets with headings runs together with no separation). */
.gp-msg ul, .gp-msg ol { margin: 0 0 12px; padding-left: 20px; }
.gp-msg ul:last-child, .gp-msg ol:last-child { margin-bottom: 0; }
.gp-msg li { margin: 0 0 5px; }
.gp-msg li:last-child { margin-bottom: 0; }
.gp-msg li br + strong { display: inline-block; margin-top: 12px; }
.gp-msg h1, .gp-msg h2, .gp-msg h3,
.gp-msg h4, .gp-msg h5, .gp-msg h6 {
  margin: 16px 0 8px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.gp-msg code {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--gold);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  padding: 1px 5px;
  border-radius: 4px;
}

.gp-msg.gp-you {
  background: var(--gold-wash);
  border: 1px solid var(--gold-line);
  margin-left: auto;
  margin-right: 0;
}

#goose-pop-feed .gp-eyebrow.gp-you-eyebrow { text-align: right; }

#goose-pop-typing { display: inline-flex; gap: 4px; padding: 6px 2px; }
#goose-pop-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: goosePopTyping 1.2s infinite ease-in-out;
}
#goose-pop-typing span:nth-child(2) { animation-delay: .15s; }
#goose-pop-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes goosePopTyping {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

#goose-pop-input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
}
#goose-pop-textarea {
  flex: 1;
  resize: none;
  max-height: 120px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink);
  font: 14px/1.4 inherit;
}
#goose-pop-textarea:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
#goose-pop-send {
  background: var(--gold);
  color: var(--gold-ink, #1a1200);
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font: 600 13px/1 inherit;
  cursor: pointer;
  flex-shrink: 0;
}
#goose-pop-send:disabled { opacity: .5; cursor: default; }
#goose-pop-error {
  padding: 0 22px 12px;
  color: var(--down, #d64545);
  font-size: 13px;
}

/* Mobile: near-full-height bottom sheet, not a centred modal (spec §6.4). */
@media (max-width: 640px) {
  #goose-pop-modal {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 24px);
    height: calc(100vh - 24px);
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #goose-pop-modal.is-open { transform: translateY(0); }
  #goose-pop-modal.is-reduced { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #goose-pop-backdrop { transition: opacity .12s linear; }
  #goose-pop-modal {
    transition: opacity .12s linear;
    transform: translate(-50%, -50%);
  }
}