:root{
--ink:#0b2447; /* ANFA dark blue */
--accent:#34c759; /* glowing green */
--bg:#ffffff;
--muted:#f4f6f8;
--radius:16px;
--shadow:0 12px 32px rgba(0,0,0,.18);
--chat-h:84px;
}
@media (max-width: 480px){
  :root{ --chat-h: 96px; } /* a bit more space for small screens */

  #anfa-open{
    transform: scale(.92);
    transform-origin: right bottom;
  }
}

body{
  padding-bottom: calc(var(--chat-h) + env(safe-area-inset-bottom));
}

#anfa-open.chat-lift{
  bottom: calc(140px + env(safe-area-inset-bottom));
}

/* ===== Launcher button (Chat with us) ===== */
.chat-launcher{
position:fixed; 
right:22px; bottom:22px;
display:flex; 
align-items:center; gap:10px;
padding:12px 18px 12px 18px;
background:#073a02;
 color:#fff;
  border:0;
   border-radius:40px; 
cursor:pointer; box-shadow:var(--shadow);
transition:transform .18s ease, opacity .18s ease, background .18s ease;
z-index:1000;
}
.chat-launcher .svg{
  flex-shrink: 0;
  }
.chat-launcher:hover{ transform:translateY(-1px); background:#112f64; }
.chat-launcher .label{ white-space:nowrap; }
.chat-launcher .dot{
position:relative; left:16px; width:15px; height:15px; border-radius:50%;
background:var(--accent);

animation:dotPulse 1.8s infinite ease-in-out;
margin-right: 12px;
}
@keyframes dotPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.35);opacity:.75} }

/* Hide launcher when panel is open */
.anfa.open + .chat-launcher{ display:none; }

/* ===== Assistant Panel ===== */
#anfa{
  position: fixed;
  right: 14px;
  bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 1000;
}

.anfa{
position:fixed; right:22px; bottom:22px;
width:min(320px, 82vw); height:72vh; max-height:720px;
background:var(--bg); border-radius:20px; box-shadow:var(--shadow);
display:none; flex-direction:column; overflow:hidden; z-index:1001;
}
.anfa.open{ display:flex; }

.anfa-header{
background:var(--ink); color:#fff; padding:16px 16px 14px;
display:flex; align-items:center; justify-content:space-between;
}
.anfa .anfa__title{font-size:18px; font-weight:800; margin:0; color: rgb(6, 165, 131);}
.anfa__sub{font-size:13px; opacity:.85; margin-top:2px}
.anfa__close{
background:transparent; color:#fff; border:0; font-size:22px; line-height:1; cursor:pointer; float:right;
}

.anfa__body{
   padding:16px; 
   overflow:auto;
    }
    
.anfa__msg{ 
  display:flex;
   gap:10px; 
   margin:10px 0;
   
   }
.anfa__bubble{
background:var(--muted); padding:14px 16px; border-radius:14px;
line-height:1.45;

}

