/*
 * ============================================================================
 * PINNED TRAY COMPONENT v1.0
 * ============================================================================
 * 
 * PURPOSE:
 *   Provides the evidence pinning system - the core contradiction testing mechanic.
 *   Allows dragging/dropping interview notes and timeline events for testing.
 *
 * STRUCTURE (DO NOT MODIFY):
 *   - #wkEvidenceDock (fixed bottom tray container)
 *   - .pinnedTrayWrap (tray wrapper with styling)
 *   - .pinnedTray (flex container for pills)
 *   - .pinPill (individual evidence slot)
 *   - Drag states (wkDragActive, wkTrayNear, wkTrayOver, snapReady)
 *
 * SAFE TO CUSTOMIZE:
 *   - Colors (gold accent: rgba(197, 156, 87, ...))
 *   - Drop highlight (blue: rgba(106, 169, 255, ...))
 *   - Spacing (padding, gaps)
 *   - Border styles
 *   - Shadows and effects
 *   - Font sizes
 *   - Animation timing
 *
 * TO MODIFY INTENTIONALLY:
 *   1. Make your changes in this file
 *   2. Test drag/drop from notebook
 *   3. Test empty slots, filled slots, hover states
 *   4. Test the TEST button functionality
 *   5. Document what you changed and why
 *
 * CRITICAL MECHANICS (test thoroughly if changed):
 *   - Drag proximity detection
 *   - Drop zone highlighting
 *   - Magnetic snap feedback
 *   - Empty slot visibility
 *
 * ============================================================================
 */

/* ============================================================================
   PINNED TRAY WRAPPER (generic, used in multiple contexts)
   ============================================================================ */

.pinnedTrayWrap {
  flex: 0 0 auto;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.18)
  );
}

.trayHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.trayTitle {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted2);
}

/* ============================================================================
   PINNED TRAY GRID
   ============================================================================ */

.pinnedTray {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  align-items: flex-start;
}

/* ============================================================================
   EVIDENCE PILLS (slots for pinned items)
   
   EASY TO CUSTOMIZE:
   - max-width: Change 48% to adjust slot size
   - Background: Change rgba(0, 0, 0, 0.14) for darker/lighter
   - Border: Change rgba(255, 255, 255, 0.1) for more/less visible
   ============================================================================ */

.pinPill {
  max-width: 48%;
  flex: 1 1 0;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted);
  min-height: 52px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.pinPill .pinText {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pinPill .pinMeta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pinPill .pinBody {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.28;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

/* Remove button */
.pinPill .x {
  margin-left: auto;
  opacity: 0.55;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  align-self: flex-start;
  padding-top: 1px;
}

.pinPill .x:hover {
  opacity: 0.9;
}

/* ============================================================================
   EMPTY EVIDENCE SLOTS (drag targets)
   ============================================================================ */

.pinPill.empty {
  justify-content: center;
  align-items: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  border-style: dashed;
  opacity: 0.9;
}

.pinPill.empty .pinBody {
  -webkit-line-clamp: 1;
}

/* Drop hover state */
.pinPill.dropHover {
  border-color: rgba(106, 169, 255, 0.55);
  background: rgba(106, 169, 255, 0.1);
}

/* ============================================================================
   TRAY ACTIONS (TEST button area)
   ============================================================================ */

.trayActions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trayActions .btn {
  padding: 9px 14px;
  font-size: 12px;
}

.testResult {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.35;
  pointer-events: none;
}

.testResult strong {
  color: var(--text);
}

/* ============================================================================
   PIN BUTTON (in notebook entries)
   ============================================================================ */

.pinBtn {
  position: absolute;
  right: 12px;
  top: 12px;
  background: transparent;
  border: none;
  color: var(--muted2);
  opacity: 0.55;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
}

.pinBtn:hover {
  opacity: 0.85;
}

.pinBtn.pinned {
  opacity: 0.95;
  color: var(--accent);
}

/* ============================================================================
   EVIDENCE DOCK (#wkEvidenceDock)
   Fixed bottom tray that appears during gameplay
   ============================================================================ */

#wkEvidenceDock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--wk-barH) + 18px);
  width: min(760px, 78vw);
  z-index: 6500;
  /* Hidden by default, fades in when items are pinned */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding: 6px;
  box-sizing: border-box;
  transition:
    opacity 180ms ease,
    filter 180ms ease;
}

/* Visible when items are pinned */
body.wkTrayVisible #wkEvidenceDock,
#wkEvidenceDock.wk-trayVisible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

/* ============================================================================
   DRAG & DROP STATES
   
   CRITICAL MECHANICS - Test thoroughly if modified
   ============================================================================ */

/* Drag proximity: tray highlights when dragging near */
body.wkDragActive.wkTrayNear #wkEvidenceDock {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: brightness(1.08);
  transition: opacity 180ms ease, filter 180ms ease;
}

