/* ==========================================================================
   SafeLine interactive demo - component styles
   Brand values come exclusively from ../shared/brand-tokens.css.
   FI-branded elements (verdict bubble, SafeLine avatar, suggestion chip)
   use --fi-* only, so Act 4's live re-brand is a variable swap.
   Mobile-first: designed at 375px, enhanced upward.
   ========================================================================== */

* { box-sizing: border-box; }

/* The hidden attribute must always win, even over display rules on classes
   (e.g. .suggestion { display: flex } must not resurrect a [hidden] element). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--flggd-font);
  font-weight: var(--flggd-weight-body);
  background: var(--flggd-surface);
  color: var(--flggd-text);
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.screen { animation: screen-in 0.35s ease both; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

h1, h2 { color: var(--flggd-ink); margin: 0 0 8px; }
h1 { font-weight: var(--flggd-weight-h1); font-size: 1.65rem; line-height: 1.2; }
h2 { font-weight: var(--flggd-weight-h2); font-size: 1.15rem; }

/* ---------- Buttons ---------- */
.btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--flggd-radius);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.98); }

.btn-continue {
  background: var(--flggd-cta);
  color: #fff;
  box-shadow: var(--flggd-shadow);
}
.btn-continue:hover { filter: brightness(0.95); }

.btn-ghost {
  background: transparent;
  color: var(--flggd-primary);
  border: 1.5px solid var(--flggd-primary);
}
.btn-ghost:hover { background: var(--flggd-ice); }

/* ---------- Opening screen ---------- */
.opening-header { text-align: center; margin-bottom: 24px; }

.flggd-mark {
  font-weight: 700;
  color: var(--flggd-ink);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.flggd-mark span { color: var(--flggd-primary); font-weight: 600; }

.opening-sub { margin: 0; font-size: 0.95rem; line-height: 1.5; }

.scam-cards { display: grid; gap: 12px; }

.scam-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  background: var(--flggd-surface-raised);
  border: 1.5px solid var(--flggd-line);
  border-radius: var(--flggd-radius);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--flggd-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.scam-card:hover:not(:disabled) {
  border-color: var(--flggd-primary);
  box-shadow: var(--flggd-shadow);
  transform: translateY(-1px);
}
.scam-card:disabled { opacity: 0.55; cursor: default; }

.scam-card .icon { font-size: 1.5rem; }
.scam-card .soon {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--flggd-muted);
  border: 1px solid var(--flggd-line);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ---------- Act 1: role tag ---------- */
.role-tag {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flggd-primary);
  margin: 0 0 16px;
}

/* ---------- Phone frame ---------- */
.phone {
  width: min(100%, 375px);
  margin: 0 auto;
  background: var(--flggd-ink);
  border-radius: 42px;
  padding: 10px;
  box-shadow: var(--flggd-shadow-lg);
}

.phone-screen {
  position: relative;
  background: #fff;
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 560px;
}

/* ---------- Messages app ---------- */
.msg-header {
  display: flex;
  align-items: center;
  padding: 14px 12px 10px;
  background: rgba(249, 250, 251, 0.96);
  border-bottom: 1px solid var(--flggd-line);
}

.msg-back {
  color: #0a84ff;
  font-size: 1.9rem;
  line-height: 1;
  padding: 0 8px;
}

.msg-contact-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-right: 40px; /* balance the back chevron */
}

.msg-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 700;
  background: #c7ccd4;
  color: #fff;
  transition: background 0.3s ease;
}
.msg-avatar.fi-branded { background: var(--fi-primary); color: var(--fi-primary-contrast); }

