/* ==========================================================================
   HITASHIE BUILDERS — SITE WIDGETS
   Enquiry popup modal + AI Chat Assistant.
   Built on the same design tokens as style.css (--ink, --gold, --font-*),
   kept in a separate file so the two systems (page layout vs. floating
   widgets) stay easy to maintain independently.
   ========================================================================== */

/* --------------------------------------------------------------------
   SHARED MODAL SHELL (used by the enquiry popup)
-------------------------------------------------------------------- */
.modal-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,8,5,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-panel{
  position:relative;
  width:100%; max-width:900px; max-height:88vh;
  border-radius:26px;
  background:var(--ink-2); border:1px solid var(--line);
  box-shadow:var(--shadow-ink);
  transform:translateY(18px) scale(.98);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column;
}
.modal-overlay.open .modal-panel{ transform:translateY(0) scale(1); }
.modal-scroll{ overflow-y:auto; padding:52px; }
.modal-close{
  position:absolute; top:18px; right:18px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--ink-3);
  color:var(--text-light); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:.25s;
}
.modal-close:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.modal-close svg{ width:18px; height:18px; }
.modal-head{ margin-bottom:30px; max-width:60ch; }
.modal-head h2{ margin-bottom:10px; }
.modal-head p{ color:var(--text-light-dim); margin:0; }
.enquiry-modal .modal-form{ padding:0; }

@media (max-width:620px){
  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal-panel{ max-width:100%; max-height:92vh; width:100%; }
  .modal-scroll{ padding:30px 22px 26px; }
}

/* --------------------------------------------------------------------
   FLOATING AI-CHAT BUTTON (sits in the same float-stack as WhatsApp)
-------------------------------------------------------------------- */
.fab-chat{
  background:var(--gold);
  color:#fff; position:relative;
}
.fab-chat svg{ width:26px; height:26px; }
.fab-chat .chat-dot{
  position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%;
  background:#1F7A4C; border:2px solid var(--ink);
}

/* --------------------------------------------------------------------
   AI CHAT PANEL
-------------------------------------------------------------------- */
.chat-panel{
  position:fixed; right:24px; bottom:100px; z-index:1500;
  width:392px; max-width:calc(100vw - 32px);
  height:min(640px, calc(100vh - 140px));
  border-radius:26px;
  background:var(--ink-2); border:1px solid var(--line);
  box-shadow:var(--shadow-ink);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.97);
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s ease;
}
.chat-panel.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

.chat-head{
  display:flex; align-items:center; gap:12px; padding:18px 18px;
  background:var(--ink-3); border-bottom:1px solid var(--line-soft); flex:none;
}
.chat-avatar{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:var(--gold);
  display:flex; align-items:center; justify-content:center; color:#fff;
  position:relative;
}
.chat-avatar svg{ width:22px; height:22px; }
.chat-avatar::after{
  content:""; position:absolute; bottom:-1px; right:-1px; width:11px; height:11px;
  border-radius:50%; background:#1F7A4C; border:2px solid var(--ink-3);
}
.chat-head-info{ flex:1; min-width:0; }
.chat-head-info b{ display:block; font-family:var(--font-display); font-size:1rem; color:var(--text-light); }
.chat-head-info span{ display:flex; align-items:center; gap:6px; font-size:.78rem; color:#8fe0af; }
.chat-head-info span::before{ content:""; width:6px; height:6px; border-radius:50%; background:#1F7A4C; }
.chat-head-actions{ display:flex; gap:6px; flex:none; }
.chat-head-actions button{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:transparent;
  color:var(--text-light-dim); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:.2s;
}
.chat-head-actions button:hover{ color:var(--gold-light); border-color:var(--gold); }
.chat-head-actions svg{ width:15px; height:15px; }

.chat-body{
  flex:1; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:14px;
  scroll-behavior:smooth;
}
.chat-msg{ display:flex; gap:10px; max-width:88%; }
.chat-msg.bot{ align-self:flex-start; }
.chat-msg.user{ align-self:flex-end; flex-direction:row-reverse; }
.chat-msg .bubble{
  padding:11px 15px; font-size:.88rem; line-height:1.5;
  border:1px solid var(--line-soft);
}
.chat-msg.bot .bubble{ background:var(--ink-3); color:var(--text-light); border-radius:4px 16px 16px 16px; }
.chat-msg.user .bubble{ background:var(--gold); color:#fff; border:none; border-radius:16px 4px 16px 16px; }
.chat-msg .mini-avatar{
  width:26px; height:26px; border-radius:50%; flex:none; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink-3); border:1px solid var(--line); color:var(--gold-light);
}
.chat-msg .mini-avatar svg{ width:14px; height:14px; }
.chat-time{ font-size:.68rem; color:var(--text-light-dim); margin-top:4px; display:block; }
.chat-msg.user .chat-time{ text-align:right; }

.chat-typing{ display:flex; gap:4px; align-items:center; padding:11px 15px; }
.chat-typing span{ width:6px; height:6px; border-radius:50%; background:var(--text-light-dim); animation:chatTyping 1.1s infinite ease-in-out; }
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes chatTyping{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

.chat-suggestions{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; flex:none; }
.chat-suggestions button{
  border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--text-light-dim);
  font-size:.78rem; padding:8px 13px; cursor:pointer; transition:.2s; white-space:nowrap;
}
.chat-suggestions button:hover{ border-color:var(--gold); color:var(--gold-light); }

.chat-lead-cta{
  margin-top:10px; display:inline-flex; align-items:center; gap:8px; border-radius:999px;
  background:#1F7A4C; color:#fff; font-weight:700; font-size:.82rem;
  padding:10px 16px; border:none; cursor:pointer; transition:.2s;
}
.chat-lead-cta:hover{ background:#22935a; }
.chat-lead-cta svg{ width:15px; height:15px; }

.chat-input-row{
  display:flex; align-items:flex-end; gap:10px; padding:14px 16px;
  border-top:1px solid var(--line-soft); background:var(--ink-3); flex:none;
}
.chat-input-row textarea{
  flex:1; resize:none; max-height:110px; min-height:22px;
  background:transparent; border:none; color:var(--text-light);
  font-family:inherit; font-size:.88rem; line-height:1.4; padding:8px 0; outline:none;
}
.chat-input-row textarea::placeholder{ color:var(--text-light-dim); }
.chat-send{
  width:38px; height:38px; flex:none; border:none; border-radius:50%;
  background:var(--gold); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:.2s;
}
.chat-send:disabled{ opacity:.35; cursor:not-allowed; }
.chat-send:not(:disabled):hover{ transform:scale(1.06); }
.chat-send svg{ width:16px; height:16px; }

.chat-error{
  margin:0 18px 12px; padding:10px 14px; font-size:.8rem; border-radius:12px;
  background:rgba(196,84,79,.12); border:1px solid rgba(196,84,79,.4); color:#e79c98;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex:none;
}
.chat-error[hidden]{ display:none; }
.chat-error button{ background:none; border:none; color:#e79c98; text-decoration:underline; cursor:pointer; font-size:.8rem; padding:0; }

@media (prefers-reduced-motion:reduce){
  .modal-panel,.chat-panel,.chat-typing span{ transition:none; animation:none; }
}

@media (max-width:520px){
  .chat-panel{
    right:0; bottom:0; left:0; top:0;
    width:100%; height:100%; max-width:100%; max-height:100%;
    border:none;
  }
  .float-stack{ align-items:flex-end; }
}