/* ============================================================
 * New Remini Messages + Conversation design — REMINI SCHOOL ONLY.
 * Scoped under .reminiMsg (#Messages page) and .reminiChat
 * (#Conversation page), added only when schoolName === 'remini'.
 * Responsive: desktop + mobile (breakpoint 768px), matching
 * html-output/messages/index.html.
 * Other schools keep the legacy messaging UI untouched.
 * ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

.reminiMsg, .reminiMsg *,
.reminiChat, .reminiChat * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
}

/* ============================================================
 * MESSAGES LIST  (#Messages.reminiMsg)
 * ============================================================ */
#Messages.reminiMsg { background: #f6f7fa !important; }
#Messages.reminiMsg .mainContent { background: #f6f7fa !important; padding: 0 !important; }

/* The header itself reuses the shared body.newdesign-home topbar styling
   (white bar + .nd-topbar-right cluster). We only hide the "go to messages"
   icon — we're already on Messages. */
#Messages.reminiMsg .nd-topbar-msg { display: none !important; }

/* Page title row (above the card): "Messages" + New Conversation button */
#Messages.reminiMsg .reminiMsgHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 24px 10px;
}
#Messages.reminiMsg .reminiMsgTitle {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.36px;
    color: #0a0e14;
}
/* New Conversation pill (legacy .rightButtonInvite, now in content).
   The legacy rules pin it to position:absolute and width:56px (!important) on the
   wrapper, the inner div AND the <p> — all three must be overridden or the label
   clips to "Ne". */
#Messages.reminiMsg .reminiMsgHeader .rightButtonInvite {
    position: static !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    flex-shrink: 0;
}
#Messages.reminiMsg .reminiMsgHeader .rightButtonInvite a { text-decoration: none !important; display: block; }
#Messages.reminiMsg .reminiMsgHeader .rightButtonInvitediv {
    background: var(--main-second-color) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(55,93,251,0.12) !important;
    padding: 11px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 8px;
    height: auto !important;
    width: auto !important;
    min-width: 180px;
    transition: filter 0.12s, background 0.12s;
}
/* Darken the vendor's --main-second-color on hover (works for any base colour). */
#Messages.reminiMsg .reminiMsgHeader .rightButtonInvitediv:hover {
    background: var(--main-second-color) !important;
    filter: brightness(0.92);
}
#Messages.reminiMsg .reminiMsgHeader .rightButtonInvitediv p {
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    white-space: nowrap;
    text-shadow: none !important;
}
#Messages.reminiMsg .reminiMsgHeader .nd-plus-icon { flex-shrink: 0; }

/* Toolbar: tabs (left) + search & filter (right). Sits at the top of the card,
   separated from the rows by a border. */
#Messages.reminiMsg .reminiMsgToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e4e9;
    flex-wrap: wrap;
}
#Messages.reminiMsg .reminiMsgTabsSlot { display: flex; align-items: center; }
#Messages.reminiMsg .reminiMsgSearchGroup {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
#Messages.reminiMsg .searchline {
    position: relative;
    width: 280px;
    max-width: 100%;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Search icon (input uses data-role="none", so no jQM wrapper to fight) */
#Messages.reminiMsg .searchline::before {
    content: "";
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; pointer-events: none; z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Ccircle cx='7' cy='7' r='4.5' stroke='%23525966' stroke-width='1.33'/%3E%3Cpath d='M10.5 10.5l3 3' stroke='%23525966' stroke-width='1.33' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
#Messages.reminiMsg .searchline input {
    width: 100% !important;
    height: 40px !important;
    border: 1px solid #e2e4e9 !important;
    border-radius: 10px !important;
    padding: 0 12px 0 36px !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: #0a0e14 !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(228,229,231,0.24) !important;
    -webkit-appearance: none;
}
#Messages.reminiMsg .searchline input:focus {
    border-color: #2563d7 !important;
    box-shadow: 0 0 0 3px rgba(37,99,215,0.12) !important;
}
/* Filter button — hidden for now (markup kept so it's easy to re-enable). */
#Messages.reminiMsg .reminiMsgFilter { display: none !important; }
#Messages.reminiMsg .reminiMsgFilter.reminiMsgFilterShown {
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 14px;
    background: #fff; border: 1px solid #e2e4e9; border-radius: 10px;
    color: #525966; font-size: 14px; font-weight: 500; cursor: pointer;
    white-space: nowrap; box-shadow: 0 1px 2px rgba(82,88,102,0.06);
}
#Messages.reminiMsg .reminiMsgFilter:hover { background: #f6f7fa; }

