/*
 * ============================================================
 * REX CHATBOT — STYLESHEET
 * File: rex_chatbot.css
 *
 * STRUCTURE:
 *   1. CSS Variables (easy customization)
 *   2. Floating Chat Button (the trigger icon)
 *   3. Chat Panel (the expanded chatbot window)
 *   4. Chat Header
 *   5. Chat Messages Area
 *   6. Message Bubbles (bot + user)
 *   7. Typing Indicator (animated dots)
 *   8. Suggestion Bubbles
 *   9. Chat Input Bar
 *  10. Animations & Transitions
 *  11. Scrollbar Styling
 *  12. Responsive (mobile)
 *
 * CUSTOMIZATION:
 *   Change the values in the :root block to restyle the entire
 *   chatbot without touching any other rule.
 *
 * ICON vs PANEL POSITIONING:
 *   The trigger icon and the chat panel are intentionally
 *   positioned independently of each other.
 *
 *   -- Icon position: controlled by --rex-t-top and --rex-t-right
 *   -- Panel position: controlled by --rex-panel-bottom and
 *      --rex-panel-left (centered on screen via transform)
 *
 *   Change only the icon variables to move the icon without
 *   affecting the panel, and vice versa.
 * ============================================================
 */


/* ── 1. CSS VARIABLES ─────────────────────────────────────── */
:root {
    /* Brand colour (Acastem primary) */
    --rex-primary:          rgb(164, 106, 62);
    --rex-primary-dark:     rgb(130, 82, 42);
    --rex-primary-light:    rgb(210, 165, 120);
    --rex-primary-faint:    rgba(164, 106, 62, 0.08);

    /* Chat panel dimensions — change these to resize */
    --rex-panel-width:      75vw;       /* 80% of viewport width  */
    --rex-panel-height:     55vh;       /* 60% of viewport height */
    --rex-panel-max-width:  680px;      /* hard cap on large screens */
    --rex-panel-max-height: 700px;

    /* Float button size */
    --rex-btn-size:         35px;

    /* ── TRIGGER ICON POSITION (independent of panel) ──────
     * Move the icon by changing only these two variables.
     * --rex-t-top  : distance from the TOP of the screen
     * --rex-t-right: distance from the RIGHT edge of the screen
     * To place at bottom instead, set --rex-t-top: auto and
     * add --rex-t-bottom: 28px directly on #rex-chatbot-trigger
     * ─────────────────────────────────────────────────────── */
    --rex-t-top:            10px;       /* icon sits near the top  */
    --rex-t-right:          15px;       /* icon hugs the right edge */

    /* ── CHAT PANEL POSITION (independent of icon) ─────────
     * The panel is centered horizontally using left:50% +
     * translateX(-50%). Only bottom needs to be set.
     * --rex-panel-bottom: distance from the bottom of the screen
     * ─────────────────────────────────────────────────────── */
    --rex-panel-bottom:     7.5vh;        /* panel sits just above bottom */

    /* Colours */
    --rex-bg:               #ffffff;
    --rex-header-bg:        rgb(164, 106, 62);
    --rex-header-text:      #ffffff;
    --rex-bot-bubble-bg:    #f4ece4;
    --rex-bot-bubble-text:  #2c1a0a;
    --rex-user-bubble-bg:   rgb(164, 106, 62);
    --rex-user-bubble-text: #ffffff;
    --rex-input-bg:         #faf6f2;
    --rex-input-border:     rgb(164, 106, 62);
    --rex-suggestion-bg:    #fff7f0;
    --rex-suggestion-border:rgb(164, 106, 62);
    --rex-suggestion-text:  rgb(130, 82, 42);
    --rex-shadow:           0 8px 40px rgba(164, 106, 62, 0.22);
    --rex-border-radius:    18px;

    /* Animation speed */
    --rex-transition:       0.38s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ── 2. FLOATING CHAT BUTTON ──────────────────────────────── */

/* The trigger icon — pinned to the TOP of the screen.
 * Its position is fully controlled by --rex-t-top and
 * --rex-t-right. Changing those variables is all you need
 * to reposition the icon — the panel will not be affected. */
#rex-chatbot-trigger {
    position:         fixed;
    top:              var(--rex-t-top);         /* distance from top    */
    right:            var(--rex-t-right);        /* distance from right  */
    bottom:           auto;                      /* unset bottom so top works */
    width:            var(--rex-btn-size);
    height:           var(--rex-btn-size);
    background:       var(--rex-primary);
    border-radius:    50%;
    cursor:           pointer;
    z-index:          9999;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    box-shadow:       0 4px 20px rgba(164, 106, 62, 0.45);
    transition:       transform 0.2s ease, box-shadow 0.2s ease;
    border:           0.5px solid rgb(248 241 237); /*none;*/
    outline:          none;
}

/* Hover & active states */
#rex-chatbot-trigger:hover {
    transform:  scale(1.1);
    box-shadow: 0 6px 28px rgba(164, 106, 62, 0.55);
}

#rex-chatbot-trigger:active {
    transform: scale(0.95);
}

