/* Mgroup chat widget. Self-contained: no theme dependency. */
.mgchat {
    --mgchat-navy: #1F2544;
    --mgchat-cyan: #40D0FF;
    --mgchat-indigo: #5A58E2;
    --mgchat-online: #53D700;
    --mgchat-bot-bubble: #F1F3F8;
    --mgchat-line: rgba(31, 37, 68, 0.12);
    --mgchat-radius: 16px;
    position: fixed;
    bottom: 24px;
    z-index: 99990;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.45;
    color: var(--mgchat-navy);
}

.mgchat--right { right: 24px; }
.mgchat--left { left: 24px; }

/* ---------- launcher ---------- */

.mgchat-launcher {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mgchat-navy) 55%, #223151);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(31, 37, 68, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mgchat-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(90, 88, 226, 0.45);
}

.mgchat-launcher svg { width: 26px; height: 26px; }

.mgchat-launcher img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.mgchat-launcher-mascot { filter: brightness(0) invert(1); }

.mgchat-launcher[hidden] { display: none; }

.mgchat-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mgchat-cyan);
    border: 2px solid #fff;
    animation: mgchat-pulse 1.6s ease infinite;
    z-index: 2;
}

@keyframes mgchat-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

/* New-message alert: the launcher shakes like a bell in ~4s bursts, plus a
   cyan halo ripple, so a closed chat clearly signals something arrived. */
.mgchat-launcher--alert {
    animation: mgchat-bell 4s ease-in-out infinite;
    box-shadow: 0 6px 24px rgba(31, 37, 68, 0.35), 0 0 0 0 rgba(64, 208, 255, 0.5);
}

.mgchat-launcher--alert::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: mgchat-ripple 2s ease-out infinite;
}

@keyframes mgchat-bell {
    0%, 40%, 100% { transform: rotate(0); }
    3% { transform: rotate(-16deg); }
    6% { transform: rotate(14deg); }
    9% { transform: rotate(-12deg); }
    12% { transform: rotate(10deg); }
    15% { transform: rotate(-7deg); }
    18% { transform: rotate(4deg); }
    21% { transform: rotate(0); }
}

@keyframes mgchat-ripple {
    0% { box-shadow: 0 0 0 0 rgba(64, 208, 255, 0.45); }
    100% { box-shadow: 0 0 0 16px rgba(64, 208, 255, 0); }
}

/* ---------- idle nudge ---------- */

/* Small "write to us" prompt above the launcher; whole card opens the chat. */
.mgchat-nudge {
    position: absolute;
    bottom: 72px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: max-content;
    max-width: min(280px, calc(100vw - 48px));
    padding: 12px 12px 12px 16px;
    background: #fff;
    border: 1px solid var(--mgchat-line);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(31, 37, 68, 0.22);
    cursor: pointer;
    animation: mgchat-nudge-pop 0.25s ease;
}

.mgchat--right .mgchat-nudge { right: 0; }
.mgchat--left .mgchat-nudge { left: 0; }

/* Speech-bubble tail pointing at the launcher. */
.mgchat-nudge::after {
    content: "";
    position: absolute;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid var(--mgchat-line);
    border-bottom: 1px solid var(--mgchat-line);
    border-radius: 0 0 3px 0;
    transform: rotate(45deg);
}

.mgchat--right .mgchat-nudge::after { right: 21px; }
.mgchat--left .mgchat-nudge::after { left: 21px; }

.mgchat-nudge-text { font-size: 14px; line-height: 1.4; }

.mgchat-nudge-close {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(31, 37, 68, 0.4);
    cursor: pointer;
}

.mgchat-nudge-close:hover { color: var(--mgchat-navy); }
.mgchat-nudge-close svg { display: block; width: 14px; height: 14px; }

/* Softer cousin of the bell alert: brief low-amplitude wiggles every ~5s. */
.mgchat-launcher--nudge { animation: mgchat-nudge-wiggle 5s ease-in-out infinite; }

@keyframes mgchat-nudge-wiggle {
    0%, 20%, 100% { transform: rotate(0); }
    3% { transform: rotate(-7deg); }
    6% { transform: rotate(6deg); }
    9% { transform: rotate(-4deg); }
    12% { transform: rotate(3deg); }
    15% { transform: rotate(0); }
}

@keyframes mgchat-nudge-pop {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ---------- panel ---------- */

.mgchat-panel {
    position: absolute;
    bottom: 72px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 600px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--mgchat-radius);
    box-shadow: 0 16px 48px rgba(31, 37, 68, 0.28);
    overflow: hidden;
}

.mgchat--right .mgchat-panel { right: 0; }
.mgchat--left .mgchat-panel { left: 0; }
.mgchat-panel[hidden] { display: none; }

/* ---------- header ---------- */

.mgchat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(120deg, var(--mgchat-navy) 65%, #2A3160);
    color: #fff;
}

.mgchat-header .mgchat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
}

.mgchat-header-info { flex: 1; min-width: 0; }

.mgchat-name { font-weight: 600; font-size: 15px; }

.mgchat-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    opacity: 0.85;
}

.mgchat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mgchat-online);
    box-shadow: 0 0 6px rgba(83, 215, 0, 0.8);
}

.mgchat-close {
    display: flex;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    opacity: 0.75;
}

.mgchat-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.mgchat-close svg { width: 18px; height: 18px; }

/* ---------- messages ---------- */

.mgchat-messages {
    flex: 1;
    overflow-y: auto;
    /* iOS: momentum scroll + no rubber-band chaining to the page behind. */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
}

.mgchat-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
}

.mgchat-row--user { justify-content: flex-end; }

.mgchat-row .mgchat-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mgchat-bot-bubble);
    object-fit: contain;
    padding: 2px;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.mgchat-bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}

