/* ================================================================
   dream-navbar.css — Chronicle Panel v3.2
   Toate stilurile panoului lateral + subtitle bar.
   Teme: dark (implicit) / light (--chr-light)
   ================================================================ */

/* ── CSS Custom Properties — Dark theme (default) ────────────────── */
:root {
    /* Fundal — negru cald, nu neutru */
    --chr-bg:              hsl(22, 14%, 5%);
    /* Suprafete — tenta calda, opacitati mici pentru rafinament */
    --chr-bg-surface:      rgba(212, 192, 168, 0.07);
    --chr-bg-surface-2:    rgba(212, 192, 168, 0.05);
    --chr-bg-hover:        rgba(212, 192, 168, 0.12);
    /* Borduri — subtile, vizibile fara agresivitate */
    --chr-border:          rgba(212, 192, 168, 0.09);
    --chr-border-strong:   rgba(212, 192, 168, 0.20);
    /* Text — alb cald cu ierarhie clara */
    --chr-text:            rgb(232, 224, 213);
    --chr-text-secondary:  rgba(232, 224, 213, 0.80);
    --chr-text-muted:      rgba(232, 224, 213, 0.60);
    --chr-text-dim:        rgba(232, 224, 213, 0.40);
    --chr-text-faint:      rgba(232, 224, 213, 0.24);
    --chr-scrollbar:       rgba(212, 192, 168, 0.16);
    /* Accente — urmeaza --rieti-primary-rgb (specific poveștii) */
    --chr-accent-bg:        rgba(var(--rieti-primary-rgb, 139, 69, 19), 0.22);
    --chr-accent-bg-strong: rgba(var(--rieti-primary-rgb, 139, 69, 19), 0.36);
    --chr-accent-border:    rgba(var(--rieti-primary-rgb, 139, 69, 19), 0.52);
    --chr-accent-text:      rgba(var(--rieti-primary-rgb, 139, 69, 19), 1);
    --chr-accent-label:     rgba(var(--rieti-primary-rgb, 139, 69, 19), 0.82);
}

/* ── Light theme — pergament cald, contrast natural ──────────────── */
.chr-drawer--light {
    /* Fundal — crem cald */
    --chr-bg:              hsl(36, 22%, 91%);
    /* Suprafete — tenta bruna calda, opacitati mici */
    --chr-bg-surface:      rgba(50, 30, 12, 0.06);
    --chr-bg-surface-2:    rgba(50, 30, 12, 0.04);
    --chr-bg-hover:        rgba(50, 30, 12, 0.10);
    /* Borduri */
    --chr-border:          rgba(50, 30, 12, 0.13);
    --chr-border-strong:   rgba(50, 30, 12, 0.26);
    /* Text — brun inchis cald, contrast excelent pe fond crem */
    --chr-text:            rgb(22, 14, 6);
    --chr-text-secondary:  rgba(22, 14, 6, 0.80);
    --chr-text-muted:      rgba(22, 14, 6, 0.62);
    --chr-text-dim:        rgba(22, 14, 6, 0.44);
    --chr-text-faint:      rgba(22, 14, 6, 0.26);
    --chr-scrollbar:       rgba(50, 30, 12, 0.20);
    /* Accente — intensitate usor crescuta pe fond deschis */
    --chr-accent-bg:        rgba(var(--rieti-primary-rgb, 139, 69, 19), 0.16);
    --chr-accent-bg-strong: rgba(var(--rieti-primary-rgb, 139, 69, 19), 0.28);
    --chr-accent-border:    rgba(var(--rieti-primary-rgb, 139, 69, 19), 0.50);
    --chr-accent-text:      rgba(var(--rieti-primary-rgb, 139, 69, 19), 1);
    --chr-accent-label:     rgba(var(--rieti-primary-rgb, 139, 69, 19), 0.88);
}


/* ================================================================
   DRAWER SHELL
   ================================================================ */

.chr-drawer {
    display:         flex !important;
    flex-direction:  column !important;
    width:           308px !important;
    max-width:       92vw;
    padding:         0 !important;
    background:      var(--chr-bg) !important;
    border-right:    none !important;
    border-left:     1px solid var(--chr-accent-border) !important;
    overflow:        hidden;
    color:           var(--chr-text);
    transition:      background 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}

