/* Layout des von PictogramReplacer erzeugten Piktogramms: eigene kleine Box
   mit Bild oben, Text darunter - Masse (108px Breite, 90px Bildhoehe, 14px
   Text) uebernommen aus dem Original-CSS der aktuell live produktiven Seite
   (custom.css, #bp-message-thread-list .emoji-wrapper-a). !important noetig:
   bp-better-messages hat eigene, spezifischere/spaeter geladene img-Regeln
   innerhalb der Nachrichtenblasen, die eine einfache Regel ohne !important
   ueberschreiben wuerden - genau deshalb setzt das Plugin selbst an
   vergleichbarer Stelle ebenfalls bedingt !important (siehe
   insertEmojiToContentEditable() in bp-messages-free.min.js, Filter
   "better_messages_emoji_important"). Gilt fuer Chat UND Kalender-Event-
   Beschreibung, siehe PictogramStyles. */
.wg-pictogram-tile {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    vertical-align: middle !important;
    width: 138px !important;
    padding: 6px !important;
    /**
     * v1.2.10: Seitlicher Abstand (margin-left/-right) auf 10px erhoeht
     * (vorher 2px rundum) - Rueckmeldung Auftraggeber: Kacheln sollen
     * links/rechts mehr Luft haben, aehnlich der Toolbar-Kachel-Abstaende
     * (composer-tiles.css, margin-right: 12px). Oben/unten bewusst bei 2px
     * belassen, da dort bereits der Zeilenumbruch-Abstand greift.
     */
    margin: 2px 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    text-align: center !important;
    box-sizing: border-box !important;
    height: 138px;
    /**
     * v1.2.8: bp-better-messages setzt selbst die CSS-Variablen
     * --right-message-text-color (255,255,255 = weiss, fuer empfangene
     * Nachrichten) und --left-message-text-color (0,0,0 = schwarz, fuer
     * eigene gesendete) und wendet sie ueber eine sehr spezifische Regel
     * (".bp-messages-wrap .bm-list .bm-messages-stack.bm-right-side
     * .bm-content .bm-messages-listing .bm-message-content:not(...) *")
     * mit !important auf ALLE Nachkommen an - das schlug die einfache
     * "color: #222 !important" auf .wg-pictogram-label (v1.2.7), weil deren
     * Selektor viel weniger spezifisch ist (siehe CR-003, zwoelfte
     * Testrunde). Robuster als ein Spezifitaets-Wettruesten (das bei jedem
     * bp-better-messages-Update wieder brechen koennte, CLAUDE.md): die
     * Variablen selbst innerhalb unserer eigenen, immer weissen Kachel auf
     * eine dunkle Farbe ueberschreiben - "var(--right-message-text-color)"
     * loest dann fuer alle Nachkommen dieser Kachel auf unseren Wert auf,
     * unabhaengig von der Spezifitaet der urspruenglichen Regel.
     */
    --right-message-text-color: 34, 34, 34;
    --left-message-text-color: 34, 34, 34;
}

.wg-pictogram-tile .wg-pictogram {
    display: block !important;
    width: 138px !important;
    height: 138px !important;
    /* object-fit statt fester width+height ohne object-fit: erhaelt das
       Seitenverhaeltnis der Bilder (sonst werden nicht-quadratische Bilder
       gestaucht/verzerrt). */
    object-fit: contain !important;
}

.wg-pictogram-tile .wg-pictogram-label {
    display: block !important;
    margin-top: 3px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    /**
     * v1.2.7: War "color: inherit" - die Kachel hat aber immer einen
     * weissen Hintergrund (siehe .wg-pictogram-tile oben), waehrend die
     * umgebende Nachrichtenblase je nach gesendet/empfangen unterschiedliche
     * Textfarben vorgibt (z.B. weiss auf gruenem Blasenhintergrund bei
     * empfangenen Nachrichten). "inherit" uebernahm dann Weiss auf Weiss -
     * Text unsichtbar. Betraf nur empfangene Nachrichten (eigene gesendete
     * Nachrichten hatten zufaellig eine schwarze Umgebungsfarbe, daher dort
     * nicht aufgefallen). Fix: feste, vom Blasenkontext unabhaengige Farbe,
     * passend zum immer weissen Kachel-Hintergrund.
     */
    color: #222 !important;
}

/**
 * CR-015: Beschreibung eines Ereignisses in der Kalender-Uebersicht (.fc-event-description,
 * Theme "custom.js", FullCalendar) - kleine Kacheln, damit sie in die Kalender-Zelle passen.
 * !important wie oben, weil die Kachel-Regeln selbst !important setzen.
 */
.fc-event-description .wg-pictogram-tile {
    width: 64px !important;
    height: auto !important;
    margin: 1px 2px !important;
    padding: 2px !important;
}

.fc-event-description .wg-pictogram {
    width: 56px !important;
    height: 46px !important;
}

.fc-event-description .wg-pictogram-label {
    margin-top: 2px !important;
    font-size: 11px !important;
}

/**
 * CR-019: Kalender-Uebersicht (Theme "custom.js", FullCalendar 3, eventRender) - Reihenfolge
 * Symbol -> Titel -> Ort -> Zeit. Das Symbol (.fc-event-symbol, nur das erste Piktogramm der
 * Beschreibung) steht zentriert ueber dem Titel; Ort und Zeit je auf eigener Zeile darunter.
 * !important bei der Kachel wie oben, weil die Kachel-Regeln selbst !important setzen.
 */
.fc-event .fc-event-symbol {
    display: block;
    margin: 2px 0 4px;
    text-align: center;
}

.fc-event-symbol .wg-pictogram-tile {
    width: 80px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 2px !important;
}

.fc-event-symbol .wg-pictogram {
    width: 72px !important;
    height: 60px !important;
}

.fc-event-symbol .wg-pictogram-label {
    margin-top: 2px !important;
    font-size: 12px !important;
}

.fc-event .fc-content .fc-title,
.fc-event .fc-content .fc-event-location,
.fc-event .fc-content .fc-event-time-last {
    display: block;
}

.fc-event .fc-content .fc-event-location,
.fc-event .fc-content .fc-event-time-last {
    margin-top: 2px;
    font-size: 14px;
}