/* محاكاة نافذة «مساعد الذكاء الاصطناعي» في الرئيسية (index.html / index-en.html).
   تُحرّكها assets/ai-chat-demo.js: كتابة السؤال ثم إرساله ثم مؤشر الكتابة ثم الرد سطراً سطراً.
   الحالة النهائية للمثال الأول مكتوبة في HTML، فتظهر كما هي بلا JavaScript ولزواحف البحث. */
.aiw {
    --aiw-backdrop: #e9eef5;
    --aiw-panel: #fff;
    --aiw-line: #e2e8f0;
    --aiw-ink: #0f172a;
    --aiw-muted: #64748b;
    --aiw-bubble: #f6f8fb;
    --aiw-field: #f8fafc;
    --aiw-brand: #2563eb;
    --aiw-dot: #3b82f6;
    padding: 18px;
    background: var(--aiw-backdrop);
}
.dark .aiw {
    --aiw-backdrop: #0b1220;
    --aiw-panel: #111a2c;
    --aiw-line: #273349;
    --aiw-ink: #e2e8f0;
    --aiw-muted: #94a3b8;
    --aiw-bubble: #1a2436;
    --aiw-field: #0f1727;
    --aiw-brand: #3b82f6;
    --aiw-dot: #60a5fa;
}
.aiw-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--aiw-line);
    border-radius: 18px;
    background: var(--aiw-panel);
    box-shadow: 0 18px 40px -22px rgb(15 23 42 / .35);
    color: var(--aiw-ink);
}
.aiw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--aiw-line);
}
.aiw-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 800; }
.aiw-title svg { width: 22px; height: 22px; flex: none; }
.aiw-tools { display: flex; align-items: center; gap: 18px; color: var(--aiw-muted); }
.aiw-tools svg { width: 18px; height: 18px; }

/* بلا JavaScript (أو مع «تقليل الحركة») يأخذ السجل ارتفاع محتواه فلا يُقصّ شيء من الرد.
   مع التحريك يثبت ارتفاعه حتى لا تقفز الصفحة، ويُمرَّر إلى آخر رسالة كما في المحادثة الحقيقية. */
.aiw-log {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
}
.aiw--js .aiw-log { height: 372px; overflow: hidden; }
.aiw--js .aiw-log.is-scrolled {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
}
.aiw-thread { display: flex; flex-direction: column; gap: 14px; transition: opacity .3s ease; }
.aiw-thread.is-leaving { opacity: 0; }
.aiw-msg { max-width: 82%; font-size: .875rem; line-height: 1.75; }
/* مواضع فيزيائية لا منطقية، كما في النظام بالعربية والإنجليزية: السؤال يميناً والرد يساراً */
.aiw-bot { margin-right: auto; padding: 12px 16px; border-radius: 14px; background: var(--aiw-bubble); }
.aiw-user { margin-left: auto; padding: 2px 4px; font-weight: 600; }
.aiw-card-title { margin: 0 0 8px; font-size: .95rem; font-weight: 800; }
.aiw-card ul, .aiw-card ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.aiw-card li { position: relative; padding-inline-start: 16px; }
.aiw-card li::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    top: .72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--aiw-dot);
}
/* المبلغ وعملته لا ينفصلان على سطرين («9,800.00» ثم «ر.س» وحدها) */
.aiw-card b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aiw-typing { display: inline-flex; align-items: center; gap: 5px; padding: 14px 16px; }
.aiw-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--aiw-muted); animation: aiw-typing-dot 1s infinite ease-in-out; }
.aiw-typing span:nth-child(2) { animation-delay: .15s; }
.aiw-typing span:nth-child(3) { animation-delay: .3s; }

.aiw-compose { display: flex; align-items: center; gap: 10px; margin: 0 18px; padding: 8px 8px 8px 8px; border: 1px solid var(--aiw-line); border-radius: 14px; background: var(--aiw-field); }
.aiw-input { position: relative; flex: 1; min-width: 0; min-height: 40px; display: flex; align-items: center; padding-inline: 8px; font-size: .875rem; white-space: nowrap; overflow: hidden; }
.aiw-ph { color: var(--aiw-muted); }
.aiw-input.has-text .aiw-ph { display: none; }
.aiw-caret { display: inline-block; width: 1.5px; height: 1.2em; margin-inline: 1px; background: var(--aiw-ink); animation: aiw-blink 1s steps(1) infinite; }
.aiw-send { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: #e2e8f0; color: #64748b; transition: background .2s ease, color .2s ease, transform .12s ease; }
.dark .aiw-send { background: #273349; color: #94a3b8; }
.aiw-send svg { width: 20px; height: 20px; }
.aiw-send.is-ready { background: var(--aiw-brand); color: #fff; }
.aiw-send.is-pressed { transform: scale(.9); }
[dir="rtl"] .aiw-send svg { transform: scaleX(-1); }
.aiw-hint { margin: 0; padding: 10px 18px 14px; text-align: center; font-size: .72rem; color: var(--aiw-muted); }

/* ظهور العناصر أثناء التحريك */
.aiw-in { animation: aiw-in .35s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes aiw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes aiw-typing-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes aiw-blink { 50% { opacity: 0; } }

@media (max-width: 640px) {
    .aiw { padding: 10px; }
    .aiw-log { padding: 14px; }
    .aiw--js .aiw-log { height: 340px; }
    .aiw-msg { max-width: 92%; font-size: .82rem; }
    .aiw-compose { margin: 0 12px; }
    .aiw-head { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .aiw-in, .aiw-typing span, .aiw-caret { animation: none; }
    .aiw-thread { transition: none; }
}