/* ============================================
   ВИТРИНА — тёмно-синий / тёмно-фиолетовый / тёмно-серый
   ============================================ */

:root {
  --sc-bg-1: #0f1a2b;
  --sc-bg-2: #1a1230;
  --sc-bg-3: #232428;
  --sc-border: rgba(255,255,255,.08);
  --sc-text: #e9edf5;
  --sc-muted: #9aa4b8;

  --sc-cyan: #38d0f0;
  --sc-pink: #f4b8d0;
  --sc-green: #7ee2a8;

  --sc-radius: 14px;
  --sc-radius-sm: 10px;
  --sc-shadow: 0 20px 60px rgba(0,0,0,.55);
  --sc-trans: all .25s cubic-bezier(.2,.7,.2,1);
}

/* ============================================
   ОКНО
   ============================================ */
#showcase-window {
  position: fixed;
  top: 90px; left: 90px;
  width: 640px; height: 460px;
  min-width: 320px; min-height: 260px;
  max-width: 96vw; max-height: 92vh;
  display: flex; flex-direction: column;
  border-radius: var(--sc-radius);
  background: linear-gradient(160deg, var(--sc-bg-1) 0%, var(--sc-bg-2) 55%, var(--sc-bg-3) 100%);
  border: 1px solid var(--sc-border);
  box-shadow: var(--sc-shadow);
  color: var(--sc-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  z-index: 9998;
  overflow: hidden;
  transition: opacity .2s, transform .2s;
  resize: none;
}
#showcase-window.is-hidden { display: none; }
#showcase-window.is-dragging { transition: none; }

/* ============================================
   ХЕДЕР
   ============================================ */
#showcase-window .showcase-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(56,208,240,.12), rgba(244,184,208,.08));
  border-bottom: 1px solid var(--sc-border);
  cursor: grab; user-select: none;
  flex: 0 0 auto;
}
#showcase-window .showcase-header:active { cursor: grabbing; }

/* ============================================
   ПУНКТИРНАЯ РУЧКА
   ============================================ */
#showcase-window .sc-grip {
  flex: 0 0 auto;
  width: 34px; height: 28px;
  margin-right: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
  cursor: grab;
  transition: all .2s ease;
}
#showcase-window .sc-grip:hover {
  border-color: rgba(56, 208, 240, .65);
  background: rgba(56, 208, 240, .1);
  box-shadow: 0 0 0 3px rgba(56, 208, 240, .08), inset 0 0 12px rgba(56, 208, 240, .15);
}
#showcase-window .sc-grip:active { cursor: grabbing; }
#showcase-window .sc-grip__dots {
  display: block;
  width: 14px; height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, .35);
  box-shadow: 0 5px 0 rgba(255, 255, 255, .35), 0 -5px 0 rgba(255, 255, 255, .35);
}
#showcase-window .sc-grip:hover .sc-grip__dots {
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 5px 0 rgba(255, 255, 255, .85), 0 -5px 0 rgba(255, 255, 255, .85);
}

/* ============================================
   ВКЛАДКИ
   ============================================ */
#showcase-window .showcase-tabs {
  display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: thin; padding-bottom: 2px;
  flex: 1 1 auto; min-width: 0;
}
#showcase-window .showcase-tabs::-webkit-scrollbar { height: 4px; }
#showcase-window .showcase-tabs::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15); border-radius: 4px;
}

#showcase-window .sc-tab {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--sc-muted);
  background: rgba(255,255,255,.04);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--sc-trans);
  white-space: nowrap;
  font-family: inherit;
}
#showcase-window .sc-tab:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
}
#showcase-window .sc-tab.is-active {
  color: #04121a;
  background: linear-gradient(135deg, var(--sc-cyan), #bff2ff);
  border-color: rgba(56,208,240,.4);
  box-shadow: 0 4px 14px rgba(56,208,240,.35);
}

/* ============================================
   КНОПКИ УПРАВЛЕНИЯ
   ============================================ */
