/* Script Writer: modern, theme-aware restyle of #scriptNotesView. The markup is mostly inline
   styles, so this overrides them (attribute selectors + !important), scoped to the view. */
#scriptNotesView {
  --sw-fg: var(--console-fg, #fff);
  --sw-bg: var(--console-bg, #0b0b0f);
  --sw-muted: color-mix(in srgb, var(--sw-fg) 58%, transparent);
  --sw-faint: color-mix(in srgb, var(--sw-fg) 36%, transparent);
  --sw-line: color-mix(in srgb, var(--sw-fg) 10%, transparent);
  --sw-fill: color-mix(in srgb, var(--sw-fg) 4.5%, transparent);
  --sw-hover: color-mix(in srgb, var(--sw-fg) 8%, transparent);
  --sw-strong: color-mix(in srgb, var(--sw-fg) 14%, transparent);
  background: var(--sw-bg) !important;
  color: var(--sw-fg);
  font-family: Geist, system-ui, -apple-system, sans-serif;
}
#scriptNotesView * { font-family: inherit; }

/* ---------- sidebar ---------- */
#scriptNotesView #scriptNotesSidebar {
  width: 290px !important; background: color-mix(in srgb, var(--sw-fg) 2%, var(--sw-bg)) !important;
  border-right: 1px solid var(--sw-line) !important;
}
#scriptNotesView #scriptNotesSidebar > div:first-child { padding: 18px 16px 12px !important; }
#scriptNotesView #scriptNotesSidebar > div:first-child > div:first-child { margin-bottom: 14px !important; }
#scriptNotesView #scriptNotesSidebar > div:first-child > div:first-child > span {
  font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--sw-fg) !important;
}
#scriptNotesView #scriptNotesNewBtn {
  height: 30px; padding: 0 12px !important; border-radius: 8px !important; border: 0 !important;
  background: var(--sw-fg) !important; color: var(--sw-bg) !important; font-size: 12.5px !important; font-weight: 600 !important;
}
#scriptNotesView #scriptNotesNewBtn:hover { filter: brightness(.9); }
#scriptNotesView #scriptNotesCollapseBtn,
#scriptNotesView #scriptNotesExpandListBtn {
  height: 30px; padding: 0 9px !important; border-radius: 8px !important;
  background: transparent !important; border: 1px solid var(--sw-line) !important; color: var(--sw-muted) !important;
}
#scriptNotesView #scriptNotesCollapseBtn:hover { background: var(--sw-hover) !important; color: var(--sw-fg) !important; }
#scriptNotesView #scriptNotesExpandListBtn { background: var(--sw-bg) !important; border-left: 0 !important; border-radius: 0 8px 8px 0 !important; }
#scriptNotesView #scriptWriteAiBtn {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; margin-bottom: 12px !important;
  border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important;
  background: linear-gradient(135deg, color-mix(in srgb, #8b5cf6 22%, transparent), color-mix(in srgb, #3b82f6 18%, transparent)) !important;
  border: 1px solid color-mix(in srgb, #8b5cf6 40%, transparent) !important; color: var(--sw-fg) !important;
  transition: transform .12s ease, box-shadow .15s ease;
}
#scriptNotesView #scriptWriteAiBtn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, #8b5cf6 25%, transparent); }
#scriptNotesView #scriptNotesSearch {
  height: 34px; padding: 0 12px 0 32px !important; border-radius: 9px !important; font-size: 12.5px !important;
  background: var(--sw-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center / 14px !important;
  border: 1px solid var(--sw-line) !important; color: var(--sw-fg) !important;
}
#scriptNotesView #scriptNotesSearch:focus { border-color: color-mix(in srgb, var(--sw-fg) 35%, transparent) !important; }

#scriptNotesView #scriptNotesList { padding: 4px 10px 14px; }
#scriptNotesView .sn-item {
  position: relative; padding: 11px 12px 10px; margin-bottom: 4px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
#scriptNotesView .sn-item:hover { background: var(--sw-hover); }
#scriptNotesView .sn-item.active { background: var(--sw-strong); border-color: var(--sw-line); }
#scriptNotesView .sn-item:focus-visible { outline: 2px solid var(--theme-accent-1, #8b9cff); outline-offset: 1px; }
#scriptNotesView .sn-item-title { font-size: 13.5px; font-weight: 600; color: var(--sw-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#scriptNotesView .sn-item-preview {
  margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--sw-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#scriptNotesView .sn-item-preview i { color: var(--sw-faint); }
#scriptNotesView .sn-item-date { margin-top: 6px; font-size: 11px; color: var(--sw-faint); }
#scriptNotesView .sn-empty { padding: 32px 18px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--sw-faint); }

/* ---------- editor + AI panel: a centred writing column ---------- */
#scriptNotesView #scriptNotesEditor,
#scriptNotesView #scriptAiPanel { padding: 36px clamp(20px, 5vw, 64px) 40px !important; gap: 16px !important; }
#scriptNotesView #scriptNotesEditor > *,
#scriptNotesView #scriptAiPanel > * { width: 100%; max-width: 860px; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
#scriptNotesView #scriptNotesEmpty { color: var(--sw-faint) !important; font-size: 14px !important; padding: 24px; text-align: center; line-height: 1.6; }

#scriptNotesView #scriptNoteTitle {
  padding: 0 !important; height: auto; border: 0 !important; background: transparent !important;
  font-size: 30px !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--sw-fg) !important; outline: none;
}
#scriptNotesView #scriptNoteTitle::placeholder { color: var(--sw-faint); }
#scriptNotesView #scriptNoteContent,
#scriptNotesView #scriptAiDraft,
#scriptNotesView #scriptAiDraftView {
  padding: 18px 20px !important; border-radius: 12px !important; font-size: 15px !important; line-height: 1.75 !important;
  background: var(--sw-fill) !important; border: 1px solid var(--sw-line) !important; color: var(--sw-fg) !important;
}
#scriptNotesView #scriptNoteContent:focus,
#scriptNotesView #scriptAiDraft:focus { border-color: color-mix(in srgb, var(--sw-fg) 28%, transparent) !important; outline: none; }
#scriptNotesView #scriptAiPrompt,
#scriptNotesView #scriptAiChatInput,
#scriptNotesView input[type="text"]:not(#scriptNoteTitle):not(#scriptNotesSearch):not(.sws *),
#scriptNotesView select {
  border-radius: 10px !important; background: var(--sw-fill) !important; border: 1px solid var(--sw-line) !important;
  color: var(--sw-fg) !important; font-size: 13.5px !important;
}
#scriptNotesView #scriptAiPrompt { padding: 14px 16px !important; line-height: 1.6 !important; }
#scriptNotesView #scriptAiPrompt:focus,
#scriptNotesView #scriptAiChatInput:focus { border-color: color-mix(in srgb, var(--sw-fg) 30%, transparent) !important; outline: none; }
#scriptNotesView select { height: 34px; padding: 0 10px !important; }

