html,
body {
    margin: 0;
    height: 100%;
    background: transparent;
    font-family: "Public Sans", sans-serif;
}

body {
    color: var(--text, #111827);
    -webkit-tap-highlight-color: transparent;
}

.webchat-shell {
    --primary: #7c3aed;
    --accent: #ede9fe;
    --bg: #ffffff;
    --text: #111827;
    --radius: 26px;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
}

.webchat-shell *,
.webchat-shell *::before,
.webchat-shell *::after {
    box-sizing: border-box;
}

.webchat-header {
    padding: 1rem 1rem .9rem;
}

.webchat-header.theme {
    background: var(--primary);
    color: #fff;
}

.webchat-header-main {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.webchat-header-main.compact {
    align-items: center;
}

.webchat-header-main.text-only {
    width: 100%;
}

.webchat-header-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.webchat-header-copy {
    min-width: 0;
}

.webchat-header-copy strong {
    display: block;
    font-size: 1rem;
    line-height: 1.2;
}

.webchat-header-copy p {
    margin: .2rem 0 0;
    font-size: .84rem;
    opacity: .92;
}

.webchat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-weight: 800;
    flex: none;
}

.webchat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.webchat-icon-button {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
}

.webchat-icon-button svg,
.webchat-primary-card-icon svg,
.webchat-inline-icon,
.webchat-nav-icon {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.webchat-back-button {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.webchat-content {
    overflow: hidden;
    min-height: 0;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 10%, transparent), transparent 30%),
        linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--accent) 32%, white) 100%);
}

.webchat-panel {
    height: 100%;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
}

.webchat-shell button,
.webchat-shell input,
.webchat-shell select,
.webchat-shell textarea,
.webchat-primary-card,
.webchat-list-item-button,
.webchat-primary-button,
.webchat-send-button,
.webchat-option-button,
.webchat-nav-item,
.webchat-file-button,
.webchat-icon-button {
    font-family: inherit;
    transition: none;
    -webkit-tap-highlight-color: transparent;
}

.webchat-primary-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 1rem;
    border: none;
    border-radius: 24px;
    background: #fff;
    color: var(--text);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .08);
    cursor: pointer;
}

.webchat-primary-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 16%, white);
    color: var(--primary);
    flex: none;
}

.webchat-inline-icon {
    flex: none;
    color: #7a6f8c;
}

.webchat-list-block {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: 1rem;
}

.webchat-list-item-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(124, 58, 237, .10);
    border-radius: 18px;
    background: #fff;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.webchat-list-item-button strong,
.webchat-list-item-button span {
    display: block;
}

.webchat-list-item-button small {
    color: #6f6485;
}

.webchat-empty-box,
.webchat-empty-line {
    padding: 1rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(124, 58, 237, .10);
    color: #6f6485;
}

.webchat-empty-state {
    min-height: 100%;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1rem;
    text-align: center;
}

.webchat-empty-state img,
.webchat-empty-art {
    width: 124px;
    height: 124px;
    border-radius: 24px;
    object-fit: cover;
    background: color-mix(in srgb, var(--accent) 58%, white);
}

.webchat-primary-button,
.webchat-send-button {
    border: none;
    background: var(--primary);
    color: #fff;
}

.webchat-primary-button {
    padding: .92rem 1.1rem;
    border-radius: 18px;
    font-weight: 700;
    cursor: pointer;
}

.webchat-panel.conversation {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 0;
    overflow: hidden;
}

.webchat-conversation-body {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
}

.webchat-messages {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 0;
    overflow: auto;
    padding: 1rem 1rem 0;
}

.webchat-msg-row {
    display: flex;
    align-items: flex-end;
    gap: .65rem;
    max-width: 100%;
}

.webchat-msg-row.visitor {
    justify-content: flex-end;
}

.webchat-conversation-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(124, 58, 237, .12);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-weight: 800;
}

.webchat-conversation-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.webchat-msg {
    max-width: 88%;
    padding: .92rem 1rem;
    border-radius: 22px;
    line-height: 1.5;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .05);
}

