/*
  AtticusBeta v6.9.15
  Main app dark-surface refinement.
  Visual styling only. No layout, geometry, routing, or interaction changes.

  Intent:
  - preserve the light landing-page canvas
  - restore the animated dots/lines as a visible background layer
  - use recurring charcoal/green technical surfaces like the landing diagrams
  - reserve cream for readable content and orange/sage for controlled accents
*/

:root {
  --ab15-paper: #DDD7CC;
  --ab15-paper-hi: #EEE9E0;
  --ab15-paper-low: #D1CABF;
  --ab15-charcoal: #252B27;
  --ab15-charcoal-2: #1C231F;
  --ab15-charcoal-3: #111713;
  --ab15-panel: #202722;
  --ab15-panel-hi: #2B312D;
  --ab15-panel-soft: #333833;
  --ab15-cream: #E4D6BD;
  --ab15-cream-hi: #F0E8DC;
  --ab15-sage: #A5B5A5;
  --ab15-sage-deep: #778B7D;
  --ab15-orange: #C77A4B;
  --ab15-orange-deep: #A96138;
  --ab15-ink: #27312C;
  --ab15-dark-copy: rgba(228,214,189,.72);
  --ab15-dark-copy-soft: rgba(228,214,189,.50);
  --ab15-dark-line: rgba(228,214,189,.13);
  --ab15-dark-line-soft: rgba(228,214,189,.075);
  --ab15-paper-line: rgba(39,49,44,.15);
  --mesh-neutral: #4E6257;
}

/* ---------- Background / animated network ---------- */
body {
  background: var(--ab15-charcoal-3) !important;
}

.app {
  background:
    radial-gradient(1180px 760px at 82% 8%, rgba(119,139,125,.16), transparent 66%),
    radial-gradient(900px 680px at 8% 90%, rgba(169,97,56,.075), transparent 70%),
    linear-gradient(180deg, var(--ab15-paper-hi) 0%, var(--ab15-paper) 52%, var(--ab15-paper-low) 100%) !important;
}

.app::before {
  background:
    linear-gradient(90deg, rgba(37,43,39,.06), transparent 17%, transparent 83%, rgba(37,43,39,.075)),
    radial-gradient(circle at center, transparent 0%, transparent 70%, rgba(37,43,39,.075) 100%) !important;
}

.app::after {
  opacity: .014 !important;
  background-image: repeating-linear-gradient(0deg, rgba(37,43,39,.22) 0, rgba(37,43,39,.22) 1px, transparent 1px, transparent 6px) !important;
  mix-blend-mode: multiply !important;
}

.stage {
  background:
    radial-gradient(980px 620px at 72% 12%, rgba(119,139,125,.14), transparent 67%),
    radial-gradient(760px 560px at 24% 88%, rgba(199,122,75,.065), transparent 69%),
    linear-gradient(180deg, rgba(238,233,224,.92) 0%, rgba(221,215,204,.94) 58%, rgba(207,200,189,.95) 100%) !important;
}

.stage::before {
  background:
    linear-gradient(90deg, rgba(37,43,39,.05), transparent 13%, transparent 87%, rgba(37,43,39,.06)),
    radial-gradient(circle at center, transparent 0%, transparent 72%, rgba(37,43,39,.06) 100%) !important;
}

/* Restore the network as a true visible layer. The JS animation itself is untouched. */
.mesh-canvas {
  opacity: var(--mesh-opacity) !important;
  mix-blend-mode: normal !important;
  filter: saturate(.92) contrast(1.16) brightness(.82) !important;
}

/* ---------- Fixed dark framing ---------- */
.rail,
.topbar,
.mobile-nav,
.core-legal-footer,
.tool-frame-head {
  background:
    radial-gradient(520px 180px at 75% 0%, rgba(199,122,75,.06), transparent 70%),
    linear-gradient(180deg, var(--ab15-charcoal), var(--ab15-charcoal-3)) !important;
  border-color: var(--ab15-dark-line-soft) !important;
  color: var(--ab15-dark-copy) !important;
}

.rail {
  box-shadow: 14px 0 46px rgba(17,23,19,.18) !important;
}