.msg-contact { font-size: 0.72rem; color: #3c3c43; }

.msg-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg-timestamp {
  text-align: center;
  font-size: 0.68rem;
  color: #8e8e93;
  margin: 4px 0 6px;
}

.bubble {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 18px;
  font-size: 0.88rem;
  line-height: 1.38;
  white-space: pre-line;
  overflow-wrap: break-word;
  animation: bubble-in 0.3s ease both;
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.bubble.incoming {
  align-self: flex-start;
  background: #e9e9eb;
  color: #111;
  border-bottom-left-radius: 5px;
}

.bubble.outgoing {
  align-self: flex-end;
  background: #0a84ff;
  color: #fff;
  border-bottom-right-radius: 5px;
}

.bubble .fwd-label {
  display: block;
  font-size: 0.7rem;
  opacity: 0.75;
  margin-bottom: 4px;
}

/* Long-pressable scam bubble */
.bubble.pressable {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.bubble.pressing {
  transform: scale(0.955);
  filter: brightness(0.96);
}

/* Select mode (step 3): checkmark beside the message */
.msg-thread.select-mode .bubble.incoming { margin-left: 34px; position: relative; }
.msg-thread.select-mode .bubble.incoming.selected::before {
  content: '\2713';
  position: absolute;
  left: -32px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0a84ff;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Verdict bubble - FI-branded via --fi-* tokens only */
.bubble.verdict {
  align-self: flex-start;
  background: var(--fi-primary-soft);
  border: 1.5px solid var(--fi-primary);
  color: var(--flggd-ink);
  border-bottom-left-radius: 5px;
}
.bubble.verdict .verdict-prefix { font-weight: 700; color: var(--fi-primary); }
.bubble.verdict .verdict-scam { font-weight: 700; color: var(--flggd-cta); }
.bubble.verdict a { color: var(--fi-primary); font-weight: 600; }
.bubble.verdict .verdict-footer {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--flggd-text);
}

.delivery-status {
  align-self: flex-end;
  font-size: 0.66rem;
  color: #8e8e93;
  margin: -4px 4px 0 0;
  animation: bubble-in 0.3s ease both;
}

/* Typing indicator */
.typing {
  align-self: flex-start;
  background: #e9e9eb;
  border-radius: 18px;
  border-bottom-left-radius: 5px;
  padding: 12px 15px;
  display: flex;
  gap: 4px;
  animation: bubble-in 0.25s ease both;
}
.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9a9aa0;
  animation: typing-dot 1.2s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Select-mode toolbar ---------- */
.select-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px 14px;
  border-top: 1px solid var(--flggd-line);
  background: rgba(249, 250, 251, 0.96);
}

.tool-btn {
  background: none;
  border: 0;
  color: #0a84ff;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}
.tool-btn svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.tool-btn:disabled { color: #c7c7cc; cursor: default; }

/* ---------- Context menu overlay (step 2) ----------
   The blur layer dims the thread behind it; the replica bubble and menu are
   children of the overlay, so they stay crisp ABOVE the blur (like real iOS).
   The replica is pinned to the original bubble's exact position by JS; the
   original is visibility-hidden underneath while the menu is open. */
.ctx-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(30, 58, 76, 0.18);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  animation: screen-in 0.2s ease both;
}

.bubble.ctx-hidden { visibility: hidden; }

.ctx-bubble {
  position: absolute;
  z-index: 2;
  padding: 10px 13px;
  border-radius: 18px;
  border-bottom-left-radius: 5px;
  background: #e9e9eb;
  color: #111;
  font-size: 0.88rem;
  line-height: 1.38;
  white-space: pre-line;
  overflow-wrap: break-word;
  box-shadow: var(--flggd-shadow-lg);
  transform-origin: left center;
  animation: ctx-pop 0.22s ease both;
}

@keyframes ctx-pop {
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}

.ctx-menu {
  position: absolute;
  z-index: 2;
  background: rgba(250, 250, 250, 0.97);
  border-radius: 14px;
  min-width: 210px;
  overflow: hidden;
  box-shadow: var(--flggd-shadow-lg);
  animation: screen-in 0.2s ease both;
}

.ctx-menu button {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: 0;
  border-bottom: 0.5px solid rgba(60, 60, 67, 0.2);
  font-family: var(--flggd-font);
  font-size: 0.95rem;
  color: #111;
  text-align: left;
  cursor: pointer;
}
.ctx-menu button:last-child { border-bottom: 0; }
.ctx-menu button:active { background: rgba(60, 60, 67, 0.08); }

/* ---------- Compose sheet (step 4) ---------- */
.compose-sheet {
  position: absolute;
  inset: 0;
  z-index: 45;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.compose-sheet.open { transform: translateY(0); }

.compose-header {
  display: flex;
  align-items: center;
  padding: 14px 14px 10px;
}
.compose-cancel {
  background: none;
  border: 0;
  color: #0a84ff;
  font-family: var(--flggd-font);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
}
.compose-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: #111;
  margin-right: 44px; /* balance Cancel */
}

.compose-to {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--flggd-line);
}
.compose-to > span:first-child { color: #8e8e93; font-size: 0.9rem; }

#composeToInput {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--flggd-font);
  font-size: 0.95rem;
  color: #111;
}

.recipient-pill {
  background: #0a84ff;
  color: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  animation: screen-in 0.2s ease both;
}

/* Autocomplete suggestion - FI-branded avatar */
.suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--flggd-line);
  font-family: var(--flggd-font);
  text-align: left;
  cursor: pointer;
  animation: screen-in 0.25s ease both;
}
.suggestion:active { background: var(--flggd-ice); }

