@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap');
/* ─── Design tokens (FoodForecast brand) ───────────────────────────────── */
:root {
  --ff-navy:        #1E4150;  /* Meeresblau */
  --ff-teal:        #326973;  /* Seegrün */
  --ff-teal-mid:    #4A6975;
  --ff-teal-soft:   #D9CDBC;  /* Rahmen auf Creme */
  --ff-mint:        #D6EEE7;  /* Minzblau soft */
  --ff-mint-soft:   #F9F6F3;  /* Standard-Hintergrund */
  --ff-cream:       #F2EBE3;  /* Teiggrau */
  --ff-coral:       #ED8578;  /* Lachsrot */
  --ff-coral-dark:  #D96A5B;
  --ff-coral-soft:  #F8C8C0;
  --ff-line:        #E8DFD3;
  /* Tabellen-Rahmen: Sand auf dem Teiggrau-Canvas (Redesign 2026-09) */
  --ff-table-border: #D9CDBC;
  --ff-table-line:   #EFE7DC;
  --ff-cream-50:    #FAF6F0;  /* Karten-/Tabellenkopf auf Creme */
  --ff-cream-200:   #E8DFD3;  /* Hover auf Creme */
  --ff-muted-2:     #768E97;  /* Meeresblau 60 % — Captions */
  --ff-ink:         #1E4150;
  --ff-muted:       #4A6975;
  --ff-shadow-sm:   0 1px 2px rgba(30,65,80,.06), 0 1px 3px rgba(30,65,80,.04);
  --ff-shadow-md:   0 4px 12px rgba(30,65,80,.08), 0 2px 4px rgba(30,65,80,.04);
  /* App-Canvas: Teiggrau (Redesign 2026-09 „Arti Chat 1") */
  --ff-bg:          #F2EBE3;
  --ff-bg-bottom:   #F2EBE3;  /* unteres Ende des Composer-Fades */
  --ff-bg-gradient: var(--ff-bg);
}

* { box-sizing: border-box; }

/* ─── Standalone shell: the panel IS the app, full viewport ──────────────── */
html, body { height: 100%; }
body.arti-standalone {
  margin: 0;
  min-height: 100vh;
  background: var(--ff-mint-soft);
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ff-ink);
}

/* ─── Panel — fills the whole window ─────────────────────────────────── */
#arti-panel {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ff-mint-soft);
  overflow: hidden;
}

/* ─── Pill buttons (shared by editor, schedules, widgets) ───────────────── */
.arti-newchat-form { margin: 0; }
.arti-pillbtn {
  border: 1px solid var(--ff-teal-soft);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  color: var(--ff-teal);
  border-radius: 9999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(20, 48, 59, 0.06);
  transition: border-color .12s, color .12s, background .12s;
}
.arti-pillbtn:hover {
  border-color: var(--ff-coral);
  color: var(--ff-coral-dark);
  background: var(--ff-coral-soft);
}
.arti-pillbtn-primary {
  background: var(--ff-coral);
  border-color: var(--ff-coral);
  color: #fff;
}
.arti-pillbtn-primary:hover {
  background: var(--ff-coral-dark);
  border-color: var(--ff-coral-dark);
  color: #fff;
}

/* ─── Handbook source editor (/editor) ───────────────────────────────── */
.arti-editor {
  width: 100%;
  max-width: 1040px;
  align-self: flex-start;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.arti-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.arti-editor-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ff-coral); }
.arti-editor-head h1 { margin: 2px 0 0; font-size: 20px; color: var(--ff-navy); font-family: ui-monospace, Menlo, monospace; }
.arti-editor-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arti-editor-actions a, .arti-editor-actions form { text-decoration: none; }
.arti-editor-actions form { margin: 0; }
.arti-editor-user { font-size: 13px; color: var(--ff-muted); }
.arti-editor-login { background: #fff; border: 1px solid var(--ff-teal-soft); border-radius: 14px; padding: 18px 20px; font-size: 14px; line-height: 1.5; max-width: 640px; }
.arti-editor-login p { margin: 0 0 12px; }
.arti-editor-muted { color: var(--ff-muted); font-size: 13px; }
.arti-editor-body { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.arti-editor-tree {
  background: #fff; border: 1px solid var(--ff-teal-soft); border-radius: 12px;
  padding: 6px; max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
}
.arti-editor-file {
  display: block; padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4;
  font-family: ui-monospace, Menlo, monospace; color: var(--ff-ink); text-decoration: none;
  white-space: normal; overflow-wrap: anywhere;   /* full path, wraps instead of truncating */
}
.arti-editor-file:hover { background: var(--ff-mint); }
.arti-editor-file.is-active { background: var(--ff-teal); color: #fff; }

/* Folder tree */
.arti-tree-dir {
  cursor: pointer;
  list-style: none;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ff-teal);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.arti-tree-dir::-webkit-details-marker { display: none; }
.arti-tree-dir::before {
  content: "▸";
  font-size: 10px;
  color: var(--ff-muted);
  transition: transform .12s;
}
details[open] > .arti-tree-dir::before { transform: rotate(90deg); }
.arti-tree-dir:hover { background: var(--ff-mint); }
.arti-tree-children {
  margin-left: 11px;
  padding-left: 8px;
  border-left: 1px solid var(--ff-teal-soft);
}
.arti-editor-pane { min-width: 0; }
.arti-editor-form { display: flex; flex-direction: column; gap: 10px; }
.arti-editor-path { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--ff-teal); }
.arti-editor-text {
  width: 100%; min-height: 60vh; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.55;
  padding: 14px; border: 1px solid var(--ff-teal-soft); border-radius: 12px; background: #fff;
  color: var(--ff-ink); outline: none; tab-size: 2;
}
.arti-editor-text:focus { border-color: var(--ff-teal-mid); box-shadow: 0 0 0 3px rgba(47,75,82,.12); }
.arti-editor-commit { display: flex; gap: 10px; align-items: center; }
.arti-editor-msg {
  flex: 1; font: inherit; font-size: 13px; padding: 9px 12px;
  border: 1px solid var(--ff-teal-soft); border-radius: 9999px; background: #fff; outline: none;
}
.arti-editor-msg:focus { border-color: var(--ff-teal-mid); box-shadow: 0 0 0 3px rgba(47,75,82,.12); }
.arti-flash { padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; word-break: break-word; }
.arti-flash-sub { margin-top: 6px; font-size: 12.5px; color: var(--ff-muted); }
.arti-editor-flow {
  margin: 2px 0 0;
  padding: 10px 12px;
  background: var(--ff-mint);
  border: 1px solid var(--ff-teal-soft);
  border-left: 3px solid var(--ff-teal);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ff-teal);
}
.arti-editor-flow code { background: var(--ff-mint-soft); }
.arti-flash-ok { background: var(--ff-mint); border: 1px solid var(--ff-teal-soft); color: var(--ff-navy); }
.arti-flash-err { background: var(--ff-coral-soft); border: 1px solid #f2c4b9; color: #8b3a2c; }
@media (max-width: 720px) { .arti-editor-body { grid-template-columns: 1fr; } }

/* ─── Body (scroll area) + centered readable content column ───────────── */
#arti-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--ff-mint-soft);
}
.arti-content {
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#arti-messages { display: flex; flex-direction: column; gap: 4px; }

/* ─── Hero ───────────────────────────────────────────────────────────── */
.arti-hero { display: flex; justify-content: center; margin: 4px 0 10px; }
.arti-hero-logo {
  width: 48px; height: 48px;
  border-radius: 9999px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 4px 12px rgba(20, 48, 59, 0.12), 0 1px 3px rgba(20, 48, 59, 0.06);
  user-select: none; -webkit-user-drag: none;
}

/* ─── Bubbles ────────────────────────────────────────────────────────── */
.arti-bubble {
  padding: 11px 14px;
  border-radius: 16px;
  line-height: 1.5;
  font-size: 14px;
  max-width: 90%;
  word-wrap: break-word;
  white-space: pre-wrap;
  margin: 0;
}
.arti-greeting {
  background: #fff;
  color: var(--ff-navy);
  border: 1px solid var(--ff-teal-soft);
  box-shadow: 0 1px 2px rgba(20, 48, 59, 0.04);
}
.arti-greeting p { margin: 0; }

/* Tighter stacking within a turn, more room at turn boundaries. */
#arti-messages > * + .arti-bubble.arti-user,
#arti-messages > .arti-bubble.arti-user + * { margin-top: 10px; }

.arti-user {
  background: var(--ff-teal);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 5px;
  box-shadow: 0 1px 2px rgba(20, 48, 59, 0.08);
}
.arti-assistant {
  background: #fff;
  color: var(--ff-ink);
  border: 1px solid var(--ff-teal-soft);
  border-bottom-left-radius: 5px;
  white-space: normal;
  box-shadow: 0 1px 2px rgba(20, 48, 59, 0.04);
}
.arti-error {
  background: var(--ff-coral-soft);
  color: #8b3a2c;
  border: 1px solid #f2c4b9;
}

/* ─── Assistant markdown ─────────────────────────────────────────────── */
.arti-assistant p { margin: 0 0 8px; }
.arti-assistant p:last-child { margin-bottom: 0; }
.arti-assistant ul, .arti-assistant ol { margin: 6px 0; padding-left: 22px; }
.arti-assistant li { margin: 3px 0; line-height: 1.5; }
.arti-assistant li::marker { color: var(--ff-coral); }
.arti-assistant strong { font-weight: 500; color: var(--ff-navy); }
.arti-assistant em { font-style: italic; color: #374151; }
.arti-assistant a { color: var(--ff-coral-dark); text-decoration: underline; }
.arti-assistant code {
  background: var(--ff-mint);
  padding: 1px 6px;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ff-teal);
}
.arti-assistant pre {
  background: var(--ff-mint);
  padding: 10px 12px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 8px 0;
}
.arti-assistant pre code { background: none; padding: 0; }
.arti-assistant h1, .arti-assistant h2, .arti-assistant h3 { font-size: 15px; font-weight: 500; margin: 6px 0 4px; color: var(--ff-navy); }
.arti-assistant h4, .arti-assistant h5 { font-size: 14px; font-weight: 500; margin: 6px 0 4px; color: var(--ff-navy); }
.arti-assistant blockquote {
  margin: 8px 0; padding: 6px 12px;
  border-left: 3px solid var(--ff-teal); background: var(--ff-mint);
  border-radius: 6px; color: var(--ff-navy);
}

/* Tables (Redcarpet emits plain <table>) — styled like the mockup. */
.arti-assistant table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.arti-assistant th, .arti-assistant td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}
.arti-assistant th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: #6b7280;
  background: #f9fafb;
  border-bottom-color: #e5e7eb;
}
.arti-assistant tbody tr:last-child td { border-bottom: 0; }
.arti-assistant tbody tr:nth-child(even) { background: #fafafa; }

/* ─── Chips ──────────────────────────────────────────────────────────── */
#arti-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.arti-chip {
  padding: 7px 14px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid var(--ff-teal-soft);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ff-navy);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.arti-chip:hover {
  border-color: var(--ff-coral);
  color: var(--ff-coral-dark);
  background: var(--ff-coral-soft);
}
/* Distinct dark-green chip for the standardized waste-analysis skill (run_skill). */
.arti-chip-waste {
  background: #2e6b4f;
  border-color: #2e6b4f;
  color: #fff;
  font-weight: 500;
}
.arti-chip-waste:hover {
  background: #255c42;
  border-color: #255c42;
  color: #fff;
}

