/* Перламутровая · Путь к себе. Адаптивная форма и чернильная типографика. */

/* Lora: локальные начертания с кириллицей, без обращения к сервису шрифтов. */
@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/shared/fonts/lora/lora-normal-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/shared/fonts/lora/lora-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lora";
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url('/shared/fonts/lora/lora-italic-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Lora";
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url('/shared/fonts/lora/lora-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@property --reflecta-pearl-light {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

html.loop-page[data-visual-theme="pearl"] {
    --text: #101f37;
    --text-soft: #243952;
    --muted: #3b506a;
    --subtle: #4a5e74;
    --ink: #101f37;
    --pearl-dialogue-font: "Lora", "Iowan Old Style", "Baskerville", "Georgia", serif;
    --pearl-answer-ink: #182232;
    --pearl-user-ink: #203753;
}

html.loop-page[data-visual-theme="pearl"] body {
    color: var(--ink);
    font-size: 18px;
    font-weight: 500;
    background-color: #f5f6f7;
    background-image: url('/shared/theme-assets/pearl-flow-calm.webp');
}

html.loop-page[data-visual-theme="pearl"] .topbar {
    background: rgba(250, 251, 252, .72);
    border-bottom: 1px solid rgba(117, 138, 157, .12);
}

html.loop-page[data-visual-theme="pearl"] .brand__name {
    animation: none;
}

html.loop-page[data-visual-theme="pearl"] .feed-content {
    padding-top: 28px;
}

html.loop-page[data-visual-theme="pearl"] .message {
    margin-bottom: 32px;
}

html.loop-page[data-visual-theme="pearl"] .message.assistant .message-body,
html.loop-page[data-visual-theme="pearl"] .message.user .message-body {
    border: 1px solid rgba(119, 143, 161, .2);
    border-radius: 20px;
    padding: 24px 28px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 5px 20px rgba(48, 74, 94, .04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.loop-page[data-visual-theme="pearl"] .message.user .message-body {
    background: rgba(240, 247, 249, .94);
    border-radius: 20px 20px 6px 20px;
}

html.loop-page[data-visual-theme="pearl"] .topic-button::before,
html.loop-page[data-visual-theme="pearl"] .message.assistant .message-body::before,
html.loop-page[data-visual-theme="pearl"] .message.user .message-body::before,
html.loop-page[data-visual-theme="pearl"] .sheet::before,
html.loop-page[data-visual-theme="pearl"] .prompt-dialog::before {
    content: none;
}

html.loop-page[data-visual-theme="pearl"] .message-body p:last-child {
    margin-bottom: 0;
}

html.loop-page[data-visual-theme="pearl"] .sheet,
html.loop-page[data-visual-theme="pearl"] .prompt-dialog,
html.loop-page[data-visual-theme="pearl"] .age-dialog {
    background: rgba(252, 253, 253, .98);
    border-color: rgba(119, 143, 161, .25);
    box-shadow: 0 16px 64px rgba(34, 56, 76, .15);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.loop-page[data-visual-theme="pearl"] .sheet-heading {
    background: #fafcfc;
    border-bottom-color: rgba(119, 143, 161, .2);
}

html.loop-page[data-visual-theme="pearl"] .menu-item {
    border: 0;
    border-bottom: 1px solid rgba(119, 143, 161, .18);
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.loop-page[data-visual-theme="pearl"] .menu-item:hover {
    background: #edf4f5;
    box-shadow: none;
    transform: none;
}

html.loop-page[data-visual-theme="pearl"] .menu-item small {
    font-size: 14px;
    line-height: 1.6;
}

html.loop-page[data-visual-theme="pearl"] .search-input,
html.loop-page[data-visual-theme="pearl"] .field-input,
html.loop-page[data-visual-theme="pearl"] .prompt-dialog textarea {
    border-color: rgba(119, 143, 161, .3);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
}

html.loop-page[data-visual-theme="pearl"] .action-button,
html.loop-page[data-visual-theme="pearl"] .chip,
html.loop-page[data-visual-theme="pearl"] .secondary-button {
    border-color: rgba(119, 143, 161, .3);
    border-radius: 12px;
    background: #f8fbfc;
    box-shadow: none;
}

html.loop-page[data-visual-theme="pearl"] .catalog-item {
    border-color: rgba(119, 143, 161, .25);
    border-radius: 16px;
    background: #fafcfc;
    box-shadow: 0 3px 12px rgba(48, 74, 94, .04);
}

html.loop-page[data-visual-theme="pearl"] .catalog-item.selected,
html.loop-page[data-visual-theme="pearl"] .chip.selected {
    /* theme-picker.css закрепляет общий фон chip через !important. */
    background: #e8f2f3 !important;
    border-color: #527d86 !important;
    box-shadow: inset 0 0 0 1px #527d86;
}

html.loop-page[data-visual-theme="pearl"] .latest {
    background: #fff;
    border-color: #afc3cd;
    color: #233c50;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(48, 74, 94, .14);
}

html.loop-page[data-visual-theme="pearl"] .brand__name {
    font-size: 28px;
    background-image: linear-gradient(100deg, #09192d, #163453 35%, #2e646b 56%, #0e263f 80%, #09192d);
}

html.loop-page[data-visual-theme="pearl"] .welcome .welcome-lead {
    color: #172b45;
    font-family: var(--pearl-dialogue-font);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.7;
    max-width: 620px;
    text-wrap: balance;
}

html.loop-page[data-visual-theme="pearl"] .topic-button {
    min-width: 0;
    padding: 16px 20px;
    gap: 12px;
    text-align: left;
    border: 1px solid rgba(119, 143, 161, .25);
    border-radius: 20px;
    background: rgba(255, 255, 255, .8);
    box-shadow: inset 0 1px 0 #fff, 0 4px 16px rgba(48, 74, 94, .04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.loop-page[data-visual-theme="pearl"] .topic-button:hover {
    background: #fff;
    border-color: #819da8;
    box-shadow: 0 8px 20px rgba(48, 74, 94, .08);
}

html.loop-page[data-visual-theme="pearl"] .topic-grid { max-width: 724px; gap: 12px 16px; }
html.loop-page[data-visual-theme="pearl"] .welcome { margin-top: 12px; }
html.loop-page[data-visual-theme="pearl"] .topic-button { min-height: 80px; }

html.loop-page[data-visual-theme="pearl"] .topic-text {
    color: #12263f;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
    min-width: 0;
}

html.loop-page[data-visual-theme="pearl"] .topic-symbol {
    color: #375e69;
    font-weight: 500;
    background: #f1f7f8;
    border-color: rgba(109, 149, 157, .2);
    width: 42px;
    height: 42px;
}

html.loop-page[data-visual-theme="pearl"] .topic-button:nth-child(4n + 2) .topic-symbol {
    color: #735868;
    background: #f8f1f5;
    border-color: rgba(157, 119, 140, .2);
}

html.loop-page[data-visual-theme="pearl"] .message-body,
html.loop-page[data-visual-theme="pearl"] .message.assistant .message-body {
    color: var(--ink);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.75;
}

html.loop-page[data-visual-theme="pearl"] .message.assistant .message-body,
html.loop-page[data-visual-theme="pearl"] .message.user .message-body {
    font-family: var(--pearl-dialogue-font);
    font-kerning: normal;
    font-synthesis: none;
    letter-spacing: 0;
}

html.loop-page[data-visual-theme="pearl"] .message.assistant .message-body {
    color: var(--pearl-answer-ink);
    font-style: normal;
    font-weight: 400;
    line-height: 1.85;
}

html.loop-page[data-visual-theme="pearl"] .message.user .message-body {
    color: var(--pearl-user-ink);
    font-style: italic;
    font-weight: 450;
    line-height: 1.75;
}

html.loop-page[data-visual-theme="pearl"] .message-meta,
html.loop-page[data-visual-theme="pearl"] .card-position,
html.loop-page[data-visual-theme="pearl"] .card-name,
html.loop-page[data-visual-theme="pearl"] .card-orientation {
    color: #304662;
    font-size: 14px;
}

html.loop-page[data-visual-theme="pearl"] .welcome-guide-item dt {
    color: #142b48;
    font-size: 18px;
    font-weight: 650;
}

html.loop-page[data-visual-theme="pearl"] .welcome-guide-item dd,
html.loop-page[data-visual-theme="pearl"] .guide-content .welcome-guide-notice {
    color: #30445d;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
}

html.loop-page[data-visual-theme="pearl"] .sheet-body,
html.loop-page[data-visual-theme="pearl"] .prompt-dialog,
html.loop-page[data-visual-theme="pearl"] .age-dialog {
    color: #142942;
    font-size: 17px;
}

html.loop-page[data-visual-theme="pearl"] .sheet,
html.loop-page[data-visual-theme="pearl"] .prompt-dialog {
    overflow-y: auto;
    overscroll-behavior: contain;
}

html.loop-page[data-visual-theme="pearl"] .menu-item span,
html.loop-page[data-visual-theme="pearl"] .setting-label,
html.loop-page[data-visual-theme="pearl"] .setting-row label,
html.loop-page[data-visual-theme="pearl"] .field-input,
html.loop-page[data-visual-theme="pearl"] .search-input,
html.loop-page[data-visual-theme="pearl"] #prompt-input {
    color: #142942;
    font-size: 17px;
    font-weight: 550;
}

html.loop-page[data-visual-theme="pearl"] #prompt-input {
    font-family: var(--pearl-dialogue-font);
    font-style: italic;
    font-weight: 450;
    font-synthesis: none;
    color: var(--pearl-user-ink);
    line-height: 1.65;
}

html.loop-page[data-visual-theme="pearl"] .quiet-button,
html.loop-page[data-visual-theme="pearl"] .context-button,
html.loop-page[data-visual-theme="pearl"] .text-button,
html.loop-page[data-visual-theme="pearl"] .action-button,
html.loop-page[data-visual-theme="pearl"] .chip,
html.loop-page[data-visual-theme="pearl"] .continuation-question {
    color: #223a57;
    font-size: 16px;
    font-weight: 550;
}

html.loop-page[data-visual-theme="pearl"] .app-shell {
    container-name: pearl-viewport;
    container-type: size;
}

/* Ширина контейнера, а не разрешение дисплея: учитывает масштаб и узкое окно. */
html.loop-page[data-visual-theme="pearl"] .composer-inner {
    container-name: pearl-composer;
    container-type: inline-size;
}

html.loop-page[data-visual-theme="pearl"] .composer-wrap {
    padding-top: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    background: rgba(248, 250, 251, .96);
    border-top: 1px solid rgba(119, 143, 161, .15);
}

html.loop-page[data-visual-theme="pearl"] .composer-context {
    padding: 0 4px 8px;
    gap: 6px 16px;
    align-items: center;
}

html.loop-page[data-visual-theme="pearl"] #composer {
    --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-01-240.webp');
    --pearl-variant: "01";
    --pearl-height: 84px;
    --pearl-radius: 28px;
    --pearl-slice: 56;
    --pearl-font: 17px;
    --pearl-button: 48px;
    --pearl-padding: 16px;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: var(--pearl-height);
    gap: 12px;
    margin: 0;
    padding: 12px 14px 12px var(--pearl-padding);
    border: 0;
    border-radius: var(--pearl-radius);
    background: #fcfdfd;
    overflow: visible;
    box-shadow: 0 8px 24px rgba(48, 74, 94, .08), 0 0 0 1px rgba(119, 143, 161, .18);
    transition: box-shadow .18s ease;
}

/* Настоящий растр, разрезанный на девять областей. Углы не растягиваются. */
html.loop-page[data-visual-theme="pearl"] #composer::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 0 solid transparent;
    border-radius: inherit;
    border-image-source: var(--pearl-frame);
    border-image-slice: var(--pearl-slice) fill;
    border-image-width: var(--pearl-radius);
    border-image-outset: 0;
    border-image-repeat: stretch;
    background: none;
    box-shadow: none;
    opacity: .44;
    pointer-events: none;
}

/* Тонкий движущийся блик только на окантовке, без вращения всей формы. */
html.loop-page[data-visual-theme="pearl"] #composer::after {
    content: "";
    display: block;
    position: absolute;
    inset: 1px;
    z-index: 2;
    width: auto;
    height: auto;
    padding: 1.5px;
    border: 0;
    border-radius: inherit;
    transform: none;
    background: conic-gradient(from var(--reflecta-pearl-light), transparent 0deg 190deg, rgba(255,255,255,.9) 218deg, rgba(151,211,227,.8) 245deg, rgba(255,219,171,.9) 273deg, transparent 308deg 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .7;
    animation: pearl-composer-edge 9s linear infinite;
}

html.loop-page[data-visual-theme="pearl"] #composer:focus-within {
    border: 0;
    outline: 2px solid rgba(31, 65, 99, .65);
    outline-offset: 4px;
    box-shadow: 0 10px 28px rgba(48, 74, 94, .12);
}

html.loop-page[data-visual-theme="pearl"] #composer:focus-within::after { opacity: 1; }

html.loop-page[data-visual-theme="pearl"] #message {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    align-self: center;
    width: 0;
    min-width: 0;
    min-height: 46px;
    max-height: min(160px, 22vh);
    margin: 0;
    padding: 10px 0;
    border: 0 !important;
    border-radius: 0;
    outline: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--pearl-user-ink);
    -webkit-text-fill-color: var(--pearl-user-ink);
    caret-color: #142c4b;
    font-family: var(--pearl-dialogue-font);
    font-size: var(--pearl-font);
    font-style: italic;
    font-weight: 450;
    font-kerning: normal;
    font-synthesis: none;
    line-height: 1.5;
    text-shadow: none;
    letter-spacing: 0;
    resize: none;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 1;
}

html.loop-page[data-visual-theme="pearl"] #message::placeholder {
    color: #142a43;
    -webkit-text-fill-color: #142a43;
    font-weight: 600;
    opacity: 1;
}

html.loop-page[data-visual-theme="pearl"] #message:disabled {
    color: #46566c;
    -webkit-text-fill-color: #46566c;
    cursor: not-allowed;
    opacity: 1;
}

/* Это отдельная настоящая кнопка. Её ширина всегда равна высоте. */
html.loop-page #send.send-button {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    align-self: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    max-width: 44px;
    min-height: 44px;
    max-height: 44px;
    aspect-ratio: 1;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    opacity: 1;
    filter: none;
    transform: none;
    transition: background-color .16s ease, opacity .16s ease;
}

html.loop-page #send.send-button::before,
html.loop-page #send.send-button::after {
    content: none;
}

/* Один векторный значок для всех тем, без растрового слоя поверх стрелки. */
html.loop-page #send.send-button svg {
    display: block;
    position: relative;
    z-index: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    transform: none;
    color: inherit;
    opacity: 1;
    filter: none;
}

html.loop-page #send.send-button:disabled {
    opacity: .35;
    cursor: not-allowed;
    box-shadow: none;
}

html.loop-page #send.send-button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
}

html.loop-page #send.send-button:active:not(:disabled) { background: color-mix(in srgb, var(--ink) 14%, transparent); }
html.loop-page #send.send-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

