/* ================================================================
   AI-CHAT-NEON.CSS — Sexy AI Chat Terminal & Email Agent Effects
   PURE ADDITIVE — NO DELETIONS
   ================================================================ */

/* ── CSS Variables for Chat ───────────────────────────────── */
:root {
    --chat-neon: #8b5cf6;
    --chat-glow: rgba(139, 92, 246, 0.45);
    --chat-ping: #10b981;
    --agent-blue: #06b6d4;
    --email-gold: #f59e0b;
}

/* ================================================================
   AI CONTACT SECTION — Main Container
   ================================================================ */

#contact-section {
    background:
        radial-gradient(circle at 10% 10%, rgba(139,92,246,0.12), transparent 35%),
        radial-gradient(circle at 90% 90%, rgba(6,182,212,0.1), transparent 35%),
        linear-gradient(135deg, rgba(15,23,42,0.9), rgba(10,6,28,0.95)) !important;
    border: 1px solid rgba(139,92,246,0.3) !important;
    box-shadow:
        0 0 40px rgba(139,92,246,0.12),
        0 0 80px rgba(6,182,212,0.06),
        0 24px 60px rgba(0,0,0,0.5) !important;
    transition: box-shadow 0.5s ease, border-color 0.5s ease !important;
    position: relative;
    overflow: hidden;
}

#contact-section:hover {
    border-color: rgba(139,92,246,0.5) !important;
    box-shadow:
        0 0 60px rgba(139,92,246,0.2),
        0 0 120px rgba(6,182,212,0.1),
        0 28px 70px rgba(0,0,0,0.6) !important;
}

/* ── Animated scanline overlay ────────────────────────────── */
#contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(139,92,246,0.018) 2px,
        rgba(139,92,246,0.018) 4px
    );
    pointer-events: none;
    z-index: 0;
    animation: scanlines-drift 8s linear infinite;
}

@keyframes scanlines-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 0 200px; }
}

/* ── Grid above scanlines ─────────────────────────────────── */
#contact-section > * {
    position: relative;
    z-index: 1;
}

/* ── Agent Online Badge ───────────────────────────────────── */
#contact-section .text-emerald-500 {
    text-shadow: 0 0 8px rgba(16,185,129,0.9), 0 0 20px rgba(16,185,129,0.5) !important;
    animation: agent-online-glow 2s ease-in-out infinite alternate !important;
}

@keyframes agent-online-glow {
    from { text-shadow: 0 0 6px rgba(16,185,129,0.8), 0 0 16px rgba(16,185,129,0.4); }
    to   { text-shadow: 0 0 12px rgba(16,185,129,1), 0 0 30px rgba(16,185,129,0.7), 0 0 50px rgba(16,185,129,0.3); }
}

/* ── INTELLIGENT AGENT EMULATOR badge ────────────────────── */
#contact-section .bg-brand-100.text-brand-700,
#contact-section .dark\\:bg-brand-500\\/20 {
    animation: badge-flicker 4s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(139,92,246,0.3) !important;
}

@keyframes badge-flicker {
    0%, 90%, 100% { opacity: 1; }
    92%, 96%      { opacity: 0.6; }
    94%            { opacity: 1; }
}

/* ── Robot icon pulse ─────────────────────────────────────── */
#contact-section .fa-robot {
    filter: drop-shadow(0 0 8px rgba(139,92,246,0.8)) drop-shadow(0 0 20px rgba(139,92,246,0.4)) !important;
    animation: robot-bounce-glow 1.8s ease-in-out infinite !important;
}

@keyframes robot-bounce-glow {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 0 8px rgba(139,92,246,0.8));
    }
    50% {
        transform: translateY(-5px);
        filter: drop-shadow(0 0 16px rgba(139,92,246,1)) drop-shadow(0 0 30px rgba(6,182,212,0.5));
    }
}

/* ================================================================
   CONTACT FORM — Neon Input Fields
   ================================================================ */

#automated-contact-form input,
#automated-contact-form textarea,
#automated-contact-form select {
    background: rgba(6, 8, 24, 0.7) !important;
    border: 1px solid rgba(139,92,246,0.25) !important;
    color: #e2e8f0 !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(8px) !important;
}

