/* Der Chat.
 *
 * Die Masse stammen aus dem Altsystem: eine Flaeche von 722 auf 567,
 * auf der alle Teile an festen Stellen liegen. Gemessen am laufenden
 * Chat, damit nichts verrutscht.
 *
 * Schrift ist ueberall Verdana in 12px - so steht es auch dort in
 * jedem einzelnen style-Attribut. */

.chatraum {
    position: relative;
    width: 722px;
    height: 567px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    border-radius: 0.8rem;
}

/* Die drei Schichten unter den Inhalten.
 *
 * Das Video ist absichtlich breiter als die Flaeche und sitzt links
 * versetzt - so fuellt es sie, ohne verzerrt zu werden. Die Werte
 * stammen aus dem Altsystem (1006 auf 566 bei -143px).
 *
 * Das Overlay darueber malt Rahmen, Trennlinien, Symbole und die
 * Beschriftung der Knopfleiste. Es laesst keine Klicks durch, sonst
 * kaeme man an die Knoepfe darunter nicht heran. */
.chatraum .ch-videoebene {
    position: absolute;
    left: -143px;
    top: 0;
    width: 1006px;
    height: 566px;
    z-index: 1;
    overflow: hidden;
}

.chatraum .ch-videoebene video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Twitch statt eines Videos - dieselbe Ebene, dieselbe Groesse. */
.chatraum .ch-twitchebene iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.chatraum .ch-overlay {
    position: absolute;
    left: 4px;
    top: 6px;
    width: 714px;
    height: 559px;
    z-index: 2;
    pointer-events: none;
}

.chatraum .ch-overlay img {
    width: 100%;
    height: 100%;
}

/* Ein zweites, halbdurchsichtiges Overlay legt einen ruhigen Grund
 * unter den Text - sonst flimmert das Video durch die Schrift. */
.chatraum .ch-overlay-grund {
    z-index: 2;
}



/* Alles auf der Flaeche liegt absolut - die Werte stehen im Markup,
 * damit sie neben den Koordinaten des Altsystems nachvollziehbar
 * bleiben. */
.chatraum .ch-flaeche {
    position: absolute;
    z-index: 3;
}

/* Die beschrifteten Felder.
 *
 * Sie duerfen ueber ihren Rahmen hinausragen - im Altsystem stand
 * dort `overflow: visible`, und das aus gutem Grund: Die Uhrzeit
 * misst in 16 Punkt Verdana etwa 76 Punkte, ihr Feld aber nur 71.
 * Mit `hidden` fehlten die letzten Sekunden. */
/* Die beschrifteten Felder: Hoererzahl, Chatterzahl, Uhr, die beiden
 * freien Textfelder und die Begruessung.
 *
 * line-height: normal, wie im alten Chat. Der lief in einem eigenen
 * Dokument ohne Bootstrap; hier erben die Felder sonst dessen 1.5.
 * Bei 14 Punkt Schrift sind das 21 statt 17 Punkt Zeilenhoehe - der
 * Text ruecht damit rund vier Punkt nach unten und sitzt zu tief im
 * Kasten, den das Preset ihm gibt. Bei der Uhr wurde die Zeile sogar
 * hoeher als der Kasten. */
.chatraum .ch-text {
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, .8);
    white-space: nowrap;
    line-height: normal;
}

/* Durchsichtige Klickflaechen - im Altsystem waren das leere divs
 * ueber gemalten Knoepfen. */
.chatraum .ch-klick {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Der Verlauf. Neueste Nachricht oben, wie im Altsystem - und ohne
 * Schatten hinter der Schrift: Welche Farbe zum Bild passt, waehlt
 * jeder selbst ueber "Color". */
#ch_verlauf {
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.5;
    color: #000;
    padding-right: 4px;
}

#ch_verlauf .ch-zeile {
    margin-bottom: 1px;
    word-wrap: break-word;
}

#ch_verlauf img {
    vertical-align: middle;
}

