/* =====================================
   AI LAYOUT
===================================== */

.layout-ai {
    display: flex;
    gap: 20px;

    min-height: 0;
}

.layout-ai .settings-card {
    flex: 1;
    min-width: 0;
}

.layout-ai .ai-context-panel {
    flex: 0 0 20%;
    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    min-height: 0;
}


/* =====================================
   AI CONTEXT ENGINE
===================================== */

[data-ai-context] {
    position: relative;
    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

[data-ai-context]:hover {
    background: rgba(59, 130, 246, 0.00);
}

[data-ai-context].is-context-active {
    /* border-color: #3b82f6; */
    color: rgba(59, 130, 246, 0.95);

    border: 1px solid rgba(59, 130, 246, 0.45);
    /*  background: rgba(59, 130, 246, 0.02);
    box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.16);*/
}


/* =====================================
   AI CONTEXT MOUNT
===================================== */

#aiContextMount {
    display: flex;
    flex-direction: column;
    gap: 16px;

    padding: 14px;
}


/* =====================================
   AI CONTEXT CONTENT
===================================== */

.ai-context-card {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 16px;

    border-radius: 14px;

    border: 1px solid #e5e7eb;
    background: #ffffff;
}

.ai-context-card-title {
    font-size: 14px;
    font-weight: 600;

    color: #0f172a;
    line-height: 1.35;
}

.ai-context-card-description {
    font-size: 13px;
    line-height: 1.65;

    color: #64748b;
}

.ai-context-note {
    padding: 12px 14px;
    margin-top: 8px;

    border-radius: 12px;

    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(59, 130, 246, 0.22);

    font-size: 12px;
    line-height: 1.55;

    color: #1e3a8a;
}