/* ============================================================
   AGENDA CHATBOT — COMPLETE CSS
   SLS ENGINEERS
   ALL SELECTORS NAMESPACED WITH .agenda
   NO GLOBAL WEBSITE CSS MODIFICATIONS
   ============================================================ */


/* ============================================================
   RESET & BASE
   ============================================================ */

.agenda *,
.agenda *::before,
.agenda *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.agenda {
    --agenda-bg: #0f1419;
    --agenda-surface: #1a2129;
    --agenda-surface-2: #232d38;
    --agenda-border: #2f3b48;

    --agenda-text: #e8edf3;
    --agenda-text-secondary: #9aa8b8;
    --agenda-text-muted: #6b7c8f;

    --agenda-accent: #e8a020;
    --agenda-accent-hover: #f0b040;
    --agenda-accent-dim: rgba(232, 160, 32, 0.15);

    --agenda-success: #2ecc71;
    --agenda-error: #e74c3c;

    --agenda-radius: 12px;
    --agenda-radius-sm: 8px;
    --agenda-radius-lg: 16px;

    --agenda-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45);

    --agenda-shadow-sm:
        0 2px 8px rgba(0, 0, 0, 0.3);

    --agenda-font:
        'Segoe UI',
        'Inter',
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    --agenda-font-mono:
        'SF Mono',
        'Fira Code',
        'Consolas',
        monospace;

    --agenda-z-toggle: 99990;
    --agenda-z-widget: 99991;

    font-family: var(--agenda-font);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   LAUNCHER TOGGLE
   ============================================================ */

.agenda-toggle {
    position: fixed;

    right: -6px;
    bottom: 280px;

    z-index: var(--agenda-z-toggle);

    width: 45px;
    height: 45px;

    border-radius: 12px 0 0 12px;

    border: 2px solid var(--agenda-accent);

    background:
        linear-gradient(
            145deg,
            var(--agenda-surface),
            var(--agenda-bg)
        );

    color: var(--agenda-accent);

    font-size: 24px;

    cursor: pointer;

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

    box-shadow:
        var(--agenda-shadow),
        0 0 0 0 rgba(232, 160, 32, 0.4);

    transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;

    animation:
        agenda-float 3s ease-in-out infinite;

    outline: none;

    -webkit-tap-highlight-color: transparent;
}

.agenda-toggle:hover {
    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 0 6px rgba(232, 160, 32, 0.1);

    border-color:
        var(--agenda-accent-hover);
}

.agenda-toggle:focus-visible {
    box-shadow:
        0 0 0 3px var(--agenda-bg),
        0 0 0 6px var(--agenda-accent);
}

.agenda-toggle:active {
    transform:
        translateY(0)
        scale(0.97);
}

.agenda-toggle[aria-expanded="true"] {
    animation: none;
}

.agenda-toggle[aria-expanded="true"]
.agenda-toggle__icon--open {
    display: none;
}

.agenda-toggle[aria-expanded="false"]
.agenda-toggle__icon--close {
    display: none;
}


/* ============================================================
   TOGGLE FLOAT ANIMATION
   ============================================================ */

@keyframes agenda-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


/* ============================================================
   NOTIFICATION DOT
   ============================================================ */

.agenda-toggle__dot {
    position: absolute;

    top: 2px;
    right: 2px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        var(--agenda-accent);

    border:
        2px solid var(--agenda-bg);

    display: none;
}

.agenda-toggle__dot--visible {
    display: block;

    animation:
        agenda-pulse 2s ease-in-out infinite;
}

@keyframes agenda-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}


/* ============================================================
   TOGGLE TOOLTIP
   ============================================================ */

.agenda-toggle__tooltip {
    position: absolute;

    right: calc(100% + 12px);
    top: 50%;

    transform:
        translateY(-50%);

    background:
        var(--agenda-surface);

    color:
        var(--agenda-text);

    padding:
        6px 12px;

    border-radius:
        var(--agenda-radius-sm);

    font-size: 12px;

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;

    border:
        1px solid var(--agenda-border);

    box-shadow:
        var(--agenda-shadow-sm);
}

.agenda-toggle:hover
.agenda-toggle__tooltip {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(-4px);
}


/* ============================================================
   WIDGET CONTAINER
   ============================================================ */

