:root{
  /* === PALETA DE COLORES: PETROSUITE ENTERPRISE (Oil & Gas) === */
  
  /* Fondos: Profundidad y Profesionalismo */
  --bg: #0b1116;           /* Negro Petróleo Profundo */
  --panel: #161e26;        /* Gris Acero Oscuro */
  --panel-hover: #1f2933;  /* Gris Pizarra */
  
  /* Primario: Azul Técnico / Ingeniería */
  --primary: #38bdf8;      /* Sky Blue Brillante */
  --primary-hover: #7dd3fc;
  --primary-dim: rgba(56, 189, 248, 0.1);
  --primary-glow: rgba(56, 189, 248, 0.25);

  /* Acentos Industriales */
  --accent-safety: #eab308; /* Amarillo Seguridad */
  --accent-danger: #ef4444; /* Rojo Alerta */
  --accent-success: #10b981; /* Verde Operativo */
  
  /* Tipografía y Estructura */
  --text: #f1f5f9;         /* Blanco Humo */
  --muted: #94a3b8;        /* Gris Metalizado */
  --border: #2d3748;       /* Borde Sutil */
  
  --shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6);
  --radius: 16px;
  
  /* Mapeo para compatibilidad con componentes existentes */
  --mf-accent: var(--primary);
}

html,body{height:100%} *{box-sizing:border-box}

body{
  background-color: var(--bg);
  background-image: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.05), transparent 50%),
                    linear-gradient(180deg, rgba(11, 17, 22, 0) 0%, rgba(11, 17, 22, 1) 100%);
  color: var(--text); 
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- Typography & Headings --- */
h1, h2, h3, h4, h5, h6 { color: var(--primary); font-weight: 700; letter-spacing: -0.025em; }
.text-muted { color: var(--muted)!important; }

/* Cabecera de Módulo Unificada */
.page-header-container {
  text-align: center;
  margin-bottom: 2.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(22, 30, 38, 0) 0%, rgba(22, 30, 38, 0.4) 100%);
}

