/* [Previous CSS from last answer...] */
/* Add or replace with the following new/updated styles */

/* Ensure you have the previous CSS, then add/modify these sections */

/* ==================
   MODAL STYLES
   ================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    background-color: var(--bg-medium);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 400px;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal-overlay.visible .modal-content {
    transform: scale(1);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    color: var(--text-primary);
}
.close-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 28px;
    cursor: pointer;
}
.setting-item {
    margin-bottom: 20px;
}
.setting-item label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-secondary);
}
.setting-item select {
    width: 100%;
    padding: 10px;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px;
}
.theme-options {
    display: flex;
    gap: 10px;
}
.theme-option {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s, border-color 0.2s;
}
.theme-option.active {
    border-color: var(--accent-blue);
    background-color: rgba(58, 134, 255, 0.1);
}
.theme-option:hover:not(.active) {
    background-color: var(--bg-light);
}

/* ==================
   MESSAGE & WIDGET STYLES
   ================== */
.message-content strong {
    font-weight: 600;
    color: var(--accent-blue);
}
body.light-mode .message-content strong {
    color: #2a68d1;
}

@keyframes widget-pop-in {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.widget {
    background: linear-gradient(135deg, #2a2d35, #23272f);
    border-radius: 12px;
    padding: 16px;
    margin-top: 10px;
    border: 1px solid var(--border-color);
    animation: widget-pop-in 0.4s ease-out;
}
body.light-mode .widget {
    background: linear-gradient(135deg, #eef2f7, #ffffff);
}

/* Weather Widget */
.weather-widget {
    display: flex;
    align-items: center;
    gap: 16px;
}
.weather-widget .icon {
    font-size: 48px;
    color: var(--accent-yellow);
}
@keyframes cloud-move {
    0% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    100% { transform: translateX(-5px); }
}
.weather-widget .icon .ph-cloud {
    animation: cloud-move 5s ease-in-out infinite;
}
.weather-widget .details .location {
    font-size: 18px;
    font-weight: 600;
}
.weather-widget .details .temp {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: var(--text-primary);
}
.weather-widget .details .condition {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Time Widget */
.time-widget {
    text-align: center;
}
.time-widget .time {
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--accent-green);
}
.time-widget .date {
    color: var(--text-secondary);
}

/* Volcano Widget */
.volcano-widget {
    display: flex;
    flex-direction: column;
}
.volcano-widget .header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.volcano-widget .header .icon {
    font-size: 32px;
    color: var(--accent-red);
}
.volcano-widget .name {
    font-size: 18px;
    font-weight: 600;
}
.volcano-widget .status {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
}
.volcano-widget .status.active {
    background-color: var(--accent-red);
    animation: pulse 2s infinite;
}
.volcano-widget .status.dormant {
    background-color: var(--accent-green);
}
.volcano-widget .info {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

/* Ensure the rest of your CSS from the previous answer is here */
:root{--bg-dark:#121212;--bg-medium:#1e1e1e;--bg-light:#252526;--border-color:#333;--text-primary:#eaeaea;--text-secondary:#8a92a3;--shadow-color:rgba(0,0,0,0.2);--accent-blue:#3a86ff;--accent-green:#34d399;--accent-yellow:#fbbf24;--accent-red:#f43f5e;--font-family:'Inter',sans-serif}body.light-mode{--bg-dark:#f4f7fc;--bg-medium:#fff;--bg-light:#fff;--border-color:#e0e0e0;--text-primary:#1a1c23;--text-secondary:#5f6368;--shadow-color:rgba(0,0,0,0.05)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--bg-dark);color:var(--text-primary);display:flex;justify-content:center;align-items:center;height:100vh;padding:20px;transition:background-color .3s ease,color .3s ease}.dashboard-container{display:grid;grid-template-columns:280px 1fr 320px;gap:20px;width:100%;max-width:1600px;height:95vh;max-height:900px;background-color:var(--bg-medium);border-radius:20px;padding:20px;border:1px solid var(--border-color);transition:background-color .3s ease,border-color .3s ease}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:3px}.logo{display:flex;align-items:center;gap:12px}.logo i{font-size:28px;color:var(--accent-blue)}.logo h3{font-size:16px;color:var(--text-primary);font-weight:600}.logo p{font-size:12px;color:var(--text-secondary)}.card{background-color:var(--bg-light);border-radius:12px;padding:16px;border:1px solid var(--border-color);box-shadow:0 2px 10px var(--shadow-color);transition:background-color .3s ease,border-color .3s ease}.card-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.card-header i{font-size:20px;color:var(--text-secondary)}.card-header h3{font-size:14px;font-weight:600;color:var(--text-primary)}.card-header p{font-size:12px;color:var(--text-secondary)}.left-sidebar{display:flex;flex-direction:column;justify-content:space-between;gap:20px}.data-summary{display:flex;justify-content:space-around;text-align:center}.summary-item span{font-size:12px;color:var(--text-secondary)}.summary-item strong{display:block;font-size:20px;font-weight:600}.nav-header{display:flex;align-items:center;gap:12px;padding:10px;cursor:pointer;border-radius:8px;transition:background-color .2s}.nav-header:hover{background-color:var(--bg-dark)}.nav-header i{color:var(--text-secondary)}.nav-header span{flex-grow:1;font-weight:500}.caret-icon{transition:transform .3s ease}.nav-content{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-in,margin-top .4s ease-out}.nav-section.open>.nav-content{max-height:500px;opacity:1;margin-top:8px}.nav-section.open>.nav-header .ph-caret-right{transform:rotate(90deg)}.nav-list{list-style:none;padding-left:20px}.nav-list li{margin-bottom:12px}.nav-list a{color:var(--text-primary);text-decoration:none;font-size:14px;display:flex;justify-content:space-between;align-items:center}.nav-list a:hover{color:var(--accent-blue)}.nav-list small{color:var(--text-secondary);font-size:12px;padding-left:10px}.badge{font-size:10px;padding:2px 8px;border-radius:12px;font-weight:600;text-transform:uppercase}.badge.active{background-color:rgba(52,211,153,.1);color:var(--accent-green)}.badge.maintenance{background-color:rgba(251,191,36,.1);color:var(--accent-yellow)}.sidebar-footer{border-top:1px solid var(--border-color);padding-top:16px}.user-profile{display:flex;align-items:center;gap:12px}.user-profile>i{font-size:36px;color:var(--text-secondary)}.user-info p{font-weight:600}.user-info a{font-size:12px;color:var(--text-secondary);text-decoration:none}.user-info a:hover{color:var(--accent-blue)}#theme-toggle{margin-left:auto;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;justify-content:center;align-items:center}#theme-toggle i{font-size:20px;color:var(--text-secondary)}#theme-toggle .ph-sun{display:none}body.light-mode #theme-toggle .ph-sun{display:block}body.light-mode #theme-toggle .ph-moon{display:none}.chat-container{display:flex;flex-direction:column;background-color:var(--bg-light);border-radius:12px}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-color)}.status{font-size:12px;font-weight:500;color:var(--accent-green);background-color:rgba(52,211,153,.1);padding:4px 10px;border-radius:12px;border:1px solid var(--accent-green)}.chat-messages{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message{display:flex;gap:12px;max-width:80%;animation:fadeIn .5s ease-out}.message-icon{font-size:24px;flex-shrink:0;margin-top:4px}.ai-message{align-self:flex-start}.ai-message .message-icon{color:var(--text-secondary)}.ai-message .message-content{background-color:var(--bg-medium);border-radius:0 12px 12px 12px;padding:12px 16px}.user-message{align-self:flex-end;flex-direction:row-reverse}.user-message .message-content{background-color:var(--accent-blue);color:#fff;border-radius:12px 0 12px 12px;padding:12px 16px}body.light-mode .user-message .message-content{color:#fff}.message-content p,.message-content ul{margin-bottom:10px;line-height:1.6}.message-content p:last-child,.message-content ul:last-child{margin-bottom:0}.message-content ul{padding-left:20px}.message-content ul li{margin-bottom:5px}.timestamp{display:block;text-align:right;font-size:10px;color:var(--text-secondary);margin-top:8px}.user-message .timestamp{color:rgba(255,255,255,.7)}body.light-mode .user-message .timestamp{color:rgba(255,255,255,.8)}.sources{margin-top:15px;border-top:1px solid var(--border-color);padding-top:10px}.sources span{font-size:12px;font-weight:500;color:var(--text-secondary);margin-right:10px}.sources a{font-size:12px;color:var(--accent-blue);text-decoration:none;background-color:rgba(58,134,255,.1);padding:4px 8px;border-radius:6px;margin-right:5px;transition:background-color .2s}.sources a:hover{background-color:rgba(58,134,255,.2)}.sources i{vertical-align:middle;margin-right:4px}.chat-input-area{padding:12px 16px;border-top:1px solid var(--border-color)}.chat-input-area form{display:flex;align-items:center;background-color:var(--bg-medium);border-radius:12px;padding:0 5px 0 10px;border:1px solid var(--border-color);transition:border-color .2s}.chat-input-area form:focus-within{border-color:var(--accent-blue)}.attach-button,#send-button{background:0 0;border:none;cursor:pointer;padding:10px}.attach-button i,#send-button i{color:var(--text-secondary);font-size:20px;transition:color .2s}#send-button i{color:var(--accent-blue)}.attach-button:hover i,#send-button:hover i{color:var(--accent-blue)}#user-input{flex-grow:1;background:0 0;border:none;outline:0;color:var(--text-primary);padding:14px;font-size:14px}#user-input::placeholder{color:var(--text-secondary)}.typing-indicator span{height:8px;width:8px;margin:0 2px;background-color:var(--text-secondary);display:inline-block;border-radius:50%;opacity:.4;animation:bounce 1s infinite}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}.right-sidebar{display:flex;flex-direction:column;gap:20px;overflow-y:auto}.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.analytic-item span{font-size:12px;color:var(--text-secondary)}.analytic-item strong{display:block;font-size:24px;font-weight:600}.health-item{margin-bottom:12px}.health-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}.progress-bar{width:100%;height:6px;background-color:var(--bg-medium);border-radius:3px;overflow:hidden}.progress{height:100%;background-color:var(--accent-blue);border-radius:3px;width:0;transition:width 1s ease-out .5s}.popular-queries ul,.recent-activity ul{list-style:none}.popular-queries li,.recent-activity li{margin-bottom:12px}.popular-queries a{color:var(--text-secondary);text-decoration:none;font-size:13px;font-weight:500;display:block}.popular-queries a:hover{color:var(--accent-blue)}.popular-queries small{display:block;font-size:11px;margin-top:4px}.popular-queries small i{font-size:10px;vertical-align:middle}.ph-trend-up{color:var(--accent-green)}.ph-trend-down{color:var(--accent-red)}.recent-activity li{display:flex;align-items:center;gap:12px}.recent-activity i{color:var(--text-secondary);font-size:18px}.recent-activity span{font-size:13px;color:var(--text-primary)}.recent-activity small{display:block;font-size:11px;color:var(--text-secondary)}.recent-activity time{margin-left:auto;font-size:11px;color:var(--text-secondary)}/* [Copy ALL CSS from the previous answer, then ADD the following at the end] */
/* Or, replace the entire file with this complete version */

/* [PREVIOUS CSS STYLES...] */

/* =================================
   LAYOUT FIXES & RESPONSIVENESS
   ================================= */

/* Fix for chat area scrolling */
.chat-container {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-light);
    border-radius: 12px;
    overflow: hidden; /* Prevent parent from growing */
}

/* Make chat message list the scrollable element */
.chat-messages {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto; /* Allow this to scroll */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 1200px) {
    .dashboard-container {
        grid-template-columns: 260px 1fr;
        grid-template-areas:
            "left main"
            "right main";
        height: auto;
        max-height: none;
        padding: 10px;
    }
    .left-sidebar { grid-area: left; }
    .chat-container { grid-area: main; }
    .right-sidebar { grid-area: right; }
}

@media (max-width: 768px) {
    body {
        padding: 0;
    }
    .dashboard-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "left"
            "right";
        border-radius: 0;
        height: 100vh;
        padding: 0;
        gap: 0;
        border: none;
    }
    .sidebar, .chat-container {
        border-radius: 0;
    }
    .left-sidebar, .right-sidebar {
        padding: 16px;
        overflow-y: visible;
    }
}


/* ==================
   NEW: FACT CARD WIDGET
   Inspired by the Apollo 11 image
   ================== */
:root {
    /* Add these new variables to your :root selector */
    --bg-card-vintage: #FDF6E3;
    --text-card-vintage: #2C3E50;
    --border-card-vintage: #D1C7B8;
}

body.light-mode {
    /* No change needed for light mode, it will use the default vintage colors */
}

/* The card itself has a unique, standout style */
.fact-card {
    background-color: var(--bg-card-vintage);
    color: var(--text-card-vintage);
    border: 1px solid var(--border-card-vintage);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    animation: widget-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fact-card-image-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #e0e0e0;
    overflow: hidden;
}

.fact-card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.fact-card:hover .fact-card-image-container img {
    transform: scale(1.05);
}

.fact-card-content {
    padding: 20px;
}

.fact-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-card-vintage);
}

.fact-card-details {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.detail-item {
    display: flex;
    font-size: 15px;
    line-height: 1.5;
}

.detail-item .label {
    font-weight: 600;
    width: 100px; /* Aligns the values */
    flex-shrink: 0;
    color: #596e81;
}

.detail-item .value {
    font-weight: 400;
}

.fact-card-summary {
    font-size: 15px;
    line-height: 1.7;
    border-top: 1px solid var(--border-card-vintage);
    padding-top: 16px;
}
/* Ensure to include all previous CSS as well */
:root{--bg-dark:#121212;--bg-medium:#1e1e1e;--bg-light:#252526;--border-color:#333;--text-primary:#eaeaea;--text-secondary:#8a92a3;--shadow-color:rgba(0,0,0,0.2);--accent-blue:#3a86ff;--accent-green:#34d399;--accent-yellow:#fbbf24;--accent-red:#f43f5e;--font-family:'Inter',sans-serif;--bg-card-vintage:#fdf6e3;--text-card-vintage:#2c3e50;--border-card-vintage:#d1c7b8}body.light-mode{--bg-dark:#f4f7fc;--bg-medium:#fff;--bg-light:#fff;--border-color:#e0e0e0;--text-primary:#1a1c23;--text-secondary:#5f6368;--shadow-color:rgba(0,0,0,0.05)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--bg-dark);color:var(--text-primary);display:flex;justify-content:center;align-items:center;height:100vh;padding:20px;transition:background-color .3s ease,color .3s ease}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:3px}.logo{display:flex;align-items:center;gap:12px}.logo i{font-size:28px;color:var(--accent-blue)}.logo h3{font-size:16px;color:var(--text-primary);font-weight:600}.logo p{font-size:12px;color:var(--text-secondary)}.card{background-color:var(--bg-light);border-radius:12px;padding:16px;border:1px solid var(--border-color);box-shadow:0 2px 10px var(--shadow-color);transition:background-color .3s ease,border-color .3s ease}.card-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.card-header i{font-size:20px;color:var(--text-secondary)}.card-header h3{font-size:14px;font-weight:600;color:var(--text-primary)}.card-header p{font-size:12px;color:var(--text-secondary)}.left-sidebar{display:flex;flex-direction:column;justify-content:space-between;gap:20px}.data-summary{display:flex;justify-content:space-around;text-align:center}.summary-item span{font-size:12px;color:var(--text-secondary)}.summary-item strong{display:block;font-size:20px;font-weight:600}.nav-header{display:flex;align-items:center;gap:12px;padding:10px;cursor:pointer;border-radius:8px;transition:background-color .2s}.nav-header:hover{background-color:var(--bg-dark)}.nav-header i{color:var(--text-secondary)}.nav-header span{flex-grow:1;font-weight:500}.caret-icon{transition:transform .3s ease}.nav-content{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-in,margin-top .4s ease-out}.nav-section.open>.nav-content{max-height:500px;opacity:1;margin-top:8px}.nav-section.open>.nav-header .ph-caret-right{transform:rotate(90deg)}.nav-list{list-style:none;padding-left:20px}.nav-list li{margin-bottom:12px}.nav-list a{color:var(--text-primary);text-decoration:none;font-size:14px;display:flex;justify-content:space-between;align-items:center}.nav-list a:hover{color:var(--accent-blue)}.nav-list small{color:var(--text-secondary);font-size:12px;padding-left:10px}.badge{font-size:10px;padding:2px 8px;border-radius:12px;font-weight:600;text-transform:uppercase}.badge.active{background-color:rgba(52,211,153,.1);color:var(--accent-green)}.badge.maintenance{background-color:rgba(251,191,36,.1);color:var(--accent-yellow)}.sidebar-footer{border-top:1px solid var(--border-color);padding-top:16px}.user-profile{display:flex;align-items:center;gap:12px}.user-profile>i{font-size:36px;color:var(--text-secondary)}.user-info p{font-weight:600}.user-info a{font-size:12px;color:var(--text-secondary);text-decoration:none}.user-info a:hover{color:var(--accent-blue)}#theme-toggle{margin-left:auto;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;justify-content:center;align-items:center}#theme-toggle i{font-size:20px;color:var(--text-secondary)}#theme-toggle .ph-sun{display:none}body.light-mode #theme-toggle .ph-sun{display:block}body.light-mode #theme-toggle .ph-moon{display:none}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1000}.modal-overlay.visible{opacity:1;visibility:visible}.modal-content{background-color:var(--bg-medium);padding:24px;border-radius:16px;border:1px solid var(--border-color);width:100%;max-width:400px;transform:scale(.95);transition:transform .3s ease}.modal-overlay.visible .modal-content{transform:scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;color:var(--text-primary)}.close-button{background:0 0;border:none;color:var(--text-secondary);font-size:28px;cursor:pointer}.setting-item{margin-bottom:20px}.setting-item label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-secondary)}.setting-item select{width:100%;padding:10px;background-color:var(--bg-dark);border:1px solid var(--border-color);color:var(--text-primary);border-radius:8px}.theme-options{display:flex;gap:10px}.theme-option{flex:1;padding:10px;border-radius:8px;background-color:var(--bg-dark);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color .2s,border-color .2s}.theme-option.active{border-color:var(--accent-blue);background-color:rgba(58,134,255,.1)}.theme-option:hover:not(.active){background-color:var(--bg-light)}.message-content strong{font-weight:600;color:var(--accent-blue)}body.light-mode .message-content strong{color:#2a68d1}@keyframes widget-pop-in{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.widget{background:linear-gradient(135deg,#2a2d35,#23272f);border-radius:12px;padding:16px;margin-top:10px;border:1px solid var(--border-color);animation:widget-pop-in .4s ease-out}body.light-mode .widget{background:linear-gradient(135deg,#eef2f7,#fff)}.weather-widget{display:flex;align-items:center;gap:16px}.weather-widget .icon{font-size:48px;color:var(--accent-yellow)}@keyframes cloud-move{0%{transform:translateX(-5px)}50%{transform:translateX(5px)}100%{transform:translateX(-5px)}}.weather-widget .icon .ph-cloud{animation:cloud-move 5s ease-in-out infinite}.weather-widget .details .location{font-size:18px;font-weight:600}.weather-widget .details .temp{font-size:28px;font-weight:700;font-family:'Poppins',sans-serif;color:var(--text-primary)}.weather-widget .details .condition{font-size:14px;color:var(--text-secondary)}.time-widget{text-align:center}.time-widget .time{font-family:'Poppins',sans-serif;font-size:40px;font-weight:600;letter-spacing:2px;color:var(--accent-green)}.time-widget .date{color:var(--text-secondary)}.volcano-widget{display:flex;flex-direction:column}.volcano-widget .header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.volcano-widget .header .icon{font-size:32px;color:var(--accent-red)}.volcano-widget .name{font-size:18px;font-weight:600}.volcano-widget .status{font-size:12px;font-weight:700;color:#fff;padding:3px 8px;border-radius:12px;text-transform:uppercase}.volcano-widget .status.active{background-color:var(--accent-red);animation:pulse 2s infinite}.volcano-widget .status.dormant{background-color:var(--accent-green)}.volcano-widget .info{font-size:14px;color:var(--text-secondary);line-height:1.5}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,63,94,.7)}70%{box-shadow:0 0 0 10px rgba(244,63,94,0)}100%{box-shadow:0 0 0 0 rgba(244,63,94,0)}}.chat-container{display:flex;flex-direction:column;background-color:var(--bg-light);border-radius:12px;overflow:hidden}.chat-messages{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}@media (max-width:1200px){.dashboard-container{grid-template-columns:260px 1fr;grid-template-areas:"left main" "right main";height:auto;max-height:none;padding:10px}.left-sidebar{grid-area:left}.chat-container{grid-area:main}.right-sidebar{grid-area:right}}@media (max-width:768px){body{padding:0}.dashboard-container{grid-template-columns:1fr;grid-template-areas:"main" "left" "right";border-radius:0;height:100vh;padding:0;gap:0;border:none}.sidebar,.chat-container{border-radius:0}.left-sidebar,.right-sidebar{padding:16px;overflow-y:visible}}.fact-card{background-color:var(--bg-card-vintage);color:var(--text-card-vintage);border:1px solid var(--border-card-vintage);border-radius:12px;overflow:hidden;margin-top:10px;box-shadow:0 4px 15px rgba(0,0,0,.1);animation:widget-pop-in .5s cubic-bezier(.175,.885,.32,1.275)}.fact-card-image-container{width:100%;aspect-ratio:16/9;background-color:#e0e0e0;overflow:hidden}.fact-card-image-container img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.fact-card:hover .fact-card-image-container img{transform:scale(1.05)}.fact-card-content{padding:20px}.fact-card-title{font-family:'Poppins',sans-serif;font-size:28px;font-weight:600;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px;color:var(--text-card-vintage)}.fact-card-details{display:grid;gap:12px;margin-bottom:16px}.detail-item{display:flex;font-size:15px;line-height:1.5}.detail-item .label{font-weight:600;width:100px;flex-shrink:0;color:#596e81}.detail-item .value{font-weight:400}.fact-card-summary{font-size:15px;line-height:1.7;border-top:1px solid var(--border-card-vintage);padding-top:16px}/* [Copy ALL CSS from the previous answer, then ADD/REPLACE the following] */
/* Or, for simplicity, replace the entire style.css file with this new version. */

/* ==================
   NEW: INFO CARD WIDGET (REPLACES FACT-CARD)
   Sleek, modern, theme-matching design.
   ================== */
@keyframes card-pop-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.info-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 10px;
    background-color: var(--bg-medium);
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 450px; /* More compact size */
    animation: card-pop-in 0.4s ease-out;
}

.info-card .card-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    filter: blur(15px) brightness(0.6);
    transform: scale(1.2); /* Ensure blur covers edges */
}

.info-card .card-content {
    position: relative; /* Sits on top of the blurred background */
    padding: 16px;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.8) 100%);
    color: #FFFFFF;
    display: flex;
    gap: 16px;
}

