/* [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}