.sugg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fi-primary);
  color: var(--fi-primary-contrast);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex: none;
}
.sugg-text { display: flex; flex-direction: column; gap: 1px; }
.sugg-text strong { font-size: 0.9rem; font-weight: 600; color: #111; }
.sugg-text small { font-size: 0.75rem; color: #8e8e93; }

.compose-body {
  margin-top: auto;
  padding: 10px 12px 14px;
}

.compose-field {
  position: relative;
  border: 1px solid var(--flggd-line);
  border-radius: 18px;
  padding: 10px 44px 10px 14px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #111;
  white-space: pre-line;
  max-height: 200px;
  overflow-y: auto;
}

.send-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: #34c759;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.send-btn:disabled { background: #c7c7cc; cursor: default; }

/* ---------- In-phone analysis report (modeled on the real api.flggd.com
   report; FI-branded accents via --fi-* tokens) ---------- */
.report-sheet {
  position: absolute;
  inset: 0;
  z-index: 48;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.report-sheet.open { transform: translateY(0); }

.report-bar {
  display: flex;
  align-items: center;
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--flggd-line);
  background: rgba(249, 250, 251, 0.96);
}
.report-back {
  background: none;
  border: 0;
  color: #0a84ff;
  font-family: var(--flggd-font);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  flex: 1;
  text-align: left;
}
.report-url {
  flex: 2;
  text-align: center;
  font-size: 0.72rem;
  color: var(--flggd-text);
  background: var(--flggd-surface);
  border-radius: 8px;
  padding: 4px 10px;
}
.report-bar-spacer { flex: 1; }

.report-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 22px;
}

.report-head { display: flex; align-items: center; gap: 10px; justify-content: center; }
.report-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--fi-primary);
  color: var(--fi-primary-contrast);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex: none;
}
.report-fi { font-size: 1rem; font-weight: 700; color: var(--fi-primary); }
.report-title { font-size: 0.75rem; color: var(--flggd-text); }

.report-chip {
  display: table;
  margin: 14px auto 0;
  background: var(--fi-primary-soft);
  color: var(--fi-primary);
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 12px;
}

.report-submitted {
  margin-top: 10px;
  background: var(--flggd-surface);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.7rem;
  color: var(--flggd-text);
  text-align: center;
}

.report-h {
  margin: 16px 0 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--flggd-ink);
}

.report-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #d9534a;
  background: #fdeceb;
  color: #a8341f;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.35;
}
.report-banner-icon { font-size: 1rem; }

.report-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.report-tile {
  background: var(--flggd-surface);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}
.report-tile-value { font-size: 1.05rem; font-weight: 700; color: var(--fi-primary); }
.report-tile-label { font-size: 0.62rem; color: var(--flggd-text); margin-top: 2px; }

.report-flags { display: grid; gap: 6px; }
.report-flag {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #fdf3f1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.74rem;
  color: var(--flggd-ink);
  line-height: 1.4;
}
.report-flag-icon { color: #d9534a; flex: none; }

.report-guidance {
  background: var(--flggd-surface);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 0.78rem;
  color: var(--flggd-ink);
  line-height: 1.5;
}

.report-original {
  background: var(--flggd-surface);
  border: 1px solid var(--flggd-line);
  border-radius: 10px;
  padding: 11px 13px;
  font-family: var(--flggd-font-mono);
  font-size: 0.68rem;
  color: var(--flggd-text);
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.report-footer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--flggd-line);
  text-align: center;
}
.report-powered { font-size: 0.72rem; font-weight: 600; color: var(--flggd-ink); }
.report-tagline { font-size: 0.64rem; color: var(--flggd-muted); margin-top: 2px; }

/* ---------- Coach marks ---------- */
.coach-tip {
  position: absolute;
  z-index: 70;
  background: var(--flggd-ink);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  max-width: 220px;
  box-shadow: var(--flggd-shadow);
  pointer-events: none;
  animation: screen-in 0.25s ease both;
}

