:root{
  --bg:#060e1f; --card:#0c152a; --card2:#101c34; --ring:#23324b;
  --mint:#26ff9a; --mintInk:#003; --ink:#e6f1ff; --blue:#55b9ff;
  --sa-b: env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1100px 560px at 50% 0,#0a1330 0%,#060e1f 60%,#060e1f 100%);color:var(--ink);font:16px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.screen{min-height:100svh;display:flex;flex-direction:column;padding:12px}
.chat-card{flex:1;min-height:calc(100svh - 24px);background:linear-gradient(180deg,var(--card),var(--card2));border-radius:28px;padding:16px 14px calc(14px + var(--sa-b));box-shadow:0 12px 44px rgba(0,0,0,.40);display:flex;flex-direction:column;gap:10px}
.chat-header .title{font-weight:800;font-size:22px}
.chat-header .sub{opacity:.85}
.messages{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:8px;border-radius:18px;background:#0b1427;scroll-behavior:smooth}

/* message layout now has name-tag + bubble stacked */
.msg{margin:10px 0;display:flex;flex-direction:column;gap:6px}
.msg.bot{align-items:flex-start}
.msg.user{align-items:flex-end}

/* name tags */
.name-tag{font-weight:700;font-size:12px;padding:3px 8px;border-radius:999px;display:inline-block}
.name-tag.bot{color:#fff;border:1px solid var(--mint)}
.name-tag.user{color:#cfe6ff;border:1px solid #4b658a}

/* pulse mint border while typing */
@keyframes mintPulse{0%{box-shadow:0 0 0 0 rgba(38,255,154,.55)}70%{box-shadow:0 0 0 6px rgba(38,255,154,0)}100%{box-shadow:0 0 0 0 rgba(38,255,154,0)}}
.msg.bot.typing .name-tag.bot{animation:mintPulse 1.1s ease-in-out infinite}

/* bubbles */
.msg .bubble{max-width:86%;padding:12px 14px;border-radius:18px;line-height:1.45}
.msg.bot .bubble{background:linear-gradient(180deg,#0f1c36,#0a1328);color:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.msg.user .bubble{background:transparent;color:#fff;border:1px solid rgba(38,255,154,.55);box-shadow:inset 0 0 0 1px rgba(38,255,154,.35),0 10px 26px rgba(0,0,0,.30)}

/* add a mint outline to bot bubble only while typing */
.msg.bot.typing .bubble{border:1px solid var(--mint)}

.slip-title{color:#39ff14;font-weight:800;margin:0 0 6px}
.slip-line{font-weight:800;color:var(--mint);font-size:22px;margin:2px 0}
.slip-prop{opacity:.85;font-weight:600}
.slip-meta{opacity:.9;margin:4px 0}
.badges{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.badge{border-radius:16px;background:#0f2039;border:1px solid #1c3a5d;padding:6px 10px}

/* Save to Vault button */
.save-vault-btn{
  margin-top:10px;
  display:inline-block;
  padding:8px 14px;
  border-radius:20px;
  border:none;
  background:var(--mint);
  color:var(--mintInk);
  font-weight:600;
  cursor:pointer;
  font-size:14px;
  box-shadow:0 6px 16px rgba(38,255,154,.35);
}
.save-vault-btn:hover{
  filter:brightness(1.08);
}

.menu{display:flex;gap:14px;justify-content:space-between;padding:8px 2px 4px 2px;margin-top:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.menu.hidden{display:none}
.menu-btn{flex:0 0 auto;min-width:88px;display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(13,27,49,.6);border:1px solid var(--ring);border-radius:20px;padding:12px 10px;color:#cfe6ff}
.menu-btn .ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;border:2px solid currentColor}
.menu-btn span:last-child{font-weight:600}
.menu-btn.mint{color:var(--mint)}
.menu-btn.blue{color:var(--blue)}
.children{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px 2px}
.children.hidden{display:none}
.chip{flex:0 0 auto;color:#fff;border:1px solid var(--ring);background:#0f2039;padding:8px 12px;border-radius:18px;white-space:nowrap}

.composer{display:flex;gap:10px;align-items:center;margin-top:4px}
.dots{width:44px;height:44px;border-radius:12px;border:1px solid var(--ring);background:#0e1a33;color:#fff;font-weight:700}
.send{min-width:56px;height:44px;border:none;border-radius:14px;background:var(--mint);color:var(--mintInk);box-shadow:0 10px 22px rgba(38,255,154,.35)}
.dolphin{font-size:20px;display:inline-block;transform:rotate(-12deg)}
.chat-input{flex:1;height:44px;border:none;border-radius:14px;padding:0 12px;background:var(--bg);color:#fff;caret-color:#fff;-webkit-text-fill-color:#fff;box-shadow:inset 0 0 0 1px var(--ring)}
.chat-input::placeholder{color:rgba(255,255,255,.86)}
.chat-input:-webkit-autofill,.chat-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--bg) inset;-webkit-text-fill-color:#fff}
.msg.typing .dots{display:inline-block;letter-spacing:2px;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

/* Submenu row readability */
.sub-menu{ display:flex; gap:10px; overflow:auto; padding:10px 2px 2px; }
.sub-menu .chip{ color:#fff; border:1px solid rgba(85,185,255,.35); background:rgba(13,27,49,.6); }

/* Bot vs You bubbles + name tags */
.name-tag.bot{ border:2px solid #19e293; color:#e7fff5; }
.name-tag.user{ border:none; background:transparent; color:#cfe6ff; font-weight:700; }
.bubble.bot{ background:#0e1a33; }
.bubble.user{ border:2px solid #19e293; background:transparent; }
/* clutch-cade-style */
:root{
  --slip-bg:#0b1220;           /* app bg (kept) */
  --card-bg:#ffffff;           /* slip card */
  --ink:#0e0e10;               /* dark ink on white */
  --accent:#00ff85;            /* neon green */
  --accent-ink:#052814;        /* readable on neon bg if needed */
  --muted:#5b6475;
  --pill-bg:#0f172a;
  --pill-ink:#e6f4ff;
  --shadow:0 8px 28px rgba(0,0,0,.20);
}
.card.slip{background:var(--card-bg);color:var(--ink);border-radius:16px;box-shadow:var(--shadow);padding:14px 14px 12px}
.card.slip *{color:var(--ink)}
.slip-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.slip-badge{font-weight:800;letter-spacing:.3px;color:var(--accent);display:flex;align-items:center;gap:6px}
.slip-badge::before{content:"🔥";display:inline-block}
.kickoff{font-size:12px;color:var(--muted)}
.slip-game{font-weight:700;font-size:18px;line-height:1.2;margin:.25rem 0 .5rem}
.slip-sub{font-weight:700;margin:.25rem 0 .4rem}
.slip-title-xl{font-weight:800;font-size:20px;line-height:1.2;margin:.25rem 0}
.slip-title-xl .line{opacity:.9;font-weight:800}
.slip-title-xl .prop{opacity:.85;font-weight:700}
.legs{list-style:none;margin:.25rem 0 0;padding:0}
.legs li{padding:.5rem 0;border-top:1px dashed #e8e8e8}
.pills{display:flex;gap:8px;margin-top:8px}
.pill{background:var(--pill-bg);color:var(--pill-ink);padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}
.pill-ev{border:1px solid #1f9f55}
.pill-conf{border:1px solid #1f6bbf}
.save-wrap{display:flex;justify-content:flex-end;margin-top:10px}
.save-vault{padding:10px 14px;border-radius:12px;border:1px solid #0b5fff;background:#0b5fff;color:#fff;font-weight:700}
.parlay .slip-title-xl{font-size:18px}
/* clutch-cade-style */
:root{
  --slip-bg:#0b1220;           /* app bg (kept) */
  --card-bg:#ffffff;           /* slip card */
  --ink:#0e0e10;               /* dark ink on white */
  --accent:#00ff85;            /* neon green */
  --accent-ink:#052814;        /* readable on neon bg if needed */
  --muted:#5b6475;
  --pill-bg:#0f172a;
  --pill-ink:#e6f4ff;
  --shadow:0 8px 28px rgba(0,0,0,.20);
}
.card.slip{background:var(--card-bg);color:var(--ink);border-radius:16px;box-shadow:var(--shadow);padding:14px 14px 12px}
.card.slip *{color:var(--ink)}
.slip-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.slip-badge{font-weight:800;letter-spacing:.3px;color:var(--accent);display:flex;align-items:center;gap:6px}
.slip-badge::before{content:"🔥";display:inline-block}
.kickoff{font-size:12px;color:var(--muted)}
.slip-game{font-weight:700;font-size:18px;line-height:1.2;margin:.25rem 0 .5rem}
.slip-sub{font-weight:700;margin:.25rem 0 .4rem}
.slip-title-xl{font-weight:800;font-size:20px;line-height:1.2;margin:.25rem 0}
.slip-title-xl .line{opacity:.9;font-weight:800}
.slip-title-xl .prop{opacity:.85;font-weight:700}
.legs{list-style:none;margin:.25rem 0 0;padding:0}
.legs li{padding:.5rem 0;border-top:1px dashed #e8e8e8}
.pills{display:flex;gap:8px;margin-top:8px}
.pill{background:var(--pill-bg);color:var(--pill-ink);padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}
.pill-ev{border:1px solid #1f9f55}
.pill-conf{border:1px solid #1f6bbf}
.save-wrap{display:flex;justify-content:flex-end;margin-top:10px}
.save-vault{padding:10px 14px;border-radius:12px;border:1px solid #0b5fff;background:#0b5fff;color:#fff;font-weight:700}
.parlay .slip-title-xl{font-size:18px}
/* clutch-neon-exact OVERRIDES (wins cascade) */
:root{
  --app-bg:#0b1220;
  --card-bg:#0f1a2b;     /* dark navy card */
  --ink:#e8f0ff;         /* main text */
  --ink-dim:#9fb3d1;     /* muted */
  --neon:#00ff85;        /* Cade green */
  --pill-bg:rgba(255,255,255,.06);
  --pill-border:rgba(0,255,133,.35);
  --pill-ink:#eafcf4;
  --shadow:0 14px 40px rgba(0,0,0,.35);
}

/* Slip card */
.card.slip{
  background:var(--card-bg) !important;
  color:var(--ink) !important;
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:14px 16px 12px;
}
.card.slip *{ color:var(--ink) !important; }

/* Header */
.slip-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.slip-badge{
  display:flex;align-items:center;gap:8px;
  font-weight:900;letter-spacing:.5px;
  color:var(--neon) !important;              /* neon header */
}
.slip-badge::before{content:"🔥";}
.kickoff{display:none;}                       /* we show time under matchup */

/* Matchup + time (fits mobile) */
.slip-game{
  font-weight:800;
  font-size:clamp(16px,2.7vw,20px);
  line-height:1.2;
  margin:.25rem 0 .10rem;
  word-break:break-word;
}
.slip-when{
  font-size:12px;color:var(--ink-dim);
  margin-bottom:.45rem;
}

/* Bet type */
.slip-sub{font-weight:800;opacity:.92;margin:.25rem 0 .35rem;}

/* Big title in neon */
.slip-title-xl{
  color:var(--neon) !important;
  font-weight:900;
  font-size:clamp(18px,3.5vw,22px);
  line-height:1.22;
  margin:.2rem 0 .2rem;
  word-break:break-word;
}
.slip-title-xl .line{opacity:1}
.slip-title-xl .prop{opacity:.95}

/* Legs list */
.legs{list-style:none;margin:.25rem 0 0;padding:0;}
.legs li{padding:.5rem 0;border-top:1px dashed rgba(255,255,255,.12);}
.leg-line{font-weight:700;}
.leg-meta{color:var(--ink-dim);}

/* Pills */
.pills{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.pill{
  background:var(--pill-bg);
  color:var(--pill-ink);
  border:1px solid var(--pill-border);
  padding:6px 10px;border-radius:999px;
  font-weight:800;font-size:12px;
}
.pill-ev{border-color:#23c56e;}
.pill-conf{border-color:#2d8fff;}

/* Save button */
.save-wrap{display:flex;justify-content:flex-end;margin-top:10px;}
.save-vault{
  padding:10px 14px;border-radius:12px;
  border:1px solid #0b5fff;background:#0b5fff;
  color:#fff;font-weight:800;
}
/* === CLUTCH NEON v2 (namespaced, non-conflicting) === */
:root{
  --neon-card:#0f1a2b;     /* dark navy card */
  --neon-ink:#e8f0ff;      /* primary text */
  --neon-muted:#9fb3d1;    /* secondary text */
  --neon-green:#00ff85;    /* Cade green */
  --neon-pill-bg:rgba(0,255,133,.08);
  --neon-pill-brd:rgba(0,255,133,.35);
  --neon-pill-ink:#eafcf4;
  --neon-shadow:0 14px 40px rgba(0,0,0,.35);
}

.clutch-slip-card{
  background:var(--neon-card);
  color:var(--neon-ink);
  border-radius:16px;
  box-shadow:var(--neon-shadow);
  padding:14px 16px 12px;
}
.clutch-slip-card *{ color:var(--neon-ink); }

.clutch-slip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.clutch-slip-badge{
  display:flex;align-items:center;gap:8px;
  font-weight:900;letter-spacing:.5px;
  color:var(--neon-green);
}
.clutch-slip-badge::before{content:"🔥";}

.clutch-slip-game{
  font-weight:800;
  font-size:clamp(16px,2.7vw,20px);
  line-height:1.2;
  margin:.25rem 0 .10rem;
  word-break:break-word;
}
.clutch-slip-when{font-size:12px;color:var(--neon-muted);margin-bottom:.45rem;}
.clutch-slip-sub{font-weight:800;opacity:.92;margin:.25rem 0 .35rem;}

.clutch-slip-title{
  color:var(--neon-green);
  font-weight:900;
  font-size:clamp(18px,3.5vw,22px);
  line-height:1.22;
  margin:.2rem 0 .2rem;
  word-break:break-word;
}
.clutch-slip-title .line{opacity:1}
.clutch-slip-title .prop{opacity:.95}

.clutch-legs{list-style:none;margin:.25rem 0 0;padding:0;}
.clutch-legs li{padding:.5rem 0;border-top:1px dashed rgba(255,255,255,.12);}
.clutch-leg-line{font-weight:700;}
.clutch-leg-meta{color:var(--neon-muted);}

.clutch-pills{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.clutch-pill{
  background:var(--neon-pill-bg);
  color:var(--neon-pill-ink);
  border:1px solid var(--neon-pill-brd);
  padding:6px 10px;border-radius:999px;
  font-weight:800;font-size:12px;
}
.clutch-pill--conf{border-color:#2d8fff;}

.clutch-save{display:flex;justify-content:flex-end;margin-top:10px;}
.clutch-save-btn{
  padding:10px 14px;border-radius:12px;
  border:1px solid #0b5fff;background:#0b5fff;
  color:#fff;font-weight:800;
}

/* === Readability boost for neon slips (parlays & singles) === */
.clutch-legs li{border-top:1px dashed rgba(255,255,255,.28) !important;}
.clutch-leg-line{
  font-weight:800 !important;
  font-size:16px !important;
  color:var(--neon-ink) !important;
}
.clutch-leg-meta{
  font-size:14px !important;
  color:#cfe3ff !important;
}
.clutch-pill{
  background:rgba(0,255,133,.10) !important;
  border-color:rgba(0,255,133,.45) !important;
  color:#eafcf4 !important;
}
.clutch-pill--conf{border-color:#2d8fff !important;}
/* tighten vertical space so 2-leg cards fit */
.clutch-slip-title{margin:.15rem 0 .15rem !important;}
.clutch-slip-sub{margin:.15rem 0 .25rem !important;}
.clutch-slip-when{margin-bottom:.35rem !important;}
@media (max-width:420px){
  .clutch-leg-line{font-size:15px !important;}
  .clutch-leg-meta{font-size:13px !important;}
}

/* === Neon Parlay Overrides (high-contrast, long lists readable) === */
.clutch-slip-card.parlay .clutch-slip-badge{color:#00ff85;}
.clutch-slip-card.parlay .clutch-slip-sub{margin:.2rem 0 .35rem;}
.clutch-slip-card.parlay .clutch-legs li{
  border-top:1px dashed rgba(255,255,255,.35) !important;
  padding:.55rem 0 !important;
}
.clutch-slip-card.parlay .clutch-leg-line{
  font-weight:900 !important;
  font-size:16px !important;
  color:#eaf3ff !important;
}
.clutch-slip-card.parlay .clutch-leg-meta{
  font-size:13.5px !important;
  color:#cfe3ff !important;
}
@media (max-width:420px){
  .clutch-slip-card.parlay .clutch-leg-line{font-size:15px !important;}
  .clutch-slip-card.parlay .clutch-leg-meta{font-size:13px !important;}
}

/* === Neon uniform slip tweaks (all slips) === */
.clutch-slip-card{background:#0f1a2b;color:#e8f0ff;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.35);padding:14px 16px 12px}
.clutch-slip-badge{color:#00ff85;font-weight:900;letter-spacing:.5px;display:flex;gap:8px;align-items:center}
.clutch-slip-badge::before{content:"🔥"}
.clutch-slip-game{font-weight:800;font-size:clamp(16px,2.7vw,20px);line-height:1.2;margin:.25rem 0 .10rem}
.clutch-slip-when{font-size:12px;color:#9fb3d1;margin-bottom:.4rem}
.clutch-slip-sub{font-weight:800;opacity:.95;margin:.15rem 0 .25rem}
.clutch-slip-title{color:#00ff85;font-weight:900;font-size:clamp(18px,3.5vw,22px);line-height:1.22;margin:.15rem 0 .15rem}
.clutch-legs{list-style:none;margin:.25rem 0 0;padding:0}
.clutch-legs li{padding:.55rem 0;border-top:1px dashed rgba(255,255,255,.28)}
.clutch-leg-line{font-weight:900;font-size:16px;color:#eaf3ff}
.clutch-leg-meta{font-size:13.5px;color:#cfe3ff}
.clutch-pills{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.clutch-pill{background:rgba(0,255,133,.10);color:#eafcf4;border:1px solid rgba(0,255,133,.45);padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px}
.clutch-pill--conf{border-color:#2d8fff}
.clutch-save{display:flex;justify-content:flex-end;margin-top:10px}
.clutch-save-btn{padding:10px 14px;border-radius:12px;border:1px solid #0b5fff;background:#0b5fff;color:#fff;font-weight:800}
@media (max-width:420px){
  .clutch-leg-line{font-size:15px}
  .clutch-leg-meta{font-size:13px}
}

/* --- Side pill clarity --- */
.side-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-weight:800;font-size:12px;margin-right:6px}
.side-over{background:rgba(0,255,133,.12);border:1px solid rgba(0,255,133,.55);color:#b8ffd9}
.side-under{background:rgba(255,99,132,.12);border:1px solid rgba(255,99,132,.55);color:#ffd6de}

/* ----- chips scroll row: rock-solid horizontal scrolling ----- */
#menuChildren.children{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;                 /* enable finger pan horizontally */
  overscroll-behavior-x: contain;      /* avoid bouncing parent */
  scroll-snap-type: x proximity;       /* optional gentle snap */
  padding-bottom: 8px;
}
#menuChildren.children::-webkit-scrollbar{ display:none }
#menuChildren .chip{
  flex:0 0 auto;                       /* never shrink */
  scroll-snap-align: start;
}

/* ===== children chips: guaranteed horizontal scroll ===== */
#menuChildren.children{
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  gap: 10px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  padding: 6px 2px 10px 2px;
  scroll-snap-type: x proximity;
}
#menuChildren.children::-webkit-scrollbar { display: none }
#menuChildren .chip{
  flex: 0 0 auto;            /* never shrink */
  scroll-snap-align: start;
  min-width: 84px;           /* ensures overflow on phones */
  white-space: nowrap;
}