html.loop-page[data-visual-theme="pearl"] .composer-footer { padding-top: 10px; gap: 4px 16px; }
html.loop-page[data-visual-theme="pearl"] .composer-tools { gap: 4px 16px; }
html.loop-page[data-visual-theme="pearl"] #review-button,
html.loop-page[data-visual-theme="pearl"] #pdf-button,
html.loop-page[data-visual-theme="pearl"] #guide-button {
    color: #1e3655;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}
html.loop-page[data-visual-theme="pearl"] #composer-hint { color: #3b4f68; font-size: 14px; font-weight: 500; }

@container pearl-composer (min-width: 272px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "02";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-02-272.webp');
        --pearl-height: 84px;
        --pearl-radius: 28px;
        --pearl-slice: 56;
        --pearl-font: 17px;
        --pearl-button: 48px;
        --pearl-padding: 16px;
    }
}

@container pearl-composer (min-width: 304px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "03";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-03-304.webp');
        --pearl-height: 86px;
        --pearl-radius: 30px;
        --pearl-slice: 60;
        --pearl-font: 17px;
        --pearl-button: 48px;
        --pearl-padding: 16px;
    }
}

@container pearl-composer (min-width: 336px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "04";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-04-336.webp');
        --pearl-height: 88px;
        --pearl-radius: 32px;
        --pearl-slice: 64;
        --pearl-font: 17px;
        --pearl-button: 50px;
        --pearl-padding: 18px;
    }
}

