/* Calm, tactile interface layer. Loaded after all existing BaseOS styles. */
:root {
  --base-bg: #f4f4f3;
  --base-surface: #fff;
  --base-text: #202124;
  --base-secondary: #686a6d;
  --base-blue: #3c3d40;
  --info: #55575a;
  --info-bg: #ededec;
  --base-border: rgba(38, 40, 44, .13);
  --base-shadow-sm: 0 3px 14px rgba(20, 22, 25, .045);
  --base-shadow-md: 0 16px 44px rgba(20, 22, 25, .095);
}

html body {
  background: radial-gradient(circle at 78% -12%, #fff 0, transparent 37%), #f4f4f3 !important;
  color: #202124;
}
body #baseos-app > .sidebar {
  background: #f0f0ef !important;
  border-right: 1px solid rgba(38,40,44,.12) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body #baseos-app .brand .brand-logo {
  background: linear-gradient(145deg, #3a3b3e, #222326) !important;
  border-radius: 13px !important;
  box-shadow: 0 7px 16px rgba(20,20,20,.15), inset 0 1px rgba(255,255,255,.35) !important;
}
body #baseos-app .brand .brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
body #baseos-app .sidebar .nav-item {
  min-height: 44px !important;
  border-radius: 12px !important;
  transition: background .18s ease, color .18s ease, transform .18s ease !important;
}
body #baseos-app .sidebar .nav-item:hover {
  background: rgba(255,255,255,.86) !important;
  transform: translateX(2px) !important;
}
body #baseos-app .sidebar .nav-item.active {
  color: #202124 !important;
  background: #fff !important;
  border-color: rgba(38,40,44,.12) !important;
  box-shadow: inset 3px 0 #303134, 0 3px 10px rgba(20,20,20,.05) !important;
}
body #baseos-app .main > .topbar {
  background: rgba(249,249,248,.92) !important;
  border-color: rgba(38,40,44,.12) !important;
}
body #baseos-app .topbar .notification-button {
  color: #303134 !important;
  border-color: rgba(38,40,44,.15) !important;
  background: #fff !important;
}
body #baseos-app .notification-count { background: #b93243 !important; color: #fff !important; }
body #baseos-app #app-content {
  padding-top: 34px !important;
}
body #baseos-app #app-content .module-header h2 {
  color: #202124 !important;
  font-weight: 720 !important;
  letter-spacing: -1.5px !important;
}
body #baseos-app #app-content :is(.tasks-summary-card,.tasks-live-card,.capture-card,.capture-hero,.team-card,.team-summary-card,.client-card,.clients-summary-card,.business-card,.business-summary-card,.content-card,.content-summary-card,.content-workspace-header,.knowledge-card,.report-card,.report-summary-card,.automation-card,.automation-summary-card,.settings-card,.crm-card,.crm-summary-card,.campaign-card,.campaign-summary-card,.base-daily-card,.base-daily-section,.module-card) {
  border-color: rgba(38,40,44,.12) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 30px rgba(20,20,20,.045) !important;
  transition: box-shadow .24s ease, border-color .24s ease, transform .24s ease !important;
}
body #baseos-app #app-content :is(.tasks-live-card,.client-card,.business-card,.content-card,.team-card,.base-daily-card):hover {
  border-color: rgba(38,40,44,.24) !important;
  box-shadow: 0 12px 35px rgba(20,20,20,.085) !important;
  transform: translateY(-2px) !important;
}
body #baseos-app #app-content .base-daily-hero {
  background: #111 !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.14) !important;
}
body #baseos-app #app-content:has(.base-daily-os) { background: #fff !important; }
body #baseos-app #app-content .base-daily-os :is(.base-daily-card,.base-daily-section) {
  background: #fff !important;
  border-color: #dedede !important;
  box-shadow: 0 5px 22px rgba(0,0,0,.045) !important;
}
body #baseos-app #app-content .base-daily-hero-focus {
  background: #1c1c1c !important;
  border-color: #444 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body #baseos-app #app-content :is(.base-daily-metric-blue,.base-work-indicator-blue) {
  color: #303134 !important;
  border-color: #77797c !important;
  background: #d9d9d7 !important;
}
body #baseos-app #app-content .base-daily-metric-blue strong { color: #202124 !important; }
body #baseos-app #app-content .base-daily-os .base-daily-metric-danger strong {
  color: #e95461 !important;
}
body #baseos-app #app-content .base-daily-os .base-work-indicator-danger {
  background: #b93243 !important;
}
body #baseos-app #app-content .base-daily-os .base-work-indicator-blue {
  background: #191919 !important;
}
body #baseos-app #app-content .base-daily-os .base-tag-danger {
  background: #fcecef !important;
  color: #9d2535 !important;
}
body #baseos-app #app-content .base-daily-os :is(.base-tag-attention,.base-review-waiting) {
  background: #ededed !important;
  color: #161616 !important;
}
body #baseos-app #app-content :is(.base-review-waiting,.calendar-event-scheduled,.task-publishing-badge) {
  background: #e8e8e6 !important;
  color: #3f4043 !important;
}
body #baseos-app #app-content .task-reference-link { color: #404145 !important; }
body #baseos-app #app-content .calendar-brand-filter {
  display: grid;
  gap: 7px;
  width: min(100%, 340px);
  color: #56575a;
  font-size: 12px;
  font-weight: 650;
}
body #baseos-app #app-content .calendar-brand-filter select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(38,40,44,.18);
  border-radius: 12px;
  background: #fff;
  color: #202124;
  font: inherit;
}
body #baseos-app :is(.primary-action,.capture-primary,.ask-base-button) {
  background: linear-gradient(180deg,#3d3e41,#242528) !important;
  border-color: #242528 !important;
  box-shadow: 0 5px 14px rgba(20,20,20,.13) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
body #baseos-app :is(.primary-action,.capture-primary,.ask-base-button):hover {
  background: linear-gradient(180deg,#4c4d50,#292a2d) !important;
  box-shadow: 0 8px 20px rgba(20,20,20,.18) !important;
  transform: translateY(-1px);
}
body #baseos-app :is(.primary-action,.capture-primary,.ask-base-button):active,
body #baseos-app #app-content button:active { transform: scale(.98); }
body #baseos-app #app-content :is(.tasks-live-filters,.content-brand-tabs,.content-filters,.knowledge-filters) button.active {
  background: #ededec !important;
  border-color: #c9cac8 !important;
  color: #242528 !important;
}

