.hostillaAssistantPage {
    margin: 0;
    background: #f6f8f3;
    color: #17201a;
    font-family: Arial, Helvetica, sans-serif;
}

.hostillaAssistantPage * {
    box-sizing: border-box;
}

.hostillaAssistantApp {
    width: min(1180px, calc(100% - 32px));
    margin: 24px auto 48px;
}

.hostillaAssistantTop {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
    padding: 8px 18px;
    border: 1px solid #dbe3d7;
    border-radius: 8px;
    background: #ffffff;
}

.hostillaAssistantBrand img {
    display: block;
    width: auto;
    height: 44px;
    border: 0;
}

.hostillaAssistantTop > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hostillaAssistantTop > div a {
    padding: 9px 11px;
    border-radius: 6px;
    color: #315c1d;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.hostillaAssistantTop > div a:hover,
.hostillaAssistantTop > div a:focus {
    background: #f3f8ef;
    outline: 2px solid #dfcc64;
}

.hostillaAssistantHero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: center;
    min-height: 300px;
    overflow: hidden;
    border: 1px solid #dbe7d3;
    border-radius: 8px;
    background: #ffffff;
}

.hostillaAssistantHeroCopy {
    padding: 42px 48px;
}

.hostillaAssistantEyebrow {
    margin: 0 0 10px;
    color: #4a871e;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.hostillaAssistantHero h1 {
    margin: 0;
    max-width: 720px;
    color: #17201a;
    font-size: 38px;
    line-height: 1.14;
    letter-spacing: 0;
}

.hostillaAssistantHero p:not(.hostillaAssistantEyebrow) {
    max-width: 720px;
    margin: 16px 0 0;
    color: #526056;
    font-size: 17px;
    line-height: 1.65;
}

.hostillaAssistantHero > img {
    display: block;
    width: 260px;
    height: 300px;
    padding: 10px 8px 0;
    object-fit: contain;
    object-position: 50% 100%;
    border-left: 1px solid #e3eadf;
}

.hostillaAssistantScope {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.hostillaAssistantScope span {
    padding: 7px 10px;
    border: 1px solid #cfe2c3;
    border-radius: 6px;
    background: #f2f8ed;
    color: #376c17;
    font-size: 13px;
    font-weight: 700;
}

.hostillaAssistantMain {
    margin-top: 24px;
}

.hostillaAssistantConversation {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    min-height: 560px;
    overflow: hidden;
    border: 1px solid #dbe3d7;
    border-radius: 8px;
    background: #ffffff;
}

.hostillaAssistantPrompt,
.hostillaAssistantChatShell {
    padding: 32px;
}

.hostillaAssistantPrompt {
    background: #f2f7ee;
    border-right: 1px solid #dbe3d7;
}

.hostillaAssistantChatShell {
    display: flex;
    min-width: 0;
    min-height: 560px;
    flex-direction: column;
    gap: 0;
    background: #ffffff;
}

.hostillaAssistantPrompt h2,
.hostillaAssistantRouting h2,
.hostillaAssistantSupport h2 {
    margin: 0;
    color: #17201a;
    font-size: 23px;
    line-height: 1.3;
    letter-spacing: 0;
}

.hostillaAssistantPrompt > p,
.hostillaAssistantRouting p,
.hostillaAssistantSupport p {
    margin: 10px 0 0;
    color: #5c685f;
    line-height: 1.55;
}

.hostillaAssistantForm {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #e1e8de;
    background: #ffffff;
}

.hostillaAssistantForm label {
    display: block;
    margin-bottom: 7px;
    color: #253027;
    font-size: 13px;
    font-weight: 700;
}

.hostillaAssistantForm > p {
    margin: 8px 0 0;
    color: #667268;
    font-size: 12px;
    line-height: 1.35;
}

.hostillaAssistantInputRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.hostillaAssistantInputRow textarea {
    display: block;
    width: 100%;
    min-height: 50px;
    max-height: 140px;
    resize: vertical;
    padding: 12px 13px;
    border: 1px solid #9eafa0;
    border-radius: 6px;
    background: #ffffff;
    color: #17201a;
    font: inherit;
    line-height: 1.45;
}

.hostillaAssistantInputRow textarea:focus {
    outline: 3px solid #e6d77a;
    outline-offset: 2px;
    border-color: #56872e;
}

.hostillaAssistantInputRow button,
.hostillaAssistantAnswerActions a,
.hostillaAssistantRecommendation a,
.hostillaAssistantRouting a,
.hostillaAssistantSupport > a,
.hostillaAssistantSupportActions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 10px 18px;
    border: 1px solid #43821c;
    border-radius: 6px;
    background: #4ca51b;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.hostillaAssistantInputRow button {
    min-width: 104px;
    margin-top: 0;
    font: inherit;
}