/* Die Smileys im Verlauf und in der Schreibzeile.
 *
 * Im Altsystem stand die Groesse in jedem einzelnen Bild: 19 auf 19
 * fuer die allermeisten, 30 auf 19 fuer 81.gif und 51 auf 25 fuer
 * 82.gif (chat/functions.php:321 ff.).
 *
 * Hier steht nur die Hoehe fest, die Breite folgt dem Bild - und das
 * trifft genau dieselben Masse: 81.gif ist 40 auf 25 gross, bei Hoehe
 * 19 werden daraus 30; 82.gif ist 70 auf 34, bei Hoehe 25 werden
 * daraus 51. Auch die spaeter dazugekommenen Smileys bekommen so ihr
 * richtiges Verhaeltnis, ohne dass jede Groesse einzeln gepflegt
 * werden muss. */
.ch-smiley,
#ch_feld img {
    height: 19px;
    width: auto;
    vertical-align: middle;
}

/* Der eine, der groesser ist. */
.ch-smiley[src$="/82.gif"],
#ch_feld img[src$="/82.gif"] {
    height: 25px;
}

/* /blink - haelt dreissig Sekunden, dann ist Ruhe. */
@keyframes ch-blinken {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}

#ch_verlauf .ch-blinkt {
    animation: ch-blinken 1s linear infinite;
}

/* /big */
#ch_verlauf .ch-gross {
    font-size: 18px;
}

/* Die Handlungen (/hallo, /klo, away) tragen ein Symbol davor. */
#ch_verlauf .ch-handlung {
    font-weight: bold;
    font-size: 13px;
}

#ch_verlauf .ch-handlung img {
    margin-right: 3px;
}

#ch_verlauf .ch-system {
    color: #00ff33;
    font-weight: bold;
    font-style: italic;
}

#ch_verlauf .ch-getrennt {
    color: #ff3333;
}

/* Und wenn sie zurueck ist. */
#ch_verlauf .ch-verbunden {
    color: #4ddb4d;
}

/* Wer da ist. */
#ch_anwesende {
    overflow-y: auto;
    overflow-x: hidden;
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, .8);
}

/* Ein Eintrag ist 20px hoch und bricht nicht um - genau wie im
 * Altsystem, wo das in jedem einzelnen style-Attribut stand. */
#ch_anwesende .ch-wer {
    height: 20px;
    white-space: nowrap;
    overflow: hidden;
}

#ch_anwesende .ch-ausblenden {
    float: left;
    line-height: 0;
}

#ch_anwesende .ch-ausblenden img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Fett und kursiv stehen nicht hier: Sie kommen aus den
 * Einstellungen dessen, der da steht - so sieht man in der Liste,
 * wie jemand schreibt. */
#ch_anwesende .ch-name {
    display: block;
    margin-left: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wen man ausgeblendet hat, steht blass da - seine Nachrichten
 * bleiben aus. */
#ch_anwesende .ch-wer.ch-still {
    opacity: .4;
}

/* Ein Abwesender: drei schlafende z in wachsender Groesse hinter dem
 * Namen, genau wie im Altsystem. */
#ch_anwesende .ch-schlaeft span {
    color: #e5e5e5;
    opacity: .7;
    text-shadow: 1px 1px 1px #000;
}

/* Das Zeichen der Stammhoerer und das Mikrofon des Sendenden. */
#ch_anwesende .ch-zeichen {
    width: 15px;
    height: 15px;
    margin-left: 3px;
    margin-top: -2px;
    vertical-align: middle;
}

#ch_anwesende .ch-sendet {
    width: 19px;
    height: 19px;
    margin-left: 3px;
    margin-top: -1px;
    vertical-align: middle;
    filter: drop-shadow(1px 1px 5px rgba(255, 255, 255, .9));
}

#ch_anwesende .ch-profil {
    color: inherit;
    text-decoration: none;
}

#ch_anwesende .ch-profil:hover {
    text-decoration: underline;
}

.ch-laedt {
    padding: 20px;
    text-align: center;
    color: #cfd8e3;
}

/* Die Eingabezeile.
 *
 * Weisse fette Schrift auf durchscheinendem Grund, ohne Rahmen - so
 * steht es im Altsystem in ihrem style-Attribut. Der Rahmen um das
 * Feld kommt aus dem Overlay, nicht aus dem CSS. */
