/* THE UNIFIED AI DEMO'S OWN COMPOSITION: WHOSE DEVICE EACH ONE IS, THE COMPANY AI'S CHAT ON THE EMPLOYEES' SCREENS AND HOW THE SHARED
   STAT CARDS, TABLE AND FORM SIT ON THE MANAGER'S TWO MONITORS. THE DEVICES, THE STAGE AND THE ROOM COME FROM demo-shell.css. */

/* EACH SCENE IS ITS OWN ROOM: THE TWO EMPLOYEE DESKS AND THE MANAGER'S TWO DESKS ARE FOUR DIFFERENT PHOTOS */

.demo-page main > section.demo-stage.di-stage.di-stage--vendas {
    --demo-stage-photo: url("/img/demo/escritorio-vendas.webp");
}

.demo-page main > section.demo-stage.di-stage.di-stage--financeiro {
    --demo-stage-photo: url("/img/demo/escritorio-financeiro.webp");
}

.demo-page main > section.demo-stage.di-stage.di-stage--gestor {
    --demo-stage-photo: url("/img/demo/gestor-monitoramento.webp");
}

.demo-page main > section.demo-stage.di-stage.di-stage--controle {
    --demo-stage-photo: url("/img/demo/gestor-controle.webp");
}

/* THE SIGN — IT SPANS THE COLUMN, SO ITS EDGES ARE THE LAPTOP'S LEFT EDGE AND THE PHONE'S RIGHT EDGE; ITS SENTENCE RUNS IN TWO LINES, AND ITS
   STANDOFFS ARE SMALL ENOUGH TO READ AS FIXINGS, NOT AS MARKS. A LIGHT EDGE ALONG THE TOP GIVES THE ACRYLIC ITS THICKNESS */

.demo-page .demo-stage.di-stage .demo-stage__layout > .demo-intro > .demo-intro__layout {
    align-self: stretch;
    box-shadow: inset 0 1px 0 var(--color-surface);
}

.demo-page .demo-stage.di-stage .demo-stage__layout > .demo-intro > .demo-intro__layout::before {
    background-size: var(--space-tight) var(--space-tight);
}

.demo-page .demo-stage.di-stage .demo-stage__layout > .demo-intro > .demo-intro__layout .demo-intro__lead {
    max-width: 880px;
    text-wrap: pretty;
}

/* THE LAPTOP'S BASE OVERHANGS THE LID BY A FINGER, SO IT NEVER RUNS OFF THE WINDOW'S EDGE */

.demo-page .demo-stage.di-stage .demo-laptop .demo-laptop__base {
    width: 108%;
}

/* THE GLASS — THE ROOM'S LIGHT FADES ACROSS THE CORNER INSTEAD OF ENDING IN A HARD LINE, SO IT NEVER CUTS THROUGH WHAT IS WRITTEN ON A DARK SCREEN */

.demo-page .demo-stage.di-stage .demo-laptop .demo-laptop__lid::after,
.demo-page .demo-stage.di-stage .demo-monitor .demo-monitor__display::after,
.demo-page .demo-stage.di-stage .demo-phone .demo-phone__body::after {
    background:
        linear-gradient(118deg, color-mix(in srgb, var(--color-surface) 12%, transparent), color-mix(in srgb, var(--color-surface) 3%, transparent) 22%, transparent 40%),
        color-mix(in srgb, var(--color-canvas-dark) 3%, transparent);
}

/* WHILE THE TUTORIAL RUNS, ONLY THE FIRST DEVICE HAS FULL STRENGTH, SO THE OTHER THREE NEVER COMPETE WITH IT */

.demo-page .di-floor .di-device-frame {
    transition: opacity var(--motion-standard) var(--ease-state);
}

.is-demo-touring .demo-page .di-floor .di-device-frame:not([data-di-frame="1"]) {
    opacity: 0.2;
}

