/* Parawise custom styles (Tailwind handles most; these are extras) */
:root { --pw-bg: #F6F5FA; --pw-card: #ffffff; --pw-border: rgba(79,70,229,0.10); }
.dark { --pw-bg: #0D0D14; --pw-card: #13131B; --pw-border: rgba(255,255,255,0.08); }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
.card { background: var(--pw-card); border: 1px solid var(--pw-border); }
.skeleton { position: relative; overflow: hidden; background: rgba(11,119,128,0.08); }
.dark .skeleton { background: rgba(255,255,255,0.06); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent); animation: shimmer 1.4s infinite; }
.dark .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.fade-in { animation: fadeIn .25s ease-out both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none;} }
.pop { animation: pop .3s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop { 0% { transform: scale(.7);} 100% { transform: scale(1);} }
.post-content a { color: #4F46E5; font-weight: 600; }
.dark .post-content a { color: #A5B4FC; }
.post-content a:hover { text-decoration: underline; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
textarea { field-sizing: content; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.masonry { column-count: 1; column-gap: 1rem; }
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
.masonry > * { break-inside: avoid; margin-bottom: 1rem; }
.nav-active { color: #4F46E5; }
.dark .nav-active { color: #A5B4FC; }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
input[type="file"] { display: none; }
.toast { pointer-events: auto; }
@media (max-width: 767px) { .hide-mobile { display: none !important; } }

/* ---- mobile "app-like" tap feel ---- */
* { -webkit-tap-highlight-color: transparent; }
button, a, .act, [role="button"] { touch-action: manipulation; }
/* Bigger, easier-to-hit tap targets on touch screens without changing visual size */
@media (hover: none) and (pointer: coarse) {
  .act { position: relative; }
  .act::before { content: ""; position: absolute; inset: -6px; }
}

/* ---- Social Realtime motion tokens: springy, alive ---- */
:root { --ease-back: cubic-bezier(.34,1.56,.64,1); --ease-out-soft: cubic-bezier(.25,.46,.45,.94); --dur-fast: .18s; --dur-med: .28s; }
button, a.act, .act, .tap-btn { transition: transform var(--dur-fast) var(--ease-back), opacity var(--dur-fast) var(--ease-out-soft), background-color var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft); }
@media (hover: none) {
  button:active, a.act:active, .act:active, .tap-btn:active { transform: scale(0.92); opacity: .85; }
  #bottom-nav a:active { transform: scale(0.9); }
}
.modal-pop { animation: modalPop var(--dur-med) var(--ease-back) both; }
@keyframes modalPop { 0% { opacity: 0; transform: scale(.92) translateY(8px); } 100% { opacity: 1; transform: none; } }