/* E:/dr_ashraf_site/apps/chatbot/static/chatbot/css/chatbot.css */
/* ===== Chatbot floating widget (FINAL) ===== */

/* Root (holds FAB + panel) */
.cb-root{
  position:fixed;
  inset-inline-end:20px;
  inset-block-end:88px;        /* لو غيّرت القيمة دي بدّل المتغيّر --cb-root-offset تحت */
  z-index:1041;
}

/* قفل التمرير عند فتح اللوحة على الموبايل */
/* ملاحظة: شلنا height:100% عشان ما يغيّرش مقاسات صفحة الهوم */
html.cb-lock-scroll, body.cb-lock-scroll{
  overflow:hidden;
  touch-action:none;
}
/* عوّض اختفاء شريط التمرير لمنع "نطة" المحتوى */
body.cb-lock-scroll{
  padding-right: var(--cb-scrollbar-w, 0px);
}

/* ================= FAB ================= */
.cb-fab{
  position:relative;
  width:56px; height:56px; border-radius:999px;
  display:grid; place-items:center;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  outline-offset:2px;
  transition:transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover){
  .cb-fab:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md, 0 .5rem 1.25rem rgba(0,0,0,.08)); }
}
.cb-fab:focus-visible{ outline:2px solid var(--focus-ring); }

.cb-fab::before{
  content:""; position:absolute; inset-inline-start:-2px; inset-block-end:-2px;
  width:10px; height:10px; border-radius:999px; background:var(--brand-teal);
  border:2px solid var(--card-bg); box-shadow:0 0 0 0 rgba(0,0,0,.08);
  transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  pointer-events:none;
}
.cb-fab::after{
  content:""; position:absolute; inset:-6px; border-radius:999px;
  box-shadow:0 0 0 0 color-mix(in oklab, var(--brand-teal) 40%, transparent);
  animation:cb-fab-pulse 2.4s ease-out infinite; pointer-events:none;
}
@keyframes cb-fab-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--brand-teal) 40%, transparent)}
  70%{box-shadow:0 0 0 14px color-mix(in oklab, var(--brand-teal) 0%, transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}
.cb-root[data-open="true"] .cb-fab::before{ background:var(--brand-gold); }
.cb-root[data-open="true"] .cb-fab::after{ animation:none; opacity:0; }
.cb-root:has(.cb-panel[data-open="true"]) .cb-fab::before{ background:var(--brand-gold); }
.cb-root:has(.cb-panel[data-open="true"]) .cb-fab::after{ animation:none; opacity:0; }

.cb-fab .bi{ display:block; line-height:1; animation:cb-fab-bob 3s ease-in-out infinite; will-change:transform; }
@keyframes cb-fab-bob{ 0%{transform:translateY(0)} 50%{transform:translateY(-2px)} 100%{transform:translateY(0)} }
.cb-root[data-open="true"] .cb-fab .bi,
.cb-root:has(.cb-panel[data-open="true"]) .cb-fab .bi{ animation:none; transform:none; }

@media (prefers-reduced-motion: reduce){
  .cb-fab, .cb-fab .bi{ transition:none; animation:none; }
  .cb-fab::after{ animation:none; }
}

/* ================= Panel (base) ================= */
.cb-panel{
  position:absolute; inset-inline-end:0; inset-block-end:0;
  width:min(92vw, 460px);
  background:var(--card-bg); color:var(--text);
  border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-md, 0 .5rem 1.25rem rgba(0,0,0,.08));

  opacity:0; visibility:hidden; transform:translateY(8px) scale(.98);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;

  display:flex; flex-direction:column;
  overscroll-behavior:contain;
}
.cb-panel[data-open="true"]{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .2s ease, transform .2s ease, visibility 0s;
}

/* Header */
.cb-header{ position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; background:var(--card-elev); }
.cb-header .cb-title{ display:flex; align-items:center; gap:.5rem; }
#cb-close{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:36px; height:36px; padding:0 !important; line-height:1 !important; border-radius:999px !important;
}
#cb-close .bi{ display:block; line-height:1; font-size:20px; margin:0; }
html.theme-dark .btn-close{ filter:invert(1) grayscale(100%); opacity:.9; }