/* WHOSE DEVICE IT IS — A SMALL PLATE CLIPPED ONTO THE MIDDLE OF THE DEVICE'S TOP EDGE, STANDING OVER IT. MARGIN EXCEPTION: THE DEVICE'S OWN PARTS TOUCH EACH
   OTHER, SO ITS CONTAINER HAS NO gap, AND gap CANNOT EXPRESS AN OVERLAP */

.demo-page .demo-stage .di-device-frame .di-tag {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: var(--space-tight);
    margin: 0 0 calc(var(--space-small) * -1);
    box-shadow: 0 var(--space-tight) var(--space-small) calc(var(--space-tight) * -1) color-mix(in srgb, var(--color-canvas-dark) 32%, transparent);
    padding: var(--space-tight) var(--space-small);
    border: 1px solid color-mix(in srgb, var(--color-surface) 72%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--color-text-dark);
    font-size: var(--type-size-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    text-box-trim: none;
}

/* SOMEONE IS TYPING ON THE DEVICE: THE PLATE SHOWS THEM INSTEAD OF THE EMPLOYEE — ONE NAME, OR THE MARKS STACKED AND HOW MANY */

.demo-page .demo-stage .di-device-frame .di-tag [hidden] {
    display: none !important;
}

.demo-page .demo-stage .di-device-frame .di-tag :is(.di-tag__owner, .di-tag__people) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
}

.demo-page .demo-stage .di-device-frame .di-tag .di-tag__people .di-tag__stack {
    display: inline-flex;
    align-items: center;
}

/* MARGIN EXCEPTION — gap CANNOT EXPRESS A NEGATIVE OVERLAP (THE SAME ONE AS THE ROOM'S BAR) */

.demo-page .demo-stage .di-device-frame .di-tag .di-tag__people .di-tag__stack .demo-room__mark + .demo-room__mark {
    margin-left: calc(var(--space-tight) * -1);
}

.demo-page .demo-stage .di-device-frame .di-tag:has(.di-tag__people:not([hidden])) {
    padding-left: var(--space-tight);
}

.demo-page .demo-stage .di-device-frame .di-tag.di-tag--manager {
    border-color: transparent;
    background: var(--color-palette-primary);
    color: var(--color-text-on-dark);
}

/* A PHONE WITH A PLATE STACKS THE PLATE OVER ITS BODY */

.demo-page .demo-stage .demo-phone.di-device-frame {
    flex-direction: column;
}

/* NO TWO DEVICES ARE THE SAME MODEL: A LIGHT ONE HAS AN ALUMINUM LID OR A WHITE BODY INSTEAD OF THE DARK ONE */

.demo-page .demo-stage .demo-laptop.di-device-frame--light .demo-laptop__lid,
.demo-page .demo-stage .demo-phone.di-device-frame--light .demo-phone__body {
    background: linear-gradient(to bottom, var(--color-surface), var(--color-border));
}

.demo-page .demo-stage .demo-laptop.di-device-frame--light .demo-laptop__lid .demo-laptop__camera {
    background: var(--color-canvas-dark);
}

/* THE CHAT FILLS THE SCREEN AND SCROLLS ITS OWN CONVERSATION, SO THE SCREEN ITSELF NEVER SCROLLS; IT IS DRAWN AT ITS REAL SIZE */

.demo-page .demo-stage .demo-laptop .demo-laptop__lid .demo-laptop__screen.di-screen,
.demo-page .demo-stage .demo-phone .demo-phone__body .demo-phone__screen.di-screen {
    overflow: hidden;
}

.demo-page .demo-stage .demo-laptop .demo-laptop__lid .demo-laptop__screen.di-screen > .di-chat {
    zoom: 1;
}

/* A FAILURE THAT BELONGS TO NO DEVICE */

.demo-page .di-floor .di-error {
    padding: var(--space-small) var(--space-medium);
    border-radius: var(--radius-standard);
    background: var(--color-danger-surface);
    color: var(--color-danger);
    font-size: var(--type-size-small);
    font-weight: 600;
    line-height: var(--space-medium);
    text-align: left;
    text-box-trim: none;
}

