/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Override Bootstrap's default font stack with Onest */
:root {
  --bs-body-font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-weight: 400;
  --accent-rgb: 255, 68, 90;
  --accent-hex: #FF445A;
  --accent-hsl: hsl(353, 100%, 60%);;
  --grey-rgb: 89, 89, 89;
  --grey-hex: #595959;
  --bs-dark-rgb: var(--accent-rgb);
  text-rendering: geometricPrecision;
}

.turbo-progress-bar {
  height: 5px;
  background-color: #fff;
}

.pagination {
  --bs-pagination-active-bg: var(--accent-hex);
  --bs-pagination-active-border-color: var(--accent-hex);
}

.btn {
  --bs-btn-disabled-bg: hsl(from var(--accent-hsl) h s calc(l + 10));
  --bs-btn-disabled-border-color: hsl(from var(--accent-hsl) h s calc(l + 10));
}

a:not(.btn):link {
  color: var(--accent-hex);
}

a:not(.btn):visited {
  color: hsl(from var(--accent-hsl) h s calc(l + 17));
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent-hex);
  --bs-btn-border-color: var(--accent-hex);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--grey-hex);
  --bs-btn-hover-border-color: var(--grey-hex);
}

.btn-outline-primary {
  --bs-btn-color: var(--accent-hex);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--accent-hex);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--grey-hex);
  --bs-btn-hover-border-color: var(--grey-hex);
}

.tw-balance {
  text-wrap: balance;
}

.tw-pretty {
  text-wrap: pretty;
}

.navbar-brand {
  font-weight: 900;
  text-transform: lowercase;
  font-size: 2.5rem;
  letter-spacing: -0.04ch;
}

.navbar a:link, .navbar a:visited {
  color: #fff;
}

.dropdown-item {
  --bs-dropdown-link-hover-bg: hsl(from var(--accent-hsl) h s calc(l + 10));
}

/* Ensure map container has defined dimensions */
#map {
  height: 400px;
  width: 100%;
}

.store-summary p:last-child {
  margin-bottom: 0;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
  text-transform: lowercase;
  letter-spacing: -0.04ch;
  font-weight: 700;
}

h1, .h1 {
  font-weight: 800;
}

h6, .h6 {
  font-weight: 600;
}

b, strong {
  font-weight: 600;
}

/* Collapse chevron rotation */
[data-bs-toggle="collapse"] .bi-chevron-down {
  transition: transform 0.3s ease;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

.store-attribute:not(:last-child)::after {
  content: " •";
}

.store-visit-image {
  width: 140px;
  height: 140px;
  object-fit: cover;
  max-width: 100%;
}

.conversational-search-bar {
  margin-top: -25px;
  margin-left: 25px;
}

/* Conversational Search Chat Bubbles */
.chat-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  max-width: 70%;
  word-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chat-bubble-user {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

.chat-bubble-assistant {
  background: #f1f3f5;
  color: #333;
  border: 1px solid #e9ecef;
  border-bottom-left-radius: 4px;
}

.chat-bubble-error {
  background: #ffe0e0;
  color: #c92a2a;
  border: 1px solid #ffc9c9;
  border-bottom-left-radius: 4px;
}

/* Chat bubble fade-in animation */
@keyframes chatBubbleFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-bubble-fade-in {
  animation: chatBubbleFadeIn 0.3s ease-out;
}

/* Conversation history scrollbar */
.conversation-history {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 #f7fafc;
}

.conversation-history::-webkit-scrollbar {
  width: 8px;
}

.conversation-history::-webkit-scrollbar-track {
  background: #f7fafc;
}

.conversation-history::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

.conversation-history::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .chat-bubble {
    max-width: 85%;
  }
}