/* Local Offline Font Definitions matching Android App Bundled Fonts */
@font-face {
  font-family: 'Noto Sans';
  src: url('assets/fonts/NotoSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('assets/fonts/NotoSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansTelugu';
  src: url('assets/fonts/NotoSansTelugu.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Telugu';
  src: url('assets/fonts/NotoSansTelugu.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  src: url('assets/fonts/NotoSansDevanagari.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Kannada';
  src: url('assets/fonts/NotoSansKannada.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Tamil';
  src: url('assets/fonts/NotoSansTamil.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Malayalam';
  src: url('assets/fonts/NotoSansMalayalam.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==============================================================================
   Universal Cinema Dark Scrollbars for A FILM BY
   Eliminates all browser-default white scrollbars across all containers & viewports
   ============================================================================== */
html, body {
  scrollbar-width: thin;
  scrollbar-color: #38342B #100F0D;
  overflow-x: hidden;
  max-width: 100vw;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #38342B #100F0D;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: #100F0D;
}

*::-webkit-scrollbar-thumb {
  background: #38342B;
  border-radius: 4px;
  border: 2px solid #100F0D;
}

*::-webkit-scrollbar-thumb:hover {
  background: #C5A059;
}

.workspace-body {
  background-color: #0d0c0b;
  color: #EDE8DF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ==============================================================================
   1. Workspace Top Header
   ============================================================================== */
.workspace-header {
  min-height: 56px;
  background-color: #151412;
  border-bottom: 1px solid #2B2923;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  z-index: 20;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
}

.ws-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.ws-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9E988E;
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  background: #1e1d1a;
  border: 1px solid #2B2923;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.ws-back-btn:hover {
  color: #C5A059;
  border-color: #C5A059;
  background: #25231e;
}

.ws-back-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ws-header-divider {
  width: 1px;
  height: 24px;
  background: #2B2923;
  flex-shrink: 0;
}

.ws-brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ws-brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.ws-brand-name {
  color: #C5A059;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* Accessible Screen Reader Only Utility (BUG-013) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Dedicated Screenplay Title & Status Strip */
.ws-script-title-strip {
  background: #11100e;
  border-bottom: 1px solid #24221c;
  padding: 6px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
}

.ws-title-strip-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 1200px;
}

.ws-title-label {
  color: #C5A059;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  flex-shrink: 0;
  user-select: none;
}

.ws-title-input {
  background: #181714;
  border: 1px solid #2B2923;
  border-radius: 4px;
  color: #FAF6ED;
  font-family: 'Courier Prime', Courier, monospace;
  font-size: 14px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.8px;
  text-align: left;
  flex: 1;
  max-width: 600px;
  padding: 4px 10px;
  text-transform: uppercase;
  outline: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.ws-title-input:hover {
  border-color: #3d3a33;
  background: #1d1b18;
}

.ws-title-input:focus {
  border-color: #C5A059;
  background: #1d1b18;
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.2);
}

.ws-page-indicator-badge {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: #C5A059;
  background: #1F1D18;
  border: 1px solid #3A352A;
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

.ws-save-indicator {
  font-size: 11px;
  color: #8A857C;
  font-family: var(--font-sans);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 4px;
}

/* Header Action Buttons */
.ws-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.ws-action-btn {
  background: #1E1D1A;
  border: 1px solid #2B2923;
  color: #EDE8DF;
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.ws-action-btn.icon-only {
  padding: 5px 6px;
  width: 30px;
  height: 28px;
  min-width: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#btnToggleSearch.is-active {
  background: rgba(197, 160, 89, 0.25);
  border-color: #C5A059;
  color: #C5A059;
}

/* Grouped Undo / Redo Pill matching Picture 1 */
.ws-undo-redo-group {
  display: inline-flex;
  align-items: center;
  background: #141311;
  border: 1px solid #2B2923;
  border-radius: 6px;
  padding: 1px 3px;
  gap: 2px;
  height: 34px;
  box-sizing: border-box;
}

.ws-undo-redo-group .ws-action-btn.icon-only {
  background: transparent;
  border: none;
  border-radius: 4px;
  width: 26px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #EDE8DF;
}

.ws-undo-redo-group .ws-action-btn.icon-only:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

.ws-undo-redo-group .ws-action-btn.icon-only:disabled {
  opacity: 0.3;
}

/* In-Editor Search Field Control matching Picture 1 */
.ws-action-btn.ws-search-field-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #141311;
  border: 1px solid #2B2923;
  border-radius: 6px;
  height: 34px;
  padding: 0 12px;
  color: #7A746B;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.ws-action-btn.ws-search-field-btn svg {
  width: 13.5px;
  height: 13.5px;
  color: #7A746B;
  flex-shrink: 0;
}

.ws-action-btn.ws-search-field-btn:hover {
  background: #1A1916;
  border-color: #3D3930;
  color: #EDEAE5;
}

.ws-action-btn.ws-search-field-btn:hover svg {
  color: #EDEAE5;
}

.ws-action-btn.ws-search-field-btn.active {
  background: rgba(197, 160, 89, 0.12);
  border-color: #C5A059;
  color: #E5A93C;
}

.ws-action-btn.ws-search-field-btn.active svg {
  color: #E5A93C;
}

/* Persistent Information / Status Box in Top Toolbar (HIT Assistant Entry Point) */
.ws-status-info-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #141311;
  border: 1px solid #C5A059;
  border-radius: 6px;
  height: 36px;
  padding: 3px 12px;
  box-sizing: border-box;
  flex-shrink: 0;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.ws-status-info-box:hover {
  border-color: #D4AF37;
  background: #181714;
  box-shadow: 0 0 10px rgba(197, 160, 89, 0.25);
  transform: translateY(-0.5px);
}

.ws-status-info-box:focus-visible {
  outline: 2px solid #C5A059;
  outline-offset: 2px;
}

/* Remove floating green dot from toolbar status box per HIT specifications */
.ws-status-info-box .status-indicator-dot {
  display: none !important;
}

.ws-info-icon {
  width: 14px;
  height: 14px;
  color: #C5A059;
  flex-shrink: 0;
  transition: transform 0.18s ease, color 0.18s ease;
}

.ws-status-info-box:hover .ws-info-icon {
  color: #EDE8DF;
  transform: scale(1.12);
}

.status-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #4CAF50;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.75);
  transition: all 0.2s ease;
}

.status-indicator-dot.success {
  background: #4CAF50;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.75);
}

.status-indicator-dot.info,
.status-indicator-dot.progress {
  background: #C5A059;
  box-shadow: 0 0 6px rgba(197, 160, 89, 0.75);
}

.status-indicator-dot.error {
  background: #E53935;
  box-shadow: 0 0 6px rgba(229, 57, 53, 0.75);
}

.status-info-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  line-height: 1.25;
}

.status-info-text {
  font-size: 11.5px;
  font-weight: 500;
  color: #EDEAE5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-info-time {
  font-size: 10px;
  font-weight: 400;
  color: #8E887E;
  white-space: nowrap;
}

/* Hide asterisk button in toolbar to match Picture 1 layout */
.workspace-header .ws-rev-visibility-btn {
  display: none !important;
}

.ws-action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.ws-action-btn svg {
  width: 16px;
  height: 16px;
}

.ws-action-btn:hover {
  background: #25231e;
  border-color: rgba(197, 160, 89, 0.4);
  color: #DEC38B;
}

.ws-action-btn.gold {
  background: #C5A059;
  color: #121110;
  border-color: #C5A059;
  font-weight: 700;
}

.ws-action-btn.gold:hover {
  background: #d4af65;
  box-shadow: 0 2px 10px rgba(197, 160, 89, 0.3);
}

/* ==============================================================================
   2. FlowWrite™ Element Controls Bar
   ============================================================================== */
.ws-flowwrite-bar {
  background: #1a1916;
  border-bottom: 1px solid #2B2923;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  font-size: 12px;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  max-width: 100vw;
  box-sizing: border-box;
}

.ws-flowwrite-bar::-webkit-scrollbar {
  height: 3px;
}

.ws-flowwrite-bar::-webkit-scrollbar-thumb {
  background: #333027;
  border-radius: 3px;
}

.flow-pill-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.flow-label {
  color: #C5A059;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-right: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.flow-bar-right-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hint-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #22201C;
  border: 1px solid #333027;
  color: #C5A059;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.hint-toggle-pill:hover {
  background: #2c2923;
  border-color: #C5A059;
}

.hint-toggle-pill.hints-off {
  color: #78736B;
  border-color: #2B2923;
  opacity: 0.7;
}

.flow-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #22201C;
  border: 1px solid #2B2923;
  color: #9E988E;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.flow-pill-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.flow-pill-name {
  font-size: 10.5px;
  letter-spacing: 0.5px;
}

.flow-pill-key {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  padding: 0 3px;
  color: #8C7B65;
  margin-left: 1px;
}

.flow-pill:hover {
  color: #EDE8DF;
  border-color: #78736B;
}

.flow-pill:hover .flow-pill-icon {
  opacity: 1;
  transform: translateY(-0.5px);
}

.flow-pill.active {
  background: #333027;
  color: #DEC38B;
  border-color: #C5A059;
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.18);
}

.flow-pill.active .flow-pill-icon {
  color: #DEC38B;
  opacity: 1;
}

.flow-pill.active .flow-pill-key {
  background: rgba(197, 160, 89, 0.22);
  color: #DEC38B;
  font-weight: 700;
}

.flow-shortcuts-tip {
  color: #78736B;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

.flow-shortcuts-tip kbd {
  background: #22201C;
  border: 1px solid #333027;
  color: #DEC38B;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

@media (max-width: 1200px) {
  .flow-shortcuts-tip {
    display: none !important;
  }
  .ws-flowwrite-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 10px;
  }
  .ws-flowwrite-bar::-webkit-scrollbar {
    display: none;
  }
  .flow-pill-group {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 5px;
  }
  .flow-pill-group::-webkit-scrollbar {
    display: none;
  }
  .flow-pill {
    padding: 4px 8px;
    flex-shrink: 0;
  }
  .flow-pill-name {
    display: inline !important;
    font-size: 10px;
  }
}

/* ==============================================================================
   2b. Context-Aware Screenplay Writing Hints Strip
   ============================================================================== */
.ws-writing-hint-strip {
  background: #171613;
  border-bottom: 1px solid #2B2923;
  padding: 5px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  gap: 12px;
  flex-shrink: 0;
  transition: opacity 0.2s ease, max-height 0.2s ease;
  z-index: 10;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden;
}

.ws-writing-hint-strip.dismissed {
  display: none !important;
}

.hint-content-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.hint-spark-icon {
  color: #C5A059;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.hint-element-badge {
  background: rgba(197, 160, 89, 0.12);
  border: 1px solid rgba(197, 160, 89, 0.35);
  color: #C5A059;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.hint-message-text {
  color: #C5C0B6;
  line-height: 1.35;
}

.hint-example-chip {
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(197, 160, 89, 0.4);
  color: #DEC38B;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 3px;
  white-space: nowrap;
}

.hint-actions-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hint-hit-link-btn {
  background: transparent;
  border: 1px solid #333027;
  color: #C5A059;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.hint-hit-link-btn:hover {
  background: rgba(197, 160, 89, 0.12);
  border-color: #C5A059;
}

.hint-dismiss-btn {
  background: transparent;
  border: none;
  color: #78736B;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.hint-dismiss-btn:hover {
  color: #EDE8DF;
}

/* ==============================================================================
   2c. Text-Selection Formatting & Annotation Toolbar
   ============================================================================== */
.ws-selection-toolbar {
  position: absolute;
  z-index: 1000;
  background: #1C1A17;
  border: 1px solid rgba(197, 160, 89, 0.35);
  border-radius: 7px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(197, 160, 89, 0.15);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: selToolbarFadeIn 0.12s ease-out;
  user-select: none;
}

@keyframes selToolbarFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.sel-toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sel-toolbar-divider {
  width: 1px;
  height: 18px;
  background: #38342B;
  margin: 0 2px;
}

.sel-tool-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #D8D2C6;
  border-radius: 4px;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.sel-tool-btn:hover {
  background: #2B2823;
  color: #FFFFFF;
  border-color: rgba(197, 160, 89, 0.3);
}

.sel-tool-btn.active {
  background: rgba(197, 160, 89, 0.25);
  border-color: #C5A059;
  color: #EAD5A8;
  box-shadow: 0 0 6px rgba(197, 160, 89, 0.25);
}

.sel-tool-btn.close-btn {
  font-size: 15px;
  color: #78736B;
}

.sel-tool-btn.close-btn:hover {
  color: #FFFFFF;
}

.sel-tool-label {
  font-size: 9.5px;
  color: #A59276;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 3px;
}

.sel-color-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #1C1A17;
  box-shadow: 0 0 0 1px #4A463D;
  margin: 0 1px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sel-color-btn:hover {
  transform: scale(1.25);
  box-shadow: 0 0 0 1.5px #EAD5A8;
}

.sel-color-btn.active {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 8px rgba(255, 255, 255, 0.5);
  transform: scale(1.2);
}

.sel-color-btn.color-gold { background: #C5A059; }
.sel-color-btn.color-blue { background: #3B82F6; }
.sel-color-btn.color-green { background: #22C55E; }
.sel-color-btn.color-purple { background: #A855F7; }
.sel-color-btn.color-red { background: #EF4444; }

.sel-note-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 270px;
  background: #1C1A17;
  border: 1px solid rgba(197, 160, 89, 0.4);
  border-radius: 6px;
  padding: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  display: flex;
  gap: 6px;
  z-index: 1001;
}

.sel-note-popover input {
  flex: 1;
  background: #141311;
  border: 1px solid #3B3830;
  color: #EDE8DF;
  font-size: 11.5px;
  padding: 5px 8px;
  border-radius: 4px;
  outline: none;
}

.sel-note-popover input:focus {
  border-color: #C5A059;
}

.sel-note-submit-btn {
  background: #C5A059;
  border: none;
  color: #121110;
  font-size: 10.5px;
  font-weight: 700;
  padding: 0 8px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.sel-note-submit-btn:hover {
  background: #DEC38B;
}

/* ==============================================================================
   2d. Element Annotations Gutter & Inline Chips
   ============================================================================== */
.element-annotations-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
  padding-left: 2px;
}

.element-ann-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  background: rgba(30, 28, 24, 0.85);
  border: 1px solid #333027;
  border-left-width: 3px;
  border-radius: 3px;
  padding: 1px 5px;
  color: #C5C0B6;
  max-width: 100%;
}

.element-ann-text {
  font-family: var(--font-mono, monospace);
  font-style: italic;
  color: #DEC38B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.element-ann-note {
  color: #EDE8DF;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.element-ann-del {
  background: transparent;
  border: none;
  color: #78736B;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0 1px;
  margin-left: 2px;
}

.element-ann-del:hover {
  color: #EF4444;
}

/* ==============================================================================
   3. Workspace Layout & Scene Navigator Drawer
   ============================================================================== */
.ws-workspace-layout {
  display: flex;
  flex: 1;
  height: calc(100vh - 105px);
  overflow: hidden;
  position: relative;
}

/* Collapsible Scene Navigator (Matching SceneNavigatorSheet.kt) */
.ws-scene-navigator {
  width: 290px;
  background: #181715;
  border-right: 1px solid #2B2923;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
  z-index: 10;
}

.ws-scene-navigator.collapsed {
  width: 0;
  border-right-color: transparent;
  visibility: hidden;
}

.scene-nav-header {
  padding: 14px 18px;
  border-bottom: 1px solid #2B2923;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #141311;
}

.scene-nav-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.scene-nav-tag {
  color: #C5A059;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.scene-nav-count {
  color: #78736B;
  font-size: 11px;
}

.scene-nav-close-btn {
  background: transparent;
  border: none;
  color: #78736B;
  font-size: 20px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  transition: color 0.15s ease;
}

.scene-nav-close-btn:hover {
  color: #EDE8DF;
}

.scene-nav-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scene-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1F1E1B;
  border: 1px solid transparent;
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.scene-nav-item:hover {
  background: #282622;
  border-color: rgba(197, 160, 89, 0.3);
}

.scene-nav-item.active {
  background: #332F26;
  border-color: #C5A059;
}

.scene-nav-badge {
  color: #C5A059;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  min-width: 24px;
}

.scene-nav-text {
  color: #EDE8DF;
  font-size: 12px;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* ==============================================================================
   Vertical Right-Side Tool Navigation Rail (Arc Studio & WriterDuet Style)
   ============================================================================== */
.ws-right-tool-rail {
  width: 56px;
  background: #141311;
  border-left: 1px solid #2B2923;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.22s cubic-bezier(0.2, 0, 0, 1), transform 0.25s ease;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 15;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: #2D2A22 #141311;
}

.ws-right-tool-rail::-webkit-scrollbar {
  width: 5px;
}

.ws-right-tool-rail::-webkit-scrollbar-track {
  background: #141311;
}

.ws-right-tool-rail::-webkit-scrollbar-thumb {
  background: #2D2A22;
  border-radius: 3px;
}

.ws-right-tool-rail::-webkit-scrollbar-thumb:hover {
  background: #C5A059;
}

.ws-right-tool-rail.expanded {
  width: 204px;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.45);
}

.rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  border-bottom: 1px solid #24221C;
  background: #100F0D;
  min-height: 46px;
  box-sizing: border-box;
}

.rail-title {
  display: none;
  font-size: 11px;
  font-weight: 700;
  color: #C5A059;
  letter-spacing: 1.2px;
  font-family: var(--font-mono);
  padding-left: 4px;
  text-transform: uppercase;
}

.ws-right-tool-rail.expanded .rail-title {
  display: inline-block;
}

.rail-collapse-btn {
  background: #1A1916;
  border: 1px solid #332F27;
  color: #C5A059;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.18s ease;
  margin: 0 auto;
}

.ws-right-tool-rail.expanded .rail-collapse-btn {
  margin: 0;
}

.rail-collapse-btn:hover {
  background: #27231B;
  border-color: #C5A059;
  color: #DEC38B;
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.25);
}

.rail-collapse-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1);
}

.ws-right-tool-rail.expanded .rail-collapse-btn svg {
  transform: rotate(180deg);
}

.rail-section {
  display: flex;
  flex-direction: column;
  padding: 6px 6px;
  gap: 3px;
  border-bottom: 1px solid #22201A;
}

.rail-section:last-child {
  border-bottom: none;
  margin-top: auto;
}

.rail-section-label {
  display: none;
  font-size: 9.5px;
  font-weight: 700;
  color: #7A7468;
  letter-spacing: 1px;
  padding: 4px 10px 2px;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.ws-right-tool-rail.expanded .rail-section-label {
  display: block;
}

.ws-rail-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #A8A296;
  border-radius: 6px;
  padding: 8px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  position: relative;
  min-height: 40px;
}

.ws-right-tool-rail.expanded .ws-rail-btn {
  justify-content: flex-start;
  padding: 8px 12px;
}

.ws-rail-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #C5A059;
  transition: transform 0.15s ease, color 0.15s ease;
}

.ws-rail-btn span {
  display: none;
  font-size: 12.5px;
  font-weight: 500;
  color: #EDE8DF;
  white-space: nowrap;
  font-family: var(--font-sans);
  letter-spacing: 0.2px;
}

.ws-right-tool-rail.expanded .ws-rail-btn span {
  display: inline-block !important;
}

.ws-rail-btn:hover {
  background: #201E1A;
  border-color: rgba(197, 160, 89, 0.35);
  color: #FFFFFF;
}

.ws-rail-btn:hover svg {
  transform: scale(1.08);
  color: #DEC38B;
}

.ws-rail-btn:hover span {
  color: #FFFFFF;
}

.ws-rail-btn.active {
  background: #252219;
  border-color: #C5A059;
  color: #EDE8DF;
  box-shadow: inset 3px 0 0 #C5A059;
}

/* Floating Search & Replace Bar (Ctrl+F) */
.ws-search-bar-floating {
  position: absolute;
  top: 10px;
  right: 28px;
  background: #1c1a17;
  border: 1px solid #C5A059;
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 360px;
  z-index: 50;
  transition: all 0.2s ease;
}

.ws-search-bar-floating[aria-hidden="true"] {
  display: none;
}

.search-inputs-row, .replace-inputs-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-field-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  background: #121110;
  border: 1px solid #2B2923;
  border-radius: 4px;
  padding: 4px 8px;
}

.search-field-wrap input, .replace-inputs-row input {
  background: transparent;
  border: none;
  outline: none;
  color: #EDE8DF;
  font-size: 12.5px;
  font-family: var(--font-sans);
  width: 100%;
}

.search-icon {
  width: 14px;
  height: 14px;
  color: #78736B;
  margin-right: 6px;
  flex-shrink: 0;
}

.search-match-count {
  font-size: 11px;
  color: #C5A059;
  font-family: var(--font-mono);
  margin-left: 6px;
  flex-shrink: 0;
}

.search-actions-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-btn-icon {
  background: #2B2923;
  border: none;
  color: #EDE8DF;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.search-btn-icon:hover {
  background: #3B3831;
}

.search-btn-icon svg {
  width: 14px;
  height: 14px;
}

.search-btn-text {
  background: #252420;
  border: 1px solid #333027;
  color: #EDE8DF;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.search-btn-text:hover {
  background: #333027;
  border-color: #C5A059;
  color: #DEC38B;
}

.replace-inputs-row input {
  background: #121110;
  border: 1px solid #2B2923;
  border-radius: 4px;
  padding: 5px 8px;
}

/* In-Editor Search Matches */
.element-row.search-match {
  background: rgba(197, 160, 89, 0.12) !important;
}

.element-row.search-match-current {
  background: rgba(197, 160, 89, 0.28) !important;
  outline: 1.5px solid #C5A059;
}

/* Visual Page Break Divider per ScreenplayPageCalculator.kt */
.page-break-divider {
  width: 100%;
  margin: 40px 0 28px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
  pointer-events: none;
  background: transparent;
  padding: 8px 0;
}

.page-break-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(to right, #B0A898, #B0A898 6px, transparent 6px, transparent 12px);
}

.page-break-label {
  background: #FAF6ED;
  padding: 3px 16px;
  color: #7A7062;
  font-family: 'Courier Prime', Courier, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  z-index: 1;
  border: 1px solid #DED6C4;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ws-screenplay-page.paper-white .page-break-label {
  background: #FFFFFF;
  border-color: #E0E0E0;
}

/* Ensure all elements before and after page boundaries retain proper paper styling */
.element-row {
  background: transparent;
  color: inherit;
}

.element-row .element-input {
  color: #1C1A17 !important;
  background: transparent !important;
}

.ws-screenplay-page.paper-white .element-row .element-input {
  color: #111111 !important;
}

/* Drafts & Versions Modal Styling */
.draft-create-card {
  background: linear-gradient(180deg, #24221D 0%, #1A1916 100%);
  border: 1px solid rgba(197, 160, 89, 0.35);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.draft-create-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.draft-create-input-row input {
  flex: 1;
}

.draft-create-tip {
  color: #8A857C;
  font-size: 11.5px;
  line-height: 1.5;
  margin: 0;
}

.drafts-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}

.drafts-history-title {
  color: #C5A059;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  font-family: var(--font-mono);
}

.drafts-history-count {
  color: #78736B;
  font-size: 11px;
}

.drafts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
}

.draft-card {
  background: #181715;
  border: 1px solid #2B2923;
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: all 0.15s ease;
}

.draft-card:hover {
  border-color: rgba(197, 160, 89, 0.35);
  background: #1E1D19;
}

.draft-card-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #EDE8DF;
  font-weight: 600;
}

.draft-card-info p {
  margin: 0;
  font-size: 11.5px;
  color: #78736B;
}

.draft-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.draft-btn-restore {
  background: #2A2720;
  border: 1px solid #C5A059;
  color: #C5A059;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.draft-btn-restore:hover {
  background: #C5A059;
  color: #121110;
}

.draft-btn-delete {
  background: transparent;
  border: none;
  color: #78736B;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
}

.draft-btn-delete:hover {
  color: #CF6679;
}

.draft-btn-delete svg {
  width: 16px;
  height: 16px;
}

/* ==============================================================================
   4. Main Screenplay Stage & Physical Paper
   ============================================================================== */
.ws-stage-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  background-color: #0d0c0b;
  display: flex;
  justify-content: center;
  padding: 40px 20px 80px 20px;
  scrollbar-width: thin;
  scrollbar-color: #38342B #100F0D;
}

