/* =========================
   XMRT-DAO Dashboard Styles
   (Mobile-First, Responsive, Clean)
   ========================= */

/* ----- Theme tokens ----- */
:root{
  --bg-0:#0d1117;
  --bg-1:#161b22;
  --bg-2:#1b2230;
  --panel:#161b22cc;
  --panel-strong:#161b22f2;
  --border:#30363d;
  --muted:#8b949e;
  --text:#c9d1d9;
  --text-strong:#f0f6fc;

  --brand:#58a6ff;
  --ok:#2ea043;
  --warn:#f0c674;
  --err:#f85149;
  --purple:#bc8cff;
  --orange:#ff9500;

  --blue-100:#93c5fd;
  --green-100:#86efac;
  --purple-100:#d8b4fe;

  --shadow:0 8px 32px rgba(88,166,255,.08);
  --shadow-strong:0 10px 40px rgba(0,0,0,.35);
}

/* ===== BASE STYLES (Mobile First) ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Courier New',monospace;
  background:linear-gradient(135deg,var(--bg-0) 0%,var(--bg-1) 50%,#21262d 100%);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
  will-change:scroll-position;
  font-size:14px;
  line-height:1.5;
}

/* ===== HEADER STYLES ===== */
.header{
  background:rgba(13,17,23,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding:1rem;
  position:sticky;top:0;z-index:1000;
}
.header-content{
  max-width:1400px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;
}
.logo{display:flex;align-items:center;gap:1rem}
.logo h1{color:var(--brand);font-size:1.25rem;font-weight:700}
.status-indicator{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;background:rgba(35,134,54,.2);
  border:1px solid var(--ok);border-radius:20px;
  font-size:0.875rem;
}
.status-dot{width:8px;height:8px;background:var(--ok);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ===== CHATBOT TOP SECTION (NEW) ===== */
.chatbot-top-section{
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:1rem;
}
.chatbot-top-container{
  max-width:1400px;margin:0 auto;
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.chatbot-header{
  background:var(--bg-2);
  padding:1rem;
  border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;
}
.chatbot-title{
  display:flex;align-items:center;gap:.75rem;
  color:var(--text-strong);
}
.chatbot-title h2{font-size:1.125rem;font-weight:600}
.chatbot-icon{width:20px;height:20px;color:var(--brand)}
.chatbot-status{
  display:flex;align-items:center;gap:.5rem;
  color:var(--muted);font-size:0.875rem;
}
.chatbot-messages{
  max-height:200px;overflow-y:auto;padding:1rem;
  background:var(--bg-0);
}
.message{margin-bottom:1rem}
.message:last-child{margin-bottom:0}
.message-content{
  padding:0.75rem 1rem;border-radius:8px;
  background:var(--bg-2);color:var(--text);
  border:1px solid var(--border);
  font-size:0.875rem;line-height:1.4;
}
.eliza-message .message-content{
  background:rgba(88,166,255,.1);
  border-color:var(--brand);
}
.user-message .message-content{
  background:rgba(46,160,67,.1);
  border-color:var(--ok);
  margin-left:auto;max-width:80%;
}
.chatbot-input{
  padding:1rem;background:var(--bg-1);
  border-top:1px solid var(--border);
  display:flex;gap:0.75rem;align-items:center;
}
.chat-input{
  flex:1;padding:0.75rem 1rem;
  background:var(--bg-0);border:1px solid var(--border);
  border-radius:8px;color:var(--text);
  font-family:inherit;font-size:0.875rem;
}
.chat-input:focus{outline:none;border-color:var(--brand)}
.send-button{
  padding:0.75rem 1rem;background:var(--brand);
  border:none;border-radius:8px;color:white;
  cursor:pointer;display:flex;align-items:center;gap:0.5rem;
  font-size:0.875rem;font-weight:500;
  transition:background 0.2s ease;
}
.send-button:hover{background:#4a8fd9}
.send-button svg{width:16px;height:16px}

/* ===== HERO SECTION ===== */
.hero-section{
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,rgba(22,27,34,.75),rgba(13,17,23,.75));
}
.hero-content{
  max-width:1400px;margin:0 auto;padding:2rem 1rem;
  text-align:center;
}
.hero-title{
  font-size:1.75rem;line-height:1.15;margin-bottom:.75rem;
  color:var(--text-strong);
  text-shadow:0 2px 16px rgba(88,166,255,.12);
}
.hero-subtitle{
  max-width:720px;margin:0 auto 1.75rem auto;
  color:var(--muted);font-size:0.875rem;
}

/* ===== MAIN DASHBOARD LAYOUT (Mobile First) ===== */
.dashboard-container{
  max-width:1400px;margin:0 auto;padding:1rem;
  display:block;
  min-height:calc(100vh - 80px);
}
.dashboard-metrics{display:flex;flex-direction:column;gap:1.5rem}

/* ===== DASHBOARD SECTION STYLES ===== */
.dashboard-section{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  box-shadow:var(--shadow);
}
.section-header{
  display:flex;align-items:center;gap:0.75rem;
  margin-bottom:1.5rem;padding-bottom:0.75rem;
  border-bottom:1px solid var(--border);
}
.section-icon{width:20px;height:20px;color:var(--brand)}
.section-title{color:var(--text-strong);font-size:1.125rem;font-weight:600}

/* ===== CALCULATOR STYLES (Mobile Optimized) ===== */
.calculator-section{background:var(--panel-strong)}
.calculator-content{display:flex;flex-direction:column;gap:1.5rem}
.calculator-header{text-align:center}
.calculator-description{color:var(--muted);font-size:0.875rem}
.calculator-controls{display:flex;flex-direction:column;gap:1.5rem}
.control-group{display:flex;flex-direction:column;gap:0.75rem}
.control-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:0.5rem;
}
.control-label{color:var(--text);font-size:0.875rem;font-weight:500}
.control-value{
  color:var(--brand);font-weight:600;font-size:0.875rem;
  background:rgba(88,166,255,.1);padding:0.25rem 0.5rem;
  border-radius:4px;border:1px solid rgba(88,166,255,.3);
}
.slider{
  width:100%;height:6px;background:var(--bg-2);
  border-radius:3px;outline:none;
  -webkit-appearance:none;appearance:none;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;background:var(--brand);
  border-radius:50%;cursor:pointer;
  border:2px solid var(--bg-0);
}
.slider::-moz-range-thumb{
  width:20px;height:20px;background:var(--brand);
  border-radius:50%;cursor:pointer;
  border:2px solid var(--bg-0);
}
.slider-labels{
  display:flex;justify-content:space-between;
  color:var(--muted);font-size:0.75rem;margin-top:0.25rem;
}

/* ===== UPGRADE SECTION ===== */
.upgrade-section{
  background:var(--bg-2);padding:1rem;border-radius:8px;
  border:1px solid var(--border);
}
.upgrade-title{color:var(--text-strong);margin-bottom:1rem;font-size:1rem}
.toggle-container{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:0.75rem;
}
.toggle-container:last-child{margin-bottom:0}
.toggle-label{color:var(--text);font-size:0.875rem;flex:1}
.toggle-switch{position:relative;display:inline-block;width:48px;height:24px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background:var(--bg-0);transition:.3s;border-radius:24px;
  border:1px solid var(--border);
}
.toggle-slider:before{
  position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;
  background:var(--muted);transition:.3s;border-radius:50%;
}
input:checked + .toggle-slider{background:var(--brand);border-color:var(--brand)}
input:checked + .toggle-slider:before{transform:translateX(24px);background:white}

/* ===== STATS AND EARNINGS (Mobile Grid) ===== */
.calculator-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1rem;
}
.stat-card{
  background:var(--bg-2);padding:1rem;border-radius:8px;
  border:1px solid var(--border);text-align:center;
}
.stat-value{font-size:1.125rem;font-weight:700;margin-bottom:0.5rem}
.stat-label{color:var(--muted);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.5px}
.stat-purple{color:var(--purple)}
.stat-blue{color:var(--brand)}
.stat-green{color:var(--ok)}
.stat-yellow{color:var(--warn)}

.earnings-section{
  background:var(--bg-2);padding:1rem;border-radius:8px;
  border:1px solid var(--border);
}
.earnings-title{
  display:flex;align-items:center;gap:0.5rem;
  color:var(--text-strong);margin-bottom:1rem;font-size:1rem;
}
.earnings-icon{width:18px;height:18px;color:var(--warn)}
.earnings-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1rem;
}
.earnings-card{
  background:var(--bg-0);padding:1rem;border-radius:8px;
  border:1px solid var(--border);text-align:center;
}
.earnings-xmr{font-size:1rem;font-weight:700;color:var(--brand);margin-bottom:0.25rem}
.earnings-usd{font-size:0.875rem;color:var(--ok);margin-bottom:0.5rem}
.earnings-period{color:var(--muted);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.5px}

