/*
 * Compact chat modal overrides for Salesforce embed mode.
 * All rules are scoped to body.embed-mode — zero impact on normal MindBoard.
 *
 * Problem: The Salesforce split-screen panel gives the iframe ~480px of height.
 * The current modal chrome (header + tabs + input + disclaimer + bottom row)
 * consumes ~330px, leaving almost no room for AI response text.
 *
 * Solution: Tighten every non-content section so the messages area gets
 * as much vertical space as possible.
 */

/* ── 1. Modal dialog: vertically centered, fills available iframe height ── */

/*
 * Bootstrap's .modal overlay is position:fixed, covering 100% of the iframe.
 * By making it a flex container (only when visible), `margin: auto` on the
 * dialog centers it perfectly both horizontally and vertically.
 * We target .show so Bootstrap can still hide it with display:none inline.
 */
.embed-mode #chatModal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.embed-mode #chatModal .modal-dialog {
    max-height: 96vh;
    margin: auto;
    width: 100%;
}

/* ── 2. Modal header: collapse the context toast ───────────────────────── */
.embed-mode #chatModal .modal-header {
    padding: 0.4rem 1rem 0.4rem 1rem;
}

.embed-mode #chatModal .modern-context-toast {
    margin-bottom: 0 !important;
}

.embed-mode #chatModal .modern-context-toast .toast-body {
    padding: 0.4rem 0.75rem;
}

/* Hide the breadcrumb path ("Board > Column"), keep only the card title */
.embed-mode #chatModal .context-path {
    display: none !important;
}

.embed-mode #chatModal .context-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
}

/* ── 3. Tab row: tighter padding ───────────────────────────────────────── */
.embed-mode #chatModal .nav-tabs {
    padding-top: 0.25rem !important;
    padding-bottom: 0 !important;
}

.embed-mode #chatModal .nav-tabs .nav-link {
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
}

/* ── 4. Input container: reduce padding ────────────────────────────────── */
.embed-mode #aiChatTabPane .chat-input-container {
    padding: 0.5rem 0.75rem !important;
}

/* ── 5. Textarea: reduce height from 85px to 50px ─────────────────────── */
.embed-mode .chat-input {
    min-height: 50px !important;
    max-height: 50px !important;
    padding-right: 90px !important; /* narrower since image/doc buttons are hidden */
}

/* ── 6. Hide image & document upload buttons (not needed in SF context) ── */
.embed-mode #imageUploadBtn,
.embed-mode #documentUploadBtn {
    display: none !important;
}

/* ── 7. Send button: match shorter textarea height ─────────────────────── */
.embed-mode .modal#chatModal .chat-input-container .chat-send-button,
.embed-mode .chat-send-button {
    height: 50px !important;
    margin-top: -10px !important;
}

/* ── 8. Disclaimer text: hide to reclaim ~35px ─────────────────────────── */
.embed-mode #aiChatTabPane .text-muted.small.mt-1 {
    display: none !important;
}

/* ── 9. MindSpark row: keep toggle, hide Print, tighten margins ─────────── */
.embed-mode #aiChatTabPane .d-flex.align-items-center.mt-3.mb-3.pe-3 {
    margin-top: 0.35rem !important;
    margin-bottom: 0.35rem !important;
}

/* Hide only the Print button */
.embed-mode #printChatBtn {
    display: none !important;
}

/* Slightly smaller MindSpark label text */
.embed-mode .deep-research-toggle-container .deep-research-label {
    font-size: 0.85rem;
}

.embed-mode .deep-research-toggle-container .deep-research-subtitle {
    font-size: 0.65rem;
}