.ws-stage-viewport::-webkit-scrollbar {
  width: 10px;
}

.ws-stage-viewport::-webkit-scrollbar-track {
  background: #100F0D;
  border-left: 1px solid #1E1C18;
}

.ws-stage-viewport::-webkit-scrollbar-thumb {
  background: #38342B;
  border-radius: 5px;
  border: 2px solid #100F0D;
}

.ws-stage-viewport::-webkit-scrollbar-thumb:hover {
  background: #C5A059;
}

.ws-desk-background {
  width: 100%;
  max-width: 850px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding-bottom: 60px;
}

/* Physical Screenplay Page Metaphor (US Letter / A4 Proportions) */
.ws-screenplay-page {
  width: 100%;
  max-width: 800px;
  min-height: 1050px;
  background: #FAF6ED; /* PaperWarm in Android */
  color: #1C1A17;      /* TextPaper in Android */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 1px rgba(0, 0, 0, 0.8);
  border: 1px solid #DED6C4;
  border-radius: 2px;
  padding: 60px 70px 70px 70px;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
}

.page-top-margin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 8px;
}

.page-watermark-line {
  font-family: 'Courier Prime', Courier, monospace;
  font-size: 11px;
  color: #7A7062;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
}

.page-number-display {
  font-family: 'Courier Prime', Courier, monospace;
  font-size: 12px;
  color: #7A7062;
  font-weight: 700;
}

/* Elements Stream */
.screenplay-elements-stream {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ==============================================================================
   4. Screenplay Element Items (1:1 with ElementEditorItem.kt)
   ============================================================================== */
.element-row {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: background 0.1s ease;
}

.element-row.focused {
  background: rgba(197, 160, 89, 0.05);
  border-radius: 2px;
}

/* Type Indicator Icon on Hover / Focus (Replacing Black Rectangular Labels) */
.element-type-badge {
  position: absolute;
  left: -32px;
  top: 1px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #8E8271;
  border: none;
  border-radius: 4px;
  padding: 0;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  z-index: 5;
  user-select: none;
}

.element-type-badge svg {
  width: 14px;
  height: 14px;
  display: block;
}

.element-row:hover .element-type-badge {
  opacity: 0.85;
  color: #7A7062;
  background-color: rgba(197, 160, 89, 0.08);
}

.element-row.focused .element-type-badge {
  opacity: 1;
  color: #C5A059;
  background-color: rgba(197, 160, 89, 0.16);
}

@media (hover: none) {
  .element-type-badge {
    opacity: 0.45;
  }
  .element-row.focused .element-type-badge {
    opacity: 1;
  }
}

/* Input Fields inside Element Rows */
.element-input-wrapper {
  position: relative;
  width: 100%;
  display: block;
}

.element-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #1C1A17;
  font-family: 'Courier Prime', 'Courier New', Courier, 'Noto Sans Telugu', 'Noto Sans Devanagari', 'Noto Sans Kannada', 'Noto Sans Tamil', 'Noto Sans Malayalam', 'Noto Sans', monospace;
  resize: none;
  overflow: hidden;
  line-height: 22px;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: block;
}

.element-format-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  box-sizing: border-box;
  font-family: 'Courier Prime', 'Courier New', Courier, 'Noto Sans Telugu', 'Noto Sans Devanagari', 'Noto Sans Kannada', 'Noto Sans Tamil', 'Noto Sans Malayalam', 'Noto Sans', monospace;
  resize: none;
  line-height: 22px;
  padding: 0;
  margin: 0;
  color: transparent;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
}

/* Annotation format classes */
.ann-plain {
  visibility: hidden;
}

.ann-format-underline {
  text-decoration: underline;
  text-decoration-color: #1C1A17;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.ann-format-strike {
  text-decoration: line-through;
  text-decoration-color: #1C1A17;
  text-decoration-thickness: 1.5px;
}

.ann-format-bold {
  color: #1C1A17;
  font-weight: 800;
  background: #FAF6ED;
}

.ann-format-italic {
  color: #1C1A17;
  font-style: italic;
  background: #FAF6ED;
}

.ann-format-bold.ann-format-italic {
  color: #1C1A17;
  font-weight: 800;
  font-style: italic;
  background: #FAF6ED;
}

.ann-format-highlight {
  border-radius: 2px;
}

.element-input::placeholder {
  color: #8A8680;
  font-style: italic;
  opacity: 0.6;
}

/* Indic Script Fallback & Letter-Spacing Reset (1:1 with Type.kt:268-277 & ElementEditorItem.kt:442-445) */
.element-row.has-indic .element-input,
.element-row.has-indic .element-format-overlay {
  font-family: 'Noto Sans Telugu', 'Noto Sans Devanagari', 'Noto Sans Kannada', 'Noto Sans Tamil', 'Noto Sans Malayalam', 'Noto Sans', 'Courier Prime', -apple-system, sans-serif !important;
  letter-spacing: 0px !important;
}

/* Element Styles exact padding, line-heights & weights per ElementEditorItem.kt & Type.kt:
   - SCENE_HEADING: 15sp / 22sp, Bold (700), uppercase, topPadding 16dp, letter-spacing 0.5sp
   - ACTION: 15sp / 22sp, Normal (400), topPadding 6dp, start 0dp
   - CHARACTER: 15sp / 22sp, Bold (700), uppercase, topPadding 12dp, start 170px (desktop) / 68dp (mobile), end 40px (desktop) / 16dp (mobile), letter-spacing 0.5sp
   - PARENTHETICAL: 14sp / 20sp, Normal (400), topPadding 2dp, start 120px (desktop) / 48dp (mobile), end 80px (desktop) / 24dp (mobile)
   - DIALOGUE: 15sp / 21sp, Normal (400), topPadding 2dp, start 70px (desktop) / 24dp (mobile), end 70px (desktop) / 24dp (mobile)
   - TRANSITION: 14sp / 20sp, Bold (700), uppercase, topPadding 8dp, start 70px (desktop) / 24dp (mobile), text-align right, letter-spacing 0.5sp
   - SHOT: 14sp / 20sp, Bold (700), uppercase, topPadding 8dp, start 0dp, letter-spacing 0.5sp
   - NOTE: 13sp / 18sp, Normal (400), italic, topPadding 4dp, start 12dp, end 12dp
*/

