/* ============================================================
   WatZap Clean — Components
   Spec: docs/superpowers/specs/2026-05-25-clean-design-system-design.md §6
   Reference: docs/design-system-clean/02-components.md
   Requires: design-tokens-clean.css (CSS variables)
   ------------------------------------------------------------
   12 components: Button, Dropdown, Input, Checkbox/Radio,
   Card, Modal, Badge, Alert, Tabs, Table, Tooltip, Avatar.
   ============================================================ */

/* ------------------------------------------------------------
   Button (wzc-btn)
   ------------------------------------------------------------ */
.wzc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--duration-fast) var(--easing-standard),
                border-color var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard),
                box-shadow var(--duration-fast) var(--easing-standard);
    text-decoration: none;
    white-space: nowrap;
}
.wzc-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wzc-btn[disabled],
.wzc-btn.is-disabled {
    background: var(--color-bg-muted);
    color: var(--color-fg-subtle);
    border-color: transparent;
    cursor: not-allowed;
}

.wzc-btn--primary { background: var(--color-brand-500); color: var(--color-fg-on-brand); }
.wzc-btn--primary:hover { background: var(--color-brand-600); }
.wzc-btn--primary:active { background: var(--color-brand-700); }

.wzc-btn--secondary {
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    border-color: var(--color-border-strong);
}
.wzc-btn--secondary:hover { background: var(--color-bg-subtle); }

.wzc-btn--ghost { background: transparent; color: var(--color-fg-default); }
.wzc-btn--ghost:hover { background: var(--color-bg-subtle); }

.wzc-btn--danger {
    background: var(--color-bg-surface);
    color: var(--color-danger-500);
    border-color: var(--color-border-default);
}
.wzc-btn--danger:hover {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-500);
}

.wzc-btn--sm { height: 28px; padding: 0 var(--space-3); font-size: var(--font-size-sm); }
.wzc-btn--lg { height: 44px; padding: 0 var(--space-5); font-size: var(--font-size-md); }

.wzc-btn--icon { width: 36px; padding: 0; }
.wzc-btn--icon.wzc-btn--sm { width: 28px; }
.wzc-btn--icon.wzc-btn--lg { width: 44px; }

/* ------------------------------------------------------------
   Dropdown (wzc-dropdown)
   ------------------------------------------------------------ */
.wzc-dropdown-anchor { position: relative; display: inline-block; }
.wzc-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 240px;
    padding: var(--space-1);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--easing-standard),
                transform var(--duration-fast) var(--easing-standard);
}
.wzc-dropdown.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Disamakan dengan docs/design-system-v3.md pada 2026-09-08. Sebelumnya berkas
   ini mengirim `padding: var(--space-2) var(--space-3)` TANPA min-height,
   sehingga barisnya merender 37px sementara dokumen menjanjikan 32px --
   siapa pun yang membangun dropdown dengan mengikuti dokumen mendapat baris
   5px lebih tinggi daripada yang ia kira, dan tidak sadar sampai mengukur.
   Ritme 32px inilah yang dipakai menu aksi di seluruh aplikasi. */
.wzc-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 32px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-fg-default);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard);
}
.wzc-dropdown-item:hover { background: var(--color-bg-subtle); }
.wzc-dropdown-item.is-disabled { color: var(--color-fg-subtle); cursor: not-allowed; }
.wzc-dropdown-item.is-disabled:hover { background: transparent; }
.wzc-dropdown-item.is-danger { color: var(--color-danger-500); }
.wzc-dropdown-item.is-danger:hover { background: var(--color-danger-bg); }
/* flex-basis tetap: tanpa itu rail ikon menyusut pada item berlabel panjang,
   dan teks antar-baris jadi tidak sejajar. */
.wzc-dropdown-icon { flex: 0 0 16px; width: 16px; color: var(--color-fg-muted); font-size: 13px; text-align: center; }
.wzc-dropdown-item:hover .wzc-dropdown-icon { color: var(--color-fg-strong); }
.wzc-dropdown-item.is-danger .wzc-dropdown-icon { color: var(--color-danger-500); }
.wzc-dropdown-divider {
    height: 1px;
    background: var(--color-border-default);
    margin: var(--space-1) calc(-1 * var(--space-1));
}
.wzc-dropdown-section {
    font-size: var(--font-size-xs);
    color: var(--color-fg-subtle);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--space-2) var(--space-3) var(--space-1);
}
.wzc-dropdown-shortcut {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-fg-subtle);
    font-family: var(--font-family-mono);
}

/* ------------------------------------------------------------
   Input (wzc-input, wzc-input-group, wzc-field)
   ------------------------------------------------------------ */
