:root {
    --navy: #102a55;
    --gold: #f4b416;
}


/* =========================================================
   ABOUT PHOTO
   ========================================================= */

.ds-about-photo {
    background: url("https://derkservices.com/wp-content/uploads/2026/04/eeb3d0d22d9b814e2e5ddd06b7f74cba.jpeg")
        center / cover no-repeat !important;
}


/* =========================================================
   DATA ANALYTICS TOOLTIPS
   ========================================================= */

.ds-tools,
.ds-tool {
    overflow: visible !important;
}

.ds-tool {
    position: relative;
    z-index: 1;
}

.ds-tool:hover,
.ds-tool:focus,
.ds-tool:focus-within,
.ds-tool.is-open {
    z-index: 1000;
}

.ds-tooltip-box {
    position: absolute !important;
    top: calc(100% + 17px) !important;

    width: min(245px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;

    box-sizing: border-box !important;
    padding: 16px 17px !important;

    z-index: 1001 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    text-align: left !important;

    transform: translate(0, 6px) !important;

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease !important;
}


/* =========================================================
   SHOW TOOLTIP
   ========================================================= */

.ds-tool:hover .ds-tooltip-box,
.ds-tool:focus .ds-tooltip-box,
.ds-tool:focus-within .ds-tooltip-box,
.ds-tool.is-open .ds-tooltip-box {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(0, 0) !important;
}


/* =========================================================
   TOOLTIP ARROW
   ========================================================= */

.ds-tooltip-box::before {
    content: "" !important;

    position: absolute !important;
    top: -7px !important;

    width: 12px !important;
    height: 12px !important;

    background: #fff !important;

    border-left: 1px solid #dce5ee !important;
    border-top: 1px solid #dce5ee !important;

    transform: rotate(45deg) !important;
}


/* =========================================================
   TOOLTIP — LEFT COLUMN
   ========================================================= */

.ds-tool:nth-child(3n + 1) .ds-tooltip-box {
    left: 0 !important;
    right: auto !important;
    transform: translate(0, 6px) !important;
}

.ds-tool:nth-child(3n + 1):hover .ds-tooltip-box,
.ds-tool:nth-child(3n + 1):focus .ds-tooltip-box,
.ds-tool:nth-child(3n + 1):focus-within .ds-tooltip-box,
.ds-tool:nth-child(3n + 1).is-open .ds-tooltip-box {
    transform: translate(0, 0) !important;
}

.ds-tool:nth-child(3n + 1) .ds-tooltip-box::before {
    left: 43px !important;
    right: auto !important;
}


/* =========================================================
   TOOLTIP — MIDDLE COLUMN
   ========================================================= */

.ds-tool:nth-child(3n + 2) .ds-tooltip-box {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 6px) !important;
}

.ds-tool:nth-child(3n + 2):hover .ds-tooltip-box,
.ds-tool:nth-child(3n + 2):focus .ds-tooltip-box,
.ds-tool:nth-child(3n + 2):focus-within .ds-tooltip-box,
.ds-tool:nth-child(3n + 2).is-open .ds-tooltip-box {
    transform: translate(-50%, 0) !important;
}

.ds-tool:nth-child(3n + 2) .ds-tooltip-box::before {
    left: 50% !important;
    right: auto !important;
}


/* =========================================================
   TOOLTIP — RIGHT COLUMN
   ========================================================= */

.ds-tool:nth-child(3n) .ds-tooltip-box {
    left: auto !important;
    right: 0 !important;
    transform: translate(0, 6px) !important;
}

.ds-tool:nth-child(3n):hover .ds-tooltip-box,
.ds-tool:nth-child(3n):focus .ds-tooltip-box,
.ds-tool:nth-child(3n):focus-within .ds-tooltip-box,
.ds-tool:nth-child(3n).is-open .ds-tooltip-box {
    transform: translate(0, 0) !important;
}

