body {
    background: #000000;
    color: #f2f2f2;
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    overflow-x: hidden;
}
/* --- Sidebar --- */
.sidebar {
    position: fixed;
    left: -250px;
    top: 0;
    width: 250px;
    height: 100vh;
    background: #1b2028;
    box-shadow: 2px 0 16px 0 rgba(0,0,0,0.44);
    color: #e0e4ec;
    transition: left 0.3s;
    z-index: 500;
    overflow-y: auto;
    padding: 10px 10px 70px 10px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #3a3a44 #191c21;
}
.sidebar.open { left: 0; }
.sidebar h2 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    font-weight: 400;
    color: #c7d4ee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1.5px solid #23283b;
    padding-bottom: 6px;
}
.sidebar .new-chat {
    background: none;
    color: #8fd0ff;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
}
.sidebar ul {
    list-style: none;
    margin: 0; padding: 0;
}
.sidebar li {
    background: #242733;
    color: #e0e4ec;
    padding: 4px 5px;
    margin-bottom: 3px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.18s;
}
.sidebar li:hover {
    background: #273042;
}
.sidebar li span {
    font-family: "Open Sans", "Segoe UI", "SegoeUI", "Helvetica Neue", Arial, sans-serif;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar li button {
    background: none;
    border: none;
    color: #b4b4b4;
    cursor: pointer;
    font-size: 1em;
    margin-left: 6px;
}

/* --- Sidebar Toggle --- */
.sidebar-toggle-btn {
    position: fixed;
    top: 10px; left: 10px;
    width: 36px; height: 36px;
    background: #23283b;
    color: #e0e4ec;
    font-size: 22px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 1px 5px rgba(0,0,0,0.18);
    transition: background 0.2s;
}
.sidebar-toggle-btn:hover { background: #2c3145; }

/* --- Main Content --- */
.main-content {
    margin-left: 0;
    transition: margin-left 0.3s;
}
.sidebar.open ~ .main-content { margin-left: 250px; }

/* --- Title Header --- */
#appTitle {
    font-family: 'Courier New', Courier, monospace;
    background: linear-gradient(45deg, #242733 60%, #1e2432 100%);
    color: #e7f2fd;
    text-align: center;
    font-size: 1.45em;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0;
    padding: 18px 0 12px 0;
    border-bottom: 2px solid #202430;
    box-shadow: 0 1px 5px 0 #191c22b0;
}

/* --- Chat Area --- */
.chat-container {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    bottom: 110px;
    overflow-y: auto;
    background: none;
    z-index: 401;
}
.chat-messages {
    padding: 18px 2vw 18px 260px;
    max-width: 1100px;
    margin: 0 auto;
    min-height: 55vh;
}
@media (max-width:900px) {
    .chat-messages { padding-left: 12vw; }
}
@media (max-width:700px) {
    .chat-messages { padding-left: 8vw; }
}
@media (max-width:600px) {
    .chat-messages { padding: 10px; }
}

/* --- Chat Bubbles --- */
.chat-bubble {
    font-family: "Open Sans", "Segoe UI", "SegoeUI", "Helvetica Neue", Arial, sans-serif;
    margin: 14px 0;
    padding: 16px 20px;
    border-radius: 18px;
    max-width: 800px;
    word-wrap: break-word;
    font-size: 1.08em;
    line-height: 1.58;
    background: #232431;
    box-shadow: 0 4px 24px 0 rgba(25, 32, 52, 0.13);
    position: relative;
    transition: box-shadow 0.18s, background 0.16s;
}
.chat-bubble.user {
    background: linear-gradient(90deg, #296ad6 70%, #50a0e6 100%);
    color: #f7fbff;
    margin-left: auto;
    margin-right: 16px;
}
.chat-bubble.user .message {
    white-space: pre-wrap;
}
.chat-bubble.bot {
    background: #232740;
    color: #e2e6f2;
    margin-right: auto;
    margin-left: 16px;
}
.chat-bubble a {
    color: #73c5fd;
    text-decoration: underline;
    font-weight: 500;
}
.chat-bubble .footer {
    font-size: 0.91em;
    color: #a5adc2;
    text-align: right;
    margin-top: 7px;
    opacity: 0.77;
}
.chat-bubble .timestamp {
    float: right;
    font-size: 0.82em;
    color: #81889c;
    opacity: 0.59;
}

/* --- Thoughts Styling --- */
.thoughts {
    display: block;
    background: linear-gradient(95deg, #232b3d 80%, #273c62 100%);
    color: #dadbee;
    font-size: 0.97em;
    font-family: 'Fira Mono', 'monospace', monospace;
    padding: 18px 20px 16px 24px;
    margin: 18px 0 0 0;
    border-radius: 15px;
    box-shadow: 0 2px 12px 0 rgba(30,40,60,0.16);
    border-left: 4px solid #3d86f6;
    position: relative;
    transition: background 0.16s;
}
.thoughts::before {
    content: "💡 Thoughts";
    display: block;
    font-size: 1.06em;
    font-weight: 600;
    color: #77bbff;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
    opacity: 0.86;
}
.show-thoughts {
    color: #88bbff;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.96em;
    margin-top: 8px;
}

/* --- Chat Input --- */
.chat-input-container {
    position: fixed;
    bottom: 54px;
    left: 0;
    width: 100%;
    background: #181a21;
    padding: 12px 0 12px 0;
    border-top: 2px solid #23273a;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 -2px 18px 0 #1b1b20b0;
}
.chat-input-container textarea {
    flex: 1;
    padding: 12px;
    border: 1.5px solid #24282f;
    background: #222331;
    color: #f2f2fa;
    font-size: 16px;
    border-radius: 5px;
    margin-right: 10px;
    min-height: 45px;
    max-height: 120px;
    resize: vertical;
    outline: none;
    box-shadow: none;
    transition: border 0.14s;
}
.chat-input-container textarea:focus {
    border: 1.5px solid #53aaff;
}
.send-button {
    background: #0099ff;
    color: #fff;
    font-size: 1.17em;
    font-family: Arial, Calibri, Trebuchet, sans-serif;
    padding: 10px 16px;
    margin-left: 7px;
    margin-right: 2px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.17s;
}
.send-button:hover { background: #1975c4; }

/* --- Drawer Bar (Bottom) --- */
.drawer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    background: #222435;
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    border-top: 2px solid #242d42;
    z-index: 2000;
}
.drawer-bar button {
    background: #232d45;
    color: #d3e3fc;
    font-size: 1.16em;
    padding: 7px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.18s, color 0.18s;
    margin: 0 4px;
}
.drawer-bar button:hover{
    background: #395a89;
    color: #fff;
    text-decoration: none;
}
.drawer-button {
    background: #232d45;
    color: #d3e3fc;
    font-size: 1.16em;
    padding: 7px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.18s, color 0.18s;
    margin: 0 4px;
    text-decoration: none;
    font-family: Arial, Calibri, Trebuchet, sans-serif;
}
.drawer-button:hover{
    background: #395a89;
    color: #fff;
    text-decoration: none;
}
/* --- Drawer Panels --- */
.drawer {
    position: fixed;
    bottom: 45px;
    left: 0;
    width: 100vw;
    height: 0;
    max-height: 80vh;
    background: #181a20;
    box-shadow: 0 -6px 36px 0 rgba(0,0,0,0.58);
    overflow: hidden;
    z-index: 1705;
    border-radius: 20px 20px 0 0;
    transition: height 0.33s cubic-bezier(0.33,1,0.68,1);
    border-top: 2.5px solid #263042;
}
.drawer.open {
    height: 43vh !important;
    min-height: 430px;
    overflow-y: auto;
    justify-content: center;
}
.drawer.open ~ .chat-input-container {
    bottom: 50vh !important;
    transition: bottom 0.33s;
}
.model-details h3 {
    color: #a8ccfa;
    font-size: 1.07em;
    margin-bottom: 8px;
}
.model-details span {
    color: #86b8ed;
    font-weight: 500;
}

/* Drawer Header */
.drawer-header, .admin-drawer-header {
    position: sticky;
    top: 0;
    z-index:9999;
    background: linear-gradient(90deg,#222b37 0,#222a35 70%);
    color: #f3f3fe;
    font-size: 1.18em;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 12px 20px;
    border-bottom: 1.5px solid #232e45;
    border-radius: 18px 18px 0 0;
}
.drawer-header button, .admin-drawer-close {
    background: none;
    color: #f88383;
    border: none;
    font-size: 1.38em;
    cursor: pointer;
    margin-left: 12px;
    margin-right: 0;
    padding: 2px 12px;
    line-height: 1;
    transition: color 0.18s;
}
.drawer-header button:hover, .admin-drawer-close:hover {
    color: #fff;
}

/* Analytics Drawer/Table */
.analytics-content {
    overflow-y: auto;
    padding-bottom: 24px;
    color: #d7e0ee;
    font-size: 1.08em;
}
.analyticsTable,
.analyticsTable td,
.analyticsTable th,
.analyticsTable tr {
    background: #181c26;
    color: #c6dbf7;
    font-size: 1.06em;
    border: 0px;
    border-bottom: 1.2px solid #232e45;
}
.analyticsTable th {
    background: #273348;
    color: #94c8fd;
    font-weight: 700;
    border-bottom: 2px solid #263042;
}
.analyticsTable tr:hover {
    background: #232f49;
}

/* Code & Log Blocks */
pre {
    position: relative;
    border: 1px solid #666;
    margin: 0;
    padding: 10px;
    background-color: #000;
    overflow-y: auto;
    height: auto;
}
#logContent, #smiContent {
    background: #181c21;
    color: #FFF;
    font-size: 1em;
    min-height: 250px;
    max-height: 40vh;
    overflow-y: auto;
    font-family: monospace;
    border-radius: 8px;
    margin-bottom: 8px;
}

/* Math Block */
.math-block {
    display: block;
    background: #202431;
    color: #7fffa5;
    font-family: 'Fira Mono', monospace;
    padding: 10px 18px;
    border-radius: 6px;
    margin: 16px 0;
    font-size: 1.12em;
}

/* Floating copy button */
.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.2s ease-in-out;
}
.copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Dropdown Styles */
.dropdown-container {
    position: relative;
    width: 100%;
    min-width: 220px;
}
.dropdown-selected {
    padding: 8px 34px 8px 10px;
    border: 1.5px solid #33374b;
    background: #212433;
    color: #d7e2fb;
    border-radius: 7px 7px 0 0;
    font-size: 1em;
    cursor: pointer;
    position: relative;
    transition: border 0.18s;
}
.dropdown-selected::after {
    content: "▼";
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none;
    font-size: 0.87em;
}
.dropdown-list {
    position: absolute;
    left: 0;
    width: 100%;
    background: #1b2028;
    border: 1.5px solid #2c344e;
    border-top: none;
    border-radius: 0 0 7px 7px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 9999;
}
.dropdown-item {
    padding: 8px 12px;
    color: #eee;
    cursor: pointer;
    border-bottom: 1px solid #263042;
    background: #212433;
    font-size: 1em;
}
.dropdown-item:hover { background: #253153; }

/* Miscellaneous */
hr {
    border: none;
    border-top: 1px solid #2b344e;
    margin: 16px 0;
}
.refresh-notice {
    color: #b3c8e8;
    font-size: 0.99em;
    margin-top: 7px;
}

/* --- Custom Scrollbar for all scrollable sections --- */
::-webkit-scrollbar {
    width: 12px;
    background: #161822;
}
::-webkit-scrollbar-thumb {
    background: #28344a;
    border-radius: 8px;
    border: 2px solid #161822;
}
::-webkit-scrollbar-thumb:hover {
    background: #3c5580;
}
.sidebar::-webkit-scrollbar,
.drawer.open::-webkit-scrollbar,
.analytics-content::-webkit-scrollbar,
#logContent::-webkit-scrollbar,
#smiContent::-webkit-scrollbar {
    width: 13px;
    background: #181b21;
}
.sidebar::-webkit-scrollbar-thumb,
.drawer.open::-webkit-scrollbar-thumb,
.analytics-content::-webkit-scrollbar-thumb,
#logContent::-webkit-scrollbar-thumb,
#smiContent::-webkit-scrollbar-thumb {
    background: #2b3548;
    border-radius: 7px;
    border: 2px solid #181b21;
}
.sidebar::-webkit-scrollbar-thumb:hover,
.drawer.open::-webkit-scrollbar-thumb:hover,
.analytics-content::-webkit-scrollbar-thumb:hover,
#logContent::-webkit-scrollbar-thumb:hover,
#smiContent::-webkit-scrollbar-thumb:hover {
    background: #405c80;
}

/* Focus Ring for Accessibility */
:focus {
    outline: 2px solid #52a5ff !important;
    outline-offset: 2px;
}

/* --- Admin/Model Drawer and Form Styles --- */
#adminDrawer .admin-settings, #importExportDrawer .admin-settings {
    max-width: 420px;
    margin: 0 auto;
    background: #20222b;
    border-radius: 12px;
    padding: 18px 20px;
    font-size: 1em;
    box-shadow: 0 1px 10px #1113;
}
#adminDrawer .form-row,
#importExportDrawer .form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
#adminDrawer .form-row label,
#importExportDrawer .form-row label {
    min-width: 0;
    text-align: left;
    margin-bottom: 2px;
    color: #99b3df;
    font-size: 0.98em;
    font-weight: 600;
}
#adminDrawer .form-row input,
#adminDrawer .form-row select,
#importExportDrawer .form-row input,
#importExportDrawer .form-row select {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    background: #212433;
    color: #e2e8fa;
    border: 1px solid #353853;
    font-size: 1em;
    margin-bottom: 0;
}

