.linseoo-cai {
    --linseoo-cai-primary: #0877d1;
    --linseoo-cai-ink: #172331;
    --linseoo-cai-muted: #647181;
    --linseoo-cai-border: #d8dfe7;
    --linseoo-cai-surface: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--linseoo-cai-ink);
    line-height: 1.4;
}

.linseoo-cai--floating {
    position: fixed;
    z-index: 99990;
}

.linseoo-cai--bottom-right,
.linseoo-cai--bottom-left {
    bottom: var(--linseoo-cai-launcher-y, 22px);
}

.linseoo-cai--top-right,
.linseoo-cai--top-left {
    top: var(--linseoo-cai-launcher-y, 22px);
}

.linseoo-cai--bottom-right,
.linseoo-cai--top-right {
    right: var(--linseoo-cai-launcher-x, 22px);
}

.linseoo-cai--bottom-left,
.linseoo-cai--top-left {
    left: var(--linseoo-cai-launcher-x, 22px);
}

/* A la izquierda, el boton va delante y la etiqueta detras. */
.linseoo-cai--bottom-left .linseoo-cai__launcher-group,
.linseoo-cai--top-left .linseoo-cai__launcher-group {
    flex-direction: row-reverse;
}

.linseoo-cai--bottom-left .linseoo-cai__panel,
.linseoo-cai--top-left .linseoo-cai__panel {
    margin-right: auto;
}

/* Arriba, el panel se abre por debajo del boton. */
.linseoo-cai--top-right,
.linseoo-cai--top-left {
    flex-direction: column-reverse;
}

.linseoo-cai__launcher-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.linseoo-cai__launcher {
    display: flex;
    min-height: 42px;
    align-items: center;
    border: 0;
    border-radius: 21px;
    padding: 0 18px;
    background: var(--linseoo-cai-primary);
    /* Un tono más claro que el botón, como en la referencia. Si el navegador
       no entiende color-mix se queda con el color principal y sigue bien. */
    background: color-mix(in srgb, var(--linseoo-cai-primary) 78%, #ffffff);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(18, 34, 53, .18);
    cursor: pointer;
}

.linseoo-cai__launcher-button {
    display: grid;
    width: var(--linseoo-cai-launcher-size, 52px);
    height: var(--linseoo-cai-launcher-size, 52px);
    flex: none;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: var(--linseoo-cai-primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(18, 34, 53, .28);
    cursor: pointer;
}

.linseoo-cai--shape-rounded .linseoo-cai__launcher-button {
    border-radius: 16px;
}

.linseoo-cai--shape-square .linseoo-cai__launcher-button {
    border-radius: 4px;
}

.linseoo-cai__launcher-image,
.linseoo-cai__launcher-figure {
    width: 62%;
    height: 62%;
    object-fit: contain;
}

.linseoo-cai__launcher-figure {
    display: block;
    color: #fff;
}

.linseoo-cai__launcher-label:empty {
    display: none;
}

/* Sin esto, el display:flex de arriba gana al atributo hidden y la pastilla
   se seguiria viendo con el texto desactivado. */
.linseoo-cai__launcher[hidden],
.linseoo-cai__launcher-icon[hidden],
.linseoo-cai__launcher-figure[hidden],
.linseoo-cai__launcher-image[hidden] {
    display: none;
}

.linseoo-cai__launcher:hover,
.linseoo-cai__launcher-button:hover {
    filter: brightness(1.06);
}

.linseoo-cai__launcher:focus-visible,
.linseoo-cai__launcher-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .9);
    outline-offset: 2px;
}

.linseoo-cai__launcher-icon {
    font-size: calc(var(--linseoo-cai-launcher-size, 52px) * .46);
    line-height: 1;
}

