/* ============================================================================
   Visor: Observability Panel
   BEM block: .visor-obs
   Replaces: .visor-observability-panel, .observability-header,
             .observability-title, .observability-title-text,
             .observability-layout-btns, .layout-btn, .observability-actions,
             .obs-action-btn, .observability-close, .observability-replay-bar,
             .replay-controls, .replay-btn, .replay-btn-primary,
             .replay-timeline, .replay-track, .replay-progress,
             .replay-markers, .replay-marker, .replay-cursor, .replay-info,
             .replay-step, .replay-time, .replay-speed,
             .observability-panes, .obs-pane, .obs-pane-header,
             .obs-pane-title, .obs-pane-controls, .obs-event-filter,
             .obs-pane-btn, .obs-pane-content, .obs-empty,
             .obs-state-graph-container, .obs-timeline-container,
             .obs-timeline-row, .obs-timeline-label, .obs-timeline-bars,
             .obs-timeline-bar, .obs-events-list, .obs-event-item,
             .obs-event-time, .obs-event-type, .obs-event-message,
             .obs-context-viewer, .obs-context-json, .obs-context-diff,
             .obs-diff-line, .observability-snapshots, .snapshots-header,
             .snapshots-list, .snapshots-clear, .snapshot-thumb
   ============================================================================ */

