/* ============================================
   3D SUPER GENERATOR - Mobile & Responsive
   ALL @media queries consolidated here
   ============================================ */

/* ===== TABLET (max-width: 900px) ===== */
@media (max-width: 900px) {

  /* --- Layout --- */
  body.in-generator #generator {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  :root { --sidebar-w: 100%; }
  body { overflow-x: hidden; }

  /* --- Sidebar --- */
  #sidebar {
    max-height: 35vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: hidden;
    overflow-y: auto;
    transition: max-height .3s ease, padding .3s ease;
  }
  #sidebar.sidebar-collapsed {
    max-height: 0; padding: 0; overflow: hidden;
  }

  /* All cards collapsed by default on mobile */
  body.in-generator #sidebar .card .card-body {
    max-height: 0; overflow: hidden; padding: 0 10px;
    transition: max-height .3s ease, padding .3s ease;
  }
  body.in-generator #sidebar .card.open .card-body,
  body.in-generator #sidebar .card:not(.collapsed) .card-body {
    max-height: 800px; padding: 8px 10px;
  }
  /* Presets card stays open */
  body.in-generator #sidebar .card:first-of-type .card-body {
    max-height: 800px !important; padding: 8px 10px !important;
  }

  .sidebar-toggle-btn { display: flex; }

  /* --- Topbar --- */
  .hamburger-btn { display: flex; }
  #topbar .hub-nav { display: none !important; }
  #topbar .topbar-link { display: none !important; }
  #topbar #lang-toggle { display: none !important; }
  #topbar #kofi-hub-btn { display: none !important; }
  #topbar {
    min-height: var(--topbar-h);
    padding: 6px 10px; gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #topbar::-webkit-scrollbar { display: none; }
  #topbar .logo { font-size: 14px; flex-shrink: 0; }
  #topbar .logo span { display: none; }
  #topbar .spacer { flex: 1; min-width: 4px; }
  #topbar-export { flex-wrap: nowrap; flex-shrink: 0; gap: 4px !important; }
  #topbar-export .btn { padding: 4px 6px !important; font-size: 10px !important; flex-shrink: 0; }

  /* Topbar scroll fade hint */
  #topbar::before {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 32px;
    background: linear-gradient(90deg, transparent, var(--panel));
    pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s;
  }
  #topbar.has-overflow::before { opacity: 1; }
  #topbar.scrolled-end::before { opacity: 0; }

  body.mobile-menu-open { overflow: hidden; }
  body.mobile-menu-open #hub { overflow: hidden; }

  #lang-toggle { min-width: 36px !important; font-size: 10px !important; }

  /* --- Hub --- */
  #hub { padding: 20px 16px; overflow-x: hidden; }
  .hub-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .hub-hero h1 { font-size: 28px; }
  .gen-card { min-height: 44px; }
  .hub-table-wrap { overflow-x: auto; padding: 0 8px; }
  .gen-table { min-width: 600px; }
  #kb-shortcuts { display: none !important; }
  .scroll-top-btn { bottom: 80px; right: 12px; width: 44px; height: 44px; }

  /* --- Viewport --- */
  #viewport { min-height: 45vh; }
  .vp-info { bottom: 4px; left: 4px; right: 4px; font-size: 10px; gap: 6px; padding: 6px 10px; }

  /* --- TOOLBAR: moved into sidebar via JS on mobile --- */
  .vp-toolbar {
    position: relative !important;
    top: auto !important; right: auto !important; left: auto !important;
    max-width: none; width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--glass-border);
    margin: 0 -12px;
    padding: 6px 12px;
    width: calc(100% + 24px);
  }
  .vp-toolbar::-webkit-scrollbar { display: none; }
  .vp-toolbar button { height: 34px; min-width: 34px; font-size: 11px; }
  .vp-toolbar input[type="number"] { height: 34px; width: 52px; }
  .vp-toolbar select { height: 34px; }

  /* --- PM TOOLBAR: also in sidebar on mobile --- */
  #pm-toolbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-size: 11px;
    padding: 6px 12px;
    gap: 4px;
    border-bottom: 1px solid var(--glass-border);
    margin: 0 -12px;
    width: calc(100% + 24px);
  }
  #pm-toolbar::-webkit-scrollbar { display: none; }
  #pm-toolbar .btn.sm { height: 34px; min-width: 34px; font-size: 11px; flex-shrink: 0; }
  #pm-toolbar span { flex-shrink: 0; }

  /* --- Panels (PM + Export) --- */
  .pm-panel { bottom: 4px; right: 4px; left: 4px; max-width: none; min-width: 0; }
  .export-panel { bottom: 4px; left: 4px; right: 4px; }
  .btn-back { flex-shrink: 0; }

  /* --- Info bar --- */
  .info-bar, #vp-info, footer { font-size: 10px !important; padding: 2px 8px !important; }

  /* --- Support widgets: hide on mobile --- */
  .floatingchat-container-wrap,
  .floatingchat-container,
  [id*="bmc-wbtn"],
  .ko-fi-btn-container,
  .floating-chat-btn {
    display: none !important; opacity: 0 !important; pointer-events: none !important;
  }
}

