/* Tokens and shared chrome, in lib/ because lib/ is what ships with the pages -
   the front door at the project root and the app pages under example/ both link it,
   so there is one palette rather than two that drift.

   Deliberately close to pehr-games' look (dark, rounded cards, chunky buttons): this
   project is meant to sit in that hub as one more card, and a visitor moving from the
   hub into it should not feel like they changed sites. */

:root {
  --bg: #10141c;
  --panel: #1a1f27;
  --edge: #2b323d;
  --ink: #eef1f6;
  --dim: #98a2b3;
  --accent: #4da3ff;
  --good: #3ecf8e;
  --warn: #f5a524;
  --bad: #f2545b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 helvetica, arial, system-ui, sans-serif;
}

a { color: var(--accent); }
code { font-family: ui-monospace, monospace; background: #0d1014; padding: 0.1em 0.35em; border-radius: 3px; }

button {
  font: inherit;
  color: var(--ink);
  background: #262d38;
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: #1c4c7c; border-color: #2a6aa8; }
button.danger { background: #5c2327; border-color: #8a3339; }

input[type="text"] {
  font: inherit;
  color: var(--ink);
  background: #0d1014;
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}

/* --- the nav strip rendered by lib/identity.js renderNav() --- */

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
}
.nav .spacer { flex: 1; }
.nav .nav-back { color: #cfe8d8; text-decoration: none; font-weight: bold; }
.nav .nav-back:hover { text-decoration: underline; }
/* nav-back doubles as a <button> for Reload - stripped of button chrome so it reads
   as the same kind of link either way. */
.nav button.nav-back { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.nav .nav-greeting { color: var(--ink); text-decoration: none; opacity: 0.85; }
.nav .nav-greeting:hover { text-decoration: underline; }
/* The dev alias is deliberately loud. A tab pretending to be someone else should never
   be mistaken for the real cookie-borne identity. */
.nav .nav-alias {
  font: 600 10px/1 ui-monospace, monospace;
  color: var(--warn);
  border: 1px solid #6b4a12;
  border-radius: 999px;
  padding: 0.3em 0.5em;
}

/* --- the offline panel rendered by renderOffline() --- */

.offline {
  background: #2a2113;
  border: 1px solid #6b4a12;
  color: #f3d9a4;
  border-radius: 0.6rem;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  font-size: 0.9rem;
}
.offline[hidden] { display: none !important; }
.offline p { color: inherit; margin: 0.4rem 0; }
.offline pre {
  background: rgba(0, 0, 0, 0.35);
  padding: 0.6rem;
  border-radius: 0.4rem;
  margin: 0.5rem 0;
  overflow-x: auto;
}

/* Moved here from example/example.css when the front door became the lobby:
   the roster, the room list and the ring modal are now used by both. */

/* --- roster --- */

.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.roster li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 8px;
}
.roster .name { font-weight: 600; }
.roster .where { color: var(--dim); font-size: 0.85em; font-family: ui-monospace, monospace; }
.roster .spacer { flex: 1; }
.roster li.self { opacity: 0.6; }
.empty { color: var(--dim); font-style: italic; }

/* --- the ring popup ---
   A modal because it must interrupt: a ring that scrolls past is a missed call. */

.ring-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 11, 0.72);
  display: grid;
  place-items: center;
  z-index: 50;
}
.ring-backdrop[hidden] { display: none !important; }

.ring {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 1.6rem;
  min-width: 22rem;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ring h3 { margin: 0 0 0.3rem; font-size: 1.2rem; }
.ring .sub { color: var(--dim); margin: 0 0 1.2rem; font-size: 0.9rem; }
.ring .actions { display: flex; gap: 0.6rem; justify-content: center; }
.ring .countdown { font-family: ui-monospace, monospace; color: var(--warn); }

/* Pulse while ringing - motion is what makes it read as "now". */
@keyframes ringpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.ring.pulsing { animation: ringpulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ring.pulsing { animation: none; } }


.pill {
  font: 600 11px/1 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35em 0.6em;
  border-radius: 999px;
  border: 1px solid var(--edge);
  color: var(--dim);
}
.pill.open, .pill.connected { color: var(--good); border-color: #235c45; }
.pill.connecting { color: var(--warn); border-color: #6b4a12; }
.pill.closed, .pill.failed { color: var(--bad); border-color: #6b2429; }

.notice {
  background: #2a2113;
  border: 1px solid #6b4a12;
  color: #f3d9a4;
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}
.notice[hidden] { display: none !important; }

/* A red slash drawn over an icon glyph (mic/camera) when its control is "off" - button
   markup pairs this with button.on, conferbot's own convention for "muted/stopped" (see
   .selfctl/.mod's own CSS). One small rule rather than a slashed variant of every icon,
   which not every platform's emoji font renders identically anyway. */
.icon-slash { position: relative; display: inline-block; }
button.on .icon-slash::after {
  content: '';
  position: absolute;
  top: 50%; left: -15%;
  width: 130%; height: 2px;
  background: var(--bad);
  transform: translateY(-50%) rotate(-45deg);
  border-radius: 1px;
}