/*
 * 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.
 */

/* ===========================================
   Page Transitions (View Transitions API)
   =========================================== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 0.2s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.2s ease-in;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===========================================
   Contact CTA - Soft Assistant-like CTA
   =========================================== */
.chat-contact-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 12px;
  padding: 10px 14px;
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 12px;
  color: #EA580C;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.chat-contact-cta:hover {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.3);
}

.chat-contact-cta:active {
  transform: scale(0.98);
}

.chat-contact-cta:focus {
  outline: 2px solid rgba(249, 115, 22, 0.4);
  outline-offset: 2px;
}

.chat-contact-cta.hidden {
  display: none;
}

.dark .chat-contact-cta {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.25);
  color: #FB923C;
}

.dark .chat-contact-cta:hover {
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.35);
}

.chat-contact-cta-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  border-radius: 50%;
  color: white;
  flex-shrink: 0;
}

.chat-contact-cta-text {
  flex: 1;
  line-height: 1.3;
}

.chat-contact-cta-chevron {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  flex-shrink: 0;
}