/* =============================================================
   AI ASSISTANT CHAT — glassmorphism chat UI for the Contact page.
   Uses the same CSS variables as style.css (colors, radius, motion).
   ============================================================= */

.ai-chat-wrap{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:24px;
  align-items:start;
}
@media (max-width:900px){
  .ai-chat-wrap{ grid-template-columns:1fr; }
}

/* ---------------- Side info card ---------------- */
.ai-side-card{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(17,17,17,.06);
  border-radius:var(--radius-lg);
  padding:26px;
  box-shadow:var(--shadow-sm);
}
.ai-side-card h3{ margin:0 0 6px; font-size:19px; font-weight:800; }
.ai-side-card p{ margin:0 0 18px; color:var(--color-text-muted); font-size:14px; }
.ai-side-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid rgba(17,17,17,.06); }
.ai-side-row:first-of-type{ border-top:none; }
.ai-side-row .ic{ width:36px; height:36px; border-radius:50%; background:rgba(181,101,29,.1); color:var(--color-accent-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ai-side-row strong{ display:block; font-size:14px; }
.ai-side-row span{ font-size:13px; color:var(--color-text-muted); }
.ai-quick-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.ai-chip{
  background:rgba(17,17,17,.05); border:1px solid rgba(17,17,17,.08);
  padding:8px 14px; border-radius:var(--radius-pill); font-size:13px; font-weight:600;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ai-chip:hover{ background:var(--color-accent); color:#2B1608; transform:translateY(-1px); }

/* ---------------- Chat shell ---------------- */
.ai-chat-shell{
  display:flex; flex-direction:column;
  height:min(720px, 80vh);
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(17,17,17,.07);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}

.ai-chat-head{
  display:flex; align-items:center; gap:12px;
  padding:16px 20px;
  background:rgba(17,17,17,.03);
  border-bottom:1px solid rgba(17,17,17,.06);
}
.ai-chat-avatar{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  display:flex; align-items:center; justify-content:center;
  color:#2B1608; font-weight:900; font-size:16px; flex-shrink:0;
  box-shadow:var(--shadow-accent);
}
.ai-chat-head-info strong{ display:block; font-size:15px; }
.ai-chat-status{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--color-text-muted); }
.ai-chat-status .dot{ width:8px; height:8px; border-radius:50%; background:var(--color-accent); box-shadow:0 0 0 3px rgba(181,101,29,.18); }
.ai-chat-status .dot.typing{ animation:dot-pulse 1s ease-in-out infinite; }
@keyframes dot-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---------------- Message list ---------------- */
.ai-chat-body{
  flex:1; overflow-y:auto; padding:22px 20px;
  display:flex; flex-direction:column; gap:14px;
  scroll-behavior:smooth;
}
.ai-chat-body::-webkit-scrollbar{ width:6px; }
.ai-chat-body::-webkit-scrollbar-thumb{ background:rgba(17,17,17,.15); border-radius:4px; }

.ai-msg-row{ display:flex; gap:10px; max-width:86%; animation:msg-in .35s var(--ease); }
@keyframes msg-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.ai-msg-row.user{ align-self:flex-start; flex-direction:row-reverse; } /* RTL: user bubble on the left */
.ai-msg-row.assistant{ align-self:flex-end; }

.ai-msg-avatar{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
}
.ai-msg-row.assistant .ai-msg-avatar{ background:var(--color-accent); color:#2B1608; }
.ai-msg-row.user .ai-msg-avatar{ background:var(--color-primary); color:#fff; }

.ai-bubble{
  padding:12px 16px; border-radius:18px; font-size:14.5px; line-height:1.65;
  white-space:pre-wrap; word-break:break-word;
}
.ai-msg-row.assistant .ai-bubble{ background:#fff; border:1px solid rgba(17,17,17,.06); border-top-right-radius:4px; box-shadow:var(--shadow-sm); }
.ai-msg-row.user .ai-bubble{ background:var(--color-primary); color:#fff; border-top-left-radius:4px; }

.ai-msg-time{ font-size:11px; color:var(--color-text-muted); margin-top:4px; }
.ai-msg-row.user .ai-msg-time{ text-align:left; }

/* Typing indicator bubble */
.ai-typing{ display:inline-flex; gap:4px; padding:14px 16px; }
.ai-typing span{ width:6px; height:6px; border-radius:50%; background:#9aa0a6; animation:typing-bounce 1.2s infinite; }
.ai-typing span:nth-child(2){ animation-delay:.15s; }
.ai-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typing-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }

/* ---------------- Attachments: product cards ---------------- */
.ai-attach{ align-self:flex-end; max-width:92%; width:100%; }
.ai-products-scroll{ display:flex; gap:12px; overflow-x:auto; padding:4px 2px 8px; }
.ai-product-card{
  flex:0 0 210px; background:#fff; border:1px solid rgba(17,17,17,.07);
  border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ai-product-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.ai-product-card img{ width:100%; height:130px; object-fit:cover; background:#f2f2f2; }
.ai-product-card-body{ padding:12px; }
.ai-product-card .brand{ font-size:11px; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.04em; }
.ai-product-card .name{ font-size:13.5px; font-weight:700; margin:2px 0 6px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:37px; }
.ai-product-card .price-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.ai-product-card .price{ font-weight:800; color:var(--color-accent-dark); font-size:14px; }
.ai-product-card .old-price{ font-size:12px; color:var(--color-text-muted); text-decoration:line-through; }
.ai-product-card .stock-out{ color:var(--color-danger); font-size:12px; font-weight:700; margin-bottom:8px; }
.ai-product-card .actions{ display:flex; gap:6px; }
.ai-product-card .actions .btn{ flex:1; padding:8px 6px; font-size:12px; }

/* Cart / order attachment cards */
.ai-info-card{
  background:#fff; border:1px solid rgba(17,17,17,.07); border-radius:var(--radius-md);
  padding:14px 16px; box-shadow:var(--shadow-sm); font-size:13.5px;
}
.ai-info-card .row{ display:flex; justify-content:space-between; padding:6px 0; border-top:1px dashed rgba(17,17,17,.08); }
.ai-info-card .row:first-child{ border-top:none; }
.ai-info-card .row.total{ font-weight:800; }
.ai-status-pill{ display:inline-block; padding:4px 12px; border-radius:var(--radius-pill); background:rgba(181,101,29,.12); color:var(--color-accent-dark); font-weight:700; font-size:12.5px; }
.ai-login-cta{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ---------------- Composer ---------------- */
.ai-chat-composer{
  display:flex; align-items:flex-end; gap:10px;
  padding:14px 16px; border-top:1px solid rgba(17,17,17,.07); background:rgba(255,255,255,.6);
}
.ai-chat-composer textarea{
  flex:1; resize:none; border:1px solid rgba(17,17,17,.1); border-radius:var(--radius-pill);
  padding:12px 18px; font-size:14px; max-height:100px; background:#fff;
  transition:border-color var(--dur-fast) var(--ease);
}
.ai-chat-composer textarea:focus{ outline:none; border-color:var(--color-accent); }
.ai-send-btn{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--color-accent); color:#2B1608; display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ai-send-btn:hover{ background:var(--color-accent-dark); transform:scale(1.06); }
.ai-send-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.ai-send-btn svg{ transform:rotate(180deg); } /* RTL: send icon points left->into the chat */