#ch_feld {
    width: 100%;
    height: 27px;
    padding: 2px 6px;
    border: 0;
    outline: 0 none;
    background: transparent;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #fff;

    /* Ein beschreibbarer Bereich bricht sonst um und waechst; hier
     * soll er eine Zeile bleiben und seitlich mitlaufen.
     *
     * Ohne Balken: Die Zeile ist 27 Punkte hoch, ein Balken darunter
     * nimmt davon ein Drittel und verdeckt die Schrift. Gescrollt
     * wird trotzdem - der Browser schiebt die Zeile beim Tippen von
     * selbst mit der Schreibmarke mit. */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    line-height: 23px;
    cursor: text;
}

#ch_feld::-webkit-scrollbar {
    height: 0;
    display: none;
}

/* Ein beschreibbarer Bereich hat keinen Platzhalter - der muss
 * gezeichnet werden. */
#ch_feld:empty::before {
    content: attr(data-platzhalter);
    color: rgba(255, 255, 255, .55);
    font-weight: normal;
    font-size: 13px;
    pointer-events: none;
}

/* Ohne Namen darf man mitlesen, aber nicht schreiben. */
#ch_feld.ch-gesperrt {
    cursor: not-allowed;
    opacity: .7;
}

/* Die Begruessung darueber - 16px fett weiss, wie im Altsystem. */
#ch_begruessung {
    font-size: 16px;
    font-weight: bold;
}

/* Heller und dunkler stellen: zwei kleine Knoepfe ueber der
 * Knopfleiste, die den Hintergrund abdunkeln. */
/* Buendig in der unteren rechten Ecke des Verlaufsfeldes. Wo das
 * liegt, sagt das Preset - deshalb wird die Stelle im Skript
 * gesetzt und hier nur der Rueckfall angegeben. */
#ch_dimmer {
    position: absolute;
    left: 494px;
    top: 496px;
    z-index: 9;
    background: rgba(0, 0, 0, .5);
    border-radius: 3px;
    line-height: 0;
    padding: 2px;
}

#ch_dimmer img {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

#ch_dimmer a + a {
    margin-left: 4px;
}

/* Der Grund unter dem geschriebenen Chat.
 *
 * Die beiden Sonnen stellen seine Deckkraft - er verdunkelt damit
 * nur den Chatbereich, nicht das ganze Bild. */
.chatraum .ch-overlay-grund img {
    transition: opacity .3s;
}

/* Die Hilfe zu den Befehlen erscheint ueber der Eingabezeile,
 * sobald die Zeile mit einem Schraegstrich beginnt. */
.ch-hilfe {
    position: absolute;
    left: 10px;
    bottom: 462px;
    width: 506px;
    z-index: 12;
    display: none;
    padding: 8px 10px;
    background: rgba(0, 0, 0, .82);
    color: #fff;
    border-radius: 4px;
    line-height: 1.6;
}

.ch-hilfe i {
    color: #9fd4ff;
}

/* Die Knopfleiste unten.
 *
 * Ihre Beschriftungen stehen im Hintergrundbild - hier liegen nur die
 * Klickflaechen darueber. Ein eingeschalteter Knopf (fett, kursiv,
 * Ton) bekommt einen zarten Schein, sonst saehe man ihm nicht an,
 * dass er greift. */
#ch_leiste .ch-klick {
    z-index: 6;
    border-radius: 4px;
}

#ch_leiste .ch-klick:hover {
    background: rgba(255, 255, 255, .13);
}

/* Ein gedrueckter Knopf - fett, kursiv, der Ton.
 *
 * Die Beschriftungen sind Teil des Hintergrundbilds; markieren laesst
 * sich ein Knopf also nur, indem etwas darueber liegt. Im Altsystem
 * war das eine schwarze Flaeche, die von Deckkraft 0 auf 0.2 ging
 * (chat-sicher.php:1363) - der Knopf wird dunkler. */
#ch_leiste .ch-klick.ch-an {
    background: rgba(0, 0, 0, .2);
}

/* Der Knopf unter der Namenswahl ist der einzige echte im Chat -
 * dort gibt es kein Bild, das ihn malt. */