/* THE COMPANY AI'S CHAT — A REPLICA OF THE CHATGPT INTERFACE. ITS NEUTRAL INKS ARE THAT PRODUCT'S OWN, NAMED HERE ONCE;
   THEY SAY WHICH INTERFACE IS BEING REPLICATED AND NOTHING ELSE */

.demo-page .di-chat {
    --di-gpt-surface: #ffffff;
    --di-gpt-side: #f9f9f9;
    --di-gpt-bubble: #f4f4f4;
    --di-gpt-ink: #0d0d0d;
    --di-gpt-muted: #5d5d5d;
    --di-gpt-line: #e5e5e5;
    display: flex;
    height: 100%;
    background: var(--di-gpt-surface);
    color: var(--di-gpt-ink);
    font-family: ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: var(--type-size-small);
    line-height: 1.5;
}

/* THE SAME INTERFACE IN ITS DARK THEME, FOR THE EMPLOYEES WHO CHOSE IT */

.demo-page .di-chat.di-chat--dark {
    --di-gpt-surface: #212121;
    --di-gpt-side: #171717;
    --di-gpt-bubble: #303030;
    --di-gpt-ink: #ececec;
    --di-gpt-muted: #afafaf;
    --di-gpt-line: #424242;
}

.demo-page .di-chat.di-chat--dark .di-chat__bottom .di-chat__composer {
    background: var(--di-gpt-bubble);
    box-shadow: none;
}

.demo-page .di-chat [hidden] {
    display: none !important;
}

.demo-page .di-chat :is(p, h3) {
    margin: 0;
    text-align: left;
    text-box-trim: none;
    hyphens: manual;
}

.demo-page .di-chat .eicon {
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
}

/* THE SIDE MENU — THE AI'S NAME, A NEW CONVERSATION, AND WHOSE ACCOUNT IT IS AT THE BOTTOM */

.demo-page .di-chat .di-chat__side {
    display: flex;
    flex: 0 0 calc(var(--space-large) * 4);
    flex-direction: column;
    gap: var(--space-small);
    box-sizing: border-box;
    padding: var(--space-small);
    background: var(--di-gpt-side);
}

.demo-page .di-chat .di-chat__side .di-chat__brand {
    padding: var(--space-tight) var(--space-small);
    font-weight: 600;
}

.demo-page .di-chat .di-chat__side .di-chat__side-item {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    min-height: calc(var(--control-height) - var(--space-small));
    padding: 0 var(--space-small);
    border: 0;
    border-radius: var(--radius-standard);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.demo-page .di-chat .di-chat__side .di-chat__side-item:hover {
    background: color-mix(in srgb, var(--di-gpt-ink) 6%, transparent);
}

.demo-page .di-chat .di-chat__side .di-chat__side-item:focus-visible,
.demo-page .di-chat .di-chat__top .di-chat__icon-button:focus-visible,
.demo-page .di-chat .di-chat__composer .di-chat__send:focus-visible {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: 2px;
}

/* MARGIN EXCEPTION: THE ACCOUNT SITS AT THE BOTTOM OF THE MENU, WHATEVER IS ABOVE IT */

.demo-page .di-chat .di-chat__side .di-chat__account {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    margin-top: auto;
    padding: var(--space-tight) var(--space-small);
}

.demo-page .di-chat .di-chat__side .di-chat__account .di-chat__account-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.3;
}

.demo-page .di-chat .di-chat__side .di-chat__account .di-chat__account-text strong {
    font-weight: 600;
}

.demo-page .di-chat .di-chat__side .di-chat__account .di-chat__account-text span {
    color: var(--di-gpt-muted);
    font-size: var(--type-size-xs);
}

.demo-page .di-chat .di-chat__avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--space-medium);
    height: var(--space-medium);
    border-radius: var(--radius-pill);
    background: var(--di-avatar, var(--color-palette-primary));
    color: var(--color-text-on-dark);
    font-size: var(--type-size-xs);
    font-weight: 700;
}

/* THE CONVERSATION'S COLUMN — THE MODEL'S NAME, THE MESSAGES, THE COMPOSER */