@container pearl-composer (min-width: 368px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "05";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-05-368.webp');
        --pearl-height: 90px;
        --pearl-radius: 34px;
        --pearl-slice: 68;
        --pearl-font: 18px;
        --pearl-button: 52px;
        --pearl-padding: 18px;
    }
}

@container pearl-composer (min-width: 400px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "06";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-06-400.webp');
        --pearl-height: 92px;
        --pearl-radius: 36px;
        --pearl-slice: 72;
        --pearl-font: 18px;
        --pearl-button: 54px;
        --pearl-padding: 20px;
    }
}

@container pearl-composer (min-width: 440px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "07";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-07-440.webp');
        --pearl-height: 94px;
        --pearl-radius: 38px;
        --pearl-slice: 76;
        --pearl-font: 18px;
        --pearl-button: 56px;
        --pearl-padding: 20px;
    }
}

@container pearl-composer (min-width: 480px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "08";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-08-480.webp');
        --pearl-height: 94px;
        --pearl-radius: 40px;
        --pearl-slice: 80;
        --pearl-font: 18px;
        --pearl-button: 56px;
        --pearl-padding: 20px;
    }
}

@container pearl-composer (min-width: 520px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "09";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-09-520.webp');
        --pearl-height: 96px;
        --pearl-radius: 42px;
        --pearl-slice: 84;
        --pearl-font: 19px;
        --pearl-button: 58px;
        --pearl-padding: 22px;
    }
}

