/* ============================================================================
   Captain Chat — DipSkip's globally-intelligent built-in assistant.
   Two-pane layout: conversation list (left) + thread & composer (right).
   ========================================================================== */

/* The Captain tab is a flex:1 child of .main-content, so it's already pinned to
   the viewport height. The fragment loads into an intermediate placeholder div
   with no height, so a percentage height would collapse — instead we pin the
   chat ABSOLUTELY to the tab. The wrap fills the tab exactly and can never grow
   the page; only the message thread scrolls internally. */
#CaptainChat {
    position: relative;
    padding: 0 !important;
    overflow: hidden !important;
}

.captain-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    min-height: 0;
    background: #f7f8fa;
    font-family: inherit;
    overflow: hidden;
}

/* ---- Sidebar (conversation list) ---------------------------------------- */
.captain-sidebar {
    width: 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid #e6e8ec;
}

.captain-sidebar-head {
    padding: 16px;
    border-bottom: 1px solid #eef0f3;
}

.captain-new-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease;
}
.captain-new-btn:hover { background: #0056b3; }

.captain-conv-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.captain-conv-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 2px;
    color: #2b2f36;
    transition: background .12s ease;
}
.captain-conv-item:hover { background: #f1f2f5; }
.captain-conv-item.active { background: #d6e9ff; }

.captain-conv-icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: #eef0f3;
    color: #6b7178;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    margin-top: 1px;
}
.captain-conv-icon.analyze { background: #e0f2fe; color: #0ea5e9; }

.captain-conv-main {
    flex: 1;
    min-width: 0;
}
.captain-conv-titlerow {
    display: flex;
    align-items: center;
    gap: 6px;
}
.captain-conv-title {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: #23272e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.captain-conv-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 11px;
    color: #9aa0a8;
}
.captain-conv-dot { opacity: .6; }

.captain-conv-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #0ea5e9;
    background: #e0f2fe;
    border-radius: 5px;
    padding: 2px 5px;
    flex-shrink: 0;
}

.captain-conv-del {
    opacity: 0;
    color: #9aa0a8;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 4px;
    transition: opacity .12s ease, color .12s ease;
}
.captain-conv-item:hover .captain-conv-del { opacity: 1; }
.captain-conv-del:hover { color: #e05260; }

.captain-sidebar-empty {
    padding: 24px 16px;
    color: #9aa0a8;
    font-size: 13px;
    text-align: center;
}

/* ---- Main thread -------------------------------------------------------- */
.captain-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.captain-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: #fff;
    border-bottom: 1px solid #e6e8ec;
}

.captain-head-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #1f2329;
}
.captain-head-title i { color: #007bff; }

.captain-head-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: #9aa0a8;
    margin-left: 6px;
}

.captain-credit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #007bff;
    background: #e7f1ff;
    border: 1px solid #cfe5ff;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
}
.captain-credit-badge:hover { background: #d6e9ff; }

.captain-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 26px 0;
}

.captain-thread-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}

/* Block row + text-align for side; the bubble is inline-block so it reliably
   shrink-wraps to its text (flex-column + fit-content misbehaved here). */
.captain-msg {
    margin-bottom: 18px;
}
.captain-msg-user { text-align: right; }
.captain-msg-assistant { text-align: left; }

/* Per-message action row (copy) — reveals on hover of the message. Inherits the
   row's text-align so the button sits on the bubble's side. */
