@charset "UTF-8";


#chartArea {
	display:none; min-width: 35vw !important; max-width: 60vw !important; flex: 1 1 42vw !important; 
	height: calc(100vh - var(--opus-bottom-bar-h)); max-height: calc(100vh - var(--opus-bottom-bar-h));
	background:#fff; border-left:2px solid #ddd; position:relative; overflow:hidden; padding:10px;
	 }
#chartLegend {
	position:absolute; top:10px; right:15px; background:rgba(255,255,255,0.92); padding:6px 10px; 
	border:1px solid #ddd; border-radius: calc(var(--ui-radius)/2); font-size:11px; line-height:1.6;
	 }

/* ============ OPUS: Charts panel layout ============ */

.workArea.charts-open {
  max-width: 40vw !important; min-width: 420px !important; overflow: hidden !important; justify-content: space-around;
     }
.workArea.charts-open .left {
  margin: 0 3px; width: 300px !important;
     }
.workArea.charts-open .right {
   width: 5px;
     }
.workArea.charts-open .right .output-data {
   display: none;
     }
.workArea.charts-open .right .leftSensor {
    left: -55px;
     }
.workArea.charts-open .leftSensor, .workArea.charts-open .rightSensor {
    min-width: 80px; height: 40px; font-size: 21px; line-height: 35px;
     }


/* ============ OPUS: Chart toolbar (period selector) ============ */

#opus-chart-toolbar {
  display: flex; align-items: center; padding: 4px 10px; background: var(--p00,#f5f0ff); 
  border-radius: var(--ui-radius); border-bottom: 1px solid var(--p0,#ede5ff); flex-shrink: 0; gap: 12px; min-height: 32px;
      }
.opus-chart-toolbar-label {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; white-space: nowrap;
      }
.opus-chart-select {
  padding: 3px 8px; border: 1.5px solid var(--p0,#ede5ff); border-radius: calc(var(--ui-radius)/2);
  font-size: 12px; background: #fff; color: var(--s7,#334155); cursor: pointer; outline: none; transition: border-color .2s;
       }
.opus-chart-select:focus {
  border-color: var(--p4,#7c3aed); box-shadow: 0 0 0 3px rgba(var(--p4-rgb),.1);
       }

/* ============ OPUS: Chart tooltip ============ */

.opus-chart-tooltip {
  position: absolute; z-index: 1000; background: rgba(255,255,255,0.96);
  border: 1.5px solid var(--p0,#ede5ff); border-radius: calc(var(--ui-radius)/2);
  padding: 8px 12px; box-shadow: 0 8px 24px rgba(var(--p8-rgb),.12); pointer-events: none;
  font-size: 12px; line-height: 1.5; min-width: 100px; max-width: 200px; backdrop-filter: blur(8px);
    }
.opus-tt-header {
  font-weight: 700; font-size: 11px; margin-bottom: 2px;
    }
.opus-tt-value {
  font-size: 14px; font-weight: 600; color: #333;
    }
.opus-tt-time {
  font-size: 10px; color: #888; margin-top: 2px;
    }

/* ============ OPUS: Chain select & info block ============ */

.workArea.charts-open .opus-chain-info {
  max-width: 180px; font-size: 10px;
     }