/* Remove grey focus/active overlay on AIAssistView toolbar buttons */
.ai-chat-container .e-toolbar-item .e-tbar-btn:focus,
.ai-chat-container .e-toolbar-item .e-tbar-btn:active {
    background-color: transparent !important;
    box-shadow: none !important;
}

/*Draw Toast Message on top of everything*/
.e-control.e-toast.e-lib.e-toast-container {
    z-index: 10000 !important;
}

/* Wider scrollbars app-wide — the default ~6px is hard to grab by drag (the only option for
   users who can't use a mouse wheel). !important beats Syncfusion's non-important per-component widths. */
::-webkit-scrollbar {
    width: 15px !important;
    height: 15px !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .4) !important;
    background-clip: content-box !important;
    border: 3px solid transparent !important;
    border-radius: 15px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .6) !important;
    background-clip: content-box !important;
}

/*Better Indentation on TreeGrid*/
.e-treegrid .e-table *[class$="Level1"] .e-treecolumn-container{
    margin-left:20px;
}

.e-treegrid .e-table *[class$="Level2"] .e-treecolumn-container {
    margin-left: 40px;
}

.e-treegrid .e-table *[class$="Level3"] .e-treecolumn-container {
    margin-left: 60px;
}

.e-treegrid .e-table *[class$="Level4"] .e-treecolumn-container {
    margin-left: 80px;
}

.e-treegrid .e-table *[class$="Level5"] .e-treecolumn-container {
    margin-left: 100px;
}

.e-treegrid .e-table *[class$="Level6"] .e-treecolumn-container {
    margin-left: 120px;
}

.e-treegrid .e-table *[class$="Level7"] .e-treecolumn-container {
    margin-left: 140px;
}

.e-treegrid .e-table *[class$="Level8"] .e-treecolumn-container {
    margin-left: 160px;
}

/*Reduce Visibility of fields not in layout*/
.excluded-field {
    opacity: 0.5;
}

/*Remove Cell Selection Focus*/
.e-grid .e-rowcell.e-focus.e-focused {
    box-shadow: unset !important;
}

/*Enhance Visibility of Filtered Icon in grid headers*/
.e-grid .e-filtered {
    background: rgba(34, 87, 255, .5);
    border-radius: 4px;
}

.e-grid .e-filtered::before {
    color:blue !important;
}

/*Remove Search Box in Grid Filters*/
.sf-grid .e-checkboxfilter .e-searchbox {
    display: none !important;
}

/*Grid Status and Filter Reset Buttons Styling*/
.status-completed {
    color: green;
    font-weight: bold;
}

.status-processing {
    color: blue;
    font-weight: bold;
}

.status-queued {
    color: blue;
    font-weight: bold;
}

.status-uploading {
    color: blue;
    font-weight: bold;
}

.status-review {
    color: red;
    font-weight: bold;
}

.status-cancelled {
    color: purple;
    font-weight: bold;
}

.cursor-default {
    cursor: default !important;
}

.tooltip-filter {
    display: inline;
}

/* Enhanced styling for invalid rows - make them highly visible */
.e-grid .e-gridcontent .e-row.invalid-field td {
    background-color: #ffbfbf !important;
    color: #c62828 !important;
    font-weight: 600 !important;
    box-shadow: inset 0 4px 0 0 #d32f2f, inset 0 -4px 0 0 #d32f2f;
}

/*Generated code styling on Schema Config*/
.generated-code-textbox {
    height: 100%;
    width: 100%;
    font-family: Consolas, 'Courier New', monospace;
}

.e-textbox.generated-code-textbox {
    height: calc(100% - 10px);
}

/*Read Only SfSwitch*/
.readonly-switch {
    pointer-events: none;
    cursor: default;
}

/* Status Badge Styling for Job Filters*/
.status-badge {
    padding: 8px 16px;
    border-radius: 6px;
    border: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f5f5f5;
    color: #333;
}

.status-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.status-badge:active {
    transform: translateY(0);
}

.status-badge.status-completed {
    background-color: #e8f5e9;
    border-color: #4caf50;
    color: #2e7d32;
}

.status-badge.status-completed:hover {
    background-color: #c8e6c9;
}

.status-badge.status-processing {
    background-color: #e3f2fd;
    border-color: #2196f3;
    color: #1565c0;
}

.status-badge.status-processing:hover {
    background-color: #bbdefb;
}

.status-badge.status-queued {
    background-color: #e1f5fe;
    border-color: #03a9f4;
    color: #01579b;
}