.webchat-msg-inner {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.webchat-msg-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.webchat-msg.bot,
.webchat-msg.agent {
    margin-right: auto;
    background: #fff;
    border: 1px solid rgba(124, 58, 237, .10);
    border-bottom-left-radius: 10px;
}

.webchat-msg.visitor {
    margin-left: auto;
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 84%, white) 0%, var(--primary) 100%);
    border-bottom-right-radius: 10px;
}

.webchat-msg-options {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.webchat-audio-player {
    width: 100%;
    max-width: 260px;
    display: block;
}

.webchat-attachment-image-link {
    display: block;
}

.webchat-attachment-image {
    width: 100%;
    max-width: 104px;
    display: block;
    border-radius: 10px;
    object-fit: cover;
}

.webchat-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .52rem;
    border-radius: 10px;
    background: rgba(124, 58, 237, .08);
    color: var(--primary);
    font-weight: 600;
    font-size: .72rem;
    text-decoration: none;
    width: fit-content;
    max-width: 140px;
    word-break: break-word;
}

.webchat-option-button {
    border: 1px solid rgba(124, 58, 237, .14);
    background: #fff;
    color: var(--primary);
    border-radius: 14px;
    padding: .72rem .95rem;
    font-size: .84rem;
    font-weight: 700;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.webchat-transfer-card {
    display: grid;
    gap: .7rem;
    margin-top: 1rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid rgba(124, 58, 237, .10);
    border-radius: 22px;
}

.webchat-phone-row {
    display: grid;
    grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
    gap: .65rem;
}

.webchat-transfer-card .iti {
    width: 100%;
}

.webchat-transfer-card input,
.webchat-transfer-card select,
.webchat-search-box input,
.webchat-input-bar input {
    border: 1px solid rgba(124, 58, 237, .12);
    border-radius: 16px;
    padding: .85rem .95rem;
    font: inherit;
    min-width: 0;
}

.webchat-search-box {
    margin-bottom: 1rem;
}

.webchat-search-box input {
    width: 100%;
}

.webchat-input-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .7rem;
    align-items: center;
    padding: .75rem 1rem 1rem;
    background: #fff;
    border-top: 1px solid rgba(124, 58, 237, .10);
}

.webchat-file-button {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(124, 58, 237, .14);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--primary);
    padding: 0;
    flex: none;
    cursor: pointer;
}

.webchat-file-button svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.webchat-input-bar input {
    background: #fff;
    width: 100%;
    min-width: 0;
}

.webchat-send-button {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
    cursor: pointer;
}

.webchat-send-button svg {
    width: 22px;
    height: 22px;
    display: block;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transform: translateX(1px);
}

.webchat-accordion {
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(124, 58, 237, .10);
    padding: .2rem 0;
}

.webchat-accordion summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    padding: .9rem 1rem;
    color: var(--text);
}

.webchat-accordion summary::-webkit-details-marker {
    display: none;
}

.webchat-accordion div {
    padding: 0 1rem 1rem;
    color: #635a71;
    line-height: 1.55;
}

.webchat-article-detail {
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(124, 58, 237, .10);
    padding: 1rem;
    line-height: 1.6;
}

.webchat-article-detail h3 {
    margin: 0 0 .8rem;
}

.webchat-article-body {
    color: #4b3f5f;
    line-height: 1.7;
    word-break: break-word;
}

.webchat-article-body > :first-child {
    margin-top: 0;
}

.webchat-article-body > :last-child {
    margin-bottom: 0;
}

.webchat-article-body a {
    color: var(--primary);
    font-weight: 700;
}

.webchat-article-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: .85rem 0;
    border-radius: 16px;
}

.webchat-article-body pre,
.webchat-article-body code {
    font-family: Consolas, monospace;
}

.webchat-article-body pre {
    overflow: auto;
    padding: .8rem .9rem;
    border-radius: 14px;
    background: #f7f2fc;
    border: 1px solid rgba(124, 58, 237, .10);
}

