/* ==========================================================================
   AI Magis Specific Styles - ai_magis.css
   ========================================================================== */


/* CSS @property для анимации фона */
@property --g2-1-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 87.96875%;
}

@property --g2-1-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 91.1328125%;
}

@property --g2-2-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 13.398437500000002%;
}

@property --g2-2-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 82.734375%;
}

:root {
    --g2-1-x-position: 87.96875%;
    --g2-1-y-position: 91.1328125%;
    --g2-2-x-position: 13.398437500000002%;
    --g2-2-y-position: 82.734375%;
}

@keyframes g-2 {
    50% {
        --g2-1-x-position: 15%;
        --g2-1-y-position: 15%;
        --g2-2-x-position: 61.21093749999999%;
        --g2-2-y-position: 13.750000000000002%;
    }
}

body.bg-settled::before,
body.bg-settled::after {
    transition: none !important;
}

body.bg-settled .header-wrapper,
body.bg-settled .header_logo,
body.bg-settled .header_text,
body.bg-settled .header_nav,
body.bg-settled .nav,
body.bg-settled .nav_link {
    transition: none !important;
    animation: none !important;
}

/* form-wrapper (плавающая форма снизу) */
body.bg-settled .form-wrapper {
    transition: none !important;
}

/* Кнопки и prompt-pills */


/* Overlay и intro-content */
body.bg-settled .intro-content {
    transition: none !important;
    animation: none !important;
}
/* Сообщения из истории — без прыжков */
.chat-message.no-anim {
    animation: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.magis {
    font-weight: 470;
    font-family: "Bricolage Grotesque", sans-serif;
    letter-spacing: 0.02em;

    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.24); 
    text-shadow: 
        1px 1px rgba(255, 215, 140, 0.288);   


    background-image: 
        radial-gradient(
            circle at 50% 0%, 
            rgba(255, 255, 255, 0.103) 0%, 
            rgba(6, 0, 15, 0.301) 45%   
        ),
        
        linear-gradient(
            180deg, 
            #090014, 
            rgba(0, 0, 0, 0.658) 25%, 
            rgba(211, 192, 255, 0.562) 45%, 
            rgba(255, 255, 255, 0.712) 49%, 
            rgba(255, 255, 255, 0.89) 50%, 
            rgba(255, 255, 255, 0.712) 51%, 
            rgba(206, 185, 255, 0.616) 55%, 
            rgba(255, 255, 255, 0.075) 60%,
            #6915578e 70%,
            #4a0e3d8e
        ),

        linear-gradient(100deg, #0842ff, #8f2effda 34%, #dd59c7ee 68%, #ff2e54b9);
        
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

}

/* --- Scrollbar Styles --- */

.container-class::-webkit-scrollbar {
    display: none;
}

.container-class {
    scrollbar-width: none; 
}

.container-class {
    -ms-overflow-style: none; 
}
.simplebar-track.simplebar-vertical {
    z-index: 9999 !important;
}

/* --- SimpleBar ---*/

.simplebar-track {
    background-color: rgba(255, 255, 255, 0.03) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    width: 10px !important;
}

[data-simplebar] {
    will-change: mask-image; 
    backface-visibility: hidden;
}

[data-simplebar]:hover .simplebar-track,
[data-simplebar].simplebar-dragging .simplebar-track {
    opacity: 1 !important;
}

.simplebar-scrollbar::before {
    background-color: #ffffff67 !important;
    border-radius: 18px !important;
    border: 1px solid #dfdfdf54 !important;
    opacity: 0 !important;
    transition: background-color 0.3s ease, opacity 0.4s ease !important;
}

.simplebar-scrollbar.simplebar-visible::before {
    opacity: 1 !important;
}

.smart-scroll-mask {
    transition: -webkit-mask-image 0.3s ease, mask-image 0.3s ease;

    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 150px, black calc(100% - 150px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0px, black 150px, black calc(100% - 150px), transparent 100%);
}

.smart-scroll-mask.at-top {
    -webkit-mask-image: linear-gradient(to bottom, black 0px, black 150px, black calc(100% - 150px), transparent 100%);
    mask-image: linear-gradient(to bottom, black 0px, black 150px, black calc(100% - 150px), transparent 100%);
}

.smart-scroll-mask.at-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 150px, black calc(100% - 150px), black 100%);
    mask-image: linear-gradient(to bottom, transparent 0px, black 150px, black calc(100% - 150px), black 100%);
}

