/* Orilla Chatbot widget — "Olivia" */
@keyframes pulse-ring {
  0%   { box-shadow: 0 6px 24px rgba(0,0,0,.3), 0 0 0 0 rgba(201,162,75,.6); }
  70%  { box-shadow: 0 6px 24px rgba(0,0,0,.3), 0 0 0 14px rgba(201,162,75,0); }
  100% { box-shadow: 0 6px 24px rgba(0,0,0,.3), 0 0 0 0 rgba(201,162,75,0); }
}
@keyframes panel-in { 0%{opacity:0;transform:translateY(20px) scale(.96);} 70%{transform:translateY(-4px) scale(1.01);} 100%{opacity:1;transform:translateY(0) scale(1);} }
@keyframes msg-in { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
@keyframes dot-bounce { 0%,80%,100%{transform:translateY(0);opacity:.35;} 40%{transform:translateY(-7px);opacity:1;} }
@keyframes glow-gold { 0%,100%{box-shadow:0 0 8px rgba(201,162,75,.4);} 50%{box-shadow:0 0 20px rgba(201,162,75,.8);} }
@keyframes avatar-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }

#orilla-bot-bubble {
  position: fixed; bottom: 22px; right: 22px;
  width: 62px; height: 62px; border-radius: 50%;
  background: #1f3a2f; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 99998; overflow: visible;
  animation: pulse-ring 2.8s ease-out infinite;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
#orilla-bot-bubble:hover { transform: scale(1.12); animation: glow-gold 1s ease-in-out infinite; }
#orilla-bot-bubble .bubble-photo { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:2px solid #c9a24b; }
#orilla-bot-bubble .bubble-dot { position:absolute; bottom:2px; right:2px; width:13px; height:13px; border-radius:50%; background:#4ade80; border:2px solid #fff; box-shadow:0 0 6px rgba(74,222,128,.8); }

#orilla-bot-panel {
  position: fixed; bottom: 96px; right: 22px;
  width: 380px; max-width: calc(100vw - 32px);
  height: 580px; max-height: calc(100vh - 130px);
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 56px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.1);
  z-index: 99999; display: none; flex-direction: column;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
#orilla-bot-panel.open { display: flex; animation: panel-in .35s cubic-bezier(.34,1.56,.64,1) both; }
#orilla-bot-panel.rtl { direction: rtl; }

.orilla-bot-head {
  background: linear-gradient(135deg, #1a3028 0%, #1f3a2f 40%, #2d5240 100%);
  color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.orilla-bot-head::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 80% 50%, rgba(201,162,75,.12) 0%, transparent 70%); pointer-events:none; }
