.vp-surf-dialog { --surf-ink:#2e293d;--surf-muted:#746d85;--surf-line:#e9e4ef;--surf-accent:#7053a5; position:fixed;inset:0 0 0 auto;width:min(720px,55vw);z-index:90000;color:var(--surf-ink);font-size:15px;line-height:1.75;isolation:isolate; }
.vp-surf-dialog[hidden] { display:none!important; }
.vp-surf-shell { display:flex;flex-direction:column;height:100%;height:100dvh;background:#fffdfa;border-left:1px solid #e7e0ed;box-shadow:-18px 0 64px #30214324;outline:0; }
.vp-surf-dialog button { font:inherit;cursor:pointer;border:1px solid var(--surf-line);border-radius:12px;background:#fff;color:var(--surf-ink);min-height:40px;touch-action:manipulation; }
.vp-surf-dialog button:hover { background:#f4effa; }
.vp-surf-dialog button:disabled { cursor:default;opacity:.4; }
.vp-surf-dialog :is(button,a,textarea,[tabindex]):focus-visible { outline:3px solid #a58bcf;outline-offset:3px; }
.vp-surf-header { display:flex;align-items:center;gap:12px;padding:17px 22px 13px;background:linear-gradient(120deg,#fcf8f0,#f5f0fc);flex:none;border-bottom:1px solid var(--surf-line); }
.vp-surf-header>button { width:42px;font-size:25px;line-height:1;border:0;background:#ffffffb3; }
.vp-surf-heading { flex:1;min-width:0; }
.vp-surf-heading h2 { margin:1px 0 0;font-size:19px;font-weight:750;letter-spacing:.04em;color:var(--surf-ink); }
.vp-surf-eyebrow { font-size:9px;letter-spacing:.18em;color:var(--surf-accent);font-weight:700; }
.vp-surf-nav { display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;padding:11px 18px;border-bottom:1px solid var(--surf-line);background:#fffdfa; }
.vp-surf-nav button { font-size:12px;padding:6px 10px;min-height:35px;border-color:transparent;color:var(--surf-accent); }
.vp-surf-nav button:nth-child(2) { background:#f0eaf7;border-radius:99px; }
.vp-surf-scroll { overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;flex:1;min-height:0;scroll-behavior:auto; }
.vp-surf-status { margin:0;padding:0 22px;font-size:12px;color:var(--surf-muted);flex:none;background:#faf7fd; }
.vp-surf-status:not(:empty) { padding-top:9px;padding-bottom:9px;border-bottom:1px solid var(--surf-line); }
.vp-surf-status.is-error { color:#8f3343;background:#fff3f4; }
.vp-surf-loading,.vp-surf-error { padding:48px 25px;text-align:center;color:var(--surf-muted); }
.vp-surf-loading::before { content:'';display:block;margin:0 auto 18px;width:26px;height:26px;border:2px solid #e7deef;border-top-color:var(--surf-accent);border-radius:50%;animation:vp-surf-spin 1s linear infinite; }
@keyframes vp-surf-spin { to { transform:rotate(360deg); } }
.vp-surf-conversation { padding:0; }
.vp-surf-dialog .microblog-post.vp-surf-root { box-sizing:border-box;width:100%;margin:0;padding:24px 24px 17px;border:0;border-radius:0;background:#fffdfa;box-shadow:none;float:none;clear:both; }
.vp-surf-author { display:flex!important;align-items:center;gap:11px;margin-bottom:15px;min-width:0;float:none!important; }
.vp-surf-avatar { width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden; }
.vp-surf-avatar img.microblog-avatar { display:block;object-fit:cover;width:100%!important;height:100%!important; }
.vp-surf-author .microblog-user-info { display:flex;flex-direction:column;min-width:0;flex:1;font-size:13px;line-height:1.5; }
.vp-surf-author .microblog-username { font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--surf-ink); }
.vp-surf-author .microblog-at-username { font-size:11px;color:var(--surf-muted); }
.vp-surf-author time { margin-left:auto;flex:none;font-size:10px;color:var(--surf-muted); }
.vp-surf-reading { clear:both;overflow-wrap:anywhere;word-break:normal;white-space:normal;font-size:15px;line-height:1.95; }
.vp-surf-root>.vp-surf-reading { font-size:17px; }
.vp-surf-reading img { max-width:100%;height:auto;border-radius:12px; }
.vp-surf-reading audio,.vp-surf-reading video { max-width:100%; }
.vp-surf-replies { border-top:7px solid #f1ecf5; }
.vp-surf-reply { padding:20px 24px 14px;background:#fff;border-bottom:1px solid var(--surf-line);position:relative;outline:0; }
.vp-surf-reply:hover { background:#fdfbff; }
.vp-surf-reply.is-selected { background:#f5f0fb;box-shadow:inset 3px 0 var(--surf-accent); }
.vp-surf-parent { border-top:1px solid var(--surf-line);position:relative; }
.vp-surf-parent::before { content:'返信元';display:block;padding:10px 24px 0;font-size:10px;color:var(--surf-muted);letter-spacing:.08em; }
.vp-surf-actions { display:flex!important;align-items:center;flex-wrap:wrap;gap:9px;float:none!important;clear:both;margin-top:14px!important;padding:8px 0 0!important;min-height:36px;color:var(--surf-muted);font-size:12px; }
.vp-surf-actions .bookmark-icon { display:inline-grid;place-items:center;width:33px;min-height:33px;border:0;border-radius:50%;background:transparent;font-size:22px;color:#a394b1; }
.vp-surf-actions .bookmark-icon.bookmarked { color:#ba5685;background:#fff0f6; }
.vp-surf-actions .bookmark-count { color:var(--surf-muted);margin-left:-7px; }
.vp-surf-actions button.vp-surf-compose { margin-left:5px;padding:4px 11px;border:0;min-height:31px;border-radius:99px;font-size:12px;color:var(--surf-accent);background:#f4eff9; }
.vp-surf-empty { padding:30px 24px;text-align:center;color:var(--surf-muted);font-size:13px; }
.vp-surf-more { display:block;width:calc(100% - 48px);margin:18px 24px 24px;padding:10px;color:var(--surf-accent)!important;background:#f8f4fc!important; }
.vp-surf-composer { flex:none;max-height:40dvh;overflow:auto;padding:14px 20px calc(13px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--surf-line);box-shadow:0 -5px 18px #32233e05; }
.vp-surf-composer label { font-size:11px;font-weight:700;color:var(--surf-muted);display:block;margin:0 0 6px; }
.vp-surf-composer textarea { display:block;box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid #e4ddeb;border-radius:12px;resize:vertical;min-height:68px;max-height:22dvh;font:inherit;line-height:1.7;background:#fdfbff;color:var(--surf-ink); }
.vp-surf-compose-actions { display:flex;align-items:center;gap:9px;margin-top:9px; }
.vp-surf-compose-actions button { padding:7px 13px;font-size:12px; }
.vp-surf-compose-actions [data-vp-surf-send] { margin-left:auto;background:var(--surf-accent);color:#fff;border-color:var(--surf-accent);font-weight:700;white-space:nowrap; }
.vp-surf-draft-hint { font-size:9px;color:var(--surf-muted);line-height:1.5; }
.vp-surf-gift-details { margin:16px 20px;padding:10px 14px;background:#fbf7ff;border:1px solid var(--surf-line);border-radius:14px; }
.vp-surf-gift-details summary { color:var(--surf-accent);font-size:12px;cursor:pointer;padding:6px 0; }
.vp-surf-dialog [hidden] { display:none!important; }
.vp-surf-dialog .link-card { max-width:100%;box-sizing:border-box; }
@media(min-width:761px) { body.vp-surf-open #microblog-timeline { scroll-margin-right:720px; } }
@media(max-width:1100px) and (min-width:761px) { .vp-surf-dialog { width:60vw; } .vp-surf-draft-hint { display:none; } }
@media(max-width:760px) { .vp-surf-dialog { width:100%;inset:0; } .vp-surf-header { padding:calc(10px + env(safe-area-inset-top)) 15px 10px; } .vp-surf-heading h2 { font-size:17px; } .vp-surf-eyebrow { font-size:8px; } .vp-surf-dialog .microblog-post.vp-surf-root,.vp-surf-reply { padding-left:18px;padding-right:18px; } .vp-surf-author time { font-size:9px; } .vp-surf-composer { padding-left:15px;padding-right:15px; } .vp-surf-draft-hint { display:none; } .vp-surf-nav { padding:8px 12px; } }
@media(prefers-reduced-motion:reduce) { .vp-surf-loading::before { animation:none; } }