/* Manager tabs → segmented control: light-grey container, white active button. */
#Messages.reminiMsg .msg-toggle-bar {
    background: #e9eaee !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 3px !important;
    gap: 2px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
#Messages.reminiMsg .msg-toggle-bar .toggle-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: #525966 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 7px 16px !important;
    box-shadow: none !important;
    /* jQM's .ui-btn forces overflow:hidden + ellipsis + a width; undo all of it so
       the label ("My Messages") sizes to its text instead of clipping. */
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}
#Messages.reminiMsg .msg-toggle-bar .toggle-btn.is-active {
    background: #fff !important;
    color: #0a0e14 !important;
    box-shadow: 0 1px 2px rgba(16,24,40,0.08) !important;
    border: none !important;
}

/* List card */
#Messages.reminiMsg .reminiMsgCard {
    margin: 0 24px 24px;
    background: #fff;
    border: 1px solid #e2e4e9;
    border-radius: 16px;
    overflow: hidden;
}
#Messages.reminiMsg .conversations {
    padding: 0;
    background: transparent;
}

/* Conversation row */
#Messages.reminiMsg .conversations > div.msg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid #e2e4e9;
    background: #fff;
    transition: background 0.1s;
}
#Messages.reminiMsg .conversations > div.msg-row:last-child { border-bottom: none; }
#Messages.reminiMsg .conversations > div.msg-row:hover { background: #f6f7fa; }
#Messages.reminiMsg .msg-avatar {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: #e9f0fb;
}
#Messages.reminiMsg .msg-info { flex: 1; min-width: 0; }
#Messages.reminiMsg .msg-name-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
#Messages.reminiMsg .msg-name { font-size: 15px; font-weight: 500; color: #20252d; white-space: nowrap; }
#Messages.reminiMsg .msg-class { font-size: 13px; font-weight: 400; color: #525966; white-space: nowrap; }
#Messages.reminiMsg .msg-preview {
    font-size: 13px; font-weight: 400; color: #525966;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px; max-width: 560px;
}
/* Unread rows get a slightly stronger preview */
#Messages.reminiMsg .conversations > div.msg-row.noready .msg-preview { color: #20252d; font-weight: 500; }
#Messages.reminiMsg .conversations > div.msg-row.noready .msg-name { font-weight: 700; }

#Messages.reminiMsg .msg-meta {
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
}
#Messages.reminiMsg .msg-time { font-size: 12px; color: #525966; white-space: nowrap; }
#Messages.reminiMsg .badge-unread {
    background: #df1c41; color: #fff; font-size: 11px; font-weight: 700;
    min-width: 20px; height: 20px; border-radius: 999px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
}

/* Mark-all-as-read button */
#Messages.reminiMsg #markAllAsRead {
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 24px 12px; padding: 8px 14px;
    background: #fff; color: #2563d7; border: 1px solid #e2e4e9;
    border-radius: 10px; font-size: 13px; font-weight: 500; cursor: pointer;
}

/* Empty state */
#Messages.reminiMsg .conversations > div.mess { color: #525966; }

/* ============================================================
 * CONVERSATION / CHAT  (#Conversation.reminiChat)
 * Legacy Remini.css pins .messages/.messageline with position:fixed,
 * lays bubbles out with display:table + direction:rtl, and draws
 * CSS-triangle arrows. Everything below overrides that.
 * ============================================================ */
#Conversation.reminiChat { background: #eef0f4 !important; }

/* Header: back + peer avatar + name/class. Force a flex bar (the shared
   newdesign-home header centres .textHeadline absolutely; we don't use it). */
