/* ═══════════════════════════════════════════════════════════
   سينا — المساعد الذكي · Balsam — the assistant
   ═══════════════════════════════════════════════════════════ */

.balsam{position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:95}

/* ══ الزرّ العائم — دائرة هادئة تتنفّس، وتتّسع عند التلميح ══ */
.balsam-fab{
  position:relative; display:flex; align-items:center; justify-content:center; gap:0;
  width:56px; height:56px; padding:0; border:0; border-radius:100px; cursor:pointer;
  background:linear-gradient(145deg, #C08D38 0%, #A8762C 55%, #8A6122 100%);
  color:#FFF8EC;
  box-shadow:0 10px 26px -8px rgba(120,82,24,.62), 0 0 0 1px rgba(255,255,255,.16) inset;
  font-family:'Tajawal',system-ui,sans-serif; font-weight:700; font-size:14.5px;
  white-space:nowrap; overflow:hidden;
  transition:width .34s var(--ease), gap .34s var(--ease), padding .34s var(--ease),
             transform .22s var(--ease), box-shadow .28s var(--ease);
}
.balsam-fab:hover{transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(120,82,24,.75), 0 0 0 1px rgba(255,255,255,.24) inset}
.balsam-fab-ico{width:24px; height:24px; flex:none; display:grid; place-items:center}
.balsam-fab-ico svg{width:100%; height:100%}
.balsam-fab-txt{
  max-width:0; opacity:0; overflow:hidden;
  transition:max-width .34s var(--ease), opacity .22s var(--ease);
}
/* يتّسع عند المرور أو أثناء التلميح */
.balsam-fab:hover,.balsam-fab:focus-visible,.balsam.hinting .balsam-fab{
  width:auto; gap:10px; padding:0 22px 0 18px;
}
[dir="ltr"] .balsam-fab:hover,[dir="ltr"] .balsam.hinting .balsam-fab{padding:0 18px 0 22px}
.balsam-fab:hover .balsam-fab-txt,
.balsam-fab:focus-visible .balsam-fab-txt,
.balsam.hinting .balsam-fab-txt{max-width:180px; opacity:1}

/* حلقة تتنفّس — لفت انتباه هادئ */
.balsam-fab-ring{
  position:absolute; inset:0; border-radius:100px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(214,165,82,.5);
  animation:balsamBreathe 4.6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes balsamBreathe{
  0%{box-shadow:0 0 0 0 rgba(214,165,82,.5)}
  55%{box-shadow:0 0 0 14px rgba(214,165,82,0)}
  100%{box-shadow:0 0 0 0 rgba(214,165,82,0)}
}
/* عند الفتح: يثبت على قياسه الدائري ولا يستجيب لتوسّع المرور،
   وإلا تصارعت قاعدتا :hover و.open فقفز الزرّ */
.balsam.open .balsam-fab-ring{animation:none}
.balsam.open .balsam-fab,
.balsam.open .balsam-fab:hover,
.balsam.open .balsam-fab:focus-visible{width:56px; height:56px; gap:0; padding:0}
.balsam.open .balsam-fab-txt,
.balsam.open .balsam-fab:hover .balsam-fab-txt,
.balsam.open .balsam-fab:focus-visible .balsam-fab-txt{max-width:0; opacity:0}
.balsam.open .balsam-fab:hover{transform:translateY(-2px)}

/* ── فقاعة التلميح ── */
.balsam-hint{
  position:absolute; inset-block-end:calc(100% + 12px); inset-inline-end:4px;
  max-width:min(280px, calc(100vw - 48px));
  padding:11px 16px; border-radius:16px 16px 4px 16px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-3); color:var(--ink);
  font-size:13.5px; font-weight:500; line-height:1.55;
  opacity:0; transform:translateY(8px) scale(.96); transform-origin:bottom right;
  transition:opacity .34s var(--ease), transform .34s var(--ease);
}
[dir="ltr"] .balsam-hint{border-radius:16px 16px 16px 4px; transform-origin:bottom left}
.balsam.hinting .balsam-hint{opacity:1; transform:none}
/* علامة اقتباس نحاسية داخل الحدّ — بلا عناصر تتجاوز الزوايا المدوّرة */
.balsam-hint::before{
  content:''; display:inline-block; vertical-align:-1px;
  width:4px; height:4px; border-radius:50%; background:var(--brass);
  margin-inline-end:8px;
}
.balsam-hint:hover{border-color:var(--brass); color:var(--brass)}

/* ── اللوحة ── */
.balsam-panel{
  position:absolute; inset-block-end:calc(100% + 14px); inset-inline-end:0;
  width:min(420px, calc(100vw - 32px)); max-height:min(680px, calc(100vh - 130px));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.97); transform-origin:bottom right;
  transition:opacity .24s var(--ease), transform .24s var(--ease)}
[dir="rtl"] .balsam-panel{transform-origin:bottom left}
.balsam.open .balsam-panel{opacity:1; transform:none}

/* ── الرأس ── */
.balsam-head{
  display:flex; align-items:center; gap:12px; padding:15px 18px;
  border-bottom:1px solid var(--line); background:var(--surface-2)}
.balsam-id{display:flex; align-items:center; gap:11px; flex:1; min-width:0}
.balsam-id > div{display:flex; flex-direction:column; line-height:1.35; min-width:0}
.balsam-name{font-family:'Tajawal'; font-weight:800; font-size:15.5px}
.balsam-role{font-size:11.5px; color:var(--ink-3)}
.balsam-orb{
  width:36px; height:36px; border-radius:50%; flex:none; position:relative;
  background:radial-gradient(circle at 34% 30%, var(--brass-2), var(--brass) 58%, #6E4B15);
  display:grid; place-items:center; overflow:hidden}
.balsam-orb i{
  position:absolute; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.85);
  animation:orbit 4.5s linear infinite}