.ch-knopf-gross {
    height: 36px;
    padding: 0 24px;
    border: 1px solid #2f6b2f;
    border-radius: 4px;
    background: linear-gradient(#5aa72e, #3d7d1c);
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}

.ch-knopf-gross:hover {
    background: linear-gradient(#69bd36, #468d20);
}

/* Die Fenster ueber dem Verlauf.
 *
 * Im Altsystem waren das Dialoge mit einem Knopf "Fenster
 * schliessen". Hier liegen sie unmittelbar im Chat und tragen ihre
 * Kopfzeile mit dem Kreuz - ohne die verdecken sie den Chat, und man
 * kaeme nicht mehr an ihn heran. */
.ch-fensterkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -6px -6px 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, .1);
    border-radius: 4px 4px 0 0;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.ch-fensterzu {
    padding: 0 4px;
    color: #cfd8e3;
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
}

.ch-fensterzu:hover {
    color: #fff;
    text-decoration: none;
}

/* Die Blaetterbalken.
 *
 * Im Altsystem waren sie neun Punkte schmal und dunkel unterlegt
 * (chat-sicher.php:870). Ohne eigene Angabe zeichnet der Browser
 * seinen eigenen: breit und hell, und er legt sich ueber die letzte
 * Spalte der Smileys.
 *
 * Der Verlauf bekommt keinen - dort stand im Altsystem width: 0. */
.chatraum ::-webkit-scrollbar {
    width: 9px;
}

.chatraum ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.chatraum ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .45);
    border-radius: 5px;
}

.chatraum ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .65);
}

.chatraum * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .45) rgba(0, 0, 0, .4);
}

.chatraum #ch_verlauf::-webkit-scrollbar {
    width: 0;
    display: none;
}

.chatraum #ch_verlauf {
    scrollbar-width: none;
}

/* Was unter der Kopfzeile steht, darf blaettern - das Fenster selbst
 * bleibt, wo es ist. */
.ch-fenster {
    display: flex;
    flex-direction: column;
}

.ch-fenster > *:not(.ch-fensterkopf) {
    flex: 0 1 auto;
    min-height: 0;
}

.ch-fenster {
    position: absolute;
    left: 13px;
    top: 141px;
    width: 523px;
    height: 381px;
    z-index: 20;
    background: rgba(20, 30, 45, .95);
    border: 1px solid #4d6c8a;
    border-radius: 5px;
    padding: 6px;
    overflow: hidden;
}

/* Die Kategorien stehen fuer sich - mit Luft und einer feinen Linie
 * darunter, sonst kleben sie an der ersten Reihe Smileys. */
