/*
  AtticusBeta v6.9.14
  Main app visual palette aligned with the public landing page.
  Styling only: no layout, positioning, visibility, or interaction rules live here.
*/

:root {
  --ab-paper: #E9E3D8;
  --ab-paper-hi: #F4EFE7;
  --ab-paper-card: #F7F2E9;
  --ab-paper-deep: #DDD5C8;
  --ab-dark: #252D29;
  --ab-dark-2: #1B221E;
  --ab-dark-3: #111713;
  --ab-ink: #27312C;
  --ab-copy: #5D675F;
  --ab-copy-soft: #788078;
  --ab-sage: #A5B5A5;
  --ab-sage-deep: #708777;
  --ab-orange: #C77A4B;
  --ab-orange-deep: #A85F36;
  --ab-cream: #E4D6BD;
  --ab-red: #B65B4B;
  --ab-green: #2E8B63;
  --ab-line: rgba(39,49,44,.14);
  --ab-line-soft: rgba(39,49,44,.085);
  --ab-dark-line: rgba(228,214,189,.13);
  --ab-shadow: 0 18px 48px rgba(42,51,46,.10);
  --ab-shadow-small: 0 8px 24px rgba(42,51,46,.08);
  --ab-dark-shadow: 0 20px 54px rgba(20,27,23,.22);
  --mesh-neutral: #657269;
}

html { color-scheme: light; }
body { background: var(--ab-paper); color: var(--ab-ink); }

