/* Raum: Verlauf mit Sprechblasen, Eingabe unten, Anwesende immer sichtbar (Spalte am Rechner,
   Zeile mit Blümchen über dem Verlauf am Handy). Gilt auch für Runden und Direktgespräche. */
@layer seiten {
  .raum { display: grid; grid-template-columns: 1fr 13rem; gap: 1rem; height: 100%; }
  .raum.direkt { grid-template-columns: 1fr; }
  .verlauf { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
  .verlauf h1 { margin: 0 0 .5rem; font-size: 1.2rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
  .verlauf h1 small { font-weight: 400; font-size: .8rem; opacity: .7; }
  .anwesend-zahl { display: none; }
  .verlauf .raum-kopf, .verlauf .raum-kopf[open] { display: block; margin-bottom: .4rem; }
  .raum-kopf > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; -webkit-user-select: none; user-select: none; }
  .raum-kopf > summary::-webkit-details-marker { display: none; }
  .raum-kopf > summary h1 { margin: 0; }
  .raum-kopf > summary::after { content: "»"; display: inline-block; transform: rotate(90deg); font-size: 1.1rem; line-height: 1; opacity: .6; transition: transform .2s; }
  .raum-kopf[open] > summary::after { transform: rotate(-90deg); }
  .raum-kopf > summary:hover::after { opacity: .8; }
  .raum-kopf[open] > summary { margin-bottom: .5rem; }
  .runde-hinweis, .oeffentlich-hinweis { font-weight: 400; font-size: .75rem; opacity: .6; }
  .verlauf form { flex-wrap: nowrap; margin-top: .5rem; align-items: flex-end; }
  .direkt h1 a { color: inherit; opacity: .6; text-decoration: none; }
  .zurueck { display: none; color: inherit; opacity: .6; text-decoration: none; margin-right: .4rem; }
  /* Verlauf */
  .raum #nachrichten { flex: 1; overflow-y: auto; padding: .5rem .5rem .5rem 0; display: flex; flex-direction: column; gap: calc(.15rem + var(--d-dichte)); position: relative; }
  .neue-zeilen { align-self: center; position: relative; z-index: 2; margin: -2.8rem 0 .6rem; padding: .35rem 1rem; border-radius: var(--rundung-pille); background: var(--d-akzent); color: #fff; border: 0; font-size: .85rem; box-shadow: 0 4px 14px rgb(0 0 0 / .3); cursor: pointer; }
  .neue-zeilen[hidden] { display: none; }
  .nachricht { padding: .3rem 0; }
  .nachricht p { margin: .1rem 0 0; white-space: pre-wrap; }
  .nachricht .an { opacity: .7; font-style: italic; margin-left: .3rem; }
  .nachricht.hinweis-zeile p { opacity: .6; font-style: italic; }
  .nachricht .wer { cursor: pointer; }
  .nachricht .wer:hover { text-decoration: underline; }
  .raum .nachricht { max-width: var(--d-blase); align-self: flex-start; background: var(--flaeche); border: 1px solid var(--ton-2); border-radius: var(--d-rundung) var(--d-rundung) var(--d-rundung) .25rem; padding: .45rem .8rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: default; }
  .raum .nachricht p { -webkit-user-select: text; user-select: text; }
  .raum .nachricht.meine { align-self: flex-end; background: var(--d-akzent); border-color: transparent; color: var(--akzent-text); border-radius: var(--d-rundung) var(--d-rundung) .25rem var(--d-rundung); }
  .raum .nachricht.meine .wer, .direkt .nachricht .wer { display: none; }
  .raum .nachricht .wer { font-size: .85rem; }
  .raum .nachricht .wann { font-size: .7rem; margin-left: .4rem; opacity: .6; }
  .raum .nachricht.meine .erwaehnung { color: #dbeafe; }
  .raum .nachricht.meine .wann, .raum .nachricht.meine .an { opacity: .75; }
  .raum .nachricht.fluestern { background: color-mix(in srgb, var(--fluestern) 18%, var(--flaeche)); border-left: 3px solid var(--fluestern); }
  .raum .nachricht.meine.fluestern { border-left: 0; border-right: 3px solid var(--fluestern); background: color-mix(in srgb, var(--fluestern) 45%, var(--d-akzent)); color: white; }
  .raum .nachricht.an-mich { background: color-mix(in srgb, var(--erwaehnung) 18%, var(--flaeche)); border-left: 3px solid var(--erwaehnung); padding-left: .6rem; }
  .raum .nachricht.hinweis-zeile, .nachricht.vermerk { align-self: center; background: transparent; border: 0; }
  .nachricht.vermerk { opacity: .6; font-style: italic; font-size: .85rem; text-align: center; }
  .nachricht.vermerk p { margin: 0; }
  .nachricht.vermerk .wann { margin-right: .4rem; }
  .raum .nachricht.haus { border-left: 3px solid var(--d-akzent); padding-left: .7rem; }
  .raum .nachricht.figur { background: color-mix(in srgb, var(--figur) 16%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--figur) 45%, transparent); border-left: 5px solid var(--figur); padding-left: .7rem; }
  .raum .nachricht.figur .wer { color: var(--figur); font-weight: 700; font-size: .95rem; }
  .raum .nachricht.figur .stumm { display: none; }   /* Figuren sind immer stumm, das muss nicht dastehen */
  .verlauf .raum-thema { margin: 0 0 .5rem; font-size: .9rem; opacity: .8; }
  .haus-bild { float: left; margin: .1rem .6rem .2rem 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ton-2); overflow: hidden; }
  .haus-bild img { width: 100%; height: 100%; object-fit: cover; }
  .haus-bild .punkt { width: 1.4rem; height: 1.4rem; }
  .schritt-knopf { margin: .5rem 0 .1rem; clear: both; }
  .schritt-knopf button, .schritt-knopf .knopf { font-size: .95rem; padding: .45rem 1rem; border-radius: var(--rundung-pille); }
  /* Eingabe mit Befehlsliste */
  .eingabe-bereich { position: relative; }
  .befehle { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 .4rem; padding: .3rem; background: var(--flaeche); border: 1px solid var(--ton-4); border-radius: var(--rundung); max-height: 14rem; overflow-y: auto; box-shadow: var(--schatten); z-index: var(--z-befehle); }
  .befehle[hidden] { display: none; }
  .befehle li { display: flex; gap: .8rem; align-items: baseline; padding: .35rem .6rem; border-radius: var(--rundung-klein); cursor: pointer; }
  .befehle li.aktiv, .befehle li:hover { background: var(--d-akzent); color: var(--akzent-text); }
  .befehle code { font-size: .9rem; white-space: nowrap; }
  .befehle span { font-size: .85rem; opacity: .8; }
  /* Anwesende */
  .raum > aside { min-width: 0; border-left: 1px solid var(--rand); padding-left: 1rem; overflow-y: auto; }
  .raum > aside h2 { font-size: var(--winzig); text-transform: uppercase; letter-spacing: .04em; opacity: .6; margin: 0 0 .4rem; }
  .raum > aside li { cursor: pointer; padding: .2rem 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
  .raum > aside li:hover { text-decoration: underline; }
  .raum > aside li small { flex-basis: 100%; padding-left: 1.25rem; opacity: .6; font-size: .75rem; }
  .holen-liste { margin-bottom: 1rem; }
  .holen-liste h2 { margin: 0 0 .4rem; }
  .holen-liste li { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; }
  .holen-liste .klein-knopf { margin-left: auto; font-size: var(--winzig); padding: .15rem .5rem; }
  .holen-mobil { display: none; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
  .runde-knopf { margin: .2rem 0 .8rem; font-size: .85rem; }
}
@layer handy {
  @media (max-width: 40rem) {
    .raum { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .raum > aside { display: block; order: -1; border-left: 0; padding: 0 0 .4rem; border-bottom: 1px solid var(--rand); margin-bottom: .4rem; overflow: visible; }
    .raum > aside h2, .raum > aside .tipp, .raum > aside li small, .raum > aside .holen-liste { display: none; }
    .raum > aside ul { display: none; flex-wrap: wrap; gap: .3rem; padding-top: .4rem; }
    .raum > aside.anwesend-offen ul { display: flex; }
    .anwesend-zahl { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: .1rem 0; color: inherit; font-size: .85rem; opacity: .8; cursor: pointer; }
    .anwesend-zahl::after { content: "»"; display: inline-block; transform: rotate(90deg); opacity: .6; transition: transform .2s; }
    .anwesend-offen .anwesend-zahl::after { transform: rotate(-90deg); }
    .raum > aside li { padding: .15rem .55rem; font-size: .85rem; background: var(--ton-2); border-radius: var(--rundung-pille); white-space: nowrap; flex-wrap: nowrap; }
    .raum > aside li.status-weg { display: none; }
    .holen-mobil { display: flex; }
    .zurueck { display: inline; }
  }
  @media (pointer: coarse) { .raum .nachricht, .raum .nachricht p, .raum .nachricht * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
}