/* ============================================================
   Slovo — AI Talk (frontend, задача 9.1, подзадача 4/5)
   Чат-интерфейс разговора с ИИ. Классы .slovo-aitalk-*.
   Все селекторы — с префиксом body.slovo-lms-body (см. .clinerules),
   стили — с !important.
   Блоки: шапка/кнопки, лог, пузыри, индикатор «печатает…»,
   завершение/рестарт, футер (ввод), статус/ошибка, системная
   реплика, disabled-кнопки, :fullscreen, адаптив.
   ============================================================ */

body.slovo-lms-body .slovo-aitalk-app {
    display: flex !important;
    flex-direction: column !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    font-family: inherit !important;
}

body.slovo-lms-body .slovo-aitalk-app.active {
    border-color: #1976d2 !important;
    box-shadow: 0 2px 18px rgba(25, 118, 210, 0.18) !important;
}

/* Header */
body.slovo-lms-body .slovo-aitalk-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #1976d2, #0d47a1) !important;
    color: #fff !important;
}

body.slovo-lms-body .slovo-aitalk-head-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body.slovo-lms-body .slovo-aitalk-avatar {
    font-size: 26px !important;
    line-height: 1 !important;
}

body.slovo-lms-body .slovo-aitalk-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.slovo-lms-body .slovo-aitalk-sub {
    font-size: 12px !important;
    opacity: 0.85 !important;
}

