/* IN-APP MESSAGES from Signal (Signal's prompt, 15 Sep 2026): a pop-up card and a slim banner, rendered by
   src/js/messages.js from one read. The card is Bullet's own (.dcard's white, soft elevation and room), the
   banner is the dark bar. Tokens only. */

/* the pop-up: bottom right on desktop, clear of the corner face; a bottom sheet on a phone */
.msg-pop {
  position: fixed;
  right: 24px;
  bottom: 96px;                          /* clears the Mariana corner (32px + 48px), the way the chat does */
  width: min(400px, calc(100vw - 48px));
  box-sizing: border-box;
  z-index: 9985;                         /* under drawers (9990); it never shows while one is open anyway */
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid rgba(17, 17, 17, 0.04);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.032), 0 12px 32px -18px rgba(17, 17, 17, 0.11), 0 24px 64px -24px rgba(17, 17, 17, 0.18);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: msgPopIn .5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes msgPopIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.msg-pop.is-out {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s cubic-bezier(0.32, 0, 0.1, 1), transform .22s cubic-bezier(0.32, 0, 0.1, 1);
  pointer-events: none;
}
.msg-pop__x {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; padding: 0;
  border: none; border-radius: 50%; background: none; color: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.msg-pop__x:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.msg-pop__x svg { width: 18px; height: 18px; }
.msg-pop__from { font-size: var(--text-sm); color: var(--color-text-muted); padding-right: 36px; }
.msg-pop__from strong { color: var(--color-text); font-weight: var(--weight-medium); }
.msg-pop__title { margin: 2px 0 0; font-size: var(--text-section, 20px); line-height: 1.3; font-weight: var(--weight-medium); }
.msg-pop__body { font-size: var(--text-base); line-height: 1.5; color: var(--color-text-muted); }
.msg-pop__body p { margin: 0 0 8px; }
.msg-pop__body p:last-child { margin-bottom: 0; }
.msg-pop__body ul { margin: 0 0 8px; padding-left: 20px; }
.msg-pop__body strong { color: var(--color-text); font-weight: var(--weight-medium); }
.msg-pop__body a { color: var(--color-text); }
.msg-pop__acts { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.msg-pop__cta { border-radius: var(--radius-full); padding-left: 18px; padding-right: 18px; }
.msg-pop__later { background: none; border: none; padding: 0; font: inherit; font-size: var(--text-base); color: var(--color-text-muted); cursor: pointer; }
.msg-pop__later:hover { color: var(--color-text); }
@media (max-width: 640px) {
  .msg-pop { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 24px 22px calc(22px + env(safe-area-inset-bottom, 0px)); }
}

/* THE PMF QUESTION (30 Sep 2026, js/pmf.js): the same card, carrying the four answers as the app's .radio rows and,
   after a pick, the three optional questions. Tall with the words open, so it scrolls inside itself. */
.msg-pop--pmf { max-height: calc(100vh - 120px); overflow-y: auto; }
.pmf__picks { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.pmf__words { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; padding-top: 16px; border-top: var(--border-width) solid var(--color-border); }
.pmf__words[hidden] { display: none; }
.pmf__thanks { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--color-text-muted); }
.pmf__words .field__label { line-height: 1.4; }
.pmf__words textarea.input { min-height: 64px; resize: vertical; }
@media (max-width: 640px) {
  .msg-pop--pmf { max-height: calc(100vh - 40px); }
}

/* the banner: a slim dark bar at the top of the page, where the ladder's slim bar goes */
.msg-banner {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 8px 14px;
  min-height: 44px;
  margin: 12px 0 0;
  padding: 8px 12px 8px 16px;
  background: var(--color-text);
  color: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: 1.35;
}
.msg-banner__text { flex: 1 1 auto; min-width: 0; }
.msg-banner__go { color: inherit; font-weight: var(--weight-bold); text-decoration: none; white-space: nowrap; }
.msg-banner__go:hover { text-decoration: underline; }
.msg-banner__x {
  flex: none; width: 28px; height: 28px; padding: 0;
  border: none; border-radius: 50%; background: none; color: inherit; opacity: .8;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.msg-banner__x:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.msg-banner__x svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .msg-banner { flex-wrap: wrap; margin-top: 84px; }   /* below the corner row (logout, profile chip), the way the Ask dock sits on a phone */
  .msg-banner__text { flex-basis: calc(100% - 42px); }
}

@media (prefers-reduced-motion: reduce) {
  .msg-pop { animation: none; }
  .msg-pop.is-out { transition: none; }
}