.ch-fenster .ch-reiter {
    display: flex;
    gap: 3px;
    margin-bottom: 9px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.ch-fenster .ch-reiter img {
    width: 34px;
    height: 34px;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px;
}

.ch-fenster .ch-reiter img.ch-an {
    background: rgba(255, 255, 255, .22);
}

.ch-fenster .ch-inhalt {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Das Profil und das Mod-Menue blaettern als Ganzes. */
.ch-fenster .ch-modmenue,
.ch-fenster .ch-profil-daten {
    overflow-y: auto;
}

.ch-fenster .ch-inhalt img {
    width: auto;
    height: 30px;
    margin: 2px;
    cursor: pointer;
}

/* Reiter und Smileys in der Groesse des Altsystems: 34 und 30
 * Punkte. Groesser wirkte im Chat erschlagend. */
/* Die Reiter wie die Smileys: Hoehe fest, Breite nach Bild. Ein
 * padding-bottom nahm dem Bild sonst drei Punkte Hoehe und drueckte
 * es zusammen. */
.ch-fenster .ch-reiter img {
    width: auto;
    height: 34px;
    padding: 0;
    border-radius: 3px;
}

.ch-fenster .ch-inhalt {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Die Hoehe steht fest, die Breite folgt dem Bild.
 *
 * Drei der 120 Smileys sind nicht quadratisch - 81.gif ist 40 auf 25,
 * 82.gif 70 auf 34, 120.png 27 auf 24. Eine feste Breite quetschte sie
 * zusammen. Das Altsystem gab denselben dreien eigene Masse mit
 * (chat-sicher.php:1194); hier reicht width: auto. */
.ch-fenster .ch-inhalt img {
    width: auto;
    height: 30px;
    margin: 0;
    padding-bottom: 3px;
    cursor: pointer;
}

.ch-fenster .ch-inhalt img:hover {
    background: rgba(255, 255, 255, .18);
    border-radius: 3px;
}

.ch-farbfenster {
    height: auto;
    max-height: 381px;
    padding: 10px;
}

.ch-farbfenster .ch-farbe {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 3px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.ch-farbfenster .ch-farbe.ch-an {
    border-color: #fff;
}

/* Das Fenster der Moderation.
 *
 * Es liegt ueber der ganzen Seite, nicht im Chat: Dort waere es auf
 * dessen feste 722 auf 567 beschraenkt, und in laengeren Listen -
 * den Presets etwa, oder den 128 Videos - koennte man nicht
 * blaettern.
 *
 * Der Kasten waechst mit seinem Inhalt bis zu einer Hoehe, die auf
 * den Bildschirm passt; darueber hinaus blaettert der Koerper. */
.ch-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 14, 24, .72);
}

.ch-modal-kasten {
    display: flex;
    flex-direction: column;
    width: 520px;
    max-width: 100%;
    max-height: 85vh;
    background: #1b2735;
    border: 1px solid #3f5a78;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    font-family: Verdana, Geneva, sans-serif;
    color: #fff;
}

/* Smileys und Emojis brauchen mehr Platz - 120 beziehungsweise 103
 * Stueck wollen gesehen werden, ohne dass man endlos blaettert.
 *
 * Diese Regel steht bewusst nach .ch-modal-kasten: Bei gleicher
 * Spezifitaet gewinnt die spaetere, und andersherum bliebe es bei
 * den 520. */
.ch-modal-breit {
    width: 700px;
}

.ch-modal-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    font-size: 16px;
    font-weight: bold;
}

.ch-modal-zu {
    padding: 0 4px;
    color: #cfd8e3;
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
}

.ch-modal-zu:hover {
    color: #fff;
    text-decoration: none;
}

/* Hier wird geblaettert, wenn der Inhalt laenger wird. */
.ch-modal-koerper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

/* Im Modal brauchen die Listen keine eigene Hoehenbegrenzung mehr -
   sie blaettern mit dem Koerper. */
.ch-modal-koerper .ch-modinhalt,
.ch-modal-koerper .ch-videoliste,
.ch-modal-koerper .ch-modunter {
    max-height: none;
    overflow: visible;
}

.ch-modal-koerper .ch-videovorschau video {
    height: 180px;
}

/* Ein eigenes Preset einreichen. */
.ch-dateiknopf {
    cursor: pointer;
}

.ch-uploadhinweis {
    margin-bottom: 12px;
    color: #cfd8e3;
    font-size: 12px;
    line-height: 1.5;
}

.ch-uploadmeldung {
    margin-top: 8px;
    color: #ffb3b3;
    font-size: 12px;
}

.ch-uploadprobe img {
    width: 100%;
    border: 1px solid #4d6c8a;
    border-radius: 3px;
}

.ch-uploadmasse {
    margin: 8px 0;
    font-size: 12px;
}

.ch-masse-gut {
    color: #8fe08f;
}

.ch-masse-schlecht {
    color: #ffc27a;
}

.ch-uploadschritt label {
    display: block;
    margin: 10px 0 4px;
    color: #cfd8e3;
    font-size: 12px;
}

#ch_presetfuer {
    width: 100%;
    padding: 5px 6px;
    border: 1px solid #4d6c8a;
    border-radius: 3px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
}

.ch-uploadknoepfe {
    margin-top: 12px;
}

/* Das Menue auf den rechten Mausklick.
 *
 * Im Altsystem hiess es `rkm`. Es erscheint dort, wo geklickt wurde,
 * und verschwindet beim naechsten Klick daneben. */
.ch-rkm {
    position: absolute;
    z-index: 40;
    min-width: 190px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}

.ch-rkm a {
    display: block;
    padding: 5px 14px;
    color: #222;
    text-decoration: none;
    white-space: nowrap;
}

