/* LingoLeap message actions (msgx.js): long-press popup, reactions, reply quotes, swipe to reply */
.msgs { touch-action: pan-y; }
@media (hover: none) { .msgs .bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
.msgs .bubble { transition: transform .18s ease; }
.msgs .bubble.mx-press { transform: scale(.97); }
.msg { position: relative; }
.msg.mx-held { visibility: hidden; }
.msg.mx-swiping { will-change: transform; }
.msg.mx-swipe-back { transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.msg.mx-swiping::before { content: ''; position: absolute; left: -34px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231cb0f6' d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E") center/16px no-repeat;
  border: 2px solid var(--line); opacity: var(--sw, 0); transform: scale(calc(.5 + var(--sw, 0) * .5)); }
.msg.mx-flash .bubble { animation: mxflash 1.5s ease; }
@keyframes mxflash { 0%, 40% { box-shadow: 0 0 0 4px rgba(28, 176, 246, .55); } 100% { box-shadow: 0 0 0 0 rgba(28, 176, 246, 0); } }

/* reply quote + forwarded label inside a bubble */
.mx-quote { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-width: 120px; margin: 0 0 6px; padding: 5px 10px 6px; border-radius: 12px;
  border-left: 3px solid var(--blue); background: rgba(0, 0, 0, .06); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mx-quote small { font-size: 11px; font-weight: 800; opacity: .8; }
.mx-quote span { font-size: 13px; font-weight: 700; opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; word-break: break-word; }
.msg.me .mx-quote { background: rgba(255, 255, 255, .2); border-left-color: #fff; }
.msg.pic .mx-quote { margin: 4px 4px 6px; width: auto; }
.mx-fwd { display: block; font-size: 11px; font-weight: 800; opacity: .75; margin: 0 0 2px; }
.msg.pic .mx-fwd { padding: 2px 8px 0; }
.txt.mx-unsent { font-style: italic; font-weight: 700; opacity: .75; }
.msg.unsent .bubble { background: transparent !important; color: var(--muted) !important; border: 2px dashed var(--line) !important; box-shadow: none !important; }
.msg.unsent .bubble .time { color: var(--muted); }

/* reaction chip on the bubble's lower corner */
.msg.has-rx { margin-bottom: 4px; }
.mx-chip { position: relative; margin-top: -9px; display: inline-flex; align-items: center; gap: 1px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--card);
  border: 2px solid var(--soft); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); font: inherit; font-size: 14px; line-height: 1; color: var(--text); cursor: pointer; z-index: 1; }
.mx-chip.pop { animation: mxpop .32s cubic-bezier(.3, 1.6, .5, 1); }
.msg.me .mx-chip { margin-right: 10px; } .msg.them .mx-chip { margin-left: 10px; }
.mx-chip i { font-style: normal; }
.mx-chip b { font-size: 12px; margin-left: 3px; color: var(--muted); }
@keyframes mxpop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* composer reply bar */
.mx-replybar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card); border-top: 2px solid var(--line); animation: mxup .2s ease-out; }
.mx-replybar + .composer { border-top: 0; padding-top: 2px; }
.mx-rb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 3px solid var(--blue); padding-left: 10px; }
.mx-rb-t small { font-size: 12px; color: var(--blue); font-weight: 800; }
.mx-rb-t span { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-rb-x { width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
@keyframes mxup { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* the popup */
.mx-ov { position: fixed; inset: 0; z-index: 1000; -webkit-tap-highlight-color: transparent; }
.mx-dim { position: absolute; inset: 0; background: rgba(10, 18, 22, .38); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); opacity: 0; transition: opacity .2s ease; }
html[data-theme="dark"] .mx-dim { background: rgba(0, 0, 0, .55); }
.mx-ov.in .mx-dim { opacity: 1; }
.mx-ov.out .mx-dim { opacity: 0; transition-duration: .16s; }
.mx-stack { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.mx-stack > * { pointer-events: auto; }
.mx-bwrap { display: flex; flex-direction: column; pointer-events: none; }
.mx-bwrap.me { align-items: flex-end; } .mx-bwrap.them { align-items: flex-start; }
.mx-bwrap.clip { overflow: hidden; border-radius: 18px; }
.mx-holder { max-width: none !important; transform-origin: center; transition: transform .38s cubic-bezier(.3, 1.5, .5, 1); }
.mx-bwrap.me .mx-holder { transform-origin: right center; } .mx-bwrap.them .mx-holder { transform-origin: left center; }
.mx-ov.in .mx-holder { transform: scale(1.04); }
.mx-ov.out .mx-holder { transform: scale(1); transition-duration: .16s; }
.mx-holder .bubble { cursor: default; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
.mx-holder .mx-chip { display: none; }
.mx-pill { align-self: flex-start; display: flex; align-items: center; gap: 2px; padding: 5px 6px; border-radius: 999px; background: var(--card); box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
  transform: translateY(10px) scale(.6); opacity: 0; transform-origin: center bottom; transition: transform .36s cubic-bezier(.3, 1.6, .5, 1), opacity .16s ease; }
.mx-ov.me .mx-pill { transform-origin: right bottom; } .mx-ov.them .mx-pill { transform-origin: left bottom; }
.mx-ov.in .mx-pill { transform: none; opacity: 1; }
.mx-ov.out .mx-pill, .mx-ov.out .mx-menu { opacity: 0; transform: scale(.85); transition-duration: .14s; }
.mx-e { width: 42px; height: 42px; border-radius: 50%; font-size: 26px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background .15s;
  animation: mxpop .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 25ms); }
.mx-e:hover, .mx-e:focus-visible { transform: scale(1.22) translateY(-3px); outline: none; }
.mx-e:active { transform: scale(1.3) translateY(-4px); }
.mx-e.on { background: var(--blue-l); }
.mx-plus { background: var(--soft); width: 36px; height: 36px; margin-left: 2px; }
.mx-plus svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; }
.mx-menu { align-self: flex-start; width: 236px; max-width: calc(100vw - 16px); background: var(--card); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); overflow: hidden;
  transform: translateY(-8px) scale(.9); opacity: 0; transform-origin: center top; transition: transform .34s cubic-bezier(.3, 1.4, .5, 1), opacity .16s ease; }
.mx-ov.me .mx-menu { transform-origin: right top; } .mx-ov.them .mx-menu { transform-origin: left top; }
.mx-ov.in .mx-menu { transform: none; opacity: 1; }
.mx-meta { padding: 9px 16px 8px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 700; }
.mx-meta b { color: var(--blue); font-weight: 800; }
.mx-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; min-height: 44px; font: inherit; font-size: 15px; font-weight: 800; color: var(--text); background: none; text-align: left; }
.mx-item + .mx-item { border-top: 1px solid var(--line); }
.mx-item:active, .mx-item:hover, .mx-item:focus-visible { background: var(--soft); outline: none; }
.mx-item svg { width: 21px; height: 21px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mx-item.red { color: var(--red); }
html[data-theme="dark"] .mx-item.red { color: #ff7b7b; }
html[data-theme="dark"] .mx-pill, html[data-theme="dark"] .mx-menu { background: #1d2c33; }
html[data-theme="dark"] .mx-meta, html[data-theme="dark"] .mx-item + .mx-item { border-color: #2c3d46; }
html[data-theme="dark"] .mx-plus { background: #2a3a42; }
html[data-theme="dark"] .mx-item:active, html[data-theme="dark"] .mx-item:hover { background: #26363e; }
.mx-menu.grid { width: 300px; }
.mx-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 8px; max-height: 236px; overflow-y: auto; }
.mx-g { height: 38px; font-size: 24px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.mx-g:active, .mx-g:hover { background: var(--soft); } .mx-g.on { background: var(--blue-l); }

/* reactions list + forward picker (in the app's modal) */
.mx-who { display: flex; flex-direction: column; margin: 4px 0 8px; text-align: left; }
.mx-who-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; width: 100%; font: inherit; color: var(--text); background: none; text-align: left; border-radius: 12px; }
button.mx-who-row:active { background: var(--soft); }
.mx-who-row .grow { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mx-who-row small { font-size: 12px; }
.mx-who-e { font-size: 26px; }
.mx-fw-prev { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--blue); background: var(--soft); border-radius: 10px; font-size: 14px; color: var(--muted); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-fw-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; margin-bottom: 8px; text-align: left; }
.mx-fw-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.mx-fw-row .grow { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mx-fw-row .grow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; }
.mx-fw-row .btn { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .mx-holder, .mx-pill, .mx-menu, .mx-e, .mx-chip, .msg.mx-swipe-back { transition: none !important; animation: none !important; } }