.chr-body {
    flex:           1;
    overflow-y:     auto;
    overflow-x:     hidden;
    padding-bottom: 2.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--chr-scrollbar) transparent;
}
.chr-body::-webkit-scrollbar          { width: 2px; }
.chr-body::-webkit-scrollbar-thumb    { background: var(--chr-scrollbar); border-radius: 2px; }


/* ================================================================
   HEADER
   ================================================================ */

.chr-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.2rem 1.1rem 1rem;
    border-bottom:   1px solid var(--chr-border);
    flex-shrink:     0;
    gap:             .5rem;
}

.chr-header-left {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    flex:           1;
    min-width: 0;
}

.chr-header-actions {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-shrink: 0;
}

.chr-eyebrow {
    font-family:    var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:      .48rem;
    font-weight:    700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--chr-accent-label);
    transition:     color 0.28s ease;
}

.chr-title {
    font-family:    var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:      .76rem;
    font-weight:    300;
    letter-spacing: .05em;
    color:          var(--chr-text-secondary);
    margin:         0;
    transition:     color 0.28s ease;
}

.chr-close-btn,
.chr-theme-btn {
    width:      28px;
    height:     28px;
    display:    flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:  var(--chr-bg-surface);
    border:      1px solid var(--chr-border);
    color:       var(--chr-text-muted);
    cursor:      pointer;
    transition:  background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
    font-size:   .85rem;
    flex-shrink: 0;
}
.chr-close-btn:hover,
.chr-theme-btn:hover {
    background: var(--chr-bg-hover);
    color:      var(--chr-text);
    border-color: var(--chr-border-strong);
}
.chr-theme-btn.is-light { color: var(--chr-accent-text); border-color: var(--chr-accent-border); }


/* ================================================================
   SECTIONS
   ================================================================ */

.chr-section {
    padding:       .95rem 1.1rem .75rem;
    border-bottom: 1px solid var(--chr-border);
}
.chr-section--last { border-bottom: none; }

.chr-section-label {
    display:        flex;
    align-items:    center;
    gap:            .38rem;
    font-family:    var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:      .54rem;
    font-weight:    700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var(--chr-accent-label) !important;
    text-shadow:    none !important;
    margin:         0 0 .75rem;
    transition:     color 0.28s ease;
}
.chr-section-label i { font-size: .65rem; opacity: .85; }


/* ================================================================
   RESUME / PROGRESS
   ================================================================ */

.chr-resume-empty {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    padding:     .4rem 0 .2rem;
    color:       var(--chr-text-dim);
    font-family: var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:   .64rem;
    font-style:  italic;
    transition:  color 0.28s ease;
}
.chr-resume-empty i { font-size: .85rem; opacity: .55; }

.chr-resume-card { display: none; flex-direction: column; gap: .55rem; }
.chr-resume-section.has-progress .chr-resume-empty { display: none; }
.chr-resume-section.has-progress .chr-resume-card  { display: flex; }

.chr-resume-thumb-row  { display: flex; gap: .6rem; align-items: center; }
.chr-resume-thumb {
    width:       56px;
    height:      42px;
    border-radius: 5px;
    overflow:    hidden;
    background:  var(--chr-bg-surface);
    flex-shrink: 0;
    border:      1px solid var(--chr-border);
}
.chr-resume-thumb img { width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; }
.chr-resume-thumb img.loaded { opacity: 1; }

.chr-resume-info { flex: 1; min-width: 0; }

.chr-resume-world {
    font-family:     var(--font-cormorant, 'Cormorant Garamond', serif);
    font-size:       .85rem;
    font-style:      italic;
    color:           var(--chr-text);
    margin:          0 0 2px;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
    text-transform:  capitalize;
    transition:      color 0.28s ease;
}
.chr-resume-date {
    font-family: var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:   .54rem;
    color:       var(--chr-text-dim);
    margin:      0;
    transition:  color 0.28s ease;
}

.chr-resume-stats {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   4px;
}
.chr-resume-stat {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             2px;
    padding:         .44rem 0;
    border-radius:   6px;
    background:      var(--chr-bg-surface);
    border:          1px solid var(--chr-border);
    font-family:     var(--font-montserrat, 'Montserrat', sans-serif);
    transition:      background 0.28s ease, border-color 0.28s ease;
}
.chr-resume-stat i { font-size: .72rem; color: var(--chr-accent-text); }
.chr-resume-stat > span:nth-child(2) {
    font-size:   .86rem;
    font-weight: 700;
    color:       var(--chr-text);
    line-height: 1;
    transition:  color 0.28s ease;
}
.chr-resume-stat-label {
    font-size:      .48rem !important;
    font-weight:    600;
    letter-spacing: .06em;
    color:          var(--chr-text-dim) !important;
    text-transform: uppercase;
    transition:     color 0.28s ease;
}

