/* wwwroot/css/layout.css */
.ds-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.ds-main { flex: 1; padding: var(--content-top) var(--gutter) var(--space-6); max-width: 1920px; width: 100%; margin-inline: auto; }

/* top bar: 48 px, entries inline, right cluster = DEMO PODACI badge, tenant logo, ACCOUNT (DESIGN.md 10.1) ----------- */
.ds-topbar {
  position: relative; isolation: isolate; z-index: var(--z-nav);
  height: var(--nav-height); padding-inline: var(--header-inset);
  display: flex; align-items: center; gap: var(--space-6);
  background:
    linear-gradient(180deg, transparent calc(100% - 4px), var(--color-nav-base) 100%),
    linear-gradient(90deg, var(--color-nav-start) 0%, var(--color-nav-peak) 26%, var(--color-nav-mid) 52%, var(--color-nav-end) 80%, var(--color-nav-edge) 100%);
}
.ds-topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.18; background: url("/img/bg-network.svg") left top / cover no-repeat; }
.ds-brand { display: block; width: 64px; height: 32px; color: var(--color-text); flex: none; }
.ds-nav { display: flex; align-items: center; gap: var(--nav-gap); margin: 0; padding: 0; list-style: none; }
.ds-nav__item {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  min-width: var(--target-min); min-height: var(--nav-item-h); padding: 0 var(--space-2); border-radius: var(--radius-md);
  color: var(--color-text); text-decoration: none;
  font-size: var(--text-xs); line-height: var(--lh-tight); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-nav); text-transform: uppercase; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease);
}
.ds-nav__icon { width: 20px; height: 20px; flex: none; }
@media (hover: hover) {
  .ds-nav__item:hover { background: rgba(255, 255, 255, 0.08); }
}
.ds-nav__item[aria-current="page"] { font-weight: var(--weight-bold); }
/* the active bar sits on the bottom edge of the top bar, (item - bar) / 2 below the item */
.ds-nav__item[aria-current="page"]::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: calc((var(--nav-item-h) - var(--nav-height)) / 2); height: 3px; border-radius: 2px; background: var(--color-primary); }
.ds-nav__lock { position: absolute; top: 4px; left: 20px; width: 12px; height: 12px; color: var(--color-text); }
.ds-badge-dot { position: absolute; top: 6px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-negative); box-shadow: 0 0 0 2px var(--color-nav-mid); }
.ds-topbar__aside { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-3); }
.ds-topbar__demo { box-shadow: inset 0 0 0 1px var(--color-info); }   /* the DEMO PODACI badge: at every width, never in the drawer */
.ds-topbar__tenant { display: flex; align-items: center; height: 24px; max-width: 120px; min-height: var(--target-min); color: var(--color-text); text-decoration: none; }
.ds-topbar__tenant .ds-tenant-logo { height: 24px; max-width: 120px; }
.ds-topbar__account .ds-nav__icon { width: 24px; height: 24px; }
.ds-nav__count { position: absolute; top: 2px; left: 22px; }
.ds-topbar .ds-hamburger { display: none; }   /* beats the display of .ds-icon-btn (components.css loads later) */

