/* ============================================================
   SENTIO — Live Monitor Styles (Updated)
   Replace dashboard/css/liveMonitor.css entirely with this
   ============================================================ */

/* ── OVERLAY ── */
#lm-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.85);
  z-index:         1100;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  animation:       lmFadeIn 0.2s ease;
}

@keyframes lmFadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes lmSlideUp {
  from { transform: translateY(100px); opacity: 0 }
  to   { transform: translateY(0);     opacity: 1 }
}

/* ── BOTTOM SHEET — much taller now ── */
#lm-sheet {
  width:          100%;
  max-width:      1100px;       /* wider */
  height:         88vh;         /* tall — almost full screen */
  background:     var(--bg-panel);
  border-top:     1px solid var(--border-bright);
  border-radius:  20px 20px 0 0;
  display:        flex;
  flex-direction: column;
  animation:      lmSlideUp 0.3s cubic-bezier(0.34, 1.05, 0.64, 1);
  overflow:       hidden;
}

/* ── DRAG HANDLE ── */
#lm-handle {
  width:         40px;
  height:        4px;
  background:    var(--border-bright);
  border-radius: 2px;
  margin:        12px auto 0;
  flex-shrink:   0;
}

/* ── HEADER ── */
#lm-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 24px 12px;
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
}

#lm-header-left {
  display:     flex;
  align-items: center;
  gap:         12px;
}

#lm-symbol {
  font-family:    var(--font-display);
  font-size:      20px;
  letter-spacing: 3px;
  color:          var(--text-primary);
}

.lm-dir-badge {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 1.5px;
  font-weight:    600;
  padding:        4px 10px;
  border-radius:  4px;
  border:         1px solid;
}

#lm-live-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--accent-green);
  animation:     livePulse 1.8s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1;   transform: scale(1);    box-shadow: 0 0 0 0 rgba(0,230,118,0.4); }
  50%       { opacity: 0.6; transform: scale(0.85); box-shadow: 0 0 0 6px rgba(0,230,118,0); }
}

#lm-live-label {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 2px;
  color:          var(--accent-green);
}

/* P&L in header — big and prominent */
#lm-header-pnl {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            2px;
}

#lm-pnl-value {
  font-family:    var(--font-display);
  font-size:      26px;
  letter-spacing: 2px;
  line-height:    1;
  transition:     color 0.3s;
}

#lm-pnl-pct {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-dim);
}

#lm-close {
  background:  transparent;
  border:      1px solid var(--border);
  color:       var(--text-dim);
  width:       32px;
  height:      32px;
  border-radius: 50%;
  cursor:      pointer;
  font-size:   14px;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  all 0.15s;
  margin-left: 16px;
}
#lm-close:hover { border-color: var(--accent-red); color: var(--accent-red); }

/* ── BODY — two columns ── */
#lm-body {
  display:    grid;
  grid-template-columns: 1.1fr 0.9fr;
  flex:       1;
  overflow-y: auto;
  min-height: 0;
}

#lm-scores-col {
  padding:      20px 24px;
  border-right: 1px solid var(--border);
  display:      flex;
  flex-direction: column;
  gap:          16px;
}

#lm-coach-col {
  padding:        20px 24px;
  display:        flex;
  flex-direction: column;
  gap:            16px;
  overflow-y:     auto;
}

.lm-col-title {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 2px;
  color:          var(--text-dim);
  text-transform: uppercase;
  margin-bottom:  4px;
}

/* ── HERO SCORE — big central score ── */
#lm-hero-score {
  display:        flex;
  align-items:    center;
  gap:            20px;
  background:     var(--bg-card);
  border:         1px solid var(--border);
  border-radius:  var(--radius-md);
  padding:        20px 24px;
}

#lm-hero-number {
  font-family:    var(--font-display);
  font-size:      96px;          /* BIG */
  letter-spacing: 2px;
  line-height:    1;
  transition:     color 0.4s;
  min-width:      120px;
  text-align:     center;
}

#lm-hero-right {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  flex:           1;
}

#lm-hero-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 2px;
  color:          var(--text-dim);
}