#showcase-window .showcase-controls {
  display: flex; gap: 6px; margin-left: 10px; flex: 0 0 auto;
}
#showcase-window .showcase-controls button {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,.06); color: var(--sc-text);
  border: 1px solid var(--sc-border); cursor: pointer;
  transition: var(--sc-trans); font-size: 14px; line-height: 1;
  font-family: inherit;
}
#showcase-window .showcase-controls button:hover {
  background: rgba(255,255,255,.15);
}
#showcase-window .sc-close:hover {
  background: #f06a6a; color: #fff;
}

/* ============================================
   ТЕЛО И СПИСОК
   ============================================ */
#showcase-window .showcase-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px;
  scrollbar-width: thin;
}
#showcase-window .showcase-body::-webkit-scrollbar { width: 8px; }
#showcase-window .showcase-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12); border-radius: 8px;
}
#showcase-window .showcase-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.22);
}

#showcase-window .showcase-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================
   КАРТОЧКА — увеличена высота, обрезка сохранена
   ============================================ */
#showcase-window .sc-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: 100px;
  max-height: 220px;               /* увеличено с 120 до 220 — хватает на всё */
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-sm);
  overflow: hidden;
  transition: var(--sc-trans);
  position: relative;
}
#showcase-window .sc-card:hover {
  border-color: rgba(56,208,240,.35);
  box-shadow: 0 8px 24px rgba(56,208,240,.15);
  z-index: 10;
}

/* Скрываем все картинки, кроме превью */
#showcase-window .sc-card img:not(.sc-preview-img) {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
}
#showcase-window .sc-card p img {
  display: none !important;
}

/* ============================================
   МИНИ-ПРЕВЬЮ
   ============================================ */
#showcase-window .sc-card__thumb {
  flex: 0 0 92px !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: auto !important;
  min-height: 100px !important;
  max-height: 220px !important;
  overflow: hidden !important;
  background: #0a0f1a;
  border-radius: var(--sc-radius-sm) 0 0 var(--sc-radius-sm);
  cursor: zoom-in;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0 !important;
  margin: 0 !important;
  align-self: stretch;
}

#showcase-window .sc-card__thumb img,
#showcase-window .sc-card__thumb img.sc-preview-img,
#showcase-window img.sc-preview-img {
  display: block !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 100% !important;
  min-height: 100px !important;
  max-height: 220px !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;
  transition: transform .3s ease;
}
#showcase-window .sc-card__thumb:hover img.sc-preview-img {
  transform: scale(1.06);
}

#showcase-window .sc-card.no-thumb .sc-card__thumb { display: none !important; }

/* ============================================
   КОНТЕНТ
   ============================================ */
#showcase-window .sc-card__content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

#showcase-window .sc-card__title {
  margin: 0;
  font-size: 14px; font-weight: 700; line-height: 1.3;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

#showcase-window .sc-card__meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
#showcase-window .sc-card__date {
  font-size: 11px; color: var(--sc-muted);
}

#showcase-window .sc-badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10px; font-weight: 700;
  border-radius: 999px; line-height: 1.6;
}
#showcase-window .sc-badge--hot {
  background: rgba(244,184,208,.25);
  color: #ffd6e7;
  border: 1px solid rgba(244,184,208,.4);
}

#showcase-window .sc-card__desc {
  margin: 0;
  font-size: 12px; color: var(--sc-muted); line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
#showcase-window .sc-card__desc p { margin: 0; }

/* ============================================
   ДЕЙСТВИЯ
   ============================================ */
#showcase-window .sc-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
  overflow: visible;
  padding-top: 4px;
}

#showcase-window .sc-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  white-space: nowrap;
  flex: 0 0 auto;
  font-family: inherit;
}

#showcase-window .sc-btn--primary {
  background: linear-gradient(135deg, #38d0f0 0%, #8be8ff 100%) !important;
  color: #04121a !important;
  box-shadow: 0 4px 14px rgba(56,208,240,.35);
  border: 1px solid rgba(56,208,240,.6) !important;
}
#showcase-window .sc-btn--primary:hover {
  box-shadow: 0 8px 22px rgba(56,208,240,.55);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