.ch-rkm a:hover {
    background: #3085d6;
    color: #fff;
    text-decoration: none;
}

.ch-rkm-strich {
    height: 1px;
    margin: 3px 0;
    background: #ccc;
}

.ch-modmenue h4 {
    color: #fff;
    font-size: 17px;
    margin: 0 0 10px;
}

.ch-modmenue p {
    color: #cfd8e3;
    font-size: 13px;
}

.ch-modknopf {
    display: block;
    margin-bottom: 8px;
    padding: 9px 16px;
    border-radius: 3px;
    background: rgb(48, 133, 214);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}

.ch-modknopf:hover {
    background: rgb(58, 148, 230);
    color: #fff;
    text-decoration: none;
}

/* Was nur die Administration darf, sieht anders aus. */
.ch-modknopf-admin {
    background: rgb(160, 60, 60);
}

.ch-modknopf-admin:hover {
    background: rgb(185, 72, 72);
}

/* Wer gerade sendet, sieht es seinem Knopf an. */
.ch-modknopf.ch-sendet-gerade {
    background: rgb(38, 140, 70);
}

/* Die Liste und ihre Unterlisten liegen uebereinander, nicht
 * untereinander - zusammen waeren sie hoeher als das Fenster. */
.ch-modunter {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.ch-zurueck {
    display: block;
    margin-bottom: 8px;
    color: #9fd4ff;
    font-size: 13px;
    text-decoration: none;
}

.ch-zurueck:hover {
    color: #fff;
    text-decoration: none;
}

.ch-modinhalt {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    color: #fff;
    font-size: 13px;
}

.ch-presetzeile {
    display: block;
    padding: 5px 8px;
    border-radius: 3px;
    color: #fff;
    text-decoration: none;
}

.ch-presetzeile:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
}

.ch-presetzeile.ch-an {
    background: rgba(255, 255, 255, .2);
    font-weight: bold;
}

.ch-realzeile,
.ch-bannzeile {
    display: flex;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ch-realnick {
    flex: 0 0 45%;
    font-weight: bold;
}

.ch-bannart {
    color: #9fb3c8;
}

.ch-entsperren {
    margin-left: auto;
    color: #9fd4ff;
}

/* Die Auswahl des Hintergrundvideos. */
.ch-videohinweis {
    margin-bottom: 8px;
    color: #cfd8e3;
    font-size: 12px;
}

.ch-videovorschau {
    margin-bottom: 10px;
}

.ch-videovorschau video {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 3px;
    background: #000;
}

.ch-videoliste {
    overflow-y: auto;
}

.ch-videozeile {
    display: block;
    padding: 4px 8px;
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}

.ch-videozeile:hover,
.ch-videozeile.ch-an {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    text-decoration: none;
}

/* Die drei Anweisungen stehen oben und heben sich ab. */
.ch-videosonder {
    color: #9fd4ff;
    font-style: italic;
}

/* Das Profilfenster.
 *
 * Aufbau wie im Altsystem: links die Bezeichnung, rechts die Angabe,
 * darunter die Werkzeuge als Reihe von Symbolen. */
.ch-profil-kopf h4 {
    color: #fff;
    font-size: 18px;
    margin: 0 0 4px;
}

.ch-profil-gast {
    color: #9fb3c8;
    font-size: 12px;
    margin: 0 0 8px;
}

.ch-profil-daten {
    margin-bottom: 12px;
}

.ch-profil-zeile {
    display: flex;
    gap: 8px;
    padding: 2px 0;
    font-size: 14px;
    color: #fff;
}

.ch-profil-was {
    flex: 0 0 110px;
    font-weight: bold;
}

.ch-profil-wert {
    flex: 1;
    word-break: break-word;
}

.ch-profil-leer {
    color: #ccc;
}

.ch-profil-text {
    margin-top: 8px;
    align-items: flex-start;
}

.ch-profil-werkzeuge {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

/* Ein Werkzeug ohne Symbol - fuer "Ich bin mal weg". */
.ch-werkzeug-text {
    align-self: center;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 3px;
    color: #cfd8e3;
    font-size: 12px;
    text-decoration: none;
}

.ch-werkzeug-text:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
}

.ch-werkzeug img {
    width: 32px;
    height: 32px;
}

.ch-werkzeug:hover img {
    filter: brightness(1.25);
}

.ch-profil-hinweis {
    min-height: 18px;
    padding-top: 8px;
    font-size: 12px;
    color: #9fd4ff;
}

/* Das Formular zum Bearbeiten des eigenen Profils. */
.ch-profil-form label {
    display: block;
    font-size: 12px;
    color: #cfd8e3;
    margin: 6px 0 2px;
}

.ch-profil-form input,
.ch-profil-form textarea,
.ch-profil-form select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #4d6c8a;
    border-radius: 3px;
    background: rgba(255, 255, 255, .95);
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
}

