@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    font-family: Manrope, sans-serif;
    color: #e8f0f5;
    background: #091521;
    font-synthesis: none
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    min-width: 320px
}

button,
input {
    font: inherit
}

button {
    cursor: pointer
}

.app-shell {
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at 76% 35%, #173a4a 0, #0d2332 21%, transparent 46%), #091521;
    position: relative
}

.app-shell:before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .14;
    pointer-events: none;
    background-image: linear-gradient(#fff2 1px, transparent 1px), linear-gradient(90deg, #fff2 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(110deg, #000, transparent 55%)
}

.topbar,
.hero
 {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: auto
}

.topbar {
    height: 96px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #bedae322
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #f4f7f7;
    text-decoration: none;
    letter-spacing: .08em
}

.brand strong {
    display: block;
    font: 700 24px 'Space Grotesk';
    line-height: 1
}

.brand small {
    display: block;
    color: #8ca2ab;
    font-size: 7px;
    letter-spacing: .22em;
    margin-top: 4px
}

.brand-mark {
    width: 32px;
    height: 31px;
    display: flex;
    gap: 3px;
    align-items: end
}

.brand-mark i {
    display: block;
    width: 8px;
    background: #b4dbe0;
    transform: skew(-26deg)
}

.brand-mark i:nth-child(1) {
    height: 15px
}

.brand-mark i:nth-child(2) {
    height: 23px
}

.brand-mark i:nth-child(3) {
    height: 31px
}

.topbar-meta {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #94abb5;
    font-size: 12px
}

.topbar-meta a {
    margin-left: 25px;
    color: #e6f1f2;
    text-decoration: none;
    font-weight: 600
}

.status-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 100%;
    background: #83d9ad;
    box-shadow: 0 0 0 4px #83d9ad1f
}

.hero {
    min-height: calc(100vh - 150px);
    padding: 94px 40px 65px;
    display: grid;
    grid-template-columns: 1fr 500px;
    align-items: center;
    gap: 100px
}

.eyebrow {
    color: #85a1aa;
    letter-spacing: .18em;
    font-size: 10px;
    font-weight: 700
}

.eyebrow span {
    color: #6f969e;
    margin-left: 30px
}

h1 {
    margin: 24px 0 23px;
    font: 500 clamp(44px, 5.1vw, 74px)/.98 'Space Grotesk';
    letter-spacing: -.055em
}

h1 em {
    color: #a9d6d8;
    font-style: normal;
    font-size: .78em;
    white-space: nowrap
}

.hero-description {
    max-width: 420px;
    color: #99adb5;
    font-size: 14px;
    line-height: 1.8
}

.hero-note {
    display: flex;
    gap: 14px;
    margin-top: 75px;
    color: #66828c;
    font-size: 10px;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: .12em
}

.hero-note span:first-child {
    color: #a8d4d7;
    font-size: 24px;
    line-height: 1
}

.chat-card {
    background: #eff8f7f7;
    color: #172b35;
    border-radius: 4px;
    padding: 25px;
    box-shadow: 0 28px 80px #0005
}

.chat-heading {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-bottom: 21px;
    border-bottom: 1px solid #dce7e6
}

.avatar,
.mini-avatar {
    display: grid;
    place-items: center;
    color: #f3ffff;
    background: #1e5963;
    font: 700 11px 'Space Grotesk'
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%
}

.chat-heading h2 {
    font: 700 14px 'Space Grotesk';
    margin: 0 0 5px
}

.chat-heading p {
    margin: 0;
    font-size: 10px;
    color: #71858a
}

.chat-heading p .status-dot {
    margin-right: 7px;
    width: 5px;
    height: 5px
}

.more-button {
    margin-left: auto;
    border: 0;
    color: #789196;
    background: transparent;
    font-weight: 700;
    letter-spacing: 2px
}

.messages {
    height: 278px;
    overflow-y: auto;
    padding: 23px 0 12px
}

.message-row {
    display: flex;
    gap: 9px;
    margin-bottom: 15px;
    align-items: flex-end
}

.message-row.user {
    justify-content: flex-end
}

.mini-avatar {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 8px
}

.message-bubble {
    max-width: 83%;
    background: #e4eeee;
    border-radius: 3px 13px 13px 13px;
    padding: 12px 13px 9px;
    font-size: 12px;
    line-height: 1.55
}

.user .message-bubble {
    color: #edf7f8;
    background: #276b72;
    border-radius: 13px 13px 3px 13px
}

.message-time {
    display: block;
    margin-top: 7px;
    color: #86a0a3;
    font-size: 9px
}

.user .message-time {
    color: #a6cacc;
    text-align: right
}

.typing {
    display: flex;
    gap: 4px;
    padding: 16px
}

.typing b {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #83a6a8;
    animation: pulse 1s infinite alternate
}

.typing b:nth-child(2) {
    animation-delay: .2s
}

.typing b:nth-child(3) {
    animation-delay: .4s
}

@keyframes pulse {
    to {
        opacity: .25;
        transform: translateY(-3px)
    }
}

.suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 14px 0 17px;
    border-top: 1px solid #dce7e6
}

.suggestions button {
    padding: 8px 10px;
    color: #42727a;
    border: 1px solid #bad3d3;
    border-radius: 3px;
    background: transparent;
    font-size: 10px
}

.suggestions button:hover {
    background: #e4f0ef
}

.composer {
    display: flex;
    gap: 10px;
    padding: 5px;
    border: 1px solid #cadcdb;
    border-radius: 3px
}