.linseoo-cai__panel {
    display: flex;
    width: min(390px, calc(100vw - 28px));
    height: min(620px, calc(100vh - 44px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--linseoo-cai-border);
    border-radius: 8px;
    background: var(--linseoo-cai-surface);
    box-shadow: 0 12px 32px rgba(18, 34, 53, .24);
}

.linseoo-cai__panel[hidden] {
    display: none;
}

.linseoo-cai--floating .linseoo-cai__panel {
    position: absolute;
    right: 0;
    bottom: 54px;
}

.linseoo-cai--page {
    width: min(760px, 100%);
    margin: 24px auto;
}

.linseoo-cai--page .linseoo-cai__panel {
    width: 100%;
    height: min(720px, calc(100vh - 120px));
    min-height: 520px;
    box-shadow: 0 4px 16px rgba(18, 34, 53, .12);
}

.linseoo-cai__header {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #1d2b3a;
    color: #fff;
}

.linseoo-cai__header strong,
.linseoo-cai__header span {
    display: block;
}

.linseoo-cai__header span {
    margin-top: 2px;
    color: #cdd7e0;
    font-size: 12px;
}

.linseoo-cai__close {
    border: 0;
    padding: 2px 7px;
    background: transparent;
    color: #d9e1e8;
    font-size: 25px;
    cursor: pointer;
}

.linseoo-cai__avatar {
    min-height: 150px;
    background-color: #e9edf1;
    background-position: center;
    background-size: cover;
}

.linseoo-cai__messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f4f6f8;
}

.linseoo-cai__message {
    max-width: 86%;
    margin: 0 0 12px;
    border: 1px solid var(--linseoo-cai-border);
    border-radius: 6px;
    padding: 9px 11px;
    background: #fff;
    color: var(--linseoo-cai-ink);
}

.linseoo-cai__message--customer {
    margin-left: auto;
    border-color: #a9cce9;
    background: #edf6fc;
}

.linseoo-cai__message--human {
    border-left: 3px solid #d88716;
}

.linseoo-cai__message span {
    display: block;
    margin-bottom: 3px;
    color: var(--linseoo-cai-muted);
    font-size: 11px;
    font-weight: 600;
}

.linseoo-cai__message p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.linseoo-cai__status {
    min-height: 18px;
    padding: 4px 14px;
    color: var(--linseoo-cai-muted);
    font-size: 12px;
}

.linseoo-cai__sections {
    border-top: 1px solid var(--linseoo-cai-border);
    padding: 10px 14px;
    background: #fff;
}

.linseoo-cai__sections[hidden] {
    display: none;
}

.linseoo-cai__sections > strong {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
}

.linseoo-cai__sections > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.linseoo-cai__sections button {
    border: 1px solid #aebac6;
    border-radius: 4px;
    padding: 6px 9px;
    background: #f7f9fb;
    color: var(--linseoo-cai-ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.linseoo-cai__sections button:hover,
.linseoo-cai__sections button.is-selected {
    border-color: var(--linseoo-cai-primary);
    background: #edf6fc;
}

.linseoo-cai__status--error {
    color: #a32620;
}

.linseoo-cai__whatsapp {
    margin: 5px 14px 8px;
    border: 1px solid var(--linseoo-cai-primary);
    border-radius: 4px;
    padding: 7px 10px;
    color: var(--linseoo-cai-primary);
    text-align: center;
    text-decoration: none;
    font-size: 13px;
}

.linseoo-cai__form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    border-top: 1px solid var(--linseoo-cai-border);
    padding: 10px;
    background: #fff;
}

.linseoo-cai__form textarea {
    min-height: 40px;
    max-height: 100px;
    resize: vertical;
    border: 1px solid #bcc7d2;
    border-radius: 4px;
    padding: 9px 10px;
    color: var(--linseoo-cai-ink);
    font: inherit;
    font-size: 14px;
}

.linseoo-cai__form button {
    align-self: stretch;
    border: 1px solid #075fa7;
    border-radius: 4px;
    padding: 0 14px;
    background: var(--linseoo-cai-primary);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.linseoo-cai__form button:disabled {
    opacity: .55;
    cursor: wait;
}

@media (max-width: 520px) {
    .linseoo-cai--floating {
        right: 10px;
        bottom: 10px;
    }

    .linseoo-cai--floating .linseoo-cai__panel {
        position: fixed;
        inset: 8px;
        width: auto;
        height: auto;
    }

    .linseoo-cai__launcher {
        display: none;
    }
}