.status-badge.status-queued:hover {
    background-color: #b3e5fc;
}

.status-badge.status-uploading {
    background-color: #e0f2f1;
    border-color: #009688;
    color: #004d40;
}

.status-badge.status-uploading:hover {
    background-color: #b2dfdb;
}

.status-badge.status-review {
    background-color: #fff3e0;
    border-color: #ff9800;
    color: #e65100;
}

.status-badge.status-review:hover {
    background-color: #ffe0b2;
}

.status-badge.status-cancelled {
    background-color: #f3e5f5;
    border-color: #9c27b0;
    color: #4a148c;
}

.status-badge.status-cancelled:hover {
    background-color: #e1bee7;
}

/* Disable last page double arrow in Syncfusion Grids*/
.e-grid .e-pager .e-lastpage,
.e-grid .e-pager .e-lastpagedisabled {
    display: none !important;
}

/*Make Checkbox popup grid filters wider*/
.e-grid .e-dialog.e-filter-popup.e-checkboxfilter {
    width: 400px !important;
    max-width: 400px !important;
}

/*Hide Grid rows when CONTAINS search 10K limit is reached (workaround for grid behavior*/
.hide-rows-on-limit .e-gridcontent .e-row {
    display: none !important;
}

/* ===== Custom Query Builder ===== */
.qb-group { padding: 12px; margin-bottom: 8px; border-radius: 6px; }
.qb-group.qb-and { border-left: 4px solid #2196f3; background-color: #f0f7ff; }
.qb-group.qb-or { border-left: 4px solid #ff9800; background-color: #fff8f0; }
.qb-group.qb-not-and { border-left: 4px solid #e91e63; background-color: #fce4ec; }
.qb-group.qb-not-or { border-left: 4px solid #9c27b0; background-color: #f3e5f5; }
.qb-depth-0 { margin-left: 0; }
.qb-depth-1 { margin-left: 16px; }
.qb-depth-2 { margin-left: 32px; }
.qb-depth-3 { margin-left: 48px; }
.qb-depth-4 { margin-left: 64px; }
.qb-rule { transition: background-color 0.15s; }
.qb-rule:hover { background-color: #f8f9fa; }
.qb-condition-toggle { min-width: 120px; }
.qb-field-level { min-width: 150px; }
.qb-quantifier { min-width: 70px; }
.qb-summary {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.85em;
    white-space: pre-wrap;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
    max-height: 200px;
    overflow-y: auto;
}

/* PDF viewer fit: Syncfusion pins .e-pdfviewer and its main container to min-height:500px, which overflows the
   shorter AI-Chat-view PDF pane and adds a redundant outer scrollbar. Let it fit whatever splitter pane it's in. */
.e-pdfviewer,
.e-pdfviewer .e-pv-main-container {
    min-height: 0 !important;
}

/* ===== Search page ===== */
.results-popup { position: absolute; top: calc(100% + 4px); right: 0; width: 420px; max-width: 90vw; max-height: 60vh; display: flex; flex-direction: column; z-index: 1055; }
.results-popup-list { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.results-popup-backdrop { position: fixed; inset: 0; z-index: 1050; background: transparent; }
/* The PDF viewer is a later-painted sibling pane that covers the split bar's right collapse arrow. The arrow's own
   z-index can't escape the static bar's flattening, so promote the bar itself to a positioned stacking context
   above the pane (z below the Results popup/dialogs). Verified via DevTools elementFromPoint. */
.search-splitter .e-split-bar { position: relative !important; z-index: 200 !important; }
/* Inset the AI-chat scrollbar so it clears the splitter bar; flush against it, the splitter
   intercepts drag attempts meant for the scrollbar. */
.ai-chat-container .e-view-content { margin-right: 3px !important; }
/* The deep-link questions button wears the extension's mark, so it reads as the extension's questions. */
.deeplink-questions .deeplink-questions-icon { width: 18px; height: 18px; background: url("../media/various/snapshot-insights.png") center / contain no-repeat; }
/* Syncfusion lists footer items before its own Send; the questions button goes after it. */
.ai-chat-container .e-footer .e-toolbar-items.e-tbar-pos .e-toolbar-right { display: flex; align-items: center; }
.ai-chat-container .e-footer .e-toolbar-item.deeplink-questions-item { order: 1; }
/* This theme fills flat buttons with the secondary gray; this one matches the bare Send icon beside it. */
.ai-chat-container .e-footer .e-btn.deeplink-questions,
.ai-chat-container .e-footer .e-btn.deeplink-questions:disabled { background-color: transparent; border-color: transparent; box-shadow: none; }
/* The theme keeps a disabled button at full opacity; this one dims like Send while the AI answers. */
.ai-chat-container .e-footer .e-btn.deeplink-questions:disabled { opacity: .5; }
/* Hovered or open, it takes the same fill as the chat's other toolbar buttons (Restart conversation, Export). */
.ai-chat-container .e-footer .e-btn.deeplink-questions:hover:not(:disabled),
.ai-chat-container .e-footer .e-btn.deeplink-questions.e-active { background-color: #6c757d; border-color: #545b62; }
.e-dropdown-popup.deeplink-questions .e-item:hover,
.e-dropdown-popup.deeplink-questions .e-item.e-focused { background-color: rgba(var(--brand-navy-rgb), .2); }
.e-dropdown-popup.deeplink-questions .e-item { height: auto; line-height: 1.35; padding-top: 0.45rem; padding-bottom: 0.45rem; white-space: normal; }

/* The four-point star every AI highlight shares, drawn: a font's sparkle glyph fills only a sliver of its em box, and
   differs by platform. */
:root {
    --ai-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f08a00' d='M12 0C13.5 7 17 10.5 24 12 17 13.5 13.5 17 12 24 10.5 17 7 13.5 0 12 7 10.5 10.5 7 12 0Z'/%3E%3C/svg%3E");
}

/* Citation badge: cursor/size previously rode an inline style attribute — moved here so the HTML sanitizer
   (which strips style attributes) needn't allow inline styles on sanitized AI output. */
.citation-badge { cursor: pointer; font-size: 0.75em; }

/* While a citation click searches the PDF viewer for its section, its "No matches" notice stays hidden (citationInterop dismisses it). */
body.citation-navigating .e-pv-notification-dialog { display: none !important; }

/* The viewer's current search match, solid instead of the theme's 0.4 opacity; the viewer blends it with multiply, so
   the text under it stays readable. */
.e-pdfviewer .e-pv-search-text-highlight { opacity: 1 !important; border-radius: 2px; }

/* A citation's lit words (citationBoxes), a box per word in the page's own element. The layer blends as one with multiply,
   so the text stays readable and overlapping boxes don't darken, and one glow outlines them all together. */
.e-pdfviewer .citation-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: multiply;
    animation: citation-glow 1.6s ease-in-out infinite;
}
.e-pdfviewer .citation-box { position: absolute; background: #ffd400; border-radius: 2px; }
.e-pdfviewer .citation-first::before,
.e-pdfviewer .citation-last::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--ai-star) center / contain no-repeat;
    animation: citation-sparkle 1.6s ease-in-out infinite;
}
.e-pdfviewer .citation-first::before { top: -24px; left: -20px; }
.e-pdfviewer .citation-last::after { bottom: -24px; right: -20px; animation-delay: 0.8s; }
@keyframes citation-glow {
    0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 170, 0, 1)) drop-shadow(0 0 1px rgba(255, 170, 0, 1)) drop-shadow(0 0 5px rgba(255, 170, 0, 0.55)); }
    50%      { filter: drop-shadow(0 0 1.5px rgba(255, 170, 0, 1)) drop-shadow(0 0 1.5px rgba(255, 170, 0, 1)) drop-shadow(0 0 12px rgba(255, 170, 0, 0.8)); }
}
@keyframes citation-sparkle {
    0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
    .e-pdfviewer .citation-layer {
        animation: none;
        filter: drop-shadow(0 0 1.5px rgba(255, 170, 0, 1)) drop-shadow(0 0 1.5px rgba(255, 170, 0, 1)) drop-shadow(0 0 8px rgba(255, 170, 0, 0.65));
    }
    .e-pdfviewer .citation-first::before,
    .e-pdfviewer .citation-last::after { display: none; }
}

/* Search-results change chip — a tooling/system event line in the AI chat (a manual search or an AI re-scope),
   styled to read as tooling, not an LLM answer: a centered, muted pill rather than a left-aligned response. */
.ai-chat-container .ws-change-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: fit-content;
    max-width: 92%;
    margin: 0.3rem auto 0.5rem;
    padding: 0.2rem 0.8rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #084298;
    background-color: #e7f1ff;
    border: 1px solid #9ec5fe;
    border-radius: 999px;
}
.ai-chat-container .ws-change-chip .e-icons { font-size: 0.8125rem; }

/* The AI's search-results chip carries the status chip's gold star either side, twinkling in turn while it is the AI's
   latest work (juice.watch marks it live), and glows gold once as it lands. The user's own chips keep the refresh icon. */
.ai-chat-container .ai-change-chip { position: relative; }
.ai-chat-container .ai-change-chip .ai-chip-star {
    flex-shrink: 0;
    width: 0.85rem;
    height: 0.85rem;
    background: var(--ai-star) center / contain no-repeat;
}
.ai-chat-container .ai-change-chip.juice-live .ai-chip-star { animation: ai-star-twinkle 1.6s ease-in-out infinite; }
.ai-chat-container .ai-change-chip.juice-live .ai-chip-star:last-child { animation-delay: 0.8s; }
/* The glow fades a fixed shadow in and out: an opacity animation keeps running while the page is busy re-drawing. */
.ai-chat-container .ai-change-chip::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: 0 0 0 3px rgba(255, 170, 0, 0.45), 0 0 12px 2px rgba(255, 170, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    animation: chip-glow 1.6s ease-out;
}
@keyframes chip-glow { 25% { opacity: 1; } }
@keyframes star-twinkle-once {
    0%   { opacity: 0; transform: scale(0.3) rotate(0deg); }
    45%  { opacity: 1; transform: scale(1) rotate(90deg); }
    100% { opacity: 0; transform: scale(0.5) rotate(180deg); }
}

/* A running turn's status chip — the search-results chip's pill, with a twinkling star either side carrying the "still
   working" signal. A new step's words fade in beside the last one's, which fade out and then give up their place. */
.ai-chat-container .ai-turn-status .ai-progress-star {
    flex-shrink: 0;
    width: 0.85rem;
    height: 0.85rem;
    background: var(--ai-star) center / contain no-repeat;
    animation: ai-star-twinkle 1.6s ease-in-out infinite;
}
.ai-chat-container .ai-turn-status .ai-progress-star:last-child { animation-delay: 0.8s; }
.ai-chat-container .ai-turn-status .ai-status-text { display: inline-flex; gap: .35em; }
.ai-chat-container .ai-turn-status .ai-status-text > span { white-space: nowrap; }
.ai-chat-container .ai-turn-status .ai-status-in { animation: status-in 0.35s ease-out backwards; }
.ai-chat-container .ai-turn-status .ai-status-out { animation: status-out 0.35s ease-in forwards; }
@keyframes ai-star-twinkle {
    0%, 100% { opacity: 0.5; transform: scale(0.75) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1) rotate(90deg); }
}
@keyframes status-in  { from { opacity: 0; transform: translateY(4px); } }
@keyframes status-out { to   { opacity: 0; transform: translateY(-4px); } }

