/* 오른쪽 아래 메시지 단추(#msg-fab) 끌어서 숨기기 — static/js/message_fab.js 와 짝.
   단추 모양 자체는 base-layout.css 의 .msg-fab 가 정한다. 여기는 숨김·끄는 동안·알림 줄만. */

/* 숨김은 계정 설정이다. <head> 의 message_fab.js 가 첫 그림 전에 <html data-msg-fab="hidden"> 을 붙인다. */
html[data-msg-fab="hidden"] .msg-fab {
    display: none;
}

/* 손가락으로 끌 때 화면이 함께 굴러가지 않게 한다(누르기·탭은 그대로 된다). 길게 눌러도 글 고르기·메뉴가 뜨지 않게. */
.msg-fab {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* 끄는 동안 — 흐린 막(100100)·✕(막 안)보다 위. codoc 창(100002)·빠른 메뉴(100003)·새 메시지 알림(100060)보다도
   위에 둔다: 잠깐의 손짓이고, 그동안 화면의 다른 것은 만질 수 없다. */
.msg-fab.is-dragging,
.msg-fab.is-returning,
.msg-fab.is-leaving {
    z-index: 100102;
}

.msg-fab.is-dragging {
    cursor: grabbing;
    transition: none;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .32);
}

/* ✕ 에 붙을 때만 짧게 미끄러진다. 손을 따라갈 때는 전환 없이 바로. */
.msg-fab.is-dragging.is-snapped {
    transition: transform .16s cubic-bezier(.2, .8, .3, 1);
}

.msg-fab.is-returning {
    transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}

.msg-fab.is-leaving {
    opacity: 0;
    transition: transform .2s ease-in, opacity .2s ease-in;
}

/* 다시 나타날 때 작게 튀어 오른다. */
@keyframes msg-fab-arrive {
    0% { transform: scale(.4); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.msg-fab.is-arriving {
    animation: msg-fab-arrive .32s cubic-bezier(.2, .8, .3, 1);
}

/* 끄는 동안 화면 어디서도 글이 골라지지 않게. */
html.msg-fab-dragging,
html.msg-fab-dragging * {
    -webkit-user-select: none !important;
    user-select: none !important;
    cursor: grabbing !important;
}

/* ── 흐린 막 + ✕ ─────────────────────────────────────────────── */
.msg-fab-drop {
    --msg-fab-veil: rgba(15, 23, 42, .34);
    --msg-fab-target-bg: rgba(17, 24, 39, .78);
    --msg-fab-target-line: rgba(255, 255, 255, .92);
    --msg-fab-target-on: #EF4444;
    --msg-fab-hint-bg: rgba(17, 24, 39, .86);
    --msg-fab-hint-text: #FFFFFF;
    position: fixed;
    inset: 0;
    z-index: 100100;
    pointer-events: none;
}

[data-theme="dark"] .msg-fab-drop {
    --msg-fab-veil: rgba(0, 0, 0, .55);
    --msg-fab-target-bg: rgba(255, 255, 255, .16);
    --msg-fab-target-line: rgba(255, 255, 255, .85);
    --msg-fab-target-on: #F05252;
    --msg-fab-hint-bg: rgba(245, 245, 245, .94);
    --msg-fab-hint-text: #111111;
}

.msg-fab-drop__veil {
    position: absolute;
    inset: 0;
    background: var(--msg-fab-veil);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .18s ease;
}

.msg-fab-drop.is-on .msg-fab-drop__veil {
    opacity: 1;
}

/* 자리(left·top)는 스크립트가 ✕ 의 가운데로 준다 — 화면 가로 가운데, 단추와 같은 높이. */
.msg-fab-drop__target {
    position: absolute;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border: 2px solid var(--msg-fab-target-line);
    border-radius: 50%;
    background: var(--msg-fab-target-bg);
    color: #FFFFFF;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
    opacity: 0;
    transform: scale(.6);
    transition: transform .18s cubic-bezier(.2, .8, .3, 1), opacity .18s ease, background-color .14s ease;
}

.msg-fab-drop__target svg {
    width: 26px;
    height: 26px;
}

.msg-fab-drop.is-on .msg-fab-drop__target {
    opacity: 1;
    transform: scale(1);
}

/* 자석 — 단추가 붙으면 ✕ 가 커지고 빨개진다. */
.msg-fab-drop.is-on.is-engaged .msg-fab-drop__target {
    transform: scale(1.28);
    border-color: #FFFFFF;
    background: var(--msg-fab-target-on);
}

/* ✕ 위의 한 줄. 단추가 화면 아래에 있으므로 ✕ 아래가 아니라 위에 둔다. */
.msg-fab-drop__hint {
    position: absolute;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--msg-fab-hint-bg);
    color: var(--msg-fab-hint-text);
    font-family: var(--summet-font-family);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 50px));
    transition: opacity .18s ease, transform .18s cubic-bezier(.2, .8, .3, 1);
}

.msg-fab-drop.is-on .msg-fab-drop__hint {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 56px));
}

/* ── 숨긴 뒤의 알림 줄 ─────────────────────────────────────────── */
.msg-fab-toast {
    --msg-fab-toast-action: #8CC8FF;
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 100070;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    /* left:50% 에서는 저절로 정해지는 폭이 화면의 절반뿐이라 폰에서 글이 다섯 줄로 접혔다 — 글 폭을 쓰고 최대 폭으로 묶는다. */
    width: max-content;
    max-width: min(480px, calc((100vw / var(--ui-zoom, 1)) - 32px));
    padding: 10px 8px 10px 16px;
    border-radius: 12px;
    background: var(--text-color);
    color: var(--surface-color);
    font-family: var(--summet-font-family);
    font-size: 13.5px;
    line-height: 1.45;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .18s ease, transform .18s ease;
}

[data-theme="dark"] .msg-fab-toast {
    --msg-fab-toast-action: #0B63CE;
}

.msg-fab-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

.msg-fab-toast[hidden],
.msg-fab-toast__action[hidden] {
    display: none;
}

.msg-fab-toast__action {
    flex: none;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--msg-fab-toast-action);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.msg-fab-toast__action:hover,
.msg-fab-toast__action:focus-visible {
    background: rgba(127, 127, 127, .18);
    outline: none;
}

/* 움직임 줄이기 — 자리만 바뀌고 움직이지 않는다(스크립트도 전환을 기다리지 않는다).
   .msg-fab 자체의 전환(base-layout 의 :hover 뜨기)도 끈다 — 남겨 두면 놓은 단추가 제자리로 미끄러져 돌아간다. */
@media (prefers-reduced-motion: reduce) {
    .msg-fab,
    .msg-fab.is-dragging.is-snapped,
    .msg-fab.is-returning,
    .msg-fab.is-leaving,
    .msg-fab.is-arriving,
    .msg-fab-drop__veil,
    .msg-fab-drop__target,
    .msg-fab-drop__hint,
    .msg-fab-toast {
        transition: none;
        animation: none;
    }
}