/* ============================================
   SoclAi - Components : boutons, cartes, formulaires, table, modal
   ============================================ */

/*  Buttons  */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.62rem 1.15rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
}
.btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn i { font-size: 1.05rem; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

.btn-secondary {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text-primary);
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
  color: #fff;
}

.btn-ghost {
  background: none;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background: var(--bg-input);
  color: var(--text-primary);
}

.btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
}

/* Bouton "Demander de l'aide a l'assistant" : style unifie partout (Communication,
   SEO, Applications...). Modificateur de .btn -> teinte accent douce + icone scintillante. */
.btn-ai-help {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.btn-ai-help:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
.btn-ai-help i { color: var(--accent); }
/* Compte reviewer Meta : pas d'invite a ouvrir l'assistant (Vincent est deja masque). Une regle
   couvre tous les boutons "Demander de l'aide a l'assistant" des formulaires communication. */
body.review-locked .btn-ai-help { display: none; }

/*  Cards  */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card-header {
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-title i { color: var(--accent); }
.card-body { padding: 1.5rem; }

/* Cards empilees en pleine largeur (enfant direct de la page) : espace vertical entre
   elles. Scope volontairement etroit : les grilles de cards (ex .platform-cards) ont
   deja leur propre gap et ne sont pas enfant direct de .page-content. */
.page-content > .card + .card { margin-top: 1.5rem; }

/*  Forms  */
.form-group { margin-bottom: 1.1rem; }

.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.form-input,
.form-select {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: 0.72rem 0.9rem;
  color: var(--text-primary);
  font-size: 0.92rem;
  outline: none;
  transition: var(--transition);
  font-family: inherit;
}
/* Hover (hors focus) : bordure plus marquee + teinte un peu plus soutenue -> on sent que c'est cliquable. */
.form-input:hover:not(:focus),
.form-select:hover:not(:focus) {
  border-color: var(--field-border-hover);
  background: var(--field-bg-hover);
}
.form-input:focus,
.form-select:focus {
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg-card);
}
.form-input::placeholder { color: var(--text-muted); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}

.form-help {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}
/* Variante hint introductif (avant un bloc table-wrap / modules-grid / perms-groups).
   Convention markup : <p class="form-help"> pour l'intro, <div class="form-help">
   pour le help sous un input (qui reste colle a son input). */
p.form-help {
  margin-bottom: 1rem;
}
/* Variante hint place ENTRE le label et l'input (sous-titre du champ) : colle au
   label, espace avant l'input (l'inverse du form-help standard qui colle a l'input). */
.form-help-top {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/*  Select custom ([data-custom-select], cable dans app.js) : selecteur stylise avec
  icones par option (data-icon, ex. drapeaux). Le <select> natif reste la source de
  verite, cache dans le wrapper. */
/* Avant enhancement JS : skeleton gris qui pulse (masque le select natif le temps
   que app.js l'habille, meme hauteur que le trigger donc pas de saut de layout). */
select[data-custom-select] {
  appearance: none;
  -webkit-appearance: none;
  color: transparent;
  background: var(--field-bg);
  border-color: transparent;
  pointer-events: none;
  animation: select-skeleton 1.2s ease-in-out infinite;
}
@keyframes select-skeleton {
  50% { opacity: 0.55; }
}
.select-custom { position: relative; }
.select-custom > select { display: none; }
.select-custom-trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: 0.72rem 0.9rem;
  font: inherit;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}
.select-custom-trigger:hover { border-color: var(--field-border-hover); background: var(--field-bg-hover); }
.select-custom-trigger:disabled { opacity: 0.55; cursor: not-allowed; }
.select-custom.open .select-custom-trigger {
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg-card);
}
.select-custom-trigger > i { margin-left: auto; color: var(--text-muted); transition: var(--transition); }
.select-custom.open .select-custom-trigger > i { transform: rotate(180deg); }
.select-custom-value { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; overflow: hidden; }
/* Libelle sur UNE ligne (jamais de wrap moche dans le trigger ou le menu) : ellipse + title. */
.select-custom-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-custom-flag {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
/* position: fixed (top/left/width poses en JS via WAAPI) : echappe aux
   overflow: hidden des cards/modals qui clippaient le menu deploye. */
.select-custom-menu {
  display: none;
  position: fixed;
  z-index: 10001;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.3rem;
  max-height: 260px;
  overflow-y: auto;
}
.select-custom.open .select-custom-menu { display: block; }
/* Horaires de prise de rendez-vous du standard telephonique. */
.app-booking-days {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.6rem;
}
.app-booking-day {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.85rem; color: var(--text-secondary); cursor: pointer;
}
.app-booking-day:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text-primary);
}
.app-booking-slots { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }
.app-booking-slot  { display: flex; flex-direction: column; gap: 0.35rem; }
.app-booking-slot-line { display: flex; align-items: center; gap: 0.5rem; }
.app-slot-days { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.app-slot-day {
  min-width: 2.1rem; padding: 0.2rem 0.35rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: none; color: var(--text-muted);
  font-size: 0.75rem; cursor: pointer;
}
.app-slot-day[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text-primary);
}
.app-booking-slot .form-input { width: auto; flex: 0 0 auto; }
.app-booking-sep   { font-size: 0.85rem; color: var(--text-muted); }
.app-slot-del {
  border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.05rem; display: flex;
}
.app-slot-del:hover { color: #d05b5b; }

/* Champ bloquant a corriger : bordure pleine sur tout le tour (jamais de barre laterale).
   Le select habille expose son trigger, le <select> natif etant masque. */
.field-invalid,
.field-invalid .select-custom-trigger {
  border-color: #d05b5b;
  box-shadow: 0 0 0 3px rgba(208, 91, 91, .14);
}

/* Intertitre d'un <optgroup> dans le menu custom : repere de lecture, non cliquable. */
.select-custom-group {
  padding: 0.5rem 0.65rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.select-custom-group:not(:first-child) {
  margin-top: 0.3rem;
  border-top: 1px solid var(--border);
  padding-top: 0.55rem;
}

.select-custom-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
  font: inherit;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}
.select-custom-option:hover { background: var(--bg-input); color: var(--text-primary); }
.select-custom-option.is-disabled { color: var(--text-muted); cursor: default; opacity: 0.6; }
.select-custom-option.is-disabled:hover { background: none; color: var(--text-muted); }
.select-custom-option.is-selected { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.select-custom-option.is-selected::after { content: '\2713'; margin-left: auto; font-weight: 700; }
/* Option detaillee (data-desc) : libelle + pastille sur la premiere ligne, explication dessous. */
.select-custom-option.has-desc { align-items: flex-start; padding: 0.6rem 0.75rem; }
.select-custom-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.select-custom-line { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.select-custom-desc {
  width: max-content;
  max-width: 17rem;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: normal;
}
.select-custom-badge {
  flex-shrink: 0;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.select-custom-option.is-selected .select-custom-badge { background: var(--bg-card); }

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid transparent;
}
.alert i { font-size: 1.1rem; flex-shrink: 0; }
/* Alerte a plusieurs phrases suivies d'une action : la .alert de base est une LIGNE
   (icone + texte), donc les paragraphes se rangeaient cote a cote et le bouton se
   retrouvait au milieu du bloc. */
.alert-stack { flex-direction: column; align-items: stretch; gap: 0.4rem; }
.alert-stack p { margin: 0; }
.alert-stack .btn { align-self: flex-start; margin-top: 0.35rem; }
.alert-success { background: var(--success-soft);  border-color: color-mix(in srgb, var(--success) 22%, transparent);  color: var(--success); }
.alert-error   { background: rgba(239,68,68,0.1);  border-color: rgba(239,68,68,0.25);  color: var(--danger); }
.alert-info    { background: var(--accent-soft);   border-color: rgba(61,31,124,0.15);  color: var(--accent); }

/*  Table  */
.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* x auto : aux largeurs intermediaires (769-1100px, sidebar visible) la table
     scrolle dans sa card au lieu d'etre coupee. Sous 768px elle passe en cards. */
  overflow-x: auto;
  overflow-y: hidden;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.table thead th {
  text-align: left;
  padding: 0.85rem 1.25rem;
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table tbody td {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-card-hover); }
.table tbody tr[data-row-target] { cursor: pointer; }

.table-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

/*  Table responsive : convertir en cards sur mobile.
  Convention : chaque <td> non-primaire porte data-label="Nom de la colonne".
  La 1ere cellule (avatar/identite) et .table-actions n'ont pas de data-label :
  elles prennent toute la largeur. .table-empty-row idem. */
@media (max-width: 768px) {
  .table-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .table { font-size: 0.88rem; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tbody tr {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 0.75rem;
    overflow: hidden;
  }
  .table tbody tr:hover { background: var(--bg-card); }
  .table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--border);
  }
  .table tbody tr td:last-child { border-bottom: none; }
  .table tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    flex-shrink: 0;
  }
  .table tbody td.table-actions { justify-content: flex-end; }
  .table-empty-row { padding: 1.5rem; text-align: center; }
}

/*  Badge  */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-input);
  color: var(--text-secondary);
}
.badge-admin   { background: var(--accent); color: #fff; }
.badge-user    { background: var(--bg-input); color: var(--text-secondary); }

/* Statut des societes (page Plateforme). */
.badge-active       { background: var(--success-soft); color: var(--success); }
.badge-suspended    { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.badge-provisioning { background: var(--warning-soft); color: var(--warning); }

/* Resultat de creation d'une societe (modal partagee console / page Plateforme). */
#opCreateResult { line-height: 1.7; }

/*  Avatar (cell)  */
.user-cell {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.user-cell-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.user-cell-meta { line-height: 1.25; min-width: 0; }
.user-cell-name { font-weight: 600; color: var(--text-primary); }
.user-cell-email { font-size: 0.78rem; color: var(--text-muted); }

/*  Onboarding page (sidebar/topbar caches, body.is-onboarding) */
body.is-onboarding .main-content { margin-left: 0; }
body.is-onboarding .page-content {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.onboarding-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  text-align: center;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.onboarding-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
}
.onboarding-title { font-size: 1.75rem; margin-bottom: 0.75rem; color: var(--text-primary); }
.onboarding-body  { color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.6; }
.btn-lg { padding: 0.85rem 2rem; font-size: 1.05rem; }

/*  Modules grid (modal /admin-societes) : grille de cards avec toggle switch.
  Une card est "off" par defaut (opacite reduite) et passe a "module-on" (pleine
  opacite + fond accent) quand le toggle est coche. JS toggle .module-on au change. */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.module-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 0.85rem 1rem;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
  opacity: 0.65;
  cursor: pointer;
  display: block;
}
.module-card:hover { opacity: 0.85; }
.module-card.module-on {
  opacity: 1;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.module-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.module-card-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--border);
  color: var(--accent);
  flex-shrink: 0;
  font-size: 1rem;
}
.module-card.module-on .module-card-icon {
  background: var(--accent);
  color: #fff;
}
.module-card-name { flex: 1; font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.module-card-slug { margin-top: 0.45rem; }
.module-card-slug code {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: transparent;
}

/*  Toggle switch (input checkbox style). 36px x 20px. */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px; height: 20px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; cursor: pointer;
  inset: 0;
  background: var(--toggle-off);
  border-radius: 20px;
  transition: background 0.2s;
}
.toggle-switch:hover input:not(:checked) + .toggle-slider { background: var(--toggle-off-hover); }
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }

/*  Roles permissions (modal /societe-roles) */
.modal-lg .modal, .modal.modal-lg { max-width: 720px; }
.perms-groups { display: flex; flex-direction: column; gap: 1rem; }
.perms-group  {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem 1rem;
  background: var(--bg-secondary);
}
.perms-group-title {
  margin: 0 0 0.75rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.perms-group-title i { color: var(--accent); font-size: 1.1rem; }
.perms-group-name { margin-right: auto; }            /* pousse le badge core a droite */
.perms-group-badge {
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.perms-group-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.4rem;
}
.perms-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.perms-item:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
.perms-item-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.perms-item-main .toggle-switch { flex-shrink: 0; }
.perms-item-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.perms-item-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.25;
}
.perms-item-info {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: var(--text-muted);
  border-radius: 50%;
  cursor: help;
  transition: color .12s ease, background .12s ease;
}
.perms-item-info:hover, .perms-item-info:focus-visible {
  color: var(--accent);
  background: var(--field-bg);
  outline: none;
}
.perms-item-info i { font-size: 1.05rem; }

.role-cell-label { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--text-primary); }

/*  Avatars : rendu via RenderAvatar()
  .has-avatar > img : image affichee.
  Sans .has-avatar : initiale (texte centre du parent).
  La taille / forme vient du conteneur parent (topbar-avatar, user-cell-avatar, etc.). */
.has-avatar { padding: 0; overflow: hidden; background: transparent; }
.has-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/*  Card avatar (profile + modal) : zone d'edition. */
.avatar-edit {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
.avatar-edit-inline { flex-direction: row; align-items: center; }
.avatar-edit-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2rem;
  flex-shrink: 0;
}
.avatar-modal-zone {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
}
.avatar-modal-zone.is-dragging {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
  background: var(--accent-soft);
}

/*  Modal  */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; animation: modal-overlay-fade 0.18s ease; }
/* Entree douce : le voile apparait en fondu, la boite "monte" et se pose (pop discret). */
@keyframes modal-overlay-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop-in { from { transform: translateY(10px) scale(0.98); } to { transform: none; } }
.modal-overlay.open .modal { animation: modal-pop-in 0.22s cubic-bezier(0.22, 1, 0.36, 1); }

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-header {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.modal-title i { color: var(--accent); }
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: var(--text-primary); }
/* Un <form> qui enveloppe corps + pied (modales de creation) est un enfant bloc de la
   colonne flex : sans ces regles il ne retrecit pas, le corps ne defile jamais et le
   pied avec le bouton de validation sort du cadre (overflow:hidden) sur un ecran bas. */
.modal > form { display: flex; flex-direction: column; min-height: 0; }
.modal-body { padding: 1.4rem; overflow-y: auto; min-height: 0; }
.modal-footer {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}
/* Bouton ancre a gauche du footer (ex : Supprimer, loin des actions principales). */
.modal-footer-start { margin-right: auto; }

/*  Dashboard stat tiles  */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: var(--transition);
}
.stat-card:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}
.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.stat-meta { min-width: 0; }
.stat-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.stat-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/*  Cartes assistants / chatbots / agents vocaux : la grille suit la largeur DISPONIBLE
    (auto-fill), pas le viewport -> sidebar ouverte sur tablette = 1 colonne confortable,
    sidebar repliee = 2 colonnes, grand ecran = 3. Le min(340px, 100%) evite le debordement
    sous 340px de conteneur. */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 1rem;
}
/* Carte assistant : visuel colore a gauche (~30%, couleur par service, mascotte
   detouree posee en bas) + texte et footer a droite. */
.agent-card {
  --agent-accent: var(--accent);
  display: flex;
  position: relative;            /* ancre le laser (::before) et le cache (::after) */
  z-index: 0;                    /* contexte d'empilement : laser(0) < cache(1) < contenu(2) */
  text-align: left;
  background: var(--border);     /* couleur du gap (piste du laser) au repos : fond au border = pas de bande blanche */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}
.agent-card:hover {
  border-color: color-mix(in srgb, var(--agent-accent) 45%, var(--border));
  box-shadow: var(--shadow-sm);
}

/* Border laser anime (hover) : un disque conic-gradient (couleur de l'agent + pointe
   blanche) tourne DERRIERE le contenu via transform: rotate. Un cache opaque (::after)
   recouvre le centre et ne laisse voir qu'un anneau de 2px au bord = un laser qui fait le
   tour de la carte, facon HUD de jeu video. 100% CSS, aucune feature exotique : juste
   conic-gradient + transform rotate + empilement z-index + overflow:hidden. Tourne dans
   TOUS les navigateurs (contrairement a @property / offset-path / mask-composite qui ne
   rendaient pas ici). Inactif au repos (opacity 0, anim seulement au hover).
   IMPORTANT : pas de color-mix() dans le conic-gradient (une borne invalide annule tout le
   gradient sur certains navigateurs) -> uniquement accent / blanc / transparent. */
.agent-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;                        /* large : couvre toute la carte quel que soit l'angle */
  z-index: 0;                          /* derriere le cache et le contenu */
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg,
    transparent 0deg,
    var(--agent-accent) 40deg,
    #ffffff 60deg,                     /* pointe brillante du laser */
    var(--agent-accent) 80deg,
    transparent 130deg,
    transparent 360deg);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.agent-card::after {
  content: '';
  position: absolute;
  inset: 2px;                          /* = padding : ne laisse voir que l'anneau de 2px */
  z-index: 1;                          /* cache opaque : masque le conic sauf l'anneau */
  border-radius: calc(var(--radius-lg) - 2px);
  background: var(--bg-card);
  pointer-events: none;
}
/* le contenu passe au-dessus du cache */
.agent-card-visual,
.agent-card-main { position: relative; z-index: 2; }

.agent-card:hover::before {
  opacity: 1;
  animation: agent-card-spin 2.4s linear infinite;
}
@keyframes agent-card-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.agent-card-visual {
  flex: 0 0 48%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  /* decor genere par assistant (--agent-bg, cf. bloc couleurs) ; fond neutre le temps
     du chargement pour eviter le flash de couleur accent */
  background-color: var(--bg-secondary);
  background-image: var(--agent-bg, none);
  background-size: cover;
  background-position: center bottom;
  /* bord droit en biais (plus large en bas), comme un pan coupe */
  clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}
/* Voile accent leger sur le decor : garde l'identite couleur du service sans noyer l'image. */
.agent-card-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--agent-accent) 30%, transparent),
    color-mix(in srgb, var(--agent-accent) 8%, transparent));
  pointer-events: none;
}
.agent-card-visual img {
  position: relative;
  z-index: 1;
  max-width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(20, 20, 40, 0.18));
}
.agent-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.agent-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.25rem 1rem;
  flex: 1;
}
.agent-card-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.25;
}
.agent-card-role {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--agent-accent);
}
.agent-card-desc {
  display: block;
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
.agent-card-foot {
  display: block;
  padding: 0.75rem 1.25rem;
  border-top: 1px dashed color-mix(in srgb, var(--agent-accent) 45%, transparent);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;          /* jamais de CTA sur 2 lignes : ellipsis si trop etroit */
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--transition);
}
.agent-card:hover .agent-card-foot { color: var(--agent-accent); }