.model-drawer-grid {
    display: flex;
    gap: 36px;
    padding: 24px 32px;
    margin: 0 auto;
    width: fit-content;
}
.model-settings {
    flex: 1 100%;
    min-width: 340px;
    max-width: 750px;
}
.model-details.wide {
    flex: 1 1 48%;
    min-width: 380px;
    max-width: 650px;
    background: rgba(34, 39, 55, 0.94);
    padding: 20px 30px 20px 28px;
    border-radius: 18px;
    font-family: 'Fira Mono', 'monospace', monospace;
    font-size: 1.06em;
    word-break: break-all;
    color: #e7efff;
    margin-left: 18px;
    margin-top: 16px;
}
.params-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 8px;
    margin-bottom: 12px;
}
.params-grid .form-row {
    flex: 0 1 44%;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    gap: 8px;
}
.form-row label, .admin-row label {
    min-width: 110px;
    text-align: right;
    font-family: monospace;
    opacity: 0.8;
    margin-right: 4px;
}
.form-row input, .admin-row input {
    flex: 1 1 70px;
    max-width: 100px;
    border-radius: 7px;
    border: 1px solid #22293d;
    padding: 5px 10px;
    background: #181c2a;
    color: #d6e7fa;
    font-size: 1em;
    font-family: 'Fira Mono', monospace;
}
.button-row {
    display: flex;
    gap: 16px;
    margin-top: 18px;
    margin-bottom: 6px;
}
.start-model-btn,
.stop-model-btn {
    flex: 1 1 0;
    font-size: 1.16em;
    font-weight: bold;
    padding: 12px 0;
    border-radius: 10px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background 0.15s;
}
.start-model-btn {
    background: #27ae60;
    color: #fff;
}
.start-model-btn:hover {
    background: #229954;
}
.stop-model-btn {
    background: #c0392b;
    color: #fff;
}
.stop-model-btn:hover {
    background: #a93226;
}
@media (max-width: 1200px) {
    .model-drawer-grid {
        flex-direction: column;
        gap: 16px;
        padding: 10px 3vw;
    }
    .model-details.wide {
        margin-left: 0;
        margin-top: 18px;
        max-width: 98vw;
    }
}
@media (max-width: 800px) {
    .model-settings, .model-details.wide {
        min-width: 0;
        max-width: 99vw;
        padding: 9vw 4vw 8vw 4vw;
    }
    .params-grid .form-row {
        flex: 1 1 100%;
    }
}