/* ===== HERO RESPONSIVE (max-width: 768px) ===== */
@media (max-width: 768px) {
  .hub-hero h1 { font-size: 28px; }
  .hub-stats { gap: 16px; flex-wrap: wrap; }
  .hub-stats .stat .val { font-size: 22px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-btn { width: 100%; max-width: 280px; font-size: 13px; padding: 12px 16px; }
  .hero-translate { gap: 4px; }
  .gt-mini { padding: 2px 6px; font-size: 9px; }
  #community-grid-support { grid-template-columns: 1fr !important; }
  #community-grid-affiliate { grid-template-columns: 1fr !important; }
  #top-affiliate-grid { grid-template-columns: 1fr !important; }
  .support-grid { grid-template-columns: 1fr !important; }
  .donate-btn { padding: 8px 14px !important; font-size: 12px !important; min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
  .share-btn { padding: 8px 12px !important; font-size: 11px !important; min-height: 44px !important; }
}

/* ===== SMALL PHONE (max-width: 500px) ===== */
@media (max-width: 500px) {

  /* --- Hub --- */
  .hub-grid { grid-template-columns: 1fr 1fr; }
  .gen-card { padding: 14px; }
  .gen-card .icon { font-size: 24px; }
  .hub-stats { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .hub-stats .stat .val { font-size: 22px; }
  .hub-hero h1 { font-size: 24px; }
  .gen-table { font-size: 12px; }
  .gen-table td, .gen-table th { padding: 6px 8px; }
  #topbar-export { flex-wrap: nowrap; }
  #topbar .logo { font-size: 13px; }
  .btn-back span { display: none; }
  .btn-back { padding: 6px 8px; }
  .mobile-menu .mobile-nav-grid { grid-template-columns: repeat(2, 1fr); }

  /* --- Sidebar --- */
  #sidebar { max-height: 30vh !important; }
  #viewport { min-height: 50vh; }
  .gen-title { font-size: 14px; }
  .card-head { font-size: 11px; padding: 8px 10px; min-height: 44px; }
  .card-body { padding: 8px 10px; }
  .btn-row { gap: 4px; }
  .btn.sm { padding: 8px 10px; font-size: 11px; min-height: 44px; }
  .check-row, .toggle-row { min-height: 44px; }
  .check-row input[type="checkbox"], .toggle-row input[type="checkbox"] { width: 20px; height: 20px; }

  /* --- Toolbar in sidebar: hide less-used items on small screens --- */
  .vp-toolbar .vp-rot-info { display: none !important; }
  .vp-toolbar #rot-deg,
  .vp-toolbar #rot-axis,
  .vp-toolbar [onclick="rotCustom()"] { display: none !important; }
  .vp-toolbar [onclick*="import-stl"] { display: none !important; }
  .vp-toolbar button { height: 30px; min-width: 30px; font-size: 10px; }
  #pm-toolbar .btn.sm { height: 30px; font-size: 10px; }
  #pm-toolbar #pm-info { display: none; }
  /* PM toolbar compact */
  #pm-toolbar .btn.sm { height: 30px; font-size: 10px; }
  #pm-toolbar #pm-info { display: none; }

  /* --- Search + View toggle --- */
  .hub-search { flex-wrap: wrap; max-width: 100%; }
  .hub-search input { width: 100%; min-width: 0; }
  .view-toggle { width: 100%; justify-content: center; margin: 6px 0 0; }

  /* --- Translate hero --- */
  #translate-hero { padding: 0 8px !important; }
  #translate-hero > div { padding: 10px 10px !important; gap: 8px !important; }
  #translate-hero .gt-quick-btn { padding: 5px 8px !important; font-size: 11px !important; }

  /* --- Community sections --- */
  #hub [style*="padding:0 16px"],
  #hub [style*="padding: 0 16px"] {
    padding-left: 4px !important; padding-right: 4px !important;
  }
  #hub [style*="padding:18px 20px"],
  #hub [style*="padding: 18px 20px"],
  #hub [style*="padding:14px 20px"],
  #hub [style*="padding: 14px 20px"] {
    padding-left: 12px !important; padding-right: 12px !important;
  }

  /* --- Toolbar row fallback --- */
  .toolbar-row .btn[title] {
    padding: 3px 5px !important; font-size: 9px !important; min-width: 28px !important;
  }
}

/* ===== NARROW PHONE (max-width: 400px) ===== */
@media (max-width: 400px) {
  .hub-stats { gap: 8px; }
  .hub-stats .stat .val { font-size: 18px; }
  .hub-stats .stat .lbl { font-size: 9px; letter-spacing: .3px; }
}

/* ===== ULTRA NARROW (max-width: 360px) ===== */
@media (max-width: 360px) {
  .hub-grid { grid-template-columns: 1fr !important; }
  .hub-hero h1 { font-size: 20px; }
  .hub-hero p { font-size: 13px; }
  .hub-stats .stat .val { font-size: 18px; }
  .hub-stats .stat .lbl { font-size: 9px; }
  #hub { padding: 12px 10px; }
  .mobile-menu .mobile-nav-grid { grid-template-columns: repeat(2, 1fr); }
  .gen-card { padding: 12px; }
  .gen-card .icon { font-size: 22px; }
  .gen-card h3 { font-size: 13px; }
}

/* ===== PRINT ===== */
@media print {
  :root {
    --bg: #ffffff; --bg2: #f5f5f5; --panel: #ffffff; --card: #f8f8f8;
    --text: #111111; --text-dim: #444444; --text-muted: #666666;
    --border: #cccccc; --border-light: #dddddd;
    --accent: #0077aa; --accent2: #5533bb;
  }

  #topbar, #toast-container, #loading-overlay, .shortcuts-overlay,
  .scroll-top-btn, #particle-canvas, .vp-toolbar, .export-bar,
  .hub-nav, .btn-back, .fav-star, .view-toggle, .hub-search,
  input[type="range"], input[type="color"], .btnrow, .btn-row {
    display: none !important;
  }

  html, body {
    height: auto; overflow: visible; font-size: 11pt; color: #111; background: #fff;
  }
  #hub { height: auto; overflow: visible; padding: 16px; background: #fff; }

  .gen-card {
    border: 1px solid #ccc; background: #fff; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    break-inside: avoid; page-break-inside: avoid;
  }
  .hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hub-hero h1 { font-size: 24pt; color: #111; -webkit-text-fill-color: #111; }
  .hub-hero h1 em { -webkit-text-fill-color: var(--accent2); background: none; }
  .hub-stats .stat .val { -webkit-text-fill-color: var(--accent); background: none; }

  * { animation: none !important; transition: none !important; }

  body.in-generator #generator { display: block; }
  #sidebar { max-height: none; border: none; overflow: visible; }
  #viewport { display: none; }

  .gen-table { background: #fff; box-shadow: none; }
  .gen-table thead { background: #eee; color: #111; position: static; }
  .gen-table td { color: #444; border-color: #ccc; }

  .hub-section { break-before: auto; page-break-before: auto; }
  .hub-section h2 { break-after: avoid; page-break-after: avoid; }
}