/* ai-chat.css - AI Chat Assistant styling */

/* ==================== AI CHAT FLOATING FAB (bottom-right) ====================
   Fixed-position circular button anchored to the bottom-right corner. Replaces
   the old header-navbar link. Uses #aiChatFab + .ai-chat-nav-badge IDs/classes
   so existing JS (initAIChat, hideAIChat, aiChatNotifyUnread, aiChatClearUnread)
   continues to work without changes.
   ======================================================================== */
/* Never show the AI assistant bubble (or its panel/backdrop if it was open)
   while creating a draft or claim — Claim Drop and the manual wizard both set
   body.wizard-active (router.js / claims.js). Keeps the FAB from overlapping
   the Create / step buttons. !important beats the inline display JS toggles. */
body.wizard-active #aiChatFab,
body.wizard-active #aiChatPanel,
body.wizard-active #aiChatBackdrop {
    display: none !important;
}

#aiChatFab.ai-chat-floating-fab {
    position: fixed;
    /* Lifted just enough to clear the ~50px footer's address row (was
       overlapping "PO Box 3309 Clarksville, IN 47131") and pulled tighter
       to the right edge (24px → 16px). 60px lands the FAB right above the
       footer band with a clean 8-10px breathing gap. */
    bottom: 60px;
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 9985;
    box-shadow: 0 6px 20px rgba(30, 99, 50, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    text-decoration: none !important;
}

/* Pages that hide the footer (Claims, Drafts, Messaging, App Settings, ...) have
   no footer band to clear, so the 60px lift just parked Mo on top of the page's
   own bottom-right content (last action icon, Send button, funnel labels).
   Drop it into the corner there. Desktop only — mobile has its own placement. */
@media (min-width: 769px) {
    body.hide-footer #aiChatFab.ai-chat-floating-fab { bottom: 14px; right: 14px; }
    /* Messaging's Send button sits in the bottom-right corner — keep it clear of Mo */
    body.hide-footer #page-messaging .chat-input-area { padding-right: 86px; }
}

#aiChatFab.ai-chat-floating-fab i {
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
    line-height: 1;
}

#aiChatFab.ai-chat-floating-fab:hover {
    transform: scale(1.07) translateY(-1px);
    box-shadow: 0 10px 28px rgba(30, 99, 50, 0.45), 0 4px 10px rgba(0, 0, 0, 0.12);
    color: #fff !important;
}

#aiChatFab.ai-chat-floating-fab:active {
    transform: scale(0.97);
}

/* Mo variant of the floating FAB — replaces the green gradient background
   with a soft white halo so Mo's character (which has its own dark-teal
   circle backdrop) reads cleanly. The FAB keeps its lift-on-hover affordance
   from the base rule, plus a subtle scale on Mo himself. */
#aiChatFab.ai-chat-floating-fab.ai-chat-floating-fab-mo {
    background: #fff;
    padding: 0;
    overflow: visible;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 20px rgba(30, 99, 50, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12),
                0 0 0 3px rgba(30, 99, 50, 0.15);
}
#aiChatFab.ai-chat-floating-fab-mo .ai-chat-fab-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    transition: transform 0.2s ease;
}
#aiChatFab.ai-chat-floating-fab-mo:hover .ai-chat-fab-img {
    transform: scale(1.05);
}
#aiChatFab.ai-chat-floating-fab-mo:hover {
    box-shadow: 0 10px 28px rgba(30, 99, 50, 0.45), 0 4px 10px rgba(0, 0, 0, 0.16),
                0 0 0 4px rgba(30, 99, 50, 0.22);
}

/* Move above the mobile bottom nav so it doesn't overlap the tab bar */
@media (max-width: 768px) {
    #aiChatFab.ai-chat-floating-fab {
        bottom: 80px;
        right: 16px;
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
}

/* Small "AI" label badge in the upper-right corner of the FAB */
.ai-chat-nav-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #0d6efd;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    font-family: 'Futura PT', 'Jost', sans-serif;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 8px;
    z-index: 2;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    border: 2px solid #fff;
    min-width: 22px;
    text-align: center;
}

/* Buzz animation when response arrives while panel is closed */
#aiChatFab.ai-chat-fab-buzz {
    animation: aiChatBuzz 0.4s ease-in-out 3;
}

@keyframes aiChatBuzz {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(-8deg); }
    30%  { transform: rotate(8deg); }
    45%  { transform: rotate(-5deg); }
    60%  { transform: rotate(5deg); }
    75%  { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Idle attention shake — gentle little wiggle every ~9 seconds so the FAB
   has a friendly heartbeat without being noisy. Most of the keyframe is
   idle (no transform); the wiggle lives in the last ~20% of the cycle.
   The .ai-chat-fab-buzz transient + :hover both override via higher
   specificity / animation cascade so they cleanly take over when needed. */
#aiChatFab.ai-chat-floating-fab:not(.ai-chat-fab-buzz) {
    animation: aiChatIdleShake 9s ease-in-out infinite;
}
#aiChatFab.ai-chat-floating-fab:hover { animation-play-state: paused; }

@keyframes aiChatIdleShake {
    0%, 78%   { transform: rotate(0)     scale(1); }
    82%       { transform: rotate(7deg)  scale(1.05); }
    86%       { transform: rotate(-7deg) scale(1.05); }
    90%       { transform: rotate(4deg)  scale(1.03); }
    94%       { transform: rotate(-2deg) scale(1.02); }
    98%, 100% { transform: rotate(0)     scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #aiChatFab.ai-chat-floating-fab:not(.ai-chat-fab-buzz) { animation: none; }
}

/* ==================== BACKDROP ==================== */
.ai-chat-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 20, 0.58);
    /* No backdrop-filter: blur() — re-blurring the heavy page behind the panel
       on every keystroke was causing ~960ms presentation delay per character
       typed (1000ms+ INP). A solid dim is cheap and keeps the modal separated. */
    z-index: 9989;
    animation: aiChatFadeIn 0.24s ease-out;
}