.wzc-field { display: flex; flex-direction: column; gap: var(--space-2); }
.wzc-field-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-fg-strong);
}
.wzc-field-helper { font-size: var(--font-size-sm); color: var(--color-fg-muted); }
.wzc-field-helper.is-error { color: var(--color-danger-500); }

.wzc-input {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    transition: border-color var(--duration-fast) var(--easing-standard),
                box-shadow var(--duration-fast) var(--easing-standard);
}
.wzc-input:hover { border-color: var(--color-border-strong); }
.wzc-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    /* --focus-ring-input, bukan --focus-ring: border yang berubah sudah jadi
       penandanya; cincin dua lapis di luarnya terbaca sebagai bingkai dobel. */
    box-shadow: var(--focus-ring-input, 0 0 0 3px rgba(220, 35, 96, 0.25));
}
.wzc-input::placeholder { color: var(--color-fg-subtle); }
.wzc-input.is-error { border-color: var(--color-danger-500); }
.wzc-input.is-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); }
textarea.wzc-input {
    height: auto;
    padding: var(--space-2) var(--space-3);
    min-height: 100px;
    resize: vertical;
}

.wzc-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    transition: border-color var(--duration-fast) var(--easing-standard),
                box-shadow var(--duration-fast) var(--easing-standard);
}
.wzc-input-group:hover { border-color: var(--color-border-strong); }
.wzc-input-group:focus-within { border-color: var(--color-border-focus); box-shadow: var(--focus-ring-input, 0 0 0 3px rgba(220, 35, 96, 0.25)); }
.wzc-input-group .wzc-input { border: 0; box-shadow: none; }
.wzc-input-group .wzc-input:focus { box-shadow: none; }
.wzc-input-group-addon {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
}
.wzc-input-group-addon.is-trailing { border-left: 1px solid var(--color-border-default); }
.wzc-input-group-addon.is-leading { border-right: 1px solid var(--color-border-default); }

/* ------------------------------------------------------------
   Checkbox & Radio — standard (wzc-check)
   ------------------------------------------------------------ */
.wzc-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--color-fg-default);
    user-select: none;
}
.wzc-check input { position: absolute; opacity: 0; }
.wzc-check-box {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--duration-fast) var(--easing-standard),
                background var(--duration-fast) var(--easing-standard);
}
.wzc-check-box.is-radio { border-radius: var(--radius-pill); }
.wzc-check input:checked + .wzc-check-box {
    background: var(--color-brand-500);
    border-color: var(--color-brand-500);
}
.wzc-check input:checked + .wzc-check-box.is-radio::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-fg-on-brand);
}
.wzc-check input:checked + .wzc-check-box:not(.is-radio)::after {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--color-fg-on-brand);
    border-bottom: 2px solid var(--color-fg-on-brand);
    transform: rotate(-45deg) translate(1px, -1px);
}
.wzc-check input:focus-visible + .wzc-check-box { box-shadow: var(--focus-ring); }

/* ------------------------------------------------------------
   Choice — card-style radio (wzc-choice, wzc-choice-group)
   ------------------------------------------------------------ */
.wzc-choice-group { display: flex; flex-direction: column; gap: var(--space-2); }
.wzc-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--easing-standard),
                background var(--duration-fast) var(--easing-standard),
                box-shadow var(--duration-fast) var(--easing-standard);
}
.wzc-choice:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }
.wzc-choice.is-selected {
    border-color: var(--color-brand-500);
    background: var(--color-brand-50);
    box-shadow: 0 0 0 3px rgba(220, 35, 96, 0.06);
}
.wzc-choice input { position: absolute; opacity: 0; }
.wzc-choice-dot {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-bg-surface);
    position: relative;
}
.wzc-choice-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand-500);
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--duration-fast) var(--easing-standard);
}
.wzc-choice.is-selected .wzc-choice-dot { border-color: var(--color-brand-500); }
.wzc-choice.is-selected .wzc-choice-dot::after { transform: translate(-50%, -50%) scale(1); }
.wzc-choice-body { flex: 1; min-width: 0; }
.wzc-choice-title {
    font-weight: var(--font-weight-bold);
    color: var(--color-fg-strong);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.wzc-choice-desc {
    font-size: var(--font-size-sm);
    color: var(--color-fg-muted);
    margin-top: var(--space-1);
}

/* ------------------------------------------------------------
   Card (wzc-card)
   ------------------------------------------------------------ */
.wzc-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.wzc-card__header { padding: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
.wzc-card__body { padding: var(--space-4); }
.wzc-card__footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-bg-subtle);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}
.wzc-card--interactive {
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard),
                border-color var(--duration-fast) var(--easing-standard);
}
.wzc-card--interactive:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
}
.wzc-card--selected {
    border-color: var(--color-brand-500);
    background: var(--color-brand-50);
    box-shadow: 0 0 0 3px rgba(220, 35, 96, 0.08);
}