/* Drag over: stronger highlight */
body.wkDragActive.wkTrayOver #wkEvidenceDock {
  filter: brightness(1.14);
}

body.wkDragActive.wkTrayOver #wkEvidenceDock .pinPill.empty {
  border-color: rgba(106, 169, 255, 0.70);
  background: rgba(106, 169, 255, 0.14);
}

/* Magnetic snap ready state */
body.wkDragActive #wkEvidenceDock .pinPill.snapReady {
  border-color: rgba(106, 169, 255, 0.85) !important;
  background: rgba(106, 169, 255, 0.22) !important;
  box-shadow: 0 0 0 2px rgba(106, 169, 255, 0.25), 0 4px 12px rgba(106, 169, 255, 0.3);
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

/* ============================================================================
   DRAG GHOST (visual feedback while dragging)
   ============================================================================ */

.wk-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  background: rgba(18, 20, 26, 0.95);
  border: 1px solid rgba(106, 169, 255, 0.5);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 180px;
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(106, 169, 255, 0.2);
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 150ms ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.wk-drag-ghost .t {
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 4px;
}

.wk-drag-ghost .content {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body.wkDragActive.wkTrayNear #wkEvidenceDock .pinPill,
body.wkDragActive.wkTrayNear #wkEvidenceDock .pinPill.empty {
  transition: border-color 180ms ease, background 180ms ease, opacity 180ms ease;
}

/* ============================================================================
   INTERVIEW CONTEXT (tray positioning during interviews)
   ============================================================================ */

body.inInterview #wkEvidenceDock {
  bottom: calc(var(--wk-barH) + 10px);
  width: min(700px, 66vw);
}

body.inInterview #wkTestCaptionDock {
  width: min(700px, 66vw);
}

/* Stronger physical rim in interview mode */
body.inInterview #wkEvidenceDock .pinnedTrayWrap {
  background: rgba(14, 10, 7, 0.94) !important;
  border-color: rgba(197, 156, 87, 0.24) !important;
  box-shadow:
    0 22px 44px rgba(14, 9, 5, 0.68),
    inset 0 2px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 22px rgba(12, 8, 5, 0.22),
    inset 0 -18px 34px rgba(12, 8, 5, 0.62) !important;
}

/* ============================================================================
   EVIDENCE DOCK STYLING (physical desk tray appearance)
   ============================================================================ */

#wkEvidenceDock .pinnedTrayWrap {
  margin: 0 !important;
  position: relative;
  background: rgba(18, 14, 10, 0.92) !important;
  border: 1px solid rgba(197, 156, 87, 0.20) !important;
  border-radius: 16px !important;
  box-shadow:
    0 18px 38px rgba(14, 9, 5, 0.62),
    inset 0 2px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 20px rgba(12, 8, 5, 0.20),
    inset 0 -14px 26px rgba(12, 8, 5, 0.55) !important;
  padding: 16px 16px 12px !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

/* Highlight shine at top */
#wkEvidenceDock .pinnedTrayWrap::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 8px;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12),
    rgba(0, 0, 0, 0)
  );
  opacity: 0.9;
  pointer-events: none;
}

/* Outer rim glow */
#wkEvidenceDock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 1px solid rgba(197, 156, 87, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 18px rgba(14, 9, 5, 0.55);
  pointer-events: none;
}

/* Empty slot styling in dock */
#wkEvidenceDock .pinPill.empty .pinMeta,
#wkEvidenceDock .pinPill.empty .pinBody {
  opacity: 0.28;
}

#wkEvidenceDock .pinPill.empty:hover .pinMeta,
#wkEvidenceDock .pinPill.empty:hover .pinBody {
  opacity: 0.6;
}

/* Hide tray header in dock (only show in Casefile) */
#wkEvidenceDock .trayHeader {
  display: none !important;
}

#wkEvidenceDock .trayActions {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 10px !important;
}

/* ============================================================================
   TEST RESULT CAPTION (appears after testing)
   ============================================================================ */

#wkTestCaptionDock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--wk-barH) + 4px);
  width: min(760px, 78vw);
  z-index: 6400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

#wkTestCaptionDock.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================================
   CONTEXT-SPECIFIC VISIBILITY
   ============================================================================ */

/* Hide during map view */
body.mapOpen #splitStage #wkEvidenceDock {
  display: none !important;
}

body.mapOpen #wkEvidenceDock {
  display: none !important;
}

/* Hide during timeline fullscreen */
body.timelineOpen #wkEvidenceDock {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide during location hub */
body.locationHubOpen #wkEvidenceDock {
  display: none;
}

/* Adjust for interview mode */
body.inInterview .pinBtn {
  display: none;
}

/* ============================================================================
   END OF PINNED TRAY COMPONENT
   ============================================================================ */