/* ═══════════════════════════════════════
   RESEARCH COMPONENTS & VISUALS (research.css)
   NOTE: options_research.css depends on these shared classes.
   Do not rename or remove shared blocks without updating options_research.css.
═══════════════════════════════════════ */

/* ── COMMAND BAR & AUTOCOMPLETE ── */
.research-command-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-raised);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
    position: relative;
    z-index: 50;
}

.autocomplete-wrap {
    flex: 1;
    position: relative;
}

.command-input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    font-family: var(--font-ui);
    outline: none;
    width: 100%;
}

.command-input::placeholder {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 14px;
}

.command-btn {
    background: var(--accent);
    color: var(--bg-base);
    border: none;
    border-radius: var(--radius-md);
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition-base);
}

.command-btn:hover  { background: var(--accent-hover); }
.command-btn:active { transform: translateY(1px); }

.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 100%;
    background: var(--bg-base);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
    max-height: 320px;
    overflow-y: auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.autocomplete-dropdown::-webkit-scrollbar       { width: 6px; }
.autocomplete-dropdown::-webkit-scrollbar-track { background: transparent; }
.autocomplete-dropdown::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-full); }

.autocomplete-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-base);
    gap: 12px;
}

.autocomplete-item .ac-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.autocomplete-item:hover,
.autocomplete-item.active { background: var(--accent-dim); }

.research-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 60vh;
    color: var(--text-secondary);
}

.research-loader-title {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 600;
}

.research-loader-subtitle {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--accent-dim);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.ac-ticker {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    min-width: 60px;
}

.ac-name {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* ── CARDS & CHARTS ── */
.research-sankey-card,
.research-chart-card,
.research-peer-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
}

.research-chart-title {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
    white-space: nowrap;
}

/* ── HEADER STRUCTURE ── */
.research-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    width: 100%;
}

.research-header-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.research-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.research-title-group {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.research-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    flex-shrink: 0;
}

#research-ticker-display {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 22px;
    color: var(--text-primary);
}

.research-timestamp {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}

/* ── HEADER TEAR SHEET METRICS ── */
.research-tear-sheet {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding-left: 32px;
    margin-left: auto;
    border-left: 1px solid var(--border-light);
}

.tear-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tear-label {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.tear-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* ── ANALYST CONSENSUS WIDGET ── */
.analyst-consensus-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.analyst-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.analyst-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.consensus-badge {
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.consensus-badge.strongbuy,
.consensus-badge.buy  { background: var(--positive-dim); color: var(--positive); }
.consensus-badge.hold { background: var(--bg-raised);    color: var(--text-secondary); }
.consensus-badge.sell,
.consensus-badge.strongsell { background: var(--negative-dim); color: var(--negative); }

.consensus-breakdown-bar {
    display: flex;
    height: 6px;
    width: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-raised);
}
.bar-buy  { background: var(--positive); }
.bar-hold { background: var(--text-secondary); }
.bar-sell { background: var(--negative); }

.consensus-legend {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-family: var(--font-mono);
}
.consensus-legend .buy  { color: var(--positive); }
.consensus-legend .hold { color: var(--text-secondary); }
.consensus-legend .sell { color: var(--negative); }

/* ── PRICE TARGET WIDGET ── */
.pt-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
}

.pt-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.pt-bar-wrapper {
    position: relative;
    height: 6px;
    width: 100%;
    background: var(--bg-raised);
    border-radius: var(--radius-sm);
    margin: 4px 0;
}

.pt-bar-fill {
    position: absolute;
    height: 100%;
    background: var(--accent-dim);
    border-radius: var(--radius-sm);
}

.pt-marker {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 14px;
    background: var(--text-primary);
    border-radius: 2px;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* ── AI ANALYSIS CARDS ── */
.ai-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    gap: 12px;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.ai-card:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.ai-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 4px;
}

.ai-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
    font-family: var(--font-ui);
}

.ai-rating {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--bg-raised);
    font-family: var(--font-mono);
}

.ai-points-clean {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-points-clean li {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    position: relative;
    padding-left: 16px;
    font-family: var(--font-ui);
}

.ai-points-clean li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--accent);
    font-weight: bold;
    font-size: 16px;
}

/* ── HEALTH & VALUATION FLAGS ── */
.research-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.healthflag-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.healthflag-summary-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.healthflag-summary-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-raised);
}

.healthflag-summary-badge.positive { color: var(--positive); border: 1px solid var(--positive); }
.healthflag-summary-badge.warning  { color: var(--warning);  border: 1px solid var(--warning); }
.healthflag-summary-badge.negative { color: var(--negative); border: 1px solid var(--negative); }
.healthflag-summary-badge.total    { color: var(--text-secondary); }

.healthflag-col {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.healthflag-col-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-raised);
}