.smart-scroll-mask.at-top.at-bottom {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.simplebar-track {
    background-color: rgba(255, 255, 255, 0) !important; 
    opacity: 0 !important;
    transition: opacity 0.5s ease !important; 
}

[data-simplebar]:hover .simplebar-track,
[data-simplebar].simplebar-dragging .simplebar-track {
    opacity: 1 !important;
}

.simplebar-scrollbar::before {
    background-color: #ffffff67 !important;
    border-radius: 18px !important;
    border: 1px solid #dfdfdf54 !important;
    opacity: 0 !important; 
    transition: background-color 0.3s ease, opacity 0.5s ease !important; 
}

.simplebar-scrollbar.simplebar-visible::before {
    opacity: 1 !important;
}

.simplebar-scrollbar {
    pointer-events: auto !important; 
}

.simplebar-scrollbar:hover::before,
[data-simplebar].simplebar-dragging .simplebar-scrollbar::before {
    background-color: #ffffff73 !important; 
    opacity: 1 !important; 
}

/* --- Search Cancel Button --- */

#universal-request::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    
    margin: 0;
    padding: 0;
    
    width: 25px;
    height: 25px;
    border-radius: 50%;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.3) 
        ;
    backdrop-filter: blur(12px) ;
    -webkit-backdrop-filter: blur(12px) ;
    
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.14);


    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252525cb' stroke-width='2.5' stroke-linecap='round'><line x1='7' y1='7' x2='17' y2='17'/><line x1='7' y1='17' x2='17' y2='7'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px; 
    
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#universal-request::-webkit-search-cancel-button:hover {
    background-color: rgba(255, 255, 255, 0.3); 
    border-color: rgba(206, 206, 206, 0.6);      
    transform: rotate(90deg); 
}

/* --- Base Styles --- */

body {  
    font-family: 'Inter Tight', sans-serif;
    color: #333;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100dvh; 
    position: relative;
    background: #000000 !important;
}

html:not(.chat-active-html) {
    overflow: hidden;
    height: 100%;
}

body:not(.chat-active) {
    overflow: hidden;
    height: 100dvh;
}

/* Настраиваем плавный переход для обоих слоев фона */
body::before,
body::after {
    content: "";
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; 
    z-index: -1;
    pointer-events: none;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1); /* Идеальная кривая для плавности */
}

body.bg-settled::before,
body.bg-settled::after {
    transition: none !important;
}

