/* Hymanna Design Kit — components (prefix .k-). RTL-safe: logical properties only. */
.k-root{font-family:var(--k-font);background:var(--k-bg);color:var(--k-text);-webkit-font-smoothing:antialiased}
.k-root *,.k-root *::before,.k-root *::after{box-sizing:border-box}
.k-i{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.k-i--sm{width:20px;height:20px}.k-i--lg{width:32px;height:32px}
[dir="rtl"] .k-flip{transform:scaleX(-1)}
.k-ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.k-clamp2,.k-clamp3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.k-clamp2{-webkit-line-clamp:2}.k-clamp3{-webkit-line-clamp:3}
.k-num{font:800 44px/1.1 var(--k-font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.k-num--md{font-size:32px}.k-num--sm{font-size:20px;letter-spacing:0}

/* layout */
.k-page{max-width:var(--k-max);margin-inline:auto;padding:0 20px calc(var(--k-nav-h) + var(--k-nav-gap)*2 + 16px + env(safe-area-inset-bottom))}
.k-stack>*+*{margin-top:12px}
.k-sec{display:flex;justify-content:space-between;align-items:center;margin:28px 0 12px}
.k-sec h2{font:800 20px/1.25 var(--k-font);margin:0}
.k-link{font:700 14px var(--k-font);color:var(--k-text);background:none;border:0;cursor:pointer;min-height:44px}

/* app bar */
.k-appbar{display:flex;align-items:center;gap:12px;height:64px;max-width:var(--k-max);margin-inline:auto;padding-inline:20px}
.k-appbar__t{flex:1;min-width:0}
.k-appbar__t h1{font:800 20px/1.25 var(--k-font);margin:0;color:var(--k-text)}
.k-appbar__t p{font:400 12px/1.4 var(--k-font);margin:0;color:var(--k-text-2)}
.k-logo{width:44px;height:44px;border-radius:16px;background:#fff;display:grid;place-items:center;padding:4px;flex:0 0 auto}
.k-logo img{width:100%;height:100%;object-fit:contain}
.k-conn{display:inline-flex;align-items:center;gap:6px;height:32px;padding-inline:12px;border-radius:var(--k-r-pill);background:var(--k-accent);color:var(--k-on-accent);font:700 12px var(--k-font)}
.k-conn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--k-on-accent)}

/* hero */
.k-hero{border-radius:var(--k-r-hero);padding:24px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.k-hero--accent{background:var(--k-accent);color:var(--k-on-accent)}
.k-hero--dark{background:var(--k-dark);color:var(--k-on-dark)}
.k-hero__tab{margin:-24px -24px 0;padding:12px 24px;background:var(--k-accent);color:var(--k-on-accent);display:flex;justify-content:space-between;font:700 14px var(--k-font)}
.k-hero__sub{font:500 14px/1.4 var(--k-font)}
.k-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.k-quick__b{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;background:none;border:0;color:inherit;font:600 12px/1.3 var(--k-font);cursor:pointer}
.k-quick__c{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;transition:transform 160ms}
.k-quick__b:active .k-quick__c{transform:scale(.94)}
.k-quick__c.is-hot{background:var(--k-accent);color:var(--k-on-accent)}
.k-hero--accent .k-quick__c{background:#0C0C0C;color:var(--k-accent)}

/* bento cards */
.k-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.k-card{--sub:var(--k-text-2);background:var(--k-surface);color:var(--k-text);border:1px solid var(--k-line);border-radius:var(--k-r-card);padding:20px;min-height:132px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.k-card--white{--sub:rgba(12,12,12,.70);--k-pos-text:#12A150;--k-neg-text:#D93B3B;background:var(--k-white);color:var(--k-on-white);border-color:transparent}
.k-card--dark{--sub:rgba(255,255,255,.70);--k-pos-text:#2BEB2E;--k-neg-text:#FF5A5A;background:var(--k-dark);color:var(--k-on-dark);border-color:transparent}
.k-card--accent{--sub:rgba(12,12,12,.72);--k-pos-text:#0C0C0C;--k-neg-text:#0C0C0C;background:var(--k-accent);color:var(--k-on-accent);border-color:transparent}
.k-card--tall{grid-row:span 2}.k-card--wide{grid-column:1/-1}
.k-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.k-card__label{font:500 12px/1.4 var(--k-font);color:var(--sub)}
.k-chipicon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--k-accent);color:var(--k-on-accent)}
.k-card--accent .k-chipicon{background:#0C0C0C;color:var(--k-accent)}
.k-trend{display:inline-flex;align-items:center;gap:2px;font:700 12px var(--k-font);color:var(--k-pos-text)}
.k-trend--neg{color:var(--k-neg-text)}

/* buttons */
.k-btn{height:56px;padding-inline:24px;border:0;border-radius:var(--k-r-pill);display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px var(--k-font);cursor:pointer;transition:transform 160ms var(--k-ease),background 160ms}
.k-btn:active{transform:scale(.97)}
.k-btn--primary{background:var(--k-accent);color:var(--k-on-accent)}
.k-btn--primary:active{background:var(--k-accent-press)}
.k-btn--secondary{background:var(--k-text);color:var(--k-bg)}
.k-btn--outline{background:transparent;color:var(--k-text);box-shadow:inset 0 0 0 1.5px var(--k-line-strong)}
.k-btn--block{width:100%}.k-btn--sm{height:44px;padding-inline:16px;font-size:14px}
.k-ibtn{width:48px;height:48px;border-radius:50%;border:0;display:inline-grid;place-items:center;flex:0 0 auto;background:var(--k-surface-2);color:var(--k-text);box-shadow:inset 0 0 0 1px var(--k-line-strong);cursor:pointer;transition:transform 160ms}
.k-ibtn:active{transform:scale(.94)}
.k-ibtn--accent{background:var(--k-accent);color:var(--k-on-accent);box-shadow:none}
.k-ibtn--sm{width:40px;height:40px}
.k-ibtn:disabled,.k-btn:disabled{opacity:.4;cursor:default}
.k-ibtn--danger{background:var(--k-error);color:#0C0C0C;box-shadow:none}

/* chips, segmented, inputs */
.k-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 20px;margin-inline:-20px}
.k-chips::-webkit-scrollbar{display:none}
.k-chip{flex:0 0 auto;height:40px;padding-inline:16px;border-radius:var(--k-r-pill);display:inline-flex;align-items:center;gap:6px;background:var(--k-surface-2);color:var(--k-text);box-shadow:inset 0 0 0 1px var(--k-line);font:600 14px var(--k-font);border:0;cursor:pointer}
.k-chip.is-on{background:var(--k-accent);color:var(--k-on-accent);box-shadow:none}
.k-seg{display:flex;gap:4px;padding:4px;border-radius:var(--k-r-pill);background:var(--k-surface-2);box-shadow:inset 0 0 0 1px var(--k-line)}
.k-seg__b{flex:1;min-width:0;height:44px;border:0;border-radius:var(--k-r-pill);background:none;color:var(--k-text-2);font:700 14px var(--k-font);cursor:pointer;transition:background var(--k-dur) var(--k-ease)}
.k-seg__b.is-on{background:var(--k-accent);color:var(--k-on-accent)}
.k-hero--accent .k-seg{background:#0C0C0C;box-shadow:none}
.k-hero--accent .k-seg__b{color:rgba(255,255,255,.72)}.k-hero--accent .k-seg__b.is-on{color:#0C0C0C}
.k-field{display:flex;flex-direction:column;gap:8px}
.k-label{font:500 12px/1.4 var(--k-font);color:var(--k-text-2)}
.k-input{width:100%;min-width:0;height:56px;padding-inline:16px;border:1.5px solid var(--k-line-strong);border-radius:var(--k-r-input);background:var(--k-surface-2);color:var(--k-text);font:500 16px var(--k-font)}
.k-input::placeholder{color:var(--k-text-3)}
.k-input:focus{outline:2px solid var(--k-accent);outline-offset:2px;border-color:var(--k-text)}
.k-search{position:relative}
.k-search .k-i{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);color:var(--k-text-2)}
.k-search .k-input{padding-inline-start:48px;border-radius:var(--k-r-pill)}
.k-seg:focus-within,.k-btn:focus-visible,.k-ibtn:focus-visible,.k-chip:focus-visible,.k-nav__i:focus-visible{outline:2px solid var(--k-accent);outline-offset:2px}

/* list rows, stats, badges, progress, media */
.k-row{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 16px;border-radius:var(--k-r-row);background:var(--k-surface);border:1px solid var(--k-line);color:var(--k-text)}
.k-row--accent{background:var(--k-accent);color:var(--k-on-accent);border-color:transparent}
.k-row--dark{background:var(--k-dark);color:var(--k-on-dark);border-color:transparent}
.k-row__body{flex:1;min-width:0}
.k-row__t{font:700 16px/1.3 var(--k-font)}
.k-row__s{font:400 14px/1.4 var(--k-font);color:var(--k-text-2)}
.k-row--accent .k-row__s{color:rgba(12,12,12,.72)}.k-row--dark .k-row__s{color:rgba(255,255,255,.70)}
.k-row__v{font:800 16px var(--k-font);font-variant-numeric:tabular-nums}
.k-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.k-stat{min-width:0;text-align:center;padding:12px 4px;border-radius:var(--k-r-input);background:var(--k-surface-2);box-shadow:inset 0 0 0 1px var(--k-line)}
.k-stat b{display:block;font:800 20px/1.2 var(--k-font);font-variant-numeric:tabular-nums}
.k-stat span{font:500 12px/1.3 var(--k-font);color:var(--k-text-2)}
.k-badge{display:inline-flex;align-items:center;gap:4px;height:28px;padding-inline:12px;border-radius:var(--k-r-pill);font:700 12px var(--k-font);background:#0C0C0C;color:var(--k-accent)}
.k-badge--accent{background:var(--k-accent);color:var(--k-on-accent)}
.k-badge--soft{background:var(--k-accent-soft);color:#0C0C0C}
.k-bar{height:10px;border-radius:var(--k-r-pill);background:var(--k-surface-2);overflow:hidden}
:root[data-theme="light"] .k-bar{background:var(--k-accent-soft)}
.k-bar>i{display:block;height:100%;width:var(--v,50%);background:var(--k-accent);border-radius:inherit}
.k-card--accent .k-bar{background:#0C0C0C}.k-card--accent .k-bar>i{background:var(--k-accent)}
.k-media{background:#fff;border-radius:var(--k-r-input);aspect-ratio:16/9;display:grid;place-items:center;padding:8px;overflow:hidden}
.k-media img{max-width:100%;max-height:100%;object-fit:contain}
.k-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.k-act{min-width:0;height:44px;border:0;border-radius:var(--k-r-pill);display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--k-surface-2);color:var(--k-text);box-shadow:inset 0 0 0 1px var(--k-line);font:600 14px var(--k-font);cursor:pointer}
.k-act.is-on{background:var(--k-accent);color:var(--k-on-accent);box-shadow:none}

/* states */
.k-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:32px 20px;color:var(--k-text-2);font:500 16px/1.5 var(--k-font)}
.k-empty__ic{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--k-accent);color:var(--k-on-accent)}
.k-empty__ic .k-i{width:40px;height:40px}
.k-skel{border-radius:16px;background:var(--k-surface-2);animation:k-pulse 1.2s ease-in-out infinite}
@keyframes k-pulse{50%{opacity:.55}}

/* floating nav: 5 equal columns, never overflows */
.k-nav{position:fixed;inset-inline:var(--k-nav-gap);bottom:calc(var(--k-nav-gap) + env(safe-area-inset-bottom));max-width:var(--k-max);margin-inline:auto;height:var(--k-nav-h);padding:6px;border-radius:34px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--k-nav-bg);border:1px solid var(--k-line);box-shadow:var(--k-shadow);z-index:50;transition:transform var(--k-dur) var(--k-ease),opacity var(--k-dur) var(--k-ease)}
.k-nav__i{position:relative;min-width:0;height:100%;border:0;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;color:var(--k-nav-inactive);font:600 12px/1.2 var(--k-font);cursor:pointer;transition:background var(--k-dur) var(--k-ease),color var(--k-dur)}
.k-nav__i span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-nav__i.is-on{background:var(--k-accent);color:var(--k-on-accent)}
.k-nav__badge{position:absolute;top:6px;inset-inline-end:calc(50% - 20px);min-width:18px;height:18px;padding-inline:4px;border-radius:9px;background:var(--k-error);color:#fff;font:700 12px/18px var(--k-font);text-align:center}
.k-scrim{position:fixed;inset:0;background:var(--k-scrim);opacity:0;pointer-events:none;transition:opacity var(--k-dur);z-index:40}
.k-scrim.is-on{opacity:1;pointer-events:auto}
/* keyboard open hides the nav everywhere; chat moves it to the top (see HYMANNA v3 below) */
.k-kb-open .k-nav{transform:translateY(calc(100% + 48px));opacity:0;pointer-events:none}

/* chat */
.k-chat{display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden;background:var(--k-bg)}
.k-chat__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.k-msg{max-width:85%;padding:12px 16px;border-radius:20px;font:400 15px/1.6 var(--k-font);white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext}
.k-msg--user{align-self:flex-end;background:var(--k-accent);color:var(--k-on-accent);border-end-end-radius:8px}
.k-msg--agent{align-self:flex-start;background:var(--k-surface-2);color:var(--k-text);box-shadow:inset 0 0 0 1px var(--k-line);border-end-start-radius:8px}
.k-msg__who{font:500 12px var(--k-font);color:var(--k-text-2);align-self:flex-start}
.k-typing{align-self:flex-start;height:36px;padding-inline:16px;border-radius:18px;display:flex;align-items:center;gap:4px;background:var(--k-surface-2)}
.k-typing i{width:6px;height:6px;border-radius:50%;background:var(--k-text);animation:k-pulse 1s infinite}
.k-typing i:nth-child(2){animation-delay:.15s}.k-typing i:nth-child(3){animation-delay:.3s}
.k-status{display:flex;align-items:center;gap:8px;height:40px;padding-inline:16px;border-radius:var(--k-r-pill);background:var(--k-accent-soft);color:#0C0C0C;font:600 14px var(--k-font)}
.k-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#0C0C0C;flex:0 0 auto}
.k-composer{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:12px 12px calc(12px + env(safe-area-inset-bottom) + var(--k-kb));background:var(--k-surface);border:1px solid var(--k-line);border-radius:28px 28px 0 0}
.k-composer__agent{display:flex;align-items:center;gap:8px}
.k-agent{flex:1;min-width:0;height:40px;padding-inline:12px;border-radius:var(--k-r-pill);display:flex;align-items:center;gap:8px;background:var(--k-surface-2);box-shadow:inset 0 0 0 1px var(--k-line);font:700 14px var(--k-font);color:var(--k-text)}
.k-composer__row{display:flex;align-items:flex-end;gap:8px}
.k-ta{flex:1;min-width:0;min-height:48px;max-height:132px;resize:none;padding:12px 16px;border:0;border-radius:24px;background:var(--k-surface-2);box-shadow:inset 0 0 0 1.5px var(--k-line-strong);color:var(--k-text);font:500 16px/1.5 var(--k-font);scrollbar-width:none}
.k-ta::-webkit-scrollbar{display:none}
.k-ta:focus{outline:2px solid var(--k-accent);outline-offset:1px}
.k-ta::placeholder{color:var(--k-text-3);text-overflow:ellipsis}

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

/* ═══ ambient backdrop + glass tier (glass-tokens.css / community-glass.reference.css) ═══
   Glass = الطابع الرابع للبطاقات، للمحتوى فقط (منشورات · صفوف المزيد · بطاقات
   وكيل · نماذج · نوافذ). الهيرو وبطاقات البنتو والشريط والأزرار والشرائح تبقى صلبة. */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(72px);background:var(--accent);opacity:var(--orb-o)}
.ambient i:nth-child(1){top:-90px;inset-inline-end:-70px}
.ambient i:nth-child(2){top:46%;inset-inline-start:-140px;background:var(--text);opacity:calc(var(--orb-o) * .35)}
/*
 * Ambient layer must sit UNDER the live chrome. `.appbar`/`.tabbar` are already
 * `position:fixed` with z-index 60/52 (app.css) — re-declaring them here as
 * `position:relative` silently un-fixed them (bar in flow ⇒ scrolls away, top
 * band painted over the screen header). Only `.app-main` needs a stacking
 * context; the fixed bars already paint above z-index:0.
 */
.app-main{position:relative;z-index:1}

.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  border-radius:var(--r-card);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  color:var(--text);
}
.glass .glass-pill{background:var(--glass-bg-hi);border-radius:var(--r-pill)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--k-surface)}              /* solid fallback, legibility unchanged */
}
/* PERFORMANCE (Android WebView): never nest .glass inside .glass; blur <= 18px; off-screen cards skip work: */
.glass{content-visibility:auto;contain-intrinsic-size:auto 320px}
/* THEME FLIP: الوضع النهاري — زجاج أبيض بنص داكن (لا نص أبيض على زجاج فاتح) */
:root[data-theme="light"] .glass{color:var(--text)}

/* ═══ smart nav (smart-nav.reference.css — مُكيَّف على أصناف المشروع) ═══
   القائمة الفعلية: #tabbar a.k-nav__i · النشط: .is-on/[aria-current] · الجذر: html */
#tabbar a{position:relative;z-index:1}
#tabbar a.is-on,#tabbar a[aria-current="page"]{background:transparent;color:var(--on-accent)}
.nav-ind{position:absolute;top:6px;bottom:6px;left:0;width:var(--ind-w,0);border-radius:24px;background:var(--accent);
  transform:translateX(var(--ind-x,0));pointer-events:none;z-index:0;
  transition:transform var(--dur-2) var(--ease),width var(--dur-2) var(--ease)}
#tabbar a.is-on svg,#tabbar a[aria-current="page"] svg{animation:nav-pop 320ms var(--ease)}
@keyframes nav-pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
/* scroll-down: the nav tucks away, a 56px peek button (current screen icon) stays reachable */
.is-nav-min .k-nav,.is-nav-min .tabbar{transform:translateY(calc(100% + 40px));opacity:0;pointer-events:none}
.nav-peek{position:fixed;inset-inline:0;margin-inline:auto;width:56px;height:56px;border-radius:50%;bottom:calc(var(--nav-gap) + var(--safe-b));
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:var(--shadow);z-index:50;border:0;
  transform:translateY(calc(100% + 40px));opacity:0;pointer-events:none;
  transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease)}
.nav-peek svg{width:24px;height:24px}
.is-nav-min .nav-peek{transform:none;opacity:1;pointer-events:auto}
.nav-peek:active{transform:scale(.94)}
.is-chat .nav-peek,.is-chat .nav-fab,.k-kb-open .nav-peek,.kb-open .nav-peek,.k-kb-open .nav-fab,.kb-open .nav-fab{display:none}
/* contextual primary action (per screen), above the nav */
.nav-fab{position:fixed;inset-inline-end:20px;bottom:calc(var(--nav-h) + var(--nav-gap) + var(--safe-b) + 16px);height:56px;padding-inline:20px;
  border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);display:flex;align-items:center;gap:8px;font:800 16px var(--font);border:0;
  box-shadow:var(--shadow);z-index:49;transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease)}
.nav-fab svg{width:24px;height:24px}
.nav-fab[hidden]{display:none}
.nav-fab:active{transform:scale(.96)}
.is-nav-min .nav-fab{transform:translateY(calc(var(--nav-h) + var(--nav-gap) - 8px))}
/* long-press quick actions (glass popover above the nav) */
.nav-quick{position:fixed;bottom:calc(var(--nav-h) + var(--nav-gap) + var(--safe-b) + 12px);left:clamp(120px,var(--qx,50vw),calc(100vw - 120px));
  min-width:220px;padding:8px;border-radius:24px;z-index:80;transform:translateX(-50%) scale(.94);opacity:0;transform-origin:50% 100%;
  transition:transform var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease)}
.nav-quick[hidden]{display:none}
.nav-quick.is-open{transform:translateX(-50%) scale(1);opacity:1}
.nav-quick-row{display:flex;align-items:center;width:100%;height:48px;padding-inline:16px;border-radius:16px;font:700 15px var(--font);text-align:start;color:var(--text);background:none;border:0}
.nav-quick-row:active{background:var(--glass-bg-hi)}

/* ═══════════════════════════════════════════════════════════════════════════
   HYMANNA v3 — إزالة الشريط العلوي · الشريط الذكي سياقيّ · مستكشف الوكلاء
   (إضافات بصرية فقط: لا منطق ولا مسارات ولا عقود. آخر ملف ⇒ الأولوية له.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) الشريط العلوي: أُزيل بصريًا ───────────────────────────────────────
   الوظائف المنقولة لا المحذوفة:
     • حالة الاتصال #net-dot → نقطة دائمة داخل الشريط الذكي (نفس العنصر).
     • فتح درج التنقل → .nav-peek عند إخفاء الشريط + شاشة «المزيد».
     • الهوية والعنوان → عنصر «هيمنة» في الشريط + عنوان كل شاشة داخلها. */
.appbar, .appbar.hy-simple { display: none; }
/*
 * السبب الجذري للفراغ العلوي العام (قياس: TOP_GAP=72px على 320→430):
 * `--top` كان **ارتفاع الشريط العلوي القديم** (60px) وظلّ محجوزًا في
 * `.app-main` (‏60+12+safe) وفي `.bar` و`.ptr` بعد إزالة الشريط. تصفيره
 * مرة واحدة على الجذر يُلغي الحجز في كل مكان — بلا هوامش سالبة ولا Patch لكل
 * شاشة. المنطقة الآمنة الحقيقية للموبايل تبقى كما هي (env).
 */
:root { --top: 0px; }
.app-main { padding-top: calc(env(safe-area-inset-top, 0px) + var(--k-s4)); }

/* نقطة الاتصال داخل الشريط الذكي (العنصر نفسه لا نسخة منه) */
.k-nav .hy-conn {
  position: absolute; top: 50%; inset-inline-start: 2px; transform: translateY(-50%);
  width: 10px; height: 10px; padding: 0; border: 0; background: transparent; gap: 0;
}
.k-nav .hy-conn span { display: none; }
.k-nav .hy-conn i { width: 10px; height: 10px; box-shadow: 0 0 0 3px var(--k-nav-bg); }
.k-nav .hy-conn { color: var(--k-accent); }
.k-nav .hy-conn.off { color: var(--k-error); }
.k-nav .hy-conn.busy { color: var(--k-accent-press); }

/* ── 2) شريط واحد، وضعان (ONE COMPONENT / ONE STATE) ────────────────────
   NORMAL_MODE: الشريط الكامل في الأسفل.
   CHAT_MODE (html.is-chat): الشريط الكامل يهبط خارج الشاشة، ويظهر بدلًا منه
   زر ذكي واحد مدمج (‏.chat-menu-btn) يفتح نفس عناصر التنقل — لا نسخة ثانية
   من العناصر ولا مسارات جديدة: القائمة تُبنى من روابط #tabbar الحقيقية. */
.k-nav, .tabbar {
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1), opacity 220ms cubic-bezier(.22, 1, .36, 1);
}
.is-chat .k-nav, .is-chat .tabbar,
.is-chat .k-nav.is-open, .is-chat .tabbar.is-open {
  transform: translateY(calc(100% + 48px)); opacity: 0; pointer-events: none;
}
.is-chat .nav-peek, .is-chat .nav-fab { display: none; }
html.nav-jump .k-nav, html.nav-jump .tabbar { transition: none; }

/* ── 2أ) شات غامر: أسود صافٍ ملء الشاشة ───────────────────────────────────
   كل الطبقات حتى أعلى الشاشة (html/body/app-main/#view/chat) = --k-chat-bg،
   ويُخفى التشويش الزخرفي (ambient) داخله فلا يظهر تلوين أخضر/زيتوني في الأعلى.
   الارتفاع بـ 100dvh مع بديل 100vh (WebView قديم). */
html.is-chat, html.is-chat body { background: var(--k-chat-bg); }
.is-chat .app-main, .is-chat #view, .is-chat .chat-screen { background: var(--k-chat-bg); }
.is-chat .ambient, .is-chat .ambient i { display: none; }
/* الشات يبدأ من أول الشاشة (لا فراغ علوي) وينتهي عند المرسى فوق المنطقة
   الآمنة — والارتفاع من التخطيط (‏top:0 + bottom:safe+kb) فلا يحتاج 100vh.
   dvh يُستخدم حيث يعني شيئًا: ارتفاع الحاويات في WebView الحديث. */
.is-chat .chat-screen { inset-block-start: 0; }
html.is-chat, html.is-chat .app-main { min-height: 100vh; min-height: 100dvh; }
/* أول رسالة لا تدخل تحت الزر العائم: حشوة داخلية = الزر + فاصل صغير */
.is-chat .chat-scroll {
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--k-nav-h));
}