/* Admin panel alternate grid system (can be removed if not used) */
.admin-settings-panel {
    background: #20222b;
    border-radius: 14px;
    padding: 28px 30px 24px 30px;
    margin: 24px auto;
    max-width: 750px;
    min-width: 290px;
    box-shadow: 0 2px 18px #191b22a0;
    color: #e3eafc;
}
.admin-form-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 12px;
}
.admin-defaults-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 32px;
    margin-bottom: 8px;
}
@media (max-width: 750px) {
    .admin-defaults-grid {
        grid-template-columns: 1fr;
        gap: 10px 0;
    }
    .admin-settings-panel {
        padding: 14px 4vw 12px 4vw;
    }
}
.admin-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-row label {
    min-width: 110px;
    text-align: right;
    margin-right: 8px;
    color: #aac8fa;
    font-size: 1em;
    font-family: monospace;
    font-weight: 600;
}
.admin-row input {
    flex: 1 1 100px;
    max-width: 300px;
    border-radius: 7px;
    border: 1px solid #22293d;
    padding: 6px 10px;
    background: #181c2a;
    color: #d6e7fa;
    font-size: 1em;
    font-family: 'Fira Mono', monospace;
}
/* Action buttons in drawer headers (NOT the close or destructive) */
#smiDrawer .drawer-header button:not(:last-child):not(.destructive),
#logsDrawer .drawer-header button:not(:last-child):not(.destructive) {
    display: inline-flex;
    align-items: center;
    background: #293449;
    color: #cfe5ff;
    border: 1.5px solid #466899;
    font-size: 1.13em;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 8px;
    margin-right: 16px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border 0.12s, box-shadow 0.12s;
    box-shadow: 0 2px 10px #0001;
    outline: none;
    gap: 8px;
}

