/* =========================================================
   RESPONSIVE BREAKPOINTS (token-driven)
   Cambiamo soprattutto TOKENS (sidebarWidth, padding, maxWidth)
   così i profili UI restano coerenti.
   ========================================================= */

/* Mobile: sidebar becomes top bar */
@media (max-width: 640px){
  #app{ flex-direction:column; }
  #chatView{ flex-direction:column; }

  /* Override tokens for mobile */
  body{
    --sidebarWidth: 100%;
    --sidebarMinWidth: 0px;
    --sidebarPadding: 12px;
    --contentPadding: 12px;

    --bubbleMaxWidth: 92%;
  }

  .sidebar{
    width:100%;
    min-width:0;
    border-right:none;
    border-bottom:1px solid color-mix(in srgb, var(--borderSoft) 70%, transparent);
    gap:8px;
  }

  .sidebar h1{
    font-size: calc(var(--fontSize) + 2px);
  }

  .me{
    font-size: var(--fontSizeSmall);
    padding:8px;
  }

  /* keep UI clean on mobile */
  .sidebar ul{ display:none; }

  .input-bar{
    padding:10px;
    gap:8px;
  }

  /* input/button sizes stay token-driven (inputHeight/inputRadius) */
}

/* Tablet: narrower sidebar */
@media (min-width: 641px) and (max-width: 1024px){
  body{
    --sidebarWidth: 220px;
    --sidebarMinWidth: 220px;
    --sidebarPadding: 14px;

    --bubbleMaxWidth: 82%;
  }
}

/* Large desktop: more breathing room */
@media (min-width: 1280px){
  body{
    --sidebarWidth: 280px;
    --sidebarMinWidth: 280px;

    --contentPadding: 20px;
    --bubbleMaxWidth: 68%;
  }
}