h1 {
    font-size: 160%;
}

.inline {
    display: inline;
}

.signature {
    border-top: solid;
    padding-top: 0;
    border-width: thin;
    clear: both;
    min-height: 3.125rem;
    text-align: center;
}

body {
    overflow-x: hidden;
}
body, html {
    height: 100%;
}
body {
    margin: 0;
    font-family: Metropolis,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #687281;
    text-align: left;
    background-color: #eff3f9;
}

*, :after, :before {
    box-sizing: border-box;
}

textarea {
    font-family: Metropolis,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}/*
 * ChordQuest Meet — a rebrand layered over Galène's stock frontend.
 *
 * Palette is the same one as the Keycloak login theme
 * (hosts/telegonus/keycloak-theme/login/resources/css/chordquest.css), which in
 * turn mirrors the apollo app: dark-first surfaces with a gold accent. Signing in
 * and joining a call should not look like two different products.
 *
 * HOW THIS IS APPLIED: hosts/telegonus/galene.nix copies upstream's static tree
 * and APPENDS this file to common.css and galene.css, rather than replacing
 * either. Appending is what makes the rebrand survive a Galène upgrade — the
 * stock rules keep defining layout, we only restate colour. That is also why
 * nearly everything below is a colour/border/shadow property and almost nothing
 * touches geometry.
 *
 * Galène's stock look is a light theme (#eff3f9 page, #610a86 purple chrome)
 * built on Bootstrap-ish .btn-* classes, so the overrides are concentrated on:
 * page + app surfaces, the left sidebar, the .btn-* family, .form-control
 * inputs, the chat pane, and the landing page.
 */

:root {
  --cq-bg:          #0B0B0D;
  --cq-surface:     #141418;
  --cq-surface-2:   #1D1D23;
  --cq-surface-3:   #26262E;
  --cq-border:      rgba(255, 255, 255, 0.10);
  --cq-border-soft: rgba(255, 255, 255, 0.06);
  --cq-text:        #F5F5F7;
  --cq-text-muted:  rgba(245, 245, 247, 0.72);
  --cq-text-subtle: rgba(245, 245, 247, 0.50);
  --cq-gold:        #D9B077;
  --cq-gold-2:      #F0D39A;
  --cq-gold-dim:    rgba(217, 176, 119, 0.16);
  --cq-danger:      #FF5A5F;
  --cq-success:     #4ADE80;
}

/* --- page + app surfaces -------------------------------------------------- */

body {
  background-color: var(--cq-bg);
  color: var(--cq-text);
}

.app {
  background-color: var(--cq-bg);
  box-shadow: none;
}

.bg-white { background-color: var(--cq-surface); }
.bg-gray  { background-color: var(--cq-surface-2); }

.shadow {
  box-shadow: 0 1px 0 0 var(--cq-border-soft);
}

/* --- left sidebar + participant list -------------------------------------- */

#left-sidebar {
  background: var(--cq-surface);
  border-right: 1px solid var(--cq-border);
}

/* The room title block. Stock is a saturated purple bar; ours is a flat surface
   with a thin gold rule, matching the login card's top accent. */
.users-header {
  background: var(--cq-surface);
  border-bottom: 1px solid var(--cq-border);
  box-shadow: inset 0 3px 0 0 var(--cq-gold);
}

.galene-header {
  color: var(--cq-text);
  letter-spacing: 0.01em;
}

header .collapse       { color: var(--cq-text-subtle); }
header .collapse:hover { color: var(--cq-gold); }

.header-sep {
  border-bottom: 1px solid var(--cq-border-soft);
}

#users > div {
  color: var(--cq-text-muted);
}

#users > div:hover {
  background: var(--cq-surface-2);
  color: var(--cq-text);
}

/* Galène marks raised hands / live mic / live camera with ::before and ::after
   glyphs; recolour them so "who is talking" reads at a glance on a dark ground. */
#users > div.user-status-raisehand::before { color: var(--cq-gold-2); }
#users > div.user-status-microphone::after { color: var(--cq-success); }
#users > div.user-status-camera::after     { color: var(--cq-success); }

/* --- the side menu (settings drawer) -------------------------------------- */

.sidenav {
  background-color: var(--cq-surface);
  border-right: 1px solid var(--cq-border);
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.5);
}

.sidenav a,
.sidenav-label,
.sidenav-label-first,
.sidenav-header h2,
.sidenav-content h2 {
  color: var(--cq-text);
}

.sidenav a:hover { color: var(--cq-gold); }

.sidenav .user-logout a        { color: var(--cq-text-subtle); }
.sidenav .user-logout a:hover  { color: var(--cq-danger); }

fieldset {
  border: 1px solid var(--cq-border);
}

legend { color: var(--cq-text-muted); }

.nav-link       { color: var(--cq-text-muted); }
.nav-link:hover,
.nav-link label:hover { color: var(--cq-gold); }
.nav-cancel, .muted, .nav-cancel label, .muted label { color: var(--cq-text-subtle); }
.nav-cancel:hover, .muted:hover { color: var(--cq-danger); }

