@layer components {
  /* Brak presetów: pełna nawigacja sekcji ukryta, zostaje ocena + przycisk zwijania. */
  .sidebar.sidebar--empty-presets .sidebar__sections {
    display: none;
  }

  /* Przy pustym layoutcie warianty bywają „puste” — nie blokuj klików w ocenie. */
  .sidebar.sidebar--empty-presets.variants-disabled {
    pointer-events: auto;
    user-select: auto;
  }

  .sidebar.sidebar--empty-presets.variants-disabled::before {
    display: none;
  }

  .sidebar .sidebar__sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sidebar-gap);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* Kontener jest zawsze “płaski” — ramka i tło żyją w __full, nie tu */
  .sidebar .sidebar-app-rating {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* Odstęp od przycisku Zwiń / Rozwiń w stopce sidebara */
  .sidebar__bottom .sidebar-app-rating {
    margin-bottom: var(--spacing-sm);
  }

  /* Ramka, tło i padding — tylko na widocznej treści, nie na kontenerze */
  .sidebar-app-rating__full {
    padding: var(--spacing-sidebar-btn-pad-y) var(--spacing-sidebar-btn-pad-x);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--vibe-border);
    background: var(--vibe-surface, var(--bs-body-bg));
    box-shadow: var(--shadow-sm);
  }

  /* Puls bez „obramowania” na zewnątrz — tylko delikatna zmiana obramowania (inset nie ucieka poza box) */
  @keyframes rating-pulse-soft {
    0%,
    100% {
      border-color: var(--vibe-border);
    }

    50% {
      border-color: color-mix(in srgb, var(--bs-primary) 42%, var(--vibe-border));
    }
  }

  @keyframes rating-pulse-mini-soft {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: 0.88;
      transform: scale(1.06);
    }
  }

  html[data-sidebar-expanded="1"] .sidebar-app-rating--awaiting .sidebar-app-rating__full {
    animation: rating-pulse-soft 2.6s ease-in-out infinite;
  }

  html:not([data-sidebar-expanded="1"]) .sidebar-app-rating--awaiting .sidebar-app-rating__mini-trigger .bi {
    display: inline-block;
    transform-origin: center;

    /* delay = czas mini-trigger-in (120ms delay + 120ms trwanie) — pulse zaczyna się gdy button jest w pełni widoczny */
    animation: rating-pulse-mini-soft 2.6s ease-in-out calc(var(--motion-duration-120) * 2) infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    html[data-sidebar-expanded="1"] .sidebar-app-rating--awaiting,
    html:not([data-sidebar-expanded="1"]) .sidebar-app-rating--awaiting .sidebar-app-rating__mini-trigger .bi {
      animation: none !important;
    }
  }

  .sidebar-app-rating--loading,
  .sidebar-app-rating--completed {
    display: none !important;
  }

  /* Rozwinięty: mini-trigger niewidoczny */
  html[data-sidebar-expanded="1"] .sidebar-app-rating__mini-trigger {
    display: none !important;
  }

  /* Zwinięty: mini-trigger pojawia się dopiero po zaniku __full (delay = 120ms = czas fade-out __full) */
  html:not([data-sidebar-expanded="1"]) .sidebar-app-rating__mini-trigger {
    display: flex;
    animation: mini-trigger-in var(--motion-duration-120) ease var(--motion-duration-120) both;
  }

  @keyframes mini-trigger-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Domyślnie ukryty */
  .sidebar-app-rating__full {
    display: none;
    opacity: 0;
  }

  /* Rozwinięty: fade-in z opóźnieniem — sidebar zdąży osiągnąć pełną szerokość */
  html[data-sidebar-expanded="1"] .sidebar-app-rating__full {
    display: block;
    opacity: 1;

    /* TYMCZASOWO wyłączone — zsynchronizowane z sidebar.css (blok motion off) */
    transition: none;
  }

  /* Punkt startowy animacji wejścia — opacity 0 przed transition */
  @starting-style {
    html[data-sidebar-expanded="1"] .sidebar-app-rating__full {
      opacity: 0;
    }
  }

  /* Zwijanie: szybkie zanikanie zanim sidebar zwęzi tekst — bez zależności od .sidebar--animate */
  html:not([data-sidebar-expanded="1"]) .sidebar-app-rating__full {
    /* TYMCZASOWO wyłączone — zsynchronizowane z sidebar.css (blok motion off) */
    transition: none;
  }


  .sidebar-app-rating__full,
  .sidebar-app-rating__inner {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .sidebar-app-rating__mini-trigger {
    cursor: pointer;
    color: var(--bs-body-color);
  }

  .sidebar-app-rating__mini-trigger:hover {
    color: var(--bs-primary);
  }

  .sidebar-app-rating__mini-trigger .bi {
    font-size: var(--type-body-lg);
  }

  .sidebar-app-rating__question {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--type-micro);
    font-weight: var(--type-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--sidebar-text, var(--vibe-on-surface, var(--neutral-800)));
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  .sidebar-app-rating .form-control {
    max-width: 100%;
    box-sizing: border-box;
  }

  .sidebar-app-rating__module-name {
    color: var(--bs-primary);
    font-weight: var(--type-weight-bold);
  }

  .sidebar-app-rating__scores {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .sidebar-app-rating__score.sidebar-app-rating__star {
    flex: 0 0 auto;
    min-width: 0;
    padding: var(--spacing-2xs);
    margin: 0;
    line-height: 1;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: transparent;
    cursor: pointer;
    transition:
      color var(--motion-duration-120) ease,
      background-color var(--motion-duration-120) ease,
      transform var(--motion-duration-120) ease;
  }

  .sidebar-app-rating__star-icon {
    font-size: var(--type-body-lg);
    display: block;
    line-height: 1;
    color: var(--bs-secondary-color);
  }

  .sidebar-app-rating__star-icon.bi-star-fill {
    color: var(--bs-primary);
  }

  .sidebar-app-rating__score.sidebar-app-rating__star:hover {
    background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
  }

  .sidebar-app-rating__score.sidebar-app-rating__star:focus-visible {
    outline: var(--border-width) solid var(--bs-primary);
    outline-offset: var(--spacing-2xs);
  }

  .sidebar-app-rating__score.sidebar-app-rating__star[aria-pressed='true'] {
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
  }

  .sidebar-app-rating__details {
    margin-top: var(--spacing-sm);
  }

  .sidebar-app-rating__details[hidden] {
    display: none !important;
  }

  .sidebar-app-rating__hint {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--type-micro);
  }

  .sidebar-app-rating__thanks {
    margin: 0;
    font-size: var(--type-micro);
    font-weight: var(--type-weight-medium);
  }

  html[data-sidebar-expanded="0"] .sidebar-app-rating__question,
  html[data-generator-sidebar-expanded="0"] .sidebar-app-rating__question {
    font-size: var(--font-size-xs);
  }
}