/* صفحة «إدخال البيانات بالذكاء الاصطناعي» (ai-data-entry.html / -en): محادثة توضيحية ومقتطفات الأوامر. نطاق الأسماء ade-. */

/* الواجهة: توهج هادئ بلون العلامة بدل تدرج مسطح */
.ade-hero { background-color: #fff; background-image: radial-gradient(56rem 26rem at 88% -12%, rgba(37, 99, 235, .12), transparent 62%), radial-gradient(40rem 22rem at 6% 18%, rgba(124, 58, 237, .09), transparent 62%); }
.dark .ade-hero { background-color: #0f172a; background-image: radial-gradient(56rem 26rem at 88% -12%, rgba(37, 99, 235, .18), transparent 62%), radial-gradient(40rem 22rem at 6% 18%, rgba(124, 58, 237, .14), transparent 62%); }
.ade-grad { display: block; color: #2563eb; text-wrap: balance; }
.dark .ade-grad { color: #60a5fa; }

/* «رفيق يجهّز…» بين الرسالتين: يظهر فقط أثناء العرض المتحرك */
.ade-typing { display: none; align-items: center; gap: .55rem; justify-self: end; padding: .55rem .85rem; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: .78rem; font-weight: 700; }
.ade-typing__dots { display: inline-flex; gap: .2rem; }
.ade-typing__dots i { width: .38rem; height: .38rem; border-radius: 50%; background: #2563eb; animation: ade-dot 1s ease-in-out infinite; }
.ade-typing__dots i:nth-child(2) { animation-delay: .15s; }
.ade-typing__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ade-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes ade-show { to { opacity: 1; transform: none; } }
@keyframes ade-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* العرض خطوة بخطوة (ade-js = JavaScript يعمل والحركة غير مقيّدة). احتياط: يظهر كل شيء بعد 6 ث إن لم يعمل ai-data-entry.js */
.ade-js .ade-chat .ade-msg, .ade-js .ade-chat .ade-lines tr { opacity: 0; transform: translateY(10px); animation: ade-show .4s ease-out 6s forwards; }
.ade-js .ade-chat.is-anim .ade-msg, .ade-js .ade-chat.is-anim .ade-lines tr { animation: none; transition: opacity .35s ease-out, transform .35s ease-out; }
.ade-js .ade-chat.is-s1 .ade-msg--user, .ade-js .ade-chat.is-s3 .ade-msg--ai, .ade-js .ade-chat.is-s4 .ade-lines tr { opacity: 1; transform: none; }
.ade-js .ade-chat.is-s4 .ade-lines tr:nth-child(2) { transition-delay: .15s; }
.ade-js .ade-chat.is-s4 .ade-lines tr:nth-child(3) { transition-delay: .3s; }
.ade-js .ade-chat.is-s4 .ade-lines tr:nth-child(4) { transition-delay: .45s; }
.ade-js .ade-chat.is-s4 .ade-lines tr:nth-child(5) { transition-delay: .6s; }
.ade-js .ade-chat.is-s2:not(.is-s3) .ade-typing { display: inline-flex; animation: ade-show .25s ease-out both; }
.ade-js .ade-chat.is-done .ade-pill { animation: ade-pop .5s ease-out; }
.ade-replay { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: 0 .9rem; border: 0; border-radius: 999px; background: transparent; color: #1d4ed8; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.ade-replay:hover { background: #eff6ff; }
.ade-replay:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.ade-replay svg { width: 1rem; height: 1rem; }
.ade-replay[hidden] { display: none; }
.dark .ade-typing { background: #1e293b; color: #cbd5e1; }
.dark .ade-replay { color: #93c5fd; }
.dark .ade-replay:hover { background: rgba(37, 99, 235, .15); }

/* الإدخال اليدوي مقابل رفيق */
.ade-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1.25rem; }
.ade-vs__card { padding: 1.6rem 1.6rem 1.4rem; border-radius: 1.5rem; }
.ade-vs__card--old { border: 1px solid #e2e8f0; background: #f8fafc; }
.ade-vs__card--new { position: relative; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #2563eb, #7c3aed) border-box; box-shadow: 0 24px 48px -28px rgba(37, 99, 235, .55); }
.ade-vs__tag { margin: 0 0 .35rem; font-size: .8rem; font-weight: 800; color: #64748b; }
.ade-vs__card--new .ade-vs__tag { color: #6d28d9; }
.ade-vs__title { margin: 0 0 1rem; font-size: 1.2rem; font-weight: 900; color: #0f172a; }
.ade-vs__list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; color: #334155; line-height: 1.65; }
.ade-vs__list li { display: flex; align-items: flex-start; gap: .6rem; }
.ade-vs__card--old .ade-vs__list { color: #64748b; }
.ade-vs__ico { flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; margin-top: .1rem; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: .75rem; font-weight: 900; }
.ade-vs__ico--x { background: #f1f5f9; color: #94a3b8; }
.ade-vs__arrow { align-self: center; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #eff6ff; color: #2563eb; }
.ade-vs__arrow svg { width: 1.25rem; height: 1.25rem; }
[dir="ltr"] .ade-vs__arrow svg { transform: scaleX(-1); }
.dark .ade-vs__card--old { border-color: #334155; background: #1e293b; }
.dark .ade-vs__card--new { background: linear-gradient(#0f172a, #0f172a) padding-box, linear-gradient(135deg, #3b82f6, #8b5cf6) border-box; }
.dark .ade-vs__title { color: #f1f5f9; }
.dark .ade-vs__list { color: #cbd5e1; }
.dark .ade-vs__card--old .ade-vs__list { color: #94a3b8; }
.dark .ade-vs__ico--x { background: #334155; color: #94a3b8; }
.dark .ade-vs__arrow { background: rgba(37, 99, 235, .2); color: #93c5fd; }
@media (max-width: 767px) {
    .ade-vs { grid-template-columns: 1fr; gap: .9rem; }
    .ade-vs__arrow { justify-self: center; transform: rotate(-90deg); }
    [dir="ltr"] .ade-vs__arrow { transform: rotate(90deg); }
    .ade-vs__card { padding: 1.3rem 1.2rem; }
}

/* شريط الثقة الداكن: يفصل الإيقاع البصري ويبرز «القرار لك» */
#control.ade-dark { background: radial-gradient(48rem 22rem at 12% 0%, rgba(124, 58, 237, .25), transparent 60%), #0b1631; color: #e2e8f0; }
#control.ade-dark h2 { color: #fff; }
#control.ade-dark h2 + p { color: #cbd5e1; }
#control.ade-dark article { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); }
#control.ade-dark article h3 { color: #fff; }
#control.ade-dark article p { color: #cbd5e1; }
#control.ade-dark article svg { color: #34d399; }
.ade-chat { position: relative; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 1.75rem; background: #fff; box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .35); }
.ade-chat__bar { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; border-bottom: 1px solid #eef2f7; background: #f8fafc; }
.ade-chat__logo { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .75rem; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-weight: 900; font-size: .95rem; }
.ade-chat__bar b { display: block; font-size: .95rem; color: #0f172a; line-height: 1.2; }
.ade-chat__bar small { display: block; color: #64748b; font-size: .72rem; }
.ade-chat__live { margin-inline-start: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.ade-chat__live::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: #10b981; }
.ade-chat__body { display: grid; gap: .85rem; padding: 1.1rem; }
.ade-msg { max-width: 92%; padding: .8rem .95rem; border-radius: 1.1rem; font-size: .9rem; line-height: 1.65; }
.ade-msg--user { justify-self: start; background: #2563eb; color: #fff; border-start-start-radius: .35rem; }
.ade-msg--ai { justify-self: end; background: #f1f5f9; color: #0f172a; border-start-end-radius: .35rem; }
.ade-file { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; padding: .5rem .6rem; border-radius: .8rem; background: rgba(255, 255, 255, .16); }
.ade-file__thumb { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.9rem; border-radius: .4rem; background: #fff; color: #2563eb; }
.ade-file__thumb svg { width: 1.3rem; height: 1.3rem; }
.ade-file b { display: block; font-size: .8rem; }
.ade-file small { display: block; font-size: .7rem; opacity: .85; }
.ade-ok { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; color: #047857; }
.ade-draft { margin-top: .7rem; overflow: hidden; border: 1px solid #dbe4f0; border-radius: 1rem; background: #fff; }
.ade-draft__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .85rem; border-bottom: 1px solid #eef2f7; }
.ade-draft__head b { font-size: .85rem; color: #0f172a; }
.ade-draft__head small { display: block; color: #64748b; font-size: .72rem; font-weight: 600; }
.ade-pill { flex: none; padding: .2rem .55rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.ade-lines { width: 100%; border-collapse: collapse; font-size: .76rem; font-variant-numeric: tabular-nums; }
.ade-lines td { padding: .42rem .85rem; border-bottom: 1px solid #f1f5f9; color: #334155; }
.ade-lines td:last-child { text-align: end; font-weight: 700; color: #0f172a; white-space: nowrap; }
.ade-lines tr.ade-sum td { color: #64748b; font-weight: 600; }
.ade-lines tr.ade-total td { border-bottom: 0; background: #eff6ff; color: #1d4ed8; font-size: .85rem; font-weight: 900; }
.ade-draft__btn { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .7rem .85rem .85rem; padding: .6rem; border-radius: .75rem; background: #2563eb; color: #fff; font-size: .8rem; font-weight: 800; }
.ade-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .5rem; margin-top: .85rem; color: #64748b; font-size: .8rem; }

/* أوامر جاهزة: مقتطفات بشكل فقاعة محادثة */
.ade-prompt { position: relative; display: flex; gap: .75rem; align-items: flex-start; padding: 1.1rem 1.2rem; border: 1px solid #e2e8f0; border-radius: 1.25rem; background: #fff; }
.ade-prompt__ico { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .8rem; background: #eff6ff; color: #2563eb; }
.ade-prompt__ico svg { width: 1.15rem; height: 1.15rem; }
.ade-prompt q { display: block; color: #0f172a; font-weight: 700; line-height: 1.7; quotes: '«' '»'; }
.ade-prompt small { display: block; margin-top: .35rem; color: #64748b; font-size: .8rem; }
[dir="ltr"] .ade-prompt q { quotes: '“' '”'; }

.dark .ade-chat { border-color: #334155; background: #0f172a; }
.dark .ade-chat__bar { border-color: #1e293b; background: #111c31; }
.dark .ade-chat__bar b { color: #f1f5f9; }
.dark .ade-msg--ai { background: #1e293b; color: #e2e8f0; }
.dark .ade-draft { border-color: #334155; background: #0b1424; }
.dark .ade-draft__head { border-color: #1e293b; }
.dark .ade-draft__head b, .dark .ade-lines td:last-child { color: #f1f5f9; }
.dark .ade-lines td { border-color: #1e293b; color: #cbd5e1; }
.dark .ade-lines tr.ade-total td { background: rgba(37, 99, 235, .18); color: #93c5fd; }
.dark .ade-prompt { border-color: #334155; background: #1e293b; }
.dark .ade-prompt q { color: #f1f5f9; }
.dark .ade-prompt__ico { background: rgba(37, 99, 235, .2); color: #93c5fd; }

@media (max-width: 480px) {
    .ade-chat__body { padding: .85rem; }
    .ade-msg { max-width: 100%; font-size: .86rem; }
    .ade-lines td { padding-inline: .6rem; }
}
