@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;
  --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);
}

* { 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;
}

/* ─── Header bar (logo left · actions right) ─────────────────────────── */
.arti-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 22px;
  background: #fff;
  border-bottom: 1px solid var(--ff-line);
  box-shadow: 0 1px 3px rgba(20, 48, 59, 0.06);
}
.arti-header-left,
.arti-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.arti-header-right { margin-left: auto; }
.arti-logo { height: 34px; width: auto; display: block; margin-right: 4px; }
.arti-header-divider {
  width: 1px;
  height: 22px;
  background: var(--ff-line);
  margin: 0 2px;
}
.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; }

/* ═══════════════════════════════════════════════════════════════════════
   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-header, .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;
}
#arti-panel, #arti-body, #arti-composer, body.arti-standalone { background: #F9F6F3; }

/* 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; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.arti-header { box-shadow: var(--ff-shadow-sm); }
.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; }
.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-teal-soft); border-radius: 14px; overflow: hidden;
  box-shadow: var(--ff-shadow-sm); font-size: 14px; margin: 14px 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-teal-soft); padding: 11px 16px; text-align: left;
}
.arti-assistant td { border-bottom: 1px solid var(--ff-line); padding: 12px 16px; 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-teal-soft); 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-teal-soft); padding: 11px 16px;
}
.arti-result-table td { border-bottom: 1px solid var(--ff-line); padding: 12px 16px; 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, #F9F6F3 62%, rgba(249,246,243,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; }

/* ── 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; }

/* ── Daily status briefing (proactive card at the top of a fresh chat) ────── */
.arti-briefing {
  align-self: stretch; background: #fff; border: 1px solid var(--ff-teal-soft);
  border-left: 3px solid var(--ff-teal); border-radius: 12px;
  padding: 12px 16px; margin: 2px 0 6px; box-shadow: var(--ff-shadow-sm);
}
.arti-briefing-head {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ff-teal); margin-bottom: 6px;
}
.arti-briefing-body { font-size: 14px; line-height: 1.55; color: var(--ff-ink); }
.arti-briefing-body :first-child { margin-top: 0; }
.arti-briefing-body :last-child { margin-bottom: 0; }
.arti-briefing-loading { display: inline-flex; align-items: center; gap: 8px; color: var(--ff-muted); font-size: 13px; }
.arti-briefing-loading .arti-spinner { width: 15px; height: 15px; border-width: 2px; }
.arti-briefing-empty { color: var(--ff-muted); font-size: 13px; }

/* ── "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) — burger header. Desktop (≥641px) stays pixel-identical:
   the toggle + button are display:none outside the media query, and NOTHING
   above this block is touched.
   ═══════════════════════════════════════════════════════════════════════ */
.arti-menu-toggle, .arti-menu-btn { display: none; }

