/* Suno AI Agent — طبقة الهوية فوق Filament
   الألوان مأخوذة من شعار سونو: أزرق #1467E3، كحلي #0B1F4D، بنفسجي #6A4BE0 */
:root {
    --sa-blue: #1467E3;
    --sa-navy: #0B1F4D;
    --sa-violet: #6A4BE0;
    --sa-ink: #1E2433;
    --sa-muted: #667085;
    --sa-line: #E4E8F0;
    --sa-surface: #FFFFFF;
    --sa-canvas: #F3F6FB;
    --sa-bubble-in: #FFFFFF;
    --sa-bubble-out: #E3EDFD;
    --sa-chat-bg: #EEF2F8;
    --sa-ok: #12B76A;
    --sa-warn: #F79009;
    --sa-bad: #F04438;
    --sa-radius: 14px;
}
.dark {
    --sa-ink: #E6EAF2;
    --sa-muted: #98A2B3;
    --sa-line: #2A3550;
    --sa-surface: #121A2E;
    --sa-canvas: #0B1222;
    --sa-bubble-in: #1B2540;
    --sa-bubble-out: #16346B;
    --sa-chat-bg: #0E1628;
}

/* ===== الشريط الجانبي بلون كحلي الهوية ===== */
.fi-sidebar { background: var(--sa-navy) !important; }
.fi-sidebar .fi-sidebar-header, .fi-sidebar header { background: transparent !important; box-shadow: none !important; border-color: rgba(255,255,255,.08) !important; }
.fi-sidebar .fi-sidebar-item-label, .fi-sidebar .fi-sidebar-group-label { color: #C9D6F2 !important; }
.fi-sidebar .fi-sidebar-item-icon { color: #8FA8D8 !important; }
.fi-sidebar .fi-sidebar-item-btn:hover { background: rgba(255,255,255,.07) !important; }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--sa-blue) !important; }
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: #fff !important; }
.fi-sidebar .fi-icon-btn, .fi-sidebar button[class*="collapse"] { color: #C9D6F2 !important; }

/* ===== الشعار النصي ===== */
.sa-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: #fff; line-height: 1; }
.fi-simple-layout .sa-brand, .fi-topbar .sa-brand { color: var(--sa-navy); }
.dark .fi-simple-layout .sa-brand, .dark .fi-topbar .sa-brand { color: #fff; }
.sa-brand__mark { inline-size: 2.1rem; block-size: 2.1rem; border-radius: 10px; background: var(--sa-blue); color: #fff; display: grid; place-items: center; font-size: 1.25rem; }
.sa-brand__text { font-size: 1.25rem; }
.sa-brand__text small { font-size: .7rem; font-weight: 600; opacity: .7; letter-spacing: .02em; margin-inline-start: .15rem; }

/* ===== شارات الوضع في الشريط العلوي ===== */
.sa-modes { display: flex; gap: .4rem; flex-wrap: wrap; margin-inline-start: .5rem; }
.sa-mode { font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.sa-mode--sim { background: #FFF4E5; color: #93540B; border-color: #FBD7A5; }
.sa-mode--live, .sa-mode--ok { background: #E7F8EF; color: #0B6B3F; border-color: #A6E9C7; }
.sa-mode--stop { background: #FDECEC; color: #A3241B; border-color: #F8B4AE; }
.dark .sa-mode--sim { background: #3A2A12; color: #FBD7A5; border-color: #6A4A1A; }
.dark .sa-mode--live, .dark .sa-mode--ok { background: #0F3323; color: #A6E9C7; border-color: #1E5A3E; }
.dark .sa-mode--stop { background: #3B1512; color: #F8B4AE; border-color: #6B2620; }
@media (max-width: 640px) { .sa-modes { display: none; } }

/* ===== عناصر عامة ===== */
.sa-card { background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-radius); }
.sa-muted { color: var(--sa-muted); font-size: .875rem; }
.sa-link { color: var(--sa-blue); font-weight: 600; font-size: .8125rem; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.sa-link:hover { text-decoration: underline; }
.sa-link:focus-visible, .sa-seg button:focus-visible, .sa-msg__bubble:focus-visible { outline: 2px solid var(--sa-blue); outline-offset: 2px; border-radius: 6px; }
.sa-h { font-size: 1rem; font-weight: 800; color: var(--sa-ink); margin-block-end: .9rem; }
.sa-h2 { font-size: .8125rem; font-weight: 700; color: var(--sa-muted); margin-block: 1.1rem .45rem; }
.sa-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.sa-row--top { margin-block-start: 1rem; }
.sa-prose { font-size: .875rem; line-height: 1.8; color: var(--sa-ink); }
.sa-field { display: grid; gap: .3rem; }
.sa-field label, .sa-compose-label { font-size: .75rem; font-weight: 700; color: var(--sa-muted); }
.sa-input { inline-size: 100%; border: 1px solid var(--sa-line); border-radius: 10px; background: var(--sa-surface); color: var(--sa-ink); padding: .55rem .75rem; font: inherit; font-size: .9rem; resize: vertical; }
.sa-input:focus { outline: none; border-color: var(--sa-blue); box-shadow: 0 0 0 3px rgba(20,103,227,.15); }
.sa-input:disabled { opacity: .6; cursor: not-allowed; }
.sa-pill { font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.sa-pill--ok { background: #E7F8EF; color: #0B6B3F; }
.sa-pill--warn { background: #FFF4E5; color: #93540B; }
.sa-empty { text-align: center; padding: 3rem 1rem; color: var(--sa-ink); max-inline-size: 28rem; margin: auto; line-height: 1.9; }

/* ===== المحادثة (شبيهة بواتساب) ===== */
.sa-chat { display: flex; flex-direction: column; overflow: hidden; min-block-size: 32rem; }
.sa-chat__head { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-block-end: 1px solid var(--sa-line); }
.sa-chat__head .sa-mode { margin-inline-start: auto; }
.sa-chat__head strong { display: block; font-size: .95rem; color: var(--sa-ink); }
.sa-chat__sub { font-size: .75rem; color: var(--sa-muted); }
.sa-chat__avatar { inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--sa-blue); color: #fff; font-weight: 800; flex: none; }
.sa-chat__avatar--contact { background: var(--sa-violet); }
.sa-chat__body { flex: 1; overflow-y: auto; padding: 1.25rem 1rem; background: var(--sa-chat-bg); display: flex; flex-direction: column; gap: .55rem; max-block-size: 60vh; min-block-size: 22rem; }
.sa-chat__body--tall { max-block-size: 65vh; }
.sa-chat__compose { display: flex; gap: .5rem; align-items: flex-end; padding: .75rem; border-block-start: 1px solid var(--sa-line); flex-wrap: wrap; }
.sa-chat__compose .sa-compose-label { flex-basis: 100%; }
.sa-chat__compose .sa-input { flex: 1; min-block-size: 2.6rem; max-block-size: 8rem; }
.sa-chat__compose--sim { background: #FFFBF3; }
.dark .sa-chat__compose--sim { background: #1E1A12; }

/* في RTL: رسائل جهة الاتصال على اليمين، ورسائل الوكيل على اليسار */
.sa-msg { display: flex; flex-direction: column; max-inline-size: min(78%, 34rem); gap: .2rem; }
.sa-msg--in { align-self: flex-start; }
.sa-msg--out { align-self: flex-end; align-items: flex-end; }
.sa-msg__bubble { padding: .6rem .85rem; border-radius: 16px; font-size: .9rem; line-height: 1.75; color: var(--sa-ink); white-space: normal; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(11,31,77,.06); }
.sa-msg--in .sa-msg__bubble { background: var(--sa-bubble-in); border-start-start-radius: 4px; }
.sa-msg--out .sa-msg__bubble { background: var(--sa-bubble-out); border-start-end-radius: 4px; }
.sa-msg--out .sa-msg__bubble[role="button"] { cursor: pointer; }
.sa-msg--active .sa-msg__bubble { box-shadow: 0 0 0 2px var(--sa-blue); }
.sa-msg--system .sa-msg__bubble { background: transparent; border: 1px dashed var(--sa-line); box-shadow: none; }
.sa-msg__who { font-size: .7rem; font-weight: 700; color: var(--sa-violet); }
.sa-msg__meta { display: flex; gap: .4rem; font-size: .7rem; color: var(--sa-muted); }
.sa-msg__tools { display: flex; gap: .75rem; align-items: center; padding-inline: .2rem; }
.sa-msg__error { font-size: .75rem; color: var(--sa-bad); background: #FDECEC; border-radius: 8px; padding: .3rem .55rem; }
.dark .sa-msg__error { background: #3B1512; }
.sa-status { font-weight: 600; }
.sa-status--bad { color: var(--sa-bad); }
.sa-inline-form { display: grid; gap: .4rem; inline-size: min(100%, 28rem); background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: 12px; padding: .7rem; }
.sa-inline-form label { font-size: .75rem; font-weight: 700; color: var(--sa-muted); }
.sa-typing { display: inline-flex; gap: 4px; padding-block: .85rem; }
.sa-typing span { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--sa-blue); opacity: .4; animation: sa-blink 1.2s infinite; }
.sa-typing span:nth-child(2) { animation-delay: .2s; } .sa-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes sa-blink { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sa-typing span { animation: none; opacity: .8; } }

/* ===== اختبار الوكيل ===== */
.sa-play { display: grid; gap: 1rem; }
.sa-play__setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; padding: 1rem; align-items: end; }
.sa-field--wide { grid-column: 1 / -1; }
.sa-play__setup-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.sa-play__grid, .sa-conv { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .sa-play__grid, .sa-conv { grid-template-columns: 1fr; } }
.sa-inspect { padding: 1.1rem; position: sticky; inset-block-start: 5rem; }
.sa-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.sa-facts > div { min-inline-size: 0; }
.sa-facts__wide { grid-column: 1 / -1; }
.sa-facts dt { font-size: .7rem; font-weight: 700; color: var(--sa-muted); margin-block-end: .15rem; }
.sa-facts dd { font-size: .875rem; color: var(--sa-ink); font-weight: 600; }
.sa-level { display: inline-block; font-size: .75rem; padding: .1rem .55rem; border-radius: 999px; background: #EEF1F6; color: #475467; }
.sa-level--hot { background: #E7F8EF; color: #0B6B3F; }
.sa-level--warm { background: #FFF4E5; color: #93540B; }
.sa-level--cold { background: #FDECEC; color: #A3241B; }
.sa-sources { display: grid; gap: .35rem; font-size: .8125rem; color: var(--sa-ink); }
.sa-sources li { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem .6rem; border-radius: 8px; background: var(--sa-canvas); }
.sa-sources li.is-used { background: #E3EDFD; }
.dark .sa-sources li.is-used { background: #16346B; }
.sa-sources--warn li { background: #FFF4E5; color: #93540B; }
.sa-seg { display: inline-flex; border: 1px solid var(--sa-line); border-radius: 10px; overflow: hidden; }
.sa-seg button { padding: .4rem .9rem; font-size: .8125rem; font-weight: 600; color: var(--sa-muted); background: var(--sa-surface); border: 0; cursor: pointer; }
.sa-seg button.is-on { background: var(--sa-blue); color: #fff; }
.sa-inspect .sa-field { margin-block-end: .8rem; }

/* ===== لوحة الرئيسية ===== */
.sa-health { display: grid; gap: .75rem; }
.sa-health__alert { background: #FDECEC; color: #A3241B; border: 1px solid #F8B4AE; border-radius: 12px; padding: .75rem 1rem; font-size: .9rem; }
.dark .sa-health__alert { background: #3B1512; color: #F8B4AE; border-color: #6B2620; }
.sa-health__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .6rem; }
.sa-health__item { display: flex; align-items: center; gap: .55rem; background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: 12px; padding: .7rem .9rem; }
.sa-health__label { font-weight: 700; font-size: .85rem; color: var(--sa-ink); }
.sa-health__value { margin-inline-start: auto; font-size: .8rem; color: var(--sa-muted); text-align: end; }
.sa-dot { inline-size: .6rem; block-size: .6rem; border-radius: 50%; flex: none; background: #98A2B3; }
.sa-dot--ok { background: var(--sa-ok); } .sa-dot--warn { background: var(--sa-warn); } .sa-dot--bad { background: var(--sa-bad); } .sa-dot--off { background: #98A2B3; }
.sa-bars { display: grid; gap: .55rem; margin-block-end: .9rem; }
.sa-bars li { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 2rem; gap: .6rem; align-items: center; font-size: .85rem; color: var(--sa-ink); }
.sa-bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-bars__track { block-size: .5rem; background: var(--sa-canvas); border-radius: 999px; overflow: hidden; }
.sa-bars__fill { display: block; block-size: 100%; background: var(--sa-blue); border-radius: inherit; }
.sa-bars__count { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== خطة الحملة ===== */
.sa-pad { padding: 1.1rem; }
.sa-plan { display: grid; gap: 1rem; }
.sa-plan__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.sa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; }
.sa-kpis > div { background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: 12px; padding: .75rem .9rem; }
.sa-kpis dt { font-size: .75rem; color: var(--sa-muted); font-weight: 700; }
.sa-kpis dd { font-size: 1.3rem; font-weight: 800; color: var(--sa-ink); font-variant-numeric: tabular-nums; }
.sa-alerts { display: grid; gap: .5rem; margin-block-end: 1rem; }
.sa-alert { background: #FFF4E5; color: #93540B; border: 1px solid #FBD7A5; border-radius: 12px; padding: .7rem 1rem; font-size: .9rem; line-height: 1.7; }
.dark .sa-alert { background: #3A2A12; color: #FBD7A5; border-color: #6A4A1A; }
.sa-warn-text { color: var(--sa-warn); font-weight: 700; font-size: .8rem; }
.sa-table-wrap { overflow-x: auto; }
.sa-table { inline-size: 100%; border-collapse: collapse; font-size: .85rem; color: var(--sa-ink); }
.sa-table th { text-align: start; font-size: .72rem; color: var(--sa-muted); font-weight: 700; padding: .45rem .5rem; border-block-end: 1px solid var(--sa-line); white-space: nowrap; }
.sa-table td { padding: .55rem .5rem; border-block-end: 1px solid var(--sa-line); vertical-align: top; font-variant-numeric: tabular-nums; }
.sa-progress-cell { min-inline-size: 8rem; }
.sa-progress-cell .sa-bars__track { display: block; margin-block-end: .25rem; }

/* ===== التقويم ===== */
.sa-cal { display: grid; gap: 1rem; }
.sa-cal__bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.sa-cal__nav { display: flex; align-items: center; gap: .4rem; }
.sa-cal__title { font-size: 1rem; color: var(--sa-ink); min-inline-size: 10rem; text-align: center; }
.sa-cal__legend { display: flex; gap: .4rem; }
.sa-chip { font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; }
.sa-chip--individual, .sa-ev--individual { background: #E3EDFD; color: #0E4FB3; }
.sa-chip--group, .sa-ev--group { background: #ECE7FD; color: #4B2FB8; }
.dark .sa-chip--individual, .dark .sa-ev--individual { background: #16346B; color: #CFE0FC; }
.dark .sa-chip--group, .dark .sa-ev--group { background: #2E2366; color: #DCD3FB; }
.sa-cal__month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--sa-line); border: 1px solid var(--sa-line); border-radius: var(--sa-radius); overflow: hidden; }
.sa-cal__wd { background: var(--sa-canvas); font-size: .75rem; font-weight: 700; color: var(--sa-muted); padding: .45rem; text-align: center; }
.sa-cal__cell { background: var(--sa-surface); min-block-size: 6.5rem; padding: .35rem; display: flex; flex-direction: column; gap: .25rem; }
.sa-cal__cell.is-out { opacity: .45; }
.sa-cal__cell.is-today .sa-cal__num { background: var(--sa-blue); color: #fff; }
.sa-cal__num { font-size: .78rem; font-weight: 700; color: var(--sa-ink); inline-size: 1.6rem; block-size: 1.6rem; display: grid; place-items: center; border-radius: 50%; }
.sa-ev { display: flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .2rem .4rem; border-radius: 6px; text-decoration: none; overflow: hidden; white-space: nowrap; }
.sa-ev:hover { filter: brightness(.96); }
.sa-ev--block { display: grid; gap: .15rem; white-space: normal; padding: .55rem .7rem; border-radius: 10px; font-size: .8rem; position: relative; }
.sa-ev__time { font-weight: 800; }
.sa-ev__title { font-weight: 700; color: var(--sa-ink); }
.sa-ev__meta { font-weight: 500; opacity: .85; }
.sa-ev__badge { background: var(--sa-warn); color: #fff; border-radius: 999px; padding: 0 .4rem; font-size: .68rem; margin-inline-start: auto; }
.sa-ev--block .sa-ev__badge { justify-self: start; margin: 0; }
.sa-cal__list { display: grid; grid-template-columns: repeat(7, minmax(7rem, 1fr)); gap: .5rem; overflow-x: auto; }
.sa-cal__list--day { grid-template-columns: minmax(0, 40rem); }
.sa-cal__day { padding: .7rem; display: grid; gap: .45rem; align-content: start; min-block-size: 10rem; }
.sa-cal__day.is-today { border-color: var(--sa-blue); box-shadow: inset 0 0 0 1px var(--sa-blue); }
.sa-cal__dayhead { font-size: .85rem; font-weight: 800; color: var(--sa-ink); }
.sa-cal__dayhead span { font-weight: 500; color: var(--sa-muted); font-size: .78rem; }
@media (max-width: 900px) { .sa-cal__list { grid-template-columns: 1fr; } .sa-cal__cell { min-block-size: 4.5rem; } .sa-ev { font-size: .65rem; } }

.sa-kpis__small { font-size: .95rem !important; line-height: 1.6; }

/* ===== جاهزية الفئة ===== */
.sa-ready { display: grid; gap: .35rem; font-size: .875rem; inline-size: 100%; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.sa-ready li { padding: .35rem .6rem; border-radius: 8px; }
.sa-ready .is-ok { background: #E7F8EF; color: #0B6B3F; }
.sa-ready .is-missing { background: #FFF4E5; color: #93540B; }
.dark .sa-ready .is-ok { background: #0F3323; color: #A6E9C7; }
.dark .sa-ready .is-missing { background: #3A2A12; color: #FBD7A5; }
*:has(> .sa-ready) { display: block !important; inline-size: 100% !important; }