/* =====================================================================
   Smart School AI Assistant (public landing + teacher dashboard)
   Scoped to #aiAssistantWidget — safe to include on any page.
   ===================================================================== */
#aiAssistantWidget,
#aiAssistantWidget * { box-sizing: border-box; }

#aiAssistantWidget {
    /* Public palette — matches the landing page (cyan #06BBCC + navy #181D38). */
    --ai-brand: #06bbcc;
    --ai-brand-strong: #0891b2;
    --ai-brand-deep: #0e7490;
    --ai-brand-soft: #e8fafc;
    --ai-brand-line: #b6edf3;
    --ai-ink: #16213e;
    --ai-muted: #64748b;
    --ai-line: #e2e8f0;
    --ai-canvas: #f6fbfc;
    --ai-surface: #ffffff;
    --ai-navy: #181d38;
    --ai-navy-2: #22305a;
    --ai-header-grad: linear-gradient(135deg, #141a33 0%, #1d3459 58%, #0f5f73 135%);
    --ai-header-glow: rgba(34, 211, 238, 0.3);
    --ai-toggle-grad: linear-gradient(135deg, #181d38 0%, #22305a 68%, #155e75 145%);
    --ai-toggle-border: rgba(94, 234, 212, 0.34);
    --ai-toggle-glow: rgba(6, 187, 204, 0.36);
    --ai-user-grad: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
    --ai-user-ink: #ffffff;
    --ai-online: #5eead4;
    --ai-online-ring: rgba(94, 234, 212, 0.22);
    --ai-focus: rgba(6, 187, 204, 0.2);
    --ai-focus-border: #06bbcc;
    --ai-avatar-grad: linear-gradient(145deg, #ffffff 0%, #cffafe 100%);
    --ai-avatar-ink: #0e7490;
    --ai-shadow: rgba(20, 26, 51, 0.28);
    --ai-panel-ring: rgba(24, 29, 56, 0.08);
    --ai-ref-bg: #ecfeff;
    --ai-ref-ink: #0e7490;
    --ai-ref-line: #a5f3fc;
    --ai-danger: #b91c1c;
    --ai-danger-bg: #fef2f2;
    /* قيمة احتياطية؛ يضبطها JS على ارتفاع الهيدر الفعلي + مسافة أمان. */
    --ai-top-offset: 92px;
    position: fixed;
    inset-inline-end: 22px;
    inset-block-start: var(--ai-top-offset);
    inset-block-end: auto;
    z-index: 9999;
    font-family: "Cairo", "Nunito", "Inter", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    color: var(--ai-ink);
}

/* Teacher dashboard palette — matches its indigo/purple theme. */
#aiAssistantWidget[data-channel="teacher"] {
    /* قيمة احتياطية لهيدر لوحة المعلّم (64px) قبل القياس في JS. */
    --ai-top-offset: 80px;
    --ai-brand: #4f6ef7;
    --ai-brand-strong: #5b5ce2;
    --ai-brand-deep: #4c3a8a;
    --ai-brand-soft: #eef0ff;
    --ai-brand-line: #d6dbff;
    --ai-canvas: #f6f7fc;
    --ai-header-grad: linear-gradient(135deg, #171a2b 0%, #2b2b5c 58%, #4f3f9e 135%);
    --ai-header-glow: rgba(129, 140, 248, 0.32);
    --ai-toggle-grad: linear-gradient(135deg, #4b5fd8 0%, #6c47a0 100%);
    --ai-toggle-border: rgba(199, 210, 254, 0.4);
    --ai-toggle-glow: rgba(79, 110, 247, 0.4);
    --ai-user-grad: linear-gradient(135deg, #4f5bd5 0%, #5b3a91 100%);
    --ai-online: #a5b4fc;
    --ai-online-ring: rgba(165, 180, 252, 0.22);
    --ai-focus: rgba(79, 110, 247, 0.2);
    --ai-focus-border: #4f6ef7;
    --ai-avatar-grad: linear-gradient(145deg, #ffffff 0%, #e0e7ff 100%);
    --ai-avatar-ink: #4f3f9e;
    --ai-shadow: rgba(23, 26, 43, 0.3);
    --ai-ref-bg: #eef2ff;
    --ai-ref-ink: #4338ca;
    --ai-ref-line: #c7d2fe;
}

#aiAssistantWidget .ai-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--ai-toggle-border);
    border-radius: 999px;
    padding: 8px 20px 8px 11px;
    background: var(--ai-toggle-grad);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.1px;
    box-shadow:
        0 14px 32px -10px var(--ai-toggle-glow),
        0 6px 16px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
#aiAssistantWidget .ai-toggle:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 20px 40px -10px var(--ai-toggle-glow),
        0 8px 20px rgba(15, 23, 42, 0.22);
}
#aiAssistantWidget .ai-toggle:active { transform: translateY(0); }
#aiAssistantWidget .ai-toggle:focus-visible { outline: 3px solid var(--ai-focus-border); outline-offset: 3px; }
#aiAssistantWidget .ai-toggle-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    line-height: 1;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 32%, rgba(94, 234, 212, 0.18) 0%, rgba(94, 234, 212, 0) 70%);
    filter: drop-shadow(0 4px 10px rgba(6, 187, 204, 0.34));
}
#aiAssistantWidget .ai-toggle-icon svg {
    display: block;
    width: 44px;
    height: 44px;
    overflow: visible;
}
#aiAssistantWidget .ai-robot-float {
    transform-box: fill-box;
    transform-origin: 50% 60%;
    animation: ai-robot-hover 3.8s ease-in-out infinite;
}
#aiAssistantWidget .ai-robot-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: ai-robot-blink 5.4s ease-in-out infinite;
}
#aiAssistantWidget .ai-robot-antenna {
    transform-box: fill-box;
    transform-origin: center;
    animation: ai-antenna-pulse 2.4s ease-in-out infinite;
}
#aiAssistantWidget .ai-robot-antenna-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: ai-antenna-glow 2.4s ease-in-out infinite;
}

