/* MFC Smart Chatbot v4 — No API, Image Cards */
:root {
  --r:  #8B1A1A;
  --rdk:#6b1313;
  --pk: #e91e8c;
  --rlt:#fdf2f2;
  --bg: #ffffff;
  --sf: #fdf8f8;
  --bd: #e8d0d0;
  --tx: #2c1010;
  --mu: #7a4a4a;
}

/* Overlay */
#mfcf4-overlay {
  display:none; position:fixed; inset:0;
  z-index:999990 !important;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  animation:f4fade .2s ease;
}
#mfcf4-overlay.open{display:block}
@keyframes f4fade{from{opacity:0}to{opacity:1}}

/* Toggle Button */
#mfcf4-toggle {
  position:fixed !important;
  bottom:26px !important; right:26px !important;
  z-index:999999 !important;
  width:64px !important; height:64px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,var(--r) 0%,var(--pk) 100%) !important;
  color:#fff !important; border:none !important;
  cursor:pointer !important;
  box-shadow:0 4px 22px rgba(139,26,26,.45) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:28px !important;
  padding:0 !important; margin:0 !important;
  opacity:1 !important; visibility:visible !important;
  transition:transform .2s, box-shadow .2s;
}
#mfcf4-toggle:hover{transform:scale(1.09);box-shadow:0 6px 28px rgba(139,26,26,.55) !important}
#mfcf4-toggle .f4-open,
#mfcf4-toggle .f4-close{position:absolute;transition:opacity .2s}
#mfcf4-toggle .f4-close{opacity:0;font-size:20px}
#mfcf4-toggle.open .f4-open{opacity:0}
#mfcf4-toggle.open .f4-close{opacity:1}

/* Pulse */
#mfcf4-toggle::before{
  content:'';position:absolute;inset:-7px;border-radius:50%;
  border:2px solid var(--r);opacity:0;
  animation:f4pulse 2.5s ease-out 2s 3;
}
@keyframes f4pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}

/* Chat Window — centered */
#mfcf4-window {
  position:fixed !important;
  top:50% !important; left:50% !important;
  transform:translate(-50%,-48%) scale(.93);
  z-index:999995 !important;
  width:580px;
  max-width:calc(100vw - 24px);
  height:660px;
  max-height:calc(100vh - 50px);
  background:var(--bg);
  border-radius:18px;
  box-shadow:0 24px 64px rgba(0,0,0,.22),0 4px 20px rgba(139,26,26,.1);
  border:1px solid var(--bd);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; pointer-events:none;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),opacity .22s;
}
#mfcf4-window.open{
  transform:translate(-50%,-50%) scale(1);
  opacity:1; pointer-events:all;
}

/* Header */
#mfcf4-header{
  background:linear-gradient(135deg,var(--r) 0%,#a8203a 60%,var(--pk) 100%);
  color:#fff; padding:14px 18px;
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.f4-av{
  width:44px;height:44px;background:rgba(255,255,255,.18);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
}
.f4-hi{flex:1}
.f4-hi strong{display:block;font-size:16px;font-weight:700}
.f4-hi span{font-size:12px;opacity:.85}
.f4-dot{width:8px;height:8px;background:#4ade80;border-radius:50%;display:inline-block;margin-right:5px;animation:f4blink 2.2s infinite}
@keyframes f4blink{0%,100%{opacity:1}50%{opacity:.35}}
#mfcf4-close{
  background:rgba(255,255,255,.18);border:none;color:#fff;
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  font-size:17px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .15s;
}
#mfcf4-close:hover{background:rgba(255,255,255,.32)}

/* Messages */
#mfcf4-msgs{
  flex:1;overflow-y:auto;
  padding:16px 16px 8px;
  display:flex;flex-direction:column;gap:14px;
  background:var(--sf);
  scroll-behavior:smooth;
}
#mfcf4-msgs::-webkit-scrollbar{width:4px}
#mfcf4-msgs::-webkit-scrollbar-thumb{background:var(--bd);border-radius:4px}