/* Ref badges fade in one after another as an answer lands (juice.watch), and glint gold on hover: a star at the top-left
   corner, then the bottom-right, as on a PDF citation highlight. The fade fills backwards only, so it never holds the glow. */
.ai-chat-container .citation-badge { position: relative; transition: box-shadow 0.2s ease; }
.ai-chat-container .citation-badge.juice-in { animation: badge-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.ai-chat-container .citation-badge:hover { box-shadow: 0 0 0 2px rgba(255, 170, 0, 0.45), 0 0 8px rgba(255, 170, 0, 0.55); }
.ai-chat-container .citation-badge::before,
.ai-chat-container .citation-badge::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    background: var(--ai-star) center / contain no-repeat;
    opacity: 0;
    pointer-events: none;
}
.ai-chat-container .citation-badge::before { top: -6px; left: -6px; }
.ai-chat-container .citation-badge::after { bottom: -6px; right: -6px; }
.ai-chat-container .citation-badge:hover::before { animation: star-twinkle-once 0.7s ease-out; }
.ai-chat-container .citation-badge:hover::after { animation: star-twinkle-once 0.7s ease-out 0.35s; }
@keyframes badge-in { from { opacity: 0; transform: translateY(3px) scale(0.8); } }

/* How an answer's figures were calculated — drawn by the app under the answer. The newest note's star twinkles like the
   status chip's (juice.watch marks it live); older notes keep a still star, so a long conversation doesn't fill with motion. */
