/*
 * LiveChat - Self-hosted PHP live-chat solution
 *
 * LiveChat is a self-hosted PHP live-chat solution, deployable on cPanel
 * and compliant with Quebec Loi 25.
 *
 * Author      : Astral Internet
 * Contributor : Daniel Berthiaume
 *
 * ----
 * File description
 * Rating module styles, kept inside the module for full third-party independence. Imported by the
 * rating-console Stimulus controller (mounted on the operator console "Ratings" panel) so it ships
 * with the module rather than the core CSS. Styles the average block, the recent-ratings list and
 * the on/off rating glyphs (the chosen symbol coloured amber when filled, grey when empty).
 */

.rating-summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.rating-average {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.rating-average-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--lc-text, #16161a);
}

.rating-average-scale {
    font-size: 14px;
    color: var(--lc-muted, #64748b);
}

.rating-count {
    font-size: 13px;
    color: var(--lc-muted, #64748b);
}

.rating-recent-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lc-muted, #64748b);
}

.rating-recent {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rating-row {
    padding: 8px 10px;
    border: 1px solid var(--lc-border, #e2e8f0);
    border-radius: 6px;
}

.rating-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rating-row-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--lc-muted, #64748b);
}

.rating-row-visitor {
    font-size: 12px;
    color: var(--lc-text, #16161a);
    margin-left: auto;
}

.rating-row-comment {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lc-text, #16161a);
    white-space: pre-wrap;
    word-break: break-word;
}

.rating-row-comment.is-muted {
    color: var(--lc-muted, #94a3b8);
    font-style: italic;
}

.rating-empty,
.rating-loading {
    font-size: 13px;
    color: var(--lc-muted, #64748b);
}

/* Glyphes de note : symbole choisi, ambre si « plein », gris si « vide ». */
.rating-glyphs {
    letter-spacing: 2px;
    white-space: nowrap;
}

.rating-glyph.is-on {
    color: #f59e0b;
}

.rating-glyph.is-off {
    color: #cbd5e1;
}