/* ===== Sakyna profile card ===== */
.profile{
display:grid; grid-template-columns:52px 1fr; gap:12px;
padding:12px; border-radius:14px; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.08);
margin-bottom:12px; align-items:center;
}
.profile__img{
width:52px; height:52px; border-radius:50%; object-fit:cover;
border:3px solid #fff; /* subtle gold ring */
}
h3 { font-weight: 400; font-size:16px; text-align: center; }
.profile__text{ margin:0; color:#444; }

/* Quick chip row */
.ab-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.ab-chip{
border:1px solid #e6e9ec; background:#fff; border-radius:999px;
padding:8px 12px; font-weight:600; cursor:pointer;
}
.chip:hover{ background:#f7f8fa; }

/* Input row */
.anfa__input{
margin-top:auto; padding:12px; display:flex; gap:8px; align-items:center; border-top:1px solid #eef1f4; background:#fff;
}
.anfa__field{
flex:1; border:1px solid #e6e9ec; border-radius:12px; padding:10px 12px; outline:none;
}
.anfa__send{
background:var(--ink); color:#fff; border:0; border-radius:12px; padding:10px 12px; cursor:pointer;
}

@media (max-width:480px){
.anfa{ height:80vh; right:12px; left:12px; width:auto; }
.anfa.open + .chat-launcher{ display:none; }
}
/* To stayle Sakyna image */
/* Panel layout: header stays, messages scroll */
.anfa-panel{
width:min(96vw,420px);
height:min(78vh,640px);
display:flex;
flex-direction:column;
border-radius:16px;
background:#FFFFFf;
overflow:hidden;


}
.anfa-head{
position:relative;
background:var(--ink,#0b2447);

padding:14px 16px 10px;
border-radius:16px 16px 0 0;
margin-top: -12px;
}

.anfa_body{
flex:1;
overflow:auto; /* messages scroll under the fixed header */
padding:16px;

}

/* Fixed coordinator card inside the header */
.coordinator-fixed{
margin-top: auto;
display:flex;
align-items:center;
gap:10px;
background:#ffffff;
color:#1c1c1c;
border-radius:12px;
padding:10px 12px;

}

.coordinator-fixed .meta .name{
font-weight:700;
line-height:1.1;
}
.coordinator-fixed .meta .role{
font-size:.85rem;
color:#516279;
}
/* Avatar + ONLINE glow */
.avatar{
position:relative;
width:80px; height:60px;
border-radius:50%;
overflow:hidden;
flex:0 0 44px;
}
.avatar img{
width:100%; height:100%; object-fit:cover;
}
/* pulsing green dot */
.online-dot{
position:absolute;
right:4px; bottom:8px;
width:12px; height:12px;
border-radius:50%;
background:#10d876; /* solid green */
box-shadow:0 0 0 0 rgba(16,216,118,.75);
animation:dotPulse 1.9s ease-out infinite;
}
/* Allow the ring to render outside the card if needed */
.sakyna-card { position: relative; overflow: visible;
margin-top: auto;
display:flex;
align-items:center;
gap:10px;
background:#fff;
color:#1c1c1c;
border-radius:12px;
padding:10px 12px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Avatar container */
.sakyna-avatar{
position: relative;
width: 56px;
height: 56px;
flex: 0 0 auto;
}
.sakyna-avatar img{
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
object-fit: cover;
position: relative;
z-index: 1; /* keep photo above the ring */
}
.sakyna-card .meta .name{
font-weight:400;
line-height:1.1;
}
.sakyna-card .meta .desc{
font-size:.70rem;
color:#516279;
text-align: center;
}
/* The animated, glowing ring (supports .live-ring OR .sakyna-ring) */
.sakyna-avatar .live-ring,
.sakyna-avatar .sakyna-ring{
position: absolute;
inset: -4px; /* a little outside the photo */
border-radius: 50%;
z-index: 0;

/* the gradient ring */
background: conic-gradient(
#00ff99 0deg,
#00cc66 120deg,
#00ff99 240deg,
#00cc66 360deg
);

/* “donut” cutout so the middle is transparent */
-webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
mask: radial-gradient(circle, transparent 60%, #000 61%);

/* soft outer glow */
box-shadow: 0 0 6px rgba(0, 255, 153, 0.45);

/* animations */
animation:
anfa-spin 2.8s linear infinite,
glowPulse 2.1s ease-in-out infinite;
will-change: transform, filter;
}

/* spin */
@keyframes anfa-spin { to { transform: rotate(360deg); } }

/* breathing glow */
@keyframes glowPulse {
0%, 100% { filter: drop-shadow(0 0 4px rgba(0,255,153,0.35)); }
50% { filter: drop-shadow(0 0 10px rgba(0,255,153,0.85)); }
}

/* Optional: keep the header “online dot” matching your look */
.anfa-head.dot,
.live .dot{
width: 12px; height: 12px; border-radius: 50%;
background: #1dd75f;
box-shadow: 0 0 0 0 rgba(29,215,95,.6);
animation: ping 1.6s ease-out infinite;
display: inline-block; margin-right: 8px;
}
@keyframes ping{
0% { box-shadow: 0 0 0 0 rgba(29,215,95,.6); }
80% { box-shadow: 0 0 0 10px rgba(29,215,95,0); }
100% { box-shadow: 0 0 0 0 rgba(29,215,95,0); }
}


@keyframes dotPulse{
0% { box-shadow:0 0 0 0 rgba(16,216,118,.75); }
70% { box-shadow:0 0 0 12px rgba(16,216,118,0); }
100% { box-shadow:0 0 0 0 rgba(16,216,118,0); }
}
@keyframes ringGlow{
0%,100%{ opacity:.7; filter:drop-shadow(0 0 6px rgba(16,216,118,.9)); }
50% { opacity:1; filter:drop-shadow(0 0 12px rgba(16,216,118,1)); }
}

/* ——— ANFA Assistant • Effects Pack ——— */
:root{

  --anfa-ink:#0b2447;

  --anfa-gold:#f4c430;

  --anfa-green:#16a34a; /* live dot */

  --anfa-bubble:#ffffff;

  --anfa-bubble-user:#0b2447;

}

/* 1) Gradient header + live dot with soft glow */
.anfa-head{
background: linear-gradient(135deg, var(--anfa-ink) 0%, #152f60 100% 100%);
color:#fff;
position:relative;
}
.anfa-head .live {
display:inline-flex; align-items:center; gap:.45rem;
font-weight:600; font-size:.9rem; color:#e8eef7;
margin-top: -15px;
}
.anfa-head .live .dot{
width:14px;height:14px;border-radius:50%;
background:var(--anfa-green);
box-shadow:0 0 0 0 rgba(22,163,74,.55);
animation:anfa-ping 1.6s ease-out infinite;
}
@keyframes anfa-ping{
0%{ box-shadow:0 0 0 0 rgba(22,163,74,.55) }
70%{ box-shadow:0 0 0 10px rgba(22,163,74,0) }
100%{ box-shadow:0 0 0 0 rgba(22,163,74,0) }
}