/**
 * FEATURE DISCOVERABILITY
 * Helps users discover and understand available features
 */

/* Tooltips and hints for discoverability */
.feature-hint {
    position: relative;
    display: inline-block;
    cursor: help;

.feature-hint::after {
    content: '?';
    display: inline-block;
    width: var(--spacing-md);
    height: var(--spacing-md);
    line-height: var(--spacing-md);
    text-align: center;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb, 0, 212, 255), 0.2);
    color: var(--color-primary, var(--color-primary));
    font-size: var(--font-size-xs);
    font-weight: bold;
    margin-left: var(--spacing-xs);
    vertical-align: middle;

.feature-hint:hover::after {
    background: rgba(var(--color-primary-rgb, 0, 212, 255), 0.4);

/* Keyboard shortcut indicators */
.keyboard-shortcut-hint {
    font-size: 0.75rem;
    color: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.5);
    margin-left: 0.5rem;
    font-family: 'Roboto Mono', monospace;

/* Feature badges */
.feature-badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: rgba(var(--color-primary-rgb, 0, 212, 255), 0.2);
    border: 1px solid rgba(var(--color-primary-rgb, 0, 212, 255), 0.3);
    border-radius: calc(var(--radius-sm) * 0.75);
    font-size: 0.75rem;
    color: var(--color-primary, var(--color-primary));
    margin-left: 0.5rem;

.feature-badge.new {
    background: rgba(var(--color-warning-rgb, 255, 193, 7), 0.2);
    border-color: rgba(var(--color-warning-rgb, 255, 193, 7), 0.3);
    color: #ffc107;
    animation: pulse 2s infinite;

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }

/* Help text for features */
.help-text {
    font-size: 0.875rem;
    color: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.6);
    font-style: italic;
    margin-top: 0.25rem;

/* Feature discovery tooltips */
[data-feature-hint] {
    position: relative;
    cursor: help;

[data-feature-hint]:hover::before {
    content: attr(data-feature-hint);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem;
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.9);
    color: var(--color-text-primary);
    border: 1px solid rgba(var(--color-primary-rgb, 0, 212, 255), 0.3);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 0.25rem;

[data-feature-hint]:hover::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(var(--color-primary-rgb, 0, 212, 255), 0.3);
    margin-bottom: -var(--spacing-xs);

}}}}}}}}}}}