.chr-resume-actions { display: flex; gap: 5px; }

.chr-resume-play-btn {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .38rem;
    padding:         .56rem .5rem;
    border-radius:   7px;
    background:      var(--chr-accent-bg-strong);
    border:          1px solid var(--chr-accent-border);
    color:           var(--chr-text);
    font-family:     var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:       .62rem;
    font-weight:     700;
    letter-spacing:  .08em;
    cursor:          pointer;
    transition:      background 0.16s ease, border-color 0.16s ease;
}
.chr-resume-play-btn:hover {
    background:   rgba(var(--rieti-primary-rgb, 139, 69, 19), 0.50);
    border-color: rgba(var(--rieti-primary-rgb, 139, 69, 19), 0.70);
}
.chr-resume-play-btn i { font-size: .9rem; }

.chr-resume-fresh-btn {
    width:           32px;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   7px;
    background:      var(--chr-bg-surface);
    border:          1px solid var(--chr-border);
    color:           var(--chr-text-muted);
    cursor:          pointer;
    transition:      all 0.16s ease;
    font-size:       .88rem;
}
.chr-resume-fresh-btn:hover {
    border-color: rgba(220, 50, 50, 0.45);
    color:        rgba(220, 80, 60, 0.9);
    background:   rgba(220, 50, 50, 0.07);
}


/* ================================================================
   PLAY GRID (Skip / Cinema)
   ================================================================ */

.chr-play-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   .45rem;
}

.chr-play-card {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    padding:         1.05rem .5rem .85rem;
    min-height:      84px;
    border-radius:   10px;
    background:      var(--chr-bg-surface);
    border:          1px solid var(--chr-border);
    color:           var(--chr-text-muted);
    cursor:          pointer;
    transition:      background .2s ease, border-color .2s ease, color .2s ease;
}
.chr-play-card:hover {
    background:   var(--chr-accent-bg);
    border-color: var(--chr-accent-border);
    color:        var(--chr-text);
}
.chr-play-card.is-active {
    background:   var(--chr-accent-bg-strong);
    border-color: var(--chr-accent-border);
    color:        var(--chr-text);
}

.chr-hotkey {
    position:        absolute;
    top:             6px;
    right:           7px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           16px;
    height:          16px;
    font-family:     var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:       .48rem;
    font-weight:     700;
    border-radius:   3px;
    background:      var(--chr-bg-surface);
    border:          1px solid var(--chr-border-strong);
    color:           var(--chr-text-dim);
    letter-spacing:  0;
    pointer-events:  none;
    transition:      background 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}
.chr-hotkey--inline {
    position:   static;
    margin-left: auto;
    width:       auto;
    padding:     0 5px;
    opacity:     .7;
}

.chr-play-icon {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--chr-bg-surface);
    font-size:       1rem;
    transition:      background .2s ease;
}
.chr-play-card:hover .chr-play-icon      { background: var(--chr-accent-bg); }
.chr-play-card.is-active .chr-play-icon  { background: var(--chr-accent-bg-strong); }

.chr-play-label {
    font-family:    var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:      .56rem;
    font-weight:    600;
    letter-spacing: .1em;
    text-transform: uppercase;
}


/* ================================================================
   TRANSITION LIST
   ================================================================ */

.chr-transition-list { display: flex; flex-direction: column; gap: 2px; }

.chr-tr-btn {
    display:      flex;
    align-items:  center;
    gap:          .55rem;
    padding:      .54rem .62rem;
    border-radius: 7px;
    background:   transparent;
    border:       1px solid transparent;
    color:        var(--chr-text-secondary);
    cursor:       pointer;
    text-align:   left;
    width:        100%;
    transition:   background .14s ease, color .14s ease, border-color .14s ease;
}
.chr-tr-btn:hover  { background: var(--chr-bg-surface); border-color: var(--chr-border); }
.chr-tr-btn.is-active  { background: var(--chr-accent-bg-strong); border-color: var(--chr-accent-border); color: var(--chr-text); }
.chr-tr-btn.is-pending { background: rgba(255,180,50,.08); border-color: rgba(255,180,50,.28); color: rgba(255,200,80,.9); }