/* Стартовый фон */
body::before {
    background: radial-gradient(circle at 50% 43%, #4b2a35 0%, #24141a 15%, #000000 40%);
    opacity: 1;
}

/* Фон режима Magis Chat (скрыт по умолчанию) */
body::after {
    background-color: #4a2d52;
    background-image: 
        radial-gradient(150% 150% at 10% 25%, #e94a87af 0%, rgba(238, 69, 134, 0) 100%),
        radial-gradient(150% 150% at var(--g2-1-x-position) var(--g2-1-y-position), #1a9cd8 -32%, rgba(37, 113, 148, 0) 100%),
        radial-gradient(150% 150% at var(--g2-2-x-position) var(--g2-2-y-position), #744eff 0%, rgba(99, 66, 218, 0) 100%);
    opacity: 0;
    animation: g-2 10s ease-in-out infinite;
}

/* Переключаем прозрачность при появлении класса chat-active */
body.chat-active::before {
    opacity: 0;
}

body.chat-active::after {
    opacity: 1;
}

/* Ускоренная анимация фона во время раздумий ИИ */
body.ai-thinking::after {
    animation-duration: 1.5s !important;
    animation-timing-function: linear !important;
}

/* Плавный возврат скорости анимации фона после окончания thinking */
body.ai-thinking-out::after {
    animation-duration: 4s !important;
    animation-timing-function: ease-in-out !important;
    transition: animation-duration 1.2s ease !important;
}

/* Шары остаются видимыми во время fade-out фазы */
body.ai-thinking-out .think-orb {
    opacity: 0 !important;
    transition: opacity 1.2s ease !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

/* --- Container --- */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    
}

/* --- Header --- */

.header_logo {
    font-family: 'Kaushan Script', cursive;
    font-size: 36px;
    font-weight: 500;
    text-decoration: none;
    color: #ffffff;
    
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
    transform-origin: center center;
    white-space: nowrap;
    line-height: 1;
    
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
}

.header_text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-top: 5px;
    transition: all 0.4s ease;
    opacity: 1;
}

.nav_link {
    display: inline-block;
    position: relative;
    font-size: 13px;
    font-weight: 600;
    color: #e7e7e7;
    text-decoration: none;
    transition: margin 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
    padding: 0 15px;
    white-space: nowrap;
}

.nav_link:hover {
    color: #ffffff;
}

body.chat-active .header_logo  {
    color: #212529;
    font-weight: 700;
}
body.chat-active .nav_link  {
    color: #212529;
}

body.chat-active .nav_link:hover {
    color: #000000;
}

/* =========================================================
   DESKTOP: АНИМАЦИЯ И СТРУКТУРА (Логика Aurum & Scent)
   ========================================================= */
.header-wrapper {
    position: fixed;
    top: var(--topbar-offset); 
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 1000;
    padding-top: 20px;
    padding-bottom: 10px; 
    
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); 
    border-bottom: 1px solid transparent; 
}

@media (min-width: 1025px) {
    .header-wrapper {
        height: 120px; 
        display: flex;
        align-items: center; 
        justify-content: center;

        transform: translate3d(0, 0, 0); 
    }

    .header-wrapper header {
        width: 100%;
        display: flex;
        justify-content: center;
        pointer-events: none;
    }

    .header_nav {
        position: absolute;
        transform: translate(-50%, -50%); 
        left: 50%;
        top: 55px; 
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 20;
        transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        will-change: top, transform; 
    }

    /* Меню внизу */
    .nav {
        width: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateY(45px); 
        transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: auto;
    }

    /* --- СОСТОЯНИЕ CHAT-ACTIVE (бывший SCROLLED) --- */

    body.chat-active .header-wrapper {
        height: 40px;
        top: calc(var(--topbar-offset, 0px) + 10px);
        left: 10px;
        width: calc(100% - 20px);
        border-radius: 12px;
        padding-top: 0;
        padding-bottom: 0;
        background-color: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.055);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 4px 0px 20px rgba(0, 0, 0, 0.15);
    }

    body.chat-active .header-wrapper .header_nav {
        top: 50%;
    }

    body.chat-active .header-wrapper .header_logo {
        transform: scale(0.7);
    }

    body.chat-active .header-wrapper .header_text {
        opacity: 0;
        font-size: 0;
        margin: 0;
        pointer-events: none;
    }

    body.chat-active .header-wrapper .nav {
        transform: translateY(0);
    }

    body.chat-active .header-wrapper .nav_link:nth-child(2) {
        margin-right: 140px;
    }

    body.chat-active .header-wrapper .nav_link:nth-child(3) {
        margin-left: 140px;
    }
}


/* Navbar for phone (Hamburger menu) */
.nav-toggle {
    display: none;
    /* Скрыт по умолчанию на больших экранах */
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 10px;
    z-index: 1100;
}

.nav-toggle__bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav_link.nav-dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.dropdown-arrow {
    font-size: 0.7em;
    /* Маленькая стрелка */
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.nav-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
    /* Переворачиваем стрелку при открытии */
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    z-index: 1001;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.055);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: -10px;
    margin-top: 20px;
}

.nav-dropdown-menu.show {
    display: block;
    /* Показываем при клике */
}

.nav-dropdown-item {
    display: block;
    padding: 10px;
    color: #252525;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    margin: 10px;
    transition: background-color 0.2s ease;
}

.nav-dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #000;
}

.nav-dropdown-item.active {
    background-color: rgba(182, 51, 127, 0.336);
    color: #000;
}

.flash-notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.5s ease;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.flash-notification.show {
    opacity: 1;
}

.flash-notification.success {
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #161616;
    border: 1px solid rgba(255, 255, 255, 0.055);
}

.flash-notification.error {
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #5e2323;
    border: 1px solid rgba(255, 255, 255, 0.055);
}

/* Intro Section */
.intro {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;

    min-height: calc(100dvh - 80px); 
    cursor: default;

    background: radial-gradient(circle at 60% 50%, #4b2a35 0%, #24141a 40%, #000000 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.intro_inner {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
    padding-top: 120px;
    padding-bottom: clamp(60px, 10vw, 100px);
}

/* --- Main Content Layout --- */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}