body.light-mode .info-card .card-content {
    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.8) 100%);
    color: var(--text-primary);
}

.info-card .card-image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255,255,255,0.5);
}

.info-card .card-text {
    display: flex;
    flex-direction: column;
}

.info-card .card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #FFFFFF;
}

body.light-mode .info-card .card-title {
    color: var(--text-primary);
}

.info-card .card-subtitle {
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-blue);
    margin-bottom: 8px;
}

.info-card .card-summary {
    font-size: 14px;
    line-height: 1.5;
    color: #E0E0E0;
    margin-top: auto; /* Pushes it down */
}

body.light-mode .info-card .card-summary {
    color: var(--text-secondary);
}

/* Ensure all previous styles from the last version are also included */
:root{--bg-dark:#121212;--bg-medium:#1e1e1e;--bg-light:#252526;--border-color:#333;--text-primary:#eaeaea;--text-secondary:#8a92a3;--shadow-color:rgba(0,0,0,0.2);--accent-blue:#3a86ff;--accent-green:#34d399;--accent-yellow:#fbbf24;--accent-red:#f43f5e;--font-family:'Inter',sans-serif;--bg-card-vintage:#fdf6e3;--text-card-vintage:#2c3e50;--border-card-vintage:#d1c7b8}body.light-mode{--bg-dark:#f4f7fc;--bg-medium:#fff;--bg-light:#fff;--border-color:#e0e0e0;--text-primary:#1a1c23;--text-secondary:#5f6368;--shadow-color:rgba(0,0,0,0.05)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--bg-dark);color:var(--text-primary);display:flex;justify-content:center;align-items:center;height:100vh;padding:20px;transition:background-color .3s ease,color .3s ease}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:3px}.logo{display:flex;align-items:center;gap:12px}.logo i{font-size:28px;color:var(--accent-blue)}.logo h3{font-size:16px;color:var(--text-primary);font-weight:600}.logo p{font-size:12px;color:var(--text-secondary)}.card{background-color:var(--bg-light);border-radius:12px;padding:16px;border:1px solid var(--border-color);box-shadow:0 2px 10px var(--shadow-color);transition:background-color .3s ease,border-color .3s ease}.card-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.card-header i{font-size:20px;color:var(--text-secondary)}.card-header h3{font-size:14px;font-weight:600;color:var(--text-primary)}.card-header p{font-size:12px;color:var(--text-secondary)}.left-sidebar{display:flex;flex-direction:column;justify-content:space-between;gap:20px}.data-summary{display:flex;justify-content:space-around;text-align:center}.summary-item span{font-size:12px;color:var(--text-secondary)}.summary-item strong{display:block;font-size:20px;font-weight:600}.nav-header{display:flex;align-items:center;gap:12px;padding:10px;cursor:pointer;border-radius:8px;transition:background-color .2s}.nav-header:hover{background-color:var(--bg-dark)}.nav-header i{color:var(--text-secondary)}.nav-header span{flex-grow:1;font-weight:500}.caret-icon{transition:transform .3s ease}.nav-content{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-in,margin-top .4s ease-out}.nav-section.open>.nav-content{max-height:500px;opacity:1;margin-top:8px}.nav-section.open>.nav-header .ph-caret-right{transform:rotate(90deg)}.nav-list{list-style:none;padding-left:20px}.nav-list li{margin-bottom:12px}.nav-list a{color:var(--text-primary);text-decoration:none;font-size:14px;display:flex;justify-content:space-between;align-items:center}.nav-list a:hover{color:var(--accent-blue)}.nav-list small{color:var(--text-secondary);font-size:12px;padding-left:10px}.badge{font-size:10px;padding:2px 8px;border-radius:12px;font-weight:600;text-transform:uppercase}.badge.active{background-color:rgba(52,211,153,.1);color:var(--accent-green)}.badge.maintenance{background-color:rgba(251,191,36,.1);color:var(--accent-yellow)}.sidebar-footer{border-top:1px solid var(--border-color);padding-top:16px}.user-profile{display:flex;align-items:center;gap:12px}.user-profile>i{font-size:36px;color:var(--text-secondary)}.user-info p{font-weight:600}.user-info a{font-size:12px;color:var(--text-secondary);text-decoration:none}.user-info a:hover{color:var(--accent-blue)}#theme-toggle{margin-left:auto;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;justify-content:center;align-items:center}#theme-toggle i{font-size:20px;color:var(--text-secondary)}#theme-toggle .ph-sun{display:none}body.light-mode #theme-toggle .ph-sun{display:block}body.light-mode #theme-toggle .ph-moon{display:none}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1000}.modal-overlay.visible{opacity:1;visibility:visible}.modal-content{background-color:var(--bg-medium);padding:24px;border-radius:16px;border:1px solid var(--border-color);width:100%;max-width:400px;transform:scale(.95);transition:transform .3s ease}.modal-overlay.visible .modal-content{transform:scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;color:var(--text-primary)}.close-button{background:0 0;border:none;color:var(--text-secondary);font-size:28px;cursor:pointer}.setting-item{margin-bottom:20px}.setting-item label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-secondary)}.setting-item select{width:100%;padding:10px;background-color:var(--bg-dark);border:1px solid var(--border-color);color:var(--text-primary);border-radius:8px}.theme-options{display:flex;gap:10px}.theme-option{flex:1;padding:10px;border-radius:8px;background-color:var(--bg-dark);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color .2s,border-color .2s}.theme-option.active{border-color:var(--accent-blue);background-color:rgba(58,134,255,.1)}.theme-option:hover:not(.active){background-color:var(--bg-light)}.message-content strong{font-weight:600;color:var(--accent-blue)}body.light-mode .message-content strong{color:#2a68d1}@keyframes widget-pop-in{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.widget{background:linear-gradient(135deg,#2a2d35,#23272f);border-radius:12px;padding:16px;margin-top:10px;border:1px solid var(--border-color);animation:widget-pop-in .4s ease-out}body.light-mode .widget{background:linear-gradient(135deg,#eef2f7,#fff)}.weather-widget{display:flex;align-items:center;gap:16px}.weather-widget .icon{font-size:48px;color:var(--accent-yellow)}@keyframes cloud-move{0%{transform:translateX(-5px)}50%{transform:translateX(5px)}100%{transform:translateX(-5px)}}.weather-widget .icon .ph-cloud{animation:cloud-move 5s ease-in-out infinite}.weather-widget .details .location{font-size:18px;font-weight:600}.weather-widget .details .temp{font-size:28px;font-weight:700;font-family:'Poppins',sans-serif;color:var(--text-primary)}.weather-widget .details .condition{font-size:14px;color:var(--text-secondary)}.time-widget{text-align:center}.time-widget .time{font-family:'Poppins',sans-serif;font-size:40px;font-weight:600;letter-spacing:2px;color:var(--accent-green)}.time-widget .date{color:var(--text-secondary)}.volcano-widget{display:flex;flex-direction:column}.volcano-widget .header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.volcano-widget .header .icon{font-size:32px;color:var(--accent-red)}.volcano-widget .name{font-size:18px;font-weight:600}.volcano-widget .status{font-size:12px;font-weight:700;color:#fff;padding:3px 8px;border-radius:12px;text-transform:uppercase}.volcano-widget .status.active{background-color:var(--accent-red);animation:pulse 2s infinite}.volcano-widget .status.dormant{background-color:var(--accent-green)}.volcano-widget .info{font-size:14px;color:var(--text-secondary);line-height:1.5}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,63,94,.7)}70%{box-shadow:0 0 0 10px rgba(244,63,94,0)}100%{box-shadow:0 0 0 0 rgba(244,63,94,0)}}.chat-container{display:flex;flex-direction:column;background-color:var(--bg-light);border-radius:12px;overflow:hidden}.chat-messages{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}@media (max-width:1200px){.dashboard-container{grid-template-columns:260px 1fr;grid-template-areas:"left main" "right main";height:auto;max-height:none;padding:10px}.left-sidebar{grid-area:left}.chat-container{grid-area:main}.right-sidebar{grid-area:right}}@media (max-width:768px){body{padding:0}.dashboard-container{grid-template-columns:1fr;grid-template-areas:"main" "left" "right";border-radius:0;height:100vh;padding:0;gap:0;border:none}.sidebar,.chat-container{border-radius:0}.left-sidebar,.right-sidebar{padding:16px;overflow-y:visible}}/* [Previous CSS from last answer...] */
/* Add or replace with the following new/updated styles */

/* Ensure you have the previous CSS, then add/modify these sections */

/* ==================
   MODAL STYLES
   ================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    background-color: var(--bg-medium);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 400px;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal-overlay.visible .modal-content {
    transform: scale(1);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    color: var(--text-primary);
}
.close-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 28px;
    cursor: pointer;
}
.setting-item {
    margin-bottom: 20px;
}
.setting-item label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-secondary);
}
.setting-item select {
    width: 100%;
    padding: 10px;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px;
}
.theme-options {
    display: flex;
    gap: 10px;
}
.theme-option {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s, border-color 0.2s;
}
.theme-option.active {
    border-color: var(--accent-blue);
    background-color: rgba(58, 134, 255, 0.1);
}
.theme-option:hover:not(.active) {
    background-color: var(--bg-light);
}

/* ==================
   MESSAGE & WIDGET STYLES
   ================== */
.message-content strong {
    font-weight: 600;
    color: var(--accent-blue);
}
body.light-mode .message-content strong {
    color: #2a68d1;
}

@keyframes widget-pop-in {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.widget {
    background: linear-gradient(135deg, #2a2d35, #23272f);
    border-radius: 12px;
    padding: 16px;
    margin-top: 10px;
    border: 1px solid var(--border-color);
    animation: widget-pop-in 0.4s ease-out;
}
body.light-mode .widget {
    background: linear-gradient(135deg, #eef2f7, #ffffff);
}
.widget .icon {
    font-size: 32px;
}
.widget .header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.widget .header .icon { font-size: 24px; color: var(--accent-blue); }
.widget .header .name { font-size: 16px; font-weight: 600; }

/* Weather Widget */
.weather-widget { display: flex; align-items: center; gap: 16px; }
.weather-widget .icon { font-size: 48px; color: var(--accent-yellow); }
.weather-widget .details .location { font-size: 18px; font-weight: 600; }
.weather-widget .details .temp { font-size: 28px; font-weight: 700; color: var(--text-primary); }
.weather-widget .details .condition { font-size: 14px; color: var(--text-secondary); }

/* Time Widget */
.time-widget { text-align: center; }
.time-widget .icon { color: var(--accent-yellow); font-size: 28px; margin-bottom: 8px; }
.time-widget .time { font-family: 'Poppins', sans-serif; font-size: 40px; font-weight: 600; letter-spacing: 2px; color: var(--text-primary); }
.time-widget .date { color: var(--text-secondary); }

/* Volcano Widget */
.volcano-widget .header .icon { color: var(--accent-red); }
.volcano-widget .status { font-size: 12px; font-weight: bold; color: #fff; padding: 3px 8px; border-radius: 12px; text-transform: uppercase; }
.volcano-widget .status.active { background-color: var(--accent-red); animation: pulse 2s infinite; }
.volcano-widget .status.dormant { background-color: var(--accent-green); }
.volcano-widget .info { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin: 0; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

/* Points Widget (New) */
.points-widget ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.points-widget li {
    font-size: 14px;
    padding: 8px 0 8px 15px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    color: var(--text-secondary);
}
.points-widget li:last-child {
    border-bottom: none;
}
.points-widget li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--accent-blue);
    border-radius: 50%;
}
body.light-mode .points-widget li { color: var(--text-secondary); border-color: #e8eaf1; }

/* Table Widgets (New) */
.table-widget table {
    width: 100%;
    border-collapse: collapse;
}
.table-widget th, .table-widget td {
    padding: 10px 12px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}
.table-widget th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
}
.table-widget tbody tr:last-child td {
    border-bottom: none;
}
.diff-table-widget thead th:nth-child(2) { color: var(--accent-green); }
.diff-table-widget thead th:nth-child(3) { color: var(--accent-red); }
.diff-table-widget tbody td:nth-child(2) { color: var(--text-primary); font-weight: 500; }
.diff-table-widget tbody td:nth-child(3) { color: var(--text-primary); font-weight: 500; }
body.light-mode .table-widget th, body.light-mode .table-widget td { border-color: #e8eaf1; }
body.light-mode .table-widget th { color: #6a7c9d; }

/* ==================
   REST OF THE CSS...
   ================== */
:root{--bg-dark:#121212;--bg-medium:#1e1e1e;--bg-light:#252526;--border-color:#333;--text-primary:#eaeaea;--text-secondary:#8a92a3;--shadow-color:rgba(0,0,0,0.2);--accent-blue:#3a86ff;--accent-green:#34d399;--accent-yellow:#fbbf24;--accent-red:#f43f5e;--font-family:'Inter',sans-serif}body.light-mode{--bg-dark:#f4f7fc;--bg-medium:#fff;--bg-light:#fff;--border-color:#e0e0e0;--text-primary:#1a1c23;--text-secondary:#5f6368;--shadow-color:rgba(0,0,0,0.05)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--bg-dark);color:var(--text-primary);display:flex;justify-content:center;align-items:center;height:100vh;padding:20px;transition:background-color .3s ease,color .3s ease}.dashboard-container{display:grid;grid-template-columns:280px 1fr 320px;gap:20px;width:100%;max-width:1600px;height:95vh;max-height:900px;background-color:var(--bg-medium);border-radius:20px;padding:20px;border:1px solid var(--border-color);transition:background-color .3s ease,border-color .3s ease}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:3px}.logo{display:flex;align-items:center;gap:12px}.logo i{font-size:28px;color:var(--accent-blue)}.logo h3{font-size:16px;color:var(--text-primary);font-weight:600}.logo p{font-size:12px;color:var(--text-secondary)}.card{background-color:var(--bg-light);border-radius:12px;padding:16px;border:1px solid var(--border-color);box-shadow:0 2px 10px var(--shadow-color);transition:background-color .3s ease,border-color .3s ease}.card-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.card-header i{font-size:20px;color:var(--text-secondary)}.card-header h3{font-size:14px;font-weight:600;color:var(--text-primary)}.card-header p{font-size:12px;color:var(--text-secondary)}.left-sidebar{display:flex;flex-direction:column;justify-content:space-between;gap:20px}.data-summary{display:flex;justify-content:space-around;text-align:center}.summary-item span{font-size:12px;color:var(--text-secondary)}.summary-item strong{display:block;font-size:20px;font-weight:600}.nav-header{display:flex;align-items:center;gap:12px;padding:10px;cursor:pointer;border-radius:8px;transition:background-color .2s}.nav-header:hover{background-color:var(--bg-dark)}.nav-header i{color:var(--text-secondary)}.nav-header span{flex-grow:1;font-weight:500}.caret-icon{transition:transform .3s ease}.nav-content{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-in,margin-top .4s ease-out}.nav-section.open>.nav-content{max-height:500px;opacity:1;margin-top:8px}.nav-section.open>.nav-header .ph-caret-right{transform:rotate(90deg)}.nav-list{list-style:none;padding-left:20px}.nav-list li{margin-bottom:12px}.nav-list a{color:var(--text-primary);text-decoration:none;font-size:14px;display:flex;justify-content:space-between;align-items:center}.nav-list a:hover{color:var(--accent-blue)}.nav-list small{color:var(--text-secondary);font-size:12px;padding-left:10px}.badge{font-size:10px;padding:2px 8px;border-radius:12px;font-weight:600;text-transform:uppercase}.badge.active{background-color:rgba(52,211,153,.1);color:var(--accent-green)}.badge.maintenance{background-color:rgba(251,191,36,.1);color:var(--accent-yellow)}.sidebar-footer{border-top:1px solid var(--border-color);padding-top:16px}.user-profile{display:flex;align-items:center;gap:12px}.user-profile>i{font-size:36px;color:var(--text-secondary)}.user-info p{font-weight:600}.user-info a{font-size:12px;color:var(--text-secondary);text-decoration:none}.user-info a:hover{color:var(--accent-blue)}#theme-toggle{margin-left:auto;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;justify-content:center;align-items:center}#theme-toggle i{font-size:20px;color:var(--text-secondary)}#theme-toggle .ph-sun{display:none}body.light-mode #theme-toggle .ph-sun{display:block}body.light-mode #theme-toggle .ph-moon{display:none}.chat-container{display:flex;flex-direction:column;background-color:var(--bg-light);border-radius:12px}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-color)}.status{font-size:12px;font-weight:500;color:var(--accent-green);background-color:rgba(52,211,153,.1);padding:4px 10px;border-radius:12px;border:1px solid var(--accent-green)}.chat-messages{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message{display:flex;gap:12px;max-width:85%;animation:fadeIn .5s ease-out}.message-icon{font-size:24px;flex-shrink:0;margin-top:4px}.ai-message{align-self:flex-start}.ai-message .message-icon{color:var(--text-secondary)}.ai-message .message-content{background-color:var(--bg-medium);border-radius:0 12px 12px 12px;padding:12px 16px}.user-message{align-self:flex-end;flex-direction:row-reverse}.user-message .message-content{background-color:var(--accent-blue);color:#fff;border-radius:12px 0 12px 12px;padding:12px 16px}body.light-mode .user-message .message-content{color:#fff}.message-content p{margin-bottom:10px;line-height:1.6}.message-content p:last-child{margin-bottom:0}.timestamp{display:block;text-align:right;font-size:10px;color:var(--text-secondary);margin-top:8px;padding-left:12px}.user-message .timestamp{color:rgba(255,255,255,.7)}body.light-mode .user-message .timestamp{color:rgba(255,255,255,.8)}.chat-input-area{padding:12px 16px;border-top:1px solid var(--border-color)}.chat-input-area form{display:flex;align-items:center;background-color:var(--bg-medium);border-radius:12px;padding:0 5px 0 10px;border:1px solid var(--border-color);transition:border-color .2s}.chat-input-area form:focus-within{border-color:var(--accent-blue)}.attach-button,#send-button{background:0 0;border:none;cursor:pointer;padding:10px}.attach-button i,#send-button i{color:var(--text-secondary);font-size:20px;transition:color .2s}#send-button i{color:var(--accent-blue)}.attach-button:hover i,#send-button:hover i{color:var(--accent-blue)}#user-input{flex-grow:1;background:0 0;border:none;outline:0;color:var(--text-primary);padding:14px;font-size:14px}#user-input::placeholder{color:var(--text-secondary)}.typing-indicator span{height:8px;width:8px;margin:0 2px;background-color:var(--text-secondary);display:inline-block;border-radius:50%;opacity:.4;animation:bounce 1s infinite}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}.right-sidebar{display:flex;flex-direction:column;gap:20px;overflow-y:auto}.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.analytic-item span{font-size:12px;color:var(--text-secondary)}.analytic-item strong{display:block;font-size:24px;font-weight:600}.health-item{margin-bottom:12px}.health-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}.progress-bar{width:100%;height:6px;background-color:var(--bg-dark);border-radius:3px;overflow:hidden}.progress{height:100%;background-color:var(--accent-blue);border-radius:3px;width:0;transition:width 1s ease-out .2s}.popular-queries ul{list-style:none}.popular-queries li{margin-bottom:12px}.popular-queries a{color:var(--text-secondary);text-decoration:none;font-size:13px;font-weight:500;display:block}.popular-queries a:hover{color:var(--accent-blue)}.popular-queries small{display:block;font-size:11px;margin-top:4px}.popular-queries small i{font-size:10px;vertical-align:middle}.ph-trend-up{color:var(--accent-green)}.ph-trend-down{color:var(--accent-red)}/* ==================
   ROOT & CORE
   ================== */
:root {
    --bg-dark: #121212; --bg-medium: #1e1e1e; --bg-light: #252526;
    --border-color: #333; --text-primary: #eaeaea; --text-secondary: #8a92a3;
    --shadow-color: rgba(0,0,0,0.2); --accent-blue: #3a86ff;
    --accent-green: #34d399; --accent-yellow: #fbbf24; --accent-red: #f43f5e;
    --font-family: 'Inter', sans-serif;
}
body.light-mode {
    --bg-dark: #f4f7fc; --bg-medium: #fff; --bg-light: #fff;
    --border-color: #e0e0e0; --text-primary: #1a1c23; --text-secondary: #5f6368;
    --shadow-color: rgba(0,0,0,0.05);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--font-family); background-color: var(--bg-dark);
    color: var(--text-primary); display: flex; justify-content: center;
    align-items: center; height: 100vh; padding: 20px;
    transition: background-color .3s ease, color .3s ease;
}

/* ==================
   LAYOUT
   ================== */
.dashboard-container {
    display: grid; grid-template-columns: 280px 1fr 320px; gap: 20px;
    width: 100%; max-width: 1600px; height: 95vh; max-height: 900px;
    background-color: var(--bg-medium); border-radius: 20px; padding: 20px;
    border: 1px solid var(--border-color); transition: background-color .3s ease, border-color .3s ease;
}
.left-sidebar, .right-sidebar {
    display: flex; flex-direction: column; gap: 20px; overflow-y: auto;
}
.chat-container {
    display: flex; flex-direction: column; background-color: var(--bg-light);
    border-radius: 12px;
}
/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-secondary); border-radius: 3px; }

/* ==================
   CHAT AREA
   ================== */
.chat-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px; border-bottom: 1px solid var(--border-color);
}
.status {
    font-size: 12px; font-weight: 500; color: var(--accent-green);
    background-color: rgba(52,211,153,.1); padding: 4px 10px; border-radius: 12px;
}
.chat-messages {
    flex-grow: 1; padding: 20px; overflow-y: auto; display: flex;
    flex-direction: column; gap: 20px;
}
.message {
    display: flex; gap: 12px; max-width: 85%; animation: fadeIn .5s ease-out;
}
.message-icon { font-size: 24px; flex-shrink: 0; margin-top: 4px; }
.ai-message { align-self: flex-start; }
.ai-message .message-icon { color: var(--text-secondary); }
.ai-message .message-content {
    background-color: var(--bg-medium); border-radius: 0 12px 12px 12px; padding: 1px;
}
.user-message { align-self: flex-end; flex-direction: row-reverse; }
.user-message .message-content {
    background-color: var(--accent-blue); color: #fff;
    border-radius: 12px 0 12px 12px; padding: 12px 16px;
}
.message-content { line-height: 1.6; }
.timestamp {
    display: block; text-align: right; font-size: 10px;
    color: var(--text-secondary); margin-top: 8px; padding-left: 12px;
}
.user-message .timestamp { color: rgba(255,255,255,.7); }
.message-content strong { color: var(--accent-blue); }

.chat-input-area { padding: 12px 16px; border-top: 1px solid var(--border-color); }
.chat-input-area form {
    display: flex; align-items: center; background-color: var(--bg-medium);
    border-radius: 12px; padding: 0 5px 0 10px;
    border: 1px solid var(--border-color); transition: border-color .2s;
}
.chat-input-area form:focus-within { border-color: var(--accent-blue); }
#user-input {
    flex-grow: 1; background: 0 0; border: none; outline: 0; color: var(--text-primary);
    padding: 14px; font-size: 14px;
}
#user-input::placeholder { color: var(--text-secondary); }
.attach-button, #send-button { background: 0 0; border: none; cursor: pointer; padding: 10px; }
.attach-button i, #send-button i { color: var(--text-secondary); font-size: 20px; transition: color .2s; }
#send-button i { color: var(--accent-blue); }
#send-button:hover i { color: var(--accent-blue); }
.typing-indicator span {
    height: 8px; width: 8px; margin: 0 2px; background-color: var(--text-secondary);
    display: inline-block; border-radius: 50%; opacity: .4; animation: bounce 1s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounce { 0%,60%,100% { transform: translateY(0) } 30% { transform: translateY(-6px) } }

/* ==================
   WIDGETS
   ================== */
@keyframes widget-pop-in { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.widget {
    background: linear-gradient(135deg, #2a2d35, #23272f);
    border-radius: 12px; padding: 0; /* No padding on container */
    margin-top: 10px; border: 1px solid var(--border-color);
    animation: widget-pop-in 0.4s ease-out; overflow: hidden;
}
.ai-message .message-content .widget { padding: 0; background-color: transparent; }
body.light-mode .widget { background: linear-gradient(135deg, #eef2f7, #ffffff); }
.widget .header {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
.widget .header .icon { font-size: 22px; color: var(--accent-blue); }
.widget .header .name { font-size: 16px; font-weight: 600; }
/* Inner padding for widgets without a separate header */
.weather-widget, .time-widget { padding: 16px; }
.volcano-widget .info, .volcano-widget .header { padding: 8px 16px; }
.volcano-widget .header { border-bottom: none; }


/* Weather Widget */
.weather-widget { display: flex; align-items: center; gap: 16px; }
.weather-widget .icon { font-size: 48px; color: var(--accent-yellow); }
.weather-widget .details .location { font-size: 18px; font-weight: 600; }
.weather-widget .details .temp { font-size: 28px; font-weight: 700; }
.weather-widget .details .condition { font-size: 14px; color: var(--text-secondary); }

/* Time Widget */
.time-widget { text-align: center; }
.time-widget .icon { color: var(--accent-yellow); font-size: 28px; margin-bottom: 8px; }
.time-widget .time { font-family: 'Poppins', sans-serif; font-size: 40px; font-weight: 600; letter-spacing: 2px; }
.time-widget .date { color: var(--text-secondary); }

/* Volcano Widget */
.volcano-widget .header .icon { color: var(--accent-red); }
.volcano-widget .status {
    font-size: 12px; font-weight: bold; color: #fff; padding: 3px 8px;
    border-radius: 12px; text-transform: uppercase;
}
.volcano-widget .status.active { background-color: var(--accent-red); animation: pulse 2s infinite; }
.volcano-widget .status.dormant { background-color: var(--accent-green); }
.volcano-widget .info { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin: 0; padding-top: 0; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

/* Points Widget */
.points-widget ul { list-style: none; padding: 8px 0; }
.points-widget li {
    font-size: 14px; padding: 10px 16px 10px 30px; position: relative;
    color: var(--text-secondary); border-bottom: 1px solid var(--border-color);
}
.points-widget ul li:last-child { border-bottom: none; }
.points-widget li::before {
    content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; background-color: var(--accent-blue); border-radius: 50%;
}
body.light-mode .points-widget li { border-color: #e8eaf1; color: var(--text-secondary); }

/* Table Widgets */
.table-widget .header .icon { color: var(--accent-green); }
.table-widget table { width: 100%; border-collapse: collapse; }
.table-widget th, .table-widget td {
    padding: 10px 16px; text-align: left; font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}
.table-widget td { color: var(--text-secondary); }
.table-widget th {
    font-weight: 600; color: var(--text-primary); font-size: 12px; text-transform: uppercase;
    background-color: rgba(255, 255, 255, 0.03);
}
.table-widget tbody tr:last-child td { border-bottom: none; }
body.light-mode .table-widget th { background-color: #f7f9fc; }

/* Diff Table Widget */
.diff-table-widget .header .icon { color: var(--accent-yellow); }
.diff-table-widget thead th:nth-child(2) { color: var(--accent-blue); }
.diff-table-widget thead th:nth-child(3) { color: var(--accent-red); }
.diff-table-widget tbody td { color: var(--text-primary); font-weight: 500; }
.diff-table-widget tbody td:first-child { color: var(--text-secondary); font-weight: 400;}

/* ALL OTHER CSS IS THE SAME, but for completeness, here it is */
.logo { display: flex; align-items: center; gap: 12px; }
.logo i { font-size: 28px; color: var(--accent-blue); }
.logo h3 { font-size: 16px; font-weight: 600; }
.logo p { font-size: 12px; color: var(--text-secondary); }
.card {
    background-color: var(--bg-light); border-radius: 12px; padding: 16px;
    border: 1px solid var(--border-color); box-shadow: 0 2px 10px var(--shadow-color);
}
.card-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.card-header i { font-size: 20px; color: var(--text-secondary); }
.card-header h3 { font-size: 14px; font-weight: 600; }
.card-header p { font-size: 12px; color: var(--text-secondary); }
.data-summary { display: flex; justify-content: space-around; text-align: center; }
.summary-item span { font-size: 12px; color: var(--text-secondary); }
.summary-item strong { display: block; font-size: 20px; font-weight: 600; }
.nav-header {
    display: flex; align-items: center; gap: 12px; padding: 10px; cursor: pointer;
    border-radius: 8px; transition: background-color .2s;
}
.nav-header:hover { background-color: var(--bg-dark); }
.nav-header span { flex-grow: 1; font-weight: 500; }
.nav-content {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .4s ease-out, opacity .3s ease-in, margin-top .4s ease-out;
}
.nav-section.open>.nav-content { max-height: 500px; opacity: 1; margin-top: 8px; }
.nav-section.open>.nav-header .ph-caret-right { transform: rotate(90deg); }
.nav-list { list-style: none; padding-left: 20px; }
.nav-list li { margin-bottom: 12px; }
.nav-list a { color: var(--text-primary); text-decoration: none; font-size: 14px; }
.nav-list small { color: var(--text-secondary); font-size: 12px; padding-left: 10px; }
.badge { font-size: 10px; padding: 2px 8px; border-radius: 12px; font-weight: 600; text-transform: uppercase; }
.badge.active { background-color: rgba(52,211,153,.1); color: var(--accent-green); }
.badge.maintenance { background-color: rgba(251,191,36,.1); color: var(--accent-yellow); }
.sidebar-footer { border-top: 1px solid var(--border-color); padding-top: 16px; }
.user-profile { display: flex; align-items: center; gap: 12px; }
.user-profile>i { font-size: 36px; }
.user-info p { font-weight: 600; }
.user-info a { font-size: 12px; color: var(--text-secondary); text-decoration: none; }
.right-sidebar { display: flex; flex-direction: column; gap: 20px; }
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.analytic-item span { font-size: 12px; color: var(--text-secondary); }
.analytic-item strong { display: block; font-size: 24px; font-weight: 600; }
.health-item { margin-bottom: 12px; }
.health-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.progress-bar {
    width: 100%; height: 6px; background-color: var(--bg-dark);
    border-radius: 3px; overflow: hidden;
}
.progress {
    height: 100%; background-color: var(--accent-blue); border-radius: 3px;
    width: 0; transition: width 1s ease-out .2s;
}
.popular-queries ul { list-style: none; }
.popular-queries li { margin-bottom: 12px; }
.popular-queries a { color: var(--text-secondary); text-decoration: none; font-size: 13px; font-weight: 500; display: block; }
.popular-queries a:hover { color: var(--accent-blue); }
.popular-queries small { display: block; font-size: 11px; margin-top: 4px; }
.popular-queries small i { font-size: 10px; vertical-align: middle; }
.ph-trend-up { color: var(--accent-green); }
.ph-trend-down { color: var(--accent-red); }
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center;
    align-items: center; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1000;
}
.modal-overlay.visible { opacity: 1; visibility: visible; }
.modal-content {
    background-color: var(--bg-medium); padding: 24px; border-radius: 16px;
    border: 1px solid var(--border-color); width: 100%; max-width: 400px;
    transform: scale(0.95); transition: transform 0.3s ease;
}
.modal-overlay.visible .modal-content { transform: scale(1); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.close-button { background: none; border: none; color: var(--text-secondary); font-size: 28px; cursor: pointer; }
.setting-item { margin-bottom: 20px; }
.setting-item label { display: block; margin-bottom: 8px; font-weight: 500; }
.setting-item select {
    width: 100%; padding: 10px; background-color: var(--bg-dark);
    border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px;
}
.theme-options { display: flex; gap: 10px; }
.theme-option {
    flex: 1; padding: 10px; border-radius: 8px; background-color: var(--bg-dark);
    border: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 0.2s, border-color 0.2s;
}
.theme-option.active { border-color: var(--accent-blue); background-color: rgba(58, 134, 255, 0.1); }
.theme-option:hover:not(.active) { background-color: var(--bg-light); }