/* ============================================================
   Gabby AI – Chat Widget Styles
   Warm, confident, approachable — Nunito + clean geometry
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Lora:ital@0;1&display=swap');

/* ---------- CSS variables (overridden per-widget via inline style) ---------- */
.gabby-wrap {
    --gabby-accent:      #E8754A;
    --gabby-accent-dark: #c45e35;
    --gabby-accent-soft: #fef0ea;
    --gabby-bg:          #ffffff;
    --gabby-surface:     #f9f6f3;
    --gabby-border:      #e8e0d8;
    --gabby-text:        #1a1208;
    --gabby-text-muted:  #7a6e64;
    --gabby-ai-bg:       #f3ede8;
    --gabby-user-bg:     var(--gabby-accent);
    --gabby-user-text:   #ffffff;
    --gabby-radius:      18px;
    --gabby-shadow:      0 8px 40px rgba(0,0,0,.12);

    font-family: 'Nunito', sans-serif;
    max-width: 720px;
    margin: 2rem auto;
    border-radius: var(--gabby-radius);
    box-shadow: var(--gabby-shadow);
    background: var(--gabby-bg);
    overflow: hidden;
    border: 1.5px solid var(--gabby-border);
    display: flex;
    flex-direction: column;
}

/* ---------- Header ---------- */
.gabby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--gabby-accent);
    color: #fff;
}

.gabby-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gabby-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    flex-shrink: 0;
}
.gabby-avatar svg { width: 32px; height: 32px; }

.gabby-header-info { display: flex; flex-direction: column; line-height: 1.2; }
.gabby-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
}
.gabby-status {
    font-size: .72rem;
    font-weight: 500;
    color: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    gap: 5px;
}
.gabby-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7cfc9a;
    box-shadow: 0 0 0 2px rgba(124,252,154,.3);
    animation: gabby-pulse 2s ease-in-out infinite;
}
@keyframes gabby-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: .5; }
}

.gabby-badge-free,
.gabby-badge-pro {
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.gabby-badge-free {
    background: rgba(255,255,255,.25);
    color: #fff;
}
.gabby-badge-pro {
    background: #fff;
    color: var(--gabby-accent);
}

/* ---------- Messages area ---------- */
.gabby-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 18px;
    background: var(--gabby-surface);
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
}

.gabby-messages::-webkit-scrollbar { width: 5px; }
.gabby-messages::-webkit-scrollbar-track { background: transparent; }
.gabby-messages::-webkit-scrollbar-thumb {
    background: var(--gabby-border);
    border-radius: 99px;
}

/* ---------- Message rows ---------- */
.gabby-msg {
    display: flex;
    flex-direction: column;
    max-width: 82%;
    animation: gabby-msg-in .22s ease-out both;
}
@keyframes gabby-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gabby-msg--ai  { align-self: flex-start; }
.gabby-msg--user{ align-self: flex-end; }

.gabby-bubble {
    padding: 11px 16px;
    border-radius: 16px;
    font-size: .93rem;
    line-height: 1.65;
    word-break: break-word;
}

/* AI bubble */
.gabby-msg--ai .gabby-bubble {
    background: var(--gabby-ai-bg);
    color: var(--gabby-text);       /* ← always visible dark text */
    border-bottom-left-radius: 4px;
    border: 1px solid var(--gabby-border);
}

/* User bubble */
.gabby-msg--user .gabby-bubble {
    background: var(--gabby-user-bg);
    color: var(--gabby-user-text);  /* ← always white on accent */
    border-bottom-right-radius: 4px;
}

/* Intro message italic flavour */
.gabby-msg--intro .gabby-bubble {
    font-style: italic;
    color: var(--gabby-text);
}

/* Timestamp */
.gabby-msg-time {
    font-size: .68rem;
    color: var(--gabby-text-muted);
    margin-top: 4px;
    padding: 0 4px;
}
.gabby-msg--user .gabby-msg-time { text-align: right; }

/* Error state */
.gabby-msg--error .gabby-bubble {
    background: #fff0f0;
    border-color: #f5c6c6;
    color: #c0392b;
}

/* ---------- Typing indicator ---------- */
.gabby-typing .gabby-bubble {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 14px 18px;
}
.gabby-dot-typing {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gabby-accent);
    animation: gabby-bounce .9s ease-in-out infinite;
}
.gabby-dot-typing:nth-child(2) { animation-delay: .15s; }
.gabby-dot-typing:nth-child(3) { animation-delay: .30s; }
@keyframes gabby-bounce {
    0%,80%,100% { transform: scale(1);   opacity: .6; }
    40%          { transform: scale(1.4); opacity: 1; }
}

/* ---------- Usage bar (free tier) ---------- */
.gabby-usage-bar {
    padding: 8px 18px 6px;
    background: var(--gabby-bg);
    border-top: 1px solid var(--gabby-border);
}
.gabby-usage-label {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    font-weight: 600;
    color: var(--gabby-text-muted);
    margin-bottom: 4px;
}
.gabby-usage-track {
    height: 4px;
    background: var(--gabby-border);
    border-radius: 99px;
    overflow: hidden;
}
.gabby-usage-fill {
    height: 100%;
    background: var(--gabby-accent);
    border-radius: 99px;
    transition: width .4s ease;
}

/* ---------- Input area ---------- */
.gabby-input-area {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: var(--gabby-bg);
    border-top: 1.5px solid var(--gabby-border);
}

.gabby-input {
    flex: 1;
    resize: none;
    border: 1.5px solid var(--gabby-border);
    border-radius: 12px;
    padding: 10px 14px;
    font-family: 'Nunito', sans-serif;
    font-size: .93rem;
    font-weight: 500;
    color: var(--gabby-text);          /* ← visible text while typing */
    background: var(--gabby-surface);
    line-height: 1.5;
    max-height: 140px;
    overflow-y: auto;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
}
.gabby-input::placeholder {
    color: var(--gabby-text-muted);
    font-weight: 400;
}
.gabby-input:focus {
    border-color: var(--gabby-accent);
    box-shadow: 0 0 0 3px rgba(232,117,74,.15);
    background: #fff;
}

.gabby-send {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: var(--gabby-accent);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s, transform .12s;
}
.gabby-send:hover  { background: var(--gabby-accent-dark); transform: scale(1.05); }
.gabby-send:active { transform: scale(.95); }
.gabby-send svg    { width: 18px; height: 18px; }
.gabby-send:disabled {
    background: var(--gabby-border);
    cursor: not-allowed;
    transform: none;
}

/* ---------- Footer ---------- */
.gabby-footer {
    text-align: center;
    font-size: .67rem;
    color: var(--gabby-text-muted);
    padding: 6px 0 10px;
    background: var(--gabby-bg);
}
.gabby-footer a {
    color: var(--gabby-accent);
    text-decoration: none;
    font-weight: 700;
}
.gabby-footer a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .gabby-wrap { margin: 1rem; border-radius: 14px; }
    .gabby-msg  { max-width: 92%; }
    .gabby-bubble { font-size: .88rem; }
}