/* --- buttons -------------------------------------------------------------- */
/* Gold is the single "do the thing" colour; everything else is a quiet surface.
   Stock Galène spends five saturated Bootstrap colours here, which on a dark
   ground reads as noise. */

.btn {
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background-color .15s ease-in-out, color .15s ease-in-out,
              border-color .15s ease-in-out;
}

.btn-blue,
#connectbutton {
  color: #0B0B0D;
  background-color: var(--cq-gold);
  border-color: var(--cq-gold);
  font-weight: 600;
}

.btn-blue:hover,
#connectbutton:hover {
  color: #0B0B0D;
  background-color: var(--cq-gold-2);
  border-color: var(--cq-gold-2);
}

.btn-default,
.btn-success {
  color: var(--cq-text);
  background-color: var(--cq-surface-2);
  border-color: var(--cq-border);
}

.btn-default:hover,
.btn-success:hover {
  color: var(--cq-text);
  background-color: var(--cq-surface-3);
  border-color: var(--cq-gold);
}

/* Leave / stop sharing / hang up stay legibly destructive. */
.btn-cancel {
  color: var(--cq-danger);
  background-color: transparent;
  border-color: var(--cq-danger);
}

.btn-cancel:hover {
  color: #0B0B0D;
  background-color: var(--cq-danger);
  border-color: var(--cq-danger);
}

.btn-warn {
  color: var(--cq-gold-2);
  background-color: transparent;
  border-color: var(--cq-gold-2);
}

.btn-warn:hover {
  color: #0B0B0D;
  background-color: var(--cq-gold-2);
}

/* --- inputs --------------------------------------------------------------- */

.form-control,
.loginform input[type="text"],
.loginform input[type="password"],
#invite-dialog input,
textarea.form-reply,
.form-reply,
.select,
.select-inline,
#videoselect, #audioselect, #filterselect,
#sendselect, #simulcastselect, #requestselect {
  color: var(--cq-text);
  background-color: var(--cq-surface-2);
  border: 1px solid var(--cq-border);
  border-radius: 6px;
}

.form-control:focus,
.form-reply:focus,
#input:focus {
  border-color: var(--cq-gold);
  outline: none;
  box-shadow: 0 0 0 3px var(--cq-gold-dim);
}

.form-reply::placeholder { color: var(--cq-text-subtle); }

label { color: var(--cq-text-muted); }

/* --- login box ------------------------------------------------------------ */
/* Normally unreachable: the group's authPortal bounces straight to Keycloak, so
   nobody sees this form. It still renders if the portal is down or a group is
   ever configured without one, and a white card flashing up in that case would
   look like a broken page rather than a fallback. */

.login-box {
  background: var(--cq-surface);
  border: 1px solid var(--cq-border);
  border-radius: 10px;
  box-shadow: inset 0 3px 0 0 var(--cq-gold);
}

.login-box h2 { color: var(--cq-text); }

/* --- chat ----------------------------------------------------------------- */

#chatbox, #chat, #box {
  background: var(--cq-bg);
}

.message {
  background: var(--cq-surface);
  border: 1px solid var(--cq-border-soft);
  border-radius: 8px;
}

.message-sender  { color: var(--cq-gold); }
.message-header  { color: var(--cq-text); }
.message-content { color: var(--cq-text); }
.message-footer,
.message-time    { color: var(--cq-text-subtle); }

.message-private {
  background: var(--cq-surface-2);
  border-color: var(--cq-gold-dim);
}

.message-system {
  background: transparent;
  color: var(--cq-text-subtle);
  border: none;
}

.message-me-asterisk, .message-me-user { color: var(--cq-gold); }

#input {
  color: var(--cq-text);
  background: var(--cq-surface-2);
  border: 1px solid var(--cq-border);
}

.close-chat, .chat-btn {
  color: var(--cq-text-subtle);
  background: var(--cq-surface-2);
}

.close-chat:hover, .close-chat:active {
  color: var(--cq-gold);
}

#resizer        { background: var(--cq-border-soft); }
#resizer:hover  { background: var(--cq-gold); }

/* --- video tiles ---------------------------------------------------------- */

.peer, .media {
  background: var(--cq-surface);
  border-radius: 8px;
}

.peer-active {
  outline: 2px solid var(--cq-gold);
}

.media-failed {
  border: 1px solid var(--cq-danger);
}

