/* Agenten-Konsole im Nymil-Design-System (Fabian 16.10.2026, #1803).
   Tokens = nymil-3-0/app/css/tokens.css. Orange (--hl) nur als kleines Highlight, nie Fläche, nie Status.
   Überschreibt die Inline-Styles aus app.js über Attribut-Selektoren, damit app.js unangetastet bleibt. */
@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

html #supportRoot {
  --bg: #FFFFFF; --bg-2: #F3F5F7; --ink: #14171A; --ink-2: #4F565E; --ink-3: #676F77;
  --line: #DCE0E4; --line-2: #ECEFF2; --hl: #EC663D; --hl-soft: #FDEDE7; --hl-line: #F7D6C9;
  --ok: #1B7F4E; --ok-soft: #E3F1E8; --bad: #C2352B; --bad-soft: #FCEBEA; --warn: #B7791F; --warn-soft: #FBF0D3;
  --info: #2F6FB2; --info-soft: #E1EEFA; --mint: #3E9E6E; --mint-soft: #DFF3E7; --violet: #6B5BB5; --violet-soft: #EBE7F8;
  --dark: #161A1F; --dark-line: #2B3138; --dark-ink: #E8ECF0; --dark-mute: #8B949E; --dark-us: #FF9A6B;
  --head: "Schibsted Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --text: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-family: var(--text) !important; background: var(--bg-2) !important; color: var(--ink) !important;
  border-radius: 6px !important; box-shadow: none !important; border: 1px solid var(--line);
}
html #supportRoot h2, html #supportRoot h3, html #supportRoot h4 { font-family: var(--head) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
html #supportRoot h2 i { color: var(--ink-2) !important; }
html #supportRoot ::selection { background: var(--hl-soft); }

/* Flächen: 1 px Linie, Radius 6, kein Schatten, kein Hover-Hüpfen */
html #supportRoot #agentSteuerung, html #supportRoot #agentTag, html #supportRoot #agentPostfachBlock,
html #supportRoot #agentNewsBlock, html #supportRoot #agentLoeschBlock,
html #supportRoot #agentQueueContainer > div[id^="agentCard"] {
  border-radius: 6px !important; box-shadow: none !important; border: 1px solid var(--line) !important; background: var(--bg) !important; transform: none !important;
}
html #supportRoot #agentQueueContainer > div[id^="agentCard"]:hover { box-shadow: none !important; transform: none !important; }
html #supportRoot #agentQueueContainer > div[id^="agentCard"][style*="#FFB3AE"] { border-left: 3px solid var(--warn) !important; }
html #supportRoot #agentPostfachBlock { border-color: var(--warn) !important; }
html #supportRoot #agentLoeschBlock { border-color: var(--bad) !important; }
html #supportRoot #agentHinweis { background: var(--warn-soft) !important; border-color: var(--warn) !important; color: var(--ink) !important; border-radius: 4px !important; }

/* Steuerung = dunkles Leitstand-Widget (Markenzeichen) */
html #supportRoot #agentSteuerung { background: var(--dark) !important; color: var(--dark-ink) !important; border-color: var(--dark-line) !important; font-family: var(--mono) !important; font-size: 12px !important; }
html #supportRoot #agentSteuerung a { color: var(--dark-us) !important; }
html #supportRoot #agentSteuerung button { background: transparent !important; color: var(--dark-ink) !important; border: 1px solid var(--dark-line) !important; border-radius: 4px !important; }
html #supportRoot #agentSteuerung button:hover { border-color: var(--dark-ink) !important; filter: none !important; }
html #supportRoot #agentSteuerung i[style*="#8e8e93"], html #supportRoot #agentSteuerung span[style*="#8e8e93"] { color: var(--dark-mute) !important; }
html #supportRoot #agentSteuerung [style*="#34C759"] { color: #7DD3A5 !important; }
html #supportRoot #agentSteuerung [style*="#FF3B30"] { color: #F2A08A !important; }
html #supportRoot #agentSteuerung [style*="color: #ff6b35"] { color: var(--dark-us) !important; }
html #supportRoot .agent-remote-hinweis { color: var(--dark-mute); }
html #supportRoot.arbeitsmodus #agentSteuerung { border-color: var(--dark-us) !important; }