/* context row: 40 px, only when the page has section or domain tabs (DESIGN.md 10.2) --------------------------- */
.ds-context { display: flex; align-items: stretch; gap: var(--space-6); width: calc(100% - 2 * var(--gutter)); max-width: calc(1920px - 2 * var(--gutter)); min-height: var(--context-row-h); margin-inline: auto; border-bottom: 1px solid var(--color-border-subtle); }
.ds-context__sections, .ds-context__domains { display: flex; align-items: stretch; min-width: 0; }
.ds-context__sections { gap: var(--space-6); }
.ds-context__domains { gap: var(--space-4); margin-inline-start: auto; }
/* .ds-section-tab is also the tab of the in-page TabStrip (Section variant); the context row's look is scoped to .ds-context */
/* in-page tab strips (DESIGN.md 8.5): a 36 px row on the strip's 1 px rule, 14/20 500 muted, the current tab 600 with a 2 px accent indicator on the rule */
.ds-section-tab { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; font-size: var(--text-tab); line-height: 1.43; font-weight: var(--weight-medium); color: var(--color-text-muted); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ds-section-tab:hover { color: var(--color-text); }
.ds-section-tab[aria-selected="true"] { color: var(--color-text); font-weight: var(--weight-semibold); }
.ds-section-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--color-accent); }
.ds-section-tab:focus-visible { outline-offset: -2px; }   /* inside the tab: a strip that scrolls never clips the ring */
.ds-context .ds-section-tab { min-height: 0; padding: 0 2px; line-height: 1.43; color: var(--color-text-muted); }
.ds-context .ds-section-tab:hover, .ds-context .ds-section-tab[aria-current] { color: var(--color-text); }
.ds-context .ds-section-tab[aria-current] { font-weight: var(--weight-semibold); }
.ds-domain-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 2px; border: 0; background: none; color: var(--color-text); text-decoration: none; white-space: nowrap; cursor: pointer; font-size: var(--text-sm); line-height: var(--lh-body); font-weight: var(--weight-regular); }
.ds-domain-tab[aria-selected="true"] { font-weight: var(--weight-semibold); }
.ds-domain-tab[data-locked="true"], .ds-domain-tab[aria-disabled="true"] { color: var(--color-text-muted); }
@media (hover: hover) {
  .ds-domain-tab:hover { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.6); text-decoration-thickness: 2px; text-underline-offset: 6px; }
}
/* the hit area of a tab reaches past its text (44 px on touch) */
.ds-section-tab::before, .ds-domain-tab::before { content: ""; position: absolute; inset: -6px -4px; }
/* in-page strips: a short tab's hit area grows to the target width (32, 44 on touch), at most 12 px into the 24 px gap, so neighbouring areas touch and never overlap; a longer tab keeps 4 px (DESIGN.md 14) */
.ds-tabstrip .ds-section-tab::before { inset-inline: max(calc(-1 * var(--space-3)), min(calc(-1 * var(--space-1)), calc(50% - var(--target-min) / 2))); }
/* the indicators sit on the row's rule */
.ds-context .ds-section-tab[aria-current]::after, .ds-domain-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; }
.ds-context .ds-section-tab[aria-current]::after { background: var(--color-primary); }
.ds-domain-tab[aria-selected="true"]::after { background: var(--color-accent); }
.ds-context .ds-section-tab:focus-visible, .ds-domain-tab:focus-visible, .ds-sidebar__item:focus-visible { outline-offset: -2px; }

/* the page heading: the h1, first in main; visible only where nothing else names the page (DESIGN.md 10.3) */
.ds-page-heading { margin: 0 0 var(--space-3); font-size: var(--text-xl); line-height: 1.4; font-weight: var(--weight-semibold); }

/* page grids ------------------------------------------------------------ */
.ds-page { display: grid; gap: var(--card-gap); }
/* the report page fills the viewport below the bars and leaves 24 px at the bottom (DESIGN.md S-02, 9.5; spec 21 5.1): the left column and the chat panel are both --work-h high */
.ds-grid-report, .ds-grid-delta { --work-h: max(520px, calc(100dvh - var(--nav-height) - var(--chrome-row, 0px) - var(--content-top) - var(--space-6))); }   /* 48 + 40 + 16 + 24 subtracted at 1440 x 900 */
.ds-grid-report { display: grid; grid-template-columns: minmax(0, 1fr) var(--chat-width); gap: var(--card-gap); align-items: start; }
.ds-grid-report--solo { grid-template-columns: minmax(0, 1fr); }   /* no assistant (a platform administrator in support mode): the report takes the width, the data line keeps its place on the right */
.ds-grid-report--solo .ds-report-toolbar { justify-content: flex-end; }
.ds-grid-delta { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); gap: var(--card-gap); align-items: start; }
/* the tool row (DESIGN.md 8.5): one 32 px row, each tool a 20 px icon left of a 13 px label, 4 px apart; the selected one 600 on surface-2, hover a fill */
.ds-toolrow { display: flex; gap: var(--space-1); min-height: var(--control-h-md); margin-bottom: var(--space-3); }
.ds-tool { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-md); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-regular); white-space: nowrap; }
.ds-tool[aria-checked="true"], .ds-tool[aria-pressed="true"] { background: var(--color-surface-2); font-weight: var(--weight-semibold); }
.ds-tool__icon { width: 20px; height: 20px; flex: none; }
@media (hover: hover) { .ds-tool:not([aria-checked="true"]):not([aria-disabled="true"]):hover { background: var(--color-surface-hover-2); } }

