/* ==========================================================
   Rafaq Tec — floating robot assistant
   ========================================================== */
.rb {
  --rb-mint: #54efe4; --rb-cyan: #09ddec; --rb-blue: #016cf0; --rb-mid: #015fb3;
  --rb-deep: #012b62; --rb-navy: #011940; --rb-ink: #010c21; --rb-text: #fbfbfb;
  position: fixed; right: 22px; bottom: 22px; z-index: 140;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  font-family: var(--font, "Plus Jakarta Sans", system-ui, sans-serif);
  -webkit-tap-highlight-color: transparent;
}
.rb[dir="rtl"] { right: auto; left: 22px; align-items: flex-start; }
.rb [hidden] { display: none !important; }

/* ---------- Floating robot button ---------- */
.rb-fab {
  position: relative; width: 76px; height: 76px; padding: 0; border: 5px solid transparent; border-radius: 50%;
  /* White core inside a thick ring that runs from blue to cyan and mint */
  background:
    radial-gradient(circle at 38% 30%, #ffffff 0%, #f4feff 60%, #dcf8fb 100%) padding-box,
    linear-gradient(140deg, #016cf0 0%, #09ddec 55%, #54efe4 100%) border-box;
  box-shadow: 0 0 0 6px rgba(84, 239, 228, .10), 0 0 36px 6px rgba(9, 221, 236, .38), 0 12px 30px -10px rgba(1, 108, 240, .7);
  cursor: pointer; display: grid; place-items: center; transition: transform .35s var(--ease, ease), box-shadow .35s;
}
.rb-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 8px rgba(84, 239, 228, .14), 0 0 48px 8px rgba(9, 221, 236, .5), 0 16px 36px -10px rgba(1, 108, 240, .8); }
.rb-x { display: none; width: 26px; height: 26px; color: #015fb3; }
.rb-x svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.rb.is-open .rb-x { display: block; }
.rb.is-open .rb-bot { display: none; }
.rb-fab:focus-visible, .rb button:focus-visible, .rb-input:focus-visible { outline: 2px solid var(--rb-mint); outline-offset: 3px; }
.rb-bot { width: 54px; height: 54px; display: block; animation: rb-float 4.8s ease-in-out infinite; }
.rb-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rb-eyes { transform-origin: 32px 33px; animation: rb-blink 5s infinite; }
.rb-light { animation: rb-glow 2.2s ease-in-out infinite; }
.rb-ping { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--rb-mint); opacity: 0; animation: rb-ping 3.2s ease-out infinite; pointer-events: none; }
.rb.is-open .rb-ping { display: none; }

@keyframes rb-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes rb-blink { 0%, 44%, 48%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.1); } }
@keyframes rb-glow { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes rb-ping { 0% { transform: scale(.9); opacity: .7; } 70%, 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- Teaser bubble ---------- */
.rb-teaser {
  position: relative; max-width: 240px; padding: 12px 34px 12px 16px; border-radius: 16px 16px 4px 16px;
  background: var(--rb-text); color: var(--rb-ink); font-size: 14px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .55); cursor: pointer; animation: rb-pop .45s var(--ease, ease) both;
}
.rb[dir="rtl"] .rb-teaser { border-radius: 16px 16px 16px 4px; padding: 12px 16px 12px 34px; }
.rb-teaser-x {
  position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: transparent; color: #51617a; font-size: 18px; line-height: 1; cursor: pointer;
}
.rb[dir="rtl"] .rb-teaser-x { right: auto; left: 8px; }
@keyframes rb-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }

/* ---------- Panel ---------- */
.rb-panel {
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 130px)); height: min(560px, calc(100dvh - 130px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: linear-gradient(180deg, rgba(1, 25, 64, .97), rgba(1, 12, 33, .98));
  border: 1px solid rgba(84, 239, 228, .18);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 60px -30px rgba(9, 221, 236, .5);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  color: var(--rb-text); transform-origin: bottom right; animation: rb-open .4s var(--ease, ease) both;
}
.rb[dir="rtl"] .rb-panel { transform-origin: bottom left; }
@keyframes rb-open { from { opacity: 0; transform: translateY(14px) scale(.96); } }

.rb-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(120deg, rgba(84, 239, 228, .10), rgba(1, 108, 240, .10)); }
.rb-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rb-meta b { font-size: 16px; font-weight: 700; }
.rb-close { width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); cursor: pointer; display: grid; place-items: center; flex: none; }
.rb-close:hover { background: rgba(255, 255, 255, .12); }
.rb-close svg, .rb-send svg, .rb-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rb-close { color: var(--rb-text); }

