/* ═══════════════════════════════════════════════════════════════
   «هيمنة للتسويق على منصة X» — نظام التصميم
   داكن + نهاري (يُبدَّل من الأعلى)، عربي RTL، خط Tajawal مضمّن.

   قرارات الأداء المتّخذة عن قصد (لتعمل بسلاسة على الأجهزة البطيفة):
   1) لا backdrop-filter إطلاقاً — ضبابية الخلفية أغلى عملية رسم على أندرويد.
   2) الخلفية المتدرّجة في طبقة fixed واحدة تُرسم مرة وتُركَّب من GPU.
   3) الحركات على transform / opacity فقط (المُسرَّعان على GPU).
   4) body.lite تُضاف تلقائياً للأجهزة الضعيفة: تُسقط الظلال والتوهّج والحركات.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Tajawal-Regular.ttf') format('truetype')}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Tajawal-Medium.ttf') format('truetype')}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Tajawal-Bold.ttf') format('truetype')}

/* ── الوضع الداكن (الافتراضي) ── */
:root{
  --bg:var(--k-bg);
  --bg-2:var(--k-surface);
  --card:var(--k-surface);
  --card-2:var(--k-surface-2);
  --card-3:var(--k-surface-2);
  --line:var(--k-line);
  --line-2:var(--k-line-strong);
  --brand:var(--k-accent);
    --brand-2:var(--k-accent);
    --brand-dark:var(--k-accent-press);
    --brand-soft:var(--k-surface-2);
    --accent:var(--k-accent);
    --gold:var(--k-accent);
    --ok:var(--k-positive);
    --warn:var(--k-accent);
    --danger:var(--k-neg-text);
    --text:var(--k-text);
    --dim:var(--k-text-2);
    --dim-2:var(--k-text-3);

    /* أسطح مركّبة (تتغيّر مع الوضع) */
    --appbar-a:var(--k-bg); --appbar-b:var(--k-bg); --appbar-shadow:var(--k-shadow);
    --qbar-a:var(--k-bg); --qbar-b:var(--k-bg); --qbar-shadow:var(--k-shadow);
    --hero-a:var(--k-accent); --hero-b:var(--k-dark); --hero-c:var(--k-bg);
    --menu-a:var(--k-surface); --menu-b:var(--k-surface); --menu-shadow:var(--k-shadow);
    --deep:var(--k-bg);
    --scrim:var(--k-scrim);
    --toast:var(--k-surface-2);
    --soft:var(--k-line);
    --meter-bg:var(--k-line);
    --on-hero-line:var(--k-line);
    --glow-1:transparent; --glow-2:transparent; --glow-3:transparent;
    --skill-1:var(--k-line); --skill-2:var(--k-line);

  --r-s:11px; --r-m:18px; --r-l:24px; --r-xl:28px;
  --pad:16px;
  --top:60px;
  --qnav:56px;
  --shadow:var(--k-shadow);

  /* أسطح وظلال (تجديد 1.0.17) — السطح يُضاء من أعلاه ليبدو حياً لا مسطّحاً */
  --surface:var(--k-surface);
  --elev-1:var(--k-shadow);
  --elev-2:var(--k-shadow);
  --elev-3:var(--k-shadow);
  --hair:inset 0 1px 0 var(--k-line);
  --ok-soft:var(--k-surface-2);
  --warn-soft:var(--k-accent-soft);
  --danger-soft:var(--k-surface-2);
}

/* ── الوضع النهاري: لا كتلة أسماء مكرّرة — k-tokens.css يقلب --k-* تلقائيًا ── */
html[data-theme="light"]{ color-scheme: light; }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
/*
 * منع التمرير الأفقي للصفحة: كل الشاشات مصمّمة لعمود واحد على الموبايل.
 * الشرائط التي تحتاج تمريرًا أفقيًّا (التبويبات/الأوضاع/الأدوات) لها
 * `overflow-x:auto` خاص بها، فلا يتأثر أي منها.
 */
html,body{overflow-x:hidden;max-width:100%}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.6;
  overscroll-behavior-y:contain;
  min-height:100vh;
  position:relative;
  transition:background-color .2s,color .2s;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:transparent;
}
body.no-scroll{overflow:hidden}

h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.35}
p{margin:0}
a{color:var(--brand-2);text-decoration:none}
svg{display:block}
::-webkit-scrollbar{width:0;height:0}
.grow{flex:1;min-width:0}

/* ─────────── شريط علوي ─────────── */
.appbar{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  height:calc(var(--top) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 10px 0;
  display:flex;align-items:center;gap:6px;
  background:var(--k-surface);
  box-shadow:var(--appbar-shadow);
}
.appbar-title{flex:1;min-width:0;text-align:right;padding-inline:2px}
.appbar-title h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-title p{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-3px}
.appbar-online{width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto}
.appbar-online span{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px 0 1px 3px var(--k-shadow)}
.appbar-online.off span{background:var(--danger);box-shadow:0 0 0 4px 0 1px 3px var(--k-shadow)}
.appbar-online.busy span{background:var(--warn);box-shadow:0 0 0 4px 0 1px 3px var(--k-shadow)}

.icon-btn{
  position:relative;
  width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line);border-radius:12px;
  background:var(--soft);color:var(--text);display:grid;place-items:center;
  transition:transform .12s,background .15s;
}
.icon-btn:active{transform:scale(.93)}
.icon-btn.small{width:32px;height:32px;border-radius:10px}
.icon-btn .dot{
  position:absolute;top:5px;inset-inline-end:5px;width:10px;height:10px;border-radius:50%;
  background:var(--danger);border:2px solid var(--appbar-a);
}
#btn-menu.on{background:var(--brand);border-color:transparent;color:var(--k-text)}
.ico-sun{display:none}
html[data-theme="light"] .ico-moon{display:none}
html[data-theme="light"] .ico-sun{display:block}

/* ─────────── شريط التنقل السريع (أعلى الشاشة) ─────────── */
.qbar{
  position:fixed;z-index:38;
  inset-block-start:calc(var(--top) + env(safe-area-inset-top,0px));
  inset-inline:0;height:var(--qnav);
  display:flex;align-items:center;gap:8px;
  padding:0 var(--pad);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  background:var(--k-surface);
  box-shadow:var(--qbar-shadow);
}
.qbar:empty{display:none}
.qbar a{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  background:var(--soft);border:1px solid var(--line);
  font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;
  transition:transform .12s;
}
.qbar a:active{transform:scale(.96)}
.qbar a svg{width:17px;height:17px;color:var(--brand-2)}
.qbar a.on{background:var(--k-accent);border-color:transparent;color:var(--k-text);font-weight:700;box-shadow:0 6px 16px 0 6px 18px var(--k-shadow)}
.qbar a.on svg{color:var(--k-text)}

/* ─────────── شريط تحميل رقيق ─────────── */
.bar{position:fixed;inset-inline:0;top:calc(var(--top) + env(safe-area-inset-top,0px));height:2.5px;z-index:65;overflow:hidden;opacity:0;transition:opacity .2s}
.bar.on{opacity:1}
.bar i{display:block;height:100%;width:40%;border-radius:2px;background:var(--k-accent);animation:slide 1.1s infinite}
@keyframes slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* ─────────── المساحة الرئيسية ─────────── */
.app-main{
  padding:calc(var(--top) + var(--qnav) + env(safe-area-inset-top,0px) + 12px) var(--pad)
          calc(env(safe-area-inset-bottom,0px) + 30px);
  min-height:100vh;
}
body.bare .appbar,
body.bare .qbar,
body.bare .bar,
body.bare #menu-scrim{display:none}
body.bare .app-main{padding:0;min-height:100vh}

/* ─────────── القائمة المنسدلة من الأعلى ─────────── */
.menu-scrim{position:fixed;inset:0;background:var(--scrim);z-index:58;opacity:0;pointer-events:none;transition:opacity .2s}
.menu-scrim.on{opacity:1;pointer-events:auto}
.topmenu{
  position:fixed;inset-inline:0;z-index:59;
  top:calc(var(--top) + env(safe-area-inset-top,0px));
  max-height:min(78vh, 640px);
  display:flex;flex-direction:column;
  background:var(--k-surface);
  border-bottom:1px solid var(--line);
  border-radius:0 0 var(--r-xl) var(--r-xl);
  box-shadow:var(--menu-shadow);
  transform:translateY(-103%);
  opacity:0;
  transition:transform .3s cubic-bezier(.22,1,.28,1), opacity .22s;
  will-change:transform;
  padding-top:2px;
}
.topmenu.on{transform:none;opacity:1}
.menu-head{display:flex;align-items:center;gap:12px;padding:12px 16px 10px}
.menu-logo{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--k-accent);font-weight:700;font-size:18px;color:var(--k-text);
  box-shadow:0 6px 18px 0 6px 18px var(--k-shadow)
}
.menu-head strong{display:block;font-size:15px}
.menu-head small{color:var(--dim);font-size:11.5px}
.menu-search{padding:0 14px 8px}
.menu-search .input{padding:10px 13px;font-size:13.5px;border-radius:12px}
.menu-body{flex:1;overflow-y:auto;padding:2px 10px 12px;-webkit-overflow-scrolling:touch}
.menu-body .group-title{font-size:10.5px;color:var(--dim-2);padding:12px 10px 6px;font-weight:700;letter-spacing:.4px}
.menu-body a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  color:var(--text);font-size:14px;font-weight:500;
}
.menu-body a:active{background:var(--card-3)}
.menu-body a.on{background:var(--k-surface-2);color:var(--text);font-weight:700}
.menu-body a.on svg{color:var(--brand-2)}
.menu-body a svg{width:19px;height:19px;flex:0 0 auto;color:var(--dim)}
.menu-body a .badge{margin-inline-start:auto}
.menu-body .nores{color:var(--dim-2);font-size:13px;text-align:center;padding:26px 10px}
.menu-foot{display:flex;gap:8px;align-items:center;padding:10px 14px 6px;border-top:1px solid var(--line)}
.menu-ver{display:block;text-align:center;color:var(--dim-2);font-size:10.5px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}

/* ─────────── البطل ─────────── */
.hero{
  position:relative;overflow:hidden;
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:18px;margin-bottom:14px;
  background:var(--k-accent);
}
.hero::before{
  content:'';position:absolute;width:230px;height:230px;border-radius:50%;
  inset-block-start:-128px;inset-inline-end:-64px;
  background:transparent;
}
.hero::after{
  content:'';position:absolute;width:190px;height:190px;border-radius:50%;
  inset-block-end:-118px;inset-inline-start:-46px;
  background:transparent;
}
.hero>*{position:relative;z-index:1}
.hero .who{font-size:12.5px;color:var(--dim)}
.hero .name{font-size:21px;font-weight:700;margin:1px 0 10px;letter-spacing:-.3px}
.hero .meta{display:flex;flex-wrap:wrap;gap:7px}
.hero .stats{display:flex;gap:18px;margin-top:14px;padding-top:13px;border-top:1px solid var(--on-hero-line)}
.hero .stats .h{flex:1}
.hero .stats .h b{display:block;font-size:20px;font-weight:700;letter-spacing:-.4px}
.hero .stats .h span{font-size:11px;color:var(--dim)}

.pulse{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500}
.pulse i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 2.2s infinite}
.pulse.off i{background:var(--dim-2);animation:none}
.pulse.warn i{background:var(--warn)}
.pulse.danger i{background:var(--danger)}
@keyframes pulse{0%{box-shadow:0 0 0 0 0 1px 3px var(--k-shadow)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ─────────── بطاقات ─────────── */
.card{
  background:var(--k-surface);
  border:1px solid var(--line);border-radius:var(--r-m);
  padding:16px;margin-bottom:13px;
}
html[data-theme="light"] .card{background:var(--card);box-shadow:0 2px 10px 0 1px 3px var(--k-shadow)}
.card.tight{padding:12px}
.card.accent{border-color:var(--line-2);background:var(--k-surface)}
.card-row{display:flex;align-items:center;gap:12px}
.card h3{font-size:15px}
.card .hint{color:var(--dim);font-size:12.5px}

.section-title{display:flex;align-items:center;gap:9px;margin:20px 2px 11px}
.section-title h2{font-size:14.5px;position:relative;padding-inline-start:11px}
.section-title h2::before{content:'';position:absolute;inset-inline-start:0;inset-block:3px;width:3px;border-radius:2px;background:var(--k-accent)}
.section-title .line{flex:1;height:1px;background:var(--line)}
.section-title .count{font-size:11.5px;color:var(--dim)}

/* ─────────── شبكة الأدوات ─────────── */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.tile{
  position:relative;overflow:hidden;text-align:start;
  display:flex;flex-direction:column;gap:7px;min-height:96px;
  padding:14px;border-radius:var(--r-m);border:1px solid var(--line);
  background:var(--k-surface);
  color:var(--text);font-family:inherit;cursor:pointer;
  transition:transform .12s;
}
html[data-theme="light"] .tile{background:var(--card);box-shadow:0 2px 10px 0 1px 3px var(--k-shadow)}
.tile:active{transform:scale(.982)}
.tile .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--k-surface-2);color:var(--brand-2)}
.tile b{font-size:13.5px;font-weight:700}
.tile small{color:var(--dim);font-size:11.5px;line-height:1.45;display:block}
.tile .tag{position:absolute;inset-block-start:12px;inset-inline-end:12px}
.tile.hot{border-color:var(--line-2)}
.tile.wide{grid-column:span 2;min-height:auto;flex-direction:row;align-items:center;gap:12px}
.tile.wide .ic{flex:0 0 auto}

