/* The floating role switch — the prototype's only chrome. It sits outside the
   wireframe, bottom-left, and stays quiet: dark pill, one white tab for the role
   being viewed. The app itself now gets the full window width. */

.rolebar {
  position: fixed; left: 16px; bottom: 16px; z-index: 1100;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: calc(100vw - 32px);
  padding: 8px 10px 8px 14px;
  background: #111; color: #fff; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  font: 500 12px/1.3 Inter, system-ui, sans-serif;
}
.rolebar .rb-label { color: #9a9a9a; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.rolebar .rb-tabs { display: flex; gap: 2px; background: #1f1f1f; border-radius: 10px; padding: 3px; }
.rolebar .rb-tabs button {
  border: 0; background: transparent; color: #cfcfcf; cursor: pointer;
  font: 600 12px Inter, sans-serif; padding: 8px 12px; border-radius: 8px; min-height: 34px;
  transition: background .15s ease, color .15s ease;
}
.rolebar .rb-tabs button:hover { background: #2c2c2c; color: #fff; }
.rolebar .rb-tabs button.on { background: #fff; color: #111; }
.rolebar .rb-tabs button:focus-visible, .rolebar select:focus-visible, .rolebar .rb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.rolebar .rb-who { display: flex; align-items: center; gap: 6px; color: #cfcfcf; max-width: 320px; }
.rolebar .rb-who[hidden] { display: none; }
.rolebar .rb-who-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rolebar select {
  min-width: 0; max-width: 260px; min-height: 34px;
  background: #1f1f1f; color: #fff; border: 1px solid #333; border-radius: 8px;
  font: 500 12px Inter, sans-serif; padding: 6px 8px; cursor: pointer;
}
.rolebar select[hidden] { display: none; }

.rolebar .rb-btn {
  background: #1f1f1f; color: #fff; border: 0; border-radius: 8px;
  padding: 8px 12px; min-height: 34px; font: 600 12px Inter, sans-serif; cursor: pointer; white-space: nowrap;
}
.rolebar .rb-btn:hover { background: #2c2c2c; }

/* toasts sit above the switch */
.toast { bottom: 96px; }

@media (max-width: 759px) {
  .rolebar { left: 8px; right: 8px; bottom: 8px; max-width: none; gap: 8px; padding: 8px; }
  .rolebar .rb-label { display: none; }
  .rolebar .rb-tabs button { padding: 8px 10px; min-height: 40px; }
  .rolebar .rb-who { flex: 1 1 100%; max-width: none; order: 3; }
  .rolebar select { flex: 1 1 auto; max-width: none; min-height: 40px; }
  body { padding-bottom: 120px; }
}
@media (min-width: 760px) { body { padding-bottom: 72px; } }