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

/* top bar --------------------------------------------------------------- */
.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;
  background:
    linear-gradient(180deg, transparent calc(100% - 10px), 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: 124px; height: 62px; color: var(--color-text); flex: none; }
.ds-nav { display: flex; gap: var(--nav-gap); margin: 0 0 0 69px; padding: 0; list-style: none; }
.ds-nav__item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-width: var(--touch-min); min-height: 70px; padding: 8px 6px; border-radius: var(--radius-md);
  color: var(--color-text); text-decoration: none; text-align: center;
  font-size: var(--text-xs); line-height: 1.33; font-weight: var(--weight-medium); letter-spacing: var(--tracking-nav); text-transform: uppercase; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease);
}
.ds-nav__icon { width: 32px; height: 32px; transition: transform var(--dur-base) var(--ease); }
@media (hover: hover) {
  .ds-nav__item:hover { background: rgba(255, 255, 255, 0.08); }
  .ds-nav__item:hover .ds-nav__icon { transform: translateY(-2px); }
}
.ds-nav__item[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--color-primary); }
.ds-nav__item[aria-current="page"] { font-weight: var(--weight-bold); }
.ds-nav__lock { position: absolute; top: 4px; right: 2px; width: 14px; height: 14px; color: var(--color-text); }
.ds-topbar__account { margin-inline-start: auto; }
.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-hamburger { display: none; margin-inline-start: auto; }

/* sub-header ------------------------------------------------------------ */
.ds-subheader { background: var(--color-surface-1); min-height: var(--subheader-height); padding: 22px var(--header-inset) 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tabs logo" "domains logo"; row-gap: 10px; align-items: start; }
.ds-subheader__tabs { grid-area: tabs; display: flex; align-items: baseline; gap: clamp(24px, 6vw, 118px); min-width: 0; }
.ds-subheader__title { font-size: var(--text-xl); line-height: 1.33; font-weight: var(--weight-bold); }
.ds-section-tab { font-size: var(--text-tab); line-height: 1.36; font-weight: var(--weight-medium); color: var(--color-text-subtle); text-decoration: none; background: none; border: 0; padding: 0; min-height: var(--touch-min); }
.ds-section-tab:hover { color: var(--color-text); }
/* on a workspace sub-page the current section is a link that looks exactly like the title (03 section 6); the pseudo-element gives it a 44 px hit area */
a.ds-subheader__title { color: var(--color-text); text-decoration: none; position: relative; }
a.ds-subheader__title:hover { color: var(--color-text); }
a.ds-subheader__title::before { content: ""; position: absolute; inset: calc(50% - 22px) -4px; }
.ds-subheader__domains { grid-area: domains; display: flex; gap: 20px; min-width: 0; overflow-x: auto; }
.ds-domain-tab { background: none; border: 0; padding: 0 2px; min-height: 32px; font-size: var(--text-md); font-weight: var(--weight-regular); color: var(--color-text); text-decoration: none; white-space: nowrap; }
.ds-domain-tab[aria-selected="true"], .ds-domain-tab[aria-current="page"] { font-weight: var(--weight-bold); }
.ds-domain-tab:hover { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.6); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ds-domain-tab[aria-disabled="true"] { color: var(--color-text-muted); }
.ds-subheader__aside { grid-area: logo; align-self: center; display: flex; align-items: center; gap: var(--space-4); }
.ds-subheader__logo { display: flex; align-items: center; min-height: var(--touch-min); max-width: 146px; color: var(--color-text); text-decoration: none; }

/* page grids ------------------------------------------------------------ */
.ds-page { padding-top: 33px; display: grid; gap: var(--card-gap); }
.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, 816fr) minmax(0, 928fr); gap: 44px; align-items: start; }
.ds-grid-delta > .ds-chat { min-height: 779px; }
.ds-toolrow { display: flex; gap: 0; min-height: 52px; margin-bottom: 31px; padding-inline: 12px; }
.ds-tool { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 190px; min-height: var(--touch-min); padding: 2px 8px; background: none; border: 0; color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.ds-tool[aria-checked="true"], .ds-tool[aria-pressed="true"] { font-weight: var(--weight-bold); }
.ds-tool__icon { width: 26px; height: 26px; transition: transform var(--dur-base) var(--ease); }
@media (hover: hover) { .ds-tool:hover .ds-tool__icon { transform: translateY(-2px); } .ds-tool:hover .ds-tool__label { text-decoration: underline; } }

/* workspace frame: large card + sidebar + content panel (Company area and every N-screen) */
.ds-workspace { background: var(--color-surface-1); border-radius: var(--radius-xl); padding: var(--space-5) 60px 70px 31px; min-height: 779px; }
.ds-workspace__head { display: flex; align-items: center; gap: var(--space-3); min-height: 66px; padding-left: 2px; }
.ds-workspace__body { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); margin-top: 10px; align-items: start; }
.ds-sidebar { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; }
.ds-sidebar__group { margin: 18px 0 4px 22px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-upper); color: var(--color-text-muted); }
.ds-sidebar__item { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-lg) 0 0 var(--radius-lg); color: var(--color-text); text-decoration: none; font-size: var(--text-md); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-card-title); }
.ds-sidebar__icon { width: 38px; height: 38px; flex: none; }
@media (hover: hover) { .ds-sidebar__item:hover { background: var(--color-surface-hover-1); } }
.ds-sidebar__item[aria-current="page"] { background: var(--color-surface-2); position: relative; z-index: 1; margin-right: -1px; }
.ds-panel { background: var(--color-surface-2); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6) var(--space-6) var(--space-7); min-height: 607px; 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: 397px minmax(0, 1fr); gap: 29px; align-items: start; }
.ds-stack { display: flex; flex-direction: column; gap: var(--space-5); }

