/* ── TOG Bot (BL-391, named BL-439, its own page BL-440) ────────────────────
   ONE stylesheet for two surfaces, and that is the point.

   The box on the Line Shop and the box on /ask have to be the same object: a
   reader types in one and lands in the other mid-thought, and a second copy of
   these rules is how the two come to look like two different features. The
   box styles were inline in templates/lineshop.html until the page existed;
   they moved here rather than being duplicated.

   WHAT EACH SURFACE USES
     Line Shop   .ask-wrap .ask-box .ask-spark .ask-input .ask-send, and the
                 robot (.tb-avatar) inside .ask-spark (BL-1208)
     /ask        all of the above but the spark, plus the .tb-* chat: header,
                 welcome, chips, thread and the pinned composer (BL-1207).

   THE LOOK (prompt 107, 2026-10-06). The mockup Dan approved, in the site's
   colours: about 60% near-black ground, 30% the existing greys, 10% gold for
   the robot, the best price, the chips and the send button. Nothing purple or
   blue. Text on every surface clears 4.5:1 in both themes (the light values
   are in theme-light.css's palette note).

   Every colour is a palette variable so both themes work off :root. The
   hard-coded spots (.ask-send, .ask-slip, .ask-warn and the .tb-you bubble)
   have their light-mode overrides in static/theme-light.css, per CLAUDE.md.  */

/* ── The box, on either surface ──────────────────────────────────────────── */
.ask-wrap{max-width:1100px;margin:0 auto 14px;min-width:0;}
/* THE GOLD-EDGED BAR (BL-1208). A pill with a gold gradient edge (the
   border-box gradient under a padding-box fill, so the edge is the only gold)
   and a round gold send button, the same object on the Line Shop and /ask.
   The old square box with an "Ask" text button is gone from both. */