.captain-msg-actions {
    margin-top: 4px;
    height: 22px;
    opacity: 0;
    transition: opacity .12s ease;
}
.captain-msg:hover .captain-msg-actions { opacity: 1; }
.captain-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #9aa0a8;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.captain-copy:hover { background: #eef0f3; color: #0056b3; }
.captain-copy.copied { color: #1ea672; }
.captain-copy i { font-size: 11.5px; }
html.dark-mode .captain-copy:hover { background: #242a32; color: #79c0ff; }
html.dark-mode .captain-copy.copied { color: #3ecf8e; }

.captain-msg-bubble {
    display: inline-block;       /* shrink-wraps to content, both width and height */
    text-align: left;            /* keep text left-aligned even in a right-aligned row */
    vertical-align: top;
    max-width: 82%;
    padding: 11px 15px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.6;
    overflow-wrap: break-word;
}
.captain-msg-user .captain-msg-bubble {
    background: #007bff;
    color: #fff;
    border-bottom-right-radius: 4px;
}
/* Preserve newlines in the user's typed text WITHOUT making the bubble's own
   template whitespace (indentation between tags / ko comments) render as blank
   lines — which is what was inflating the bubble height. */
.captain-msg-user .captain-bubble-content { white-space: pre-wrap; }
.captain-msg-assistant .captain-msg-bubble {
    background: #f0f0f0;
    color: #23272e;
    border-bottom-left-radius: 4px;
}

/* Markdown inside assistant bubbles */
.captain-msg-bubble p { margin: 0 0 10px; }
.captain-msg-bubble p:last-child { margin-bottom: 0; }
.captain-msg-bubble ul, .captain-msg-bubble ol { margin: 0 0 10px; padding-left: 22px; }
.captain-msg-bubble li { margin-bottom: 4px; }
.captain-msg-bubble h1, .captain-msg-bubble h2, .captain-msg-bubble h3 {
    margin: 14px 0 8px; font-size: 15px; font-weight: 700;
}
.captain-msg-bubble pre {
    background: #1e2128;
    color: #e6e6e6;
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
    margin: 0 0 10px;
    font-size: 12.8px;
}

/* Code block wrapper with a hover "Copy" button (top-right, doesn't scroll with code). */
.captain-code { position: relative; }
.captain-code pre { margin: 0 0 10px; }
.captain-code-copy {
    position: absolute;
    top: 7px;
    right: 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: #c6cad2;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.captain-code:hover .captain-code-copy,
.captain-code-copy:focus-visible { opacity: 1; }
.captain-code-copy:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.captain-code-copy.copied { color: #3ecf8e; border-color: rgba(62, 207, 142, .4); opacity: 1; }
.captain-code-copy i { font-size: 11px; }
.captain-msg-bubble code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12.8px;
}
.captain-msg-bubble :not(pre) > code {
    background: #e7f1ff;
    color: #0056b3;
    padding: 1.5px 5px;
    border-radius: 5px;
}
.captain-msg-user .captain-msg-bubble :not(pre) > code {
    background: rgba(255,255,255,.18);
    color: #fff;
}
.captain-msg-bubble table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 10px;
    font-size: 13px;
}
.captain-msg-bubble th, .captain-msg-bubble td {
    border: 1px solid #e0e2e6;
    padding: 6px 9px;
    text-align: left;
}

/* A collapsed bubble gets a soft fade at the bottom so it's obvious there's
   more, and the Read-more control reads as a clear button. */
.captain-msg-bubble.captain-msg-collapsed { position: relative; }
.captain-msg-bubble.captain-msg-collapsed::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 44px;
    height: 36px;
    pointer-events: none;
}
.captain-msg-assistant .captain-msg-bubble.captain-msg-collapsed::before {
    background: linear-gradient(to bottom, rgba(240,240,240,0), #f0f0f0);
}
.captain-msg-user .captain-msg-bubble.captain-msg-collapsed::before {
    background: linear-gradient(to bottom, rgba(0,123,255,0), #007bff);
}

.captain-readmore {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #0056b3;
    background: #e7f1ff;
    border: 1px solid #cfe5ff;
    border-radius: 22px;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}
.captain-readmore:hover { background: #d6e9ff; transform: translateY(-1px); }
.captain-readmore i { font-size: 11px; }

.captain-msg-user .captain-readmore {
    color: #fff;
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.32);
}
.captain-msg-user .captain-readmore:hover { background: rgba(255,255,255,.28); }

html.dark-mode .captain-msg-assistant .captain-msg-bubble.captain-msg-collapsed::before {
    background: linear-gradient(to bottom, rgba(28,33,40,0), #1c2128);
}
html.dark-mode .captain-readmore { color: #79c0ff; background: #14304d; border-color: #1f4d80; }
html.dark-mode .captain-readmore:hover { background: #352f57; }

.captain-typing {
    display: inline-flex;
    gap: 4px;
    padding: 4px 2px;
}
.captain-typing span {
    width: 7px; height: 7px;
    background: #b7bcc4;
    border-radius: 50%;
    animation: captainBlink 1.2s infinite ease-in-out both;
}
.captain-typing span:nth-child(2) { animation-delay: .2s; }
.captain-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes captainBlink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ---- Empty / welcome state --------------------------------------------- */
.captain-welcome {
    position: relative;
    max-width: 640px;
    margin: 7vh auto 0;
    text-align: center;
    padding: 0 24px;
}
/* Subtle abstract backdrop: two soft, blurred colour orbs behind the content. */
.captain-welcome::before,
.captain-welcome::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}
.captain-welcome::before {
    width: 340px; height: 340px;
    top: -90px; left: 50%;
    transform: translateX(-72%);
    background: radial-gradient(circle, rgba(0, 123, 255, .30), rgba(0, 123, 255, 0) 70%);
}
.captain-welcome::after {
    width: 300px; height: 300px;
    top: 40px; left: 50%;
    transform: translateX(-2%);
    background: radial-gradient(circle, rgba(14, 165, 233, .24), rgba(14, 165, 233, 0) 70%);
}
.captain-welcome > * { position: relative; z-index: 1; }
html.dark-mode .captain-welcome::before {
    background: radial-gradient(circle, rgba(77, 159, 255, .26), rgba(77, 159, 255, 0) 70%);
}
html.dark-mode .captain-welcome::after {
    background: radial-gradient(circle, rgba(38, 150, 232, .20), rgba(38, 150, 232, 0) 70%);
}
.captain-welcome-icon {
    font-size: 42px;
    color: #007bff;
    margin-bottom: 16px;
}
.captain-welcome h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2329;
    margin-bottom: 10px;
}
.captain-welcome p {
    color: #6b7178;
    font-size: 14.5px;
    line-height: 1.6;
    margin-bottom: 22px;
}
.captain-suggest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    text-align: left;
}
.captain-suggest {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 11px;
    cursor: pointer;
    font-size: 13.5px;
    color: #2b2f36;
    transition: border-color .12s ease, transform .12s ease;
}
.captain-suggest:hover { border-color: #007bff; transform: translateY(-1px); }
.captain-suggest strong { display: block; margin-bottom: 3px; color: #1f2329; }

/* ---- Composer ----------------------------------------------------------- */
.captain-composer-wrap {
    border-top: 1px solid #e6e8ec;
    background: #fff;
    padding: 14px 0 18px;
}
.captain-composer {
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}
.captain-input-shell {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    border: 1px solid #e3e5e9;
    border-radius: 26px;
    padding: 6px 6px 6px 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 22, 30, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.captain-input-shell:focus-within {
    border-color: #9ec5fe;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .12);
}

.captain-input {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-size: 15px;
    line-height: 1.5;
    font-family: inherit;
    max-height: 220px;
    min-height: 40px;          /* matches the send button so a single line sits flush */
    padding: 9px 0;
    background: transparent;
    color: #23272e;
}
.captain-input::placeholder { color: #9aa0a8; }

.captain-send-btn {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;        /* circular — no nested-box look */
    border: none;
    background: #007bff;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .12s ease;
}
.captain-send-btn:hover:not(:disabled) { background: #0056b3; transform: scale(1.05); }
.captain-send-btn:disabled { background: #d6d3ea; color: #fbfafe; cursor: default; }

.captain-composer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding: 0 4px;
    font-size: 11.5px;
    color: #9aa0a8;
}
.captain-cost-hint strong { color: #007bff; }
.captain-char-over { color: #e05260; font-weight: 600; }

.captain-error-bar {
    margin: 0 40px 10px;
    padding: 9px 14px;
    background: #fdecee;
    color: #c23b48;
    border: 1px solid #f6cdd2;
    border-radius: 10px;
    font-size: 13px;
}
html.dark-mode .captain-error-bar {
    background: #2c1b1e;
    color: #f0a6ad;
    border-color: #5a2c32;
}

/* ---- AI terms gate ------------------------------------------------------ */
.captain-terms-gate {
    max-width: 520px;
    margin: 12vh auto 0;
    text-align: center;
    padding: 0 24px;
}
.captain-terms-gate i { font-size: 38px; color: #007bff; margin-bottom: 14px; }
.captain-terms-gate h2 { font-size: 20px; font-weight: 700; color: #1f2329; margin-bottom: 10px; }
.captain-terms-gate p { color: #6b7178; font-size: 14px; margin-bottom: 20px; line-height: 1.6; }
.captain-terms-btn {
    background: #007bff; color: #fff; border: none;
    padding: 11px 24px; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.captain-terms-btn:hover { background: #0056b3; }

/* ============================================================================
   Dark mode
   ========================================================================== */
html.dark-mode .captain-wrap { background: #161a20; }
html.dark-mode .captain-sidebar { background: #1c2128; border-right-color: #2a2f37; }
html.dark-mode .captain-sidebar-head { border-bottom-color: #2a2f37; }
html.dark-mode .captain-conv-item { color: #c8ccd2; }
html.dark-mode .captain-conv-item:hover { background: #242a32; }
html.dark-mode .captain-conv-item.active { background: #14304d; }
html.dark-mode .captain-conv-icon { background: #242a32; color: #9aa0a8; }
html.dark-mode .captain-conv-icon.analyze { background: #0e2a3a; color: #4cb6e8; }
html.dark-mode .captain-conv-title { color: #e6e9ed; }
html.dark-mode .captain-conv-sub { color: #7d828a; }
html.dark-mode .captain-head { background: #1c2128; border-bottom-color: #2a2f37; }
html.dark-mode .captain-head-title { color: #f0f2f5; }
html.dark-mode .captain-credit-badge { background: #0d2847; border-color: #1f4d80; color: #79c0ff; }
html.dark-mode .captain-msg-assistant .captain-msg-bubble {
    background: #1c2128; color: #d8dce2; border-color: #2a2f37;
}
html.dark-mode .captain-msg-bubble :not(pre) > code { background: #14304d; color: #79c0ff; }
html.dark-mode .captain-welcome h2 { color: #f0f2f5; }
html.dark-mode .captain-welcome p { color: #9aa0a8; }
html.dark-mode .captain-suggest { background: #1c2128; border-color: #2a2f37; color: #c8ccd2; }
html.dark-mode .captain-suggest strong { color: #f0f2f5; }
html.dark-mode .captain-composer-wrap { background: #1c2128; border-top-color: #2a2f37; }
html.dark-mode .captain-input-shell { background: #12151b; border-color: #2f343d; box-shadow: none; }
html.dark-mode .captain-input-shell:focus-within { border-color: #1f4d80; box-shadow: 0 0 0 3px rgba(0, 123, 255, .18); }
html.dark-mode .captain-input { color: #e6e9ed; }
html.dark-mode .captain-input::placeholder { color: #6e747c; }
html.dark-mode .captain-send-btn:disabled { background: #16324f; color: #5a83a8; }
html.dark-mode .captain-terms-gate h2 { color: #f0f2f5; }
html.dark-mode .captain-terms-gate p { color: #9aa0a8; }

/* ============================================================================
   AI Analyze modal (opened from engine cards)
   ========================================================================== */
.captain-analyze-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 30, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}
.captain-analyze-modal {
    width: 480px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    overflow: hidden;
}
.captain-analyze-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #eef0f3;
    font-size: 16px;
    font-weight: 700;
    color: #1f2329;
}
.captain-analyze-head i { color: #007bff; }
.captain-analyze-x {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #9aa0a8;
    cursor: pointer;
}
.captain-analyze-x:hover { color: #0056b3; }
.captain-analyze-body { padding: 18px 20px; }
.captain-analyze-body p { color: #4b5158; font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; }
.captain-analyze-body label { display: block; font-size: 13px; font-weight: 600; color: #2b2f36; margin-bottom: 6px; }
.captain-analyze-body textarea {
    width: 100%;
    border: 1.5px solid #dfe1e6;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    color: #23272e;
}
.captain-analyze-body textarea:focus { outline: none; border-color: #007bff; }
.captain-analyze-hint { font-size: 11.5px !important; color: #9aa0a8 !important; margin: 8px 0 0 !important; }
.captain-analyze-cost {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 13px;
    border-radius: 9px;
    background: #e7f1ff;
    border: 1px solid #cfe5ff;
    color: #0056b3;
    font-size: 13px;
}
.captain-analyze-cost i { color: #007bff; }
.captain-analyze-cost strong { font-weight: 700; }
html.dark-mode .captain-analyze-cost { background: #0d2847; border-color: #1f4d80; color: #79c0ff; }
html.dark-mode .captain-analyze-cost i { color: #79c0ff; }
.captain-analyze-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
}
.captain-analyze-btn-secondary {
    padding: 9px 18px;
    border: 1px solid #dfe1e6;
    background: #fff;
    border-radius: 9px;
    font-weight: 600;
    font-size: 13.5px;
    color: #4b5158;
    cursor: pointer;
}
.captain-analyze-btn-secondary:hover { background: #f5f6f8; }
.captain-analyze-btn-primary {
    padding: 9px 20px;
    border: none;
    background: #007bff;
    border-radius: 9px;
    font-weight: 600;
    font-size: 13.5px;
    color: #fff;
    cursor: pointer;
}
.captain-analyze-btn-primary:hover { background: #0056b3; }
.captain-analyze-btn-primary:disabled { background: #c3c0e0; cursor: not-allowed; }

html.dark-mode .captain-analyze-modal { background: #1c2128; }
html.dark-mode .captain-analyze-head { color: #f0f2f5; border-bottom-color: #2a2f37; }
html.dark-mode .captain-analyze-body p { color: #b6bcc4; }
html.dark-mode .captain-analyze-body label { color: #d8dce2; }
html.dark-mode .captain-analyze-body textarea { background: #161a20; border-color: #2a2f37; color: #e6e9ed; }
html.dark-mode .captain-analyze-btn-secondary { background: #1c2128; border-color: #2a2f37; color: #c8ccd2; }
html.dark-mode .captain-analyze-btn-secondary:hover { background: #242a32; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 720px) {
    .captain-sidebar { width: 220px; min-width: 220px; }
}