.mp-task-modal-shell, .mp-modal-shell {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) minmax(300px, 360px);
    gap: 0px;
    max-height: calc(-56px + 100vh);
}

.mp-task-modal-shell > .form-grid, .mp-modal-shell > .form-grid {
    overflow: auto;
    padding-right: 10px;
}

/* ── A chat with no record renders nothing ───────────────────────────────────
   The widget already carries the only fact that decides this: its own entity id, blank until the
   record exists. It used to answer with a sentence ("Save this task first to start a
   conversation") which reads as a placeholder for a panel you came for, and as a screen of scenery
   in a form you are still filling in.

   ON THE WIDGET'S OWN MARKER, not on a mode set by the host modal. Task, project and every future
   entity modal reuse this rail, and a fourth derivation of "there is no record yet" is how the
   stale-panel defects of v1.12.390, v1.12.391 and v1.12.397 each happened.

   AND THE SHELL, because hiding a grid child does not close its track: the form would sit in
   column one with 300 empty pixels beside it. Written with :has() against the direct child so a
   nested widget elsewhere cannot collapse a shell that is not its own; more specific than
   .is-chat-collapsed, whose 49px rail is a rail that IS there. */
.mp-chat-widget[data-entity-id=""] {
    display: none;
}

.mp-task-modal-shell:has(> .mp-chat-widget[data-entity-id=""]),
.mp-modal-shell:has(> .mp-chat-widget[data-entity-id=""]) {
    grid-template-columns: minmax(0px, 1fr);
}

.mp-chat-widget {
    --mp-chat-icon: var(--mp-icon-message, var(--mp-icon-message));
    --mp-chat-outline-icon: var(--mp-icon-message-outline, var(--mp-icon-message-outline));
    --mp-send-icon: var(--mp-icon-send, var(--mp-icon-send));
}

.mp-chat-widget {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    max-height: calc(-120px + 100vh);
    overflow: visible;
    border-left: 1px solid var(--border, var(--border));
    background: linear-gradient(var(--mp-chat-field,rgba(15, 23, 42, 0.34)), var(--mp-chat-well,rgba(2, 6, 23, 0.16)));
}

.mp-chat-head {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border, var(--border));
}

.mp-chat-title, .mp-chat-head strong, .mp-chat-head .muted {
    display: none !important;
}

.mp-chat-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 8px;
    width: auto;
    min-width: 44px;
    height: 28px;
    padding: 0px 2px;
    border: 0px;
    border-radius: 9px;
    background: none;
    color: var(--mp-ink-brand,#00EA5E);
    cursor: pointer;
}

.mp-chat-head-icon::before, .mp-chat-empty-icon::before, .mp-chat-send::before {
    content: "";
    display: block;
    background: currentcolor;
}

.mp-chat-head-icon::before {
    width: 19px;
    height: 19px;
    mask: var(--mp-chat-outline-icon) center/contain no-repeat;
}

.mp-chat-head-icon::after {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    background: var(--muted);
    opacity: 0.88;
    -webkit-mask-source-type:;
    -webkit-mask-clip:;
    mask-image:;
    -webkit-mask-position-x:;
    -webkit-mask-position-y:;
    mask-repeat:;
    mask-origin:;
    mask-clip:;
    mask-border-source:;
    mask-border-slice:;
    mask-border-width:;
    mask-border-outset:;
    mask-border-repeat:;
    mask-size: contain;
    mask-composite: add;
    mask-mode: match-source;
    transition: transform 0.16s, background-color 0.16s, opacity 0.16s;
}

.mp-chat-head-icon[aria-expanded="true"]::after {
    transform: rotate(0deg);
}

.mp-chat-messages {
    flex: 1 1 0%;
    min-height: 0px;
    overflow: auto;
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    scrollbar-width: thin;
}

.mp-chat-empty-state, .mp-chat-new-task, .mp-chat-empty {
    color: var(--muted);
}

.mp-chat-empty-state {
    margin: auto;
    max-width: 220px;
    text-align: center;
    line-height:var(--mp-lh-normal,1.4);
    font-size:var(--mp-fs-sm,12px);
}

.mp-chat-empty-state strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text, var(--text));
    font-size:var(--mp-fs-lg,16px);
    line-height:var(--mp-lh-tight,1.1);
    font-weight:var(--mp-fw-black,900);
    letter-spacing:var(--mp-ls-tighter,-0.03em);
}

.mp-chat-empty-icon {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0px auto 12px;
    border-radius: 14px;
    border: 1px solid var(--mp-fill-10,rgba(255, 255, 255, 0.1));
    background: linear-gradient(var(--mp-chat-panel,rgba(15, 23, 42, 0.96)), var(--mp-chat-empty,rgba(2, 6, 23, 0.86)));
    box-shadow: var(--shadow, 0 10px 40px var(--mp-sh-35,rgba(0, 0, 0, 0.35)));
}

