/**
 * Evidence Highlights CSS
 * 
 * Styles for the Standard Competency Evidence Modal highlighting system.
 * Each Babson Core Competency has a distinct color for visual differentiation.
 * Based on Apple Design System principles (DESIGN_SYSTEM.md).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   COMPETENCY HIGHLIGHT COLORS
   10 Babson Core Competencies with distinct, harmonious colors
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Collaboration - Green */
    --highlight-collaboration: rgba(52, 199, 89, 0.15);
    --highlight-collaboration-border: #34C759;
    --highlight-collaboration-text: #248A3D;
    
    /* Communication - Blue */
    --highlight-communication: rgba(0, 113, 227, 0.15);
    --highlight-communication-border: #0071E3;
    --highlight-communication-text: #0051A8;
    
    /* Entrepreneurial Leadership - Purple */
    --highlight-entrepreneurial-leadership: rgba(175, 82, 222, 0.15);
    --highlight-entrepreneurial-leadership-border: #AF52DE;
    --highlight-entrepreneurial-leadership-text: #8944AB;
    
    /* Ethics - Teal */
    --highlight-ethics: rgba(0, 199, 190, 0.15);
    --highlight-ethics-border: #00C7BE;
    --highlight-ethics-text: #00A19A;
    
    /* Integrated Sustainability - Forest Green */
    --highlight-integrated-sustainability: rgba(50, 173, 90, 0.15);
    --highlight-integrated-sustainability-border: #32AD5A;
    --highlight-integrated-sustainability-text: #248A3D;
    
    /* Problem-Solving - Orange */
    --highlight-problem-solving: rgba(255, 149, 0, 0.15);
    --highlight-problem-solving-border: #FF9500;
    --highlight-problem-solving-text: #C77700;
    
    /* Continuous Learning - Cyan */
    --highlight-continuous-learning: rgba(90, 200, 250, 0.15);
    --highlight-continuous-learning-border: #5AC8FA;
    --highlight-continuous-learning-text: #0A84FF;
    
    /* Analytical Thinking - Indigo */
    --highlight-analytical-thinking: rgba(88, 86, 214, 0.15);
    --highlight-analytical-thinking-border: #5856D6;
    --highlight-analytical-thinking-text: #4645AB;
    
    /* Resilience - Rose */
    --highlight-resilience: rgba(255, 45, 85, 0.15);
    --highlight-resilience-border: #FF2D55;
    --highlight-resilience-text: #D70040;
    
    /* Agility - Mint */
    --highlight-agility: rgba(0, 199, 150, 0.15);
    --highlight-agility-border: #00C796;
    --highlight-agility-text: #00A178;
}