.disclaimer{
  background:rgba(240,198,116,.1);border:1px solid var(--warn);
  border-radius:8px;padding:1rem;
}
.disclaimer p{color:var(--text);font-size:0.75rem;line-height:1.4}

/* ===== SYSTEM STATUS ===== */
.system-status{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:0.75rem;margin-bottom:1.5rem;
}
.status-item{
  padding:0.75rem;background:rgba(46,160,67,.1);
  border:1px solid var(--ok);border-radius:8px;
  text-align:center;
}
.status-item span{color:var(--text);font-size:0.875rem;font-weight:500}
.status-online{background:rgba(46,160,67,.1);border-color:var(--ok)}

/* ===== METRICS GRID ===== */
.metrics-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1rem;
}
.metric-card{
  background:var(--bg-2);padding:1rem;border-radius:8px;
  border:1px solid var(--border);text-align:center;
  position:relative;
}
.metric-value{font-size:1.25rem;font-weight:700;margin-bottom:0.5rem}
.metric-label{color:var(--muted);font-size:0.75rem;margin-bottom:0.5rem}
.metric-trend{
  position:absolute;top:0.5rem;right:0.5rem;
  font-size:0.75rem;opacity:0.7;
}
.metric-primary{color:var(--brand)}
.metric-success{color:var(--ok)}
.metric-warning{color:var(--warn)}
.metric-purple{color:var(--purple)}
.metric-orange{color:var(--orange)}