.chr-tr-icon { font-size: .9rem; min-width: 16px; text-align: center; opacity: .82; flex-shrink: 0; }
.chr-tr-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }

.chr-tr-label {
    font-family:    var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:      .65rem;
    font-weight:    600;
    line-height:    1.2;
}
.chr-tr-desc {
    font-family: var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:   .52rem;
    color:       var(--chr-text-dim);
    line-height: 1.3;
    transition:  color 0.28s ease;
}
.chr-tr-btn.is-active .chr-tr-desc { color: var(--chr-text-muted); }

.chr-tr-pending-badge {
    font-family:    var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:      .44rem;
    font-weight:    700;
    letter-spacing: .06em;
    padding:        2px 5px;
    border-radius:  3px;
    flex-shrink:    0;
    background:     rgba(255,180,50,.12);
    color:          rgba(255,200,80,.88);
    border:         1px solid rgba(255,180,50,.24);
}


/* ================================================================
   SUBTITLE SETTINGS
   ================================================================ */

/* Visibility toggle */
.chr-sub-eye-btn {
    display:      flex;
    align-items:  center;
    gap:          .5rem;
    width:        100%;
    padding:      .52rem .68rem;
    margin-bottom: .55rem;
    border-radius: 8px;
    background:   var(--chr-bg-surface);
    border:       1px solid var(--chr-border);
    color:        var(--chr-text-secondary);
    cursor:       pointer;
    font-family:  var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:    .66rem;
    font-weight:  400;
    transition:   all .18s ease;
    text-align:   left;
}
.chr-sub-eye-btn:hover { background: var(--chr-bg-hover); color: var(--chr-text); }
.chr-sub-eye-btn i { font-size: .84rem; flex-shrink: 0; }
.chr-sub-eye-btn > span:nth-child(2) { flex: 1; }

.chr-sub-eye-pill {
    font-family:    var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:      .48rem;
    font-weight:    800;
    letter-spacing: .12em;
    padding:        2px 7px;
    border-radius:  4px;
    background:     var(--chr-accent-bg);
    color:          var(--chr-accent-text);
    border:         1px solid var(--chr-accent-border);
    flex-shrink:    0;
    transition:     all .18s ease;
}
.chr-sub-eye-btn.is-off .chr-sub-eye-pill {
    background:  var(--chr-bg-surface);
    color:       var(--chr-text-faint);
    border-color: var(--chr-border);
}
.chr-sub-eye-btn.is-off { opacity: .58; }

/* Language grid */
.chr-lang-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   3px;
    margin-bottom:         .6rem;
}
.chr-lang-btn {
    padding:        .38rem 0;
    border-radius:  6px;
    background:     transparent;
    border:         1px solid var(--chr-border);
    color:          var(--chr-text-dim);
    cursor:         pointer;
    font-family:    var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:      .52rem;
    font-weight:    700;
    letter-spacing: .04em;
    transition:     all .15s ease;
    text-align:     center;
}
.chr-lang-btn:hover:not(:disabled) {
    border-color: var(--chr-border-strong);
    color:        var(--chr-text-secondary);
    background:   var(--chr-bg-surface);
}
.chr-lang-btn.active {
    background:   var(--chr-accent-bg-strong);
    border-color: var(--chr-accent-border);
    color:        var(--chr-text);
}
.chr-lang-btn:disabled { opacity: .14; cursor: not-allowed; }

/* Size buttons */
.chr-size-row { display: flex; gap: .3rem; }

.chr-size-btn {
    flex:          1;
    padding:       .42rem 0;
    text-align:    center;
    border-radius: 6px;
    background:    var(--chr-bg-surface);
    border:        1px solid var(--chr-border);
    color:         var(--chr-text-muted);
    cursor:        pointer;
    transition:    all .16s ease;
    font-weight:   700;
}
.chr-size-btn[data-size="small"]  { font-size: .52rem; }
.chr-size-btn[data-size="medium"] { font-size: .72rem; }
.chr-size-btn[data-size="large"]  { font-size: .95rem; }
.chr-size-btn.active              { background: var(--chr-accent-bg-strong); border-color: var(--chr-accent-border); color: var(--chr-text); }
.chr-size-btn:hover:not(.active)  { background: var(--chr-bg-hover); color: var(--chr-text-secondary); }

