:root { --ink:#18221e; --soft:#64706a; --cream:#f7f6f1; --paper:#fffefa; --mint:#c9ef9c; --line:#dfe4db; --orange:#ff7657; } * { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--cream); font-family:Manrope,Arial,sans-serif; } .ambient { position:fixed; z-index:-1; width:38rem; height:38rem; border-radius:50%; filter:blur(70px); opacity:.25; } .ambient-one { background:#c7f08c; top:-20rem; right:-12rem; } .ambient-two { background:#ffc0ad; left:-22rem; top:30rem; } .shell { width:min(1120px, calc(100% - 40px)); margin:auto; } nav { height:94px; display:flex; justify-content:space-between; align-items:center; } .brand { color:var(--ink); font:700 20px/1 "DM Mono",monospace; text-decoration:none; letter-spacing:-1.5px; } .brand span { color:var(--orange); } .status,.ai-pill { font:500 11px/1 "DM Mono",monospace; letter-spacing:.02em; text-transform:uppercase; } .status { display:flex; gap:8px; align-items:center; color:var(--soft); } .status i { width:7px;height:7px;border-radius:50%;background:#6dbc60;box-shadow:0 0 0 4px #dcefd6; } .hero { padding:74px 0 88px; max-width:800px; } .eyebrow { margin:0 0 13px; color:var(--soft); font:500 11px/1 "DM Mono",monospace; letter-spacing:.13em; } h1,h2,p { margin-top:0; } h1 { margin-bottom:25px; font-size:clamp(43px,6vw,78px); letter-spacing:-.07em; line-height:.98; } h1 em { font-style:normal; color:#77aa4d; } h2 { margin-bottom:10px; font-size:23px; letter-spacing:-.055em; } .lead { max-width:590px; color:var(--soft); font-size:17px; line-height:1.7; } .dashboard { border-top:1px solid var(--line); padding:28px 0 44px; } .section-title { display:flex; align-items:end; justify-content:space-between; gap:10px; } .section-title .eyebrow { margin-bottom:8px; } .section-title h2 { margin:0; } .muted { color:var(--soft); font-size:13px; } .rates { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px; } .rate,.card { background:rgba(255,254,250,.86); border:1px solid rgba(223,228,219,.9); border-radius:16px; } .rate { padding:18px; display:flex; justify-content:space-between; align-items:center; transition:transform .2s; } .rate:hover { transform:translateY(-2px); } .currency { display:flex; align-items:center; gap:12px; } .currency-symbol { display:grid; place-items:center; width:36px;height:36px;background:#edf4e5;border-radius:50%;font:500 16px "DM Mono",monospace; } .currency strong,.currency small { display:block; } .currency strong { font:600 13px "DM Mono",monospace; } .currency small { margin-top:2px;color:var(--soft);font-size:11px; } .rate b,.conversion { font:500 14px "DM Mono",monospace; } .split { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .card { padding:29px; } .convert-row { height:54px; display:flex; align-items:center; border-bottom:1px solid var(--line); margin:22px 0 17px; } .convert-row input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:600 27px "DM Mono",monospace; } .convert-row span { color:var(--soft); font:500 13px "DM Mono",monospace; } .conversion { font-size:18px; } .small { margin:14px 0 0; font-size:11px; } .insight { background:var(--ink); border-color:var(--ink); color:#f8f8f0; } .insight .eyebrow { color:#a7b2ab; } .insight p:not(.eyebrow) { color:#c6cec7; max-width:410px; line-height:1.65; font-size:14px; } .insight a { color:var(--mint); font:500 12px "DM Mono",monospace; text-decoration:none; }.insight a span { margin-left:4px; } .assistant { margin:14px 0 42px; padding:30px; } .assistant-heading { display:flex; align-items:center; gap:12px; } .assistant-heading h2 { margin:0; }.assistant-heading .eyebrow { margin-bottom:7px; } .bot-mark { display:grid; place-items:center; width:42px;height:42px;border-radius:50%;background:var(--mint); font-size:20px; }.ai-pill { margin-left:auto;padding:7px 9px;border-radius:9px;background:#f0f7ea;color:#57853e; }.chat { min-height:144px; max-height:320px; overflow:auto; padding:22px 0 8px; display:flex; flex-direction:column; gap:10px; }.message { max-width:min(600px,85%); padding:12px 14px; border-radius:12px; white-space:pre-wrap; font-size:13px; line-height:1.55; }.message.bot { align-self:flex-start;background:#f0f2ed; }.message.user { align-self:flex-end;background:var(--mint); }.message.pending { color:var(--soft); font-style:italic; }.message.failed { background:#ffe3da; color:#932e19; }.chat-form { display:flex; gap:8px; padding-top:10px; border-top:1px solid var(--line); }.chat-form input { min-width:0; flex:1; padding:13px 0; border:0; outline:0; background:transparent; font:14px Manrope,sans-serif; }.chat-form button { flex:0 0 auto; border:0;border-radius:10px;padding:0 16px;background:var(--ink);color:white;font:600 12px Manrope,sans-serif;cursor:pointer; }.chat-form button:disabled { opacity:.55; cursor:wait; }.disclaimer { margin:11px 0 0;color:var(--soft);font-size:10px; } footer { display:flex; justify-content:space-between; padding:0 0 35px; color:var(--soft); font:11px "DM Mono",monospace; }.skeleton { height:74px;border-radius:16px;background:linear-gradient(90deg,#ecefe8,#f5f5f1,#ecefe8);background-size:200% 100%;animation:shimmer 1.2s infinite; }.error { color:#9d351f; } @keyframes shimmer { to { background-position:-200% 0; } } @media (max-width:700px) { .shell { width:min(100% - 28px,1120px); }.hero { padding:45px 0 57px; }.rates { grid-template-columns:1fr 1fr; }.split { grid-template-columns:1fr; }.card,.assistant { padding:22px; } footer { gap:12px; flex-direction:column; } } @media (max-width:400px) { .rates { grid-template-columns:1fr; }.status { font-size:9px; } }


/* ===== AI Markdown ===== */

.assistant-message strong,
.message.assistant strong,
.message.ai strong,
.ai-message strong,
[data-role="assistant"] strong {
    font-weight: 650;
}

.assistant-message .ai-list,
.message.assistant .ai-list,
.message.ai .ai-list,
.ai-message .ai-list,
[data-role="assistant"] .ai-list {
    margin: 12px 0 12px 24px;
    padding: 0;
}

.assistant-message .ai-list li,
.message.assistant .ai-list li,
.message.ai .ai-list li,
.ai-message .ai-list li,
[data-role="assistant"] .ai-list li {
    margin: 6px 0;
    padding-left: 3px;
    line-height: 1.55;
}

.assistant-message .ai-text-line,
.message.assistant .ai-text-line,
.message.ai .ai-text-line,
.ai-message .ai-text-line,
[data-role="assistant"] .ai-text-line {
    line-height: 1.6;
}

.assistant-message .ai-paragraph-gap,
.message.assistant .ai-paragraph-gap,
.message.ai .ai-paragraph-gap,
.ai-message .ai-paragraph-gap,
[data-role="assistant"] .ai-paragraph-gap {
    height: 10px;
}

.assistant-message code,
.message.assistant code,
.message.ai code,
.ai-message code,
[data-role="assistant"] code {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(20, 35, 28, 0.07);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.92em;
}


/* =========================================================
   PulseRates — polished AI messages
   ========================================================= */

.message.assistant,
.message.ai,
.ai-message {
    width: fit-content;
    max-width: min(780px, 72%);
    padding: 18px 21px;

    border-radius: 20px 20px 20px 7px;

    line-height: 1.58;
    font-size: 17px;

    letter-spacing: -0.012em;

    overflow-wrap: anywhere;
}


/* Каждая обычная строка */

.message.assistant .ai-text-line,
.message.ai .ai-text-line,
.ai-message .ai-text-line {
    margin: 0;
    line-height: 1.58;
}


/* Отступ между абзацами */

.message.assistant .ai-paragraph-gap,
.message.ai .ai-paragraph-gap,
.ai-message .ai-paragraph-gap {
    height: 13px;
}


/* Небольшие заголовки внутри ответа */

.message.assistant .ai-heading,
.message.ai .ai-heading,
.ai-message .ai-heading {
    margin: 15px 0 7px;

    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;

    letter-spacing: -0.02em;
}


/* Первый заголовок не получает лишний верхний отступ */

.message.assistant .ai-heading:first-child,
.message.ai .ai-heading:first-child,
.ai-message .ai-heading:first-child {
    margin-top: 0;
}


/* Жирный текст */

.message.assistant strong,
.message.ai strong,
.ai-message strong {
    font-weight: 700;
}


/* Списки */

.message.assistant .ai-list,
.message.ai .ai-list,
.ai-message .ai-list {
    margin: 11px 0 13px;
    padding-left: 24px;
}


/* Каждый пункт списка */

.message.assistant .ai-list li,
.message.ai .ai-list li,
.ai-message .ai-list li {
    margin: 7px 0;
    padding-left: 3px;

    line-height: 1.5;
}


/* Маркеры списка чуть аккуратнее */

.message.assistant .ai-list li::marker,
.message.ai .ai-list li::marker,
.ai-message .ai-list li::marker {
    font-size: 0.9em;
}


/* Inline-code */

.message.assistant code,
.message.ai code,
.ai-message code {
    padding: 2px 6px;

    border-radius: 6px;

    background: rgba(20, 35, 28, 0.07);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.88em;
}


/* Сообщение пользователя оставляем компактным */

.message.user {
    width: fit-content;
    max-width: min(620px, 65%);
    line-height: 1.45;
}


/* На мобильных AI не должен занимать странную узкую колонку */

@media (max-width: 760px) {
    .message.assistant,
    .message.ai,
    .ai-message {
        max-width: 88%;
        padding: 15px 17px;
        font-size: 16px;
    }

    .message.user {
        max-width: 82%;
    }
}


/* =========================================================
   PulseRates AI — final markdown/list polish
   ========================================================= */

.message.assistant ul.ai-list,
.message.assistant ol.ai-list,
.message.ai ul.ai-list,
.message.ai ol.ai-list {
    margin: 14px 0 16px;
    padding-left: 25px;
}

.message.assistant .ai-list li,
.message.ai .ai-list li {
    margin: 8px 0;
    padding-left: 5px;
    line-height: 1.48;
}

.message.assistant .ai-list li::marker,
.message.ai .ai-list li::marker {
    font-weight: 600;
}

.message.assistant strong,
.message.ai strong {
    font-weight: 650;
}

.message.assistant {
    max-width: min(800px, 70%);
}

.message.assistant .ai-paragraph-gap {
    height: 14px;
}


/* Немного воздуха после вводного абзаца перед списком */

.message.assistant .ai-text-line + .ai-list {
    margin-top: 15px;
}


/* Убираем лишнюю высоту у пустых элементов */

.message.assistant .ai-text-line:empty {
    display: none;
}


@media (max-width: 900px) {
    .message.assistant {
        max-width: 84%;
    }
}


/* =========================================================
   PulseRates bot Markdown
   ========================================================= */

.message.bot {
    width: fit-content;
    max-width: min(800px, 70%);
    padding: 18px 21px;

    border-radius: 20px 20px 20px 7px;

    line-height: 1.58;
    font-size: 17px;
    letter-spacing: -0.012em;

    overflow-wrap: anywhere;
}


/* Обычный текст */

.message.bot .ai-text-line {
    margin: 0;
    line-height: 1.58;
}


/* Абзацы */

.message.bot .ai-paragraph-gap {
    height: 13px;
}


/* Жирные акценты */

.message.bot strong {
    font-weight: 700;
}


/* Заголовки */

.message.bot .ai-heading {
    margin: 15px 0 7px;

    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.message.bot .ai-heading:first-child {
    margin-top: 0;
}


/* Списки */

.message.bot ul.ai-list,
.message.bot ol.ai-list {
    margin: 14px 0 16px;
    padding-left: 25px;
}

.message.bot .ai-list li {
    margin: 7px 0;
    padding-left: 4px;
    line-height: 1.5;
}

.message.bot .ai-list li::marker {
    font-weight: 600;
}


/* Код */

.message.bot code {
    padding: 2px 6px;
    border-radius: 6px;

    background: rgba(20, 35, 28, 0.07);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.88em;
}


@media (max-width: 900px) {
    .message.bot {
        max-width: 84%;
    }
}


/* =========================================================
   PulseRates multi currency converter
   ========================================================= */


/* Убираем стрелочки input type=number в Chrome / Edge */

.currency-amount-input::-webkit-inner-spin-button,
.currency-amount-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Firefox */

.currency-amount-input {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* Выпадающий выбор валюты */

.currency-select {
    min-width: 170px;

    padding: 10px 13px;

    border: 1px solid rgba(31, 45, 38, 0.12);
    border-radius: 12px;

    background: #f3f8ed;

    color: #44534a;

    font: inherit;
    font-size: 16px;
    font-weight: 500;

    outline: none;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}


.currency-select:hover {
    background: #edf6e4;
    border-color: rgba(31, 45, 38, 0.2);
}


.currency-select:focus {
    border-color: rgba(93, 139, 70, 0.45);

    box-shadow:
        0 0 0 3px
        rgba(157, 216, 111, 0.16);
}


/*
 Если USD был обычным текстом — select займёт
 его старое место справа от поля.
*/

.currency-amount-input + .currency-select {
    margin-left: 12px;
}


/* Fallback, если старый USD не удалось найти */

.currency-select-floating {
    position: absolute;

    right: 38px;
    top: 98px;

    z-index: 5;
}


@media (max-width: 700px) {
    .currency-select {
        min-width: 130px;
        font-size: 14px;
    }

    .currency-select-floating {
        right: 20px;
    }
}


/* =========================================================
   PulseRates converter result fix
   ========================================================= */

.multi-currency-result {
    margin-top: 27px;

    color: #17211c;

    font-size: 27px;
    font-weight: 550;
    line-height: 1.3;

    letter-spacing: 0.01em;
}


.currency-select option:disabled {
    color: inherit;
}


@media (max-width: 700px) {
    .multi-currency-result {
        font-size: 22px;
    }
}