/**
 * Eigenes Piktogramm-Board im Chat (CR-003).
 *
 * v1.3.0 (CR-011, bp-better-messages 3.0.3): Die eigene Audio-Aufnahme
 * (.wg-voice-*) und der eigene Senden-Button (.wg-send-*) sind entfernt -
 * Sprachnachrichten und Senden laufen wieder ueber die nativen Elemente von
 * bp-better-messages. Die Groesse/Optik der Toggle-Buttons in der
 * Compose-Zeile steht in composer-tiles.css.
 */

.wg-pictogram-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    max-height: 80vh;
    background: #fff;
    border-top: 1px solid #ddd;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    padding: 12px;
    box-sizing: border-box;
}

.wg-pictogram-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 18px;
    padding-bottom: 8px;
    flex: 0 0 auto;
}

.wg-panel-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    align-self: flex-end;
}

/**
 * Kategorie-Tab-Leiste - v1.2.12: von einer horizontalen Pillen-Reihe
 * (Icon+Text nebeneinander, kleines 28px-Icon) auf grosse quadratische
 * Kacheln (Icon oben, Text darunter) umgestellt - Rueckmeldung Auftraggeber
 * (2026-09-16, Screenshot der alten, aktuell live produktiven Seite):
 * Aussehen soll dieser alten Seite entsprechen. "flex: 1 1 Npx" statt einer
 * festen Breite, damit sich die Kacheln je nach Panel-/Bildschirmbreite auf
 * gleichmaessige Spalten verteilen (nicht auf eine bestimmte
 * Bildschirmgroesse "gehardcoded"), umbruchfaehig statt horizontal
 * scrollbar (siehe CR-006), damit auch auf einem im Hochformat gehaltenen
 * Tablet alle 8 Kategorien ohne seitliches Wischen erreichbar bleiben.
 */
.wg-pictogram-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    padding-bottom: 10px;
    flex: 0 0 auto;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.wg-pictogram-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 110px;
    min-width: 90px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
    padding: 10px 6px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-align: center;
    cursor: pointer;
    min-height: 44px;
}

.wg-pictogram-tab img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex: 0 0 auto;
}

.wg-pictogram-tab:hover,
.wg-pictogram-tab:focus-visible {
    border-color: #999;
    outline: none;
}

.wg-pictogram-tab.is-active {
    border-color: #2e7d32;
    border-width: 2px;
    background: #e8f5e9;
    color: #1b5e20;
}

@media (max-width: 480px) {
    .wg-pictogram-tabs {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .wg-pictogram-tab {
        flex: 1 1 80px;
        min-width: 72px;
        padding: 8px 4px;
        font-size: 12px;
    }

    .wg-pictogram-tab img {
        width: 40px;
        height: 40px;
    }
}

.wg-pictogram-panel-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

.wg-pictogram-panel-body h4 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: #555;
}

/* Kachel-Grösse (138px, Bild formatfüllend, 16px Text) bewusst identisch zur
   Darstellung eines bereits gesendeten Piktogramms uebernommen (siehe
   .wg-pictogram-tile in pictogram.css) - selbe Grössenordnung wie im alten
   System (plattform-plimplom-alt), statt der vorherigen kleinen 72px-Kacheln. */
.wg-pictogram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 10px;
}

.wg-pictogram-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    min-height: 138px;
    box-sizing: border-box;
}

.wg-pictogram-item:hover,
.wg-pictogram-item:focus-visible {
    background: #f0f0f0;
    outline: none;
    border-color: #999;
}

.wg-pictogram-item img {
    width: 100%;
    max-width: 110px;
    height: 90px;
    object-fit: contain;
}

/* Kleine Handy-Breiten: Kacheln etwas verkleinert, damit weiterhin mindestens
   zwei pro Zeile passen, statt auf eine einzelne, sehr breite Spalte
   zurueckzufallen. Ab Tablet-Breite (> 480px) gilt bereits die volle
   138px-Kachelgroesse aus .wg-pictogram-grid oben. */
@media (max-width: 480px) {
    .wg-pictogram-grid {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    }

    .wg-pictogram-item {
        min-height: 112px;
    }

    .wg-pictogram-item img {
        height: 72px;
    }
}