/* /public_html/assets/css/richPromptInput.css */
/* Rich Prompt Input — tokens for #users and @courses */

.rp-wrap{
  width: 100%;
}

.rp-input{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 80%, transparent);
  background: color-mix(in srgb, var(--color-surface-soft) 92%, transparent);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  outline: none;

  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.rp-input:focus{
  border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

/* Placeholder for contenteditable */
.rp-input:empty::before{
  content: attr(data-placeholder);
  opacity: 0.55;
  pointer-events: none;
}

/* Token base */
.rp-token{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  user-select: none;
  cursor: default;
  vertical-align: baseline;
}

/* Prefix slightly faded */
.rp-token__prefix{
  opacity: 0.8;
}

/* User token */
.rp-token--user{
  border-color: color-mix(in srgb, #3b82f6 55%, var(--color-border-subtle));
  background: color-mix(in srgb, #3b82f6 12%, var(--color-surface));
  color: color-mix(in srgb, #3b82f6 65%, var(--color-text));
}

/* Course token */
.rp-token--course{
  border-color: color-mix(in srgb, #a855f7 55%, var(--color-border-subtle));
  background: color-mix(in srgb, #a855f7 12%, var(--color-surface));
  color: color-mix(in srgb, #a855f7 70%, var(--color-text));
}

.rp-token{
  --rp-token-accent: var(--color-primary);
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rp-token-accent) 55%, transparent);
  background: color-mix(in srgb, var(--rp-token-accent) 14%, transparent);
  box-shadow: 0 8px 18px rgba(15,23,42,0.10);
}

.rp-token__prefix{
  font-weight: 800;
  color: color-mix(in srgb, var(--rp-token-accent) 85%, #000 15%);
}

.rp-token__label{
  font-weight: 650;
}

.rp-token--gala{
  border-color: color-mix(in srgb, #f59e0b 55%, var(--color-border-subtle));
  background: color-mix(in srgb, #f59e0b 12%, var(--color-surface));
  color: color-mix(in srgb, #f59e0b 70%, var(--color-text));
}

.rp-token{
  /* fallback si aucune couleur n'est posée */
  --rp-token-accent: var(--color-text, #0f172a);

  /* texte = couleur accent (le JS peut aussi la poser en inline) */
  color: var(--rp-token-accent);

  /* fond et bordure basés sur l'accent (dilués) */
  background: color-mix(in srgb, var(--rp-token-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--rp-token-accent) 45%, transparent);

  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.rp-token:hover{
  background: color-mix(in srgb, var(--rp-token-accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--rp-token-accent) 60%, transparent);
}

.rp-token__prefix,
.rp-token__label{
  color: inherit;
}