.demo-page .di-chat .di-chat__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.demo-page .di-chat .di-chat__top {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    min-height: var(--control-height);
    padding: 0 var(--space-medium);
}

.demo-page .di-chat .di-chat__top .di-chat__model {
    flex: 1 1 auto;
    font-size: var(--type-size-base);
    font-weight: 600;
}

.demo-page .di-chat .di-chat__top .di-chat__icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--control-height) - var(--space-small));
    height: calc(var(--control-height) - var(--space-small));
    padding: 0;
    border: 0;
    border-radius: var(--radius-standard);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.demo-page .di-chat .di-chat__top .di-chat__icon-button:hover {
    background: color-mix(in srgb, var(--di-gpt-ink) 6%, transparent);
}

/* ON A COMPUTER THE AI'S NAME AND THE NEW CONVERSATION LIVE IN THE SIDE MENU, SO THE TOP BAR WOULD ONLY SAY THE NAME A SECOND TIME */

@media (min-width: 901px) {

    .demo-page .di-chat.di-chat--computer .di-chat__top {
        display: none;
    }

}

.demo-page .di-chat .di-chat__thread {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-medium);
    min-height: 0;
    padding: var(--space-medium);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-mask: linear-gradient(to bottom, transparent, #000 var(--space-medium), #000 calc(100% - var(--space-medium)), transparent);
    mask: linear-gradient(to bottom, transparent, #000 var(--space-medium), #000 calc(100% - var(--space-medium)), transparent);
}

/* THE CONVERSATION LEAVES UNDER THE TOP BAR AND INTO THE COMPOSER INSTEAD OF BEING CUT BY THEM; THE FOCUS RING IS NEVER FADED */

.demo-page .di-chat .di-chat__thread:focus-visible {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: -2px;
    -webkit-mask: none;
    mask: none;
}

/* MARGIN EXCEPTION: THE MESSAGES AND THE COMPOSER SHARE ONE CENTERED COLUMN, AS IN THE REPLICATED INTERFACE */

.demo-page .di-chat .di-chat__thread > *,
.demo-page .di-chat .di-chat__bottom > * {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--space-large) * 14);
    margin-inline: auto;
}

.demo-page .di-chat .di-chat__thread .di-chat__messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
}

.demo-page .di-chat .di-chat__thread .di-chat__welcome {
    margin-block: auto;
    font-size: var(--type-size-heading);
    font-weight: 500;
    text-align: center;
    text-align-last: center;
    text-wrap: balance;
}

/* ONE MESSAGE — THE EMPLOYEE'S IN A BUBBLE AT THE RIGHT, THE AI'S AS PLAIN TEXT AT THE LEFT */

.demo-page .di-chat .di-msg {
    display: flex;
    min-width: 0;
}