/* Initial Screen (Centered Content) */
.initial-screen {
    display: none;
}

body.chat-active .intro-content {
    transition: opacity 0.3s ease-out;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.intro-content {
    text-align: center;
    padding: 0 20px;
}

.intro_title {
    font-size: clamp(24px, 16vw, 100px);
    font-weight: 600;
    font-family: 'Inter Tight', sans-serif;
    margin-bottom: 15px;
    color: #fff;
}

.intro_suptitle {
    font-size: clamp(16px, 4vw, 35px);
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.884);
}

/* Chat Screen (Appears after first message) */
.chat-screen {
    padding: 20px 0 180px 0;
    /* Padding для отступа от заголовков и формы внизу */
    display: none;
    /* Скрыт по умолчанию */
    width: 100%;
    padding-top: 150px;
    /* Отступ от заголовков */
    ;
}

body.chat-active .chat-screen {
    display: block;
    /* Show when chat is active */
}

body.chat-active .main-content {
    justify-content: flex-start;
    /* Убираем центрирование, когда чат активен */
}

#chat-history,
#chat-history-pc,
#chat-history-laptop,
#universal-history {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    margin: 15px auto 0 auto;
}

/* Chat Message Bubbles */
/* Улучшенный Fade-in-up для сообщений */
.chat-message {
    padding: 10px 20px;
    cursor: default;
    max-width: 85%;
    white-space: pre-wrap;
    text-align: left;
    line-height: 1.7;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

@keyframes userBubbleIn {
    0%   { opacity: 0; transform: translateY(14px) translateX(6px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0)    translateX(0)   scale(1);    }
}

@keyframes aiBubbleIn {
    0%   { opacity: 0; transform: translateY(16px) scale(0.95); filter: blur(3px); }
    60%  {                                                        filter: blur(0);   }
    100% { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0);   }
}