#Conversation.reminiChat .head {
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    min-height: 64px;
    background: #fff !important;
    border-bottom: 1px solid #e2e4e9 !important;
    box-shadow: none !important;
}
#Conversation.reminiChat .head .leftButton {
    position: static !important;
    transform: none !important;
    top: auto !important; left: auto !important;
    margin: 0 8px 0 0 !important;
}
/* Back button: swap the legacy backN.png for a clean chevron-left arrow.
   The <img> element is kept (so the hamburger-hide detection still finds it). */
#Conversation.reminiChat .head .leftButton img,
#Messages.reminiMsg .head .leftButton img {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6' stroke='%2320252d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    width: 28px !important;
    height: 28px !important;
    filter: none !important;
}
#Conversation.reminiChat .reminiChatPeer {
    display: flex !important;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
#Conversation.reminiChat .reminiChatPeerAvatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    flex-shrink: 0; background: #e9f0fb; border: 1px solid #e2e4e9 !important;
}
#Conversation.reminiChat .reminiChatPeerInfo { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#Conversation.reminiChat .reminiChatPeerName {
    font-size: 16px; font-weight: 600; color: #0a0e14;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#Conversation.reminiChat .reminiChatPeerSub {
    font-size: 10px; font-weight: 400; color: #525966;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The conversation card: fixed below the header, with margins (spans the page). */
#Conversation.reminiChat .conversationBox,
#Conversation.reminiChat [calss="conversationBox"] {
    position: fixed !important;
    top: 72px; left: 24px; right: 24px; bottom: 16px;
    display: flex !important;
    flex-direction: column;
    background: #fcfcfd;
    border: 1px solid #e2e4e9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

/* Chat body (scroll). Override legacy position:fixed / max-width / table. */
#Conversation.reminiChat .messages {
    position: static !important;
    top: auto !important; bottom: auto !important;
    width: auto !important; max-width: none !important; max-height: none !important;
    margin: 0 !important;
    padding: 20px 24px !important;
    flex: 1 1 auto;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    background: #fcfcfd !important;
}
#Conversation.reminiChat .messages::-webkit-scrollbar { width: 8px; }
#Conversation.reminiChat .messages::-webkit-scrollbar-thumb { background: #d4d7de !important; border-radius: 8px; }

/* Each message row → grid: an avatar column + a fixed-width content column (~half
   the chat). The header (name + time) spans the content column with space-between
   (so the time sits at a fixed right/left edge, NOT the bubble edge); the bubble
   sits on the row below at content width. Children (DOM order): img.ndChatAvatar,
   div.ndChatHead (font + label.ndChatTime), span[data-messageid] (bubble). */
#Conversation.reminiChat .messages > div {
    display: grid !important;
    grid-template-columns: 55% 34px;                 /* outgoing: content | avatar */
    grid-template-areas: "head avatar" "bubble .";
    justify-content: end;                            /* pack to the right */
    align-items: center;
    column-gap: 8px; row-gap: 3px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    direction: ltr !important;
    text-align: left !important;
}
#Conversation.reminiChat .messages > div.other {
    grid-template-columns: 34px 55%;                 /* incoming: avatar | content */
    grid-template-areas: "avatar head" ". bubble";
    justify-content: start;
}

/* Avatar (light-grey circle) — sits in the header row, top-aligned. */
#Conversation.reminiChat .messages > div > img {
    grid-area: avatar;
    align-self: start;
    display: block !important;
    width: 34px !important; height: 34px !important;
    border-radius: 50% !important; object-fit: cover;
    border: 1px solid #e2e4e9 !important; margin: 0 !important;
    position: static !important;
    background: #e9f0fb;
}

/* Header (name + time) spans the content column, spread to the two ends. */
#Conversation.reminiChat .messages > div > .ndChatHead {
    grid-area: head;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    width: 100%;
}
/* Outgoing: time on the left, name on the right (reverse the name→time DOM order). */
#Conversation.reminiChat .messages > div:not(.other) > .ndChatHead { flex-direction: row-reverse; }
#Conversation.reminiChat .messages > div > .ndChatHead > font {
    position: static !important; left: auto !important; right: auto !important; top: auto !important;
    width: auto !important;
    font-size: 14px; font-weight: 600; color: #20252d;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#Conversation.reminiChat .messages > div > .ndChatHead > .ndChatTime {
    font-size: 12px; color: #8a909c; white-space: nowrap; flex-shrink: 0;
}

