/* ═══ «سعود المرشد» — البطاقة المبادِرة والإشارة (٢٩ سبتمبر ٢٠٢٦) ═══
   ملف CSS عادي (لا SCSS، لا rtlcss): الاتجاهات صريحة. تجلس البطاقة فوق زرّ سعود أسفل اليسار. */
.sgg{--sgg-acc:#0DA4DB;--sgg-navy:#10153A;--sgg-ivory:#F6F3EC;font-family:"LamaSans","Lama Text","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;font-weight:500;direction:rtl;box-sizing:border-box}
.sgg *{box-sizing:border-box}

/* الوجه داخل حلقته الزرقاء المضيئة — توقيعه */
.sgg-av{position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:50%;padding:3px;
  background:conic-gradient(from 200deg,#0DA4DB,#7fd6f5,#0DA4DB,#0a6f95,#0DA4DB);
  box-shadow:0 0 0 2px rgba(13,164,219,.18),0 0 18px rgba(13,164,219,.55)}
.sgg-av img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#10153A;border:2px solid #fff}
.sgg-av--lg{width:56px;height:56px}

/* البطاقة */
.sgg-card{position:fixed;left:18px;bottom:96px;z-index:9989;width:320px;max-width:calc(100vw - 36px);
  background:#fff;color:var(--sgg-navy);border-radius:20px;padding:14px 14px 10px;
  box-shadow:0 18px 50px rgba(16,21,58,.22),0 0 0 1px rgba(16,21,58,.06);
  animation:sggIn .42s cubic-bezier(.2,.8,.2,1) both}
.sgg-card.is-out{animation:sggOut .24s ease-in both}
.sgg-head{display:flex;align-items:center;gap:10px}
.sgg-ht{flex:1 1 auto;line-height:1.25}
.sgg-ht b{display:block;font-size:15px;font-weight:700;color:var(--sgg-navy)}
.sgg-ht small{font-size:12px;color:#5a6079}
.sgg-x{border:0;background:transparent;color:#8a8fa6;font-size:22px;line-height:1;width:32px;height:32px;border-radius:50%;cursor:pointer}
.sgg-x:hover,.sgg-x:focus-visible{background:#eef6fb;color:var(--sgg-navy);outline:none}
.sgg-say{margin:10px 2px 12px;font-size:15px;line-height:1.7;color:var(--sgg-navy)}
.sgg-chips{display:flex;flex-wrap:wrap;gap:8px}
.sgg-chip{border:1px solid rgba(13,164,219,.35);background:#f2fafd;color:var(--sgg-navy);font:inherit;font-size:13.5px;
  padding:8px 13px;border-radius:14px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}
.sgg-chip:hover,.sgg-chip:focus-visible{background:var(--sgg-acc);border-color:var(--sgg-acc);color:#fff;outline:none;transform:translateY(-1px)}
.sgg-more{display:block;margin:10px auto 0;border:0;background:none;color:#8a8fa6;font:inherit;font-size:12.5px;cursor:pointer}
.sgg-more:hover{color:var(--sgg-navy)}

@keyframes sggIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sggOut{to{opacity:0;transform:translateY(10px)}}

/* الجوال: صفحةٌ سفلية لا تحجب إلا طرفها */
@media (max-width:640px){
  .sgg-card{left:0;right:0;bottom:0;width:auto;max-width:none;border-radius:20px 20px 0 0;
    padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px))}
  .sgg-card::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:#dde1ea;margin:0 auto 10px}
  .sgg-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .sgg-chips::-webkit-scrollbar{display:none}
  .sgg-chip{flex:0 0 auto}
}

/* الإشارة: حلقةٌ نابضة حول الهدف، وسعود واقفٌ بجانبه بفقاعة كلام */
.sgg-ring{position:absolute;z-index:9991;pointer-events:none;border-radius:16px;
  box-shadow:0 0 0 3px #0DA4DB,0 0 24px rgba(13,164,219,.6);animation:sggPulse 1.4s ease-out infinite}
@keyframes sggPulse{0%{box-shadow:0 0 0 3px #0DA4DB,0 0 0 0 rgba(13,164,219,.55)}70%{box-shadow:0 0 0 3px #0DA4DB,0 0 0 16px rgba(13,164,219,0)}100%{box-shadow:0 0 0 3px #0DA4DB,0 0 0 0 rgba(13,164,219,0)}}
.sgg-walker{position:absolute;z-index:9992;display:flex;align-items:center;gap:8px;cursor:pointer}
.sgg-walker.at-below{flex-direction:column;align-items:center}
.sgg-bubble{background:var(--sgg-navy);color:#fff;font-size:14px;line-height:1.5;padding:8px 13px;border-radius:14px;
  white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;box-shadow:0 10px 26px rgba(16,21,58,.3)}
.sgg-walker.at-side .sgg-bubble{border-top-left-radius:4px}

@media (prefers-color-scheme:dark){
  .sgg-card{background:#151b45;color:#eef2fb;box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
  .sgg-ht b,.sgg-say{color:#eef2fb}
  .sgg-ht small,.sgg-x,.sgg-more{color:#a9b0cc}
  .sgg-chip{background:rgba(13,164,219,.12);color:#eef2fb}
  .sgg-bubble{background:#0DA4DB;color:#10153A}
}

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