/* ─────────────────────────────────────────────
   Ava Modal Enhancements
───────────────────────────────────────────── */

/* Ava Modal Header */
.ava-modal-header {
  background-color: #198754; /* Bootstrap success */
  color: white;
  border-bottom: none;
  padding: 1rem;
}

.ava-modal-header .modal-title {
  color: white;
  font-weight: 600;
}

.ava-modal-header .btn-close-white {
  filter: invert(1); /* Ensures white close icon on green background */
}

/* Ava Separator */
.ava-separator {
  height: 4px;
  background-color: #198754;
  opacity: 0.2;
  border-radius: 2px;
  margin: 1rem 0;
}

/* Ava Input (homepage) */
#ask-ava {
  border-radius: 0.375rem;
  border: 1px solid #ccc;
  padding: 0.5rem 0.75rem;
}

/* Chat History Styling */
#ava-chat-history {
  min-height: 200px;
  background: #f8f9fa;
  padding: 1rem;
}

/* Ava Drawer (Mobile Only) */
#ava-chat-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1055;
  background: #fff;
  flex-direction: column;
  border-top: 4px solid #198754;
  max-height: 100vh;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

.ava-drawer-body {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#ava-drawer-chat-history {
  flex: 1;
  overflow-y: auto;
  background: #f8f9fa;
  padding: 1rem;
  margin-bottom: 1rem;
}

#ava-drawer-chat-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#ava-drawer-chat-form input[type="text"],
#ava-drawer-chat-form button {
  width: 100%;
}

#ava-drawer-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#ava-drawer-action-buttons .btn {
  width: 100%;
}

/* Ava CTA Hidden */
.ava-cta-hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* ─────────────────────────────────────────────
   Ava Chat Content Styling
───────────────────────────────────────────── */

/* User's Question */
.ava-question {
  font-weight: 600;
  font-size: 1.05rem;
  color: #000;
  margin-bottom: 0.5rem;
}

/* Ava’s Reply */
.ava-reply {
  font-size: 0.95rem;
  color: #333;
}

/* ─────────────────────────────────────────────
   Z-INDEX VALUES ARE CENTRALIZED
   See: core/static/core/css/z-index.css
   Do NOT add z-index rules here!
───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   Mobile Visibility Logic
───────────────────────────────────────────── */
@media (max-width: 767px) {
  #avaChatModal {
    display: none !important;
  }

  #ava-chat-drawer.d-none {
    display: none !important;
  }

  #ava-chat-drawer:not(.d-none) {
    display: flex !important;
  }

  .ava-chat-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem;
  }

  .ava-chat-wrapper .form-label {
    text-align: center;
    display: block;
  }

  .ava-chat-wrapper .input-group {
    width: 100%;
  }

  .ava-chat-wrapper .flex-grow-1 {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────
   Desktop Enhancements
───────────────────────────────────────────── */

@media (min-width: 768px) {
  .extra-wide {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .ava-headshot {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
  }

  .label-ava {
    text-shadow: 0 1px 0 #fff, 0 2px 4px rgba(0, 128, 0, 0.4);
    letter-spacing: 0.5px;
  }
}