/* ============================================================
   Mobile / responsive adaptation for chat.aproject
   Desktop-first: these rules layer on top at narrow widths.
   Breakpoints:  ≤1100px tablet tweaks · ≤860px mobile
   ============================================================ */

/* hidden on desktop */
.mobilebar, .mobile-backdrop, .pl-mback, .pl-mact-btn { display: none; }

/* ---------------- TABLET (861–1100px) ---------------- */
@media (max-width: 1100px) and (min-width: 861px) {
  .sidebar { width: 240px; }
  .pilot-root { --pl-c2: 286px; }
  .pilot-root > .sidebar { width: 240px; }
}

/* ---------------- MOBILE (≤860px) ---------------- */
@media (max-width: 860px) {
  /* top app bar */
  .mobilebar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 95;
    padding: 0 8px;
    background: var(--sidebar);
    border-bottom: 1px solid var(--sidebar-border);
  }
  .mb-burger, .mb-act {
    display: grid; place-items: center; width: 40px; height: 40px;
    border: none; background: transparent; color: var(--foreground);
    border-radius: 9px; cursor: pointer; flex-shrink: 0;
  }
  .mb-burger:active, .mb-act:active { background: var(--sidebar-item-hover); }
  .mb-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }

  /* shell makes room for the fixed bar */
  .app-shell { padding-top: 54px; }

  /* command palette / overlays drop below the bar */
  .cmd-overlay { padding-top: 80px; align-items: flex-start; }

  /* ---- off-canvas sidebar (chat history & pilot col-1) ---- */
  .app-shell .sidebar,
  .pilot-root > .sidebar {
    position: fixed !important;
    top: 54px; bottom: 0; left: 0;
    height: auto !important;
    margin: 0 !important;
    width: min(86vw, 330px) !important;
    border-radius: 0 16px 16px 0 !important;
    transform: translateX(-100%);
    z-index: 90;
    border-right: 1px solid var(--sidebar-border);
    box-shadow: 6px 0 32px rgba(0,0,0,.18);
  }
  .app-shell.mnav-open .sidebar,
  .app-shell.mnav-open .pilot-root > .sidebar {
    transform: translateX(0) !important;
    animation: drawerSlideIn .26s cubic-bezier(.4,0,.2,1);
  }
  @keyframes drawerSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
  /* sidebar never collapses to icons on mobile */
  .app-shell .sidebar.collapsed { width: min(86vw, 330px) !important; }
  .sidebar .sb-collapse-btn { display: none; }

  .mobile-backdrop {
    display: block; position: fixed; inset: 54px 0 0 0; z-index: 85;
    background: rgba(20,18,14,.4); backdrop-filter: blur(1px);
    animation: fadeIn .18s ease;
  }
  .dark .mobile-backdrop { background: rgba(0,0,0,.55); }

  /* ---- main column fills width ---- */
  .main { width: 100%; }
  .main-top { padding: 0 12px; gap: 8px; }
  .main-top button[title="Боковая панель"] { display: none; }
  .main-top .crumb { display: none; }
  .main-top .title { font-size: 15px; }

  /* chat hero / composer breathing room */
  .main-body { padding: 18px 16px; }
  .hero-h { font-size: 25px; }
  .composer { padding: 12px 13px; }
  .suggest { gap: 7px; }

  /* gallery / library pages */
  .proj-wrap, .pd-wrap { padding-left: 16px; padding-right: 16px; }
  .proj-inner, .pd-inner { padding: 18px 0 40px; }
  .proj-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .proj-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .proj-toolbar { flex-wrap: wrap; }
  .pd-head { flex-direction: column; }
  .pd-actions { width: 100%; }
  .pd-tabs { overflow-x: auto; }
  .lib-row { grid-template-columns: minmax(0,1fr) 60px 30px; gap: 8px; }
  .lib-row > :nth-child(2), .lib-row > :nth-child(4) { display: none; }

  /* file manager rows: drop wide columns */
  .fm-row { grid-template-columns: 24px 1fr 36px; }
  .fm-row .fm-col { display: none; }
  .fm-bar { flex-wrap: wrap; }
  .fm-search { width: 100%; }

  /* user menu / dropdowns: keep within viewport */
  .menu { max-width: calc(100vw - 24px); }

  /* slide-over drawers (chat settings, invite) full-width-ish */
  .drawer { width: 100%; }
  .modal { width: calc(100vw - 28px); }

  /* ============ PILOT — drill-in (1 column at a time) ============ */
  .pilot-root { display: block; position: relative; }
  .pilot-root > .pl-col {
    position: absolute; inset: 0;
    width: 100% !important; border-right: 0;
  }
  .pilot-root .pl-col-mid { width: 100% !important; }
  .pl-resizer { display: none !important; }
  /* show one pane based on data-mpane */
  .pilot-root[data-mpane="list"]   .pl-col-chat { display: none; }
  .pilot-root[data-mpane="detail"] .pl-col-mid  { display: none; }

  /* mobile back buttons */
  .pl-mback {
    display: grid; place-items: center; width: 34px; height: 34px;
    border: none; background: transparent; color: var(--pl-fg-2);
    border-radius: 8px; cursor: pointer; margin-left: -6px; flex-shrink: 0;
  }
  .pl-mback:active { background: var(--pl-hover); }

  /* activity entry button at top of cross-project task list */
  .pl-mact-btn {
    display: flex; align-items: center; gap: 9px; width: calc(100% - 20px);
    margin: 10px 10px 4px; padding: 0 13px; height: 44px;
    border: 1px solid var(--pl-border); background: var(--pl-panel);
    border-radius: 10px; font-family: inherit; font-size: 13.5px; font-weight: 550;
    color: var(--pl-fg); cursor: pointer;
  }
  .pl-mact-btn:active { background: var(--pl-hover); }
  .pl-mact-btn > svg:first-child { color: var(--pl-accent); }

  /* pilot chat inner padding */
  .pl-inner { padding: 0 16px; }
  .pl-comp-wrap { padding: 10px 12px 14px; }
  .pl-quick { padding: 0 4px; }

  /* bigger touch targets in lists */
  .sb-item, .sb-chat { height: 40px; }
  .pl-proj { padding-top: 10px; padding-bottom: 10px; }
}

/* very small phones */
@media (max-width: 380px) {
  .proj-grid { grid-template-columns: 1fr 1fr; }
  .hero-h { font-size: 22px; }
  .mb-brand .sb-wordmark { font-size: 16px; }
}