@keyframes aiChatFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==================== CHAT PANEL ==================== */
.ai-chat-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    /* Always-expanded centered modal (#1581 — user request). Was previously
       a 900px default with an Expand button to push to 80vw; now there's no
       toggle and the modal always uses the full immersive 80% of the
       viewport. Messages area scrolls inside so the shell never exceeds. */
    width: 80vw;
    height: 80vh;
    max-width: 80vw;
    max-height: 80vh;
    background: #fff;
    border-radius: 22px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 32px 90px rgba(15, 23, 20, 0.30), 0 2px 8px rgba(15,23,20,0.08), 0 0 0 1px rgba(0,0,0,0.02);
    z-index: 9992;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Futura PT', 'Jost', sans-serif;
    transform: translate(-50%, -50%);
    animation: aiChatPop 0.30s cubic-bezier(0.34, 1.28, 0.64, 1);
}

@keyframes aiChatPop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.90); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.ai-chat-panel.closing {
    animation: aiChatPopOut 0.20s ease-in forwards;
}

@keyframes aiChatPopOut {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -50%) scale(0.93); }
}


/* ==================== HEADER ==================== */
.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px;
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%);
    color: #fff;
    flex-shrink: 0;
}

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

.ai-chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    backdrop-filter: blur(4px);
}

/* Mo variant of the chat-panel header avatar — slightly bigger, circular,
   clean image clip, soft white-ring + halo so Mo pops against the dark
   green header gradient. */
.ai-chat-avatar.ai-chat-avatar-mo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    padding: 0;
    overflow: hidden;
    backdrop-filter: none;
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.ai-chat-avatar.ai-chat-avatar-mo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.ai-chat-header-title {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.2px;
}

.ai-chat-header-status {
    font-size: 11px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ai-chat-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #18A74B;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}

.ai-chat-header-actions {
    display: flex;
    gap: 6px;
}

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

.ai-chat-header-btn:hover {
    background: rgba(255,255,255,0.28);
}

/* "End conversation" — lives in the chat header navbar (May 19, #1575).
   Deliberately quiet: a solid red button here competed with the conversation
   for attention on every single message. It only commits to red on hover,
   when the user is actually reaching for it. */
.ai-chat-header-btn-end {
    width: auto;
    padding: 0 13px;
    gap: 7px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Futura PT', 'Jost', sans-serif;
    letter-spacing: 0.01em;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ai-chat-header-btn-end i { font-size: 13px; }
.ai-chat-header-btn-end:hover {
    background: #dc3545;
    border-color: #dc3545;
    transform: translateY(-1px);
}

/* Legacy center pill — kept as no-op so old caches/exports don't crash, but
   we never insert it anymore. Hidden if anything still tries to. */
.ai-chat-end-bar { display: none !important; }
.ai-chat-end-bar_LEGACY_BELOW_KEPT_FOR_REFERENCE { /* keep old rules inert */
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin: -12px -14px 0 -14px;
    padding: 8px 14px 6px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.ai-chat-end-bar button {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #6c757d;
    font-size: 11px;
    font-family: 'Futura PT', 'Jost', sans-serif;
    padding: 4px 14px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    white-space: nowrap;
}

.ai-chat-end-bar button:hover {
    background: #fff5f5;
    border-color: #f5c2c7;
    color: #dc3545;
}

.ai-chat-end-bar button i {
    font-size: 10px;
}

/* ==================== MESSAGES AREA ==================== */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.ai-chat-messages::-webkit-scrollbar { width: 5px; }
.ai-chat-messages::-webkit-scrollbar-track { background: transparent; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 3px; }
.ai-chat-messages::-webkit-scrollbar-thumb:hover { background: #adb5bd; }

/* ==================== MESSAGE BUBBLES ==================== */
.ai-chat-msg {
    display: flex;
    gap: 10px;
    animation: aiMsgFadeIn 0.3s ease-out;
}

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

/* User bubbles stay narrow + right-aligned (typed messages are usually short) */
.ai-chat-msg.user {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: 85%;
}

/* Assistant bubbles now CLAIM the full row (#1581) so KPIs / tables /
   charts / lists use the available width instead of leaving the right half
   of the panel empty. The bubble inside is flex:1 so it grows to fill. */
.ai-chat-msg.assistant {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
}

.ai-chat-msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}

.ai-chat-msg.user .ai-chat-msg-avatar {
    background: linear-gradient(135deg, #1E6332, #214A3E);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    font-family: 'Futura PT', 'Jost', sans-serif;
}

/* Profile picture avatar */
.ai-chat-msg-avatar-img {
    padding: 0;
    overflow: hidden;
    background: none !important;
}

.ai-chat-msg-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.ai-chat-msg-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1E6332, #214A3E);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    font-family: 'Futura PT', 'Jost', sans-serif;
    border-radius: 50%;
}

.ai-chat-msg.assistant .ai-chat-msg-avatar {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
}

/* ── Mo avatar variant (assistant bubbles + typing indicator + replay) ──
   Sized bigger than the base 30px slot so Mo's face is actually readable
   in the message stream. Kills the green gradient background — Mo's image
   already has its own dark-teal circular backdrop, so we just need a clean
   clipped circle. */
.ai-chat-msg-avatar.ai-chat-mo-avatar {
    width: 44px;
    height: 44px;
    background: transparent !important;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(30, 99, 50, 0.12);
    box-shadow: 0 2px 6px rgba(30, 99, 50, 0.18);
}
.ai-chat-msg-avatar.ai-chat-mo-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.ai-chat-msg-bubble {
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.65;
    word-break: break-word;
}

.ai-chat-msg.user .ai-chat-msg-bubble {
    background: #1E6332;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble {
    background: #f8f9fa;
    color: #212529;
    border: 1px solid #eee;
    border-bottom-left-radius: 4px;
    flex: 1;          /* fills the available row width (#1581) */
    min-width: 0;     /* allow tables/long text to shrink instead of overflowing */
}

/* ==================== WELCOME MESSAGE ==================== */
.ai-chat-welcome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 6px;
    text-align: left;
}

.ai-chat-welcome-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.2);
}