body.slovo-lms-body .slovo-aitalk-actions {
    display: flex !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

body.slovo-lms-body .slovo-aitalk-btn {
    background: rgba(255, 255, 255, 0.18) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

body.slovo-lms-body .slovo-aitalk-btn:hover { background: rgba(255, 255, 255, 0.32) !important; }
body.slovo-lms-body .slovo-aitalk-btn.is-on { background: rgba(255, 255, 255, 0.42) !important; }

/* Лог диалога */
body.slovo-lms-body .slovo-aitalk-log {
    flex: 1 1 auto !important;
    min-height: 320px !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    padding: 18px 16px !important;
    background: #f7f9fc !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.slovo-lms-body .slovo-aitalk-msg {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    max-width: 100% !important;
}

body.slovo-lms-body .slovo-aitalk-msg-user { justify-content: flex-end !important; }
body.slovo-lms-body .slovo-aitalk-msg-ai { justify-content: flex-start !important; }

body.slovo-lms-body .slovo-aitalk-bubble {
    max-width: 78% !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

body.slovo-lms-body .slovo-aitalk-msg-user .slovo-aitalk-bubble {
    background: #1976d2 !important;
    color: #fff !important;
    border-bottom-right-radius: 4px !important;
}

body.slovo-lms-body .slovo-aitalk-msg-ai .slovo-aitalk-bubble {
    background: #fff !important;
    color: #222 !important;
    border: 1px solid #e4e9f0 !important;
    border-bottom-left-radius: 4px !important;
}

body.slovo-lms-body .slovo-aitalk-speak {
    background: none !important;
    border: none !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 2px 4px !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s !important;
}

body.slovo-lms-body .slovo-aitalk-speak:hover { opacity: 1 !important; }

/* Индикатор «печатает…» */
body.slovo-lms-body .slovo-aitalk-typing .slovo-aitalk-bubble {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #90a4ae !important;
    font-size: 13px !important;
}

body.slovo-lms-body .slovo-aitalk-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #90a4ae !important;
    display: inline-block !important;
    animation: slovo-aitalk-blink 1.2s infinite both !important;
}

body.slovo-lms-body .slovo-aitalk-dot:nth-child(2) { animation-delay: 0.2s !important; }
body.slovo-lms-body .slovo-aitalk-dot:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes slovo-aitalk-blink {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

/* Завершение диалога */
body.slovo-lms-body .slovo-aitalk-finished {
    text-align: center !important;
    padding: 14px !important;
    background: #e8f5e9 !important;
    border-radius: 10px !important;
    color: #2e7d32 !important;
}

body.slovo-lms-body .slovo-aitalk-finished-text {
    font-size: 15px !important;
    margin-bottom: 10px !important;
}

body.slovo-lms-body .slovo-aitalk-restart {
    background: #2e7d32 !important;
    color: #fff !important;
}

/* Footer: ввод */
body.slovo-lms-body .slovo-aitalk-footer {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border-top: 1px solid #e4e9f0 !important;
    background: #fff !important;
}

body.slovo-lms-body .slovo-aitalk-input {
    flex: 1 1 auto !important;
    resize: none !important;
    min-height: 42px !important;
    max-height: 140px !important;
    padding: 10px 12px !important;
    border: 1px solid #cfd8dc !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
}

body.slovo-lms-body .slovo-aitalk-input:focus {
    outline: none !important;
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15) !important;
}

body.slovo-lms-body .slovo-aitalk-send,
body.slovo-lms-body .slovo-aitalk-mic {
    flex-shrink: 0 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 11px 16px !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: background 0.2s, opacity 0.2s !important;
}

body.slovo-lms-body .slovo-aitalk-send {
    background: #1976d2 !important;
    color: #fff !important;
}

body.slovo-lms-body .slovo-aitalk-send:hover { background: #0d47a1 !important; }

body.slovo-lms-body .slovo-aitalk-mic {
    background: #eceff1 !important;
    font-size: 18px !important;
    padding: 9px 13px !important;
}

body.slovo-lms-body .slovo-aitalk-mic:hover { background: #cfd8dc !important; }
body.slovo-lms-body .slovo-aitalk-mic.is-recording { background: #e53935 !important; color: #fff !important; }
body.slovo-lms-body .slovo-aitalk-mic[hidden] { display: none !important; }

/* Состояние disabled-кнопок (на время запроса) */
body.slovo-lms-body .slovo-aitalk-send:disabled,
body.slovo-lms-body .slovo-aitalk-mic:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

body.slovo-lms-body .slovo-aitalk-send:disabled { background: #90a4ae !important; }

/* Статусная строка */
body.slovo-lms-body .slovo-aitalk-status {
    padding: 6px 16px !important;
    font-size: 13px !important;
    color: #607d8b !important;
    background: #f7f9fc !important;
}

body.slovo-lms-body .slovo-aitalk-status:empty { display: none !important; }

/* Индикатор ошибки */
body.slovo-lms-body .slovo-aitalk-status.is-error {
    color: #c62828 !important;
    background: #fdecea !important;
    border-top: 1px solid #f5c6cb !important;
}

/* Системная реплика (например, ошибка сети) */
body.slovo-lms-body .slovo-aitalk-msg-system { justify-content: center !important; }

body.slovo-lms-body .slovo-aitalk-msg-system .slovo-aitalk-bubble {
    max-width: 100% !important;
    background: #fdecea !important;
    color: #b71c1c !important;
    border: 1px solid #f5c6cb !important;
    font-size: 13px !important;
    text-align: center !important;
}

/* Пустые состояния / служебные сообщения */
body.slovo-lms-body .slovo-aitalk-empty {
    padding: 16px !important;
    background: #fff3cd !important;
    border: 1px solid #ffe082 !important;
    border-radius: 8px !important;
    color: #7a5b00 !important;
}

/* Полный экран */
body.slovo-lms-body .slovo-aitalk-app:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #f9f9f9 !important;
}

body.slovo-lms-body .slovo-aitalk-app:fullscreen .slovo-aitalk-log {
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    background: #f9f9f9 !important;
}

/* Адаптив для узких экранов */
@media (max-width: 560px) {
    html body.slovo-lms-body .slovo-aitalk-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    html body.slovo-lms-body .slovo-aitalk-bubble {
        max-width: 88% !important;
        font-size: 14px !important;
    }
    html body.slovo-lms-body .slovo-aitalk-log {
        padding: 12px !important;
        min-height: 240px !important;
    }
    html body.slovo-lms-body .slovo-aitalk-footer {
        gap: 6px !important;
        padding: 10px 12px !important;
    }
    html body.slovo-lms-body .slovo-aitalk-send,
    html body.slovo-lms-body .slovo-aitalk-mic {
        padding: 10px 12px !important;
    }
}

/* ============================================================
   Задачи 16.26–16.34: кликабельные слова → перевод → словарь.
   Стили без префикса body.slovo-lms-body: попап рендерится в <body>
   и AI Talk может использоваться вне LMS-контейнера.
   ============================================================ */

.slovo-aitalk-word {
    cursor: pointer !important;
    border-bottom: 1px dotted rgba(25, 118, 210, 0.55) !important;
    transition: background 0.15s ease !important;
    border-radius: 3px !important;
}
.slovo-aitalk-word:hover {
    background: rgba(25, 118, 210, 0.15) !important;
}

.slovo-aitalk-wordpop {
    position: absolute !important;
    z-index: 2147483000 !important;
    min-width: 200px !important;
    max-width: 300px !important;
    background: #ffffff !important;
    color: #212121 !important;
    border: 1px solid #cfd8dc !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    box-sizing: border-box !important;
    text-align: left !important;
}
.slovo-aitalk-wordpop[hidden] { display: none !important; }

.slovo-aitalk-wordpop-word {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #0d47a1 !important;
    word-break: break-word !important;
}
.slovo-aitalk-wordpop-ipa {
    color: #607d8b !important;
    font-size: 13px !important;
    font-style: italic !important;
    margin-top: 2px !important;
}
.slovo-aitalk-wordpop-def {
    margin-top: 6px !important;
    word-break: break-word !important;
}
.slovo-aitalk-wordpop-actions {
    display: flex !important;
    gap: 6px !important;
    margin-top: 10px !important;
    align-items: center !important;
}
.slovo-aitalk-wordpop-add {
    flex: 1 1 auto !important;
    cursor: pointer !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 7px 10px !important;
    background: #1976d2 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.slovo-aitalk-wordpop-add:hover { background: #0d47a1 !important; }
.slovo-aitalk-wordpop-add:disabled { opacity: 0.6 !important; cursor: default !important; }
.slovo-aitalk-wordpop-speak {
    cursor: pointer !important;
    border: 1px solid #cfd8dc !important;
    border-radius: 6px !important;
    padding: 6px 9px !important;
    background: #f5f7fa !important;
    font-size: 14px !important;
}
.slovo-aitalk-wordpop-speak:hover { background: #e3eaf2 !important; }


/* Ограничение высоты чата и внутренний скролл */
.slovo-aitalk-log {
    max-height: 400px; /* Стандартная высота, можно менять */
    overflow-y: auto;
    scroll-behavior: smooth;
    padding-right: 8px; /* Место под скроллбар */
}

/* Красивый тонкий скроллбар */
.slovo-aitalk-log::-webkit-scrollbar {
    width: 6px;
}
.slovo-aitalk-log::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}
.slovo-aitalk-log::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}
.slovo-aitalk-log::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.slovo-aitalk-toggle-auto.is-active svg,
.slovo-aitalk-toggle-auto.is-active .icon {
    fill: #fff !important;
    stroke: #fff !important;
}

/* Подсветка активной кнопки автоозвучки */
.slovo-aitalk-toggle-auto.is-active {
    background-color: #007cba !important;
    color: #fff !important;
    border-color: #007cba !important;
    box-shadow: 0 0 0 2px rgba(0,124,186,0.2);
}
.slovo-aitalk-toggle-auto.is-active:hover {
    background-color: #006ba1 !important;
}