:root {
    --magenta: #ad1082;
    --magenta-bright: #d4169e;
    --magenta-glow: rgba(173,16,130,0.4);
    --teal: #0eb5b5;
    --teal-dim: rgba(14,181,181,0.15);
    --green-btn: #2ea44f;
    --dark: #080810;
    --dark2: #0e0e1a;
    --dark3: #131326;
    --card: rgba(20,20,36,0.85);
    --border: rgba(173,16,130,0.25);
    --border-teal: rgba(14,181,181,0.2);
    --text: #e8e8f4;
    --muted: #8888aa;
    --white: #ffffff;
    --font-head: 'Orbitron', sans-serif;
    --font-body: 'Verdana', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /*--text-code: #c0ffff;*/ /*#0eb5b5;*/ /*#8eb0b0;*/
    /*--text-code-green: #409340;*/ /*#3a853a;*/ /*#4cea4c;*/ /*#16d4ab;*/ /*#00ff00;*/
    /*--text-code-blue: #4c7dae;*/ /*#169ed4;*/ /*#0000ff;*/
    --text-code-blue: #4e94ce;
    --text-code-green: #4ec9b0;
    --text-code: #e8e8f4;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--dark);
    color: var(--text);
    font-family: var(--font-body);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 48px;
    background: rgba(8,8,16,0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.nav-cta {
    background: var(--magenta);
    color: var(--white);
    border: none;
    padding: 10px 24px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: background 0.2s, box-shadow 0.2s;
}

.nav-logo {
    font-family: var(--font-head);
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-title {
    font-family: 'Verdana', sans-serif;
    font-size: 1.5em;
    color: var(--teal);
}

.nav-logo-dot {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 10px var(--magenta-bright);
}

    .nav-logo-dot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.footer-logo span {
    color: var(--magenta-bright);
}

/* chat layout container */
.app-container {
    flex: 1;
    display: flex;
    height: calc(100vh - 73px); /* Subtract header height */
    background-image: linear-gradient(rgba(173,16,130,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(173,16,130,0.02) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* left sidebar */
.sidebar {
    width: 280px;
    background: var(--dark2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.new-chat-btn {
    background: var(--dark3);
    border: 1px solid var(--border);
    color: var(--white);
    padding: 12px;
    border-radius: 6px;
    font-family: var(--font-head);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 24px;
    text-align: center;
}

    .new-chat-btn:hover {
        border-color: var(--magenta-bright);
        box-shadow: 0 0 15px var(--magenta-glow);
    }

.history-label {
    font-family: var(--font-mono);
    font-size: 1.0rem;
    text-transform: uppercase;
    color: white; /*var(--muted);*/
    margin-bottom: 12px;
    letter-spacing: 0.1em;
}

.history-list {
    list-style: none;
    overflow-y: auto;
}

.history-item {
    padding: 10px;
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .history-item:hover, .history-item.active {
        background: var(--teal-dim);
        color: var(--teal);
    }

/* main area */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(8, 8, 16, 0.4);
    backdrop-filter: blur(5px);
}

.chat-header {
    padding: 16px 32px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.model-badge {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: var(--dark3);
    padding: 4px 12px;
    border: 1px solid var(--border-teal);
    border-radius: 20px;
    color: var(--teal);
}

.messages-container {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* message bubbles */
.message {
    max-width: 100%;
    display: flex;
    gap: 16px;
}

    .message.user {
        align-self: flex-end;
        flex-direction: row-reverse;
    }

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: var(--dark3);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .avatar img {
        width: 100%;
        height: 100%;
        /*object-content: cover;*/ /* Prevents stretching */
        border-radius: inherit;
    }

    .avatar.ai, .avatar.user {
        font-family: var(--font-body);
        font-weight: bold;
        font-size: 1rem;
    }

    .avatar.ai {
        border-color: var(--magenta);
        color: var(--magenta-bright);
    }

    .avatar.user {
        border-color: var(--teal); /*var(--magenta);*/
        color: white; /*var(--teal);*/
    }

pre {
    font-family: var(--font-mono);
    background: #000;
    padding: 12px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: white;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

    pre .green {
        color: var(--text-code-green);
    }

    pre .blue {
        color: var(--text-code-blue);
    }

.bubble {
    padding: 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.user .bubble {
    background: var(--magenta);
    color: var(--white);
    border-bottom-right-radius: 2px;
}

.ai .bubble {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    border-bottom-left-radius: 2px;
    width: 100%;
    box-sizing: border-box; 
}


.code-container {
    position: relative;
    margin-top: 10px;
    width: 100%;
    display: block;
}

    .code-container pre {
        font-family: var(--font-mono);
        background: #000;
        padding: 12px;
        font-size: 0.8rem;
        color: var(--text-code);
        border-radius: 4px;
        overflow-x: auto;
        max-width: 100%;
        overflow-x: auto;
    }

.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--dark3);
    border: 1px solid var(--border-teal);
    color: var(--teal);
    padding: 6px 12px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    align-items: center;
    gap: 6px;
    width: auto;
    white-space: nowrap;
    display: inline-flex;
}

    .copy-btn:hover {
        background: var(--teal);
        color: var(--dark);
        border-color: var(--teal);
    }

    .copy-btn.copied {
        background: var(--green-btn);
        color: var(--white);
        border-color: var(--green-btn);
    }

    .copy-btn svg {
        width: 14px;
        height: 14px;
    }


/* Pulsing animation for loading state */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.pulse {
    animation: pulse 1.5s ease-in-out infinite;
}


/* input area */
.input-area {
    padding: 24px 32px;
    background: var(--dark);
    border-top: 1px solid var(--border);
}

.input-wrapper {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    display: flex;
    gap: 12px;
}

textarea {
    flex: 1;
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 18px;
    color: var(--text);
    font-family: var(--font-body);
    resize: none;
    outline: none;
    transition: border-color 0.2s;
}

    textarea:focus {
        border-color: var(--magenta-bright);
    }

    textarea:disabled, button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.send-btn {
    background: var(--magenta);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .send-btn:hover {
        background: var(--magenta-bright);
        box-shadow: 0 0 15px var(--magenta-glow);
    }

/* right sidebar */
.params-sidebar {
    width: 240px;
    background: var(--dark2);
    border-left: 1px solid var(--border);
    padding: 20px;
    display: none; /* Hidden on mobile */
}

@media (min-width: 1200px) {
    .params-sidebar {
        display: block;
    }
}

.param-group {
    margin-bottom: 24px;
}

.param-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--teal);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

.param-slider {
    width: 100%;
    accent-color: var(--magenta);
}

footer {
    border-top: 1px solid var(--border);
    padding: 24px 48px;
    background: var(--dark);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--muted);
}

.heart {
    color: var(--magenta-bright);
}

a {
    color: var(--white);
    text-decoration: none;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: var(--dark3);
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--magenta);
    }