@keyframes ai-robot-hover {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.6px); }
}
@keyframes ai-robot-blink {
    0%, 40%, 45%, 100% { transform: scaleY(1); }
    42.5% { transform: scaleY(0.08); }
}
@keyframes ai-antenna-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.62; transform: scale(0.86); }
}
@keyframes ai-antenna-glow {
    0%, 100% { opacity: 0.14; transform: scale(0.8); }
    50% { opacity: 0.4; transform: scale(1.18); }
}

#aiAssistantWidget .ai-panel {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 74px;
    inset-block-end: auto;
    width: 390px;
    max-width: calc(100vw - 24px);
    height: min(640px, calc(100vh - var(--ai-top-offset) - 92px));
    background: var(--ai-surface);
    border: 1px solid var(--ai-panel-ring);
    border-radius: 22px;
    box-shadow:
        0 30px 80px -20px var(--ai-shadow),
        0 10px 28px -12px rgba(15, 23, 42, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ai-pop 0.2s ease-out;
}
#aiAssistantWidget .ai-panel[hidden],
#aiAssistantWidget .ai-request-form[hidden],
#aiAssistantWidget .ai-suggestion[hidden],
#aiAssistantWidget .ai-typing[hidden] { display: none !important; }

@keyframes ai-pop {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#aiAssistantWidget .ai-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;
    background: var(--ai-header-grad);
    color: #fff;
    flex: 0 0 auto;
    overflow: hidden;
}
#aiAssistantWidget .ai-header::before {
    content: "";
    position: absolute;
    inset-inline-end: -55px;
    top: -95px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ai-header-glow) 0%, transparent 70%);
    pointer-events: none;
}
#aiAssistantWidget .ai-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
}
#aiAssistantWidget .ai-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ai-avatar-grad);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 14px rgba(8, 15, 35, 0.28);
    color: var(--ai-avatar-ink);
    font-weight: 800;
    font-size: 1.05rem;
    flex: 0 0 auto;
}
#aiAssistantWidget .ai-heading { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; position: relative; z-index: 1; }
#aiAssistantWidget .ai-heading strong { font-size: 1rem; letter-spacing: 0.1px; }
#aiAssistantWidget .ai-heading span { font-size: 0.72rem; color: rgba(255, 255, 255, 0.78); display: flex; align-items: center; gap: 6px; }
#aiAssistantWidget .ai-online-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ai-online);
    box-shadow: 0 0 0 3px var(--ai-online-ring);
}
#aiAssistantWidget .ai-header-actions { display: flex; gap: 5px; position: relative; z-index: 1; }
#aiAssistantWidget .ai-icon-btn {
    width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
    background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer;
    font-size: 1rem; line-height: 1;
    transition: background 0.16s ease, transform 0.16s ease;
}
#aiAssistantWidget .ai-icon-btn:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
#aiAssistantWidget .ai-icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

#aiAssistantWidget .ai-quick {
    display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 12px;
    border-bottom: 1px solid var(--ai-line);
    flex: 0 0 auto; background: var(--ai-surface);
}
#aiAssistantWidget .ai-quick button {
    border: 1px solid var(--ai-brand-line); background: var(--ai-brand-soft); color: var(--ai-brand-deep);
    border-radius: 999px; padding: 6px 12px; font-size: 0.75rem; font-weight: 700;
    white-space: nowrap; cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
#aiAssistantWidget .ai-quick button:hover {
    background: var(--ai-brand-deep);
    border-color: var(--ai-brand-deep);
    color: #fff;
    transform: translateY(-1px);
}
#aiAssistantWidget .ai-quick button:focus-visible { outline: 2px solid var(--ai-focus-border); outline-offset: 2px; }