/* ── 2ب) زر القائمة الذكي داخل الشات (يظهر في وضع الشات وحده) ──────────── */
.chat-menu-btn {
  position: fixed; z-index: 60;
  inset-block-start: calc(env(safe-area-inset-top, 0px) + var(--k-s3));
  inset-inline-end: var(--k-s4);
  width: 44px; height: 44px; border: 0; border-radius: var(--k-r-pill);
  display: none; place-items: center; cursor: pointer;
  background: var(--k-surface-2); color: var(--k-accent);
  box-shadow: inset 0 0 0 1px var(--k-line), 0 10px 24px rgba(0,0,0,.35);
  transition: transform 180ms var(--k-ease), opacity 160ms var(--k-ease), background 180ms var(--k-ease);
}
.is-chat .chat-menu-btn { display: grid; }
.chat-menu-btn svg { width: var(--ic-agent); height: var(--ic-agent); }
.chat-menu-btn svg * { stroke-width: var(--ic-sw-agent); }
.chat-menu-btn:active { transform: scale(.94); background: var(--k-surface); }
.chat-menu-btn[aria-expanded="true"] { background: var(--k-accent); color: var(--k-on-accent); box-shadow: none; }
/* مؤشّر الحالة الحقيقية على الكبسولة (لا يتلوّن إلا بحالة فعلية من المحرّك) */
.chat-menu-btn .cmb-dot {
  position: absolute; inset-block-end: 5px; inset-inline-start: 6px;
  width: 8px; height: 8px; border-radius: 50%; display: none;
}
.chat-menu-btn.has-state .cmb-dot { display: block; }
.chat-menu-btn.is-run .cmb-dot { background: var(--k-on-accent); animation: capsule-pulse 1.7s cubic-bezier(.22, 1, .36, 1) infinite; }
.chat-menu-btn.is-wait .cmb-dot { background: var(--k-warn-text, var(--k-accent)); box-shadow: inset 0 0 0 2px var(--k-surface-2); }
.chat-menu-btn.is-fail .cmb-dot { background: var(--k-neg-text, var(--k-error)); }
.chat-menu-btn.is-stop .cmb-dot { background: var(--k-text-3); }
.chat-menu-btn.is-done .cmb-dot { background: var(--k-positive); }
.chat-menu-btn.is-run, .chat-menu-btn.is-wait, .chat-menu-btn.is-fail, .chat-menu-btn.is-stop, .chat-menu-btn.is-done {
  box-shadow: inset 0 0 0 1px var(--k-accent), 0 10px 24px rgba(0,0,0,.35);
}
@keyframes capsule-pulse {
  0% { box-shadow: 0 0 0 0 var(--k-on-accent); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* اللوحة: قائمة عائمة مضغوطة (أيقونة + عنوان) بنفس عناصر الشريط */
.chat-menu {
  position: fixed; z-index: 61;
  inset-block-start: calc(env(safe-area-inset-top, 0px) + var(--k-s3) + 52px);
  inset-inline-end: var(--k-s4);
  min-width: 210px; max-width: calc(100vw - var(--k-s8));
  padding: var(--k-s2); border-radius: var(--k-r-row);
  background: var(--k-surface); border: 1px solid var(--k-line);
  box-shadow: var(--k-shadow);
  transform-origin: 100% 0;
  opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none;
  transition: opacity 150ms var(--k-ease), transform 150ms var(--k-ease);
}
.chat-menu.is-open {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 220ms var(--k-ease), transform 220ms var(--k-ease);
}
/* رأس الحالة داخل اللوحة: نقطة + تسمية + نص التشغيل الحقيقي (يُقصّ) */
.chat-menu-head {
  display: flex; align-items: flex-start; gap: var(--k-s3);
  padding: var(--k-s2) var(--k-s3) var(--k-s3); border-bottom: 1px solid var(--k-line);
  margin-block-end: var(--k-s2);
}
.chat-menu-head .cmh-dot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; margin-block-start: 5px;
  background: var(--k-text-3);
}
.chat-menu-head.is-run .cmh-dot { background: var(--k-accent); animation: capsule-pulse 1.7s cubic-bezier(.22, 1, .36, 1) infinite; }
.chat-menu-head.is-wait .cmh-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--k-accent); }
.chat-menu-head.is-fail .cmh-dot { background: var(--k-neg-text, var(--k-error)); }
.chat-menu-head.is-stop .cmh-dot { background: var(--k-text-3); }
.chat-menu-head .cmh-tx { min-width: 0; display: grid; gap: 2px; }
.chat-menu-head b { font: 700 13.5px/1.35 var(--k-font); color: var(--k-text); }
.chat-menu-head small { font: 500 12px/1.4 var(--k-font); color: var(--k-text-2); overflow-wrap: anywhere; }