/* ─────────── بطاقات إحصائية ─────────── */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.stat{
  position:relative;overflow:hidden;
  background:var(--k-surface);
  border:1px solid var(--line);border-radius:var(--r-m);padding:13px 14px;
}
html[data-theme="light"] .stat{background:var(--card);box-shadow:0 2px 10px 0 1px 3px var(--k-shadow)}
.stat::after{content:'';position:absolute;inset-block-start:-46%;inset-inline-start:-30%;width:120px;height:120px;border-radius:50%;background:transparent}
.stat .ic{position:absolute;inset-block-start:11px;inset-inline-end:12px;width:30px;height:30px;border-radius:11px;display:grid;place-items:center;background:var(--soft);color:var(--dim)}
.stat .ic svg{width:17px;height:17px}
.stat .label{color:var(--dim);font-size:11.5px;margin-bottom:2px;padding-inline-end:34px}
.stat .value{font-size:26px;font-weight:700;letter-spacing:-.8px;line-height:1.15}
.stat .sub{color:var(--dim-2);font-size:11px;margin-top:1px}
.stat .meter{margin-top:9px;height:5px;border-radius:99px;background:var(--meter-bg);overflow:hidden}
.stat .meter i{display:block;height:100%;border-radius:99px;background:var(--k-accent)}
.stat.brand .value{color:var(--brand-2)}
.stat.ok .value{color:var(--ok)}
.stat.gold .value{color:var(--gold)}
.stat.danger .value{color:var(--danger)}
.stat.wide{grid-column:span 2}

/* ─────────── شريط أرقام سريع ─────────── */
.strip{display:flex;gap:9px;overflow-x:auto;padding:2px 0 4px}
.strip .s{flex:1 0 auto;min-width:104px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.strip .s span{display:block;color:var(--dim);font-size:11px}
.strip .s b{font-size:16px;font-weight:700}
.strip .s.ok b{color:var(--ok)}
.strip .s.warn b{color:var(--warn)}
.strip .s.danger b{color:var(--danger)}

/* ─────────── شرائح وشارات ─────────── */
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:500;background:var(--soft);border:1px solid var(--line);color:var(--dim)}
.chip.ok{background:var(--k-positive);border-color:transparent;color:var(--k-on-accent)}
.chip.off{color:var(--dim-2)}
.chip.warn{background:var(--k-accent);border-color:transparent;color:var(--k-on-accent)}
.chip.danger{color:var(--danger);border-color:var(--k-error);background:var(--k-surface-2)}
.chip.brand{color:var(--brand-2);border-color:var(--line-2);background:var(--brand-soft)}
.chip.gold{background:var(--k-accent);border-color:transparent;color:var(--k-on-accent)}
.badge{margin-inline-start:auto;background:var(--brand);color:var(--k-text);font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;min-width:20px;text-align:center}

/* ─────────── أزرار ─────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);background:var(--card-2);color:var(--text);
  font-family:inherit;font-size:13.5px;font-weight:500;padding:11px 16px;border-radius:13px;
  cursor:pointer;transition:transform .12s;
}
html[data-theme="light"] .btn{background:var(--card)}
.btn:active{transform:scale(.97)}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--k-accent);border-color:transparent;color:var(--k-text);font-weight:700;box-shadow:0 6px 18px 0 6px 18px var(--k-shadow)}
.btn-danger{background:var(--k-error);border-color:transparent;color:var(--k-on-accent)}
.btn-ok{background:var(--k-positive);border-color:transparent;color:var(--k-on-accent)}
.btn-ghost{background:transparent}
.btn-sm{padding:7px 11px;font-size:12.5px;border-radius:10px}
.btn-block{width:100%}
.btn-lg{padding:14px 18px;font-size:15px;border-radius:15px;font-weight:700}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* ─────────── حقول الإدخال ─────────── */
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:6px;font-weight:500}
.field .note{font-size:11.5px;color:var(--dim-2);margin-top:5px}
.input,textarea,select{
  width:100%;padding:12px 13px;font-family:inherit;font-size:14px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;color:var(--text);
  transition:border-color .15s;
}
html[data-theme="light"] .input,html[data-theme="light"] textarea,html[data-theme="light"] select{background:var(--k-accent-soft)}
.input:focus,textarea:focus,select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea{min-height:92px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:none;background-color:var(--k-surface);background-position:calc(0% + 14px) 50%,calc(0% + 19px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.input::placeholder,textarea::placeholder{color:var(--dim-2)}
.switch{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;cursor:pointer}
.switch input{appearance:none;width:44px;height:25px;border-radius:999px;background:var(--line);position:relative;transition:background .16s;flex:0 0 auto;cursor:pointer}
.switch input::after{content:'';position:absolute;top:2.5px;inset-inline-end:2.5px;width:20px;height:20px;border-radius:50%;background:var(--k-line);transition:transform .16s}
.switch input:checked{background:var(--brand)}
.switch input:checked::after{transform:translateX(19px)}
html[dir="rtl"] .switch input:checked::after{transform:translateX(-19px)}
.switch .grow{flex:1}
.switch strong{display:block;font-size:13.5px;font-weight:500}
.switch small{color:var(--dim);font-size:11.5px}

/* ─────────── قوائم ─────────── */
.list{display:flex;flex-direction:column;gap:10px}
.item{
  position:relative;
  background:var(--k-surface);
  border:1px solid var(--line);border-radius:var(--r-m);padding:13px 14px;
}
html[data-theme="light"] .item{background:var(--card);box-shadow:0 2px 10px 0 1px 3px var(--k-shadow)}
.item::before{content:'';position:absolute;inset-block:14px;inset-inline-start:0;width:3px;border-radius:0 3px 3px 0;background:var(--k-accent);opacity:.7}
.item.off{opacity:.55}
.item-top{display:flex;align-items:flex-start;gap:10px}
.item-title{font-size:14px;font-weight:500;word-break:break-word}
.item-sub{color:var(--dim);font-size:12px;margin-top:2px;word-break:break-word}
.item-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.item-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line)}
.rank{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--card-3);color:var(--dim);flex:0 0 auto}
.rank.first{background:var(--k-accent-soft);color:var(--k-text)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;direction:ltr;text-align:left;word-break:break-all;background:var(--k-dark);border:1px solid var(--k-line);border-radius:9px;padding:7px 9px;color:var(--k-accent)}
.meter{height:5px;border-radius:99px;background:var(--meter-bg);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:var(--k-accent)}
.hbar{display:flex;align-items:center;gap:10px;padding:7px 0}
.hbar .lbl{width:74px;flex:0 0 auto;font-size:12.5px;color:var(--dim)}
.hbar .track{flex:1;height:9px;border-radius:99px;background:var(--meter-bg);overflow:hidden}
.hbar .track i{display:block;height:100%;border-radius:99px;background:var(--k-accent)}
.hbar .val{width:52px;text-align:left;font-size:12.5px;font-weight:700;flex:0 0 auto}

/* ─────────── مكتبة الصور ─────────── */
.grid-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.thumb{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--card-2);border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .lock{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim-2);font-size:11px}
.thumb .del{position:absolute;top:5px;inset-inline-start:5px;width:26px;height:26px;border-radius:50%;background:var(--k-line);border:1px solid var(--line);color:var(--k-error);display:grid;place-items:center;font-size:15px;line-height:1}
.thumb.sel{outline:2px solid var(--brand);outline-offset:1px}

/* ─────────── حالات ─────────── */
.empty{text-align:center;padding:40px 22px;color:var(--dim)}
.empty .icon{width:64px;height:64px;margin:0 auto 14px;border-radius:20px;display:grid;place-items:center;background:var(--k-surface);border:1px solid var(--line);font-size:26px}
.empty h3{font-size:15px;margin-bottom:6px}
.empty p{font-size:13px;color:var(--dim-2);margin-bottom:16px}

.skel{background:var(--k-surface);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:var(--r-m);height:74px;margin-bottom:11px;border:1px solid var(--line)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.spinner{width:20px;height:20px;border:2.5px solid var(--line);border-top-color:var(--brand-2);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.center{display:grid;place-items:center;padding:34px}

/* ─────────── نوافذ ─────────── */
.modal-scrim{position:fixed;inset:0;background:var(--scrim);z-index:70;display:flex;align-items:flex-end;animation:fade .16s}
.modal-scrim.center{align-items:center;justify-content:center;padding:20px}
.modal{
  width:100%;max-height:92vh;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-l) var(--r-l) 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;animation:up .2s cubic-bezier(.3,0,.2,1)
}
.modal-scrim.center .modal{border-radius:var(--r-l);max-width:460px;padding-bottom:18px}
@keyframes up{from{transform:translateY(26px)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-grip{width:42px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 14px}
.modal h3{font-size:16.5px;margin-bottom:6px}
.modal .lead{color:var(--dim);font-size:13px;margin-bottom:16px}
.modal-actions{display:flex;gap:9px;margin-top:16px}
.modal-actions .btn{flex:1}

/* ─────────── تنبيهات ─────────── */
.toast-host{position:fixed;inset-inline:0;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;padding:0 16px}
.toast{
  background:var(--toast);border:1px solid var(--line);border-radius:13px;
  padding:11px 15px;font-size:13px;max-width:100%;box-shadow:var(--shadow);
  animation:up .18s;display:flex;align-items:center;gap:9px
}
.toast.ok{border-color:var(--k-line)}
.toast.err{border-color:var(--k-error)}
.toast.warn{border-color:var(--k-line)}
.toast .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--brand-2)}
.toast.ok .dot{background:var(--ok)}
.toast.err .dot{background:var(--danger)}
.toast.warn .dot{background:var(--warn)}

/* ─────────── مركز الإشعارات ─────────── */
.notif{display:flex;gap:10px;padding:11px 12px;border-radius:14px;border:1px solid var(--line);background:var(--card);margin-bottom:9px}
.notif .nico{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;background:var(--soft);font-size:15px}
.notif.ok .nico{background:var(--k-line)}
.notif.err .nico{background:var(--k-surface-2)}
.notif.warn .nico{background:var(--k-accent-soft)}
.notif .grow b{display:block;font-size:13.5px}
.notif .grow p{color:var(--dim);font-size:12px;margin-top:1px}
.notif .grow time{color:var(--dim-2);font-size:10.5px;display:block;margin-top:4px}
.notif.unread{border-color:var(--line-2);box-shadow:inset -3px 0 0 var(--brand-2)}
.notif{cursor:pointer}

/* ─────────── سحب للتحديث ─────────── */
.ptr{position:fixed;top:calc(var(--top) + var(--qnav) + env(safe-area-inset-top,0px) + 6px);inset-inline:0;display:flex;justify-content:center;z-index:36;pointer-events:none;opacity:0;transform:translateY(-14px);transition:opacity .18s,transform .18s}
.ptr.on{opacity:1;transform:none}
.ptr .spinner{background:var(--card)}

/* ─────────── مخطط بياني ─────────── */
.chart-wrap{position:relative;width:100%;height:176px;margin-top:6px}
.chart-wrap canvas{width:100%;height:100%}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--dim)}

/* ─────────── شاشة الدخول / الإعداد ─────────── */
.auth{padding:calc(env(safe-area-inset-top,0px) + 26px) 20px calc(env(safe-area-inset-bottom,0px) + 26px);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.auth .logo{
  width:80px;height:80px;border-radius:26px;display:grid;place-items:center;margin:0 auto 16px;
  font-size:31px;font-weight:700;color:var(--k-text);
  background:var(--k-accent);box-shadow:0 14px 34px 0 6px 18px var(--k-shadow)
}
.auth h1{text-align:center;font-size:22px}
.auth .tagline{text-align:center;color:var(--dim);font-size:13px;margin:6px 0 24px;word-break:break-all}
.auth .steps{font-size:12px;color:var(--dim-2);text-align:center;line-height:1.9;margin-top:18px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:5px;margin-bottom:16px}
.seg button{font-family:inherit;font-size:13.5px;font-weight:500;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--dim);cursor:pointer;transition:.15s}
.seg button.on{background:var(--k-accent);color:var(--k-text);font-weight:700}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--dim)}
.kv b{font-weight:500;text-align:left;word-break:break-word}
.banner{border-radius:14px;padding:12px 14px;font-size:12.5px;display:flex;gap:9px;align-items:flex-start;margin-bottom:13px}
.banner.warn{background:var(--k-accent-soft);border:1px solid var(--k-line);color:var(--warn)}
.banner.err{background:var(--k-surface-2);border:1px solid var(--k-error);color:var(--danger)}
.banner.ok{background:var(--k-line);border:1px solid var(--k-line);color:var(--ok)}
.banner.info{background:var(--brand-soft);border:1px solid var(--line-2);color:var(--brand-2)}

/* ═══════════════════════════════════════════════════════════════
   الوضع الخفيف — للأجهزة البطيفة (تلقائي أو يدوي من القائمة)
   ═══════════════════════════════════════════════════════════════ */
body.lite .skel{animation:none;background:var(--card)}
body.lite .pulse i{animation:none;box-shadow:0 0 0 4px 0 1px 3px var(--k-shadow)}
body.lite .stat::after,
body.lite .hero::before,
body.lite .hero::after,
body.lite .item::before{display:none}
body.lite .modal,
body.lite .toast,
body.lite .card,
body.lite .btn-primary,
body.lite .appbar,
body.lite .topmenu,
body.lite .auth .logo,
body.lite .menu-logo,
body.lite .tile,
body.lite .stat{box-shadow:none}
body.lite .topmenu,
body.lite .menu-scrim{transition-duration:.15s}
body.lite .toast{animation:none}
body.lite *{transition-duration:.08s !important}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}

@media (min-width:620px){
  .app-main{max-width:660px;margin-inline:auto}
  .qbar{max-width:660px;margin-inline:auto}
  .topmenu{max-width:660px;margin-inline:auto;border-radius:0 0 var(--r-xl) var(--r-xl)}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .stat-grid{grid-template-columns:repeat(3,1fr)}
}

/* ═══════════════════════════════════════════════════════════════
   المساعد الذكي — شاشة المحادثة
   كل الألوان من متغيّرات الثيم، فتتبدّل مع الوضع النهاري تلقائياً.
   بلا ضبابية وبلا حركات ثقيلة: شرائح ثابتة وتدرّجات مركّبة (سريع على الأجهزة البطيئة).
   ═══════════════════════════════════════════════════════════════ */

