@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&family=Fraunces:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&display=swap');

/* ==========================================================================
   DESIGN TOKENS & VARIABLES
   ========================================================================== */
:root {
  /* HSL Colors */
  --navy: 226 50% 15%;       /* #121E42 */
  --orange: 19 89% 56%;      /* #F26B2A */
  --cream: 40 33% 96%;       /* #F9F6F0 */
  --paper: 0 0% 100%;        /* #FFFFFF */
  --ink: 226 25% 10%;        /* #11141D */
  --ink-soft: 226 12% 43%;   /* #5F667A */
  --teal: 171 77% 40%;       /* #14B8A6 */
  --coral: 14 85% 63%;       /* #F43F5E */
  --gold: 45 100% 50%;       /* #EAB308 */

  /* Fonts */
  --font-display: 'Fraunces', serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-hand: 'Caveat', cursive;

  /* Header height */
  --header-h: 76px;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: hsl(var(--cream));
  color: hsl(var(--ink));
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display), Georgia, serif;
  color: hsl(var(--navy));
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 6vw, 5rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 4vw, 3.2rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2.5vw, 2rem); font-weight: 600; }
h4 { font-size: clamp(1rem, 1.8vw, 1.4rem); font-weight: 600; }

p {
  color: hsl(var(--ink-soft));
  line-height: 1.7;
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: hsl(var(--cream)); }
::-webkit-scrollbar-thumb { background: hsl(var(--navy) / 0.3); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--navy) / 0.5); }

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* ==========================================================================
   LAYOUTS & CONTAINERS
   ========================================================================== */
.container {
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
}

.container-wide {
  width: 92%;
  max-width: 1400px;
  margin-inline: auto;
}

