/* AI Role — thành phần dùng chung cho ai-role-platform.html và ai-role-chat.html.
   Token màu/chữ lấy từ styles_v3.css (:root). */

:root {
  --ar-radius-card: 16px;
  --ar-shadow-float: 0 18px 40px -24px rgb(15 23 42 / 0.28);
  --ar-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231154ED' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ar-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Avatar chữ của role (CFO, CMO…) */
.ar-mono {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #EAF1FF;
  color: #1154ED;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}
.ar-mono--sm { width: 32px; height: 32px; border-radius: 10px; font-size: 0.625rem; }
.ar-mono--lg { width: 56px; height: 56px; border-radius: 16px; font-size: 0.875rem; }
.ar-mono[data-tone='sky'] { background: #E6F4FE; color: #0369A1; }
.ar-mono[data-tone='indigo'] { background: #EEF0FF; color: #4338CA; }
.ar-mono[data-tone='teal'] { background: #E6F7F4; color: #0F766E; }
.ar-mono[data-tone='amber'] { background: #FEF5E7; color: #B45309; }
.ar-mono[data-tone='slate'] { background: #F1F5F9; color: #334155; }

/* Màu theo role: --tone-bg nền nhạt, --tone-fg màu chính */
[data-tone] { --tone-bg: #EAF1FF; --tone-fg: #1154ED; }
[data-tone='indigo'] { --tone-bg: #EEF0FF; --tone-fg: #4338CA; }
[data-tone='sky'] { --tone-bg: #E6F4FE; --tone-fg: #0369A1; }
[data-tone='teal'] { --tone-bg: #E3F6F2; --tone-fg: #0F766E; }
[data-tone='amber'] { --tone-bg: #FEF3E2; --tone-fg: #B45309; }
[data-tone='slate'] { --tone-bg: #EEF2F6; --tone-fg: #334155; }

/* Avatar icon của role (AR.avatar) */
.ar-avatar {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tone-bg, #EEF2F6);
  color: var(--tone-fg, #334155);
  font-size: 0.625rem;
  font-weight: 700;
}
.ar-avatar svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ar-avatar--xs { width: 20px; height: 20px; }
.ar-avatar--xs svg { stroke-width: 2.4; }
.ar-avatar--sm { width: 28px; height: 28px; }
.ar-avatar--sm svg { stroke-width: 2; }
.ar-avatar--lg { width: 56px; height: 56px; }
.ar-avatar--xl { width: 64px; height: 64px; }

.ar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--emp-border);
  background: #fff;
  color: var(--emp-text-label);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
.ar-chip svg { flex-shrink: 0; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-chip--evidence { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }

.ar-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #DBE6FE;
  background: #EFF6FF;
  color: var(--emp-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ar-tag--muted { border-color: var(--emp-border); background: #F1F5F9; color: #475569; }

.ar-checks {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.ar-checks li {
  position: relative;
  padding-left: 30px;
  color: var(--emp-text-label);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.ar-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #EFF6FF var(--ar-check) center / 12px no-repeat;
}

.ar-icon-ext { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.ar-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}