/* ==========================================================================
   Wellbeing Education – Chatbot (v2.5 refined)
   - Light, friendly card; soft cream background
   - Chat bubbles + quick-reply pills
   - Scoped resets to avoid Bootstrap/global button borders
   - Strong readable (near-black) text
   ========================================================================== */

/* ---- Brand & theme tokens ---- */
:root{
    --wbe-ink:#111111;          /* near-black for strong readability */
    --wbe-muted:#6b6b6b;
    --wbe-gold:#c4a25a;

    --panel-bg:#fbf8ef;         /* soft warm cream panel */
    --border:#e7dfcf;           /* warm light border */
    --shadow:0 12px 34px rgba(0,0,0,.16);

    --bubble-bot:#f4f6f8;       /* neutral for bot */
    --bubble-user:#fff7df;      /* very light gold for user bubble */
    --chip-bg:#f7f3e8;          /* soft pills */

    --ring:rgba(196,162,90,.45);/* gold-ish focus ring */

    --btn-size:56px;
    --gap:24px;
}

/* Respect page dark mode, but widget will be light-themed */
@media (prefers-color-scheme: dark){
    :root{ --shadow:0 12px 34px rgba(0,0,0,.6); }
}

/* ==========================================================================
   Floating button
   ========================================================================== */
#wbe-chatbot-btn{
    position:fixed;
    right:calc(var(--gap) + env(safe-area-inset-right));
    bottom:calc(var(--gap) + env(safe-area-inset-bottom));
    width:var(--btn-size); height:var(--btn-size);
    border-radius:50%; border:none;
    background:var(--wbe-gold); color:#fff;
    box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:1055;
    transition:transform .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color:transparent;
}
#wbe-chatbot-btn:hover{ transform:translateY(-1px); }
#wbe-chatbot-btn:active{ transform:translateY(0); }
#wbe-chatbot-btn:focus-visible{ outline:3px solid var(--ring); outline-offset:3px; }
#wbe-chatbot-btn svg{ width:26px; height:26px; }

/* ==========================================================================
   Panel (light; no dark outer outline)
   ========================================================================== */
#wbe-chatbot-panel,
#wbe-chatbot-panel *{ color-scheme:light; } /* force light inside widget */

#wbe-chatbot-panel{
    position:fixed;
    right:calc(var(--gap) + env(safe-area-inset-right));
    bottom:calc(var(--gap) + var(--btn-size) + 12px + env(safe-area-inset-bottom));
    width:min(92vw, 360px);
    max-height:72vh;

    background:var(--panel-bg);
    color:var(--wbe-ink);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow);

    display:none; flex-direction:column; overflow:hidden; z-index:1055;
    opacity:0; transform:translateY(6px); will-change:transform,opacity;
}
#wbe-chatbot-panel[open]{ display:flex; opacity:1; transform:translateY(0); transition:opacity .15s ease, transform .15s ease; }
#wbe-chatbot-panel:focus,
#wbe-chatbot-panel:focus-visible{ outline:0; } /* remove big blue ring */

/* Scoped reset so Bootstrap/global button styles don't leak in */
#wbe-chatbot-panel *{ box-sizing:border-box; }
#wbe-chatbot-panel button{
    appearance:none; -webkit-appearance:none;
    background:none; border:none; box-shadow:none;
    font:inherit; color:inherit; line-height:inherit;
    padding:0; margin:0;
}

/* ==========================================================================
   Header
   ========================================================================== */
.wbe-chat-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px;
    background:var(--panel-bg);
    border-bottom:1px solid var(--border);
}
.wbe-chat-title{ font-weight:700; font-size:15px; color:var(--wbe-ink); }
.wbe-chat-close{
    background:transparent; border:none; color:inherit;
    cursor:pointer; font-size:20px; line-height:1; padding:4px; border-radius:8px;
}
.wbe-chat-close:focus-visible{ outline:3px solid var(--ring); outline-offset:3px; }

/* ==========================================================================
   Body
   ========================================================================== */
