/* Responsive Styles */
@media (max-width: 1024px) {
  .items-sidebar {
    width: 320px;
  }
  .items-sidebar.grid-cols-3 {
    width: 480px;
  }
  #categories-nav {
    width: 64px;
    padding: 12px 6px;
    gap: 8px;
  }
  .category-item {
    width: 48px;
    height: 48px;
  }
  .category-item-label {
    font-size: 8px;
    max-width: 60px;
    max-height: 20px;
  }

  .layer-editor-sidebar {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .is-mobile body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .is-mobile .app-container {
    height: 100vh;
    padding: 0;
    max-width: 100%;
  }
  .is-mobile .game-layout {
    flex-direction: column;
    height: 100vh;
    gap: 0;
  }
  .is-mobile .studio-panel {
    flex-grow: 1;
    height: auto;
    order: 1;
    width: 100%;
  }

  .is-mobile .bg-crop-overlay {
    display: none !important;
  }
  .is-mobile .items-sidebar,
  .is-mobile .items-sidebar.grid-cols-3 {
    width: 100%;
    order: 2;
    border-left: none;
    border-top: var(--border-theme);
    padding: 0;
    height: auto;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .is-mobile .sidebar-split-layout {
    flex-direction: column;
    gap: 0;
    position: relative;
  }
  .is-mobile .sidebar-split-layout::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 77px;
    background: linear-gradient(to top, #ff6599, #ffcadc);
    -webkit-mask-image: linear-gradient(to left, black, transparent);
    mask-image: linear-gradient(to left, black, transparent);
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.3s ease;
  }
  .is-mobile .sidebar-split-layout.scrolled-end::after {
    opacity: 0;
  }
  .is-mobile .category-swipe-hint {
    position: absolute;
    top: 38px;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10;
    pointer-events: none;
    background: #ffffff;
    border: 2px solid #ff6599;
    border-radius: 20px;
    padding: 3px 10px 3px 8px;
    box-shadow: 0 4px 14px rgba(255, 101, 153, 0.4), 0 2px 6px rgba(0,0,0,0.12);
    animation: catSwipeHint 1.8s ease-in-out infinite;
    transition: opacity 0.3s ease;
  }
  .is-mobile .category-swipe-hint .swipe-emoji {
    font-size: 18px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
  }
  .is-mobile .category-swipe-hint .swipe-text {
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 800;
    color: #ff3b75;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-shadow: none;
  }
  @keyframes catSwipeHint {
    0% {
      transform: translateY(-50%) translateX(0) scale(1.15);
      opacity: 0;
    }
    15% {
      transform: translateY(-50%) translateX(0) scale(0.88);
      opacity: 1;
    }
    60% {
      transform: translateY(-50%) translateX(-55px) scale(0.88);
      opacity: 1;
    }
    75% {
      transform: translateY(-50%) translateX(-55px) scale(1.15);
      opacity: 1;
    }
    90%, 100% {
      transform: translateY(-50%) translateX(0) scale(1.15);
      opacity: 0;
    }
  }
  .is-mobile #categories-nav {
    width: 100%;
    height: auto;
    min-height: 77px; /* Фиксируем высоту, чтобы избежать тряски при появлении текста */
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 12px;
    gap: 12px;
    border-left: none;
    border-right: none;
    border-bottom: none;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .is-mobile .category-list {
    flex-direction: row;
    width: max-content;
  }
  .is-mobile .category-item {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
  .is-mobile .category-item-label {
    font-size: 8px;
    max-width: 50px;
    max-height: 20px;
  }
  .is-mobile .items-content-column {
    padding: 4px 12px 12px 12px;
    height: auto;
    overflow: hidden;
  }
  .is-mobile .items-grid-container {
    padding-right: 0;
    overflow-y: hidden;
  }

  .is-mobile .items-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding-top: 4px;
    padding-bottom: 8px;
    width: 100%;
  }
  .is-mobile .items-grid::-webkit-scrollbar {
    height: 6px;
  }
  .is-mobile .item-card {
    width: 80px;
    flex-shrink: 0;
  }
  .is-mobile .layer-editor-sidebar {
    display: none;
  }
  .is-mobile .modal-card.story-card {
    width: 95vw;
    max-height: 92vh;
  }
  
  .is-mobile .floating-publish-container {
    bottom: 5px;
  }
  .is-mobile .floating-publish-container .btn-publish {
    height: 44px;
    padding: 0 32px;
    font-size: 15px;
    border-radius: 22px;
  }

  .is-mobile .floating-controls {
    transform: scale(0.85);
    transform-origin: top left;
  }
  .is-mobile .floating-controls-right {
    transform-origin: top right;
  }
  
  .is-mobile .studio-wrapper {
    height: 100%;
  }
  .is-mobile .character-preview-container {
    height: 100%;
  }

  .is-mobile .unlock-card {
    padding: 20px 16px;
    gap: 12px;
  }
  .is-mobile .unlock-emoji {
    font-size: 40px;
  }
  .is-mobile .unlock-card h2 {
    font-size: 20px;
  }
  .is-mobile .unlock-followers-text {
    font-size: 12px;
  }
  .is-mobile #btn-unlock-close {
    margin-top: 12px !important;
  }
  .is-mobile #unlock-item-card {
    width: 160px !important;
  }
}