/* Components: the parts every page is built from. Buttons, chips, cards and
   section heads, segmented controls, fields, switches, menus, messages and
   empty states, people and coins, name badges, toasts. Each reads the tokens;
   none knows about a page. */

/* ───────── Buttons ───────── */

.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--control-h);
  padding: 0 11px;
  border-radius: var(--r-control);
  font: var(--control-font);
  letter-spacing: var(--tracking);
  white-space: nowrap;
  user-select: none;
  transition:
    background 150ms,
    box-shadow 150ms,
    color 150ms,
    opacity 150ms;
}
.tb-btn:disabled {
  opacity: 0.5;
}
.tb-btn .i {
  margin: 0 -1px;
}
.tb-btn-sm {
  height: var(--control-h-sm);
  padding: 0 10px;
}
.tb-btn-xs {
  gap: 6px;
  height: var(--control-h-xs);
  padding: 0 9px;
}
.tb-btn-lg {
  height: var(--control-h-lg);
  padding: 0 16px;
  border-radius: 10px;
  font-size: var(--text-xl);
}
/* A raised button: the usual secondary action. */
.tb-btn-secondary {
  background: var(--raised);
  color: var(--ink);
  box-shadow: var(--sh-raised);
}
.tb-btn-secondary:hover:not(:disabled) {
  background: var(--raised-hover);
}
.tb-btn-ghost {
  color: var(--ink-2);
}
.tb-btn-ghost:hover:not(:disabled) {
  background: rgb(255 255 255 / 5%);
  color: var(--ink);
}
/* The strongest action on a dark sheet is a light one. */
.tb-btn-light {
  background: linear-gradient(180deg, #ffffff 0%, #e6e6ea 100%);
  color: #0f0f11;
  box-shadow:
    inset 0 -1px 0 rgb(0 0 0 / 12%),
    0 0 0 1px rgb(255 255 255 / 14%),
    0 1px 2px rgb(0 0 0 / 50%);
}
.tb-btn-light:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffffff 0%, #efeff2 100%);
}
/* Blue acts on someone or something: watch, open, go. */
.tb-btn-blue {
  background: linear-gradient(180deg, #4b8cfb 0%, #2f6ff0 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 20%),
    0 0 0 1px #2158d4,
    0 1px 2px rgb(0 0 0 / 45%);
}
.tb-btn-blue:hover:not(:disabled) {
  background: linear-gradient(180deg, #5795fb 0%, #3877f2 100%);
}
.tb-btn-danger {
  background: linear-gradient(180deg, #ea5359 0%, #d63440 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 0 0 1px #b52732,
    0 1px 2px rgb(0 0 0 / 45%);
}
/* A button that just did its job, like Copy after copying. */
.tb-btn-ok,
.tb-btn-ok:hover:not(:disabled) {
  background: var(--up-soft);
  color: var(--up-ink);
  box-shadow: inset 0 0 0 1px rgb(18 183 106 / 30%);
}
.tb-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--control-h-bar);
  height: var(--control-h-bar);
  flex-shrink: 0;
  border-radius: var(--r-control);
  color: var(--ink-2);
  transition:
    background 150ms,
    color 150ms;
}
.tb-icon-btn:hover:not(:disabled) {
  background: rgb(255 255 255 / 6%);
  color: var(--ink);
}
/* Icon links side by side in one raised strip. */
.tb-btn-group {
  display: inline-flex;
  align-items: center;
  border-radius: 9px;
  background: var(--raised);
  box-shadow: var(--sh-raised);
}
.tb-btn-group > * {
  display: inline-grid;
  place-items: center;
  height: var(--control-h);
  min-width: 34px;
  padding: 0 8px;
  color: var(--ink-2);
  transition:
    background 150ms,
    color 150ms;
}
.tb-btn-group > * + * {
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 7%);
}
.tb-btn-group > :first-child {
  border-radius: 9px 0 0 9px;
}
.tb-btn-group > :last-child {
  border-radius: 0 9px 9px 0;
}
.tb-btn-group > :hover {
  background: rgb(255 255 255 / 5%);
  color: var(--ink);
}

/* ───────── Chips, counts, keys ───────── */

