.crm-skip-link {
  position: fixed;
  z-index: 2000;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: #fff;
  color: #004c9e;
  font-weight: 700;
  text-decoration: underline;
  clip-path: inset(50%);
}

.crm-skip-link:focus {
  clip-path: none;
  outline: 3px solid #005bc5;
  outline-offset: 3px;
}

#app :is(.nav, .mobile-nav, .settings-category-nav) button:focus-visible,
#app #viewRoot:focus-visible {
  outline: 3px solid #075fc9;
  outline-offset: 3px;
}

[data-theme="dark"] #app :is(.nav, .mobile-nav, .settings-category-nav) button:focus-visible,
[data-theme="dark"] #app #viewRoot:focus-visible,
#app .nav button:focus-visible {
  outline-color: #83c4ff;
}

#app .settings-category-nav button {
  min-block-size: 44px;
  white-space: normal;
}

#app .settings-category-nav [aria-current="true"] {
  border-inline-start: 3px solid currentColor;
}

.settings-organized-grid > #managerOpenAiSettings {
  --ai-surface: #fff;
  --ai-group: #f6f8fb;
  --ai-text: #15273c;
  --ai-muted: #475b72;
  --ai-line: #b3c3d5;
  --ai-control-line: #8091a6;
  --ai-accent: #0058bf;
  --ai-accent-ink: #fff;
  --ai-success: #155e3c;
  --ai-success-bg: #e7f5ec;
  --ai-error: #9b2225;
  grid-column: 1 / -1;
  min-inline-size: 0;
  gap: 1.15rem;
  padding: clamp(1rem, 3vw, 1.65rem);
  border: 1px solid var(--ai-line);
  border-radius: 1.35rem;
  background: var(--ai-surface);
  color: var(--ai-text);
  font: 1rem/1.5 system-ui, sans-serif;
}

[data-theme="dark"] .settings-organized-grid > #managerOpenAiSettings {
  --ai-surface: #17263a;
  --ai-group: #203149;
  --ai-text: #f4f8ff;
  --ai-muted: #c2d0e0;
  --ai-line: #74869d;
  --ai-control-line: #74869d;
  --ai-accent: #a7d1ff;
  --ai-accent-ink: #132641;
  --ai-success: #b7f2cf;
  --ai-success-bg: #204a39;
  --ai-error: #ffb4b2;
}

#managerOpenAiSettings :is(.crm-ai-header, .crm-ai-grid, .crm-ai-frequency, .crm-ai-footer) {
  display: grid;
  gap: 1rem;
}

#managerOpenAiSettings .crm-ai-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--ai-line);
}

#managerOpenAiSettings .crm-ai-symbol {
  display: grid;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  place-items: center;
  border-radius: .85rem;
  background: var(--ai-accent);
  color: var(--ai-accent-ink);
  font-size: 1.35rem;
}

#managerOpenAiSettings h3 {
  margin: .1rem 0;
  color: var(--ai-text);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.25;
}

#managerOpenAiSettings p {
  margin: 0;
  color: var(--ai-muted);
}

#managerOpenAiSettings .crm-ai-eyebrow,
#managerOpenAiSettings .crm-ai-help {
  font-size: .875rem;
}

#managerOpenAiSettings .crm-ai-state {
  justify-self: start;
  padding: .35rem .7rem;
  border: 1px solid var(--ai-line);
  border-radius: 2rem;
  background: var(--ai-group);
  color: var(--ai-text);
  font-size: .875rem;
  font-weight: 700;
}

#managerOpenAiSettings .crm-ai-state[data-tone="success"] {
  background: var(--ai-success-bg);
  color: var(--ai-success);
}

#managerOpenAiSettings form,
#managerOpenAiSettings .crm-ai-group {
  display: grid;
  gap: .85rem;
}

#managerOpenAiSettings .crm-ai-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

#managerOpenAiSettings .crm-ai-group {
  align-content: start;
  min-inline-size: 0;
  margin: 0;
  padding: .85rem 1rem 1rem;
  border: 1px solid var(--ai-line);
  border-radius: 1rem;
  background: var(--ai-group);
}

#managerOpenAiSettings .crm-ai-group legend {
  padding-inline: .4rem;
  color: var(--ai-text);
  font-weight: 750;
}

