/**
 * Leo Assistant — Chat Modal Styles
 */

/* Lock page scroll behind the Leo Modal so wheel/touch scrolls stay inside the modal */
body:has(#getModalLeoVoice.active) { overflow: hidden; }

.hb-badge{
    padding: 0 4px;
    font-size: 0.8em;
}

/* ─── Modal Header Row ─── */
.leo-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #1e1e1e;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}
#leoHeaderToggles { margin-left: auto; }
.leo-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mainBGDarkText, #f6f6f6);
    display: flex;
    align-items: center;
    gap: 8px;
}
.leo-modal-title i { color: #4a90d9; font-size: 16px; }

/* ─── Command Center: header filter selects ─── */
.leo-header-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.leo-header-select {
    background: #2a2a2a;
    color: var(--mainBGDarkText, #f6f6f6);
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    height: 26px;
    cursor: pointer;
    outline: none;
}
.leo-header-select:hover { border-color: #666; }
.leo-header-select:focus { border-color: var(--mainBGDarkTextGold, #d09d1f); }
.leo-header-select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.leo-header-refresh {
    background: #2a2a2a;
    color: var(--mainBGDarkText, #f6f6f6);
    border: 1px solid #444;
    border-radius: 4px;
    padding: 0;
    height: 26px;
    width: 28px;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.leo-header-refresh:hover { border-color: var(--mainBGDarkTextGold, #d09d1f); color: var(--mainBGDarkTextGold, #d09d1f); }

/* ─── Command Center: synthetic hidden-block tab ─── */
.leo-tab-btn.leo-tab-hidden {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    color: #d09d1f;
    border-bottom: 2px solid transparent;
    font-size: 12px;
}
/* When a hidden-tab flyout is open, this trigger becomes the anchor for the popover */
.leo-tab-btn.leo-tab-hidden.active-flyout { anchor-name: --leoHiddenFlyoutAnchor; }
.leo-tab-btn.leo-tab-hidden:hover { background: rgba(208, 157, 31, 0.08); }
.leo-tab-hidden-count {
    background: rgba(208, 157, 31, 0.18);
    border-radius: 9px;
    padding: 1px 7px;
    font-weight: 600;
    font-size: 11px;
}

/* ─── Command Center: per-tab menu trigger (kebab) ─── */
.leo-tab-menu-trigger {
    margin-left: 8px;
    color: var(--mainBGDarkText, #f6f6f6);
    opacity: 0.55;
    cursor: pointer;
    font-size: 15px;
    padding: 4px 7px;
    border-radius: 4px;
    line-height: 1;
}
.leo-tab-menu-trigger:hover { opacity: 1; background: rgba(255, 255, 255, 0.10); }
/* When a tab menu is open, the kebab becomes the anchor for the popover (mirrors
   the framework's .searchInputWrapper.active anchor pattern in main.css:3155). */
.leo-tab-menu-trigger.active { anchor-name: --leoTabMenuAnchor; }

/* ─── Command Center: per-tab context menu (native popover, top-layer) ─── */
.leo-tab-menu[popover] {
    position: fixed;
    position-anchor: --leoTabMenuAnchor;
    /* Clear UA popover defaults (`inset: 0; margin: auto`) BEFORE setting top/right,
       or the inset shorthand wipes the explicit edge values. */
    inset: auto;
    margin: 0;
    top: calc(anchor(bottom) + 4px);
    right: anchor(right);
    border: 1px solid #444;
    background: #1f1f1f;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    padding: 4px 0;
    min-width: 180px;
    font-size: 13px;
    color: var(--mainBGDarkText, #f6f6f6);
    font-family: inherit;
}
.leo-tab-menu-item {
    padding: 7px 14px;
    color: var(--mainBGDarkText, #f6f6f6);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 13px;
}
.leo-tab-menu-item:hover { background: #2c2c2c; }
.leo-tab-menu-item.divider {
    padding: 0;
    height: 1px;
    background: #333;
    margin: 4px 0;
    cursor: default;
}
.leo-tab-menu-item.divider:hover { background: #333; }
.leo-tab-menu-item i { color: #d09d1f; width: 14px; text-align: center; font-size: 14px; }

/* ─── Command Center: hidden-block flyout (native popover, top-layer) ─── */
.leo-hidden-flyout[popover] {
    position: fixed;
    position-anchor: --leoHiddenFlyoutAnchor;
    /* Clear UA popover defaults (`inset: 0; margin: auto`) BEFORE setting top/left,
       or the inset shorthand wipes the explicit edge values. */
    inset: auto;
    margin: 0;
    top: calc(anchor(bottom) + 4px);
    left: anchor(left);
    border: 1px solid #444;
    background: #1f1f1f;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    padding: 6px 0;
    min-width: 320px;
    max-width: 480px;
    font-size: 13px;
    color: var(--mainBGDarkText, #f6f6f6);
    font-family: inherit;
}
.leo-hidden-flyout-title {
    padding: 6px 14px;
    color: var(--disabledText, #aaa);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #2a2a2a;
}
.leo-hidden-flyout-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    color: var(--mainBGDarkText, #f6f6f6);
}
.leo-hidden-flyout-row:hover { background: #2a2a2a; }
.leo-hidden-flyout-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leo-hidden-flyout-until { color: var(--disabledText, #888); font-size: 11px; flex-shrink: 0; }
.leo-hidden-flyout-unhide {
    background: none;
    border: 1px solid #444;
    border-radius: 4px;
    color: #d09d1f;
    cursor: pointer;
    padding: 3px 8px;
    font-size: 11px;
}
.leo-hidden-flyout-unhide:hover { background: rgba(208, 157, 31, 0.12); }

/* ─── Command Center: pin marker on tab row1 ─── */
.leo-tab-pin-marker { color: #d09d1f; margin-right: 4px; font-size: 10px; }

/* ─── Modal Root Container ─── */
#leoChatModalRoot {
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 10px;
    overflow: hidden;
    height: calc(100dvh - var(--headBarHeight, 50px) - 30px);
    min-height: 400px;
    font-size: 14px;
    text-align: left;
}

/* Full width responsive to sidebar — no mediumV2 dependency */
#getModalLeoVoice.popUpBox {
    position: fixed;
    top: calc(var(--headBarHeight, 50px) + 5px);
    left: 0;
    padding: 0; border: none; background: none;
    max-width: unset;
    max-height: unset;
    margin-top: 0;
    width: calc(100vw - var(--navLeftWidth, 260px) - 40px);
    margin-left: calc(var(--navLeftWidth, 260px) + 20px);
    margin-right: 20px;
}
/* Sidebar collapsed: navLeft loses .active class */
body:has(.navLeft:not(.active)) #getModalLeoVoice.popUpBox {
    width: calc(100vw - var(--defaultNavLeftWidthClosed, 50px) - 40px);
    margin-left: calc(var(--defaultNavLeftWidthClosed, 50px) + 20px);
}

/* Hide ChatV1 "Chat Box" header and outer chatBox border inside Leo modal */
#getModalLeoVoice .chatBox > .header { display: none; }
#getModalLeoVoice .chatBox { border: none; border-radius: 0; }

/* ─── Tab Strip ─── */
.leo-tab-strip-wrapper {
    display: flex;
    align-items: center;
    background: #161616;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
    gap: 0;
    overflow: hidden;
    flex-wrap: nowrap;
    /* max-height: 58px; */
}

.leo-tab-strip-arrow {
    width: 28px;
    min-width: 28px;
    height: 38px;
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    transition: color 0.15s;
}
.leo-tab-strip-arrow:hover { color: var(--mainBGDarkTextGold, #d09d1f); }

.leo-close-btn {
    flex-shrink: 0;
    font-size: 17px;
    color: #666;
    cursor: pointer;
    padding: 0 12px;
    transition: color 0.15s;
}
.leo-close-btn:hover { color: #ef4444; }

#leoTabStrip {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 0;
}
#leoTabStrip::-webkit-scrollbar { display: none; }

.leo-tab-btn {
    padding: 8px 14px;
    font-size: 14px;
    color: var(--disabledText, #aaa);
    cursor: pointer;
    white-space: nowrap;
    border: none;
    background: none;
    border-bottom: 3px solid transparent;
    transition: all 0.15s;
    flex-shrink: 0;
}
.leo-tab-btn:hover { color: #ddd; background: #222; }
.leo-tab-btn.active {
    color: var(--mainBGDarkTextGold, #d09d1f);
    border-bottom-color: #fff !important;
    background: #1e1e1e;
    font-weight: 500;
}

/* ─── Command Center: fixed General/Actions icon pair (always visible, outside the scrolling carousel) ─── */
.leo-tab-fixed {
    display: flex;
    /* Stretch the fixed icon pair to the full strip height (the strip is sized by the
       taller two-row task tabs) so the icons read as full-height tabs, not small
       centered buttons floating in the middle of the bar. */
    align-items: stretch;
    align-self: stretch;
    flex-shrink: 0;
    gap: 2px;
    padding: 0 6px;
    border-right: 1px solid #333;
}
.leo-tab-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    /* Fill the full height of the tab strip; the icon stays centered via the flex
       centering above. min-height keeps a sensible floor before any task tabs load. */
    height: auto;
    align-self: stretch;
    min-height: 38px;
    padding: 0;
    font-size: 15px;
    border-bottom: 3px solid transparent;
}
.leo-tab-icon-btn.active {
    color: var(--mainBGDarkTextGold, #d09d1f);
    border-bottom-color: #fff !important;
    background: #1e1e1e;
}
/* Actions = lightning bolt inside a circle */
.leo-tab-icon-actions i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
}

/* ─── Tab Two-Row Layout ─── */
.leo-tab-rows { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.leo-tab-row1 { display: flex; align-items: center; gap: 6px; }
.leo-tab-row2 { display: flex; align-items: center; gap: 12px; padding-top: 6px; }
.leo-tab-date { font-size: 12px; color: #666; font-weight: 400; }
.leo-tab-apid {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 12px;
    font-weight: 500;
    color: #ccc;
    background: rgba(65, 65, 65);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s;
}
.leo-tab-apid::before { content: '#'; }
.leo-tab-apid:hover { color: var(--mainBGDarkTextGold, #d09d1f); background: rgba(208,157,31,0.1); }
.leo-tab-version {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 12px;
    font-weight: 600;
    color: #fff;
    background: #888;
    white-space: nowrap;
}

/* Chat body inside modal needs to fill available space */
#leoChatBody { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
#leoChatBody .chatBox { flex: 1; min-height: 0; height: 100%; border: none; border-radius: 0; }
#leoChatBody .chatBox .messageBody { flex: 1; }

/* ─── Header View Toggle ─── */
#leoViewToggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 12px;
}

/* ─── Action Panel (toggled view) ─── */
#leoActionPanel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    font-size: 14px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}
#leoActionPanel .tab-container { background: transparent; width: 100%; flex: 1; display: flex; flex-direction: column; padding: 0; border: none; border-radius: 0; }
#leoActionPanel .tab-content { background: transparent; padding: 12px 0; flex: 1; }
#leoActionPanel .tab-pane.active { flex: 1; }
#leoActionPanel .tab-buttons { border-bottom-color: #444; }
#leoActionPanel .tab-button { background: #252525; border-color: #444; color: var(--disabledText, #aaa); }
#leoActionPanel .tab-button.active { background: #1a1a1a; color: var(--mainBGDarkText, #f6f6f6); border-bottom-color: transparent; }
#leoActionPanel .tab-button:hover { background: #333; }
/* Plan tab: full-width preview, fills tab height with internal scroll */
#leoActionPanel #planFullView {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    max-height: calc(100dvh - var(--headBarHeight, 50px) - 240px);
}
/* Concrete height on the inner preview so markdown + internal scroll resolve
   without depending on the flex parent chain */
#leoActionPanel #planPreviewContainer {
    height: calc(100dvh - var(--headBarHeight, 50px) - 280px);
    min-height: 240px;
    overflow: auto;
    box-sizing: border-box;
}

/* Build tab: Summary + Build Results side-by-side on desktop, stacked on mobile */
#leoActionPanel #buildSplitView {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    flex: 1;
    min-height: 0;
    max-height: calc(100dvh - var(--headBarHeight, 50px) - 240px);
}
#leoActionPanel #buildSplitView .build-box {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

@media (max-width: 899px) {
    #leoActionPanel #planFullView { max-height: 70vh; }
    #leoActionPanel #planPreviewContainer { height: 65vh; min-height: 240px; }
    #leoActionPanel #buildSplitView {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        max-height: none;
    }
    #leoActionPanel #buildSplitView .build-box-summary { max-height: 45vh; }
    #leoActionPanel #buildSplitView .build-box-results { max-height: 55vh; }
    /* Single view-mode select + refresh stays visible on mobile (only one control now) */
}

/* Plan tab: Summary (left) + full plan (right) side-by-side, stacked on mobile */
#leoActionPanel .plan-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
    max-height: calc(100dvh - var(--headBarHeight, 50px) - 240px);
}
#leoActionPanel .plan-split .plan-box {
    min-width: 0;
    min-height: 0;
}
#leoActionPanel .plan-split .plan-box-summary,
#leoActionPanel .plan-split .plan-box-full {
    overflow-y: auto;
    max-height: calc(100dvh - var(--headBarHeight, 50px) - 240px);
    box-sizing: border-box;
}
@media (max-width: 760px) {
    #leoActionPanel .plan-split {
        grid-template-columns: 1fr;
        max-height: none;
    }
    #leoActionPanel .plan-split .plan-box-summary { max-height: 45vh; }
    #leoActionPanel .plan-split .plan-box-full { max-height: 65vh; }
}
#leoActionPanel .sectionBox { background: #2a2a2a; border: 1px solid #333; border-radius: 6px; padding: 16px; }
#leoActionPanel .sectionBox.tab-container { background: transparent; border: none; border-radius: 0; padding: 0; }
#leoActionPanel .markdown-preview-container { color: var(--mainBGDarkText, #f6f6f6); font-size: 13px; line-height: 1.5; }
#leoActionPanel .tab-footer-buttons { flex-shrink: 0; }

/* ─── Command Block General Form ─── */
#leoActionPanel #commandBlockGeneralForm textarea[name="problemDesc"] {
    min-height: 80px;
    box-sizing: border-box;
}

/* ─── Stage Navigation in Context Bar ─── */
.leo-stage-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    flex-wrap: wrap;
}

/* ─── Quick Action Buttons in Context Bar ─── */
.leo-quick-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.leo-qa-btn {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #555;
    background: none;
    color: var(--disabledText, #aaa);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.leo-qa-btn:hover { border-color: #888; color: #fff; }
.leo-qa-btn.regen { border-color: rgba(74,144,217,0.3); color: #4a90d9; }
.leo-qa-btn.regen:hover { background: rgba(74,144,217,0.1); border-color: #4a90d9; }

.leo-tab-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.leo-tab-dot.green { background: #22c55e; }
.leo-tab-dot.orange { background: #f97316; }
.leo-tab-dot.blue { background: #3b82f6; }
.leo-tab-dot.red { background: #ef4444; }

/* ─── Thread Context Bar ─── */
.leo-thread-ctx {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 16px;
    background: #161616;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}
/* ─── Context Bar Toggle Icons ─── */
.leo-ctx-toggle {
    cursor: pointer;
    font-size: 14px;
    color: #555;
    margin-left: 8px;
    transition: color 0.15s;
}
.leo-ctx-toggle:hover { color: var(--mainBGDarkTextGold, #d09d1f); }
.leo-ctx-toggle.active { color: var(--mainBGDarkTextGold, #d09d1f); }

/* ─── Virtual Recommendation Block ─── */
.leo-rec {
    margin: 12px 16px 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(74,144,217,0.08) 0%, rgba(208,157,31,0.06) 100%);
    border: 1px solid rgba(74,144,217,0.2);
    position: relative;
}
.leo-rec-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #4a90d9;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.leo-rec-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--mainBGDarkText, #f6f6f6);
}
.leo-rec-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    justify-content: flex-end;
    align-items: center;
}
.leo-rec-btn {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #555;
    background: none;
    color: var(--disabledText, #aaa);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.leo-rec-btn:hover { border-color: #888; color: #fff; }
.leo-rec-btn.confirm { border-color: rgba(34,197,94,0.4); color: #22c55e; }
.leo-rec-btn.confirm:hover { background: rgba(34,197,94,0.1); border-color: #22c55e; }
.leo-rec-btn.dismiss { border-color: rgba(239,68,68,0.3); color: #888; }
.leo-rec-btn.dismiss:hover { color: #ef4444; border-color: #ef4444; }
.leo-rec-btn.tts { border-color: rgba(74,144,217,0.3); color: #4a90d9; }
.leo-rec-btn.tts:hover { background: rgba(74,144,217,0.1); }

/* ─── Questions Block (distinct from Recommendation) ─── */
.leo-questions {
    margin: 4px 16px 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(208,157,31,0.08) 0%, rgba(239,68,68,0.06) 100%);
    border: 1px solid rgba(208,157,31,0.25);
}
.leo-questions-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--mainBGDarkTextGold, #d09d1f);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.leo-questions-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--mainBGDarkText, #f6f6f6);
}
.leo-questions-text p { margin: 4px 0; }

/* A/B/C answer-option pills under a clarifying question (reuses .leo-rec-btn) */
.leo-q-opts { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }
.leo-rec-btn.recommended { border-color:#4a90d9; color:#4a90d9; }  /* Leo's suggested answer (blue) */
.leo-rec-btn.picked { border-color:#22c55e; color:#22c55e; }       /* the option you selected (green) */

/* Compact answer composer (embedded ChatV1, refId leoAns): hide the empty message-list /
   header / tags so only the input + mic + Send render — no "No messages to display." panel. */
.leoAnsComposer { margin-top:12px; }
.leoAnsComposer .messageBody,
.leoAnsComposer .header,
.leoAnsComposer .messageTags { display:none !important; }
.leoAnsComposer .chatBox { min-height:0; height:auto; }

/* ─── Leo Details Panel ─── */
#leoCtxDetails,
#ccCtxDetails {
    font-size: 12px;
    padding: 6px 12px;
}
#leoCtxDetails form,
#ccCtxDetails form {
    margin: 0;
    display: grid;
    /* 9 equal columns on desktop — matches the 9 non-hidden detail fields.
       minmax(0, 1fr) lets each column shrink instead of overflowing on tight widths. */
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 6px;
}

/* Mobile / tablet: hold at 3 columns regardless of how narrow the viewport gets */
@media (max-width: 900px) {
    #leoCtxDetails form,
    #ccCtxDetails form {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Textarea (problemDesc) is always the first section — span the full row.
   Use :first-child for broad browser support and :has() as a back-up for any future reorder. */
#leoCtxDetails form > section:first-child,
#ccCtxDetails form > section:first-child,
#leoCtxDetails form > section:has(textarea),
#ccCtxDetails form > section:has(textarea) {
    grid-column: 1 / -1;
}

/* Neutralize RSF section width/flex so the grid controls outer sizing */
#leoCtxDetails form > section,
#ccCtxDetails form > section {
    width: auto;
    max-width: none;
    flex: initial;
    min-width: 0;
    padding: 0;
    margin: 0;
    background-color: transparent;
}
/* Inner wrappers should fill the section so selects/textarea actually span the cell */
#leoCtxDetails form > section > div,
#ccCtxDetails form > section > div,
#leoCtxDetails form > section > div > div,
#ccCtxDetails form > section > div > div {
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    min-height: unset;
    height: unset;
    background-color: transparent;
}

/* Place label above the input regardless of framework DOM order */
#leoCtxDetails .subject,
#ccCtxDetails .subject {
    display: flex;
    flex-direction: column-reverse;
}

/* Subtle mixed-case label above each field */
#leoCtxDetails .subject label,
#ccCtxDetails .subject label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--disabledText, #888);
    margin: 0;
    padding: 0 0 0 3px;
    line-height: 1.2;
    text-transform: none;
}

/* Description textarea label stays hidden — the field speaks for itself */
#leoCtxDetails form > section:has(textarea) .subject label,
#ccCtxDetails form > section:has(textarea) .subject label { display: none; }

/* Force 12px on every form control inside the Leo Details panel.
   Competing framework rule is `section.block.long .longBlock.formInput textarea/select/input`
   (specificity 0,4,2); prefixing with #leoCtxDetails gives 1,0,2 which wins on the ID axis
   without needing !important. */
#leoCtxDetails select,
#ccCtxDetails select,
#leoCtxDetails input,
#ccCtxDetails input,
#leoCtxDetails textarea,
#ccCtxDetails textarea,
#leoCtxDetails .searchInputWrapper,
#ccCtxDetails .searchInputWrapper {
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 2px;
}

/* Compact textarea */
#leoCtxDetails textarea,
#ccCtxDetails textarea {
    resize: none;
    min-height: 28px;
    max-height: 60px;
}

/* ─── Scribe Recording Animation ─── */
.scribe-recording {
    animation: scribeRecPulse 1.2s ease-in-out infinite;
    background: #c62828 !important;
    color: #fff !important;
    border-color: #c62828 !important;
}
@keyframes scribeRecPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(198,40,40,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(198,40,40,0); }
}

/* ─── Scribe Pause/Resume Button ─── */
.scribe-pause-btn.hidden { display: none; }
.scribe-pause-btn.scribe-paused { color: #f39c12 !important; border-color: #f39c12 !important; }
.scribe-pause-btn.scribe-paused i { color: #f39c12 !important; }

/* ─── Scribe TTS Playing Animation ─── */
.scribe-playing {
    animation: scribePlayPulse 1s ease-in-out infinite;
    border-color: #4a90d9 !important;
    color: #4a90d9 !important;
}
@keyframes scribePlayPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74,144,217,0.3); }
    50% { box-shadow: 0 0 0 6px rgba(74,144,217,0); }
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
    #getModalLeoVoice.popUpBox {
        top: calc(var(--headBarHeight, 50px) + 30px);
        width: 100vw;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        max-height: calc(100dvh - var(--headBarHeight, 50px) - 30px);
    }
    #leoChatModalRoot {
        height: calc(100dvh - var(--headBarHeight, 50px) - 30px);
        border-radius: 0;
        border: none;
    }
    body:has(.navLeft:not(.active)) #getModalLeoVoice.popUpBox {
        width: 100vw;
        margin-left: 0;
    }

    /* Two-row mobile header so the close (X) stays reachable */
    .leo-modal-header {
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 12px;
    }
    .leo-modal-header .leo-modal-title {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }
    .leo-modal-header .leo-close-btn {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
    }
    /* Force a line break after the close button so toggles wrap to row 2 */
    .leo-modal-header::after {
        content: '';
        order: 3;
        flex-basis: 100%;
        height: 0;
    }
    /* Row 2: view-mode select + refresh FIRST, then the toggles (matches desktop order) */
    .leo-modal-header .leo-header-filters {
        order: 4;
        flex: 0 1 auto;
    }
    .leo-modal-header .leo-title-toggles {
        order: 5;
        flex: 0 1 auto;
        margin: 0;
    }
    .leo-modal-header #leoHeaderToggles {
        order: 6;
        flex: 0 1 auto;
        margin-left: 0;
    }
}

/* Workflow stage progress bar (Leo Briefings tab) */
.workflow-progress-bar { display: flex; gap: 6px; width: 100%; align-items: stretch; }
.workflow-progress-step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.workflow-progress-seg {
    height: 6px;
    border-radius: 3px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
}
.workflow-progress-label {
    font-size: 10px;
    line-height: 1.2;
    color: #888;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.workflow-progress-step.workflow-progress-complete .workflow-progress-seg { background: #4a90d9; border-color: #4a90d9; }
.workflow-progress-step.workflow-progress-current  .workflow-progress-seg { background: #10b981; border-color: #10b981; }
.workflow-progress-step.workflow-progress-current  .workflow-progress-label { color: #e6e6e6; font-weight: 600; }
.workflow-progress-step.workflow-progress-complete .workflow-progress-label { color: #b8c9d8; }
/* Clickable stage track — tap a segment to jump to that stage */
.workflow-progress-step { cursor: pointer; border-radius: 6px; transition: background .12s; padding: 2px 2px 0; }
.workflow-progress-step:hover { background: rgba(255,255,255,.05); }
.workflow-progress-step:hover .workflow-progress-label { color: #fff; }

/* Leo quick-prompt buttons in comment thread head controls (gold accent) */
.formBtn.secondaryBtn.leoPromptBtn { background-color: #b8962e; color: #fff; }
.formBtn.secondaryBtn.leoPromptBtn:hover { background-color: #d4af37; color: #fff; }

/* Command Center Actions-tab mobile (<=640px) — RMC-scoped to the modal.
   The three Actions tables now use FormV2 horizontalScrollable (fixed px column
   widths + sticky action column + sideways scroll), so the wide text columns no
   longer crush — the user swipes horizontally instead. The earlier card-reflow
   (display:block / width:100% per .formRow cell) CONFLICTED with that fixed-width
   scroll layout and has been removed (plan 7 iteration). Horizontal swipe is the
   intended mobile behavior on both desktop and mobile. Only the non-conflicting
   tap-target / label tweaks remain. No FormV2 / ryca-solutions-framework change. */
@media screen and (max-width: 640px) {
    .leo-actions-tab .formRow .link { flex-direction: column; gap: 2px; }
    .leo-actions-tab .leo-action-label { font-size: 10px; }
    .leo-actions-tab .leo-actions-rec { font-size: 13px; }
}

/* ── Command Center Actions tab — desktop styling (plan 7, RMC-scoped) ──────────
   All selectors scoped under .leo-actions-tab so nothing leaks across the modal.
   RSF body is font-size:0, so every raw-HTML cell/badge carries an explicit font-size. */

/* Sub-tab nav (Pending approvals / Awaiting your reply / Open Work) — built with the
   framework elementTabV1Group (.tab-container/.tab-button/.tab-pane), same pattern the
   command-block Overview/Plan/Build tabs use. The Actions tab renders into #leoChatBody
   (not #leoActionPanel), so re-skin the framework tabs for the dark modal here. */
.leo-actions-tab { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.leo-actions-tab .tab-container {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.leo-actions-tab .tab-buttons { border-bottom-color: #444; }
.leo-actions-tab .tab-button {
    background: #252525;
    border-color: #444;
    color: var(--disabledText, #aaa);
    font-size: 13px;
}
.leo-actions-tab .tab-button.active {
    background: #1a1a1a;
    color: var(--mainBGDarkText, #f6f6f6);
    border-bottom-color: transparent;
}
.leo-actions-tab .tab-button:hover { background: #333; }
.leo-actions-tab .tab-content { padding-top: 10px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Pane must be a full-width BLOCK so the FormV2 horizontalScrollable tables size + scroll
   correctly. Overrides the global ptbMain.css:465 `.tab-pane.active{display:inline-flex}`
   (which shrink-wraps the pane and breaks the table layout — fine for the command-block
   grid tabs, wrong for tables). Specificity 0,3,0 beats the global 0,2,0. */
.leo-actions-tab .tab-pane { display: none; width: 100%; }
.leo-actions-tab .tab-pane.active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
/* Additional wrapper so the sub-tab group (nav + tables) is inset/contained within the
   command center instead of running flush to the modal edges. */
.leo-actions-tab .leo-actions-subtab-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; padding: 12px 14px 14px; box-sizing: border-box; }

/* Overflow note under the Open Work list */
.leo-actions-tab .leo-actions-overflow {
    font-size: 11px;
    color: #9ca3af;
    padding: 6px 2px 2px;
}

/* Score badge (Open Work) — replaces the raw "[314]" text */
.leo-actions-tab .leo-score-badge {
    display: inline-block;
    background: #d09d1f;
    color: #1a1a1a;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
}

/* Blocker badge (Open Work) */
.leo-actions-tab .leo-blocker-badge {
    display: inline-block;
    background: #7f1d1d;
    color: #fecaca;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    line-height: 1.4;
}
.leo-actions-tab .leo-blocker-none {
    color: #6b7280;
    font-size: 11px;
}

/* "What's needed" recommendation — truncated preview with full text in native tooltip.
   Distinct from .leo-rec-text (rec PANEL body, leoVoice.css:509) — do NOT merge. */
.leo-actions-tab .leo-actions-rec {
    display: inline-block;
    word-break: break-word;
    line-height: 1.4;
    font-size: 13px;
    color: var(--mainBGDarkText, #f6f6f6);
    cursor: help;
}
.leo-actions-tab .leo-actions-rec-empty {
    color: #9ca3af;
    cursor: default;
}

/* Row color states via classLogicV2 (equality-only; flags pre-computed in PHP).
   RMC overrides carry specificity (0,3,1), beating framework .formRow.red/.blue (0,2,1). */
.leo-actions-tab .formRow.red > div    { background: #7f1d1d; color: #fecaca; }
.leo-actions-tab .formRow.yellow > div { background: #fff6a3; color: #7f6000; }
.leo-actions-tab .formRow.blue > div   { background: rgba(74, 144, 217, 0.12); }
/* Keep action icons legible against the colored backgrounds */
.leo-actions-tab .formRow.red .link i,
.leo-actions-tab .formRow.yellow .link i { font-size: 16px; }
/* "What's needed" span sets its own (light) color, so the row > div color above
   can't reach it — re-assert the row's text color on the nested rec span. */
.leo-actions-tab .formRow.yellow .leo-actions-rec,
.leo-actions-tab .formRow.yellow .leo-actions-rec-empty { color: #7f6000; }
.leo-actions-tab .formRow.red .leo-actions-rec,
.leo-actions-tab .formRow.red .leo-actions-rec-empty { color: #fecaca; }

/* Labeled inline actions — icon + label */
.leo-actions-tab .link {
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #d09d1f;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.leo-actions-tab .link:hover {
    background: rgba(208, 157, 31, 0.12);
    color: #f4d77e;
}
.leo-actions-tab .leo-action-label {
    font-size: 12px;
    white-space: nowrap;
}

/* ── Overview consolidated action toolbar (Stage | Build | Leo) ──
   Dark is the unscoped default; light theme is an unbuilt stub. */
.commandTaskToolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 0;
    border-bottom: 1px solid #2a2a2a;
}
.commandTaskToolbar .tb-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* $recActions keeps its own margin-top; neutralize inside the toolbar */
.commandTaskToolbar .tb-group #leoRecActions { margin-top: 0; }

/* Build group renders via PageHeadControls (.linkObjects > .formBtn.secondary.small.narrow).
   Re-skin that framework output to the dark-box look of the Stage/Leo raw <button>s so
   "Approve Plan" is indistinguishable from "Start Plan"/"Play Briefing". Selectors carry
   (0,3,0)/(0,4,0) specificity — beats framework .formBtn (0,1,0) and .formBtn.narrow (0,2,0),
   and leoVoice.css loads after main.css, so no !important needed. */
.commandTaskToolbar .tb-group .linkObjects {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}
.commandTaskToolbar .tb-group .formBtn {
    background: #2a2a2a;
    color: #e6e6e6;
    border: 1px solid #3a3a3a;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    min-width: 0;
}
.commandTaskToolbar .tb-group .formBtn:hover {
    background: #333;
}
.commandTaskToolbar .tb-group .formBtn .labelText {
    color: inherit;
}
.commandTaskToolbar .tb-group .formBtn i {
    vertical-align: middle;
}
/* Uniform vertical alignment: every toolbar button — Stage/Leo raw <button>s (incl. the
   nested #leoRecActions buttons) and the PageHeadControls .formBtn — gets the same box model
   and centered internal icon/text so the whole row sits on one baseline. Raw buttons default
   to inline-block baseline alignment, which left their text a hair off from the inline-flex
   .formBtn; the borderless blue prompt button was also 2px shorter. box-sizing:border-box +
   min-height makes border vs no-border heights identical. */
.commandTaskToolbar .tb-group button,
.commandTaskToolbar .tb-group .linkObjects,
.commandTaskToolbar .tb-group .formBtn {
    box-sizing: border-box;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.commandTaskToolbar .tb-div {
    width: 1px;
    align-self: stretch;
    min-height: 22px;
    background: #2a2a2a;
}
.commandTaskToolbar .toolbar-note {
    width: 100%;
    font-size: 10.5px;
    color: #888;
    line-height: 1.4;
}
@media (max-width: 760px) {
    .commandTaskToolbar .tb-div { display: none; }
}

/* Dark-box base for the now-classed Stage/Publish raw <button>s (.tbtn). The uniform-
   alignment block above already supplies box-sizing/min-height/inline-flex. */
.commandTaskToolbar .tb-group .tbtn {
    background: #2a2a2a;
    color: #e6e6e6;
    border: 1px solid #3a3a3a;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
}
.commandTaskToolbar .tb-group .tbtn:hover { background: #333; }

/* Recommended next step — amber accent, applied to BOTH the raw .tbtn buttons and the
   framework PageHeadControls .formBtn (Build group). Dark is the unscoped default. */
.commandTaskToolbar .tb-group .tbtn-recommended,
.commandTaskToolbar .tb-group .formBtn.recommended {
    border-color: #e0962f;
    background: rgba(224, 150, 47, 0.14);
    color: #f0c074;
    font-weight: 600;
    box-shadow: 0 0 0 1px #e0962f, 0 0 8px rgba(224, 150, 47, 0.35);
}
.commandTaskToolbar .tb-group .formBtn.recommended .labelText { color: inherit; }

/* ── Overview status-band & 2-up grids ── */
.ovBandSplit { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #2a2a2a; }
.ovTwoUp { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .ovBandSplit, .ovTwoUp { grid-template-columns: 1fr; gap: 18px; } }

/* ── Live container-status pill (Latest Build card) ── */
.container-status {
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.container-status .cs-label {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.8px;
    color: #888;
    font-weight: 700;
}
.container-status .cs-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: #d2b489;
}
.container-status .cstat {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 20px;
    margin-left: auto;
}
.container-status .cstat.live {
    color: #7fce95;
    background: rgba(55, 169, 87, 0.14);
}
.container-status .cstat.down {
    color: #9aa1a9;
    background: rgba(255, 255, 255, 0.05);
}
.container-status .cstat .pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #37a957;
    flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .container-status .cstat.live .pulse {
        animation: csPulse 2s ease-in-out infinite;
    }
    @keyframes csPulse {
        0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(55, 169, 87, 0.5); }
        50%      { opacity: 0.7; box-shadow: 0 0 0 4px rgba(55, 169, 87, 0); }
    }
}