/* ================================
   InsightMapper.css — optimized
   (duplicates merged; latest wins)
   ================================ */

/* --- Design tokens / view vars --- */
:root {
    --header-h: 64px; /* match your header height */
    --crumb-h: 44px; /* match your breadcrumbs height */
    /* Dark card theme palette (used below) */
    --card-dark: #0f172a;
    --card-dark-2: #111827;
    --card-border: #1f2937;
    --card-text: #f3f4f6;
}

/* --- Base frame --- */
html, body {
    height: 100%;
    margin: 0;
}

body {
    background: #f9fbfc;
    overflow: hidden;
}
/* no page scrollbar */
html, body, .EntireBody {
    height: 100%;
}

/* Header stub (for offset consistency; real header is sticky elsewhere) */
.header {
    height: var(--header-h);
}


/* --- Page regions under breadcrumbs (must not scroll) --- */
.EntireBody {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.BodyContent {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* allow inner scroll to take over */
    overflow: hidden; /* confine scroll to editor area */
}

/* Wrappers should not trap overflow */
.feature-card,
.feature-bg {
    min-height: 0;
    overflow: hidden;
}

/* minor spacing tweak you had */
.feature-card {
    margin: 0 auto;
    padding: 0;
}

.feature-bg {
    padding-top: 8px;    
}

/* small form tweaks */
#InputContext {
    min-height: 0;
    height: auto;
}

#mapper-form.contact-form {
    gap: 6px;
}

/* ================================
   Editor region: toolbars fixed,
   only middle scrolls
   ================================ */

/* 3 rows: top toolbar / editor scroll / bottom toolbar */
.editor-shell {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: calc(100vh - var(--header-h) - var(--crumb-h)) !important;
    min-height: 0;
    overflow: hidden; /* shell itself never scrolls */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

/* Only the middle section scrolls */
.editor-scroll {
    min-height: 0; /* critical inside grid/flex */
    overflow: auto; /* scrollbar lives here */
    -webkit-overflow-scrolling: touch;
    background: #fff;
}

/* Editor fills the scroll slot (no self-scroll) */
#rtf-editor,
.rtf-edit {
    min-height: 100%;
    box-sizing: border-box;
    padding: 12px;
    background: #fff;
    color: #0b1f2a;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* Toolbars stay visible */
.toolbar-top,
.toolbar-bottom {
    background: #f5f7fa;
    padding: 8px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    z-index: 1;
}

.toolbar-top {
    border-top: 0;
}

.toolbar-bottom {
    border-bottom: 0;
}

/* How much dark background to show under the card */
:root {
    --peek: 8px; /* tweak to taste: 12–24px works well */
}

/* Make the dark wrapper own the full viewport area under header/breadcrumbs */
.feature-bg {
    /* give it the dark strip */
    background: var(--card-dark, #0f172a);
    /* occupy the available viewport minus fixed bars */
    min-height: calc(100vh - var(--header-h) - var(--crumb-h));
    display: flex;
    justify-content: center;
    align-items: flex-start; /* keep the card starting at the top */
    padding: 8px 12px var(--peek); /* bottom padding becomes the visible strip */
    box-sizing: border-box;
    overflow: hidden; /* no outer scrollbars */
}

/* Ensure the white card fits with a small gap for the dark strip */
.feature-card {
    width: 100%;
    max-width: 1100px; /* or your preferred width */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-sizing: border-box;
    /* keep the entire card in view while leaving the dark strip visible */
    max-height: calc(100vh - var(--header-h) - var(--crumb-h) - var(--peek) - 16px);
    /* subtract a tiny extra (16px) for internal padding/borders */
    overflow: hidden; /* card itself doesn’t scroll */
}

/* Only the editor middle section should scroll (as you already do) */
.editor-shell {
    height: 100%; /* inherit from .feature-card’s max-height container */
}

.editor-scroll {
    overflow: auto; /* inner scroll lives here */
}





feature-card {
    background: linear-gradient(to right, #d1d5db 0%, #e5e7eb 100%);
    padding-top: 0px;
}
usecase-content {
    background: linear-gradient(to right, #d1d5db 0%, #e5e7eb 100%);
    padding-top: 0px;
}
.editor-shell {
    background: linear-gradient(to right, #d1d5db 0%, #e5e7eb 100%);
    padding-top: 0px;
}
.editor-scroll {    
    background: linear-gradient(to right, #d1d5db 0%, #e5e7eb 100%);
}
.toolbar-top {
    background: linear-gradient(to right, #d1d5db 0%, #e5e7eb 100%);   
    padding-top: 0px;
}
.cf-actions {    
    background: linear-gradient(to right, #d1d5db 0%, #e5e7eb 100%);
}
.toolbar-bottom {    
    background: linear-gradient(to right, #d1d5db 0%, #e5e7eb 100%);
}

.page-title {
    margin-top: 4px; /* or 0 to remove it completely */
    margin-bottom: 0px; /* adjust to control spacing below */
}


/* Force a gutter inside the scroll area */
.feature-card .editor-shell .editor-scroll {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Remove side padding on the editable so the gutter is single-source */
#rtf-editor,
.rtf-edit {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#rtf-editor,
.rtf-edit {
    border-radius: 10px; /* smooth corners */
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden; /* keeps text and highlights inside the curve */
}

/* ==========================================
   Compact font sizing for all UI elements
   except buttons and ActionStatusBar
   ========================================== */

/* Base font size reduction (scoped inside feature-card area) */
.feature-card,
.feature-card * {
    font-size: 0.7rem; /* roughly 90% of normal */
    line-height: 1;
}

    /* Exclude all button types from reduction */
    .feature-card button,
    .feature-card [type="button"],
    .feature-card [type="submit"],
    .feature-card .btn {
        font-size: 1rem !important; /* keep default or reset */
        line-height: normal;
    }

#source-file-select.vc-select {
    height: 28px !important; /* tighter height (was 34px) */
    padding: 2px 8px !important; /* reduce inner vertical spacing */   
}

.btn-primary {
    padding: 6px 10px; /* reduced from 10px 14px */
    font-size: 0.7rem; /* optional */
}


/* default: hidden (height 0) */
.toolbar-bottom[name="for_mobile"] {
    height: 0px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .toolbar-bottom[name="for_mobile"] {
        height: calc(110px + env(safe-area-inset-bottom));
    }
}