.wbe-chat-body{ padding:12px; overflow:auto; display:flex; flex-direction:column; gap:10px; }
.wbe-foot{ color:var(--wbe-muted); font-size:12px; margin-top:6px; }

/* ==========================================================================
   Chat bubbles
   ========================================================================== */
.wbe-thread{ display:flex; flex-direction:column; gap:8px; }

.wbe-bubble,
.wbe-msg{ /* keep .wbe-msg for backward compatibility */
    max-width:85%;
    padding:11px 13px;
    border-radius:16px;
    font-size:14px; line-height:1.45;
    border:1px solid var(--border);
    color:var(--wbe-ink);
}
.wbe-bubble.bot{  background:var(--bubble-bot);  align-self:flex-start; }
.wbe-bubble.user{ background:var(--bubble-user); align-self:flex-end; }

/* Old bubble class support */
.wbe-msg{ background:#f0f4f6; } /* if any legacy .wbe-msg remains */

/* ==========================================================================
   Quick replies (pills)
   ========================================================================== */
.wbe-quick-wrap{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }

.wbe-quick{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--chip-bg);
    border:1px solid transparent;                 /* no thick borders */
    box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;   /* gentle edge */
    color:var(--wbe-ink);
    border-radius:999px;
    padding:8px 12px;
    font-size:13px; cursor:pointer;
    transition:border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.wbe-quick:hover{
    background:#fff;
    border-color:var(--wbe-gold);
    box-shadow:0 0 0 1px var(--wbe-gold) inset;
}
.wbe-quick:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

/* ==========================================================================
   CTA button (outline -> filled on hover)
   ========================================================================== */
.wbe-cta{
    align-self:flex-start;
    display:inline-flex; align-items:center; gap:8px;
    background:transparent;
    border:2px solid var(--wbe-ink);
    color:var(--wbe-ink);
    border-radius:999px;
    padding:9px 14px;
    font-size:14px; text-decoration:none;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.wbe-cta:hover,
.wbe-cta:focus-visible{
    background:var(--wbe-ink);
    color:#fff;
    outline:3px solid var(--ring); outline-offset:3px;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
    #wbe-chatbot-btn, #wbe-chatbot-panel{ transition:none !important; }
}

/* Touch affordance */
*{ -webkit-tap-highlight-color:transparent; }


/* === Choice spacing + tile layout (easier to recognize) =============== */

/* Extra space between the chat text and the choices */
#wbe-chatbot-panel .wbe-thread { gap: 12px; }

/* Lay choices out as a responsive grid with generous gaps */
#wbe-chatbot-panel .wbe-quick-wrap{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 12px 12px;              /* more separation horizontally & vertically */
    margin-top: 8px;
    padding-top: 4px;
}

/* Make each choice look like a distinct tile (still friendly & soft) */
#wbe-chatbot-panel .wbe-quick{
    background: #ffffff;         /* stronger contrast than the cream panel */
    border: 1px solid var(--border, #e7dfcf);
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
    color: var(--wbe-ink, #111);
    border-radius: 999px;        /* keep pill look; change to 12px for square tiles */
    padding: 10px 14px;          /* larger touch target */
    font-size: 14px;
    min-height: 40px;
    justify-content: center;     /* center labels so they feel like buttons */
    text-align: center;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

/* Clear, friendly hover/focus states */
#wbe-chatbot-panel .wbe-quick:hover{
    transform: translateY(-1px);
    background: #fff;
    border-color: var(--wbe-gold, #c4a25a);
    box-shadow: 0 0 0 2px rgba(196,162,90,.18);
}
#wbe-chatbot-panel .wbe-quick:focus-visible{
    outline: 3px solid rgba(196,162,90,.45);
    outline-offset: 2px;
}

/* Stack single-column on narrow panels for maximum clarity */
@media (max-width: 380px){
    #wbe-chatbot-panel .wbe-quick-wrap{
        grid-template-columns: 1fr;
    }
}

/* Give the CTA button a bit more top space when it appears under choices */
#wbe-chatbot-panel .wbe-cta{ margin-top: 6px; }