/**
 * Cognitive Hooks Sidebar — Progressive Design
 * Matches reference: cognitive_hooks_sidebar.html
 */

:root {
    --thesis-teal: #0F6E56;
    --thesis-bg: #E1F5EE;
    --risk-high: #E24B4A;
    --risk-medium: #EF9F27;
    --risk-low: #1D9E75;
}

/* ========== OVERRIDE SHOPTIMIZER PANEL WIDTH ========== */
body:not(.pdp-full) .woocommerce-tabs .panel.woocommerce-Tabs-panel--description {
    max-width: 100% !important;
    overflow: visible !important;
}

/* ========== TWO-COLUMN LAYOUT FOR DESCRIPTION TAB ========== */
.cognitive-description-wrapper {
    width: 100%;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    position: relative;
    min-height: 500px;
}

.woocommerce-Tabs-panel--description .cognitive-description-wrapper {
    display: flex;
    width: 100%;
    gap: 30px;
}

/* Left column — Description */
.cognitive-description-wrapper .description-content {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 340px);
}

/* Right column — Sidebar */
.cognitive-description-wrapper .sidebar-column {
    width: 310px;
    flex-shrink: 0;
    align-self: flex-start;
}

/* ========== COGNITIVE HOOKS SIDEBAR ========== */
.cognitive-hooks-sidebar {
    font-family: inherit;
    background: #ffffff;
    border: 0.5px solid #e0e0e0;
    border-radius: 10px;
    position: sticky;
    position: -webkit-sticky; /* Safari support */
    top: 20px;
    width: 100%;
    max-width: 310px;
    padding: 1rem 0;
    z-index: 10;
    align-self: flex-start;
}

/* JavaScript fallback class - overrides sticky when needed */
.cognitive-hooks-sidebar.js-fixed {
    position: fixed !important;
    top: 20px !important;
}

/* ── Thesis Bar ─────────────────────────────── */
.thesis-bar {
    background: #f8f9fa;
    border: 0.5px solid #e8e8e8;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 0 1rem 1.25rem;
}

.thesis-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    color: #888;
    text-transform: uppercase;
    margin-bottom: .4rem;
}

.thesis-text {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    transition: opacity .35s ease;
    margin: 0;
}

.thesis-confidence {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: .75rem;
}

.conf-bar-wrap {
    flex: 1;
    height: 3px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.conf-bar {
    height: 100%;
    background: var(--risk-low);
    border-radius: 2px;
    transition: width .5s ease;
}

.conf-label {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

/* ── Hooks Header ───────────────────────────── */
.cognitive-hooks-sidebar .hooks-header {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    color: #888;
    text-transform: uppercase;
    margin: 0 1.25rem .75rem;
}

/* ── Hooks List ─────────────────────────────── */
.hooks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 1rem;
}

/* ── Hook Chip ──────────────────────────────── */
.hook-chip {
    background: #ffffff;
    border: 0.5px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s, opacity .2s;
    text-align: left;
}

.hook-chip:hover {
    border-color: #ccc;
    background: #fafafa;
}

.hook-chip.active {
    border-color: var(--risk-low);
    background: #ffffff;
}

.hook-chip.resolved {
    border-color: var(--risk-low);
    opacity: .75;
}

.hook-chip.resolved.active {
    opacity: 1;
}

/* ── Hook Trigger (clickable header) ─────────── */
.hook-trigger {
    font-size: 13px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: .625rem .875rem;
    user-select: none;
}

.hook-trigger-left {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

.hook-trigger-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.hook-label {
    font-size: 13px;
    font-weight: 400;
    color: #333;
    line-height: 1.4;
}

/* ── Arrow toggle ────────────────────────────── */
.hook-toggle.arrow {
    font-size: 12px;
    color: #999;
    transition: transform .2s;
    flex-shrink: 0;
}

.hook-chip.active .hook-toggle.arrow {
    transform: rotate(180deg);
}

/* ── Resolved Badge ──────────────────────────── */
.resolved-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #E1F5EE;
    color: #0F6E56;
    font-weight: 500;
    flex-shrink: 0;
}

/* ── Hook Answer (expandable) ────────────────── */
.hook-answer-wrap {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease, padding .3s ease;
}

.hook-chip.active .hook-answer-wrap {
    max-height: 400px;
    padding-top: .25rem;
}

.answer-text {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    padding: .5rem;
    margin: 0 .3rem .375rem;
    background: #f8f9fa;
    border-radius: 6px;
}

/* Removed .answer-source */

/* ── Risk Dots ───────────────────────────────── */
.risk-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.risk-dot.high   { background-color: var(--risk-high); }
.risk-dot.medium { background-color: var(--risk-medium); }
.risk-dot.low    { background-color: var(--risk-low); }

/* ── Ignore Hint ─────────────────────────────── */
.ignore-hint {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin: 1.25rem 1rem 0;
    padding-top: 1rem;
    border-top: 0.5px solid #e8e8e8;
}

/* ========== MINI-THESIS PILL (Above Fold) ========== */
.pdl-thesis-pill {
    background: var(--thesis-bg);
    border-left: 3px solid var(--thesis-teal);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 20px;
    margin-top: 15px;
}

.pdl-thesis-pill-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--thesis-teal);
    font-style: italic;
    margin: 0;
}

.pdl-thesis-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--thesis-teal);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.pdl-thesis-pill-link:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* ========== MOBILE HOOKS ACCORDION ========== */
.mobile-hooks-accordion {
    display: none;
    width: 100%;
    margin: 30px 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.mobile-hooks-header {
    background: #f8f9fa;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.mobile-hook-item {
    border-top: 1px solid #e0e0e0;
}

.mobile-hook-trigger {
    width: 100%;
    padding: 15px 20px;
    background: #ffffff;
    border: none;
    text-align: left;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-hook-trigger .toggle-icon {
    margin-left: auto;
    font-size: 12px;
    color: #666;
    transition: transform 0.2s;
}

.mobile-hook-item.expanded .toggle-icon {
    transform: rotate(180deg);
}

.mobile-hook-content {
    max-height: 0;
    overflow: hidden;
    background: #f8f9fa;
    transition: max-height 0.3s ease;
}

.mobile-hook-item.expanded .mobile-hook-content {
    max-height: 500px;
}

.mobile-hook-answer {
    padding: 15px 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1023px) {
    .cognitive-hooks-sidebar {
        display: none !important;
    }

    .cognitive-description-wrapper .sidebar-column {
        display: none !important;
    }

    .cognitive-description-wrapper .description-content {
        max-width: 100% !important;
    }

    .mobile-hooks-accordion {
        display: block !important;
    }
}

@media (min-width: 1024px) {
    .mobile-hooks-accordion {
        display: none !important;
    }
}