/* frontend/css/chat.css
   Namespaced, Bootstrap-free helpers for the chat.
   Do NOT set colors here — your DB-driven styles in the view handle that. */

#salestriageai-root { font: inherit; }

/* Layout */
#salestriageai-root .st-chat      { display: flex; flex-direction: column; gap: 12px; }
#salestriageai-root .st-row       { display: flex; gap: 12px; }
#salestriageai-root .st-col       { flex: 1 1 0; }
#salestriageai-root .st-hidden    { display: none !important; }

/* Message bubbles (neutral base; can be overridden by inline DB styles) */
#salestriageai-root .st-msg {
  border-radius: 12px;
  padding: 10px 12px;
  max-width: 720px;
  width: fit-content;
  line-height: 1.45;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}
#salestriageai-root .st-msg.user      { margin-left: auto; }
#salestriageai-root .st-msg.assistant { margin-right: auto; }

/* Inputs & buttons (no colors) */
#salestriageai-root .st-input {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
#salestriageai-root .st-input input,
#salestriageai-root .st-input textarea {
  flex: 1;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
}
#salestriageai-root .st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  cursor: pointer;
}
#salestriageai-root .st-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Tiny Bootstrap utility shims ONLY inside the chat root (if markup uses them) */
#salestriageai-root .d-flex                 { display: flex; }
#salestriageai-root .align-items-center     { align-items: center; }
#salestriageai-root .justify-content-between{ justify-content: space-between; }
#salestriageai-root .gap-2                  { gap: .5rem; }
#salestriageai-root .gap-3                  { gap: 1rem; }

/* === Hardening & accessibility enhancements === */
#salestriageai-root { box-sizing: border-box; }
#salestriageai-root *,
#salestriageai-root *::before,
#salestriageai-root *::after { box-sizing: inherit; }

/* Focus states for keyboard users */
#salestriageai-root .st-btn:focus-visible,
#salestriageai-root .st-input input:focus-visible,
#salestriageai-root .st-input textarea:focus-visible {
  outline: 2px solid #2684ff;
  outline-offset: 2px;
}

/* Prevent media overflow inside message bubbles */
#salestriageai-root .st-msg img,
#salestriageai-root .st-msg video,
#salestriageai-root .st-msg iframe {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* Optional shim: if legacy markup still uses .btn inside the chat, apply st-btn styling */
#salestriageai-root .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  cursor: pointer;
}
#salestriageai-root .btn:disabled { opacity: .6; cursor: not-allowed; }

/* === Added utilities for Bootstrap-free markup mapping (auto-appended) === */
#salestriageai-root .st-justify-start   { justify-content: flex-start; }
#salestriageai-root .st-justify-center  { justify-content: center; }
#salestriageai-root .st-justify-end     { justify-content: flex-end; }
#salestriageai-root .st-justify-between { justify-content: space-between; }
#salestriageai-root .st-align-start     { align-items: flex-start; }
#salestriageai-root .st-align-center    { align-items: center; }
#salestriageai-root .st-align-end       { align-items: flex-end; }

#salestriageai-root .st-rounded { border-radius: 8px; }
#salestriageai-root .st-btn--sm { min-height: 34px; padding: 0 10px; font-size: 0.9rem; }
#salestriageai-root .st-btn--dark { background: var(--st-user-bubble, #4498D8); color: var(--st-user-text, #ffffff); }

/* === Modal, form, and button utilities for Bootstrap-free UI === */
/* Modal container */
#salestriageai-root .st-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:9999}
#salestriageai-root .st-modal.is-open{display:flex}
#salestriageai-root .st-modal__dialog{background:#fff;max-width:520px;width:90%;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);position:relative}
#salestriageai-root .st-modal__content{border-radius:12px;overflow:hidden}
#salestriageai-root .st-modal__header,#salestriageai-root .st-modal__footer{padding:12px 16px}
#salestriageai-root .st-modal__body{padding:16px}
#salestriageai-root .st-modal__title{font-weight:600}
#salestriageai-root .st-modal__close{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer}

