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

@keyframes rotate-border {
    to { --gradient-angle: 360deg; }
}

/* =========================================================
   Widget container
   ========================================================= */
.zd-chat-widget {
    --gradient-border: #201F2B00 0%, #201F2B00 70%, #776CEE 80%, #AEB4FF 85%, #776CEE 90%, #201F2B00 97%, #201F2B00 100%;
    position: relative;
    border-radius: 12px;
    box-shadow: 0.952px 0.952px 4.61px rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
    padding: 1px;
    background:
        linear-gradient(#222129 0 0) padding-box,
        conic-gradient(from var(--gradient-angle), var(--gradient-border)) border-box;
    animation: rotate-border var(--chat-border-speed, 10s) linear infinite;
}

/* =========================================================
   Background glow decoration
   ========================================================= */
.zd-chat-widget .zd-chat-glow {
    position: absolute;
    /* 333×213px container, centred vertically, aligned to the right */
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 333px;
    height: 213px;
    pointer-events: none;
    z-index: 0;
    /* SVG overflows its natural bounds via inset percentages in the design:
       top  -38.05%*213 ≈ -81px  right  -30.31%*333 ≈ -101px
       bottom -44.62%*213 ≈ -95px  left  -24.56%*333 ≈ -82px
       Net rendered size ≈ 516×389 — match viewBox exactly            */
    overflow: visible;
}

.zd-chat-widget .zd-chat-glow img {
    position: absolute;
    /* Recreate the inset offsets as negative position values */
    top:    -81px;
    right:  -101px;
    bottom: -95px;
    left:   -82px;
    width:  calc(100% + 101px + 82px);
    height: calc(100% + 81px + 95px);
    display: block;
    max-width: none;
}

/* =========================================================
   Inner — content background + glass blur
   ========================================================= */
.zd-chat-widget .zd-chat-inner {
    /*border-radius: 11px;*/
    /*background: var(--chat-bg, #222129);*/
    /*backdrop-filter: blur(12px);*/
    /*-webkit-backdrop-filter: blur(12px);*/
    padding: 16px 14px 16px 10px;
    position: relative;
    z-index: 1;
}

/* =========================================================
   Body — fixed height matching Figma (112px inner content)
   ========================================================= */
.zd-chat-widget .zd-chat-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 112px;
    gap: 13px;
    overflow: hidden;
}

/* =========================================================
   Text area — fixed height so buttons stay pinned at bottom
   ========================================================= */
.zd-chat-widget .zd-chat-text-wrap {
    flex: 1;
    height: 69px;
    overflow: hidden;
    color: #d8d9e3 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

@keyframes zd-blink {
    50% { opacity: 0; }
}

/* Blinking cursor */
.zd-chat-widget .zd-chat-cursor {
    display: inline-block;
    color: inherit;
    animation: zd-blink 0.8s step-end infinite;
}

/* =========================================================
   Actions row
   ========================================================= */
.zd-chat-widget .zd-chat-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* =========================================================
   Quick-reply pill buttons
   Full reset first, then our styles — beats Elementor globals
   ========================================================= */
.zd-chat-widget .zd-chat-btn {
    /* Hard reset against Elementor/theme button defaults */
    all: unset;
    box-sizing: border-box !important;

    /* Our styles */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    padding: 6px 12px !important;
    border-radius: 9.733px !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: opacity 0.2s ease !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.zd-chat-widget .zd-chat-btn:hover {
    opacity: 0.8 !important;
}

.zd-chat-widget .zd-chat-btn:focus-visible {
    outline: 2px solid var(--chat-border-color, #aeb4ff) !important;
    outline-offset: 2px !important;
}

/* =========================================================
   Send / arrow button
   ========================================================= */
.zd-chat-widget .zd-chat-send,
.zd-chat-widget a.zd-chat-send {
    /* Hard reset */
    all: unset;
    box-sizing: border-box !important;

    /* Our styles */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #45454b !important;
    width: 26px !important;
    height: 25px !important;
    border-radius: 40px !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow:
        0px 4px 8px -2px rgba(0, 0, 0, 0.1),
        0px 2px 4px -2px rgba(0, 0, 0, 0.06) !important;
    transition: opacity 0.2s ease !important;
}

.zd-chat-widget .zd-chat-send:hover {
    opacity: 0.8 !important;
}

.zd-chat-widget .zd-chat-send:focus-visible {
    outline: 2px solid var(--chat-border-color, #aeb4ff) !important;
    outline-offset: 2px !important;
}

.zd-chat-widget .zd-chat-send svg {
    display: block !important;
    pointer-events: none !important;
}

/* =========================================================
   V2 — Outer layout wrapper
   ========================================================= */
.zd-chat-v2-outer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding-top: 32px;
    padding-bottom: 72px;
}

.zd-chat-v2-outer .zd-chat-widget {
    width: 100%;
}

/* =========================================================
   V2 — Suggestions section
   ========================================================= */
.zd-chat-suggestions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.zd-chat-suggestions-label {
    font-family: inherit;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #9da0a9 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* =========================================================
   V2 — Badge grid: flex-column of rows, matching Figma
   ========================================================= */
.zd-chat-badges-wrap {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
}

.zd-chat-badges-row {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    justify-content: center;
}

/* =========================================================
   V2 — Individual badge
   ========================================================= */
.zd-chat-badge {
    /* Hard reset */
    all: unset;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 32px !important;
    min-height: 18px !important;
    min-width: 18px !important;
    padding: 8px 16px 8px 14px !important;
    border-radius: 12px !important;
    background: #2e2f39 !important;
    color: #d8d9e3 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    text-decoration: none !important;
    text-transform: none !important;
    border: none !important;
}

.zd-chat-badge:hover {
    opacity: 0.8 !important;
}

.zd-chat-badge:focus-visible {
    outline: 2px solid var(--chat-border-color, #aeb4ff) !important;
    outline-offset: 2px !important;
}

.zd-chat-badge-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.zd-chat-badge-icon svg,
.zd-chat-badge-icon i {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    color: inherit !important;
    display: block !important;
}

.zd-chat-badge-label {
    display: inline !important;
}

/* =========================================================
   V2 — Mobile responsive
   ========================================================= */
@media (max-width: 767px) {
    .zd-chat-v2-outer {
        padding-bottom: 0;
    }

    /* Allow badges within each row to wrap when they don't fit */
    .zd-chat-badges-row {
        flex-wrap: wrap;
    }

    /* Label can wrap on very narrow screens */
    .zd-chat-suggestions-label {
        white-space: normal !important;
        text-align: center;
    }
}