/* The previously approved discussion panel, with the native service inside. */
:is(#comments, .siwei-fc-section){--siwei-fc-control-border:var(--color-border);color:var(--color-typography);font-family:var(--font-body)}
:is(#comments, .siwei-fc-section) *,:is(#comments, .siwei-fc-section) *::before,:is(#comments, .siwei-fc-section) *::after{box-sizing:border-box}
:is(#comments, .siwei-fc-section) [hidden]{display:none!important}
:is(#comments, .siwei-fc-section) .siwei-fc-panel{position:relative;width:min(var(--content-width),calc(100% - var(--site-gutter,20px)*2));margin:0 auto;padding:24px;border:1px solid var(--color-border);border-radius:var(--radius-lg,24px);background:var(--color-background-tone);box-shadow:none}
:is(#comments, .siwei-fc-section) .siwei-fc-account{display:flex;align-items:center;margin-bottom:12px}
:is(#comments, .siwei-fc-section) .siwei-fc-account:has(> .siwei-fc-member[hidden]){display:none}
:is(#comments, .siwei-fc-section) .siwei-fc-member{display:inline-flex;align-items:center;max-width:100%;gap:10px;color:var(--color-typography);text-decoration:none}
:is(#comments, .siwei-fc-section) .siwei-fc-member__avatar{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border:1px solid var(--color-border);border-radius:50%;overflow:hidden;background:var(--color-background)}
:is(#comments, .siwei-fc-section) .siwei-fc-member__avatar img{width:100%;height:100%;object-fit:cover}
:is(#comments, .siwei-fc-section) .siwei-fc-member__details{display:flex;min-width:0;flex-direction:column;font-size:14px;line-height:1.35}
:is(#comments, .siwei-fc-section) .siwei-fc-member__email{font-size:12px;color:var(--color-typography-tone);overflow-wrap:anywhere}
:is(#comments, .siwei-fc-section) .siwei-fc-editor-shell{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "native";align-items:center;row-gap:6px}
:is(#comments, .siwei-fc-section) .siwei-fc-editor-label{grid-area:label;height:18px;font-size:13px;line-height:18px;font-weight:600}
:is(#comments, .siwei-fc-section) .siwei-fc-retry{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:128px;padding:10px 24px;border:1px solid var(--color-border);border-radius:var(--radius-md,22px);background:var(--color-background);color:var(--color-typography);font:inherit;font-size:14px;line-height:22px;font-weight:700;box-shadow:none;cursor:pointer;text-decoration:none;transition:color .2s}
:is(#comments, .siwei-fc-section) .siwei-fc-retry:hover{color:var(--color-brand)}
:is(#comments, .siwei-fc-section) .siwei-fc-retry:focus-visible{outline:none;text-decoration:underline;text-underline-offset:4px;box-shadow:none}
:is(#comments, .siwei-fc-section) .siwei-fc-member:focus-visible{outline:1px solid var(--color-typography);outline-offset:3px;box-shadow:none}
:is(#comments, .siwei-fc-section) .siwei-fc-state{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:14px;font-weight:400;line-height:22px;color:var(--color-typography-tone);margin:0 0 16px}
:is(#comments, .siwei-fc-section) .siwei-fc-native{grid-area:native;min-height:0}
@media(max-width:480px){:is(#comments, .siwei-fc-section) .siwei-fc-panel{position:relative;padding:20px 16px}}

/* Loading and errors use the same typography and spacing as the editor. */
:is(#comments, .siwei-fc-section):not(.is-ready) .siwei-fc-editor-shell{height:220px;min-height:220px;overflow:hidden}
:is(#comments, .siwei-fc-section):not(.is-ready) .siwei-fc-native,
:is(#comments, .siwei-fc-section):not(.is-ready) .siwei-fc-editor-label{visibility:hidden;pointer-events:none}
:is(#comments, .siwei-fc-section)[data-state="error"] .siwei-fc-editor-shell{height:0;min-height:0}
:is(#comments, .siwei-fc-section)[data-state="error"] .siwei-fc-state{margin-bottom:12px}
:is(#comments, .siwei-fc-section) .siwei-fc-retry{margin:0}
:is(#comments, .siwei-fc-section):not(.is-ready) .siwei-fc-account{display:none}
:is(#comments, .siwei-fc-section):not(.is-ready):not([data-state="error"]) .siwei-fc-editor-shell::before{
 content:"";position:absolute;inset:0 0 auto;height:112px;
 border:1px solid var(--color-border);border-radius:var(--radius-md,22px);
 background:var(--color-background);pointer-events:none;
}
:is(#comments, .siwei-fc-section):not(.is-ready):not([data-state="error"]) .siwei-fc-editor-shell::after{
 content:"";position:absolute;inset:132px auto auto 0;width:96px;height:40px;
 border:1px solid var(--color-border);border-radius:16px;
 background:var(--color-background);pointer-events:none;
}
:is(#comments, .siwei-fc-section)[data-state="loading"] .siwei-fc-state::before{
 content:"";width:12px;height:12px;flex:0 0 12px;border:2px solid var(--color-border);
 border-top-color:var(--color-typography-tone);border-radius:50%;animation:siwei-comment-loading 1s linear infinite;
}
@keyframes siwei-comment-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){:is(#comments, .siwei-fc-section) .siwei-fc-state::before{animation:none}}