/* Simple form controls */
#salestriageai-root .st-field{display:flex;flex-direction:column;gap:6px}
#salestriageai-root .st-label{font-size:.95rem}
#salestriageai-root .st-input-control{min-height:42px;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#223F4C !important;}
#salestriageai-root .st-input-control:focus{color: white !important;}
/* Button variants & spacing helpers (color-agnostic except variables) */
#salestriageai-root .st-btn--primary{background:var(--st-user-bubble,#4498D8);color:var(--st-user-text,#ffffff)}
#salestriageai-root .st-btn--secondary{background:#e9ecef;color:#111}
#salestriageai-root .st-me-2{margin-right:.5rem}
#salestriageai-root .st-mb-3{margin-bottom:1rem}

/* === Additional utilities for Bootstrap-free UI (modal/offcanvas/typography/spacing) === */
#salestriageai-root .st-btn--danger { background:#d9534f; color:#fff; }
#salestriageai-root .st-fw-bold { font-weight:600; }
#salestriageai-root .st-text-end { text-align:right; }
#salestriageai-root .st-p-3 { padding:1rem; }

/* Offcanvas (Bootstrap-free) */
#salestriageai-root .st-offcanvas{position:fixed;left:0;right:0;transform:translateY(100%);transition:transform .2s ease;z-index:9998;background:#fff;box-shadow:0 -8px 20px rgba(0,0,0,.15);display:block}
#salestriageai-root .st-offcanvas.is-open{transform:translateY(0)}
#salestriageai-root .st-offcanvas-bottom{bottom:0}
#salestriageai-root .st-offcanvas__header,#salestriageai-root .st-offcanvas__footer{padding:12px 16px}
#salestriageai-root .st-offcanvas__body{padding:16px}
#salestriageai-root .st-offcanvas__title{font-weight:600}

/* === Minor spacing & alignment utilities needed by updated templates === */
#salestriageai-root .st-me-1 { margin-right: .25rem; }
#salestriageai-root .st-text-center { text-align: center; }
#salestriageai-root .st-mt-3 { margin-top: 1rem; }

/* === Lightweight spinner used in statusBar() (Bootstrap-free) === */
#salestriageai-root .st-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--st-accent, #4498D8);
  animation: st-pulse 1s ease-in-out infinite;
}
#salestriageai-root .st-spinner[aria-label] { display: inline-block; }

@keyframes st-pulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* === Scoped compatibility shim for remaining Bootstrap-like utilities === */
/* Layout */
#salestriageai-root .d-flex { display: flex; }
#salestriageai-root .justify-content-center { justify-content: center; }
#salestriageai-root .justify-content-end { justify-content: flex-end; }
#salestriageai-root .align-items-center { align-items: center; }
#salestriageai-root .align-items-start { align-items: flex-start; }

/* Spacing */
#salestriageai-root .me-2 { margin-right: .5rem; }
#salestriageai-root .me-3 { margin-right: 1rem; }
#salestriageai-root .ms-2 { margin-left: .5rem; }
#salestriageai-root .ms-3 { margin-left: 1rem; }
#salestriageai-root .pt-2 { padding-top: .5rem; }
#salestriageai-root .px-3 { padding-left: 1rem; padding-right: 1rem; }
#salestriageai-root .mt-3 { margin-top: 1rem; }

/* Typography & color */
#salestriageai-root .small { font-size: .875rem; }
#salestriageai-root .text-danger { color: #dc3545; }
#salestriageai-root .text-secondary { color: #6c757d; }
#salestriageai-root .text-dark { color: #212529; }
#salestriageai-root .text-start { text-align: left; }

/* Visibility */
#salestriageai-root .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Background, radius, borders, shadows */
#salestriageai-root .bg-light { background-color: #f8f9fa; }
#salestriageai-root .bg-opacity-10 { background-color: rgba(248, 249, 250, 0.10); }
#salestriageai-root .rounded-3 { border-radius: .3rem; }
#salestriageai-root .rounded-circle { border-radius: 50%; }
#salestriageai-root .border-0 { border: 0 !important; }
#salestriageai-root .shadow-none { box-shadow: none !important; }

/* Button variant aliases used alongside .st-btn */
#salestriageai-root .btn-primary { background: var(--st-user-bubble, #4498D8); color: var(--st-user-text, #fff); }
#salestriageai-root .btn-secondary { background: #e9ecef; color: #111; }