/* Bild und Ton im Gespräch (js/kern/konferenz.js, raum/raum.php): je Person eine Kachel
   (teile/video_kachel.php, die eigene teile/video_ich.php) mit Bild oder Kürzel und Name, der Name unten auf dem Bild
   (mit durchgestrichenem Mikrofon, wenn sie stumm ist), unten rechts die Verbindung (Balken wie beim Handy-Empfang:
   grün gut, gelb schwach, rot weg) mit der Bandbreite, wer spricht, mit einem Rahmen, eine gehobene Hand oben rechts,
   ein angehaltenes Bild mit einer Zeile in der Mitte, für Mirko oben links "Aus der Besprechung nehmen"; die Knöpfe
   (teile/video_steuerung.php), darunter Hinweise (video-warnung) und kurze Zeilen (video-zeile), der geteilte
   Bildschirm, die Tafeln als Popover (Hintergrund, Kamera und Mikrofon, Reaktionen, Einladen), der Gerätetest und die
   Karten vor und nach dem Gespräch. Dazu die Reaktionen, die über einer Kachel aufsteigen. Wo was steht, bestimmt
   css/raum.css. */

@layer bauteile {
  .video-kachel {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: var(--glas-stark);
    border: 1px solid var(--rand);
    border-radius: var(--rund-l);
    box-shadow: var(--schatten-karte);
    transition: box-shadow var(--dauer-kurz);
    & video { display: block; width: 100%; height: 100%; object-fit: cover; }
    &.spricht { box-shadow: inset 0 0 0 3px var(--akzent), var(--schatten-karte); }
    /* Hochkant (Handy): ganz zu sehen, daneben ruhiger Grund */
    &.hochkant video { object-fit: contain; background: var(--glas-dunkel); }
    /* Ohne Bild deckt die Fläche mit Kürzel und Name das Video zu, statt es auszublenden: vorsorglich, denn Safari zeigte
       früher kein Bild, das an ein unsichtbares Video gehängt wurde (WebKit-Fehler 241152). Schwarze Bilder in Safari
       hatten eine andere Ursache (js/kern/konferenz.js, kachel()). */
    & .video-leer { background: var(--glas-stark); }
    &:not(.ohne-bild) .video-leer { display: none; }
  }
  /* Man selbst (teile/video_ich.php): gespiegelt wie im Spiegel, nur nicht mit der Rückkamera (sonst stünde Schrift
     verkehrt herum); ohne Kamera und stumm wie die anderen */
  .video-ich video:not(.rueckkamera) { scale: -1 1; }
  .video-leer {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--a3);
    margin: 0;
    padding: var(--a4);
    text-align: center;

    & .kuerzel { width: 6.5rem; height: 6.5rem; font-size: 2.2rem; box-shadow: var(--leuchten); }
    & strong { font: 600 var(--gr-24) / 1.2 var(--schrift-titel); color: var(--text); }
    & small { font-size: var(--gr-14); color: var(--text-leise); }
  }
  .video-kachel-name {
    position: absolute;
    bottom: var(--a2);
    left: var(--a2);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 55%;
    padding: 0.25rem 0.6rem;
    font: 500 var(--gr-13) / 1.2 var(--schrift-titel);
    color: var(--auf-dunkel);
    background: var(--glas-dunkel);
    border-radius: var(--pille);
    & span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    & .icon { flex: none; width: 0.9rem; height: 0.9rem; }
  }
  .video-kachel.ohne-bild .video-kachel-name, .video-kachel:not(.stumm) .video-kachel-name .icon { display: none; }
  /* Die Verbindung: die Balken, sobald LiveKit die Güte meldet, daneben, was an Bild ankommt (an der eigenen Kachel:
     hinausgeht), solange etwas fließt; schmale Kacheln ohne Auflösung */
  .video-kachel { container-type: inline-size; }
  .video-kachel-rate {
    position: absolute;
    right: var(--a2);
    bottom: var(--a2);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 42%;
    padding: 0.25rem 0.6rem;
    font: 500 var(--gr-13) / 1.2 var(--schrift-titel);
    font-variant-numeric: tabular-nums;
    color: var(--auf-dunkel);
    background: var(--glas-dunkel);
    border-radius: var(--pille);
    white-space: nowrap;
    & > span { overflow: hidden; text-overflow: ellipsis; }
    & > span:empty { display: none; }
    &:is(:not([data-guete]), [data-guete=""]):has(> span:empty) { display: none; }
    /* Die Balken: so viele kräftig, wie die Verbindung gut ist, die übrigen blass */
    & .icon { flex: none; width: 1rem; height: 1rem; color: var(--auf-dunkel); & path { opacity: 0.3; } }
    &[data-guete="sehr-gut"] .icon { color: var(--gut-auf-dunkel); & path { opacity: 1; } }
    &[data-guete="gut"] .icon { color: var(--gut-auf-dunkel); & path:nth-of-type(-n + 4) { opacity: 1; } }
    &[data-guete="schwach"] { color: var(--warnung-auf-dunkel); & .icon { color: var(--warnung-auf-dunkel); & path:nth-of-type(-n + 3) { opacity: 1; } } }
    &[data-guete="weg"] { color: var(--minus-auf-dunkel); & .icon { color: var(--minus-auf-dunkel); & path:nth-of-type(-n + 2) { opacity: 1; } } }
  }
  .video-kachel.ohne-bild .video-kachel-rate { display: none; }
  @container (width < 17rem) { .video-kachel-rate [data-rate-aufloesung] { display: none; } }
  .video-kachel-pause {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    max-width: calc(100% - 2 * var(--a2));
    padding: 0.25rem 0.6rem;
    font: 500 var(--gr-13) / 1.2 var(--schrift-titel);
    color: var(--auf-dunkel);
    text-align: center;
    background: var(--glas-dunkel);
    border-radius: var(--pille);
    translate: -50% -50%;
  }
  .video-kachel.pausiert .video-kachel-pause { display: block; }
  .video-kachel-hand {
    position: absolute;
    top: var(--a2);
    right: var(--a2);
    display: none;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    color: var(--akzent-text);
    background: var(--verlauf-akzent);
    border-radius: 50%;
    box-shadow: var(--leuchten);
    & .icon { width: 1.15rem; height: 1.15rem; }
  }
  .video-kachel.hand .video-kachel-hand { display: grid; }
  .video-kachel-entfernen {
    position: absolute;
    top: var(--a2);
    left: var(--a2);
    opacity: 0;
    transition: opacity var(--dauer-kurz);
  }
  .video-kachel:is(:hover, :focus-within) .video-kachel-entfernen { opacity: 1; }
  /* Am Handy gibt es kein Darüberfahren: dort immer zu sehen */
  @media (hover: none) { .video-kachel-entfernen { opacity: 1; } }

  .video-knoepfe {
    display: flex;
    justify-content: center;
    gap: var(--a3);

    /* Mikrofon und Kamera: aus ist rot und zeigt das durchgestrichene Zeichen; Teilen ist an in der Akzentfarbe */
    & :is([data-video-mikro], [data-video-kamera]) {
      &[aria-pressed="false"] { color: var(--minus); background: var(--minus-flaeche); }
      & .icon:last-child { display: none; }
      &[aria-pressed="false"] .icon:first-child { display: none; }
      &[aria-pressed="false"] .icon:last-child { display: block; }
    }
    & :is([data-video-teilen], [data-video-hand], [data-video-hintergrund-knopf])[aria-pressed="true"] { color: var(--akzent-text); background: var(--verlauf-akzent); border-color: transparent; }
  }

  /* Ein Hinweis unter den Knöpfen: Kamera und Mikrofon gehen nicht (warum, was zu tun ist), die Verbindung ist abgebrochen */
  .video-warnung {
    display: grid;
    justify-items: start;
    gap: var(--a2);
    width: min(34rem, 100%);
    padding: var(--a3) var(--a4);
    font-size: var(--gr-14);
    line-height: 1.45;
    background: var(--warnung-flaeche);
    border-radius: var(--rund);
    & p { margin: 0; }
    & strong { color: var(--warnung); }
    & .reihe { gap: var(--a2); }
    & .video-hinweis { font-size: var(--gr-12); color: var(--text-leise); overflow-wrap: anywhere; }
    & .video-hinweis:empty { display: none; }
  }

  /* Eine kurze Zeile unter den Knöpfen: wer gerade teilt (Beenden oder Ansehen), Ton einschalten, schwache Verbindung */
  .video-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--a3);
    margin: 0;
    min-height: 2.6rem;
    padding: var(--a2) var(--a2) var(--a2) var(--a4);
    font-size: var(--gr-14);
    background: var(--tinte-flaeche);
    border-radius: var(--pille);
    & > span { display: flex; align-items: center; gap: var(--a2); }
    & > span .icon { flex: none; width: 1rem; height: 1rem; color: var(--warnung); }
  }

  /* Der geteilte Bildschirm: ganz zu sehen, oben wer teilt und der Knopf zurück */
  .video-geteilt {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--a3);
    min-height: 0;
    padding: var(--a3);
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--rund-l);
    box-shadow: var(--schatten-2);
    animation: hereinkommen 240ms var(--kurve) both;

    & header { display: flex; align-items: center; gap: var(--a3); padding-left: var(--a2); font: 500 var(--gr-15) / 1.2 var(--schrift-titel); }
    & header .icon { color: var(--akzent); }
    & header .knopf { margin-left: auto; }
    & video { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: var(--glas-dunkel); border-radius: var(--rund); }
  }

  /* Tafeln als Popover: Kamera und Mikrofon wählen, Einladen, Leute dazuholen. Untereinander mit gleichem Abstand,
     oben rechts das X zum Schließen */
  .video-tafel {
    gap: var(--a3);
    width: min(34rem, calc(100vw - 2rem));
    margin: auto;
    padding: var(--a6);
    color: var(--text);
    background: var(--glas-stark);
    border: 1px solid var(--rand);
    border-radius: var(--rund-l);
    box-shadow: var(--schatten-2);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);

    &::backdrop { background: var(--vorhang); }
    &:popover-open { display: grid; }
    & h2 { display: flex; align-items: center; gap: var(--a3); margin: 0; padding-right: 3rem; font: 600 var(--gr-24) / 1.2 var(--schrift-titel); color: var(--akzent); }
    & > p { margin: 0; color: var(--text-2); }
    & > .knopf { justify-self: start; }
  }
  .video-tafel-zu { position: absolute; top: var(--a4); right: var(--a4); }
  .video-geraete { width: min(26rem, calc(100vw - 2rem)); & .video-hinweis:empty { display: none; } }
  /* Hintergrund: drei Möglichkeiten untereinander, die gewählte in der Akzentfarbe */
  /* Hintergrund: je Wahl eine Vorschau mit Namen darunter, drei nebeneinander; die gewählte mit Rahmen in der Akzentfarbe */
  .video-hintergruende {
    width: min(27rem, calc(100vw - 2rem));
    & .video-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); }
    & .video-wahl button {
      display: grid;
      gap: 0.35rem;
      padding: 0;
      font: 500 var(--gr-13) / 1.2 var(--schrift-titel);
      color: var(--text-2);
      background: none;
      border: 0;
      cursor: pointer;
      &:hover .video-wahl-bild { border-color: var(--linie-stark); }
      &:focus-visible { outline: none; & .video-wahl-bild { box-shadow: 0 0 0 4px var(--fokus-schein); } }
      &[aria-pressed="true"] { color: var(--akzent); & .video-wahl-bild { border-color: var(--akzent); } }
    }
    & .video-wahl-bild {
      display: grid;
      place-items: center;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      color: var(--text-2);
      background: var(--glas-leicht);
      border: 2px solid var(--linie);
      border-radius: var(--rund);
      transition: border-color var(--dauer-kurz), box-shadow var(--dauer-kurz);
      & img { width: 100%; height: 100%; object-fit: cover; }
      & .icon { width: 1.4rem; height: 1.4rem; }
    }
    & .video-hinweis:empty { display: none; }
  }

  /* Einladen: der Link in einem Feld mit Kopieren darin, darunter die Wege gleich breit, unten ein neuer Link */
  .video-link {
    display: flex;
    align-items: center;
    gap: var(--a2);
    padding: 0.3rem 0.3rem 0.3rem var(--a4);
    background: var(--glas-leicht);
    border: 1px solid var(--linie-stark);
    border-radius: var(--pille);
    box-shadow: inset 0 1px 0 var(--kante);
    &:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--fokus-schein); }
    & input, & input:focus { flex: 1; min-width: 0; min-height: 0; padding: 0; font-size: var(--gr-14); color: var(--text-2); text-overflow: ellipsis; background: none; border: 0; box-shadow: none; }
  }
  .video-wege {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--a2);
    & .knopf { min-width: 0; }
    /* bis der Link da ist */
    & .knopf[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
    & .knopf span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  }
  .video-tafel-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--a2) var(--a3);
    padding-top: var(--a3);
    border-top: 1px solid var(--linie);
    & small { font-size: var(--gr-13); color: var(--text-leise); }
  }
  .video-hinweis { margin: 0; font-size: var(--gr-14); color: var(--text-2); }

  /* Vor und nach dem Gespräch eine Karte mitten auf der Seite: Begrüßung, Zahl oder Name, warten, Schluss
     (Gäste im Warteraum, Ende); video-start liegt dabei über der Präsentation */
  .video-start, .video-tor {
    display: grid;
    place-items: center;
    padding: var(--a5);
    background:
      radial-gradient(60rem 40rem at 0% 0%, color-mix(in oklab, var(--akzent) 16%, transparent), transparent 70%),
      radial-gradient(50rem 40rem at 100% 100%, color-mix(in oklab, var(--marke-hell) 45%, transparent), transparent 70%),
      var(--grund);
  }
  .video-start { position: fixed; inset: 0; z-index: 80; }
  .video-tor { min-height: 100dvh; }
  .video-karte {
    display: grid;
    justify-items: center;
    gap: var(--a4);
    width: min(32rem, 100%);
    padding: var(--a7) var(--a6);
    text-align: center;
    background: var(--glas-stark);
    border: 1px solid var(--rand);
    border-radius: var(--rund-l);
    box-shadow: var(--schatten-karte);
    animation: hereinkommen 480ms var(--kurve) both;

    & .video-karte-logo { width: auto; height: 4.5rem; }
    & .video-illu { width: min(16rem, 70%); height: auto; animation: schweben 7s ease-in-out infinite alternate; }
    & h1 {
      margin: 0;
      font: 650 clamp(1.7rem, 1rem + 2vw, 2.4rem) / 1.1 var(--schrift-titel);
      color: transparent;
      background: var(--verlauf-akzent);
      background-clip: text;
      -webkit-background-clip: text;
    }
    & p { margin: 0; font-size: var(--gr-16); line-height: 1.5; color: var(--text-2); }
    & form { display: grid; gap: var(--a4); width: 100%; }
    & input[name="zahl"] { height: 3.9rem; font-size: 1.6rem; letter-spacing: 0.3em; text-align: center; }
    & > .feld { width: 100%; }
    & .knopf.gross { justify-self: center; }
  }

  /* Das Siegel (teile/video_siegel.php): grün mit Schild; ein Tipp öffnet die Erklärung. In Kopfzeilen am Handy nur das
     Schild (der Text bleibt für Vorleser). */
  .video-siegel {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    justify-self: center;
    padding: 0.35rem 0.8rem;
    font: 500 var(--gr-13) / 1.2 var(--schrift-titel);
    color: var(--plus);
    background: var(--plus-flaeche);
    border: 0;
    border-radius: var(--pille);
    cursor: pointer;
    & .icon { flex: none; width: 1rem; height: 1rem; }
    &:hover { filter: brightness(0.97); }
  }
  .video-siegel-tafel h2 .icon { color: var(--plus); }
  .video-siegel-liste {
    display: grid;
    gap: var(--a3);
    margin: 0;
    padding: 0;
    list-style: none;
    & li { display: flex; align-items: start; gap: var(--a3); line-height: 1.45; color: var(--text-2); }
    & .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; color: var(--plus); }
  }
  @media (max-width: 40rem) {
    .raum-kopf .video-siegel {
      padding: 0.45rem;
      & span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    }
  }

  /* Gerätetest vor dem Gespräch (teile/video_test.php): oben das eigene Bild, darunter Kamera, Mikrofon mit Balken und je
     Gerät der Stand; die Karte wird dafür etwas breiter und scrollt, wenn sie höher ist als der Bildschirm */
  .video-start { overflow-y: auto; place-items: safe center; }
  .video-karte:has(.video-test) { width: min(36rem, 100%); }
  .video-test { display: grid; gap: var(--a3); width: 100%; text-align: start; }
  .video-test-bild {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--glas-dunkel);
    border-radius: var(--rund);
    & video { display: block; width: 100%; height: 100%; object-fit: cover; scale: -1 1; }
    & video.rueckkamera { scale: none; }
    /* Hochkant (Handy): ganz, wie die anderen es sehen */
    &.hochkant { aspect-ratio: 3 / 4; max-height: 60vh; margin-inline: auto; & video { object-fit: contain; } }
    &.ohne-bild video { visibility: hidden; }
    &:not(.ohne-bild) .video-leer { display: none; }
    & .video-leer .kuerzel { width: 3.5rem; height: 3.5rem; font-size: 1.3rem; }
    & .video-leer small { color: var(--auf-dunkel); }
  }
  .video-pegel {
    width: 100%;
    height: 0.5rem;
    appearance: none;
    background: var(--tinte-flaeche);
    border: 0;
    border-radius: var(--pille);
    &::-webkit-meter-bar { height: 0.5rem; background: var(--tinte-flaeche); border: 0; border-radius: var(--pille); }
    &::-webkit-meter-optimum-value, &::-webkit-meter-suboptimum-value, &::-webkit-meter-even-less-good-value { background: var(--verlauf-akzent); border-radius: var(--pille); }
    &::-moz-meter-bar { background: var(--verlauf-akzent); border-radius: var(--pille); }
  }
  .video-test-stand {
    margin: 0;
    font-size: var(--gr-14);
    color: var(--text-2);
    &.ok { color: var(--plus); }
    &.mittel { color: var(--warnung); }
    &.fehler { color: var(--minus); }
    &:empty { display: none; }
  }
  /* Am breiten Bildschirm zweispaltig: links das Bild, rechts Geräte, Balken und Stand; so bleibt Teilnehmen im Bild */
  @media (min-width: 52rem) {
    .video-karte:has(.video-test) {
      width: min(60rem, 100%);
      padding: var(--a6);
      & .video-karte-logo { height: 3.2rem; }
    }
    .video-test { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; column-gap: var(--a5); }
    .video-test-bild { grid-row: 1 / span 6; }
    .video-test > :not(.video-test-bild) { grid-column: 2; }
  }

  @media (max-width: 64rem), (orientation: portrait) {
    .video-leer .kuerzel { width: 4.5rem; height: 4.5rem; font-size: 1.6rem; }
  }

  /* Reaktionen (js/kern/video-reaktionen.js): Die Tafel mit sechs Zeichen in einer Reihe; ein gesendetes Zeichen
     steigt über der Kachel dessen auf, der es geschickt hat, und vergeht */
  .video-reaktionen {
    display: none;
    width: auto;
    padding: var(--a2);
    border-radius: var(--pille);
    &:popover-open { display: flex; gap: 0.15rem; }
    & button {
      display: grid;
      place-items: center;
      width: 3rem;
      height: 3rem;
      font-size: 1.6rem;
      line-height: 1;
      background: none;
      border: 0;
      border-radius: 50%;
      cursor: pointer;
      transition: transform var(--dauer-kurz) var(--kurve), background var(--dauer-kurz);
      &:hover { background: var(--tinte-flaeche); transform: scale(1.18); }
    }
  }
  .video-reaktion {
    position: absolute;
    bottom: 3rem;
    left: var(--links, 50%);
    z-index: 3;
    font-size: clamp(2rem, 6cqi, 3.4rem);
    line-height: 1;
    pointer-events: none;
    animation: aufsteigen 2.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    & small {
      display: block;
      margin-top: 0.2rem;
      padding: 0.1rem 0.5rem;
      font: 500 var(--gr-12) / 1.3 var(--schrift-titel);
      color: var(--auf-dunkel);
      text-align: center;
      white-space: nowrap;
      background: var(--glas-dunkel);
      border-radius: var(--pille);
    }
  }
  @keyframes aufsteigen {
    0% { opacity: 0; translate: -50% 1rem; scale: 0.6; }
    12% { opacity: 1; scale: 1.1; }
    25% { scale: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; translate: -50% -9rem; }
  }
}