.tb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--chip-h);
  padding: 0 6px;
  border-radius: var(--r-chip);
  background: rgb(255 255 255 / 6.5%);
  color: var(--ink-2);
  font: var(--weight-medium) var(--text-sm) / 1 var(--font);
  letter-spacing: -0.005em;
  white-space: nowrap;
  vertical-align: middle;
}
.tb-chip .i {
  width: 13px;
  height: 13px;
}
.tb-chip-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}
.tb-chip-green {
  background: var(--up-soft);
  color: var(--up-ink);
}
.tb-chip-red {
  background: var(--down-soft);
  color: var(--down-ink);
}
.tb-chip-amber {
  background: var(--amber-soft);
  color: var(--amber-ink);
}
.tb-chip-orange {
  background: var(--orange-soft);
  color: var(--orange-ink);
}
.tb-chip-violet {
  background: var(--violet-soft);
  color: var(--violet-ink);
}
.tb-chip-blue {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.tb-count {
  display: inline-grid;
  place-items: center;
  min-width: var(--count-h);
  height: var(--count-h);
  padding: 0 6px;
  border-radius: 6px;
  background: rgb(255 255 255 / 7%);
  color: var(--ink-2);
  font: var(--weight-strong) var(--text-sm) / 1 var(--font);
  font-variant-numeric: tabular-nums;
}
.tb-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  background: rgb(255 255 255 / 6%);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 4%);
  color: var(--ink-3);
  font: var(--weight-medium) var(--text-xs) / 1 var(--font);
}

/* ───────── Cards and section heads ───────── */

.tb-card {
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--sh-card);
}
/* A section on a page: its icon, title and count, and a note on the right. */
.tb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 10px;
}
.tb-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tb-section-title h2 {
  font-size: 14.5px;
  line-height: 20px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking);
}
.tb-title-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, #232327 0%, #1c1c20 100%);
  box-shadow: var(--sh-raised);
  color: var(--ink-2);
}
.tb-section-note {
  font-size: var(--text-md);
  color: var(--ink-3);
}

/* ───────── Segmented control ───────── */

.tb-seg-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--well);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%);
}
.tb-seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--seg-h);
  padding: 0 9px;
  border-radius: 7px;
  color: var(--ink-3);
  font: var(--weight-strong) var(--text-md) / 1 var(--font);
  white-space: nowrap;
  transition:
    color 150ms,
    background 150ms,
    box-shadow 150ms;
}
.tb-seg:hover {
  color: var(--ink-2);
}
.tb-seg.on {
  background: var(--selected);
  color: var(--ink);
  box-shadow: var(--sh-selected);
}
/* Segmented controls glide: one raised pill moves to the chosen segment
   instead of the highlight jumping (TB.slide). */
.tb-seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: 7px;
  background: var(--selected);
  box-shadow: var(--sh-selected);
  pointer-events: none;
  transition: opacity 150ms;
}
.tb-seg-group.sliding .tb-seg {
  z-index: 1;
  transition: color 260ms var(--glide);
}
.tb-seg-group.sliding .tb-seg.on {
  background: none;
  box-shadow: none;
}
.tb-seg .tb-count {
  height: 17px;
  min-width: 17px;
  padding: 0 4px;
  font-size: var(--text-2xs);
}

/* ───────── Fields and switches ───────── */

.tb-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 7px 0 10px;
  border-radius: 9px;
  background: var(--well);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
  color: var(--ink-3);
  transition: box-shadow 150ms;
}
.tb-field:focus-within {
  box-shadow:
    inset 0 0 0 1px #5a8ff7,
    0 0 0 3px rgb(59 123 246 / 22%);
}
.tb-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  outline: none;
  color: var(--ink);
  font-size: var(--text-body);
}
.tb-field input::placeholder {
  color: var(--ink-4);
}
.tb-field input::-webkit-search-cancel-button {
  display: none;
}
.tb-switch {
  appearance: none;
  position: relative;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  border-radius: 99px;
  background: rgb(255 255 255 / 14%);
  cursor: pointer;
  transition: background 180ms var(--ease);
}
.tb-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 40%);
  transition: transform 180ms var(--ease);
}
.tb-switch:checked {
  background: var(--up);
}
.tb-switch:checked::after {
  transform: translateX(14px);
}

/* ───────── Menus and popovers ───────── */
/* A trigger with data-menu="id" opens the .tb-menu with that id (TB.menus). */

