/* Dr. Scope Chatbot – CSS */
:root{
  --ds-teal:#0a7c6e;--ds-teal2:#0d9e8d;--ds-teal3:#e6f7f5;
  --ds-navy:#0d2137;--ds-pulse:#00d4b4;
  --ds-white:#fff;--ds-off:#f4f8f9;--ds-border:#d8e8eb;
  --ds-txt:#0d2137;--ds-txt2:#4a6070;
  --ds-red:#e53935;--ds-green:#10b981;
}

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&display=swap');

@keyframes ds-ecg-move{to{stroke-dashoffset:-200}}
@keyframes ds-fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ds-pulseRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
@keyframes ds-typingBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}}

#drscope-btn{
  position:fixed;bottom:22px;left:22px;width:64px;height:64px;
  background:var(--ds-teal);border:none;border-radius:50%;cursor:pointer;
  box-shadow:0 4px 18px rgba(10,124,110,.4);z-index:99999;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;
  transition:transform .2s,background .2s;
}
#drscope-btn:hover{background:var(--ds-teal2);transform:scale(1.06)}
#drscope-btn svg{width:26px;height:26px;fill:var(--ds-white);flex-shrink:0}
#drscope-btn .ds-btn-label{font-family:'Heebo',sans-serif;font-size:8.5px;color:rgba(255,255,255,.85);letter-spacing:.3px}
.ds-pulse-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ds-pulse);animation:ds-pulseRing 2s ease-out infinite;pointer-events:none}
.ds-notif-badge{position:absolute;top:2px;right:2px;width:16px;height:16px;background:var(--ds-red);border-radius:50%;border:2px solid #fff;display:none;align-items:center;justify-content:center;font-size:9px;color:#fff;font-weight:700;font-family:'Heebo',sans-serif}

#drscope-panel{
  position:fixed;bottom:100px;left:20px;width:380px;height:570px;
  background:var(--ds-white);border-radius:20px;
  box-shadow:0 12px 50px rgba(13,33,55,.18);
  display:flex;flex-direction:column;z-index:99998;overflow:hidden;
  transform:scale(.82) translateY(24px);opacity:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.34,1.5,.64,1),opacity .22s ease;
  font-family:'Heebo',Arial,sans-serif;direction:rtl;
}
#drscope-panel.ds-open{transform:scale(1) translateY(0);opacity:1;pointer-events:all}

