*/
.drag-and-drop-selected-group {
grid-row: span 2 / span 2;
grid-column-start: 1;
grid-row-start: 2;
}
/* Drag and Drop unselected group /
*/
/* Contains unselected options of the drag and drop functionality, previously displayed within
*/
.drag-and-drop-unselected-group {
grid-row: span 2 / span 2;
grid-row-start: 2;
}
/* End of Grid layout - Drag and Drop functionality */
/* Video player inside the media modal (kendo image/video window or Bootstrap
fallback). Scales within the window while preserving aspect ratio. V666-4816 - TESTING*/
.modalVideo {
max-width: 100%;
max-height: 75vh;
display: block;
margin: 0 auto;
}
/* Sparkline Grid chart (DW builder) — a table of small-multiple mini charts, one per measure per row */
.dw-sparkline-grid td[data-sparkline] {
min-width: 120px;
padding-top: 0;
padding-bottom: 0;
}
.dw-sparkline-grid .dw-sparkline-grid-label {
white-space: nowrap;
}
/* Sparkline Grid measure-list rows in the chart author */
.ca-measure-row {
margin-bottom: 6px;
}
.ca-measure-row .ca-meas-name {
width: 40%;
}
.ca-measure-row .ca-meas-remove {
margin-left: 6px;
}
.ca-measure-row .ca-meas-ratio-sep {
margin: 0 4px;
}
/* Absolutely-positioned loading-spinner overlay; the containing element needs
its own position:relative anchor (e.g. #footprint-session-explorer .fp-cy below). */
.tile-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(/software/images/loading.gif) no-repeat 50% 50%;
}
/* Progressive (lazy) dashboard tile loading — positioning anchors + failed-tile message.
The absolute .tile-loading spinner above needs its containing tile to be a position:relative anchor,
otherwise the spinner escapes to the nearest positioned ancestor instead of centring in the tile.
These are the config-driven Dashboard containers that host a lazy tile. Moved here from v5-skin.css
(which v7 never links) so gridDashboard / displayDynamicDashboard / chartAuthor style correctly. */
#gridDashboard .grid-tile-body, /* grid: tile body carries the tile's real (flex) height */
.dashWidget.dash-lazy-tile { /* legacy flow: widget container (min-height 300px) */
/* NB: the chart-author preview pane (.ca-preview-box) also needs position:relative for its lazy-tile
spinner — that (builder-only) rule now lives in the builder's own chartAuthor.css.php, not here. */
position: relative;
}
.tile-error {
display: block;
padding: 8px;
}
/* grid dashboard: the "temporarily unavailable" message fills its tile body (which is the
position:relative anchor above) and centres vertically + horizontally regardless of tile height */
#gridDashboard .tile-error.tile-unavailable {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Data Warehouse ERM Viewer (software/api/datawarehouse/ermViewer/dwErmViewer.php).
ID-scoped so these stay local to the viewer page. Moved here from v5-skin.css (which v7 never
links) and renamed to lowercase-hyphenated to match the v6-skin naming convention; the matching
class attributes and JS class hooks in dwErmViewer.php were updated in lockstep. The #dwErmViewer
host id stays camelCase (an existing element id, not a class). */
#dwErmViewer .erm-legend {
margin-bottom: 8px;
}
#dwErmViewer .erm-legend .erm-legend-item {
display: inline-block;
margin-right: 14px;
color: #666;
}
#dwErmViewer .erm-legend .erm-swatch {
display: inline-block;
width: 13px;
height: 13px;
border-radius: 3px;
margin-right: 5px;
vertical-align: middle;
}
#dwErmViewer .erm-swatch.fact { background-color: #067DB1; }
#dwErmViewer .erm-swatch.flatfact { background-color: #3A9FC7; }
#dwErmViewer .erm-swatch.dim { background-color: #4A8F4A; }
#dwErmViewer .erm-swatch.ref { background-color: #B07D1A; }
#dwErmViewer .erm-swatch.rel { background-color: #8A5AA8; }
#dwErmViewer .erm-swatch.periodic { background-color: #E8730C; }
#dwErmViewer .erm-toolbar {
display: flex;
gap: 4px;
margin-bottom: 6px;
align-items: center;
}
#dwErmViewer .erm-toolbar .button {
padding: 3px 7px;
line-height: 1;
}
#dwErmViewer .erm-toolbar .button.active {
background: #00567a;
color: #fff;
}
#dwErmViewer .erm-toolbar .button svg {
display: block;
width: 15px;
height: 15px;
}
#dwErmViewer .erm-diagram {
position: relative;
overflow: hidden;
resize: vertical;
min-height: 400px;
height: 400px;
padding: 8px;
background-color: #ffffff;
border: 1px solid #dedede;
border-radius: 4px;
}
#dwErmViewer .erm-diagram.erm-pan { cursor: grab; }
#dwErmViewer .erm-diagram.erm-panning { cursor: grabbing; }
#dwErmViewer .erm-diagram svg { transform-origin: 0 0; }
#dwErmViewer .erm-tooltip {
position: fixed;
display: none;
z-index: 10000;
max-width: 260px;
padding: 8px 10px;
background-color: #ffffff;
border: 1px solid #b6c2cc;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
font-size: 0.85em;
color: #333;
pointer-events: none;
}
#dwErmViewer .erm-tooltip.erm-show { display: block; }
#dwErmViewer .erm-tooltip .erm-tt-title { font-weight: bold; margin-bottom: 3px; }
#dwErmViewer .erm-tooltip .erm-tt-row { white-space: nowrap; }
#dwErmViewer .erm-tt-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
margin-right: 5px;
vertical-align: middle;
}
#dwErmViewer .erm-tt-dot.active { background-color: #66CC00; }
#dwErmViewer .erm-tt-dot.seeding { background-color: #FFC000; }
#dwErmViewer .erm-tt-dot.error { background-color: #FF0000; }
#dwErmViewer .erm-tt-dot.notseeded { background-color: #C9C9C2; }
#dwErmViewer .erm-tt-dot.notable { background-color: #B6CAFB; }
#dwErmViewer .erm-tabs {
list-style: none;
margin: 0 0 10px;
padding: 0;
border-bottom: 1px solid #d6dce2;
}
#dwErmViewer .erm-tabs li {
display: inline-block;
margin: 0 2px -1px 0;
}
#dwErmViewer .erm-tabs li a {
display: block;
padding: 6px 16px;
color: #666;
text-decoration: none;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
font-weight: bold;
}
#dwErmViewer .erm-tabs li.active a {
color: #067DB1;
background: #fff;
border-color: #d6dce2;
border-bottom-color: #fff;
}
#dwErmViewer .erm-tabs li a:hover {
color: #067DB1;
}
#dwErmViewer .erm-explore-toolbar,
#dwErmViewer .erm-route-bar {
align-items: center;
}
#dwErmViewer .erm-tool-label {
font-weight: bold;
color: #555;
margin-right: 2px;
}
#dwErmViewer .erm-tool-hint {
margin-left: 8px;
}
#dwErmViewer .erm-route-bar select {
max-width: 220px;
}
#modal-container .erm-cols-wrap {
max-height: 60vh;
overflow: auto;
}
#modal-container .erm-modal-loading {
display: block;
min-height: 180px;
background: url(/software/images/loading.gif) no-repeat 50% 50%;
}
#dwErmViewer .erm-cy {
position: relative;
height: 500px;
min-height: 400px;
resize: vertical;
overflow: hidden;
background-color: #ffffff;
border: 1px solid #dedede;
border-radius: 4px;
}
#dwErmViewer .tile-loading {
z-index: 20;
background-color: rgba(255, 255, 255, 0.6);
}
/* Footprint Session Explorer - software/footprinting/sessionExplorer/viewSession.php */
#footprint-session-explorer .fp-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
#footprint-session-explorer .fp-tool-label {
margin: 0 2px 0 6px;
}
#footprint-session-explorer .fp-collapse-label {
cursor: pointer;
}
/* three-way pill toggle, matching the annotations block switch-toggle component.
content-box is required: the app's global border-box would collapse the pill
(height + padding) so the dots hang below it. */
#footprint-session-explorer .switch-toggle {
box-sizing: content-box;
display: inline-block;
vertical-align: middle;
border: 2px solid #2196F3;
border-radius: 10px;
height: 7px;
padding: 5px 1px;
background-color: #2196F3;
width: 48px;
margin: 0 4px;
}
#footprint-session-explorer .switch-toggle input {
position: absolute;
opacity: 0;
}
#footprint-session-explorer .switch-toggle input + label {
box-sizing: content-box;
padding: 6px;
margin: 0;
float: left;
background-color: #1e89de;
color: #2196F3;
cursor: pointer;
height: 2px;
width: 2px;
border: 1px solid #1e89de;
border-radius: 2em;
margin-top: -4px;
}
#footprint-session-explorer .switch-toggle input:checked + label {
background-color: #FFFFFF;
color: #FFFFFF;
}
#footprint-session-explorer .fp-tool-hint {
margin-left: 8px;
}
#footprint-session-explorer .fp-legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 8px;
}
#footprint-session-explorer .fp-legend-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
#footprint-session-explorer .fp-swatch {
display: inline-block;
width: 11px;
height: 11px;
border-radius: 2px;
border: 1px solid #8AA0AD;
background-color: #f0f3f5;
}
#footprint-session-explorer .fp-swatch.entry { background-color: #E6F1FB; border-color: #185FA5; }
#footprint-session-explorer .fp-swatch.dw { background-color: #E1F5EE; border-color: #0F6E56; }
#footprint-session-explorer .fp-swatch.admin { background-color: #EEEDFE; border-color: #534AB7; }
#footprint-session-explorer .fp-swatch.export { background-color: #FAECE7; border-color: #993C1D; }
#footprint-session-explorer .fp-swatch.other { background-color: #f0f3f5; border-color: #8AA0AD; }
#footprint-session-explorer .fp-cy-wrap {
display: flex;
gap: 10px;
align-items: stretch;
}
#footprint-session-explorer .fp-cy {
position: relative;
flex: 1 1 auto;
height: 520px;
min-height: 400px;
resize: vertical;
overflow: hidden;
background-color: #ffffff;
border: 1px solid #dedede;
border-radius: 4px;
}
/* right-hand column: the Path Details panel (content height) stacked above the
Page Detail panel (content height); the column grows to fit both */
#footprint-session-explorer .fp-side {
flex: 0 0 260px;
min-height: 520px;
display: flex;
flex-direction: column;
gap: 10px;
}
#footprint-session-explorer .fp-detail {
overflow: visible;
padding: 0;
background-color: #ffffff;
border: 1px solid #dedede;
border-radius: 4px;
}
#footprint-session-explorer #fp-path-detail {
flex: 0 0 auto;
}
#footprint-session-explorer #fp-type-chart {
flex: 0 0 auto;
}
#footprint-session-explorer .fp-type-chart-host {
width: 100%;
min-height: 40px;
}
#footprint-session-explorer #fp-duration-chart {
flex: 0 0 auto;
}
#footprint-session-explorer .fp-duration-chart-host {
width: 100%;
min-height: 40px;
}
/* Page Detail grows to fit its content rather than scrolling within a fixed
pane; the side column (and so the whole wrap) extends to accommodate it */
#footprint-session-explorer #fp-detail {
flex: 0 0 auto;
}
/* header reuses the standard .panel-heading + h4.panel-title (matches the
component Summary header); flush to the panel edges */
#footprint-session-explorer .fp-detail .panel-heading {
margin: 0;
border-radius: 0;
}
#footprint-session-explorer .fp-detail-body {
padding: 10px 12px;
}
#footprint-session-explorer .fp-detail-empty {
padding: 10px 12px;
}
/* single-column label/value list, matching the component Information dl/dt/dd.
grid keeps each label/value pair top-aligned even when a value wraps taller
than its label (which a float+clear layout can't). */
#footprint-session-explorer .fp-detail dl {
display: grid;
grid-template-columns: 82px 1fr;
column-gap: 8px;
row-gap: 4px;
margin: 0;
font-size: 12px;
color: #666666;
line-height: 16px;
}
#footprint-session-explorer .fp-detail dt {
margin: 0;
padding: 2px 0 3px;
font-size: 10px;
color: #999999;
text-align: right;
text-transform: uppercase;
line-height: 14px;
}
#footprint-session-explorer .fp-detail dd {
margin: 0;
padding: 2px 0 3px;
font-size: 12px;
color: #666666;
line-height: 14px;
word-break: break-word;
overflow-wrap: anywhere;
}
#footprint-session-explorer #fp-path-detail dl {
grid-template-columns: 112px 1fr;
}
#footprint-session-explorer .fp-detail-params {
font-family: monospace;
word-break: break-all;
}
#footprint-session-explorer .tile-loading {
z-index: 20;
background-color: rgba(255, 255, 255, 0.6);
}
/* Footprint Analytics dashboard - software/footprinting/analytics/dashboard.php */
#footprint-analytics .fpa-kpis {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin: 10px 0;
}
#footprint-analytics .fpa-kpi {
position: relative;
background-color: #ffffff;
border: 1px solid #d4dde2;
border-left-width: 3px;
border-left-color: #067DB1;
border-radius: 4px;
padding: 10px 12px;
overflow: hidden;
}
#footprint-analytics .fpa-kpi.good {
border-left-color: #2f7d4f;
}
#footprint-analytics .fpa-kpi.warn {
border-left-color: #b07d1a;
}
#footprint-analytics .fpa-kpi.crit {
border-left-color: #b0392a;
}
#footprint-analytics .fpa-kpi-label {
display: block;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6c7d88;
}
#footprint-analytics .fpa-kpi-value {
display: block;
font-size: 22px;
font-weight: 700;
color: #213039;
line-height: 1.1;
margin-top: 2px;
}
#footprint-analytics .fpa-kpi-delta {
display: inline-block;
font-size: 11px;
font-weight: 700;
margin-top: 3px;
color: #6c7d88;
}
#footprint-analytics .fpa-kpi-delta.good {
color: #2f7d4f;
}
#footprint-analytics .fpa-kpi-delta.bad {
color: #b0392a;
}
#footprint-analytics .fpa-row {
display: grid;
gap: 12px;
margin-bottom: 12px;
}
#footprint-analytics .fpa-row.a {
grid-template-columns: 1.7fr 1fr;
}
#footprint-analytics .fpa-row.b {
grid-template-columns: 1.2fr 1fr;
}
#footprint-analytics .fpa-card {
background-color: #ffffff;
border: 1px solid #d4dde2;
border-radius: 4px;
overflow: hidden;
}
#footprint-analytics .fpa-card-head {
background-color: #eef2f5;
border-bottom: 1px solid #d4dde2;
padding: 7px 12px;
font-size: 12px;
font-weight: 700;
color: #45585f;
text-transform: capitalize;
display: flex;
justify-content: space-between;
align-items: center;
}
#footprint-analytics .fpa-card-head a {
font-size: 11px;
font-weight: 600;
}
#footprint-analytics .fpa-card-body {
padding: 12px;
}
#footprint-analytics .fpa-chart {
width: 100%;
height: 240px;
}
#footprint-analytics .fpa-bars {
display: flex;
flex-direction: column;
gap: 9px;
}
#footprint-analytics .fpa-bar-top {
display: flex;
justify-content: space-between;
margin-bottom: 3px;
font-size: 12px;
color: #45585f;
}
#footprint-analytics .fpa-bar-top .v {
color: #6c7d88;
}
#footprint-analytics .fpa-bar-track {
height: 8px;
background-color: #eef2f5;
border-radius: 4px;
overflow: hidden;
}
#footprint-analytics .fpa-bar-fill {
height: 100%;
border-radius: 4px;
}
#footprint-analytics .fpa-heat {
display: grid;
grid-template-columns: 36px repeat(24, 1fr);
gap: 2px;
font-size: 9px;
}
#footprint-analytics .fpa-heat-head,
#footprint-analytics .fpa-heat-row-label {
color: #6c7d88;
text-align: center;
align-self: center;
}
#footprint-analytics .fpa-heat-row-label {
text-align: left;
}
#footprint-analytics .fpa-heat-cell {
aspect-ratio: 1.4 / 1;
min-height: 12px;
border-radius: 2px;
background-color: #067DB1;
}
#footprint-analytics .fpa-heat-swatch {
display: inline-block;
width: 14px;
height: 12px;
border-radius: 2px;
background-color: #067DB1;
}
#footprint-analytics .fpa-heat-swatch.lvl1 {
opacity: 0.2;
}
#footprint-analytics .fpa-heat-swatch.lvl2 {
opacity: 0.45;
}
#footprint-analytics .fpa-heat-swatch.lvl3 {
opacity: 0.7;
}
#footprint-analytics .fpa-heat-swatch.lvl4 {
opacity: 1;
}
#footprint-analytics .fpa-legend {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
margin-top: 10px;
font-size: 11px;
color: #6c7d88;
}
#footprint-analytics .fpa-legend-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
#footprint-analytics .fpa-swatch {
width: 11px;
height: 11px;
border-radius: 3px;
border: 1px solid #8aa0ad;
}
#footprint-analytics .fpa-mini-stats {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin-bottom: 8px;
}
#footprint-analytics .fpa-mini-stats strong {
color: #213039;
}
#footprint-analytics .fpa-pager {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 8px;
}
#footprint-analytics .fpa-pager .button {
padding: 3px 10px;
}
#footprint-analytics .fpa-table-tools {
display: flex;
justify-content: flex-end;
margin-bottom: 6px;
}
#footprint-analytics .fpa-tool-label {
font-size: 12px;
color: #45585f;
cursor: pointer;
margin: 0;
}
#footprint-analytics .fpa-tool-label .chkbox {
vertical-align: middle;
margin-right: 4px;
}
@media (max-width: 900px) {
#footprint-analytics .fpa-kpis {
grid-template-columns: repeat(3, 1fr);
}
#footprint-analytics .fpa-row.a,
#footprint-analytics .fpa-row.b {
grid-template-columns: 1fr;
}
}
/* ONE ASSISTANT (RAG CHAT)
Two surfaces:
.rag-chat* chat page rendered inside the panel's iframe (software/ragChat/chat.php)
.rag-chat-panel* header launcher and floating panel (software/ragChat/header_chat_widget.php)
========================================================================== */
/* CHAT PAGE (iframe document) */
.rag-chat-page {
margin: 0;
padding: 0;
height: 100%;
background-color: var(--iq-color-grey-10);
}
.rag-chat {
display: flex;
flex-direction: column;
height: 100vh;
font-family: var(--iq-font-stack);
font-size: var(--iq-body-text-md);
color: var(--iq-text-color);
}
/* MESSAGE LOG */
.rag-chat__log {
flex: 1;
overflow-y: auto;
padding: var(--iq-space-200);
}
.rag-chat__welcome {
margin: 0 0 var(--iq-space-150) 0;
color: var(--iq-text-color-light);
font-size: var(--iq-body-text-sm);
}
/* MESSAGE ROWS - user messages align right, assistant messages align left */
.rag-chat__row {
display: flex;
flex-direction: column;
margin-bottom: var(--iq-space-150);
}
.rag-chat__row--user {
align-items: flex-end;
}
.rag-chat__row--bot {
align-items: flex-start;
}
/* MESSAGE BUBBLES */
.rag-chat__bubble {
max-width: 85%;
/* A FONT STACK IS RESOLVED PER GLYPH, NOT PER ELEMENT, and that is the whole
point of this rule. RobotoFlexVariable and Arial carry every character of a
normal answer, so they win for all of it and nothing here changes how the
chat looks. What they do NOT carry is U+2581-U+2588, the Block Elements the
trend sparkline is drawn from -- so those fell through to the generic
`sans-serif`, where the browser searches installed fonts ONE CHARACTER AT A
TIME. Different blocks resolved to different fonts, each with its own em box,
and the sparkline sat on no common baseline. Alan, 21 Sep.
Naming block-capable fonts here makes all eight come from ONE font, so they
align. Windows / macOS / Linux in that order, generic last. */
font-family: var(--iq-font), Arial, Helvetica,
"Segoe UI Symbol", Menlo, "DejaVu Sans Mono", Consolas, sans-serif;
padding: var(--iq-space-150) var(--iq-space-200);
border-radius: var(--iq-border-radius-md);
line-height: var(--iq-line-height-2xl);
box-shadow: var(--iq-shadow-1);
/* answers arrive as plain text with meaningful line breaks, so preserve them */
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.rag-chat__bubble--user {
background-color: var(--iq-color-blue-primary);
color: var(--iq-text-color-inverted);
border-bottom-right-radius: var(--iq-border-radius-xs);
}
.rag-chat__bubble--bot {
background-color: var(--iq-color-white);
border: var(--iq-border-default);
border-bottom-left-radius: var(--iq-border-radius-xs);
}
.rag-chat__bubble--error {
background-color: var(--iq-color-red-100);
border-color: var(--iq-color-red-300);
color: var(--iq-color-red-1000);
}
/* COMPOSER */
/* RICH SURFACE ONLY (software/ragChat/chatRich.php + ragChatRich.js).
Every selector below is new and the classic surface emits nothing that matches one, so
these rules are inert for anyone whose ragChatSurface is 'classic' -- which is everyone
until the key is deliberately set. Nothing above this comment was changed. */
/* a defect name the assistant produced, wrapped in a link to its view page. The
element is built by the browser with createElement; the service only ever sends the
name and an ep-encoded href. */
.rag-chat__defect-link {
color: var(--iq-color-blue-primary);
text-decoration: underline;
/* defect references run long (IQ-088-LOM-2010-PS) and the panel is 300px */
overflow-wrap: anywhere;
}
.rag-chat__defect-link:hover,
.rag-chat__defect-link:focus {
text-decoration: none;
}
/* the strip of preferred-image thumbnails appended below the answer text */
.rag-chat__thumbs {
display: flex;
flex-wrap: wrap;
gap: var(--iq-space-100);
margin-top: var(--iq-space-150);
}
.rag-chat__thumb {
display: inline-block;
line-height: 0;
border: var(--iq-border-default);
border-radius: var(--iq-border-radius-sm);
overflow: hidden;
cursor: pointer;
}
.rag-chat__thumb:hover,
.rag-chat__thumb:focus {
border-color: var(--iq-color-blue-primary);
}
.rag-chat__thumb img {
display: block;
width: 50px;
height: 50px;
/* fill, as ONE's own image cell renderer does, so a strip of thumbnails lines up
regardless of each photograph's aspect ratio */
object-fit: fill;
}
.rag-chat__composer {
padding: var(--iq-space-150);
border-top: var(--iq-border-default);
background-color: var(--iq-color-white);
}
.rag-chat__form {
display: flex;
gap: var(--iq-space-150);
align-items: center;
margin: 0;
}
/* a visible label would duplicate the placeholder - kept for screen readers only */
.rag-chat__label {
position: absolute;
width: 1px;
height: 1px;
margin: var(--iq-space-negative-025);
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.rag-chat__input {
flex: 1;
}
.rag-chat__send {
flex: 0 0 auto;
}
/* TYPING INDICATOR */
.rag-chat__status {
display: flex;
align-items: center;
gap: var(--iq-space-100);
margin-top: var(--iq-space-100);
color: var(--iq-text-color-light);
font-size: var(--iq-body-text-sm);
}
/* STOP CONTROL -- sits in the status row, so it is present only while a question is in flight. */
.rag-chat__stop {
margin-left: auto;
flex: 0 0 auto;
}
.rag-chat__status--hidden {
display: none;
}
.rag-chat__spinner {
width: var(--iq-icon-sm);
height: var(--iq-icon-sm);
border: var(--iq-border-width-300) solid var(--iq-color-grey-30);
border-top-color: var(--iq-color-blue-primary);
border-radius: var(--iq-border-radius-circle);
animation: rag-chat-spin var(--iq-duration-1000) linear infinite;
}
@keyframes rag-chat-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* HEADER LAUNCHER + FLOATING PANEL (application pages) */
/* launcher inherits .utility-nav__link sizing/hover from v6-menu.css */
.rag-chat-launcher {
cursor: pointer;
}
.rag-chat-panel {
position: fixed;
right: var(--iq-space-300);
bottom: var(--iq-space-300);
z-index: 1000; /* above page content, below Bootstrap modals (1050) */
display: flex;
flex-direction: column;
width: var(--iq-width-300);
max-width: calc(100vw - var(--iq-space-400));
height: 32rem;
max-height: calc(100vh - var(--iq-space-800));
overflow: hidden;
background-color: var(--iq-color-white);
border: var(--iq-border-default);
border-radius: var(--iq-border-radius-md);
box-shadow: var(--iq-shadow-5);
font-family: var(--iq-font-stack);
}
.rag-chat-panel--closed {
display: none;
}
/* minimised keeps the conversation loaded and only collapses to the header bar */
.rag-chat-panel--minimised {
height: auto;
}
.rag-chat-panel--minimised .rag-chat-panel__body {
display: none;
}
/* PANEL HEADER */
.rag-chat-panel__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--iq-space-100);
padding: var(--iq-space-100) var(--iq-space-150);
background-color: var(--iq-color-blue-primary);
color: var(--iq-text-color-inverted);
}
.rag-chat-panel__title {
display: flex;
align-items: center;
gap: var(--iq-space-100);
font-weight: var(--iq-font-weight-semibold);
}
.rag-chat-panel__dot {
width: var(--iq-space-100);
height: var(--iq-space-100);
border-radius: var(--iq-border-radius-circle);
background-color: var(--iq-color-success);
}
.rag-chat-panel__actions {
display: flex;
align-items: center;
gap: var(--iq-space-050);
}
.rag-chat-panel__actions .button {
background-color: transparent;
border-color: transparent;
color: var(--iq-text-color-inverted);
}
.rag-chat-panel__actions .button:hover {
background-color: var(--iq-color-blue-900);
border-color: transparent;
color: var(--iq-text-color-inverted);
}
/* the header action icons ship at 24px; size them down to the small icon token */
.rag-chat-panel__actions .iq-icon {
width: var(--iq-icon-sm);
height: var(--iq-icon-sm);
}
/* PANEL BODY */
.rag-chat-panel__body {
flex: 1;
min-height: 0;
}
.rag-chat-panel__frame {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* Automatic tag spot-check (TDV-131).
A DIFFERENT SHAPE FROM .ve-focus-* ABOVE, and deliberately so. That screen shows two photographs
because a tagger is naming every object in one frame. This one asks a much cheaper question - does
this picture plainly contain the thing the model said - so it is a grid of twelve, and covering
ground is the point.
The image box is a fixed height for the same reason the focus tile's is: a shorter photograph
following a taller one would shuffle the rows below it, and here the thing below is the class name
and confidence the reviewer is reading against the picture. */
.vea-image {
display: flex;
align-items: center;
justify-content: center;
height: 11rem;
background-color: var(--iq-color-grey-20);
}
/* Never upscale. The resolver normalises the short edge to 384px and stretching that across the box
would look right while hiding the detail the judgement depends on - a soft picture that reads as
"probably a flange" is exactly the wrong failure on a screen for checking whether it is one. */
.vea-image img {
max-width: 100%;
max-height: 100%;
}
@media (max-width: 991px) {
.vea-image {
height: 9rem;
}
}
/* The tile keeps a constant height so the badges line up across a row and can be scanned down a
column rather than hunted for. */
.vea-tile {
display: flex;
flex-direction: column;
}
.vea-cell {
margin-bottom: var(--iq-space-100);
}
/* Agreement badges.
FOUR STATES, THREE COLOURS, and the pairing is the point. Green is the model being right and red
the model being wrong, as verified against a human tick. Grey covers BOTH "nobody has assessed
this" and "the photograph is unusable" because neither is evidence about the tag - and a reviewer
scanning a page of grey badges should read "this page settles nothing", which is true. Colouring
unassessed tiles green would be the single most misleading thing this screen could do. */
.vea-badge {
display: inline-block;
padding: var(--iq-space-025) var(--iq-space-100);
border-radius: var(--iq-border-radius-sm);
font-size: var(--iq-body-text-sm);
line-height: 1.4;
}
.vea-badge-confirmed {
background-color: var(--iq-color-green-100);
color: var(--iq-color-green-800);
}
/* Agreement with a tick the threshold was FITTED ON. Amber rather than green, and it is the most
consequential colour choice on this screen: the model agrees with its own calibration set 73 times
out of 74, and a green badge would read as "the model is right" when it means "the tag and the
tick are not independent". Green is reserved for a verdict recorded AFTER the tags were written,
which is the only kind that confirms anything. */
.vea-badge-calibration {
background-color: var(--iq-color-yellow-100);
color: var(--iq-color-orange-1000);
}
.vea-badge-contradicted {
background-color: var(--iq-color-red-100);
color: var(--iq-color-red-900);
}
.vea-badge-unusable,
.vea-badge-unassessed {
background-color: var(--iq-color-grey-20);
color: var(--iq-text-color-med);
}
/* Rejected classes in the provenance table are muted rather than hidden. They are the evidence that
two classes were CHOSEN rather than merely produced, and a reader who sees only the survivors
cannot tell those two things apart - but they are not what the eye should land on first. */
.vea-run-rejected th,
.vea-run-rejected td {
color: var(--iq-text-color-med);
}
.vea-run-shipped th,
.vea-run-shipped td {
font-weight: 600;
}
/* The provenance table has eight numeric columns and must not force the page to scroll sideways.
Bootstrap's .table-responsive already does this; the class is here so the rule survives a future
move off Bootstrap, which is the stated direction for this skin. */
.vea-scroll-x {
overflow-x: auto;
}