.tb-menu {
  position: absolute;
  z-index: var(--z-menu);
  min-width: 240px;
  padding: 6px;
  border-radius: 12px;
  background: var(--popover);
  box-shadow: var(--sh-pop);
  color: var(--frame-text);
  animation: tb-pop-in 160ms var(--ease);
}
.tb-menu[hidden] {
  display: none;
}
.tb-menu-title {
  padding: 6px 8px 4px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--frame-muted);
}
.tb-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #d6d6da;
  font-size: var(--text-body);
  text-align: left;
}
.tb-menu-item:hover:not(:disabled) {
  background: #28282c;
  color: #fff;
}
.tb-menu-item .i {
  color: var(--frame-muted);
}
.tb-menu-item:hover .i {
  color: #fff;
}
.tb-menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: rgb(255 255 255 / 7%);
}
/* A coin's Open-on button and the small switch beside it stay together; the switch's menu hangs under it (TB.venue.button). */
.venue-open {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.venue-pick {
  position: relative;
  display: inline-flex;
}
.venue-pick .tb-menu {
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
}
.tb-menu-item[aria-checked="true"] {
  color: #fff;
  font-weight: var(--weight-medium);
}

/* ───────── Messages, empty states, loading ───────── */

.tb-message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: var(--text-base);
  line-height: 18px;
}
.tb-message .i {
  margin-top: 1px;
}
.tb-message b {
  font-weight: var(--weight-bold);
}
.tb-message.error {
  background: rgb(255 100 133 / 9%);
  color: var(--down-ink);
  box-shadow: inset 0 0 0 1px rgb(255 100 133 / 22%);
}
.tb-message.warn {
  background: var(--orange-soft);
  color: var(--orange-ink);
  box-shadow: inset 0 0 0 1px rgb(240 138 62 / 24%);
}
.tb-message.info {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.tb-message .tb-btn {
  margin: -4px -4px -4px auto;
}
.tb-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 52px 24px;
  text-align: center;
}
.tb-empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, #232327 0%, #1c1c20 100%);
  box-shadow:
    var(--sh-raised),
    0 6px 14px -6px rgb(0 0 0 / 60%);
  color: var(--ink-3);
}
.tb-empty h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.tb-empty p {
  max-width: 380px;
  font-size: var(--text-body);
  color: var(--ink-3);
}
.tb-empty .tb-btn {
  margin-top: 10px;
}
/* Placeholders while something loads. */
.tb-skel {
  display: block;
  border-radius: 6px;
  background: rgb(255 255 255 / 6.5%);
  animation: tb-shimmer 1.2s ease-in-out infinite alternate;
}
.tb-skel-lines {
  display: grid;
  flex: 1;
  gap: 7px;
}
.tb-skel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.tb-skel-row + .tb-skel-row {
  border-top: 1px solid var(--line-soft);
}
.tb-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.75px solid currentColor;
  border-right-color: transparent;
  opacity: 0.7;
  animation: tb-spin 700ms linear infinite;
}

/* ───────── People, coins and names ───────── */

/* A person: their picture, or one flat, quiet colour from their name with
   their initials (TB.av). Tiny circles carry only the colour. */
.av {
  --s: 28px;
  --h: 220;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  flex-shrink: 0;
  border-radius: 50%;
  background: hsl(var(--h) 12% 29%);
  color: hsl(var(--h) 22% 86%);
  font: var(--weight-bold) calc(var(--s) * 0.4) / 1 var(--font);
  letter-spacing: 0;
  text-transform: uppercase;
  user-select: none;
}
.av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.av.sq {
  border-radius: 28%;
}
/* Someone who is all out of a coin fades back. */
.av.out {
  opacity: 0.5;
}
/* Live on stream right now. */
.av.live::after {
  content: '';
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--down);
  box-shadow: 0 0 0 2px var(--av-halo, var(--sheet));
}
/* Faces overlapping in a row. */
.stack {
  display: inline-flex;
  align-items: center;
}
.stack .av {
  box-shadow: 0 0 0 2px var(--av-halo, var(--surface));
}
.stack .av + .av {
  margin-left: -7px;
}

/* A coin: its picture, or one flat colour from the ticker with its first
   letter (TB.coin). */
