/* "Busto says" live commentary panel and Busto's vote plan (busto-says.js). Load after styles.css: it uses the site's
   tokens (--panel, --coral-l, --lav, --mono ...) and falls back to the same values when they are missing. */

/* ------------------------------------------------------------ panel */
.bs {
  position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); overflow: hidden;
  background: rgba(9, 8, 16, .74); border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px;
  font-family: var(--font, "Geist", ui-sans-serif, system-ui, sans-serif); color: var(--fg-2, #dcdae6);
}
.bs [hidden] { display: none !important; }
.bs p, .bs h3 { margin: 0; }

.bs-who {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, rgba(255, 158, 136, .05), transparent 55%);
}
.bs-who > .bs-av { width: 40px; height: 40px; }
.bs-id { min-width: 0; }
.bs-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.bs-sub { margin-top: 2px; font-size: 12.5px; color: var(--muted, #9a98a8); line-height: 1.4; }
.bs-note { margin-top: auto; font-size: 12px; color: var(--dim, #6d6b7b); line-height: 1.45; }

/* avatar: the Busto die on a coral chip */
.bs-av {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 32% 26%, #ffb29d 0, var(--coral, #ee8570) 46%, #b45fcb 100%);
  box-shadow: 0 6px 18px rgba(238, 133, 112, .25), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.bs-av svg { width: 62%; height: 62%; display: block; }
.bs-av .bs-pip { fill: #3a1a14; }
.bs-av-sm { width: 22px; height: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

/* status pill, same shape as the overlay's LIVE pill */
.bs-status {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 8px; border-radius: 6px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  background: rgba(255, 255, 255, .08); color: var(--fg-2, #dcdae6);
}
.bs-pulse { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--dim, #6d6b7b); flex: none; }
.bs-status.is-talking { background: var(--coral, #ee8570); color: #1d0c09; }
.bs-status.is-talking .bs-pulse { background: #1d0c09; }
.bs-status.is-talking .bs-pulse::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid #1d0c09; opacity: 0;
  animation: bsPing 2s ease-out infinite;
}
.bs-status.is-offline { color: var(--muted, #9a98a8); }
@keyframes bsPing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

/* log: chat order, newest at the bottom */
.bs-body { position: relative; min-width: 0; }
.bs-log {
  list-style: none; margin: 0; padding: 14px 18px 12px 12px; height: 212px; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 2px; outline: none;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
}
.bs-log:focus-visible { box-shadow: inset 0 0 0 2px var(--coral-l, #ff9e88); border-radius: 0 13px 13px 0; }
.bs-log::-webkit-scrollbar { width: 6px; }
.bs-log::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 6px; }
.bs-log::-webkit-scrollbar-track { background: transparent; }
.bs-line {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 5px 6px; border-radius: 8px;
}
.bs-line:first-child { margin-top: auto; }
.bs-t {
  font-family: var(--mono, ui-monospace, monospace); font-feature-settings: "tnum" 1; font-size: 11px; color: var(--dim, #6d6b7b);
  text-align: right; white-space: nowrap;
}
.bs-x { font-size: 14px; line-height: 1.5; color: var(--fg-2, #dcdae6); overflow-wrap: anywhere; text-wrap: pretty; }
.bs-line:last-child .bs-x { color: #fff; }
.bs-dot {
  display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 2px; transform: rotate(45deg);
  vertical-align: 2px; background: var(--lav, #b9b0f0);
}
.k-poll .bs-dot { background: var(--violet-l, #6d5df2); }
.k-start .bs-dot, .k-recap .bs-dot { background: var(--lav, #b9b0f0); }
.k-win .bs-dot { background: var(--win, #5fe08c); }
.k-loss .bs-dot { background: var(--loss, #ff9480); }
.k-payout .bs-dot { background: var(--pink, #c77bd8); }
.k-bridge .bs-dot, .k-refund .bs-dot, .k-other .bs-dot { background: var(--muted, #9a98a8); }
.bs-line.is-new { animation: bsIn .6s ease-out; }
@keyframes bsIn {
  from { opacity: 0; transform: translateY(8px); background: rgba(255, 158, 136, .14); }
  to { opacity: 1; transform: none; background: transparent; }
}

/* nothing said yet: a shorter log (the empty line is centred over it) */
.bs.is-empty .bs-log { height: 132px; }
.bs-empty {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center;
  color: var(--muted, #9a98a8); font-size: 14px; line-height: 1.5; text-wrap: balance; pointer-events: none;
}
.bs-jump {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px;
  background: #fff; color: #08080b; font: 600 12.5px/1 var(--font, system-ui, sans-serif); cursor: pointer; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.bs-jump:hover { background: #e9e6f5; }
.bs-jump svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------ vote plan (inside main.js's .q boxes) */
.bs-plan {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; align-items: center;
  margin: -2px 0 12px; padding: 9px 12px; border-radius: 11px;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--line, rgba(255, 255, 255, .08));
}
.bs-plan > .bs-av { grid-row: 1; }
.bs-plan-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--fg-2, #dcdae6); }
.bs-plan-main b { color: #fff; font-weight: 600; }
.bs-plan-k { color: var(--muted, #9a98a8); }
.bs-plan-upd { font-family: var(--mono, monospace); font-size: 10.5px; color: var(--dim, #6d6b7b); letter-spacing: .04em; }
.bs-plan-text { color: var(--fg-2, #dcdae6); }
.bs-plan-why { grid-column: 2; font-size: 12.5px; line-height: 1.45; color: var(--fg-2, #dcdae6); text-wrap: pretty; }
.bs-plan-why .bs-plan-k { color: var(--dim, #6d6b7b); }

.bs-tag {
  margin-left: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid;
  font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
/* open poll: tentative, outlined */
.bs-tag-busto { color: var(--coral-l, #ff9e88); border-color: rgba(255, 158, 136, .5); background: rgba(255, 158, 136, .07); }
.bs-tag-agree, .bs-tag-overrule { color: var(--lav, #b9b0f0); border-color: rgba(185, 176, 240, .45); background: rgba(185, 176, 240, .06); }
/* closed poll: final, filled */
.bs-tag-decided-busto { color: #08080b; border-color: var(--coral-l, #ff9e88); background: var(--coral-l, #ff9e88); }
.bs-tag-holders { color: #08080b; border-color: var(--lav, #b9b0f0); background: var(--lav, #b9b0f0); }

/* the option Busto planned (dashed coral) or the holders' winning option after close (lavender) */
.opt.bs-planned:not([aria-pressed="true"]) { border-style: dashed; border-color: rgba(255, 158, 136, .6); }
.opt.bs-picked:not([aria-pressed="true"]) { border-color: rgba(185, 176, 240, .6); }
.bs-eyebrow {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 500; line-height: 1.1; letter-spacing: .08em;
  text-transform: uppercase; color: var(--coral-l, #ff9e88); white-space: nowrap;
}
.bs-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 1.5px; background: currentColor; transform: rotate(45deg); flex: none; }
.bs-eyebrow-holders { color: var(--lav, #b9b0f0); }

/* "Past votes": who decided each session (a second <small> under the vote weight, see the integration doc) */
.past .c small.bs-decided { margin-top: 1px; font-family: var(--font, system-ui, sans-serif); font-size: 12px; color: var(--muted, #9a98a8); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .bs { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .bs { grid-template-columns: minmax(0, 1fr); }
  .bs-who {
    flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px;
    border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: linear-gradient(90deg, rgba(255, 158, 136, .06), transparent 70%);
  }
  .bs-who > .bs-av { width: 34px; height: 34px; }
  .bs-id { flex: 1 1 auto; }
  .bs-status { align-self: center; }
  .bs-note { display: none; }
  .bs-log { height: 248px; padding: 12px 12px 10px 6px; }
  .bs.is-empty .bs-log { height: 112px; }
  .bs-line { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 5px 4px; }
  .bs-x { font-size: 13.5px; }
  .bs-plan { padding: 9px 10px; }
  .bs-plan-main { font-size: 13px; }
  .bs-tag { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-line.is-new, .bs-status.is-talking .bs-pulse::after { animation: none !important; }
}