.ch-profil-form textarea {
    height: 70px;
    resize: vertical;
}

/* Die Farbwahl.
 *
 * Eine Palette fuer den schnellen Griff und darunter die genaue
 * Wahl. Jede Farbe ist so gewaehlt, dass sie auf hellen wie auf
 * dunklen Hintergruenden lesbar bleibt - der Chat laeuft auf
 * wechselnden Bildern. */
.ch-farbpalette {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.ch-farbreihe {
    display: flex;
    gap: 4px;
}

.ch-farbreihe .ch-farbe {
    flex: 1;
    height: 30px;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.ch-farbreihe .ch-farbe:hover {
    transform: scale(1.08);
}

.ch-farbreihe .ch-farbe.ch-an {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .5);
}

.ch-farbgenau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.ch-farbgenau label {
    color: #cfd8e3;
    font-size: 13px;
}

#ch_farbwaehler {
    width: 52px;
    height: 34px;
    padding: 2px;
    border: 1px solid #4d6c8a;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.ch-farbcode {
    width: 100px;
    padding: 6px 8px;
    border: 1px solid #4d6c8a;
    border-radius: 4px;
    background: rgba(255, 255, 255, .95);
    font-family: monospace;
    font-size: 14px;
    text-align: center;
}

/* Ein ungueltiger Wert blinkt kurz rot auf, statt still zu
 * verschwinden. */
.ch-farbcode-weh {
    border-color: #e64980;
    background: #ffe3ec;
}

/* Die Probe zeigt die Farbe so, wie sie im Chat aussieht - auf dem
 * laufenden Hintergrund, nicht auf weiss. */
.ch-farbprobe {
    margin-top: 14px;
    padding: 12px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .35);
    font-family: Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

/* Die Wetteranzeige oben rechts.
 *
 * Masse und Abstaende aus ipstadt.php uebernommen: Symbol oben,
 * Temperatur gross rechts, Ortsname im dunklen Kasten am Fuss. */
#ch_wetter {
    cursor: pointer;
}

.ch-wetter,
.ch-modbild {
    position: absolute;
    inset: 0;
}

.ch-wetterbild {
    position: absolute;
    left: 4px;
    top: -35px;
    z-index: 1;
}

.ch-wettergrad {
    position: absolute;
    z-index: 2;
    width: 171px;
    margin-left: -10px;
    margin-top: 25px;
    text-align: right;
    font-size: 20px;
    color: #fff;
    text-shadow: 1px 1px 5px #000;
}

.ch-wetterort {
    position: absolute;
    z-index: 4;
    width: 167px;
    margin-left: 4px;
    margin-top: 72px;
    padding: 2px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: rgba(0, 0, 0, .3);
    border-radius: 5px;
    border-bottom-left-radius: 0;
}

.ch-modbild img {
    width: 130px;
    margin-left: 24px;
    margin-top: 1px;
    border-radius: 5px;
    border-bottom-left-radius: 0;
    opacity: .9;
}

/* Sendet jemand, wechseln sich Wetter und Moderatorenbild ab -
 * sechzehn Sekunden fuer beide zusammen, wie im Altsystem. */
@keyframes ch-zeigtwetter {
      0% { opacity: 0; transform: scaleX(0); }
     53% { opacity: 1; transform: scaleX(1); }
     97% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(0); }
}