.trend-up{color:var(--ok)}
.trend-down{color:var(--err)}
.trend-stable{color:var(--muted)}

/* ===== CHART CONTAINER ===== */
.chart-container{
  background:var(--bg-2);padding:2rem;border-radius:8px;
  border:1px solid var(--border);text-align:center;
  color:var(--muted);font-size:0.875rem;
  margin-top:1rem;
}

/* ===== NETWORK VISUALIZATION ===== */
.network-viz{
  background:var(--bg-2);padding:2rem;border-radius:8px;
  border:1px solid var(--border);text-align:center;
  color:var(--muted);font-size:0.875rem;
  margin-top:1rem;
  min-height:120px;
  display:flex;align-items:center;justify-content:center;
}

/* ===== FLOATING CHATBOT (Desktop Only) ===== */
.chatbot-toggle{
  position:fixed;bottom:2rem;right:2rem;
  width:56px;height:56px;background:var(--brand);
  border:none;border-radius:50%;color:white;
  cursor:pointer;box-shadow:var(--shadow-strong);
  z-index:1000;transition:all 0.3s ease;
  display:none;
}
.chatbot-toggle:hover{transform:scale(1.1);background:#4a8fd9}
.chatbot-toggle svg{width:24px;height:24px}

.chatbot-floating{
  position:fixed;bottom:6rem;right:2rem;
  width:350px;max-height:500px;
  background:var(--bg-1);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-strong);
  z-index:999;transform:translateY(100%) scale(0.8);
  opacity:0;transition:all 0.3s ease;pointer-events:none;
  display:none;
}
.chatbot-floating.active{
  transform:translateY(0) scale(1);
  opacity:1;pointer-events:all;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet (768px and up) */
@media (min-width: 768px) {
  body{font-size:16px}
  .header{padding:1rem 2rem}
  .logo h1{font-size:1.5rem}
  .chatbot-top-section{padding:1.5rem 2rem}
  .hero-content{padding:2.5rem 2rem}
  .hero-title{font-size:2.25rem}
  .hero-subtitle{font-size:1rem}
  .dashboard-container{padding:2rem}
  .dashboard-metrics{gap:2rem}
  .dashboard-section{padding:1.5rem}
  .section-title{font-size:1.25rem}
  .calculator-controls{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:2rem;
  }
  .calculator-stats{grid-template-columns:repeat(4,1fr)}
  .earnings-grid{grid-template-columns:repeat(3,1fr)}
  .metrics-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .system-status{grid-template-columns:repeat(4,1fr)}
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  .dashboard-container{
    display:grid;grid-template-columns:1fr 400px;gap:2rem;
  }
  .chatbot-top-section{display:none} /* Hide top chatbot on desktop */
  .chatbot-toggle{display:flex;align-items:center;justify-content:center}
  .chatbot-floating{display:block}
  
  /* Restore sidebar chatbot for desktop */
  .chatbot-section{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
    padding:0;
    box-shadow:var(--shadow);
    height:fit-content;
    position:sticky;
    top:2rem;
  }
  .chatbot-container{height:100%}
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
  .calculator-controls{grid-template-columns:repeat(2,1fr)}
  .hero-title{font-size:2.5rem}
}

/* ===== ACCESSIBILITY & TOUCH IMPROVEMENTS ===== */
@media (hover: none) and (pointer: coarse) {
  /* Touch device optimizations */
  .send-button{min-height:44px;min-width:44px}
  .toggle-switch{width:52px;height:28px}
  .toggle-slider:before{height:20px;width:20px;left:3px;bottom:3px}
  input:checked + .toggle-slider:before{transform:translateX(24px)}
  .slider{height:8px}
  .slider::-webkit-slider-thumb{width:24px;height:24px}
  .slider::-moz-range-thumb{width:24px;height:24px}
}

/* ===== PRINT STYLES ===== */
@media print {
  .chatbot-top-section,
  .chatbot-section,
  .chatbot-toggle,
  .chatbot-floating {display:none}
  .dashboard-container{display:block}
  body{background:white;color:black}
  .dashboard-section{border:1px solid #ccc;background:white}
}