.topbar {
  box-shadow: 0 10px 28px rgba(17,23,19,.13) !important;
}

/* ---------- Page headings remain on the light canvas ---------- */
.page-title,
.dashboard-title,
.focus-title,
.settings-title,
.app-library-title {
  color: var(--ab15-ink) !important;
}

.page-subtitle,
.focus-subtitle {
  color: #667168 !important;
}

.page-header {
  border-bottom-color: rgba(39,49,44,.15) !important;
}

/* ---------- Major working surfaces: dark, like landing technical diagrams ---------- */
.panel,
.thread-list,
.thread-main,
.response,
.settings-card,
.abdash-panel,
.personal-panel,
.personal-hero,
.system-card,
.library-card,
.file-folder,
.contacts-panel,
.auth-panel,
.modal-panel {
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(165,181,165,.055), transparent 72%),
    linear-gradient(180deg, rgba(43,49,45,.985), rgba(28,35,31,.99)) !important;
  border-color: var(--ab15-dark-line) !important;
  color: var(--ab15-dark-copy) !important;
  box-shadow: 0 20px 50px rgba(17,23,19,.18) !important;
}

/* Dashboard / utility large containers should repeat the same dark technical surface. */
.personal-console,
.dashboard-layout,
.file-explorer-panel,
.settings-layout {
  color: var(--ab15-dark-copy) !important;
}

.personal-hero,
.dashboard-hero {
  background:
    radial-gradient(520px 240px at 10% 0%, rgba(165,181,165,.075), transparent 70%),
    radial-gradient(480px 220px at 94% 100%, rgba(199,122,75,.055), transparent 72%),
    linear-gradient(180deg, var(--ab15-panel-hi), var(--ab15-panel)) !important;
}

/* Titles/copy inside dark surfaces. */
.panel .panel-title,
.panel .settings-card-title,
.panel .thread-title,
.thread-list .thread-title,
.thread-main .thread-title,
.settings-card .settings-card-title,
.settings-card .setting-title,
.personal-panel .panel-title,
.personal-hero .personal-title,
.system-card .system-card-title,
.library-card .library-title,
.file-folder .file-folder-title,
.contacts-panel .panel-title,
.modal-panel .modal-title,
.auth-panel .auth-title {
  color: var(--ab15-cream) !important;
}

.panel .panel-subtitle,
.panel .settings-copy,
.panel .setting-copy,
.thread-list .thread-preview,
.thread-main .thread-preview,
.settings-card .settings-copy,
.settings-card .setting-copy,
.personal-panel .project-copy,
.personal-hero .personal-copy,
.system-card .system-card-copy,
.library-card .library-copy,
.contacts-panel .contact-copy,
.modal-panel .modal-copy,
.auth-panel .auth-copy,
.auth-panel .auth-subtitle {
  color: var(--ab15-dark-copy-soft) !important;
}

/* ---------- Nested cards: dark-on-dark, not bright stacks ---------- */
.personal-snapshot-card,
.personal-chart-card,
.personal-radar-row,
.personal-app-row,
.personal-workspace-breakdown-row,
.dashboard-overview-card,
.dashboard-continue-card,
.dashboard-notification-card,
.dashboard-library-card,
.conversation-card,
.thread-row,
.settings-list-row,
.profile-setup-card,
.file-card,
.file-row,
.contact-card,
.contact-row,
.project-row,
.notification-row,
.usage-row,
.setting-row,
.settings-plan-option,
.walkthrough-card {
  background:
    linear-gradient(180deg, rgba(51,56,51,.92), rgba(31,38,33,.96)) !important;
  border-color: rgba(228,214,189,.095) !important;
  color: var(--ab15-dark-copy) !important;
  box-shadow: 0 8px 22px rgba(12,17,14,.12) !important;
}

.thread-row:hover,
.conversation-card:hover,
.settings-list-row:hover,
.file-row:hover,
.contact-row:hover {
  background: linear-gradient(180deg, rgba(58,62,57,.96), rgba(34,41,36,.98)) !important;
  border-color: rgba(199,122,75,.28) !important;
}