/* عنوان قسم داخل اللوحة (الوكلاء · موافقة مطلوبة · التنقل) */
.chat-menu-sec {
  padding: var(--k-s2) var(--k-s3) 4px; font: 700 11.5px/1.4 var(--k-font);
  color: var(--k-text-3); letter-spacing: .1px;
}
.chat-menu-sec:first-child { padding-block-start: 2px; }

/* جوار الموافقة المعلّقة: إجراءان حقيقيان على الطلب نفسه */
.chat-menu-approve { display: flex; gap: var(--k-s2); padding: 0 var(--k-s2) var(--k-s2); }
.chat-menu-act {
  flex: 1 1 0; min-height: 40px; border-radius: var(--k-r-input); cursor: pointer;
  border: 1px solid var(--k-line); background: var(--k-surface-2); color: var(--k-text);
  font: 700 13.5px var(--k-font);
}
.chat-menu-act.is-primary { background: var(--k-accent); color: var(--k-on-accent); border-color: transparent; }
.chat-menu-act:active { transform: scale(.98); }

/* صفّ الوكلاء: نفس هندسة صفوف التنقل مع سطر ثانوي (يُقصّ بلا كسر) */
.chat-menu-agent {
  width: 100%; min-height: 52px; padding-inline: var(--k-s3);
  display: flex; align-items: center; gap: var(--k-s3);
  border: 0; border-radius: var(--k-r-input); background: var(--k-surface-2);
  color: var(--k-text); font: 700 14px var(--k-font); text-align: start; cursor: pointer;
  margin-block-end: var(--k-s2);
}
.chat-menu-agent svg { width: var(--ic-card); height: var(--ic-card); color: var(--k-accent); flex: 0 0 auto; }
.chat-menu-agent .grow { min-width: 0; display: grid; gap: 1px; }
.chat-menu-agent b { font: 700 14px/1.35 var(--k-font); }
.chat-menu-agent small { font: 500 12px/1.4 var(--k-font); color: var(--k-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-menu-agent:active { background: var(--k-surface); }

.chat-menu-row {
  width: 100%; min-height: 48px; padding-inline: var(--k-s3);
  display: flex; align-items: center; gap: var(--k-s3);
  border: 0; border-radius: var(--k-r-input); background: none;
  color: var(--k-text); font: 700 14px var(--k-font); text-align: start; cursor: pointer;
}
.chat-menu-row svg { width: var(--ic-card); height: var(--ic-card); color: var(--k-accent); flex: 0 0 auto; }
.chat-menu-row:active { background: var(--k-surface-2); }
.chat-menu-row.is-on { background: var(--k-accent); color: var(--k-on-accent); }
.chat-menu-row.is-on svg { color: var(--k-on-accent); }
@media (prefers-reduced-motion: reduce) {
  .chat-menu, .chat-menu.is-open, .chat-menu-btn { transition-duration: 1ms; }
  .chat-menu-btn.is-run .cmb-dot, .chat-menu-head.is-run .cmh-dot { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .k-nav, .tabbar { transition-duration: 1ms; }
  .agent-dot.is-working { animation: none; }
}

/* ── 3) مستكشف الوكلاء: شبكة أيقونات مدمجة بدل بطاقات مرصوصة ───────────── */
.agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 520px) { .agent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.agent-tile {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0;
  min-height: 64px; padding: 10px 12px; border-radius: var(--k-r-row);
  background: var(--k-surface); border: 1px solid var(--k-line); color: var(--k-text);
  text-align: start; cursor: pointer;
}
.agent-tile:active { background: var(--k-surface-2); }
.agent-tile.is-open { border-color: var(--k-accent); }
.agent-tile.is-core { grid-column: 1 / -1; }
.agent-tile .grow { min-width: 0; }
.agent-tile b { display: block; font: 700 13.5px/1.35 var(--k-font); overflow-wrap: anywhere; }
.agent-tile small { display: block; font: 500 12px/1.4 var(--k-font); color: var(--k-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 4) نظام أيقونة الوكيل: عائلة واحدة (شارة + رمز خطّي) ────────────────
   لا ألوان لكل وكيل: السطح موحّد، والتمييز بالشكل والرمز. مدير الفريق
   (هيمنة) وحده يأخذ الشارة الليمونية الدائرية — توقيع بصري داخل نفس العائلة. */
.agent-ico {
  position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 14px;
  display: grid; place-items: center; background: var(--k-surface-2);
  color: var(--k-accent); box-shadow: inset 0 0 0 1px var(--k-line);
}
.agent-ico svg { width: var(--ic-agent); height: var(--ic-agent); }
.agent-ico svg * { stroke-width: var(--ic-sw-agent); }
.agent-ico.is-core { border-radius: 50%; background: var(--k-accent); color: var(--k-on-accent); box-shadow: none; }
.agent-ico.is-off { color: var(--k-text-3); }

/* حالة الوكيل: مؤشّر صغير — الأيقونة نفسها لا تتلوّن */
.agent-dot {
  position: absolute; inset-block-end: -2px; inset-inline-end: -2px; width: 13px; height: 13px;
  border-radius: 50%; border: 2px solid var(--k-surface); background: var(--k-text-3);
}
.agent-dot.is-ready { background: var(--k-accent); }
.agent-dot.is-working { background: var(--k-accent); animation: agent-pulse 1.7s cubic-bezier(.22, 1, .36, 1) infinite; }
.agent-dot.is-waiting { background: transparent; box-shadow: inset 0 0 0 2px var(--k-accent); }
.agent-dot.is-paused { background: var(--k-text-3); }
.agent-dot.is-error { background: var(--k-error); }
@keyframes agent-pulse {
  0% { box-shadow: 0 0 0 0 var(--k-accent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── 5) بطاقة تفاصيل الوكيل (توسّع داخل الشبكة): هوية ⇒ وصف ⇒ أرقام ⇒ أفعال ── */
.agent-detail {
  grid-column: 1 / -1; padding: 16px; border-radius: var(--k-r-card);
  background: var(--k-surface); border: 1px solid var(--k-line);
}
.agent-detail-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.agent-detail-head .grow { min-width: 0; }
.agent-detail-head b { display: block; font: 800 17px/1.3 var(--k-font); }
.agent-detail-head small { display: block; margin-top: 2px; font: 600 12.5px/1.4 var(--k-font); color: var(--k-text-2); }
.agent-detail .goal { margin-top: 10px; color: var(--k-text-2); font: 500 13px/1.7 var(--k-font); }
.agent-stats { display: flex; gap: 8px; margin-top: 12px; }
.agent-stats span {
  flex: 1 1 0; min-width: 0; padding: 8px 4px; border-radius: var(--k-r-input);
  background: var(--k-surface-2); text-align: center; font: 600 12px/1.3 var(--k-font); color: var(--k-text-2);
}
.agent-stats b { display: block; font: 800 16px/1.25 var(--k-font); color: var(--k-text); }
.agent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.agent-actions .btn { flex: 1 1 auto; min-width: 0; }
.agent-actions .btn.hy-grad { flex-basis: 100%; }      /* الأساسي صف كامل */
.agent-actions .agent-more { flex-basis: 100%; margin-top: 2px; }
.agent-more > summary {
  min-height: 44px; display: flex; align-items: center; gap: 6px;
  color: var(--k-text-2); font: 600 13px var(--k-font); cursor: pointer; list-style: none;
}
.agent-more > summary::-webkit-details-marker { display: none; }
.agent-more[open] > summary { color: var(--k-text); }

/* ── 6) حالة فراغ الشات: هوية صغيرة ⇒ جملة ⇒ شرائح مقترحة مضغوطة ───────── */
.chat-empty { padding: 26px 16px 18px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.chat-empty .chat-id { font: 800 20px/1.2 var(--k-font); color: var(--k-text); }
.chat-empty .chat-id small { display: block; margin-top: 4px; font: 600 12px var(--k-font); color: var(--k-text-2); letter-spacing: .02em; }
.chat-empty p { margin: 0; max-width: 32ch; color: var(--k-text-2); font: 500 14px/1.65 var(--k-font); }
.chat-empty-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--k-accent); color: var(--k-on-accent); }
.chat-empty-ico svg { width: var(--ic-agent); height: var(--ic-agent); }
.is-chat .hy-smart { padding-inline: 2px; }
.is-chat .hy-smart-b { height: 40px; font: 600 12.5px var(--k-font); }

/* ── 7أ) صغائر اللمس والانضغاط (مقاسات حقيقية من DOM) ─────────────────────
   • شريط الفريق على 320 كان يعصر البطاقة إلى 22px فيصير الاسم عمودًا مقطّعًا
     («هي / هيمنة / جاهز») — البطاقة الآن ثابتة العرض وتُمرَّر أفقيًا.
   • روابط/أزرار الصفوف المدمجة (.grow) كانت تهبط إلى 23px — الحدّ الصارم 24. */
.hy2-rail-item { flex: 0 0 auto; min-width: 78px; }
.hy2-rail { scroll-padding-inline: 2px; }
button.grow, a.grow, summary.grow, [role="button"].grow { min-height: 24px; }

/* ── 7) المرسى: إدخال أوضح وأزرار 44 وأقلّ ضجيجًا ──────────────────────── */
.is-chat .chat-inputrow textarea, .is-chat .composer textarea { min-height: 48px; font-size: 15px; }
.is-chat .chat-act, .is-chat .attachbtn { width: 44px; height: 44px; min-width: 44px; }

/* ══ 8) الكبسولة الذكية الحيّة (مرجع v5) ══════════════════════════════════
   المصدر واحد: #agent-status (شريط التشغيل الذي يرسمه محرّك الوكلاء). الشريط
   نفسه يبقى في الصفحة بعقده كما هو (الأصناف · نصّ .csb-tx · زر الإيقاف
   [data-act=agStop]) فلا تُفقد أي حقيقة، لكنه يُخفى بصريًا داخل الشات فقط —
   فيبقى صفّ حالة واحد في الشات: الكبسولة تعرض النص نفسه مقتبسًا من الشريط.
   لا حالة ثانية ولا نبض بلا عمل: بلا tone حقيقي تبقى الكبسولة دائرة 44. */
:root { --k-spring: cubic-bezier(.34, 1.56, .64, 1); }

.chat-menu-btn {
  transition: transform 180ms var(--k-ease), opacity 160ms var(--k-ease),
              background 180ms var(--k-ease), width 260ms var(--k-spring),
              border-radius 200ms var(--k-ease);
}
.chat-menu-btn .cmb-tx { display: none; }
/* توسّع بفيزياء نابضة واحدة (‏--k-spring) — لا قيم مبعثرة لكل عنصر */
.chat-menu-btn.has-tx {
  display: inline-flex; align-items: center; gap: var(--k-s2);
  width: auto; min-width: 44px; max-width: min(66vw, 268px);
  padding-inline: var(--k-s3);
}
.chat-menu-btn.has-tx .cmb-tx {
  display: block; min-width: 0; font: 700 12.5px/1.25 var(--k-font); color: var(--k-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-menu-btn.has-tx[aria-expanded="true"] .cmb-tx { color: var(--k-on-accent); }

/* ══ 9) المرسى: الإدخال هو البطل، والثانوي هادئ ══════════════════════════
   صفّ السياق يبقى كاملًا (نفس الأصناف والـdata-act) لكن الأزرار الدائرية
   الثلاثة كانت كلها 48px بنفس الوزن البصري فتزاحم الحقل — صارت 32px شفافة
   بلا حدود، وزر الإرفاق 44px هادئًا، والإدخال يتمدّد هو وزر الإرسال. */
.is-chat .chat-dock .chat-round {
  width: 32px; height: 32px; min-width: 32px;
  background: transparent; box-shadow: none; color: var(--k-text-3);
}
.is-chat .chat-dock .chat-round:active { background: var(--k-surface-2); color: var(--k-text); }
.is-chat .chat-dock .chat-agentrow { gap: 6px; }
.is-chat .chat-dock .chat-chip { height: 36px; }
.is-chat .chat-dock .chat-round.is-attach {
  width: 44px; height: 44px; min-width: 44px;
  background: var(--k-surface-2); box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-text-2);
}
/* حالة الفراغ: تعريف مضغوط لا هيرو ضخم — المحادثة هي البطل لا الشعار */
.is-chat .chat-empty { padding: 16px 16px 8px; gap: 8px; }
.is-chat .chat-empty-ico { width: 40px; height: 40px; }
.is-chat .chat-empty .chat-id { font-size: 18px; }
.is-chat .chat-empty p { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .chat-menu-btn { transition-duration: 1ms; }
}

/* ══ 10) تجربة v5 المرئية: قراءة أهدأ · خطة مضغوطة · كبسولة حيّة بأثر ═══════
   كل ما هنا في **آخر** طبقة فيلغي بلا !important، ولا يمسّ أي صنف يحتاجه
   فحص أو منطق: المسارات (data-act) والعُقد والنصوص كما هي — الحجم والشكل فقط. */

/* ── 10أ) القراءة: 14.5px هي الحجم المريح على 390/320 ────────────────────
   كان 16px مع فواصل 12 يبدو «كبيرًا جدًا» ويملأ الشاشة برسائل قليلة. */
.chat-list { gap: 10px; }
.is-chat .chat-list .msg.bot .bubble {
  padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font-size: 14px; font-weight: 400; line-height: 1.8; color: var(--k-text);
}
.chat-list .msg.me .bubble, .chat-list .msg.user .bubble {
  font-size: 13px; line-height: 1.7; padding: 8px 12px;
}
.chat-list .ai-meta, .chat-list .msg-meta, .chat-list time { font-size: 12px; }
.chat-list .ai-badge { width: 28px; height: 28px; }
.chat-list .ai-badge svg { width: 16px; height: 16px; }
.chat-scroll { padding: 12px 16px 10px; }

/* ── 10ب) بطاقة الخطة: كانت أضخم عنصر في المحادثة ────────────────────────
   صارت بطاقةً رفيعة: سطر حالة + شريط 3px، والخطوات كلها تُطوى خلف سطر واحد
   (تفاصيلها تبقى كاملة — الطيّ عرض لا حذف). وسوم «تم/جاري/التالي» صارت
   نصًّا صغيرًا بلا شرائح ليمونية مصمتة تتنافس مع الأزرار الحقيقية. */
.is-chat .chat-list .plancard {
  padding: 8px 0; margin: 0; border-radius: 0; background: transparent;
  border: 0; box-shadow: none; backdrop-filter: none;
}
.plancard-top { margin-bottom: 6px; gap: 8px; }
.plancard-top b { font-size: 12.5px; color: var(--k-text); }
.plancard-now { font-size: 12px; color: var(--k-accent); }
.planbar { height: 3px; margin-bottom: 0; background: var(--k-line); }
.plan-more { margin-top: 2px; }
.plan-more > summary {
  min-height: 44px; display: flex; align-items: center; gap: 6px;
  color: var(--k-text-3); font: 600 12.5px var(--k-font); cursor: pointer; list-style: none;
}
.plan-more > summary::-webkit-details-marker { display: none; }
.plan-more > summary::after {
  content: '‹'; margin-inline-start: auto; font-size: 15px; line-height: 1;
  transition: transform 200ms var(--k-ease);
}
.plan-more[open] > summary::after { transform: rotate(-90deg); }
.planlist { gap: 0; }
.planstep { padding: 5px 6px; gap: 7px; font-size: 12.5px; line-height: 1.6; border-radius: 9px; }
.planstep-tag { background: none; border: 0; padding: 0; font-size: 12px; color: var(--k-text-3); }
.planstep-done .planstep-tag, .planstep-now .planstep-tag { background: none; color: var(--k-accent); }
.plancard-foot { margin-top: 0; padding-top: 0; gap: 8px; border: 0; }
.is-chat .plancard-foot .btn { flex: none; min-height: 44px; padding: 8px 4px; border: 0; border-radius: 0; background: transparent; color: var(--k-pos-text); box-shadow: none; font-size: 12px; }
.is-chat .chat-list .toolrow { min-height: 40px; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 12px; }
.is-chat .chat-list .toolrow-tx b { font-size: 12px; font-weight: 600; }
.is-chat .chat-list .toolrow-data { border: 0; background: transparent; font-size: 12px; }
.is-chat .approvals-holder .item { border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; padding: 12px 0; }
.is-chat .approvals-holder .item-title { font-size: 14px; }
.is-chat .approvals-holder .item-sub { font-size: 12px; }
.is-chat .chat-input::placeholder { font-size: 14px; }
.is-chat .chat-scroll { padding-inline: 16px; }

/* ── 10ج) زر النزول: عائم فوق المرسى، لا يزاحم أي رسالة ─────────────────
   كان داخل تخطيط العمود القابل للطي (static) فيمرّ فوق النص. صار طبقة
   عائمة داخل الشاشة، وموضعه يُقاس من ارتفاع المرسى الحقيقي في JS. */
.is-chat .chat-jump {
  position: absolute; inset-inline-end: 16px; inset-block-end: 140px;
  margin: 0; width: 40px; height: 40px; z-index: 5;
  background: var(--k-surface-2); color: var(--k-text); border: 0;
  box-shadow: inset 0 0 0 1px var(--k-line), 0 10px 24px rgba(0, 0, 0, .45);
}
.is-chat .chat-jump[hidden] { display: none; }

/* ── 10د) الكبسولة الحيّة (مرجع v5) ─────────────────────────────────────
   دائرة ليمونية واحدة في وضع السكون؛ وعند وجود حالة **حقيقية** تتوسّع
   إلى كبسولة: أيقونة + نصّ الحالة الحقيقي + حلقة/نبض بأثر مطابق للحالة.
   الألوان كلها من التوكنات، والحالات الخمس نفسها التي يشتقّها syncCapsule. */
.chat-menu-btn { padding: 0; overflow: hidden; contain: paint; }
.chat-menu-btn .cmb-ic {
  position: relative; flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--k-accent); color: var(--k-on-accent);
}
.chat-menu-btn .cmb-ic > svg { width: var(--ic-agent); height: var(--ic-agent); }
.chat-menu-btn.has-tx { gap: var(--k-s2); }
.chat-menu-btn.has-tx .cmb-ic { width: 30px; height: 30px; }
.chat-menu-btn.has-tx .cmb-ic > svg { width: var(--ic-inline); height: var(--ic-inline); }
.chat-menu-btn.has-tx .cmb-tx { padding-inline-end: var(--k-s3); font-size: 12.5px; }
/* حلقة تدور أثناء التنفيذ الفعلي فقط (لا نبض بلا عمل) */
.chat-menu-btn.is-run .cmb-ic::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--k-accent);
  animation: cmb-spin 1s linear infinite;
}
/* موافقة معلّقة: نبض ليموني يطلب الانتباه */
.chat-menu-btn.is-wait {
  box-shadow: inset 0 0 0 1.5px var(--k-accent), 0 10px 24px rgba(0, 0, 0, .35);
  animation: cmb-attn 1.8s cubic-bezier(.22, 1, .36, 1) infinite;
}
/* اكتملت مهمة: موجة واحدة تنبض من الأيقونة ثم تهدأ */
.chat-menu-btn.is-done { box-shadow: inset 0 0 0 1.5px var(--k-accent), 0 10px 24px rgba(0, 0, 0, .35); }
.chat-menu-btn.is-done .cmb-ic::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--k-accent); animation: cmb-rip .9s var(--k-ease) 1 both;
}
/* خطأ: اهتزاز قصير + حدّ خطر (لون من التوكنات) */
.chat-menu-btn.is-fail {
  box-shadow: inset 0 0 0 1.5px var(--k-error), 0 10px 24px rgba(0, 0, 0, .35);
  animation: cmb-shake .4s var(--k-ease) 1 both;
}
.chat-menu-btn.is-fail .cmb-ic { background: var(--k-error); color: var(--k-on-accent); }
@keyframes cmb-spin { to { transform: rotate(360deg); } }
@keyframes cmb-attn {
  0%, 100% { transform: none; }
  50% { transform: scale(1.04); }
}
@keyframes cmb-rip {
  from { transform: scale(.9); opacity: .9; }
  to { transform: scale(1.7); opacity: 0; }
}
@keyframes cmb-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-menu-btn.is-wait, .chat-menu-btn.is-fail, .chat-menu-btn.is-run .cmb-ic::after,
  .chat-menu-btn.is-done .cmb-ic::before { animation: none; }
}