/* Application canvas: light paper, same sage/orange atmosphere as landing. */
.app {
  background:
    radial-gradient(1050px 680px at 82% 8%, rgba(165,181,165,.19), transparent 67%),
    radial-gradient(800px 620px at 8% 82%, rgba(199,122,75,.085), transparent 70%),
    linear-gradient(180deg, var(--ab-paper-hi) 0%, var(--ab-paper) 48%, #E5DED2 100%) !important;
  color: var(--ab-ink);
}
.app::before {
  background:
    linear-gradient(90deg, rgba(39,49,44,.035), transparent 16%, transparent 84%, rgba(39,49,44,.035)),
    radial-gradient(circle at center, transparent 0%, transparent 72%, rgba(39,49,44,.045) 100%) !important;
}
.app::after {
  opacity: .012 !important;
  background-image: repeating-linear-gradient(0deg, rgba(39,49,44,.16) 0, rgba(39,49,44,.16) 1px, transparent 1px, transparent 6px) !important;
  mix-blend-mode: multiply !important;
}

.stage {
  background:
    radial-gradient(900px 560px at 68% 14%, rgba(165,181,165,.16), transparent 68%),
    radial-gradient(740px 540px at 24% 84%, rgba(199,122,75,.07), transparent 70%),
    linear-gradient(180deg, #F1ECE3 0%, #EAE4D9 56%, #E5DED2 100%) !important;
}
.stage::before {
  background:
    linear-gradient(90deg, rgba(39,49,44,.03), transparent 13%, transparent 88%, rgba(39,49,44,.035)),
    radial-gradient(circle at center, transparent 0%, transparent 74%, rgba(39,49,44,.04) 100%) !important;
}
.mesh-canvas {
  mix-blend-mode: multiply !important;
  filter: saturate(.92) contrast(.92) brightness(.98) !important;
}

/* Dark framing elements mirror the landing masthead and technical panels. */
.rail {
  background:
    radial-gradient(320px 260px at 32% 0%, rgba(165,181,165,.075), transparent 72%),
    linear-gradient(180deg, var(--ab-dark-3), #0D1410 54%, #090D0B 100%) !important;
  border-right-color: var(--ab-dark-line) !important;
  box-shadow: 14px 0 42px rgba(30,38,33,.12) !important;
}
.brand { border-bottom-color: rgba(228,214,189,.07) !important; }
.brand-logo,
.rail .nav-button,
.rail .recent-title,
.rail .recent-time,
.rail .label,
.rail .logo-sub,
.rail .rail-footer,
.rail .rail-footer-copy,
.rail .recent-type { color: rgba(228,214,189,.60); }
.brand-logo .brace { color: var(--ab-cream) !important; }
.brand-logo .att { color: var(--ab-sage) !important; }
.brand-logo .bet { color: var(--ab-orange) !important; }
.rail .logo-sub,
.rail .label { color: rgba(228,214,189,.34) !important; }
.rail .nav { border-bottom-color: rgba(228,214,189,.07) !important; }
.rail .nav-button { color: rgba(228,214,189,.56) !important; }
.rail .nav-button:hover {
  color: var(--ab-cream) !important;
  background: rgba(255,255,255,.032) !important;
  border-color: rgba(228,214,189,.055) !important;
}
.rail .nav-button.is-active {
  color: var(--ab-cream) !important;
  background:
    linear-gradient(90deg, rgba(199,122,75,.17), rgba(165,181,165,.045) 74%, transparent),
    rgba(255,255,255,.025) !important;
  border-color: rgba(199,122,75,.23) !important;
}
.rail .nav-button.is-active::before { background: var(--ab-orange) !important; }
.rail .recent-row { border-bottom-color: rgba(228,214,189,.06) !important; }
.rail .recent-title { color: rgba(228,214,189,.70) !important; }
.rail .recent-time { color: rgba(228,214,189,.40) !important; }
.rail .recent-type { color: var(--ab-orange) !important; }
.rail .rail-footer { border-top-color: rgba(228,214,189,.07) !important; }
.rail .online,
.rail .dot { color: #62C894 !important; }

.topbar {
  background:
    radial-gradient(460px 120px at 78% 0%, rgba(199,122,75,.07), transparent 70%),
    linear-gradient(180deg, rgba(17,23,19,.98), rgba(27,34,30,.96)) !important;
  border-bottom-color: rgba(228,214,189,.10) !important;
  color: rgba(228,214,189,.62) !important;
  box-shadow: 0 8px 28px rgba(30,38,33,.08) !important;
}
.topbar .online { color: #62C894 !important; }
.topbar .top-link,
.topbar .top-link-button,
.topbar > span { color: rgba(228,214,189,.58) !important; }
.topbar .top-link:hover,
.topbar .top-link-button:hover { color: var(--ab-cream) !important; }
.top-install-button,
.logout-button {
  background: rgba(255,255,255,.025) !important;
  border-color: rgba(228,214,189,.15) !important;
  color: var(--ab-cream) !important;
  box-shadow: none !important;
}
.top-install-button:hover,
.logout-button:hover {
  background: rgba(199,122,75,.14) !important;
  border-color: rgba(199,122,75,.46) !important;
  color: #F4E9D5 !important;
}

/* Typography on paper surfaces. */
.page-title,
.panel-title,
.settings-card-title,
.settings-title,
.dashboard-title,
.thread-title,
.focus-title,
.app-library-title,
.app-empty-title { color: var(--ab-ink) !important; }
.page-subtitle,
.panel-subtitle,
.settings-copy,
.setting-copy,
.app-library-subtitle,
.app-library-description,
.app-empty-copy,
.thread-preview,
.project-copy,
.notification-copy,
.library-copy,
.system-card-copy { color: var(--ab-copy) !important; }
.focus-logo { color: var(--ab-ink) !important; text-shadow: none !important; }
.focus-logo .brace { color: var(--ab-ink) !important; }
.focus-logo .att { color: var(--ab-sage-deep) !important; }
.focus-logo .bet { color: var(--ab-orange-deep) !important; }
.focus-kicker,
.panel-kicker,
.settings-kicker { color: var(--ab-orange-deep) !important; }
.page-header { border-bottom-color: var(--ab-line-soft) !important; }

/* Shared paper cards and panels. */
.panel,
.response,
.thread-list,
.thread-main,
.settings-card,
.abdash-panel,
.personal-panel,
.personal-hero,
.system-card,
.library-card,
.file-folder,
.file-row,
.contact-row,
.contacts-panel,
.project-row,
.notification-row,
.usage-row,
.setting-row,
.settings-plan-option,
.app-library-row,
.walkthrough-card,
.auth-panel,
.modal-panel {
  background:
    radial-gradient(360px 180px at 100% 0%, rgba(165,181,165,.10), transparent 72%),
    linear-gradient(180deg, rgba(250,247,241,.97), rgba(241,235,224,.96)) !important;
  border-color: var(--ab-line) !important;
  color: var(--ab-ink) !important;
  box-shadow: var(--ab-shadow) !important;
}
.panel::before,
.settings-card::before,
.thread-list::before,
.thread-main::before { opacity: .20 !important; }

/* Small rows/cards should feel like the same paper system, not black boxes. */
.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,
.contact-card {
  background: rgba(255,255,255,.38) !important;
  border-color: var(--ab-line-soft) !important;
  color: var(--ab-ink) !important;
  box-shadow: var(--ab-shadow-small) !important;
}
.thread-row:hover,
.conversation-card:hover,
.settings-list-row:hover,
.file-row:hover,
.contact-row:hover {
  background: rgba(255,255,255,.58) !important;
  border-color: rgba(199,122,75,.24) !important;
}
.thread-row.is-active,
.conversation-card.is-active,
.project-row.is-active {
  background: linear-gradient(90deg, rgba(199,122,75,.14), rgba(255,255,255,.46)) !important;
  border-color: rgba(199,122,75,.48) !important;
}

/* Messenger: familiar light correspondence surface with restrained analysis accents. */
.thread-head,
.thread-toolbar,
.thread-list-head,
.response-meta,
.focus-context-bar {
  background: rgba(244,239,231,.78) !important;
  border-color: var(--ab-line-soft) !important;
  color: var(--ab-copy) !important;
}
.thread-body,
.response-content { color: var(--ab-ink) !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: rgba(250,248,243,.96) !important;
  border-color: rgba(112,135,119,.22) !important;
  color: var(--ab-ink) !important;
  box-shadow: 0 8px 22px rgba(42,51,46,.06) !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(199,122,75,.15), rgba(232,215,195,.78)) !important;
  border-color: rgba(199,122,75,.32) !important;
  color: var(--ab-ink) !important;
  box-shadow: 0 8px 22px rgba(86,59,39,.07) !important;
}
.message-meta,
.message-author,
.message-time { color: var(--ab-copy-soft) !important; }
.message.user .message-meta,
.message.user .message-author { color: var(--ab-orange-deep) !important; }

/* Composer and terminal stay dark as intentional technical surfaces, matching landing diagrams. */
.focus-console,
.thread-compose,
.terminal {
  background:
    radial-gradient(520px 150px at 72% 0%, rgba(199,122,75,.075), transparent 68%),
    linear-gradient(180deg, rgba(37,45,41,.98), rgba(17,23,19,.99)) !important;
  border-color: rgba(228,214,189,.14) !important;
  color: var(--ab-cream) !important;
  box-shadow: var(--ab-dark-shadow) !important;
}
.terminal textarea,
#focusInput,
#messengerInput {
  color: #F2E7D2 !important;
  caret-color: var(--ab-orange) !important;
}
.terminal textarea::placeholder,
#focusInput::placeholder,
#messengerInput::placeholder { color: rgba(228,214,189,.38) !important; }
.terminal-help,
.composer-help { color: rgba(228,214,189,.40) !important; }
.composer-actions,
.composer-action,
.focus-icon-action,
.focus-text-action { color: rgba(228,214,189,.68) !important; }
.composer-action:hover,
.focus-icon-action:hover,
.focus-text-action:hover { color: var(--ab-orange) !important; }

/* Inputs on light panels. */
input,
select,
textarea,
.form-field input,
.form-field select,
.form-field textarea,
.settings-form-grid input,
.settings-form-grid select,
.settings-form-grid textarea,
.app-filter-bar input,
.app-filter-bar select,
.focus-context-selects select,
.search-input,
.file-search,
.contact-search {
  background: rgba(255,255,255,.58) !important;
  border-color: var(--ab-line) !important;
  color: var(--ab-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}
input::placeholder,
textarea::placeholder { color: rgba(39,49,44,.42) !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,.08) !important;
}
.focus-console input,
.focus-console textarea,
.thread-compose input,
.thread-compose textarea,
.terminal input,
.terminal textarea {
  background: rgba(7,11,9,.32) !important;
  border-color: rgba(228,214,189,.13) !important;
  color: var(--ab-cream) !important;
  box-shadow: none !important;
}

/* Buttons: warm paper secondary actions, orange primary actions, sage confirmations. */
.action,
.settings-small-button,
.settings-button,
.settings-pill,
.app-card-action,
.install-btn,
.modal-cancel,
.walkthrough-button,
.file-action,
.contact-action,
.thread-action,
.app-library-action {
  background: rgba(250,247,241,.86) !important;
  border-color: rgba(39,49,44,.16) !important;
  color: var(--ab-ink) !important;
  box-shadow: 0 5px 16px rgba(42,51,46,.05) !important;
}
.action:hover,
.settings-small-button:hover,
.settings-button:hover,
.app-card-action:hover,
.install-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,.10) !important;
  border-color: rgba(199,122,75,.38) !important;
  color: var(--ab-orange-deep) !important;
}
.action.primary,
.settings-primary-button,
.modal-action,
.app-card-action.primary,
.install-btn.primary,
button.primary {
  background: linear-gradient(180deg, #D48A5D, var(--ab-orange)) !important;
  border-color: var(--ab-orange) !important;
  color: #211A15 !important;
  box-shadow: 0 8px 20px rgba(168,95,54,.16) !important;
}
.action.primary:hover,
.settings-primary-button:hover,
.modal-action:hover,
.app-card-action.primary:hover,
.install-btn.primary:hover,
button.primary:hover { filter: brightness(1.035); }
.settings-danger-button,
.action.danger,
.modal-action.danger {
  background: rgba(182,91,75,.08) !important;
  border-color: rgba(182,91,75,.34) !important;
  color: #8D4439 !important;
}

/* App Library: all app branding stays square and bright against paper. */
[data-view="tools"] .panel {
  background:
    radial-gradient(420px 220px at 0% 0%, rgba(165,181,165,.11), transparent 70%),
    linear-gradient(180deg, rgba(250,247,241,.97), rgba(239,233,222,.96)) !important;
}
[data-view="tools"] .app-filter-bar {
  background: rgba(255,255,255,.32) !important;
  border-color: var(--ab-line-soft) !important;
}
[data-view="tools"] .my-app-icon {
  background: #FFFFFF !important;
  border-color: var(--ab-line) !important;
  box-shadow: var(--ab-shadow-small) !important;
}
[data-view="tools"] .app-library-row {
  background:
    radial-gradient(300px 150px at 0% 0%, rgba(165,181,165,.12), transparent 75%),
    linear-gradient(180deg, #FAF7F1, #F0E9DE) !important;
  border-color: var(--ab-line) !important;
  box-shadow: var(--ab-shadow-small) !important;
}
[data-view="tools"] .app-library-row:hover {
  background:
    radial-gradient(300px 150px at 0% 0%, rgba(199,122,75,.11), transparent 75%),
    linear-gradient(180deg, #FCF9F3, #F2EBE0) !important;
  border-color: rgba(199,122,75,.28) !important;
}
[data-view="tools"] .app-library-icon {
  background: #FFFFFF !important;
  border-color: rgba(39,49,44,.12) !important;
  box-shadow: 0 9px 22px rgba(42,51,46,.08) !important;
}
[data-view="tools"] .app-library-title { color: var(--ab-ink) !important; }
[data-view="tools"] .app-library-subtitle { color: var(--ab-sage-deep) !important; }
[data-view="tools"] .app-library-description { color: var(--ab-copy) !important; }
[data-view="tools"] .app-library-state,
[data-view="tools"] .app-library-price { color: var(--ab-orange-deep) !important; }
.app-filter-check { color: var(--ab-copy) !important; }

/* Dashboard, files, contacts, and settings use the same paper/card vocabulary. */
.personal-console,
.dashboard-layout,
.file-explorer-panel,
.contacts-panel,
.settings-layout { color: var(--ab-ink) !important; }
.personal-hero,
.dashboard-hero {
  background:
    radial-gradient(520px 240px at 10% 0%, rgba(165,181,165,.16), transparent 70%),
    radial-gradient(480px 220px at 94% 100%, rgba(199,122,75,.08), transparent 72%),
    linear-gradient(180deg, #F8F4EC, #ECE5DA) !important;
}
.usage-track,
.progress-track { background: rgba(39,49,44,.09) !important; }
.usage-fill,
.progress-fill { background: linear-gradient(90deg, var(--ab-sage-deep), var(--ab-orange)) !important; }
.settings-pill,
.status-pill,
.tag,
.badge {
  background: rgba(165,181,165,.11) !important;
  border-color: rgba(112,135,119,.24) !important;
  color: #536A5A !important;
}

/* Modal surfaces follow landing cards; destructive/technical overlays retain dark framing only where useful. */
.modal-backdrop,
.auth-backdrop { background: rgba(30,38,33,.40) !important; backdrop-filter: blur(10px); }
.modal-panel,
.auth-panel { color: var(--ab-ink) !important; }
.modal-title,
.auth-title { color: var(--ab-ink) !important; }
.modal-copy,
.auth-copy { color: var(--ab-copy) !important; }

/* Tool-frame shell and legal footer use the recurring dark technical accent. */
.tool-frame-head,
.core-legal-footer,
.mobile-nav {
  background: linear-gradient(180deg, var(--ab-dark), var(--ab-dark-3)) !important;
  border-color: rgba(228,214,189,.10) !important;
  color: rgba(228,214,189,.64) !important;
}
.core-footer-links a { color: rgba(228,214,189,.56) !important; }
.core-footer-links a:hover { color: var(--ab-orange) !important; }
.core-footer-copy { color: rgba(228,214,189,.38) !important; }

/* Preserve boot geometry, restyle only. */
.boot-loader-card,
.app.is-boot-loading::after {
  background: linear-gradient(180deg, var(--ab-dark), var(--ab-dark-3)) !important;
  border-color: rgba(199,122,75,.36) !important;
  color: var(--ab-cream) !important;
  box-shadow: var(--ab-dark-shadow) !important;
}
.app.is-boot-loading::before {
  background:
    radial-gradient(circle at 50% 46%, rgba(165,181,165,.12), transparent 28%),
    rgba(233,227,216,.82) !important;
}

/* System Admin uses the same paper panels while retaining its existing geometry. */
.master-console { color: var(--ab-ink) !important; }
.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, #FAF7F1, #EFE8DD) !important;
  border-color: var(--ab-line) !important;
  color: var(--ab-ink) !important;
  box-shadow: var(--ab-shadow-small) !important;
}
.master-console-subnav {
  background: linear-gradient(180deg, var(--ab-dark), var(--ab-dark-2)) !important;
  border-color: rgba(228,214,189,.10) !important;
  color: var(--ab-cream) !important;
}
.master-console-subnav button { color: rgba(228,214,189,.62) !important; }
.master-console-subnav button.is-active { color: var(--ab-orange) !important; }

/* Scrollbars on light surfaces. */
.scroll-area,
.thread-list,
.thread-body,
.response-content,
.recent-list { scrollbar-color: rgba(168,95,54,.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(168,95,54,.32) !important; }

@media (max-width: 780px) {
  .stage {
    background:
      radial-gradient(620px 420px at 50% 12%, rgba(165,181,165,.16), transparent 68%),
      linear-gradient(180deg, #F1ECE3 0%, #E6DFD3 100%) !important;
  }
}

.mobile-nav button { color: rgba(228,214,189,.62) !important; }
.mobile-nav button.is-active { color: var(--ab-orange) !important; background: rgba(199,122,75,.10) !important; }
.tool-frame-head, .tool-frame-head button, .tool-frame-title, .tool-frame-close { color: var(--ab-cream) !important; }
.tool-frame-head button:hover, .tool-frame-close:hover { color: var(--ab-orange) !important; }