#smiDrawer .drawer-header button:not(:last-child):not(.destructive):hover,
#logsDrawer .drawer-header button:not(:last-child):not(.destructive):hover {
    background: #395b8d;
    border-color: #68a6ff;
    color: #fff;
    box-shadow: 0 3px 12px #195bff22;
}

/* For destructive actions like Clear Logs, use .destructive class in your HTML */
#logsDrawer .drawer-header .destructive {
    background: #23282e;
    color: #ff8a8a;
    border: 1.5px solid #d66;
}
#logsDrawer .drawer-header .destructive:hover {
    background: #642727;
    border-color: #ff7676;
    color: #fff;
}
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.53);
    z-index: 4000;
    display: none; /* HIDE by default */
    align-items: center;
    justify-content: center;
}
.modal-overlay.active {
    display: flex !important; /* Show when triggered */
}
.about-modal-card {
    background: #232b37;
    color: #e6e8ff;
    border-radius: 17px;
    padding: 36px 34px 26px 34px;
    min-width: 320px;
    max-width: 640px;
    width: 98vw;
    box-shadow: 0 8px 44px #171c2aeb;
    position: relative;
    text-align: center;
    animation: fadeIn .18s;
    margin: 0 auto;
}
.about-modal-card h2 {
    margin-top: 6px;
    margin-bottom: 8px;
    font-size: 1.25em;
    font-weight: 700;
    color: #83bcff;
    letter-spacing: 0.02em;
}
.about-modal-card .about-version {
    color: #89cbf8;
    font-size: 1em;
    margin-bottom: 16px;
}
.about-modal-card .about-desc {
    font-size: 1em;
    color: #dbeaff;
    margin: 18px 0 10px 0;
    text-align: left;
    font-family: 'Segoe UI', Arial, sans-serif;
}
.about-modal-card .about-section-title {
    font-size: 1.08em;
    font-weight: 600;
    margin: 24px 0 14px 0;
    color: #8ac6ff;
    text-align: left;
    letter-spacing: 0.01em;
}
.about-modal-card ul {
    text-align: left;
    margin: 0 0 14px 1.7em;
    padding-left: 0;
    font-size: 1.0em;
}
.about-modal-card li {
    margin-bottom: 10px;
    line-height: 1.25;
}
.about-modal-card strong { color: #fff; }
.about-modal-card em    { color: #b2d3ff; font-style: italic; }
.about-modal-card .about-footer {
    margin-top: 26px;
    color: #99b3cd;
    font-size: 0.97em;
    opacity: 0.7;
    text-align: center;
}
.about-modal-card .about-links a {
    color: #88bbff;
    text-decoration: underline;
    margin: 0 12px;
    font-size: 1.04em;
}
.about-modal-card .about-logo {
    width: 52px; height: 52px;
    border-radius: 13px;
    margin-bottom: 6px;
    margin-top: -14px;
    box-shadow: 0 2px 12px #0a162c7d;
}
.about-close-btn {
    position: absolute;
    top: 14px; right: 16px;
    font-size: 1.5em;
    background: none;
    color: #e17c7c;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}
.about-close-btn:hover { color: #fff; }

@media (max-width: 600px) {
    .about-modal-card {
        padding: 22px 8vw 16px 8vw;
        min-width: 0;
        max-width: 99vw;
    }
    .about-modal-card h2 { font-size: 1.14em; }
    .about-modal-card .about-logo { width: 38px; height: 38px; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98);}
    to { opacity: 1; transform: scale(1);}
}
#analyticsChartContainer {
    background: #23272e;
    border-radius: 16px;
    padding: 0px 16px 24px 120px;  /* more left padding for long names */
    min-height: 650px;
    height: 80vh;
  }
  
  .chartjs-tooltip {
    color: #eee !important;
    background: #181c20 !important;
  }
  
  #aboutBtn {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1100;
    background:none;
    border: none;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 2px 10px #0002;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
  }
  #aboutBtn:hover {
    background: #294059;
  }
  #aboutBtn svg {
    display: block;
    width: 22px;
    height: 22px;
  }
  /* Homepage / Landing Page Styles for LLM Controller */