#automated-contact-form input::placeholder,
#automated-contact-form textarea::placeholder {
    color: rgba(148,163,184,0.45) !important;
    font-size: 11px !important;
}

#automated-contact-form input:focus,
#automated-contact-form textarea:focus,
#automated-contact-form select:focus {
    border-color: rgba(139,92,246,0.7) !important;
    box-shadow:
        0 0 0 2px rgba(139,92,246,0.2),
        0 0 16px rgba(139,92,246,0.3),
        0 0 30px rgba(139,92,246,0.1),
        inset 0 0 10px rgba(139,92,246,0.04) !important;
    background: rgba(10, 6, 28, 0.85) !important;
    outline: none !important;
}

/* ── Form field typing neon label effect ──────────────────── */
#automated-contact-form input:not(:placeholder-shown),
#automated-contact-form textarea:not(:placeholder-shown) {
    border-color: rgba(139,92,246,0.45) !important;
    box-shadow: 0 0 8px rgba(139,92,246,0.15) !important;
}

/* ── Submit button — mega neon pulse ──────────────────────── */
#contact-submit-btn {
    background: linear-gradient(135deg, #7c3aed, #4f46e5, #0891b2) !important;
    background-size: 200% 200% !important;
    animation: submit-gradient-shift 4s ease infinite !important;
    border: 1px solid rgba(139,92,246,0.5) !important;
    box-shadow:
        0 0 16px rgba(139,92,246,0.4),
        0 0 32px rgba(79,70,229,0.2),
        0 8px 24px rgba(0,0,0,0.4) !important;
    letter-spacing: 0.04em !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

@keyframes submit-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#contact-submit-btn:hover {
    box-shadow:
        0 0 24px rgba(139,92,246,0.7),
        0 0 50px rgba(79,70,229,0.4),
        0 0 80px rgba(8,145,178,0.2),
        0 12px 30px rgba(0,0,0,0.5) !important;
    transform: translateY(-3px) scale(1.02) !important;
    filter: brightness(1.15) !important;
}

#contact-submit-btn:active {
    transform: translateY(0) scale(0.97) !important;
    filter: brightness(0.9) !important;
}

/* ── Paper plane icon on submit ───────────────────────────── */
#contact-submit-btn .fa-paper-plane {
    animation: plane-fly 2s ease-in-out infinite !important;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.8)) !important;
}

@keyframes plane-fly {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%       { transform: translate(3px, -3px) rotate(8deg); }
    75%       { transform: translate(-2px, 2px) rotate(-5deg); }
}

/* ================================================================
   AI CHAT TERMINAL — Neon Chat Window
   ================================================================ */

#contact-section .md\\:col-span-6:last-child,
#contact-section > div > div > div:last-child {
    background: rgba(3, 5, 18, 0.92) !important;
    border: 1px solid rgba(139,92,246,0.3) !important;
    box-shadow:
        0 0 20px rgba(139,92,246,0.15),
        inset 0 0 30px rgba(139,92,246,0.04) !important;
}

/* ── Chat window container ────────────────────────────────── */
.md\\:col-span-6.flex.flex-col.h-\\[280px\\] {
    background: rgba(3, 5, 18, 0.9) !important;
    border: 1px solid rgba(139,92,246,0.35) !important;
    border-radius: 1rem !important;
    box-shadow:
        0 0 25px rgba(139,92,246,0.15),
        0 0 50px rgba(6,182,212,0.06),
        inset 0 0 20px rgba(139,92,246,0.04) !important;
    position: relative;
    overflow: hidden;
}

/* Terminal scanline on chat */
.md\\:col-span-6.flex.flex-col.h-\\[280px\\]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(6,182,212,0.012) 3px,
        rgba(6,182,212,0.012) 4px
    );
    pointer-events: none;
    z-index: 0;
}

/* ── Chat header ──────────────────────────────────────────── */
#agent-chat-logs {
    position: relative;
    z-index: 1;
}