.chat-tools{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.chat-tools .btn{display:inline-flex;align-items:center;gap:6px}
.chat-tools .btn svg{width:16px;height:16px}
.chat-role{margin-inline-end:auto}

.chat-intro{
  position:relative;overflow:hidden;text-align:center;padding:22px 18px;margin-bottom:14px;
  background:var(--k-accent);
  border:1px solid var(--on-hero-line);
}
.chat-intro h2{margin:10px 0 6px;font-size:19px;color:var(--k-text);letter-spacing:-.2px}
.chat-intro p{margin:0;color:var(--k-text-2);font-size:13.5px;line-height:1.75}
.chat-intro .ci-hint{margin-top:10px;font-size:12.5px;color:var(--k-text-2)}
.ci-ico{
  width:52px;height:52px;margin:0 auto;border-radius:16px;display:grid;place-items:center;
  background:var(--k-accent);color:var(--k-text);
  box-shadow:0 10px 22px var(--skill-1);
}
.ci-ico svg{width:26px;height:26px}

.chat-list{display:flex;flex-direction:column;gap:12px}

/* ── فقاعات الرسائل ── */
.msg{display:flex;gap:8px;align-items:flex-start;max-width:100%}
.msg.me{justify-content:flex-start;flex-direction:row-reverse}
.msg .bubble{
  padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.75;
  max-width:82%;white-space:pre-wrap;word-break:break-word;
  /*
   * عرض أدنى للفقاعة: رسالة قصيرة عربية كانت تتقلّص إلى ~٥٦px فيكسر المتصفح
   * الكلمة العربية حرفًا حرفًا («الخـ» فوق «ـطة»). الحدّ الأدنى يضمن كلمة
   * عربية كاملة في سطر واحد، ولا يؤثر في الرسائل الطويلة (فهو أرضية لا سقف).
   */
  min-width:76px;
}
.msg.me .bubble{
  background:var(--k-accent);
  color:var(--k-text);border-bottom-left-radius:6px;box-shadow:0 6px 16px var(--skill-2);
}
.msg.bot .ai-body{max-width:86%;display:flex;flex-direction:column;gap:8px}
.msg.bot .bubble{
  background:var(--card);border:1px solid var(--line);color:var(--text);
  border-top-right-radius:6px;
  min-width:88px;   /* ردود الوكيل القصيرة تبقى مقروءة ككلمة كاملة */
}
.msg.bot.failed .bubble{border-color:var(--k-error)}
.ai-badge{
  flex:0 0 auto;width:30px;height:30px;border-radius:11px;display:grid;place-items:center;
  background:var(--k-accent);color:var(--k-text);margin-top:2px;
}
.ai-badge svg{width:17px;height:17px}
.ai-meta{font-size:11px;color:var(--dim-2);padding-inline-start:2px}
.ai-steps{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.ai-step{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--dim)}
.ai-dot{min-width:20px;height:20px;border-radius:50%;background:var(--brand-soft, var(--k-line));color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}

/* ── بطاقات العمليات المنفّذة ── */
.act{
  background:var(--card-2);border:1px solid var(--line);border-radius:13px;padding:9px 11px;
}
.act.danger{border-color:var(--k-error)}
.act-top{display:flex;align-items:center;gap:8px}
.act-ico{display:grid;place-items:center;color:var(--brand-2);flex:0 0 auto}
.act-ico svg{width:16px;height:16px}
.act-brief{flex:1;font-size:13px;font-weight:500;color:var(--text);line-height:1.6}
.act-msg{font-size:12px;color:var(--dim);margin-top:6px;line-height:1.7}
.act-more{
  margin-top:8px;background:none;border:0;color:var(--brand-2);font-size:12px;
  font-family:inherit;padding:0;text-decoration:underline;cursor:pointer;
}

/* ── بطاقة التأكيد ── */
.confirm{
  background:var(--card-3);border:1px solid var(--line-2);border-radius:15px;padding:13px;
  box-shadow:0 8px 20px 0 6px 18px var(--k-shadow);
}
.confirm.danger{border-color:var(--k-error);background:var(--k-surface)}
.cf-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px}
.cf-body{font-size:13px;color:var(--dim);line-height:1.7;margin-bottom:11px}

/* ── سطر الحالة ── */
.chat-status{
  display:flex;align-items:center;gap:9px;margin:12px 2px;font-size:13px;color:var(--brand-2);
}
.chat-status.warn{color:var(--warn)}
.chat-status.info{color:var(--accent)}
.chat-status .dot{
  width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto;
}
body:not(.lite) .chat-status .dot{animation:chatPulse 1.1s ease-in-out infinite}
@keyframes chatPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}

/* ── أفكار جاهزة ── */
.chat-ideas{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.idea{
  background:var(--soft);border:1px solid var(--line);color:var(--text);
  border-radius:999px;padding:8px 13px;font-size:12.5px;font-family:inherit;cursor:pointer;
  line-height:1.4;
}
.idea:active{border-color:var(--brand)}

/* ── صندوق الكتابة (ثابت أسفل الشاشة) ── */
.chat-spacer{height:104px}
.composer{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:flex-end;gap:9px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--appbar-a);border-top:1px solid var(--line);
}
.composer textarea{
  flex:1;min-height:44px;max-height:120px;resize:none;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  color:var(--text);font-family:inherit;font-size:14.5px;line-height:1.6;padding:11px 13px;
}
.composer textarea:focus{outline:none;border-color:var(--brand)}
.composer .send{
  flex:0 0 auto;width:46px;height:46px;border:0;border-radius:14px;display:grid;place-items:center;
  background:var(--k-accent);color:var(--k-text);cursor:pointer;
  box-shadow:0 8px 18px var(--skill-1);
}
.composer .send svg{width:20px;height:20px}
.composer button[hidden]{display:none}
.composer .send.stop{background:var(--k-error);font-size:20px}

/* ── شرائح اقتراحات (المهام الذكية وغيرها) ── */
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip-btn{font-family:inherit;font-size:12.5px;line-height:1.5;padding:9px 12px;border-radius:999px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--dim);cursor:pointer;transition:.15s}
.chip-btn:active{transform:scale(.97)}
.chip-btn:hover{border-color:var(--brand);color:var(--text)}
body.lite .chip-btn{transition:none}

/* ═══ محادثة الوكيل: شريط حيّ + صفوف أدوات نظيفة (1.0.12) ═══ */
.livebar{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:7px;
  margin:0 0 10px;padding:9px 12px;border-radius:13px;font-size:12.5px;
  background:var(--k-surface-2);
  border:1px solid var(--line);color:var(--text);backdrop-filter:blur(6px);
}
.livebar b{color:var(--k-text);font-weight:600}
.livebar-sep{opacity:.45}
.dotpulse{
  width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 0 0 6px 18px var(--k-shadow);animation:dotpulse 1.4s infinite;
}
@keyframes dotpulse{
  0%{box-shadow:0 0 0 0 0 6px 18px var(--k-shadow)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.toolrow{
  display:flex;align-items:center;gap:9px;margin:2px 0 2px 38px;padding:9px 12px;
  border-radius:12px;background:var(--card-2);border:1px solid var(--line);
  font-size:13px;line-height:1.6;cursor:pointer;
}
.toolrow-fail{border-color:var(--k-line)}
.toolrow-ic{flex:0 0 auto}
.toolrow-tx{flex:1;min-width:0;color:var(--text);word-break:break-word}
.toolrow-tx b{color:var(--k-text);font-weight:600}
.toolrow-more{flex:0 0 auto;font-size:11.5px;color:var(--brand);opacity:.9}
.toolrow.open .toolrow-more{opacity:.55}
.toolrow-data{
  margin:2px 0 8px 38px;padding:10px 12px;border-radius:12px;font-size:12px;
  background:var(--k-surface-2);border:1px solid var(--line);color:var(--dim);
  white-space:pre-wrap;word-break:break-all;max-height:220px;overflow:auto;
}
.bubble-done{
  background:var(--k-surface-2);
  border-color:var(--k-line);
}

/* ═══ أنميشن التفكير + لمعة شريط التقدّم (تحديث تلقائي بلا أزرار) ═══ */
.bubble.typing{display:flex;gap:5px;align-items:center;min-width:56px;padding:13px 15px}
.bubble.typing i{width:7px;height:7px;border-radius:50%;background:var(--dim);animation:blink 1.25s infinite}
.bubble.typing i:nth-child(2){animation-delay:.18s}
.bubble.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.planbar i{position:relative;overflow:hidden}
.plancard:not(.plancard-done) .planbar i::after{
  content:'';position:absolute;inset:0;
  background:transparent;
  animation:shimmer 1.7s linear infinite;
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.plancard-now{animation:fadein .5s ease}
@keyframes fadein{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.composer{position:sticky;bottom:0;padding:10px 0 4px;background:var(--k-surface)}

/* ═══════════ شاشة المحادثة (تصميم 2026) ═══════════ */
.chatwrap{padding-bottom:6px}
.modelist{display:flex;gap:7px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.modelist::-webkit-scrollbar{display:none}
.modecard{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:99px;
  background:var(--card-2);border:1px solid var(--line);font-size:12.5px;color:var(--dim);
  white-space:nowrap;cursor:pointer;transition:all .18s ease;
}
.modecard b{font-weight:500;color:inherit}
.modecard-ic{font-size:14px;line-height:1}
.modecard.on{
  background:var(--k-accent);border-color:transparent;
  color:var(--k-text);box-shadow:0 4px 14px 0 6px 18px var(--k-shadow);
}
.modecard.on b{font-weight:600}
.modecard:active{transform:scale(.96)}
.modedesc{font-size:11.5px;color:var(--dim);line-height:1.7;padding:0 2px 8px}
.inputrow{display:flex;align-items:flex-end;gap:8px}
.inputrow .input{flex:1;min-height:44px;max-height:120px;resize:none;border-radius:16px;padding:12px 14px}
.sendbtn{
  flex:0 0 auto;width:46px;height:46px;border-radius:16px;border:0;font-size:17px;color:var(--k-text);
  background:var(--k-accent);cursor:pointer;
  box-shadow:0 5px 16px 0 6px 18px var(--k-shadow);
}
.sendbtn:active{transform:scale(.94)}
.sendbtn[disabled]{opacity:.45;box-shadow:none}
.stopbtn{
  flex:0 0 auto;width:46px;height:46px;border-radius:16px;font-size:13px;
  background:var(--k-surface-2);color:var(--k-error);border:1px solid var(--k-error);cursor:pointer;
}
/* فقاعات أنظف وأوسع */
.chat-list .msg{margin:4px 0 10px}
.chat-list .bubble{border-radius:17px;padding:11px 15px;font-size:13.5px;line-height:1.9;box-shadow:0 1px 0 0 1px 3px var(--k-shadow)}
.chat-list .msg.me .bubble{background:var(--k-surface-2);border:1px solid var(--k-line)}
.chat-list .ai-badge{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--line);font-size:14px}
.chat-list .ai-meta{font-size:10.5px;color:var(--dim);margin-bottom:3px;opacity:.85}
.composer{
  position:sticky;bottom:0;z-index:6;padding:10px 0 6px;margin-top:8px;
  background:var(--k-surface);
}

/* ═══ شريط الأوضاع: شبكة مرتبة بلا قصّ ولا تمرير (تصحيح 1.0.16) ═══ */
.modelist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:2px 0 8px;overflow:visible}
.modecard{
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:52px;padding:7px 4px;border-radius:14px;background:var(--card-2);
  border:1px solid var(--line);color:var(--dim);cursor:pointer;transition:all .16s ease;
}
.modecard-ic{font-size:15px;line-height:1;filter:grayscale(.25)}
.modecard-lb{
  font-size:10.5px;font-weight:500;line-height:1.2;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.modecard.on{background:var(--k-accent);border-color:transparent;color:var(--k-text);box-shadow:0 4px 14px 0 6px 18px var(--k-shadow)}
.modecard.on .modecard-ic{filter:none}
.modecard:active{transform:scale(.95)}
.modedesc{font-size:11.5px;color:var(--dim);line-height:1.7;padding:0 2px 8px;min-height:34px}
.modedesc b{color:var(--text);font-weight:600}
/* اقتراحات جاهزة في حالة البداية */
.suggests{display:flex;flex-direction:column;gap:7px;margin:2px 0 10px}
.suggest{
  text-align:right;padding:11px 14px;border-radius:14px;background:var(--card-2);
  border:1px solid var(--line);color:var(--text);font-size:12.5px;line-height:1.6;cursor:pointer;
}
.suggest:active{transform:scale(.98);background:var(--card)}
/* توحيد شكل الفقاعات: عرض كامل ومحاذاة ثابتة */
.chat-list .msg{display:flex;gap:8px;align-items:flex-start}
.chat-list .msg.me{justify-content:flex-end}
.chat-list .ai-body{max-width:86%}
.chat-list .bubble{word-break:break-word}

/* ═══ تنسيق نهائي: صندوق الكتابة + الفقاعات + سطر شرح الوضع ═══ */
.chat-list .ai-body{max-width:calc(100% - 46px)}
.chat-list .msg.bot .bubble{border-top-right-radius:6px}   /* الذيل ناحية أيقونة الوكيل (يمين) */
.chat-list .msg.me  .bubble{border-top-left-radius:6px;background:var(--k-surface-2)}
.chat-list .msg{margin:0 0 12px}
.chat-list .ai-badge{align-self:flex-start;margin-top:2px;flex:0 0 auto}

/* صندوق الكتابة: بطاقة نظيفة في الأسفل */
.composer{
  padding:12px 12px 10px;border-radius:20px;border:1px solid var(--line);
  background:var(--k-surface-2);
  box-shadow:0 -8px 26px 0 6px 18px var(--k-shadow);
}
.modedesc{
  display:block;width:100%;box-sizing:border-box;padding:9px 12px;border-radius:12px;
  background:var(--k-line);border:1px solid var(--line);
  font-size:11.5px;line-height:1.85;color:var(--dim);margin:0 0 10px;overflow:visible;white-space:normal;
}
.modedesc b{display:block;color:var(--text);font-size:12px;font-weight:600;margin-bottom:2px}
.inputrow{align-items:center}
.inputrow .input{padding:11px 14px;line-height:1.6;font-size:13px}
.suggests{margin-top:2px}
.suggest{padding:12px 14px;line-height:1.7}

/* ═══ تصحيح 1.0.17: صندوق المحادثة عمودي ═══
   صندوق «المدير التسويقي» يحمل ٣ طبقات فوق بعضها (الأوضاع ← الشرح ← الكتابة)
   بينما `.composer` مشترك ومرسوم صفاً واحداً من أجل شاشة المساعد (كتابة + إرسال).
   بلا هذه القاعدة يضغط الـflex الثلاث طبقات في صف واحد فتُسحق أزرار الأوضاع
   وصندوق الكتابة على الهاتف. نُبقي المساعد على الصف ونقلب المحادثة عموداً. */
.composer-chat{flex-direction:column;align-items:stretch;gap:0}
.composer-chat .modelist,
.composer-chat .inputrow{width:100%;min-width:0}

/* ═══════════════════════════════════════════════════════════════
   تجديد الواجهة 1.0.17 — «حديث ونظيف»
   طبقة أخيرة في الملف ترفع مستوى الأسطح والظلال والتفاعل والمسافات،
   بلا أي تغيير في بنية HTML ولا في الوظائف (كل data-act كما هو).
   الترتيب: القشرة ← المكوّنات المشتركة ← المحادثة ← اللمس والتركيز.
   ═══════════════════════════════════════════════════════════════ */

/* ── ١) القشرة: شريط علوي أوضح ومساحة أوسع للعنوان ── */
.appbar{
  padding:env(safe-area-inset-top,0px) 8px 0;gap:4px;
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 24px -18px 0 6px 18px var(--k-shadow);
}
html[data-theme="light"] .appbar{box-shadow:0 8px 18px -14px 0 6px 18px var(--k-shadow)}
.appbar-title h1{font-size:16.5px;letter-spacing:-.2px}
.appbar-title p{font-size:11px;margin-top:-4px}
.icon-btn{
  border-radius:13px;background:var(--soft);
  /* هدف لمس ٤٤px كامل — كان ٣٨px */
  width:44px;height:44px;
  transition:transform .14s cubic-bezier(.2,.8,.3,1),background .18s,border-color .18s;
}
.icon-btn:hover{background:var(--card-2);border-color:var(--line-2)}
.icon-btn.small{width:36px;height:36px;border-radius:11px}

/* شرح الشاشة في الشريط: بدل قطع حادّ للنص، تلاشٍ ناعم في الطرف */
.appbar-title p{
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 26px);
  mask-image:linear-gradient(to left,transparent 0,#000 26px);
}

/* شريط التنقّل السريع: شرائح أوسع والفعّالة بتوهّج هادئ */
.qbar a{min-height:44px;padding:10px 15px;transition:transform .14s cubic-bezier(.2,.8,.3,1),background .18s,color .18s}
.qbar a.on{box-shadow:0 10px 22px -12px 0 6px 18px var(--k-shadow)}

/* ── ٢) المكوّنات المشتركة: سطح واحد يتميّز عن الخلفية ── */
.card,.item,.tile,.stat,.strip .s,.act,.notif,.empty .icon{
  background:var(--surface);border-color:var(--line);box-shadow:var(--hair),var(--elev-1);
}
.card{border-radius:var(--r-m);padding:16px}
.item,.tile,.stat{border-radius:var(--r-m)}
.tile:active{transform:scale(.985)}
.tile b{font-size:14px}
.tile small{font-size:12px}
.tile .ic{border-radius:13px;box-shadow:var(--hair)}
.hero{box-shadow:var(--elev-2)}
html[data-theme="light"] .hero{box-shadow:var(--elev-1)}
.section-title{margin:22px 2px 12px}
.section-title h2{font-size:15px;letter-spacing:-.1px}
.stat .value{font-size:27px;letter-spacing:-1px}
.empty{padding:44px 22px}
.empty .icon{border-radius:22px}

/* أزرار: ارتفاع لمس ملائم ٤٤px وتغذية بصرية فورية عند الضغط */
.btn{
  min-height:44px;border-radius:14px;background:var(--surface);
  box-shadow:var(--hair),var(--elev-1);font-size:14px;
  transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s,border-color .18s;
}
.btn-ghost{background:transparent;box-shadow:none}
.btn-sm{min-height:36px;padding:8px 12px;border-radius:11px}
/* الأنواع تُعاد كتابتها بعد القاعدة الأساسية — وإلّا غلب سطح الزر لونها */
.btn-primary{
  background:var(--k-accent);
  border-color:transparent;color:var(--k-text);font-weight:700;
  box-shadow:0 12px 24px -14px 0 6px 18px var(--k-shadow);
}
.btn-danger{background:var(--k-error);border-color:transparent;color:var(--k-on-accent)}
.btn-ok{background:var(--ok-soft);border-color:var(--k-line);color:var(--ok)}
.btn[disabled]{opacity:.45}

/* حقول الإدخال: حدود أدفأ وحلقة تركيز واضحة */
.input,textarea,select{border-radius:14px;transition:border-color .16s,box-shadow .16s,background .16s}
.input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px var(--brand-soft)}
.field label{font-weight:600}
.chip{padding:5px 11px;font-weight:600;letter-spacing:.1px}
.badge{padding:2px 8px;box-shadow:0 4px 10px -6px 0 6px 18px var(--k-shadow)}
.modal{box-shadow:var(--elev-3)}
.toast{border-radius:15px;box-shadow:var(--elev-2)}

/* ── ٣) شاشة المحادثة: فقاعات أوضح وأوضاع مريحة للّمس ── */
.chat-list{gap:13px}
.chat-list .msg{margin:0 0 13px;gap:9px}
.chat-list .ai-body{max-width:calc(100% - 44px);gap:6px}
.chat-list .ai-badge{width:30px;height:30px;border-radius:11px;font-size:15px}
.chat-list .ai-meta{font-size:10.5px;font-weight:600;letter-spacing:.2px;color:var(--dim)}
.chat-list .bubble{padding:12px 15px;font-size:14px;line-height:1.95;border-radius:18px}
.chat-list .msg.bot .bubble{background:var(--surface);border:1px solid var(--line);box-shadow:var(--hair),var(--elev-1)}
.chat-list .msg.me .bubble{background:var(--k-surface-2);border:1px solid var(--k-line);box-shadow:none}

/* شبكة الأوضاع: بطاقة لمس ٦٨px مع أيقونة أكبر وسطرين للاسم بلا قصّ */
.modelist{gap:8px;padding:2px 0 10px}
.modecard{
  min-height:68px;gap:5px;padding:9px 5px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--hair);
  transition:transform .14s cubic-bezier(.2,.8,.3,1),background .2s,border-color .2s,box-shadow .2s;
}
.modecard-ic{font-size:19px;filter:grayscale(.3)}
.modecard-lb{
  font-size:11px;font-weight:600;line-height:1.3;white-space:normal;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%;
}
.modecard.on{background:var(--k-accent);border-color:transparent;color:var(--k-text);box-shadow:0 14px 26px -16px 0 6px 18px var(--k-shadow)}
.modecard.on .modecard-ic{filter:none}
.modecard:active{transform:scale(.96)}

/* صندوق الكتابة: بطاقة طائرة بحدّ رقيق وحلقة عند الكتابة */
.composer{border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--elev-2);padding:12px;transition:border-color .18s,box-shadow .18s}
.composer:focus-within{border-color:var(--line-2);box-shadow:var(--elev-2),0 0 0 4px var(--brand-soft)}
.modedesc{border-radius:14px;background:var(--soft);border:1px solid var(--line);padding:10px 12px;font-size:12px;line-height:1.85;margin:0 0 10px}
.modedesc b{font-size:12.5px;font-weight:700;color:var(--brand-2)}
.inputrow{gap:9px}
.inputrow .input{min-height:48px;border-radius:16px;font-size:14px}
.sendbtn{width:48px;height:48px;border-radius:16px;font-size:18px;box-shadow:0 14px 26px -16px 0 6px 18px var(--k-shadow)}
.stopbtn{width:48px;height:48px;border-radius:16px}

/* الاقتراحات: بطاقة قابلة للضغط مع سهم في الطرف الآخر */
.suggests{gap:9px;margin:4px 0 14px}
.suggest{
  position:relative;min-height:50px;display:flex;align-items:center;
  padding-block:13px;padding-inline:16px 44px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--hair),var(--elev-1);
  font-size:13.5px;font-weight:500;line-height:1.7;text-align:start;
  transition:transform .14s cubic-bezier(.2,.8,.3,1),background .18s,border-color .18s;
}
.suggest::after{content:'‹';position:absolute;inset-inline-end:17px;inset-block-start:50%;transform:translateY(-50%);font-size:21px;line-height:1;color:var(--brand-2);opacity:.8}