/* Operations room — scoped chat components on the established token system. */
.is-chat .chat-statusbar.ops-island {
  position: absolute; inset-block-start: calc(env(safe-area-inset-top, 0px) + 12px); inset-inline-start: 16px; z-index: 12; height: auto; overflow: visible; clip-path: none; white-space: normal;
  display: block; flex: none; width: min(330px, calc(100% - 92px)); min-height: 62px;
  margin: 0;
  padding: 10px 12px; border: 1px solid var(--k-line-strong); border-radius: 26px;
  background: var(--k-surface); color: var(--k-text); box-shadow: none;
  transform-origin: center top;
}
.is-chat .chat-statusbar.ops-island.is-idle { width: min(216px, calc(100% - 92px)); margin: 0; }
.is-chat .chat-statusbar.ops-island:is(.is-wait, .is-done) { border-color: var(--k-accent); }
.is-chat .chat-statusbar.ops-island.is-fail { border-color: var(--k-neg-text); }
.is-chat .chat-screen {
  --ops-headroom: 90px; position: fixed; inset-block-start: 0;
  inset-block-end: calc(var(--chat-kb, 0px) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.is-chat .chat-scroll { flex: 1 1 0; min-height: 0; }
.is-chat .chat-dock { flex: 0 0 auto; }
.is-chat .chat-statusbar.ops-island + .chat-scroll { padding-block-start: var(--ops-headroom); scroll-padding-block-start: var(--ops-headroom); }
.ops-island-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ops-state-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--k-accent); color: var(--k-on-accent); position: relative; }
.ops-state-icon svg { width: 20px; height: 20px; }
.ops-island[data-state="thinking"] .ops-state-icon::after,
.ops-island[data-state="working"] .ops-state-icon::after {
  content: ''; position: absolute; inset: -4px; border: 2px solid transparent; border-block-start-color: var(--k-accent); border-radius: 50%; animation: ops-spin 1.2s linear infinite;
}
.ops-island[data-state="error"] .ops-state-icon { background: var(--k-error); color: var(--k-on-accent); }
.ops-state-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ops-state-copy b { font-size: 14px; font-weight: 800; line-height: 1.5; }
.ops-state-copy small { color: var(--k-text-2); font-size: 12px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-feedback { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 36px; padding: 0; color: var(--k-text-2); background: transparent; border: 0; border-radius: 50%; }
.ops-feedback::after { content: ''; position: absolute; inset: -4px; }
.ops-feedback svg { width: 20px; height: 20px; }
.ops-feedback[aria-pressed="true"] { color: var(--k-pos-text); }
.ops-feedback:focus-visible, .ops-orb:focus-visible, .ops-roster-link:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 4px; }
.ops-ticker { display: grid; gap: 5px; padding-block-start: 12px; }
.ops-ticker > div { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.65; color: var(--k-text-2); }
.ops-ticker svg { width: 20px; height: 20px; color: var(--k-pos-text); flex: none; }
.ops-ticker span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-state-actions { display: flex; justify-content: flex-end; margin-block-start: 8px; }
.ops-state-actions button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--k-line-strong); color: var(--k-text); background: var(--k-surface-2); font-size: 12px; font-weight: 700; }
.ops-state-actions svg { width: 20px; height: 20px; }
.chat-empty.ops-empty { display: block; padding-block: 10px 6px; padding-inline: 0; text-align: center; }
.ops-empty .ops-title { margin: 0; font: 800 26px/1.5 var(--k-font); color: var(--k-text); }
.ops-empty .ops-intro { margin: 4px 0 0; color: var(--k-text-2); font-size: 13px; line-height: 1.75; }
.ops-map { position: relative; width: min(100%, 390px); margin: 20px auto 0; padding-block-end: 8px; isolation: isolate; }
.ops-manager { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; }
.ops-manager > b { font-size: 14px; color: var(--k-text); }
.ops-manager > small { font-size: 12px; color: var(--k-text-2); }
.ops-orb { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--k-line-strong); background: var(--k-chat-bg); color: var(--k-text-2); padding: 0; transition: transform 220ms var(--k-ease), color 220ms var(--k-ease); }
.ops-orb:active { transform: scale(.95); }
.ops-orb > svg:not(.ops-ring) { width: 26px; height: 26px; }
.ops-orb-manager { width: 72px; height: 72px; border-color: var(--k-accent); color: var(--k-pos-text); }
.ops-orb-manager > svg:not(.ops-ring) { width: 32px; height: 32px; }
.ops-ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); overflow: visible; }
.ops-ring circle { fill: none; stroke-width: 2; }
.ops-ring-track { stroke: var(--k-line); }
.ops-ring-progress { stroke: var(--k-accent); stroke-linecap: round; }
.ops-map[data-state="thinking"] .ops-orb-manager::after { content: ''; position: absolute; inset: -7px; border: 2px solid transparent; border-block-start-color: var(--k-accent); border-radius: 50%; animation: ops-spin 1.2s linear infinite; }
.ops-wires { position: absolute; inset-inline: 0; inset-block-start: 42px; width: 100%; height: 130px; z-index: -1; overflow: visible; pointer-events: none; }
.ops-wire { stroke: var(--k-line-strong); fill: none; stroke-width: 1.4; }
.ops-wire.is-active { stroke: var(--k-accent); stroke-dasharray: 4 8; animation: ops-flow 1.1s linear infinite; }
.ops-agents { display: flex; justify-content: space-around; align-items: start; gap: 8px; margin-block-start: 32px; }
.ops-node { min-width: 0; width: 100px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ops-node > b { max-width: 100%; font-size: 12px; font-weight: 700; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-text); }
.ops-node > small { font-size: 12px; color: var(--k-text-2); line-height: 1.6; }
.ops-orb[data-state="working"] { color: var(--k-pos-text); border-color: var(--k-accent); }
.ops-orb[data-state="approval"] { color: var(--k-on-accent); background: var(--k-accent); border-color: var(--k-accent); }
.ops-orb[data-state="error"] { color: var(--k-neg-text); border-color: var(--k-neg-text); }
.ops-roster-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-block-start: 16px; padding: 8px 14px; background: transparent; color: var(--k-text-2); border: 1px solid var(--k-line); border-radius: 999px; font-size: 12px; }
.ops-roster-link svg { width: 20px; height: 20px; }
.ops-room-panel { margin-block: 0 12px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.ops-room-panel > summary { display: flex; align-items: center; gap: 8px; min-height: 36px; list-style: none; color: var(--k-text-2); font-size: 12px; cursor: pointer; }
.ops-room-panel > summary::-webkit-details-marker { display: none; }
.ops-room-panel > summary span { flex: 1; }
.ops-room-panel > summary svg { width: 20px; height: 20px; }
.ops-room-panel[open] > summary > svg:last-child { transform: rotate(180deg); }
.is-chat .chat-dock { background: var(--k-chat-bg); border: 0; box-shadow: none; border-radius: 0; padding-inline: 8px; }
.ops-compose-controls { padding: 4px; border: 0; border-radius: 0; background: transparent; }
.is-chat .ops-compose-controls .chat-agentrow { min-height: 44px; gap: 8px; margin-block-end: 8px; }
.is-chat .ops-compose-controls .chat-chip { height: 44px; min-width: 0; padding-inline: 4px; border: 0; background: transparent; box-shadow: none; }
.is-chat .ops-compose-controls .chat-chip-tx { justify-content: center; }
.is-chat .ops-compose-controls .chat-chip-role { display: none; }
.is-chat .ops-compose-controls .chat-chip-tx b { font-size: 14px; line-height: 1.7; }
.is-chat .ops-compose-controls .chat-agentrow > [data-act="agBackTeam"],
.is-chat .ops-compose-controls .chat-agentrow > [data-act="agBackManager"] { display: none; }
.is-chat .ops-compose-controls .chat-agentrow > .chat-round { width: 44px; height: 44px; min-width: 44px; }
.ops-newchat { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 44px; padding: 8px 12px; border: 1px solid var(--k-line-strong); border-radius: var(--k-r-pill); background: transparent; color: var(--k-text); font: 700 12px var(--k-font); white-space: nowrap; }
.ops-newchat svg { width: 16px; height: 16px; flex: none; }
.ops-newchat:active { background: var(--k-surface-2); }
.ops-newchat:disabled { color: var(--k-text-2); cursor: not-allowed; }
.ops-newchat:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; }
.is-chat .ops-compose-controls .chat-inputrow { gap: 4px; align-items: flex-end; padding: 4px; border: 1px solid var(--k-line-strong); border-radius: 24px; background: var(--k-surface-2); }
.is-chat .ops-compose-controls .chat-inputrow:focus-within { border-color: var(--k-accent); }
.is-chat .ops-compose-controls .chat-inputrow .chat-input { border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; padding: 10px 4px; font-size: 16px; min-height: 48px; line-height: 1.7; }
.is-chat .ops-compose-controls .chat-round.is-attach { background: transparent; box-shadow: none; }
.is-chat .ops-compose-controls .chat-act { align-self: flex-end; margin-block: 2px; }

