/**
 * Chat Bar Component CSS
 * 
 * SCOPED PREFLIGHT: We disable Tailwind's global preflight to protect Webflow.
 * These resets ONLY apply inside #chat-bar.
 */

/* ===== SCOPED PREFLIGHT FOR #chat-bar ===== */

/* Container setup */
#chat-bar {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  width: 100%;
  max-width: calc(520px + 40px); /* 520px content + 20px padding each side */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

/* Chat container inside #chat-bar */
#chat-bar .chat-container {
  width: 100%;
  min-width: 280px; /* Minimum usable width for chat bar content */
  max-width: 520px;
  margin: 0 auto; /* Center when max-width is reached */
}

/* All elements inherit font and have proper box-sizing */
#chat-bar,
#chat-bar *,
#chat-bar *::before,
#chat-bar *::after {
  box-sizing: border-box;
}

/* Font inheritance for all elements (low specificity with :where) */
:where(#chat-bar) * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* 
 * Border reset - Set border-style to solid so border-width utilities work.
 * Use :where() for zero specificity so Tailwind classes can override.
 */
:where(#chat-bar) *,
:where(#chat-bar) *::before,
:where(#chat-bar) *::after {
  border-style: solid;
  border-width: 0;
  border-color: #e5e5e5;
}

/* Button reset - remove browser defaults (low specificity with :where) */
:where(#chat-bar) button,
:where(#chat-bar) [type='button'],
:where(#chat-bar) [type='reset'],
:where(#chat-bar) [type='submit'] {
  -webkit-appearance: button;
  appearance: button;
  background-color: transparent;
  background-image: none;
}

/* Remove default margins */
#chat-bar h1, #chat-bar h2, #chat-bar h3, #chat-bar h4, #chat-bar p,
#chat-bar blockquote, #chat-bar dl, #chat-bar dd, #chat-bar hr,
#chat-bar figure, #chat-bar pre {
  margin: 0;
}

/* Lists reset */
#chat-bar ol, #chat-bar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Image reset */
#chat-bar img, #chat-bar svg, #chat-bar video, #chat-bar canvas,
#chat-bar audio, #chat-bar iframe, #chat-bar embed, #chat-bar object {
  display: block;
  vertical-align: middle;
}

#chat-bar img, #chat-bar video {
  max-width: 100%;
  height: auto;
}

/* ===== END SCOPED PREFLIGHT ===== */

/* Material Symbols font setup */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

/* Popup active states */
.popup.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.popup.align-left {
  left: var(--popup-left);
  top: var(--popup-top);
}

.popup.align-right {
  right: var(--popup-right);
  top: var(--popup-top);
}

/* Slash command popup active state */
.slash-command-popup.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Slash command item active state (neutral highlight) */
.slash-command-item.active {
  background: #F2F2ED; /* neutral-95 */
  box-shadow: inset 0 0 3px 0 rgba(242, 242, 237, 0.25);
}

.slash-command-item.active span {
  color: #0D0D0C; /* neutral-10 for active text */
}

.slash-command-item.active .material-symbols-outlined {
  color: #0D0D0C; /* neutral-10 for active icon */
}

/* Mode option active state */
.mode-option.active {
  background: #F2F2ED; /* neutral-95 */
  box-shadow: inset 0 0 3px 0 rgba(242, 242, 237, 0.25);
}

.mode-option.active span {
  color: #0D0D0C; /* neutral-10 for active text */
}

.mode-option.active .material-symbols-outlined {
  color: #0D0D0C; /* neutral-10 for active icon */
}

/* Mode button selected state (blue highlight) */
#mode-button.selected {
  background: rgba(41, 182, 246, 0.15); /* Light blue background */
  border-color: rgba(41, 182, 246, 0.5); /* Blue border */
}

#mode-button.selected .mode-icon,
#mode-button.selected .mode-label {
  color: #29B6F6; /* Blue text and icon */
}

/* Toggle option active state (radio button) */
.toggle-option.active .toggle-dot::after {
  opacity: 1;
}

/* Overlay - hidden for popover style */
.popup-overlay {
    display: none;
  }