.coach-pulse { position: relative; }
.coach-pulse::after {
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--flggd-primary);
  box-shadow: 0 0 0 0 rgba(29, 186, 180, 0.55);
  animation: coach-ping 1.6s infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes coach-ping {
  0%   { box-shadow: 0 0 0 0 rgba(29, 186, 180, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(29, 186, 180, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 186, 180, 0); }
}

/* Ghost tap shown during "Show me" autoplay */
.tap-ghost {
  position: absolute;
  z-index: 60;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(29, 186, 180, 0.35);
  border: 2px solid var(--flggd-primary);
  transform: translate(-50%, -50%) scale(0.4);
  animation: tap-ghost 0.45s ease-out forwards;
  pointer-events: none;
}

@keyframes tap-ghost {
  to { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}

/* "Show me" skip affordance */
.show-me {
  position: absolute;
  z-index: 55;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--flggd-ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--flggd-font);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--flggd-shadow-lg);
  animation: screen-in 0.3s ease both;
}
.show-me:hover { background: var(--flggd-navy); }

/* ---------- Act 2 - portal view ----------
   Portal branding uses --fi-* tokens ONLY (Act 4 re-brand = variable swap).
   Verdict badges are product status colors - semantic, not FI-branded. */
.act2-head { font-size: 1.4rem; text-align: center; }
.act2-sub { text-align: center; font-size: 0.92rem; line-height: 1.5; margin: 0 0 20px; }

.portal {
  background: var(--flggd-surface-raised);
  border-radius: var(--flggd-radius-lg);
  box-shadow: var(--flggd-shadow-lg);
  overflow: hidden;
  margin-bottom: 16px;
}

.portal-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--fi-primary);
  color: var(--fi-primary-contrast);
}

.portal-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--fi-primary-contrast);
  color: var(--fi-primary);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex: none;
}

.portal-brand { font-size: 0.85rem; font-weight: 600; }

.portal-nav {
  display: flex;
  gap: 2px;
  padding: 0 10px;
  border-bottom: 1px solid var(--flggd-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.portal-nav::-webkit-scrollbar { display: none; }

.portal-nav-item {
  padding: 10px 10px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--flggd-text);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.portal-nav-item.active {
  color: var(--fi-primary);
  border-bottom-color: var(--fi-primary);
}

/* App bar - hamburger · section title · logout (mirrors real portal) */
.portal-appbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--flggd-surface);
  border-bottom: 1px solid var(--flggd-line);
}
.appbar-menu svg, .appbar-logout svg {
  width: 18px;
  height: 18px;
  fill: var(--flggd-ink);
  display: block;
}
.appbar-title {
  flex: 1;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--flggd-ink);
}

.portal-view { padding: 14px; }

/* Dashboard view - welcome, 2×2 stat cards, client information */
.portal-welcome h2 { margin: 0; font-size: 1.15rem; }
.portal-welcome p { margin: 2px 0 0; font-size: 0.78rem; color: var(--flggd-text); }

.portal-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.stat-card {
  background: var(--flggd-surface);
  border: 1px solid var(--flggd-line);
  border-radius: var(--flggd-radius);
  padding: 12px;
}
.stat-icon svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.stat-value { font-size: 1.3rem; font-weight: 700; margin-top: 8px; }
.stat-label {
  font-size: 0.68rem;
  color: var(--flggd-text);
  margin-top: 2px;
  line-height: 1.3;
}
/* Product status colors per the real dashboard (not FI branding) */
.stat-optins   .stat-icon, .stat-optins   .stat-value { color: #2f54c9; }
.stat-active   .stat-icon, .stat-active   .stat-value { color: #2e7d32; }
.stat-optedout .stat-icon, .stat-optedout .stat-value { color: #e07a10; }
.stat-messages .stat-icon, .stat-messages .stat-value { color: #7b1fa2; }

.client-info {
  background: var(--flggd-surface);
  border: 1px solid var(--flggd-line);
  border-radius: var(--flggd-radius);
  padding: 12px 14px;
  margin-top: 12px;
}
.client-info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--flggd-ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--flggd-line);
}
.client-info-i { color: var(--fi-primary); }
.client-info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0 0;
  font-size: 0.76rem;
}
.ci-label { color: var(--flggd-text); }
.ci-value { font-weight: 700; color: var(--flggd-ink); }

/* Messages view - filter chips + message card list (mirrors real portal) */
.msg-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.msg-filter-label { font-size: 0.75rem; font-weight: 600; color: var(--flggd-ink); }
.msg-filter-chips { display: flex; gap: 6px; }

.filter-chip {
  border: 1px solid var(--flggd-line);
  background: var(--flggd-surface-raised);
  color: var(--flggd-ink);
  border-radius: 8px;
  padding: 4px 10px;
  font-family: var(--flggd-font);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.filter-chip.active {
  background: var(--fi-primary-soft);
  border-color: var(--fi-primary);
  color: var(--fi-primary);
}
.msg-count {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--flggd-text);
}

.portal-msg-list { display: grid; gap: 8px; }

.pmsg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--flggd-surface);
  border: 1px solid var(--flggd-line);
  border-radius: var(--flggd-radius);
  padding: 10px 12px;
  min-width: 0;      /* grid items default to min-width:auto - without this the
                        nowrap preview text stretches the card off-screen */
  overflow: hidden;
}
.pmsg-you {
  background: var(--fi-primary-soft);
  border-color: var(--fi-primary);
  animation: feed-in 0.5s ease both;
}