.healthflag-col-items {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.healthflag-flag-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.healthflag-flag-item:last-child { border-bottom: none; }

.healthflag-flag-icon { flex-shrink: 0; margin-top: 2px; }

.healthflag-flag-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.healthflag-flag-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.healthflag-flag-desc  { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* ── CHART CONTAINERS ── */
#chart-sankey,
#chart-peers {
    flex: 1;
    min-height: 0;
    width: 100%;
    position: relative;
}

/* ── PRICE TARGET LABEL VARIANTS ── */
.pt-label-title {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-align: center;
}

.pt-label-median { color: var(--text-primary); }

/* ── HEALTH FLAG ICON COLORS ── */
.healthflag-flag-icon.positive { color: var(--positive); }
.healthflag-flag-icon.warning  { color: var(--warning); }
.healthflag-flag-icon.negative { color: var(--negative); }

.healthflag-col-count {
    color: var(--text-muted);
    font-size: 11px;
}

.healthflag-columns-container { margin-bottom: 24px; }

/* ── LOADING & ERROR STATES ── */
.research-error-state {
    color: var(--negative);
    height: 60vh;
    justify-content: center;
}

.research-error-state svg { margin-bottom: 16px; }

.research-error-msg {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.research-no-data {
    color: var(--text-muted);
    font-size: 13px;
    font-family: var(--font-mono);
}

.empty-state-msg {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 14px;
}

.empty-state-msg p   { color: var(--text-secondary); }
.empty-state-msg svg { color: var(--text-muted); }


/* ── RESPONSIVE VISUALS ── */
@media (max-width: 1100px) {
    .research-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .research-tear-sheet {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--border-light);
        padding-top: 24px;
        gap: 20px;
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .research-command-bar { padding: 8px 12px; gap: 8px; }

    .research-header-metrics {
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .research-title-area { flex-wrap: wrap; }

    .command-input { font-size: 14px; }
    .command-btn   { padding: 6px 12px; font-size: 11px; }

    .autocomplete-item { padding: 8px 12px; }
    .ac-ticker         { font-size: 13px; min-width: 50px; }
    .ac-name           { font-size: 12px; }

    .tear-metric { width: calc(33.333% - 14px); }
    .tear-value  { font-size: 14px; }
    .tear-label  { font-size: 9px; }

    .analyst-consensus-widget,
    .pt-widget { width: 100%; }

    .ai-card       { padding: 14px; }
    .ai-card-title { font-size: 13px; }
    .ai-points-clean li { font-size: 12px; }
}

@media (max-width: 480px) {
    .tear-metric { width: calc(50% - 10px); }
    .command-input { font-size: 13px; }
    .command-btn   { padding: 5px 10px; font-size: 10px; }
}


/* ════════════════════════════════════════
   POPULAR NARRATIVES LEFT PANE
════════════════════════════════════════ */

.research-popular-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
}

.research-popular-badge {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-raised);
    padding: 2px 6px;
    border-radius: var(--radius-full);
}

.research-popular-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    background: transparent;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    transition: background var(--transition-base);
}

.research-popular-item:hover {
    background: var(--bg-hover);
}

.research-popular-item:last-child {
    border-bottom: none;
}

.research-popular-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 52px;
    margin-top: 2px;
}

.research-popular-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-raised);
    object-fit: contain;
    display: block;
}

.research-popular-ticker {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    color: var(--accent);
    width: 100%;
    padding: 1px 4px;
    background: var(--accent-dim);
    border-radius: var(--radius-sm);
    text-align: center;
}

.research-popular-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.research-popular-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-ui);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.research-popular-narrative-title {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    line-height: 1.4;
}

.research-popular-excerpt {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-ui);
    line-height: 1.4;
}

.research-popular-error {
    padding: 16px 14px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-ui);
}

/* ── Skeleton loaders ── */
.research-popular-skeleton {
    height: 68px;
    margin: 8px 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--bg-raised) 25%,
        var(--bg-surface) 50%,
        var(--bg-raised) 75%
    );
    background-size: 200% 100%;
    animation: popular-shimmer 1.4s ease-in-out infinite;
}

@keyframes popular-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Carousel animation ── */
@keyframes popular-carousel {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.research-popular-carousel {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: max-content;
    animation: popular-carousel 50s linear infinite;
    will-change: transform;
}

/* Pause on hover (desktop) and on touch-hold (mobile) */
.research-popular-list:hover .research-popular-carousel,
.research-popular-list:active .research-popular-carousel {
    animation-play-state: paused;
}

/* ── 1100px: carousel card layout ── */
@media (max-width: 1100px) {
    .research-popular-item {
        flex-shrink: 0;
        width: 150px;
        height: 100%;
        box-sizing: border-box;
        border-bottom: none;
        border-right: 1px solid var(--border);
        padding: 10px;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
    .research-popular-logo-wrap {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        width: 100%;
    }
    .research-popular-logo { width: 20px; height: 20px; }
    .research-popular-ticker { width: auto; font-size: 11px; }
    .research-popular-content { gap: 2px; width: 100%; }
    .research-popular-excerpt { display: none; }
    .research-popular-name { font-size: 11px; }
    .research-popular-narrative-title { font-size: 10px; }
}