/* v8.634.512 (Lite 1, hiding): what needs Premiere, the AI, a licence or a folder is gone from the screen in Vireo Lite
   (not greyed: no buttons that do nothing). Loaded after styles.css, only in Lite. main.js keeps a LITE check where CSS
   can't reach. */
@font-face { font-family: "Bricolage Grotesque Lite"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-600-normal.woff2?v=516") format("woff2"); }

/* Premiere: Analyze, LIVE, Selects, the timeline refresh, b-roll analysis, shot Insert, re-reads, the stale and
   off-script notices */
#btn-analyze, #btn-onboard-broll, #live-badge, #mode-switch, #btn-selects-v2, .broll-dropdown-wrapper, #btn-refresh-seqs,
#broll-mini-progress, #broll-progress-wrap, #btn-cancel-broll-analysis, .broll-shelf-insert, #btn-broll-shelf-refresh,
#btn-broll-refresh, #btn-notes-refresh, #stale-notice, #offscript-overlay, #ctx-restore-timeline,
#ctx-seq-reanalyze, #ctx-seq-set-broll, #ctx-seq-aroll-source, #ctx-seq-learn-style,
#ctx-shot-look-again, #ctx-shot-paste, .broll-shelf-lock,
/* v8.634.513 (Lite 1.1, the AI): the AI chat, Rules, Workflows, AI Chats, the model picker, Translate and API Settings
   are back. Still gone: the Playbook (the built-in guide is what the AI uses), Scratch Disks */
#btn-open-style, #btn-open-scratch,
/* v8.634.513 (Lite 1.1, the menu): Import > Rules only (Lite opens files itself); Export > Transcript and Rules */
#btn-import-project, #btn-import-xml, #btn-export-project, #btn-export-last-xml,
/* v8.634.513 (Lite 1.1, licence): Account is back, but Lite never activates - no Remove This Computer, no update line */
#user-popup-menu, #btn-account-deactivate, #account-remove-note, #account-version-line,
/* the Activity panel. v8.634.515 (Lite tips): the tip card is back, with Lite's own tips */
#debug-panel { display: none !important; }

/* v8.634.513 (Lite 1.1, the menu): the version is Lite's */
body.vireo-lite #menu-version-label::before { content: "Lite "; }
/* the start screen: no list yet, and no Export with nothing open */
body.lite-nofile #metadata-list > *, body.lite-nofile #btn-gen-xml, body.lite-nofile .onboarding-card:not(.lite-start) { display: none !important; }
body:not(.lite-nofile) .onboarding-card.lite-start { display: none !important; }

/* LITE beside the wordmark: the wordmark's typeface, the bird's purple, on its baseline, no box */
.lite-mark {
  font-family: "Bricolage Grotesque Lite", "Bricolage Grotesque", system-ui, sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: 3.5px; color: #A855F7; line-height: 1; margin-left: -5px; align-self: flex-end; padding-bottom: 0; transform: translateY(1px);
  user-select: none; -webkit-user-select: none; pointer-events: none;
}

/* the start screen card (Vireo's .onboarding-card) */
.onboarding-card.lite-start { padding: 48px 32px 40px; max-width: 420px; }
.onboarding-card.lite-start h1.lite-start-title { font-size: 20px; line-height: 1.3; letter-spacing: -0.3px; margin: 0 0 12px 0; }
.onboarding-card.lite-start .primary-btn { margin-top: 24px; }
.onboarding-card.lite-start .lite-start-kept { margin-top: 12px; color: #7C3AED !important; font-size: 12px; }
.onboarding-card.lite-start .lite-start-error { margin-top: 12px; color: #DC2626 !important; font-size: 12px; }
.onboarding-card.lite-start .lite-start-small { margin-top: 16px; font-size: 11px; color: #9CA3AF !important; }

/* the file, just above Account */
.lite-file { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; font-size: 12px; min-width: 0; }
.lite-account-ai { margin-right: auto; }
.lite-file-name { color: #888 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lite-file-open { color: #C4B5FD !important; cursor: pointer; width: fit-content; }
.lite-file-open:hover { color: #DDD6FE !important; }
.column-left.collapsed .lite-file { display: none; }

/* storage that fails or is full */
.lite-storage-line { padding: 8px 16px; font-size: 12px; font-weight: 500; color: #B91C1C !important; background: #FEF2F2 !important; border-bottom: 1px solid #FECACA; }

/* Diagnostics: only what applies in a browser (the log, the storage on this device, the report) */
.diag-section:has(#diag-hist-dot), #diag-changed, #diag-marker-probe, .diag-fold[data-fold="files"],
.diag-row:has([data-storage="olddrafts"]), .diag-row:has([data-storage="rebuilds"]), .diag-row:has([data-storage="temp"]), .diag-row:has([data-storage="wheretemp"]),
[data-storage="fresh"] { display: none !important; }

/* v8.634.513 (Lite 1.1, licence): without a Vireo Pro key the AI chat shows the "Unlock the AI." card, never the AI key
   card over it (with a Pro key and no AI key, Vireo's own API Settings card shows as usual) */
body.vireo-lite:has(#chat-feed.pro-locked-feed) #api-setup-container { display: none !important; }
body.vireo-lite:has(#chat-feed.pro-locked-feed) #chat-feed { display: flex !important; }

/* =====================================================================================================================
   v8.634.513 (Lite 1.1, the look). Everything below is Lite only (lite.css loads only in Vireo Lite, and html.vireo-lite
   is set by lite-host.js before anything is drawn). Vireo in Premiere keeps its own scroll pill and its workarounds.
   ===================================================================================================================== */

/* ---- NO PREMIERE WORKAROUNDS: the browser's own scrollbars ----
   Premiere's panel can't style or hide a scrollbar, so Vireo makes each list 17px wider than its box (the scrollbar falls
   off the edge), pads that 17px back, and draws its own pill (.custom-scroll-thumb). In a browser that only pushed the
   content and the pill to the right. Here: the real scrollbar, thin - the Mac's own overlay pill, a slim one on Windows. */
html.vireo-lite * { scrollbar-width: thin; }
html.vireo-lite .text-content, html.vireo-lite .chat-feed,
html.vireo-lite .notes-docs-menu .picker-list, html.vireo-lite .compare-to-version-menu .picker-list, html.vireo-lite .model-picker-menu .picker-list {
  scrollbar-width: thin !important; -ms-overflow-style: auto !important;
}
/* the dark sidebar's scrollbars are drawn for a dark background */
html.vireo-lite .column-left, html.vireo-lite .debug-panel { color-scheme: dark; }
/* where scrollbar-width isn't read (older Safari): the same thin rounded pill */
html.vireo-lite ::-webkit-scrollbar,
html.vireo-lite .notes-docs-menu .picker-list::-webkit-scrollbar, html.vireo-lite .compare-to-version-menu .picker-list::-webkit-scrollbar, html.vireo-lite .model-picker-menu .picker-list::-webkit-scrollbar {
  display: block !important; width: 8px !important; height: 8px !important; background: transparent !important;
}
html.vireo-lite ::-webkit-scrollbar-track { background: transparent !important; }
html.vireo-lite ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.28) !important; border-radius: 8px !important; border: 2px solid transparent !important; background-clip: padding-box !important; }
html.vireo-lite .column-left ::-webkit-scrollbar-thumb, html.vireo-lite .column-left::-webkit-scrollbar-thumb, html.vireo-lite .debug-panel ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.24) !important; }
/* no drawn pill */
html.vireo-lite .custom-scroll-thumb { display: none !important; }
/* no 17px push, and none of the padding that made up for it */
html.vireo-lite .text-content, html.vireo-lite .chat-feed, html.vireo-lite .unused-words-content,
html.vireo-lite .rules-list, html.vireo-lite .broll-shelf-list, html.vireo-lite .notes-list { width: 100% !important; }
html.vireo-lite .rules-list { padding-right: 0 !important; }
html.vireo-lite .broll-shelf-list { padding-right: 10px !important; }
html.vireo-lite .notes-docs-menu .picker-list, html.vireo-lite .compare-to-version-menu .picker-list, html.vireo-lite .model-picker-menu .picker-list { width: auto !important; }
html.vireo-lite .notes-docs-menu .picker-list .picker-item, html.vireo-lite .compare-to-version-menu .picker-list .picker-item, html.vireo-lite .model-picker-menu .picker-list .picker-item { padding-right: 12px !important; }
html.vireo-lite .notes-tickcell { padding-right: 12px !important; }
/* no cover tricks: a browser's text boxes never paint over a menu or a dialog, so they stay visible under them */
html.vireo-lite body.modal-open #notes-textarea, html.vireo-lite body.modal-open #chat-prompt, html.vireo-lite body.modal-open #search-input,
html.vireo-lite body.modal-open #chat-search-input, html.vireo-lite body.modal-open #notes-search-input, html.vireo-lite body.modal-open #compare-search-input,
html.vireo-lite body.menu-open #search-input, html.vireo-lite body.menu-open #chat-search-input, html.vireo-lite body.menu-open #notes-search-input,
html.vireo-lite body.menu-open #compare-search-input, html.vireo-lite body.menu-open #notes-textarea, html.vireo-lite body.menu-open #chat-prompt,
html.vireo-lite body.modal-open .rule-name-input, html.vireo-lite body.modal-open .rule-edit-textarea, html.vireo-lite body.modal-open .speaker-edit-input,
html.vireo-lite body.modal-open .broll-edit-field, html.vireo-lite body.modal-open .broll-add-input, html.vireo-lite body.modal-open .broll-search-input,
html.vireo-lite body.menu-open .rule-name-input, html.vireo-lite body.menu-open .rule-edit-textarea, html.vireo-lite body.menu-open .speaker-edit-input,
html.vireo-lite body.menu-open .broll-edit-field, html.vireo-lite body.menu-open .broll-add-input, html.vireo-lite body.menu-open .broll-search-input,
html.vireo-lite #notes-panel.notes-menu-open .notes-textarea { visibility: visible !important; }

/* ---- the grey band at the top of the right panel: the shadows of the closed Notes / Compare / Shots panels and the
   closed Rules drawer (parked just above the panel) fell into view. Closed, they cast none; open, a lighter one. */
html.vireo-lite .unused-words-panel:not(.open), html.vireo-lite .rules-drawer:not(.open) { box-shadow: none !important; }
html.vireo-lite .rules-drawer:not(.open) { border-bottom-color: transparent !important; }
html.vireo-lite .unused-words-panel.open { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14) !important; }
html.vireo-lite .rules-drawer.open { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07) !important; }

/* ---- the draft's expand button (main.js setupLiteDraftExpandToggle): Vireo's .panel-expand-btn at the draft's top right */
html.vireo-lite .draft-expand-btn { top: 6px; right: 14px; }
html.vireo-lite .editor-columns.draft-expanded .column-right,
html.vireo-lite .editor-columns.draft-expanded #center-resize-handle { display: none !important; }
html.vireo-lite .editor-columns.draft-expanded .column-center { flex: 1 1 100% !important; border-right: none; }
/* only while the draft (or the original words) is on screen */
html.vireo-lite #draft-content[style*="display: none"] + #source-content[style*="display: none"] + #btn-draft-expand,
body.lite-nofile #btn-draft-expand, body.broll-mode #btn-draft-expand { display: none !important; }

/* ---- the AI from a file on disk: the card without a button */
.pro-card.lite-disk-card .pro-card-line { margin-bottom: 0; }

/* ---- glass: ONLY the floating things - the menu (and its Import / Export flyouts), dialogs, toasts and the chat typing
   box. Solid as before where the browser has no backdrop blur. The typing box gets it from a layer behind its contents,
   so the model picker's menu inside it stays placed against the window. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.vireo-lite #settings-menu, html.vireo-lite #import-picker-modal, html.vireo-lite #export-picker-modal {
    background-color: rgba(30, 30, 30, 0.78) !important; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  }
  html.vireo-lite .modal-overlay { background-color: rgba(0, 0, 0, 0.5); }
  html.vireo-lite .modal-content { background-color: rgba(30, 30, 30, 0.8); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
  /* v8.634.515 (Lite tips): the tip card stays solid - it sits across the edge of its shade, and glass showed the edge through it */
  html.vireo-lite #hint-modal .modal-content { background-color: var(--bg-panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.vireo-lite #app-toast { background-color: rgba(30, 30, 30, 0.82) !important; -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
  html.vireo-lite .ai-chat-pill { background-color: transparent !important; isolation: isolate; }
  html.vireo-lite .ai-chat-pill::before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; z-index: -1; pointer-events: none;
    background-color: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  }
  html.vireo-lite .ai-chat-pill textarea, html.vireo-lite .ai-chat-pill textarea:focus { background-color: transparent !important; }
}

/* ---- polish: buttons brighten on hover and press in a little on click. Icon buttons move only their icon (some hold a
   menu, which must not move with them). */
html.vireo-lite .icon-btn:not(.disabled):hover > svg, html.vireo-lite .stacked-btn:not(.disabled):hover > svg { filter: brightness(1.3); }
html.vireo-lite .primary-btn:not(.disabled):hover, html.vireo-lite .pro-card-btn:hover, html.vireo-lite .chat-action-btn:not(.is-disabled):hover { filter: brightness(1.08); }
html.vireo-lite .icon-btn:not(.disabled):active > svg, html.vireo-lite .stacked-btn:not(.disabled):active > svg,
html.vireo-lite .panel-expand-btn:active > svg, html.vireo-lite .broll-expand-btn:active > svg,
html.vireo-lite .primary-btn:not(.disabled):active, html.vireo-lite .pro-card-btn:active, html.vireo-lite .chat-action-btn:not(.is-disabled):active,
html.vireo-lite .suggested-prompt-chip:active, html.vireo-lite .rules-tab:active, html.vireo-lite .view-tab:active { transform: scale(0.97); }

/* ---- motion: about 200 ms, transform and opacity only, never on the words (highlighting stays instant) */
@keyframes lite-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes lite-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lite-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html.vireo-lite .rules-drawer.open, html.vireo-lite #settings-menu,
  html.vireo-lite #import-picker-modal, html.vireo-lite #export-picker-modal { animation: lite-in 0.2s ease-out; }
  html.vireo-lite .column-left:not(.collapsed) .hide-on-collapse { animation: lite-fade 0.2s ease-out; }
  html.vireo-lite .editor-columns.draft-expanded .column-center, html.vireo-lite .editor-columns.ai-expanded .column-right,
  html.vireo-lite .editor-columns.broll-expanded .column-center { animation: lite-fade 0.2s ease-out; }
  html.vireo-lite .panel-expand-btn > svg, html.vireo-lite .broll-expand-btn > svg { animation: lite-fade 0.2s ease-out; }
  html.vireo-lite .app-toast { transition: opacity 0.2s ease, transform 0.2s ease; }
  html.vireo-lite .lite-export-tick { animation: lite-pop 0.2s ease-out; }
  html.vireo-lite .icon-btn > svg, html.vireo-lite .stacked-btn > svg, html.vireo-lite .panel-expand-btn > svg, html.vireo-lite .broll-expand-btn > svg { transition: transform 0.1s ease, filter 0.1s ease; }
  html.vireo-lite .primary-btn, html.vireo-lite .pro-card-btn, html.vireo-lite .chat-action-btn, html.vireo-lite .suggested-prompt-chip,
  html.vireo-lite .rules-tab, html.vireo-lite .view-tab { transition: transform 0.1s ease, filter 0.1s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
  /* the AI's thinking bars: Vireo steps them every 40 ms; the browser fills in between */
  html.vireo-lite .chat-message.thinking-wave i { transition: height 40ms linear, opacity 40ms linear; }
}
/* reduced motion: nothing moves */
@media (prefers-reduced-motion: reduce) {
  html.vireo-lite *, html.vireo-lite *::before, html.vireo-lite *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- the load screen (lite-host.js): the wordmark with LITE on Vireo's dark, the bird purple to teal, then a fade */
.lite-load {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20000; background-color: #141414;
  display: flex; align-items: center; justify-content: center; opacity: 1;
}
.lite-load-mark { position: relative; display: flex; align-items: flex-end; }
.lite-load-lockup { height: 76px; width: auto; display: block; overflow: visible; }
.lite-load-teal { position: absolute; left: 0; top: 0; opacity: 0; }
html.vireo-lite .lite-load .wm-word { fill: #EDEAF2 !important; stroke: none !important; }
html.vireo-lite .lite-load .lite-load-purple .wm-bird { fill: #A855F7 !important; stroke: none !important; }
html.vireo-lite .lite-load .lite-load-teal .wm-bird { fill: #2DD4BF !important; stroke: none !important; }
.lite-load-lite {
  font-family: "Bricolage Grotesque Lite", "Bricolage Grotesque", system-ui, sans-serif; font-weight: 600; font-size: 22px;
  letter-spacing: 7px; color: #A855F7; line-height: 1; margin-left: 6px; transform: translateY(2px); user-select: none;
}
.lite-load.lite-load-go .lite-load-teal { opacity: 1; transition: opacity 1.4s ease-in-out 0.25s; }
.lite-load.lite-load-out { opacity: 0; transition: opacity 0.3s ease; }
.lite-load.lite-load-reduced .lite-load-teal { opacity: 1; transition: none; }