/* workspace frame: frame + sidebar + content panel, no title row (DESIGN.md 10.3) --------------------------- */
/* the rows above the content: the frame fills the viewport below them and leaves 24 px at the bottom (base.css scroll-padding-top reads it too) */
:root:has(.ds-context) { --chrome-row: var(--context-row-h); }
.ds-workspace { background: var(--color-surface-1); border-radius: var(--radius-xl); padding: var(--space-2); min-height: max(520px, calc(100dvh - var(--nav-height) - var(--chrome-row, 0px) - var(--content-top) - var(--space-6))); display: grid; }
.ds-workspace__body { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch; }
.ds-workspace__body > .ds-workspace__nav { grid-column: 1; grid-row: 1; min-width: 0; }   /* <nav aria-label="{area name}"> */
.ds-workspace__body > .ds-panel { grid-column: 2; grid-row: 1 / span 2; }
.ds-workspace__footer { grid-column: 1; grid-row: 2; align-self: end; min-width: 0; }
.ds-sidebar { display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; list-style: none; }
.ds-sidebar__group { margin: var(--space-4) var(--space-2) var(--space-1); font-size: var(--text-xs); line-height: var(--lh-tight); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-upper); color: var(--color-text-muted); }
.ds-sidebar__item { display: flex; align-items: center; gap: var(--space-2); min-height: var(--sidebar-item-h); padding: 0 var(--space-2); border-radius: var(--radius-md) 0 0 var(--radius-md); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); line-height: var(--lh-body); font-weight: var(--weight-medium); }
.ds-sidebar__icon { width: 20px; height: 20px; flex: none; }
.ds-sidebar__label { flex: 1; min-width: 0; }
@media (hover: hover) { .ds-sidebar__item:hover { background: var(--color-surface-hover-1); } }
.ds-sidebar__item[aria-current="page"] { position: relative; z-index: 1; margin-right: -1px; background: var(--color-surface-2); font-weight: var(--weight-semibold); }
.ds-panel { background: var(--color-surface-2); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); min-width: 0; }
.ds-workspace:has(.ds-sidebar > li:first-child > [aria-current="page"]) .ds-panel { border-top-left-radius: 0; }
.ds-panel__cols { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }   /* DESIGN.md 5.2 (S-04, S-05, MY SETTINGS) */
.ds-stack { display: flex; flex-direction: column; gap: var(--space-3); }   /* inner cards 12 apart inside a panel (DESIGN.md 5.1) */

