:root {
  /* Simphoni color provenance doctrine */
  --simphoni-human: #00FFCC;
  --simphoni-human-soft: #A8F1F1;
  --simphoni-ai: #FF0077;
  --simphoni-ai-soft: #FFB0CA;
  --simphoni-collaborative: #AC6BF1;
  --simphoni-system: #5300F1;
  --simphoni-working: #EDB9ED;
  --simphoni-focus: #FFFFFF;
  --simphoni-deep-space: #0C070C;
  --simphoni-void: #0E000F;
  --simphoni-mint-highlight: #D0FBF8;
  --simphoni-provenance-gradient: linear-gradient(
    90deg,
    var(--simphoni-human) 0%,
    var(--simphoni-collaborative) 52%,
    var(--simphoni-ai) 100%
  );

  --simphoni-surface-status: #161218;
  --simphoni-surface-human: #131614;
  --simphoni-surface-ai: #21141A;
  --simphoni-surface-shared: #312331;
  --simphoni-surface-deep: #0C070C;
  --simphoni-surface-void: #0E000F;

  --simphoni-energy-idle: 0 0 0 rgba(255, 255, 255, 0);
  --simphoni-energy-active: 0 0 14px color-mix(in srgb, currentColor 24%, transparent);
  --simphoni-energy-focused: 0 0 0 1px color-mix(in srgb, currentColor 58%, transparent),
    0 0 24px color-mix(in srgb, currentColor 34%, transparent);
  --simphoni-energy-important: 0 0 0 1px color-mix(in srgb, currentColor 72%, transparent),
    0 0 34px color-mix(in srgb, currentColor 44%, transparent);
  --simphoni-energy-critical: 0 0 0 2px color-mix(in srgb, var(--simphoni-ai) 88%, transparent),
    0 0 42px color-mix(in srgb, var(--simphoni-ai) 58%, transparent);

  /* Legacy aliases kept so older surfaces inherit the provenance doctrine. */
  --mint-color: var(--simphoni-human);
  --magenta-hot: var(--simphoni-ai);

  /* Primary color palette */
  --pf-color-primary: #08BFA5;
  --pf-color-secondary: #ff3b30;
  --pf-color-close: #ff0099;
  --pf-color-accent: #3AFBcb;
  --pf-color-sidebar-start: #180018;
  --pf-color-sidebar-end: #270027;
  --pf-color-sidebar-header-start: #2D002D;
  --pf-color-sidebar-header-end: #540054;
  --pf-color-border: #8A2BE2;
  --pf-color-search-bg: #1D001D;
  --pf-color-search-border: #8A008A;

  /* Spacing scale */
  --pf-space-xs: 4px;
  --pf-space-s: 8px;
  --pf-space-m: 16px;
  --pf-space-l: 24px;
  --pf-space-xl: 32px;

  /* Border radius */
  --pf-rounded: 8px;

  /* Font sizes */
  --pf-font-base: 16px;
  --pf-font-small: 12px;
  --pf-font-xsmall: 10px;
}
:root {
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.125rem;
  --font-size-xlarge: 1.25rem;
}

html {
  font-size: var(--simphoni-root-font-size, 16px);
}
.custom-tooltip {
  position: fixed;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 4px;
  font-size: 0.75rem;
  pointer-events: none;
  transform: translate(-50%, -6px);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 99999;
}
.custom-tooltip.visible {
  opacity: 1;
}
/* Global theme variables */

body.theme-simphoni {
  --background-color: #10051d;
  --app-bg: var(--background-color);
  --primary-text-color: #f4f2ff;
  --text-color: var(--primary-text-color);
  --muted-text: #cbbbe6;
  --secondary-bg: #160a27;
  --surface-1: #1c0c2b;
  --surface-2: #241237;
  --surface-3: #2e1746;
  --edge: rgba(255, 79, 179, 0.4);
  --navbar-bg: #14071f;
  --navbar-text: #ffffff;
  --color-accent: #ff4fb3;
  --accent-soft: rgba(255, 79, 179, 0.16);
  --accent-strong: #ff79c8;
  --shadow-soft: 0 20px 48px rgba(19, 5, 29, 0.45);
  --shadow-hard: 0 14px 32px rgba(8, 2, 14, 0.78);
  --color-bg-dark: #14071f;
  --color-bg-medium: #1e102f;
  --color-bg-light: #2a1a42;
  --theme-filter: none;
  background: var(--app-bg);
  color: var(--primary-text-color);
}