.agenda-widget {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index:
        var(--agenda-z-widget);

    width: 390px;
    height: 600px;

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

    max-height:
        calc(100dvh - 100px);

    background:
        var(--agenda-bg);

    border-radius:
        var(--agenda-radius-lg);

    border:
        1px solid var(--agenda-border);

    box-shadow:
        var(--agenda-shadow);

    display: flex;

    flex-direction: column;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(16px)
        scale(0.97);

    transition:
        opacity 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        visibility 0.28s;

    pointer-events: none;
}

.agenda-widget--open {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}


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

.agenda-header {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 69px;

    gap: 12px;

    padding:
        14px 16px;

    background:
        linear-gradient(
            180deg,
            var(--agenda-surface),
            var(--agenda-surface-2)
        );

    border-bottom:
        1px solid var(--agenda-border);

    flex-shrink: 0;
}


/* ============================================================
   HEADER ICON
   ============================================================ */

.agenda-header__icon {
    width: 40px;
    height: 40px;

    min-width: 40px;

    border-radius: 50%;

    background:
        var(--agenda-accent-dim);

    border:
        1.5px solid var(--agenda-accent);

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        var(--agenda-accent);

    font-size: 18px;

    flex-shrink: 0;
}


/* ============================================================
   HEADER INFORMATION
   ============================================================ */

.agenda-header__info {
    flex: 1;

    min-width: 0;

    overflow: hidden;
}

.agenda-header__title {
    font-size: 15px;

    font-weight: 700;

    color:
        var(--agenda-text);

    letter-spacing:
        0.3px;

    line-height:
        1.2;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}

.agenda-header__subtitle {
    font-size: 11.5px;

    color:
        var(--agenda-text-secondary);

    line-height:
        1.3;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}

.agenda-header__status {
    display: flex;

    align-items: center;

    gap: 5px;

    font-size: 11px;

    color:
        var(--agenda-success);

    font-weight: 500;

    margin-top: 1px;
}

.agenda-header__status-dot {
    width: 7px;
    height: 7px;

    min-width: 7px;

    border-radius: 50%;

    background:
        var(--agenda-success);

    animation:
        agenda-status-pulse 2s ease-in-out infinite;
}

@keyframes agenda-status-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}


/* ============================================================
   HEADER CLOSE BUTTON
   FAR RIGHT POSITION
   ============================================================ */

.agenda-header__close {
    position: relative;

    margin-left: auto;

    width: 36px;
    height: 36px;

    min-width: 36px;
    min-height: 36px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border:
        1px solid var(--agenda-border);

    background:
        rgba(255, 255, 255, 0.025);

    color:
        var(--agenda-text-secondary);

    font-size: 17px;

    line-height: 1;

    cursor: pointer;

    outline: none;

    -webkit-tap-highlight-color: transparent;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Close icon */

.agenda-header__close i {
    display: block;

    line-height: 1;

    pointer-events: none;

    transition:
        transform 0.2s ease;
}


/* Hover */

.agenda-header__close:hover {
    background:
        var(--agenda-accent-dim);

    color:
        var(--agenda-accent);

    border-color:
        var(--agenda-accent);

    transform:
        translateY(-1px);

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.25),
        0 0 0 3px rgba(232, 160, 32, 0.08);
}

.agenda-header__close:hover i {
    transform:
        rotate(90deg);
}


/* Active */

.agenda-header__close:active {
    transform:
        scale(0.92);
}

.agenda-header__close:active i {
    transform:
        rotate(90deg);
}


/* Keyboard focus */

.agenda-header__close:focus-visible {
    border-color:
        var(--agenda-accent);

    box-shadow:
        0 0 0 2px var(--agenda-bg),
        0 0 0 4px var(--agenda-accent);
}


/* ============================================================
   BODY
   ============================================================ */

.agenda-body {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    overflow-x: hidden;

    padding: 16px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    scroll-behavior: smooth;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;
}

.agenda-body::-webkit-scrollbar {
    width: 5px;
}

.agenda-body::-webkit-scrollbar-track {
    background:
        transparent;
}

.agenda-body::-webkit-scrollbar-thumb {
    background:
        var(--agenda-border);

    border-radius: 3px;
}


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

.agenda-message {
    max-width: 85%;

    padding:
        10px 14px;

    border-radius:
        var(--agenda-radius);

    font-size:
        13.5px;

    line-height:
        1.55;

    word-wrap:
        break-word;

    overflow-wrap:
        break-word;

    animation:
        agenda-msg-in 0.25s ease-out;

    white-space:
        pre-wrap;
}