/* Headings inside the panels */
#scriptNotesView #scriptAiPanel > div:first-child { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--sw-fg) !important; }
#scriptNotesView #scriptAiPanel > p { font-size: 13.5px !important; line-height: 1.6; color: var(--sw-muted) !important; }
#scriptNotesView [style*="text-transform:uppercase"] {
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em !important; color: var(--sw-muted) !important;
}

/* Panels/boxes (research notes, canvas matches, chat log, share panel) */
#scriptNotesView #scriptAiResearch, #scriptNotesView #scriptNoteResearch,
#scriptNotesView #scriptAiCanvasMatches, #scriptNotesView #scriptAiChatLog,
#scriptNotesView #scriptAiDiagramInfo, #scriptNotesView #scriptNoteSharePanel {
  border-radius: 12px !important; background: var(--sw-fill) !important; border: 1px solid var(--sw-line) !important; color: var(--sw-fg) !important;
}
#scriptNotesView #scriptAiDiagram, #scriptNotesView #scriptNoteDiagram {
  border-radius: 12px !important; border: 1px solid var(--sw-line) !important;
}

/* Buttons: gradient = primary, tinted = secondary */
#scriptNotesView button[style*="linear-gradient"]:not(#scriptWriteAiBtn) {
  background: var(--sw-fg) !important; color: var(--sw-bg) !important; border: 0 !important;
  border-radius: 10px !important; font-weight: 600 !important; min-height: 34px;
}
#scriptNotesView button[style*="linear-gradient"]:not(#scriptWriteAiBtn):hover { filter: brightness(.9); }
#scriptNotesView button[style*="rgba(102,126,234"]:not(#scriptWriteAiBtn),
#scriptNotesView button[style*="rgba(255,255,255,0.07)"]:not(#scriptNotesCollapseBtn),
#scriptNotesView button[style*="rgba(255,255,255,0.08)"],
#scriptNotesView button[style*="background:transparent"]:not(#scriptNotesCollapseBtn) {
  background: transparent !important; color: var(--sw-fg) !important;
  border: 1px solid var(--sw-line) !important; border-radius: 9px !important;
}
#scriptNotesView button[style*="rgba(102,126,234"]:not(#scriptWriteAiBtn):hover,
#scriptNotesView button[style*="rgba(255,255,255,0.07)"]:not(#scriptNotesCollapseBtn):hover,
#scriptNotesView button[style*="rgba(255,255,255,0.08)"]:hover,
#scriptNotesView button[style*="background:transparent"]:not(#scriptNotesCollapseBtn):hover { background: var(--sw-hover) !important; }
#scriptNotesView #scriptNoteDocBtn,
#scriptNotesView #scriptAiDocBtn {
  border-radius: 999px !important; background: color-mix(in srgb, var(--sw-bg) 85%, transparent) !important;
  border: 1px solid var(--sw-line) !important; color: var(--sw-fg) !important; backdrop-filter: blur(8px);
}
#scriptNotesView #scriptAiSaveBtn { background: #16a34a !important; border: 0 !important; color: #fff !important; border-radius: 10px !important; }

