/* ============================================================
   Jemi Chat Modal
   ============================================================ */

/* ============================================================
   Theme variables
   Uses body.anydata-dark-mode / html.anydata-dark-mode
   set by anydata-ai-chat-modal.js
   ============================================================ */

:root {
    --jemi-dx-accent: var(--dxbl-accent-color, #1aa7c7);
}

/* Light mode default */
:root,
html:not(.anydata-dark-mode),
body:not(.anydata-dark-mode) {
    --jemi-overlay-bg: rgba(15, 23, 42, 0.28);
    --jemi-modal-bg: radial-gradient(circle at top left, rgba(53, 201, 244, 0.10), transparent 30%), linear-gradient(145deg, #ffffff 0%, #f7fbfe 48%, #f0f7fb 100%);
    --jemi-modal-border: rgba(20, 132, 155, 0.26);
    --jemi-modal-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
    --jemi-header-bg: rgba(255, 255, 255, 0.82);
    --jemi-text: #152235;
    --jemi-text-soft: rgba(21, 34, 53, 0.82);
    --jemi-text-muted: rgba(21, 34, 53, 0.58);
    --jemi-surface: rgba(255, 255, 255, 0.86);
    --jemi-surface-strong: rgba(255, 255, 255, 0.98);
    --jemi-surface-soft: rgba(255, 255, 255, 0.70);
    --jemi-surface-border: rgba(20, 132, 155, 0.18);
    --jemi-assistant-bg: rgba(255, 255, 255, 0.96);
    --jemi-assistant-border: rgba(20, 132, 155, 0.18);
    --jemi-user-bg: linear-gradient(135deg, #35c9f4, #43d6c7);
    --jemi-user-text: #062033;
    --jemi-accent: var(--jemi-dx-accent);
    --jemi-accent-strong: #0d6f86;
    --jemi-accent-soft: rgba(26, 167, 199, 0.11);
    --jemi-accent-border: rgba(26, 167, 199, 0.30);
    --jemi-danger-bg: linear-gradient(135deg, #ef4444, #f97316);
    --jemi-input-bg: rgba(255, 255, 255, 0.96);
    --jemi-input-border: rgba(20, 132, 155, 0.24);
    --jemi-code-bg: rgba(26, 167, 199, 0.10);
    --jemi-scroll-track: rgba(15, 23, 42, 0.06);
    --jemi-scroll-thumb: rgba(26, 167, 199, 0.30);
}

/* Explicit dark mode */
html.anydata-dark-mode,
body.anydata-dark-mode {
    --jemi-overlay-bg: rgba(3, 12, 28, 0.58);
    --jemi-modal-bg: radial-gradient(circle at top left, rgba(53, 201, 244, 0.13), transparent 30%), linear-gradient(145deg, #102a43 0%, #12385e 48%, #0b2037 100%);
    --jemi-modal-border: rgba(67, 214, 199, 0.34);
    --jemi-modal-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
    --jemi-header-bg: rgba(255, 255, 255, 0.06);
    --jemi-text: #f5fbff;
    --jemi-text-soft: rgba(245, 251, 255, 0.88);
    --jemi-text-muted: rgba(245, 251, 255, 0.66);
    --jemi-surface: rgba(255, 255, 255, 0.10);
    --jemi-surface-strong: rgba(255, 255, 255, 0.14);
    --jemi-surface-soft: rgba(255, 255, 255, 0.08);
    --jemi-surface-border: rgba(255, 255, 255, 0.14);
    --jemi-assistant-bg: rgba(255, 255, 255, 0.13);
    --jemi-assistant-border: rgba(255, 255, 255, 0.16);
    --jemi-user-bg: linear-gradient(135deg, #35c9f4, #43d6c7);
    --jemi-user-text: #042033;
    --jemi-accent: #43d6c7;
    --jemi-accent-strong: #d8fffb;
    --jemi-accent-soft: rgba(67, 214, 199, 0.12);
    --jemi-accent-border: rgba(67, 214, 199, 0.38);
    --jemi-danger-bg: linear-gradient(135deg, #ef4444, #f97316);
    --jemi-input-bg: rgba(255, 255, 255, 0.12);
    --jemi-input-border: rgba(255, 255, 255, 0.20);
    --jemi-code-bg: rgba(67, 214, 199, 0.15);
    --jemi-scroll-track: rgba(255, 255, 255, 0.06);
    --jemi-scroll-thumb: rgba(67, 214, 199, 0.30);
}

/* ============================================================
   Overlay and shell
   ============================================================ */

.jemi-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: var(--jemi-overlay-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.jemi-modal {
    width: min(1080px, calc(100vw - 36px));
    height: min(790px, calc(100vh - 36px));
    background: var(--jemi-modal-bg);
    border: 1px solid var(--jemi-modal-border);
    border-radius: 24px;
    box-shadow: var(--jemi-modal-shadow);
    color: var(--jemi-text);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ============================================================
   Header
   ============================================================ */

.jemi-header {
    padding: 18px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: var(--jemi-header-bg);
    border-bottom: 1px solid var(--jemi-surface-border);
    flex-shrink: 0;
}

.jemi-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.jemi-avatar {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 16px rgba(67, 214, 199, 0.32));
}

.jemi-title {
    font-size: 24px;
    font-weight: 760;
    letter-spacing: -0.03em;
    color: var(--jemi-text);
    line-height: 1.1;
}

.jemi-subtitle {
    margin-top: 4px;
    font-size: 14px;
    color: var(--jemi-text-soft);
    line-height: 1.25;
}

.jemi-close {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--jemi-surface);
    color: var(--jemi-text);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .jemi-close:hover {
        background: var(--jemi-surface-strong);
    }

/* ============================================================
   Context banner
   ============================================================ */

.jemi-context {
    margin: 16px 24px 0;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--jemi-surface);
    border: 1px solid var(--jemi-surface-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

    .jemi-context span {
        font-weight: 700;
        color: var(--jemi-text);
        font-size: 14px;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .jemi-context small {
        color: var(--jemi-text-muted);
        font-size: 13px;
        line-height: 1.3;
        white-space: nowrap;
    }

/* ============================================================
   Suggestion chips
   ============================================================ */

.jemi-suggestions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    padding: 14px 24px 0;
    flex-shrink: 0;
}

    .jemi-suggestions button {
        border: 1px solid var(--jemi-accent-border);
        background: var(--jemi-accent-soft);
        color: var(--jemi-accent-strong);
        border-radius: 999px;
        padding: 8px 14px;
        font-size: 13px;
        line-height: 1.2;
        cursor: pointer;
    }

        .jemi-suggestions button:hover:not(:disabled) {
            background: var(--jemi-accent-soft);
            border-color: var(--jemi-accent-border);
            filter: brightness(1.05);
        }

        .jemi-suggestions button:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

/* ============================================================
   Chat area
   ============================================================ */

.jemi-chat {
    flex: 1;
    margin: 14px 24px 0;
    padding: 0 6px 0 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
    min-height: 0;
    background: transparent;
}

    .jemi-chat::-webkit-scrollbar {
        width: 9px;
    }

    .jemi-chat::-webkit-scrollbar-track {
        background: var(--jemi-scroll-track);
        border-radius: 999px;
    }

    .jemi-chat::-webkit-scrollbar-thumb {
        background: var(--jemi-scroll-thumb);
        border-radius: 999px;
    }

        .jemi-chat::-webkit-scrollbar-thumb:hover {
            background: var(--jemi-accent-border);
        }

/* ============================================================
   Messages
   ============================================================ */

.jemi-message {
    max-width: 82%;
    padding: 12px 14px;
    border-radius: 16px;
    line-height: 1.42;
    font-size: 14px;
}

    .jemi-message.assistant {
        align-self: flex-start;
        background: var(--jemi-assistant-bg);
        border: 1px solid var(--jemi-assistant-border);
        color: var(--jemi-text);
        white-space: normal;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    }

    .jemi-message.user {
        align-self: flex-end;
        background: var(--jemi-user-bg);
        color: var(--jemi-user-text);
        font-weight: 650;
        white-space: pre-wrap;
        max-width: 74%;
        box-shadow: 0 8px 26px rgba(26, 167, 199, 0.24);
    }

    /* ============================================================
   Compact Markdown inside assistant messages
   ============================================================ */

    .jemi-message.assistant h1,
    .jemi-message.assistant h2,
    .jemi-message.assistant h3,
    .jemi-message.assistant h4,
    .jemi-message.assistant h5,
    .jemi-message.assistant h6 {
        margin: 0 0 8px 0;
        color: var(--jemi-text);
        line-height: 1.2;
        font-weight: 760;
    }

    .jemi-message.assistant h1 {
        font-size: 18px;
    }

    .jemi-message.assistant h2 {
        font-size: 17px;
    }

    .jemi-message.assistant h3 {
        font-size: 15.5px;
    }

    .jemi-message.assistant h4,
    .jemi-message.assistant h5,
    .jemi-message.assistant h6 {
        font-size: 14.5px;
    }

    .jemi-message.assistant p {
        margin: 0 0 8px 0;
        color: var(--jemi-text-soft);
        line-height: 1.42;
    }

        .jemi-message.assistant p:last-child {
            margin-bottom: 0;
        }

    .jemi-message.assistant ul,
    .jemi-message.assistant ol {
        margin: 6px 0 8px 18px;
        padding: 0;
    }

    .jemi-message.assistant li {
        margin: 0 0 5px 0;
        padding-left: 2px;
        color: var(--jemi-text-soft);
        line-height: 1.42;
    }

        .jemi-message.assistant li:last-child {
            margin-bottom: 0;
        }

        .jemi-message.assistant li > p {
            margin: 0;
        }

    .jemi-message.assistant strong {
        color: var(--jemi-accent-strong);
        font-weight: 760;
    }

    .jemi-message.assistant em {
        color: var(--jemi-text-muted);
    }

    .jemi-message.assistant a {
        color: var(--jemi-accent);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .jemi-message.assistant blockquote {
        margin: 8px 0;
        padding: 8px 12px;
        border-left: 3px solid var(--jemi-accent-border);
        background: var(--jemi-accent-soft);
        color: var(--jemi-text-soft);
        border-radius: 0 10px 10px 0;
    }

    .jemi-message.assistant code {
        background: var(--jemi-code-bg);
        border: 1px solid var(--jemi-accent-border);
        padding: 1px 5px;
        border-radius: 6px;
        color: var(--jemi-accent-strong);
        font-size: 0.92em;
    }

    .jemi-message.assistant pre {
        background: rgba(0, 0, 0, 0.12);
        padding: 10px;
        border-radius: 10px;
        overflow-x: auto;
        margin: 8px 0;
    }

        .jemi-message.assistant pre code {
            background: transparent;
            border: 0;
            padding: 0;
            border-radius: 0;
            color: var(--jemi-text);
        }

    .jemi-message.assistant table {
        width: 100%;
        border-collapse: collapse;
        margin: 8px 0;
        font-size: 13px;
    }

    .jemi-message.assistant th,
    .jemi-message.assistant td {
        border: 1px solid var(--jemi-surface-border);
        padding: 6px 8px;
        text-align: left;
        vertical-align: top;
    }

    .jemi-message.assistant th {
        background: var(--jemi-accent-soft);
        color: var(--jemi-accent-strong);
        font-weight: 760;
    }

    .jemi-message.assistant hr {
        border: 0;
        height: 1px;
        background: var(--jemi-surface-border);
        margin: 10px 0;
    }

    .jemi-message.assistant > :first-child {
        margin-top: 0;
    }

    .jemi-message.assistant > :last-child {
        margin-bottom: 0;
    }

/* ============================================================
   Input
   ============================================================ */

.jemi-input-row {
    padding: 18px 24px 14px;
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--jemi-surface-border);
    flex-shrink: 0;
    margin-top: 16px;
}

    .jemi-input-row input {
        flex: 1;
        min-width: 0;
        border: 1px solid var(--jemi-input-border);
        background: var(--jemi-input-bg);
        color: var(--jemi-text);
        border-radius: 16px;
        padding: 13px 16px;
        outline: none;
        font-size: 14px;
    }

        .jemi-input-row input::placeholder {
            color: var(--jemi-text-muted);
        }

        .jemi-input-row input:focus {
            border-color: var(--jemi-accent-border);
            box-shadow: 0 0 0 3px var(--jemi-accent-soft);
        }

        .jemi-input-row input:disabled {
            opacity: 0.72;
        }

    .jemi-input-row button {
        border: 0;
        border-radius: 16px;
        padding: 0 22px;
        min-width: 78px;
        font-weight: 760;
        font-size: 14px;
        cursor: pointer;
        color: var(--jemi-user-text);
        background: var(--jemi-user-bg);
    }

        .jemi-input-row button:hover:not(:disabled) {
            filter: brightness(1.04);
        }

        .jemi-input-row button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

    .jemi-input-row .jemi-stop-button {
        color: #ffffff;
        background: var(--jemi-danger-bg);
    }

/* ============================================================
   Footer
   ============================================================ */

.jemi-footer {
    padding: 0 24px 18px;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--jemi-text-muted);
    flex-shrink: 0;
}

/* ============================================================
   Thinking placeholder
   ============================================================ */

.jemi-thinking-message {
    opacity: 0.95;
    max-width: fit-content;
}

.jemi-thinking-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--jemi-text-soft);
    font-size: 13.5px;
}

.jemi-thinking-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

    .jemi-thinking-dots span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--jemi-accent);
        animation: jemi-dot-pulse 1.2s infinite ease-in-out;
    }

        .jemi-thinking-dots span:nth-child(2) {
            animation-delay: 0.15s;
        }

        .jemi-thinking-dots span:nth-child(3) {
            animation-delay: 0.3s;
        }

@keyframes jemi-dot-pulse {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 760px) {
    .jemi-overlay {
        padding: 10px;
        align-items: stretch;
    }

    .jemi-modal {
        width: 100%;
        height: 100%;
        border-radius: 18px;
    }

    .jemi-header {
        padding: 14px 16px;
    }

    .jemi-avatar {
        width: 56px;
        height: 56px;
    }

    .jemi-brand {
        gap: 12px;
    }

    .jemi-title {
        font-size: 20px;
    }

    .jemi-subtitle {
        font-size: 12.5px;
    }

    .jemi-context {
        margin: 12px 16px 0;
        flex-direction: column;
        align-items: flex-start;
    }

        .jemi-context span,
        .jemi-context small {
            white-space: normal;
        }

    .jemi-suggestions {
        padding: 12px 16px 0;
    }

    .jemi-chat {
        margin: 12px 16px 0;
        padding-right: 4px;
    }

    .jemi-message,
    .jemi-message.assistant,
    .jemi-message.user {
        max-width: 94%;
    }

    .jemi-input-row {
        padding: 14px 16px 12px;
    }

    .jemi-footer {
        padding: 0 16px 14px;
    }
}