/* responsive ------------------------------------------------------------ */
@media (max-width: 1099px) {
  .ds-nav { display: none; }
  /* ACCOUNT stays in the bar as an icon (DESIGN 14.1): the label is read by screen readers only, the hit area is 44 px, the unread badge stays visible */
  .ds-topbar__account { min-width: var(--touch-min); min-height: var(--touch-min); padding: 6px; }
  .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; }
  .ds-hamburger { display: inline-flex; margin-inline-start: var(--space-2); }
  .ds-grid-report, .ds-grid-delta { grid-template-columns: minmax(0, 1fr); }
  .ds-workspace { padding: var(--space-5); }
  .ds-workspace__body { grid-template-columns: minmax(0, 1fr); }
  .ds-sidebar { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 0; }
  .ds-sidebar__item { white-space: nowrap; border-radius: var(--radius-lg) var(--radius-lg) 0 0; min-height: var(--touch-min); }
  .ds-sidebar__group { display: none; }
  .ds-panel { border-top-left-radius: var(--radius-xl) !important; padding: var(--space-5); }
  .ds-panel__cols { grid-template-columns: minmax(0, 1fr); }
  .ds-toolrow { padding-inline: 0; overflow-x: auto; }
  .ds-tool { min-width: 150px; }
}
@media (max-width: 767px) {
  .ds-subheader { padding-block: 12px 8px; grid-template-columns: minmax(0, 1fr) auto; }
  .ds-subheader__title { font-size: var(--text-lg); }
  .ds-subheader__tabs { overflow-x: auto; gap: var(--space-5); }
  .ds-workspace { padding: var(--space-4); }
  .ds-brand { width: 75px; height: 38px; }
  .ds-page { padding-top: var(--space-4); }
}