/* ── ACTIVE CHAT TERMINAL label ───────────────────────────── */
#contact-section .text-\\[10px\\].font-bold.text-slate-400.uppercase {
    color: rgba(6,182,212,0.9) !important;
    text-shadow: 0 0 8px rgba(6,182,212,0.5) !important;
    letter-spacing: 0.2em !important;
    font-family: 'Space Grotesk', monospace !important;
}

/* ── Agent chat message bubbles ───────────────────────────── */
#agent-chat-logs > div {
    transition: all 0.3s ease !important;
    animation: chat-bubble-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

@keyframes chat-bubble-in {
    from { opacity: 0; transform: translateY(12px) scale(0.92); filter: blur(3px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* AI agent message style enhancement */
#agent-chat-logs .bg-slate-800,
#agent-chat-logs [class*="bg-slate-800"],
#agent-chat-logs [class*="bg-indigo"] {
    background: linear-gradient(135deg, rgba(30,10,60,0.9), rgba(10,6,28,0.95)) !important;
    border: 1px solid rgba(139,92,246,0.3) !important;
    box-shadow: 0 0 12px rgba(139,92,246,0.15), 0 4px 12px rgba(0,0,0,0.4) !important;
    color: #c4b5fd !important;
}

/* User message style */
#agent-chat-logs .bg-brand-600,
#agent-chat-logs [class*="bg-brand-6"] {
    background: linear-gradient(135deg, rgba(109,40,217,0.9), rgba(79,70,229,0.85)) !important;
    border: 1px solid rgba(139,92,246,0.5) !important;
    box-shadow: 0 0 16px rgba(139,92,246,0.3), 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* ── Chat input field ─────────────────────────────────────── */
#agent-user-prompt {
    background: rgba(6, 8, 24, 0.8) !important;
    border: 1px solid rgba(139,92,246,0.3) !important;
    color: #e2e8f0 !important;
    font-family: 'Space Grotesk', monospace !important;
    font-size: 11px !important;
    transition: all 0.3s ease !important;
    caret-color: #8b5cf6 !important;
}

#agent-user-prompt::placeholder {
    color: rgba(148,163,184,0.4) !important;
    font-style: italic !important;
}

#agent-user-prompt:focus {
    border-color: rgba(139,92,246,0.7) !important;
    box-shadow:
        0 0 12px rgba(139,92,246,0.3),
        0 0 25px rgba(139,92,246,0.12),
        inset 0 0 8px rgba(139,92,246,0.04) !important;
    background: rgba(10, 6, 28, 0.9) !important;
}

/* Cursor blink in chat */
#agent-user-prompt:focus {
    animation: cursor-glow-blink 1s ease-in-out infinite !important;
}

@keyframes cursor-glow-blink {
    0%, 100% { box-shadow: 0 0 12px rgba(139,92,246,0.3), 0 0 25px rgba(139,92,246,0.12); }
    50%       { box-shadow: 0 0 18px rgba(139,92,246,0.5), 0 0 40px rgba(139,92,246,0.2); }
}

/* ── Chat send button ─────────────────────────────────────── */
#contact-section button[onclick="triggerAgentChatReply()"] {
    background: linear-gradient(135deg, #7c3aed, #0891b2) !important;
    border: 1px solid rgba(139,92,246,0.5) !important;
    box-shadow: 0 0 12px rgba(139,92,246,0.4) !important;
    transition: all 0.25s ease !important;
}

#contact-section button[onclick="triggerAgentChatReply()"]:hover {
    box-shadow:
        0 0 20px rgba(139,92,246,0.7),
        0 0 40px rgba(8,145,178,0.4) !important;
    transform: scale(1.1) rotate(10deg) !important;
    filter: brightness(1.2) !important;
}

#contact-section button[onclick="triggerAgentChatReply()"] .fa-paper-plane {
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.9)) !important;
}

/* ── Clear Logs button neon ───────────────────────────────── */
#contact-section button[onclick="resetAgentChat()"] {
    color: rgba(6,182,212,0.85) !important;
    transition: all 0.25s ease !important;
    text-shadow: 0 0 6px rgba(6,182,212,0.4) !important;
}

#contact-section button[onclick="resetAgentChat()"]:hover {
    color: #06b6d4 !important;
    text-shadow: 0 0 10px rgba(6,182,212,0.8), 0 0 20px rgba(6,182,212,0.4) !important;
}