.user-message:not(.no-anim) {
    animation: userBubbleIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Анимация для пузыря ИИ */
.ai-message:not(.no-anim) {
    animation: aiBubbleIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.chat-message.no-anim {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.chat-message.is-typing {
    display: flex;
    justify-content: center;
    align-items: baseline;
    text-align: center;
}

.user-message {
    background-color: rgba(45, 98, 179, 0.527);
    border: 1px solid rgba(26, 26, 26, 0.041);
    align-self: flex-end;
    border-radius: 18px 0 18px 18px;
}

.ai-message {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.055);
    align-self: flex-start;
    border-radius: 0 18px 18px 18px;
}

/* =======================================================
   СТИЛИ ТОЛЬКО ДЛЯ РЕЖИМА ЧТЕНИЯ (SHARED HISTORY)
   Работают только когда есть класс .shared-history
   ======================================================= */

body[data-is-readonly="true"] .intro-content {
    padding-top: 150px; /* Сдвигаем заголовок ниже хедера */
/* Уменьшаем отступ до самой карточки с историей */
}

.chat-screen.shared-history {
    display: flex;
    justify-content: center;
    padding: 20px;
    padding-bottom: 120px;
    width: 100%;
    margin-top: 50px;
}

.chat-screen.shared-history #universal-history {
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 1100px; 
    width: 100%;
    padding: 35px 40px; 
    margin: 0 auto; 
}

.chat-screen.shared-history .chat-message {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 100%;
    
    /* Убираем анимацию прыжков при загрузке статичной страницы */
    animation: none; 
    transform: translateY(0);
    opacity: 1;
}

.chat-screen.shared-history .container{
    padding: 0px;
}

.chat-screen.shared-history .product-link {
    padding: 10px;
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

/* Делаем отступы для мобильной версии шейринга */
@media (max-width: 768px) {
    .chat-screen.shared-history #universal-history {
        padding: 25px 20px;
    }
}

/*
 * =============================================================================
 *  СТИЛИ ДЛЯ КОНТЕЙНЕРА ОТВЕТОВ LLM (.markdown-content)
 * =============================================================================
 *  Этот CSS решает проблемы с отступами, используя современные
 *  селекторы (:where) для сброса стилей без повышения специфичности.
 */

.markdown-content {
  line-height: 1.6;
  font-size: 16px;
  color: #333;
}

.markdown-content :where(p) {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

.markdown-content :where(ul, ol) {
 
  margin-block-start: 0.5em; 
  margin-block-end: 0.5em;
 
  padding-inline-start: 1.8em; 
}


.markdown-content :where(ul ul, ul ol, ol ul, ol ol) {
  margin-block-start: 0.25em;
  margin-block-end: 0.25em;
}


.markdown-content :where(li) {
  margin-bottom: 0.1em;
}

.markdown-content :where(pre) {
  background-color: #f4f4f4;
  padding: 1em;
  border-radius: 8px;
  overflow-x: auto; 
  font-family: 'Courier New', Courier, monospace;
}

.markdown-content :where(code) {
  font-family: 'Courier New', Courier, monospace;

  background-color: #eee;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

.markdown-content :where(pre code) {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 1em;
}

.markdown-content :where(blockquote) {
  border-inline-start: 4px solid #ccc;
  padding-inline-start: 1em;
  margin-inline-start: 0;
  color: #666;
}

.markdown-content :where(strong) {
  font-weight: bold;
}
.markdown-content :where(em) {
  font-style: italic;
}
.markdown-content :where(del) {
  text-decoration: line-through;
}

/* Form Wrapper and Animation */
.form-wrapper {
    width: 100%;
    border-radius: 18px;
    z-index: 690;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    
    padding: 0;
    margin-bottom: 20px;
}

body.chat-active .form-wrapper {
    position: fixed;
    bottom: 20px;

    left: 0;
    right: 0;

    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

#universal-form {
    position: relative;
    z-index: 100;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: -4px; 
    width: calc(100% + 8px);
    max-width: 808px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.103);
    backdrop-filter: blur(32px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-top: none !important; 
    
    border-radius: 0 0 34px 34px; 
    
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(255, 255, 220, 0.6) !important;
        
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    margin-top: -10px; 
    padding-top: 20px; 
    z-index: 1;  
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s;
}

.autocomplete-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.autocomplete-item {
    padding: 12px 20px;
    color: rgb(255, 255, 255) !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease, padding-left 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Эффект при наведении (Легкий сдвиг текста вправо - ощущается премиально) */
.autocomplete-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: 25px; 
}

.autocomplete-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Тонкий красивый скроллбар для списка */
.autocomplete-dropdown::-webkit-scrollbar {
    width: 4px;
}
.autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 2px;
}

/* Прячем подсказки, когда начинается диалог с ИИ */
body.chat-active .autocomplete-dropdown {
    display: none !important;
}


.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    
    /* Начальное состояние: полностью прозрачный */
    background: rgba(0, 0, 0, 0); 
    
    visibility: hidden;
    pointer-events: none;
    
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    transition: background 0.4s ease, visibility 0.4s ease;
}

/* Активное состояние заднего фона */
.modal-overlay.show {
    visibility: visible;
    pointer-events: auto;
}

.modal-title{
    font-family: 'Inter Tight', sans-serif;
    margin-top: 0;
    color: #171a1d; 
    font-weight: 700;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btnCancel, .btnDanger {
    padding: 10px 24px;
    border-radius: 50px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.btnCancel {
    background: rgba(255, 255, 255, 0.171);
    border: 1px solid rgba(255, 255, 255, 0.185);
    color: #333;
}

.btnDanger {
    background: rgba(187, 47, 47, 0.384);
    border: 1px solid rgba(117, 61, 61, 0.26);
    color: #301717;
}

.btnCancel:hover, .btnDanger:hover {
    transform: scale(1.05);
}

.modal-overlay .modal-content {
    background: rgba(255, 255, 255, 0.123);
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* НАЧАЛЬНОЕ СОСТОЯНИЕ БЛЮРА (0px) */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    
    border-radius: 18px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    text-align: center;
    position: relative;
    font-family: 'Inter Tight', sans-serif;
    
    transform: scale(0.8) translateY(20px);
    opacity: 0;
    
    will-change: transform, opacity, backdrop-filter;

    transition: 
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
        opacity 0.3s ease,
        backdrop-filter 0.3s ease,
        -webkit-backdrop-filter 0.3s ease;
}

/* Активное состояние модального окна */
.modal-overlay.show .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.loader {
    width: 20px;
    height: 20px;
    border: 2px solid #131313;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    margin: 2px;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Typing Indicator (Three Dots) */

.typing-indicator {
    display: flex;
    align-items: center;
    padding: 5px 0;
    /* Небольшой отступ */
}

.typing-indicator span {
    height: 2px;
    /* Чуть меньше для аккуратности */
    width: 2px;
    background-color: #000000;
    /* ИЗМЕНЕНО: Светлый цвет точек для контраста */
    border-radius: 50%;
    display: inline-block;
    margin: 0 2px;
    /* Анимация */
    animation: bounce 1.2s infinite ease-in-out both;
}

/* Задержка для каждой точки, чтобы они прыгали по очереди */
.typing-indicator span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
        /* Точка будет прыгать вверх */
    }
}

/* Input placeholder */
.input::placeholder {
    color: #dadadaa2 !important;
}

body.chat-active .input::placeholder {
    color: rgba(200, 185, 255, 0.3) !important;
}
/* Form Input and Button Styles */
form {
    display: flex;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;

    position: relative;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.08) 100%
    );
    backdrop-filter: blur(40px) saturate(180%) brightness(1.1);
    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 35px;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.45),  
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),    
        inset 1px 0 0 rgba(255, 255, 255, 0.10),     
        0 0 0 1px rgba(0, 0, 0, 0.5),               
        0 12px 60px rgba(0, 0, 0, 0.65),             
        0 4px 20px rgba(255, 255, 255, 0.18),         
        0 1px 0 rgba(255, 255, 255, 0.06);  
    padding: 10px;
    transition: all 0.3s ease;
}

