/* ================================================================
   AI Chat Widget — Floating Chatbot (Intercom/Drift-style)
   Prefix: ghw- (Grand Holding Widget)
   Z-index: 10000 (above HTMX progress bar 9999, navbar 1040)
   ================================================================ */

/* ── Floating Action Button ─────────────────────────────────── */

.ghw-fab {
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom));
    right: max(20px, env(safe-area-inset-right));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s ease;
}

.ghw-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.ghw-fab:active {
    transform: scale(0.95);
}

.ghw-fab i {
    font-size: 24px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon toggle: chat-dots when closed, X when open */
.ghw-fab.ghw-open .ghw-icon-chat { display: none; }
.ghw-fab.ghw-open .ghw-icon-close { display: inline; }
.ghw-fab:not(.ghw-open) .ghw-icon-close { display: none; }
.ghw-fab:not(.ghw-open) .ghw-icon-chat { display: inline; }

/* ── Unread Badge ───────────────────────────────────────────── */

.ghw-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    padding: 0 4px;
    line-height: 1;
}

.ghw-badge.ghw-visible {
    display: flex;
    animation: ghwBadgePop 0.35s ease;
}

@keyframes ghwBadgePop {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ── Chat Popup ─────────────────────────────────────────────── */

.ghw-popup {
    position: fixed;
    bottom: 88px;
    right: 20px;
    width: 384px;
    height: 560px;
    max-height: calc(100vh - 120px);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
                0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Hidden by default */
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ghw-popup.ghw-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

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

.ghw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #fff;
    flex-shrink: 0;
}

.ghw-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ghw-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ghw-header-info h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.ghw-header-info small {
    font-size: 11px;
    opacity: 0.7;
}

.ghw-header-actions {
    display: flex;
    gap: 4px;
}

.ghw-header-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s ease;
}

.ghw-header-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* ── Messages Area ──────────────────────────────────────────── */

.ghw-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    scroll-behavior: smooth;
}

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

.ghw-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 12px 12px;
}

.ghw-welcome-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.ghw-welcome-icon i {
    font-size: 20px;
    color: #fff;
}

.ghw-welcome h6 {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    font-size: 15px;
}

.ghw-welcome p {
    color: #64748b;
    font-size: 12px;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ── Suggestion Chips ───────────────────────────────────────── */

.ghw-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    max-width: 340px;
}

.ghw-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    color: #475569;
    font-size: 11.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.3;
}

.ghw-chip:hover {
    background: #f1f5f9;
    border-color: #3b82f6;
    color: #3b82f6;
}

.ghw-chip i {
    margin-right: 4px;
    font-size: 12px;
}

/* ── Message Bubbles ────────────────────────────────────────── */

.ghw-msg {
    display: flex;
    margin-bottom: 10px;
    animation: ghwFadeIn 0.2s ease;
}

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

.ghw-msg-user { justify-content: flex-end; }
.ghw-msg-assistant { justify-content: flex-start; }

.ghw-bubble {
    max-width: 82%;
    padding: 10px 12px;
    line-height: 1.5;
    font-size: 13px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ghw-msg-user .ghw-bubble {
    background: #3b82f6;
    color: #fff;
    border-radius: 16px 16px 4px 16px;
}

.ghw-msg-assistant .ghw-bubble {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 16px 16px 16px 4px;
    color: #1e293b;
}

/* ── Markdown in assistant bubbles ──────────────────────────── */

.ghw-msg-assistant .ghw-bubble h1,
.ghw-msg-assistant .ghw-bubble h2,
.ghw-msg-assistant .ghw-bubble h3,
.ghw-msg-assistant .ghw-bubble h4 {
    font-size: 13px;
    font-weight: 700;
    margin: 8px 0 4px 0;
    color: #1e293b;
}

.ghw-msg-assistant .ghw-bubble h1:first-child,
.ghw-msg-assistant .ghw-bubble h2:first-child,
.ghw-msg-assistant .ghw-bubble h3:first-child {
    margin-top: 0;
}

.ghw-msg-assistant .ghw-bubble p { margin: 0 0 6px 0; }
.ghw-msg-assistant .ghw-bubble p:last-child { margin-bottom: 0; }

.ghw-msg-assistant .ghw-bubble ul,
.ghw-msg-assistant .ghw-bubble ol {
    margin: 4px 0 6px 0;
    padding-left: 18px;
}

.ghw-msg-assistant .ghw-bubble li { margin-bottom: 2px; }

.ghw-msg-assistant .ghw-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0;
    font-size: 11.5px;
}

