/* 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); }

/* Pinned-project badge under Marvin's name in the chat header (marvin.js paints it). */
.chat-title .marvin-chat-pin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
    opacity: 0.95;
    max-width: 220px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.chat-title .marvin-chat-pin > i {
    color: #ff3b30;              /* red pin */
    font-size: 0.95em;
    flex: 0 0 auto;
}

/* ---- "Read answers aloud" toggle -----------------------------------------
 * Browser-local speech synthesis (nothing leaves the device). Rendered as one more
 * control chip in the header row and carrying .chat-topbar-btn, so it inherits the
 * skin's circular glass styling. The chips are absolutely positioned in 42px steps
 * from the right (close 12 → more-options 54 → speaker 96); when the ellipsis chip
 * isn't rendered (mobile) the JS adds .marvin-tts-compact to take its slot.
 * Specificity is kept at/above the skin's so load order can't flip it. */
.rise-chat-wrapper .rise-chat-header .chat-topbar-btn.marvin-tts-toggle { right: 96px; }
.rise-chat-wrapper .rise-chat-header .chat-topbar-btn.marvin-tts-toggle.marvin-tts-compact { right: 54px; }

/* Neutralise the <button> defaults the sibling <div> chips never had. */
.rise-chat-header .marvin-tts-toggle {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    cursor: pointer;
}
/* The icon must never be the event target: the messenger re-renders the header, and a
   mousedown/mouseup landing on two different <i> nodes would cancel the click. */
.rise-chat-header .marvin-tts-toggle > i {
    pointer-events: none;
}
/* Speaking: accent blue, matching the app's active state. */
.rise-chat-wrapper .rise-chat-header .chat-topbar-btn.marvin-tts-toggle.is-on { color: #0a84ff; }