/* Eigen CSS van de app, na /app.css en /theme.css geladen (ook op de core-pagina's): de popup Vraag het (#27, #30),
   letterlijk uit public/app.css van 0.15.1 (r.253-290). */
/* Vraag het (#27) */
.assist-thread { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.75rem 0; }
.assist-msg { max-width: 70ch; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); }
.assist-msg.user { align-self: flex-end; background: var(--accent-tint); border-color: transparent; }
.assist-text p { margin: 0 0 0.4rem; }
.assist-text p:last-child { margin-bottom: 0; }
.assist-text ul { margin: 0.2rem 0 0.4rem; padding-left: 1.2rem; }
.assist-sources { margin-top: 0.4rem; }
.assist-form { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.assist-form textarea { flex: 1 1 16rem; min-height: 2.6rem; padding: 0.5rem 0.65rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); resize: vertical; font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Vraag het als popup (#30) */
.assist-launcher { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 25; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 20px oklch(20% 0.02 260 / 0.25); cursor: pointer; display: grid; place-items: center; }
.assist-launcher svg { width: 1.5rem; height: 1.5rem; }
.assist-launcher:focus-visible { outline: 3px solid var(--accent-tint); outline-offset: 2px; }
body.has-assist .toast { bottom: 5.25rem; }
.assist-popup { position: fixed; right: 1.25rem; bottom: 5.25rem; z-index: 35; width: min(420px, calc(100vw - 2.5rem)); height: min(620px, calc(100vh - 7rem)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 40px oklch(20% 0.02 260 / 0.25); }
.assist-popup[hidden] { display: none; }
.assist-popup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border); }
.assist-popup-actions { display: flex; gap: 0.35rem; align-items: center; }
.assist-close { border: 0; background: none; font-size: 1.5rem; line-height: 1; padding: 0 0.3rem; cursor: pointer; color: var(--ink); }
.assist-popup-body { flex: 1; overflow-y: auto; padding: 0.75rem 0.9rem; }
.assist-popup-body .assist-thread { margin: 0.5rem 0 0; }
.assist-popup .assist-msg { max-width: 100%; }
.assist-examples { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.assist-examples[hidden] { display: none; }
.assist-product { margin-top: 0.5rem; }
.assist-popup .assist-form { padding: 0.6rem 0.9rem 0.8rem; border-top: 1px solid var(--border); flex-wrap: nowrap; }
.assist-popup .assist-form textarea { flex: 1 1 auto; }
@media (max-width: 880px) {
  .assist-launcher { right: 0.9rem; bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  body.has-assist .toast { bottom: calc(8.6rem + env(safe-area-inset-bottom)); }
  .assist-popup { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; padding-bottom: env(safe-area-inset-bottom); }
  body.assist-open .assist-launcher { display: none; }
  body.assist-open { overflow: hidden; }
}
.assist-launcher:hover { background: var(--accent-hover); }

/* #49: dialoog "Verzendsoort" bij de bulkactie in de catalogus. */
dialog.shipping-dialog { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; min-width: min(360px, 90vw); background: var(--surface); color: var(--ink); }
dialog.shipping-dialog::backdrop { background: rgb(0 0 0 / 0.3); }
dialog.shipping-dialog h2 { margin: 0 0 0.3rem; }
dialog.shipping-dialog select { width: 100%; }

/* Geen verspringend menu bij laden of verversen. renderShell (core) bouwt de zijbalk pas na /api/me en /api/shell; tot
   dan stond de pagina zonder menu en sprong alles daarna naar rechts, en kreeg de titel pas dan zijn icoon. Nu houden we
   de ruimte van de zijbalk vrij (zelfde breedte, achtergrond en rand) en tonen we de inhoud pas als het menu er is, zodat
   menu, titel en inhoud in één keer op hun plek staan. Komt het menu niet, dan verschijnt de inhoud na 1,5 s toch. */
@keyframes shell-wacht-op-menu { to { visibility: visible; } }
.app-shell:not(:has(> .sidebar)) > .app-content { visibility: hidden; animation: shell-wacht-op-menu 0s 1.5s forwards; }
@media (min-width: 881px) {
  .app-shell:not(:has(> .sidebar))::before { content: ''; box-sizing: border-box; width: 232px; flex-shrink: 0; align-self: stretch; min-height: 100vh; background: var(--surface); border-right: 1px solid var(--border); }
}