.ghw-msg-assistant .ghw-bubble th,
.ghw-msg-assistant .ghw-bubble td {
    padding: 4px 6px;
    border: 1px solid #cbd5e1;
    text-align: left;
}

.ghw-msg-assistant .ghw-bubble th {
    background: #e2e8f0;
    font-weight: 600;
}

.ghw-msg-assistant .ghw-bubble code {
    background: #e2e8f0;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 12px;
}

.ghw-msg-assistant .ghw-bubble pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 8px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 6px 0;
    font-size: 11.5px;
}

.ghw-msg-assistant .ghw-bubble pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

.ghw-msg-assistant .ghw-bubble strong { font-weight: 600; }

/* ── Typing Indicator ───────────────────────────────────────── */

.ghw-typing {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 0;
}

.ghw-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    animation: ghwBounce 1.2s infinite;
}

.ghw-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ghw-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ghwBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
}

/* ── Error Message ──────────────────────────────────────────── */

.ghw-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: 8px 10px;
    max-width: 82%;
    font-size: 12.5px;
}

/* ── Tool Status Bar ────────────────────────────────────────── */

.ghw-tool-status {
    padding: 6px 16px;
    background: #eff6ff;
    border-top: 1px solid #dbeafe;
    color: #3b82f6;
    font-size: 12px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Input Area ─────────────────────────────────────────────── */

.ghw-input-area {
    border-top: 1px solid #e2e8f0;
    padding: 10px 12px;
    background: #fff;
    flex-shrink: 0;
}

.ghw-input-group {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 4px 4px 4px 12px;
    transition: border-color 0.15s ease;
}

.ghw-input-group:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ghw-input {
    flex: 1;
    border: none;
    background: transparent;
    resize: none;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.4;
    max-height: 80px;
    overflow-y: auto;
    outline: none;
    font-family: inherit;
}

.ghw-input::placeholder { color: #94a3b8; }

.ghw-send-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    font-size: 13px;
}

.ghw-send-btn:hover:not(:disabled) { background: #2563eb; }
.ghw-send-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

/* ── Footer ─────────────────────────────────────────────────── */

.ghw-footer {
    text-align: center;
    padding: 4px 0 6px;
    font-size: 10px;
    color: #94a3b8;
    background: #fff;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

/* ── Scroll-to-Top Conflict ─────────────────────────────────── */

body.ghw-chat-visible .gh-scroll-top {
    right: 84px;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.ghw-chat-open .gh-scroll-top {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .ghw-popup {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 85vh;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
    }

    .ghw-fab {
        bottom: 16px;
        right: 16px;
    }

    body.ghw-chat-open .ghw-fab {
        display: none;
    }

    body.ghw-chat-open .gh-scroll-top {
        display: none;
    }
}

/* ── Step aside for dialogs ─────────────────────────────────────
   The widget sits at z-index 10000; every Bootstrap dialog on this site sits at
   1055 with its backdrop at 1050. So the chat bubble painted ON TOP of open
   modals — measured 2026-08-26 on an iPhone 15 viewport, it covered 44% of the
   บันทึก button in the group page's add-tax form, leaving the word reading "บั".
   The centre of the button still took the tap, which is exactly why nobody
   reported it.

   Bootstrap stamps body.modal-open for precisely this window. Drop the widget
   BELOW the backdrop rather than hiding it, so an open chat is dimmed behind the
   overlay instead of being destroyed, and comes back untouched on close.
   This is every modal on the site, not just the tax one. */
body.modal-open .ghw-fab,
body.modal-open .ghw-popup {
    z-index: 1040;
}