/*
 * Companion-panel explainers — tooltip + subtle "ⓘ" affordance.
 * Consumes shared design tokens so it matches the chat theme. See
 * frontend/js/explainers.js.
 */

/* The floating tooltip */
.explain-tip {
    position: absolute;
    z-index: 1500;
    max-width: 240px;
    padding: 9px 11px;
    background: var(--bg-elevated, #1a1a24);
    color: var(--text-secondary, #A09A92);
    border: 1px solid var(--border-color, #3a3a42);
    border-radius: 10px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.78rem;
    line-height: 1.45;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.12s ease;
}
.explain-tip.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Affordance: cursor + a small muted "i" the reader can hover/tap.
   Rendered as a pseudo-element so it survives panel re-renders. */
.has-explain {
    cursor: help;
    -webkit-tap-highlight-color: transparent;
}
.has-explain:focus { outline: none; }
.has-explain:focus-visible {
    outline: 1px solid var(--accent, #C4A77D);
    outline-offset: 3px;
    border-radius: 6px;
}

.tone-row.has-explain .tone-label::after,
.state-meter label.has-explain > span:first-child::after,
.healing-state-indicator.has-explain::after {
    content: "i";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    margin-left: 6px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-style: normal;
    font-size: 9px;
    line-height: 1;
    vertical-align: middle;
    border: 1px solid var(--text-muted, #6B665E);
    border-radius: 50%;
    color: var(--text-muted, #6B665E);
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Brighten the affordance to the gold accent on hover / focus. */
.tone-row.has-explain:hover .tone-label::after,
.tone-row.has-explain:focus-visible .tone-label::after,
.state-meter label.has-explain:hover > span:first-child::after,
.state-meter label.has-explain:focus-visible > span:first-child::after,
.healing-state-indicator.has-explain:hover::after,
.healing-state-indicator.has-explain:focus-visible::after {
    opacity: 1;
    color: var(--accent, #C4A77D);
    border-color: var(--accent, #C4A77D);
}