/* ─── Thinking indicator (inside the assistant bubble) ───────────────── */
.arti-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ff-teal);
  font-size: 14px;
}
.arti-spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ff-teal-soft);
  border-top-color: var(--ff-coral);
  animation: arti-spin 0.8s linear infinite;
}
@keyframes arti-spin { to { transform: rotate(360deg); } }
/* "Neuer Chat" transition: blank the conversation + a centered larger spinner */
.arti-newchat-loading { flex: 1; display: grid; place-items: center; min-height: 240px; padding: 40px 0; }
.arti-newchat-loading .arti-spinner { width: 30px; height: 30px; border-width: 3px; }

/* ─── Live activity status line (spinner + "what's running" + elapsed) ─── */
.arti-activity { margin: 2px 0 6px; padding: 2px 2px; }
.arti-activity-elapsed { color: var(--ff-muted); font-size: 12.5px; }
/* The answer bubble is appended empty and only shown once the first token
   arrives — so no empty grey blob sits under the status line. */
.arti-bubble:empty { display: none; }

/* ─── Composer ───────────────────────────────────────────────────────── */
#arti-composer {
  display: block;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--ff-teal-soft);
  background: var(--ff-mint-soft);
}
.arti-composer-inner {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
#arti-input {
  display: block;
  width: 100%;
  resize: none;
  padding: 14px 56px 14px 20px;
  border: 1px solid var(--ff-teal-soft);
  border-radius: 9999px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ff-ink);
  outline: none;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 48, 59, 0.04);
  transition: border-color .12s, box-shadow .12s, background .12s;
  max-height: 220px;
  overflow-y: auto;
}
#arti-input::placeholder { color: #8a9a9f; }
/* When the composer grows (e.g. a prefilled ticket), soften the pill so the
   multi-line box doesn't look like a stadium. */
#arti-input.is-multiline { border-radius: 18px; }
#arti-input:focus {
  border-color: var(--ff-teal-mid);
  box-shadow: 0 0 0 3px rgba(47, 75, 82, 0.12);
}
#arti-send {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--ff-ink);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, transform .1s, opacity .15s;
}
#arti-send:hover:not(:disabled) { background: #000; }
#arti-send:disabled { background: #c7cfd3; cursor: not-allowed; opacity: .7; }

/* ── Freshdesk ticket browser ─────────────────────────────────────────── */
.arti-ticket-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.arti-ticket-filters select, .arti-ticket-filters input {
  padding: 8px 12px; border: 1px solid var(--ff-teal-soft); border-radius: 9999px;
  font: inherit; font-size: 13px; color: var(--ff-ink); background: #fff; outline: none;
}
.arti-ticket-filters input { width: 150px; }
.arti-ticket-filters select:focus, .arti-ticket-filters input:focus {
  border-color: var(--ff-teal-mid); box-shadow: 0 0 0 3px rgba(47,75,82,.12);
}
.arti-ticket-client { font-family: ui-monospace, Menlo, monospace; }
.arti-ticket-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.arti-ticket {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: #fff; border: 1px solid var(--ff-teal-soft);
  border-radius: 12px; text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s, transform .1s;
}
.arti-ticket:hover { border-color: var(--ff-teal-mid); background: var(--ff-mint); transform: translateY(-1px); }
.arti-ticket-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.arti-ticket-subject { font-weight: 500; color: var(--ff-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arti-ticket-meta { font-size: 12px; color: var(--ff-muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.arti-ticket-status { font-weight: 500; }
.arti-ticket-status-2 { color: var(--ff-coral); }   /* Offen */
.arti-ticket-status-3 { color: #b8860b; }            /* Wartend */
.arti-ticket-status-4, .arti-ticket-status-5 { color: var(--ff-teal); } /* Gelöst/Geschlossen */
.arti-ticket-go { font-size: 13px; color: var(--ff-teal); white-space: nowrap; flex-shrink: 0; }
.arti-ticket-pager { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.arti-ticket-pager a { text-decoration: none; }

/* "In Freshdesk übernehmen" action under a ticket-chat answer */
.arti-adopt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 6px; }
.arti-adopt-btn {
  border: 0; border-radius: 9999px; padding: 8px 16px; cursor: pointer;
  background: var(--ff-coral); color: #fff; font: inherit; font-size: 13px; font-weight: 500;
  transition: background .15s, transform .1s;
}
.arti-adopt-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.arti-adopt-btn.is-done { background: var(--ff-teal); cursor: default; transform: none; }
.arti-adopt-hint { font-size: 12px; color: var(--ff-muted); }

/* Ticket message bubble: shown ticket + collapsible history */
.arti-ticket-msg-main { white-space: pre-wrap; }
.arti-ticket-history { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.25); padding-top: 8px; }
.arti-ticket-history > summary {
  cursor: pointer; font-size: 12px; font-weight: 500; opacity: .85;
  list-style: none; user-select: none;
}
.arti-ticket-history > summary::before { content: "▸ "; }
.arti-ticket-history[open] > summary::before { content: "▾ "; }
.arti-ticket-history-body {
  white-space: pre-wrap; margin-top: 8px; font-size: 13px; opacity: .92;
  max-height: 320px; overflow-y: auto;
}

/* ─── foodforecast login (agentic actions act as this user) ─────────────── */
.arti-login { position: relative; }
.arti-login summary { list-style: none; display: inline-block; }
.arti-login summary::-webkit-details-marker { display: none; }
.arti-login-authed { border-color: #9dc3ae; color: #2e6b4f; background: #eaf6ef; }
.arti-login-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: 300px;
  background: #fff;
  border: 1px solid var(--ff-teal-soft);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20, 48, 59, 0.14);
  padding: 14px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arti-login-panel p { margin: 0; font-size: 12px; color: var(--ff-muted); line-height: 1.45; }
.arti-login-panel form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.arti-login-panel input {
  border: 1px solid var(--ff-teal-soft);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
}
.arti-login-panel code { background: var(--ff-mint); border-radius: 5px; padding: 0 4px; font-size: 11px; }
.arti-login-error { color: #a2402f; font-weight: 500; }

/* "Deine Chats" dropdown (past chats per user) */
.arti-chats { position: relative; }
.arti-chats summary { list-style: none; display: inline-block; }
.arti-chats summary::-webkit-details-marker { display: none; }
.arti-chats-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--ff-teal-soft);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20, 48, 59, 0.14);
  padding: 6px;
  z-index: 20;
}
.arti-chats-empty { margin: 0; padding: 10px; font-size: 12.5px; color: var(--ff-muted); }
.arti-chats-list { list-style: none; margin: 0; padding: 0; }
.arti-chats-item { margin: 0; }
.arti-chats-link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ff-ink);
}
a.arti-chats-link:hover { background: var(--ff-mint); }
.arti-chats-link.is-current { background: var(--ff-mint); cursor: default; }
.arti-chats-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arti-chats-meta { display: block; font-size: 11px; color: var(--ff-muted); margin-top: 2px; }
.arti-login-hint { font-size: 11px; }

