/* === Hacker + Coder Aesthetic Redesign === */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Source+Code+Pro:wght@400;700&display=swap');

body {
    font-family: 'Fira Code', 'Source Code Pro', 'Courier New', monospace;
    background: linear-gradient(135deg, #0a0a0f 0%, #181825 100%) !important;
    color: #00ff41 !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

body::after {
    /* Scanline overlay */
    content: '';
    pointer-events: none;
    position: fixed;
    left: 0; top: 0; width: 100vw; height: 100vh;
    z-index: 2;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 2px,
        rgba(0,255,65,0.04) 3px,
        transparent 4px
    );
    mix-blend-mode: lighten;
}

#matrix-canvas {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0.7;
}

/* Terminal window frame */
.terminal-frame {
    background: #181825;
    border-radius: 12px;
    box-shadow: 0 0 32px 0 #00ff4199, 0 0 0 2px #222;
    border: 2px solid #222;
    max-width: 700px;
    margin: 3vh auto;
    padding: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.terminal-header {
    display: flex;
    align-items: center;
    background: #23232e;
    padding: 0.5rem 1.2rem;
    border-bottom: 1.5px solid #222;
}
.terminal-dot {
    width: 12px; height: 12px; border-radius: 50%; margin-right: 8px;
    display: inline-block;
}
.terminal-dot.red { background: #ff5f56; }
.terminal-dot.yellow { background: #ffbd2e; }
.terminal-dot.green { background: #27c93f; }
.terminal-title {
    color: #a259ff;
    font-size: 1.1rem;
    font-family: inherit;
    margin-left: 0.5rem;
    letter-spacing: 0.05em;
}

.container, #historyPanel {
    background: #00000061 !important;
    border-radius: 0 0 12px 12px;
    border: none;
    box-shadow: none;
    color: #00ff41 !important;
    text-shadow: 0 0 8px #00ff41, 0 0 2px #00ff41;
    padding: 2.5rem 2rem 2rem 2rem;
    margin: 0;
    position: relative;
    z-index: 1;
    height: auto;
}

/* Terminal prompt and blinking cursor */
.terminal-line {
    font-family: inherit;
    font-size: 1.1rem;
    color: #00ff41;
    margin-bottom: 0.7em;
    display: flex;
    align-items: center;
}
.terminal-prompt {
    color: #00eaff;
    margin-right: 0.5em;
    font-weight: 700;
}
.blink-cursor {
    display: inline-block;
    width: 1ch;
    background: none;
    color: #00ff41;
    animation: blink-cursor 1s steps(1) infinite;
}
@keyframes blink-cursor {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Glitch animation for headings and buttons */
@keyframes glitch {
    0% { text-shadow: 2px 0 #00eaff, -2px 0 #a259ff; }
    20% { text-shadow: -2px 0 #00eaff, 2px 0 #a259ff; }
    40% { text-shadow: 2px 2px #00eaff, -2px -2px #a259ff; }
    60% { text-shadow: -2px -2px #00eaff, 2px 2px #a259ff; }
    80% { text-shadow: 2px 0 #00eaff, -2px 0 #a259ff; }
    100% { text-shadow: 0 0 8px #00ff41, 0 0 2px #00ff41; }
}
h1, h2, button, #startListeningImage {
    animation: glitch 2.5s infinite alternate;
}

/* Typing effect for terminal lines */
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}
.typed-text {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2.5px solid #00ff41;
    width: 0;
    animation: typewriter 2.2s steps(30, end) 0.2s 1 normal both, blink-cursor 0.8s step-end infinite alternate;
}

/* Syntax highlighting for code snippets */
.code-snippet {
    background: #181825;
    color: #00ff41;
    font-family: inherit;
    font-size: 1.05rem;
    border-radius: 0.5rem;
    padding: 1.1rem 1.5rem;
    margin: 1.2rem 0;
    box-shadow: 0 0 16px 2px #00ff4144;
    overflow-x: auto;
    border-left: 4px solid #00eaff;
}
.code-keyword { color: #00eaff; }
.code-string { color: #a259ff; }
.code-number { color: #ffbd2e; }
.code-comment { color: #39ff14; font-style: italic; }

/* Keyboard-style UI components */
.kbd {
    display: inline-block;
    background: #23232e;
    color: #00eaff;
    border: 1.5px solid #00eaff;
    border-radius: 4px;
    padding: 0.2em 0.6em;
    font-size: 1em;
    font-family: inherit;
    margin: 0 0.2em;
    box-shadow: 0 0 8px #00eaff99;
}

/* Scrolling code background effect */
@keyframes scrollCode {
    0% { background-position: 0 0; }
    100% { background-position: 0 100vh; }
}
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        #00ff4122 0px, #00ff4100 2px, #00eaff22 4px, #a259ff22 6px, transparent 8px
    );
    opacity: 0.12;
    animation: scrollCode 12s linear infinite;
}

/* Buttons and UI controls */
button, #toggleHistory, .copy-button {
    background: #101014 !important;
    color: #00eaff !important;
    border: 1.5px solid #00eaff !important;
    box-shadow: 0 0 8px #00eaff99;
    text-shadow: 0 0 4px #00eaff;
    font-family: inherit;
    border-radius: 6px;
    padding: 0.5em 1.2em;
    font-size: 1.1em;
    margin: 0.5em 0;
    transition: background 0.2s, color 0.2s, border 0.2s;
}
button:hover, button:focus, #toggleHistory:hover, .copy-button:hover {
    background: #23232e !important;
    color: #a259ff !important;
    border-color: #a259ff !important;
    box-shadow: 0 0 16px #a259ff99;
}

/* Start listening image as a terminal control */
#startListeningImage {
    filter: drop-shadow(0 0 16px #00ff41) brightness(1.2) contrast(1.2);
    border: 2.5px solid #00ff41 !important;
    background: #101014 !important;
    border-radius: 50%;
    width: 160px;
    height: 160px;
    margin: 2rem auto;
    display: block;
    cursor: pointer;
    transition: border 0.2s, filter 0.2s;
}
#appBtn
{
    filter: drop-shadow(0 0 16px #00ff41) brightness(1.2) contrast(1.2);
    border: 2.5px solid #00ff41 !important;
    background: #101014 !important;
    border-radius: 50%;
    width: 160px;
    height: 160px;
    margin: 2rem auto;
    display: block;
    cursor: pointer;
    transition: border 0.2s, filter 0.2s;
}

#startListeningImage:active {
    border-color: #a259ff !important;
    filter: drop-shadow(0 0 24px #a259ff);
}


/* Soft green glow for text areas */
.text-area, .prabhu-response {
    background: #00000000 !important;
    color: #00ff41 !important;
    text-align: center;
    font-family: inherit;
    font-size: 1.08rem;
    animation: greenPulse 3.5s infinite alternate;
}
.prabhu-response .typed-text {
    overflow: hidden;
    white-space: nowrap;
    border: none;
    width: 0;
    animation: typewriter 2.2s steps(30, end) 0.2s 1 normal both, blink-cursor 0.8s step-end infinite alternate;
}

/* Code output styling */
#codeOutput {
    background: #181825 !important;
    border: 2px solid #00eaff !important;
    border-radius: 8px;
    margin: 1rem 0;
    padding: 1rem;
    box-shadow: 0 0 16px #00eaff44;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
}

#generatedCode {
    background: #101014 !important;
    color: #00ff41 !important;
    font-family: 'Fira Code', 'Source Code Pro', monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-left: 4px solid #00eaff;
    margin: 0;
    max-width: 100%;
}

.copy-button {
    background: #00eaff !important;
    color: #101014 !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    transition: all 0.2s !important;
}

.copy-button:hover {
    background: #a259ff !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px #a259ff99 !important;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #101014;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #00eaff;
    border-radius: 4px;
    box-shadow: 0 0 8px #00eaff99;
}

::-webkit-scrollbar-thumb:hover {
    background: #a259ff;
    box-shadow: 0 0 12px #a259ff99;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #00eaff #101014;
}

/* Responsive adjustments */
@media (max-width: 700px) {
    .terminal-frame { max-width: 99vw; }
    .container, #historyPanel { padding: 1.2rem 0.5rem; }
    #startListeningImage { width: 110px; height: 110px; }
}