/** * idf-app-toni-panel — globales Toni-Chat-Panel für apps-v2 * * Markup: `_shared/blocks/app-toni-panel/idf-app-toni-panel.php` * JS: `_shared/blocks/app-toni-panel/idf-app-toni-panel.js` * Voraussetzung: `_shared/tokens/design-tokens/idf-tokens.css` ist vorher geladen. * * Layout-Konzept (Spiegel der App-Sidebar, nur rechts): * - Panel position:fixed, rechts, full-height, weißer Background. * - data-state="collapsed" (Default) → schmale Schiene, nur Toni-Icon * - data-state="expanded" → Chat-Spalte * - body bekommt `padding-right: var(--idf-toni-w)` — ein Wert, der je * nach State umschaltet (siehe :root unten + body-Selektor). Analog zur * Sidebar, die das mit padding-left macht. * * State wird in localStorage gemerkt (`idf-toni-state`) und synchron im * auf gespiegelt (idf-app-toni-panel.js), * damit es beim ersten Paint keinen Breite-Sprung gibt. * * Audit L5/#201 (L-E8): var()-Fallbacks der urspruenglichen Beige-Palette * (#e6e3df/#1c1b1a/#6b6660/#f4f2ef, Radius/Weight/Shadow-Altwerte) auf die * exakten Token-Werte normalisiert (Regel 17). Render-identisch: die Tokens * laden auf jeder Seite, es rendern seit jeher die Token-Werte. */ :root { --idf-toni-w-collapsed: 56px; --idf-toni-w-expanded: 380px; --idf-toni-w: var(--idf-toni-w-collapsed); } html[data-toni-state="expanded"] { --idf-toni-w: var(--idf-toni-w-expanded); } /* Padding nur, wenn das Panel aktiv ist (JS setzt data-toni-state nur, wenn ein Agent für die Seite zuständig ist). Sonst kein rechter Leerraum. */ html[data-toni-state] body { padding-right: var(--idf-toni-w); transition: padding-right var(--motion-medium, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)); } /* === Container ============================================================ */ .idf-toni { position: fixed; top: 0; right: 0; bottom: 0; width: var(--idf-toni-w); display: flex; flex-direction: column; background: var(--white, #fff); border-left: 1px solid var(--line, #e5e5e5); z-index: var(--z-sticky, 10); overflow: hidden; transition: width var(--motion-medium, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)); } .idf-toni[data-state="expanded"] { width: var(--idf-toni-w-expanded); } /* === Collapsed Schiene ===================================================== Nur sichtbar im collapsed-State: der Launcher-Button, der Toni öffnet. Vertikal an x = 56/2 = 28, also auf der Schienen-Mitte. */ .idf-toni-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-3, 12px); padding: var(--space-3, 12px) 0; } .idf-toni[data-state="expanded"] .idf-toni-rail { display: none; } .idf-toni-launch { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: var(--primary, #c8134b); color: var(--white, #fff); overflow: hidden; cursor: pointer; transition: filter var(--motion-base, 120ms), box-shadow var(--motion-base, 120ms); } .idf-toni-launch:hover { filter: brightness(1.04); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08)); } .idf-toni-launch-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .idf-toni-launch-fallback { font-size: var(--font-md, 0.875rem); font-weight: var(--weight-bold, 700); } /* === Header (nur expanded) ================================================= */ .idf-toni-head { display: flex; align-items: center; gap: var(--space-3, 12px); padding: var(--space-4, 16px); border-bottom: 1px solid var(--line, #e5e5e5); min-height: 76px; flex-shrink: 0; } .idf-toni[data-state="collapsed"] .idf-toni-head { display: none; } .idf-toni-avatar { position: relative; flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 999px; overflow: hidden; background: var(--primary, #c8134b); color: var(--white, #fff); } .idf-toni-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .idf-toni-avatar-fallback { font-size: var(--font-base, 1rem); font-weight: var(--weight-bold, 700); } .idf-toni-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: var(--leading-snug, 1.2); } .idf-toni-title strong { font-size: var(--font-base, 1rem); font-weight: var(--weight-bold, 700); color: var(--ink, #111111); } .idf-toni-title span { margin-top: 2px; font-size: var(--font-md, 0.875rem); color: var(--mid, #555555); } .idf-toni-collapse, .idf-toni-clear { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-xs, 3px); background: transparent; color: var(--mid, #555555); cursor: pointer; transition: color var(--motion-base, 120ms), background var(--motion-base, 120ms); } .idf-toni-collapse:hover { color: var(--ink, #111111); } /* Trash-Look wie die Listen-Lösch-Buttons (.idf-list-delete-btn): Brand-rot + dezent getöntes Background im Hover. */ .idf-toni-clear:hover { background: rgba(200, 19, 75, 0.12); color: var(--primary, #c8134b); } /* === Verlauf =============================================================== */ .idf-toni-log { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4, 16px); display: flex; flex-direction: column; gap: var(--space-3, 12px); } .idf-toni[data-state="collapsed"] .idf-toni-log { display: none; } /* Nachrichten-Blasen */ .idf-toni-msg { max-width: 90%; padding: var(--space-2, 8px) var(--space-3, 12px); border-radius: var(--radius-md, 6px); font-size: var(--font-base, 1rem); line-height: var(--leading-relax, 1.5); color: var(--ink, #111111); white-space: pre-wrap; word-break: break-word; } .idf-toni-msg--user { align-self: flex-end; background: var(--primary, #c8134b); color: var(--white, #fff); border-bottom-right-radius: var(--radius-xs, 3px); } .idf-toni-msg--bot { align-self: flex-start; background: var(--neutral-bg, #f0f1f3); border-bottom-left-radius: var(--radius-xs, 3px); } .idf-toni-msg--bot strong { font-weight: var(--weight-bold, 700); } .idf-toni-msg--bot code { padding: 1px 5px; border-radius: var(--radius-xs, 3px); background: var(--white, #fff); border: 1px solid var(--line, #e5e5e5); /* #199 H6: --font-mono-Token. Superset-Stack ergänzt "Cascadia Code" gegenüber dem alten lokalen Stack (Report-Auflösung: eine gemeinsame Mono-Definition statt drei Varianten). */ font-family: var(--font-mono, ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace); font-size: 0.85em; } /* Deep-Link auf einen Datensatz: [Titel](idf:collection:id). Klick öffnet das Detail-Modal in-page (idf:toni-open) bzw. navigiert zum Datensatz, wenn er in einem anderen Modul liegt. */ .idf-toni-msg--bot .idf-toni-link { color: var(--primary, #c8134b); font-weight: var(--weight-medium, 500); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .idf-toni-msg--bot .idf-toni-link:hover { text-decoration: none; } /* === Schreib-Bestätigung (Ja/Abbrechen) =================================== */ .idf-toni-action { align-self: flex-start; display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; } .idf-toni-action button { font: inherit; font-size: var(--font-md, 0.875rem); font-weight: var(--weight-medium, 500); padding: var(--space-2, 8px) var(--space-3, 12px); border-radius: var(--radius-md, 6px); border: 1px solid transparent; cursor: pointer; transition: filter var(--motion-base, 120ms), background var(--motion-base, 120ms); } .idf-toni-action-yes { background: var(--primary, #c8134b); color: var(--white, #fff); } .idf-toni-action-yes:hover { filter: brightness(1.05); } .idf-toni-action-no { background: var(--white, #fff); border-color: var(--line, #e5e5e5); color: var(--ink, #111111); } .idf-toni-action-no:hover { background: var(--neutral-bg, #f0f1f3); } .idf-toni-action.is-done button { opacity: 0.5; cursor: default; pointer-events: none; } .idf-toni-action-note { font-size: var(--font-md, 0.875rem); color: var(--mid, #555555); } /* Markdown-Ueberschriften (# …) als fette Zeile, Trenner (---) als Linie. */ .idf-toni-msg--bot .idf-toni-h { display: block; margin: var(--space-2, 8px) 0 2px; font-weight: var(--weight-bold, 700); } .idf-toni-msg--bot .idf-toni-h:first-child { margin-top: 0; } .idf-toni-msg--bot .idf-toni-hr { display: block; height: 1px; margin: var(--space-2, 8px) 0; background: var(--line, #e5e5e5); } /* Tipp-Indikator */ .idf-toni-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: var(--space-3, 12px); } .idf-toni-typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--mid, #555555); opacity: 0.5; animation: idf-toni-bounce 1.2s infinite ease-in-out; } .idf-toni-typing span:nth-child(2) { animation-delay: 0.15s; } .idf-toni-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes idf-toni-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 0.9; } } /* === Treffer-Karte (Werkzeug: Bild + Daten + Lagerort) ==================== */ .idf-toni-card { align-self: flex-start; width: 100%; display: flex; gap: var(--space-3, 12px); padding: var(--space-3, 12px); border: 1px solid var(--line, #e5e5e5); border-radius: var(--radius-md, 6px); background: var(--white, #fff); cursor: pointer; transition: border-color var(--motion-base, 120ms), box-shadow var(--motion-base, 120ms); } .idf-toni-card:hover { border-color: var(--primary, #c8134b); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08)); } .idf-toni-card-img { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-sm, 4px); object-fit: cover; background: var(--neutral-bg, #f0f1f3); } .idf-toni-card-img--empty { display: flex; align-items: center; justify-content: center; color: var(--mid, #555555); font-size: 22px; } .idf-toni-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .idf-toni-card-name { font-size: var(--font-base, 1rem); font-weight: var(--weight-bold, 700); color: var(--ink, #111111); } .idf-toni-card-meta { font-size: var(--font-md, 0.875rem); color: var(--mid, #555555); } .idf-toni-card-ort { margin-top: 2px; font-size: var(--font-md, 0.875rem); font-weight: var(--weight-medium, 500); color: var(--ink, #111111); } .idf-toni-card-ort i { width: 16px; text-align: center; color: var(--primary, #c8134b); } /* === Eingabe ============================================================== */ .idf-toni-input { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); padding: var(--space-3, 12px); border-top: 1px solid var(--line, #e5e5e5); } .idf-toni[data-state="collapsed"] .idf-toni-input { display: none; } .idf-toni-field { flex: 1 1 auto; min-width: 0; resize: none; max-height: 120px; padding: var(--space-2, 8px) var(--space-3, 12px); border: 1px solid var(--line, #e5e5e5); border-radius: var(--radius-md, 6px); font-family: inherit; font-size: var(--font-base, 1rem); line-height: var(--leading-relax, 1.5); color: var(--ink, #111111); background: var(--white, #fff); } .idf-toni-field:focus { outline: none; border-color: var(--primary, #c8134b); } .idf-toni-send { flex-shrink: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--space-2, 8px); height: 40px; padding: 0 var(--space-3, 12px); border: 0; border-radius: var(--radius-md, 6px); background: var(--primary, #c8134b); color: var(--white, #fff); font-size: var(--font-base, 1rem); font-weight: var(--weight-medium, 500); cursor: pointer; transition: filter var(--motion-base, 120ms); } .idf-toni-send:hover { filter: brightness(1.08); } .idf-toni-send:disabled { opacity: 0.5; cursor: default; } /* === Mobile =============================================================== Wie die Sidebar: Panel überlagert statt schiebt, Content nutzt volle Breite. */ @media (max-width: 720px) { body { padding-right: 0; } .idf-toni { transform: translateX(100%); } .idf-toni[data-state="expanded"] { transform: translateX(0); box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.25)); } }