/**
 * chat.css — Go Fire (fAIre)
 * Chat area: messages, input pill, suggestions, welcome state, aurora, mode banner.
 * Depends on: layout.css
 */

/* ── Chat Area ── */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}
/* ── Bottom sunrise aurora (no cursor tracking) ──
   A static, CSS-driven orange glow that feels like a sun
   rising just below the screen edge. It breathes while the
   chat is empty, then freezes into a subtle frosted band
   the moment the first message is sent. */
.chat-area::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70vh;
    pointer-events: none;
    z-index: 0;
    /* Layered gradient: a concentrated orange sunrise at the
       bottom-centre PLUS a soft warm wash filling the rest of
       the lower half, so nothing dark peeks out beneath the
       chroma. The orange feels like it started beyond the
       screen edge and its glow occupies only the bottom band. */
    background:
        radial-gradient(ellipse 55% 85% at 50% 110%,
            rgba(255, 150, 50, 0.78) 0%,
            rgba(255, 120, 35, 0.45) 18%,
            rgba(255, 100, 25, 0.22) 38%,
            rgba(255, 90, 20, 0.08) 58%,
            rgba(255, 90, 20, 0) 78%),
        linear-gradient(to top,
            rgba(255, 120, 40, 0.18) 0%,
            rgba(255, 120, 40, 0.08) 25%,
            rgba(255, 120, 40, 0.02) 55%,
            rgba(255, 120, 40, 0) 100%);
    filter: blur(0.5px);
    opacity: 1;
    transition: opacity 0.9s ease, filter 0.9s ease, height 0.9s ease;
}
/* Welcome state: the sun is "rising" — gently pulsing */
body.gf-empty-chat .chat-area::before {
    animation: gfSunrise 6.5s ease-in-out infinite;
}
@keyframes gfSunrise {
    0%, 100% { opacity: 0.88; filter: blur(0.5px) brightness(0.96); }
    50%      { opacity: 1;    filter: blur(0.5px) brightness(1.08); }
}
/* Post-send state: the glow freezes into a frosted horizontal
   band clipped to the bottom of the screen. The orange feels
   like it started beyond the viewport and its haze only tints
   the lowest slice of the chat. */
body.gf-chat-started .chat-area::before {
    animation: none;
    height: 35vh;
    opacity: 0.7;
    filter: blur(2px) saturate(1.05);
}
body.gf-chat-started .chat-area::after,
body.gf-has-messages .chat-area::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26vh;
    pointer-events: none;
    z-index: 0;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    /* Very faint warm tint — no dark overlay. The backdrop-filter
       blur does the frosting; a tiny orange wash keeps the chroma
       feeling continuous from the sunrise glow above. */
    background: linear-gradient(to top,
        rgba(255, 120, 40, 0.10) 0%,
        rgba(255, 120, 40, 0.04) 45%,
        rgba(255, 120, 40, 0) 100%);
    mask-image: linear-gradient(to top, #000 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%);
}
/* Keep chat content above the aurora */
.mode-banner, .chat-messages, .chat-input-area, .status-bar { position: relative; z-index: 1; }

/* ── Welcome-state layout: SuperGrok-style centered chat ──
   Stack = [minimized welcome title] + [input] floating together
   around the vertical middle, with the rest of the chat-area
   collapsing so nothing else competes for attention. */
.chat-input-area { transition: transform 0.55s cubic-bezier(.2,.8,.2,1); }
.chat-messages   { transition: padding-bottom 0.55s cubic-bezier(.2,.8,.2,1); }
body.gf-empty-chat .chat-messages {
    justify-content: flex-end !important;
    padding-bottom: 14px;
}
body.gf-empty-chat .chat-input-area {
    transform: translateY(-42vh);
    background: transparent !important;
    border-top: none !important;
}
/* Minimize welcome block — mirror the SuperGrok layout: just a
   small centered logo/title, no subtitle/suggestions clutter. */
body.gf-empty-chat .welcome-flame    { display: none; }
body.gf-empty-chat .welcome-subtitle { display: none; }
body.gf-empty-chat .suggestions      { display: none; }
body.gf-empty-chat .welcome-title {
    font-size: 26px;
    letter-spacing: 3px;
    margin-bottom: 22px;
    opacity: 0.92;
}
/* Welcome: taller band, centred orange glow fills the lower half
   so no dark background shows underneath the chroma. */
body.gf-empty-chat .chat-area::before {
    height: 78vh;
}

/* ── Hide the welcome/logo once the chat actually has messages.
   While a project is freshly opened but has no messages yet, we
   keep the centered welcome-logo-above-input layout. */
body.gf-has-messages #chatMessages .welcome { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }
body.gf-has-messages .chat-input-area {
    transform: none !important;
    border-top: none !important;
}
body.gf-has-messages .chat-messages {
    justify-content: flex-start !important;
    padding-bottom: 18px !important;
}

/* ── Active-project chat layout: wider input, frosted base ──
   The input sits clearly on top of a strong frosted band that
   blurs the bottom aurora. Content above the frost stays sharp. */
body.gf-has-messages .chat-input-area {
    padding: 14px 22px 22px !important;
    background: transparent !important;
    border-top: none !important;
    z-index: 3 !important;
}
body.gf-has-messages .chat-input {
    max-width: 920px;
    margin: 0 auto;
    height: 56px;
    padding: 16px 22px;
    font-size: 14px;
    border-radius: 16px;
    background: rgba(22, 20, 22, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 14px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 107, 43, 0.10);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #f2f2f2;
}
body.gf-has-messages .chat-input::placeholder { color: rgba(240,240,240,0.45); }
body.gf-has-messages .chat-input:focus {
    border-color: rgba(255, 107, 43, 0.55);
    box-shadow: 0 14px 48px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 107, 43, 0.28);
}
/* The frosted glass band behind the input: heavy blur of both
   the dark body colour and the orange sunrise aurora, producing
   a soft warm haze that the crisp input floats on top of. */