/* Custom size slider */
.chr-sub-size-slider-row {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    padding:     .3rem 0 .52rem;
}
.chr-sub-size-preview {
    font-family:    var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:      .52rem;
    font-weight:    600;
    color:          var(--chr-accent-text);
    min-width:      2.6rem;
    text-align:     right;
    flex-shrink:    0;
    letter-spacing: .04em;
}

/* Font selector grid — 2 columns, each button displays its font name in that font */
.chr-font-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   4px;
    margin-top:            .1rem;
}
.chr-font-btn {
    display:       flex;
    flex-direction: column;
    align-items:   flex-start;
    gap:           1px;
    padding:       .5rem .6rem;
    border-radius: 7px;
    background:    var(--chr-bg-surface);
    border:        1px solid var(--chr-border);
    color:         var(--chr-text-muted);
    cursor:        pointer;
    transition:    all .16s ease;
    text-align:    left;
    overflow:      hidden;
}
.chr-font-btn:hover:not(.active) {
    background:   var(--chr-bg-hover);
    border-color: var(--chr-border-strong);
    color:        var(--chr-text-secondary);
}
.chr-font-btn.active {
    background:   var(--chr-accent-bg-strong);
    border-color: var(--chr-accent-border);
    color:        var(--chr-text);
}

/* The preview text renders in the target font */
.chr-font-preview {
    font-size:   .76rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    max-width:   100%;
}
.chr-font-preview--montserrat { font-family: var(--font-montserrat,'Montserrat',sans-serif); font-weight:700; }
.chr-font-preview--cormorant  { font-family: var(--font-cormorant,'Cormorant Garamond',serif); font-style:italic; }
.chr-font-preview--playfair   { font-family: var(--font-playfair,'Playfair Display',serif); font-weight:600; }
.chr-font-preview--georgia    { font-family: Georgia,'Times New Roman',serif; }
.chr-font-preview--inter      { font-family: 'Inter',system-ui,-apple-system,sans-serif; font-weight:400; letter-spacing:-.01em; }
.chr-font-preview--trebuchet  { font-family: 'Trebuchet MS',Verdana,sans-serif; }
.chr-font-preview--courier    { font-family: 'Courier New',Courier,monospace; letter-spacing:-.03em; }
.chr-font-preview--cinzel     { font-family: var(--font-cinzel,'Cinzel','Times New Roman',serif); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }

.chr-font-label {
    font-family:    var(--font-montserrat,'Montserrat',sans-serif);
    font-size:      .44rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--chr-text-dim);
    transition:     color 0.16s ease;
}
.chr-font-btn.active   .chr-font-label { color: var(--chr-accent-text); }
.chr-font-btn:hover:not(.active) .chr-font-label { color: var(--chr-text-muted); }


/* ================================================================
   COLOR SWATCHES
   ================================================================ */

.chr-color-grid {
    display:     flex;
    gap:         8px;
    flex-wrap:   wrap;
    margin-top:  .1rem;
}
.chr-color-swatch {
    width:         26px;
    height:        26px;
    border-radius: 50%;
    background:    var(--sw-color);
    border:        2px solid transparent;
    cursor:        pointer;
    transition:    transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    flex-shrink:   0;
    outline:       none;
}
.chr-color-swatch:hover { transform: scale(1.18); }
.chr-color-swatch.is-active {
    border-color: var(--chr-text);
    transform:    scale(1.12);
    box-shadow:   0 0 0 3px rgba(128,128,128,.18);
}
.chr-color-name {
    font-family:    var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:      .5rem;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--chr-accent-label);
    margin:         .45rem 0 0;
    transition:     color 0.28s ease;
}


/* ================================================================
   AUDIO / VISUAL ROWS
   ================================================================ */

.chr-toggle-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .54rem 0;
    cursor:          pointer;
    border-bottom:   1px solid var(--chr-border);
}
.chr-toggle-row:last-child { border-bottom: none; }

.chr-toggle-left {
    display:     flex;
    align-items: center;
    gap:         .45rem;
    color:       var(--chr-text-secondary);
    font-family: var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:   .68rem;
    font-weight: 400;
    transition:  color 0.28s ease;
}