@scope (beam-visor) {

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

  .visor-obs {
    display: none;
    position: absolute;
    top: 3rem;
    left: 0;
    right: 0;
    bottom: 3.5rem;
    background: var(--color-bg);
    border-top: 2px solid var(--color-cyan);
    z-index: 15;
    flex-direction: column;
  }

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

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

  .visor-obs__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-cyan) 15%, var(--color-bg)), var(--color-bg));
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .visor-obs__title {
    display: flex;
    align-items: center;
    color: var(--color-cyan);
  }

  .visor-obs__title svg {
    width: 16px;
    height: 16px;
  }

  .visor-obs__title-text {
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    color: var(--color-cyan);
    margin-left: 0.25rem;
  }

  .visor-obs__layout-btns {
    display: flex;
    gap: 0.25rem;
    margin-left: var(--space-lg);
    padding: 0.15rem;
    background: var(--color-surface-raised);
    border-radius: var(--radius-sm);
  }

  .visor-obs__layout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .visor-obs__layout-btn:hover {
    background: var(--color-bg);
    color: var(--color-text);
  }

  .visor-obs__layout-btn.active {
    background: var(--color-accent);
    color: #fff;
  }

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

  .visor-obs__actions {
    display: flex;
    gap: 0.35rem;
    margin-left: auto;
  }

  .visor-obs__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .visor-obs__action-btn:hover {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-cyan);
  }

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

  .visor-obs__close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: all var(--transition-fast);
  }

  .visor-obs__close:hover {
    background: var(--color-danger);
    color: #fff;
  }

  /* -- Replay Bar ----------------------------------------------------------- */

  .visor-obs__replay-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .visor-obs__replay-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .visor-obs__replay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .visor-obs__replay-btn:hover {
    border-color: var(--color-cyan);
    color: var(--color-text);
  }

  .visor-obs__replay-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

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

  .visor-obs__replay-btn--primary {
    width: 36px;
    height: 36px;
    background: var(--color-cyan);
    border-color: var(--color-cyan);
    color: #fff;
  }

  .visor-obs__replay-btn--primary:hover {
    background: color-mix(in srgb, var(--color-cyan) 80%, #fff);
  }

  .visor-obs__replay-btn--primary svg {
    width: 16px;
    height: 16px;
  }

  .visor-obs__replay-btn--playing {
    background: var(--color-warning);
    border-color: var(--color-warning);
  }

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

  .visor-obs__replay-timeline {
    flex: 1;
    position: relative;
    height: 24px;
  }

  .visor-obs__replay-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
  }

  .visor-obs__replay-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--color-cyan);
    border-radius: var(--radius-sm);
    transition: width 0.1s ease;
  }

  .visor-obs__replay-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    pointer-events: none;
  }

  .visor-obs__replay-marker {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    border-radius: 1px;
  }

  .visor-obs__replay-marker--tool {
    background: var(--color-success);
  }

  .visor-obs__replay-marker--agent {
    background: var(--color-accent);
  }

  .visor-obs__replay-marker--approval {
    background: var(--color-warning);
  }

  .visor-obs__replay-marker--error {
    background: var(--color-danger);
  }

  .visor-obs__replay-cursor {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: var(--color-cyan);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: grab;
    z-index: 2;
  }

  .visor-obs__replay-cursor:active {
    cursor: grabbing;
  }

  /* -- Replay Info ---------------------------------------------------------- */

  .visor-obs__replay-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
  }

  .visor-obs__replay-step {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-muted);
    min-width: 60px;
  }

  .visor-obs__replay-time {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text);
    min-width: 70px;
  }

  .visor-obs__replay-speed {
    font-size: 0.65rem;
    padding: 0.2rem 0.35rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
  }

  /* -- Panes Layout --------------------------------------------------------- */

  .visor-obs__panes {
    flex: 1;
    display: grid;
    gap: 1px;
    background: var(--color-border);
    overflow: hidden;
  }

  .visor-obs__panes[data-layout="quad"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .visor-obs__panes[data-layout="horizontal"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .visor-obs__panes[data-layout="vertical"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .visor-obs__panes[data-layout="single"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .visor-obs__panes[data-layout="single"] .visor-obs__pane:not(.visor-obs__pane--maximized) {
    display: none;
  }

  /* -- Pane ----------------------------------------------------------------- */

  .visor-obs__pane {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    overflow: hidden;
  }

  .visor-obs__pane--maximized {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }

  .visor-obs__pane-header {
    display: flex;
    align-items: center;
    padding: 0.35rem var(--space-sm);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .visor-obs__pane-title {
    font-size: 0.65rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    flex: 1;
  }

  .visor-obs__pane-controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;
  }

  .visor-obs__event-filter {
    width: 100px;
    font-size: 0.6rem;
    padding: 0.2rem 0.35rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
  }

  .visor-obs__event-filter:focus {
    outline: none;
    border-color: var(--color-cyan);
  }

  .visor-obs__pane-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .visor-obs__pane-btn:hover {
    background: var(--color-bg);
    color: var(--color-text);
  }

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

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

  .visor-obs__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-muted);
    font-size: 0.7rem;
    text-align: center;
  }

  /* -- State Graph Pane ----------------------------------------------------- */

  .visor-obs__graph {
    width: 100%;
    height: 100%;
    position: relative;
  }

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

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

  .visor-obs__timeline {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .visor-obs__timeline-row {
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .visor-obs__timeline-label {
    width: 80px;
    font-size: 0.6rem;
    color: var(--color-muted);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .visor-obs__timeline-bars {
    flex: 1;
    position: relative;
    height: 20px;
  }

  .visor-obs__timeline-bar {
    position: absolute;
    height: 16px;
    top: 2px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.25rem;
    cursor: pointer;
    transition: opacity var(--transition-fast);
  }

  .visor-obs__timeline-bar:hover {
    opacity: 0.8;
  }

  .visor-obs__timeline-bar.tool {
    background: var(--color-success);
  }

  .visor-obs__timeline-bar.agent {
    background: var(--color-accent);
  }

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

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

  /* -- Events Pane ---------------------------------------------------------- */

  .visor-obs__events-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .visor-obs__event-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 0.35rem var(--space-sm);
    background: var(--color-surface-raised);
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    cursor: pointer;
    transition: background var(--transition-fast);
  }

  .visor-obs__event-item:hover {
    background: color-mix(in srgb, var(--color-cyan) 10%, var(--color-surface-raised));
  }

  .visor-obs__event-item.selected {
    background: color-mix(in srgb, var(--color-cyan) 20%, var(--color-surface-raised));
    border-left: 2px solid var(--color-cyan);
  }

  .visor-obs__event-time {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--color-muted);
    flex-shrink: 0;
    min-width: 60px;
  }

  .visor-obs__event-type {
    font-size: 0.55rem;
    padding: 0.1rem 0.25rem;
    border-radius: 2px;
    flex-shrink: 0;
    min-width: 50px;
    text-align: center;
    text-transform: uppercase;
  }

  .visor-obs__event-type.tool {
    background: color-mix(in srgb, var(--color-success) 20%, transparent);
    color: var(--color-success);
  }

  .visor-obs__event-type.agent {
    background: color-mix(in srgb, var(--color-accent) 20%, transparent);
    color: var(--color-accent);
  }

  .visor-obs__event-type.state {
    background: color-mix(in srgb, var(--color-warning) 20%, transparent);
    color: var(--color-warning);
  }

  .visor-obs__event-type.approval {
    background: color-mix(in srgb, var(--color-orange) 20%, transparent);
    color: var(--color-orange);
  }

  .visor-obs__event-type.error {
    background: color-mix(in srgb, var(--color-danger) 20%, transparent);
    color: var(--color-danger);
  }

  .visor-obs__event-message {
    flex: 1;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* -- Context / State Inspector Pane --------------------------------------- */

  .visor-obs__context-viewer {
    height: 100%;
  }

  .visor-obs__context-json {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    line-height: 1.5;
  }

  .visor-obs__context-diff {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .visor-obs__diff-line {
    padding: 0.15rem 0.35rem;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
  }

  .visor-obs__diff-line.added {
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
  }

  .visor-obs__diff-line.removed {
    background: color-mix(in srgb, var(--color-danger) 15%, transparent);
    color: var(--color-danger);
  }

  .visor-obs__diff-line.changed {
    background: color-mix(in srgb, var(--color-warning) 15%, transparent);
    color: var(--color-warning);
  }

  /* -- Snapshots Gallery ---------------------------------------------------- */

  .visor-obs__snapshots {
    display: none;
    flex-direction: column;
    padding: var(--space-sm);
    background: var(--color-surface-raised);
    border-top: 1px solid var(--color-border);
    max-height: 100px;
  }

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

  .visor-obs__snapshots-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
  }

  .visor-obs__snapshots-header span {
    font-size: 0.65rem;
    font-weight: var(--weight-semibold);
    color: var(--color-muted);
  }

  .visor-obs__snapshots-clear {
    font-size: 0.55rem;
    padding: 0.15rem 0.35rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
  }

  .visor-obs__snapshots-clear:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
  }

  .visor-obs__snapshots-list {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .visor-obs__snapshot-thumb {
    width: 60px;
    height: 45px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    position: relative;
  }

  .visor-obs__snapshot-thumb:hover {
    border-color: var(--color-cyan);
  }

  .visor-obs__snapshot-thumb-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    font-size: 0.5rem;
    padding: 0.1rem;
    text-align: center;
    color: #fff;
  }

  /* -- Responsive ----------------------------------------------------------- */

  @media (max-width: 768px) {
    .visor-obs__panes {
      grid-template-columns: 1fr !important;
      grid-template-rows: repeat(4, 1fr);
    }

    .visor-obs__replay-bar {
      flex-wrap: wrap;
    }

    .visor-obs__replay-timeline {
      order: 3;
      width: 100%;
      margin-top: var(--space-sm);
    }
  }
}