:root {
  --bg-dark: #121212;
  --bg-panel: #1e1e1e;
  --bg-header: #0e0e0e;
  --bg-input: #000000;
  
  --text-primary: #e0e0e0;
  --text-secondary: #909090;
  --border: #333333;
  
  --accent: #2979ff;
  
  /* Jigsaw-style Colors */
  --bid-color: #0277bd; /* Deep Blue */
  --ask-color: #d32f2f; /* Deep Red */
  --trade-buy: #00c853; /* Bright Green */
  --trade-sell: #ff1744; /* Bright Red */
  
  --dom-cell-height: 20px; /* Very compact */
  --dom-font-size: 11px;
  
  --delta-pos: rgba(0, 200, 83, 0.2);
  --delta-neg: rgba(255, 23, 68, 0.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; } 

body { 
  font-family: "Segoe UI", "Roboto", Helvetica, Arial, sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden; 
  display: flex;
  flex-direction: column;
}

/* --- Utilities --- */
.text-up { color: var(--trade-buy); }
.text-down { color: var(--trade-sell); }
.text-muted { color: var(--text-secondary); }
.bold { font-weight: 700; }
.hidden { display: none !important; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* --- Header --- */
.main-header {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  height: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  justify-content: space-between;
  z-index: 60;
}

.header-left { display: flex; align-items: center; gap: 1.5rem; }
.brand { font-weight: 900; font-size: 1rem; letter-spacing: -0.5px; color: #fff; }
.brand span { color: var(--accent); }
.brand small { color: #666; font-size: 0.7em; margin-left: 2px; text-transform: uppercase; }

.btn-sim-toggle {
  background: #222; border: 1px solid var(--border); color: #888;
  padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  transition: all 0.2s;
}
.btn-sim-toggle:hover { border-color: #555; color: #fff; }
.btn-sim-toggle .indicator { width: 8px; height: 8px; border-radius: 50%; background: #555; }
.btn-sim-toggle.running { border-color: rgba(0, 200, 83, 0.3); color: #fff; background: rgba(0, 200, 83, 0.05); }
.btn-sim-toggle.running .indicator { background: var(--trade-buy); box-shadow: 0 0 6px var(--trade-buy); }

.nav-links a { font-size: 12px; color: var(--text-secondary); text-decoration: none; margin-left: 15px; }
.nav-links a.active { color: #fff; }


/* --- Main Layout --- */
.simulator-container {
  display: grid;
  grid-template-columns: 240px 1fr 240px; /* Fixed sidebars, flex middle */
  height: calc(100vh - 40px);
  width: 100%;
  overflow: hidden; 
  position: relative;
}

/* --- Left Panel (Controls) --- */
.panel-left {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
}

.panel-section { border-bottom: 1px solid #2a2a2a; padding-bottom: 12px; }
.panel-section:last-child { border-bottom: none; }
.panel-title { font-size: 10px; text-transform: uppercase; color: #555; margin-bottom: 8px; font-weight: 700; letter-spacing: 0.5px; }

/* Account Grid */
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-box { background: #151515; border: 1px solid #252525; padding: 6px; border-radius: 3px; }
.stat-label { display: block; font-size: 9px; color: #666; text-transform: uppercase; }
.stat-val { font-family: "Roboto Mono", monospace; font-size: 12px; font-weight: 700; color: #ddd; }

/* Control Rows */
.control-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.control-row.space-between { justify-content: space-between; }
.lbl { font-size: 11px; font-weight: 600; color: #aaa; min-width: 30px; }

.qty-input {
  background: var(--bg-input); border: 1px solid #333; color: #fff;
  padding: 6px; text-align: center; font-size: 14px; font-weight: 700;
  border-radius: 3px; width: 100%; font-family: "Roboto Mono";
}
.qty-input:focus { border-color: var(--accent); outline: none; }

/* Buttons */
.action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.action-buttons.secondary { margin-top: 5px; }

.btn {
  border: 1px solid transparent; padding: 8px 0; border-radius: 3px;
  font-size: 11px; font-weight: 700; cursor: pointer; transition: 0.1s;
  text-transform: uppercase; color: #fff;
}
.btn:active { transform: translateY(1px); }

.btn-buy { background: #004d40; border-color: #00695c; color: #80cbc4; }
.btn-buy:hover { background: #00695c; color: #fff; }
.btn-sell { background: #b71c1c; border-color: #c62828; color: #ffcdd2; }
.btn-sell:hover { background: #c62828; color: #fff; }

.btn-flat { background: #37474f; border-color: #455a64; }
.btn-cancel { background: #333; border-color: #444; color: #aaa; }
.btn-cancel:hover { background: #b71c1c; color: #fff; border-color: #c62828; }

.btn-tool {
  background: #252525; border: 1px solid #333; color: #ccc;
  padding: 5px 10px; border-radius: 3px; font-size: 10px; cursor: pointer; flex: 1;
}
.btn-tool:hover { background: #333; }
.full-width { width: 100%; margin-top: 5px; }
.btn-ai-text { background: linear-gradient(90deg, #1a237e, #0d47a1); border: 1px solid #283593; color: #fff; }

/* Strategy Inputs */
.strategy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.input-group { position: relative; }
.input-group .prefix { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-size: 9px; color: #555; }
.strategy-input { width: 100%; background: #000; border: 1px solid #333; color: #ccc; padding: 4px 4px 4px 20px; font-size: 11px; text-align: center; border-radius: 3px; }

/* Range Slider */
.range-slider { width: 100%; height: 4px; background: #333; border-radius: 2px; -webkit-appearance: none; }
.range-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: #666; border-radius: 50%; cursor: pointer; }

/* Toggle Switch */
.switch { position: relative; display: inline-block; width: 30px; height: 16px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 16px; }
.slider:before { position: absolute; content: ""; height: 10px; width: 10px; left: 3px; bottom: 3px; background-color: #888; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent); }
input:checked + .slider:before { transform: translateX(14px); background-color: #fff; }

/* --- Center Panel (DOM) --- */
.panel-center {
  background: #000;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden; 
  border-right: 1px solid var(--border);
}

.dom-header {
  flex: 0 0 24px;
  display: grid;
  grid-template-columns: 40px 60px 80px 60px 40px; /* Default Desktop */
  background: #181818;
  border-bottom: 1px solid #333;
  font-size: 10px; font-weight: 700; color: #777;
  text-align: center; line-height: 24px; text-transform: uppercase;
  z-index: 10;
}

.dom-body {
  flex: 1 1 auto;
  overflow-y: scroll;
  scrollbar-width: none;
  position: relative;
}
.dom-body::-webkit-scrollbar { display: none; }

.dom-row {
  display: grid;
  grid-template-columns: 40px 60px 80px 60px 40px; /* Default Desktop matches header */
  height: var(--dom-cell-height);
  border-bottom: 1px solid #111;
  font-family: "Roboto Mono", monospace;
  font-size: var(--dom-font-size);
  cursor: crosshair;
}
.dom-row:hover { background: #111; }

/* Cells */
.cell { display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; }
.cell-price { background: #151515; color: #999; font-weight: 600; border-left: 1px solid #222; border-right: 1px solid #222; }
.cell-ltp { background: #fdd835 !important; color: #000 !important; font-weight: 800; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }

.cell-bid, .cell-ask { color: #fff; cursor: pointer; font-weight: 600; }
.cell-bid:hover { background: rgba(2, 119, 189, 0.2); }
.cell-ask:hover { background: rgba(211, 47, 47, 0.2); }

.cell-delta { font-size: 10px; color: #666; }
.cell-vol { font-size: 10px; color: #555; padding-right: 2px; justify-content: flex-end; }

/* Visual Bars */
.vol-bar { position: absolute; top: 1px; bottom: 1px; opacity: 0.6; z-index: -1; }
.vol-bar-bid { right: 0; background: var(--bid-color); border-left: 1px solid rgba(255,255,255,0.1); }
.vol-bar-ask { left: 0; background: var(--ask-color); border-right: 1px solid rgba(255,255,255,0.1); }
.delta-bar { position: absolute; top: 4px; bottom: 4px; opacity: 0.5; left: 0; }
.vol-profile-bar { position: absolute; left: 0; top: 2px; bottom: 2px; background: #333; opacity: 0.8; z-index: -1; }

/* Orders & Ghosts */
.order-pill {
  position: absolute; font-size: 9px; background: #fff; color: #000;
  font-weight: 800; padding: 0 4px; border-radius: 2px; z-index: 10;
  box-shadow: 0 1px 2px rgba(0,0,0,0.8); cursor: grab; min-width: 16px; text-align: center;
  height: 14px; line-height: 14px;
}
.pill-buy { left: 2px; border-left: 3px solid var(--trade-buy); }
.pill-sell { right: 2px; border-right: 3px solid var(--trade-sell); }
#drag-ghost { position: fixed; pointer-events: none; z-index: 9999; opacity: 0.9; transform: translate(-50%, -120%); }
#hover-ghost { position: absolute; pointer-events: none; z-index: 20; opacity: 0.5; padding: 0 4px; font-size: 9px; border: 1px dashed #fff; color: #fff; display: none; }

/* Auto Center Button */
.btn-recenter {
  position: absolute; bottom: 60px; right: 20px;
  background: rgba(30,30,30,0.8); border: 1px solid #444; color: #888;
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: 0.2s; z-index: 40;
}
.btn-recenter:hover, .auto-center-active { background: #333; color: var(--accent); border-color: var(--accent); }
.btn-recenter svg { width: 16px; height: 16px; fill: currentColor; }

/* Replay Controls */
.replay-controls {
  flex: 0 0 36px; background: #181818; border-top: 1px solid #333;
  display: flex; align-items: center; padding: 0 10px; gap: 10px;
  overflow-x: auto;
}
.btn-replay-icon { background: none; border: none; color: #555; font-weight: 700; font-size: 11px; cursor: pointer; white-space: nowrap; }
.btn-replay-icon.active { color: var(--trade-buy); }
.replay-bar { flex: 1; display: flex; align-items: center; gap: 8px; width: 100%; }
.replay-btn-group { display: flex; gap: 4px; }
.btn-replay-step { background: #333; border: 1px solid #444; color: #ccc; width: 24px; height: 24px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.btn-replay-step:hover { background: #444; color: #fff; }
.btn-replay-step:active { background: #555; }
.replay-speed-select { background: #333; border: 1px solid #444; color: #ccc; font-size: 10px; padding: 2px 4px; border-radius: 3px; cursor: pointer; outline: none; }

/* --- Right Panel (Tape) --- */
.panel-right {
  background: var(--bg-panel);
  display: flex; flex-direction: column;
}

.tape-header {
  padding: 0 10px; height: 24px; line-height: 24px;
  font-size: 10px; font-weight: 700; border-bottom: 1px solid #333;
  color: #777; display: flex; justify-content: space-between; background: #181818; text-transform: uppercase;
}
.tape-list { flex: 1; overflow-y: auto; font-family: "Roboto Mono", monospace; font-size: 11px; }
.tape-row {
  display: grid; grid-template-columns: 0.8fr 1fr 0.8fr; padding: 2px 10px; border-bottom: 1px solid #222;
}
.tape-row div:first-child { color: #555; }
.tape-row div:last-child { text-align: right; font-weight: 700; }

/* --- Drawers --- */
.journal-drawer, .ai-drawer {
  position: absolute; top: 0; width: 300px; height: 100%; background: #181818; z-index: 100;
  transition: 0.3s; display: flex; flex-direction: column; box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
.journal-drawer { left: -310px; border-right: 1px solid #333; }
.ai-drawer { right: -310px; border-left: 1px solid var(--accent); }
.journal-drawer.open { left: 0; }
.ai-drawer.open { right: 0; }

.ai-header { padding: 10px; background: #111; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
.ai-title { font-weight: 700; font-size: 12px; color: #ccc; display: flex; gap: 6px; align-items: center; }
.ai-status { width: 6px; height: 6px; border-radius: 50%; background: var(--trade-buy); }
.btn-close { background: none; border: none; color: #666; cursor: pointer; }

.journal-content, .chat-history { flex: 1; overflow-y: auto; padding: 10px; }
.journal-input-area, .chat-input-area { padding: 10px; background: #151515; border-top: 1px solid #333; }
textarea { width: 100%; background: #000; border: 1px solid #333; color: #ccc; padding: 8px; font-size: 12px; resize: none; border-radius: 3px; }
textarea:focus { border-color: var(--accent); outline: none; }
.btn-save { width: 100%; margin-top: 8px; background: #333; color: #ccc; font-size: 11px; padding: 6px; border: 1px solid #444; cursor: pointer; }
.btn-save:hover { background: #444; color: #fff; }

.journal-entry { background: #222; padding: 8px; border-radius: 3px; margin-bottom: 8px; font-size: 11px; border: 1px solid #333; }
.journal-entry-header { display: flex; justify-content: space-between; color: #666; font-size: 10px; margin-bottom: 4px; }
.journal-pnl { font-weight: 700; }

.chat-msg { padding: 8px; margin-bottom: 8px; border-radius: 4px; font-size: 12px; line-height: 1.4; max-width: 90%; }
.msg-ai { background: #222; border-left: 2px solid var(--accent); align-self: flex-start; }
.msg-user { background: rgba(41, 121, 255, 0.1); color: #fff; align-self: flex-end; margin-left: auto; }

/* --- Toast --- */
.toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; pointer-events: none; }
.toast { background: #222; border-left: 3px solid var(--accent); color: #fff; padding: 10px 15px; border-radius: 3px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); font-size: 11px; opacity: 0; animation: toastIn 0.3s forwards; pointer-events: auto; display: flex; justify-content: space-between; min-width: 200px; }
.toast.success { border-left-color: var(--trade-buy); }
.toast.error { border-left-color: var(--trade-sell); }
@keyframes toastIn { to { opacity: 1; } }

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

@media (max-width: 768px) {
  /* Stack everything vertically */
  .simulator-container {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow-y: auto; /* Body scrolls on mobile */
  }

  /* 1. Controls at Top (Compact) */
  .panel-left {
    order: 1;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px;
    height: auto;
    flex: 0 0 auto;
  }
  .account-grid { grid-template-columns: repeat(4, 1fr); }
  .mobile-hidden { display: none; }
  .btn-sim-toggle span#sim-btn-text { display: none; } /* Icon only on mobile header */

  /* 2. DOM in Middle (Maximize Height) */
  .panel-center {
    order: 2;
    height: 65vh; /* Fixed height window for DOM on mobile */
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  /* Optimize Columns for Mobile width */
  .dom-header, .dom-row {
    grid-template-columns: 0px 1fr 60px 1fr 0px; /* Hide Delta/Vol on small screens */
  }
  .col-delta, .col-vol, .cell-delta, .cell-vol { display: none; }
  
  /* 3. Tape at Bottom */
  .panel-right {
    order: 3;
    height: 30vh;
    border-left: none;
  }

  .journal-drawer, .ai-drawer { width: 85%; }
  .journal-drawer { left: -90%; }
  .ai-drawer { right: -90%; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet optimization */
  .simulator-container { grid-template-columns: 200px 1fr 200px; }
  .dom-header, .dom-row { grid-template-columns: 30px 50px 70px 50px 30px; }
}