.balsam-orb i:nth-child(2){animation-duration:6.5s; animation-delay:-2s; opacity:.6}
.balsam-orb i:nth-child(3){animation-duration:8s; animation-delay:-4s; opacity:.4; width:3px; height:3px}
@keyframes orbit{
  from{transform:rotate(0) translateX(11px) rotate(0)}
  to{transform:rotate(360deg) translateX(11px) rotate(-360deg)}
}
.balsam-head-btns{display:flex; align-items:center; gap:6px}
.balsam-restart{
  background:none; border:1px solid var(--line-2); color:var(--ink-3);
  font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:100px; cursor:pointer}
.balsam-restart:hover{border-color:var(--brass); color:var(--brass)}
.balsam-close{
  width:30px; height:30px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:none; border:0; color:var(--ink-3); cursor:pointer}
.balsam-close:hover{background:var(--surface-3); color:var(--ink)}

/* ── الجسم ── */
.balsam-body{
  flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin; scroll-behavior:smooth}

.balsam-msg{
  max-width:88%; padding:12px 15px; border-radius:15px; font-size:14px; line-height:1.72;
  animation:msgIn .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes msgIn{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
.balsam-bot{
  align-self:flex-start; background:var(--surface-2); color:var(--ink);
  border-start-start-radius:5px}
.balsam-me{
  align-self:flex-end; background:var(--ink); color:var(--ground);
  border-end-end-radius:5px; font-weight:500}
[data-theme="dark"] .balsam-me{background:var(--brass); color:#160F04}
.balsam-msg .balsam-t{display:block; font-family:'Tajawal'; font-weight:800; font-size:16px; margin-bottom:4px}
.balsam-msg b{font-weight:600; color:var(--brass)}
.balsam-me b{color:inherit}

/* روابط داخل الردّ */
.balsam-links{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px}
.balsam-links a{
  display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  padding:5px 11px; border-radius:100px;
  background:var(--brass-soft); color:var(--brass); border:1px solid var(--brass-line)}
.balsam-links a:hover{background:var(--brass); color:#fff; border-color:var(--brass)}
.balsam-links svg{opacity:.7}
[dir="rtl"] .balsam-links svg{transform:scaleX(-1)}

/* كتابة */
.balsam-typing{padding:14px 16px}
.balsam-dots{display:flex; gap:4px}
.balsam-dots i{width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:dot 1.3s ease-in-out infinite}
.balsam-dots i:nth-child(2){animation-delay:.18s}
.balsam-dots i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.28; transform:translateY(0)}30%{opacity:1; transform:translateY(-4px)}}

/* ── بطاقات «مين إنت؟» ── */
.balsam-who{display:grid; gap:8px; animation:msgIn .38s cubic-bezier(.2,.8,.2,1) both}
.balsam-whobtn{
  display:flex; align-items:center; gap:13px; width:100%; text-align:start;
  padding:14px 15px; border-radius:13px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease)}
.balsam-whobtn:hover{border-color:var(--brass); background:var(--brass-soft); transform:translateX(-3px)}
[dir="ltr"] .balsam-whobtn:hover{transform:translateX(3px)}
.balsam-whoico{
  width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:var(--brass-soft); color:var(--brass); border:1px solid var(--brass-line)}
.balsam-whobtn:hover .balsam-whoico{background:var(--brass); color:#fff; border-color:var(--brass)}
.balsam-whoico svg{width:19px; height:19px}
.balsam-whotxt{display:flex; flex-direction:column; gap:2px; min-width:0}
.balsam-whotxt b{font-family:'Tajawal'; font-weight:700; font-size:14.5px}
.balsam-whotxt span{font-size:12px; color:var(--ink-3); line-height:1.5}

/* ── رقائق المواضيع ── */
.balsam-chips{display:flex; flex-wrap:wrap; gap:7px; animation:msgIn .34s cubic-bezier(.2,.8,.2,1) both}
.balsam-chip{
  font-size:13px; font-weight:600; padding:8px 14px; border-radius:100px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink-2);
  transition:border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease)}
.balsam-chip:hover{border-color:var(--brass); color:var(--brass); background:var(--brass-soft)}
.balsam-more{
  font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin-top:4px}
.balsam-human{
  align-self:flex-start; background:none; border:0; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--lapis); text-decoration:underline;
  text-underline-offset:3px; padding:4px 0}
.balsam-human:hover{color:var(--brass)}

/* ── التذييل ── */
.balsam-foot{border-top:1px solid var(--line); padding:12px 14px 10px; background:var(--surface)}
.balsam-form{display:flex; gap:8px; align-items:center}
.balsam-input{
  flex:1; padding:10px 15px; border-radius:100px; border:1px solid var(--line-2);
  background:var(--ground); color:var(--ink); font:inherit; font-size:14px}
.balsam-input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-soft)}
.balsam-send{
  width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--brass); color:#fff; border:0; cursor:pointer;
  transition:background .18s var(--ease)}
.balsam-send:hover{background:var(--brass-2)}
[dir="rtl"] .balsam-send svg{transform:scaleX(-1)}
.balsam-note{font-size:10.5px; color:var(--ink-3); text-align:center; margin-top:8px; line-height:1.5}

@media (max-width:520px){
  .balsam{inset-block-end:14px; inset-inline-end:14px}
  .balsam-panel{width:calc(100vw - 28px); max-height:calc(100vh - 110px)}
  .balsam-fab-txt{display:none}
  .balsam-fab{padding:13px}
}
@media (prefers-reduced-motion:reduce){
  .balsam-fab-pulse,.balsam-orb i{animation:none}
  .balsam-msg,.balsam-who,.balsam-chips{animation:none}
}