body.chat-active form {
    display: flex;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;

    position: relative;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 33px;
    /* Главное скругление */
    padding: 10px;
    /* Внутренние отступы для воздуха */
    transition: all 0.3s ease;
}
.form-group{
    position: relative; 
    width: 100%; 
    max-width: 800px;
}

body.chat-active .form-group {
    margin-bottom: 30px;
}

.input {
    flex-grow: 1;
    padding: 12px 18px;
    font-size: 18px;
    margin-right: 12px;
    font-family: "Inter Tight", sans-serif;
    font-weight: 500;
    transition: background 0.3s, border-color 0.3s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    height: 48px;

    background: rgba(255, 255, 255, 0.027);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #d4d4d4;
    border-radius: 23px;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

}

body.chat-active .input{
    color: #212529;
}

.input:focus {
    outline: none;
}

.warning {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    
    color: #ffffff6f;
    text-align: center;
    margin-top: 15px; 
    margin-bottom: 0;
    font-size: 11px;
}
.warning.show-warning {
    opacity: 1;
    visibility: visible;
}

.btn_groups{
    display: flex;
    align-items: center;
    gap: 12px;
}

.input_button,.chat-button  {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50px;
    cursor: pointer;
    height: 48px;
    width: 48px;
    align-items: center;
    background: rgba(255, 255, 255, 0.027);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #c4c4c4cb;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 2px 10px rgba(0, 0, 0, 0.123);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.25s ease;
}

body.chat-active .input_button, .chat-button {
    color: #252525cb;
}

.input_button:hover, .chat-button:hover  {
    background: rgba(255, 255, 255, 0.171) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 0 16px rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
}

.input_button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform:
        translateY(0);
}

.chat-up-menu {
    font-family: 'Inter Tight', sans-serif !important;
    position: absolute;
    bottom: 85px;
    right: 0px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 170px;
}

.chat-up-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.menu-prompt-btn {
    background: rgba(255, 255, 255, 0.096);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: #1b1b1b;
    text-align: left;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s ease, transform 0.1s ease;
    font-family: 'Montserrat', sans-serif;
}

/* На случай темного режима (ai-thinking) */
body.ai-thinking .menu-prompt-btn {
    color: #fff;
}

.menu-prompt-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
}

.menu-prompt-btn:active {
    transform: scale(0.98);
}

/* --- Контейнер для кнопок-промптов --- */
.prompt-suggestions {
    display: flex;
    flex-wrap: wrap;           
    gap: 18px;                
    justify-content: center;  
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

.prompt-pill {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50px;                         
    padding: 8px 30px;
    color: #d8d8d8;                            
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.prompt-pill:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 8px 28px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 236, 200, 0.25);
    transform: translateY(-3px);
}

body.chat-active .prompt-suggestions {
    display: none;
}

