/* Pond Ai chat. Uses the site's dark palette; settings and paywall styles come from odds-builder.css. */
.pa-shell { max-width: 880px; margin: 0 auto; padding: 18px 16px 0; color: var(--ink, #f4fbff); font-family: var(--sp-body, "Manrope", system-ui, sans-serif); box-sizing: border-box; }
.pa-shell *, .pa-shell *::before, .pa-shell *::after { box-sizing: border-box; }
.pa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.pa-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line, #24485f); border-radius: 18px; background: linear-gradient(135deg, rgba(22,52,79,.95), rgba(11,31,49,.95)); }
.pa-avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: radial-gradient(circle at 30% 25%, #8ff3ee, #168bb7 55%, #2742a3); color: #032735; font-size: 22px; font-weight: 900; box-shadow: 0 6px 18px rgba(22,139,183,.35); }
.pa-avatar-sm { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; box-shadow: none; }
.pa-title { flex: 1; min-width: 0; }
.pa-title h1 { margin: 0; font: 700 20px/1.2 var(--sp-display, "Space Grotesk", system-ui); display: flex; align-items: center; gap: 8px; }
.pa-title p { margin: 2px 0 0; color: #9db7c8; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-actions { display: flex; gap: 6px; }
.pa-actions button { padding: 8px 12px; border: 1px solid var(--line, #24485f); border-radius: 10px; background: transparent; color: #c9dbe7; font: 700 13px/1 var(--sp-body, system-ui); cursor: pointer; }
.pa-actions button:hover, .pa-actions button[aria-expanded="true"] { border-color: #69e1dc; color: #fff; }
.pa-actions .pa-clear b { font-weight: 700; }
.pa-actions .pa-clear.is-armed { border-color: #ff6b6b; background: rgba(255,107,107,.14); color: #ffd6d6; }
.pa-cleared { margin: 0 auto 8px; padding: 6px 12px; width: fit-content; border-radius: 999px; background: rgba(105,225,220,.12); color: #69e1dc; font-size: 13px; font-weight: 700; }

.pa-settings { margin-top: 12px; padding: 16px; border: 1px solid var(--line, #24485f); border-radius: 18px; background: rgba(13,34,53,.96); }
.pa-settings .ob-tune { margin: 0; padding: 0; border: 0; }
.pa-understood { margin: 0 0 4px; color: #69e1dc; font-size: 13px; font-weight: 700; }
.pa-settings-foot { display: flex; gap: 8px; margin-top: 14px; }
.pa-apply { flex: 1; padding: 12px 16px; border: 0; border-radius: 12px; background: #f5b54a; color: #2a1d05; font: 800 15px/1 var(--sp-body, system-ui); cursor: pointer; }
.pa-later { padding: 12px 16px; border: 1px solid var(--line, #24485f); border-radius: 12px; background: transparent; color: #c9dbe7; font: 700 14px/1 var(--sp-body, system-ui); cursor: pointer; }

.pa-thread { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 8px; min-height: 40vh; }
.pa-msg { display: flex; gap: 10px; align-items: flex-start; scroll-margin-top: 90px; animation: pa-in .18s ease-out; }
@keyframes pa-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .pa-msg { animation: none; } }
.pa-user { justify-content: flex-end; }
.pa-bubble { max-width: min(100%, 720px); min-width: 0; }
.pa-user .pa-bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #1d5f78; color: #f4fbff; }
.pa-bot .pa-bubble { flex: 1; }
.pa-stack { display: grid; gap: 10px; }
.pa-text p { margin: 0 0 6px; line-height: 1.55; font-size: 15px; color: #e3eef5; overflow-wrap: anywhere; }
.pa-text p:last-child { margin-bottom: 0; }
.pa-text p.pa-bullet { padding-left: 4px; }
.pa-text b { color: #fff; }
.pa-user .pa-text p { color: #f4fbff; }
.pa-inline-cta { justify-self: start; padding: 10px 16px; border-radius: 12px; background: #f5b54a; color: #2a1d05 !important; font-weight: 800; text-decoration: none; }

.pa-typing { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.04); color: #9db7c8; font-size: 14px; }
.pa-dots { width: 28px; height: 8px; background: radial-gradient(circle, #69e1dc 3px, transparent 3.5px) 0 50% / 10px 8px repeat-x; animation: pa-dots 1s steps(3) infinite; }
@keyframes pa-dots { to { background-position: 30px 50%; } }

.pa-slip { border: 1px solid var(--line-strong, #2f6a80); border-radius: 18px; background: linear-gradient(170deg, #12324c, #0b1f31); overflow: hidden; }
.pa-slip-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 14px 16px 10px; }
.pa-slip-sum { margin: 0; color: #9db7c8; font-size: 12px; line-height: 1.45; }
.pa-gold { color: #f5b54a !important; font-weight: 900; letter-spacing: 1px; }
.pa-slip-head h3 { margin: 4px 0 0; font: 700 18px/1.2 var(--sp-display, "Space Grotesk", system-ui); }
.pa-total { text-align: right; flex: none; }
.pa-total strong { display: block; color: #f5b54a; font: 700 28px/1 var(--sp-display, "Space Grotesk", system-ui); font-variant-numeric: tabular-nums; }
.pa-total span { color: #9db7c8; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; }
.pa-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 16px 12px; padding: 10px 12px; border-radius: 12px; background: #07192a; border: 1px solid var(--line, #24485f); }
.pa-code-label { color: #9db7c8; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.pa-code-value { padding: 4px 10px; border-radius: 8px; background: rgba(105,225,220,.12); color: #69e1dc; font: 700 20px/1.1 ui-monospace, Menlo, monospace; letter-spacing: 1.5px; user-select: all; }
.pa-blur { filter: blur(1.5px); user-select: none; }
.pa-code-copy { padding: 8px 12px; border: 1px solid #69e1dc; border-radius: 9px; background: transparent; color: #69e1dc; font: 800 13px/1 var(--sp-body, system-ui); cursor: pointer; }
.pa-code-open { padding: 8px 12px; border-radius: 9px; background: #f5b54a; color: #2a1d05 !important; font: 800 13px/1 var(--sp-body, system-ui); text-decoration: none; }
.pa-code-note { flex-basis: 100%; margin: 0; color: #9db7c8; font-size: 12.5px; }
.pa-legs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line, #24485f); }
.pa-leg { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(36,72,95,.6); }
.pa-leg-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.06); color: #9db7c8; font-size: 12px; font-weight: 800; }
.pa-leg-main { min-width: 0; }
.pa-leg-meta { margin: 0; color: #9db7c8; font-size: 12px; }
.pa-leg-teams { margin: 2px 0 0; font-weight: 800; font-size: 15px; overflow-wrap: anywhere; }
.pa-leg-pick { margin: 2px 0 0; color: #69e1dc; font-weight: 700; font-size: 14px; }
.pa-leg-why { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pa-leg-why span { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.05); color: #9db7c8; font-size: 11.5px; font-weight: 700; }
.pa-leg-why .pa-agree { background: rgba(79,214,156,.14); color: #4fd69c; }
.pa-leg-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pa-leg-odds { color: #f5b54a; font: 700 18px/1 var(--sp-display, system-ui); font-variant-numeric: tabular-nums; }
.pa-leg-actions { display: flex; gap: 4px; }
.pa-leg-actions button { padding: 5px 8px; border: 1px solid var(--line, #24485f); border-radius: 8px; background: transparent; color: #9db7c8; font: 700 11.5px/1 var(--sp-body, system-ui); cursor: pointer; }
.pa-leg-actions button:hover { border-color: #69e1dc; color: #fff; }
.pa-slip-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; color: #9db7c8; font-size: 12.5px; }
/* Structured slip (Phase 2): facts, evidence ticks, slip actions. */
.pa-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 16px 10px; }
.pa-facts div { padding: 8px 10px; border: 1px solid var(--line, #24485f); border-radius: 12px; background: rgba(255,255,255,.03); }
.pa-facts dt { color: #7f9aad; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.pa-facts dd { margin: 2px 0 0; color: #eaf8ff; font-weight: 800; font-size: 14px; }
.pa-slip-settings { margin: -2px 16px 10px; color: #7f9aad; font-size: 12px; }
.pa-leg-streak { margin: 4px 0 0; color: #f5c66e; font-size: 12.5px; font-weight: 800; }
.pa-leg-why .pa-tick { background: rgba(105,225,220,.10); color: #8fe7e2; }
.pa-leg-why .pa-off { background: rgba(255,255,255,.04); color: #6f879a; }
.pa-slip-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 4px; border-top: 1px solid var(--line, #24485f); }
.pa-primary { padding: 10px 14px; border: 0; border-radius: 10px; background: #f5b54a; color: #2a1d05; font: 800 14px/1 var(--sp-body, system-ui); cursor: pointer; }
.pa-slip-actions .pa-ghost { padding: 10px 12px; }
.pa-slip-status { margin: 6px 16px 0; min-height: 1em; color: #4fd69c; font-size: 13px; font-weight: 700; }
.pa-ticket-link { color: #69e1dc; font-weight: 800; font-size: 13px; text-decoration: none; white-space: nowrap; }
@media (max-width: 640px) {
  .pa-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 12px 10px; }
  .pa-slip-actions { padding: 12px 12px 4px; }
  .pa-slip-actions .pa-primary { flex: 1 1 100%; min-height: 44px; }
  /* Each game uses the full width; odds and its buttons sit on a row underneath. */
  .pa-leg { grid-template-columns: 22px 1fr; }
  .pa-leg-side { grid-column: 2; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
  .pa-leg-side .pa-leg-actions { margin: 0; }
  .pa-leg-actions button { min-height: 34px; padding: 6px 10px; }
  .pa-slip-actions .pa-ghost { flex: 1 1 calc(50% - 4px); min-height: 40px; }
  .pa-slip-foot { flex-wrap: wrap; }
}
.pa-ghost { padding: 8px 12px; border: 1px solid var(--line, #24485f); border-radius: 9px; background: transparent; color: #c9dbe7; font: 700 13px/1 var(--sp-body, system-ui); cursor: pointer; }
.pa-locked { border-color: #f5b54a; }
.pa-locked .ob-locked-legs { margin: 0 16px 12px; }
.pa-locked .ob-pw-cta { margin: 0 16px 16px; }

.pa-dock { position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; padding: 10px 16px 12px; background: linear-gradient(to top, var(--bg, #071426) 75%, rgba(7,20,38,0)); }
.pa-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.pa-chips::-webkit-scrollbar { display: none; }
.pa-chips button { flex: none; padding: 8px 12px; border: 1px solid var(--line, #24485f); border-radius: 999px; background: rgba(13,34,53,.95); color: #c9dbe7; font: 700 13px/1 var(--sp-body, system-ui); cursor: pointer; white-space: nowrap; }
.pa-chips button:hover { border-color: #69e1dc; color: #fff; }
.pa-composer { display: flex; gap: 8px; align-items: flex-end; padding: 6px 6px 6px 14px; border: 1px solid var(--line-strong, #2f6a80); border-radius: 18px; background: #0b1f31; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.pa-composer:focus-within { border-color: #69e1dc; }
.pa-composer textarea { flex: 1; min-width: 0; resize: none; max-height: 160px; padding: 9px 0; border: 0; outline: 0; background: transparent; color: var(--ink, #f4fbff); font: 500 16px/1.45 var(--sp-body, system-ui); }
.pa-composer button { flex: none; width: 42px; height: 42px; border: 0; border-radius: 13px; background: #f5b54a; color: #2a1d05; font-size: 20px; font-weight: 900; cursor: pointer; }
.pa-composer button:disabled { opacity: .5; cursor: progress; }
.pa-foot { margin: 8px 2px 0; color: #7f9aad; font-size: 11.5px; line-height: 1.45; text-align: center; }
.pa-foot a { color: #9db7c8; }
@media (max-width: 640px) {
  .pa-shell { padding: 12px 12px 0; }
  .pa-head { padding: 10px; gap: 10px; border-radius: 14px; }
  .pa-avatar { width: 38px; height: 38px; font-size: 19px; }
  .pa-title h1 { font-size: 17px; }
  .pa-actions span { display: none; }
  .pa-actions button { padding: 8px 10px; font-size: 15px; }
  .pa-user .pa-bubble { max-width: 88%; }
  .pa-avatar-sm { display: none; }
  .pa-leg { grid-template-columns: 22px 1fr; padding: 12px; }
  .pa-slip-head, .pa-slip-foot { padding-left: 12px; padding-right: 12px; }
  .pa-code { margin: 0 12px 12px; }
  .pa-dock { margin: 0 -12px; padding: 8px 12px 10px; }
  /* Keep the composer above the mobile bottom navigation. */
  .pond-legacy .pa-dock { bottom: 64px; }
  /* Mobile pass: the title stays on one line, suggestion buttons are thumb-sized,
     and the WhatsApp button sits above the message box instead of over Send. */
  .pa-title h1 { white-space: nowrap; }
  .pa-chips button { min-height: 40px; padding: 10px 14px; }
  body.pa-page .sc-fab { bottom: 236px; }
}

/* My Pond Ai (Phase 2): saved slips with results and honest records. */
.pa-record { margin: 10px 2px 0; color: #9db7c8; font-size: 12.5px; line-height: 1.5; }
.pa-history { margin-top: 12px; padding: 14px; border: 1px solid var(--line, #24485f); border-radius: 18px; background: rgba(11,31,49,.95); }
.pa-history-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pa-history-head h2 { margin: 0; font: 700 18px/1.2 var(--sp-display, "Space Grotesk", system-ui); }
.pa-muted { color: #8aa3b5; font-size: 13px; }
.pa-history-stats { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 13.5px; font-weight: 700; color: #eaf8ff; }
.pa-history-stats p { margin: 2px 0; }
.pa-hslip { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line, #24485f); border-radius: 14px; }
.pa-hslip header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.pa-hstatus { font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.06); color: #c9dbe7; }
.pa-hslip.is-won .pa-hstatus { background: rgba(79,214,156,.16); color: #4fd69c; }
.pa-hslip.is-lost .pa-hstatus { background: rgba(255,107,107,.14); color: #ff8c8c; }
.pa-hslip details { margin-top: 6px; } .pa-hslip summary { cursor: pointer; color: #69e1dc; font-weight: 700; font-size: 13px; min-height: 32px; display: flex; align-items: center; }
.pa-hlegs { margin: 6px 0 0; padding-left: 0; list-style: none; font-size: 13px; color: #c9dbe7; }
.pa-hlegs li { display: flex; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.05); }
.pa-hlegs .is-won .pa-hmark { color: #4fd69c; } .pa-hlegs .is-lost .pa-hmark { color: #ff8c8c; }