/* Avatar */
.cb-avatar{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in oklab, var(--brand-teal, #2BA9B7) 12%, var(--card-bg));
  border:1px solid color-mix(in oklab, var(--brand-teal, #2BA9B7) 24%, var(--border));
  font-size:16px; overflow:hidden; color:var(--text);
}
.cb-avatar img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }

/* Log + input */
.cb-log{
  padding:.9rem; overflow:auto;
  display:flex; flex-direction:column; gap:.7rem;
  flex:1 1 auto;
  background:color-mix(in oklab, var(--card-bg) 92%, var(--divider));
  color:var(--text);
}
.cb-input{ background:var(--card-bg); }
.cb-hint{ margin-top:.35rem; }
html.theme-dark #cb-hint{ color:#fff !important; }

/* Inputs */
.cb-input .input-group{ align-items:stretch; }
.cb-input .form-control{
  background:var(--card-bg) !important; color:var(--text) !important; border-color:var(--border) !important;
  min-height:42px; padding:.45rem .65rem; font-size:.95rem;
}
.cb-input .form-control:focus{
  background:var(--card-bg) !important; color:var(--text) !important;
  border-color:color-mix(in oklab, var(--brand-teal) 45%, var(--border)) !important;
  box-shadow:0 0 0 .2rem color-mix(in oklab, var(--brand-teal) 25%, transparent) !important;
}
.cb-input .form-control::placeholder{ color:var(--muted) !important; opacity:1; }
.cb-input .btn{ min-height:42px; padding:.45rem .7rem; }
.cb-input.card-footer{ border-top:1px solid var(--border); padding:.5rem; }

/* Message bubble */
.cb-msg{
  display:flex; align-items:flex-start; gap:.6rem;
  background:var(--card-bg); border:1px solid var(--border);
  padding:.6rem .75rem; border-radius:.9rem;
  box-shadow:var(--shadow-sm, 0 .25rem .75rem rgba(0,0,0,.06));
  max-width:92%; color:var(--text);
}
.cb-msg .cb-avatar{ flex:0 0 28px; align-self:flex-start; }
.cb-msg .cb-body{ flex:1 1 auto; min-width:0; white-space:pre-wrap; line-height:1.65; }
.cb-msg .cb-body .cb-name{ font-size:.78rem; opacity:.75; margin-bottom:.2rem; }
.cb-msg .cb-body .cb-text{ white-space:pre-wrap; overflow-wrap:anywhere; }
.cb-msg.mine{
  align-self:flex-end; background:var(--badge-primary-subtle, #e6eeff);
  border-color:color-mix(in oklab, var(--border) 60%, var(--brand-teal, #2BA9B7) 40%);
}

.cb-answer{ font-variant-ligatures:common-ligatures; }
.cb-caret{ display:inline-block; margin-inline-start:.25rem; animation:cb-blink 1s steps(1) infinite; }
@keyframes cb-blink{ 50%{ opacity:0 } }

/* Sources */
.cb-sources{ display:flex; flex-direction:column; gap:.35rem; margin:.55rem 0 0; }
.cb-source{
  display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
  padding:.35rem .55rem; border:1px solid var(--border); border-radius:.6rem; background:var(--card-bg); color:var(--text);
}
.cb-source-row, .cb-source-top{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.cb-source-snippet, .cb-snippet{
  font-size:.9rem; opacity:.85; display:block; line-clamp:3;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden; line-height:1.5; max-height:calc(1.5em * 3);
}
.cb-source-origin{ font-weight:600; opacity:.9; }
.cb-link{ text-decoration:underline; word-break:break-word; color:var(--link); }
@media (hover:hover){ .cb-link:hover{ color:var(--link-hover); } }

/* Notice & footer */
.cb-note{
  margin:.6rem 0 0; padding:.55rem .7rem; border-radius:.7rem;
  background:var(--badge-warning-subtle, #fff7ed); border:1px solid var(--border);
  font-size:.95rem; line-height:1.6; color:var(--text);
}
.cb-ctas{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0 0; justify-content:center; text-align:center; }
.cb-ctas .btn{ border-radius:999px; padding:.35rem .9rem; box-shadow:var(--shadow-xs, 0 1px 2px rgba(0,0,0,.05)); }
.cb-cta-block{
  margin:.6rem 0 0; padding:.6rem .7rem; border:1px solid var(--border); background:var(--card-bg);
  border-radius:.7rem; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center; color:var(--text);
}
.cb-cta-block .cb-cta-text{ flex:1 1 100%; }
.cb-cta-block .btn{ display:inline-flex; align-items:center; justify-content:center; line-height:1; padding:.38rem 1rem; }
.cb-footer-note{
  margin:.6rem 0 0; padding:.5rem .65rem; font-size:.92rem; color:var(--text);
  border-left:3px solid color-mix(in oklab, var(--brand-teal, #2BA9B7) 55%, #000 0%);
  background:color-mix(in oklab, var(--card-bg) 93%, var(--divider));
  border-radius:.4rem; text-align:center;
}

/* Fallbacks if color-mix unsupported */
@supports not (color: color-mix(in oklab, black 10%, white)){
  .cb-avatar{ background:rgba(123,169,186,.12); border-color:rgba(123,169,186,.24); }
  .cb-log{ background:#f6f8fa; }
  html.theme-dark .cb-log{ background:#1c2328; }
  .cb-footer-note{ border-left-color:#7BA9BA; background:#eef3f6; }
  .cb-fab::after{ box-shadow:0 0 0 0 rgba(123,169,186,.4); animation:cb-fab-pulse-fb 2.4s ease-out infinite; }
  @keyframes cb-fab-pulse-fb{
    0%{ box-shadow:0 0 0 0 rgba(123,169,186,.4); }
    70%{ box-shadow:0 0 0 14px rgba(123,169,186,0); }
    100%{ box-shadow:0 0 0 0 rgba(123,169,186,0); }
  }
  .cb-fab::before{ background:#7BA9BA; border-color:#fff; }
  html.theme-dark .cb-fab::before{ border-color:#151a1e; }
}

/* ================= FINAL OVERRIDES ================= */

/* 1) إلغاء الفراغ الأبيض نهائيًا عند خلو السجل */
#chatbot-panel[data-empty="1"] .cb-log{
  display:none !important;
  padding:0 !important; margin:0 !important;
  max-height:0 !important; min-height:0 !important;
  flex:0 0 auto !important;
}

/* 2) متغيّرات للتحكم */
:root{
  --cb-root-offset: 88px;             /* تساوي inset-block-end في .cb-root */
  --cb-fab-size: 56px;
  --cb-fab-gap: 12px;                 /* مسافة بين اللوحة والزر */
  --cb-clear-all: calc(var(--cb-root-offset) + var(--cb-fab-size) + var(--cb-fab-gap));
  --cb-h-active-desktop: clamp(360px, 48vh, 560px);
  --cb-h-active-mobile:  clamp(360px, 46svh, 560px);
}

/* Desktop (>=577px): اللوحة فوق الزر داخل .cb-root */
@media (min-width:577px){
  #chatbot-panel{
    inset-inline-end:0 !important;
    inset-block-end:calc(var(--cb-fab-size) + var(--cb-fab-gap)) !important; /* فوق الـFAB */
    height:auto !important;
    max-height:var(--cb-h-active-desktop) !important;
    max-width:min(92vw, 460px) !important;
  }
  #chatbot-panel .cb-log{ max-height:calc(var(--cb-h-active-desktop) - 140px) !important; }
}

/* Mobile (<=576px): ثابت وفوق زر الشات الحقيقي (الموضوع 88px من أسفل) */
@media (max-width:576px){
  #chatbot-panel{
    position:fixed !important;
    inset:auto !important;
    inset-inline-end:max(14px, env(safe-area-inset-right)) !important;
    inset-block-end:calc(max(14px, env(safe-area-inset-bottom)) + var(--cb-clear-all)) !important; /* فوق الأيقونة */
    height:auto !important;
    max-height:var(--cb-h-active-mobile) !important;
    max-width:min(92vw, 460px) !important;
    border-radius:14px !important;
  }
  /* RTL: inline-end = اليسار */
  :root:dir(rtl) #chatbot-panel,
  html[dir="rtl"] #chatbot-panel{
    inset-inline-end:max(14px, env(safe-area-inset-left)) !important;
  }
  #chatbot-panel .cb-log{ max-height:calc(var(--cb-h-active-mobile) - 140px) !important; }
}