/* =========================================================
   CHATBOT WIDGET — chatbot.css

   This file styles the "Ask Pete AI" chat assistant panel.
   It lives separately from style.css so chatbot styles are
   easy to find, change, and update without touching the main
   site styles.

   It uses the same CSS color variables defined in style.css
   (like --navy-900 and --gold-500) so everything stays
   visually consistent.
   ========================================================= */


/* ---------------------------------------------------------
   FLOATING LAUNCHER
   A bottom-right preview button that opens the same chat panel
   as the top navigation "Ask Pete AI" button.
   --------------------------------------------------------- */

#chat-toggle {
    position: fixed;
    /* On very wide screens the page content stops at a centered 1360px
       rail (var(--site-width)), leaving big empty side margins. A plain
       "right: 28px" would strand this button way out in that right
       margin, far from the content. This math parks the button's right
       edge at the content rail's edge once the window is wider than the
       rail, and falls back to a simple 28px inset on narrower screens. */
    right: max(28px, calc((100% - var(--site-width)) / 2));
    bottom: 28px;
    z-index: 998;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 17px;
    color: var(--color-gold-bright);
    background: linear-gradient(180deg, rgb(243 190 79 / 18%), rgb(243 190 79 / 6%));
    border: 1px solid var(--color-gold);
    border-radius: 4px;
    box-shadow:
        inset 0 0 0 1px rgb(243 190 79 / 22%),
        0 10px 26px rgb(0 0 0 / 28%),
        0 0 14px rgb(243 190 79 / 12%);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    /* Hidden by default: chatbot.js adds .is-visible once the visitor
       scrolls past the profile header's Ask Pete AI button. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition:
        opacity 220ms ease,
        transform 220ms ease,
        visibility 0s linear 220ms,
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

#chat-toggle.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 220ms ease,
        transform 220ms ease,
        visibility 0s,
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

#chat-toggle:hover,
#chat-toggle:focus-visible {
    color: var(--color-text-dark);
    background: linear-gradient(180deg, var(--color-gold-bright), var(--color-gold));
    border-color: var(--color-gold-bright);
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 30%),
        0 14px 30px rgb(0 0 0 / 32%),
        0 0 18px rgb(243 190 79 / 26%);
}


/* ---------------------------------------------------------
   CHAT PANEL
   The main container that slides into view from the right.
   Hidden by default — JavaScript adds the "open" class to
   make it visible.
   --------------------------------------------------------- */

#chat-panel {
    position: fixed;
    bottom: 86px;                               /* Leaves room for the floating launcher below the open panel */
    /* Match the launcher: align the panel's right edge to the content
       rail on wide screens instead of the far viewport edge. */
    right: max(28px, calc((100% - var(--site-width)) / 2));
    z-index: 999;

    width: 420px;
    max-height: 650px;

    /* Stack children vertically: header, messages, input */
    display: flex;
    flex-direction: column;

    background: linear-gradient(180deg, #0b1827, #081420);
    border-radius: 10px;
    border: 1px solid rgb(243 190 79 / 28%);
    box-shadow:
        0 22px 70px rgb(0 0 0 / 46%),
        0 0 28px rgb(243 190 79 / 10%);
    overflow: hidden;                           /* Keeps rounded corners intact */

    /* Hidden state — starts invisible and shifted slightly down */
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 14px, 0) scale(0.985);
    transform-origin: bottom right;
    pointer-events: none;                       /* Prevents clicks when hidden */
    transition:
        opacity 240ms ease,
        transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
        visibility 0s linear 280ms;
}

/* Visible state — JavaScript toggles this class on and off */
#chat-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: all;
    transition:
        opacity 220ms ease,
        transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
        visibility 0s;
}


/* ---------------------------------------------------------
   CHAT HEADER
   Dark navy bar at the top showing the assistant name
   and a close button.
   --------------------------------------------------------- */

#chat-header {
    background: linear-gradient(180deg, #07111d, #050c15);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;                             /* Header never collapses */
}

#chat-header-text h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-gold);
    margin-bottom: 3px;
}

#chat-header-text p {
    font-size: 0.71rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* The X close button in the top-right of the header */
#chat-close {
    background: none;
    border: 1px solid transparent;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}

#chat-close:hover {
    color: var(--color-gold-bright);
    background: rgb(243 190 79 / 8%);
    border-color: rgb(243 190 79 / 28%);
}


/* ---------------------------------------------------------
   MESSAGES AREA
   Scrollable region where the conversation appears.
   "flex: 1" means it expands to fill all available space
   between the header above and the input area below.
   --------------------------------------------------------- */

#chat-messages {
    flex: 1;
    overflow-y: auto;                           /* Scroll when messages overflow */
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Individual message bubble — shared styles */
.chat-message {
    max-width: 86%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.6;
    white-space: pre-line;                      /* Shows paragraph breaks from the AI response */
}

/* Bot messages — left-aligned, dark navy */
.bot-message {
    align-self: flex-start;
    background: rgb(255 255 255 / 6%);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-soft);
    border-bottom-left-radius: 3px;            /* Slight speech-tail effect */
}

/* User messages — right-aligned, gold */
.user-message {
    align-self: flex-end;
    background: linear-gradient(180deg, var(--color-gold-bright), var(--color-gold));
    color: var(--color-text-dark);
    border-bottom-right-radius: 3px;
}


/* ---------------------------------------------------------
   SUGGESTED QUESTION BUTTONS
   Four clickable chips under the welcome message.
   They disappear after the visitor clicks one.
   --------------------------------------------------------- */

#chat-suggestions {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.suggestion-btn {
    background: rgb(255 255 255 / 3%);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-secondary);
    border-radius: 6px;
    padding: 9px 14px;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.4;
}

.suggestion-btn:hover {
    background: rgb(243 190 79 / 8%);
    color: var(--color-gold-bright);
    border-color: var(--color-gold);
}


/* ---------------------------------------------------------
   INPUT AREA
   The text field and Send button pinned to the bottom.
   --------------------------------------------------------- */

#chat-input-area {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid var(--color-border-soft);
    background: rgb(255 255 255 / 3%);
    flex-shrink: 0;
}

#chat-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--color-border-soft);
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--color-text-primary);
    background: #07111d;
    outline: none;
    transition: border-color 0.2s;
}

#chat-input:focus {
    border-color: var(--color-gold);
}

#chat-send {
    background: linear-gradient(180deg, rgb(243 190 79 / 18%), rgb(243 190 79 / 6%));
    color: var(--color-gold-bright);
    border: 1px solid var(--color-gold);
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: "Segoe UI", Arial, sans-serif;
}

#chat-send:hover {
    color: var(--color-text-dark);
    background: linear-gradient(180deg, var(--color-gold-bright), var(--color-gold));
}


/* ---------------------------------------------------------
   DISCLAIMER
   Small trust-building note under the input.
   --------------------------------------------------------- */

#chat-disclaimer {
    text-align: center;
    font-size: 0.68rem;
    color: var(--color-text-muted);
    padding: 0 16px 10px;
    background: rgb(255 255 255 / 3%);
}


/* ---------------------------------------------------------
   MOBILE RESPONSIVE
   On small screens the panel fills most of the screen and
   slides up from the bottom like a drawer.
   --------------------------------------------------------- */

@media (max-width: 520px) {

    #chat-toggle {
        right: 18px;
        bottom: 18px;
        min-height: 42px;
        padding: 0 14px;
    }

    #chat-panel {
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 85vh;
        border-radius: 12px 12px 0 0;          /* Flat bottom, rounded top */
        transform-origin: bottom center;
    }

}