.feed-container{display:flex;flex-direction:column;gap:1rem}.feed-loading{text-align:center;padding:2rem;color:var(--color-muted, #6b7280);font-size:var(--text-base);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;width:100%}.feed-loading p{margin:0;font-size:var(--text-sm);color:var(--color-muted, #6b7280)}.feed-empty{text-align:center;padding:4rem 2rem;color:var(--color-muted, #6b7280);display:flex;flex-direction:column;align-items:center;gap:1rem}.feed-empty p{margin:0;font-size:var(--text-base);max-width:500px;line-height:1.6}.post-skeleton{opacity:.7;pointer-events:none;position:relative;overflow:hidden}.post-detail-loading{min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.skeleton-text{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;min-height:1em;color:transparent}.skeleton-text:before{content:"Loading...";visibility:hidden}.post-skeleton .js-post-title.skeleton-text{width:60%;height:1.5rem;margin-bottom:.5rem}.post-skeleton .js-post-body.skeleton-text{width:100%;height:3rem;margin-top:.5rem}.skeleton-image{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--border-radius-md, 8px);min-height:300px;width:100%}.post-skeleton .feed-post-meta{opacity:.5}.post-skeleton .feed-post-meta span{display:inline-block;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;color:transparent;min-width:100px;height:1rem}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.feed-error{text-align:center;padding:2rem;background:#fee2e2;border:1px solid #fecaca;border-radius:8px;color:#991b1b;display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:600px;width:100%}.post-detail-loading{text-align:center;padding:4rem 2rem;color:var(--color-muted, #6b7280);font-size:var(--text-base);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.post-detail-loading p{margin:0;font-size:var(--text-sm);color:var(--color-muted, #6b7280)}.feed-error p{padding:0}.feed-retry-btn{padding:.5rem 1rem;background:#dc2626;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:var(--text-sm);font-weight:600}.feed-retry-btn:hover{background:#b91c1c}.feed-signin-prompt{text-align:center;padding:3rem 2rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px}.feed-signin-prompt p{padding:0;color:var(--color-muted, #6b7280)}.feed-signin-btn{padding:.75rem 1.5rem;background:var(--color-brand, #000000);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:var(--text-sm);font-weight:600}.feed-signin-btn:hover{background:var(--color-brand-dark, #1a1a1b)}.feed-post-card{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;padding:1rem;border:1px solid #e5e7eb;display:flex;flex-direction:column;gap:1rem;transition:box-shadow .2s ease,transform .1s ease,opacity .45s ease-out,transform .45s ease-out;will-change:opacity,transform}.post-preview-card,.feed-post-card{opacity:1;transform:translateY(0);transition:opacity .45s ease-out,transform .45s ease-out,box-shadow .2s ease;will-change:opacity,transform}.post-preview-card.js-post-clickable,.feed-post-card.js-post-clickable{cursor:pointer;position:relative;transition:box-shadow .2s ease,transform .1s ease,background-color .2s ease}.post-preview-card.js-post-clickable:hover,.feed-post-card.js-post-clickable:hover{box-shadow:0 4px 6px #00000026,0 2px 4px #0000001f;transform:translateY(-1px);background-color:var(--color-light-bg, #f9fafb)}.post-preview-card.js-post-clickable:active,.feed-post-card.js-post-clickable:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a,0 1px 2px #00000014}.post-preview-card.js-post-clickable:focus-visible,.feed-post-card.js-post-clickable:focus-visible{outline:2px solid var(--color-brand, #000000);outline-offset:2px}.post-preview-card.js-post-clickable *,.feed-post-card.js-post-clickable *{cursor:pointer}.post-preview-card.js-post-clickable button,.post-preview-card.js-post-clickable a,.post-preview-card.js-post-clickable .js-comment-vote,.post-preview-card.js-post-clickable .js-comment-count-btn,.post-preview-card.js-post-clickable .js-post-share-trigger,.post-preview-card.js-post-clickable .js-share-trigger,.post-preview-card.js-post-clickable .js-share-menu,.post-preview-card.js-post-clickable [role=button],.post-preview-card.js-post-clickable [role=menuitem],.post-preview-card.js-post-clickable input,.post-preview-card.js-post-clickable textarea,.post-preview-card.js-post-clickable select,.feed-post-card.js-post-clickable button,.feed-post-card.js-post-clickable a,.feed-post-card.js-post-clickable .js-comment-vote,.feed-post-card.js-post-clickable .js-comment-count-btn,.feed-post-card.js-post-clickable .js-post-share-trigger,.feed-post-card.js-post-clickable .js-share-trigger,.feed-post-card.js-post-clickable .js-share-menu,.feed-post-card.js-post-clickable [role=button],.feed-post-card.js-post-clickable [role=menuitem],.feed-post-card.js-post-clickable input,.feed-post-card.js-post-clickable textarea,.feed-post-card.js-post-clickable select{cursor:default}.post-detail-container .post-preview-card{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;padding:1rem;border:1px solid #e5e7eb;display:flex;flex-direction:column;gap:.5rem}.feed-post-meta{display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);color:var(--color-muted, #6b7280);flex-wrap:wrap}.feed-post-username{font-weight:600;color:var(--color-foreground, #1f2937)}.feed-post-separator{color:var(--color-muted, #9ca3af)}.feed-post-time{color:var(--color-muted, #6b7280)}.post-reactions__container{display:flex;align-items:center;gap:.5rem}.pill-btn:active{transform:scale(.95)}.pill-btn:focus-visible{outline:2px solid var(--color-brand, #000000);outline-offset:2px}.load-more-posts-wrapper{display:flex;justify-content:center;padding:2rem 1rem}.load-more-posts-btn{background:var(--color-brand, #000000);color:#fff;border:none;border-radius:8px;padding:.875rem 2rem;font-size:var(--text-base, 16px);font-weight:var(--font-weight-semibold, 600);cursor:pointer;transition:all .2s ease;min-height:44px;min-width:120px;gap:.5rem}.load-more-posts-btn:hover{background:var(--color-brand-dark, #1a1a1b);transform:translateY(-1px);box-shadow:0 4px 6px #00000026}.load-more-posts-btn:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.load-more-posts-btn:focus-visible{outline:2px solid var(--color-brand, #000000);outline-offset:2px}.load-more-posts-btn[disabled]{opacity:.8;cursor:not-allowed;transform:none;box-shadow:none}.load-more-posts-text{display:inline-block}.load-more-posts-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:load-more-spin .8s linear infinite}@keyframes load-more-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:767px){.load-more-posts-wrapper{padding:1.5rem 1rem}.load-more-posts-btn{padding:.75rem 1.5rem;font-size:var(--text-sm, 14px);width:100%;max-width:300px}}.toast-container{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:.75rem;z-index:10000;pointer-events:none}.toast{background-color:var(--bg-surface, #ffffff);color:var(--text-primary, #111827);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f,0 0 0 1px #0000000d;border-radius:9999px;padding:.75rem 1.25rem;font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:.5rem;opacity:0;transform:translateY(1rem);transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:auto;min-width:280px;max-width:90vw;border:1px solid var(--border-color, #e5e7eb)}.toast.show{opacity:1;transform:translateY(0)}.toast--success{border-left:4px solid var(--color-success, #10b981)}.toast--error{border-left:4px solid var(--color-error, #ef4444)}.toast--info{border-left:4px solid var(--color-primary, #2563eb)}.toast__icon{width:1.25rem;height:1.25rem;flex-shrink:0}.toast--success .toast__icon{color:var(--color-success, #10b981)}.toast--error .toast__icon{color:var(--color-error, #ef4444)}.toast--info .toast__icon{color:var(--color-primary, #2563eb)}