.ds-tool:nth-child(3n) .ds-tooltip-box::before {
    left: auto !important;
    right: 43px !important;
}


/* =========================================================
   MOBILE TOOLTIP
   ========================================================= */

@media (max-width: 600px) {

    .ds-tooltip-box {
        width: min(220px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
    }

    .ds-tool:nth-child(3n + 1) .ds-tooltip-box {
        left: 0 !important;
        right: auto !important;
    }

    .ds-tool:nth-child(3n + 1) .ds-tooltip-box::before {
        left: 40px !important;
        right: auto !important;
    }

    .ds-tool:nth-child(3n + 2) .ds-tooltip-box {
        left: 50% !important;
        right: auto !important;
    }

    .ds-tool:nth-child(3n + 2) .ds-tooltip-box::before {
        left: 50% !important;
        right: auto !important;
    }

    .ds-tool:nth-child(3n) .ds-tooltip-box {
        left: auto !important;
        right: 0 !important;
    }

    .ds-tool:nth-child(3n) .ds-tooltip-box::before {
        left: auto !important;
        right: 40px !important;
    }
}


/* =========================================================
   SCROLL-SPY NAVIGATION
   ========================================================= */

.ds-nav a::after {
    transform: scaleX(0) !important;
}

.ds-nav a.is-active::after {
    transform: scaleX(1) !important;
}


/* =========================================================
   PREVENT HORIZONTAL PAGE OVERFLOW
   ========================================================= */

html {
    max-width: 100%;
    overflow-x: hidden !important;
}

body {
    max-width: 100%;
    overflow-x: hidden !important;
}


/* =========================================================
   FIXED HEADER
   ========================================================= */

.ds-header {
    position: fixed !important;

    top: 32px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    z-index: 9999 !important;

    background: #fff !important;
}

body {
    padding-top: 80px !important;
}


/* =========================================================
   WORDPRESS ADMIN BAR — MOBILE
   ========================================================= */

@media (max-width: 782px) {

    .ds-header {
        top: 46px !important;
    }

    body {
        padding-top: 72px !important;
    }
}


/* =========================================================
   SMALL MOBILE SCREENS
   ========================================================= */

@media (max-width: 600px) {

    .ds-header {
        width: 100% !important;
        max-width: 100% !important;
    }

    body {
        padding-top: 72px !important;
    }
}


/* =========================================================
   DERK AI SUPPORT
   GLASS / SOFT-GLOW DESIGN
   ========================================================= */

.ds-ai-widget {
    position: fixed !important;

    right: 28px !important;
    bottom: 28px !important;

    z-index: 999999 !important;

    font-family: inherit !important;
}


/* =========================================================
   FLOATING AI SUPPORT BUTTON
   ========================================================= */

.ds-ai-button {
    display: flex !important;
    align-items: center !important;

    gap: 13px !important;

    min-width: 245px !important;
    height: 76px !important;

    padding: 9px 20px 9px 14px !important;

    border: 1px solid rgba(255,255,255,.85) !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.97),
            rgba(244,248,255,.94) 52%,
            rgba(255,250,237,.96)
        ) !important;

    color: var(--navy, #102a55) !important;

    font-family: inherit !important;

    cursor: pointer !important;

    box-shadow:
        0 18px 45px rgba(16,42,85,.16),
        0 5px 15px rgba(16,42,85,.10),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease !important;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.ds-ai-button:hover {
    transform: translateY(-3px) !important;

    box-shadow:
        0 22px 55px rgba(16,42,85,.20),
        0 7px 18px rgba(16,42,85,.12),
        inset 0 1px 0 rgba(255,255,255,.98) !important;
}


/* =========================================================
   CHAT ICON
   ========================================================= */

.ds-ai-button-icon {
    flex: 0 0 auto !important;

    width: 48px !important;
    height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            #17386f,
            #102a55
        ) !important;

    box-shadow:
        0 6px 15px rgba(16,42,85,.20) !important;
}