.webchat-bottom-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    padding: .55rem .4rem .45rem;
    border-top: 1px solid rgba(124, 58, 237, .10);
    background: #fff;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.webchat-nav-item {
    display: grid;
    justify-items: center;
    gap: .2rem;
    align-content: center;
    min-width: 92px;
    min-height: 54px;
    padding: .35rem .2rem;
    border: none;
    border-radius: 14px;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #7a6f8c;
    font: 600 .72rem/1.2 "Public Sans", sans-serif;
    text-align: center;
}

.webchat-nav-item.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, white);
}

.webchat-nav-icon {
    width: 18px;
    height: 18px;
}

.webchat-nav-item span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webchat-shell button:hover,
.webchat-shell button:active,
.webchat-shell button:focus,
.webchat-shell button:focus-visible,
.webchat-shell button:visited {
    outline: none !important;
    box-shadow: none !important;
}

.webchat-shell .webchat-primary-card:hover,
.webchat-shell .webchat-primary-card:focus,
.webchat-shell .webchat-primary-card:focus-visible,
.webchat-shell .webchat-primary-card:active,
.webchat-shell .webchat-list-item-button:hover,
.webchat-shell .webchat-list-item-button:focus,
.webchat-shell .webchat-list-item-button:focus-visible,
.webchat-shell .webchat-list-item-button:active {
    background: #fff !important;
    color: var(--text) !important;
    border-color: rgba(124, 58, 237, .10) !important;
}

.webchat-shell .webchat-primary-button:hover,
.webchat-shell .webchat-primary-button:focus,
.webchat-shell .webchat-primary-button:focus-visible,
.webchat-shell .webchat-primary-button:active,
.webchat-shell .webchat-send-button:hover,
.webchat-shell .webchat-send-button:focus,
.webchat-shell .webchat-send-button:focus-visible,
.webchat-shell .webchat-send-button:active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

.webchat-shell .webchat-option-button:hover,
.webchat-shell .webchat-option-button:focus,
.webchat-shell .webchat-option-button:focus-visible,
.webchat-shell .webchat-option-button:active,
.webchat-shell .webchat-file-button:hover,
.webchat-shell .webchat-file-button:focus,
.webchat-shell .webchat-file-button:focus-visible,
.webchat-shell .webchat-file-button:active {
    background: #fff !important;
    color: var(--primary) !important;
    border-color: rgba(124, 58, 237, .14) !important;
}

.webchat-shell .webchat-nav-item:hover,
.webchat-shell .webchat-nav-item:focus,
.webchat-shell .webchat-nav-item:focus-visible,
.webchat-shell .webchat-nav-item:active {
    background: color-mix(in srgb, var(--primary) 6%, white) !important;
    color: var(--primary) !important;
    border-color: transparent transparent var(--primary) transparent !important;
}

.webchat-shell .webchat-icon-button:hover,
.webchat-shell .webchat-icon-button:focus,
.webchat-shell .webchat-icon-button:focus-visible,
.webchat-shell .webchat-icon-button:active {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
}

.webchat-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem 1rem .95rem;
    font-size: .74rem;
    color: #6f6485;
    background: #fff;
}

.webchat-footer a {
    color: inherit;
    text-decoration: none;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .webchat-shell {
        border-radius: 0;
    }

    .webchat-panel {
        padding: .9rem;
    }

    .webchat-header {
        padding: .95rem .9rem .85rem;
    }

    .webchat-header-row {
        gap: .6rem;
    }

    .webchat-msg {
        max-width: 94%;
    }

    .webchat-phone-row {
        grid-template-columns: 1fr;
    }

    .webchat-bottom-nav {
        gap: .15rem;
        padding: .45rem .2rem .4rem;
    }

    .webchat-nav-item {
        min-width: 84px;
        min-height: 52px;
        padding: .25rem .1rem;
        font-size: .62rem;
    }

    .webchat-nav-item span {
        white-space: normal;
        line-height: 1.1;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: initial;
    }

    .webchat-nav-icon {
        width: 16px;
        height: 16px;
    }
}