/* Couleur par service. .agent-tint--X : meme couleur hors cartes (identite chat, tags convs). */
.agent-card--general,     .agent-tint--general     { --agent-accent: #6d5bd0; }
.agent-card--marketing,   .agent-tint--marketing   { --agent-accent: #2563eb; }
.agent-card--seo,         .agent-tint--seo         { --agent-accent: #3aa07a; }
.agent-card--secretariat, .agent-tint--secretariat { --agent-accent: #c2588f; }
.agent-card--commercial,  .agent-tint--commercial  { --agent-accent: #d9842f; }
.agent-card--juridique,   .agent-tint--juridique   { --agent-accent: #5b6bd0; }
.agent-card--recrutement, .agent-tint--recrutement { --agent-accent: #d05b5b; }
.agent-card--rh,          .agent-tint--rh          { --agent-accent: #b8932f; }
.agent-card--support,     .agent-tint--support     { --agent-accent: #e07b54; }
.agent-card--phone,       .agent-tint--phone       { --agent-accent: #0e9aa7; }

/* Decor de carte par assistant (assets/img/assistants/<slug>.webp, 3:4 cover).
   Les fiches a configurer partagent le meme decor neutre (ville floue).
   Aussi sur .agent-tint--X : le fond filigrane de l'Accueil (.home-agent-bg) le reutilise. */
.agent-card--general,     .agent-tint--general     { --agent-bg: url('/assets/img/assistants/general.webp'); }
.agent-card--marketing,   .agent-tint--marketing   { --agent-bg: url('/assets/img/assistants/marketing.webp'); }
.agent-card--seo,         .agent-tint--seo         { --agent-bg: url('/assets/img/assistants/seo.webp'); }
.agent-card--secretariat, .agent-tint--secretariat { --agent-bg: url('/assets/img/assistants/secretariat.webp'); }
.agent-card--juridique,
.agent-card--recrutement,
.agent-card--rh,
.agent-card--support,
.agent-card--phone,
.agent-tint--support,
.agent-tint--phone       { --agent-bg: url('/assets/img/assistants/placeholder.webp'); }

/* Mobile : les grandes cartes (visuel 48% + description) rendent la liste interminable au
   doigt. On passe en RANGEES compactes : petit visuel a gauche, nom + role, description
   masquee, CTA discret -> toute l'equipe tient a l'ecran et se parcourt d'un pouce. */
@media (max-width: 640px) {
  .agent-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .agent-card { align-items: stretch; min-height: 76px; }
  .agent-card-visual { flex: 0 0 92px; clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%); }
  .agent-card-visual img { max-width: 78px; }
  .agent-card-body { padding: 0.6rem 0.8rem 0.45rem; gap: 0.15rem; }
  .agent-card-desc { display: none; }
  .agent-card-foot { padding: 0 0.8rem 0.55rem; border-top: 0; font-size: 0.78rem; }
}

/* Menu "..." (kebab) en haut a droite de la carte : remplace les boutons crayon/poubelle. */
.app-card-menu { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 3; }
.app-card-menu-btn {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg-card) 80%, transparent); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; font-size: 1.05rem; transition: var(--transition);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.app-card-menu-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.app-card-menu-list {
  position: absolute; top: calc(100% + 4px); right: 0; min-width: 160px; z-index: 4;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 0.3rem; display: flex; flex-direction: column;
}
.app-card-menu-item {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.5rem 0.6rem; border: none; background: none; border-radius: var(--radius-sm, 8px);
  font: inherit; font-size: 0.88rem; color: var(--text-primary); cursor: pointer; text-align: left;
}
.app-card-menu-item:hover { background: var(--bg-card-hover); }
.app-card-menu-item i { font-size: 1.05rem; color: var(--text-muted); }
.app-card-menu-item--danger { color: var(--danger); }
.app-card-menu-item--danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.app-card-menu-item--danger i { color: var(--danger); }

/* Pastilles de couleur (wizard site support : appliques via .app-color-swatches). */
.app-color-swatches { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.app-color-swatches--mt { margin-top: 0.55rem; }
.app-color-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.app-color-sw.is-active { box-shadow: 0 0 0 2px var(--accent); }
.app-color-sw:hover { transform: scale(1.12); }

/*  Integrations : barre d'outils + grille de cartes (catalogue demo).  */
.integration-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.integration-search {
  position: relative;
  flex: 1 1 280px;
  max-width: 420px;
}
.integration-search i {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.95rem;
  pointer-events: none;
}
.integration-search .form-input { padding-left: 2.4rem; }
.integration-count {
  color: var(--text-muted);
  font-size: 0.88rem;
  white-space: nowrap;
}
.integration-grid {
  display: grid;
  /* auto-scale : autant de colonnes que possible a >=240px, sans deborder.
     minmax(240px, 1fr) (mini definie, pas 'auto') laisse l'ellipsis tronquer. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.integration-card {
  display: flex;
  flex-direction: row;
  min-width: 0;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition);
}
.integration-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  background: var(--accent-soft);
}
/* Deep-link ?connect= : carte ciblee par un CTA (ex depuis un run d'agent) -> pulse le temps de
   la reperer, puis retour a l'etat normal. */
.integration-card.is-connect-focus {
  border-color: var(--accent);
  background: var(--accent-soft);
  animation: integ-connect-pulse 0.9s ease-in-out 2;
}
@keyframes integ-connect-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); }
}
.integration-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
  overflow: hidden;
}
.integration-icon img { width: 36px; height: 36px; object-fit: contain; display: block; }
.integration-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.integration-connect-ic {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 1.2rem;
  transition: var(--transition);
}
.integration-card:hover .integration-connect-ic { color: var(--accent); }
.integration-card.is-connected .integration-connect-ic,
.integration-card.is-connected:hover .integration-connect-ic { color: var(--success); }

/* Integrations : comptes reellement connectes (integrations connectees) */
.int-connected-state {
  padding: 2.2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.int-connected-list { display: flex; flex-direction: column; gap: 0.6rem; }
.int-account {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.int-account-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  overflow: hidden;
}
.int-account-icon img { width: 22px; height: 22px; object-fit: contain; display: block; }
.int-account-info { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.int-account-app { font-weight: 600; font-size: 0.92rem; color: var(--text-primary); }
.int-account-name {
  font-size: 0.82rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.int-account-warn { color: var(--warning); font-size: 1.1rem; flex-shrink: 0; }
.int-account-disconnect.is-armed { color: var(--danger); font-weight: 600; }
/* Compte Google natif dans la liste des comptes connectes (pas de logo distant : icone G) */
.int-account-icon--google { background: var(--accent-soft); color: var(--accent); font-size: 1.25rem; }
.int-account-services { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.int-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  white-space: nowrap;
}
.int-account-chip img { width: 16px; height: 16px; object-fit: contain; display: block; }

/*  Boite SMTP/IMAP : modale de connexion (carte 'mail:imap' du catalogue). Choix du fournisseur
    (presets) + blocs IMAP / SMTP.  */
.mailacc-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mailacc-preset {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.mailacc-preset img { width: 16px; height: 16px; object-fit: contain; display: block; }
.mailacc-preset.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.mailacc-proto {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.mailacc-proto-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}
.mailacc-proto-title span { font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
/* Serveur / Port / Chiffrement sur UNE ligne (.form-row est une grille a 2 colonnes) */
.mailacc-fields {
  display: grid;
  grid-template-columns: 1fr 110px 130px;
  gap: 1rem;
}
.mailacc-same {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.mailacc-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.mailacc-note--intro { margin: 0 0 1.1rem; }

/*  Autoconfiguration : ligne d'etat sous l'adresse (recherche / trouve / introuvable / autre
    chemin de connexion) + repli des reglages serveurs.  */
.mailacc-detect {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: -0.4rem 0 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  font-size: 0.85rem;
}
.mailacc-detect > i { font-size: 1.05rem; color: var(--text-muted); flex: 0 0 auto; }
.mailacc-detect-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.mailacc-detect-text > span:first-child { color: var(--text-primary); font-weight: 600; }
.mailacc-detect-sub { color: var(--text-muted); font-size: 0.78rem; word-break: break-word; }
.mailacc-detect.is-busy > i { animation: mailacc-spin 0.9s linear infinite; }
.mailacc-detect.is-ok {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  background: var(--success-soft);
}
.mailacc-detect.is-ok > i { color: var(--success); }
.mailacc-detect.is-warn {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
  background: var(--warning-soft);
}
.mailacc-detect.is-warn > i { color: var(--warning); }
@keyframes mailacc-spin { to { transform: rotate(360deg); } }

.mailacc-adv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.2rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.mailacc-adv-toggle:hover { color: var(--accent); }
.mailacc-adv-toggle > i { transition: transform 0.15s ease; }
.mailacc-adv-toggle.is-open > i { transform: rotate(90deg); }
.mailacc-adv { margin-top: 0.2rem; }

@media (max-width: 640px) {
  .mailacc-fields { grid-template-columns: 1fr; }
}

/* Modale de liaison WhatsApp (/integrations, carte whatsapp:link) */
.wa-modal-ic {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
}
.wa-link-intro { margin: 0 0 0.8rem; }
.wa-link-steps {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.wa-link-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
}
.wa-link-qr {
  width: 190px;
  height: 190px;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  border: 1px solid var(--border);
}
.wa-link-code-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.wa-link-code {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  padding: 0.45rem 0.9rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  user-select: all;
}
.wa-link-open { margin-bottom: 0.9rem; }
.wa-link-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Modale de connexion Bluesky (/integrations, carte bluesky:app) */
.bsky-modal-ic {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
}
.bsky-intro {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.bsky-steps {
  margin: 0.2rem 0 1rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.bsky-gen-link { width: 100%; justify-content: center; }

.alert-warning {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--warning) 24%, transparent);
  color: var(--warning);
}

/*  Accueil (home) : 2 colonnes (assistants + discussions) + barre de chat glass.  */
/* Hauteur : sur l'Accueil, la chaine main-content > page-content > .home passe en flex
   et remplit exactement le viewport visible (dvh = barre d'URL mobile geree). Plus
   aucun calcul dependant de la topbar ou des paddings -> jamais de bloc blanc en bas. */
.main-content:has(.home) {
  display: flex;
  flex-direction: column;
  /* Hauteur DEFINIE (pas min-height) : sans hauteur fixe, .home-chat-scroll reporte la
     hauteur totale de son contenu au conteneur (overflow:auto ne plafonne pas la taille
     intrinseque) -> tout grandit et c'est le body qui scrolle. Avec height fixe +
     min-height:0 sur la chaine, .home-chat-scroll cape et scrolle, composer fige en bas. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.main-content:has(.home) .page-content {
  flex: 1;
  min-height: 0;   /* autorise le retrecissement sous la hauteur du contenu (sinon le defaut
                      min-height:auto fait grandir la chaine -> le body scrolle au lieu de .home-chat-scroll) */
  display: flex;
  flex-direction: column;
  width: 100%;
}
.home {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  min-height: 0;   /* idem : laisse .home-chat-scroll gerer le scroll, composer fixe en bas */
  display: flex;
  flex-direction: column;
}
/* Mascotte en filigrane sur /chat : posee en bas a gauche du contenu, transparente
   derriere le chat (le contenu passe au-dessus via z-index 1). Le bas de l'image fond
   en transparent via un mask degrade -> aucune ligne de coupe. */
.home-mascot-bg {
  position: fixed;
  left: calc(var(--sidebar-width) + 1.5vw);
  bottom: 9vh;
  height: 38vh;
  max-height: 380px;
  max-width: 45vw;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0;                       /* invisible sur l'ecran de bienvenue... */
  transition: opacity 0.8s ease;
}
.home-mascot-bg.is-on { opacity: 1; }   /* ...fade in des qu'une conversation s'affiche */
.home-mascot-bg img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;       /* resize sans jamais deformer */
  object-position: left bottom;
  display: block;
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, black 62%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, black 62%, transparent 96%);
}
/* Mobile : sidebar en overlay -> recale a gauche, reduit et remonte au-dessus du
   composer (positions en vh : suivent la hauteur de l'ecran). */
@media (max-width: 768px) {
  .home-mascot-bg { left: 1rem; height: 22vh; bottom: 30vh; }
}
/* Ecran peu haut (phone paysage, petite fenetre) : encore plus compact. */
@media (max-height: 600px) {
  .home-mascot-bg { height: 18vh; bottom: 26vh; }
}
/* Fond custom par agent : le decor de sa carte (var(--agent-bg) via agent-tint--<slug>,
   pose par soclai-ai.js) en filigrane plein ecran, fondu en diagonale depuis le coin
   haut-droit (mask) -> complementaire de la mascotte en bas a gauche. */
.home-agent-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--sidebar-width);
  z-index: 0;
  pointer-events: none;
  background-image: var(--agent-bg, none);
  background-size: cover;
  background-position: center top;
  opacity: 0;
  transition: opacity 0.8s ease;
  mask-image: linear-gradient(65deg, transparent 38%, black 82%);
  -webkit-mask-image: linear-gradient(65deg, transparent 38%, black 82%);
}
.home-agent-bg.is-on { opacity: 0.16; }
@media (max-width: 768px) {
  .home-agent-bg { left: 0; }
}
.home-chat-topbar,
.home-chat-scroll,
.home-composer { position: relative; z-index: 1; }

/* Topbar du chat inline (/chat) : bouton "Retour" a gauche (visible en conversation)
   + badge agent a droite (visible quand un agent est selectionne). */
.home-chat-topbar {
  position: relative;   /* z-index au-dessus de la mascotte de fond (cf. bloc plus haut) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 54px;   /* pas de saut de layout quand back/identite apparaissent */
  padding: 0.75rem 0 0.25rem;
}
/* Bouton "Retour" (id soclaiAiBack) : .btn.btn-ghost.btn-sm, identique en taille, forme et
   position au "Retour aux assistants" du cockpit (cf. .home-cockpit-actions). Pas de
   style custom : seul le pane qui le porte est cale pour qu'il ne bouge pas d'un onglet a l'autre. */
/* Commandes du chat inline : groupe d'icones EN HAUT a gauche dans la conversation, dans la
   topbar du chat (a cote du bouton Retour). En flux -> meme rendu desktop / tablette / mobile,
   aucun calage fragile. Voix / vitesse / nouvelle conversation n'ont rien a piloter sur
   l'ecran de bienvenue : elles apparaissent avec la mascotte (classe is-on sur
   .home-mascot-bg). L'historique est exclu de ce masquage, cf. .home-chat-hist plus bas. */
.home-chat-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.home-chat-actions > :not(.home-chat-hist) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.home-mascot-bg.is-on ~ .home-chat-topbar .home-chat-actions > :not(.home-chat-hist) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.6s ease;
}
.home-chat-tts {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 1.05rem;
  cursor: pointer;
  transition: var(--transition);
}
.home-chat-tts:hover { color: var(--accent); background: var(--bg-card-hover); }
.home-chat-tts.is-on { color: var(--accent); border-color: var(--accent); }
/* Historique : seule commande presente sur l'ecran de bienvenue. La topbar y etant vide, on
   lui donne son libelle pour qu'elle soit reperable ; des que la conversation demarre elle
   redevient une pastille ronde alignee sur les autres icones. */
.home-chat-hist {
  width: auto;
  padding: 0 0.85rem;
  border-radius: var(--radius-pill);
  gap: 0.4rem;
}
.home-chat-hist span { font-size: 0.85rem; }
.home-mascot-bg.is-on ~ .home-chat-topbar .home-chat-hist { width: 36px; padding: 0; }
.home-mascot-bg.is-on ~ .home-chat-topbar .home-chat-hist span { display: none; }

/* ----- Environnement de travail de l'agent (onglets Conversation / Cockpit / Personnalisation) ----- */
/* Meme style que .app-seg (la bascule "Vincent / Toutes") : petit track pilule gris, bulle
   blanche surelevee sur l'actif. On garde un selecteur qui COULISSE (translateX, animation
   lineaire) entre les 3 positions. Onglets a largeur egale pour que le glissement tombe pile.
   Le deplacement est pilote par la classe .home--tab-* posee sur .home par chat.js. */
.home-tabs {
  position: relative; z-index: 1;
  display: inline-flex;
  margin: 0.5rem 0 0.1rem;
  padding: 0.25rem;
  background: var(--bg-input);
  border-radius: var(--radius-pill);
  isolation: isolate;
}
/* La bulle blanche coulissante (derriere le texte). translateX(100%) = une case pile, car sa
   largeur vaut exactement un onglet (pas de gap entre les onglets). */
.home-tabs::before {
  content: "";
  position: absolute; z-index: -1;
  top: 0.25rem; bottom: 0.25rem; left: 0.25rem;
  width: calc((100% - 0.5rem) / var(--home-tab-count, 3));
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transform: translateX(calc(var(--home-tab-index, 0) * 100%));
  transition: transform .2s linear;
}
/* Bulle coulissante generique (N onglets) : chat.js pose --home-tab-count (largeur = 1 case) et
   --home-tab-index (position). Un seul onglet -> count=1 -> largeur pleine, index 0. */
.home-tab {
  flex: 1 1 0;
  position: relative;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit; font-size: 0.85rem; font-weight: 500;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: color .2s ease;
}
.home-tab:hover:not(.is-active) { color: var(--text-primary); }
.home-tab.is-active { color: var(--text-primary); }
.home-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Panneaux Cockpit / Personnalisation : caches par defaut, montres selon l'onglet actif. */
.home-cockpit, .home-perso, .home-data { display: none; position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 0.25rem 1.5rem; gap: 1rem; }
.home--tab-cockpit .home-chat-topbar,
.home--tab-cockpit .home-chat-scroll,
.home--tab-cockpit .home-composer,
.home--tab-data .home-chat-topbar,
.home--tab-data .home-chat-scroll,
.home--tab-data .home-composer,
.home--tab-perso .home-chat-topbar,
.home--tab-perso .home-chat-scroll,
.home--tab-perso .home-composer { display: none; }
.home--tab-cockpit .home-cockpit { display: flex; flex-direction: column; }
.home--tab-perso .home-perso { display: flex; flex-direction: column; }
.home--tab-data .home-data { display: flex; flex-direction: column; }

/* ===== Onglet Donnees : mini-Drive de l'agent (dossier systeme auto-lu par sa KB) ===== */
.home-data-head { display: flex; align-items: flex-start; gap: 0.9rem; flex-wrap: wrap; }
.home-data-avatar {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: color-mix(in srgb, var(--agent-accent, var(--accent)) 16%, var(--bg-input));
  border: 2px solid var(--agent-accent, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--agent-accent, var(--accent)) 14%, transparent);
}
.home-data-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.home-data-headtext { flex: 1; min-width: 200px; }
.home-data-title { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.home-data-sub { font-size: 0.88rem; color: var(--text-muted); margin: 0.15rem 0 0.35rem; max-width: 60ch; }
.home-data-locked {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600;
  color: var(--agent-accent, var(--accent));
  background: color-mix(in srgb, var(--agent-accent, var(--accent)) 12%, transparent);
  padding: 0.15rem 0.55rem; border-radius: var(--radius-pill);
}
.home-data-actions { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; }
.home-data-import { cursor: pointer; }

.home-data #soclaiAiDataFolders { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.home-data #soclaiAiDataFolders:empty { display: none; }
.home-data-folder {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.7rem; min-width: 170px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; position: relative; transition: border-color .15s ease, box-shadow .15s ease;
}
.home-data-folder:hover { border-color: color-mix(in srgb, var(--agent-accent, var(--accent)) 45%, var(--border)); box-shadow: var(--shadow-sm); }
.home-data-folder-ic { font-size: 1.5rem; color: var(--folder, var(--text-muted)); flex-shrink: 0; }
.home-data-folder-body { min-width: 0; }
.home-data-folder-name { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-data-folder-meta { font-size: 0.75rem; color: var(--text-muted); }
.home-data-newfolder { cursor: default; }
.home-data-newfolder .form-input { height: 32px; font-size: 0.85rem; }

/* flex:1 remplit la hauteur du volet ; sans align-content:start la grille etire sa ligne
   (et donc les cartes) sur toute la hauteur libre -> cartes geantes. On la garde compacte,
   cartes calees en haut, comme la mediatheque /documents. */
.home-data #soclaiAiDataGrid { flex: 1; align-content: start; }
.home-data-card { position: relative; }
.home-data-del {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--bg-card) 82%, transparent); color: var(--danger);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0;
  box-shadow: var(--shadow-sm); transition: opacity .15s ease, background .15s ease;
}
.home-data-folder .home-data-del { top: 50%; transform: translateY(-50%); background: transparent; box-shadow: none; }
.home-data-card:hover .home-data-del, .home-data-folder:hover .home-data-del { opacity: 1; }
.home-data-del:hover { background: color-mix(in srgb, var(--danger) 16%, var(--bg-card)); }

.home-data-crumb {
  border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 0.82rem;
  cursor: pointer; padding: 0.15rem 0.3rem; border-radius: var(--radius-sm);
}
.home-data-crumb:hover:not(.is-current) { color: var(--text-primary); background: var(--bg-input); }
.home-data-crumb.is-current { color: var(--text-primary); font-weight: 600; cursor: default; }
.home-data-crumb-sep { color: var(--text-muted); font-size: 0.9rem; vertical-align: middle; }

.home-perso-title, .home-cockpit-title { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.home-perso-sub, .home-cockpit-sub { font-size: 0.88rem; color: var(--text-muted); margin: 0.15rem 0 0; }
.home-perso-head, .home-cockpit-head { margin-bottom: 0.4rem; }

.home-spaces { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.home-space {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.home-space-head { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--text-primary); }
.home-space-head i { color: var(--accent); }
.home-space-desc { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.home-space-list { display: flex; flex-direction: column; gap: 0.4rem; }
.home-space-empty { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.home-doc {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-input);
}
.home-doc.is-matrix { border-color: var(--accent); background: var(--accent-soft); }
.home-doc-main { display: flex; align-items: center; gap: 0.5rem; }
/* Dossier entier attache a la base de connaissance : icone palette --folder + compteur. */
.home-doc--folder .home-doc-folder-ic { color: var(--folder, #64748b); font-size: 1.1rem; flex: none; }
.home-doc-folder-meta { flex: none; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.home-doc-main > i { color: var(--accent); flex: none; }
.home-doc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); text-decoration: none; font-size: 0.88rem; }
.home-doc-name:hover { text-decoration: underline; }
.home-doc-badge {
  flex: none; display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.1rem 0.45rem; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 600;
}
.home-doc-matrix-btn {
  flex: none; border: none; background: none; cursor: pointer;
  color: var(--text-muted); padding: 0.2rem; border-radius: 6px; line-height: 1;
}
.home-doc-matrix-btn:hover { color: var(--accent); background: var(--bg-card); }
.home-doc-matrix-btn.is-on { color: var(--accent); }
.home-doc-del { border: none; background: none; color: var(--text-muted); cursor: pointer; padding: 0.2rem; flex: none; }
.home-doc-del:hover { color: #d33; }
.home-doc-matrix-edit { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.1rem 0.1rem 0.25rem; }
.home-doc-matrix-lbl { font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; }
.home-doc-matrix-input {
  width: 100%; padding: 0.4rem 0.55rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-primary); font-size: 0.85rem;
}
.home-doc-matrix-input:focus { outline: none; border-color: var(--accent); }
.home-doc-matrix-actions { display: flex; gap: 0.4rem; }
.home-dropzone {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 0.6rem;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  transition: var(--transition);
}
.home-dropzone:hover { border-color: var(--accent); color: var(--accent); }
/* Bouton "choisir un document existant" (base de connaissance) : discret, sous le dropzone. */
.home-space-pick {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  width: 100%; margin-top: 0.4rem;
  border: 0; background: none;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit; font-size: 0.8rem;
  padding: 0.3rem;
  transition: var(--transition);
}
.home-space-pick:hover { color: var(--accent); }
/* Selecteur de documents reutilisable (window.SoclaiDocPicker) : grille facon /documents
   (vignette + nom + type), recherche + filtres + pagination. Reutilise les briques comm-*. */
.modal--docpick { max-width: 880px; width: 95%; }
.docpick { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; min-height: 0; }
.docpick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.docpick-search { flex: 1 1 220px; }
.docpick-types { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.docpick-count { margin-left: auto; }
.docpick-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem; margin: 0; padding: 2px;
  max-height: 54vh; overflow-y: auto;
}
.docpick-card { cursor: pointer; transition: var(--transition); }
.docpick-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.docpick-card .comm-card-thumb { aspect-ratio: 4 / 3; }
.docpick-card .comm-card-body { padding: 0.55rem 0.6rem 0.6rem; gap: 0.4rem; }
.docpick-card .comm-card-name { font-size: 0.85rem; }
.docpick-type-badge { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }
.docpick-foot { margin-top: 0.15rem; }
.docpick-add { width: 100%; justify-content: center; }
.docpick-tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.78rem; color: var(--success); font-weight: 500;
}
.docpick-card.is-attached { opacity: 0.6; cursor: default; }
.docpick-card.is-attached:hover { border-color: var(--border); box-shadow: none; }
.docpick-card.is-loading { opacity: 0.6; pointer-events: none; }
.docpick-pager { margin: 0; }
.docpick-pager--top:not(:empty) { margin-bottom: 0.4rem; }
/* Navigation par dossiers du picker : fil d'ariane + cartes dossiers (palette --folder,
   cf. .folder-c-* plus bas). Clic carte = entrer ; bouton = ajouter le dossier entier. */
.docpick-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; min-height: 26px; margin-top: 0.55rem; }
.docpick-crumb {
  border: 0; background: none; padding: 0.15rem 0.3rem; border-radius: 6px; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); transition: var(--transition);
}
.docpick-crumb:hover { color: var(--accent); background: var(--bg-card-hover); }
.docpick-crumb.is-current { color: var(--text-primary); cursor: default; }
.docpick-crumb-sep { font-size: 0.95rem; color: var(--text-muted); }
.docpick-folders {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem;
  max-height: 30vh; overflow-y: auto; margin: 0.45rem 0 0.6rem;
}
/* Grille : ligne 1 = vignettes + NOM (qui prend toute la largeur restante, donc lisible),
   ligne 2 = le bouton "Tout le dossier" pleine largeur. Avant : tout sur une ligne -> le nom,
   coince entre les vignettes et le bouton, etait rabote a ~1 caractere ("R." pour "Reseaux sociaux"). */
.docpick-folder {
  position: relative; display: grid; min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "thumb body" "action action";
  align-items: center; column-gap: 10px; row-gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card);
  cursor: pointer; transition: var(--transition);
}
.docpick-folder:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.docpick-folder-ic { grid-area: thumb; font-size: 1.45rem; color: var(--folder, #64748b); }
.docpick-folder.folder-c-rainbow .docpick-folder-ic {
  background: var(--rainbow-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Pile de miniatures du contenu du dossier (apercu "il y a des fichiers dedans") : jusqu'a 3 tuiles
   legerement superposees + badge dossier colore + "+N" si le dossier en contient davantage. */
.docpick-folder-thumbs { grid-area: thumb; position: relative; display: flex; align-items: center; padding-right: 4px; }
.docpick-folder-thumb {
  position: relative; width: 32px; height: 38px; flex: 0 0 auto; border-radius: 7px; overflow: hidden;
  border: 1.5px solid var(--bg-card); background: var(--bg-subtle, #f1f1f4);
  box-shadow: 0 1px 3px rgba(20, 20, 40, .14);
}
.docpick-folder-thumb + .docpick-folder-thumb { margin-left: -11px; }
.docpick-folder-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.docpick-folder-thumb .comm-card-doc-icon {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: 15px; color: var(--text-muted);
}
.docpick-folder-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 16, 45, .55); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: -.02em;
}
.docpick-folder-badge {
  position: absolute; right: -1px; bottom: -3px; width: 16px; height: 16px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
  background: var(--bg-card); color: var(--folder, #64748b); box-shadow: 0 1px 3px rgba(20, 20, 40, .22);
}
.docpick-folder-body { grid-area: body; min-width: 0; }
/* Nom sur 2 lignes max (au lieu d'une ellipsis a 1 caractere) : le nom du dossier reste lisible
   meme long. Le title (survol) donne le nom complet en dernier recours. */
.docpick-folder-name {
  margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.docpick-folder-meta {
  display: block; font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docpick-folder-add { grid-area: action; justify-self: stretch; }
.docpick-folder .docpick-tag { grid-area: action; justify-self: start; }
.docpick-folder.is-attached { opacity: 0.6; cursor: default; }
.docpick-folder.is-attached:hover { border-color: var(--border); box-shadow: none; }
.docpick-folder.is-loading { opacity: 0.6; pointer-events: none; }
/* Barre d'action du cockpit (bouton "Revenir a la conversation") : calee EXACTEMENT comme
   la topbar du chat (.home-chat-topbar) -> meme taille, meme position que le bouton "Retour",
   pas de saut a la bascule d'onglet. Les marges negatives annulent le padding du pane
   .home-cockpit (1rem en haut, 0.25rem a gauche) pour retrouver l'origine de la topbar. */
.home-cockpit-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem;
  min-height: 54px;
  margin: -1rem -0.25rem 0;
  padding: 0.75rem 0 0.25rem;
}
.home-cockpit-empty { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

/* Carte outil du Cockpit : visuel en banniere + texte + CTA. Accent = tint de l'agent
   courant (.agent-tint--X pose --agent-accent), repli sur l'accent global. */
.cockpit-tool {
  --tool-accent: var(--agent-accent, var(--accent));
  display: flex; flex-direction: column;
  max-width: 460px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
.cockpit-tool:hover {
  border-color: color-mix(in srgb, var(--tool-accent) 45%, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.cockpit-tool-visual {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-secondary);
}
.cockpit-tool-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.cockpit-tool:hover .cockpit-tool-visual img { transform: scale(1.03); }
.cockpit-tool-body {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.9rem 1.1rem 0.8rem;
}
.cockpit-tool-name { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); line-height: 1.25; }
.cockpit-tool-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; }
.cockpit-tool-foot {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.1rem;
  border-top: 1px dashed color-mix(in srgb, var(--tool-accent) 45%, transparent);
  color: var(--text-muted);
  font-size: 0.85rem; font-weight: 500;
  transition: var(--transition);
}
.cockpit-tool:hover .cockpit-tool-foot { color: var(--tool-accent); }
.cockpit-tool-foot i { transition: transform 0.2s ease; }
.cockpit-tool:hover .cockpit-tool-foot i { transform: translateX(3px); }

/* Variante "tout-en-un" : l'image porte deja titre, description et bouton -> on l'affiche
   en pleine carte cliquable (ratio naturel conserve, pas de texte en dessous). */
.cockpit-tool--full { display: block; padding: 0; }
.cockpit-tool--full img { width: 100%; height: auto; display: block; }

/* Variante "stats" : mini-tableau de bord du mois (support / standard telephonique). Pas de
   visuel : deux chiffres (demandes a traiter + volume) charges a la volee, CTA vers l'inbox. */
.cockpit-tool--stats .cockpit-tool-body { gap: 0.8rem; padding: 1rem 1.1rem 0.9rem; }
.cockpit-stats { display: flex; gap: 1.6rem; }
.cockpit-stat { display: flex; flex-direction: column; gap: 0.1rem; }
.cockpit-stat-num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--text-primary); }
.cockpit-stat-lbl { font-size: 0.78rem; color: var(--text-muted); }
/* Des qu'il y a des demandes en attente, le premier chiffre passe a l'accent de l'agent. */
.cockpit-tool--stats.has-requests .cockpit-stat:first-child .cockpit-stat-num { color: var(--tool-accent); }

@media (max-width: 768px) { .home-spaces { grid-template-columns: 1fr; } }

/* Spinner d'ouverture directe d'une conversation (/chat?conv=) : centre dans la zone de
   chat, le temps que soclai-ai.js charge le fil. Evite le flash de l'intro. */
.home-chat-loading { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.home-chat-loading > i { font-size: 2.4rem; animation: home-chat-spin 0.9s linear infinite; }
@keyframes home-chat-spin { to { transform: rotate(360deg); } }
/* Zone messages du chat inline (/chat) : remplit l'espace et scrolle ; contient
   l'intro de l'agent tant qu'aucun message, puis la conversation. */
.home-chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* en butee, ne tire pas la page derriere (stretch Android) */
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.25rem 0.25rem 0.6rem;
  font-family: 'Sora', sans-serif;   /* police dediee du chat IA */
}
/* Intro agent (/chat, /chat?agent=<slug>) : qui il est + ce qu'on peut lui demander ;
   disparait au premier message. Teinte par agent-tint--<slug> (--agent-accent). */
.home-agent-intro {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3rem;
  padding: 1.5rem 1rem;
}
.home-agent-intro.is-hidden { display: none; }
.home-agent-intro-avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-input);
  box-shadow: 0 0 0 3px var(--agent-accent), var(--shadow-md);
  margin-bottom: 1rem;
}
.home-agent-intro-name { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.home-agent-intro-role { color: var(--agent-accent); font-weight: 600; font-size: 0.92rem; }
.home-agent-intro-desc { color: var(--text-secondary); max-width: 440px; margin-top: 0.55rem; }
.home-agent-intro-hint { color: var(--text-muted); font-size: 0.88rem; max-width: 440px; margin-top: 0.3rem; }

/* Bouton "?" en haut a droite de l'intro : ouvre le guide des capacites (modale #agentCapsModal). */
.home-agent-help {
  position: absolute; top: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--bg-card); color: var(--text-muted);
  font-size: 1.15rem; cursor: pointer;
  transition: var(--transition);
}
.home-agent-help:hover { border-color: var(--agent-accent); color: var(--agent-accent); }

/* Guide des capacites (corps de la modale "Que peut faire <agent>"). */
.agent-caps-lead { color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1rem; }
.agent-caps-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.agent-cap {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.agent-cap.is-off { opacity: 0.6; }
.agent-cap-icon {
  flex-shrink: 0; font-size: 1.2rem; color: var(--agent-accent, var(--accent));
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-input); border-radius: var(--radius);
}
.agent-cap.is-off .agent-cap-icon { color: var(--text-muted); }
.agent-cap-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.agent-cap-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.agent-cap-label { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.agent-cap-desc { font-size: 0.82rem; color: var(--text-muted); }
.agent-cap-ex { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.1rem; }
.agent-cap-ex em { color: var(--text-primary); font-style: italic; }
.agent-cap-cost {
  flex-shrink: 0; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill);
}
.agent-cap-cost--ai   { color: var(--accent); background: var(--accent-soft); }
.agent-cap-cost--web  { color: #b4731a; background: color-mix(in srgb, #d98a24 16%, transparent); }
/* Barre de chat glass (lance l'assistant). */
.home-composer {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0.85rem 1.1rem 0.6rem;
  border-radius: 26px;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid color-mix(in srgb, white 50%, var(--border));
  box-shadow: 0 18px 50px rgba(20, 20, 40, 0.14), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.home-composer-grip { margin: -0.35rem 0 0.1rem; }
/* Saisie pleine largeur EN HAUT, puis une barre d'actions EN DESSOUS (style epure du composer
   onboarding) : trombone a gauche, micro + envoi pousses a droite par le spacer. */
.home-composer-input {
  width: 100%;
  border: none; background: transparent; outline: none;
  font: inherit; font-size: 1.1rem; line-height: 1.45; color: var(--text-primary);
  padding: 0.25rem 0.15rem;
  resize: none;
  min-height: 36px;
  max-height: 60vh;
  overflow-y: auto;
}
.home-composer-input::placeholder { color: var(--text-muted); }
.home-composer-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.home-composer-spacer { flex: 1; }
.home-composer-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: var(--transition);
}
.home-composer-icon:hover { background: var(--bg-card-hover); color: var(--text-secondary); }
/* Envoi sobre : gris quand le champ est vide, accent des qu'on ecrit (le form recoit .has-text). */
.home-composer-send {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer; flex-shrink: 0;
  font-size: 1.2rem;
  background: var(--bg-input); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.home-composer.has-text .home-composer-send { background: var(--accent); color: #fff; }
.home-composer.has-text .home-composer-send:hover { filter: brightness(1.08); }
/* Mode STOP (carre d'arret) pendant la generation, cf. soclai-ai.js setSending : prioritaire. */
.home-composer-send.is-stop,
.home-composer.has-text .home-composer-send.is-stop { background: var(--stop); color: #fff; }
.home-composer-send.is-stop:hover,
.home-composer.has-text .home-composer-send.is-stop:hover { background: var(--stop-hover); }

/* Mobile : composer allege. */
@media (max-width: 768px) {
  .home-composer { padding: 0.6rem 0.85rem 0.45rem; border-radius: 20px; }
  .home-composer-input { font-size: 1rem; }
}

/*  Stat icon variants : on reste dans la palette violette (sobre).  */
.stat-icon-success { background: var(--accent-soft);  color: var(--accent); }
.stat-icon-info    { background: var(--bg-input); color: var(--text-secondary); }

/*  Profile grid  */
/* Carte identite (hero) */
.profile-hero { padding: 0; }
.profile-hero-avatar {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.profile-hero-avatar .avatar-preview {
  width: 88px;
  height: 88px;
  font-size: 1.85rem;
}

/* Pied de carte : barre d'action (boutons save des reglages). */
.card-footer {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
/* Dernier champ d'un card-body : pas de marge basse (le card-footer fait la separation). */
.card-body > form .form-group:last-child,
.card-body > .form-group:last-child,
.card-body > .form-row:last-child .form-group { margin-bottom: 0; }

/* Champ avatar (onglet Profil) : avatar + pastille upload + bouton supprimer. */
.profile-avatar-field {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.25rem;
}
/* Toute la photo de profil est cliquable (label sur l'avatar) pour la remplacer. */
.profile-avatar-clickable {
  display: block;
  position: relative;
  width: 88px;
  height: 88px;
  cursor: pointer;
  border-radius: 50%;
}
.profile-avatar-clickable:hover .avatar-preview { filter: brightness(0.92); }
.profile-avatar-clickable:hover .profile-avatar-camera,
.logo-dropzone:hover .profile-avatar-camera { color: var(--accent); border-color: var(--accent); }
.profile-avatar-clickable.is-dragging { outline: 2px dashed var(--accent); outline-offset: 3px; }
.profile-avatar-clickable.is-dragging .avatar-preview { filter: brightness(0.85); }

.profile-avatar-camera {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-size: 0.95rem;
  transition: var(--transition);
}
.profile-avatar-camera:hover { color: var(--accent); border-color: var(--accent); }

/* Suffixe "(optionnel)" discret a cote d'un label de champ. */
.label-optional { color: var(--text-muted); font-weight: 400; }

/* Pied de carte epure (onglets /profile) : bouton a droite, sans bandeau gris. */
.card-footer-plain {
  background: none;
  border-top: 0;
  padding-top: 0;
}

/* ============================================
   Communication : tabs, generate form, grid cards, planning, modals.
   ============================================ */

/* Onglets soulignes (style unique du projet, cf. /documents). Utilisable partout :
   barre avec hairline grise, titres en texte, l'actif souligne en violet. Pas de fond
   ni de container. Desktop : la barre epouse son contenu. Mobile : largeurs egales (media query). */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--border);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.1rem;
  margin-bottom: -1px;            /* l'underline actif chevauche la hairline */
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}
.tab:not(.is-active):hover { color: var(--text-secondary); }
.tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Generation : form pleine largeur, recents en dessous (meme largeur que la page). */
.comm-gen-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.comm-gen-card .comm-side-body { padding: 1.75rem 2rem; }
.comm-recent { min-width: 0; }

/* Form en 2 zones sur desktop : description (gauche, large) + options/CTA (droite).
   align-items stretch + textarea flex:1 -> la description remplit la hauteur des options. */
.comm-gen-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  column-gap: 2.5rem;
  align-items: stretch;
}
.comm-gen-main,
.comm-gen-aside {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.comm-gen-main textarea.form-input {
  flex: 1;
  min-height: 150px;
  resize: vertical;
}
/* Panneau d'apercu (colonne droite des forms generation) : placeholder en attendant
   d'afficher le media genere. */
.comm-preview-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 260px;
  background: var(--bg-input);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  text-align: center;
  padding: 1.5rem;
}
.comm-preview-pane i { font-size: 2.4rem; opacity: 0.7; }
.comm-preview-pane p { margin: 0; font-size: 0.88rem; max-width: 240px; }
/* Refus de moderation : cadre ambre (decision assumee), pas un rouge d'erreur systeme. */
.comm-preview-pane.is-refused {
  border-color: var(--warning);
  color: var(--text-primary);
}
.comm-preview-pane.is-refused i { color: var(--warning); opacity: 1; }
.comm-preview-refused-title { font-size: 0.98rem; color: var(--warning); }
/* Loader de l'apercu : mascotte plus grande que sur les cartes (zone spacieuse). */
.comm-preview-pane .comm-card-pending-mascot {
  width: 84px;
  height: 84px;
}
/* Media pret : le pane devient un cadre plein qui presente la generation. */
.comm-preview-pane.is-filled {
  border-style: solid;
  background: var(--bg-card);
  padding: 0.6rem;
}
.comm-preview-pane.is-filled img { cursor: zoom-in; }
.comm-preview-pane img,
.comm-preview-pane video {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: var(--radius);
}
/* CTA place dans la colonne de gauche : espace au-dessus quand il suit les helpers. */
.comm-cta-mt { margin-top: 1rem; }
@media (max-width: 1000px) {
  .comm-gen-grid { grid-template-columns: 1fr; }
  .comm-gen-main textarea.form-input { min-height: 120px; }
  .comm-gen-aside { margin-top: 1.25rem; }
}
/* Ecran peu haut (PC portable) : form de generation compacte -> le bloc complet
   (jusqu'au bouton Generer) tient a l'ecran sans scroller. */
@media (max-height: 800px) {
  .comm-gen-card .comm-side-body { padding: 0.9rem 1.5rem 1rem; }
  .comm-gen-head { margin-bottom: 0.5rem; }
  .comm-divider { margin: 0.65rem 0; }
  .comm-toggle-row { padding: 0.5rem 0.9rem; margin-bottom: 0.6rem; }
  .comm-gen-main textarea.form-input { min-height: 80px; }
  .comm-label-mt { margin-top: 0.5rem; }
  .comm-preview-pane { min-height: 180px; }
  .comm-cta-btn { margin-top: 0.8rem; padding: 0.55rem; }
  .tabs { margin-bottom: 0.75rem; }
}

/* Card sidebar (form generation, liste plans...). */
.comm-side-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.comm-side-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}
/* Labels sections (au-dessus de chaque champ). */
.comm-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.comm-label-mt { margin-top: 1rem; }

/* Divider fin sous le titre du formulaire de generation. */
.comm-divider {
  border-top: 1px solid var(--border-light);
  margin: 1.25rem 0;
}

/* Toggle (switch) CSS-only : ex. activer l'image de reference. Le checkbox est cache (hidden),
   le label sert d'interrupteur, et la section .comm-ref-collapse est revelee quand il est coche. */
.comm-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  background: var(--bg-input);
  border-radius: var(--radius);
  cursor: pointer;
}
.comm-toggle-text {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 500;
  color: var(--text-primary);
}
.comm-toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  background: var(--toggle-off);
  border-radius: 999px;
  transition: var(--transition);
}
.comm-toggle-input:not(:checked) ~ .comm-toggle-row:hover .comm-toggle-switch { background: var(--toggle-off-hover); }
.comm-toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.comm-toggle-input:checked ~ .comm-toggle-row .comm-toggle-switch { background: var(--accent); }
.comm-toggle-input:checked ~ .comm-toggle-row .comm-toggle-switch::after { transform: translateX(18px); }

.comm-ref-collapse { display: none; margin: 0 0 1rem; }
.comm-toggle-input:checked ~ .comm-ref-collapse { display: block; }

/* Upload zone (drag-drop image de reference). */
.comm-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-muted);
  padding: 1rem;
  background: var(--bg-card);
}
.comm-upload-zone:hover,
.comm-upload-zone.is-dragging {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--text-primary);
}
.comm-upload-zone.is-dragging { border-style: solid; }
.comm-upload-zone i {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-muted);
}
.comm-upload-zone p {
  font-size: 0.82rem;
  margin: 0;
}
.comm-upload-zone[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
/* Ref preview (image acceptee + bouton retirer). */
.comm-ref-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.comm-ref-preview img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius);
  flex: 0 0 60px;
}
.comm-ref-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.comm-ref-info span {
  font-size: 0.8rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comm-ref-info button { align-self: flex-start; }

/* Bouton "choisir dans les Documents" sous le hint de la dropzone. */
.comm-ref-pick { margin-top: 0.6rem; }

/* Picker d'image de reference depuis les Documents (modale). */

/* Bouton CTA (Generer). Pleine largeur, padding plus genereux. */
.comm-cta-btn {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.75rem;
  font-size: 1rem;
  justify-content: center;
}
.comm-cta-btn i { font-size: 1.15rem; }
.comm-cta-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Alert dans la card : marge top, marges pour separer du bouton. */
.comm-side-body .alert { margin-top: 1rem; }

/* Section title (utilisable pour planning, mediatheque). */
.section-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.25rem 0 0.75rem;
}

/* Grid des cards medias. */
.comm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.comm-grid-empty {
  grid-column: 1 / -1;
  padding: 2.5rem;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.comm-card {
  position: relative;   /* ancre le menu "..." ; overflow visible pour le laisser deborder */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}
.comm-card.is-menu-open { z-index: 40; }   /* le menu passe au-dessus des cartes voisines */
.comm-card-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.comm-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.comm-card-video-fallback {
  color: var(--text-muted);
  font-size: 2.5rem;
}
/* Vignette video : la 1re frame en poster (via <video>), badge play par-dessus. */
.comm-card-video-thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; background: var(--bg-input);
}
.comm-card-video-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.25rem;
  pointer-events: none; backdrop-filter: blur(2px);
}
/* Etat "creation en cours" : mascotte + barre rayee animee (facon loader Limova). */
.comm-card-pending {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  text-align: center;
}
.comm-card-pending .ri-spin { font-size: 2.5rem; color: var(--text-muted); animation: comm-spin 1.4s linear infinite; }
.comm-card.is-uploading { opacity: 0.75; pointer-events: none; }
.comm-card-pending-mascot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent-soft);
  object-fit: cover;   /* gif paysage (Vincent typing) : crop centre sur le buste */
}
.comm-card-pending-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.comm-gen-bar {
  width: 74%;
  max-width: 150px;
  height: 5px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}
.comm-gen-bar-fill {
  position: absolute;
  top: 0;
  left: -45%;
  height: 100%;
  width: 45%;
  border-radius: 999px;
  background-image: repeating-linear-gradient(45deg,
    var(--accent) 0, var(--accent) 6px,
    color-mix(in srgb, var(--accent) 60%, white) 6px,
    color-mix(in srgb, var(--accent) 60%, white) 12px);
  animation: comm-gen-slide 1.25s ease-in-out infinite;
}
@keyframes comm-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes comm-gen-slide { 0% { left: -45%; } 100% { left: 100%; } }

/* En-tete de generation (icone douce + titre + sous-titre) facon Limova. */
.comm-gen-head {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
}
.comm-gen-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.comm-gen-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}
.comm-gen-sub {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}
/* Boutons d'aide sous la description (aide assistant + exemples). */
.comm-prompt-helpers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.comm-prompt-helpers .btn { flex: 1 1 auto; justify-content: center; }

/* Modale "Modifier avec l'assistant" : media centre (gauche) + menu d'edition (droite). */
.comm-edit-body {
  display: flex;
  gap: 0;
  padding: 0;
  max-height: 80vh;
  overflow: hidden;
}
.comm-edit-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--bg-secondary);
}
.comm-edit-stage img,
.comm-edit-stage video {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--radius);
  object-fit: contain;
  box-shadow: var(--shadow-md);
}
.comm-edit-panel {
  width: 330px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.comm-edit-panel-head {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
}
.comm-edit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.comm-edit-chip {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.comm-edit-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.comm-edit-help { align-self: flex-start; margin-top: 0.7rem; }
.comm-edit-panel .alert { margin-top: 0.9rem; margin-bottom: 0; }

@media (max-width: 760px) {
  .comm-edit-body { flex-direction: column; max-height: 82vh; overflow-y: auto; }
  .comm-edit-stage { padding: 1rem; }
  .comm-edit-stage img, .comm-edit-stage video { max-height: 40vh; }
  .comm-edit-panel { width: auto; border-left: none; border-top: 1px solid var(--border); }
}

.comm-card-body {
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.comm-card-prompt {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comm-card-name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;   /* clic = renommage inline */
}
/* Edition inline du nom (clic sur le nom -> input + check, cf. communication.js). */
.comm-card-rename {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
}
.comm-card-rename-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  outline: none;
  transition: var(--transition);
}
.comm-card-rename-input:focus {
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg-card);
}
.comm-card-rename-ok {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  transition: var(--transition);
}
.comm-card-rename-ok:hover { opacity: 0.85; }
/* Vue liste Documents : l'editeur prend la place du nom. */
.docs-media .comm-card-rename { flex: 1; min-width: 0; }
/* Media pret : toute la carte ouvre la preview au clic. */
.comm-card[data-media-status="completed"] { cursor: pointer; }
.comm-card-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: auto;   /* footer colle en bas : une carte sans description s'aligne sur celles avec texte */
}
.comm-card-meta .comm-card-date {
  margin-left: auto;
}
/* Actions de carte : bouton "..." pose sur la vignette (visible au hover), menu flottant. */
.comm-card-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.comm-card-menu-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-size: 1.05rem;
  opacity: 0;
  transition: var(--transition);
}
.comm-card:hover .comm-card-menu-btn,
.comm-card-menu-btn:focus-visible,
.comm-card.is-menu-open .comm-card-menu-btn { opacity: 1; }
.comm-card-menu-btn:hover { color: var(--text-primary); background: #fff; }
@media (hover: none) { .comm-card-menu-btn { opacity: 1; } }
.comm-card-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 185px;
  display: flex;
  flex-direction: column;
  padding: 0.3rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.comm-card-menu.is-hidden { display: none; }
.comm-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: var(--transition);
}
.comm-menu-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.comm-menu-item i { font-size: 1rem; width: 18px; flex-shrink: 0; }
.comm-menu-item.btn-comm-delete, .comm-menu-item.btn-folder-delete { color: var(--danger); }
.comm-menu-item.btn-comm-delete:hover, .comm-menu-item.btn-folder-delete:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger-hover); }