/* Bubbles */
.f4-msg{display:flex;align-items:flex-end;gap:8px;max-width:90%;animation:f4up .22s ease}
.f4-msg.user{align-self:flex-end;flex-direction:row-reverse}
.f4-msg.bot{align-self:flex-start}
@keyframes f4up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.f4-ico{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.f4-msg.bot .f4-ico{background:linear-gradient(135deg,var(--r),var(--pk));color:#fff}
.f4-msg.user .f4-ico{background:var(--bd)}

.f4-bub{padding:10px 15px;border-radius:14px;font-size:14px;line-height:1.55;color:var(--tx);word-break:break-word}
.f4-msg.bot  .f4-bub{background:var(--bg);border:1px solid var(--bd);border-bottom-left-radius:4px}
.f4-msg.user .f4-bub{background:linear-gradient(135deg,var(--r),#c0254a);color:#fff;border-bottom-right-radius:4px}
.f4-bub a{color:var(--r);font-weight:600;text-decoration:none}
.f4-bub a:hover{color:var(--pk)}
.f4-bub p{margin:0 0 6px}
.f4-bub p:last-child{margin:0}
.f4-bub strong{font-weight:700}

/* ── RESULT CARDS WITH IMAGE ── */
.f4-results{
  display:flex;flex-direction:column;gap:10px;
  margin-top:8px;width:100%;
}
.f4-card{
  display:flex;gap:11px;align-items:flex-start;
  background:#fff;
  border:1px solid var(--bd);
  border-left:3px solid var(--pk);
  border-radius:10px;
  padding:10px;
  text-decoration:none;
  transition:background .15s,border-left-color .15s,box-shadow .15s;
  cursor:pointer;
}
.f4-card:hover{
  background:var(--rlt);
  border-left-color:var(--r);
  box-shadow:0 2px 12px rgba(139,26,26,.12);
}
.f4-card-img{
  width:72px;height:60px;
  object-fit:cover;border-radius:6px;
  flex-shrink:0;background:#f0e8e8;
}
.f4-card-img-placeholder{
  width:72px;height:60px;border-radius:6px;flex-shrink:0;
  background:linear-gradient(135deg,var(--r),var(--pk));
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff;
}
.f4-card-body{flex:1;min-width:0}
.f4-card-cat{font-size:10.5px;color:var(--pk);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.f4-card-title{font-size:13.5px;font-weight:700;color:var(--r);line-height:1.35;margin-bottom:4px}
.f4-card:hover .f4-card-title{color:var(--pk)}
.f4-card-exc{font-size:12px;color:var(--mu);line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.f4-card-date{font-size:11px;color:#aaa;margin-top:3px}

/* No results */
.f4-nores{font-size:13.5px;color:var(--mu)}
.f4-nores a{color:var(--r);font-weight:600}

/* Suggestion chips */
#mfcf4-chips{
  padding:4px 16px 10px;
  display:flex;flex-wrap:wrap;gap:6px;
  background:var(--sf);
}
.f4-chip{
  background:#fff;color:var(--r);
  border:1px solid rgba(139,26,26,.28);
  border-radius:20px;padding:5px 13px;
  font-size:12.5px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;
}
.f4-chip:hover{background:var(--pk);color:#fff;border-color:var(--pk)}

/* Typing */
.f4-typing .f4-bub{display:flex;align-items:center;gap:5px;padding:13px 17px}
.f4-da{width:7px;height:7px;border-radius:50%;background:var(--mu);animation:f4b 1.2s infinite}
.f4-da:nth-child(2){animation-delay:.2s}
.f4-da:nth-child(3){animation-delay:.4s}
@keyframes f4b{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}}

/* Input */
#mfcf4-input-wrap{
  padding:12px 14px;border-top:1px solid var(--bd);
  display:flex;align-items:flex-end;gap:9px;
  background:var(--bg);flex-shrink:0;
}
#mfcf4-input{
  flex:1;border:1.5px solid var(--bd);border-radius:24px;
  padding:10px 18px;font-size:14px;color:var(--tx);
  background:var(--sf);outline:none;resize:none;
  min-height:44px;max-height:110px;line-height:1.45;font-family:inherit;
  transition:border-color .2s,box-shadow .2s;
}
#mfcf4-input:focus{border-color:var(--pk);box-shadow:0 0 0 3px rgba(233,30,140,.1);background:#fff}
#mfcf4-input::placeholder{color:var(--mu)}

#mfcf4-send{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--r),var(--pk));
  color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 12px rgba(139,26,26,.3);
  transition:opacity .2s,transform .15s;
}
#mfcf4-send:hover:not(:disabled){opacity:.88;transform:scale(1.07)}
#mfcf4-send:disabled{opacity:.4;cursor:not-allowed}

/* Footer */
#mfcf4-foot{
  text-align:center;padding:5px 0 8px;
  font-size:11px;color:var(--mu);
  background:var(--bg);border-top:1px solid var(--bd);
}
#mfcf4-foot a{color:var(--r);text-decoration:none;font-weight:600}
.f4-badge{
  display:inline-block;
  background:linear-gradient(90deg,var(--r),var(--pk));
  color:#fff;font-size:10px;font-weight:700;
  padding:1px 7px;border-radius:10px;margin-left:5px;vertical-align:middle;
}

/* Mobile */
@media(max-width:560px){
  #mfcf4-window{
    top:auto !important;left:0 !important;right:0;bottom:0;
    transform:translateY(20px) !important;
    width:100%;max-width:100%;
    height:88vh;max-height:88vh;
    border-radius:20px 20px 0 0;
  }
  #mfcf4-window.open{transform:translateY(0) !important}
  #mfcf4-toggle{bottom:20px !important;right:20px !important}
  .f4-card-img,.f4-card-img-placeholder{width:56px;height:50px}
}