/*
  Final layout control layer.
  This file intentionally loads last so the shell behaves like a responsive system
  instead of a stack of one-off overrides.
*/

:root {
  --ab-rail-width: clamp(236px, 18vw, 330px);
  --ab-page-gap: clamp(12px, 1.8vw, 24px);
  --ab-page-pad-x: clamp(12px, 2vw, 30px);
  --ab-page-pad-y: clamp(12px, 1.6vw, 22px);
  --ab-topbar-safe: 58px;
  --ab-footer-safe: 76px;
}

.shell {
  grid-template-columns: var(--ab-rail-width) minmax(0, 1fr) !important;
  width: 100vw !important;
  max-width: none !important;
}

.stage,
.view,
.page-view,
.focus-view,
.messenger-layout,
.thread-main,
.response,
.master-console,
.master-auto-selling,
.master-sales-review-board-v2,
.master-sales-section-card,
.master-sales-review-section {
  min-width: 0 !important;
}

.stage {
  width: 100% !important;
  max-width: none !important;
  overflow-x: hidden !important;
}

.page-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: var(--ab-page-gap) !important;
  flex-wrap: wrap !important;
}

.page-header > div:first-child {
  min-width: min(100%, 280px) !important;
  flex: 1 1 360px !important;
}

.messenger-header-actions,
.focus-thread-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.messenger-header-actions .action,
.focus-action-button {
  white-space: nowrap !important;
}

.focus-view.is-active {
  min-height: calc(var(--app-real-height, 100dvh) - var(--ab-footer-safe)) !important;
}

.focus-stage {
  width: min(100%, 1320px) !important;
  max-width: none !important;
  padding-inline: var(--ab-page-pad-x) !important;
  gap: clamp(12px, 2vh, 24px) !important;
}

.focus-stage > .response {
  width: 100% !important;
  max-width: none !important;
}

.focus-context-selects {
  display: grid !important;
  grid-template-columns: minmax(160px, 1.1fr) auto minmax(160px, 1fr) auto minmax(12px, .4fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
  width: 100% !important;
}

.focus-context-selects label,
.focus-context-selects select,
.focus-inline-action,
.focus-thread-actions {
  min-width: 0 !important;
}

.page-view[data-view="messenger"].is-active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: calc(var(--app-real-height, 100dvh) - var(--ab-footer-safe)) !important;
  max-height: none !important;
  padding: var(--ab-page-pad-y) var(--ab-page-pad-x) calc(var(--ab-footer-safe) + 4px) !important;
  overflow: hidden !important;
}

.page-view[data-view="messenger"] .messenger-layout {
  display: grid !important;
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr) !important;
  gap: var(--ab-page-gap) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.page-view[data-view="messenger"] .thread-list,
.page-view[data-view="messenger"] .thread-main {
  height: 100% !important;
  max-height: none !important;
}

.page-view[data-view="messenger"] .thread-main {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

.page-view[data-view="messenger"] .thread-body {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-padding-top: 18px !important;
  scroll-padding-bottom: 24px !important;
}

.app.is-messenger-list-collapsed .page-view[data-view="messenger"] .messenger-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

.app.is-messenger-list-collapsed .page-view[data-view="messenger"] .thread-list {
  display: none !important;
}

.app.is-focus-fullscreen .rail,
.app.is-messenger-fullscreen .rail,
.app.is-focus-fullscreen .stage > .topbar,
.app.is-messenger-fullscreen .stage > .topbar,
.app.is-focus-fullscreen .core-legal-footer,
.app.is-messenger-fullscreen .core-legal-footer {
  display: none !important;
}

.app.is-focus-fullscreen .shell,
.app.is-messenger-fullscreen .shell {
  grid-template-columns: minmax(0, 1fr) !important;
}

.app.is-focus-fullscreen .stage,
.app.is-messenger-fullscreen .stage {
  min-height: var(--app-real-height, 100dvh) !important;
  height: var(--app-real-height, 100dvh) !important;
}

.app.is-focus-fullscreen .focus-view.is-active,
.app.is-messenger-fullscreen .page-view[data-view="messenger"].is-active {
  height: var(--app-real-height, 100dvh) !important;
  min-height: var(--app-real-height, 100dvh) !important;
  padding: clamp(12px, 1.5vw, 24px) !important;
}

.app.is-focus-fullscreen .focus-stage {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.app.is-focus-fullscreen .focus-stage > .response {
  min-height: 0 !important;
  height: auto !important;
}

.app.is-messenger-fullscreen .page-view[data-view="messenger"] .messenger-layout {
  height: 100% !important;
}

/* Admin console: make the cockpit behave like a fluid dashboard instead of stacked fixed blocks. */
[data-view="atticus"].master-console-view.is-active {
  display: block !important;
  height: calc(var(--app-real-height, 100dvh) - var(--ab-footer-safe)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: var(--ab-page-pad-y) var(--ab-page-pad-x) calc(var(--ab-footer-safe) + 18px) !important;
}

.master-topline,
.master-section-card-head,
.master-sales-control-strip,
.master-refresh-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.master-topline,
.master-section-card-head {
  justify-content: space-between !important;
}

.master-sales-control-strip {
  justify-content: flex-start !important;
}

.master-grid,
.master-radar-grid,
.master-sales-card-deck,
.master-sales-feed-list,
.master-sales-slider-grid,
.master-sales-three-col,
.master-sales-two-col {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  gap: clamp(10px, 1.4vw, 18px) !important;
}

.master-sales-review-board-v2 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)) !important;
  gap: clamp(12px, 1.8vw, 22px) !important;
}