/* ---------- HEADER ---------- */
.landing-header,
.home-header {
    max-width: 760px;
    margin: 36px auto 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 18px;
}
.landing-header img,
.home-header .llm-logo {
    width: 70px;
    height: 70px;
    border-radius: 13px;
    background: #222b37;
    box-shadow: 0 2px 12px #1118;
    max-width: 90vw;     /* Don't exceed viewport width */
    display: block;
    margin: 0;           /* Default: no auto-centering */
}
.home-header .llm-logo { /* For logo in new markup */
    width: 64px;
    height: 64px;
    background: unset;
}
.landing-header .tagline-group { flex: 1; }
.landing-header .tagline,
.home-header .tagline {
    font-size: 1.65em;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    color: #8fd0ff;
    margin-bottom: 4px;
}
.landing-header .subline,
.home-header .subtitle {
    color: #b2d8fe;
    font-size: 1.06em;
    margin-top: 4px;
}
.version-badge {
    background: #242733;
    color: #94c8fd;
    border-radius: 8px;
    padding: 5px 17px;
    font-size: 1.05em;
    margin-left: 10px;
    margin-bottom: 5px;
    vertical-align: middle;
    display: inline-block;
    font-family: 'Fira Mono', 'monospace', monospace;
    font-weight: 600;
}

