/*
 * SCREENPLAY EDITOR STYLES
 * EXACT Final Draft 13 Formatting
 * All measurements from SCREENPLAY-EDITOR-SPEC-v2.md
 */

/* WEB PORT ADAPTATION: the desktop app gets box-sizing:border-box from Tailwind's preflight
   (@tailwind base in globals.css). The web has no global reset, so scope border-box here —
   without it, width:8.5in + padding renders content-box = 11in wide and the whole page inflates
   ("way too big", CUT TO: pushed right). This is the one deliberate change from the raw desktop copy. */
.screenplay-editor,
.screenplay-editor *,
.screenplay-editor *::before,
.screenplay-editor *::after {
  box-sizing: border-box;
}

/* Container */
.screenplay-editor-container {
  background: #2A2A3E; /* Dark app background behind pages */
  overflow: auto;
}

.screenplay-editor {
  outline: none;
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-size: 12pt;
  line-height: 1.0; /* Tight spacing - 12 lines per inch */

  /* Page appearance - cream/off-white */
  background: #F5F5F0;
  color: #000000;

  /* Page dimensions: US Letter */
  width: 8.5in;
  min-height: 11in;
  margin: 1in auto;
  padding: 1in 1in 1in 1.5in; /* Top, Right, Bottom, Left */

  /* Page shadow for depth */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Remove default ProseMirror styles */
.screenplay-editor .ProseMirror {
  outline: none;
}

/* Base paragraph styles */
.screenplay-editor p {
  margin: 0;
  padding: 0;
  min-height: 1.0em;
}

/* Ensure divs have consistent box model but don't override element-specific margins */
.screenplay-editor .ProseMirror > div {
  padding: 0;
  min-height: 1.0em;
}

/*
 * GENERAL (Cmd+0)
 * Freeform text element
 */
.screenplay-editor .general {
  margin-left: 0; /* Starts at 1.5" from page edge (in padding) */
  margin-right: 0;
  margin-top: 1em; /* 1 line before, same as action */
  margin-bottom: 0;
  text-transform: none;
  font-weight: normal;
}

/*
 * SCENE HEADING (Cmd+1)
 * INT./EXT. LOCATION - TIME
 * ALL CAPS, Bold, Never orphaned
 */
.screenplay-editor .scene-heading {
  margin-left: 0; /* Starts at 1.5" from page edge */
  margin-right: 0;
  margin-top: 2em; /* 2 lines before */
  margin-bottom: 1em; /* 1 line after */
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  page-break-after: avoid; /* Never orphaned */
}

/* Scene number display (in gutters) */
.screenplay-editor .scene-heading::before {
  content: attr(data-scene-number);
  position: absolute;
  left: -2.5em;
  font-weight: bold;
  color: #666;
  font-size: 0.9em;
}

.screenplay-editor .scene-heading::after {
  content: attr(data-scene-number);
  position: absolute;
  right: -2.5em;
  font-weight: bold;
  color: #666;
  font-size: 0.9em;
}

/*
 * ACTION (Cmd+2)
 * Description, body text
 */
.screenplay-editor .action {
  margin-left: 0; /* Starts at 1.5" from page edge */
  margin-right: 0; /* 1" from right edge is in page padding */
  margin-top: 1em; /* 1 line before */
  margin-bottom: 0;
  text-transform: none;
  font-weight: normal;
}

/* First action after scene heading needs no extra space */
.screenplay-editor .scene-heading + .action {
  margin-top: 0;
}

/*
 * CHARACTER (Cmd+3)
 * ALL CAPS, indented at 3.7" from left edge
 * The 1.5" page padding is already applied, so we add 2.2" more
 */
.screenplay-editor .character {
  text-align: left;
  margin-left: 2.2in; /* 3.7" total from page edge (1.5" padding + 2.2") */
  margin-right: 0;
  margin-top: 1em; /* 1 line before */
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight: normal;
}

/*
 * DIALOGUE (Cmd+5)
 * Fixed box from 2.5" to 6.5" from left edge (Director's Format)
 * Appears directly under character (no space before)
 * Page has 1.5" left padding and 1.0" right padding already
 * - Left: 2.5" from edge - 1.5" padding = 1.0" additional
 * - Right: 2.0" from edge - 1.0" padding = 1.0" additional
 * - This creates a 4.0" wide dialogue box
 */
.screenplay-editor .dialogue {
  text-align: left;
  margin-left: 1.0in; /* 2.5" total from page edge */
  margin-right: 1.0in; /* 2.0" total from right edge */
  width: auto; /* Let margins control width */
  margin-top: 0; /* Directly under character */
  margin-bottom: 0;
  text-transform: none;
  font-weight: normal;
}

/*
 * PARENTHETICAL (Cmd+4)
 * Fixed indent at 3.1" from left edge, 2.5" from right (Director's Format)
 * Auto-adds parentheses
 * Page has 1.5" left padding and 1.0" right padding already
 * - Left: 3.1" from edge - 1.5" padding = 1.6" additional
 * - Right: 2.5" from edge - 1.0" padding = 1.5" additional
 */
.screenplay-editor .parenthetical {
  text-align: left;
  margin-left: 1.6in; /* 3.1" total from page edge */
  margin-right: 1.5in; /* 2.5" total from right edge */
  margin-top: 0;
  margin-bottom: 0;
  text-transform: none;
  font-weight: normal;
}

/* Auto-add parentheses */
.screenplay-editor .parenthetical::before {
  content: '(';
}

.screenplay-editor .parenthetical::after {
  content: ')';
}

/*
 * TRANSITION (Cmd+6)
 * RIGHT-aligned, ALL CAPS
 * CUT TO:, DISSOLVE TO:, etc.
 */
.screenplay-editor .transition {
  text-align: right;
  margin-left: 0;
  margin-right: 0;
  margin-top: 1em; /* 1 line before */
  margin-bottom: 1em; /* 1 line after */
  text-transform: uppercase;
  font-weight: normal;
}

/*
 * SHOT (Cmd+7)
 * ALL CAPS, 1.5" from left (like scene heading but no bold)
 * Never orphaned
 */
.screenplay-editor .shot {
  margin-left: 0; /* Starts at 1.5" from page edge */
  margin-right: 0;
  margin-top: 1em; /* 1 line before */
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight: normal;
  page-break-after: avoid; /* Never orphaned */
}

/*
 * DIRECTION (Cmd+8)
 * Director's performance & mood instructions — amber/gold tint, not part of the "script" text
 */
.screenplay-editor .direction {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  padding: 0.35em 0.6em 0.35em 2.1em;
  background-color: rgba(251, 191, 36, 0.10);
  border-left: 3px solid rgba(251, 191, 36, 0.45);
  border-radius: 0 4px 4px 0;
  text-transform: none;
  font-weight: normal;
  color: #7a5c00;
  font-style: normal;
  position: relative;
}

.screenplay-editor .direction::before {
  content: '📣';
  position: absolute;
  left: 0.5em;
  top: 0.35em;
  font-style: normal;
  font-size: 0.9em;
  pointer-events: none;
}

/* Direction prefix label — DIRECTION: shown inline via separate approach */
.screenplay-editor .direction:empty::after {
  content: 'Direct the performance — What should the actors feel? What\2019s the energy? Any specific choreography?';
  color: rgba(161, 120, 0, 0.45);
  font-style: italic;
  pointer-events: none;
}

/* Isolated editor — same direction styling */
.screenplay-editor-isolated .direction {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  padding: 0.35em 0.6em 0.35em 2.1em;
  background-color: rgba(251, 191, 36, 0.10);
  border-left: 3px solid rgba(251, 191, 36, 0.45);
  border-radius: 0 4px 4px 0;
  color: #7a5c00;
  position: relative;
}

.screenplay-editor-isolated .direction::before {
  content: '📣';
  position: absolute;
  left: 0.5em;
  top: 0.35em;
  font-size: 0.9em;
  pointer-events: none;
}

/* Spielberg Mode AI-generated content marker */
.screenplay-editor .ProseMirror .pm-ai-generated,
.ProseMirror-screenplay .pm-ai-generated {
  border-left: 4px solid #a78bfa !important;
  padding-left: 0.4em !important;
  margin-left: -0.4em !important;
  background-color: rgba(167, 139, 250, 0.08) !important;
}

/* Chained scene heading highlight — daisy-chain multi-scene selection */
.screenplay-editor .scene-heading.scene-chained {
  background-color: rgba(123, 104, 238, 0.10);
  border-left: 3px solid #7B68EE;
  padding-left: 0.35em;
  margin-left: -0.35em;
}

/* Cursor and selection styling */
.screenplay-editor .ProseMirror-selectednode {
  outline: 2px solid #7B68EE;
  outline-offset: 2px;
}

/* Current line highlighting - disabled for clean Final Draft look */
/* .screenplay-editor div:focus-within {
  background-color: rgba(123, 104, 238, 0.03);
  outline: 1px solid rgba(123, 104, 238, 0.1);
  outline-offset: -1px;
} */

/* MORES and CONTINUEDS */
.screenplay-editor .more {
  text-align: center;
  font-style: normal;
  margin-top: 0;
  margin-bottom: 0;
}

.screenplay-editor .more::before {
  content: '(MORE)';
}

.screenplay-editor .continued {
  text-align: right;
  font-style: normal;
  margin-top: 0;
  margin-bottom: 1em;
}

/* Page break indicator */
.screenplay-editor .page-break {
  page-break-after: always;
  border-bottom: 1px dashed #ccc;
  margin: 0.5in 0;
  height: 1px;
}

/* Night Mode */
.screenplay-editor.night-mode {
  background: #3A3A4A;
  color: #E0E0E0;
}

/* Midnight Mode */
.screenplay-editor.midnight-mode {
  background: #1A1A1A;
  color: #FFFFFF;
}

/* Print styles */
@media print {
  /* Hide all app chrome — only show the screenplay editor */
  body.printing-screenplay * {
    visibility: hidden;
  }

  /* Make the screenplay editor and all its children visible */
  body.printing-screenplay .screenplay-editor-container,
  body.printing-screenplay .screenplay-editor-container * {
    visibility: visible;
  }

  body.printing-screenplay .screenplay-editor-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background: white !important;
  }

  body.printing-screenplay .screenplay-editor {
    transform: none !important;
    margin: 0 auto !important;
    padding: 1in 1in 1in 1.5in !important;
    box-shadow: none !important;
    background: white !important;
    color: #000 !important;
    width: 8.5in !important;
    min-height: auto !important;
  }

  /* Remove direction element styling for print (no amber highlight) */
  body.printing-screenplay .screenplay-editor .direction {
    background: none !important;
    border-left: none !important;
    padding-left: 0 !important;
    color: #000 !important;
  }

  body.printing-screenplay .screenplay-editor .direction::before {
    display: none !important;
  }

  /* Remove AI mark highlight for print */
  body.printing-screenplay .screenplay-editor .pm-ai-generated {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    background: none !important;
  }

  /* Remove chained scene highlight */
  body.printing-screenplay .screenplay-editor .scene-heading.scene-chained {
    background: none !important;
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* Scene numbers in gutters */
  body.printing-screenplay .screenplay-editor .scene-heading::before,
  body.printing-screenplay .screenplay-editor .scene-heading::after {
    left: -3em;
    right: -3em;
  }

  /* Page breaks between pages */
  body.printing-screenplay .screenplay-editor .page-break {
    page-break-after: always;
    border-bottom: none;
  }
}

/* Page numbers (top-right) */
.screenplay-editor .page-number {
  position: absolute;
  top: 0.5in;
  right: 1in;
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-size: 12pt;
}

.screenplay-editor .page-number::after {
  content: '.';
}

/* Hide page number on first page */
.screenplay-editor[data-page="1"] .page-number {
  display: none;
}

/* Autocomplete suggestion styling */
.autocomplete-suggestion {
  color: #999 !important;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  font-style: normal;
}

/* ACTION button gutter styling */
.action-button-gutter {
  position: absolute;
  right: 100%;
  margin-right: 16px;
  top: 0;
  z-index: 10;
}


/* Save status fade-in animation */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}

/* Isolated scene editor for Director's Chair Mode */
.screenplay-editor-isolated {
  outline: none;
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-size: 12pt;
  line-height: 1.0;
  color: #000000;
  min-height: 500px;
}

.screenplay-editor-isolated .ProseMirror {
  outline: none;
}

.screenplay-editor-isolated p {
  margin: 0;
  padding: 0;
  min-height: 1.0em;
}

.screenplay-editor-isolated .ProseMirror > div {
  padding: 0;
  min-height: 1.0em;
}

/* ACTION button pulse animation for Director's Chair Mode */
@keyframes action-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(123, 104, 238, 0.7);
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(123, 104, 238, 0.4);
  }
}

.action-button-pulse:hover:not(:disabled) {
  animation: action-pulse 2s ease-in-out infinite;
}