:root {

    --bg-dark: #141414; 
    --bg-panel: #1E1E1E;
    --bg-white: #FFFFFF;

    --text-light: #C8C8C8;
    --text-dark: #2D2D2D;
    --text-muted: #888888;

    --accent-purple: #A855F7; 
    --tool-yellow: #FACC15;

    --highlight-yellow: #FEF08A; 
    --search-match: #B2EBF2; 
    --search-active: #22D3EE;

    --border-color: #2A2A2A;
    --border-light: #E5E7EB;
}

body, html {
    margin: 0; padding: 0; height: 100vh;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: var(--bg-dark) !important; 
    color: var(--text-light) !important;
    display: flex; flex-direction: column; overflow: hidden;
}

::selection { background-color: #A7C7E7 !important; color: #000 !important; }
textarea::selection, input::selection { background-color: #A7C7E7 !important; color: #000 !important; }

.text-content, .chat-feed { -ms-overflow-style: none !important; scrollbar-width: none !important; }
.text-content::-webkit-scrollbar, .chat-feed::-webkit-scrollbar { display: none !important; width: 0 !important; background: transparent !important; }

.custom-scroll-wrapper { width: 100%; }
.custom-scroll-thumb {
    position: fixed; width: 16px; border-radius: 8px;
    background: linear-gradient(to right, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.5) 65%, rgba(255,255,255,0) 100%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    cursor: pointer; display: none; z-index: 500;
}
.custom-scroll-thumb.dragging { opacity: 0.7; }

body.hint-open .custom-scroll-thumb,
body.modal-open .custom-scroll-thumb,
body.menu-open .custom-scroll-thumb {
    visibility: hidden !important;
}

.column-left::-webkit-scrollbar, .debug-panel::-webkit-scrollbar { width: 14px; height: 14px; }
.column-left::-webkit-scrollbar-track { background: var(--bg-dark); }
.column-left::-webkit-scrollbar-thumb { background-color: #333; border-radius: 7px; border: 3px solid var(--bg-dark); }
.column-left::-webkit-scrollbar-thumb:hover { background-color: #555; }
.debug-panel::-webkit-scrollbar-track { background: #0A0A0A; }
.debug-panel::-webkit-scrollbar-thumb { background-color: #333; border-radius: 7px; border: 3px solid #0A0A0A; }
.debug-panel::-webkit-scrollbar-thumb:hover { background-color: #555; }

.context-menu {
    position: fixed;
    background-color: #1E1E1E !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    z-index: 3000;
    min-width: 120px;
    display: flex;
    flex-direction: column;
}
.context-menu-item {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light) !important;
    border-radius: 4px;
    cursor: pointer;
}
.context-menu-item:hover { background-color: rgba(255, 255, 255, 0.1) !important; }
.context-menu-item.danger { color: #EF4444 !important; }
.context-menu-item.danger:hover { background-color: rgba(239, 68, 68, 0.15) !important; }

.context-menu-item.disabled { opacity: 0.35 !important; cursor: not-allowed !important; }
.context-menu-item.disabled:hover { background-color: transparent !important; }

.dropdown-menu {
    position: absolute;
    top: 100%; left: 0; margin-top: 12px;
    background-color: #1E1E1E !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    z-index: 4000;
    min-width: 160px;
    display: flex;
    flex-direction: column;
}

#broll-menu::before { display: none !important; }
.dropdown-item {

    display: flex; align-items: center;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light) !important;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
}
.dropdown-item:hover { background-color: rgba(255, 255, 255, 0.1) !important; }
.dropdown-item.danger { color: #EF4444 !important; }
.dropdown-item.danger:hover { background-color: rgba(239, 68, 68, 0.15) !important; }

.picker-list { display: flex; flex-direction: column; gap: 2px; }
.picker-item {
    padding: 10px 12px; border-radius: 6px; cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
}
.picker-item:hover { background-color: rgba(255, 255, 255, 0.08); }
.picker-item.disabled { cursor: not-allowed; opacity: 0.4; }
.picker-item-title { font-size: 13px; font-weight: 600; color: var(--text-light); }
.picker-item-sub { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

.up-menu {
    top: auto;
    bottom: calc(100% + 5px);
    left: 0;
    min-width: 200px;
}

.up-menu::before {
    top: auto; bottom: -6px;
    border-left: none !important; border-top: none !important;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.model-picker-menu::before { display: none !important; }

.toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px; background-color: var(--bg-dark) !important; 
    border-bottom: 1px solid var(--border-color); flex-shrink: 0;

    position: relative; z-index: 600;
}

.logo { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 38px; }

.app-mark-lockup { height: 38px; width: auto; display: block; flex: 0 0 auto; overflow: visible; }
.app-mark-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.app-mark-lockup .wm-word { fill: #EDEAF2 !important; stroke: none !important; }
.app-mark-lockup .wm-bird { fill: currentColor !important; stroke: none !important; }
.app-mark-lockup .wm-halo path { fill: none !important; stroke: #8A5CF0 !important; stroke-linejoin: round; stroke-linecap: round; }

.wm-halo { opacity: 0; }
.logo.logo-busy-0 .wm-halo { opacity: 0.10; }
.logo.logo-busy-1 .wm-halo { opacity: 0.20; }
.logo.logo-busy-2 .wm-halo { opacity: 0.32; }
.logo.logo-busy-3 .wm-halo { opacity: 0.44; }
.logo.logo-busy-4 .wm-halo { opacity: 0.56; }
.logo.logo-busy-5 .wm-halo { opacity: 0.68; }
.logo.logo-busy-6 .wm-halo { opacity: 0.78; }
.logo.logo-busy-7 .wm-halo { opacity: 0.87; }
.logo.logo-busy-8 .wm-halo { opacity: 0.95; }
.logo.logo-busy-9 .wm-halo { opacity: 1; }
.logo.logo-blocked .wm-halo { opacity: 0; }

.logo { color: #9B87E0 !important; }

.logo svg { stroke: var(--accent-purple) !important; }

.logo.logo-busy-0 { color: hsl(271, 91%, 65.0%) !important; text-shadow: 0 0 3px hsla(271, 100%, 72%, 0.15) !important; }
.logo.logo-busy-1 { color: hsl(271, 91%, 65.7%) !important; text-shadow: 0 0 4px hsla(271, 100%, 72%, 0.18) !important; }
.logo.logo-busy-2 { color: hsl(271, 91%, 67.4%) !important; text-shadow: 0 0 6px hsla(271, 100%, 72%, 0.26) !important; }
.logo.logo-busy-3 { color: hsl(271, 91%, 69.9%) !important; text-shadow: 0 0 9px hsla(271, 100%, 72%, 0.37) !important; }
.logo.logo-busy-4 { color: hsl(271, 91%, 72.9%) !important; text-shadow: 0 0 12px hsla(271, 100%, 72%, 0.5) !important; }
.logo.logo-busy-5 { color: hsl(271, 91%, 76.1%) !important; text-shadow: 0 0 16px hsla(271, 100%, 72%, 0.65) !important; }
.logo.logo-busy-6 { color: hsl(271, 91%, 79.1%) !important; text-shadow: 0 0 19px hsla(271, 100%, 72%, 0.78) !important; }
.logo.logo-busy-7 { color: hsl(271, 91%, 81.6%) !important; text-shadow: 0 0 22px hsla(271, 100%, 72%, 0.89) !important; }
.logo.logo-busy-8 { color: hsl(271, 91%, 83.3%) !important; text-shadow: 0 0 24px hsla(271, 100%, 72%, 0.97) !important; }
.logo.logo-busy-9 { color: hsl(271, 91%, 84.0%) !important; text-shadow: 0 0 25px hsla(271, 100%, 72%, 1.0) !important; }
.logo.logo-blocked { color: hsl(271, 45%, 58%) !important; text-shadow: none !important; opacity: 0.6 !important; }

.tools-left { display: flex; align-items: center; margin-left: 32px; }
.tools-left > div { margin-right: 20px; }
.tools-left > .divider { margin-right: 20px; }
.tools-right { display: flex; align-items: center; justify-content: flex-end; }
.divider { width: 1px; height: 32px; background-color: var(--border-color); }

.icon-btn, .stacked-btn, .primary-btn { cursor: pointer; user-select: none; transition: opacity 0.2s ease; }
.icon-btn:hover, .stacked-btn:hover, .primary-btn:hover { opacity: 0.7; }
.icon-btn.disabled, .stacked-btn.disabled, .primary-btn.disabled { opacity: 0.3; pointer-events: none; }
.icon-btn svg, .stacked-btn svg { pointer-events: none; }

.icon-btn { display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 4px; }
.icon-btn svg { stroke: var(--text-light) !important; }

.tool-yellow svg { stroke: var(--text-light) !important; }

.icon-btn:hover svg,
.stacked-btn:hover svg { stroke: var(--accent-purple) !important; }
.icon-btn.tool-yellow:hover svg { stroke: var(--tool-yellow) !important; }

#btn-undo svg circle,
#btn-redo svg circle { stroke: #4A4A4A !important; }
#btn-undo:hover svg circle,
#btn-redo:hover svg circle { stroke: #9A9A9A !important; }
#btn-undo:hover svg,
#btn-redo:hover svg { stroke: var(--text-light) !important; }

#btn-gen-xml:hover .btn-label {
    color: var(--text-light) !important;
    opacity: 0.9;
    font-weight: 600;
}
#btn-gen-xml:hover svg { stroke: var(--accent-purple) !important; }

.icon-btn.active-tool { background-color: rgba(250, 204, 21, 0.15) !important; transform: scale(1.1); }
.icon-btn.active-tool svg,
.icon-btn.active-tool:hover svg { stroke: var(--tool-yellow) !important; }

.settings-wrapper { position: relative; display: flex; align-items: center; }
.history-wrapper { position: relative; display: flex; align-items: center; }
.history-menu {

    display: none; position: fixed; top: 100%; left: 0; margin-top: 0;
    background-color: #1E1E1E !important; border: 1px solid var(--border-color) !important;
    border-radius: 8px; padding: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5);

    z-index: 4000; min-width: 250px; flex-direction: column;
}
.history-menu-item {
    padding: 8px 12px; font-size: 12px; font-weight: 500; color: var(--text-light) !important;
    border-radius: 4px; cursor: pointer; text-align: left;
}
.history-menu-item:hover { background-color: rgba(255, 255, 255, 0.1) !important; }

.history-auto-item { opacity: 0.62; font-size: 11px; padding-left: 22px; }
.history-auto-item:hover { opacity: 0.9; }

.history-menu-item {
    position: relative;
    padding: 6px 10px 6px 22px !important;
    border-radius: 5px;
    font-size: 11px;
    color: #B4B1BC !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-when {
    font-size: 9px; color: #46424E !important; margin-top: 1px;
    white-space: nowrap;
}

.history-current { color: #D2CFDA !important; }
.history-current::before {
    content: ""; position: absolute; left: 10px; top: 11px;
    width: 3.5px; height: 3.5px; border-radius: 50%;
    background-color: var(--accent-purple) !important;
}
.history-auto-group {
    display: flex; justify-content: space-between; align-items: center;
    color: #6A6574 !important; font-size: 11px;
}
.history-count { font-size: 9px; color: #46424E !important; }
.history-back { color: #6A6574 !important; display: flex; gap: 6px; align-items: center; padding-left: 10px !important; }

.history-group-heading {
    padding: 9px 10px 3px; font-size: 9.5px; letter-spacing: 0.04em;
    color: #6A6574 !important;
}
.history-group-heading:first-child { padding-top: 4px; }
.history-why { float: right; font-size: 9px; color: #46424E !important; }
.history-auto-group:hover { opacity: 0.85; }
.history-divider { height: 1px; background-color: var(--border-color); margin: 4px 0; }

.stacked-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100px; margin-left: 16px; }
.stacked-btn svg { stroke: var(--text-light) !important; margin-bottom: 6px; }
.stacked-btn .btn-label { color: var(--text-light) !important; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9; white-space: nowrap; }

.stacked-btn-primary svg { stroke: var(--accent-purple) !important; }
.stacked-btn-primary .btn-label { color: var(--accent-purple) !important; opacity: 1; font-weight: 700; }

.offset-wrapper { display: flex; flex-direction: column; align-items: center; margin-left: 24px; }
.offset-wrapper label { font-size: 9px; color: var(--text-light) !important; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.7; margin-bottom: 4px; }
.offset-wrapper select { background-color: #1A1A1A !important; color: #FFF !important; border: 1px solid #444 !important; outline: none; font-size: 11px; cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Helvetica, sans-serif; padding: 2px 4px; border-radius: 4px; width: 75px; text-align: center; }

.workspace { display: flex; flex: 1; overflow: hidden; }

.column-left { 
    width: 240px; flex-shrink: 0; background-color: var(--bg-dark) !important; 
    border-right: 1px solid var(--border-color); display: flex; flex-direction: column; 
    position: relative; transition: width 0.2s ease; overflow: hidden; 
}
.column-left.collapsed { width: 52px; }
.column-left.collapsed .hide-on-collapse { display: none !important; }
.column-left.resizing { transition: none; }

.panel-resize-handle {
    flex-shrink: 0; width: 6px; cursor: col-resize; background-color: transparent;

    position: relative; z-index: 501;
}
.panel-resize-handle:hover, .panel-resize-handle.dragging { background-color: rgba(139, 92, 246, 0.35) !important; }
.column-left.collapsed + #sidebar-resize-handle { display: none; }
.panel-resize-handle-horizontal { width: auto; height: 6px; flex-shrink: 0; cursor: row-resize; }

.sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; font-size: 11px; font-weight: 500; color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: 0.5px;
}
.column-left.collapsed .sidebar-header { padding: 12px 0; justify-content: center; }
.panel-icon { stroke: var(--text-muted); }

.metadata-content { flex: 1; overflow-y: auto; padding: var(--spacing-md); }

.active-sequence-item { border-left: 4px solid var(--accent-purple) !important; background-color: rgba(168, 85, 247, 0.3) !important; color: #FFFFFF !important; font-weight: 500 !important; }
.active-sequence-item svg { stroke: #FFFFFF !important; }

.sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border-color); background-color: var(--bg-dark); display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; margin-top: auto; }
.column-left.collapsed .sidebar-footer { padding: 12px 0; align-items: center; }

.sidebar-footer-item { display: flex; align-items: center; padding: 8px 12px; font-size: 12px; font-weight: 500; color: var(--text-light) !important; cursor: pointer; border-radius: 6px; transition: background-color 0.2s ease; }
.sidebar-footer-item:hover { background-color: rgba(255, 255, 255, 0.05) !important; }
.sidebar-footer-item svg { stroke: var(--text-light) !important; opacity: 0.8; margin: 0; }
.sidebar-footer-item.icon-only { width: fit-content; padding: 8px; justify-content: center; margin-bottom: 4px; }
.column-left.collapsed .sidebar-footer-item.icon-only { margin: 0; margin-bottom: 8px; }

.sidebar-footer-item.user-item { gap: 10px; position: relative; overflow: visible; justify-content: flex-start; }
.column-left.collapsed .sidebar-footer-item.user-item { padding: 8px; justify-content: center; width: fit-content; }

.user-mark { width: 18px; height: 13px; flex-shrink: 0; margin-right: 8px; overflow: visible; }
.user-item { opacity: 0.55; }
.user-item:hover { opacity: 1; }
.user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
    font-size: 11px; font-weight: 400; letter-spacing: 0.02em; }

.debug-panel { height: 250px; min-height: 50px; background-color: #0A0A0A !important; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; transition: height 0.2s ease; overflow: hidden; }
.debug-panel:not(.minimized) {
    position: absolute; left: 0; right: 0; bottom: 58px; z-index: 55;
}
.debug-panel.minimized { height: 26px !important; }
.debug-header { background-color: #1A1A1A !important; color: #888 !important; font-size: 10px; text-transform: uppercase; padding: 6px 12px; font-weight: 700; letter-spacing: 1px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.debug-header:hover { background-color: #222 !important; color: #AAA !important; }
.debug-content { flex: 1; padding: 12px; overflow-y: auto; font-family: monospace; font-size: 11px; color: #00FF00 !important; line-height: 1.4; user-select: text !important; -webkit-user-select: text !important; cursor: text; }
.debug-copy-btn { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #666 !important; padding: 2px 6px; border-radius: 3px; cursor: pointer; }
.debug-copy-btn:hover { color: #FFF !important; background-color: #2A2A2A !important; }
.debug-content .err { color: #FF4444 !important; } .debug-content .info { color: #44AAFF !important; }

.unused-words-panel {
    position: absolute; top: 0; left: 0; right: 0; bottom: 140px; z-index: 200;
    display: flex; flex-direction: column; overflow: hidden;
    background-color: #FFFFFF !important;
    border-radius: 0 0 18px 18px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.32);
    transform: translateY(-100%);

    pointer-events: none;
}
.unused-words-panel.open { transform: translateY(0); pointer-events: auto; }

.unused-words-fade {
    position: absolute; bottom: 0; left: 0; right: 0; height: 44px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; flex-shrink: 0;
}
.drawer-collapse-handle {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 20px; border-radius: 10px; background-color: rgba(0,0,0,0.06) !important;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: #6B7280 !important; flex-shrink: 0; z-index: 1;
}
.drawer-collapse-handle:hover { background-color: rgba(0,0,0,0.12) !important; color: #1F2937 !important; }
.unused-words-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 16px; border-bottom: 1px solid var(--border-light); flex-shrink: 0;
}
.unused-words-title { font-size: 11px; font-weight: 600; color: #1F2937 !important; }
.compare-to-version-select {
    font-size: 11px; font-weight: 700; color: #1F2937 !important;
    background-color: #FFFFFF !important; border: 1px solid var(--border-light);
    border-radius: 4px; padding: 3px 6px; cursor: pointer; max-width: 60%;
}

.compare-to-version-wrapper { position: relative; display: inline-block; }
.compare-to-version-menu {
    position: absolute; top: 100%; left: 0; margin-top: 4px;
    background-color: #FFFFFF !important; border: 1px solid var(--border-light) !important;
    border-radius: 6px; padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 4000; min-width: 200px; max-height: 260px; overflow-y: auto;
    display: flex; flex-direction: column;
}
.compare-to-version-menu .picker-item-title { color: #1F2937 !important; font-size: 12px; font-weight: 600; }
.compare-to-version-menu .picker-item:hover { background-color: rgba(0,0,0,0.05) !important; }
.unused-words-toggle-label {
    display: flex; align-items: center; gap: 6px; font-size: 11px;
    color: var(--text-muted) !important; cursor: pointer; user-select: none;
}
.unused-words-content {
    flex: 1; overflow-y: auto; padding: 16px 20px 40px; font-size: 13px; line-height: 1.8;

    width: calc(100% + 17px);
    box-sizing: border-box;
}

.notes-scratch-note {
    padding: 5px 16px 6px;
    font-size: 9.5px; letter-spacing: .3px;
    color: #9CA3AF !important;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0; user-select: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.notes-textarea-wrapper {

    flex: 1; flex-direction: column; overflow: hidden; background-color: #FFFFFF !important;
    display: flex; position: relative;
}
.notes-textarea {
    flex: 1; padding: 12px 16px; font-size: 13px; line-height: 1.65;
    box-sizing: border-box; border: none !important;
    outline: none !important; box-shadow: none !important;
    resize: none; font-family: inherit; color: #111 !important;
    background-color: #FFFFFF !important; user-select: text !important;
    -webkit-user-select: text !important;

    caret-color: #111 !important;

    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 0 !important;

    width: 100%;
    overflow-y: auto;
}
.notes-textarea:focus { border: none !important; outline: none !important; box-shadow: none !important; }
.notes-textarea::placeholder { color: var(--text-muted) !important; }
.notes-textarea::selection { background-color: #A7C7E7 !important; color: #000 !important; }

.unused-words-speaker {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--accent-purple) !important; margin: 14px 0 4px 0;
}
.unused-words-line { margin: 0 0 6px 0; color: #1F2937; }

.unused-words-content.cmp-show-used .word.already-used-word { color: #D1D5DB !important; text-decoration: line-through; text-decoration-color: #EF4444; text-decoration-thickness: 1.5px; }

.unused-words-content.cmp-show-used .word.already-used-word.selected-word,
.unused-words-content.cmp-show-used .word.already-used-word.highlighted-word,
.unused-words-content.cmp-show-used .word.already-used-word.search-match,
.unused-words-content.cmp-show-used .word.already-used-word.active-search-match { color: #000 !important; }
.unused-words-content.cmp-show-used .word.already-used-word.vo-word { color: #C4A8F0 !important; }
.unused-words-content.cmp-show-used .word.already-used-word.vo-word.manual-vo-word { color: #4C1D95 !important; }

.chat-panel-header {
    display: flex; align-items: center; padding: 3px 12px;
    background-color: #FFFFFF !important; border-bottom: 1px solid var(--border-light);
    flex-shrink: 0; position: relative; min-height: 0;
}

.wf-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .4px;

    color: #A855F7 !important;

    padding: 4px 12px; margin-left: 28px;
    border-radius: 12px;
    background-color: rgba(168, 85, 247, 0.10);
    border: 1px solid rgba(168, 85, 247, 0.30);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 210px;
    user-select: none;
    cursor: pointer;
}

.wf-badge:hover {
    background-color: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.55);
}

.wf-badge::after {
    content: "\00d7"; margin-left: 2px; opacity: 0;
    font-size: 12px; line-height: 1; font-weight: 700;
}
.wf-badge:hover::after { opacity: .75; }

.wf-badge.wf-badge-arming,
.wf-badge.wf-badge-arming.wf-badge-live {
    color: #4B5563 !important;
    background-color: rgba(107, 114, 128, 0.14);
    border-color: rgba(107, 114, 128, 0.45);
}
.wf-badge.wf-badge-arming::before,
.wf-badge.wf-badge-arming.wf-badge-live::before { background-color: #6B7280; }
.wf-badge.wf-badge-arming::after { opacity: .8; }
.wf-badge.wf-badge-arming:hover,
.wf-badge.wf-badge-arming.wf-badge-live:hover {
    background-color: rgba(107, 114, 128, 0.22);
    border-color: rgba(107, 114, 128, 0.7);
}
.wf-badge::before {
    content: ""; flex-shrink: 0;
    width: 5px; height: 5px; border-radius: 50%;
    background-color: #A855F7;
}

.wf-badge.wf-badge-live { color: #0D9488 !important; background-color: rgba(13, 148, 136, 0.10); border-color: rgba(13, 148, 136, 0.30); }
.wf-badge.wf-badge-live:hover { background-color: rgba(13, 148, 136, 0.18); border-color: rgba(13, 148, 136, 0.55); }
.wf-badge.wf-badge-live::before { background-color: #0D9488; }

.rules-tab {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; color: var(--text-muted) !important;
    cursor: pointer; padding: 3px 8px; border-radius: 5px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.rules-tab:hover, .rules-tab.open { background-color: rgba(139, 92, 246, 0.08) !important; color: var(--accent-purple) !important; }

.chat-search-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-left: auto; border-radius: 5px;
    color: var(--text-muted) !important; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.chat-search-toggle-btn svg { stroke: var(--text-muted) !important; fill: none !important; }

.panel-expand-btn {
    position: absolute; top: 4px; right: 10px; z-index: 400;
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 20px; border-radius: 5px;
    cursor: pointer;
    background-color: rgba(255,255,255,0.9) !important;
}

.chat-panel-header { padding-right: 38px !important; }
.unused-words-header { padding-right: 38px !important; }
.panel-expand-btn svg { stroke: var(--text-muted) !important; fill: none !important; }
.panel-expand-btn:hover { background-color: rgba(139, 92, 246, 0.08) !important; }
.panel-expand-btn:hover svg, .panel-expand-btn.active svg { stroke: var(--accent-purple) !important; }
.panel-expand-btn.active { background-color: rgba(139, 92, 246, 0.08) !important; }

.editor-columns.ai-expanded .column-center { display: none !important; }
.editor-columns.ai-expanded .column-right { flex: 1 1 100% !important; }
.chat-search-toggle-btn svg circle, .chat-search-toggle-btn svg line { fill: none !important; }
.chat-search-toggle-btn:hover, .chat-search-toggle-btn.active {
    background-color: rgba(139, 92, 246, 0.08) !important; color: var(--accent-purple) !important;
}
.chat-search-toggle-btn:hover svg, .chat-search-toggle-btn.active svg { stroke: var(--accent-purple) !important; }
.chat-search-bar {
    display: flex; align-items: center; gap: 6px;
    background-color: #FFFFFF !important; padding: 4px 6px 4px 10px;
    border-radius: 6px; border: 1px solid #D1D5DB !important;
    position: absolute; right: 12px; top: 32px; z-index: 20;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.chat-search-bar:focus-within {
    border-color: var(--accent-purple) !important;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2) !important;
}
.chat-search-bar input {
    -webkit-appearance: none !important; appearance: none !important;
    border: none !important; background: transparent !important; color: #1F2937 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; width: 160px; outline: none;
    padding: 2px 4px !important; caret-color: #1F2937 !important; user-select: text !important; -webkit-user-select: text !important;
}
.chat-search-bar input::placeholder { color: #9CA3AF !important; }

.chat-search-match { background-color: #FEF3C7 !important; color: #000 !important; border-radius: 2px; }
.chat-search-match.active-chat-search-match { background-color: #FCD34D !important; }

.rules-drawer {
    position: absolute; top: 26px; left: 0; right: 0; z-index: 60;
    background-color: #FFFFFF !important; border-bottom: 1px solid var(--border-light);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    max-height: 0; overflow: hidden;

}

.rules-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted) !important;
}

.wf-go {
    flex-shrink: 0;
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
    color: var(--accent-purple) !important;
    background-color: transparent !important;
    border: 1px solid var(--accent-purple);
    border-radius: 4px; padding: 3px 11px; margin-right: 8px;
    cursor: pointer;
    -webkit-user-select: none; user-select: none;
}
.wf-go:hover {
    background-color: var(--accent-purple) !important;
    color: #FFFFFF !important;
}
.wf-go.running {
    background-color: transparent !important;
    color: #9CA3AF !important;
    border: 1px solid #E5E7EB;
    padding: 3px 11px;
}
.wf-go.running:hover { color: #DC2626 !important; border-color: #FCA5A5; }

.rule-row.wf-running { background-color: #F5F3FF !important; }
.rule-row.wf-running .rule-row-text { color: #6D28D9 !important; font-weight: 700; }
.wf-blurb {
    font-size: 11px; color: #9CA3AF !important; line-height: 1.45;
    padding: 2px 0 8px;
}

.wf-opt {
    display: flex; align-items: center; justify-content: space-between;

    padding: 3px 16px; cursor: pointer; font-size: 11px;
    color: #374151 !important;
}
.wf-opt:hover { background-color: #FAFAFA !important; }
.wf-opt-label { flex: 1; margin-right: 10px; line-height: 1.4; }
.wf-opt-toggle {
    flex-shrink: 0; width: 22px; height: 13px; border-radius: 7px; position: relative;
    background-color: #E5E7EB !important; cursor: pointer;
}
.wf-opt-toggle::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 9px; height: 9px; border-radius: 50%;
    background-color: #FFFFFF !important;
    transition: left 0.15s ease;
}
.wf-opt-toggle.on { background-color: var(--accent-purple) !important; }
.wf-opt-toggle.on::after { left: 11px; }

.wf-note-wrap { padding: 10px 0 4px; border-top: 1px solid #F3F4F6; margin-top: 8px; }
.wf-note-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.wf-note-label {
    font-size: 9px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
    color: #9CA3AF !important;
}

.wf-note-save {
    font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--accent-purple) !important;
    border: 1px solid var(--border-light);
    border-radius: 4px; padding: 3px 9px; cursor: pointer;
    -webkit-user-select: none; user-select: none;
}
.wf-note-save:hover { background-color: var(--accent-purple) !important; color: #FFFFFF !important; border-color: var(--accent-purple); }
.wf-note-save.done { color: #059669 !important; border-color: #A7F3D0; background-color: #ECFDF5 !important; }

.just-inserted {
    background-color: rgba(168, 85, 247, 0.10) !important;
    box-shadow: inset 3px 0 0 0 #A855F7;
    border-radius: 3px;
}

.script-length-miss { color: #92400E !important; }
.script-length-fix {
    display: inline-block; margin-top: 8px;
    padding: 4px 12px; border-radius: 12px;
    background-color: rgba(146, 64, 14, 0.10);
    border: 1px solid rgba(146, 64, 14, 0.35);
    color: #92400E !important;
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    cursor: pointer; user-select: none;
}
.script-length-fix:hover { background-color: rgba(146, 64, 14, 0.18); }

.script-length-note {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.07);
    font-size: 10px; letter-spacing: .2px;
    color: #9CA3AF !important;
    user-select: none;
}

.beats-textarea {
    flex: 1; min-height: 0; width: 100%; box-sizing: border-box;
    -webkit-appearance: none !important; appearance: none !important;
    background-color: #FFFFFF !important; color: #1F2937 !important;
    border: none !important; outline: none !important; resize: none;
    padding: 12px 16px; font-size: 12px; line-height: 1.65;
    font-family: ui-monospace, Menlo, monospace;
    overflow-y: auto;
    padding-bottom: 40px;
}

.wf-beats {
    width: 100%; box-sizing: border-box; height: 260px; overflow-y: auto;
    -webkit-appearance: none !important; appearance: none !important;
    background-color: #FFFFFF !important; color: #1F2937 !important;
    border: 1px solid #E5E7EB !important; border-radius: 5px;
    padding: 8px 10px; font-size: 11px; line-height: 1.6;
    font-family: ui-monospace, Menlo, monospace;
    outline: none !important; resize: none;
}
.wf-beats:focus { border-color: var(--accent-purple) !important; }

.wf-note {
    width: 100%; box-sizing: border-box; height: 150px; overflow-y: auto;
    -webkit-appearance: none !important; appearance: none !important;
    background-color: #FFFFFF !important; color: #1F2937 !important;
    border: 1px solid #E5E7EB !important; border-radius: 5px;
    padding: 7px 9px; font-size: 11px; font-family: inherit;
    outline: none !important; resize: none;
}
.wf-note:focus { border-color: var(--accent-purple) !important; }

.rules-suspended-note {
    padding: 10px 16px; font-size: 10px; line-height: 1.5;
    color: #92400E !important; background-color: #FFFBEB !important;
    border-top: 1px solid #FDE68A;
}
.rule-row.suspended { opacity: 0.45; }

.rule-row.wf-blocked { opacity: 0.42; }
.rule-row.wf-blocked .rule-row-text { color: #9CA3AF !important; }
.rule-row.wf-blocked .rule-expand-icon { opacity: 0.5; }

.modal-content.pro-modal { align-items: center; text-align: center; padding: 32px 26px; gap: 0; }

.modal-content.pro-modal::before {
    content: "PRO";
    background-color: var(--accent-purple) !important; color: #FFFFFF !important;
    font-size: 9px; font-weight: 700; letter-spacing: 0.09em;
    padding: 3px 9px; border-radius: 3px; margin-bottom: 16px;
}
.modal-content.pro-modal #generic-modal-title {
    font-size: 20px; font-weight: 700; letter-spacing: -0.3px;
    color: #F5F3F8 !important; margin: 0;
}
.modal-content.pro-modal #generic-modal-desc {
    font-size: 13px; color: var(--text-muted) !important;
    margin: 6px 0 0; background: transparent !important; padding: 0; border: none !important;
}
.modal-content.pro-modal .modal-actions {

    width: 100%; margin-top: 24px !important; flex-direction: column; align-items: center; gap: 0;
}
.modal-content.pro-modal .modal-actions .primary-btn {
    width: 100%; margin: 0; padding: 11px; font-size: 13px; border-radius: 6px;
}

.modal-content.pro-modal .modal-actions .primary-btn.pro-modal-close {
    background-color: transparent !important; border: none !important;
    color: var(--text-muted) !important; font-size: 12px; font-weight: 500;
    margin-top: 13px; padding: 0;
}

.modal-content.pro-modal .modal-actions .primary-btn.pro-modal-key {
    background-color: transparent !important; border: none !important;
    color: var(--text-muted) !important; font-size: 12px; font-weight: 500;
    margin-top: 12px; padding: 0;
}
.modal-content.pro-modal .modal-actions .primary-btn.pro-modal-key:hover { color: var(--accent-purple) !important; }

.pro-card-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 24px; box-sizing: border-box; min-height: 260px;

    flex: 1 1 auto;
}

.chat-feed.pro-locked-feed { padding-bottom: 32px !important; }
.pro-card {
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-light) !important; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 40px 30px; width: 100%; max-width: 340px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.pro-card-badge {
    background-color: var(--accent-purple) !important; color: #FFFFFF !important;
    font-size: 9px; font-weight: 700; letter-spacing: 0.09em;
    padding: 3px 9px; border-radius: 3px; margin-bottom: 18px;
}
.pro-card-eyebrow { font-size: 15px; font-weight: 600; color: var(--text-muted) !important; }
.pro-card-title {
    font-size: 24px; font-weight: 700; letter-spacing: -0.5px;

    color: var(--text-dark) !important; margin: 2px 0 0;
}

.pro-card-btn.attn { background-color: #C084FC !important; }

.chat-dock textarea[readonly] { opacity: 0.55; cursor: pointer; }

.pro-card-btn {
    width: 100%; box-sizing: border-box; margin-top: 28px;
    padding: 12px 24px; border-radius: 6px; cursor: pointer;
    font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
    background-color: var(--accent-purple) !important; color: #FFFFFF !important;
}

.pro-card-key { margin-top: 12px; font-size: 12px; color: var(--text-muted) !important; cursor: pointer; }
.pro-card-key:hover { color: var(--accent-purple) !important; }

.pro-badge {
    display: inline-block; flex-shrink: 0;
    margin-left: 8px; padding: 1px 6px; border-radius: 3px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
    background-color: var(--accent-purple) !important;
    color: #FFFFFF !important;
}

.rule-row.wf-blocked .pro-badge { opacity: 1; }

.rules-tab .pro-badge { margin-left: 0; font-size: 8px; padding: 1px 5px; }

.chat-age {
    float: right; margin-left: 8px;
    font-size: 9px; font-weight: 400; letter-spacing: 0.02em;
    color: var(--text-muted) !important; opacity: 0.5;
}

.wf-live-only-note {
    padding: 8px 16px; font-size: 11px; line-height: 1.45;
    color: var(--text-muted) !important;
    background-color: #FAFAFA !important;
    border-bottom: 1px solid #F3F4F6;
}
.wf-go.blocked {

    background-color: transparent !important;
    border: 1px solid var(--border-color); padding: 3px 11px;
    color: var(--text-muted) !important;
    opacity: 0.6; cursor: default;
}
.wf-go.blocked:hover {
    background-color: transparent !important;
    color: var(--text-muted) !important;
}

.rule-row-toggle.blocked { opacity: 0.35; cursor: default; }

.rules-scope-tabs { display: flex; padding: 0 16px 8px; }
.rules-scope-tab { margin-right: 4px; }
.rules-scope-tab:last-child { margin-right: 0; }

.drawer-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
    color: #9CA3AF !important; cursor: pointer;
    padding: 3px 9px; border-radius: 5px; margin-right: 4px;
    -webkit-user-select: none; user-select: none;
}
.drawer-title:hover { background-color: #FAFAFA !important; }
.drawer-title.active {
    color: var(--accent-purple) !important;
    background-color: rgba(139, 92, 246, 0.1) !important;
}
.rules-scope-tab {
    font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: normal;
    padding: 4px 10px; border-radius: 5px; cursor: pointer; color: var(--text-muted) !important;
}
.rules-scope-tab.active { color: var(--accent-purple) !important; background-color: rgba(139, 92, 246, 0.1) !important; }
.rules-scope-tab:hover:not(.active) { background-color: #F3F4F6 !important; }
.rule-assistant-btn {
    display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    text-transform: none; letter-spacing: normal; color: var(--accent-purple) !important;
    cursor: pointer; padding: 3px 8px; border-radius: 5px;
}
.rule-assistant-btn:hover { background-color: rgba(139, 92, 246, 0.08) !important; }
.rule-assistant-btn svg { stroke: var(--accent-purple); }

.rules-drawer-header, .rules-scope-tabs, .add-rule-btn { flex-shrink: 0; }

.rules-drawer.open { max-height: var(--rules-max, 360px); height: var(--rules-h, auto); overflow: hidden; display: flex; flex-direction: column; }
.rules-list {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    width: calc(100% + 17px);
    padding-right: 17px;

    padding-bottom: 34px;
    box-sizing: border-box;
}

.rules-list > * { flex-shrink: 0; }

.rules-list-fade {
    position: absolute; left: 0; right: 0; bottom: 36px; height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; z-index: 2;
}

.rules-section-head {
    padding: 10px 16px 4px 16px;
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase;
    color: #9CA3AF !important;
    background-color: #FCFCFD !important;
    border-top: 1px solid #F3F4F6;
    -webkit-user-select: none; user-select: none;
}

.rule-row.workflow .rule-row-text { font-weight: 600; }
.rule-row.workflow.running { background-color: #F5F3FF !important; }
.rule-row-stage {
    flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
    color: #7C3AED !important; margin-right: 8px;
    text-transform: uppercase;
}

.rule-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;

    padding: 3px 16px; font-size: 12px; color: #1F2937 !important;
    border-top: 1px solid #F3F4F6; cursor: pointer;
}
.rule-row.disabled .rule-row-text { color: #9CA3AF !important; text-decoration: line-through; }
.rule-row:hover { background-color: #FAFAFA !important; }
.rule-row-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule-row-toggle {
    flex-shrink: 0; width: 26px; height: 15px; border-radius: 8px; position: relative;
    background-color: #E5E7EB !important; cursor: pointer;
}
.rule-row-toggle.on { background-color: var(--accent-purple) !important; }
.rule-row-toggle::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
    border-radius: 50%; background-color: #FFFFFF !important; transition: left 0.15s ease;
}
.rule-row-toggle.on::after { left: 13px; }
.rule-expand-icon { flex-shrink: 0; color: var(--text-muted) !important; font-size: 10px; padding: 2px 4px; }
.rule-expand-icon:hover { color: var(--accent-purple) !important; }

.rule-row-expanded { padding: 8px 16px 12px 16px; background-color: #FAFAFA !important; border-top: 1px solid #F3F4F6; }

.rule-name-input {
    width: 100%; box-sizing: border-box;
    font-family: inherit; font-size: 12px; font-weight: 600;
    color: #1F2937 !important; background-color: #FFFFFF !important;
    border: none; border-radius: 6px; padding: 8px; margin-bottom: 6px;
    outline: none; -webkit-appearance: none; appearance: none;
}
.rule-name-input:focus { box-shadow: none; }

.rule-row-text.named { font-weight: 400; }

.rule-row-text.named.wf-headline { font-weight: 600; color: #111827 !important; }

.rule-edit-textarea {
    width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical;
    font-family: inherit; font-size: 12px; color: #1F2937 !important;
    background-color: #FFFFFF !important; border: none;
    border-radius: 6px; padding: 8px; margin-bottom: 8px;
    outline: none;
    -webkit-appearance: none; appearance: none;
}

.rule-edit-textarea:focus { box-shadow: none; }
.rule-row-actions { display: flex; gap: 8px; justify-content: flex-end; }
.rule-action-btn {
    font-size: 11px; font-weight: 600; cursor: pointer; padding: 4px 10px;
    border-radius: 5px; color: var(--accent-purple) !important; background-color: rgba(139, 92, 246, 0.08) !important;
}
.rule-action-btn.danger { color: #EF4444 !important; background-color: rgba(239, 68, 68, 0.08) !important; }
.rule-action-btn:hover { opacity: 0.75; }

.add-rule-btn {
    padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--accent-purple) !important;
    cursor: pointer; border-top: 1px solid #F3F4F6; text-align: center;
}
.add-rule-btn:hover { background-color: rgba(139, 92, 246, 0.05) !important; }

.api-setup-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; padding: 40px; box-sizing: border-box; }
.api-setup-card { background-color: #FFFFFF; border: 1px solid var(--border-light); border-radius: 12px; padding: 32px; width: 100%; max-width: 400px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 16px; }
.api-setup-header { display: flex; align-items: center; gap: 12px; color: var(--accent-purple); }
.api-setup-header h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-dark); }
.api-setup-card p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; }
.setup-input { background-color: #F9FAFB !important; border: 1px solid #D1D5DB !important; color: #1F2937 !important; padding: 10px 12px !important; border-radius: 6px !important; font-size: 14px !important; font-family: inherit !important; outline: none; -webkit-appearance: none !important; appearance: none !important; transition: border-color 0.2s ease; }
.setup-input:focus { border-color: var(--accent-purple) !important; }
.api-setup-card .primary-btn { margin-top: 8px; }

.editor-workspace { flex: 1; display: flex; flex-direction: column; overflow: hidden; background-color: var(--bg-white) !important; color: var(--text-dark) !important; position: relative; }
.editor-columns { display: flex; flex: 1; overflow: hidden; }
.column-center { flex: 1; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border-light); position: relative; }
.column-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

.editor-workspace > .column-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; border-bottom: 1px solid var(--border-light); background-color: var(--bg-white) !important; font-size: 11px; font-weight: 700; color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }

.view-toggle { position: relative; z-index: 201; }
.view-tab { cursor: pointer; opacity: 0.4; transition: opacity 0.2s ease, color 0.2s ease; display: inline-block; padding: 0 4px; }
.view-tab:hover { opacity: 0.8; }
.view-tab.active { opacity: 1; color: var(--accent-purple); }

.search-container { display: flex; align-items: center; gap: 8px; }

.panel-name {
    font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
    color: #9CA3AF !important;
    margin-right: 10px;
    user-select: none;
}

.editor-label { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-muted) !important; text-transform: uppercase; margin-left: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

.search-wrapper { 
    display: flex; align-items: center; gap: 6px; 
    background-color: #FFFFFF !important; padding: 2px 6px 2px 12px;
    border-radius: 6px; border: 1px solid #D1D5DB !important; 
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-wrapper:focus-within {
    border-color: var(--accent-purple) !important;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2) !important;
}
.search-wrapper input { 
    -webkit-appearance: none !important; appearance: none !important;
    border: none !important; background: transparent !important; color: #1F2937 !important; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; width: 140px; outline: none; 
    padding: 2px 4px !important; caret-color: #1F2937 !important; user-select: text !important; -webkit-user-select: text !important;

    font-weight: 400 !important;
}
.search-wrapper input:focus { background-color: #DBEAFE !important; border-radius: 4px !important; color: #000 !important; }
.search-wrapper input::placeholder { color: #9CA3AF !important; }

.search-nav-group { display: flex; gap: 4px; }
.search-nav { font-size: 10px; padding: 2px 6px; color: #6B7280 !important; font-weight: bold; background: #F3F4F6 !important; border-radius: 4px; border: 1px solid #E5E7EB !important; }
.search-nav:hover { color: #111 !important; background: #E5E7EB !important; }
.search-counter { font-size: 10px; color: #888 !important; margin-left: 4px; min-width: 30px; text-align: right; }

.text-content { 
    flex: 1; overflow-y: auto; overflow-x: hidden !important;
    padding: 40px 60px 60px 60px; 
    font-size: 16px; color: #111 !important; position: relative; overflow-anchor: none; 

    width: calc(100% + 17px);
    box-sizing: border-box;
}
.text-content p { line-height: 1.8; margin-bottom: 1.2em; }

.text-content p.spacer-break { user-select: none; margin-bottom: 0; }

#draft-content p[data-cut-time] { position: relative; }

#draft-content p { position: relative; }

#draft-content .cut-time {
    position: absolute; left: -56px; top: 0; width: 46px;
    text-align: right; font-size: 9px; line-height: 28.8px; font-weight: 400; font-style: normal;
    letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
    color: #B4B4BC !important; background: none;
    pointer-events: none; user-select: none; -webkit-user-select: none;

    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-start;
}
#draft-content .cut-time span { font-style: normal; color: #B4B4BC !important; pointer-events: none; }

#draft-content .cut-time span { display: block; flex: 0 0 auto; line-height: 28.8px; }

#draft-content .cut-time.cut-time-words { top: auto; }
#draft-content .cut-time .ct0::before { content: "0"; }
#draft-content .cut-time .ct1::before { content: "1"; }
#draft-content .cut-time .ct2::before { content: "2"; }
#draft-content .cut-time .ct3::before { content: "3"; }
#draft-content .cut-time .ct4::before { content: "4"; }
#draft-content .cut-time .ct5::before { content: "5"; }
#draft-content .cut-time .ct6::before { content: "6"; }
#draft-content .cut-time .ct7::before { content: "7"; }
#draft-content .cut-time .ct8::before { content: "8"; }
#draft-content .cut-time .ct9::before { content: "9"; }
#draft-content .cut-time .ctc::before { content: ":"; }
.inline-speaker { display: block; font-size: 11px; font-weight: 800; color: var(--accent-purple) !important; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 32px; margin-bottom: 8px; width: fit-content; cursor: text; }
.inline-speaker:hover { opacity: 0.8; }

.speaker-edit-input { font-size: 11px; font-weight: 800; color: var(--accent-purple) !important; text-transform: uppercase; letter-spacing: 1.5px; border: none !important; background-color: #FFFFFF !important; outline: none; padding: 3px 6px; margin: 0; width: 200px; font-family: inherit; border-radius: 4px; -webkit-appearance: none !important; appearance: none !important; }
.speaker-edit-input:focus { box-shadow: none; }

.broll-detail-card {
    position: fixed; z-index: 9999; width: 268px;
    background-color: #FFFFFF !important; color: #1F2937 !important;
    border: 1px solid #E5E7EB; border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    padding: 10px 12px 12px; font-size: 11px;
}
.broll-detail-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 9px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
    color: #9CA3AF !important; margin-bottom: 8px;
}
.broll-detail-close { cursor: pointer; font-size: 12px; color: #9CA3AF !important; }
.broll-detail-close:hover { color: #DC2626 !important; }

.broll-detail-what {
    font-size: 12px; font-weight: 600; line-height: 1.45;
    color: #1F2937 !important; margin-bottom: 8px;
}
.broll-detail-note {
    margin-top: 6px; padding: 6px 8px; border-radius: 6px;
    background-color: #F9FAFB !important;
    color: #4B5563 !important; line-height: 1.45;
}

.broll-detail-row {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 3px 0; border-top: 1px solid #F3F4F6;
}
.broll-detail-row span { color: #9CA3AF !important; margin-right: 10px; flex-shrink: 0; }
.broll-detail-row b { color: #1F2937 !important; font-weight: 600; text-align: right; word-break: break-word; }
.broll-detail-why {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid #F3F4F6;
    color: #6B7280 !important; line-height: 1.5; font-style: italic;
}

.broll-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background-color: #FFEDD5; color: #9A3412; border: 1px solid #FB923C;
    border-radius: 20px; padding: 2px 10px 2px 8px; font-size: 12px; font-weight: 600;
    cursor: pointer; position: relative; margin: 0 3px; vertical-align: middle; user-select: none;

    max-width: 240px;
}
.broll-pill-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.broll-pill:hover { background-color: #FDE0BE; }

.broll-pill-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #FB923C; flex-shrink: 0; margin-right: 5px; }
.broll-pill-popover {
    display: none; position: absolute; top: 26px; left: 0; z-index: 50;
    background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); padding: 12px 14px; width: 240px;
    font-size: 12px; font-weight: 400; color: var(--text-light); white-space: normal; cursor: default;
}
.broll-pill-popover.open { display: block; }
.broll-pill-popover .pop-row { margin-bottom: 6px; }
.broll-pill-popover .pop-row:last-child { margin-bottom: 0; }
.broll-pill-popover .pop-label { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; display: block; }
.broll-pill-popover .pop-actions { display: flex; gap: 10px; margin-top: 8px; }
.broll-pill-popover .pop-actions span { font-size: 11px; font-weight: 700; cursor: pointer; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.5px; color: #F87171; }
.broll-pill-popover .pop-actions span:hover { opacity: 1; }

.broll-dropdown-wrapper { position: relative; display: flex; align-items: center; }
.broll-dropdown-wrapper #broll-menu { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 12px; }
.history-menu-item.broll-status-line { opacity: 0.55; cursor: default; font-size: 10px; padding: 6px 12px 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.history-menu-item.disabled { opacity: 0.35 !important; cursor: not-allowed !important; pointer-events: none; }

#broll-progress-wrap { display: none !important; }

#broll-progress-wrap-unused {
    display: none; align-items: center; gap: 10px; padding: 6px 16px;
    background-color: #1E1E1E !important; border-bottom: 1px solid var(--border-color) !important;
    font-size: 11px; color: var(--text-light) !important;
}

#broll-progress-wrap.active { display: none !important; }
#broll-progress-track { flex: 1; height: 4px; border-radius: 2px; background-color: rgba(255,255,255,0.1); overflow: hidden; }
#broll-progress-fill { height: 100%; width: 0%; background-color: #FB923C; transition: width 0.25s ease; }
#broll-progress-label { white-space: nowrap; opacity: 0.85; flex-shrink: 0; }

#btn-cancel-broll-analysis {
    flex-shrink: 0; margin-left: 12px; cursor: pointer; color: #F87171 !important;
    font-weight: 600; padding: 3px 8px; border-radius: 5px;
}
#btn-cancel-broll-analysis:hover { background-color: rgba(248, 113, 113, 0.12) !important; }

.word.broll-washed {
    background-color: rgba(13, 148, 136, 0.16);

    padding: 2px 0.28em 2px 0;
    margin: 0 -0.28em 0 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    cursor: text;   
}
.word.broll-washed-multi { background-color: rgba(13, 148, 136, 0.22); }
.word.broll-washed:hover { background-color: rgba(13, 148, 136, 0.26); }
.word.broll-wash-start { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.word.broll-wash-end { border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding-right: 0; margin-right: 0; }

#broll-overlay-layer { position: fixed; pointer-events: none; z-index: 40; top: 0; left: 0; width: 0; height: 0; will-change: transform; }

.broll-overlay-bar { display: none !important; }
.broll-overlay-bar.broll-overlay-multi { background-color: transparent; }
.broll-overlay-bar.dragging { cursor: grabbing; background-color: rgba(13, 148, 136, 0.35); }
.word.broll-drop-target { background-color: rgba(251, 146, 60, 0.25) !important; border-radius: 2px; }
.broll-pill-popover.broll-overlay-popover {
    position: fixed; display: none; z-index: 300; min-width: 200px; max-width: 260px;
    background-color: #1E1E1E !important; border: 1px solid var(--border-color) !important;
    border-radius: 8px; padding: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); pointer-events: auto;
}
.broll-pill-popover.broll-overlay-popover.open { display: block; }
.broll-overlay-popover .pop-shot-option { padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 11px; }
.broll-overlay-popover .pop-shot-option:hover { background-color: rgba(255,255,255,0.1); }
.broll-overlay-popover .pop-shot-option.active { color: #FB923C !important; font-weight: 700; }

.word { cursor: text; }
.word.selected-word { background-color: #D1E8FF !important; color: #000 !important; }
.word.highlighted-word { background-color: var(--highlight-yellow) !important; color: #000 !important; }
.word.search-match { background-color: var(--search-match) !important; color: #000 !important; }
.word.active-search-match { background-color: var(--search-active) !important; color: #000 !important; border-bottom: 2px solid #000; }
.word.highlighted-word.selected-word { background-color: #B4D5FF !important; }

.word.hover-preview-word { background-color: rgba(0,0,0,0.08) !important; }

.word.vo-word { color: #C4A8F0 !important; font-style: italic; }
.vo-label {
    color: #A855F7 !important; font-weight: 700; font-size: 11px;
    letter-spacing: 0.5px; user-select: none; margin-right: 2px;
}

.word.vo-word.manual-vo-word { color: #4C1D95 !important; }
.vo-label.manual-vo-label { color: #3B0764 !important; }

.vo-edit-modal-textarea {
    width: 100%; height: 220px; box-sizing: border-box;
    padding: 14px 16px; font-size: 13px; line-height: 1.7;
    font-family: inherit; font-style: italic;
    color: #4C1D95 !important; background-color: #FFFFFF !important;
    border: 1px solid var(--border-light) !important;
    outline: none !important; box-shadow: none !important;
    resize: none; border-radius: 8px !important;
    -webkit-appearance: none !important; appearance: none !important;
    user-select: text !important; -webkit-user-select: text !important;
    caret-color: #4C1D95 !important;
}

.vo-edit-textarea {
    display: inline-block; vertical-align: bottom; font: inherit;
    font-style: italic; color: #4C1D95 !important; background-color: transparent !important;
    border: none !important; outline: none !important; box-shadow: none !important;
    resize: none; padding: 0; margin: 0;
    caret-color: #4C1D95 !important;

    height: 1.8em; line-height: 1.8;
    white-space: nowrap; overflow-x: auto; overflow-y: hidden;
    min-width: 40px; max-width: 100%;

    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 0 !important;
}

.text-view-textarea {
    width: 100%; height: 320px; box-sizing: border-box;
    padding: 14px 16px; font-size: 13px; line-height: 1.7;
    font-family: inherit; color: #111 !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-light) !important;
    outline: none !important; box-shadow: none !important;
    resize: none; border-radius: 8px !important;
    -webkit-appearance: none !important; appearance: none !important;
    user-select: text !important; -webkit-user-select: text !important;
    caret-color: #111 !important;
}

.custom-context-menu {
    position: fixed; background-color: #FFFFFF !important;
    border: 1px solid var(--border-light) !important; border-radius: 6px;
    padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); z-index: 5000;
    min-width: 160px; display: none; flex-direction: column;
}
.contextmenu-item {
    padding: 8px 12px; font-size: 12px; font-weight: 500;
    color: #1F2937 !important; border-radius: 4px; cursor: pointer;
    text-align: left;
}
.contextmenu-item:hover { background-color: rgba(0, 0, 0, 0.06) !important; }
.fake-caret { position: absolute; width: 2px; background-color: var(--accent-purple) !important; pointer-events: none; z-index: 10; overflow-anchor: none; }

#onboarding-container {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 50;
    width: 100%; padding: 40px !important; box-sizing: border-box;
    background-color: #FFFFFF !important;
}
.onboarding-card {
    background-color: #FFFFFF !important; border: 1px solid var(--border-light) !important; border-radius: 12px;
    padding: 56px 32px; width: 100%; max-width: 400px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; box-sizing: border-box;
}
.onboarding-card h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-muted) !important; }
.onboarding-card h1 { margin: 0 0 12px 0; font-weight: 700; letter-spacing: -0.5px; font-size: 26px; color: var(--text-dark) !important; }
.onboarding-card p { margin: 0; font-size: 13px; color: var(--text-muted) !important; line-height: 1.5; }
.onboarding-card .primary-btn { margin-top: 28px; }
.primary-btn { display: inline-block; background-color: var(--accent-purple) !important; color: white !important; padding: 12px 24px; border-radius: 6px; font-weight: 600; width: 100%; margin-top: 24px; letter-spacing: 0.5px; box-sizing: border-box; text-align: center; cursor: pointer; }

.chat-feed { 
    flex: 1; 
    overflow-y: auto; 
    overflow-x: hidden !important; 
    padding: 32px 40px 100px 40px; 
    display: flex; 
    flex-direction: column; 
    scroll-behavior: smooth; 

    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: text;

    width: calc(100% + 17px);
    box-sizing: border-box;
}

.chat-welcome { margin: auto; text-align: center; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0.6; }

.suggested-prompts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 420px; margin-top: 4px; }
.suggested-prompt-chip {
    font-size: 12px; font-weight: 500; color: var(--text-muted) !important;
    background-color: #F3F4F6 !important; border: 1px solid var(--border-light) !important;
    border-radius: 14px; padding: 6px 14px; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.suggested-prompt-chip:hover {
    background-color: rgba(139, 92, 246, 0.1) !important;
    border-color: var(--accent-purple) !important;
    color: var(--accent-purple) !important;
}

.ai-reasoning-block {
    align-self: flex-start; max-width: 85%; margin-bottom: 6px;
}
.ai-reasoning-toggle {
    font-size: 11px; font-weight: 600; color: #9CA3AF !important;
    cursor: pointer; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px;
    background-color: #F3F4F6 !important; border-radius: 8px;
}
.ai-reasoning-toggle:hover { color: var(--accent-purple) !important; }
.ai-reasoning-chevron { font-size: 8px; }
.ai-reasoning-content {
    font-size: 12px; font-style: italic; color: #6B7280 !important;
    padding: 8px 12px; margin-top: 4px; background-color: #FAFAFA !important;
    border-left: 2px solid #E5E7EB; line-height: 1.5;
}

.chat-message { 
    max-width: 85%; 
    font-size: 14.5px; 
    line-height: 1.6; 
    padding: 12px 18px; 
    border-radius: 12px; 
    position: relative; 
    color: #111; 
    margin-bottom: 16px;
    flex-shrink: 0;
    word-wrap: break-word; 
    word-break: break-word; 
    overflow-wrap: break-word;

    user-select: none !important;
    -webkit-user-select: none !important;
}
.chat-message::selection { background-color: #A7C7E7 !important; color: #000 !important; }

.ctok.chat-text-selected { background-color: #A7C7E7 !important; color: #000 !important; }
.msg-user { align-self: flex-end; background-color: #E5E7EB; border-bottom-right-radius: 4px; }
.msg-ai { align-self: flex-start; background-color: #FFFFFF; border: 1px solid var(--border-light); border-bottom-left-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.msg-loading { align-self: flex-start; background-color: transparent; color: var(--text-muted); font-style: italic; font-size: 13.5px; padding: 4px 18px; }

.ai-message-actions { display: flex; margin-top: 12px; border-top: 1px solid var(--border-light); padding-top: 8px; user-select: none !important; -webkit-user-select: none !important; }
.ai-message-actions .ai-btn { margin-right: 8px; }
.ai-message-actions .ai-btn:last-child { margin-right: 0; }
.ai-btn { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--accent-purple); cursor: pointer; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border-light); transition: all 0.2s ease; }
.ai-btn:hover { background-color: var(--accent-purple); color: #FFF; border-color: var(--accent-purple); }

.chat-dock { 
    position: relative; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 

    z-index: 50; 
    flex-shrink: 0;
}

.chat-dock-fade { 
    position: absolute; 
    top: -60px; 
    left: 0;
    height: 60px; 
    background: linear-gradient(to bottom, rgba(250,250,250,0), rgba(250,250,250,1)); 
    width: 100%; 
    pointer-events: none; 

    z-index: 0;
}
.chat-dock-bg { padding: 0 40px 32px 40px; display: flex; justify-content: center; pointer-events: auto; width: 100%; box-sizing: border-box; }
.ai-chat-pill { width: 100%; max-width: 800px; max-height: 520px; background-color: #FFFFFF !important; border-radius: 28px; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; cursor: text; position: relative; box-shadow: 0 4px 24px rgba(0,0,0,0.1); border: 1px solid var(--border-light); transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.ai-chat-pill.drag-over { border-color: var(--accent-purple) !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important; }
.chat-attachments-row { display: flex; flex-wrap: wrap; gap: 6px; }

.msg-attachment-row { margin-top: 6px; display: block; }
.msg-attachment-chip {
    display: inline-block; margin-right: 6px;
    font-size: 10px; color: #C4B5FD !important;
    background-color: rgba(168,85,247,0.14);
    border: 1px solid rgba(168,85,247,0.35);
    border-radius: 4px; padding: 2px 7px;
}

.chat-attachment-chip {
    display: inline-block; position: relative;
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 10px 26px 8px 12px;
    margin: 0 6px 6px 0;
    width: 128px; vertical-align: top;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.chat-attachment-name {
    display: block; font-size: 11px; line-height: 1.35;
    color: #1F2937 !important;
    word-break: break-word;
    max-height: 44px; overflow: hidden;
}
.chat-attachment-kind {
    display: inline-block; margin-top: 8px;
    font-size: 8px; font-weight: 800; letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #6B7280 !important;
    background-color: #F3F4F6 !important;
    border-radius: 3px; padding: 2px 5px;
}
.chat-attachment-remove {
    position: absolute; top: 6px; right: 7px;
    cursor: pointer; opacity: 0.35; font-weight: 700;
    font-size: 11px; line-height: 1; color: #6B7280 !important;
}
.chat-attachment-remove:hover { opacity: 1; color: #DC2626 !important; }

.chat-action-left { padding-bottom: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #1F2937; }

#btn-upload-file svg { stroke: #1F2937 !important; }

.ai-chat-pill textarea { -webkit-appearance: none !important; appearance: none !important; width: 100%; border: none !important; background-color: #FFFFFF !important; color: #111 !important; caret-color: #111 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-weight: 400; line-height: 24px; height: 24px; flex-shrink: 0; outline: none !important; box-shadow: none !important; border-radius: 0 !important; resize: none; overflow-y: auto; padding: 0 4px; margin: 0; box-sizing: border-box; white-space: pre-wrap !important; word-break: break-word !important; }
.ai-chat-pill textarea.disabled { background-color: transparent !important; cursor: not-allowed; }
.ai-chat-pill textarea:focus { background-color: #FFFFFF !important; outline: none !important; border: none !important; box-shadow: none !important; }
.ai-chat-pill textarea::placeholder { color: #888 !important; font-style: italic; opacity: 1 !important; }

.chat-actions-bottom { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin-top: auto; }
.chat-actions-right { display: flex; align-items: center; margin-left: auto; cursor: default; padding-right: 2px; }

.model-picker { position: relative; display: flex; align-items: center; padding: 6px 12px; margin-right: 18px; border-radius: 12px; border: 1px solid var(--border-light); transition: background-color 0.2s ease; cursor: pointer; background-color: #FFFFFF; }
.model-picker:hover { background-color: #F3F4F6 !important; }
.model-picker.disabled { opacity: 0.4 !important; pointer-events: none !important; cursor: not-allowed !important; }
.model-picker-trigger { display: flex; align-items: center; }
.model-picker-label { font-size: 12px; font-weight: 700; color: #6B7280; pointer-events: none; }
.model-picker-menu { min-width: 180px; }
.model-picker-item-row {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
}
.model-picker-check { flex-shrink: 0; margin-left: 10px; color: var(--accent-purple) !important; }

.model-picker-check { stroke: var(--accent-purple) !important; fill: none !important; }

.model-picker-menu {
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.model-picker-menu .picker-item-title { color: #1F2937 !important; }
.model-picker-menu .picker-item-sub { color: #6B7280 !important; }
.model-picker-menu .picker-item:hover { background-color: rgba(0,0,0,0.05) !important; }
.model-picker-menu .model-picker-section-label { color: #6B7280 !important; }
.model-picker-menu .model-picker-divider { background-color: var(--border-light) !important; }
.model-picker-section-label {
    font-size: 10px; font-weight: 700; color: var(--text-muted) !important;
    text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 12px 4px;
}
.model-picker-divider { height: 1px; background-color: var(--border-color) !important; margin: 4px 0; }

.chat-send {
    background-color: var(--accent-purple) !important; border-radius: 50% !important;

    width: 40px !important; height: 40px !important; display: flex; align-items: center;
    justify-content: center; padding: 0 !important; margin: 0 !important; flex-shrink: 0;
    color: #FFFFFF !important; transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-send:hover:not(.disabled) {
    background-color: #9C42F0 !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 1),
                0 0 32px rgba(168, 85, 247, 0.65),
                0 0 52px rgba(168, 85, 247, 0.32),
                0 0 0 6px rgba(168, 85, 247, 0.22);
}
.chat-send:active:not(.disabled) {
    background-color: #9333EA !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
}

.chat-send.disabled {
    background-color: #E5E7EB !important; color: #B0B4BA !important;
    opacity: 1 !important; pointer-events: none;
    box-shadow: none !important;
}

.chat-send svg { stroke: #FFFFFF !important; fill: none !important; }
.chat-send #svg-stop-icon { fill: #FFFFFF !important; stroke: none !important; }
.chat-send.disabled svg { stroke: #B0B4BA !important; }
.chat-send.disabled #svg-stop-icon { fill: #B0B4BA !important; }

.chat-send:hover:not(.disabled) {
    background-color: #FFFFFF !important;
    border: 2px solid var(--accent-purple) !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.55),
                0 0 26px rgba(168, 85, 247, 0.28) !important;
}
.chat-send:hover:not(.disabled) svg { stroke: var(--accent-purple) !important; }
.chat-send:hover:not(.disabled) #svg-stop-icon { fill: var(--accent-purple) !important; stroke: none !important; }
#chat-pill.arranging .chat-send:not(.disabled) {
    background-color: #0D9488 !important;
    box-shadow: 0 0 10px rgba(13, 148, 136, 0.95),
                0 0 26px rgba(13, 148, 136, 0.55),
                0 0 44px rgba(13, 148, 136, 0.28),
                0 0 0 5px rgba(13, 148, 136, 0.15) !important;
}
#chat-pill.arranging .chat-send:hover:not(.disabled) {
    background-color: #FFFFFF !important;
    border: 2px solid #0D9488 !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    box-shadow: 0 0 12px rgba(13, 148, 136, 0.55),
                0 0 26px rgba(13, 148, 136, 0.28) !important;
}
#chat-pill.arranging .chat-send:hover:not(.disabled) svg { stroke: #0D9488 !important; }
#chat-pill.arranging .chat-send:hover:not(.disabled) #svg-stop-icon { fill: #0D9488 !important; stroke: none !important; }
#chat-pill.arranging .chat-send:active:not(.disabled) { background-color: #0F766E !important; }

.notes-reread { font-size: 11px; color: var(--text-muted); padding: 4px 12px 8px; }

.word.patch-target { background-color: rgba(168, 85, 247, 0.16) !important; border-bottom: 2px solid var(--accent-purple) !important; }

body.vireo-live #btn-undo.live-off, body.vireo-live #btn-redo.live-off { opacity: 0.3 !important; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 9999; }

.app-toast {
    position: fixed; bottom: 14px; left: 50%; z-index: 10050;   
    transform: translateX(-50%) translateY(14px);
    background-color: #1E1E1E !important; color: #F3F4F6 !important;
    font-size: 12px; font-weight: 500; padding: 10px 16px; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35); border: 1px solid var(--border-color) !important;
    max-width: 420px; text-align: center; cursor: pointer;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.modal-content { background-color: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px; padding: 24px; width: 320px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 12px; }
.modal-content h3 { margin: 0; font-size: 14px; font-weight: 700; color: #FFF; }
.modal-content p { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.api-key-ring-label { color: #9CA3AF !important; margin-right: 8px; font-size: 11px; }
.api-key-chip {
    display: inline-block; margin: 3px 6px 3px 0;
    padding: 3px 10px; border-radius: 11px;
    font-size: 11px; font-family: ui-monospace, Menlo, monospace;
    color: #6B7280 !important;
    background-color: rgba(0,0,0,0.05) !important;
    border: 1px solid var(--border-light) !important;
    cursor: pointer; user-select: none;
}
.api-key-chip:hover { background-color: rgba(168, 85, 247, 0.10) !important; border-color: rgba(168, 85, 247, 0.45) !important; }
.api-key-chip.active {
    color: #6D28D9 !important;
    background-color: rgba(168, 85, 247, 0.12) !important;
    border-color: rgba(168, 85, 247, 0.45) !important;
    cursor: default;
}

.modal-input { background-color: #141414 !important; border: 1px solid var(--border-color) !important; color: #FFF !important; padding: 8px 12px !important; border-radius: 4px !important; font-size: 13px !important; font-family: inherit !important; outline: none; -webkit-appearance: none !important; appearance: none !important; transition: border-color 0.2s ease;}
.modal-input:focus { border-color: var(--accent-purple) !important; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.modal-actions .primary-btn { margin-top: 0; padding: 8px 16px; width: auto; font-size: 12px; cursor: pointer; text-align: center;}
.modal-actions .primary-btn.secondary { background-color: transparent !important; border: 1px solid var(--border-color); color: var(--text-light) !important; }
.modal-actions .primary-btn.secondary:hover { background-color: rgba(255,255,255,0.05) !important; }

.chat-panel-header,
.unused-words-header {
    display: flex !important;
    align-items: center !important;
    padding: 4px 16px !important;
    padding-right: 52px !important;
    min-height: 28px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--border-light) !important;
    flex-shrink: 0 !important;
}
.compare-to-version-select {
    white-space: nowrap !important;
    max-width: none !important;
}

.compare-to-version-select {
    display: flex !important; align-items: center !important; gap: 6px !important;
    font-size: 11px !important; font-weight: 600 !important;
    color: var(--text-muted) !important;
    background-color: transparent !important;
    border: none !important;
    cursor: pointer !important; padding: 3px 8px !important; border-radius: 5px !important;
    white-space: nowrap !important; max-width: none !important;
}
.compare-to-version-select:hover,
.compare-to-version-wrapper.open .compare-to-version-select {
    background-color: rgba(139, 92, 246, 0.08) !important;
    color: var(--accent-purple) !important;
}

.unused-words-title {
    display: flex !important; align-items: center !important;
    font-size: 11px !important; font-weight: 600 !important;
    color: var(--text-muted) !important;
    padding: 3px 8px !important; border-radius: 5px !important;
}
.unused-words-header {
    justify-content: flex-start !important;
}

.unused-words-toggle-label {
    display: flex !important; align-items: center !important;
    font-size: 11px !important; font-weight: 600 !important;
    color: var(--text-muted) !important;
    cursor: pointer !important; user-select: none !important;
    padding: 3px 8px !important; border-radius: 5px !important;
    margin-left: 10px !important;
}
.unused-words-toggle-label:hover {
    background-color: rgba(139, 92, 246, 0.08) !important;
    color: var(--accent-purple) !important;
}
.unused-words-toggle-label.active {
    background-color: rgba(139, 92, 246, 0.08) !important;
    color: var(--accent-purple) !important;
}

.panel-search-toggle { margin-left: auto !important; }

.notes-docs-wrapper { position: relative; display: inline-block; }
#notes-docs-trigger { cursor: pointer !important; }
#notes-docs-trigger:hover,
.notes-docs-wrapper.open #notes-docs-trigger {
    background-color: rgba(139, 92, 246, 0.08) !important;
    color: var(--accent-purple) !important;
}
.notes-docs-menu { min-width: 220px !important; }

.notes-docs-divider { height: 1px; background-color: var(--border-light) !important; margin: 4px 0; }

#notes-panel.notes-search-open .notes-textarea-wrapper {
    padding-top: 40px !important;
}

.chat-search-bar { z-index: 500 !important; }

#notes-panel.notes-menu-open .notes-textarea {
    visibility: hidden !important;
}

.chat-search-bar {
    padding: 4px 6px 4px 12px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 6px !important;
    background-color: #FFFFFF !important;
    gap: 6px !important;
}
.chat-search-bar input {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Helvetica, sans-serif !important;
    font-size: 12px !important;
    color: #1F2937 !important;
    caret-color: #1F2937 !important;
    padding: 2px 4px !important;
}
.chat-search-bar input:focus {
    background-color: #DBEAFE !important;
    border-radius: 4px !important;
    color: #000 !important;
}

.notes-current-name {
    flex: 1 1 auto; text-align: center;
    font-size: 11px; font-weight: 500;
    color: var(--text-muted) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 10px; min-width: 0;
    user-select: none;
}

.notes-docs-menu,
.compare-to-version-menu,
.model-picker-menu {
    overflow: hidden !important;

    overflow-y: hidden !important;
    max-height: none !important;
}
.notes-docs-menu .picker-list,
.compare-to-version-menu .picker-list,
.model-picker-menu .picker-list {
    max-height: 252px;
    overflow-y: auto;
    width: calc(100% + 17px);
    box-sizing: content-box;
    padding-right: 0;
}

.notes-docs-menu .picker-list .picker-item,
.compare-to-version-menu .picker-list .picker-item,
.model-picker-menu .picker-list .picker-item {
    padding-right: 29px !important;
}

.notes-docs-menu .picker-list,
.compare-to-version-menu .picker-list,
.model-picker-menu .picker-list {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}
.notes-docs-menu .picker-list::-webkit-scrollbar,
.compare-to-version-menu .picker-list::-webkit-scrollbar,
.model-picker-menu .picker-list::-webkit-scrollbar {
    display: none !important; width: 0 !important; background: transparent !important;
}

body.modal-open #notes-textarea,
body.modal-open #chat-prompt,
body.modal-open #search-input,
body.modal-open #chat-search-input,
body.modal-open #notes-search-input,
body.modal-open #compare-search-input,

body.menu-open #search-input,
body.menu-open #chat-search-input,
body.menu-open #notes-search-input,
body.menu-open #compare-search-input,
body.menu-open #notes-textarea,
body.menu-open #chat-prompt,

body.modal-open .rule-name-input,
body.modal-open .rule-edit-textarea,
body.modal-open .speaker-edit-input,
body.modal-open .broll-edit-field,
body.modal-open .broll-add-input,
body.modal-open .broll-search-input,
body.menu-open .rule-name-input,
body.menu-open .rule-edit-textarea,
body.menu-open .speaker-edit-input,
body.menu-open .broll-edit-field,
body.menu-open .broll-add-input,
body.menu-open .broll-search-input {
    visibility: hidden !important;
}

.header-center-slot {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    min-width: 0;
}
.unused-words-toggle-label {
    margin-left: 0 !important;
    white-space: nowrap !important;
}

#generic-modal { z-index: 10003; }

.account-modal-content { width: 480px !important; max-width: 92% !important; text-align: left; padding: 28px !important; }

.account-hero {
    background-color: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px; padding: 14px 16px;
}
.account-hero-top { display: flex; align-items: center; margin-bottom: 6px; }
.account-dot {
    width: 8px; height: 8px; border-radius: 50%; margin-right: 8px;
    background-color: #6B7280 !important; flex-shrink: 0;
}
.account-dot.ok { background-color: #22C55E !important; }
.account-dot.warn { background-color: #F59E0B !important; }
.account-dot.bad { background-color: #EF4444 !important; }
.account-hero-plan { font-size: 14px; font-weight: 700; color: #FFFFFF !important; }
.account-hero-status { font-size: 11px; font-weight: 600; color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: 0.5px; }
.account-hero-detail { font-size: 11px; color: var(--text-muted) !important; margin-top: 6px; }

.account-field { margin-top: 4px; }
.account-field-label {
    display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
    color: var(--text-muted) !important; margin-bottom: 6px;
}
.account-input { display: block; width: 100%; box-sizing: border-box; }
.account-key-masked { font-size: 13px; letter-spacing: 0.5px; color: var(--text-dark) !important; padding: 8px 0 2px; user-select: none; -webkit-user-select: none; }   
.account-change-key { display: inline-block; margin-top: 6px; font-size: 12px; }   
.account-note { font-size: 11px; color: var(--text-muted) !important; margin-top: 8px; line-height: 1.5; }

.account-version-line { margin-top: 14px; }
.account-version-link { text-decoration: underline; cursor: pointer; }

.account-actions { justify-content: space-between !important; align-items: center; }
.account-actions-right { display: flex; gap: 8px; }
.account-link {
    font-size: 12px; font-weight: 600; color: var(--accent-purple) !important;
    cursor: pointer; padding: 8px 0;

    white-space: nowrap; flex-shrink: 0;
}
.account-link:hover { text-decoration: underline; }

.picker-list > * + * { margin-top: 2px; }
.picker-item > * + * { margin-top: 2px; }
.sidebar-footer > * + * { margin-top: 4px; }
.api-setup-card > * + * { margin-top: 16px; }
.form-group > * + * { margin-top: 6px; }
.onboarding-card > * + * { margin-top: 4px; }
.chat-welcome > * + * { margin-top: 12px; }
.ai-chat-pill > * + * { margin-top: 12px; }
.modal-content > * + * { margin-top: 12px; }

.logo > * + * { margin-left: 8px; }
.sidebar-footer-item.user-item > * + * { margin-left: 10px; }
.unused-words-toggle-label > * + * { margin-left: 6px; }
.rules-tab > * + * { margin-left: 6px; }
.chat-search-bar > * + * { margin-left: 6px; }
.rules-scope-tabs > * + * { margin-left: 4px; }
.rule-assistant-btn > * + * { margin-left: 5px; }
.rule-row > * + * { margin-left: 8px; }
.rule-row-actions > * + * { margin-left: 8px; }
.api-setup-header > * + * { margin-left: 12px; }
.search-container > * + * { margin-left: 8px; }
.search-wrapper > * + * { margin-left: 6px; }
.search-nav-group > * + * { margin-left: 4px; }
.broll-pill > * + * { margin-left: 5px; }
.broll-pill-popover .pop-actions > * + * { margin-left: 10px; }
#broll-progress-wrap > * + * { margin-left: 10px; }
.ai-reasoning-toggle > * + * { margin-left: 6px; }
.chat-attachment-chip > * + * { margin-left: 6px; }
.compare-to-version-select > * + * { margin-left: 6px; }
.account-actions-right > * + * { margin-left: 8px; }

.modal-actions > * + * { margin-left: 8px; }

.suggested-prompts { margin-left: -4px; margin-right: -4px; }
.suggested-prompts > * { margin: 4px; }
.chat-attachments-row { margin-left: -3px; margin-right: -3px; }
.chat-attachments-row > * { margin: 3px; }

.gap-row-8 > * + * { margin-left: 8px; }
.gap-row-10 > * + * { margin-left: 10px; }

.modal-head-icon { stroke: var(--accent-purple) !important; fill: none !important; flex-shrink: 0; }
.gap-row-12 > * + * { margin-left: 12px; }
.gap-col-6 > * + * { margin-top: 6px; }
.gap-col-8 > * + * { margin-top: 8px; }

.modal-toggle-row { display: flex; flex-direction: column; }
.modal-toggle {
    display: flex; align-items: center; cursor: pointer; user-select: none;
    font-size: 12px; font-weight: 600; color: var(--text-light) !important;
    padding: 6px 0;
}
.modal-toggle-box {
    width: 15px; height: 15px; flex-shrink: 0; margin-right: 8px;
    border: 1px solid var(--border-color); border-radius: 3px;
    background-color: #141414 !important;
    display: flex; align-items: center; justify-content: center;
}
.modal-toggle.on .modal-toggle-box {
    background-color: var(--accent-purple) !important;
    border-color: var(--accent-purple);
}

.modal-toggle-tick { display: none; }
.modal-toggle.on .modal-toggle-tick { display: block; stroke: #FFFFFF !important; fill: none !important; }
.modal-toggle:hover { color: #FFFFFF !important; }
.modal-toggle-note { font-size: 11px; color: var(--text-muted) !important; line-height: 1.5; margin-top: 2px; }

.modal-content h3 {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    margin: 0 0 6px 0 !important;
    color: #FFFFFF !important;
}
.modal-content p {
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.modal-actions { margin-top: 14px !important; }

.stacked-btn.coming-soon { position: relative; opacity: 0.55; }
.stacked-btn.coming-soon:hover { opacity: 0.8; }

.soon-badge {
    position: absolute; top: -1px; right: -2px;
    font-size: 8px; font-weight: 700; letter-spacing: 0.5px;
    color: var(--accent-purple) !important;
    background-color: transparent !important;
    padding: 0; border-radius: 0;
    pointer-events: none;
}

.debug-panel.minimized { height: auto !important; min-height: 0 !important; }
.debug-panel.minimized .debug-content { display: none !important; }

.logo { text-transform: lowercase !important; }

#user-popup-menu { position: fixed !important; z-index: 6000 !important; }

#ripple-tooltip {
    position: fixed; display: none; z-index: 10001;
    max-width: 260px; padding: 7px 10px;
    background-color: #1E1E1E !important; color: #F3F4F6 !important;
    border: 1px solid var(--border-color) !important; border-radius: 6px;
    font-size: 11px; font-weight: 500; line-height: 1.45;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
    pointer-events: none;
}

.word.duplicate-word {
    box-shadow: inset 0 -2px 0 0 rgba(239, 68, 68, 0.55);
}

.word.duplicate-word.selected-word,
.word.duplicate-word.highlighted-word {
    box-shadow: none;
}

.picker-item {
    padding: 8px 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.picker-item-title { font-size: 12px !important; }

.submenu-flyout {
    position: fixed;
    z-index: 5000;
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    min-width: 190px;
    flex-direction: column;
}

.dropdown-item .submenu-arrow {
    margin-left: auto;
    font-size: 9px;
    opacity: 0.5;
    line-height: 1;
}
.dropdown-item:hover .submenu-arrow { opacity: 0.9; }

.picker-list .picker-item + .picker-item {
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.modal-note {
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: var(--text-muted) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px;
    padding: 10px 12px !important;
    margin: 0 !important;
}

.stacked-btn.broll-ready .btn-label {
    color: var(--accent-purple) !important;
    font-weight: 700;
}
.stacked-btn.broll-ready svg { stroke: var(--accent-purple) !important; }

body.menu-open #broll-overlay-layer,
body.modal-open #broll-overlay-layer {
    visibility: hidden !important;
}

.chat-message.thinking-wave {

    display: flex !important;
    align-items: center;
    justify-content: center;
    align-self: center !important;
    max-width: 100% !important;
    width: 100%;
    height: 34px;
    padding: 4px 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.chat-message.thinking-wave i {

    background: var(--accent-purple);

    box-shadow: 0 0 5px rgba(168, 85, 247, 1),
                0 0 12px rgba(168, 85, 247, 0.7),
                0 0 24px rgba(168, 85, 247, 0.4);
}

.chat-message.thinking-wave.thinking-wave-live i {
    background: #0D9488;
    box-shadow: 0 0 5px rgba(13, 148, 136, 1),
                0 0 12px rgba(13, 148, 136, 0.7),
                0 0 24px rgba(13, 148, 136, 0.4);
}

.ai-chat-pill {
    border-color: rgba(168, 85, 247, 0.35) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08),
                0 0 0 4px rgba(168, 85, 247, 0.09),
                0 0 28px rgba(168, 85, 247, 0.16) !important;
}

.ai-chat-pill.drag-over {
    border-color: var(--accent-purple) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25),
                0 0 32px rgba(168, 85, 247, 0.3) !important;
}

.chat-send {
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.95),
                0 0 26px rgba(168, 85, 247, 0.55),
                0 0 44px rgba(168, 85, 247, 0.28),
                0 0 0 5px rgba(168, 85, 247, 0.15);
}
.chat-send.disabled { box-shadow: none; }

.ai-btn {
    border-color: rgba(168, 85, 247, 0.42) !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.08);
    background: #FFF;
}
.ai-btn:hover {
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18),
                0 0 12px rgba(168, 85, 247, 0.25);
}

.chat-message.msg-ai {
    border-color: rgba(168, 85, 247, 0.16) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03),
                0 0 0 4px rgba(168, 85, 247, 0.05) !important;
}

.chat-welcome { opacity: 1 !important; }
.chat-welcome h3,
.chat-welcome p { color: var(--text-muted); opacity: 0.75; }
.chat-welcome > svg {
    stroke: var(--accent-purple) !important;
    fill: none !important;
    opacity: 0.95;

}

.dropdown-item .ico {
    width: 15px; height: 15px; margin-right: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}

.dropdown-item .ico svg { stroke: var(--text-muted) !important; fill: none !important; display: block; }
.dropdown-item:hover .ico svg { stroke: var(--accent-purple) !important; }

.group-label {
    font-size: 9px; font-weight: 600; letter-spacing: 0.11em;
    text-transform: uppercase; color: #5a5a5a;
    padding: 10px 12px 5px;
}
.menu-divider { height: 1px; background: var(--border-color); margin: 5px 4px; }

.dropdown-item.muted { color: #6f6f6f; font-size: 11px; }
.dropdown-item.muted .ico svg { stroke: #5a5a5a !important; }

.menu-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px 5px; font-size: 10px; color: #565656;
}
.menu-foot .dot { color: var(--accent-purple); text-shadow: 0 0 8px rgba(168,85,247,0.9); }

.dropdown-menu.lit {
    border-color: rgba(168, 85, 247, 0.28) !important;
    box-shadow: 0 6px 22px rgba(0,0,0,0.6),
                0 0 0 1px rgba(168, 85, 247, 0.10),
                0 0 34px rgba(168, 85, 247, 0.16);
}
.dropdown-menu.lit .dropdown-item:hover {
    background-color: rgba(168, 85, 247, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.24);
    color: #fff;
}

.vo-label {

    display: inline-flex; align-items: center;

    background-color: #FAF5FF;
    color: #A855F7 !important;
    border: 1px solid #E9D5FF;
    border-radius: 20px;
    padding: 2px 10px 2px 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    margin: 0 4px 0 0; vertical-align: middle; user-select: none;
    box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.15),
                0 2px 8px rgba(192, 132, 252, 0.22);
}

.vo-label::before {
    content: ""; width: 8px; height: 8px; margin-right: 11px; flex-shrink: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C4B5FD'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; background-position: center;
    border-radius: 0; box-shadow: none;
}

.vo-label.manual-vo-label {
    background-color: #E5D5F8;
    color: #3B0764 !important;
    border-color: #6D28D9;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.16),
                0 2px 8px rgba(168, 85, 247, 0.22);
}
.vo-label.manual-vo-label::before {

    background-image: none;
    background-color: #4C1D95;
    width: 6px; height: 6px; border-radius: 50%;
    box-shadow: 0 0 7px rgba(76, 29, 149, 0.95);
}

.broll-pill {
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.13),
                0 2px 8px rgba(251, 146, 60, 0.22);
}
.broll-pill-dot {
    box-shadow: 0 0 7px rgba(251, 146, 60, 0.95);
}

.vo-word-hidden { display: none !important; }

.vo-label
.topic-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 10px; letter-spacing: 0.8px;
    text-transform: uppercase;
    user-select: none; margin-right: 2px;
    color: #92400E !important;
}
.topic-pill-collapsed {
    padding: 3px 14px 3px 11px;
    cursor: pointer; line-height: 1.5;
    align-items: center; margin: 0 3px;
    max-width: 22em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    vertical-align: baseline; display: inline-flex;
    border-radius: 12px;
    background-color: #FEF3C7 !important;
    border: 1px solid rgba(217, 119, 6, 0.45);
}
.topic-pill-collapsed::before {
    content: ""; flex-shrink: 0;
    width: 6px; height: 6px; border-radius: 50%;
    margin-right: 7px;
    background-color: #D97706 !important;
}
.topic-pill-collapsed:hover { background-color: #FDE68A !important; }
.topic-word { color: #92400E !important; }
.topic-word-hidden { display: none !important; }
.topic-anchor-start, .topic-anchor-end { display: inline-block; width: 0; overflow: hidden; }

.idea-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 11px; letter-spacing: 0.3px;
    user-select: none; margin-right: 2px;
    color: #0F766E !important;
}
.idea-label.vo-expanded,
.idea-label.idea-expanded {
    display: block; position: relative;
    width: 100%; max-width: 100%;
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.7;
    padding: 9px 16px 9px 30px;
    margin: 10px 0;
    border-radius: 14px;
}
.idea-label.vo-expanded::before,
.idea-label.idea-expanded::before {
    position: absolute; left: 13px; top: 14px; margin-top: 0;
}

.idea-pill-collapsed {
    padding: 3px 14px 3px 11px;
    font-size: 12px; font-weight: 500; letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    line-height: 1.5;
    align-items: center;
    margin: 0 3px;
    max-width: 22em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: baseline;
    display: inline-flex;
    border-radius: 12px;
    background-color: #E3FAF5 !important;
    color: #0F766E !important;
    border: 1px solid rgba(25, 244, 214, 0.55);
    box-shadow: 0 0 0 2px rgba(25, 244, 214, 0.14);
}
.idea-pill-collapsed::before {
    content: "";
    flex-shrink: 0;
    width: 6px; height: 6px; border-radius: 50%;
    margin-right: 7px;
    background-color: #19F4D6 !important;
}
.idea-pill-collapsed:hover {
    background-color: #BFF3EA !important;
    box-shadow: 0 0 0 3px rgba(25, 244, 214, 0.28),
                0 2px 10px rgba(13, 148, 136, 0.28);
}
.idea-word { color: #0F766E !important; }
.idea-word-hidden { display: none !important; }
.idea-anchor-start, .idea-anchor-end {
    display: inline-block; width: 0; overflow: hidden;
}

.vo-pill-collapsed {

    padding: 3px 14px 3px 11px;
    font-size: 12px; font-weight: 500; letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    line-height: 1.5;
    align-items: center;
    margin: 0 3px;

    max-width: 22em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: baseline;
}

.swap-label {
    color: #6366F1 !important;
    background-color: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.40);
    border-radius: 12px;
    display: inline-flex; align-items: center;
    padding: 3px 14px 3px 11px;
    margin: 0 3px;
    font-size: 12px; font-weight: 500; letter-spacing: 0;
    line-height: 1.5;
    cursor: pointer; user-select: none;
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

    text-transform: none;
    vertical-align: baseline;
}
.swap-label:hover { background-color: rgba(99, 102, 241, 0.20); }

.swap-run {
    background-color: rgba(99, 102, 241, 0.13) !important;
    box-shadow: inset 0 -2px 0 0 #6366F1;
}

.swap-label::first-letter { font-weight: 700; }

.swap-view-tc {
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
    color: #6366F1 !important;
    margin: 0 0 10px;
}
.swap-view-body {
    max-height: 46vh;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 13px; line-height: 1.7;
    color: var(--text-light) !important;
    background-color: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 14px;
    user-select: text;
}

.vo-label.vo-pill-collapsed::before {
    flex-shrink: 0;
}
.vo-label.vo-pill-collapsed:hover {
    background-color: #E9D8FD;
    box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.25),
                0 2px 10px rgba(192, 132, 252, 0.3);
}

.broll-pill {
    background-color: #FBEFE7 !important;
    color: #8C5A3C !important;
    border-color: #DCA982 !important;
    box-shadow: 0 0 0 3px rgba(220, 169, 130, 0.14),
                0 2px 8px rgba(220, 169, 130, 0.20) !important;
}
.broll-pill:hover { background-color: #F6E2D3 !important; }
.broll-pill-dot {
    background-color: #D08B5B !important;
    box-shadow: 0 0 7px rgba(208, 139, 91, 0.8) !important;
}

.vo-label.manual-vo-label {
    background-color: #E5D5F8;
    color: #3B0764 !important;
    border-color: #6D28D9;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.16),
                0 2px 8px rgba(168, 85, 247, 0.22);
}
.vo-label.manual-vo-label::before {

    background-image: none;
    background-color: #4C1D95;
    width: 6px; height: 6px; border-radius: 50%;
    box-shadow: 0 0 7px rgba(76, 29, 149, 0.95);
}

.broll-overlay-bar { background-color: #D08B5B !important; }

.vo-label.vo-expanded {
    display: flex;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    align-items: flex-start;
    line-height: 1.7;
    padding: 9px 16px 9px 13px;
    margin: 10px 0;
    border-radius: 14px;

    overflow-wrap: break-word;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.vo-label.vo-expanded {
    display: block;
    position: relative;
    padding-left: 30px;
}
.vo-label.vo-expanded::before {
    position: absolute;
    left: 13px;
    top: 14px;
    margin-top: 0;
}

.vo-label.vo-expanded::before {
    margin-top: 7px;
}

.contextmenu-item.danger:hover {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #F87171 !important;
}

#broll-view {
    display: none; flex-direction: column;
    background-color: #141414 !important;
    color: #E0E0E0 !important;
    overflow: hidden;
}
#broll-view.active-view { display: flex !important; }
#broll-view-head {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid #2A2A2A;
    font-size: 13px;
}
.broll-badge {
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    color: var(--accent-purple) !important;
    border: 1px solid var(--accent-purple); border-radius: 3px; padding: 2px 6px;
}
#broll-view-name { color: #E0E0E0 !important; font-weight: 500; }

#broll-view-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

#broll-view-body > * { flex-shrink: 0; }
#broll-view-body > .broll-shot-list {
    flex: 1 1 auto !important;
    flex-shrink: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

.broll-empty { padding: 44px 24px; text-align: center; }
.broll-empty-title { color: #E0E0E0 !important; margin-bottom: 6px; font-size: 13px; }
.broll-empty-sub { color: #888 !important; font-size: 12px; line-height: 1.5; margin-bottom: 18px; }
.broll-empty-foot { color: #666 !important; font-size: 11px; margin-top: 14px; }

.broll-progress-block { padding: 12px 18px; border-bottom: 1px solid #2A2A2A; }
.broll-progress-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.broll-progress-row .lbl { color: #E0E0E0 !important; font-size: 13px; }
.broll-progress-row .cnt { color: #888 !important; font-size: 11px; }

.broll-progress-row .broll-stop-x {
    font-size: 13px; line-height: 1;
    color: #666 !important; cursor: pointer;
    padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
    -webkit-user-select: none; user-select: none;
}
.broll-progress-row .broll-stop-x:hover { color: #DDD !important; background-color: #333 !important; }

.broll-bar { height: 3px; background: #2A2A2A; border-radius: 2px; overflow: hidden; position: relative; }
.broll-bar-fill { height: 100%; background: var(--accent-purple); width: 0; }

.broll-bar-comet {
    position: absolute; top: 0; left: -60px; height: 100%; width: 60px;
    background: #E9D5FF; opacity: 0;
}
.broll-progress-now { color: #666 !important; font-size: 11px; margin-top: 8px; }
.broll-resume { padding: 12px 18px; border-bottom: 1px solid #2A2A2A; background: rgba(168,85,247,0.06); }

.broll-search-row { flex-shrink: 0; padding: 12px 18px; border-bottom: 1px solid #2A2A2A; display: flex; gap: 8px; }
.broll-search-input {
    flex: 1; background-color: #1E1E1E !important; border: 1px solid #2A2A2A !important;
    border-radius: 6px; padding: 8px 10px; color: #E0E0E0 !important; font-size: 13px;
    font-family: inherit; outline: none; -webkit-appearance: none; appearance: none;

    text-indent: 4px;
}
.broll-shot-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.broll-shot-list > * { flex-shrink: 0; }
.broll-shot-row { padding: 10px 18px; border-bottom: 1px solid #1E1E1E; cursor: pointer; }

.broll-shot-row.excluded {
    background-color: rgba(255,255,255,0.02) !important;
    border-color: #2A2A2A !important;
}
.broll-shot-row.excluded .broll-shot-desc {
    color: #6E6E6E !important;
    text-decoration: line-through;
    text-decoration-color: #5A5A5A;
}
.broll-shot-row.excluded .broll-shot-num { color: #454545 !important; }
.broll-shot-row.excluded .broll-shot-meta { color: #4E4E4E !important; }

.broll-shot-row.excluded .broll-rating-dot { opacity: 0.45; }

.broll-shot-row.excluded .broll-go-btn { opacity: 1; }
.broll-shot-top { display: flex; align-items: baseline; gap: 10px; }
.broll-shot-desc { color: #E0E0E0 !important; flex: 1; font-size: 13px; }
.broll-shot-note-dot { color: var(--accent-purple) !important; font-size: 11px; }
.broll-shot-detail { margin-top: 10px; padding: 10px 12px; background-color: #1E1E1E !important; border-radius: 6px; }
.broll-tag { font-size: 10px; color: var(--accent-purple) !important; background: rgba(168,85,247,0.12); border-radius: 3px; padding: 2px 6px; margin-right: 4px; }
.broll-detail-note { color: #C4B5FD !important; font-size: 12px; margin: 8px 0; }
.broll-detail-raw { color: #777 !important; font-size: 11px; margin: 6px 0 8px; font-style: italic; }

.broll-mini-btn {
    font-size: 11px; padding: 4px 8px; border-radius: 4px; cursor: pointer;

    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #2A2A2A !important;
    background-image: none !important;
    color: #E0E0E0 !important;
    border: none !important;
    font-family: inherit;
    outline: none !important;
}
.broll-mini-btn:hover { background-color: #3A3A3A !important; }

.wf-live-tag {
    flex-shrink: 0; margin-right: 8px;
    font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
    color: #0D9488 !important;
}
.rule-row.wf-live .rule-row-text { color: #0F766E !important; }
.rule-row.wf-live.wf-running { background-color: #F0FDFA !important; }

.rule-row.wf-live .wf-go:not(.running) {
    background-color: transparent !important;
    border-color: #0D9488;
    color: #0D9488 !important;
}
.rule-row.wf-live .wf-go:not(.running):hover {
    background-color: #0D9488 !important;
    color: #FFFFFF !important;
}

.unused-words-panel.shelf-docked {
    height: var(--shelf-h, 46%);
    bottom: auto; top: 0;
    border-bottom: 1px solid var(--border-light);
}
.shelf-drag-handle {
    height: 10px; cursor: ns-resize; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background-color: #FAFAFA !important;
    border-top: 1px solid #F3F4F6;

    border-bottom: 2px solid var(--accent-purple);
}
.shelf-drag-handle::after {
    content: ""; width: 34px; height: 3px; border-radius: 2px;
    background-color: #D1D5DB;
}
.shelf-drag-handle:hover::after { background-color: var(--accent-purple); }

#stale-notice {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px; font-size: 12px;
    color: #92400E !important; background-color: #FFFBEB !important;
    border-bottom: 1px solid #FDE68A;
}
#stale-notice-fix {
    font-weight: 700; cursor: pointer; margin-left: 12px;
    color: #92400E !important; text-decoration: underline; flex-shrink: 0;
}

.mode-switch { position: relative; }
.mode-switch[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); right: 0;
    width: 210px; padding: 7px 9px;
    background-color: #1F2937 !important;
    color: #F9FAFB !important;
    font-size: 10px; font-weight: 500; letter-spacing: 0;
    line-height: 1.4; text-align: left; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.28);
    opacity: 0; pointer-events: none;
    transition: opacity 0.12s ease 0.35s;
    z-index: 9999;
}
.mode-switch[data-tip]:hover::after { opacity: 1; }

.chat-action-left { position: relative; }
.chat-action-left[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 0;
    width: 210px; padding: 7px 9px;
    background-color: #1F2937 !important;
    color: #F9FAFB !important;
    font-size: 10px; font-weight: 500; line-height: 1.4;
    text-align: left; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.28);
    opacity: 0; pointer-events: none;
    transition: opacity 0.12s ease 0.35s;
    z-index: 9999;
}
.chat-action-left[data-tip]:hover::after { opacity: 1; }

.mode-switch {
    display: inline-flex; align-items: center;
    font-size: 9px; font-weight: 800; letter-spacing: 0.8px;
    color: #9CA3AF !important;
    border: 1px solid var(--border-light);

    border-radius: 12px; padding: 3px 8px 3px 9px; margin-right: 8px;
    cursor: pointer; white-space: nowrap;
    -webkit-user-select: none; user-select: none;
}
.mode-switch-track {
    width: 24px; height: 13px; border-radius: 7px; margin-left: 8px;
    background-color: #E5E7EB !important; position: relative; flex-shrink: 0;
}
.mode-switch-knob {
    position: absolute; top: 2px; left: 2px;
    width: 9px; height: 9px; border-radius: 50%;
    background-color: #FFFFFF !important;

    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: left 0.15s ease;
}
.mode-switch:hover { border-color: #0D9488; }
.mode-switch.arranging {
    color: #FFFFFF !important;
    background-color: #0D9488 !important;
    border-color: #0D9488;
}

.mode-switch.arranging .mode-switch-track {
    background-color: rgba(0,0,0,0.28) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.mode-switch.arranging .mode-switch-knob { left: 13px; }

.ai-chat-pill.arranging { border-color: #0D9488 !important; }

.chat-action-btn {

    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--accent-purple) !important;
    background-image: none !important;
    border: 1px solid var(--accent-purple);
    color: #FFFFFF !important;
    font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
    padding: 7px 14px; border-radius: 6px;

    margin: 4px 10px 4px 0;   
    cursor: pointer; white-space: nowrap;
    -webkit-user-select: none; user-select: none;
}

.chat-message.msg-ai:not(.thinking-wave) {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 0;
}
.chat-message.msg-ai:not(.thinking-wave) > * { flex-shrink: 0; }

.chat-message.msg-ai:not(.thinking-wave) > .msg-text { flex: 1 1 100%; min-width: 0; }

.chat-action-btn:hover { background-color: #C084FC !important; border-color: #C084FC; }
.chat-action-btn.is-disabled {
    background-color: #E5E7EB !important; border-color: #E5E7EB;
    color: #9CA3AF !important; cursor: default;
}

.chat-action-btn.chat-action-live { background-color: #0D9488 !important; border-color: #0D9488; }
.chat-action-btn.chat-action-live:hover { background-color: #14B8A6 !important; border-color: #14B8A6; }

body.vireo-live .chat-action-btn[data-chat-action="assemble-apply"]:not(.is-disabled) { background-color: #0D9488 !important; border-color: #0D9488; }
body.vireo-live .chat-action-btn[data-chat-action="assemble-apply"]:not(.is-disabled):hover { background-color: #14B8A6 !important; border-color: #14B8A6; }
.chat-action-btn.chat-action-live.is-disabled,
.chat-action-btn.chat-action-live.is-disabled:hover {
    background-color: #E5E7EB !important; border-color: #E5E7EB;
    color: #9CA3AF !important; cursor: default;
}

.broll-welcome-actions {

    display: flex; flex-wrap: wrap;
    justify-content: center; margin-top: 18px;
}
.broll-welcome-btn {
    display: inline-flex; align-items: center; justify-content: center;

    background-color: transparent !important;
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple) !important;
    font-size: 12px; font-weight: 500; letter-spacing: 0.3px;
    padding: 10px 18px; border-radius: 6px;
    margin: 0 14px;                 
    cursor: pointer; white-space: nowrap;
    -webkit-user-select: none; user-select: none;
}

.broll-welcome-btn:hover {
    background-color: var(--accent-purple) !important;
    border-color: var(--accent-purple);
    color: #FFFFFF !important;
}

.broll-mini-progress {
    display: flex; align-items: center; gap: 8px;
    height: 26px; padding: 0 10px; margin-right: 4px;
    border-radius: 5px; cursor: pointer;
    background-color: rgba(255,255,255,0.04);
    max-width: 190px; overflow: hidden; flex-shrink: 0;
}
.broll-mini-progress:hover { background-color: rgba(255,255,255,0.09); }
.broll-mini-track {
    width: 54px; height: 4px; flex-shrink: 0;
    background-color: rgba(255,255,255,0.15); border-radius: 2px; overflow: hidden;
}
.broll-mini-fill {
    height: 100%; width: 0%;
    background-color: var(--accent-purple);
    border-radius: 2px; transition: width 0.3s ease;
}
.broll-mini-label {
    font-size: 10px; color: #9CA3AF !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.broll-mini-progress:hover .broll-mini-label { color: #DDD !important; }

.broll-resume { position: relative; }
.broll-resume-x {
    position: absolute; top: 8px; right: 10px;
    font-size: 15px; line-height: 1;
    color: #666 !important; cursor: pointer;
    padding: 2px 6px; border-radius: 3px;
    -webkit-user-select: none; user-select: none;
}
.broll-resume-x:hover { color: #DDD !important; background-color: #333 !important; }

.broll-slate-tag {
    font-family: monospace; font-size: 9px; font-weight: 600;
    color: #D4D4D4 !important;
    border: 1px solid rgba(212,212,212,0.3); border-radius: 3px;
    padding: 1px 5px; margin-left: 6px; flex-shrink: 0; white-space: nowrap;
}

.broll-scene-tag {
    font-size: 9px; font-weight: 600; letter-spacing: 0.4px;
    color: #9CA3AF !important;
    border: 1px solid rgba(156,163,175,0.35); border-radius: 3px;
    padding: 1px 5px; margin-left: 6px; flex-shrink: 0;
    max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.broll-scene-row { position: relative; margin-bottom: 4px; }
.broll-scene-input {
    width: 100%; box-sizing: border-box;
    background-color: #262626 !important; color: #DDD !important;
    border: 1px solid #3A3A3A; border-radius: 4px;
    padding: 6px 8px; font-size: 11px;
}
.broll-scene-input:focus { border-color: var(--accent-purple); outline: none; }
.broll-scene-suggest {
    display: none; flex-wrap: wrap; gap: 5px; margin-top: 6px;
}
.broll-scene-pick {
    font-size: 10px; color: #DDD !important;
    background-color: #333 !important;
    border-radius: 3px; padding: 3px 7px; cursor: pointer;
}
.broll-scene-pick:hover { background-color: var(--accent-purple) !important; color: #FFF !important; }

.broll-welcome-sub {
    font-size: 11px; color: #8A8A8A !important;
    margin-top: 14px; max-width: 340px; line-height: 1.5;
}
.broll-foot { flex-shrink: 0; padding: 10px 18px; border-top: 1px solid #2A2A2A; display: flex; gap: 8px; align-items: center; }
.broll-foot-count { color: #888 !important; font-size: 11px; }

.broll-primary-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 0;
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
    padding: 6px 12px; border-radius: 4px;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    background-color: transparent !important;
    color: var(--accent-purple) !important;
    border: 1px solid rgba(168, 85, 247, 0.5);
    -webkit-user-select: none; user-select: none;
}
.broll-primary-btn:hover {
    background-color: rgba(168, 85, 247, 0.14) !important;
    border-color: var(--accent-purple);
}

.broll-primary-btn.disabled {
    opacity: 1;
    pointer-events: none;
    color: #6A6A6A !important;
    border-color: #3A3A3A !important;
    background-color: transparent !important;
}

.broll-edit-field {
    width: 100%; box-sizing: border-box;
    background-color: #FFFFFF !important; color: #1F2937 !important;
    border: none !important; border-radius: 4px;
    padding: 6px 8px; font-family: inherit; font-size: 12px;
    outline: none; resize: none;
    -webkit-appearance: none !important; appearance: none !important;
}
.broll-edit-field:focus { box-shadow: none; }

#broll-active-wrap { display: flex; align-items: center; }
.broll-active-label { font-size: 11px; color: #888 !important; }
.broll-toggle {
    width: 30px; height: 16px; border-radius: 8px; flex-shrink: 0;
    background-color: #3A3A3A !important; display: inline-block; position: relative;
    cursor: pointer;
}
.broll-toggle.on { background-color: var(--accent-purple) !important; }
.broll-toggle-knob {
    position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
    border-radius: 6px; background-color: #FFFFFF !important;
}
.broll-toggle.on .broll-toggle-knob { left: 16px; }

.broll-detail-label { color: #888 !important; font-size: 11px; margin-bottom: 5px; }
.broll-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.broll-tag-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; padding: 3px 7px; border-radius: 4px; cursor: pointer;
    background-color: rgba(168,85,247,0.10) !important; color: var(--accent-purple) !important;
}

.broll-tag-chip.mine { background-color: rgba(168,85,247,0.24) !important; color: #D8B4FE !important; }
.broll-tag-chip .chip-x { opacity: 0.5; }
.broll-tag-chip:hover .chip-x { opacity: 1; }
.broll-add-row { display: flex; gap: 6px; margin-bottom: 12px; }
.broll-add-input {
    flex: 1; background-color: #FFFFFF !important; color: #1F2937 !important;
    border: none !important; border-radius: 5px; padding: 6px 8px;
    font-family: inherit; font-size: 12px; outline: none;
    -webkit-appearance: none !important; appearance: none !important;
}
.broll-add-input:focus { box-shadow: none; }

#broll-view { background-color: #1E1E1E !important; }
#broll-view-head { padding: 12px 16px; gap: 9px; border-bottom: 1px solid #2A2A2A; }
.broll-badge {
    font-size: 9px; padding: 2px 6px;
    border-color: rgba(168,85,247,0.5) !important;
}

.broll-search-row { padding: 10px 16px; gap: 8px; align-items: center; border-bottom: 1px solid #2A2A2A; }
.broll-search-input {
    background-color: #141414 !important; border: 1px solid #2A2A2A !important;
    border-radius: 6px; padding: 7px 10px; font-size: 12px;
    text-indent: 4px;
}

.broll-primary-btn { padding: 6px 12px; border-radius: 4px; }

.broll-shot-list { padding: 10px 12px; }
.broll-shot-row {
    border: 1px solid rgba(168,85,247,0.18);
    border-radius: 7px;
    padding: 9px 11px;
    margin-bottom: 6px;
    background-color: #232323 !important;
}
.broll-shot-row:hover { border-color: rgba(168,85,247,0.32); background-color: #262626 !important; }

.broll-shot-row.open { border-color: rgba(168,85,247,0.34); background-color: #282828 !important; }

.broll-shot-row.selected { border-color: rgba(168,85,247,0.34); background-color: #282828 !important; }
.broll-shot-desc { color: #E8E8E8 !important; line-height: 1.35; }
.broll-shot-note-dot { font-size: 9px; }

.broll-shot-meta { color: #5E5E5E !important; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.broll-shot-detail {
    margin-top: 9px; padding: 9px 0 0; background: none !important;
    border-top: 1px solid #333; border-radius: 0;
}
.broll-detail-label { color: #777 !important; font-size: 10px; margin-bottom: 5px; }
.broll-tag-chip { font-size: 10px; padding: 2px 6px; }
.broll-add-input { font-size: 11px; padding: 5px 8px; }
.broll-mini-btn { font-size: 10px; padding: 4px 8px; background-color: #333 !important; color: #DDD !important; }
.broll-mini-btn:hover { background-color: #3E3E3E !important; }
.broll-foot { padding: 9px 16px; border-top: 1px solid #2A2A2A; }

body.broll-mode .column-header { display: none !important; }

.broll-pill {
    background-color: #E6F7F5 !important;
    color: #0F6E63 !important;
    border-color: #7ACFC4 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12),
                0 2px 8px rgba(20, 184, 166, 0.18) !important;
}
.broll-pill:hover { background-color: #D6F0EC !important; }
.broll-pill-dot {
    background-color: #14B8A6 !important;
    box-shadow: 0 0 7px rgba(20, 184, 166, 0.8) !important;
}
.broll-overlay-bar { background-color: #14B8A6 !important; }

.broll-overlay-bar.broll-overlay-multi { background-color: #0D9488 !important; }
.word.broll-drop-target { background-color: rgba(20, 184, 166, 0.22) !important; }

.broll-overlay-label {
    position: fixed;
    font-size: 8px;
    letter-spacing: 0.3px;
    color: #14B8A6;
    white-space: nowrap;
    pointer-events: none;
    z-index: 41;
    opacity: 0;
}

.broll-shelf-list {
    width: calc(100% + 17px);

    padding: 8px 27px 52px 10px;
    box-sizing: border-box;
}

.broll-shelf-row.free .broll-shelf-desc { color: #6D28D9 !important; }
.broll-shelf-row.free .broll-shelf-num { color: #A78BFA !important; }
.broll-shelf-row.used .broll-shelf-desc,
.broll-shelf-row.used .broll-shelf-num { color: #9CA3AF !important; }
.broll-shelf-row.repeated .broll-shelf-desc { color: #C2410C !important; }
.broll-shelf-row.repeated .broll-shelf-num { color: #EA7B22 !important; }
.broll-shelf-row.repeated::after {
    content: "used twice"; margin-left: 8px; flex-shrink: 0;
    font-size: 8px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
    color: #EA7B22 !important;
}

.broll-shelf-row {
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 6px; padding: 7px 10px; background-color: #FFFFFF !important;
    display: flex; align-items: baseline;
}

.broll-shelf-row.used { border-color: #E8E8E8 !important; background-color: #FAFAFA !important; }
.broll-shelf-row.used .broll-shelf-desc { color: #AFAFAF !important; }

.broll-shelf-row.used .broll-shelf-num { color: #DADADA !important; }
.broll-shelf-row.used .broll-shelf-len { color: #CFCFCF !important; }
.broll-shelf-desc { flex: 1; color: #333 !important; font-size: 12px; line-height: 1.35; }
.broll-shelf-len { color: #BBB !important; font-size: 10px; white-space: nowrap; }

.broll-shelf-act {
    font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap;
    color: #8A8A8A !important;
}
.broll-shelf-act:hover { color: var(--accent-purple) !important; }
.broll-shelf-row.used .broll-shelf-act { color: #AAA !important; }

.broll-shelf-row.used .broll-shelf-act:hover { color: var(--accent-purple) !important; }
.broll-shelf-empty { padding: 22px 14px; color: #999 !important; font-size: 12px; text-align: center; }

.broll-badge { margin-right: 10px; }
#broll-view-name { margin-right: 10px; }

#broll-view-status { flex: 1 1 auto; color: #666 !important; font-size: 11px; }
#broll-active-wrap { flex: 0 0 auto; }
.broll-active-label { margin-right: 6px; }
.broll-progress-row > * + * { margin-left: 10px; }
.broll-search-row > * + * { margin-left: 8px; }
.broll-shot-top > * + * { margin-left: 10px; }

.broll-shot-desc { margin-right: 10px; }
.broll-shot-note-dot { margin-right: 10px; }

.broll-shelf-desc { margin-right: 10px; }
.broll-shelf-act { margin-right: 10px; }
.broll-shelf-len { margin-right: 0; }
.broll-search-input { margin-right: 8px; }

.broll-foot > * + * { margin-left: 8px; }

.broll-chips > * { margin-right: 5px; margin-bottom: 5px; }
.broll-add-row > * + * { margin-left: 6px; }

.broll-shelf-row > * + * { margin-left: 10px; }
.broll-shelf-list > * + * { margin-top: 4px; }

body.broll-mode #draft-content-scroll-thumb { display: none !important; }

body.broll-placing #draft-content { cursor: crosshair; }
body.broll-placing .word:hover {
    background-color: #CFF3EE !important;
    color: #0F3F3A !important;
    border-radius: 2px;
}

.broll-shelf-row.armed {
    border-color: #14B8A6 !important;
    background-color: #F2FBFA !important;
}
.broll-shelf-row.armed .broll-shelf-act { color: var(--accent-purple) !important; }

.broll-go-btn {
    font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
    color: #A8A8A8 !important;
    border: 1px solid #E0E0E0;
    border-radius: 3px; padding: 1px 5px;
    cursor: pointer; white-space: nowrap;
    margin-left: 10px;
}
.broll-go-btn:hover {
    color: var(--accent-purple) !important;
    border-color: var(--accent-purple);
    background-color: rgba(168,85,247,0.14) !important;
}

.broll-shelf-num {
    font-size: 9px; font-weight: 400;
    color: #BBB !important;
    padding: 0; margin-right: 8px;
    min-width: 13px; text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.broll-anchor-start,
.broll-anchor-end {
    display: inline !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    caret-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.editor-columns.broll-expanded .column-right { display: none !important; }
.editor-columns.broll-expanded .column-center { flex: 1 1 100% !important; }

.editor-columns.broll-expanded #center-resize-handle { display: none !important; }

.broll-expand-btn {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 4px;
    cursor: pointer; margin-right: 9px; flex-shrink: 0;
    color: #888 !important;
}
.broll-expand-btn svg { stroke: currentColor; }
.broll-expand-btn:hover, .broll-expand-btn.active {
    background-color: rgba(168, 85, 247, 0.14) !important;
    color: var(--accent-purple) !important;
}

.broll-expand-btn.spinning svg { opacity: 0.45; }

.broll-needs-look {
    font-size: 9px; font-weight: 700;
    color: #E0A458 !important;
    border: 1px solid rgba(224, 164, 88, 0.5);
    border-radius: 3px; padding: 0 4px; margin-right: 10px;
    cursor: help;
}

.msg-ai .suggested-prompts { justify-content: flex-start; max-width: none; }

.broll-shelf-lock {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
    cursor: pointer; margin-left: 10px;
    color: #DCDCDC !important;
    -webkit-user-select: none; user-select: none;
}

.broll-shelf-lock svg { stroke: currentColor; fill: none !important; }
.broll-shelf-lock svg rect, .broll-shelf-lock svg path { fill: none !important; }
.broll-shelf-lock:hover { color: #A0A0A0 !important; }
.broll-shelf-row.locked { border-color: #E8E8E8 !important; background-color: #FBFBFB !important; }
.broll-shelf-row.locked .broll-shelf-desc { color: #9A9A9A !important; }
.broll-shelf-row.locked .broll-shelf-lock { color: #A8A8A8 !important; }

.broll-note-edit { cursor: text; }
.broll-note-empty {
    color: var(--accent-purple) !important;
    font-size: 11px; margin-bottom: 6px; opacity: 0.85;
}
.broll-note-empty:hover { opacity: 1; text-decoration: underline; }
.broll-detail-note.broll-note-edit:hover { background-color: rgba(168, 85, 247, 0.06) !important; }

.broll-note-box {
    width: 100%; box-sizing: border-box;
    font-family: inherit; font-size: 11px; line-height: 1.45;
    color: #E8E8E8 !important; background-color: #232323 !important;
    border: 1px solid var(--accent-purple) !important; border-radius: 4px;
    padding: 5px 7px; margin-bottom: 6px; resize: none;
    -webkit-appearance: none; outline: none !important;
    caret-color: var(--accent-purple) !important;
}

.broll-desc-edit { cursor: text; }
.broll-desc-edit:hover { background-color: rgba(168, 85, 247, 0.07) !important; border-radius: 3px; }

.broll-desc-box {
    flex: 1; min-width: 0; margin-right: 10px;
    font-family: inherit; font-size: 12px;
    color: #E8E8E8 !important; background-color: #232323 !important;
    border: 1px solid var(--accent-purple) !important; border-radius: 4px;
    padding: 2px 6px;
    -webkit-appearance: none; outline: none !important;
    caret-color: var(--accent-purple) !important;
}

.unused-words-panel {
    border-bottom: 1px solid #EAEAEA !important;
    box-sizing: border-box !important;
}

#broll-shelf-panel.unused-words-panel {
    max-height: 52% !important;
    min-height: 240px !important;
}

.suggested-prompt-chip.chip-primary {
    color: var(--accent-purple) !important;
    border-color: rgba(168, 85, 247, 0.55) !important;
    font-weight: 600;
}
.suggested-prompt-chip.chip-primary:hover {
    background-color: rgba(168, 85, 247, 0.10) !important;
    border-color: var(--accent-purple) !important;
}

.broll-rating-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-right: 8px; flex-shrink: 0;
}
.broll-rating-row { display: flex; flex-wrap: wrap; margin-bottom: 8px; }

.broll-rating-pick {
    display: inline-flex; align-items: center;
    font-size: 10px; color: #E8E8E8 !important;
    border: 1px solid #3A3A3A; border-radius: 4px;
    padding: 2px 7px; margin-right: 6px; margin-bottom: 4px;
    cursor: pointer;
}
.broll-rating-pick:hover { border-color: #5A5A5A; color: #FFFFFF !important; }
.broll-rating-pick.on {
    border-color: var(--accent-purple);
    color: #FFFFFF !important;
    background-color: rgba(168,85,247,0.18) !important;
}
.broll-rating-swatch {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 5px;
}

.broll-shot-num {
    font-size: 9px; font-weight: 400;
    color: #5E5E5E !important;
    padding: 0; margin-right: 8px;
    min-width: 13px; text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.broll-shot-row.used .broll-shot-desc { color: #A4A4A4 !important; }
.broll-shot-row.used .broll-shot-num { color: #454545 !important; }
.broll-shot-row.used .broll-shot-meta { color: #CFCFCF !important; }

.broll-shelf-insert {
    font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap;
    color: #8A8A8A !important; margin-right: 10px;
}
.broll-shelf-insert:hover { color: #0D9488 !important; }
.broll-shelf-row.locked .broll-shelf-insert { color: #C4C4C4 !important; }

.live-badge {

    display: flex; align-items: center;
    font-size: 9px; font-weight: 700; letter-spacing: 0.8px;
    color: #0D9488 !important;
    border: 1px solid rgba(13,148,136,0.35);
    border-radius: 10px; padding: 2px 8px;
    margin-left: 12px; cursor: default;
    -webkit-user-select: none; user-select: none;
}
.live-badge-dot {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background-color: #0D9488 !important; margin-right: 5px;
}

.offscript-overlay {

    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    background-color: rgba(255,255,255,0.82) !important;
    padding: 24px;
}
.offscript-card {
    max-width: 340px; text-align: center;
    background-color: #FFFFFF !important;
    border: 1px solid #E6E6E6; border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}
.offscript-title { font-size: 13px; font-weight: 600; color: #333 !important; margin-bottom: 6px; }
.offscript-body { font-size: 11.5px; line-height: 1.5; color: #777 !important; margin-bottom: 14px; }
.offscript-actions { display: flex; justify-content: center; }
.offscript-btn {
    font-size: 11px; font-weight: 600; cursor: pointer;
    color: var(--accent-purple) !important;
    border: 1px solid rgba(168,85,247,0.45); border-radius: 5px;
    padding: 5px 11px; margin-right: 8px;
}
.offscript-btn:hover { background-color: rgba(168,85,247,0.10) !important; }
.offscript-btn.secondary { color: #888 !important; border-color: #E0E0E0; }
.offscript-btn.secondary:hover { background-color: rgba(0,0,0,0.03) !important; }

.broll-shelf-insert.done { color: #AAA !important; font-weight: 600; }
.broll-shelf-insert.done:hover { color: #0D9488 !important; }

.broll-detail-footer {
    display: flex; align-items: center;
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid #2E2E2E;
}
.broll-detail-footer .broll-rating-row { margin-bottom: 0; flex: 1; }
.broll-detail-footer .broll-rating-pick { margin-bottom: 0; }

.broll-exclude-link {
    font-size: 10px; color: #7A7A7A !important;
    cursor: pointer; white-space: nowrap; margin-left: 10px;
}
.broll-exclude-link:hover { color: #C4C4C4 !important; text-decoration: underline; }

.broll-excluded-tag {
    font-size: 9px; font-weight: 600; letter-spacing: 0.3px;
    color: #7A7A7A !important;
    border: 1px solid #3A3A3A; border-radius: 3px;
    padding: 0 5px; margin-right: 10px;
    white-space: nowrap; flex-shrink: 0;
}

.seq-bin-header {
    display: flex; align-items: center;
    padding: 7px 16px;
    font-size: 10px; font-weight: 500; letter-spacing: 0.3px;
    color: #8A8A8A !important;
    background-color: rgba(255,255,255,0.02) !important;
    border-bottom: 1px solid #2A2A2A;
    cursor: pointer;
    -webkit-user-select: none; user-select: none;
}
.seq-bin-header:hover { color: #C4C4C4 !important; background-color: rgba(255,255,255,0.04) !important; }
.seq-bin-arrow { font-size: 9px; margin-right: 6px; color: #6E6E6E !important; flex-shrink: 0; }
.seq-bin-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.broll-look-again {
    font-size: 10px; color: #7A7A7A !important;
    cursor: pointer; white-space: nowrap; margin-left: 10px;
}
.broll-look-again:hover { color: #C4B5FD !important; text-decoration: underline; }

.broll-badge.active-reel {
    color: #FB923C !important;
    border-color: #FB923C !important;
}

.dropdown-menu,
.context-menu,
.custom-context-menu,
.history-menu,
.compare-to-version-menu,
.submenu-flyout {
    border-color: rgba(168, 85, 247, 0.28) !important;
    box-shadow: 0 6px 22px rgba(0,0,0,0.6),
                0 0 0 1px rgba(168, 85, 247, 0.10),
                0 0 34px rgba(168, 85, 247, 0.16) !important;
}

.secondary-broll-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 10px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
    padding: 6px 14px; border-radius: 5px;
    cursor: pointer; white-space: nowrap;

    background-color: #EA7B22 !important;
    color: #FFFFFF !important;
    border: 1px solid #EA7B22;
    -webkit-user-select: none; user-select: none;
}

.secondary-broll-btn:hover {
    background-color: #FB923C !important;
    border-color: #FB923C;
}

.secondary-broll-btn.disabled {
    pointer-events: none;
    background-color: transparent !important;
    color: #6A6A6A !important;
    border-color: #3A3A3A !important;
}

.hint-content { width: 280px; position: relative; padding: 0; }

#hint-modal { background-color: transparent !important; z-index: 10002; }

.hint-shade { position: fixed; background-color: rgba(0, 0, 0, 0.55) !important; }
.hint-ring {
    position: fixed; border: 2px solid var(--accent-purple);
    border-radius: 4px; pointer-events: none;
}

.hint-head {
    display: flex; align-items: center;
    padding: 14px 18px 12px;
    border-bottom: 1px solid #262626;
    font-size: 14px; font-weight: 600; color: #F5F3F8 !important;
}
.hint-body { padding: 14px 18px 0; }

.hint-content .modal-actions { padding: 14px 18px 16px; margin-top: 0; }

.hint-icon { display: flex; align-items: center; margin-right: 9px; flex-shrink: 0; }
.hint-icon svg {
    width: 15px; height: 15px;
    stroke: var(--accent-purple) !important;
    fill: none !important;
}
.hint-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background-color: var(--accent-purple) !important;
    flex-shrink: 0;
}
.hint-line { font-size: 12px; color: var(--text-muted) !important; line-height: 1.55; }
.hint-line + .hint-line { margin-top: 9px; }

.hint-content.wide { width: 420px; }
.hint-cols { display: flex; gap: 22px; }
.hint-col { flex: 1; }
.hint-col-rule { width: 1px; background-color: #262626 !important; flex-shrink: 0; }
.hint-col-icon {
    width: 18px; height: 18px; display: block; margin-bottom: 9px;

    stroke: var(--accent-purple) !important; fill: none !important;
}
.hint-col-title { color: #EDEAF2 !important; font-size: 12px; font-weight: 600; margin-bottom: 5px; }

body.hint-open textarea,
body.hint-open input,
body.hint-open select {
    visibility: hidden !important;
}
body.hint-open #hint-modal textarea,
body.hint-open #hint-modal input,
body.hint-open #hint-modal select {
    visibility: visible !important;
}

body.hint-open #broll-overlay-layer { visibility: hidden !important; }

body.hint-open .broll-detail-card,
body.modal-open .broll-detail-card,
body.menu-open .broll-detail-card { visibility: hidden !important; }

body.modal-open textarea,
body.modal-open input,
body.modal-open select,
body.menu-open textarea,
body.menu-open input,
body.menu-open select {
    visibility: hidden !important;
}

body.modal-open .modal-overlay.modal-top textarea,
body.modal-open .modal-overlay.modal-top input,
body.modal-open .modal-overlay.modal-top select,
body.menu-open .dropdown-menu textarea,
body.menu-open .dropdown-menu input,
body.menu-open .dropdown-menu select,
body.menu-open .submenu-flyout textarea,
body.menu-open .submenu-flyout input,
body.menu-open .submenu-flyout select,
body.menu-open .history-menu textarea,
body.menu-open .history-menu input,
body.menu-open .history-menu select {
    visibility: visible !important;
}

.logo.logo-live { color: #2DD4BF !important; }
.logo.logo-live .wm-halo path { stroke: #14B8A6 !important; }

.logo.logo-live.logo-busy-0 { color: hsl(172, 72%, 40.0%) !important; }
.logo.logo-live.logo-busy-1 { color: hsl(172, 72%, 41.3%) !important; }
.logo.logo-live.logo-busy-2 { color: hsl(172, 72%, 44.5%) !important; }
.logo.logo-live.logo-busy-3 { color: hsl(172, 72%, 49.2%) !important; }
.logo.logo-live.logo-busy-4 { color: hsl(172, 72%, 54.8%) !important; }
.logo.logo-live.logo-busy-5 { color: hsl(172, 72%, 60.9%) !important; }
.logo.logo-live.logo-busy-6 { color: hsl(172, 72%, 66.5%) !important; }
.logo.logo-live.logo-busy-7 { color: hsl(172, 72%, 71.2%) !important; }
.logo.logo-live.logo-busy-8 { color: hsl(172, 72%, 74.4%) !important; }
.logo.logo-live.logo-busy-9 { color: hsl(172, 72%, 76.0%) !important; }
.live-push { border-color: #0D9488 !important; color: #0D9488 !important; }
.live-push:hover { background-color: rgba(13, 148, 136, 0.08) !important; }

.ai-btn.live-push { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.10) !important; }
.ai-btn.live-push:hover { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18), 0 0 12px rgba(13, 148, 136, 0.25) !important; color: #0D9488 !important; }

.rule-builtin { padding: 8px 16px 9px; border-top: 1px solid #F3F4F6; font-size: 12px; color: #1F2937 !important; }
.rule-builtin-head { display: flex; align-items: center; gap: 8px; }
.rule-builtin-name { flex: 1; font-weight: 600; }
.rule-builtin-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7280 !important; border: 1px solid #E5E7EB; border-radius: 3px; padding: 1px 5px; }
.builtin-toggle { flex-shrink: 0; width: 26px; height: 15px; border-radius: 8px; position: relative; background-color: #E5E7EB !important; cursor: pointer; }
.builtin-toggle.on { background-color: var(--accent-purple) !important; }
.builtin-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background-color: #FFFFFF !important; transition: left 0.15s ease; }
.builtin-toggle.on::after { left: 13px; }
.rule-builtin-blurb { color: #6B7280 !important; font-size: 11px; margin: 3px 0 6px; }
.rule-builtin-options { display: flex; gap: 4px; }
.rule-builtin-opt { font-size: 11px; padding: 2px 8px; border-radius: 4px; border: 1px solid #E5E7EB; color: #4B5563 !important; cursor: pointer; }
.rule-builtin-opt.on { border-color: var(--accent-purple); color: var(--accent-purple) !important; background-color: rgba(139, 92, 246, 0.08) !important; }
.rule-builtin.off .rule-builtin-options, .rule-builtin.off .rule-builtin-blurb { opacity: 0.5; }
.rule-builtin.live .builtin-toggle.on { background-color: #0D9488 !important; }
.rule-builtin.live .rule-builtin-tag { color: #0D9488 !important; border-color: rgba(13, 148, 136, 0.35); }
.rule-builtin.live .rule-builtin-opt.on { border-color: #0D9488; color: #0D9488 !important; background-color: rgba(13, 148, 136, 0.08) !important; }
#rules-scope-tab-arrange { color: #0D9488 !important; }
#rules-scope-tab-arrange.active { color: #0D9488 !important; background-color: rgba(13, 148, 136, 0.10) !important; }

.suggested-prompt-chip.chip-live { color: #0D9488 !important; border-color: rgba(13, 148, 136, 0.45) !important; }
.suggested-prompt-chip.chip-live:hover { background-color: rgba(13, 148, 136, 0.08) !important; border-color: #0D9488 !important; }
.live-welcome svg { color: #0D9488; }

.broll-similar-offer { font-size: 10px; color: #9A9A9A !important; margin: -6px 0 12px; line-height: 1.5; }
.broll-similar-offer .broll-look-again { color: #C084FC !important; }
.broll-similar-offer .broll-look-again + .broll-look-again { color: #7A7A7A !important; }

.tidy-preview { border: 1px solid #2E2E2E; border-radius: 6px; background: #161616; padding: 8px 10px; margin: 0 0 10px 0; }
.tidy-head { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #9A9A9A; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.tidy-row { font-size: 11px; color: #C8C8C8; padding: 4px 0; border-top: 1px solid #222; }
.tidy-row:first-of-type { border-top: none; }
.tidy-row.done { color: #7A7A7A; }
.tidy-row .broll-look-again { margin-left: 8px; color: #C084FC !important; }
.tidy-row .broll-look-again + .broll-look-again { color: #7A7A7A !important; }
.tidy-state { margin-left: 8px; color: #6A6A6A; font-size: 10px; }
.broll-person-look { font-size: 10px; color: #7A7A7A; margin: -6px 0 10px 0; }

.storage-row { border-top: 1px solid #222; padding: 10px 0; }
.storage-row:first-child { border-top: none; }
.storage-top { display: flex; align-items: baseline; gap: 8px; }
.storage-name { font-size: 12px; color: #C8C8C8; flex: 1; }
.storage-sub { color: #7A7A7A; }
.storage-size { font-size: 12px; color: #C8C8C8; }
.storage-size.heavy { color: #E0A458; font-weight: 500; }
.storage-why { font-size: 10.5px; color: #7A7A7A; margin-top: 2px; }
.storage-why.keep { color: #6EE7B7; }
.storage-act { margin-top: 7px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.storage-btn { font-size: 11px; color: #C084FC; cursor: pointer; border: 1px solid #3A3A3A; border-radius: 6px; padding: 4px 10px; }
.storage-btn.danger { color: #F87171; border-color: #5A2A2A; }
.storage-note { font-size: 10.5px; color: #7A7A7A; }

.diag-panel { display: flex; flex-direction: column; min-height: 0; background: #1E1E1E; border: 1px solid #2A2A2A; border-radius: 8px; width: 560px !important; max-width: 92vw; max-height: 88vh; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.5); padding: 0; }
.diag-panel { gap: 0; row-gap: 0; }   
.diag-panel > * { flex-shrink: 0; margin-top: 0; margin-bottom: 0; }
.diag-panel > .diag-body { flex: 1 1 auto; flex-shrink: 1; min-height: 0; overflow-y: auto; padding-bottom: 6px; }
.diag-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid #2A2A2A; }
.diag-head-tools { display: flex; align-items: center; }
.diag-head-tools .diag-btn { margin-right: 10px; }
.diag-title { font-size: 15px; font-weight: 600; color: #E8E8E8; }
.diag-sub { font-size: 11.5px; color: #888; margin-top: 3px; }
.diag-link { color: #A855F7; cursor: pointer; }
.diag-x { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #6A6574; cursor: pointer; font-size: 13px; }
.diag-x:hover { color: #E8E6EC; background: #242427; }
.diag-section { padding: 14px 20px 0; }
.diag-label { display: flex; align-items: baseline; justify-content: space-between; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #888; letter-spacing: .5px; margin-bottom: 8px; }
.diag-label-num { color: #6A6574; font-weight: 400; letter-spacing: 0; text-transform: none; }
.diag-note { font-size: 10.5px; color: #888; margin: 4px 1px 0; }
.diag-btn { border: 1px solid #3A3A3A; font-size: 11.5px; padding: 5px 12px; border-radius: 5px; color: #C8C8C8; cursor: pointer; white-space: nowrap; }
.diag-btn.primary { background: #A855F7; border-color: #A855F7; color: #fff; }
.diag-btn.danger { border-color: #4A2222; color: #EF4444; }
.diag-btn.small { font-size: 11px; padding: 3px 9px; }
.diag-btn[title] { cursor: help; }
.diag-btn[title]:hover { border-color: #A855F7; color: #E8E8E8; }
.diag-btn.primary[title]:hover { color: #fff; }
.diag-actions { display: flex; flex-wrap: wrap; align-items: center; margin: 4px 0 3px; }
.diag-actions .diag-btn { margin: 0 8px 6px 0; }   

.diag-hist { display: flex; align-items: center; padding: 2px 0 4px; }
.diag-dot { width: 8px; height: 8px; border-radius: 50%; background: #6A6574; flex-shrink: 0; margin-right: 10px; }
.diag-dot.ok { background: #6EE7B7; }
.diag-dot.warn { background: #E0A52E; }
.diag-dot.bad { background: #EF4444; }
.diag-hist-text { flex: 1; min-width: 0; padding-right: 12px; }
.diag-hist-state { font-size: 12.5px; color: #B4B1BC; }
.diag-path { font-family: ui-monospace, monospace; font-size: 10px; color: #6A6574; margin-top: 2px; word-break: break-all; user-select: text; -webkit-user-select: text; }

.diag-list { margin-top: 2px; }
.diag-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #222225; }
.diag-row:last-child { border-bottom: none; }
.diag-row.flag { background: rgba(168,85,247,.07); }
.diag-row .n { flex: 1; min-width: 0; padding-right: 10px; font-size: 12.5px; color: #B4B1BC; }
.diag-row .sub { display: block; font-size: 11px; color: #6A6574; margin-top: 2px; }
.diag-row .v { width: 72px; flex-shrink: 0; text-align: right; font-size: 12px; color: #8A8594; }
.diag-row.flag .v { color: #A855F7; font-weight: 500; }
.diag-row .act { width: 78px; flex-shrink: 0; text-align: right; }
.diag-row .diag-btn.row { border: none; padding: 0; font-size: 12px; color: #8B7BC8; background: none; }
.diag-row .diag-btn.row:hover { color: #C084FC; }
.diag-kept { font-size: 10.5px; color: #6EE7B7; border: 1px solid rgba(110,231,183,.35); border-radius: 9px; padding: 1px 8px; cursor: help; }

.diag-folds { padding: 0 20px; margin-top: 14px; border-top: 1px solid #242427; }
.diag-fold + .diag-fold .diag-fold-head { border-top: 1px solid #222225; }
.diag-fold-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; cursor: pointer; }
.diag-fold-name { font-size: 12.5px; color: #B4B1BC; }
.diag-sub-inline { color: #6A6574; }
.diag-fold-tools { display: flex; align-items: center; }

.diag-chev { color: #6B6577; font-size: 13px; line-height: 1; }
.diag-fold.open .diag-chev { color: #A855F7; }
.diag-fold-body { display: none; padding-bottom: 12px; }
.diag-fold.open .diag-fold-body { display: block; }
.diag-logbar { display: flex; align-items: center; padding: 0 0 8px; }
.diag-switch { display: flex; border: 1px solid #2A2A2A; border-radius: 5px; overflow: hidden; flex-shrink: 0; margin-right: 8px; }
.diag-seg { font-size: 11px; color: #8A8594; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.diag-seg.on { background: #2A2433; color: #E8E6EC; }
.diag-search { flex: 1; min-width: 0; background: #141414; border: 1px solid #2A2A2A; border-radius: 4px; padding: 4px 8px; font-size: 11px; color: #C8C8C8; outline: none; margin-right: 8px; }
.diag-log { padding: 8px 10px; font-family: ui-monospace, monospace; font-size: 10px; line-height: 1.7; color: #9A9A9A; background: #141414; height: 190px; min-height: 120px; max-height: 420px; overflow-y: auto; resize: vertical; border-radius: 4px; }
.diag-log .err { color: #E0A52E; }
.diag-log .hit { color: #E8E8E8; }
.diag-erase-row { display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed #3A3A3A; margin-top: 10px; padding-top: 10px; }
.diag-erase-note { font-size: 11.5px; color: #8A8594; padding-right: 12px; }
.diag-row .act:empty { width: 0; }

#link-panel { z-index: 10001; background-color: rgba(0, 0, 0, 0.45); }
.link-panel { display: flex; flex-direction: column; min-height: 0; background: #1E1E1E; border: 1px solid #2A2A2A; border-radius: 8px; width: 540px !important; max-width: 90vw; max-height: 80vh; padding: 0 !important; overflow: hidden; gap: 0; row-gap: 0; }
.link-panel > * { flex-shrink: 0; margin-top: 0; margin-bottom: 0; }
.link-panel > .link-body { flex: 1 1 auto; flex-shrink: 1; min-height: 0; overflow-y: auto; }
.link-tabs { display: flex; padding: 0 20px; border-bottom: 1px solid #2A2A2A; }
.link-tab { font-size: 12px; color: #8A8594; padding: 9px 0 8px; margin-right: 18px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.link-tab.on { color: #E8E6EC; border-bottom-color: #A855F7; }
.link-pane { padding: 12px 20px 10px; }
.link-inuse { display: flex; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid #222225; }
.link-inuse-label { font-size: 11.5px; color: #8A8594; margin-right: 8px; flex-shrink: 0; }
.link-inuse-text { flex: 1; min-width: 0; }
.link-inuse-name { font-size: 12.5px; color: #B4B1BC; }
.link-listbar { display: flex; justify-content: flex-end; padding: 10px 0 6px; }
.link-list { margin-top: 2px; }
.link-row { display: flex; align-items: center; padding: 8px 8px; border: 1px solid transparent; border-radius: 6px; margin-bottom: 4px; cursor: pointer; }
.link-row:hover { background: #232326; }
.link-row.on { border-color: #A855F7; background: rgba(168,85,247,.08); }
.link-row .c1 { flex: 1; min-width: 0; padding-right: 10px; font-size: 12.5px; color: #B4B1BC; }
.link-row .c2 { width: 120px; flex-shrink: 0; font-size: 11.5px; color: #8A8594; padding-right: 8px; }
.link-row .c3 { width: 90px; flex-shrink: 0; text-align: right; font-size: 11.5px; color: #8A8594; }
.link-row .sub { display: block; font-size: 10.5px; color: #6A6574; margin-top: 2px; }
.link-tl { cursor: default; }
.link-tl .c3 { width: 170px; text-align: right; }

.link-dd { display: inline-block; width: 160px; box-sizing: border-box; font-size: 11.5px; color: #C8C5CE; background: #141414; border: 1px solid #2A2A2A; border-radius: 4px; padding: 4px 8px; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-dd:hover { border-color: #3A3A3A; }
.link-dd-menu { position: fixed; top: 0; left: 0; margin-top: 0; z-index: 10040; min-width: 180px; max-height: 240px; overflow-y: auto; }
.link-dd-menu .dropdown-item.on { color: #E8E6EC !important; background: rgba(168,85,247,.12) !important; }
.link-empty { font-size: 12px; color: #8A8594; padding: 14px 2px; }
.link-foot { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid #2A2A2A; }
.link-foot .diag-btn { margin-left: 10px; }
.link-foot .diag-btn.off { opacity: .45; cursor: default; }

.broll-status-act { color: #C084FC; cursor: pointer; margin-left: 8px; border-bottom: 1px dotted rgba(192,132,252,.5); }
.broll-status-act:hover { color: #E9D5FF; border-bottom-color: #E9D5FF; }

#broll-view-head .broll-badge { white-space: nowrap; flex: 0 0 auto; }
#broll-view-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; max-width: 42%; }
#broll-view-status {
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: right; padding-right: 4px;
}
.broll-status-act { white-space: nowrap; }

.modal-content.style-panel {
    width: 720px !important; max-width: 94vw;
    height: 560px; max-height: 88vh;
    background: #1B1B1E; border: 1px solid #2A2A2A; border-radius: 8px;
    padding: 0 !important; gap: 0 !important;
    display: flex; flex-direction: column; overflow: hidden;
}

.style-panel .style-head {
    flex: 0 0 auto; display: flex; align-items: center;
    padding: 11px 16px; border-bottom: 1px solid #242427;
}
.style-panel .style-head h3 { flex: 0 0 auto; margin: 0 8px 0 0; font-size: 14px; font-weight: 600; color: #E8E8E8; }
.style-panel .style-head-quiet {
    flex: 0 0 auto; font-size: 10.5px; color: #6A6574;
    padding: 3px 7px; border-radius: 5px; cursor: pointer; margin-right: 2px;
}
.style-panel .style-head-quiet:hover { color: #C084FC; background: #242427; }
.style-panel .style-close { flex: 0 0 auto; font-size: 14px; color: #6A6574; cursor: pointer; }
.style-panel .style-close:hover { color: #E8E8E8; }

.style-panel .style-body { flex: 1 1 auto; display: flex; min-height: 0; }
.style-panel .style-left { flex: 0 0 176px; border-right: 1px solid #242427; display: flex; flex-direction: column; min-height: 0; }
.style-panel .style-left-head { flex: 0 0 auto; padding: 11px 12px 5px; font-size: 9.5px; letter-spacing: .05em; color: #46424E; text-transform: uppercase; }
.style-panel .style-seqs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 8px; }
.style-panel .style-empty { font-size: 11.5px; color: #5a5560; padding: 6px 4px; margin: 0; line-height: 1.5; }
.style-panel .style-item { display: block; padding: 7px 8px; border-radius: 6px; margin-bottom: 3px; cursor: pointer; }
.style-panel .style-item:hover { background: #242427; }
.style-panel .style-name { display: block; font-size: 11.5px; color: #D6D2DE; line-height: 1.35; }
.style-panel .style-item em { display: block; font-size: 10px; color: #5a5560; margin-top: 2px; font-style: normal; }
.style-panel .style-item > div { font-size: 10px; color: #6A6574; cursor: pointer; margin-top: 3px; margin-right: 8px; display: inline-block; }
.style-panel .style-item > div:hover { color: #C084FC; }
.style-panel .style-forget-one:hover { color: #EF4444; }

.style-panel .style-left-foot { flex: 0 0 auto; padding: 8px; border-top: 1px solid #242427; position: relative; }
.style-panel .style-add {
    padding: 7px 9px; border: 1px dashed #3a3646; border-radius: 6px;
    text-align: center; font-size: 11px; color: #9A93A6; cursor: pointer;
}
.style-panel .style-add:hover { border-color: #A855F7; color: #C084FC; }

.style-panel .style-left-tools { display: flex; margin-top: 6px; }
.style-panel .style-left-tools .style-quiet {
    flex: 1 1 auto; text-align: center; font-size: 10.5px; color: #6A6574;
    background: none; border: 0; padding: 4px 2px; border-radius: 5px; cursor: pointer;
    margin-right: 6px;
}
.style-panel .style-left-tools .style-quiet:last-child { margin-right: 0; }
.style-panel .style-left-tools .style-quiet:hover { color: #C084FC; background: #242427; }

.style-panel .style-seq-menu {
    position: absolute; left: 8px; right: 8px; bottom: 100%; margin-bottom: 6px;
    background: #26262B; border: 1px solid #33303c; border-radius: 8px;
    max-height: 240px; overflow-y: auto; padding: 5px; z-index: 30;
    box-shadow: 0 -6px 20px rgba(0,0,0,.5);
}
.style-panel .style-seq-item { padding: 7px 9px; border-radius: 5px; font-size: 11.5px; color: #B4B1BC; cursor: pointer; }
.style-panel .style-seq-item:hover { background: #322E3E; color: #E8E6EC; }
.style-panel .style-seq-empty { padding: 8px 9px; font-size: 11px; color: #6A6574; line-height: 1.5; }

.style-panel .style-right { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.style-panel .style-pinned { flex: 0 0 auto; max-height: 46%; overflow-y: auto; padding: 12px 15px 6px; border-bottom: 1px solid #242427; }
.style-panel .style-state { background: #202023; border-radius: 8px; padding: 11px 13px; }
.style-panel .style-state p { margin: 0; }
.style-panel #style-state-title { font-size: 12.5px; font-weight: 400; color: #E8E8E8; }
.style-panel .style-how { margin: 5px 0 0 !important; font-size: 11.5px; color: #8b8593; line-height: 1.55; }
.style-panel .style-points-head { margin: 12px 0 4px; font-size: 9.5px; letter-spacing: .05em; color: #46424E; text-transform: uppercase; }
.style-panel .style-point { padding: 7px 0; border-bottom: 1px solid #232327; font-size: 12px; color: #D6D2DE; line-height: 1.5; }
.style-panel .style-point:last-child { border-bottom: 0; }
.style-panel .style-live { margin: 12px 0 0; font-size: 11px; color: #2DD4BF; }
.style-panel .style-live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #2DD4BF; margin-right: 6px; }

.style-panel .style-reading { background: #221E2B; border: 1px solid #33304a; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.style-panel .style-reading-title { margin: 0; font-size: 12px; color: #C084FC; }
.style-panel .style-reading-detail { margin: 5px 0 0; font-size: 11px; color: #8b8593; line-height: 1.55; white-space: pre-wrap; }
.style-panel .style-reading.done { background: #202023; border-color: #2A2A2A; }
.style-panel .style-reading.done .style-reading-title { color: #8b8593; }

.style-panel .style-detail { background: #202023; border-radius: 8px; padding: 11px 13px; margin-bottom: 10px; }
.style-panel .style-detail-head { display: flex; align-items: center; justify-content: space-between; }
.style-panel .style-detail-name { font-size: 12.5px; color: #E8E8E8; }
.style-panel .style-detail-head .style-quiet { font-size: 10.5px; color: #6A6574; background: none; border: 0; padding: 3px 6px; cursor: pointer; }
.style-panel .style-detail-head .style-quiet:hover { color: #C084FC; }
.style-panel .style-detail-stats { margin: 6px 0 0; font-size: 11px; color: #6A6574; }
.style-panel .style-detail-summary { margin: 6px 0 0; font-size: 11.5px; color: #8b8593; line-height: 1.55; }

.style-panel .style-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 15px 12px; }
.style-panel .style-talkrow { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.style-panel .style-talkhead { font-size: 9.5px; letter-spacing: .05em; color: #46424E; text-transform: uppercase; }
.style-panel .style-thread { font-size: 12px; }
.style-panel .style-msg { margin: 0 0 9px; }
.style-panel .style-msg b { display: block; font-size: 10px; color: #6A6574; margin-bottom: 2px; font-weight: 400; }
.style-panel .style-msg p { margin: 0; font-size: 12px; color: #D6D2DE; line-height: 1.55; }
.style-panel .style-msg.style-you b { color: #C084FC; }

.style-panel .style-foot { flex: 0 0 auto; border-top: 1px solid #242427; background: #1B1B1E; padding: 9px 15px 11px; }
.style-panel .style-ask { display: flex; align-items: flex-end; }
.style-panel .style-ask textarea {
    flex: 1 1 auto; min-width: 0; resize: none;

    height: 68px; min-height: 68px; max-height: 68px; overflow-y: auto;
    background: #232323; border: 1px solid #2A2A2A; border-radius: 6px;
    color: #E8E8E8; font-family: inherit; font-size: 12px; line-height: 1.5;
    padding: 7px 9px; box-sizing: border-box; margin: 0 8px 0 0;

    -webkit-appearance: none !important;
    appearance: none !important;
}
.style-panel .style-ask textarea:focus { outline: 0; border-color: #7A3FB0; }
.style-panel .style-ask textarea::placeholder { color: #6A6574; }
.style-panel .style-send {
    flex: 0 0 auto; height: 68px; display: flex; align-items: center;
    padding: 0 15px; border-radius: 6px; background: #A855F7; border: 1px solid #A855F7;
    color: #161618; font-size: 12px; cursor: pointer;
}
.style-panel .style-send:hover { background: #b972f8; }
.style-panel .style-off { display: flex; align-items: center; margin-top: 7px; font-size: 11px; color: #6A6574; cursor: pointer; }
.style-panel .style-off input { accent-color: #A855F7; margin: 0 6px 0 0 !important; flex: none; }
.style-panel .style-off.off span { color: #E0A458; }

.style-panel .style-head h3 { margin: 0 14px 0 0 !important; }
.style-panel .style-tab {
    flex: 0 0 auto; font-size: 11.5px; color: #6A6574; cursor: pointer;
    padding: 5px 11px; border-radius: 6px; margin-right: 6px; white-space: nowrap;
}
.style-panel .style-tab:hover { color: #C084FC; background: #242427; }
.style-panel .style-tab.on {
    color: #C084FC; background: rgba(168,85,247,.13); border: 1px solid rgba(168,85,247,.3);
    padding: 4px 10px;
}
.style-panel .style-head-spacer { flex: 1 1 auto; }

.style-panel .style-add {
    display: block; text-align: center; padding: 9px 10px; border: 0; border-radius: 6px;
    background: #A855F7; color: #161618; font-size: 11.5px; font-weight: 500; cursor: pointer;
}
.style-panel .style-add:hover { background: #b972f8; color: #161618; }

.style-panel .style-point { padding: 8px 0 8px 16px; position: relative; cursor: pointer; }
.style-panel .style-point::before {
    content: "\25CF"; position: absolute; left: 0; top: 8px;
    color: #A855F7; font-size: 8px; line-height: 1.9;
}
.style-panel .style-point:hover { color: #F0EDF5; }
.style-panel .style-points-head { margin: 0 0 5px; }

.style-panel .style-item.on { background: #26222F; box-shadow: inset 2px 0 0 #A855F7; }
.style-panel .style-msg.style-you b { color: #C084FC; }

.style-panel .style-pinned { flex: 1 1 auto; max-height: none; min-height: 0; border-bottom: 0; padding: 13px 16px 10px; }
.style-panel .style-state { border: 1px solid #2A2A2A; padding: 13px 14px; }
.style-panel #style-state-title { font-size: 13px; font-weight: 500; }
.style-panel .style-how { margin: 6px 0 0 !important; font-size: 11.5px; line-height: 1.6; }
.style-panel .style-scroll { padding: 12px 16px; }

.style-panel .style-foot { padding: 10px 16px 12px; }
.style-panel .style-off { margin-top: 0; }
.style-panel #style-ask + .style-tools { margin-top: 9px; }
.style-panel .style-tools { display: flex; align-items: center; }

.style-panel .style-attach {

    flex: 0 0 auto; width: 34px; height: 68px; display: flex; align-items: center; justify-content: center;
    border: 1px solid #2A2A2A; border-radius: 6px; background: #232323;
    color: #6A6574; cursor: pointer; margin-right: 9px; font-size: 14px;
    filter: grayscale(1); opacity: .42;
}
.style-panel .style-attach:hover { border-color: #A855F7; opacity: .95; filter: grayscale(.2); }
.style-panel .style-attached { display: none; margin-top: 10px; }
.style-panel .style-chip {
    display: inline-block; margin: 0 6px 6px 0; padding: 4px 9px;
    background: #26222F; border: 1px solid rgba(168,85,247,.3); border-radius: 5px;
    font-size: 10.5px; color: #C084FC;
}
.style-panel .style-chip i { font-style: normal; color: #6A6574; margin-left: 7px; cursor: pointer; }
.style-panel .style-chip i:hover { color: #EF4444; }

#api-modal .modal-content,
#account-modal .modal-content { position: relative; }
.api-modal-close {
    position: absolute; top: 12px; right: 14px;
    width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #6A6574; font-size: 13px; cursor: pointer;
}
.api-modal-close:hover { background: #242427; color: #E8E8E8; }
#api-modal .modal-actions { align-items: center; }
#api-modal .modal-actions .primary-btn { padding: 7px 15px; font-size: 12px; line-height: 1.4; white-space: nowrap; }
#api-modal #btn-disconnect-api { padding: 6px 13px; font-size: 11.5px; }
#api-modal #btn-api-help { font-size: 11.5px; }

.style-panel .style-rulenote { margin-top: 12px; font-size: 11px; color: #5a5560; line-height: 1.6; }
.style-panel .style-point.style-against { border-left: 2px solid #E0A458; padding-left: 12px; color: #E8E6EC; }
.style-panel .style-point.style-against::before { content: "!"; color: #E0A458; font-size: 10px; }

.notes-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #fff;
    width: calc(100% + 17px); box-sizing: border-box;
}
.notes-list::-webkit-scrollbar { width: 0; height: 0; }
.notes-row { border-bottom: 1px solid #F3F4F6; }
.notes-row.done { background: #FCFCFD; }

.notes-row.hit { background: #F5F0FD; }

.ntok.notes-text-selected { background-color: #A7C7E7 !important; color: #000 !important; }
.notes-top { display: flex; align-items: stretch; cursor: pointer; }
.notes-tc {
    flex: 0 0 76px; padding: 11px 12px 11px 14px; border-right: 1px solid #F3F4F6;
    font-size: 11px; color: #7C3AED; font-variant-numeric: tabular-nums; line-height: 1.4;
}
.notes-tc .notes-tc2 { display: block; color: #B9A6E0; margin-top: 2px; }
.notes-row.done .notes-tc { color: #C4C4C8; text-decoration: line-through; }
.notes-tc.lost { color: #C0392B; text-decoration: underline; text-decoration-style: dotted; }

.notes-arrow {
    flex: 0 0 auto; padding: 10px 8px 10px 12px; font-size: 12px; color: #9A93A6;
    align-self: flex-start; line-height: 1.3;
}
.notes-arrow.open { color: #7C3AED; }
.notes-row.done .notes-arrow { color: #DDD; }
.notes-txt { flex: 1; min-width: 0; padding: 11px 0; font-size: 12px; color: #111; line-height: 1.5; }
.notes-row.done .notes-txt { color: #B6B6BC; text-decoration: line-through; }
.notes-scope { display: block; font-size: 10px; color: #C4C4C8; margin-top: 2px; text-decoration: none; }
.notes-act { flex: 0 0 auto; padding: 9px 10px; display: flex; align-items: center; align-self: flex-start; }
.notes-dot { width: 5px; height: 5px; border-radius: 50%; background: #C9B6E8; display: inline-block; margin-right: 8px; }
.notes-ask {
    font-size: 10px; color: #7C3AED; border: 1px solid #E2D5F5; background: #FAF6FE;
    border-radius: 4px; padding: 3px 9px; white-space: nowrap; cursor: pointer;
}
.notes-ask:hover { background: #F3E9FD; }

.notes-tickcell {
    flex: 0 0 58px; border-left: 1px solid #F3F4F6; display: flex;
    align-items: flex-start; justify-content: center; padding: 11px 29px 11px 0; cursor: pointer;
    margin-right: 0;
}
.notes-bx { width: 13px; height: 13px; border-radius: 3px; border: 1px solid #D8D8DC; display: inline-block; }
.notes-bx.on {
    background: #22C55E; border-color: #22C55E; display: inline-flex;
    align-items: center; justify-content: center; color: #fff; font-size: 9px; line-height: 1;
}

.notes-open { padding: 0 60px 12px 108px; }
.notes-quote { font-size: 11.5px; color: #6B7280; line-height: 1.6; font-style: italic; padding-bottom: 9px; }
.notes-rlab { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: #B6B6BC; padding-bottom: 5px; }

.notes-rbox {
    width: 100%; box-sizing: border-box; resize: none; min-height: 48px;
    border: 1px solid #E7E7EA; border-radius: 5px; padding: 7px 9px;
    font-family: inherit; font-size: 11.5px; line-height: 1.5;
    background: #fff !important; color: #111 !important;
    -webkit-appearance: none !important; appearance: none !important;
}
.notes-rbox:focus { outline: 0; border-color: #C9B6E8; }
.notes-rbox::placeholder { color: #B6B6BC; }
.notes-fbtn {
    font-size: 10.5px; color: #7C3AED; border: 1px solid #E2D5F5; background: #FAF6FE;
    border-radius: 4px; padding: 4px 10px; cursor: pointer; margin-left: 8px; white-space: nowrap;
}
.notes-fbtn:hover { background: #F3E9FD; }
.notes-footleft { flex: 1; }
.notes-empty { padding: 10px 9px; font-size: 11.5px; color: #6A6574; line-height: 1.5; }
.notes-listfoot { display: flex; align-items: center; padding: 9px 46px 9px 14px; border-top: 1px solid #F3F4F6; font-size: 10.5px; color: #9CA3AF; }

.notes-list { padding-bottom: 76px; }
.notes-count { font-size: 10.5px; color: #9CA3AF; }

#btn-notes-refresh { cursor: pointer; }
#btn-notes-refresh.spinning svg { opacity: .45; }

#app-toast.toast-danger { background: #3A2020; border: 1px solid #7A2E2E; color: #FFD9D9; }

.notes-tc.lost { color: #C0392B; text-decoration: underline; text-decoration-style: dotted; }

.style-panel .style-thread-empty { margin: 0; font-size: 11.5px; color: #5a5560; line-height: 1.6; }

.first-tip {
    display: flex; align-items: flex-start;
    background: rgba(168, 85, 247, .10); border: 1px solid rgba(168, 85, 247, .28);
    border-radius: 7px; padding: 9px 11px; margin-bottom: 13px;
}
.first-tip-icon { color: #C9A6F5; font-size: 12px; line-height: 1.5; flex: 0 0 auto; margin-right: 9px; }
.first-tip-text { font-size: 11.5px; color: #C9BFD6; line-height: 1.55; }
.first-tip-got {
    margin-left: auto; font-size: 10.5px; color: #A855F7; cursor: pointer;
    white-space: nowrap; padding-left: 10px; flex: 0 0 auto;
}
.first-tip-got:hover { color: #C9A6F5; }

.broll-match-btn {
    font-size: 10px; color: #A855F7; border: 1px solid #3A3A3A; background: transparent;
    border-radius: 4px; padding: 3px 9px; cursor: pointer; white-space: nowrap; margin-left: 10px;
}
.broll-match-btn:hover { border-color: #A855F7; background: rgba(168, 85, 247, .08); }
.broll-match-btn.working { opacity: .5; pointer-events: none; }

.pipe-caption {
    align-self: center;
    max-width: 100%;
    text-align: center;
    font-size: 12px;
    color: #9CA3AF;
    padding: 0 12px 6px;
    line-height: 1.4;
    background: transparent;
    border: none;
}

.wf-divider {
    height: 1px;
    background-color: #C4B5FD;
    margin: 6px 16px;
}
.rule-row .wf-name { cursor: pointer; }
.rule-row.wf-legacy .rule-row-text { color: #6B7280 !important; }
.rule-row-text.named.wf-headline { font-weight: 700; }
.wf-stop {
    flex-shrink: 0;
    font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
    color: #6D28D9 !important;
    border: 1px solid #DDD6FE; border-radius: 3px;
    padding: 1px 5px; margin-right: 6px;
    cursor: pointer;
    -webkit-user-select: none; user-select: none;
}
.wf-stop:hover { color: #DC2626 !important; border-color: #FCA5A5; }
.rule-row.wf-live.wf-running .wf-stop { color: #0D9488 !important; border-color: #99F6E4; }

.rule-row.wf-running.wf-running-live { background-color: #F0FDFA !important; }
.rule-row.wf-running.wf-running-live .rule-row-text { color: #0D9488 !important; }
.rule-row.wf-running.wf-running-live .wf-stop { color: #0D9488 !important; border-color: #99F6E4; }

.rule-row .rule-row-text.wf-name { flex: 0 1 auto; }
.rule-row .rule-row-text.wf-name:hover { color: var(--accent-purple) !important; }
.rule-row .rule-row-text.wf-name.wf-hover-live:hover { color: #0D9488 !important; }

.rules-drawer.rules-dragging { transition: none !important; }

.pop-shot-option .pop-opt-why { display:block; font-size:10px; opacity:.75; margin-top:2px; }
.pop-shot-option .pop-opt-state { display:block; font-size:9px; text-transform:uppercase; letter-spacing:.04em; opacity:.6; margin-top:3px; }
.pop-shot-option.is-busy { opacity:.5; pointer-events:none; }

body.vireo-live #btn-selects-v2 svg { stroke: #0D9488 !important; }
body.vireo-live #btn-selects-v2 .btn-label { color: #0D9488 !important; }

.context-menu.ctx-beside-list { z-index: 4100; }

.scratch-choices { display: flex; flex-direction: column; margin-top: 4px; }
.scratch-choices .scratch-choice { margin-bottom: 2px; }   
.scratch-choice { display: flex; align-items: center; padding: 7px 10px; border-radius: 6px; color: #C8C8C8; font-size: 12.5px; cursor: pointer; border: 1px solid transparent; }
.scratch-choice:hover { background: rgba(255,255,255,0.04); }
.scratch-choice.on { border-color: rgba(168, 85, 247, 0.55); color: #E8E8E8; }
.scratch-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #666; flex-shrink: 0; margin-right: 9px; }
.scratch-choice.on .scratch-dot { border-color: #A855F7; background: #A855F7; }
.scratch-path { margin: 8px 1px 2px; font-size: 11px; color: #BBB; word-break: break-all; user-select: text !important; -webkit-user-select: text !important; }
.scratch-status-bad { color: #F59E0B !important; }
.scratch-keep-row { display: flex; align-items: center; }
.scratch-keep { margin-right: 10px; width: 64px; background: #151515; border: 1px solid #3A3A3A; color: #E8E8E8; border-radius: 5px; padding: 4px 6px; font-size: 12px; }
.scratch-foot { display: flex; justify-content: flex-end; padding: 14px 20px 16px; }

body.vireo-live #btn-selects-v2:hover .btn-label { color: #FFFFFF !important; }

.vireo-working { opacity: 0.55; cursor: progress !important; transition: opacity 0.08s; }

.history-menu-item .history-when-inline { display: inline; margin-left: 8px; opacity: 0.55; font-size: 0.92em; }

#ctx-broll-section .ctx-broll-head { font-weight: 600; cursor: default; }
#ctx-broll-section .ctx-broll-head:hover { background-color: transparent !important; }
#ctx-broll-section .ctx-broll-len { margin-left: 8px; opacity: 0.55; font-weight: 400; }
#ctx-broll-section .ctx-broll-lab { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; padding: 6px 12px 2px 12px; }
#ctx-broll-section .ctx-broll-row.is-now { box-shadow: inset 2px 0 0 #a855f7; }
#ctx-broll-section .ctx-broll-sep { height: 1px; background-color: rgba(0, 0, 0, 0.08); margin: 4px 0; }

.word.broll-washed.broll-layer-2 { background-color: rgba(13, 148, 136, 0.30); }
.word.broll-washed.broll-layer-3 { background-color: rgba(13, 148, 136, 0.42); }

.word.broll-layer-start { box-shadow: inset 2px 0 0 #0d9488; }
.word.broll-washed.broll-lifted { background-color: rgba(13, 148, 136, 0.40) !important; }
.broll-drag-ghost { position: fixed; z-index: 10050; pointer-events: none; border-radius: 3px; background-color: rgba(13, 148, 136, 0.30); box-shadow: 0 8px 20px rgba(13, 148, 136, 0.25); }
.broll-drop-marker { position: fixed; z-index: 10051; pointer-events: none; width: 3px; border-radius: 2px; background-color: #0d9488; }

.word.broll-washed.broll-merge-target { box-shadow: inset 0 0 0 2px rgba(13, 148, 136, 0.7); }
.broll-drag-ghost.merge::after { content: "+"; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; line-height: 17px; text-align: center; border-radius: 9px; background-color: #0d9488; color: #ffffff; font-size: 14px; font-weight: 700; }

.word.broll-resize-preview { background-color: rgba(13, 148, 136, 0.30) !important; }

.word.highlighted-word.broll-washed { background-image: linear-gradient(rgba(13, 148, 136, 0.16), rgba(13, 148, 136, 0.16)); }
.word.highlighted-word.broll-washed.broll-washed-multi { background-image: linear-gradient(rgba(13, 148, 136, 0.22), rgba(13, 148, 136, 0.22)); }
.word.highlighted-word.broll-washed:hover { background-image: linear-gradient(rgba(13, 148, 136, 0.26), rgba(13, 148, 136, 0.26)); }
.word.highlighted-word.broll-washed.broll-layer-2 { background-image: linear-gradient(rgba(13, 148, 136, 0.30), rgba(13, 148, 136, 0.30)); }
.word.highlighted-word.broll-washed.broll-layer-3 { background-image: linear-gradient(rgba(13, 148, 136, 0.42), rgba(13, 148, 136, 0.42)); }
.word.highlighted-word.broll-washed.broll-lifted { background-image: linear-gradient(rgba(13, 148, 136, 0.40), rgba(13, 148, 136, 0.40)); }
.ai-btn { -webkit-user-select: none; user-select: none; }   

.onboarding-card h1.welcome-line .app-mark-lockup.welcome-mark { display: inline-block; height: 1.513em; width: 3.116em; margin: 0; vertical-align: -0.055em; }
.onboarding-card h1.welcome-line { margin-top: 14px; }
.onboarding-card .app-mark-lockup.welcome-mark .wm-word { fill: #2D2D2D !important; }
.onboarding-card .app-mark-lockup.welcome-mark .wm-bird { fill: #A855F7 !important; }
.onboarding-card .app-mark-lockup.welcome-mark .wm-halo { opacity: 0 !important; }

#broll-view-head { flex-direction: column; align-items: stretch; gap: 0; }   
#broll-view-head .broll-head-line { display: flex; align-items: center; min-width: 0; overflow: hidden; }
#broll-head-line2 { margin-top: 8px; }
#broll-view-head .broll-head-fill { flex: 1 1 auto; min-width: 0; }
#broll-view-head #broll-view-name { flex: 0 1 auto; min-width: 0; max-width: none; }
#broll-view-head #broll-view-status { flex: 0 1 auto; min-width: 0; text-align: left; padding-right: 0; }
#broll-view-head #btn-broll-match { flex: 0 0 auto; }
#broll-view-head #broll-active-wrap { flex: 0 0 auto; margin-left: 10px; }

.licence-notice {
    position: absolute; left: 12px; right: 12px; z-index: 5; box-sizing: border-box;
    background-color: #FFFFFF !important; border: 1px solid var(--border-light); border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    padding: 12px 34px 12px 14px; display: flex; align-items: center;
}
.licence-notice-text { font-size: 12.5px; line-height: 1.45; color: var(--text-dark) !important; flex: 1 1 auto; min-width: 0; }
.licence-notice-btn {
    flex-shrink: 0; margin-left: 12px; padding: 7px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
    background-color: var(--accent-purple) !important; color: #FFFFFF !important; white-space: nowrap; cursor: pointer;
}
.licence-notice-x { position: absolute; top: 6px; right: 8px; font-size: 13px; color: #999999 !important; line-height: 1; padding: 4px; cursor: pointer; }
.licence-notice-pro {
    background-color: var(--accent-purple) !important; color: #FFFFFF !important; font-size: 8px; font-weight: 700;
    letter-spacing: .08em; padding: 2px 6px; border-radius: 3px; margin-right: 6px; vertical-align: 1px;
}

.pro-card-line { font-size: 13px; color: #666666 !important; margin-top: 10px; }

body.vireo-live #btn-gen-xml svg { stroke: #0D9488 !important; }
body.vireo-live #btn-gen-xml .btn-label { color: #0D9488 !important; }
body.vireo-live #btn-gen-xml:hover .btn-label { color: var(--text-light) !important; }
body.vireo-live #btn-gen-xml:hover svg { stroke: #0D9488 !important; }

.icon-btn.off-broll, .stacked-btn.off-broll, .mode-switch.off-broll { opacity: 0.3 !important; cursor: default !important; }

.icon-btn.off-broll:hover, .stacked-btn.off-broll:hover { opacity: 0.3 !important; }
.icon-btn.off-broll:hover svg, .stacked-btn.off-broll:hover svg { stroke: var(--text-light) !important; }
#btn-gen-xml.off-broll:hover svg { stroke: var(--accent-purple) !important; }
#btn-gen-xml.off-broll:hover .btn-label { color: var(--accent-purple) !important; opacity: 1; font-weight: 700; }
.mode-switch.off-broll:hover { border-color: var(--border-light); }

.suggested-prompt-chip.chip-lead { background-color: var(--accent-purple) !important; border-color: var(--accent-purple) !important; color: #FFFFFF !important; font-weight: 600; }
.suggested-prompt-chip.chip-lead:hover { background-color: #9333EA !important; border-color: #9333EA !important; color: #FFFFFF !important; }
.live-welcome .suggested-prompt-chip.chip-lead { background-color: #0D9488 !important; border-color: #0D9488 !important; }
.live-welcome .suggested-prompt-chip.chip-lead:hover { background-color: #0F766E !important; border-color: #0F766E !important; }
.welcome-all-workflows { font-size: 11px; color: var(--text-muted); cursor: pointer; margin-top: 2px; }
.welcome-all-workflows:hover { text-decoration: underline; }

.tr-hidden { display: none !important; }
.tr-label { cursor: pointer; }
.tr-label:hover { background-color: rgba(0,0,0,0.06); border-radius: 2px; }
.tr-label.selected-word { background-color: #D1E8FF !important; color: #000 !important; }
.tr-label.highlighted-word { background-color: var(--highlight-yellow) !important; color: #000 !important; }
.tr-label.highlighted-word.selected-word { background-color: #B4D5FF !important; }
.tr-label.patch-target { background-color: rgba(168, 85, 247, 0.16) !important; border-bottom: 2px solid var(--accent-purple) !important; }
.tr-label.broll-washed {
    background-color: rgba(13, 148, 136, 0.16);
    padding: 2px 0.28em 2px 0;
    margin: 0 -0.28em 0 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.tr-label.broll-washed-multi { background-color: rgba(13, 148, 136, 0.22); }
.tr-label.broll-washed.broll-layer-2 { background-color: rgba(13, 148, 136, 0.30); }
.tr-label.broll-washed.broll-layer-3 { background-color: rgba(13, 148, 136, 0.42); }
.tr-label.broll-wash-start { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.tr-label.broll-wash-end { border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding-right: 0; margin-right: 0; }
.tr-label.highlighted-word.broll-washed { background-image: linear-gradient(rgba(13, 148, 136, 0.16), rgba(13, 148, 136, 0.16)); }

.style-panel .style-msg .style-skip { display: inline-block; margin-top: 4px; font-size: 11px; color: #9A93A6; cursor: pointer; }
.style-panel .style-msg .style-skip:hover { color: #C084FC; }
.style-panel .style-item .style-relearn { color: #C084FC; cursor: pointer; font-style: normal; }

.style-panel .style-pb-pick { flex: 0 0 auto; position: relative; padding: 10px 8px 2px; }
.style-panel .style-pb-trigger { display: flex; align-items: center; padding: 6px 9px; border: 1px solid #33303c; border-radius: 6px; background: #202023; cursor: pointer; }
.style-panel .style-pb-trigger:hover { border-color: #A855F7; }
.style-panel .style-pb-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: #E8E6EC; }
.style-panel .style-pb-chev { flex: 0 0 auto; margin-left: 6px; color: #6A6574; display: flex; }
.style-panel .style-pb-menu {
    position: absolute; left: 8px; right: 8px; top: 100%; margin-top: 4px;
    background: #26262B; border: 1px solid #33303c; border-radius: 8px;
    max-height: 240px; overflow-y: auto; padding: 5px; z-index: 31;
    box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.style-panel .style-pb-item { display: flex; align-items: center; padding: 7px 9px; border-radius: 5px; font-size: 11.5px; color: #B4B1BC; cursor: pointer; }
.style-panel .style-pb-item span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-panel .style-pb-item:hover { background: #322E3E; color: #E8E6EC; }
.style-panel .style-pb-item.on { color: #E8E6EC; }
.style-panel .style-pb-check { flex: 0 0 auto; margin-left: 8px; color: #C084FC; }
.style-panel .style-pb-divider { height: 1px; background: #33303c; margin: 4px 2px; }
.style-panel .style-pb-act { color: #9A93A6; }

.style-panel .style-item .style-cut-date { cursor: pointer; }
.style-panel .style-item .style-cut-date:hover { color: #C084FC; }

.style-panel .style-item > .style-practice-one { white-space: nowrap; }   
.style-panel .style-practice { margin-top: 14px; }
.style-panel .style-practice-row { display: flex; font-size: 10.5px; color: #B9B4C2; padding: 4px 0; border-bottom: 1px solid #232327; }
.style-panel .style-practice-row.head { color: #6A6574; font-size: 9.5px; }
.style-panel .style-practice-row > span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px; }
.style-panel .style-practice-row > span:first-child { flex: 1.6 1 0; }
.style-panel .style-practice-note { font-size: 10px; color: #5a5560; margin: 5px 0 0; line-height: 1.5; }