/* ==========================================================================
   Syntro Build AI — Conversation Engine CSS  (Module 2)
   Add this <link> after dashboard.css in dashboard/index.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   Suggestion cards row (rendered under assistant bubbles)
   -------------------------------------------------------------------------- */
.suggestion-cards {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
    margin:    0.6rem 0 0 2.85rem; /* indent to align under assistant bubble */
    animation: bubbleIn 220ms ease both;
}

.suggestion-card {
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
    padding:       0.4rem 0.75rem;
    border:        1px solid var(--c-border);
    border-radius: var(--radius-full);
    background:    var(--c-surface);
    color:         var(--c-text);
    font-size:     0.8rem;
    font-weight:   500;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    border-color var(--transition), background var(--transition),
                   box-shadow var(--transition), transform var(--transition);
}

.suggestion-card:hover {
    border-color: var(--c-brand);
    background:   rgba(99,102,241,0.06);
    box-shadow:   0 0 0 3px var(--c-brand-glow);
    transform:    translateY(-1px);
}

.suggestion-card:active { transform: scale(0.96); }

.suggestion-card__icon  { font-size: 1rem; flex-shrink: 0; }
.suggestion-card__label { line-height: 1.2; }

/* --------------------------------------------------------------------------
   Intent status bar (shown above input when fields are detected in real time)
   -------------------------------------------------------------------------- */
.intent-bar {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             0.4rem;
    padding:         0.45rem 1rem;
    background:      var(--c-surface-2);
    border-top:      1px solid var(--c-border);
    font-size:       0.75rem;
    color:           var(--c-text-2);
    min-height:      36px;
    transition:      opacity var(--transition);
}

.intent-bar--hidden { opacity: 0; pointer-events: none; }

.intent-pill {
    display:       inline-flex;
    align-items:   center;
    gap:           0.25rem;
    padding:       0.2rem 0.55rem;
    border-radius: var(--radius-full);
    font-size:     0.72rem;
    font-weight:   600;
    background:    rgba(99,102,241,0.12);
    color:         var(--c-brand);
    border:        1px solid rgba(99,102,241,0.2);
}

.intent-pill--industry { background: rgba(16,185,129,0.1);  color: #10b981; border-color: rgba(16,185,129,0.2); }
.intent-pill--style    { background: rgba(245,158,11,0.1);  color: #f59e0b; border-color: rgba(245,158,11,0.2); }
.intent-pill--feature  { background: rgba(99,102,241,0.1);  color: var(--c-brand); border-color: rgba(99,102,241,0.2); }

.intent-bar__label { color: var(--c-text-3); font-size: 0.7rem; }

/* --------------------------------------------------------------------------
   Typing indicator override when streaming is not used (pure assistant reply)
   -------------------------------------------------------------------------- */
.bubble--assistant.bubble--resolving { min-height: 2rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .suggestion-cards      { margin-left: 2.5rem; }
    .suggestion-card       { font-size: 0.75rem; padding: 0.35rem 0.6rem; }
    .suggestion-card__icon { font-size: 0.9rem; }
}