.ai-chat-welcome-text h4 {
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 1px;
}

.ai-chat-welcome-text p {
    font-size: 11.5px;
    color: #6c757d;
    margin: 0;
    line-height: 1.35;
}

/* ==================== SUGGESTED PROMPTS ==================== */
.ai-chat-prompts-section {
    padding: 4px 0 0;
}

.ai-chat-prompts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding: 0 2px;
}

.ai-chat-prompts-title {
    font-size: 10.5px;
    font-weight: 600;
    color: #adb5bd;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.ai-chat-prompts-refresh {
    background: none;
    border: none;
    color: #adb5bd;
    font-size: 12px;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 6px;
    transition: all 0.2s;
}

.ai-chat-prompts-refresh:hover {
    color: #1E6332;
    background: #f0fff4;
}

.ai-chat-prompt-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-chat-prompt-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

.ai-chat-prompt-card:hover {
    border-color: #1E6332;
    background: #f0fff4;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.08);
}

.ai-chat-prompt-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.ai-chat-prompt-icon.analytics { background: #e7f1ff; color: #0d6efd; }
.ai-chat-prompt-icon.reports { background: #fce4e4; color: #dc3545; }
.ai-chat-prompt-icon.support { background: #F4F0E9; color: #1E6332; }
.ai-chat-prompt-icon.industry { background: #fff3cd; color: #cc9a06; }

.ai-chat-prompt-text {
    font-size: 12.5px;
    color: #495057;
    line-height: 1.35;
}

/* Two-group suggestions (Questions + Requests) */
.ai-chat-suggest-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ai-chat-suggest-wrap .ai-chat-prompts-section { padding: 0; }
.ai-chat-suggest-refresh-row {
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 -4px;
}
.ai-chat-suggest-refresh-row .ai-chat-prompts-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    background: #f4f4f5;
    border: 1px solid #e9ecef;
    padding: 5px 12px;
    border-radius: 999px;
}
.ai-chat-suggest-refresh-row .ai-chat-prompts-refresh:hover {
    color: #1E6332;
    background: #F4F0E9;
    border-color: #cfe0d2;
}

/* ==================== THINKING INDICATOR ==================== */
.ai-chat-thinking-text {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 4px 6px;
    font-size: 13px;
    color: #6c757d;
    font-style: italic;
}

.ai-chat-thinking-phrase {
    opacity: 0.85;
}

.ai-chat-thinking-dots span {
    animation: aiThinkingDot 1.4s infinite ease-in-out;
    opacity: 0;
    font-weight: 700;
    font-size: 16px;
}

.ai-chat-thinking-dots span:nth-child(1) { animation-delay: 0s; }
.ai-chat-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-chat-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiThinkingDot {
    0%, 60%, 100% { opacity: 0; }
    30% { opacity: 1; }
}

/* ==================== INPUT AREA ==================== */
/* Calm by default, green on focus. The previous version stacked a 2px green
   border + a 4px ring + a drop shadow + a permanently pulsing sparkle icon,
   which read as louder than the conversation above it. The bar now sits
   quietly until you click into it. */
.ai-chat-input-area {
    padding: 14px 20px 18px;
    border-top: 1px solid #ece7dd;
    background: #fff;
    flex-shrink: 0;
}

.ai-chat-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: #faf9f6;
    border: 1.5px solid #e2ddd2;
    border-radius: 16px;
    padding: 8px 8px 8px 16px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    position: relative;
}

.ai-chat-input-wrap:focus-within {
    background: #fff;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.10);
}

.ai-chat-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Futura PT', 'Jost', sans-serif;
    font-size: 15px;
    color: #212529;
    resize: none;
    outline: none;
    max-height: 132px;
    line-height: 1.55;
    padding: 9px 0;
    font-weight: 500;
}

.ai-chat-input::placeholder {
    color: #a39c90;
    font-weight: 500;
}

.ai-chat-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: #1E6332;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
    flex-shrink: 0;
}

.ai-chat-send-btn:hover:not(:disabled) {
    background: #2F8542;
    transform: translateY(-1px);
}
.ai-chat-send-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.96);
}

/* Disabled = nothing typed yet. Reads as clearly inert, not just dimmed. */
.ai-chat-send-btn:disabled {
    background: #e2ddd2;
    color: #a39c90;
    cursor: not-allowed;
    transform: none;
}

/* ==================== CHART CONTAINER ==================== */
.ai-chat-chart-wrap {
    margin: 10px 0 4px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
}

.ai-chat-chart-wrap canvas {
    max-height: 200px;
}

/* ==================== EXPORT BAR ==================== */
.ai-chat-export-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}

.ai-chat-export-label {
    font-size: 10px;
    color: #adb5bd;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ai-chat-export-label i {
    font-size: 10px;
}

.ai-chat-export-btns {
    display: flex;
    gap: 4px;
}

.ai-chat-export-btns button {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #6c757d;
    font-size: 10.5px;
    font-family: 'Futura PT', 'Jost', sans-serif;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    white-space: nowrap;
}

.ai-chat-export-btns button:hover {
    background: #e9ecef;
    border-color: #ced4da;
    color: #212529;
}

.ai-chat-export-btns button.success {
    background: #F4F0E9;
    border-color: #badbcc;
    color: #1E6332;
}

.ai-chat-export-btns button:first-child {
    background: #fff0f0;
    border-color: #fdd;
    color: #dc3545;
}

