/* ========================================
   Al-Quran — AI Companion Page
   ======================================== */

/* ── HERO ── */
.ai-hero {
  position:relative; z-index:1;
  padding:6rem 1.5rem 0;
  text-align:center; max-width:680px; margin:0 auto;
}
.ai-kicker {
  font-size:0.65rem; font-weight:600;
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem;
  display:flex; align-items:center; justify-content:center; gap:0.75rem;
}
.ai-kicker::before, .ai-kicker::after {
  content:''; display:inline-block;
  width:28px; height:1px; background:var(--gold); opacity:0.4;
}
.ai-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.2rem,5.5vw,3.8rem);
  font-weight:300; color:var(--text); line-height:1.1;
  margin-bottom:0.75rem;
}
.ai-title em { font-style:italic; color:var(--gold2); }
.ai-sub {
  font-size:clamp(0.85rem,2vw,0.95rem);
  color:var(--text2); line-height:1.8; font-weight:300;
  max-width:500px; margin:0 auto 2rem;
}

/* ── CHAT CARD ── */
.ai-page {
  position:relative; z-index:1;
  padding:2rem 1.5rem 4rem;
  max-width:720px; margin:0 auto;
}

.ai-chat-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:24px; overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,0.3);
}

.ai-chat-header {
  display:flex; align-items:center; gap:0.75rem;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--border2);
  background:rgba(12,16,32,0.6);
}

.ai-chat-header-icon {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ai-chat-header-icon svg { width:18px; height:18px; color:#07090f; }

.ai-chat-header-name {
  font-family:'Cormorant Garamond',serif;
  font-size:1rem; color:var(--text);
}
.ai-chat-header-status {
  font-size:0.65rem; color:var(--text3); margin-top:0.1rem;
}

/* ── MESSAGES ── */
.ai-messages {
  padding:1.5rem; min-height:320px; max-height:480px;
  overflow-y:auto; display:flex; flex-direction:column; gap:0.85rem;
  scrollbar-width:thin; scrollbar-color:var(--border2) transparent;
}

.ai-welcome {
  text-align:center; padding:1.5rem 0.5rem;
  color:var(--text3); margin:auto;
}
.ai-welcome-icon { font-size:2.4rem; margin-bottom:0.75rem; display:block; }
.ai-welcome h4 {
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem; font-weight:400;
  color:var(--text2); margin-bottom:0.4rem;
}
.ai-welcome p { font-size:0.82rem; line-height:1.7; max-width:400px; margin:0 auto; }

.ai-suggestions {
  display:flex; flex-wrap:wrap; gap:0.5rem;
  justify-content:center; margin-top:1.25rem;
}
.ai-suggestion {
  background:rgba(201,148,58,0.06);
  border:1px solid rgba(201,148,58,0.18);
  border-radius:50px; padding:0.4rem 1rem;
  color:var(--gold2); font-size:0.73rem; cursor:pointer;
  transition:all 0.2s; white-space:nowrap;
}
.ai-suggestion:hover {
  background:rgba(201,148,58,0.12);
  border-color:rgba(201,148,58,0.35);
  transform:translateY(-1px);
}

.ai-msg {
  max-width:88%; padding:0.85rem 1.15rem; border-radius:16px;
  font-size:0.85rem; line-height:1.7;
  animation:aiMsgIn 0.3s ease;
}
.ai-msg-user {
  align-self:flex-end;
  background:rgba(201,148,58,0.1);
  border:1px solid rgba(201,148,58,0.2);
  color:var(--text); border-bottom-right-radius:4px;
}
.ai-msg-bot {
  align-self:flex-start;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border2);
  color:var(--text2); border-bottom-left-radius:4px;
}
.ai-msg-bot em { color:var(--gold2); font-style:normal; }
.ai-msg-bot a { color:var(--gold2); }

@keyframes aiMsgIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── INPUT ── */
.ai-input-area {
  display:flex; gap:0.5rem; padding:1rem 1.5rem 1.25rem;
  border-top:1px solid var(--border2);
  background:rgba(12,16,32,0.4);
}
.ai-input {
  flex:1; background:var(--bg3); border:1px solid var(--border2);
  border-radius:50px; padding:0.75rem 1.25rem;
  color:var(--text); font-family:'DM Sans',sans-serif;
  font-size:0.88rem; outline:none;
  transition:border-color 0.2s;
}
.ai-input:focus { border-color:rgba(201,148,58,0.3); }
.ai-input::placeholder { color:var(--text3); }

.ai-send-btn {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:opacity 0.2s, transform 0.15s;
}
.ai-send-btn:disabled { opacity:0.35; cursor:not-allowed; }
.ai-send-btn:not(:disabled):hover { transform:scale(1.05); }
.ai-send-btn svg { width:16px; height:16px; color:#07090f; }

/* ── LOADING ── */
.ai-loading {
  display:flex; align-items:center; gap:0.4rem;
  padding:0.5rem 0;
}
.ai-loading-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--text3);
  animation:aiDot 1.2s infinite;
}
.ai-loading-dot:nth-child(2) { animation-delay:0.2s; }
.ai-loading-dot:nth-child(3) { animation-delay:0.4s; }

@keyframes aiDot {
  0%,80%,100% { opacity:0.3; transform:scale(0.8); }
  40% { opacity:1; transform:scale(1); }
}

/* ── RESPONSIVE ── */
@media (max-width:640px) {
  .ai-hero { padding:5rem 1.25rem 0; }
  .ai-page { padding:1.5rem 1rem 3rem; }
  .ai-chat-header { padding:1rem 1.25rem; }
  .ai-messages { padding:1rem; max-height:400px; }
  .ai-input-area { padding:0.85rem 1.25rem 1rem; }
  .ai-msg { max-width:92%; font-size:0.82rem; }
}