/**
 * Режим встраивания: assistant.html?embed=1 (iframe из Nucleus и т.п.)
 * — только колонка чата, без навигации и сферы; высота на весь viewport iframe.
 */

/* Пока висит preloader-active, base.css глушит .container (pointer-events: none) — не кликаются теги/инпут/кнопки чата. */
html.assistant-embed body.preloader-active .container {
    opacity: 1 !important;
    pointer-events: auto !important;
}

html.assistant-embed,
body.assistant-embed {
    height: 100%;
    overflow: hidden;
}

body.assistant-embed #loadingAnimation {
    display: none !important;
}

body.assistant-embed .left-nav,
body.assistant-embed .center-content,
body.assistant-embed .mobile-menu-header,
body.assistant-embed .mobile-chat-wrapper,
body.assistant-embed .mobile-chat-toggle,
body.assistant-embed .chat-minimized,
body.assistant-embed #chatToggle,
body.assistant-embed #chatFullscreenToggle {
    display: none !important;
}

body.assistant-embed .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    /* Та же формула скругления, что у островов Nucleus Finance — для cqw внутри iframe */
    container-type: inline-size;
    container-name: assistant-embed-viewport;
}

body.assistant-embed #chatWrapper {
    /* chat.css @media (max-width:800px) задаёт .chat-wrapper { display:none !important } — без этого во iframe пустой тёмный блок */
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    align-self: stretch !important;
    /* Без внутреннего зазора; скругление на всю колонку (панель + зона инпута — соседи в DOM) */
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: clamp(30px, 4.25cqw, 44px) !important;
    overflow: hidden !important;
}

body.assistant-embed #chatWrapper.minimized {
    width: 100% !important;
    overflow: visible !important;
}

body.assistant-embed #chatWrapper .chat-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    /* Скругление даёт #chatWrapper — иначе низ .chat-input-area (сосед) остаётся прямым */
    border-radius: 0 !important;
    overflow: visible !important;
}

/* Подложка под инпут: внешний контур режет #chatWrapper; убираем меньший радиус, чтобы не было ступени */
body.assistant-embed .chat-input-area {
    border-radius: 0 !important;
}

body.assistant-embed .chat-messages {
    /* В узком iframe меньше «воздуха» под инпут — остаётся padding-bottom у базового chat.css */
    padding-bottom: 160px;
}

/* Группы тем в потоке: sticky перекрывал пузыри при скролле (дашборд / iframe). */
body.assistant-embed .chat-messages > .topics-container {
    position: relative;
    z-index: auto;
    margin: 0 0 12px;
    padding: 10px;
    border-radius: 14px;
    border: none;
    background: color-mix(in srgb, var(--color-bg-chat) 88%, #000 12%);
    box-shadow: none;
}

/* Жёсткий лимит готовых вопросов в embed-чате: максимум 6 */
body.assistant-embed .chat-messages .topics-container .topic-section:nth-of-type(n + 3) {
    display: none !important;
}

body.assistant-embed .chat-messages .topics-container .topic-section .topic-suggestion-btn:nth-of-type(n + 4) {
    display: none !important;
}

body.light-theme.assistant-embed .chat-messages > .topics-container {
    border: none;
    background: color-mix(in srgb, var(--color-bg-chat) 95%, #000 5%);
    box-shadow: none;
}

/* Embed: используем тот же glass-стиль поля, как в основном чате */
body.assistant-embed .chat-input-wrapper,
body.assistant-embed .chat-input-wrapper:focus-within {
    outline: none !important;
    box-shadow: none !important;
}

/* Embed parity with landing controls (+ / mic / send) */
body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-add-btn,
body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-micro-btn {
    width: 2.375rem !important;
    height: 2.375rem !important;
    min-width: 2.375rem !important;
    min-height: 2.375rem !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    border: 0 !important;
    background: color-mix(in srgb, var(--color-text-primary) 9%, transparent) !important;
    color: color-mix(in srgb, var(--color-text-primary) 72%, transparent) !important;
    opacity: 1 !important;
}

body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-add-btn:hover,
body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-micro-btn:hover {
    background: color-mix(in srgb, var(--color-text-primary) 14%, transparent) !important;
    color: color-mix(in srgb, var(--color-text-primary) 88%, transparent) !important;
}

body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-add-icon,
body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-micro-icon,
body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-add-btn > svg,
body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-micro-btn > svg {
    width: 18px !important;
    height: 18px !important;
}

body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-micro-btn > svg {
    width: 17px !important;
    height: 17px !important;
}

body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-primary-wrapper {
    width: 2.5rem !important;
    height: 2.5rem !important;
}

body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-gradient {
    display: none !important;
}

body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-primary-btn {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    border-radius: 9999px !important;
    border: 0 !important;
    background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-bg-primary) 12%) !important;
    color: var(--color-bg-primary) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 12%, transparent) !important;
}

body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-primary-btn:disabled {
    opacity: 0.35 !important;
}

/* Embed: landing-toolbar — счётчик в одной группе с mic + Send */
body.assistant-embed #chatInputArea .chat-input-block--landing-toolbar .chat-input-toolbar-middle .message-limit-indicator {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
}

body.assistant-embed #chatInputArea .chat-input-block--landing-toolbar .chat-input-toolbar-send .chat-input-primary-wrapper {
    margin-left: 0.15rem !important;
}

body.assistant-embed #chatInputArea .chat-input-block--landing-toolbar .chat-input-toolbar-right .message-limit-indicator {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
}

body.assistant-embed #chatInputArea .chat-input-block--landing-toolbar .chat-input-toolbar-right .chat-input-primary-wrapper {
    margin-left: 0.15rem !important;
}

body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-primary-icon svg path,
body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-primary-icon-svg path,
body.assistant-embed #chatInputArea .chat-input-wrapper .chat-input-primary-btn > svg path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.25 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* chat.css @media (max-width:800px) скрывает .chat-wrapper — дублируем с максимальной специфичностью для iframe. */
@media (max-width: 800px) {
    html.assistant-embed body #chatWrapper.chat-wrapper {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}