/* Bubble wrapper fills the content column's 2nd row (stretch). */
#Conversation.reminiChat .messages > div > span[data-messageid],
#Conversation.reminiChat .messages > div > span:not([class]) {
    grid-area: bubble;
    justify-self: stretch;              /* fill the half-width column */
    width: 100%;
    min-width: 0; max-width: 100%;
    display: block !important;
    padding: 0 !important; margin: 0 !important;
}

/* The visible bubble (inner span) fills the column regardless of text length;
   text just left-aligns inside. Override legacy bg / triangle / rtl / margins. */
#Conversation.reminiChat .messages div > span > span {
    display: block !important;
    width: 100% !important;
    background: #dbe7fb !important;          /* outgoing blue */
    color: #20252d !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    max-width: 100%;
    font-size: 14px !important;
    line-height: 1.5 !important;
    direction: ltr !important;
    text-align: left !important;
    word-break: break-word;
    box-shadow: none !important;
}
#Conversation.reminiChat .messages div.other > span > span {
    background: #f1f2f5 !important;           /* incoming grey */
    border: 1px solid #e8e9ee !important;
}
/* consecutive ("more") rows: reset legacy negative margins */
#Conversation.reminiChat .messages div > span > span.more,
#Conversation.reminiChat .messages div.other > span > span.more { margin: 0 !important; }
/* reset nested rtl on incoming */
#Conversation.reminiChat .messages div.other span span,
#Conversation.reminiChat .messages div.other span span span { direction: ltr !important; }
/* kill the legacy CSS-triangle arrows + any leftover in-bubble .time */
#Conversation.reminiChat .messages div > span > span::before,
#Conversation.reminiChat .messages div.other > span > span::before { display: none !important; content: none !important; border: 0 !important; }
#Conversation.reminiChat .messages span.time { display: none !important; }
/* links inside messages (e.g. attendance "Click here") */
#Conversation.reminiChat .messages div > span > span a { color: #2563d7 !important; font-weight: 600; }
/* images in messages */
#Conversation.reminiChat .messages div span img { max-width: 240px !important; height: auto !important; border-radius: 10px; display: block; }

/* Footer (input bar) at the BOTTOM of the card — override legacy position:fixed */
#Conversation.reminiChat .messageline {
    position: static !important;
    bottom: auto !important;
    width: auto !important; max-width: none !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: #fff !important;
    border-top: 1px solid #e2e4e9 !important;
    flex: 0 0 auto;
}
#Conversation.reminiChat .messageline textarea {
    flex: 1 1 auto;
    height: 46px !important; min-height: 46px;
    width: auto !important; max-width: none !important;
    margin: 0 !important;
    border: 1px solid #e2e4e9 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    color: #0a0e14 !important;
    background: #fff !important;
    outline: none !important;
    resize: none;
    box-shadow: 0 1px 2px rgba(228,229,231,0.24) !important;
}
#Conversation.reminiChat .messageline textarea:focus {
    border-color: #2563d7 !important;
    box-shadow: 0 0 0 3px rgba(37,99,215,0.12) !important;
}
/* Add-image link → compact attach button; reset legacy wrapper border/margins */
#Conversation.reminiChat .messageline > div { border: none !important; margin: 0 !important; }
#Conversation.reminiChat .messageline .addimage {
    margin: 0 !important;
    flex-shrink: 0;
    width: 40px !important;
    height: 40px;
    padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    color: #525966 !important;
    border: none !important; border-radius: 10px;
    text-decoration: none !important;
    background: transparent !important;
}
#Conversation.reminiChat .messageline .addimage:hover { background: #f1f2f5 !important; }
#Conversation.reminiChat .messageline .addimage svg { display: block; }
#Conversation.reminiChat .messageline .addimageinput { display: none !important; }
/* Send button: white SVG paper-plane (set in markup) on a blue square.
   Override legacy position:absolute/right/margin-top. */