#lm-hero-signal {
  font-family:    var(--font-display);
  font-size:      18px;
  letter-spacing: 3px;
}

#lm-hero-thesis {
  font-family:  var(--font-mono);
  font-size:    11px;
  line-height:  1.5;
  padding:      8px 10px;
  border-radius:var(--radius-sm);
  border:       1px solid;
}

/* thesis variants */
.lm-thesis-good    { color: var(--accent-green);   background: var(--green-dim);  border-color: var(--accent-green)40;  }
.lm-thesis-warn    { color: var(--accent-amber);   background: var(--amber-dim);  border-color: var(--accent-amber)40; }
.lm-thesis-danger  { color: var(--accent-red);     background: var(--red-dim);    border-color: var(--accent-red)40;   }
.lm-thesis-neutral { color: var(--text-secondary); background: var(--bg-card);   border-color: var(--border);          }

/* ── SUPPORTING SCORE TILES — smaller 3 ── */
#lm-score-tiles {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            var(--border);
  border-radius:         var(--radius-md);
  overflow:              hidden;
}

.lm-tile {
  background:  var(--bg-card);
  padding:     14px 8px 12px;
  text-align:  center;
}

.lm-tile-val {
  font-family:  var(--font-display);
  font-size:    26px;
  line-height:  1;
  margin-bottom:4px;
  transition:   color 0.3s;
}

.lm-tile-lbl {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 1px;
  color:          var(--text-dim);
}

/* ── LIVE GRAPH ── */
#lm-graph-wrap {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       14px 16px 10px;
  flex:          1;
  min-height:    240px;
  display:       flex;
  flex-direction:column;
}

#lm-graph-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   10px;
}

.lm-graph-title {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 2px;
  color:          var(--text-dim);
}

.lm-graph-legend {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.lm-legend-item {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-family: var(--font-mono);
  font-size:   9px;
  color:       var(--text-dim);
}

.lm-legend-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
}

#lm-graph-svg {
  flex: 1;
  width: 100%;
}

.lm-graph-empty {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-dim);
  text-align:  center;
  padding:     32px 0;
}

.lm-spark-labels {
  display:         flex;
  justify-content: space-between;
  font-family:     var(--font-mono);
  font-size:       9px;
  color:           var(--text-dim);
  margin-top:      6px;
}

/* ── ENTRY CONTEXT ── */
#lm-entry-ctx {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           1px;
  background:    var(--border);
  border-radius: var(--radius-sm);
  overflow:      hidden;
}

.lm-entry-cell {
  background:  var(--bg-card);
  padding:     10px 12px;
}

.lm-entry-label {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 1px;
  color:          var(--text-dim);
  margin-bottom:  4px;
}

.lm-entry-val {
  font-family: var(--font-mono);
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
}

/* ── TONE PICKER ── */
#lm-tone-picker { margin-bottom: 4px; }

.lm-tone-title {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 1px;
  color:          var(--text-secondary);
  margin-bottom:  10px;
  text-align:     center;
}

.lm-tone-opts {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   6px;
}

.lm-tone-opt {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       12px 8px;
  text-align:    center;
  cursor:        pointer;
  transition:    all 0.15s;
}

.lm-tone-opt:hover { border-color: var(--accent-blue); background: var(--blue-dim); }

.lm-tone-icon { font-size: 22px; margin-bottom: 6px; }
.lm-tone-name { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-primary); }
.lm-tone-desc { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); margin-top: 3px; }

/* ── BREATHING EXERCISE ── */
#lm-breathing { text-align: center; }

.lm-breathing-title {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 2px;
  color:          var(--text-dim);
  margin-bottom:  12px;
}

#lm-breath-circle {
  width:         88px;
  height:        88px;
  border-radius: 50%;
  border:        2px solid var(--accent-blue);
  background:    var(--blue-dim);
  margin:        0 auto 10px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  transition:    transform 4s ease-in-out, background 0.3s;
  user-select:   none;
}

#lm-breath-text {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 1px;
  color:          var(--accent-blue);
  font-weight:    600;
}

#lm-breath-instruction {
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--text-dim);
  line-height: 1.5;
}

