/* =====================================================
   AI Assist Plugin — CSS v4  (GLPI 10.0.17)
   ===================================================== */

/* ── Botón IA ────────────────────────────────────────── */
.aiassist-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .5rem;
    padding: .375rem 1rem;
    border: none;
    border-radius: .4rem;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(99,102,241,.4);
    transition: all .18s ease;
    vertical-align: middle;
}
.aiassist-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    box-shadow: 0 4px 12px rgba(99,102,241,.5);
    transform: translateY(-1px);
    color: #fff;
}
.aiassist-btn:active { transform: translateY(0); }

/* ── Overlay ─────────────────────────────────────────── */
#aiassist-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.65);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(3px);
}
#aiassist-overlay.active { display: flex; }

/* ── Modal ───────────────────────────────────────────── */
#aiassist-modal {
    background: #fff;
    border-radius: 1rem;
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    overflow: hidden;
    animation: ai-pop .2s ease;
}
@keyframes ai-pop {
    from { opacity:0; transform:scale(.96) translateY(10px); }
    to   { opacity:1; transform:scale(1)   translateY(0);    }
}

/* Header */
.ai-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ai-close-btn {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background .15s;
}
.ai-close-btn:hover { background: rgba(255,255,255,.35); }

/* Body: 2 columnas */
.ai-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.ai-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
}
.ai-col--right {
    border-left: 2px solid #e2e8f0;
    background: #f8fafc;
}
.ai-col-lbl {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #64748b;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.ai-badge {
    font-style: normal;
    font-size: .7rem;
    padding: .12rem .45rem;
    border-radius: 99px;
    font-weight: 700;
}
.ai-badge--orig { background:#e2e8f0; color:#475569; }
.ai-badge--ai   { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }

/* Caja de texto */
.ai-box {
    flex: 1;
    border: 1.5px solid #e2e8f0;
    border-radius: .5rem;
    padding: 1rem;
    font-size: .9rem;
    line-height: 1.7;
    color: #1e293b;
    background: #fff;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 180px;
}
.ai-box--result { background:#f8fafc; }

/* Loading */
.ai-loading {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:1rem; min-height:180px;
}
.ai-spin {
    width:44px; height:44px;
    border:4px solid #e0e7ff;
    border-top-color:#6366f1;
    border-radius:50%;
    animation:ai-spin .8s linear infinite;
}
@keyframes ai-spin { to { transform:rotate(360deg); } }
.ai-loading-txt {
    font-size:.88rem; font-weight:600; color:#6366f1;
    animation:ai-pulse 1.5s ease-in-out infinite;
}
@keyframes ai-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

/* Error */
.ai-error {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:.6rem; padding:1.5rem;
    background:#fff5f5; border:1.5px solid #fee2e2;
    border-radius:.5rem; min-height:180px; text-align:center;
    color:#dc2626;
}
.ai-error-ico { font-size:2rem; }
.ai-error small { color:#94a3b8; font-size:.78rem; }

/* Footer */
.ai-ftr {
    padding:.9rem 1.5rem;
    border-top:1px solid #e2e8f0;
    display:flex; align-items:center; gap:.75rem;
    background:#fff; flex-shrink:0;
}
.ai-ftr-hint { flex:1; font-size:.82rem; color:#64748b; margin:0; }

.ai-btn-orig {
    padding:.42rem 1.1rem;
    border-radius:.4rem;
    border:1.5px solid #94a3b8;
    background:#fff; color:#475569;
    font-size:.875rem; font-weight:600;
    cursor:pointer; transition:all .15s;
}
.ai-btn-orig:hover { background:#f1f5f9; border-color:#64748b; }

.ai-btn-ai {
    padding:.42rem 1.3rem;
    border-radius:.4rem; border:none;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    color:#fff; font-size:.875rem; font-weight:700;
    cursor:pointer; box-shadow:0 2px 8px rgba(99,102,241,.35);
    transition:all .15s;
}
.ai-btn-ai:hover:not(:disabled) {
    background:linear-gradient(135deg,#4f46e5,#7c3aed);
    box-shadow:0 4px 14px rgba(99,102,241,.45);
    transform:translateY(-1px);
}
.ai-btn-ai:disabled,
.ai-btn-orig:disabled { opacity:.45; cursor:not-allowed; transform:none; }

@media (max-width:768px) {
    .ai-body { flex-direction:column; }
    .ai-col--right { border-left:none; border-top:2px solid #e2e8f0; }
}