/* === Entity Icon Base === */
.bs-ei {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #64748b;
}

.bs-ei svg {
    width: 100%;
    height: 100%;
}

/* Lucide stroke-based icons */
.bs-ei--lucide svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Brand fill-based icons: keep original colors */

/* Entity field row */
.bs-ef {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

/* Copy button */
.bs-entity-copy-btn {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border: none;
    background: none;
    cursor: pointer;
    color: #94a3b8;
    transition: color 0.15s ease;
    border-radius: 4px;
    margin-left: 3px;
}

.bs-entity-copy-btn:hover {
    color: #1DB0E1;
}

.bs-entity-copy-btn .bs-ei {
    width: 20px;
    height: 20px;
}

/* Status icon modifiers */
.bs-ei--online {
    color: #22c55e;
}

.bs-ei--offline {
    color: #ef4444;
}

/* === Dark Mode === */
html.bs-dark .bs-ei {
    color: #9ca3af;
}

html.bs-dark .bs-ei--online {
    color: #4ade80;
}

html.bs-dark .bs-ei--offline {
    color: #f87171;
}

html.bs-dark .bs-ei--brand {
    opacity: 0.9;
}

/* Black brand icons need inversion on dark bg */
html.bs-dark .bs-ei--brand[data-brand="github"] svg,
html.bs-dark .bs-ei--brand[data-brand="tiktok"] svg,
html.bs-dark .bs-ei--brand[data-brand="x-official"] svg,
html.bs-dark .bs-ei--brand[data-brand="medium"] svg,
html.bs-dark .bs-ei--brand[data-brand="macos"] svg,
html.bs-dark .bs-ei--brand[data-brand="ios"] svg {
    filter: invert(1);
}

/* Kakao yellow needs slight darkening on dark bg */
html.bs-dark .bs-ei--brand[data-brand="kakao"] svg {
    filter: brightness(0.8);
}

html.bs-dark .bs-entity-copy-btn {
    color: #6b7280;
}

html.bs-dark .bs-entity-copy-btn:hover {
    color: #7cc8f0;
}