#aiAssistantWidget .ai-messages {
    flex: 1 1 auto; overflow-y: auto; padding: 16px 13px;
    background-color: var(--ai-canvas);
    background-image: radial-gradient(circle at 100% 0%, var(--ai-brand-soft) 0%, transparent 42%);
    display: flex; flex-direction: column; gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--ai-brand-line) transparent;
}
#aiAssistantWidget .ai-messages::-webkit-scrollbar { width: 7px; }
#aiAssistantWidget .ai-messages::-webkit-scrollbar-track { background: transparent; }
#aiAssistantWidget .ai-messages::-webkit-scrollbar-thumb { background: var(--ai-brand-line); border-radius: 999px; }
#aiAssistantWidget .ai-msg {
    max-width: 86%; padding: 10px 14px; border-radius: 16px;
    font-size: 0.85rem; line-height: 1.6; white-space: pre-wrap;
    overflow-wrap: anywhere; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    animation: ai-msg-in 0.18s ease-out;
}
#aiAssistantWidget .ai-msg-bot {
    align-self: flex-start;
    background: var(--ai-surface);
    border: 1px solid var(--ai-line);
    border-start-start-radius: 5px;
    color: var(--ai-ink);
}
#aiAssistantWidget .ai-msg-user {
    align-self: flex-end;
    background: var(--ai-user-grad);
    color: var(--ai-user-ink);
    border-start-end-radius: 5px;
    box-shadow: 0 6px 16px -8px var(--ai-toggle-glow);
}
#aiAssistantWidget .ai-msg-meta { display: block; margin-top: 5px; font-size: 0.66rem; opacity: 0.68; }
#aiAssistantWidget .ai-msg-ref {
    display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: 7px;
    background: var(--ai-ref-bg); color: var(--ai-ref-ink);
    border: 1px solid var(--ai-ref-line);
    font-weight: 700; font-size: 0.72rem;
}
#aiAssistantWidget .ai-msg-user .ai-msg-ref {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
@keyframes ai-msg-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

#aiAssistantWidget .ai-typing {
    display: flex; gap: 4px; padding: 0 20px 11px;
    background: var(--ai-canvas); flex: 0 0 auto;
}
#aiAssistantWidget .ai-typing span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--ai-brand-strong);
    animation: ai-bounce 1s infinite ease-in-out;
}
#aiAssistantWidget .ai-typing span:nth-child(2) { animation-delay: 0.15s; }
#aiAssistantWidget .ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } }

#aiAssistantWidget .ai-suggestion {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 12px; border-top: 1px solid var(--ai-line);
    font-size: 0.75rem; color: var(--ai-muted); background: var(--ai-surface); flex: 0 0 auto;
}
#aiAssistantWidget .ai-suggestion-btn {
    border: 0; border-radius: 8px; padding: 6px 11px;
    background: var(--ai-brand-deep); color: #fff; font-weight: 700; font-size: 0.74rem; cursor: pointer;
    transition: filter 0.16s ease, transform 0.16s ease;
}
#aiAssistantWidget .ai-suggestion-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

#aiAssistantWidget .ai-chat-form {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 11px 12px; border-top: 1px solid var(--ai-line);
    background: var(--ai-surface); flex: 0 0 auto;
}
#aiAssistantWidget .ai-chat-form textarea {
    flex: 1; resize: none; max-height: 96px; min-height: 42px;
    border: 1px solid var(--ai-line); border-radius: 13px; padding: 10px 13px;
    font: inherit; font-size: 0.85rem; line-height: 1.4; outline: none;
    color: var(--ai-ink); background: var(--ai-surface);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
#aiAssistantWidget .ai-chat-form textarea::placeholder { color: #94a3b8; }
#aiAssistantWidget .ai-chat-form textarea:focus {
    border-color: var(--ai-focus-border);
    box-shadow: 0 0 0 3px var(--ai-focus);
}
#aiAssistantWidget .ai-send {
    width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 13px;
    background: linear-gradient(135deg, var(--ai-brand-strong), var(--ai-brand-deep));
    color: #fff; font-size: 1rem; cursor: pointer;
    box-shadow: 0 6px 14px -6px var(--ai-toggle-glow);
    transition: filter 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}
#aiAssistantWidget .ai-send:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
#aiAssistantWidget .ai-send:focus-visible { outline: 2px solid var(--ai-focus-border); outline-offset: 2px; }
#aiAssistantWidget .ai-send:disabled { opacity: 0.55; cursor: wait; }