.orilla-bot-head .avatar { width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0; animation:avatar-float 3s ease-in-out infinite; box-shadow:0 2px 10px rgba(201,162,75,.4); border:2px solid rgba(201,162,75,.7); }
.orilla-bot-head .avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.orilla-bot-head .head-text h4 { margin:0; font-size:14px; font-weight:700; letter-spacing:.02em; }
.orilla-bot-head .head-text p { margin:0; font-size:11px; opacity:.7; display:flex; align-items:center; gap:5px; }
.online-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; display:inline-block; box-shadow:0 0 0 2px rgba(74,222,128,.3); animation:pulse-ring 1.8s ease-out infinite; }
.orilla-bot-head .lang { margin-inline-start:auto; display:flex; gap:4px; }
.orilla-bot-head .lang button { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:11px; padding:3px 9px; border-radius:12px; cursor:pointer; transition:all .15s; }
.orilla-bot-head .lang button:hover { background:rgba(255,255,255,.22); }
.orilla-bot-head .lang button.active { background:#c9a24b; border-color:#c9a24b; }
.orilla-bot-head .close { background:rgba(255,255,255,.1); border:none; color:#fff; font-size:18px; cursor:pointer; line-height:1; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .15s; flex-shrink:0; }
.orilla-bot-head .close:hover { background:rgba(255,255,255,.25); }

.orilla-bot-msgs { flex:1; overflow-y:auto; padding:14px; background:#f7f6f3; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.orilla-bot-msgs::-webkit-scrollbar { width:4px; }
.orilla-bot-msgs::-webkit-scrollbar-thumb { background:#ddd; border-radius:4px; }

.orilla-msg { max-width:85%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.55; animation:msg-in .2s ease both; }
.orilla-msg.bot { background:#fff; color:#222; align-self:flex-start; border:1px solid #eae8e4; border-radius:4px 14px 14px 14px; box-shadow:0 1px 4px rgba(0,0,0,.05); white-space:pre-wrap; }
.orilla-msg.user { background:linear-gradient(135deg,#1f3a2f,#2d5240); color:#fff; align-self:flex-end; border-radius:14px 14px 4px 14px; white-space:pre-wrap; }
#orilla-bot-panel.rtl .orilla-msg.bot { align-self:flex-end; border-radius:14px 4px 14px 14px; }
#orilla-bot-panel.rtl .orilla-msg.user { align-self:flex-start; border-radius:4px 14px 14px 14px; }
.orilla-msg.bot a { color:#1f3a2f; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.orilla-msg.bot a:hover { color:#c9a24b; }
.orilla-msg.bot strong { font-weight:700; color:#1f3a2f; }

.orilla-typing { display:flex; align-items:center; gap:5px; padding:12px 16px; background:#fff; border:1px solid #eae8e4; border-radius:4px 14px 14px 14px; align-self:flex-start; box-shadow:0 1px 4px rgba(0,0,0,.05); animation:msg-in .2s ease both; }
.orilla-typing span { width:7px; height:7px; border-radius:50%; background:#c9a24b; display:inline-block; animation:dot-bounce 1.3s ease-in-out infinite; }
.orilla-typing span:nth-child(2) { animation-delay:.18s; background:#1f3a2f; }
.orilla-typing span:nth-child(3) { animation-delay:.36s; background:#c9a24b; }

.orilla-quick { display:flex; flex-wrap:wrap; gap:6px; padding:6px 12px 8px; background:#f7f6f3; flex-shrink:0; }
.orilla-quick button { background:#fff; border:1px solid #e0ddd8; border-radius:16px; padding:5px 12px; font-size:12px; cursor:pointer; color:#1f3a2f; white-space:nowrap; transition:all .18s cubic-bezier(.34,1.56,.64,1); font-weight:500; }
.orilla-quick button:hover { background:#1f3a2f; color:#fff; border-color:#1f3a2f; transform:translateY(-2px); box-shadow:0 4px 12px rgba(31,58,47,.2); }

.orilla-bot-foot { border-top:1px solid #eee; padding:10px 12px; display:flex; gap:8px; background:#fff; flex-shrink:0; }
.orilla-bot-foot input { flex:1; border:1px solid #e0ddd8; border-radius:22px; padding:9px 15px; font-size:13.5px; outline:none; background:#faf9f7; transition:all .15s; }
.orilla-bot-foot input:focus { border-color:#1f3a2f; background:#fff; box-shadow:0 0 0 3px rgba(31,58,47,.08); }
.orilla-bot-foot button { background:linear-gradient(135deg,#1f3a2f,#2d5240); border:0; color:#fff; border-radius:22px; padding:0 18px; cursor:pointer; font-size:13px; white-space:nowrap; transition:all .15s; font-weight:500; }
.orilla-bot-foot button:hover:not(:disabled) { transform:scale(1.04); box-shadow:0 4px 14px rgba(31,58,47,.3); }
.orilla-bot-foot button:disabled { opacity:.4; cursor:default; }

.orilla-resform { background:#fff; border:1px solid #eae8e4; border-radius:12px; padding:14px; align-self:stretch; display:flex; flex-direction:column; gap:8px; animation:msg-in .2s ease both; }
.orilla-resform input { border:1px solid #ddd; border-radius:8px; padding:8px 11px; font-size:13px; width:100%; outline:none; font-family:inherit; transition:border-color .15s; }
.orilla-resform input:focus { border-color:#1f3a2f; }
.orilla-resform .row { display:flex; gap:8px; }
.orilla-resform .row input { flex:1; min-width:0; }
.orilla-resform button { background:linear-gradient(135deg,#c9a24b,#e8c56d); border:0; color:#1f3a2f; border-radius:8px; padding:10px; cursor:pointer; font-size:13px; font-weight:700; transition:all .15s; }
.orilla-resform button:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(201,162,75,.4); }
.orilla-resform h5 { margin:0 0 4px; font-size:13px; color:#1f3a2f; font-weight:700; }

#err-banner { display:none; background:#fef2f2; border:1px solid #fca5a5; color:#991b1b; padding:8px 14px; font-size:12px; margin:6px 12px 0; border-radius:8px; flex-shrink:0; }

@media (max-width:420px){ #orilla-bot-panel{ bottom:0; right:0; left:0; width:100%; max-width:100%; height:100%; max-height:100%; border-radius:0; } }

/* Clickable "Call" button rendered inside bot replies & error banner */
.orilla-call-btn {
  display:inline-flex; align-items:center; gap:7px;
  margin:6px 4px 2px 0; padding:8px 14px;
  background:linear-gradient(135deg,#c9a24b,#b8923f);
  color:#fff !important; font-weight:700; font-size:13px;
  border-radius:22px; text-decoration:none !important;
  box-shadow:0 2px 8px rgba(201,162,75,.35);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.orilla-call-btn:hover { transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 4px 14px rgba(201,162,75,.5); color:#fff !important; }
.orilla-call-btn:active { transform:translateY(0); }
.orilla-call-btn svg { flex-shrink:0; }
.orilla-msg.bot a.orilla-call-btn { text-decoration:none !important; }
.orilla-msg.bot a.orilla-call-btn:hover { color:#fff !important; }
#err-banner .orilla-call-btn { margin-top:4px; }