@keyframes agenda-msg-in {

    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* AI */

.agenda-message--ai {
    align-self:
        flex-start;

    background:
        var(--agenda-surface);

    color:
        var(--agenda-text);

    border:
        1px solid var(--agenda-border);

    border-bottom-left-radius:
        4px;
}


/* User */

.agenda-message--user {
    align-self:
        flex-end;

    background:
        var(--agenda-accent-dim);

    color:
        var(--agenda-text);

    border:
        1px solid rgba(232, 160, 32, 0.3);

    border-bottom-right-radius:
        4px;
}


/* System */

.agenda-message--system {
    align-self:
        center;

    background:
        transparent;

    color:
        var(--agenda-text-muted);

    font-size:
        11.5px;

    text-align:
        center;

    max-width:
        95%;

    padding:
        6px 10px;

    border:
        1px dashed var(--agenda-border);

    border-radius:
        var(--agenda-radius-sm);
}


/* ============================================================
   TYPING INDICATOR
   ============================================================ */

.agenda-typing {
    align-self:
        flex-start;

    display: flex;

    align-items: center;

    gap: 5px;

    padding:
        12px 16px;

    background:
        var(--agenda-surface);

    border:
        1px solid var(--agenda-border);

    border-radius:
        var(--agenda-radius);

    border-bottom-left-radius:
        4px;

    animation:
        agenda-msg-in 0.25s ease-out;
}

.agenda-typing__dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--agenda-text-muted);

    animation:
        agenda-typing-bounce 1.4s ease-in-out infinite;
}

.agenda-typing__dot:nth-child(2) {
    animation-delay:
        0.2s;
}

.agenda-typing__dot:nth-child(3) {
    animation-delay:
        0.4s;
}

@keyframes agenda-typing-bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}


/* ============================================================
   QUICK REPLIES
   ============================================================ */

.agenda-quick-replies {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    padding:
        4px 0 2px;

    animation:
        agenda-msg-in 0.3s ease-out;
}

.agenda-quick-reply {
    padding:
        7px 14px;

    border-radius:
        20px;

    border:
        1px solid var(--agenda-border);

    background:
        var(--agenda-surface);

    color:
        var(--agenda-text);

    font-size:
        12.5px;

    font-weight:
        500;

    cursor:
        pointer;

    transition:
        all 0.2s ease;

    white-space:
        nowrap;

    outline:
        none;

    -webkit-tap-highlight-color:
        transparent;

    font-family:
        var(--agenda-font);
}

.agenda-quick-reply:hover {
    border-color:
        var(--agenda-accent);

    background:
        var(--agenda-accent-dim);

    color:
        var(--agenda-accent-hover);

    transform:
        translateY(-1px);
}

.agenda-quick-reply:focus-visible {
    box-shadow:
        0 0 0 2px var(--agenda-bg),
        0 0 0 4px var(--agenda-accent);
}

.agenda-quick-reply:active {
    transform:
        translateY(0);
}


/* ============================================================
   PRODUCT / SERVICE LISTS
   ============================================================ */

.agenda-product-list,
.agenda-service-list {
    display: flex;

    flex-direction: column;

    gap: 6px;

    padding:
        4px 0;

    animation:
        agenda-msg-in 0.3s ease-out;

    width: 100%;
}

.agenda-product,
.agenda-service {
    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        10px 14px;

    border-radius:
        var(--agenda-radius-sm);

    border:
        1px solid var(--agenda-border);

    background:
        var(--agenda-surface);

    cursor:
        pointer;

    transition:
        all 0.2s ease;

    outline:
        none;

    -webkit-tap-highlight-color:
        transparent;

    font-family:
        var(--agenda-font);

    text-align:
        left;

    width:
        100%;

    color:
        var(--agenda-text);
}

.agenda-product:hover,
.agenda-service:hover {
    border-color:
        var(--agenda-accent);

    background:
        var(--agenda-surface-2);

    transform:
        translateX(3px);
}

.agenda-product:focus-visible,
.agenda-service:focus-visible {
    box-shadow:
        0 0 0 2px var(--agenda-bg),
        0 0 0 4px var(--agenda-accent);
}

