/*
 * Miorre Live Chat: widget styles.
 * Everything lives under .moh and resets the form controls so any theme (even one with aggressive button/input rules) renders it the same.
 */
.moh {
    --moh-primary: #7c3aed;
    --moh-secondary: #8b5cf6;
    --moh-htext: #ffffff;
    --moh-r-panel: 20px;
    --moh-r-bubble: 16px;
    --moh-btn: 52px;
    --moh-x: 22px;
    --moh-y: 22px;
    --moh-z: 99990;
    --moh-bg: #111827;
    --moh-bg2: #0b1222;
    --moh-line: #243247;
    --moh-tx: #e2e8f0;
    --moh-mut: #94a3b8;
    --moh-me: var(--moh-primary);
    --moh-you: #1e293b;
    position: fixed;
    bottom: var(--moh-y);
    z-index: var(--moh-z);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}
.moh--right { right: var(--moh-x); }
.moh--left { left: var(--moh-x); }
.moh--font-system { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.moh--font-inherit { font-family: inherit; }
.moh[data-mode="light"] {
    --moh-bg: #ffffff;
    --moh-bg2: #f1f5f9;
    --moh-line: #dbe3ee;
    --moh-tx: #0f172a;
    --moh-mut: #64748b;
    --moh-you: #e8edf5;
}
.moh[hidden], .moh [hidden] { display: none !important; }
.moh, .moh *, .moh *::before, .moh *::after { box-sizing: border-box; }

/* reset: themes love to restyle buttons and inputs */
.moh button, .moh input, .moh textarea {
    font: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; margin: 0;
    -webkit-appearance: none; appearance: none; box-shadow: none; min-height: 0; line-height: 1.5;
}
.moh button { cursor: pointer; }

/* launcher */
.moh__btn {
    position: relative; display: inline-flex; align-items: center; gap: 10px; height: var(--moh-btn); padding: 0 20px 0 14px;
    border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--moh-secondary), var(--moh-primary)); color: var(--moh-htext);
    font-size: 15px; font-weight: 700; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); transition: transform .15s;
}
.moh__btn:hover { transform: translateY(-2px); }
.moh__ico { display: inline-flex; }
.moh__dot {
    position: absolute; top: -4px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
    background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; border: 2px solid #fff;
}
.moh--round .moh__btn { width: var(--moh-btn); padding: 0; justify-content: center; }
.moh--round .moh__lbl, .moh--nolabel .moh__lbl { display: none; }
.moh--nolabel:not(.moh--round) .moh__btn { padding: 0 14px; }

.moh__hint {
    position: absolute; bottom: calc(var(--moh-btn) + 10px); white-space: nowrap; padding: 7px 13px; border-radius: 14px;
    background: var(--moh-bg); color: var(--moh-mut); border: 1px solid var(--moh-line); font-size: 12px; font-style: italic;
    box-shadow: 0 10px 24px rgba(2, 6, 23, .3);
}
.moh--right .moh__hint { right: 0; }
.moh--left .moh__hint { left: 0; }