#managerOpenAiSettings .crm-ai-field {
  display: grid;
  gap: .35rem;
  min-inline-size: 0;
  color: var(--ai-text);
  font-weight: 650;
}

#managerOpenAiSettings .crm-ai-field :is(input, select) {
  width: 100%;
  min-inline-size: 0;
  min-block-size: 44px;
  margin: 0;
  padding: .45rem .65rem;
  border: 1px solid var(--ai-control-line);
  border-radius: .65rem;
  background: var(--ai-surface);
  color: var(--ai-text);
  font: inherit;
}

#managerOpenAiSettings .crm-ai-field input::placeholder {
  color: var(--ai-muted);
  opacity: 1;
}

#managerOpenAiSettings .crm-ai-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  min-block-size: 44px;
  color: var(--ai-text);
  cursor: pointer;
}

#managerOpenAiSettings .crm-ai-toggle input[type="checkbox"] {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin: 0;
  accent-color: var(--ai-accent);
}

#managerOpenAiSettings .crm-ai-toggle input:disabled + span {
  color: var(--ai-muted);
}

#managerOpenAiSettings .crm-ai-frequency {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.25rem), 1fr));
  gap: .65rem;
}

#managerOpenAiSettings .crm-ai-footer {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-block-start: .7rem;
}

#managerOpenAiSettings [data-tone="error"] { color: var(--ai-error); }
#managerOpenAiSettings [role="status"][data-tone="success"] { color: var(--ai-success); }

#managerOpenAiSettings button[type="submit"] {
  min-block-size: 44px;
  padding: .65rem 1rem;
  border-radius: .75rem;
  background: var(--ai-accent);
  color: var(--ai-accent-ink);
}

#managerOpenAiSettings :is(button, input, select):focus-visible {
  outline: 3px solid var(--ai-accent);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  #managerOpenAiSettings .crm-ai-header { grid-template-columns: auto minmax(0, 1fr); }
  #managerOpenAiSettings .crm-ai-state { grid-column: 2; }
  #managerOpenAiSettings .crm-ai-footer { grid-template-columns: minmax(0, 1fr); }
}

@media (forced-colors: active) {
  #app :is(.crm-skip-link, button, input, select, #viewRoot):focus-visible {
    outline-color: Highlight;
  }
}

#app .sidebar .nav { display: grid; gap: .9rem; }
#app .crm-nav-group { display: grid; gap: .25rem; min-inline-size: 0; }
#app .crm-nav-group > span {
  padding-inline: .65rem;
  color: #d0ddee;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.6;
}
#app .crm-nav-group .nav-button {
  min-block-size: 44px;
  border: 1px solid transparent;
  border-radius: .75rem;
  white-space: normal;
  transition: background-color 120ms ease, border-color 120ms ease;
}
#app .crm-nav-group .nav-button[aria-current="page"] {
  border-color: #8cbeed;
  box-shadow: inset -3px 0 #b7dfff;
}
#app .crm-nav-group .nav-button:active { border-color: #b7dfff; }
#app .settings-sidebar-panel {
  padding: .9rem;
  border-radius: 1.2rem;
}
#app .settings-category-nav {
  gap: .35rem;
}
#app .settings-category-nav button {
  padding-block: .55rem;
  padding-inline: .7rem;
  line-height: 1.4;
  border-radius: .75rem;
}
#app .settings-category-nav [aria-current="true"] {
  background: #e9f3ff;
  color: #00498f;
}
[data-theme="dark"] #app .settings-category-nav [aria-current="true"] {
  background: #243c59;
  color: #d7ebff;
}

#app .customer-finder { min-inline-size: 0; }
#app .customer-finder #customerSearch {
  min-block-size: 48px;
  font-size: 1rem;
}
#app .customer-finder #clearCustomerSearch {
  min-block-size: 44px;
  min-inline-size: 44px;
}