.mgchat-row--user .mgchat-bubble-wrap { align-items: flex-end; }

.mgchat-bubble {
    position: relative;
    max-width: 100%;
    padding: 10px 14px;
    border-radius: var(--mgchat-radius);
    word-wrap: break-word;
}

.mgchat-time {
    margin-top: 3px;
    padding: 0 6px;
    font-size: 10px;
    line-height: 1;
    color: rgba(31, 37, 68, 0.42);
}

/* A reaction chip hangs below the bubble corner — push the time clear of it. */
.mgchat-bubble-wrap--reacted .mgchat-time {
    margin-top: 14px;
}

/* Slack formatting inside bot/agent bubbles */
.mgchat-bubble a {
    color: var(--mgchat-indigo);
    text-decoration: underline;
    word-break: break-all;
}

.mgchat-bubble a:hover { color: var(--mgchat-cyan); }

.mgchat-row--user .mgchat-bubble a { color: var(--mgchat-cyan); }

.mgchat-bubble code {
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(31, 37, 68, 0.08);
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Slack reactions from the team, pinned to the bubble corner */
.mgchat-reacts {
    position: absolute;
    bottom: -10px;
    right: 8px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--mgchat-line);
    box-shadow: 0 2px 8px rgba(31, 37, 68, 0.15);
    font-size: 12px;
    line-height: 1.4;
    animation: mgchat-pop 0.18s ease;
}

.mgchat-row--bot .mgchat-bubble,
.mgchat-row--agent .mgchat-bubble {
    background: var(--mgchat-bot-bubble);
    border-bottom-left-radius: 4px;
}

/* live replies from the team get a subtle indigo edge */
.mgchat-row--agent .mgchat-bubble {
    box-shadow: inset 2px 0 0 var(--mgchat-indigo);
}

.mgchat-row--user .mgchat-bubble {
    background: var(--mgchat-navy);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.mgchat-bubble--new { animation: mgchat-pop 0.18s ease; }

@keyframes mgchat-pop {
    from { transform: translateY(6px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* typing dots */

.mgchat-typing { display: flex; gap: 4px; padding: 14px; }

.mgchat-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(31, 37, 68, 0.4);
    animation: mgchat-blink 1s infinite;
}

.mgchat-typing i:nth-child(2) { animation-delay: 0.15s; }
.mgchat-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes mgchat-blink {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* ---------- chips ---------- */

.mgchat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 32px;
}

.mgchat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--mgchat-line);
    border-radius: 999px;
    background: #fff;
    color: var(--mgchat-navy);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.mgchat-chip:hover {
    border-color: var(--mgchat-indigo);
    color: var(--mgchat-indigo);
    box-shadow: 0 2px 10px rgba(90, 88, 226, 0.18);
}

.mgchat-chip svg { width: 17px; height: 17px; color: var(--mgchat-indigo); }

.mgchat-chip--link {
    border-color: var(--mgchat-indigo);
    color: var(--mgchat-indigo);
    font-weight: 500;
}

/* ---------- input ---------- */

.mgchat-input {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--mgchat-line);
    background: #fff;
}

.mgchat-input input {
    flex: 1;
    padding: 11px 16px;
    border: 1px solid var(--mgchat-line);
    border-radius: 999px;
    font-size: 14px;
    font-family: inherit;
    color: var(--mgchat-navy);
    background: #fff;
    outline: none;
}

.mgchat-input input:focus { border-color: var(--mgchat-indigo); }

.mgchat-input button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mgchat-cyan), var(--mgchat-indigo));
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mgchat-input button:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(64, 208, 255, 0.4);
}

.mgchat-input button svg { width: 18px; height: 18px; }

/* ---------- emoji picker ---------- */

/* The smiley toggle: plain glyph button, not the gradient send pill. */
.mgchat-input .mgchat-emoji {
    width: 34px;
    height: 34px;
    background: none;
    color: rgba(31, 37, 68, 0.45);
    box-shadow: none;
}

.mgchat-input .mgchat-emoji:hover {
    transform: none;
    box-shadow: none;
    color: var(--mgchat-indigo);
}

.mgchat-input .mgchat-emoji svg { width: 22px; height: 22px; }

.mgchat-emoji-pop {
    position: absolute;
    bottom: 70px;
    left: 12px;
    right: 12px;
    z-index: 5;
    max-height: 216px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--mgchat-line);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(31, 37, 68, 0.22);
    animation: mgchat-pop 0.18s ease;
}

.mgchat-emoji-pop[hidden] { display: none; }

.mgchat-emoji-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}

/* Frequently used: same grid, separated by a hairline. */
.mgchat-emoji-row--freq {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--mgchat-line);
}

.mgchat-emoji-pop button {
    padding: 4px 0;
    border: 0;
    border-radius: 8px;
    background: none;
    font-size: 21px;
    line-height: 1.3;
    cursor: pointer;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.mgchat-emoji-pop button:hover { background: var(--mgchat-bot-bubble); }

/* ---------- mobile ---------- */

@media (max-width: 640px) {
    .mgchat--right, .mgchat--left { right: 16px; left: auto; bottom: 16px; }

    .mgchat-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
        bottom: 0;
    }

    /* iOS Safari auto-zooms the page when focusing inputs below 16px. */
    .mgchat-input input { font-size: 16px; }

    /* Keep the input above the iPhone home indicator. */
    .mgchat-input { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

    .mgchat-emoji-pop { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .mgchat-launcher, .mgchat-bubble--new, .mgchat-input button,
    .mgchat-launcher--alert, .mgchat-launcher--alert::after, .mgchat-badge,
    .mgchat-launcher--nudge, .mgchat-nudge {
        transition: none;
        animation: none;
    }
    .mgchat-typing i { animation: none; opacity: 0.6; }
}