/* Nachrichtensystem */


/* ===== Übersicht: Threads / Kontakte ===== */

.hp-message__star {
    color: #cbb07e;
    font-size: 18px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Badge im Titel (in der Übersicht und im Thread) */
.hp-message__badge.hp-message__badge--paid {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f2e2b8;
    color: #7a6334;
    font-size: 11px;
    font-weight: 600;
}

/* Karten in der Übersicht hervorheben.
   Verschiedene mögliche Wrapper mit :has, einer trifft sicher. */
.hp-messages__item:has(.hp-message__badge--paid),
.hp-message:has(.hp-message__badge--paid),
tr:has(.hp-message__badge--paid) {
    background: #fff8e5 !important;
}

/* ===== Einzelne Nachrichten im Thread ===== */

.hp-message-text-wrapper {
    margin-bottom: 10px;
}

.hp-message__text--paid {
    background: #fff8e5;
    border-radius: 10px;
    padding: 12px 15px;
    border-left: 4px solid #cbb07e;
}



/* Gesamte Zeile eines bezahlten Threads einfärben */
.hp-messages tr.hp-message--thread-block:has(.hp-message__listing--paid-app) td {
    background-color: #fff4c1; /* dein Gold-Gelb */
}

/* Optional: leichte Kontur, damit es sich absetzt */
.hp-messages tr.hp-message--thread-block:has(.hp-message__listing--paid-app) td {
    box-shadow: inset 0 0 0 1px rgba(218, 165, 32, 0.35);
}


/* --- 2. Badge-Styling --- */
.hp-paid-app-label,
.hp-paid-app-label-inline {
    display: inline-block;
    margin-left: 0.5em;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background-color: #ffc857;
    color: #4a3b00;
}

/* Badge im Chat-Verlauf etwas separater darstellen */
.hp-paid-app-label {
    margin-left: 0;
    margin-bottom: 0.4em;
    display: inline-block;
}





/* "Nachricht senden"-Button überall verstecken */
.hp-vendor__action--message {
    display: none !important;
}


/* Allgemeines vertikales Padding für Nachrichtenzeilen */
.hp-messages.hp-table tr.hp-message--thread-block td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Extra-Padding links beim Absender */
.hp-messages.hp-table .hp-message__sender {
    padding-left: 16px !important;
}

/* Extra-Padding rechts bei Datum */
.hp-messages.hp-table .hp-message__date {
    padding-right: 16px !important;
}


/* Zeilen-Hover (sowohl normale als auch bezahlte) */
.hp-messages.hp-table tr.hp-message--thread-block:hover td {
    background-color: #ffeaa0 !important; /* etwas dunkleres Gelb */
}


/* ============================
   1. Tabelle wirklich nahtlos
   ============================ */

/* Tabelle selbst: keine Abstände zwischen Zellen */
.hp-messages.hp-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* Alle Zellen in der Nachrichten-Tabelle komplett neutralisieren */
.hp-messages.hp-table td,
.hp-messages.hp-table th {
    border: none !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
}

/* Pseudo-Elemente, die als Trennlinien dienen könnten, deaktivieren */
.hp-messages.hp-table td::before,
.hp-messages.hp-table td::after,
.hp-messages.hp-table th::before,
.hp-messages.hp-table th::after {
    content: none !important;
}

/* ============================
   2. Nur horizontale Linien für Thread-Zeilen
   ============================ */
.hp-messages.hp-table tr.hp-message--thread-block td {
    border-top: 1px solid #f8e6a0 !important;
    border-bottom: 1px solid #f8e6a0 !important;
    /* explizit KEIN left/right */
    border-left: none !important;
    border-right: none !important;
}