.element-row[data-type="SCENE_HEADING"] {
  margin-top: 16px;
  padding-left: 0;
  padding-right: 0;
}
.element-row[data-type="SCENE_HEADING"] .element-input,
.element-row[data-type="SCENE_HEADING"] .element-format-overlay {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.element-row[data-type="ACTION"] {
  margin-top: 6px;
  padding-left: 0;
  padding-right: 0;
}
.element-row[data-type="ACTION"] .element-input,
.element-row[data-type="ACTION"] .element-format-overlay {
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: normal;
}

.element-row[data-type="CHARACTER"] {
  margin-top: 12px;
  padding-left: 170px;
  padding-right: 40px;
}
.element-row[data-type="CHARACTER"] .element-input,
.element-row[data-type="CHARACTER"] .element-format-overlay {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.element-row[data-type="PARENTHETICAL"] {
  margin-top: 2px;
  padding-left: 120px;
  padding-right: 80px;
}
.element-row[data-type="PARENTHETICAL"] .element-input,
.element-row[data-type="PARENTHETICAL"] .element-format-overlay {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #66625B;
  letter-spacing: normal;
}

.element-row[data-type="DIALOGUE"] {
  margin-top: 2px;
  padding-left: 70px;
  padding-right: 70px;
}
.element-row[data-type="DIALOGUE"] .element-input,
.element-row[data-type="DIALOGUE"] .element-format-overlay {
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: normal;
}

.element-row[data-type="TRANSITION"] {
  margin-top: 8px;
  padding-left: 70px;
  padding-right: 0;
}
.element-row[data-type="TRANSITION"] .element-input,
.element-row[data-type="TRANSITION"] .element-format-overlay {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: right;
  letter-spacing: 0.5px;
}

.element-row[data-type="SHOT"] {
  margin-top: 8px;
  padding-left: 0;
  padding-right: 0;
}
.element-row[data-type="SHOT"] .element-input,
.element-row[data-type="SHOT"] .element-format-overlay {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.element-row[data-type="NOTE"] {
  margin-top: 4px;
  padding-left: 12px;
  padding-right: 12px;
}
.element-row[data-type="NOTE"] .element-input,
.element-row[data-type="NOTE"] .element-format-overlay {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  font-style: italic;
  color: #8C7B65;
  background: rgba(197, 160, 89, 0.04);
  border-left: 2px solid rgba(197, 160, 89, 0.4);
  padding: 4px 8px;
  border-radius: 2px;
  letter-spacing: normal;
}

.page-bottom-margin {
  margin-top: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.script-stat-chip {
  font-family: 'Courier Prime', Courier, monospace;
  font-size: 11px;
  color: #7A7062;
}

/* ==============================================================================
   5. Modals & Sheets (Library & New Script)
   ============================================================================== */
.ws-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
}

.ws-modal-backdrop.active {
  display: flex;
}

.ws-modal-card {
  background: #191815;
  border: 1px solid #2B2923;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalFadeIn 0.2s ease-out;
}

.ws-modal-card.compact {
  max-width: 480px;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.ws-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #2B2923;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ws-modal-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ws-modal-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(197, 160, 89, 0.15);
  border: 1px solid rgba(197, 160, 89, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C5A059;
}

.ws-modal-icon-badge svg {
  width: 20px;
  height: 20px;
}

.ws-modal-title {
  color: #EDE8DF;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.ws-modal-sub {
  color: #9E988E;
  font-size: 12px;
}

.ws-modal-close {
  background: transparent;
  border: none;
  color: #9E988E;
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
}

.ws-modal-body {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ws-input-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #C5A059;
}

.ws-text-input,
.ws-textarea-input,
.ws-select-input {
  width: 100%;
  background-color: #121110;
  border: 1px solid #2B2923;
  border-radius: 6px;
  color: #EDE8DF;
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ws-select-input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C5A059'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 36px;
}

.ws-select-input option {
  background-color: #181714;
  color: #EDE8DF;
  padding: 8px 12px;
}

.ws-text-input:hover,
.ws-textarea-input:hover,
.ws-select-input:hover {
  border-color: #3F3C34;
  background-color: #161513;
}

.ws-text-input:focus,
.ws-textarea-input:focus,
.ws-select-input:focus {
  border-color: #C5A059;
  box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.2);
  background-color: #161513;
}

.ws-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #2B2923;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #151412;
}

.ws-btn-secondary {
  background: transparent;
  border: 1px solid #2B2923;
  color: #9E988E;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ws-btn-secondary:hover {
  color: #EDE8DF;
  background: #1e1d1a;
}

.ws-btn-primary {
  background: #C5A059;
  border: none;
  color: #121110;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ws-btn-primary:hover {
  background: #d4af65;
}

/* Saved Scripts List */
.saved-scripts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.script-item-card {
  background: #1E1D1A;
  border: 1px solid #2B2923;
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.script-item-card:hover {
  border-color: #C5A059;
  background: #24221d;
  transform: translateY(-1px);
}

.script-item-meta h4 {
  font-family: 'Courier Prime', Courier, monospace;
  font-size: 15px;
  color: #EDE8DF;
  font-weight: 500;
  letter-spacing: 0.5px;
  -webkit-font-smoothing: antialiased;
}

.script-item-meta p {
  font-size: 12px;
  color: #9E988E;
  margin-top: 3px;
}

.script-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.script-item-duplicate {
  background: transparent;
  border: none;
  color: #78736B;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.script-item-duplicate:hover {
  color: #C5A059;
  background: rgba(197, 160, 89, 0.12);
}

.script-item-duplicate svg {
  width: 18px;
  height: 18px;
  display: block;
}

.script-item-delete {
  background: transparent;
  border: none;
  color: #78736B;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.script-item-delete:hover {
  color: #CF6679;
  background: rgba(207, 102, 121, 0.1);
}

.script-item-delete svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ==============================================================================
   5b. Phase 3 Modal Variants & Components
   ============================================================================== */
.ws-modal-card.wide {
  max-width: 820px;
}

.ws-modal-card.extra-wide {
  max-width: 1040px;
  height: 85vh;
}

.ws-modal-card.extra-wide .ws-modal-body {
  height: calc(85vh - 140px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Idea Pad */
.idea-creator-box {
  background: #141311;
  border: 1px solid #2B2923;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.idea-creator-row {
  display: flex;
  gap: 10px;
}

.idea-creator-actions {
  display: flex;
  justify-content: flex-end;
}

.idea-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #24221D;
}

.idea-chips, .idea-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.idea-chip, .idea-status-tab {
  background: #1E1D1A;
  border: 1px solid #2B2923;
  color: #8C867A;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.idea-chip:hover, .idea-status-tab:hover {
  border-color: #C5A059;
  color: #FAF6ED;
}

.idea-chip.active, .idea-status-tab.active {
  background: #2D271B;
  border-color: #C5A059;
  color: #C5A059;
}

.idea-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.idea-card {
  background: #191815;
  border: 1px solid #2B2923;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.idea-card:hover {
  border-color: #C5A059;
  transform: translateY(-2px);
}

.idea-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.idea-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: #24221D;
  color: #C5A059;
}

.idea-status-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  color: #8C867A;
}

.idea-status-badge.active { color: #5CB85C; }
.idea-status-badge.used { color: #C5A059; }
.idea-status-badge.archived { color: #666; }

.idea-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #FAF6ED;
  margin: 0;
  line-height: 1.3;
}

.idea-card-note {
  font-size: 12px;
  color: #B5AFA4;
  line-height: 1.4;
  margin: 0;
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}

.idea-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #24221D;
}

.idea-card-actions {
  display: flex;
  gap: 6px;
}

.idea-action-btn {
  background: transparent;
  border: none;
  color: #8C867A;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  transition: color 0.2s;
}

.idea-action-btn:hover {
  color: #C5A059;
}

.idea-action-btn.delete:hover {
  color: #E05252;
}

.idea-count-label {
  font-size: 12px;
  color: #8C867A;
  margin-right: auto;
}

/* Dialogue Lab */
.dialogue-lab-container {
  display: flex;
  gap: 20px;
  height: 100%;
  min-height: 440px;
}

.dialogue-char-sidebar {
  width: 280px;
  border-right: 1px solid #2B2923;
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dialogue-pane-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #C5A059;
  margin: 0;
}

.dialogue-char-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
}

.dialogue-char-item {
  background: #141311;
  border: 1px solid #24221D;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dialogue-char-item:hover {
  border-color: #444037;
  background: #1A1916;
}

.dialogue-char-item.active {
  border-color: #C5A059;
  background: #25221B;
}

.dialogue-char-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialogue-char-name {
  font-size: 13px;
  font-weight: 700;
  color: #FAF6ED;
}

.dialogue-char-pct {
  font-size: 12px;
  font-weight: 700;
  color: #C5A059;
}

.dialogue-char-stats {
  font-size: 11px;
  color: #8C867A;
  display: flex;
  justify-content: space-between;
}

.dialogue-sides-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: hidden;
}

.dialogue-sides-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #2B2923;
}

.dialogue-active-char {
  font-size: 16px;
  font-weight: 700;
  color: #FAF6ED;
  margin: 0 0 2px 0;
}

.dialogue-active-meta {
  font-size: 12px;
  color: #8C867A;
  margin: 0;
}

.dialogue-lines-stream {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 8px;
}

.dialogue-side-block {
  background: #141311;
  border: 1px solid #24221D;
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dialogue-side-scene {
  font-size: 11px;
  font-weight: 700;
  color: #C5A059;
  letter-spacing: 0.05em;
}

.dialogue-side-paren {
  font-style: italic;
  font-size: 12px;
  color: #8C867A;
  padding-left: 20px;
}

.dialogue-side-speech {
  font-family: 'Courier Prime', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #EDE8DF;
  padding-left: 20px;
}

/* Scene Sheets */
.scene-sheets-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2B2923;
}

.scene-sheets-stats {
  font-size: 13px;
  color: #B5AFA4;
}

.scene-sheets-stats strong {
  color: #C5A059;
}

.scene-sheets-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 6px;
}

.scene-sheet-card {
  background: #141311;
  border: 1px solid #24221D;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s;
}

.scene-sheet-card:hover {
  border-color: #3D392E;
}

.scene-sheet-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid #1E1D1A;
  padding-bottom: 8px;
}

.scene-sheet-num {
  font-size: 13px;
  font-weight: 700;
  color: #C5A059;
}

.scene-sheet-heading {
  font-size: 14px;
  font-weight: 700;
  color: #FAF6ED;
  flex: 1;
}

.scene-sheet-env-time {
  display: flex;
  gap: 6px;
}

.scene-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: #1E1D1A;
  color: #C5A059;
  border: 1px solid #2B2923;
}

.scene-sheet-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  font-size: 12px;
  color: #8C867A;
}

.scene-sheet-meta span strong {
  color: #B5AFA4;
}

.scene-sheet-cast {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cast-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: #24221D;
  color: #FAF6ED;
}

.scene-sheet-summary {
  font-size: 12px;
  color: #B5AFA4;
  line-height: 1.4;
  background: #191815;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: pre-line;
}

/* Health & Statistics */
.health-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.health-metric-tile {
  background: #141311;
  border: 1px solid #2B2923;
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.health-metric-tile.wide {
  grid-column: 1 / -1;
}

.health-metric-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8C867A;
}

.health-metric-val {
  font-size: 28px;
  font-weight: 700;
  color: #FAF6ED;
  line-height: 1.1;
}

.health-metric-sub {
  font-size: 12px;
  color: #B5AFA4;
}

.health-balance-bar {
  height: 12px;
  background: #24221D;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  margin-top: 6px;
}

.health-balance-dialogue {
  background: #C5A059;
  height: 100%;
}

.health-balance-action {
  background: #50789E;
  height: 100%;
}

.health-balance-legend {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 4px;
}

.health-balance-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.dialogue { background: #C5A059; }
.legend-dot.action { background: #50789E; }

/* ==============================================================================
   5c. Phase 4: Package Backup & Import Styles
   ============================================================================== */
.package-info-box {
  background: #141311;
  border: 1px solid #2B2923;
  border-radius: 8px;
  padding: 16px;
}

.package-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.package-stat-pill {
  font-size: 11px;
  background: #1E1D1A;
  border: 1px solid #2B2923;
  padding: 4px 10px;
  border-radius: 4px;
  color: #B5AFA4;
}

.package-stat-pill strong {
  color: #C5A059;
}

.import-dropzone {
  border: 2px dashed #3D392E;
  border-radius: 8px;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  background: #141311;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.import-dropzone:hover, .import-dropzone.dragover {
  border-color: #C5A059;
  background: #1B1A16;
}

.import-preview-box {
  background: #141311;
  border: 1px solid #2B2923;
  border-radius: 8px;
  padding: 14px 16px;
}

/* ==============================================================================
   5d. Phase 5: Editor Preferences & Passcode Lock Styles
   ============================================================================== */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-group.full-width {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #2B2923;
}

.settings-hint {
  font-size: 11px;
  color: #78736B;
}

/* Screenplay Paper Variations */
.ws-screenplay-page.paper-white {
  background: #FFFFFF !important;
  color: #111111 !important;
}

.ws-screenplay-page.font-monospace {
  font-family: 'Consolas', 'Courier New', monospace !important;
}

.ws-screenplay-page.font-noto-telugu {
  font-family: 'Noto Sans Telugu', 'Courier Prime', monospace !important;
}

.ws-screenplay-page.font-noto-sans {
  font-family: 'Noto Sans', 'Courier Prime', monospace !important;
}

.ws-screenplay-page.font-noto-devanagari {
  font-family: 'Noto Sans Devanagari', 'Courier Prime', monospace !important;
}

.ws-screenplay-page.font-noto-tamil {
  font-family: 'Noto Sans Tamil', 'Courier Prime', monospace !important;
}

.ws-screenplay-page.font-noto-kannada {
  font-family: 'Noto Sans Kannada', 'Courier Prime', monospace !important;
}

.ws-screenplay-page.font-noto-malayalam {
  font-family: 'Noto Sans Malayalam', 'Courier Prime', monospace !important;
}

.ws-screenplay-page.font-noto-bengali {
  font-family: 'Noto Sans Bengali', 'Courier Prime', monospace !important;
}

.ws-screenplay-page.font-noto-gujarati {
  font-family: 'Noto Sans Gujarati', 'Courier Prime', monospace !important;
}

.ws-screenplay-page.font-noto-gurmukhi {
  font-family: 'Noto Sans Gurmukhi', 'Courier Prime', monospace !important;
}

.ws-screenplay-page.font-noto-oriya {
  font-family: 'Noto Sans Oriya', 'Courier Prime', monospace !important;
}

.ws-screenplay-page.font-noto-arabic {
  font-family: 'Noto Sans Arabic', 'Courier Prime', monospace !important;
}

.ws-screenplay-page.text-small {
  font-size: 10.8pt !important;
}

.ws-screenplay-page.text-large {
  font-size: 13.8pt !important;
}

/* Continuous Page Display Mode */
.ws-stage-viewport.display-continuous .ws-page-break-divider {
  display: none !important;
}

.ws-stage-viewport.display-continuous .ws-desk-background {
  gap: 0 !important;
}

.ws-stage-viewport.display-continuous .ws-screenplay-page {
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  min-height: auto !important;
}

.ws-stage-viewport.display-continuous .ws-screenplay-page:last-child {
  border-bottom: 1px solid #DED6C4 !important;
}

/* Multi-Document Export Suite (Phase 6 Parity) */
.export-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
}

.export-option-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #181715;
  border: 1px solid #2B2923;
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.export-option-card:hover {
  border-color: rgba(197, 160, 89, 0.4);
  background: #1F1D19;
}

.export-option-card input[type="checkbox"] {
  margin-top: 3px;
  accent-color: #C5A059;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.export-opt-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #EDE8DF;
  margin-bottom: 3px;
  font-family: 'Courier Prime', monospace;
}

.export-opt-desc {
  font-size: 11.5px;
  color: #8C867A;
  line-height: 1.4;
}

/* ==============================================================================
   6. Toast Feedback
   ============================================================================== */
.ws-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1E1D1A;
  border: 1px solid #C5A059;
  color: #EDE8DF;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 200;
}

.ws-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================================================================
   7. Responsive Mobile & Tablet Tweaks for Workspace
   ============================================================================== */
/* Keyboard focus visibility for accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #C5A059 !important;
  outline-offset: 2px !important;
}

/* ==============================================================================
   5. Responsive Breakpoints & Viewport Adaptations
   ============================================================================== */

@media (max-width: 1440px) {
  .workspace-header {
    padding: 0 10px;
    gap: 6px;
  }
  .ws-header-left {
    gap: 4px;
  }
  .ws-back-btn {
    padding: 4px 7px;
    font-size: 11.5px;
    gap: 4px;
  }
  .ws-brand-mark {
    gap: 6px;
  }
  .ws-brand-name {
    font-size: 13px;
  }
  .ws-header-divider {
    margin: 0 2px;
  }
  .workspace-header .ws-phonetic-toolbar {
    gap: 3px;
    padding: 2px 4px;
  }
  .workspace-header .ws-lang-select {
    max-width: 82px;
    font-size: 11px;
    padding: 2px 3px;
  }
  .workspace-header .ws-phonetic-toggle-btn {
    padding: 2px 5px;
    font-size: 10.5px;
    gap: 3px;
  }
  .workspace-header .ws-focus-toolbar {
    margin-left: 0;
    gap: 3px;
    padding: 2px 5px;
  }
  .workspace-header .ws-focus-select {
    max-width: 85px;
    font-size: 11px;
    padding: 2px 3px;
  }
  .workspace-header .ws-revision-toolbar {
    gap: 3px;
    padding: 2px 5px;
  }
  .workspace-header .ws-rev-toggle-btn {
    padding: 2px 5px;
    font-size: 10.5px;
    gap: 3px;
  }
  .workspace-header .ws-rev-color-select {
    max-width: 85px;
    font-size: 11px;
    padding: 2px 3px;
  }
  .ws-header-right {
    gap: 4px;
  }
  .ws-undo-redo-group {
    padding: 1px 2px;
    gap: 1px;
  }
  .ws-undo-redo-group .ws-action-btn.icon-only {
    width: 24px;
    height: 26px;
  }
  .ws-action-btn.ws-search-field-btn {
    padding: 0 8px;
    gap: 5px;
    font-size: 11px;
  }
  .ws-status-info-box {
    max-width: 175px;
    padding: 2px 8px;
    gap: 6px;
  }
  .ws-status-info-box .status-info-text {
    font-size: 11px;
  }
  .ws-status-info-box .status-info-time {
    font-size: 9.5px;
  }
  .ws-action-btn {
    padding: 4px 7px;
    font-size: 11px;
    gap: 3px;
  }
}