/* pre-sign-in pages: login, change password, mock Microsoft sign-in (spec 10 section 4) -------------------- */
.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: 139px; padding: var(--space-5) 0 var(--space-5) 96px; }
.ds-login--single { padding-inline: var(--space-4); }
.ds-login .ds-login__card { width: 588px; min-height: 560px; padding: 52px 42px 36px; }
.ds-login--single .ds-login__card { width: 100%; max-width: 520px; min-height: 0; padding-top: 42px; }
.ds-login__brand { margin-bottom: 34px; }
.ds-login__heading { margin-bottom: var(--space-3); font-size: var(--text-lg); line-height: 1.4; font-weight: var(--weight-semibold); }
.ds-login__helper { max-width: 420px; margin-bottom: 44px; color: var(--color-text-body); font-size: var(--text-sm); line-height: 1.2; }
.ds-login__form { display: grid; gap: 19px; }
.ds-login__form .ds-btn { margin-top: 6px; }
.ds-login__alert { margin-bottom: var(--space-4); }
.ds-login__sso { margin-top: var(--space-4); }
.ds-login__microsoft { margin-top: 14px; }   /* DESIGN S-01: the secondary "Sign in with Microsoft" button sits 14 px below LOGIN */
.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; text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); }
.ds-btn.ds-identity strong { font-weight: var(--weight-bold); font-size: var(--text-sm); }
.ds-btn.ds-identity span { color: var(--color-text-muted); font-size: var(--text-xs); text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); }

@media (max-width: 1099px) {
  .ds-login { flex-direction: column; gap: var(--space-5); padding: 72px var(--space-4) var(--space-6); }
  .ds-login .ds-login__card { width: 100%; max-width: 588px; min-height: 0; }
}
@media (max-width: 767px) {
  .ds-login { padding-top: 64px; }
  .ds-login .ds-login__card { max-width: 440px; padding: var(--space-6) 24px; border-radius: var(--radius-lg); }
}

/* shell parts added by the shell ticket ----------------------------------------------------------------------- */
.ds-scroll-locked { overflow: hidden; }
.ds-brand-link { display: block; flex: none; border-radius: var(--radius-xs); }
.ds-nav__count { position: absolute; top: 2px; left: calc(50% + 8px); }
.ds-subheader__tabs h1 { margin: 0; }
.ds-domain-tab { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ds-domain-tab[data-locked="true"] { color: var(--color-text-muted); }
.ds-section-tab { display: inline-flex; align-items: center; cursor: pointer; }
.ds-section-tab[aria-selected="true"] { color: var(--color-text); font-weight: var(--weight-bold); }
.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__label { flex: 1; min-width: 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-workspace__nav { min-width: 0; }
.ds-sidebar-footer { margin-top: var(--space-5); }
.ds-sidebar-footer__who { display: grid; gap: 2px; margin: 0 0 var(--space-3) var(--space-5); 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-3) 0 0 var(--space-5); 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(--touch-min); min-height: var(--touch-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 */
.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-4); width: 100%; min-height: 56px; 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; }
@media (max-width: 1099px) { .ds-login--single .ds-login__card { max-width: 520px; } }
@media (max-width: 767px) { .ds-login--single .ds-login__card { max-width: 440px; } }

/* corrections found while matching Profile.png ---------------------------------------------------------------- */
.ds-topbar .ds-hamburger { display: none; }
@media (max-width: 1099px) { .ds-topbar .ds-hamburger { display: inline-flex; } }
.ds-nav { gap: calc(var(--nav-gap) - 12px); }
.ds-subheader { padding-bottom: 12px; }
.ds-section-tab, .ds-domain-tab { position: relative; min-height: 32px; }
.ds-section-tab::before, .ds-domain-tab::before { content: ""; position: absolute; inset: -6px -4px; }
.ds-subheader { row-gap: 5px; }
.ds-subheader__domains { overflow-y: hidden; padding-block: 6px; margin-block: -6px; }
.ds-nav { margin-left: 63px; }

/* workspace footer placement and the tablet/phone sub-header ------------------------------------------------- */
.ds-workspace__body > .ds-workspace__nav { grid-column: 1; grid-row: 1; }
.ds-workspace__body > .ds-panel { grid-column: 2; grid-row: 1 / span 2; }
.ds-workspace__footer { grid-column: 1; grid-row: 2; min-width: 0; }
.ds-subheader__title, .ds-section-tab { white-space: nowrap; }
@media (max-width: 1099px) {
  .ds-workspace__body > .ds-workspace__nav, .ds-workspace__body > .ds-panel, .ds-workspace__footer { grid-column: auto; grid-row: auto; }
  .ds-subheader__tabs { overflow-x: auto; padding-block: 6px; margin-block: -6px; }   /* the 6 px above and below keep the 44 px hit area of a tab inside the scrolling row */
  .ds-subheader__tabs, .ds-subheader__domains, .ds-sidebar { scrollbar-width: none; }
  .ds-subheader__tabs::-webkit-scrollbar, .ds-subheader__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-subheader__tabs, .ds-subheader__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-subheader__tabs, .ds-subheader__domains, .ds-workspace__nav .ds-sidebar)[data-more-start="true"] { --ds-fade-start: var(--ds-fade); }
  :is(.ds-subheader__tabs, .ds-subheader__domains, .ds-workspace__nav .ds-sidebar)[data-more-end="false"] { --ds-fade-end: 0px; }
}
@media (max-width: 767px) {
  .ds-subheader__aside { flex-direction: column-reverse; align-items: flex-end; gap: var(--space-1); }
  .ds-subheader__tabs { align-items: center; }
  .ds-tenant-wordmark { font-size: var(--text-md); }
}
.ds-login--single .ds-login__heading { margin-bottom: var(--space-5); }