/* Dark mode adjustments */
[data-theme="dark"] {
    --highlight-collaboration: rgba(52, 199, 89, 0.25);
    --highlight-communication: rgba(0, 113, 227, 0.25);
    --highlight-entrepreneurial-leadership: rgba(175, 82, 222, 0.25);
    --highlight-ethics: rgba(0, 199, 190, 0.25);
    --highlight-integrated-sustainability: rgba(50, 173, 90, 0.25);
    --highlight-problem-solving: rgba(255, 149, 0, 0.25);
    --highlight-continuous-learning: rgba(90, 200, 250, 0.25);
    --highlight-analytical-thinking: rgba(88, 86, 214, 0.25);
    --highlight-resilience: rgba(255, 45, 85, 0.25);
    --highlight-agility: rgba(0, 199, 150, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIGHLIGHT BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.evidence-highlight {
    padding: 2px 4px;
    margin: 0 -2px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
    display: inline;
    border-bottom: 2px solid transparent;
}

.evidence-highlight:hover {
    filter: brightness(0.92);
}

.evidence-highlight:focus {
    outline: 2px solid var(--accent, #0071E3);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPETENCY-SPECIFIC HIGHLIGHT CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

.evidence-highlight--collaboration {
    background: var(--highlight-collaboration);
    border-bottom-color: var(--highlight-collaboration-border);
}

.evidence-highlight--communication {
    background: var(--highlight-communication);
    border-bottom-color: var(--highlight-communication-border);
}

.evidence-highlight--entrepreneurial-leadership {
    background: var(--highlight-entrepreneurial-leadership);
    border-bottom-color: var(--highlight-entrepreneurial-leadership-border);
}

.evidence-highlight--ethics {
    background: var(--highlight-ethics);
    border-bottom-color: var(--highlight-ethics-border);
}

.evidence-highlight--integrated-sustainability {
    background: var(--highlight-integrated-sustainability);
    border-bottom-color: var(--highlight-integrated-sustainability-border);
}

.evidence-highlight--problem-solving {
    background: var(--highlight-problem-solving);
    border-bottom-color: var(--highlight-problem-solving-border);
}

.evidence-highlight--continuous-learning {
    background: var(--highlight-continuous-learning);
    border-bottom-color: var(--highlight-continuous-learning-border);
}

.evidence-highlight--analytical-thinking {
    background: var(--highlight-analytical-thinking);
    border-bottom-color: var(--highlight-analytical-thinking-border);
}

.evidence-highlight--resilience {
    background: var(--highlight-resilience);
    border-bottom-color: var(--highlight-resilience-border);
}

.evidence-highlight--agility {
    background: var(--highlight-agility);
    border-bottom-color: var(--highlight-agility-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANNOTATION POPUP
   Shown on hover over highlighted text
   ═══════════════════════════════════════════════════════════════════════════ */

.evidence-annotation {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    padding: 12px 16px;
    background: var(--bg-primary, #FFFFFF);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 24px 64px rgba(0,0,0,0.08);
    width: 300px;
    z-index: 100;
    display: none;
    border: 1px solid var(--border-default, rgba(0,0,0,0.1));
    pointer-events: none;
}

.evidence-highlight:hover .evidence-annotation,
.evidence-highlight:focus .evidence-annotation {
    display: block;
}

/* Position adjustment for highlights near edge of container */
.evidence-annotation--right {
    left: auto;
    right: 0;
}

.evidence-annotation::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-default, rgba(0,0,0,0.1));
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.evidence-annotation--right::before {
    left: auto;
    right: 20px;
}

.evidence-annotation__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.evidence-annotation__badge {
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

/* Badge colors per competency */
.evidence-annotation__badge--collaboration {
    background: var(--highlight-collaboration);
    color: var(--highlight-collaboration-text);
}

.evidence-annotation__badge--communication {
    background: var(--highlight-communication);
    color: var(--highlight-communication-text);
}

.evidence-annotation__badge--entrepreneurial-leadership {
    background: var(--highlight-entrepreneurial-leadership);
    color: var(--highlight-entrepreneurial-leadership-text);
}

.evidence-annotation__badge--ethics {
    background: var(--highlight-ethics);
    color: var(--highlight-ethics-text);
}

.evidence-annotation__badge--integrated-sustainability {
    background: var(--highlight-integrated-sustainability);
    color: var(--highlight-integrated-sustainability-text);
}

.evidence-annotation__badge--problem-solving {
    background: var(--highlight-problem-solving);
    color: var(--highlight-problem-solving-text);
}

.evidence-annotation__badge--continuous-learning {
    background: var(--highlight-continuous-learning);
    color: var(--highlight-continuous-learning-text);
}

.evidence-annotation__badge--analytical-thinking {
    background: var(--highlight-analytical-thinking);
    color: var(--highlight-analytical-thinking-text);
}

.evidence-annotation__badge--resilience {
    background: var(--highlight-resilience);
    color: var(--highlight-resilience-text);
}

.evidence-annotation__badge--agility {
    background: var(--highlight-agility);
    color: var(--highlight-agility-text);
}

.evidence-annotation__confidence {
    font-size: 11px;
    color: var(--text-tertiary, #86868B);
}

.evidence-annotation__reason {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary, #6E6E73);
}

.evidence-annotation__reason strong {
    color: var(--text-primary, #1D1D1F);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVIDENCE CALLOUT BOX
   Summary box shown below messages with evidence
   ═══════════════════════════════════════════════════════════════════════════ */

.evidence-callout {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary, #FAFAFA);
    border-radius: 8px;
    border-left: 3px solid var(--accent, #0071E3);
}

.evidence-callout__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.evidence-callout__icon {
    width: 14px;
    height: 14px;
    color: var(--accent, #0071E3);
}

.evidence-callout__title {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent, #0071E3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.evidence-callout__text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary, #6E6E73);
}

.evidence-callout__text strong {
    color: var(--text-primary, #1D1D1F);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPETENCY LEGEND BAR
   Toggleable filter for competency highlights
   ═══════════════════════════════════════════════════════════════════════════ */

.evidence-legend {
    padding: 12px 24px;
    background: var(--bg-tertiary, #FAFAFA);
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.06));
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
}

.evidence-legend__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary, #86868B);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.evidence-legend__items {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.evidence-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary, #6E6E73);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 150ms;
    user-select: none;
}

.evidence-legend__item:hover {
    background: var(--bg-primary, #FFFFFF);
}

.evidence-legend__item.active {
    background: var(--bg-primary, #FFFFFF);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
}

.evidence-legend__item.dimmed {
    opacity: 0.4;
}

.evidence-legend__swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Legend swatches per competency */
.evidence-legend__swatch--collaboration {
    background: var(--highlight-collaboration);
    border: 2px solid var(--highlight-collaboration-border);
}

.evidence-legend__swatch--communication {
    background: var(--highlight-communication);
    border: 2px solid var(--highlight-communication-border);
}

.evidence-legend__swatch--entrepreneurial-leadership {
    background: var(--highlight-entrepreneurial-leadership);
    border: 2px solid var(--highlight-entrepreneurial-leadership-border);
}

.evidence-legend__swatch--ethics {
    background: var(--highlight-ethics);
    border: 2px solid var(--highlight-ethics-border);
}

.evidence-legend__swatch--integrated-sustainability {
    background: var(--highlight-integrated-sustainability);
    border: 2px solid var(--highlight-integrated-sustainability-border);
}

.evidence-legend__swatch--problem-solving {
    background: var(--highlight-problem-solving);
    border: 2px solid var(--highlight-problem-solving-border);
}

.evidence-legend__swatch--continuous-learning {
    background: var(--highlight-continuous-learning);
    border: 2px solid var(--highlight-continuous-learning-border);
}

.evidence-legend__swatch--analytical-thinking {
    background: var(--highlight-analytical-thinking);
    border: 2px solid var(--highlight-analytical-thinking-border);
}

.evidence-legend__swatch--resilience {
    background: var(--highlight-resilience);
    border: 2px solid var(--highlight-resilience-border);
}

.evidence-legend__swatch--agility {
    background: var(--highlight-agility);
    border: 2px solid var(--highlight-agility-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MESSAGE WITH EVIDENCE INDICATOR
   Visual indicator that a message contains evidence
   ═══════════════════════════════════════════════════════════════════════════ */

.message--has-evidence {
    position: relative;
}

.message--has-evidence::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--success, #34C759);
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STANDARD EVIDENCE MODAL LAYOUT
   Split-panel modal structure
   ═══════════════════════════════════════════════════════════════════════════ */

.evidence-modal {
    width: 100%;
    max-width: 1200px;
    height: 85vh;
    max-height: 900px;
    background: var(--bg-primary, #FFFFFF);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 24px 64px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.evidence-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.06));
    flex-shrink: 0;
}

.evidence-modal__body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.evidence-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light, rgba(0,0,0,0.06));
    background: var(--bg-tertiary, #FAFAFA);
    flex-shrink: 0;
}

/* Left Panel - Conversation List */
.evidence-modal__list-panel {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-light, rgba(0,0,0,0.06));
    display: flex;
    flex-direction: column;
    background: var(--bg-tertiary, #FAFAFA);
}

.evidence-modal__list-panel-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.06));
}

.evidence-modal__list-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin-bottom: 4px;
}

.evidence-modal__list-panel-subtitle {
    font-size: 11px;
    color: var(--text-tertiary, #86868B);
}

.evidence-modal__conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* Right Panel - Transcript */
.evidence-modal__transcript-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.evidence-modal__transcript-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.06));
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-primary, #FFFFFF);
}

.evidence-modal__transcript-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Conversation Item in List */
.evidence-conversation-item {
    padding: 12px 16px;
    background: var(--bg-primary, #FFFFFF);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 150ms;
    border: 2px solid transparent;
}

.evidence-conversation-item:hover {
    border-color: var(--gray-200, #E8E8ED);
}

.evidence-conversation-item.selected {
    border-color: var(--accent, #0071E3);
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
}

.evidence-conversation-item__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.evidence-conversation-item__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    line-height: 1.3;
}

.evidence-conversation-item__date {
    font-size: 11px;
    color: var(--text-tertiary, #86868B);
    white-space: nowrap;
}

.evidence-conversation-item__stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--text-secondary, #6E6E73);
}

.evidence-conversation-item__stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.evidence-conversation-item__stat svg {
    width: 12px;
    height: 12px;
}

.evidence-conversation-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.evidence-conversation-item__tag {
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    border-radius: 4px;
    background: var(--gray-100, #F5F5F7);
    color: var(--text-secondary, #6E6E73);
}

.evidence-conversation-item__tag.active {
    background: var(--success-subtle, rgba(52, 199, 89, 0.12));
    color: var(--success, #34C759);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .evidence-modal {
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
    
    .evidence-modal__list-panel {
        display: none;
    }
    
    .evidence-modal__body {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .evidence-modal__header {
        padding: 16px;
    }
    
    .evidence-modal__footer {
        padding: 16px;
        flex-direction: column;
        gap: 12px;
    }
    
    .evidence-modal__transcript-content {
        padding: 16px;
    }
    
    .evidence-annotation {
        width: 260px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .evidence-highlight,
    .evidence-legend__item,
    .evidence-conversation-item {
        transition: none;
    }
}