@media (max-width: 1380px) {
  .workspace-header {
    padding: 0 8px;
    gap: 4px;
  }
  .ws-header-left {
    gap: 4px;
  }
  .ws-back-btn {
    padding: 5px 7px;
    font-size: 11.5px;
  }
  .ws-back-btn span {
    display: none;
  }
  .ws-brand-name {
    display: none;
  }
  .workspace-header .ws-phonetic-toolbar {
    gap: 3px;
    padding: 2px 4px;
  }
  .workspace-header .ws-lang-select {
    max-width: 90px;
    font-size: 11px;
  }
  .workspace-header .ws-focus-toolbar {
    margin-left: 0;
    gap: 3px;
    padding: 2px 5px;
  }
  .workspace-header .ws-focus-text {
    display: none;
  }
  .workspace-header .ws-focus-select {
    max-width: 85px;
    font-size: 11px;
  }
  .workspace-header .ws-revision-toolbar {
    gap: 3px;
    padding: 2px 5px;
  }
  .workspace-header .ws-rev-color-select {
    max-width: 90px;
    font-size: 11px;
  }
  .ws-status-info-box {
    max-width: 135px;
    padding: 2px 6px;
  }
  .ws-header-right {
    gap: 4px;
  }
  .ws-header-right #btnOpenLibrary span {
    display: none;
  }
  .ws-action-btn {
    padding: 5px 6px;
    font-size: 10.5px;
    gap: 3px;
  }
  .ws-action-btn.ws-search-field-btn {
    padding: 0 8px;
  }
  .ws-scene-navigator {
    width: 250px;
  }
  .ws-stage-viewport {
    padding: 30px 16px 60px 16px;
  }
}

@media (max-width: 1280px) {
  .workspace-header {
    gap: 3px;
  }
}

@media (max-width: 1200px) {
  .workspace-header {
    padding: 0 10px;
    gap: 8px;
  }
  .ws-header-left {
    gap: 5px;
  }
  .ws-back-btn {
    padding: 5px 8px;
  }
  .ws-back-btn span {
    display: none;
  }
  .ws-brand-name {
    display: none;
  }
  .workspace-header .ws-focus-toolbar {
    margin-left: 0;
    gap: 4px;
    padding: 2px 6px;
  }
  .workspace-header .ws-focus-text {
    display: none;
  }
  .workspace-header .ws-focus-select {
    max-width: 105px;
    font-size: 11px;
  }
  .workspace-header .ws-revision-toolbar {
    gap: 4px;
    padding: 2px 6px;
  }
  .workspace-header .ws-rev-color-select {
    max-width: 100px;
    font-size: 11px;
  }
  .workspace-header .ws-lang-select {
    max-width: 95px;
    font-size: 11px;
  }
}

@media (max-width: 1024px) {
  .workspace-header {
    padding: 0 6px;
    min-height: 50px;
    gap: 3px;
  }
  .ws-header-left {
    gap: 3px;
  }
  .ws-back-btn {
    padding: 4px 5px;
  }
  .ws-back-btn span {
    display: none;
  }
  .ws-brand-name {
    display: none;
  }
  .ws-header-divider {
    height: 18px;
    margin: 0 1px;
  }
  /* Multilingual phonetic toolbar laptop compaction */
  .workspace-header .ws-phonetic-toolbar {
    gap: 2px;
    padding: 2px 3px;
  }
  .workspace-header .ws-lang-select {
    max-width: 78px;
    font-size: 10.5px;
    padding: 2px 2px;
  }
  .workspace-header .ws-phonetic-toggle-btn {
    padding: 2px 4px;
    font-size: 10px;
    gap: 2px;
  }
  /* Character focus toolbar laptop compaction: keep eye icon, hide text label, compact select */
  .workspace-header .ws-focus-toolbar {
    margin-left: 0;
    gap: 2px;
    padding: 2px 3px;
  }
  .workspace-header .ws-focus-text {
    display: none;
  }
  .workspace-header .ws-focus-select {
    max-width: 75px;
    font-size: 10.5px;
    padding: 2px 2px;
  }
  /* Production revision toolbar laptop compaction */
  .workspace-header .ws-revision-toolbar {
    gap: 2px;
    padding: 2px 3px;
  }
  .workspace-header .ws-rev-toggle-btn {
    padding: 2px 4px;
    font-size: 10px;
    gap: 2px;
  }
  .workspace-header .ws-rev-color-select {
    max-width: 75px;
    font-size: 10.5px;
    padding: 2px 2px;
  }
  /* Right action button compaction: keep New and Save text, compact padding */
  .ws-header-right {
    gap: 2px;
  }
  .ws-undo-redo-group {
    padding: 1px 2px;
    gap: 1px;
  }
  .ws-undo-redo-group .ws-action-btn.icon-only {
    width: 22px;
    height: 24px;
  }
  .ws-action-btn.ws-search-field-btn {
    padding: 0 5px;
    font-size: 10.5px;
    gap: 4px;
  }
  /* On 1024px, show text only for primary project actions: New, Save */
  .ws-header-right #btnOpenLibrary span {
    display: none;
  }
  .ws-status-info-box {
    max-width: 125px;
    padding: 2px 5px;
    gap: 5px;
  }
  .ws-status-info-box .status-info-text {
    font-size: 10px;
  }
  .ws-status-info-box .status-info-time {
    font-size: 8.5px;
  }
  .ws-action-btn {
    padding: 4px 5px;
    font-size: 10.5px;
    gap: 2px;
  }
  .ws-scene-navigator {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.7);
    z-index: 30;
  }
  .ws-scene-navigator.collapsed {
    width: 0;
  }
  .ws-stage-viewport {
    padding: 24px 12px 60px 12px;
  }
  .ws-screenplay-page {
    max-width: 100%;
    padding: 40px 45px 50px 45px;
  }
}

@media (max-width: 900px) {
  .ws-modal-card.extra-wide {
    width: 95%;
    max-width: 95%;
  }
  .dialogue-lab-container {
    flex-direction: column;
    min-height: auto;
  }
  .dialogue-char-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #2B2923;
    padding-right: 0;
    padding-bottom: 12px;
    max-height: 180px;
  }
  .dialogue-sides-main {
    max-height: 400px;
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  .workspace-header {
    flex-wrap: wrap;
    height: auto;
    min-height: auto;
    padding: 6px 10px 8px 10px;
    gap: 6px;
  }
  .ws-header-left {
    width: 100%;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    min-width: 0;
  }
  .ws-header-left::-webkit-scrollbar {
    display: none;
  }
  .ws-brand-name {
    display: inline-block;
    font-size: 13px;
    flex-shrink: 0;
  }
  .ws-back-btn span {
    display: none;
  }
  .ws-header-right {
    width: 100%;
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    padding: 4px 0 2px 0;
    border-top: 1px solid rgba(197, 160, 89, 0.15);
  }
  .ws-header-right::-webkit-scrollbar {
    display: none;
  }
  .ws-action-btn {
    padding: 5px 8px;
    font-size: 11px;
    gap: 4px;
  }
  .ws-header-right #btnOpenLibrary span {
    display: none;
  }
  .ws-header-divider {
    margin: 0 2px;
    height: 18px;
  }

  .ws-script-title-strip {
    padding: 4px 10px;
  }
  .ws-title-label {
    font-size: 10px;
  }
  .ws-title-input {
    font-size: 12px;
    padding: 3px 6px;
  }
  .ws-save-indicator {
    font-size: 10px;
  }

  .ws-flowwrite-bar {
    padding: 4px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .flow-shortcuts-tip { display: none; }
  .flow-pill-name { display: none; }
  .flow-pill { padding: 4px 6px; }

  .ws-writing-hint-strip {
    padding: 5px 8px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .hint-content-left {
    gap: 5px;
  }
  .hint-actions-right {
    margin-left: auto;
  }
  .ws-selection-toolbar {
    max-width: 94vw;
    flex-wrap: wrap;
  }

  .ws-stage-viewport { 
    padding: 12px 6px; 
    overflow-x: auto;
  }
  .ws-screenplay-page { 
    padding: 24px 16px;
    max-width: 100%;
    min-width: 280px;
  }

  /* Exact Android ElementEditorItem.kt mobile dp indents */
  .element-row[data-type="CHARACTER"] { padding-left: 68px; padding-right: 16px; }
  .element-row[data-type="PARENTHETICAL"] { padding-left: 48px; padding-right: 24px; }
  .element-row[data-type="DIALOGUE"] { padding-left: 24px; padding-right: 24px; }
  .element-row[data-type="TRANSITION"] { padding-left: 24px; padding-right: 0; }
  .element-row[data-type="NOTE"] { padding-left: 12px; padding-right: 12px; }

  /* Modals on Mobile */
  .ws-modal-card {
    width: 95%;
    max-height: 90vh;
  }
  .ws-modal-card.extra-wide {
    height: 90vh;
  }
  .ws-modal-card.extra-wide .ws-modal-body {
    height: calc(90vh - 130px);
  }
  .ws-modal-header {
    padding: 14px 16px;
  }
  .ws-modal-body {
    padding: 16px;
  }
  .ws-modal-footer {
    padding: 12px 16px;
  }

  /* Responsive Grids */
  .health-metrics-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .export-options-grid {
    grid-template-columns: 1fr;
    max-height: 320px;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .workspace-header {
    padding: 5px 8px 7px 8px;
    gap: 5px;
  }
  .ws-header-left {
    gap: 6px;
  }
  .ws-brand-name {
    display: none;
  }
  .ws-header-left .ws-header-divider {
    display: none;
  }
  .ws-lang-select {
    max-width: 95px;
    font-size: 11px;
    padding: 2px 4px;
  }
  .ws-phonetic-toggle-btn {
    padding: 2px 6px;
    font-size: 10.5px;
  }
  .ws-header-right {
    gap: 4px;
    padding-top: 4px;
  }
  .ws-status-info-box {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
  }
  .ws-status-info-box .status-info-col {
    display: none;
  }
  .ws-action-btn {
    padding: 6px 7px;
    font-size: 10.5px;
    gap: 3px;
  }
  .ws-action-btn span {
    display: none;
  }
  .ws-action-btn svg {
    width: 15px;
    height: 15px;
  }
  .ws-script-title-strip {
    padding: 3px 6px;
  }
  .ws-title-strip-inner {
    gap: 6px;
  }
  .ws-title-label {
    font-size: 9.5px;
  }
  .ws-title-input {
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 2px 4px;
  }
  .ws-save-indicator {
    font-size: 9px;
  }
  .flow-pill {
    padding: 3px 7px;
    font-size: 10px;
  }
}

/* ==============================================================================
   Navigation from Dialogue Lab & Scene Sheets to Editor
   ============================================================================== */
.dialogue-side-block {
  cursor: pointer;
  transition: all 0.2s ease;
}

.dialogue-side-block:hover {
  border-color: #C5A059;
  background: #1B1915;
  transform: translateX(3px);
}

.scene-sheet-card {
  cursor: pointer;
  transition: all 0.2s ease;
}

.scene-sheet-card:hover {
  border-color: #C5A059;
  background: #1B1915;
  transform: translateX(3px);
}

@keyframes elementFlashPulse {
  0% {
    background-color: rgba(197, 160, 89, 0.45);
    outline: 2px solid #C5A059;
  }
  50% {
    background-color: rgba(197, 160, 89, 0.25);
    outline: 2px solid #DEC38B;
  }
  100% {
    background-color: transparent;
    outline: none;
  }
}

.element-row.element-nav-highlight {
  animation: elementFlashPulse 2.4s ease-out forwards;
}

/* ==============================================================================
   5. Multilingual Phonetic Typing UI & Contextual Candidate Box
   ============================================================================== */
.ws-phonetic-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #181714;
  border: 1px solid #2B2923;
  border-radius: 6px;
  padding: 3px 6px;
  flex-shrink: 0;
}

.ws-lang-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C5A059;
  flex-shrink: 0;
}

.ws-lang-svg {
  width: 15px;
  height: 15px;
}

.ws-lang-select {
  background: #1E1D1A;
  color: #FAF6ED;
  border: 1px solid #3A352A;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 5px;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  max-width: 105px;
}

.ws-lang-select:hover,
.ws-lang-select:focus {
  border-color: #C5A059;
  box-shadow: 0 0 6px rgba(197, 160, 89, 0.2);
}

.ws-phonetic-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #1E1D1A;
  border: 1px solid #2B2923;
  color: #EDE8DF;
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ws-phonetic-toggle-btn:hover {
  border-color: #C5A059;
  background: #25231e;
}

.phonetic-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #555;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.ws-phonetic-toggle-btn.active .phonetic-status-dot {
  background: #4CAF50;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.8);
}

.ws-phonetic-toggle-btn.active {
  border-color: rgba(197, 160, 89, 0.45);
}

/* Floating Contextual Candidate Box */
.transliteration-candidate-box {
  position: absolute;
  z-index: 1000;
  background: #181714;
  border: 1px solid #C5A059;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(197, 160, 89, 0.25);
  padding: 6px 8px;
  min-width: 220px;
  max-width: 380px;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  backdrop-filter: blur(8px);
}

.candidate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.candidate-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  background: #22201C;
  border: 1px solid #333027;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Noto Sans Telugu', 'Noto Sans Devanagari', 'Noto Sans Kannada', 'Noto Sans Tamil', 'Noto Sans Malayalam', 'Noto Sans', sans-serif;
  letter-spacing: 0px !important;
  color: #EDE8DF;
  transition: all 0.12s ease;
  user-select: none;
}

.candidate-chip:hover,
.candidate-chip.selected {
  background: rgba(197, 160, 89, 0.25);
  border-color: #C5A059;
  color: #FFFFFF;
}

.candidate-num {
  font-size: 11px;
  font-weight: 700;
  color: #C5A059;
  font-family: monospace;
}

.candidate-text {
  font-weight: 500;
}

.candidate-tip {
  font-size: 10px;
  color: #8A857C;
  border-top: 1px solid #2B2923;
  padding-top: 4px;
  margin-top: 2px;
  user-select: none;
}

/* ==========================================================================
   Scene Sheets Export Dialog Styles (1:1 with SceneSheetsExportDialog.kt)
   ========================================================================== */
.scene-sheet-mode-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scene-sheet-mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(30, 28, 24, 0.6);
  border: 1px solid #2B2923;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scene-sheet-mode-card:hover {
  background: rgba(45, 41, 35, 0.8);
  border-color: rgba(197, 160, 89, 0.4);
}

.scene-sheet-mode-card.selected {
  background: rgba(35, 32, 26, 0.95);
  border-color: rgba(197, 160, 89, 0.7);
  box-shadow: 0 0 12px rgba(197, 160, 89, 0.1);
}

.mode-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #141311;
  border: 1px solid #2B2923;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8A857C;
  flex-shrink: 0;
}

.scene-sheet-mode-card.selected .mode-card-icon {
  background: rgba(197, 160, 89, 0.16);
  border-color: rgba(197, 160, 89, 0.4);
  color: #C5A059;
}

.mode-card-icon svg {
  width: 20px;
  height: 20px;
}

.mode-card-info {
  flex: 1;
}

.mode-card-title {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
  color: #EDE8DF;
  letter-spacing: 0.5px;
}

.scene-sheet-mode-card.selected .mode-card-title {
  color: #C5A059;
}

.mode-card-desc {
  font-size: 12px;
  color: #8A857C;
  margin-top: 3px;
  line-height: 1.4;
}

/* Scene Sheets Picker List (SELECT SCENES mode) */
.scene-sheets-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.scene-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(30, 28, 24, 0.6);
  border: 1px solid #2B2923;
  cursor: pointer;
  transition: all 0.15s ease;
}