.ask-box{display:flex;align-items:center;gap:10px;padding:5px 5px 5px 18px;
  border:1.5px solid transparent;border-radius:999px;min-width:0;
  background:linear-gradient(var(--bg2,#111),var(--bg2,#111)) padding-box,
    linear-gradient(90deg,#7A5D2A,var(--gold-lt,#DDBC84),#7A5D2A) border-box;
  box-shadow:0 0 0 3px rgba(182,152,98,0.07),0 8px 28px rgba(182,152,98,0.07);}
.ask-box:focus-within{
  box-shadow:0 0 0 3px rgba(182,152,98,0.18),0 8px 28px rgba(182,152,98,0.10);}
/* The robot sits where the spark was, on the Line Shop only. */
.ask-spark{flex:none;width:28px;height:28px;margin-left:-11px;display:flex;
  align-items:center;justify-content:center;line-height:1;}
.ask-input{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:0;
  color:var(--text,#EEE);font-size:16px;font-weight:600;padding:11px 0;
  font-family:inherit;}
.ask-input::placeholder{color:var(--muted,#888);font-weight:500;opacity:1;
  transition:opacity .4s ease;}
/* The rotating placeholder's fade between questions (BL-1208). */
.ask-input.ask-ph-fade::placeholder{opacity:0;}
.ask-send{flex:none;background:var(--gold,#B69862);color:#0A0A0A;border:0;
  width:40px;height:40px;border-radius:50%;padding:0;display:flex;
  align-items:center;justify-content:center;cursor:pointer;font-family:inherit;
  transition:background .15s ease,transform .15s ease;}
.ask-send:hover{background:var(--gold-lt,#DDBC84);}
.ask-send:active{transform:scale(.94);}
.ask-send:disabled{opacity:.45;cursor:default;}

/* ── The robot (prompt 107 item 1, BL-1207) ────────────────────────────────
   Drawn by avatarSvg() in tog-bot.js. The eyes blink every five seconds; the
   antenna's halo is off until an answer is loading (.is-loading on the robot,
   or .tb-busy on the page for the header's). Its colours are the drawing's
   own and are the same in both themes on purpose: one avatar, one look. */
.tb-avatar{display:block;flex:none;overflow:visible;}
.tb-avatar .tb-eye{transform-box:fill-box;transform-origin:center;
  animation:tb-blink 5s infinite;}
.tb-avatar .tb-ant-glow{opacity:0;}
.tb-avatar.is-loading .tb-ant-glow,
.tb-busy .tb-av-head .tb-ant-glow{animation:tb-glow 1s ease-in-out infinite;}
.tb-avatar.is-loading .tb-ant,
.tb-busy .tb-av-head .tb-ant{fill:#FFE3A3;}
@keyframes tb-blink{0%,93%,100%{transform:scaleY(1);}96%{transform:scaleY(.12);}}
@keyframes tb-glow{0%,100%{opacity:.25;}50%{opacity:.9;}}

/* ── The answer, and its card ────────────────────────────────────────────── */
.ask-chip{flex:none;background:transparent;color:var(--muted,#888);
  border:1px solid var(--border,#2A2A2A);border-radius:999px;
  font-size:12px;font-weight:700;padding:6px 11px;cursor:pointer;
  white-space:nowrap;font-family:inherit;}
.ask-chip:hover,.ask-chip:focus-visible{color:var(--gold,#B69862);
  border-color:var(--gold,#B69862);outline:none;}
/* The kickoff on a choice chip (BL-447). "bears" offers five teams and three
   of them play on the same weekend, so the day is what tells them apart, and
   it has to be on the chip rather than in the sentence above it: the chip is
   what gets tapped. Wraps to a second line on a phone rather than truncating,
   because a half-shown kickoff is worse than none. */
.ask-chip{white-space:normal;text-align:left;}
.ask-chip-when{display:block;font-size:11px;font-weight:600;opacity:.75;
  margin-top:2px;}
.ask-a{font-size:15px;line-height:1.5;color:var(--text,#EEE);font-weight:600;
  overflow-wrap:anywhere;}
.ask-a.thinking{color:var(--muted,#888);font-weight:600;}
.ask-card{display:flex;flex-direction:column;gap:8px;padding:12px 14px;
  background:var(--bg2,#111);border:1px solid var(--border,#2A2A2A);
  border-radius:14px;min-width:0;}
.ask-card.tappable{cursor:pointer;}
.ask-card.tappable:hover{border-color:var(--gold-lt,#DDBC84);}
.ask-card.parlay-selected{border-color:var(--gold,#B69862);
  box-shadow:0 0 0 1px var(--gold,#B69862) inset;}
.ask-meta{font-size:11.5px;color:var(--muted,#888);overflow-wrap:anywhere;}
/* The game time stays on one line: at 320 wide "Sun Oct 11, 12:00 PM CDT"
   after a long matchup split as "12:00" / "PM CDT" (BL-1171). */
.ask-meta .ask-when{white-space:nowrap;}
.ask-bet{font-size:16px;font-weight:800;color:var(--text,#EEE);
  overflow-wrap:anywhere;}
.ask-px{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;
  font-weight:700;color:var(--text,#EEE);}
.ask-px .book-chip{flex:none;}
.ask-book{font-size:12px;font-weight:700;color:var(--muted,#888);}
.ask-vs{font-size:11.5px;font-weight:600;color:var(--muted,#888);}
/* Line history, day by day (prompt 41, BL-755). Palette variables only, so
   the light theme flips it with everything else. */
.tb-hist-cap{font-size:11.5px;font-weight:700;color:var(--muted,#888);}
.tb-hist{width:100%;border-collapse:collapse;font-size:13px;
  font-variant-numeric:tabular-nums;}
.tb-hist th{font-size:11px;font-weight:700;color:var(--muted,#888);
  text-align:left;padding:0 6px 4px 0;}
.tb-hist td{padding:4px 6px 4px 0;border-top:1px solid var(--border,#2A2A2A);
  color:var(--text,#EEE);font-weight:600;white-space:nowrap;}
.tb-hist td:last-child{white-space:normal;overflow-wrap:anywhere;}
.tb-hist tr.tb-hist-open td{color:var(--muted,#888);}
.tb-hist tr.tb-hist-now td{font-weight:800;color:var(--gold,#B69862);}
.tb-hist-note{display:block;font-size:11px;font-weight:600;
  color:var(--muted,#888);}
/* Every card kind draws its own content (BL-1200, BL-1201): a slate's game
   rows, a past game's score and closing lines, a game's props markets, the
   props board's top rows, game_lines' priced lines. Palette variables only,
   so the light theme flips these with everything else and needs no override
   in theme-light.css. Kept plain on purpose: the chat redesign restyles them. */
.tb-px{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
  font-size:14px;font-weight:700;color:var(--text,#EEE);}
.tb-px-odds{font-variant-numeric:tabular-nums;}
.tb-px-none{color:var(--muted,#888);font-weight:600;font-size:12.5px;}
.tb-depth{font-size:11px;font-weight:600;color:var(--muted,#888);}
.tb-slate-list,.tb-kv,.tb-props-list,.tb-top-list,.tb-line-list{list-style:none;
  margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0;}
.tb-slate-game{display:flex;flex-direction:column;gap:3px;padding-top:6px;
  border-top:1px solid var(--border,#2A2A2A);min-width:0;}
.tb-slate-game:first-child{border-top:0;padding-top:0;}
.tb-slate-head{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;
  font-size:13px;font-weight:800;color:var(--text,#EEE);overflow-wrap:anywhere;}
.tb-slate-head .ask-when{font-size:11.5px;font-weight:600;color:var(--muted,#888);
  white-space:nowrap;}
.tb-slate-side,.tb-line,.tb-top-row{display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;justify-content:space-between;min-width:0;}
.tb-slate-team,.tb-line-label,.tb-top-bet{font-size:13px;font-weight:600;
  color:var(--text,#EEE);overflow-wrap:anywhere;min-width:0;}
.tb-slate-page{font-size:11.5px;font-weight:800;color:var(--gold,#B69862);
  text-decoration:none;align-self:flex-start;}
.tb-slate-more,.tb-edge,.tb-watch-target{font-size:12px;font-weight:700;
  color:var(--muted,#888);}
.tb-past-score{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  font-size:15px;font-weight:700;color:var(--text,#EEE);}
.tb-past-score b{font-weight:900;font-variant-numeric:tabular-nums;}
.tb-past-final{font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted,#888);}
.tb-kv-row{display:flex;flex-direction:column;gap:1px;min-width:0;}
.tb-kv-k{font-size:11px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted,#888);}
.tb-kv-v{font-size:13px;font-weight:600;color:var(--text,#EEE);
  overflow-wrap:anywhere;}
.tb-props-list{flex-direction:row;flex-wrap:wrap;gap:6px 12px;}
.tb-props-market{font-size:13px;font-weight:600;color:var(--text,#EEE);
  display:inline-flex;gap:4px;align-items:baseline;}
.ask-warn{font-size:12px;line-height:1.45;color:#E0A94B;overflow-wrap:anywhere;}
.ask-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:3px;}
.ask-slip{background:var(--gold,#B69862);color:#0A0A0A;border:0;font-size:12px;
  font-weight:800;padding:7px 12px;border-radius:8px;cursor:pointer;
  font-family:inherit;}
.ask-go{font-size:12px;font-weight:800;color:var(--gold,#B69862);
  text-decoration:none;padding:7px 2px;}
.ask-go:hover{color:var(--gold-lt,#DDBC84);}
/* ONE TAP TO THE GAME PAGE (BL-1207): the pill on every answer card and on
   every carousel card. */
.ask-go[data-tb-open="page"],.tb-slate-page{display:inline-flex;align-items:center;
  gap:6px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:800;
  color:var(--gold-lt,#DDBC84);background:rgba(182,152,98,0.12);
  border:1px solid rgba(182,152,98,0.45);text-decoration:none;}
.ask-go[data-tb-open="page"]:hover,.tb-slate-page:hover{color:var(--text,#EEE);
  border-color:var(--gold,#B69862);}
.ask-choices{display:flex;gap:7px;flex-wrap:wrap;}
.ask-foot{margin-top:7px;font-size:11px;color:var(--muted,#888);}

@media(max-width:640px){
  .ask-wrap{margin-bottom:12px;}
  /* The Line Shop's box keeps the page's side gutter on a phone; the /ask
     composer brings its own padding. */
  section.ask-wrap{padding:0 12px;}
  .ask-input{font-size:16px;padding:10px 0;}  /* 16px: iOS zooms below it */
  .ask-a{font-size:14.5px;}
  .ask-bet{font-size:15px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   /ask ONLY: the thread and the pinned composer

   Dan, 2026-09-09: "Every time I ask a question they just keep stacking below
   on the Line Shop page. We should just have a separate tab for this."

   So this reads like a conversation and not like a page that grows: the
   reader's question right, the answer left, oldest at the top, and the box
   pinned to the bottom of the screen where a keyboard puts it.
   ══════════════════════════════════════════════════════════════════════════ */
.tb-page{max-width:760px;margin:0 auto;padding:14px 16px 0;min-width:0;
  position:relative;}
.tb-clear{background:transparent;border:0;color:var(--muted,#888);font-size:12px;
  font-weight:700;cursor:pointer;font-family:inherit;padding:4px 2px;flex:none;}
.tb-clear:hover,.tb-clear:focus-visible{color:var(--gold,#B69862);outline:none;}
.tb-clear[hidden]{display:none;}

.tb-thread{display:flex;flex-direction:column;gap:18px;min-width:0;}
/* The composer is fixed, so the thread reserves its height itself. Without
   this the newest answer, the thing the reader just asked for, sits under the
   box (the BL-335 mistake, one surface over). */
.tb-thread{padding-bottom:112px;}
.tb-turn{display:flex;flex-direction:column;gap:10px;min-width:0;}
/* THE QUESTION IS RIGHT, THE ANSWER IS LEFT. align-self, not text-align: the
   bubble has to shrink to its content or a three-word question paints a
   full-width slab. */
.tb-you{align-self:flex-end;max-width:82%;background:var(--bg3,#1A1A1A);
  border:1px solid var(--border,#2A2A2A);border-radius:14px 14px 4px 14px;
  padding:9px 13px;font-size:14.5px;font-weight:600;color:var(--text,#EEE);
  overflow-wrap:anywhere;min-width:0;}
.tb-bot{align-self:flex-start;max-width:92%;display:flex;flex-direction:column;
  gap:7px;min-width:0;}
.tb-empty{padding:2px 0 18px;}
.tb-empty[hidden]{display:none;}

.tb-compose{position:fixed;left:0;right:0;bottom:0;z-index:9994;
  background:var(--bg,#0A0A0A);border-top:1px solid var(--border,#2A2A2A);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));}
.tb-compose .ask-wrap{margin-bottom:0;max-width:760px;}
/* "3 of 10 today" (BACKLOG 46). Quiet on purpose: palette variables only, so
   both themes flip with no theme-light.css override. */
.tb-quota{font-size:11.5px;font-weight:600;color:var(--muted,#888);
  text-align:right;padding:5px 6px 0;}
/* CLEAR OF THE APP'S BOTTOM BARS (BL-330, BL-335). Keyed on the classes that
   mark the bars PRESENT, and inside the same breakpoint the variables are
   declared in: --og-tabbar-h and --og-drawer-h live on body.og-tabbar inside
   site-chrome.css's own (max-width:600px) block, so outside it a
   var(..., 58px) fallback would push the box 58px up a screen with no bar on
   it at all. --og-tabbar-h already carries env(safe-area-inset-bottom), so
   the inset comes off the padding here or it is counted twice. */
@media (max-width: 600px){
  body.og-tabbar .tb-compose{bottom:var(--og-tabbar-h, 0px);
    padding-bottom:10px;}
  body.og-tabbar.has-parlay-drawer .tb-compose{
    bottom:calc(var(--og-tabbar-h, 0px) + var(--og-drawer-h, 0px));}
  .tb-page{padding:12px 12px 0;}
  .tb-compose{padding-left:12px;padding-right:12px;}
  .tb-thread{padding-bottom:136px;}
  .tb-you{max-width:88%;}
  .tb-bot{max-width:100%;}
}

/* ── The Teach box (BL-448) ───────────────────────────────────────────────
   Dan's alone: none of this renders without the owner cookie. Every colour
   here is a palette variable, so light mode comes free and theme-light.css
   needs no patch for any of it (the rule CLAUDE.md keeps: a hard-coded dark
   colour is what earns an override, and there are none below). */
.tb-taught{margin:0 0 14px;padding:10px 12px;background:var(--bg2,#111);
  border:1px solid var(--border,#2A2A2A);border-radius:10px;}
.tb-taught-head{font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted,#888);margin-bottom:7px;}
.tb-taught-list{display:flex;flex-direction:column;gap:5px;}
.tb-taught-item{display:flex;align-items:center;gap:8px;font-size:13px;
  font-weight:600;color:var(--text,#EEE);}
.tb-taught-item .tb-taught-note{color:var(--muted,#888);font-weight:500;}
.tb-taught-x{margin-left:auto;flex:none;background:transparent;border:0;
  color:var(--muted,#888);font-size:12px;font-weight:700;cursor:pointer;
  padding:2px 4px;font-family:inherit;}
.tb-taught-x:hover,.tb-taught-x:focus-visible{color:var(--gold,#B69862);
  outline:none;}

.ask-teach{flex:none;background:transparent;border:1px solid var(--border,#2A2A2A);
  color:var(--muted,#888);border-radius:999px;font-size:11px;font-weight:700;
  padding:5px 10px;cursor:pointer;font-family:inherit;}
.ask-teach:hover,.ask-teach:focus-visible{color:var(--gold,#B69862);
  border-color:var(--gold,#B69862);outline:none;}

.tb-teach-back{position:fixed;inset:0;z-index:70;display:flex;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(0,0,0,.55);}
/* A `display` rule beats the hidden ATTRIBUTE, so the dialog shipped open.
   This is the same trap _pwa_head.html's reset avoids on artifact pages; the
   site has no such reset, so the selector has to say it. */
.tb-teach-back[hidden]{display:none;}
.tb-teach{width:100%;max-width:440px;background:var(--bg2,#111);
  border:1px solid var(--border,#2A2A2A);border-radius:12px;padding:14px;
  display:flex;flex-direction:column;gap:11px;max-height:88vh;overflow:auto;}
.tb-teach-head{display:flex;align-items:center;font-size:14px;font-weight:800;
  color:var(--text,#EEE);}
.tb-teach-x{margin-left:auto;background:transparent;border:0;
  color:var(--muted,#888);font-size:20px;line-height:1;cursor:pointer;
  padding:0 4px;font-family:inherit;}
.tb-teach-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.tb-teach-tab{flex:none;background:transparent;border:1px solid var(--border,#2A2A2A);
  color:var(--muted,#888);border-radius:999px;font-size:12px;font-weight:700;
  padding:5px 11px;cursor:pointer;font-family:inherit;}
.tb-teach-tab.active{color:var(--gold,#B69862);border-color:var(--gold,#B69862);}
.tb-teach-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:13px;font-weight:600;color:var(--text,#EEE);}
.tb-teach-switch{gap:9px;}
.tb-teach-in{flex:1 1 120px;min-width:110px;background:var(--bg,#0A0A0A);
  color:var(--text,#EEE);border:1px solid var(--border,#2A2A2A);
  border-radius:8px;font-size:14px;font-weight:600;padding:8px 10px;
  font-family:inherit;}
.tb-teach-note{width:100%;background:var(--bg,#0A0A0A);color:var(--text,#EEE);
  border:1px solid var(--border,#2A2A2A);border-radius:8px;font-size:14px;
  padding:9px 10px;font-family:inherit;resize:vertical;}
.tb-teach-fine{font-size:11px;font-weight:600;color:var(--muted,#888);
  margin-top:6px;line-height:1.45;}
.tb-teach-msg{font-size:12px;font-weight:700;color:var(--gold,#B69862);
  line-height:1.45;}
.tb-teach-foot{display:flex;justify-content:flex-end;}
.tb-teach-save{background:var(--gold,#B69862);color:#0A0A0A;border:0;
  font-size:13px;font-weight:800;padding:9px 16px;border-radius:9px;
  cursor:pointer;font-family:inherit;}
.tb-teach-save:disabled{opacity:.45;cursor:default;}

/* The Over/Under labels on a total card (BL-449). */
.ask-side{font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted,#888);min-width:44px;}

/* ── THE ANSWER IS A GOLD BUBBLE (BL-451) ─────────────────────────────────
   Dan, 2026-09-09, looking at /ask: "I want the bot reply to be in a bubble
   like the user's message, like texting back and forth, but the bot's bubble
   background to be our signature gold color and black text."

   So .ask-a mirrors .tb-you: same radius (with the notched corner on the
   other side), same padding, same shrink-to-content, and about 85% of the
   column. The gold is var(--gold), the token .ask-send and .ask-slip already
   fill with, so a brand change moves all three at once and none of them
   drifts.

   NOTHING WITH A LINK GOES IN IT. The site's link color IS gold, so a gold
   link on a gold bubble is invisible. The card sits under the bubble on the
   page background and keeps every link it had ("Bet at", "See it on the
   board", "Full card") plus the gold "+ Slip" button, which is exactly why
   they stay out here. The clarifying chips stay outside too, as outlined
   pills on the page ground.

   And it stays SHORT. render(card=True) takes the caveats off the sentence
   and the card carries them, because a solid gold block four lines deep is a
   wall rather than a reply. */
.tb-bot{width:100%;max-width:100%;}
.ask-a{align-self:flex-start;max-width:85%;background:var(--gold,#B69862);
  color:#0A0A0A;border-radius:14px 14px 14px 4px;padding:9px 13px;
  font-size:14.5px;font-weight:700;line-height:1.45;min-width:0;
  /* ONE PARAGRAPH PER ITEM (BL-1313, Dan 2026-10-08). An answer covering two
     or more games, bets or results arrives with a blank line between items;
     pre-line draws those breaks and still folds every other run of spaces. */
  white-space:pre-line;}
/* The card and everything after it keep the width the thread always gave
   them, and the page background under them. */
.tb-bot > .ask-card,
.tb-bot > .ask-choices,
.tb-bot > .ask-warn{align-self:flex-start;max-width:92%;width:100%;}
.tb-bot > .ask-teach{align-self:flex-start;}
/* "Reading the board..." is not an answer yet, so it is not a bubble yet. */
.ask-a.thinking{background:transparent;color:var(--muted,#888);padding:0;
  font-weight:600;}
/* If a link ever has to live inside the sentence: black, underlined, same
   weight. One accent per surface, and the bubble's accent is the bubble. */
.ask-a a{color:#0A0A0A;text-decoration:underline;font-weight:700;}
/* The staleness flag, when it fires at all, is a marker on the card and not a
   sentence in the bubble. */
.ask-stale{font-size:11px;font-weight:700;letter-spacing:.02em;
  color:var(--muted,#888);}
@media (max-width: 600px){
  .ask-a{max-width:88%;font-size:14.5px;}
  .tb-bot > .ask-card,
  .tb-bot > .ask-choices,
  .tb-bot > .ask-warn{max-width:100%;}
}

/* ── The teach page's three groups and its free-text box (BL-460) ─────────
   Every color is a palette variable, so light mode comes free and
   theme-light.css needs no patch: a hard-coded dark color is what earns an
   override, and there are none here. */
.tb-taught-group + .tb-taught-group{margin-top:11px;padding-top:10px;
  border-top:1px solid var(--border,#2A2A2A);}
.tb-teach-free{display:flex;flex-direction:column;gap:6px;}
.tb-teach-exact{border-top:1px solid var(--border,#2A2A2A);padding-top:9px;}
.tb-teach-exact > summary{font-size:12px;font-weight:700;
  color:var(--muted,#888);cursor:pointer;list-style:none;padding:2px 0;}
.tb-teach-exact > summary::-webkit-details-marker{display:none;}
.tb-teach-exact > summary::before{content:"+ ";font-weight:800;}
.tb-teach-exact[open] > summary::before{content:"- ";}
.tb-teach-exact > summary:hover{color:var(--gold,#B69862);}

/* A note cut by the pre-BL-460 clamp (BL-471). Palette variables only. */
.tb-taught-cut{display:block;font-size:10.5px;font-weight:700;
  letter-spacing:.03em;color:var(--muted,#888);opacity:.8;margin-top:2px;}

/* "Wrong?" under every answer (BL-656). Quiet by design, the same pill shape
   as Teach, so it reads as a control and not as part of the answer. */
.tb-bot > .ask-flag,
.tb-bot > .ask-flag-done,
.tb-bot > .ask-flag-note{align-self:flex-start;}
.ask-flag{display:inline-flex;align-items:center;gap:5px;background:transparent;
  border:1px solid var(--border,#2A2A2A);color:var(--muted,#888);border-radius:999px;
  font-size:11px;font-weight:700;padding:5px 10px;cursor:pointer;font-family:inherit;}
.ask-flag:hover,.ask-flag:focus-visible{color:var(--gold,#B69862);
  border-color:var(--gold,#B69862);outline:none;}
.ask-flag-done{font-size:12px;color:var(--muted,#888);}
.ask-flag-note{display:flex;gap:8px;align-items:flex-end;width:100%;max-width:92%;}
.ask-flag-note textarea{flex:1;min-width:0;resize:vertical;font:inherit;font-size:16px;
  background:var(--bg3,#1A1A1A);color:var(--text,#EEE);border:1px solid var(--border,#2A2A2A);
  border-radius:8px;padding:8px 10px;}
.ask-flag-note button{flex:none;background:var(--gold,#B69862);color:#000;border:0;
  border-radius:8px;font:inherit;font-size:13px;font-weight:700;padding:9px 14px;cursor:pointer;}

/* ══════════════════════════════════════════════════════════════════════════
   THE CHAT (prompt 107, BL-1207)

   Dan, 2026-10-06, after build 1.1: "I want the user to feel something when
   theyre looking at the TOG Bot page like theyre experiencing something
   brand new and tech savvy." These rules draw the mockup he approved
   (The Odds Gap LLC/tog-bot/tog-bot-avatar-concepts.html): a soft gold glow
   behind the chat, a header with the robot and a live status line, the robot
   beside every answer, gold-outlined chips, cards with the best book in gold,
   thumbs under each answer, typing dots while it reads the board.

   Every colour is a palette variable or a gold rgba that reads on both
   grounds, so light mode follows :root; the two hard-coded spots (the menu's
   shadow and the glow's strength) have light overrides in theme-light.css.
   Nothing here moves under prefers-reduced-motion (the block at the end).
   ══════════════════════════════════════════════════════════════════════════ */
.tb-glow{position:absolute;left:50%;top:-60px;width:min(720px,150%);height:340px;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(201,161,91,0.17),rgba(201,161,91,0));}
.tb-head,.tb-welcome,.tb-empty,.tb-thread{position:relative;z-index:1;}

/* The header: robot, name, status, New Chat and the menu. */
.tb-head{display:flex;align-items:center;gap:12px;padding:4px 0 14px;
  margin-bottom:16px;border-bottom:1px solid var(--border,#2A2A2A);}
.tb-head .tb-av{position:static;width:40px;height:40px;flex:none;}
.tb-head-txt{flex:1 1 auto;min-width:0;}
.tb-name{font-size:17px;font-weight:800;color:var(--text,#EEE);line-height:1.2;}
.tb-status{display:flex;align-items:center;gap:6px;margin-top:2px;
  font-size:12.5px;font-weight:600;color:var(--muted,#888);}
.tb-status[hidden]{display:none;}
.tb-status i{flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--green,#00C896);box-shadow:0 0 8px var(--green,#00C896);}
.tb-head .tb-new{border:1px solid var(--border,#2A2A2A);border-radius:999px;
  padding:7px 13px;font-size:12.5px;color:var(--text,#EEE);}
.tb-head .tb-new:hover{border-color:var(--gold,#B69862);color:var(--gold-lt,#DDBC84);}
.tb-menu-wrap{position:relative;flex:none;}
.tb-menu-btn{width:34px;height:34px;border-radius:50%;background:transparent;
  border:1px solid var(--border,#2A2A2A);color:var(--muted,#888);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;}
.tb-menu-btn:hover,.tb-menu-btn[aria-expanded="true"]{color:var(--gold-lt,#DDBC84);
  border-color:var(--gold,#B69862);}
.tb-menu-btn[hidden]{display:none;}
.tb-menu{position:absolute;right:0;top:42px;min-width:170px;z-index:40;padding:6px;
  background:var(--bg2,#111);border:1px solid var(--border,#2A2A2A);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,0.45);}
.tb-menu[hidden]{display:none;}
.tb-menu a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;
  font-weight:700;color:var(--text,#EEE);text-decoration:none;}
.tb-menu a:hover{background:var(--bg3,#1A1A1A);color:var(--gold-lt,#DDBC84);}
/* WEBSITE ONLY (CLAUDE.md, Dan 2026-09-22; BL-656, BL-657). tog-bot.js never
   draws Message Dan in the app; this is the second line, keyed on the site's
   one app flag from _pwa_head.html. */
html.is-native-app .tb-msgdan,
html.is-native-app .tb-menu-wrap,
html.is-native-app .ask-flag-note{display:none !important;}

/* The robot beside every bot message: the bubble keeps its own rules
   (BL-451), the robot sits in a 38px gutter to its left. */
.tb-bot{position:relative;padding-left:38px;}
.tb-bot > .tb-av{position:absolute;left:0;top:0;width:28px;height:28px;}
.tb-welcome{margin-bottom:12px;}
.tb-starters{padding-left:38px;}

/* Chips: the starters, the follow-ups and the could-not-answer pair are the
   gold-outlined kind from the mockup; the server's own choice chips keep the
   quieter outline they always had. */
.tb-starters .ask-chip,.tb-follows .ask-chip{border-color:rgba(182,152,98,0.55);
  color:var(--gold-lt,#DDBC84);background:rgba(182,152,98,0.07);font-size:13px;
  padding:8px 13px;}
.tb-starters .ask-chip:hover,.tb-follows .ask-chip:hover{border-color:var(--gold,#B69862);
  color:var(--text,#EEE);}
.tb-bot > .tb-follows,.tb-bot > .tb-rate,.tb-bot > .tb-cant,
.tb-bot > .tb-msgdan{align-self:flex-start;}
.tb-cant{font-size:13px;line-height:1.45;color:var(--muted,#888);font-weight:600;}

/* Rows of prices, the answer's in gold (BL-1207). */
.tb-rows{display:flex;flex-direction:column;border:1px solid var(--border,#2A2A2A);
  border-radius:10px;overflow:hidden;min-width:0;}
.ask-px.tb-row{justify-content:space-between;flex-wrap:nowrap;gap:10px;
  padding:9px 12px;border-top:1px solid var(--border,#2A2A2A);}
.ask-px.tb-row:first-child{border-top:0;}
.tb-row .tb-px-odds{margin-left:auto;font-weight:800;font-size:15px;}
.tb-row .ask-vs{flex:none;}
.tb-best,.ask-px.tb-best{background:rgba(201,161,91,0.11);}
.tb-best .tb-px-odds,.tb-best .ask-book{color:var(--gold-lt,#DDBC84);}
.tb-asof{font-size:11.5px;font-weight:600;color:var(--muted,#888);}

/* A slate of several games is a swipeable carousel of game cards (item 9).
   The track bleeds to the card's edges so a card peeks in from the right,
   which is what says "swipe". */
.tb-slate-list.tb-carousel{flex-direction:row;overflow-x:auto;gap:10px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  margin:0 -14px;padding:2px 14px 6px;scrollbar-width:none;}
.tb-slate-list.tb-carousel::-webkit-scrollbar{display:none;}
.tb-carousel .tb-slate-game,.tb-carousel .tb-slate-game:first-child{
  flex:0 0 78%;max-width:270px;scroll-snap-align:start;gap:7px;
  padding:12px;border:1px solid var(--border,#2A2A2A);border-radius:12px;
  background:var(--bg3,#1A1A1A);}
.tb-slate-list.tb-carousel{scroll-padding:0 14px;}
.tb-swipe{font-size:11.5px;font-weight:700;color:var(--muted,#888);}
/* Each side is its own row on a game card: the team over its book and
   price, so a long name wraps above the number instead of beside it. */
.tb-carousel .tb-slate-side{flex-direction:column;align-items:stretch;gap:3px;
  flex-wrap:nowrap;padding:8px 10px;border-radius:10px;background:var(--bg2,#111);}
.tb-carousel .tb-slate-side .tb-px{justify-content:flex-start;}
.tb-carousel .tb-slate-side .tb-px-odds{margin-left:auto;font-size:15px;font-weight:800;}
.tb-carousel .tb-slate-side .tb-depth{flex-basis:100%;text-align:right;}
.tb-carousel .tb-slate-page{align-self:stretch;justify-content:center;margin-top:auto;}

/* Thumbs up and down (items 2, 11). */
.tb-rate{display:flex;gap:6px;}
.tb-rate .tb-rate-btn{width:36px;height:32px;padding:0;border-radius:999px;
  display:flex;align-items:center;justify-content:center;background:transparent;
  border:1px solid var(--border,#2A2A2A);color:var(--muted,#888);cursor:pointer;}
.tb-rate .tb-rate-btn:hover,.tb-rate .tb-rate-btn:focus-visible{color:var(--gold,#B69862);
  border-color:var(--gold,#B69862);outline:none;}
.tb-bot > .tb-msgdan{font-size:12.5px;font-weight:700;color:var(--gold,#B69862);
  text-decoration:none;}

/* Typing dots and "Checking 19 books..." (items 2, 13). The line is still
   .thinking, which stays off the gold because it is not an answer yet. */
.ask-a.thinking{display:flex;align-items:center;gap:10px;max-width:100%;}
.tb-dots{display:inline-flex;gap:5px;padding:12px 14px;
  border-radius:16px 16px 16px 5px;background:var(--bg3,#1A1A1A);
  border:1px solid var(--border,#2A2A2A);}
.tb-dots i{width:6px;height:6px;border-radius:50%;background:var(--gold,#B69862);
  animation:tb-dot 1s ease-in-out infinite;}
.tb-dots i:nth-child(2){animation-delay:.16s;}
.tb-dots i:nth-child(3){animation-delay:.32s;}
.tb-checking{font-size:13px;font-weight:600;color:var(--muted,#888);}
@keyframes tb-dot{0%,100%{opacity:.3;transform:translateY(0);}
  50%{opacity:1;transform:translateY(-2px);}}

/* Fade and rise, under 200 ms (item 3): a new turn when it is asked, and
   its answer when it lands. */
.tb-turn-in{animation:tb-rise .18s ease-out both;}
.tb-answered > .tb-bot{animation:tb-rise .18s ease-out both;}
@keyframes tb-rise{from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:none;}}

/* The composer, lifted above the keyboard by tog-bot.js (visualViewport)
   while the keyboard is open, gets no tab-bar offset of its own then. */
.tb-compose.tb-kb{padding-bottom:10px;}

/* NO MOTION FOR A READER WHO ASKED FOR NONE (item 1). The blink, the halo
   pulse, the typing dots, the entrance and the placeholder fade all stop;
   the loading halo shows still, so the state is not lost with the motion. */
@media (prefers-reduced-motion: reduce){
  .tb-avatar .tb-eye,.tb-dots i,.tb-turn-in,.tb-answered > .tb-bot{animation:none !important;}
  .tb-avatar.is-loading .tb-ant-glow,
  .tb-busy .tb-av-head .tb-ant-glow{animation:none !important;opacity:.7;}
  .ask-input::placeholder,.ask-send{transition:none !important;}
}
@media (max-width:600px){
  .tb-head{gap:10px;}
  .tb-name{font-size:16px;}
}

/* "General Answer" over a backstop answer (prompt 128): a small quiet tag,
   so a reader knows the sentence is from the site's pages, not live prices. */
.tb-general{display:inline-block;margin:0 0 4px;padding:1px 7px;border:1px solid var(--border,#2a2a2a);
  border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted,#888);}
.tb-bot > .tb-general{align-self:flex-start;}