/* ─── Proposed-action confirm widget (preview → Ausführen) ──────────────── */
.arti-action {
  background: #fff;
  border: 1px solid var(--ff-coral);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  padding: 13px 15px;
  margin: 8px 0;
  max-width: 92%;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: 0 2px 10px rgba(225, 124, 108, 0.12);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.arti-action-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arti-action-title { font-weight: 500; color: var(--ff-navy); }
.arti-action-state {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ff-coral-dark);
  background: var(--ff-coral-soft);
  border-radius: 9999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.arti-action-summary { margin: 0; color: var(--ff-ink); }
.arti-action-detail { margin: 0; color: var(--ff-muted); font-size: 12.5px; }
.arti-action-diff { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.arti-action-diff th, .arti-action-diff td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--ff-line); }
.arti-action-diff thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ff-muted); border-bottom: 1px solid var(--ff-teal-soft); }
.arti-action-diff tbody th { font-weight: 500; color: var(--ff-teal); white-space: nowrap; }
.arti-action-old { color: var(--ff-muted); text-decoration: line-through; }
.arti-action-arrow { color: var(--ff-coral); font-weight: 500; }
.arti-action-new { color: var(--ff-navy); font-weight: 500; }
.arti-action-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.arti-action-meta div { display: flex; gap: 6px; align-items: baseline; }
.arti-action-meta dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ff-muted); }
.arti-action-meta dd { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--ff-ink); }
.arti-action-warning {
  margin: 0;
  font-size: 12.5px;
  color: #8a5a18;
  background: #fdf3e2;
  border: 1px solid #f3ddb5;
  border-radius: 8px;
  padding: 7px 10px;
}
.arti-action-buttons { display: flex; align-items: center; gap: 8px; }
.arti-action-form { margin: 0; display: inline; }
.arti-action-done { border-color: #9dc3ae; box-shadow: 0 2px 10px rgba(46, 107, 79, 0.1); }
.arti-action-done .arti-action-title { color: #2e6b4f; }
.arti-action-failed { border-color: #d9a09a; background: #fdf7f5; }
.arti-action-failed .arti-action-title { color: #a2402f; }

/* ─── Grouped action widget: one compact row per proposed change ────────── */
.arti-action-group { max-width: 100%; }
.arti-action-rows { display: flex; flex-direction: column; }
.arti-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  border-top: 1px solid var(--ff-line);
}
.arti-action-row:first-child { border-top: none; }
.arti-action-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arti-action-row-target { font-size: 13px; color: var(--ff-navy); }
.arti-action-row-diff { font-size: 12.5px; color: var(--ff-ink); display: flex; flex-wrap: wrap; gap: 2px 14px; }
.arti-action-row-change { white-space: nowrap; }
.arti-action-row-warning { font-size: 11.5px; color: #8a5a18; }
.arti-action-row-buttons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.arti-action-row-buttons .arti-pillbtn { padding: 5px 11px; font-size: 12px; }
.arti-action-row-done .arti-action-row-target { color: #2e6b4f; font-weight: 500; }
.arti-action-row-done .arti-action-row-diff { color: var(--ff-muted); }
.arti-action-row-failed .arti-action-row-target { color: #a2402f; font-weight: 500; }

/* ── Login gate (full-page foodforecast login, plan 1b) ─────────────────── */
.arti-gate {
  max-width: 360px;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.arti-gate h1 { margin: 0; font-size: 22px; color: var(--ff-navy); }
.arti-gate p { margin: 0; font-size: 13px; color: var(--ff-muted); line-height: 1.5; }
.arti-gate-form { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; }
.arti-gate-form input {
  border: 1px solid var(--ff-line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
}
.arti-gate-form .arti-pillbtn { justify-content: center; }

/* ── Active-client chip (Mandanten-Kontext, plan §1) ────────────────────── */
.arti-client-chip {
  border-color: #b7c8e2;
  color: #274b7a;
  background: #edf3fb;
}
.arti-client-chip-none { border-style: dashed; color: var(--ff-muted); background: transparent; }

/* ── Change-set widget: grouped-by-resource (plan §1/§7) ─────────────────── */
.arti-action-client {
  font-size: 11.5px;
  color: #274b7a;
  background: #edf3fb;
  border: 1px solid #b7c8e2;
  border-radius: 999px;
  padding: 1px 8px;
}
.arti-action-viewlink { margin: 2px 0 8px; font-size: 12px; }
.arti-action-viewlink a { color: var(--ff-navy); }
.arti-action-groupfoot { display: flex; justify-content: flex-end; margin-top: 8px; }
.arti-action-row-scope { font-size: 11.5px; color: var(--ff-muted); margin-top: 2px; }
.arti-action-async { color: #8a5a18; margin-left: 6px; }
.arti-action-details { margin-top: 6px; }
.arti-action-details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--ff-navy);
  user-select: none;
}
.arti-action-detail-dl { margin: 6px 0 0; font-size: 12px; }
.arti-action-detail-dl > div { display: flex; gap: 8px; padding: 2px 0; }
.arti-action-detail-dl dt { flex: 0 0 96px; color: var(--ff-muted); }
.arti-action-detail-dl dd { margin: 0; color: var(--ff-ink); }
.arti-action-detail-dl code { font-size: 11px; word-break: break-all; }

/* ── Persona chip (role, next to the Mandant chip) ──────────────────────── */
.arti-persona-chip {
  border-color: #d9c2a8;
  color: #7a5a2e;
  background: #f7efe4;
  cursor: default;
}
.arti-client-chip {
  border-color: #b9d3d9;
  color: #21667d;
  background: #e4f1f3;
  cursor: default;
}
.arti-inline-form { display: inline; margin: 0; }

/* Explicit client picker: searchable dropdown (can be hundreds of clients) */
.arti-client-search {
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid var(--ff-line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ff-ink);
  background: #fff;
}
.arti-client-search:focus {
  outline: none;
  border-color: #4B9DAC;
  box-shadow: 0 0 0 3px rgba(75, 157, 172, 0.15);
}
.arti-client-options {
  list-style: none;
  margin: 8px 0 0;
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--ff-line);
  border-radius: 8px;
  background: #fff;
}
.arti-client-option { margin: 0; }
.arti-client-option button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ff-ink);
}
.arti-client-option button:hover,
.arti-client-option button:focus {
  background: #e4f1f3;
  color: #21667d;
  outline: none;
}
.arti-client-empty { margin: 8px 2px 0; font-size: 12.5px; color: var(--ff-muted); }

/* ── Analysis result (run_analysis): tables + charts ────────────────────── */
.arti-result {
  border: 1px solid var(--ff-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 8px 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.arti-result-text { margin: 0; font-size: 13px; color: var(--ff-ink); }
.arti-result-report { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arti-result-report-hint { font-size: 11px; color: var(--ff-muted); }
.arti-result-table h4, .arti-result-chart h4 {
  margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--ff-navy);
}
.arti-result-table { overflow-x: auto; }
.arti-result-table table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.arti-result-table th, .arti-result-table td {
  border-bottom: 1px solid var(--ff-line);
  padding: 6px 9px;
  text-align: left;
  white-space: nowrap;
}
.arti-result-table th {
  color: var(--ff-muted); font-weight: 500;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid var(--ff-line);
}
/* Numeric columns right-aligned with tabular figures (report look). */
.arti-result-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.arti-result-table tbody tr:hover { background: var(--ff-cream); }
.arti-result-chart { width: 100%; }
.arti-chart-wrap { position: relative; height: 260px; }
/* Model-authored viz (chart type "html"): sandboxed iframe, height set inline
   and adjusted by the viz-frame controller via postMessage. */
.arti-viz-frame { display: block; width: 100%; border: 0; border-radius: 8px; background: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   FoodForecast Design-System — Restyle (überschreibt die Regeln oben)
   Approved mockup: cremefarbenes Canvas, weißer Header, kleiner Hero, Arti als
   reiner Fließtext; jede Tabelle/Result/KPI/Ranking/Callout = weiße Karte.
   Poppins: NUR 300 (Body) + 500 (Betonung/Labels/Headings). Nie fett.
   ═══════════════════════════════════════════════════════════════════════ */
.arti-content, #arti-chips, .arti-result, .arti-editor,
.arti-chats-panel, .arti-client-picker, #arti-composer, .arti-gate,
.kpi-grid, #arti-panel, body.arti-standalone {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Frischer Canvas: sanfter Mint→Weiß-Verlauf auf dem (nicht scrollenden) Panel;
   Body/Content bleiben transparent, damit der Verlauf durchscheint. */
body.arti-standalone { background: var(--ff-bg); }
#arti-panel { background: var(--ff-bg-gradient); }
#arti-body { background: transparent; }
#arti-composer { background: transparent; }

/* Inline Lucide icons: align with text, never squash */
.arti-icon { display: inline-block; vertical-align: -3px; flex: 0 0 auto; }

/* Pills that are <summary> elements (login, Deine Chats, Start-Prompt) get the
   base `details summary { display: inline-block }`, which killed the pill's
   gap → icon flush against the label. Restore the flex + gap here (declared
   after those base rules, so it wins). */
summary.arti-pillbtn, .arti-login > summary, .arti-chats > summary, .arti-oprompt > summary {
  display: inline-flex; align-items: center; gap: 6px;
}

/* ── Reading column & rhythm ─────────────────────────────────────────────── */
.arti-content { max-width: 840px; }
#arti-body { padding-top: 40px; }

/* ── Pills ───────────────────────────────────────────────────────────────── */
.arti-pillbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; box-shadow: var(--ff-shadow-sm); backdrop-filter: none;
  background: #fff; color: var(--ff-navy); border-color: var(--ff-teal-soft);
}
.arti-pillbtn:hover { border-color: var(--ff-teal-soft); background: var(--ff-cream); color: var(--ff-navy); }
.arti-login-authed { border-color: #9dc3ae; color: var(--ff-teal); background: var(--ff-mint); }
/* Primary pill — coral fill (re-declared after the generic .arti-pillbtn above) */
.arti-pillbtn-primary { background: var(--ff-coral); border-color: var(--ff-coral); color: #fff; }
.arti-pillbtn-primary:hover { background: var(--ff-coral-dark); border-color: var(--ff-coral-dark); color: #fff; }
/* button_to renders a <form>; keep it inline so the pill sits in the row */
.arti-newchat-form { display: inline-flex; }
/* Destructive/secondary pill — coral outline */
.arti-pillbtn-coral { background: #fff; border-color: var(--ff-coral); color: var(--ff-coral-dark); }
.arti-pillbtn-coral:hover { background: var(--ff-coral); border-color: var(--ff-coral); color: #fff; }
/* Read-only context (Analyst / Kunde) — plain labels, NO button chrome */
.arti-context-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--ff-muted);
  white-space: nowrap; cursor: default;
}
.arti-context-label .arti-icon { color: var(--ff-teal); }
.arti-context-client { color: var(--ff-navy); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.arti-hero { flex-direction: column; align-items: center; gap: 10px; margin: 6px 0 4px; }
.arti-hero-avatar {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: #fff; box-shadow: var(--ff-shadow-md); display: grid; place-items: center;
}
.arti-hero-logo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* foodforecast-Wortmarke im Hero (ersetzt den runden Arti-Swirl) */
.arti-hero-brand { display: grid; place-items: center; }
.arti-hero-wordmark {
  width: 172px; height: auto; display: block;
  user-select: none; -webkit-user-drag: none;
}
.arti-hero-title { margin: 4px 0 0; font-size: 19px; font-weight: 500; color: var(--ff-navy); }
.arti-hero-sub { margin: 0; max-width: 420px; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--ff-muted); font-weight: 300; }

/* Mint context banner — bound client */
.arti-context-banner {
  display: inline-flex; align-items: center; gap: 8px; align-self: center;
  margin: 4px 0 12px; padding: 8px 14px; font-size: 13px; font-weight: 300;
  background: var(--ff-mint); border: 1px solid var(--ff-teal-soft);
  border-radius: 9999px; color: var(--ff-navy);
}
.arti-context-banner strong { font-weight: 500; }
.arti-context-banner .arti-icon { color: var(--ff-teal); }

/* ── User bubble (only genuine bubble) ───────────────────────────────────── */
.arti-bubble.arti-user {
  background: var(--ff-navy); color: var(--ff-cream); font-weight: 300; font-size: 15px;
  border-radius: 16px 16px 5px 16px; box-shadow: var(--ff-shadow-sm);
  padding: 12px 18px; max-width: 78%; margin-left: auto; align-self: flex-end;
}

/* ── Assistant prose — no bubble ─────────────────────────────────────────── */
.arti-bubble.arti-assistant, .arti-bubble.arti-greeting {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  padding: 0; max-width: 100%; color: var(--ff-ink); font-size: 15px; line-height: 1.65;
}
.arti-assistant p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; font-weight: 300; }
.arti-assistant strong { font-weight: 500; color: var(--ff-navy); }
.arti-assistant h1, .arti-assistant h4, .arti-assistant h5 { font-weight: 500; color: var(--ff-navy); }
.arti-assistant h2 { font-size: 24px; font-weight: 500; color: var(--ff-navy); margin: 18px 0 10px; }
/* h3 = uppercase eyebrow */
.arti-assistant h3 {
  font-size: 15px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ff-muted); margin: 16px 0 8px;
}
.arti-assistant li::marker { color: var(--ff-coral); }
.arti-assistant a { color: var(--ff-teal); text-decoration: underline; }
.arti-assistant a:hover { color: var(--ff-coral); }
.arti-assistant code { background: #E8EDEF; color: var(--ff-navy); border-radius: 4px; padding: 1px 5px; }
.arti-assistant blockquote {
  border-left: 0; background: var(--ff-mint); border: 1px solid var(--ff-teal-soft);
  border-radius: 12px; padding: 12px 14px; margin: 12px 0; color: var(--ff-navy);
}

/* ── Tables inside answers = white card ──────────────────────────────────── */
.arti-assistant table {
  border: 1px solid var(--ff-table-border); border-radius: 14px; overflow: hidden;
  box-shadow: var(--ff-shadow-sm); font-size: 14px; margin: 12px 0; background: #fff;
  border-collapse: separate; border-spacing: 0; width: 100%;
}
.arti-assistant th {
  background: transparent; color: var(--ff-muted); font-weight: 500;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--ff-table-border); padding: 8px 12px; text-align: left;
}
.arti-assistant td { border-bottom: 1px solid var(--ff-table-line); padding: 8px 12px; font-weight: 300; }
.arti-assistant tbody tr:nth-child(even) { background: transparent; }
.arti-assistant tbody tr:last-child td { border-bottom: 0; }
.arti-assistant td.delta, .arti-result-table td.delta { color: var(--ff-coral); font-weight: 500; }

/* ── Suggestion chips ────────────────────────────────────────────────────── */
.arti-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.arti-chip:hover { border-color: var(--ff-teal-soft); background: var(--ff-cream); color: var(--ff-navy); }
.arti-chip-waste { background: var(--ff-teal); border-color: var(--ff-teal); color: #fff; }
.arti-chip-waste:hover { background: #2b5a63; border-color: #2b5a63; color: #fff; }

/* ── Result / report card ────────────────────────────────────────────────── */
/* Transparent shell — the widgets (KPIs, tables, ranking, chart) are the cards;
   no card-in-card. They float on the cream page with a 24px rhythm. */
.arti-result {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 4px 0; gap: 24px;
}
.arti-result-head { display: flex; justify-content: flex-end; align-items: flex-start; }
.arti-result-report { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.arti-result-report-hint { font-size: 11px; color: var(--ff-muted); }
.arti-result-download { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.arti-result-download .arti-result-report-hint { text-align: left; }

/* ── File attachment (CSV upload for analysis) ───────────────────────────── */
/* Transient status line above the composer (only while loading / on error). */
.arti-attach-status {
  max-width: 840px; margin: 0 auto 6px; padding: 0 6px;
  font-size: 12.5px; color: var(--ff-muted); text-align: center;
}
.arti-attach-status[hidden] { display: none; }
.arti-attach-status.is-error { color: var(--ff-coral-dark); font-weight: 500; }

/* The attached file as a card IN the chat flow — a rounded rectangle with a
   file icon (right-aligned, like the user's own messages). */
.arti-file-card {
  align-self: flex-end; max-width: min(340px, 90%);
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--ff-teal-soft); border-radius: 14px;
  box-shadow: var(--ff-shadow-sm); padding: 12px 12px 12px 14px; margin: 2px 0;
}
.arti-file-card-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  background: var(--ff-mint); color: var(--ff-teal);
  display: grid; place-items: center;
}
.arti-file-card-body { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.arti-file-card-name {
  font-weight: 500; color: var(--ff-navy); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arti-file-card-meta { font-size: 12px; color: var(--ff-muted); }
.arti-file-card-x {
  flex: 0 0 auto; margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(30, 65, 80, .07); color: var(--ff-teal); font-size: 17px; line-height: 1;
  transition: background .12s, color .12s;
}
.arti-file-card-x:hover { background: var(--ff-coral); color: #fff; }
.arti-result-eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ff-muted); margin: 0 0 12px;
}
.arti-result-text { font-size: 14px; font-weight: 300; color: var(--ff-ink); margin: 0; }
.arti-result-table table {
  border: 1px solid var(--ff-table-border); border-radius: 14px; overflow: hidden;
  box-shadow: var(--ff-shadow-sm); background: #fff; border-collapse: separate;
  border-spacing: 0; width: 100%; font-size: 14px;
}
.arti-result-table th {
  color: var(--ff-muted); font-weight: 500; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; border-bottom: 1px solid var(--ff-table-border); padding: 8px 12px;
}
.arti-result-table td { border-bottom: 1px solid var(--ff-table-line); padding: 8px 12px; font-weight: 300; }
.arti-result-table tbody tr:last-child td { border-bottom: 0; }
.arti-result-table tbody tr:hover { background: var(--ff-cream); }

/* ── KPI-Vergleich (neue Komponente) ─────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi-card {
  background: #fff; border: 1px solid var(--ff-teal-soft); border-radius: 14px;
  box-shadow: var(--ff-shadow-sm); padding: 16px;
}
.kpi-card .kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ff-muted); }
.kpi-card .kpi-now { font-size: 24px; font-weight: 500; color: var(--ff-navy); margin-top: 4px; }
.kpi-card .kpi-cmp { font-size: 12px; color: var(--ff-muted); margin-top: 2px; }
.kpi-card .kpi-delta { font-size: 12px; font-weight: 500; margin-top: 2px; }
/* Colour follows SENTIMENT, not direction: rising revenue is good (teal),
   rising waste is bad (coral). Sentiment is decided per metric server-side. */
.kpi-delta.is-good { color: var(--ff-teal); }
.kpi-delta.is-bad  { color: var(--ff-coral-dark); }
.kpi-delta.is-flat { color: var(--ff-muted); }

/* ── Composer — pill over a cream fade ───────────────────────────────────── */
#arti-composer {
  border-top: 0; background: linear-gradient(to top, var(--ff-bg-bottom) 62%, rgba(251,254,253,0));
  padding: 14px 16px 18px;
}
.arti-composer-inner {
  max-width: 840px; margin: 0 auto; background: #fff;
  border: 1px solid var(--ff-teal-soft); border-radius: 20px; box-shadow: var(--ff-shadow-md);
  display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px;
}
#arti-input {
  border: 0; background: transparent; box-shadow: none; border-radius: 0;
  font-size: 15px; font-weight: 300; padding: 8px 0; max-height: 180px;
}
#arti-input:focus { border: 0; box-shadow: none; outline: none; }
.arti-composer-inner:focus-within { border-color: var(--ff-coral); box-shadow: 0 0 0 3px rgba(237,133,120,.35), var(--ff-shadow-md); }
#arti-send {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: var(--ff-coral); color: #fff; display: grid; place-items: center; padding: 0;
  box-shadow: var(--ff-shadow-sm);
}
#arti-send:hover:not(:disabled) { background: var(--ff-coral-dark); }
#arti-send:disabled { background: #d9c3bd; opacity: .7; }

/* "+" attach button inside the composer pill (left of the input). */
.arti-composer-inner { padding-left: 8px; }
#arti-attach-plus {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; background: transparent; color: var(--ff-teal);
  transition: background .12s, color .12s;
}
#arti-attach-plus:hover { background: var(--ff-mint); color: var(--ff-navy); }
#arti-attach-plus:focus-visible { outline: 2px solid var(--ff-coral); outline-offset: 2px; }

/* Drag-&-drop overlay: appears while a file is dragged over the chat panel. */
#arti-panel { position: relative; }
.arti-drop-hint {
  position: absolute; inset: 12px; z-index: 40; pointer-events: none;
  display: none; place-items: center; text-align: center;
  border: 2px dashed var(--ff-coral); border-radius: 20px;
  background: rgba(249, 246, 243, 0.88);
}
#arti-panel.is-dragging .arti-drop-hint { display: grid; }
.arti-drop-hint span {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ff-navy); font-weight: 500; font-size: 16px;
}

/* ── Start-Prompt (per user+client, auto-runs on a new chat) ─────────────── */
.arti-oprompt { position: relative; }
.arti-oprompt > summary, .arti-oprompt-box > summary { list-style: none; cursor: pointer; }
.arti-oprompt > summary::-webkit-details-marker,
.arti-oprompt-box > summary::-webkit-details-marker { display: none; }
.arti-oprompt-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 340px;
  background: #fff; border: 1px solid var(--ff-teal-soft); border-radius: 14px;
  box-shadow: var(--ff-shadow-md); padding: 14px; z-index: 20;
  display: flex; flex-direction: column; gap: 10px;
}
.arti-oprompt-panel form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.arti-oprompt-hint, .arti-oprompt-box p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ff-muted); font-weight: 300; }
.arti-oprompt-hint strong, .arti-oprompt-box strong { font-weight: 500; color: var(--ff-navy); }
.arti-oprompt-text {
  width: 100%; resize: vertical; min-height: 64px; font: inherit; font-size: 14px; font-weight: 300;
  border: 1px solid var(--ff-teal-soft); border-radius: 12px; padding: 10px 12px;
  background: #fff; color: var(--ff-ink); outline: none;
}
.arti-oprompt-text:focus { border-color: var(--ff-coral); box-shadow: 0 0 0 3px rgba(237,133,120,.35); }
.arti-oprompt-actions { display: flex; align-items: center; gap: 8px; }
.arti-oprompt-remove { margin: 0; }

/* Body nudge (unset + fresh chat) — quiet by default, expands to a form */
.arti-oprompt-box { align-self: center; text-align: center; margin: 0 0 4px; background: transparent; border: 0; padding: 0; }
.arti-oprompt-box > summary {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; color: var(--ff-muted); opacity: .7;
}
.arti-oprompt-box > summary:hover { color: var(--ff-teal); opacity: 1; }
.arti-oprompt-box > summary .arti-icon { width: 13px; height: 13px; }
.arti-oprompt-box[open] {
  align-self: stretch; max-width: 100%; margin: 2px 0 8px; text-align: left;
  background: var(--ff-mint-soft); border: 1px solid var(--ff-line);
  border-radius: 12px; padding: 12px 14px;
}
.arti-oprompt-box[open] > summary { margin-bottom: 8px; opacity: 1; color: var(--ff-navy); }
.arti-oprompt-box form { display: flex; flex-direction: column; gap: 10px; margin: 0; }

/* ── Memory suggestion (Arti schlägt vor → Nutzer bestätigt) ─────────────── */
.arti-memsug {
  background: var(--ff-mint); border: 1px solid var(--ff-teal-soft); border-radius: 12px;
  padding: 12px 14px; margin: 4px 0; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 10px 16px;
}
.arti-memsug-head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; flex: 1; }
.arti-memsug-icon { color: var(--ff-teal); flex: 0 0 auto; margin-top: 1px; }
.arti-memsug-label { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ff-muted); }
.arti-memsug-note { font-size: 14px; font-weight: 300; color: var(--ff-navy); }
.arti-memsug-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.arti-memsug-form { margin: 0; }

