/* ==========================================================================
   Goldone Chat Widget — goldone-chat.css
   ========================================================================== */

/* ── Reset & root ─────────────────────────────────────────────────────────── */

/*
 * Only apply box-sizing via the universal selector.
 * Do NOT zero out margin/padding here — that would have higher specificity
 * (ID + universal = 100) than class-based rules (.gc-* = 10), silently
 * overriding all padding/margin declarations throughout the widget.
 */
#goldone-chat-root *,
#goldone-chat-root *::before,
#goldone-chat-root *::after {
    box-sizing: border-box;
}

/*
 * Counter common WordPress-theme overrides on interactive elements.
 * These scoped rules (specificity: ID + element = 101) beat any theme
 * rule that targets bare element types (specificity ≤ 3).
 * Individual widget rules use #goldone-chat-root .gc-X (specificity 110)
 * and therefore correctly override this baseline reset.
 */
#goldone-chat-root button,
#goldone-chat-root input,
#goldone-chat-root textarea {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Reset heading and paragraph margins that WordPress themes commonly add. */
#goldone-chat-root p,
#goldone-chat-root h1,
#goldone-chat-root h2,
#goldone-chat-root h3,
#goldone-chat-root h4,
#goldone-chat-root ul,
#goldone-chat-root ol,
#goldone-chat-root li {
    margin: 0;
    padding: 0;
}

#goldone-chat-root {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Floating action button ───────────────────────────────────────────────── */

#goldone-chat-fab {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    padding: 0;
}

#goldone-chat-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(245, 158, 11, 0.65);
}

#goldone-chat-fab:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 3px;
}

#goldone-chat-fab svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* Unread badge */
.goldone-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
    line-height: 1;
}

/* ── Chat window ──────────────────────────────────────────────────────────── */

#goldone-chat-window {
    position: absolute;
    bottom: 76px;
    right: 0;
    width: 380px;
    height: 580px;
    max-height: calc(100vh - 100px);
    background: #f0f4f8;
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    /* open/close animation */
    transition: opacity 0.22s ease, transform 0.22s ease;
}

#goldone-chat-window[hidden] {
    display: none !important;
}

#goldone-chat-window.gc-animating-in {
    animation: gcSlideIn 0.22s ease forwards;
}

#goldone-chat-window.gc-animating-out {
    animation: gcSlideOut 0.18s ease forwards;
}

@keyframes gcSlideIn {
    from { opacity: 0; transform: scale(0.88) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes gcSlideOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.88) translateY(16px); }
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.gc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #0f0c29, #1a1a2e);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    flex-shrink: 0;
}

.gc-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    user-select: none;
}

.gc-header-info {
    flex: 1;
    min-width: 0;
}

.gc-bot-name {
    font-size: 15px;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-status {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.gc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    flex-shrink: 0;
}

.gc-dot.typing {
    background: #f59e0b;
    animation: gcPulse 1s infinite;
}

@keyframes gcPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

#goldone-chat-root .gc-clear-btn,
#goldone-chat-root .gc-close-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    line-height: 0;
    outline: none;
}

#goldone-chat-root .gc-clear-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

#goldone-chat-root .gc-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

#goldone-chat-root .gc-clear-btn:focus-visible,
#goldone-chat-root .gc-close-btn:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

/* ── Messages body ────────────────────────────────────────────────────────── */

.gc-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* scrollbar */
.gc-body::-webkit-scrollbar        { width: 4px; }
.gc-body::-webkit-scrollbar-track  { background: transparent; }
.gc-body::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 2px; }

/* ── Welcome ──────────────────────────────────────────────────────────────── */

.gc-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 36px 16px 20px;
}

.gc-welcome-logo {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgba(245, 158, 11, 0.38);
    color: #fff;
    flex-shrink: 0;
}

.gc-welcome-title {
    font-size: 19px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.gc-welcome-sub {
    font-size: 13.5px;
    color: #64748b;
    max-width: 300px;
    line-height: 1.6;
}

.gc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

#goldone-chat-root .gc-chip {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12.5px;
    color: #475569;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    line-height: 1.4;
    font-family: inherit;
    outline: none;
}

#goldone-chat-root .gc-chip:hover {
    border-color: #f59e0b;
    color: #b45309;
    background: #fffbeb;
}

#goldone-chat-root .gc-chip:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

/* ── Message list ─────────────────────────────────────────────────────────── */

#gc-msgs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gc-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 78%;
    animation: gcMsgIn 0.22s ease;
}

@keyframes gcMsgIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gc-msg.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.gc-msg.assistant {
    align-self: flex-start;
}

.gc-msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    margin-bottom: 4px;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.35);
    user-select: none;
}

/* ── Bubble ───────────────────────────────────────────────────────────────── */

.gc-bubble {
    padding: 10px 13px;
    border-radius: 18px;
    position: relative;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
}

.gc-msg.assistant .gc-bubble {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    color: #1e293b;
}

.gc-msg.user .gc-bubble {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
    color: #f1f5f9;
}

