/* ── Toolbar ── */
.ai-toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.ai-filter-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ai-batch-actions { display:flex; gap:6px; }

/* ── Cards ── */
#ai-cards { display:flex; flex-direction:column; gap:16px; max-width:900px; }

.ai-card {
    background:#fff;
    border:1px solid #ddd;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.ai-card-approved { border-left:4px solid #46b450; }

/* Card header */
.ai-card-header {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    background:#f8f8f8;
    border-bottom:1px solid #eee;
    flex-wrap:wrap;
}
.ai-card-check { flex-shrink:0; }
.ai-card-meta { display:flex; gap:6px; align-items:center; flex-wrap:wrap; flex:1; }
.ai-ticket-link { font-weight:600; font-size:14px; color:#0073aa; text-decoration:none; }
.ai-ticket-link:hover { text-decoration:underline; }
.ai-customer { font-size:12px; color:#555; }
.ai-card-date { font-size:11px; color:#999; white-space:nowrap; margin-left:auto; }

/* Badges */
.ai-badge { font-size:11px; padding:2px 7px; border-radius:10px; font-weight:500; }
.ai-badge-falltyp  { background:#e8f0fe; color:#1a56db; }
.ai-badge-konfidenz { background:#fef3c7; color:#92400e; }
.ai-badge-action   { background:#f0fdf4; color:#166534; }
.ai-badge-approved { background:#dcfce7; color:#166534; }

/* Thread */
.ai-thread { padding:14px 16px; display:flex; flex-direction:column; gap:10px; }

.ai-msg { max-width:85%; }
.ai-msg-customer { align-self:flex-start; }
.ai-msg-agent    { align-self:flex-end; }

.ai-msg-label { font-size:10px; color:#888; margin-bottom:3px; }
.ai-msg-customer .ai-msg-label { text-align:left; }
.ai-msg-agent    .ai-msg-label { text-align:right; }

.ai-msg-body {
    font-size:13px;
    line-height:1.5;
    padding:8px 12px;
    border-radius:12px;
    white-space:pre-wrap;
    word-break:break-word;
}
.ai-msg-customer .ai-msg-body { background:#f0f0f0; color:#222; border-bottom-left-radius:3px; }
.ai-msg-agent    .ai-msg-body { background:#0073aa; color:#fff; border-bottom-right-radius:3px; }

/* AI suggestion box */
.ai-suggestion {
    margin-top:4px;
    border:2px solid #4a90d9;
    border-radius:8px;
    overflow:hidden;
}
.ai-suggestion-label {
    background:#4a90d9;
    color:#fff;
    font-size:12px;
    font-weight:600;
    padding:5px 12px;
}
.ai-suggestion-body {
    padding:10px 14px;
    font-size:13px;
    background:#f0f7ff;
}
.ai-reply-preview {
    white-space:pre-wrap;
    font-size:13px;
    line-height:1.6;
    color:#222;
}

/* Card action buttons */
.ai-card-actions {
    display:flex;
    gap:8px;
    padding:10px 14px;
    background:#fafafa;
    border-top:1px solid #eee;
}

/* Flash toast */
#ai-flash-msg {
    position:fixed; bottom:32px; right:32px;
    background:#1e7e34; color:#fff;
    padding:12px 20px; border-radius:6px;
    font-size:13px; box-shadow:0 2px 8px rgba(0,0,0,.25);
    z-index:99999; opacity:1; transition:opacity .5s ease; pointer-events:none;
}
#ai-flash-msg.ai-flash-error { background:#c0392b; }
#ai-flash-msg.fade-out { opacity:0; }

/* Chat widget (frontend) */
#ai-triage-chat-widget { max-width:480px; border:1px solid #ddd; border-radius:8px; padding:16px; font-family:sans-serif; }
#ai-chat-messages { height:300px; overflow-y:auto; margin-bottom:12px; display:flex; flex-direction:column; gap:8px; }
.ai-chat-msg { padding:8px 12px; border-radius:8px; max-width:80%; }
.ai-chat-user      { background:#0073aa; color:#fff; align-self:flex-end; }
.ai-chat-assistant { background:#f0f0f0; color:#222; align-self:flex-start; }
#ai-chat-input-row { display:flex; gap:8px; }
#ai-chat-input { flex:1; padding:8px; border:1px solid #ccc; border-radius:4px; }
#ai-chat-send, #ai-chat-submit { padding:8px 16px; background:#0073aa; color:#fff; border:none; border-radius:4px; cursor:pointer; }
.ai-chat-success { padding:16px; background:#d4edda; border-radius:8px; color:#155724; }