.agenda-product__icon,
.agenda-service__icon {
    width: 32px;
    height: 32px;

    border-radius:
        var(--agenda-radius-sm);

    background:
        var(--agenda-accent-dim);

    border:
        1px solid rgba(232, 160, 32, 0.25);

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        var(--agenda-accent);

    font-size:
        14px;

    flex-shrink: 0;
}

.agenda-product__text,
.agenda-service__text {
    flex: 1;

    min-width: 0;
}

.agenda-product__name,
.agenda-service__name {
    font-size:
        13px;

    font-weight:
        600;

    color:
        var(--agenda-text);

    line-height:
        1.3;
}

.agenda-product__desc,
.agenda-service__desc {
    font-size:
        11px;

    color:
        var(--agenda-text-secondary);

    line-height:
        1.3;

    margin-top:
        1px;
}

.agenda-product__arrow,
.agenda-service__arrow {
    color:
        var(--agenda-text-muted);

    font-size:
        11px;

    flex-shrink: 0;
}


/* ============================================================
   BACK BUTTON
   ============================================================ */

.agenda-back {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        8px 14px;

    border-radius:
        var(--agenda-radius-sm);

    border:
        1px solid var(--agenda-border);

    background:
        transparent;

    color:
        var(--agenda-text-secondary);

    font-size:
        12.5px;

    font-weight:
        500;

    cursor:
        pointer;

    transition:
        all 0.2s ease;

    outline:
        none;

    -webkit-tap-highlight-color:
        transparent;

    font-family:
        var(--agenda-font);

    margin-top:
        4px;
}

.agenda-back:hover {
    background:
        var(--agenda-surface);

    color:
        var(--agenda-text);

    border-color:
        var(--agenda-text-muted);
}

.agenda-back:focus-visible {
    box-shadow:
        0 0 0 2px var(--agenda-bg),
        0 0 0 4px var(--agenda-accent);
}


/* ============================================================
   REQUEST QUOTE
   ============================================================ */

.agenda-request-quote {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        11px 22px;

    border-radius:
        var(--agenda-radius-sm);

    border:
        none;

    background:
        linear-gradient(
            135deg,
            var(--agenda-accent),
            #d4900a
        );

    color:
        #0f1419;

    font-size:
        13.5px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        all 0.2s ease;

    outline:
        none;

    -webkit-tap-highlight-color:
        transparent;

    font-family:
        var(--agenda-font);

    letter-spacing:
        0.3px;

    width:
        100%;

    margin-top:
        6px;

    box-shadow:
        0 2px 12px rgba(232, 160, 32, 0.3);
}

.agenda-request-quote:hover {
    background:
        linear-gradient(
            135deg,
            var(--agenda-accent-hover),
            var(--agenda-accent)
        );

    transform:
        translateY(-1px);

    box-shadow:
        0 4px 18px rgba(232, 160, 32, 0.45);
}

.agenda-request-quote:focus-visible {
    box-shadow:
        0 0 0 2px var(--agenda-bg),
        0 0 0 4px var(--agenda-accent);
}

.agenda-request-quote:active {
    transform:
        translateY(0);
}

.agenda-request-quote:disabled {
    opacity:
        0.5;

    cursor:
        not-allowed;

    transform:
        none;
}

.agenda-request-quote--inline {
    width:
        auto;

    padding:
        9px 18px;

    font-size:
        12.5px;
}


/* ============================================================
   FORM
   ============================================================ */

.agenda-form {
    display: flex;

    flex-direction: column;

    gap: 14px;

    padding:
        4px 0;

    animation:
        agenda-msg-in 0.3s ease-out;

    width:
        100%;
}

.agenda-form__heading {
    font-size:
        16px;

    font-weight:
        700;

    color:
        var(--agenda-text);

    letter-spacing:
        0.2px;

    line-height:
        1.3;
}

.agenda-form__subheading {
    font-size:
        12.5px;

    color:
        var(--agenda-text-secondary);

    line-height:
        1.5;

    margin-top:
        -6px;
}

.agenda-form-group {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}

.agenda-form-group label {
    font-size:
        12px;

    font-weight:
        600;

    color:
        var(--agenda-text-secondary);

    letter-spacing:
        0.2px;
}

.agenda-form-group label
.agenda-required {
    color:
        var(--agenda-accent);

    margin-left:
        2px;
}