/* الشريط الحي وصفوف الأدوات: بلا ضبابية وبلا نص أبيض يختفي في الوضع النهاري */
.livebar{background:var(--k-surface-2);border-color:var(--line-2);border-radius:14px;padding:10px 13px;backdrop-filter:none}
.livebar b,.toolrow-tx b{color:var(--text)}
.toolrow{border-radius:13px;background:var(--card-2);box-shadow:var(--hair);transition:background .18s,border-color .18s}
.toolrow-more{color:var(--brand-2);font-weight:600}
.toolrow-data{border-radius:13px;background:var(--deep)}

/* ── ٤) تصحيحات تجربة المستخدم ── */

/* كل ما يُضغط ليس أصغر من ٤٤px ارتفاعا (معيار اللمس) */
.qbar a,.menu-body a,.seg button,.modecard,.suggest,.toolrow,.notif,.idea,.chip-btn{min-height:44px}

/* حلقة تركيز تظهر بلوحة المفاتيح فقط — لا تزحم اللمس */
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:10px}

/* عند التركيز على حقل داخل المحادثة لا تختفي آخر رسالة تحت الصندوق */
.app-main{scroll-padding-bottom:calc(env(safe-area-inset-bottom,0px) + 140px)}
::selection{background:var(--k-line);color:inherit}

/* الوضع النهاري: نصوص كانت مثبّتة باللون الأبيض فكانت تختفي على خلفية فاتحة */
html[data-theme="light"] .chat-intro h2{color:var(--text)}
html[data-theme="light"] .chat-intro p{color:var(--dim)}
html[data-theme="light"] .chat-intro .ci-hint{color:var(--dim-2)}
html[data-theme="light"] .mono{background:var(--k-dark);border-color:transparent}
html[data-theme="light"] .input::placeholder,
html[data-theme="light"] textarea::placeholder{color:var(--dim)}

/* في الوضع النهاري كانت قاعدة .btn الخلفية تغلب لون الأزرار الأساسية،
   فيصير نص الزر الأبيض على خلفية بيضاء — أي زر رئيسي غير مرئي. */
html[data-theme="light"] .btn-primary{
  background:var(--k-accent);
  border-color:transparent;color:var(--k-text);
}
html[data-theme="light"] .btn-ghost{background:transparent}
html[data-theme="light"] .btn-danger{background:var(--k-error);border-color:transparent;color:var(--k-on-accent)}
html[data-theme="light"] .btn-ok{background:var(--k-positive);border-color:transparent;color:var(--k-on-accent)}

/* على الهواتف الضيقة: العنوان يأخذ مساحته كاملة
   زر الوضع النهاري في الشريط مكرَّر في القائمة السفلية وفي الإعدادات،
   فنخفيه هنا فقط عند ضيق العرض — أوقف هذا الاستعلام لعودته. */
@media (max-width:440px){
  #btn-theme{display:none}
  .appbar-online{width:18px}
}

/* الوضع الخفيف: يحترم قاعدة الأداء القديمة (بلا ظلال كلياً) */
body.lite .hero,
body.lite .composer,
body.lite .suggest,
body.lite .plancard,
body.lite .modecard{box-shadow:none}
body.lite .livebar{background:var(--card-2)}
body.lite .chat-list .msg.bot .bubble{box-shadow:none}

/* ═══════════════════════════════════════════════════════════════
   طبقة ثانية 1.0.17 — مكوّنات كانت تُبنى في الكود بلا أي ستايل
   جرد آلي كشف كلاسات تُستخدم فعلاً وغير معرّفة في هذا الملف،
   وأهمّها بطاقة الخطة «الخطوة N من M» — قلب شاشة المحادثة.
   ═══════════════════════════════════════════════════════════════ */

/* ── معاملات الإجراء (بطاقة الموافقة): أزواج «اسم: قيمة» بدل JSON خام ── */
.argbox{
  margin-top:9px;border:1px solid var(--line);border-radius:12px;
  background:var(--deep);overflow:hidden;
}
.argrow{display:flex;align-items:baseline;gap:10px;padding:8px 11px;font-size:12.5px;min-height:34px}
.argrow + .argrow{border-top:1px solid var(--line)}
.argk{flex:0 0 auto;color:var(--dim);font-size:11.5px;min-width:74px}
.argv{flex:1;min-width:0;color:var(--text);font-weight:600;overflow-wrap:anywhere}
body.lite .argbox{background:var(--card-2)}