/* Menu flottant du "..." des assistants epingles (sidebar). Meme aspect que .comm-card-menu mais
   classe DEDIEE : la sidebar est globale, on ne veut pas que le closeCardMenus() de assistants.js
   (page /assistants) attrape ce menu. Ancre en fixed sous le bouton, positionne en JS (app.js). */
.nav-pin-menu {
  position: fixed;
  top: auto;
  right: auto;
  z-index: 10050;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  padding: 0.3rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
/* Variante modale preview : kebab dans le header, toujours visible. */
.comm-preview-actions {
  position: relative;
  top: auto;
  right: auto;
  margin-left: auto;
  margin-right: 0.6rem;
}
.comm-preview-actions .comm-card-menu-btn {
  opacity: 1;
  background: var(--bg-input);
  box-shadow: none;
}
.comm-preview-actions .comm-card-menu-btn:hover { background: var(--bg-card-hover); }

/* Menu du trombone (Importer / Choisir un document existant) : popover ancre en JS au-dessus
   du bouton, partout ou il y a un composer (chat flottant, lancement, entrainement).
   Reutilise .comm-card-menu / .comm-menu-item, juste repositionne en fixed. */
.soclai-attach-menu {
  position: fixed;
  top: auto;
  right: auto;
  z-index: 10002;   /* au-dessus de la fenetre de chat flottante (z-index 10000) */
  min-width: 230px;
}
/* Modale "documents existants" ouverte depuis le trombone : passe au-dessus du chat flottant
   (sinon elle s'affiche derriere, comme le menu). */
.modal-overlay.soclai-attach-modal { z-index: 10001; }
/* Meme cas pour les panneaux du chat : le JS replie la fenetre quand ils s'ouvrent, ceci est le
   filet si le repli ne s'applique pas (JS en erreur, fenetre en cours d'animation). */
#soclaiAiHistoryModal, #soclaiAiMemoryModal { z-index: 10001; }

/* Badges status / visibility. */
.badge-processing,
.badge-failed,
.badge-refused {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.7rem;
}
.badge-processing { background: var(--accent); color: #fff; }
.badge-failed     { background: var(--danger);  color: #fff; }
/* Refus de moderation (copyright/contenu sensible) : ce n'est pas une panne -> ton ambre, pas rouge. */
.badge-refused    { background: var(--warning, #b7791f); color: #fff; }
.badge-private { background: var(--bg-input); color: var(--text-muted); padding: 0.15rem 0.35rem; }
.badge-shared  { background: var(--accent-soft); color: var(--accent); padding: 0.15rem 0.35rem; }
.badge-restricted { background: var(--warning-soft, var(--accent-soft)); color: var(--warning, var(--accent)); padding: 0.15rem 0.35rem; }
.badge-published { background: var(--success-soft); color: var(--success); }
/* Document en memoire de contexte IA : pastille cerveau (pulse tant que le resume n'est pas pret). */
.badge-memory  { background: var(--accent-soft); color: var(--accent); padding: 0.15rem 0.35rem; }

/* Modale "Historique des versions" RGPD (documents) : plus large (modal-lg pose en JS) + rangs
   aeres et lisibles, badge "Version active" dedie (au lieu du badge vert generique du social). */
#rgpdHistoryModal .modal-body { padding: 0.4rem 0.25rem; }
/* Etat texte seul (aucune version / chargement / erreur) : le padding serre est pense pour le
   tableau (aere par ses td) ; sans tableau on redonne de l'air au message. */
#rgpdHistoryModal .modal-body:not(:has(.table-wrap)) { padding: 1.3rem 1.4rem; }
#rgpdHistoryModal table.table { border-collapse: collapse; }
#rgpdHistoryModal table.table td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  color: var(--text-primary);
}
#rgpdHistoryModal table.table tr + tr td { border-top: 1px solid var(--border); }
#rgpdHistoryModal table.table td:first-child { color: var(--text-secondary); white-space: nowrap; }
#rgpdHistoryModal .table-actions { text-align: right; white-space: nowrap; }
.rgpd-hist-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  background: var(--success-soft);
  color: var(--success);
}
.rgpd-hist-badge i { font-size: 0.95rem; }
/* Etats du badge memoire IA : orange pulse = interpretation en cours, vert = pret, rouge = echec. */
.badge-memory.is-pending { background: var(--warning-soft); color: var(--warning); animation: comm-memory-pulse 1.2s ease-in-out infinite; }
.badge-memory.is-ready   { background: var(--success-soft); color: var(--success); }
.badge-memory.is-failed  { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
@keyframes comm-memory-pulse { 50% { opacity: 0.45; } }

/* RGPD Secure : bouclier d'etat de preparation IA, present sur toutes les cartes. */
.badge-rgpd { padding: 0.15rem 0.35rem; }
.badge-rgpd.is-unprocessed { background: var(--warning-soft); color: var(--warning); }
.badge-rgpd.is-original    { background: var(--bg-input); color: var(--text-secondary); }
.badge-rgpd.is-declared    { background: var(--accent-soft);  color: var(--accent); }
.badge-rgpd.is-protected   { background: var(--success-soft); color: var(--success); }
.badge-rgpd.is-failed      { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.badge-rgpd.is-bypassed    { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.badge-rgpd.is-stale       { background: var(--warning-soft); color: var(--warning); animation: comm-memory-pulse 1.2s ease-in-out infinite; }
.badge-rgpd.is-review      { background: var(--warning-soft); color: var(--warning); animation: comm-memory-pulse 1.2s ease-in-out infinite; }
.rgpd-declare-pii          { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--warning-soft); }
.rgpd-declare-pii-warn     { margin: 0 0 6px; font-weight: 600; color: var(--warning); }
.rgpd-declare-pii-intro    { margin: 0 0 4px; color: var(--text-secondary); }
.rgpd-declare-pii-list     { margin: 4px 0 10px; padding-left: 20px; }
.rgpd-declare-pii-list li  { margin: 2px 0; }
/* Verdict "rien detecte" (scan clean au depot) : rassurance verte. */
.rgpd-declare-clean        { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: var(--success-soft); color: var(--success); font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }

/* Modal d'avertissement RGPD : liste des documents non prepares d'un dossier. */
.rgpd-warn-items { margin: 0 0 0.75rem; padding-left: 1.25rem; color: var(--text-muted); max-height: 9rem; overflow-y: auto; }

/* Scan PII synchrone au depot (soclaiRgpdGate) : loader non bloquant (annuler / valider sans attendre). */
.rgpd-scan-file { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; margin-bottom: 0.75rem; }
.rgpd-scan-file i { color: var(--accent); }
.rgpd-scan-loading { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 0.5rem 0 0.25rem; color: var(--text-muted); text-align: center; }
.rgpd-scan-loading p { margin: 0; }
.rgpd-scan-spinner { font-size: 2rem; color: var(--accent); animation: rgpd-scan-spin 0.9s linear infinite; }
@keyframes rgpd-scan-spin { to { transform: rotate(360deg); } }

/* ==================== RGPD Secure : editeur de caviardage ==================== */

.rgpd-editor {
  /* Au-dessus du chat (10000) et des modals (9999), sous le curseur magique (10500)
     et les toasts (10700). Fond OPAQUE : la page ne doit jamais transparaitre. */
  position: fixed; inset: 0; z-index: 10100;
  display: flex; flex-direction: column;
  background: var(--bg-primary);
}
body.rgpd-editor-open { overflow: hidden; }
.rgpd-editor-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.65rem 1rem;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.rgpd-editor-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; min-width: 0; }
.rgpd-editor-title i { color: var(--accent); font-size: 1.2rem; }
.rgpd-editor-docname {
  font-weight: 400; color: var(--text-muted); max-width: 28ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rgpd-editor-tools { display: flex; align-items: center; gap: 0.35rem; }
.rgpd-tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-input); color: var(--text-primary); cursor: pointer; font-size: 1rem;
}
.rgpd-tool-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rgpd-tool-btn:disabled { opacity: 0.4; cursor: default; }
.rgpd-editor-count { color: var(--text-muted); font-size: 0.85rem; margin-left: 0.35rem; white-space: nowrap; }
.rgpd-editor-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.rgpd-editor-rename { width: 16rem; max-width: 40vw; }
.rgpd-editor-help {
  margin: 0; padding: 0.45rem 1rem;
  color: var(--text-muted); font-size: 0.85rem;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.rgpd-editor-stage {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* Zone de travail type "lightbox" : le document caviarde ressort, masques lisibles. */
  background: #26272c;
}
/* Zoom pleine largeur : le canvas depasse l'ecran, le stage devient scrollable. */
.rgpd-editor-stage.is-zoomed {
  display: block; overflow: auto; text-align: center; padding: 12px;
}
.rgpd-editor-stage.is-zoomed #rgpdEditorCanvas { display: inline-block; }
#rgpdEditorCanvas { cursor: crosshair; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); border-radius: 4px; touch-action: none; }
#rgpdEditorCanvas.is-over-mask { cursor: grab; }
#rgpdEditorCanvas.is-over-mask:active { cursor: grabbing; }
.rgpd-editor-pager { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.5rem; }
.rgpd-editor-page { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; min-width: 5.5ch; text-align: center; }
.rgpd-editor-loading {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 0.5rem;
  align-items: center; justify-content: center;
  font-size: 2rem; color: #e8e8ee;
  background: rgba(22, 23, 28, 0.7);
}
.rgpd-editor-loading span { font-size: 0.9rem; }
/* Mode texte : document affiche en texte brut selectionnable ; les passages masques
   restent lisibles dans l'editeur (fond noir, texte revele au survol), seul l'export
   les remplace par un pave fixe. */
.rgpd-editor-text {
  align-self: stretch; flex: 1; overflow-y: auto;
  margin: 12px auto; padding: 1.5rem 2rem;
  width: min(100%, 90ch);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  white-space: pre-wrap; word-break: break-word;
  font-size: 0.95rem; line-height: 1.6;
  user-select: text; cursor: text;
}
/* Mode texte d'un .docx : rendu STYLE (pages .comm-preview-docx, comme la preview),
   le pre-wrap du texte brut ne s'applique pas. */
.rgpd-editor-text.rgpd-text--docx {
  white-space: normal; background: var(--bg-input);
  width: min(100%, 920px); padding: 1.5rem;
}
.rgpd-text-masked {
  background: #000; color: #000; border-radius: 2px; cursor: pointer;
}
.rgpd-text-masked:hover { color: #bbb; }
.rgpd-text-masked.is-selected { outline: 2px solid #ff4d4d; color: #ddd; }
.rgpd-editor-mask-btn { white-space: nowrap; }

/* Mode tableur : onglets de feuilles + grille. Cellule/en-tete masque = fond noir
   (texte revele au survol, comme le mode texte) ; oeil barre = cache dans le fichier
   d'origine (affiche ici pour ne rien recopier silencieusement). */
.rgpd-editor-sheet {
  align-self: stretch; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
  margin: 12px; overflow: hidden;
}
.rgpd-sheet-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.rgpd-sheet-tab {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-input); color: var(--text-primary); cursor: pointer; font-size: 0.85rem;
}
.rgpd-sheet-tab.is-active { border-color: var(--accent); color: var(--accent); }
.rgpd-sheet-wrap {
  flex: 1; min-height: 0; overflow: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
}
.rgpd-sheet-table { border-collapse: collapse; font-size: 0.82rem; }
.rgpd-sheet-table th, .rgpd-sheet-table td {
  border: 1px solid var(--border); padding: 0.2rem 0.5rem;
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rgpd-sheet-table td { cursor: pointer; }
.rgpd-sheet-table td:hover { outline: 1px solid var(--accent); }
.rgpd-sheet-corner { background: var(--bg-input); }
.rgpd-sheet-colhead, .rgpd-sheet-rowhead {
  background: var(--bg-input); color: var(--text-muted);
  font-weight: 600; text-align: center; cursor: pointer;
  position: sticky; user-select: none;
}
.rgpd-sheet-table thead th { top: 0; position: sticky; z-index: 2; }
.rgpd-sheet-rowhead { left: 0; z-index: 1; }
.rgpd-sheet-colhead i, .rgpd-sheet-rowhead i { margin-left: 0.25rem; font-size: 0.75rem; }
.rgpd-sheet-table td.is-masked { background: #000; color: #000; }
.rgpd-sheet-table td.is-masked:hover { color: #bbb; }
.rgpd-sheet-colhead.is-masked, .rgpd-sheet-rowhead.is-masked { background: #000; color: #ddd; }

/* Preview "Voir" d'un tableur : la meme grille en LECTURE SEULE (pas de cursor/hover
   d'edition), dans la modale de preview. Rendu par window.soclaiDocView.sheet. */
.comm-preview-sheet { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-height: 72vh; }
.comm-preview-sheet .rgpd-sheet-wrap { max-height: 68vh; }
.comm-preview-sheet .rgpd-sheet-table td { cursor: default; }
.comm-preview-sheet .rgpd-sheet-table td:hover { outline: none; }
.comm-preview-sheet .rgpd-sheet-colhead, .comm-preview-sheet .rgpd-sheet-rowhead { cursor: default; }
.rgpd-sheet-truncated { margin: 0.4rem 0.6rem; color: var(--text-muted); font-size: 0.8rem; }

/* Preview "Voir" d'un DOCX : HTML produit par mammoth, rendu "page posee" en lecture
   seule. Le bandeau .comm-preview-docx-head reprend les images d'EN-TETE du document
   (logo...), extraites du zip docx (mammoth ne convertit que le corps). */
.comm-preview-docx-wrap {
  width: 100%; max-height: 72vh; overflow: auto;
  background: var(--bg-input); border-radius: var(--radius); padding: 1.4rem;
}
.comm-preview-docx {
  max-width: 780px; margin: 0 auto; padding: 2.2rem 2.6rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary); font-size: 0.93rem; line-height: 1.6;
}
.comm-preview-docx + .comm-preview-docx { margin-top: 1.3rem; }
/* Gabarit de mesure hors ecran pour la pagination par hauteur : largeur, police,
   taille et interligne poses en JS depuis la geometrie du docx (sectPr/styles.xml),
   regles typo proches des defauts Word. visibility garde le layout sans rien afficher. */
.comm-preview-docx-meter { position: absolute; left: -99999px; top: 0; visibility: hidden; }
.comm-preview-docx-meter p { margin: 0 0 var(--docx-para-after, 0); }
.comm-preview-docx-meter h1 { font-size: 1.45em; font-weight: 600; margin: 0.75em 0 0.25em; }
.comm-preview-docx-meter h2 { font-size: 1.2em; font-weight: 600; margin: 0.65em 0 0.2em; }
.comm-preview-docx-meter h3, .comm-preview-docx-meter h4 { font-size: 1.1em; font-weight: 600; margin: 0.6em 0 0.2em; }
.comm-preview-docx-meter ul, .comm-preview-docx-meter ol { margin: 0 0 var(--docx-para-after, 0); padding-left: 2em; }
.comm-preview-docx-meter li { margin: 0; }
.comm-preview-docx-meter table { border-collapse: collapse; }
.comm-preview-docx-meter th, .comm-preview-docx-meter td { padding: 1px 4px; border: 1px solid #888; }
.comm-preview-docx-meter img { max-width: 100%; height: auto; }
.comm-preview-docx-pagenum { margin-top: 1.6rem; text-align: right; color: var(--text-muted); font-size: 0.78rem; }
.comm-preview-docx-head { margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }
.comm-preview-docx-head img { max-width: 100%; max-height: 120px; height: auto; object-fit: contain; object-position: left; }
.comm-preview-docx h1 { font-size: 1.4rem; margin: 1.1rem 0 0.6rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border); }
.comm-preview-docx h2 { font-size: 1.18rem; margin: 1rem 0 0.5rem; }
.comm-preview-docx h3, .comm-preview-docx h4 { font-size: 1.02rem; margin: 0.9rem 0 0.45rem; }
.comm-preview-docx h1:first-child, .comm-preview-docx h2:first-child { margin-top: 0; }
.comm-preview-docx p { margin: 0 0 0.65rem; }
.comm-preview-docx ul, .comm-preview-docx ol { margin: 0 0 0.65rem; padding-left: 1.5rem; }
.comm-preview-docx li { margin-bottom: 0.25rem; }
.comm-preview-docx img { max-width: 100%; height: auto; }
.comm-preview-docx table { border-collapse: collapse; margin: 0 0 0.9rem; width: 100%; }
.comm-preview-docx th, .comm-preview-docx td { border: 1px solid var(--border); padding: 0.35rem 0.65rem; text-align: left; }
.comm-preview-docx th { background: var(--bg-input); font-weight: 600; }
.comm-preview-docx blockquote { margin: 0 0 0.65rem; padding: 0.2rem 0 0.2rem 0.9rem; border-left: 3px solid var(--border); color: var(--text-secondary); }
.comm-preview-docx hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.comm-preview-docx a { color: var(--text-primary); text-decoration: underline dotted; cursor: default; }

/* Modeles de masques (patterns reutilisables) : panneau ancre sous le bouton. */
.rgpd-tpl-wrap { position: relative; display: inline-block; }
.rgpd-tpl-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: 22rem; max-width: 80vw;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 0.6rem;
}
.rgpd-tpl-list { max-height: 14rem; overflow-y: auto; margin-bottom: 0.6rem; }
.rgpd-tpl-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0; }
.rgpd-tpl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.rgpd-tpl-empty { color: var(--text-muted); font-size: 0.85rem; margin: 0.25rem 0 0.5rem; }
.rgpd-tpl-save { display: flex; gap: 0.4rem; }
.rgpd-tpl-save .form-input { flex: 1; min-width: 0; }

/* Plateforme : toggle "blocage RGPD strict" d'une societe. */
.platform-rgpd-strict-row { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; }

/* Journal des envois IA : footer pagination. */
/* Journal RGPD : barre d'outils (compteur + lignes par page + pagination du haut) au-dessus de
   la table, pagination du bas en-dessous. Plus de card englobante (la .table-wrap suffit). */
.rgpd-journal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.85rem;
}
.rgpd-journal-tools { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.rgpd-journal-count { color: var(--text-muted); font-size: 0.88rem; }
.rgpd-journal-pagesize {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--text-muted); font-size: 0.85rem; white-space: nowrap;
}
.rgpd-journal-pagesize .select-custom { min-width: 4.6rem; }
.rgpd-journal-toolbar .comm-pagination { margin: 0; }
.rgpd-journal-pager { margin: 0.85rem 0 0; }

/* Lisibilite de la liste : zebra douce, date en chiffres tabulaires, cellules un poil resserrees. */
.rgpd-journal .table tbody td { font-size: 0.86rem; }
.rgpd-journal .table tbody td:first-child {
  color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rgpd-journal .table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-secondary) 45%, transparent); }
.rgpd-journal .table tbody tr:hover { background: var(--bg-card-hover); }
@media (max-width: 768px) {
  .rgpd-editor-rename { display: none; }
}

/* Carte document (pas de vignette) : grande icone centree selon le mime. */
.comm-card-doc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2.75rem;
  color: var(--accent);
}
/* Vignette PDF (1ere page rendue par pdf.js) : cadrer sur le haut de page (entete/logo)
   + fond blanc (une page de PDF est blanche, evite un liseré sombre sur les marges). */
.comm-card[data-media-type="document"] .comm-card-thumb img { object-position: top center; background: #fff; }

/* Modale "Ajouter au contexte IA" : cartes de collaborateurs (visage + nom + role) + recherche. */
.doc-ctx-tools { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.75rem; }
.doc-ctx-search { position: relative; flex: 1; min-width: 0; }
.doc-ctx-search > i {
    position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 1rem; pointer-events: none;
}
.doc-ctx-search input {
    width: 100%; padding: 0.55rem 0.75rem 0.55rem 2.1rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 0.9rem;
    transition: var(--transition); outline: none;
}
.doc-ctx-search input:focus {
    border-color: var(--accent-light); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--bg-card);
}
.doc-ctx-selall {
    flex-shrink: 0; border: 0; background: none; cursor: pointer;
    color: var(--accent); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.3rem 0.2rem;
}
.doc-ctx-selall:hover { text-decoration: underline; }

.doc-ctx-scroll { max-height: 44vh; overflow-y: auto; margin: 0 -0.25rem; padding: 0 0.25rem; }
.doc-ctx-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem;
}
.doc-ctx-card {
    display: flex; align-items: center; gap: 0.65rem; text-align: left;
    padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg-card); cursor: pointer; transition: var(--transition); position: relative;
}
.doc-ctx-card:hover { border-color: var(--accent-light); background: var(--bg-card-hover); }
.doc-ctx-card.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.doc-ctx-card.is-hidden { display: none; }
.doc-ctx-face {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    background: var(--bg-input); display: inline-flex; align-items: center; justify-content: center;
}
.doc-ctx-face img { width: 100%; height: 100%; object-fit: cover; }
.doc-ctx-info { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.doc-ctx-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-ctx-role { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-ctx-check {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center;
    color: transparent; font-size: 0.8rem; transition: var(--transition);
}
.doc-ctx-card.is-selected .doc-ctx-check { background: var(--accent); border-color: var(--accent); color: #fff; }

.doc-ctx-sep {
    display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.55rem;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
}
.doc-ctx-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.doc-ctx-sep.is-hidden, .doc-ctx-grid.is-hidden { display: none; }
.doc-ctx-empty { text-align: center; color: var(--text-muted); font-size: 0.9rem; padding: 1.5rem 0; }
.doc-ctx-empty.is-hidden { display: none; }
.doc-ctx-count { margin-right: auto; color: var(--text-muted); font-size: 0.85rem; }

/* Status badges (planning + cards). */
.badge-status-draft       { background: var(--bg-input); color: var(--text-muted); }
.badge-status-generating  { background: var(--accent-soft); color: var(--accent); }
.badge-status-completed   { background: var(--success-soft); color: var(--success); }
.badge-status-failed      { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.badge-status-pending     { background: var(--bg-input); color: var(--text-muted); }
.badge-status-generating_text  { background: var(--accent-soft); color: var(--accent); }
.badge-status-generating_media { background: var(--accent-soft); color: var(--accent); }

/* Recherche de la mediatheque / workspace documents (champ + icone). */
.comm-search {
  position: relative;
  flex: 1 1 220px;
  max-width: 340px;
}
.comm-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.95rem;
  pointer-events: none;
}
.comm-search-input {
  width: 100%;
  padding-left: 2.05rem;
}
/* Hashtags d'un post (detail calendrier). */
.comm-post-hashtags { margin: 0; font-size: 0.8rem; color: var(--accent); }

/* Modal preview (image / video plein ecran). */
.modal-xl { max-width: 1100px; width: 95%; }
/* Le menu "..." du header doit pouvoir se derouler SOUS la modale quand le contenu est
   court (petite grille tableur) : on leve le clip de la boite modale UNIQUEMENT ici, le
   contenu reste clippe par .comm-preview-body. */
#commPreviewModal .modal { overflow: visible; }
.comm-preview-body { display: flex; align-items: center; justify-content: center; max-height: 80vh; overflow: hidden; }
.comm-preview-media { max-width: 100%; max-height: 75vh; object-fit: contain; }
.comm-preview-body:has(.comm-preview-doc) { flex-direction: column; }
.comm-preview-doc { width: 80vw; max-width: 900px; height: 72vh; border: none; border-radius: var(--radius); background: var(--bg-primary); }
.comm-preview-doc-bar { width: 100%; display: flex; justify-content: flex-end; padding-top: 0.5rem; }
.comm-preview-doc-fallback { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.5rem; text-align: center; color: var(--text-muted); }
.comm-preview-doc-fallback > i { font-size: 3rem; color: var(--text-primary); }

/* Loader + apercu texte de la modale universelle du run viewer (soclai-run-viewer.js). */
/* Telecharger vit dans l'en-tete de la modale (la carte de livrable n'a qu'un bouton Ouvrir). */
.arun-preview-modal .arun-preview-dl { margin-left: auto; margin-right: 12px; }
.arun-preview-loading > i { display: none; }
.arun-spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--border); border-top-color: var(--accent);
  animation: arun-spin 0.7s linear infinite;
}
@keyframes arun-spin { to { transform: rotate(360deg); } }
.arun-preview-text {
  width: 100%; max-width: 900px; margin: 0; padding: 1.4rem 1.6rem;
  white-space: pre-wrap; word-break: break-word; overflow: auto; max-height: 76vh;
  font: 0.82rem/1.6 var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  color: var(--text-primary); background: var(--bg-card); border-radius: var(--radius);
}

/* Modale "Envoyer par email" d'un livrable (soclai-run-viewer.js) : globale comme l'apercu,
   la visionneuse est rendue sur plusieurs pages. */
.arun-mail-modal .modal { max-width: 560px; width: 95%; overflow: visible; }
.arun-mail-body { display: flex; flex-direction: column; gap: 0.85rem; }
.arun-mail-center { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 2rem 1rem; text-align: center; color: var(--text-muted); }
.arun-mail-center h4 { margin: 0; color: var(--text-primary); }
.arun-mail-center p { margin: 0; max-width: 380px; }
.arun-mail-empty-ic { font-size: 2.6rem; color: var(--accent); }
.arun-mail-done i { font-size: 2.6rem; color: var(--success); }
.arun-mail-done p { color: var(--text-primary); font-weight: 500; }
.arun-mail-doc {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.8rem;
  background: var(--bg-input); border-radius: var(--radius);
  font-size: 0.85rem; font-weight: 500; color: var(--text-primary);
  min-width: 0;
}
.arun-mail-doc i { font-size: 1.15rem; color: var(--accent); flex-shrink: 0; }
.arun-mail-doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arun-mail-row, .arun-mail-field { display: flex; flex-direction: column; gap: 0.3rem; }
.arun-mail-row label, .arun-mail-field label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.arun-mail-field { position: relative; }
.arun-mail-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.55rem; min-height: 42px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-input); cursor: text;
  transition: var(--transition);
}
.arun-mail-field.is-invalid .arun-mail-chips { border-color: var(--danger); }
.arun-mail-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem 0.3rem 0.2rem 0.6rem;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; font-size: 0.8rem; font-weight: 500;
  max-width: 100%;
}
.arun-mail-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arun-mail-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: none; border-radius: 50%;
  background: none; color: inherit; cursor: pointer; font-size: 0.85rem;
}
.arun-mail-chip-x:hover { background: rgba(0, 0, 0, 0.08); }
.arun-mail-chip-input {
  flex: 1; min-width: 140px; border: none; background: none; outline: none;
  font: inherit; font-size: 0.85rem; color: var(--text-primary); padding: 0.2rem 0;
}
.arun-mail-sugg {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  overflow: hidden; max-height: 220px; overflow-y: auto;
}
.arun-mail-sugg.is-hidden { display: none; }
.arun-mail-sugg-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 0.45rem 0.75rem; border: none; background: none;
  font: inherit; text-align: left; cursor: pointer;
}
.arun-mail-sugg-item:hover { background: var(--accent-soft); }
.arun-mail-sugg-name { font-size: 0.84rem; font-weight: 500; color: var(--text-primary); }
.arun-mail-sugg-mail { font-size: 0.76rem; color: var(--text-muted); }
.arun-mail-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.arun-mail-quick .is-hidden, .arun-mail-cc-wrap.is-hidden { display: none; }
.arun-mail-subject, .arun-mail-message {
  width: 100%; padding: 0.55rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-input); font: inherit; font-size: 0.85rem; color: var(--text-primary);
  transition: var(--transition);
}
.arun-mail-message { min-height: 90px; }
/* Focus accent, aligne sur .form-input : la bordure passe en accent avec le halo doux. Le conteneur
   de chips (A / Cc) reagit en focus-within (l'input reel est dedans). */
.arun-mail-subject:focus, .arun-mail-message:focus,
.arun-mail-field .arun-mail-chips:focus-within {
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg-card);
  outline: none;
}
/* La poignee de resize colle au bas du textarea du message (pas d'ecart disgracieux). */
.arun-mail-row .soclai-grip { margin-top: -0.15rem; }
.arun-mail-err { font-size: 0.82rem; color: var(--danger); }
.arun-mail-err.is-hidden { display: none; }
.arun-mail-foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.2rem; }
.arun-mail-foot .arun-mail-send .arun-spin { width: 14px; height: 14px; border-width: 2px; }

/* ============================================
   Mediatheque : pills, pagination, multi-select.
   ============================================ */
.comm-pill {
  background: var(--bg-input);
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--transition);
}
.comm-pill:hover { background: var(--bg-card-hover); }
.comm-pill.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.comm-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Pagination : centered, arrows + numbers + ellipsis. */
.comm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.75rem 0;
}
.comm-pagination-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.4rem 0.65rem;
  min-width: 2rem;
  border-radius: var(--radius);
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition);
}
.comm-pagination-btn:hover:not(:disabled):not(.is-active) {
  background: var(--bg-card-hover);
}
.comm-pagination-btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  cursor: default;
}
.comm-pagination-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.comm-pagination-ellipsis {
  color: var(--text-muted);
  padding: 0 0.25rem;
}
/* Item masque par la pagination cliente (decoupage d'une liste SSR par SoclaiPagination.clientList). */
.is-paged-out { display: none !important; }

/* Multi-select mode : checkbox overlay sur chaque card. */
.comm-card-checkbox {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  z-index: 2;
}
.comm-grid.is-select-mode .comm-card-checkbox { display: flex; }
.comm-grid.is-select-mode .comm-card { cursor: pointer; }
.comm-card.is-selected { outline: 2px solid var(--accent); }
.comm-card.is-selected .comm-card-checkbox {
  background: var(--accent);
  border-color: var(--accent);
}

/* Mode selection etendu aux DOSSIERS (la classe is-select-mode est posee sur
   .docs-workspace en plus de la grille - les dossiers vivent hors de la grille). */
.docs-workspace.is-select-mode .docs-folder[data-folder-id] { cursor: pointer; }
.docs-workspace.is-select-mode .docs-folder[data-folder-id] .comm-card-checkbox { display: flex; }
/* Checkbox a GAUCHE sur les dossiers (le kebab occupe deja le coin droit). */
.docs-folder .comm-card-checkbox { left: 0.5rem; right: auto; }
.docs-folder.is-selected { outline: 2px solid var(--accent); }
.docs-folder.is-selected .comm-card-checkbox { background: var(--accent); border-color: var(--accent); }

/* Barre d'actions du mode selection : sous les filtres, actions par lot regroupees. */
.docs-selectbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.9rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius);
}
.docs-selectbar.is-hidden { display: none; }
.docs-selectbar-count { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
.docs-selectbar-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
#commMediaSelectToggle.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

@media (max-width: 768px) {
  .comm-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  /* Mediatheque mobile : recherche pleine largeur. */
  .comm-search { flex-basis: 100%; max-width: none; }
}

/* Onglets soulignes (tablette + mobile) : une seule ligne qui defile. flex: 1 0 auto =
   les onglets s'etirent a largeurs egales quand ca tient, sinon gardent leur largeur de
   contenu et la barre scrolle (fini les libelles compresses qui se chevauchent et le
   wrap a 2 lignes avec double hairline). */
@media (max-width: 900px) {
  .tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 1 0 auto; justify-content: center; padding: 0.5rem 0.3rem; font-size: 0.85rem; }
}

/* ============================================
   Settings (cles API chiffrees).
   ============================================ */

/* Identite entreprise : logo a gauche, champs a droite (meme equilibre que /profile). */
.settings-identity { display: flex; gap: 1.75rem; align-items: flex-start; }
.settings-identity .company-logo-edit { margin-bottom: 0; flex-shrink: 0; }
.settings-identity-fields { flex: 1; min-width: 0; }
@media (max-width: 700px) { .settings-identity { flex-direction: column; gap: 1rem; } }

/* Logo entreprise : meme langage visuel que l'avatar /profile (vignette cliquable, badge
   camera en coin via .profile-avatar-camera, bouton supprimer a cote). .logo-dropzone reste
   le hook du drag&drop (cf settings.js) ; le badge deborde donc pas d'overflow sur le label. */
.company-logo-edit { margin-bottom: 1.5rem; }
.logo-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  cursor: pointer;
  flex-shrink: 0;
}
.logo-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-input);
  overflow: hidden;
  transition: var(--transition);
}
.logo-canvas img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.logo-canvas > i { font-size: 2.4rem; color: var(--text-muted); }
.logo-dropzone:hover .logo-canvas { border-color: var(--accent); filter: brightness(0.97); }
.logo-dropzone.is-dragging .logo-canvas { border-color: var(--accent); border-style: dashed; background: var(--accent-soft); }

/* Profil business (onglet Entreprise) : section sous un filet + autofill via site web. */
.settings-divider { height: 1px; background: var(--border); margin: 1.75rem 0 1.25rem; }
.biz-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.biz-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.biz-head .btn { flex-shrink: 0; }
/* Modale autofill : loader centre + lignes de preview a cocher. */
.bizfill-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.25rem 1rem;
  color: var(--text-muted);
  text-align: center;
}
.bizfill-loading i { font-size: 2rem; animation: comm-spin 1.4s linear infinite; }
.bizfill-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8rem 0.25rem;
  border-bottom: 1px solid var(--border);
}
.bizfill-row:last-child { border-bottom: 0; }
.bizfill-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.bizfill-row-body { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 0; }
.bizfill-row-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
}
/* Modale du raccourci "Site web" : ce que fait le bouton, puis le bilan. */
.sitesetup-what {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.86rem;
  color: var(--text-secondary);
}
.sitesetup-what li { display: flex; align-items: center; gap: 0.5rem; }
.sitesetup-what i { color: var(--accent); font-size: 1.05rem; }
.sitesetup-done-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}
.sitesetup-done-head i { color: var(--success); font-size: 1.35rem; }
.sitesetup-results { display: flex; flex-direction: column; }
.sitesetup-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0.25rem;
  border-top: 1px solid var(--border);
}
.sitesetup-row > i { font-size: 1.15rem; color: var(--accent); margin-top: 0.05rem; }
.sitesetup-row-main { font-size: 0.9rem; color: var(--text-primary); }
.sitesetup-row-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }

.api-keys-wrap { display: flex; flex-direction: column; gap: 1.5rem; }

.api-key-row {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 0.9fr);
  gap: 1.25rem;
  align-items: start;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.api-key-row:first-of-type { border-top: 0; padding-top: 0; }