#Conversation.reminiChat .messageline img {
    position: static !important;
    right: auto !important; top: auto !important; margin: 0 !important;
    width: 46px !important; height: 46px !important;
    background: var(--main-second-color) !important;
    border-radius: 12px;
    padding: 13px;
    box-sizing: border-box;
    object-fit: contain;
    cursor: pointer;
    flex: 0 0 auto;
    box-shadow: 0 1px 2px rgba(55,93,251,0.12);
}
#Conversation.reminiChat .messageline img:hover { background: #1d50b5 !important; }

/* ============================================================
 * MOBILE  (≤ 768px)
 * ============================================================ */
@media (max-width: 768px) {
    #Messages.reminiMsg .reminiMsgHeader { padding: 16px 14px 8px; }
    #Messages.reminiMsg .reminiMsgTitle { font-size: 20px; }
    #Messages.reminiMsg .reminiMsgHeader .rightButtonInvitediv { padding: 9px 12px !important; }
    /* New Conversation pill: hide the label, keep the + on small screens */
    #Messages.reminiMsg .reminiMsgHeader .rightButtonInvitediv p { display: none; }
    #Messages.reminiMsg .reminiMsgHeader .rightButtonInvitediv { gap: 0; }
    #Messages.reminiMsg .reminiMsgToolbar { padding: 8px 14px 12px; }
    /* Stack: tabs full width on top, search + filter below */
    #Messages.reminiMsg .reminiMsgTabsSlot { width: 100%; }
    #Messages.reminiMsg .msg-toggle-bar { display: flex !important; width: 100%; }
    #Messages.reminiMsg .msg-toggle-bar .toggle-btn { flex: 1 1 0; text-align: center; }
    #Messages.reminiMsg .reminiMsgSearchGroup { width: 100%; margin-left: 0; }
    #Messages.reminiMsg .searchline { flex: 1; width: auto; }
    #Messages.reminiMsg .reminiMsgCard { margin: 0 14px 16px; }
    #Messages.reminiMsg .msg-preview { max-width: 55vw; }

    /* Full-bleed card on phones (no side margins, square corners) */
    #Conversation.reminiChat .conversationBox,
    #Conversation.reminiChat [calss="conversationBox"] {
        top: 60px; left: 0; right: 0; bottom: 0;
        border-radius: 0; border: none;
    }
    #Conversation.reminiChat .head { min-height: 56px; padding: 0 12px !important; }
    #Conversation.reminiChat .messages { padding: 14px !important; gap: 12px; }
    /* Wider content column on phones */
    #Conversation.reminiChat .messages > div { grid-template-columns: 78% 34px; }
    #Conversation.reminiChat .messages > div.other { grid-template-columns: 34px 78%; }
    #Conversation.reminiChat .messageline { padding: 10px 12px !important; }
}

/* ── Send state in the new chat (MessagesController .messagePending / .messageFailed / .messageNotSent).
   The new design hides span.time and resets bubble borders, which removed the legacy spinner and red
   edge - restate them on the bubble itself. ── */
#Conversation.reminiChat .messages > div.messagePending > span > span,
#Conversation.reminiChat .messages > div.messageFailed > span > span { opacity: 0.6; position: relative; }
#Conversation.reminiChat .messages > div.messagePending > span > span::after {
    content: ''; position: absolute; right: 8px; bottom: 8px; width: 12px; height: 12px; box-sizing: border-box;
    border: 2px solid #9fb7e8; border-top-color: #2563d7; border-radius: 50%;
    animation: messageSendingSpin 0.7s linear infinite;
}
#Conversation.reminiChat .messages > div.messageFailed > span > span {
    border-left: 3px solid #c0392b !important; opacity: 0.75;
}
#Conversation.reminiChat .messages > div.messageNotSent,
#Conversation.reminiChat .messages > .messageNotSent {
    display: block !important; grid-column: 1 / -1; width: auto !important;
    margin: 6px auto !important; text-align: center !important;
    color: #c0392b; font: 500 13px 'Inter', sans-serif;
}
@media (prefers-reduced-motion: reduce) {
    #Conversation.reminiChat .messages > div.messagePending > span > span::after { animation: none; }
}