/* ── بطاقة الخطة ── */
.plancard{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:13px 14px;margin:2px 0 13px;box-shadow:var(--hair),var(--elev-1);
}
.plancard-done{border-color:var(--k-line)}
.plancard-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.plancard-top b{font-size:13.5px;font-weight:700}
.plancard-now{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--brand-2);
}
.planbar{height:6px;border-radius:99px;background:var(--meter-bg);overflow:hidden;margin-bottom:11px}
.planbar i{display:block;height:100%;border-radius:99px;background:var(--k-accent);transition:width .35s cubic-bezier(.2,.8,.3,1)}
.planlist{display:flex;flex-direction:column;gap:2px}
.planstep{
  display:flex;align-items:flex-start;gap:9px;padding:7px 9px;border-radius:11px;
  font-size:12.5px;line-height:1.7;color:var(--dim-2);
}
.planstep-ic{flex:0 0 auto;width:16px;text-align:center;font-size:12px;opacity:.75}
.planstep-tx{flex:1;min-width:0;word-break:break-word}
.planstep-tag{
  flex:0 0 auto;font-size:10px;font-weight:600;padding:2px 8px;border-radius:99px;
  border:1px solid var(--line);color:var(--dim-2);white-space:nowrap;
}
.planstep-done{color:var(--text)}
.planstep-done .planstep-ic{color:var(--ok);opacity:1}
.planstep-done .planstep-tag{background:var(--k-positive);border-color:transparent;color:var(--k-on-accent)}
.planstep-now{background:var(--brand-soft);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.planstep-now .planstep-ic{color:var(--brand-2);opacity:1}
.planstep-now .planstep-tag{background:var(--k-accent);border-color:transparent;color:var(--k-on-accent)}
.plancard-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.plancard-foot .btn{flex:1}

/* ── مكوّنات ناقصة في بقية الشاشات ── */
.detailsbox{margin:2px 0 13px}
.item-main{flex:1;min-width:0}
.row-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.row-actions:first-child{margin-top:0}
.row-actions:not(:first-child){padding-top:11px;border-top:1px dashed var(--line)}
.card.card-why{border-color:var(--line-2);background:var(--k-accent)}
.modal-body{margin:2px 0 4px}
.modal-body .field:last-child{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════════
   صندوق الكتابة: تصغير المساحة (كان يأكل نحو ٤٠٪ من الشاشة)
   الأوضاع صف واحد قابل للتمرير بدل شبكة صفّين، وشرح الوضع سطران
   فقط، وزر واحد في نفس المكان يت حوّل إلى «إيقاف» أثناء التنفيذ.
   ═══════════════════════════════════════════════════════════════ */
.modelist{display:flex;gap:7px;overflow-x:auto;padding:2px 0 9px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.modelist::-webkit-scrollbar{display:none}
.modecard{
  flex:0 0 auto;flex-direction:row;min-height:44px;padding:9px 14px;border-radius:99px;gap:7px;
  white-space:nowrap;
}
.modecard-ic{font-size:15px}
.modecard-lb{
  display:block;font-size:12.5px;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none;
}
.modedesc{
  display:block;min-height:32px;max-height:32px;overflow:hidden;
  font-size:11.5px;line-height:1.85;padding:6px 11px;border-radius:12px;margin:0 0 9px;
  white-space:nowrap;text-overflow:ellipsis;text-align:start;
}
.modedesc b{display:inline;font-size:11.5px;margin:0}
.sendbtn.stopbtn{
  background:var(--k-surface-2);color:var(--danger);border:1px solid var(--k-error);
  box-shadow:none;font-size:15px;
}

/* ══════════════════════════════════════════════════════════════
   تجربة الشات — تصحيحات الوضوح (لا تغطّي الكتابة ولا تُكرّر الخطأ)
   ══════════════════════════════════════════════════════════════ */

/* التنبيهات كانت تظهر فوق صندوق الكتابة فيغطّي الخطأ مكان الإرسال.
   نرفعها فوق منطقة الـcomposer بالكامل مع احترام Safe Area، والتفاعل
   لا يتأثر أصلاصلاً (pointer-events:none على المضيف). */
body:has(.composer-chat) .toast-host{
  bottom:calc(env(safe-area-inset-bottom,0px) + 124px);
}

/* التنبيه المكرر يُومض بدل أن يُعرض مرتين */
@keyframes toast-pulse{
  0%{transform:scale(1)}
  35%{transform:scale(1.035)}
  100%{transform:scale(1)}
}
.toast.toast-pulse{animation:toast-pulse .32s ease-out}

/* صف «إعادة المحاولة» أسفل صندوق الكتابة — داخل الـcomposer فلا يغطّيه */
.retry-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
}
.retry-row .item-sub{opacity:.75}

/* ═══════════════════════════════════════════════════════════════
   محادثة الوكيل كخط زمني (تصحيح 1.0.17)
   • صفوف الأدوات كانت تُزاح من الجهة المعاكسة (margin-left في واجهة RTL)
     فتبدو منفصلة عن فقاعة الوكيل — المطلوب محاذاتها تحت نصّه.
   • شريط الحالة الحيّ كان يلتصق بأعلى الصفحة فيختفي خلف الشريطين.
   ═══════════════════════════════════════════════════════════════ */
.toolrow{margin-block:2px;margin-inline:39px 0}
.toolrow-data{margin-inline:39px 0}
/* خط رقيق يربط نشاط الوكيل بفقاعته (يمين في RTL) */
.chat-list .toolrow{border-inline-start:2px solid var(--line-2)}
.chat-list .toolrow-fail{border-inline-start-color:var(--k-line)}

/* شريط الحالة الحيّ: يثبت تحت الشريط العلوي وشريط التنقل */
.livebar{
  position:sticky;
  top:calc(var(--top) + var(--qnav) + env(safe-area-inset-top,0px) + 4px);
  z-index:7;margin:0 0 12px;box-shadow:var(--hair),var(--elev-1);
}
body.bare .livebar{top:6px}

/* ═══ شريط الحالة الواضح: يشتغل / منتظر قرارك / خلص / متوقف ═══ */
.statusstrip{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:12px 14px;border-radius:16px;
  background:var(--k-surface-2);
  border:1px solid var(--line);
}
.statusstrip .ss-ic{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;font-size:14px;background:var(--k-line)}
.statusstrip .ss-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.statusstrip .ss-tx b{font-size:13px;font-weight:600;color:var(--text);line-height:1.5}
.statusstrip .ss-tx small{font-size:11.5px;color:var(--dim);line-height:1.6}
.statusstrip-run{border-color:var(--k-line);background:var(--k-surface-2)}
.statusstrip-run .ss-ic{background:var(--k-line)}
.statusstrip-wait{border-color:var(--k-line);background:var(--k-surface)}
.statusstrip-wait .ss-ic{background:var(--k-accent-soft)}
.statusstrip-done{border-color:var(--k-line);background:var(--k-surface-2)}
.statusstrip-fail{border-color:var(--k-error);background:var(--k-surface)}
.statusstrip-stop,.statusstrip-idle{opacity:.92}
.stopbtn-mini{
  flex:0 0 auto;padding:7px 12px;border-radius:11px;font-size:11.5px;cursor:pointer;
  background:var(--k-surface-2);color:var(--k-error);border:1px solid var(--k-error);
}

/* ═══════════════════════════════════════════════════════════════════════
   1.3.0 — إعادة تنظيم الواجهة: هيمنة شاشة مركزية + مساحة عمل + فريقي + المزيد

   Design Tokens مركزية واحدة تحكم كل الصفحات:
     • أسود عميق (خلفية) — --hy-void / --hy-black
     • ليموني واحد (هوية) — --hy-royal / --hy-cobalt / --hy-accent
     • سطح داكن بدل التدرّج — --hy-grad
     • نص فاتح (نصوص وأسطح) — --hy-pearl
   ممنوع: البنفسجي · الزجاج المبالغ فيه · البطاقات المزدحمة.
   كل المقاسات والألوان من هنا — لا قيمة لون مكتوبة داخل أي شاشة.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* الأسود العميق (أسود الحزمة) */
  --hy-void:var(--k-bg);
  --hy-black:var(--k-bg);
  --hy-ink:var(--k-surface);        /* سطح البطاقة */
  --hy-ink-2:var(--k-surface-2);    /* سطح مرتفع */
  --hy-ink-3:var(--k-surface-2);    /* سطح تفاعلي */
  --hy-line:var(--k-line);
  --hy-line-2:var(--k-line-strong);

  /* الهوية: ليموني واحد */
  --hy-royal:var(--k-accent);
  --hy-cobalt:var(--k-accent);
  --hy-cobalt-deep:var(--k-accent-press);
  --hy-blue-2:var(--k-accent);
  --hy-blue-soft:var(--k-surface-2);
  --hy-blue-line:var(--k-line-strong);
  background:var(--k-bg);

  /* النصوص من توكنات النص */
  --hy-pearl:var(--k-text);
  --hy-text:var(--k-text);
  --hy-dim:var(--k-text-2);
  --hy-dim-2:var(--k-text-3);

  /* دلالات الحالة */
  --hy-ok:var(--k-positive); --hy-ok-soft:var(--k-surface-2);
  --hy-warn:var(--k-accent); --hy-warn-soft:var(--k-accent-soft);
  --hy-danger:var(--k-neg-text); --hy-danger-soft:var(--k-surface-2);

  /* الإيقاع والمقاسات */
  --hy-pad:16px;
  --hy-gap-s:8px; --hy-gap:12px; --hy-gap-l:18px;
  --hy-r-xs:10px; --hy-r-s:14px; --hy-r-m:18px; --hy-r-l:24px; --hy-r-pill:999px;
  --hy-header:54px; --hy-tabbar:88px;
  --hy-tap:46px;                  /* أدنى هدف لمس */
  --hy-font:15px;
  --hy-e1:var(--k-shadow);
  --hy-e2:var(--k-shadow);
  --hy-e3:var(--k-shadow);
}

/* إعادة تأسيس لوحة الألوان القديمة على الهوية الجديدة (متغيّر واحد لكل معنى) */
:root{
  --bg:var(--k-bg); --bg-2:var(--k-surface);
  --card:var(--k-surface); --card-2:var(--k-surface-2); --card-3:var(--k-surface-2);
  --line:var(--k-line); --line-2:var(--k-line-strong);
  --brand:var(--k-accent); --brand-2:var(--k-accent); --brand-dark:var(--k-accent-press);
  --brand-soft:var(--k-surface-2);
  --accent:var(--k-accent); --gold:var(--k-accent);
  --ok:var(--k-positive); --warn:var(--k-accent); --danger:var(--k-neg-text);
  --text:var(--k-text); --dim:var(--k-text-2); --dim-2:var(--k-text-3);
  --ok-soft:var(--k-surface-2); --warn-soft:var(--k-accent-soft); --danger-soft:var(--k-surface-2);
  --top:var(--hy-header); --qnav:0px;
  --hero-a:var(--k-accent); --hero-b:var(--k-dark); --hero-c:var(--k-bg);   /* ليموني واحد */
  --surface:var(--k-surface);
  --skill-1:var(--k-line); --skill-2:var(--k-line);
  --glow-1:transparent; --glow-2:transparent; --glow-3:transparent;
}
/* الوضع النهاري: لا كتلة مكرّرة — k-tokens.css يقلب قيم --k-* تلقائيًا. */

/* ─────────── الهيدر البسيط: هيمنة · فريقك جاهز · حالة الاتصال ─────────── */
.appbar.hy-simple{gap:10px;padding:env(safe-area-inset-top,0px) 14px 0}
.hy-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.hy-brand .mark{
  width:34px;height:34px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:var(--hy-grad);color:var(--k-text);font-weight:700;font-size:16px;
  box-shadow:0 6px 16px 0 6px 18px var(--k-shadow);
}
.hy-brand .txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.hy-brand .txt b{font-size:16px;font-weight:700;letter-spacing:-.2px;line-height:1.3}
.hy-brand .txt small{font-size:11px;color:var(--dim);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hy-conn{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:6px 10px;border-radius:var(--hy-r-pill);font-size:11px;
  background:var(--hy-ok-soft);color:var(--hy-ok);border:1px solid var(--k-line);
}
.hy-conn i{width:7px;height:7px;border-radius:50%;background:currentColor}
.hy-conn.off{background:var(--hy-danger-soft);color:var(--hy-danger);border-color:var(--k-error)}
.hy-conn.busy{background:var(--k-accent);border-color:transparent;color:var(--k-on-accent)}

/* ─────────── شريط التنقل السفلي: التنقل الأساسي ─────────── */
.tabbar{
  position:fixed;inset-inline:0;bottom:0;z-index:52;
  height:calc(var(--hy-tabbar) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  /*
   * `grid-auto-flow:column` + `1fr` لكل عمود = توزيع متساوٍ لأي عدد تبويبات
   * دون تعديل CSS عند تغييره. كان مكتوبًا `repeat(4,1fr)` صريحًا، وآضاڤة
   * تبويب خامس كانت ستجعله يلتفّ إلى صفّ ثانٍ غير مرئي (الشريط ارتفاعه ثابت)
   * — أي يختفي تبويبان بلا أي خطأ.
   */
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;
  background:var(--k-surface);
  border-top:1px solid var(--hy-line);
  contain:layout paint;
}
.tabbar[hidden]{display:none}
/*
 * هدف اللمس 48×48 على الأقل (والشريط نفسه 60px). وفي خمسة تبويبات على شاشة
 * 320px يصبح عرض التبويب 64px — فـ«مساحة العمل» تحتاج ألا تُقصّ: نمنع
 * `min-width` الافتراضي للعنصر الشبكي، ونصغّر الخط نسبيًا على الشاشات الضيقة
 * (‏`clamp`) بدل قصّ النص أو قطعه بثلاث نقاط.
 */
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--hy-dim-2);font-size:clamp(9.5px,2.6vw,10.5px);font-weight:500;text-decoration:none;
  min-height:48px;min-width:0;padding-inline:2px;white-space:nowrap;
  position:relative;transition:color .15s;
}
.tabbar a svg{width:21px;height:21px}
.tabbar a.on{color:var(--hy-blue-2)}
.tabbar a.on::before{
  content:'';position:absolute;top:6px;width:26px;height:3px;border-radius:3px;background:var(--hy-grad);
}
.tabbar a:active{transform:scale(.96)}
.tabbar .tab-dot{
  position:absolute;top:8px;inset-inline-end:calc(50% - 18px);
  min-width:16px;height:16px;border-radius:8px;background:var(--hy-danger);color:var(--k-text);
  font-size:10px;line-height:16px;text-align:center;padding:0 4px;
}
/* المساحة السفلية: لا يغطّي الشريط المحتوى ولا صندوق الكتابة */
body:has(.tabbar:not([hidden])) .app-main{
  padding-bottom:calc(var(--hy-tabbar) + env(safe-area-inset-bottom,0px) + 22px);
}
body:has(.tabbar:not([hidden])) .composer-chat{
  bottom:calc(var(--hy-tabbar) + env(safe-area-inset-bottom,0px));
}
body.bare .tabbar{display:none}

/* ─────────── رأس الصفحة والمقاطع ─────────── */
.hy-head{margin:0 0 14px}
.hy-head h2{font-size:19px;font-weight:700;letter-spacing:-.3px}
.hy-head p{margin-top:3px;font-size:12.5px;color:var(--dim)}
.hy-sec{display:flex;align-items:center;gap:10px;margin:20px 2px 10px}
.hy-sec h3{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px}
.hy-sec h3::before{content:'';width:3px;height:14px;border-radius:2px;background:var(--hy-grad)}
.hy-sec .line{flex:1;height:1px;background:var(--hy-line)}
.hy-sec .hint{font-size:11.5px;color:var(--dim)}

.hy-card{
  background:var(--surface);border:1px solid var(--hy-line);border-radius:var(--hy-r-m);
  padding:14px;box-shadow:var(--hy-e1);
}
.hy-card + .hy-card{margin-top:10px}
.hy-card.tight{padding:12px}
.hy-row{display:flex;align-items:center;gap:10px}
.hy-row .grow{flex:1;min-width:0}

/* شبكة الأدوات/الأقسام */
.hy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hy-tile{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:right;
  min-height:96px;padding:13px;border-radius:var(--hy-r-m);cursor:pointer;
  background:var(--surface);border:1px solid var(--hy-line);color:var(--text);
  font-family:inherit;box-shadow:var(--hy-e1);transition:transform .12s,border-color .15s;
}
.hy-tile:active{transform:scale(.98)}
.hy-tile .ic{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--hy-blue-soft);color:var(--hy-blue-2);
}
.hy-tile b{font-size:13.5px;font-weight:700;line-height:1.4}
.hy-tile small{font-size:11.5px;color:var(--dim);line-height:1.55}
.hy-tile .owner{margin-top:auto;font-size:10.5px;color:var(--hy-blue-2);display:flex;align-items:center;gap:5px}
.hy-tile.setup{opacity:.72;border-style:dashed}