/* ── Umfang-Karte (propose_scope → Bestätigung vor einem Bericht) ─────────── */
.arti-scope {
  background: var(--ff-mint); border: 1px solid var(--ff-teal-soft); border-radius: 12px;
  padding: 14px 16px; margin: 4px 0; max-width: 720px;
}
.arti-scope-form { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.arti-scope-head { display: flex; align-items: flex-start; gap: 8px; }
.arti-scope-icon { color: var(--ff-teal); flex: 0 0 auto; margin-top: 2px; }
.arti-scope-label { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ff-muted); }
.arti-scope-title { font-size: 15px; font-weight: 500; color: var(--ff-navy); }
.arti-scope-request { font-size: 13px; font-weight: 300; color: var(--ff-navy); margin-top: 2px; }
.arti-scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; }
.arti-scope-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ff-muted); }
.arti-scope-field input, .arti-scope-field select, .arti-scope-search {
  font: inherit; font-size: 13px; color: var(--ff-navy); background: #fff;
  border: 1px solid var(--ff-teal-soft); border-radius: 8px; padding: 6px 8px; min-height: 34px;
}
.arti-scope-hint { font-size: 11.5px; color: var(--ff-muted); line-height: 1.45; }
.arti-scope-stores { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.arti-scope-stores legend { font-size: 12px; color: var(--ff-muted); padding: 0; margin-bottom: 4px; width: 100%; }
.arti-scope-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ff-navy); }
.arti-scope-storelist { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.arti-scope-storelist[hidden] { display: none; }
.arti-scope-storerows { max-height: 220px; overflow: auto; background: #fff; border: 1px solid var(--ff-teal-soft); border-radius: 8px; padding: 4px 8px; }
.arti-scope-store { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ff-navy); padding: 3px 0; }
.arti-scope-assumptions { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ff-navy); font-weight: 300; }
.arti-scope-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arti-scope-actions .arti-pillbtn-primary { display: inline-flex; align-items: center; gap: 6px; }

/* ── Analyst ⇄ CSM mode toggle (CSMs only) ───────────────────────────────── */
.arti-mode { display: inline-flex; align-items: center; border: 1px solid var(--ff-teal-soft); border-radius: 9999px; overflow: hidden; background: #fff; }
.arti-mode-form { margin: 0; display: inline-flex; }
.arti-mode-opt {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent;
  color: var(--ff-muted); font: inherit; font-size: 12px; font-weight: 500; padding: 6px 12px;
  cursor: pointer; white-space: nowrap;
}
.arti-mode-opt:hover { color: var(--ff-navy); }
.arti-mode-opt.is-active { background: var(--ff-navy); color: #fff; }

/* Legacy: a Tages-Status folded into an OLD chat's opening turn (feature removed 2026-09). */
.arti-briefing-turn-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ff-teal); margin-bottom: 5px;
}

