/* ==========================================================================
   CraftX ERP — Bob / AI assistant patterns
   Slate-violet accent kept in its own file so AI surfaces read distinct
   from the copper craftsman palette.
   Source: design-pkg/craftx-design-system/project/library/pages/bob.jsx
   The base `--violet`/`--violet-50` aliases are declared in cx-patterns.css.
   `.bob-card` / `.bob-chip` already live in cx-widgets.css; this file adds
   the conversational, palette and inline-tip surfaces the library defines.
   ========================================================================== */

/* ── Bob chat surface (full conversation panel) ──────────────────────── */

.cx-bob-surface {
    max-width: 520px; padding: 18px;
    background: linear-gradient(135deg, var(--violet-50) 0%, var(--paper) 70%);
    border: 1px solid rgba(91, 75, 138, 0.18);
    border-radius: var(--radius-2xl);
}
.cx-bob-surface .bob-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cx-bob-surface .bob-head .bob-avatar {
    width: 36px; height: 36px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #5B4B8A 0%, #7d6cb1 100%);
    color: white; display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: var(--fw-xbold); font-size: 14px;
    flex-shrink: 0; box-shadow: 0 4px 10px rgba(91, 75, 138, 0.28);
}
.cx-bob-surface .bob-head .bob-name { font-weight: var(--fw-bold); font-size: 13.5px; color: var(--cx-text-primary); }
.cx-bob-surface .bob-head .bob-status {
    font-size: 11px; color: var(--violet);
    font-family: var(--font-mono); letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cx-bob-surface .bob-conversation { display: flex; flex-direction: column; gap: 10px; }

.cx-bob-msg {
    padding: 10px 14px;
    background: var(--cx-card-bg);
    border-radius: 10px 10px 10px 2px;
    font-size: 13.5px; color: var(--cx-text-primary);
    max-width: 380px; line-height: 1.5;
}
.cx-bob-msg.from-user {
    background: var(--violet); color: white;
    border-radius: 10px 10px 2px 10px; margin-left: auto;
}

/* ── Suggestion chips (Bob quick-actions) ────────────────────────────── */

.cx-bob-suggestion {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(91, 75, 138, 0.22);
    color: var(--violet); font-weight: var(--fw-medium);
    font-size: 12.5px; cursor: pointer;
    font-family: inherit; transition: all 0.15s var(--ease);
}
.cx-bob-suggestion:hover { background: white; border-color: var(--violet); }
.cx-bob-suggestion.is-primary { background: var(--violet); border-color: var(--violet); color: white; }
.cx-bob-suggestion.is-primary:hover { background: #4b3d75; border-color: #4b3d75; }

/* ── Action card (Bob proposes a concrete change) ────────────────────── */

.cx-bob-action-card {
    padding: 18px;
    background: linear-gradient(135deg, var(--violet-50) 0%, var(--paper) 70%);
    border: 1px solid rgba(91, 75, 138, 0.18);
    border-radius: var(--radius-xl); max-width: 540px;
}
.cx-bob-action-card .action-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cx-bob-action-card .action-head .bob-mini-avatar {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, #5B4B8A 0%, #7d6cb1 100%);
    color: white; display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: var(--fw-xbold); font-size: 13px;
    flex-shrink: 0;
}
.cx-bob-action-card .action-eyebrow {
    font-family: var(--font-mono); font-size: 10.5px;
    font-weight: var(--fw-semibold); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--violet);
}
.cx-bob-action-card .action-title {
    margin: 0 0 6px;
    font-family: var(--font-display); font-size: 17px;
    font-weight: var(--fw-bold); letter-spacing: -0.02em;
    color: var(--cx-text-primary);
}
.cx-bob-action-card .action-body {
    margin: 0 0 14px; font-size: 13px;
    color: var(--cx-text-secondary); line-height: 1.5;
}
.cx-bob-action-card .action-preview {
    padding: 10px;
    background: var(--cx-card-bg);
    border-radius: var(--radius-md);
    border: 1px solid rgba(91, 75, 138, 0.15);
    margin-bottom: 14px;
}
.cx-bob-action-card .action-preview .preview-eyebrow {
    font-size: 11px; color: var(--cx-text-muted); margin-bottom: 6px;
    font-family: var(--font-mono); letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cx-bob-action-card .action-preview .preview-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12.5px; }
.cx-bob-action-card .action-preview .preview-row .change { font-family: var(--font-mono); color: var(--cx-text-secondary); }

/* ── Command palette (⌘K) ────────────────────────────────────────────── */

.cx-command-palette {
    max-width: 520px;
    background: var(--cx-card-bg);
    border: 1px solid var(--cx-card-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.cx-command-palette .palette-search {
    padding: 14px 18px;
    border-bottom: 1px solid var(--cx-hairline);
    display: flex; align-items: center; gap: 10px;
}
.cx-command-palette .palette-search i { color: var(--cx-text-muted); }
.cx-command-palette .palette-search input {
    flex: 1; border: none; outline: none;
    font-size: 14px; font-family: inherit;
    background: transparent; color: var(--cx-text-primary);
}
.cx-command-palette .palette-search .kbd {
    font-family: var(--font-mono); font-size: 10.5px;
    padding: 2px 6px; background: var(--paper-2);
    border-radius: var(--radius-xs); color: var(--cx-text-muted);
}
.cx-command-palette .palette-section { padding: 8px; }
.cx-command-palette .palette-section-title {
    padding: 6px 12px;
    font-family: var(--font-mono); font-size: 10px;
    font-weight: var(--fw-semibold); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--cx-text-muted);
}
.cx-command-palette .palette-item {
    display: flex; gap: 12px; padding: 8px 12px;
    border-radius: var(--radius-md); cursor: pointer;
    align-items: center; transition: background 0.12s var(--ease);
}
.cx-command-palette .palette-item:hover,
.cx-command-palette .palette-item.is-active { background: var(--violet-50); }
.cx-command-palette .palette-item i { font-size: 15px; width: 20px; color: var(--copper); }
.cx-command-palette .palette-item.from-bob i { color: var(--violet); }
.cx-command-palette .palette-item .palette-label { flex: 1; font-size: 13px; font-weight: var(--fw-medium); color: var(--cx-text-primary); }
.cx-command-palette .palette-item.is-active .palette-label { font-weight: var(--fw-semibold); }
.cx-command-palette .palette-item .palette-shortcut { font-family: var(--font-mono); font-size: 10.5px; color: var(--cx-text-muted); }
.cx-command-palette .palette-item .palette-flag {
    padding: 1px 6px; background: var(--violet); color: white;
    border-radius: var(--radius-xs);
    font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.05em;
}
.cx-command-palette .palette-foot {
    padding: 8px 14px;
    border-top: 1px solid var(--cx-hairline);
    background: var(--paper-2);
    display: flex; gap: 14px;
    font-size: 10.5px; color: var(--cx-text-muted);
    font-family: var(--font-mono);
}

/* ── Inline tip banner (Bob in the workflow) ─────────────────────────── */

.cx-bob-tip {
    padding: 10px 14px;
    background: var(--violet-50);
    border-left: 3px solid var(--violet);
    border-radius: 4px 8px 8px 4px;
    font-size: 13px; color: var(--cx-text-primary);
    display: flex; gap: 10px; align-items: center;
}
.cx-bob-tip .tip-avatar {
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--violet); color: white;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: var(--fw-xbold); font-size: 11px;
    flex-shrink: 0;
}
.cx-bob-tip .tip-body { flex: 1; line-height: 1.45; }
.cx-bob-tip .tip-actions { display: inline-flex; gap: 6px; }
.cx-bob-tip .tip-actions button {
    height: 26px; padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: 11.5px; font-weight: var(--fw-semibold);
    cursor: pointer; font-family: inherit;
    border: 1px solid var(--cx-hairline-strong);
    background: transparent; color: var(--cx-text-primary);
    transition: all 0.12s var(--ease);
}
.cx-bob-tip .tip-actions button.is-primary { background: var(--violet); border-color: var(--violet); color: white; }
.cx-bob-tip .tip-actions button.is-primary:hover { background: #4b3d75; border-color: #4b3d75; }

/* ── Bob dialogs („Bobs Notizen“, „Aufträge“): shared buttons and alerts ── */

.cx-bob-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--hairline, rgba(28,25,21,.16)); background:#fff; color:var(--walnut, #4a4038); border-radius:8px; padding:5px 10px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.cx-bob-btn:hover:not(:disabled) { background:var(--sand, #f1ece5); }
.cx-bob-btn:disabled { opacity:.5; cursor:default; }
.cx-bob-btn-primary { background:var(--copper, #b8601f); border-color:var(--copper, #b8601f); color:#fff; }
.cx-bob-btn-primary:hover:not(:disabled) { background:var(--copper-dark, #8f4715); }
.cx-bob-btn-danger { color:#a83228; border-color:rgba(190,55,45,.35); }
.cx-bob-btn-danger:hover:not(:disabled) { background:rgba(190,55,45,.08); }
.cx-bob-btn-danger.solid { background:#a83228; border-color:#a83228; color:#fff; }

.cx-bob-alert { display:flex; align-items:flex-start; gap:9px; padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.45; }
.cx-bob-alert i { margin-top:1px; flex-shrink:0; }
.cx-bob-alert span { flex:1; }
.cx-bob-alert-error { background:rgba(190,55,45,.08); border:1px solid rgba(190,55,45,.3); color:#a83228; }
.cx-bob-alert-info { background:var(--copper-50, rgba(184,96,31,.1)); border:1px solid rgba(184,96,31,.25); color:var(--copper-dark, #8f4715); }