/* ========================================
   INTERACTIONS.CSS — Comparateur & Cartes
========================================= */

/* Input */
#med-input {
    width: 100%;
    padding: 0.9rem 1.3rem; /* Similaire au style #search sur index.html */
    font-size: 1.1rem;
    border-radius: 30px; /* Bords arrondis */
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    outline: none;
    transition: all 0.3s ease;
}
#med-input:focus {
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}


.autocomplete-box {
    position: absolute;
    width: 100%;
    top: 100%;
    display: none;
    background: transparent;       /* 👈 important */
    padding: 0;                    /* 👈 important */
    border-radius: 0;              /* 👈 important */
    box-shadow: none;              /* 👈 important */
    z-index: 1000;
}

/* Suggestions dans la page interactions — même design que HOME.CSS */
.autocomplete-box .suggestion {
    background: var(--color-white);
    padding: 12px 20px;
    border-radius: var(--border-radius-large);
    margin: 8px 0;
    cursor: pointer;
    text-align: left;
    transition: background 0.3s, box-shadow 0.2s;
    box-shadow: var(--shadow-search);
}

.autocomplete-box .suggestion:hover {
    background: #eef6ff;
    box-shadow: 0 6px 15px rgba(30, 58, 138, 0.15);
}

.autocomplete-box .suggestion:first-child {
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}
.autocomplete-box .suggestion:last-child {
    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
}

/* Tags */
#med-tags-container {
    display: flex;
    flex-wrap: wrap;
    min-height: 40px;
}
.tag-placeholder {
    font-style: italic;
    color: var(--color-secondary);
}
.med-tag {
    display: inline-flex;
    align-items: center;
    background: #c9d8eb;
    color: var(--color-primary-dark);
    padding: 6px 12px;
    margin: 4px 5px;
    border-radius: 20px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.remove-tag-btn {
    margin-left: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.2em;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.remove-tag-btn:hover { opacity: 1; }

/* Bouton */
.btn-outline-danger {
    border: 2px solid var(--color-danger) !important;
    color: var(--color-danger) !important;
    border-radius: 30px;
    transition: all 0.2s;
}
.btn-outline-danger:hover {
    background: var(--color-danger) !important;
    color: white !important;
    box-shadow: var(--shadow-soft);
}

/* Résultat général */
#result-container {
    background: var(--color-white);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-soft);
    padding: 30px;
    margin-top: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s, max-height 0.6s;
}
#result-container.is-visible {
    opacity: 1;
    max-height: 5000px;
    margin-top: 2rem !important;
}

/* Carte Interactions */
.interaction-card {
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.interaction-card .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 15px;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Ligne de séparation claire */

}

/* badge */
.risk-level {
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 15px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
}

/* message */
.interaction-card .card-body {
    padding: 15px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Niveau : CI */
.interaction-card.alert-ci {
    border: 1px solid var(--color-danger);
}
.interaction-card.alert-ci .card-header {
    background: var(--color-danger);
    color: var(--color-white);
}
.interaction-card.alert-ci .risk-level {
    background: #a00000;
}

/* Déconseillée */
.interaction-card.alert-dec {
    border: 1px solid #f97316;
}
.interaction-card.alert-dec .card-header {
    background: #ffedd5;
    color: #f97316;
}
.interaction-card.alert-dec .risk-level {
    background: #f97316;
}

/* Précaution */
.interaction-card.alert-prec {
    border: 1px solid #fcd34d;
}
.interaction-card.alert-prec .card-header {
    background: #fffbeb;
    color: #d97706;
}
.interaction-card.alert-prec .risk-level {
    background: #fcd34d;
    color: #000;
}

/* Note (gris) — manquait */
.interaction-card.alert-note {
    border: 1px solid #9ca3af;
}
.interaction-card.alert-note .card-header {
    background: #f3f4f6;
    color: #374151;
}
.interaction-card.alert-note .risk-level {
    background: #6b7280;
}

/* En-tête de la carte (niveau de risque et cible) */
.interaction-card .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 15px;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Ligne de séparation claire */
}

.interaction-card .risk-level {
    margin-right: 15px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
}

.interaction-card .interaction-target strong {
    font-weight: 700;
}

/* Synthèse IA */
.interaction-result-summary pre {
    white-space: pre-wrap;
    padding: 15px;
    background: #fcfcfc;
    border-left: 4px solid var(--color-primary-dark);
    border-radius: 4px;
    font-family: var(--font-body);
}

/* Titre principal avec barre rouge */
.interaction-main-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    border-left: 5px solid var(--color-danger);
    padding-left: 15px;
}