/* ================================================================
   EMAIL AGENT — Enhanced Neon Effects
   ================================================================ */

.email-status-pill {
    background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(6,182,212,0.12)) !important;
    border: 1px solid rgba(139,92,246,0.4) !important;
    color: #c4b5fd !important;
    box-shadow: 0 0 10px rgba(139,92,246,0.2) !important;
    animation: email-pill-glow 2.5s ease-in-out infinite alternate !important;
}

@keyframes email-pill-glow {
    from { box-shadow: 0 0 8px rgba(139,92,246,0.2); border-color: rgba(139,92,246,0.35); }
    to   { box-shadow: 0 0 18px rgba(139,92,246,0.45), 0 0 35px rgba(6,182,212,0.15); border-color: rgba(139,92,246,0.65); }
}

.email-sending {
    position: relative;
}

.email-sending::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg, #8b5cf6, #06b6d4, #ec4899, #8b5cf6);
    background-size: 300% 100%;
    animation: email-border-chase 1.5s linear infinite;
    z-index: -1;
    border-radius: inherit;
}

@keyframes email-border-chase {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.email-sending::after {
    border: 2px solid rgba(139,92,246,0.6) !important;
    animation: email-pulse-ultra 0.8s ease-in-out infinite !important;
    box-shadow: 0 0 20px rgba(139,92,246,0.5) !important;
}

@keyframes email-pulse-ultra {
    0%   { transform: scale(1); opacity: 0.9; box-shadow: 0 0 10px rgba(139,92,246,0.5); }
    100% { transform: scale(1.05); opacity: 0; box-shadow: 0 0 30px rgba(139,92,246,0); }
}

/* ── Direct Message Route heading ─────────────────────────── */
#automated-contact-form + div h4,
#contact-section h4 {
    color: rgba(6,182,212,0.85) !important;
    text-shadow: 0 0 8px rgba(6,182,212,0.4) !important;
    letter-spacing: 0.15em !important;
}

/* ── Form success / error state ───────────────────────────── */
#contact-section form input:valid:not(:placeholder-shown) {
    border-color: rgba(16,185,129,0.5) !important;
    box-shadow: 0 0 8px rgba(16,185,129,0.2) !important;
}

#contact-section form input:invalid:not(:placeholder-shown) {
    border-color: rgba(239,68,68,0.5) !important;
    box-shadow: 0 0 8px rgba(239,68,68,0.2) !important;
}

/* ================================================================
   TYPING INDICATOR — Three dots
   ================================================================ */

.agent-typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(30,10,60,0.9), rgba(10,6,28,0.95));
    border: 1px solid rgba(139,92,246,0.3);
    border-radius: 12px;
    box-shadow: 0 0 12px rgba(139,92,246,0.15);
}

.agent-typing-indicator span {
    width: 6px;
    height: 6px;
    background: var(--chat-neon, #8b5cf6);
    border-radius: 50%;
    animation: typing-dot 1.4s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(139,92,246,0.8);
}

.agent-typing-indicator span:nth-child(1) { animation-delay: 0s; }
.agent-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.agent-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-dot {
    0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
    30%            { transform: translateY(-6px) scale(1.2); opacity: 1; box-shadow: 0 0 10px rgba(139,92,246,1); }
}

/* ================================================================
   CHAT SECTION HEADING SECTION
   ================================================================ */

#contact-section .heading-font.font-bold.text-xl {
    color: #e0d7ff !important;
    text-shadow: 0 0 10px rgba(139,92,246,0.5) !important;
}

#contact-section h4.text-xs.font-bold.uppercase {
    color: rgba(6,182,212,0.8) !important;
    text-shadow: 0 0 6px rgba(6,182,212,0.4) !important;
    font-family: 'Space Grotesk', monospace !important;
}

/* ================================================================
   CONTACT SECTION BORDER GLOW — Animated Corner Dots
   ================================================================ */

#contact-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(139,92,246,0.8) 20%,
        rgba(6,182,212,0.9) 50%,
        rgba(236,72,153,0.8) 80%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: top-border-sweep 4s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes top-border-sweep {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}