/* ------------------------------------------------------------
   Modal (wzc-modal, wzc-modal-overlay)
   ------------------------------------------------------------ */
.wzc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--easing-standard);
}
.wzc-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.wzc-modal {
    width: 560px;
    max-width: calc(100vw - 32px);
    max-height: 85vh;
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.96);
    transition: transform var(--duration-normal) var(--easing-standard);
}
.wzc-modal-overlay.is-open .wzc-modal { transform: scale(1); }
/* Ukuran ini sudah tertulis di docs/design-system-v3.md sejak lama tapi belum
   pernah ada di CSS-nya, jadi dokumennya menjanjikan modifier yang tidak
   berfungsi. Nilainya diambil apa adanya dari tabel di sana. */
.wzc-modal--sm { width: 420px; }
.wzc-modal--lg { width: 760px; }
.wzc-modal--xl { width: 940px; }
.wzc-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* --space-3, sama dengan footer. Sebelumnya --space-4, jadi kepala modal
       lebih tinggi daripada kaki yang isinya justru lebih besar (tombol 36px
       vs judul 20px). */
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border-default);
}
.wzc-modal__title {
    /* margin: 0 supaya kelas ini tidak bergantung tag. Dipakai dengan <div>
       maupun <h2>/<h3>; tanpa baris ini versi heading mewarisi margin bawaan
       dan kepala modal membengkak ~50px. Dua halaman sudah menambalnya
       sendiri-sendiri (contacts_broadcast.css, contacts_detil_with_limit.css) —
       tambalan itu kini mubazir, bukan berubah artinya. */
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-fg-strong);
}
.wzc-modal__close {
    /* Kotak 32x32 dengan ikon di tengah, bukan tinggi yang digerakkan padding.
       Bentuk padding lama menghasilkan 33,3px dan MENENTUKAN tinggi kepala
       modal — judulnya sendiri cuma 20px. Nilai di sini bukan karangan: 13
       modal di 4 berkas CSS sudah menambalnya sendiri-sendiri dan semuanya
       tiba pada angka yang sama (32x32, ikon 14px/line-height 1). Tambalan itu
       kini mubazir, bukan berubah artinya. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--color-fg-muted);
}
.wzc-modal__close i {
    font-size: 14px;
    line-height: 1;
}
.wzc-modal__close:hover { background: var(--color-bg-subtle); color: var(--color-fg-strong); }
.wzc-modal__body { padding: var(--space-5); overflow-y: auto; flex: 1; }
.wzc-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border-default);
    background: var(--color-bg-subtle);
}

/* ------------------------------------------------------------
   Badge (wzc-badge)
   ------------------------------------------------------------ */
.wzc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    font-family: var(--font-family-base);
}
.wzc-badge--soft-neutral { background: var(--color-bg-muted); color: var(--color-fg-default); }
.wzc-badge--soft-brand { background: var(--color-brand-50); color: var(--color-brand-600); }
.wzc-badge--soft-success { background: var(--color-success-bg); color: var(--color-success-500); }
.wzc-badge--soft-warning { background: var(--color-warning-bg); color: var(--color-warning-500); }
.wzc-badge--soft-danger { background: var(--color-danger-bg); color: var(--color-danger-500); }
.wzc-badge--soft-info { background: var(--color-info-bg); color: var(--color-info-500); }
.wzc-badge--solid-neutral { background: var(--color-fg-muted); color: var(--color-fg-on-brand); }
.wzc-badge--solid-brand { background: var(--color-brand-500); color: var(--color-fg-on-brand); }
.wzc-badge--solid-success { background: var(--color-success-500); color: var(--color-fg-on-brand); }
.wzc-badge--solid-danger { background: var(--color-danger-500); color: var(--color-fg-on-brand); }
.wzc-badge--rect { border-radius: var(--radius-sm); }

/* ------------------------------------------------------------
   Alert (wzc-alert)
   ------------------------------------------------------------ */