.is-chat .chat-dock > .hy-smart { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: none; min-width: 0; height: 48px; overflow-x: auto; overflow-y: auto; margin-block: 0 8px; padding: 0 8px; }
.is-chat .chat-dock > .hy-smart.hide { display: none; }
.is-chat .chat-dock > .hy-smart > .hy-smart-b { flex: 0 0 auto; width: auto; height: 44px; white-space: nowrap; padding-block: 8px; }
.ops-sheet { position: fixed; inset: 0; z-index: 85; display: grid; align-items: end; }
.ops-sheet[hidden] { display: none; }
.ops-sheet-scrim { position: absolute; inset: 0; background: var(--k-scrim); border: 0; }
.ops-sheet-box { position: relative; width: min(100%, 720px); justify-self: center; border-radius: 30px 30px 0 0; background: var(--k-surface); color: var(--k-text); padding: 12px 22px calc(22px + env(safe-area-inset-bottom, 0px)); max-height: 70dvh; overflow: auto; box-shadow: var(--k-shadow); }
.ops-grab { width: 38px; height: 4px; background: var(--k-line-strong); border-radius: 99px; margin: 0 auto 14px; }
.ops-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ops-sheet h2 { font-size: 24px; font-weight: 800; line-height: 1.5; margin: 0; }
.ops-sheet p { color: var(--k-text-2); font-size: 14px; line-height: 1.8; margin: 8px 0; }
.ops-sheet h3 { color: var(--k-text); font-size: 14px; margin-block: 18px 5px; }
.ops-sheet .ops-sheet-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--k-line); border-radius: 50%; background: transparent; color: var(--k-text); }
.ops-sheet-close svg { width: 20px; height: 20px; }
.ops-sheet .ops-sheet-talk { width: 100%; min-height: 52px; border: 0; border-radius: 999px; margin-block-start: 18px; background: var(--k-accent); color: var(--k-on-accent); font-size: 14px; font-weight: 800; }
.ops-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-chat .plancard .plan-more[open] .planlist { animation: ops-arrive 280ms var(--k-ease); }
.is-chat .msg.me .bubble { animation: ops-arrive 220ms var(--k-ease); }
.is-chat .ops-dormant *, .ops-motion-paused .ops-island *, .ops-motion-paused .ops-map * { animation-play-state: paused; }
@keyframes ops-spin { to { transform: rotate(360deg); } }
@keyframes ops-flow { to { stroke-dashoffset: -24; } }
@keyframes ops-arrive { from { transform: translateY(7px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 360px) { .ops-empty .ops-title { font-size: 24px; } .ops-map { margin-block-start: 16px; } .ops-agents { gap: 4px; margin-block-start: 28px; } .ops-wires { height: 138px; } .ops-node > b { font-size: 12px; } }
@media (max-height: 740px) { .ops-map { margin-block-start: 12px; } .ops-agents { margin-block-start: 24px; } .ops-wires { height: 120px; } .ops-empty .ops-title { font-size: 26px; } .ops-orb-manager { width: 72px; height: 72px; } .ops-orb { width: 48px; height: 48px; } .ops-roster-link { margin-block-start: 10px; } }
@media (prefers-reduced-motion: reduce) { .ops-island *, .ops-island *::after, .ops-map *, .ops-map *::after, .ops-sheet *, .is-chat .msg.me .bubble, .is-chat .plancard .planlist { animation: none; transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .ops-island[data-state="thinking"] .ops-state-icon::after,
  .ops-island[data-state="working"] .ops-state-icon::after,
  .ops-map[data-state="thinking"] .ops-orb-manager::after { animation: none; }
}

/* Pixel identity: the supplied artwork keeps its exact colors and transparency. */
.hy-brand .mark { background: transparent; box-shadow: none; border: 0; }
.hy-brand .mark::before, .hy-brand .mark::after { content: none; }
.hy-brand .mark img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.hymanna-mascot { display: block; width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.ops-orb-manager .hymanna-mascot { width: 54px; height: 54px; }
.chat-chip-av .hymanna-mascot, .ai-badge .hymanna-mascot { width: 22px; height: 22px; }
.native-startup { --k-brand-bg: #000000; position: fixed; inset: 0; background: var(--k-brand-bg); z-index: 10000; overflow: hidden; display: grid; place-items: center; }
.launch-brand { position: relative; width: min(300px, calc(100vw - 64px)); aspect-ratio: 470 / 280; }
.launch-brand > img { position: absolute; opacity: 0; image-rendering: pixelated; }
.launch-face { width: 29.8%; top: 4.3%; left: 35.1%; }
.launch-wordmark { width: 63.8%; top: 50.7%; left: 18.1%; }
.launch-pixels { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.is-chat .approvals-holder .section-title h2 { font-size: 16px; }
.is-chat .approvals-holder .btn { min-height: 44px; height: auto; padding: 8px 16px; font-size: 13px; }

.ops-room-panel:not([open]) > .ops-map, .plan-more:not([open]) > .planlist { display: none; }
.plancard-top b { display: inline-flex; align-items: center; gap: 6px; }
.plancard-top b svg { width: 16px; height: 16px; flex: none; }

.is-chat .toast-host .toast { pointer-events: auto; }