.ai-credit-balance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .3rem .65rem;
    max-width: 100%;
    min-height: 44px;
    padding: .4rem .65rem;
    border: 1px solid var(--drakima-cyan-line, rgba(0, 255, 204, .35));
    border-radius: 6px;
    background: var(--drakima-panel, #0c0b18);
    color: var(--drakima-text, #f7edff);
    font-family: var(--drakima-mono-font, monospace);
    font-size: .8rem;
    line-height: 1.35;
    text-decoration: none;
}

.ai-credit-balance strong { color: var(--drakima-cyan, #00ffcc); }
.ai-credit-balance small { display: block; color: var(--drakima-muted, #c8bdd8); }
.ai-credit-balance small[hidden] { display: none; }
.ai-credit-balance:hover { border-color: var(--drakima-cyan, #00ffcc); color: var(--drakima-text, #f7edff); }
.ai-credit-balance:focus-visible { outline: 2px solid var(--drakima-pink, #ff00ff); outline-offset: 3px; }
.ai-credit-balance.ai-credit-balance--compact {
    min-height: 0;
    padding: .2rem .35rem;
    gap: .35rem;
    flex-wrap: nowrap;
}
.vn-credit-display { position: absolute; top: .75rem; right: .75rem; z-index: 320; max-width: calc(100% - 6rem); }

.ai-response-costs {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .85rem;
    min-width: 0;
    margin: .4rem 0;
    color: var(--drakima-muted, #c8bdd8);
    font-size: .75rem;
    line-height: 1.5;
}
.ai-response-costs > span { white-space: nowrap; }
.ai-response-costs strong { color: var(--drakima-cyan, #00ffcc); }
.gynoid-room-chat-size-bar > .ai-response-costs { flex: 1; justify-content: center; margin: 0; }
:is(.lorekeeper-composer, .site-lorekeeper-composer) .ai-composer-toolbar { flex-wrap: wrap; }
:is(.lorekeeper-composer, .site-lorekeeper-composer) .ai-composer-toolbar > .ai-response-costs { flex: 1 1 6rem; margin: 0 auto 0 0; }