.demo-page .di-chat .di-msg .di-msg__text {
    min-width: 0;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.demo-page .di-chat .di-msg.di-msg--user {
    justify-content: flex-end;
}

.demo-page .di-chat .di-msg.di-msg--user .di-msg__text {
    max-width: 75%;
    padding: var(--space-small) var(--space-medium);
    border-radius: var(--space-medium);
    background: var(--di-gpt-bubble);
}

/* WHILE A MESSAGE IS BEING WRITTEN A CARET FOLLOWS ITS LAST LETTER */

.demo-page .di-chat .di-msg.is-typing .di-msg__text::after {
    content: "";
    display: inline-block;
    width: var(--space-tight);
    height: 1em;
    margin-left: 2px;
    border-radius: var(--radius-pill);
    background: var(--di-gpt-ink);
    vertical-align: text-bottom;
    animation: di-caret 1s steps(2, start) infinite;
}

/* THE AI IS ANSWERING — ONE DOT THAT BREATHES */

.demo-page .di-chat .di-msg .di-msg__dot {
    width: var(--space-small);
    height: var(--space-small);
    border-radius: var(--radius-pill);
    background: var(--di-gpt-ink);
    animation: di-breathe 1.2s var(--ease-state) infinite;
}

@keyframes di-caret {
    to { visibility: hidden; }
}

@keyframes di-breathe {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

/* THE BOTTOM — THE MANAGER'S BLOCK WHEN THERE IS ONE, A REFUSAL, THE COMPOSER AND WHO IS WATCHING */

.demo-page .di-chat .di-chat__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
    padding: 0 var(--space-medium) var(--space-small);
}

.demo-page .di-chat .di-chat__bottom .di-chat__blocked {
    display: none;
    align-items: center;
    gap: var(--space-small);
    padding: var(--space-small);
    border-radius: var(--radius-standard);
    background: var(--color-danger-surface);
    color: var(--color-danger);
    font-weight: 600;
}

.demo-page .di-chat.is-blocked .di-chat__bottom .di-chat__blocked {
    display: flex;
}

.demo-page .di-chat .di-chat__bottom .di-chat__error {
    color: var(--color-danger);
    font-weight: 600;
}

.demo-page .di-chat .di-chat__bottom .di-chat__composer {
    display: flex;
    align-items: flex-end;
    gap: var(--space-small);
    padding: var(--space-tight) var(--space-tight) var(--space-tight) var(--space-medium);
    border: 1px solid var(--di-gpt-line);
    border-radius: var(--space-medium);
    background: var(--di-gpt-surface);
    box-shadow: 0 var(--space-tight) var(--space-medium) calc(var(--space-tight) * -1) color-mix(in srgb, var(--di-gpt-ink) 16%, transparent);
}

.demo-page .di-chat .di-chat__bottom .di-chat__composer:focus-within {
    border-color: color-mix(in srgb, var(--di-gpt-ink) 32%, transparent);
}

.demo-page .di-chat .di-chat__bottom .di-chat__composer textarea {
    flex: 1 1 auto;
    min-width: 0;
    max-height: calc(var(--space-medium) * 5);
    padding: var(--space-tight) 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: var(--space-medium);
    resize: none;
}

.demo-page .di-chat .di-chat__bottom .di-chat__composer textarea::placeholder {
    color: var(--di-gpt-muted);
}

.demo-page .di-chat .di-chat__bottom .di-chat__composer .di-chat__send {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: calc(var(--control-height) - var(--space-small));
    height: calc(var(--control-height) - var(--space-small));
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--di-gpt-ink);
    color: var(--di-gpt-surface);
    cursor: pointer;
    transition: opacity var(--motion-quick) var(--ease-state);
}

.demo-page .di-chat .di-chat__bottom .di-chat__composer:has(textarea:placeholder-shown) .di-chat__send,
.demo-page .di-chat .di-chat__bottom .di-chat__composer .di-chat__send:disabled {
    opacity: 0.3;
}

.demo-page .di-chat .di-chat__bottom .di-chat__note {
    color: var(--di-gpt-muted);
    font-size: var(--type-size-xs);
    text-align: center;
    text-align-last: center;
}

/* ON A PHONE THE TOP BAR CLEARS THE CAMERA ISLAND AND EVERYTHING SITS CLOSER TO THE EDGES */

.demo-page .di-chat.di-chat--phone .di-chat__top {
    padding: calc(var(--space-large) + var(--space-tight)) var(--space-small) var(--space-tight);
}

.demo-page .di-chat.di-chat--phone .di-chat__thread {
    padding-inline: var(--space-small);
}

.demo-page .di-chat.di-chat--phone .di-chat__bottom {
    padding: 0 var(--space-small) var(--space-medium);
}

.demo-page .di-chat.di-chat--phone .di-msg.di-msg--user .di-msg__text {
    max-width: 85%;
    padding-inline: var(--space-small);
}

.demo-page .di-chat.di-chat--phone .di-chat__bottom .di-chat__composer {
    padding-left: var(--space-small);
}

/* THE MANAGER'S MONITORS — THE SCREEN'S CANVAS, THEN CARDS */

.demo-page .di-manager .demo-monitor .demo-monitor__display .demo-monitor__screen > [data-di-slot] {
    padding: var(--space-medium);
}