/* SVG icon inside the button */
#rex-chatbot-trigger svg {
    width:  28px;
    height: 28px;
    fill:   #ffffff;
    transition: transform var(--rex-transition);
}

/* When the panel is open, rotate icon to 'X' style */
#rex-chatbot-trigger.is-open svg.icon-chat {
    display: none;
}
#rex-chatbot-trigger svg.icon-close {
    display: none;
}
#rex-chatbot-trigger.is-open svg.icon-close {
    display: block;
}

/* Notification badge (unread count) */
#rex-chatbot-trigger .rex-badge {
    position:      absolute;
    top:           -4px;
    right:         -4px;
    width:         20px;
    height:        20px;
    background:    #e74c3c;
    color:         #fff;
    border-radius: 50%;
    font-size:     11px;
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border:        2px solid #fff;
    display:       none; /* shown via JS when there is a new message */
}


/* ── 3. CHAT PANEL ────────────────────────────────────────── */

/* The main chat window container.
 * Positioned independently of the trigger icon.
 * Centered horizontally using left:50% + translateX(-50%).
 * Vertical position controlled by --rex-panel-bottom.
 * The open/close animation uses translateY on top of the
 * centering transform — both are combined in .is-visible. */
#rex-chatbot-panel {
    position:         fixed;
    bottom:           var(--rex-panel-bottom);  /* distance from bottom of screen */
    left:             50%;                      /* start at horizontal center      */
    right:            auto;                     /* unset right so left:50% works   */
    width:            var(--rex-panel-width);
    height:           var(--rex-panel-height);
    max-width:        var(--rex-panel-max-width);
    max-height:       var(--rex-panel-max-height);
    background:       var(--rex-bg);
    border-radius:    var(--rex-border-radius);
    box-shadow:       var(--rex-shadow);
    z-index:          9998;
    display:          flex;
    flex-direction:   column;
    overflow:         hidden;

    /* Hidden state — translateX(-50%) keeps it centered,
     * translateY(24px) is the slide-in animation offset,
     * scale(0.96) gives the subtle pop-in feel */
    opacity:          0;
    transform:        translateX(-50%) translateY(24px) scale(0.96);
    pointer-events:   none;

    /* Smooth open/close */
    transition:       opacity var(--rex-transition),
                      transform var(--rex-transition);
}

/* Visible (open) state — toggled by JS.
 * translateX(-50%) MUST stay here to keep the panel centered.
 * Only translateY and scale are reset to their neutral values. */
#rex-chatbot-panel.is-visible {
    opacity:        1;
    transform:      translateX(-50%) translateY(0) scale(1);
    pointer-events: all;
}


/* ── 4. CHAT HEADER ──────────────────────────────────────── */

.rex-header {
    background:      var(--rex-header-bg);
    color:           var(--rex-header-text);
    padding:         14px 18px;
    display:         flex;
    align-items:     center;
    gap:             12px;
    flex-shrink:     0;  /* don't let the header shrink */
}

/* Avatar circle */
.rex-header-avatar {
    width:           38px;
    height:          38px;
    background:      rgba(255,255,255,0.2);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       18px;
    flex-shrink:     0;
}

/* Title & subtitle text */
.rex-header-info {
    flex: 1;
}

