/*
 * Party chat · CHAT+PEOPLE. Discord inside a game, in the Party Night style: night surfaces, Chipper avatars with their
 * hats, chunky rounded pills, Grape for "you", Gold for shared money (bet cards), Hot only for the final minute.
 * Prefixes: .chat- .rx-   Variants: .chat-v-lobby (desktop lobby card) · .chat-v-panel (game rail) · .chat-v-sheet
 */

/* ---------- frame ---------- */
.chat { --av: 34px; position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.chat-thread {
  list-style: none; margin: 0; padding: 6px 2px 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--night-4) transparent;
}
.chat-thread::-webkit-scrollbar { width: 8px; }
.chat-thread::-webkit-scrollbar-thumb { background: var(--night-4); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.chat-thread > :first-child { margin-top: auto; }           /* short threads sit at the bottom, like Discord */
.chat-thread > li.is-new { animation: feedIn .35s var(--out) both; }

/* ---------- a message ---------- */
.chat-msg {
  position: relative; display: grid; grid-template-columns: var(--av) minmax(0, 1fr); column-gap: 10px;
  padding: 3px 10px 3px 8px; border-radius: 14px; transition: background .15s;
  -webkit-touch-callout: none;
}
.chat-msg.head { margin-top: 12px; padding-top: 6px; }
.chat-msg:hover, .chat-msg:focus-within { background: rgba(255, 255, 255, .035); }
.chat-msg.is-mention { background: color-mix(in srgb, var(--grape) 13%, transparent); box-shadow: inset 3px 0 0 var(--grape); }
.chat-msg.is-mention:hover { background: color-mix(in srgb, var(--grape) 17%, transparent); }
.chat-msg.chat-flash { animation: chatFlash 1.4s var(--out); }
@keyframes chatFlash { 0%, 30% { background: color-mix(in srgb, var(--grape) 30%, transparent); box-shadow: inset 0 0 0 2px var(--grape); } }

.chat-av {
  grid-column: 1; grid-row: span 2; align-self: start; appearance: none; border: 0; background: none; padding: 0;
  width: var(--av); height: var(--av); margin-top: 1px; cursor: pointer; border-radius: 50%;
}
.chat-av .chip { width: var(--av); height: var(--av); transition: transform .25s var(--spring); }
.chat-av:active .chip { transform: scale(.92); }
.chat-main { grid-column: 2; min-width: 0; }
.chat-name { display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 2px; }
.chat-who {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer; min-width: 0;
  font: 800 14.5px/1.25 var(--f-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-who:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.chat-who { padding: 13px 6px; margin: -13px -6px; }    /* a 44px tap target (Mute / Report in public games), same layout */
.chat-meta { font: 600 13px/1 var(--f-ui); color: var(--ink-3); white-space: nowrap; }
.chat-hit { font: 800 10px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: 6px; background: var(--gold-soft); color: var(--gold); white-space: nowrap; }
.chat-text { font: 600 15px/1.42 var(--f-ui); color: #E7E3FF; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-text.big { font: 400 34px/1.2 system-ui, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; letter-spacing: .04em; padding: 2px 0; }
.chat-msg.cont .chat-main { grid-column: 2; }
.chat-at { display: inline; padding: 0 3px; border-radius: 5px; background: var(--grape-soft); color: var(--grape-ink); font-weight: 800; }
.chat-at.me { background: color-mix(in srgb, var(--grape) 34%, transparent); color: #fff; }

/* reply quote (spans the row above the avatar, with Discord's little spine) */
.chat-quote {
  grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  appearance: none; border: 0; background: none; cursor: pointer; text-align: left;
  margin: 0 0 3px calc(var(--av) / 2 + 2px); padding: 0 0 0 calc(var(--av) / 2 + 10px); height: 22px;
  font: 600 13px/1 var(--f-ui); color: var(--ink-3);
}
.chat-quote::before {
  content: ""; position: absolute; left: 0; top: 11px; width: calc(var(--av) / 2 + 4px); height: 12px;
  border: 2px solid var(--line-3); border-right: 0; border-bottom: 0; border-top-left-radius: 8px;
}
.chat-quote .chip { flex: none; }
.chat-quote b { flex: none; color: var(--ink-2); font-weight: 800; }
.chat-q-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-quote:hover .chat-q-t { color: var(--ink-2); }
.chat-quote.gone { cursor: default; font-style: italic; }

/* bet cards (brag + big hits): gold = shared money moments */
.chat-card {
  display: inline-grid; grid-template-columns: 42px auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; align-items: center;
  margin: 4px 0 2px; padding: 10px 16px 10px 10px; border-radius: 18px; max-width: 100%;
  background: linear-gradient(135deg, rgba(255, 200, 61, .17), rgba(255, 200, 61, .04)); border: 1px solid rgba(255, 200, 61, .3);
  box-shadow: 0 4px 0 rgba(201, 138, 18, .35);
}
.chat-card-ic { grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--night-0); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 200, 61, .25); }
.chat-card-g { font: 800 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #E6BE5A; }
.chat-card-v { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.chat-card-v b { font: 800 22px/1 var(--f-display); letter-spacing: -.03em; color: var(--gold); font-variant-numeric: tabular-nums; }
.chat-card-v em { font: 800 15px/1 var(--f-ui); font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chat-card-v em.up { color: var(--go); }

/* reactions */
.rx-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 2px; }
.rx-pill, .rx-add {
  position: relative; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--night-2);
  color: var(--ink-2); font: 800 13px/1 var(--f-ui); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 0 var(--edge-dark); transition: transform .12s var(--out), background .15s, border-color .15s;
}
.rx-pill::after, .rx-add::after { content: ""; position: absolute; inset: -7px -2px; }      /* 44px tap target */
.rx-pill:hover { border-color: var(--line-3); }
.rx-pill:active, .rx-add:active { transform: translateY(2px); box-shadow: none; }
.rx-pill .rx-e { font: 400 16px/1 system-ui, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; }
.rx-pill .rx-e.word, .chat-tools .word { font: 900 12px/1 var(--f-display); color: var(--ink); letter-spacing: .02em; }
.rx-pill.mine { background: var(--grape-soft); border-color: rgba(123, 97, 255, .6); color: var(--grape-ink); box-shadow: 0 2px 0 var(--grape-edge); }
.rx-pill.mine .rx-e.word { color: #fff; }
.rx-add { width: 38px; justify-content: center; padding: 0; color: var(--ink-3); opacity: 0; }
.rx-add i { position: absolute; right: 5px; top: 3px; font: 900 11px/1 var(--f-ui); font-style: normal; }
.chat-msg:hover .rx-add, .rx-add:focus-visible { opacity: 1; }

/* desktop hover toolbar: 😂 🔥 💀 · Reply · + */
.chat-tools {
  position: absolute; right: 10px; top: -16px; z-index: 3; display: none; align-items: center; gap: 2px; padding: 3px;
  border-radius: 14px; background: var(--night-3); border: 1px solid var(--line-3); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7);
}
.chat-tools button {
  appearance: none; border: 0; background: transparent; cursor: pointer; width: 34px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; color: var(--ink-2); font: 400 17px/1 system-ui, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
  transition: transform .12s var(--spring), background .12s;
}
.chat-tools button:hover { background: rgba(255, 255, 255, .08); color: var(--ink); transform: scale(1.1); }
.chat-tools i { width: 1px; height: 18px; margin: 0 3px; background: var(--line-3); }
@media (hover: hover) and (min-width: 701px) {
  .chat-msg:hover .chat-tools, .chat-msg:focus-within .chat-tools { display: flex; }
}
@media (hover: none), (max-width: 700px) { .rx-add { display: none; } }

/* ---------- system lines: quieter than people ---------- */
.chat-sys { display: flex; align-items: flex-start; gap: 8px; padding: 5px 10px 5px 8px; margin: 4px 0 0; font: 600 13px/1.4 var(--f-ui); color: var(--ink-3); }
.chat-sys + .chat-sys { margin-top: 0; }
.chat-sys b { color: var(--ink-2); font-weight: 800; }
.chat-sys-ic { flex: none; width: 22px; height: 22px; margin-left: calc((var(--av) - 22px) / 2); border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); color: var(--ink-3); }
.chat-sys-ic.go { color: var(--go); background: var(--go-soft); }
.chat-sys-ic.gold { color: var(--gold); background: var(--gold-soft); }
.chat-sys-ic.grape { color: var(--grape-ink); background: var(--grape-soft); }
.chat-sys-ic.hot { color: #fff; background: var(--hot); }
.chat-sys-ic .ic[aria-label] { width: 14px; height: 14px; }
.chat-sys-t { padding-top: 2px; min-width: 0; overflow-wrap: anywhere; }
.chat-sys.t-final { color: var(--hot); }
.chat-sys.t-final b { color: var(--hot); }
.chat-sys.t-winner { color: var(--ink-2); }
.chat-sys.t-winner b { color: var(--gold); }
.chat-sys.t-final2 .chat-sys-t { color: var(--ink-2); }
.chat-sys.is-private { font-style: italic; }

/* "New messages" divider and the jump pill */
.chat-new { display: flex; align-items: center; gap: 10px; margin: 14px 4px 2px; font: 800 12px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--grape-ink); }
.chat-new::before { content: ""; flex: 1; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--grape) 70%, transparent); }
.chat-new span { padding: 4px 8px; border-radius: 6px; background: var(--grape); color: #fff; }
.chat-jump {
  position: absolute; left: 50%; bottom: 96px; z-index: 4; transform: translateX(-50%);
  appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: 999px; background: var(--grape); color: #fff; font: 800 13.5px/1 var(--f-ui);
  box-shadow: 0 3px 0 var(--grape-edge), 0 12px 24px -8px rgba(0, 0, 0, .7); animation: feedIn .25s var(--out);
}
.chat-jump:active { transform: translate(-50%, 3px); box-shadow: 0 0 0 var(--grape-edge); }
.chat-empty { margin: auto; padding: 24px 12px; display: grid; gap: 4px; text-align: center; color: var(--ink-3); font: 600 13.5px/1.4 var(--f-ui); }
.chat-empty b { font: 800 16px/1.2 var(--f-display); color: var(--ink-2); }

/* ---------- typing ---------- */
.chat-typing { flex: none; display: flex; align-items: center; gap: 7px; height: 22px; padding: 0 10px; font: 600 13px/1 var(--f-ui); color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.chat-typing b { color: var(--ink-2); font-weight: 800; }
.chat-dots { display: inline-flex; gap: 3px; padding: 5px 7px; border-radius: 999px; background: var(--night-3); }
.chat-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); animation: chatDot 1.1s ease-in-out infinite; }
.chat-dots i:nth-child(2) { animation-delay: .15s; }
.chat-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- composer ---------- */
.chat-replying { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 12px; margin: 0 0 6px; border-radius: 12px; background: var(--night-2); font: 600 13px/1.2 var(--f-ui); color: var(--ink-3); }
.chat-replying > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-replying b { color: var(--ink); }
.chat-x { appearance: none; flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.chat-x:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.chat-compose { position: relative; flex: none; display: flex; align-items: center; gap: 8px; }
.chat-emote-slot { flex: none; display: flex; }
.chat-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; height: 50px; padding: 0 5px 0 14px;
  border-radius: 16px; background: var(--night-0); border: 2px solid var(--line-2); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3);
  transition: border-color .15s;
}
.chat-field:focus-within { border-color: var(--grape); }
.chat-in { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font: 600 15px/1 var(--f-ui); color: var(--ink); }
.chat-in::placeholder { color: var(--ink-3); opacity: 1; }
.chat-send {
  appearance: none; flex: none; width: 38px; height: 36px; border: 0; border-radius: 11px; cursor: pointer; display: grid; place-items: center;
  background: var(--night-3); color: var(--ink-3); transition: background .15s, color .15s, transform .1s var(--out), box-shadow .1s;
}
.chat-send.ready { background: var(--grape); color: #fff; box-shadow: 0 3px 0 var(--grape-edge); margin-bottom: 3px; }
.chat-send.ready:active { transform: translateY(3px); box-shadow: none; }

/* @mention picker (above the composer) */
.chat-ment {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 6; padding: 6px; max-height: 280px; overflow-y: auto;
  border-radius: 18px; background: var(--night-2); border: 1px solid var(--line-3); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .85);
  animation: feedIn .18s var(--out);
}
.chat-ment-h { margin: 4px 8px 6px; font: 800 12px/1 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.chat-ment-i { appearance: none; width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; font: 800 14.5px/1 var(--f-ui); }
.chat-ment-i .chip { flex: none; }
.chat-ment-i.on, .chat-ment-i:hover { background: var(--grape-soft); }

/* the emote button + its popover (the popover lives in <body>, fixed) */
.chat-emote-btn {
  position: relative; appearance: none; flex: none; width: 50px; height: 50px; margin-bottom: 4px; border: 0; border-radius: 16px; cursor: pointer;
  display: grid; place-items: center; color: var(--ink-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%), var(--night-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 0 var(--edge-dark);
  transition: transform .09s var(--out), box-shadow .09s var(--out), color .15s;
}
.chat-emote-btn.is-compact { width: 46px; height: 46px; border-radius: 14px; }
.chat-emote-btn:hover { color: var(--ink); }
.chat-emote-btn:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 var(--edge-dark); }
.chat-emote-btn[aria-expanded="true"] { color: var(--ink); background: var(--grape); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 4px 0 var(--grape-edge); }
.chat-emote-btn.cool::after {
  content: ""; position: absolute; inset: -3px; border-radius: 18px; pointer-events: none;
  background: conic-gradient(var(--grape) var(--cool, 0%), transparent 0); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  opacity: .9; animation: chatCool 1s linear forwards;
}
@property --cool { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@keyframes chatCool { from { --cool: 100%; } to { --cool: 0%; opacity: .3; } }
.chat-emotes {
  position: fixed; z-index: var(--z-menu); display: flex; gap: 4px; padding: 6px; border-radius: 20px;
  background: rgba(29, 24, 56, .98); border: 1px solid var(--line-3); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .85);
  animation: chatPopIn .28s var(--spring) both; transform-origin: var(--tip, 50%) 100%;
}
.chat-emotes.below { transform-origin: var(--tip, 50%) 0; }
.chat-emotes::after { content: ""; position: absolute; top: 100%; left: calc(var(--tip, 50%) - 7px); width: 14px; height: 8px; background: rgba(29, 24, 56, .98); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.chat-emotes.below::after { top: auto; bottom: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.chat-emotes button {
  appearance: none; width: 48px; height: 48px; border: 0; border-radius: 14px; cursor: pointer; background: transparent;
  font: 400 27px/1 system-ui, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  transition: transform .14s var(--spring), background .12s;
}
.chat-emotes button.word { font: 900 16px/1 var(--f-display); color: var(--ink); }
.chat-emotes button:hover { background: rgba(255, 255, 255, .08); transform: scale(1.14); }
.chat-emotes button:active { transform: scale(.9); }
.chat-emotes.nope { animation: chatNope .32s ease; }
@keyframes chatPopIn { from { transform: scale(.6); opacity: 0; } }
@keyframes chatNope { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }

/* reaction picker popover (desktop "+") */
.chat-pick {
  position: absolute; z-index: 7; display: grid; grid-template-columns: repeat(6, 40px); gap: 2px; padding: 6px;
  border-radius: 16px; background: rgba(29, 24, 56, .98); border: 1px solid var(--line-3); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .85);
  animation: chatPopIn .22s var(--spring) both; transform-origin: 100% 0;
}
.chat-pick button { appearance: none; width: 40px; height: 40px; border: 0; border-radius: 11px; background: transparent; cursor: pointer; font: 400 21px/1 system-ui, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; }
.chat-pick button.word { font: 900 13px/1 var(--f-display); color: var(--ink); }
.chat-pick button:hover { background: rgba(255, 255, 255, .08); }
.chat-pick button.mine { background: var(--grape-soft); box-shadow: inset 0 0 0 1px rgba(123, 97, 255, .6); }

/* ---------- action sheet inside the chat (tap / long-press a message on phones, right-click on desktop) ---------- */
.chat-layer { position: absolute; inset: 0; z-index: 8; display: none; }
.chat-layer.on { display: block; }
.chat-act-scrim { position: absolute; inset: 0; background: rgba(9, 7, 20, .55); border-radius: inherit; animation: fade .2s var(--out); }
.chat-act {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 100%; overflow-y: auto; padding: 0 12px 12px;
  border-radius: 24px 24px 18px 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%), var(--night-2);
  border: 1px solid var(--line-3); box-shadow: 0 -20px 50px -16px rgba(0, 0, 0, .8); animation: chatSheetIn .3s var(--out) both;
}
@keyframes chatSheetIn { from { transform: translateY(40px); opacity: 0; } }
.chat-act-grab { display: grid; place-items: center; height: 22px; cursor: pointer; }
.chat-act-grab i { width: 40px; height: 5px; border-radius: 99px; background: var(--line-3); }
.chat-act-head { display: flex; align-items: center; gap: 10px; padding: 2px 6px 10px; min-width: 0; }
.chat-act-head .chip { flex: none; }
.chat-act-head div { min-width: 0; display: grid; gap: 3px; }
.chat-act-head b { font: 800 14.5px/1.2 var(--f-ui); }
.chat-act-head span { font: 600 13px/1.3 var(--f-ui); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-act-rx, .chat-act-all { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 0 2px 10px; }
.chat-act-all { padding-top: 0; }
.chat-act-rx button, .chat-act-all button {
  appearance: none; height: 50px; min-width: 0; border: 0; border-radius: 16px; cursor: pointer; background: var(--night-3);
  font: 400 24px/1 system-ui, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; color: var(--ink);
  box-shadow: 0 3px 0 var(--edge-dark); margin-bottom: 3px; display: grid; place-items: center;
}
.chat-act-rx button:active, .chat-act-all button:active { transform: translateY(3px); box-shadow: none; }
.chat-act-rx button.word, .chat-act-all button.word { font: 900 15px/1 var(--f-display); }
.chat-act-rx button.mine, .chat-act-all button.mine { background: var(--grape-soft); box-shadow: 0 3px 0 var(--grape-edge), inset 0 0 0 1px rgba(123, 97, 255, .6); }
.chat-act-more { color: var(--ink-2) !important; }
.chat-act-more.on { background: var(--grape-soft) !important; color: var(--grape-ink) !important; }
.chat-act-list { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 6px; }

/* ---------- the chat tab + unread badge ---------- */
.chat-btn { position: relative; }
.chat-btn .chat-badge { position: absolute; top: -7px; right: -7px; box-shadow: 0 0 0 3px var(--night-0); }
.chat-btn-wide .chat-badge { position: static; box-shadow: none; margin-left: 2px; }
.chat-badge.pop { animation: winPop .45s var(--spring); }
.chat-btn.chat-ping { animation: chatPing .7s var(--spring); }
@keyframes chatPing { 30% { transform: rotate(-10deg) scale(1.08); } 60% { transform: rotate(8deg); } }

/* ---------- variants ---------- */
.chat-v-panel { --av: 28px; }
.chat-v-panel .chat-msg.head { margin-top: 9px; }
.chat-v-panel .chat-text { font-size: 14px; }
.chat-v-panel .chat-who { font-size: 14px; }
.chat-v-panel .chat-text.big { font-size: 28px; }
.chat-v-panel .chat-card { padding: 8px 12px 8px 8px; grid-template-columns: 36px auto; }
.chat-v-panel .chat-card-ic { width: 36px; height: 36px; }
.chat-v-panel .chat-card-v b { font-size: 18px; }
.chat-v-panel .chat-field { height: 46px; }
.chat-v-panel .chat-emote-btn.is-compact { width: 44px; height: 44px; }
.chat-v-panel .chat-jump { bottom: 86px; }
.chat-v-panel .chat-sys { padding-top: 4px; padding-bottom: 4px; }

.chat-v-overlay { --av: 28px; }
.chat-v-overlay .chat-msg.head { margin-top: 9px; }
.chat-v-overlay .chat-text { font-size: 14px; }
.chat-v-overlay .chat-who { font-size: 14px; }
.chat-v-overlay .chat-text.big { font-size: 28px; }
.chat-v-overlay .chat-card { padding: 8px 12px 8px 8px; grid-template-columns: 36px auto; }
.chat-v-overlay .chat-card-ic { width: 36px; height: 36px; }
.chat-v-overlay .chat-card-v b { font-size: 18px; }
.chat-v-overlay .chat-field { height: 46px; }
.chat-v-overlay .chat-emote-btn.is-compact { width: 44px; height: 44px; }
.chat-v-overlay .chat-jump { bottom: 86px; }
.chat-v-overlay .chat-sys { padding-top: 4px; padding-bottom: 4px; }

/* ---------- the overlay (ADDENDUM §8e): the same bottom-left corner on every party screen ---------- */
.cov { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: min(380px, calc(100vw - 48px)); pointer-events: none; }
.cov-lobby, .cov-results { position: fixed; left: 24px; bottom: 24px; z-index: 40; }
/* lobby + results: the lines float over the page (seat cards, rules, standings), so each sits on a solid night plate
   and never prints text over text; they still fade and never take a click */
.cov-lobby .cov-line, .cov-results .cov-line, .cov-game .cov-line { width: fit-content; max-width: 100%; padding: 4px 10px 4px 5px; border-radius: 10px; background: rgba(13, 10, 28, .9); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .8); }
.cov-lobby .cov-line.is-lite, .cov-results .cov-line.is-lite { color: rgba(255, 255, 255, .78); }
/* game mode too: the bottom-left of the SCREEN, over everything, never boxed inside the game frame (founder) */
.cov-game { position: fixed; left: 24px; bottom: 24px; z-index: 40; width: min(380px, calc(100vw - 48px)); }
/* resting: a few lines, no box, each fades ~8s after it lands; they never take a click */
.cov-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; width: 100%; pointer-events: none; }
.cov-line {
  display: flex; align-items: flex-start; gap: 8px; max-width: 100%; pointer-events: none;
  font: 700 14.5px/1.35 var(--f-ui); color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .7);
  animation: covIn .32s var(--out) both, covOut .6s ease calc(var(--life, 8000ms) - 600ms) forwards;
}
.cov-line.no-in { animation: covOut .6s ease calc(var(--life, 8000ms) - 600ms) forwards; }
@keyframes covIn { from { transform: translateY(8px); opacity: 0; } }
@keyframes covOut { to { opacity: 0; transform: translateY(-4px); } }
.cov-av { flex: none; width: 24px; height: 24px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .75)); }
.cov-av .chip { width: 24px; height: 24px; }
.cov-t { min-width: 0; padding-top: 3px; overflow-wrap: anywhere; }
.cov-who { font-weight: 900; margin-right: 3px; }
.cov-card { font-style: normal; font-weight: 800; color: var(--gold); }
.cov-rx { display: inline-flex; align-items: center; gap: 2px; margin-left: 7px; font: 400 13px/1 system-ui, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; font-style: normal; opacity: .9; }
.cov-rx b { font: 800 13px/1 var(--f-ui); }
.cov-line.is-mention .cov-t { padding: 2px 6px 1px; margin-top: 1px; border-radius: 7px; background: color-mix(in srgb, var(--grape) 42%, transparent); }
.cov-line.is-sys .cov-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-2); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9)); }
.cov-line.is-lite { font-weight: 600; font-size: 13.5px; color: rgba(255, 255, 255, .66); }
.cov-line.is-lite .cov-ic { opacity: .7; }
.cov-line.t-final, .cov-line.t-final .cov-ic { color: #FFB3C0; }
.cov-line.t-winner .cov-ic, .cov-line.t-lead .cov-ic, .cov-line.is-card.is-big .cov-t { color: var(--gold); }
/* the pill: always in the corner (desktop) */
.cov-pill {
  pointer-events: auto; appearance: none; position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 8px 0 12px; border-radius: 999px; background: rgba(13, 10, 28, .78); border: 1px solid var(--line-2);
  color: var(--ink-2); font: 800 13.5px/1 var(--f-ui); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: color .15s, border-color .15s, background .15s;
}
.cov-pill::after { content: ""; position: absolute; inset: -4px; }       /* a 48px tap area */
.cov-pill:hover { color: var(--ink); border-color: var(--line-3); }
.cov-pill .kbd { background: rgba(255, 255, 255, .08); color: var(--ink-3); }
.cov-pill .badge { margin-left: -2px; }
.cov.is-open .cov-pill { color: var(--ink); border-color: var(--grape); background: color-mix(in srgb, var(--grape) 26%, rgba(13, 10, 28, .86)); }
.cov.is-open .cov-pill .kbd { display: none; }
/* open: a translucent night panel with the whole thread */
.cov-panel {
  pointer-events: auto; width: 100%; height: min(540px, calc(100vh - var(--bar-h) - 120px)); min-height: 260px;
  display: flex; flex-direction: column; padding: 10px 8px 10px 10px; border-radius: 24px;
  background: rgba(21, 17, 41, .9); border: 1px solid var(--line-3); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  animation: covPanelIn .28s var(--out) both; transform-origin: 0 100%;
}
@keyframes covPanelIn { from { transform: translateY(16px) scale(.97); opacity: 0; } }
.cov.is-open .cov-feed { display: none; }
.cov-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 0 6px 6px; }
.cov-head .label { margin: 0; }
.cov-hint { margin-left: auto; font: 700 12.5px/1 var(--f-ui); color: var(--ink-3); }
.cov-x { appearance: none; flex: none; width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.cov-x:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.cov-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cov-chat .chat { flex: 1; }
@media (prefers-reduced-motion: reduce) { .cov-line, .cov-line.no-in { animation: covOut .01ms linear calc(var(--life, 8000ms) - 200ms) forwards; } }

/* the chat bottom sheet (phones; results everywhere) */
.sheet.chat-sheet .sheet-body { display: flex; flex-direction: column; padding: 0 12px calc(10px + var(--safe-b)); overflow: hidden; }
.sheet.chat-sheet .chat { flex: 1; }
.sheet.chat-sheet .chat-act { border-radius: 24px 24px 18px 18px; }
.sheet.chat-sheet { transition: height .3s var(--out), bottom .2s var(--out); }

@media (max-width: 700px) {
  .chat-in { font-size: 16px; }                             /* no zoom-on-focus on phones */
  .chat-msg { padding-right: 6px; }
  .chat-text { font-size: 15.5px; }
  .chat-jump { bottom: 94px; }
  /* phones: the fading feed (2–3 small lines, untappable) + the pill, which opens the chat bottom sheet */
  .cov-panel { display: none !important; }
  .cov { width: min(320px, calc(100vw - 32px)); gap: 6px; }
  .cov-pill { height: 36px; padding: 0 10px 0 9px; gap: 6px; font-size: 13px; background: rgba(13, 10, 28, .86); }
  .cov-pill::after { inset: -5px -4px; }
  .cov-pill .kbd { display: none; }
  /* over a small game stage the pill is slimmer (it sits under the stage's own text); still a 44px tap area */
  .cov-game .cov-pill { height: 30px; padding: 0 9px 0 8px; gap: 5px; }
  .cov-game .cov-pill .ic { width: 16px; height: 16px; }
  .cov-game .cov-pill::after { inset: -7px -4px; }
  /* the lobby's pill sits inside the sticky dock (the left end of its sub row, lobby.css), above the dock's fade:
     just the chat icon, with the unread count on its corner */
  .cov-lobby { left: 16px; bottom: calc(var(--cov-dock, 132px) + var(--safe-b)); z-index: calc(var(--z-dock) + 1); }
  .cov-lobby .cov-pill, .cov-results .cov-pill { width: 44px; height: 36px; padding: 0; justify-content: center; }
  .cov-lobby .cov-pill-t, .cov-results .cov-pill-t { display: none; }
  .cov-lobby .cov-pill .badge, .cov-results .cov-pill .badge { position: absolute; top: -7px; right: -8px; margin: 0; box-shadow: 0 0 0 3px var(--night-0); }
  .cov-results { left: 16px; bottom: calc(92px + var(--safe-b)); }
  /* phones: a slim chat row pinned just above the sticky dock (button + "bet $50" line), left edge of the screen */
  .cov-game { left: 16px; bottom: calc(110px + var(--safe-b)); width: calc(100vw - 32px); z-index: calc(var(--z-dock) + 1); }
  /* …and the chat button itself sits IN the dock, bottom-left of the screen, left of the big button (game.css makes
     room), so it never covers a control */
  .cov-game .cov-pill { position: fixed; left: 16px; bottom: calc(37px + var(--safe-b)); width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 16px; background: var(--night-3); border: 1px solid var(--line-2); box-shadow: 0 4px 0 var(--edge-dark); z-index: calc(var(--z-dock) + 1); }
  .cov-game .cov-pill::after { inset: -4px; }
  .cov-game .cov-pill-t { display: none; }
  .cov-game .cov-pill .badge { position: absolute; top: -6px; right: -6px; margin: 0; box-shadow: 0 0 0 2px var(--night-0); }
  .cov-game .cov-pill .ic { width: 22px; height: 22px; }
  /* game mode (§1: the chat never covers your game): the newest line fades in right beside the pill, in the pill's own
     band of the stage (each game puts the pill where nothing needs reading or tapping), never stacked above it */
  .cov-game { flex-direction: row; align-items: center; gap: 6px; }
  .cov-game .cov-pill { order: -1; flex: none; }
  .cov-game .cov-feed { flex: 1 1 auto; min-width: 0; width: auto; }
  .cov-feed { gap: 3px; }
  .cov-line, .cov-line.is-lite { gap: 6px; font-size: 13px; line-height: 1.3; }
  .cov-av, .cov-av .chip, .cov-line.is-sys .cov-ic { width: 18px; height: 18px; }
  .cov-line.is-sys .cov-ic svg { width: 12px; height: 12px; }
  .cov-t { padding-top: 1px; }
  /* on a phone the lines float over busy screens (a small stage, the seats): a soft night plate keeps each one
     readable, one line each */
  .cov .cov-line { width: fit-content; max-width: 100%; padding: 2px 7px 2px 3px; border-radius: 9px; background: rgba(13, 10, 28, .74); }
  .cov-lobby .cov-line, .cov-results .cov-line { background: rgba(13, 10, 28, .92); }
  .cov .cov-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* short phones (an iPhone SE, under 740px tall): no room for a line between the tray and the dock, so game mode floats
   none (the chat button's badge counts what came in) and the tray is never covered (§8e). Taller phones keep the line;
   game.js fitPhone() leaves its band free above the dock. */
@media (max-width: 700px) and (max-height: 739px) {
  .cov-game .cov-feed { display: none; }
}
/* …and on any phone where a game's control still can't clear that band (game.js sets the class) */
@media (max-width: 700px) {
  body.gm-noline .cov-game .cov-feed { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-dots i { animation: none; opacity: .8; }
}

/* ---------------------------------------------------------------- desktop: the bottom-RIGHT corner, wake on hover
   (founder: "hover over the corner and it opens, react and respond there, on the screen, not a frame" and "move it to
   the bottom right, it has more empty space"). No panel: the lines turn solid, each gets reactions + Reply on hover,
   and a message bar sits under them. */
.cov-hist, .cov-compose, .cov-replying { display: none; }
@media (min-width: 701px) {
  .cov-game, .cov-lobby, .cov-results { left: auto; right: 24px; bottom: 24px; width: min(330px, calc(100vw - 48px)); align-items: flex-end; }
  .cov .cov-feed { align-items: flex-end; }
  /* resting lines ignore the mouse (§8e), so they never block a click on what's under them (the party rail's bottom
     rows with a full party); the pill (and Enter or /) wakes the chat */
  .cov .cov-feed .cov-line { pointer-events: none; }
  .cov-pill { pointer-events: auto; }
  .cov.is-awake { pointer-events: auto; padding: 14px 0 0 14px; margin: -14px 0 0 -14px; }  /* a forgiving hover area */
  .cov.is-awake .cov-feed, .cov.is-awake .cov-pill { display: none; }
  .cov.is-awake .cov-hist:not([hidden]) {
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px; list-style: none; margin: 0; padding: 0 0 2px;
    width: 100%;   /* no scroll box: it would clip the reaction bar that pops out beside a line (the newest 8 lines show) */
  }
  .cov-hist::-webkit-scrollbar { display: none; }
  .cov-hist .cov-line { position: relative; flex: none; animation: none !important; opacity: 1 !important; width: fit-content; max-width: 100%;
    padding: 4px 10px 4px 5px; border-radius: 10px; background: rgba(13, 10, 28, .92); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .8); }
  .cov-hist .cov-line:hover { background: rgba(29, 24, 56, .97); }
  .cov-rq { display: block; margin-bottom: 2px; font: 700 11.5px/1.25 var(--f-ui); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
  .cov-rx.is-mine b { color: var(--grape-ink, #CFC4FF); }
  /* hover a line: quick reactions + Reply, to its left (the corner is on the right) */
  .cov-tools { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); display: none; gap: 1px; padding: 3px;
    border-radius: 11px; background: rgba(13, 10, 28, .96); border: 1px solid var(--line-2); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .9); white-space: nowrap; }
  .cov-hist .cov-line:hover .cov-tools { display: flex; }
  .cov-tools button { appearance: none; border: 0; background: none; cursor: pointer; height: 28px; min-width: 30px; padding: 0 4px; border-radius: 8px;
    font: 400 16px/1 system-ui, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; color: var(--ink-2); }
  .cov-tools button[data-rx="GG"] { font: 900 12px/1 var(--f-ui); }
  .cov-tools button:hover { background: rgba(255, 255, 255, .09); color: var(--ink); }
  .cov-tools .cov-reply { font: 800 12.5px/1 var(--f-ui); padding: 0 9px; border-left: 1px solid var(--line-2); border-radius: 0 8px 8px 0; }
  .cov.is-awake .cov-replying:not([hidden]) { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 5px 6px 5px 10px;
    border-radius: 9px; background: rgba(13, 10, 28, .92); font: 700 12.5px/1 var(--f-ui); color: var(--ink-3); }
  .cov-replying b { color: var(--ink-2); }
  .cov-replying button { appearance: none; border: 0; background: none; cursor: pointer; color: var(--ink-3); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; }
  .cov-replying button:hover { color: var(--ink); background: rgba(255, 255, 255, .08); }
  .cov.is-awake .cov-compose { display: flex; align-items: center; gap: 6px; width: 100%; }
  .cov-in { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--line-3); background: rgba(13, 10, 28, .94);
    color: var(--ink); font: 600 14.5px/1 var(--f-ui); outline: none; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .9); }
  .cov-in::placeholder { color: var(--ink-3); }
  .cov-in:focus { border-color: var(--grape); }
  .cov-send { appearance: none; flex: none; width: 42px; height: 42px; border: 0; border-radius: 13px; cursor: pointer; display: grid; place-items: center;
    background: var(--grape); color: #fff; box-shadow: 0 3px 0 var(--grape-edge); }
  .cov-send:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--grape-edge); }
}
@media (min-width: 701px) {
  /* the lobby's right column holds Buy in / Start / Cover, so its corner is the bottom-LEFT (same behaviour) */
  .cov-lobby { left: 24px; right: auto; align-items: flex-start; }
  .cov-lobby .cov-feed, .cov-lobby.is-awake .cov-hist:not([hidden]) { align-items: flex-start; }
  .cov-lobby .cov-tools { right: auto; left: calc(100% + 6px); }
  .cov-lobby.is-awake { padding: 14px 14px 0 0; margin: -14px -14px 0 0; }
}
@media (min-width: 701px) {
  /* awake lines take the mouse (resting .cov-line ignores it), so hovering one shows its reactions + Reply */
  .cov-hist .cov-line, .cov-hist .cov-line * { pointer-events: auto; }
  /* an invisible bridge across the gap between a line and its bar, so moving onto the bar keeps it open */
  .cov-tools::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: 100%; width: 10px; }
  .cov-lobby .cov-tools::after { left: auto; right: 100%; }
}
@media (min-width: 701px) {
  /* founder: lower, right at the bottom edge of the screen */
  .cov-game, .cov-results, .cov-lobby { bottom: 12px; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  /* QA: the rail is 280px here: the game corner is no wider, so its lines never spill onto the stage */
  .cov-game { width: min(280px, calc(100vw - 48px)); }
}
/* QA: tablets (701–980): the lobby's Buy in / Start button is a sticky dock along the bottom (lobby.css), which hid the
   chat pill under it, so the pill sits just above the dock; on results (up to 900 wide) it clears the sticky
   Play again / Leave row the same way */
@media (min-width: 701px) and (max-width: 980px) {
  .cov-lobby { bottom: calc(132px + var(--safe-b)); z-index: calc(var(--z-dock) + 1); }
}
@media (min-width: 701px) and (max-width: 900px) {
  .cov-results { bottom: 112px; }
}
@media (min-width: 701px) {
  /* the emote button in the awake chat's bar (PC): same height as the message bar */
  .cov-emote { flex: none; display: flex; }
  .cov-emote .chat-emote-btn { width: 42px; height: 42px; border-radius: 13px; }
}
@media (min-width: 701px) {
  /* @mentions (founder: "like Discord, so I know I tagged them properly"): the input's text is drawn by a mirror layer
     under it, so a properly tagged name shows as a highlighted tag right in the box */
  .cov-field { position: relative; flex: 1; min-width: 0; height: 42px; display: flex; overflow: hidden; border-radius: 13px;
    border: 1px solid var(--line-3); background: rgba(13, 10, 28, .94); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .9); }
  .cov-field:focus-within { border-color: var(--grape); }
  .cov-field .cov-in { position: relative; z-index: 1; flex: 1; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent;
    box-shadow: none; color: transparent; caret-color: var(--ink); padding: 0 14px; }
  .cov-field .cov-in:focus { border: 0; }
  .cov-field .cov-in::placeholder { color: var(--ink-3); }
  .cov-field .cov-in::selection { color: var(--ink); background: rgba(123, 97, 255, .45); }
  .cov-mirror { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; display: flex; align-items: center; padding: 0 14px; white-space: pre;
    font: 600 14.5px/1 var(--f-ui); color: var(--ink); pointer-events: none; }
  .cov-mirror .chat-at { font-weight: inherit; padding: 0; border-radius: 4px; color: #fff;
    background: color-mix(in srgb, var(--grape) 45%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--grape) 45%, transparent); }
  /* the picker, right above the bar */
  .cov.is-awake .cov-at-pick:not([hidden]) { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 6px; width: 100%;
    border-radius: 14px; background: rgba(21, 17, 41, .98); border: 1px solid var(--line-2); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .9); pointer-events: auto; }
  .cov-at-pick li { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px; border-radius: 10px; cursor: pointer; font: 700 14px/1 var(--f-ui); color: var(--ink-2); }
  .cov-at-pick li.on, .cov-at-pick li:hover { background: var(--grape-soft); color: var(--ink); }
  .cov-at-pick li b { color: inherit; font-weight: 800; }
  .cov-at-av { width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
  .cov-at-av .chip { width: 22px; height: 22px; }
  .cov-at-pick .cov-at-hint { height: auto; padding: 6px 10px 2px; font: 600 11.5px/1 var(--f-ui); color: var(--ink-3); cursor: default; background: none !important; }
  /* tags in sent lines */
  .cov-line .chat-at { padding: 0 4px; border-radius: 5px; }
}
.cov-at-pick { display: none; }
@media (min-width: 701px) {
  /* founder: the lobby's chat sits bottom-RIGHT too, same as every other screen (lobby.css keeps that corner free) */
  .cov-lobby { left: auto; right: 24px; align-items: flex-end; }
  .cov-lobby .cov-feed, .cov-lobby.is-awake .cov-hist:not([hidden]) { align-items: flex-end; }
  .cov-lobby .cov-tools { left: auto; right: calc(100% + 6px); }
  .cov-lobby .cov-tools::after { right: auto; left: 100%; }
  .cov-lobby.is-awake { padding: 14px 0 0 14px; margin: -14px 0 0 -14px; }
  .cov-lobby .cov-feed .cov-line { pointer-events: none; }   /* resting lines never block Buy in / Start / Cover */
}
@media (min-width: 701px) {
  /* lobby (PC): just the chat button in the bottom-right corner; live messages show as speech bubbles over the
     Chippers in the seats, so no fading lines float over the Buy in / Start / Cover buttons. Hover the button = chat */
  .cov-lobby .cov-feed { display: none; }
}