@container pearl-composer (min-width: 568px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "10";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-10-568.webp');
        --pearl-height: 96px;
        --pearl-radius: 44px;
        --pearl-slice: 88;
        --pearl-font: 19px;
        --pearl-button: 58px;
        --pearl-padding: 22px;
    }
}

@container pearl-composer (min-width: 616px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "11";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-11-616.webp');
        --pearl-height: 98px;
        --pearl-radius: 46px;
        --pearl-slice: 92;
        --pearl-font: 19px;
        --pearl-button: 60px;
        --pearl-padding: 22px;
    }
}

@container pearl-composer (min-width: 664px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "12";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-12-664.webp');
        --pearl-height: 100px;
        --pearl-radius: 46px;
        --pearl-slice: 92;
        --pearl-font: 20px;
        --pearl-button: 60px;
        --pearl-padding: 24px;
    }
}

@container pearl-composer (min-width: 720px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "13";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-13-720.webp');
        --pearl-height: 102px;
        --pearl-radius: 48px;
        --pearl-slice: 96;
        --pearl-font: 20px;
        --pearl-button: 62px;
        --pearl-padding: 24px;
    }
}

@container pearl-composer (min-width: 784px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "14";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-14-784.webp');
        --pearl-height: 104px;
        --pearl-radius: 49px;
        --pearl-slice: 98;
        --pearl-font: 20px;
        --pearl-button: 62px;
        --pearl-padding: 26px;
    }
}

