/* ============================================================
   FAN PULSE - 2026 LIGHT MODE (FINANCIAL REPORT STYLE)
   ============================================================ */

.fp-light-wrapper {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    font-family: 'Inter', sans-serif;
}

.fp-light__header {
    padding: 18px 25px;
    border-bottom: 1px solid #E2E8F0;
}
.fp-light__header h3 { font-size: 18px; font-weight: 800; color: #1A1A1B; margin: 0; }
.fp-light__header span { color: var(--color-brand); }

.fp-light__comments-window {
    max-height: 50vh;
    min-height: 200px;
    overflow-y: auto;
    padding: 25px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #ffffff;
}
.loading-spinner { text-align: center; color: #9ca3af; padding: 50px 20px; }

/* Comment Bubbles */
.fp-light__comment {
    background: #F8FAFC;
    padding: 12px 18px;
    border-radius: 12px;
    margin-bottom: 15px;
    border-left: 3px solid #E2E8F0;
}
.fp-light__comment.is-admin {
    background: #EFF6FF; /* Light Blue */
    border-left-color: var(--color-brand);
}
.fp-light__comment.is-reply { margin-left: 35px; background: #fff; }

.fp-light__author { font-size: 14px; font-weight: 700; color: #111827; }
.fp-light__body { font-size: 15px; color: #374151; line-height: 1.6; margin-top: 5px; }
.fp-light__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.fp-light__time { font-size: 12px; color: #9CA3AF; }

/* Input Dock */
.fp-light__input-dock {
    background: #F8FAFC;
    padding: 20px 25px;
    border-top: 1px solid #E2E8F0;
}

.fp-light__tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.fp-tool-group { display: flex; align-items: center; gap: 8px; }
.fp-tool-group label { font-size: 12px; font-weight: 600; color: #64748B; }

/* Stars */
.fp-light__stars { display: inline-flex; flex-direction: row-reverse; }
.fp-light__stars input { display: none; }
.fp-light__stars label { color: #CBD5E1; cursor: pointer; font-size: 20px; }
.fp-light__stars input:checked ~ label, .fp-light__stars label:hover, .fp-light__stars label:hover ~ label { color: var(--color-gold); }

.fp-light__input-area { display: flex; gap: 10px; }
.fp-light__input-area input {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    font-size: 14px;
    height: 44px;
    padding: 0 15px;
}
.fp-light__input-area input[name="nickname"] { flex-basis: 30%; }
.fp-light__input-area input[name="message"] { flex-grow: 1; }
.fp-light__input-area button {
    width: 44px; height: 44px; background: var(--color-brand);
    border: none; border-radius: 8px; color: #fff;
    cursor: pointer; transition: 0.2s;
}
.fp-light__input-area button:hover { background: var(--color-brand-dark); }

/* ============================================================
   FAN PULSE MOBILE RESPONSIVENESS FIX
   ============================================================ */
@media (max-width: 768px) {
    /* Header Reactions Wrap */
    .fp-reactions-mini {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }
    .mini-react-btn {
        flex: 1 1 calc(33.333% - 8px); /* 3 buttons in a row */
        text-align: center;
        padding: 8px 5px;
        font-size: 11px;
    }

    /* Tools (Topic & Stars) Wrap */
    .fp-light__tools {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .fp-tool-group {
        width: 100%;
        justify-content: space-between;
    }

    /* Input Area Wrap */
    .fp-light__input-area {
        flex-wrap: wrap;
    }
    .fp-light__input-area input[name="nickname"] {
        flex-basis: 100%; /* Name field takes full width */
        margin-bottom: 10px;
    }
    .fp-light__input-area input[name="message"] {
        flex-basis: calc(100% - 54px); /* Message field takes remaining width */
    }
}