/* ---------- FEATURES GRID ---------- */
.feature-section {
    max-width: 950px;
    margin: 36px auto 0 auto;
    padding: 0 22px;
}
.feature-grid {
display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;max-width:1100px;margin:36px auto 0 auto;padding:0 18px;
}
.chat-bubble.bot,
.feature-card {
    background: #20222b;
    border-radius: 13px;
    padding: 24px 18px 18px 18px;
    box-shadow: 0 6px 24px #000a, 0 1.5px 8px #1118;
    color: #b2d3fa;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow 0.15s;
}
.feature-card h3 {
    font-size: 1.12em;
    font-weight: 700;
    color: #90befc;
    margin: 0 0 6px 0;
}
.feature-card p {
    font-size: 1.01em;
    margin: 0;
    color: #c6e3ff;
}

/* ---------- CTA BUTTON BAR ---------- */
.cta-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 36px 0 20px 0;
}
.drawer-button, .cta-btn {
    background: #232d45;
    color: #d3e3fc;
    font-size: 1.16em;
    padding: 9px 26px 9px 18px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-family: Arial, Calibri, Trebuchet, sans-serif;
    font-weight: 500;
    transition: background 0.18s, color 0.18s, text-decoration 0.15s;
    margin: 0 7px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    position: relative;
}
.drawer-button .emoji,
.cta-btn .emoji {
    font-size: 1.12em;
    margin-right: 8px;
    vertical-align: middle;
}
.drawer-button:hover, .cta-btn:hover {
    background: #395a89;
    color: #fff;
    text-decoration: none;
}
.cta-btn {
    background: #296ad6;
    color: #fff;
    padding: 13px 32px;
    border-radius: 9px;
    font-size: 1.18em;
    font-weight: 600;
    box-shadow: 0 2px 14px #121b3557;
    margin-bottom: 4px;
}
.cta-btn:hover {
    background: #43a1f5;
}

