/* Desktop ideas rail: dissolve cards at the viewport edges without introducing
   a visible glass wall or changing the established grid position. */
@media (min-width: 761px) {
  .ideas-carousel-shell {
    /* Only extends the visual tail into the page gutter. The rail still starts
       in exactly the same place next to the fixed "Набор идей" column. */
    margin-right: calc(-1 * clamp(24px, 2.5vw, 64px)) !important;
    overflow: visible !important;
  }

  /* The former backdrop-filter overlays were visible as hard vertical walls. */
  .ideas-carousel-shell::before,
  .ideas-carousel-shell::after {
    content: none !important;
    display: none !important;
  }

  .ideas-carousel {
    --ideas-edge-fade: 112px;
    /* Keep room for card shadows inside the scrolling port while preserving
       the row's external height and its existing baseline. */
    margin-top: -22px !important;
    margin-bottom: -28px !important;
    padding-top: 22px !important;
    padding-bottom: 28px !important;
    padding-right: 0 !important;
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 0,
      #000 calc(100% - var(--ideas-edge-fade)),
      rgba(0, 0, 0, .82) calc(100% - 76px),
      rgba(0, 0, 0, .34) calc(100% - 32px),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      90deg,
      #000 0,
      #000 calc(100% - var(--ideas-edge-fade)),
      rgba(0, 0, 0, .82) calc(100% - 76px),
      rgba(0, 0, 0, .34) calc(100% - 32px),
      transparent 100%
    ) !important;
  }

  /* The first card is always fully visible at rest. The left dissolve appears
     only after the visitor actually scrolls content behind the ideas label. */
  .ideas-carousel.is-scrolled {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      rgba(0, 0, 0, .34) 30px,
      rgba(0, 0, 0, .82) 72px,
      #000 var(--ideas-edge-fade),
      #000 calc(100% - var(--ideas-edge-fade)),
      rgba(0, 0, 0, .82) calc(100% - 76px),
      rgba(0, 0, 0, .34) calc(100% - 32px),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      rgba(0, 0, 0, .34) 30px,
      rgba(0, 0, 0, .82) 72px,
      #000 var(--ideas-edge-fade),
      #000 calc(100% - var(--ideas-edge-fade)),
      rgba(0, 0, 0, .82) calc(100% - 76px),
      rgba(0, 0, 0, .34) calc(100% - 32px),
      transparent 100%
    ) !important;
  }

  .ideas-carousel.is-at-end {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      rgba(0, 0, 0, .34) 30px,
      rgba(0, 0, 0, .82) 72px,
      #000 var(--ideas-edge-fade),
      #000 100%
    ) !important;
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      rgba(0, 0, 0, .34) 30px,
      rgba(0, 0, 0, .82) 72px,
      #000 var(--ideas-edge-fade),
      #000 100%
    ) !important;
  }

  .ideas-carousel:not(.is-overflowing) {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* Desktop sidebar: the external grid stays fixed; only the interior of the
   recent-projects panel is rebalanced to use its reserved space. */
@media (min-width: 1061px) {
  .product-side-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 126px 40px 1px auto minmax(84px, 1fr) !important;
    align-content: stretch !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .product-side-panel .side-title:first-child { grid-row: 1; }
  .product-side-panel .recent-projects-viewport { grid-row: 2; }
  .product-side-panel .project-nav-control { grid-row: 3; }
  .product-side-panel .side-divider { grid-row: 4; }
  .product-side-panel .side-mode-title { grid-row: 5; }
  .product-side-panel .product-nav { grid-row: 6; }

  .recent-projects-viewport {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 126px;
    overflow: hidden;
    border-radius: 16px;
  }

  .product-side-panel .recent-projects {
    display: grid !important;
    align-content: start;
    gap: 4px;
    height: 100%;
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    padding: 5px 6px 5px 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), .44) transparent;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9px, #000 calc(100% - 16px), rgba(0,0,0,.62) calc(100% - 7px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 9px, #000 calc(100% - 16px), rgba(0,0,0,.62) calc(100% - 7px), transparent 100%);
  }

  .recent-projects::-webkit-scrollbar { width: 4px; }
  .recent-projects::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(var(--accent-rgb), .4);
  }

  .recent-project,
  .recent-project-main {
    min-height: 36px !important;
    height: 36px;
  }

  .recent-project-main {
    border-radius: 14px;
    padding: 0 9px;
    transition: color 180ms ease, background-color 220ms cubic-bezier(.23,1,.32,1), box-shadow 220ms cubic-bezier(.23,1,.32,1);
  }

  .recent-project-main:hover,
  .recent-project-main:focus-visible {
    color: #fff;
    background: var(--accent);
    box-shadow: 0 10px 22px rgba(var(--accent-rgb), .22);
    outline: none;
  }

  .recent-project-main:hover .recent-copy strong,
  .recent-project-main:focus-visible .recent-copy strong,
  .recent-project-main:hover .recent-copy small,
  .recent-project-main:focus-visible .recent-copy small,
  .recent-project-main:hover .material-symbols-outlined,
  .recent-project-main:focus-visible .material-symbols-outlined {
    color: #fff;
  }

  .recent-project-main:hover .recent-thumb,
  .recent-project-main:focus-visible .recent-thumb {
    color: #fff;
    background: rgba(255,255,255,.18);
  }

  .recent-empty {
    min-height: 100%;
    box-sizing: border-box;
  }

  .recent-empty-guest {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 8px 14px;
    text-align: center;
    color: var(--muted);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .recent-empty-guest strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
  }

  .recent-empty-guest small { font-size: 10px; }

  .recent-empty-art {
    position: relative;
    display: grid;
    width: 58px;
    height: 52px;
    place-items: center;
    color: var(--accent);
  }

  .recent-empty-box { font-size: 52px; opacity: .2; }
  .recent-empty-cat {
    position: absolute;
    top: 1px;
    font-size: 30px;
    color: var(--accent);
  }

  body.guest .product-side-panel {
    grid-template-rows: auto 126px 0 1px auto minmax(84px, 1fr) !important;
  }

  body.guest .product-side-panel .project-nav-control { display: none !important; }
  body.guest .recent-projects { overflow: hidden !important; }

  .product-side-panel .product-nav {
    display: grid;
    grid-template-columns: 1fr;
    align-content: space-evenly;
    min-height: 0;
    gap: 8px;
  }

  /* The same data stays present in compact mode: three vertically scrollable
     thumbnails, then Projects, Image and Video in evenly shared slots. */
  body.sidebar-collapsed .product-side-panel {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(156px, 1fr) 50px minmax(116px, 1fr) !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  body.sidebar-collapsed .product-side-panel .recent-projects-viewport {
    display: block !important;
    grid-row: 1;
    width: 52px;
    height: 156px;
    align-self: center;
    justify-self: center;
  }

  html body.sidebar-collapsed .product-side-panel .recent-projects {
    display: grid !important;
    gap: 6px;
    padding: 6px 0;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    scrollbar-width: none;
  }
  html body.sidebar-collapsed .product-side-panel .recent-projects::-webkit-scrollbar { display: none; }
  html body.sidebar-collapsed .product-side-panel .recent-project,
  html body.sidebar-collapsed .product-side-panel .recent-project-main {
    display: grid !important;
    width: 50px;
    min-width: 50px;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0;
    place-items: center;
    border-radius: 14px;
  }
  html body.sidebar-collapsed .product-side-panel .recent-copy,
  html body.sidebar-collapsed .product-side-panel .project-status { display: none; }
  html body.sidebar-collapsed .product-side-panel .recent-thumb {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }
  html body.sidebar-collapsed .product-side-panel .recent-project-main:hover,
  html body.sidebar-collapsed .product-side-panel .recent-project-main:focus-visible {
    background: var(--accent);
    box-shadow: 0 8px 18px rgba(var(--accent-rgb), .24);
  }
  html body.sidebar-collapsed .product-side-panel .recent-project-main:hover .recent-thumb,
  html body.sidebar-collapsed .product-side-panel .recent-project-main:focus-visible .recent-thumb {
    outline: 2px solid rgba(255,255,255,.92);
    outline-offset: 2px;
  }

  body.sidebar-collapsed .product-side-panel .project-nav-control {
    display: flex !important;
    grid-row: 2;
    align-self: center;
  }
  body.sidebar-collapsed .product-side-panel .product-nav {
    grid-row: 3;
    width: 50px !important;
    height: 100%;
    margin: 0 auto;
    align-content: space-evenly;
  }

  body.sidebar-collapsed.guest .product-side-panel { grid-template-rows: minmax(156px, 1fr) 0 minmax(116px, 1fr) !important; }
  html body.sidebar-collapsed.guest .product-side-panel .recent-projects {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.sidebar-collapsed.guest .product-side-panel .recent-empty-guest {
    display: grid !important;
    grid-row: 1 / -1;
    align-self: stretch;
    width: 52px;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0;
    gap: 0;
  }
  body.sidebar-collapsed.guest .product-side-panel .recent-empty-guest strong,
  body.sidebar-collapsed.guest .product-side-panel .recent-empty-guest small { display: none; }
  body.sidebar-collapsed.guest .product-side-panel .recent-empty-art { transform: scale(.82); }
  body.sidebar-collapsed.guest .product-side-panel .project-nav-control { display: none !important; }
  body.sidebar-collapsed.guest .product-side-panel .product-nav { grid-row: 3; }
}