.ds-header{background:var(--ds-navy);padding:14px 16px 12px;display:flex;align-items:center;gap:11px;flex-shrink:0}
.ds-avatar{width:44px;height:44px;border-radius:50%;background:var(--ds-teal);border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.ds-avatar svg{width:24px;height:24px;fill:#fff}
.ds-avatar .ds-online{position:absolute;bottom:1px;right:1px;width:10px;height:10px;background:var(--ds-green);border-radius:50%;border:2px solid var(--ds-navy)}
.ds-meta{flex:1;overflow:hidden}
.ds-name{font-size:14px;font-weight:700;color:#fff;line-height:1.2}
.ds-role{font-size:11px;color:rgba(255,255,255,.55);margin-top:1px}
.ds-ecg{width:56px;height:26px;flex-shrink:0;stroke:var(--ds-pulse);fill:none;stroke-width:1.6;stroke-dasharray:200;stroke-dashoffset:0;animation:ds-ecg-move 1.8s linear infinite}
.ds-close-btn{background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.7);cursor:pointer;border-radius:50%;width:28px;height:28px;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0}
.ds-close-btn:hover{background:rgba(255,255,255,.16);color:#fff}

.ds-ctx-bar{background:var(--ds-teal3);border-bottom:1px solid #b2ddd8;padding:6px 14px;display:flex;align-items:center;gap:6px;flex-shrink:0}
.ds-ctx-bar svg{width:13px;height:13px;fill:var(--ds-teal);flex-shrink:0}
.ds-ctx-bar span{font-size:11px;color:var(--ds-teal);font-weight:500}

#ds-messages{flex:1;overflow-y:auto;padding:14px 14px 10px;display:flex;flex-direction:column;gap:10px;background:var(--ds-off);scroll-behavior:smooth}
#ds-messages::-webkit-scrollbar{width:3px}
#ds-messages::-webkit-scrollbar-thumb{background:#c2d6da;border-radius:2px}

.ds-msg{display:flex;flex-direction:column;max-width:86%;animation:ds-fadeUp .28s ease}
.ds-msg.ds-bot{align-self:flex-end}
.ds-msg.ds-user{align-self:flex-start}
.ds-bubble{padding:10px 13px;font-size:13.5px;line-height:1.6;word-break:break-word;border-radius:14px}
.ds-msg.ds-bot .ds-bubble{background:var(--ds-white);color:var(--ds-txt);border:1px solid var(--ds-border);border-radius:14px 4px 14px 14px}
.ds-msg.ds-user .ds-bubble{background:var(--ds-navy);color:#fff;border-radius:4px 14px 14px 14px}
.ds-time{font-size:10px;color:var(--ds-txt2);margin-top:3px;padding:0 2px}
.ds-msg.ds-user .ds-time{text-align:left}

.ds-typing-wrap{display:flex;gap:5px;padding:12px 14px;background:var(--ds-white);border:1px solid var(--ds-border);border-radius:14px 4px 14px 14px}
.ds-typing-wrap span{width:7px;height:7px;border-radius:50%;background:#9bb8bf;animation:ds-typingBounce 1.1s infinite}
.ds-typing-wrap span:nth-child(2){animation-delay:.18s}
.ds-typing-wrap span:nth-child(3){animation-delay:.36s}

.ds-products{display:flex;flex-direction:column;gap:7px;margin-top:6px;max-width:100%}
.ds-prod-card{background:var(--ds-white);border:1px solid var(--ds-border);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px;animation:ds-fadeUp .25s ease;text-decoration:none;color:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s}
.ds-prod-card:hover{border-color:var(--ds-teal);box-shadow:0 3px 12px rgba(10,124,110,.15);transform:translateY(-1px)}
.ds-prod-icon{width:36px;height:36px;border-radius:8px;background:var(--ds-teal3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ds-prod-icon svg{width:18px;height:18px;fill:var(--ds-teal)}
.ds-prod-info{flex:1;min-width:0}
.ds-prod-name{font-size:12px;font-weight:600;color:var(--ds-txt);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-prod-sub{font-size:11px;color:var(--ds-txt2);margin-top:2px}
.ds-prod-price{text-align:left;flex-shrink:0}
.ds-prod-now{font-size:14px;font-weight:700;color:var(--ds-teal)}
.ds-prod-was{font-size:10px;color:#aaa;text-decoration:line-through}
.ds-prod-badge{font-size:9px;background:#fff3cd;color:#7c5800;padding:2px 6px;border-radius:4px;font-weight:600;margin-top:2px;display:inline-block}

.ds-input-wrap{padding:10px 12px;border-top:1px solid var(--ds-border);background:var(--ds-white);display:flex;gap:8px;align-items:flex-end;flex-shrink:0}
#ds-input{flex:1;border:1.5px solid var(--ds-border);border-radius:18px;padding:9px 13px;font-size:13.5px;font-family:'Heebo',sans-serif;direction:rtl;resize:none;outline:none;max-height:90px;overflow-y:auto;line-height:1.45;color:var(--ds-txt);background:var(--ds-off);transition:border-color .15s,background .15s}
#ds-input:focus{border-color:var(--ds-teal);background:#fff}
#ds-input::placeholder{color:#9bb8bf}
#ds-send-btn{width:38px;height:38px;border-radius:50%;border:none;background:var(--ds-teal);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s}
#ds-send-btn:hover{background:var(--ds-teal2)}
#ds-send-btn:active{transform:scale(.92)}
#ds-send-btn:disabled{background:#c5d8db;cursor:default}
#ds-send-btn svg{width:17px;height:17px;fill:#fff;transform:rotate(180deg)}
.ds-footer-txt{text-align:center;padding:4px 0 7px;font-size:10px;color:#a0b8bd;font-family:'Heebo',sans-serif}

@media(max-width:430px){
  #drscope-panel{width:calc(100vw - 16px);left:8px;bottom:95px;height:520px}
}