/* HH Stream: Reaktions-UI + dezentes Glass-Design fuer Feed-Posts */

/* --- Reaktions-Picker (schwebend) --- */
.hh-react-picker{
    position:absolute; z-index:99999; display:none; gap:4px;
    padding:6px 8px;
    background:rgba(20,14,17,.96);
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    box-shadow:0 12px 34px rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.hh-react-picker.show{ display:flex; animation:hhReactIn .14s ease; }
@keyframes hhReactIn{ from{opacity:0; transform:translateY(6px) scale(.9);} to{opacity:1; transform:none;} }
.hh-react-opt{
    border:0; background:transparent; font-size:24px; line-height:1;
    cursor:pointer; padding:4px; border-radius:50%;
    transition:transform .12s ease;
}
.hh-react-opt:hover{ transform:scale(1.4) translateY(-3px); }

/* --- Reaktions-Chips + eigene Reaktion --- */
.hh-react-chips{ display:inline-flex; gap:6px; margin-left:8px; vertical-align:middle; flex-wrap:wrap; }
.hh-react-chip{
    font-size:12px; line-height:1.6;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px; padding:1px 8px; white-space:nowrap;
}
.hh-react-mine{ font-size:1.2em; line-height:1; vertical-align:middle; }
.hh-stream-like{ cursor:pointer; }

/* --- Dezentes Glass fuer Feed-Posts (nur Radius/Border/Shadow -> keine Kontrast-Risiken) --- */
.ui-block[id^="stream_s_"]{
    border-radius:16px !important;
    border:1px solid rgba(228,0,43,.12);
    box-shadow:0 6px 24px rgba(0,0,0,.28);
    overflow:hidden;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ui-block[id^="stream_s_"]:hover{
    border-color:rgba(228,0,43,.30);
    box-shadow:0 12px 36px rgba(0,0,0,.42);
}

/* --- Lesbarkeit: Post-Text im Dark-Theme (iboys.css setzt sonst #323236 = dunkel auf dunkel).
   Die Fix-Farbe lebt sonst nur in iboys.night.css, das aber nur bei aktivem Nightmode laedt. --- */
.stream-content{ color:var(--hh-text, #ececf1) !important; }
.stream-content p,
.stream-content span,
.stream-content div,
.stream-content strong,
.stream-content em,
.stream-content li,
.stream-content blockquote{ color:inherit !important; }
.stream-content a{ color:var(--hh-red, #e4002b) !important; }

/* --- Welle S3: Umfragen --- */
/* Composer-Optionsfelder */
#hh-poll-box .hh-poll-hint{ font-size:12px; color:var(--hh-faint, #9a9aa5); margin-bottom:8px; }
#hh-poll-box .hh-poll-opt{ margin-bottom:8px; }

/* Inline-Umfrage im Feed */
.hh-stream-poll{ margin:4px 0 15px; display:flex; flex-direction:column; gap:8px; }
.hh-poll-vote{
    text-align:left; width:100%; padding:11px 14px; cursor:pointer;
    background:rgba(255,255,255,.04); color:var(--hh-text, #ececf1);
    border:1px solid rgba(228,0,43,.28); border-radius:10px;
    font-size:14px; transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.hh-poll-vote:hover{ background:rgba(228,0,43,.14); border-color:rgba(228,0,43,.55); transform:translateY(-1px); }
.hh-poll-result{
    position:relative; width:100%; padding:11px 14px; border-radius:10px; overflow:hidden;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:space-between;
}
.hh-poll-bar{
    position:absolute; left:0; top:0; bottom:0; z-index:0;
    background:linear-gradient(90deg, rgba(228,0,43,.38), rgba(228,0,43,.16));
    transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.hh-poll-lbl{ position:relative; z-index:1; color:var(--hh-text, #ececf1); font-size:14px; }
.hh-poll-pct{ position:relative; z-index:1; color:#fff; font-weight:600; font-size:13px; }
.hh-poll-total{ font-size:12px; color:var(--hh-faint, #9a9aa5); margin-top:2px; }

/* --- Welle S3: GIF-Picker --- */
.hh-gif-box{
    width:100%; clear:both; flex-basis:100%;
    margin:10px 20px 15px; padding:10px;
    background:var(--hh-surface2, #1a1a1e);
    border:1px solid rgba(255,255,255,.10); border-radius:12px;
    box-sizing:border-box;
}
.hh-gif-search{ display:flex; gap:8px; margin-bottom:10px; }
.hh-gif-search input{ flex:1; }
.hh-gif-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));
    gap:6px; max-height:270px; overflow-y:auto;
}
.hh-gif-item{
    width:100%; height:92px; object-fit:cover; border-radius:8px; cursor:pointer;
    background:rgba(255,255,255,.05);
    transition:transform .1s ease, outline .1s ease;
}
.hh-gif-item:hover{ transform:scale(1.05); outline:2px solid var(--hh-red, #e4002b); }
.hh-gif-preview{ max-width:150px; max-height:150px; border-radius:8px; display:block; }
.hh-gif-remove{
    position:absolute; top:-8px; right:-8px;
    background:var(--hh-red, #e4002b); color:#fff !important;
    width:22px; height:22px; border-radius:50%; text-align:center; line-height:22px;
    font-weight:bold; text-decoration:none;
}

/* --- Emoji-Picker (Legacy emojione-Panel) ans Dark-Theme anpassen; war weiss/grau ---
   .ep-e sind Sprite-Bilder -> Hintergrund darf dunkel werden, Emojis bleiben sichtbar. */
#emojiStreamContainer{ max-width:100%; margin:6px 0; }
#emojiStreamContainer .ep-container{
    background:var(--hh-surface2, #1a1a1e) !important;
    border:1px solid rgba(255,255,255,.10) !important; border-radius:12px; overflow:hidden;
}
#emojiStreamContainer .ep-categories{
    background-color:var(--hh-surface2, #1a1a1e) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
}
#emojiStreamContainer .ep-emojies{ background-color:transparent !important; max-height:250px; }
#emojiStreamContainer .ep-c-text,
#emojiStreamContainer .ep-c{ color:var(--hh-text, #ececf1) !important; }
/* Kategorie-Icons (Outlines) heller, damit auf Dunkel sichtbar */
#emojiStreamContainer .ep-categories svg,
#emojiStreamContainer .ep-categories i{ filter:invert(1) brightness(1.6); opacity:.7; }

/* ============================================================
   HH Welle S2: Premium-/Abo-Content im Stream
   ============================================================ */

/* Composer: Premium-Preis-Box */
#hh-premium-box{
    background:var(--hh-surface2, #1a1a1e);
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px; padding:12px 14px;
}
.hh-premium-hint{ color:var(--hh-faint, #9a9aa5); font-size:.9rem; margin-bottom:10px; }
.hh-premium-hint i{ color:var(--hh-red, #e4002b); }
.hh-premium-price-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hh-premium-price-row label{ color:var(--hh-text, #ececf1); margin:0; font-size:.95rem; }

/* Preis-Input: globale main.css-Regel (input{display:block;width:100%;padding:1.1rem}) haerten */
input.hh-premium-price{
    -webkit-appearance:none !important; appearance:none !important;
    display:inline-block !important; width:120px !important; max-width:120px !important;
    padding:.5rem .7rem !important; margin:0 !important;
    background:var(--hh-surface, #141416) !important;
    color:var(--hh-text, #ececf1) !important;
    border:1px solid rgba(255,255,255,.18) !important; border-radius:8px !important;
    font-size:1rem !important; line-height:1.2 !important; height:auto !important;
    box-shadow:none !important;
}
input.hh-premium-price:focus{ outline:none !important; border-color:var(--hh-red, #e4002b) !important; }

/* Gesperrter Premium-Post im Feed */
.hh-locked-post{
    position:relative; overflow:hidden; border-radius:12px;
    min-height:180px;
    border:1px solid rgba(255,255,255,.10);
    background:var(--hh-surface2, #1a1a1e);
}
.hh-locked-blur{ position:absolute; inset:0; }
.hh-locked-blur-inner{
    position:absolute; inset:-20px;
    background:
        repeating-linear-gradient(45deg, rgba(228,0,43,.10) 0 14px, rgba(20,20,22,.10) 14px 28px),
        radial-gradient(circle at 30% 30%, rgba(255,92,122,.20), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(228,0,43,.18), transparent 60%),
        var(--hh-surface, #141416);
    filter:blur(14px);
    opacity:.9;
}
.hh-locked-overlay{
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:28px 18px; gap:8px; min-height:180px;
    background:rgba(10,10,12,.35);
}
.hh-locked-lock{ font-size:2rem; color:var(--hh-red, #e4002b); }
.hh-locked-title{ font-size:1.15rem; font-weight:700; color:var(--hh-text, #ececf1); }
.hh-locked-sub{ color:var(--hh-faint, #cfcfd6); font-size:.92rem; max-width:420px; }
.hh-locked-actions{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
.hh-locked-actions .hh-unlock-btn{ background:var(--hh-red, #e4002b); border:none; color:#fff; }
.hh-locked-actions .hh-unlock-btn:hover{ filter:brightness(1.08); }
.hh-locked-actions .hh-sub-btn{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); color:var(--hh-text, #ececf1); }