body.theme-vio-dark {
  --background-color: #12001e;
  --app-bg: var(--background-color);
  --primary-text-color: #f5efff;
  --text-color: var(--primary-text-color);
  --muted-text: #d3c8f7;
  --secondary-bg: #16092a;
  --surface-1: #1a0630;
  --surface-2: #220c3c;
  --surface-3: #2d124a;
  --edge: rgba(159, 97, 255, 0.4);
  --navbar-bg: #16092a;
  --navbar-text: #ffffff;
  --color-accent: #9f61ff;
  --accent-soft: rgba(159, 97, 255, 0.18);
  --accent-strong: #c38aff;
  --shadow-soft: 0 18px 44px rgba(61, 17, 118, 0.38);
  --shadow-hard: 0 14px 36px rgba(12, 3, 26, 0.85);
  --color-bg-dark: #16092a;
  --color-bg-medium: #21113a;
  --color-bg-light: #311a52;
  --theme-filter: none;
  background: var(--app-bg);
  color: var(--primary-text-color);
}

body.theme-vio-flow {
  --background-color: #ede8ff;
  --app-bg: var(--background-color);
  --primary-text-color: #1c1442;
  --text-color: var(--primary-text-color);
  --muted-text: #4b3d85;
  --secondary-bg: #e3dcff;
  --surface-1: #ffffff;
  --surface-2: #f0ecff;
  --surface-3: #e0d9ff;
  --edge: rgba(93, 70, 242, 0.2);
  --navbar-bg: #d9d0ff;
  --navbar-text: #261756;
  --color-accent: #5d46f2;
  --accent-soft: rgba(93, 70, 242, 0.18);
  --accent-strong: #4631d4;
  --shadow-soft: 0 18px 40px rgba(70, 49, 212, 0.18);
  --shadow-hard: 0 14px 32px rgba(38, 23, 86, 0.28);
  --color-bg-dark: #d3caff;
  --color-bg-medium: #e6e0ff;
  --color-bg-light: #f5f2ff;
  --theme-filter: none;
  background: var(--app-bg);
  color: var(--primary-text-color);
}

body.theme-simphoni-light {
  --background-color: #f5f7fa;
  --app-bg: var(--background-color);
  --primary-text-color: #141a26;
  --text-color: var(--primary-text-color);
  --muted-text: #445066;
  --secondary-bg: #e6ebef;
  --surface-1: #ffffff;
  --surface-2: #eef2f6;
  --surface-3: #dfe5eb;
  --edge: rgba(0, 115, 117, 0.24);
  --navbar-bg: #e3e8ed;
  --navbar-text: #141a26;
  --color-accent: #007375;
  --accent-soft: rgba(0, 115, 117, 0.16);
  --accent-strong: #009ba1;
  --shadow-soft: 0 16px 36px rgba(0, 76, 78, 0.14);
  --shadow-hard: 0 12px 28px rgba(18, 32, 44, 0.18);
  --color-bg-dark: #d9e2e6;
  --color-bg-medium: #e7edf1;
  --color-bg-light: #f4f7f9;
  --theme-filter: none;
  background: var(--app-bg);
  color: var(--primary-text-color);
}

body.theme-floral-air {
  --background-color: #fff4fb;
  --app-bg: var(--background-color);
  --primary-text-color: #2f1e3f;
  --text-color: var(--primary-text-color);
  --muted-text: #6c5a8a;
  --secondary-bg: #f9e7f3;
  --surface-1: #ffffff;
  --surface-2: #f6e2f4;
  --surface-3: #f1d4e6;
  --edge: rgba(177, 43, 106, 0.22);
  --navbar-bg: #f4dbee;
  --navbar-text: #2f1e3f;
  --color-accent: #b12b6a;
  --accent-soft: rgba(177, 43, 106, 0.2);
  --accent-strong: #c63c7d;
  --shadow-soft: 0 18px 38px rgba(177, 43, 106, 0.18);
  --shadow-hard: 0 12px 28px rgba(78, 55, 102, 0.25);
  --color-bg-dark: #f2cade;
  --color-bg-medium: #f9e1f0;
  --color-bg-light: #fff8fc;
  --theme-filter: none;
  background: var(--app-bg);
  color: var(--primary-text-color);
}