/* Assistant surfaces share the same visual language as the main app. */
.baseos-assistant-panel, .baseos-followups-panel {
  background: rgba(18,18,18,.27) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.baseos-assistant-card, .baseos-followups-card {
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 24px !important;
  background: #fbfbfa !important;
  color: #202124 !important;
  box-shadow: 0 28px 80px rgba(18,18,18,.18) !important;
}
.baseos-assistant-heading, .baseos-followups-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(38,40,44,.12);
}
.baseos-assistant-heading h2, .baseos-followups-heading h2 {
  font-size: 27px;
  letter-spacing: -.9px;
}
.baseos-assistant-card h3, .baseos-followups-card h3 {
  color: #303134;
  font-size: 15px;
  letter-spacing: -.2px;
}
.baseos-assistant-button, .baseos-followups-button {
  border-color: rgba(38,40,44,.16) !important;
  background: #f0f0ef !important;
  color: #303134 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.9);
}
.baseos-assistant-button:hover, .baseos-followups-button:hover { background: #e4e4e2 !important; }
.baseos-assistant-answer, .baseos-followups-item {
  padding: 15px;
  border: 1px solid rgba(38,40,44,.12);
  border-radius: 14px;
  background: #fff;
}
.baseos-assistant-answer:empty { display: none; }
.baseos-assistant-task:hover { border-color: #bcbdbb; background: #f3f3f2; }
.baseos-assistant-card :is(button,input,select,textarea):focus-visible,
.baseos-followups-card :is(button,input,select,textarea):focus-visible {
  outline: 3px solid rgba(65,66,69,.36);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  body #baseos-app #app-content { padding-top: 24px !important; }
}
@media (max-width: 600px) {
  .baseos-assistant-card, .baseos-followups-card { border-radius: 0 !important; }
  body #baseos-app #app-content .module-header h2 { font-size: 30px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body #baseos-app *, .baseos-assistant-card *, .baseos-followups-card * {
    transition: none !important;
    animation: none !important;
  }
}

/* Keep interaction accents monochrome across older modules. */
body #baseos-app :is(input[type="checkbox"],input[type="radio"]) { accent-color: #353638 !important; }
body #baseos-app :is(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline-color: rgba(65,66,69,.54) !important;
}
body #baseos-app #app-content .capture-empty-icon { background: #ededec !important; color: #36373a !important; }
body #baseos-app #app-content .capture-ai-support { background: #36373a !important; }
body #baseos-app #app-content :is(.base-work-primary,.base-team-primary,.base-approve) {
  background: #303134 !important; border-color: #303134 !important;
}
body #baseos-app .os-bar-button:hover { background: #ececeb !important; }
body #baseos-app #app-content .os-pulse {
  border-color: rgba(38,40,44,.13) !important;
  background: linear-gradient(145deg,#fff,#f2f2f1) !important;
  box-shadow: 0 8px 30px rgba(20,20,20,.045) !important;
}
body #baseos-app #app-content .os-chart { border-color: rgba(38,40,44,.13) !important; background: #fff !important; }
body #baseos-app .os-ring { background: conic-gradient(#3b3c3e calc(var(--progress,0) * 1%),#e6e6e4 0) !important; }
body #baseos-app .os-ring-text strong { color: #303134 !important; }
body #baseos-app .os-bar-track { background: #e6e6e4 !important; }
body #baseos-app .os-bar-fill { background: #5b5c5e !important; }
body #baseos-app .os-bar-button,
body #baseos-app .os-bar-button strong,
body #baseos-app .os-chart h3 { color: #404145 !important; }
body #baseos-app #sidebar-user-avatar { background: #e4e4e2 !important; color: #303134 !important; }
body #baseos-app .sidebar .nav-item.active { color: #202124 !important; }
body #baseos-app .base-daily-hero-actions .base-daily-action-primary { color: #303134 !important; }
/* Respect the router's role-based visibility despite older display rules. */
body #baseos-app .sidebar .nav-item[style*="display: none"],
body #baseos-app .sidebar .nav-section[style*="display: none"],
body #baseos-app .topbar-actions .ask-base-button[style*="display: none"],
body #baseos-app .topbar-actions .notification-button[style*="display: none"] {
  display: none !important;
}