/* THE MONITOR SCROLLS WITH A SLIM RAIL OF ITS OWN: NO ARROWS, NO TRACK, ONLY THE THUMB */

@supports selector(::-webkit-scrollbar) {

    .demo-page .demo-stage.di-manager .demo-monitor .demo-monitor__display .demo-monitor__screen {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

    .demo-page .demo-stage.di-manager .demo-monitor .demo-monitor__display .demo-monitor__screen::-webkit-scrollbar {
        width: var(--space-small);
    }

    .demo-page .demo-stage.di-manager .demo-monitor .demo-monitor__display .demo-monitor__screen::-webkit-scrollbar-track {
        background: transparent;
    }

    .demo-page .demo-stage.di-manager .demo-monitor .demo-monitor__display .demo-monitor__screen::-webkit-scrollbar-thumb {
        border: 4px solid transparent;
        border-radius: var(--radius-pill);
        background: color-mix(in srgb, var(--color-muted) 32%, transparent) padding-box;
    }

    .demo-page .demo-stage.di-manager .demo-monitor .demo-monitor__display .demo-monitor__screen::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--color-muted) 56%, transparent) padding-box;
    }

}

.demo-page .di-manager :is(.di-monitor, .di-control) {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
}

.demo-page .di-manager :is(.di-monitor, .di-control) .eesier-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    min-width: 0;
    padding: var(--space-medium);
}

.demo-page .di-manager .di-card-title {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    font-size: var(--type-size-base);
    font-weight: 700;
    line-height: 1.5;
}

.demo-page .di-manager .di-card-text {
    color: var(--color-muted);
    text-align: left;
    hyphens: manual;
}

/* THE FOUR TOTALS STAY ON ONE LINE OF THE MONITOR */

.demo-page .di-manager .di-monitor .eesier-card-grid.di-totals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-small);
}

.demo-page .di-manager .di-monitor .di-totals .eesier-stat-value {
    white-space: nowrap;
}

/* THE MESSAGE LOG AND THE AUDIT LOG — ONE LINE OF FACTS, THEN WHAT WAS SAID OR DONE */

.demo-page .di-manager :is(.di-log__list, .di-audit__list) {
    display: flex;
    flex-direction: column;
    padding: 0;
    list-style: none;
}

.demo-page .di-manager :is(.di-log__list, .di-audit__list) > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight) var(--space-small);
    padding-block: var(--space-small);
    border-top: 1px solid var(--color-veil);
    font-size: var(--type-size-small);
    line-height: var(--space-medium);
}

.demo-page .di-manager :is(.di-log__list, .di-audit__list) > li:first-child {
    padding-top: 0;
    border-top: 0;
}