body.theme-deep-space {
  --background-color: #030c1c;
  --app-bg: var(--background-color);
  --primary-text-color: #e3f3ff;
  --text-color: var(--primary-text-color);
  --muted-text: #9bbdda;
  --secondary-bg: #0b1a33;
  --surface-1: #0d1e38;
  --surface-2: #112441;
  --surface-3: #173156;
  --edge: rgba(43, 155, 207, 0.28);
  --navbar-bg: #08142a;
  --navbar-text: #e3f3ff;
  --color-accent: #2b9bcf;
  --accent-soft: rgba(43, 155, 207, 0.24);
  --accent-strong: #4ac6f5;
  --shadow-soft: 0 20px 44px rgba(28, 63, 110, 0.38);
  --shadow-hard: 0 14px 34px rgba(2, 8, 24, 0.78);
  --color-bg-dark: #09162a;
  --color-bg-medium: #11233b;
  --color-bg-light: #1b3358;
  --theme-filter: none;
  background: var(--app-bg);
  color: var(--primary-text-color);
}

body.density-dense {
  --ui-spacing: 4px;
  --spacing-xs: 2px;
  --spacing-sm: 6px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 28px;
  font-size: 0.95em;
  line-height: 1.2;
}

body.density-regular {
  --ui-spacing: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  font-size: 1em;
  line-height: 1.4;
}

body.density-relaxed {
  --ui-spacing: 12px;
  --spacing-xs: 6px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 28px;
  --spacing-xl: 36px;
  font-size: 1.05em;
  line-height: 1.6;
}

body.text-small {
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.125rem;
  font-size: 1em;
}

body.text-medium {
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.125rem;
  font-size: 1em;
}

body.text-large {
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.125rem;
  font-size: 1em;
}

body.text-xlarge {
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.125rem;
  --font-size-xlarge: 1.25rem;
  font-size: 1em;
}
:root {
  --footer-bar-height: 3vh;
  --fmc-bottom-panel-offset: var(--footer-bar-height);
  --app-safe-top: calc(
    var(--navbar-total-height, 0px) + env(safe-area-inset-top, 0px)
  );
  --app-safe-bottom: calc(
    max(var(--fmc-bottom-panel-offset, 0px), var(--footer-bar-height, 0px)) +
      env(safe-area-inset-bottom, 0px)
  );
}

body {
  margin: 0;
  padding-top: var(--app-safe-top);
  padding-bottom: var(--app-safe-bottom);
  scroll-padding-top: var(--app-safe-top);
  scroll-padding-bottom: var(--app-safe-bottom);
}

body.navbar-hidden,
body.onboarding-navbar-hidden {
  --navbar-total-height: 0px;
  --footer-bar-height: 0px;
  /*
   * Desktop native shells can still render the Admin Deck while the navbar is
   * hidden. Mobile shells suppress the deck at the component layer.
   */
  --app-safe-top: calc(
    var(--admin-bar-height, 0px) + env(safe-area-inset-top, 0px)
  );
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
}

body.navbar-hidden:not(:has(.simphoni1v-page)),
body.onboarding-navbar-hidden,
body.onboarding-hide-fmc,
body.hide-navbar {
  --fmc-bottom-panel-offset: 0px;
}

body.navbar-hidden .navbar,
body.onboarding-navbar-hidden .navbar {
  display: none !important;
}

body.navbar-hidden:not(:has(.simphoni1v-page)) .fmc-bottom-panel,
body.onboarding-navbar-hidden .fmc-bottom-panel,
body.onboarding-hide-fmc .fmc-bottom-panel,
body.hide-navbar .fmc-bottom-panel,
body.navbar-hidden:not(:has(.simphoni1v-page)) .floating-environment-controls,
body.onboarding-navbar-hidden .floating-environment-controls,
body.onboarding-hide-fmc .floating-environment-controls,
body.hide-navbar .floating-environment-controls,
body.navbar-hidden .sidebar-container,
body.onboarding-navbar-hidden .sidebar-container {
  display: none !important;
}

.content-wrapper {
  position: absolute;
  top: var(--app-safe-top);
  bottom: var(--app-safe-bottom);
  left: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* SimpleNotes owns a document-length mobile surface. Keep the body locked like
 * the rest of the native shell, but give this route one bounded, momentum-
 * scrolling owner so long notes and long note lists remain reachable. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  body:has([data-simple-notes-shell]) .content-wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
}