/* شرائح الحالة */
.hy-tag{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--hy-r-pill);
  font-size:11px;font-weight:500;background:var(--hy-ink-3);color:var(--dim);border:1px solid var(--hy-line);
}
.hy-tag.ok{background:var(--k-positive);border-color:transparent;color:var(--k-on-accent)}
.hy-tag.warn{background:var(--k-accent);border-color:transparent;color:var(--k-on-accent)}
.hy-tag.bad{background:var(--k-error);border-color:transparent;color:var(--k-on-accent)}
.hy-tag.brand{background:var(--hy-blue-soft);color:var(--hy-blue-2);border-color:var(--hy-blue-line)}

/* أزرار موحّدة (تُبنى على .btn الموجود وتُحسّن اللمس) */
.hy-btnrow{display:flex;flex-wrap:wrap;gap:8px}
.hy-btnrow .btn{min-height:var(--hy-tap);border-radius:var(--hy-r-s)}
.btn.hy-grad{background:var(--hy-grad);border-color:transparent;color:var(--k-text);box-shadow:0 8px 20px 0 6px 18px var(--k-shadow)}

/* مفتاح مزدوج: اعمله بنفسي · خلّي فريقي ينفذه */
.hy-seg{display:flex;gap:6px;padding:5px;border-radius:var(--hy-r-pill);background:var(--hy-black);border:1px solid var(--hy-line)}
.hy-seg button{
  flex:1;min-height:40px;border:0;border-radius:var(--hy-r-pill);cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;background:transparent;color:var(--dim);transition:background .15s,color .15s;
}
.hy-seg button.on{background:var(--hy-grad);color:var(--k-text);box-shadow:0 6px 16px 0 6px 18px var(--k-shadow)}

/* بطاقة وكيل */
.hy-agent{display:flex;gap:12px;align-items:flex-start}
.hy-agent .avatar{
  width:44px;height:44px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;
  background:var(--hy-blue-soft);color:var(--hy-blue-2);border:1px solid var(--hy-blue-line);
}
.hy-agent.off .avatar{background:var(--hy-ink-3);color:var(--hy-dim-2);border-color:var(--hy-line)}
.hy-agent .who{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hy-agent .who b{font-size:14.5px;font-weight:700}
.hy-agent .who small{font-size:11px;color:var(--dim)}
.hy-agent .goal{font-size:12px;color:var(--dim);line-height:1.65;margin-top:4px}
.hy-agent .skills{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.hy-agent .meters{display:flex;gap:14px;margin-top:10px;padding-top:9px;border-top:1px solid var(--hy-line)}
.hy-agent .meters div{font-size:11px;color:var(--dim)}
.hy-agent .meters b{display:block;font-size:14px;color:var(--text);font-weight:700}

/* صف أداة داخل شيت الصلاحيات */
.hy-tool{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--hy-line)}
.hy-tool:last-child{border-bottom:0}
.hy-tool .grow{flex:1;min-width:0}
.hy-tool b{font-size:13px;font-weight:600;display:block}
.hy-tool small{font-size:11px;color:var(--dim-2);display:block;margin-top:2px}
.hy-tool.dim{opacity:.62}
.hy-switch{position:relative;width:44px;height:26px;flex:0 0 auto}
.hy-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.hy-switch i{position:absolute;inset:0;border-radius:var(--hy-r-pill);background:var(--hy-ink-3);border:1px solid var(--hy-line);transition:background .15s}
.hy-switch i::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:20px;height:20px;border-radius:50%;background:var(--hy-dim-2);transition:transform .15s,background .15s}
.hy-switch input:checked + i{background:var(--hy-blue-soft);border-color:var(--hy-blue-line)}
.hy-switch input:checked + i::after{background:var(--hy-royal);transform:translateX(-18px)}
html[dir="rtl"] .hy-switch input:checked + i::after{transform:translateX(-18px)}

/* شريط بحث موحّد */
.hy-search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--hy-r-s);
  background:var(--hy-black);border:1px solid var(--hy-line)}
.hy-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-family:inherit;font-size:14px}
.hy-search input:focus{outline:none}
.hy-search svg{color:var(--dim)}

/* حالات: فارغ · خطأ · غير متصل · نجاح */
.hy-state{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:26px 16px;
  border-radius:var(--hy-r-m);border:1px dashed var(--hy-line);background:var(--hy-black)}
.hy-state .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--hy-ink-2);color:var(--hy-blue-2);font-size:20px}
.hy-state b{font-size:14px}
.hy-state p{font-size:12px;color:var(--dim);line-height:1.7;max-width:32ch}
.hy-state.err .ic{background:var(--hy-danger-soft);color:var(--hy-danger)}
.hy-offline{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:var(--hy-r-s);
  background:var(--hy-warn-soft);border:1px solid var(--k-line);color:var(--hy-warn);font-size:12px;
}
.hy-note{font-size:11.5px;color:var(--dim-2);line-height:1.7;margin-top:8px}
.hy-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hy-kpi div{background:var(--hy-black);border:1px solid var(--hy-line);border-radius:var(--hy-r-s);padding:10px;text-align:center}
.hy-kpi b{display:block;font-size:17px;font-weight:700}
.hy-kpi small{font-size:10.5px;color:var(--dim)}
@media (max-width:360px){
  .hy-grid{grid-template-columns:1fr}
  .hy-kpi{grid-template-columns:repeat(2,1fr)}
}
body.lite .hy-tile,body.lite .hy-card{box-shadow:none}

/* ══════════════ الهرمية: وكيل ← موظف ← مهارة (شاشة فريقي) ══════════════
   الإيقاع البصري نفسه: حدود --hy-line، مسافات hy-r-*، ولا لون خارج الهوية.
   الموظف يظهر مُزاحًا عن وكيله بخط رأسي، والمهارة تحته بخط أرقّ. */

.hy-head-line{font-size:12px;color:var(--hy-dim-2);margin-top:5px}

/* ── الموظفون ── */
.hy-emp{margin:8px 0 0;padding:11px 12px;border-radius:var(--hy-r-s);
  background:var(--hy-ink-2);border:1px solid var(--hy-line);border-inline-start:3px solid var(--hy-blue-line)}
.hy-emp.off{border-inline-start-color:var(--hy-line-2);opacity:.86}
.hy-emp + .hy-emp{margin-top:8px}
.hy-emp-top{display:flex;align-items:flex-start;gap:10px}
.hy-emp-top .grow{flex:1;min-width:0}
.hy-emp-top .who{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hy-emp-top .who b{font-size:13.5px;font-weight:700}
.hy-emp-top small{display:block;font-size:11.5px;color:var(--hy-dim);line-height:1.65;margin-top:3px}
.hy-emp-avatar{width:32px;height:32px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;
  background:var(--hy-blue-soft);color:var(--hy-blue-2);border:1px solid var(--hy-blue-line)}
.hy-emp-avatar svg{width:17px;height:17px}
.hy-emp-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.hy-emp-meta span{font-size:10.5px;color:var(--hy-dim);background:var(--hy-black);
  border:1px solid var(--hy-line);border-radius:var(--hy-r-pill);padding:3px 9px}
.hy-emp-body{margin-top:11px;padding-top:11px;border-top:1px solid var(--hy-line)}
.hy-tools-mini{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}

/* ── المهارات داخل الموظف ── */
.hy-skills{margin:9px 0 0;padding-inline-start:10px;border-inline-start:2px solid var(--hy-line)}
.hy-skill{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--hy-line)}
.hy-skill:last-child{border-bottom:0}
.hy-skill .grow{flex:1;min-width:0}
.hy-skill b{font-size:12.5px;font-weight:600;display:block}
.hy-skill small{font-size:11px;color:var(--hy-dim-2);display:block;margin-top:2px}
.hy-skill-ic{width:26px;height:26px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;
  background:var(--hy-blue-soft);color:var(--hy-blue-2)}
.hy-skill-ic svg{width:15px;height:15px}

/* ── منتقي الوظائف (إضافة موظف) ── */
.hy-roles{display:flex;flex-direction:column;gap:7px;max-height:52vh;overflow:auto;margin-top:10px}
.hy-role{display:flex;align-items:center;gap:10px;text-align:start;width:100%;cursor:pointer;
  padding:11px 12px;border-radius:var(--hy-r-s);background:var(--hy-ink-2);
  border:1px solid var(--hy-line);color:var(--hy-text);font-family:inherit}
.hy-role:active{border-color:var(--hy-blue-line);background:var(--hy-ink-3)}
.hy-role .grow{flex:1;min-width:0}
.hy-role b{font-size:13px;font-weight:600;display:block}
.hy-role small{font-size:11px;color:var(--hy-dim-2);display:block;margin-top:3px;line-height:1.6}

/* ── Wizard المهارة ── */
.hy-wiz-steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.hy-wiz-step{font-size:10.5px;padding:4px 10px;border-radius:var(--hy-r-pill);
  background:var(--hy-black);border:1px solid var(--hy-line);color:var(--hy-dim-2)}
.hy-wiz-step.on{background:var(--hy-blue-soft);border-color:var(--hy-blue-line);color:var(--hy-blue-2);font-weight:600}
.hy-wiz-step.done{border-color:var(--hy-ok-soft);color:var(--hy-ok)}
.hy-toolpick{display:flex;flex-direction:column;gap:7px;max-height:48vh;overflow:auto}
.hy-pick{display:flex;align-items:center;gap:10px;text-align:start;width:100%;cursor:pointer;
  padding:10px 12px;border-radius:var(--hy-r-s);background:var(--hy-black);
  border:1px solid var(--hy-line);color:var(--hy-text);font-family:inherit}
.hy-pick .grow{flex:1;min-width:0}
.hy-pick b{font-size:12.5px;font-weight:600;display:block}
.hy-pick small{font-size:11px;color:var(--hy-dim-2);display:block;margin-top:2px}
.hy-pick.on{border-color:var(--hy-blue-line);background:var(--hy-blue-soft)}

@media (max-width:360px){
  .hy-emp{padding:10px}
  .hy-emp-meta span{font-size:10px}
}

/* عنوان فرعي داخل صندوق الموظف (خطوات العمل · الأدوات) */
.hy-emp-sub{font-size:11px;color:var(--hy-dim);font-weight:600;margin-top:11px}

/* ═══════════════ مرفقات المحادثة (شات مركزي + شات وكيل) ═══════════════
   الأهداف: RTL سليم، مناطق لمس ≥40px، بلا تمرير أفقي، وبلا خطوط صغيرة.
   المعاينة تُعرض قبل الإرسال، والتقدّم نسبة حقيقية من الرفع. */