.scene-picker-row:hover {
  background: rgba(45, 41, 35, 0.8);
  border-color: rgba(197, 160, 89, 0.35);
}

.scene-picker-row.selected {
  background: rgba(38, 34, 27, 0.9);
  border-color: rgba(197, 160, 89, 0.6);
}

.scene-picker-badge {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #141311;
  border: 1px solid #2B2923;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #8A857C;
  flex-shrink: 0;
}

.scene-picker-row.selected .scene-picker-badge {
  background: rgba(197, 160, 89, 0.16);
  border-color: rgba(197, 160, 89, 0.4);
  color: #C5A059;
}

.scene-picker-info {
  flex: 1;
  min-width: 0;
}

.scene-picker-heading {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: #EDE8DF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scene-picker-meta {
  font-size: 11px;
  color: #8A857C;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Export Plan Box */
.scene-sheets-export-plan {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #2B2923;
}

.export-plan-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #8A857C;
  letter-spacing: 1px;
}

.export-plan-text {
  font-size: 13.5px;
  font-weight: 600;
  color: #C5A059;
  margin-top: 3px;
}

/* ==========================================================================
   Dialogue Export Dialog Styles (1:1 with DialogueLabScreen.kt)
   ========================================================================== */
.dialogue-export-mode-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dialogue-export-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(30, 28, 24, 0.6);
  border: 1px solid #2B2923;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dialogue-export-mode-card:hover {
  background: rgba(45, 41, 35, 0.8);
  border-color: rgba(197, 160, 89, 0.4);
}

.dialogue-export-mode-card.selected {
  background: rgba(35, 32, 26, 0.95);
  border-color: rgba(197, 160, 89, 0.7);
}

.dialogue-export-char-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px 24px;
  max-height: 140px;
  overflow-y: auto;
}

.diag-char-pill {
  padding: 6px 12px;
  border-radius: 6px;
  background: #141311;
  border: 1px solid #2B2923;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: #EDE8DF;
  cursor: pointer;
  transition: all 0.15s ease;
}

.diag-char-pill:hover {
  border-color: #C5A059;
  color: #C5A059;
}

.diag-char-pill.selected {
  background: #C5A059;
  border-color: #C5A059;
  color: #141311;
  font-weight: 700;
}

.dialogue-export-all-summary {
  margin: 4px 0 6px 24px;
  padding: 10px 12px;
  background: #141311;
  border: 1px solid #2B2923;
  border-radius: 6px;
  font-size: 12px;
  color: #8A857C;
}

/* ==========================================================================
   Screenplay Language & Typography Hub Styles
   ========================================================================== */
.ws-modal-card.wide.lang-hub-modal-card {
  max-width: 960px;
  width: 94vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.lang-hub-modal-body {
  overflow-y: auto;
  flex: 1;
  padding: 14px 22px 18px 22px;
}

.lang-hub-search-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #141311;
  border: 1px solid #2B2923;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
  transition: all 0.2s ease;
}

.lang-hub-search-wrap:focus-within {
  border-color: #C5A059;
  box-shadow: 0 0 10px rgba(197, 160, 89, 0.25);
  background: #181613;
}

.lang-hub-search-input {
  background: transparent;
  border: none;
  outline: none;
  color: #EDE8DF;
  font-size: 13px;
  font-family: var(--font-sans);
  width: 100%;
}

.lang-hub-search-input::placeholder {
  color: #6E6961;
}

.lang-hub-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
  align-items: start;
}

.lang-hub-col {
  display: flex;
  flex-direction: column;
}

.lang-hub-col-header {
  margin-bottom: 6px;
}

.lang-hub-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #C5A059;
  letter-spacing: 1px;
  margin: 0 0 3px 0;
}

.lang-hub-section-desc {
  font-size: 11.5px;
  color: #8A857C;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.lang-hub-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 410px;
  overflow-y: auto;
  padding-right: 6px;
}

.lang-hub-list::-webkit-scrollbar {
  width: 6px;
}

.lang-hub-list::-webkit-scrollbar-track {
  background: #141311;
  border-radius: 3px;
}

.lang-hub-list::-webkit-scrollbar-thumb {
  background: #38342C;
  border-radius: 3px;
}

.lang-hub-list::-webkit-scrollbar-thumb:hover {
  background: #C5A059;
}

.lang-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  min-height: 52px;
  border-radius: 6px;
  background: rgba(28, 26, 22, 0.7);
  border: 1px solid #2B2923;
  cursor: pointer;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.lang-card:hover {
  background: rgba(45, 41, 35, 0.85);
  border-color: rgba(197, 160, 89, 0.5);
  transform: translateY(-1px);
}

.lang-card.selected {
  background: rgba(45, 38, 25, 0.95);
  border-color: #C5A059;
  box-shadow: 0 0 10px rgba(197, 160, 89, 0.2), inset 0 0 0 1px rgba(197, 160, 89, 0.5);
}

.lang-card-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lang-card-native-title {
  font-size: 14px;
  font-weight: 700;
  color: #EDE8DF;
  line-height: 1.25;
}

.lang-card.selected .lang-card-native-title {
  color: #F3DEB0;
}

.lang-card-sub {
  font-size: 11.5px;
  color: #8A857C;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-card.selected .lang-card-sub {
  color: #B5AB9B;
}

.lang-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.lang-card-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2.5px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.lang-card-pill.phonetic {
  background: rgba(197, 160, 89, 0.15);
  border: 1px solid rgba(197, 160, 89, 0.45);
  color: #C5A059;
}

.lang-card-pill.direct {
  background: rgba(120, 115, 105, 0.15);
  border: 1px solid rgba(120, 115, 105, 0.35);
  color: #B0AAA0;
}

/* Live Screenplay Font Preview Box */
.lang-hub-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.preview-font-label {
  font-size: 10.5px;
  color: #C5A059;
  font-family: var(--font-mono);
  font-weight: 600;
}

.lang-hub-font-preview {
  background: #0B0B09;
  border: 1px solid #2B2923;
  border-radius: 6px;
  padding: 12px 16px;
  font-family: 'Courier Prime', monospace;
  color: #FAF7EF;
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: font-family 0.2s ease;
  min-height: 90px;
}

.preview-scene-heading {
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  color: #EDE8DF;
  font-size: 12px;
}

.preview-character-line {
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #C5A059;
  margin-top: 4px;
  margin-bottom: 2px;
  font-size: 11.5px;
}

.preview-dialogue-line {
  text-align: center;
  max-width: 86%;
  margin: 0 auto;
  color: #FAF7EF;
  font-size: 13px;
  line-height: 1.4;
}

/* Phonetic Engine Status Card */
.phonetic-engine-card {
  background: #141311;
  border: 1px solid #2B2923;
  border-radius: 8px;
  padding: 12px 14px;
}

.phonetic-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.phonetic-engine-badge {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.phonetic-engine-badge.active {
  background: rgba(197, 160, 89, 0.2);
  border: 1px solid #C5A059;
  color: #C5A059;
}

.phonetic-engine-badge.disabled {
  background: rgba(90, 85, 80, 0.2);
  border: 1px solid #444038;
  color: #8A857C;
}

.phonetic-card-note {
  font-size: 12px;
  color: #8A857C;
  line-height: 1.45;
  margin: 0;
}

/* Switch Toggle Component */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-round {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #2B2923;
  transition: .25s ease;
  border-radius: 24px;
  border: 1px solid #444038;
}

.slider-round:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #8A857C;
  transition: .25s ease;
  border-radius: 50%;
}

input:checked + .slider-round {
  background-color: rgba(197, 160, 89, 0.3);
  border-color: #C5A059;
}

input:checked + .slider-round:before {
  transform: translateX(20px);
  background-color: #C5A059;
}

input:disabled + .slider-round {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Active Config Pill Box */
.active-config-pill-box {
  background: #141311;
  border: 1px solid #2B2923;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.active-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #8A857C;
}

.active-config-row strong {
  color: #EDE8DF;
  font-weight: 600;
}

/* Language Hub Toolbar Button */
.ws-lang-hub-btn {
  background: #1c1a16;
  border: 1px solid #2B2923;
  color: #C5A059;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.ws-lang-hub-btn:hover {
  background: #2b2820;
  border-color: #C5A059;
}

/* Responsive Breakpoints for Language Hub */
@media (max-width: 768px) {
  .lang-hub-modal-card {
    width: 96vw;
    max-height: 94vh;
    margin: 8px auto;
  }

  .lang-hub-modal-body {
    padding: 14px 16px;
  }

  .lang-hub-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .lang-hub-list {
    max-height: 250px;
  }

  .lang-card {
    min-height: 48px;
    padding: 9px 12px;
  }

  .lang-hub-font-preview {
    min-height: 80px;
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  .lang-card-native-title {
    font-size: 13px;
  }

  .lang-card-sub {
    font-size: 10.5px;
  }

  .preview-dialogue-line {
    max-width: 96%;
    font-size: 12px;
  }
}

/* ==============================================================================
   6. Visual Draft Comparison (Phase 1: WriterDuet & Arc Studio Parity)
   ============================================================================== */
.ws-readonly-badge {
  background: rgba(229, 169, 60, 0.15);
  color: #E5A93C;
  border: 1px solid rgba(229, 169, 60, 0.35);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ws-modal-diff-card {
  max-width: 1240px;
  width: 96vw;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.diff-controls-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #141412;
  border-bottom: 1px solid #262420;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.diff-selector-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.diff-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #9E988F;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.diff-select {
  min-width: 190px;
  max-width: 260px;
  background: #0A0A0A;
  color: #EDEAE5;
  border: 1px solid #2C2C2C;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.diff-select:focus {
  outline: none;
  border-color: #E5A93C;
}

.diff-view-toggle {
  display: flex;
  border: 1px solid #2C2C2C;
  border-radius: 6px;
  overflow: hidden;
  background: #0A0A0A;
}

.diff-toggle-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: #78736B;
  cursor: pointer;
  transition: all 0.15s ease;
}

.diff-toggle-btn.active {
  background: #252320;
  color: #E5A93C;
}

.diff-summary-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: #0A0A0A;
  border: 1px solid #262420;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: monospace;
  margin-left: auto;
}

.diff-count-add {
  color: #51cf66;
  font-weight: 700;
}

.diff-count-del {
  color: #ff6b6b;
  font-weight: 700;
}

.diff-count-unchanged {
  color: #78736B;
  font-weight: normal;
}

.diff-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #0B0B0A;
}

.diff-container {
  max-width: 900px;
  margin: 0 auto;
  background: #161614;
  border: 1px solid #282622;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  font-family: 'Courier Prime', Courier, monospace;
  overflow: hidden;
  min-height: 200px;
}

.diff-row {
  display: flex;
  align-items: flex-start;
  padding: 6px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.025);
  font-size: 14px;
  line-height: 22px;
  transition: background 0.1s ease;
}

.diff-gutter {
  width: 26px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 13px;
  user-select: none;
  color: #4A4742;
}

.diff-type-badge {
  width: 86px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6E6960;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-top: 2px;
}

.diff-text {
  flex: 1;
  word-break: break-word;
  white-space: pre-wrap;
  color: #D8D4CC;
}

.diff-row.unchanged {
  background: transparent;
}

.diff-row.added {
  background: rgba(81, 207, 102, 0.10);
  border-left: 3px solid #51cf66;
}

.diff-row.added .diff-gutter {
  color: #51cf66;
}

.diff-row.added .diff-text {
  color: #8ce99a;
}

.diff-row.deleted {
  background: rgba(255, 107, 107, 0.10);
  border-left: 3px solid #ff6b6b;
}

.diff-row.deleted .diff-gutter {
  color: #ff6b6b;
}

.diff-row.deleted .diff-text {
  color: #ffa8a8;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 107, 107, 0.7);
}

.diff-split-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  margin: 0 auto;
  background: #161614;
  border: 1px solid #282622;
  border-radius: 8px;
  overflow: hidden;
}

.diff-split-col {
  overflow-x: auto;
}

.diff-split-col:first-child {
  border-right: 1px solid #282622;
}

.diff-split-header {
  padding: 8px 16px;
  background: #1A1A18;
  font-size: 11px;
  font-weight: 700;
  color: #E5A93C;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid #282622;
  display: flex;
  justify-content: space-between;
}

.diff-split-empty {
  min-height: 34px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.diff-footer-note {
  font-size: 12px;
  color: #9E988F;
  display: flex;
  align-items: center;
}

.diff-empty-msg {
  padding: 48px 24px;
  text-align: center;
  color: #78736B;
  font-size: 13.5px;
}

@media (max-width: 860px) {
  .diff-controls-bar {
    gap: 8px;
    padding: 10px 14px;
  }

  .diff-select {
    min-width: 140px;
    font-size: 12px;
  }

  .diff-summary-badge {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }

  .diff-split-container {
    grid-template-columns: 1fr;
  }

  .diff-split-col:first-child {
    border-right: none;
    border-bottom: 2px solid #282622;
  }
}

/* ==============================================================================
   7. Visual Scene Cards & Character Focus (Phase 2: WriterDuet & Arc Studio Parity)
   ============================================================================== */

/* --- Scene Navigator View Toggle --- */
.scene-nav-mode-toggle {
  display: flex;
  background: #141412;
  border: 1px solid #2C2C28;
  border-radius: 4px;
  overflow: hidden;
  margin-left: auto;
  margin-right: 8px;
}

.scene-nav-mode-btn {
  background: transparent;
  border: none;
  color: #78736B;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.scene-nav-mode-btn.active {
  background: #252320;
  color: #E5A93C;
}

/* --- Visual Scene Cards --- */
.scene-cards-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.scene-card-item {
  background: #151513;
  border: 1px solid #282622;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  position: relative;
}

.scene-card-item:hover {
  border-color: #3D3A34;
  background: #191815;
  transform: translateY(-1px);
}

.scene-card-item.active {
  border-color: #E5A93C;
  background: #1C1A14;
  box-shadow: 0 0 0 1px rgba(229, 169, 60, 0.35);
}

.scene-card-item.dragging {
  opacity: 0.4;
  border: 1px dashed #E5A93C;
  transform: scale(0.98);
}

.scene-card-item.drag-over {
  border-top: 2px solid #E5A93C;
  background: rgba(229, 169, 60, 0.08);
}

.scene-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.scene-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.scene-card-num {
  font-size: 10px;
  font-weight: 700;
  color: #E5A93C;
  background: rgba(229, 169, 60, 0.12);
  border: 1px solid rgba(229, 169, 60, 0.25);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
}

.scene-card-env {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  color: #8CE99A;
  background: rgba(81, 207, 102, 0.12);
  border: 1px solid rgba(81, 207, 102, 0.25);
}

.scene-card-env.int {
  color: #74C0FC;
  background: rgba(116, 192, 252, 0.12);
  border-color: rgba(116, 192, 252, 0.25);
}

.scene-card-time {
  font-size: 9.5px;
  color: #9E988F;
  font-weight: 600;
  text-transform: uppercase;
}

.scene-card-reorder-actions {
  display: flex;
  gap: 2px;
}

.scene-reorder-btn {
  background: #201E1A;
  border: 1px solid #33312B;
  color: #9E988F;
  font-size: 9px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  transition: all 0.1s;
}

.scene-reorder-btn:hover:not(:disabled) {
  background: #E5A93C;
  color: #0A0A0A;
  border-color: #E5A93C;
}

.scene-reorder-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.scene-card-heading {
  font-size: 12px;
  font-weight: 700;
  color: #EDEAE5;
  margin-bottom: 5px;
  line-height: 1.35;
  word-break: break-word;
  font-family: 'Courier Prime', Courier, monospace;
}

.scene-card-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: #78736B;
  margin-bottom: 6px;
}

.scene-card-chars {
  color: #A09C94;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}

.scene-card-synopsis {
  width: 100%;
  box-sizing: border-box;
  background: #0D0D0C;
  border: 1px solid #22201C;
  border-radius: 4px;
  color: #CFCBC4;
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
  padding: 6px 8px;
  resize: vertical;
  min-height: 38px;
  transition: border-color 0.15s ease;
}

.scene-card-synopsis:focus {
  outline: none;
  border-color: #E5A93C;
  background: #10100E;
}

/* --- In-Editor Character Focus Toolbar --- */
.ws-focus-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #181714;
  border: 1px solid #2B2923;
  border-radius: 6px;
  padding: 3px 8px;
  margin-left: 8px;
  flex-shrink: 0;
}

