/* Das Gespräch (raum/raum.php; Kacheln, Knöpfe und Tafeln aus konferenz.css): oben Logo, Titel, wie viele dabei
   sind, die Dauer, das Siegel und für Mirko "Einladen"; darunter die Kacheln aller, gleich groß, in Spalten (wie viele,
   setzt js/seiten/raum.js als data-spalten), man selbst als letzte, unten die Knöpfe. Rechts nach Wunsch die
   Seitenleiste mit Chat oder Teilnehmern, am Handy über den Kacheln. Teilt jemand den Bildschirm, steht er groß links
   und die Kacheln rücken in eine Spalte rechts. Wartende Gäste oben rechts. Am iPhone bleiben Notch und Home-Leiste
   frei, auch quer. */

@layer seiten {
  .raum {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
    background:
      radial-gradient(60rem 40rem at 0% 0%, color-mix(in oklab, var(--marke-grau) 22%, transparent), transparent 70%),
      radial-gradient(50rem 40rem at 100% 100%, color-mix(in oklab, var(--marke-hell) 12%, transparent), transparent 70%),
      var(--grund);
  }

  .raum-kopf {
    display: flex;
    align-items: center;
    gap: var(--a3);
    min-width: 0;
    padding: max(var(--a2), env(safe-area-inset-top)) max(var(--a5), env(safe-area-inset-right)) var(--a2) max(var(--a5), env(safe-area-inset-left));
    background: var(--glas);
    border-bottom: 1px solid var(--rand);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
  }
  .raum-logo { width: auto; height: 2.2rem; }
  .raum-titel {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    margin: 0 auto 0 var(--a3);
    padding-left: var(--a4);
    border-left: 1px solid var(--linie);
    & strong { overflow: hidden; font: 600 var(--gr-16) / 1.2 var(--schrift-titel); white-space: nowrap; text-overflow: ellipsis; }
    & small { overflow: hidden; font-size: var(--gr-13); color: var(--text-leise); white-space: nowrap; text-overflow: ellipsis; }
  }
  .raum-uhr { font: 500 var(--gr-14) / 1 var(--schrift-titel); color: var(--text-leise); font-variant-numeric: tabular-nums; }

  .raum-buehne {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--a4);
    min-height: 0;
    padding: var(--a5) max(var(--a5), env(safe-area-inset-right)) max(var(--a4), env(safe-area-inset-bottom)) max(var(--a5), env(safe-area-inset-left));
  }
  .raum-kacheln {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--a3);
    min-height: 0;
  }
  .raum-kacheln[data-spalten="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raum-kacheln[data-spalten="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raum-kacheln[data-spalten="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .raum-geteilt { grid-area: 1 / 1; }
  .raum-ich { order: 1; }
  .raum-buehne:has(> .raum-geteilt:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) clamp(12rem, 20vw, 20rem);
    & .raum-kacheln { grid-area: 1 / 2; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; align-content: start; overflow-y: auto; }
    & .raum-kacheln .video-kachel { aspect-ratio: 16 / 9; }
    & .video-leer .kuerzel { width: 3rem; height: 3rem; font-size: 1.1rem; }
    & .video-leer strong { font-size: var(--gr-15); }
  }

  /* Seitenleiste rechts: Chat oder Teilnehmer */
  .raum-buehne:has(> .raum-seite:not([hidden])) { grid-template-columns: minmax(0, 1fr) clamp(18rem, 24vw, 24rem); }
  .raum-buehne:has(> .raum-geteilt:not([hidden])):has(> .raum-seite:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) clamp(10rem, 14vw, 14rem) clamp(18rem, 24vw, 24rem);
  }
  .raum-seite {
    grid-row: 1;
    grid-column: -2;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    background: var(--glas-stark);
    border: 1px solid var(--rand);
    border-radius: var(--rund-l);
    box-shadow: var(--schatten-karte);
    animation: hereinkommen 200ms var(--kurve) both;
  }
  .raum-seite-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--a2);
    padding: var(--a2) var(--a2) var(--a2) var(--a3);
    border-bottom: 1px solid var(--linie);
  }
  .reiter {
    display: flex;
    gap: 0.2rem;
    & button {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.45rem 0.8rem;
      font: 500 var(--gr-14) / 1 var(--schrift-titel);
      color: var(--text-2);
      background: none;
      border: 0;
      border-radius: var(--pille);
      cursor: pointer;
      &:hover { background: var(--tinte-flaeche); }
      &[aria-selected="true"] { color: var(--akzent-text); background: var(--verlauf-akzent); }
    }
  }

  /* Chat: Nachrichten von oben nach unten, die eigenen rechts; unten das Feld mit Senden */
  .raum-chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
  .chat-liste {
    display: flex;
    flex-direction: column;
    gap: var(--a3);
    margin: 0;
    padding: var(--a4);
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
  }
  .chat-leer {
    display: grid;
    justify-items: center;
    gap: var(--a2);
    margin: auto 0;
    padding: var(--a4);
    font-size: var(--gr-14);
    color: var(--text-leise);
    text-align: center;
    & .icon { width: 2rem; height: 2rem; }
  }
  .chat-nachricht {
    display: grid;
    gap: 0.2rem;
    max-width: 88%;
    & .chat-wer { font: 500 var(--gr-12) / 1.2 var(--schrift-titel); color: var(--text-leise); }
    & .chat-text {
      padding: 0.5rem 0.8rem;
      line-height: 1.45;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      background: var(--tinte-flaeche);
      border-radius: var(--rund) var(--rund) var(--rund) 4px;
      & a { color: inherit; }
    }
    &.eigene { align-self: flex-end; justify-items: end; }
    &.eigene .chat-text { color: var(--akzent-text); background: var(--verlauf-akzent); border-radius: var(--rund) var(--rund) 4px var(--rund); }
    &.system { align-self: center; max-width: 100%; & .chat-text { font-size: var(--gr-13); color: var(--text-leise); background: none; } }
  }
  .chat-eingabe {
    display: flex;
    align-items: end;
    gap: var(--a2);
    padding: var(--a3);
    border-top: 1px solid var(--linie);
    & textarea { min-height: 2.6rem; max-height: 8rem; border-radius: 1.3rem; padding: 0.55rem 1rem; }
    & .knopf { flex: none; width: 2.6rem; height: 2.6rem; }
  }

  /* Teilnehmer: Kürzel, Name, Mikrofon und Hand, für Mirko Stummschalten und Hinausnehmen */
  .raum-leute { display: grid; align-content: start; gap: var(--a3); padding: var(--a4); overflow-y: auto; }
  .raum-leute h3 { font-size: var(--gr-13); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-leise); }
  .leute-wartende { display: grid; gap: var(--a2); padding-bottom: var(--a3); border-bottom: 1px solid var(--linie); }
  .leute-liste {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    & li { display: flex; align-items: center; gap: var(--a3); min-height: 2.75rem; padding: 0.2rem 0; }
    & .leute-name { display: grid; flex: 1; min-width: 0; & span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } & small { font-size: var(--gr-12); color: var(--text-leise); } }
    & .leute-zeichen { display: flex; gap: 0.3rem; color: var(--text-leise); & .icon { width: 1.05rem; height: 1.05rem; } & .stumm { color: var(--minus); } & .hand { color: var(--warnung); } }
    & .knopf.rund { padding: 0.4rem; & .icon { width: 1rem; height: 1rem; } }
  }

  .raum-fuss {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: var(--a3);
    & :is(.video-zeile, .video-warnung) { width: min(34rem, 100%); }
  }
  .raum-fuss .video-knoepfe {
    flex-wrap: wrap;
    gap: var(--a2);
    padding: var(--a2);
    background: var(--glas);
    border: 1px solid var(--rand);
    border-radius: var(--pille);
    box-shadow: var(--schatten-karte);
    & .knopf.rund { padding: 0.75rem; & .icon { width: 1.3rem; height: 1.3rem; } }
    & [aria-pressed="true"][data-seite-knopf] { color: var(--akzent-text); background: var(--verlauf-akzent); border-color: transparent; }
  }

  /* Gäste im Warteraum: je eine Karte oben rechts über den Kacheln */
  .raum-wartende {
    position: absolute;
    top: calc(var(--a5) + var(--a3));
    right: calc(var(--a5) + var(--a3));
    z-index: 4;
    display: grid;
    gap: var(--a3);
    width: min(22rem, calc(100% - 2 * var(--a5)));
  }
  .raum-wartet {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--a3);
    padding: var(--a4);
    background: var(--glas-stark);
    border: 1px solid var(--akzent);
    border-radius: var(--rund-l);
    box-shadow: var(--schatten-2);
    animation: hereinkommen 240ms var(--kurve) both;
    & .kuerzel { width: 2.75rem; height: 2.75rem; font-size: var(--gr-14); }
    & p { display: grid; gap: 0.1rem; min-width: 0; }
    & strong { font: 600 var(--gr-16) / 1.25 var(--schrift-titel); overflow-wrap: anywhere; }
    & small { font-size: var(--gr-13); color: var(--text-leise); }
    & .reihe { grid-column: 1 / -1; flex-wrap: nowrap; }
    & .knopf { flex: 1; }
  }

  /* Vor dem Gespräch: Gäste warten mit einem Kreisel */
  .raum-tor-warten { display: flex; align-items: center; gap: var(--a3); color: var(--text-2); }
  .raum-kreisel {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border: 3px solid var(--linie-stark);
    border-top-color: var(--akzent);
    border-radius: 50%;
    animation: drehen 0.8s linear infinite;
  }
  .raum-auflegen .reihe { margin-top: var(--a2); }

  @media (max-width: 52rem) {
    .raum-kopf { padding-inline: max(var(--a3), env(safe-area-inset-left)) max(var(--a3), env(safe-area-inset-right));
      & .knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
    .raum-logo { height: 1.6rem; }
    .raum-titel { margin-left: var(--a2); padding-left: var(--a3); }
    .raum-buehne { gap: var(--a3); padding: var(--a3) max(var(--a3), env(safe-area-inset-right)) max(var(--a3), env(safe-area-inset-bottom)) max(var(--a3), env(safe-area-inset-left)); }
    .raum-buehne:has(> .raum-geteilt:not([hidden])) {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr) auto;
      & .raum-geteilt { grid-area: 1 / 1; }
      & .raum-kacheln { grid-area: 2 / 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    /* Die Seitenleiste liegt am Handy über den Kacheln */
    .raum-buehne:has(> .raum-seite:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
    .raum-seite { position: absolute; inset: var(--a3) var(--a3) auto; z-index: 6; height: calc(100% - 6.5rem - env(safe-area-inset-bottom)); }
    .raum-fuss .video-knoepfe { gap: 0.2rem; padding: 0.3rem; & .knopf.rund { padding: 0.6rem; & .icon { width: 1.15rem; height: 1.15rem; } } }
    .raum-uhr { display: none; }
  }

  /* Handy quer: wenig Höhe, darum ein kleiner Kopf und knappe Abstände */
  @media (max-height: 30rem) {
    .raum-kopf { padding-block: max(0.25rem, env(safe-area-inset-top)) 0.25rem; }
    .raum-buehne { gap: var(--a2); padding-block: var(--a2) max(var(--a2), env(safe-area-inset-bottom)); }
  }
}