body.gf-has-messages .chat-area::after {
    height: 34vh !important;
    backdrop-filter: blur(28px) saturate(1.35) brightness(0.92) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.35) brightness(0.92) !important;
    background: linear-gradient(to top,
        rgba(18, 12, 8, 0.35) 0%,
        rgba(255, 120, 40, 0.10) 40%,
        rgba(255, 120, 40, 0.02) 80%,
        rgba(255, 120, 40, 0) 100%) !important;
    mask-image: linear-gradient(to top, #000 70%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to top, #000 70%, transparent 100%) !important;
}

.mode-banner {
    padding: 9px 18px;
    background: #170e06;
    border-bottom: 1px solid #2a1808;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #b84d00;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s, border-color 0.3s;
}

.banner-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ff6b2b;
    flex-shrink: 0;
    transition: background 0.3s;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Chat message bubbles */
.message {
    width: 100%;
    max-width: 720px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.message.user {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #e8e8e8;
    align-self: flex-end;
}
.message.assistant {
    background: #0f1a0f;
    border: 1px solid #1a2e1a;
    color: #c8e6c8;
    align-self: flex-start;
}

.chat-notice {
    text-align: center;
    font-size: 11px;
    color: #886a3a;
    padding: 6px 14px;
    border: 1px dashed #33291a;
    border-radius: 6px;
    background: #141008;
    margin: 8px auto;
    max-width: 80%;
    opacity: 1;
    transition: opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease, max-height 0.3s ease;
    max-height: 60px;
    overflow: hidden;
}
.chat-notice.fading {
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
}

/* Welcome State */
.welcome { text-align: center; max-width: 580px; width: 100%; }

.welcome-flame { font-size: 50px; margin-bottom: 14px; }

.welcome-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.welcome-title .fire { color: #fff; }
.welcome-title .fly  { color: #ff6b2b; }

.welcome-subtitle {
    font-size: 13px;
    color: #555;
    margin-bottom: 28px;
    line-height: 1.7;
    font-style: italic;
}

.suggestions { display: flex; flex-direction: column; gap: 8px; }

.suggestion {
    padding: 13px 16px;
    background: #121212;
    border: 1px solid #1e1e1e;
    border-radius: 6px;
    font-size: 12px;
    color: #aaa;
    cursor: pointer;
    text-align: left;
    font-family: 'Courier New', monospace;
    transition: all 0.15s;
}
.suggestion:hover { border-color: #ff6b2b55; color: #eee; background: #18100a; }

.suggestion-arrow { color: #ff6b2b; margin-right: 6px; }

/* ── Input Area ── */
.chat-input-area {
    padding: 12px 16px;
    border-top: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0d0d0d;
}

.chat-input {
    flex: 1;
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 10px 14px;
    color: #ccc;
    font-size: 13px;
    outline: none;
    resize: none;
    height: 42px;
    font-family: inherit;
}
.chat-input::placeholder { color: #3a3a3a; }
.chat-input:focus { border-color: #ff6b2b44; }

.send-btn {
    width: 42px; height: 42px;
    background: #ff6b2b;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}
.send-btn:hover { background: #e05518; }

/* Cooling-down state: AI service tripped a provider error; visually signal
   "not ready" without disabling the control — user can still see the
   countdown tooltip and pointer over reveals the remaining seconds. */
.send-btn.gf-cooldown {
    filter: grayscale(1);
    opacity: 0.55;
    cursor: wait;
}
.send-btn.gf-cooldown:hover { background: #ff6b2b; }

/* ── Attachment thumbnails inside user message bubble ── */
.message.user .gf-msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.message.user .gf-msg-attach-img {
    max-width: 260px;
    max-height: 260px;
    border-radius: 8px;
    display: block;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,0.08);
}
.message.user .gf-msg-text { white-space: pre-wrap; }

/* ── Chat attachments (one-shot images for LLM vision) ── */
.gf-chat-pill { flex-wrap: wrap; }
/* Paperclip label wraps an invisible file input that fills the entire
   click area — so a click anywhere on the icon opens the picker reliably. */
.gf-chat-attach { position: relative; }
.gf-chat-attach .gf-chat-attach-file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    /* Hide the native button chrome (only the hit-area matters) */
    font-size: 0;
    color: transparent;
    padding: 0;
    margin: 0;
    border: 0;
}
.gf-chat-attach-preview {
    display: none;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 4px 0;
    order: -1;
}
.gf-chat-attach-preview.has-items { display: flex; }
.gf-chat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 3px;
    background: #181818;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    max-width: 200px;
    font-size: 11px;
    color: #bbb;
}
.gf-chat-chip img {
    width: 28px; height: 28px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}
.gf-chat-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}
.gf-chat-chip-x {
    background: transparent;
    border: none;
    color: #777;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
}
.gf-chat-chip-x:hover { color: #ff6b2b; }
.gf-chat-pill.drag-over {
    border-color: #ff6b2b !important;
    box-shadow: 0 0 0 2px #ff6b2b33;
}

/* ── Markdown rendering (used by renderMarkdown() in config.js) ── */
.gf-md-code { background: #1a2a1a; padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 12px; }
.gf-md-list-item { display: block; padding-left: 12px; }