.ws-focus-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #E5A93C;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
}

.ws-focus-svg {
  width: 13px;
  height: 13px;
  color: #E5A93C;
}

.ws-focus-select {
  background: #0A0A0A;
  color: #EDEAE5;
  border: 1px solid #2C2C2C;
  border-radius: 4px;
  font-size: 11.5px;
  padding: 3px 6px;
  cursor: pointer;
  max-width: 130px;
}

.ws-focus-select:focus {
  outline: none;
  border-color: #E5A93C;
}

.ws-focus-clear-btn {
  background: transparent;
  border: none;
  color: #9E988F;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  font-weight: bold;
}

.ws-focus-clear-btn:hover {
  color: #ff6b6b;
}

/* --- In-Editor Character Focus Dimming Rules --- */
.element-row.dimmed-focus {
  opacity: 0.20;
  filter: grayscale(45%);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.element-row.dimmed-focus:hover,
.element-row.dimmed-focus:focus-within {
  opacity: 0.90;
  filter: none;
}

.element-row.focused-character-cue {
  border-left: 3px solid #E5A93C;
  padding-left: 8px;
  transition: border-color 0.2s ease;
}

.element-row.focused-character-dialogue {
  background: rgba(229, 169, 60, 0.04);
}

/* ==============================================================================
   PHASE 3: COLOURED PRODUCTION REVISIONS (WRITERDUET PARITY)
   ============================================================================== */
.ws-revision-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #141311;
  border: 1px solid #2B2923;
  border-radius: 6px;
  padding: 3px 8px;
  flex-shrink: 0;
}

.ws-rev-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #3A362D;
  border-radius: 4px;
  color: #A8A296;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ws-rev-toggle-btn.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
  color: #93c5fd;
}

.rev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
}

.ws-rev-color-select {
  background: #0A0A0A;
  color: #EDEAE5;
  border: 1px solid #2C2C2C;
  border-radius: 4px;
  font-size: 11.5px;
  padding: 3px 6px;
  cursor: pointer;
  max-width: 135px;
}

.ws-rev-color-select:focus {
  outline: none;
  border-color: #3b82f6;
}

.ws-rev-visibility-btn {
  background: transparent;
  border: 1px solid #3A362D;
  border-radius: 4px;
  color: #A8A296;
  font-size: 14px;
  font-weight: bold;
  padding: 1px 7px;
  cursor: pointer;
  line-height: 1;
}

.ws-rev-visibility-btn.active {
  background: rgba(197, 160, 89, 0.15);
  border-color: #C5A059;
  color: #DEC38B;
}

.ws-rev-clear-btn {
  background: transparent;
  border: 1px solid #4a1d1d;
  border-radius: 4px;
  color: #f87171;
  font-size: 10.5px;
  padding: 2px 6px;
  cursor: pointer;
  font-weight: 600;
}

.ws-rev-clear-btn:hover {
  background: #7f1d1d;
  color: #fee2e2;
}

/* Margin asterisk & element revision colors */
.element-row {
  position: relative;
}

.revision-gutter-marker {
  position: absolute;
  right: -24px;
  top: 4px;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  pointer-events: auto;
}