.mp-chat-empty-icon::before {
    position: absolute;
    inset: 15px;
    color: var(--mp-ink-brand,#00EA5E);
    mask: var(--mp-chat-icon) center/contain no-repeat;
}

.mp-chat-new-task {
    margin: auto;
    width: min(100%, 250px);
    padding: 11px;
    border: 1px dashed var(--mp-slate-24,rgba(148, 163, 184, .24));
    border-radius: var(--radius, 5px);
    background: var(--mp-fill-024,rgba(255, 255, 255, 0.024));
    text-align: center;
    font-weight:var(--mp-fw-bold,700);
}

.mp-chat-message {
    display: grid;
    grid-template-columns: 28px minmax(0px, 1fr);
    gap: 8px;
    align-items: start;
}

.mp-chat-bubble {
    position: relative;
    min-width: 0px;
    padding: 7px 9px;
    border: 1px solid var(--mp-slate-16,rgba(148, 163, 184, 0.16));
    border-radius: var(--radius, 5px);
    background: linear-gradient(var(--mp-fill-05,rgba(255, 255, 255, 0.05)), var(--mp-fill-024,rgba(255, 255, 255, 0.024)));
    box-shadow: var(--mp-fill-035,rgba(255, 255, 255, 0.035)) 0px 1px 0px inset;
}

.mp-chat-message.is-own .mp-chat-bubble {
    border-color: var(--mp-hl-20,rgba(0,234,94,.20));
    background: linear-gradient(var(--mp-hl-075,rgba(0, 234, 94, .075)), var(--mp-fill-03,rgba(255, 255, 255, 0.03)));
}

.mp-chat-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 16px;
    margin-bottom: 4px;
    color: var(--muted);
    font-size:var(--mp-fs-2xs,10px);
    line-height:var(--mp-lh-snug,1.25);
}

.mp-chat-author {
    color: var(--text, var(--text));
    font-weight:var(--mp-fw-heavy,800);
}

.mp-chat-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.mp-chat-edit,
.mp-chat-delete {
    width: 18px;
    height: 18px;
    padding: 0px;
    border: 0px;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    font-style: inherit;
    font-variant-caps: inherit;
    font-width: inherit;
    font-family: inherit;
    font-size-adjust: inherit;
    font-kerning: inherit;
    font-variant-alternates: inherit;
    font-variant-ligatures: inherit;
    font-variant-numeric: inherit;
    font-variant-east-asian: inherit;
    font-variant-position: inherit;
    font-feature-settings: inherit;
    font-optical-sizing: inherit;
    font-variation-settings: inherit;
    font-size:var(--mp-fs-xs,11px);
    font-weight:var(--mp-fw-heavy,800);
    line-height:var(--mp-lh-none,1);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}

.mp-chat-message:hover .mp-chat-edit, .mp-chat-message:focus-within .mp-chat-edit,
.mp-chat-message:hover .mp-chat-delete, .mp-chat-message:focus-within .mp-chat-delete {
    opacity: 0.75;
    pointer-events: auto;
}

.mp-chat-message.is-editing .mp-chat-edit {
    opacity: 0;
    pointer-events: none;
}

