/* Jaas app components rebuilt in HTML/CSS for the marketing window (DESIGN.md, Components). */
.jw-window {
  --jw-ease: cubic-bezier(0.2, 0, 0, 1);
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  background: var(--page);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-xl);
  box-shadow: 0 30px 70px -30px oklch(0 0 0 / 0.24);
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.5;
}

.jw-sidebar {
  background: var(--barre-laterale);
  border-right: 1px solid var(--filet);
  padding: 1rem 0.75rem;
  font-size: 0.8125rem;
}
.jw-workspace { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.125rem; font-size: 0.9375rem; font-weight: 600; }
.jw-workspace svg { width: 1.25rem; height: 1.25rem; }
.jw-section {
  margin: 1rem 0.5rem 0.375rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gris-texte);
}
.jw-side-list > li {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 2rem; padding: 0 0.5rem; border-radius: 0.375rem;
}
.jw-side-list > li[aria-current] { background: var(--gris-doux); font-weight: 600; box-shadow: inset 2px 0 0 var(--bleu); }
.jw-side-list .jw-agent-name { font-weight: 500; }
/* The app's sidebar counter; amber because the action waits on you. */
.jw-count {
  min-width: 1.125rem; padding: 0 0.3125rem; border-radius: 999px; text-align: center;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.125rem; font-variant-numeric: tabular-nums;
  background: var(--ambre-soft); color: var(--ambre);
}

.jw-thread-head {
  display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;
  min-height: 2.875rem; padding: 0.5rem 1.125rem; border-bottom: 1px solid var(--filet);
  font-size: 0.9375rem; font-weight: 600;
}
.jw-thread-head .jw-meta { font-size: 0.8125rem; font-weight: 400; color: var(--gris-texte); }

.jw-thread { display: grid; align-content: start; gap: 1rem; padding: 1.125rem; }

.jw-message { display: grid; grid-template-columns: 2.125rem minmax(0, 1fr); gap: 0.625rem; }
.jw-message--agent { background: var(--agent-soft); border-radius: var(--rayon-lg); padding: 0.625rem; margin: 0 -0.625rem; }
.jw-name { display: flex; align-items: baseline; gap: 0.375rem; font-weight: 600; }
.jw-name time { font-size: 0.75rem; font-weight: 400; color: var(--gris-texte); font-variant-numeric: tabular-nums; }
.jw-name--scribe { color: var(--agent-scribe); }
.jw-name--orchestrateur { color: var(--agent-orchestrateur); }
.jw-name--analyse { color: var(--agent-analyse); }
.jw-name--accueil { color: var(--agent-accueil); }

.jw-avatar {
  display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: var(--rayon-md);
  font-size: 0.8125rem; font-weight: 700; color: var(--avatar-texte); background: var(--avatar-1);
}
.jw-avatar--tone-2 { background: var(--avatar-2); }
.jw-avatar--tone-3 { background: var(--avatar-3); }
.jw-avatar--tone-4 { background: var(--avatar-4); }
.jw-avatar--tone-5 { background: var(--avatar-5); }
.jw-avatar--tone-6 { background: var(--avatar-6); }
.jw-avatar--scribe, .jw-avatar--orchestrateur, .jw-avatar--analyse, .jw-avatar--accueil { color: var(--page); }
.jw-avatar--scribe { background: var(--agent-scribe); }
.jw-avatar--orchestrateur { background: var(--agent-orchestrateur); }
.jw-avatar--analyse { background: var(--agent-analyse); }
.jw-avatar--accueil { background: var(--agent-accueil); }

.jw-mention { color: var(--bleu); font-weight: 500; background: var(--bleu-soft); border-radius: 0.25rem; padding: 0 0.1875rem; }

.jw-agent-work { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.375rem; font-size: 0.8125rem; color: var(--gris-texte); }
.jw-agent-work svg { width: 0.875rem; height: 0.875rem; }

.jw-action {
  max-width: 32.5rem; margin-top: 0.625rem; padding: 0.625rem 0.875rem;
  background: var(--page); border: 1px solid var(--filet); border-radius: 0.5625rem;
}
.jw-action--pending { border-color: oklch(0.50 0.11 68 / 0.5); box-shadow: inset 3px 0 0 var(--ambre); }
.jw-action--validated { border-color: oklch(0.46 0.11 152 / 0.5); }
.jw-action--refused { border-color: oklch(0.50 0.18 25 / 0.5); }
.jw-action-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 600; }
.jw-action dl { display: grid; grid-template-columns: 6.875rem minmax(0, 1fr); gap: 0.25rem 0.5rem; margin: 0.5rem 0 0.625rem; font-size: 0.8125rem; }
.jw-action dt { color: var(--gris-texte); }
.jw-action dd { margin: 0; }
.jw-action-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.jw-badge {
  display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 999px; padding: 0 0.5rem;
  font-size: 0.8125rem; font-weight: 500; background: var(--gris-doux); color: var(--gris-texte); white-space: nowrap;
}
.jw-badge--wait, .jw-badge--ok, .jw-badge--ko { font-weight: 600; }
.jw-badge--wait { background: var(--ambre-soft); color: var(--ambre); }
.jw-badge--ok { background: var(--vert-soft); color: var(--vert); }
.jw-badge--ko { background: var(--rouge-soft); color: var(--rouge); }
.jw-badge--wait::before, .jw-badge--ok::before, .jw-badge--ko::before {
  content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor;
}

.jw-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; padding: 0 0.875rem;
  border: 1px solid var(--filet); border-radius: var(--rayon-md); background: var(--page); color: var(--encre);
  box-shadow: var(--ombre-xs); font-size: 0.8125rem; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s var(--jw-ease, ease), border-color 0.15s var(--jw-ease, ease);
}
.jw-button:hover { background: var(--gris-doux); }
.jw-button--primary { background: var(--bleu); border-color: var(--bleu); color: var(--page); box-shadow: none; font-weight: 600; }
.jw-button--primary:hover { background: color-mix(in oklch, var(--bleu), black 12%); }
/* Non-interactive imitations inside the aria-hidden window: no hover. */
.jw-action-buttons .jw-button { cursor: default; }
.jw-action-buttons .jw-button:hover { background: var(--page); }

@media (max-width: 640px) {
  .jw-window { grid-template-columns: minmax(0, 1fr); }
  .jw-sidebar { display: none; }
  .jw-thread { padding: 1rem; }
  .jw-action dl { grid-template-columns: 6rem minmax(0, 1fr); }
}