.demo-page .di-manager :is(.di-log__list, .di-audit__list) > li .di-log__time {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.demo-page .di-manager :is(.di-log__list, .di-audit__list) > li .di-log__blocked {
    gap: var(--space-tight);
}

.demo-page .di-manager .di-log__list > li .di-log__usage {
    flex: 1 1 0;
    color: var(--color-muted);
    font-size: var(--type-size-xs);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.demo-page .di-manager .di-log__list > li .di-log__text,
.demo-page .di-manager .di-audit__list > li .di-audit__summary {
    flex: 1 1 100%;
    order: 1;
    min-width: 0;
    color: var(--color-text-dark);
    overflow-wrap: anywhere;
}

/* A LONG MESSAGE SHOWS ITS FIRST THREE LINES IN THE LOG */

.demo-page .di-manager .di-log__list > li .di-log__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.demo-page .di-manager .di-log__list > li.is-ai .di-log__text {
    color: var(--color-muted);
}

/* THE DEVICES — THE TABLE HAS NO SHEET OF ITS OWN: IT BLEEDS TO THE EDGES OF THE CARD THAT FRAMES IT */

.demo-page .di-manager .di-control .di-devices .eesier-table {
    margin-inline: calc(var(--space-medium) * -1);
}

.demo-page .di-manager .di-control .di-devices .eesier-table > table > tbody > tr > td:first-child {
    width: 100%;
}

.demo-page .di-manager .di-control .di-devices .di-device {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
    min-width: 0;
}

.demo-page .di-manager .di-control .di-devices .di-device .di-device__name {
    font-weight: 700;
}

.demo-page .di-manager .di-control .di-devices .di-device .di-device__team {
    color: var(--color-muted);
    font-size: var(--type-size-xs);
}

/* A FIGURE NEVER BREAKS IN TWO LINES */

.demo-page .di-manager .di-control .di-devices .eesier-table > table > tbody > tr > td:not(:first-child) {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* THE SWITCH IS A CONTROL OF THE SYSTEM ON THE SCREEN, SO IT HAS THE HEIGHT THE SCREEN'S BUTTONS HAVE */

.demo-page .di-manager .di-control .di-devices .di-device__switch {
    position: relative;
    height: calc(var(--control-height) - var(--space-small));
    padding-inline: var(--space-small);
    white-space: nowrap;
}

.demo-page .di-manager .di-control .di-devices .di-device__switch:not(:has(> input:checked)) {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.demo-page .di-manager .di-control .di-devices .di-device__switch:has(> input:focus-visible) {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: 2px;
}

/* THE RULES BESIDE THE LOG THEY PRODUCE */

.demo-page .di-manager .di-control .di-control__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-medium);
}

.demo-page .di-manager .di-control .di-control__row .di-control__settings {
    display: flex;
    flex: 0 0 360px;
    flex-direction: column;
    gap: var(--space-medium);
    min-width: 0;
}

/* THE MODEL — THE MANAGER COULD PICK ANOTHER ONE; IN THIS DEMO THE CHOICE IS SHOWN LOCKED */

.demo-page .di-manager .di-control .di-model .di-model__options {
    margin: 0;
    padding: 0;
    border: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-tight);
}

.demo-page .di-manager .di-control .di-model .di-model__options .di-model__option {
    position: relative;
    padding-inline: var(--space-small);
    border-radius: var(--radius-standard);
    cursor: not-allowed;
}

/* THE MODEL IN USE KEEPS ITS FULL STRENGTH AND CARRIES THE CHECK; THE TWO THAT ARE NOT RUNNING STEP BACK */

.demo-page .di-manager .di-control .di-model .di-model__options .di-model__option:has(> input:checked) {
    color: var(--color-text-dark);
    opacity: 1;
}

.demo-page .di-manager .di-control .di-model .di-model__options .di-model__option:not(:has(> input:checked)) {
    opacity: 0.5;
}

/* MARGIN EXCEPTION: THE CHECK SITS AT THE END OF THE ROW, WHATEVER THE NAME'S LENGTH */

.demo-page .di-manager .di-control .di-model .di-model__options .di-model__option .di-model__check {
    margin-left: auto;
    color: var(--color-palette-primary);
}

.demo-page .di-manager .di-control .di-model .di-model__options .di-model__option .di-model__logo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--space-medium);
    height: var(--space-medium);
    border-radius: var(--space-tight);
}

.demo-page .di-manager .di-control .di-model .di-model__options .di-model__option .di-model__logo img {
    width: var(--icon-size);
    height: var(--icon-size);
}

.demo-page .di-manager .di-control .di-model .di-model__options .di-model__option .di-model__logo.di-model__logo--chatgpt {
    background: var(--demo-brand-chatgpt);
}

.demo-page .di-manager .di-control .di-model .di-model__options .di-model__option .di-model__logo.di-model__logo--claude {
    background: var(--demo-brand-claude);
}