/* responsive ------------------------------------------------------------ */
@media (max-width: 1439px) {
  /* ACCOUNT shows its avatar alone: the label is read by screen readers only, the unread badge stays visible */
  .ds-topbar__account .ds-nav__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1279px) {
  .ds-nav { display: none; }   /* the entries live in the NavDrawer; the badge, the tenant logo and ACCOUNT stay in the bar */
  .ds-topbar .ds-hamburger { display: inline-flex; }
}
@media (max-width: 1099px) {
  .ds-grid-report, .ds-grid-delta { grid-template-columns: minmax(0, 1fr); }
  /* the context row becomes two horizontally scrolling rows, section tabs then domain tabs */
  .ds-context { flex-direction: column; gap: 0; }
  .ds-context__sections, .ds-context__domains { min-height: var(--context-row-h); margin-inline-start: 0; overflow-x: auto; overflow-y: hidden; }
  .ds-context .ds-section-tab[aria-current]::after, .ds-domain-tab[aria-selected="true"]::after { bottom: 0; }   /* inside the scrolling row */
  :root:has(.ds-context) { --chrome-row: calc(2 * var(--context-row-h)); }
  .ds-workspace__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ds-workspace__body > .ds-workspace__nav, .ds-workspace__body > .ds-panel, .ds-workspace__footer { grid-column: auto; grid-row: auto; }
  .ds-sidebar { flex-direction: row; overflow-x: auto; gap: 2px; padding-bottom: 0; }
  .ds-sidebar__item { white-space: nowrap; border-radius: var(--radius-md) var(--radius-md) 0 0; min-height: max(40px, var(--sidebar-item-h)); }
  .ds-sidebar__group { display: none; }
  .ds-panel { border-top-left-radius: var(--radius-xl) !important; padding: var(--space-4); }
  .ds-panel__cols { grid-template-columns: minmax(0, 1fr); }
  .ds-toolrow { overflow-x: auto; }
  .ds-toolrow .ds-tool:focus-visible { outline-offset: -2px; }   /* the row is as tall as the tool and scrolls: the ring is drawn inside the tool (DESIGN.md 15.2 rule 3) */
  .ds-context__sections, .ds-context__domains, .ds-sidebar { scrollbar-width: none; }
  .ds-context__sections::-webkit-scrollbar, .ds-context__domains::-webkit-scrollbar, .ds-sidebar::-webkit-scrollbar { display: none; }

  /* The rows scroll without a scrollbar, so an edge fade shows that more is off-screen: on the end that still has content (ui.js revealCurrent keeps
     data-more-start / data-more-end current; before it runs the end fade is on). */
  .ds-context__sections, .ds-context__domains, .ds-workspace__nav .ds-sidebar {
    --ds-fade: 28px; --ds-fade-start: 0px; --ds-fade-end: var(--ds-fade);
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-text) var(--ds-fade-start), var(--color-text) calc(100% - var(--ds-fade-end)), transparent);
    mask-image: linear-gradient(90deg, transparent, var(--color-text) var(--ds-fade-start), var(--color-text) calc(100% - var(--ds-fade-end)), transparent);
  }
  :is(.ds-context__sections, .ds-context__domains, .ds-workspace__nav .ds-sidebar)[data-more-start="true"] { --ds-fade-start: var(--ds-fade); }
  :is(.ds-context__sections, .ds-context__domains, .ds-workspace__nav .ds-sidebar)[data-more-end="false"] { --ds-fade-end: 0px; }
}
@media (max-width: 767px) {
  .ds-topbar__tenant { display: none; }   /* the tenant stays named in the sidebar footer */
  .ds-workspace { padding: var(--space-1); }
  .ds-panel { padding: var(--space-3); }
  .ds-page-heading { font-size: var(--text-login); line-height: 1.44; }
}
@media (max-width: 399px) {
  /* the "iB" mark alone: the mark keeps its proportions and the box shows its left part, without the Metric / MI / ND texts */
  .ds-brand-link { width: 28px; height: 28px; }
  .ds-brand-logo--topnav svg.ds-brand { width: 56px; height: 28px; clip-path: inset(0 50% 0 0); }   /* the left half is the mark; clip-path (not overflow) keeps the link's 44 px hit area */
  .ds-brand-logo--topnav .ds-brand__text text + text { display: none; }
  .ds-topbar__demo .ds-icon { display: none; }   /* the badge drops its glyph and keeps the word */
}

/* pre-sign-in pages (S-01; spec 10 section 4): login, change password, two-factor, support-mode entry, the mock Microsoft page and the link page - the 440 px card,
   padding 32 (20 on phones), stacked fields 48 high, lg buttons 40 */
.ds-empty-layout { min-height: 100vh; min-height: 100dvh; }
.ds-login { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; gap: 64px; padding: var(--space-5) var(--space-4); }
.ds-login .ds-login__card { width: 440px; max-width: 100%; padding: var(--space-7); border-radius: var(--radius-xl); }
.ds-login__brand { margin-bottom: var(--space-6); }
.ds-login__heading { margin-bottom: var(--space-2); font-size: var(--text-login); line-height: 1.44; font-weight: var(--weight-semibold); }
.ds-login__helper { margin-bottom: var(--space-6); color: var(--color-text-body); font-size: var(--text-sm); line-height: var(--lh-body); }
.ds-login__heading + :not(.ds-login__helper) { margin-top: var(--space-4); }   /* a card without the helper line: its first field or list starts 24 px below the heading */
.ds-login__form { display: grid; gap: var(--space-3); }
.ds-login__form .ds-btn { margin-top: var(--space-2); }   /* LOGIN 20 px below the second field */
.ds-login__alert { margin-bottom: var(--space-4); }
.ds-login__sso { margin-top: var(--space-4); }
.ds-login__microsoft { margin-top: var(--space-3); }   /* DESIGN S-01: the secondary "Sign in with Microsoft" button sits 12 px below LOGIN */
.ds-login .ds-field--stacked { min-height: 48px; }
.ds-login .ds-field__input { font-size: var(--text-md); }
.ds-identities { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.ds-btn.ds-identity { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: var(--space-2) var(--space-4); text-align: left; font-weight: var(--weight-regular); }
.ds-btn.ds-identity strong { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.ds-btn.ds-identity span { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }

@media (max-width: 1099px) {
  .ds-login { flex-direction: column; gap: var(--space-5); padding: var(--space-8) var(--space-4) var(--space-6); }
}
@media (max-width: 767px) {
  .ds-login .ds-login__card { padding: var(--space-5); }
}

/* shell parts added by the shell ticket ----------------------------------------------------------------------- */
.ds-scroll-locked { overflow: hidden; }
.ds-brand-link { position: relative; display: flex; flex: none; border-radius: var(--radius-xs); }
@media (pointer: coarse), (max-width: 767px) { .ds-brand-link::before { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); } }   /* the 32 / 28 px mark keeps its look and gets a 44 px target (DESIGN.md 14) */
.ds-support-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-5); padding: var(--space-2) var(--gutter); background: var(--tint-warning); color: var(--color-warning); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ds-support-banner form { margin: 0; }
.ds-sidebar__item .ds-count { flex: none; }
.ds-sidebar__button { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; }
.ds-sidebar-footer { margin-top: var(--space-4); }
.ds-sidebar-footer__who { display: grid; gap: 2px; margin: 0 var(--space-2) var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-sidebar-footer__who span:first-child { color: var(--color-text); font-weight: var(--weight-semibold); }
.ds-lang { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target-min); min-height: var(--target-min); padding-inline: var(--space-1); color: var(--color-text-muted); text-decoration: none; }
.ds-lang a:hover, .ds-lang a[aria-current="true"] { color: var(--color-text); }
.ds-lang a[aria-current="true"] { font-weight: var(--weight-bold); }