@media (max-width: 640px) {
  .arti-header { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  /* Flatten the two wrappers so every header item is a direct flex child and
     individually orderable/hideable. */
  .arti-header-left, .arti-header-right { display: contents; }

  /* ── Closed bar: burger (left) · Neuer Chat (right). Logo is dropped on
     mobile — the burger takes its place. ─────────────────────────────────── */
  .arti-logo { display: none; }
  .arti-menu-btn  { order: 0; margin-right: auto; }
  .arti-newchat-form { order: 9; }

  /* Everything else is out of the bar until the menu opens. */
  .arti-login,
  .arti-header-divider,
  .arti-mode,
  .arti-context-label,
  .arti-header-right > a.arti-pillbtn,
  .arti-chats,
  .arti-oprompt { display: none; }

  /* ── Burger button ───────────────────────────────────────────────────── */
  .arti-menu-toggle { display: none; }        /* checkbox: state only, never shown */
  .arti-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; position: relative;
  }
  .arti-menu-btn::before {
    content: ""; width: 17px; height: 11px;
    border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    box-shadow: inset 0 5px 0 -0.75px currentColor;
    transition: transform .15s ease;
  }
  /* Open → navy pill, three lines collapse to an X (two gradients = a plus,
     rotate 45° = X). */
  .arti-menu-toggle:checked + .arti-menu-btn {
    background: var(--ff-navy); border-color: var(--ff-navy); color: #fff;
  }
  .arti-menu-toggle:checked + .arti-menu-btn::before {
    width: 16px; height: 16px; border: 0;
    background:
      linear-gradient(currentColor, currentColor) center / 16px 1.6px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.6px 16px no-repeat;
    box-shadow: none; transform: rotate(45deg);
  }

  /* ── Open menu: items become full-width rows under the bar ───────────── */
  /* Mandanten-Zeile (from the pinned-client label) — first row, top divider. */
  .arti-menu-toggle:checked ~ .arti-header-left .arti-context-label.arti-context-client {
    display: flex; flex: 0 0 100%; order: 10; flex-direction: column;
    align-items: flex-start; gap: 2px; min-height: 44px; white-space: normal;
    border-top: 1px solid var(--ff-line); margin-top: 4px; padding: 8px 4px 4px;
    font-size: 15px; font-weight: 500; color: var(--ff-navy); cursor: default;
  }
  .arti-menu-toggle:checked ~ .arti-header-left .arti-context-client .arti-icon { display: none; }
  .arti-menu-toggle:checked ~ .arti-header-left .arti-context-client::before {
    content: "Mandant"; font-size: 10.5px; font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ff-muted);
  }

  /* Login as a quiet status line (not an action). */
  .arti-menu-toggle:checked ~ .arti-header-left .arti-login {
    display: block; flex: 0 0 100%; order: 11; width: 100%;
  }
  .arti-menu-toggle:checked ~ .arti-header-left .arti-login summary.arti-login-authed {
    display: flex; align-items: center; gap: 6px;
    border: 0; background: transparent; box-shadow: none; padding: 2px 4px;
    min-height: auto; font-size: 12px; font-weight: 500; color: var(--ff-teal);
  }

  /* Tickets/Handbuch links + "Deine Chats" as tappable rows. */
  /* Tickets/Handbuch = flex rows. "Deine Chats" = a full-width BLOCK, so its
     summary stacks ABOVE the list (display:flex here would put them side by side). */
  .arti-menu-toggle:checked ~ .arti-header-right > a.arti-pillbtn {
    display: flex; flex: 0 0 100%; width: 100%; order: 12;
  }
  .arti-menu-toggle:checked ~ .arti-header-right .arti-chats {
    display: block; flex: 0 0 100%; width: 100%; position: static; order: 13;
  }
  .arti-menu-toggle:checked ~ .arti-header-right > a.arti-pillbtn,
  .arti-menu-toggle:checked ~ .arti-header-right .arti-chats > summary {
    display: flex; justify-content: flex-start; align-items: center; width: 100%;
    min-height: 44px; padding: 0 8px; border: 0; background: transparent;
    border-radius: 10px; font-weight: 500;
  }
  .arti-menu-toggle:checked ~ .arti-header-right > a.arti-pillbtn:hover,
  .arti-menu-toggle:checked ~ .arti-header-right > a.arti-pillbtn:active,
  .arti-menu-toggle:checked ~ .arti-header-right .arti-chats > summary:hover,
  .arti-menu-toggle:checked ~ .arti-header-right .arti-chats > summary:active {
    background: var(--ff-mint);
  }
  /* "Deine Chats" opens inline (a static panel), not as a second overlay — the
     list sits BELOW the summary on a plain white background. MUST stay inside
     the media query, else the desktop dropdown breaks. */
  .arti-menu-toggle:checked ~ .arti-header-right .arti-chats-panel {
    position: static; width: 100%; max-height: 40vh; overflow-y: auto;
    margin-top: 4px; border: 1px solid var(--ff-line); border-radius: 10px;
    box-shadow: none; background: #fff; padding: 4px;
  }
  /* Past-chat entries were oversized on mobile — tighten them. */
  .arti-menu-toggle:checked ~ .arti-header-right .arti-chats-link { padding: 6px 10px; }
  .arti-menu-toggle:checked ~ .arti-header-right .arti-chats-title { font-size: 12px; }
  .arti-menu-toggle:checked ~ .arti-header-right .arti-chats-meta { font-size: 10px; }
  .arti-menu-toggle:checked ~ .arti-header-right .arti-chats-empty { font-size: 12px; }

  /* Popovers that can still open: keep them inside the viewport. */
  .arti-login-panel, .arti-oprompt-panel {
    position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px;
    width: auto; max-height: 60vh; overflow-y: auto;
  }

  /* ── 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;
  }
  #arti-chips::-webkit-scrollbar { display: none; }
  .arti-chip { flex: 0 0 auto; min-height: 38px; white-space: nowrap; }

  /* ── Composer: 16px font prevents iOS zoom-on-focus ──────────────────── */
  #arti-composer { padding: 12px 12px 16px; }
  #arti-input { font-size: 16px; padding: 13px 52px 13px 16px; }
  #arti-send { width: 40px; height: 40px; }

  /* ── Body / hero / bubbles ───────────────────────────────────────────── */
  #arti-body { padding: 16px 14px 12px; }
  .arti-hero-avatar { width: 40px; height: 40px; }
  .arti-bubble { font-size: 14.5px; padding: 10px 13px; }

  /* ── 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; }
}