.section-pad {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.section-pad-sm {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   NAVBAR & HEADER
   ========================================================================== */
header {
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

header.scrolled {
  background: hsl(var(--cream) / 0.9) !important;
  backdrop-filter: blur(10px);
  border-bottom: 2px solid hsl(var(--navy) / 0.06) !important;
  box-shadow: 0 4px 20px hsl(var(--navy) / 0.03);
}

.nav-link {
  display: inline-block;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.15s, background 0.15s;
  color: hsl(var(--ink));
  background: transparent;
  padding-inline: 1.125rem;
  padding-block: 0.5rem;
  white-space: nowrap;
}

.nav-link:hover {
  color: hsl(var(--orange));
  background: hsl(var(--orange) / 0.05);
}

.nav-link.active {
  color: hsl(var(--orange));
  background: hsl(var(--orange) / 0.08);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-family: var(--font-sans);
  background: hsl(var(--navy));
  color: hsl(var(--paper));
  border: 2px solid hsl(var(--navy));
  box-shadow: 4px 4px 0 0 hsl(var(--orange));
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 hsl(var(--orange));
}

.btn-primary.btn-orange {
  background: hsl(var(--orange));
  border-color: hsl(var(--orange));
  box-shadow: 4px 4px 0 0 hsl(var(--navy));
  color: hsl(var(--paper));
}

.btn-primary.btn-orange:hover {
  box-shadow: 6px 6px 0 0 hsl(var(--navy));
}

.btn-primary.btn-teal {
  background: hsl(var(--teal));
  border-color: hsl(var(--teal));
  box-shadow: 4px 4px 0 0 hsl(var(--navy));
  color: hsl(var(--paper));
}

.btn-primary.btn-teal:hover {
  box-shadow: 6px 6px 0 0 hsl(var(--navy));
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-family: var(--font-sans);
  background: hsl(var(--paper));
  color: hsl(var(--ink));
  border: 2px solid hsl(var(--navy));
  box-shadow: 4px 4px 0 0 hsl(var(--navy));
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-secondary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 hsl(var(--navy));
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  border-radius: 1.25rem;
  border: 2px solid hsl(var(--navy) / 0.1);
  background: hsl(var(--paper));
  box-shadow: 4px 4px 0 0 hsl(var(--navy));
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 8px 8px 0 0 hsl(var(--navy));
  border-color: hsl(var(--navy));
}

.card.card-orange:hover {
  box-shadow: 8px 8px 0 0 hsl(var(--orange));
  border-color: hsl(var(--orange));
}

.card.card-teal:hover {
  box-shadow: 8px 8px 0 0 hsl(var(--teal));
  border-color: hsl(var(--teal));
}

.illustration-card {
  border: 2.5px solid hsl(var(--navy));
  border-radius: 1.25rem;
  background: hsl(var(--cream));
  padding: 2.5rem;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s ease, border-color 0.3s ease;
}

.illustration-card.ic-navy {
  box-shadow: 6px 6px 0 0 hsl(var(--navy));
}
.illustration-card.ic-navy:hover {
  box-shadow: 10px 10px 0 0 hsl(var(--navy));
  border-color: hsl(var(--navy));
}

.illustration-card.ic-teal {
  box-shadow: 6px 6px 0 0 hsl(var(--teal));
}
.illustration-card.ic-teal:hover {
  box-shadow: 10px 10px 0 0 hsl(var(--teal));
  border-color: hsl(var(--teal));
}

.illustration-card:hover {
  transform: translateY(-8px);
  background: hsl(var(--paper));
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: hsl(var(--orange));
  display: inline-block;
}

.em-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* ==========================================================================
   MARQUEES
   ========================================================================== */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  gap: 1.75rem;
  width: max-content;
  animation: horizontalMarquee 35s linear infinite;
  will-change: transform;
}

@keyframes horizontalMarquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   PORTFOLIO CARDS
   ========================================================================== */
.project-card {
  width: clamp(290px, 26vw, 360px);
  flex-shrink: 0;
  border-radius: 1.25rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease;
}

.project-card:hover {
  transform: translateY(-8px);
}

.project-card.pc-orange:hover {
  box-shadow: 8px 8px 0 0 hsl(var(--orange)) !important;
  border-color: hsl(var(--orange)) !important;
}

.project-card.pc-teal:hover {
  box-shadow: 8px 8px 0 0 hsl(var(--teal)) !important;
  border-color: hsl(var(--teal)) !important;
}

.project-card.pc-gold:hover {
  box-shadow: 8px 8px 0 0 hsl(var(--gold)) !important;
  border-color: hsl(var(--gold)) !important;
}

/* ==========================================================================
   ANIMATIONS & EFFECTS
   ========================================================================== */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes slideDown {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.pulse-dot {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: hsl(var(--teal));
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: hsl(var(--teal));
  animation: ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0.75;
}

/* ==========================================================================
   WHATSAPP FLOATING BADGE
   ========================================================================== */
.wa-float-btn {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 999;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-float-btn::before {
  content: "WhatsApp us";
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: hsl(var(--navy));
  color: hsl(var(--paper));
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-family: var(--font-sans);
  border: 1.5px solid hsl(var(--navy));
  box-shadow: 3px 3px 0 0 hsl(var(--orange));
}

.wa-float-btn:hover::before {
  opacity: 1;
}

.wa-float-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5), 0 3px 12px rgba(0,0,0,0.2) !important;
}

@keyframes waPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.35); opacity: 0; }
}

.wa-float-btn-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.35);
  animation: waPulse 2s ease-in-out infinite;
}

/* ==========================================================================
   POPUP MODAL
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: hsl(var(--navy) / 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 1.5rem;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal-box {
  background: hsl(var(--cream));
  border: 3px solid hsl(var(--navy));
  border-radius: 1.5rem;
  width: 100%;
  max-width: 500px;
  box-shadow: 8px 8px 0 0 hsl(var(--navy));
  position: relative;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 2.25rem 1.75rem;
}

.modal-overlay.active .modal-box {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid hsl(var(--navy));
  background: hsl(var(--orange));
  color: hsl(var(--paper));
  display: grid;
  place-items: center;
  box-shadow: 2px 2px 0 0 hsl(var(--navy));
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-close:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 hsl(var(--navy));
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

.form-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--navy));
}

.form-input {
  width: 100%;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  border: 2px solid hsl(var(--navy) / 0.15);
  background: hsl(var(--paper));
  color: hsl(var(--ink));
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: hsl(var(--navy));
  box-shadow: 4px 4px 0 0 hsl(var(--orange));
}

textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

/* ==========================================================================
   RESPONSIVE DESIGN ADAPTATIONS
   ========================================================================== */