/* ---------- NEWSLETTER SIGNUP ---------- */
.newsletter-signup,
.newsletter-box {
    max-width: 380px;
    margin: 44px auto 0 auto;
    background: #202431;
    padding: 10px 25px 25px 10px;
    border-radius: 15px;
    box-shadow: 0 2px 13px #121b3581;
    text-align: center;
}
.newsletter-signup input[type=email],
.newsletter-box .newsletter-email {
    padding: 12px 13px;
    border: 1.5px solid #263042;
    border-radius: 6px;
    background: #181c2a;
    color: #e0f1ff;
    width: 74%;
    font-size: 1.11em;
    margin-bottom: 12px;
    outline: none;
}
.newsletter-box .newsletter-email { width: 93%; }
.newsletter-signup button,
.newsletter-box button[type="submit"] {
    background: #27ae60;
    color: #fff;
    padding: 12px 23px;
    font-size: 1.07em;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    transition: background 0.15s;
}
.newsletter-signup button:hover,
.newsletter-box button[type="submit"]:hover {
    background: #229954;
}
.newsletter-signup .msg,
.newsletter-box .newsletter-msg {
    margin-top: 10px;
    font-size: 1.05em;
    color: #70e7b6;
    min-height: 22px;
}
.newsletter-box .newsletter-title {
    color: #FFF;
    font-family: 'Courier New', monospace;
    font-size: 1.18em;
    font-weight: 700;
    margin-bottom: 13px;
}
.newsletter-box .newsletter-info {
    color: #84b3f7;
    font-size: 0.99em;
    margin-top: 7px;
}