@keyframes ch-zeigtmod {
      0% { opacity: 0; transform: scaleX(0); }
      3% { opacity: 1; transform: scaleX(1); }
     45% { opacity: 1; transform: scaleX(1); }
     50% { opacity: 0; transform: scaleX(0); }
    100% { opacity: 0; transform: scaleX(0); }
}

.ch-wetter.ch-wechselt {
    animation: ch-zeigtwetter 16s infinite;
}

.ch-modbild {
    animation: ch-zeigtmod 16s infinite;
}

/* Der Balken fuer Emojis und Begruessung.
 *
 * Er liegt links ausserhalb der Flaeche und faehrt herein - im
 * Altsystem ueber margin-left, hier ueber dieselbe Bewegung mit
 * einem Uebergang. */
/* Der Balken, der von links einfaehrt.
 *
 * Im alten Chat trug er einen Verlauf von Weiss nach Blau und war
 * rechts abgerundet - das Ende, das stehen bleibt. Ohne ihn stand der
 * Text nackt vor Bild und Video und war kaum zu lesen.
 *
 * Bild und Text sitzen rechts und mittig in der Hoehe; dort rechnete
 * das Altsystem den oberen Abstand aus der Balkenhoehe aus. */
.ch-emojianzeige {
    left: 0;
    margin-left: -534px;
    transition: margin-left 1s ease-out;
    z-index: 8;
    overflow: hidden;

    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;

    background: linear-gradient(to right, #fff, #6699ff);
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    padding-right: 10px;
}

.ch-emojianzeige.ch-drin {
    margin-left: 0;
}

.ch-emojianzeige .ch-emojibild {
    line-height: 0;
}

.ch-emojianzeige .ch-emojibild img {
    width: 64px;
    height: 67px;
    border-radius: 20%;
    background: #fff;
}

.ch-emojianzeige .ch-emojitext {
    padding-right: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 18px;
    /* Dunkel auf dem hellen Verlauf - im Altsystem stand hier ein
       <font> ohne Farbe, das die schwarze Grundfarbe erbte. */
    color: #000;
}

/* Die Namenswahl fuer Gaeste.
 *
 * Sie stand als Flaeche im Chat und liegt jetzt im Fenster ueber der
 * Seite - der Knopf "Login" oeffnet sie. */
.ch-namenskasten {
    width: 100%;
    text-align: center;
    color: #fff;
}

/* Der einleitende Satz gehoert zur Ueberschrift, nicht zum Fussnoten-
 * hinweis darunter. */
.ch-namenskasten h4 + .ch-namenshinweis {
    margin-top: -6px;
    margin-bottom: 14px;
}

.ch-namenskasten h4 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 14px;
}

#ch_wunschname {
    width: 260px;
    height: 36px;
    padding: 4px 10px;
    border: 1px solid #7d9bb5;
    border-radius: 4px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    text-align: center;
}

.ch-namensgrund {
    min-height: 20px;
    margin: 8px 0;
    color: #ffb3b3;
    font-size: 12px;
}

.ch-namenshinweis {
    margin-top: 16px;
    font-size: 11px;
    color: #cfd8e3;
}

.ch-namenshinweis a {
    color: #9fd4ff;
}

/* Auf schmalen Geraeten.
 *
 * Der Chat ist eine feste Flaeche von 722 auf 567 - er kann nicht
 * mitwachsen, weil alles darin an festen Stellen liegt und das
 * Aussehen aus Bild und Overlay kommt.
 *
 * Das Altsystem hatte dafuer eine zweite, eigene Fassung im Markup
 * (`res_mob`) mit eigenen Hintergrundbildern. Sie greift dort
 * inzwischen nicht mehr: Auf dem Handy erscheint dieselbe Ansicht,
 * nur beschnitten - man sieht die rechte Haelfte nicht.
 *
 * Hier wird sie stattdessen als Ganzes verkleinert. Damit bleibt
 * alles sichtbar und bedienbar, und es gibt keine zweite Fassung zu
 * pflegen. Der aeussere Kasten bekommt die verkleinerte Hoehe, sonst
 * bliebe darunter Leerraum stehen. */
@media only screen and (max-width: 754px) {
    .chatiframe {
        overflow: hidden;
    }

    .chatraum {
        transform-origin: 0 0;
    }
}