/* Insig Curation Frontend SPA */

/* Immersive — hide site chrome when shortcode page is active */
body.insig-curation-active > header,
body.insig-curation-active > footer,
body.insig-curation-active .site-header,
body.insig-curation-active .site-footer {
    display: none !important;
}

#insig-curation-app {
    min-height: 100vh;
    background: #fafafa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
    color: #1d2327;
    box-sizing: border-box;
    padding: 24px 16px;
    position: relative;
}

#insig-curation-app *, #insig-curation-app *::before, #insig-curation-app *::after { box-sizing: border-box; }

.insig-curation-maintenance, .insig-curation-noscript, .insig-curation-loading {
    max-width: 720px;
    margin: 80px auto;
    padding: 40px 20px;
    text-align: center;
}

.insig-leave-link {
    position: absolute;
    top: 16px; right: 20px;
    color: #50575e;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}
.insig-leave-link:hover { color: #1d2327; }

.insig-spa-root { max-width: 880px; margin: 0 auto; }

/* Generic question/start page wrapper */
.insig-q-page {
    background: #fff;
    border-radius: 12px;
    padding: 40px 32px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
    text-align: center;
}

/* Start view */
.insig-start-hero {
    padding: 60px 40px;
}
.insig-start-hero-img {
    display: block;
    max-width: 100%;
    max-height: 280px;
    margin: 0 auto 24px;
    border-radius: 8px;
    object-fit: cover;
}
.insig-trust-strip {
    color: #666;
    font-size: 14px;
    margin-top: 24px;
}
.insig-start-title { font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.insig-start-subtitle { font-size: 18px; color: #50575e; margin-bottom: 36px; }
.insig-cta-primary {
    display: inline-block;
    padding: 14px 36px;
    background: #696861;
    color: #fff;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.insig-cta-primary:hover { background: #4d4c46; }
.insig-cta-secondary { color: #50575e; font-size: 13px; margin-top: 12px; }

/* Question view */
.insig-q-progress { margin-bottom: 8px; color: #50575e; font-size: 14px; }
.insig-q-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.insig-q-subtitle { font-size: 15px; color: #50575e; margin-bottom: 32px; }

/* Single/Multi choice grid */
.insig-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.insig-option-card {
    background: #f6f7f7;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}
.insig-option-card:hover { border-color: #c3c4c7; transform: translateY(-2px); }
.insig-option-card.selected { border-color: #696861; background: #f3f3f1; }
.insig-option-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.insig-option-card .insig-opt-label { font-weight: 600; }

/* Range slider */
.insig-range-slider { margin: 32px 0; }
.insig-range-slider input[type="range"] { width: 100%; }
.insig-range-values { display: flex; justify-content: space-between; margin-top: 8px; color: #50575e; }

/* Nav buttons */
.insig-nav-buttons { display: flex; justify-content: space-between; margin-top: 24px; }
.insig-btn-back, .insig-btn-next {
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #c3c4c7;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
}
.insig-btn-next.primary { background: #696861; color: #fff; border-color: #696861; }
.insig-btn-next.primary:hover { background: #4d4c46; }
.insig-btn-back:hover { background: #f6f7f7; }
.insig-btn-back:disabled, .insig-btn-next:disabled { opacity: 0.5; cursor: not-allowed; }
.insig-validation-error { color: #d63638; margin-top: 8px; font-size: 14px; }

/* Fishbone progress — spec: docs/for-claude-code/visual-spec/魚骨圖進度設計.md */
.insig-fishbone-wrap {
    margin-top: 32px;
    position: relative;       /* anchors the absolute-positioned tooltip */
}
.insig-fishbone {
    height: 90px;
    margin: 0 auto;
    display: block;
    transition: transform 0.3s ease-out;
}
.insig-fishbone.complete-bounce { transform: translateX(8px); }

/* Fish head + eye + small mouth tick */
.insig-fish-head ellipse { fill: #c3c4c7; transition: fill 0.4s; }
.insig-fish-head.active ellipse { fill: #696861; }
.insig-fish-eye { fill: #fff; }
.insig-fish-mouth { stroke: #50575e; }
.insig-fish-head.active .insig-fish-mouth { stroke: #1d2327; }

/* Spine */
.insig-fishbone .insig-spine {
    stroke: #c3c4c7;
    stroke-width: 3;
    transition: stroke 0.4s;
}
.insig-fishbone.complete .insig-spine { stroke: #696861; }

/* Ribs — 4 states + bone-tip hooks share the rib group's stroke */
.insig-fishbone .insig-rib {
    transition: opacity 0.3s;
}
.insig-fishbone .insig-rib line {
    stroke-width: 2;
    transition: stroke 0.3s, opacity 0.3s;
}
.insig-fishbone .insig-rib text {
    fill: #50575e;
    font-weight: 600;
    transition: fill 0.3s;
}

/* unanswered: faded gray placeholder */
.insig-fishbone .insig-rib.unanswered line { stroke: #c3c4c7; opacity: 0.45; }

/* current: corp color, pulsing */
.insig-fishbone .insig-rib.current line {
    stroke: #696861;
    opacity: 1;
    animation: insig-rib-pulse 1.6s ease-in-out infinite;
}
.insig-fishbone .insig-rib.current text { fill: #696861; }

/* answered: corp color, clickable */
.insig-fishbone .insig-rib.answered { cursor: pointer; }
.insig-fishbone .insig-rib.answered line { stroke: #696861; opacity: 1; }
.insig-fishbone .insig-rib.answered:hover line { stroke: #4d4c46; }
.insig-fishbone .insig-rib.answered:hover text { fill: #4d4c46; }
.insig-fishbone .insig-rib.answered text { fill: #696861; }

/* reconfirm: answered but past current after jump-back — desaturated */
.insig-fishbone .insig-rib.reconfirm line { stroke: #696861; opacity: 0.45; }
.insig-fishbone .insig-rib.reconfirm text { fill: #696861; opacity: 0.7; }

@keyframes insig-rib-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Tail */
.insig-fish-tail polygon { fill: #c3c4c7; transition: fill 0.4s; }
.insig-fish-tail.active polygon { fill: #696861; }

/* Wave completion: each rib does a brief scale + glow burst, staggered */
.insig-fishbone.complete-wave .insig-rib {
    animation: insig-rib-wave 0.5s ease-out forwards;
    transform-origin: center 40px;
}
@keyframes insig-rib-wave {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.18); filter: drop-shadow(0 0 4px #696861); }
    100% { transform: scale(1); filter: none; }
}

/* Tooltip — anchored absolutely inside .insig-fishbone-wrap */
.insig-rib-tooltip {
    position: absolute;
    background: #1d2327;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-line;
    pointer-events: none;
    z-index: 50;
    transform: translate(-50%, -100%);
    max-width: 280px;
}
.insig-rib-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1d2327;
}

/* Mobile: < 720px → horizontal scroll */
@media (max-width: 720px) {
    .insig-fishbone-wrap {
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .insig-fishbone { min-width: 480px; }
}

/* Preview view */
.insig-preview-title { text-align: center; font-size: 22px; margin-bottom: 24px; }
.insig-featured-card {
    background: #fff;
    border-radius: 12px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    margin-bottom: 32px;
}
.insig-featured-image {
    aspect-ratio: 16/9;
    background: #f6f6f4;
    overflow: hidden;
}
.insig-featured-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.insig-featured-body { padding: 24px; }
.insig-featured-body h3 { font-size: 22px; margin-bottom: 6px; }
.insig-featured-body .insig-subtitle { color: #50575e; margin-bottom: 16px; }
.insig-featured-body .insig-reason { line-height: 1.7; color: #1d2327; }

.insig-others-title { text-align: center; font-size: 16px; color: #50575e; margin: 16px 0 8px; }

.insig-others-strip { display: flex; gap: 12px; margin-bottom: 32px; overflow-x: auto; padding: 8px 0; }
.insig-other-thumb { flex: 0 0 120px; aspect-ratio: 1; border-radius: 8px; background: #c3c4c7; filter: blur(4px); position: relative; overflow: hidden; }
.insig-other-thumb img { width: 100%; height: 100%; object-fit: cover; }

.insig-lead-cta-box { background: #fff8e6; padding: 32px; border-radius: 12px; text-align: center; border: 1px solid #dba617; }
.insig-lead-cta-box h3 { margin-bottom: 16px; }
.insig-lead-cta-box .insig-cta-secondary { margin-top: 16px; }

.insig-lead-placeholder { padding: 60px 40px; }

/* Leave confirm modal */
.insig-modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100100; }
.insig-modal-box { background: #fff; padding: 24px; border-radius: 12px; max-width: 400px; width: 90%; }
.insig-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Loading + error */
.insig-loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; z-index: 100200; }
.insig-error-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #d63638; color: #fff; padding: 12px 24px; border-radius: 8px; }
.insig-error-banner button { background: transparent; color: #fff; border: 1px solid #fff; margin-left: 12px; padding: 4px 12px; border-radius: 4px; cursor: pointer; }

/* Tab transition */
.insig-tab-enter-active, .insig-tab-leave-active { transition: opacity 0.3s, transform 0.3s; }
.insig-tab-enter-from { opacity: 0; transform: translateX(20px); }
.insig-tab-leave-to   { opacity: 0; transform: translateX(-20px); }

.insig-text-mute { color: #50575e; font-size: 14px; }
.insig-required-flag { color: #d63638; }

/* Phase 3B: Lead form */
.insig-lead-form { max-width: 600px; margin: 0 auto; }
.insig-lead-title { text-align: center; font-size: 22px; margin-bottom: 24px; }
.insig-form-row { margin-bottom: 16px; text-align: left; }
.insig-form-row label { display: block; font-weight: 600; margin-bottom: 6px; }
.insig-form-row input[type="text"],
.insig-form-row input[type="email"],
.insig-form-row input[type="tel"],
.insig-form-row textarea { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #c3c4c7; border-radius: 6px; box-sizing: border-box; }
.insig-form-row input:focus,
.insig-form-row textarea:focus { outline: 2px solid #696861; outline-offset: -1px; border-color: transparent; }
.insig-consent-row label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.insig-form-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.insig-honeypot { position: absolute; left: -10000px; height: 0; width: 0; overflow: hidden; }

/* Phase 3B: Result page */
.insig-result-page { max-width: 1100px; margin: 0 auto; padding: 32px 16px; }
.insig-result-title { text-align: center; font-size: 28px; margin-bottom: 8px; }
.insig-result-email-confirm { text-align: center; color: #50575e; margin-bottom: 32px; }
.insig-fallback-notice { background: #fff8e6; padding: 12px 16px; border-radius: 8px; text-align: center; margin: 16px 0; }
.insig-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; }
.insig-result-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.15s, box-shadow 0.15s; }
.insig-result-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.insig-result-card.consulted { outline: 2px solid #00a32a; }
.insig-result-image {
    aspect-ratio: 4/3;
    background: #f6f6f4;
    overflow: hidden;
}
.insig-result-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.insig-result-body { padding: 16px; }
.insig-result-body h3 { font-size: 18px; margin-bottom: 4px; }
.insig-result-body .insig-subtitle { color: #50575e; font-size: 14px; margin-bottom: 8px; }
.insig-result-body .insig-price { font-weight: 700; margin-bottom: 12px; }
.insig-result-body .insig-reason { color: #1d2327; line-height: 1.6; max-height: 4.5em; overflow: hidden; transition: max-height 0.3s; }
.insig-result-body .insig-reason.expanded { max-height: 60em; }
.insig-link-btn { background: none; border: none; color: #696861; padding: 0; cursor: pointer; font-size: 13px; display: block; margin-bottom: 12px; }
.insig-consult-btn { width: 100%; }
.insig-other-choices { margin-top: 48px; padding-top: 24px; border-top: 1px solid #c3c4c7; text-align: center; }
.insig-other-choices h3 { font-size: 16px; margin-bottom: 12px; }
.insig-other-choices .insig-link { color: #696861; text-decoration: none; }

/* Phase 3B: Adjust chips */
.insig-chips-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 24px; padding: 12px; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.insig-chips-label { font-weight: 600; margin-right: 8px; }
.insig-chip { background: #f3f3f1; border: 1px solid #c3c4c7; border-radius: 100px; padding: 6px 16px; cursor: pointer; font-size: 14px; transition: background 0.15s, border-color 0.15s; }
.insig-chip:hover { background: #e0dfd9; border-color: #696861; }

/* Phase 3B: Popover */
.insig-popover-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100100; padding: 16px; }
.insig-popover-box { background: #fff; padding: 24px; border-radius: 12px; max-width: 720px; width: 100%; max-height: 80vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.insig-popover-box h3 { margin-top: 0; }
.insig-popover-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 24px; }

/* Phase 3B: Toast */
.insig-toast-banner { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); padding: 12px 24px; border-radius: 8px; z-index: 100200; animation: insig-toast-in 0.3s ease, insig-toast-out 0.3s ease 4.7s forwards; max-width: 90%; }
.insig-toast-success { background: #00a32a; color: #fff; }
.insig-toast-error { background: #d63638; color: #fff; }
@keyframes insig-toast-in { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes insig-toast-out { to { opacity: 0; transform: translate(-50%, -20px); } }

/* Phase 4C: Preview banner */
.insig-preview-banner {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff3cd;
    color: #664d03;
    border-bottom: 1px solid #ffe69c;
    padding: 10px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}

/* Phase 1D-extra: [insig_work] single work view */
.insig-single-work {
    max-width: 960px;
    margin: 32px auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 32px;
    font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", sans-serif;
    color: #1f2933;
}
@media (max-width: 720px) {
    .insig-single-work { grid-template-columns: 1fr; gap: 20px; }
}
.insig-sw-media .insig-sw-main-image { width: 100%; height: auto; border-radius: 8px; display: block; }
.insig-sw-image-placeholder {
    width: 100%; aspect-ratio: 4/3;
    background: #f0f0f1;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 64px;
    color: #c3c4c7;
}
.insig-sw-gallery {
    list-style: none; padding: 0; margin: 16px 0 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px;
}
.insig-sw-gallery li {
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.15s, opacity 0.15s;
    line-height: 0;
    opacity: 0.7;
}
.insig-sw-gallery li:hover { opacity: 1; }
.insig-sw-gallery li.insig-sw-thumb-active {
    border-color: #696861;
    opacity: 1;
}
.insig-sw-gallery li img { width: 100%; height: 80px; object-fit: cover; border-radius: 2px; cursor: pointer; display: block; }
.insig-sw-main-image { transition: opacity 0.2s; }
.insig-sw-name { font-size: 28px; margin: 0 0 4px; line-height: 1.3; }
.insig-sw-subtitle { font-size: 16px; color: #50575e; margin: 0 0 12px; }
.insig-sw-price { font-size: 22px; color: #d63638; font-weight: 700; margin: 0 0 24px; }
.insig-sw-section { margin-top: 24px; }
.insig-sw-section h2 { font-size: 16px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #dcdcde; }
.insig-sw-specs dl { display: grid; grid-template-columns: 80px 1fr; gap: 6px 16px; margin: 0; }
.insig-sw-specs dt { color: #50575e; font-weight: 600; }
.insig-sw-specs dd { margin: 0; }
.insig-sw-tag-row { margin: 6px 0; }
.insig-sw-tag-pill {
    display: inline-block;
    background: #f0f0f1;
    color: #2c3338;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    margin-right: 4px;
    margin-bottom: 4px;
}
.insig-sw-customize p { background: #fdf6e3; padding: 12px 16px; border-left: 3px solid #dba617; border-radius: 4px; margin: 0; }
.insig-sw-cta-row { margin-top: 32px; }
.insig-sw-cta {
    display: inline-block;
    background: #696861;
    color: #fff;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
}
.insig-sw-cta:hover { background: #4d4c46; color: #fff; }
.insig-sw-empty { display: block; text-align: center; padding: 80px 16px; }
.insig-sw-empty h1 { font-size: 24px; }