/* ── "Vorgehen": collapsed inter-round process narration ─────────────────── */
.arti-steps { align-self: flex-start; max-width: 90%; margin: 0; }
.arti-steps-summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--ff-muted); padding: 3px 2px;
}
.arti-steps-summary::-webkit-details-marker { display: none; }
.arti-steps-summary::before { content: "▸"; font-size: 9px; color: var(--ff-teal); }
.arti-steps[open] .arti-steps-summary::before { content: "▾"; }
.arti-steps-count {
  font-weight: 400; font-size: 11px; color: var(--ff-teal);
}
.arti-steps-body {
  margin: 4px 0 2px; padding: 10px 12px; border-left: 2px solid var(--ff-line);
  background: var(--ff-mint-soft); border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.arti-steps-item { font-size: 13px; line-height: 1.5; color: var(--ff-muted); }
.arti-steps-item :first-child { margin-top: 0; }
.arti-steps-item :last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   Mobile (≤640px) — content fitting. The shell (top bar + drawer) has its own
   rules in the Shell block below (≤900px).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* ── Suggestion chips: one swipeable row (no wall of chips) ───────────── */
  #arti-chips {
    flex-wrap: nowrap; overflow-x: auto; margin: 6px -14px 10px; padding: 0 14px;
    scrollbar-width: none; justify-content: flex-start;
  }
  #arti-chips::-webkit-scrollbar { display: none; }
  .arti-chip { flex: 0 0 auto; min-height: 38px; white-space: nowrap; }

  /* ── Body / hero / bubbles ───────────────────────────────────────────── */
  #arti-body { padding: 16px 14px 12px; }
  .arti-hero-wordmark { width: 148px; }
  .arti-bubble { font-size: 14.5px; }

  /* ── Widgets fit the narrow viewport ─────────────────────────────────── */
  .arti-assistant table { display: block; overflow-x: auto; white-space: nowrap; }
  .arti-chart-wrap { height: 200px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-card .kpi-now { font-size: 21px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Shell — Redesign 2026-09 („Arti Chat 1"): weiße Topbar (Marke + Titel +
   gebundener Kunde, Menüs rechts), dunkle Sidebar darunter, Teiggrau-Canvas.
   Poppins 300 (Body) + 500 (Betonung). Ordner/Umbenennen/Löschen aus dem
   Mockup sind bewusst NICHT gebaut (kein Backend).
   ═══════════════════════════════════════════════════════════════════════ */
.arti-app {
  display: flex; flex-direction: column; height: 100vh; width: 100%; overflow: hidden;
  background: var(--ff-cream); color: var(--ff-navy);
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 300;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.arti-topbar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 60px; padding: 0 20px 0 18px; background: #fff; border-bottom: 1px solid var(--ff-teal-soft);
  position: relative; z-index: 30;
}
.arti-topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.arti-topbar-mark { height: 34px; width: auto; display: block; flex: 0 0 auto; }
.arti-topbar-titles { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.arti-topbar-title { font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--ff-navy); white-space: nowrap; }
.arti-topbar-sub { font-size: 12px; color: var(--ff-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em; }
.arti-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* Round icon button / account pill (top bar + modal close) */
.arti-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 999px; border: 1px solid var(--ff-teal-soft); background: #fff; color: var(--ff-navy);
  cursor: pointer; padding: 0; list-style: none; transition: background .14s;
}
.arti-iconbtn:hover { background: var(--ff-cream); }
.arti-iconbtn::-webkit-details-marker { display: none; }
.arti-iconbtn-plain { border: 0; width: 32px; height: 32px; color: var(--ff-muted); }
.arti-userbtn {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px 0 4px;
  border-radius: 999px; border: 1px solid var(--ff-teal-soft); background: #fff; color: var(--ff-navy);
  cursor: pointer; font-size: 13px; font-weight: 500; list-style: none; transition: background .14s;
}
.arti-userbtn:hover { background: var(--ff-cream); }
.arti-userbtn::-webkit-details-marker { display: none; }
.arti-userbtn-label { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arti-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ff-navy); color: var(--ff-cream);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

/* ── Dropdown menus (<details class="arti-menu">) ─────────────────────────── */
@keyframes arti-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.arti-menu { position: relative; }
.arti-menu > summary { list-style: none; }
.arti-menu > summary::-webkit-details-marker { display: none; }
.arti-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 260px;
  background: #fff; color: var(--ff-navy); border: 1px solid var(--ff-teal-soft); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(30, 65, 80, .12), 0 4px 10px rgba(30, 65, 80, .05);
  padding: 6px; z-index: 40; animation: arti-in .22s cubic-bezier(.22, .61, .36, 1);
  font-size: 13px; font-weight: 300; text-align: left;
}
.arti-menu-label { padding: 8px 12px 4px; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ff-muted-2); }
.arti-menu-head { padding: 10px 12px 8px; }
.arti-menu-head-title { font-size: 13px; font-weight: 500; }
.arti-menu-head-sub { font-size: 11.5px; color: var(--ff-muted); line-height: 1.45; margin-top: 2px; }
.arti-menu-divider { height: 1px; background: var(--ff-teal-soft); margin: 6px 8px; }
.arti-menu-form { margin: 0; display: block; }
.arti-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ff-navy);
  font: inherit; font-size: 13px; font-weight: 300; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer;
  transition: background .12s;
}
.arti-menu-item:hover { background: var(--ff-cream); }
.arti-menu-item .arti-icon { color: var(--ff-navy); flex: 0 0 auto; }
.arti-menu-item.is-active { background: var(--ff-mint); font-weight: 500; }
.arti-menu-meta { margin-left: auto; font-size: 11px; color: var(--ff-muted-2); white-space: nowrap; }

/* ── Shell: sidebar + panel ──────────────────────────────────────────────── */
.arti-shell { flex: 1 1 auto; display: flex; min-height: 0; width: 100%; }
#arti-panel { flex: 1 1 auto; min-width: 0; width: auto; height: 100%; background: var(--ff-cream); }

.arti-sidebar {
  flex: 0 0 272px; width: 272px; height: 100%; min-height: 0;
  background: var(--ff-navy); color: var(--ff-cream);
  display: flex; flex-direction: column; position: relative; z-index: 20;
  font-size: 13px; font-weight: 300;
}
.arti-sb-top { padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 4px; }
.arti-sb-form { margin: 0; display: flex; flex-direction: column; }
.arti-sb-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px;
  border-radius: 10px; border: 1px solid transparent; background: transparent; color: #fff;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; text-decoration: none;
  list-style: none; transition: background .14s;
}
.arti-sb-btn::-webkit-details-marker { display: none; }
.arti-sb-btn:hover { background: rgba(255, 255, 255, .06); }
.arti-sb-btn .arti-icon { color: #fff; flex: 0 0 auto; }
.arti-sb-btn-primary { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); }
.arti-sb-btn-primary:hover { background: rgba(255, 255, 255, .14); }
.arti-sb-caret { margin-left: auto; opacity: .7; transition: transform .22s; }
.arti-sb-reports[open] .arti-sb-caret { transform: rotate(180deg); }
.arti-sb-report-list {
  list-style: none; margin: 0; padding: 2px 0 6px 12px; display: flex; flex-direction: column; gap: 2px;
  animation: arti-in .22s cubic-bezier(.22, .61, .36, 1);
}
.arti-sb-report {
  position: relative; display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 4px 0 12px;
  border-radius: 8px; border-left: 1px solid rgba(255, 255, 255, .14); color: rgba(242, 235, 227, .88);
}
.arti-sb-report:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.arti-sb-report-link {
  flex: 1; min-width: 0; color: inherit; text-decoration: none; font-size: 13px; line-height: 36px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arti-sb-dots {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 6px; color: rgba(242, 235, 227, .7); cursor: pointer; list-style: none; flex: 0 0 auto;
}
.arti-sb-dots:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.arti-sb-report-menu { position: static; }   /* the row (<li>) is the positioning context */

.arti-sb-report-menu .arti-menu-panel { left: 100%; right: auto; top: 0; margin-left: 6px; width: 272px; }

.arti-sb-divider { height: 1px; background: rgba(255, 255, 255, .08); margin: 6px 12px; flex: 0 0 auto; }
.arti-sb-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 12px 12px; }
.arti-sb-scroll::-webkit-scrollbar { width: 8px; }
.arti-sb-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; }
.arti-sb-heading {
  padding: 8px 12px 6px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(180, 225, 215, .75);
}
.arti-sb-heading-gap { margin-top: 14px; }
/* „Automatische Läufe“ unter den Insights-Berichten (Feedback Jan 22.09.2026). */
.arti-sb-insights-runs { padding: 6px 12px 4px 24px; font-size: 10.5px; }
.arti-sb-empty { margin: 0; padding: 4px 12px 8px; color: rgba(242, 235, 227, .5); font-size: 12.5px; }
.arti-sb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.arti-sb-item { margin: 0; }
.arti-sb-entry {
  display: flex; flex-direction: column; min-width: 0; padding: 7px 10px; border-radius: 8px;
  color: #fff; text-decoration: none; transition: background .12s;
}
a.arti-sb-entry:hover { background: rgba(255, 255, 255, .07); }
.arti-sb-entry.is-current { background: rgba(255, 255, 255, .12); cursor: default; }
.arti-sb-entry-icon { flex-direction: row; align-items: flex-start; gap: 8px; }
.arti-sb-entry-icon > .arti-icon { flex: 0 0 auto; margin-top: 2px; color: rgba(242, 235, 227, .7); }
.arti-sb-entry-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.arti-sb-entry-title {
  display: block; font-size: 13px; font-weight: 300; line-height: 1.3; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arti-sb-entry-meta {
  display: block; font-size: 11px; color: rgba(242, 235, 227, .55); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Turbo-Stream replace targets keep their old ids/classes — neutral wrappers here. */
.arti-sidebar .arti-chats-panel, .arti-sidebar .arti-reports {
  position: static; inset: auto; width: auto; max-width: none; max-height: none;
  overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; z-index: auto; padding: 0;
}
.arti-sb-scrim { display: none; }
.arti-menu-btn { display: none; }

/* ── Main: hero / messages / composer ────────────────────────────────────── */
#arti-body { padding: 32px 24px 24px; background: transparent; }
.arti-content { max-width: 820px; gap: 12px; }
.arti-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 40px 16px 20px; margin: 0; }
.arti-hero-mark { height: 44px; width: auto; opacity: .9; margin-bottom: 22px; user-select: none; -webkit-user-drag: none; }
.arti-hero-title { margin: 0 0 12px; font-size: 36px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; color: var(--ff-navy); }
.arti-hero-sub { margin: 0; max-width: 460px; font-size: 17px; line-height: 1.55; color: var(--ff-muted); font-weight: 300; text-align: center; }
#arti-chips { justify-content: center; margin: 4px 0 6px; }
.arti-chip-waste { background: var(--ff-navy); border-color: var(--ff-navy); color: var(--ff-cream); }
.arti-chip-waste:hover { background: var(--ff-teal); border-color: var(--ff-teal); color: #fff; }

#arti-messages { gap: 14px; }
/* User: navy bubble, right-aligned. */
.arti-bubble.arti-user {
  max-width: 70%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; font-size: 14.5px; line-height: 1.5;
  box-shadow: none; animation: arti-in .22s cubic-bezier(.22, .61, .36, 1);
}
/* Arti: plain prose with the mark as avatar on the left. */
.arti-bubble.arti-assistant { position: relative; padding-left: 40px; font-size: 15px; line-height: 1.6; animation: arti-in .22s cubic-bezier(.22, .61, .36, 1); }
.arti-bubble.arti-assistant::before,
.arti-activity::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 26px; height: 19px;
  background: url("/assets/arti-mark-bcba46fe.svg") center / contain no-repeat;
}
.arti-bubble.arti-assistant:empty::before { display: none; }
/* Widgets of a turn line up with the answer text (avatar column stays free). */
#arti-messages > .arti-result, #arti-messages > .arti-steps, #arti-messages > .arti-memsug, #arti-messages > .arti-scope,
#arti-messages > .arti-action, #arti-messages > .arti-action-group, #arti-messages > .arti-adopt { margin-left: 40px; }
/* Thinking line: avatar + three pulsing dots + status. */
@keyframes arti-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.arti-activity { position: relative; padding: 0 0 0 40px; margin: 0; min-height: 26px; display: flex; align-items: center; }
.arti-activity .arti-thinking { color: var(--ff-muted); font-size: 13px; gap: 10px; }
.arti-activity .arti-spinner {
  position: relative; width: 6px; height: 6px; margin: 0 11px; border: 0; border-radius: 50%;
  background: var(--ff-teal); animation: arti-pulse 1.2s .2s infinite;
}
.arti-activity .arti-spinner::before, .arti-activity .arti-spinner::after {
  content: ""; position: absolute; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--ff-teal);
}
.arti-activity .arti-spinner::before { left: -11px; animation: arti-pulse 1.2s infinite; }
.arti-activity .arti-spinner::after { left: 11px; animation: arti-pulse 1.2s .4s infinite; }
/* Tables: sand card with a cream header row (design). */
.arti-assistant th, .arti-result-table th { background: var(--ff-cream-50); }
.arti-result-table tbody tr:hover { background: var(--ff-cream-50); }