.input-badge {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background:#334f6e5e;
    border: 1px solid rgba(135, 191, 255, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(200, 170, 255, 0.25);
    border-radius: 20px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: 'Inter Tight', sans-serif;
    pointer-events: auto;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.chat-active .input-badge {
    background:#092f5c54;
    border: 1px solid rgba(135, 191, 255, 0.35);
}

.input-badge.active {
    opacity: 1;
    visibility: visible;
}

.input-badge .remove-badge {
    background: none;
    border: none;
    color: rgba(143, 195, 255, 0.589);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    transition: color 0.2s;
    outline: none;
}

.input-badge .remove-badge:hover {
    color: #fff
}

/* Контейнер для кнопок внутри сообщения ИИ */
.message-actions {
    display: flex;
    justify-content: flex-end; /* Прижимаем вправо */
    gap: 8px; /* Расстояние между кнопками */

    padding-top: 10px;
    border-top: 1px solid rgba(33, 37, 41, 0.192);

    opacity: 0;
    transform: translateY(10px);
    animation: fade-in-up 0.5s ease forwards;

}

@keyframes fade-in-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Сами кнопки */
.action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #272727; /* Цвет иконок */
    opacity: 0.6; /* Слегка прозрачные по умолчанию */
    transition: all 0.2s ease;
}

/* Цвет кнопок для темных сообщений ИИ */
.ai-message .action-btn {
    color: #1f1f1f;;
}

.action-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    opacity: 1;
    transform: scale(1.1);
}

.action-btn svg {
    width: 18px;
    height: 18px;
    pointer-events: none; /* Чтобы клик срабатывал на кнопку, а не иконку */
}

/* Button for starting a new chat */
.btn-new-chat {
    color: rgb(36, 36, 36);
    padding: 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(206, 206, 206, 0.3);
    transition: transform 0.2s, background 0.2s;
    cursor: pointer;
    border: 1 px solid rgba(206, 206, 206, 0.3);
}

.btn-new-chat:hover, .btn-new-chat:active {
    background: rgba(255, 255, 255, 0.25);
}
.product-link {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: #212529;
    padding: 2px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9em;
    margin: 15px 0;
    box-shadow: 4px 0px 20px rgba(0, 0, 0, 0.068);
    transition: box-shadow 0.3s ease, transform 0.2s ease, background 0.2s ease, padding 0.2s ease;
}
.product-link:active, .product-link:hover {
    box-shadow: 4px 0px 20px rgba(0, 0, 0, 0.103);
    padding: 3px 16px;
    background: rgba(255, 255, 255, 0.25);
}

/* ── Message rows with avatars ─────────────────────────────────────── */
.msg-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.user-row { justify-content: flex-end; }
.ai-row   { justify-content: flex-start; }

/* Уменьшить max-width пузыря, чтобы не перекрывал аватарку */
.msg-row .chat-message {
    max-width: calc(85% - 48px);
}

/* Общие стили кружка */
.msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    user-select: none;
    line-height: 1;
    margin-bottom: 2px;
     /* выровнять по низу пузыря */
}

/* ✦ AI аватар — чёрный кружок */
.ai-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #303030;
    color: #ffffff;
    font-size: 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

