/* 메시지방 예약 도우미(static/js/messenger_booking.js) — 후보 카드, 브라우저 덮개, 확인 창, 알림.
   메시지 화면(messages.html)과 떠 있는 메시지 창(message_dock.js) 둘 다에 쓰인다. 색은 이 파일의 토큰만 쓴다. */
:root {
    --mb-surface: #ffffff;
    --mb-soft: #f3f4f6;
    --mb-line: #e5e7eb;
    --mb-text: #111827;
    --mb-muted: #6b7280;
    --mb-blue: #0082ff;
    --mb-blue-soft: rgba(0, 130, 255, .10);
    --mb-green: #16a34a;
    --mb-green-soft: rgba(22, 163, 74, .10);
    --mb-shadow: 0 18px 48px rgba(15, 23, 42, .22);
    --mb-scrim: rgba(15, 23, 42, .45);
}
[data-theme="dark"] {
    --mb-surface: #262626;
    --mb-soft: #2f2f2f;
    --mb-line: rgba(255, 255, 255, .12);
    --mb-text: #f1f5f9;
    --mb-muted: #a3a3a3;
    --mb-blue-soft: rgba(0, 130, 255, .20);
    --mb-green-soft: rgba(22, 163, 74, .22);
    --mb-shadow: 0 18px 48px rgba(0, 0, 0, .5);
    --mb-scrim: rgba(0, 0, 0, .6);
}