/* Composer — white pill over a cream fade; context card above; disclaimer below. */
#arti-composer { padding: 0 24px 22px; border-top: 0; background: linear-gradient(to bottom, rgba(242, 235, 227, 0), var(--ff-cream) 40%); }
.arti-composer-col { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.arti-attach-status { max-width: none; margin: 0; }
.arti-composer-inner {
  max-width: none; margin: 0; display: flex; align-items: flex-end; gap: 8px;
  background: #fff; border: 1px solid var(--ff-teal-soft); border-radius: 18px; padding: 8px 8px 8px 10px;
  box-shadow: var(--ff-shadow-md);
}
.arti-composer-inner:focus-within { border-color: var(--ff-navy); box-shadow: 0 0 0 3px rgba(237, 133, 120, .35), var(--ff-shadow-md); }
#arti-attach-plus { width: 36px; height: 36px; color: var(--ff-muted); }
#arti-attach-plus:hover { background: var(--ff-cream); color: var(--ff-navy); }
#arti-input { flex: 1 1 auto; width: auto; min-width: 0; padding: 8px 4px; font-size: 15px; min-height: 36px; }
#arti-input::placeholder { color: var(--ff-muted-2); }
.arti-ctxbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-bottom: 2px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--ff-teal-soft); background: transparent; color: var(--ff-muted);
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; flex: 0 0 auto; transition: background .14s, border-color .14s;
}
.arti-ctxbtn:hover, .arti-ctxbtn.is-active { background: var(--ff-cream); border-color: var(--ff-navy); }
#arti-send { position: static; transform: none; width: 38px; height: 38px; box-shadow: none; }
.arti-composer-note { text-align: center; font-size: 11.5px; color: var(--ff-muted-2); }
.arti-context {
  background: #fff; border: 1px solid var(--ff-teal-soft); border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--ff-shadow-md); animation: arti-in .22s cubic-bezier(.22, .61, .36, 1);
}
.arti-context[hidden] { display: none; }
.arti-context-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.arti-context-title { font-size: 13px; font-weight: 500; }
.arti-textbtn { border: 0; background: transparent; color: var(--ff-teal); font: inherit; font-size: 12px; cursor: pointer; padding: 0; }
.arti-textbtn:hover { color: var(--ff-coral); }
.arti-context-grid { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 12.5px; line-height: 1.55; color: var(--ff-muted); }
.arti-context-grid dt { font-weight: 500; color: var(--ff-navy); }
.arti-context-grid dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Angeheftete Analyse-Regeln des Chats (pin_rule) — als entfernbare Chips. */
.arti-rule-list { display: flex; flex-wrap: wrap; gap: 6px; }
.arti-rule { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px;
  border: 1px solid var(--ff-line); border-radius: 999px; background: var(--ff-cream-50);
  color: var(--ff-navy); font-size: 12px; line-height: 1.45; }
.arti-rule-x { border: 0; background: none; cursor: pointer; padding: 0 4px; line-height: 1;
  font-size: 14px; color: var(--ff-muted-2); border-radius: 999px; }
.arti-rule-x:hover { color: var(--ff-navy); background: var(--ff-cream-200); }

