/*
 * Color Collector mobile tool shell
 * Desktop uses each app's existing layout. This file is intentionally scoped
 * to the mobile breakpoint so the original working surfaces stay intact.
 */
.cc-mobile-tabs,
.cc-mobile-dock,
.cc-eyedropper-sheet,
.cc-mobile-file-cards { display: none; }

@media (max-width: 767px) {
  :root {
    --cc-mobile-dock-height: 68px;
    --cc-mobile-safe-bottom: max(12px, env(safe-area-inset-bottom));
  }

  body:has(.cc-mobile-tabs) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    overflow-x: hidden !important;
    padding: 76px 12px calc(var(--cc-mobile-dock-height) + var(--cc-mobile-safe-bottom) + 24px) !important;
  }

  /* The Japanese converter alone wraps the app in the advertising flex shell. */
  body:has(#converter-container) .layout {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body:has(#converter-container) .ad-column { display: none !important; }

  body:has(#converter-container) .app-wrapper,
  body:has(#converter-container) #converter-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Legacy WebP uses content-box sizing and a fixed-height desktop workspace. */
  body:has(#mobile-webp-files) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body:has(#mobile-webp-files) .wrap,
  body:has(#mobile-webp-files) .grid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .topbar {
    position: fixed !important;
    inset: 0 0 auto !important;
    height: 58px;
    padding: 0 14px;
    background: color-mix(in srgb, var(--bg-color, #1a1a1d) 88%, transparent);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, .12));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .topbar .logo,
  .topbar .menu {
    min-height: 44px;
  }

  .topbar .menu {
    min-width: 64px;
    border-radius: 12px;
  }

  .menu-panel {
    position: fixed !important;
    inset: 66px 12px auto !important;
    max-height: calc(100dvh - 148px);
    overflow: auto;
    border-radius: 16px !important;
  }

  .cc-mobile-tabs {
    position: sticky;
    box-sizing: border-box;
    top: 66px;
    z-index: 900;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    width: calc(100% + 24px);
    margin: -8px -12px 14px;
    padding: 8px 12px 10px;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--bg-color, #1a1a1d) 91%, transparent);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, .12));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .cc-mobile-tabs::-webkit-scrollbar { display: none; }

  .cc-mobile-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .14));
    border-radius: 999px;
    color: var(--label-color, #a0a0a0);
    background: var(--input-bg-color, rgba(0, 0, 0, .2));
    font: 700 .88rem/1 var(--font-family, sans-serif);
    cursor: pointer;
    white-space: nowrap;
  }

  .cc-mobile-tab[aria-selected="true"] {
    color: #fff;
    border-color: transparent;
    background: var(--accent-color, #6c63ff);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-color, #6c63ff) 35%, transparent);
  }

  .app-wrapper {
    display: block !important;
    width: 100%;
    max-width: none !important;
  }

  .cc-mobile-pane { display: none !important; }
  .cc-mobile-pane.is-mobile-active { display: block !important; }

  .container,
  .panel,
  .control-card {
    height: auto !important;
    max-height: none !important;
    min-width: 0 !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  #left-column-container {
    position: static !important;
  }

  header { margin-bottom: 1.25rem !important; }
  header h1 { font-size: clamp(1.35rem, 7vw, 1.8rem) !important; line-height: 1.28; }
  header h2 { font-size: 1.25rem !important; line-height: 1.35; }
  header p { line-height: 1.65; }

  button,
  select,
  input:not([type="range"]),
  .input,
  .action-btn,
  .analysis-btn,
  .copy-btn,
  .add-color-btn,
  .control-btn {
    min-height: 44px;
  }

  input,
  select,
  textarea { font-size: 16px !important; }

  .copy-btn {
    min-width: 58px;
    justify-content: center;
    padding: .45rem .65rem !important;
  }

  .input-section { gap: 1.2rem !important; }
  .input-group { gap: .45rem; }
  .input-row { gap: 8px !important; }
  .input-row input,
  .input-row select { min-height: 48px; padding: .75rem !important; }

  .main-content { gap: 1.2rem !important; }
  .preview-section { gap: 10px; }
  .color-preview { min-height: 140px; }
  .result-pantone { min-height: 140px; }

  #upload-area,
  .drop,
  .dropzone {
    min-height: 180px;
    padding: 24px 16px !important;
  }

  #image-preview-wrapper {
    min-height: min(62vw, 280px);
  }

  #preview-controls {
    justify-content: space-between;
    gap: 6px;
    overflow-x: auto;
    padding: 8px;
  }

  .control-btn {
    flex: 0 0 44px;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px;
  }

  #analysis-buttons { gap: 8px; }
  .analysis-btn { min-height: 52px; }

  #results-container,
  #scrollable-results,
  #palette-slots,
  #color-library-list {
    overflow: visible !important;
  }

  #mode-controls,
  #library-controls {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  }

  #hsl-filter-row .hsl-row2 { gap: 12px !important; }
  input[type="range"].hsl-slider { min-height: 32px; }

  .palette-actions { grid-template-columns: 1fr !important; gap: 8px !important; }
  .action-btn { min-height: 48px; }
  .palette-slot { min-height: 64px; }
  .add-color-btn { flex: 0 0 44px; width: 44px !important; height: 44px !important; }

  .floating-btn,
  #theme-toggle-btn,
  #memo-toggle-btn,
  #palette-manager-toggle-btn {
    display: none !important;
  }

  .cc-mobile-dock {
    position: fixed !important;
    z-index: 1100;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 7px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .12));
    border-radius: 18px;
    background: color-mix(in srgb, var(--card-bg-color, #242430) 90%, transparent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .cc-mobile-dock button {
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    color: var(--text-color, #f0f0f0);
    background: transparent;
    font: 700 .75rem/1 var(--font-family, sans-serif);
    cursor: pointer;
  }

  .cc-mobile-dock button:active { background: var(--input-bg-color, rgba(0, 0, 0, .18)); }

  .cc-mobile-theme-switch {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 92px;
    min-width: 92px;
    margin: 0 auto;
    padding: 4px !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .14)) !important;
    border-radius: 999px !important;
    background: var(--input-bg-color, rgba(0, 0, 0, .18)) !important;
    isolation: isolate;
  }

  .cc-mobile-theme-switch::before {
    position: absolute;
    z-index: -1;
    top: 4px;
    left: 4px;
    width: 38px;
    height: 38px;
    content: "";
    border-radius: 50%;
    background: var(--card-bg-color, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transform: translateX(42px);
    transition: transform .22s ease;
  }

  body.light-mode .cc-mobile-theme-switch::before { transform: translateX(0); }

  .cc-mobile-theme-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--label-color, #8b8b91);
  }

  .cc-mobile-theme-icon svg { width: 21px; height: 21px; }
  body.light-mode .cc-mobile-theme-sun { color: #e2a900; }
  body:not(.light-mode) .cc-mobile-theme-moon { color: #8d85ff; }

  /* Eyedropper feedback stays with the image instead of forcing a tab switch. */
  .cc-eyedropper-sheet {
    position: fixed;
    z-index: 1080;
    right: 12px;
    bottom: calc(var(--cc-mobile-dock-height) + 28px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    display: block;
    max-height: min(42dvh, 300px);
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .14));
    border-radius: 20px;
    background: color-mix(in srgb, var(--card-bg-color, #242430) 94%, transparent);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .32);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(100% + 24px));
    transition: transform .25s ease, opacity .2s ease, visibility .25s;
  }

  .cc-eyedropper-sheet.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .cc-eyedropper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  .cc-eyedropper-head strong { font-size: .9rem; }
  .cc-eyedropper-close { width: 44px; min-width: 44px; padding: 0 !important; font-size: 1.2rem; }

  .cc-eyedropper-colors {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: none;
  }

  .cc-eyedropper-colors::-webkit-scrollbar { display: none; }

  .cc-eyedropper-color {
    flex: 0 0 96px;
    min-width: 0;
    text-align: center;
  }

  .cc-eyedropper-color.is-picked { flex-basis: 78px; }

  .cc-eyedropper-swatch {
    display: block;
    width: 100%;
    height: 48px;
    margin-bottom: 6px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .14));
    border-radius: 12px;
  }

  .cc-eyedropper-color.is-picked .cc-eyedropper-swatch { height: 64px; }
  .cc-eyedropper-name { display: block; min-height: 2.6em; overflow: hidden; font-size: .7rem; line-height: 1.3; }

  .cc-eyedropper-copy {
    min-width: 44px;
    min-height: 32px !important;
    margin-top: 5px;
    padding: 2px 8px !important;
    font-size: .68rem !important;
  }

  /* Legacy WebP list becomes a record card list on phones. */
  body:has(#mobile-webp-files) .list {
    min-height: 0 !important;
    overflow: visible !important;
    border: 0 !important;
  }

  body:has(#mobile-webp-files) .list table { display: none !important; }

  .cc-mobile-file-cards {
    display: grid;
    gap: 12px;
  }

  .cc-mobile-file-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .12));
    border-radius: 16px;
    background: var(--input-bg-color, rgba(0, 0, 0, .12));
  }

  .cc-mobile-file-head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }

  .cc-mobile-file-head .thumb { width: 52px !important; height: 52px !important; }
  .cc-mobile-file-name { overflow-wrap: anywhere; font-size: .88rem; font-weight: 700; line-height: 1.45; }

  .cc-mobile-download {
    display: inline-grid;
    place-items: center;
    min-width: 68px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    color: #fff !important;
    background: var(--accent-color, #6c63ff);
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
  }

  .cc-mobile-download.is-disabled {
    color: var(--label-color, #8b8b91) !important;
    background: var(--card-bg-color, rgba(255, 255, 255, .08));
    border: 1px solid var(--border-color, rgba(255, 255, 255, .12));
  }

  .cc-mobile-file-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, .12));
  }

  .cc-mobile-file-meta div { min-width: 0; padding: 10px 8px 4px 0; }
  .cc-mobile-file-meta span { display: block; color: var(--label-color, #8b8b91); font-size: .68rem; font-weight: 700; }
  .cc-mobile-file-meta strong { display: block; overflow-wrap: anywhere; font-size: .82rem; line-height: 1.45; }

  #palette-manager-container,
  #memo-container,
  .wm-modal {
    max-width: calc(100vw - 24px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-mobile-tabs,
  .cc-mobile-tab,
  .cc-mobile-dock,
  .cc-eyedropper-sheet { scroll-behavior: auto; transition: none !important; }
}