:root[data-native-shell='true'] body.navbar-hidden .content-wrapper,
:root[data-native-shell='true'] body.onboarding-navbar-hidden .content-wrapper {
  top: 0;
  bottom: 0;
  padding-top: var(--app-safe-top);
  padding-bottom: var(--app-safe-bottom);
  box-sizing: border-box;
}
:root {
  --simphoni-native-font-scale: 1;
  --simphoni-preferred-font-scale: 1;
  --simphoni-effective-font-scale: 1;
  --simphoni-root-font-size: 16px;
  --mobile-font-metadata: 0.8125rem;
  --mobile-font-secondary: 0.875rem;
  --mobile-font-body: 1.0625rem;
  --mobile-font-xs: max(var(--mobile-font-secondary), clamp(0.88rem, 0.82rem + 0.28vw, 0.98rem));
  --mobile-font-sm: max(1rem, clamp(0.96rem, 0.9rem + 0.35vw, 1.08rem));
  --mobile-font-base: max(var(--mobile-font-body), clamp(1rem, 0.94rem + 0.45vw, 1.14rem));
  --mobile-font-md: clamp(1.08rem, 1rem + 0.7vw, 1.28rem);
  --mobile-font-lg: clamp(1.24rem, 1.1rem + 1.3vw, 1.58rem);
  --mobile-font-xl: clamp(1.55rem, 1.28rem + 2.6vw, 2.15rem);
  --mobile-touch-target: 44px;
}

html {
  font-size: var(--simphoni-root-font-size);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  body.text-small,
  body.text-medium,
  body.text-large,
  body.text-xlarge,
  body:not(.text-small):not(.text-medium):not(.text-large):not(.text-xlarge) {
    --font-size-small: 0.875rem;
    --font-size-medium: 1.0625rem;
    --font-size-large: 1.1875rem;
  }

  body.text-large {
    --font-size-small: 0.875rem;
    --font-size-medium: 1.0625rem;
    --font-size-large: 1.1875rem;
  }

  body.text-small {
    --font-size-small: 0.875rem;
    --font-size-medium: 1.0625rem;
    --font-size-large: 1.1875rem;
  }

  body.text-xlarge {
    --font-size-small: 0.875rem;
    --font-size-medium: 1.0625rem;
    --font-size-large: 1.1875rem;
  }

  body {
    font-size: var(--font-size-medium, var(--mobile-font-body));
    line-height: 1.45;
  }

  input:not([type='range']):not([type='checkbox']):not([type='radio']),
  textarea,
  select {
    font-size: max(1rem, 1em) !important;
    line-height: 1.35;
  }

  .content-wrapper {
    overscroll-behavior: contain;
  }

  :where(.mobile-nav-dropdown__item, .mobile-nav-simplechat__trigger) {
    min-height: var(--mobile-touch-target);
  }

  :where(.mobile-nav-dropdown__label, .mobile-nav-dropdown__label--hero) {
    font-size: var(--mobile-font-base);
    line-height: 1.35;
    letter-spacing: 0.01em;
  }

}
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10000;
}
.toast {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: var(--pf-space-s) var(--pf-space-m);
  border-radius: var(--pf-rounded);
  font-size: var(--pf-font-base);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.toast.info {
  background: var(--pf-color-primary);
}
.toast.error {
  background: var(--pf-color-secondary);
}

@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .toast-container {
    left: clamp(12px, 4vw, 18px);
    right: clamp(12px, 4vw, 18px);
    bottom: calc(var(--fmc-bottom-panel-offset, 88px) + env(safe-area-inset-bottom, 0px) + 12px);
    align-items: stretch;
    z-index: 10000020;
  }

  .toast {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 0.72rem 0.85rem;
    border-radius: 14px;
    font-size: max(15px, var(--mobile-font-sm, 0.96rem));
    line-height: 1.35;
    text-align: center;
  }

  body:has(.simphoni1v-page) .toast-container {
    bottom: calc(
      var(--fmc-bottom-panel-offset, 88px) + var(--fmc-mobile-bottom-gap, 0px) +
      var(--sim1v-mobile-query-panel-gap, 20px) + var(--sim1v-mobile-pill-height, 54px) +
      clamp(32px, 6vh, 52px)
    );
  }

  body:has(.spa-panel-container) .toast-container {
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(126px, 17vh, 150px));
  }
}