.demo-page .di-manager .di-control .di-model .di-model__options .di-model__option .di-model__logo.di-model__logo--copilot {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.demo-page .di-manager .di-control .di-model .di-model__options .di-model__option .di-model__version {
    color: var(--color-muted);
    font-weight: 400;
}

.demo-page .di-manager .di-control .di-model .di-model__lock {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
    color: var(--color-muted);
    font-size: var(--type-size-xs);
}

.demo-page .di-manager .di-control .di-control__row .di-audit {
    flex: 1;
}

/* A RULE APPLIES THE MOMENT ITS SWITCH MOVES, SO THE SHARED FORM'S SUBMIT HAS NOTHING TO SEND */

.demo-page .di-manager .di-control .di-control__row .di-rules .eesier-form-submit {
    display: none;
}

/* THE RULE'S NAME IS WHAT THE MANAGER READS BEFORE MOVING THE SWITCH, SO IT TAKES THE READING INK INSTEAD OF A FIELD LABEL'S FAINT ONE.
   THE FORM'S OWN RULE IS KEYED BY ITS ID, SO THIS ONE IS TOO */

.demo-page .di-manager .di-control .di-control__row .di-rules #di-rules-form .eesier-form-group .toggle-label {
    color: var(--color-text-dark);
}

/* LIVE — WHAT ANYONE SENDS OR CHANGES ARRIVES IN PLACE: A NEW ROW GLOWS IN. ONLY OPACITY AND THE ROW'S TINT MOVE; NOTHING TRANSLATES. */

.demo-page .di-manager .di-live-enter {
    animation: di-live-enter 2.4s var(--ease-state) both;
}

@keyframes di-live-enter {
    0% { opacity: 0; background-color: color-mix(in srgb, var(--color-palette-primary) 24%, transparent); }
    15% { opacity: 1; background-color: color-mix(in srgb, var(--color-palette-primary) 24%, transparent); }
    100% { opacity: 1; background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {

    .demo-page .di-manager .di-live-enter,
    .demo-page .di-chat .di-msg .di-msg__dot,
    .demo-page .di-chat .di-msg.is-typing .di-msg__text::after {
        animation: none;
    }

}

@media (max-width: 900px) {

    /* ON A PHONE THE SIGN'S HEADING STEPS DOWN, SO THE FIRST DEVICE IS ALREADY IN SIGHT */

    .demo-page .demo-stage.di-stage .demo-stage__layout > .demo-intro > .demo-intro__layout h1 {
        font-size: var(--type-size-page);
        line-height: 1.2;
    }

    /* ON A PHONE NO DEVICE IS DRAWN: EACH CHAT IS A SHEET OF A FIXED HEIGHT THAT SCROLLS ITS OWN CONVERSATION */

    .demo-page .demo-stage .demo-laptop .demo-laptop__lid .demo-laptop__screen.di-screen,
    .demo-page .demo-stage .demo-phone .demo-phone__body .demo-phone__screen.di-screen {
        height: calc(var(--space-large) * 10);
        overflow: hidden;
    }

    .demo-page .di-chat .di-chat__side {
        display: none;
    }

    .demo-page .di-chat .di-chat__top,
    .demo-page .di-chat.di-chat--phone .di-chat__top {
        padding: 0 var(--space-small);
    }

    .demo-page .di-chat .di-chat__thread {
        padding-inline: var(--space-small);
    }

    .demo-page .di-chat .di-chat__bottom,
    .demo-page .di-chat.di-chat--phone .di-chat__bottom {
        padding: 0 var(--space-small) var(--space-small);
    }

    .demo-page .di-manager .demo-monitor .demo-monitor__display .demo-monitor__screen > [data-di-slot] {
        padding: var(--space-small);
    }

    .demo-page .di-manager .di-monitor .eesier-card-grid.di-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .demo-page .di-manager .di-control .di-control__row {
        flex-direction: column;
        align-items: stretch;
    }

    .demo-page .di-manager .di-control .di-control__row .di-control__settings {
        flex: 0 0 auto;
    }

    .demo-page .di-manager .di-control .di-devices .eesier-table > table > :is(thead, tbody) > tr > :is(th, td):is(:nth-child(2), :nth-child(3)) {
        display: none;
    }

    .demo-page .di-manager .di-control .di-devices .di-device__switch > span {
        display: none;
    }

    /* UNDER A FINGER THE SWITCH KEEPS THE FULL TOUCH TARGET */

    .demo-page .di-manager .di-control .di-devices .di-device__switch {
        height: var(--control-height);
        padding-inline: var(--space-medium);
    }

}