/* bos-bridge.css — the pill and the panel that lead every concept back to Black Ops Studio.
   Neutral on purpose (graphite glass, one red dot) so it sits on any concept without taking its colours. */
.bosb-pill, .bosb-sheet { --bosb-ink: #f2f0ee; --bosb-muted: #b9b6b3; --bosb-red: #c4162a; --bosb-glass: rgba(16, 15, 15, 0.78);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }

.bosb-pill { position: fixed; z-index: 2147483000; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: var(--bosb-glass); color: var(--bosb-ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: transform 0.25s ease, background 0.25s ease; }
.bosb-pill:hover { transform: translateY(-1px); background: rgba(16, 15, 15, 0.9); }
.bosb-pill:focus-visible, .bosb-btn:focus-visible, .bosb-link:focus-visible, .bosb-x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.bosb-pill-sep { opacity: 0.45; }
.bosb-pill-short { font-weight: 650; }
.bosb-pos-bl { left: var(--bosb-x, 16px); bottom: calc(var(--bosb-y, 16px) + env(safe-area-inset-bottom, 0px)); }
.bosb-pos-br { right: var(--bosb-x, 16px); bottom: calc(var(--bosb-y, 16px) + env(safe-area-inset-bottom, 0px)); }
.bosb-pos-tl { left: var(--bosb-x, 16px); top: var(--bosb-y, 16px); }
.bosb-pos-tr { right: var(--bosb-x, 16px); top: var(--bosb-y, 16px); }
.bosb-pos-bc { left: 50%; bottom: calc(var(--bosb-y, 16px) + env(safe-area-inset-bottom, 0px)); translate: -50% 0; }
@media (max-width: 640px) { .bosb-pill-long, .bosb-pill-sep { display: none; } .bosb-pill { min-height: 36px; font-size: 12.5px; padding: 0 13px 0 11px; } }

.bosb-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--bosb-red); box-shadow: 0 0 0 3px rgba(196, 22, 42, 0.22); }

.bosb-sheet { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; background: transparent; max-width: none; max-height: none;
  width: 100%; height: 100%; display: none; }
.bosb-sheet[open] { display: grid; place-items: center; }
.bosb-sheet::backdrop { background: rgba(8, 8, 8, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bosb-card { position: relative; width: min(440px, calc(100% - 32px)); padding: 28px 26px 22px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: #121111; color: var(--bosb-ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.2, .8, .2, 1); }
.bosb-sheet.is-open .bosb-card { opacity: 1; transform: none; }
.bosb-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent;
  color: var(--bosb-muted); font: 400 24px/1 inherit; cursor: pointer; }
.bosb-x:hover { color: var(--bosb-ink); background: rgba(255, 255, 255, 0.06); }
.bosb-kicker { display: flex; align-items: center; gap: 9px; margin: 0 40px 14px 0; color: var(--bosb-muted); font-size: 12.5px; letter-spacing: 0.02em; }
.bosb-title { margin: 0; font-size: 23px; font-weight: 650; line-height: 1.22; letter-spacing: -0.01em; color: var(--bosb-ink); }
.bosb-text { margin: 12px 0 0; color: var(--bosb-muted); font-size: 15px; line-height: 1.55; }
.bosb-actions { display: grid; gap: 10px; margin-top: 22px; }
.bosb-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22); color: var(--bosb-ink); font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease; }
.bosb-btn:hover { background: rgba(255, 255, 255, 0.07); }
.bosb-btn--main { background: var(--bosb-red); border-color: var(--bosb-red); color: #fff; }
.bosb-btn--main:hover { background: #d81d33; transform: translateY(-1px); }
.bosb-link { display: block; margin: 14px auto 0; min-height: 40px; padding: 0 12px; border: 0; background: none; color: var(--bosb-muted);
  font: 500 14px/1 inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bosb-link:hover { color: var(--bosb-ink); }
@media (max-width: 640px) {
  .bosb-sheet[open] { place-items: end center; }
  .bosb-card { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateY(40px); }
}
@media (prefers-reduced-motion: reduce) { .bosb-card, .bosb-pill { transition: none; } }