.master-sales-review-section.is-wide {
  grid-column: span 2 !important;
}

.master-sales-inline-form,
.master-sales-queue-instruction-form {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), auto)) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: min(100%, 360px) !important;
  flex: 1 1 360px !important;
}

.master-sales-queue-instruction-form {
  grid-template-columns: minmax(150px, 220px) minmax(220px, 1fr) minmax(90px, 120px) auto !important;
  margin-top: 14px !important;
}

.master-sales-queue-instruction-form textarea,
.master-sales-inline-form input,
.master-sales-inline-form select,
.master-sales-modal-form textarea,
.master-sales-modal-form input {
  min-width: 0 !important;
  width: 100% !important;
}

.master-card-actions,
.master-sales-action-row,
.master-sales-control-buttons {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.master-sales-clean-card,
.master-sales-feed-row,
.master-card,
.master-radar-card,
.master-sales-section-card,
.master-sales-review-section {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.master-modal-card {
  width: min(960px, calc(100vw - 24px)) !important;
  max-height: calc(var(--app-real-height, 100dvh) - 24px) !important;
  overflow: auto !important;
}

.master-sales-safe-send-note {
  border: 1px solid color-mix(in srgb, var(--master-amber, #c77a4b) 34%, transparent);
  background: color-mix(in srgb, var(--master-amber, #c77a4b) 8%, transparent);
  padding: 12px 14px;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 78%, transparent);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .master-sales-review-section.is-wide {
    grid-column: span 1 !important;
  }
}

@media (max-width: 980px) {
  :root {
    --ab-topbar-safe: 50px;
    --ab-footer-safe: 112px;
  }

  .shell {
    display: block !important;
  }

  .stage {
    min-height: var(--app-real-height, 100dvh) !important;
    padding-bottom: calc(var(--ab-footer-safe) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .page-view[data-view="messenger"].is-active {
    height: calc(var(--app-real-height, 100dvh) - var(--ab-footer-safe)) !important;
    padding: 12px 12px calc(var(--ab-footer-safe) + 10px) !important;
  }

  .page-view[data-view="messenger"] .messenger-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .page-view[data-view="messenger"] .thread-list {
    display: none !important;
  }

  .app.is-messenger-list-open .page-view[data-view="messenger"] .thread-list {
    display: block !important;
    position: fixed !important;
    z-index: 120 !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(env(safe-area-inset-top, 0px) + 74px) !important;
    bottom: calc(var(--ab-footer-safe) + env(safe-area-inset-bottom, 0px) + 14px) !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.55) !important;
  }

  .focus-context-selects {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .focus-context-spacer {
    display: none !important;
  }

  .focus-thread-actions {
    justify-content: flex-start !important;
  }

  .master-sales-queue-instruction-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --ab-page-pad-x: 10px;
    --ab-page-pad-y: 10px;
    --ab-footer-safe: 128px;
  }

  .page-title {
    font-size: clamp(24px, 9vw, 42px) !important;
    line-height: 1.05 !important;
  }

  .page-subtitle,
  .master-subtitle,
  .master-sales-copy {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .messenger-header-actions,
  .focus-thread-actions,
  .master-card-actions,
  .master-sales-action-row,
  .master-sales-control-buttons {
    width: 100% !important;
  }

  .messenger-header-actions .action,
  .focus-action-button,
  .master-button,
  .master-mini-button {
    flex: 1 1 auto !important;
    min-width: min(100%, 120px) !important;
  }

  .thread-head,
  .terminal,
  .response-meta,
  .master-sales-hero {
    flex-wrap: wrap !important;
  }

  .thread-compose,
  .focus-console {
    min-width: 0 !important;
  }

  .master-sales-review-board-v2,
  .master-grid,
  .master-radar-grid,
  .master-sales-card-deck,
  .master-sales-feed-list,
  .master-sales-slider-grid,
  .master-sales-three-col,
  .master-sales-two-col {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ATTICUS_STABLE_20260619_SAFE_FULLSCREEN_AND_TOP_ALIGNED_MESSENGER
   Final override layer for the current fullscreen/history fixes.
   Goals: controls cannot overlap, Messenger starts at the top, fullscreen never falls below the viewport,
   and admin sections can collapse instead of flooding the owner with every detail at once. */

.focus-context-bar,
.focus-context-selects,
.focus-thread-actions,
.messenger-header-actions,
.master-topline,
.master-refresh-row {
  min-width: 0 !important;
}

.focus-context-selects {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(132px, auto) minmax(180px, 1fr) minmax(150px, auto) minmax(230px, auto) !important;
  align-items: end !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
}

.focus-context-spacer {
  display: none !important;
}

.focus-thread-actions {
  grid-column: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(112px, 1fr)) !important;
  gap: 10px !important;
  width: min(100%, 280px) !important;
  justify-self: end !important;
}

.focus-action-button,
.focus-inline-action,
.messenger-header-actions .action {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
}

#focusFullscreenButton,
#focusWalkthroughButton {
  width: 100% !important;
}

/* Messenger history should begin at the top, not be pushed down by an invisible spacer. */
.thread-body::before {
  content: none !important;
  display: none !important;
  flex: 0 0 0 !important;
}

.page-view[data-view="messenger"].is-active {
  align-content: stretch !important;
  justify-content: center !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(10px, 1.4vh, 16px) !important;
}

.page-view[data-view="messenger"].is-active > .page-header,
.page-view[data-view="messenger"] .messenger-layout {
  width: min(var(--stage-content-max, 1500px), 100%) !important;
  max-width: min(var(--stage-content-max, 1500px), 100%) !important;
  margin-inline: auto !important;
}

.page-view[data-view="messenger"] .messenger-layout {
  grid-row: auto !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

.thread-main,
.thread-list {
  align-self: stretch !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

.thread-body {
  justify-content: flex-start !important;
  align-content: flex-start !important;
  padding-top: clamp(18px, 2.2vh, 30px) !important;
}

.app.is-messenger-fullscreen .page-view[data-view="messenger"].is-active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--app-real-height, 100dvh) !important;
  min-height: 0 !important;
  max-height: var(--app-real-height, 100dvh) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  padding: clamp(14px, 2vw, 28px) !important;
  gap: clamp(10px, 1.4vh, 18px) !important;
  overflow: hidden !important;
  z-index: 900 !important;
}

.app.is-messenger-fullscreen .page-view[data-view="messenger"] .messenger-layout {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.app.is-messenger-fullscreen .thread-main {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.app.is-messenger-fullscreen .thread-body {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

.app.is-messenger-fullscreen .thread-compose {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Admin: make information opt-in. */
.master-panel.is-collapsible {
  padding: 0 !important;
  overflow: hidden !important;
}

.master-panel.is-collapsible > summary {
  list-style: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 10%, transparent) !important;
}

.master-panel.is-collapsible > summary::-webkit-details-marker {
  display: none !important;
}

.master-panel.is-collapsible > summary::after {
  content: "Open" !important;
  flex: 0 0 auto !important;
  border: 1px solid color-mix(in srgb, var(--amber, #d48a55) 38%, transparent) !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  color: var(--amber, #d48a55) !important;
  font-family: var(--mono, ui-monospace, monospace) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.master-panel.is-collapsible[open] > summary::after {
  content: "Hide" !important;
}

.master-panel.is-collapsible .master-panel-body {
  padding: clamp(14px, 1.7vw, 22px) !important;
}

.master-panel-summary-copy {
  margin-top: 5px !important;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 52%, transparent) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.master-panel-summary-meta {
  margin-top: 6px !important;
  color: color-mix(in srgb, var(--amber, #d48a55) 82%, transparent) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

@media (max-width: 1160px) {
  .focus-context-selects {
    grid-template-columns: minmax(180px, 1fr) minmax(132px, auto) minmax(180px, 1fr) minmax(150px, auto) !important;
  }
  .focus-thread-actions {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .focus-context-selects {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .focus-inline-action,
  .focus-thread-actions,
  .messenger-header-actions,
  .messenger-header-actions .action {
    width: 100% !important;
  }
  .focus-thread-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .app.is-messenger-fullscreen .page-view[data-view="messenger"].is-active {
    padding: 12px !important;
  }
  .master-panel.is-collapsible > summary {
    align-items: flex-start !important;
  }
}


/* ATTICUS_STABLE_20260619_PROFILE_AND_LAYOUT_HARDENING
   This layer fixes the visible overlap regressions from the fullscreen controls,
   restores Messenger to the full available width, keeps Admin below the fixed topbar,
   and adds profile setup/progress UI without changing the working app logic. */

/* Focus controls: keep the two selectors and their action buttons in their own safe grid row.
   Fullscreen and Walkthrough never share space with the Conversation dropdown or New Conversation button. */
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px 14px !important;
  width: 100% !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, auto) minmax(180px, 1fr) minmax(150px, auto) !important;
  grid-auto-flow: row !important;
  align-items: end !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-workspace-field,
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-conversation-field,
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-inline-action {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-actions {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 42px !important;
  height: auto !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] #focusFullscreenButton,
body .stage > section.view.focus-view.is-active[data-view="focus"] #focusWalkthroughButton {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 1 220px !important;
  width: auto !important;
  min-width: 150px !important;
  max-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  white-space: nowrap !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-bar .time {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
  position: relative !important;
  z-index: 1 !important;
  margin-top: 30px !important;
  white-space: nowrap !important;
  opacity: .58 !important;
}

/* Restore Messenger to the full usable opening instead of a narrow centered band. */
.page-view[data-view="messenger"].is-active {
  width: 100% !important;
  max-width: none !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  align-content: stretch !important;
  padding-left: clamp(18px, 2.2vw, 34px) !important;
  padding-right: clamp(18px, 2.2vw, 34px) !important;
}

.page-view[data-view="messenger"].is-active > .page-header,
.page-view[data-view="messenger"].is-active > .messenger-layout {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page-view[data-view="messenger"] .messenger-layout {
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr) !important;
  gap: clamp(14px, 1.8vw, 26px) !important;
}

.app.is-messenger-list-collapsed .page-view[data-view="messenger"] .messenger-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

.app.is-messenger-list-collapsed .page-view[data-view="messenger"] .thread-main {
  width: 100% !important;
  max-width: none !important;
}

.app.is-messenger-fullscreen .page-view[data-view="messenger"].is-active {
  padding-left: clamp(18px, 2.4vw, 36px) !important;
  padding-right: clamp(18px, 2.4vw, 36px) !important;
}

.app.is-messenger-fullscreen .page-view[data-view="messenger"].is-active > .page-header,
.app.is-messenger-fullscreen .page-view[data-view="messenger"].is-active > .messenger-layout {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Admin starts below the real header. */
[data-view="atticus"].master-console-view.is-active {
  padding-top: calc(var(--topbar-height, 68px) + 26px) !important;
  height: calc(var(--app-real-height, 100dvh) - var(--ab-footer-safe, 76px)) !important;
  max-height: none !important;
}

[data-view="atticus"].master-console-view.is-active .master-topline {
  margin-top: 0 !important;
}

/* Profile setup guide. */
.profile-setup-card {
  border: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 12%, transparent);
  background: color-mix(in srgb, var(--main-bg, #0b100f) 72%, transparent);
  padding: 14px;
  margin-bottom: 16px;
  display: grid;
  gap: 10px;
}

.profile-setup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-setup-title {
  color: color-mix(in srgb, var(--cream, #e4d6bd) 92%, transparent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.profile-setup-copy {
  color: color-mix(in srgb, var(--cream, #e4d6bd) 58%, transparent);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 4px;
}

.profile-setup-percent {
  color: var(--online, #48d987);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
}

.profile-progress-track {
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 12%, transparent);
  background: rgba(0,0,0,.34);
  overflow: hidden;
}

.profile-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--amber, #c77a4b) 88%, transparent), color-mix(in srgb, var(--online, #48d987) 78%, transparent));
  transition: width .18s ease;
}

.profile-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 62%, transparent);
  font-size: 11px;
  line-height: 1.35;
}

.profile-checklist li::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 26%, transparent);
  background: rgba(0,0,0,.3);
}

.profile-checklist li.is-done {
  color: color-mix(in srgb, var(--online, #48d987) 82%, transparent);
}

.profile-checklist li.is-done::before {
  background: var(--online, #48d987);
  border-color: var(--online, #48d987);
  box-shadow: 0 0 12px color-mix(in srgb, var(--online, #48d987) 42%, transparent);
}

@media (max-width: 1080px) {
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-bar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects {
    grid-template-columns: minmax(180px, 1fr) minmax(140px, auto) !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-bar .time {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: end !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 720px) {
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-actions {
    justify-content: stretch !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] #focusFullscreenButton,
  body .stage > section.view.focus-view.is-active[data-view="focus"] #focusWalkthroughButton {
    flex: 1 1 100% !important;
  }
  .page-view[data-view="messenger"] .messenger-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-view="atticus"].master-console-view.is-active {
    padding-top: calc(var(--topbar-height, 56px) + 18px) !important;
  }
}

/* 2026-06-20 footer final geometry.
   The footer background spans the whole viewport so there is no visual gap.
   The rail stays above it, so the footer never covers rail text/buttons.
   Footer information is centered inside the usable app area to the right of the rail. */
@media (min-width: 721px) {
  body .app .shell {
    position: relative !important;
    isolation: isolate !important;
  }

  body .app .rail {
    position: relative !important;
    z-index: 80 !important;
  }

  body .app .stage {
    position: relative !important;
    z-index: 1 !important;
  }

  body .app .core-legal-footer,
  body .app.compact-nav .core-legal-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 12 !important;
    min-height: var(--dynamic-footer-height, 72px) !important;
    padding:
      10px
      18px
      calc(10px + env(safe-area-inset-bottom, 0px))
      calc(var(--rail-width, 254px) + 18px) !important;
    border-top: 1px solid var(--line-soft, rgba(228, 214, 189, .14)) !important;
    background: linear-gradient(180deg, rgba(5, 7, 10, .72), rgba(5, 7, 10, .94)) !important;
    backdrop-filter: blur(10px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    pointer-events: none !important;
  }

  body .app .core-legal-footer .core-footer-links,
  body .app .core-legal-footer .core-footer-copy {
    width: min(100%, 920px) !important;
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }

  body .app .core-legal-footer .core-footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
  }
}

/* Integrated stable Focus/Messenger rebuild v6.5.24
   Built from the v6.5.18 layout so these views keep the original AtticusBeta structure. */
:root {
  --atticus-footer-safe: max(var(--dynamic-footer-height, 72px), 72px);
}

body .stage > section.view.focus-view.is-active[data-view="focus"] {
  display: block !important;
  inset: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: calc(var(--topbar-height, 58px) + 14px) clamp(20px, 2.6vw, 42px) calc(var(--atticus-footer-safe) + 12px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-stage {
  width: min(100%, 1540px) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  overflow: hidden !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-header {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  justify-items: center !important;
  align-self: start !important;
  gap: 2px !important;
  text-align: center !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-kicker {
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 10px !important;
  letter-spacing: .28em !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-logo {
  margin: 0 !important;
  line-height: 1 !important;
  font-size: clamp(34px, 3.2vw, 58px) !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .response {
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 22px clamp(18px, 2.2vw, 34px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .response-meta.focus-context-bar {
  min-height: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 11%, transparent) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: end !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1.05fr) 38px 38px minmax(250px, 1.25fr) 38px 38px auto !important;
  gap: 8px !important;
  align-items: end !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects label {
  min-width: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects label span {
  min-width: 0 !important;
  color: var(--amber, #c77a4b) !important;
  font-family: var(--sans, system-ui) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects select,
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-icon-action,
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-walkthrough-text {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 7px !important;
  box-sizing: border-box !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects select {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  background: rgba(4, 7, 6, .78) !important;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 86%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 13%, transparent) !important;
  font-size: 12px !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-icon-action {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--amber, #c77a4b) 42%, transparent) !important;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 78%, transparent) !important;
  background: color-mix(in srgb, var(--amber, #c77a4b) 8%, transparent) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-icon-action svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-actions {
  min-width: 0 !important;
  display: flex !important;
  align-items: end !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-walkthrough-text {
  width: auto !important;
  min-width: 132px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .response-meta .time {
  align-self: center !important;
  justify-self: end !important;
  white-space: nowrap !important;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 34%, transparent) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .response-content {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 12px 0 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-pair {
  min-width: 0 !important;
  display: grid !important;
  gap: 16px !important;
  align-content: start !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-message,
body .stage > section.view.focus-view.is-active[data-view="focus"] .message {
  width: fit-content !important;
  max-width: min(920px, 88%) !important;
  min-width: min(280px, 100%) !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid color-mix(in srgb, var(--amber, #c77a4b) 25%, transparent) !important;
  border-left: 2px solid color-mix(in srgb, var(--amber, #c77a4b) 62%, transparent) !important;
  border-right: 1px solid color-mix(in srgb, var(--amber, #c77a4b) 25%, transparent) !important;
  border-radius: 12px !important;
  background: rgba(8, 9, 8, .34) !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-message.user,
body .stage > section.view.focus-view.is-active[data-view="focus"] .message.user {
  justify-self: end !important;
  margin-left: auto !important;
  border-left: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 16%, transparent) !important;
  border-right: 2px solid color-mix(in srgb, var(--cream, #e4d6bd) 36%, transparent) !important;
  text-align: right !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .message-name {
  margin: 0 0 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .message-text {
  font-size: 14px !important;
  line-height: 1.62 !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-console {
  width: 100% !important;
  min-height: 0 !important;
  align-self: end !important;
  margin: 0 !important;
  position: relative !important;
  bottom: auto !important;
  z-index: 3 !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-console .terminal {
  min-height: 58px !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .attachment-tray,
body .stage > section.view.page-view.is-active[data-view="messenger"] .attachment-tray {
  max-height: 96px !important;
  overflow-y: auto !important;
  margin: 8px 0 !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: calc(var(--topbar-height, 58px) + 14px) clamp(20px, 2.6vw, 42px) calc(var(--atticus-footer-safe) + 12px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .page-header {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 10%, transparent) !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .page-title {
  margin: 0 !important;
  line-height: .95 !important;
  font-size: clamp(34px, 4vw, 62px) !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .page-subtitle {
  margin-top: 8px !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .page-actions {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .messenger-layout {
  grid-row: auto !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 370px) minmax(0, 1fr) !important;
  gap: 14px !important;
  overflow: hidden !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-list,
body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-main {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: rgba(10, 13, 11, .82) !important;
  border: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 13%, transparent) !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-list {
  padding: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-list-heading {
  position: relative !important;
  top: auto !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  margin: 0 0 4px !important;
  padding: 12px 14px !important;
  border: 1px solid color-mix(in srgb, var(--amber, #c77a4b) 34%, transparent) !important;
  border-radius: 9px !important;
  background: rgba(2, 6, 5, .62) !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 118px !important;
  height: auto !important;
  padding: 14px 14px 40px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "avatar title date"
    "preview preview preview"
    "workspace workspace workspace" !important;
  column-gap: 12px !important;
  row-gap: 8px !important;
  align-items: start !important;
  text-align: left !important;
  border: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 10%, transparent) !important;
  border-radius: 10px !important;
  background: rgba(15, 19, 16, .72) !important;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 72%, transparent) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card.is-active .thread-button {
  border-color: color-mix(in srgb, var(--amber, #c77a4b) 72%, transparent) !important;
  background: color-mix(in srgb, var(--amber, #c77a4b) 8%, rgba(15, 19, 16, .78)) !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-button .avatar {
  grid-area: avatar !important;
  width: 36px !important;
  height: 36px !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-name {
  grid-area: title !important;
  min-width: 0 !important;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 82%, transparent) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-time {
  grid-area: date !important;
  justify-self: end !important;
  max-width: 76px !important;
  white-space: nowrap !important;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 45%, transparent) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-preview {
  grid-area: preview !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 54%, transparent) !important;
  font-size: 12px !important;
  line-height: 1.38 !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card-foot {
  grid-area: workspace !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-workspace {
  margin: 0 !important;
  max-width: calc(100% - 76px) !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-rename {
  position: absolute !important;
  right: 12px !important;
  bottom: 10px !important;
  height: 24px !important;
  padding: 0 9px !important;
  border: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 16%, transparent) !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.24) !important;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 62%, transparent) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-main {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-head {
  min-height: 0 !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 10%, transparent) !important;
  overflow: visible !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-head > div:first-child {
  min-width: 0 !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-head-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-head-actions .action {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-body {
  min-height: 0 !important;
  padding: 22px 26px !important;
  gap: 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-body::before {
  content: none !important;
  display: none !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .message {
  width: fit-content !important;
  max-width: min(900px, 86%) !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid color-mix(in srgb, var(--amber, #c77a4b) 24%, transparent) !important;
  border-left: 2px solid color-mix(in srgb, var(--amber, #c77a4b) 62%, transparent) !important;
  border-radius: 12px !important;
  background: rgba(7, 10, 8, .42) !important;
  box-sizing: border-box !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .message.user {
  align-self: flex-end !important;
  margin-left: auto !important;
  border-left: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 16%, transparent) !important;
  border-right: 2px solid color-mix(in srgb, var(--cream, #e4d6bd) 34%, transparent) !important;
  text-align: right !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-compose {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 16px 14px !important;
  border-top: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 10%, transparent) !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-compose .terminal {
  min-height: 54px !important;
}

.code-card {
  width: 100%;
  max-width: 100%;
  margin: 12px 0;
  border: 1px solid color-mix(in srgb, var(--amber, #c77a4b) 24%, transparent);
  border-radius: 10px;
  background: rgba(0,0,0,.42);
  overflow: hidden;
}

.code-card-head {
  min-height: 34px;
  padding: 0 10px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 10%, transparent);
  color: var(--amber, #c77a4b);
  font-family: var(--sans, system-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.code-copy-button {
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 16%, transparent);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: color-mix(in srgb, var(--cream, #e4d6bd) 72%, transparent);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.code-card pre {
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
  max-height: min(54vh, 560px);
  color: color-mix(in srgb, var(--cream, #e4d6bd) 86%, transparent);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre;
}

.code-card code {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
}

.speed-read-excerpt {
  display: none;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid color-mix(in srgb, var(--amber, #c77a4b) 88%, transparent);
  background: color-mix(in srgb, var(--amber, #c77a4b) 12%, transparent);
  color: color-mix(in srgb, var(--cream, #e4d6bd) 90%, transparent);
  font-size: 14px;
  line-height: 1.55;
}

.thread-body.is-speed-read .speed-read-excerpt {
  display: block;
}

.thread-body.is-speed-read .message-text {
  opacity: .58;
}

.thread-body.is-speed-read .message:hover .message-text,
.thread-body.is-speed-read .message:focus-within .message-text {
  opacity: 1;
}

.message-image {
  max-width: min(760px, 100%) !important;
}

.message-image img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(58vh, 540px) !important;
  object-fit: contain !important;
}

@media (max-width: 1100px) {
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects {
    grid-template-columns: minmax(180px, 1fr) 38px 38px minmax(220px, 1fr) 38px 38px !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-actions {
    grid-column: 1 / -1 !important;
    justify-content: flex-end !important;
  }
  body .stage > section.view.page-view.is-active[data-view="messenger"] .messenger-layout {
    grid-template-columns: minmax(270px, 330px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 820px) {
  body .stage > section.view.focus-view.is-active[data-view="focus"],
  body .stage > section.view.page-view.is-active[data-view="messenger"] {
    padding: calc(var(--topbar-height, 58px) + 10px) 14px calc(var(--mobile-nav-height, 68px) + var(--safe-bottom, 0px) + 18px) !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-stage {
    gap: 10px !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-logo {
    font-size: clamp(28px, 9vw, 42px) !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .response {
    padding: 14px !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .response-meta.focus-context-bar {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects {
    grid-template-columns: minmax(0, 1fr) 38px 38px !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-conversation-field {
    grid-column: 1 / 2 !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-actions {
    grid-column: 1 / -1 !important;
    justify-content: stretch !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-actions .focus-icon-action,
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-actions .focus-walkthrough-text {
    flex: 1 1 0 !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .response-meta .time {
    display: none !important;
  }
  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-message,
  body .stage > section.view.focus-view.is-active[data-view="focus"] .message,
  body .stage > section.view.page-view.is-active[data-view="messenger"] .message {
    max-width: 100% !important;
    width: 100% !important;
  }
  body .stage > section.view.page-view.is-active[data-view="messenger"] .page-header {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  body .stage > section.view.page-view.is-active[data-view="messenger"] .messenger-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-list {
    max-height: 34vh !important;
  }
  body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-main {
    min-height: 0 !important;
  }
  body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-head-actions {
    justify-content: stretch !important;
  }
  body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-head-actions .action {
    flex: 1 1 auto !important;
  }
  body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-body {
    padding: 16px !important;
  }
}

.code-copy-button svg {
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
}


/* v6.5.27 permanent Focus/Messenger geometry
   Preserve the stable app code, but make the last-loaded layout layer definitive:
   - every active page sits between topbar and footer
   - Messenger starts at the top
   - Focus behaves like Messenger with a compact control header and the latest message pair
   - Focus controls are an exact 8-column desktop grid
*/

:root {
  --atticus-footer-safe: max(var(--dynamic-footer-height, 72px), 76px);
  --atticus-top-safe: var(--topbar-height, 58px);
  --atticus-stage-x: clamp(22px, 2.6vw, 44px);
  --atticus-stage-y: clamp(12px, 1.6vh, 18px);
}

/* Page geometry: stop views from sitting low or hiding under the footer. */
body .stage > section.view.page-view.is-active,
body .stage > section.view.master-console-view.is-active,
body .stage > section.view.focus-view.is-active[data-view="focus"] {
  position: absolute !important;
  inset: var(--atticus-top-safe) 0 var(--atticus-footer-safe) 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: var(--atticus-stage-y) var(--atticus-stage-x) 12px !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* Shared page layout gets the Apps-page feel: header high, content below, no dead top air. */
body .stage > section.view.page-view.is-active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
}

body .stage > section.view.page-view.is-active > .page-header {
  grid-row: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  align-self: start !important;
  align-items: flex-end !important;
}

body .stage > section.view.page-view.is-active > .messenger-layout,
body .stage > section.view.page-view.is-active > .tools-layout,
body .stage > section.view.page-view.is-active > .files-layout,
body .stage > section.view.page-view.is-active > .contacts-layout,
body .stage > section.view.page-view.is-active > .settings-layout,
body .stage > section.view.page-view.is-active > .dashboard-layout-live,
body .stage > section.view.page-view.is-active > .atticus-dashboard {
  grid-row: auto !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding-top: 0 !important;
  overflow: hidden !important;
}

/* Messenger: preserve the fixed cards, but remove footer overlap and header gap. */
body .stage > section.view.page-view.is-active[data-view="messenger"] .messenger-layout {
  display: grid !important;
  grid-template-columns: minmax(310px, 370px) minmax(0, 1fr) !important;
  gap: 14px !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-list,
body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-main {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

/* Speed Read uses the yellow/amber family and shows a clear active state. */
#speedReadButton,
body .stage > section.view.page-view.is-active[data-view="messenger"] #speedReadButton {
  border-color: color-mix(in srgb, var(--amber, #d9a34f) 50%, transparent) !important;
  color: color-mix(in srgb, var(--amber, #d9a34f) 92%, var(--cream, #e4d6bd) 8%) !important;
  background: color-mix(in srgb, var(--amber, #d9a34f) 8%, transparent) !important;
}

#speedReadButton[aria-pressed="true"],
body .stage > section.view.page-view.is-active[data-view="messenger"] #speedReadButton[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--amber, #d9a34f) 82%, transparent) !important;
  color: #120e08 !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--amber, #d9a34f) 86%, var(--cream, #e4d6bd) 14%),
    color-mix(in srgb, var(--amber, #d9a34f) 62%, #7a4a24 38%)
  ) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber, #d9a34f) 34%, transparent), 0 10px 30px rgba(214, 154, 72, .18) !important;
}

.speed-read-excerpt {
  border-left-color: color-mix(in srgb, var(--amber, #d9a34f) 88%, transparent) !important;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--amber, #d9a34f) 18%, transparent),
    color-mix(in srgb, var(--amber, #d9a34f) 6%, transparent)
  ) !important;
}

/* Conversation list cards: no overlap. Card content is normal flow, rename sits below/right. */
body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  border: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 10%, transparent) !important;
  border-radius: 12px !important;
  background: rgba(15, 19, 16, .72) !important;
  overflow: hidden !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card.is-active {
  border-color: color-mix(in srgb, var(--amber, #c77a4b) 72%, transparent) !important;
  background: color-mix(in srgb, var(--amber, #c77a4b) 8%, rgba(15, 19, 16, .78)) !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-button {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px 14px 8px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "avatar title date"
    "preview preview preview"
    "workspace workspace workspace" !important;
  column-gap: 12px !important;
  row-gap: 8px !important;
  align-items: start !important;
  overflow: visible !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-name {
  min-width: 0 !important;
  padding-right: 8px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-preview {
  -webkit-line-clamp: 3 !important;
  max-height: none !important;
  padding-right: 0 !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card-foot {
  min-width: 0 !important;
  padding-right: 0 !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-rename {
  position: static !important;
  justify-self: end !important;
  align-self: center !important;
  width: auto !important;
  min-width: 72px !important;
  height: 26px !important;
  margin: 0 12px 12px auto !important;
  padding: 0 10px !important;
  z-index: 1 !important;
}

/* Focus rebuild: same language as Messenger, but only the latest request/answer pair. */
body .stage > section.view.focus-view.is-active[data-view="focus"] {
  display: block !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-stage {
  width: min(100%, 1420px) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-header {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: start !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-kicker {
  margin: 0 0 2px !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-logo {
  margin: 0 !important;
  font-size: clamp(42px, 4.9vw, 70px) !important;
  line-height: .9 !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .response {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 18px 24px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 14px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

/* Exact desktop row:
   workspace | edit | new | conversation | edit | new | fullscreen | walkthrough */
body .stage > section.view.focus-view.is-active[data-view="focus"] .response-meta.focus-context-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 40px !important;
  padding: 0 0 12px !important;
  margin: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 10%, transparent) !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects {
  display: grid !important;
  grid-template-columns:
    minmax(260px, 1.05fr)
    38px
    38px
    minmax(260px, 1fr)
    38px
    38px
    42px
    minmax(132px, 156px) !important;
  grid-template-rows: 38px !important;
  grid-auto-flow: column !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects > label {
  display: block !important;
  height: 38px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects > label > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects select {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 32px 0 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  line-height: 38px !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-actions,
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-actions.is-production-focus-actions {
  display: contents !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-icon-action,
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-action-button,
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-actions .focus-action-button {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  line-height: 1 !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-icon-action svg,
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-action-button svg {
  width: 16px !important;
  height: 16px !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] #focusWalkthroughButton {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  line-height: 38px !important;
  letter-spacing: .11em !important;
  white-space: nowrap !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] #focusResponseTime {
  justify-self: end !important;
  align-self: center !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding-left: 8px !important;
  font-size: 11px !important;
  line-height: 38px !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .response-content {
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 4px 10px 4px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-pair,
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-slice {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-content: stretch !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-message,
body .stage > section.view.focus-view.is-active[data-view="focus"] .message {
  width: fit-content !important;
  min-width: min(280px, 100%) !important;
  max-width: min(900px, 86%) !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid color-mix(in srgb, var(--amber, #c77a4b) 24%, transparent) !important;
  border-left: 2px solid color-mix(in srgb, var(--amber, #c77a4b) 62%, transparent) !important;
  border-radius: 12px !important;
  background: rgba(7, 10, 8, .42) !important;
  text-align: left !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-message.user,
body .stage > section.view.focus-view.is-active[data-view="focus"] .message.user {
  align-self: flex-end !important;
  margin-left: auto !important;
  border-left: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 16%, transparent) !important;
  border-right: 2px solid color-mix(in srgb, var(--cream, #e4d6bd) 34%, transparent) !important;
  text-align: right !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .message-name {
  margin: 0 0 9px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .message-text {
  font-size: 14px !important;
  line-height: 1.62 !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .message-image {
  max-width: min(760px, 100%) !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .message-image img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(48vh, 480px) !important;
  object-fit: contain !important;
}

/* Focus composer is the same anchored bottom system as Messenger compose. */
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-console {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-self: end !important;
  position: relative !important;
  z-index: 3 !important;
  padding: 12px 16px 14px !important;
  border-radius: 12px !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-console .composer-actions {
  min-height: 28px !important;
  margin-bottom: 8px !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-console .terminal {
  min-height: 54px !important;
  align-items: center !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-console textarea#focusInput {
  min-height: 28px !important;
  line-height: 1.45 !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

/* Responsive: only collapse the 8 columns when there is physically not enough width. */
@media (max-width: 1180px) {
  body .stage > section.view.focus-view.is-active[data-view="focus"] .response-meta.focus-context-bar {
    grid-template-columns: 1fr !important;
  }

  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects {
    grid-template-columns:
      minmax(190px, 1fr)
      38px
      38px
      minmax(190px, 1fr)
      38px
      38px !important;
    grid-template-rows: 38px 38px !important;
  }

  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-actions {
    display: flex !important;
    grid-column: 1 / -1 !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  body .stage > section.view.focus-view.is-active[data-view="focus"] #focusWalkthroughButton {
    width: 156px !important;
    min-width: 156px !important;
  }
}

@media (max-width: 820px) {
  body .stage > section.view.page-view.is-active,
  body .stage > section.view.focus-view.is-active[data-view="focus"] {
    inset: var(--atticus-top-safe) 0 calc(var(--mobile-nav-height, 68px) + var(--safe-bottom, 0px) + 8px) 0 !important;
    padding: 10px 12px !important;
  }

  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-logo {
    font-size: clamp(30px, 9vw, 44px) !important;
  }

  body .stage > section.view.focus-view.is-active[data-view="focus"] .response {
    padding: 14px !important;
  }

  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects {
    grid-template-columns: minmax(0, 1fr) 38px 38px !important;
    grid-template-rows: 38px 38px 38px !important;
  }

  body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-thread-actions {
    grid-column: 1 / -1 !important;
    justify-content: stretch !important;
  }

  body .stage > section.view.focus-view.is-active[data-view="focus"] #focusWalkthroughButton {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 132px !important;
  }

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