/* Press, hold and drag a message (message-gestures.js). Colours come from the site theme. */
.jmg-layer{--jmg-accent:var(--theme-accent,#08796f);--jmg-on-accent:var(--theme-on-accent,#fff);--jmg-danger:var(--theme-danger,#a9372c);--jmg-surface:var(--paper,#fff);--jmg-line:color-mix(in srgb,var(--ink,#102c3b) 12%,transparent);position:fixed;inset:0;z-index:1700;pointer-events:none;color:var(--ink,#102c3b);font-family:inherit}
.jmg-layer[hidden],.jmg-layer [hidden]{display:none!important}
:root[data-theme=dark] .jmg-layer{--jmg-surface:#253944;--jmg-line:color-mix(in srgb,var(--ink,#e4ecf0) 24%,transparent)}
.jmg-layer.is-interactive{pointer-events:auto}
.jmg-backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--ink,#102c3b) 5%,transparent)}
.jmg-layer[data-state=armed] .jmg-backdrop,.jmg-layer[data-state=pressed] .jmg-backdrop{background:transparent}
/* Four directions around the press point; the label in the middle names the one that will run. */
.jmg-dir,.jmg-ring{position:absolute;left:var(--cx,50%);top:var(--cy,50%);width:0;height:0}
.jmg-action,.jmg-reaction{position:absolute;left:0;top:0;display:grid;place-items:center;box-sizing:border-box;padding:0;border:1px solid var(--jmg-line);border-radius:50%;background:var(--jmg-surface);color:inherit;font:inherit;cursor:pointer;box-shadow:0 6px 20px #0002;transition:transform .12s ease,background-color .12s ease,box-shadow .12s ease}
.jmg-action{width:48px;height:48px;margin:-24px 0 0 -24px}
.jmg-action[data-dir=react]{transform:translate(var(--r),0)}
.jmg-action[data-dir=reply]{transform:translate(calc(var(--r) * -1),0)}
.jmg-action[data-dir=more]{transform:translate(0,calc(var(--r) * -1))}
.jmg-action[data-dir=delete]{transform:translate(0,var(--r))}
.jmg-action .jmr-icon,.jmg-action svg{width:22px;height:22px}
.jmg-action.is-active{background:var(--jmg-accent);color:var(--jmg-on-accent);border-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--jmg-accent) 22%,transparent),0 8px 24px #0003}
.jmg-action.is-active .jmr-icon{color:inherit}
.jmg-action[data-dir=delete].is-active{background:var(--jmg-danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--jmg-danger) 22%,transparent),0 8px 24px #0003}
.jmg-action[data-dir=react].is-active{transform:translate(var(--r),0) scale(1.12)}
.jmg-action[data-dir=reply].is-active{transform:translate(calc(var(--r) * -1),0) scale(1.12)}
.jmg-action[data-dir=more].is-active{transform:translate(0,calc(var(--r) * -1)) scale(1.12)}
.jmg-action[data-dir=delete].is-active{transform:translate(0,var(--r)) scale(1.12)}
/* Unavailable directions stay visible but are drawn dashed and faded, and say so in their title. */
.jmg-action:disabled{opacity:.38;border-style:dashed;box-shadow:none;cursor:not-allowed}
.jmg-pill{position:absolute;left:0;top:0;transform:translate(-50%,-50%);padding:5px 11px;border-radius:999px;background:var(--ink,#102c3b);color:var(--paper,#fff);font-size:.74rem;font-weight:700;line-height:1.2;white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px #0003}
.jmg-pill:empty{display:none}
/* Reaction selector: a fixed disc centred where React was entered. */
.jmg-ring::before{content:"";position:absolute;left:-98px;top:-98px;width:196px;height:196px;border-radius:50%;background:color-mix(in srgb,var(--jmg-surface) 94%,transparent);border:1px solid var(--jmg-line);box-shadow:0 12px 40px #0003}
.jmg-reaction{width:46px;height:46px;margin:-23px 0 0 -23px;transform:translate(var(--ox,0),var(--oy,0))}
.jmg-reaction .jmr-icon{width:26px;height:26px}
.jmg-reaction.is-active{transform:translate(var(--ox,0),var(--oy,0)) scale(1.24);border-color:var(--jmg-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--jmg-accent) 30%,transparent),0 8px 22px #0003}
.jmg-ring .jmg-pill{background:var(--jmg-accent);color:var(--jmg-on-accent)}
.jmg-trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .1s;pointer-events:none}
.jmg-trail.is-visible{opacity:1}
.jmg-trail line{stroke:var(--jmg-accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 7;opacity:.7}
/* More: a short menu, and Message info, placed inside the chat. */
.jmg-sheet,.jmg-info{position:absolute;left:0;top:0;box-sizing:border-box;min-width:210px;max-width:min(320px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;padding:6px;border:1px solid var(--jmg-line);border-radius:14px;background:var(--jmg-surface);box-shadow:0 12px 36px #0003}
.jmg-sheet button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:.86rem;text-align:left;cursor:pointer}
.jmg-sheet button:hover{background:var(--theme-soft,#f1f5f3)}
.jmg-sheet svg{flex:none;color:var(--muted,#5a6c75)}
.jmg-info dl{display:grid;gap:8px;margin:6px 8px 10px;font-size:.84rem}
.jmg-info dl>div{display:grid;grid-template-columns:auto 1fr;gap:12px}
.jmg-info dt{color:var(--muted,#5a6c75)}
.jmg-info dd{margin:0;text-align:right;overflow-wrap:anywhere}
.jmg-info button{width:100%;min-height:40px;border:0;border-radius:9px;background:var(--theme-soft,#f1f5f3);color:inherit;font:inherit;font-size:.84rem;cursor:pointer}
.jmg-layer button:focus-visible,.jmg-dialog button:focus-visible{outline:2px solid var(--jmg-accent,var(--theme-accent,#08796f));outline-offset:2px}
/* Delete confirmation. */
.jmg-dialog{box-sizing:border-box;width:min(420px,calc(100vw - 32px));padding:22px;border:0;border-radius:16px;background:var(--paper,#fff);color:var(--ink,#102c3b);box-shadow:0 20px 60px #0004}
.jmg-dialog::backdrop{background:#0006}
.jmg-dialog h2{margin:0 0 8px;font-size:1.1rem}
.jmg-dialog p{margin:0 0 12px;font-size:.88rem;line-height:1.55;color:var(--muted,#5a6c75)}
.jmg-dialog .jmg-dialog-error{color:var(--theme-danger,#a9372c);font-weight:600}
.jmg-dialog .jmg-dialog-error:empty{display:none}
.jmg-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:6px}
.jmg-dialog .button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin:0;padding:10px 16px;border-radius:9px;font-size:.84rem}
.jmg-dialog .jm-text-button{min-height:42px;padding:10px 14px;border:0;border-radius:9px;background:transparent;color:var(--muted,#5a6c75);font:inherit;font-size:.84rem;cursor:pointer}
.jmg-dialog .jmg-danger{background:#a9372c;color:#fff;border:0}
.jmg-dialog .jmg-danger:hover{background:#8f2c23}
.jmg-dialog button:disabled{opacity:.6;cursor:wait}
/* The held message follows the pointer a little; it is transformed, so nothing around it moves. */
/* Touch: a sideways swipe on a message reaches the gesture; scrolling up and down and pinch-zoom still work. */
.jm-history .jm-bubble,.jc-log .jc-message{touch-action:pan-y pinch-zoom}
.jmg-pressed{position:relative;z-index:2;transform:translate(var(--jmg-x,0),var(--jmg-y,0)) scale(.985);box-shadow:0 6px 22px #0002;cursor:grabbing;transition:transform 50ms linear,box-shadow .12s}
.jmg-returning{transition:transform .18s cubic-bezier(.2,.8,.2,1)}
html.jmg-noselect,html.jmg-noselect *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none}
html.jmg-noselect{cursor:grabbing}
.jm-bubble:focus-visible,.jc-message:focus-visible{outline:2px solid var(--theme-accent,#08796f);outline-offset:2px}
/* The conventional fallback: a Message actions button on every message. */
.jm-workbench .jm-actions-trigger{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;min-height:28px;padding:4px;border:0;border-radius:7px;background:transparent;color:var(--muted,#5a6c75);cursor:pointer;opacity:0;transition:opacity .15s}
.jm-actions-trigger svg{width:16px;height:16px}
.jm-bubble:hover .jm-actions-trigger,.jm-bubble:focus-within .jm-actions-trigger,.jm-bubble:focus .jm-actions-trigger{opacity:1}
.jm-actions-trigger:hover{background:var(--theme-tint,#e7f5ef);color:var(--theme-accent,#08796f)}
.jm-actions-trigger:focus-visible{outline:2px solid var(--theme-accent,#08796f);outline-offset:2px}
/* Group chats: Delete for me sits in each message's existing actions menu. */
.jc-message [data-message-delete]{display:inline-flex;align-items:center;gap:6px}
.jc-message [data-message-delete] svg{width:16px;height:16px;flex:none}
/* Replies and deleted messages in one-to-one chats. */
.jm-quote{display:flex;flex-direction:column;gap:2px;margin:0 0 6px;padding:6px 10px;border-left:3px solid var(--theme-accent,#08796f);border-radius:6px;background:color-mix(in srgb,var(--ink,#102c3b) 5%,transparent);font-size:.78rem;line-height:1.4;color:var(--muted,#5a6c75);overflow-wrap:anywhere}
.jm-quote b{font-size:.72rem;color:var(--theme-accent,#08796f)}
.jm-quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jm-quote.is-deleted span{font-style:italic}
.jm-bubble.is-deleted .jm-message-body{font-style:italic;color:var(--muted,#5a6c75)}
.jm-reply-bar{display:flex;align-items:center;gap:8px;padding:0 0 8px;min-width:0}
.jm-reply-bar>svg{flex:none;width:16px;height:16px;color:var(--theme-accent,#08796f)}
.jm-reply-bar>div{display:grid;gap:1px;min-width:0;flex:1;padding:4px 10px;border-left:3px solid var(--theme-accent,#08796f);border-radius:6px;background:color-mix(in srgb,var(--ink,#102c3b) 5%,transparent)}
.jm-reply-bar b{font-size:.72rem;color:var(--theme-accent,#08796f)}
.jm-reply-bar span{font-size:.78rem;color:var(--muted,#5a6c75);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media(hover:none),(pointer:coarse){
  .jm-workbench .jm-actions-trigger{opacity:1;width:40px;height:40px;min-width:40px;min-height:40px}
  .jmg-action{width:52px;height:52px;margin:-26px 0 0 -26px}
  .jmg-reaction{width:50px;height:50px;margin:-25px 0 0 -25px}
}
@media(prefers-reduced-motion:reduce){
  .jmg-action,.jmg-reaction,.jmg-trail,.jmg-pressed,.jmg-returning,.jm-actions-trigger{transition:none!important}
  .jmg-pressed{transform:none}
  .jmg-action[data-dir=react].is-active{transform:translate(var(--r),0)}
  .jmg-action[data-dir=reply].is-active{transform:translate(calc(var(--r) * -1),0)}
  .jmg-action[data-dir=more].is-active{transform:translate(0,calc(var(--r) * -1))}
  .jmg-action[data-dir=delete].is-active{transform:translate(0,var(--r))}
  .jmg-reaction.is-active{transform:translate(var(--ox,0),var(--oy,0))}
}
@media(forced-colors:active){
  .jmg-action.is-active,.jmg-reaction.is-active{outline:3px solid Highlight;outline-offset:2px}
  .jmg-action:disabled{opacity:1;color:GrayText;border-color:GrayText}
}