.rex-header-info h4 {
    margin:      0;
    font-size:   15px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.rex-header-info p {
    margin:      0;
    font-size:   12px;
    opacity:     0.8;
}

/* Clear chat button in header */
.rex-clear-btn {
    background:   rgba(255,255,255,0.15);
    border:       none;
    color:        #fff;
    cursor:       pointer;
    font-size:    12px;
    padding:      5px 10px;
    border-radius: 20px;
    transition:   background 0.2s;
    white-space:  nowrap;
}

.rex-clear-btn:hover {
    background: rgba(255,255,255,0.28);
}


/* ── 5. MESSAGES AREA ────────────────────────────────────── */

/* Scrollable message feed */
.rex-messages {
    flex:           1;       /* take all available height */
    overflow-y:     auto;
    padding:        16px 16px 8px 16px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}


/* ── 6. MESSAGE BUBBLES ──────────────────────────────────── */

/* A single message row */
.rex-message {
    display:        flex;
    max-width:      84%;
    animation:      rexFadeIn 0.28s ease forwards;
}

/* Bot messages align left */
.rex-message.bot {
    align-self:     flex-start;
    flex-direction: row;
    align-items:    flex-end;
    gap:            8px;
}

/* User messages align right */
.rex-message.user {
    align-self:   flex-end;
    flex-direction: row-reverse;
}

/* Small bot avatar beside bot bubbles */
.rex-msg-avatar {
    width:           30px;
    height:          30px;
    background:      var(--rex-primary-faint);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       14px;
    flex-shrink:     0;
}

/* The bubble itself */
.rex-msg-bubble {
    padding:        10px 14px;
    border-radius:  16px;
    font-size:      14px;
    line-height:    1.55;
    word-break:     break-word;
}

/* Bot bubble styling */
.rex-message.bot .rex-msg-bubble {
    background:           var(--rex-bot-bubble-bg);
    color:                var(--rex-bot-bubble-text);
    border-bottom-left-radius: 4px;
}

/* User bubble styling */
.rex-message.user .rex-msg-bubble {
    background:           var(--rex-user-bubble-bg);
    color:                var(--rex-user-bubble-text);
    border-bottom-right-radius: 4px;
}

/* Bold text inside bubbles */
.rex-msg-bubble strong {
    color: inherit;
    font-weight: 700;
}


/* ── 7. TYPING INDICATOR ─────────────────────────────────── */

/* The 3-dot animated row */
.rex-typing {
    display:     flex;
    align-items: center;
    gap:         5px;
    padding:     8px 14px;
    background:  var(--rex-bot-bubble-bg);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    width:       fit-content;
}

/* Each animated dot */
.rex-typing span {
    width:            8px;
    height:           8px;
    background:       var(--rex-primary-light);
    border-radius:    50%;
    display:          inline-block;
    animation:        rexBounce 1.2s infinite ease-in-out;
}

/* Stagger the dots */
.rex-typing span:nth-child(2) { animation-delay: 0.2s; }
.rex-typing span:nth-child(3) { animation-delay: 0.4s; }


/* ── 8. SUGGESTION BUBBLES ───────────────────────────────── */

/* Container below the messages */
.rex-suggestions {
    padding:     6px 16px 10px 16px;
    display:     flex;
    flex-wrap:   wrap;
    gap:         7px;
    flex-shrink: 0;
    border-top:  1px solid rgba(164, 106, 62, 0.1);
    background:  #fffaf6;
    min-height:  44px;
    transition:  min-height 0.2s;
}

/* Individual suggestion pill */
.rex-suggestion-pill {
    background:    var(--rex-suggestion-bg);
    border:        1px solid var(--rex-suggestion-border);
    color:         var(--rex-suggestion-text);
    font-size:     12.5px;
    padding:       6px 13px;
    border-radius: 20px;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.18s, transform 0.15s;
    font-weight:   500;
    animation:     rexFadeIn 0.25s ease forwards;
}

.rex-suggestion-pill:hover {
    background: var(--rex-primary-light);
    color:      #fff;
    transform:  translateY(-1px);
}

.rex-suggestion-pill:active {
    transform: scale(0.96);
}


/* ── 9. INPUT BAR ────────────────────────────────────────── */

/* Row at the bottom of the panel */
.rex-input-area {
    display:      flex;
    align-items:  center;
    gap:          10px;
    padding:      10px 14px 14px 14px;
    background:   var(--rex-input-bg);
    border-top:   1px solid rgba(164, 106, 62, 0.15);
    flex-shrink:  0;
}

/* Text input field */
.rex-input-area input[type="text"] {
    flex:          1;
    border:        1.5px solid rgba(164, 106, 62, 0.3);
    border-radius: 24px;
    padding:       10px 16px;
    font-size:     14px;
    outline:       none;
    background:    #fff;
    color:         #2c1a0a;
    transition:    border-color 0.2s, box-shadow 0.2s;
}

.rex-input-area input[type="text"]::placeholder {
    color: rgba(164, 106, 62, 0.5);
}

.rex-input-area input[type="text"]:focus {
    border-color: var(--rex-input-border);
    box-shadow:   0 0 0 3px rgba(164, 106, 62, 0.1);
}

/* Send button */
.rex-send-btn {
    width:           42px;
    height:          42px;
    background:      var(--rex-primary);
    border:          none;
    border-radius:   50%;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.2s, transform 0.15s;
    flex-shrink:     0;
}

.rex-send-btn:hover {
    background: var(--rex-primary-dark);
    transform:  scale(1.06);
}

.rex-send-btn:active {
    transform: scale(0.92);
}

.rex-send-btn svg {
    width:  18px;
    height: 18px;
    fill:   #fff;
}

/* Disabled state while waiting for response */
.rex-send-btn:disabled,
.rex-input-area input:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}


/* ── 10. ANIMATIONS ──────────────────────────────────────── */

/* Message appear */
@keyframes rexFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* Typing dot bounce */
@keyframes rexBounce {
    0%, 60%, 100% { transform: translateY(0);    }
    30%           { transform: translateY(-6px); }
}


/* ── 11. SCROLLBAR ───────────────────────────────────────── */

.rex-messages::-webkit-scrollbar {
    width: 5px;
}

.rex-messages::-webkit-scrollbar-track {
    background: transparent;
}

.rex-messages::-webkit-scrollbar-thumb {
    background:    var(--rex-primary-light);
    border-radius: 10px;
}

.rex-messages::-webkit-scrollbar-thumb:hover {
    background: var(--rex-primary);
}


/* ── 12. RESPONSIVE ──────────────────────────────────────── */

@media (max-width: 600px) {
    /* On small screens the panel goes nearly full width.
     * left:50% + translateX(-50%) still centers it correctly.
     * We just override width and border-radius for comfort. */
    #rex-chatbot-panel {
        width:         92vw;
        height:        75vh;
        border-radius: 16px;
        /* bottom stays as --rex-panel-bottom from :root */
    }

    .rex-suggestion-pill {
        font-size: 12px;
        padding:   5px 11px;
    }

    .rex-input-area input[type="text"] {
        font-size: 13px;
    }
}