.attachbtn{flex:0 0 auto;width:40px;height:40px;border-radius:var(--hy-r-pill);
  background:var(--hy-black);border:1px solid var(--hy-line);color:var(--hy-text);
  font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.attachbtn:active{background:var(--hy-blue-soft);border-color:var(--hy-blue-line)}
.att-file{display:none}

/* شريط المرفقات المؤقّت فوق حقل الكتابة:
   أفقي قابل للتمرير · بارتفاع محدود (لا شبكة كبيرة تُقلّص مساحة المحادثة) ·
   اسم ونوع وحجم ونسبة رفع حقيقية · إزالة لكل مرفق · إعادة محاولة · إلغاء الكل. */
.att-strip2{margin:6px 0 4px;background:var(--hy-ink);border:1px solid var(--hy-line);
  border-radius:var(--hy-r-s);padding:8px 8px 6px}
.att-strip-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.att-strip-head span{font-size:11.5px;color:var(--hy-dim);font-weight:600}
.att-link{background:none;border:0;color:var(--hy-blue-2);font-family:inherit;font-size:11.5px;
  min-height:36px;padding:4px 8px;cursor:pointer;border-radius:8px}
.att-link:active{background:var(--hy-blue-soft)}
.att-scroll{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;max-height:76px;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:6px 2px 2px}
.att-scroll::-webkit-scrollbar{display:none}
.attc{position:relative;flex:0 0 auto;width:168px;display:flex;align-items:center;gap:7px;
  padding:6px;border-radius:10px;background:var(--hy-black);border:1px solid var(--hy-line);
  scroll-snap-align:start;min-width:0}
.attc.bad{border-color:var(--k-error)}
.attc-bar{position:absolute;inset-inline:0;bottom:0;height:2px;overflow:hidden;border-radius:0 0 10px 10px}
.attc-bar i{display:block;height:100%;background:var(--hy-grad);transition:width .18s linear}
.attc-th{width:42px;height:42px;border-radius:8px;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--hy-line);background:var(--hy-ink-2)}
.attc-ico{display:flex;align-items:center;justify-content:center;color:var(--hy-blue-2)}
.attc-ico svg{width:19px;height:19px}
.attc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.attc-tx b{font-size:11.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attc-tx small{font-size:10px;color:var(--hy-dim-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attc-st{font-size:10px}
.attc-ok{color:var(--hy-ok)} .attc-run{color:var(--hy-blue-2)} .attc-bad{color:var(--hy-danger)}
/* زر الإجراء داخل البطاقة: 40×40 مرئيًّا و44×44 فعليًّا بالمنطقة الممتدة */
.attc-go{position:relative;flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--hy-line);background:transparent;color:var(--hy-dim);
  cursor:pointer;padding:0}
.attc-go::after{content:'';position:absolute;inset:-2px}
.attc-go svg{width:16px;height:16px}
.attc-go:active{background:var(--hy-blue-soft);color:var(--hy-text)}
.attc-x{position:absolute;top:-8px;inset-inline-start:-8px;width:30px;height:30px;border-radius:999px;
  background:var(--hy-ink-3);border:1px solid var(--hy-line-2);color:var(--hy-text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2}
.attc-x::after{content:'';position:absolute;inset:-7px}   /* منطقة لمس 44px */
.attc-x svg{width:14px;height:14px}
.att-note{font-size:10.5px;color:var(--hy-dim-2);padding:4px 2px 0;line-height:1.5}

/* ═══════════ المرفقات **داخل فقاعة الرسالة** ═══════════
   صورة واحدة = معاينة · صورتان = ثنائي · ٣+ = شبكة مصغّرة بحد ٤ مع «+N». */
.bubble-media{margin-bottom:8px}
.attb{display:grid;gap:4px;max-width:288px}
.attb-1{grid-template-columns:1fr}
.attb-2{grid-template-columns:1fr 1fr}
.attb-4{grid-template-columns:1fr 1fr}
.attimg{position:relative;display:block;padding:0;border:0;background:var(--hy-ink-2);
  border-radius:12px;overflow:hidden;cursor:pointer;width:100%;min-height:44px}
.attb-1 .attimg img{width:100%;height:auto;max-height:260px;object-fit:cover;display:block}
.attb-2 .attimg,.attb-4 .attimg{height:104px}
.attb-2 .attimg img,.attb-4 .attimg img{width:100%;height:100%;object-fit:cover;display:block}
.attimg.failed img{display:none}
.attimg-fail{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;background:var(--hy-ink-2);color:var(--hy-dim);
  font-size:10.5px;text-align:center;padding:6px}
.attimg-fail em{font-style:normal;color:var(--hy-blue-2);font-weight:600}
.attimg-fail[hidden]{display:none!important}
.attb-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--k-line);color:var(--k-text);font-weight:700;font-size:15px}
.attb-docs{margin-top:4px}
.attdoc{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;
  background:var(--hy-black);border:1px solid var(--hy-line);text-decoration:none;
  color:var(--hy-text);min-width:0;min-height:44px}
.attdoc-ic{display:flex;align-items:center;justify-content:center;color:var(--hy-blue-2);flex:0 0 auto}
.attdoc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.attdoc-tx b{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attdoc-tx small{font-size:10.5px;color:var(--hy-dim-2)}
.attdoc-go{font-size:11.5px;color:var(--hy-blue-2);font-weight:600;flex:0 0 auto}

.btn-xs{padding:5px 9px;font-size:11px;min-height:32px}

/* مرفقات الرسائل السابقة: بطاقة مطويّة أعلى المحادثة (لا في صندوق الكتابة) */
.attold{margin:2px 0 10px;border:1px solid var(--hy-line);border-radius:var(--hy-r-s);
  background:var(--hy-ink);overflow:hidden}
.attold>summary{list-style:none;cursor:pointer;padding:10px 12px;font-size:11.5px;
  color:var(--hy-dim);font-weight:600;min-height:44px;display:flex;align-items:center}
.attold>summary::-webkit-details-marker{display:none}
.attold>summary::after{content:'▾';margin-inline-start:auto;color:var(--hy-dim-2);font-size:11px}
.attold[open]>summary::after{content:'▴'}
.attold-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:0 10px 10px}
.attold-grid .attimg{height:64px}
.attold-grid .attimg img{width:100%;height:100%;object-fit:cover;display:block}
.attold .attb-docs{padding:0 10px 10px}

/* ═══════════ عارض المرفقات بملء الشاشة (تكبير · تنقّل · فتح/تنزيل) ═══════════ */
html.attview-on,html.attview-on body{overflow:hidden}
.attview{position:fixed;inset:0;z-index:9999;background:var(--k-surface-2);
  display:flex;flex-direction:column}
.attview[hidden]{display:none!important}
.attview-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px}
.attview-c{font-size:12.5px;color:var(--hy-pearl);font-variant-numeric:tabular-nums;direction:ltr}
.attview-b{width:44px;height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;gap:6px;
  border-radius:999px;border:1px solid var(--hy-line-2);background:var(--k-line);
  color:var(--hy-pearl);cursor:pointer;padding:0;text-decoration:none}
.attview-b svg{width:20px;height:20px}
.attview-tx{width:auto;padding:0 14px;font-size:12.5px;font-family:inherit}
.attview-nav .flip svg{transform:scaleX(-1)}
.attview-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative}
.attview-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.attview-stage.zoomed{overflow:auto;display:block;text-align:center}
.attview-stage.zoomed img{max-width:none;width:220%;height:auto;border-radius:0}
.attview-fail{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--hy-dim);font-size:13px}
.attview-fail[hidden]{display:none!important}
.attview-fail b{color:var(--hy-text);font-size:13.5px}
.attview-nav{display:flex;align-items:center;justify-content:center;gap:18px;padding:12px}

@media (prefers-reduced-motion:reduce){
  .attc-bar i{transition:none}
}

/* ═══════════ ترويسة الشات: «تتحدّث الآن مع …» + منتقي الوكيل ═══════════ */
.hy-who{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:2px;font-family:inherit;color:var(--hy-text);cursor:pointer;text-align:start;min-height:46px}
.hy-who .avatar{width:38px;height:38px;border-radius:999px;background:var(--hy-blue-soft);
  border:1px solid var(--hy-blue-line);display:flex;align-items:center;justify-content:center;
  color:var(--hy-blue-2);flex:0 0 auto}
.hy-who-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hy-who-tx small{font-size:10.5px;color:var(--hy-dim-2)}
.hy-who-tx b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hy-who-go{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:999px;border:1px solid var(--hy-line);color:var(--hy-dim);flex:0 0 auto}
.hy-who-go svg{width:17px;height:17px}
.hy-head-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px}

/* Bottom Sheet خفيف لاختيار الوكيل */
.hy-sheet{position:fixed;inset:0;z-index:9998}
.hy-sheet[hidden]{display:none!important}
.hy-sheet-scrim{position:absolute;inset:0;background:var(--k-line)}
.hy-sheet-box{position:absolute;inset-inline:0;bottom:0;max-height:78vh;display:flex;flex-direction:column;
  background:var(--hy-ink);border-radius:20px 20px 0 0;border-top:1px solid var(--hy-line-2);
  padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.hy-sheet-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.hy-sheet-top b{font-size:14px}
.hy-sheet-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid var(--hy-line);background:transparent;color:var(--hy-text);cursor:pointer;padding:0}
.hy-sheet-q{width:100%;min-height:44px;border-radius:12px;border:1px solid var(--hy-line);
  background:var(--hy-black);color:var(--hy-text);font-family:inherit;font-size:13px;padding:10px 12px;margin-bottom:8px}
.hy-sheet-q:focus{outline:none;border-color:var(--hy-blue-line)}
.hy-sheet-list{overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:6px}
.hy-pick{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:9px 10px;
  border-radius:14px;border:1px solid var(--hy-line);background:var(--hy-black);color:var(--hy-text);
  font-family:inherit;text-align:start;cursor:pointer}
.hy-pick.on{border-color:var(--hy-blue-line);background:var(--hy-blue-soft)}
.hy-pick .avatar{width:34px;height:34px;border-radius:999px;background:var(--hy-blue-soft);
  border:1px solid var(--hy-blue-line);display:flex;align-items:center;justify-content:center;
  color:var(--hy-blue-2);flex:0 0 auto}
.hy-pick-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hy-pick-tx b{font-size:13px;font-weight:600}
.hy-pick-sub,.hy-pick-task,.hy-pick-act{font-size:10.5px;color:var(--hy-dim-2);line-height:1.4}
.hy-pick-task{color:var(--hy-dim)}
.hy-sheet-none{padding:18px 8px;text-align:center;color:var(--hy-dim);font-size:12.5px}
.hy-pick-row{display:flex;align-items:stretch;gap:6px}
.hy-pick-row .hy-pick{flex:1;min-width:0}
.hy-pick-more{flex:0 0 auto;width:44px;display:flex;align-items:center;justify-content:center;
  border-radius:14px;border:1px solid var(--hy-line);background:var(--hy-black);color:var(--hy-dim);cursor:pointer;padding:0}
.hy-pick-more svg{width:17px;height:17px}
.hy-sheet-foot{margin-top:10px;border-top:1px solid var(--hy-line);padding-top:10px}
.hy-sheet-add{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:14px;border:1px solid var(--hy-blue-line);background:var(--hy-blue-soft);color:var(--hy-text);
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.hy-sheet-add svg{width:18px;height:18px}

/* ═══════════ Agent Context Bar — بديل شريط الأوضاع القديم ═══════════
   صفّ واحد أنيق فوق حقل الكتابة: من تتحدث معه · وظيفته · حالته · وصول سريع
   لمنتقي الوكلاء وسجل المحادثة و«فريقي». لا أسماء أوضاع ولا بطاقات مزدحمة. */
.hy-ctx{display:flex;align-items:center;gap:6px;padding:8px 10px;margin-bottom:8px;
  border-radius:16px;background:var(--hy-ink);border:1px solid var(--hy-line)}
.hy-ctx-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;
  padding:2px;font-family:inherit;color:var(--hy-text);cursor:pointer;text-align:start;min-height:46px}
.hy-ctx-avatar{width:38px;height:38px;border-radius:999px;background:var(--hy-blue-soft);
  border:1px solid var(--hy-blue-line);display:flex;align-items:center;justify-content:center;
  color:var(--hy-blue-2);flex:0 0 auto}
.hy-ctx-avatar svg{width:19px;height:19px}
.hy-ctx-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hy-ctx-tx small{font-size:10px;color:var(--hy-dim-2)}
.hy-ctx-tx b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hy-ctx-tx em{font-style:normal;font-size:10.5px;color:var(--hy-dim)}
.hy-ctx-go{color:var(--hy-dim);display:flex;align-items:center;flex:0 0 auto}
.hy-ctx-go svg{width:16px;height:16px}
.hy-ctx-dot{width:8px;height:8px;border-radius:999px;background:var(--hy-ok);flex:0 0 auto}
.hy-ctx-dot.live{background:var(--hy-blue-2);animation:pulse 1.4s infinite}
.hy-ctx-dot.off{background:var(--hy-danger)}
.hy-ctx-b{width:44px;height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid var(--hy-line);background:transparent;color:var(--hy-dim);cursor:pointer;padding:0}
.hy-ctx-b svg{width:18px;height:18px}
.hy-ctx-b:active{background:var(--hy-blue-soft);color:var(--hy-text)}
.hy-ctx-b.back svg{transform:scaleX(-1)}

/* اختصارات سياقية مؤقتة — تختفي بمجرد الكتابة أو التنفيذ */
.hy-smart{display:flex;gap:6px;overflow-x:auto;margin:0 0 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hy-smart::-webkit-scrollbar{display:none}
.hy-smart.hide{display:none}
.hy-smart-b{flex:0 0 auto;padding:9px 12px;border-radius:999px;border:1px solid var(--hy-line);
  background:var(--hy-black);color:var(--hy-text);font-family:inherit;font-size:12px;min-height:40px;cursor:pointer;white-space:nowrap}
.hy-smart-b:active{background:var(--hy-blue-soft);border-color:var(--hy-blue-line)}

@media (prefers-reduced-motion:reduce){
  .hy-ctx-dot.live{animation:none}
}

/* ═══════════ «فريقي» — ملخص · بحث وفلترة · تبويبات الوكيل · تعليمات ═══════════
   الأهداف: بلا تمرير أفقي · مناطق لمس ≥40px · خطوط لا تقل عن 11px · RTL سليم. */

/* ملخص أعلى الشاشة: كل رقم من الخادم */

.hy-tm-cell{background:var(--hy-card,var(--k-surface-2));border:1px solid var(--hy-line);border-radius:12px;
  padding:9px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.hy-tm-cell span{font-size:11px;color:var(--hy-dim-2);line-height:1.35}
.hy-tm-cell .hy-tag{font-size:15px;font-weight:700;background:none;padding:0}

/* شرائح الفلترة */
.hy-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.hy-chip{flex:0 0 auto;padding:7px 11px;border-radius:999px;border:1px solid var(--hy-line);
  background:transparent;color:var(--hy-text);font-size:12px;min-height:34px;cursor:pointer;font-family:inherit}
.hy-chip.on{background:var(--hy-blue-soft);border-color:var(--hy-blue-line);color:var(--hy-blue-2);font-weight:600}

/* تبويبات تفاصيل الوكيل — تمرير أفقي داخلي فقط داخل الشريط (لا للصفحة) */
.hy-tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 0 8px;margin-top:10px;
  border-top:1px solid var(--hy-line);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hy-tabs::-webkit-scrollbar{display:none}
.hy-tab{flex:0 0 auto;padding:8px 12px;border-radius:999px;border:1px solid var(--hy-line);
  background:transparent;color:var(--hy-text);font-size:12px;min-height:36px;cursor:pointer;font-family:inherit;white-space:nowrap}
.hy-tab.on{background:var(--k-accent);border-color:transparent;color:var(--k-text);font-weight:600}
.hy-tabbody{padding-top:4px}

/* المهمة الحالية */
.hy-task-live{background:var(--hy-blue-soft);border:1px solid var(--hy-blue-line);border-radius:11px;
  padding:9px 11px;margin-top:9px;display:flex;flex-direction:column;gap:3px}
.hy-task-live b{font-size:11px;color:var(--hy-dim)}
.hy-task-live span{font-size:13px;line-height:1.5}
.hy-bar{height:5px;border-radius:3px;background:var(--k-line);overflow:hidden;margin-top:4px}
.hy-bar i{display:block;height:100%;background:var(--k-accent)}

/* لماذا الوكيل يحتاج إعدادًا */
.hy-needs{margin-top:9px;padding:9px 11px;border-radius:11px;background:var(--k-accent-soft);
  border:1px solid var(--k-line);font-size:12px;line-height:1.6;color:var(--k-text)}

/* صف مهمة/نتيجة */
.hy-task{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;border:1px solid var(--hy-line);
  border-radius:11px;margin-bottom:8px;background:var(--hy-card,var(--k-surface-2))}
.hy-task b{font-size:13px;line-height:1.5}
.hy-task small{font-size:11px;color:var(--hy-dim-2);display:block;margin-top:2px}

/* سجل النشاط */
.hy-act{display:flex;flex-direction:column;gap:7px}
.hy-act-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--hy-line);border-radius:10px}
.hy-act-row b{font-size:12.5px;font-weight:600}
.hy-act-row small{font-size:11px;color:var(--hy-dim-2);white-space:nowrap}
.hy-act-dot{width:8px;height:8px;border-radius:50%;background:var(--hy-ok,var(--k-line));flex:0 0 auto}
.hy-act-dot.bad{background:var(--k-surface-2)}