.gc-msg-img {
    max-width: 200px;
    border-radius: 10px;
    display: block;
    margin-bottom: 8px;
}

.gc-text {
    font-size: 13.5px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.gc-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

.gc-src-label {
    font-size: 11px;
    color: #94a3b8;
}

.gc-src-tag {
    font-size: 11px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
    border-radius: 10px;
    padding: 2px 8px;
}

.gc-time {
    font-size: 10.5px;
    color: #94a3b8;
    text-align: right;
    margin-top: 4px;
    line-height: 1;
}

.gc-msg.user .gc-time {
    color: rgba(148, 163, 184, 0.75);
}

/* ── Typing bubble ────────────────────────────────────────────────────────── */

.gc-typing-bubble {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
    min-width: 58px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.gc-dot-bounce {
    width: 8px;
    height: 8px;
    background: #cbd5e1;
    border-radius: 50%;
    display: inline-block;
    animation: gcBounce 1.3s infinite ease-in-out;
}

.gc-dot-bounce:nth-child(1) { animation-delay: -0.30s; }
.gc-dot-bounce:nth-child(2) { animation-delay: -0.15s; }
.gc-dot-bounce:nth-child(3) { animation-delay:  0.00s; }

@keyframes gcBounce {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; }
    40%            { transform: scale(1.0); opacity: 1.0; }
}

/* ── Image preview bar ────────────────────────────────────────────────────── */

.gc-img-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
    flex-shrink: 0;
}

.gc-img-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.gc-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #f59e0b;
    display: block;
}

#goldone-chat-root .gc-img-remove {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0;
    line-height: 0;
    outline: none;
}

#goldone-chat-root .gc-img-remove:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

.gc-img-name {
    font-size: 12px;
    color: #92400e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* ── Input footer ─────────────────────────────────────────────────────────── */

.gc-footer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

#goldone-chat-root .gc-attach {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    line-height: 0;
    outline: none;
    padding: 0;
}

#goldone-chat-root .gc-attach:hover       { border-color: #f59e0b; color: #f59e0b; }
#goldone-chat-root .gc-attach.has-image   { background: #fffbeb; border-color: #f59e0b; color: #d97706; }
#goldone-chat-root .gc-attach:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }

#goldone-chat-root .gc-input {
    flex: 1;
    min-height: 38px;
    max-height: 120px;
    padding: 9px 13px;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    outline: none;
    font-size: 13.5px;
    font-family: inherit;
    resize: none;
    line-height: 1.5;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color 0.15s, background 0.15s;
    overflow-y: auto;
    display: block;
}

#goldone-chat-root .gc-input::placeholder  { color: #94a3b8; }
#goldone-chat-root .gc-input:focus         { border-color: #f59e0b; background: #fff; }
#goldone-chat-root .gc-input:disabled      { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }

#goldone-chat-root .gc-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    transition: background 0.15s, color 0.15s, transform 0.1s, opacity 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    line-height: 0;
    outline: none;
    padding: 0;
}

#goldone-chat-root .gc-send:disabled {
    opacity: 0.45;
    box-shadow: none;
    cursor: not-allowed;
}

#goldone-chat-root .gc-send:not(:disabled):hover { transform: scale(1.07); }
#goldone-chat-root .gc-send:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }

/* ── Config notice (shown when API URL is not set) ────────────────────────── */

.gc-config-notice {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
    border-radius: 10px;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.55;
    text-align: center;
    max-width: 300px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Tablet / small viewport width — window becomes full-screen overlay */
@media (max-width: 440px) {
    #goldone-chat-root {
        bottom: 16px;
        right: 16px;
    }

    #goldone-chat-window {
        /* True full-screen panel covering the entire viewport */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    /* Hide the FAB while chat is open so the header X button is the way to close */
    #goldone-chat-fab[aria-expanded="true"] {
        display: none;
    }

    .gc-header { padding: 10px 12px; }
    .gc-avatar { width: 36px; height: 36px; font-size: 15px; }
    .gc-bot-name { font-size: 14px; }
    .gc-body { padding: 14px 10px; }
    .gc-msg { max-width: 88%; }
    .gc-msg-img { max-width: 170px; }
    .gc-welcome { padding: 24px 12px 16px; }
    .gc-welcome-logo { width: 62px; height: 62px; }
    .gc-welcome-title { font-size: 17px; }
    .gc-welcome-sub { font-size: 13px; }
    /* Use the same scoped specificity as the base rule so the override wins */
    #goldone-chat-root .gc-chip { font-size: 12px; padding: 6px 12px; }
    .gc-footer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
    /* Make close button easier to tap on mobile */
    #goldone-chat-root .gc-close-btn { padding: 9px; }
}

/* Very small phones */
@media (max-width: 360px) {
    #goldone-chat-fab { width: 52px; height: 52px; }
    #goldone-chat-fab svg { width: 22px; height: 22px; }
}

/* Landscape on mobile — keep fullscreen */
@media (max-height: 500px) and (max-width: 900px) {
    #goldone-chat-window {
        top: 0;
        bottom: 0;
        height: 100%;
        max-height: 100%;
    }
}