/* Talkie Agent chat box. The panel, head, log, bubbles and composer come
       from partials-live-chat-widget-1.css (.tba-chat); this adds the
       pre-chat form, the phone row and the links row. */
    .tba-talkie [hidden] {
        display: none !important;
    }

    .tba-talkie[data-state="form"] .tba-chat__log,
    .tba-talkie[data-state="form"] .tba-chat__composer,
    .tba-talkie[data-state="chat"] .tba-talkie__form {
        display: none;
    }

    .tba-talkie[data-state="form"] {
        height: auto;
        min-height: 0;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    .tba-talkie__form {
        display: flex;
        flex-direction: column;
        padding: 16px 18px 12px;
    }

    .tba-talkie__intro {
        margin: 0 0 14px;
        color: var(--tba-chat-text);
        font-size: 14px;
    }

    .tba-talkie__label {
        margin: 0 0 6px;
        color: var(--tba-chat-muted);
        font-size: 12px;
        font-weight: 600;
    }

    .tba-talkie__input,
    .tba-talkie__country {
        width: 100%;
        margin: 0 0 12px;
        padding: 11px 12px;
        border: 1px solid var(--tba-chat-border) !important;
        border-radius: 12px;
        outline: 0;
        background: var(--tba-chat-input-bg) !important;
        box-shadow: none;
        color: var(--tba-chat-text) !important;
        font: inherit;
        font-size: 16px; /* 16px: iOS does not zoom the page on focus */
        line-height: 1.3;
    }

    .tba-talkie__input:focus,
    .tba-talkie__country:focus {
        border-color: var(--tba-chat-blue) !important;
        box-shadow: 0 0 0 3px rgba(0, 115, 252, 0.18);
    }

    .tba-talkie__input[aria-invalid="true"] {
        border-color: #F87171 !important;
    }

    .tba-talkie__phone {
        display: flex;
        align-items: flex-start;
        gap: 6px;
    }

    .tba-talkie__country {
        flex: 0 0 auto;
        width: auto;
        padding-right: 6px;
        appearance: auto;
    }

    .tba-talkie__code {
        flex: none;
        display: inline-flex;
        align-items: center;
        height: 44px;
        padding: 0 2px;
        color: var(--tba-chat-text);
        font-size: 16px;
        font-weight: 600;
    }

    .tba-talkie__phone .tba-talkie__input {
        flex: 1;
        min-width: 0;
    }

    .tba-talkie__error {
        margin: -4px 0 10px;
        color: #F87171;
        font-size: 12px;
    }

    .tba-talkie__submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 46px;
        padding: 10px 16px;
        border: 0;
        border-radius: 12px;
        background: var(--tba-chat-blue);
        color: #fff !important;
        font-family: var(--tk-heading-font, 'TK Heading', Poppins, system-ui, sans-serif);
        font-size: 15px;
        font-weight: 700;
        box-shadow: 0 6px 18px rgba(0, 115, 252, 0.25);
        cursor: pointer;
        transition: background-color 150ms ease;
    }

    .tba-talkie__submit:hover,
    .tba-talkie__submit:focus-visible {
        background: var(--tba-chat-blue-hover);
    }

    .tba-talkie__submit[disabled] {
        opacity: 0.7;
        cursor: progress;
    }

    .tba-talkie__note {
        margin: 10px 0 0;
        color: var(--tba-chat-muted);
        font-size: 11px;
        text-align: center;
    }

    /* Phones: 16px in the message box too, so iOS does not zoom. */
    .tba-talkie .tba-chat__input {
        font-size: 16px;
    }

    .tba-talkie .tba-chat__bubble {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .tba-talkie .tba-chat__row.is-pending {
        opacity: 0.6;
    }

    .tba-talkie__links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 6px 12px 10px;
        color: var(--tba-chat-muted);
        font-size: 11px;
    }

    .tba-talkie__links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid var(--tba-chat-border);
        border-radius: 50%;
        background: var(--tba-chat-surface);
        color: var(--tba-chat-text) !important;
        text-decoration: none;
    }

    .tba-talkie__links a:hover,
    .tba-talkie__links a:focus-visible {
        background: var(--tba-chat-surface-hover);
        color: var(--tba-chat-blue) !important;
    }

    .tba-talkie__links svg {
        width: 20px;
        height: 20px;
    }

    .tba-talkie__links a.tba-talkie__wa {
        color: #25D366 !important;
    }

    .tba-talkie__links {
        font-size: 12px;
    }

    /* A reply arrived while the box was closed. */
    .tba-chat-launcher.has-unread .tba-chat-launcher__pip {
        top: 6px;
        left: 6px;
        width: 12px;
        height: 12px;
        background: #EF4444;
    }

    @media (max-width: 575.98px) {
        .tba-talkie[data-state="form"] {
            height: auto;
        }
    }

/* Files in the chat (picture, video, or a download card) */
.tba-talkie .tba-chat__attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--tba-chat-muted);
    cursor: pointer;
}

.tba-talkie .tba-chat__attach:hover:not(:disabled) {
    color: var(--tba-chat-blue);
}

.tba-talkie .tba-chat__attach:disabled {
    opacity: 0.4;
    cursor: default;
}

.tba-talkie .tba-chat__attach svg {
    width: 19px;
    height: 19px;
}

.tba-talkie .tba-chat__media {
    display: block;
    max-width: min(240px, 100%);
    border-radius: 14px;
    overflow: hidden;
    background: var(--tba-chat-agent-bubble);
}

.tba-talkie .tba-chat__media img,
.tba-talkie video.tba-chat__media {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

.tba-talkie .tba-chat__file {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 240px;
    padding: 10px 14px;
    border: 1px solid var(--tba-chat-border);
    border-radius: 14px;
    background: var(--tba-chat-agent-bubble);
    color: var(--tba-chat-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.tba-talkie .tba-chat__file strong {
    font-size: 14px;
}

.tba-talkie .tba-chat__file span {
    font-size: 12px;
    color: var(--tba-chat-muted);
}