@layer components {
/*
static/css/components/reviews-panel.css
Painel slide-in de reviews — versão canônica.
Usado em assistir-video e shorts-watch.
Valores customizáveis via CSS custom properties.

Para personalizar por página, defina as CSS vars em um seletor
com escopo de página. Exemplo:

  .reviews-panel {
    --reviews-panel-top: 60px;
    --reviews-panel-height: calc(100% - 60px);
  }
*/

/* === Custom Properties: panel shell === */
.reviews-panel {
    --reviews-panel-top: 0;
    --reviews-panel-height: 100%;
    --reviews-panel-bg: var(--bg-surface);
    --reviews-panel-shadow: -5px 0 30px rgb(0 0 0 / 80%);
    --reviews-panel-border-left: 1px solid var(--border-default);
    --reviews-panel-backdrop-bg: rgb(0 0 0 / 80%);
    --reviews-panel-backdrop-filter: blur(4px);
    --reviews-panel-header-bg: var(--gradient-primary);
    --reviews-panel-header-border: 1px solid var(--border-default);

    /* === Custom Properties: inner overrides === */
    --reviews-inner-header-bg: var(--bg-elevated);
    --reviews-inner-header-color: var(--text-primary);
    --reviews-inner-header-border-color: var(--border-default);
    --reviews-inner-rating-color: var(--text-primary);
    --reviews-inner-count-color: var(--text-muted);
    --reviews-inner-progress-bg: var(--bg-void);
    --reviews-inner-progress-fill-bg: var(--neon-yellow);
    --reviews-inner-btn-primary-bg: var(--gradient-primary);
    --reviews-inner-btn-primary-border: none;
    --reviews-inner-btn-primary-font-weight: var(--font-weight-semibold);
    --reviews-inner-btn-primary-transition: all var(--transition-fast);
    --reviews-inner-btn-primary-shadow: var(--shadow-glow-pink);
    --reviews-inner-btn-primary-hover-filter: brightness(1.1);
    --reviews-inner-btn-primary-hover-transform: translateY(-2px);
    --reviews-inner-btn-primary-hover-shadow: var(--shadow-glow-pink);
    --reviews-inner-btn-secondary-bg: var(--bg-void);
    --reviews-inner-btn-secondary-border-color: var(--border-default);
    --reviews-inner-btn-secondary-color: var(--text-secondary);
    --reviews-inner-btn-secondary-hover-bg: var(--bg-elevated);
    --reviews-inner-btn-secondary-hover-color: var(--text-primary);
    --reviews-inner-btn-secondary-hover-border-color: var(--text-muted);
    --reviews-inner-form-bg: var(--bg-elevated);
    --reviews-inner-form-border-color: var(--border-default);
    --reviews-inner-form-color: var(--text-primary);
    --reviews-inner-form-textarea-bg: var(--bg-void);
    --reviews-inner-form-textarea-color: var(--text-primary);
    --reviews-inner-form-textarea-border-color: var(--border-default);
    --reviews-inner-form-textarea-focus-border: var(--neon-pink);
    --reviews-inner-form-textarea-focus-shadow: 0 0 0 3px var(--neon-pink-glow);
    --reviews-inner-card-border-color: var(--border-default);
    --reviews-inner-content-color: var(--text-secondary);
    --reviews-inner-action-bg: rgb(255 255 255 / 5%);
    --reviews-inner-action-color: var(--text-muted);
    --reviews-inner-action-padding: 6px 12px;
    --reviews-inner-action-radius: var(--radius-md);
    --reviews-inner-action-border-color: var(--border-default);
    --reviews-inner-helpful-hover-color: var(--neon-cyan);
    --reviews-inner-helpful-hover-border: var(--neon-cyan);
    --reviews-inner-helpful-hover-bg: rgb(0 217 255 / 10%);
    --reviews-inner-report-hover-color: var(--neon-red);
    --reviews-inner-report-hover-border: var(--neon-red);
    --reviews-inner-report-hover-bg: rgb(255 77 90 / 10%);

    position: fixed;
    top: var(--reviews-panel-top);
    right: -480px;
    width: 480px;
    max-width: 90vw;
    height: var(--reviews-panel-height);
    background: var(--reviews-panel-bg);
    z-index: 10000;
    box-shadow: var(--reviews-panel-shadow);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-left: var(--reviews-panel-border-left);
}

.reviews-panel.active {
    right: 0;
}

/* === Backdrop === */
.reviews-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--reviews-panel-backdrop-bg);
    backdrop-filter: var(--reviews-panel-backdrop-filter);
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.reviews-backdrop.active {
    display: block;
}

/* === Panel Header === */
.reviews-panel-header {
    padding: var(--space-05);
    border-bottom: var(--reviews-panel-header-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--reviews-panel-header-bg);
}

.reviews-panel-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

/* === Close Button === */
.reviews-panel-close {
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgb(255 255 255 / 20%);
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.reviews-panel-close:hover {
    background: rgb(255 255 255 / 25%);
    transform: scale(1.05);
}

/* === Panel Body === */
.reviews-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-05);
}

.reviews-panel-body::-webkit-scrollbar {
    width: 8px;
}

.reviews-panel-body::-webkit-scrollbar-track {
    background: var(--bg-void);
}

.reviews-panel-body::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
}

.reviews-panel-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
}