/* v8.634.512 (Lite 1, hiding): what needs Premiere, the AI, a licence or a folder is gone from the screen in Sitta 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=575") 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 (Sitta'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 Sitta 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, Sitta'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 Sitta Lite, and html.vireo-lite
   is set by lite-host.js before anything is drawn). Sitta 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 Sitta 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; }
/* v8.634.572 (Dark, on Lite's site): Chrome reads scrollbar-width and then skips the ::-webkit-scrollbar rules above, and draws its
   colours from color-scheme (light outside the sidebar) - so in Dark a classic bar (the Mac's "Always show", or after
   Isolate) came out wide-looking light grey. In Dark every scrollbar is the thin dark pill: a light-grey thumb, no track.
   Light is untouched. */
html.vireo-lite body.theme-dark, html.vireo-lite body.theme-dark * { scrollbar-color: rgba(255, 255, 255, 0.24) transparent; }
html.vireo-lite body.theme-dark ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.24) !important; }
/* v8.634.574: the AI key boxes are text boxes in Lite (build-lite.js), masked here, so no browser takes them for a login */
/* v8.634.575: Lite's mark is "sitta" without the "edit" (150 units wide): the welcome line's box to match, 1.513em x 150 / 82 */
html.vireo-lite .onboarding-card h1.welcome-line .app-mark-lockup.welcome-mark { width: 2.768em; }
html.vireo-lite .sitta-key-masked { -webkit-text-security: disc; text-security: disc; }
/* no drawn pill */
html.vireo-lite .custom-scroll-thumb { display: none !important; }
/* v8.634.572: Unused Words on - a word already in the draft is grey only, as Premiere's panel draws it (the panel doesn't draw
   styles.css's red strike; a browser does, and in Dark it read as red). The grey, the selection, search and narration colours
   and the "Already in your draft" tooltip stay. Both themes. */