/* Knöpfe: genau ein Primär (Senden) in --ink, Rest weiß mit Rand, Gefährlich = --bad-Rand */
html #supportRoot button { font-family: var(--text) !important; border-radius: 4px !important; font-weight: 600 !important; transition: none !important; }
html #supportRoot button:hover { filter: none !important; transform: none !important; }
html #supportRoot button[style*="background: #ff6b35"] { background: var(--ink) !important; color: #fff !important; border: 1px solid var(--ink) !important; }
html #supportRoot button[style*="linear-gradient"] { background: var(--bg) !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; box-shadow: none !important; border-radius: 4px !important; }
html #supportRoot button[style*="border: 1px solid #ff6b35"] { border-color: var(--ink) !important; color: var(--ink) !important; background: var(--bg) !important; }
html #supportRoot button[style*="border: 1px solid #34C759"] { border-color: var(--ok) !important; color: var(--ok) !important; }
html #supportRoot button[style*="border: 1px solid #ff9500"] { border-color: var(--warn) !important; color: var(--warn) !important; }
html #supportRoot button[style*="border: 1px solid #FF3B30"], html #supportRoot button[style*="background: #FF3B30"] { background: var(--bg) !important; border: 1px solid var(--bad) !important; color: var(--bad) !important; }
html #supportRoot button[style*="border: 1px solid #d1d1d6"] { border-color: var(--line) !important; color: var(--ink) !important; }
html #supportRoot button[style*="background: none"] { color: var(--ink-2) !important; text-decoration: underline; font-weight: 500 !important; }
html #supportRoot button[style*="#ffe9df"] { background: var(--hl-soft) !important; border-color: var(--ink) !important; color: var(--ink) !important; }

/* Status-Pills nach Nymil-Farbsystem: rot = Problem/wartet auf dich, gelb = offen/Dritte, grau = unterwegs, grün = erledigt */
html #supportRoot span[style*="border-radius: 999px"] { font-size: 12.5px !important; font-weight: 600 !important; border-radius: 4px !important; }
html #supportRoot span[style*="color: #FF3B30"][style*="border-radius: 999px"] { color: var(--bad) !important; background: var(--bad-soft) !important; }
html #supportRoot span[style*="color: #e64a19"][style*="border-radius: 999px"] { color: var(--warn) !important; background: var(--warn-soft) !important; }
html #supportRoot span[style*="color: #ff6b35"][style*="border-radius: 999px"] { color: var(--info) !important; background: var(--info-soft) !important; }
html #supportRoot span[style*="color: #48484A"][style*="border-radius: 999px"] { color: var(--ink-2) !important; background: var(--line-2) !important; }
html #supportRoot span[style*="color: #248A3D"][style*="border-radius: 999px"] { color: var(--ok) !important; background: var(--ok-soft) !important; }

/* Entwurf, Bestellungen, Zähler, Links, Icons */
html #supportRoot div[style*="background: #fff4ef"][style*="border: 1px solid #f7d6c9"] { background: var(--bg-2) !important; border: 1px solid var(--line) !important; border-left: 3px solid var(--hl) !important; border-radius: 4px !important; }
html #supportRoot div[style*="color: #ff6b35; margin-bottom: 4px"] { color: var(--hl) !important; font-family: var(--mono) !important; letter-spacing: .02em; }
html #supportRoot a[style*="#fff4ef"] { background: var(--bg) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; border-radius: 4px !important; font-family: var(--mono) !important; font-size: 11.5px !important; }
html #supportRoot summary[style*="color: #ff6b35"], html #supportRoot a[style*="color: #ff6b35"] { color: var(--ink-2) !important; }
html #supportRoot summary[style*="color: #ff6b35"]:hover { color: var(--ink) !important; text-decoration: underline; text-decoration-color: var(--hl); }
html #supportRoot i[style*="color: #ff6b35"] { color: var(--ink-3) !important; }
html #supportRoot #agentZaehler button { border-radius: 4px !important; border-color: var(--line) !important; color: var(--ink-2) !important; }
html #supportRoot #agentZaehler button[style*="#ff6b35"] { border-color: var(--ink) !important; color: var(--ink) !important; background: var(--bg) !important; border-bottom: 2px solid var(--hl) !important; }
html #supportRoot #agentTag button[id^="agentTagBtn"] { border-radius: 4px !important; }
html #supportRoot #agentNewsBlock { background: var(--bg) !important; }
html #supportRoot div[style*="background: #f8f8fa"] { background: var(--bg-2) !important; border-radius: 4px !important; }
html #supportRoot input, html #supportRoot textarea, html #supportRoot select { font-family: var(--text) !important; border-radius: 4px !important; border-color: var(--line) !important; color: var(--ink); }
html #supportRoot input:focus, html #supportRoot textarea:focus { border-color: var(--info) !important; box-shadow: 0 0 0 3px var(--info-soft) !important; }
html #supportRoot span[style*="font-weight: 400"][style*="#8e8e93"], html #supportRoot div[style*="color: #8e8e93"] { color: var(--ink-3) !important; }
html #supportRoot [style*="color: #6e6e73"] { color: var(--ink-2) !important; }
html #supportRoot ::-webkit-scrollbar-thumb { background: var(--line) !important; border-radius: 0 !important; }

/* Chat-Panel aus (Fabian 16.10.) */
html #supportRoot #agentChat, html #supportRoot .sac { display: none !important; }