/* /checklistv2 — Jane checklist co-pilot UX (2026-05-08 pivot, Phase B.1).
   Brand tokens (mirrors css-js/sitecolors/colordefault.less):
       primary       #6ac8c7
       primary-dark  #068887
       primary-light #f0fafb
       text          #404040
       muted         #8e8e8e
   Body font: SourceSansPro (preloaded via _Layout.cshtml).
   Independent of jane.css (the dock — dormant per JANE_SITEWIDE_DOCK_ENABLED). */

/* ---- Shell: split-screen on ≥768px, stacked + bottom-sheet on <768px ---- */
.cv2-shell {
    display: block;
    max-width: 1140px;
    margin: 24px auto 0;
    padding: 0 16px 96px; /* extra bottom padding so mobile peek doesn't cover content */
    font-family: SourceSansPro, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #404040;
}

.cv2-intro {
    margin: 0 0 24px;
}
.cv2-intro h1 {
    margin: 0 0 8px;
    font-size: 28px;
    color: #404040;
}
.cv2-intro p {
    margin: 0;
    color: #404040;
    font-size: 15px;
    max-width: 760px;
    line-height: 1.55;
}

@media (min-width: 768px) {
    .cv2-grid {
        display: grid;
        grid-template-columns: minmax(0, 720px) 360px;
        gap: 24px;
        align-items: start;
    }
    .cv2-list-col { min-width: 0; }
    .cv2-chat-col {
        position: sticky;
        top: 16px;
        height: calc(100vh - 32px);
        min-height: 480px;
    }
}

@media (max-width: 767px) {
    .cv2-grid { display: block; }
    .cv2-shell { padding-bottom: 80px; } /* mobile peek = 56px + breathing room */
}

/* ---- List column (Phase 1d.5 render lives here, untouched markup) ---- */
.cv2-list-col h2 { color: #068887; }

/* ---- Chat panel (desktop sidebar / mobile bottom-sheet) ---- */
.cv2-chat {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d6e5e5;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(6, 136, 135, 0.06);
    overflow: hidden;
    height: 100%;
}

@media (max-width: 767px) {
    .cv2-chat {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -6px 22px rgba(6, 136, 135, 0.16);
        z-index: 9999;
        height: 56px;                 /* peek state */
        max-height: 60dvh;
        transition: height 0.25s ease;
    }
    .cv2-chat.cv2-chat--expanded {
        height: 60dvh;
    }
    .cv2-chat__drag-handle {
        height: 4px;
        width: 36px;
        background: #d6e5e5;
        border-radius: 2px;
        margin: 8px auto 4px;
        cursor: grab;
        flex-shrink: 0;
    }
    .cv2-chat--expanded .cv2-chat__drag-handle { cursor: ns-resize; }
}
@media (min-width: 768px) {
    .cv2-chat__drag-handle { display: none; }
}

.cv2-chat__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0fafb;
    background: linear-gradient(135deg, #f0fafb 0%, #fff 100%);
    flex-shrink: 0;
    cursor: pointer; /* tap header on mobile to expand/collapse */
}
.cv2-chat__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #6ac8c7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}
.cv2-chat__title { font-weight: 600; color: #068887; font-size: 15px; }
.cv2-chat__sub   { color: #8e8e8e; font-size: 12px; margin-left: auto; }

.cv2-chat__messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
}
@media (max-width: 767px) {
    .cv2-chat:not(.cv2-chat--expanded) .cv2-chat__messages,
    .cv2-chat:not(.cv2-chat--expanded) .cv2-chat__composer { display: none; }
}

.cv2-msg {
    max-width: 90%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.cv2-msg--jane {
    background: #f0fafb;
    color: #404040;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.cv2-msg--user {
    background: #6ac8c7;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.cv2-msg--system {
    background: #fff5ee;
    color: #404040;
    border: 1px solid #ffaa62;
    align-self: stretch;
    font-size: 13px;
}
.cv2-msg--typing { color: #8e8e8e; font-style: italic; }

.cv2-chat__composer {
    flex-shrink: 0;
    padding: 10px 12px;
    border-top: 1px solid #f0fafb;
    background: #fff;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.cv2-chat__textarea {
    flex: 1 1 auto;
    border: 1px solid #d6e5e5;
    border-radius: 18px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 14px;
    color: #404040;
    resize: none;
    line-height: 1.4;
    max-height: 96px;
    min-height: 36px;
    outline: none;
}
.cv2-chat__textarea:focus { border-color: #6ac8c7; }
.cv2-chat__send {
    border: 0;
    background: #6ac8c7;
    color: #fff;
    border-radius: 18px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 -3px 0 0 #068887;
    font-family: inherit;
    font-size: 14px;
    flex-shrink: 0;
}
.cv2-chat__send:disabled { opacity: 0.45; cursor: not-allowed; }
.cv2-chat__send:hover:not(:disabled) { background: #068887; }

/* ---- Phase B.4 hooks (live re-render highlight) — styles ship now,
        the JS that adds/removes the class lands in B.4. ---- */
@keyframes cv2-step-flash {
    0%   { background: #c1e7e6; }
    100% { background: #fff; }
}
.cv2-step--flash { animation: cv2-step-flash 1.5s ease-out; }
@keyframes cv2-step-fade-out {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(20px); }
}
.cv2-step--removing { animation: cv2-step-fade-out 0.4s ease-out forwards; }
@keyframes cv2-step-grow-in {
    0%   { opacity: 0; max-height: 0; }
    100% { opacity: 1; max-height: 240px; }
}
.cv2-step--adding { animation: cv2-step-grow-in 0.4s ease-out; }