@keyframes feed-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.pmsg-dir {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 2px;
}
.pmsg-dir svg { width: 14px; height: 14px; fill: #fff; }
.pmsg-dir-in  { background: #2f6fd6; }
.pmsg-dir-out { background: #2e7d32; }

.pmsg-main { flex: 1; min-width: 0; }
.pmsg-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pmsg-num { font-size: 0.78rem; font-weight: 700; color: var(--flggd-ink); }
.pmsg-text {
  font-size: 0.74rem;
  color: var(--flggd-text);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmsg-time { font-size: 0.66rem; color: var(--flggd-muted); margin-top: 3px; }
.pmsg-chevron { color: var(--flggd-muted); font-size: 0.9rem; line-height: 1; margin-top: 6px; }

.you-chip {
  display: inline-block;
  background: var(--fi-primary);
  color: var(--fi-primary-contrast);
  font-size: 0.58rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
}

/* Verdict badges - uppercase pills like the real portal */
.badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 3px 8px;
  line-height: 1.25;
  margin-left: auto;
}
.badge-scam    { background: #fde8e4; color: #a8341f; }
.badge-safe    { background: #e3f2e8; color: #1f6b3f; }
.badge-unknown { background: #eceff3; color: #5c6b7a; }

/* Intelligence callout - Flggd voice, not FI-branded */
.callout {
  background: var(--flggd-ice);
  border-left: 3px solid var(--flggd-primary);
  border-radius: var(--flggd-radius);
  padding: 14px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--flggd-ink);
  line-height: 1.45;
  margin-bottom: 16px;
}

/* Soft email capture (dismissible, non-blocking) */
.capture-card {
  position: relative;
  background: var(--flggd-surface-raised);
  border-radius: var(--flggd-radius-lg);
  box-shadow: var(--flggd-shadow);
  padding: 20px;
  margin-bottom: 16px;
}
.capture-card p { margin: 0 0 14px; font-size: 0.9rem; line-height: 1.5; }

#captureForm { display: flex; flex-direction: column; gap: 10px; }

#captureEmail {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--flggd-line);
  border-radius: var(--flggd-radius);
  font-family: var(--flggd-font);
  font-size: 0.95rem;
  color: var(--flggd-ink);
  outline: none;
}
#captureEmail:focus { border-color: var(--flggd-primary); }
#captureEmail::placeholder { color: var(--flggd-muted); }

.btn-capture {
  background: var(--flggd-primary);
  color: #fff;
}
.btn-capture:hover { background: var(--flggd-teal-dark); }

.capture-dismiss {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: 0;
  color: var(--flggd-muted);
  font-family: var(--flggd-font);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.capture-dismiss:hover { color: var(--flggd-text); }

.capture-success code {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--flggd-ice);
  border-radius: 8px;
  font-family: var(--flggd-font-mono);
  font-size: 0.8rem;
  color: var(--flggd-ink);
  overflow-wrap: anywhere;
}

/* ---------- Prompt & caption cards ---------- */
.prompt-card, .caption-card, .placeholder-card {
  background: var(--flggd-surface-raised);
  border-radius: var(--flggd-radius-lg);
  box-shadow: var(--flggd-shadow);
  padding: 20px;
  margin: 20px auto 0;
  width: min(100%, 375px);
  animation: screen-in 0.35s ease both;
}

.prompt-card p, .placeholder-card p {
  margin: 0 0 4px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.placeholder-card p { margin-bottom: 16px; }

.caption-card { text-align: center; }
.caption-line {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--flggd-ink);
  line-height: 1.45;
  margin: 0 0 16px;
}

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  #app { max-width: 560px; padding-top: 48px; }
  h1 { font-size: 2rem; }
  .phone-screen { height: 600px; }
}