/* panel */
.moh__panel {
    position: absolute; bottom: calc(var(--moh-btn) + 14px); width: min(380px, calc(100vw - 28px)); height: min(560px, calc(100vh - 120px));
    display: flex; flex-direction: column; background: var(--moh-bg); color: var(--moh-tx); border: 1px solid var(--moh-line);
    border-radius: var(--moh-r-panel); box-shadow: 0 30px 70px rgba(2, 6, 23, .45); overflow: hidden; animation: mohIn .25s ease;
}
.moh--right .moh__panel { right: 0; }
.moh--left .moh__panel { left: 0; }
@keyframes mohIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.moh__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, var(--moh-primary), var(--moh-secondary)); color: var(--moh-htext); }
.moh__av { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; flex: 0 0 38px; }
.moh__ht { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.moh__ht strong { font-size: 15px; color: inherit; }
.moh__ht small { font-size: 12px; opacity: .88; color: inherit; }
.moh__ht small.is-on::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.moh__x, .moh__snd { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: var(--moh-htext); line-height: 1; padding: 0; }
.moh__x { font-size: 20px; }
.moh__snd { font-size: 14px; margin-right: -4px; }
.moh__x:hover, .moh__snd:hover { background: rgba(255, 255, 255, .32); }

.moh__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--moh-bg2); overscroll-behavior: contain; }
.moh__m { max-width: 82%; padding: 9px 13px; border-radius: var(--moh-r-bubble); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.moh__m small { display: block; margin-top: 3px; font-size: 10.5px; opacity: .65; }
.moh__m--me { align-self: flex-end; background: var(--moh-me); color: #fff; border-bottom-right-radius: 5px; }
.moh__m--you { align-self: flex-start; background: var(--moh-you); color: var(--moh-tx); border-bottom-left-radius: 5px; }
.moh__sys { align-self: center; color: var(--moh-mut); font-size: 12px; text-align: center; }
.moh__sys--con { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--moh-you); }
.moh__sys--ok { color: #10b981; }
.moh__spin { width: 12px; height: 12px; border: 2px solid var(--moh-mut); border-top-color: var(--moh-primary); border-radius: 50%; animation: mohSpin .8s linear infinite; }
@keyframes mohSpin { to { transform: rotate(360deg); } }
.moh__typing { align-self: flex-start; color: var(--moh-mut); opacity: .75; font-size: 12px; font-style: italic; padding: 2px 4px; }

.moh__intro { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid var(--moh-line); background: var(--moh-bg); }
.moh__intro p { margin: 0; color: var(--moh-mut); font-size: 13px; line-height: 1.5; }
.moh__fields { display: flex; flex-direction: column; gap: 10px; }
.moh__intro input, .moh__intro textarea, .moh__form textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--moh-line); border-radius: 12px; background: var(--moh-bg2); color: var(--moh-tx);
    font-size: 14px; resize: none; outline: 0; height: auto;
}
.moh__intro input:focus, .moh__intro textarea:focus, .moh__form textarea:focus { border-color: var(--moh-primary); }
.moh__hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; }
.moh__send { height: 44px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--moh-secondary), var(--moh-primary)); color: var(--moh-htext); font-size: 14px; font-weight: 700; }
.moh__note { color: var(--moh-mut); font-size: 11px; }
.moh__form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--moh-line); background: var(--moh-bg); }
.moh__form textarea { max-height: 96px; }
.moh__go { flex: 0 0 42px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--moh-primary); color: var(--moh-htext); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.moh__go:disabled, .moh__send:disabled { opacity: .6; cursor: wait; }
.moh__live { margin: 0; padding: 0 14px 8px; background: var(--moh-bg); color: var(--moh-mut); font-size: 10.5px; }
.moh__err { margin: 0; padding: 8px 14px; background: rgba(239, 68, 68, .12); color: #fca5a5; font-size: 12.5px; }
.moh[data-mode="light"] .moh__err { color: #b91c1c; }

/* offline notice, image bubbles, agent names, rating, attach button */
.moh__offline { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .4); color: #fcd34d; font-size: 12.5px; line-height: 1.45; }
.moh[data-mode="light"] .moh__offline { color: #92400e; background: #fffbeb; }
.moh__who { align-self: flex-start; margin: 2px 0 -4px 4px; color: var(--moh-mut); font-size: 11px; font-weight: 600; }
.moh__m--img { padding: 6px; background: transparent !important; }
.moh__m--img a { display: block; line-height: 0; }
.moh__m--img img { display: block; max-width: 220px; max-height: 220px; width: auto; height: auto; border-radius: calc(var(--moh-r-bubble) - 4px); border: 1px solid var(--moh-line); }
.moh__m--img small { padding: 0 4px; }
.moh__rate { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--moh-line); background: var(--moh-bg); color: var(--moh-mut); font-size: 12.5px; }
.moh__rate span { flex: 1; }
.moh__rate button { width: 36px; height: 36px; border: 1px solid var(--moh-line); border-radius: 50%; background: var(--moh-bg2); font-size: 17px; line-height: 1; padding: 0; }
.moh__rate button:hover { border-color: var(--moh-primary); transform: translateY(-1px); }
.moh__att { flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--moh-mut); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.moh__att:hover { color: var(--moh-primary); background: var(--moh-bg2); }
.moh__att:disabled { opacity: .5; cursor: wait; }

/* static copy used by the live preview in the settings */
.moh--preview { position: relative; right: auto; left: auto; bottom: auto; display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.moh--preview.moh--left { align-items: flex-start; }
.moh--preview .moh__panel { position: relative; bottom: auto; right: auto; left: auto; height: 430px; animation: none; }
.moh--preview .moh__btn { transform: none; }

@media (max-width: 520px) {
    .moh:not(.moh--preview) { --moh-x: 14px; --moh-y: 14px; }
    .moh:not(.moh--preview) .moh__lbl { display: none; }
    .moh:not(.moh--preview) .moh__btn { padding: 0 14px; }
    .moh:not(.moh--preview) .moh__panel { position: fixed; right: 10px; left: 10px; bottom: calc(var(--moh-btn) + 24px); width: auto; }
}
@media (prefers-reduced-motion: reduce) { .moh__panel, .moh__btn, .moh__spin { animation: none; transition: none; } }