.page-title {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  letter-spacing: -1px;
  color: var(--primary);
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.module-desc {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.module-quote {
  font-family: 'Manrope', serif;
  font-style: italic;
  color: var(--primary);
  font-size: 0.9rem;
  opacity: 0.9;
}
.module-quote::before { content: "“"; margin-right: 4px; }
.module-quote::after { content: "”"; margin-left: 4px; }

/* --- Navbar --- */
.glass-header { 
  background: rgba(11, 17, 22, 0.9); 
  backdrop-filter: blur(12px); 
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1030;
  padding: 0.75rem 1rem;
}
.navbar-brand{ color: var(--primary)!important; font-weight: 800; letter-spacing: 0.5px; font-size: 1.4rem; text-transform: uppercase; }
.menu-btn{ background:none; border:none; color: var(--muted); font-size:1.25rem; margin-right:1rem; cursor:pointer; transition: color 0.2s; }
.menu-btn:hover { color: var(--text); }

/* --- Sidebar --- */
.sidebar{
  position:fixed; top:0; left:-260px; width:260px; height:100%;
  background: var(--bg); border-right: 1px solid var(--border);
  box-shadow: var(--shadow); padding-top: 1rem; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index:1000;
  overflow-y: auto; /* Scroll si el menú es muy alto */
}

/* --- Sidebar Branding & Categories --- */
.sidebar-header {
  padding: 1.5rem 1.5rem 1rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.5px;
  text-align: center;
}
.sidebar-category {
  padding: 1rem 1.5rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 1;
}
.text-accent { color: var(--mf-accent); }

.sidebar.open{ left:0; }
.sidebar a{
  display:flex; align-items: center; padding: 0.85rem 1.5rem; 
  color: var(--muted); text-decoration:none; font-weight:600; font-size: 0.95rem;
  border-left: 3px solid transparent; transition: all 0.2s;
}
.sidebar a:hover{ background: rgba(255,255,255,0.03); color: #fff; border-left-color: var(--primary); }
.sidebar a i { width: 24px; text-align: center; margin-right: 0.5rem; opacity: 0.8; }
.sidebar hr { border-color: var(--border); margin: 1rem 0; opacity: 0.5; }

/* --- Main Layout --- */
.main-wrapper { padding-top: 1.5rem; transition: margin-left 0.3s ease; }
.hero-section { text-align: center; margin-bottom: 2rem; }

/* --- Cards --- */
.card { 
  background: var(--panel); 
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  box-shadow: var(--shadow);
}
.panel-title { 
  color: var(--primary); 
  font-weight: 700; 
  font-size: 1.1rem; 
  letter-spacing: -0.02em; 
  margin-bottom: 1rem;
  display: flex; align-items: center;
}
.panel-title::before {
  content: ''; display: inline-block; width: 4px; height: 16px; 
  background: var(--primary); margin-right: 8px; border-radius: 2px;
}

/* --- Filters --- */
.filter-card { 
  background: linear-gradient(145deg, var(--panel-hover) 0%, var(--panel) 100%);
}
/* Estilo para el contenedor interno de reportes */
.bg-dark-soft { background-color: rgba(0,0,0,0.2); }
/* Borde izquierdo solo en desktop para separar columnas */
@media (min-width: 992px) { .border-start-lg { border-left: 1px solid var(--border)!important; } }

.form-label { font-size: 0.8rem; font-weight: 600; color: var(--primary); margin-bottom: 0.4rem; }
.form-control, .form-select {
  background-color: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  font-size: 0.95rem;
  padding: 0.6rem 0.8rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Fix Date/Month Input Visibility on Dark Theme */
input[type="date"], input[type="month"], input[type="datetime-local"] {
  color-scheme: dark;
}
::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}
.form-control:focus, .form-select:focus {
  background-color: var(--bg);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-dim);
  color: #fff;
}
/* Custom Select Arrow */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-check-input { background-color: var(--bg); border-color: var(--border); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-label { color: var(--text); cursor: pointer; }

/* --- Buttons --- */
.btn-primary {
  background-color: rgba(56, 189, 248, 0.15);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-weight: 700;
  border-radius: 12px;
  padding: 0.5rem 1rem;
}
.btn-primary:hover { background-color: var(--primary); color: var(--bg); border-color: var(--primary); }
.btn-glow { box-shadow: 0 0 20px var(--primary-glow); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); border-radius: 12px; }
.btn-outline-primary:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-icon { color: var(--muted); border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.btn-icon:hover { color: var(--primary); background: rgba(45,127,249, 0.1); border-color: rgba(45,127,249, 0.2); }

/* --- KPIs --- */
.kpi-card {
  position: relative; overflow: hidden;
  border-top: 3px solid transparent;
  transition: transform 0.2s, border-color 0.2s;
}
.kpi-card:hover { transform: translateY(-2px); border-top-color: var(--primary); }
.kpi-card .label { color: var(--muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.kpi-card .val { font-size: 2.2rem; font-weight: 800; color: var(--primary); line-height: 1.1; margin-bottom: 0.25rem; letter-spacing: -1px; }
.kpi-card small { color: var(--muted); font-size: 0.8rem; opacity: 0.8; }

/* KPI Icons (Background decoration) */
.kpi-icon {
  position: absolute; top: 1rem; right: 1rem;
  font-size: 2.5rem; color: var(--primary); opacity: 0.1;
  transform: rotate(10deg);
}
.kpi-icon.water { color: #3b82f6; }
.kpi-icon.gas { color: #f59e0b; }
.kpi-icon.wells { color: #10b981; }

/* --- Charts --- */
.apex-host { width:100%; height: 320px; }
.apex-host.tiny { height: 220px; }
.map-frame { width:100%; height:100%; min-height:320px; border:none; border-radius: 0 0 var(--radius) var(--radius); }
.bg-glass { background: rgba(11, 15, 22, 0.5); border-bottom: 1px solid var(--border); }

/* --- Tables --- */
.table-card { padding: 0; overflow: hidden; }
.table-card .panel-title { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.table-responsive { max-height: 400px; overflow-y: auto; }

.table { --bs-table-bg: transparent; --bs-table-color: var(--muted); margin-bottom: 0; }
.table thead th { 
  background: var(--panel); 
  color: var(--primary); 
  font-weight: 700; font-size: 0.8rem; text-transform: uppercase; 
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
  padding: 0.75rem 1rem;
}
.table tbody td { 
  border-bottom: 1px solid var(--border); 
  padding: 0.75rem 1rem; font-size: 0.9rem;
  font-variant-numeric: tabular-nums; /* Alineación numérica perfecta */
}
/* Fix hover contrast issues overriding Bootstrap defaults */
.table-hover tbody tr:hover > * { 
  background-color: rgba(255,255,255,0.05) !important; 
  color: #fff !important; 
  box-shadow: none !important;
}

/* --- Badges & Utilities --- */
.badge-soft { 
  background: rgba(56, 189, 248, 0.1); 
  color: var(--primary); 
  border: 1px solid rgba(56, 189, 248, 0.3);
  font-weight: 600; padding: 0.35em 0.65em;
  border-radius: 999px;
}

.app-footer { 
  text-align:center; color: var(--muted); 
  font-size: 0.8rem; padding: 2rem 0; margin-top: auto; 
  border-top: 1px solid var(--border);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* --- RESPONSIVE DESKTOP LAYOUT --- */
@media (min-width: 992px) {
  /* Estado por defecto (Abierto) */
  body:not(.sidebar-collapsed) .sidebar {
    left: 0 !important; 
    z-index: 1040; /* Por encima del contenido normal */
  }
  body:not(.sidebar-collapsed) .glass-header { margin-left: 260px; width: calc(100% - 260px); }
  body:not(.sidebar-collapsed) .main-wrapper { margin-left: 260px; }

  /* Estado Colapsado (Retraído) */
  body.sidebar-collapsed .sidebar { left: -260px !important; }
  body.sidebar-collapsed .glass-header { margin-left: 0; width: 100%; }
  body.sidebar-collapsed .main-wrapper { margin-left: 0; }

  /* Transiciones suaves */
  .glass-header, .main-wrapper { transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

  /* Botones */
  .menu-btn { display: none; } /* Ocultar botón móvil por defecto */
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS DEL SIMULADOR DE POZO (Migrados desde HTML)
   ========================================================================== */

.header-sticky {
  position: sticky; top: 0; z-index: 1020;
  background: rgba(11, 17, 22, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
  margin-bottom: 2rem;
}

/* Selectores y Listas */
.variables-list { max-height: 200px; overflow-y: auto; border-radius: 8px; padding: 10px; border: 1px solid var(--border); background-color: rgba(0,0,0,0.2); }
.variables-list .form-check { padding-left: 2.5em; }
select[multiple] { height: 200px !important; background-color: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }

/* KPIs de Equipo */
.kpi-item .label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-item .value { color: var(--text); font-weight: 700; font-size: 1.1rem; }
.kpi-box { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; text-align: center; transition: transform 0.2s; }
.kpi-box:hover { transform: translateY(-2px); border-color: var(--primary); }

/* Layout del Simulador */
.content-column { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.secondary-layout { display: flex; gap: 1rem; }
.secondary-chart-column { flex: 1; min-width: 0; }
.sidebar-column { width: 320px; flex-shrink: 0; }
.variables-list-card { /* Alias para compatibilidad */ }

@media (max-width: 1200px) {
    .secondary-layout { flex-direction: column; }
    .sidebar-column { width: 100%; }
    .well-simulator { padding: 1rem; flex-direction: column; }
    .simulator-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 2rem; }
    .well-column { grid-column: 1; grid-row: auto; order: -1; } /* Pozo arriba en móvil */
}

/* Contenedor Principal del Simulador */
.well-simulator {
    background: radial-gradient(circle at 50% 50%, #1a2332 0%, #0b1116 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    justify-content: space-around;
    min-height: 600px;
    position: relative;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
}

.simulator-grid {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 1rem 2rem;
    width: 100%;
    align-items: start;
    justify-items: center;
}

.control-column, .well-column, .production-column {
    display: flex; flex-direction: column; align-items: center; width: 100%;
}

.well-column {
    position: relative; grid-column: 2 / 3; height: 100%; justify-content: flex-end; min-height: 550px;
}

/* Paneles SCADA */
.scada-panel {
    width: 100%;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; align-items: center;
    overflow: hidden;
    margin-bottom: 1rem;
}

.panel-header-tech {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex; align-items: center;
}

.panel-body-tech { padding: 12px; width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* Pantalla VSD */
.vsd-screen {
    width: 100%;
    background: #000;
    border: 2px solid #334155;
    border-radius: 4px;
    padding: 0.75rem;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
    font-family: 'Courier New', monospace;
}
.vsd-screen .readout { font-size: 1.8rem; font-weight: 700; color: #10b981; text-shadow: 0 0 5px rgba(16, 185, 129, 0.5); line-height: 1.2; }
.vsd-screen .unit { font-size: 0.9rem; color: #64748b; margin-left: 0.5rem; }

.vsd-indicators { display: flex; gap: 1rem; margin-top: 0.5rem; justify-content: center; }
.vsd-led { width: 12px; height: 12px; border-radius: 50%; background-color: #10b981; box-shadow: 0 0 8px #10b981; position: relative; }
.vsd-led.off { background-color: #333; box-shadow: none; }
.vsd-led.stop { background-color: #ef4444; box-shadow: 0 0 8px #ef4444; }
.vsd-led::before { content: attr(data-label); position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; color: #64748b; }

/* Esquema del Pozo */
.wellhead {
    width: 100px; height: 50px;
    background: linear-gradient(90deg, #334155, #64748b, #334155);
    border-radius: 4px 4px 0 0;
    position: relative; z-index: 10;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.wellhead::before, .wellhead::after {
    content: ''; position: absolute; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 50%;
    background: radial-gradient(circle, #ef4444 30%, #991b1b 100%);
    border: 2px solid #1f2937;
}
.wellhead::before { left: -10px; } .wellhead::after { right: -10px; }

.well-schematic {
    position: relative; width: 160px; height: 500px;
    background: #111827;
    border-left: 3px solid #374151; border-right: 3px solid #374151;
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
}

/* Componentes del Pozo */
.casing-upper {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 120px; height: 65%;
    background: linear-gradient(90deg, #333 0%, #555 50%, #333 100%);
    border: 1px solid #000; border-bottom: 4px solid #222;
    z-index: 2;
}
.casing-lower {
    position: absolute; top: 64%; left: 50%; transform: translateX(-50%);
    width: 80px; height: 36%;
    background: linear-gradient(90deg, #222 0%, #444 50%, #222 100%);
    border: 1px solid #000;
    z-index: 1;
}
.tubing {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 16px; height: 85%;
    background: linear-gradient(90deg, #4b5563, #9ca3af, #4b5563);
    z-index: 5;
}
.tubing.flow-active::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, rgba(56, 189, 248, 0.3) 0px, rgba(56, 189, 248, 0.3) 5px, transparent 5px, transparent 10px);
    animation: flow-animation 1s linear infinite;
}
@keyframes flow-animation { from { transform: translateY(0); } to { transform: translateY(-20px); } }

.power-cable {
    position: absolute; top: 0; left: calc(50% + 10px);
    width: 4px; height: 88%; background: #000; z-index: 5;
}

/* Bomba BES */
.esp-pump {
    position: absolute; bottom: 40%; left: 50%; transform: translateX(-50%);
    width: 22px; height: 140px; z-index: 8;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5));
}
.esp-pump > div { width: 100%; border: 1px solid #000; }
.esp-pump-stages { height: 45%; background: repeating-linear-gradient(0deg, #94a3b8, #94a3b8 2px, #64748b 2px, #64748b 4px); }
.esp-intake { height: 10%; background: repeating-linear-gradient(90deg, #000, #000 2px, #333 2px, #333 4px); }
.esp-seal { height: 15%; background: #475569; }
.esp-motor { height: 30%; background: #1e293b; }
.esp-gauge { height: 10px; width: 14px; background: var(--accent-safety); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-radius: 0 0 4px 4px; }

.packer {
    position: absolute; bottom: 58%; left: 50%; transform: translateX(-50%);
    width: 118px; height: 12px;
    background: repeating-linear-gradient(45deg, #000, #000 4px, #333 4px, #333 8px);
    z-index: 7;
}
.annulus-fluid {
    position: absolute; bottom: 40%; width: 118px; left: 50%; transform: translateX(-50%);
    background: rgba(56, 189, 248, 0.2); border-top: 1px solid var(--primary);
    z-index: 6; transition: height 0.5s ease;
}

/* Yacimiento */
.reservoir-layer {
    position: absolute; bottom: 5%; left: -50%; width: 200%; height: 80px;
    background: repeating-linear-gradient(45deg, #3f2e27, #3f2e27 10px, #2a1e1a 10px, #2a1e1a 20px);
    border-top: 2px dashed #8d6e63; border-bottom: 2px dashed #8d6e63;
    z-index: 1; opacity: 0.8;
}
.perforations {
    position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
    width: 80px; height: 30px;
    background-image: radial-gradient(circle, #000 2px, transparent 0); background-size: 8px 8px;
    z-index: 4;
}
.reservoir-flow {
    position: absolute; bottom: 6%; width: 120px; height: 60px;
    background: radial-gradient(ellipse, rgba(234, 179, 8, 0.3) 0%, transparent 70%);
    z-index: 3; animation: pulse 2s infinite;
}
@keyframes pulse { 0% { opacity: 0.4; transform: scale(0.95); } 50% { opacity: 0.8; transform: scale(1.05); } 100% { opacity: 0.4; transform: scale(0.95); } }

/* Etiquetas de Datos Flotantes */
.data-box {
    position: absolute; width: 180px;
    background: rgba(15, 23, 42, 0.9); border: 1px solid var(--border);
    padding: 8px; border-radius: 6px;
    font-size: 0.8rem; color: var(--text);
    z-index: 20; backdrop-filter: blur(4px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.data-box .label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; margin-bottom: 2px; }
.data-box .value { font-size: 1.1rem; font-weight: 700; color: var(--primary); font-family: 'Manrope', sans-serif; }
.data-box.pressure { border-left: 3px solid var(--primary); }
.data-box.production { border-left: 3px solid var(--accent-success); }
.data-box.efficiency { border-left: 3px solid var(--accent-safety); }
.leader-line { position: absolute; border-bottom: 1px dashed var(--muted); z-index: 15; opacity: 0.5; }

.sim-input-group { display: flex; align-items: center; gap: 0.5rem; width: 100%; margin-bottom: 0.5rem; }
.sim-input-group label { font-size: 0.75rem; color: var(--muted); flex-grow: 1; }
.sim-input-group input { width: 70px; text-align: right; padding: 2px 6px; font-size: 0.85rem; }

/* --- Code & JSON Previews --- */
.code-preview {
  background: rgba(0, 0, 0, 0.3);
  color: var(--primary);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  max-height: 240px;
  overflow: auto;
  font-family: monospace;
  font-size: 0.85rem;
}

/* --- Chat Interface (Analisis IA) --- */
.chat-layout { display: flex; flex: 1; min-height: 0; gap: 1rem; height: calc(100vh - 240px); }
.chat-content { flex: 1; display: flex; flex-direction: column; gap: 1rem; min-width: 0; overflow-y: auto; }
.chat-sidebar { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.chat-box { flex-grow: 1; display: flex; flex-direction: column; padding: 1rem; overflow-y: auto; }
.chat-input-group { padding: 1rem; border-top: 1px solid var(--border); }
.chat-message { max-width: 90%; padding: 0.6rem 1rem; border-radius: 1rem; margin-bottom: 0.5rem; line-height: 1.4; font-size: 0.9rem; }
.chat-message.user { background-color: var(--primary); color: var(--bg); align-self: flex-end; border-bottom-right-radius: 0.2rem; }
.chat-message.bot { background-color: var(--panel-hover); color: var(--text); align-self: flex-start; border-bottom-left-radius: 0.2rem; border: 1px solid var(--border); }
.chat-message.bot.thinking { background-color: transparent; border: none; }
.chat-message.bot.thinking .dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--muted);
    animation: typing-bounce 1.2s infinite ease-in-out; margin: 0 2px;
}
.chat-message.bot.thinking .dot:nth-of-type(2) { animation-delay: -1.0s; }
.chat-message.bot.thinking .dot:nth-of-type(3) { animation-delay: -0.8s; }
@keyframes typing-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }

@media (max-width: 992px) {
  .chat-layout { flex-direction: column; height: auto; }
  .chat-sidebar { width: 100%; min-height: 400px; }
}

/* --- Grids for Analysis Pages --- */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.chart-box { width: 100%; min-height: 300px; }
.chart-box-small { width: 100%; min-height: 300px; }
.plot-container { width: 100%; height: 100%; min-height: 400px; }

@media (max-width: 992px) {
  .chart-grid { grid-template-columns: 1fr; }
}

/* --- Leaflet Map Overrides --- */
.map-standalone-container { 
  width: 100%; 
  height: 650px; 
  border-radius: 0 0 var(--radius) var(--radius); 
  background: var(--bg);
}
.leaflet-container { background: var(--bg) !important; }
.leaflet-control-zoom a { background-color: var(--panel) !important; color: var(--text) !important; border-color: var(--border) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--border); }