.coin {
  --s: 32px;
  --h: 220;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: calc(var(--s) * 0.28);
  background: hsl(var(--h) 14% 27%);
  color: hsl(var(--h) 24% 88%);
  font: 650 calc(var(--s) * 0.42) / 1 var(--font);
  letter-spacing: -0.02em;
  user-select: none;
}
.coin img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A picture brings its own background; round logos stay round. */
.coin.has-img {
  background: none;
}
/* An amount in SOL, with the SOL mark in front. */
.sol-amount {
  white-space: nowrap;
}
.sol-amount .coin {
  --s: 14px;
  margin: 0 4px 0 1px;
  border-radius: 50%;
  vertical-align: middle;
}

/* A name inside running text: a badge with the person's small circle, or
   the X logo when it's an X account (TB.tag, TB.rich). No fill, a quiet edge. */
.name-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: var(--tag-h);
  padding: 0 9px 0 4px;
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--tag-h);
  letter-spacing: -0.005em;
  white-space: nowrap;
  vertical-align: middle;
}
.name-tag > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.name-tag .av {
  --s: 16px;
}
.name-tag .name-x {
  width: 16px;
  height: 16px;
  padding: 2px;
  color: var(--ink);
}
.name-tag.sm {
  gap: 5px;
  height: var(--tag-h-sm);
  padding: 0 8px 0 3px;
  font-size: var(--text-md);
  line-height: var(--tag-h-sm);
}
.name-tag.sm .av,
.name-tag.sm .name-x {
  --s: 14px;
  width: 14px;
  height: 14px;
}

/* ───────── Live dot ───────── */

.live-dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--tone, var(--up));
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--tone, var(--up));
  opacity: 0;
  animation: tb-ripple 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

/* ───────── Floating bar ───────── */
/* A glass pill that floats over the page: the ask bar, the assistant's
   composer and Stream's controls. .tb-float-dock puts one at the bottom
   centre of the sheet. */
.tb-float {
  display: flex;
  gap: 8px;
  min-height: 44px;
  padding: 5px;
  border-radius: 22px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--sh-float);
}
.tb-float-dock {
  position: absolute;
  z-index: var(--z-askbar);
  left: 50%;
  bottom: 20px;
  align-items: center;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
}
/* A round control in the bar; .main is the one it's for. */
.tb-float-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--ink-2);
  transition:
    background 150ms,
    color 150ms,
    transform 150ms;
}
.tb-float-btn:hover:not(:disabled) {
  background: rgb(255 255 255 / 7%);
  color: var(--ink);
}
.tb-float-btn:disabled {
  color: var(--ink-4);
}
.tb-float-btn.main {
  background: #f4f4f5;
  color: #0f0f11;
}
.tb-float-btn.main:hover:not(:disabled) {
  background: #fff;
  color: #0f0f11;
  transform: scale(1.04);
}
.tb-float-btn.main:disabled {
  background: rgb(255 255 255 / 7%);
  color: var(--ink-4);
}
.tb-float-sep {
  width: 1px;
  height: 20px;
  flex-shrink: 0;
  background: var(--line);
}
/* A labelled button in the bar is a pill as tall as the round ones. */
.tb-float .tb-btn {
  height: 34px;
  padding: 0 14px 0 12px;
  border-radius: 17px;
}
@media (max-width: 760px) {
  .tb-float-dock {
    bottom: 16px;
  }
}

/* ───────── Floating panel ───────── */
/* A card that floats over the right of the sheet (TB.panel): it glides in
   from the right, the page stays usable beside it, and on a phone it rises
   from the bottom instead. */