/* ---------- ABOUT/WHY SECTION ---------- */
.about-section,
.why-section {
    max-width: 730px;
    margin: 58px auto 0 auto;
    padding: 0 16px;
    text-align: center;
}
.about-section h2,
.why-section .why-title {
    font-size: 1.23em;
    color: #8fd0ff;
    font-weight: 700;
    margin-bottom: 13px;
    font-family: 'Courier New', monospace;
}
.about-section p,
.why-section .why-desc {
    color: #cfe5ff;
    font-size: 1.06em;
    margin-bottom: 0;
}
.why-section .why-desc em { color: #9be9ff; }

/* ---------- FOOTER ---------- */
.Homefooter {
    margin-top: 48px;
    padding: 18px 8vw 22px 8vw;
    background: #181a21;
    color: #7db2ec;
    font-size: 1.01em;
    text-align: center;
    border-top: 1.5px solid #2b344e;
    letter-spacing: 0.01em;
}
.Homefooter a {
    color: #8fd0ff;
    text-decoration: none;
    margin: 0 8px;
    font-size: 1em;
    font-weight: 500;
    transition: color 0.17s;
}
.Homefooter a:hover { color: #fff; text-decoration: none; }
.Homefooter .emoji {
    font-size: 1.14em;
    margin-right: 3px;
    vertical-align: -2px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 660px) {
    .landing-header img,
    .home-header .llm-logo {
        width: 56px;
        height: 56px;
        max-width: 30vw;
        margin: 0 auto 0 auto; /* Center horizontally on mobile */
    }
}
@media (max-width: 420px) {
    .landing-header img,
    .home-header .llm-logo {
        width: 44px;
        height: 44px;
        max-width: 40vw;
    }
}

H3  {color: #fff;font-family: 'Courier New', monospace;margin-top: 0px;margin-bottom:0px;font-size:1.05em;font-weight:600;text-align:center;padding:5px;border-bottom:2px solid #464652; padding-top: 0px;}
.newsletter-msg-top {
    position: sticky;  /* keeps it visible at the top as you scroll */
    top: 0;
    left: 0;
    z-index: 1001;
    margin: 0 auto 0 auto;
    max-width: 100vw;
    background: #232842;
    color: #65ecb4;
    border-radius: 0 0 15px 15px;
    padding: 20px 30px 15px 30px;
    text-align: center;
    font-size: 1.13em;
    font-family: 'Fira Mono', monospace;
    font-weight: 500;
    box-shadow: 0 2px 14px #1e2d4e82;
    transition: opacity 0.6s;
    opacity: 1;
}
.newsletter-msg-top.fade-out {
    opacity: 0;
}
.glass-header {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 900px;
    margin: 10px auto 10px auto;
    padding: 0px 10px 30px 10px;
    background: rgba(36, 45, 70, 0.45); /* semi-transparent bluish */
    border-radius: 22px;
    box-shadow: 0 8px 32px 0 rgba(25,40,72,0.22);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1.2px solid rgba(150, 200, 255, 0.19);
    position: relative;
    z-index: 10;
    transition: box-shadow 0.18s;
}
.glass-header img {
    width: 64px;
    height: 64px;
    border-radius: 13px;
    box-shadow: 0 2px 12px #1118;
    background: #25314a70;
    border: 1px solid #2555aa22;
}
.glass-header .tagline {
    font-family: 'Courier New',monospace;
    font-size: 1.65em;
    font-weight: 700;
    color: #8fd0ff;
}
.glass-header .subline {
    color: #b2d8fe;
    font-size: 1.06em;
    display: block;
    margin-top: 4px;
}
.glass-header .version-badge {
    background: #242733cc;
    color: #94c8fd;
    border-radius: 8px;
    padding: 5px 17px;
    font-size: 1.05em;
    margin-left: 10px;
    vertical-align: middle;
    display: inline-block;
    font-family: 'Fira Mono',monospace;
    font-weight: 600;
    margin-top: 10px;
}
@media (max-width: 700px) {
    .glass-header {
        flex-direction: column;
        text-align: center;
        padding: 0px 8vw 18px 8vw;
        gap: 12px;
    }
    .glass-header img { margin: 0 auto; }
}
@media (max-width: 300px) {
    .glass-header {
        flex-direction: column;
        text-align: center;
        padding: 0px 8vw 18px 8vw;
        gap: 12px;
    }
    .glass-header img { margin: 0 auto; }
}
 .screenshots-placeholder-card {
        max-width: 500px;
        margin: 58px auto 0 auto;
        padding: 38px 28px 34px 28px;
        background: rgba(36, 45, 70, 0.42);
        border-radius: 22px;
        box-shadow: 0 4px 36px #1b253680, 0 2px 14px #161c2551;
        backdrop-filter: blur(9px) saturate(150%);
        -webkit-backdrop-filter: blur(9px) saturate(150%);
        border: 1.1px solid rgba(150,200,255,0.14);
        text-align: center;
        position: relative;
        z-index: 5;
        color: #cfe5ff;
    }
    .screenshots-placeholder-card h2 {
        color: #89e6ff;
        font-family: 'Courier New', monospace;
        font-size: 1.22em;
        font-weight: 700;
        margin: 12px 0 8px 0;
    }
    .screenshots-placeholder-emoji {
        font-size: 2.6em;
        margin-bottom: 10px;
        filter: drop-shadow(0 2px 10px #0af4ff2a);
    }
    .screenshots-preview-row {
        display: flex;
        gap: 16px;
        justify-content: center;
        margin-top: 32px;
    }
    .screenshots-thumb {
        width: 94px;
        height: 64px;
        background: #16223a;
        border-radius: 11px;
        box-shadow: 0 1px 10px #10182850;
        display: inline-block;
        opacity: 0.52;
        position: relative;
        overflow: hidden;
    }
    .screenshots-thumb.loading::before {
        content: '';
        display: block;
        width: 54%;
        height: 130%;
        position: absolute;
        top: -15%;
        left: 25%;
        background: linear-gradient(100deg, #23345777 38%, #2b3c59cc 52%, #17374c59 90%);
        animation: shine 1.4s infinite linear;
        z-index: 2;
        border-radius: 13px;
        opacity: 0.8;
    }
    @keyframes shine {
        0% { transform: translateX(-90%); }
        100% { transform: translateX(120%); }
    }
    @media (max-width: 560px) {
        .screenshots-placeholder-card { padding: 16px 5vw 14px 5vw; }
        .screenshots-preview-row { gap: 7px; }
        .screenshots-thumb { width: 60px; height: 42px; }
    }
    .llm-logo {
  opacity: 0;
  filter: grayscale(1) brightness(0.3) blur(2px);
  transition:
    opacity 0.4s cubic-bezier(0.36, 1.6, 0.3, 1),
    filter 0.8s cubic-bezier(0.36, 1.6, 0.3, 1);
  will-change: opacity, filter;
}

/* Animate the logo on load */
.llm-logo.power-on {
  opacity: 1;
  filter: grayscale(0) brightness(1.18) blur(0);
  box-shadow: 0 0 22px 4px #10d2ffcc, 0 0 54px 0 #107bff33;
  /* Optional: add a subtle “glow” effect */
  animation: llmPulse 1.4s cubic-bezier(0.5, 1.6, 0.3, 1) 1;
}

/* Glow pulse keyframes */
@keyframes llmPulse {
  0%   { box-shadow: 0 0 0 0 #10d2ff44, 0 0 0 0 #107bff22; }
  40%  { box-shadow: 0 0 18px 4px #10d2ff99, 0 0 32px 0 #107bff44; }
  70%  { box-shadow: 0 0 44px 10px #10d2ffff, 0 0 70px 0 #107bff66; }
  100% { box-shadow: 0 0 22px 4px #10d2ffcc, 0 0 54px 0 #107bff33; }
}