/* ACSR Knowledge Agent — Concierge widget type and embed chrome (served with ui-assistant).
   Selectors target Concierge class names we do not own. !important is required to
   override widget inline styles and will need review on Concierge upgrades. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --apple-text: #1d1d1f;
  --apple-secondary: #6e6e73;
  --nec-blue-bright: #1a4bb8;
  --ka-panel-bg: #f0f0f0;
  --ka-textfield-bg: #ffffff;
  --ka-bg: var(--ka-panel-bg);
  --ka-widget-surface: var(--ka-panel-bg);
  --color-bg: var(--ka-panel-bg);
}

html, body {
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--apple-text) !important;
  min-height: 100%;
  background: var(--ka-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.loading-overlay {
  background: var(--ka-bg) !important;
  z-index: 2147483000 !important;
}

.loading-overlay__text {
  color: var(--apple-secondary) !important;
}

body.ka-booting .xpi-chat-widget,
body.ka-booting .concierge-csg-widget {
  visibility: hidden !important;
}

.xpi-chat-widget {
  --ca-fontFamily: var(--font);
  --ca-text-scale-aiMessage-size: 13px;
  --ca-text-scale-aiMessage-lineHeight: 1.38462;
  --ca-text-scale-aiMessage-fontWeight: 400;
  --ca-text-scale-aiMessage-headings-h1-size: 15px;
  --ca-text-scale-aiMessage-headings-h1-fontWeight: 600;
  --ca-text-scale-chatBubble-size: 13px;
  --ca-text-scale-chatBubble-lineHeight: 1.38462;
  --ca-text-scale-chatInput-size: 13px;
  --ca-text-scale-chatInput-lineHeight: 1.38462;
  --ca-text-scale-chatButton-size: 13px;
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--apple-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-font-smoothing: antialiased;
}

.xpi-chat-widget,
.xpi-chat-widget p,
.xpi-chat-widget li,
.xpi-chat-widget span,
.xpi-chat-widget div,
.xpi-chat-widget button,
.xpi-chat-widget textarea,
.xpi-chat-widget input {
  font-family: var(--font) !important;
}

.xpi-chat-widget .ai-disclaimer,
.xpi-chat-widget [class*="disclaimer"] {
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: var(--apple-secondary) !important;
}

.chat-messages-container p,
.chat-messages-container li {
  font-family: var(--font) !important;
  font-size: 13px !important;
  line-height: 1.38462 !important;
  font-weight: 400 !important;
  color: var(--apple-text) !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
}

.chat-messages-container h1,
.chat-messages-container h2,
.chat-messages-container h3,
.chat-messages-container h4,
.chat-messages-container h5,
.chat-messages-container h6 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--apple-text) !important;
  letter-spacing: -0.015em !important;
  text-align: left !important;
  line-height: 1.25 !important;
}

.chat-messages-container h1 { font-size: 15px !important; }
.chat-messages-container h2 { font-size: 14px !important; }
.chat-messages-container h3,
.chat-messages-container h4,
.chat-messages-container h5,
.chat-messages-container h6 { font-size: 13px !important; }

.chat-messages-container strong,
.chat-messages-container b {
  font-weight: 700 !important;
}

.chat-messages-container a { color: var(--nec-blue-bright) !important; }

.xpi-chat-widget textarea,
.xpi-chat-widget [placeholder] {
  font-size: 13px !important;
}

.app-main,
.widget-host,
#chat-widget-container {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Match ACSR Paint (host panelColor / --ka-bg); same approach as theme-dark.css for dark mode. */
.chat-messages-container {
  background: var(--ka-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  z-index: 1 !important;
  overflow-y: auto !important;
}

.chat-input {
  background: var(--ka-widget-surface) !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.concierge-csg-widget {
  background: transparent !important;
}

/* Requires Chromium / WebView2 ≥105 (:has()). Evergreen WebView2 is fine; a pinned older runtime silently skips this. */
.xpi-chat-widget :has(> .clearchat-overlay-header),
.concierge-csg-widget :has(> .clearchat-overlay-header) {
  background: var(--ka-bg) !important;
  background-color: var(--ka-bg) !important;
}

.clearchat-overlay-header,
.clearchat-overlay-buttons {
  background: transparent !important;
}

.widget-host .chat-header {
  background: var(--ka-widget-surface) !important;
  border-bottom: 1px solid rgba(216, 222, 232, 0.8) !important;
  box-shadow: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  flex-shrink: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 4px 10px !important;
  box-sizing: border-box !important;
}

.widget-host .chat-header button {
  color: var(--apple-secondary) !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 0 6px !important;
  min-height: 0 !important;
  height: 28px !important;
  line-height: 28px !important;
}

.widget-host .chat-header svg,
.widget-host .chat-header img {
  width: 14px !important;
  height: 14px !important;
}

.widget-host .chat-header button:hover {
  color: var(--apple-text) !important;
}

.widget-host .chat-header-right,
.widget-host [class*="chat-header-right"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.mode-embedded .app-main,
body.mode-embedded .widget-host,
body.mode-embedded #chat-widget-container {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
}

html,
body.mode-embedded {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.mode-embedded .xpi-chat-widget,
body.mode-embedded .concierge-csg-widget {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.widget-host .chat-messages-container {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.widget-host .chat-messages-container > *:not(.chat-input):not([data-highlight="chat-input"]) {
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  padding-left: clamp(20px, 3vw, 40px) !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

.xpi-chat-widget .chat-input,
.concierge-csg-widget .chat-input,
[data-highlight="chat-input"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding-top: 16px !important;
  padding-bottom: 8px !important;
  padding-left: clamp(12px, 2vw, 20px) !important;
  padding-right: clamp(12px, 2vw, 20px) !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.inner-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: var(--ka-textfield-bg) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

.chat-messages-container .ai-message-content,
.chat-messages-container .human-message-wrapper,
.chat-messages-container .next-best-questions-wrapper,
.chat-messages-container .ai-disclaimer,
.chat-messages-container .plan-approval-card,
.chat-messages-container .confidence-card,
.chat-messages-container .tool-widget-card,
.chat-messages-container .sub-agent-activity,
.chat-messages-container .tool-decision-card {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.chat-messages-container .message > .ai-message-content > :not(.code-block) {
  margin-inline: 0 !important;
}