.composer input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    padding: 7px;
    color: #203e45;
    background: transparent;
    font-size: 12px
}

.composer input::placeholder {
    color: #94a8a9
}

.composer button {
    width: 35px;
    border: 0;
    border-radius: 2px;
    background: #1d5d67;
    color: #d9eeee;
    font-size: 20px
}

.privacy {
    margin: 12px 0 0;
    color: #9aadae;
    font-size: 9px
}

.privacy a {
    color: #558d91
}

/* .footer {
    display: flex;
    justify-content: space-between;
    color: #58727d;
    border-top: 1px solid #bedae322;
    padding: 22px 0 28px;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase
} */

.message-bubble p {
    margin: 0 0 8px
}

.message-bubble p:last-child {
    margin-bottom: 0
}

.message-bubble h1,
.message-bubble h2,
.message-bubble h3 {
    margin: 0 0 8px;
    font: 700 13px/1.3 'Space Grotesk';
    letter-spacing: 0
}

.message-bubble ul {
    margin: 5px 0 9px;
    padding-left: 18px
}

.message-bubble li {
    margin: 3px 0
}

.message-bubble strong {
    color: #1d5960
}

@media(max-width:850px) {
    .topbar {
        height: 76px;
        padding: 0 22px
    }

    .topbar-meta {
        font-size: 0
    }

    .topbar-meta a {
        margin-left: 10px;
        font-size: 11px
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 65px 22px 50px
    }

    .hero-note {
        margin-top: 40px
    }

    .chat-card {
        max-width: 560px;
        width: 100%;
        justify-self: center
    }

    /* .footer {
        margin: 0 22px;
        gap: 10px;
        flex-wrap: wrap
    }

    .footer span:last-child {
        display: none
    } */
}

@media(max-width:480px) {
    h1 {
        font-size: 47px
    }

    .chat-card {
        padding: 18px
    }

    .messages {
        height: 300px
    }

    .suggestions button {
        font-size: 9px
    }

    /* .footer {
        font-size: 8px
    } */
}

/* Light theme for embedding into the Bitrix site. */
body {
    background: #ffffff;
    color: #17313d
}

.app-shell {
    background: radial-gradient(circle at 78% 18%, #edf8f8 0, #ffffff 38%), #ffffff;
    color: #17313d
}

.app-shell:before {
    opacity: .42;
    background-image: linear-gradient(#2b657515 1px, transparent 1px), linear-gradient(90deg, #2b657515 1px, transparent 1px);
    mask-image: linear-gradient(110deg, #000, transparent 58%)
}

.hero {
    min-height: auto;
    padding-top: 72px;
    padding-bottom: 72px;
    grid-template-columns: minmax(0, 1fr) minmax(650px, 800px);
    gap: 50px
}

.hero-copy {
    min-width: 0
}

.eyebrow {
    color: #557780
}

.eyebrow span {
    color: #85a8ad
}

h1 {
    color: #17313d
}

h1 em {
    color: rgb(0, 68, 255)
}

.hero-description {
    color: #60777e
}

.hero-note {
    color: #6f8d92
}

.hero-note span:first-child {
    color: #2f7d83
}

.chat-card {
    background: #ffffff;
    border: 1px solid #d9e4ff;
    color: #17316e;
    box-shadow: 0 24px 60px rgba(0, 38, 150, .16)
}

.chat-heading {
    border-bottom-color: #d9e4ff
}

.chat-heading p {
    color: #718ac7
}

.avatar,
.mini-avatar {
    background: #002caa
}

.messages {
    background: transparent
}

.message-bubble {
    background: rgba(0, 68, 255, .12);
    color: #17316e
}

.user .message-bubble {
    background: rgba(0, 68, 255, .2);
    color: #17316e
}

.message-time {
    color: #718ac7
}

.user .message-time {
    color: #718ac7
}

.suggestions {
    border-top-color: #d9e4ff
}

.suggestions button {
    color: #1746cc;
    border-color: #9eb8ff
}

.suggestions button:hover {
    background: rgba(0, 68, 255, .1)
}

.composer {
    border-color: #9eb8ff;
    background: #ffffff
}

.composer input {
    color: #173d46
}

.composer button {
    background: #002caa;
    color: #ffffff
}

.privacy {
    color: #718ac7
}

.privacy a {
    color: #1746cc
}

h1 {
    font-size: clamp(36px, 4.1vw, 58px)
}

@media(max-width:480px) {
    h1 {
        font-size: 40px
    }
}

@media(max-width:850px) {
    .hero {
        padding-top: 48px;
        grid-template-columns: 1fr;
    }
}

@media(max-width:1100px) and (min-width:851px) {
    .hero {
        grid-template-columns: minmax(0, 1fr) minmax(560px, 1.8fr);
        gap: 30px;
        padding-left: 24px;
        padding-right: 24px
    }
}

/* === Адаптив чата для смартфонов === */

.chat-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px);
    overflow: hidden;
}

.messages {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.suggestions,
.composer,
.privacy {
    flex: 0 0 auto;
}

.composer {
    position: relative;
    z-index: 10;
}

@media (max-width: 480px) {
    .hero {
        min-height: auto;
        padding: 28px 14px 32px;
        gap: 24px;
        align-items: start;
    }

    .chat-card {
        padding: 14px 14px 100px;   /* запас снизу под плашку */
        max-height: none;          /* на телефоне пусть растёт по контенту */
    }

    .messages {
        max-height: 38vh;
        min-height: 160px;
    }

    .composer button {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }
}