/* ============================================================
   Tadfeen Assistant
   ------------------------------------------------------------
   Colours follow the app mark: a deep teal-green disc with a mint
   four-point star. The ring around the launcher is the site's gold,
   so the two brand colours meet on one control.
   ============================================================ */

:root{
  --ai-teal-1:#2f7d68;      /* mark, light edge  */
  --ai-teal-2:#1d5b4a;      /* mark, deep centre */
  --ai-mint:#5ce4ab;        /* the star          */
  --ai-gold:#c8a86a;        /* site gold         */
  --ai-gold-soft:#e6cf9b;
}

/* ---------------- launcher ---------------- */
.tt-ai-fab{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  width:60px;height:60px;padding:0;border:0;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--ai-teal-1), var(--ai-teal-2) 72%);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:9000;
  box-shadow:0 6px 22px rgba(15,71,50,.34);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.tt-ai-fab:hover{transform:scale(1.06)}
.tt-ai-fab:active{transform:scale(.96)}
.tt-ai-fab.open .fab-star{transform:rotate(90deg) scale(.86)}

/* The gold ring. Sits just outside the disc so both colours read clearly. */
.fab-ring{
  position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(var(--ai-gold),var(--ai-gold-soft),var(--ai-gold),var(--ai-gold-soft),var(--ai-gold));
  z-index:-1;
  animation:aiSpin 7s linear infinite;
}
.fab-ring::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--ai-teal-1), var(--ai-teal-2) 72%);
}
@keyframes aiSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fab-ring{animation:none}}

.fab-star{
  width:28px;height:28px;fill:var(--ai-mint);position:relative;
  transition:transform .22s ease;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.22));
}
/* A quiet pulse so the assistant is noticed once, not constantly. */
.fab-dot{
  position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;
  background:var(--ai-gold);border:2px solid #10493a;
}
.tt-ai-fab.open .fab-dot,
.tt-ai-fab.seen .fab-dot{display:none}