.ai-chat-export-btns button:first-child:hover {
    background: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

.ai-chat-export-btns button i {
    font-size: 10px;
}

/* Locked export (IC data protection) */
.ai-chat-export-locked {
    width: 100%;
}

.ai-chat-export-locked-header {
    font-size: 11px;
    font-weight: 700;
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.ai-chat-export-locked-header i {
    font-size: 11px;
}

.ai-chat-export-locked-fields {
    font-size: 10.5px;
    color: #6c757d;
    margin-bottom: 4px;
    line-height: 1.4;
}

.ai-chat-export-locked-fields strong {
    color: #495057;
}

.ai-chat-export-locked-hint {
    font-size: 10px;
    color: #adb5bd;
    line-height: 1.35;
    margin-bottom: 6px;
}

.ai-chat-export-locked-actions {
    display: flex;
}

.ai-chat-export-regen-btn {
    background: #fff5f5;
    border: 1px solid #f5c2c7;
    color: #dc3545;
    font-size: 10.5px;
    font-family: 'Futura PT', 'Jost', sans-serif;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.ai-chat-export-regen-btn:hover {
    background: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

.ai-chat-export-regen-btn i {
    font-size: 10px;
}

/* ==================== MARKDOWN IN ASSISTANT BUBBLES ==================== */
.ai-chat-msg.assistant .ai-chat-msg-bubble p {
    margin: 0 0 8px;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble p:last-child {
    margin-bottom: 0;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble h3 {
    font-size: 14px;
    font-weight: 700;
    color: #1E6332;
    margin: 14px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e9ecef;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble h3:first-child {
    margin-top: 0;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble h4 {
    font-size: 13px;
    font-weight: 600;
    color: #212529;
    margin: 10px 0 4px;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble ul,
.ai-chat-msg.assistant .ai-chat-msg-bubble ol {
    margin: 6px 0;
    padding-left: 20px;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble li {
    margin-bottom: 3px;
    font-size: 13px;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble code {
    background: #e9ecef;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Consolas', 'Courier New', monospace;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble pre {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    overflow-x: auto;
    margin: 8px 0;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble th {
    background: #f0fff4;
    padding: 7px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #1E6332;
    font-size: 11px;
    color: #1E6332;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble td {
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble tr:hover td {
    background: #fafffe;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble strong {
    color: #1E6332;
}

.ai-chat-msg.assistant .ai-chat-msg-bubble hr {
    border: none;
    border-top: 1px solid #e9ecef;
    margin: 10px 0;
}

/* ==================== LONG CONTENT TRUNCATION ==================== */
.ai-chat-bubble-inner {
    /* wrapper inside bubble for collapsible content */
}

.ai-chat-bubble-collapsed {
    overflow: hidden;
    position: relative;
}

.ai-chat-bubble-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(transparent, #f0f4f0);
    pointer-events: none;
}

.ai-chat-show-more-bar {
    text-align: center;
    padding-top: 8px;
}

.ai-chat-show-more-bar button {
    background: none;
    border: 1.5px solid #dee2e6;
    color: #1E6332;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Futura PT', 'Jost', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-chat-show-more-bar button:hover {
    background: #F4F0E9;
    border-color: #1E6332;
}

.ai-chat-truncated-notice {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11.5px;
    color: #6d5600;
    margin-top: 6px;
    line-height: 1.4;
}

.ai-chat-truncated-notice i {
    color: #f9a825;
}

/* ==================== INTERACTIVE PROMPT CARDS ==================== */
.ai-chat-prompt-form {
    margin-top: 12px;
    border-top: 1px solid #e9ecef;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-chat-prompt-form-submitted {
    opacity: 0.6;
    pointer-events: none;
}

.ai-chat-prompt-qcard {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    transition: all 0.2s;
}

.ai-chat-prompt-qcard:hover {
    border-color: #c6d0dc;
}

.ai-chat-prompt-qcard-shake {
    animation: aiPromptShake 0.4s ease-in-out;
}

@keyframes aiPromptShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.ai-chat-prompt-qheader {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.ai-chat-prompt-qnum {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.3s;
}

.ai-chat-prompt-qnum.answered {
    background: #1E6332;
    color: #fff;
}

.ai-chat-prompt-qtext {
    font-size: 13px;
    font-weight: 600;
    color: #212529;
    line-height: 1.4;
    padding-top: 1px;
}

.ai-chat-prompt-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 30px;
}

.ai-chat-prompt-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1.5px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-family: 'Futura PT', 'Jost', sans-serif;
    width: 100%;
}

.ai-chat-prompt-option:hover {
    background: #f0fff4;
    border-color: #a3d9b1;
}

.ai-chat-prompt-option.selected {
    background: #F4F0E9;
    border-color: #1E6332;
    box-shadow: 0 0 0 1px rgba(30, 99, 50, 0.15);
}

.ai-chat-prompt-option.recommended {
    border-color: #c3e6cb;
    background: #f8fff9;
}

.ai-chat-prompt-option.recommended:hover {
    background: #e8f5e9;
}

.ai-chat-prompt-opt-radio {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    border: 2px solid #ced4da;
    margin-top: 1px;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
}

.ai-chat-prompt-option.selected .ai-chat-prompt-opt-radio {
    border-color: #1E6332;
    background: #1E6332;
}

.ai-chat-prompt-option.selected .ai-chat-prompt-opt-radio::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.ai-chat-prompt-opt-content {
    flex: 1;
    min-width: 0;
}

.ai-chat-prompt-opt-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #212529;
    display: inline;
}

.ai-chat-prompt-opt-rec {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    color: #1E6332;
    background: #F4F0E9;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
}

.ai-chat-prompt-opt-desc {
    display: block;
    font-size: 11px;
    color: #6c757d;
    line-height: 1.35;
    margin-top: 2px;
}

/* Other option */
.ai-chat-prompt-other {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ai-chat-prompt-option-other {
    border-style: dashed;
    background: #fff;
}

.ai-chat-prompt-option-other:hover {
    border-style: dashed;
}

.ai-chat-prompt-option-other.selected {
    border-style: solid;
}

.ai-chat-prompt-other-input {
    margin-top: 4px;
    margin-left: 26px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-family: 'Futura PT', 'Jost', sans-serif;
    border: 1.5px solid #ced4da;
    border-radius: 8px;
    outline: none;
    transition: all 0.2s;
    color: #212529;
    background: #fff;
}

.ai-chat-prompt-other-input:focus {
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.08);
}

.ai-chat-prompt-input-shake {
    animation: aiPromptShake 0.4s ease-in-out;
    border-color: #dc3545 !important;
}

/* Submit row */
.ai-chat-prompt-submit-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-direction: row-reverse;
    padding-top: 4px;
}

/* Tells the user WHY Submit is still greyed out, so a disabled button never
   reads as broken. Cleared once every question is answered. */
.ai-chat-prompt-submit-hint {
    font-size: 11.5px;
    color: #8a8276;
    font-weight: 500;
    font-family: 'Futura PT', 'Jost', sans-serif;
}

.ai-chat-prompt-submit {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'Futura PT', 'Jost', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.2);
}

.ai-chat-prompt-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 99, 50, 0.3);
}

/* NOT-YET-READY: questions still unanswered. Deliberately muted grey so it
   reads as "not yet", clearly different from the green active button AND from
   the finished "Submitted" state below. */
.ai-chat-prompt-submit:disabled {
    background: #eceae6;
    color: #a39c90;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* DONE: the card has been submitted — keep the original beige + green check. */
.ai-chat-prompt-form-submitted .ai-chat-prompt-submit:disabled {
    background: #F4F0E9;
    color: #1E6332;
    cursor: default;
}

.ai-chat-prompt-submit i {
    font-size: 11px;
}

/* ==================== ONE-CLICK ACTION BUTTONS (Phase B) ==================== */
.ai-chat-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e3ddd0;
}

.ai-chat-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    color: #1E6332;
    border: 1.5px solid #1E6332;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'Futura PT', 'Jost', sans-serif;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 1px 3px rgba(30, 99, 50, 0.08);
    line-height: 1.2;
}

.ai-chat-action-btn i {
    font-size: 12px;
    flex-shrink: 0;
}

.ai-chat-action-btn:hover {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.28);
}

.ai-chat-action-btn.active {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    border-color: #1E6332;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.2);
}

/* ==================== SUPPORT TICKET CARD (Phase C) ==================== */
.ai-chat-ticket-card {
    margin-top: 12px;
    border: 1.5px solid #d8e6dc;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(30, 99, 50, 0.08);
}

.ai-chat-ticket-head {
    display: flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Futura PT', 'Jost', sans-serif;
}

.ai-chat-ticket-head i { font-size: 14px; }

.ai-chat-ticket-body { padding: 14px 16px; }

.ai-chat-ticket-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1E6332;
    margin: 0 0 5px;
}

.ai-chat-ticket-subject,
.ai-chat-ticket-details {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #e3ddd0;
    border-radius: 9px;
    padding: 9px 11px;
    font-size: 13px;
    font-family: 'Futura PT', 'Jost', sans-serif;
    color: #212529;
    background: #fcfbf8;
    margin-bottom: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ai-chat-ticket-details { resize: vertical; min-height: 84px; line-height: 1.5; }

.ai-chat-ticket-subject:focus,
.ai-chat-ticket-details:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12);
    background: #fff;
}

.ai-chat-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.ai-chat-ticket-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #F4F0E9;
    color: #6b5e47;
    border: 1px solid #e3ddd0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.ai-chat-ticket-chip i { font-size: 10px; }
.ai-chat-ticket-pri-high   { background: #fff3e0; color: #b45309; border-color: #f5d9b0; }
.ai-chat-ticket-pri-urgent { background: #fde8e8; color: #b91c1c; border-color: #f3c0c0; }

.ai-chat-ticket-note {
    font-size: 11.5px;
    color: #6c757d;
    line-height: 1.5;
}

.ai-chat-ticket-foot {
    padding: 0 16px 14px;
    display: flex;
    justify-content: flex-end;
}

.ai-chat-ticket-submit {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'Futura PT', 'Jost', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.2);
}

.ai-chat-ticket-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 99, 50, 0.3);
}

.ai-chat-ticket-submit:disabled { opacity: 0.75; cursor: default; }

.ai-chat-ticket-recap {
    margin-top: 10px;
    background: #F4F0E9;
    border-left: 3px solid #1E6332;
    border-radius: 0 8px 8px 0;
    padding: 9px 12px;
    font-size: 12px;
    color: #444;
    line-height: 1.5;
}

.ai-chat-ticket-success .ai-chat-ticket-head { background: linear-gradient(135deg, #1E6332, #2F8542); }
.ai-chat-ticket-error .ai-chat-ticket-head   { background: linear-gradient(135deg, #b45309, #d97706); }

@media (max-width: 768px) {
    .ai-chat-ticket-foot { justify-content: stretch; }
    .ai-chat-ticket-submit { width: 100%; justify-content: center; }
    .ai-chat-ticket-subject,
    .ai-chat-ticket-details { font-size: 16px; } /* prevent iOS zoom-on-focus */
}

/* ==================== EXPANDED MODE ==================== */
/* Centered modal — only width/height animate (transform stays put so the
   centering + open animation are never fought). Default is comfortable;
   "expand" pushes it to the full 80% cap. */
.ai-chat-panel {
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* #1581 — the panel is always expanded now, so the legacy .expanded
   modifier is effectively the same as the base. Kept inert so any stale
   `expanded` class attribute on the panel doesn't change anything. */
.ai-chat-panel.expanded { width: 80vw; height: 80vh; }
.ai-chat-panel.expanded .ai-chat-chart-wrap canvas { max-height: 300px; }

/* ==================== RECENT CONVERSATIONS (Welcome Screen) ==================== */
.ai-chat-recent-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.ai-chat-recent-header {
    font-size: 10.5px;
    font-weight: 600;
    color: #adb5bd;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ai-chat-recent-header i {
    font-size: 10px;
}

.ai-chat-recent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-chat-recent-item:hover {
    background: #f0fff4;
}

.ai-chat-recent-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #6c757d;
    flex-shrink: 0;
}

.ai-chat-recent-content {
    flex: 1;
    min-width: 0;
}

.ai-chat-recent-title {
    font-size: 12.5px;
    color: #343a40;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-chat-recent-meta {
    font-size: 10.5px;
    color: #adb5bd;
    margin-top: 1px;
}

.ai-chat-recent-more {
    text-align: center;
    padding: 8px;
    font-size: 12px;
    color: #1E6332;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ai-chat-recent-more:hover {
    background: #f0fff4;
}

/* ==================== CONVERSATION HISTORY VIEW ==================== */
.ai-chat-history-view {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ai-chat-history-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.ai-chat-history-top h4 {
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-chat-history-top h4 i {
    color: #1E6332;
    font-size: 14px;
}

.ai-chat-history-back {
    background: #f0f0f0;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 13px;
    transition: all 0.2s;
}

.ai-chat-history-back:hover {
    background: #e9ecef;
    color: #212529;
}

.ai-chat-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.ai-chat-history-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border-radius: 10px;
    transition: background 0.2s;
}

.ai-chat-history-item:hover {
    background: #f8f9fa;
}

.ai-chat-history-item.active {
    background: #f0fff4;
}

.ai-chat-history-item-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
    min-width: 0;
}

.ai-chat-history-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #6c757d;
    flex-shrink: 0;
}

.ai-chat-history-item.active .ai-chat-history-item-icon {
    background: #F4F0E9;
    color: #1E6332;
}

.ai-chat-history-item-content {
    flex: 1;
    min-width: 0;
}

.ai-chat-history-item-title {
    font-size: 13px;
    color: #343a40;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-chat-history-item-meta {
    font-size: 11px;
    color: #adb5bd;
    margin-top: 2px;
}

.ai-chat-history-item-delete {
    background: none;
    border: none;
    color: #dee2e6;
    font-size: 12px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ai-chat-history-item-delete:hover {
    color: #dc3545;
    background: #fff5f5;
}

.ai-chat-history-empty {
    text-align: center;
    padding: 40px 20px;
    color: #adb5bd;
}

.ai-chat-history-empty i {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.5;
}

.ai-chat-history-empty p {
    margin: 0 0 4px;
    font-size: 14px;
}

.ai-chat-history-empty p.small {
    font-size: 12px;
    opacity: 0.7;
}

/* ==================== IMPERSONATING OFFSET ==================== */
/* Centered modal — nudge it slightly below the 32px impersonation banner
   and keep it within the 80% cap. */
body.impersonating .ai-chat-panel {
    top: calc(50% + 16px);
    max-height: calc(80vh - 32px);
}

/* ==================== MOBILE RESPONSIVE ==================== */
/* Note: Full mobile overrides are in mobile.css (@media max-width: 768px).
   This section handles the intermediate range (577px–768px) as a fallback. */
@media (max-width: 768px) {
    /* Mobile: the centered modal becomes a clean full-screen surface
       (base rule keeps it centered via top/left/transform). */
    .ai-chat-panel,
    .ai-chat-panel.expanded {
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
    }
    body.impersonating .ai-chat-panel {
        top: calc(50% + 16px);
        height: calc(100dvh - 32px);
        max-height: calc(100dvh - 32px);
    }
    /* One-click action buttons: comfortable tap targets, wrap cleanly */
    .ai-chat-action-btn {
        padding: 9px 14px;
        font-size: 12px;
        flex: 1 1 auto;
        justify-content: center;
        min-width: 44%;
    }
}

/* ============================================================
   EXPRESS AI WELCOME SCREEN v2 (May 19, #1576)
   Compact hero + 2-column suggestion grid + horizontal recent
   strip. Cuts the old welcome height by roughly half so it fits
   the modal without scrolling and reads with more "wow".
   ============================================================ */

/* Outer reset — override the legacy .ai-chat-welcome flex layout */
.ai-chat-welcome.ai-chat-welcome-v2 {
    display: block;
    padding: 4px 4px 0;
    text-align: left;
}

/* ── Hero ───────────────────────────────────────────────────── */
.ai-chat-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(30, 99, 50, 0.07), rgba(47, 133, 66, 0.03));
    border: 1px solid rgba(30, 99, 50, 0.14);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}
/* Subtle sparkle pattern on the hero background */
.ai-chat-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 92% 30%, rgba(47, 133, 66, 0.10) 0%, transparent 24%),
        radial-gradient(circle at 86% 88%, rgba(193, 154, 107, 0.08) 0%, transparent 24%);
    pointer-events: none;
}
.ai-chat-hero-icon-wrap {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 6px 18px rgba(30, 99, 50, 0.30), inset 0 1px 0 rgba(255,255,255,0.22);
    animation: aiHeroPulse 4.2s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

/* Mo variant of the welcome-hero icon — full-size character portrait so Mo
   is the visible centerpiece of the welcome screen (not a tiny corner icon).
   Soft brand-tinted halo + the same gentle float animation so he feels alive. */
.ai-chat-hero-icon-wrap.ai-chat-hero-mo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #fff;
    padding: 0;
    overflow: hidden;
    border: 2px solid rgba(30, 99, 50, 0.15);
    box-shadow: 0 10px 28px rgba(30, 99, 50, 0.22), 0 2px 6px rgba(30, 99, 50, 0.1);
    animation: aiHeroPulse 4.2s ease-in-out infinite;
}
.ai-chat-hero-icon-wrap.ai-chat-hero-mo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

@keyframes aiHeroPulse {
    0%, 100% { transform: translateY(0);   box-shadow: 0 6px 18px rgba(30, 99, 50, 0.30), inset 0 1px 0 rgba(255,255,255,0.22); }
    50%      { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(30, 99, 50, 0.38), inset 0 1px 0 rgba(255,255,255,0.28); }
}
.ai-chat-hero-text { position: relative; z-index: 1; min-width: 0; }
.ai-chat-hero-text h3 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: #1E6332;
    letter-spacing: 0.01em;
    line-height: 1.25;
}
.ai-chat-hero-text p {
    margin: 0;
    font-size: 15px;
    color: #475569;
    line-height: 1.45;
}
.ai-chat-hero-wave {
    display: inline-block;
    margin-left: 2px;
    animation: aiHeroWave 2.4s ease-in-out infinite;
    transform-origin: 70% 70%;
}
@keyframes aiHeroWave {
    0%, 60%, 100%   { transform: rotate(0); }
    10%, 30%        { transform: rotate(14deg); }
    20%             { transform: rotate(-8deg); }
    40%, 50%        { transform: rotate(-4deg); }
}

/* ── Suggestions header ──────────────────────────────────────── */
.ai-chat-suggest-v2 { margin-top: 14px; }
.ai-chat-suggest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 10px;
}
.ai-chat-suggest-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #8a8276;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.ai-chat-suggest-title i { color: #1E6332; font-size: 11px; }
.ai-chat-shuffle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #F4F0E9;
    border: 1px solid #e3ddd0;
    color: #6b5e47;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Futura PT', 'Jost', sans-serif;
    transition: all 0.2s ease;
}
.ai-chat-shuffle-btn i { font-size: 10px; }
.ai-chat-shuffle-btn:hover {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    border-color: #1E6332;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.22);
}