.agenda-form-field {
    width:
        100%;

    padding:
        10px 13px;

    border-radius:
        var(--agenda-radius-sm);

    border:
        1px solid var(--agenda-border);

    background:
        var(--agenda-surface);

    color:
        var(--agenda-text);

    font-size:
        13.5px;

    font-family:
        var(--agenda-font);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

    outline:
        none;

    -webkit-tap-highlight-color:
        transparent;
}

.agenda-form-field::placeholder {
    color:
        var(--agenda-text-muted);

    opacity:
        0.7;
}

.agenda-form-field:focus {
    border-color:
        var(--agenda-accent);

    box-shadow:
        0 0 0 3px rgba(232, 160, 32, 0.12);
}

.agenda-form-field[aria-invalid="true"] {
    border-color:
        var(--agenda-error);

    box-shadow:
        0 0 0 3px rgba(231, 76, 60, 0.1);
}

.agenda-form-field--textarea {
    min-height:
        80px;

    resize:
        vertical;

    line-height:
        1.5;
}

.agenda-form-error {
    font-size:
        11.5px;

    color:
        var(--agenda-error);

    line-height:
        1.4;

    display:
        none;

    align-items:
        center;

    gap:
        4px;
}

.agenda-form-error--visible {
    display:
        flex;
}

.agenda-form-error i {
    font-size:
        11px;

    flex-shrink:
        0;
}


/* ============================================================
   TURNSTILE
   ============================================================ */

.agenda-turnstile {
    display:
        flex;

    justify-content:
        center;

    padding:
        4px 0;

    min-height:
        65px;

    width:
        100%;
}

.agenda-turnstile iframe {
    max-width:
        100%;
}


/* ============================================================
   QUOTE ACTIONS
   ============================================================ */

.agenda-quote-actions {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    margin-top:
        4px;
}

.agenda-quote-actions__row {
    display:
        flex;

    gap:
        8px;
}

.agenda-quote-actions__row
.agenda-back {
    flex:
        1;

    justify-content:
        center;

    margin-top:
        0;
}


/* ============================================================
   REVIEW
   ============================================================ */

.agenda-review {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    padding:
        4px 0;

    animation:
        agenda-msg-in 0.3s ease-out;

    width:
        100%;
}

.agenda-review__heading {
    font-size:
        16px;

    font-weight:
        700;

    color:
        var(--agenda-text);

    letter-spacing:
        0.2px;
}

.agenda-review__list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        1px;

    border-radius:
        var(--agenda-radius-sm);

    overflow:
        hidden;

    border:
        1px solid var(--agenda-border);
}

.agenda-review__item {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        10px 14px;

    background:
        var(--agenda-surface);

    font-size:
        13px;

    line-height:
        1.4;
}

.agenda-review__item:nth-child(even) {
    background:
        var(--agenda-surface-2);
}

.agenda-review__label {
    color:
        var(--agenda-text-secondary);

    font-weight:
        500;

    flex-shrink:
        0;

    font-size:
        12px;
}

.agenda-review__value {
    color:
        var(--agenda-text);

    font-weight:
        600;

    text-align:
        right;

    word-break:
        break-word;
}

.agenda-review__actions {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    margin-top:
        4px;
}

.agenda-review__actions-row {
    display:
        flex;

    gap:
        8px;
}

.agenda-review__actions-row
.agenda-back {
    flex:
        1;

    justify-content:
        center;

    margin-top:
        0;
}


/* ============================================================
   SUCCESS
   ============================================================ */

.agenda-success {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        14px;

    padding:
        24px 16px;

    text-align:
        center;

    animation:
        agenda-msg-in 0.4s ease-out;

    width:
        100%;
}

.agenda-success__icon {
    width:
        64px;

    height:
        64px;

    border-radius:
        50%;

    background:
        rgba(46, 204, 113, 0.12);

    border:
        2px solid var(--agenda-success);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--agenda-success);

    font-size:
        28px;

    animation:
        agenda-success-pop
        0.5s
        cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes agenda-success-pop {

    0% {
        transform:
            scale(0.5);

        opacity:
            0;
    }

    100% {
        transform:
            scale(1);

        opacity:
            1;
    }
}

.agenda-success__heading {
    font-size:
        17px;

    font-weight:
        700;

    color:
        var(--agenda-text);
}

.agenda-success__text {
    font-size:
        13px;

    color:
        var(--agenda-text-secondary);

    line-height:
        1.6;

    max-width:
        300px;
}

.agenda-success__actions {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    width:
        100%;

    margin-top:
        4px;
}