.ds-ai-button-icon svg {
    width: 24px !important;
    height: 24px !important;

    fill: none !important;

    stroke: #fff !important;

    stroke-width: 1.7 !important;
}


/* =========================================================
   BUTTON TEXT
   ========================================================= */

.ds-ai-button-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    gap: 1px !important;

    flex: 1 !important;

    white-space: nowrap !important;

    font-size: 17px !important;
    line-height: 1.15 !important;

    font-weight: 800 !important;

    color: var(--navy, #102a55) !important;
}

.ds-ai-button-text::after {
    content: "Online · Let’s chat!" !important;

    display: block !important;

    margin-top: 3px !important;

    color: #58708f !important;

    font-size: 12px !important;
    font-weight: 500 !important;
}


/* =========================================================
   CHAT WINDOW
   ========================================================= */

.ds-ai-chat {
    position: fixed !important;

    right: 0 !important;
    bottom: 92px !important;

    width: 390px !important;

    max-width: calc(100vw - 32px) !important;

    height: 540px !important;

    max-height: calc(100vh - 120px) !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(248,251,255,.97)
        ) !important;

    border: 1px solid rgba(255,255,255,.95) !important;

    border-radius: 28px !important;

    box-shadow:
        0 30px 80px rgba(16,42,85,.20),
        0 8px 25px rgba(16,42,85,.10),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transform:
        translateY(16px)
        scale(.96) !important;

    transform-origin: bottom right !important;

    pointer-events: none !important;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease !important;
}


/* =========================================================
   CHAT OPEN
   ========================================================= */

.ds-ai-widget.is-open .ds-ai-chat {
    opacity: 1 !important;

    visibility: visible !important;

    transform:
        translateY(0)
        scale(1) !important;

    pointer-events: auto !important;
}


/* =========================================================
   CHAT HEADER
   ========================================================= */

.ds-ai-chat-header {
    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    min-height: 78px !important;

    padding: 14px 17px !important;

    background:
        linear-gradient(
            135deg,
            #102a55,
            #17386f
        ) !important;

    color: #fff !important;
}


/* =========================================================
   CHAT BRAND
   ========================================================= */

.ds-ai-chat-brand {
    display: flex !important;

    align-items: center !important;

    gap: 11px !important;
}

.ds-ai-chat-brand strong {
    display: block !important;

    color: #fff !important;

    font-size: 15px !important;

    line-height: 1.2 !important;
}

.ds-ai-chat-brand small {
    display: flex !important;

    align-items: center !important;

    gap: 5px !important;

    margin-top: 4px !important;

    color: rgba(255,255,255,.75) !important;

    font-size: 11px !important;
}


/* =========================================================
   STATUS DOT
   ========================================================= */

.ds-ai-status-dot {
    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;

    background: #20d890 !important;

    box-shadow:
        0 0 0 4px rgba(32,216,144,.12) !important;
}


/* =========================================================
   CHAT LOGO
   ========================================================= */

.ds-ai-chat-logo {
    position: relative !important;

    width: 40px !important;
    height: 40px !important;

    display: flex !important;

    align-items: flex-end !important;

    justify-content: center !important;

    gap: 3px !important;

    padding: 7px !important;

    box-sizing: border-box !important;

    border-radius: 12px !important;

    background: rgba(255,255,255,.10) !important;
}