/* mobile navigation drawer: 44 px rows with 20 px icons, never the DEMO PODACI badge */
.ds-scrim.ds-scrim--drawer { place-items: stretch start; padding: 0; z-index: var(--z-drawer); }
.ds-nav-drawer { width: min(88vw, 360px); height: 100%; overflow-y: auto; padding: var(--space-3) var(--space-3) var(--space-6); background: var(--color-surface-1); box-shadow: var(--shadow-overlay); animation: ds-slide var(--dur-slow) var(--ease); }
.ds-nav-drawer__head { display: flex; justify-content: flex-end; }
.ds-nav-drawer__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ds-nav-drawer__list form { margin: 0; }
.ds-nav-drawer__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--touch-min); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); text-align: left; text-decoration: none; text-transform: uppercase; letter-spacing: var(--tracking-nav); cursor: pointer; }
.ds-nav-drawer__item .ds-count { margin-left: auto; }
.ds-nav-drawer .ds-lang { margin: var(--space-4) 0 0 var(--space-3); }
@media (hover: hover) { .ds-nav-drawer__item:hover { background: var(--color-surface-hover-1); } }

/* reconnect dialog and framework error bar */
.ds-reconnect { max-width: min(420px, calc(100vw - 32px)); padding: var(--space-6); border: 0; border-radius: var(--radius-xl); background: var(--color-surface-1); color: var(--color-text); box-shadow: var(--shadow-overlay); text-align: center; }
.ds-reconnect::backdrop { background: var(--color-scrim); }
.ds-reconnect__body { display: grid; justify-items: center; gap: var(--space-3); }
.ds-reconnect__body p { margin: 0; }
.ds-reconnect .components-rejoining-animation, .ds-reconnect .components-reconnect-first-attempt-visible, .ds-reconnect .components-failed-visible,
.ds-reconnect .components-pause-visible, .ds-reconnect .components-resume-failed-visible { display: none; }
.ds-reconnect.components-reconnect-show .components-rejoining-animation, .ds-reconnect.components-reconnect-show .components-reconnect-first-attempt-visible,
.ds-reconnect.components-reconnect-failed .components-failed-visible, .ds-reconnect.components-reconnect-paused .components-pause-visible,
.ds-reconnect.components-reconnect-resume-failed .components-resume-failed-visible { display: block; }
.ds-reconnect.components-reconnect-failed button.components-failed-visible, .ds-reconnect.components-reconnect-paused button.components-pause-visible { display: inline-flex; }
#blazor-error-ui { display: none; position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--z-toast); align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); background: var(--tint-negative); color: var(--color-negative); font-size: var(--text-sm); }
#blazor-error-ui .dismiss { margin-inline-start: auto; min-width: var(--touch-min); min-height: var(--touch-min); border: 0; background: none; color: inherit; font-size: var(--text-lg); cursor: pointer; }