/* ============================================================
   ERROR
   ============================================================ */

.agenda-error {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        14px;

    padding:
        24px 16px;

    text-align:
        center;

    animation:
        agenda-msg-in 0.4s ease-out;

    width:
        100%;
}

.agenda-error__icon {
    width:
        64px;

    height:
        64px;

    border-radius:
        50%;

    background:
        rgba(231, 76, 60, 0.12);

    border:
        2px solid var(--agenda-error);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--agenda-error);

    font-size:
        28px;
}

.agenda-error__heading {
    font-size:
        17px;

    font-weight:
        700;

    color:
        var(--agenda-text);
}

.agenda-error__text {
    font-size:
        13px;

    color:
        var(--agenda-text-secondary);

    line-height:
        1.6;

    max-width:
        300px;
}

.agenda-error__actions {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    width:
        100%;

    margin-top:
        4px;
}


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

.agenda-input-area {
    display:
        flex;

    align-items:
        flex-end;

    gap:
        8px;

    padding:
        10px 14px;

    background:
        var(--agenda-surface);

    border-top:
        1px solid var(--agenda-border);

    flex-shrink:
        0;

    padding-bottom:
        calc(
            10px +
            env(
                safe-area-inset-bottom,
                0px
            )
        );
}

.agenda-input {
    flex:
        1;

    min-height:
        40px;

    max-height:
        100px;

    padding:
        10px 14px;

    border-radius:
        20px;

    border:
        1px solid var(--agenda-border);

    background:
        var(--agenda-bg);

    color:
        var(--agenda-text);

    font-size:
        13.5px;

    font-family:
        var(--agenda-font);

    resize:
        none;

    outline:
        none;

    line-height:
        1.4;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

    overflow-y:
        auto;

    -webkit-overflow-scrolling:
        touch;
}

.agenda-input::placeholder {
    color:
        var(--agenda-text-muted);

    opacity:
        0.7;
}

.agenda-input:focus {
    border-color:
        var(--agenda-accent);

    box-shadow:
        0 0 0 3px rgba(232, 160, 32, 0.1);
}

.agenda-input:disabled {
    opacity:
        0.5;

    cursor:
        not-allowed;
}


/* ============================================================
   SEND BUTTON
   ============================================================ */

.agenda-send {
    width:
        40px;

    height:
        40px;

    min-width:
        40px;

    border-radius:
        50%;

    border:
        none;

    background:
        linear-gradient(
            135deg,
            var(--agenda-accent),
            #d4900a
        );

    color:
        #0f1419;

    font-size:
        15px;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transition:
        all 0.2s ease;

    flex-shrink:
        0;

    outline:
        none;

    -webkit-tap-highlight-color:
        transparent;
}

.agenda-send:hover {
    background:
        linear-gradient(
            135deg,
            var(--agenda-accent-hover),
            var(--agenda-accent)
        );

    transform:
        scale(1.05);
}

.agenda-send:focus-visible {
    box-shadow:
        0 0 0 2px var(--agenda-surface),
        0 0 0 4px var(--agenda-accent);
}

.agenda-send:active {
    transform:
        scale(0.95);
}

.agenda-send:disabled {
    opacity:
        0.4;

    cursor:
        not-allowed;

    transform:
        none;
}


/* ============================================================
   FOOTER
   ============================================================ */

.agenda-footer {
    text-align:
        center;

    padding:
        6px 14px 10px;

    font-size:
        10px;

    color:
        var(--agenda-text-muted);

    letter-spacing:
        0.5px;

    background:
        var(--agenda-surface);

    border-top:
        1px solid var(--agenda-border);

    flex-shrink:
        0;
}

.agenda-footer a {
    color:
        var(--agenda-text-muted);

    text-decoration:
        none;

    transition:
        color 0.2s ease;
}

.agenda-footer a:hover {
    color:
        var(--agenda-accent);
}


/* ============================================================
   SCREEN READER ONLY
   ============================================================ */

.agenda-sr-only {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;
}


/* ============================================================
   TABLET / MOBILE BOTTOM SHEET
   ============================================================ */

