that am.js fills: a card with the conversation, its steps, proposals with
Confirm and Cancel, and a composer like Edit with AI's (one box, a round Send or Stop in its corner) */
.ds-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 320px; height: var(--ds-chat-height, 480px); max-height: 80vh; padding: 0; overflow: hidden; }
/* inside another card (a page that wrapped it): flat, no card in a card */
.card .ds-chat.card { border: 0; box-shadow: none; border-radius: 0; background: transparent; margin-top: 8px; }
.card .ds-chat .ds-chat-head { padding-left: 0; padding-right: 0; }
.card .ds-chat .ds-chat-log { padding-left: 0; padding-right: 0; }
.card .ds-chat .ds-chat-form { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.ds-chat-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--border); }
.ds-chat-head .card-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-chat-log { overflow-y: auto; padding: 14px 16px; display: grid; gap: 10px; align-content: start; overscroll-behavior: contain; }
.ds-chat-msg { max-width: 100%; padding: 8px 12px; border-radius: 10px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ds-chat-msg > :first-child { margin-top: 0; }
.ds-chat-msg > :last-child { margin-bottom: 0; }
.ds-chat-msg p, .ds-chat-msg ul, .ds-chat-msg ol { margin: 0 0 8px; }
.ds-chat-msg ul, .ds-chat-msg ol { padding-left: 20px; }
.ds-chat-msg code { font-size: 13px; padding: 1px 4px; border-radius: 4px; background: var(--card-bg); }
.ds-chat-msg .table-wrap { margin: 4px 0 8px; max-width: 100%; }
.ds-chat-msg table { border-collapse: collapse; font-size: 13px; }
.ds-chat-msg th, .ds-chat-msg td { padding: 4px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.ds-chat-msg.me { justify-self: end; max-width: 88%; white-space: pre-wrap; background: var(--q-accent-soft); color: var(--heading-color); }
.ds-chat-msg.ai { justify-self: start; background: var(--surface2); color: var(--body-color); }
.ds-chat-msg.ai:empty::after { content: "…"; color: var(--muted-color); }
.ds-chat-step { justify-self: start; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-color); }
.ds-chat-step::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--q-accent); }
.ds-chat-err { justify-self: start; font-size: 13px; color: var(--danger); }
.ds-chat-proposal { justify-self: stretch; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border-strong); border-left: 3px solid var(--q-accent); border-radius: 10px; background: var(--card-bg); font-size: 14px; line-height: 1.5; }
.ds-chat-proposal-label { font-size: 12px; font-weight: 600; color: var(--muted-color); text-transform: uppercase; letter-spacing: .04em; }
.ds-chat-proposal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-chat-proposal.answered .ds-chat-proposal-actions { display: none; }
.ds-chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-chat-suggest button { padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--card-bg); color: var(--body-color); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.ds-chat-suggest button:hover { border-color: var(--q-accent); color: var(--q-accent); }
.ds-chat-form { padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.ds-chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--input-border); border-radius: 14px; background: var(--input-bg, var(--card-bg)); transition: border-color .15s, box-shadow .15s; }
.ds-chat-composer:focus-within { border-color: var(--q-accent); box-shadow: 0 0 0 3px var(--q-accent-soft); }
.ds-chat-composer textarea { display: block; width: 100%; min-height: 24px; max-height: 30vh; margin: 0; padding: 5px 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--body-color); font: inherit; font-size: 14px; line-height: 1.5; }
.ds-chat-composer textarea:focus, .ds-chat-composer textarea:focus-visible { border: 0; outline: 0; box-shadow: none; }
.ds-chat-composer textarea::placeholder { color: var(--faint-color, var(--muted-color)); }
.ds-chat-go { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--q-accent); color: var(--q-brand-fg, #fff); cursor: pointer; transition: background .15s; }
.ds-chat-go svg { width: 16px; height: 16px; }
.ds-chat-go:disabled { background: var(--hairline); color: var(--muted-color); cursor: default; }
.ds-chat-go.stop { background: var(--heading-color); color: var(--card-bg); }
.ds-chat [hidden] { display: none; }
.ds-chat-off { padding: 24px 16px; color: var(--muted-color); font-size: 14px; text-align: center; }
@media (max-width: 1100px) {
.ds-grid-3, .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a table's secondary column (
, its | s too): only where there is room, so a tablet does not
scroll sideways; what it held must be one click away (the row's own page) */
.ds-table .wide-only { display: none; }
}
@media (max-width: 768px) {
.ds-content, .ds-page { padding: 20px 16px 32px; }
.ds-hero { margin: -20px -16px 20px; padding: 20px 16px; }
.ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: minmax(0, 1fr); }
.ds-chat { height: var(--ds-chat-height, 70vh); }
.ds-chat-msg.me { max-width: 94%; }
.ds-kpis, .ds-kpis[style*="--kpi-n"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { padding: 16px; }
.ds-footer, footer.ds-version { padding: 16px; }
}
/* ── Phone layer (≤640px only; the desktop layout is unchanged) ── */
.phone-only-ds { display: none; }
@media (max-width: 640px) {
.ds-page-head { align-items: stretch; }
.ds-page-head > :first-child, .card-head > :first-child { flex: 1 1 100%; }
.ds-page-head h1, .ds-page-title { font-size: 22px; }
.ds-page-actions, .card-tools { flex: 1 1 100%; }
.ds-toolbar > .ds-search, .ds-toolbar > input[type=search], .ds-toolbar > .input, .card-tools > .ds-search { flex: 1 1 100%; width: 100%; }
.ds-toolbar > select, .ds-toolbar > .select { flex: 1 1 140px; }
.ds-kpi-value { font-size: 22px; }
.ds-kpis > .ds-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
.btn, .ds-tab, .ds-tabs a, .ds-chip,
.input, .select, input[type=text], input[type=password], input[type=number], input[type=email], input[type=search], input[type=tel], input[type=url],
input[type=date], input[type=time], input:not([type]), select { min-height: 40px; }
.input, .select, select:not([multiple]):not([size]), input[type=text], input[type=password], input[type=number], input[type=email], input[type=search],
input[type=tel], input[type=url], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input:not([type]) { height: 40px; }
.input, .select, .textarea, input, select, textarea { font-size: 16px; } /* no zoom on iOS */
.btn-icon { width: 40px; }
.ds-icon-btn, .ds-theme-toggle { width: 40px; height: 40px; }
.ds-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-stat:nth-child(odd) { border-left: 0; margin-left: 0; }
.ds-stat:nth-child(n+3) { border-top: 1px solid var(--hairline); }
.ds-modal-actions, .modal footer, dialog footer, dialog menu { margin: 20px -16px -16px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); bottom: calc(-1 * max(16px, env(safe-area-inset-bottom))); }
dialog, .ds-modal, .modal { width: 100vw; max-width: 100vw; max-height: 100dvh; min-height: 100dvh; margin: 0; border-radius: 0; border: 0;
padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.ds-modal-overlay, .modal-backdrop { padding: 0; }
.ds-modal-actions .btn, .modal footer .btn, dialog footer .btn, dialog menu .btn { flex: 1 1 auto; }
.ds-toasts { right: 8px; left: 8px; bottom: 8px; width: auto; }
.stack-sm { grid-template-columns: minmax(0, 1fr) !important; }
.tiles-sm { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.phone-only-ds { display: initial; }
.desk-only { display: none !important; }
.ds-sched { --sched-gutter: 48px; --sched-min: 132px; }
.ds-cal-head span { padding: 6px 2px; text-align: center; font-size: 11px; }
.ds-cal-day { min-height: 52px; padding: 4px 2px; align-items: center; cursor: pointer; }
.ds-cal-day .ds-cal-event, .ds-cal-day .ds-cal-more { display: none; }
.ds-cal-dots { display: flex; }
.ds-cal-num { align-self: center; }
.ds-cal-agenda.ds-agenda { display: grid; }
.ds-dl, .ds-dl.cols-2 { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ds-dl dd + dt { margin-top: 10px; }
.ds-board { grid-auto-columns: minmax(82vw, 1fr); }
.ds-bars li { grid-template-columns: minmax(70px, 35%) 1fr auto; gap: 8px; }
.ds-agenda-item { grid-template-columns: 82px 1fr auto; gap: 2px 10px; }
.ds-agenda-time { font-size: 12px; }
/* five steps or more do not fit their labels: only the current step keeps its label (the others their number or tick;
screen readers still read every label) */
.ds-steps:has(> li:nth-child(5)) > li:not(.current) { font-size: 0; }
.ds-steps:has(> li:nth-child(5)) > li.current { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
.ds-sidebar, .ds-mobilebar, .ds-live-banner, .ds-toasts, .btn, .ds-tabs { display: none !important; }
.ds-shell { display: block; }
body { background: #fff; color: #000; }
.card, .ds-kpi, .ds-chart, .ds-cal, .ds-board-col { break-inside: avoid; }
.ds-sched { max-height: none; overflow: visible; }
.ds-sched-slot, .ds-dropdown, .ds-cal-agenda { display: none !important; }
}
/* (these were after the layer by mistake: outside it they beat every layered rule, whatever its specificity) */
.ds-table tr[hidden], [data-limit] > [hidden] { display: none !important; }
/* a long page's sections (amds.jumpNav): chips that stay at the top while the page scrolls */
.ds-jump { position: sticky; top: 0; z-index: 30; margin: -4px -4px 16px; padding: 8px 4px; background: var(--bg); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ds-jump::-webkit-scrollbar { display: none; }
.ds-jump .ds-chip { flex: 0 0 auto; }
@media (max-width: 1100px) { .ds-jump { top: 52px; } } /* below the mobile bar */
/* fine print one click away: File rules… ![]() ): appmanor-icon.svg drawn opaque, so it looks the same
on any background: a tile in the buttons' colour (each theme's own; it follows the design and an app's accent) with
the house in white, two of its squares at 73% (what the icon's cut-outs show over a white page); outside
the layers, so a design's own .ds-mark (another shape or colour) leaves it as it is */
.ds-mark.ds-logo, .ds-mark:has(> img[src$="appmanor-icon.svg"], > img[src$="favicon.svg"]) { border-radius: 22%; box-shadow: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23fff'%3E%3Cpath d='M12 30 L32 13 L52 30' fill='none' stroke='%23fff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='20' y='32' width='10' height='10' rx='2.5'/%3E%3Crect x='34' y='45' width='10' height='10' rx='2.5'/%3E%3Crect x='34' y='32' width='10' height='10' rx='2.5' fill-opacity='.733'/%3E%3Crect x='20' y='45' width='10' height='10' rx='2.5' fill-opacity='.733'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat, var(--q-accent); }
.ds-mark:has(> img[src$="appmanor-icon.svg"], > img[src$="favicon.svg"]) > img { visibility: hidden; }
/* the tenant's own brand (Administration → Look; outside the layers, like the mark above, so every design shows it as
uploaded). a.ds-brand.ds-brand-logo: the logo alone, one image per theme (.ds-brand-light, .ds-brand-dark), 32px high
and as wide as it is up to the brand's width, left aligned; its .ds-mark and .ds-brand-name stay for the phone's bar
(am-ds.js copies them). .ds-mark.ds-mark-fav: the favicon in the square, drawn as it is (no tile behind it). */
.ds-brand.ds-brand-logo > .ds-mark, .ds-brand.ds-brand-logo > .ds-brand-name { display: none; }
.ds-brand.ds-brand-logo { min-width: 0; }
.ds-logo-img { display: block; height: 32px; width: auto; max-width: min(100%, 180px); object-fit: contain; object-position: left center; }
.ds-logo-img.ds-brand-dark, [data-theme="dark"] .ds-logo-img.ds-brand-light { display: none; }
[data-theme="dark"] .ds-logo-img.ds-brand-dark { display: block; }
.ds-mark.ds-mark-fav { background: transparent; box-shadow: none; }
.ds-mark.ds-mark-fav > img { object-fit: contain; }
|