/* ═══ AI assistent vidceti — 2026-09-20 redizayn ════════════════════════════
   Sahib: «daha modern, daha yaxşı formada, təhlükəsiz». Yalnız design-tokens
   rəngləri; inline style yox (CSP). Markup: templates/partials/_ai_assistant.html,
   JS: static/js/ai_assistant.js (ID-lər müqavilədir).
   Bölmələr: üzən düymə · tooltip · panel (başlıq, mesajlar, lövhə, yazma). */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Üzən düymə ─────────────────────────────────────────────────────────── */
.ai-bot-btn {
    position: fixed; right: 22px; bottom: 22px; z-index: 1040;
    width: 56px; height: 56px; border-radius: 18px; border: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ems-primary-600); color: var(--ems-neutral-0);
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.35);
    cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.ai-bot-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37, 99, 235, 0.4); }
.ai-bot-btn:focus-visible { outline: 3px solid var(--ems-primary-300); outline-offset: 3px; }
.ai-bot-btn--hidden { opacity: 0; pointer-events: none; transform: scale(0.8); }
.ai-bot-btn__icon { width: 34px; height: 34px; overflow: visible; }
/* Əl ~14 s-də bir yellənir (sahib: «arada əl eləsin ki, görsünlər orda var»);
   gözlər arada qırpır. reduced-motion-da hər ikisi söndürülür (aşağıda). */
.ai-bot-btn__hand { transform-origin: 44px 32px; animation: ai-hand-wave 14s ease-in-out infinite; }
.ai-bot-btn__eye { transform-origin: center; animation: ai-blink-eyes 6s ease-in-out infinite; }
@keyframes ai-hand-wave {
    0%, 78%, 100% { transform: rotate(0); }
    82% { transform: rotate(-22deg); }
    86% { transform: rotate(18deg); }
    90% { transform: rotate(-22deg); }
    94% { transform: rotate(14deg); }
    97% { transform: rotate(0); }
}
@keyframes ai-blink-eyes { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.15); } }
.ai-bot-btn__screen, .ai-avatar-screen { fill: var(--ems-navy-900); }
.ai-bot-btn__pulse {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); opacity: 0;
}
.ai-bot-btn--wave .ai-bot-btn__pulse { animation: ai-pulse 1.6s ease-out 1; }
.ai-bot-btn--wave .ai-bot-btn__icon { animation: ai-nod 1.6s ease-in-out 1; }
@keyframes ai-pulse { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); } 100% { opacity: 0; box-shadow: 0 0 0 22px rgba(37, 99, 235, 0); } }
@keyframes ai-nod { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

/* Yapışqan alt paneli olan səhifələrdə (workbench «Göndər») düymə yuxarı qalxır. */
body:has(.sticky-footer) .ai-bot-btn { bottom: 86px; }
body:has(.sticky-footer) .ai-bot-tooltip { bottom: 94px; }

/* ── Tooltip ─────────────────────────────────────────────────────────────── */
.ai-bot-tooltip {
    position: fixed; right: 88px; bottom: 30px; z-index: 1039;
    display: flex; flex-direction: column; gap: 2px; max-width: 240px;
    padding: 10px 14px; border-radius: var(--ems-r-xl);
    background: var(--ems-neutral-900); color: var(--ems-neutral-0);
    font-size: var(--ems-fs-base); box-shadow: var(--ems-sh-raised);
    opacity: 0; transform: translateX(8px); pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ai-bot-tooltip::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg); background: inherit; border-radius: 2px; }
.ai-bot-tooltip b { font-weight: 800; }
.ai-bot-tooltip-sub { font-size: var(--ems-fs-sm); color: var(--ems-neutral-300); font-weight: 500; }
.ai-bot-tooltip--visible { opacity: 1; transform: translateX(0); }

/* ── Panel ───────────────────────────────────────────────────────────────── */
.ai-chat-panel {
    position: fixed; right: 22px; bottom: 22px; z-index: 1041;
    width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 48px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--ems-bg); border: 1px solid var(--ems-border); border-radius: 20px;
    box-shadow: var(--ems-sh-dialog);
    opacity: 0; transform: translateY(12px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.ai-chat-panel[hidden] { display: none; }
.ai-chat-panel--open { opacity: 1; transform: none; }

.ai-chat-header {
    display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px;
    border-bottom: 1px solid var(--ems-border); background: var(--ems-bg);
}
.ai-chat-org-logo {
    position: relative; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; overflow: hidden;
    background: var(--ems-primary-50); display: inline-flex; align-items: center; justify-content: center;
}
.ai-chat-org-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-chat-org-initials { display: none; font-size: var(--ems-fs-sm); font-weight: 800; color: var(--ems-primary-700); letter-spacing: 0.04em; }
.ai-chat-org-logo--fallback img { display: none; }
.ai-chat-org-logo--fallback .ai-chat-org-initials { display: inline; }
.ai-chat-header-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.ai-chat-header-title { margin: 0; font-size: var(--ems-fs-lg); font-weight: 800; color: var(--ems-text); line-height: 1.2; }
.ai-chat-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ems-fs-xs); font-weight: 700; color: var(--ems-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ai-chat-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ems-neutral-300); }
.ai-chat-status[data-state="online"] .ai-chat-status__dot { background: var(--ems-success); box-shadow: 0 0 0 3px var(--ems-success-100); }
.ai-chat-status[data-state="online"] { color: var(--ems-success-700); }
.ai-chat-status[data-state="offline"] .ai-chat-status__dot { background: var(--ems-warning-500); box-shadow: 0 0 0 3px var(--ems-warning-100); }
.ai-chat-status[data-state="offline"] { color: var(--ems-warning-800); }
.ai-chat-limit-badge {
    flex: 0 0 auto; padding: 4px 9px; border-radius: var(--ems-r-pill);
    background: var(--ems-neutral-100); color: var(--ems-neutral-600);
    font-size: var(--ems-fs-2xs); font-weight: 700; white-space: nowrap;
}
.ai-chat-limit-badge[hidden] { display: none; }
.ai-chat-close-btn {
    flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: var(--ems-r-md);
    background: var(--ems-neutral-100); color: var(--ems-neutral-600); cursor: pointer; font-size: var(--ems-fs-md);
}
.ai-chat-close-btn:hover { background: var(--ems-danger-100); color: var(--ems-danger-700); }
.ai-chat-close-btn:focus-visible { outline: 2px solid var(--ems-primary-300); outline-offset: 2px; }

