/* ==========================================================================
   Peerly Draw — Responsive (Material 3 breakpoints)
   ==========================================================================
   Compact    : 0–599px    (téléphone)         → sidebar + tools dedans
   Medium     : 600–839px  (tablette)          → sidebar + tools dedans
   Expanded   : 840–1199px (desktop compact)   → bottom toolbar
   Large      : 1200–1599px(desktop)           → bottom toolbar
   Extra-large: 1600px+    (desktop large)     → bottom toolbar
   ========================================================================== */

/* ==========================================================================
   COMPACT : 0–599px
   ========================================================================== */

@media (max-width: 599px) {
  :root {
    --md-sys-page-padding: var(--md-sys-spacing-2);
  }

  .header {
    height: 56px;
    padding: 0 var(--md-sys-spacing-1half);
  }

  .header__menu { display: inline-flex; }
  .header__logo { font-size: var(--md-sys-typescale-title-medium-size); }
  .header__room-code { display: none; }
  .header__e2ee { display: none; }
  .header__right { gap: 0; }

  /* Le bouton widget dans le header n'est utile que sur mobile */
  #btnWidgets { display: inline-flex; }

  .app {
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
  }

  .sidebar {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    z-index: 160;
    width: min(320px, 85vw);
    min-width: 0;
    transform: translateX(-100%);
    box-shadow: var(--md-sys-elevation-3);
    border-radius: 0 var(--md-sys-shape-lg) var(--md-sys-shape-lg) 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .sidebar--open { transform: translateX(0); }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: 100%;
    border-radius: var(--md-sys-shape-xl) var(--md-sys-shape-xl) 0 0;
    animation: m3-sheet-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  @keyframes m3-sheet-in {
    from { opacity: 0; transform: translateY(32px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .modal__footer { flex-direction: column-reverse; }
  .modal__footer .btn { width: 100%; }

  .canvas-placeholder__actions {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
  }
  .canvas-placeholder__actions .btn { width: 100%; }
  .canvas-placeholder__icon { width: 80px; height: 80px; }
  .canvas-placeholder__icon i { font-size: 40px; }

  .toast {
    left: var(--md-sys-spacing-2);
    right: var(--md-sys-spacing-2);
    transform: none;
    max-width: none;
    animation: none;
  }
}

/* ==========================================================================
   MEDIUM : 600–839px
   ========================================================================== */

@media (min-width: 600px) and (max-width: 839px) {
  :root {
    --md-sys-page-padding: var(--md-sys-spacing-3);
  }

  .header__menu { display: inline-flex; }
  .header__center { display: none; }

  .sidebar {
    position: fixed;
    top: 64px;
    bottom: 0;
    left: 0;
    z-index: 160;
    width: min(360px, 60vw);
    min-width: 0;
    transform: translateX(-100%);
    box-shadow: var(--md-sys-elevation-3);
    border-radius: 0 var(--md-sys-shape-lg) var(--md-sys-shape-lg) 0;
  }

  .sidebar--open { transform: translateX(0); }

  #btnWidgets { display: inline-flex; }
}

/* ==========================================================================
   EXPANDED : 840px+ — Bottom toolbar, sidebar réduite
   ========================================================================== */

@media (min-width: 840px) {
  :root {
    --md-sys-page-padding: var(--md-sys-spacing-3);
  }

  .header__menu { display: none; }
  .sidebar {
    position: relative;
    transform: none;
    box-shadow: none;
    border-radius: 0;
  }
  .sidebar-overlay { display: none !important; }
  .header__center { display: block; }
  .header__room-code { display: inline-block; }
  .header__e2ee { display: inline-flex; }

  /* Masquer le bouton widgets du header (on a les onglets de la bottom toolbar) */
  #btnWidgets { display: none; }

  /* Masquer les sections mobiles de la sidebar */
  .sidebar__section--mobile-only { display: none; }

  /* Afficher la bottom toolbar */
  .bottom-toolbar:not([hidden]) { display: flex; }

  /* Réserver de l'espace en bas du canvas pour ne pas être masqué */
  .canvas-area {
    padding-bottom: 0;
  }
}

/* ==========================================================================
   LARGE : 1200px+
   ========================================================================== */

@media (min-width: 1200px) {
  :root {
    --md-sys-page-padding: var(--md-sys-spacing-4);
  }

  .sidebar {
    width: 300px;
    min-width: 300px;
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-1half);
  }

  .sidebar__section { padding: var(--md-sys-spacing-1) var(--md-sys-spacing-1); }

  .bottom-toolbar { bottom: 24px; }
}

/* ==========================================================================
   EXTRA-LARGE : 1600px+
   ========================================================================== */

@media (min-width: 1600px) {
  .sidebar {
    width: 320px;
    min-width: 320px;
  }

  .canvas-placeholder h2 {
    font-size: var(--md-sys-typescale-headline-medium-size);
  }

  .bottom-toolbar { bottom: 32px; }
}

/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   LANDSCAPE MOBILE
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
  .header { height: 48px; }
  .app {
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
  }
  .sidebar { top: 48px; }
  .tool-btn { min-height: 48px; }
  .tool-btn span { display: none; }
}