.wzc-alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid;
    border-left-width: 3px;
}
.wzc-alert__icon { flex: 0 0 18px; padding-top: 2px; }
.wzc-alert__body { flex: 1; }
.wzc-alert__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); }
.wzc-alert__desc { font-size: var(--font-size-sm); color: var(--color-fg-default); }
.wzc-alert--info { background: var(--color-info-bg); border-color: var(--color-info-500); }
.wzc-alert--info .wzc-alert__icon,
.wzc-alert--info .wzc-alert__title { color: var(--color-info-500); }
.wzc-alert--success { background: var(--color-success-bg); border-color: var(--color-success-500); }
.wzc-alert--success .wzc-alert__icon,
.wzc-alert--success .wzc-alert__title { color: var(--color-success-500); }
.wzc-alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-500); }
.wzc-alert--warning .wzc-alert__icon,
.wzc-alert--warning .wzc-alert__title { color: var(--color-warning-500); }
.wzc-alert--danger { background: var(--color-danger-bg); border-color: var(--color-danger-500); }
.wzc-alert--danger .wzc-alert__icon,
.wzc-alert--danger .wzc-alert__title { color: var(--color-danger-500); }

/* ------------------------------------------------------------
   Tabs (wzc-tabs underline + wzc-pills segmented)
   ------------------------------------------------------------ */
.wzc-tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--color-border-default); }
.wzc-tab {
    position: relative;
    padding: var(--space-3) var(--space-1);
    color: var(--color-fg-muted);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    background: transparent;
    border: 0;
    font-size: var(--font-size-base);
    font-family: inherit;
}
.wzc-tab:hover { color: var(--color-fg-strong); }
.wzc-tab.is-active { color: var(--color-brand-500); }
.wzc-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--color-brand-500);
    border-radius: 1px 1px 0 0;
}

.wzc-pills {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-bg-muted);
    border-radius: var(--radius-md);
}
.wzc-pill {
    padding: var(--space-1) var(--space-3);
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-fg-muted);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-standard);
    font-family: var(--font-family-base);
}
.wzc-pill:hover { color: var(--color-fg-strong); }
.wzc-pill.is-active {
    background: var(--color-bg-surface);
    color: var(--color-fg-strong);
    box-shadow: var(--shadow-xs);
}

/* ------------------------------------------------------------
   Table (wzc-table, wzc-table-wrap)
   ------------------------------------------------------------ */
.wzc-table-wrap {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-surface);
}
/* 14px, disamakan dengan seluruh tabel lain di aplikasi pada 2026-09-08.
   Sebelumnya --font-size-sm (12px), dan itu membuat dokumen membantah dirinya
   sendiri: seksi Typography menyatakan tier aplikasi "starts at 14px because
   that is the density this product needs", sementara komponen tabelnya
   mengirim 12px. Dua sistem tabel hidup berdampingan dengan ukuran berbeda --
   .wzc-table 12px di /manage-numbers dan /waba-billings, wb-broadcast-table
   14px di sisanya -- dan tidak ada yang bisa menjelaskan kenapa. Kepala tabel
   TETAP --font-size-xs: kepala kecil berhuruf besar di atas isi 14px memang
   pola yang disengaja, bukan bagian dari drift ini. */
.wzc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
}
.wzc-table th {
    background: var(--color-bg-subtle);
    color: var(--color-fg-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border-default);
}
.wzc-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-fg-default);
}
.wzc-table tr:last-child td { border-bottom: 0; }
.wzc-table tbody tr:hover td { background: var(--color-bg-subtle); }

/* ------------------------------------------------------------
   Tooltip (wzc-tooltip)
   ------------------------------------------------------------ */
.wzc-tooltip-anchor { position: relative; display: inline-block; }
.wzc-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-fg-strong);
    color: var(--color-fg-on-brand);
    font-size: var(--font-size-sm);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast);
}
.wzc-tooltip-anchor:hover .wzc-tooltip,
.wzc-tooltip-anchor:focus-within .wzc-tooltip { opacity: 1; }
.wzc-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--color-fg-strong);
}

/* ------------------------------------------------------------
   Avatar (wzc-avatar, wzc-avatar-group)
   ------------------------------------------------------------ */
.wzc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    font-family: var(--font-family-base);
}
.wzc-avatar--xs { width: 20px; height: 20px; font-size: var(--font-size-xs); }
.wzc-avatar--sm { width: 28px; height: 28px; font-size: var(--font-size-sm); }
.wzc-avatar--md { width: 36px; height: 36px; font-size: var(--font-size-base); }
.wzc-avatar--lg { width: 48px; height: 48px; font-size: var(--font-size-md); }
.wzc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wzc-avatar-group { display: inline-flex; }
.wzc-avatar-group .wzc-avatar { border: 2px solid var(--color-bg-surface); }
.wzc-avatar-group .wzc-avatar + .wzc-avatar { margin-left: -8px; }