/* report page shell: tool row extras, report column, interim assistant column (21 section 5) ----------------------------------------------- */
.ds-tool[aria-disabled="true"] { cursor: not-allowed; color: var(--color-text-muted); }
.ds-tool[aria-disabled="true"] .ds-tool__icon { opacity: 0.5; }
.ds-report-switch { display: none; }
.ds-report-col, .ds-report-aside { min-width: 0; }
.ds-report-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-3); }   /* the tool row 12 px above the frame */
.ds-report-toolbar > .ds-toolrow { min-width: 0; max-width: 100%; margin-bottom: 0; }
@media (min-width: 1100px) {
  /* the column is --work-h high like the chat panel, so a banner takes room from the frame and the page itself does not scroll */
  .ds-grid-report > .ds-report-col { display: flex; flex-direction: column; height: var(--work-h); }
  .ds-grid-report > .ds-report-col > .ds-report.ds-report--page { flex: 1 1 0; height: auto; min-height: 240px; }
  .ds-grid-report > .ds-report-col > .ds-embed { flex: 1 1 0; height: auto; min-height: 0; }
  /* delta mode (S-03): the same frame, the left column's width and 55 % of the column height (at least 320 px), the dimension tiles below it */
  .ds-report-col[data-tool="delta"] > .ds-embed > .ds-embed__frame { flex: none; height: max(320px, calc(var(--work-h) * 0.55)); min-height: 0; }
}
.ds-report-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); min-height: var(--control-h-md); font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-report-meta .ds-tooltip { left: auto; right: 0; transform: none; }   /* the live badge sits at the right end of the meta line: its tooltip opens leftwards */
.ds-report-col > .ds-alert { margin-bottom: var(--space-3); }
.ds-report-col > .ds-banner { margin-bottom: var(--space-2); }   /* DESIGN 9.5: banners 8 px apart and 8 px above the frame */
/* the report bar of the delta mode (DESIGN S-03 Responsive, spec 27 9.7): only below 1100 px; collapsed, the frame is parked (still in the DOM, the embed stays loaded) */
.ds-report-collapse { display: none; }
@media (max-width: 1099px) {
  .ds-report.ds-report--page { height: auto; min-height: 520px; max-height: none; }
  .ds-report-collapse { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; margin-bottom: var(--space-2); padding: 0 var(--space-1) 0 var(--space-4); border-radius: var(--radius-xl); background: var(--color-report-frame); }
  .ds-report-collapse__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
  .ds-report-col[data-frame="collapsed"] > .ds-embed > .ds-embed__frame { flex: none; height: 0; min-height: 0; overflow: hidden; visibility: hidden; }
}
@media (max-width: 767px) {
  .ds-report-switch { display: block; position: sticky; top: 0; z-index: var(--z-sticky); padding-block: var(--space-2); background: var(--color-bg); }
  .ds-report-switch .ds-segmented { display: flex; }
  .ds-report-switch .ds-segmented__item { flex: 1; min-height: calc(var(--touch-min) - 4px); }   /* the switch is 44 high with the track's 2 px inset */
  .ds-report-toolbar > .ds-toolrow { width: 100%; }
  .ds-report-toolbar .ds-tool { flex: 1 1 0; justify-content: center; min-width: 0; padding-inline: var(--space-1); line-height: var(--lh-tight); text-align: center; white-space: normal; }
  /* the view that is not shown is parked, never display: none: the embedded report would reload (spec 27 9.7); ToolWorkspace makes it inert */
  [data-active-view="report"] > [data-panel="assistant"], [data-active-view="assistant"] > [data-panel="report"] { height: 0; min-height: 0; overflow: hidden; visibility: hidden; }
  .ds-grid-report, .ds-grid-delta { row-gap: 0; }
  /* the report view: the frame fills the screen below the switch (DESIGN 14.1); the report scrolls inside it */
  .ds-report-col > .ds-embed > .ds-embed__frame { height: calc(100dvh - var(--switch-h)); min-height: 0; }
}

/* the chat panel in the report page column (36 section 3.1): as tall as the report column (--work-h, in delta mode too), the log scrolls inside */
@media (min-width: 1100px) { .ds-report-aside > .ds-chat { height: var(--work-h); min-height: 0; } }
@media (max-width: 1099px) { .ds-report-aside > .ds-chat { height: min(720px, 85dvh); min-height: 0; } }
/* phones: the assistant view is a sheet as tall as the screen below the sticky switch (8 + 44 + 8; ToolWorkspace scrolls the page to it after a tool press), the input sits at its bottom above the safe area */
.ds-report-page { --switch-h: 60px; }
@media (max-width: 767px) {
  .ds-report-aside > .ds-chat { height: calc(100vh - var(--switch-h)); height: calc(100dvh - var(--switch-h)); min-height: 0; }
  .ds-report-aside { scroll-margin-top: calc(var(--switch-h) - var(--nav-height) - var(--chrome-row, 0px) - var(--content-top)); }   /* cancels the scroll padding of the page and leaves the switch above the sheet */
}