.chr-row {
    display:     flex;
    align-items: center;
    gap:         .45rem;
    padding:     .44rem 0;
    border-bottom: 1px solid var(--chr-border);
}
.chr-row--slider        { padding: .6rem 0 .5rem; }
.chr-row--labeled-slider { padding: 0; }

.chr-ico {
    font-size:   .8rem;
    color:       var(--chr-text-muted);
    flex-shrink: 0;
    transition:  color 0.28s ease;
}

.chr-slider {
    flex:          1;
    height:        3px;
    cursor:        pointer;
    accent-color:  rgba(var(--rieti-primary-rgb, 139, 69, 19), 0.88);
    border-radius: 2px;
}

.chr-row-stacked { padding: .52rem 0; border-bottom: 1px solid var(--chr-border); }
.chr-row-stacked--tight { padding: .44rem 0; }
.chr-row-stacked--last  { border-bottom: none; }

.chr-field-label {
    display:        block;
    font-family:    var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:      .58rem;
    color:          var(--chr-text-muted);
    margin-bottom:  .38rem;
    transition:     color 0.28s ease;
}

.chr-tick {
    font-family:  var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:    .5rem;
    color:        var(--chr-text-dim);
    white-space:  nowrap;
    transition:   color 0.28s ease;
}

/* Narrator sublabel */
.chr-audio-sublabel {
    display:        flex;
    align-items:    center;
    gap:            .35rem;
    font-family:    var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:      .54rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--chr-text-muted);
    margin:         .62rem 0 .3rem;
    transition:     color 0.28s ease;
}

.chr-narrator-controls { display: flex; gap: .38rem; margin: .3rem 0 .5rem; }

.chr-nar-btn {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .35rem;
    padding:         .5rem .4rem;
    border-radius:   7px;
    background:      var(--chr-bg-surface);
    border:          1px solid var(--chr-border);
    color:           var(--chr-text-secondary);
    cursor:          pointer;
    font-family:     var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:       .62rem;
    font-weight:     600;
    letter-spacing:  .06em;
    transition:      all .16s ease;
}
.chr-nar-btn i { font-size: .9rem; flex-shrink: 0; }
.chr-nar-btn:hover {
    background:   var(--chr-accent-bg);
    border-color: var(--chr-accent-border);
    color:        var(--chr-text);
}
.chr-nar-btn.is-paused {
    background:   var(--chr-accent-bg-strong);
    border-color: var(--chr-accent-border);
    color:        var(--chr-text);
}
.chr-nar-btn--stop:hover {
    background:   rgba(200,40,40,.12);
    border-color: rgba(200,40,40,.32);
    color:        rgba(255,100,80,.9);
}


/* ================================================================
   NAVIGATION / ACTIONS
   ================================================================ */

.chr-ui-lang-row { margin-bottom: .65rem; }

/* Override settings-action-btn to respect theme */
.chr-action {
    border-radius: 8px !important;
    transition:    background .16s ease !important;
}
.chr-action-icon--muted .settings-action-icon { opacity: .58; }

/* Light-theme overrides for nav/action items */
.chr-drawer--light .settings-action-btn {
    color:        var(--chr-text-secondary) !important;
    border-color: var(--chr-border) !important;
    background:   transparent !important;
}
.chr-drawer--light .settings-action-btn:hover {
    background: var(--chr-bg-hover) !important;
}
.chr-drawer--light .settings-action-label {
    color:       var(--chr-text) !important;
    font-weight: 500 !important;
}
.chr-drawer--light .settings-action-hint  { color: var(--chr-text-dim) !important; }
.chr-drawer--light .settings-action-icon  { color: var(--chr-text-muted) !important; }
.chr-drawer--light .settings-action-arrow { color: var(--chr-text-dim) !important; }
.chr-drawer--light .settings-lang-btn {
    border-color: var(--chr-border) !important;
    color:        var(--chr-text-muted) !important;
    background:   var(--chr-bg-surface) !important;
}
.chr-drawer--light .settings-lang-btn.active {
    background:   var(--chr-accent-bg) !important;
    border-color: var(--chr-accent-border) !important;
    color:        var(--chr-accent-text) !important;
    font-weight:  700 !important;
}
.chr-drawer--light .settings-toggle-slider {
    background:   var(--chr-bg-surface-2) !important;
    border-color: var(--chr-border-strong) !important;
}
/* Force slider accent to dark in light mode */
.chr-drawer--light .chr-slider {
    accent-color: rgb(var(--rieti-primary-rgb, 110, 45, 5)) !important;
}
/* Ensure the drawer background itself renders */
.chr-drawer--light,
.chr-drawer--light .chr-body,
.chr-drawer--light .chr-header {
    background: var(--chr-bg) !important;
    color:      var(--chr-text) !important;
}


