/* ==========================================================================
   App layout — desktop 3 colonne, tablet 2 colonne, mobile bottom-nav
   ========================================================================== */

.app {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-columns: var(--sidebar-w) 1fr var(--sources-w);
  grid-template-areas:
    "topbar topbar topbar"
    "sidebar main sources";
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}

/* ---------- Topbar ---------- */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  z-index: var(--z-sticky);
  backdrop-filter: saturate(140%) blur(8px);
}
.topbar-brand {
  display: flex; align-items: center; gap: var(--space-3);
  min-width: 0;
}
.topbar-brand .logo {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.topbar-title {
  display: flex; flex-direction: column;
  min-width: 0;
}
.topbar-title .title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.topbar-title .subtitle {
  font-size: var(--fs-xs);
  color: var(--fg-tertiary);
}
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); }
.topbar-toolbar {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 2px;
  box-shadow: var(--shadow-xs);
}
.topbar-toolbar .btn-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 0;
}
.topbar-toolbar .btn-icon-text { width: auto; padding: 0 12px; }
.topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--border-default);
  margin: 0 4px;
  display: inline-block;
}
@media (max-width: 540px) {
  .topbar-toolbar { padding: 2px; }
  .topbar-toolbar .btn-icon { width: 32px; height: 32px; font-size: 16px; }
  .topbar-divider { display: none; }
}

/* ---------- Sidebar (storico chat) ---------- */
.sidebar {
  grid-area: sidebar;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}
.sidebar-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--space-3);
}

/* ---------- Main (chat area) ---------- */
.main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  overflow: hidden;
  position: relative;
}
.main-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-5);
}
.main-inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.composer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  padding: var(--space-4) var(--space-5);
}
.composer-inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ---------- Sources panel ---------- */
.sources {
  grid-area: sources;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sources-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.sources-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

/* ==========================================================================
   Tablet (768-1023px): 2 colonne, sources collassabile
   ========================================================================== */
@media (max-width: 1023px) and (min-width: 768px) {
  .app {
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-areas:
      "topbar topbar"
      "sidebar main";
  }
  .sources {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    width: 360px;
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-out);
    z-index: var(--z-drawer);
    box-shadow: var(--shadow-xl);
  }
  .sources.open { transform: translateX(0); }
}

/* ==========================================================================
   Mobile (<768px): bottom-nav + tab-based layout
   ========================================================================== */
@media (max-width: 767px) {
  .app {
    grid-template-rows: var(--topbar-h) 1fr var(--bottom-nav-h);
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main"
      "bottom-nav";
  }
  .sidebar, .sources {
    position: fixed;
    top: var(--topbar-h);
    left: 0; right: 0;
    bottom: var(--bottom-nav-h);
    z-index: calc(var(--z-sticky) + 5);
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-out);
  }
  .sidebar.active, .sources.active { transform: translateX(0); }
  .sources { transform: translateX(100%); }
  .sources.active { transform: translateX(0); }

  .main-scroll { padding: var(--space-4); }
  .composer { padding: var(--space-3); }

  .topbar { padding: 0 var(--space-3); }
  .topbar-title .title { max-width: 160px; font-size: var(--fs-sm); }
}

/* ---------- Bottom Navigation (mobile only) ---------- */
.bottom-nav {
  grid-area: bottom-nav;
  display: none;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  z-index: var(--z-sticky);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (max-width: 767px) {
  .bottom-nav { display: grid; grid-template-columns: repeat(3, 1fr); }
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-2) var(--space-1);
  background: transparent;
  border: 0;
  color: var(--fg-tertiary);
  font-size: 11px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.bottom-nav-item.active { color: var(--color-primary-600); }
[data-theme="dark"] .bottom-nav-item.active,
:root:not([data-theme="light"]) .bottom-nav-item.active { color: var(--color-primary-300); }
.bottom-nav-item .icon { width: 22px; height: 22px; }

/* ---------- Manager-only visibility ---------- */
[data-role="user"] .manager-only { display: none !important; }