@media (max-width: 768px) {
  .hero-stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   FLOATING CIRCLE TECH BADGES
   ========================================================================== */
@keyframes floatTech {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.tech-circle-badge {
  width: 105px;
  height: 105px;
  border-radius: 50%;
  border: 2.5px solid hsl(var(--navy));
  background: hsl(var(--paper));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  box-shadow: 4px 4px 0 0 hsl(var(--navy));
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s ease, border-color 0.3s ease;
  animation: floatTech 4s ease-in-out infinite;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}

.tech-circle-badge:hover {
  animation-play-state: paused;
  transform: scale(1.1) !important;
  background: hsl(var(--cream));
  box-shadow: 6px 6px 0 0 hsl(var(--orange));
  border-color: hsl(var(--orange));
}

.tech-circle-badge.tc-orange:hover {
  box-shadow: 6px 6px 0 0 hsl(var(--orange));
  border-color: hsl(var(--orange));
}

.tech-circle-badge.tc-teal:hover {
  box-shadow: 6px 6px 0 0 hsl(var(--teal));
  border-color: hsl(var(--teal));
}

/* ==========================================================================
   TESTIMONIAL CARDS WITH TRANSITIONS
   ========================================================================== */
.testimonial-card {
  border-radius: 1.25rem;
  border: 2px solid hsl(var(--navy) / 0.1);
  background: hsl(var(--paper));
  box-shadow: 4px 4px 0 0 hsl(var(--navy));
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  color: hsl(var(--ink));
}

.testimonial-card p {
  color: hsl(var(--ink-soft));
  transition: color 0.3s ease;
}

.testimonial-card .author-name {
  color: hsl(var(--ink));
  transition: color 0.3s ease;
}

.testimonial-card .author-title {
  color: hsl(var(--ink-soft));
  transition: color 0.3s ease;
}

.testimonial-card .author-border {
  border-top: 1.5px solid hsl(var(--navy) / 0.06);
  transition: border-color 0.3s ease;
}

/* Hover Morph State */
.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 8px 8px 0 0 hsl(var(--navy));
  border-color: hsl(var(--navy));
  background: hsl(var(--navy));
  color: hsl(var(--paper));
}

.testimonial-card:hover p {
  color: hsl(var(--paper) / 0.85);
}

.testimonial-card:hover .author-name {
  color: hsl(var(--paper));
}

.testimonial-card:hover .author-title {
  color: hsl(var(--paper) / 0.55);
}

.testimonial-card:hover .author-border {
  border-color: hsl(var(--paper) / 0.12);
}

/* ==========================================================================
   MOBILE VIEW OPTIMIZATIONS (Breathing Room, Margins, Borders & Spacing)
   ========================================================================== */
@media (max-width: 767px) {
  /* Increase lateral margins for container */
  .container {
    width: 88% !important;
  }
  .container-wide {
    width: 90% !important;
  }

  /* Modal responsiveness for mobile viewports */
  .modal-overlay {
    padding: 1rem !important;
  }
  .modal-box {
    padding: 2.75rem 1.25rem 1.25rem !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
  }
  .popup-initial-content p {
    margin-bottom: 0.75rem !important;
  }
  .popup-initial-content form {
    gap: 0.5rem !important;
  }

  /* Force grid columns to stack properly on mobile, avoiding minmax overflow */
  .container-wide > div[style*="display: grid"],
  .container > div[style*="display: grid"],
  section div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Optimize card margins and paddings so content has more horizontal room */
  .card, .testimonial-card, .illustration-card {
    padding: 1.75rem 1.125rem !important;
    border-width: 2px !important;
    border-radius: 1rem !important;
  }

  /* Reduce flat shadow offsets slightly to prevent clipping and balance borders */
  .card, .testimonial-card, .illustration-card {
    box-shadow: 4px 4px 0 0 hsl(var(--navy)) !important;
  }

  /* Orange and teal hover card modifications */
  .card.card-orange:hover {
    box-shadow: 6px 6px 0 0 hsl(var(--orange)) !important;
  }
  .card.card-teal:hover {
    box-shadow: 6px 6px 0 0 hsl(var(--teal)) !important;
  }

  /* Adjust section vertical spacing */
  .section-pad {
    padding-block: 3.5rem !important;
  }

  /* Make typography scales fit comfortably on mobile */
  h1 {
    font-size: clamp(2rem, 8vw, 2.6rem) !important;
    line-height: 1.15 !important;
  }
  h2 {
    font-size: clamp(1.6rem, 7vw, 2.1rem) !important;
  }
  p {
    font-size: 0.925rem !important;
  }
}

/* Header CTA responsive hiding to avoid hamburger button overflow */
.header-cta {
  display: inline-flex;
}
@media (max-width: 575px) {
  .header-cta {
    display: none !important;
  }
}

/* ==========================================================================
   AI FLOATING CHATBOT WIDGET
   ========================================================================== */
.ai-float-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: hsl(var(--orange));
  border: 2.5px solid hsl(var(--navy));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 0 hsl(var(--navy));
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  cursor: pointer;
  outline: none;
}

