/* Classified document viewer overlay */

.document-panel {
  width: min(900px, 95vw);
  background: transparent;
  color: var(--redaction);
}

.document-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 48px 12px 16px;
  background: rgba(10, 10, 10, 0.78);
  color: var(--paper);
  border-bottom: 1px solid var(--room-hotspot);
  box-shadow: 0 0 18px var(--room-hotspot-dim);
}

.document-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

#doc-file-number {
  font-weight: bold;
  letter-spacing: 0.05em;
}

#doc-title {
  font-size: 0.9rem;
  opacity: 0.85;
}

.document-classification {
  padding: 4px 10px;
  border: 2px solid var(--room-hotspot);
  color: var(--room-hotspot);
  font-weight: bold;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.document-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.document-viewport {
  position: relative;
  height: min(65vh, 720px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  cursor: default;
  background: transparent;
}

.document-viewport.can-pan {
  cursor: grab;
}

.document-viewport.is-dragging {
  cursor: grabbing;
}

.document-body.is-video-document .document-viewport {
  height: min(72vh, 760px);
  align-items: stretch;
}

.document-transform {
  position: relative;
  display: inline-block;
  line-height: 0;
  transform-origin: center center;
  will-change: transform;
}

#document-image {
  display: block;
  max-width: min(860px, 88vw);
  max-height: min(60vh, 680px);
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.72);
}

.document-body.is-video-document .document-transform,
.document-body.is-video-document #document-image,
.document-body.is-video-document .document-hotspot-layer,
.document-body.is-video-document .document-zoom-controls,
.document-body.is-video-document .document-zoom-hint {
  display: none;
}

.document-hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.document-hotspot-layer[hidden] {
  display: none;
}

.document-hotspot {
  position: absolute;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.document-hotspot:hover,
.document-hotspot:focus {
  outline: none;
  border-color: var(--room-hotspot);
  box-shadow: 0 0 10px var(--room-hotspot-dim);
  background: var(--room-hotspot-debug);
}

body.debug-hotspots .document-hotspot {
  border-color: var(--room-hotspot);
  background: var(--room-hotspot-debug);
}

body.debug-hotspots .document-hotspot::after {
  content: attr(aria-label);
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 2;
  max-width: 220px;
  padding: 3px 5px;
  background: rgba(0, 0, 0, 0.86);
  color: var(--phosphor);
  font-size: 0.62rem;
  line-height: 1.2;
  white-space: normal;
}

.artifact-info-panel {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 4;
  width: min(380px, calc(100% - 36px));
  max-height: calc(100% - 36px);
  padding: 18px 20px;
  overflow: auto;
  border: 1px solid var(--phosphor-dim);
  background: rgba(4, 8, 5, 0.94);
  color: var(--paper);
  line-height: 1.45;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.72);
}

.artifact-info-panel[hidden] {
  display: none;
}

.artifact-info-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--phosphor-dim);
  background: #050505;
  color: var(--phosphor);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.artifact-info-close:hover,
.artifact-info-close:focus {
  border-color: var(--phosphor);
  background: rgba(51, 255, 102, 0.12);
  outline: none;
}

.artifact-info-file {
  margin: 0 34px 8px 0;
  color: var(--phosphor);
  font-weight: bold;
  letter-spacing: 0.06em;
}

.artifact-info-panel h3 {
  margin: 0 34px 14px 0;
  color: var(--paper);
  font-size: 1rem;
  line-height: 1.25;
}

.artifact-info-meta {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.artifact-info-meta div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
}

.artifact-info-meta dt {
  color: #888;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.artifact-info-meta dd {
  margin: 0;
}

.artifact-info-text p {
  margin: 0 0 12px;
  font-size: 0.88rem;
}

.artifact-info-text p:last-child {
  margin-bottom: 0;
}