/* ── COACH CARD ── */
#lm-coach-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-left:   3px solid var(--accent-purple);
  border-radius: var(--radius-sm);
  padding:       16px;
  flex:          1;
  min-height:    180px;
}

#lm-coach-text {
  font-size:   17px;
  color:       var(--text-primary);
  line-height: 2.0;
  font-style:  italic;
  transition:  opacity 0.4s;
}

#lm-coach-author {
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--text-dim);
  margin-top:  10px;
  letter-spacing: 0.5px;
  transition:  opacity 0.4s;
}

/* ── HOLD CHECK ── */
#lm-hold-check {
  background:    var(--bg-card);
  border:        1px solid var(--accent-amber)40;
  border-radius: var(--radius-sm);
  padding:       14px;
}

.lm-hold-q {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 1px;
  color:          var(--accent-amber);
  margin-bottom:  10px;
}

.lm-hold-opts { display: flex; flex-direction: column; gap: 6px; }

.lm-hold-opt {
  font-family:   var(--font-mono);
  font-size:     11px;
  color:         var(--text-secondary);
  background:    var(--bg-panel);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       9px 12px;
  cursor:        pointer;
  transition:    all 0.15s;
}

.lm-hold-opt:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

.lm-hold-answer {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-secondary);
  line-height: 1.6;
}

/* ── MOBILE ── */
@media (max-width: 700px) {
  #lm-sheet               { height: 92vh; }
  #lm-body                { grid-template-columns: 1fr; }
  #lm-scores-col          { border-right: none; border-bottom: 1px solid var(--border); }
  #lm-score-tiles         { grid-template-columns: repeat(3, 1fr); }
  #lm-hero-number         { font-size: 52px; }
  #lm-pnl-value           { font-size: 20px; }
}
/* ============================================================
   LIVE MONITOR — MOBILE OPTIMISATION
   ============================================================ */

@media (max-width: 768px) {

  /* Full screen overlay */
  #lm-overlay {
    align-items: flex-start;
  }

  /* Sheet takes full screen */
  #lm-sheet {
    height:        100dvh !important;
    max-height:    100dvh !important;
    border-radius: 0 !important;
    max-width:     100% !important;
  }

  /* Header — compact */
  #lm-header {
    padding: 10px 14px !important;
  }

  #lm-header-left { gap: 8px !important; }
  #lm-symbol      { font-size: 18px !important; }

  /* P&L — prominent */
  #lm-pnl-value   { font-size: 24px !important; }

  /* Body — single column stack */
  #lm-body {
    display:               flex !important;
    flex-direction:        column !important;
    gap:                   12px !important;
    padding:               12px !important;
    overflow-y:            auto !important;
    height:                calc(100dvh - 60px) !important;
  }

  /* Left panel — full width */
  #lm-left  { width: 100% !important; }

  /* Right panel (coach) — collapsed by default on mobile */
  #lm-right {
    width:   100% !important;
    display: none !important;
  }

  /* Hero score — bigger */
  #lm-hero-number { font-size: 72px !important; }
  #lm-hero-signal { font-size: 16px !important; }

  /* Tiles — 2x2 grid */
  #lm-tiles {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Graph — full width */
  #lm-graph-wrap {
    width: 100% !important;
  }

  /* Entry context — 2 columns */
  #lm-entry-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Score box — bigger on mobile */
  .lm-score-box {
    padding: 12px !important;
  }

  .lm-score-val  { font-size: 28px !important; }
  .lm-score-label{ font-size: 9px !important; }

  /* Thesis alert — full width readable */
  #lm-hero-thesis {
    font-size:   12px !important;
    padding:     10px 12px !important;
    line-height: 1.5 !important;
  }

  /* Hold check — full width */
  #lm-hold-check { padding: 12px !important; }
  .lm-hold-opts  { grid-template-columns: 1fr 1fr !important; }
  .lm-hold-opt   { font-size: 11px !important; padding: 8px !important; }

  /* Breathing circle — centered */
  #lm-breath-circle {
    width:  100px !important;
    height: 100px !important;
  }

  /* Show coach toggle button on mobile */
  #lm-coach-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
  }
}