#showcase-window .sc-btn--primary:visited {
  color: #04121a !important;
}
#showcase-window .sc-btn--primary[hidden] { display: none !important; }

#showcase-window .sc-card__links {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
#showcase-window .sc-card__links a {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--sc-cyan) !important;
  background: rgba(56,208,240,.1);
  border: 1px solid rgba(56,208,240,.25);
  text-decoration: none !important;
  transition: var(--sc-trans);
  white-space: nowrap;
  flex: 0 0 auto;
}
#showcase-window .sc-card__links a:hover {
  background: rgba(56,208,240,.22);
  color: #fff !important;
}
#showcase-window .sc-card__links a[hidden] { display: none !important; }

/* ============================================
   ГРАДАЦИЯ ПО ДАТЕ
   ============================================ */
#showcase-window .sc-card[data-fresh="new"] .sc-card__date { color: var(--sc-green); }
#showcase-window .sc-card[data-fresh="mid"] .sc-card__date { color: var(--sc-cyan); }
#showcase-window .sc-card[data-fresh="old"] .sc-card__date { color: var(--sc-muted); }

/* ============================================
   ZOOM-ПРЕВЬЮ
   ============================================ */
#sc-zoom {
  position: fixed;
  z-index: 99999;
  max-width: 320px;
  max-height: 240px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(56,208,240,.35);
  box-shadow: 0 20px 50px rgba(0,0,0,.65), 0 0 0 4px rgba(56,208,240,.12);
  pointer-events: none;
  opacity: 0;
  transform: scale(.95);
  transition: opacity .18s ease, transform .18s ease;
  background: #0a0f1a;
}
#sc-zoom.is-visible {
  opacity: 1;
  transform: scale(1);
}
#sc-zoom img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
}
@media (max-width: 640px) {
  #sc-zoom { display: none; }
}

/* ============================================
   РУЧКИ РЕСАЙЗА
   ============================================ */
#showcase-window .sc-resize { position: absolute; z-index: 5; }
#showcase-window .sc-r-n { top: -4px; left: 8px; right: 8px; height: 8px; cursor: ns-resize; }
#showcase-window .sc-r-s { bottom: -4px; left: 8px; right: 8px; height: 8px; cursor: ns-resize; }
#showcase-window .sc-r-e { right: -4px; top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; }
#showcase-window .sc-r-w { left: -4px; top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; }
#showcase-window .sc-r-ne { top: -4px; right: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
#showcase-window .sc-r-nw { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
#showcase-window .sc-r-se { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
#showcase-window .sc-r-sw { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: nesw-resize; }

/* ============================================
   ТРИГГЕР
   ============================================ */
.showcase-trigger {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  padding: 12px 20px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--sc-cyan), var(--sc-pink));
  color: #04121a; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 30px rgba(56,208,240,.35);
  transition: var(--sc-trans);
  font-family: inherit;
}
.showcase-trigger:hover { transform: scale(1.05); }

/* ============================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   ============================================ */
@media (max-width: 640px) {
  #showcase-window {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 75vh !important;
    border-radius: 18px 18px 0 0;
    max-width: 100vw;
    max-height: 80vh;
  }

  #showcase-window .sc-card {
    min-height: 80px;
    max-height: 160px;
  }

  #showcase-window .sc-card__thumb {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    min-height: 80px !important;
    max-height: 160px !important;
  }
  #showcase-window .sc-card__thumb img,
  #showcase-window img.sc-preview-img {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    min-height: 80px !important;
    max-height: 160px !important;
  }

  #showcase-window .sc-card__title { font-size: 13px; }
  #showcase-window .sc-card__desc { display: none; }

  #showcase-window .showcase-header { padding: 8px 10px; }
  #showcase-window .sc-tab { padding: 6px 10px; font-size: 12px; }

  #showcase-window .sc-resize { display: none; }
  #showcase-window .sc-grip { display: none; }
}