.mp-chat-edit:hover, .mp-chat-edit:focus-visible {
    outline: 0px;
    color: var(--mp-ink-brand,#00EA5E);
    background: var(--mp-hl-12,rgba(0, 234, 94, 0.12));
}

.mp-chat-delete:hover, .mp-chat-delete:focus-visible {
    outline: 0px;
    color: var(--mp-danger-ink,#fb7185);
    background: var(--mp-rose-12,rgba(251, 113, 133, .12));
}

.mp-chat-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--mp-ink-check,#e5eefb);
    font-size:var(--mp-fs-sm,12px);
    line-height:var(--mp-lh-normal,1.4);
    font-weight:var(--mp-fw-semibold,600);
}

.mp-chat-body[hidden] {
    display: none !important;
}

.mp-chat-edit-form {
    display: grid;
    gap: 6px;
}

.mp-chat-edit-input {
    width: 100%;
    min-height: 44px;
    max-height: 220px;
    overflow: auto;
    resize: none;
    padding: 6px 7px;
    border: 1px solid var(--mp-slate-22,rgba(148, 163, 184, 0.22));
    border-radius: var(--radius, 5px);
    background: var(--mp-cal-dim,rgba(15, 23, 42, 0.62));
    color: var(--text, var(--text));
    font-family: inherit;
    font-size:var(--mp-fs-sm,12px);
    line-height:var(--mp-lh-normal,1.4);
    font-weight:var(--mp-fw-semibold,600);
    outline: 0px;
    transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}

.mp-chat-edit-input:focus {
    border-color: var(--mp-hl-52,rgba(0, 234, 94, 0.52));
    background: var(--mp-chat-edit,rgba(15, 23, 42, 0.78));
    box-shadow: var(--mp-hl-08,rgba(0,234,94,.08)) 0px 0px 0px 3px;
}

.mp-chat-edit-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mp-chat-edit-hint {
    margin-right: auto;
    color: var(--muted);
    font-size:var(--mp-fs-2xs,10px);
    font-weight:var(--mp-fw-bold,700);
}

.mp-chat-edit-cancel,
.mp-chat-edit-save {
    padding: 4px 9px;
    border-radius: var(--radius, 5px);
    font-size:var(--mp-fs-2xs,10px);
    font-weight:var(--mp-fw-heavy,800);
    line-height:var(--mp-lh-snug,1.25);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.mp-chat-edit-cancel {
    border: 1px solid var(--mp-slate-24,rgba(148, 163, 184, .24));
    background: var(--mp-fill-024,rgba(255, 255, 255, 0.024));
    color: var(--muted);
}

.mp-chat-edit-cancel:hover, .mp-chat-edit-cancel:focus-visible {
    outline: 0px;
    border-color: var(--mp-slate-40,rgba(148, 163, 184, 0.4));
    color: var(--text, var(--text));
}

.mp-chat-edit-save {
    border: 1px solid var(--mp-hl-34,rgba(0, 234, 94, 0.34));
    background: var(--mp-hl-14,rgba(0,234,94,.14));
    color: var(--mp-ink-on-hl,#d1fae5);
}

.mp-chat-edit-save:hover, .mp-chat-edit-save:focus-visible {
    outline: 0px;
    border-color: var(--mp-hl-60,rgba(0, 234, 94, 0.6));
    background: var(--mp-hl-22,rgba(0, 234, 94, 0.22));
    color: var(--mp-ink-mint-2,rgb(236, 253, 245));
}

.mp-chat-link-button {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 6px;
    margin: 2px 3px 2px 0px;
    padding: 4px 7px;
    border: 1px solid var(--mp-hl-22,rgba(0, 234, 94, 0.22));
    border-radius: var(--radius, 5px);
    background: var(--mp-hl-10,rgba(0, 234, 94, 0.1));
    color: var(--mp-ink-on-hl,#d1fae5);
    vertical-align: baseline;
    font-size:var(--mp-fs-xs,11px);
    line-height:var(--mp-lh-tight,1.1);
    font-weight:var(--mp-fw-black,900);
    text-decoration: none !important;
}

.mp-chat-link-button:hover, .mp-chat-link-button:focus-visible {
    outline: 0px;
    border-color: var(--mp-hl-48,rgba(0, 234, 94, 0.48));
    background: var(--mp-hl-16,rgba(0, 234, 94, 0.16));
    color: var(--mp-ink-mint-2,rgb(236, 253, 245));
}

.mp-chat-link-icon {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    background: currentcolor;
    -webkit-mask-source-type:;
    -webkit-mask-clip:;
    mask: var(--mp-icon-external-link, var(--mp-icon-external-link)) center/contain no-repeat;
}

.mp-chat-link-label {
    display: block;
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-chat-mention {
    display: inline-block;
    color: var(--mp-ink-on-hl,#d1fae5);
    font-weight:var(--mp-fw-black,900);
    background: var(--mp-hl-11,rgba(0, 234, 94, 0.11));
    border-radius: 999px;
    padding: 0px 5px;
}

.mp-chat-composer {
    position: relative;
    padding: 10px 10px 10px;
    border-top: 1px solid var(--border, var(--border));
    background: var(--mp-chat-well,rgba(2, 6, 23, 0.16));
}

.mp-chat-hidden-input {
    display: none !important;
}

.mp-chat-editor {
    width: 100%;
    min-height: 120px;
    max-height: 220px;
    overflow: auto;
    /* 0.5.13 — identical wrapping recipe to .mp-chat-body, so the composer breaks
       exactly where the sent message will and a long unbroken token (filename, URL)
       wraps instead of pinning the line. pre-wrap also stops the composer silently
       collapsing runs of spaces that plainFromEditor() does send. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 6px 36px 45px 6px;
    border: 1px solid var(--mp-slate-22,rgba(148, 163, 184, 0.22));
    border-radius: var(--radius, 5px);
    background: var(--mp-cal-dim,rgba(15, 23, 42, 0.62));
    color: var(--text, var(--text));
    font-size:var(--mp-fs-base,13px);
    line-height:var(--mp-lh-normal,1.4);
    font-weight:var(--mp-fw-semibold,600);
    outline: 0px;
    transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}

.mp-chat-editor:focus {
    border-color: var(--mp-hl-52,rgba(0, 234, 94, 0.52));
    background: var(--mp-chat-edit,rgba(15, 23, 42, 0.78));
    box-shadow: var(--mp-hl-08,rgba(0,234,94,.08)) 0px 0px 0px 3px;
}

.mp-chat-editor.is-empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
    pointer-events: none;
}

.mp-chat-input-mention {
    display: inline-flex;
    align-items: center;
    max-width: 190px;
    gap: 5px;
    margin: 0px 2px 1px 0px;
    padding: 2px 7px 2px 3px;
    border-radius: 999px;
    background: var(--mp-hl-12,rgba(0, 234, 94, 0.12));
    color: var(--mp-ink-on-hl,#d1fae5);
    font-weight:var(--mp-fw-heavy,800);
    vertical-align: baseline;
}

.mp-chat-input-mention-text {
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-chat-emoji-toggle, .mp-chat-send {
    bottom: 17px;
    border: 1px solid var(--mp-slate-20,rgba(148, 163, 184, 0.2));
    border-radius: var(--radius, 5px);
    cursor: pointer;
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0px !important;
    background: var(--mp-chat-btn,rgba(15, 23, 42, 0.58)) !important;
    line-height: 0 !important;

}

.mp-chat-emoji-toggle {
    right: 57px;
    color: var(--muted);
    font-size:var(--mp-fs-lg,16px);
    font-weight:var(--mp-fw-heavy,800);
}

.mp-chat-send {
    right: 17px;
    overflow: hidden;
    color: transparent !important;
}

.mp-chat-send::before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    color: var(--mp-ink-brand,#00EA5E);
    mask: var(--mp-send-icon) center/contain no-repeat;
}

.mp-chat-emoji-toggle:hover, .mp-chat-emoji-toggle:focus-visible, .mp-chat-send:hover, .mp-chat-send:focus-visible {
    outline: 0px;
    color: var(--text, var(--text));
    border-color: var(--mp-hl-42,rgba(0, 234, 94, 0.42)) !important;
    background: var(--mp-hl-12,rgba(0, 234, 94, 0.12)) !important;
}

.mp-chat-mention-menu {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 144px;
    z-index: 10010;
    max-height: 188px;
    overflow: auto;
    padding: 5px;
    border: 1px solid var(--mp-fill-10,rgba(255, 255, 255, 0.1));
    border-radius: var(--radius, 5px);
    background: var(--mp-panel-98,rgba(15, 23, 42, 0.98));
    box-shadow: var(--mp-sh-45,rgba(0, 0, 0, 0.45)) 0px 18px 48px, var(--mp-fill-04,rgba(255, 255, 255, 0.04)) 0px 1px 0px inset;
    backdrop-filter: blur(18px);
}

.mp-chat-mention-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
    gap: 7px;
    padding: 4px 5px;
    border: 0px;
    border-radius: var(--radius, 5px);
    background: none;
    color: inherit;
    font-style: inherit;
    font-variant-caps: inherit;
    font-weight: inherit;
    font-width: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    font-size-adjust: inherit;
    font-kerning: inherit;
    font-variant-alternates: inherit;
    font-variant-ligatures: inherit;
    font-variant-numeric: inherit;
    font-variant-east-asian: inherit;
    font-variant-position: inherit;
    font-feature-settings: inherit;
    font-optical-sizing: inherit;
    font-variation-settings: inherit;
    text-align: left;
    cursor: pointer;
    transition: 0.12s;
}

.mp-chat-mention-option:hover, .mp-chat-mention-option:focus-visible {
    outline: 0px;
    background: var(--mp-hl-10,rgba(0, 234, 94, 0.1));
}

.mp-chat-mention-name {
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text, var(--text));
    font-size:var(--mp-fs-sm,12px);
    line-height:var(--mp-lh-tight,1.1);
    font-weight:var(--mp-fw-heavy,800);
}

.mp-chat-emoji-menu {
    position: absolute;
    right: 72px;
    bottom: 70px;
    z-index: 10011;
    display: grid;
    grid-template-columns: repeat(8, 28px);
    gap: 3px;
    padding: 6px;
    border: 1px solid var(--mp-fill-10,rgba(255, 255, 255, 0.1));
    border-radius: var(--radius, 5px);
    background: var(--mp-panel-98,rgba(15, 23, 42, 0.98));
    box-shadow: var(--mp-sh-45,rgba(0, 0, 0, 0.45)) 0px 18px 48px, var(--mp-fill-04,rgba(255, 255, 255, 0.04)) 0px 1px 0px inset;
    backdrop-filter: blur(18px);
}

.mp-chat-emoji-menu[hidden] {
    display: none !important;
}

.mp-chat-emoji-option {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0px;
    border: 0px;
    border-radius: var(--radius, 5px);
    background: none;
    font-size:var(--mp-fs-lg,16px);
    line-height:var(--mp-lh-none,1);
    cursor: pointer;
}

.mp-chat-emoji-option:hover, .mp-chat-emoji-option:focus-visible {
    outline: 0px;
    background: var(--border);
}

.mp-task-modal-shell.is-chat-collapsed, .mp-modal-shell.is-chat-collapsed {
    grid-template-columns: minmax(0px, 1fr) 49px;
}

.mp-chat-widget.is-collapsed .mp-chat-messages, .mp-chat-widget.is-collapsed .mp-chat-composer {
    display: none !important;
}

@media (max-width: 1000px) {
    .mp-task-modal-shell, .mp-modal-shell {
        display: block;
        max-height: none;
    }

    .mp-task-modal-shell > .form-grid, .mp-modal-shell > .form-grid {
        padding-right: 0px;
    }

    .mp-chat-widget {
        min-height: 360px;
        max-height: 520px;
        border-left: 0px;
        border-top: 1px solid var(--border, var(--border));
    }
}

.mp-chat-head-icon[aria-expanded="false"]::after {
    transform: rotate(180deg);
}

.mp-chat-head {
    min-height: 40px;
    padding: 8px 12px;
    align-items: center;
}

.mp-chat-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 9px;
    width: auto;
    min-width: 56px;
    height: 28px;
    padding: 0px;
    border: 0px;
    border-radius: 10px;
    background: none;
    color: var(--mp-ink-brand,#00EA5E);
    cursor: pointer;
}

.mp-chat-head-icon::before {
    width: 20px;
    height: 20px;
    mask: var(--mp-chat-outline-icon) center/contain no-repeat;
}

.mp-chat-head-icon::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: var(--muted);
    opacity: 0.9;
    -webkit-mask-source-type:;
    -webkit-mask-clip:;
    mask-image:;
    -webkit-mask-position-x:;
    -webkit-mask-position-y:;
    mask-repeat:;
    mask-origin:;
    mask-clip:;
    mask-border-source:;
    mask-border-slice:;
    mask-border-width:;
    mask-border-outset:;
    mask-border-repeat:;
    mask-size: contain;
    mask-composite: add;
    mask-mode: match-source;
}

.mp-task-modal-shell.is-chat-collapsed, .mp-modal-shell.is-chat-collapsed {
    grid-template-columns: minmax(0px, 1fr) 49px;
}

.mp-chat-widget.is-collapsed .mp-chat-head {
    min-height: 100%;
    padding: 0px;
    justify-content: center;
    align-items: center;
    border-bottom: 0px;
}

.mp-chat-widget.is-collapsed .mp-chat-head-icon {
    position: relative;
    flex-direction: column;
    gap: 10px;
    width: 44px;
    min-width: 44px;
    height: 86px;
    padding: 0px;
    border-radius: 14px;
    background: var(--mp-chat-field,rgba(15, 23, 42, 0.34));
}

.mp-chat-widget.is-collapsed .mp-chat-head-icon::before {
    width: 26px;
    height: 26px;
}

.mp-chat-widget.is-collapsed .mp-chat-head-icon::after {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--green, var(--mp-ink-brand,#00EA5E));
    box-shadow: var(--mp-fill-14,rgba(255, 255, 255, 0.14)) 0px 0px 0px 1px inset, var(--mp-hl-18,rgba(0, 234, 94, 0.18)) 0px 8px 20px;
    -webkit-mask-source-type: auto;
    -webkit-mask: none;
    mask: none;
    mask-size: auto;
    mask-composite: add;
    mask-mode: match-source;
    content: "";
}

.mp-chat-widget.is-collapsed .mp-chat-head-icon::after {
    background: var(--mp-icon-chevron-right) center/15px 15px no-repeat, var(--green, var(--mp-ink-brand,#00EA5E));
}

.mp-chat-widget.is-collapsed .mp-chat-messages, .mp-chat-widget.is-collapsed .mp-chat-composer, .mp-chat-widget.is-collapsed .mp-chat-empty-state, .mp-chat-widget.is-collapsed .mp-chat-new-task, .mp-chat-widget.is-collapsed .mp-chat-empty {
    display: none;
}

.mp-chat-widget:not(.is-collapsed) .mp-chat-head-icon::after {
    width: 14px;
    height: 14px;
    background: var(--muted);
    opacity: 0.9;
    -webkit-mask-source-type:;
    -webkit-mask-clip:;
    mask-image:;
    -webkit-mask-position-x:;
    -webkit-mask-position-y:;
    mask-repeat:;
    mask-origin:;
    mask-clip:;
    mask-border-source:;
    mask-border-slice:;
    mask-border-width:;
    mask-border-outset:;
    mask-border-repeat:;
    mask-size: contain;
    mask-composite: add;
    mask-mode: match-source;
    transform: none;
}

.mp-chat-widget {
    position: relative;
}

.mp-chat-widget:not(.is-collapsed) .mp-chat-head {
    position: absolute;
    right: 30px;
    top: 50%;
    z-index: 20;
    width: 0px;
    height: 0px;
    min-height: 0px;
    padding: 0px;
    border: 0px;
    overflow: visible;
}

.mp-chat-widget:not(.is-collapsed) .mp-chat-head-icon::before {
    display: none;
}

.mp-chat-widget:not(.is-collapsed) .mp-chat-head-icon::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: currentcolor;
    opacity: 1;
    transform: none;
    -webkit-mask-source-type:;
    -webkit-mask-clip:;
    mask-image:;
    -webkit-mask-position-x:;
    -webkit-mask-position-y:;
    mask-repeat:;
    mask-origin:;
    mask-clip:;
    mask-border-source:;
    mask-border-slice:;
    mask-border-width:;
    mask-border-outset:;
    mask-border-repeat:;
    mask-size: contain;
    mask-composite: add;
    mask-mode: match-source;
}

.mp-chat-widget:not(.is-collapsed) .mp-chat-messages {
    padding-top: 0px;
}

.mp-task-modal-shell.is-chat-collapsed, .mp-modal-shell.is-chat-collapsed {
    grid-template-columns: minmax(0px, 1fr) 49px;
}

.mp-chat-widget.is-collapsed .mp-chat-head {
    min-height: 100%;
    padding: 0px;
    justify-content: center;
    align-items: center;
    border-bottom: 0px;
}

.mp-chat-widget.is-collapsed .mp-chat-head-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 44px;
    min-width: 44px;
    height: 86px;
    padding: 0px;
    border: 0px;
    border-radius: 14px;
    background: var(--mp-chat-badge,rgba(15, 23, 42, 0.28));
    color: var(--mp-ink-brand,#00EA5E);
    box-shadow: none;
}

.mp-chat-widget.is-collapsed .mp-chat-head-icon::before {
    display: block;
    width: 26px;
    height: 26px;
    background: currentcolor;
    mask: var(--mp-chat-outline-icon) center/contain no-repeat;
}

.mp-chat-widget.is-collapsed .mp-chat-head-icon::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--mp-icon-chevron-right) center/15px 15px no-repeat, var(--green, var(--mp-ink-brand,#00EA5E));
    box-shadow: var(--mp-fill-14,rgba(255, 255, 255, 0.14)) 0px 0px 0px 1px inset, var(--mp-hl-18,rgba(0, 234, 94, 0.18)) 0px 8px 20px;
    opacity: 1;
    -webkit-mask-source-type: auto;
    -webkit-mask: none;
    mask: none;
    mask-size: auto;
    mask-composite: add;
    mask-mode: match-source;
    transform: none;
}

.mp-chat-widget.is-collapsed .mp-chat-messages, .mp-chat-widget.is-collapsed .mp-chat-composer, .mp-chat-widget.is-collapsed .mp-chat-empty-state, .mp-chat-widget.is-collapsed .mp-chat-new-task, .mp-chat-widget.is-collapsed .mp-chat-empty {
    display: none;
}

.mp-chat-widget {
    position: relative;
}

.mp-chat-widget:not(.is-collapsed) .mp-chat-head-icon::after {
    content: "";
    display: block;
    width: 12px;
    height: 16px;
    border-radius: 3px;
    background: var(--mp-icon-chevron-right) center/15px 15px no-repeat, linear-gradient(135deg, #00ea5e, #38bdf8);
    box-shadow: var(--mp-fill-14,rgba(255, 255, 255, 0.14)) 0px 0px 0px 1px inset, var(--mp-hl-18,rgba(0, 234, 94, 0.18)) 0px 8px 20px;
    opacity: 1;
    -webkit-mask-source-type: auto;
    -webkit-mask: none;
    mask: none;
    mask-size: auto;
    mask-composite: add;
    mask-mode: match-source;
    transform: none;
}

.mp-chat-widget:not(.is-collapsed) .mp-chat-head-icon:hover, .mp-chat-widget:not(.is-collapsed) .mp-chat-head-icon:focus-visible {
    outline: 0px;
}

.mp-chat-widget:not(.is-collapsed) .mp-chat-head-icon:hover::after, .mp-chat-widget:not(.is-collapsed) .mp-chat-head-icon:focus-visible::after {
    filter: brightness(1.06);
}

.mp-task-modal-shell.is-chat-collapsed, .mp-modal-shell.is-chat-collapsed {
    grid-template-columns: minmax(0px, 1fr) 36px;
}

.mp-chat-widget.is-collapsed .mp-chat-head {
    display: flex;
    min-height: 100%;
    padding: 0px;
    justify-content: center;
    align-items: center;
    border-bottom: 0px;
}

.mp-chat-widget.is-collapsed .mp-chat-head-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 44px;
    min-width: 44px;
    height: 86px;
    padding: 0px;
    border: 0px;
    border-radius: 14px;
    background: var(--mp-chat-badge,rgba(15, 23, 42, 0.28));
    color: var(--mp-ink-brand,#00EA5E);
    box-shadow: none;
    cursor: pointer;
}

.mp-chat-widget.is-collapsed .mp-chat-head-icon::before {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    background: var(--mp-chat-glyph, linear-gradient(135deg, rgb(0, 234, 94), rgb(56, 189, 248)));
    mask: var(--mp-chat-outline-icon) center/contain no-repeat;
}

.mp-chat-widget.is-collapsed .mp-chat-head-icon::after {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: var(--mp-icon-chevron-left) center/15px 15px no-repeat, linear-gradient(135deg, #00ea5e, #38bdf8);
    box-shadow: var(--mp-fill-14,rgba(255, 255, 255, 0.14)) 0px 0px 0px 1px inset, var(--mp-hl-18,rgba(0, 234, 94, 0.18)) 0px 8px 20px;
    opacity: 1;
    -webkit-mask-source-type: auto;
    -webkit-mask: none;
    mask: none;
    mask-size: auto;
    mask-composite: add;
    mask-mode: match-source;
    transform: none;
}

.mp-chat-widget.is-collapsed .mp-chat-messages, .mp-chat-widget.is-collapsed .mp-chat-composer, .mp-chat-widget.is-collapsed .mp-chat-empty-state, .mp-chat-widget.is-collapsed .mp-chat-new-task, .mp-chat-widget.is-collapsed .mp-chat-empty {
    display: none;
}

.mp-chat-loading {
    position: absolute;
    inset: 0px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(var(--mp-chat-panel,rgba(15, 23, 42, 0.96)), var(--mp-menu-lo,rgba(2,6,23,.92)));
    backdrop-filter: blur(8px);
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.18s;
}

.mp-chat-loading.is-hiding, .mp-chat-loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.mp-chat-loading .brand-mark {
    --mp-brand-ring-size: 32px;
    position: relative;
    width: var(--mp-brand-ring-size);
    height: var(--mp-brand-ring-size);
    flex: 0 0 var(--mp-brand-ring-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    filter: drop-shadow(var(--mp-hl-25,rgba(0,234,94,.25)) 0px 0px 12px);
}

.mp-chat-widget.is-collapsed .mp-chat-loading {
    display: none;
}

.mp-chat-loading {
    position: absolute;
    inset: 0px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-1);
    opacity: 1;
    transition: opacity 0.18s, visibility 0.18s;
}

.mp-chat-loading.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.mp-chat-loading .brand-mark {
    --mp-brand-ring-size: 36px;
    --mp-brand-ring-stroke: 4px;
    position: relative;
    width: var(--mp-brand-ring-size);
    height: var(--mp-brand-ring-size);
    flex: 0 0 var(--mp-brand-ring-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    filter: drop-shadow(var(--mp-hl-25,rgba(0,234,94,.25)) 0px 0px 12px);
    animation: 1.1s linear infinite mp-chat-ring-spin;
}

.mp-chat-loading .brand-mark::before {
    content: "";
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(rgba(0, 234, 94, 0.05) 0deg, rgba(0, 234, 94, 0.18) 80deg, rgb(0, 234, 94) 138deg, rgba(56, 189, 248, 0.92) 178deg, rgba(0, 234, 94, 0.12) 235deg, rgba(0, 234, 94, 0.05) 360deg);
    -webkit-mask-source-type:;
    -webkit-mask-clip:;
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--mp-brand-ring-stroke) - 1px), #000 calc(100% - var(--mp-brand-ring-stroke)));
}

@keyframes mp-chat-ring-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.mp-chat-attach-toggle {
    right: 97px;
    bottom: 17px;
    border: 1px solid var(--mp-slate-20,rgba(148, 163, 184, 0.2));
    border-radius: var(--radius, 5px);
    cursor: pointer;
    color: var(--muted);
    font-size: 0px;
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0px !important;
    background: var(--mp-chat-btn,rgba(15, 23, 42, 0.58)) !important;
    line-height:var(--mp-lh-none,1) !important;

}

.mp-chat-attach-toggle::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentcolor;
    -webkit-mask-source-type:;
    -webkit-mask-clip:;
    mask: var(--mp-icon-paperclip, var(--mp-icon-paperclip)) center/contain no-repeat;
}

.mp-chat-attach-toggle:hover, .mp-chat-attach-toggle:focus-visible {
    outline: 0px;
    color: var(--text, var(--text));
    border-color: var(--mp-hl-42,rgba(0, 234, 94, 0.42)) !important;
    background: var(--mp-hl-12,rgba(0, 234, 94, 0.12)) !important;
}

/* Visually hidden, and it has to say so with !important. The bare class scores (0,1,0) and
   loses to the theme's `input[type="file"] {min-height:40px;padding:7px 10px}` and
   `input:disabled {opacity:.55;background:...}`, both (0,1,1). Anything that flips the
   disabled flag then paints a 22x40 grey sliver in the composer. Matches the pattern used
   by .remember-toggle input and .mp-tags-input in forms-controls. */
.mp-chat-attachment-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    padding: 0px !important;
    border: 0px !important;
    background: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.mp-chat-attachment-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.mp-chat-attachment-tray[hidden] {
    display: none !important;
}

.mp-chat-pending-attachment {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 999px;
    border: 1px solid var(--mp-hl-18,rgba(0, 234, 94, 0.18));
    background: var(--mp-hl-08,rgba(0,234,94,.08));
    color: var(--mp-ink-on-hl,#d1fae5);
    font-size:var(--mp-fs-xs,11px);
    font-weight:var(--mp-fw-heavy,800);
}

.mp-chat-pending-icon, .mp-chat-attachment-thumb {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: currentcolor;
    opacity: 0.9;
    -webkit-mask-source-type:;
    -webkit-mask-clip:;
    mask: var(--mp-icon-image, var(--mp-icon-image)) center/contain no-repeat;
}

.mp-chat-pending-attachment > span:nth-child(2) {
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-chat-pending-attachment button {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 0px;
    border-radius: 50%;
    padding: 0px;
    background: var(--border);
    color: inherit;
    font-size:var(--mp-fs-sm,12px);
    font-weight:var(--mp-fw-black,900);
    line-height:var(--mp-lh-none,1);
    cursor: pointer;
}

.mp-chat-attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 7px;
}

.mp-chat-attachment-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    gap: 7px;
    padding: 5px 7px;
    border: 1px solid var(--mp-slate-18,rgba(148, 163, 184, 0.18));
    border-radius: var(--radius, 5px);
    background: var(--mp-login-right-lo,rgba(15,23,42,.46));
    color: var(--mp-ink-check,#e5eefb);
    font-style: inherit;
    font-variant-caps: inherit;
    font-weight: inherit;
    font-width: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    font-size-adjust: inherit;
    font-kerning: inherit;
    font-variant-alternates: inherit;
    font-variant-ligatures: inherit;
    font-variant-numeric: inherit;
    font-variant-east-asian: inherit;
    font-variant-position: inherit;
    font-variant-emoji: inherit;
    font-feature-settings: inherit;
    font-optical-sizing: inherit;
    font-variation-settings: inherit;
    text-align: left;
    cursor: pointer;
}

.mp-chat-attachment-chip:hover, .mp-chat-attachment-chip:focus-visible {
    outline: 0px;
    border-color: var(--mp-hl-40,rgba(0, 234, 94, 0.4));
    background: var(--mp-hl-10,rgba(0, 234, 94, 0.1));
}

.mp-chat-attachment-text {
    display: grid;
    min-width: 0px;
    gap: 1px;
}

.mp-chat-attachment-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:var(--mp-fs-xs,11px);
    line-height:var(--mp-lh-tight,1.1);
}

.mp-chat-attachment-text small {
    color: var(--muted);
    font-size:var(--mp-fs-2xs,10px);
    line-height:var(--mp-lh-tight,1.1);
}

.mp-chat-input-mention-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--mp-av, var(--mp-ink-dim,#64748b));
    color: #04110a;
    font-size:var(--mp-fs-2xs,10px);
    font-weight:var(--mp-fw-black,900);
    line-height:var(--mp-lh-none,1);
    text-transform: uppercase;
}

.mp-chat-reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.mp-chat-reactions:has(.mp-chat-reaction), .mp-chat-reactions:has(.mp-chat-react-strip:not([hidden])) {
    margin-top: 7px;
}

.mp-chat-react-toggle {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0px;
    border: 0px;
    border-radius: 50%;
    background: var(--mp-chat-toggle,rgba(2, 6, 23, 0.55));
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}

.mp-chat-react-toggle svg, .mp-chat-react-toggle img {
    width: 13px;
    height: 13px;
}

.mp-chat-message:hover .mp-chat-react-toggle, .mp-chat-message:focus-within .mp-chat-react-toggle {
    opacity: 1;
    pointer-events: auto;
}

.mp-chat-bubble:has(.mp-chat-react-strip:not([hidden])) .mp-chat-react-toggle {
    opacity: 0;
    pointer-events: none;
}

/* The correction composer owns the bubble while it is open. The reaction picker is
   suppressed there: focusing the textarea trips :focus-within on the message, which
   would otherwise reveal the smiley right next to the Save/Cancel row. Declared after
   the hover/focus rule so equal specificity resolves in its favour. */
.mp-chat-message.is-editing .mp-chat-react-toggle {
    opacity: 0;
    pointer-events: none;
}

.mp-chat-react-toggle:hover, .mp-chat-react-toggle:focus-visible {
    outline: 0px;
    color: var(--mp-ink-on-hl,#d1fae5);
    background: var(--mp-hl-18,rgba(0, 234, 94, 0.18));
}

.mp-chat-reaction-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-right: 22px;
}

.mp-chat-reaction-list:empty {
    display: none;
}

.mp-chat-reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border: 1px solid var(--mp-slate-20,rgba(148, 163, 184, 0.2));
    border-radius: 999px;
    background: var(--mp-login-right-lo,rgba(15,23,42,.46));
    color: var(--mp-ink-check,#e5eefb);
    font-style: inherit;
    font-variant-caps: inherit;
    font-weight: inherit;
    font-width: inherit;
    font-size: inherit;
    font-family: inherit;
    font-size-adjust: inherit;
    font-kerning: inherit;
    font-variant-alternates: inherit;
    font-variant-ligatures: inherit;
    font-variant-numeric: inherit;
    font-variant-east-asian: inherit;
    font-variant-position: inherit;
    font-variant-emoji: inherit;
    font-feature-settings: inherit;
    font-optical-sizing: inherit;
    font-variation-settings: inherit;
    line-height:var(--mp-lh-none,1);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.mp-chat-reaction:hover, .mp-chat-reaction:focus-visible {
    outline: 0px;
    border-color: var(--mp-hl-40,rgba(0, 234, 94, 0.4));
    background: var(--mp-hl-10,rgba(0, 234, 94, 0.1));
}

.mp-chat-reaction.is-mine {
    border-color: var(--mp-hl-55,rgba(0, 234, 94, 0.55));
    background: var(--mp-hl-16,rgba(0, 234, 94, 0.16));
}

.mp-chat-reaction-emoji {
    font-size:var(--mp-fs-sm,12px);
    line-height:var(--mp-lh-none,1);
}

.mp-chat-reaction-count {
    color: var(--muted);
    font-size:var(--mp-fs-2xs,10px);
    font-weight:var(--mp-fw-heavy,800);
    line-height:var(--mp-lh-none,1);
}

.mp-chat-reaction.is-mine .mp-chat-reaction-count {
    color: var(--mp-ink-on-hl,#d1fae5);
}

.mp-chat-react-strip {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 4px;
    padding: 4px;
    border: 1px solid var(--mp-fill-10,rgba(255, 255, 255, 0.1));
    border-radius: var(--radius, 5px);
    background: var(--mp-chat-panel,rgba(15, 23, 42, 0.96));
    box-shadow: var(--mp-sh-35,rgba(0, 0, 0, 0.35)) 0px 10px 28px, var(--mp-fill-04,rgba(255, 255, 255, 0.04)) 0px 1px 0px inset;
}

.mp-chat-react-strip[hidden] {
    display: none;
}

.mp-chat-react-option {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0px;
    border: 0px;
    border-radius: var(--radius, 5px);
    background: none;
    font-size:var(--mp-fs-lg,16px);
    line-height:var(--mp-lh-none,1);
    cursor: pointer;
}

.mp-chat-react-option:hover, .mp-chat-react-option:focus-visible {
    outline: 0px;
    background: var(--border);
}

/* Collapsed control: no plate.
   The rail used to draw a translucent rounded panel behind the speech bubble and the
   chevron. Both marks carry their own shape - the bubble is a mask, the chevron is a
   brand squircle - so the plate only added a grey rectangle that read as unfinished on
   a light board. Applies to BOTH schemes: it was never doing work in either. */
.mp-chat-widget.is-collapsed{
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}
.mp-chat-widget.is-collapsed .mp-chat-head-icon,
.mp-chat-widget.is-collapsed .mp-chat-head-icon:hover,
.mp-chat-widget.is-collapsed .mp-chat-head-icon:focus-visible{
    background: none;
    border: 0;
    box-shadow: none;
}