/* debug.css — the top-of-window console bar + its toggle button. Deliberately
 * utilitarian (green-on-black monospace, Quake console) and out of the TV theme. */

#dbgbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  display: none;                 /* shown only when debug is on */
  max-height: 20px;              /* collapsed: a single line */
  padding: 0 8px 0 46px;         /* leave room for the DBG button on the left */
  background: rgba(0, 0, 0, 0.86);
  border-bottom: 1px solid #1d6f1d;
  color: #4dff4d;
  font: 12px/20px "Courier New", monospace;
  white-space: pre;              /* honour the structured line breaks */
  overflow: hidden;
  cursor: pointer;               /* click to expand / collapse */
  pointer-events: auto;
  text-shadow: 0 0 4px rgba(77, 255, 77, 0.5);
  transition: max-height 0.2s ease;
}
/* expanded: slides down into a full structured panel */
#dbgbar.expanded {
  max-height: 70vh;
  overflow-y: auto;
  padding-top: 4px;
  padding-bottom: 8px;
  line-height: 17px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

#debug {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100001;
  height: 20px;
  padding: 0 6px;
  border: 1px solid #2a2a2a;
  border-radius: 0 0 4px 0;
  background: rgba(20, 20, 20, 0.55);
  color: #6a6a6a;
  font: 700 10px/18px "Courier New", monospace;
  letter-spacing: 1px;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s;
}
#debug:hover { opacity: 1; }
#debug.active {
  opacity: 1;
  background: #0b2a0b;
  border-color: #1d6f1d;
  color: #4dff4d;
}

/* HIST button sits just right of DBG; shown only while debug is on */
#dbghist {
  position: fixed;
  top: 0;
  left: 42px;
  z-index: 100001;
  display: none;
  height: 20px;
  padding: 0 6px;
  border: 1px solid #2a2a2a;
  border-radius: 0 0 4px 4px;
  background: rgba(20, 20, 20, 0.55);
  color: #6a6a6a;
  font: 700 10px/18px "Courier New", monospace;
  letter-spacing: 1px;
  cursor: pointer;
  opacity: 0.55;
}
#dbghist:hover { opacity: 1; }
#dbghist.active { opacity: 1; background: #0b2a0b; border-color: #1d6f1d; color: #4dff4d; }

/* play-history panel: scrollable list under the bar */
#histpanel {
  position: fixed;
  top: 20px;
  left: 0;
  width: min(560px, 96vw);
  max-height: 76vh;
  z-index: 100000;
  overflow-y: auto;
  padding: 6px 10px 10px;
  background: rgba(0, 0, 0, 0.93);
  border: 1px solid #1d6f1d;
  border-top: none;
  color: #cfe;
  font: 12px/17px "Courier New", monospace;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7);
}
#histpanel .hh { color: #4dff4d; font-weight: 700; margin-bottom: 6px; position: sticky; top: 0; background: rgba(0,0,0,0.95); padding-bottom: 3px; }
#histpanel .hr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#histpanel .hr.rep { color: #ffd24d; }      /* repeated videos stand out */
#histpanel .hi { color: #6a6a6a; }
#histpanel .ht { color: #4a8; }
#histpanel b { color: #fff; }