@container pearl-composer (min-width: 856px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "15";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-15-856.webp');
        --pearl-height: 106px;
        --pearl-radius: 50px;
        --pearl-slice: 100;
        --pearl-font: 21px;
        --pearl-button: 64px;
        --pearl-padding: 26px;
    }
}

@container pearl-composer (min-width: 936px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "16";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-16-936.webp');
        --pearl-height: 108px;
        --pearl-radius: 51px;
        --pearl-slice: 102;
        --pearl-font: 21px;
        --pearl-button: 64px;
        --pearl-padding: 28px;
    }
}

@container pearl-composer (min-width: 1024px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "17";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-17-1024.webp');
        --pearl-height: 110px;
        --pearl-radius: 52px;
        --pearl-slice: 104;
        --pearl-font: 22px;
        --pearl-button: 66px;
        --pearl-padding: 28px;
    }
}

@container pearl-composer (min-width: 1120px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "18";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-18-1120.webp');
        --pearl-height: 112px;
        --pearl-radius: 53px;
        --pearl-slice: 106;
        --pearl-font: 22px;
        --pearl-button: 68px;
        --pearl-padding: 30px;
    }
}

@container pearl-composer (min-width: 1280px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "19";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-19-1280.webp');
        --pearl-height: 114px;
        --pearl-radius: 54px;
        --pearl-slice: 108;
        --pearl-font: 22px;
        --pearl-button: 68px;
        --pearl-padding: 32px;
    }
}

@container pearl-composer (min-width: 1440px) {
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-variant: "20";
        --pearl-frame: url('/shared/theme-assets/pearl-forms-v6/form-20-1440.webp');
        --pearl-height: 116px;
        --pearl-radius: 55px;
        --pearl-slice: 110;
        --pearl-font: 23px;
        --pearl-button: 70px;
        --pearl-padding: 32px;
    }
}

@keyframes pearl-composer-edge {
    to { --reflecta-pearl-light: 360deg; }
}

@media (max-width: 620px) {
    html.loop-page[data-visual-theme="pearl"] body { font-size: 17px; }
    html.loop-page[data-visual-theme="pearl"] .brand__name { font-size: 26px; }
    html.loop-page[data-visual-theme="pearl"] .welcome .welcome-lead { font-size: 18px; }
    html.loop-page[data-visual-theme="pearl"] .message-body,
    html.loop-page[data-visual-theme="pearl"] .message.assistant .message-body { font-size: 18px; }
    html.loop-page[data-visual-theme="pearl"] .message.assistant .message-body,
    html.loop-page[data-visual-theme="pearl"] .message.user .message-body { padding: 18px; }
    html.loop-page[data-visual-theme="pearl"] .message.user .message-body { max-width: 94%; }
    html.loop-page[data-visual-theme="pearl"] .topic-grid { grid-template-columns: minmax(0, 1fr); }
    html.loop-page[data-visual-theme="pearl"] .topic-button { min-height: 78px; padding: 14px 18px; }
    html.loop-page[data-visual-theme="pearl"] .topic-text { font-size: 17px; }
    html.loop-page[data-visual-theme="pearl"] .composer-wrap { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
    html.loop-page[data-visual-theme="pearl"] .composer-context { gap: 0 8px; padding-bottom: 4px; }
    html.loop-page[data-visual-theme="pearl"] .composer-context .context-button { min-width: 0; }
    html.loop-page[data-visual-theme="pearl"] .composer-context .context-button span:first-child {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        white-space: normal;
        text-align: left;
    }
    html.loop-page[data-visual-theme="pearl"] .composer-context button { font-size: 14px; }
    html.loop-page[data-visual-theme="pearl"] .composer-footer { display: block; gap: 0; padding: 6px 0 0; }
    html.loop-page[data-visual-theme="pearl"] .composer-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; width: 100%; }
    html.loop-page[data-visual-theme="pearl"] #review-button,
    html.loop-page[data-visual-theme="pearl"] #pdf-button,
    html.loop-page[data-visual-theme="pearl"] #guide-button { font-size: 14px; }
    html.loop-page[data-visual-theme="pearl"] #guide-button { grid-column: 1 / -1; }
    html.loop-page[data-visual-theme="pearl"] #composer-hint { display: block; width: 100%; min-width: 0; margin-top: 4px; text-align: left; font-size: 13px; }
}

