/* =======================================================================
   WP COLORING V2 - MOBILE RESPONSIVE STYLES
   ======================================================================= */

@media (max-width: 900px) {
  .wp-coloring-shell-v2 {
    padding: 0;
    border-radius: 0;
    background: #fff;
    height: 100vh;
    max-width: 100%;
    display: flex;
    flex-direction: column;
  }

  .wp-coloring-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column-reverse; /* Sidebar at bottom */
    margin: 0;
    gap: 0;
    overflow: hidden;
  }

  /* Sidebar becomes bottom bar */
  .wp-coloring-sidebar-v2 {
    height: auto !important;
    max-height: 40vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
  }

  .sidebar-scrollable {
    max-height: 25vh;
    overflow-y: auto;
  }

  .sidebar-fixed-bottom {
    border-top: 2px solid #e0e0e0;
  }

  /* Compact sections */
  .sidebar-section {
    padding: 8px 12px;
  }

  .section-title {
    font-size: 13px;
    margin-bottom: 6px;
  }

  /* Horizontal color grid */
  .color-palette-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 6px;
    padding: 4px 0;
    scrollbar-width: none;
  }

  .color-palette-grid::-webkit-scrollbar {
    display: none;
  }

  .color-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    flex-shrink: 0;
  }

  /* Compact tools */
  .tools-grid {
    gap: 6px;
  }

  .tool-btn {
    padding: 6px !important;
  }

  .tool-label {
    font-size: 10px;
  }

  /* Compact actions */
  .actions-grid {
    gap: 6px;
  }

  .action-label {
    font-size: 10px;
  }

  /* Canvas area */
  .wp-coloring-main-v2 {
    flex: 1;
    border-radius: 0;
    box-shadow: none;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .wp-coloring-canvas-outer {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  /* Hide brush size slider on mobile */
  .brush-size-section {
    display: none;
  }
}

/* Tablet adjustments */
@media (min-width: 600px) and (max-width: 900px) {
  .mobile-palette .palette-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
  }

  .mobile-actions .action-btn {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px;
  }

  .mobile-actions .action-btn svg {
    width: 28px;
    height: 28px;
  }
}

/* Landscape mobile */
@media (max-width: 900px) and (orientation: landscape) {
  .wp-coloring-shell-v2 {
    height: auto;
    min-height: 100vh;
  }

  .wp-coloring-main-v2 {
    flex: 0 1 auto;
  }

  .wp-coloring-canvas-outer {
    max-height: calc(100vh - 200px);
  }
}