/* ============================================
   RESPONSIVE - Mobile & Tablet (<768px)
   ============================================ */

@media (max-width: 768px) {

  /* --- Desktop --- */
  #desktop-avatar img {
    width: 80px;
    height: 80px;
  }

  #desktop-avatar .avatar-name {
    font-size: 14px;
  }

  #desktop-avatar {
    bottom: 24px;
  }

  /* On mobile : show only the train widget, sticky at top */
  #widget-layer {
    display: block;
    pointer-events: none; /* let clicks pass through except on train widget */
  }

  #widget-layer .widget {
    display: none; /* hide all widgets by default on mobile */
  }

  #widget-layer .widget-train {
    display: block;
    pointer-events: auto;
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none;
    z-index: 50;
    max-height: 50vh;
    overflow: auto;
  }

  /* Disable drag cursor (no drag on mobile, position is locked) */
  .widget-train .widget-header {
    cursor: default;
  }

  /* --- Taskbar --- */
  #taskbar {
    height: 44px;
    padding: 0 4px;
  }

  /* Adjust desktop height for smaller taskbar */
  #desktop {
    height: calc(100vh - 44px);
  }

  #tray-clock {
    font-size: 11px;
    padding: 4px 6px;
  }

  /* Hide app title text, keep icon only */
  .taskbar-app span:not(.taskbar-app-icon) {
    display: none;
  }

  .taskbar-app {
    padding: 6px 8px;
  }

  #notification-bell,
  #theme-toggle {
    width: 32px;
    height: 32px;
  }

  /* --- App Launcher --- */
  #app-launcher {
    height: calc(100vh - 44px);
  }

  .launcher-grid {
    grid-template-columns: repeat(3, 80px);
    gap: 16px;
  }

  .launcher-app {
    padding: 12px 6px;
  }

  .launcher-app-icon {
    font-size: 40px;
  }

  .launcher-app-name {
    font-size: 11px;
  }

  /* --- Windows: force fullscreen --- */
  .os-window {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 44px) !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  /* Hide resize handles on mobile */
  .resize-handle {
    display: none;
  }

  /* Hide minimize/maximize buttons (always fullscreen) */
  .window-btn-minimize,
  .window-btn-maximize {
    display: none;
  }

  /* Titlebar touch-friendly */
  .window-titlebar {
    height: 42px;
    padding: 0 4px;
  }

  .window-title {
    font-size: 14px;
  }

  .window-controls button {
    width: 42px;
    height: 38px;
  }

  /* Snap preview not needed */
  #snap-preview {
    display: none;
  }

  /* --- Notification center --- */
  #notification-center {
    width: calc(100vw - 16px);
    right: 8px;
    left: 8px;
    bottom: 52px;
  }

  /* --- Toasts --- */
  .toast {
    min-width: 0;
    max-width: calc(100vw - 32px);
    width: calc(100vw - 32px);
  }

  #toast-container {
    right: 16px;
    left: 16px;
  }

  /* --- Context menu --- */
  #context-menu {
    min-width: 180px;
  }

  /* --- App: File Explorer --- */
  .explorer-sidebar {
    display: none;
  }

  .explorer-grid {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
  }

  /* --- App: Browser --- */
  .browser-home {
    padding: 24px 16px;
  }

  .browser-home-title {
    font-size: 22px;
  }

  .browser-bookmarks-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .browser-nav-buttons {
    display: none;
  }

  .browser-blocked-actions {
    flex-direction: column;
  }

  /* --- App: Calculator --- */
  .calc-display-value {
    font-size: 28px;
  }
}

/* ============================================
   RESPONSIVE - Very small screens (<400px)
   ============================================ */

@media (max-width: 400px) {

  .launcher-grid {
    grid-template-columns: repeat(3, 72px);
    gap: 12px;
  }

  .launcher-app-icon {
    font-size: 36px;
  }

  #desktop-avatar img {
    width: 64px;
    height: 64px;
  }

  #desktop-avatar .avatar-name {
    font-size: 12px;
  }

  .browser-bookmarks-grid {
    grid-template-columns: 1fr 1fr;
  }
}