/* Section-label pills inside drafts follow the theme too */
#scriptNotesView #scriptAiDraftView .script-section-label,
#scriptNotesView #scriptAiChatLog .script-section-label {
  color: var(--sw-fg) !important; background: var(--sw-strong) !important; border-color: var(--sw-line) !important;
}
#scriptNotesView #scriptAiDraftView em, #scriptNotesView #scriptAiChatLog em { color: var(--sw-muted) !important; }
#scriptNotesView .script-ai-dot { background: var(--sw-fg) !important; }

/* The title is one line; a global input rule stretched it to half the editor */
#scriptNotesView #scriptNoteTitle { flex: none !important; height: auto !important; min-height: 44px; }
/* Fields show focus with a soft border, not the app-wide heavy outline */
#scriptNotesView :is(input, textarea, select):focus,
#scriptNotesView :is(input, textarea, select):focus-visible { outline: none !important; box-shadow: none !important; }
#scriptNotesView #scriptNoteTitle:focus { box-shadow: none !important; }
html[data-color-mode] #scriptNotesView .sn-item { border: 1px solid transparent !important; background: transparent; }
html[data-color-mode] #scriptNotesView .sn-item:hover { background: var(--sw-hover) !important; }
html[data-color-mode] #scriptNotesView .sn-item.active { background: var(--sw-strong) !important; border-color: transparent !important; }
/* Destructive actions read as such */
#scriptNotesView #scriptNoteDeleteBtn,
#scriptNotesView #scriptNoteRevokeBtn { color: #ef4444 !important; border-color: color-mix(in srgb, #ef4444 35%, transparent) !important; background: transparent !important; }
#scriptNotesView #scriptNoteDeleteBtn:hover,
#scriptNotesView #scriptNoteRevokeBtn:hover { background: color-mix(in srgb, #ef4444 10%, transparent) !important; }