#app #aiInsightDock {
  --chat-surface: #fff;
  --chat-pane: #f3f6fa;
  --chat-text: #13243a;
  --chat-muted: #475b72;
  --chat-line: #8091a6;
  --chat-accent: #0058bf;
  --chat-accent-text: #fff;
  box-sizing: border-box;
  color: var(--chat-text);
  background: var(--chat-surface);
  border: 1px solid var(--chat-line);
  border-radius: 1.25rem;
  overflow: hidden;
  overscroll-behavior: contain;
  transition: none;
}
[data-theme="dark"] #app #aiInsightDock {
  --chat-surface: #17263a;
  --chat-pane: #203149;
  --chat-text: #f4f8ff;
  --chat-muted: #c2d0e0;
  --chat-line: #8192a9;
  --chat-accent: #a7d1ff;
  --chat-accent-text: #132641;
}
#app #aiInsightDock:not([hidden]) { display: flex !important; flex-direction: column; }
#app #aiInsightDock [hidden] { display: none !important; }
#app #aiInsightDock header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  background: var(--chat-surface);
  color: var(--chat-text);
  border-block-end: 1px solid var(--chat-line);
  cursor: default;
}
#app #aiInsightDock header small {
  display: block !important;
  color: var(--chat-muted);
  line-height: 1.4;
  font-size: .75rem;
}
#app #aiInsightDock .ai-dock-head-actions { display: flex; gap: .25rem; }
#app #aiInsightDock :is(.ai-dock-head-actions, .crm-chat-tools) button {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: .6rem;
  border: 1px solid var(--chat-line);
  border-radius: .65rem;
  color: var(--chat-text);
  background: var(--chat-surface);
  font: 650 .82rem/1.25 system-ui, sans-serif;
}
#app #aiInsightDock .crm-chat-tools {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  background: var(--chat-pane);
  color: var(--chat-text);
}
#app #managerAiSearch {
  flex: 1 1 8rem;
  min-inline-size: 6rem;
  min-block-size: 44px;
  border: 1px solid var(--chat-line);
  border-radius: .6rem;
  color: var(--chat-text);
  background: var(--chat-surface);
  font-size: 1rem;
}
#app #managerAiSearchStatus { flex: 1 0 100%; font-size: .78rem; }
#app #aiInsightDockBody {
  flex: 1 1 auto;
  min-block-size: 0;
  background: var(--chat-pane);
  scroll-behavior: auto !important;
  overscroll-behavior: contain;
  overflow-anchor: none;
}
#app #managerAiMessages {
  min-height: 0 !important;
  overflow: visible;
  background: transparent;
}
#app #managerAiMessages .ai-dock-message {
  max-inline-size: min(92%, 45rem);
  overflow-wrap: anywhere;
}
#app #managerAiMessages .ai-dock-message.assistant {
  background: var(--chat-surface);
  color: var(--chat-text);
}
#app #managerAiMessages .ai-dock-message.user {
  background: var(--chat-accent);
  color: var(--chat-accent-text);
}
#app #managerAiMessages .crm-chat-search-hit {
  outline: 3px solid var(--chat-text);
  outline-offset: 2px;
}
#app .crm-chat-status {
  flex: none;
  min-block-size: 1.3rem;
  margin: 0;
  padding-inline: .7rem;
  color: var(--chat-muted);
  font-size: .78rem;
}
#app #managerAiForm { flex: none; background: var(--chat-surface); }
#app #managerAiQuestion { background: var(--chat-pane); color: var(--chat-text); }
#app #aiInsightDock :is(button, input, textarea, #aiInsightDockBody):focus-visible {
  outline: 3px solid var(--chat-accent);
  outline-offset: 2px;
}
#app #aiInsightDockButton { min-block-size: 44px; }
@media (max-width: 760px) {
  #app #aiInsightDock {
    width: calc(100vw - 16px) !important;
    max-width: 30rem !important;
    height: min(38rem, 74dvh) !important;
    max-height: calc(100dvh - 6.25rem) !important;
  }
  #app #aiInsightDock.is-expanded {
    max-width: none !important;
    height: calc(100dvh - 6.25rem) !important;
  }
  html.ai-keyboard-open #app #aiInsightDock {
    height: calc(var(--ai-vv-height, 74dvh) - 1rem) !important;
    max-height: calc(var(--ai-vv-height, 74dvh) - 1rem) !important;
    bottom: calc(var(--ai-vv-bottom, 0px) + .5rem) !important;
  }
}
@media (max-width: 850px), (pointer: coarse) {
  #app .mobile-nav button b { font-size: .69rem !important; }
  #app .mobile-nav button { min-block-size: 44px !important; }
}