/* ================================================================
   GUEST PROMPT — secțiune progres (utilizatori neautentificați)
   ================================================================ */

.chr-guest-prompt {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .55rem;
    padding:        .7rem .3rem .6rem;
    text-align:     center;
}
.chr-guest-prompt > i {
    font-size:  1.25rem;
    color:      var(--chr-accent-label);
    opacity:    .65;
}
.chr-guest-prompt > p {
    font-family: var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:   .6rem;
    color:       var(--chr-text-muted);
    line-height: 1.55;
    margin:      0;
    max-width:   210px;
    transition:  color 0.28s ease;
}
.chr-guest-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             .3rem;
    padding:         .46rem 1.1rem;
    border-radius:   7px;
    background:      var(--chr-accent-bg-strong);
    border:          1px solid var(--chr-accent-border);
    color:           var(--chr-text);
    font-family:     var(--font-montserrat, 'Montserrat', sans-serif);
    font-size:       .56rem;
    font-weight:     700;
    letter-spacing:  .08em;
    text-decoration: none;
    margin-top:      .1rem;
    transition:      background .16s, border-color .16s;
}
.chr-guest-cta:hover {
    background:   rgba(var(--rieti-primary-rgb, 139,69,19), .5);
    border-color: rgba(var(--rieti-primary-rgb, 139,69,19), .75);
}

/* Light theme override */
.chr-drawer--light .chr-guest-prompt > p { color: var(--chr-text-dim) !important; }
.chr-drawer--light .chr-guest-cta { color: var(--chr-text) !important; }


/* ================================================================
   SUBTITLE BAR (inline override - was in subtitle-lang-picker.js)
   ================================================================ */

/* .rsm-inner inherits these via CSS custom properties set by JS */
.rsm-inner {
    font-size:   var(--rsm-subtitle-size, 1.05rem);
    font-family: var(--rsm-subtitle-font, var(--font-montserrat,'Montserrat',sans-serif));
    transition:  font-size 0.22s ease, font-family 0.18s ease;
}

/* Bara → coloană */
#rieti-subtitle-bar {
    flex-direction: column !important;
    align-items:    center !important;
    gap:            6px !important;
}

/* Ascundere subtitrări */
body.rsm-subtitles-off #rieti-subtitle-bar .rsm-inner {
    opacity:        0;
    transform:      translateY(6px);
    pointer-events: none;
}
body.rsm-subtitles-off #rsm-lang-picker { opacity: 0.52; }

#rieti-subtitle-bar.rsm-no-transition,
#rieti-subtitle-bar.rsm-no-transition .rsm-inner { transition: none !important; }


/* ================================================================
   SUPPRESS FLOATERS (replaced by drawer)
   ================================================================ */

.dj-quick-controls,
.rsm-lang-picker,
#rsm-lang-picker,
#resume-toggle,
#resume-backdrop,
#dj-transition-control { display: none !important; }


/* ================================================================
   CINEMA / IMMERSIVE
   ================================================================ */

body.dj-immersive-active #settings-drawer { pointer-events: none; opacity: 0; }


/* ================================================================
   MOBILE — full-screen drawer
   ================================================================ */

@media (max-width: 480px) {
    .chr-drawer {
        width:       100vw !important;
        max-width:   100vw !important;
        height:      100dvh !important;         /* dynamic viewport height — accounts for browser chrome */
        height:      100vh !important;          /* fallback for browsers without dvh */
        border-left: none !important;
        border-top:  1px solid var(--chr-accent-border) !important;
    }
    .chr-body { padding-bottom: 3.5rem; }       /* extra bottom padding for gesture bars */
    .chr-play-card    { min-height: 72px; padding: .88rem .4rem .72rem; }
    .chr-lang-btn     { font-size: .5rem; padding: .35rem 0; }
    .chr-font-grid    { grid-template-columns: 1fr 1fr; }
    .chr-color-swatch { width: 30px; height: 30px; }
}