/* ===========================================================================
   vmixcall.css - el poc que Tabler no porta de sèrie
   ---------------------------------------------------------------------------
   Tot el gruix del disseny ve de vendor/tabler.min.css. Aquí només hi ha el
   xat (bombolles), la pàgina de la trucada i quatre retocs. Si una cosa es pot
   fer amb una classe de Tabler, es fa amb Tabler i no s'escriu aquí.
   =========================================================================== */

/* --- xat: fil i bombolles ------------------------------------------------ */
.xat-fil {
  display: grid;
  gap: .5rem;
  max-height: 15rem;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
}
.xat-fil:empty { display: none; }

.bombolla {
  max-width: 85%;
  padding: .5rem .75rem;
  border-radius: var(--tblr-border-radius-lg);
  line-height: 1.45;
  font-size: .875rem;
  border: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface);
}
.bombolla p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bombolla .qui {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: .125rem;
}
.bombolla.estudi { justify-self: start; border-bottom-left-radius: 4px; }
.bombolla.auto {
  justify-self: start;
  border-bottom-left-radius: 4px;
  background: var(--tblr-bg-surface-secondary);
  border-style: dashed;
}
.bombolla.oient {
  justify-self: end;
  border-bottom-right-radius: 4px;
  background: var(--tblr-primary-lt);
  border-color: transparent;
}

/* El globus de missatges pendents damunt del botó de xat del panell */
.xat-globus {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  margin-left: .35rem;
  border-radius: 999px;
  background: var(--tblr-danger);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}

/* --- portada pública ----------------------------------------------------- */
.marca-punt { width: 3.5rem; height: 3.5rem; }

/* --- la pàgina de la trucada --------------------------------------------- */
/* Ocupa tota la finestra: el marc de la trucada ha de ser el protagonista i
   no ha de fer mai barra de desplaçament. */
.pagina-trucada {
  margin: 0;
  /* 100vh primer com a xarxa per als Safari vells; el dvh mana on existeix
     (iOS 15.4+) i descompta la barra d'adreces que puja i baixa. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #12181f;
  color: #f8fafc;
}
.barra-trucada {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .75rem;
  background: #1a222c;
  border-bottom: 1px solid #2b3542;
}
.barra-trucada .btn { color: #cbd5e1; border-color: #2b3542; }
#marc-trucada {
  flex: 1 1 auto;
  /* Sense min-height:0, un fill flex no pot encongir per sota del seu
     contingut, i el Safari d'iOS dona als marcs l'alçada del contingut:
     la pàgina sencera es desbordava en lloc d'omplir la finestra. */
  min-height: 0;
  width: 100%;
  border: 0;
  display: block;
  background: #12181f;
}
.avis-trucada { flex: 0 0 auto; padding: .35rem .75rem; text-align: center; }

/* --- registre de seguretat ----------------------------------------------- */
.registre-scroll { max-height: 26rem; overflow-y: auto; }

/* --- retocs menors ------------------------------------------------------- */
/* Els botons i els camps que van de costat, a la mateixa alçada exacta. */
.input-group > .btn { display: inline-flex; align-items: center; }
.card-title .icon { vertical-align: text-bottom; }

/* --- logos (emissora, dia de partit…) ------------------------------------ */
/* Alçada fixa i amplada lliure: així un logo apaïsat i un de quadrat queden
   igual de grossos a la vista, que és el que compara l'ull. */
.logo-portada { height: 4.5rem; width: auto; max-width: 100%; object-fit: contain; }
.logo-login   { height: 3rem;   width: auto; max-width: 100%; object-fit: contain; }
.logo-barra   { height: 1.75rem; width: auto; object-fit: contain; }
.logo-mostra  { height: 3.5rem; width: auto; max-width: 100%; object-fit: contain; }
.galeria-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .75rem;
}

/* --- avis quan la trucada no pot anar dins del marc ---------------------- */
.avis-insegur {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
}
.avis-insegur .card { color: var(--tblr-body-color); }

/* --- avis de permis del microfon a la pagina de la trucada --------------- */
.avis-permis {
  flex: 0 0 auto;
  padding: .6rem .75rem;
  background: var(--tblr-danger);
  color: #fff;
  text-align: center;
  font-size: .875rem;
}

/* --- "gira el mobil" a la pagina de la trucada --------------------------- */
/* Nomes en pantalles tactils i en vertical: en un ordinador amb la finestra
   estreta no hi pinta res. El marc es queda carregat a sota; nomes el tapem. */
.gira-mobil { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  .gira-mobil {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    text-align: center;
    background: #12181f;
    color: #f8fafc;
  }
  .gira-icona { animation: gira 2s ease-in-out infinite; }
  @keyframes gira {
    0%, 40% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(-90deg); }
  }
}

/* El logo del directe es veu sobre negre: a la galeria, s'ensenya igual. */
.logo-mostra.sobre-fosc {
  background: #12181f;
  border-radius: var(--tblr-border-radius);
  padding: .35rem .5rem;
}