.label {
  color: var(--cq-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* --- status, errors, toasts ----------------------------------------------- */

.connected    { color: var(--cq-success); }
.disconnected { color: var(--cq-danger); }
.error, #errormessage, #errspan { color: var(--cq-danger); }
.noerror { color: var(--cq-success); }

#permspan { color: var(--cq-text-subtle); }

.toastify.error   { background: var(--cq-danger); color: #0B0B0D; }
.toastify.warning { background: var(--cq-gold-2); color: #0B0B0D; }
.toastify.info    { background: var(--cq-surface-3); color: var(--cq-text); }

#invite-dialog {
  background: var(--cq-surface);
  color: var(--cq-text);
  border: 1px solid var(--cq-border);
  border-radius: 10px;
}

#invite-dialog button {
  color: #0B0B0D;
  background: var(--cq-gold);
  border: none;
  border-radius: 6px;
}

#invite-dialog button:hover { background: var(--cq-gold-2); }

.contextualMenu {
  background: var(--cq-surface-2);
  color: var(--cq-text);
  border: 1px solid var(--cq-border);
}

#captions-container, #captions {
  color: var(--cq-text);
  background: rgba(11, 11, 13, 0.72);
}

/* --- landing page (index.html) -------------------------------------------- */
/* The room picker. Team members normally arrive on a direct /group/<name>/ link,
   so this page is mostly a fallback — but it is the bare server root, so it
   should still look like ChordQuest and not like a stranger's server. */

.home {
  color: var(--cq-text);
}

#title, .navbar-brand {
  color: var(--cq-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

#public-groups h2 {
  color: var(--cq-text-muted);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#public-groups-table tr a { color: var(--cq-gold); }

a       { color: var(--cq-gold); }
a:hover { color: var(--cq-gold-2); }

.signature {
  border-top: 1px solid var(--cq-border);
  color: var(--cq-text-subtle);
  font-size: 0.8rem;
}

.signature a { color: var(--cq-text-subtle); }
.signature a:hover { color: var(--cq-text-muted); }

/* --- surfaces the first pass missed --------------------------------------- */
/*
 * Everything above restates colour on selectors the stock sheet also styles — but a
 * handful of stock rules were never matched, so those surfaces stayed Galène's. The
 * loudest was `.navbar`: the fixed top bar kept its #610a86 purple while its CONTENTS
 * (.nav-link, .navbar-brand) were recoloured for a dark ground, which is why the app
 * still read as stock Galène with a dark sidebar bolted on. The rest are white panels
 * that our near-white text was landing on — `#users` most damagingly, since the
 * participant names are rgba(245,245,247,.72) and were effectively invisible.
 *
 * Specificity is why several of these are spelled out rather than collapsed: stock
 * sets the bar's colour on `.navbar .container*` (0,2,0) as well as `.navbar`, so a
 * lone `.navbar` rule loses. Same reason `#users` is an id selector here.
 */

.navbar,
.navbar .container,
.navbar .container-fluid,
.navbar .container-lg,
.navbar .container-md,
.navbar .container-sm,
.navbar .container-xl {
  background: var(--cq-surface);
}

.navbar {
  border-bottom: 1px solid var(--cq-border);
}

/* The participant list. Stock paints it #fff with a #f7f7f7 border; keep the 1px
   rule stock draws and restate only the colour. */
#users {
  background-color: var(--cq-surface);
  border-color: var(--cq-border);
}

.sidenav-content { background: var(--cq-surface); }
.login-container { background: var(--cq-bg); }
.reply           { background-color: var(--cq-surface-2); }
.message-sender  { background: var(--cq-surface-2); }

/* The avatar chip: stock is a lilac circle, ours takes the gold accent with dark
   text on it (the same figure/ground pairing as the primary button). */
.profile-logo {
  background: var(--cq-gold);
  color: #0B0B0D;
}

/* Mobile-only "show video" affordance (stock hides it above 1025px). Stock is a
   saturated purple; treat it like .btn-default so it reads as secondary. */
.show-video {
  background: var(--cq-surface-2);
  color: var(--cq-text);
  border-color: var(--cq-border);
}

/* `.video-container`, `.vc-overlay` and `.top-video-controls .video-stop` are left
   alone on purpose — they are already near-black, and they sit directly against
   video where a brand colour would fight the picture. */

/* --- the brand lockup in the sidebar header -------------------------------- */
/*
 * The one place this file touches GEOMETRY, and it does so carefully. `.users-header`
 * height is load-bearing: stock sizes the participant list as `calc(100% - 84px)`,
 * i.e. header + separator + 8px, so growing the header by 16px MUST move that number
 * by the same 16px or `#users` overflows the sidebar. No media query overrides either
 * value (checked), so the pair below is the whole story.
 *
 * The logo REPLACES the wordmark text rather than sitting beside it — the artwork is
 * a two-line "CHORD / QUEST" lockup, so pairing it with the word would say the name
 * twice. The <img alt> carries the accessible name that the text used to.
 */
.users-header { height: 4.5rem; }
#users        { height: calc(100% - 100px); }

/* Stock is `#left-sidebar .galene-header { display: inline-block }` (1,1,0) — match
   that specificity or the block/centering below never applies. line-height:0 drops
   the 34px text leading that would otherwise pad the image. */
#left-sidebar .galene-header {
  display: block;
  line-height: 0;
}

.galene-header .cq-logo {
  display: block;
  height: 52px; /* 4.5rem header - 2*10px stock padding */
  width: auto;
}