/* Healify Web — app chrome. Tokens + fonts from colors_and_type.css (same folder). */
@import url("colors_and_type.css");

html, body { height: 100%; }
body { margin: 0; background: var(--bg-app); color: var(--fg-1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#root { height: 100vh; }

/* screen entrance — transform only so content never hides if animation is paused */
.screen-enter { animation: appScreenIn 300ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes appScreenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* hide scrollbars for a native feel */
.no-scrollbar::-webkit-scrollbar { width: 0; height: 0; }
.no-scrollbar { scrollbar-width: none; }

/* skeleton shimmer */
@keyframes wallShimmer { 0% { background-position: -180px 0; } 100% { background-position: 220px 0; } }
.wall-shimmer { background: linear-gradient(90deg, rgba(3,4,13,0.045) 25%, rgba(3,4,13,0.085) 50%, rgba(3,4,13,0.045) 75%); background-size: 400px 100%; animation: wallShimmer 1.25s ease-in-out infinite; }

@keyframes wallPulse { 0%,100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.12); opacity: 0.12; } }
@keyframes wallSpin { to { transform: rotate(360deg); } }
@keyframes wallPop { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); } }
@keyframes deskPop { from { transform: translateY(-8px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }

.rx-muted .wall-rx:not(.mine) { filter: grayscale(0.85); opacity: 0.62; }
@keyframes cardRise { from { transform: translateY(11px); } to { transform: none; } }
.wall-card-in { animation: cardRise 380ms cubic-bezier(.22,.61,.36,1) both; }
.desk-list-item:not(.is-selected):hover { box-shadow: inset 0 0 0 1px var(--ink-12, rgba(3,4,13,0.14)) !important; }

/* sidebar nav rows — active + hover via CSS so they track the route */
.desk-nav-row { background-color: transparent; }
.desk-nav-row.is-active { background-color: var(--quartz-soft-bg); }
.desk-nav-row:not(.is-active):hover { background-color: var(--ink-04, rgba(3,4,13,0.04)); }

/* clickable desktop cards — subtle lift on hover */
.dk-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(49,31,105,0.10) !important; }

/* sidebar collapses to an icon rail in the tight 960–1120px range */
@media (max-width: 1120px) {
  .dk-sidebar { width: 76px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .dk-navlabel, .dk-brandword, .dk-upgrade, .dk-navbadge { display: none !important; }
  .desk-nav-row { justify-content: center; padding-left: 0; padding-right: 0; }
}

html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  .screen-enter, .wall-card-in { animation: none !important; }
}