html.vireo-lite .unused-words-content.cmp-show-used .word.already-used-word { text-decoration: 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: in styles.css since 523 (Sitta has it too); Lite's start card hides it */
body.lite-nofile #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: Sitta 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 Sitta'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; }

/* ==== v8.634.517 (Lite 1b, phones): the phone layout. lite/lite-phone.js puts "lite-phone" on <html> when the screen is
   phone-sized (and "lite-touch" wherever the finger is the pointer), and adds the timeline button, the bottom bar, the
   scrim, the selection handles and the menu. A computer never gets these classes, so nothing below touches it. ==== */
.lp-tl, .lp-bar, .lp-scrim { display: none; }
.lp-menu { display: none; position: fixed; z-index: 1800; background: #1C1C1E; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.35); overflow: hidden; white-space: nowrap; }
.lp-menu.lp-on { display: flex; }
.lp-menu > div { color: #FFFFFF !important; font-size: 15px; padding: 10px 14px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.lp-menu > div + div { border-left: 1px solid rgba(255,255,255,0.18); }
.lp-menu > div:active { background: rgba(255,255,255,0.14); }
.lp-handle { display: none; position: fixed; z-index: 1790; width: 28px; height: 28px; touch-action: none; }
.lp-handle.lp-on { display: block; }
.lp-handle i { position: absolute; left: 13px; width: 2px; height: 22px; background: #7C3AED; }
.lp-handle i::after { content: ""; position: absolute; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: #7C3AED; }
.lp-handle-start i { top: 6px; } .lp-handle-start i::after { top: -6px; }
.lp-handle-end i { top: 0; } .lp-handle-end i::after { bottom: -6px; }
html.lite-touch #draft-content, html.lite-touch #source-content, html.lite-touch #unused-words-content { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
/* a typing box under 16px makes an iPhone zoom in and stay zoomed */
html.lite-phone textarea, html.lite-phone input, html.lite-phone [contenteditable="true"] { font-size: 16px !important; }

html.lite-phone, html.lite-phone body { height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
html.lite-phone body { display: flex; flex-direction: column; }
/* the top bar: the menu, the timeline, Isolate and Export; the tool row under it */
html.lite-phone .toolbar { position: relative; z-index: 1700; flex-wrap: wrap; align-items: center; padding: calc(4px + env(safe-area-inset-top)) 6px 0 6px; row-gap: 0; column-gap: 4px; }
html.lite-phone .toolbar .brand-group { order: 1; flex: 0 0 auto; gap: 0 !important; }
html.lite-phone .toolbar #app-logo, html.lite-phone .lite-mark { display: none !important; }
html.lite-phone .lp-tl { order: 2; display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 10px; margin: 0 2px;
  border-radius: 8px; background: #1F1F1F; color: #F2F2F2 !important; font-size: 15px; font-weight: 600; cursor: pointer; -webkit-user-select: none; user-select: none; }
html.lite-phone .lp-tl svg { stroke: #A855F7; flex: 0 0 auto; }
html.lite-phone .lp-tl-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
html.lite-phone body.lite-nofile .lp-tl { visibility: hidden; }
html.lite-phone .toolbar .tools-right { order: 3; flex: 0 0 auto; }
html.lite-phone .toolbar .tools-right .stacked-btn { width: auto; min-width: 52px; margin-left: 2px; padding: 0 4px; }
html.lite-phone .toolbar .tools-right .btn-label { font-size: 9px; }
html.lite-phone .toolbar .tools-left { order: 4; flex: 1 0 100%; margin: 2px 0 0; height: 44px; justify-content: space-around; border-top: 1px solid #262626; }
html.lite-phone .toolbar .tools-left > div { margin-right: 0; }
html.lite-phone .toolbar .tools-left .divider { display: none; }
html.lite-phone .toolbar .icon-btn { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
/* the history (versions) menu: the phone's width */
html.lite-phone #history-menu { position: fixed !important; left: 8px !important; right: 8px !important; width: auto !important; top: var(--lp-top) !important; max-height: 60vh; overflow-y: auto; }
html.lite-phone #settings-menu { max-width: calc(100vw - 16px); }
/* the page under the bar */
html.lite-phone .workspace { position: relative; min-height: 0; }
html.lite-phone #sidebar-resize-handle, html.lite-phone #center-resize-handle, html.lite-phone #sidebar-sections-resize-handle,
html.lite-phone #btn-sidebar-toggle-inner, html.lite-phone #btn-draft-expand, html.lite-phone #btn-chat-expand, html.lite-phone #btn-broll-expand { display: none !important; }
html.lite-phone .editor-workspace { width: 100%; padding-bottom: var(--lp-bottom, 0px); }
html.lite-phone .editor-workspace > .column-header { padding: 6px 10px; }
html.lite-phone .column-header .panel-name, html.lite-phone .column-header .view-toggle, html.lite-phone .column-header .editor-label { display: none !important; }
/* v8.634.524 (too wide): a search field of a normal size, not the whole width */
html.lite-phone .column-header .search-container { flex: 0 1 auto; width: auto; max-width: none; }
html.lite-phone .column-header .search-wrapper { flex: 0 1 auto; width: min(58vw, 240px); max-width: none; box-sizing: border-box; }
html.lite-phone .column-center { width: 100% !important; flex: 1 1 auto !important; border-right: none !important; }
html.lite-phone #draft-content, html.lite-phone #source-content { -webkit-overflow-scrolling: touch; }
/* the start screen: only the menu and the card */
html.lite-phone body.lite-nofile .toolbar .tools-left, html.lite-phone body.lite-nofile .toolbar .tools-right, html.lite-phone body.lite-nofile .editor-workspace > .column-header { display: none !important; }
/* the sidebar slides in from the left */
html.lite-phone #sidebar { position: fixed !important; top: 0; bottom: 0; left: 0; width: min(86vw, 330px) !important; z-index: 2000;
  transform: translateX(-104%); transition: transform 0.22s ease; padding-top: env(safe-area-inset-top); box-shadow: 4px 0 24px rgba(0,0,0,0.35); }
html.lite-phone.lp-left-open #sidebar { transform: none; }
/* the right panel slides in from the right, between the top bar and the bottom bar */
html.lite-phone .column-right { position: fixed !important; left: 0; right: 0; top: var(--lp-top, 96px); bottom: var(--lp-bottom, 56px); width: auto !important;
  flex: none !important; z-index: 1500; transform: translateX(104%); transition: transform 0.22s ease; box-shadow: -4px 0 24px rgba(0,0,0,0.18); }
html.lite-phone.lp-right-open .column-right { transform: none; }
html.lite-phone.lp-kb .column-right { bottom: var(--lp-kb, 0px); }
/* the dimmed script behind the sidebar */
html.lite-phone .lp-scrim { display: block; position: fixed; inset: 0; z-index: 1900; background: rgba(0,0,0,0.38); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
html.lite-phone.lp-left-open .lp-scrim { opacity: 1; pointer-events: auto; }
/* the bottom bar: Script and the four panels */
html.lite-phone body:not(.lite-nofile) .lp-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1600; background: #FFFFFF;
  border-top: 1px solid #E5E7EB; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
html.lite-phone.lp-kb .lp-bar { display: none !important; }
html.lite-phone .lp-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; color: #8A8A8A !important;
  font-size: 10px; font-weight: 600; cursor: pointer; -webkit-user-select: none; user-select: none; }
html.lite-phone .lp-tab svg { stroke: #8A8A8A; }
html.lite-phone .lp-tab.lp-tab-on { color: #7C3AED !important; }
html.lite-phone .lp-tab.lp-tab-on svg { stroke: #7C3AED; }
/* dialogs and cards: the phone's width */
html.lite-phone .modal-content { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; box-sizing: border-box; }
html.lite-phone #hint-modal .modal-content { max-height: none; overflow: visible; }
html.lite-phone .onboarding-card.lite-start { max-width: calc(100vw - 32px); padding: 36px 22px 30px; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { html.lite-phone #sidebar, html.lite-phone .column-right, html.lite-phone .lp-scrim { transition: none; } }
/* v8.634.518 (Lite 1b, phones): Notes, Compare and Shots open filling the right panel; the ^ at their foot takes them to
   half (the chat shows under them) and back, and dragging it sets any height down to a thin strip, never closed (closing
   is the AI Chat tab). lite-phone.js sets --lp-ph. */
html.lite-phone .unused-words-panel.open { top: 0 !important; bottom: auto !important; height: var(--lp-ph, 100%) !important; max-height: none !important; min-height: 0 !important; }
html.lite-phone .unused-words-panel:not(.lp-ph-full) { border-radius: 0 0 18px 18px !important; }
html.lite-phone .unused-words-panel.lp-ph-full { border-radius: 0 !important; box-shadow: none !important; }
html.lite-phone .unused-words-panel .shelf-drag-handle, html.lite-phone .unused-words-panel.lp-ph-full .unused-words-fade { display: none !important; }
html.lite-phone .drawer-collapse-handle { width: 56px; height: 26px; border-radius: 13px; bottom: 10px; touch-action: none; }
/* no mouse to hover with on a touch screen: the hover shade isn't drawn */
html.lite-touch .word.hover-preview-word:not(.selected-word):not(.highlighted-word) { background-color: transparent !important; }
html.lite-phone #broll-shelf-panel.unused-words-panel.open { max-height: none !important; min-height: 0 !important; }
/* v8.634.518: Notes, Compare and Shots slide (in Lite only: Premiere's panel couldn't animate them), and change height smoothly on a phone */
html.vireo-lite .unused-words-panel { transition: transform 0.25s ease; }
html.lite-phone .unused-words-panel { transition: transform 0.25s ease, height 0.22s ease; }
html.lite-phone .unused-words-panel.lp-ph-drag { transition: transform 0.25s ease; }
@media (prefers-reduced-motion: reduce) { html.vireo-lite .unused-words-panel, html.lite-phone .unused-words-panel { transition: none; } }

/* v8.634.521: the single spacing that was here (520, Lite first) is now in styles.css for Sitta and Sitta Lite alike. */

/* v8.634.525 - Account: in the menu on a phone (lite-app.js puts it under API Settings), in the sidebar on a computer; never both */
#btn-open-account { display: none !important; }
html.lite-phone #btn-open-account { display: flex !important; }
html.lite-phone #btn-user-profile { display: none !important; }