/* User аватар — цвет задаётся из JS */
.user-avatar {
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Shared-history — скрыть аватарки (они там не нужны) */
.chat-screen.shared-history .msg-avatar {
    display: none;
}

/* Media Queries for AI Phone Finder Specific Styles */
@media (max-width: 1024px) {

    /* Navbar */
    body.bg-settled .nav,
    body.bg-settled .nav_link {
        transition: 0.4s ease !important;
    }

    .header_nav {
        display: flex;
        flex-direction: column;
    }

    .header_logo {
        font-size: 24px;
    }

    .header_text {
        display: none;
    }

    .header-wrapper {
        background-color: rgba(17, 17, 17, 0.151);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-radius: 12px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.192);
        border: 1px solid rgba(43, 43, 43, 0.075);
        margin: 10px;
        width: calc(100% - 20px);
        padding: 5px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    body.chat-active .header-wrapper {
        background-color: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.055);
    }

    .nav {
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 54px;
        left: 0px;
        right: 0px;
        background-color: rgba(17, 17, 17, 0.151);
        border-radius: 12px;
        height: auto;
        padding: 80px 0;
        overflow: hidden;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        transition: clip-path 0.4s ease-out;
        z-index: 1000;
        pointer-events: none;
        border: 1px solid rgba(43, 43, 43, 0.075);
    }

    body.chat-active .nav {
        background-color: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.055);
    }

    .nav.nav--active {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        pointer-events: auto;
    }

    .nav_link {
        font-size: clamp(22px, 3vw, 65px);
        margin: 20px 0;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.4s ease, transform 0.4s ease;
        color: #ffffff;
    }

    .nav.nav--active .nav_link {
        opacity: 1;
        transform: translateY(0);
    }

    /* Animation for nav links */
    .nav.nav--active .nav_link:nth-child(1) {
        transition-delay: 0.05s;
    }

    .nav.nav--active .nav_link:nth-child(2) {
        transition-delay: 0.15s;
    }

    .nav.nav--active .nav_link:nth-child(3) {
        transition-delay: 0.25s;
    }

    .nav.nav--active .nav_link:nth-child(4) {
        transition-delay: 0.35s;
    }

    /* Hamburger icon animation */
    .nav-toggle {
        position: relative;
        width: 34px;
        height: 34px;
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }

    .nav-toggle__bar {
        position: absolute;
        width: 100%;
        height: 3px;
        background: #ffffff;
        transition: 0.3s ease;
        left: 0;
    }

    body.chat-active .nav-toggle__bar {
        background: #212125;
    }

    .nav-toggle__bar:nth-child(1) {
        top: 0;
    }

    .nav-toggle__bar:nth-child(2) {
        top: 10px;
    }

    .nav-toggle__bar:nth-child(3) {
        top: 20px;
    }

    .nav-toggle.open .nav-toggle__bar:nth-child(1) {
        transform: rotate(45deg);
        top: 10px;
    }

    .nav-toggle.open .nav-toggle__bar:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.open .nav-toggle__bar:nth-child(3) {
        transform: rotate(-45deg);
        top: 10px;
    }

    /* Overlay for mobile menu */
    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease;
        z-index: 699;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        transition: opacity 0.4s ease-out, visibility 0s linear 0.4s;
    }

    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.4s ease-out, visibility 0s linear 0s;
    }

    .nav-dropdown {
        display: block;
        width: 100%;
        text-align: center;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        margin-top: 0;
        min-width: auto;
        width: 100%;
    }

    .nav-dropdown-item {
        font-size: clamp(18px, 3vw, 40px);
        padding: 10px 0;
        color: #333;
        font-weight: 500;
    }

    .nav-dropdown-item:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    /* Intro for mobile */
    .intro {
        min-height: 100vh;
        padding: 60px 0 40px;
        background-position: top;
        display: block;
        margin-bottom: 0;
    }

    .intro_inner {
        padding: 0px 20px;
        text-align: center;
        padding-bottom: clamp(60px, 10vw, 100px);
    }


    .main-content {
        padding-bottom: 0;
        
    }

    .chat-screen {
        padding-bottom: 150px;

    }

    /* Input and button for mobile */
    .chat-screen {
        padding-top: 50px;
    }

    body.chat-active .form-wrapper {
        margin: 0 15px;
        width: auto;
    }

    .input {
        height: 44px;
        padding: 9px 15px;
        font-size: 16px;
        margin-right: 8px;
        flex: 1 1 auto;
        min-width: 40px;
    }

    .input_button {
        height: 44px;
        width: 44px;
        font-size: 16px;
        flex: 0 0 auto;
    }

    .chat-button {
        flex: 0 0 auto;
        margin-right: 0;
        height: 44px;
        width: 44px;
    }

    .prompt-suggestions {
        gap: 10px;
        padding: 0 10px;
    }

    .prompt-pill{
        padding: 6px 17px;
        font-size: 13px;
    }

    .autocomplete-dropdown {
        left: -2px; 
        width: calc(100% + 4px);
    }

    .btn_groups {
        gap: 8px;
    }

    .chat-button, 
    .input_button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .chat-button svg, 
    .input_button svg {
        width: 22px !important;
        height: 22px !important;
    }

    #universal-form {
        padding: 8px !important;
    }

    .chat-up-menu {
        bottom: 73px;
        min-width: auto;
        padding: 8px;
        gap: 8px;
    }

    .input {
        font-size: 15px !important;
    }

    .input-badge{
        left: 13px;
        padding: 4px 6px;
        gap: 1px;
    }
}