/* ---------------- panel ---------------- */
.tt-ai{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right));
  bottom:calc(88px + env(safe-area-inset-bottom));
  width:min(384px, calc(100vw - 32px));
  max-height:min(620px, calc(100vh - 140px));
  background:var(--paper,#fff);
  border:1px solid var(--line,#e6e0d2);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.20);
  display:flex;flex-direction:column;overflow:hidden;z-index:9001;
  opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .18s ease, transform .18s ease;
}
.tt-ai.open{opacity:1;transform:none}

.ai-head{
  display:flex;align-items:center;gap:11px;padding:13px 15px;
  background:linear-gradient(135deg,var(--ai-teal-2),var(--ai-teal-1));color:#fff;
}
.ai-mark{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.13);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(200,168,106,.55);
}
.ai-mark svg{width:19px;height:19px;fill:var(--ai-mint)}
.ai-head-txt{flex:1;min-width:0;display:grid;gap:1px}
.ai-head-txt b{font-size:14px;letter-spacing:.01em}
.ai-head-txt small{font-size:11px;opacity:.82}
.ai-x{
  border:0;background:rgba(255,255,255,.12);color:#fff;flex:none;
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ai-x:hover{background:rgba(255,255,255,.22)}
.ai-x svg{width:14px;height:14px}

.ai-body{
  flex:1;min-height:0;overflow-y:auto;padding:15px;
  display:flex;flex-direction:column;gap:13px;
  background:var(--bg,#f6f7f4);
  scrollbar-width:thin;scrollbar-color:#c9cfc7 transparent;
}
.ai-body::-webkit-scrollbar{width:8px}
.ai-body::-webkit-scrollbar-thumb{background:#c9cfc7;border-radius:20px;
  border:2px solid transparent;background-clip:content-box}

.ai-msg{display:flex;max-width:100%}
.ai-msg.me{justify-content:flex-end}
.ai-bubble{
  max-width:92%;padding:11px 13px;border-radius:14px;
  font-size:13.5px;line-height:1.6;
  background:var(--paper,#fff);border:1px solid var(--line,#e6e0d2);color:var(--ink,#1f2a24);
  word-break:break-word;
}
.ai-msg.me .ai-bubble{
  background:var(--ai-teal-2);border-color:var(--ai-teal-2);color:#fff;border-bottom-right-radius:5px;
}
.ai-msg.bot .ai-bubble{border-bottom-left-radius:5px}
.ai-bubble p{margin:0 0 9px}
.ai-bubble p:last-child{margin:0}
.ai-bubble b{color:var(--green-800,#0e4531);font-weight:700}
.ai-msg.me .ai-bubble b{color:#fff}
.ai-bubble hr{border:0;border-top:1px solid var(--line,#e6e0d2);margin:11px 0}

/* Live figures read as a small table rather than a paragraph. */
.ai-bubble .ai-stat{
  display:flex;justify-content:space-between;gap:12px;
  padding:5px 0;border-bottom:1px dotted var(--line,#ece7da);font-size:12.5px;
}
.ai-bubble .ai-stat:last-child{border-bottom:0}

/* ---- verse ---- */
.ai-verse{
  margin-top:11px;padding:11px 13px;border-radius:12px;
  background:linear-gradient(135deg,rgba(200,168,106,.13),rgba(92,228,171,.10));
  border:1px solid rgba(200,168,106,.42);
}
.ai-verse .ar{
  display:block;font-size:16px;line-height:1.9;text-align:right;
  color:var(--green-800,#0e4531);margin-bottom:5px;direction:rtl;
}
.ai-verse .en{display:block;font-size:12.5px;font-style:italic;color:#4a554e;line-height:1.55}
.ai-verse .ref{display:block;margin-top:5px;font-size:11px;font-weight:700;color:var(--ai-gold)}

/* ---- topic chips and follow-ups ---- */
.ai-topics{display:flex;flex-wrap:wrap;gap:7px}
.ai-chip{
  border:1px solid var(--line,#e6e0d2);background:var(--paper,#fff);color:var(--green-800,#0e4531);
  border-radius:20px;padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;
  text-align:left;line-height:1.35;
}
.ai-chip:hover{background:#eaf6ef;border-color:#b7ddc6}
.ai-more{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.ai-more-lbl{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:#8a948c;margin-bottom:1px;
}
.ai-cat{
  width:100%;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:#8a948c;margin:5px 0 1px;
}

/* ---- typing ---- */
.ai-typing{display:flex;gap:4px;padding:4px 2px}
.ai-typing i{
  width:6px;height:6px;border-radius:50%;background:var(--ai-teal-1);
  animation:aiBlink 1.3s infinite both;
}
.ai-typing i:nth-child(2){animation-delay:.18s}
.ai-typing i:nth-child(3){animation-delay:.36s}
@keyframes aiBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ---- composer ---- */
.ai-foot{
  display:flex;align-items:center;gap:9px;padding:11px 13px;
  border-top:1px solid var(--line,#e6e0d2);background:var(--paper,#fff);
}
.ai-foot input{
  flex:1;min-width:0;padding:10px 14px;font-size:13.5px;
  border:1px solid var(--line,#e6e0d2);border-radius:20px;
  background:var(--bg,#f6f7f4);color:var(--ink,#1f2a24);outline:none;
}
.ai-foot input:focus{border-color:var(--ai-teal-1);box-shadow:0 0 0 3px rgba(47,125,104,.13)}
.ai-foot button{
  flex:none;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 32% 28%, var(--ai-teal-1), var(--ai-teal-2) 72%);
  color:var(--ai-mint);display:flex;align-items:center;justify-content:center;
}
.ai-foot button:hover{filter:brightness(1.08)}
.ai-foot button svg{width:16px;height:16px}

/* ---- phones: full sheet ---- */
@media (max-width:560px){
  .tt-ai{
    right:0;left:0;bottom:0;width:100%;
    max-height:86vh;border-radius:20px 20px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tt-ai-fab{width:54px;height:54px}
  .fab-star{width:25px;height:25px}
}

/* Printing a card or a case sheet should not carry the assistant. */
@media print{.tt-ai,.tt-ai-fab{display:none !important}}

/* ============================================================
   FAQ page
   ============================================================ */
.faq-hero{padding:52px 0 34px;background:linear-gradient(180deg,#f2f5f1,var(--bg,#f6f7f4))}
.faq-hero .wrap{max-width:760px;margin:0 auto;padding:0 20px;text-align:center}
.faq-kicker{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ai-gold);background:rgba(200,168,106,.13);
  border:1px solid rgba(200,168,106,.42);border-radius:20px;padding:4px 13px;margin-bottom:14px;
}
.faq-hero h1{font-size:clamp(26px,4vw,36px);color:var(--green-800,#0e4531);margin:0 0 10px}
.faq-hero p{color:#5c675f;font-size:15px;line-height:1.65;margin:0 auto;max-width:560px}

.faq-search{position:relative;max-width:460px;margin:24px auto 0}
.faq-search svg{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:#8a948c;pointer-events:none;
}
.faq-search input{
  width:100%;padding:13px 16px 13px 42px;font-size:14.5px;
  border:1px solid var(--line,#e6e0d2);border-radius:26px;
  background:var(--paper,#fff);color:var(--ink,#1f2a24);outline:none;
}
.faq-search input:focus{border-color:var(--ai-teal-1);box-shadow:0 0 0 3px rgba(47,125,104,.12)}

.faq-main{padding:8px 0 60px}
.faq-main .wrap{max-width:760px;margin:0 auto;padding:0 20px}
.faq-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.faq-pill{
  border:1px solid var(--line,#e6e0d2);background:var(--paper,#fff);color:#4a554e;
  border-radius:20px;padding:7px 15px;font-size:12.5px;font-weight:600;cursor:pointer;
}
.faq-pill.on{background:var(--green-800,#0e4531);border-color:var(--green-800,#0e4531);color:#fff}

.faq-note{
  background:rgba(200,168,106,.11);border:1px solid rgba(200,168,106,.4);
  border-radius:11px;padding:11px 15px;font-size:13px;color:#6b5420;margin:0 0 22px;text-align:center;
}
.faq-note a{color:var(--green-800,#0e4531);font-weight:700}

.faq-cat{
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#8a948c;margin:26px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line,#e6e0d2);
}
.faq-cat:first-child{margin-top:0}
.faq-cat[hidden]{display:none}

.faq-item{
  background:var(--paper,#fff);border:1px solid var(--line,#e6e0d2);
  border-radius:12px;margin-bottom:9px;overflow:hidden;
}
.faq-item[hidden]{display:none}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 17px;cursor:pointer;font-size:14.5px;font-weight:600;
  color:var(--green-800,#0e4531);list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:#f7faf8}
.faq-item summary svg{width:16px;height:16px;flex:none;color:#8a948c;transition:transform .18s ease}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item[open] summary{border-bottom:1px solid var(--line,#e6e0d2)}
.faq-a{padding:15px 17px}
.faq-a p{margin:0 0 11px;font-size:14px;line-height:1.7;color:#4a554e}
.faq-a p:last-child{margin:0}

.faq-none{text-align:center;color:#7b857e;font-size:14px;padding:30px 0}
.faq-cta{
  margin-top:38px;padding:28px 24px;text-align:center;
  background:linear-gradient(135deg,rgba(47,125,104,.07),rgba(200,168,106,.09));
  border:1px solid var(--line,#e6e0d2);border-radius:16px;
}
.faq-cta h3{margin:0 0 6px;font-size:18px;color:var(--green-800,#0e4531)}
.faq-cta p{margin:0 0 16px;color:#5c675f;font-size:14px}

/* ============================================================
   Sitting alongside the mobile tab bar
   ------------------------------------------------------------
   V112 puts a fixed tab bar across the bottom on phones, 64px tall
   plus the safe area. The launcher lifts above it so the two never
   overlap, and the panel starts above the launcher.
   ============================================================ */
@media (max-width:920px){
  .tt-ai-fab{
    bottom:calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

/* The panel is a bottom sheet on phones, so it clears the tab bar by
   sitting on top of it rather than above it — but its own padding
   keeps the composer reachable. */
@media (max-width:560px){
  .tt-ai{
    bottom:0;
    max-height:84vh;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 4px);
    z-index:9002;              /* above the tab bar while open */
  }
}