/* ===== CriAI Icon System — Inline SVG via CSS ===== */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Size variants */
.icon-xs  { width: 12px; height: 12px; }
.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 20px; height: 20px; }
.icon-lg  { width: 24px; height: 24px; }
.icon-xl  { width: 32px; height: 32px; }
.icon-2xl { width: 48px; height: 48px; }
.icon-3xl { width: 64px; height: 64px; }

/* ===== Icon Definitions (background-image based for simple usage) ===== */

/* We use a helper function approach: icons are rendered via JS helper or inline SVG in HTML.
   Below are placeholder avatar/type icons for items without images. */

.type-avatar {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  border-radius: 8px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.type-avatar .icon { width: 32px; height: 32px; }

.type-avatar-lg {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  border-radius: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.type-avatar-lg .icon { width: 40px; height: 40px; }