/* ── Turn actions / watchdog / viz escape hatch (Chat-Analyse 2026-09) ───── */
.arti-turn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -4px 0 4px 40px; }
.arti-turn-actions:empty { display: none; }
.arti-turn-actions .arti-textbtn { display: inline-flex; align-items: center; gap: 5px; color: var(--ff-muted-2); text-decoration: none; }
.arti-turn-actions .arti-textbtn:hover { color: var(--ff-teal); }
.arti-turn-actions .arti-textbtn .arti-icon { color: inherit; }
.arti-chip-retry { padding: 5px 12px; font-size: 12px; }
.arti-chip-retry .arti-icon { color: var(--ff-teal); }
.arti-activity { flex-wrap: wrap; row-gap: 4px; }
.arti-activity-hint { flex-basis: 100%; font-size: 12.5px; color: var(--ff-muted); }
.arti-activity-hint[hidden] { display: none; }
.arti-activity-hint .arti-textbtn { font-size: 12.5px; font-weight: 500; margin-left: 4px; }
.arti-viz-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.arti-viz-open { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.arti-viz-open .arti-icon { color: inherit; }
@media (max-width: 640px) { .arti-turn-actions { margin-left: 0; } }

/* ── Gedächtnis modal (<dialog>) ─────────────────────────────────────────── */
.arti-modal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; color: var(--ff-navy); }
.arti-modal::backdrop { background: rgba(30, 65, 80, .6); }
.arti-modal[open] { display: grid; place-items: center; width: 100vw; height: 100vh; margin: 0; inset: 0; }
.arti-modal-box {
  width: 600px; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); overflow-y: auto;
  background: #fff; border-radius: 20px; box-shadow: 0 14px 40px rgba(30, 65, 80, .2); padding: 28px 28px 24px;
  animation: arti-in .22s cubic-bezier(.22, .61, .36, 1);
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-weight: 300;
}
.arti-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.arti-modal-title { margin: 0; font-size: 24px; font-weight: 300; letter-spacing: -.02em; }
.arti-modal-lead { margin: 0 0 18px; font-size: 13.5px; color: var(--ff-muted); line-height: 1.55; }
.arti-modal-lead strong { font-weight: 500; color: var(--ff-navy); }
.arti-modal-form { display: flex; flex-direction: column; margin: 0; }
.arti-modal-text {
  width: 100%; min-height: 120px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ff-teal-soft);
  font: inherit; font-size: 14px; font-weight: 300; color: var(--ff-navy); resize: vertical; line-height: 1.5; outline: none;
}
.arti-modal-text:focus { border-color: var(--ff-navy); box-shadow: 0 0 0 3px rgba(237, 133, 120, .35); }
.arti-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 20px; }
.arti-modal-remove { margin: 0 auto 0 0; }
.arti-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px;
  border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .14s, color .14s;
}
.arti-btn-primary { background: var(--ff-coral); color: #fff; }
.arti-btn-primary:hover { background: #D86A5C; }
.arti-btn-outline { background: transparent; border-color: var(--ff-navy); color: var(--ff-navy); }
.arti-btn-outline:hover { background: var(--ff-cream); }
.arti-btn-ghost { background: transparent; color: var(--ff-muted); padding: 0 10px; }
.arti-btn-ghost:hover { color: #8b3a2c; }

/* ── Mobile (≤900px): sidebar becomes a drawer, burger in the top bar ────── */
@media (max-width: 900px) {
  .arti-menu-btn { display: inline-flex; }
  .arti-topbar { padding: 0 12px; gap: 10px; }
  .arti-userbtn-label { display: none; }
  .arti-userbtn { padding-right: 4px; }
  .arti-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 2px 0 24px rgba(10, 30, 40, .35);
  }
  .arti-app.is-drawer-open .arti-sidebar { transform: translateX(0); }
  .arti-sb-scrim {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15, 35, 45, .45);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .arti-app.is-drawer-open .arti-sb-scrim { opacity: 1; pointer-events: auto; }
  /* Report ⋯ menu: below the row (no room to the right of a drawer). */
  .arti-sb-report-menu .arti-menu-panel { left: 0; top: 100%; margin: 4px 0 0; width: 256px; }
  #arti-panel { width: 100%; }
}
@media (max-width: 640px) {
  .arti-topbar-sub { display: none; }
  .arti-hero { padding: 20px 8px 12px; }
  .arti-hero-title { font-size: 28px; }
  .arti-hero-sub { font-size: 15px; }
  .arti-bubble.arti-assistant { padding-left: 0; }
  .arti-bubble.arti-assistant::before { display: none; }
  #arti-messages > .arti-result, #arti-messages > .arti-steps, #arti-messages > .arti-memsug, #arti-messages > .arti-scope,
  #arti-messages > .arti-action, #arti-messages > .arti-action-group, #arti-messages > .arti-adopt { margin-left: 0; }
  .arti-bubble.arti-user { max-width: 86%; }
  #arti-composer { padding: 0 12px 14px; }
  #arti-input { font-size: 16px; }   /* prevents iOS zoom-on-focus */
  .arti-ctxbtn span, .arti-ctxbtn { font-size: 0; gap: 0; padding: 0 9px; }
  .arti-ctxbtn .arti-icon { font-size: 14px; }
  .arti-composer-note { display: none; }
}

/* "Neue Analyse" pending notice — shown above the client picker so it's clear an
   analysis runs right after the pick. */
.arti-analysis-pending {
  display: flex; align-items: center; gap: 8px; align-self: center; max-width: 840px;
  margin: 4px auto 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--ff-mint); border: 1px solid #9dc3ae; color: var(--ff-navy);
  font-size: 13.5px; font-weight: 300;
}
.arti-analysis-pending strong { font-weight: 500; }
.arti-analysis-pending svg { color: var(--ff-teal); flex: 0 0 auto; }

/* ── Automatisierungen (/schedules): Verwaltung der bakery-web ScheduledJobs ── */
.arti-sb-schedules { text-decoration: none; }

.arti-sched-clientpick { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; font-size: 13px; }
.arti-sched-clientpick label { color: var(--ff-muted); font-weight: 600; }
.arti-sched-clientpick select {
  padding: 6px 10px; border: 1px solid var(--ff-teal-soft); border-radius: 8px;
  background: #fff; font: inherit; color: var(--ff-navy);
}

/* Die Zeilen (nowrap-Zeitplan, Toggle, Löschen) brauchen mehr Platz als der
   1040px-Editor-Rahmen — auf breiten Screens darf die Seite wachsen; erst
   darunter greift das overflow-x-Scrollen der .arti-result-table. */
.arti-schedules { max-width: 1400px; }
.arti-schedules .arti-result-table { margin-top: 6px; }
/* Job-Tabelle: linksbündig wie die Kopfzeile (die Ergebnistabelle richtet Zahlen rechts aus),
   Name/Auftrag dürfen umbrechen, die übrigen Spalten bleiben einzeilig. */
.arti-schedules .arti-result-table th, .arti-schedules .arti-result-table td { text-align: left; vertical-align: middle; }
.arti-schedules .arti-result-table td:first-child { white-space: normal; min-width: 260px; max-width: 520px; }
.arti-schedules .arti-result-table td:not(:first-child) { font-variant-numeric: normal; }
.arti-sched-prompt { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.arti-sched-editrow > td { white-space: normal; }
.arti-sched-empty { color: var(--ff-muted); text-align: center; padding: 22px 8px !important; }
.arti-schedules tr.is-disabled td { opacity: .55; }
.arti-sched-name strong { color: var(--ff-navy); }
.arti-sched-prompt { color: var(--ff-muted); font-size: 12px; margin-top: 2px; max-width: 520px; }
.arti-sched-schedule { white-space: nowrap; }
.arti-sched-next { color: var(--ff-muted); font-size: 11.5px; }
.arti-sched-status.is-successful { color: #1d6f42; }
.arti-sched-status.is-failed { color: #8b3a2c; }

/* Toggle (button_to renders a form + button) */
.arti-sched-toggle {
  width: 36px; height: 20px; border-radius: 999px; border: 1px solid var(--ff-teal-soft);
  background: #d8dee2; padding: 1px; cursor: pointer; display: inline-flex; align-items: center;
}
.arti-sched-toggle .arti-sched-knob {
  width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.arti-sched-toggle.is-on { background: var(--ff-teal); }
.arti-sched-toggle.is-on .arti-sched-knob { transform: translateX(15px); }
.arti-sched-delete { padding: 5px 8px; color: #8b3a2c; }
.arti-sched-rowactions { display: flex; align-items: center; gap: 6px; }
.arti-sched-mailpreview { padding: 5px 8px; }

/* Anlegen-Formular */
.arti-sched-new { margin-top: 18px; }
.arti-sched-new > summary { display: inline-flex; }
/* Vorlagen-Pills neben „Neue Automatisierung“ (füllen das Formular vor) */
.arti-sched-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.arti-sched-templates-label { font-size: 12px; color: var(--ff-muted); margin-right: 2px; }
.arti-sched-template { text-decoration: none; padding: 5px 11px; font-size: 12px; }
.arti-sched-template.is-active { border-color: var(--ff-navy); background: var(--ff-cream); }
.arti-sched-form {
  margin-top: 12px; padding: 16px; border: 1px solid var(--ff-teal-soft); border-radius: 12px;
  background: #fff; display: flex; flex-direction: column; gap: 12px; max-width: none; width: 100%;
}
.arti-sched-form textarea { width: 100%; }
.arti-sched-form input[type="text"] { width: 100%; }
.arti-sched-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ff-navy); }
.arti-sched-form input[type="text"], .arti-sched-form input[type="time"], .arti-sched-form textarea {
  padding: 8px 10px; border: 1px solid var(--ff-teal-soft); border-radius: 8px; font: inherit; font-weight: 400;
}
.arti-sched-form-row { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.arti-sched-days { border: 0; padding: 0; margin: 0; display: flex; gap: 6px; align-items: center; }
.arti-sched-days legend { font-size: 13px; font-weight: 600; color: var(--ff-navy); margin-bottom: 4px; }
.arti-sched-day { position: relative; }
.arti-sched-day input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.arti-sched-day span {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 28px;
  border: 1px solid var(--ff-teal-soft); border-radius: 8px; font-size: 12.5px; color: var(--ff-muted);
}
.arti-sched-day input:checked + span { background: var(--ff-teal); border-color: var(--ff-teal); color: #fff; }
.arti-sched-form-actions { display: flex; align-items: center; gap: 14px; }
.arti-sched-hint { color: var(--ff-muted); font-size: 12px; max-width: 420px; }

/* Automatisierungen: Zeile anklicken → Bearbeiten-Formular klappt darunter auf */
.arti-sched-row { cursor: pointer; }
.arti-sched-row:hover td { background: var(--ff-cream-50); }
.arti-sched-row.is-editing td { background: var(--ff-cream-50); }
.arti-sched-editrow > td { padding: 0 10px 0; border-bottom: 1px solid var(--ff-table-line); }
.arti-sched-edit > summary { display: none; }
.arti-sched-edit[open] { padding: 4px 0 12px; }
.arti-sched-editrow:has(.arti-sched-edit:not([open])) > td { padding: 0; border-bottom: 0; }
.arti-sched-hint-click { color: var(--ff-muted); font-size: 12px; margin: 6px 0 0; }

/* Mail-Bausteine über dem Auftrag (Prompt) – Klick fügt "### Baustein" unter "## Mail" ein */
.arti-sched-blocks { display: flex; flex-direction: column; gap: 6px; }
.arti-sched-blocks-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 12px; color: var(--ff-muted); font-weight: 400; }
.arti-sched-blocks-head strong { color: var(--ff-navy); font-weight: 600; font-size: 13px; }
.arti-sched-blocks-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.arti-sched-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--ff-teal-soft); background: #fff; color: var(--ff-navy);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1.3;
}
.arti-sched-chip:hover { background: var(--ff-teal-soft); }
.arti-sched-chip small { font-weight: 400; color: var(--ff-muted); }
.arti-sched-blocks textarea { min-height: 96px; resize: vertical; }
.arti-sched-blocks details { font-size: 12px; color: var(--ff-muted); font-weight: 400; }
.arti-sched-blocks details summary { cursor: pointer; }
/* „So funktioniert ## Mail“ – Erklärtabelle statt Codeblock */
.arti-sched-help-intro, .arti-sched-help-foot { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ff-muted); font-weight: 300; }
.arti-sched-help-intro code, .arti-sched-help-table code {
  font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ff-navy);
  background: var(--ff-cream-50); border: 1px solid var(--ff-teal-soft); border-radius: 4px; padding: 0 4px; white-space: nowrap;
}
.arti-sched-help-table {
  margin: 8px 0 0; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; font-weight: 300;
  background: #fff; border: 1px solid var(--ff-table-border); border-radius: 10px; overflow: hidden; color: var(--ff-navy);
}
.arti-sched-help-table th {
  text-align: left; padding: 7px 10px; font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ff-muted); background: var(--ff-cream-50); border-bottom: 1px solid var(--ff-table-border);
}
.arti-sched-help { width: 100%; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.arti-sched-help-intro code { white-space: normal; }
.arti-result-table .arti-sched-help-table { table-layout: fixed; box-shadow: none; }
.arti-result-table .arti-sched-help-table th:first-child, .arti-result-table .arti-sched-help-table td:first-child { width: 16%; }
.arti-result-table .arti-sched-help-table th:nth-child(2), .arti-result-table .arti-sched-help-table td:nth-child(2) { width: 44%; }
.arti-result-table .arti-sched-help-table td, .arti-result-table .arti-sched-help-table th { text-align: left; white-space: normal; font-variant-numeric: normal; }
.arti-sched-help-table td { padding: 8px 10px; vertical-align: top; border-bottom: 1px solid var(--ff-table-line); line-height: 1.55; }
.arti-sched-help-table tbody tr:last-child td { border-bottom: 0; }
.arti-result-table .arti-sched-help-table tbody tr:hover { background: transparent; }
.arti-sched-help-table td:first-child { font-weight: 500; white-space: nowrap; }
.arti-sched-help-table td code { display: inline-block; margin: 1px 0; white-space: normal; overflow-wrap: anywhere; }
.arti-sched-blocks details pre {
  margin: 6px 0 0; padding: 8px 10px; background: #fafaf8; border: 1px solid var(--ff-teal-soft);
  border-radius: 8px; white-space: pre-wrap; font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ff-navy);
}