.ai-chat-container .calc-note {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(240, 138, 0, 0.25);
    font-size: 0.8125rem;
    color: #5c636a;
    animation: calc-note-in 0.5s ease-out 0.25s backwards;
}
.ai-chat-container .calc-note-label { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; color: #8a5300; }
.ai-chat-container .calc-note-star {
    flex-shrink: 0;
    width: 0.9rem;
    height: 0.9rem;
    background: var(--ai-star) center / contain no-repeat;
    filter: drop-shadow(0 0 2px rgba(255, 170, 0, 0.55));
}
.ai-chat-container .calc-note.juice-live .calc-note-star { animation: ai-star-twinkle 1.6s ease-in-out infinite; }
/* The label's two stars alternate, like the stars on a PDF citation highlight. */
.ai-chat-container .calc-note.juice-live .calc-note-star:last-child { animation-delay: 0.8s; }
.ai-chat-container .calc-note p { margin: 0.2rem 0 0; }
.ai-chat-container .calc-note ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.ai-chat-container .calc-note strong { font-weight: 600; color: #3d4247; }
@keyframes calc-note-in { from { opacity: 0; transform: translateY(4px); } }

/* Markdown tables in an answer. A wide one scrolls inside the answer instead of widening the chat pane, and the
   cells' minimum width makes it scroll before it squeezes short values like "G-00201" onto two lines. */
.ai-chat-container .ai-response table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    margin: 0.5rem 0 0.9rem;
    border-collapse: collapse;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}
.ai-chat-container .ai-response th,
.ai-chat-container .ai-response td {
    min-width: 8rem;
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid #e3e6ea;
    text-align: left;
    vertical-align: top;
}
.ai-chat-container .ai-response th { font-weight: 600; background-color: #f4f6f8; border-bottom: 2px solid #ced4da; }
.ai-chat-container .ai-response tbody tr:last-child td { border-bottom: none; }

@media (prefers-reduced-motion: reduce) {
    .ai-chat-container .ai-change-chip::after,
    .ai-chat-container .citation-badge.juice-in,
    .ai-chat-container .calc-note,
    .ai-chat-container .juice-live .calc-note-star,
    .ai-chat-container .juice-live .ai-chip-star,
    .ai-chat-container .ai-turn-status .ai-status-in { animation: none; }
    .ai-chat-container .citation-badge::before,
    .ai-chat-container .citation-badge::after,
    .ai-chat-container .ai-turn-status .ai-status-out { display: none; }
    .ai-chat-container .ai-turn-status .ai-progress-star { animation: none; opacity: 0.8; }
}
/* The component gives the newest response rows a view-high min-height (inline, hence !important); on the chip's row
   that would push the component's loading skeleton a screen below the chip. */
.ai-chat-container .e-output-container:has(.ai-turn-status) { min-height: auto !important; }
/* A search-results chip row carries no user prompt (empty Prompt), so collapse its empty prompt bubble — the chip
   then stands alone as a system event. Real prompts have non-empty .e-prompt-text and keep the default styling. */
.ai-chat-container .e-prompt-container:has(.e-prompt-text:empty) { display: none; }
/* Hide the per-response toolbar footer (Copy / thumbs-up "like" / thumbs-down "dislike"). Syncfusion exposes no
   toggle and renders it under every response; scoped to response items so the top toolbar (also .e-toolbar) stays. */
.ai-chat-container .e-response-item-template .e-content-footer { display: none !important; }
/* Scope chips — the multi-valued Layout Types cell on the searches grid. Neutral rather than
   the accent used by .ws-change-chip, so a three-chip cell doesn't outweigh the row's own name column. */
.scope-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.scope-chip {
    display: inline-block;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.1rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #41464b;
    background-color: #eef0f2;
    border: 1px solid #d3d6d8;
    border-radius: 999px;
}
.scope-chip-overflow { color: #5c636a; background-color: #e2e5e8; font-weight: 500; }
/* A search whose layout rules reach past the scoped project — editing it here also changes other archives. */
.scope-chip-shared { color: #664d03; background-color: #fff3cd; border-color: #ffe69c; font-weight: 500; }
/* The searches grid puts one "layout → schema type → project" line per layout search in its tooltip, so it
   has to honour the newlines, and pre-wrap (not pre-line) so the spacing around the arrows survives. */
.e-tooltip-wrap.scope-chain-tip .e-tip-content { white-space: pre-wrap; text-align: left; }
/* Wide enough that a layout → schema type → project line rarely wraps mid-chain. */
.e-tooltip-wrap.scope-chain-tip { max-width: 42rem; }
/* The tooltip wrapper is a block element; keep the marker chip inline with the search name. */
.scope-tip, .scope-tip > div { display: inline-block; vertical-align: middle; }
/* A config page's projects line is the one place each project is named, so its chips never truncate. */
.project-reach .scope-chip { max-width: none; }