.api-key-info .form-help { margin: 0.2rem 0 0.5rem; }
.api-key-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  margin: 0;
}
.api-key-status-set    { color: var(--success); }
.api-key-status-unset  { color: var(--text-muted); }
.api-key-status-broken { color: var(--danger); font-weight: 500; }
.api-key-input {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.api-key-input .form-input { flex: 1; min-width: 0; }

@media (max-width: 768px) {
  .api-key-row { grid-template-columns: 1fr; }
}

/*  Sidebar logout button (override defaults)  */
.nav-item-logout {
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

/*  Admin users : badge "vous" (accent doux pour se distinguer de badge-user) */
.badge-self {
  margin-left: 0.4rem;
  background: var(--accent-soft);
  color: var(--accent);
}

/*  Admin users : "delete" action button override  */
.btn-action-delete { color: var(--danger); }

/*  Cell : valeur absente / non applicable  */
.cell-empty { color: var(--text-muted); }

/*  Table empty row (no data)  */
.table-empty-row {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

/*  Utility : masque un element. Utilise par soclaiAlert et par les composants au markup initial cache.
  Permet de retirer 'unsafe-inline' de la CSP style-src (pas de style="display:none"). */
.is-hidden { display: none !important; }

/* ============================================
   Assistant IA (chat) : bulle + panneau + mascotte + curseur magique.
   Tokens uniquement, classes kebab-case. Aucun style inline (CSP).
   ============================================ */

/* Bulle flottante (etat ferme) = avatar rond de la mascotte, fixe en bas a droite.
   Sous le panneau z200 et l'overlay curseur z9000. */
.soclai-ai-bubble {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  overflow: hidden;          /* clippe l'avatar dans le cercle */
  display: block;
  z-index: 10000;            /* au-dessus des modals (overlay 9999) */
}
.soclai-ai-bubble img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* avatar non deforme, visible en entier */
  object-position: center;
  display: block;
  pointer-events: none;
  user-select: none;
  /* Fondu en bas (meme style que la mascotte du chat) : integration douce dans le fond. */
  mask-image: linear-gradient(to bottom, black 60%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 97%);
}
.soclai-ai-bubble.is-hidden { display: none; }
/* Modale ouverte : la bulle passe SOUS le voile (z 9999) -> plus de chevauchement avec
   les boutons de la modale (surtout mobile). La FENETRE de chat, elle, reste au-dessus. */
body:has(.modal-overlay.open) .soclai-ai-bubble,
body:has(.arun-modal:not(.is-hidden)) .soclai-ai-bubble { z-index: 9998; }

/* Primitives .arun-* du panneau Reglages du collaborateur. ICI et pas dans soclai-cockpit.css :
   cette feuille-la n'est chargee que sur /dashboard et /assistant-run, alors que le panneau
   est rendu sur /recrutement aussi. Une classe qui n'existerait que la-bas se retrouve SANS
   AUCUN style sur /recrutement, en silence (champs bruts du navigateur, modale en flux dans
   la page). Verrouille par le test "Reglages /recrutement" de tools/test.php. */

/* Champs tintes comme le reste du site (.form-input de /profile) : fond/bordure de champ,
   hover plus marque, focus avec halo accent. */
.arun-input {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: var(--transition);
  resize: vertical;
}
.arun-input:hover:not(:focus) { border-color: var(--field-border-hover); background: var(--field-bg-hover); }
.arun-input:focus { border-color: var(--accent-light); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--bg-card); }
.arun-input::placeholder { color: var(--text-muted); }

.arun-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
/* Garde la fermeture independante de l'ordre de cascade avec .arun-modal { display: flex }. */
.arun-modal.is-hidden { display: none; }
.arun-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.arun-modal-card {
  position: relative; z-index: 1; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 22px;
}
.arun-modal-x { position: absolute; top: 12px; right: 12px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 1.2rem; }

/* Mini bulle de dialogue au survol de la bulle Léon : le texte s'ecrit en direct
   (typewriter JS, cf. SoclaiBubbleHint). Apparition/sortie douces via .is-on. */
.soclai-ai-hint {
  position: fixed;
  right: 2.4rem;
  bottom: calc(2rem + 128px + 12px);   /* juste au-dessus de la bulle (128px) */
  max-width: 250px;
  min-width: 60px;
  min-height: 1.3em;
  padding: 0.6rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-bottom-right-radius: 4px;     /* queue vers la mascotte */
  box-shadow: 0 10px 30px rgba(20, 20, 40, 0.12);
  color: var(--text-primary);
  font-size: 0.86rem;
  line-height: 1.45;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: 100% 100%;
  transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.soclai-ai-hint.is-on { opacity: 1; transform: translateY(0) scale(1); }

/* Ecrans reduits : la bulle retrecit pour ne plus recouvrir le contenu (boutons,
   formulaires). Le hint suit (bottom base sur la taille de la bulle). */
@media (max-width: 1024px) {
  .soclai-ai-bubble { width: 96px; height: 96px; }
  .soclai-ai-hint   { bottom: calc(2rem + 96px + 12px); }
}
@media (max-width: 768px) {
  .soclai-ai-bubble { width: 64px; height: 64px; bottom: 1rem; right: 1rem; }
  .soclai-ai-hint   { right: 1.2rem; bottom: calc(1rem + 64px + 12px); }
}

/* Bulle deplacable : cote memorise (localStorage soclai_ai_bubble_side), applique par la
   classe body.soclai-bubble-left. Offsets gauche symetriques au cote droit -> snap propre.
   touch-action:none pour glisser au doigt sans scroller la page. Le hint suit et sa queue
   se retourne vers le bas-gauche. Aucun style inline (CSP) : tout passe par cette classe. */
.soclai-ai-bubble { touch-action: none; }
body.soclai-bubble-left .soclai-ai-bubble { left: 2rem; right: auto; }
body.soclai-bubble-left .soclai-ai-hint {
  left: 2.4rem; right: auto;
  border-bottom-left-radius: 4px; border-bottom-right-radius: 14px;
  transform-origin: 0% 100%;
}
@media (max-width: 768px) {
  body.soclai-bubble-left .soclai-ai-bubble { left: 1rem; }
  body.soclai-bubble-left .soclai-ai-hint   { left: 1.2rem; }
}

/* Petit chat flottant : deplacable (drag mascotte/header), hauteur = fit-content plafonnee
   a 80vh (la zone messages scrolle au-dela). Ancree top:0/left:0, la POSITION est pilotee
   par Web Animations API dans soclai-ai.js (transform seul), JAMAIS via el.style (CSP).
   overflow:visible pour laisser deborder la mascotte au-dessus du header. */
.soclai-ai-window {
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: 50% 100%;   /* le scale d'ouverture/fermeture s'ancre vers le bas */
  width: min(700px, calc(100vw - 16px));   /* fluide : meme calcul que defaultGeo() en JS */
  height: auto;
  max-height: 80vh;
  background: color-mix(in srgb, var(--bg-card) 66%, transparent);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid color-mix(in srgb, white 55%, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(20, 20, 40, 0.16), 0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  z-index: 10000;            /* au-dessus des modals (overlay 9999) */
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.soclai-ai-window.is-hidden { display: none; }
/* Repli temporaire : un panneau du chat (Historique, Memoire) est ouvert et la fenetre lui
   passerait devant. Elle s'efface sans etre fermee - taille, brouillon et conversation intacts,
   rien n'est persiste (cf. syncPanelFold dans soclai-ai.js). */
.soclai-ai-window.is-folded { display: none; }
/* Une fois redimensionnee par l'utilisateur (.is-sized), width/height sont explicites
   (WAAPI) : on libere le plafond fit-content. */
.soclai-ai-window.is-sized { max-height: none; }

/* Bords de redimensionnement (8 directions). */
.soclai-ai-edge { position: absolute; z-index: 5; }
.soclai-ai-edge-n  { top: -4px; left: 10px; right: 10px; height: 8px; cursor: n-resize; }
.soclai-ai-edge-s  { bottom: -4px; left: 10px; right: 10px; height: 8px; cursor: s-resize; }
.soclai-ai-edge-e  { top: 10px; bottom: 10px; right: -4px; width: 8px; cursor: e-resize; }
.soclai-ai-edge-w  { top: 10px; bottom: 10px; left: -4px; width: 8px; cursor: w-resize; }
.soclai-ai-edge-ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; }
.soclai-ai-edge-nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; }
.soclai-ai-edge-se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
.soclai-ai-edge-sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }

/* Header minimal = zone de drag (en plus de la mascotte). Pas de bordure : look "volant". */
.soclai-ai-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  flex-shrink: 0;
  padding: 0 0.5rem;
  background: transparent;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  cursor: grab;
  user-select: none;
}
.soclai-ai-header:active { cursor: grabbing; }
/* Poignee de glissement : petit bandeau centre en haut du header (affordance "je me deplace",
   facon feuille mobile). Decoratif ; toute la zone du header reste le vrai handle de drag. */
.soclai-ai-grip {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--text-muted);
  opacity: 0.35;
  transition: opacity 0.15s, width 0.15s;
  pointer-events: none;
}
.soclai-ai-header:hover .soclai-ai-grip { opacity: 0.7; width: 46px; }
/* Identite de l'agent (nom + role) : rebrandee par soclai-ai.js selon la conversation. */
.soclai-ai-identity { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; padding-left: 0.4rem; }
/* Agent specialise actif : point dans la couleur du service devant le nom. */
.soclai-ai-identity.is-agent::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--agent-accent); align-self: center; flex-shrink: 0;
}
.soclai-ai-name { font-weight: 600; font-size: 0.92rem; color: var(--text-primary); white-space: nowrap; }
.soclai-ai-role {
  font-size: 0.74rem; font-weight: 500; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.soclai-ai-header-actions { display: flex; gap: 0.1rem; flex-shrink: 0; margin-left: auto; }
.soclai-ai-hbtn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: var(--transition);
}
.soclai-ai-hbtn:hover { background: var(--bg-card-hover); color: var(--accent); }
.soclai-ai-hbtn.is-on { color: var(--accent); }   /* voix de Léon active */

/* Popover volume de la voix (survol du bouton haut-parleur) : slider horizontal 0-100,
   position fixed posee par le JS, au-dessus de la fenetre du chat (z-index 10000).
   Le label % a une largeur RESERVEE (4ch + chiffres tabulaires) : la taille du popover
   ne bouge jamais pendant le drag, quel que soit le nombre affiche. */
.soclai-ai-volpop {
  position: fixed;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.soclai-ai-volpop.is-hidden { display: none; }
.soclai-ai-volpop-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.soclai-ai-volrange {
  width: 110px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Label "travaille..." + spinner : visibles uniquement en mode is-working. */
.soclai-ai-working { display: none; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 500; color: var(--accent); white-space: nowrap; flex: 1; }
.soclai-ai-spinner { width: 14px; height: 14px; border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: soclai-ai-spin 0.8s linear infinite; flex-shrink: 0; }
@keyframes soclai-ai-spin { to { transform: rotate(360deg); } }

/* Chat vide (aucun message) ET non redimensionne : on masque la zone messages -> la
   fenetre se reduit a header + composer (fit-content), pas d'espace vide. Si l'utilisateur
   a redimensionne (.is-sized), on garde sa taille et on affiche la zone messages. */
.soclai-ai-window.is-empty:not(.is-sized) .soclai-ai-messages { display: none; }

/* Mode "travaille" : la fenetre file en haut a droite (WAAPI) et se compacte (largeur
   reduite, corps masque -> hauteur = header seul via fit-content). */
.soclai-ai-window.is-working { width: 240px; max-height: none; }
.soclai-ai-window.is-working .soclai-ai-messages,
.soclai-ai-window.is-working .soclai-ai-input,
.soclai-ai-window.is-working .soclai-ai-edge,
.soclai-ai-window.is-working .soclai-ai-identity,
.soclai-ai-window.is-working .soclai-ai-header-actions { display: none; }
.soclai-ai-window.is-working .soclai-ai-working { display: flex; }
.soclai-ai-window.is-working .soclai-ai-header { cursor: default; }
.soclai-ai-window.is-working .soclai-ai-grip { display: none; }

/* Stop (carre) : visible uniquement en mode "travaille", annule le curseur magique. */
.soclai-ai-stop { display: none; flex-shrink: 0; }
.soclai-ai-window.is-working .soclai-ai-stop { display: flex; }
.soclai-ai-stop:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* Mascotte : grande image en FOND du chat (filigrane discret, derriere les messages).
   Decorative uniquement (pointer-events:none, le drag reste sur le header) ; son src
   reste swappe par etat (idle / working / thumbsup) par soclai-ai.js -> le fond s'anime. */
.soclai-ai-mascot {
  position: absolute;
  left: 0;
  top: 0;
  height: 58%;
  max-height: 330px;
  width: auto;
  max-width: 70%;            /* fenetre etroite : l'image retrecit au lieu de deborder */
  object-fit: contain;       /* jamais de stretch, ratio toujours conserve */
  object-position: left top;
  opacity: 0.23;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  /* Fondu en bas : pas de coupure nette du gif, integration douce dans le fond. */
  mask-image: linear-gradient(to bottom, black 60%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 97%);
}
/* Le contenu du chat passe au-dessus du filigrane. */
.soclai-ai-header,
.soclai-ai-messages,
.soclai-ai-input { position: relative; z-index: 1; }
/* Mode "travaille" : la mascotte (gif typing) reste visible, petite, posee au-dessus de
   la barre compacte - on voit l'agent bosser pendant que le curseur agit sur la page. */
.soclai-ai-window.is-working .soclai-ai-mascot {
  height: 54px;
  max-height: none;
  max-width: none;
  top: -48px;
  left: 12px;
  opacity: 1;
  mask-image: none;
  -webkit-mask-image: none;
}

/* Pas de selection de texte pendant le drag / resize. */
body.soclai-ai-dragging, body.soclai-ai-dragging * { user-select: none !important; cursor: grabbing !important; }
body.soclai-ai-resizing, body.soclai-ai-resizing * { user-select: none !important; }

/* Chat fullscreen ouvert sur mobile : le document derriere est fige (classe posee par
   soclai-ai.js, cf. syncScrollLock) -> aucun scroll residuel, barre d'URL Chrome stable. */
html.soclai-ai-locked, html.soclai-ai-locked body { overflow: hidden; overscroll-behavior: none; }

/* Mobile : plein ecran (le JS annule la geometrie WAAPI sous 640px, le CSS reprend). */
@media (max-width: 640px) {
  .soclai-ai-window:not(.is-hidden) {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
  }
  .soclai-ai-window.is-empty:not(.is-sized) .soclai-ai-messages { display: flex; }
  .soclai-ai-window .soclai-ai-edge { display: none; }
  .soclai-ai-header { cursor: default; }
  .soclai-ai-grip { display: none; }
  /* Mode "travaille" : le fullscreen se replie en pilule en haut a droite (comme desktop),
     la page redevient visible pendant que le curseur agit. top: 58px laisse la place a la
     mascotte qui deborde au-dessus (top: -48px, cf. regle globale is-working). */
  .soclai-ai-window.is-working {
    top: 58px;
    left: auto;
    right: 10px;
    width: 240px;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, white 55%, var(--border));
  }
}

/* Fil de messages. flex:1 1 auto + min-height:0 : prend la hauteur du contenu et scrolle
   quand la fenetre atteint son max (80vh). Masque entierement quand .is-empty (cf plus haut). */
.soclai-ai-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* en butee, ne tire pas la page derriere (stretch Android) */
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: 'Sora', sans-serif;   /* police dediee du chat IA */
}
/* Ancre les messages en bas quand la fenetre a de la place libre (fenetre redimensionnee
   plus grande que le contenu) sans casser le scroll en cas de debordement. */
.soclai-ai-messages > :first-child { margin-top: auto; }
.soclai-ai-msg {
  max-width: 88%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.84rem;
  line-height: 1.6;
  word-break: break-word;
}
/* Bulle user : couleur de l'agent en conversation (agent-tint--<slug> sur la zone messages). */
.soclai-ai-msg--user { position: relative; align-self: flex-end; background: var(--agent-accent, var(--accent)); color: #fff; border-bottom-right-radius: 4px; }

/* Crayon d'edition de la bulle user : en bas a droite, sous la bulle, visible au survol
   (le conteneur n'a pas de marge a droite -> a droite-exterieur il serait rogne).
   Editer tronque le fil a partir du message et le remet dans le composer. */
.soclai-ai-msg-edit {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 3px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--bg-card-hover);
  color: var(--text-muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: var(--transition);
}
.soclai-ai-msg--user:hover .soclai-ai-msg-edit { opacity: 1; }
.soclai-ai-msg-edit:hover { color: var(--accent); background: var(--accent-soft); }
.soclai-ai-msg--assistant { align-self: flex-start; background: var(--bg-input); color: var(--text-primary); border-bottom-left-radius: 4px; }
/* Bouton d'appel a l'action sous une reponse (ex: aller au planning creer le post). */
.soclai-ai-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.9rem;
  border: none; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font: inherit; font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.soclai-ai-cta:hover { background: var(--accent-hover); }
.soclai-ai-cta i { font-size: 1rem; }

/* Voile de transition de handoff : recouvre l'ecran en fondu pour relier visuellement la page
   de depart et la page d'arrivee. Le fond est l'IMAGE de l'agent (--agent-bg, posee par la
   classe agent-tint--<slug>) sous un leger voile sombre pour la lisibilite du libelle.
   Pose/retire par soclai-ai.js. */
.soclai-handoff-veil {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background-color: #15101f;   /* repli sombre si l'image de l'agent manque / charge encore */
  background-image: linear-gradient(rgba(12, 9, 22, 0.42), rgba(12, 9, 22, 0.52)), var(--agent-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}
.soclai-handoff-veil.is-on { opacity: 1; }
.soclai-handoff-inner {
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.soclai-handoff-veil.is-on .soclai-handoff-inner { transform: scale(1); }
.soclai-handoff-label {
  color: #fff; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

/* Arrivee via handoff : voile plein ecran pose des le <head> (handoff-incoming.js) pour eviter
   le flash blanc du chargement, avant que le voile JS (avec label) ne prenne le relais. Memes
   visuels que .soclai-handoff-veil. --agent-bg vient de agent-tint--<slug> pose sur <html>. */
html.soclai-handoff-incoming body::before {
  content: '';
  position: fixed; inset: 0; z-index: 3999;
  background-color: #15101f;
  background-image: linear-gradient(rgba(12, 9, 22, 0.42), rgba(12, 9, 22, 0.52)), var(--agent-bg, none);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.soclai-ai-msg--error {
  align-self: center;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger-hover);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
.soclai-ai-msg-content code { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 4px; padding: 0 0.25rem; font-size: 0.82em; }

/* Markdown rendu dans les reponses assistant (effets texte, listes, tableaux, liens/boutons). */
.soclai-ai-msg-content > :first-child { margin-top: 0; }
.soclai-ai-msg-content > :last-child { margin-bottom: 0; }
.soclai-ai-msg-content p { margin: 0 0 0.5rem; }
.soclai-ai-msg-content strong { font-weight: 600; }
.soclai-ai-msg-content h4, .soclai-ai-msg-content h5, .soclai-ai-msg-content h6 { font-weight: 600; font-size: 0.92rem; margin: 0.5rem 0 0.25rem; }
.soclai-ai-msg-content ul, .soclai-ai-msg-content ol { margin: 0.25rem 0; padding-left: 1.2rem; }
.soclai-ai-msg-content li { margin-bottom: 0.15rem; }
.soclai-ai-msg-content pre { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.65rem; overflow-x: auto; margin: 0.4rem 0; }
.soclai-ai-msg-content pre code { background: none; border: none; padding: 0; font-size: 0.8rem; }
.soclai-ai-msg-content blockquote { margin: 0.4rem 0; padding: 0.1rem 0.7rem; border-left: 3px solid var(--border); color: var(--text-secondary); }
.soclai-ai-msg-content hr { border: none; border-top: 1px solid var(--border); margin: 0.6rem 0; }
.soclai-ai-table { width: 100%; border-collapse: collapse; margin: 0.4rem 0; font-size: 0.8rem; }
.soclai-ai-table th, .soclai-ai-table td { border: 1px solid var(--border); padding: 0.3rem 0.5rem; text-align: left; }
.soclai-ai-table th { background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; }
.soclai-ai-link { color: var(--accent); text-decoration: underline; }
.soclai-ai-link:hover { color: var(--accent-hover); }
.soclai-ai-link--btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 500;
  margin: 0.1rem 0;
}
.soclai-ai-link--btn:hover { background: var(--accent-hover); color: #fff; }

/* Indicateur de saisie : fausse barre de progression (largeur animee en WAAPI) + label rotatif. */
.soclai-ai-typing {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  align-self: flex-start;
  width: 80%;
  max-width: 360px;
  padding: 0.5rem 0.1rem 0.2rem;
  animation: soclai-ai-typing-in 0.22s ease-out;
}
/* Mascotte "travaille" animee pendant l'attente de la reponse. */
.soclai-ai-typing-mascot {
  height: 56px;
  width: auto;
  flex-shrink: 0;
  user-select: none;
}
.soclai-ai-typing-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}
.soclai-ai-typing.is-fading-out { animation: soclai-ai-typing-out 0.26s ease-in forwards; }
.soclai-ai-typing-track {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}
.soclai-ai-typing-fill {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: 999px;
  /* Couleur de l'agent en conversation (agent-tint--<slug> pose --agent-accent), sinon violet. */
  background: linear-gradient(90deg, var(--agent-accent, var(--accent)),
    color-mix(in srgb, var(--agent-accent, var(--accent)) 55%, white), var(--agent-accent, var(--accent)));
  position: relative;
  overflow: hidden;
}
.soclai-ai-typing-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: soclai-ai-typing-shimmer 1.6s linear infinite;
}
.soclai-ai-typing-label {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.2;
  min-height: 0.95rem;
  transition: opacity 0.16s;
}
.soclai-ai-typing-label.is-fading { opacity: 0; }
@keyframes soclai-ai-typing-shimmer { from { left: -60%; } to { left: 100%; } }
@keyframes soclai-ai-typing-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes soclai-ai-typing-out { from { opacity: 1; } to { opacity: 0; } }

/* Zone de saisie facon "composer" accueil : carte glass, texte au-dessus, barre
   d'actions en dessous (trombone a gauche, micro + envoi a droite). */
.soclai-ai-input {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.2rem 0.7rem 0.7rem;
  padding: 0.6rem 0.75rem 0.5rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-card) 72%, transparent);
  border: 1px solid color-mix(in srgb, white 50%, var(--border));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.soclai-ai-textarea {
  width: 100%;
  resize: none;
  min-height: 24px;
  max-height: 60vh;
  overflow-y: auto;
  border: none;
  background: transparent;
  padding: 0.15rem 0.1rem;
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.45;
  color: var(--text-primary);
}
.soclai-ai-textarea:focus { outline: none; }
.soclai-ai-textarea::placeholder { color: var(--text-muted); }
.soclai-ai-input-actions { display: flex; align-items: center; gap: 0.25rem; }
.soclai-ai-input-spacer { flex: 1; }
/* Poignee de redimensionnement d'un textarea (generique, cf. soclai-grip.js) : on l'attrape
   et on tire pour agrandir/reduire la zone. Hauteur posee en WAAPI cote JS (CSP : jamais
   el.style), bornee entre le min-height du champ et 60vh. .soclai-ai-input-grip n'ajoute que
   le positionnement propre au composer du chat. */
.soclai-grip {
  align-self: stretch;
  height: 18px;                 /* zone d'attrape : 11px etait trop fin, on ratait la poignee */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  flex-shrink: 0;
  touch-action: none;
}
.soclai-grip::before {
  content: '';
  width: 36px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 55%, transparent);
  transition: background 0.15s, width 0.15s;
}
.soclai-grip:hover::before { background: color-mix(in srgb, var(--text-muted) 90%, transparent); width: 48px; }
body.soclai-grip-resizing .soclai-grip::before,
.soclai-grip:active::before { background: var(--accent); }
/* Pendant le drag, une iframe sous le curseur AVALERAIT les mousemove (ils ne remontent
   jamais au document parent) et le resize s'arreterait net : on la gele le temps du geste. */
body.soclai-grip-resizing iframe { pointer-events: none; }
.soclai-ai-input-grip { margin: -0.35rem -0.2rem 0; }
.cal-edit-grip { margin: 0.15rem 0 0.4rem; }
#calEditCaption { resize: none; }

/* Tooltip custom global (cf. app.js initTooltip) : infobulle stylee reutilisee partout,
   alimentee par data-tooltip ou le title natif. Position posee en WAAPI (top/left fixed). */
.soclai-tooltip {
  position: fixed;
  top: 0; left: 0;
  z-index: 10000;
  max-width: 260px;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--bg-card);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  box-shadow: 0 6px 22px rgba(20, 20, 40, 0.22);
}
.soclai-tooltip.is-below { transform: translateY(-3px); }
.soclai-tooltip.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
/* !important : le grip est la seule mecanique de resize, il doit battre toute regle locale
   (ex. un `textarea { resize: vertical }` de page) qui ferait reapparaitre la poignee native. */
.soclai-grip-target { resize: none !important; }
body.soclai-grip-resizing, body.soclai-grip-resizing * { cursor: ns-resize !important; user-select: none !important; }
.soclai-ai-iconbtn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  padding: 0.15rem;
  transition: var(--transition);
}
.soclai-ai-iconbtn:hover { color: var(--text-secondary); }

/* Memoire de l'assistant : chip de confirmation sous la reponse + panneau de gestion. */
.soclai-ai-memchip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.78rem;
}
.soclai-ai-memchip.is-full { background: var(--bg-secondary); color: var(--text-muted); }

/* Pills d'activite sous un message agent : feedback de ce qu'il a fait (web, doc lu, doc ecrit...). */
.soclai-ai-acts { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }

/* Ecriture sur le site en attente de validation : carte sous la reponse (soclai-ai.js). */
.soclai-ai-site { margin-top: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); overflow: hidden; }
.soclai-ai-site-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; }
.soclai-ai-site-head i { color: var(--accent); }
.soclai-ai-site-detail { margin: 0; padding: 0.6rem 0.7rem; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 0.85rem; }
.soclai-ai-site-status { padding: 0.4rem 0.7rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-muted); }
.soclai-ai-site-status--done { color: var(--success); }
.soclai-ai-site-status--failed, .soclai-ai-site-status--refused { color: var(--danger); }
.soclai-ai-site-status--unknown { color: var(--warning); }
.soclai-ai-site-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.7rem 0.6rem; }
.soclai-ai-site-actions .soclai-ai-cta { margin-top: 0; }
.soclai-ai-cta--ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.soclai-ai-cta--ghost:hover { background: var(--bg-card-hover); }

