/* ═══════════════════════════════════════════════════════════════════════════
   Product screens — HTML recreations of the Vyapiq app.
   Everything inside is sized in em off a container-relative base, so a
   screen scales like a picture at any width. Palette follows the app
   (slate sidebar, green primary, Inter).
   ═══════════════════════════════════════════════════════════════════════════ */

.ui {
  margin: 0; position: relative; overflow: hidden;
  border-radius: 14px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  container: ui / inline-size;
  font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
  color: #1f2937; line-height: 1.35; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.dark .ui { border-color: rgba(255,255,255,.14); box-shadow: var(--shadow-lg); }
.ui .ic { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
.ui .ic svg { stroke-width: 2; }
.ui b, .ui strong { font-weight: 600; }
.ui ul { list-style: none; margin: 0; padding: 0; }
.ui p { margin: 0; }

/* Browser bar */
.ui-bar { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #EEF2F1; border-bottom: 1px solid #E2E8E6; }
.ui-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D5DDDB; }
.ui-bar i:first-child { background: #FF8A70; }
.ui-url { margin-left: 10px; flex: 0 1 46%; min-width: 0; background: #fff; border-radius: 6px; padding: 3px 10px; font: 500 10.5px var(--mono); color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* App shell */
.ui-screen { font-size: 1.7cqw; display: grid; grid-template-columns: 10.5em minmax(0,1fr); min-height: 28em; background: #f9fafb; }
.ui-side { background: #0f172a; color: #94a3b8; padding: 1em .6em; display: flex; flex-direction: column; }
.ui-co { display: flex; align-items: center; gap: .55em; padding: 0 .35em .9em; margin-bottom: .7em; border-bottom: 1px solid #1e293b; }
.ui-logo { width: 2.1em; height: 2.1em; border-radius: .55em; background: #16a34a; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95em; flex-shrink: 0; }
.ui-co b { display: block; color: #fff; font-size: .95em; }
.ui-co small { display: block; color: #64748b; font-size: .72em; white-space: nowrap; }
.ui-nav { display: grid; gap: .12em; }
.ui-nav span { position: relative; display: flex; align-items: center; gap: .6em; padding: .5em .6em; border-radius: .45em; font-size: .88em; white-space: nowrap; }
.ui-nav .ic { width: 1.15em; height: 1.15em; }
.ui-nav .on { background: rgba(51,65,85,.8); color: #fff; }
.ui-nav .on::before { content: ""; position: absolute; left: -.6em; top: .35em; bottom: .35em; width: .22em; border-radius: 0 .2em .2em 0; background: #4ade80; }
.ui-nav .on .ic { color: #4ade80; }
.ui-nav .on::after { content: ""; margin-left: auto; width: .38em; height: .38em; border-radius: 50%; background: #4ade80; }
.ui-main { display: flex; flex-direction: column; min-width: 0; }
.ui-top { display: flex; align-items: center; justify-content: space-between; gap: 1em; background: #fff; border-bottom: 1px solid #f3f4f6; box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: .8em 1.3em; }
.ui-top b { font-size: 1.2em; color: #1f2937; }
.ui-top-r { display: flex; align-items: center; gap: .8em; color: #9ca3af; }
.ui-top-r .av { width: 2em; height: 2em; font-size: .78em; background: #dcfce7; color: #15803d; }

.app-body { position: relative; flex: 1; display: grid; gap: .85em; align-content: start; padding: 1.1em 1.3em 1.3em; }

/* Shared pieces */
.ui .card { background: #fff; border: 1px solid #eef0f2; border-radius: .75em; box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: .85em 1em; min-width: 0; }
.ui .card:has(> .tbl):not(.doc) { padding: 0; overflow: hidden; }
.ui .lbl { display: flex; align-items: center; gap: .4em; font-size: .74em; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .55em; }
.ui .lbl.ai-l { color: #15803d; }
.ui .mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: .9em; font-weight: 500; }

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75em; }
.kpis.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.kpi .lbl { text-transform: none; letter-spacing: 0; font-size: .8em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b { display: block; font-size: 1.75em; font-weight: 700; color: #111827; line-height: 1.05; font-variant-numeric: tabular-nums; }
.k-red { color: #dc2626 !important; } .k-amber { color: #d97706 !important; } .k-green { color: #16a34a !important; }

.ui .tbl { width: 100%; border-collapse: collapse; font-size: .85em; }
.ui .tbl th { background: #f9fafb; text-align: left; font-size: .8em; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; padding: .8em .8em; white-space: nowrap; border-bottom: 1px solid #f3f4f6; }
.ui .tbl td { padding: .72em .8em; border-bottom: 1px solid #f3f4f6; color: #374151; white-space: nowrap; vertical-align: middle; }
.ui .tbl tr:last-child td { border-bottom: 0; }
.ui .tbl td b { color: #111827; }
.ui .tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.ui .tbl small.sub { display: block; color: #9ca3af; font-size: .85em; margin-top: .1em; }
.ui .late { color: #dc2626; font-weight: 600; }
.row-new td { background: #f0fdf4; }
.row-warn td { background: #fef2f2; }

.ui .pill { display: inline-flex; align-items: center; gap: .25em; font-size: .82em; font-weight: 600; padding: .2em .65em; border-radius: 999px; white-space: nowrap; line-height: 1.45; }
.p-hot    { background: #fee2e2; color: #dc2626; }
.p-warm   { background: #fef3c7; color: #d97706; }
.p-cold   { background: #dbeafe; color: #2563eb; }
.p-green  { background: #dcfce7; color: #15803d; }
.p-blue   { background: #dbeafe; color: #1d4ed8; }
.p-amber  { background: #fef3c7; color: #b45309; }
.p-red    { background: #fee2e2; color: #b91c1c; }
.p-violet { background: #ede9fe; color: #6d28d9; }
.p-gray   { background: #f3f4f6; color: #4b5563; }

.plat { display: inline-flex; align-items: center; gap: .4em; font-weight: 500; }
.plat::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: #9ca3af; }
.plat.wa::before { background: #22c55e; } .plat.im::before { background: #f97316; } .plat.em::before { background: #3b82f6; }
.gm { display: inline-flex; align-items: center; gap: .35em; color: #15803d; font-weight: 500; }

.btn-g, .btn-o { display: inline-flex; align-items: center; gap: .4em; justify-self: start; font-size: .88em; font-weight: 600; padding: .55em 1em; border-radius: .55em; white-space: nowrap; }
.btn-g { background: #16a34a; color: #fff; box-shadow: 0 1px 2px rgba(22,163,74,.3); }
.btn-o { background: #fff; color: #374151; border: 1px solid #e5e7eb; }

.toolbar { display: flex; align-items: center; gap: .5em; flex-wrap: nowrap; min-width: 0; }
.search { display: flex; align-items: center; gap: .45em; background: #fff; border: 1px solid #e5e7eb; border-radius: .55em; padding: .5em .8em; color: #9ca3af; font-size: .88em; min-width: 11em; }
.chip { font-size: .82em; padding: .4em .8em; border-radius: 999px; background: #fff; border: 1px solid #e5e7eb; color: #4b5563; white-space: nowrap; }
.chip.on { background: #111827; border-color: #111827; color: #fff; }
.tab { font-size: .88em; padding: .45em .85em; border-radius: .5em; color: #6b7280; white-space: nowrap; }
.tab.on { background: #fff; color: #111827; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px #eef0f2; }
.push { margin-left: auto; }
.alert { display: inline-flex; align-items: center; gap: .4em; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: .55em; padding: .42em .8em; font-size: .82em; font-weight: 600; white-space: nowrap; }

.av { width: 2.3em; height: 2.3em; border-radius: 50%; background: #e5e7eb; color: #374151; display: grid; place-items: center; font-weight: 600; font-size: .82em; flex-shrink: 0; }
.av-g { background: #dcfce7; color: #15803d; }
.who { display: flex; align-items: center; gap: .6em; min-width: 0; }
.who-t { min-width: 0; }
.who-t b { display: block; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-t small { display: block; color: #6b7280; font-size: .82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 7-bar stage strip, as on the Orders list */
.strip { display: inline-flex; gap: .2em; }
.strip i { width: .9em; height: .36em; border-radius: 999px; background: #e5e7eb; }
.strip i.d { background: #22c55e; }
.strip i.c { background: #fbbf24; }

/* ─── Dashboard + Ask Vyapiq ─────────────────────────────────────────────── */
.dash .bars { height: 12em; display: flex; align-items: flex-end; gap: 3%; padding: 1.2em 1.3em 0; }
.dash .bars i { flex: 1; height: var(--h); background: linear-gradient(#86efac, #dcfce7); border-radius: .3em .3em 0 0; }
.dash::after { content: ""; position: absolute; inset: 0; background: rgba(15,23,42,.28); z-index: 1; }
.ask-pop { position: absolute; z-index: 2; left: 5%; right: 5%; top: 2.6em; background: #fff; border-radius: 1em; padding: .9em; box-shadow: 0 2em 4em -1em rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.06); }
.ask-pop-q { display: flex; align-items: center; gap: .6em; border: 1.5px solid #16a34a; border-radius: .7em; padding: .7em .75em; font-size: 1.05em; color: #111827; box-shadow: 0 0 0 .25em rgba(22,163,74,.12); }
.ask-pop-q > .ic { color: #16a34a; }
.ask-pop-q .mic { margin-left: auto; width: 1.9em; height: 1.9em; border-radius: 50%; background: #dcfce7; color: #16a34a; display: grid; place-items: center; }
.ask-pop-q .mic .ic { width: .95em; height: .95em; }
.ask-pop-a { margin-top: .8em; display: grid; gap: .5em; }
.a-meta { font-size: .8em; color: #6b7280; padding-left: .2em; }
.a-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: .8em; align-items: center; padding: .6em .75em; border: 1px solid #f1f2f4; border-radius: .6em; background: #f9fafb; }
.a-row > b { color: #374151; }
.a-txt strong { display: block; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-txt small { display: block; color: #6b7280; font-size: .82em; }

/* ─── Quotation generator ───────────────────────────────────────────────── */
.enq { display: grid; grid-template-columns: minmax(0,15em) minmax(0,1fr) auto; gap: .5em 1em; align-items: center; }
.enq .lbl { grid-column: 1 / -1; margin: 0; }
.enq .msg { background: #f3f4f6; border-radius: .2em .8em .8em .8em; padding: .55em .75em; font-size: .9em; color: #374151; }
.enq .pill { grid-column: 3; grid-row: 2; }
.doc { display: grid; gap: .75em; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.doc-head .lbl { margin-bottom: .25em; }
.doc-no { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.05em; color: #111827; }
.doc .tbl { border: 1px solid #f3f4f6; border-radius: .5em; }
.totals { justify-self: end; display: grid; grid-template-columns: auto auto; gap: .28em 2.2em; font-size: .9em; min-width: 15em; }

.totals span { color: #6b7280; }
.totals b { text-align: right; color: #374151; font-variant-numeric: tabular-nums; }
.totals .t { color: #111827; font-weight: 700; border-top: 1px solid #e5e7eb; padding-top: .35em; font-size: 1.08em; }
.doc-actions { display: flex; justify-content: flex-end; gap: .5em; }

/* ─── Conversations ─────────────────────────────────────────────────────── */
.app-body.chat { grid-template-columns: 14em minmax(0,1fr); padding: 0; gap: 0; align-content: stretch; }
.c-list { background: #fff; border-right: 1px solid #f1f2f4; }
.c-item { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .6em; align-items: center; padding: .72em .85em; border-bottom: 1px solid #f6f7f8; }
.c-item.on { background: #f0fdf4; box-shadow: inset .2em 0 0 #16a34a; }
.c-t { min-width: 0; }
.c-t b { display: block; color: #111827; font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-t small { display: block; color: #6b7280; font-size: .78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-item em { align-self: start; font-style: normal; font-size: .72em; color: #9ca3af; }
.c-item i { position: absolute; right: .85em; bottom: .7em; min-width: 1.55em; height: 1.55em; padding: 0 .35em; border-radius: 999px; background: #16a34a; color: #fff; font-style: normal; font-size: .68em; font-weight: 600; display: grid; place-items: center; }
.c-pane { display: flex; flex-direction: column; min-width: 0; background: #f4f1ea; }
.c-head { display: flex; align-items: center; gap: .6em; background: #fff; padding: .65em 1em; border-bottom: 1px solid #f1f2f4; }
.c-head .c-t { flex: 0 1 auto; }
.bot-on { margin-left: auto; display: inline-flex; align-items: center; gap: .4em; font-size: .76em; font-weight: 600; color: #15803d; background: #dcfce7; padding: .28em .7em; border-radius: 999px; white-space: nowrap; }
.bot-on i { width: .5em; height: .5em; border-radius: 50%; background: #16a34a; animation: pulse2 1.4s infinite; }
.c-msgs { flex: 1; display: flex; flex-direction: column; gap: .5em; padding: 1em 1.1em; }
.bub { max-width: 76%; padding: .55em .8em; border-radius: .8em; font-size: .9em; line-height: 1.42; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.bub.in { align-self: flex-start; background: #fff; border-top-left-radius: .2em; color: #1f2937; }
.bub.out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: .2em; color: #14532d; }
.bub b { color: inherit; }
.evt { align-self: center; font-size: .76em; font-weight: 600; color: #15803d; background: #fff; border: 1px solid #bbf7d0; padding: .3em .85em; border-radius: 999px; }
.c-input { display: flex; align-items: center; gap: .5em; margin: 0 .8em .8em; padding: .5em .5em .5em 1em; background: #fff; border-radius: 999px; color: #9ca3af; font-size: .88em; }
.send { margin-left: auto; width: 2.1em; height: 2.1em; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; }
.send .ic { width: 1em; height: 1em; }

/* ─── Order ─────────────────────────────────────────────────────────────── */
.o-head { display: flex; align-items: center; gap: .7em; flex-wrap: wrap; }
.o-title { font-size: 1.08em; color: #4b5563; }
.o-title b { color: #111827; }
.o-pi { margin-left: auto; font-size: .84em; color: #6b7280; }
.o-pi b { color: #111827; }
.o-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .85em; align-items: start; }
.o-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: .5em 0; border-bottom: 1px dashed #eceef1; font-size: .9em; }
.o-line small { color: #9ca3af; margin-left: .2em; }
.o-line b { font-variant-numeric: tabular-nums; color: #111827; white-space: nowrap; }
.o-line.mute { color: #6b7280; }
.o-line.mute b { color: #6b7280; font-weight: 500; }
.o-line.total { border-bottom: 0; font-weight: 700; font-size: .98em; color: #111827; padding-top: .7em; }
.o-line.total b { color: #15803d; font-weight: 700; }
.inst { display: grid; gap: .5em; }
.inst-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .65em; align-items: center; padding: .55em .7em; border: 1px solid #f1f2f4; border-radius: .6em; }
.inst-row > b { font-size: .9em; font-variant-numeric: tabular-nums; color: #111827; }
.inst-dot { width: 1.5em; height: 1.5em; border-radius: 50%; border: 1.5px solid #d1d5db; display: grid; place-items: center; font-size: .78em; color: #fff; font-weight: 700; }
.inst-row.done { background: #f0fdf4; border-color: #bbf7d0; }
.inst-row.done .inst-dot { background: #16a34a; border-color: #16a34a; }
.inst-t b { display: block; font-size: .86em; color: #111827; }
.inst-t small { display: block; font-size: .76em; color: #6b7280; }
.progress { height: .45em; margin: .9em 0 .5em; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; width: var(--p); background: #16a34a; border-radius: inherit; }
.o-foot { display: flex; justify-content: space-between; gap: .5em; font-size: .8em; color: #6b7280; }
.o-foot b { color: #111827; }

/* ─── Job card ──────────────────────────────────────────────────────────── */
.jc-strip { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .4em; }
.jc-strip span { position: relative; padding-top: 1em; font-size: .74em; color: #9ca3af; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-strip span::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: .5em; border-radius: 999px; background: #e5e7eb; transition: background .5s; }
.jc-strip span.d { color: #15803d; }
.jc-strip span.d::before { background: #22c55e; }
.jc-strip span.c { color: #b45309; font-weight: 600; }
.jc-strip span.c::before { background: #fbbf24; animation: stagePulse 1.6s ease-in-out infinite; }
@keyframes stagePulse { 50% { opacity: .45; } }
.jc-hist ul { display: grid; gap: .75em; }
.jc-hist li { display: flex; gap: .65em; font-size: .88em; color: #374151; }
.jc-hist li > i { width: .7em; height: .7em; border-radius: 50%; margin-top: .3em; flex-shrink: 0; background: #22c55e; }
.jc-hist li > i.c { background: #fbbf24; box-shadow: 0 0 0 .22em #fef3c7; }
.jc-hist li b { color: #111827; }
.jc-hist li small { display: block; color: #6b7280; font-size: .88em; }
.checks { display: grid; gap: .42em; margin-bottom: .85em; }
.checks li { display: flex; align-items: center; gap: .55em; font-size: .88em; color: #6b7280; }
.checks li::before { content: ""; width: 1.1em; height: 1.1em; flex-shrink: 0; border: 1.5px solid #d1d5db; border-radius: .28em; }
.checks li.ok { color: #111827; }
.checks li.ok::before { border-color: #16a34a; background: #16a34a no-repeat center / 75% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.disp dl { margin: 0; display: grid; gap: .5em; }
.disp dl > div { display: flex; justify-content: space-between; gap: 1em; padding-bottom: .5em; border-bottom: 1px dashed #eceef1; font-size: .88em; }
.disp dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.disp dt { color: #6b7280; white-space: nowrap; }
.disp dd { margin: 0; color: #111827; font-weight: 600; text-align: right; }
.sign { display: grid; gap: .6em; margin-bottom: .9em; }
.sign > div { display: flex; align-items: center; gap: .6em; font-size: .88em; }
.sg { width: 1.8em; height: 1.8em; border-radius: 50%; background: #dcfce7; color: #15803d; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.sign b { display: block; color: #111827; }
.sign small { display: block; color: #6b7280; font-size: .85em; }

/* ─── Small cards (no app chrome) ───────────────────────────────────────── */
.ui.mini { background: #f9fafb; }
.mini-body { font-size: 2.25cqw; display: grid; gap: .8em; padding: 1.2em; }
.sum .who { background: #fff; border: 1px solid #eef0f2; border-radius: .75em; padding: .7em .8em; }
.sum .who .pill { margin-left: auto; }
.ai-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: .75em; padding: .8em 1em; }
.ai-box ul { display: grid; gap: .45em; }
.ai-box li { font-size: .92em; color: #374151; display: grid; grid-template-columns: 3.6em minmax(0,1fr); }
.ai-box li b { color: #15803d; }
.reply { display: grid; gap: .5em; background: #fff; border: 1px solid #eef0f2; border-radius: .75em; padding: .8em 1em; }
.reply .lbl { margin: 0; }
.reply .bub { max-width: 100%; }

.snap { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: start; }
.paper { position: relative; overflow: hidden; background: #fffdf6; border: 1px solid #e7e2d3; border-radius: .3em; padding: 1em .9em 1.2em; margin: .4em .2em 0; transform: rotate(-2.5deg); box-shadow: 0 .9em 1.6em -.8em rgba(0,0,0,.35); font-family: 'Courier New', ui-monospace, monospace; color: #44403c; }
.p-title { text-align: center; font-size: .8em; font-weight: 700; letter-spacing: .08em; padding-bottom: .45em; margin-bottom: .55em; border-bottom: 1px solid #d6d3d1; }
.p-from { font-size: .82em; font-weight: 700; }
.p-meta { font-size: .7em; color: #78716c; margin-bottom: .8em; }
.p-lines { display: grid; gap: .55em; }
.p-lines i { display: block; height: .42em; border-radius: .2em; background: #e7e5e4; }
.p-lines i:nth-child(1) { width: 92%; } .p-lines i:nth-child(2) { width: 78%; } .p-lines i:nth-child(3) { width: 86%; } .p-lines i:nth-child(4) { width: 60%; } .p-lines i:nth-child(5) { width: 40%; margin-left: auto; }
.scan { position: absolute; left: 0; right: 0; top: -3em; height: 3em; background: linear-gradient(rgba(22,163,74,0), rgba(22,163,74,.22)); border-bottom: 2px solid #16a34a; animation: scan 2.8s ease-in-out infinite; }
@keyframes scan { 0% { top: -3em; } 65%, 100% { top: 100%; } }
.fields { display: grid; gap: .38em; }
.fields > div { display: grid; grid-template-columns: 5.6em minmax(0,1fr) auto; gap: .5em; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: .5em; padding: .42em .6em; font-size: .82em; }
.fields > div span { color: #6b7280; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .88em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fields > div b { color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fields > div i { font-style: normal; font-weight: 700; color: #16a34a; }
.fields > .btn-g { margin-top: .35em; }


/* ─── Production job card ───────────────────────────────────────────────── */
.pr-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
.mats { display: grid; }
.mats li { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .8em; align-items: center; padding: .45em 0; border-bottom: 1px dashed #eceef1; font-size: .88em; }
.mats li:last-child { border-bottom: 0; }
.mats b { display: block; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mats small { display: block; color: #9ca3af; font-size: .78em; }
.mats em { font-style: normal; color: #374151; font-variant-numeric: tabular-nums; }
.mats i { font-style: normal; width: 1.5em; height: 1.5em; border-radius: 50%; background: #dcfce7; color: #15803d; display: grid; place-items: center; font-size: .8em; font-weight: 700; }
.serials { display: grid; gap: .45em; }
.serials > div { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .5em .7em; border: 1px solid #eef0f2; border-radius: .55em; background: #f9fafb; font-size: .9em; }
.serials .mono { color: #111827; }
.ui .lbl-gap { margin-top: 1em; }
.appr { display: flex; align-items: center; gap: .35em; font-size: .78em; font-weight: 600; flex-wrap: wrap; }
.appr span { padding: .3em .6em; border-radius: 999px; white-space: nowrap; }
.appr .ok { background: #dcfce7; color: #15803d; }
.appr .now { background: #111827; color: #fff; }
.appr i { width: .9em; height: 1px; background: #d1d5db; }
.ai-alert { display: flex; align-items: center; gap: .7em; background: #fffbeb; border: 1px solid #fde68a; border-radius: .75em; padding: .65em .8em .65em 1em; font-size: .88em; color: #78350f; }
.ai-alert > .ic { color: #d97706; }
.ai-alert b { color: #78350f; }
.ai-alert .btn-g { margin-left: auto; }

/* ─── Machine history ───────────────────────────────────────────────────── */
.mh-head { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.mh-head .who { flex: 1; }
.mh-head .av .ic { width: 1.1em; height: 1.1em; }
.mh-grid { grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr); }
.tl { display: grid; }
.tl li { position: relative; display: flex; gap: .75em; padding-bottom: .85em; font-size: .88em; color: #374151; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: .32em; top: 1em; bottom: -.1em; width: 2px; background: #e5e7eb; }
.tl li:last-child::before { display: none; }
.tl li > i { position: relative; z-index: 1; width: .75em; height: .75em; margin-top: .3em; border-radius: 50%; flex-shrink: 0; background: #22c55e; }
.tl li.c > i { background: #fbbf24; box-shadow: 0 0 0 .22em #fef3c7; }
.tl li.up > i { background: #fff; border: 2px dashed #cbd5e1; }
.tl li.up { color: #6b7280; }
.tl b { color: #111827; }
.tl small { display: block; color: #6b7280; font-size: .88em; }
.amc dl { margin: 0 0 .8em; display: grid; gap: .5em; }
.amc dl > div { display: flex; justify-content: space-between; gap: .8em; padding-bottom: .5em; border-bottom: 1px dashed #eceef1; font-size: .88em; }
.amc dt { color: #6b7280; white-space: nowrap; }
.amc dd { margin: 0; color: #111827; font-weight: 600; text-align: right; }
.amc .sent { display: flex; gap: .4em; align-items: flex-start; font-size: .8em; color: #15803d; background: #f0fdf4; border-radius: .5em; padding: .5em .6em; margin-bottom: .8em; }

/* ─── Voice note (summary card) ─────────────────────────────────────────── */
.voice { display: flex; align-items: center; gap: .7em; background: #fff; border: 1px solid #eef0f2; border-radius: .75em; padding: .6em .8em; }
.mic-dot { width: 2.2em; height: 2.2em; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 0 0 .3em rgba(22,163,74,.15); }
.mic-dot .ic { width: 1em; height: 1em; }
.wave { display: flex; align-items: center; gap: .18em; height: 1.8em; }
.wave i { width: .22em; border-radius: 999px; background: #86efac; height: 40%; animation: wave 1.1s ease-in-out infinite; }
.wave i:nth-child(3n) { animation-delay: -.3s; } .wave i:nth-child(3n+1) { animation-delay: -.6s; } .wave i:nth-child(4n) { animation-delay: -.85s; }
@keyframes wave { 50% { height: 100%; background: #16a34a; } }
.voice-t { margin-left: auto; text-align: right; }
.voice-t b { display: block; color: #111827; font-size: .9em; }
.voice-t small { display: block; color: #6b7280; font-size: .78em; }

/* ─── Motion: rows and messages arrive in order once a screen is in view ── */
.js .ui .seq > * { opacity: 0; transform: translateY(.5em); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 200ms + 300ms); }
.js .ui.play .seq > * { opacity: 1; transform: none; }
.js .ui .bars i { transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js .ui.play .bars i { transform: none; }
.js .ui .progress i { width: 0; transition: width 1.2s var(--ease) 1s; }
.js .ui.play .progress i { width: var(--p); }
.ui.play .row-new td { animation: rowFlash 2.6s ease-out 1.2s both; }
@keyframes rowFlash { 0% { background: #fff; } 25% { background: #bbf7d0; } 100% { background: #f0fdf4; } }

/* A real screenshot, when one exists, replaces the recreated screen */
.ui > img { display: block; width: 100%; height: auto; }
.ui.has-img .ui-screen, .ui.has-img .mini-body { display: none; }

/* ─── Narrow screens: drop the sidebar and the less important columns ──── */
@container ui (max-width: 760px) {
  [data-shot="leads"] .tbl :is(th, td):nth-child(6),
  [data-shot="stock"] .tbl :is(th, td):nth-child(3) { display: none; }
}
@container ui (max-width: 540px) {
  .ui-screen { grid-template-columns: minmax(0,1fr); font-size: 2.95cqw; min-height: 0; }
  .ui-side { display: none; }
  .o-grid, .qgen .enq, .pr-grid, .mh-grid { grid-template-columns: minmax(0,1fr); }
  .ai-alert { flex-wrap: wrap; }
  .enq .pill { grid-column: auto; grid-row: auto; justify-self: start; }
  .app-body.chat { grid-template-columns: minmax(0,1fr); }
  .c-list { display: none; }
  .c-head .pill { display: none; }
  .kpis.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .a-row { grid-template-columns: auto minmax(0,1fr) auto; }
  .a-row .strip { display: none; }
  .toolbar .chip:not(.on), .toolbar .tab:not(.on) { display: none; }
  .o-pi { margin-left: 0; width: 100%; }
  [data-shot="leads"] .tbl :is(th, td):is(:nth-child(3), :nth-child(4)),
  [data-shot="quotations"] .tbl :is(th, td):is(:nth-child(1), :nth-child(5)),
  [data-shot="quotation-generator"] .tbl :is(th, td):is(:nth-child(1), :nth-child(4)),
  [data-shot="stock"] .tbl :is(th, td):nth-child(1) { display: none; }
  .mini-body { font-size: 3.1cqw; padding: 1em; }
  .snap { grid-template-columns: minmax(0,1fr); }
  .paper { max-width: 70%; }
}