.hostillaAssistantInputRow button:hover,
.hostillaAssistantAnswerActions a:hover,
.hostillaAssistantRecommendation a:hover,
.hostillaAssistantRouting a:hover,
.hostillaAssistantSupport > a:hover,
.hostillaAssistantSupportActions a:hover {
    background: #3f8d15;
}

.hostillaAssistantSupportActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.hostillaAssistantSupportActions a.is-secondary {
    background: #ffffff;
    color: #315b1c;
}

.hostillaAssistantSupportActions a.is-secondary:hover {
    background: #f4f8f0;
}

.hostillaAssistantInputRow button:disabled {
    cursor: wait;
    opacity: .7;
}

.hostillaAssistantSuggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.hostillaAssistantSuggestions button {
    padding: 7px 9px;
    border: 1px solid #bdcfb3;
    border-radius: 6px;
    background: #ffffff;
    color: #315b1c;
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.hostillaAssistantSuggestions button:hover,
.hostillaAssistantSuggestions button:focus {
    border-color: #d0b93b;
    outline: 2px solid #efe39a;
}

.hostillaAssistantResult {
    min-width: 0;
    background: #ffffff;
}

.hostillaAssistantWelcome {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    border-left: 4px solid #78b643;
    background: #f8faf7;
}

.hostillaAssistantWelcome strong {
    color: #2b6511;
    font-size: 20px;
}

.hostillaAssistantWelcome p {
    margin: 10px 0 0;
    color: #57635a;
    line-height: 1.6;
}

.hostillaAssistantLoading {
    display: flex;
    min-height: 250px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #3b6e20;
    font-weight: 700;
}

.hostillaAssistantLoading::before {
    width: 30px;
    height: 30px;
    content: "";
    border: 3px solid #cfe3c2;
    border-top-color: #4ca51b;
    border-radius: 50%;
    animation: hostillaAssistantSpin .8s linear infinite;
}

@keyframes hostillaAssistantSpin {
    to { transform: rotate(360deg); }
}

.hostillaAssistantAnswer h2 {
    margin: 0;
    color: #17201a;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: 0;
}

.hostillaAssistantAnswer > p {
    margin: 14px 0 0;
    color: #39443c;
    line-height: 1.68;
}

.hostillaAssistantProvider {
    display: inline-block;
    margin-bottom: 10px;
    color: #4b8425;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.hostillaAssistantAnswerActions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.hostillaAssistantAnswerActions a.is-secondary {
    background: #ffffff;
    color: #376c17;
}

.hostillaAssistantRecommendation {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid #cfe2c3;
    border-left: 4px solid #4ca51b;
    border-radius: 6px;
    background: #f4f9f0;
}

.hostillaAssistantRecommendation.is-datahouse {
    border-color: #d9c869;
    border-left-color: #c0a11a;
    background: #fffdf1;
}

.hostillaAssistantRecommendation h3 {
    margin: 0;
    color: #233024;
    font-size: 18px;
}

.hostillaAssistantRecommendation p {
    margin: 8px 0 14px;
    color: #4f5b52;
    line-height: 1.55;
}

.hostillaAssistantRecommendation a {
    min-height: 38px;
    padding: 8px 13px;
    font-size: 13px;
}

.hostillaAssistantRelated {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e0e6dd;
}

.hostillaAssistantRelated strong {
    display: block;
    margin-bottom: 8px;
}

.hostillaAssistantRelated a {
    display: block;
    padding: 7px 0;
    color: #397416;
    text-decoration: underline;
    text-decoration-color: #d1bb44;
    text-underline-offset: 3px;
}

.hostillaAssistantFollowups {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e0e6dd;
}

.hostillaAssistantFollowupToggle {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid #c8d8c0;
    border-radius: 6px;
    background: #f8fbf6;
    color: #253027;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.hostillaAssistantFollowupToggle:hover,
.hostillaAssistantFollowupToggle:focus {
    border-color: #c7ad26;
    outline: 2px solid #efe39a;
    background: #fffdf3;
}

.hostillaAssistantFollowupArrow {
    flex: 0 0 auto;
    color: #4cae1c;
    font-size: 20px;
    line-height: 1;
    transition: transform 160ms ease;
}

.hostillaAssistantFollowupToggle[aria-expanded="true"] .hostillaAssistantFollowupArrow {
    transform: rotate(180deg);
}

.hostillaAssistantFollowupButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.hostillaAssistantFollowupButtons[hidden] {
    display: none;
}

.hostillaAssistantFollowupButtons button {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #b9cdb0;
    border-radius: 6px;
    background: #f8fbf6;
    color: #315b1c;
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.hostillaAssistantFollowupButtons button:hover,
.hostillaAssistantFollowupButtons button:focus {
    border-color: #c7ad26;
    outline: 2px solid #efe39a;
    background: #fffdf3;
}

.hostillaAssistantError {
    padding: 18px;
    border: 1px solid #d69191;
    border-radius: 6px;
    background: #fff7f7;
    color: #761b1b;
    line-height: 1.55;
}

.hostillaAssistantRouting {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.hostillaAssistantRouting > div {
    padding: 28px;
    border: 1px solid #dbe3d7;
    border-radius: 8px;
    background: #ffffff;
}

.hostillaAssistantRouting > div > span {
    display: block;
    margin-bottom: 8px;
    color: #4c871f;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.hostillaAssistantRouting a {
    margin-top: 18px;
}

.hostillaAssistantSupport {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 26px 30px;
    border: 1px solid #d9dfd5;
    border-radius: 8px;
    background: #ffffff;
}

.hostillaAssistantEmbed {
    background: #ffffff;
}

.hostillaAssistantEmbed .hostillaAssistantApp {
    width: 100%;
    margin: 0;
}

.hostillaAssistantEmbed .hostillaAssistantTop {
    display: none;
}

.hostillaAssistantEmbed .hostillaAssistantHero {
    grid-template-columns: minmax(0, 1fr) 110px;
    min-height: 130px;
    border: 0;
    border-bottom: 1px solid #dce5d8;
    border-radius: 0;
}

.hostillaAssistantEmbed .hostillaAssistantHeroCopy {
    padding: 18px 20px;
}

.hostillaAssistantEmbed .hostillaAssistantHero h1 {
    font-size: 23px;
}

.hostillaAssistantEmbed .hostillaAssistantHero p:not(.hostillaAssistantEyebrow),
.hostillaAssistantEmbed .hostillaAssistantScope {
    display: none;
}

.hostillaAssistantEmbed .hostillaAssistantHero > img {
    width: 110px;
    height: 130px;
}

.hostillaAssistantEmbed .hostillaAssistantMain {
    margin: 0;
}

.hostillaAssistantEmbed .hostillaAssistantConversation {
    display: flex;
    min-height: calc(100vh - 130px);
    flex-direction: column;
    border: 0;
    border-radius: 0;
}

.hostillaAssistantEmbed .hostillaAssistantPrompt,
.hostillaAssistantEmbed .hostillaAssistantChatShell {
    padding: 20px;
}

.hostillaAssistantEmbed .hostillaAssistantPrompt {
    border-right: 0;
    border-bottom: 1px solid #dce5d8;
}

.hostillaAssistantEmbed .hostillaAssistantChatShell {
    min-height: calc(100vh - 214px);
    padding-top: 14px;
}

.hostillaAssistantEmbed .hostillaAssistantPrompt h2 {
    font-size: 18px;
}

.hostillaAssistantEmbed .hostillaAssistantPrompt > p,
.hostillaAssistantEmbed .hostillaAssistantSuggestions,
.hostillaAssistantEmbed .hostillaAssistantRouting,
.hostillaAssistantEmbed .hostillaAssistantSupport {
    display: none;
}

.hostillaAssistantEmbed .hostillaAssistantForm {
    padding-top: 12px;
}

.hostillaAssistantEmbed .hostillaAssistantInputRow textarea {
    min-height: 46px;
}

@media (max-width: 820px) {
    .hostillaAssistantApp {
        width: min(100% - 20px, 680px);
        margin-top: 10px;
    }

    .hostillaAssistantTop {
        margin: 0;
        border-width: 0 0 1px;
        border-radius: 0;
    }

    .hostillaAssistantHero {
        grid-template-columns: minmax(0, 1fr) 170px;
    }

    .hostillaAssistantHeroCopy {
        padding: 30px;
    }

    .hostillaAssistantHero h1 {
        font-size: 30px;
    }

    .hostillaAssistantHero > img {
        width: 170px;
        height: 100%;
        min-height: 280px;
    }

    .hostillaAssistantConversation {
        display: block;
    }

    .hostillaAssistantPrompt {
        border-right: 0;
        border-bottom: 1px solid #dbe3d7;
    }

    .hostillaAssistantChatShell {
        min-height: 520px;
    }
}

@media (max-width: 560px) {
    .hostillaAssistantApp {
        width: 100%;
        margin: 0;
    }

    .hostillaAssistantTop {
        min-height: 56px;
        padding: 6px 10px;
    }

    .hostillaAssistantBrand img {
        height: 36px;
    }

    .hostillaAssistantTop > div {
        gap: 2px;
    }

    .hostillaAssistantTop > div a {
        padding: 8px 6px;
        font-size: 12px;
    }

    .hostillaAssistantHero {
        grid-template-columns: minmax(0, 1fr) 108px;
        min-height: 178px;
        border-width: 0 0 1px;
        border-radius: 0;
    }

    .hostillaAssistantHeroCopy {
        padding: 20px 16px;
    }

    .hostillaAssistantEyebrow {
        font-size: 11px;
    }

    .hostillaAssistantHero h1 {
        font-size: 24px;
    }

    .hostillaAssistantHero p:not(.hostillaAssistantEyebrow) {
        font-size: 14px;
        line-height: 1.45;
    }

    .hostillaAssistantScope {
        display: none;
    }

    .hostillaAssistantHero > img {
        width: 108px;
        min-height: 178px;
    }

    .hostillaAssistantMain {
        margin-top: 0;
    }

    .hostillaAssistantConversation {
        border-width: 0 0 1px;
        border-radius: 0;
    }

    .hostillaAssistantPrompt,
    .hostillaAssistantChatShell {
        padding: 20px 16px;
    }

    .hostillaAssistantInputRow {
        grid-template-columns: 1fr;
    }

    .hostillaAssistantInputRow button {
        width: 100%;
    }

    .hostillaAssistantRouting {
        grid-template-columns: 1fr;
        padding: 0 10px;
    }

    .hostillaAssistantSupport {
        align-items: stretch;
        flex-direction: column;
        margin: 20px 10px;
        padding: 22px;
    }

    .hostillaAssistantSupportActions {
        justify-content: stretch;
    }

    .hostillaAssistantSupportActions a {
        flex: 1 1 190px;
    }
}

/* v675: selectable Hostilla dragon and dragoness personas. */
.hostillaAssistantPersonaPicker {
    display: grid;
    width: min(100%, 560px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.hostillaAssistantPersonaPicker button,
.hostillaAssistantStart .hostillaAssistantPersonaPicker button {
    display: grid;
    min-width: 0;
    min-height: 72px;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 12px 6px 7px;
    border: 1px solid #b8cab0;
    border-radius: 7px;
    background: #ffffff;
    color: #263629;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hostillaAssistantPersonaPicker button:hover,
.hostillaAssistantPersonaPicker button:focus,
.hostillaAssistantStart .hostillaAssistantPersonaPicker button:hover,
.hostillaAssistantStart .hostillaAssistantPersonaPicker button:focus {
    border-color: #c3aa2c;
    outline: 2px solid #efe39a;
    outline-offset: 1px;
    background: #fffdf4;
}

.hostillaAssistantPersonaPicker button.is-active {
    border-color: #4d9425;
    box-shadow: inset 0 0 0 1px #4d9425;
    background: #eff8e9;
}

.hostillaAssistantPersonaPicker img {
    display: block;
    width: 56px;
    height: 58px;
    object-fit: contain;
    object-position: 50% 42%;
}

.hostillaAssistantPersonaPicker span,
.hostillaAssistantPersonaPicker strong,
.hostillaAssistantPersonaPicker small {
    display: block;
    min-width: 0;
}

.hostillaAssistantPersonaPicker strong {
    color: #24461c;
    font-size: 14px;
    line-height: 1.2;
}

.hostillaAssistantPersonaPicker small {
    margin-top: 3px;
    color: #647066;
    font-size: 11px;
    line-height: 1.2;
}

.hostillaAssistantChatIdentity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.hostillaAssistantChatIdentity > strong {
    flex: 0 1 auto;
    color: #263829;
    font-size: 14px;
}

.hostillaAssistantPersonaPicker.is-compact {
    width: auto;
    grid-template-columns: repeat(2, 126px);
    gap: 6px;
    margin: 0;
}

.hostillaAssistantPersonaPicker.is-compact button {
    min-height: 42px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px;
    padding: 3px 7px 3px 3px;
}

.hostillaAssistantPersonaPicker.is-compact img {
    width: 36px;
    height: 38px;
}

.hostillaAssistantPersonaPicker.is-compact strong {
    font-size: 12px;
}

.hostillaAssistantPersonaPicker.is-compact small {
    display: none;
}

@media (max-width: 760px) {
    .hostillaAssistantChatIdentity {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
    }

    .hostillaAssistantPersonaPicker.is-compact {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .hostillaAssistantStart {
        justify-content: flex-start;
        overflow-y: auto;
    }

    .hostillaAssistantPersonaPicker {
        gap: 7px;
        margin-top: 16px;
    }

    .hostillaAssistantPersonaPicker button,
    .hostillaAssistantStart .hostillaAssistantPersonaPicker button {
        min-height: 62px;
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 6px;
        padding: 4px 6px 4px 3px;
    }

    .hostillaAssistantPersonaPicker img {
        width: 44px;
        height: 52px;
    }

    .hostillaAssistantPersonaPicker strong {
        font-size: 12px;
    }

    .hostillaAssistantPersonaPicker small {
        font-size: 10px;
    }
}

/* v670: two-stage assistant window with a fixed composer. */
.hostillaAssistantConversation {
    display: block;
    height: min(720px, calc(100vh - 40px));
    min-height: 560px;
}

.hostillaAssistantStart,
.hostillaAssistantChatScreen {
    height: 100%;
    min-height: 0;
}

.hostillaAssistantStart[hidden],
.hostillaAssistantChatScreen[hidden] {
    display: none !important;
}

.hostillaAssistantStart {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 44px;
    text-align: center;
    background: #f7faf5;
}

.hostillaAssistantStart > span {
    color: #4b8525;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.hostillaAssistantStart h2 {
    margin: 12px 0 0;
    color: #17201a;
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: 0;
}

.hostillaAssistantStart p {
    max-width: 640px;
    margin: 16px 0 0;
    color: #536056;
    font-size: 17px;
    line-height: 1.65;
}

.hostillaAssistantStart button {
    min-height: 46px;
    margin-top: 26px;
    padding: 11px 24px;
    border: 1px solid #43821c;
    border-radius: 6px;
    background: #4ca51b;
    color: #ffffff;
    font: 700 15px/1.2 Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.hostillaAssistantStart button:hover,
.hostillaAssistantStart button:focus {
    background: #3f8d15;
    outline: 3px solid #e6d77a;
    outline-offset: 2px;
}

.hostillaAssistantChatScreen {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
}

.hostillaAssistantChatHeader {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 10px 18px;
    border-bottom: 1px solid #dfe7dc;
    background: #f4f8f1;
}

.hostillaAssistantChatHeader > strong {
    color: #263829;
    font-size: 14px;
}

.hostillaAssistantChatHeader .hostillaAssistantConversationTools {
    margin: 0;
}

.hostillaAssistantResult {
    min-height: 0;
    padding: 20px 22px 8px;
    overscroll-behavior: contain;
}

.hostillaAssistantForm {
    flex: 0 0 auto;
    margin: 0;
    padding: 14px 18px 16px;
    border-top: 1px solid #dfe7dc;
    background: #ffffff;
}

.hostillaAssistantForm textarea {
    display: block;
    width: 100%;
    min-height: 50px;
    max-height: 140px;
    resize: none;
    padding: 12px 13px;
    border: 1px solid #9eafa0;
    border-radius: 6px;
    background: #ffffff;
    color: #17201a;
    font: inherit;
    line-height: 1.45;
}

.hostillaAssistantForm textarea:focus {
    border-color: #56872e;
    outline: 3px solid #e6d77a;
    outline-offset: 2px;
}

.hostillaAssistantSpeechInput {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    align-items: stretch;
    gap: 9px;
}

.hostillaAssistantSpeechInput textarea {
    min-width: 0;
}

.hostillaAssistantListenButton {
    display: flex;
    min-width: 0;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 7px 5px;
    border: 1px solid #6d9d54;
    border-radius: 6px;
    background: #eef7e9;
    color: #285b18;
    font: 700 12px/1.1 Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.hostillaAssistantListenButton > span:first-child {
    font-size: 20px;
    line-height: 1;
}

.hostillaAssistantListenButton:hover,
.hostillaAssistantListenButton:focus {
    border-color: #c3a92a;
    outline: 2px solid #efe39a;
    outline-offset: 1px;
    background: #fffdf2;
}

.hostillaAssistantListenButton.is-listening {
    border-color: #a52f2f;
    background: #fff0ed;
    color: #872323;
    animation: hostillaAssistantListening 1.15s ease-in-out infinite;
}

.hostillaAssistantListenButton:disabled {
    cursor: not-allowed;
    opacity: .52;
    animation: none;
}

.hostillaAssistantSpeechStatus {
    min-height: 18px;
    margin-top: 6px;
    color: #607064;
    font-size: 12px;
    line-height: 1.35;
}

.hostillaAssistantSpeechStatus.is-listening,
.hostillaAssistantSpeechStatus.is-speaking {
    color: #2f6d1a;
    font-weight: 700;
}

.hostillaAssistantSpeechStatus.is-error {
    color: #8b2929;
}

.hostillaAssistantVoiceToggle.is-active {
    border-color: #5e913e;
    background: #e9f5e2;
    color: #285d16;
}

@keyframes hostillaAssistantListening {
    0%, 100% { box-shadow: 0 0 0 0 rgba(165, 47, 47, .08); }
    50% { box-shadow: 0 0 0 5px rgba(165, 47, 47, .13); }
}

.hostillaAssistantComposerActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.hostillaAssistantComposerActions button {
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid #43821c;
    border-radius: 6px;
    background: #4ca51b;
    color: #ffffff;
    font: 700 14px/1.2 Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.hostillaAssistantComposerActions button:hover,
.hostillaAssistantComposerActions button:focus {
    background: #3f8d15;
    outline: 2px solid #e6d77a;
    outline-offset: 1px;
}

.hostillaAssistantComposerActions button.is-secondary {
    border-color: #8ca77e;
    background: #ffffff;
    color: #315b1c;
}

.hostillaAssistantComposerActions button.is-secondary:hover,
.hostillaAssistantComposerActions button.is-secondary:focus {
    background: #f2f7ee;
}

.hostillaAssistantComposerActions button:disabled {
    cursor: wait;
    opacity: .7;
}

.hostillaAssistantEmbed .hostillaAssistantHero,
.hostillaAssistantEmbed .hostillaAssistantRouting,
.hostillaAssistantEmbed .hostillaAssistantSupport {
    display: none;
}

.hostillaAssistantEmbed .hostillaAssistantConversation {
    height: 100vh;
    min-height: 0;
}

.hostillaAssistantEmbed .hostillaAssistantStart {
    padding: 28px 24px;
}

.hostillaAssistantEmbed .hostillaAssistantStart h2 {
    font-size: 24px;
}

.hostillaAssistantEmbed .hostillaAssistantStart p {
    font-size: 15px;
}

.hostillaAssistantEmbed .hostillaAssistantResult {
    min-height: 0;
    max-height: none;
    padding: 16px 16px 6px;
}

@media (max-width: 560px) {
    .hostillaAssistantConversation {
        height: 100svh;
        min-height: 520px;
    }

    .hostillaAssistantStart {
        padding: 30px 20px;
    }

    .hostillaAssistantStart h2 {
        font-size: 24px;
    }

    .hostillaAssistantStart p {
        font-size: 15px;
    }

    .hostillaAssistantChatHeader {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 12px;
    }

    .hostillaAssistantChatHeader .hostillaAssistantConversationTools {
        width: 100%;
    }

    .hostillaAssistantChatHeader .hostillaAssistantConversationTools button {
        flex: 1 1 130px;
    }

    .hostillaAssistantResult {
        min-height: 0;
        max-height: none;
        padding: 14px 12px 4px;
    }

    .hostillaAssistantForm {
        padding: 10px 12px 12px;
    }

    .hostillaAssistantComposerActions {
        gap: 8px;
    }

    .hostillaAssistantComposerActions button {
        min-width: 0;
        padding: 9px 7px;
        font-size: 13px;
    }

    .hostillaAssistantSpeechInput {
        grid-template-columns: minmax(0, 1fr) 62px;
        gap: 7px;
    }

    .hostillaAssistantListenButton {
        padding-inline: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hostillaAssistantLoading::before,
    .hostillaAssistantListenButton.is-listening { animation: none; }
    .hostillaAssistantFollowupArrow { transition: none; }
}

.hostillaAssistantConversationTools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.hostillaAssistantConversationTools button,
.hostillaAssistantConsultantButton,
.hostillaAssistantHistoryHead button,
.hostillaAssistantHistoryItem button,
.hostillaAssistantCloseDialog button {
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid #a9bea1;
    border-radius: 6px;
    background: #ffffff;
    color: #315b1c;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.hostillaAssistantConversationTools button:hover,
.hostillaAssistantConversationTools button:focus,
.hostillaAssistantHistoryItem button:hover,
.hostillaAssistantHistoryItem button:focus {
    border-color: #c3a92a;
    outline: 2px solid #efe39a;
    background: #fffdf2;
}

.hostillaAssistantConsultantButton {
    width: 100%;
    margin-top: 14px;
    border-color: #437f24;
    background: #edf6e8;
    color: #2d6117;
}

.hostillaAssistantResult {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.hostillaAssistantMessage {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 18px;
}

.hostillaAssistantMessage.is-user {
    align-items: flex-end;
}

.hostillaAssistantMessageAuthor {
    margin: 0 8px 5px;
    color: #526056;
    font-size: 12px;
    font-weight: 700;
}

.hostillaAssistantBubble {
    max-width: 92%;
    padding: 16px 18px;
    border: 1px solid #d8e2d4;
    border-radius: 8px;
    background: #f8faf7;
    color: #28322b;
    box-shadow: 0 4px 14px rgba(38, 56, 31, .06);
}

.hostillaAssistantMessage.is-user .hostillaAssistantBubble {
    max-width: 78%;
    border-color: #b8d3a9;
    background: #edf6e8;
}

.hostillaAssistantMessage.is-user .hostillaAssistantBubble p {
    margin: 0;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hostillaAssistantMessage .hostillaAssistantAnswer h2 {
    font-size: 19px;
}

.hostillaAssistantMessage .hostillaAssistantAnswer > p {
    margin-top: 9px;
    line-height: 1.58;
    white-space: pre-wrap;
}

.hostillaAssistantMessage .hostillaAssistantAnswerActions,
.hostillaAssistantMessage .hostillaAssistantRecommendation,
.hostillaAssistantMessage .hostillaAssistantRelated,
.hostillaAssistantMessage .hostillaAssistantFollowups {
    margin-top: 14px;
}

.hostillaAssistantMessage .hostillaAssistantAnswerActions a {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
}

.hostillaAssistantMessage .hostillaAssistantLoading {
    min-height: 52px;
    justify-content: flex-start;
}

.hostillaAssistantHistory,
.hostillaAssistantCloseDialog {
    position: fixed;
    z-index: 10020;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(18, 28, 20, .48);
}

.hostillaAssistantHistory[hidden],
.hostillaAssistantCloseDialog[hidden] {
    display: none !important;
}

.hostillaAssistantHistory > div,
.hostillaAssistantCloseDialog > div {
    width: min(620px, 100%);
    max-height: min(76vh, 680px);
    overflow: auto;
    padding: 22px;
    border: 1px solid #d5e0d1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 60px rgba(14, 25, 16, .24);
}

.hostillaAssistantHistoryHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.hostillaAssistantHistoryHead h2,
.hostillaAssistantCloseDialog h2 {
    margin: 0;
    color: #17201a;
    font-size: 22px;
}

.hostillaAssistantHistoryHead button {
    width: 38px;
    min-width: 38px;
    padding: 0;
    font-size: 24px;
}

.hostillaAssistantHistoryItem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 0;
    border-top: 1px solid #e2e8df;
}

.hostillaAssistantHistoryOpen {
    min-width: 0;
    text-align: left;
}

.hostillaAssistantHistoryOpen strong,
.hostillaAssistantHistoryOpen span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hostillaAssistantHistoryOpen span {
    margin-top: 4px;
    color: #68736a;
    font-size: 11px;
    font-weight: 400;
}

.hostillaAssistantHistoryDelete {
    color: #8a2626 !important;
}

.hostillaAssistantHistoryLoading,
.hostillaAssistantHistoryEmpty {
    color: #5e6b61;
    line-height: 1.5;
}

.hostillaAssistantCloseDialog p {
    margin: 12px 0 20px;
    color: #536056;
    line-height: 1.55;
}

.hostillaAssistantCloseDialog > div > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.hostillaAssistantCloseDialog [data-close-continue="1"] {
    border-color: #43821c;
    background: #4ca51b;
    color: #ffffff;
}

.hostillaAssistantCloseDialog [data-close-confirm="1"] {
    color: #762020;
}

.hostillaAssistantEmbed .hostillaAssistantResult {
    min-height: 0;
    max-height: none;
    padding-top: 16px;
}

@media (max-width: 560px) {
    .hostillaAssistantResult {
        min-height: 0;
        max-height: none;
    }

    .hostillaAssistantBubble,
    .hostillaAssistantMessage.is-user .hostillaAssistantBubble {
        max-width: 94%;
        padding: 13px 14px;
    }

    .hostillaAssistantMessage .hostillaAssistantAnswer h2 {
        font-size: 17px;
    }

    .hostillaAssistantHistory,
    .hostillaAssistantCloseDialog {
        padding: 10px;
    }

    .hostillaAssistantHistory > div,
    .hostillaAssistantCloseDialog > div {
        padding: 17px;
    }
}