/* PestPac task notes, laid out as a chat thread: ADMIN's notes sit on the
   right in the primary colour, everyone else's on the left in grey. Tokens
   handle light/dark, so no theme selectors needed. */
.mc-note-chat-popover { width: 360px; max-width: calc(100vw - 32px); }
.mc-note-chat-popover .popover-body { padding: 8px; background-color: var(--thinGray); }

.mc-note-chat { display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.mc-note-chat-empty { padding: 4px; color: var(--textColor); }

.mc-note-chat-composer {
    display: flex; align-items: flex-end; gap: 6px;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--deepBorder);
}
.mc-note-chat-composer textarea {
    flex: 1; min-width: 0; resize: none;
    max-height: 96px; field-sizing: content;
    padding: 6px 10px; border-radius: 16px;
    border: 1px solid var(--deepBorder); background-color: var(--cardBG);
    color: var(--headingColor); font-size: 13px; line-height: 1.4;
}
.mc-note-chat-composer textarea:focus { outline: none; border-color: var(--primaryHEX); }
.mc-note-chat-composer textarea::placeholder { color: var(--placeholderColor); }

.mc-note-chat-row { display: flex; flex-direction: column; align-items: flex-start; }
.mc-note-chat-row.is-admin { align-items: flex-end; }

.mc-note-chat-meta { font-size: 11px; color: var(--placeholderColor); margin: 0 6px 2px; }

.mc-note-chat-bubble {
    max-width: 85%;
    padding: 6px 10px;
    border-radius: 12px 12px 12px 2px;
    background-color: var(--cardBG);
    border: 1px solid var(--deepBorder);
    color: var(--headingColor);
    font-size: 13px; line-height: 1.4;
    white-space: pre-line; overflow-wrap: anywhere;
}
.mc-note-chat-row.is-admin .mc-note-chat-bubble {
    border-radius: 12px 12px 2px 12px;
    background-color: var(--primaryHEX);
    border-color: var(--primaryHEX);
    color: var(--lightColor);
}

/* Header carries its own close button: the popover doesn't close on an
   outside click, so a half-typed note isn't lost. Two classes to outrank
   .mc-table-action button, which the popover sits inside. */
.mc-note-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.mc-note-chat-popover .mc-note-chat-close {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px; border: none; border-radius: 4px;
    background-color: transparent; color: var(--textColor); cursor: pointer;
}
.mc-note-chat-popover .mc-note-chat-close:hover { background-color: var(--hoverBG); color: var(--headingColor); }
.mc-note-chat-popover .mc-note-chat-close .material-icons { font-size: 18px; }