/**
 * Piktogramm-Picker im Profilfeld "Hobbys" (CR-014, assets/js/profile-hobbys.js).
 * Das Board selbst (Panel, Tabs, Kacheln) nutzt die Klassen aus composer.css.
 */

.wg-hobby-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.wg-hobby-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Ausgewaehltes Piktogramm: Kachel mit Bild + Text und Entfernen-Knopf. */
.wg-hobby-tile {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 112px;
    padding: 6px 4px 4px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    text-align: center;
}

.wg-hobby-tile img {
    display: block;
    width: 96px;
    height: 80px;
    object-fit: contain;
}

.wg-hobby-label {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.2;
    color: #222;
}

/* Bereits vorhandenes normales Emoji/Zeichen (nicht Teil der Zuordnung). */
.wg-hobby-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 56px;
    height: 56px;
    padding: 0 22px 0 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

.wg-hobby-chip-text {
    font-size: 26px;
    line-height: 1;
}

.wg-hobby-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: #222;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.wg-hobby-remove:hover,
.wg-hobby-remove:focus-visible {
    background: rgba(176, 0, 32, 0.2);
    outline: none;
}

/* "Piktogramme"-Knopf wie im Chat (Rahmen, Icon). */
.wg-hobby-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 92px;
    height: 92px;
    border: 2px solid #000;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    user-select: none;
}

.wg-hobby-add:hover,
.wg-hobby-add:focus-visible {
    background: #f0f0f0;
    outline: none;
}

.wg-hobby-add-icon {
    width: 84px;
    height: 84px;
    object-fit: contain;
}

/* Board als Blatt am unteren Rand, mittig, nicht ueber die ganze Bildschirmbreite. */
.wg-hobby-panel {
    /* Ueber dem BuddyBoss-Modal "Neue Diskussion" (Newsfeed, CR-016: Modal z-index 999992,
     * Overlay 999991 - BuddyBoss Theme 2.x, nach Updates pruefen). */
    z-index: 1000000;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 960px;
    max-height: 75vh;
}

/* Freitext-Feld (Ereignis-Beschreibung, CR-015; seit CR-014-Nachtrag auch Profilfeld
 * "Hobbys"): bearbeitbarer Bereich mit Kacheln im Text.
 * "align-items: flex-start" statt "stretch" (Rueckmeldung Auftraggeber): der Knopf soll
 * nicht mit dem - je nach Inhalt unterschiedlich hohen - Textbereich mitwachsen, sondern
 * ein Quadrat bleiben (gleiche Groesse wie an anderen Stellen, siehe .wg-hobby-add unten). */
.wg-rich-picker {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Ohne dies schrumpft der Knopf (Flexbox-Standard: flex-shrink 1) auf den Rest, der neben
 * dem wachsenden Textfeld (.wg-rich-editor, flex: 1 1 auto) noch Platz hat - live gemessen
 * nur 29px statt 64px breit, obwohl .wg-hobby-add unten width:64px setzt. Keine eigene
 * Breiten-/Hoehen-Regel noetig, nur das Schrumpfen/Wachsen verhindern. */
.wg-rich-picker .wg-hobby-add {
    flex: 0 0 auto;
}

.wg-rich-editor {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-height: 96px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #222;
    font-size: 16px;
    /* Rueckmeldung Auftraggeber: Zeilen ohne Piktogramm sollen nicht "gequetscht" wirken
     * neben Zeilen mit einer Kachel. Eine Zeilenhoehe in Kachel-Groesse (114px, erster
     * Versuch) erzwang das auf JEDER Zeile - reine Textzeilen bekamen dadurch einen riesigen,
     * leer wirkenden Abstand (Rueckmeldung Auftraggeber: "sieht nicht gut aus"). Eine Zeile
     * mit Kachel braucht das gar nicht: der Zeilenkasten waechst im normalen Textfluss
     * ohnehin auf die Hoehe des groessten Inline-Elements (hier: die Kachel) - dafuer reicht
     * eine normale, nur maessig groessere Zeilenhoehe fuer reinen Text. */
    line-height: 2.2;
    overflow-wrap: anywhere;
    outline: none;
}

.wg-rich-editor:focus {
    border-color: #000;
}

.wg-rich-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 112px;
    margin: 6px 6px;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    vertical-align: middle;
    user-select: none;
}

.wg-rich-tile img {
    display: block;
    width: 96px;
    height: 80px;
    object-fit: contain;
}

/* Text unter dem Bild: reines CSS, kein Bestandteil des gespeicherten Wertes. */
.wg-rich-tile::after {
    content: attr(data-wg-label);
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.2;
    color: #222;
}