.grav-kharum-player {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  width: min(360px, calc(100% - 36px));
  padding: 14px;
  transform: translateX(-50%);
  border: 1px solid #7fd7ff;
  background: rgba(3, 10, 18, 0.92);
  color: #bfeeff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.72);
}

.grav-kharum-player[hidden] {
  display: none;
}

.grav-kharum-player-title {
  margin: 0 0 10px;
  color: #9fe6ff;
  font-size: 0.76rem;
  font-weight: bold;
  letter-spacing: 0.08em;
}

.grav-kharum-track-list {
  display: grid;
  gap: 8px;
}

.grav-kharum-track-btn {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(127, 215, 255, 0.36);
  background: rgba(4, 11, 20, 0.94);
  color: #bfeeff;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.grav-kharum-track-btn:hover,
.grav-kharum-track-btn:focus {
  border-color: #7fd7ff;
  color: #e3f8ff;
  outline: none;
}

.grav-kharum-track-btn.is-playing {
  border-color: #9fe6ff;
  background: rgba(127, 215, 255, 0.14);
  color: #e3f8ff;
  box-shadow: 0 0 12px rgba(127, 215, 255, 0.28);
}

.ghost-signal-video {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  width: min(520px, calc(100% - 36px));
  padding: 14px;
  transform: translateX(-50%);
  border: 1px solid #76ff9a;
  background: rgba(3, 12, 6, 0.93);
  color: #caffd6;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.72);
}

.document-body.is-video-document .ghost-signal-video {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(860px, 92vw);
  margin: auto;
  transform: none;
}

.ghost-signal-video[hidden] {
  display: none;
}

.ghost-signal-video-title {
  margin: 0 0 10px;
  color: #76ff9a;
  font-size: 0.76rem;
  font-weight: bold;
  letter-spacing: 0.08em;
}

.ghost-signal-video-el {
  display: block;
  width: 100%;
  max-height: min(58vh, 620px);
  background: #010401;
  border: 1px solid rgba(118, 255, 154, 0.42);
}

.ghost-signal-video-controls {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.ghost-signal-video-btn {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid rgba(118, 255, 154, 0.42);
  background: rgba(2, 8, 4, 0.96);
  color: #caffd6;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.ghost-signal-video-btn:hover,
.ghost-signal-video-btn:focus {
  border-color: #76ff9a;
  color: #effff2;
  background: rgba(118, 255, 154, 0.12);
  outline: none;
}

.timeline-page-controls {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  transform: translateX(-50%);
  border: 1px solid rgba(216, 212, 200, 0.45);
  background: rgba(8, 8, 8, 0.9);
  color: var(--paper);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.timeline-page-controls[hidden] {
  display: none;
}

.timeline-page-btn {
  padding: 8px 10px;
  border: 1px solid rgba(216, 212, 200, 0.45);
  background: #111;
  color: var(--paper);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.timeline-page-btn:hover,
.timeline-page-btn:focus {
  border-color: var(--room-hotspot-dim);
  color: var(--room-hotspot);
  outline: none;
}

.timeline-page-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

#timeline-page-status {
  min-width: 78px;
  text-align: center;
  font-size: 0.75rem;
}

.document-zoom-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(10, 10, 10, 0.78);
  border-top: 1px solid var(--room-hotspot-dim);
}

.zoom-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #666;
  background: #1a1a1a;
  color: var(--paper);
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.zoom-btn:hover {
  background: #333;
  border-color: var(--room-hotspot-dim);
  color: var(--room-hotspot);
}

.zoom-btn-reset {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

#zoom-level {
  min-width: 48px;
  text-align: center;
  color: var(--paper);
  font-size: 0.85rem;
}

.document-zoom-hint {
  margin: 0;
  padding: 6px 16px 10px;
  text-align: center;
  font-size: 0.7rem;
  color: #888;
  background: rgba(10, 10, 10, 0.78);
}

.document-panel .overlay-close {
  color: var(--paper);
  border-color: #666;
}