/* Reglages > Actions sur mon site (lecture seule). */
.settings-site-sub { margin: 1.2rem 0 0.5rem; font-size: 0.95rem; }
.settings-site-result--done { color: var(--success); }
.settings-site-result--failed { color: var(--danger); }
.settings-site-result--unknown { color: var(--warning); }
.settings-site-result--pending, .settings-site-result--cancelled { color: var(--text-muted); }
.soclai-ai-act {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
}
.soclai-ai-act i { font-size: 0.82rem; }
.soclai-ai-act--web    { --c: #2563eb; }
.soclai-ai-act--doc    { --c: #7c3aed; }
.soclai-ai-act--memory { --c: #64748b; }
.soclai-ai-act--made   { --c: #16a34a; }
.soclai-ai-act--email  { --c: #ea580c; }
.soclai-ai-act--form   { --c: #d97706; }
.soclai-ai-act--post   { --c: #0d9488; }

/* Bouclier PII : chip "X infos protegees" + panneau depliable sous la reponse de l'IA. */
.soclai-ai-pii { margin-top: 0.45rem; }
.soclai-ai-pii-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; line-height: 1.5; cursor: pointer;
  color: #0e7490;
  background: color-mix(in srgb, #0e7490 13%, transparent);
  border: 1px solid color-mix(in srgb, #0e7490 26%, transparent);
}
.soclai-ai-pii-chip i { font-size: 0.82rem; }
.soclai-ai-pii-caret { transition: transform 0.15s ease; }
.soclai-ai-pii.is-open .soclai-ai-pii-caret { transform: rotate(180deg); }
.soclai-ai-pii-panel { display: none; margin-top: 0.4rem; padding: 0.6rem 0.7rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); max-width: 30rem; }
.soclai-ai-pii.is-open .soclai-ai-pii-panel { display: block; }
.soclai-ai-pii-title { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.4rem; }
.soclai-ai-pii-row { display: flex; gap: 0.5rem; font-size: 0.8rem; padding: 0.15rem 0; }
.soclai-ai-pii-k { color: var(--text-muted); min-width: 6.5rem; flex-shrink: 0; }
.soclai-ai-pii-v { color: var(--text-primary); font-weight: 600; word-break: break-word; }
.soclai-ai-pii-note { margin-top: 0.45rem; font-size: 0.7rem; color: var(--text-muted); font-style: italic; }

/* Bouclier PII : badge dans le viewer de run d'agent (<details> natif, sans JS). */
.arun-pii { margin: 0.5rem 0; }
.arun-pii-sum { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; list-style: none;
  padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: #0e7490;
  background: color-mix(in srgb, #0e7490 13%, transparent); border: 1px solid color-mix(in srgb, #0e7490 26%, transparent); }
.arun-pii-sum::-webkit-details-marker { display: none; }
.arun-pii-sum i { font-size: 0.82rem; }
.arun-pii-panel { margin-top: 0.4rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-card); max-width: 32rem; }
.arun-pii-title { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.4rem; }
.arun-pii-row { display: flex; gap: 0.5rem; font-size: 0.8rem; padding: 0.15rem 0; }
.arun-pii-k { color: var(--text-muted); min-width: 6.5rem; flex-shrink: 0; }
.arun-pii-v { color: var(--text-primary); font-weight: 600; word-break: break-word; }
.arun-pii-note { margin-top: 0.45rem; font-size: 0.7rem; color: var(--text-muted); font-style: italic; }

/* Bouclier PII : indicateur LIVE sous un composer (soclai-pii-live.js), non destructif. */
.pii-live { display: inline-flex; align-items: center; gap: 0.3rem; align-self: flex-start;
  margin: 0.35rem 0.6rem; padding: 0.1rem 0.55rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; color: #0e7490; cursor: default;
  background: color-mix(in srgb, #0e7490 12%, transparent); border: 1px solid color-mix(in srgb, #0e7490 24%, transparent); }
.pii-live.is-hidden { display: none; }
.pii-live i { font-size: 0.8rem; }

/* Surlignage des donnees sensibles DANS le composeur : calque derriere le textarea qui ne dessine
   QUE les boites (texte transparent) ; le vrai texte reste rendu par le textarea (net, pas de double).
   Les boites utilisent background + box-shadow (zero impact sur la metrique du texte). */
.pii-hl-wrap { position: relative; display: block; width: 100%; }
.pii-hl-back { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.pii-hl-content { box-sizing: border-box; width: 100%; min-height: 100%;
  border-style: solid; border-color: transparent; color: transparent;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.pii-hl-wrap > textarea { position: relative; z-index: 1; width: 100%; box-sizing: border-box; }
.pii-mark { color: transparent; border-radius: 3px;
  background: color-mix(in srgb, #0e7490 14%, transparent);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, #0e7490 55%, transparent); }

.soclai-ai-mem-list { display: flex; flex-direction: column; margin-top: 0.5rem; }
.soclai-ai-mem-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--border);
}
.soclai-ai-mem-row:last-child { border-bottom: 0; }
.soclai-ai-mem-text { flex: 1; min-width: 0; font-size: 0.9rem; word-break: break-word; }
.soclai-ai-mem-del {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 0.1rem;
  transition: var(--transition);
}
.soclai-ai-mem-del:hover { color: var(--danger); }
.soclai-ai-mem-empty { color: var(--text-muted); font-style: italic; margin: 0.5rem 0; }
/* Bouton editer (crayon) par ligne + edition inline + formulaire d'ajout en bas du panneau. */
.soclai-ai-mem-edit {
  background: none; border: 0; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; padding: 0.1rem;
  transition: var(--transition);
}
.soclai-ai-mem-edit:hover { color: var(--accent); }
.soclai-ai-mem-row.is-editing { align-items: center; gap: 0.4rem; }
.soclai-ai-mem-add { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.soclai-ai-mem-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--text-primary);
  font: inherit; font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
}
.soclai-ai-mem-input:focus { outline: none; border-color: var(--accent); }

/* Historique des conversations : recherche + liste rechargeable (panneau [data-ai-history]). */
.soclai-ai-hist-scope { display: flex; margin-bottom: 0.6rem; }
.soclai-ai-hist-scope .app-seg-btn { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soclai-ai-hist-search { position: relative; margin-bottom: 0.6rem; }
.soclai-ai-hist-search > i { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.soclai-ai-hist-search input {
  width: 100%;
  padding: 0.55rem 0.75rem 0.55rem 2.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
}
.soclai-ai-hist-search input:focus { outline: none; border-color: var(--accent); }
.soclai-ai-hist-list { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; }
.soclai-ai-hist-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
}
.soclai-ai-hist-item:last-child { border-bottom: 0; }
.soclai-ai-hist-item:hover { background: var(--bg-card-hover); }
.soclai-ai-hist-item.is-current { background: var(--accent-soft); }
.soclai-ai-hist-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 0.55rem 0.5rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.soclai-ai-hist-del {
  flex-shrink: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  margin-right: 4px;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.5;
  transition: var(--transition);
}
.soclai-ai-hist-del:hover { color: var(--danger); background: var(--bg-card); opacity: 1; }
.soclai-ai-hist-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
/* Conversation venue de WhatsApp : pastille verte reconnaissable dans l'historique. */
.soclai-ai-hist-icon--wa {
  background: color-mix(in srgb, #25d366 16%, transparent);
  color: #1da851;
}
.soclai-ai-hist-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.soclai-ai-hist-title { font-size: 0.9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soclai-ai-hist-sub { font-size: 0.78rem; color: var(--text-muted); }

/* Autofill business : valeurs proposees editables + grille des logos candidats. */
.bizfill-row .bizfill-edit { padding: 0.55rem 0.75rem; font-size: 0.88rem; }
textarea.bizfill-edit { resize: vertical; }
.bizfill-logos { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.5rem 0 0.75rem; }
.bizfill-logo-item {
  width: 76px;
  height: 76px;
  padding: 8px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: var(--transition);
}
.bizfill-logo-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bizfill-logo-item:hover { border-color: var(--accent); }
.bizfill-logo-item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bizfill-logo-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.25rem; }
.bizfill-logo-url { display: flex; align-items: stretch; gap: 0.5rem; }
.bizfill-logo-url .form-input { flex: 1; min-width: 0; padding: 0.5rem 0.75rem; font-size: 0.88rem; }
.bizfill-logo-url .btn { flex-shrink: 0; }
.bizfill-logo-alt { display: flex; align-items: center; gap: 0.6rem; }
.bizfill-logo-or { font-size: 0.8rem; color: var(--text-muted); }

/* Dictee vocale facon WhatsApp (soclai-voice.js) : micro en cours = rouge + pulse ; VERROUILLE (mains
   libres) = bouton STOP carre rouge plein ; overlay = cadenas (glisser vers le haut) + pastille timer.
   Generique a TOUS les micros [data-ai-voice] (chat Leon, /chat, atelier, onboarding, recrutement). */
[data-ai-voice] { touch-action: none; }
[data-ai-voice].is-voice-active {
  color: var(--danger);
  animation: soclai-voice-pulse 1s ease-in-out infinite;
}
[data-ai-voice].is-voice-locked {
  color: #fff;
  background: var(--danger);
  border-radius: 8px;
  animation: none;
}
@keyframes soclai-voice-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Overlay : ancre au-dessus du micro (left + bottom poses en JS ; centre par translateX). Au-dessus du
   chat flottant (10000), du menu trombone (10002) et des modales (9999) ; sous la mega-recherche. */
.scv {
  position: fixed;
  z-index: 10600;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;   /* laisse passer le geste vers le micro ; seul Annuler reactive les clics */
}
.scv.is-hidden { display: none; }

/* Cible cadenas : glisser le doigt jusqu'ici verrouille ; s'illumine en zone (is-armed) ; masquee une
   fois verrouille. */
.scv-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 9px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
  transition: transform .15s, background .15s, color .15s, border-color .15s;
}
.scv-lock .scv-lock-chev { font-size: 12px; opacity: .55; }
.scv.is-armed .scv-lock {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  transform: translateY(-4px) scale(1.08);
}
.scv.is-locked .scv-lock { display: none; }

/* Pastille d'etat : point rouge pulsant + timer + indice + Annuler (visible en mode verrouille). */
.scv-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
  font-size: 12.5px;
  color: var(--text-primary);
  white-space: nowrap;
}
.scv-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger);
  animation: soclai-voice-pulse 1s ease-in-out infinite;
  flex: 0 0 auto;
}
.scv-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.scv-hint { color: var(--text-secondary); }

/* Pieces jointes du chat : chips des fichiers choisis + vignettes dans la bulle user
   (le picker du trombone est le module partage .soclai-attach-menu / SoclaiDocPicker). */
/* Drop d'un fichier sur un composer (panneau flottant + accueil + run/entrainement des agents). */
.soclai-ai-input.is-dragging,
.home-composer.is-dragging,
.arun-chat-composer.is-dragging { outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: var(--radius-lg); }

.soclai-ai-attach-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.3rem 0.9rem; max-height: 120px; overflow-y: auto; }
/* Accueil : les chips s'alignent sur la largeur du composer ; panneau : sur ses marges. */
.home .soclai-ai-attach-chips { width: 100%; max-width: 860px; margin: 0 auto; padding: 0.3rem 0; }
.soclai-ai-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.2rem 0.45rem 0.2rem 0.2rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.soclai-ai-attach-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
/* Chip document (pas d'image) : pastille icone fichier a la place de la vignette ronde. */
.soclai-ai-attach-chip.is-doc { padding-left: 0.5rem; }
.soclai-ai-attach-chip.is-doc > i { font-size: 1rem; color: var(--accent); }
.soclai-ai-attach-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 0.1rem;
  display: inline-flex;
}
.soclai-ai-attach-chip button:hover { color: var(--danger); }

.soclai-ai-msg-attach { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.soclai-ai-msg-attach img { max-width: 140px; max-height: 140px; border-radius: var(--radius); display: block; }
/* Vocal WhatsApp rejoue dans le fil (au-dessus de sa transcription). */
.soclai-ai-msg-voice { display: block; width: 260px; max-width: 100%; height: 36px; margin-bottom: 0.4rem; }
/* Image jointe a un message : la vignette ouvre l'apercu (140px ne suffit pas a lire un document). */
.soclai-ai-msg-img {
  padding: 0; border: none; background: none; cursor: pointer; line-height: 0;
  border-radius: var(--radius); transition: opacity 0.15s ease;
}
.soclai-ai-msg-img:hover { opacity: 0.85; }
/* Document joint a un message : chip fichier (icone + nom), pas de vignette. */
.soclai-ai-msg-doc {
  display: inline-flex; align-items: center; gap: 0.4rem;
  max-width: 220px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.35rem 0.6rem; font-size: 0.8rem; color: var(--text-secondary);
  cursor: pointer; text-align: left; font-family: inherit;
}
.soclai-ai-msg-doc:hover { border-color: var(--accent); color: var(--text-primary); }
.soclai-ai-msg-doc > i { color: var(--accent); font-size: 1rem; flex: none; }
.soclai-ai-msg-doc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soclai-ai-send {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: var(--transition);
}
.soclai-ai-send:hover { background: var(--accent-hover); transform: scale(1.05); }
.soclai-ai-send:disabled { opacity: 0.5; cursor: default; transform: none; }
/* Mode STOP : pendant qu'une reponse se genere, le bouton d'envoi devient un carre d'arret. */
.soclai-ai-send.is-stop { background: var(--stop); }
.soclai-ai-send.is-stop:hover { background: var(--stop-hover); }

/* Curseur magique (overlay) : positionnement via Web Animations API (transform),
   etat visuel via classes. Aucune ecriture el.style.X (CSP). */
.soclai-cursor { position: absolute; top: 0; left: 0; width: 22px; height: 22px; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
.soclai-cursor i { font-size: 22px; line-height: 1; color: var(--accent); }
.soclai-cursor-label {
  position: absolute;
  top: 26px;
  left: 4px;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.soclai-cursor-label.is-hidden { display: none; }
.soclai-cursor-pulse { position: absolute; inset: -6px; border: 2px solid var(--accent); border-radius: 50%; opacity: 0; }
.soclai-cursor-pulse.is-pulsing { animation: soclai-cursor-pulse 0.45s ease-out; }
@keyframes soclai-cursor-pulse { 0% { transform: scale(0.4); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } }
/* Tactile : la fleche de souris n'a pas de sens au doigt -> point de contact translucide
   (style "afficher les touchers" Android). Le margin recentre le rond sur le point vise
   (le JS place le coin haut-gauche avec un offset -4px prevu pour la pointe de fleche). */
@media (pointer: coarse) {
  .soclai-cursor { width: 30px; height: 30px; margin: -11px 0 0 -11px; filter: none; }
  .soclai-cursor i { display: none; }
  .soclai-cursor::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border: 2px solid var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  .soclai-cursor-label { top: 36px; left: 50%; transform: translateX(-50%); }
}
.soclai-cursor-target { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Champ en cours d'ecriture par le puppet (machine a ecrire) : meme outline, tenu
   pendant toute la frappe (la classe -target de move() ne dure que 700ms). */
.soclai-puppet-typing { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================
   Documents : mediatheque en liste sobre (page /documents).
   Reutilise le markup/JS des cartes Communication, presentees en lignes.
   ============================================ */

/* Onglets de scope (Partages / Mes creations) : tabs texte soulignees, sans couleur. */
.docs-scope {
  display: flex;
  gap: 1.4rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.docs-scope .comm-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: 0.5rem 0.1rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.docs-scope .comm-pill:hover { color: var(--text-secondary); }
.docs-scope .comm-pill.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Barre outils : recherche + filtre type discret + compteur. */
.docs-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.docs-toolbar .comm-search { flex: 1 1 240px; max-width: 360px; }
.docs-types { display: flex; gap: 0.2rem; }
.docs-types .comm-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.docs-types .comm-pill:hover { color: var(--text-secondary); background: var(--bg-card-hover); }
.docs-types .comm-pill.is-active { color: var(--accent); background: var(--accent-soft); }
.docs-toolbar .comm-count { margin-left: auto; color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }

/* Grille -> liste : une ligne par media (vignette, nom, visibilite, date, actions). */
.docs-media .comm-grid {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* overflow visible : laisse le menu "..." deborder sous la ligne (sinon il est rogne).
     Les coins arrondis sont preserves via les 1re/derniere lignes ci-dessous. */
  overflow: visible;
}
.docs-media .comm-card:first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.docs-media .comm-card:last-child  { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.docs-media .comm-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.docs-media .comm-card:last-child { border-bottom: none; }
.docs-media .comm-card:hover { background: var(--bg-card-hover); }
.docs-media .comm-card-thumb {
  width: 64px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-input);
  position: relative;
}
.docs-media .comm-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.docs-media .comm-card-thumb .badge { position: absolute; top: 2px; left: 2px; font-size: 0.58rem; padding: 0.1rem 0.25rem; }
.docs-media .comm-card-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  flex: 1;
  min-width: 0;
  padding: 0;
}
.docs-media .comm-card-prompt {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docs-media .comm-card-name {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
}
/* Si le media a un nom ET un prompt (genere par IA puis renomme), le nom prime. */
.docs-media .comm-card-name + .comm-card-prompt {
  flex: 0 1 auto;
  max-width: 32%;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.docs-media .comm-card-meta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin: 0 0 0 auto; }
.docs-media .comm-card-date { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; }
/* Liste documents : le kebab vit en bout de ligne (flux normal), pas sur la vignette. */
.docs-media .comm-card-actions { position: relative; top: auto; right: auto; flex-shrink: 0; }
.docs-media .comm-card-menu-btn { background: none; box-shadow: none; }
/* Etat "en cours" compact dans la petite vignette. */
.docs-media .comm-card-pending { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.docs-media .comm-card-pending-label { display: none; }
.docs-media .comm-card-pending .ri-spin { font-size: 1.3rem; }
.docs-media .comm-card-video-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-muted); font-size: 1.1rem; }
.docs-media .comm-grid-empty { padding: 2.75rem 1rem; text-align: center; color: var(--text-muted); }

@media (max-width: 640px) {
  .docs-media .comm-card-date { display: none; }
}

/* ============================================
   Workspace Documents : fil d'ariane, dossiers, drag & drop.
   La grille medias reprend les tuiles .comm-grid/.comm-card par defaut (vue icones).
   ============================================ */
.docs-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem; margin-bottom: 0.9rem; }
.docs-crumb {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: none; border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem; font: inherit; font-size: 0.9rem;
  color: var(--text-muted); cursor: pointer; transition: var(--transition);
}
.docs-crumb:hover:not(.is-current) { color: var(--accent); background: var(--accent-soft); }
.docs-crumb.is-current { color: var(--text-primary); font-weight: 600; cursor: default; }
.docs-crumb.is-drop { color: var(--accent); background: var(--accent-soft); outline: 2px dashed var(--accent); }
.docs-crumb-sep { color: var(--text-muted); font-size: 1rem; }

.docs-folders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.docs-folder {
  position: relative;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); cursor: pointer; transition: var(--transition);
  --folder: #64748b;
}
.docs-folder:hover { background: var(--bg-card-hover); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.docs-folder.is-drop { border-color: var(--accent); outline: 2px dashed var(--accent); background: var(--accent-soft); }
.docs-folder-icon { position: relative; font-size: 1.8rem; line-height: 1; color: var(--folder); flex-shrink: 0; }
.docs-folder-shared { position: absolute; right: -7px; bottom: -5px; font-size: 0.7rem; color: var(--text-muted); background: var(--bg-card); border-radius: 50%; padding: 1px 2px; }
.docs-folder-body { min-width: 0; flex: 1; padding-right: 1.5rem; }
.docs-folder-name { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-folder-count { font-size: 0.78rem; color: var(--text-muted); }
.docs-folder .comm-card-actions { position: absolute; top: 6px; right: 6px; }
/* Menu "..." toujours visible sur les dossiers : les cartes media ne le revelent qu'au
   survol (.comm-card:hover), mais un dossier est une .docs-folder -> sans ca, aucun moyen
   visible de modifier/supprimer. */
.docs-folder .comm-card-menu-btn { opacity: 1; background: none; box-shadow: none; }
.docs-folder.is-menu-open { z-index: 40; }   /* le menu deroulant passe au-dessus des dossiers voisins */
.docs-folder[draggable="true"], .docs-workspace .comm-card[draggable="true"] { cursor: grab; }
.docs-folder.is-dragging, .docs-workspace .comm-card.is-dragging { opacity: 0.4; }

/* Tuile "+ Nouveau dossier" : meme gabarit qu'une carte dossier, en pointilles. */
.docs-folder-add {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 58px; padding: 0.7rem 0.8rem;
  background: none; border: 1px dashed var(--border); border-radius: var(--radius-lg);
  color: var(--text-muted); font: inherit; font-size: 0.88rem; font-weight: 500;
  cursor: pointer; transition: var(--transition);
}
.docs-folder-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.docs-folder-add i { font-size: 1.25rem; }

/* Squelettes de chargement du workspace (avant le 1er rendu JS) : blocs qui ondulent a la
   place des dossiers / documents, remplaces par le contenu reel (jamais "aucun document"
   pendant que ca charge). */
.docs-skel-folder, .docs-skel-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--bg-input) 40%, var(--bg-card) 50%, var(--bg-input) 60%);
  background-size: 200% 100%;
  animation: docs-skel 1.3s ease-in-out infinite;
}
.docs-skel-folder { min-height: 58px; }
.docs-skel-card   { min-height: 190px; }
@keyframes docs-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Modale de partage (dossier / fichier) : note d'heritage + listes de cibles (roles + users). */
.share-inherited {
  display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.9rem;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--text-muted); font-size: 0.84rem;
}
.share-inherited i { color: var(--accent); flex-shrink: 0; }
.share-targets { margin-top: 0.6rem; }
.share-targets-search { position: relative; margin-bottom: 0.7rem; }
.share-targets-search i { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.share-targets-search .form-input { padding-left: 1.9rem; }
.share-targets-section + .share-targets-section { margin-top: 0.7rem; }
.share-targets-label { margin: 0 0 0.3rem; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.share-targets-list { max-height: 160px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.25rem; }
.share-target { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.88rem; color: var(--text-primary); }
.share-target:hover { background: var(--bg-card-hover); }
.share-target input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }

/* Palette de couleurs des dossiers (token -> variable --folder). */
.folder-c-slate  { --folder: #64748b; }
.folder-c-red    { --folder: #ef4444; }
.folder-c-orange { --folder: #f97316; }
.folder-c-amber  { --folder: #f59e0b; }
.folder-c-green  { --folder: #22c55e; }
.folder-c-teal   { --folder: #14b8a6; }
.folder-c-blue   { --folder: #3b82f6; }
.folder-c-violet { --folder: #8b5cf6; }
.folder-c-pink   { --folder: #ec4899; }
.folder-c-black  { --folder: #1a1a1a; }
/* Arc-en-ciel : degrade multicolore. L'icone du dossier devient un glyphe en degrade (clip texte),
   le tcheton du selecteur affiche le meme degrade. --folder reste un fallback solide. */
.folder-c-rainbow {
  --folder: #8b5cf6;
  --rainbow-grad: linear-gradient(135deg, #ef4444, #f59e0b, #eab308, #22c55e, #3b82f6, #8b5cf6);
}
.folder-c-rainbow .docs-folder-icon .ri-folder-3-fill {
  background: var(--rainbow-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Selecteur de couleur (modale dossier). */
.folder-color-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.folder-color-chip {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border); cursor: pointer; padding: 0;
  background: var(--folder, var(--bg-input)); transition: var(--transition);
}
.folder-color-chip:hover { transform: scale(1.08); }
.folder-color-chip.is-active { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.folder-color-chip.folder-c-rainbow { background: var(--rainbow-grad); }
.folder-color-chip.folder-c-none {
  background: var(--bg-input); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ============================================
   Calendrier de publication (tab Planning).
   ============================================ */
/* En-tete : fleche mois precedent < titres centres > fleche mois suivant. */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.cal-head-titles { flex: 1; text-align: center; min-width: 0; }
.cal-kicker { margin: 0 0 0.2rem; font-size: 0.85rem; color: var(--text-muted); }
.cal-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  text-transform: capitalize;
}
.cal-nav-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); color: var(--text-secondary);
  font-size: 1.1rem;
  transition: var(--transition);
}
.cal-nav-btn:hover { border-color: var(--accent); color: var(--accent); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.cal-dow {
  padding: 0.6rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.cal-cell {
  min-height: 116px;
  padding: 0.5rem 0.55rem;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  transition: var(--transition);
}
.cal-grid > :nth-child(7n) { border-right: none; }
.cal-grid > :nth-last-child(-n+7) { border-bottom: none; }
.cal-cell[data-cal-day] { cursor: pointer; }
.cal-cell[data-cal-day]:hover { background: var(--bg-card-hover); }
.cal-cell.is-out,
.cal-cell.is-past { background: var(--bg-secondary); }
.cal-cell.is-out .cal-cell-num,
.cal-cell.is-past .cal-cell-num { color: var(--text-muted); }
.cal-cell.is-out .cal-cell-num { opacity: 0.55; }
.cal-cell-num {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
  align-self: flex-start;
}
.cal-cell.is-today .cal-cell-num {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  border-radius: 50%;
}
.cal-cell-posts { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cal-post {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  width: 100%; min-width: 0;
  border: none; text-align: left; cursor: pointer;
  background: var(--accent-soft); color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.45rem;
  font: inherit; font-size: 0.74rem;
  transition: var(--transition);
}
.cal-post:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cal-post-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
/* Visuel du post : carre pleine largeur SOUS la ligne heure + texte (order). */
.cal-post-thumb {
  order: 3;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.cal-post.is-published .cal-post-dot { background: var(--success); }
.cal-post.is-failed .cal-post-dot { background: var(--danger); }
.cal-post.is-pending .cal-post-dot { animation: cal-pulse 1.4s ease-in-out infinite; }
@keyframes cal-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.cal-post-time { color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cal-post-text { flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Etat de programmation : ligne sous l'heure et le texte, au-dessus de la vignette (order). */
.cal-post-sched {
  order: 2; width: 100%;
  display: flex; align-items: center; gap: 0.25rem;
  font-size: 0.68rem; font-weight: 600;
}
.cal-post-sched.is-on { color: var(--info); }
.cal-post-sched.is-part, .cal-post-sched.is-off { color: var(--warning); }
.cal-post.is-sched-on .cal-post-dot { background: var(--info); }
/* Story : ephemere 24 h, verticale, sans legende. La chip doit se distinguer d'un post au premier
   coup d'oeil - pastille et liseret propres, vignette au format reel, et expiree une fois passee. */
.cal-post.is-story { background: color-mix(in srgb, var(--info) 12%, transparent); }
.cal-post.is-story:hover { background: color-mix(in srgb, var(--info) 20%, transparent); }
.cal-post.is-story .cal-post-dot { background: var(--info); }
.cal-post.is-story .cal-post-thumb { aspect-ratio: 9 / 16; }
.cal-post-fmt { display: inline-flex; align-items: center; color: var(--info); font-size: 0.8rem; flex-shrink: 0; }
.cal-post.is-expired { opacity: 0.55; }
.cal-post.is-expired .cal-post-dot, .cal-post.is-expired .cal-post-fmt { color: var(--text-muted); background: var(--text-muted); }
/* Reseau sans stories : le bouton reste visible (on comprend pourquoi il ne repond pas). */
.cal-platform-btn.is-disabled { opacity: 0.35; cursor: not-allowed; }
.cal-format-hint { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--text-muted); }
.cal-badge-story { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
.cal-badge-story.is-expired { background: var(--bg-secondary); color: var(--text-muted); }
.cal-filter-seg { margin: 0 0 0.75rem; }
.cal-grid[data-cal-filter="post"]  .cal-post.is-story      { display: none; }
.cal-grid[data-cal-filter="story"] .cal-post:not(.is-story) { display: none; }

/* Modale de creation : etapes. */
.cal-create-date { color: var(--text-muted); font-weight: 500; margin-left: 0.3rem; }
.cal-seg {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--bg-input);
  border-radius: var(--radius);
  padding: 0.2rem;
  margin-bottom: 1.1rem;
}
.cal-seg-btn {
  border: none; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.95rem;
  border-radius: calc(var(--radius) - 4px);
  font: inherit; font-size: 0.88rem; font-weight: 500;
  color: var(--text-secondary);
  transition: var(--transition);
}
.cal-seg-btn.is-active {
  background: var(--bg-card);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.cal-choices { display: flex; flex-direction: column; gap: 0.6rem; }
.cal-choice {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; text-align: left; cursor: pointer;
  border: none; background: var(--bg-input);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font: inherit; font-size: 0.92rem; color: var(--text-primary);
  transition: var(--transition);
}
.cal-choice:hover { background: var(--accent-soft); }
.cal-choice-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.cal-choice > .ri-arrow-right-s-line { margin-left: auto; color: var(--text-muted); }
.cal-platforms { display: flex; flex-wrap: wrap; gap: 0.45rem; }
/* Boutons reseaux : logo seul (libelle en title au survol), coche quand selectionne. */
.cal-platform-btn {
  --brand: var(--text-secondary);
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--brand);
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition);
}
.cal-platform-btn i { opacity: 0.6; transition: var(--transition); }
.cal-platform-btn:hover { border-color: var(--border-light); }
.cal-platform-btn:hover i { opacity: 1; }
.cal-platform-btn.is-active {
  background: color-mix(in srgb, var(--brand) 10%, white);
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
}
.cal-platform-btn.is-active i { opacity: 1; }
.cal-platform-btn.is-active::after {
  content: '\2713';
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 9px;
  line-height: 15px;
  text-align: center;
  font-weight: 700;
}
/* Couleurs officielles des reseaux (selecteur valable pour les 3 attributs : data-cal-platform
   dans le wizard de creation, data-cal-net dans le detail editable d'un post, data-cat-platform dans
   les modales de l'onglet Produits). */
.cal-platform-btn[data-cal-platform="linkedin"],  .cal-platform-btn[data-cal-net="linkedin"],
.cal-platform-btn[data-cat-platform="linkedin"]  { --brand: #0a66c2; }
.cal-platform-btn[data-cal-platform="instagram"], .cal-platform-btn[data-cal-net="instagram"],
.cal-platform-btn[data-cat-platform="instagram"] { --brand: #e1306c; }
.cal-platform-btn[data-cal-platform="facebook"],  .cal-platform-btn[data-cal-net="facebook"],
.cal-platform-btn[data-cat-platform="facebook"]  { --brand: #1877f2; }
.cal-platform-btn[data-cal-platform="x"],         .cal-platform-btn[data-cal-net="x"],
.cal-platform-btn[data-cat-platform="x"]         { --brand: #111111; }
.cal-platform-btn[data-cal-platform="tiktok"],    .cal-platform-btn[data-cal-net="tiktok"],
.cal-platform-btn[data-cat-platform="tiktok"]    { --brand: #111111; }

/* Reseaux editables dans le detail d'un post (toggle on/off directement dans le planning).
   En lecture seule : seuls les reseaux cibles s'affichent. En edition : les 5 sont cliquables. */
.cal-nets { margin: 0.9rem 0; }
.cal-nets-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.45rem; }
.cal-nets-head .comm-label { margin: 0; }
.cal-nets-edit-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 0;
  color: var(--accent); font-size: 0.85rem; cursor: pointer; padding: 0.1rem 0.2rem; }
.cal-nets-edit-btn:hover { text-decoration: underline; }
.cal-nets-list.is-readonly .cal-platform-btn { pointer-events: none; }
.cal-nets-list.is-readonly .cal-platform-btn:not(.is-active) { display: none; }
.cal-nets-list.is-readonly .cal-platform-btn.is-active::after { display: none; }
.cal-nets-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.6rem; }

/* Detail d'un post : preview facon reseau social (header entreprise + visuel +
   barre d'actions decorative + caption), sobre, aux couleurs du design system. */
.cal-detail-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; }

/* Publication reseaux sociaux (modale detail d'un post) : cartes de reseau cliquables */
.cal-pub { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.cal-pub-head { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.6rem; }
.cal-pub-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.9rem; }

/* Commentaires FB dans le detail d'un post (reutilise les cartes .cmt-* de l'onglet dedie). */
.cal-comments { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.cal-comments-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.6rem; }
.cal-comments-head > span { display: flex; align-items: center; gap: 0.4rem; }
.cal-comments-list { display: flex; flex-direction: column; gap: 0.6rem; }

.cal-pub-card {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.cal-pub-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.cal-pub-card.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); }
.cal-pub-card.is-soon { opacity: 0.55; cursor: default; }
.cal-pub-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow, color-mix(in srgb, var(--accent) 25%, transparent)); }

.cal-pub-card-check {
  width: 20px; height: 20px; flex: 0 0 auto;
  border: 1.5px solid var(--border); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.85rem;
}
.cal-pub-card.is-selected .cal-pub-card-check { background: var(--accent); border-color: var(--accent); }
.cal-pub-card-check i { opacity: 0; transition: opacity 0.1s; }
.cal-pub-card.is-selected .cal-pub-card-check i { opacity: 1; }
.cal-pub-card.is-soon .cal-pub-card-check { visibility: hidden; }

.cal-pub-card-logo { font-size: 1.4rem; color: var(--text-secondary); flex: 0 0 auto; }
.cal-pub-card-body { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
.cal-pub-card-name { text-transform: capitalize; font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.cal-pub-card-act { display: inline-flex; gap: 0.15rem; flex: 0 0 auto; }
.cal-pub-iconbtn { background: none; border: 0; padding: 0.2rem 0.3rem; color: var(--text-secondary); cursor: pointer; line-height: 1; text-decoration: none; border-radius: 6px; }
.cal-pub-iconbtn:hover { color: var(--text-primary); background: var(--bg-input); }
.cal-pub-del:hover { color: var(--danger); }

.cal-pub-state { font-size: 0.72rem; align-self: flex-start; }
.cal-pub-published  { background: var(--success-soft); color: var(--success); }
.cal-pub-scheduled  { background: var(--info-soft); color: var(--info); }
.cal-pub-publishing { background: var(--warning-soft); color: var(--warning); }
.cal-pub-failed     { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.cal-pub-draft, .cal-pub-canceled { background: var(--bg-input); color: var(--text-secondary); }
.cal-pub-soon { background: var(--bg-input); color: var(--text-secondary); font-style: italic; }

/* Options TikTok (ecran de conformite impose par TikTok, cf. communication-modals.partial). */
.cal-pub-iconbtn.is-todo { color: var(--warning); }
.tt-preview { display: flex; align-items: flex-start; gap: 0.75rem; }
.tt-preview-media { flex: 0 0 120px; }
.tt-preview-media img,
.tt-preview-media video { display: block; width: 100%; max-height: 210px; border-radius: 10px; object-fit: cover; background: var(--bg-input); }
.tt-preview-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tt-preview-caption { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.tt-account { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); }
.tt-account-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.tt-account-id { display: flex; flex-direction: column; min-width: 0; }
.tt-account-nick { font-weight: 600; font-size: 0.92rem; color: var(--text-primary); }
.tt-account-user { font-size: 0.8rem; color: var(--text-secondary); }
.tt-checks { display: flex; flex-direction: column; gap: 0.45rem; }
.tt-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; color: var(--text-primary); cursor: pointer; }
.tt-check input { margin-top: 0.15rem; flex: 0 0 auto; }
.tt-check.is-locked { color: var(--text-muted); cursor: not-allowed; }
.tt-brand { margin-top: 0.5rem; padding-left: 1.4rem; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 0.45rem; }
.tt-legal { margin-top: 1rem; font-size: 0.78rem; line-height: 1.5; }
.tt-legal a { color: var(--accent); }

.cal-pub-stats { display: flex; gap: 0.9rem; color: var(--text-secondary); font-size: 0.78rem; }
.cal-pub-stat { display: inline-flex; align-items: center; gap: 0.25rem; }
.cal-pub-stat i { font-size: 0.95rem; }

.cal-pub-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: space-between; }
.cal-pub-schedule { display: flex; align-items: center; gap: 0.4rem; }
.cal-pub-actions-end { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cal-pub-when { max-width: 12rem; }
/* Apercu d'un visuel importe avant creation du post */
.cal-import-preview { display: flex; justify-content: center; margin-top: 0.5rem; }
.cal-import-preview img, .cal-import-preview video { max-width: 100%; max-height: 340px; border-radius: 8px; background: var(--bg-secondary); }
.cal-detail-caption { white-space: pre-wrap; color: var(--text-primary); line-height: 1.55; margin: 0 0 0.6rem; font-size: 0.92rem; }

/* Pas d'overflow:hidden : les menus "..." (dropdowns) doivent pouvoir s'afficher
   par-dessus la carte. L'image ne touche jamais les coins (header au-dessus). */
.cal-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.cal-preview-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
}
.cal-preview-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid var(--border);
}
.cal-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cal-preview-id { display: flex; flex-direction: column; min-width: 0; }
.cal-preview-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.cal-preview-platforms { display: inline-flex; gap: 0.4rem; color: var(--text-secondary); font-size: 0.85rem; }
.cal-preview-media img,
.cal-preview-media video {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  background: var(--bg-secondary);
}

/* Carrousel des photos d'un post (posts produits) : defilement au doigt ou aux fleches, un point par photo. */
.post-gallery-wrap { position: relative; }
.post-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.post-gallery::-webkit-scrollbar { display: none; }
.post-gallery img { flex: 0 0 100%; scroll-snap-align: center; }
.post-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  color: var(--text-primary);
  font-size: 1.15rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.post-gallery-nav.is-prev { left: 0.5rem; }
.post-gallery-nav.is-next { right: 0.5rem; }
.post-gallery-nav:disabled { opacity: 0; pointer-events: none; }
.post-gallery-dots { display: flex; justify-content: center; gap: 4px; padding-top: 0.55rem; }
.post-gallery-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: var(--transition); }
.post-gallery-dots span.is-active { background: var(--accent); }
.tt-preview-media .post-gallery-nav { display: none; }
.tt-preview-media .post-gallery img { border-radius: 0; }
.tt-preview-media .post-gallery { border-radius: 10px; }

.cal-preview-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.65rem 0.9rem 0.2rem;
  font-size: 1.3rem;
  color: var(--text-primary);
}
.cal-preview-save { margin-left: auto; }
.cal-preview-body { position: relative; padding: 0.45rem 0.9rem 0.85rem; }
.cal-preview-body .cal-detail-caption { padding-right: 2.2rem; }
.cal-preview-body .cal-detail-caption .cal-preview-name { margin-right: 0.15rem; }

/* Regeneration du texte : le texte floute sous un spinner + bouton Stop (annule). */
.cal-preview-body.is-regen .cal-detail-caption,
.cal-preview-body.is-regen .comm-post-hashtags {
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
}
.cal-text-regen {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.cal-text-regen-spin {
  width: 22px; height: 22px;
  border: 2.5px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: comm-spin 0.8s linear infinite;
}
.cal-text-regen-stop {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.cal-text-regen-stop:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }

/* Menus "..." d'edition de la preview (reutilisent comm-card-menu / comm-menu-item). */
.cal-preview-media-wrap { position: relative; }
.cal-preview-media-wrap.is-bare { min-height: 52px; }
.cal-edit-menu { position: absolute; z-index: 6; }
.cal-edit-menu-media { top: 0.55rem; right: 0.55rem; }
.cal-edit-menu-text  { top: 0.35rem; right: 0.55rem; }
.cal-edit-menu .comm-card-menu-btn {
  opacity: 1;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  box-shadow: var(--shadow-sm);
}
.cal-edit-menu .comm-card-menu { top: calc(100% + 6px); right: 0; }
/* Menu du texte (bas de carte, pres du bas de la modale) : s'ouvre vers le HAUT. */
.cal-edit-menu-text .comm-card-menu { top: auto; bottom: calc(100% + 6px); }

/* Edition manuelle du texte dans la preview. */
.cal-text-edit { margin-top: 0.4rem; }
.cal-text-edit-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.7rem; }
/* Pendant l'edition du texte : on cache footer (Supprimer/Fermer/Marquer publie), section
   publication et kebabs pour ne laisser que Annuler/Enregistrer du formulaire (evite la
   confusion avec le bouton "Marquer publie"). La fermeture reste possible via la croix. */
#calPostModal.is-text-editing .modal-footer,
#calPostModal.is-text-editing #calPubSection,
#calPostModal.is-text-editing .cal-edit-menu { display: none; }

/* Picker "Choisir dans Documents" : grille de vignettes. */

/* Etape "creation en cours" de la modale de creation (le worker bosse en arriere-plan). */
.cal-busy { text-align: center; padding: 1.4rem 0.5rem; }
.cal-busy i { font-size: 2.2rem; color: var(--accent); display: inline-block; }
.cal-busy.is-busy i { animation: comm-spin 1.4s linear infinite; }
.cal-busy.is-done i { color: var(--success); }
.cal-busy.is-failed i { color: var(--danger); }
.cal-busy-title { font-size: 1.05rem; font-weight: 600; margin: 0.8rem 0 0.4rem; }
.cal-busy-text { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }

@media (max-width: 768px) {
  .cal-cell { min-height: 76px; padding: 0.35rem 0.4rem; }
  .cal-post-text { display: none; }
  .cal-post-sched-text { display: none; }
  .cal-post-time { color: var(--text-primary); }
}

/*  ============================================
    Toast generique (soclaiToast, app.js) : bas centre, icone par type
    (success/error/info), message, barre de temps, bouton retour (undo).
    ============================================ */
.soclai-toast-host {
  position: fixed;
  left: 0; right: 0; bottom: 26px;
  display: flex;
  justify-content: center;
  z-index: 10700;   /* au-dessus du chat (10000) et du curseur magique (10500) */
  pointer-events: none;
}
.soclai-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: min(92vw, 480px);
  padding: 0.7rem 1rem 0.8rem;
  border-radius: 12px;
  background: rgba(24, 24, 38, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(20, 20, 40, 0.3);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.88rem;
  overflow: hidden;   /* la barre de temps reste dans les coins arrondis */
}
.soclai-toast-msg { min-width: 0; }
/* Pastille icone par type. Couleurs dediees au fond sombre du toast (les vars du
   theme sont calibrees pour fond clair). */
.soclai-toast-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 1rem;
}
.soclai-toast--success .soclai-toast-icon { background: rgba(74, 222, 128, 0.16); color: #4ade80; }
.soclai-toast--error   .soclai-toast-icon { background: rgba(248, 113, 113, 0.16); color: #f87171; }
.soclai-toast--info    .soclai-toast-icon { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.92); }
.soclai-toast--success .soclai-toast-fill { background: #34c772; }
.soclai-toast--error   .soclai-toast-fill { background: #ef6b6b; }
.soclai-toast-undo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  transition: var(--transition);
}
.soclai-toast-undo:hover { background: var(--accent); }
.soclai-toast-track {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.10);
}
.soclai-toast-fill { display: block; height: 100%; width: 100%; background: var(--accent); }

/* ============================================
   Page Plateforme (operateurs).
   ============================================ */

/* Selecteur de societe (select custom) : pilote tous les onglets, la selection suit
   dans l'URL et la derniere societe choisie est memorisee en localStorage. */
.platform-toolbar {
  max-width: 320px;
  margin: 0 0 1.25rem;
}

/* Empilement des cards par societe (onglets Utilisateurs / Modules & IA). */
.platform-cards {
  display: grid;
  gap: 1.25rem;
}

/* Onglet Modules & IA : trois sections dans la card (modules / quota IA / cles API),
   chacune separee proprement. Le gap flex de .api-keys-wrap (style settings) est
   redondant ici avec le padding des rows. */
.platform-cards .modules-grid { margin: 0 0 1.5rem; }
.platform-cards .api-keys-wrap {
  gap: 0;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.platform-cards .api-keys-wrap .section-title { margin: 1.25rem 0 0.25rem; }
.platform-cards .api-key-row:first-of-type { padding-top: 1rem; }

/* Slug discret a cote du nom de societe dans les titres de card. */
.platform-slug {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.platform-log-payload {
  font-size: 0.78rem;
  word-break: break-all;
}

/* ============================================================
   Notifications (cloche topbar). Deplace depuis le <style> inline.
   .topbar / .topbar-right sont deja definis dans layout.css.
   ============================================================ */
.notif { position: relative; }
.notif-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text-secondary);
}
.notif-btn:hover { background: var(--bg-input); color: var(--text-primary); }
/* Raccourci "Site web" (topbar, admin) : fiche entreprise + standard telephonique depuis le site. */
.topbar-site-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 34px;
  padding: 0 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.topbar-site-btn i { font-size: 1.05rem; color: var(--accent); }
.topbar-site-btn:hover { border-color: var(--accent); color: var(--text-primary); }
@media (max-width: 768px) {
  .topbar-site-btn { padding: 0 0.5rem; }
  .topbar-site-btn span { display: none; }
}
.notif-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.66rem;
  line-height: 16px;
  text-align: center;
}
.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 330px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.9rem;
}
.notif-actions { display: flex; align-items: center; gap: 0.7rem; }
.notif-readall {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8rem;
}
.notif-clear {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
}
.notif-clear:hover { color: var(--danger); }
.notif-list { display: flex; flex-direction: column; }
.notif-item {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
.notif-item.unread { background: var(--accent-soft); }
.notif-item .nt { font-weight: 600; }
.notif-item .nb { color: var(--text-muted); white-space: pre-wrap; }
.notif-item .nd { color: var(--text-muted); font-size: 0.74rem; margin-top: 0.2rem; }
.notif-item.is-clickable { cursor: pointer; }
.notif-empty {
  padding: 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.86rem;
}
/* Pied du panneau : activation du push web (PWA) sur l'appareil courant. Masque tant que le
   JS n'a pas decide d'afficher le bouton (service worker indisponible : pas de strip vide). */
.notif-foot:has(.notif-push-btn.is-hidden) { display: none; }
.notif-foot {
  position: sticky;
  bottom: 0;
  padding: 0.55rem 0.8rem;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.notif-push-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  justify-content: center;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.notif-push-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.notif-push-btn:disabled { opacity: 0.6; cursor: default; }
.notif-push-btn i { font-size: 1rem; }
.notif-push-hint { margin: 0.45rem 0 0; color: var(--text-muted); font-size: 0.76rem; line-height: 1.4; text-align: center; }

/* Engrenage des reglages (a droite, avec les actions de la cloche) */
.notif-gear {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
}
.notif-gear:hover { color: var(--accent); }

/* Modale de reglages de notif (types push + notif par agent) */
.notif-settings-overlay .modal { max-width: 560px; width: 100%; }
.notif-set-section { padding: 0.2rem 0; }
.notif-set-section + .notif-set-section { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.notif-set-h { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.5rem; }
.notif-set-sub { font-weight: 600; font-size: 0.85rem; margin-top: 0.9rem; }
.notif-set-device { margin-bottom: 0.4rem; }
.notif-set-types { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; }
.notif-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.4rem 0.1rem;
  cursor: pointer;
}
.notif-set-row-label { font-size: 0.88rem; flex: 1; }
/* Colonne WhatsApp (relais opt-in) : entete alignee sur les deux toggles de chaque ligne */
.notif-set-cols {
  display: flex;
  justify-content: flex-end;
  gap: 1.1rem;
  padding: 0.2rem 0.1rem 0;
  font-size: 0.72rem;
  color: var(--text-muted, #888);
}
.notif-set-cols span { width: 44px; text-align: center; }
.notif-set-row .toggle-switch + .toggle-switch { margin-left: 1.1rem; }
.notif-set-wa-hint { margin-bottom: 0.2rem; }
/* Briefing matinal : rang separe sous les types (toggle + heure) */
.notif-set-brief { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.notif-set-brief .notif-set-row { cursor: default; }
.notif-set-brief-time { width: auto; min-width: 92px; }
/* Plateforme > Numeros : ligne du numero WhatsApp de Léon (reserve, verrouille) */
.pf-number-whatsapp { background: color-mix(in srgb, #25d366 6%, transparent); }
.pf-wa-badge { color: #1da851; }
.notif-set-agents { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.notif-set-agent {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.notif-set-face {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-secondary);
}
.notif-set-agent-info { flex: 1; min-width: 0; }
.notif-set-agent-name { font-weight: 600; font-size: 0.9rem; }
.notif-set-agent-desc {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
  margin-top: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-set-agent-cad {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  color: var(--text-muted);
}
.notif-set-agent-cad.is-busy { color: var(--warning, #b26a00); font-weight: 600; }
.notif-set-empty { color: var(--text-muted); font-size: 0.85rem; padding: 0.6rem 0.2rem; }

/* ============================================================
   Aide (bouton "?" topbar). Meme habillage que la cloche : aide contextuelle
   de la page (ouvre Léon) + contacts du support plateforme.
   ============================================================ */
.help { position: relative; }
.help-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  position: relative;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--accent);
}
.help-btn:hover { background: var(--bg-input); color: var(--accent); }
/* Attire l'oeil vers le support : petit "ping" de l'icone toutes les 5s + halo qui se propage. */
.help-btn i { display: inline-flex; animation: helpPing 5s ease-in-out infinite; }
.help-btn::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: helpHalo 5s ease-out infinite;
}
.help-btn:hover::after, .help-btn:hover i { animation: none; }
@keyframes helpPing {
  0%, 84%, 100% { transform: scale(1); }
  88% { transform: scale(1.2); }
  92% { transform: scale(0.92); }
  96% { transform: scale(1.08); }
}
@keyframes helpHalo {
  0%, 84% { transform: scale(0.7); opacity: 0; }
  86% { opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}
.help-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 300px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  overflow: hidden;
}

/* Mobile : les panneaux cloche/aide, minuscules dropdowns colles a droite, deviennent des feuilles
   pleine largeur ancrees SOUS la topbar (top = hauteur de la topbar par palier). Plus lisibles, plus
   de debordement hors ecran. */
@media (max-width: 560px) {
  .notif-panel, .help-panel {
    position: fixed;
    top: 64px; left: 0; right: 0;
    width: auto; max-width: none;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    border-radius: 0;
    border-left: 0; border-right: 0;
    z-index: 60;
  }
}
@media (max-width: 480px) {
  .notif-panel, .help-panel { top: 56px; max-height: calc(100vh - 56px); }
}
@media (max-width: 380px) {
  .notif-panel, .help-panel { top: 50px; max-height: calc(100vh - 50px); }
}

/* ---- Mega-recherche (loupe topbar / Ctrl+K) : overlay PLEIN ECRAN, champ en haut,
   resultats groupes en dessous (collaborateurs, taches, documents, pages). ---- */
.msearch-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;                 /* au-dessus des modales (9999) : c'est une surcouche globale */
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.msearch-overlay.is-hidden { display: none; }
.msearch-top { padding: 26px 16px 10px; }
.msearch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md, 0 12px 34px rgba(20, 20, 40, 0.12));
}
.msearch-bar-icon { color: var(--accent); font-size: 20px; flex: 0 0 auto; }
.msearch-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 17px;
  padding: 14px 0;
}
.msearch-bar input::-webkit-search-cancel-button { display: none; }
.msearch-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.msearch-close:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); color: var(--text-primary); }
.msearch-results {
  flex: 1;
  overflow-y: auto;
  padding: 6px 16px 40px;
}
.msearch-hint {
  max-width: 720px;
  margin: 22px auto 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.msearch-group { max-width: 720px; margin: 18px auto 0; }
.msearch-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 4px 6px;
}
.msearch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease;
}
.msearch-item:hover, .msearch-item:focus-visible { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.msearch-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 18px;
}
.msearch-item-img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center top;
  flex: 0 0 auto;
  background: var(--bg-secondary);
}
.msearch-item-txt { display: flex; flex-direction: column; min-width: 0; }
.msearch-item-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msearch-item-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .msearch-top { padding-top: 14px; }
  .msearch-bar input { font-size: 16px; padding: 11px 0; }
}

.help-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.9rem;
}
.help-sec { padding: 0.7rem 0.8rem; }
.help-sec + .help-sec { border-top: 1px solid var(--border); }
.help-sec-t {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.help-sec-sub { margin: 0.15rem 0 0.55rem; color: var(--text-secondary); font-size: 0.82rem; line-height: 1.4; }
.help-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}
.help-item + .help-item { margin-top: 0.4rem; }
.help-item i { font-size: 1.05rem; flex: none; color: var(--text-secondary); }
.help-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-item:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.help-item:hover:not(:disabled) i { color: var(--accent); }
.help-item--accent { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.help-item--accent i { color: var(--accent); }
.help-item--soon { opacity: 0.7; cursor: default; }
.help-soon {
  margin-left: auto;
  flex: none;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 600;
}

/* ============================================================
   Helpdesk : chat support plateforme (fenetre flottante, bouton "?")
   Bulles/composer = classes du chat Leon (.soclai-ai-*), coque ici.
   ============================================================ */
.helpdesk-window {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 360px;
  max-width: calc(100vw - 2rem);
  height: 500px;
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 220;
  overflow: hidden;
  --agent-accent: var(--accent);
}
.helpdesk-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.helpdesk-header-icon { font-size: 1.15rem; color: var(--accent); flex: none; }
.helpdesk-header-t { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.helpdesk-title { font-weight: 600; font-size: 0.9rem; }
.helpdesk-status { font-size: 0.72rem; color: var(--text-muted); }
.helpdesk-hbtn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.05rem;
  color: var(--text-secondary);
  flex: none;
}
.helpdesk-hbtn:hover { background: var(--bg-input); color: var(--text-primary); }
.helpdesk-messages { flex: 1; padding: 0.8rem; }
.helpdesk-msg-from {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.helpdesk-msg-body { white-space: pre-wrap; }
.soclai-ai-msg.is-pending { opacity: 0.6; }
.helpdesk-sys {
  align-self: center;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0.15rem 0.6rem;
}
.helpdesk-input { flex: none; margin: 0.55rem; }
.helpdesk-end {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.helpdesk-end:hover { color: var(--danger, #c0392b); border-color: var(--danger, #c0392b); }
.helpdesk-threads { flex: 1; overflow-y: auto; padding: 0.8rem; }
.helpdesk-threads-empty { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 1.2rem 0; }
.helpdesk-thread {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}
.helpdesk-thread + .helpdesk-thread { margin-top: 0.4rem; }
.helpdesk-thread:hover { border-color: var(--accent); }
.helpdesk-thread-status {
  flex: none;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
}
.helpdesk-thread-status.is-open { color: var(--accent); border-color: var(--accent); }
.helpdesk-thread-date { color: var(--text-secondary); font-size: 0.75rem; }

/* ============================================================
   Applications : cartes /applications + wizard agent support client
   ============================================================ */

/* Cartes : foot sur une ligne (CTA a gauche, duree a droite). */
.agent-card--app .agent-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.agent-card-cta { color: var(--accent); font-weight: 600; }
.agent-card-cta i { vertical-align: -2px; margin-right: 2px; }

/* Largeurs des modales du wizard. Hauteur FIXE : la modale ne saute pas d'une etape a
   l'autre, le contenu scrolle dans le body si besoin. */
#appSupportModal .modal { max-width: 720px; height: min(720px, 90vh); }
/* Plus d'air en haut du modal support (look aere des maquettes). */
#appSupportModal .modal-body { flex: 1; padding-top: 2.2rem; }
#appSiteModal .modal { max-width: 1060px; width: 95%; }
/* Overlay d'une modale EMPILEE sur un wizard (numero, test, site, WhatsApp...) : voile sombre
   un peu plus leger que le voile de base, pour bien detacher la modale du wizard SANS trop
   assombrir (il se cumule avec le voile du wizard en dessous). */
.app-overlay-nested { background: rgba(0, 0, 0, 0.36); }

/* Stepper du wizard : etapes cliquables en haut de la modale, connecteur entre les dots.
   Etats (is-active / is-done / is-locked) poses par applications.js. */
.app-stepper { display: flex; align-items: flex-start; padding: 1.1rem 1.5rem 0; }
.app-stepper-step { position: relative; flex: 1; min-width: 0; display: flex;
  flex-direction: column; align-items: center; gap: 0.35rem; padding: 0;
  background: none; border: none; font: inherit; color: var(--text-muted); cursor: pointer; }
.app-stepper-step + .app-stepper-step::before { content: ''; position: absolute; top: 14px;
  left: calc(-50% + 21px); right: calc(50% + 21px); height: 2px; background: var(--border);
  transition: var(--transition); }
.app-stepper-dot { position: relative; z-index: 1; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  font-size: 0.85rem; font-weight: 600; background: var(--bg-secondary);
  border: 1px solid var(--border); transition: var(--transition); }
.app-stepper-dot i { display: none; }
.app-stepper-label { max-width: 100%; font-size: 0.78rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-stepper-step:not(.is-locked):hover .app-stepper-dot {
  border-color: var(--accent); color: var(--accent); }
.app-stepper-step.is-active { color: var(--text-primary); }
.app-stepper-step.is-active .app-stepper-dot { background: var(--accent);
  border-color: var(--accent); color: #fff; }
.app-stepper-step.is-done .app-stepper-dot { background: var(--accent-soft);
  border-color: var(--accent); color: var(--accent); }
.app-stepper-step.is-done .app-stepper-dot span { display: none; }
.app-stepper-step.is-done .app-stepper-dot i { display: block; }
.app-stepper-step.is-done::before, .app-stepper-step.is-active::before { background: var(--accent); }
.app-stepper-step.is-locked { cursor: not-allowed; opacity: 0.45; }

/* Etapes : entete (icone + titre) avec separateur. */
.app-step .comm-gen-head {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.2rem;
}
.app-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.app-instr { line-height: 1.5; }

/* Step 1 : avatar. */
.app-avatar-row { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.app-avatar {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.6rem;
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.app-avatar.has-img { color: transparent; }
.app-avatar.is-drag { box-shadow: 0 0 0 2px var(--accent); outline: 2px dashed var(--accent); outline-offset: 2px; }
.app-avatar-up {
  position: absolute; right: -2px; bottom: -2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--text-primary); color: #fff;
  border: 2px solid var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.68rem;
}
.app-avatar-or { color: var(--text-muted); font-size: 0.85rem; }
.app-pop-wrap { position: relative; }
.app-avatar-menu, .app-integ-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  z-index: 30;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.app-avatar-menu {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem;
  width: 220px; padding: 0.5rem;
}
.app-avatar-opt {
  width: 46px; height: 46px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.app-avatar-opt:hover { border-color: var(--accent); color: var(--accent); }

/* Step 2 : integrations. */
.app-integ-menu { width: 280px; padding: 0.4rem; }
.app-integ-search {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.3rem;
}
.app-integ-search input {
  border: none; outline: none; background: none;
  font: inherit; flex: 1; color: var(--text-primary);
}
.app-integ-item {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; text-align: left;
  padding: 0.55rem 0.6rem;
  border: none; background: none;
  border-radius: 8px; cursor: pointer;
  font: inherit; color: var(--text-primary);
}
.app-integ-item:hover { background: var(--bg-card-hover); }
.app-integ-results { max-height: 244px; overflow-y: auto; }
/* Logo d'une app (catalogue d'integrations) : image sur fond clair, repli initiale. */
.app-integ-logo, .app-chip-logo {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--bg-input);
  border-radius: 5px;
  color: var(--text-secondary);
  font-size: 0.7rem; font-weight: 600;
  overflow: hidden;
}
.app-integ-logo { width: 22px; height: 22px; }
.app-chip-logo { width: 16px; height: 16px; border-radius: 4px; font-size: 0.62rem; }
.app-integ-logo img, .app-chip-logo img { width: 100%; height: 100%; object-fit: contain; }
.app-integ-loading { display: flex; justify-content: center; padding: 1.1rem; color: var(--text-muted); }
.app-integ-loading i { animation: appSpin 0.8s linear infinite; font-size: 1.2rem; }
@keyframes appSpin { to { transform: rotate(360deg); } }
.app-integ-noresult { padding: 0.9rem 0.6rem; text-align: center; color: var(--text-muted); font-size: 0.84rem; }
.app-integ-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.app-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.4rem 0.35rem 0.7rem;
  background: var(--bg-input);
  border-radius: var(--radius-pill);
  font-size: 0.82rem; color: var(--text-secondary);
}
.app-chip-x {
  border: none; background: none; cursor: pointer;
  color: var(--text-muted);
  display: flex; padding: 2px; border-radius: 50%;
}
.app-chip-x:hover { color: var(--danger); }

/* Step 2 : depot de documents. */
.app-drop {
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius);
  padding: 1.6rem 1rem;
  text-align: center; cursor: pointer;
  transition: var(--transition);
}
.app-drop:hover, .app-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.app-drop > i { font-size: 1.5rem; color: var(--text-muted); }
.app-drop-main { margin: 0.5rem 0 0.3rem; color: var(--text-secondary); font-size: 0.9rem; }
.app-drop-link { color: var(--accent); font-weight: 600; }
.app-drop-hint { font-size: 0.78rem; color: var(--text-muted); margin: 0.15rem 0 0; }
.app-doc-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.app-doc {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: var(--bg-input);
  border-radius: 8px; font-size: 0.85rem;
}
.app-doc i { color: var(--text-muted); }
.app-doc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-doc-pick-btn { margin-top: 0.6rem; }
.app-doc-x { border: none; background: none; cursor: pointer; color: var(--text-muted); display: flex; }
.app-doc-x:hover { color: var(--danger); }

/* Step 3 : options de fin de conversation. */
.app-opt {
  background: var(--bg-input);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-top: 0.6rem;
}
.app-opt-head {
  display: flex; align-items: center; gap: 0.7rem;
  cursor: pointer; font-size: 0.92rem; color: var(--text-primary);
}
/* Checkbox CSS custom (boite sombre + check blanc), coherent avec la plateforme. */
.app-checkbox { position: relative; display: inline-flex; flex-shrink: 0; }
.app-checkbox input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.app-checkbox-box {
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--border-light);
  background: var(--bg-card);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.app-checkbox-box i { font-size: 0.85rem; opacity: 0; transform: scale(0.5); transition: opacity 0.12s, transform 0.12s; }
.app-checkbox input:checked + .app-checkbox-box { background: var(--text-primary); border-color: var(--text-primary); }
.app-checkbox input:checked + .app-checkbox-box i { opacity: 1; transform: scale(1); }
.app-checkbox input:focus-visible + .app-checkbox-box { box-shadow: 0 0 0 3px var(--accent-glow); }
.app-opt-extra { margin-top: 0.85rem; padding-left: 2rem; }

/* Step 4 : connexions. */
.app-conn {
  display: flex; align-items: center; gap: 0.9rem;
  width: 100%; text-align: left;
  padding: 0.9rem 1.1rem;
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer; font: inherit; color: var(--text-primary);
  margin-top: 0.7rem;
  transition: var(--transition);
}
.app-conn:hover { border-color: var(--accent); background: var(--accent-soft); }
.app-conn-ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--text-secondary); flex-shrink: 0;
}
.app-conn-ic--wa { color: #25d366; }
.app-conn-label { flex: 1; font-weight: 500; }
.app-conn-add { color: var(--text-muted); font-size: 1.3rem; }
.app-conn:hover .app-conn-add { color: var(--accent); }

/* Modale connexion site : apercu (gauche) + config (droite). */
.app-site-body { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.app-site-preview {
  background: var(--bg-secondary);
  padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  border-right: 1px solid var(--border);
}
.app-preview-badge {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem; color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}
.app-site-config { padding: 1.4rem; overflow-y: auto; }

/* Apercu du widget de chat. */
.app-chat {
  width: 100%; max-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.app-chat-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); }
.app-chat-av {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
  background-size: cover; background-position: center;
}
.app-chat-av.has-img { color: transparent; }
.app-chat-name { display: block; font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.app-chat-status { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--text-muted); }
.app-chat-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; }
.app-chat-scroll { padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 230px; }
.app-chat-date { align-self: center; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.app-chat-msg {
  max-width: 85%;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  font-size: 0.85rem; line-height: 1.4;
  word-wrap: break-word; white-space: pre-wrap;
}
.app-chat-msg--bot { align-self: flex-start; background: var(--bg-input); color: var(--text-primary); border-bottom-left-radius: 4px; }
.app-chat-msg--user { align-self: flex-end; background: #1d1d1e; color: #fff; border-bottom-right-radius: 4px; }
.app-chat-typing {
  align-self: flex-start;
  display: flex; gap: 3px;
  padding: 0.65rem 0.7rem;
  background: var(--bg-input);
  border-radius: 14px; border-bottom-left-radius: 4px;
}
/* Cible UNIQUEMENT les 3 points animes (enfants directs), pas le soclai-thinker ni ses spans internes. */
.app-chat-typing > span:not(.soclai-thinker) { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: appTyping 1.2s infinite; }
.app-chat-typing > span:not(.soclai-thinker):nth-child(2) { animation-delay: 0.2s; }
.app-chat-typing > span:not(.soclai-thinker):nth-child(3) { animation-delay: 0.4s; }
@keyframes appTyping { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.app-chat-typing { align-items: center; }

/* Loader "vivant" (soclai-thinker.js) : glyphe braille qui tourne + phrase + temps ecoule. */
.soclai-thinker { display: inline-flex; align-items: baseline; gap: 8px; font-size: 0.85rem; color: var(--text-secondary); }
.soclai-thinker-glyph {
  color: var(--accent); font-weight: 700; font-size: 1.05em;
  width: 1.1em; text-align: center; flex: none; line-height: 1;
}
.soclai-thinker-text { color: var(--text-secondary); }
.soclai-thinker-time { color: var(--text-muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.soclai-thinker-time:empty { display: none; }
.soclai-thinker-note { color: var(--text-muted); font-size: 0.72rem; font-style: italic; }
.soclai-thinker-note:empty { display: none; }
.soclai-thinker-note::before { content: "·"; margin: 0 0.35rem; font-style: normal; }
.app-chat-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; border-top: 1px solid var(--border); }
.app-chat-input-ph { flex: 1; color: var(--text-muted); font-size: 0.85rem; }
.app-chat-send {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: #1d1d1e; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.app-chat-send:disabled { opacity: 0.5; cursor: default; }

/* Modale "Tester l'agent" : le meme chat que l'apercu, branche sur le vrai runtime. */
.app-test-chat-modal { width: 440px; max-width: 92vw; }
.phone-conv-audio { width: 100%; height: 38px; margin-bottom: 12px; }
.app-chat--test { max-width: none; }
.app-test-scroll { min-height: 300px; max-height: 50vh; overflow-y: auto; }
.app-chat-input-field {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 0.85rem; color: var(--text-primary);
}
.app-chat-input-field::placeholder { color: var(--text-muted); }
.app-test-ended { align-self: center; font-size: 0.75rem; color: var(--text-muted); padding: 0.3rem 0; }

/* Code d'integration du widget (modale apparence). */
.app-embed-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.78rem; resize: none; }
.app-embed-copy { margin-top: 0.5rem; }

/* Champ couleur + ligne toggle. */
.app-color-field { display: flex; align-items: center; gap: 0.6rem; }
.app-color-field input[type="color"] {
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: none; cursor: pointer;
}
.app-color-field input[type="text"] { flex: 1; }
.app-switch-row {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: 1.2rem;
  font-size: 0.9rem; color: var(--text-secondary); cursor: pointer;
}

/* Simulation login WhatsApp Business (factice). */
.app-wa-modal { max-width: 420px; }
.app-wa-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem; color: var(--text-secondary);
}
.app-wa-bar > i { color: #1877f2; font-size: 1.1rem; }
.app-wa-x { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 1.1rem; display: flex; }
.app-wa-body { padding: 1.6rem 1.4rem; text-align: center; }
.app-wa-ic {
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, #25d366 14%, transparent);
  color: #25d366;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 0.8rem;
}
.app-wa-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--text-primary); }
.app-wa-text { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 1.2rem; }
.app-wa-actions { display: flex; justify-content: center; gap: 0.6rem; }

@media (max-width: 860px) {
  .app-site-body { grid-template-columns: 1fr; }
  .app-site-preview { border-right: none; border-bottom: 1px solid var(--border); }
  .app-row { grid-template-columns: 1fr; }
  .app-stepper { padding: 0.9rem 1rem 0; }
  .app-stepper-label { display: none; }
  .app-stepper-step + .app-stepper-step::before { left: calc(-50% + 18px); right: calc(50% + 18px); }
}

/* ============================================================
   Applications : wizard agent de standard telephonique
   ============================================================ */
#appPhoneModal .modal { max-width: 720px; }
.app-row-mt { margin-top: 0.2rem; }
.app-help-row { margin-top: 0.7rem; }

/* Faux select (numero de telephone) : declenche une modale d'ajout. */
.app-select { position: relative; }
.app-select-btn {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit; color: var(--text-primary);
  cursor: pointer; text-align: left;
}
.app-select-btn > i { margin-left: auto; color: var(--text-muted); }
.app-select-val { display: flex; align-items: center; gap: 0.45rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-select-val:not(:has(img)) { color: var(--text-muted); }
.app-select-flag { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; flex-shrink: 0; }
.app-select-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 30;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.3rem;
}
.app-select-add, .app-select-opt {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; text-align: left;
  padding: 0.6rem 0.6rem;
  border: none; background: none;
  border-radius: 8px; cursor: pointer;
  font: inherit; color: var(--text-primary);
}
.app-select-add { color: var(--text-secondary); }
.app-select-add:hover, .app-select-opt:hover { background: var(--bg-card-hover); }
.app-select-add i { font-size: 1.1rem; }

/* Radios "comportement d'accueil". */
.app-radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.app-radio {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit; color: var(--text-primary);
  cursor: pointer; text-align: left;
  transition: var(--transition);
}
.app-radio-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-light);
  flex-shrink: 0; position: relative;
  transition: var(--transition);
}
.app-radio.is-active { border-color: var(--text-primary); }
.app-radio.is-active .app-radio-dot { border-color: var(--text-primary); background: var(--text-primary); }
.app-radio.is-active .app-radio-dot::after {
  content: ''; position: absolute; inset: 0;
  margin: auto; width: 7px; height: 7px;
  border-radius: 50%; background: #fff;
}
.app-greet-msg.is-hidden { display: none; }

/* Segmented control (onglets de la modale numero). */
.app-seg {
  display: inline-flex;
  background: var(--bg-input);
  border-radius: var(--radius-pill);
  padding: 0.25rem;
  gap: 0.25rem;
}
.app-seg-btn {
  border: none; background: none;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  font: inherit; font-size: 0.85rem;
  color: var(--text-secondary); cursor: pointer;
}
.app-seg-btn.is-active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm); font-weight: 500; }

/* Champ telephone avec drapeau + prefixe. */
.app-phone-field {
  display: flex; align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.app-phone-flag {
  display: flex; align-items: center; gap: 0.2rem;
  padding: 0 0.5rem 0 0.7rem;
  align-self: stretch;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
}
.app-phone-flag img { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; }
.app-phone-prefix { padding: 0 0.4rem 0 0.6rem; color: var(--text-secondary); font-size: 0.9rem; }
.app-phone-input {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  font: inherit; color: var(--text-primary);
  padding: 0.65rem 0.6rem 0.65rem 0;
}

/* Encadre info. */
.app-info-box {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.84rem; color: var(--accent);
  background: var(--accent-soft);
}
.app-info-box i { margin-top: 1px; }

/* Modale numero + attribution. */
.app-num-modal { max-width: 480px; }
.app-num-done { text-align: center; }
.app-num-done-sub { color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1rem; }
.app-num-big {
  font-size: 1.5rem; font-weight: 600; letter-spacing: 0.5px;
  color: var(--text-primary);
  background: var(--bg-input);
  border-radius: var(--radius);
  padding: 1rem; text-align: center;
}

/* Modale de test. */
.app-test-modal { max-width: 460px; }
.app-test-sub { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; margin: 0 0 1rem; }
.app-test-compose { color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 0.7rem; }
.app-test-num {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--bg-input);
  border-radius: var(--radius);
  font-size: 1.1rem; font-weight: 600; color: var(--text-primary);
}
.app-test-num i { color: var(--accent); }
.app-test-none { color: var(--text-muted); font-size: 0.88rem; margin: 0; }

/* Step 3 : tags de qualification. */
/* Tags de qualification : une CARTE par tag (badge colore editable + critere "quand l'appliquer"),
   empilees verticalement. Le badge reutilise .app-tag / .app-tag--<couleur>. */
.app-tags { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.app-tag-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 0.7rem 0.8rem;
}
.app-tag-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; }
.app-tag-crit { width: 100%; resize: none; font-size: 0.88rem; }
.app-tags .app-tag-add { align-self: flex-start; }   /* en colonne : le bouton ne s'etire pas */
.app-tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem; font-weight: 500;
}
.app-tag-text { outline: none; }
.app-tag-text[contenteditable="true"] { min-width: 30px; }
.app-tag-edit, .app-tag-del {
  border: none; background: none; cursor: pointer;
  color: currentColor; opacity: 0.65;
  display: flex; padding: 1px; font-size: 0.9rem;
}
.app-tag-edit:hover, .app-tag-del:hover { opacity: 1; }
.app-tag--green  { background: #e4f4e8; color: #2f7a47; }
.app-tag--red    { background: #fbe4e6; color: #c2434a; }
.app-tag--orange { background: #fdf0dd; color: #b9772a; }
.app-tag--violet { background: #ece9fb; color: #5b4fcf; }
.app-tag--grey   { background: var(--bg-input); color: var(--text-secondary); }
.app-tag-add {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-pill);
  font: inherit; font-size: 0.85rem; color: var(--text-secondary);
  cursor: pointer;
}
.app-tag-add:hover { border-color: var(--accent); color: var(--accent); }
.app-tag-add i { font-size: 1rem; }

/* Step 4 : conditions de transfert. */
.app-tr-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 0.8rem;
}
.app-tr-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.app-tr-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.app-tr-del {
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.3rem;
  color: var(--text-muted); font: inherit; font-size: 0.85rem;
}
.app-tr-del:hover { color: var(--danger); }
.app-tr-body { padding: 1rem; }
.app-tr-slots { margin-top: 1rem; }
.app-tr-addbtn { margin-top: 0.2rem; }

/* Dossier dans le contexte IA : pastille cerveau (workspace Documents) */
.docs-folder.is-in-context { position: relative; box-shadow: inset 0 0 0 1.5px var(--accent-light); }
.docs-folder-ctx { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-size: .8rem; pointer-events: none; }
/* Dossier de reference d'un collaborateur (systeme, non supprimable) : tete de l'agent a la place
   de l'icone dossier + pastille cadenas, teinte a la couleur de l'agent (agent-tint--<slug>). */
.docs-folder-syslock { position: absolute; bottom: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border);
  font-size: .74rem; pointer-events: none; }
.docs-folder-icon--agent { width: 42px; height: 42px; border-radius: 50%; overflow: visible; font-size: 0;
  border: 2px solid var(--agent-accent, var(--accent));
  background: color-mix(in srgb, var(--agent-accent, var(--accent)) 14%, var(--bg-input)); }
.docs-folder-agent-av { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top center; display: block; }
.docs-folder-agent-lock { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: .58rem;
  background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); pointer-events: none; }
.docs-folder.is-system { border-color: color-mix(in srgb, var(--agent-accent, var(--accent)) 38%, var(--border)); }

/* Resume IA d'un document (modale "ce que l'IA voit") */
.doc-summary-text { white-space: pre-wrap; line-height: 1.6; color: var(--text-primary); margin: 0; }

/* Documents : upload par glisser-deposer (overlay sur le workspace) + tuile Uploader */
/* Le workspace remplit toute la hauteur de page (meme vide / sans dossier) pour que la
   dropzone (inset:0) couvre jusqu'en bas : on peut deposer un fichier n'importe ou. */
.main-content:has(.docs-workspace) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.main-content:has(.docs-workspace) .page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.docs-workspace { position: relative; flex: 1; display: flex; flex-direction: column; }
.docs-dropzone { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-primary)); border: 2px dashed var(--accent);
  border-radius: var(--radius); pointer-events: none; }
.docs-workspace.is-dropping .docs-dropzone { display: flex; }
.docs-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--accent); font-weight: 600; font-size: 1.05rem; }
.docs-dropzone-inner > i { font-size: 2.6rem; }

/* Spinner reutilisable (bouton occupe, bannieres) */
.soclai-spin { display: inline-block; animation: comm-spin .8s linear infinite; }
.btn.is-busy { opacity: .85; cursor: progress; }

/* Amorce /support-inbox quand aucun chatbot : hero centre + carte de creation. */
.support-empty { max-width: 600px; margin: 3.5rem auto; display: flex; flex-direction: column;
  gap: 1.75rem; }
.support-empty-head { text-align: center; }
.support-empty-head h2 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.support-empty-head p { margin: 0; color: var(--text-muted); line-height: 1.55; }
.support-empty .agent-card { width: 100%; }

/* Cartes chatbots (/support-inbox, onglet Chatbots) : agent-card teintee par la couleur du
   widget (--agent-accent posee en JS depuis data-bot-color, CSP sans style inline) ;
   visuel = avatar choisi dans le wizard (image ronde ou icone). */
.agent-card--bot { position: relative; }
.agent-card--bot .agent-card-visual {
  align-items: center;
  background-color: color-mix(in srgb, var(--agent-accent) 32%, var(--bg-secondary)); }
.agent-card--bot .agent-card-visual > i { position: relative; z-index: 1; font-size: 2.8rem;
  color: #fff; filter: drop-shadow(0 3px 8px rgba(20, 20, 40, 0.3)); }
.agent-card--bot .agent-card-visual img { width: 78px; height: 78px; max-width: none;
  border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(20, 20, 40, 0.25); }
.agent-card--bot .agent-card-name { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.support-bot-meta { display: flex; flex-direction: column; gap: 0.3rem; }

/* ============================================
   Fond personnalisable de l'app (.main-content). Tout en classes (CSP : aucun style inline).
   Images = ambiance en filigrane (overlay blanc dose par --app-veil-pct, pose par .app-veil--N) ;
   teintes = aplat doux. Cascade defaut societe -> override user resolue cote PHP (app-background.php).
   ============================================ */
.main-content[class*="app-bg--bg"] {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.main-content { --app-veil-pct: 80; --app-tint-mix: 20%; }
.main-content.app-bg--bg1 { background-image: linear-gradient(rgba(255,255,255,calc(var(--app-veil-pct,80)/100)), rgba(255,255,255,calc(var(--app-veil-pct,80)/100))), url("/assets/img/backgrounds/bg1.webp"); }
.main-content.app-bg--bg2 { background-image: linear-gradient(rgba(255,255,255,calc(var(--app-veil-pct,80)/100)), rgba(255,255,255,calc(var(--app-veil-pct,80)/100))), url("/assets/img/backgrounds/bg2.webp"); }
.main-content.app-bg--bg3 { background-image: linear-gradient(rgba(255,255,255,calc(var(--app-veil-pct,80)/100)), rgba(255,255,255,calc(var(--app-veil-pct,80)/100))), url("/assets/img/backgrounds/bg3.webp"); }
.main-content.app-bg--bg4 { background-image: linear-gradient(rgba(255,255,255,calc(var(--app-veil-pct,80)/100)), rgba(255,255,255,calc(var(--app-veil-pct,80)/100))), url("/assets/img/backgrounds/bg4.webp"); }
.main-content.app-bg--bg5 { background-image: linear-gradient(rgba(255,255,255,calc(var(--app-veil-pct,80)/100)), rgba(255,255,255,calc(var(--app-veil-pct,80)/100))), url("/assets/img/backgrounds/bg5.webp"); }

/* Intensite : une seule variable --app-veil-pct = VOILE (% de blanc) portee par .app-veil--N.
   Images -> alpha du voile = pct/100 ; teintes -> force --app-tint-mix = (100-pct)% (= force
   percue). Voile haut = fond subtil. Legacy au pas de 5 hors zone (0-75, valeurs bridees au
   plafond a la lecture), puis pas de 1 dans la zone utile (force 0-20 = voile 80-100). */
.main-content.app-veil--0   { --app-veil-pct: 0;   --app-tint-mix: 100%; }
.main-content.app-veil--5   { --app-veil-pct: 5;   --app-tint-mix: 95%; }
.main-content.app-veil--10  { --app-veil-pct: 10;  --app-tint-mix: 90%; }
.main-content.app-veil--15  { --app-veil-pct: 15;  --app-tint-mix: 85%; }
.main-content.app-veil--20  { --app-veil-pct: 20;  --app-tint-mix: 80%; }
.main-content.app-veil--25  { --app-veil-pct: 25;  --app-tint-mix: 75%; }
.main-content.app-veil--30  { --app-veil-pct: 30;  --app-tint-mix: 70%; }
.main-content.app-veil--35  { --app-veil-pct: 35;  --app-tint-mix: 65%; }
.main-content.app-veil--40  { --app-veil-pct: 40;  --app-tint-mix: 60%; }
.main-content.app-veil--45  { --app-veil-pct: 45;  --app-tint-mix: 55%; }
.main-content.app-veil--50  { --app-veil-pct: 50;  --app-tint-mix: 50%; }
.main-content.app-veil--55  { --app-veil-pct: 55;  --app-tint-mix: 45%; }
.main-content.app-veil--60  { --app-veil-pct: 60;  --app-tint-mix: 40%; }
.main-content.app-veil--65  { --app-veil-pct: 65;  --app-tint-mix: 35%; }
.main-content.app-veil--70  { --app-veil-pct: 70;  --app-tint-mix: 30%; }
.main-content.app-veil--75  { --app-veil-pct: 75;  --app-tint-mix: 25%; }
/* Zone utile (force percue 0-20) au pas de 1 : voile 80 -> 100. */
.main-content.app-veil--80  { --app-veil-pct: 80;  --app-tint-mix: 20%; }
.main-content.app-veil--81  { --app-veil-pct: 81;  --app-tint-mix: 19%; }
.main-content.app-veil--82  { --app-veil-pct: 82;  --app-tint-mix: 18%; }
.main-content.app-veil--83  { --app-veil-pct: 83;  --app-tint-mix: 17%; }
.main-content.app-veil--84  { --app-veil-pct: 84;  --app-tint-mix: 16%; }
.main-content.app-veil--85  { --app-veil-pct: 85;  --app-tint-mix: 15%; }
.main-content.app-veil--86  { --app-veil-pct: 86;  --app-tint-mix: 14%; }
.main-content.app-veil--87  { --app-veil-pct: 87;  --app-tint-mix: 13%; }
.main-content.app-veil--88  { --app-veil-pct: 88;  --app-tint-mix: 12%; }
.main-content.app-veil--89  { --app-veil-pct: 89;  --app-tint-mix: 11%; }
.main-content.app-veil--90  { --app-veil-pct: 90;  --app-tint-mix: 10%; }
.main-content.app-veil--91  { --app-veil-pct: 91;  --app-tint-mix: 9%; }
.main-content.app-veil--92  { --app-veil-pct: 92;  --app-tint-mix: 8%; }
.main-content.app-veil--93  { --app-veil-pct: 93;  --app-tint-mix: 7%; }
.main-content.app-veil--94  { --app-veil-pct: 94;  --app-tint-mix: 6%; }
.main-content.app-veil--95  { --app-veil-pct: 95;  --app-tint-mix: 5%; }
.main-content.app-veil--96  { --app-veil-pct: 96;  --app-tint-mix: 4%; }
.main-content.app-veil--97  { --app-veil-pct: 97;  --app-tint-mix: 3%; }
.main-content.app-veil--98  { --app-veil-pct: 98;  --app-tint-mix: 2%; }
.main-content.app-veil--99  { --app-veil-pct: 99;  --app-tint-mix: 1%; }
.main-content.app-veil--100 { --app-veil-pct: 100; --app-tint-mix: 0%; }

/* Teintes flat : teinte de base melangee au blanc selon --app-tint-mix (defaut 45% = doux). */
.main-content.app-bg--tint-lavande { background-color: color-mix(in srgb, #b9a9ec var(--app-tint-mix, 45%), #fff); }
.main-content.app-bg--tint-bleu    { background-color: color-mix(in srgb, #a9c6f0 var(--app-tint-mix, 45%), #fff); }
.main-content.app-bg--tint-menthe  { background-color: color-mix(in srgb, #a6e0c6 var(--app-tint-mix, 45%), #fff); }
.main-content.app-bg--tint-sable   { background-color: color-mix(in srgb, #ead9b8 var(--app-tint-mix, 45%), #fff); }
.main-content.app-bg--tint-rose    { background-color: color-mix(in srgb, #f2bcd8 var(--app-tint-mix, 45%), #fff); }
.main-content.app-bg--tint-peche   { background-color: color-mix(in srgb, #f4c4ab var(--app-tint-mix, 45%), #fff); }
.main-content.app-bg--tint-gris    { background-color: color-mix(in srgb, #cfd3da var(--app-tint-mix, 45%), #fff); }
.main-content.app-bg--tint-ardoise { background-color: color-mix(in srgb, #b9c2d2 var(--app-tint-mix, 45%), #fff); }

/* Mobile : fixed est couteux/buggy -> l'image suit le scroll. */
@media (max-width: 768px) {
  .main-content[class*="app-bg--bg"] { background-attachment: scroll; }
}

/* Sous-sections du panneau Apparence (Fond / Couleur d'accent) : separees par un filet leger. */
.appearance-block { margin-bottom: 0; }
.appearance-block + .appearance-block { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-light); }
.appearance-block .form-label { font-size: 0.95rem; font-weight: 600; }

/* Selecteur de fond (profil + settings + plateforme) : tuiles .appbg-grid / .appbg-opt. */
.appbg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 0.7rem; }
.appbg-opt {
  position: relative; height: 78px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-input) center/cover no-repeat; cursor: pointer; overflow: hidden;
  display: flex; align-items: flex-end; padding: 0; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.appbg-opt:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--field-border-hover); }
.appbg-opt.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.appbg-opt-label {
  width: 100%; padding: 0.34rem 0.5rem; font-size: 0.74rem; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.62)); text-align: left; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Tuiles utilitaires "Aucun" / "Defaut societe" / "Importer" : cartes d'action (bordure pointillee). */
.appbg-opt--none, .appbg-opt--inherit, .appbg-opt--custom {
  flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  background: var(--bg-card); border-style: dashed; box-shadow: none; color: var(--text-muted);
}
.appbg-opt--none:hover, .appbg-opt--inherit:hover, .appbg-opt--custom:hover {
  transform: none; box-shadow: none; background: var(--bg-card-hover); border-color: var(--field-border-hover);
}
.appbg-opt--none > i, .appbg-opt--inherit > i, .appbg-opt--custom > i { font-size: 1.4rem; color: var(--text-muted); }
.appbg-opt--none .appbg-opt-label, .appbg-opt--inherit .appbg-opt-label, .appbg-opt--custom .appbg-opt-label {
  width: auto; background: none; color: var(--text-secondary); text-align: center; padding: 0 0.35rem; font-weight: 500;
}

/* Tuile custom avec image : aspect vignette (icone masquee, label en bas, bouton remplacer). */
.appbg-opt--custom { background-size: cover; background-position: center; }
.appbg-opt--custom.has-img { flex-direction: row; align-items: flex-end; border-style: solid; box-shadow: var(--shadow-sm); }
.appbg-opt--custom.has-img > i { display: none; }
.appbg-opt--custom.has-img .appbg-opt-label {
  width: 100%; text-align: left; padding: 0.2rem 0.4rem; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.appbg-custom-edit {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; font-size: 0.8rem;
  background: rgba(0,0,0,.45); color: #fff; cursor: pointer; z-index: 2;
}
.appbg-opt--custom.has-img .appbg-custom-edit { display: flex; }
.appbg-opt--custom.is-loading { opacity: .6; pointer-events: none; }

/* Selecteur de couleur d'accent (profil + settings, cf. accent-picker.php) : pastilles couleur.
   Preview live sur <html> (swap de classe accent--*). La couleur de chaque pastille vit dans une
   classe (.accent-sw--*) car la CSP interdit un background inline. */
.accent-grid { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.accent-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  border: none; background: none; cursor: pointer; padding: 0; width: 56px;
}
.accent-dot {
  width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-light), var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.accent-dot > i { opacity: 0; transform: scale(.4); transition: transform .18s ease, opacity .18s ease; }
.accent-opt:hover .accent-dot { transform: scale(1.1); }
.accent-opt.is-active .accent-dot { box-shadow: 0 0 0 2px var(--accent), var(--shadow-sm); }
.accent-opt.is-active .accent-check { opacity: 1; transform: scale(1); }
.accent-opt-label {
  font-size: 0.72rem; font-weight: 500; color: var(--text-secondary); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56px;
}
.accent-opt.is-active .accent-opt-label { color: var(--text-primary); font-weight: 600; }
/* Tuile "Defaut societe" (user) : pastille neutre + icone (toujours visible). */
.accent-opt--inherit .accent-dot { background: var(--bg-input); color: var(--text-muted); }
.accent-opt--inherit .accent-dot > i { opacity: 1; transform: none; font-size: 1rem; }
/* Couleurs de la palette (CSP : la couleur vit dans une classe, pas en inline). */
.accent-sw--violet   { background: #6d5bd0; }
.accent-sw--indigo   { background: #4763e4; }
.accent-sw--azur     { background: #0ea5e9; }
.accent-sw--emeraude { background: #10b981; }
.accent-sw--teal     { background: #0d9488; }
.accent-sw--orange   { background: #ea580c; }
.accent-sw--rouge    { background: #e5484d; }
.accent-sw--rose     { background: #ec4899; }
.accent-sw--magenta  { background: #a855f7; }
.accent-sw--citron   { background: #ca8a04; }
.accent-sw--noir     { background: #1f2937; }

/* Preferences de push par type (profil) : liste de cases a cocher. */
.notif-prefs { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.3rem; }
.notif-pref-row { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.92rem; }
.notif-pref-row input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex: none; }

/* Intensite : piste 0-100 (remappee non-lineairement vers la force) + paliers cliquables.
   Titre + aide a gauche, badge % en pilule a droite. Le % est editable (double-clic -> input). */
.appbg-veil-wrap { margin-top: 1.2rem; margin-bottom: 0; }
.appbg-veil-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.appbg-veil-head-text { min-width: 0; }
.appbg-veil-head-text .form-help { margin-top: 0.15rem; margin-bottom: 0; }
.appbg-veil-pct {
  flex: none; font-size: 0.82rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums;
  cursor: text; border-radius: var(--radius-pill); padding: 0.28rem 0.75rem;
  background: var(--accent-soft); transition: var(--transition);
}
.appbg-veil-pct:hover { background: var(--accent-glow); }
.appbg-veil-pct-input {
  width: 4rem; font-size: 0.82rem; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; text-align: right;
  border: 1px solid var(--accent); border-radius: var(--radius-pill); padding: 0.24rem 0.5rem;
  background: var(--bg-card);
}
.appbg-veil-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 7px; margin: 1rem 0 0.9rem;
  border-radius: var(--radius-pill); background: var(--border-light); cursor: pointer; outline: none;
  accent-color: var(--accent);
}
.appbg-veil-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg-card); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm);
  cursor: pointer; transition: transform .15s ease;
}
.appbg-veil-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.appbg-veil-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  border: 3px solid var(--bg-card); box-shadow: 0 0 0 1px var(--accent); cursor: pointer;
}
.appbg-veil-range::-moz-range-progress { background: var(--accent); height: 7px; border-radius: var(--radius-pill); }
.appbg-veil-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.appbg-veil-preset {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
  border-radius: var(--radius-pill); padding: 0.4rem 0.95rem; font-size: 0.84rem; font-weight: 500;
  cursor: pointer; transition: var(--transition);
}
.appbg-veil-preset:hover { border-color: var(--field-border-hover); background: var(--bg-card-hover); }
.appbg-veil-preset.is-active { border-color: transparent; color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* Vignettes images du selecteur (fond couvrant ; CSP : url() en classe, pas inline). */
.appbg-opt.appbg-thumb--bg1 { background-image: url("/assets/img/backgrounds/bg1.webp"); }
.appbg-opt.appbg-thumb--bg2 { background-image: url("/assets/img/backgrounds/bg2.webp"); }
.appbg-opt.appbg-thumb--bg3 { background-image: url("/assets/img/backgrounds/bg3.webp"); }
.appbg-opt.appbg-thumb--bg4 { background-image: url("/assets/img/backgrounds/bg4.webp"); }
.appbg-opt.appbg-thumb--bg5 { background-image: url("/assets/img/backgrounds/bg5.webp"); }

/* Pastilles couleurs du selecteur : teinte de base au melange par defaut (45% = apercu doux). */
.appbg-opt.appbg-sw--tint-lavande { background-color: color-mix(in srgb, #b9a9ec 45%, #fff); }
.appbg-opt.appbg-sw--tint-bleu    { background-color: color-mix(in srgb, #a9c6f0 45%, #fff); }
.appbg-opt.appbg-sw--tint-menthe  { background-color: color-mix(in srgb, #a6e0c6 45%, #fff); }
.appbg-opt.appbg-sw--tint-sable   { background-color: color-mix(in srgb, #ead9b8 45%, #fff); }
.appbg-opt.appbg-sw--tint-rose    { background-color: color-mix(in srgb, #f2bcd8 45%, #fff); }
.appbg-opt.appbg-sw--tint-peche   { background-color: color-mix(in srgb, #f4c4ab 45%, #fff); }
.appbg-opt.appbg-sw--tint-gris    { background-color: color-mix(in srgb, #cfd3da 45%, #fff); }
.appbg-opt.appbg-sw--tint-ardoise { background-color: color-mix(in srgb, #b9c2d2 45%, #fff); }
/* Pastilles couleurs : le libelle reste lisible sur fond clair (pas d'overlay sombre). */
.appbg-opt[class*="appbg-sw--"] .appbg-opt-label { background: none; color: var(--text-primary); font-weight: 500; }
.support-bot-meta > span { display: inline-flex; align-items: center; gap: 0.45rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-bot-meta i { color: var(--agent-accent); flex-shrink: 0; }
.agent-card-foot-alert { color: var(--warning); font-weight: 600; }

/* Compteur sur un onglet (ex: demandes a traiter dans /support-inbox). */
.tab-badge { background: var(--warning); color: #fff; border-radius: var(--radius-pill);
  padding: 0.05rem 0.5rem; font-size: 0.75rem; font-weight: 600; }

/* Stat card budget : montants compacts (depense en avant, plafond discret) + barre de
   progression de la conso. Largeur posee en JS depuis data-pct (CSP sans style inline). */
.stat-budget-amounts { font-size: 1.05rem; font-weight: 700; color: var(--text-primary);
  line-height: 1.2; }
.stat-budget-amounts span { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); }
.stat-budget-bar { height: 6px; max-width: 180px; margin: 0.45rem 0 0.1rem;
  border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
.stat-budget-bar > span { display: block; height: 100%; width: 0; min-width: 3px;
  border-radius: inherit; background: var(--accent); transition: width 0.4s ease; }
.stat-budget-bar.is-warn > span { background: var(--warning); }
.stat-budget-bar.is-over > span { background: var(--danger); }
/* Filtre par chatbot au-dessus des tables conversations / demandes. */
.support-toolbar { display: flex; align-items: center; justify-content: flex-end;
  gap: 0.6rem; margin-bottom: 1rem; }
.support-toolbar .form-label { margin: 0; }
.support-toolbar .select-custom { min-width: 230px; }
/* L'icone d'option est ici un avatar de bot, pas un drapeau : rendu rond. */
.support-toolbar .select-custom-flag { width: 20px; height: 20px; border-radius: 50%;
  object-fit: cover; }

/* ============================================
   Barre d'enregistrement flottante (components/save-bar.php, cablee par initSaveBar).
   Apparait quand une section [data-save-group] a des modifs non enregistrees : pilule
   centree en bas, au-dessus de la bande des toasts. Slide-up via .is-visible.
   ============================================ */
.save-bar {
  position: fixed;
  left: 0; right: 0; bottom: 92px;        /* au-dessus de la zone des toasts (bottom 26px) */
  margin: 0 auto;
  width: max-content;
  max-width: min(92vw, 560px);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.55rem 0.65rem 0.55rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  z-index: 3000;                          /* au-dessus du contenu, sous les modals (3999+) */
  opacity: 0;
  transform: translateY(150%);
  pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}
.save-bar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.save-bar-text {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.save-bar-text i { color: var(--accent); font-size: 1.05rem; }
.save-bar-actions { display: inline-flex; align-items: center; gap: 0.4rem; }
@media (max-width: 560px) {
  .save-bar { bottom: 84px; gap: 0.7rem; padding-left: 0.9rem; }
  .save-bar-text { white-space: normal; }
}

/*  Onglets "pilule" (mutualises) : barre + onglet + etat actif. Mises en commun ici car le
   meme motif sert sur 2 barres (run : .arun-tabs / KB : .arun-kb-tabs).
   Les ecarts specifiques (padding, icone, margin, hover/focus) restent dans les fichiers de page. */
.arun-tabs, .arun-kb-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--bg-input);
  border-radius: var(--radius-pill);
}
.arun-tab, .arun-kb-tab {
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
}
.arun-tab.is-active, .arun-kb-tab.is-active {
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

/* ============================================================================
   Palettes d'apparence des agents sur mesure (partagees : editeur /assistant-run
   + cartes /assistants). Accent = --acm-accent ; poster = --acm-poster (degrade).
   Tout en classes (CSP : pas de couleur inline).
   ============================================================================ */
.acm-accent--violet { --acm-accent: #6d5bd0; }
.acm-accent--bleu   { --acm-accent: #2563eb; }
.acm-accent--vert   { --acm-accent: #3aa07a; }
.acm-accent--rose   { --acm-accent: #c2588f; }
.acm-accent--orange { --acm-accent: #d9842f; }
.acm-accent--ambre  { --acm-accent: #b8932f; }
.acm-accent--cyan   { --acm-accent: #0e9aa7; }
.acm-accent--rouge  { --acm-accent: #d05b5b; }

/* Pastille de capacite et badge "pas encore pret" d'un collaborateur. ICI et pas dans
   pages/assistants.css : la scene de recrutement (/recrutement-equipe) rend les memes
   pastilles sans charger cette feuille-la, elles y sortaient nues. */
.acm-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: var(--radius-pill);
    background: var(--bg-input); border: 1px solid var(--border-light);
    color: var(--acm-accent, var(--accent)); font-size: 13px;
}
.acm-draft-badge {
    margin-left: 6px; vertical-align: middle;
    color: var(--warning); background: color-mix(in srgb, var(--warning) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}

.acm-poster--aurore { --acm-poster: linear-gradient(135deg, #6d5bd0 0%, #c2588f 100%); }
.acm-poster--menthe { --acm-poster: linear-gradient(135deg, #3aa07a 0%, #0e9aa7 100%); }
.acm-poster--sable  { --acm-poster: linear-gradient(135deg, #d9842f 0%, #b8932f 100%); }
.acm-poster--nuit   { --acm-poster: linear-gradient(135deg, #2b3a67 0%, #1c2541 100%); }
.acm-poster--brume  { --acm-poster: linear-gradient(135deg, #8a93a6 0%, #5b6477 100%); }

/* ============================================================================
   Barres de quota (monitoring) : profil /profile/conso (perso) + /admin-users
   (budgets societe + conso par employe). Largeur du remplissage posee en JS
   (soclai-quota-meter.js) : la CSP interdit le style inline en HTML.
   ============================================================================ */
.quota-meters { display: flex; flex-direction: column; gap: 16px; }
.quota-meters.is-compact { gap: 8px; min-width: 180px; }

.quota-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.quota-meter-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.quota-meter-label i { color: var(--text-muted); }
.quota-meters.is-compact .quota-meter-label { font-size: 12px; font-weight: 500; }
.quota-meter-value { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.quota-meter-unlim { color: var(--text-muted); font-weight: 500; }
.quota-meter-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; }

.quota-meter-bar { height: 7px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.quota-meters.is-compact .quota-meter-bar { height: 5px; }
.quota-meter-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .5s ease; }
.quota-meter-fill.is-warn { background: #e0a03a; }
.quota-meter-fill.is-danger { background: var(--danger, #d05b5b); }
.quota-meter-bar.is-unlim { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 22%, transparent) 0 6px, transparent 6px 12px); }

.quota-company-card,
.quota-conso-card { margin-bottom: 1.5rem; }
.quota-company-card .card-header { display: flex; align-items: center; justify-content: space-between; }
.quota-company-period { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.quota-company-card .quota-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 28px; }

/* Classement "Consommation par employe" (/admin-users). Barres relatives au max de colonne. */
.quota-rank-card { margin-bottom: 1.5rem; }
.timesaved-card { margin-bottom: 1.5rem; }
.quota-rank-card .card-header { display: flex; align-items: center; justify-content: space-between; }
.table-wrap.is-flush { border: 0; border-radius: 0; background: transparent; margin-top: 4px; }
.rank-table th.rank-th { cursor: pointer; user-select: none; white-space: nowrap; }
.rank-table th.rank-th::after { content: "\2195"; margin-left: 5px; opacity: .35; font-size: 11px; }
.rank-table th.rank-th.is-sort-desc::after { content: "\2193"; opacity: .9; }
.rank-table th.rank-th.is-sort-asc::after { content: "\2191"; opacity: .9; }
.rank-cell { min-width: 120px; vertical-align: middle; }
/* Cellule conso : valeur + barre sur UNE ligne (ligne compacte, meme hauteur que le tableau Users). */
.quota-cell { display: flex; align-items: center; gap: 10px; }
.quota-cell-val { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; min-width: 34px; }
.quota-cell .quota-meter-bar { flex: 1; max-width: 140px; }

/* ---- Temps humain gagne (ROI) : mini bandeau 1 ligne (cockpit agent, /profile/conso, /admin-users) ---- */
.timesaved {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 9px 14px; margin: 10px; margin-bottom: 0; font-size: 13px;
}
.timesaved-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-primary); }
.timesaved-label i { color: var(--accent); font-size: 15px; }
.timesaved-period { font-weight: 500; color: var(--text-muted); font-size: 12px; }
.timesaved-figures { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-left: auto; font-variant-numeric: tabular-nums; }
.timesaved-figures > span:not(:first-child)::before { content: "\00b7"; margin-right: 8px; color: var(--text-muted); font-weight: 400; }
.timesaved-main { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.timesaved-eur { font-weight: 700; color: var(--accent); cursor: help; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.timesaved-acts { color: var(--text-secondary); font-size: 12.5px; }
.timesaved-empty { margin-left: auto; color: var(--text-secondary); font-size: 12.5px; font-style: italic; }
/* Dans une carte (profile/conso, admin-users) : la carte fait deja la boite, on retire le cadre du bandeau. */
.card-body > .timesaved { border: none; border-radius: 0; padding: 0; margin: 0; background: none; }

.timesaved-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--bg-secondary); font-size: 12.5px; color: var(--text-secondary);
}
.timesaved-badge i { color: var(--accent); }
.timesaved-badge-val { font-weight: 700; color: var(--text-primary); }

/* ---- Plateforme : conso societe par canal (vue operateur, onglet Users) ---- */
.platform-conso { margin: 1.25rem 1.5rem; }
.platform-conso-head { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.platform-conso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.platform-conso-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--bg-secondary); }
.platform-conso-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.platform-conso-label i { color: var(--accent); }
.platform-conso-val { font-size: 15px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ---- Ventilation des couts IA (operateur : par usage + par modele) ---- */
.platform-aibd { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--bg-secondary); margin-bottom: 1rem; }
.platform-aibd-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.platform-aibd-head i { color: var(--accent); }
.platform-aibd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.platform-aibd-t { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.platform-aibd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; border-top: 1px solid var(--border); }
.platform-aibd-row:first-of-type { border-top: 0; }
.platform-aibd-k { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-aibd-calls { color: var(--text-muted); font-size: 11px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.platform-aibd-v { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .platform-aibd-cols { grid-template-columns: 1fr; gap: 12px; } }

/* ---- Detail $ operateur (repli sous une barre de quota %) ---- */
.quota-detail { margin-top: 8px; font-size: 12.5px; }
.quota-detail > summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.quota-detail > summary::-webkit-details-marker { display: none; }
.quota-detail > summary::before { content: "\25B8"; font-size: 10px; }
.quota-detail[open] > summary::before { content: "\25BE"; }
.quota-detail-body { margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; background: var(--bg-secondary); }
.quota-detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; color: var(--text-secondary); }
.quota-detail-row + .quota-detail-row { border-top: 1px solid var(--border); }
.quota-detail-row span:last-child { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ============================================================================
   Visite guidee (tour) : overlay + spotlight + bulle Léon + chip de reprise.
   DOM : components/tour.php ; moteur : assets/js/tour.js. Positions dynamiques
   posees en CSSOM (top/left/width/height), le reste vit ici (CSP stricte).
   ============================================================================ */
.tour-shade {
  position: fixed; inset: 0; z-index: 11000;
  background: rgba(10, 12, 24, 0.55);
}
.tour-spot {
  position: fixed; z-index: 11001;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(10, 12, 24, 0.55), 0 0 0 3px var(--accent);
  transition: top .45s cubic-bezier(.22, .9, .26, 1), left .45s cubic-bezier(.22, .9, .26, 1),
              width .45s cubic-bezier(.22, .9, .26, 1), height .45s cubic-bezier(.22, .9, .26, 1);
  pointer-events: none;
}
.tour-bubble {
  position: fixed; z-index: 11002;
  width: min(340px, calc(100vw - 24px));
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 18px 44px rgba(10, 12, 24, 0.35));
  padding: 1rem 1.1rem 0.9rem;
  transition: top .45s cubic-bezier(.22, .9, .26, 1), left .45s cubic-bezier(.22, .9, .26, 1),
              transform .45s cubic-bezier(.22, .9, .26, 1);
}
.tour-bubble--center {
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%);
}
.tour-bubble:not(.tour-bubble--center) { transform: none; }
.tour-leon {
  position: absolute; top: -26px; left: 14px;
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; background: var(--bg-card);
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-sm);
}
.tour-bubble-body { padding-top: 0.55rem; }
.tour-counter {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600; letter-spacing: .03em;
  color: var(--accent); text-transform: uppercase;
}
.tour-title { margin: 0.2rem 0 0.35rem; font-size: 1.02rem; font-weight: 700; color: var(--text-primary); }
.tour-text  { margin: 0 0 0.85rem; font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); }
/* Rangee d'actions : boutons compacts (les 3 libelles doivent tenir sur les ~305px utiles de
   la bulle) + wrap de securite (zoom, libelles longs) avec la navigation qui reste a droite. */
.tour-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem; flex-wrap: wrap; row-gap: 0.45rem;
}
.tour-actions .btn { padding: 0.38rem 0.6rem; font-size: 0.8rem; gap: 0.35rem; white-space: nowrap; }
.tour-nav-btns { display: flex; gap: 0.4rem; margin-left: auto; flex: none; }
.tour-skip { color: var(--text-muted); flex: none; }
.tour-resume-wrap {
  position: fixed; right: 18px; bottom: 18px; z-index: 11002;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.tour-resume {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  background: var(--accent); color: #fff;
  border: none; border-radius: 999px; cursor: pointer;
  font-size: 0.88rem; font-weight: 600;
  box-shadow: var(--shadow-lg, 0 12px 30px rgba(10, 12, 24, 0.3));
}
.tour-resume:hover { filter: brightness(1.08); }
.tour-resume-dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  background: var(--bg-card); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.tour-resume-dismiss:hover { color: var(--text-primary); }
@media (max-width: 640px) {
  .tour-bubble:not(.tour-bubble--center) {
    top: auto !important; left: 12px !important; right: 12px; bottom: 12px;
    width: auto;
  }
}

/* Bulles centrees (bienvenue, RGPD, finale) : mise en scene "hero", Léon en grand au sommet. */
.tour-bubble--center { text-align: center; }
.tour-bubble--center .tour-leon {
  width: 76px; height: 76px; top: -42px;
  left: 50%; margin-left: -38px;
}
.tour-bubble--center .tour-bubble-body { padding-top: 2.1rem; }

/* Barre de progression de la visite (largeur posee en CSSOM par tour.js). */
.tour-progress {
  display: block; height: 4px; margin-top: 0.4rem;
  border-radius: 999px; background: var(--bg-input); overflow: hidden;
}
.tour-progress-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px; background: var(--accent);
  transition: width .35s ease;
}

/* Animations d'entree : le contenu (textes, Léon) rejoue a chaque etape via tour-pop ; le pop
   complet de la bulle (tour-pop--in) seulement quand elle (re)apparait - entre deux etapes elle
   GLISSE vers sa nouvelle position (transition top/left). `scale`/`translate` (proprietes
   independantes) pour ne pas ecraser le transform de centrage ni le positionnement de Léon. */
.tour-bubble.tour-pop--in { animation: tourBubblePop .3s cubic-bezier(.2, .9, .3, 1.35) backwards; }
.tour-pop .tour-title { animation: tourTextIn .35s ease .08s backwards; }
.tour-pop .tour-text  { animation: tourTextIn .35s ease .16s backwards; }
.tour-pop .tour-leon  { animation: tourLeonBounce .5s cubic-bezier(.34, 1.4, .5, 1) .05s; }
@keyframes tourBubblePop { from { opacity: 0; scale: .92; } }
@keyframes tourTextIn    { from { opacity: 0; translate: 0 6px; } }
@keyframes tourLeonBounce { 30% { translate: 0 -8px; } 60% { translate: 0 2px; } }

/* Halo pulsant du spotlight (le contour fixe reste sur .tour-spot). */
.tour-spot::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  animation: tourSpotPulse 1.8s ease-out infinite;
}
@keyframes tourSpotPulse {
  0%        { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 14px transparent; }
}

/* Confettis de la finale (left/duree/delai poses en CSSOM par tour.js). */
.tour-confetti { position: fixed; inset: 0; z-index: 11003; pointer-events: none; overflow: hidden; }
.tour-confetti-piece {
  position: absolute; top: -16px; width: 8px; height: 14px; border-radius: 2px;
  opacity: 0;
  animation-name: tourConfettiFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
.tour-confetti-c1 { background: var(--accent); }
.tour-confetti-c2 { background: #f59e0b; }
.tour-confetti-c3 { background: #34d399; }
.tour-confetti-c4 { background: #60a5fa; }
.tour-confetti-c5 { background: #f472b6; }
@keyframes tourConfettiFall {
  0%   { translate: 0 0;     rotate: 0deg;   opacity: 1; }
  100% { translate: 0 105vh; rotate: 620deg; opacity: .85; }
}

/* Explosion du clic Terminer : chaque piece part du bouton (top/left en CSSOM) en eventail
   (--tx/--ty), monte vite puis retombe en tournant (--rot). */
.tour-confetti-burst { animation-name: tourConfettiBurst; }
@keyframes tourConfettiBurst {
  0%  { translate: 0 0; rotate: 0deg; opacity: 1;
        animation-timing-function: cubic-bezier(.12, .75, .35, 1); }
  45% { translate: var(--tx) var(--ty); opacity: 1;
        animation-timing-function: cubic-bezier(.5, .05, .8, .5); }
  100% { translate: calc(var(--tx) * 1.15) calc(var(--ty) + 58vh); rotate: var(--rot); opacity: 0; }
}

/* Widget dashboard "Premiers pas" : progression + checklist deep-linkee. */
.dash-firststeps { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; }
.dash-firststeps-bar {
  height: 6px; border-radius: 999px; background: var(--bg-input); overflow: hidden; flex: none;
}
.dash-firststeps-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.dash-firststeps-count { font-size: 0.75rem; color: var(--text-muted); flex: none; }
.dash-firststeps-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.15rem; overflow-y: auto;
}
.dash-firststeps-item a {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.35rem; border-radius: 8px;
  font-size: 0.84rem; color: var(--text-secondary); text-decoration: none;
}
.dash-firststeps-item a:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.dash-firststeps-item .ri-checkbox-circle-fill { color: var(--accent); }
.dash-firststeps-item.is-done a { opacity: 0.6; text-decoration: line-through; }
.dash-firststeps-go { margin-left: auto; color: var(--text-muted); }

/* ==========================================================================
   Editeur de document en direct (soclai-doc-editor.js)
   ========================================================================== */
/* L'attribut [hidden] doit toujours gagner : plusieurs elements (loading, toolbar flottante,
   lien telecharger) portent un display via leur classe, qui sinon ecraserait [hidden]. */
.doc-editor-overlay [hidden] { display: none !important; }
.doc-editor-modal { width: min(1100px, 96vw); max-width: 96vw; height: 92vh; display: flex; flex-direction: column; }
.doc-editor-head { display: flex; align-items: center; gap: 12px; }
.doc-editor-head .modal-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.doc-editor-fname { font-weight: 500; color: var(--text-muted); font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.doc-editor-state { margin-left: auto; font-size: 0.82rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.doc-editor-state.is-dirty  { background: #fff7ed; color: #9a3412; }
.doc-editor-state.is-saving { background: #eff6ff; color: #1e40af; }
.doc-editor-state.is-saved  { background: #ecfdf5; color: #065f46; }
.doc-editor-state.is-error  { background: #fef2f2; color: #991b1b; }

.doc-editor-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--border, #e5e7eb); }
.doc-editor-sep { width: 1px; height: 20px; background: var(--border, #e5e7eb); margin: 0 4px; }
.doc-editor-hint { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); }
.doc-editor-actions .btn-sm { padding: 5px 10px; }

.doc-editor-body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }
/* L'iframe remplit la modale ; le scroll et le look "feuille" vivent DANS le document
   (de-a4sheet pour le pdf, feuille Word pour le docx, grille/textarea plein cadre). */
.doc-editor-stage { flex: 1 1 auto; position: relative; background: #f3f4f6; overflow: hidden; display: flex; }
.doc-editor-frame { flex: 1 1 auto; width: 100%; border: none; background: #fff; }
.doc-editor-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.95rem; background: #f3f4f6; z-index: 2; }
.doc-editor-err { display: flex; align-items: center; gap: 10px; color: #991b1b; }

.doc-editor-vpanel { flex: 0 0 300px; border-left: 1px solid var(--border, #e5e7eb); background: #fff; overflow: auto; padding: 12px; }
.doc-editor-vhead { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin-bottom: 10px; }
.doc-editor-vorig { width: 100%; justify-content: center; margin-bottom: 10px; }
.doc-editor-vlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.doc-editor-vitem { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; }
.doc-editor-vitem.is-current { border-color: var(--accent, #6d5bd0); background: rgba(109,91,208,.05); }
.doc-editor-vinfo { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.doc-editor-vmeta { font-size: 0.75rem; color: var(--text-muted); }
.doc-editor-vcur { font-size: 0.72rem; font-weight: 700; color: var(--accent, #6d5bd0); text-transform: uppercase; letter-spacing: .04em; }
.doc-editor-vempty, .doc-editor-vload, .doc-editor-verr { color: var(--text-muted); font-size: 0.85rem; padding: 8px 4px; }

.doc-editor-foot { display: flex; align-items: center; gap: 10px; }
.doc-editor-foot .btn-primary { margin-left: auto; }
.doc-editor-foot [data-de="download"] { margin-left: auto; }
.doc-editor-foot [data-de="download"] + .btn-primary { margin-left: 0; }

/* Mini-toolbar flottante (positionnee en fixed au-dessus de l'element selectionne) */
.doc-editor-fmt { position: fixed; z-index: 9999; display: flex; align-items: center; gap: 2px; padding: 4px; background: #1f2937; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.28); }
.doc-editor-fbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; color: #fff; border-radius: 7px; cursor: pointer; font-size: 15px; position: relative; }
.doc-editor-fbtn:hover { background: rgba(255,255,255,.16); }
.doc-editor-fsep { width: 1px; height: 18px; background: rgba(255,255,255,.22); margin: 0 3px; }
.doc-editor-fcolor { overflow: hidden; }
.doc-editor-fcolor input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Cadre de manipulation d'une image selectionnee : deplacement libre + poignees de coin.
   Superpose a l'iframe (en fixed), sous la toolbar (z 9999) mais au-dessus du document. */
.doc-editor-imgbox { position: fixed; z-index: 9998; outline: 1.5px solid #6d5bd0; box-shadow: 0 0 0 1px rgba(255,255,255,.55); pointer-events: none; }
.doc-editor-imgmove { position: absolute; inset: 0; cursor: move; pointer-events: auto; }
.doc-editor-imgh { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid #6d5bd0; border-radius: 3px; box-sizing: border-box; pointer-events: auto; }
.doc-editor-imgh[data-h="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.doc-editor-imgh[data-h="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.doc-editor-imgh[data-h="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.doc-editor-imgh[data-h="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
/* Couche de capture (transparente) le temps d'un glisser : evite que l'iframe vole les evenements. */
.doc-editor-dragcatch { position: fixed; inset: 0; z-index: 10000; background: transparent; }

/* Barre de LIEN flottante (au-dessus de la toolbar) : editer l'URL + le label d'un <a>, et le consulter. */
.doc-editor-linkbar {
  position: fixed; z-index: 10000; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: #1f2937; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28); max-width: min(560px, 92vw);
}
.doc-editor-lb-field {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  background: rgba(255,255,255,.10); border-radius: 7px; padding: 4px 8px;
}
.doc-editor-lb-field > i { color: rgba(255,255,255,.6); font-size: 14px; flex: 0 0 auto; }
.doc-editor-lb-in {
  border: none; background: transparent; color: #fff; font-size: 13px; outline: none;
  min-width: 90px; width: 100%;
}
.doc-editor-lb-in::placeholder { color: rgba(255,255,255,.45); }
.doc-editor-lb-field:focus-within { box-shadow: 0 0 0 2px var(--accent, #6d5bd0); }
.doc-editor-lb-open {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 12px; border-radius: 7px; text-decoration: none; white-space: nowrap;
  background: var(--accent, #6d5bd0); color: #fff; font-size: 12.5px; font-weight: 600;
}
.doc-editor-lb-open:hover { filter: brightness(1.08); }
@media (max-width: 640px) {
  .doc-editor-linkbar { flex-wrap: wrap; }
  .doc-editor-lb-field { flex: 1 1 100%; }
}

/* Menu contextuel (clic droit) d'une cellule de grille tableur (editeur xlsx). Reprend la palette
   de Donnees (memes teintes) ; global ici car l'editeur tourne aussi sur communication/documents ou
   assistant-run.css n'est pas charge. Conteneur = .comm-card-menu + .de-ctx. */
.de-ctx { min-width: 210px; padding: 6px; }
.de-ctx-sec { font-size: 11px; color: var(--text-muted); font-weight: 600; padding: 5px 6px 3px; }
.de-ctx-div { height: 1px; background: var(--border); margin: 5px 4px; }
.de-sws { display: flex; gap: 5px; padding: 0 4px 4px; flex-wrap: wrap; }
.de-sw { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border); cursor: pointer; padding: 0; }
.de-sw.is-active { outline: 2px solid var(--accent); outline-offset: 1px; }
.de-sw--0 { display: grid; place-items: center; background: var(--bg-input); color: var(--text-muted); font-size: 12px; }
.de-sw-a { font-weight: 700; color: var(--text-primary); font-size: 12px; }
.de-sw-bg--1 { background: color-mix(in srgb, #ef4444 16%, transparent); }
.de-sw-bg--2 { background: color-mix(in srgb, #f97316 16%, transparent); }
.de-sw-bg--3 { background: color-mix(in srgb, #eab308 18%, transparent); }
.de-sw-bg--4 { background: color-mix(in srgb, #22c55e 16%, transparent); }
.de-sw-bg--5 { background: color-mix(in srgb, #06b6d4 16%, transparent); }
.de-sw-bg--6 { background: color-mix(in srgb, #3b82f6 16%, transparent); }
.de-sw-bg--7 { background: color-mix(in srgb, #8b5cf6 16%, transparent); }
.de-sw-bg--8 { background: color-mix(in srgb, #ec4899 16%, transparent); }
.de-sw-fg--1 { background: #dc2626; } .de-sw-fg--2 { background: #ea580c; }
.de-sw-fg--3 { background: #ca8a04; } .de-sw-fg--4 { background: #16a34a; }
.de-sw-fg--5 { background: #0891b2; } .de-sw-fg--6 { background: #2563eb; }
.de-sw-fg--7 { background: #7c3aed; } .de-sw-fg--8 { background: #db2777; }
.de-ctx .comm-menu-item.is-on { color: var(--accent); }

/* Tablette : boutons plus gros, panneau versions en pleine largeur */
@media (max-width: 820px) {
    .doc-editor-modal { height: 96vh; width: 100vw; max-width: 100vw; border-radius: 0; }
    .doc-editor-fbtn { width: 38px; height: 38px; font-size: 17px; }
    .doc-editor-vpanel { position: absolute; inset: 0; flex-basis: auto; z-index: 3; }
    .doc-editor-hint { display: none; }
}

/* Modale "donnees residuelles" de l'editeur RGPD : au-dessus de l'editeur (10100). */
.rgpd-residual-modal { z-index: 10200; }
.rgpd-residual-modal .modal { max-width: 460px; }
.rgpd-residual-list { margin: 0.5rem 0 0.75rem 1.2rem; padding: 0; }
.rgpd-residual-list li { margin: 2px 0; color: var(--text-primary); }
.rgpd-residual-hint { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }

/* Badge RGPD des chips de pieces jointes (soclaiRgpdGate.chipBadge) : orange = a preparer
   (clic = modale de preparation), vert = valide/censure (clic = revoir dans l editeur). */
.soclai-rgpd-chipbadge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--warning-soft); color: var(--warning); font-size: 13px; flex: none; padding: 0;
}
.soclai-rgpd-chipbadge.is-ok { background: var(--success-soft); color: var(--success); }
.soclai-rgpd-chipbadge:hover { filter: brightness(1.15); }

/* ============================================================================
   Panneau d'apparence d'un agent : avatar (galerie/import/doc), carte (accent/poster), voix.
   PARTAGE par l'atelier des agents sur mesure et le wizard telephonique -> vit ici et non
   dans le CSS d'une page. Markup : pages/agent-appearance.partial.php.
   ============================================================================ */
.arun-appear { display: flex; flex-direction: column; gap: 22px; padding: 16px 14px; }
.arun-appear-sec { display: flex; flex-direction: column; gap: 10px; }
.arun-appear-t { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.arun-appear-t i { color: var(--accent); font-size: 17px; }
.arun-appear-lbl { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.arun-appear-hint { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }

.arun-appear-avatar { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.arun-appear-frame {
    position: relative; flex: none;
    width: 150px; height: 150px; border-radius: 18px; overflow: hidden;
    background: var(--bg-input); border: 1px solid var(--border);
}
.arun-appear-layer { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform-origin: center; }
/* Editeur de placement : pas de drag natif de l'image ni de selection (sinon le press attrape l'image
   fantome du navigateur au lieu de deplacer l'accessoire). */
.arun-appear-frame, .arun-appear-frame img, .arun-appear-selbox, .arun-appear-selhandle {
    user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.arun-appear-flat  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.arun-appear-frame.is-flat .arun-appear-layer { display: none; }
.arun-appear-frame:not(.is-flat) .arun-appear-flat { display: none; }

/* Mode edition (onglet Galerie) : cadre agrandi + accessoire deplacable a la souris/au doigt.
   Hauteur au ratio de l'avatar (356x540 -> 220x334) : le cadre = le canvas final entier, sinon le
   bas (cou : noeud papillon, cravate) tombe hors du carre. Avec frame.h == calque.h, le drag
   vertical est aussi a l'echelle 1:1. */
.arun-appear-frame.is-editing { width: 220px; height: 334px; cursor: grab; touch-action: none;
    outline: 2px dashed var(--border); outline-offset: 3px; }
.arun-appear-frame.is-editing.is-grabbing { cursor: grabbing; }
.arun-appear-edit-tag { position: absolute; left: 7px; top: 7px; z-index: 4; pointer-events: none;
    background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 1;
    padding: 4px 9px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.arun-appear-frame:not(.is-editing) .arun-appear-edit-tag,
.arun-appear-frame.is-flat .arun-appear-edit-tag { display: none; }

.arun-appear-place { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 2px; }
.arun-appear-place-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.arun-appear-place-tab { border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary);
    border-radius: var(--radius-pill); padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.arun-appear-place-tab:hover { border-color: var(--accent); color: var(--text-primary); }
.arun-appear-place-tab.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.arun-appear-place-ctrl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Cadre de selection pose sur l'accessoire actif (positionne en JS) + poignees de coin (redimensionnement). */
.arun-appear-selbox { position: absolute; z-index: 3; pointer-events: none;
    border: 1.5px solid var(--accent); border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); }
.arun-appear-frame:not(.is-editing) .arun-appear-selbox,
.arun-appear-frame.is-flat .arun-appear-selbox { display: none; }
.arun-appear-selhandle { position: absolute; width: 13px; height: 13px; pointer-events: auto; touch-action: none;
    background: var(--bg-card); border: 1.5px solid var(--accent); border-radius: 3px; box-shadow: var(--shadow-sm); }
.arun-appear-selhandle.h-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.arun-appear-selhandle.h-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.arun-appear-selhandle.h-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.arun-appear-selhandle.h-se { right: -7px; bottom: -7px; cursor: nwse-resize; }

.arun-appear-sources { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.arun-appear-srctabs { display: flex; gap: 4px; background: var(--bg-input); padding: 3px; border-radius: var(--radius-pill); width: fit-content; }
.arun-appear-srctab { border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--text-secondary); padding: 5px 12px; border-radius: var(--radius-pill); }
.arun-appear-srctab.is-active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.arun-appear-srcpanel { display: none; flex-direction: column; gap: 8px; }
.arun-appear-srcpanel.is-active { display: flex; }

.arun-appear-bases { display: flex; flex-wrap: wrap; gap: 8px; }
.arun-appear-base-opt { width: 52px; height: 52px; padding: 0; border: 2px solid var(--border); border-radius: 12px;
    overflow: hidden; cursor: pointer; background: var(--bg-input); }
.arun-appear-base-opt img { width: 100%; height: auto; display: block; }
.arun-appear-base-opt:hover { border-color: var(--accent); }
.arun-appear-base-opt.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Bouton d'ouverture du choix de personnage (remplace la grille inline : le pool fait des dizaines de visages). */
.arun-appear-pick {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg-input); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: var(--transition);
}
.arun-appear-pick:hover { border-color: var(--accent); color: var(--accent); }
.arun-appear-pick i { font-size: 16px; color: var(--accent); }

/* Modale de choix du personnage : plein ecran centre, grille scrollable groupee par genre.
   z-index au-dessus des .modal-overlay (9999) : le panneau s'ouvre lui-meme DANS une modale
   depuis le wizard telephonique, et la galerie passerait derriere elle. */
.arun-base-modal {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); padding: 5vh 16px;
}
.arun-base-modal.is-hidden { display: none; }
.arun-base-modal-card {
  width: min(680px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.arun-base-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.arun-base-modal-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.arun-base-modal-x {
  display: flex; width: 32px; height: 32px; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%; background: var(--bg-input);
  color: var(--text-muted); font-size: 18px; cursor: pointer; transition: var(--transition);
}
.arun-base-modal-x:hover { border-color: var(--accent); color: var(--accent); }
.arun-base-modal-body { padding: 16px 18px; overflow-y: auto; }
.arun-base-modal-sec {
  display: block; margin: 4px 0 10px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
}
.arun-base-modal-sec:not(:first-child) { margin-top: 20px; }
.arun-base-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; }
.arun-base-grid .arun-appear-base-opt { width: 100%; height: auto; aspect-ratio: 356 / 540; }
.arun-base-grid .arun-appear-base-opt img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.arun-appear-accs { display: flex; flex-wrap: wrap; gap: 6px; }
.arun-appear-acc-opt { border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary);
    font: inherit; font-size: 12.5px; cursor: pointer; padding: 5px 11px; border-radius: var(--radius-pill); }
.arun-appear-acc-opt:hover { border-color: var(--accent); color: var(--text-primary); }
.arun-appear-acc-opt.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.arun-appear-apply { align-self: flex-start; margin-top: 4px; }

.arun-appear-drop { margin: 0; }

.arun-appear-accents { display: flex; flex-wrap: wrap; gap: 8px; }
.arun-appear-accent { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer;
    background: var(--acm-accent, var(--accent)); }
.arun-appear-accent.is-active { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--acm-accent, var(--accent)); }

.arun-appear-posters { display: flex; flex-wrap: wrap; gap: 8px; }
.arun-appear-poster { min-width: 64px; height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer;
    border: 2px solid var(--border); font: inherit; font-size: 12px; font-weight: 600; color: #fff;
    background: var(--acm-poster, var(--bg-input)); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.arun-appear-poster[data-poster=""] { color: var(--text-secondary); background: var(--bg-input); text-shadow: none; }
.arun-appear-poster.is-active { border-color: var(--text-primary); }

.arun-appear-voice { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.arun-appear-voice .arun-input, .arun-appear-voice [data-custom-select] { min-width: 180px; }

/* ============================================================================
   Standard telephonique : selecteur d'agent en pastilles + en-tete de page d'agent.
   Les pastilles NAVIGUENT (vues globales <-> page d'un agent), elles ne filtrent pas.
   ============================================================================ */
.phone-pills {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1rem;
}
.phone-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.32rem 0.75rem 0.32rem 0.35rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text-secondary);
  font-size: 0.88rem; font-weight: 500; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.phone-pill:hover { border-color: var(--accent); color: var(--text-primary); }
/* Etat actif : bordure pleine sur tout le tour (pas de barre laterale). */
.phone-pill.is-active {
  border-color: var(--accent); color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.phone-pill-face {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  display: block; flex-shrink: 0;
  background: var(--bg-input);
}
.phone-pill-all {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-input); color: var(--text-muted); flex-shrink: 0;
}
.phone-pill.is-active .phone-pill-all { color: var(--accent); }
.phone-pill-name { white-space: nowrap; }
.phone-pill-n {
  min-width: 1.35rem; padding: 0 0.32rem;
  border-radius: 999px; background: var(--bg-input);
  font-size: 0.74rem; font-weight: 600; line-height: 1.35rem;
  text-align: center; color: var(--text-muted);
}
.phone-pill-n.is-alert { background: var(--accent); color: #fff; }

/* Commande telephonique : un bon a preparer, donc lisible tel quel (une ligne par element). */
.phone-order-detail {
  white-space: pre-line;
  margin-top: 0.35rem;
  line-height: 1.5;
}

/* En-tete de la page d'un agent : qui il est, en un coup d'oeil. */
.phone-agent-head {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1rem;
}
.phone-agent-face {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 1px solid var(--border); background: var(--bg-input); flex-shrink: 0;
}
.phone-agent-name {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  margin: 0; font-size: 1.25rem;
}
.phone-agent-role { margin: 0.1rem 0 0; color: var(--text-secondary); font-size: 0.9rem; }
.phone-agent-meta {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  margin: 0.35rem 0 0; color: var(--text-muted); font-size: 0.85rem;
}
.phone-agent-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Onglet Reglages d'un agent. */
.phone-settings { display: flex; flex-direction: column; gap: 1rem; }
.phone-settings-card { padding: 1.1rem 1.2rem; }
.phone-settings-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.phone-settings-title {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.2rem; font-size: 1rem;
}
.phone-settings-title i { color: var(--accent); }
.phone-settings-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.15rem 1.5rem; margin: 0.8rem 0 0;
}
.phone-settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}
.phone-settings-row dt {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--text-secondary); font-size: 0.88rem;
}
.phone-settings-row dt i { color: var(--text-muted); }
.phone-settings-row dd { margin: 0; font-weight: 500; font-size: 0.88rem; }
.phone-settings-danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.phone-settings-danger .phone-settings-title i { color: var(--danger); }

/* Texte de consignes : pave long, lu autant qu'ecrit -> interligne aere et hauteur libre. */
.phone-script-text {
  margin-top: 0.6rem; min-height: 16rem; resize: vertical;
  line-height: 1.55; font-size: 0.86rem;
}
.phone-script-ask { display: flex; gap: 0.5rem; margin-top: 0.7rem; flex-wrap: wrap; }
.phone-script-ask .form-input { flex: 1 1 18rem; }
.phone-script-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.5rem; margin-top: 0.7rem;
}

@media (max-width: 640px) {
  .phone-agent-head { gap: 0.75rem; }
  .phone-agent-face { width: 48px; height: 48px; }
  .phone-pill-name { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
}

/* ============================================================================
   Carte d'agent personnalisee (.acm-card) : accent + fond choisis dans le panneau d'apparence.
   Vit ICI et non dans le CSS d'une page : la meme carte sert les agents sur mesure
   (/assistants) et les standardistes telephoniques (/phone-inbox). Tant que ce pont etait dans
   assistants.css, choisir une couleur cote telephonie n'avait aucun effet - la feuille n'y est
   pas chargee.
   ============================================================================ */
/* ---- Mode "Organiser" : ranger une grille de cartes au glisser-deposer (soclai-arrange.js) ----
   Partage par les collaborateurs sur mesure (/collaborateurs, ordre par user) et le hub
   telephonique (/phone-inbox, ordre de la societe). Hors mode : le bouton est discret a droite.
   En mode : les cartes deviennent des tuiles deplacables, le clic-navigation est neutralise. */
.acm-arrange-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.acm-arrange-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}
.acm-arrange-hint i { color: var(--accent); }
.acm-arrange-btn.is-active { color: var(--accent); border-color: var(--accent); }

/* On coupe le survol (transform / laser) pour un rendu stable pendant le glisser, et on masque
   les menus "..." : ici on range, on ne supprime pas. */
.agent-grid.is-arranging .acm-card {
  cursor: grab;
  transition: box-shadow .15s ease, opacity .15s ease;
}
.agent-grid.is-arranging .acm-card:hover { transform: none; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.agent-grid.is-arranging .acm-card::before,
.agent-grid.is-arranging .acm-card::after { display: none; }
.agent-grid.is-arranging .acm-card .comm-card-actions,
.agent-grid.is-arranging .acm-card .app-card-menu { display: none; }
.agent-grid.is-arranging .acm-card.is-dragging {
  opacity: .45;
  cursor: grabbing;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

.acm-card {
  --agent-accent: var(--acm-accent, var(--accent));
  --agent-bg: var(--acm-poster, url('/assets/img/assistants/placeholder.webp'));
}
/* Avatar : grande image posee en bas (comme la mascotte des agents integres). Bornage en % du
   visuel - ce sont des portraits plein cadre, pas des mascottes "crop" bornees a 200px : la
   largeur peut deborder un peu sur les cotes, la hauteur est plafonnee pour ne jamais couper
   la tete. */
.acm-card .agent-card-visual img { max-width: 116%; max-height: 100%; width: auto; height: auto; }
/* Le pitch peut etre long (description d'atelier, ~180 car) -> clamp 3 lignes. */
.acm-card .agent-card-desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Agent dont le visuel est un PORTRAIT (galerie de visages) et non un pictogramme. Annule la
   vignette ronde de .agent-card--bot, dessinee pour les chatbots du support dont l'avatar est
   une icone : depuis que les standardistes ont un vrai visage, cette vignette de 78 px les
   faisait passer pour des cartes au rabais a cote des agents sur mesure.
   Doit rester APRES .agent-card--bot : meme specificite, c'est l'ordre qui tranche. */
.agent-card--portrait .agent-card-visual {
  align-items: flex-end;
  background-color: var(--bg-secondary);
}
.agent-card--portrait .agent-card-visual img {
  width: auto; height: auto; max-width: 116%; max-height: 100%;
  border: 0; border-radius: 0; box-shadow: none;
}

/* ============================================
   Gestion des commentaires (onglet Communication)
   ============================================ */
/* Reglages d'auto-reponse : corps de la modale ouverte par l'engrenage de l'inbox
   (le padding vient de .modal-body). */
.cmt-config-body { display: flex; flex-direction: column; gap: 0.5rem; }
/* Colonne flex : sans ca le bouton "Ajouter un exemple" s'etire sur toute la largeur. */
.cmt-config-body > .btn { align-self: flex-start; }
.cmt-config-body > .cmt-hint:first-child { margin-bottom: 0.5rem; }

.cmt-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem; margin-bottom: 0.4rem; }
.cmt-mode { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.7rem 0.8rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.cmt-mode:hover { background: var(--bg-card-hover); }
.cmt-mode:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cmt-mode input { margin-top: 0.2rem; }
.cmt-mode span { display: flex; flex-direction: column; gap: 0.1rem; }
.cmt-mode strong { font-size: 0.95rem; color: var(--text-primary); }
.cmt-mode em { font-style: normal; font-size: 0.82rem; color: var(--text-muted); }

.cmt-escalate { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-primary); margin: 0.3rem 0; }
.cmt-hint { font-size: 0.82rem; color: var(--text-muted); margin: 0.1rem 0 0.2rem; }
.cmt-examples { display: flex; flex-direction: column; gap: 0.45rem; }
.cmt-example { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.4rem; align-items: center; }
.cmt-example .btn-icon, .cmt-actions .btn-icon {
  border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-sm);
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
}
.cmt-example .btn-icon:hover, .cmt-actions .btn-icon:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.cmt-actions .cmt-del:hover { color: var(--danger); border-color: var(--danger); }
.cmt-config-saved { color: var(--success); font-size: 0.88rem; margin-right: auto; }

/* Cartes de commentaire de la modale de detail d'un post (l'onglet Commentaires, lui, a sa
   propre boite de reception dans pages/communication.css). */
.cmt-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); padding: 0.85rem 1rem; }
.cmt-card.cmt-escalated { border-color: var(--danger); }
.cmt-postref { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); text-decoration: none; color: inherit; }
a.cmt-postref:hover { border-color: var(--accent); }
.cmt-postref-thumb { width: 34px; height: 34px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.cmt-postref-ic { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-input); color: var(--text-muted); font-size: 1.05rem; }
.cmt-postref-txt { flex: 1; min-width: 0; color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmt-postref-ext { color: var(--text-muted); font-size: 0.9rem; flex-shrink: 0; }
.cmt-card-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.cmt-plat { color: var(--accent); font-size: 1.05rem; }
.cmt-author { font-weight: 600; color: var(--text-primary); }
.cmt-date { color: var(--text-muted); font-size: 0.8rem; }
.cmt-badge-neg { background: var(--danger); color: #fff; }
.cmt-badge-auto { background: var(--accent); color: #fff; }
.cmt-msg { color: var(--text-primary); margin: 0.1rem 0 0.6rem; white-space: pre-wrap; word-break: break-word; }
.cmt-reply-box { display: flex; flex-direction: column; gap: 0.5rem; }
.cmt-reply-text { resize: vertical; min-height: 2.6rem; }
.cmt-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cmt-actions-sep { flex: 1 1 auto; }
.cmt-reply-sent { display: flex; gap: 0.45rem; align-items: flex-start; color: var(--text-muted);
  background: var(--success-soft); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font-size: 0.9rem; }
.cmt-reply-sent i { color: var(--success); margin-top: 0.15rem; }

.cmt-empty { text-align: center; color: var(--text-muted); padding: 2.5rem 1rem; }
.cmt-empty i { font-size: 2rem; display: block; margin-bottom: 0.5rem; opacity: 0.6; }

@media (max-width: 640px) {
  .cmt-example { grid-template-columns: 1fr auto; }
  .cmt-example .cmt-ex-reply { grid-column: 1 / -1; }
}

.cmt-test { display: flex; gap: 0.5rem; align-items: center; }
.cmt-test .form-input { flex: 1 1 auto; }
.cmt-test-out { margin-top: 0.5rem; }
.cmt-test-reply { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem;
  color: var(--text-primary); font-size: 0.92rem; white-space: pre-wrap; }
.cmt-test-reply.cmt-test-err { background: var(--bg-secondary); color: var(--text-muted); }

/* ===================================================================
   Transition de page PLEIN ECRAN (composant partage)
   Deux pans clairs porteurs du logo SoclAi (coupe au centre) qui
   coulissent horizontalement : se ferme sur une page, s'ouvre sur
   l'autre. Pilote par classe :
     .is-enter -> demarre FERME puis s'ouvre (CSS pur, aucun flash)
     .is-shut  -> fermeture a la demande (JS), retrait = ouverture
   =================================================================== */
.sc-curtain {
  position: fixed; inset: 0; z-index: 9990; overflow: hidden; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease .78s, visibility 0s linear 1.2s;
  --sc-panel-w: 50.2vw;                    /* leger recouvrement au centre (anti-jour) */
  --sc-logo-w: clamp(240px, 34vw, 560px);  /* largeur du logo, centre sur l'ecran */
}
.sc-curtain.is-shut { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.sc-cpanel {
  position: absolute; top: 0; bottom: 0; width: var(--sc-panel-w); overflow: hidden;
  background: #000;   /* meme fond que le logo (PNG non detoure) : il se fond dans les pans */
  transition: transform 1.15s cubic-bezier(.72, .02, .24, 1);
  will-change: transform;
}
/* Logo CENTRE sur l'ecran et coupe au milieu : chaque pan clippe sa moitie via son propre
   overflow -> a l'ouverture, chaque pan emporte sa moitie de logo. */
.sc-cpanel::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url(../img/logo-soclai.png) no-repeat;
  background-size: var(--sc-logo-w) auto;
}
.sc-cpanel--l::before { background-position: calc(50vw - var(--sc-logo-w) / 2) 50%; }
.sc-cpanel--r::before { background-position: calc(var(--sc-panel-w) - 50vw - var(--sc-logo-w) / 2) 50%; }
.sc-cpanel--l { left: 0; transform: translateX(-110%); }
.sc-cpanel--r { right: 0; transform: translateX(110%); }
.sc-curtain.is-shut .sc-cpanel--l,
.sc-curtain.is-shut .sc-cpanel--r { transform: translateX(0); }
/* Entree : demarre ferme (visible) puis s'ouvre. forwards -> etat final = ouvert/cache (= repos). */
.sc-curtain.is-enter { animation: sc-enter-fade 2.3s forwards; }
.sc-curtain.is-enter .sc-cpanel--l { animation: sc-enter-l 2.3s cubic-bezier(.72, .02, .24, 1) forwards; }
.sc-curtain.is-enter .sc-cpanel--r { animation: sc-enter-r 2.3s cubic-bezier(.72, .02, .24, 1) forwards; }
@keyframes sc-enter-fade { 0%, 62% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes sc-enter-l { 0%, 40% { transform: translateX(0); } 100% { transform: translateX(-110%); } }
@keyframes sc-enter-r { 0%, 40% { transform: translateX(0); } 100% { transform: translateX(110%); } }

/* Proposition d'aspiration, apres la connexion d'un compte Meta (/integrations). */
.insp-offer-lead { color: var(--text-primary); margin: 0 0 0.9rem; line-height: 1.55; }
.insp-offer-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.insp-offer-list li { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--text-primary); font-size: 0.9rem; line-height: 1.45; }
.insp-offer-list i { color: var(--success); font-size: 1.05rem; flex-shrink: 0; }
.insp-offer-note { color: var(--text-muted); font-size: 0.83rem; margin: 0; line-height: 1.5; }

/* Case "s'inspirer de mes anciens posts" (etape 1 de la creation de post). */
.cal-inspire {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem;
  margin-top: 0.9rem; padding: 0.7rem 0.85rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary);
}
.cal-inspire-text { cursor: pointer; min-width: 0; }
/* Rappel du visuel a decliner, etape 3 de la creation de post. */
.cal-ref-note {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.7rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary);
  color: var(--text-muted); font-size: 0.83rem;
}
.cal-ref-note img { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.cal-inspire strong { display: block; color: var(--text-primary); font-size: 0.9rem; font-weight: 600; }
.cal-inspire em { display: block; color: var(--text-muted); font-size: 0.8rem; font-style: normal; margin-top: 0.1rem; }

/* --- Signature des emails (components/email-signature-field.php) ------------------------------
   Un meme bloc sur trois ecrans : reglages de la societe, boite d'envoi, collaborateur. L'apercu
   montre la fin d'un mail, pour que le patron juge le rendu reel et pas un champ de texte. */
/* Entete du champ signature : l'aide a gauche, le bouton d'import a droite. */
.sig-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sig-head .form-help-top { flex: 1; }
.sig-import { flex: none; white-space: nowrap; }
.sig-logo { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px;
  color: var(--text-primary); cursor: pointer; }
.sig-logo input { flex: none; margin: 0; cursor: pointer; }
.sig-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.sig-vars-lab { font-size: 12px; color: var(--text-muted); }
.sig-var {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
  font-family: var(--font-mono, monospace); font-size: 11.5px; line-height: 1;
  padding: 4px 8px; border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.sig-var:hover { border-color: var(--accent); color: var(--accent); }
.sig-preview { margin-top: 14px; }
.sig-preview-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px;
}
.sig-preview-auto {
  font-weight: 500; color: var(--accent);
  background: var(--accent-soft); padding: 2px 8px; border-radius: var(--radius-pill);
}
.sig-preview-mail {
  border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
  background: var(--bg-secondary); padding: 14px 16px;
}
.sig-preview-body { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.sig-preview-sig {
  margin: 0; font-family: inherit; font-size: 13px; line-height: 1.5;
  color: var(--text-primary); white-space: pre-wrap; word-break: break-word;
}