/* v6.5.39 dashboard scroll and clearance fix
   Final override for the user dashboard only. Keeps admin console separate. */

:root {
  --atticus-dashboard-footer-clearance: calc(var(--base-footer-height, 72px) + env(safe-area-inset-bottom, 0px) + 20px);
}

/* Make the dashboard itself the scroll container. The prior nested scroll could trap
   the page at the top on some desktops and mobile browsers. */
body .stage > section.view.page-view.is-active[data-view="dashboard"] {
  display: block !important;
  inset: var(--base-topbar-height, var(--topbar-height, 72px)) 0 var(--base-footer-height, 72px) 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: clamp(16px, 2.4vw, 28px) clamp(14px, 3.4vw, 42px) var(--atticus-dashboard-footer-clearance) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] > .personal-dashboard-header {
  width: min(1280px, 100%) !important;
  max-width: min(1280px, 100%) !important;
  margin: 0 auto clamp(14px, 2vh, 22px) !important;
  padding: 0 0 clamp(12px, 1.8vh, 18px) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--line-soft) !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] > .personal-console {
  grid-row: auto !important;
  width: min(1280px, 100%) !important;
  max-width: min(1280px, 100%) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 0 28px !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  gap: clamp(14px, 2vw, 20px) !important;
  align-content: start !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-hero {
  min-height: 0 !important;
  padding: clamp(18px, 2.5vw, 28px) !important;
  margin: 0 !important;
  border-radius: 24px !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-action-bar {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-action-pill {
  min-height: 66px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-dashboard-grid,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-dashboard-grid-top,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-dashboard-grid-main,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-dashboard-grid-secondary {
  width: 100% !important;
  min-width: 0 !important;
  gap: clamp(12px, 1.6vw, 18px) !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-dashboard-grid-top {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr) !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-dashboard-grid-main {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr) !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-dashboard-grid-secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-panel,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .abdash-panel {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: clamp(16px, 1.8vw, 22px) !important;
  border-radius: 22px !important;
  overflow: visible !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-chart-panel,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-snapshot-panel,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-radar-panel,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-usage-panel {
  min-height: 0 !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .abdash-scroll,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-radar-list,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-usage-list,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-apps-list,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-workspace-breakdown-list {
  min-height: 0 !important;
  height: auto !important;
  max-height: min(380px, 42vh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 2px !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-snapshot-grid,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-chart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-chart-stage {
  min-height: 86px !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .abdash-library-panel {
  display: grid !important;
  gap: 16px !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .workspace-manager-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .workspace-manager-head,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-panel-head {
  align-items: flex-start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body .stage > section.view.page-view.is-active[data-view="dashboard"] .project-title,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .project-copy,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .setting-copy,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .panel-title {
  overflow-wrap: anywhere !important;
}

/* Modal clearance and action clarity. */
.personal-welcome-modal {
  width: 100% !important;
}

.personal-welcome-grid {
  gap: 12px !important;
}

.modal.is-large-modal .modal-panel {
  width: min(960px, calc(100vw - 32px)) !important;
  max-width: min(960px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 44px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: clamp(20px, 2.6vw, 32px) !important;
}

#modalActions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

#modalActions .modal-btn {
  min-width: 132px !important;
}

#modalActions .modal-btn.action-new-conversation,
#modalActions .modal-btn.action-new-workspace,
#modalActions .modal-btn.action-walkthrough {
  border-radius: 12px !important;
}

#modalActions .modal-btn.action-new-conversation {
  border-color: rgba(209, 138, 85, 0.58) !important;
  background: linear-gradient(180deg, rgba(185, 115, 72, 0.34), rgba(185, 115, 72, 0.16)) !important;
  color: #f4d2b7 !important;
}

#modalActions .modal-btn.action-new-workspace {
  border-color: rgba(145, 170, 155, 0.62) !important;
  background: linear-gradient(180deg, rgba(105, 127, 116, 0.38), rgba(105, 127, 116, 0.16)) !important;
  color: #d7eadf !important;
}

#modalActions .modal-btn.action-walkthrough,
body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-action-pill.action-walkthrough {
  border-color: rgba(99, 212, 142, 0.70) !important;
  background: linear-gradient(180deg, rgba(72, 167, 111, 0.42), rgba(72, 167, 111, 0.16)) !important;
  color: #d6ffe4 !important;
}

/* Stronger mobile bounding for the dashboard and file controls. */
@media (max-width: 1120px) {
  body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-action-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-dashboard-grid-top,
  body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-dashboard-grid-main,
  body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-dashboard-grid-secondary,
  body .stage > section.view.page-view.is-active[data-view="dashboard"] .workspace-manager-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  body .stage > section.view.page-view.is-active[data-view="dashboard"] {
    padding: 14px 10px calc(var(--atticus-dashboard-footer-clearance) + 14px) !important;
  }

  body .stage > section.view.page-view.is-active[data-view="dashboard"] > .personal-dashboard-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 10px !important;
  }

  body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-action-bar,
  body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-snapshot-grid,
  body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-chart-grid {
    grid-template-columns: 1fr !important;
  }

  body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-panel,
  body .stage > section.view.page-view.is-active[data-view="dashboard"] .abdash-panel,
  body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-hero {
    border-radius: 16px !important;
    padding: 14px !important;
  }

  body .stage > section.view.page-view.is-active[data-view="dashboard"] .workspace-manager-head,
  body .stage > section.view.page-view.is-active[data-view="dashboard"] .personal-panel-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #modalActions .modal-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 520px) {
  .modal.is-large-modal .modal-panel {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - 22px) !important;
    padding: 16px !important;
  }

  .personal-welcome-grid {
    grid-template-columns: 1fr !important;
  }
}