/* The old phone styles add both ::before and ::after stars to Ask BaseOS. */
body #baseos-app .ask-base-button::before,
body #baseos-app .ask-base-button::after { content: none !important; display: none !important; }
.baseos-followups-button,
.baseos-assistant-button { border-color: #c9cac8 !important; color: #303134 !important; }
.baseos-followups-card :is(input,select,textarea),
.baseos-assistant-card :is(input,select,textarea) { border-color: #c9cac8 !important; color: #202124 !important; }
.baseos-followups-card button[data-action="send"],
.baseos-followups-card button[data-reply] { background: #303134 !important; }
.baseos-followups-item { border-color: #dedede !important; background: #fff !important; }
.baseos-followups-item small { color: #686a6d !important; }
.baseos-followups-answer { background: #ededec !important; }
@media (max-width: 520px) {
  body #baseos-app .ask-base-button > span {
    display: inline !important;
    font-size: 18px !important;
    line-height: 1;
  }
}

/* A solid mobile drawer keeps text and photos crisp during its slide animation. */
@media (max-width: 900px) {
  body #baseos-app > .sidebar {
    background: #f0f0ef !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body #baseos-app #baseos-sidebar-backdrop {
    background: rgba(20,20,20,.29) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Settings has its own injected styles; these keep the account page legible. */
body #baseos-app #app-content .settings-module { gap: 22px !important; }
body #baseos-app #app-content .settings-layout { gap: 18px !important; }
body #baseos-app #app-content .settings-profile-card {
  min-width: 0;
  padding: 24px !important;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px !important;
  background: linear-gradient(135deg,#45464a,#242528) !important;
}
body #baseos-app #app-content .settings-profile-card p:not(.eyebrow) {
  color: #dadada !important;
  font-size: 13px !important;
  overflow-wrap: anywhere;
}
body #baseos-app #app-content .settings-profile-card > div:last-child > span {
  color: #e3e3e3 !important;
  font-size: 11px !important;
}
body #baseos-app #app-content .settings-card { padding: 24px !important; gap: 16px !important; }
body #baseos-app #app-content .settings-card-head h3 { font-size: 18px !important; }
body #baseos-app #app-content .settings-field > span,
body #baseos-app #app-content .settings-info-row :is(span,strong),
body #baseos-app #app-content .settings-session-row :is(strong,span) { font-size: 12px !important; }
body #baseos-app #app-content .settings-field input { font-size: 14px !important; }
body #baseos-app #app-content .settings-info-row,
body #baseos-app #app-content .settings-session-row { padding: 13px !important; }
@media (max-width: 760px) {
  body #baseos-app #app-content .settings-layout { grid-template-columns: 1fr !important; }
  body #baseos-app #app-content .settings-card,
  body #baseos-app #app-content .settings-profile-card { padding: 20px !important; }
}

/* The same comfortable type and spacing for employee task and team screens. */
body #baseos-app #app-content .tasks-live-card,
body #baseos-app #app-content .team-card { padding: 20px !important; }
body #baseos-app #app-content .tasks-live-card :is(p,span,small,strong),
body #baseos-app #app-content .team-card :is(p,span,small,strong),
body #baseos-app #app-content .team-account-strip :is(span,strong),
body #baseos-app #app-content .team-task-row :is(span,strong) {
  font-size: 12px !important;
  line-height: 1.45 !important;
}
body #baseos-app #app-content .tasks-live-card h3,
body #baseos-app #app-content .team-card h3 { font-size: 16px !important; }
.baseos-task-navigation-notice {
  margin: 0 0 16px;
  padding: 13px 16px;
  border: 1px solid rgba(38,40,44,.18);
  border-radius: 12px;
  background: #ededec;
  color: #303134;
  font-size: 13px;
  line-height: 1.5;
}
body #baseos-app #app-content .tasks-live-actions :is(button,select),
body #baseos-app #app-content .team-card button { min-height: 40px; font-size: 12px !important; }

/* Base AI's injected styles use six-pixel text; restore readable scale. */
body #baseos-app #app-content .base-ai-module :is(p,span,small,label,button) {
  font-size: 12px !important;
  line-height: 1.5 !important;
}
body #baseos-app #app-content .base-ai-module strong { font-size: 14px !important; }
body #baseos-app #app-content .base-ai-module h2 { font-size: clamp(30px,3vw,40px) !important; }
body #baseos-app #app-content .base-ai-module h3 { font-size: 20px !important; }
body #baseos-app #app-content .base-ai-module :is(textarea,input) { font-size: 14px !important; }
body #baseos-app #app-content .base-ai-module .base-ai-input-symbol,
body #baseos-app #app-content .base-ai-module .base-ai-avatar { background: #303134 !important; }
body #baseos-app #app-content .base-ai-module .base-ai-metric-grid strong { font-size: 22px !important; }
@media (hover: none) {
  body #baseos-app #app-content :is(.tasks-live-card,.client-card,.business-card,.content-card,.team-card,.base-daily-card):hover {
    transform: none !important;
  }
}