/* Место для беседы при открытой экранной клавиатуре и в альбомном положении. */
@media (max-height: 500px) {
    html.loop-page[data-visual-theme="pearl"] .composer-wrap { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-height: 68px;
        --pearl-radius: 28px;
        --pearl-button: 48px;
        --pearl-font: 18px;
        --pearl-padding: 18px;
        padding-block: 8px;
    }
    html.loop-page[data-visual-theme="pearl"] #message { min-height: 44px; padding-block: 8px; max-height: 80px; }
    html.loop-page[data-visual-theme="pearl"] .composer-context { padding-bottom: 2px; gap: 0 8px; }
    html.loop-page[data-visual-theme="pearl"] .composer-context button { min-height: 36px; font-size: 14px; }
    html.loop-page[data-visual-theme="pearl"] .composer-footer { padding-top: 4px; }
    html.loop-page[data-visual-theme="pearl"] .composer-tools { display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: thin; }
    html.loop-page[data-visual-theme="pearl"] .composer-tools button { flex: none; white-space: nowrap; min-height: 40px !important; }
    html.loop-page[data-visual-theme="pearl"] #composer-hint { display: none; }
}

@container pearl-viewport (max-height: 500px) {
    html.loop-page[data-visual-theme="pearl"] .composer-wrap { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
    html.loop-page[data-visual-theme="pearl"] #composer {
        --pearl-height: 68px;
        --pearl-radius: 28px;
        --pearl-button: 48px;
        --pearl-font: 18px;
        --pearl-padding: 18px;
        padding-block: 8px;
    }
    html.loop-page[data-visual-theme="pearl"] #message { min-height: 44px; padding-block: 8px; max-height: 80px; }
    html.loop-page[data-visual-theme="pearl"] .composer-context { padding-bottom: 2px; gap: 0 8px; }
    html.loop-page[data-visual-theme="pearl"] .composer-context button { min-height: 36px; font-size: 14px; }
    html.loop-page[data-visual-theme="pearl"] .composer-footer { padding-top: 4px; }
    html.loop-page[data-visual-theme="pearl"] .composer-tools { display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: thin; }
    html.loop-page[data-visual-theme="pearl"] .composer-tools button { flex: none; white-space: nowrap; min-height: 40px !important; }
    html.loop-page[data-visual-theme="pearl"] #composer-hint { display: none; }
}

html.loop-page[data-visual-theme="pearl"][data-motion="off"] #composer::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
    html.loop-page[data-visual-theme="pearl"] #composer::after { animation: none; }
    html.loop-page[data-visual-theme="pearl"] #composer,
    html.loop-page #send.send-button { transition: none; }
}

@media (forced-colors: active) {
    html.loop-page[data-visual-theme="pearl"] #composer::before,
    html.loop-page[data-visual-theme="pearl"] #composer::after,
    html.loop-page[data-visual-theme="pearl"] #send.send-button::before { display: none; }
    html.loop-page[data-visual-theme="pearl"] #composer { border: 2px solid CanvasText; background: Canvas; }
    html.loop-page[data-visual-theme="pearl"] #message,
    html.loop-page[data-visual-theme="pearl"] #message::placeholder { color: CanvasText; -webkit-text-fill-color: CanvasText; }
    html.loop-page #send.send-button { border: 2px solid ButtonText; color: ButtonText; background: ButtonFace; opacity: 1; }
    html.loop-page #send.send-button:disabled { color: GrayText; }
}