/* Revision Color Palette (WriterDuet Standard) */
.rev-color-white { color: #e2e8f0; }
.rev-color-blue { color: #3b82f6; }
.rev-color-pink { color: #ec4899; }
.rev-color-yellow { color: #eab308; }
.rev-color-green { color: #22c55e; }
.rev-color-goldenrod { color: #d97706; }

.element-row.is-revised.rev-color-white { border-left: 3px solid #e2e8f0 !important; padding-left: 8px; }
.element-row.is-revised.rev-color-blue { border-left: 3px solid #3b82f6 !important; padding-left: 8px; }
.element-row.is-revised.rev-color-pink { border-left: 3px solid #ec4899 !important; padding-left: 8px; }
.element-row.is-revised.rev-color-yellow { border-left: 3px solid #eab308 !important; padding-left: 8px; }
.element-row.is-revised.rev-color-green { border-left: 3px solid #22c55e !important; padding-left: 8px; }
.element-row.is-revised.rev-color-goldenrod { border-left: 3px solid #d97706 !important; padding-left: 8px; }

/* When Asterisk visibility is toggled off */
.hide-revision-asterisks .revision-gutter-marker {
  display: none !important;
}

/* ==============================================================================
   PHASE 4: OFFLINE PLOT BOARD & STORY BEATS (ARC STUDIO PARITY)
   ============================================================================== */
.ws-modal-card.plot-board-card {
  max-width: min(1500px, 96vw) !important;
  width: 96vw !important;
  height: 88vh !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #161513;
  border: 1px solid #2F2C24;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
}

.plot-board-card .ws-modal-header {
  padding: 16px 24px;
  flex-shrink: 0;
  border-bottom: 1px solid #2B2923;
  background: #141310;
}

.plot-board-card .ws-modal-body.plot-board-body {
  height: calc(88vh - 85px) !important;
  max-height: calc(88vh - 85px) !important;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden; /* Avoid simultaneous vertical & horizontal scrollbars on modal body */
  padding: 16px 24px 20px 24px;
  display: flex;
  align-items: stretch;
  background: #0E0D0C;
  box-sizing: border-box;
}

.plot-board-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(240px, 1fr));
  gap: 16px;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: stretch;
  box-sizing: border-box;
}

@media (max-width: 1360px) {
  .plot-board-grid {
    grid-template-columns: repeat(5, 260px);
    width: max-content;
  }
}

.plot-board-lane {
  background: #141310;
  border: 1px solid #2B2923;
  border-radius: 8px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  margin-left: 0; /* Ensures first lane starts completely inside visible area */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.plot-board-lane.lane-active-filter {
  border-color: #C5A059;
  box-shadow: 0 0 12px rgba(197, 160, 89, 0.22);
}

.plot-board-lane.lane-active-filter .plot-lane-title {
  color: #C5A059;
}

.plot-lane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2B2923;
  padding-bottom: 8px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.plot-lane-title {
  font-size: 11px;
  font-weight: 600;
  color: #EDE8DF;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

.plot-lane-count {
  font-size: 11px;
  font-weight: 700;
  color: #C5A059;
  background: rgba(197, 160, 89, 0.12);
  padding: 2px 7px;
  border-radius: 10px;
}

.plot-lane-desc {
  font-size: 10px;
  color: #78736B;
  margin: 0 0 10px 0;
  line-height: 1.3;
  flex-shrink: 0;
}

.plot-lane-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto; /* Scoped vertical scrolling within each lane */
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: #38342B transparent;
}

.plot-lane-cards.drag-over {
  background: rgba(197, 160, 89, 0.08);
  outline: 2px dashed #C5A059;
}

.plot-beat-card {
  background: #1C1A16;
  border: 1px solid #2F2C24;
  border-radius: 6px;
  padding: 10px;
  position: relative;
  transition: all 0.2s ease;
  cursor: grab;
  user-select: none;
}

.plot-beat-card:hover {
  border-color: #C5A059;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.plot-beat-card.dragging {
  opacity: 0.45;
  transform: scale(0.97);
}

/* Color Tags */
.plot-beat-card.beat-tag-gold { border-left: 3px solid #eab308; }
.plot-beat-card.beat-tag-blue { border-left: 3px solid #3b82f6; }
.plot-beat-card.beat-tag-pink { border-left: 3px solid #ec4899; }
.plot-beat-card.beat-tag-green { border-left: 3px solid #22c55e; }
.plot-beat-card.beat-tag-red { border-left: 3px solid #ef4444; }
.plot-beat-card.beat-tag-purple { border-left: 3px solid #a855f7; }

.plot-beat-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
}

.plot-beat-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #EDE8DF;
  line-height: 1.3;
}

.plot-beat-storyline {
  font-size: 9.5px;
  font-weight: 600;
  color: #C5A059;
  background: rgba(197, 160, 89, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}

.plot-beat-desc {
  font-size: 11px;
  color: #A8A296;
  line-height: 1.4;
  margin-bottom: 8px;
  word-break: break-word;
}

.plot-beat-link {
  font-size: 10px;
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.plot-beat-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #28251E;
  padding-top: 6px;
  gap: 4px;
}

.plot-beat-lane-btns {
  display: flex;
  gap: 2px;
}

.plot-mini-btn {
  background: #25231C;
  border: 1px solid #363228;
  border-radius: 3px;
  color: #A8A296;
  font-size: 10px;
  padding: 2px 5px;
  cursor: pointer;
  line-height: 1;
}

.plot-mini-btn:hover {
  background: #363228;
  color: #EDE8DF;
  border-color: #C5A059;
}

.plot-mini-btn.btn-send-script {
  color: #C5A059;
  font-weight: 600;
}

.plot-mini-btn.btn-send-script:hover {
  background: #C5A059;
  color: #12110E;
}

.plot-mini-btn.btn-delete:hover {
  color: #ef4444;
  border-color: #ef4444;
}

/* ==============================================================================
   Add / Edit Story Beat Dialog (Scoped Modern Styling)
   ============================================================================== */
.beat-editor-modal-card {
  max-width: 580px !important;
  width: 92vw !important;
  background: #181714;
  border: 1px solid #2F2C24;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
}

.beat-editor-modal-body {
  padding: 20px 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.beat-editor-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.beat-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.beat-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.beat-form-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #C5A059;
  letter-spacing: 0.8px;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 4px;
}

.beat-form-label .required-star {
  color: #ef4444;
}

.beat-input-text,
.beat-input-select,
.beat-input-textarea {
  width: 100%;
  background-color: #11100E;
  border: 1px solid #2C2922;
  border-radius: 6px;
  color: #EDE8DF;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.beat-input-text:focus,
.beat-input-select:focus,
.beat-input-textarea:focus {
  border-color: #C5A059;
  background-color: #151412;
  box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.22);
}

.beat-input-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C5A059'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 32px;
}

.beat-input-select option {
  background-color: #191815;
  color: #EDE8DF;
  padding: 6px 10px;
}

.beat-input-textarea {
  resize: vertical;
  min-height: 85px;
  line-height: 1.5;
}

/* Responsive Plot Board, Story Beats & Tool Rail */
@media (max-width: 1100px) {
  .plot-board-grid {
    grid-template-columns: repeat(5, 240px);
    width: max-content;
  }
}

@media (max-width: 768px) {
  .ws-right-tool-rail {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 240px;
    z-index: 200;
    transform: translateX(100%);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.9);
    background: #141311;
  }

  .ws-right-tool-rail.drawer-open {
    transform: translateX(0);
  }

  .ws-right-tool-rail .ws-rail-btn span {
    display: inline-block;
    font-size: 13.5px;
  }

  .ws-right-tool-rail .ws-rail-btn {
    justify-content: flex-start;
    padding: 11px 16px;
    min-height: 46px;
  }

  .ws-right-tool-rail .ws-rail-btn svg {
    width: 20px;
    height: 20px;
  }

  .ws-right-tool-rail .rail-title,
  .ws-right-tool-rail .rail-section-label {
    display: block;
  }

  .plot-board-card {
    width: 98vw !important;
    margin: 10px auto;
  }
  .plot-board-grid {
    grid-template-columns: repeat(5, 220px);
    width: max-content;
    gap: 10px;
    min-height: 440px;
  }
  .plot-board-lane {
    min-height: 420px;
    padding: 10px;
  }
  .diff-controls-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .beat-form-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .plot-board-grid {
    grid-template-columns: repeat(5, 200px);
    width: max-content;
    gap: 8px;
  }
  .ws-focus-select {
    max-width: 95px;
  }
  .ws-rev-color-select {
    max-width: 95px;
  }
}

/* ==========================================================================
   Phase 1: In-Editor Contextual Intelligence & Beat Navigation Styles
   ========================================================================== */

/* Screenplay Autocomplete Suggestion Box */
.screenplay-suggest-box {
  position: absolute;
  z-index: 1000;
  background: #181714;
  border: 1px solid rgba(197, 160, 89, 0.4);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(197, 160, 89, 0.15);
  padding: 4px 6px;
  min-width: 190px;
  max-width: 310px;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  backdrop-filter: blur(8px);
}

.suggest-header {
  font-size: 9.5px;
  font-weight: 700;
  color: #A59276;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: var(--font-sans);
  padding: 2px 4px 3px 4px;
  border-bottom: 1px solid #2B2923;
  margin-bottom: 1px;
}

.suggest-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 145px;
  overflow-y: auto;
}

.suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 7px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-mono);
  color: #EDE8DF;
  transition: all 0.1s ease;
  user-select: none;
}

.suggest-item:hover,
.suggest-item.selected {
  background: rgba(197, 160, 89, 0.2);
  border-color: #C5A059;
  color: #FFFFFF;
}

.suggest-text {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest-badge {
  font-size: 8.5px;
  font-weight: 600;
  color: #8E8271;
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.suggest-tip {
  font-size: 9px;
  color: #78736B;
  border-top: 1px solid #26241F;
  padding-top: 3px;
  margin-top: 1px;
  user-select: none;
}

/* Floating Selection Mini-Toolbar */
.floating-selection-toolbar {
  position: absolute;
  z-index: 1005;
  background: #181714;
  border: 1px solid #C5A059;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(197, 160, 89, 0.2);
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  user-select: none;
}

.floating-btn-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.floating-divider {
  width: 1px;
  height: 18px;
  background: #333027;
  margin: 0 2px;
}

.floating-tool-btn {
  background: #22201C;
  border: 1px solid #333027;
  color: #EDE8DF;
  font-size: 11.5px;
  font-family: var(--font-sans);
  font-weight: 500;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s ease;
  line-height: 1.3;
}

.floating-tool-btn:hover:not(.disabled-feature) {
  background: rgba(197, 160, 89, 0.25);
  border-color: #C5A059;
  color: #FFFFFF;
}

.floating-tool-btn.disabled-feature {
  opacity: 0.4;
  cursor: not-allowed;
  color: #7A7468;
}

/* Beat Link Hover & Affordance */
.plot-beat-link.clickable-link {
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.plot-beat-link.clickable-link:hover {
  color: #E5A93C !important;
  text-decoration: underline;
}

/* ==============================================================================
   PHASE 2: STRUCTURED STORY ELEMENTS & PROFILES (CHARACTERS & LOCATIONS)
   ============================================================================== */

/* Storyline Filter Select in Plot Board */
.plot-filter-select {
  background: #141210;
  color: #EAE6DF;
  border: 1px solid #38342B;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--font-sans);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.plot-filter-select:focus {
  border-color: #C5A059;
}

/* Modals sizing */
.char-modal-card,
.loc-modal-card {
  max-width: 1080px;
  width: 94%;
  height: 88vh;
  max-height: 880px;
  display: flex;
  flex-direction: column;
  background: #171614;
  border: 1px solid #2B2822;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.char-modal-body,
.loc-modal-body {
  flex: 1;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  background: #151412;
}

.char-workspace-layout,
.loc-workspace-layout {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Left Sidebar Panel */
.char-sidebar-panel,
.loc-sidebar-panel {
  width: 320px;
  min-width: 300px;
  max-width: 340px;
  background: #151412;
  border-right: 1px solid #2B2923;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.char-search-box,
.loc-search-box {
  padding: 14px 16px;
  border-bottom: 1px solid #23211D;
  background: #121110;
}

.char-search-field,
.loc-search-field {
  width: 100%;
  background: #1A1815;
  border: 1px solid #38342B;
  border-radius: 5px;
  padding: 8px 12px;
  color: #EAE6DF;
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.char-search-field:focus,
.loc-search-field:focus {
  border-color: #C5A059;
  background: #201E1A;
}

.char-list-scroll,
.loc-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px;
  scrollbar-width: thin;
  scrollbar-color: #38342B #151412;
}

/* List Items */
.char-list-item,
.loc-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.char-list-item:hover,
.loc-list-item:hover {
  background: #211E1A;
  border-color: #38342B;
}
.char-list-item.active,
.loc-list-item.active {
  background: #28241D;
  border-color: #C5A059;
}

.char-item-avatar,
.loc-item-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2E2A24;
  color: #C5A059;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
  border: 1px solid #3E3930;
}
.char-list-item.active .char-item-avatar,
.loc-list-item.active .loc-item-avatar {
  background: #C5A059;
  color: #100F0D;
  border-color: #DFC07D;
}

.char-item-info,
.loc-item-info {
  flex: 1;
  min-width: 0;
}
.char-item-name,
.loc-item-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #F0ECE4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
}
.char-item-meta,
.loc-item-meta {
  font-size: 11px;
  color: #9A9488;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.char-role-badge,
.loc-env-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #2B2822;
  color: #DFC07D;
  font-weight: 500;
  text-transform: uppercase;
}

/* Right Detail Panel */
.char-detail-panel,
.loc-detail-panel {
  flex: 1;
  background: #171614;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 22px 26px;
  scrollbar-width: thin;
  scrollbar-color: #38342B #171614;
}

.char-empty-state,
.loc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #8C867A;
  font-size: 14px;
  text-align: center;
  padding: 40px;
}

.char-profile-form,
.loc-profile-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Section Cards */
.char-section-card,
.loc-section-card {
  background: #1C1A17;
  border: 1px solid #2B2822;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.char-section-heading,
.loc-section-heading {
  font-size: 11px;
  font-weight: 700;
  color: #C5A059;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.char-form-top-row,
.loc-form-top-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.char-avatar-badge,
.loc-avatar-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25221B;
  border: 2px solid #C5A059;
  color: #EAE6DF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.char-form-label,
.loc-form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #A6A094;
  margin-bottom: 6px;
}

.char-form-input,
.loc-form-input,
.char-form-select,
.loc-form-select,
.char-form-textarea,
.loc-form-textarea {
  width: 100%;
  background: #100F0D;
  border: 1px solid #38342B;
  border-radius: 5px;
  padding: 9px 12px;
  color: #F0ECE4;
  font-size: 13.5px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  line-height: 1.5;
}
.char-name-field,
.loc-name-field {
  font-family: var(--font-mono) !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.char-form-input:focus,
.loc-form-input:focus,
.char-form-select:focus,
.loc-form-select:focus,
.char-form-textarea:focus,
.loc-form-textarea:focus {
  border-color: #C5A059;
  background: #141311;
}

/* Practical Editing Heights */
#charBioInput {
  min-height: 100px;
}
#charArcInput {
  min-height: 84px;
}
#locDescInput {
  min-height: 110px;
}

.char-form-grid-2,
.loc-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Metrics & Scene Occurrences */
.char-metrics-header,
.loc-metrics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.char-metrics-title,
.loc-metrics-title {
  font-size: 11px;
  font-weight: 700;
  color: #C5A059;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.char-metrics-summary,
.loc-metrics-summary {
  font-size: 11.5px;
  color: #A6A094;
  font-family: var(--font-mono);
}

.char-scene-occurrences-list,
.loc-scene-occurrences-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: #38342B #1C1A17;
}

.char-scene-occurrence-chip,
.loc-scene-occurrence-chip {
  background: #24201A;
  border: 1px solid #3E372A;
  color: #EDE8DF;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.char-scene-occurrence-chip:hover,
.loc-scene-occurrence-chip:hover {
  background: #362D1D;
  border-color: #C5A059;
  color: #FFDE9E;
  transform: translateY(-1px);
}

/* Action Bars */
.char-form-actions-bar,
.loc-form-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 14px 18px;
  background: #161513;
  border: 1px solid #2B2822;
  border-radius: 6px;
  position: sticky;
  bottom: 0;
  z-index: 10;
  flex-wrap: wrap;
}

/* Responsive Narrow Breakpoint for Modals */
@media (max-width: 900px) {
  .char-modal-card,
  .loc-modal-card {
    width: 96%;
    height: 92vh;
    max-height: 94vh;
  }

  .char-workspace-layout,
  .loc-workspace-layout {
    flex-direction: column;
    overflow-y: auto;
  }

  .char-sidebar-panel,
  .loc-sidebar-panel {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: 220px;
    border-right: none;
    border-bottom: 1px solid #2B2923;
  }

  .char-detail-panel,
  .loc-detail-panel {
    width: 100%;
    padding: 16px;
    overflow-y: visible;
  }

  .char-form-grid-2,
  .loc-form-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .char-form-actions-bar,
  .loc-form-actions-bar {
    position: static;
  }
}

/* ==============================================================================
   PHASE 3: OUTLINING, STRUCTURE TEMPLATES & SCRIPT-BEAT LINKING
   ============================================================================== */

/* Structure Templates Grid */
.structure-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.structure-template-card {
  background: #141311;
  border: 1px solid #2B2822;
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease;
}

.structure-template-card:hover {
  border-color: #C5A059;
  background: #191815;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.template-card-header h4 {
  font-size: 15px;
  font-weight: 700;
  color: #F0ECE4;
  margin: 0;
}

.template-badge {
  font-size: 10px;
  padding: 2px 7px;
  background: #25221B;
  color: #DFC07D;
  border: 1px solid #3E392F;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.template-desc {
  font-size: 12px;
  line-height: 1.5;
  color: #9E978B;
  flex: 1;
  margin-bottom: 16px;
}

/* Story Beat Tags on Cards */
.plot-beat-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.plot-beat-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.plot-beat-tag.char-tag {
  background: #201D17;
  color: #DFC07D;
  border: 1px solid #383226;
}

.plot-beat-tag.loc-tag {
  background: #171E20;
  color: #8FD8D2;
  border: 1px solid #233436;
}

/* Linked Beat Badges on Scene Navigator Cards */
.scene-card-linked-beats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.scene-beat-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #2B2519;
  color: #E5A93C;
  border: 1px solid #4A3E26;
  font-family: var(--font-sans);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ==============================================================================
   PHASE 4: WORLDBUILDING REFERENCE DRAWER (Arc Studio Parity)
   ============================================================================== */

/* Backdrop for Mobile / Tablet Overlay Mode */
.wb-drawer-backdrop {
  position: fixed;
  inset: 0;
  top: 105px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  z-index: 90;
  transition: opacity 0.2s ease;
}

.ws-worldbuilding-drawer {
  width: 340px;
  min-width: 320px;
  max-width: 380px;
  background: #141311;
  border-left: 1px solid #2B2822;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
  z-index: 20;
  transition: width 0.22s cubic-bezier(0.2, 0, 0, 1), transform 0.25s ease;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
}

.wb-drawer-header {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #28241D;
  background: #12110F;
  flex-shrink: 0;
}

.wb-drawer-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #DFC07D;
  text-transform: uppercase;
}

.wb-drawer-close-btn {
  background: transparent;
  border: none;
  color: #7A7468;
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.wb-drawer-close-btn:hover {
  color: #FFF;
}

/* Studio Segmented Tab Navigation Bar */
.wb-tab-bar {
  display: flex;
  background: #1C1A17;
  border-bottom: 1px solid #2B2822;
  padding: 6px 8px;
  gap: 6px;
  flex-shrink: 0;
}

.wb-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #9A9488;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  outline: none;
}

.wb-tab-btn:hover {
  background: #24201A;
  color: #EDE8DF;
}

.wb-tab-btn.active {
  background: #22201C;
  color: #DFC07D;
  border-color: #3D3628;
  border-bottom: 2px solid #C5A059;
}

.wb-tab-btn svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.wb-search-box {
  padding: 8px 12px;
  background: #141311;
  border-bottom: 1px solid #23211D;
  flex-shrink: 0;
}

.wb-search-field {
  width: 100%;
  background: #1C1A17;
  border: 1px solid #38342B;
  border-radius: 4px;
  padding: 6px 10px;
  color: #EDE8DF;
  font-size: 12px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.wb-search-field:focus {
  border-color: #C5A059;
  background: #201E1A;
}

.wb-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: #38342B #141311;
}

.wb-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wb-ref-card {
  background: #1C1A17;
  border: 1px solid #2C2821;
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.wb-ref-card:hover {
  background: #221F1B;
  border-color: #5A4E38;
}

.wb-ref-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.wb-ref-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2A251B;
  color: #DFC07D;
  border: 1px solid #483E2A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.wb-ref-name {
  font-size: 13px;
  font-weight: 700;
  color: #EDE8DF;
  letter-spacing: 0.03em;
  flex: 1;
  font-family: var(--font-mono);
}

.wb-ref-badge {
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #2B2822;
  color: #DFC07D;
  text-transform: uppercase;
  font-weight: 600;
}

.wb-ref-edit-btn {
  background: #25221B;
  border: 1px solid #483E2A;
  color: #DFC07D;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-sans);
}

.wb-ref-edit-btn:hover {
  background: #C5A059;
  color: #100F0D;
  border-color: #DFC07D;
}

.wb-ref-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: #A6A094;
}

.wb-ref-text.arc {
  margin-top: 4px;
  color: #B8B0A2;
}

.wb-ref-stats {
  font-size: 10.5px;
  color: #7A7468;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
}

.wb-ref-scenes-wrap {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #28241E;
}

.wb-ref-scenes-label {
  font-size: 9.5px;
  font-weight: 600;
  color: #8C867A;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.wb-ref-scenes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wb-scene-jump-chip {
  background: #211E18;
  border: 1px solid #383226;
  color: #DFC07D;
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 3px 7px;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  transition: all 0.15s ease;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wb-scene-jump-chip:hover {
  background: #362E1D;
  border-color: #C5A059;
  color: #FFE6AF;
  transform: translateY(-1px);
}

.wb-scratchpad-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wb-scratchpad-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.wb-scratchpad-hint {
  font-size: 11px;
  color: #8C867A;
  line-height: 1.4;
  flex: 1;
}

.wb-save-status-badge {
  font-size: 10px;
  color: #8FD8D2;
  font-family: var(--font-mono);
  font-weight: 500;
  background: #172023;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #233436;
}

.wb-scratchpad-textarea {
  flex: 1;
  min-height: 320px;
  background: #100F0D;
  border: 1px solid #2A2720;
  border-radius: 6px;
  padding: 14px;
  color: #EDE8DF;
  font-size: 13.5px;
  line-height: 1.6;
  font-family: var(--font-sans);
  resize: none;
  outline: none;
  transition: border-color 0.15s ease;
}

.wb-scratchpad-textarea:focus {
  border-color: #C5A059;
}

/* Responsive Rules for Worldbuilding Drawer */
@media (max-width: 1024px) {
  .ws-worldbuilding-drawer {
    position: fixed;
    right: 56px;
    top: 105px;
    bottom: 0;
    width: 340px;
    max-width: 85vw;
    z-index: 100;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.85);
  }
}

@media (max-width: 768px) {
  .ws-worldbuilding-drawer {
    right: 0;
    width: 100%;
    max-width: 100vw;
  }
}

/* ==============================================================================
   Phase 3: Central Storyline Manager Modal Styling
   ============================================================================== */
#modalStorylines.ws-modal-backdrop {
  z-index: 110;
}

.storyline-modal-card {
  width: 840px;
  max-width: 95vw;
  height: 580px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #191815;
  border: 1px solid #2B2923;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.storyline-modal-card .storyline-modal-body {
  padding: 0;
  max-height: none;
  flex: 1;
  overflow: hidden;
  display: flex;
}

.storyline-workspace-layout {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.storyline-sidebar-panel {
  width: 290px;
  min-width: 270px;
  background: #141311;
  border-right: 1px solid #26231E;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.storyline-sidebar-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #26231E;
  background: #11100E;
}

.storyline-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #A6A094;
  text-transform: uppercase;
}

.storyline-sidebar-header .ws-btn-primary {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(197, 160, 89, 0.25);
  cursor: pointer;
  transition: all 0.15s ease;
}

.storyline-sidebar-header .ws-btn-primary:hover {
  background: #d4af65;
  transform: translateY(-1px);
}

.storyline-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px;
  scrollbar-width: thin;
  scrollbar-color: #38342B #141311;
}

.storyline-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 14px;
  gap: 8px;
}

.storyline-empty-icon {
  width: 30px;
  height: 30px;
  color: #554E42;
  margin-bottom: 2px;
}

.storyline-empty-text {
  font-size: 12px;
  font-weight: 600;
  color: #A6A094;
}

.storyline-empty-sub {
  font-size: 11px;
  color: #6E675B;
  line-height: 1.45;
}

.storyline-empty-sub strong {
  color: #C5A059;
}

.storyline-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  background: #181714;
  transition: all 0.15s ease;
  min-width: 0;
}

.storyline-list-item:hover {
  background: #22201C;
  border-color: #38342B;
}

.storyline-list-item.active {
  background: #26221A;
  border-color: #C5A059;
  box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.35);
}

.storyline-color-pill {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.storyline-item-info {
  flex: 1;
  min-width: 0;
}

.storyline-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #F0ECE4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.storyline-list-item.active .storyline-item-name {
  color: #FFFFFF;
}

.storyline-item-meta {
  font-size: 10.5px;
  color: #9A9488;
  margin-top: 2px;
}

.storyline-detail-panel {
  flex: 1;
  background: #171614;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 22px 26px;
  scrollbar-width: thin;
  scrollbar-color: #38342B #171614;
}

.storyline-section-card {
  background: #1C1A17;
  border: 1px solid #2B2822;
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.storyline-section-heading {
  font-size: 11px;
  font-weight: 700;
  color: #C5A059;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px 0;
}

.storyline-form-group {
  margin-bottom: 14px;
}

.storyline-form-group:last-child {
  margin-bottom: 0;
}

.storyline-form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #A6A094;
  margin-bottom: 6px;
}

/* Dark Theme Form Input Styles for Storyline Manager */
.storyline-input-text,
.storyline-input-select,
.storyline-textarea,
.storyline-form .ws-input {
  width: 100%;
  background-color: #121110;
  border: 1px solid #2B2923;
  border-radius: 6px;
  color: #EDE8DF;
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.storyline-input-text::placeholder,
.storyline-textarea::placeholder {
  color: #635C52;
}

.storyline-input-text:hover,
.storyline-input-select:hover,
.storyline-textarea:hover {
  border-color: #3F3C34;
  background-color: #151412;
}

.storyline-input-text:focus,
.storyline-input-select:focus,
.storyline-textarea:focus {
  border-color: #C5A059;
  box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.25);
  background-color: #161513;
}

.storyline-input-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C5A059'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 36px;
}

.storyline-input-select option {
  background-color: #181714;
  color: #EDE8DF;
  padding: 8px 12px;
}

.storyline-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: #38342B #121110;
}

.storyline-stats-card {
  background: #141311;
  border: 1px solid #28241D;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.storyline-assigned-title {
  font-size: 11px;
  color: #8C867A;
  font-weight: 600;
}

.storyline-assigned-count {
  font-size: 11px;
  font-family: var(--font-mono);
  color: #DFC07D;
  font-weight: 700;
}

.storyline-form-actions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.storyline-form-actions-bar .danger {
  color: #E06C75;
  border-color: rgba(224, 108, 117, 0.35);
}

.storyline-form-actions-bar .danger:hover {
  background: rgba(224, 108, 117, 0.15);
  border-color: #E06C75;
  color: #FF7B85;
}

.storyline-footer-tip {
  font-size: 11px;
  color: #8C867A;
  font-style: italic;
}

@media (max-width: 900px) {
  .storyline-modal-card {
    height: 85vh;
  }
  .storyline-workspace-layout {
    flex-direction: column;
    overflow-y: auto;
  }
  .storyline-sidebar-panel {
    width: 100%;
    min-width: 100%;
    max-height: 190px;
    border-right: none;
    border-bottom: 1px solid #2B2923;
  }
  .storyline-detail-panel {
    padding: 16px 18px;
  }
}

@media (max-width: 600px) {
  .storyline-modal-card {
    width: 96vw;
    height: 92vh;
    max-height: 92vh;
  }
  .storyline-sidebar-panel {
    max-height: 160px;
  }
  .storyline-detail-panel {
    padding: 14px 12px;
  }
  .storyline-section-card {
    padding: 14px 12px;
  }
  .storyline-form-actions-bar {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .storyline-form-actions-bar button {
    width: 100%;
    text-align: center;
  }
  .storyline-footer-tip {
    display: none;
  }
}

/* ==============================================================================
   Phase 3: Multi-dimensional Plot Board Filter Bar
   ============================================================================== */
.plot-board-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #161513;
  border-bottom: 1px solid #28241D;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.plot-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.plot-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8E887C;
}

.plot-filter-select {
  background: #11100E;
  border: 1px solid #332F27;
  border-radius: 4px;
  color: #EDE8DF;
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
  font-family: var(--font-sans);
  transition: border-color 0.15s ease;
}

.plot-filter-select:focus {
  border-color: #C5A059;
}

.plot-filter-search {
  flex: 1;
  min-width: 140px;
}

.plot-search-input {
  width: 100%;
  background: #11100E;
  border: 1px solid #332F27;
  border-radius: 4px;
  color: #EDE8DF;
  font-size: 12px;
  padding: 4px 10px;
  outline: none;
  transition: border-color 0.15s ease;
}

.plot-search-input:focus {
  border-color: #C5A059;
}

.plot-reset-btn {
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
}

.plot-lane-empty-state {
  text-align: center;
  color: #706A5F;
  font-size: 11.5px;
  padding: 24px 12px;
  font-style: italic;
  user-select: none;
}

.plot-lane-empty-state .reset-filter-link {
  color: #C5A059;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 4px;
}

/* ==============================================================================
   Phase 3: Multi-tag Chips in Beat Editor
   ============================================================================== */
.beat-tags-chip-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  padding: 5px 8px;
  background: #100F0D;
  border: 1px solid #2B2822;
  border-radius: 5px;
  align-items: center;
}

.beat-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  user-select: none;
}

.beat-tag-chip.char-chip {
  background: #242018;
  border: 1px solid #4D4029;
  color: #DFC07D;
}

.beat-tag-chip.loc-chip {
  background: #162426;
  border: 1px solid #264245;
  color: #8FD8D2;
}

.beat-tag-chip-remove {
  background: transparent;
  border: none;
  color: #8E887C;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
}

.beat-tag-chip-remove:hover {
  color: #FF6B6B;
}

/* ==============================================================================
   Phase 3: Beat Card Tag Rows & Broken Link Repair Indicator
   ============================================================================== */
.plot-beat-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
}

.plot-beat-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.plot-beat-tag.char-tag {
  background: #242018;
  color: #DFC07D;
  border: 1px solid #4D4029;
}

.plot-beat-tag.loc-tag {
  background: #142022;
  color: #8FD8D2;
  border: 1px solid #223D40;
}

.plot-beat-link.broken-link {
  color: #E06C75 !important;
  background: rgba(224, 108, 117, 0.1);
  border: 1px dashed rgba(224, 108, 117, 0.45);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 10.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 4px 0;
}

.btn-reconnect-beat {
  background: #2C181A;
  border: 1px solid #E06C75;
  color: #FF9B9B;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-reconnect-beat:hover {
  background: #E06C75;
  color: #100F0D;
}

/* ==============================================================================
   Phase 3: Screenplay Scene Heading Storyline Color Ribbons
   ============================================================================== */
.scene-storyline-indicator {
  position: absolute;
  left: -12px;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.scene-storyline-tag {
  display: inline-block;
  font-size: 9px;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 10px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  user-select: none;
}

/* ==============================================================================
   Phase 4: Worldbuilding Reference Drawer Polish & Actions
   ============================================================================== */
.wb-tab-actions-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #24201A;
  background: #161513;
  flex-shrink: 0;
}

.wb-action-btn {
  background: #28241D;
  border: 1px solid #4D4536;
  color: #DFC07D;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wb-action-btn:hover {
  background: #C5A059;
  color: #100F0D;
  border-color: #C5A059;
}

.wb-action-btn.secondary {
  background: transparent;
  border: 1px solid #332F27;
  color: #9E988C;
}

.wb-action-btn.secondary:hover {
  border-color: #7A7468;
  color: #EDE8DF;
}

.wb-scratchpad-footer-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.wb-ref-card {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.wb-ref-card:hover {
  transform: translateY(-1px);
  border-color: #C5A059;
  background: #1D1A16;
}

.wb-ref-scene-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  background: #201D17;
  border: 1px solid #383226;
  color: #C5A059;
  font-family: var(--font-mono);
  font-size: 9.5px;
  margin-right: 4px;
  margin-top: 3px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.wb-ref-scene-tag:hover {
  background: #C5A059;
  color: #100F0D;
}

/* ==============================================================================
   A FILM BY — HIT (Helpful Intelligence Tool) Assistant Modal Styles
   Established Palette: Canvas #121110 | Panel #22201C | Gold #C5A059 | Paper #FAF6ED
   ============================================================================== */
.hit-modal-card {
  max-width: 760px;
  width: 92%;
  max-height: 88vh;
  background: #181714;
  border: 1px solid #38342B;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(197, 160, 89, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: hitFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hitFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.hit-modal-header {
  padding: 16px 22px;
  background: #131210;
  border-bottom: 1px solid #28251F;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.hit-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(197, 160, 89, 0.12);
  border: 1px solid rgba(197, 160, 89, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C5A059;
  flex-shrink: 0;
}

.hit-icon-badge svg {
  width: 20px;
  height: 20px;
}

.hit-modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: #181714;
}

/* Sections */
.hit-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hit-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid #26231D;
  padding-bottom: 5px;
}

.hit-section-tag {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #C5A059;
  text-transform: uppercase;
}

.hit-section-sub {
  font-size: 11px;
  color: #7D786E;
}

/* Section A: Current Screen */
.hit-screen-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #1F1D19;
  border: 1px solid #2E2A23;
  border-radius: 8px;
  padding: 14px 16px;
}