/* ── Geplante Jobs (Redesign 12.09.2026, Mockup „Arti Chat 1“) ───────────── */
.arti-sched-back { margin-bottom: 10px; font-size: 13px; }
.arti-sched-back .arti-textbtn { display: inline-flex; align-items: center; gap: 4px; color: var(--ff-muted); text-decoration: none; }
.arti-flip { transform: rotate(180deg); }
.arti-sched-head { align-items: flex-end; margin-bottom: 14px; }
.arti-editor-head h1.arti-sched-title { margin: 0; font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-weight: 300; font-size: 30px; letter-spacing: -.02em; color: var(--ff-navy); }
.arti-sched-lead { margin: 4px 0 0; font-size: 13.5px; color: var(--ff-muted); }
.arti-sched-readonly { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--ff-mint); color: var(--ff-navy); font-size: 13px; }
.arti-sched-table td { vertical-align: middle; }
.arti-sched-table td:not(:first-child) { text-align: left; }
.arti-sched-sub { font-size: 12px; color: var(--ff-muted); margin-top: 2px; }
.arti-sched-recipients { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arti-sched-more { color: var(--ff-muted); }
.arti-sched-status.is-failed { font-size: 11.5px; color: #8b3a2c; margin-top: 2px; }
.arti-sched-toggle {
  display: inline-flex; align-items: center; width: 40px; height: 22px; padding: 2px; border-radius: 999px; border: 0;
  background: var(--ff-teal-soft); cursor: pointer; transition: background .16s;
}
.arti-sched-toggle .arti-sched-knob { width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .16s; box-shadow: var(--ff-shadow-sm); }
.arti-sched-toggle.is-on { background: var(--ff-navy); }
.arti-sched-toggle.is-on .arti-sched-knob { transform: translateX(18px); }
.arti-sched-toggle.is-static { cursor: default; opacity: .8; }
.arti-sched-actions-cell { width: 44px; text-align: right; }
.arti-sched-menu .arti-menu-panel { right: 0; left: auto; }
.arti-menu-item-danger { color: #8b3a2c; }
.arti-menu-item-danger .arti-icon { color: inherit; }

/* Job-/Berichts-Maske */
.arti-job-box { width: 640px; padding: 26px 28px 22px; }
.arti-job-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.arti-job-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
/* hidden muss in der Maske IMMER gewinnen: .arti-job-field & Co. setzen display,
   und das schlägt sonst das hidden-Attribut (Wochentag blieb bei „Täglich" stehen). */
.arti-job-form [hidden] { display: none !important; }
.arti-job-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--ff-navy); min-width: 0; }
.arti-job-field > span, .arti-job-field > legend { font-size: 12.5px; font-weight: 500; color: var(--ff-navy); }
.arti-job-field-wide { grid-column: 1 / -1; }
.arti-job-field select, .arti-job-field input[type=text], .arti-job-field input[type=time], .arti-job-field textarea, .arti-job-search {
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--ff-teal-soft); background: #fff;
  font: inherit; font-size: 14px; font-weight: 300; color: var(--ff-navy); outline: none;
}
.arti-job-field select:focus, .arti-job-field input:focus, .arti-job-field textarea:focus { border-color: var(--ff-navy); box-shadow: 0 0 0 3px rgba(237, 133, 120, .3); }
.arti-job-desc { margin: -4px 0 0; font-size: 13px; font-weight: 300; color: var(--ff-muted); line-height: 1.5; }
.arti-job-seg { display: flex; padding: 3px; border-radius: 10px; border: 1px solid var(--ff-teal-soft); background: var(--ff-cream-50); }
.arti-job-segopt { flex: 1; }
.arti-job-segopt input { position: absolute; opacity: 0; pointer-events: none; }
.arti-job-segopt span { display: block; text-align: center; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 300; cursor: pointer; }
.arti-job-segopt input:checked + span { background: var(--ff-navy); color: #fff; font-weight: 500; }
.arti-job-pick { border: 0; padding: 0; margin: 0; }
.arti-job-pickmode { display: flex; gap: 16px; font-size: 13px; font-weight: 300; }
.arti-job-pickmode label { display: inline-flex; align-items: center; gap: 6px; }
.arti-job-picklist { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.arti-job-picklist[hidden] { display: none; }
.arti-job-pickrows { max-height: 180px; overflow: auto; background: #fff; border: 1px solid var(--ff-teal-soft); border-radius: 10px; padding: 4px 10px; }
.arti-job-pickrow { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 300; padding: 4px 0; white-space: pre; }
.arti-job-pickrow[hidden] { display: none; }
.arti-job-hint { margin: 0; font-size: 12px; font-weight: 300; color: var(--ff-muted); line-height: 1.45; }
.arti-job-warn { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.45; color: #92400e;
                 background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 8px 10px; }
.arti-job-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 300; }
.arti-job-power { padding-top: 6px; border-top: 1px dashed var(--ff-teal-soft); }
.arti-job-schedule { border: 1px solid var(--ff-teal-soft); border-radius: 14px; background: var(--ff-cream-50); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.arti-job-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; position: relative; }
.arti-job-toggle strong { display: block; font-size: 14px; font-weight: 500; color: var(--ff-navy); }
.arti-job-toggle small { display: block; font-size: 12px; font-weight: 300; color: var(--ff-muted); margin-top: 2px; }
.arti-job-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.arti-job-switch { flex: 0 0 auto; width: 40px; height: 22px; border-radius: 999px; background: var(--ff-teal-soft); position: relative; transition: background .16s; }
.arti-job-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--ff-shadow-sm); transition: transform .16s; }
.arti-job-toggle input:checked ~ .arti-job-switch { background: var(--ff-navy); }
.arti-job-toggle input:checked ~ .arti-job-switch::after { transform: translateX(18px); }
.arti-job-schedule .arti-job-grid[hidden] { display: none; }
.arti-job-form .arti-sched-blocks { margin-top: 8px; }
.arti-job-form .arti-modal-actions {
  position: sticky; bottom: -22px; margin-top: 4px; padding: 14px 0 4px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0, #fff 14px);
}
@media (max-width: 640px) { .arti-job-grid { grid-template-columns: 1fr; } .arti-job-box { padding: 20px 16px; } }

/* Sidebar: Zähler, Ordner, Chat-Menüs */
.arti-sb-badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 11.5px; font-weight: 500; text-align: center; }
.arti-sb-heading-row { display: flex; align-items: center; justify-content: space-between; }
.arti-sb-headbtn { display: inline-flex; align-items: center; gap: 3px; background: transparent; border: 0; color: rgba(180, 225, 215, .8); font: inherit; font-size: 11px; letter-spacing: 0; text-transform: none; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.arti-sb-headbtn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.arti-sb-headbtn .arti-icon { color: inherit; }
.arti-sb-hiddenform { display: none; }
.arti-sb-chat { position: relative; display: flex; align-items: flex-start; gap: 2px; }
.arti-sb-chat > .arti-sb-entry { flex: 1; min-width: 0; }
.arti-sb-chat .arti-sb-dots { opacity: 0; transition: opacity .12s; margin-top: 4px; }
.arti-sb-chat:hover .arti-sb-dots, .arti-sb-chat .arti-menu[open] .arti-sb-dots, .arti-sb-folder-head:hover .arti-sb-dots { opacity: 1; }
.arti-sb-entry-menu { position: static; }
.arti-sb-entry-menu .arti-menu-panel { left: auto; right: 4px; top: 100%; margin-top: 2px; width: 220px; }
.arti-sb-folder { margin: 2px 0; }
.arti-sb-folder-head {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; list-style: none; cursor: pointer;
  color: rgba(242, 235, 227, .9); font-size: 13px; font-weight: 500; position: relative;
}
.arti-sb-folder-head::-webkit-details-marker { display: none; }
.arti-sb-folder-head:hover { background: rgba(255, 255, 255, .06); }
.arti-sb-folder-head .arti-icon { color: rgba(242, 235, 227, .75); flex: 0 0 auto; }
.arti-sb-folder-caret { transition: transform .18s; }
.arti-sb-folder[open] .arti-sb-folder-caret { transform: rotate(90deg); }
.arti-sb-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arti-sb-folder-count { font-size: 11px; color: rgba(242, 235, 227, .55); }
.arti-sb-list-indent { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .1); margin-left: 12px; }
.arti-sb-folder-row { position: relative; }
.arti-sb-folder-row > .arti-sb-folder > .arti-sb-folder-head { padding-right: 34px; }
.arti-sb-folder-menu { position: absolute; top: 3px; right: 4px; }
.arti-sb-folder-menu > .arti-sb-dots { opacity: 0; }
.arti-sb-folder-row:hover .arti-sb-folder-menu > .arti-sb-dots, .arti-sb-folder-menu[open] > .arti-sb-dots { opacity: 1; }
.arti-sb-folder-menu .arti-menu-panel { right: 0; left: auto; top: 100%; }

/* Filialauswahl: alles Sichtbare an-/abwählen (große Kunden haben 50+ Filialen) */
.arti-job-picktools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arti-job-pickbtn {
  border: 1px solid var(--ff-teal-soft); background: #fff; border-radius: 8px; padding: 4px 10px;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--ff-navy); cursor: pointer;
}
.arti-job-pickbtn:hover { background: var(--ff-cream); border-color: var(--ff-navy); }
.arti-job-pickcount { margin-left: auto; font-size: 11.5px; font-weight: 300; color: var(--ff-muted); }

/* Kundenauswahl auf der Jobs-Seite: suchbares Dropdown statt <select> */
.arti-sched-clientlabel { color: var(--ff-muted); font-weight: 600; }
.arti-sched-clientmenu { position: relative; }
.arti-sched-clientbtn {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px;
  border: 1px solid var(--ff-teal-soft); background: #fff; color: var(--ff-navy);
  font-size: 14px; font-weight: 300; cursor: pointer; list-style: none; max-width: 380px;
}
.arti-sched-clientbtn::-webkit-details-marker { display: none; }
.arti-sched-clientbtn:hover { border-color: var(--ff-navy); }
.arti-sched-clientbtn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arti-sched-clientmenu[open] .arti-sched-clientbtn .arti-icon { transform: rotate(180deg); }
.arti-sched-clientpanel { left: 0; right: auto; width: 340px; max-width: 90vw; padding: 10px; }
.arti-sched-clientpanel .arti-client-search { width: 100%; margin: 0 0 8px; }
.arti-sched-clientpanel .arti-client-options { max-height: 280px; overflow-y: auto; margin: 0; }
.arti-client-option.is-current button { background: var(--ff-mint); font-weight: 500; }

/* Absenden-Knopf mit Spinner (Anlegen dauert: MCP, S3, neuer Seitenaufbau) */
.arti-btn.is-busy { position: relative; padding-left: 36px; cursor: progress; opacity: .9; }
.arti-btn.is-busy::before {
  content: ""; position: absolute; left: 15px; top: 50%; margin-top: -7px; width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: arti-spin .7s linear infinite;
}
.arti-btn-outline.is-busy::before { border-color: var(--ff-teal-soft); border-top-color: var(--ff-navy); }
@keyframes arti-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .arti-btn.is-busy::before { animation-duration: 2.4s; } }

/* ── Sidebar-Feedback 21.09.2026: Insights · Verlauf im Berichtsmenü · Ordner ─ */
.arti-sb-report-count { flex: 0 0 auto; min-width: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(242, 235, 227, .75); font-size: 10.5px; line-height: 18px; text-align: center; }
.arti-sb-report:hover .arti-sb-report-count { background: rgba(255, 255, 255, .16); color: #fff; }
.arti-sb-report-menu .arti-menu-panel { max-height: min(70vh, 560px); overflow-y: auto; }
.arti-menu-empty { padding: 4px 12px 8px; font-size: 12px; color: var(--ff-muted); }
.arti-menu-item-history { align-items: flex-start; }
.arti-menu-item-history .arti-icon { margin-top: 2px; }
.arti-menu-item-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.arti-menu-item-title { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arti-menu-item-sub { display: block; font-size: 11px; color: var(--ff-muted-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arti-menu-item-more { color: var(--ff-teal); font-weight: 500; }
.arti-sb-insights .arti-sb-badge { margin-left: auto; margin-right: 6px; }
.arti-sb-insights .arti-sb-caret { margin-left: 0; }
.arti-sb-insights[open] .arti-sb-caret { transform: rotate(180deg); }
.arti-sb-insight-groups { padding: 2px 0 6px 12px; display: flex; flex-direction: column; gap: 2px; border-left: 0; animation: arti-in .22s cubic-bezier(.22, .61, .36, 1); }
.arti-sb-insight-group > .arti-sb-folder-head { border-left: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; }
.arti-sb-empty-indent { padding-left: 24px; }
.arti-sb-more { display: block; padding: 6px 10px; font-size: 12px; color: rgba(180, 225, 215, .85); text-decoration: none; }
.arti-sb-more:hover { color: #fff; }

/* /reports — Verlauf je Berichtsart */
.arti-reports-page { max-width: 1100px; }
.arti-reports-group { margin-top: 26px; }
.arti-reports-group-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; font-weight: 500; color: var(--ff-navy); }
.arti-reports-group-title .arti-icon { color: var(--ff-teal); }
.arti-reports-group-count { font-size: 12px; font-weight: 400; color: var(--ff-muted-2); }
.arti-reports-only { margin-left: auto; }
.arti-reports-empty { margin: 8px 0 0; font-size: 13px; color: var(--ff-muted); }
.arti-reports-table td:first-child { white-space: normal; min-width: 260px; max-width: 560px; }
.arti-reports-table td a { color: var(--ff-navy); text-decoration: none; border-bottom: 1px solid var(--ff-teal-soft); }
.arti-reports-table td a:hover { color: var(--ff-teal); border-bottom-color: var(--ff-teal); }