﻿/* Operable product demos, using the site's existing Aligns tokens. */
.demo{font-size:var(--fs-xs);padding:clamp(.65rem,1.4vw,1rem)}
.demo button,.demo input,.demo select{font:inherit;color:var(--ink)}
.demo button,.demo select{cursor:pointer}
.demo button:focus-visible,.demo input:focus-visible,.demo select:focus-visible,.demo-chat-log:focus-visible{outline:2px solid var(--mint-deep);outline-offset:3px}
.demo button:disabled{cursor:default;opacity:.65}
.demo button[aria-disabled="true"]{cursor:default}
.demo-button{min-height:40px;padding:.45rem .7rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--white);font-weight:700;line-height:1.35}
.motion .demo-button{transition:background-color .16s,border-color .16s,transform .16s}
.demo-button:hover:enabled{border-color:var(--mint-deep);background:var(--mint-soft)}
.motion .demo-button:active:enabled{transform:scale(.97);background:var(--mint-soft)}
.demo-chrome{display:flex;align-items:center;gap:.8rem;padding:.75rem .85rem;border-bottom:1px solid var(--line);background:var(--paper)}
.demo-window-dots{color:var(--text-muted);font-size:var(--fs-2xs);letter-spacing:.1rem}
.demo-orders{padding:.85rem;min-width:0}
.demo-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.demo-metrics>div{min-width:0;padding:.65rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}
.demo-metrics span{display:block;color:var(--text-muted);font-size:var(--fs-xs);font-weight:650}
.demo-metrics strong{display:block;font-size:var(--fs-lg);line-height:1.5;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.demo-metrics .has-overdue{background:var(--signal-soft);border-color:var(--line-strong)}
.demo-distribution{display:flex;gap:2px;height:.5rem;margin:1rem 0 .6rem;overflow:hidden;border-radius:999px;background:var(--line)}
.demo-segment{flex-basis:0;min-width:0}
.motion .is-demo-visible .demo-segment{transition:flex-grow .6s ease}
.demo-segment--0{flex-grow:2;background:var(--line-strong)}
.demo-segment--1{flex-grow:2;background:var(--mint)}
.demo-segment--2{flex-grow:1;background:var(--mint-deep)}
.demo-segment--3{flex-grow:1;background:var(--ink)}
.demo-legend{display:flex;flex-wrap:wrap;gap:.35rem .8rem;list-style:none;padding:0;margin:0 0 .85rem;font-size:var(--fs-2xs);color:var(--text-muted)}
.demo-legend li{display:flex;align-items:center;gap:.3rem}
.demo-legend li::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--line-strong)}
.demo-legend li:nth-child(2)::before{background:var(--mint)}
.demo-legend li:nth-child(3)::before{background:var(--mint-deep)}
.demo-legend li:nth-child(4)::before{background:var(--ink)}
.demo-hint{font-size:var(--fs-xs);line-height:1.5;color:var(--text-muted);margin:0 0 .65rem}
.demo-table-wrap{overflow:auto;max-height:25rem;border-block:1px solid var(--line);overscroll-behavior:contain}
.demo-table{width:100%;border-collapse:collapse;text-align:left;font-size:var(--fs-2xs);line-height:1.4}
.demo-table th,.demo-table td{padding:.65rem .3rem;border-bottom:1px solid var(--line);vertical-align:middle}
.demo-table thead th{position:sticky;top:0;z-index:1;background:var(--paper);font-weight:800;color:var(--text-muted)}
.demo-table tbody th{font-weight:800;white-space:nowrap}
.demo-table td{font-variant-numeric:tabular-nums}
.demo-table select{width:100%;min-width:0;min-height:36px;padding:.2rem .1rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--white);font-weight:650;font-size:var(--fs-2xs)}
.demo-status{width:27%}
.demo-client{width:23%}
.demo-table .is-overdue .demo-deadline{background:var(--signal-soft)}
.demo-order-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-top:.8rem}
.demo-order-controls:empty,.demo-chat-controls:empty{display:none}
.demo-chat-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:start;gap:.75rem}
.demo-phone{min-width:0;border:3px solid var(--ink);border-radius:var(--radius-lg);background:var(--paper)}
.demo-chat-header{padding:.85rem .75rem;background:var(--ink);color:var(--white);font-size:var(--fs-xs);line-height:1.5}
.demo-chat-header strong{display:block;font-weight:750}
.demo-chat-header>span{display:flex;align-items:center;gap:.35rem;font-size:var(--fs-2xs);color:var(--text-on-dark)}
.demo-chat-header>span::before{content:"";height:.35rem;width:.35rem;background:var(--mint);border-radius:50%}
.demo-chat-log{display:flex;flex-direction:column;gap:.65rem;height:17rem;padding:.8rem .6rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.demo-message{align-self:flex-start;max-width:94%;padding:.6rem .7rem;background:var(--white);border:1px solid var(--line);border-radius:.85rem .85rem .85rem .15rem;overflow-wrap:anywhere}
.demo-message p,.demo-handoff p,.demo-queue p{margin:0;font-size:inherit;color:inherit;line-height:1.5;text-wrap:pretty}
.demo-message--client{align-self:flex-end;background:var(--mint-soft);border-radius:.85rem .85rem .15rem .85rem}
.demo-message time{display:block;margin-top:.2rem;text-align:right;font-size:var(--fs-2xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
.demo-handoff{padding:.65rem;border:1px solid var(--mint-deep);border-radius:var(--radius-sm);background:var(--mint-soft);font-size:var(--fs-xs);overflow-wrap:anywhere}
.demo-handoff strong{display:block;margin-bottom:.25rem;font-weight:800}
.demo-handoff p,.demo-queue p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.demo-chat-controls{padding:.65rem;border-top:1px solid var(--line);background:var(--white)}
.demo-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem}
.demo-chip{min-height:36px;padding:.4rem .55rem;border-radius:999px;font-size:var(--fs-2xs);line-height:1.4;color:var(--ink)}
.demo-compose{display:flex;gap:.35rem;min-width:0;margin:0 0 .4rem}
.demo-compose input{width:0;flex:1;min-width:0;min-height:40px;padding:.5rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--paper);font-size:var(--fs-xs)}
.demo-compose input::placeholder{color:var(--text-muted);opacity:1}
.demo .demo-send{padding:.4rem .5rem;background:var(--ink);color:var(--white)}
.demo-send:hover:enabled,.demo-send:active:enabled{background:var(--ink);border-color:var(--mint-deep)}
.demo-chat-controls>.demo-button{min-height:32px;border-color:transparent;font-size:var(--fs-2xs);color:var(--text-muted)}
.demo-queue{min-width:0;padding:.75rem .6rem;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--white)}
.demo-queue h4{font-size:var(--fs-xs);line-height:1.3;margin:0 0 .8rem;font-weight:800}
.demo-queue ol{padding:0;margin:0;list-style:none;max-height:28rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.demo-queue li{padding:.7rem 0;border-top:1px solid var(--line);font-size:var(--fs-2xs);overflow-wrap:anywhere}
.demo-queue strong{display:block;font-weight:800}
.demo-queue time{display:block;margin:.15rem 0 .45rem;color:var(--text-muted);font-size:var(--fs-2xs)}
.demo-typing{display:flex;align-self:flex-start;gap:.25rem;padding:.8rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.demo-typing i{width:.3rem;height:.3rem;border-radius:50%;background:var(--text-muted)}
.motion .is-demo-visible .demo-typing i{animation:demo-typing .8s ease-in-out infinite alternate}
.motion .is-demo-visible .demo-typing i:nth-child(2){animation-delay:.15s}
.motion .is-demo-visible .demo-typing i:nth-child(3){animation-delay:.3s}
@keyframes demo-typing{to{opacity:.4;transform:translateY(-2px)}}
@media(min-width:1024px){
  /* Only the table/log shrink; actions stay outside the scrolling area. */
  .demo .scene-frame,.demo-orders{display:flex;flex-direction:column;min-height:0}
  .demo-chrome,.demo-orders>:not(.demo-table-wrap){flex-shrink:0}
  .demo-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  .demo-metrics>div{padding:.45rem .5rem}
  .demo-metrics strong{font-size:var(--fs-base);line-height:1.4}
  .demo-distribution{margin:.6rem 0 .4rem}
  .demo-legend{margin-bottom:.4rem}
  .demo-hint{margin-bottom:.4rem}
  .demo-table-wrap{min-height:0;max-height:18rem;flex:0 1 auto}
  .demo-table th,.demo-table td{padding:.25rem .3rem}
  .demo .demo-table select{min-height:30px;font-size:var(--fs-xs)}
  .demo-order-controls{margin-top:.5rem}
  .demo-chat-layout{min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch}
  .demo-phone{min-height:0}
  .demo-chat-header,.demo-chat-controls{flex-shrink:0}
  .demo-chat-log{min-height:0;flex:0 1 17rem}
  .demo-chat-log>*{flex-shrink:0}
  .demo-queue{display:flex;flex-direction:column;min-height:0;max-height:100%;align-self:start}
  .demo-queue h4{flex-shrink:0}
  .demo-queue ol{min-height:0}
}
@media(max-width:1023px){
  .demo-chat-layout{grid-template-columns:minmax(0,1fr)}
  .demo-phone{width:100%;max-width:24rem;margin-inline:auto}
  .demo-queue{width:100%;max-width:24rem;margin-inline:auto}
  .demo-queue ol{max-height:15rem}
  .demo-queue li{padding:.65rem 0}
  .demo-chat-log{height:auto;min-height:0;max-height:18rem}
  .demo-chat-log>*{flex-shrink:0}
  .demo-chat-controls{padding:.8rem}
  .demo-chip{min-height:40px;font-size:var(--fs-xs)}
}
@media(max-width:419px){
  .demo-client{display:none}
  .demo-orders{padding:.6rem}
  .demo-table{font-size:var(--fs-2xs)}
  .demo-table th,.demo-table td{padding:.55rem .2rem}
  .demo-status{width:35%}
  .demo-table select{font-size:var(--fs-2xs);max-width:6.4rem}
  .demo-table .demo-value{white-space:nowrap}
  .demo-table .demo-deadline{max-width:3.3rem;font-size:var(--fs-2xs)}
}
@media(prefers-reduced-motion:reduce){
  .motion .demo-button,.motion .is-demo-visible .demo-segment{transition:none}
  .motion .is-demo-visible .demo-typing i{animation:none}
  .motion .demo-button:active:enabled{transform:none}
}
/* Document reading and integration share the compact product chrome and controls. */
.demo-docs,.demo-integration{padding:.75rem;min-width:0}
.demo-doc-selector,.demo-integration-selector{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.6rem}
.demo-doc-selector .demo-button,.demo-integration-selector .demo-button{flex:1;padding:.4rem .45rem}
.demo [aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.demo [aria-pressed="true"]:hover:enabled{background:var(--ink);color:var(--white)}
.demo-doc-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem;align-items:start;min-width:0}
.demo-paper{position:relative;min-width:0;padding:1rem .8rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--paper);box-shadow:var(--shadow-sm);overflow:hidden}
.demo-paper p,.demo-doc-field p,.demo-system-panel p{font-size:inherit;line-height:1.45;color:inherit;margin:.45rem 0;overflow-wrap:anywhere}
.demo-paper>strong{display:block;font-size:var(--fs-sm)}
.demo-paper-items{margin:.8rem 0;padding:.55rem 0;border-block:1px solid var(--line)}
.demo-paper-items p{font-size:var(--fs-xs)}
.demo-paper--receipt{font-style:italic;transform:rotate(-1deg)}
.demo-paper .is-highlighted{background:var(--mint-soft);border-radius:2px}
.demo-doc-scan{position:absolute;inset:0;opacity:0;pointer-events:none}
.demo-doc-scan::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--mint-deep);box-shadow:0 0 8px var(--mint)}
.demo-doc-fields{min-width:0}
.demo-doc-field{padding:.4rem 0;border-bottom:1px solid var(--line);min-width:0}
.demo-doc-field:first-child{padding-top:0}
.demo-doc-field>strong{font-size:var(--fs-2xs);color:var(--text-muted)}
.demo-doc-field p{margin:.2rem 0;font-weight:700}
.demo-badge{display:inline-block;border-radius:var(--radius-sm);padding:.1rem .25rem;font-size:var(--fs-2xs);font-weight:750;background:var(--mint-soft);color:var(--ink);line-height:1.25}
.demo-badge--review{background:var(--signal-soft);color:var(--ink)}
.demo-field-reason{display:block;font-size:var(--fs-2xs);color:var(--text-muted);margin:.25rem 0}
.demo-field-tools{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem;min-width:0}
.demo-field-tools .demo-button{min-height:32px;font-size:var(--fs-2xs);padding:.3rem .45rem}
.demo-field-tools input,.demo-field-tools select{width:100%;min-width:0;min-height:36px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:.3rem;background:var(--white)}
.demo-field-error{flex-basis:100%;font-size:var(--fs-2xs);color:var(--ink)}
.demo-action-row{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:space-between}
.demo-doc-actions{margin-top:.65rem}
.demo-doc-actions .demo-hint{min-height:1.3em;margin-bottom:.35rem}
.demo-success{padding:.45rem .6rem;background:var(--mint-soft);border:1px solid var(--line-strong);border-radius:var(--radius-sm);margin-top:.45rem;font-size:var(--fs-xs);font-weight:700}
.demo-payments{margin-top:.65rem;border-top:1px solid var(--line);padding-top:.5rem}
.demo-payments h4,.demo-events h4,.demo-system-panel h4{font-size:var(--fs-xs);line-height:1.3;margin:0 0 .35rem;font-weight:800}
.demo-payments ol,.demo-events ol,.demo-store-orders{list-style:none;margin:0;padding:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.demo-payments ol{max-height:5rem}
.demo-payments li,.demo-events li{font-size:var(--fs-2xs);padding:.25rem 0;border-top:1px solid var(--line);overflow-wrap:anywhere;line-height:1.4}
.demo-integration-panels{display:grid;grid-template-columns:minmax(0,1fr) 2rem minmax(0,1fr);align-items:stretch;min-width:0}
.demo-system-panel{min-width:0;padding:.65rem;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper)}
.demo-system-panel h5{font-size:var(--fs-2xs);line-height:1.3;margin:.6rem 0 .3rem;font-weight:800}
.demo-system-panel .demo-product{font-weight:700}
.demo-system-panel .demo-button{font-size:var(--fs-2xs);min-height:34px;padding:.35rem .4rem}
.demo-sale-controls .demo-button{width:100%}
.demo-store-orders{max-height:12rem}
.demo-store-orders li{padding:.4rem 0;border-top:1px solid var(--line);font-size:var(--fs-2xs);overflow-wrap:anywhere}
.demo-store-orders p{margin:.2rem 0}
.demo-order-state{display:block;font-size:var(--fs-2xs);font-weight:700}
.demo-system-panel .demo-manual-count,.demo-system-panel .demo-waiting{font-size:var(--fs-2xs);font-variant-numeric:tabular-nums}
.demo-manual{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem;min-width:0}
.demo-manual>h5,.demo-manual-id,.demo-manual-tools{grid-column:1/-1}
.demo-manual>h5{margin:.3rem 0 0}
.demo-manual .demo-manual-id{font-size:var(--fs-2xs);margin:0}
.demo-manual-field{display:block;font-size:var(--fs-2xs);min-width:0}
.demo-manual-field input{display:block;width:100%;min-width:0;padding:.3rem .2rem;min-height:32px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--white);font-size:var(--fs-2xs)}
.demo-manual-tools{display:flex}
.demo-manual-tools .demo-button{width:100%;text-align:left;line-height:1.25}
.demo-route{position:relative;align-self:center;height:2px;background:var(--line-strong);min-width:0}
.demo-route::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:2px solid var(--mint-deep);border-right:2px solid var(--mint-deep);transform:rotate(45deg)}
.demo-route-carrier{position:absolute;inset:0;opacity:1;pointer-events:none;z-index:2}
.demo-route-packet{position:absolute;left:0;bottom:.5rem;transform:translateX(-50%);padding:.2rem .35rem;white-space:nowrap;border:1px solid var(--mint-deep);border-radius:var(--radius-sm);background:var(--mint-soft);font-size:var(--fs-2xs);font-weight:750}
.demo-events{margin-top:.65rem}
.demo-events ol{max-height:9rem;min-height:0}
.demo-integration-reset{margin-top:.55rem}
.demo-integration-result{font-size:var(--fs-2xs)}
/* Preserve hidden states against the demo layout display rules. */
.demo [hidden]{display:none!important}
@media(min-width:1024px){
  .services-showcase .scene--ia.demo,.services-showcase .scene--integracoes.demo{max-height:min(600px,var(--scene-max-h))}
  .scene--ia .scene-frame,.scene--integracoes .scene-frame{min-height:0}
  .demo-docs,.demo-integration{display:flex;flex-direction:column;min-height:0}
  .demo-docs>:not(.demo-doc-workspace),.demo-integration>:not(.demo-integration-panels){flex-shrink:0}
  .demo-doc-workspace,.demo-integration-panels{min-height:0;flex-shrink:0}
  .demo-doc-selector,.demo-integration-selector{margin-bottom:.4rem}
  .demo-docs,.demo-integration{padding:.6rem}
  .demo-doc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem .5rem}
  .demo-doc-field{padding:0 0 .25rem}
  .demo-doc-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:.6rem}
  .demo-doc-field p{line-height:1.3}
  .demo-chrome{padding:.5rem .65rem}
  .demo-paper p{line-height:1.35;margin:.3rem 0}
  .demo-paper>strong{line-height:1.35}
  .demo-doc-actions{margin-top:.4rem}
  .demo-payments{margin-top:.4rem;padding-top:.35rem}
  .scene--ia .scene-note,.scene--integracoes .scene-note{margin-top:.6rem}
  .demo-paper{padding:.6rem .5rem}
  .demo-paper-items{margin:.5rem 0;padding:.3rem 0}
  .demo-system-panel{padding:.5rem}
  .demo-system-panel p{margin:.3rem 0}
  .demo-store-orders{max-height:13rem}
  .demo-payments ol{max-height:3rem}
  .demo-events ol{max-height:8rem}
  .demo-erp:has(.demo-manual:not(:empty)) .demo-events ol{max-height:3.2rem}
}
@media(max-width:767px){
  .demo-doc-workspace{grid-template-columns:minmax(0,1fr)}
  .demo-doc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .demo-doc-field:first-child{padding-top:.4rem}
  .demo-integration-panels{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 2.5rem auto}
  .demo-route{width:2px;height:100%;justify-self:center}
  .demo-route::after{right:-3px;top:auto;bottom:0;transform:rotate(135deg)}
  .demo-route-packet{left:.6rem;bottom:auto;top:0;transform:none}
  .demo-store-orders{max-height:10rem}
  .demo-field-tools .demo-button{min-height:40px}
}
@media(prefers-reduced-motion:reduce){
  .demo-paper--receipt{transform:none}
}