/* 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; }
@media (hover: hover) {
  .ds-tool[aria-disabled="true"]:hover .ds-tool__icon { transform: none; }
  .ds-tool[aria-disabled="true"]:hover .ds-tool__label { text-decoration: none; }
}
.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: 28px; }
.ds-report-toolbar > .ds-toolrow { min-width: 0; max-width: 100%; margin-bottom: 0; }
@media (min-width: 1100px) {
  /* the tools sit where controlling.png has them (icon centres x 156 / 356 / 549 at 1920): no inset, items 192 wide */
  .ds-report-toolbar > .ds-toolrow { padding-inline: 0; }
  .ds-report-toolbar .ds-tool { min-width: 192px; }
  /* the column is as tall as the assistant column (779), 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: 779px; }
  .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, 816 wide by the grid and 457 high (x 65-881, y 326-783 at 1920), the dimension tiles below it */
  .ds-report-col[data-tool="delta"] > .ds-embed > .ds-embed__frame { flex: none; height: 457px; 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: 52px; 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 */
.ds-report.ds-report--page { height: 694px; }
/* 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: 56px; margin-bottom: var(--space-2); padding: 0 var(--space-2) 0 var(--space-5); border-radius: var(--radius-xl); background: var(--color-report-frame); }
  .ds-report-collapse__title { font-size: var(--text-md); 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: var(--touch-min); }
  .ds-report-toolbar > .ds-toolrow { width: 100%; }
  .ds-report-toolbar .ds-tool { flex: 1 1 0; min-width: 0; padding-inline: var(--space-1); text-align: center; }
  /* 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, the log scrolls inside */
@media (min-width: 1100px) { .ds-report-aside > .ds-chat { height: 779px; 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 (ToolWorkspace scrolls the page to it), the input sits at its bottom above the safe area */
.ds-report-page { --switch-h: 64px; }
@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) - 16px); }   /* 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); gap: var(--space-4); align-items: start; }
.ds-assistant__list, .ds-assistant__main { min-width: 0; }
.ds-assistant__bar, .ds-assistant .ds-assistant__history { display: none; }
.ds-assistant__main > .ds-empty { padding-block: var(--space-7); }
.ds-assistant .ds-chat { min-height: 0; height: clamp(560px, calc(100dvh - 380px), 780px); }
.ds-assistant .ds-convlist { height: clamp(560px, calc(100dvh - 380px), 780px); }
@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-assistant .ds-chat { height: clamp(480px, calc(100dvh - 470px), 720px); }
}
/* phones: the chat is a sheet as tall as the screen (ui.js scrolls the page to its top once), the input sits at its bottom 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) { min-height: 0; padding: var(--space-2); }
  .ds-assistant__main { scroll-margin-top: calc(-1 * (var(--nav-height) + 16px)); }   /* the page scrolls the sheet to the very top, not below the 72 px of scroll padding */
  .ds-assistant .ds-chat { height: auto; min-height: 100vh; min-height: 100dvh; 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; }
}