.hit-screen-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #151411;
  border: 1px solid #363229;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C5A059;
  flex-shrink: 0;
}

.hit-screen-icon-wrap svg {
  width: 18px;
  height: 18px;
}

.hit-screen-meta {
  flex: 1;
  min-width: 0;
}

.hit-screen-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.hit-screen-title {
  font-size: 15px;
  font-weight: 700;
  color: #FAF6ED;
  margin: 0;
}

.hit-badge {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 700;
  color: #C5A059;
  background: rgba(197, 160, 89, 0.15);
  border: 1px solid rgba(197, 160, 89, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.8px;
}

.hit-screen-summary {
  font-size: 12.5px;
  color: #CFC9BD;
  margin: 0 0 4px 0;
  line-height: 1.45;
}

.hit-screen-details {
  font-size: 11.5px;
  color: #8C867B;
  margin: 0;
  line-height: 1.4;
}

/* Section B: Current Context Grid */
.hit-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.hit-context-chip {
  background: #1F1D19;
  border: 1px solid #2B2822;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hit-context-chip .chip-label {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  color: #7D786E;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.hit-context-chip .chip-value {
  font-size: 12px;
  font-weight: 600;
  color: #EDEAE5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hit-context-chip .chip-value.element-tag {
  color: #C5A059;
  font-family: var(--font-mono, monospace);
}

.hit-context-chip .chip-value.status-on {
  color: #5CB85C;
}

.hit-context-chip .chip-value.status-off {
  color: #A39E93;
}

.hit-context-chip .chip-value.status-saved {
  color: #7BB88E;
}

/* Section C: Live Application Status */
.hit-activity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 170px;
  overflow-y: auto;
  padding-right: 4px;
}

.hit-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  background: #1B1916;
  border: 1px solid #27241E;
  border-radius: 6px;
  font-size: 12px;
}

.activity-type-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
  background: #C5A059;
}

.activity-type-dot.success {
  background: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.6);
}

.activity-type-dot.error {
  background: #E53935;
  box-shadow: 0 0 5px rgba(229, 57, 53, 0.6);
}

.activity-type-dot.progress {
  background: #E5A93C;
}

.activity-text-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.activity-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.activity-op-title {
  font-weight: 600;
  color: #EDE8DF;
  font-size: 12px;
}

.activity-time {
  font-size: 10px;
  color: #7D786E;
  white-space: nowrap;
}

.activity-op-message {
  font-size: 11px;
  color: #9E988E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-empty-state {
  font-size: 11.5px;
  color: #7D786E;
  padding: 8px 0;
}

/* Section D: Contextual Guidance */
.hit-guidance-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hit-guidance-card {
  background: #1F1D19;
  border: 1px solid #302C24;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guidance-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.guidance-element-badge {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: #C5A059;
}

.guidance-shortcut-tag kbd {
  background: #131210;
  border: 1px solid #38342C;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  color: #D1CBBF;
  font-family: inherit;
}

.guidance-rule-text {
  font-size: 12px;
  color: #CFC9BD;
  margin: 0;
  line-height: 1.5;
}

.guidance-syntax-sample {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #141311;
  border: 1px solid #26241E;
  border-radius: 4px;
  padding: 5px 8px;
}

.syntax-label {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  color: #8C867B;
  flex-shrink: 0;
}

.guidance-syntax-sample code {
  font-family: 'Courier Prime', Courier, monospace;
  font-size: 11.5px;
  color: #FAF6ED;
}

.hit-shortcuts-list {
  background: #191815;
  border: 1px solid #28251F;
  border-radius: 8px;
  padding: 10px 14px;
}

.shortcuts-header-title {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 700;
  color: #8C867B;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.shortcuts-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px 16px;
}

.shortcut-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shortcut-kbd {
  background: #131210;
  border: 1px solid #38342C;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: #C5A059;
  font-family: inherit;
  min-width: 58px;
  text-align: center;
  flex-shrink: 0;
}

.shortcut-desc {
  font-size: 11.5px;
  color: #ABA59B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section E: Troubleshooting */
.hit-troubleshooting-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hit-diagnostic-card {
  padding: 10px 14px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.hit-diagnostic-card.healthy {
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.hit-diagnostic-card.warning {
  background: rgba(229, 169, 60, 0.08);
  border: 1px solid rgba(229, 169, 60, 0.35);
}

.hit-diagnostic-card.info {
  background: #1D1B17;
  border: 1px solid #2B2822;
}

.diagnostic-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.diagnostic-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.diagnostic-indicator-dot.healthy {
  background: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.7);
}

.diagnostic-indicator-dot.warning {
  background: #E5A93C;
  box-shadow: 0 0 5px rgba(229, 169, 60, 0.7);
}

.diagnostic-indicator-dot.info {
  background: #C5A059;
}

.diagnostic-title {
  font-weight: 700;
  color: #FAF6ED;
  font-size: 12.5px;
}

.diagnostic-cause {
  color: #B5AFA4;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
}

.diagnostic-solution {
  color: #EDE8DF;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
}

.diagnostic-solution strong {
  color: #C5A059;
}

/* Section F: Quick Actions */
.hit-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.hit-action-btn {
  background: #1F1D19;
  border: 1px solid #302C23;
  color: #EDE8DF;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.hit-action-btn svg {
  width: 14px;
  height: 14px;
  color: #C5A059;
  flex-shrink: 0;
}

.hit-action-btn:hover {
  background: #28241F;
  border-color: #C5A059;
  color: #FAF6ED;
  transform: translateY(-1px);
}

.hit-action-btn:active {
  transform: translateY(0);
}

.hit-action-btn.gold {
  background: rgba(197, 160, 89, 0.15);
  border-color: #C5A059;
  color: #FAF6ED;
}

.hit-action-btn.gold:hover {
  background: #C5A059;
  color: #100F0D;
}

.hit-action-btn.gold:hover svg {
  color: #100F0D;
}

/* Footer */
.hit-modal-footer {
  padding: 12px 22px;
  background: #131210;
  border-top: 1px solid #28251F;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.hit-offline-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #8C867B;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.3px;
}

.hit-offline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.6);
  flex-shrink: 0;
}

/* Responsive adjustments for HIT */
.hit-modal-body {
  overflow-x: hidden;
  box-sizing: border-box;
}

.hit-context-chip,
.hit-activity-row,
.hit-guidance-card,
.hit-diagnostic-card,
.hit-action-btn {
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .hit-modal-card {
    width: 96%;
    max-height: 94vh;
    box-sizing: border-box;
  }
  .hit-modal-header {
    padding: 12px 14px;
  }
  .hit-modal-body {
    padding: 12px;
    gap: 14px;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .hit-screen-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .hit-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .hit-context-chip {
    padding: 6px 8px;
  }
  .hit-context-chip .chip-value {
    font-size: 11px;
  }
  .hit-shortcuts-list {
    padding: 8px 10px;
  }
  .shortcuts-table {
    grid-template-columns: minmax(0, 1fr);
  }
  .shortcut-row {
    min-width: 0;
  }
  .shortcut-desc {
    font-size: 11px;
  }
  .guidance-syntax-sample {
    flex-wrap: wrap;
    word-break: break-all;
  }
  .hit-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .hit-action-btn {
    padding: 6px 8px;
    font-size: 11px;
  }
  .hit-modal-footer {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hit-offline-badge {
    font-size: 9.5px;
    flex: 1 1 100%;
  }
}

/* ==============================================================================
   BUG-010 & BUG-015: Accessible Custom Dialog & Modal Focus Styles
   ============================================================================== */
.ws-custom-dialog-backdrop {
  z-index: 250 !important;
}

.ws-custom-dialog-card {
  width: 90%;
  max-width: 480px;
  background: #191815;
  border: 1px solid #3A362D;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
  padding: 0;
  overflow: hidden;
  animation: wsDialogFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wsDialogFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ws-custom-dialog-card .ws-modal-header {
  padding: 16px 20px;
  background: #1E1C19;
  border-bottom: 1px solid #2B2923;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ws-custom-dialog-card .ws-modal-title {
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #E5A93C;
  margin: 0;
}

.ws-custom-dialog-body {
  padding: 20px;
}

.ws-custom-dialog-msg {
  color: #EDE8DF;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  white-space: pre-line;
}

.ws-custom-dialog-input-wrap {
  margin-top: 14px;
}

.ws-custom-dialog-input {
  width: 100%;
  box-sizing: border-box;
  background: #0D0C0B;
  border: 1px solid #3A362D;
  border-radius: 6px;
  padding: 10px 14px;
  color: #F5EFEB;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ws-custom-dialog-input:focus {
  border-color: #E5A93C;
  box-shadow: 0 0 0 2px rgba(229, 169, 60, 0.25);
}

.ws-custom-dialog-error {
  color: #F87171;
  font-size: 12px;
  margin-top: 6px;
}

.ws-custom-dialog-footer {
  padding: 14px 20px;
  background: #141311;
  border-top: 1px solid #2B2923;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.ws-btn-danger {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  border: 1px solid #EF4444 !important;
}

.ws-btn-danger:hover {
  background: #B91C1C !important;
  border-color: #DC2626 !important;
}

/* Accessible visible keyboard focus outline */
.ws-modal-backdrop button:focus-visible,
.ws-modal-backdrop input:focus-visible,
.ws-modal-backdrop select:focus-visible,
.ws-modal-backdrop textarea:focus-visible {
  outline: 2px solid #E5A93C !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   TASK 5: EXPORT SCREENPLAY PDF APPEARANCE DIALOG
   ========================================================================== */
.export-appearance-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.export-appearance-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #181714;
  border: 1.5px solid #2B2923;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.export-appearance-card:hover {
  border-color: rgba(197, 160, 89, 0.4);
  background: #1D1B17;
}

.export-appearance-card.selected,
.export-appearance-card:has(input[type="radio"]:checked) {
  border-color: #C5A059;
  background: rgba(197, 160, 89, 0.08);
  box-shadow: 0 0 14px rgba(197, 160, 89, 0.15);
}

.export-appearance-card input[type="radio"] {
  margin-top: 3px;
  accent-color: #C5A059;
  width: 17px;
  height: 17px;
  cursor: pointer;
  flex-shrink: 0;
}

.appearance-card-content {
  flex: 1;
}

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

.appearance-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #EDE8DF;
  letter-spacing: 0.3px;
}

.export-appearance-card.selected .appearance-card-title {
  color: #C5A059;
}

.appearance-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.default-badge {
  background: rgba(197, 160, 89, 0.2);
  color: #C5A059;
  border: 1px solid rgba(197, 160, 89, 0.4);
}

.annotated-badge {
  background: rgba(74, 222, 128, 0.15);
  color: #4ADE80;
  border: 1px solid rgba(74, 222, 128, 0.35);
}

.appearance-card-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: #A39E93;
  margin: 0 0 8px 0;
}

.appearance-card-bullets {
  margin: 0;
  padding-left: 18px;
  font-size: 11.5px;
  color: #8C877D;
  line-height: 1.5;
}

.appearance-card-bullets li {
  margin-bottom: 3px;
}