/* ── Suggestion grid — 3 columns on the always-expanded panel (#1581)
   so 6 prompts visible without scrolling; auto-fit gracefully on narrower
   viewports via the mobile override below. ───────────────────────────── */
.ai-chat-suggest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
@media (max-width: 1100px) {
    .ai-chat-suggest-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Compact tiles (May 20) — fonts intentionally unchanged. Only padding +
   gaps + the fixed min-height were reduced so the tile sizes itself to its
   own content. CSS Grid still stretches every tile in a row to match the
   tallest in that row, so visual alignment within a row is preserved. */
.ai-chat-suggest-tile {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    background: #fff;
    border: 1.5px solid #ece7dd;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: 'Futura PT', 'Jost', sans-serif;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}
.ai-chat-suggest-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(30, 99, 50, 0) 0%, rgba(30, 99, 50, 0.06) 100%);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.ai-chat-suggest-tile:hover {
    border-color: #1E6332;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(30, 99, 50, 0.13);
}
.ai-chat-suggest-tile:hover::after { opacity: 1; }

.ai-chat-suggest-tile-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: #f4f6f8;
    color: #6c757d;
}
/* Reuse the existing iconClass color identities */
.ai-chat-suggest-tile-icon.analytics { background: #e8f4fd; color: #0d6efd; }
.ai-chat-suggest-tile-icon.reports   { background: #fde8e8; color: #dc2626; }
.ai-chat-suggest-tile-icon.support   { background: #e0f7f4; color: #14b8a6; }
.ai-chat-suggest-tile-icon.industry  { background: #fdf3de; color: #b8870b; }

.ai-chat-suggest-tile-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ai-chat-suggest-tile-kind {
    display: inline-block;
    align-self: flex-start;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background: #eef2f7;
    color: #475569;
    padding: 2px 8px;
    border-radius: 999px;
}
.ai-chat-suggest-tile[data-kind="request"] .ai-chat-suggest-tile-kind {
    background: #E9F5EE;
    color: #14613a;
}
.ai-chat-suggest-tile-text {
    font-size: 12.5px;
    color: #2f3640;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Horizontal recent strip ─────────────────────────────────── */
.ai-chat-recent-section.ai-chat-recent-strip {
    /* Push to the bottom of the (flex-column) welcome area so the Recent strip
       sits right above the input instead of leaving a big empty gap below it. */
    margin-top: auto;
    padding: 10px 12px 12px;
    background: #faf8f4;
    border: 1px solid #ece7dd;
    border-radius: 14px;
}
.ai-chat-recent-strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ai-chat-recent-strip-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #8a8276;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.ai-chat-recent-strip-label i { color: #1E6332; font-size: 10px; }
.ai-chat-recent-all {
    font-size: 11.5px;
    font-weight: 600;
    color: #1E6332;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}
.ai-chat-recent-all:hover { color: #2F8542; text-decoration: underline; }

.ai-chat-recent-strip-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ai-chat-recent-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #e3ddd0;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    font-family: 'Futura PT', 'Jost', sans-serif;
    transition: all 0.2s ease;
    max-width: 100%;
}
.ai-chat-recent-pill i { color: #1E6332; font-size: 10px; flex-shrink: 0; }
.ai-chat-recent-pill-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.ai-chat-recent-pill-meta {
    color: #9ca3af;
    font-weight: 500;
    font-size: 10.5px;
}
.ai-chat-recent-pill:hover {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    border-color: #1E6332;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.22);
}
.ai-chat-recent-pill:hover i,
.ai-chat-recent-pill:hover .ai-chat-recent-pill-meta { color: rgba(255,255,255,0.86); }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ai-chat-hero { padding: 12px 14px; gap: 12px; }
    .ai-chat-hero-icon-wrap { width: 42px; height: 42px; font-size: 19px; }
    /* Mo hero on mobile — still prominent but slightly trimmed so the row
       fits two lines of greeting copy alongside him without crowding. */
    .ai-chat-hero-icon-wrap.ai-chat-hero-mo { width: 76px; height: 76px; }
    .ai-chat-hero-text h3 { font-size: 16px; }
    .ai-chat-hero-text p { font-size: 12px; }
    .ai-chat-suggest-grid { grid-template-columns: 1fr; gap: 6px; }
    .ai-chat-suggest-tile { padding: 9px 11px; }
    .ai-chat-recent-pill-title { max-width: 130px; }
}

/* ── Dark theme ──────────────────────────────────────────────── */
body.dark-theme .ai-chat-hero {
    background: linear-gradient(135deg, rgba(47, 133, 66, 0.14), rgba(30, 99, 50, 0.06));
    border-color: rgba(74, 222, 128, 0.22);
}
body.dark-theme .ai-chat-hero-text h3 { color: #86efac; }
body.dark-theme .ai-chat-hero-text p,
body.dark-theme .ai-chat-suggest-title,
body.dark-theme .ai-chat-recent-strip-label { color: #94a3b8; }
body.dark-theme .ai-chat-shuffle-btn {
    background: #1e293b; color: #cbd5e1; border-color: #334155;
}
body.dark-theme .ai-chat-shuffle-btn:hover { color: #fff; }
body.dark-theme .ai-chat-suggest-tile {
    background: #1e293b; border-color: #334155;
}
body.dark-theme .ai-chat-suggest-tile-text { color: #f1f5f9; }
body.dark-theme .ai-chat-suggest-tile-kind { background: #0f172a; color: #94a3b8; }
body.dark-theme .ai-chat-suggest-tile[data-kind="request"] .ai-chat-suggest-tile-kind {
    background: #0d2519; color: #86efac;
}
body.dark-theme .ai-chat-recent-section.ai-chat-recent-strip {
    background: #1e293b; border-color: #334155;
}
body.dark-theme .ai-chat-recent-pill {
    background: #0f172a; border-color: #334155; color: #cbd5e1;
}
body.dark-theme .ai-chat-recent-all { color: #86efac; }

/* ============================================================
   PREDICTIVE FOLLOW-UPS BAR (May 19, #1578)
   Lives between .ai-chat-messages and .ai-chat-input-area.
   Hidden when empty; shown with subtle slide-up animation when
   the AI emits a [FOLLOWUPS:] block.
   ============================================================ */
.ai-chat-followups {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(244, 240, 233, 0.55) 100%);
    border-top: 1px solid #eee5d6;
    animation: aiFollowupsIn 0.28s ease-out;
}
@keyframes aiFollowupsIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ai-chat-followups-label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #8a8276;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-right: 4px;
    border-right: 1px solid #e3ddd0;
    margin-right: 4px;
}
.ai-chat-followups-label i { color: #1E6332; font-size: 10px; }

.ai-chat-followups-pills {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-chat-followup-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #d8e6dc;
    color: #1E6332;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Futura PT', 'Jost', sans-serif;
    transition: all 0.18s ease;
    max-width: 100%;
    text-align: left;
    line-height: 1.3;
}
.ai-chat-followup-pill i { font-size: 10px; flex-shrink: 0; }
.ai-chat-followup-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}
.ai-chat-followup-pill:hover {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    border-color: #1E6332;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(30, 99, 50, 0.24);
}
.ai-chat-followup-pill.taken {
    opacity: 0.6;
    background: #F4F0E9;
    color: #8a8276;
    border-color: #e3ddd0;
    cursor: default;
}

/* Mobile — give pills room to wrap and shrink slightly */
@media (max-width: 768px) {
    .ai-chat-followups { padding: 7px 12px 9px; gap: 7px; }
    .ai-chat-followups-label { display: none; } /* save horizontal space */
    .ai-chat-followup-pill { font-size: 11.5px; padding: 6px 11px; }
    .ai-chat-followup-pill span { max-width: 220px; }
}

/* Dark theme */
body.dark-theme .ai-chat-followups {
    background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.5) 100%);
    border-top-color: #334155;
}
body.dark-theme .ai-chat-followups-label { color: #94a3b8; border-right-color: #334155; }
body.dark-theme .ai-chat-followups-label i { color: #4ade80; }
body.dark-theme .ai-chat-followup-pill {
    background: #1e293b;
    border-color: #334155;
    color: #86efac;
}
body.dark-theme .ai-chat-followup-pill:hover {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    border-color: #1E6332;
}
body.dark-theme .ai-chat-followup-pill.taken {
    background: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}

/* Dark theme — prominent input bar (#1582) */
body.dark-theme .ai-chat-input-area {
    background: #0f172a;
    border-top-color: #334155;
}
body.dark-theme .ai-chat-input-wrap {
    background: #1e293b;
    border-color: #334155;
    box-shadow: none;
}
body.dark-theme .ai-chat-input-wrap:focus-within {
    background: #0f172a;
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16);
}
body.dark-theme .ai-chat-send-btn { background: #2F8542; }
body.dark-theme .ai-chat-send-btn:hover:not(:disabled) { background: #4ade80; color: #0f172a; }
body.dark-theme .ai-chat-send-btn:disabled { background: #334155; color: #64748b; }
body.dark-theme .ai-chat-input { color: #f1f5f9; }
body.dark-theme .ai-chat-input::placeholder { color: #94a3b8; }

/* Keep controls clear of the floating Mo button (desktop) — the pagination bars
   that end at the right edge used to sit underneath it. */
@media (min-width: 769px) {
    .esm-pagination,
    .finder-pagination,
    .finder-statusbar { padding-right: 86px; }
}