/**
 * alert.css — ConnectAI Design System
 * C7 / G-20 — Shared Alert / Notice banner component
 *
 * Usage: <link rel="stylesheet" href="css/alert.css">
 *
 * Replaces scattered per-page .alert and .alert-box definitions with one shared file.
 * All pages: use <div class="alert alert-info"> … </div>
 * Toggle visibility via JS: el.classList.toggle('show')
 */

/* ── Base alert ──────────────────────────────────────────────────────────────── */
.alert {
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md, 8px);
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid transparent;
  margin-bottom: 16px;
}
.alert.show { display: flex; }

.alert svg {
  width: 15px; height: 15px;
  flex-shrink: 0; margin-top: 1px;
}

/* Close button inside alert */
.alert .alert-close {
  margin-left: auto;
  background: none; border: none;
  cursor: pointer; padding: 0;
  color: inherit; opacity: .6;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.alert .alert-close:hover { opacity: 1; }
.alert .alert-close svg { width: 14px; height: 14px; margin: 0; }

/* Alert body */
.alert-body { flex: 1; }
.alert-body strong { font-weight: 700; display: block; margin-bottom: 2px; }

/* ── Semantic variants ───────────────────────────────────────────────────────── */
.alert-info {
  background: var(--blue-soft,  #E6F4FF);
  border-color: var(--blue-border, #91CAFF);
  color: #1D4ED8;
}

.alert-success {
  background: var(--green-soft,  #F6FFED);
  border-color: var(--green-border, #B7EB8F);
  color: #237804;
}

.alert-warning {
  background: var(--amber-soft,  #FFFBE6);
  border-color: var(--amber-border, #FFE58F);
  color: #AD6800;
}
/* alias: .alert-warn → same as .alert-warning */
.alert-warn {
  background: var(--amber-soft,  #FFFBE6);
  border-color: var(--amber-border, #FFE58F);
  color: #AD6800;
}

.alert-error {
  background: #FFF2F0;
  border-color: #FFCCC7;
  color: #CF1322;
}

/* ── Always-visible (no .show toggle needed) ─────────────────────────────────── */
.alert-static {
  display: flex;
}

/* ── Compact / inline variant ────────────────────────────────────────────────── */
.alert-sm {
  padding: 8px 10px;
  font-size: 12px;
  gap: 7px;
  border-radius: var(--r-sm, 6px);
}
.alert-sm svg { width: 13px; height: 13px; }

/* ── Backward-compat: .alert.error / .alert.warn / .alert.success ───────────── */
/* Pages that use modifier as a sibling class (not BEM -variant) keep working */
.alert.info    { background: var(--blue-soft,  #E6F4FF); border-color: var(--blue-border, #91CAFF); border-width: 1px; border-style: solid; color: #1D4ED8; }
.alert.success { background: var(--green-soft, #F6FFED); border-color: var(--green-border, #B7EB8F); border-width: 1px; border-style: solid; color: #237804; }
.alert.warn    { background: var(--amber-soft, #FFFBE6); border-color: var(--amber-border, #FFE58F); border-width: 1px; border-style: solid; color: #AD6800; }
.alert.error   { background: #FFF2F0; border-color: #FFCCC7; border-width: 1px; border-style: solid; color: #CF1322; }

/* ── Backward-compat: .alert-box (used by LLM Config) ───────────────────────── */
.alert-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md, 8px);
  font-size: 12.5px;
  line-height: 1.6;
  border: 1px solid;
  margin-bottom: 18px;
}
.alert-box svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.alert-box.info    { background: var(--blue-soft, #E6F4FF);  border-color: var(--blue-border, #91CAFF);  color: #1D4ED8; }
.alert-box.warn    { background: var(--amber-soft, #FFFBE6); border-color: var(--amber-border, #FFE58F); color: #92400E; }
.alert-box.success { background: var(--green-soft, #F6FFED); border-color: var(--green-border, #B7EB8F); color: #065F46; }
.alert-box.error   { background: #FFF2F0; border-color: #FFCCC7; color: #CF1322; }