/* التعليمات */
.hy-instr{display:flex;align-items:flex-start;gap:9px;padding:11px;border:1px solid var(--hy-line);
  border-radius:11px;margin-bottom:9px;background:var(--hy-card,var(--k-surface-2))}
.hy-instr b{font-size:13px}
.hy-instr small{font-size:11px;color:var(--hy-dim-2);display:block;margin-top:2px}
.hy-instr-body{font-size:12.5px;line-height:1.65;color:var(--hy-text);margin-top:6px;
  padding:8px 10px;background:var(--k-line);border-radius:9px;word-break:break-word}
.hy-instr-act{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.hy-instr-act .btn{min-height:32px;padding:5px 9px;font-size:11px}

/* نموذج داخل نافذة سفلية */
.hy-form{display:flex;flex-direction:column;gap:7px}
.hy-form label{font-size:11.5px;color:var(--hy-dim);font-weight:600;margin-top:3px}
.hy-form select.input{font-family:inherit}
.hy-form textarea.input{min-height:88px;line-height:1.65;resize:vertical;font-family:inherit}

/* ═══════════ شريط تبويبات الأقسام الداخلية ═══════════
 *
 * عطل بصري مقيس (390×844): شاشة الموقع لها 11 تبويبًا، و`.hy-seg button`
 * يفرض `flex:1` فيتقاسمها 11 زرًّا ⇒ كل زر يضيق حتى يُقصّ نصّه، والشريط
 * يفيض خارج الشاشة فيقطع «المحتوى» و«التواصل والخريطة».
 *
 * الحل: للتبويبات الداخلية فقط: حجم تلقائي بعرض المحتوى، وبلا انكماش،
 * والشريط يمرّر أفقيًّا (RTL: من اليمين لليسار) بلا شريط تمرير ظاهر.
 * لا يمسّ هذا القاعدة `.hy-seg` العامة المستخدمة في شاشة فريقي.
 */
.feat-tabs{
  overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  scroll-snap-type:x proximity;
  /* تظليل طرفي لطيف يوضّح أن هناك المزيد */
  mask-image:linear-gradient(to left, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image:linear-gradient(to left, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.feat-tabs::-webkit-scrollbar{display:none}
.feat-tabs button{
  flex:0 0 auto; width:auto; min-height:40px; padding:0 14px;
  white-space:nowrap; scroll-snap-align:center;
}
.feat-tabs button b{
  font-size:11px; font-weight:700; opacity:.75; margin-inline-start:4px;
}
/* لوحة التبويب: الفراغ لا يفتح صفحة طويلة فارغة */
[data-panel]{min-height:0}
[data-panel][hidden]{display:none !important}

/* ═══════════════════════════════════════════════════════════════
   المجتمع (screens.community.js)

   الهوية: أسود عميق + أزرق ملكي/Cobalt + أبيض لؤلؤي · RTL كامل.
   ملاحظات مقصودة:
   • كل الأهداف اللمسية ≥ 44px (قاعدة التطبيق).
   • لا Glass مبالغ فيه ولا بنفسجي — تدرّج أزرق واحد متزن.
   • `min-width:0` مع `overflow-wrap` لمنع كسر الكلمات العربية في
     البطاقات الضيقة (بقّ حقيقي ظهر سابقًا في فقاعات الشات).
   • الصور lazy loading بارتفاع ثابت لمنع قفز التمرير (CLS).
   ═══════════════════════════════════════════════════════════════ */

.cm-wrap{
  display:flex; flex-direction:column; gap:10px;
  padding:10px 12px 24px; max-width:720px; margin:0 auto;
  direction:rtl; text-align:right;
  color:var(--hy-text); min-width:0;
}
.cm-topbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 2px}
.cm-brand{font-size:20px; font-weight:700; letter-spacing:.2px}
.cm-brand span{
  font-size:11px; font-weight:700; margin-inline-start:6px;
  color:var(--hy-blue-2); background:var(--hy-blue-soft);
  border:1px solid var(--hy-blue-line); border-radius:999px; padding:2px 8px;
}
.cm-top-actions{display:flex; align-items:center; gap:8px}
.cm-icon{
  width:44px; height:44px; border-radius:12px; border:1px solid var(--hy-line-2);
  background:var(--hy-ink-2); color:var(--hy-text); font-size:18px; cursor:pointer;
}
.cm-primary{
  min-height:44px; padding:0 16px; border:0; border-radius:12px; cursor:pointer;
  background:var(--hy-grad); color:var(--k-text); font-weight:700; font-size:14px; font-family:inherit;
}
.cm-ghost{
  min-height:44px; padding:0 14px; border-radius:12px; cursor:pointer; font-family:inherit;
  border:1px solid var(--hy-line-2); background:var(--hy-ink-2); color:var(--hy-text); font-size:13px;
}
.cm-danger{color:var(--k-error); border-color:var(--k-error)}
.cm-search input{
  width:100%; min-height:44px; border-radius:14px; padding:0 14px;
  background:var(--hy-ink); color:var(--hy-text); border:1px solid var(--hy-line); font-family:inherit;
}
.cm-chips{display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:none}
.cm-chips::-webkit-scrollbar{display:none}
.cm-chip{
  min-height:36px; padding:0 14px; border-radius:999px; white-space:nowrap; cursor:pointer;
  background:var(--hy-ink-2); color:var(--hy-dim); border:1px solid var(--hy-line); font-family:inherit; font-size:13px;
}
.cm-chip.on{background:var(--hy-blue-soft); color:var(--hy-pearl); border-color:var(--hy-blue-line)}

.cm-stream{display:flex; flex-direction:column; gap:12px; min-width:0}
.cm-skel{
  height:150px; border-radius:16px;
  background:var(--k-surface);
  background-size:220% 100%; animation:cmShimmer 1.3s linear infinite;
}
@keyframes cmShimmer{0%{background-position:120% 0}100%{background-position:-20% 0}}

.cm-post{
  background:var(--hy-ink); border:1px solid var(--hy-line); border-radius:16px;
  padding:12px; min-width:0; overflow-wrap:anywhere;
}
.cm-post-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--hy-dim)}
.cm-type{
  background:var(--hy-blue-soft); color:var(--hy-blue-2); border:1px solid var(--hy-blue-line);
  border-radius:999px; padding:2px 10px; font-weight:700;
}
.cm-who{color:var(--hy-pearl); font-weight:700}
.cm-ver{color:var(--hy-blue-2)}
.cm-area{margin-inline-start:auto}
.cm-title{font-size:16px; margin:8px 0 4px; line-height:1.5}
.cm-body{margin:0; font-size:13.5px; line-height:1.75; color:var(--hy-text)}
.cm-facts{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:12.5px}
.cm-facts span{
  background:var(--hy-ink-2); border:1px solid var(--hy-line); border-radius:8px; padding:3px 9px; color:var(--hy-pearl);
}
.cm-warn{color:inherit; border-color:var(--k-line)}
.cm-reason{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.cm-reason span{
  font-size:11.5px; color:var(--k-text); background:var(--k-line);
  border:1px solid var(--k-line); border-radius:999px; padding:2px 9px;
}
.cm-media{display:grid; gap:4px; margin-bottom:10px; border-radius:12px; overflow:hidden}
.cm-media.g1{grid-template-columns:1fr}
.cm-media.g2{grid-template-columns:1fr 1fr}
.cm-media.g3{grid-template-columns:2fr 1fr}
.cm-media.g4{grid-template-columns:1fr 1fr}
.cm-media img{width:100%; height:150px; object-fit:cover; background:var(--hy-ink-2); display:block}
/* صورة تعذّر جلبها: يبقى المستطيل الهادئ بلا أيقونة مكسورة */
.cm-media img[data-cm-media-failed]{background:var(--hy-line)}

/* شريط صور نموذج الإنشاء: معاينة + تقدّم رفع + حذف/استبدال */
.cm-img-actions{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0}
.cm-filelabel{cursor:pointer; min-height:44px; display:inline-flex; align-items:center}
.cm-imgs{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin:8px 0}
.cm-img{position:relative; margin:0; border-radius:12px; overflow:hidden; background:var(--hy-ink-2)}
.cm-img img{width:100%; height:96px; object-fit:cover; display:block}
.cm-img figcaption{display:flex; gap:4px; padding:4px}
.cm-mini{
  flex:1; min-height:36px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:11.5px;
  background:transparent; border:1px solid var(--hy-line); color:var(--hy-dim);
}
.cm-mini.danger{color:var(--hy-danger); border-color:var(--hy-danger)}
.cm-prog{
  position:absolute; top:6px; inset-inline-start:6px; background:var(--k-line); color:var(--k-text);
  font-size:11px; padding:2px 7px; border-radius:8px;
}
.cm-prog.err{background:var(--hy-danger)}
.cm-prog.ok{background:var(--hy-blue)}
.cm-bar{position:absolute; bottom:0; inset-inline-start:0; height:3px; background:var(--hy-blue-2); display:block}
.cm-media.g1 img{height:200px}

.cm-actions{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.cm-act{
  min-height:44px; padding:0 12px; border-radius:10px; cursor:pointer; font-family:inherit;
  background:transparent; border:1px solid var(--hy-line); color:var(--hy-dim); font-size:12.5px;
}
.cm-act.on{color:var(--hy-blue-2); border-color:var(--hy-blue-line); background:var(--hy-blue-soft)}
.cm-n{font-weight:700; color:var(--hy-pearl); margin-inline-end:4px}

.cm-empty{text-align:center; padding:36px 16px; color:var(--hy-dim)}
.cm-empty-ico{font-size:30px; color:var(--hy-blue-2); margin-bottom:8px}
.cm-empty h3{color:var(--hy-pearl); margin:6px 0}
.cm-empty p{font-size:13px; line-height:1.8; max-width:420px; margin:0 auto 14px}
.cm-empty-btns{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.cm-more{
  min-height:44px; border-radius:12px; cursor:pointer; font-family:inherit;
  background:var(--hy-ink-2); color:var(--hy-text); border:1px solid var(--hy-line-2);
}
.cm-dim{color:var(--hy-dim); font-size:12.5px}
.cm-h4{margin:14px 0 8px; font-size:14px; color:var(--hy-pearl)}
.cm-hint{font-size:12px; color:var(--hy-dim); margin:6px 0 0}

/* المراجعة قبل النشر — أهم شاشة أخلاقيًا في المجتمع */
.cm-review-lead{font-size:13px; color:var(--hy-pearl); line-height:1.8; margin:0 0 10px}
.cm-rev-row{
  display:flex; justify-content:space-between; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--hy-line); font-size:13px;
}
.cm-rev-row span{color:var(--hy-dim)}
.cm-rev-row b{color:var(--hy-pearl); font-weight:700; text-align:left}

.cm-pick-row{
  display:flex; flex-direction:column; gap:3px; width:100%; text-align:right; cursor:pointer;
  min-height:52px; padding:10px 12px; margin-bottom:6px; font-family:inherit;
  background:var(--hy-ink-2); border:1px solid var(--hy-line); border-radius:12px; color:var(--hy-text);
}
.cm-pick-row span{font-size:12px; color:var(--hy-dim)}

.cm-2col{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.cm-compose label, .cm-detail label{display:block; font-size:12.5px; color:var(--hy-dim); margin:10px 0 4px}
.cm-wrap input[type=text], .cm-wrap input[type=search], .cm-wrap textarea, .cm-wrap select,
.modal-body input[type=text], .modal-body textarea, .modal-body select{
  width:100%; min-height:44px; border-radius:12px; padding:10px 12px; font-family:inherit;
  background:var(--hy-ink-2); color:var(--hy-text); border:1px solid var(--hy-line); font-size:14px;
}
.cm-compose-btns, .cm-detail-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.cm-cmt-form{display:flex; gap:8px; margin-top:10px}
.cm-cmt-form input{flex:1}
.cm-cmts{display:flex; flex-direction:column; gap:8px}
.cm-cmt{background:var(--hy-ink-2); border:1px solid var(--hy-line); border-radius:12px; padding:8px 10px}
.cm-cmt b{font-size:12.5px; color:var(--hy-pearl)}
.cm-cmt p{margin:3px 0 0; font-size:13px}
.cm-thread{display:flex; flex-direction:column; gap:10px}
.cm-msgs{display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto}
.cm-msg{
  max-width:84%; padding:8px 12px; border-radius:14px; font-size:13.5px; line-height:1.7;
  background:var(--hy-ink-2); border:1px solid var(--hy-line); align-self:flex-start;
  overflow-wrap:anywhere; min-width:0;
}
.cm-msg.mine{background:var(--hy-blue-soft); border-color:var(--hy-blue-line); align-self:flex-end}

.cm-profile{display:flex; flex-direction:column; gap:8px; min-width:0}
.cm-prof-head{display:flex; gap:10px; align-items:center}
.cm-avatar{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--hy-grad); color:var(--k-text); font-size:20px; font-weight:700; flex:none;
}
.cm-prof-head h3{margin:0; font-size:16px}
.cm-tags{font-size:12.5px; color:var(--hy-blue-2)}
.cm-fab{
  position:sticky; bottom:14px; align-self:flex-start;
  width:52px; height:52px; border-radius:16px; border:0; cursor:pointer;
  background:var(--hy-grad); color:var(--k-text); font-size:22px; box-shadow:0 10px 26px 0 6px 18px var(--k-shadow);
}
@media (max-width:360px){
  .cm-media img{height:120px}
  .cm-2col{grid-template-columns:1fr}
}

/* كسر الكلمات الطويلة داخل الرسائل والبطاقات (عطل حقيقي سابق: كلمة عربية
   مركّبة كسرت عرض الفقاعة على شاشة 390px). */
.cm-thread, .cm-profile, .cm-detail{min-width:0}
.cm-detail{overflow-wrap:anywhere}