*{margin:0;padding:0;box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0a0a0a}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#e0e0e0}

/* Header */
.app-header{display:flex;align-items:center;justify-content:space-between;padding:4px 16px;border-bottom:1px solid #1a1a1a;flex-shrink:0;height:36px}
.header-left{display:flex;align-items:center;gap:8px}
.header-right{display:flex;align-items:center;gap:12px}
.logo{font-size:14px;font-weight:700;letter-spacing:-.5px}
.pair-badge{font-size:9px;font-weight:600;background:#1a1a1a;padding:2px 7px;border-radius:4px;color:#666}
.status-dot{font-size:9px;transition:color .3s}
.status-dot.online{color:#4ade80}.status-dot.offline{color:#444}.status-dot.connecting{color:#facc15}
.loading-text{font-size:11px;color:#333;animation:pulse 1.5s ease-in-out infinite}
.loading-text.loaded{animation:none;color:#4ade80}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
.mood-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;background:#1a1a1a;color:#666;transition:all .5s}
.mood-badge.strongBull,.mood-badge.mildBull{background:#052e16;color:#4ade80}
.mood-badge.neutral{background:#1a1a1a;color:#888}
.mood-badge.mildBear,.mood-badge.strongBear{background:#2a0a0a;color:#f87171}
.mood-badge.volatile{background:#1a1a0a;color:#fde047}
.price-text{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.5px}

/* Mode toggle (in ctrl-panel, same style as ctrl-btn) */
.mode-btn{flex:1;padding:4px 0;font-size:9px;font-weight:600;border:1px solid #1e1e1e;border-radius:4px;background:#141414;color:#444;cursor:pointer;transition:all .15s;text-align:center}
.mode-btn:hover{border-color:#333;color:#888}
.mode-btn.active[data-mode="classic"]{border-color:#666;color:#ccc;background:#1a1a1a}
.mode-btn.active[data-mode="jazz"]{border-color:#f59e0b;color:#f59e0b;background:#1a1505}


/* Volume number label */
.vol-num{font-size:9px;color:#666;min-width:18px;text-align:right;font-variant-numeric:tabular-nums}

/* Mobile volume in header — hidden on desktop */
.vol-mobile{display:none}

/* Grid */
#app{position:fixed;inset:0;display:flex;flex-direction:column}
.main-grid{display:grid;grid-template-columns:1fr 230px;gap:6px;padding:6px 10px;flex:1;min-height:0;overflow:clip}
.col-left{min-height:0;min-width:0;overflow:hidden}
.col-right{display:flex;flex-direction:column;gap:4px;min-height:0;overflow:clip}

/* Chart */
.chart-wrap{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden;background:#111;border:1px solid #1a1a1a}
#chart-container{width:100%;height:100%}
#visualizer-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Panels */
.panel{background:#111;border:1px solid #1a1a1a;border-radius:8px;overflow:hidden}

/* Controls panel */
.ctrl-panel{padding:8px 10px;flex-shrink:0;display:flex;flex-direction:column;gap:8px}
.ctrl-section{display:flex;align-items:center;gap:6px}
.ctrl-label{font-size:9px;color:#3a3a3a;width:52px;flex-shrink:0;text-transform:uppercase;letter-spacing:.3px}
.btn-group{display:flex;gap:3px;flex:1}
.ctrl-btn,.sens-btn{flex:1;padding:4px 0;font-size:9px;font-weight:600;border:1px solid #1e1e1e;border-radius:4px;background:#141414;color:#444;cursor:pointer;transition:all .15s;text-align:center}
.ctrl-btn:hover,.sens-btn:hover{border-color:#333;color:#888}
.ctrl-btn.active[data-mood="auto"]{border-color:#666;color:#ccc;background:#1a1a1a}
.ctrl-btn.active[data-mood="major"]{border-color:#4ade80;color:#4ade80;background:#051a0a}
.ctrl-btn.active[data-mood="minor"]{border-color:#f87171;color:#f87171;background:#1a0505}
.sens-btn.active{border-color:#facc15;color:#facc15;background:#1a1a05}
.tf-bar{position:absolute;top:8px;left:8px;z-index:10;display:flex;gap:3px}
.tf-btn{padding:3px 8px;font-size:9px;font-weight:600;border:1px solid #1e1e1e;border-radius:4px;background:rgba(20,20,20,0.85);color:#444;cursor:pointer;transition:all .15s;text-align:center;backdrop-filter:blur(4px)}
.tf-btn:hover{border-color:#333;color:#888}
.tf-btn.active{border-color:#60a5fa;color:#60a5fa;background:rgba(10,26,46,0.9)}
.vol-slider{flex:1;height:3px;-webkit-appearance:none;appearance:none;background:#222;border-radius:2px;outline:none}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:#555;cursor:pointer}
.vol-slider::-webkit-slider-thumb:hover{background:#888}

/* Stats */
.stats-panel{padding:8px 10px;display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.stat-row{display:flex;justify-content:space-between;align-items:center}
.stat-label{font-size:10px;color:#3a3a3a}
.stat-value{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}

/* Energy levels */
.energy-pp{color:#333}
.energy-p{color:#555}
.energy-mp{color:#888}
.energy-mf{color:#facc15}
.energy-f{color:#f97316}
.energy-ff{color:#ef4444;text-shadow:0 0 4px rgba(239,68,68,.5)}

/* Trade log — fills all space above Bach */
.log-panel{flex:1 1 0;min-height:40px}
.trade-log{height:100%;overflow-y:auto;padding:2px 0;scrollbar-width:thin;scrollbar-color:#1a1a1a transparent}
.trade-entry{display:flex;align-items:center;gap:4px;padding:2px 8px;font-size:10px;font-variant-numeric:tabular-nums}
.trade-side{font-weight:700;font-size:8px;width:24px;text-align:center;padding:1px 0;border-radius:2px}
.trade-side.buy{color:#4ade80;background:#052e16}.trade-side.sell{color:#f87171;background:#1a0505}
.trade-ex{font-size:7px;font-weight:700;width:16px;text-align:center;flex-shrink:0;opacity:.6}
.trade-price{color:#999;flex:1}.trade-vol{color:#444;width:48px;text-align:right}.trade-time{color:#2a2a2a;width:44px;text-align:right}
.trade-size-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.trade-size-dot.small{background:#333}.trade-size-dot.medium{background:#facc15}.trade-size-dot.large{background:#ef4444;box-shadow:0 0 3px #ef4444}

/* Bach panel — square at bottom, art fills it */
.bach-panel{flex-shrink:0;text-align:center;padding:4px 2px;transition:all .8s ease;overflow:hidden;aspect-ratio:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:auto}
.bach-panel:hover{background:#161616}
.bach-art{font-family:'SF Mono',Menlo,Consolas,'Courier New',monospace;font-size:6px;line-height:1.0;margin:0;color:#555;transition:color .8s ease;white-space:pre;letter-spacing:0px;text-align:left;display:inline-block}
.bach-label{display:block;font-family:'SF Mono',Menlo,Consolas,'Courier New',monospace;font-size:11px;font-weight:700;margin-top:2px;letter-spacing:2px;transition:color .8s}
.bach-panel.bull .bach-art{color:#4ade80}
.bach-panel.bull .bach-label{color:#4ade80}
.bach-panel.bear .bach-art{color:#f87171}
.bach-panel.bear .bach-label{color:#f87171}
.bach-panel.neutral .bach-art{color:#666}
.bach-panel.neutral .bach-label{color:#666}
.bach-panel.volatile .bach-art{color:#fde047}
.bach-panel.volatile .bach-label{color:#fde047}

/* Chat panel (CS-style collapsible, fixed) */
.chat-panel{position:fixed;bottom:12px;right:250px;z-index:60;width:280px;max-height:0;overflow:hidden;background:#111;border:1px solid #222;border-radius:10px;display:flex;flex-direction:column;transition:max-height .3s ease,opacity .3s ease;opacity:0;pointer-events:none}
.chat-panel.open{max-height:380px;opacity:1;pointer-events:auto}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #1a1a1a;flex-shrink:0}
.chat-header-title{font-size:11px;font-weight:700;color:#888;letter-spacing:.5px}
.chat-close-btn{background:none;border:none;color:#555;font-size:16px;cursor:pointer;padding:0 2px}
.chat-close-btn:hover{color:#aaa}
.chat-messages{flex:1;overflow-y:auto;padding:8px 12px;scrollbar-width:thin;scrollbar-color:#1a1a1a transparent;min-height:200px}
.chat-msg{padding:6px 0;border-bottom:1px solid #141414}
.chat-msg:last-child{border-bottom:none}
.chat-msg-text{font-size:12px;color:#bbb;line-height:1.4;display:block}
.chat-msg-time{font-size:9px;color:#333;margin-top:2px;display:block}
.chat-empty{font-size:11px;color:#333;text-align:center;padding:30px 0}
.chat-form{border-top:1px solid #1a1a1a;padding:8px;flex-shrink:0}
.chat-input{width:100%;background:#0a0a0a;border:1px solid #222;border-radius:6px;padding:8px 10px;font-size:12px;color:#ccc;font-family:inherit;outline:none}
.chat-input:focus{border-color:#444}

@media(max-width:768px){
  .app-header{padding:4px 10px;height:32px}
  .logo{font-size:12px}
  .pair-badge{font-size:8px}
  .price-text{font-size:14px}
  .mood-badge{font-size:9px;padding:2px 6px}
  .mode-btn{padding:3px 0;font-size:7px}
  .vol-mobile{display:block;width:48px;height:3px;flex:none}
  .main-grid{grid-template-columns:1fr 120px;gap:4px;padding:4px;padding-bottom:env(safe-area-inset-bottom,8px)}
  /* Show ctrl-panel compactly, hide stats and vol slider */
  .ctrl-panel{padding:4px 6px;gap:4px}
  .ctrl-label{display:none}
  .ctrl-section:last-child{display:none}
  .ctrl-btn{padding:3px 0;font-size:7px}
  .sens-btn{padding:3px 0;font-size:7px}
  .stats-panel{display:none}
  .col-right{gap:2px}
  .log-panel{border-radius:6px}
  .trade-entry{padding:1px 4px;gap:2px;font-size:9px}
  .trade-side{font-size:7px;width:18px;padding:1px 0}
  .trade-price{font-size:9px}
  .trade-vol{width:34px;font-size:8px}
  .trade-time{display:none}
  .trade-size-dot{width:3px;height:3px}
  .tf-bar{top:4px;left:4px;gap:2px}
  .tf-btn{padding:2px 5px;font-size:8px}
  .chart-wrap{border-radius:6px}
  .bach-panel{padding:2px 1px;aspect-ratio:1;width:100%;flex-shrink:0}
  .bach-art{font-size:3px;line-height:1.0}
  .bach-label{font-size:7px;margin-top:1px}
  .chat-panel{width:220px;right:130px;bottom:6px}
  .chat-panel.open{max-height:300px}
}