/* ── 후보 카드 ── */
.mb-card {
    width: min(420px, 100%);
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--mb-line);
    border-radius: 16px;
    background: var(--mb-surface);
    color: var(--mb-text);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    word-break: keep-all; /* 한국어는 낱말 중간에서 꺾지 않는다(긴 주소·영문은 아래 overflow-wrap 이 꺾는다) */
}
.mb-card__head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; min-width: 0; }
.mb-card__logo { width: 20px; height: 20px; border-radius: 6px; flex: none; }
.mb-card__name { font-weight: 700; font-size: 13px; }
.mb-card__by { color: var(--mb-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-card__q { margin: 0 0 8px; font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }
.mb-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mb-opt {
    padding: 10px;
    border-radius: 12px;
    background: var(--mb-soft);
    min-width: 0;
}
.mb-opt.is-booked { background: var(--mb-green-soft); }
.mb-opt__top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.mb-opt__no {
    flex: none; width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mb-blue); color: #fff; font-size: 11px; font-weight: 700; margin-top: 1px;
}
.mb-opt__title { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.mb-opt__meta { margin: 3px 0 0 28px; color: var(--mb-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.mb-opt__details, .mb-opt__why { margin: 4px 0 0 28px; font-size: 13px; overflow-wrap: anywhere; }
.mb-opt__why { color: var(--mb-muted); }
.mb-opt__why span { font-weight: 600; color: var(--mb-text); }
.mb-opt__booked { margin: 6px 0 0 28px; color: var(--mb-green); font-weight: 700; font-size: 12.5px; }
.mb-opt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0 28px; }
.mb-vote, .mb-link, .mb-book {
    height: 30px; padding: 0 11px; border-radius: 999px; box-sizing: border-box;
    display: inline-flex; align-items: center; gap: 4px;
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none;
    border: 1px solid var(--mb-line); background: var(--mb-surface); color: var(--mb-text);
}
.mb-vote.is-on { border-color: var(--mb-blue); background: var(--mb-blue-soft); color: var(--mb-blue); }
.mb-vote:disabled { opacity: .6; cursor: default; }
.mb-vote__n { font-variant-numeric: tabular-nums; }
.mb-link:hover, .mb-vote:hover { border-color: var(--mb-muted); }
.mb-book { border-color: var(--mb-blue); background: var(--mb-blue); color: #fff; }
.mb-book:hover { filter: brightness(1.06); }
.mb-vote:focus-visible, .mb-link:focus-visible, .mb-book:focus-visible { outline: 2px solid var(--mb-blue); outline-offset: 2px; }

/* 메시지 화면의 줄 — 카드는 말풍선 대신 놓인다. */
.msg-row.is-booking { max-width: min(92%, 460px); }
.msg-row.is-booking .msg-bubble { background: transparent !important; padding: 0; border-radius: 0; min-width: 0; }
/* 떠 있는 메시지 창의 줄 — 창이 좁아 카드가 칸을 거의 다 쓰고, 시각은 카드 아래로. */
.msg-line--booking .msg-line__body { max-width: calc(100% - 40px); flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.msg-line--booking .mb-card { width: 100%; }

/* ── 브라우저 덮개 ── */
.mb-overlay {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center;
    background: var(--mb-scrim);
}
.mb-sheet {
    position: relative;
    width: min(1120px, 94vw);
    height: min(780px, 90vh);
    display: flex; flex-direction: column;
    background: var(--mb-surface); color: var(--mb-text);
    border-radius: 18px; overflow: hidden; box-shadow: var(--mb-shadow);
}
.mb-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--mb-line); min-width: 0; }
.mb-head__logo { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.mb-head__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mb-head__title { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-head__step { font-size: 12.5px; color: var(--mb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-head__step:empty { display: none; }
.mb-head__btn {
    flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--mb-text); cursor: pointer;
}
.mb-head__btn:hover { background: var(--mb-soft); }
.mb-browser { position: relative; flex: 1 1 auto; min-height: 0; background: #000; }
.mb-browser > * { width: 100%; height: 100%; }
.mb-result { margin: 0; padding: 10px 16px; border-top: 1px solid var(--mb-line); font-size: 13.5px; }

/* 보안 로그인 칸 — 브라우저 아래에 붙는다(주소창·로그인 칸이 보이게 화면을 가리지 않는다). 값은 서버가 사이트 입력칸에 친다. */
.mb-login {
    flex: none; display: grid; gap: 10px; padding: 14px 16px 16px;
    border-top: 1px solid var(--mb-line); background: var(--mb-surface); color: var(--mb-text);
}
.mb-login[hidden] { display: none; }
.mb-login__head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.mb-login__note { margin: 0; font-size: 12.5px; color: var(--mb-muted); word-break: keep-all; overflow-wrap: anywhere; }
.mb-login__trust { margin: 0; font-size: 13px; font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }
.mb-login__trust--ok { color: #15803d; }
.mb-login__trust--warn { color: #b45309; }
.mb-login__check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.mb-login__check-box { width: 16px; height: 16px; margin: 0; accent-color: var(--mb-blue); }
.mb-login__send:disabled { opacity: 0.45; cursor: not-allowed; }
.mb-login__field { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.mb-login__input {
    height: 40px; box-sizing: border-box; padding: 0 12px; border-radius: 10px; font: inherit; font-weight: 400; font-size: 15px;
    border: 1px solid var(--mb-line); background: var(--mb-soft); color: var(--mb-text);
}
.mb-login__input:focus { outline: 2px solid var(--mb-blue); outline-offset: 0; border-color: transparent; }
.mb-login__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.mb-login__btn {
    height: 38px; padding: 0 16px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
    border: 1px solid var(--mb-line); background: var(--mb-surface); color: var(--mb-text);
}
.mb-login__send { border-color: var(--mb-blue); background: var(--mb-blue); color: #fff; }

/* 예약 확인 — 브라우저 아래쪽 위에 뜬다(마지막 단추가 보이게 화면을 다 가리지 않는다). */
.mb-confirm {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    width: min(440px, calc(100% - 32px)); box-sizing: border-box;
    padding: 16px; border-radius: 16px;
    background: var(--mb-surface); color: var(--mb-text);
    border: 1px solid var(--mb-line); box-shadow: var(--mb-shadow);
}
.mb-confirm[hidden] { display: none; }
.mb-confirm__title { display: block; font-size: 16px; margin-bottom: 6px; }
.mb-confirm__text { margin: 0 0 8px; font-size: 13.5px; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; max-height: 30vh; overflow: auto; }
.mb-confirm__facts { margin: 0 0 12px; display: grid; gap: 4px; font-size: 13px; }
.mb-confirm__facts div { display: flex; gap: 8px; min-width: 0; }
.mb-confirm__facts dt { flex: none; width: 52px; color: var(--mb-muted); }
.mb-confirm__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.mb-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; }
.mb-confirm__no, .mb-confirm__yes {
    height: 38px; padding: 0 16px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
    border: 1px solid var(--mb-line); background: var(--mb-surface); color: var(--mb-text);
}
.mb-confirm__yes { border-color: var(--mb-blue); background: var(--mb-blue); color: #fff; }

/* 접었을 때 — 덮개는 비키고 오른쪽 아래 알약만 남는다(브라우저는 그대로). */
.mb-pill { display: none; }
.mb-overlay.is-min { inset: auto 16px 88px auto; background: transparent; pointer-events: none; }
.mb-overlay.is-min .mb-sheet { display: none; }
.mb-overlay.is-min .mb-pill {
    display: flex; align-items: center; gap: 8px; pointer-events: auto;
    padding: 6px 6px 6px 8px; border-radius: 999px;
    background: var(--mb-surface); color: var(--mb-text);
    border: 1px solid var(--mb-line); box-shadow: var(--mb-shadow);
    max-width: calc(100vw - 32px);
}
.mb-pill__logo { width: 22px; height: 22px; border-radius: 7px; flex: none; }
.mb-pill__text { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-pill__open {
    flex: none; height: 30px; padding: 0 12px; border-radius: 999px; border: 0;
    background: var(--mb-blue); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.mb-pill__close {
    flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mb-soft); color: var(--mb-text); cursor: pointer;
}

/* 메시지 화면의 'Summet 에게 맡기기' 단추 */
.mb-call-btn img { width: 22px; height: 22px; border-radius: 7px; display: block; }

/* ── 알림 ── */
.mb-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
    z-index: 2147483001; max-width: calc(100vw - 32px); box-sizing: border-box;
    padding: 10px 16px; border-radius: 12px;
    background: #111827; color: #fff; font-size: 13.5px; line-height: 1.4;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.mb-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* 폰 폭 — 덮개는 화면 전체, 카드는 칸 폭. */
@media (max-width: 640px) {
    .mb-sheet { width: 100vw; height: 100dvh; border-radius: 0; }
    .mb-overlay.is-min { inset: auto 12px 80px 12px; justify-content: flex-end; }
    .mb-opt__meta, .mb-opt__details, .mb-opt__why, .mb-opt__booked, .mb-opt__actions { margin-left: 0; }
}