.tb-panel {
  position: absolute;
  z-index: var(--z-panel);
  top: calc(var(--hdr-h) + 8px);
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100% - 24px));
  border-radius: 16px;
  background: var(--popover);
  box-shadow:
    var(--sh-float),
    -24px 0 60px -30px rgb(0 0 0 / 80%);
  opacity: 0;
  transform: translateX(32px) scale(0.985);
  transform-origin: right center;
  transition:
    opacity 240ms var(--glide),
    transform 420ms var(--glide);
}
.tb-panel.open {
  opacity: 1;
  transform: none;
}
.tb-panel.closing {
  opacity: 0;
  transform: translateX(32px) scale(0.985);
  transition:
    opacity 180ms ease-in,
    transform 240ms ease-in;
}
.tb-panel:focus {
  outline: none;
}
.tb-panel-scroll {
  flex: 1;
  min-height: 0;
  padding: 14px 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 12%) transparent;
}
/* Its bar and sections (TB.blocks.panelBar, panelSection). */
.pn-bar {
  position: sticky;
  z-index: 3;
  top: -14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -14px -18px 14px;
  padding: 12px 12px 12px 18px;
  border-radius: 16px 16px 0 0;
  background: rgb(28 28 31 / 84%);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: box-shadow 200ms;
}
.tb-panel.scrolled .pn-bar {
  box-shadow:
    0 1px 0 var(--line-soft),
    0 12px 24px -16px rgb(0 0 0 / 80%);
}
.pn-bar-text {
  display: grid;
  flex: 1;
  min-width: 0;
}
.pn-bar-text b {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
.pn-bar-text small {
  overflow: hidden;
  font-size: var(--text-md);
  color: var(--ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pn-back {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-right: -2px;
  border-radius: 8px;
  background: var(--selected);
  box-shadow: var(--sh-selected);
  color: var(--ink-2);
}
.pn-back:hover {
  color: var(--ink);
}
.pn-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 12px;
  font-size: var(--text-md);
  line-height: 17px;
  color: var(--ink-2);
}
.pn-note .i {
  margin-top: 1px;
  color: var(--ink-4);
}
/* A section in the panel: its icon and title, and a line on what it holds. */
.pn-sec {
  margin: 22px 0 4px;
}
.pn-sec p {
  margin-top: 6px;
  font-size: var(--text-md);
  line-height: 17px;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .tb-panel {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    height: min(80%, 680px);
    transform: translateY(40px);
    transform-origin: bottom center;
  }
  .tb-panel.closing {
    transform: translateY(40px);
  }
}

/* ───────── Dialogs ───────── */
/* A card over a dimmed page, for one thing at a time (TB.dialog). */

.tb-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(6 6 8 / 70%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: tb-fade-in 180ms ease-out both;
}
.tb-dialog-card {
  width: min(var(--dialog-w, 720px), 100%);
  max-height: 100%;
  overflow: auto;
  padding: 16px;
  border-radius: 16px;
  background: var(--popover);
  box-shadow: var(--sh-pop);
  animation: tb-pop-in 220ms var(--ease) both;
}
.tb-dialog-card:focus {
  outline: none;
}
.tb-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -6px -4px 16px 2px;
}
.tb-dialog-head h2 {
  font-size: var(--text-headline);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
}
.tb-dialog-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.tb-dialog-foot p {
  margin-right: auto;
  color: var(--ink-3);
  font-size: var(--text-md);
}

/* ───────── Toasts ───────── */
/* One at a time, rising above the ask bar (TB.toast). */

.tb-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  max-width: 100%;
  padding: 6px 6px 6px 12px;
  border-radius: 11px;
  background: #26262b;
  color: #f4f4f5;
  font-size: var(--text-body);
  pointer-events: auto;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 14px 30px -8px rgb(0 0 0 / 70%);
  animation: tb-toast-in 480ms var(--ease) both;
}
.tb-toast.leaving {
  animation: tb-toast-out 320ms ease-in both;
}
.tb-toast > .i:first-child {
  color: var(--up);
}
.tb-toast.info > .i:first-child {
  color: var(--accent-ink);
}
.tb-toast.error > .i:first-child {
  color: var(--down);
}
.tb-toast button {
  display: inline-grid;
  place-items: center;
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  border-radius: 7px;
  color: #8b8b92;
}
.tb-toast button:hover {
  background: rgb(255 255 255 / 8%);
  color: #fff;
}

/* Touch screens get taller segments, and every small control a finger-sized
   (44 px) place to tap, reaching past its edges without moving anything. */
@media (pointer: coarse) {
  .tb-seg {
    min-height: 36px;
  }
  :where(
      .tb-btn,
      .tb-icon-btn,
      .tb-btn-group > *,
      .coin-pill,
      .rm-who,
      .onair-ca,
      a.sym,
      .byline .pending a,
      .nav-brand,
      .auth-legal a
    ) {
    position: relative;
  }
  :where(
      .tb-btn,
      .tb-icon-btn,
      .tb-btn-group > *,
      .coin-pill,
      .rm-who,
      .onair-ca,
      a.sym,
      .byline .pending a,
      .nav-brand,
      .auth-legal a
    )::after {
    content: '';
    position: absolute;
    inset: min(0px, calc((100% - 44px) / 2)) min(0px, calc((100% - 44px) / 2));
  }
}