.guestbook-tools {
    position: fixed; right: max(20px, calc((100vw - 1120px) / 2 - 68px));
    bottom: max(28px, env(safe-area-inset-bottom)); z-index: 30;
    display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden;
    transform: translateY(10px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.guestbook-tools.is-visible { opacity: 1; visibility: visible; transform: none; }
.guestbook-tools.is-visible button { pointer-events: auto; }
.guestbook-tools button {
    width: 48px; height: 48px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; border-radius: 12px; padding: 0;
    color: #bdc7ce; background: rgb(22 26 41 / 88%); border: 1px solid rgb(181 200 250 / 18%);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px #00000024; cursor: pointer; font: 11px/1.2 system-ui, sans-serif;
    transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.guestbook-tools.is-over-content button {
    background: rgb(22 26 41 / 38%); border-color: rgb(181 200 250 / 12%); box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.guestbook-tools svg { width: 18px; height: 18px; }
@media (hover: hover) {
    .guestbook-tools button:hover { color: #dce6ff; background: rgb(38 49 75 / 98%); border-color: #b5c8fa66; transform: translateY(-2px); }
}
.guestbook-tools button:focus-visible { color: #dce6ff; background: rgb(38 49 75 / 98%); outline: 2px solid #b5c8fa; outline-offset: 3px; }
.guestbook-tools button:active { color: #dce6ff; background: rgb(38 49 75 / 98%); border-color: #b5c8fa66; transform: scale(.95); }
.guestbook-dialog {
    --guestbook-font: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Malgun Gothic", "Noto Sans CJK SC", sans-serif;
    box-sizing: border-box; width: 560px; max-width: calc(100vw - 32px);
    height: min(660px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px);
    margin: auto; padding: 0; border: 1px solid #ffffff24; border-radius: 16px;
    background: #141a29; color: #e2e7f0; box-shadow: 0 24px 90px #00000066; font: 15px/1.7 var(--guestbook-font);
    -webkit-user-select: text; user-select: text; caret-color: auto; cursor: auto;
}
.guestbook-dialog *, .guestbook-dialog *::before, .guestbook-dialog *::after { box-sizing: border-box; }
.guestbook-dialog [hidden] { display: none !important; }
.guestbook-dialog[open] { display: flex; flex-direction: column; animation: proposalOpen .2s ease-out; }
.guestbook-dialog::backdrop { background: #0408138c; backdrop-filter: blur(3px); }
.guestbook-dialog header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 12px 14px 12px 22px; }
.guestbook-dialog h2 { margin: 0; font-size: 18px; font-weight: 600; color: #f0f3ea; }
.guestbook-close { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: #95a2bb; font-size: 24px; border-radius: 9px; cursor: pointer; }
.guestbook-close:hover { background: #ffffff08; color: #edf2ea; }
.guestbook-dialog-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px; scrollbar-width: thin; scrollbar-color: #58647c transparent; }
.guestbook-message-list { border-top: 1px dashed #ffffff30; }
.guestbook-message { padding: 14px 0; border-bottom: 1px dashed #ffffff30; }
.guestbook-message-line, .guestbook-reply { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: 6px; }
.guestbook-message-line { margin: 0; color: #e2e7f0; font-size: 15px; line-height: 26px; overflow-wrap: anywhere; }
.guestbook-message-author { color: #bec9dc; font-size: 13px; line-height: 26px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.guestbook-message-content { min-width: 0; }
.guestbook-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.guestbook-message-content > * + * { margin-top: 8px; }
.guestbook-message.is-pinned { padding: 9px 10px; border-left: 2px solid #b5c8fa66; background: #b5c8fa05; }
.guestbook-pin-badge { display: inline-block; margin-bottom: 6px; padding: 0 5px; border-radius: 3px; background: #b5c8fa12; color: #c3d3fa; font: 12px/1.7 var(--guestbook-font); }
.guestbook-message-content.is-collapsed { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.guestbook-withdraw, .guestbook-expand { min-height: 32px; padding: 2px 0; margin-right: 14px; border: 0; background: transparent; color: #bdcef0; font: 13px/1.5 var(--guestbook-font); cursor: pointer; }
.guestbook-withdraw:hover, .guestbook-expand:hover { color: #d3dfff; }
.guestbook-reply { margin: 10px 0 0 10px; padding-left: 8px; border-left: 2px solid #b5c8fa40; color: #bdc9df; font-size: 14px; }
.guestbook-reply strong { color: #b5c8fa; font-weight: 500; }
.guestbook-empty { padding: 32px 0; color: #aebbd0; text-align: center; font-size: 13px; }
.guestbook-list-status { padding: 10px 0; color: #b5c3df; font-size: 13px; }
.guestbook-list-status button { display: block; margin-top: 6px; min-height: 36px; padding: 4px 10px; border: 1px solid #b5c8fa40; border-radius: 8px; background: transparent; color: #b5c8fa; cursor: pointer; }
.guestbook-dialog a { color: #b5c8fa; text-decoration: none; overflow-wrap: anywhere; }
.guestbook-dialog a:hover { text-decoration: underline; }
.guestbook-attachment { display: block; width: 100%; min-width: 0; max-width: 100%; white-space: normal; line-height: 1.5; }
.guestbook-media-stage { position: relative; width: 100%; min-width: 0; border-radius: 8px; overflow: hidden; background: #0d1320; }
.guestbook-attachment.is-image:not(.is-ready) .guestbook-media-stage { aspect-ratio: 4/3; min-height: 96px; }
.guestbook-attachment.is-image.is-ready .guestbook-media-stage { background: transparent; }
.guestbook-attachment img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 8px; }
.guestbook-attachment.is-video .guestbook-media-stage, .guestbook-attachment.is-platform .guestbook-media-stage { aspect-ratio: 16/9; }
.guestbook-attachment[data-media-state="unsupported"] .guestbook-media-stage { aspect-ratio: auto; min-height: 120px; }
.guestbook-attachment video, .guestbook-attachment iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: #090d16; }
.guestbook-attachment.is-audio .guestbook-media-stage { min-height: 54px; }
.guestbook-attachment audio { display: block; width: 100%; min-width: 0; max-width: 100%; height: 54px; color-scheme: dark; }
.guestbook-media-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; color: #bdc9df; background: #0d1320; text-align: center; font: 13px/1.6 var(--guestbook-font); }
.guestbook-media-retry { min-height: 40px; padding: 6px 12px; border: 1px solid #b5c8fa50; border-radius: 8px; background: #b5c8fa0b; color: #cad9fc; font: inherit; cursor: pointer; }
.guestbook-media-retry:hover { background: #b5c8fa20; }
.guestbook-media-stage:focus-visible { outline: 2px solid #b5c8fa; outline-offset: 2px; }
.guestbook-dialog footer { flex-shrink: 0; padding: 18px 22px 18px; }
.guestbook-composer { display: flex; align-items: flex-end; gap: 8px; }
.guestbook-form textarea { display: block; flex: 1; min-width: 0; height: 42px; max-height: 98px; padding: 10px 12px; border: 1px solid #ffffff0c; border-radius: 11px; background: #ffffff06; color: #edf1eb; font: 15px/20px var(--guestbook-font); resize: none; }
.guestbook-form textarea::placeholder { color: #acb8cf; }
.guestbook-form textarea:focus { outline: none; border-color: #b5c8fa88; }
.guestbook-submit, .guestbook-close-bottom { height: 42px; min-width: 72px; padding: 0 18px; border: 0; border-radius: 10px; background: #b5c8fa; color: #18233d; font: 600 13px/1.4 var(--guestbook-font); cursor: pointer; }
.guestbook-submit:hover, .guestbook-close-bottom:hover { background: #c9d7ff; }
.guestbook-submit:disabled { background: #ffffff12; color: #8995aa; cursor: default; }
.guestbook-form-meta { display: flex; justify-content: space-between; gap: 12px; min-height: 20px; margin-top: 5px; font-size: 12px; color: #b5c1dd; }
.guestbook-count.is-empty { visibility: hidden; }
.guestbook-feedback { margin: 0; }
.guestbook-footer-actions { display: flex; justify-content: flex-end; margin-top: 5px; }
.guestbook-close-bottom { height: 36px; font-weight: 500; }
.guestbook-dialog button:focus-visible, .guestbook-dialog a:focus-visible { outline: 2px solid #b5c8fa; outline-offset: 3px; }
@keyframes proposalOpen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 1279px) {
    /* Reserve a stable side gutter, including while the tools are hidden. */
    .guestbook-tools-enabled > .max-w-6xl { padding-right: calc(68px + env(safe-area-inset-right)); }
    .guestbook-tools { right: calc(12px + env(safe-area-inset-right)); }
    .guestbook-tools button { width: 44px; height: 44px; }
}
@media (max-width: 767px) {
    .guestbook-tools { bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px)); }
    .guestbook-tools button { width: 44px; height: 44px; border-radius: 11px; }
    .guestbook-tools svg { width: 16px; height: 16px; }
    .guestbook-dialog { width: calc(100vw - 24px); max-width: none; height: min(650px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); margin: auto 12px max(12px, env(safe-area-inset-bottom)); }
    .guestbook-dialog header { padding: 10px 10px 12px 18px; }
    .guestbook-dialog-body { padding: 0 18px; }
    .guestbook-dialog footer { padding: 16px 18px; }
    .guestbook-message-content.is-collapsed { -webkit-line-clamp: 3; }
    .guestbook-form textarea { font-size: 16px; }
    .guestbook-submit { min-width: 66px; padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .guestbook-tools, .guestbook-tools button { transition: none; }
    .guestbook-dialog[open] { animation: none; }
}