/* Haystack Chat Widget — Styles Scope: #PlusChat und alle .pc-* Elemente darin. Wird von widget.js dynamisch als in eingefügt. */ #PlusChat { font-family: system-ui, -apple-system, sans-serif; } /* ------------------------------------------------------------------------- Layout ---------------------------------------------------------------------- */ .pc-wrap { display: flex; flex-direction: column; } /* ------------------------------------------------------------------------- Header ---------------------------------------------------------------------- */ .pc-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: #e8720c; color: #fff; } .pc-title { font-weight: 700; font-size: 1rem; } .pc-close { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0; } .pc-close:hover { opacity: 0.8; } /* ------------------------------------------------------------------------- Banner (Announcements) ---------------------------------------------------------------------- */ #pc-banner {} .pc-banner-msg { padding: 0.5rem 1rem; background: #fff3cd; color: #664d03; font-size: 0.85rem; border-bottom: 1px solid #ffc107; } .pc-banner-msg.pc-critical { background: #ffe0e0; color: #800000; border-bottom-color: #cc0000; } /* ------------------------------------------------------------------------- Nachrichtenbereich ---------------------------------------------------------------------- */ #pc-messages { min-height: 200px; max-height: min(500px, 70vh); overflow-y: auto; padding: 0.75rem; background: #fff; display: flex; flex-direction: column; gap: 0.5rem; } .pc-bubble { max-width: 80%; padding: 0.6rem 1rem; border-radius: 7px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; box-sizing: border-box; font-size: 0.95rem; } .pc-bot { align-self: flex-start; background: #f2f2f2; color: #333; } .pc-user { align-self: flex-end; background: #d9ecff; color: #004a99; } .pc-error { align-self: center; background: #ffe0e0; color: #800000; font-size: 0.85rem; border: 1px solid #cc0000; } .pc-system { align-self: center; color: #888; font-size: 0.8rem; font-style: italic; } .pc-tmp { opacity: 0.45; } /* Inline-Elemente in Bot-Nachrichten */ .pc-bubble code { font-family: 'Courier New', monospace; background: #e8e8e8; padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.9em; } .pc-bubble a { color: #0066cc; } .pc-bubble strong { font-weight: 700; } /* ------------------------------------------------------------------------- Chips (Vorschlagsfragen) ---------------------------------------------------------------------- */ #pc-dynamic { padding: 0 0.75rem 0.5rem; background: #fff; } .pc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; } .pc-chip { padding: 0.4rem 0.75rem; background: #f5f5f5; border: 1px solid #e8720c; border-radius: 20px; color: #e8720c; cursor: pointer; font-size: 0.85rem; font-family: inherit; transition: background 0.15s, color 0.15s; } .pc-chip:hover { background: #e8720c; color: #fff; } /* ------------------------------------------------------------------------- Eingabebereich ---------------------------------------------------------------------- */ .pc-input { display: flex; gap: 0.5rem; padding: 0.75rem; background: #f9f9f9; border-top: 1px solid #ddd; align-items: flex-end; } #pc-input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid #ccc; border-radius: 8px; background: #fff; color: #333; font-size: 0.95rem; font-family: inherit; resize: vertical; min-height: 2.5rem; box-sizing: border-box; } #pc-input:focus { outline: none; border-color: #e8720c; } #pc-send { padding: 0.5rem 1rem; border: none; border-radius: 8px; background: #e8720c; color: #fff; font-weight: 600; cursor: pointer; font-size: 0.95rem; white-space: nowrap; } #pc-send:hover { background: #c45e08; } #pc-send:disabled { opacity: 0.5; cursor: wait; }