/* ============================================================================
   Visor: Verbose Panel
   BEM block: .visor-verbose
   Replaces: .visor-verbose-panel, .verbose-panel-header, .verbose-panel-title,
             .verbose-panel-title-text, .verbose-panel-tabs, .verbose-tab,
             .verbose-panel-close, .verbose-panel-content, .verbose-tab-content,
             .state-graph-controls, .state-graph-btn, .state-graph-container,
             .state-graph-empty, .state-graph-legend, .legend-item, .legend-dot,
             .timeline-container, .timeline-empty, .timeline-row, .timeline-label,
             .timeline-bar-container, .timeline-bar, .timeline-legend,
             .timeline-bar-sample, .context-tree-toolbar, .context-btn,
             .context-tree-container, .context-tree-empty, .json-tree, .json-key,
             .json-string, .json-number, .json-boolean, .json-null, .json-bracket,
             .json-toggle, .verbose-metrics, .metric-item, .metric-label,
             .metric-value
   ============================================================================ */

@scope (beam-visor) {

  /* -- Block ---------------------------------------------------------------- */

  .visor-verbose {
    display: none;
    position: absolute;
    top: 4rem;
    left: var(--space-lg);
    right: var(--space-lg);
    bottom: 5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-purple);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    z-index: 11;
    flex-direction: column;
  }

  .visor-verbose.visible {
    display: flex;
  }

  /* -- Header --------------------------------------------------------------- */

  .visor-verbose__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-purple);
    color: white;
    border-radius: 7px 7px 0 0;
  }

  /* -- Title ---------------------------------------------------------------- */

  .visor-verbose__title {
    display: flex;
    align-items: center;
  }

  .visor-verbose__title svg {
    width: 14px;
    height: 14px;
  }

  .visor-verbose__title-text {
    font-weight: var(--weight-semibold);
    font-size: 0.8rem;
    margin-right: var(--space-lg);
  }

  /* -- Tabs ----------------------------------------------------------------- */

  .visor-verbose__tabs {
    display: flex;
    gap: 0.25rem;
    flex: 1;
  }

  .visor-verbose__tab {
    padding: 0.3rem var(--space-md);
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .visor-verbose__tab:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
  }

  .visor-verbose__tab.active {
    background: white;
    color: var(--color-purple);
  }

  /* -- Close ---------------------------------------------------------------- */

  .visor-verbose__close {
    background: none;
    border: none;
    color: white;
    font-size: var(--space-lg);
    cursor: pointer;
    opacity: 0.8;
    margin-left: auto;
  }

  .visor-verbose__close:hover {
    opacity: 1;
  }

  /* -- Content -------------------------------------------------------------- */

  .visor-verbose__content {
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  /* -- Tab Content ---------------------------------------------------------- */

  .visor-verbose__tab-content {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    padding: var(--space-lg);
    overflow: auto;
  }

  .visor-verbose__tab-content.active {
    display: flex;
  }

  /* -- State Graph Controls ------------------------------------------------- */

  .visor-verbose__graph-controls {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
  }

  .visor-verbose__graph-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem var(--space-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .visor-verbose__graph-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
  }

  .visor-verbose__graph-btn--fail:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
  }

  .visor-verbose__graph-btn svg {
    width: 12px;
    height: 12px;
  }

  /* -- State Graph Container ------------------------------------------------ */

  .visor-verbose__graph-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    min-height: 200px;
  }

  .visor-verbose__graph-empty {
    color: var(--color-muted);
    text-align: center;
  }

  .visor-verbose__graph-svg {
    max-width: 100%;
    max-height: 100%;
  }

  /* -- State Graph Legend ---------------------------------------------------- */

  .visor-verbose__graph-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: var(--space-lg);
    font-size: 0.7rem;
  }

  .visor-verbose__legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-muted);
  }

  .visor-verbose__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-muted);
  }

  .visor-verbose__legend-dot--pending {
    background: var(--color-muted);
  }

  .visor-verbose__legend-dot--current {
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
  }

  .visor-verbose__legend-dot--complete {
    background: var(--color-success);
  }

  .visor-verbose__legend-dot--error {
    background: var(--color-danger);
  }

  /* -- Timeline ------------------------------------------------------------- */

  .visor-verbose__timeline {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
  }

  .visor-verbose__timeline-empty {
    color: var(--color-muted);
    text-align: center;
    padding: 2rem;
  }

  .visor-verbose__timeline-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .visor-verbose__timeline-label {
    width: 120px;
    font-size: 0.7rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .visor-verbose__timeline-bar-container {
    flex: 1;
    height: 20px;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
  }

  .visor-verbose__timeline-bar {
    position: absolute;
    height: 100%;
    border-radius: var(--radius-sm);
    opacity: 0.8;
    transition: width 0.3s ease;
  }

  .visor-verbose__timeline-bar--tool {
    background: var(--color-accent);
  }

  .visor-verbose__timeline-bar--agent {
    background: var(--color-success);
  }

  .visor-verbose__timeline-bar--approval {
    background: var(--color-warning);
  }

  .visor-verbose__timeline-bar--wait {
    background: var(--color-muted);
  }

  .visor-verbose__timeline-bar--error {
    background: var(--color-danger);
  }

  .visor-verbose__timeline-duration {
    width: 60px;
    font-size: 0.65rem;
    color: var(--color-muted);
    text-align: right;
  }

  /* -- Timeline Legend ------------------------------------------------------ */

  .visor-verbose__timeline-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    font-size: 0.65rem;
  }

  .visor-verbose__timeline-bar-sample {
    display: inline-block;
    width: 20px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.35rem;
    vertical-align: middle;
  }

  .visor-verbose__timeline-bar-sample--tool {
    background: var(--color-accent);
  }

  .visor-verbose__timeline-bar-sample--agent {
    background: var(--color-success);
  }

  .visor-verbose__timeline-bar-sample--approval {
    background: var(--color-warning);
  }

  .visor-verbose__timeline-bar-sample--wait {
    background: var(--color-muted);
  }

  /* -- Context Tree --------------------------------------------------------- */

  .visor-verbose__context-toolbar {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
  }

  .visor-verbose__context-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.65rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .visor-verbose__context-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .visor-verbose__context-tree {
    flex: 1;
    overflow: auto;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    font-family: var(--font-mono);
    font-size: 0.7rem;
  }

  .visor-verbose__context-empty {
    color: var(--color-muted);
    text-align: center;
  }

  /* -- JSON Tree ------------------------------------------------------------ */

  .visor-verbose__json-tree {
    line-height: 1.6;
  }

  .visor-verbose__json-key {
    color: var(--color-purple);
  }

  .visor-verbose__json-string {
    color: var(--color-success);
  }

  .visor-verbose__json-number {
    color: var(--color-warning);
  }

  .visor-verbose__json-boolean {
    color: var(--color-orange);
  }

  .visor-verbose__json-null {
    color: var(--color-muted);
  }

  .visor-verbose__json-bracket {
    color: var(--color-muted);
  }

  .visor-verbose__json-toggle {
    cursor: pointer;
    user-select: none;
    margin-right: 0.25rem;
  }

  .visor-verbose__json-toggle:hover {
    color: var(--color-accent);
  }

  .visor-verbose__json-collapsed > .visor-verbose__json-children {
    display: none;
  }

  .visor-verbose__json-collapsed > .visor-verbose__json-toggle::before {
    content: '+';
  }

  .visor-verbose__json-expanded > .visor-verbose__json-toggle::before {
    content: '-';
  }

  /* -- Metrics -------------------------------------------------------------- */

  .visor-verbose__metrics {
    display: flex;
    gap: 1.5rem;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 7px 7px;
  }

  .visor-verbose__metric-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
  }

  .visor-verbose__metric-label {
    color: var(--color-muted);
  }

  .visor-verbose__metric-value {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    font-family: var(--font-mono);
  }
}