/* ── Mesajlar ────────────────────────────────────────────────────────────── */
.ai-chat-messages {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 14px 6px;
    display: flex; flex-direction: column; gap: 10px; background: var(--ems-bg-subtle);
    scroll-behavior: smooth;
}
.ai-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.ai-msg--user { justify-content: flex-end; }
.ai-msg-avatar {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px;
    background: var(--ems-primary-600); color: var(--ems-neutral-0);
    display: inline-flex; align-items: center; justify-content: center;
}
.ai-msg-avatar svg { width: 18px; height: 18px; }
.ai-msg-bubble {
    max-width: 82%; padding: 9px 12px; border-radius: 14px;
    font-size: var(--ems-fs-md); line-height: 1.5; color: var(--ems-text);
    background: var(--ems-bg); border: 1px solid var(--ems-border);
    border-bottom-left-radius: 4px; white-space: pre-wrap; word-break: break-word;
}
.ai-msg--user .ai-msg-bubble {
    background: var(--ems-primary-600); color: var(--ems-neutral-0); border-color: var(--ems-primary-600);
    border-bottom-left-radius: 14px; border-bottom-right-radius: 4px;
}
.ai-msg-bubble--rich { white-space: normal; }
.ai-msg-bubble--rich p { margin: 0 0 6px; }
.ai-msg-bubble--rich p:last-child { margin-bottom: 0; }
.ai-msg-bubble--rich ul { margin: 4px 0 6px; padding-left: 18px; }
.ai-msg-bubble--rich code { font-family: var(--ems-ff-mono); font-size: 0.92em; background: var(--ems-neutral-100); padding: 1px 5px; border-radius: 5px; }
.ai-msg-link { color: var(--ems-primary-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ai-msg-typing .ai-msg-bubble { display: inline-flex; gap: 5px; padding: 12px 14px; }
.ai-typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ems-neutral-400); animation: ai-blink 1.2s infinite ease-in-out; }
.ai-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.ai-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ── Lövhə (limit / tezliklə) ───────────────────────────────────────────── */
.ai-chat-notice {
    display: flex; align-items: flex-start; gap: 8px; margin: 0 12px 10px; padding: 10px 12px;
    border-radius: var(--ems-r-xl); background: var(--ems-warning-bg); border: 1px solid var(--ems-warning-bd);
    color: var(--ems-warning-800); font-size: var(--ems-fs-base); font-weight: 600; line-height: 1.45;
}
.ai-chat-notice[hidden] { display: none; }
.ai-chat-notice i { margin-top: 2px; color: var(--ems-warning-600); }

/* ── Yazma sahəsi ────────────────────────────────────────────────────────── */
.ai-chat-input-wrap {
    display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px;
    border-top: 1px solid var(--ems-border); background: var(--ems-bg);
}
.ai-chat-input-wrap[hidden] { display: none; }
.ai-chat-input {
    flex: 1 1 auto; min-height: 40px; max-height: 120px; resize: none; padding: 9px 12px;
    border: 1px solid var(--ems-neutral-300); border-radius: var(--ems-r-lg);
    background: var(--ems-bg); color: var(--ems-text); font: inherit; font-size: var(--ems-fs-md); line-height: 1.4;
}
.ai-chat-input:focus { outline: none; border-color: var(--ems-neutral-500); box-shadow: none; }
.ai-chat-input::placeholder { color: var(--ems-neutral-400); }
.ai-chat-send-btn {
    flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: var(--ems-r-lg);
    background: var(--ems-primary-600); color: var(--ems-neutral-0); cursor: pointer; font-size: var(--ems-fs-md);
}
.ai-chat-send-btn:hover:not(:disabled) { background: var(--ems-primary-700); }
.ai-chat-send-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ai-chat-send-btn:focus-visible { outline: 2px solid var(--ems-primary-300); outline-offset: 2px; }
.ai-chat-footnote { margin: 0; padding: 4px 14px 10px; font-size: var(--ems-fs-2xs); color: var(--ems-neutral-400); font-weight: 500; line-height: 1.4; }

@media (max-width: 480px) {
    .ai-chat-panel { right: 0; bottom: 0; width: 100vw; height: 100vh; border-radius: 0; }
    .ai-bot-btn { right: 16px; bottom: 16px; }
    .ai-bot-tooltip { right: 82px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-bot-btn, .ai-chat-panel, .ai-bot-tooltip { transition: none; }
    .ai-bot-btn--wave .ai-bot-btn__pulse, .ai-bot-btn--wave .ai-bot-btn__icon, .ai-typing-dot,
    .ai-bot-btn__hand, .ai-bot-btn__eye { animation: none; }
}