:root {
    --bg: #000;
    --text: #0f0;
    --dim: #005500;
    --alert: #ff0;
}

body {
    margin: 0;
    font-family: 'Space Mono', monospace;
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
}

#map-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    filter: grayscale(100%) contrast(1.2) brightness(0.5);
    opacity: 0.4;
}

.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 0%, #000 90%);
    z-index: 1;
    pointer-events: none;
}

.interface {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

header {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--dim);
    padding-bottom: 1rem;
}

.status-light {
    width: 10px;
    height: 10px;
    background: var(--text);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--text);
    animation: blink 2s infinite;
}

.conversation-log {
    flex: 1;
    overflow-y: auto;
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-shadow: 0 0 5px var(--dim);
}

.msg { padding: 10px; border-left: 2px solid var(--dim); background: rgba(0,20,0,0.5); }
.msg.agent { border-color: var(--text); align-self: flex-start; }
.msg.user { border-color: var(--alert); color: var(--alert); align-self: flex-end; text-align: right; }

.controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

#command-input {
    flex: 1;
    background: transparent;
    border: 1px solid var(--dim);
    padding: 1rem;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
}
#command-input:focus { border-color: var(--text); outline: none; }

#mic-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--dim);
    border: 1px solid var(--text);
    color: var(--text);
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
}

.pulse-ring {
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border: 1px solid var(--text);
    border-radius: 50%;
    opacity: 0;
    animation: pulse 2s infinite;
}

@keyframes blink { 50% { opacity: 0.3; } }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }