/* Report Canvas Styles */
.report-canvas-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: #e8e8e8;
}

.canvas-toolbar {
    display: flex;
    align-items: center;
    /* On a phone the page's own button (the agent's) goes under the zoom buttons: it was cut at the screen's edge */
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

/* What the page adds at the toolbar's end (the report's check, the agent's button), pushed to the right */
.canvas-toolbar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.canvas-toolbar-buttons {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* The diagram with its rulers: corner, top ruler / left ruler, diagram */
.canvas-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 18px 1fr;
    grid-template-rows: 18px 1fr;
}

.ruler-corner {
    background: var(--neutral-layer-2);
    border-right: 1px solid var(--neutral-stroke-divider-rest);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.ruler {
    background: var(--neutral-layer-2);
    overflow: hidden;
    position: relative;
}

.ruler-top {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.ruler-left {
    border-right: 1px solid var(--neutral-stroke-divider-rest);
}

.ruler-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ruler-svg line {
    stroke: #8a8a8a;
    stroke-width: 1;
}

.ruler-svg text {
    font-size: 9px;
    fill: #616161;
    font-family: system-ui, sans-serif;
}

.canvas-wrapper {
    overflow: hidden;
    position: relative;
}

/* Ensure Blazor.Diagrams canvas uses absolute positioning for nodes */
.diagram-canvas {
    position: relative;
    width: 100%;
    height: 100%;
}

.diagram-canvas .diagram-node {
    position: absolute !important;
}

/* Report Node Base Styles */
.report-node {
    cursor: move;
    user-select: none;
}

.report-node:hover {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -2px;
}

/* An item an agent's step added or changed, marked a moment (ssrs2FlashItems) */
.report-node.agent-changed {
    animation: agent-changed 2.8s ease-out;
}

@keyframes agent-changed {
    0%, 35% { box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.8); }
    100% { box-shadow: 0 0 0 3px rgba(0, 120, 212, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .report-node.agent-changed { animation: none; outline: 2px solid rgba(0, 120, 212, 0.8); outline-offset: 1px; }
}

/* Textbox Node */
/* Report text without a font of its own renders in Arial 10pt: the canvas uses the renderer's face for it. */
.report-node {
    font-family: 'ssrs2 Arial', Arial, sans-serif;
    font-size: 10pt;
}

.textbox-node {
    min-width: 20px;
    min-height: 16px;
}

.textbox-node .node-content {
    width: 100%;
    height: 100%;
    word-wrap: break-word;
    overflow: hidden;
}

/* Rectangle Node */
.rectangle-node {
    min-width: 30px;
    min-height: 30px;
}

.rectangle-node .node-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 11px;
    pointer-events: none;
}

.rectangle-node.has-children {
    border-style: solid !important;
    border-color: #0078d4 !important;
}

/* How many items a rectangle holds, while the pointer is over it: shown always, it hid what the rectangle draws at
   its corner (a list card's colored badge, a first textbox) */
.rectangle-node .container-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: rgba(0, 120, 212, 0.9);
    border-radius: 3px;
    color: white;
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
    z-index: 1000;
}

.rectangle-node:hover > .container-indicator {
    display: flex;
}

.rectangle-node .container-indicator svg {
    stroke: white;
}

/* Rectangle children container */
.rectangle-children {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* Child wrapper for nested elements */
.child-wrapper {
    cursor: move;
}

/* An element dragged out of its rectangle (or a list's cell) is drawn over the page until it is dropped (ssrs2Resize) */
.lifting {
    overflow: visible !important;
}

/* A list's cell: its rectangle fills it; a click beside its items selects the cell */
.rectangle-node.in-cell {
    cursor: inherit;
}

.rectangle-node.in-cell:hover {
    outline: none;
}

/* Dragged with the mouse (ssrs2Resize): images are not dragged out as files */
.rectangle-children img {
    -webkit-user-drag: none;
}

.child-wrapper:hover {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

.child-wrapper.selected {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.2);
}

/* Child nodes inherit most styles from parent node types */
.child-node {
    cursor: move;
    user-select: none;
}

/* Line Node */
.line-node {
    min-width: 20px;
    min-height: 2px;
}

/* Image Node */
.image-node {
    min-width: 40px;
    min-height: 40px;
    overflow: hidden;
}

.image-node img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Conditional Image - Diagonal Slice Display */
/* Both images stacked at same position, each showing half via diagonal clip */
.conditional-image-container {
    overflow: hidden;
}

.conditional-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Top-left triangle: shows upper-left half of first image */
.conditional-img.top-left {
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 1;
}

/* Bottom-right triangle: shows lower-right half of second image */
.conditional-img.bottom-right {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 2;
}

.conditional-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: rgba(0, 120, 212, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    z-index: 10;
}

/* Visibility condition indicator for single conditional images */
.visibility-indicator {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: rgba(255, 152, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    z-index: 10;
    cursor: help;
}

/* Diagonal divider line */
.conditional-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 1px),
        rgba(0, 120, 212, 0.6) calc(50% - 1px),
        rgba(0, 120, 212, 0.6) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    pointer-events: none;
    z-index: 5;
}

.image-node .image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #666;
    text-align: center;
    padding: 8px;
}

.image-node .image-placeholder svg {
    opacity: 0.5;
}

.image-node .image-placeholder span {
    font-size: 11px;
}

/* Table Node */
.table-node {
    min-width: 100px;
    min-height: 50px;
}

.table-node .table-preview {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.table-node .table-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    color: #666;
    text-align: center;
    padding: 8px;
}

.table-node .table-placeholder svg {
    opacity: 0.5;
}

.table-node .dataset-name {
    font-size: 10px;
    color: #999;
    font-style: italic;
}

/* Chart Node */
.chart-node {
    min-width: 100px;
    min-height: 80px;
}

.chart-node .chart-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #666;
    text-align: center;
}

.chart-node .chart-placeholder svg {
    opacity: 0.5;
}

.chart-node .chart-title {
    font-weight: 600;
    font-size: 12px;
}

.chart-node .dataset-name {
    font-size: 10px;
    color: #999;
    font-style: italic;
}

/* Selection State */
.diagram-node.selected .report-node {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -2px;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.2);
}

/* Parent Highlight - shown when a child element is selected */
.report-node.parent-highlighted {
    outline: 2px dashed #ff9800 !important;
    outline-offset: -2px;
    box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.2) !important;
}

/* Parent info badge shown in properties panel */
.parent-info-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 4px;
    margin-bottom: 12px;
}

.parent-info-badge svg {
    color: #ff9800;
}

.parent-info-badge .parent-name {
    font-weight: 600;
    color: #ff9800;
}

/* Resize Handles (if implemented) */
.resize-handle {
    width: 8px;
    height: 8px;
    background: var(--accent-fill-rest);
    border: 1px solid white;
    position: absolute;
}

/* Page Guide */
.page-guide {
    position: absolute;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* Grid Background */
.canvas-grid {
    background-image:
        linear-gradient(to right, #ddd 1px, transparent 1px),
        linear-gradient(to bottom, #ddd 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Designer Panel Styles */
/* As tall as the page leaves it (the window less the header and the page's padding): sized to the window less the
   header alone, it was 32 px taller than its place, the page scrolled, and the editor slid under the header with its
   bottom (the canvas' scroll bar, the last properties) below the window */
.designer-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* A dialog opens with its title focused (so that Tab starts in it): no ring around it, which read as a text field */
.fluent-dialog-header > div[tabindex="0"]:focus,
.fluent-dialog-header > div[tabindex="0"]:focus-visible {
    outline: none;
}

.designer-layout {
    display: grid;
    grid-template-columns: 220px 1fr 280px;
    flex: 1;
    min-height: 0;
    gap: 0;
    overflow: hidden;
}

/* The preview beside the report being edited: two columns, the preview on the right */
.designer-container.preview-beside {
    flex-direction: row-reverse;
}

.designer-container.preview-beside > .designer-layout {
    min-width: 0;
}

/* The palette and Properties fold to a rail on a wide window: when the assistant opens, and by their own toggles */
.panel-toggle {
    display: none;
}

@media (min-width: 900px) {
    /* The toggle sits in the panel's corner, out of the flow: the panel's content keeps its place (and so do the
       popups its fields open) */
    .panel-toggle {
        display: flex;
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 1;
    }

    .element-palette,
    .properties-panel {
        position: relative;
    }

    .designer-layout.palette-collapsed {
        grid-template-columns: 40px 1fr 280px;
    }

    .designer-layout.properties-collapsed {
        grid-template-columns: 220px 1fr 40px;
    }

    .designer-layout.palette-collapsed.properties-collapsed {
        grid-template-columns: 40px 1fr 40px;
    }

    .designer-layout.palette-collapsed .element-palette,
    .designer-layout.properties-collapsed .properties-panel {
        overflow: hidden;
        padding: 8px 4px;
    }

    .designer-layout.palette-collapsed .element-palette > :not(.panel-toggle),
    .designer-layout.properties-collapsed .properties-panel > :not(.panel-toggle) {
        display: none;
    }

    .designer-layout.palette-collapsed .element-palette > .panel-toggle,
    .designer-layout.properties-collapsed .properties-panel > .panel-toggle {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

/* A narrow window (a phone, a tablet upright, a window split in three): the canvas, the properties and the toolbox one
   under the other, the page scrolling, rather than three columns that left the canvas no width at all */
@media (max-width: 899px) {
    .designer-container {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .designer-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 75vh auto auto;
    }

    .canvas-area {
        order: 0;
    }

    /* A swipe up or down over the canvas scrolls the page (the canvas is most of a phone's screen): the diagram took
       every touch (touch-action: none), and the page could only be scrolled beside it. Taps still select, a sideways
       drag still pans or moves. */
    .canvas-area .diagram-canvas {
        touch-action: pan-y;
    }

    .properties-panel {
        order: 1;
    }

    .element-palette {
        order: 2;
        border-right: none;
        border-top: 1px solid var(--neutral-stroke-divider-rest);
        overflow: visible;
    }

    /* The toolbox's items side by side, a section a row */
    .element-palette .palette-section {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 4px;
        margin-bottom: 8px;
    }

    .element-palette .palette-section > h4 {
        flex-basis: 100%;
        margin-bottom: 2px;
    }

    .properties-panel {
        border-left: none;
        border-top: 1px solid var(--neutral-stroke-divider-rest);
        overflow: visible;
    }
}

.element-palette {
    background: var(--neutral-layer-1);
    border-right: 1px solid var(--neutral-stroke-divider-rest);
    padding: 12px;
    overflow-y: auto;
}

.palette-section {
    margin-bottom: 16px;
}

.palette-section h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: grab;
    transition: background 0.15s;
}

.palette-item:hover {
    background: var(--neutral-layer-2);
}

.palette-item:active {
    cursor: grabbing;
}

.properties-panel {
    background: var(--neutral-layer-1);
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    padding: 12px;
    overflow-y: auto;
}

.properties-section {
    margin-bottom: 20px;
}

.properties-section h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.property-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.property-row label {
    font-size: 12px;
    color: var(--neutral-foreground-rest);
}

/* A dialog's row of fields, side by side, each label above its field. Not .property-row: a component's <style> is
   global, and the chart dialog's row once made the properties panel's labels right-aligned over narrow fields (and
   the panel's column made the dialog's). */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-end;
}

/* A field of a .form-row with its label above it (Fluent writes the label before the field); .grow takes the row's
   free width. */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.form-field.grow {
    flex: 1;
}

/* A select is as wide as its Style says: Fluent's are at least 250px, and three of them overflowed a series' row */
.form-field fluent-select {
    min-width: 0;
}

/* A checkbox beside fields sits level with their boxes rather than with their bottom edge */
.form-row > fluent-checkbox {
    margin-bottom: 6px;
}

/* Element Tree */
.element-tree {
    background: var(--neutral-layer-1);
    border-right: 1px solid var(--neutral-stroke-divider-rest);
}

/* Canvas Area */
.canvas-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #e8e8e8;
    overflow: hidden;
    position: relative;
}

/* Empty Canvas State */
.empty-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #f5f5f5 25%, #e8e8e8 25%, #e8e8e8 50%, #f5f5f5 50%, #f5f5f5 75%, #e8e8e8 75%);
    background-size: 20px 20px;
}

.empty-canvas-intro {
    color: var(--neutral-foreground-hint);
    margin: 8px 0 0;
    max-width: 560px;
    line-height: 1.5;
}

.empty-canvas-note {
    color: var(--neutral-foreground-hint);
    margin: 20px 0 0;
    font-size: 12px;
}

/* Items the canvas does not draw (gauges, maps, subreports, custom items): a labelled box */
.placeholder-node {
    box-sizing: border-box;
    border: 1px dashed var(--neutral-stroke-strong-rest, #8a8a8a);
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0 8px, transparent 8px 16px), var(--neutral-layer-1, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Typing into a textbox or cell on the canvas (InlineTextEditor): the text in place, as it looks, framed */
.inline-text-editor {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 1.6em;
    margin: 0;
    border: none;
    outline: 2px solid var(--accent-fill-rest, #0078d4);
    outline-offset: -2px;
    resize: none;
    overflow: hidden;
    background: #fff;
    font: inherit;
    color: inherit;
    text-align: inherit;
    white-space: pre-wrap;
}

/* A barcode (SSRS2's own item), drawn as the report draws it (BarcodeView): the engine's modules, its text under bars */
.barcode-node {
    box-sizing: border-box;
    overflow: hidden;
}

.barcode-view {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.barcode-view .barcode-modules {
    position: absolute;
    display: block;
    pointer-events: none;
}

/* A sample code where the value is an expression or not written yet */
.barcode-view.sample .barcode-modules {
    opacity: 0.45;
}

.barcode-view .barcode-text {
    position: absolute;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.15;
    pointer-events: none;
}

.barcode-view .barcode-error {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px;
    border: 1px dashed var(--error, #c50f1f);
    color: var(--error, #c50f1f);
    font: 10px/1.25 'Segoe UI', system-ui, sans-serif;
    text-align: center;
    overflow: hidden;
}

.barcode-view .barcode-kind {
    font-weight: 600;
}

.barcode-view .barcode-sample-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--accent-fill-rest, #0078d4);
    font: italic 600 9px/14px 'Segoe UI', system-ui, sans-serif;
    pointer-events: none;
}

.cell-barcode {
    position: relative;
}

/* What only SSRS2 draws (barcodes, justified text): said on the toolbox, the toolbar, the item's properties */
.ssrs2-only-tag {
    display: inline-block;
    padding: 0 5px;
    border-radius: 8px;
    background: #e8f1fb;
    color: #0f548c;
    font: 600 10px/16px 'Segoe UI', system-ui, sans-serif;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.palette-item .palette-tag {
    margin-left: auto;
}

.ssrs2-only-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    padding: 2px 8px 2px 3px;
    border: 1px solid #c7dcf3;
    border-radius: 12px;
    background: var(--neutral-layer-1, #fff);
    color: var(--neutral-foreground-rest, #242424);
    font: 12px/18px 'Segoe UI', system-ui, sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.ssrs2-only-chip:hover {
    background: #f3f8fd;
}

.ssrs2-only-note {
    margin: 4px 0 10px;
    padding: 8px;
    border-radius: 4px;
    background: #f3f8fd;
    color: var(--neutral-foreground-rest, #242424);
    font-size: 12px;
    line-height: 1.4;
}

.ssrs2-only-note .ssrs2-only-tag {
    margin-right: 4px;
}

/* A gauge or map the engine drew: its image, with the border and background it renders with */
.placeholder-node.drawn {
    border: none;
    background: none;
}

/* Charts, gauges and maps as the engine renders them (ItemImage): the node's box, the pointer passing through to it */
.item-image {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
}

.item-not-drawn {
    display: contents;
}

.placeholder-node .placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px;
    text-align: center;
    color: var(--neutral-foreground-hint, #616161);
    font-size: 11px;
    line-height: 1.3;
}

.placeholder-node .placeholder-kind {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}

.placeholder-node .placeholder-name {
    font-weight: 600;
    color: var(--neutral-foreground-rest, #242424);
}

/* Inline validation message under a dialog field */
.dialog-field-error {
    color: var(--error, #c50f1f);
    font-size: 12px;
    margin-top: 4px;
}

/* Page sections on the canvas: header, body, footer bands behind the report items */
.report-band {
    fill: #ffffff;
    stroke: #c8c8c8;
    stroke-width: 1;
    pointer-events: none;
}

.report-band-header,
.report-band-footer {
    fill: #fafafa;
    stroke-dasharray: 4 3;
}

.report-band-label {
    font: 10px "Segoe UI", sans-serif;
    fill: #8a8a8a;
    pointer-events: none;
    user-select: none;
}

/* Resize frame and handles around the selected element (sized in diagram pixels; --handle keeps the
   handles about 8 screen pixels at any zoom) */
.resize-frame {
    position: absolute;
    box-sizing: border-box;
    border: 1px dashed #0f6cbd;
    pointer-events: none;
    z-index: 10;
}

.resize-frame.moving {
    display: none;
}

/* The handles of an element inside a rectangle, on its edges (its own outline shows it selected) */
.resize-frame.child-frame {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-color: transparent;
}

.resize-handle {
    position: absolute;
    width: var(--handle);
    height: var(--handle);
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #0f6cbd;
    pointer-events: auto;
}

.resize-nw { left: calc(var(--handle) / -2); top: calc(var(--handle) / -2); cursor: nwse-resize; }
.resize-n { left: calc(50% - var(--handle) / 2); top: calc(var(--handle) / -2); cursor: ns-resize; }
.resize-ne { right: calc(var(--handle) / -2); top: calc(var(--handle) / -2); cursor: nesw-resize; }
.resize-e { right: calc(var(--handle) / -2); top: calc(50% - var(--handle) / 2); cursor: ew-resize; }
.resize-se { right: calc(var(--handle) / -2); bottom: calc(var(--handle) / -2); cursor: nwse-resize; }
.resize-s { left: calc(50% - var(--handle) / 2); bottom: calc(var(--handle) / -2); cursor: ns-resize; }
.resize-sw { left: calc(var(--handle) / -2); bottom: calc(var(--handle) / -2); cursor: nesw-resize; }
.resize-w { left: calc(var(--handle) / -2); top: calc(50% - var(--handle) / 2); cursor: ew-resize; }

/* Snap grid: dots over the bands while snapping is on */
.report-grid {
    pointer-events: none;
}

.report-grid-dot {
    fill: #c9c9c9;
}

/* Tables on the canvas: the real grid, cells selectable */
.tablix-grid {
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 10pt;
}

.tablix-cell {
    border: 1px solid #d6d6d6;
    padding: 1px 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: cell;
}

/* A sparkline, data bar or indicator the engine drew: its image fills the cell */
.tablix-cell.drawn-cell {
    position: relative;
    padding: 0;
}

.tablix-cell.drawn-cell .item-image {
    position: absolute;
    inset: 0;
}

/* A list's cell: its rectangle fills the cell, and its items are where the report places them (CellItems) */
.tablix-cell.list-cell {
    position: relative;
    padding: 0;
}

.cell-items {
    position: absolute;
    inset: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.cell-item {
    position: absolute;
    box-sizing: border-box;
}

.cell-item-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: pre-wrap;
}

.cell-item-line {
    display: block;
    overflow: visible;
}

.cell-item-kind {
    font-size: 9px;
    color: var(--neutral-foreground-hint, #616161);
}

.cell-table {
    width: 100%;
}

/* The selected cell's column width and row height, side by side */
.table-sizes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

/* A selected table's cells size their column and row by their right and bottom edges */
.table-node.sizing .tablix-cell {
    position: relative;
}

.tablix-grip {
    position: absolute;
    z-index: 3;
}

.tablix-grip.column-grip {
    top: 0;
    bottom: 0;
    right: 0;
    width: 5px;
    cursor: col-resize;
}

.tablix-grip.row-grip {
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    cursor: row-resize;
}

.tablix-grip:hover,
.tablix-grip.dragging {
    background: var(--accent-fill-rest, #0f6cbd);
    opacity: 0.45;
}

.tablix-cell.selected-cell {
    outline: 2px solid #0f6cbd;
    outline-offset: -2px;
}

.table-commands {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}


/* A table's groups, outermost first: the field on its own line, then its order, options and remove button */
.table-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    padding: 2px 4px 2px 8px;
    border-left: 2px solid var(--accent-fill-rest);
    background: var(--neutral-layer-2);
    font-size: 12px;
}

/* A cell formatted by a rule or expression: a small corner mark (the canvas shows its "otherwise" look) */
.tablix-cell.conditional {
    background-image: linear-gradient(225deg, #0f6cbd 5px, transparent 5px);
}

/* Conditional formatting: one line per property (label, the rule as a sentence, Add/Edit) */
.format-rule {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.format-rule-summary {
    color: var(--neutral-foreground-hint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A message about the canvas (an item refused there, a report that did not open, what a report holds that is worth
   knowing): a line of its own above the canvas, as the agent's is. Over the canvas, it covered the toolbar's zoom and
   agent buttons */
.canvas-message {
    flex-shrink: 0;
    margin: 8px 12px 0;
}

.canvas-message .load-notice-action {
    margin-left: 8px;
}

/* Pictures the report waits for: placeholders filled by dropping the files on the canvas */
.pictures-banner {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 12px 0;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 8%, var(--neutral-layer-1));
    border: 1px dashed color-mix(in srgb, var(--accent-fill-rest) 55%, transparent);
    border-radius: 6px;
}

.pictures-banner-text {
    flex: 1 1 260px;
    min-width: 0;
}

.pictures-banner-pick {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--accent-foreground-rest);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-1);
    cursor: pointer;
    white-space: nowrap;
}

.pictures-banner-pick:hover {
    background: var(--neutral-fill-stealth-hover);
}

.pictures-banner-pick input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.canvas-area.pictures-drop {
    outline: 2px dashed var(--accent-fill-rest);
    outline-offset: -6px;
}

/* A connected agent: what it did last, over the canvas it changes */
.agent-strip {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    margin: 8px 8px 0;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--neutral-foreground-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, var(--neutral-layer-1));
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 35%, transparent);
    border-radius: 6px;
}

.agent-strip.working {
    border-color: var(--accent-fill-rest);
}

.agent-strip .agent-strip-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-strip .agent-strip-undo {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent-fill-rest);
    text-decoration: underline;
    cursor: pointer;
}

/* Smart guides while dragging */
.alignment-guide {
    stroke: #e3008c;
    stroke-dasharray: 4 3;
    pointer-events: none;
}

/* ... and while resizing (drawn in the resize frame by ssrs2Resize, a border as wide as a screen pixel) */
.resize-guide {
    position: absolute;
    border: 0 dashed #e3008c;
    pointer-events: none;
}

/* Group headers and the corner of a matrix: laid out as the report does, not edited here yet */
.tablix-header-cell {
    background-color: #f3f6fb;
    cursor: default;
}

.table-group .group-field,
.table-group .table-group-by {
    flex: 1 1 100%;
    min-width: 0;
}

.table-group > :last-child {
    margin-left: auto;
}

/* A group that breaks pages: where the breaks go, page numbers and names, on a line of their own */
.table-group .group-page-options {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    padding-left: 12px;
}

.table-group .group-page-options fluent-select {
    flex: 1 1 100%;
    min-width: 0;
}

/* A group's order, A to Z or Z to A */
.table-group .group-sort {
    min-width: 0;
    font-size: 12px;
    white-space: nowrap;
}

/* Keyboard shortcuts (? or the palette's button) */
.shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.shortcuts-panel {
    background: var(--neutral-layer-1, #fff);
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 560px;
}

.shortcuts-panel table {
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 13px;
}

.shortcuts-panel td {
    padding: 4px 12px 4px 0;
    vertical-align: top;
}

.shortcuts-panel .shortcut-keys {
    white-space: nowrap;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: var(--neutral-foreground-hint);
}

/* The last steps, each undoable back to before it */
.history-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    gap: 6px;
}

.history-step span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sort rows by: the field, then the direction */
.sort-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px;
}

/* Bold, italic, underline on one line; a border's style, width and color side by side */
.font-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.border-controls {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 4px;
}

.border-controls fluent-select,
.border-controls fluent-text-field {
    min-width: 0;
    width: 100%;
}

/* An item's action: the bookmarks of the report to pick from, a drillthrough's parameters (name, value, remove) */
.bookmark-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.property-hint {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.drillthrough-parameter {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    align-items: center;
    gap: 4px;
}

.drillthrough-parameter fluent-text-field {
    min-width: 0;
    width: 100%;
}

.drillthrough-parameters .add-parameter {
    align-self: flex-start;
}

/* A table's filters: each as a sentence ("Region is North") with its Edit button, then "Add a filter…" */
.table-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px 2px 8px;
    border-left: 2px solid var(--accent-fill-rest);
    background: var(--neutral-layer-2);
    font-size: 12px;
}

.table-filter-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-filters .add-filter {
    align-self: flex-start;
}

/* A group's filters, on a line of their own under its controls */
.table-group .group-filters {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* The report source editor: the report's RDL, in the middle of the page */
.report-source-body {
    height: 100%;
}

.report-source {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 360px;
}

.report-source-hint {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.report-source-hint code,
.report-source-hint kbd {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, Menlo, 'Liberation Mono', monospace;
    font-size: 11px;
    padding: 0 4px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 3px;
    background: var(--neutral-layer-2);
}

.report-source-modules {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
}

.report-source-goto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.report-source-section {
    padding: 1px 8px;
    font: inherit;
    color: var(--accent-foreground-rest);
    background: none;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    cursor: pointer;
}

.report-source-section:hover {
    background: var(--neutral-layer-2);
}

.report-source-input {
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    padding: 8px 10px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, Menlo, 'Liberation Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
}

.report-source-input:focus {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

.report-source-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    min-height: 20px;
}

.report-source-status.has-problem {
    color: #a4262c;
}

/* The text editor: a textbox's text in the middle of the page, colored, with completions and a helper beside it */
.text-editor-body {
    height: 100%;
}

.text-editor {
    display: flex;
    gap: 16px;
    height: 100%;
    min-height: 360px;
}

.text-editor-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.text-editor-hint {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.text-editor-hint code,
.text-editor-hint kbd {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, Menlo, 'Liberation Mono', monospace;
    font-size: 11px;
    padding: 0 4px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 3px;
    background: var(--neutral-layer-2);
}

/* Describe it: what the text should show, for a language model the person brings; its panel; what it answered */
.text-editor-ask {
    display: flex;
    align-items: center;
    gap: 8px;
}

.text-editor-ask .ask-input,
.text-editor-model select,
.text-editor-model input {
    height: 32px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    color: inherit;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest, #fff);
    min-width: 0;
}

.text-editor-ask .ask-input {
    flex: 1;
}

.text-editor-ask .ask-input:focus,
.text-editor-model select:focus,
.text-editor-model input:focus {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

.text-editor-model {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(140px, 200px) minmax(160px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
}

@media (max-width: 900px) {
    .text-editor-model {
        grid-template-columns: 1fr 1fr;
    }
}

.text-editor-model .model-note,
.text-editor-model .model-problem {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.text-editor-model .model-problem {
    color: #a4262c;
}

.text-editor-suggestion {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.text-editor-suggestion.refused .suggestion-text {
    color: #a4262c;
}

.text-editor-suggestion .suggestion-undo {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent-fill-rest);
    text-decoration: underline;
    cursor: pointer;
}

.code-area {
    position: relative;
    flex: 1;
    min-height: 200px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: #fff;
}

.code-area:focus-within {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.code-area .code-highlight,
.code-area .code-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, Menlo, 'Liberation Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow-y: scroll;
    overflow-x: hidden;
    tab-size: 4;
    border: none;
}

.code-area .code-highlight {
    color: #1f2328;
    pointer-events: none;
}

.code-area .code-input {
    color: transparent;
    background: transparent;
    caret-color: #1f2328;
    resize: none;
    outline: none;
}

.code-area .code-input::selection {
    background: rgba(0, 120, 212, 0.22);
    color: transparent;
}

.tok-string { color: #a31515; }
.tok-ref { color: #0b5cad; font-weight: 600; }
.tok-unknown { text-decoration: underline wavy #d13438; text-decoration-skip-ink: none; }
.tok-code { color: #6f42c1; }
.tok-number { color: #098658; }
.tok-keyword { color: #0000c8; font-weight: 600; }
.tok-function { color: #795e26; }
.tok-operator { color: #555; }

.code-completions {
    position: absolute;
    z-index: 30;
    width: 320px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--neutral-layer-floating, #fff);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    padding: 4px 0;
}

.code-completions .completion {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 13px;
}

.code-completions .completion.selected,
.code-completions .completion:hover {
    background: var(--accent-fill-rest);
    color: #fff;
}

.completion-name {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, Menlo, 'Liberation Mono', monospace;
    white-space: nowrap;
}

.completion-detail {
    color: var(--neutral-foreground-hint);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.code-completions .completion.selected .completion-detail,
.code-completions .completion:hover .completion-detail {
    color: rgba(255, 255, 255, 0.85);
}

.code-signature {
    position: absolute;
    z-index: 31;
    max-width: 520px;
    padding: 6px 10px;
    background: #fdfdfd;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    pointer-events: none;
}

.signature-text {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, Menlo, 'Liberation Mono', monospace;
    color: #1f2328;
}

.signature-current {
    font-weight: 700;
    color: var(--accent-fill-rest);
}

.signature-description {
    margin-top: 2px;
    color: var(--neutral-foreground-hint);
}

.text-editor-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    min-height: 20px;
}

.text-editor-status.has-issues {
    color: #856404;
}

.text-editor-shows {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    font-size: 13px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
    max-height: 5.5em;
    overflow: auto;
}

.text-editor-shows .shows-label {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.text-editor-shows .shows-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.text-editor-shows.error .shows-text {
    color: #a4262c;
    font-size: 12px;
}

.text-editor-helper {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.helper-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 4px 0;
}

.helper-section {
    position: sticky;
    top: -4px;
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-1);
}

.helper-item {
    display: flex;
    flex-direction: column;
    padding: 4px 12px;
    cursor: pointer;
}

.helper-item:hover {
    background: var(--neutral-layer-3);
}

.helper-name {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, Menlo, 'Liberation Mono', monospace;
    font-size: 12px;
    font-weight: 600;
}

.helper-detail {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* A property that takes an expression: its field, and the fx button that opens it in the text editor */
.expression-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

/* A field's label (rendered before it) keeps its own line, above the field and its button */
.expression-field > label {
    flex-basis: 100%;
}

.expression-field > fluent-text-field {
    flex: 1;
    min-width: 0;
}

.section-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Where the report being edited is saved: its name and version in My reports */
.save-status {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* An action written as a link (Versions…, Share…, a waitlist): a button that looks like the app's links */
.link-button {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: #006bb7;
    text-decoration: underline;
    text-align: left;
    cursor: pointer;
}

.save-links {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 12px;
}

/* A feature that is not built yet, asked for through a waitlist: a line under the button it would sit beside */
.waitlist-open {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--neutral-foreground-hint);
}

/* Wraps a button inside a clickable line: its click stays the button's (@onclick:stopPropagation on the span; a Fluent
   button's own OnClick:stopPropagation does nothing), and the span takes no room */
.stop-click {
    display: contents;
}

/* A dataset's fields, dragged onto the report as from Report Builder's Report Data pane */
.dataset-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 0 8px 26px;
}

.data-field {
    font-size: 11px;
    line-height: 18px;
    padding: 0 7px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 9px;
    background: var(--neutral-layer-2);
    cursor: grab;
    user-select: none;
}

.data-field:hover {
    border-color: var(--accent-fill-rest);
}

/* The designer's assistant (Agents/BuiltInAgent): a floating window over the page. It starts over the Properties column
   (ssrs2Assistant.place) and is dragged by its header; on a narrow window it is a bottom sheet (below). */
.assistant-panel {
    position: fixed;
    top: 66px;
    right: 16px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    width: min(340px, calc(100vw - 32px));
    height: min(560px, calc(100vh - 96px));
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

/* Kept on the page while it is closed, so that its place and its conversation survive closing it */
.assistant-panel.assistant-closed {
    display: none;
}

@media (min-width: 900px) {
    .assistant-head {
        cursor: grab;
        touch-action: none;
    }
}

/* A narrow window: a bottom sheet, the canvas above it, the header (and the assistant's button in it) above that */
@media (max-width: 899px) {
    .assistant-panel {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: min(60vh, 520px);
        border-radius: 12px 12px 0 0;
    }
}

.assistant-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 8%, var(--neutral-layer-1));
}

.assistant-title {
    font-weight: 600;
}

.assistant-sub {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Newest at the bottom, and the bottom in view: the log is laid out from its end */
.assistant-log {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.45;
}

.assistant-entry {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.assistant-entry.person {
    align-self: flex-end;
    max-width: 85%;
    padding: 6px 10px;
    border-radius: 10px 10px 2px 10px;
    background: color-mix(in srgb, var(--accent-fill-rest) 16%, var(--neutral-layer-1));
}

.assistant-entry.agent {
    max-width: 95%;
}

.assistant-entry.step {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    padding-left: 14px;
    position: relative;
}

.assistant-entry.step::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.6em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
}

.assistant-entry.note {
    font-size: 12px;
    font-style: italic;
    color: var(--neutral-foreground-hint);
}

.assistant-working {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.assistant-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    animation: assistant-pulse 1s ease-in-out infinite alternate;
}

@keyframes assistant-pulse {
    from { opacity: 0.25; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .assistant-dot { animation: none; }
}

.assistant-hint {
    color: var(--neutral-foreground-hint);
}

.assistant-hint p {
    margin: 0 0 8px;
}

.assistant-examples {
    font-style: italic;
}

.assistant-input,
.assistant-signin {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.assistant-signin {
    align-items: center;
    font-size: 12px;
}

.assistant-input textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    padding: 6px 8px;
    font: inherit;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-input-rest, var(--neutral-layer-1));
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
}

.assistant-input textarea:focus {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

.assistant-signin > span {
    flex: 1;
    min-width: 0;
}

.assistant-signin > fluent-button,
.assistant-input > fluent-button {
    flex-shrink: 0;
}