.ds-ai-chat-logo span {
    display: block !important;

    width: 5px !important;

    background: var(--gold, #f4b416) !important;

    border-radius: 2px 2px 0 0 !important;
}

.ds-ai-chat-logo span:nth-child(1) {
    height: 11px !important;
}

.ds-ai-chat-logo span:nth-child(2) {
    height: 17px !important;
}

.ds-ai-chat-logo span:nth-child(3) {
    height: 23px !important;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.ds-ai-close {
    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;

    border: none !important;

    background: rgba(255,255,255,.08) !important;

    color: #fff !important;

    border-radius: 50% !important;

    font-size: 24px !important;

    line-height: 1 !important;

    cursor: pointer !important;

    opacity: .8 !important;

    transition:
        background .15s ease,
        opacity .15s ease !important;
}

.ds-ai-close:hover {
    background: rgba(255,255,255,.16) !important;

    opacity: 1 !important;
}


/* =========================================================
   CHAT MESSAGES
   ========================================================= */

.ds-ai-messages {
    flex: 1 !important;

    padding: 20px !important;

    overflow-y: auto !important;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(244,180,22,.07),
            transparent 30%
        ),
        #f7faff !important;
}

.ds-ai-message {
    display: flex !important;

    align-items: flex-start !important;

    gap: 9px !important;

    margin-bottom: 16px !important;
}


/* =========================================================
   AI AVATAR
   ========================================================= */

.ds-ai-avatar {
    flex: 0 0 auto !important;

    width: 32px !important;
    height: 32px !important;

    display: flex !important;

    align-items: flex-end !important;

    justify-content: center !important;

    gap: 2px !important;

    padding: 6px !important;

    box-sizing: border-box !important;

    border-radius: 10px !important;

    background: var(--navy, #102a55) !important;
}

.ds-ai-avatar span {
    display: block !important;

    width: 3px !important;

    background: var(--gold, #f4b416) !important;

    border-radius: 2px 2px 0 0 !important;
}

.ds-ai-avatar span:nth-child(1) {
    height: 8px !important;
}

.ds-ai-avatar span:nth-child(2) {
    height: 13px !important;
}

.ds-ai-avatar span:nth-child(3) {
    height: 17px !important;
}


/* =========================================================
   MESSAGE BUBBLE
   ========================================================= */

.ds-ai-bubble {
    max-width: 280px !important;

    padding: 13px 15px !important;

    background: rgba(255,255,255,.94) !important;

    border: 1px solid #e1e8ef !important;

    border-radius: 5px 17px 17px 17px !important;

    color: var(--navy, #102a55) !important;

    box-shadow:
        0 5px 15px rgba(16,42,85,.05) !important;
}

.ds-ai-bubble strong {
    display: block !important;

    margin-bottom: 5px !important;

    color: var(--navy, #102a55) !important;

    font-size: 14px !important;
}

.ds-ai-bubble p {
    margin: 0 !important;

    color: #58708f !important;

    font-size: 13px !important;

    line-height: 1.55 !important;
}


/* =========================================================
   USER MESSAGE
   ========================================================= */

.ds-ai-message-user {
    justify-content: flex-end !important;
}

.ds-ai-message-user .ds-ai-bubble {
    background: var(--navy, #102a55) !important;

    color: #fff !important;

    border-radius: 17px 5px 17px 17px !important;
}

.ds-ai-message-user .ds-ai-bubble p {
    color: #fff !important;
}


/* =========================================================
   QUICK ACTIONS
   ========================================================= */

.ds-ai-quick-actions {
    display: flex !important;

    gap: 7px !important;

    padding: 11px 14px !important;

    overflow-x: auto !important;

    border-top: 1px solid #e7edf3 !important;

    background: rgba(255,255,255,.95) !important;
}

.ds-ai-quick-actions button {
    flex: 0 0 auto !important;

    padding: 8px 12px !important;

    border: 1px solid #d7e1eb !important;

    border-radius: 999px !important;

    background: #fff !important;

    color: var(--navy, #102a55) !important;

    font-family: inherit !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease !important;
}

.ds-ai-quick-actions button:hover {
    border-color: var(--gold, #f4b416) !important;

    background: #fffaf0 !important;

    transform: translateY(-1px) !important;
}



/* =========================================================
   AI CHAT — FILE ATTACHMENTS
   ========================================================= */

.ds-ai-attachments {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 13px 7px !important;
    background: rgba(255,255,255,.97) !important;
}

.ds-ai-attachment-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    max-width: 100% !important;
    padding: 6px 8px 6px 10px !important;
    border: 1px solid #dbe5ee !important;
    border-radius: 10px !important;
    background: #f7f9fc !important;
    color: #29476d !important;
    font-size: 11px !important;
}

.ds-ai-attachment-name {
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.ds-ai-attachment-remove {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #6f8298 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.ds-ai-attachment-remove:hover {
    background: #e8eef5 !important;
    color: #102a55 !important;
}

.ds-ai-attachment-thumb {
    width: 24px !important;
    height: 24px !important;
    object-fit: cover !important;
    border-radius: 5px !important;
}

.ds-ai-attach {
    flex: 0 0 auto !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 1px solid #d8e2ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--navy, #102a55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background .15s ease, transform .15s ease !important;
}

.ds-ai-attach:hover {
    background: #f5f8fb !important;
    transform: translateY(-1px) !important;
}

.ds-ai-attach svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

.ds-ai-file-input {
    display: none !important;
}

.ds-ai-input-area.is-uploading {
    opacity: .72 !important;
}

.ds-ai-input-area.is-uploading input,
.ds-ai-input-area.is-uploading button {
    cursor: wait !important;
}

/* =========================================================
   INPUT
   ========================================================= */

.ds-ai-input-area {
    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    padding: 11px 13px !important;

    background: rgba(255,255,255,.97) !important;

    border-top: 1px solid #e7edf3 !important;
}

.ds-ai-input-area input {
    flex: 1 1 auto !important;

    min-width: 0 !important;
    width: 100% !important;

    height: 44px !important;

    padding: 0 14px !important;

    border: 1px solid #d8e2ec !important;

    border-radius: 14px !important;

    background: #f8fafc !important;

    color: var(--navy, #102a55) !important;

    font-family: inherit !important;

    font-size: 13px !important;

    outline: none !important;

    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;

    position: relative !important;
    z-index: 10 !important;

    cursor: text !important;
}

.ds-ai-input-area {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}

.ds-ai-input-area button {
    position: relative !important;
    z-index: 21 !important;
    pointer-events: auto !important;
}

.ds-ai-input-area button {
    flex: 0 0 auto !important;

    width: 44px !important;

    height: 44px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 !important;

    border: none !important;

    border-radius: 14px !important;

    background: var(--gold, #f4b416) !important;

    cursor: pointer !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease !important;
}

.ds-ai-input-area button:hover {
    transform: translateY(-1px) !important;

    box-shadow:
        0 5px 12px rgba(244,180,22,.25) !important;
}

.ds-ai-input-area button svg {
    width: 18px !important;

    height: 18px !important;

    fill: var(--navy, #102a55) !important;
}


/* =========================================================
   POWERED BY
   ========================================================= */

.ds-ai-powered {
    padding: 0 14px 9px !important;

    background: rgba(255,255,255,.97) !important;

    color: #91a1b2 !important;

    font-size: 9px !important;

    text-align: right !important;
}


/* =========================================================
   AI SUPPORT PROMOTIONAL ARTWORK
   ========================================================= */

.ds-ai-promo {
    position: fixed !important;

    right: -15px !important;
    bottom: 5px !important;

    width: 200px !important;
    height: auto !important;

    z-index: 999998 !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;

    overflow: visible !important;

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
    cursor: pointer !important;

    transform: none !important;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease !important;
}


/* =========================================================
   PROMOTIONAL IMAGE
   ========================================================= */

.ds-ai-promo img {
    display: block !important;

    width: 200px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    background: transparent !important;

    box-shadow: none !important;

    mix-blend-mode: normal !important;

    filter:
        drop-shadow(
            0 12px 24px rgba(16,42,85,.14)
        ) !important;

    cursor: pointer !important;
}


/* =========================================================
   HIDE OLD FLOATING AI BUTTON
   ========================================================= */

.ds-ai-button {
    display: none !important;
}


/* =========================================================
   AI CHAT WINDOW
   ========================================================= */

.ds-ai-chat {
    position: fixed !important;

    right: 24px !important;
    bottom: 24px !important;

    width: 390px !important;
    height: 540px !important;

    min-width: 320px !important;
    min-height: 400px !important;

    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 48px) !important;

    resize: both !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;

    box-sizing: border-box !important;
}

/* =========================================================
   AI CHAT HEADER CONTROLS
   ========================================================= */

.ds-ai-chat-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.ds-ai-maximize,
.ds-ai-close {
    width: 38px !important;
    height: 38px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;

    transition:
        background .18s ease,
        transform .18s ease !important;
}

.ds-ai-maximize {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;

    font-size: 21px !important;
    line-height: 1 !important;
}

.ds-ai-close {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;

    font-size: 25px !important;
    line-height: 1 !important;
}

.ds-ai-maximize:hover,
.ds-ai-close:hover {
    background: rgba(255,255,255,.18) !important;
    transform: scale(1.05) !important;
}

.ds-ai-maximize:active,
.ds-ai-close:active {
    transform: scale(.95) !important;
}

/* =========================================================
   AI CHAT — DRAGGABLE HEADER
   ========================================================= */

.ds-ai-chat-header {
    cursor: grab !important;
    user-select: none !important;
}

.ds-ai-chat-header button {
    cursor: pointer !important;
}

.ds-ai-chat-header:active {
    cursor: grabbing !important;
}

/* =========================================================
   HIDE PROMO WHEN CHAT IS OPEN
   ========================================================= */

.ds-ai-widget.is-open .ds-ai-promo {
    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transform:
        translateY(15px)
        scale(.97) !important;
}

/* =========================================================
   TABLET AI SUPPORT PROMO
   SMALLER + LOWER RIGHT CORNER
   ========================================================= */

@media (min-width: 601px) and (max-width: 1024px) {

    .ds-ai-promo {
        position: fixed !important;

        right: -13px !important;
        bottom: 0px !important;

        width: 170px !important;
        height: auto !important;

        z-index: 999998 !important;
    }

    .ds-ai-promo img {
        width: 170px !important;
        height: auto !important;

        object-fit: contain !important;
    }

}

/* =========================================================
   MOBILE AI SUPPORT PROMO
   SMALL + LOWER RIGHT CORNER
   ========================================================= */

@media (max-width: 600px) {

    .ds-ai-promo {
        position: fixed !important;

        right: -10px !important;
        bottom: 10px !important;

        width: 145px !important;
        height: auto !important;

        z-index: 999998 !important;
    }

    .ds-ai-promo img {
        width: 145px !important;
        height: auto !important;

        object-fit: contain !important;
    }


    /* =====================================================
       MOBILE CHAT WINDOW
       ===================================================== */

    .ds-ai-chat {
        position: fixed !important;

        right: 12px !important;
        bottom: 82px !important;

        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;

        height: min(
            540px,
            calc(100vh - 100px)
        ) !important;

        border-radius: 24px !important;
    }
}

/* =========================================================
   WIDEN HERO CONTENT ON LARGE SCREENS
   ========================================================= */

@media (min-width: 1200px) {

    .ds-hero .ds-shell {
        width: calc(100% - 120px) !important;
        max-width: 1450px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .ds-hero-grid {
        grid-template-columns: 1.08fr .92fr !important;
        gap: 55px !important;
    }

}

/* =========================================================
   FORCE AI SUPPORT STICKER ON MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .ds-ai-widget {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2147483647 !important;
    }

    .ds-ai-promo {
        position: fixed !important;

        right: -4px !important;
        bottom: 10px !important;

        width: 145px !important;
        height: auto !important;

        display: block !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 2147483647 !important;

        pointer-events: auto !important;
    }

    .ds-ai-promo img {
        display: block !important;

        width: 145px !important;
        height: auto !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

}
/* =========================================================
   FORCE AI SUPPORT STICKER ON TABLET
   ========================================================= */

@media (min-width: 601px) and (max-width: 1024px) {

    .ds-ai-widget {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2147483647 !important;
    }

    .ds-ai-promo {
        position: fixed !important;

        right: -2px !important;
        bottom: 15px !important;

        width: 170px !important;
        height: auto !important;

        display: block !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 2147483647 !important;

        pointer-events: auto !important;
    }

    .ds-ai-promo img {
        display: block !important;

        width: 170px !important;
        height: auto !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

}

/* =========================================================
   REMOVE WORDPRESS ADMIN BAR GAP IN CUSTOMIZER
   ========================================================= */

#wpadminbar {
    display: none !important;
}

html {
    margin-top: 0 !important;
}

body {
    padding-top: 0 !important;
}

.ds-header {
    top: 0 !important;
}

/* =========================================================
   AI SUPPORT — PRESERVE MESSAGE LINE BREAKS
   ========================================================= */

.ds-ai-bubble p {
    white-space: pre-line !important;
}

/* =========================================================
   AI CHAT — MANUAL RESIZE
   ========================================================= */

.ds-ai-chat {
    resize: none !important;
    overflow: hidden !important;

    min-width: 320px !important;
    min-height: 400px !important;

    display: flex !important;
    flex-direction: column !important;

    box-sizing: border-box !important;
}

/* =====================================================
   AI CHAT — EDGE RESIZE CONTROLS
   ===================================================== */

.ds-ai-resize-handles {
    position: absolute !important;

    inset: 0 !important;

    z-index: 99999 !important;

    pointer-events: none !important;
}

.ds-ai-resize-handle {
    position: absolute !important;

    display: block !important;

    pointer-events: auto !important;

    background: transparent !important;

    z-index: 99999 !important;
}


/* =====================================================
   CORNER RESIZE AREAS
   ===================================================== */

.ds-resize-nw,
.ds-resize-ne,
.ds-resize-sw,
.ds-resize-se {
    width: 22px !important;
    height: 22px !important;
}


/* TOP-LEFT */

.ds-resize-nw {
    top: 0 !important;
    left: 0 !important;

    cursor: nwse-resize !important;
}


/* TOP-RIGHT */

.ds-resize-ne {
    top: 0 !important;
    right: 0 !important;

    cursor: nesw-resize !important;
}


/* BOTTOM-LEFT */

.ds-resize-sw {
    bottom: 0 !important;
    left: 0 !important;

    cursor: nesw-resize !important;
}


/* BOTTOM-RIGHT */

.ds-resize-se {
    bottom: 0 !important;
    right: 0 !important;

    cursor: nwse-resize !important;
}


/* =====================================================
   TOP / BOTTOM EDGE
   ===================================================== */

.ds-resize-n,
.ds-resize-s {
    left: 22px !important;
    right: 22px !important;

    height: 12px !important;
}


/* TOP */

.ds-resize-n {
    top: 0 !important;

    cursor: ns-resize !important;
}


/* BOTTOM */

.ds-resize-s {
    bottom: 0 !important;

    cursor: ns-resize !important;
}


/* =====================================================
   LEFT / RIGHT EDGE
   ===================================================== */

.ds-resize-w,
.ds-resize-e {
    top: 22px !important;
    bottom: 22px !important;

    width: 12px !important;
}


/* LEFT */

.ds-resize-w {
    left: 0 !important;

    cursor: ew-resize !important;
}


/* RIGHT */

.ds-resize-e {
    right: 0 !important;

    cursor: ew-resize !important;
}


/* =====================================================
   KEEP RESIZE ACTIVE WHEN MAXIMIZED
   ===================================================== */

.ds-ai-chat.is-maximized .ds-ai-resize-handles {
    display: block !important;
}

.ds-ai-chat.is-maximized .ds-ai-resize-handle {
    display: block !important;
}

/* =========================================================
   HEADER CONTROLS
   ========================================================= */

.ds-ai-chat-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}


.ds-ai-maximize,
.ds-ai-close {
    width: 38px !important;
    height: 38px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;

    transition:
        background .18s ease,
        transform .18s ease !important;
}


.ds-ai-maximize {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;

    font-size: 21px !important;
    line-height: 1 !important;
}


.ds-ai-close {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;

    font-size: 25px !important;
    line-height: 1 !important;
}


.ds-ai-maximize:hover,
.ds-ai-close:hover {
    background: rgba(255,255,255,.18) !important;
    transform: scale(1.05) !important;
}


/* =========================================================
   AI CHAT — EXPANDED / HALF-SCREEN MODE
   ========================================================= */

.ds-ai-chat.is-maximized {
    position: fixed !important;

    top: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    left: auto !important;

    width: 50vw !important;
    height: calc(100vh - 32px) !important;

    min-width: 520px !important;
    min-height: 0 !important;

    max-width: 900px !important;
    max-height: none !important;

    transform: none !important;

    resize: none !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    z-index: 999999 !important;
}

/* =========================================================
   INTERNAL CHAT LAYOUT
   ========================================================= */

.ds-ai-chat-header {
    flex-shrink: 0 !important;
}


.ds-ai-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


.ds-ai-quick-actions,
.ds-ai-input-area,
.ds-ai-powered {
    flex-shrink: 0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .ds-ai-chat {
        min-width: 280px !important;
        min-height: 360px !important;

        resize: none !important;
    }


    .ds-ai-chat.is-maximized {
        top: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        left: 12px !important;

        width: auto !important;
        height: auto !important;

        max-width: none !important;
        max-height: none !important;

        resize: none !important;

        border-radius: 20px !important;
    }


    .ds-ai-chat-controls {
        gap: 3px !important;
    }


    .ds-ai-maximize,
    .ds-ai-close {
        width: 34px !important;
        height: 34px !important;
    }

}
/* =========================================================
   AI CHAT — ATTACHMENT SUBMISSION CONFIRMATION
   ========================================================= */

.ds-ai-attachment-confirmation {
    margin: 10px 0 12px;
    padding: 14px;
    border: 1px solid rgba(16, 42, 85, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-sizing: border-box;
}

.ds-ai-attachment-confirmation > strong {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.35;
}

.ds-ai-attachment-confirmation-details {
    font-size: 13px;
    line-height: 1.55;
}

.ds-ai-attachment-confirmation-details p {
    margin: 0 0 9px;
}

.ds-ai-attachment-confirmation-details p:last-child {
    margin-bottom: 0;
}

.ds-ai-attachment-confirmation-note {
    margin: 11px 0 0;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.78;
}

.ds-ai-attachment-confirmation-actions {
    display: flex;
    gap: 8px;
    margin-top: 13px;
}

.ds-ai-attachment-confirmation-actions button {
    appearance: none;
    border: 0;
    border-radius: 9px;
    padding: 9px 13px;
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

.ds-ai-attachment-confirmation-edit {
    background: #eef2f7;
    color: #102a55;
}

.ds-ai-attachment-confirmation-submit {
    background: #102a55;
    color: #ffffff;
}

.ds-ai-attachment-confirmation-actions button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ds-ai-attachment-confirmation-actions button:not(:disabled):hover {
    transform: translateY(-1px);
}

@media (max-width: 480px) {

    .ds-ai-attachment-confirmation-actions {
        flex-direction: column;
    }

    .ds-ai-attachment-confirmation-actions button {
        width: 100%;
    }
}

.ds-ai-optional-note {
    opacity: 0.78;
    font-size: 12px;
}

.ds-ai-attachment-skip {
    appearance: none;
    display: inline-block;
    margin-top: 4px;
    border: 1px solid rgba(16, 42, 85, 0.18);
    border-radius: 9px;
    padding: 8px 11px;
    background: #f5f7fa;
    color: #102a55;
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

.ds-ai-attachment-skip:hover {
    transform: translateY(-1px);
}

.ds-ai-attachment-skip:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}