.thread-row.is-active,
.conversation-card.is-active,
.project-row.is-active {
  background:
    linear-gradient(90deg, rgba(199,122,75,.16), rgba(51,56,51,.94) 64%) !important;
  border-color: rgba(199,122,75,.50) !important;
}

.thread-row .thread-title,
.conversation-card .conversation-title,
.file-row .file-title,
.contact-row .contact-title,
.project-row .project-title,
.setting-row .setting-title {
  color: rgba(228,214,189,.88) !important;
}

.thread-row .thread-preview,
.conversation-card .conversation-copy,
.file-row .file-copy,
.contact-row .contact-copy,
.project-row .project-copy,
.setting-row .setting-copy {
  color: rgba(228,214,189,.48) !important;
}

/* ---------- Messenger: dark shell + calm cream reading surfaces ---------- */
.thread-head,
.thread-toolbar,
.thread-list-head,
.focus-context-bar {
  background: linear-gradient(180deg, rgba(57,61,56,.98), rgba(45,50,46,.98)) !important;
  border-color: rgba(228,214,189,.11) !important;
  color: var(--ab15-dark-copy) !important;
}

.thread-body {
  background:
    radial-gradient(620px 360px at 82% 10%, rgba(165,181,165,.035), transparent 72%),
    linear-gradient(180deg, #242B26, #1A211D) !important;
  color: var(--ab15-dark-copy) !important;
}

.response-content {
  background:
    radial-gradient(620px 320px at 90% 0%, rgba(165,181,165,.075), transparent 74%),
    linear-gradient(180deg, var(--ab15-cream-hi), #E5DED3) !important;
  border-color: rgba(39,49,44,.12) !important;
  color: var(--ab15-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26) !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .response-content .focus-thread-slice .message:not(.user),
body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-body .message:not(.user),
.message:not(.user) {
  background: linear-gradient(180deg, #EEE9E0, #E3DCD1) !important;
  border-color: rgba(39,49,44,.13) !important;
  color: var(--ab15-ink) !important;
  box-shadow: 0 9px 24px rgba(11,15,13,.13) !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .response-content .focus-thread-slice .message.user,
body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-body .message.user,
.message.user {
  background:
    linear-gradient(145deg, rgba(91,67,49,.96), rgba(55,45,37,.98)) !important;
  border-color: rgba(199,122,75,.40) !important;
  color: rgba(244,232,214,.92) !important;
  box-shadow: 0 9px 24px rgba(11,15,13,.16) !important;
}

.message:not(.user) .message-meta,
.message:not(.user) .message-author,
.message:not(.user) .message-time {
  color: #69736C !important;
}

.message.user .message-meta,
.message.user .message-author,
.message.user .message-time {
  color: rgba(222,156,111,.88) !important;
}

.focus-console,
.thread-compose,
.terminal {
  background:
    radial-gradient(520px 150px at 72% 0%, rgba(199,122,75,.065), transparent 68%),
    linear-gradient(180deg, #1E2621, #101612) !important;
  border-color: rgba(228,214,189,.14) !important;
  color: var(--ab15-cream) !important;
  box-shadow: 0 16px 36px rgba(12,17,14,.17) !important;
}

/* ---------- Inputs: dark inside technical panels, restrained paper elsewhere ---------- */
.panel input,
.panel select,
.panel textarea,
.settings-card input,
.settings-card select,
.settings-card textarea,
.app-filter-bar input,
.app-filter-bar select,
.focus-context-selects select,
.file-search,
.contact-search,
.search-input {
  background: rgba(10,15,12,.30) !important;
  border-color: rgba(228,214,189,.13) !important;
  color: rgba(228,214,189,.86) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.panel input::placeholder,
.panel textarea::placeholder,
.settings-card input::placeholder,
.settings-card textarea::placeholder {
  color: rgba(228,214,189,.34) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(199,122,75,.48) !important;
  box-shadow: 0 0 0 3px rgba(199,122,75,.075) !important;
}

/* ---------- Buttons: mostly charcoal/outline. Orange and sage are accents, not floods. ---------- */
.action,
.settings-small-button,
.settings-button,
.settings-pill,
.app-card-action,
.install-btn,
.modal-btn,
.modal-cancel,
.walkthrough-button,
.file-action,
.contact-action,
.thread-action,
.app-library-action {
  background: rgba(17,23,19,.30) !important;
  border-color: rgba(228,214,189,.17) !important;
  color: rgba(228,214,189,.76) !important;
  box-shadow: none !important;
}

.action:hover,
.settings-small-button:hover,
.settings-button:hover,
.app-card-action:hover,
.install-btn:hover,
.modal-btn:hover,
.modal-cancel:hover,
.walkthrough-button:hover,
.file-action:hover,
.contact-action:hover,
.thread-action:hover,
.app-library-action:hover {
  background: rgba(199,122,75,.11) !important;
  border-color: rgba(199,122,75,.40) !important;
  color: #E7C4A7 !important;
}

.action.primary,
.settings-primary-button,
.modal-action,
.app-card-action.primary,
.install-btn.primary,
button.primary {
  background: linear-gradient(180deg, #C77A4B, #A96138) !important;
  border-color: #C77A4B !important;
  color: #18130F !important;
  box-shadow: 0 7px 18px rgba(76,46,29,.18) !important;
}

.action.secondary,
.action-walkthrough,
[data-welcome-walkthrough] {
  background: linear-gradient(180deg, rgba(119,139,125,.30), rgba(67,83,72,.38)) !important;
  border-color: rgba(165,181,165,.45) !important;
  color: #DAE4D8 !important;
}

/* ---------- App Library: dark catalog, bright logo wells only ---------- */
[data-view="tools"] .panel {
  background:
    radial-gradient(520px 240px at 0% 0%, rgba(165,181,165,.055), transparent 72%),
    linear-gradient(180deg, #2B312D, #1C231F) !important;
}

[data-view="tools"] .app-filter-bar {
  background: rgba(10,15,12,.24) !important;
  border-color: rgba(228,214,189,.10) !important;
}

[data-view="tools"] .app-library-row {
  background: linear-gradient(180deg, rgba(53,58,53,.96), rgba(31,38,33,.98)) !important;
  border-color: rgba(228,214,189,.095) !important;
  box-shadow: 0 8px 22px rgba(12,17,14,.12) !important;
}

[data-view="tools"] .app-library-row:hover {
  background: linear-gradient(180deg, rgba(60,64,59,.98), rgba(36,43,38,.99)) !important;
  border-color: rgba(199,122,75,.30) !important;
}

[data-view="tools"] .my-app-icon,
[data-view="tools"] .app-library-icon {
  background: #F1EEE8 !important;
  border-color: rgba(228,214,189,.18) !important;
  box-shadow: 0 9px 22px rgba(10,14,12,.20) !important;
}

[data-view="tools"] .app-library-title { color: var(--ab15-cream) !important; }
[data-view="tools"] .app-library-subtitle { color: var(--ab15-sage) !important; }
[data-view="tools"] .app-library-description { color: var(--ab15-dark-copy-soft) !important; }
[data-view="tools"] .app-library-state,
[data-view="tools"] .app-library-price { color: #D58A5B !important; }
.app-filter-check { color: var(--ab15-dark-copy) !important; }

/* ---------- Welcome/load-in modal: dark, not a giant white card ---------- */
.modal,
.modal-backdrop,
.auth-backdrop,
.auth-overlay {
  background: rgba(12,17,14,.70) !important;
  backdrop-filter: blur(11px) !important;
}

.modal-panel,
.auth-panel {
  background:
    radial-gradient(700px 300px at 50% -10%, rgba(165,181,165,.075), transparent 72%),
    linear-gradient(180deg, #2A302C, #181F1B) !important;
  border-color: rgba(228,214,189,.16) !important;
  box-shadow: 0 28px 80px rgba(8,12,10,.34) !important;
}

.welcome-back-modal {
  color: var(--ab15-dark-copy) !important;
}

.welcome-back-logo {
  color: var(--ab15-cream) !important;
  text-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
}
.welcome-back-logo strong { color: var(--ab15-sage) !important; }
.welcome-back-logo em { color: var(--ab15-orange) !important; }
.welcome-back-lede { color: rgba(228,214,189,.56) !important; }

.welcome-back-grid section {
  background:
    linear-gradient(180deg, rgba(55,60,55,.88), rgba(31,38,33,.92)) !important;
  border-color: rgba(228,214,189,.105) !important;
  box-shadow: 0 8px 20px rgba(9,13,11,.12) !important;
}
.welcome-back-grid h3 { color: #D38453 !important; }
.welcome-back-grid li { color: rgba(228,214,189,.60) !important; }
.welcome-back-grid strong { color: rgba(228,214,189,.90) !important; }

#modalActions .modal-btn {
  background: rgba(11,16,13,.32) !important;
  border-color: rgba(228,214,189,.16) !important;
  color: rgba(228,214,189,.74) !important;
}
#modalActions .modal-btn.action-walkthrough {
  background: rgba(119,139,125,.20) !important;
  border-color: rgba(165,181,165,.42) !important;
  color: #D6E0D4 !important;
}
#modalActions [data-modal-close] {
  background: linear-gradient(180deg, #C77A4B, #A96138) !important;
  border-color: #C77A4B !important;
  color: #18130F !important;
}

/* ---------- Status elements: muted, not neon ---------- */
.settings-pill,
.status-pill,
.tag,
.badge {
  background: rgba(165,181,165,.075) !important;
  border-color: rgba(165,181,165,.20) !important;
  color: #B8C7B7 !important;
}

.usage-track,
.progress-track {
  background: rgba(228,214,189,.08) !important;
}
.usage-fill,
.progress-fill {
  background: linear-gradient(90deg, #738879, #B86B42) !important;
}

/* ---------- System admin follows the same major-surface rule ---------- */
.master-console-shell,
.master-card,
.master-panel,
.master-rollup-card,
.master-command-card,
.master-action-card,
.master-brief-card,
.master-priority-card,
.master-radar-card,
.master-analytics-chart-card,
.master-sales-clean-card,
.master-sales-section-card,
.master-email-preview-card,
.master-email-body-card,
.master-modal-card {
  background: linear-gradient(180deg, #2B312D, #1C231F) !important;
  border-color: rgba(228,214,189,.11) !important;
  color: var(--ab15-dark-copy) !important;
  box-shadow: 0 12px 28px rgba(12,17,14,.14) !important;
}

.master-console-subnav {
  background: linear-gradient(180deg, #202722, #111713) !important;
  border-color: rgba(228,214,189,.10) !important;
}

/* ---------- Scrollbars ---------- */
.scroll-area,
.thread-list,
.thread-body,
.response-content,
.recent-list {
  scrollbar-color: rgba(199,122,75,.42) transparent !important;
}
.scroll-area::-webkit-scrollbar-thumb,
.thread-list::-webkit-scrollbar-thumb,
.thread-body::-webkit-scrollbar-thumb,
.response-content::-webkit-scrollbar-thumb {
  background: rgba(199,122,75,.34) !important;
}

@media (max-width: 780px) {
  .stage {
    background:
      radial-gradient(620px 420px at 50% 12%, rgba(119,139,125,.13), transparent 68%),
      linear-gradient(180deg, rgba(235,230,221,.94) 0%, rgba(209,202,191,.96) 100%) !important;
  }
}

/* Keep the boot/loading transition in the same restrained dark family. */
.app.is-boot-loading::before {
  background:
    radial-gradient(circle at 50% 44%, rgba(165,181,165,.10), transparent 30%),
    rgba(17,23,19,.78) !important;
}

.boot-loader-card,
.app.is-boot-loading::after {
  background: linear-gradient(180deg, #2A302C, #151B18) !important;
  border-color: rgba(199,122,75,.30) !important;
  color: var(--ab15-cream) !important;
  box-shadow: 0 24px 70px rgba(8,12,10,.34) !important;
}

.topbar .top-link,
.topbar .top-link-button,
.topbar > span {
  color: rgba(228,214,189,.64) !important;
}
.topbar .top-link:hover,
.topbar .top-link-button:hover {
  color: var(--ab15-cream) !important;
}