/* ============================================================
   مساعد أفق التقنية الذكي — واجهة الدردشة العائمة
   بهوية الموقع: كحلي #1F334E + ذهبي #F2B100 + خط Zain
   ============================================================ */

.ai-fab {
    position: fixed;
    bottom: 24px;
    inset-inline-start: 24px; /* يسار في RTL */
    z-index: 9998;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: radial-gradient(125% 125% at 32% 16%, #ffffff 0%, #eef2f8 100%);
    color: #1F334E;
    border: 1px solid rgba(31, 51, 78, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(31, 51, 78, 0.24), 0 3px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: aiPulse 2.8s ease-in-out infinite;
}
.ai-fab:hover { transform: scale(1.08); }
.ai-fab svg { width: 26px; height: 26px; }
.ai-mark-img { width: 34px; height: 34px; object-fit: contain; display: block; }
.ai-fab .ai-fab-close { display: none; }
.ai-open .ai-fab .ai-fab-open { display: none; }
.ai-open .ai-fab .ai-fab-close { display: block; }
.ai-open .ai-fab { animation: none; }

/* شارة «AI» على زاوية الزر — توضّح أنه ذكاء اصطناعي */
.ai-fab-tag {
    position: absolute;
    top: -3px;
    inset-inline-end: -4px;
    background: var(--primary-color, #1F334E);
    color: #fff;
    font-family: 'Zain', 'Tajawal', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 9px;
    border: 2px solid #fff;
    box-shadow: 0 2px 7px rgba(31, 51, 78, 0.35);
    pointer-events: none;
}
.ai-open .ai-fab-tag { display: none; }

@keyframes aiPulse {
    0%, 100% { box-shadow: 0 12px 32px rgba(31,51,78,0.24), 0 0 0 0 rgba(46,155,138,0.45); }
    50%      { box-shadow: 0 12px 32px rgba(31,51,78,0.24), 0 0 0 13px rgba(46,155,138,0); }
}

/* شارة ترحيب صغيرة */
.ai-badge {
    position: fixed;
    bottom: 40px;
    inset-inline-start: 96px;
    z-index: 9997;
    background: var(--primary-color, #1F334E);
    color: #fff;
    font-family: 'Zain', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 16px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    max-width: 220px;
    line-height: 1.5;
    animation: aiBadgeIn 0.4s ease both;
}
.ai-badge::after {
    content: '';
    position: absolute;
    inset-inline-start: -6px;
    bottom: 18px;
    width: 12px; height: 12px;
    background: var(--primary-color, #1F334E);
    transform: rotate(45deg);
}
.ai-badge-close {
    background: none; border: none; color: rgba(255,255,255,0.7);
    cursor: pointer; font-size: 16px; margin-inline-start: 6px; padding: 0;
}
@keyframes aiBadgeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* نافذة الدردشة */
.ai-panel {
    position: fixed;
    bottom: 100px;
    inset-inline-start: 24px;
    z-index: 9999;
    width: min(380px, calc(100vw - 32px));
    height: min(560px, calc(100vh - 140px));
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(31, 51, 78, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    font-family: 'Zain', sans-serif;
}
.ai-open .ai-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* الهيدر */
.ai-header {
    background: linear-gradient(135deg, var(--primary-color, #1F334E) 0%, #16273b 100%);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}
.ai-header .ai-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ai-header .ai-avatar svg { width: 32px; height: 32px; }
.ai-header .ai-avatar .ai-mark-img { width: 30px; height: 30px; }
.ai-header h4 { font-size: 18px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 7px; }
.ai-tag-inline {
    background: linear-gradient(135deg, var(--secondary-color, #F2B100), #ffcb3d);
    color: var(--primary-color, #1F334E);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.6px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 6px;
}
.ai-header .ai-status { font-size: 12px; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 5px; }
.ai-header .ai-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }

/* منطقة الرسائل */
.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 16px;
    background: var(--light-bg, #F5F5F5);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ai-msg { max-width: 84%; padding: 11px 15px; border-radius: 16px; font-size: 15.5px; line-height: 1.7; white-space: pre-wrap; word-wrap: break-word; }
.ai-msg.bot  { align-self: flex-start; background: #fff; color: var(--primary-color,#1F334E); border-bottom-inline-start-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.ai-msg.user { align-self: flex-end; background: var(--primary-color,#1F334E); color: #fff; border-bottom-inline-end-radius: 5px; }

/* مؤشر الكتابة */
.ai-typing { align-self: flex-start; background: #fff; padding: 13px 16px; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); display: flex; gap: 4px; }
.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--secondary-color,#F2B100); animation: aiTyping 1.2s infinite; }
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTyping { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* اقتراحات سريعة */
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; background: var(--light-bg,#F5F5F5); }
.ai-chip {
    font-family: inherit; font-size: 13.5px; font-weight: 700;
    color: var(--primary-color,#1F334E); background: #fff;
    border: 1.5px solid rgba(31,51,78,0.15); border-radius: 20px;
    padding: 7px 14px; cursor: pointer; transition: all 0.2s ease;
}
.ai-chip:hover { border-color: var(--secondary-color,#F2B100); background: #fffdf5; }

/* منطقة الإدخال */
.ai-input-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #fff; border-top: 1px solid rgba(0,0,0,0.06); }
.ai-input-bar textarea {
    flex: 1; resize: none; border: none; outline: none;
    /* 16px = عتبة iOS التي عندها لا يُكبّر الشاشة تلقائياً عند الكتابة */
    font-family: inherit; font-size: 16px; color: var(--primary-color,#1F334E);
    background: var(--light-bg,#F5F5F5); border-radius: 14px; padding: 10px 14px;
    max-height: 90px; line-height: 1.5;
}
.ai-input-bar textarea::placeholder { color: rgba(31,51,78,0.45); }
.ai-send {
    flex-shrink: 0; width: 42px; height: 42px; border: none; border-radius: 50%; cursor: pointer;
    background: linear-gradient(135deg, var(--secondary-color,#F2B100), #ffcb3d);
    color: var(--primary-color,#1F334E); display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease; }
.ai-send:hover:not(:disabled) { transform: scale(1.08); }
.ai-send:disabled { opacity: 0.5; cursor: default; }
.ai-send svg { width: 20px; height: 20px; }

/* رابط واتساب في تذييل الدردشة */
.ai-wa { text-align: center; font-size: 12.5px; color: var(--text-light, rgba(0,0,0,0.6)); padding: 0 14px 10px; background: #fff; }
.ai-wa a { color: #25D366; font-weight: 800; }

@media (max-width: 480px) {
    .ai-badge { display: none; }
    .ai-panel { inset-inline-start: 8px; bottom: 88px; }
}