.ai-float-btn::before {
  content: "Ask Tribal AI";
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: hsl(var(--cream));
  color: hsl(var(--navy));
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-family: var(--font-sans);
  border: 1.5px solid hsl(var(--navy));
  box-shadow: -3px 3px 0 0 hsl(var(--navy));
}

.ai-float-btn:hover::before {
  opacity: 1;
}

.ai-float-btn:hover {
  transform: scale(1.05) translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 hsl(var(--navy));
}

.ai-float-btn:active {
  transform: scale(0.95) translate(2px, 2px);
  box-shadow: 2px 2px 0 0 hsl(var(--navy));
}

.ai-chat-window {
  position: fixed;
  bottom: calc(2rem + 70px);
  right: 2rem;
  width: 360px;
  max-width: calc(100vw - 4rem);
  height: 480px;
  max-height: calc(100vh - 160px);
  z-index: 1000;
  background: hsl(var(--cream));
  border: 2.5px solid hsl(var(--navy));
  border-radius: 1.25rem;
  box-shadow: 8px 8px 0 0 hsl(var(--navy));
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-sans);
  box-sizing: border-box;
}

.ai-chat-window.active {
  display: flex;
}

.ai-chat-header {
  padding: 1rem 1.25rem;
  background: hsl(var(--navy));
  color: hsl(var(--paper));
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid hsl(var(--navy));
}

.ai-chat-header-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-chat-status-dot {
  width: 8px;
  height: 8px;
  background: hsl(var(--teal));
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.ai-chat-status-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: hsl(var(--teal) / 0.4);
  animation: ping 1.4s infinite;
}

.ai-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: hsl(var(--cream));
}

.ai-chat-message {
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  max-width: 85%;
  line-height: 1.45;
  box-sizing: border-box;
  font-family: var(--font-sans);
}

.ai-chat-message.bot {
  background: hsl(var(--paper));
  color: hsl(var(--navy));
  border: 1.5px solid hsl(var(--navy));
  align-self: flex-start;
  border-bottom-left-radius: 0.25rem;
}

.ai-chat-message.user {
  background: hsl(var(--orange));
  color: white;
  border: 1.5px solid hsl(var(--navy));
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
  box-shadow: 2px 2px 0 0 hsl(var(--navy));
}

.ai-chat-typing {
  font-size: 0.75rem;
  color: hsl(var(--ink-soft));
  align-self: flex-start;
  margin-left: 0.5rem;
  display: none;
  font-style: italic;
}

.ai-chat-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.ai-chat-quick-btn {
  font-size: 0.7rem;
  padding: 0.4rem 0.75rem;
  background: hsl(var(--paper));
  border: 1.5px solid hsl(var(--navy));
  border-radius: 20px;
  color: hsl(var(--navy));
  cursor: pointer;
  font-weight: 700;
  transition: all 0.15s ease;
}

.ai-chat-quick-btn:hover {
  background: hsl(var(--orange) / 0.1);
  border-color: hsl(var(--orange));
  color: hsl(var(--orange));
}

.ai-chat-input-area {
  padding: 0.75rem 1rem;
  background: hsl(var(--paper));
  border-top: 2.5px solid hsl(var(--navy));
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.ai-chat-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.85rem;
  background: transparent;
  color: hsl(var(--navy));
  font-family: inherit;
}

.ai-chat-send-btn {
  padding: 0.5rem 1rem;
  border: 1.5px solid hsl(var(--navy));
  background: hsl(var(--orange));
  color: white;
  font-weight: 800;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
  box-shadow: 2px 2px 0 0 hsl(var(--navy));
  transition: all 0.1s ease;
  font-family: inherit;
}

.ai-chat-send-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 hsl(var(--navy));
}