.rb-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.rb-msg { max-width: 86%; padding: 10px 14px; font-size: 14px; line-height: 1.55; border-radius: 16px; word-wrap: break-word; animation: rb-pop .3s ease both; }
.rb-msg.rb-m-bot { align-self: flex-start; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .07); border-end-start-radius: 4px; }
.rb-msg.rb-m-user { align-self: flex-end; background: linear-gradient(120deg, var(--rb-cyan), var(--rb-blue)); color: #fff; font-weight: 500; border-end-end-radius: 4px; }
.rb-msg b { color: var(--rb-mint); font-weight: 600; }

.rb-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.rb-dots i { width: 6px; height: 6px; border-radius: 50%; background: #9fb3cf; animation: rb-dot 1s infinite ease-in-out; }
.rb-dots i:nth-child(2) { animation-delay: .15s; }
.rb-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes rb-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }

.rb-cta {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 99px;
  background: linear-gradient(115deg, var(--rb-mint), var(--rb-cyan) 45%, var(--rb-blue)); color: var(--rb-ink);
  font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1; cursor: pointer; transition: transform .25s;
}
.rb-cta:hover { transform: translateY(-2px); }
.rb[dir="rtl"] .rb-cta svg, .rb[dir="rtl"] .rb-send svg { transform: scaleX(-1); }

.rb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; }
.rb-chips:empty { display: none; }
.rb-chip {
  padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(84, 239, 228, .35); background: rgba(84, 239, 228, .06);
  color: var(--rb-mint); font-family: inherit; font-weight: 600; font-size: 12.5px; line-height: 1.2; cursor: pointer; transition: background .2s, border-color .2s;
}
.rb-chip:hover { background: rgba(84, 239, 228, .16); border-color: var(--rb-mint); }

.rb-form { display: flex; gap: 8px; padding: 12px 12px 14px; border-top: 1px solid rgba(255, 255, 255, .07); }
.rb-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05); color: var(--rb-text); font-family: inherit; font-size: 16px;
}
.rb-input::placeholder { color: #7f91ad; }
.rb-input:focus { border-color: rgba(84, 239, 228, .5); outline: none; }
.rb-send { width: 44px; height: 44px; flex: none; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--rb-cyan), var(--rb-blue)); color: #fff; cursor: pointer; display: grid; place-items: center; }
.rb-send svg { width: 18px; height: 18px; }

@media (max-width: 520px) {
  .rb { right: 14px; bottom: 14px; }
  .rb[dir="rtl"] { left: 14px; }
  .rb-fab { width: 66px; height: 66px; border-width: 4px; }
  .rb-bot { width: 46px; height: 46px; }
  .rb-panel { width: calc(100vw - 28px); height: calc(100vh - 110px); height: calc(100dvh - 110px); }
}

@media (prefers-reduced-motion: reduce) {
  .rb *, .rb *::before, .rb *::after { animation: none !important; transition: none !important; }
}

/* ---------- Light mode ---------- */
:root[data-theme="light"] .rb-panel {
  background: linear-gradient(180deg, rgba(246, 249, 252, .97), rgba(234, 240, 246, .98));
  border-color: rgba(1, 43, 98, .14); color: #0a1b33;
  box-shadow: 0 30px 70px -24px rgba(1, 43, 98, .35), 0 0 50px -30px rgba(9, 221, 236, .45);
}
:root[data-theme="light"] .rb-head { border-bottom-color: rgba(1, 43, 98, .08); background: linear-gradient(120deg, rgba(84, 239, 228, .14), rgba(1, 108, 240, .08)); }
:root[data-theme="light"] .rb-close { background: rgba(1, 43, 98, .06); color: #0a1b33; }
:root[data-theme="light"] .rb-close:hover { background: rgba(1, 43, 98, .12); }
:root[data-theme="light"] .rb-log { scrollbar-color: rgba(1, 43, 98, .2) transparent; }
:root[data-theme="light"] .rb-msg.rb-m-bot { background: rgba(255, 255, 255, .7); border-color: rgba(1, 43, 98, .09); }
:root[data-theme="light"] .rb-msg b { color: #015fb3; }
:root[data-theme="light"] .rb-dots i { background: #6b7c96; }
:root[data-theme="light"] .rb-chip { color: #015fb3; border-color: rgba(1, 108, 240, .3); background: rgba(1, 108, 240, .05); }
:root[data-theme="light"] .rb-chip:hover { background: rgba(1, 108, 240, .12); border-color: #016cf0; }
:root[data-theme="light"] .rb-form { border-top-color: rgba(1, 43, 98, .08); }
:root[data-theme="light"] .rb-input { background: rgba(255, 255, 255, .75); border-color: rgba(1, 43, 98, .14); color: #0a1b33; }
:root[data-theme="light"] .rb-input::placeholder { color: #6b7c96; }
:root[data-theme="light"] .rb-input:focus { border-color: rgba(1, 108, 240, .5); }