/* the assistant page (SC-09, 36 section 3.11): the conversation list (260) and the chat in the content panel of the workspace */
.ds-assistant { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: var(--space-4); flex: 1 1 0px; min-height: 480px; }
.ds-assistant__list, .ds-assistant__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ds-assistant__bar, .ds-assistant .ds-assistant__history { display: none; }
.ds-assistant__main > .ds-empty { padding-block: var(--space-7); }
/* the content panel fills the frame down to the page's 24 px bottom margin: it is a column, at least --chat-h high (its content box), of the weekly-brief banner (when shown) and the
   assistant; the chat and the list take what the banner leaves, so the banner takes its room from the log and not from the page. The page does not scroll, the log scrolls inside
   (DESIGN.md 10.3, 14.1, N-01). The assistant never gets shorter than 480 (420 on phones): on a screen too short for the banner and that, the panel grows and the page scrolls. */
.ds-panel:has(.ds-assistant) { --chat-h: max(480px, calc(100dvh - var(--nav-height) - var(--chrome-row, 0px) - var(--content-top) - var(--space-6) - 2 * var(--space-2) - 2 * var(--space-5))); display: flex; flex-direction: column; box-sizing: content-box; min-height: var(--chat-h); }
.ds-assistant .ds-chat, .ds-assistant .ds-convlist { flex: 1; min-height: 0; }
@media (max-width: 1279px) {
  .ds-assistant { grid-template-columns: minmax(0, 1fr); }
  .ds-assistant__list { display: none; }
  .ds-assistant__bar { display: block; margin-bottom: var(--space-3); }
  .ds-assistant .ds-assistant__history { display: inline-flex; }
}
@media (max-width: 1099px) {
  .ds-panel:has(.ds-assistant) { --chat-h: max(480px, calc(100dvh - var(--nav-height) - var(--chrome-row, 0px) - var(--content-top) - var(--space-6) - 2 * var(--space-2) - max(40px, var(--sidebar-item-h)) - 2 * var(--space-4))); }   /* the sidebar is the tab row above the panel */
}
/* phones: the chat is a sheet that fills the screen below the top bar, the context row and the sidebar tabs, so they stay in view (the page is never scrolled to the sheet); its log scrolls,
   the input sits at the bottom of the screen above the safe area, the context chips are one scrolling row */
@media (max-width: 767px) {
  .ds-workspace:has(.ds-assistant) { padding: var(--space-2); }
  .ds-panel:has(.ds-assistant) { --chat-h: max(420px, calc(100dvh - var(--nav-height) - var(--chrome-row, 0px) - var(--content-top) - var(--space-2) - var(--sidebar-item-h) - var(--space-2))); padding: var(--space-2); }
  .ds-assistant { min-height: 420px; }
  .ds-assistant .ds-chat { padding-inline: var(--space-3); }
  .ds-assistant .ds-chat__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ds-assistant .ds-chat__chips > li { flex: none; }
  .ds-assistant .ds-chat__head-extras > .ds-assistant__history { flex: 0 0 auto; }
  .ds-assistant .ds-chat__head-extras > .ds-assistant__domain { flex: 1 1 100px; width: auto; min-width: 0; }
  .ds-assistant .ds-assistant__title { flex-basis: 100%; }
}
/* 320 px (verification P1 A-7): the header row holds the history icon, the domain and the voice gear; the title follows on its own row */
@media (max-width: 399px) {
  .ds-assistant .ds-chat__head-extras { column-gap: var(--space-2); }
  .ds-assistant .ds-chat__head-extras > .ds-assistant__domain.ds-field--inline { padding-inline: var(--space-3); }
  .ds-assistant .ds-chat__head-extras > .ds-assistant__history { order: 1; }
  .ds-assistant .ds-chat__head-extras > .ds-assistant__domain { order: 2; }
  .ds-assistant .ds-chat__head-extras > .ds-voice-controls { order: 3; }
  .ds-assistant .ds-chat__head-extras > .ds-assistant__title { order: 4; }
}