#aiAssistantWidget .ai-request-form {
    flex: 1 1 auto; overflow-y: auto; padding: 15px 14px;
    display: flex; flex-direction: column; gap: 9px; background: var(--ai-surface);
}
#aiAssistantWidget .ai-request-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 3px; }
#aiAssistantWidget .ai-request-head div { display: flex; flex-direction: column; }
#aiAssistantWidget .ai-request-head small { color: var(--ai-muted); font-size: 0.72rem; }
#aiAssistantWidget .ai-back-btn {
    border: 1px solid var(--ai-line); background: var(--ai-brand-soft); color: var(--ai-brand-deep);
    border-radius: 9px; width: 31px; height: 31px; cursor: pointer; flex: 0 0 auto;
    transition: background 0.16s ease, border-color 0.16s ease;
}
#aiAssistantWidget .ai-back-btn:hover { background: var(--ai-brand-line); border-color: var(--ai-brand-line); }
#aiAssistantWidget .ai-request-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; font-weight: 700; color: #374151; }
#aiAssistantWidget .ai-request-form input,
#aiAssistantWidget .ai-request-form select,
#aiAssistantWidget .ai-request-form textarea {
    border: 1px solid var(--ai-line); border-radius: 10px; padding: 8px 10px;
    font: inherit; font-size: 0.82rem; font-weight: 400; outline: none; width: 100%;
    background: var(--ai-surface); color: var(--ai-ink);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
#aiAssistantWidget .ai-request-form input:focus,
#aiAssistantWidget .ai-request-form select:focus,
#aiAssistantWidget .ai-request-form textarea:focus {
    border-color: var(--ai-focus-border);
    box-shadow: 0 0 0 3px var(--ai-focus);
}
#aiAssistantWidget .ai-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#aiAssistantWidget .ai-submit {
    margin-top: 4px; border: 0; border-radius: 11px; padding: 11px 14px;
    background: linear-gradient(135deg, var(--ai-brand-strong), var(--ai-brand-deep));
    color: #fff; font-weight: 700; font-size: 0.84rem; cursor: pointer;
    box-shadow: 0 8px 18px -10px var(--ai-toggle-glow);
    transition: filter 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}
#aiAssistantWidget .ai-submit:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
#aiAssistantWidget .ai-submit:focus-visible { outline: 2px solid var(--ai-focus-border); outline-offset: 2px; }
#aiAssistantWidget .ai-submit:disabled { opacity: 0.6; cursor: wait; }
#aiAssistantWidget .ai-form-error {
    color: var(--ai-danger); background: var(--ai-danger-bg);
    border: 1px solid #fecaca; border-radius: 8px; padding: 7px 10px;
    font-size: 0.74rem; margin: 0;
}
#aiAssistantWidget .ai-note { color: var(--ai-muted); font-size: 0.66rem; margin: 2px 0 0; line-height: 1.4; }

[dir="rtl"] #aiAssistantWidget { inset-inline-end: 22px; inset-inline-start: auto; }
[dir="rtl"] #aiAssistantWidget .ai-msg-user { align-self: flex-start; border-start-start-radius: 5px; border-start-end-radius: 15px; }
[dir="rtl"] #aiAssistantWidget .ai-msg-bot { align-self: flex-end; border-start-end-radius: 5px; border-start-start-radius: 15px; }
[dir="rtl"] #aiAssistantWidget .ai-back-btn { transform: scaleX(-1); }
[dir="rtl"] #aiAssistantWidget .ai-send { transform: scaleX(-1); }

@media (max-width: 480px) {
    #aiAssistantWidget { inset-inline-end: 12px; }
    [dir="rtl"] #aiAssistantWidget { inset-inline-end: 12px; }
    #aiAssistantWidget .ai-panel {
        width: calc(100vw - 24px);
        height: min(78vh, calc(100vh - var(--ai-top-offset) - 96px));
        inset-block-start: 72px;
        inset-block-end: auto;
        border-radius: 20px;
    }
    #aiAssistantWidget .ai-toggle { padding: 8px; }
    #aiAssistantWidget .ai-toggle-icon { border-radius: 50%; }
    #aiAssistantWidget .ai-toggle-text { display: none; }
    #aiAssistantWidget .ai-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    #aiAssistantWidget .ai-panel,
    #aiAssistantWidget .ai-msg,
    #aiAssistantWidget .ai-robot-float,
    #aiAssistantWidget .ai-robot-eye,
    #aiAssistantWidget .ai-robot-antenna,
    #aiAssistantWidget .ai-robot-antenna-glow,
    #aiAssistantWidget .ai-typing span { animation: none; }
    #aiAssistantWidget .ai-toggle,
    #aiAssistantWidget .ai-icon-btn,
    #aiAssistantWidget .ai-quick button,
    #aiAssistantWidget .ai-send,
    #aiAssistantWidget .ai-submit,
    #aiAssistantWidget .ai-suggestion-btn,
    #aiAssistantWidget .ai-back-btn { transition: none; }
}