/* Marvin — NIZU AI Assistant chat UI.
   Kept minimal and theme-friendly: colours derive from Bootstrap utility classes
   where possible so dark mode (body.color-1E202D) keeps working. */

.marvin-card .marvin-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #6f42c1;
    color: #fff;
}

.marvin-thread {
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px 2px;
}

.marvin-empty {
    text-align: center;
    padding: 32px 12px;
}

.marvin-msg {
    display: flex;
    margin-bottom: 12px;
}

.marvin-from-user {
    justify-content: flex-end;
}

.marvin-from-bot {
    justify-content: flex-start;
}

.marvin-bubble {
    max-width: 78%;
    padding: 9px 13px;
    border-radius: 14px;
    line-height: 1.45;
    word-wrap: break-word;
}

.marvin-from-user .marvin-bubble {
    background: #6f42c1;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.marvin-from-bot .marvin-bubble {
    background: #f0f1f4;
    color: #1e202d;
    border-bottom-left-radius: 4px;
}

.marvin-time {
    align-self: flex-end;
    font-size: 11px;
    margin: 0 6px;
}

.marvin-typing .marvin-bubble {
    letter-spacing: 2px;
    opacity: 0.6;
}

/* --- Markdown rendering inside Marvin bubbles (both plugin + native messenger) --- */
.marvin-md .marvin-h4,
.marvin-md .marvin-h5,
.marvin-md .marvin-h6 { font-weight: 700; margin: 6px 0 3px; line-height: 1.3; }
.marvin-md .marvin-h4 { font-size: 1.05em; }
.marvin-md .marvin-h5 { font-size: 1.0em; }
.marvin-md .marvin-h6 { font-size: 0.95em; }
.marvin-md ul.marvin-list,
.marvin-md ol.marvin-list { margin: 4px 0 4px 1.1em; padding-left: 0.6em; }
.marvin-md ul.marvin-list li,
.marvin-md ol.marvin-list li { margin: 1px 0; }
.marvin-md code { background: rgba(135, 131, 120, 0.18); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.marvin-md pre.marvin-pre { background: rgba(135, 131, 120, 0.14); padding: 8px 10px; border-radius: 6px; overflow-x: auto; margin: 6px 0; }
.marvin-md pre.marvin-pre code { background: none; padding: 0; }
.marvin-md a { text-decoration: underline; }

/* --- Tables (PHP-built markdown → HTML table) --- */
.marvin-md .marvin-table-wrap { margin: 8px -13px 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.marvin-md table.marvin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
    background: rgba(255, 255, 255, 0.5);
}
.marvin-md table.marvin-table th,
.marvin-md table.marvin-table td {
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.marvin-md table.marvin-table thead th {
    font-weight: 600;
    background: rgba(120, 120, 128, 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
    position: sticky;
    top: 0;
}
.marvin-md table.marvin-table tbody tr:last-child td { border-bottom: 0; }
.marvin-md table.marvin-table tbody tr:hover { background: rgba(10, 132, 255, 0.06); }
body.color-1E202D .marvin-md table.marvin-table { background: rgba(255, 255, 255, 0.06); }
body.color-1E202D .marvin-md table.marvin-table th,
body.color-1E202D .marvin-md table.marvin-table td { border-bottom-color: rgba(255, 255, 255, 0.12); }
body.color-1E202D .marvin-md table.marvin-table thead th { background: rgba(255, 255, 255, 0.1); }

/* --- Report chart (donut PNG) — a portrait card image, capped for a chat bubble --- */
.marvin-md .marvin-chart-wrap { margin: 10px 0 2px; text-align: center; }
.marvin-md .marvin-chart {
    max-width: 100%;
    width: 300px;
    height: auto;
    border-radius: 12px;
    display: inline-block;
    box-shadow: 0 2px 12px rgba(17, 24, 39, 0.14);
}

/* --- Choice buttons — WhatsApp / Telegram message-card actions ---------------
   Full-width, centred, wrapping labels with a reply arrow, stacked at the very
   bottom of the bubble and separated by hairline dividers. The block stretches to
   the bubble edges via negative margins matched to the bubble padding (9px 13px,
   identical in the plugin `.marvin-bubble` and the native `.chat-msg`). */
.marvin-md { display: block; }

.marvin-choices {
    display: block;
    margin: 10px -13px -9px;              /* reach the bubble's side + bottom edges */
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}
.marvin-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.09);   /* divider from the text / prev button */
    border-radius: 0;
    color: #0a84ff;
    font-weight: 600;
    font-size: 0.95em;
    line-height: 1.3;
    text-align: center;
    white-space: normal;                 /* wrap long labels */
    word-break: break-word;
    cursor: pointer;
    transition: background 0.15s ease;
}
.marvin-choice > i { font-size: 0.92em; opacity: 0.9; flex: 0 0 auto; }
.marvin-choice:hover { background: rgba(10, 132, 255, 0.08); }
.marvin-choice:active { background: rgba(10, 132, 255, 0.16); }
.marvin-choice:disabled { opacity: 0.5; cursor: default; background: transparent; }

/* Dark theme: lighter hairline dividers */
body.color-1E202D .marvin-choice { border-top-color: rgba(255, 255, 255, 0.14); }