@media (max-width: 768px) {

    .agenda-widget {
        left:
            10px;

        right:
            10px;

        bottom:
            10px;

        width:
            auto;

        height:
            min(78dvh, 680px);

        max-width:
            none;

        max-height:
            calc(100dvh - 20px);

        border-radius:
            var(--agenda-radius-lg)
            var(--agenda-radius-lg)
            0
            0;
    }


    .agenda-toggle {
        right:
            -6px;

        bottom:
            280px;

        width:
            40px;

        height:
            40px;

        font-size:
            21px;
    }


    .agenda-toggle__tooltip {
        display:
            none;
    }


    /* Mobile Header */

    .agenda-header {
        min-height:
            64px;

        padding:
            11px 14px;

        gap:
            10px;
    }


    .agenda-header__icon {
        width:
            38px;

        height:
            38px;

        min-width:
            38px;

        font-size:
            17px;
    }


    .agenda-header__close {
        width:
            36px;

        height:
            36px;

        min-width:
            36px;

        min-height:
            36px;

        font-size:
            16px;
    }


    .agenda-body {
        padding:
            14px;
    }

}


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

@media (max-width: 380px) {

    .agenda-widget {
        left:
            6px;

        right:
            6px;

        bottom:
            6px;

        height:
            min(82dvh, 700px);
    }


    .agenda-header {
        min-height:
            60px;

        padding:
            10px 12px;

        gap:
            8px;
    }


    .agenda-header__icon {
        width:
            34px;

        height:
            34px;

        min-width:
            34px;

        font-size:
            15px;
    }


    .agenda-header__title {
        font-size:
            14px;
    }


    .agenda-header__subtitle {
        font-size:
            11px;
    }


    .agenda-header__status {
        font-size:
            10px;
    }


    .agenda-header__close {
        width:
            34px;

        height:
            34px;

        min-width:
            34px;

        min-height:
            34px;

        font-size:
            15px;
    }


    .agenda-body {
        padding:
            12px;
    }


    .agenda-message {
        max-width:
            92%;

        font-size:
            13px;
    }


    .agenda-quick-reply {
        font-size:
            11.5px;

        padding:
            6px 11px;
    }


    .agenda-form-field {
        font-size:
            13px;

        padding:
            9px 11px;
    }

}


/* ============================================================
   VERY SMALL SCREENS — 320px
   ============================================================ */

@media (max-width: 330px) {

    .agenda-widget {
        left:
            4px;

        right:
            4px;

        bottom:
            4px;
    }


    .agenda-header {
        padding:
            9px 10px;

        gap:
            7px;
    }


    .agenda-header__icon {
        width:
            32px;

        height:
            32px;

        min-width:
            32px;

        font-size:
            14px;
    }


    .agenda-header__title {
        font-size:
            13.5px;
    }


    .agenda-header__subtitle {
        font-size:
            10.5px;
    }


    .agenda-header__status {
        font-size:
            9.5px;
    }


    .agenda-header__status-dot {
        width:
            6px;

        height:
            6px;

        min-width:
            6px;
    }


    .agenda-header__close {
        width:
            32px;

        height:
            32px;

        min-width:
            32px;

        min-height:
            32px;

        font-size:
            14px;
    }


    .agenda-quick-reply {
        font-size:
            11px;

        padding:
            5px 10px;
    }

}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (min-width: 1440px) {

    .agenda-widget {
        width:
            410px;

        height:
            640px;
    }

}


/* ============================================================
   EXTRA LARGE DESKTOP
   ============================================================ */

@media (min-width: 1920px) {

    .agenda-widget {
        width:
            420px;

        height:
            660px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .agenda-toggle {
        animation:
            none;
    }


    .agenda-toggle__dot--visible {
        animation:
            none;
    }


    .agenda-header__status-dot {
        animation:
            none;
    }


    .agenda-widget {
        transition-duration:
            0.01ms;
    }


    .agenda-message,
    .agenda-typing,
    .agenda-quick-replies,
    .agenda-product-list,
    .agenda-service-list,
    .agenda-form,
    .agenda-review,
    .agenda-success,
    .agenda-error {
        animation-duration:
            0.01ms;
    }


    .agenda-typing__dot {
        animation-duration:
            0.01ms;
    }


    .agenda-success__icon {
        animation-duration:
            0.01ms;
    }


    .agenda-quick-reply:hover,
    .agenda-product:hover,
    .agenda-service:hover,
    .agenda-request-quote:hover,
    .agenda-send:hover {
        transform:
            none;
    }


    .agenda-header__close:hover {
        transform:
            none;
    }


    .agenda-header__close:hover i {
        transform:
            none;
    }

}